* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    color: #000;
}

body {
    background-color: #E9E9E9;
}

h1 {
    font-size: 3em;
    font-weight: 900;
    padding-bottom: .1em;
}
h1 span {
    font-weight: 400;
    color: #DF5A01;
}
span.extra-bold {
    font-weight: 900;
}
h2 {
    font-size: 1.6em;
    padding-bottom: 1em;
}
h3 {
    font-size: 2em;
    font-weight: bold;
    padding-bottom: 1em;
}
h3.bigger {
    font-size: 2.5em;
    font-weight: 900;
    padding-bottom: .5em;
}
p {
    font-size: 1.2em;
    padding-bottom: .8em;
}

a:hover {
    text-decoration: none;
}

.button-style {
    color: #E9E9E9;
    background-color: #36367F;
    padding: .75em 1em;
    border-radius: 10px;
    transition: background-color .5s ease;
}
.button-style:hover {
    color: #FFF;
    background-color: #27275a;
}

.text-right {
    text-align: right;
}

.middle-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.white-text {
    color: #FFF;
}

.container {
    max-width: 1200px !important;
}

.bg-light {
    max-width: 1500px !important;
    margin: auto;
    background-color: #E9E9E9 !important;
}
.navbar-light .navbar-nav .nav-link {
    color: #000 !important;
    font-weight: bold !important;
    font-size: 20px !important;
}

#tecnologias,
#nuestro-trabajo {
    background-image: url('assets/background.jpeg');
    background-size: cover;
    padding: 7em 0;
}


.carousel.slides {
    width: 100%;
    height: auto;  
    margin: 0 0 0px 10px;
    position: relative;
    overflow: hidden;
}

.slideList {
    overflow: hidden;
    position: relative;
    width: 60%;
    height: 100%;
    float: left;
}

.slideList li {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
}
.slideList li p {
    color: #FFF;
    padding: 0 0 0 1.5em;
    margin-top: .85em;
    background-image: url('assets/list\ 2.svg');
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: top .25em left;
}

.slideList li.active {
    display: block;
}

.carousel.slides .slideList ul {
    left: 0;
    width: 100%;
    height: 100%;
}

/**** Carousel Tabs ****/
.carousel.slides > .carouselLinks {
    float: left;
    height: auto;
    width: 40%;
    margin:0;
}
.carousel.slides > .carouselLinks ul {
    position: static;
    width: 100%;
}

.carousel.slides > .carouselLinks li {
    float: none;
    position: relative;
}

.carousel.slides > .carouselLinks a {
    display: block;
    outline: 0;
    font-size: 20px;
    padding: 2em;
    color: #FFF;
}

.carousel.slides > .carouselLinks li a:hover {
    color: #DF5A01;
    text-decoration: underline;
}

.carousel.slides > .carouselLinks li.selected a {
    color: #DF5A01;
    text-decoration: underline;
}

.carousel.slides > .carouselLinks li a:after {
    content: '';
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
}
.carousel.slides > .carouselLinks li a:hover:after,
.carousel.slides > .carouselLinks li.selected a:after {
    content: '';
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;

    background-image: url('assets/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: .5em;
}


#beneficios {
    background-image: url('assets/background\ 2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #D9D9D9;
    padding: 8em 0;
}
#beneficios ul {
    list-style: none;
}
#beneficios ul li {
    font-size: 1.2em;
    line-height: 1.2em;
    padding-bottom: 1em;
    padding-left: 1.5em;
    background-image: url('assets/list.svg');
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: top .15em  left;
}
#beneficios ul li em {
    color: #DF5A01;
}

#nuestro-trabajo {
    padding: 8em 0;
}
#nuestro-trabajo ol {
    list-style: none;
}
#nuestro-trabajo ol li {
    color: #FFF;
    padding: 2em 2em 0 4em;
}
#nuestro-trabajo ol li:nth-child(1):before,
#nuestro-trabajo ol li:nth-child(2):before,
#nuestro-trabajo ol li:nth-child(3):before,
#nuestro-trabajo ol li:nth-child(4):before {
    content: '1';
    position: absolute;
    left: 1em;
    color: #FFF;
    padding: .5em 1em;
    background-color: #DF5A01;
    border-radius: 6px;
    z-index: 1;
}
#nuestro-trabajo ol li:nth-child(2):before {
    content: '2';
}
#nuestro-trabajo ol li:nth-child(3):before {
    content: '3';
}
#nuestro-trabajo ol li:nth-child(4):before {
    content: '4';
}
#nuestro-trabajo ol li:after {
    content: '';
    position: absolute;
    top: 150px;
    left: 2.3em;
    width: 1px;
    height: 65%;
    background-image: url('assets/lines.svg');
    background-size: contain;
    background-position: center;
}

#nuestro-trabajo ol li h2 {
    padding-bottom: 0;
    font-weight: bold;
}
#nuestro-trabajo ol li p {
    margin-bottom: 0;
    padding-bottom: 0;
    color: #FFF;
    font-size: 1.1em;
    font-weight: 400;
}
#nuestro-trabajo ol li p strong {
    color: #FFF;
}

#contactanos {
    background-image: url('assets/background\ 3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #D9D9D9;
    padding: 15em 0;
}

.circular-button {
    padding: 3em 1em;
    border-radius: 100%;
    background-color: #36367F;
    color: #FFF;
    transition: background-color .5s ease;
}
.circular-button:hover {
    color: #FFF;
    background-color: #27275a;
}

footer {
    padding: 2em 0;
    background-color: #36367F;
}
footer p {
    font-size: 1em;
}
footer .social-icons a {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 1em;
    border-radius: 100%;
}
footer .social-icons a.facebook {
    background-image: url('assets/icons/Facebook.png');
}
footer .social-icons a.instagram {
    background-image: url('assets/icons/Instagram.png');
}
footer .social-icons a.linkedin {
    background-image: url('assets/icons/LinkedIn.png');
}

.portafolio {
    height: 460px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    padding: 1.5em;
    position: relative;
}
.portafolio:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);
    transition: all .5s ease;
}
.portafolio:hover:before {
    width: 95%;
    height: 95%;
    top: 2.5%;
    left: 2.5%;
    background: rgba(0, 0, 0, 0.7);
    filter: blur(20px);
}
.portafolio .hidden {
    opacity: 0;
    transition: opacity .5s ease;
    z-index: 1;
}
.portafolio:hover .hidden {
    opacity: 1;
}
.portafolio .middle-text {
    height: 300px;
    z-index: 1;
    width: 100%;
}
.portafolio .location:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 23px;
    height: 27px;
    vertical-align: middle;
    margin-top: -.35em;
    margin-right: .5em;
    background-image: url('assets/location.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.portafolio p {
    font-size: 1em;
}
.portafolio p:hover {
    cursor: pointer;
}

.portafolio.alena {
    background-image: url('assets/portafolio/1.jpeg');
}
.portafolio.gaura {
    background-image: url('assets/portafolio/2.jpeg');
}
.portafolio.inhaus {
    background-image: url('assets/portafolio/3.jpeg');
}
.portafolio.alaia {
    background-image: url('assets/portafolio/4.jpeg');
}
.portafolio.cayetano {
    background-image: url('assets/portafolio/5.jpeg');
}
.portafolio.allandale {
    background-image: url('assets/portafolio/6.jpeg');
}
.portafolio.nogales {
    background-image: url('assets/portafolio/7.jpeg');
}
.portafolio.tomus {
    background-image: url('assets/portafolio/8.jpeg');
}
.portafolio.brisia {
    background-image: url('assets/portafolio/9.jpeg');
}
.portafolio.santa {
    background-image: url('assets/portafolio/10.jpeg');
}
.portafolio.koru {
    background-image: url('assets/portafolio/11.jpeg');
}
.portafolio.avita {
    background-image: url('assets/portafolio/12.jpeg');
}
.portafolio.elemento {
    background-image: url('assets/portafolio/13.jpeg');
}
.portafolio.skalo {
    background-image: url('assets/portafolio/14.jpeg');
}
.portafolio.statera {
    background-image: url('assets/portafolio/15.jpeg');
}

.tag {
    display: inline-block;
    margin-right: 2em;
    background-color: #C4C4C4;
    padding: 1em;
    border-radius: 20px;
    color: #000;
}
.tag:first-child {
    margin-right: 2em;
}
.tag.location:before {
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 23px;
    height: 27px;
    background-image: url('assets/location\ black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1em;
    margin-top: -.5em;
}

.modal-dialog {
    max-width: 80% !important;
}
.modal-content {
    padding: 1em;
}
.modal-header {
    border-bottom: none;
}
.modal-body {
    padding: 1em 5em;
}

.campus {
    background-color: #FFF;
    margin-bottom: 2em;
}
.campus .desc {
    padding: 2em;
    font-size: .85em;
}
.campus .desc h3,
.campus .desc p {
    padding-bottom: 0;
}
.campus .desc a,
.campus .desc p.grey-text {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.6);
    display: inline-block;
}

.contact-form {
    position: relative;
    padding: 0 0 3em;
    height: 95%;
    text-align: left;
}
.contact-form:before {
    box-shadow: 0px 390px 156px rgba(0, 0, 0, 0.01), 0px 220px 132px rgba(0, 0, 0, 0.05), 0px 98px 98px rgba(0, 0, 0, 0.09), 0px 24px 54px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    content: '';
    position: absolute;
    width: 100%;
    height: 95%;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: #FFF;
}
.contact-form h3 {
    font-size: 3em;
    font-weight: 900;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    border: none;
    border-bottom: 2px solid #000;
    width: 100%;
    padding: 1em;
    margin-bottom: 2em;
}

input[type="submit"] {
    background-color: #000;
    color: #FFF;
    margin-top: 2em;
    margin-left: 5em;
    padding: 1em 6.5em;
    border: none;
    border-radius: 20px 0 0 20px;
}

@media screen and (min-width: 481px) {
    .extra-padding {
        padding: 0 4em;
    }

    #tecnologias {
        margin-top: -8.5em;
    }

    .mt-50 {
        margin-top: 8em;
    }

    .mt-30 {
        margin-top: 5em;
    }

    .mt--30 {
        margin-top: -5em;
    }

    .navbar-light .navbar-nav .nav-link {
        margin-right: 3em;
    }

    .campus {
        filter: drop-shadow(0px 192px 77px rgba(0, 0, 0, 0.01)) drop-shadow(0px 108px 65px rgba(0, 0, 0, 0.05)) drop-shadow(0px 48px 48px rgba(0, 0, 0, 0.09)) drop-shadow(0px 12px 26px rgba(0, 0, 0, 0.1)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
    }
}

@media screen and (max-width: 1199px) {
    .mt-50 {
        margin-top: 0;
        margin-bottom: 1em;
    }

    .mt-30 {
        margin-top: 0;
        margin-bottom: 1em;
    }

    .mt--30 {
        margin-top: 0;
        margin-bottom: 1em;
    }
}

:focus {
    outline: none !important;
}

@media screen and (max-width: 480px) {

    .navbar img {
        width: 45% !important;
    }
    .navbar-nav {
        margin-bottom: 1em !important;
    }

    h2 {
        font-size: 1.35em;
    }
    .px-0 {
        padding: 0 1em !important;
    }

    #hero br {
        display: none;
    }

    .carousel.slides > .carouselLinks,
    .slideList {
        width: 94%;
        padding: .75em;
    }
    .carousel.slides > .carouselLinks a {
        padding: .5em;
    }
    .slideList {
        height: 500px !important;
    }

    #beneficios .col-sm-5 {
        padding-top: 2em;
    }

    #contactanos {
        padding: 2em 0;
    }
    .circular-button {
        display: block;
        padding: 5em 1em;
    }

    .portafolio {
        margin-bottom: 1.5em;
    }
    
    .modal-dialog {
        max-width: 100% !important;
    }
    .modal-body {
        padding: 1em;
    }
    
    .tag {
        margin-right: .5em;
        padding: .5em;
        border-radius: 6px;
    }

    .contact-form {
        margin-top: 4em;
        padding: .75em;
    }

    input[type="submit"] {
        margin: 3em 0 1em;
        border-radius: 12px;
    }

    footer,
    .text-right {
        text-align: center !important;
    }

    footer .social-icons a:first-child {
        margin-left: 0;
    }
    footer .social-icons a {
        width: 2.5em;
        height: 2.5em;
    }
}