.navbar-brand img{
    width: 300px;
}

.menu{
    font-family: 'Montserrat', sans-serif;
}

.menu-icons a:nth-child(1) img, .menu-icons a:nth-child(2) img{
    width: 60px;
    margin-left: 7px;
    margin-right: 7px;
}

.menu-icons a:nth-child(3) img{
    width: 60px;
    margin-left: 7px;
}

.menu a{
    font-weight: 600;
}

.modal-dialog .w-100{
    width: 100%!important;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
}

.slider1, .slider2{
    height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-style: italic;
}

.slider1 h5, .slider2 h5{
    font-size: 4vw;
    color: #FFF;
    font-weight: 600;
}

.slider1 button, .slider2 button{
    font-size: 20px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
} 

.modal-title {
    display: none;
}

.modal-header, .modal-content{
    background-color: transparent!important;
}

.modal-header {
    padding: 1rem 10px!important;
}

.modal-header, .modal-content{
    border: none!important;
}

.modal-header button{
    background-color: white;
}

.modal-body{
    background-color: white;
}

.slider2 h6{
    color: white;
    font-size: 3vw;
}

.slider1{
    background-image: url("../img/banner-1.png");
}

.slider2{
    background-image: url("../img/banner-2.png");
}

#nosotros{
    background-color: #fff;
}

#nosotros img {
    width: 250px;
}

#nosotros h2{
    color: #001338;
    font-size: 3.1vw;
    /* font-size: calc(1em + 1.1vw); */
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
}

#nosotros p{
    color: #020202;
    font-size: calc(0.6em + 0.6vw);
    font-family: 'Montserrat', sans-serif;
}

#nosotros .imagenes{
    position: relative;
}

#valores{
    background-color: #001338;
}

#valores img{
    width: 250px;
}

#valores h2{
    color: #FFF;
    font-size: 3.1vw;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
}

#valores p{
    color: #FFF;
    font-size: calc(0.6em + 0.6vw);
    font-family: 'Montserrat', sans-serif;
}

#mejores{

}

#mejores h1{
    color: #FFF;
    font-size: 4vw;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
    font-style: italic;
}

.somos_mejores{
    background-image: url("../img/banner-somos-los-mejores-del-emrcado.png");
    height: 280px;
}

#servicios{
    background-image: url("../img/serviciosbk.svg");
    height: 550px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    position: relative;
    text-align: center;
}

#servicios h1{
    color: #FFF;
    font-size: calc(1em + 2.5vw);
    font-weight: 700;
}

#servicios h6{
    color: #FFF;
    font-size: calc(.6em + .4vw);
    font-weight: 600;
    font-family: 'Rubik', sans-serif;
}

.card{
    background-color: inherit!important;
    border: none!important;
}

.card-img img{
    width: 200px;
    height: 200px;
}

#proyetos{
    background-color: #FFF;
}

#proyetos img {
    width: 250px;
    height: 200px;
}

#proyetos h2{
    color: #001338;
    font-size: 3.1vw;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
}

#proyetos p{
    color: #020202;
    font-size: calc(0.6em + 0.6vw);
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}

#proyetos ul li{
    font-weight: 400;
    font-size: calc(0.6em + 0.5vw);
    font-family: 'Montserrat', sans-serif;
}

footer{
    background-color: #001338;
}

footer ul{
    list-style: none;
    padding-left: 0;
}

.menu-icons svg{
    font-size: 60px;
    color: #001338;
}

.menu-icons a{
    width: auto;
    height: auto;
}

footer h3{
    color: #FFF;
    font-size: 1.8vw;
    margin-bottom: 40px;
    font-weight: 700;
}

.contacto{
    margin-bottom: 25px;
}

footer .contacto p{
    color: #FFF;
    font-size: 1.4vw;
    font-weight: 600;
    margin-bottom: 25px;
    margin-bottom: 0px;
}

.contacto-item{
    width: 80px;
}

.contacto-item img{
    height: 40px;
}

#contacto h1{
    color: white;
    font-size: 40px;
    /* margin-bottom: 60px; */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

#contacto a{
    text-decoration: none;
}

.correo-contacto{
    width: 60px;
    margin-left: -10px;
}

footer ul li img{
  height: 40px;
}


@media all and (max-width: 767px) {
    #servicios{
        height: auto;
    }

    .card-img img{
        width: 280px;
        height: 280px;
    }

    .slider1 h5, .slider2 h5 {
        font-size: 30px;
    }

    #valores img {
        width: 160px;
    }

    #proyetos img{
        width: 48%;
        height: auto;
    }

    #mejores h1{
        font-size: 7vw;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
    }

    #valores h2, #nosotros h2, #proyetos h2, #servicios h1{
        font-size: 32px;
        text-align: center;
    }

    #servicios h6{
        font-size: 20px;
    }

    #valores p, #nosotros p, #proyetos p{
        font-size: 16px;
    }

    #proyetos ul li{
        font-size: 14px;
    }

}


/**/

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }

    .slider1, .slider2{
        height: 250px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    footer .contacto p{
        font-size: 20px;
    }

    #contacto h1{
        font-size: 30px;
    }

    .contacto{
        justify-content: space-between;
    }
}

@media (max-width: 425px) {
    .navbar-brand img{
        width: auto;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}