:root{
    /*----PALETA DE COLORES----*/
    /*----VARIABLES----*/
    --red: rgb(195,34,13);
    --yellow: rgb(253,232,15);
    --gray: rgb(104,104,104);
    --bg-sections: whitesmoke;
    --bg-footer: rgb(64,64,64);
    --width-logo-sitio: 30%;
    --height-logo-sitio: 10%;
    --height-logo-menu: 10%;
    --width-logo-menu: 10%;
    --font-size-list-nav: 18px;
    --general-font-family:'Segoe UI' , sans-serif;
    --titles-font-family: 'Fredoka One', sans-serif ;
    
    --font-size-titles: 10vw;
    --font-size-subtitles:5vw;  
    --width-bottoms: 40vw;
}


html {
    box-sizing: border-box;
  }
  
/*Animaciones de scroll*/

.scroll-animation{
    opacity: 0;
    transition: all 0.5s;
}

.scroll-animation-right{
    opacity: 0;
    transition: all 0.5s;    
}

.mostrar-left{
    animation: mostrarLeft 1s;
}

@keyframes mostrarLeft {
    0% {
        transform: translateX(-50vw);
    }

    100%{
        transform: translateX(0);
    }
}

.mostrar-right{
    animation: mostrarRight 1s;
}


@keyframes mostrarRight {
    0% {
        transform: translateX(50vw);
    }

    100%{
        transform: translateX(0);
    }
}

/*Estilos generales*/



main{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding-top: 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*-----------------------------MOBILE FIRST-----------------------------------*/




/*cabecera de la pagina index*/
header{
    top: 0;
    position: fixed;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    height: auto;
    background-color: var(--yellow);
    z-index: 1;
}

.datos-contacto-cabecera{
    display: none;
}

.logo-menu{
    margin: 0;
    padding: 0;
    width: var(--width-logo-menu);
    height: var(--heigth-logo-menu);
} 

.logo-menu img{
     width: 100%; height: 100%;}

.logo-sitio{
    margin: 0;
    padding: 0;
    height: var(--height-logo-sitio);
    width: var(--width-logo-sitio);
    
     
}

.logo-sitio img{
    width: 100%;
    height: 100%;
}

.lista-nav-not-mobile{
    display: none;
}

/*Estos estilos se visualizaran hasta que el usuario haga click en el icono del menu*/


.lista-nav {
    position: fixed;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 90%;
    height: auto;
    background-image: url(../recursos/tire.png);
    background-size: cover;
    background-position: center;
    margin-left: 150%;
    transition: margin-left 1s;
    z-index: 100;
    margin-top: 20vh;
    
}

.lista-nav ul{
    list-style: none;
    padding: 3vw;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 60%;
    height: 40vw;
    margin: 25vw 0vh;
    background-color: rgb(192, 192, 192);
    
}

.lista-nav ul li a{
    font-family: var(--titles-font-family);
    text-decoration: none;
    color: var(--red);
    height: auto;
    margin: 8vh 1vh;
    font-size: var(--font-size-list-nav);
    -webkit-text-stroke: .5px black;
}

.click{
    position: fixed;
    margin-left: 5%;
    width: 90%;
    height: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    background-color: transparent;
    transition: all 1s;
    z-index: 100;
  
   
}

/* Estilos del carrousel y los sliders*/

.single-item{
    display: flex;
    width: 100%;
    height: 65vh;
}

.single-item .item{
    width: 100vw;
    height: 100px;
}





.initial-title{
    width: 100%;
    box-sizing: border-box;
    padding: 15px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    background-color: var(--bg-sections);
}

.initial-title h1{
    text-align: center;
    display: flex;
    align-items: center;
    font-family: var(--titles-font-family);
    height: 60%;
    color: var(--red);
   
    margin: 5px;
    box-sizing: border-box;
    font-size: var(--font-size-titles);
}

.initial-title h4{
    height: 40%;
    margin: 5px;
    width: 90%;
    font-family: var(--font-family-normal);
    text-align: center;
    color:var(--gray);
    box-sizing: border-box;
    font-size: var(--font-size-subtitles);
  
}

/*Contenedor principal*/

.main-content{
    display: flex;
    flex-direction: column;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.tipos-llantas{
    margin-top: 2vh;
    width: 85vw;
    height: 40vh;
    display: flex;
    box-sizing: border-box;
}

.col1-palomitas{
    width: 20%;
    box-sizing: border-box;
}

.col2-lista-tipos-llantas{
    width: 60%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    list-style: none;
}

.col2-lista-tipos-llantas li{
    font-family: var(--font-family-normal);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 25%;
    font-size: 5vw;
}

.col3-iconos-de-vehiculos{
    width: 20%;
    
}


.contenedor-img-palomita{
    display: flex;
    height: 25%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    
}

.img-palomita{
    
    display: flex;
    flex-direction: column;
    width: 50%;
    height:50%;
}

.contenedor-img-vehiculos{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25%;
}

.img-vehiculos{
    
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 50%;
}

/*Seccion de servicios*/

.section-servicios{
    display: flex;
    align-items: center;
    width: 100vw;
    height: auto;
    flex-direction: column;
    margin-top: 5vh;
    
}

.container-servicios{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: auto;
    margin-top: 3vh;
    background-image: url(../recursos/bg-vision-y-vision.jpg);
    background-position: center;
    background-size: cover;
}

.target-servicios{
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 5vw;
    border: 1px solid var(--red);
    border-radius: 20px;
    font-family: var(--general-font-family);
    background-color: rgb(245, 245, 245, .6);
    margin: 2vh 0;
    /*box-shadow:  6px 8px 6px gray;*/
}


.target-servicios img{
    margin-top: 2vh;
    width:40%;
    height:40%;
}

.target-servicios h4{
    margin-top: 1vh;
    font-size: 7vw;
    text-align: center;
}

.target-servicios p{
    color: black;
    margin-top: 1vh;
    box-sizing: border-box;
    width: 70%;
    display: flex;
    justify-content: center;
    font-size: 4vw;
    text-align: center;
}

/*Estilos de los botones*/
.botones{
    margin: 3vh;
    height: auto;
    width: var(--width-bottoms);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid gray;
    background-color: var(--yellow);
    transition: border .2s;
}

.botones:hover{
    border: 1px solid red;
    background-color: yellow;
}

.botones a{
    font-family: var(--titles-font-family);
    color: var(--red);
    text-decoration: none;
}

.botones a:hover{
    color: red;
}

/*Estilos de la seccion about us o nosotros*/

.container-main-about-us{
    display: flex;
}

.container-about-us{
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4vh;
    margin-bottom: 4vh;

}

.container-logo-aboutus{
    width: 100%;
    display: flex;
    
    justify-content: center;
}

.container-logo-aboutus img{
    width: 40%;
    height: 20vh;
}

.container-text{
    margin-top:4vh ;
    width: 75%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    font-family: var(--font-family-normal);
    font-size: 4vw;
}

.imagen-lateral1{
    display: none;
}

.imagen-lateral{
    display: none;
}

.title-about{
    
    height: auto;
}

/*Estilos de la seccion del contacto y los formularios*/

.title-form{
    height:auto;
    padding: 3vh;
    margin: 2vh;
}

.container-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: auto;
    margin: 0;
    padding: 0;
   
    
}

.container-form h1 {
    height: 40%;
}

form{
    margin-top: 4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 70%;
    height:70% ;
  

}

form label{
    display: flex;
    font-family: var(--titles-font-family);
    font-weight: lighter;
    
}

form input{
    background-color:whitesmoke;
    padding: 5px 8px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgb(192, 192, 192);
    box-shadow: none;
    width: 95%;
}

form input:hover{
    
    background-color: white; 
}


form input:focus{
    background-color: white;
    box-shadow: 0px 0px;
  
}

.user-name{
    margin-bottom: 2vh;
    width: 80%;
}

.correo{
    width:80%;
    margin-bottom: 2vh;
    
}

.telefono{
    width:80%;
}

.mensaje{
    margin-top: 2vh ;
    margin-bottom: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 60%;
}

.mensaje label{
    display: flex;
    justify-content: flex-start;
    width: 80%;
}

.mensaje textarea{
    width: 80%;
    height: 100%;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid rgb(192, 192, 192);

    background-color: whitesmoke;
}

.mensaje textarea:hover{
    background-color: white;
}
.mensaje textarea:focus{
    background-color: white;

}


form .botones {
    
    padding:0;
    height: auto;
    margin-bottom: 2vh;
    display: flex;
    justify-content: center;
    align-items:center;
    color: var(--red);
    font-family: var(--titles-font-family);
    box-sizing: border-box;
}

.icon-mailbox{
    display: flex;
    justify-content: center;
    margin-top: 2vh;
    width: 30%;
    height: 20vh ;
}

.icon-mailbox img{
    width: 90%;
}

/*---Estilos del pie de pagina---*/

footer{

  width: 100vw;
  height: auto;  
  background-color: var(--bg-footer);
  display: flex;
  justify-content: center;
}

.footer{
    margin: 2vh;
    display: flex;
    flex-direction: column;
    width: 80%;
}

.foot-col{
    display: flex;
    flex-direction: column;
    color: var(--bg-sections);
    width: 100%;
    font-size:auto;
    margin: 1vh 0;
}

.foot-col span{
    width: 100%;
    font-family: var(--titles-font-family);
}

.social-networks{
    width: 100%;
    display: flex;
    
}

.enlaces-a-redes-sociales{
    display: flex;
}

.foot-col img{
    width: 7vw;
    margin: 2vw;
}

.url-freepik{
    text-decoration: none;
    color: var(--yellow);
}






/*-------------------- Diseno a partir de los 500px hasta los 1024px----------------------*/






@media screen and (min-width:500px) {
    :root{
    --font-size-titles: 5vw;
    --font-size-subtitles:3vw;
    --font-size-list-nav: 20px;
    --width-logo-sitio:130px;
    --heigth-logo-sitio: 80px;
    --height-logo-menu: auto;
    --width-logo-menu: 50px;
    --width-bottoms: 20vw;
    }

    body{
        padding-top: 80px;
    }

    header{
        justify-content: space-around;
        align-items: center;
        height:80px;
        
    }

    .logo-menu{
        
        margin: 0;
        padding: 0;
        width: var(--width-logo-menu);
        height: var(--heigth-logo-menu);
     
    } 
    
    .logo-menu img{
        
         width: 100%; height: 100%;}
    
    .logo-sitio{
        box-sizing: border-box;
        height: var(--heigth-logo-sitio);
        width: var(--width-logo-sitio);
        margin-bottom: 1vh;
         
    }
    
    .logo-sitio img{
        
        width: 100%;
        height: 100%;
    }

    /*Navgeacion*/
    .lista-nav {
        width: 80%;
        height: 50vh;
       
     
    }

    .lista-nav ul{
        width: 80%;
        height: 90%;
        margin: 86vh 0vh;
    }
    
    .click{
        margin-left: 0%;
    }

    .container-sliders{
        height: 30vw;
    }
    .lista-nav ul li a{
        font-size: 3vh;
    }

    /*.sliders img{
        width: 33.2%;
        
    }*/
    

    /*Estilos modificados de los tipos de llantas*/
    .tipos-llantas{
        height: auto;
        width: 70%;
    }

    .col2-lista-tipos-llantas li{
        font-size: 3vw;
    }

    /*Servicios*/

    .target-servicios{
        position: relative;
        width: 45%;
        height: 37vw;
        box-sizing: border-box;
    }

    .target-servicios h4{
        width: 100%;
        font-size: 3vw;
        display: flex;
        justify-content: center;
    }

    .target-servicios img{
        margin-top: 0vh;
        width:30%;
    }

    .target-servicios p{
        width: 90%;
        font-size: 2vw;
    }

    .container-servicios{
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .target-servicios-tablet{
        margin: 2% 20%;
        width: 45%;
    }

    .container-text{
        font-size: 2vw;
    }

    /*About us*/

    .container-logo-aboutus img{
        width: 25%;
    }

    .container-text{
        width:60%;
        font-size: 2.5vw;
    }

    /*form*/
    form label{
        font-size: 3vw;
    }
    form input{
        
        width: 70%;
    }

    .mensaje textarea{
        height: 15vw;
    }

    /*Footer*/
    .foot-col img{
        width: 4vw;
        margin: 2vw;
    }

   
}




/*-------------------- Diseno a partir de los 1024px hasta los 1800px----------------------*/






@media screen and (min-width:1200px) {
    :root{
    --font-size-titles: 7vh;
    --font-size-subtitles:4vh;
    --font-size-list-nav: 20px;
    --width-logo-sitio:10%;
    --heigth-logo-sitio: 80%;
    --height-logo-menu: 8%;
    --width-logo-menu: 8%;
    --width-bottoms: 15vw;
    }

    

    header{
        justify-content: space-between;
        align-items: center;
        height:10vh;
        
    }

    .logo-menu{
        display: none;
    } 
    
    .logo-sitio{
        margin-left: 2vw;
        box-sizing: border-box;
        height: var(--heigth-logo-sitio);
        width: var(--width-logo-sitio);
         
    }
    
    .logo-sitio img{
        
        width: 100%;
        height: 100%;
    }


    /*datos*/
    .datos-contacto-cabecera{
        padding-left: 3vh;
        width: 30%;
        display: flex;
        flex-direction: column;
        font-family: var(--titles-font-family);
        height: 80%;
        margin: 0;
        box-sizing: border-box;
        color: rgb(195,34,13);
    }

    .datos-email{
        width: 70%;
        align-items: center;
        display: flex;
        justify-content: flex-start;
        height: 33%;
        
    }

    .datos-email p {
        margin-top: 1.5vh;
       
        height: 100%;
        display: flex;
        align-items: center;
        
    }

    .datos-email img{
        margin: 0;
        margin: 1vh;
        width: 2vh;
      
    }

    .datos-numero{
        width: 70%;
        display: flex;
        align-items: center;
        height: 33%;
        margin: 0;
        
    }

    .datos-numero p {
        margin-top: 1.5vh;
    }

    .datos-numero img{
        margin: 1vh;
        width: 2vh;
    }


    .redes{
        width: 70%; 
        display: flex;
        align-items: center;
        height: 33%;
        
    }

    .redes img{
        width: 2vh;
        margin: 1vh;
    }

    /*Navgeacion*/
    .lista-nav-not-mobile{
        display: flex;
        width: 60%;
        height: 100%;
      
    }
    .lista-nav-not-mobile ul{
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        justify-content: space-around;
        list-style: none;
        font-family: var(--titles-font-family);
        font-size: 3vh;
    }

    .lista-nav-not-mobile ul li{
        display: flex;
        align-items: center;
        height: 80%;
    }

    .lista-nav-not-mobile ul li a:hover{
        
        color:white;
        
    }

    .lista-nav-not-mobile ul li a{
        color:var(--red);
        text-decoration: none;
        transition: all .3s ;
    }

  /*  .container-sliders{
        height: 30vw;
    }

    .sliders img{
        width: 33.2%;
        
    }*/

    .main-content{
        flex-direction: column;
        align-items: center;
    }

    .container-sliders{
       margin-top: 2vh;
    }
    

    /*Estilos modificados de los tipos de llantas*/

    .initial-title h1{
        margin-top: 3vh;
        width: 60%;
        display: flex;
        justify-content: center;
    }
    .initial-title h4{
        margin-bottom: 5vh;
    }

    .tipos-llantas{
        justify-content: center;
        
        height: auto;
        width: 60%;
    }
    .col2-lista-tipos-llantas{
        width: auto;
    }

    .col2-lista-tipos-llantas li{
        font-size: 3vh;
    }

    /*Servicios*/

    .section-servicios{
        justify-content: center;
    }

    .target-servicios{
        margin-left: 2%;
        position: relative;
        width: 30%;
        height: 45vh;
        box-sizing: border-box;
    }

    .target-servicios h4{
        width: 100%;
        font-size: 3vh;
        display: flex;
        justify-content: center;
    }

    .target-servicios img{
       
        margin-top: -4vh;
        width:30%;
        height: 50%;
    }

    .target-servicios p{
        width: 90%;
        font-size: 2.3vh;
    }

    .container-servicios{
        width: 100%;
        flex-direction: row;
        justify-content:center;
        
    }

    .target-servicios-tablet{
        margin: 2%;
        width: 30%;
    }

    .container-text{
        font-size: 2vw;
    }
    .botones{
        margin: 5vh 0;
        
    }

    .botones a{
        width: 100%;
        display:flex;
        justify-content: center;
        align-items: center;
        height: 5vh;
    }

    /*About us*/

    .container-main-about-us{
        width: 100vw;
        
        justify-content: space-between;
    }

    .container-about-us{
        margin: 7vh 0;
        border-radius: 20px;
        border: 1px solid var(--red);
        box-shadow:  6px 8px 6px gray;
        width: 40%;
        box-sizing: border-box;
    }

    .container-logo-aboutus img{
        margin-top: 2vh;
        width: 25%;
    }

    .container-text{
        color: var(--gray) ;
        width:60%;
        font-size: 2.5vh;
    }

    .imagen-lateral1{
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
        display: flex;
        align-items: flex-end;
        margin-bottom: 2vh;
      
    }

    .imagen-lateral{
        margin-top: 2vh;
        height: 60%;
        display: flex;
        align-items: center;
    }

    .animation-llantas1{
        opacity: 0;
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
        transition: all 0.5s;
    }
    
    .animation-llantas2{
        opacity: 0;
        transition: all 0.5s;    
    }
    
    .mostrar-left2{
        animation: mostrarLeft2 4s;
    }
    
    @keyframes mostrarLeft2 {
        0% {
            
            transform: translateX(-50vw)  scaleX(-1);
        }
    
        100%{
            transform: translateX(0)  scaleX(-1);
        }
    }
    
    .mostrar-right2{
        animation: mostrarRight2 4s;
    }
    
    
    @keyframes mostrarRight2 {
        0% {
            transform: translateX(50vw);
        }
    
        100%{
            transform: translateX(0);
        }
    }
    


    /*form*/

    .container-form{
        flex-flow: row wrap;
        justify-content: center;
    }
    form{
        width: 50%;
        margin: 3vh 0;
    }

    form label{
        font-size: 3vh;
    }
    form input{
        width: 70%;
    }

    .mensaje textarea{
        height: 15vw;
    }

    .icon-mailbox{
        display: flex;
        align-items: center;
     
        width: 40%;
        height: 45vw;
    }

    .icon-mailbox img{
        width: 50%;
        height: 60%;
    }

    form .botones{
        height: 5vh;
    }

    /*Footer*/

    .footer{
        flex-flow: row wrap;
        justify-content: space-around;
        margin: 6vh 0;
    }

    .foot-col{
        width: 40%;
    }

    .social-networks{
        margin-top:-3vh;
    }
    .foot-col img{
        width:3.5vh;
        margin: 2vh;
    }

   
}

@media screen and (min-width: 1280px){
    .lista-nav-not-mobile{
        display: flex;
        width: 40%;
        height: 100%;
      
    }
}

@media screen and (min-width:1800px){
    :root{
        --font-size-titles: 7vh;
        --font-size-subtitles:4vh;
        --font-size-list-nav: 20px;
        --width-logo-sitio:10%;
        --heigth-logo-sitio: 100%;
        --height-logo-menu: 8%;
        --width-logo-menu: 8%;
        --width-bottoms: 15vw;
        }

        .logo-sitio{
            margin-left: 2vw;
            box-sizing: border-box;
            height: var(--heigth-logo-sitio);
            width: var(--width-logo-sitio);
             
        }
        
        .lista-nav-not-mobile{
            display: flex;
            width: 45%;
            height: 100%;
          
        }
        .logo-sitio img{
            
            width: 70%;
            height: 100%;
        }
        
        form label{
            font-size: 3vh;
        }
        form input{
            width: 50%;
            font-size: 2vh;
            margin-bottom: 2vh;
        }

        form textarea{
            font-size: 2vh;
        }
    
}