* {
padding: 0;
margin: 0;
}

header {
    position: -webkit-sticky;
position: sticky;
top: 0;
    background-color: white;
    width: 100%;
    z-index: 99999;
}

nav {
    padding-top: 1.5em;
    padding-bottom: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.material-icons.md-24 {
    font-size: 30px;
}

.color {
    color: #eab016;
}

.menuprincipal {
    text-decoration: none;
    list-style: none;
    position: fixed;
    top: -15em;
    right: 2em;
    background-color: rgba(234,176,22,0.9);
    padding: 1em;
    visibility:hidden;
    transition-duration: 1s, 1.8s, 200ms;;
}

.visible {
    visibility: visible;
    top: 6em;
    transition-duration: 1s, 1.8s, 200ms;
}

.menuprincipal li:not(:last-child) {
    border-bottom: solid #f0dba2 1px;
    padding-bottom: 0.3em;
}

.menuprincipal li:not(:first-child) {
    padding-top: 0.3em;
}

.menuprincipal li a {
    text-decoration: none;
    color: white;
        }


body{
    width: 100%;
    height: 100%;
    font-family: roboto, sans-serif;
    position: absolute;
}



#logo img{
max-width: 10em;
}




  
#sliderprincipal {
position: relative;
overflow: hidden;
max-width: 100%;
height: 27em;
}

#imagenprincipal {
    position: relative;
    height: 100%;
    width: 100%;
     }

#img1 {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#img2 {
    opacity: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.activainicio {
    opacity: 1 !important;
    transition: all 1s;
}







#sectionnaranja {
    background-color: #eab016;
    width: 100%;

}

#sectionnaranja div ul li img {
    max-width: 4em;

}

#sectionnaranja div ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding-top: 1em;

}

#sectionnaranja div ul li{
    text-align: center;
    margin: auto;  
     }

     #sectionnaranja div ul li p{
    font-size: 0.8em;
    color: white;
    }

#articlecotizacion {
     padding-bottom: 1em;
    padding-top: 2em;
        }

h1 {
    font-size: 2.5em;
    color: white;
    line-height: 45px;
    font-style: normal;
    }

article p {
    padding-top: 0.5em;
    color: white;
    }

article img {
    max-width: 19em;
    }

#logoparaweb {
    display: none;
}

#logoparaweb p {
    color: white;
    max-width: 90%;
}


footer {
    background-color: #eab016;
    padding-bottom: 1em;
    padding-top: 1em;
    max-width: 100%;
}

footer ul{
    display: flex;
    justify-content: space-between;
    list-style: none;
}
footer ul li{
    max-width: 50%;
}

#par1 div{
    display: flex;
    justify-content: flex-end;
}

#par1 img{
    max-width: 2em;
    height: auto;
  }

  #par1 div a:not(:last-child){
       padding-right: 1em;
  }

#par2 {
    display: none;
}

#par3 p{
    font-size: 0.7em;
    }

#par3 p span{
    font-size: 1.5em;
    color: white;
    font-weight:700;

}

#par3 a, #par3sincolor a{
    text-decoration: none;
    color: black;

    }
    
     
#footersincolor {
background-color: white !important;
}

#par3sincolor p span{
    font-size: 1.5em;
    color: #eab016;
    font-weight:700;

}

#par3sincolor p{
    font-size: 0.7em;
    }


    #articlecotizacion img:hover {
        transform: scale(1.2);
        transform-origin: left;
       

    }

    
    #articlecotizacion img { 
        transition: transform .5s;
        transform-origin: left;
    }






/*------------------------------------
            NUESTRA EMPRESA
--------------------------------------*/

#imgcuadradagrande img{
    max-width: 100%;
}

.imgcuadradachica img {
    max-width: 100%;
}

.imgcuadradachica a {
    max-width: 30%;
}

.container {
    margin-left: 2em;
    margin-right: 2em;
    max-width: 80%;
    margin: auto;
}

#nuestraempresa {
    padding-bottom: 1.5em;
}

#nuestraempresa h1{
    color: black;
    padding-bottom: 0.5em;
}

#articuloempresa p { 
    color: black !important;
    padding-bottom: 0.5em;
    font-weight: 500;
}

.imgcuadradachica {
    padding-top: 0.6em;
    display: flex;
    justify-content: space-between;
  }

  #articuloempresa img { 
    max-width: 70px;
}

#articuloempresa { 
    text-align: center;
    padding-bottom: 6em;
    padding-top: 2em;

}

#logoparaempresa {
    display: none;
}

.imgcua:hover { 
    transform: scale(0.8)
}

.imgcua { 
    transition: transform .5s;
}

#footerfixed {
    position: fixed;
    bottom: 0;
    width: 100%;
  
}

.articlecaracteriscotiz {
    padding-top: 0 !important;
}



/*------------------------------------
            MASCOTAS
--------------------------------------*/

#sectionmascotas h1{
    color: black;
    padding-bottom: 0.5em;}

#sectionmascotas {
    padding-bottom: 6em;}


 #mascotasinfo p span{
   
    font-weight: 700;
 }



#span1 {
    font-size: 1.4em;
    font-weight: 600;
    background-color: rgba(234,176,22,0.7);    padding: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    max-width: 70%;
}




main {
margin-top: 0em;
}

#fotosmascotas {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#fotosmascotas img {
    width: 100%;
     object-fit: cover;
    
       }
    
    #slidermascotas {
        position: relative;
           }
    
    #img3 {
        position: absolute;
           }
    
    #img4 {
        opacity: 0;
            }
        

            .instagram {
                max-width: 400px;
                text-align: center;
                border-radius: 40px;
                color: #fff;
                background: #d6249f;
                background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
                box-shadow: 0px 3px 10px rgba(0,0,0,.25);
                padding-top: 2em;
                padding-bottom: 2em;
                margin: 1em auto;
                transition: transform .5s;
              }

              .instagram div{
               padding-left: 1em;
               padding-right: 1em;
              }

              .instagram:hover {
        transform: scale(0.9);
       

    }

    #igenlace {
        text-decoration: none;
       }

    

        
   


/*------------------------------------
            CARACTERÍSTICAS
--------------------------------------*/

#cuadrocaracteristicasnaranja {
background-color: rgba(234,176,22,0.7);
padding:1.2em ;
margin-top: 1em;
}

#cuadrocaracteristicasnaranja p{
padding-bottom: 0;
padding-top: 0.5em;
    }

    #cuadrocaracteristicasnaranja ul{
        list-style:disc;
        padding-left: 1.2em;
            }

#sectioncaracteristicas h1{
    color: black;
    padding-bottom: 0.4em;
}


#videocaracteristicas {
   width: 100%;
   padding-bottom: 7em;
}

#video video {
    width: 100%;
    }


#beneficios {
    padding-top: 1.5em;
    }

#beneficios h3{
    padding-bottom: 0.7em;
}

#beneficios ul{
    list-style: none;
}

#beneficios ul li{
    padding-bottom: 1em;
}

#beneficios span {
    font-weight: 500 !important;
    }



/*------------------------------------
                Galeria
--------------------------------------*/


#cuadradachicagalery {
    flex-wrap: wrap !important;
    padding-bottom: 7em;
  
}

#cuadradachicagalery div{
    max-width: 47% !important;
    position: relative;
    margin-bottom: 1em;
}


#cuadradachicagalery div h3{
    font-size: 1.1em;
    text-align: center;
    color: white;
    text-shadow: black 0.05em 0.05em 0.2em;
    position: absolute;
    bottom: 1em;
    padding: 0.4em;
    background-color: #eab016;
}

#conteinergalery {
     min-height: 500px;
     width: 100%;
     position: relative;
     max-height: 100%;

}



#imgcuadradagrande {
    position: relative;
    

}


#conteinergalery img{
    min-height: 500px;    
    object-fit: cover;


}


      
    #img5  {
        position: absolute;
        width: 100% !important;
           }
    
    #img6 {
        opacity: 0;
            }



            .resoluciongaleria {
                height: auto;
            }


/*------------------------------------
        whatsapp tambaleante
--------------------------------------*/

.tambaleanteder {
    transform: rotate(10deg);
        transition-duration: 100ms;

}

.tambaleanteizq {
    transform: rotate(-10deg);
    transition-duration: 100ms;
}

















            




/*------------------------------------

    Dispositivos desde 1000px ancho

--------------------------------------*/


@media all and (min-width: 1170px) {

.menu {
    display: none;
}

.menuprincipal {
    visibility: visible;
    position: inherit;
    background-color: white;
    display: flex;
    width: 65%;
    text-align: center;
    justify-content: space-between;
}

.menuprincipal li:not(:last-child) {
    border-bottom: none;
    }

.menuprincipal li a {
    color: #eab016;
    font-size: 0.9em;
    font-weight:700;
}

.menuprincipal li {
    max-width: 16.5%;
}


.container {
    padding-right: 5em;
    padding-left: 5em;}


    
.menuprincipal li:not(:first-child) {
    padding-top: 0;
}

#logoparaweb {
    display: block;
    padding-top: 1.4em;
    max-width: 50%;
}

#logoparaweb a img{
    max-width: 25em;
}

#abajo {
    display: flex;
    justify-content: space-between;
}

#articlecotizacion {
    width: 100%;
}


#sliderprincipal {
    height: 32em;
}

#imagenprincipal {
    height: 100%;
     }

     #sectionnaranja div ul {
    margin-bottom: 2em;
    margin-top: 0;
    padding-top: 0;
}



#sectionnaranja {
    display: flex;
    flex-direction: column-reverse;
}



#par2 {
    display: block;
}

#par2 img{
max-width: 8em;
}

#par3 {
    text-align: center;
}

#par3sincolor {
    text-align: center;
}



/*------------------------------------
            NUESTRA EMPRESA
--------------------------------------*/

#sectionempresa {
    display: flex;
    justify-content: space-between;
    }

.imgcuadradachica {
    display: flex;
    flex-direction: column;
    max-width: 20%;
    height: 100%;
    justify-content: space-between;
    padding-top: 0;
    margin-right: 1em;

}

.imgcuadradachica a{
    max-width: 100%;
    }


#resolucionempresa {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    width: 56%;
    
    
}

#nuestraempresa {
    width: 44%;
display: flex;
flex-direction: column;
justify-content: center;
}

#nuestraempresa p{
    margin-right: 6em;
}





#imgcuadradagrande img{
    width: 100%;
}

#articuloempresa {
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    padding-right: 1em;
    padding-left: 1em;
    align-items: flex-start;
}

#articuloempresa div {
    max-width: 30%;
}

.containericonos {
    width: 800px;
    margin: auto;
}




/*------------------------------------
            MASCOTAS
--------------------------------------*/

#sectionmascotas {
    display: flex;
}

#mascotasinfo {
    max-width: 45%;
    padding-right: 1em;

}

#fotosmascotas img {
     height: 500px;
 }

 #mascotasinfo p {
    padding-right: 5em;
 
}

#span1 {
       padding-right: 0 !important;
       max-width: 60%;
}



/*------------------------------------
            CARACTERÍSTICAS
--------------------------------------*/

#cuadrocaracteristicasnaranja {
        margin-right: 5em;

        
    }

    #cuadrocaracteristicasnaranja p{
        padding-right: 0 !important;

        }


        #sectioncaracteristicas {
            display: flex;
        }


/*------------------------------------
                Galeria
--------------------------------------*/


.resoluciongaleria {
    width: 100% !important;
    
}

#cuadradachicagalery div {
    max-width: 42% !important;
    padding-right: 1em;
}



#conteinergalery {
    max-width: 100%;
    
}

#cuadradachicagalery {
    flex-direction: row;
    max-width: 30% !important;
    


}

#cuadradachicagalery div h3{
           bottom: 3em;
}












}











/*------------------------------------

    Dispositivos desde 1400px ancho

--------------------------------------*/

@media all and (min-width: 1400px) {
    #logoparaempresa {
        display: block !important;
        margin-top: 2.5em;
    }
    
    #logoparaempresa a img{
        display: block !important;
        max-width: 85%;
    }

    .container {
    margin: auto;
    }


    

    

/*------------------------------------
            CARACTERÍSTICAS
--------------------------------------*/

#cuadrocaracteristicasnaranja {
    padding-left: 2em ;
    }


  

     #video {
    
        display: flex;
        justify-content: flex-end;
        
       }
     
     #video video {
         max-width: 90%;
                 }




/*------------------------------------
                 Galeria
--------------------------------------*/


       


 }





 /*------------------------------------

    Dispositivos desde 1800px ancho

--------------------------------------*/


@media all and (min-width: 1800px) {
    #sliderprincipal {
        height: 58em;
    }

 
    #nuestraempresa p{
        padding-right: 2em;

    }


    #video video {
       object-fit: cover; 
    }
    #video {
height: 58em;     }
 


    #fotosmascotas img {
        height:48em;
    }


    #mascotasinfo {
        display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    margin-top: 0;
    }

    

    .solomascotasinfo p{
           padding-right: 15em !important;
           padding-top: 1em;
           padding-bottom: 1em;
    }

    #sectioncaracteristicas h1 {
        padding-bottom: 1em;

    }

   

    #cuadradachicagalery div h3 {
        bottom: 1em;
    }

    #conteinergalery img{
             height: 48em;
    
    
    }



#articuloempresa {
     padding-top: 0;
     margin-top: 0;
     margin-bottom: 0;
}


#sectionempresa {
    margin-bottom: 0;
    margin-top: 0;
}



}

   



/*------------------------------------

    Dispositivos desde 1400px alto

--------------------------------------*/

@media all and (min-height: 1200px) {

#maingranalto {
    display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
height: 100% !important;
padding-top: 0;
margin-top: 0;
padding-bottom: 0;
margin-bottom: 0;

}

header {
    position:fixed;
}

#articuloempresa {
    padding-bottom: 0;
    padding-top: 1em;

}

#sectionmascotas {
    padding-bottom: 0;
}

#videocaracteristicas {
    padding-bottom: 0;
}

.menuprincipal li a {

    font-size: 1.1em;

}

#logo img {
    max-width: 12em;
}
}