@media only screen and (max-width:600px){
    .navbar-brand img{
        width: 150px;
        height: auto;
        margin: 4% 6%;
    }
/* home*/
    .carousel-caption a {
        display: block;
        margin: 60px auto 5% auto;
        height: 40px;
    }

    .boton{
        display: block;
        margin: 60px auto 5% auto;
        height: 40px;
    }


    #section-1 .text-content{
        padding:10% 5%;
    }

    #section-2 .row, #section-3 .row {
        margin: 0;
    }

    #section-2 .texto{
        padding:15% 10%;
    }
    
    .videoWrapper {
        position: relative;
        padding:15% 0;
        height: 100%;
    }

    .videoWrapper iframe {
        position: relative;
    }

    #contacto{
        margin-top:30%;
        padding:20% 5%;
    }

    footer .medio-izq{
        margin-top:20%;
    }

    footer .medio{
        margin-top:6%;
    }

    .btn-footer-llamar{
        display: block;
        margin: 0 auto;
        padding-left: 0;
    }

    .btn-submit-gont{
        width:40%;
        margin-bottom:15%;
    }


    footer .bg-naranja{
        margin-top:15%;
    }
/* nosotros */
    #section-7 .texto{
        padding:20% 5%;
    }

    #section-9{
        padding:20% 10%;
    }
    .img-cert{
        padding:10% 0;
    }
/* services*/
    .ancho9 {
        width: 100% !important;
    }
/* it solutions */
    #section-10{
        padding:15% 5%;

    }

    #section-11 .texto{
        margin:0;
    }

    .section-texto{
        padding:10%;
    }

    #section-12 .title-5 {
        margin-top:10% !important;    
    }

    #section-12 p {
        margin-bottom:10% !important;    
    }

    #section-12>.container-fluid>.col-xs-12>img {
        margin-top: 80% !important;
    }

    /* gontor family */
    #section-14 .texto {
        padding: 15% 5% !important;
    }

    #section-14 .reves .text-orange {
        padding: 15% 5% !important;
    }

    #section-14 {
        margin-bottom: 0%;
    }


}





@media only screen and (max-width:767px){
    #section-2 img{width:100% !important;}
    body{overflow-x: hidden; text-align: center;}
    p{width: 100% !important;}
    button{outline: none !important;}
    .titulo-slider{
        font-size: 11vw;
        text-align: center;
        width: 100% !important;
    }
    .carousel-caption p{ font-size: 6vw; text-align: center; width: 100% !important;}
    #section-2 .row, #section-3 .row{        margin-right: 0;    }
    #section-1 img{        margin:0;    }
    .carousel-control-prev, .carousel-control-next{        margin:5%;    }
    .carousel-caption{ padding: 0; margin:0; height: 100vh !important;}
    .carousel-caption a{display: block; margin: 60px auto 5% auto; height: 40px;}
    .navbar-collapse{
        height: 100vh;
        right: 0;
        width: 100%;
        flex-direction: column;
        transition: all 1s ease;
        -o-transition:all 1s ease;
        -ms-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -webkit-transition:all 1s ease;
        background: #fff;
        color: black !important;
    }
    .navbar-toggler{         color: white;    }
    .nav-link, .nav-link:hover{color: black;}
    .color-navbar{         background-color: white;    }
    .navbar{         margin: 0 !important;         padding: 0 !important;    }
    .nav-item{ padding: 3%;}
    .navbar-brand{margin: 2%;}
    #section-1 .text-id{font-size: 3vw !important; }
    #section-1 .content{font-size: 6vw !important;}
    .title-3, #section-7 h3{         font-size: 9vw;    }
    .title-2{font-size: 10vw;}
    .format-2, #section-7 .texto p, #section-9 p{font-size: 5vw;}
    section a, footer img{display: block; margin: 0 auto;}
    .text-right{text-align: center !important;}
    #section-2 .texto a{margin-top: 5%; margin-bottom: 5%;}
    #section-4 .recuadro{         margin-bottom: 5%;    }
    #section-4 h4{ font-size: 7vw; display: block; margin: 5% auto;}
    #contacto h2{margin-top: 8%; margin-bottom: 2%;}
    #contacto .form-group{ margin: 0;}
    .btn-book{width: 50%;}
    #btn-ft{display: block; margin: 0 auto; padding-left: 0;}
    #hero-empresa, #hero-it, #hero-gf{height: 100vh; padding-top: 50%;}
    #section-6 .row, #section-9 .row{ margin: 0; padding: 0;}
    #section-7 p{font-size: 8vw;}
    #section-9 img{margin-bottom: 20%;}
    footer .medio-izq, footer .medio{margin-bottom: 5%;}
    #servicios .col-xs-12{margin-bottom:7%;}
    #servicios .col-xs-12 a{font-size: 5vw;}
    .btn-f{padding: 4%;} .down{padding:2% 0;}
    #servicios ul{text-align: left;}
    #servicios div.row{padding: 0; margin:0;}
    #section-12 .title-5{font-size: 10vw; width: 100% !important; padding:0; margin:0;}
    #section-12 .top-left{top:0; left:0;}
    #section-12 .top-left h2{color: #FF6B00;}
    #section-12 .top-left p{color: black; width: 100% !important;}
    #section-12>.container-fluid>.col-xs-12>img{margin-top: 60%;}
    #section-10 .title-5{font-size: 11vw; width: 100% !important;}
    .title-5{font-size:10vw}
    #section-11 h2.ancho{width: 100% !important;}
    #section-12 h2, #section-12 p{width:100% !important;}
    #section-12 .texto2, #section-12 .bg-gray .texto{padding:6%;}
    #section-7 .text-white h3{ width: 100%;    }

}

@media only screen and (min-width:768px) and (max-width:991px){
    .carousel-inner .carousel-item img{         height: 75vh;    }
    .navbar-collapse{
        height: 100vh;
        right: 0;
        width: 100%;
        flex-direction: column;
        transition: all 1s ease;
        background: #fff;
    }
    .navbar-toggler{         color: black;    }
    .navbar{         margin: 0 !important;         padding: 0 !important;    }
    .navbar-brand, .navbar-toggler{margin: 5%;}
    .nav-link, .nav-link:hover{color: black;}
    .color-navbar{         background-color: white;    }
    .nav-item{ padding: 3%;}
    p{width: 100% !important;}
    .titulo-slider{
        font-size: 10vw;
        text-align: left;
        width: 100% !important;
    }
    .text-id{font-size: 1.5vw;}
    #section-1 .content{
        font-size: 3vw;
        margin-bottom: 3%;
    }
    #section-1 img{margin-left: 6%;}
    .title-3{font-size: 4vw;  }
    #section-2 .texto{padding-top: 0;}
    #section-2 .texto p{font-size: 2vw; margin: 0; }
    #section-2 .texto a{margin: 5% 0 0 0; width: 50%;}
    .btn{height: 40px;  font-size: 1.8vw;}
    #section-4 h4{font-size: 2.2vw;}
    #contacto h2, .form-group{margin-top: 15%;}
    #contacto h2{font-size: 8vw;}
    #contacto p{font-size: 2.5vw; text-align: center;}
    footer .medio-izq img{width: 80%;}
    .btn-book{width: 100%; padding: 0; margin: 0;}
    #btn-ft{padding: 0 3%;  margin: 0;}
    .btn-footer-llamar{padding-left: 5%;}
    #section-7 h3{font-size: 4vw;}
    #section-7 .texto p{font-size: 2.5vw;}
    .img-cert img{width: 90%;}
    #descripcion h2{font-size: 6vw; width: 100% !important;}
    #descripcion{border: 1px solid blue; padding: 0 !important; margin: 0 !important;}
    #descripcion .container-fluid{margin:2% 0 0 2%; width: 95%;}
    #servicios div.row{padding: 0; margin:0 0 5% 0;}
    #servicios .col-xs-12 a{font-size: 2.2vw;}
    .title-5{font-size: 6.5vw;}
    #section-11 p, #section-12 p{font-size: 2vw !important;}
    #section-12 .top-left{left: 3%; top: 16%;}
    #section-12 .texto2 .ancho, #section-12 .texto2 .ancho9{width: 100% !important}
    #section-12 .texto2{padding: 0 0 0 4%;}
    #section-12 .texto2 h2{font-size: 5.5vw;}
    #section-12 .bg-gray .texto{padding-left:2%;}
    #section-12 .texto3{padding:2%;}
    #section-14 .title-5{font-size: 5vw;}
    #section-14 .texto{padding:2%;}
    #section-14 .texto p, #section-14 .row .text-orange>p{font-size: 2vw;}
    #section-7 .text-white h3{ width: 100%;    }

}
@media only screen and (min-width:992px) and (max-width:1200px){
    .carousel-caption p{width: 100% !important;}
    .nav-link{font-size: 1.2vw; padding:0 !important;}
    .nav-link>img{padding-right: 50% !important;}
    #section-1 .content{
        font-size: 3vw;
        margin-bottom: 3%;
    }
    .title-3{font-size: 4vw;  }
    #section-2 .format-2{font-size: 2vw;}
    #section-2 .texto{padding-top: 0 !important;}
    #section-2 .texto a{margin: 0;}
    .btn{height: 40px;}
    #section-4 h4{font-size: 2.2vw;}
    .nav-link, .nav-link:hover{color: white;}
    #servicios div.row{padding: 0; margin:0 0 5% 0;}
    #descripcion .container-fluid{ width: 90%;}
    #servicios .container{ width: 89%;}
    .btn-f{padding: 3%;}
    .top-left{left:0;}
    #section-12 .texto2{padding: 3% 0 0 3%;}
    .title-5{font-size: 4.5vw; width: 100% !important;}
    #section-12 .texto3{padding:2%;}
    #section-14 .texto{padding: 4%;}
}

@media only screen and (min-width:1200px){
    .carousel-inner img{width:100%;}
}