/* Big tablet to 1200px (width smaller the 1140px)*/
/*640x480, 768x576, 800x600, 1024x768 */
@media only screen and (max-width:2201px){
     body{
        margin-left: 11%;
        width:80%;
        font-size: 240%;
    }
    h2{
        margin-left: -2%;
    }
    .descripcion{
        height: 10%;
    }
    .texto1{
        margin-left: -2%;
    }
    .nav2 img{
        top:93%;
        left:33%;
    }
    .nav2 li a{
        font-size: 130%;
    }
    .nav2 li{
        left: 26%;
        width:97%;
        margin-top: 0%;
    }
    .navbar{
        float:right;
        text-align: right;
        margin-right: 0%;
    }
    .navbar li:last-child{
        margin-right: 0%;
    }
    .navbar li{
        display: inline-block;
        /*margin-right: 6%;*/
    }
    .navbar img{
        width:150%;
    }
    header{
        margin-top: 3%;
    }
    h1{
        margin-left: -2%;
        margin-top: 0px;
    }
    .servicios{
        height: 700px;
        margin:100px auto;
    }
    .vacio{
        height: 500px;
    }
    .col2{
        height: 500px; 
    }
    .showdown{
        width:100%;
    }
    .showdown img{
    width:32%;
    margin-right: 1.0%;
    margin-top: 1%;
}
    /*Servicios pp index.html*/
}
@media only screen and (max-width:2017px){
    .nav2 ul{
        font-size: 72%;
    }
}
@media only screen and (max-width:1850px){
    .nav2 ul{
        font-size: 67%;
    }
}
@media only screen and (max-width:1678px){
    .nav2 ul{
        font-size: 61%;
    }
}
@media only screen and (max-width:1528px){
    .nav2 ul{
        font-size: 55%;
    }
}
@media only screen and (max-width:1456px){
    .nav2 ul{
        font-size: 70%;
    }
}
@media only screen and (max-width:1366px){
    .nav2 ul{
        font-size: 84%;
    }
    .nav2 img{
        width:80%;
    }
    .nav2 li{
        left: 22%;
        width:97%;
    }
}
@media only screen and (max-width:1472px){
    body{
        margin:0px 150px;
        font-size: 190%;
    }
    h2{
        margin-left: -7%;
    }
    .texto1{
        margin-left: -7%;
    }
    .navbar{
        float:right;
        text-align: right;
        margin-right: 0%;
    }
    .navbar li:last-child{
        margin-right: -12%;
    }
    .navbar li{
        display: inline-block;
        /*margin-right: 2%;*/
    }
        .nav2 li a{
        font-size: 123%;
    }
    .navbar img{
        width:120%;
    }
    h1{
        margin-left: -7%;
        margin-top: px;
    }
}
@media only screen and (max-width:1300px){
    body{
        margin:0px 80px;
        font-size: 188%;
    }
    .imagenLogo{
            position: absolute;
            width:3%;
            left: 57%;
        }
    h2{
        margin-left: -7%;
    }
    .texto1{
        margin-left: -7%;
    }
    .nav2 li a{
        font-size: 100%;
    }
    .navbar{
        float:right;
        text-align: right;
        margin-right: 0%;
    }
    .navbar li:last-child{
        margin-right: -17%;
    }
    .navbar li{
        display: inline-block;
        /*margin-right:1%;*/
    }
    .navbar img{
        width:100%;
    }
    h1{
        margin-left: -2%;
        margin-top: 0px;
    }
    .servicios{
        height: 540px;
    }
    .vacio{
        height: 400px;
    }
    .col2{
        height: 400px; 
        font-size: 90%
    }
}
@media only screen and (max-width:1268px){
    .nav2 li a{
        font-size: 116%;
    }
}
@media only screen and (max-width:1146px){
    .nav2 li a{
        font-size: 105%;
    }
}
@media only screen and (max-width:1078px){
    body{
        margin:0px 80px;
        font-size: 170%;
    }
    .nav2 li a{
        font-size: %;
    }
}
@media only screen and (max-width:1024px){
    body{
        margin:0px 50px;
    }
    .imagenLogo{
        position: absolute;
        width:3%;
        left: 56%;
    }
    h2{
        margin-left: -2%;
    }
    .texto1{
        margin-left: -2%;
    }
    .nav2 li a{
        font-size: 100%;
    }
    .nav2 img{
        width:65%;
    }
    .nav2 li{
        left: 22%;
        width:97%;
    }
    /*Servicios pp index.html*/
    .servicios{
        height: 600px;
    }
    .servicios h3{
        font-size: 130%;   
    }
    .info1{
        font-size: 100%;
    }
    .info1 ul{
        margin-bottom: 20%;
    }
    /*Proceso pp index.html*/
    .proceso {
        font-size: 90%;
    }
    .navbar{
        float:right;
        text-align: right;
        margin-right: 0%;
    }
    .navbar li:last-child{
        margin-right: -8%;
    }
    .navbar li{
        display: inline-block;
        margin-right: -3%;
    }
    .navbar img{
        width:70%;
    }
    .texto1{
        width:34%;
        font-size: 60%;
    }   
}
@media only screen and (max-width:996px){
    .nav2 li a{
        font-size:130%;
    }
    .nav2 img{
        width:100%;
    }
}
@media only screen and (max-width:938px){
     body{
        margin:0px 80px;
        font-size: 130%;
    }
        .imagenLogo{
        position: absolute;
        width:3%;
        left: 59%;
    }
    .nav2 img{
        top:95%;
        left:32%;
    }
    .nav2 li{
        left: 26%;
        width:97%;
        margin-top: 3%;
    }
    .navbar{
        float:right;
        text-align: right;
        margin-right: 0%;
    }
    .navbar li:last-child{
        margin-right: 8%;
    }
    .navbar li{
        display: inline-block;
        margin-right: -3%;
    }
    .navbar img{
        width:70%;
    }
}
@media only screen and (max-width:800px){
    body{
        margin:0px 30px;
    }
    .imagenLogo{
        position: absolute;
        width:3%;
        left: 54%;
    }
    .navbar li:last-child{
        margin-right: -8%;
    }
    .navbar img{
        width:70%;
    }
    .nav2 li a{
        font-size: 100%;
    }
    .nav2 img{
        width:70%;
    }
    .servicios{
        background-color: #fff;
        margin:50px autopx;
        margin-left: 20px;
        height: 450px;
    }
    .servicios h4{
        margin-left: 20px;
    }
    .servicios h3{
        font-size: 120%;
    }
    .info1{
        font-size: 80%;
    }
    
     /*Proceso pp index.html*/
    .proceso {
        font-size: 75%;
    }
}

@media only screen and (max-width:768px){
    .servicios{
        background-color: #fff;
        margin:50px auto px;
        margin-left: 20px;
        height: 420px; 
        font-size: 110%;
    }
    .nav2 img{
        top:93%;
        left:33%;
        width:65%;
    }
    .nav2 li a{
        font-size: 100%;
    }
    .nav2 li{
        left: 26%;
        width:97%;
        margin-top: 0%;
    }
    .info1{
        font-size: 80%;
    }
     /*Proceso pp index.html*/
    .proceso{
        margin-left: 20px;
    }
    .tituloFlotante2{
        margin-left: 73.7%;
        background-color: #fff;
        width:23.9%;
        padding-bottom: 1px;
    }
    .descripcion{
        font-size: 110%;
    }
    .col2{
        width:23.9%;
        font-size:95%
    }
    
    h1{
        text-transform:uppercase;
        font-size:300%;
        font-family: 'Fjalla One';
        color:rgb(61, 169, 197);
        margin-left: -2%;
        margin-top: 0;
    }
    .servicios h3{
        font-size: 120%;
    }
    .info1{
        font-size: 60%;
    }
    .texto1{
        font-size: 50%;
        width:33%;
    }
}
@media only screen and (max-width:646px){
    .contactinfo{
        font-size: 89%;
    }
    .contactinfo ul:first-child{
        margin-left: 20%;
    }
}
/* 640x480 */
@media only screen and (max-width:640px){
    body{
        font-size: 100%;
    }
    .contactinfo{
        font-size: 80%;
    }
    .contactinfo ul:first-child{
        margin-left: 20%;
    }
    .nav2 img{
        top:95%;
        left:32%;
        width:63%;
    }
    .nav2 li a{
        font-size: 100%;
    }
    .nav2 li{
        left: 26%;
        width:97%;
        margin-top: 1%;
    }
    .navbar:first-child{
        margin-right: 1%;
    }
    .navbar li{
        margin-left:-4%;;
    }
    .navbar img{
        width:50%;
    }
    h1{
        font-size: 245%;
        margin-left: -3%;
    }
    h2{
        padding:0% 0%;
    }
    h1{
        margin-left: -2%;
    }
    .servicios{
        margin-left: 40px;
        font-size: 110%;
        width:89%;
    }
    .servicios{
        height: 450px;
    }
    .info1 h3{
        margin-top: 20px;
    }
    .servicios h3{
        font-size: 120%;
    }
    .info1{
        font-size: 70%;
    }
    
    /*Proceso pp index.html*/
    .proceso{
        margin-left: 40px;
        width:91%;
    }
    .tituloFlotante{
        padding-bottom: 4px;
    }
    .tituloFlotante2{
        margin-left: 73.7%;
        width:23.9%;
        padding-bottom: 6px;
        font-size:90%;
    }
    .descripcion{
        font-size: 100%;
        height: 340px;
    }
    .vacio{
       height: 340px;
    }
    .col2{
        width:23.9%;
        font-size:85%;
        height: 340px;      
    }
    .texto1{
        font-size: 60%;
    }
    /* contacto.html */
    .contactinfo ul:first-child{
        padding-left: 10%;
    }   
}


@media only screen and (max-width:570px){
    .contactinfo ul:first-child{
        margin-left: 13%;
    }
}

@media only screen and (max-width:512px){
    .contactinfo ul:first-child{
        margin-left: 12%;
    }
}

@media only screen and (max-width:522px){
    h1{
        margin:0px;
        margin-left: 20px;
        font-size: 150%;
    }
    .tituloFlotante{
        padding-bottom: 0px;
    }
    .col-1-of-4{
        width:27%;
        display: inline-block;
        float: left;
    }
    #tituloportafolio img{
         width:80%;
    }
    #titulservicio img,
    #titulservicio img,
    #titulocontacto img{
        width:80%;
    }
    .descripcion img{ 
            position: absolute;
            width:37%;
            height: 40%;
            top:-17%;
            left: 104%;
        }
    .descripcion{
        padding-bottom: 360px;  
    }
    .nav2 img{
        top:105%;
        left:10%;
        width:100%;
    }
    .nav2 li a{
        font-size: 132%;
    }
    .nav2 li{
        left: -10%;
        width:110%;
        margin-top:4%;
    }
    .navegacion li{
        margin:0;
    }   
    .navbar:first-child{
        margin-right: 14%;
    }
    .navbar img{
        width:60%;
    }
    .navbar li{
        /*margin-left:;*/
    }
    .servicios{
        width:90%;
        margin-left:5%;
        height: 360px;
    }
    .proceso{
        margin-left: 5%;
    } 
}
@media only screen and (max-width:502px){
    .contactinfo{
        font-size: 78%;
    }
    .contactinfo ul:first-child{
        margin-left: 10%;
    }
}

@media only screen and (max-width:470px){
    .contactinfo{
        font-size: 70%;
    }
    .contactinfo ul:first-child{
        margin-left: 10%;
    }
}
@media only screen and (max-width:442px){
    .contactinfo{
        font-size: 65%;
    }
    h1{
        width:50%;
        margin-left: -2%;
        margin-top: -23px;
    }
     .servicios{
        height: 0px;
    }
    .col-1-of-4{
        width:25%;
        display: inline-block;
        float: left;
    }
    .texto1{
        width:114%;
    }
    .navbar li:first-child{
        margin-right: 2px;
    }
    .navbar li{
        margin-left: -0%;
    }
    h1 img{
        width:40%;
    }
    .nav2 li a{
        font-size:102.2%;;
    }
    .nav2 li{
        left: -10%;
        width:110%;
        margin-top:4%;
    }
    header{
        margin-top: 40px;
    }
    .navbar{
        margin-top: -29px;
        margin-bottom: -20px;
    }
    .proceso{
        width:90%;
        margin-left: 5%;
    }
    .servicios{
        width:90%;
        margin-left:5%;
        height: 550px;
    }
    .vacio{
        height: 390px;
    }
    .col2{
        height: 260px;
    }
    .descripcion{
        height: 390px;
    }
    .showdown{
        width: 112%;
    }
    .showdown img{
    margin-right: .4%;
    margin-top: 2%;
    }
}
@media only screen and (max-width:438px){
    .servicios{
        font-size: 100%;
        height: 400px;
    }
 .servicios img{
        top:114%;
    }
}

@media only screen and (max-width:400px){
    .imgshowDown{
        width:106%;
    } 
    #logoempresa{
        width:70%;     
    }
    #tituloportafolio img{
         width:80%;
    }
    #titulservicio img,
    #titulservicio img,
    #titulocontacto img{
        width:80%;
    }
    .nav2 img{
        top:105%;
        left:10%;
        width:160%;
    }
    .nav2 li a{
        font-size:100%;
    }
    .nav2 li{
        left: -10%;
        width:110%;
        margin-top:4%;
    }
    .navbar:first-child{
        margin-right: 3px;
    }
    .navbar ul li{
        margin-right:0px;
    }
     h1{
        margin-left: 10px;
        width:100%;
        font-size: 200%;
    }
    .imagenLogo{
        left: 59%;
    }
    .navegacion{
      margin-left: 0; /*30xp*/
    }
    .servicios{
        margin:auto;
        height: 340px; 
        font-size: 90%;
        width:107%;
    }
    .info1 h3{
        margin-top: 20px;
    }
    .servicios h3{
        font-size: 120%;
    }
    .info1{
        font-size: 70%;
    }
    
    /*Proceso pp index.html*/
    .proceso{
        margin-left:0px;
        width:90%;
    }
    .tituloFlotante{
        padding-bottom: 8px;
    }
    .tituloFlotante2{
        margin-left: 75%;
        width:43.4%;
        padding-bottom: 9px;
        font-size:90%;
        text-align: center;
    }
    .descripcion{
        font-size: 100%;
         height: 400px;
    }
    .vacio{
         height: 400px;
    }
    .col2{
        width:39%;
        margin-left: 16px;
        position: absolute;
        font-size:60%;
        height: 400px;
    }
    .col2 li{
        margin-right: 10px;
        margin-bottom: 20%;
    }
    
    /* contacto.html */
    .contactinfo ul:first-child{
        padding-left: 10%;
    }  
     .servicios img{
        top:95%;
    }
    .descripcion img{
        width:71%;
        height: 50%;
        top:-17.5%;
    }
}
@media only screen and (max-width:372px){
     .descripcion{
         height: 450px;
    }
    .servicios img{
        top:93.8%;
    }
    .descripcion img{
        top:-15.3%;
        width:71%;
        height: 50%;
    }
}

@media only screen and (max-width:394px){
    .contactinfo{
        font-size: 60%;
    }
}
@media only screen and (max-width:362px){
    .contactinfo{
        font-size: 58%;
    }
}
@media only screen and (max-width:356px){
    .servicios img{
        top:92%;
        left: 60.4%;
    }
}

@media only screen and (max-width:308px){
     .descripcion{
         height: 477px;
    }
    .descripcion img{
        top:-14.5%;
        width:71%;
        height: 50%;
    }
    .servicios{
        font-size: 100%;
        height: 398px;
    }
     .servicios img{
        left: 61.4%;
         top:92%;
    }
}
@media only screen and (max-width:306px){
     .descripcion{
         height: 477px;
    }
    .descripcion img{
        top:-14.5%;
        width:71%;
        height: 40%;
    }
    .servicios{
        font-size: 100%;
        height: 398px;
    }
     .servicios img{
        left: 61.4%;
         top:93%;
    }
}