*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background: #fff ;

}

.contenedor{
    display: grid;
    grid-template-columns: repeat(20,1fr);
    grid-template-rows: auto;
    

    }


    header{
        grid-column: 1/20;
        grid-row: 1/2;
              
    }

 
    #demo-1{
        grid-column: 1/20;
        grid-row: 2/3;
        width: 1000px;
       margin-top: 98px;
                      
    }
    .baner-info h3{
        color: #fff;
        font-size: 4em;
        padding-left: 30PX;
       padding-top: 150px;
       
    }
 
.carga{        
        grid-column: 1/21;
        grid-row: 2/3;
        margin-top: -35px;         
    }
.camion{
        grid-column: 1/20;
        grid-row: 3/4;
        text-align: center;
        font-size: 3em;
        padding-top: 25px;
        color: rgb(129, 129, 129);
    }

.vocal{
    color: rgb(71, 100, 233);
}
.camion h3{
    color: #6a6969bd;
}

.transporte{
    grid-column: 3/10;
    grid-row: 4/5;
    height: 400px;   
    padding-top: 50px; 
}

.transporte p{
    color: rgb(133, 133, 133);
    font-size: 1.2em;
    text-align: justify;
    line-height: 1.5em;
  
}


.mercancias{
    grid-column: 11/18;
    grid-row: 4/5;
    height: 400px;
    padding-top: 30px;
  
}
.mercancias img{
    border-radius: 5px;
}

.transportes-garcia{
    grid-column: 1/8;
    grid-row:5/6 ;
    width: 500px;
    background-color: rgb(85, 88, 88);
    margin-top: 100px;

}

.valores{
    color: aliceblue;
    text-align: center;    
    font-size: 2em;
    -webkit-text-stroke: 1px rgb(147, 146, 146);
    margin: 25px 0px 20px 0px; 
}

.contenedores{
    grid-column: 7/21;
    grid-row: 5/6;
    margin-top: 100px;

}


.vision{
    grid-column: 11/18;
    grid-row: 6/7;
    width: 400px;
    margin-top: 50px;
    color: rgb(133, 133, 133);
    font-size: 1.2em;
    text-align: justify;
    
}


.mision{
    grid-column: 3/10;
    grid-row: 7/8;
    width: 400px;
    margin-top: 50px;
    color: rgb(133, 133, 133);
    font-size: 1.2em;
    text-align: justify;
}
.mision2{
    grid-column: 3/10;
    grid-row: 6/7;
    padding-top: 50px;
}

.descarga{
    text-align: left;
    font-size: 3em;
    padding-top: px;
    color: rgb(71, 100, 233);
}

.vision2{
    grid-column: 11/18;
    grid-row: 7/8;
    padding-top: 50px;
    
}

.vision2 img{
    border-radius: 5px;
}

.servicios{
    grid-column: 1/20;
    grid-row: 8/9;
    text-align: center;
    font-size: 5em;
    padding-top: 25px;
    color: rgb(129, 129, 129);
}

.servicios h3{
    color: rgb(129, 129, 129);
}
/*-- servicios --*/

.transporte3{
 grid-column: 1/21;
 grid-row: 9/10;
 margin: 100px 0px 100px 0px;
}

.aduana{
    grid-column: 3/18;
    grid-row: 10/11;
    margin-top: 50px;
    color: rgb(133, 133, 133);
    font-size: 1.5em;
    text-align: justify;
}

.logistica{
    grid-column: 1/10;
    grid-row: 11/12;
    height: 400px;    
    border-radius: 5px;
    margin: 100px 0px 200px 0px;
}

.logistica-terrestre{
    grid-column: 10/21;
    grid-row: 11/12;
    height: 400px;    
    border-radius: 5px;
    margin: 100px 0px 200px 0px;
}

.logistica-aduanal{
    grid-column: 1/10;
    grid-row: 12/13;
    height: 400px;
}
.logistica-transporte{
    grid-column: 10/21;
    grid-row: 12/13;
    height: 400px;   
    border-radius: 5px;
}

.unidades{
    grid-column: 3/18;
    grid-row: 13/14;
    margin:300px 0px 100px 0px;
    font-size: 1.5em;
    color: rgb(133, 133, 133);
}

.transporte-camiones{
    grid-column: 1/21;
    grid-row: 14/15;
    margin-top: 25px;
}
/*contacto*/

.formulario{
    grid-column: 3/14;
    grid-row: 15/16;
    background-color: rgb(55, 55, 55);
    margin: 100px 0px 100px 0px;
    border-radius: 10px 0px 0px 10px;
    height: 500px;
    box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px;
  
 
}

.formulario form{
    
margin-top: 50px;
margin-left: 100px;
background-color: azul;
}

.formulario form input{
    width: 300px;
    border-radius: 3px;
    height: 30px;
    width: 50%;
    
}

.formulario form label{
    text-align: right;
    padding-right: 50px;
}


.formulario form textarea{
    width: 50%;
    height: 120px;
}
.formulario p{
    color: rgb(120, 120, 119);
    margin: 10px;
    font-size: 1.2em;
}

.boton button{

    width: 15%;
    height: 30px;
    margin-top: 25px;
}
.contacto-info{
  
    grid-column: 14/18;
    grid-row: 15/16;
    background-color: rgb(248, 0, 50);
    margin: 100px 0px 100px 0px;
    border-radius: 0px 10px 10px 0px;
    height: 500px;
    box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px;
    
}

.contacto-info p{
color: aliceblue;
text-align: justify;
margin: 10px;
margin-top: 100px;
}

.contacto-info ul{
    text-align: left;
    margin-left: 20px;
    margin-top: 65px;
    color: rgb(196, 196, 196);
    padding: 10px;
    
}
.contacto-info ul li{
    line-height : 25px;
    color: rgb(196, 196, 196);
    
    
}

.contacto-info ul li a{
    text-decoration: none;
    color: #ebe8e8;
}



h3{
    color: antiquewhite;
    margin-top: 50px;
    margin-left: 100px;
    font-size: 1.5em;
}
h4{
    color: rgb(191, 191, 191);
    margin-top: 50px;
    text-align: center;
    font-size: 1.5em;


}
/*termina contacto*/

.pie{
    grid-column: 1/21;
    grid-row: 16/17;
    background-color: #3aaccf;
    height: 400px;
    margin-top: -5px;
    
}

.pie p{
    color: #fbfbfba2;
    font-size: 1em;
    margin-top: 115px;
    text-align: center;
}

.pie p a{
    text-decoration: none;
    color: #ebe8e8;
}
.pie .redes{

text-align: left;
margin-top: 50px;
margin-left: 100px;
font-size: 1.2em;
}

.social-media{
  
    width: 20%;
    text-align: right;
    margin-top: 30px;
  
   
}

.pie .logo{
    text-align: center;
}

.pie .quejas{
    text-align: right;
    margin-top: 30px;
    
}



/*responcive*/

@media (max-width:780px) {

    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    
    body{
        background: #fff ;
    
    }
    
    .contenedor{
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: auto;
        
    
        }
    
    
     .header{
            grid-column: 1/20;
            grid-row: 1/2;
           display: none;
                  
        }
    .header .nav img{
        margin-top: 30px;
        width: 60px;
        height: 60px;
        display: none;
    }
     
       #demo-1{
            grid-column: 1/20;
            grid-row: 2/3;
            width: 1000px;
            margin-top: 100px;                         
        }
       .baner-info h3{
            color: #fff;
            font-size: 1.5em;           
           padding-top: 150px;           
        }
     
   .carga{        
            grid-column: 1/21;
            grid-row: 2/3;
            margin-top: -190px;         
        }
        
    .camion{
            grid-column: 1/21;
            grid-row: 3/4;
            text-align: left;
            font-size: 3em;
            padding-top: 25px;
            color: rgb(129, 129, 129);
            margin-right: 250px;

        }
    
    .vocal{
        color: rgb(71, 100, 233);
        font-size: 1em;
        text-align: left;  
        }

    .camion h3{
        color: #6a6969bd;
        font-size: 1em;
        text-align: center;
        line-height: 25px;
    }
    
    .transporte{
        grid-column: 1/20;
        grid-row: 4/5;
        height: 400px;   
        padding-top: 50px; 
    }
    
    .transporte p{
        color: rgb(133, 133, 133);
        font-size: 1em;
        text-align: justify;
        margin: 25px;
      
    }
    
    
    .mercancias{
        grid-column: 1/20;
        grid-row: 5/6;
        height: 400px;
       
      
    }
    .mercancias img{
        border-radius: 5px;
        margin-top: 150px;
    }
    
    .transportes-garcia{
        grid-column: 1/21;
        grid-row: 6/7 ;
        width: auto;
        background-color: rgb(85, 88, 88);   
        margin-top: 200px;
        border-radius: 10px;
    }
    
    .valores{
        color: aliceblue;
        text-align: center;    
        font-size: 1.5em;
        -webkit-text-stroke: 1px rgb(147, 146, 146);
        margin: 25px 0px 20px 0px; 
        
    }
    
    .contenedores{
      display: none;
    
    }
    
    
    .vision{
        grid-column: 1/20;
        grid-row: 8/9;     
        margin-top: 50px;
        color: rgb(133, 133, 133);
        font-size: 1.2em;
        text-align: justify;
    }
    .vision p{
        color: rgb(133, 133, 133);
        font-size: 1em;
        text-align: justify;
        margin: 25px;
        
    }
    
    .mision{
        grid-column: 1/20;
        grid-row: 12/13;      
        margin-top: 50px;
        color: rgb(133, 133, 133);
        font-size: 1.2em;
        text-align: justify;
    }
    .mision2{      
        padding-top: 50px;       
        grid-column: 1/20;
        grid-row: 13/14;
    }

    .mision2 img{
        border-radius: 10px;
    }
    .mision .descarga{
        color: rgb(71, 100, 233);
        font-size: 1.5em;
        margin-left: 25px;
    }
    
    .vision2 img{
        border-radius: 10px;
        
    }

    .vision .descarga{
        font-size: 1.5em;
        margin-left: 25px;
        color: rgb(71, 100, 233);
    }
    
  
    .vision2{
        grid-column: 1/21;
        grid-row: 10/11;
        padding-top: 50px;
        
    }  
    
    .servicios{
        grid-column: 1/20;
        grid-row: 14/15;
        text-align: center;
        font-size: 1.5em;
        padding-top: 25px;
        color: rgb(129, 129, 129);
    }
    
    .servicios h3{
        color: rgb(129, 129, 129);
    }

    .mision p{
        grid-column: 1/20;
        grid-row: 11/12;
        color: rgb(133, 133, 133);
        font-size: 1em;
        text-align: justify;
        margin: 25px;
       
    }    
   .mision2{
       
        grid-column: 1/20;
        grid-row: 13/14;
        
    }

    /*-- servicios --*/
    
    .logistica{
        grid-column: 1/20;
        grid-row: 11/12;
        height: 300px;  
        }
     
     .logistica img{
         border-radius: 10px;
     }   
    
    .logistica-terrestre{
        grid-column: 10/20;
        grid-row: 11/12;        
        margin-top: -250px;       
    }

    .logistica-terrestre img{
        border-radius: 10px;
    }
    
    .logistica-aduanal{
        grid-column: 1/21;
        grid-row: 12/13;
        height: auto;
        margin-top: 200px;
    }

    .logistica-aduanal img{
       border-radius: 10px;
       
    }

    .logistica-transporte{
        grid-column: 10/21;
        grid-row: 12/13;
        height: 400px;   
        border-radius: 5px;
    }

    .logistica-transporte img{

        border-radius: 10px;
    }
    
  
    
    
    .transporte3{
     grid-column: 1/21;
     grid-row: 15/16;
     margin: 100px 0px 100px 0px;
    }
    
    .aduana{
        grid-column: 1/21;
        grid-row: 16/17;        
        color: rgb(133, 133, 133);
        font-size: 1.2em;
        text-align: justify;
    }
    
    .aduana p{
        color: rgb(133, 133, 133);
        font-size: 1em;
        text-align: justify;
        margin: 25px;
    }

    .logistica{
        grid-column: 1/20;
        grid-row: 17/18;
        height: 400px;         
          
    }
    
    .logistica-terrestre{
        grid-column: 1/20;
        grid-row: 18/19;
        height: 400px;         
        margin-top: 10px;
    }
    
    .logistica-aduanal{
        grid-column: 1/20;
        grid-row: 19/20;
        height: 400px;
        margin-top: 10px;    
    }

    .logistica-transporte{
        grid-column: 1/20;
        grid-row: 20/21;
        height: 400px;
        margin-top: 210px;
          
    }
    
    .unidades{
        grid-column: 3/18;
        grid-row: 21/22;
        margin-top: 10px;
        font-size: 1.2em;
        text-align: justify;
        color: rgb(133, 133, 133);
        margin-top: 300px;
        
    }
    
    .transporte-camiones{
        grid-column: 1/20;
        grid-row: 22/23;
        margin-top: 25px;
    }
    /*contacto 23/24,24/25*/

    .formulario{
        grid-column: 1/20;
        grid-row: 24/25;
        background-color: rgb(55, 55, 55);
        margin: -30px 0px 100px 0px;          
        box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px; 
        border-radius: 5px;   
    }
    
    .formulario form{
       
    margin-left: 20px;
    
    
    }
    
    .formulario form input{
        width: 300px;
        border-radius: 3px;
        height: 30px;
        width: 50%;
        
     
    }
    
    .formulario form textarea{
        width: 50%;
        height: 120px;
    }
    .formulario p{
        color: rgb(120, 120, 119);
        margin: 10px;
        font-size: 1.2em;
    }
    
    .boton button{
    
        width: 15%;
        height: 30px;
        margin-top: 25px;
    }
    .contacto-info{
      
        grid-column: 1/20;
        grid-row: 23/24;
        background-color: rgb(248, 0, 50);
        margin: 100px 0px 100px 0px;
        border-radius: 5px;       
        height: 500px;
        box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px;
        
    }
    
    .contacto-info p{
    color: aliceblue;
    text-align: justify;
    margin: 10px;
    margin-top: 100px;
    }
    
    .contacto-info ul{
        text-align: left;
        margin-left: 20px;
        margin-top: 65px;
        color: rgb(196, 196, 196);
        padding: 10px;
        
    }
    .contacto-info ul li{
        line-height : 25px;
    }
    h3{
        color: antiquewhite;
        margin-top: 50px;
        margin-left: 100px;
        font-size: 1.5em;
    }
    h4{
        color: rgb(191, 191, 191);
        margin-top: 50px;
        text-align: center;
    
    
    }
    

    /*termina contacto*/

    
    .pie{
        grid-column: 1/20;
        grid-row:25/26;
        background-color: #3aaccf;
        height: 400px;
        margin-top: -25px;
        
    }
    
    .pie p{
        color: #fbfbfba2;
        font-size: .8em;
        margin-top: 125px;
        text-align: center;
    }
    
    .pie p a{
        text-decoration: none;
        color: #ebe8e8;
    }
    .pie .redes{
    
    text-align: left;
    margin-top: 50px;
    margin-left: 20px;
    font-size: 1.2em;
    }
    
    .social-media{
      
        width: 20%;
        text-align: right;
        margin-top: 30px;
      
       
    }

  .pie .social-media img{

        width: 25px;
        height: 25px;
        margin-left: 25px;
        
        

    }
    
    .pie .logo{
        text-align: center;
    }
    .pie .logo img{
        width: 50%;
    }
    .pie .quejas{
        text-align: right;
        margin-top: 30px;
        
    }
    
    
}