@font-face{ font-family: "Avenir-condensed"; src: url('fonts/Avenir-Next-LT-Pro-Condensed.ttf') format('truetype'); font-display: swap;}
@font-face{ font-family: "Avenir-bold-condensed"; src: url('fonts/Avenir-Next-LT-Pro-Bold-Condensed.ttf') format('truetype'); font-display: swap;}

/*
font:normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif;
font:normal 1rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif;
*/

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;
                          box-sizing: border-box;}

h1, h2, h3, h4, h5, h6 { font-weight:normal;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;
                                    box-sizing: border-box;}

input[type="text"], input[type="email"], input[type="tel"], input[type="submit"],
textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none;}


/*HTML 5*/
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/* 1 - SETEOS GLOBALES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;}
html { font-size:18px  /*1rem = 18px*/ }

body {
    margin:0 auto;
    text-align:center;
	font-family: "Avenir-condensed", Arial, Helvetica, sans-serif;
  }

.SafeZone { width:100%; min-height:100%; margin:0 auto; font-size:0;}
     .Viewport { position:relative; width:100%; max-width:1600px; height:100%;  margin:0 auto;}

     .Flex { display: flex; }
     strong { font-weight: normal; font-family: "Avenir-bold-condensed", Arial, Helvetica, sans-serif;}

.azul {
    display: inline-block; background-color: #000; padding: 8px 15px; font: normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif; line-height: normal; color: #FFF; text-align: center; border-radius: 50px !important;  cursor: pointer;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

/*MODAL*/
#Modal { position:fixed; overflow: hidden; z-index: 9998; top: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 15px;  background: rgba(255,255,255,0.8); opacity: 0; visibility: hidden;
        -webkit-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;}

    a#BtnCerrarModal { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: url("imagenes/icono-menu-close.svg") no-repeat 50% 50%; background-size: 20px auto;}

    #ContentModal { position: relative; overflow: auto; width: 100%; max-width: 800px; padding: 50px; text-align: left; background-color: #fff; border: 1px solid #bfbfbf; border-radius: 5px;}
        p#TituloModal { margin-bottom: 15px; font-size: 2.5rem; color: #6d6e71;}
        p.General { font-size: 1.3rem; color: #6d6e71;}
        p#txtellas,
        p#txtellos { display: none;}

        #Goteo { margin-top: 40px;}
            p#TituloGoteo { font-size: 1.6rem; color: #6d6e71;}
            #Goteo ul { margin-top: 20px; list-style: none; display: flex; flex-wrap: wrap;}
                #Goteo li { flex: 1; display: flex; flex-wrap: wrap; text-align: center;}
                    #Goteo li figure { flex: 0 0 50px; height: 50px; padding-top: 15px; border-radius:50%;}
                    #Goteo li img { display: inline-block; vertical-align: middle; width: 15px;}
                    #Goteo li p { flex: 1; text-align: left; padding:0 10px; font-size: 1.1rem; color: #6d6e71;}
                    #Goteo li p strong { display: block;}

.modalmode { overflow: hidden;}
.modalmode #Modal { overflow: auto; opacity: 1; visibility: visible;}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/
header.General {position: fixed; top:0; left: 0; z-index: 9990; width:100%; min-height: 135px; padding: 50px 0; text-align:left; background: url("imagenes/olas-header.svg") no-repeat 0 -80px; background-size: 60% auto; /*outline: 1px solid red;*/
               }

    header.General .Viewport { /*border: 1px solid red;*/}
    .Viewport.Extend { max-width: 1900px; }

    header.General .Viewport { max-width: none;}
     #TopHeader { display: flex; align-items: center; padding:0 0 0 150px;}
        #BtnMenuMobile { display: none;}

        #Logo { flex: 0 0 330px;}
            #Logo img { max-width: 100%; display: block;}

        #Menus { flex: 1; display: flex; justify-content: flex-end;}
            #MenuGeneral { flex: 0 0 auto; display: flex;}
                #MenuGeneral a {flex: 0 0 auto; display: flex; align-items: center; padding: 15px 30px; font-size: 1.2rem; color: #fff; background-color: #000000; margin-right: 2px;}
                #MenuGeneral a:first-child { border-radius: 30px 0 0 30px;}

                /*select*/
                #MenuGeneral a.select { background-color: #000; cursor: default;}
                /*......*/

            #Buscar { flex: 0 1 300px; padding:5px; background-color: #000;}
                a#BtnBuscarMobile { display: none;}

                #Buscador { display: flex; align-items: center; width: 100%;}
                    .QuickAV { display: flex; width: 100%; border-radius: 8px;}
                    input.search { flex: 1; border-radius: 5px 0 0 5px; border: none; background-color: #fff;}
                    input.btn-search {font-size: 0; border: none; background: #fff url("imagenes/internas/lupa.svg") no-repeat 0 50%; padding: 0 15px; background-size: 20px auto; cursor: pointer; border-radius: 0 5px 5px 0;}

            #AccionesEcomm { display: flex; align-items: center; background-color: #000; padding: 0 200px 0 15px;}
                #Login { position: relative; flex: 0 0 auto;}
                    a#BtnLogin, a#BtnLoginAuth { display: block; width: 25px; height: 30px; padding: 0 30px; background: url("imagenes/internas/perfil.svg") no-repeat 50% 50%; background-size:20px auto;}


                   .DownPanel { position: absolute; overflow: hidden; z-index:9997; top: 30px; border-radius: 7px; max-height: 0;
                                 box-shadow: 0 30px 28px rgba(0,0,0,0.25);
                                 -webkit-transition: max-height 1s cubic-bezier(.25,.8,.25,1);
                                 transition: max-height 1s cubic-bezier(.25,.8,.25,1);}

                     .mueca { position: relative; margin-top: 20px; padding:20px 5px 15px 5px; text-align:center; background-color: #fff; border-radius: 5px;}
                     .mueca::after { content: ""; position: absolute; z-index: 100; top: -15px; right: 15px; display: block; width: 30px; height: 18px; background: url("imagenes/internas/mueca-blanca.svg") no-repeat 0 0; background-size: 100% auto;}


                   #PanelLogin { width: 220px; left:-80px;}
                       #LogAbierto.mueca::after { right: auto;  left: 50%; margin-left: -15px;}
                           #FormPerfil { width:100%; padding: 0;}
                                #DatosPerfil { padding: 0 0 15px 0;}
                                    p.TxtHola { font-size: 2.5rem; color: #646364;}
                                    p.NombreLog { display: block; font-size: 1.3rem; color:#646364;}

                                #AccionesCarrito { display: block; padding-top: 20px; background: url("imagenes/internas/filete.svg") no-repeat 50% 0;}
                                    #AccionesCarrito a { display: block; width: 110px; margin:0 auto 5px auto;}
                                    #BtnCerrarSesion { display: block; margin: 15px auto 10px auto; font:normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif; color:#888; cursor: pointer; background: none; border: none; border-radius: 0;}

                /*loginmode*/
                .loginmode #Login .DownPanel { max-height: 600px; z-index:9998;}
                /*......*/


           #MiCarrito { position: relative; flex: 0 0 auto; text-align: left;}
                a#BtnListaCarrito { position: relative; display: block; width: 25px; height: 30px; background: url("imagenes/internas/carrito.svg") no-repeat 50% 50%; background-size:23px auto;}
                   #FormCarrito { width: 100%; height: 100%; display: flex;}
                       #BtnListaCarrito input { min-width: 0; pointer-events: none;}

                       #Bag { flex: 0 0 40px; height:40px; text-align: left;}
                           input#cantidad-items { font:normal 12px "Roboto-Medium", Arial, Helvetica, sans-serif; color:#fff; background-color: #7E5C6E; border-radius: 20px; border: none; padding:3px 5px 3px 5px;
                                                 -webkit-transform-origin: 0 0;
                                                 transform-origin: 0 0;
                                                 -webkit-transform: translate(15px, -3px);
                                                 transform: translate(15px, -3px);}

                       input#precio-total { flex: 1; height:40px; text-align:left; font:normal 0.9rem "Roboto-Medium", Arial, Helvetica, sans-serif; background:none; border:none; color:#FFF; padding: 0 8px 0 15px; border-left: 1px solid #4796d5;}

                 #CarritoLista .DownPanel { width:270px; right: -20px;}

                        /*Vacio*/
                        #CarritoVacio { width:100%; padding:45px 0;  background-color:#fff;}
                            #CarritoVacio p { width:100%; font-size: 1.3rem; color:#999999; text-align:center;}

                        /*Lleno*/
                        #CarritoLleno { width:100%; font-size:0px;  background-color:#fff;}
                            #CarritoLleno ul { width:100%; list-style:none; text-align: left;}
                                #CarritoLleno li { position:relative; overflow:hidden; display: flex; flex-wrap: wrap; align-items: center; max-height:500px; padding:5px 17px;
                                                    -webkit-transition:opacity 0.5s ease, max-height 0.5s ease;
                                                    transition: opacity 0.5s ease, max-height 0.5s ease;}

                                    p.QuickCantidad { position: absolute; top: 20px; left: 5px; font-size: 13px; background-color: #fff; padding: 0 7px; border:1px solid #999; border-radius:10px;}

                                    #CarritoLleno figure { flex: 0 0 50px; display: flex; justify-content: center; align-items: center; background-color: #fff;}
                                        #CarritoLleno figure > img { max-width:100%; display:block;}

                                    #CarritoLleno ul div { flex: 1; padding:10px;}
                                        #CarritoLleno p.QuickNombre,
                                        #CarritoLleno p.QuickExtra { font-size:16px; color:#4D4D4D;}

                                    a.QuickClose { flex: 0 0 23px; font-size:14px; line-height:0;  text-align:center; color:#9B9B9B; cursor:pointer;}

                            #BarraTotal { width: 100%; text-align: center; padding:20px 0 5px 0; background: url("imagenes/internas/filete.svg") no-repeat 50% 5px;}
                                #BarraTotal p.PrecioTotal {  font:normal 2rem "Roboto-Medium", Arial, Helvetica, sans-serif; color: #1E3B71; padding:0;}

                            a#BtnMiCarrito { margin: 0 auto; width: 120px;}


                        /*Desktop*/
                        .Desktop a.Close:hover { color:#000;}
                        .Desktop #CarritoLleno li.hover { opacity: 0.5;}
                        .Desktop #CarritoLleno li.hover p { text-decoration:line-through;}


                        /*carritomode*/
                        .carritomode #MiCarrito .DownPanel { max-height: 600px; z-index:9998;}

                        /*out*/
                        #CarritoLleno li.out { max-height:0px;}
                        /*...*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/
main {width:100%; text-align:left;}
	#NavSocialFlotante { position: fixed; z-index: 8000;  bottom: 20px; right: 20px; text-align: center;}
        #NavSocialFlotante a { width: 40px; height: 40px; margin: 2px; display: inline-block; border-radius: 50%; box-shadow: 0 0 2px #8a8a8a;
                              -webkit-transition: background-color 0.3s ease;
                              transition: background-color 0.3s ease;}

        #NavSocialFlotante a[title*="Instagram"] { background:#fff url("imagenes/internas/instagram.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="Facebook"] { background:#fff url("imagenes/internas/facebook.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="Youtube"] { background:#fff url("imagenes/internas/youtube.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="WhatsApp"] { background:#fff url("imagenes/internas/wapp-blanco.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a.BtnWapp { background-color: #26d065;}

    /*Desktop*/
    .Desktop #NavSocialFlotante a:hover { background-color: #D4D4D4;}
    /*.......*/

    .Modulo { width: 100%; height: 100vh;}

    /*INTRODUCCION*/
    #Intro { position: relative;}
        #IntroTop { position: absolute; z-index: 100; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: 100%; background: url('imagenes/olas-header-bottom.svg') no-repeat 0 100%; background-size: 100% auto;}
            #IntroTop article { position: relative; flex: 1; align-self: flex-end; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
                                width: 40%;}

                #IntroTop header { padding-left: 20px; /*border: 1px solid green;*/}
                    #IntroTop h2 { font-size: 2.5rem; color: #313233; margin-bottom: 15px;}
                    #IntroTop header p { font-size: 1.5rem; color: #3A3A3A;}

                #IntroTop article > div {/* border: 1px solid green;*/}

                      #Descripcion {}
                          #Descripcion p { width: 100%; padding-left: 20px; padding-right: 300px; font-size: 1.2rem; color: #3A3A3A;}

                      #Tag { position: absolute; left: 0; bottom: -50px; width: 300px;
                              -webkit-transform: scale(1.3);
                              transform: scale(1.3);}

                          #Tag figure { width: 100%;
                                  -webkit-transform-origin: 50% 0;
                                  transform-origin: 50% 0;
                                  -webkit-transform: translate(-20px, 80px);
                                  transform: translate(-20px, 80px);}

                          #Tag img { max-width: 100%; display: block;
                                    -webkit-transform-origin: 50% 0;
                                    transform-origin: 50% 0;
                                    -webkit-transition: transform 1s ease;
                                    transition: transform 1s ease;
                                    -webkit-animation: card 2s infinite 1s;
                                    animation: card 2s infinite 1s;
                                    -webkit-animation-direction: alternate-reverse;
                                    animation-direction: alternate-reverse;
                                    -webkit-animation-play-state: paused;
                                    animation-play-state: paused; }

                      /*Desktop*/
                      .Desktop #Tag:hover img { -webkit-transform: rotate(-10deg);
                                              transform:  rotate(-10deg);
                                              -webkit-animation-play-state: running;
                                               animation-play-state: running;   }

                  #IntroTop aside { position: relative; flex: 0 0 200px; pointer-events: none;}
                      #IntroTop .Flex { align-items: center; justify-content: flex-end;/* border: 1px solid red;*/}
                          #LogoEldertec { flex: 1;}
                          #LogoEldertec img { width: 180px; display: block; filter: grayscale(100%); opacity: 0.7;}

                          .ContadorLavados { position: relative; overflow: hidden; flex: 0 0 230px; height: 230px; padding-top: 55px; text-align: center; border-radius: 0 0 50% 50%;
                                           -webkit-transform: scale(0.7) translateY(-50px);
                                            transform: scale(0.7) translateY(-50px);}

                              #etiquetalavados { position: absolute; top: 0; left: 0;  width: 100%; height: 100%;}
                                 #etiquetalavados img { max-width: 100%; display: block;}

                                 #LavadosFrente  { -webkit-animation: lavadosfrente 8s ease-in-out infinite;
                                                   animation: lavadosfrente 8s ease-in-out infinite;}

                                 #LavadosDorso  { position: absolute; top:0; left: 0; width: 100%; height: 100%;
                                                  -webkit-animation: lavadosdorso 8s ease-in-out infinite;
                                                  animation: lavadosdorso 8s ease-in-out infinite;}


                              #olas { position: absolute; top: 0; left: -30px;  width: 200%; height: 100%; background: url("imagenes/icono-lavado-onda.svg") repeat-x 0 100%;  background-size: 230px auto;
                                      -webkit-animation: wash 1s ease-in-out infinite;
                                      animation: wash 1s ease-in-out infinite;}

                              #Cifras p {font-weight: bold; color: #06489A; margin: 0 auto;}
                                  #cifrealavados { font-size: 80px;
                                                   -webkit-animation: lavadosfrente 8s ease-in-out infinite;
                                                   animation: lavadosfrente 8s ease-in-out infinite;}

                                  #txtahorro { position: absolute; top:77px; left: 0; width: 100%; text-align: center;  font-size: 55px;
                                               -webkit-animation: lavadosdorso 8s ease-in-out infinite;
                                               animation: lavadosdorso 8s ease-in-out infinite;}




                  /*transiciones stickymenu*/
                  #LogoEldertec img { -webkit-transition-property: opacity; transition-property: opacity;}

                  header.General,
                  #Counter,
                  #Tag {  -webkit-transition-property: -webkit-transform;  transition-property: transform;}

                  header.General,
                  #LogoEldertec img,
                  #MenuGeneral,
                  #Counter,
                  #Tag { -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
                          -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}

                  /*stickymenu*/
                  .stickymenu #IntroTop header,
                  .stickymenu #Descripcion { display: none;}

                  .stickymenu #LogoEldertec img { opacity: 0;}

                  .stickymenu #Counter,
                  .stickymenu #Tag { -webkit-transform: scale(0);  transform: scale(0);}
                  /*..........*/


          #SlideGeneral { position:relative; overflow: hidden; width: 100%; height: 100%;}
              #SlideGeneral div[class] { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                                        opacity: 0;
										-webkit-transition: opacity 1.5s cubic-bezier(0.83, 0, 0.17, 1);
                                        transition: opacity 1.5s cubic-bezier(0.83, 0, 0.17, 1);}
             .pareja-parque,
             .pareja-cocina,
             .corredora { background-repeat: no-repeat; background-position: 0 0; background-size: cover !important;}

             /*select*/
             #ContentSlideGeneral div.select { opacity: 1;}
             /*......*/

    /*BANNER*/
    #Banner { position: relative; overflow: hidden; width: 100%;}
        #Banner picture {  position: absolute; top: 0; left: 0; width: 100%;  display: flex; justify-content: center; align-items: center; opacity: 0;
                          -webkit-transform: scale(1.3);
                          transform: scale(1.3);
                          -webkit-transition: opacity 1s cubic-bezier(.25,.8,.25,1), transform 1s cubic-bezier(.25,.8,.25,1);
                          transition: opacity 1s cubic-bezier(.25,.8,.25,1), transform 1s cubic-bezier(.25,.8,.25,1);}

       #Banner picture:last-child { position: relative;}
       #Banner picture img { display: block;}

       #Banner picture.select { opacity: 1;
                                -webkit-transform: scale(1);
                                transform: scale(1);}



    /*MODELOS*/
    .Modelos { position: relative; padding: 60px 0;}
        main h3 { font:normal 2.5rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71;}

        .NavInfoModelo { position: absolute; top: 50%; right: 0;
                         -webkit-transform: translateY(-50%);
                         transform: translateY(-50%);}

            .NavInfoModelo a { display: block; padding: 10px 10px 10px 40px; margin: 10px 0; font-size: 1rem; color: #fff; border-radius: 10px 0 0 10px;}
            a.BtnCatalogo {  background: url("imagenes/icono-descarga.svg") no-repeat 10px 50%; background-size: 20px auto;}
            a.BtnSaberMas {  background: url("imagenes/icono-pregunta.svg") no-repeat 10px 50%; background-size: 20px auto;}
            a.BtnComprarOnline { background: url("imagenes/icono-carrito.svg") no-repeat 5px 50%; background-size: 30px auto;}

        .Modelos .Flex { display: flex; flex-direction: column; }
            .Modelos article { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 66.66%; margin-left: 33.33%;  /*border: 1px solid red;*/}
                .Modelos article header { margin-bottom: 20px;}
                    .Modelos h4 { font-size: 1.7rem; color: #6D6E71;}
                    p.DescripcionModelo { font-size: 1.1rem; color: #6D6E71;}

                .DataModelos { width: auto;}
                    ul.ListaModelos { list-style: none; display: flex; align-items: center;}
                    ul li.TipoAbsorsion { flex: 0 0 75px; height: 75px; padding-top: 12px; text-align: center; border-radius: 50%;}
                    ul li.TipoAbsorsion img { display: inline-block; vertical-align: middle; width: 15px;}
                    ul li.TipoAbsorsion h5 { font-size: 0.9rem; color: #fff;}

                    ul li.CodigoModelo { flex: 0 0 auto; padding-left: 20px; }
                    ul li.CodigoModelo img { width: 100px; height: 100px; margin-top: 20px; border-radius: 50%;}
                    ul li.CodigoModelo h6 { display: block; text-align: center; font:normal 1.2rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71;}

             ul.Referencias { list-style: none; display: flex; flex-wrap: wrap; margin: 40px 0 10px 5px;}
                ul.Referencias li { flex: 0 0 200px; display: flex; flex-wrap: wrap; text-align: center;}
                    ul.Referencias li figure { flex: 0 0 50px; height: 50px; padding-top: 15px; border-radius:50%;}
                    ul.Referencias li img { display: inline-block; vertical-align: middle; width: 15px;}
                    ul.Referencias li p { flex: 1; text-align: left; padding:0 10px; font-size: 1.1rem; color: #6d6e71;}
                    ul.Referencias li p strong { display: block;}

           .Modelos aside { flex: 0 0 auto; align-items: flex-start; padding: 30px 0 0 0; /*border: 1px solid blue;*/}
                .Talles { position:relative; overflow: hidden; width: 100%; border-collapse: collapse; border:1px solid #ccc;}
                    .Talles caption { margin-bottom: 10px; text-align: left; font-size: 1rem; color:#6D6E71;}

                    .Talles tr {}
                        .Talles th { font-size: 1.2rem; text-align: left; color:#6D6E71; padding: 5px 20px; background-color: #fff; border-bottom: 1px solid #ccc;}
                        .Talles td { font-size: 1.2rem; color:#6D6E71; text-align: center; padding: 5px; background-color: #fff; border-bottom: 1px solid #ccc;}
                        .Talles tr:last-child td { border: none;}

    /*Para Ellas*/
    #ParaEllas { background:linear-gradient(0deg, rgba(173,154,164,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(173,154,164,1) 100%),
                    url("imagenes/olas-footer.svg") no-repeat 100% 100%,
                    url("imagenes/para-ellas.jpg") no-repeat 0 0;
                    background-size:auto auto, 50% auto, cover;}

    #ParaEllas .NavInfoModelo a { background-color: #BDB2B8; }
    #ParaEllas ul li.TipoAbsorsion { background-color: #7E5C6E;}
    #ParaEllas ul li.CodigoModelo { background: url("imagenes/filete-rosa.svg") repeat-x 0 50%; background-size: auto 2px; }
    #ParaEllas ul li.CodigoModelo img { border:3px solid #7E5C6E;}

    #ParaEllas .Talles caption span,
    #ParaEllas .Talles tr:first-child th,
    #ParaEllas .Talles tr:first-child td { color:#7E5C6E;}

    #ParaEllas ul.Referencias figure {background-color: #7E5C6E;}


    /*Para Ellos*/
    #ParaEllos { background:linear-gradient(0deg, rgba(148,165,176,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(148,165,176,1) 100%),
                 url("imagenes/olas-footer.svg") no-repeat 100% 100%,
                 url("imagenes/para-ellos.jpg") no-repeat 0 0;
                 background-size:auto auto, 50% auto, cover;}


	#ParaEllos .NavInfoModelo a { background-color: #A1AEB7; }
    #ParaEllos ul li.TipoAbsorsion { background-color: #4E7282;}
    #ParaEllos ul li.CodigoModelo { background: url("imagenes/filete-azul.svg") repeat-x 0 50%; background-size: auto 2px; }
    #ParaEllos ul li.CodigoModelo img { border:3px solid #4E7282;}

    #ParaEllos .Talles caption span,
    #ParaEllos .Talles tr:first-child th,
    #ParaEllos .Talles tr:first-child td { color:#4E7282;}

    #ParaEllos ul.Referencias figure {background-color: #4E7282;}


    /*TECNOLOGIAS*/
    #MaximaTecnologia { text-align: center; padding:60px 0;}

       #MaximaTecnologia h3 { margin: 0 auto 20px auto;}

       #GraficoTecnologia { width: 100%; margin: 0 auto; max-width: 1200px; min-height: 310px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  background: url("imagenes/grafico.png") no-repeat 50% 50%;}
            #GraficoTecnologia div { flex: 0 1 auto;}
            #GraficoTecnologia p { position: relative; text-align: center; font-size: 1.3rem;  color: #6D6E71; margin: 5px; padding: 15px; border:2px solid #6D6E71; border-radius: 20px; background-color: #fff;}
            #GraficoTecnologia p::after {content: ""; position: absolute; display: block; width: 250px; height: 24px; background: url("imagenes/filete-grafico.svg") no-repeat 100% 50%; background-size: auto 100%;}
            p.capa-exterior::after { top: 50%; right: -250px;
                                    -webkit-transform: translateY(-12px);
                                    transform: translateY(-12px);}

            p.capa-interior::after { top: 50%; right: -140px;
                                    -webkit-transform-origin: 0 0;
                                    transform-origin: 0 0;
                                    -webkit-transform: rotate(180deg) translate(194px, -12px);
                                    transform: rotate(180deg) translate(194px, -12px);}

            .Referencia { display: none;}

       #CaracteristicasTecnologia { display:flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1100px; margin: 30px auto 0 auto;}
           #CaracteristicasTecnologia > div { text-align: left; margin: 0 15px;}
               ul.General { list-style: none;}
                   ul.General li {  display: flex; flex-wrap: wrap; align-items: center; padding-right: 10px;}
                       ul.General figure { flex: 0 0 50px;}
                       ul.General img { max-width: 100%; display: block;}

                       ul.General h4,
                       ul.General h6 { position: relative; flex: 1; padding-left: 15px;  color: #6D6E71;}

                       ul.General h4 { font-size: 1.3rem; padding-left: 0;}
                       ul.General h6 { font-size: 1.2rem; padding-left: 15px;}

                       /*ul.General h4::after,*/
                       ul.General h6::after{ content:"•"; position: absolute; left: 0; top: 0; font-size: 15px; color:#6D6E71;  display: block;}

                       ul.General h4 { margin-left: 10px;}

          #Atributos {flex: 2;}
              #Atributos ul.General { display: flex; flex-wrap: wrap;}
              #Atributos ul.General li { flex: 0 0 50%; margin-bottom: 10px;}

              #Propiedades { display: flex; width: 100%; margin-top: 15px;}
                  #Propiedades figure { flex: 0 1 100px; margin-right: 10px;}
                  #Propiedades img { max-width: 100%; display: block;}

          #Cuidados {flex: 1;}
              #Cuidados h5 { margin-bottom: 5px; font:normal 1.3rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71;}

              #Lavado { display: flex; flex-wrap: wrap;}
                  #Lavado figure { flex: 1; padding: 5px;}
                  #Lavado img { max-width: 100%; display: block;}

              #Cuidados ul.General {}
              #Cuidados ul.General li {}

        /*CARACTERISTICAS*/
        #Caracteristicas { padding:70px 0 50px 0; text-align: center; background: #f2f2f2;}
           #Caracteristicas h3 { margin:0 auto 20px auto;}

           #Instrucciones { position: relative; display: inline-block; text-align: left; padding: 30px 30px 0 30px; border:1px solid #3D3D3D; border-radius: 10px;}
                #Instrucciones aside { position: absolute; top: 0; right: 20px; display: flex; flex-wrap: wrap;}
                    #Instrucciones aside div { flex: 1; padding-top: 35px; margin: 15px 10px; text-align: center; font-size: 0.8rem;}

                    #Hipoalergenico { background: url("imagenes/icono-hipoalergenico.svg") no-repeat 50% 0; background-size: 30px auto;}
                    #Ecologico { background: url("imagenes/icono-ecologico.svg") no-repeat 50% 0; background-size: 30px auto;}

                    #Hipoalergenico p { color: #6D6E71;}
                    #Ecologico p { color: #5FC159;}

                #Instrucciones ul { list-style: none;}
                #PasoPaso {}
                #PasoPaso > li { display: block; margin-bottom: 30px;}
                #PasoPaso > li > span { display: inline-block; vertical-align: top; width: 35px; height: 35px; margin-top: -5px; text-align: center; padding-top: 8px;  font:normal 0.9rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71;  border: 1px solid #6D6E71; border-radius: 50%;}
                #PasoPaso > li > h4 {  display: inline-block; vertical-align: top; width: calc(100% - 35px); font-size: 1.3rem; color: #6D6E71; padding-left: 10px;}
                #PasoPaso > li > h5 { font-size: 1.1rem; color: #6D6E71; padding-left: 45px;}
                   .Subpasos { display: flex; flex-wrap: wrap; margin-left: 45px;}
                    .Subpasos li { display: flex; align-items: center;}
                        .Subpasos span { flex: 0 0 25px; height: 25px; padding-top: 3px; text-align: center; font:normal 0.9rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71;  border: 1px solid #6D6E71; border-radius: 50%;}
                        .Subpasos h5 { flex: 1; font-size: 1.1rem; color: #6D6E71; padding-left: 10px;}



    /*Autoshow*/
	.autoshow { opacity:0;
				 -webkit-transform: translateY(30px);
			     transform: translateY(30px);
				 -webkit-transition: -webkit-transform 0.5s ease, opacity 0.3s ease;
				 transition: transform 0.5s ease, opacity 0.3s ease;}

	.autoshow.in { opacity:1;
					-webkit-transform: translateY(0);
					transform: translateY(0);}
	/*....*/


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer.General { display: flex; flex-direction: column;}
    #Pie { flex: 0 0 200px; display: flex; flex-wrap: wrap; align-items: center; background: url("imagenes/olas-footer.svg") no-repeat 100% 50%; background-size: 80% auto;}
        #Pareja { flex: 0 0 300px; height: 100%; background: url("imagenes/foto-footer.jpg") no-repeat 0 0; background-size: auto 100%;}
        #Pie p { flex: 3; font-size: 2.5rem; padding: 0 20px; text-align: left; color: #5692CD;}

        #LogoPieEldertec { flex: 0 0 250px;  padding-right: 30px;}
            #LogoPieEldertec figcaption { display: block; text-align: center; margin-top: 5px; font-size: 13px; color: #676767;}
            #LogoPieEldertec img { width: 160px; display: block; margin: 0 auto;}

	#QuickContacto { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;  padding: 40px 0; background-color: #000000;}
        #QuickContacto .Viewport { height: auto; max-width: 900px; flex-wrap: wrap;}

            #IntroContacto { flex: 1 1 100%; text-align: center;}
                #IntroContacto p { margin-bottom: 30px; font:normal 2.5rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #fff;}

            #DataContacto { flex: 1; text-align: left; padding-left: 20px;}
                #DataContacto address,
                #DataContacto p,
                #DataContacto a { font-size: 1.3rem; font-style: normal; color: #fff; padding-left: 30px;}

                #DataContacto address { background: url("imagenes/icono-pin.svg") no-repeat 0 0; background-size: 20px auto;}
                p.Horario { margin: 20px 0;}
                #DataContacto a { display: block; margin: 10px 0;}
                #DataContacto a[title*="Instagram"] { background:url("imagenes/instagram-blanco.svg") no-repeat 0 50%; background-size:20px auto;}
                #DataContacto a[title*="Facebook"] { background:url(imagenes/icono-facebook-blanco.svg) no-repeat 0 50%; background-size:20px auto;}
                #DataContacto a[title*="YouTube"] { background:url("imagenes/youtube-blanco.svg") no-repeat 0 50%; background-size:20px auto;}
                #DataContacto a[title*="Whatsapp"] { background:url(imagenes/icono-wapp.svg) no-repeat 0 50%; background-size:20px auto;}

                a#BtnEcommerce { display: inline-block; padding: 5px 10px 5px 50px; font-size: 1rem; margin-left: 30px; background: #BD9D5A url("imagenes/icono-carrito.svg") no-repeat 10px 50%; background-size:30px auto; border-radius:10px; }


            #FormContacto { flex: 1; padding-right: 20px;}
                #FormContacto form { width: 100%;}
                #FormContacto ::placeholder { font-family: "Avenir-condensed", Arial, Helvetica, sans-serif; color: #4C4C4C; opacity: 0.8;}

                #FormContacto input[type="text"],
                #FormContacto input[type="email"],
                #FormContacto input[type="tel"] { display: block; width: 100%; padding: 10px; font: normal 1.2rem "Avenir-condensed", Arial, Helvetica, sans-serif; color: #4C4C4C; border:none; background-color: #fff;  margin-bottom:10px; border-radius: 5px;}

                .group { width:100%; display: flex; flex-wrap: wrap; margin-bottom: 10px;}
                    .group input { flex: 1; margin-bottom: 0 !important; border-radius: 5px 0 0 5px !important;}
                    .group span { flex: 0 0 100px; text-align: left; background-color: #A3A3A3; border-radius:0 5px 5px 0;}

                #FormContacto textarea { width:100%; height: 150px; font: normal 1.2rem "Avenir-condensed", Arial, Helvetica, sans-serif; color: #4C4C4C;  padding:10px; border: none;  background-color: #fff;  margin-bottom:10px; border-radius: 5px;}

                input#BtnContactoMail { display: block; width: 100%; padding: 10px; font: normal 1.3rem "Avenir-condensed", Arial, Helvetica, sans-serif; color: #fff; background-color: #BD9D5A; border-radius: 5px; cursor: pointer;}

        #Legales { flex: 0 0 auto; padding: 20px 0; }
            #Legales .Flex { flex-wrap: wrap;}
                p#Copy { flex:1; font:normal 10px Arial, Helvetica, sans-serif;  color:#000; text-align: left; }
                p#CreacionUno { flex: 1; font:normal 10px Arial, Helvetica, sans-serif; text-align: right;  color:#000; }

                p#Copy a,
                p#CreacionUno a { color:#000;}

/*MAIL OK*/
#RespuestaForm { display: flex; justify-content: center; align-items: center; background-color: #f2f2f2;}
    #RespuestaForm main { display: flex; flex-wrap:  wrap; align-items: center;width: 100%; max-width: 1200px; padding: 30px 15px; }
        #RespuestaMail { flex: 1 1 600px; text-align: center; }
            #RespuestaMail > img { width: 210px; margin-bottom: 20px;}

            #RespuestaMail h1,
            #RespuestaMail h2,
            #RespuestaMail p,
            #NavSocialMail h3 { font-family:"Avenir-condensed", Arial, Helvetica, sans-serif; }

            #RespuestaMail h1 { font-size: 2.5rem; margin-top: 10px; }
            #RespuestaMail h1 strong { display: block; font-family: "Avenir-condensed", Arial, Helvetica, sans-serif; color: #5692CD;}
            #RespuestaMail h2 { font-size: 1.5rem; color: #1f1f1; }
            #RespuestaMail p { font-size: 1rem; margin: 15px 0 0 0;}
            a.BtnMail { font-size: 1.5rem; color: #666;}

            /*#NavSocialMail { display: block; text-align: center; padding-top: 25px;}
                #NavSocialMail h3 {  font-size: 1.2rem; margin-top: 10px;}
                    #NavSocialMail div { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 230px; margin: 15px auto;}
                    #NavSocialMail a { flex: 0 0 45px; height: 45px; margin: 0 10px; border: 1px solid #BBBBBB; border-radius: 50%;}
                    #NavSocialMail a.BtnInstagram { background: url("imagenes-new/icono-instagram-naranja.svg") no-repeat 50% 50%; background-size: 30px auto;}
                    #NavSocialMail a.BtnFacebook { background: url("imagenes-new/icono-facebook-naranja.svg") no-repeat 50% 50%; background-size: 30px auto;}
                    #NavSocialMail a.BtnLinkedIn { background: url("imagenes-new/icono-linkedin-naranja.svg") no-repeat 50% 50%; background-size: 30px auto;}*/

           #RespuestaMail > div { display: block; padding-bottom: 35px;}
               #RespuestaMail a.celeste {  display: inline-block; font-size: 1rem; background-color: #5692CD; padding: 10px; color: #fff; border-radius: 5px;}

        #ExtraMail { flex: 0 0 auto;}


.SafeZone * { line-height: 1.2em !important;}

p.General { text-align:justify;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			-o-hyphens: auto;
			hyphens: auto; }
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*RESPONSIVE///////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {
html { font-size: 15px; /*1rem = 15px*/}
    .Viewport { max-width:1360px;}
    .Viewport.Extend { max-width: 1600px; }

     #IntroTop article {width: 38%;}
     #IntroTop h2 { font-size: 3rem;}
     #Descripcion p { padding-right: 150px;}

/*main*/
  #Tag { bottom: 0;}
  .ContadorLavados {  -webkit-transform: scale(0.7) translateY(-100px);
                      transform: scale(0.7) translateY(-100px);}
}

@media (max-width: 1650px) {
/*main*/
.Viewport.Extend { padding-left: 30px;}
#TopHeader { padding-left: 0;}
    #AccionesEcomm { padding-right: 100px;}
}

@media (max-width: 1470px) {
.Viewport,
.Viewport.Extend { max-width:1200px;}

/*main*/
   .Viewport.Extend {}

   #IntroTop article {  width: 40%;}
       #IntroTop h2 { font-size: 2.3rem;}
       #IntroTop h2 br { display: none;}
       #IntroTop h2 span { display: block;}
       #Descripcion p { padding-right: 30px;}


   #IntroTop aside { flex: 0 0 150px;}

   .ContadorLavados {  -webkit-transform: scale(0.6) translateY(-100px);
                      transform: scale(0.6) translateY(-100px);}

  #Tag { width: 250px;}
}

@media(max-width: 1300px) {
html { font-size: 13px;}
.Viewport,
.Viewport.Extend { padding:0 30px; max-width:none;}

header.General { padding-top: 25px;}
header .Viewport { padding-right: 0 !important;}

/*main*/
    #Logo {  flex: 0 0 250px;}

    #MenuGeneral > li > a { padding-left: 20px; padding-right: 20px;}

    #LogoEldertec { display: none;}

    .Modelos {}
        ul li.TipoAbsorsion {flex: 0 0 70px;height: 70px;}
        ul li.CodigoModelo img { width: 70px;height: 70px;}

    #Banner picture img { width: 1300px;}

    #MaximaTecnologia h3 span,
    #Caracteristicas h3 span { display: block;}
        #GraficoTecnologia { min-width: 900px; min-height: 150px; background-position: 50% 40%;}
            #GraficoTecnologia p { margin-bottom: 10px;}
            p.capa-interior::after {right: -175px;}
            ul.General h4 { font-size: 1.1rem;}

    #Instrucciones { padding: 15px;}
        #PasoPaso > li { margin-bottom:20px; }
        #PasoPaso > li:last-child { margin-bottom: 0;}
        #PasoPaso > li > span {  width: 25px;height: 25px; padding-top: 5px; margin-top: -3px;}
        #PasoPaso h4 { font-size: 1.3rem;}
        #PasoPaso > li > h5 { padding-left: 35px;}
        #PasoPaso > li ul li span { padding-top: 4px; }
        .Subpasos { margin-top: 5px; margin-left:35px; }
        .Subpasos li { padding-right: 15px;}

        #Instrucciones aside { right: 10px;}
        #Hipoalergenico { margin-right: 0 !important;}

/*footer*/
    #Pie { flex: 0 0 100px;}
    #Pie p { font-size: 2rem;}
    #Pareja { flex: 0 0 170px;}

    #LogoPieEldertec { flex: 0 0 200px; padding-top: 15px; padding-bottom: 15px;}
        #LogoPieEldertec img { width: 130px;}

    #DataContacto address {  background-size: 17px auto;}
}
@media (max-width: 1200px) {
/*main*/
    #Tag {}
    #Tag figure { -webkit-transform: translate(-50px, 80px);
                  transform: translate(-50px, 80px);}
}

@media (max-width: 1100px) {
/*header*/
header.General { position: absolute;}

/*main*/
    #Intro,
    #SlideGeneral,
    #SlideGeneral div { height: 100vh;}

    #IntroTop {justify-content: center;}
        #IntroTop article { flex: 0 0 auto; width: 50%;}

        #Descripcion p { display: none !important;}
            #IntroTop h2 { font-size: 3rem;  padding-left: 0; padding-right: 15px;}
            #IntroTop h2 br { display: none;}

        #IntroTop aside { overflow: hidden; width: 50%; align-self: flex-end;}
        #IntroTop .Flex {}
            .ContadorLavados { margin-left: -70px;
                                -webkit-transform: scale(0.5);
                                 transform: scale(0.5);}

    #Tag { top: 160px;}

    .pareja-parque,
    .pareja-cocina,
    .corredora { background-position: 70% 50%; background-size: auto 100%;}

    ul.Referencias li { flex: 0 0 170px;}

    .Modulo { height: auto;}
        #GraficoTecnologia { min-width: 800px; }
}

@media (min-width: 1100px) and (max-height: 910px) {
/*main*/
    #Tag { bottom: -50px;}
}

@media (min-width: 1100px) and (max-height: 820px) {
/*header*/
     header.General {padding-top: 25px;}

/*main*/
    #Tag { bottom: 0;}
}

@media (min-width: 1100px) and (max-height: 750px) {
/*main*/
#IntroTop article { width: 43%;}
   #IntroTop h2 { padding-right: 100px;}
   #IntroTop aside { position: relative; overflow: hidden; flex: 0 0 140px;
                     transform: translateY(-40px);}
       #LogoEldertec img { width: 150px;}
       .ContadorLavados { -webkit-transform: scale(0.5);
                           transform: scale(0.5);}

  #Tag { bottom: 0;}
}

@media (min-width: 1100px) and (max-height: 850px) {
    #Descripcion p { display: none !important;}
}


@media (min-width: 1100px) and (max-height: 700px) {
/*main*/
header.General { position: absolute;}
    #Logo { flex: 0 0 250px;}

    #Intro,
    #SlideGeneral,
    #SlideGeneral div { height: 100vh;}

    #IntroTop {justify-content: center;}
        #IntroTop article { width: 50%;}

        #Descripcion p {}
            #IntroTop h2 { font-size: 3rem;  padding-left: 65px; padding-right: 35px;}
            #IntroTop h2 br { display: none;}

        #IntroTop aside { overflow: hidden; width: 100%; align-self: flex-end;}
        #IntroTop .Flex {}
            .ContadorLavados {-webkit-transform: scale(0.5);
                                 transform: scale(0.5);}

    .pareja-parque,
    .pareja-cocina,
    .corredora { background-position: 70% 50%; background-size: auto 100%;}
}


@media (min-width: 1100px) and (max-height: 680px) {
/*main*/
    #Tag { bottom: 50px;}
}

@media (min-width: 1090px) and (max-height: 500px) {
/*main*/
    #IntroTop h2 { font-size: 2.5rem; padding-top: 50px;}
}

@media (max-width: 1024px) {
/*main*/
   .pareja-parque,
   .pareja-cocina,
   .corredora {background-position: 50% 50%;}

   #Banner picture img { width: 1024px;}
}

@media (max-width: 950px) {
/*header*/
header.general { position: relative;}
    header.General .Viewport { background: url("imagenes/internas/fondo-menu-mobile.svg") no-repeat 0 50%;}
     a#BtnMenuMobile { display:block; position:absolute; z-index:9200; top:19px; left: 5px; width:35px; height:35px; border-radius: 50%; cursor:pointer;
                       background: url("imagenes/internas/menu-blanco.svg") no-repeat 50% 50%, url("imagenes/internas/menu-close.svg") no-repeat 50% 200px; background-size: 15px auto, 15px auto;}

        #Logo { margin-left: 25px;}
        #MenuGeneral { position:fixed; overflow: hidden; z-index:9100; top:0; left:0; margin-left: 0; display:flex; flex-direction: column; align-items:center; justify-content: center; width:100%; height: 0; background:rgba(241,241,241,0.90);  box-shadow: 0 30px 28px rgba(0,0,0,0.25); padding-right: 0; border: none;
                        -webkit-transition: height 1s cubic-bezier(.25,.8,.25,1);
                        transition: height 1s cubic-bezier(.25,.8,.25,1);}

           #MenuGeneral a { flex: 0 0 auto; height: auto; text-align: center; font-size: 2rem; padding: 15px 0; color: #646364; border-radius: 0 !important; background: url("imagenes/internas/filete.svg") no-repeat 50% 100%; background-color: transparent;
                                opacity: 0;
                                -webkit-transform: translateY(50px);
                                transform: translateY(50px);
                                -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
                                transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;}

           #MenuGeneral a:first-child { transition-delay:0.4s; display: block;}
           #MenuGeneral a:nth-of-type(2) { transition-delay:0.5s; }
           #MenuGeneral a:nth-of-type(3) { transition-delay:0.6s; }
           #MenuGeneral a:nth-of-type(4) { transition-delay:0.7s; }
           #MenuGeneral a:last-child { background: none;}

    /*select*/
    #MenuGeneral a.select { background-color: transparent; color: #000000;}

    /*menumode*/
    .menumode { overflow:hidden;}
    .menumode a#BtnMenuMobile { background-position: 50% -200px, 50% 50%; }

    .menumode #MenuGeneral { overflow:auto; height: 100%;}

    .menumode #MenuGeneral a {-webkit-transform: translateY(-30px);
                                 transform: translateY(-30px); }

    /*menumode standby*/
    .menumode.standby #MenuGeneral a { opacity:1;
                                        -webkit-transform: translateY(0);
                                        transform: translateY(0); }
    /*........*/

   #AccionesEcomm { padding: 10px 45px 10px 10px; border-radius: 25px 0 0 25px;}

   /*Login*/
    a#BtnLogin, a#BtnLoginAuth {}
        #Login .DownPanel { position:fixed; z-index: 9100; width:100%; height:0; max-height: none; top:0; display:flex; flex-wrap: wrap; align-content: center; justify-content:center; border-radius: 0 !important; background-color:rgba(242, 242, 242, 0.9);
                           -webkit-transition: height 1s cubic-bezier(.25,.8,.25,1);
                            transition: height 1s cubic-bezier(.25,.8,.25,1); }

            .mueca { background: none; border: none;}
            .mueca::after { display: none;}
            #PanelLogin { top: 0; left: 0;}
                p.TxtHola { font-size: 3rem;}
                p.NombreLog { font-size: 1.8rem;}

        /*loginmode*/
        .loginmode #Login .DownPanel { height: 100%; max-height: none;}
        /*....*/

     a.cerrarx { position:absolute; top:30px; right:30px; cursor:pointer; width:35px; height:35px; background: url("imagenes/icono-menu-close.svg") no-repeat 50% 50%; background-size: 15px auto; display: block;}

    /*mi carrito*/
    #PanelCarrito { display: none;}

/*main*/
#NavSocialFlotante { display: none;}

#IntroTop { justify-content: flex-end; padding-bottom: 50px; padding-left: 50px;
            background: url('imagenes/olas-header-bottom.svg') no-repeat 0 100%,
            linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%);
            background-size: 950px auto, auto auto;}

    #IntroTop header {padding-bottom: 100px;}

    #IntroTop h2 { font-size: 2.5rem;}
    #IntroTop h2 br.middle { display: block;}

    #IntroTop article,
    #IntroTop aside { width: 100%;}

    #IntroTop aside .Flex { padding-left: 10px;}

    .pareja-parque { background-position: 10% 50%;}
    .pareja-cocina,
    .corredora { background-position: 30% 50%;}

    .ContadorLavados { margin-left: -60px;
                        -webkit-transform: scale(0.4);
                        transform: scale(0.4);}

    #Tag { top: 100px;}
    #Tag figure {-webkit-transform: translate(0, 50px);
                transform: translate(0, 50px);}

    .Modelos { padding: 30px 0;}
    .Modelos article { width: 100%; margin-left: 0;}

    #MaximaTecnologia,
    #Caracteristicas { padding: 30px 0;}

}

@media (max-width: 870px) {
/*main*/
    #GraficoTecnologia { min-width: auto; background-size: 100% auto;}
        #GraficoTecnologia p { font-size: 1rem;}
        #GraficoTecnologia p::after { width: 50px;}

        p.capa-exterior::after { top: 50%; right: -50px;}
        p.capa-interior::after { top: 50%; right: -30px;}
}

@media (max-width: 830px) {
/*main*/
    .corredora { background-position: 20% 50%;}

    #Atributos,
    #Cuidados { flex: 1 1 100%;}

    #Propiedades { margin-bottom: 20px;}

    #Cuidados { padding-top: 25px;}
    #Lavado { max-width: 50%; margin-bottom: 10px;}


/*footer*/
    #Pie p { font-size: 1.7rem;}
    #LogoPieEldertec {flex: 0 0 150px;}

    #IntroContacto p {font-size: 1.9rem;}
    #Legales .Flex p { flex: 0 0 100%; text-align: center;}

    #Copy a { display: block; margin-top: 10px;}
    #Copy span { display: none !important;}
    p#CreacionUno { margin-top: 15px;}
}

@media (max-width: 710px) {
/*header*/
#IntroTop h2 { font-size: 2rem;}
    #IntroTop h2 br { display: block;}
    .ContadorLavados { margin-left: -40px;
                        -webkit-transform: scale(0.4);
                       transform: scale(0.4);}

    #Tag { top: 100px;}

    .pareja-cocina { background-position: 20% 50% !important;}

/*main*/
    #Tag { top: 130px;}
}

@media (max-width: 700px) {
/*modal*/
#Goteo {}
    #Goteo ul li { justify-content: center; align-items: flex-start;}
    #Goteo li p { flex:1 1 100%; text-align: center; padding-top: 10px;}

    .pareja-parque { background-position: 25% 50% !important;}


/*footer*/
#IntroContacto { order: 1;}
#DataContacto { order: 3; flex: 1 1 100%; padding-left: 0;}
#FormContacto { order: 2; flex: 1 1 100%; padding-right: 0; margin-bottom: 25px;}
}

@media (max-width: 660px) {
/*main*/
#Pie { flex: 0 0 auto;}
    #Pareja { height: 130px; background-size: 100% auto;}
        #LogoPieEldertec { flex: 1 1 100%; padding: 10px 0; text-align: center; background-color:#fbfbfb;}
        #LogoPieEldertec img {max-width: none; width: 150px; margin: 0 auto;}
}

@media (max-width: 620px) {
/*main*/
#MaximaTecnologia .Viewport { padding-left: 15px; padding-right: 15px;}
    #GraficoTecnologia { flex-direction: column; margin-top: 30px; padding-top: 250px; padding-bottom: 10px; background: url("imagenes/grafico-mobile.png") no-repeat 100% 0; background-size: 130% auto;}
        #GraficoTecnologia div { flex: 0 0 auto; width: 100%;
                                -webkit-transform: none !important;
                                transform: none !important;}

        #GraficoTecnologia p { padding: 9px; text-align: center; font-size: 1.4rem; margin: 0 0 10px 0; border-radius: 8px; border-width: 1px;}
            .Referencia { display: flex; align-content: center; justify-content: center; margin: 0 auto; width: 24px; height: 24px; border: 1px solid #ccc; border-radius: 50%; margin-bottom: 5px; line-height: 20px !important;}
            #GraficoTecnologia p br { display: none;}
            #GraficoTecnologia p::after { display: none;}

            #Atributos ul.General h4,
            #Atributos ul.General h6 { font-size: 1.4rem;}

            #Atributos ul.General li { margin-bottom: 15px;}
}

@media (max-width: 600px) {
/*main*/

    #Banner picture img {  width: 100%; max-width: 100%; display: block;}

    .Modelos .Flex { padding-left: 20px; padding-right: 20px;}
        .Talles th { width: 30px; padding-left: 5px; padding-right: 5px; border-right:1px solid #ccc; }
        .Talles span { display: block;}
        ul.Referencias { margin-left: 0;}
        ul.Referencias li { flex: 1; display: block; justify-content: center;}
        ul.Referencias li figure { width:30px; height: 30px; margin: 0 auto; padding-top: 10px; }
        ul.Referencias li img { width: 8px;}
        ul.Referencias li p { display: block; padding: 10px 0 0 0; text-align: center;}
        .Modelos aside { padding-bottom: 10px;}

    .NavInfoModelo { display: flex; flex-wrap: wrap; justify-content: center;  position: relative; width: 100%; top: auto; right: auto;
                    -webkit-transform: translateY(0);
                    transform: translateY(0);}

       .NavInfoModelo > div { flex: 1 1 100%; text-align: left; padding-left: 20px; }

           #ParaEllas .NavInfoModelo a { background-color: #7E5C6E;}
           #ParaEllos .NavInfoModelo a { background-color: #4E7282;}

           a.BtnCatalogo { text-align: left; display: inline-block; border-radius: 5px; margin-top: 0; margin-bottom: 20px;}
           a.BtnSaberMas { flex: 1; margin-right: 5px; padding-left: 0; padding-right: 40px; text-align: right; border-radius: 0 5px 5px 0; background-position: 95% 50%;}
           a.BtnComprarOnline { flex: 1; margin-left: 5px; border-radius: 5px 0 0 5px;}

    #CaracteristicasTecnologia > div { flex: 1 1 100%;}
    #CaracteristicasTecnologia > div:first-child { margin-bottom: 15px;}
    #Atributos ul.General li { flex: 1 1 100%;}

    #Cuidados { padding-top: 0;}
        #Lavado { max-width: 70%;}

    #Instrucciones aside { position: relative; top: auto; right: auto; width: 100%; padding-top: 10px;}
        #Instrucciones aside div { margin: 0;}

    #Pie p { font-size: 1.5rem;}
}

@media (max-width: 500px) {
/*modal*/
#ContentModal { padding:30px 15px 15px 15px;}
    #Goteo { margin-top: 20px;}
        #Goteo ul { margin-top: 10px;}
        #Goteo li figure { flex: 0 0 40px; height: 40px; padding-top: 13px;}
        #Goteo li img { width: 10px;}
        #Goteo li p { padding: 5px 0 0 0;}

/*main*/
#IntroTop .Flex { padding-left: 0 !important;}
    #IntroTop aside { flex: 0 0 130px; margin-top: 15px;}
    .ContadorLavados {margin-left: 0;  margin-top: 10px;
                     transform-origin: 100% 50%;
                     -webkit-transform: scale(0.4);
                     transform: scale(0.4);}



main h3 { font-size: 1.9rem;}
    .Modelos {}
        .Modelos h4 { font-size: 1.9rem;}
        p.DescripcionModelo { font-size: 1.3rem; margin-top: 8px;}
        ul li.TipoAbsorsion img { display: none;}
        ul li.TipoAbsorsion h5 { padding-top: 6px; font-size: 1.1rem;}

        ul li.CodigoModelo { padding-left: 5px;}
        ul li.CodigoModelo img { width: 70px; height: 70px;}
        .NavInfoModelo { padding-bottom: 0;}

        .Talles caption { font-size: 1.1rem;}

    #MaximaTecnologia h3 { margin-bottom: 0;}
        #MaximaTecnologia h3 span,
        #Caracteristicas h3 span { display: inline;}

        #CaracteristicasTecnologia { margin-top: 0;}
            #Lavado { max-width: 100%;}
            #Cuidados h5 { margin-bottom: 5px;}
            ul.General h4,
            ul.General h6 { font-size: 1.3rem;}

            #Atributos ul.General figure { flex: 0 0 40px;}

    #PasoPaso > li ul { flex-direction: column; align-items: flex-start; justify-content: flex-start;}
    #PasoPaso > li ul li { padding: 3px 0; flex: 0 0 auto; width: 100%;}
    #PasoPaso h5 { padding-left: 20px;}
    #PasoPaso > li:first-child ul li h5 { padding-left: 10px !important;}
}

@media (max-width: 470px) {
/*header*/
#Tag {-webkit-transform: scale(1.1);
      transform: scale(1.1);}

    #IntroTop { padding-left: 15px; padding-bottom: 0;}
        #Tag figure { -webkit-transform: translate(-10px, 50px);
                      transform: translate(-10px, 50px);}

        #Logo {flex: 0 0 190px; padding-left: 20px;}
        a#BtnMenuMobile { top: 10px; left: 10px;}

/*main*/
   #GraficoTecnologia { padding-top: 190px;}
}

@media (max-width: 450px) {
/*modal*/
#ContentModal { padding-top: 50px;}
    p#TituloModal {font-size: 2.3rem;}

/*header*/
a#BtnMenuMobile {left: 0;}

/*main*/
    .corredora {  background-position: 15% 50%;}

.Modelo {}
    ul li.CodigoModelo h6 { font-size: 1rem; margin-top: 3px;}

#Caracteristicas .Viewport { padding-left: 12px; padding-right: 12px;}
    #PasoPaso > li > h4 { font-size: 1.4rem; padding-left: 6px;}
    #PasoPaso > li > span { width: 20px; height: 20px; padding-top: 2px; margin-top: 0;}
    #PasoPaso > li > h5 { font-size: 1.3rem; padding-left: 25px;}
    .Subpasos h5 { font-size: 1.3rem; }
    #PasoPaso > li:first-child ul li h5 { padding-left: 5px !important;}
    .Subpasos span {flex: 0 0 20px; height: 20px; padding-top: 2px !important;}

    #Instrucciones aside { padding-top: 25px;}
        #Hipoalergenico p { font-size: 1rem;}
}

@media (max-width: 450px) {
/*main*/
 #Tag { left: 30px !important;}

.NavInfoModelo a { font-size: 1.2rem;}

/*footer*/
#FormContacto input[type="text"],
#FormContacto input[type="email"],
#FormContacto input[type="tel"],
#FormContacto textarea {font-size: 1.3rem;}

input#BtnContactoMail { font-size: 1.5rem;}
}

@media (max-width: 400px) {
/*header*/
header.General .Viewport { padding:0 10px;}

/*main*/
#IntroTop header { padding-left: 5px;}
#IntroTop aside .Flex { padding-left: 0;}

    ul li.CodigoModelo img { width: 55px; height: 55px;}
}

/*ANIMACIONES*/
@-webkit-keyframes wash {
  0%  { -webkit-transform: translate(0,0);}
  50% { -webkit-transform: translate(30px,0);}
  51% { -webkit-transform: translate(30px,0);}
  100% { -webkit-transform: translate(0,0);}
}

@keyframes wash {
  0%   { transform: translate(0,0);}
  50% { transform: translate(30px,0);}
  51% { transform: translate(30px,0);}
  100% { transform: translate(0,0);}
}

@-webkit-keyframes lavadosfrente {
  0%   {opacity: 1;}
  40% {opacity: 1;}
  50% { opacity: 0;}
  90% { opacity: 0;}
  100% {opacity: 1;}
}

@keyframes lavadosfrente{
  0%   {opacity: 1;}
  40% {opacity: 1;}
  50% { opacity: 0;}
  90% { opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes lavadosdorso{
  0%   {opacity: 0;}
  40% {opacity: 0;}
  50% { opacity: 1;}
  90% { opacity: 1;}
  100% {opacity: 0;}
}

@keyframes lavadosdorso{
  0%   {opacity: 0;}
  40% {opacity: 0;}
  50% { opacity: 1;}
  90% { opacity: 1;}
  100% {opacity: 0;}
}

@-webkit-keyframes card{
0% {-webkit-transform: rotate(10deg);}
100% {-webkit-transform: rotate(-10deg);}
}

@keyframes card{
0% {transform: rotate(10deg); }
100% {transform: rotate(-10deg);}
}