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

:root{
    scroll-behavior: smooth;
}

body{
    font-family: 'Open Sans', sans-serif;
}


.contenedor{
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 60px 0;
}


/*Agregado*/

.contenedor >.logo-mrklin{
    background-image: url(imag/Logo-Mr-Klin.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;   
    margin-top: 20px;
   
    /*max-width: 400px;*/
    width: 350px;
    height: 200px;
    align-self: center;
}

/*Subtítulo de inicio animado*/

.contenedor >.titulo-inicio{
    color: #ffffff;
    font-size: 36px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 2%;
    margin-top: 5px;
    -webkit-animation: aparece 5s ease-in-out;
            animation: aparece 5s ease-in-out;    
}
@-webkit-keyframes aparece{
    0%{opacity: 0;}
    80%{opacity: 0; scale: 10%;}
    95%{scale: 120%;}
    100%{opacity: 1; scale: 100%;}
}
@keyframes aparece{
    0%{opacity: 0;}
    80%{opacity: 0; scale: 10%;}
    95%{scale: 120%;}
    100%{opacity: 1; scale: 100%;}
}

/* Fin de Subtítulo de inicio animado*/

/* Contenedor con texto SVG con animación de stroke y animación*/

.contenedor .wrapper{
    padding-top: 10px;
    padding-bottom: 2%;
    width: 40%;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    justify-content: center;
    
}
path{
    stroke-width: .5;
    stroke: #ffffff;
    fill: hsl(0, 0%, 100%);
    stroke-dasharray: 240;
    opacity: 10;
    -webkit-animation: animar 3s cubic-bezier(0,0.23,.5,.1);
            animation: animar 3s cubic-bezier(0,0.23,.5,.1); 
}
@-webkit-keyframes animar {
    0%{
        opacity: 0;
        fill: none;
        stroke-dashoffset: 240;
    }
    30%{
        opacity: 10;
        stroke-dashoffset: 60;
    }
    90%{
        fill: rgba(255, 255, 255, 0);
    }
    100%{
        opacity: 10;
        fill: rgb(255, 255, 255);
        stroke: #ffffff;
        stroke-dashoffset: 0;      
    }
}
@keyframes animar {
    0%{
        opacity: 0;
        fill: none;
        stroke-dashoffset: 240;
    }
    30%{
        opacity: 10;
        stroke-dashoffset: 60;
    }
    90%{
        fill: rgba(255, 255, 255, 0);
    }
    100%{
        opacity: 10;
        fill: rgb(255, 255, 255);
        stroke: #ffffff;
        stroke-dashoffset: 0;      
    }
}

/*Fin de texto SVG animado*/

/*Estilos carrusel*/
.contenedor-carusel{
    background-color: rgba(0, 0, 0, .25);  
    position: relative;
    margin-bottom: 5%;
    width: 100%;
    height: 200px;
    overflow: hidden;
    
}
.contenedor-carusel > .carusel{
    display: flex;
    justify-content: center;
    width: 5600px;
    height: 200px;
    -webkit-animation: mover-carusel 20s linear infinite;
            animation: mover-carusel 20s linear infinite;
}
.elemento-carusel1{
    background: url(imag/Carusel1.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel2{
    background: url(imag/Carusel2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}    
.elemento-carusel3{
    background: url(imag/Carusel3.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
    
}
.elemento-carusel4{
    background: url(imag/Carusel4.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
 
}
.elemento-carusel5{
    background: url(imag/Carusel5.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
    
}
.elemento-carusel6{
    background: url(imag/Carusel6.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
    
}
.elemento-carusel7{
    background: url(imag/Carusel7.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
   
}
.elemento-carusel8{
    background: url(imag/Carusel8.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
    
}
.elemento-carusel9{
    background: url(imag/Carusel9.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
    
}
.elemento-carusel10{
    background: url(imag/Carusel10.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel11{
    background: url(imag/Carusel1.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel12{
    background: url(imag/Carusel2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel13{
    background: url(imag/Carusel3.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel14{
    background: url(imag/Carusel4.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel15{
    background: url(imag/Carusel5.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel16{
    background: url(imag/Carusel6.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel17{
    background: url(imag/Carusel7.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel18{
    background: url(imag/Carusel8.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel19{
    background: url(imag/Carusel9.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}
.elemento-carusel20{
    background: url(imag/Carusel10.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 100%;
    
}



@-webkit-keyframes mover-carusel{
    0%{margin-left: 0;}
    100%{margin-left: -2800px}
}



@keyframes mover-carusel{
    0%{margin-left: 0;}
    100%{margin-left: -2800px}
}

.header{
    /*height: 100vh;*/
    /* 02 */
    background-image: linear-gradient(to top, rgba(58, 29, 104, 0.521) 0%, hsla(27, 73%, 61%, 0.308) 100%), url(imag/Familia-Hogar-Feliz-disfrutando.jpg);
    
   
    
    display: flex;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100vw;
}

.head{
    padding: 0;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #fff;
}


.hamburguer{
    position: fixed;
    top: 30px;
    right: 30px;
    background: #fff;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
    z-index: 100;
}

.menu-navegacion{
    position: fixed;
    top: 0;
    width: 20vw;
    height: 100%;
     background-image: linear-gradient(to top, #fbc2eb 0%, #a6c0ee 100%); 
    /* 02 */
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    /* 028 */
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    right: 0;
    transform: translateX(110%);
    transition:transform 0.5s ease-in-out;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
    z-index: 100;
}

.spread{
    transform: translateX(0);
}

.menu-navegacion a{
    color: #fff;
    text-decoration: none;
}


/* MARCAS ////////////////////////////////////////////////////////////////////////////////////// */
.marcas-productos{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    background-image: url(imag/inicio-amanecer-solo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.contenedor-marcas{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    width: 80%;
}
.titulo-marcas{
    width: 100%;
    padding-top: 4%;
    justify-content: center;
}
.subtitulo{
    color: #9f8ad0;
    font-size: 50px;
    text-align: center;
    font-weight: 300;
    margin-bottom:20px;
}
.tarjeta{
    display: flex;
    justify-content: space-evenly;
    width: 280px;
    height:320px;
    margin: 10px;
    margin-bottom: 30px;
    align-items: center;
    position: relative;
    transition: 1s;
    perspective: 3000px;
}
.tarjeta:hover{
    transform-style: preserve-3d;
    transform: perspective(3000px);  
}
.tarjeta > .portada{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: 1s;
    
}
.tarjeta:hover > .portada{
    
    transform: rotateY(-180deg);
    
}
.tarjeta > .portada figure{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}
.detalle-marcas{
    background-color:  rgba(0, 0, 0, 0.096);
    display: flex;
    justify-content: space-between;

    flex-flow: column;
    /*flex-wrap: wrap;*/
    width: 300px;
    height:480px;
    margin: 10px;
    margin-bottom: 10px;
    align-items: center;
    position: relative;
    border-radius: 20px;

}
.detalle-marcas p{
    text-align: center;

}
.detalle-marcas a h3{
    color: white;
    background-color: rgb(12, 158, 202) ;
    flex-basis: 90%;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
}
.detalle-marcas a{
    text-decoration: none;
}
.detalle-marcas a h3:hover{
    scale: 1.05;
    background-color: rgb(27, 51, 124);
    transition: all 0.2s ease-in-out;
}
figure{
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.frente{
    background: url("imag/Logo-mrklin-fondito.jpg");
    background-repeat: no-repeat;
}
.dorso{
    background: url("imag/Linea-productos-inodoros.jpg");
    background-repeat: no-repeat;
    transform: rotateY(-180deg);
}
.frente2{
    background: url("imag/Logo-smell-fondito.jpg");
    background-repeat: no-repeat;
}
.dorso2{
    background: url("imag/Linea-productos-personales.jpg");
    background-repeat: no-repeat;
    transform: rotateY(-180deg);
}
.frente3{
    background: url("imag/Logo-KQK-fondito.jpg");
    background-repeat: no-repeat;
}
.dorso3{
    background: url("imag/Linea-productos-cucarachicidas.jpg");
    background-repeat: no-repeat;
    transform: rotateY(-180deg);
}
.tarjeta > .caja-texto{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    padding: 50px;
}


.pensamiento{
    display: flex;
    width: 100vw;
    background-image: linear-gradient(to top, rgba(13, 34, 25, 0.76) 0%,rgba(174, 202, 125, 0.171) 100%), url(imag/Todos-juntos-vacaciones.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    flex-wrap: wrap;
    justify-content: center;    
}
.pensamiento .pensamiento-subtitulo{
    position: relative;
    padding-top: 5vh;
    margin-top: 5vh;
    width: 100%;

    
}
.pensamiento .pensamiento-subtitulo > h2{
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 50px;
    font-weight: 300;
    margin-bottom:15px;   
}
.pensamiento .articulo-pensamiento{
    position: relative;
    padding-top: 0%;
    margin-top: 0%;
    width: 70%;   
}
.pensamiento .articulo-pensamiento > p{
    position: relative;
    text-align: center; 
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    padding: 3%;
    margin-top: 3%;
    margin-bottom: 5%;
    background-color: rgba(0, 0, 0, 0.336);
}

/*/////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////*/

.contenedor-testigos{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 20px 0;
}
.contenedor-testigos > .imagen-testigo{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 2%;
}
.imagen-testigo > .testimonios{
    width: 25%;
    text-align: center;
    margin-bottom: 20px;
}
.testimonios img{
    display: block;
    margin: auto;
    width: 80%;
}
.testimonios h4{
    width: 90%;
    display: inline-block;
    margin-top: 20px;
    font-weight: 200;
}
.imagen-testigo img{
    border-radius: 10px;
}
.imagen-testigo > .testimonios > h4{
    color: #fff;
    text-align: center;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/


.separador{
    width: 100%;
    height: 40px;
    background-color: #fff;

}
.empresa{
    display: flex;
    width: 100vw;
    background-image: linear-gradient(to top, rgba(45, 56, 52, 0.281) 0%, rgba(130, 146, 199, 0.178) 100%), url(imag/Aerea-kasema-01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    flex-wrap: wrap;
    justify-content: center;

}
.empresa-subtitulo{
    position: relative;
    padding-top: 5vh;
    margin-top: 15vh;
    width: 100%;
}
.empresa-subtitulo > h2{
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 50px;
    font-weight: 300;
    margin-bottom:20px;   
}
.articulo-empresa{
    position: relative;
    padding-top: 2%;
    margin-top: 2%;
    padding-bottom: 2%;
    padding-right: 5%;
    padding-left: 5%;
    width: 60%;
    background-color: rgba(0, 0, 0, .25);
    margin-bottom: 10%;
    
}

.articulo-empresa >p{
    position: relative;
    text-align: center; 
    color: #fff;
    padding-top: 0%;
    margin-top: 5%;

}
.articulo-empresa >h4{
    position: relative;
    text-align: center; 
    color: #fff;
    padding-top: 2%;
    margin-top: 2%;
    padding-bottom: 5%;
    margin-bottom: 5%;

}

.articulo-empresa a{
    text-decoration: none;
    
}
.articulo-empresa a h3{
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(8, 188, 233);
    padding: 10px;
    border-radius: 15px;
    margin: 20px;
    cursor: pointer;
}

.articulo-empresa a h3:hover{
    
    scale: 1.05;
    background-color: rgb(27, 51, 124);
    transition: all 0.2s ease-in-out;    
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////*/

.contenedor-atencion{
    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 30px 0;
	 
}
.contenedor-atencion > .subtitulo{
    align-self: center;
    width: 100%;
}

.atencion-dedicada{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.proceso{
    width: 30%;
    text-align: center;
    margin-bottom: 20px;
}

.proceso img{
    display: block;
    margin: auto;
    width: 80%;
}

.t-atencion{
    width: 100%;
    display: inline-block;
    margin-top: 20px;
    font-weight: 200;
}

.pie{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;
    
}
.pie > p{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: 0.8em;
}
.pie a{
    text-decoration: none;
    cursor: pointer;
}
.pie h3{
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(8, 188, 233);
    padding: 10px;
    border-radius: 15px;
    margin: 40px;
}
.pie h3:hover{
    scale: 1.05;
    background-color: rgb(27, 51, 124);
    transition: all 0.2s ease-in-out;
}


/*.notas{
    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 30px 0;

}

.encabezado-notas{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-self: center;
    width: 90%;
    padding: 2%;

}
.encabezado-notas > .subtitulo{
    font-size: 1.9em;
}
.encabezado-notas > .subtitulo h2{
    margin-top: 20px;
    
}

.logo-noticias{
    width: 30%;
}

.cuerpo-seccion{
    width: 90%;
    background-image: linear-gradient(to top, rgba(187, 59, 176, 0.425) 0%,  rgba(59, 187, 70, 0.425) 50%, rgba(255, 213, 73, 0.562) 100%);
    border-radius: 20px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 2%;
}
.cuerpo-seccion h3{
    font-size: 1.5em;
    font-weight: 400;
}
.cuerpo-seccion p{
    font-size: 1em;
    font-weight: 400;
    
}

.intro-noticias{
    
    width: 40%;
    padding: 2%;
    

}

.ejemplo-noticia{
    background-image: url(imag/Infonotas-publicaciones.png);
    background-size: contain;
    background-repeat: no-repeat;
    align-content: center;
    width: 40%;
    padding: 2%;
    border-radius: 18px;
}*/

/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////*/


footer{
    background: #9f8ad0;
    padding-bottom: 0.1px;
}

.footer-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 60px;
    padding-bottom: 40px;
}

.contenedor-footer{
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 60px 0;
}


.contact-us{
    width: 40%;
    color: #fff;
}

.brand{
    font-weight: 500;
    font-size: 40px;
}

.brand+p{
    font-weight: 500;
}

.social-media{
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.footer-content > .social-media > .social-media-icon{
    display: inline-block;
    margin-left: 20px;
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    border-radius: 50%;
    text-align: center;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.social-media-icon i{
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    
}

.line{
    width: 90%;
    max-width: 1200px;
    margin: auto;
    height: 2px;
    background: #fff;
    margin-bottom: 60px;
}
.cierre{
    width: 90%;
    max-width: 1200px;
    margin: auto;
    height: 30px;

}
.cierre p{
    font-size: .8rem;
    color: khaki;
}

.footer-content > .social-media > .social-media-icon:hover{
    background: #fff;
    color:#764ba2;
}

@media screen and (max-width: 800px){
    .menu-navegacion{
        width: 50vw;
    }

    .titulo{
        font-size: 40px;
    }

    .contenedor .wrapper{
        
        width: 60%;
    }
    .contenedor >.titulo-inicio{
        font-size: 28px;
    }

    .contenedor-servicio img{
        width: 80%;
        margin-bottom: 40px;
    }
    
    .checklist-servicio{
        width: 80%;
    }

    .service{
        margin-bottom: 30px;
    }

    .img-galeria{
        width: 45%;
    }
    
    .agregarImagen{
        width: 80%;
    }

    
    .proceso{
        width: 80%;
    }
    
    .footer-content{
        justify-content: center;
    }

    .social-media{
        width: 80%;
        justify-content: space-evenly;
    }

    .social-media-icon{
        margin-left: 0;
    }

    .contact-us{
        text-align: center;
        width: 80%;
        margin-bottom: 40px;
    }
    
}


@media screen and (max-width: 500px){
    .menu-navegacion{
        width: 65vw;
    }

    .hamburguer{
        top: 20px;
        right: 20px;
    }

   

    .header{
        /*height: 100vh;*/
        /* 02 */
        background-image: linear-gradient(to top, rgba(58, 29, 104, 0.521) 0%, hsla(27, 73%, 61%, 0.308) 100%), url(imag/Familia-Hogar-Feliz-Movil.jpg);  
    }

    .titulo{
        font-size: 30px;
    }

    .subtitulo{
        font-size: 30px;
    }
    .contenedor >.titulo-inicio{
        font-size: 22px;
    }

    .imagen-testigo > .testimonios{
       
        width: 90%;
        text-align: center;
        margin-bottom: 20px;
    }
    .testimonios img{
        display: block;
        margin: auto;
        width: 100%;
    }
   

    .articulo-empresa h3{
       font-size: 0.8em;
    }

    .proceso img{
        display: block;
        margin: auto;
        width: 60%;
    }
    .logo-noticias{
        width: 60%;
    }
    .cuerpo-seccion{
        height: 700px;
        justify-content: center;
        padding-bottom: 50px;
        text-align: center;

    }

    .cuerpo-seccion h3{
        font-size: 1.5em;
        font-weight: 400;
        text-align: center;
    }
    .cuerpo-seccion p{
        font-size: 1em;
        font-weight: 400;
        text-align: center;
    }

    .intro-noticias{
    
        width: 90%;
        padding: 1%;
    }
    
    .ejemplo-noticia{
        background-image: url(imag/Infonotas-publicaciones.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        padding: 2%;
        border-radius: 18px;
    }    

    .social-media{
        width: 100%;
        justify-content: space-evenly;
    }

    .social-media-icon{
        margin-left: 0;
    }

    .contact-us{
        text-align: center;
        width: 95%;
        margin-bottom: 40px;
    }
    
}