/*RESET*/

@charset "utf-8";a{text-decoration:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}



/*GENERALES*/

body { margin:0px; background-color:#FFF; overflow-x: hidden !important}

p, b, a, i, u, h1, h2, h3, h4, h5, h6, ul ,li, input, textarea, select, span { 

    font-family: 'Montserrat', sans-serif;

 }

b { font-weight:700}

.clear0 { clear:both; height:0px}

.clear5 { clear:both; height:5px}

.clear10 { clear:both; height:10px}

.clear15 { clear:both; height:15px}

.clear20 { clear:both; height:20px}

.clear30 { clear:both; height:30px}

.clear40 { clear:both; height:40px}

.clear50 { clear:both; height:50px}

.clear90 { clear:both; height:90px}

::selection {color:#CCC;background:#444;}

::-moz-selection {color:#EEE;background:#444;}

*:focus { outline:none}









.document-opacity { opacity: 1; margin-top: 0vh;}

#page-loader {

    position: fixed; display: flex; justify-content: center; align-items: center;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

    background-color: #395876;

    z-index: 9999999;

}

#page-loader img { width: 80%; max-width: 300px; }





.loader-review { position: absolute; top: calc(54% + 60px); left: 50%;  transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);  width: 300px; font-family: Arial;  font-size: 13px;  text-align:center;}

.loading { background-color: #CCC; height: 5px;  overflow: hidden; position: relative; width: 160px; margin-top: 500px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

    -ms-border-radius: 2px;

    -o-border-radius: 2px;}

.loading-bar { animation: sideToside 2s ease-in-out infinite; background-color: #EEE; height: 100%; position: absolute; width: 50%;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

    -ms-border-radius: 2px;

    -o-border-radius: 2px;}

.center { left: 50%; margin: 0; position: absolute; top: 60%;  transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }

@keyframes sideToside {

    0%, 100% { transform: translateX(-50%); }

    50%      { transform: translateX(150%); }

}







header { width: 100%; height: auto; background-image: url(../img/fondoHeader.jpg); display: flex;align-items: center; justify-content: center;}

header a { display: flex;align-items: center; justify-content: center; margin: 0px 10px; }

header p { display: flex;align-items: center; justify-content: center; margin: 0px 7px; padding: 10px 0px; font-size: 20px; line-height: 26px; color: #FFF;}

header img { height: 27px; margin-right: 42x;}

header img.email { height: 22px;}





.wp {

    position: fixed; z-index: 99999;

    bottom: 30px;

    right: 30px;

    width: 40px;

    width: 60px;

    height: 60px;

    background-color: #54af32;

    display: flex;

    align-items: center;

    justify-content: center;

    -webkit-border-radius: 100%;

    -moz-border-radius: 100%;

    border-radius: 100%;

    -ms-border-radius: 100%;

    -o-border-radius: 100%;

}

.wp img { width: 60%;}

.wp:hover { opacity: 0.8;}









.wp2 {

    position: absolute; z-index: 99999; padding: 6px 10px;

    top: 30px;

    right: 30px;

    width: auto;

    height: 40px;

    background-color: #54af32;

    display: flex;

    align-items: center;

    justify-content: center;

    -webkit-border-radius: 40px;

    -moz-border-radius: 40px;

    border-radius: 40px;

    -ms-border-radius: 40px;

    -o-border-radius: 40px;

}

.wp2 p { color: #FFF; font-weight: 600; font-size: 18px; margin-right: 10px;}

.wp2 img { width: 30px;}

.wp2:hover { opacity: 0.8;}



















.hero { width: 100%; height: auto; padding: 0px 0px; background-image: url(../img/fondo-hero.jpg); background-size: cover; background-position: center top;}

.hero .in { width: 90%; height: auto; min-height: 72vh; background-color: rgba(0, 0, 0, 0); display: flex; align-items: center; justify-content: space-between; padding: 100px 0px; max-width: 1400px; margin: auto;}

.hero .in a { width: 100%; margin: auto; text-align: center;}

.hero .in .line { width: 160px; height: 4px; background-color: #FFF; margin: 40px auto;}

.hero .in h4 { color: #FFF; font-size: 42px; line-height: 50px; font-weight: 600; letter-spacing: 10px;}









.hero .in .izq { width: 60%;}

.hero .in .izq .logo { width: 95%; margin-bottom: 2vw;}

.hero .in .izq h2 { color: #FFF; font-size: 3vw; line-height: 4.7vw; font-weight: 400; margin-bottom: 1vw;}

.hero .in .izq h3 { color: #FFF; font-size: 1.8vw; line-height: 2.6vw; font-weight: 600;}











form { box-sizing: border-box; padding: 10px 20px; background-image: url(../img/fondoform.jpg); background-size: cover; text-align: left;     width: 38%; display: flex; flex-wrap: wrap; justify-content: space-between;

    -webkit-border-radius: 40px;

    -moz-border-radius: 40px;

    border-radius: 40px;}



form p { color: #FFF; font-size: 26px; line-height: 34px; margin-bottom: 20px;}

form .campo { width: 49%; margin-bottom: 14px; display: flex; align-items: center;}

form .campo input { border: 1px solid #FFF; flex: 1; box-sizing: border-box; padding: 12px; width: 100%;

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px   ;

    border-radius: 6px;}

form .sendBtn { border: 1px solid #FFF;  width: 180px; box-sizing: border-box; padding: 8px; background-color: transparent; color: #FFF; font-weight: 600; padding: 15px; margin-left: auto;

    -webkit-border-radius: 100px;

    -moz-border-radius: 100px   ;

    border-radius: 100px;

    -moz-transition:all 0.25s ease 0s;

    -o-transition:all 0.25s ease 0s;

    -ms-transition:all 0.25s ease 0s;

    -webkit-transition:all 0.25s ease 0s;}

    form .sendBtn:hover { background-color: #FFF; color: #222;}



form .campo img { width: 30px; height: 30px; margin-right: 13px;}

form textarea { width: 100%; height: 150px; margin-bottom: 16px; box-sizing: border-box; padding: 10px;

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px   ;

    border-radius: 6px;}



    





.cont2 { width: 90%; height: auto; padding: 60px 0px; display: flex; align-items: center; justify-content: center; margin: auto;}

.cont2 .izq { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-right: 30px; text-align: center;}

.cont2 .izq img { width: 400px; margin-bottom: 30px;}

.cont2 .izq p { font-size: 24px; line-height: 28px; font-weight: 600;}

.cont2 .der { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; margin-left: 30px;}

.cont2 .der li { display: flex; align-items: center; justify-content: center; margin: 8px 0px;}

.cont2 .der li img { width: 28px; margin-right: 14px;}

.cont2 .der li p { font-size: 20px; line-height: 26px;font-family: 'Playfair Display', serif; }







.cont3 { width: 100%; height: auto; padding: 90px 0px; padding-top: 70px; display: flex; align-items: center; justify-content: center; background-color: #FFF;}

.cont3 li { display: flex; align-items: center; justify-content: center; margin: 14px 5%;  text-align: center;}

.cont3 li img { width: 160px; height: auto; margin-bottom: 22px; margin-right: 40px;}

.cont3 li p { font-size: 26px; line-height: 32px; font-weight: 500; color: #222; text-align: left; }









.quienes { width: 100%; height: auto;}

.quienes .titular { width: 100%; height: auto; background-image: url(../img/fondo2.jpg); background-position: center top; background-size: cover; padding: 140px 0px;}

.quienes .titular h5 { color: #FFF; font-size: 70px; line-height: 70px; text-align: center; font-weight: 500;font-family: 'Playfair Display', serif; }

.quienes p { font-size: 20px; line-height: 32px; text-align: center; width: 80%; max-width: 1100px; margin: auto; margin-top: 60px; margin-bottom: 30px;font-family: 'Playfair Display', serif; color: #111; }





footer { width: 100%; height: auto; padding:60px 0px; display: flex; align-items: center; justify-content: center; background-color: #1e1e1e; }

footer .in { width: 90%; max-width: 1400px; margin: auto; display: flex; justify-content: space-between; align-items: center;}

footer .in div { display: flex; align-items: center;}

footer .boton { background-color: #004080; color: #FFF; border: 2px solid #004080; box-sizing: border-box; font-size: 26px; font-weight: 700; padding: 22px 60px !important; height: auto !important; letter-spacing: 5px;

    -webkit-border-radius: 50px;

    -moz-border-radius: 50px;

    border-radius: 50px;

    -moz-transition:all 0.25s ease 0s;

    -o-transition:all 0.25s ease 0s;

    -ms-transition:all 0.25s ease 0s;

    -webkit-transition:all 0.25s ease 0s;}

    footer .boton:hover { background-color: #FFF; color: #004080; }



    footer img { height: 70px;margin-right: 20px;}

    footer p { color: #FFF; font-size: 34px; line-height: 42px; font-weight: 600;}



    footer .in ul { display: flex; flex-direction: column;}

    footer .in ul li { display: flex; align-items: center; }

    footer .in ul li img { width: 30px; height: 26px; padding: 0; margin: 0; margin-right: 10px;}

    footer .in ul li p { font-weight: 300; font-size: 20px; padding: 0; margin: 0;}



    footer .in .logo {  height: 100px;;}





.divisor { width: 100%; height: 40px; background-image: url(../img/agua.jpg); background-position: center center; background-size: cover;}





.distri { width: 90%; max-width: 1400px; display: flex; align-items: center; justify-content: space-between; margin: auto; padding: 4vw 0px;}

.distri .img1 { height: 14vw;}

.distri .img2 { height: 14vw;}









.gracias { font-size: 40px; line-height: 50px; font-weight: 600; text-align: center;}











.prendas2 { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding: 10px 0px; display: none;}

.prendas2 img { width: 33%; box-sizing: border-box; border: 4px solid #FFF;}



.prendas3 { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 15px; }

.prendas3 a { width: 32%; margin: 0.5%; }
.prendas3 a img { width: 100%;  }







.kobo { width: 100%;}







.franja2 { width: 100%; height: auto; padding: 60px 0px; text-align: center;padding-bottom: 80px;}



.franja2 p { font-size: 48px; line-height: 56px; padding: 20px 0px; margin-bottom: 25px; font-weight: 600; }

.franja2 a { background-color: #4780c5; color: #FFF; font-size: 34px; line-height: 50px; padding: 16px 40px;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;}



    .franja2 a:hover { background-color: #222;

        -moz-transition:all 0.25s ease 0s;

    -o-transition:all 0.25s ease 0s;

    -ms-transition:all 0.25s ease 0s;

    -webkit-transition:all 0.25s ease 0s;}































@media screen and (max-width: 1800px) {

    .distri .img1 {        height: 15vw;    }

    .distri .img2 {        height: 15vw;    }



}





@media screen and (max-width: 1600px) {

    .distri .img1 {        height: 17vw;    }

    .distri .img2 {        height: 17vw;    }



    

    .hero .in .izq {

        width: 58%;

    }



}









@media screen and (max-width: 1400px) {



    footer p {        font-size: 26px;        line-height: 33px;    }

    footer img {        height: 55px;        margin-right: 20px;    }

    footer .boton {        font-size: 18px;    }



    .hero .in {        min-height: 62vh;    }



    form p {        font-size: 23px;    }





}





@media screen and (max-width: 1200px) {



    .hero .in { height: 62vh;}



    .cont2 .izq img {        width: 330px;    }

    .cont2 .izq p {        font-size: 20px;        line-height: 24px;      }  

    .cont2 .der li {        align-items: flex-start;}

    .cont2 .der li p {        font-size: 18px;        line-height: 23px;       padding-top: 4px; }



    .cont3 li {        margin: 14px 3%;    }

    .cont3 li img {        width: 170px;    }

    .cont3 li p {        font-size: 20px;        line-height: 26px;    }



    .hero .in {

        height: auto;

        flex-direction: column; text-align: center;

    }



    .hero .in .izq {        width: 80%;    }

    .hero .in .izq h2 {

        font-size: 40px;

        line-height: 50px;

        margin-bottom: 30px;

    }

    .hero .in .izq h3 {

        font-size: 28px;

        line-height: 36px;

    }



    form {        width: 80%;        max-width: 600px; margin-top: 40px; text-align: center;    }



    .franja2 p {   font-size: 40px;      line-height: 50px;    }

    .franja2 a {        font-size: 26px;    }



    .cont3 li {        display: flex;        flex-direction: column;    }

    .cont3 li img {

        width: 120px;

        margin: 0;

        margin-bottom: 20px;

    }

    .cont3 li p {        text-align: center;    }

    footer .in .logo {        height: 65px;    }







}



@media screen and (max-width: 960px) {



    .cont2 {        flex-direction: column;    }

    .cont2 .izq {        margin-right: 0px;        margin-bottom: 28px;    }



    .cont3 li {        margin: 14px 2%;    }



    .wp {        bottom: 15px;        right: 15px;    }

    .wp2 {        top: 15px;        right: 15px;      padding: 0px 10px;  }

    .wp2 p {        font-size: 16px;    }

    .wp2 img {        width: 25px;    }



    .hero .in {        height: 65vw;    }



    .prendas li {        width: 50%;        height: 35vw;    }



    footer {        padding: 100px 0px;    }



    .hero .in { height: 60vh;}

    .hero .in .logo {        width: 65%;        max-width: 650px;    }

    .hero .in h4 {        font-size: 36px;        line-height: 46px;    }



    header p {        font-size: 16px;    }

    header img {        height: 19px;    }

    header img.email {        height: 16px;    }



    .hero .in {        height: auto;     flex-direction: column;  padding: 50px 0px;   }



    form {        width: 600px;    }



    .distri {        flex-direction: column;       padding: 7vw 0px;

    }

    .distri .img1 {        height: 26vw; margin-bottom: 8vw;    }

    .distri .img2 {        height: 26vw;    }



    .prendas li p {        font-size: 3vw;        line-height: 4vw;    }



    footer {        padding: 50px 0px;    }

    footer .in { flex-direction: column;    }

    footer .in div {        margin-bottom: 30px;    }



    .gracias {

        font-size: 28px;

        line-height: 41px;

        font-weight: 600;

        text-align: center;

    }



    footer .in .logo {        margin-top: 50px;    }



  

}





@media screen and (max-width: 720px) {









    .cont3 {        padding: 40px 0px;        flex-direction: column;    }

    .cont3 li {        margin: 20px 0%;    }

    .cont3 li img {        margin-bottom: 12px;    }



    .quienes .titular {        padding: 110px 0px;    }

    .quienes .titular h5 {        font-size: 50px;        line-height: 60px;    }



    .wp {        bottom: 15px;        right: 15px;        width: 45px;        height: 45px;    }





    header p {        font-size: 16px;        line-height: 22px;    }

    header img {        height: 20px;        margin-right: 5px;    }



    footer {        padding: 100px 0px;    }

    footer .boton {        font-size: 20px;        padding: 18px 44px !important;    }



    .distri .img1 {        height: 30vw;    }

    .distri .img2 {        height: 30vw;    }



}





@media screen and (max-width: 620px) {

    header { padding: 10px 0px;}

    header p {     display: none;   }

    header img {        height: 24px;    }

    header img.email {        height: 20px;    }

    form {

        width: 500px;

        padding: 46px 48px;

    }

}



@media screen and (max-width: 560px) {



    .hero .in {      }

    .hero .in .izq .logo {

        width: 100%;

        margin-bottom: 2vw;

    }



    .hero .in form {        width: 96%;padding: 35px 30px;    }

    .hero .in form .campo img {

        width: 24px;

        margin-right: 10px;

        height: 24px;

    }



    .hero .in .izq h2 {

        font-size: 32px;

        line-height: 43px;

        margin-bottom: 30px;

    }

    .hero .in .izq h3 {

        font-size: 24px;

        line-height: 30px;

    }

    form .campo {

        width: 100%;

        margin-bottom: 14px;

        display: flex;

        align-items: center;

    }



    .franja2 p {

        font-size: 32px;

        line-height: 42px;

        padding: 0px 20px;

    }



    .franja2 a {

        font-size: 20px;

    }

    .prendas2 img {

        width: 50%;

        box-sizing: border-box;

        border: 4px solid #FFF;

    }



    .prendas3 a {

        width: 48%; margin: 1%;

    }



    form p {

        font-size: 20px;

    }

    .quienes .titular h5 {        font-size: 40px;        line-height: 46px;    }



    .quienes p {        font-size: 18px;        line-height: 29px;        width: 82%;        margin-top: 40px;        margin-bottom: 20px;    }



    footer .boton {        font-size: 18px;        padding: 13px 25px !important;    }



    .wp {        bottom: 14px;        right: 14px;        width: 38px;        height: 38px;    }



    .prendas li {        width: 100%;        height: 56vw;    }



    footer {        padding: 50px 0px;    }



    form .campo .sendBtn {        font-size: 14px;    }



    .prendas li p {

        font-size: 5vw;

        line-height: 7vw;

    }



    footer p {

        font-size: 20px;

        line-height: 30px;

    }

    footer img {

        height: 34px;

        margin-right: 12px;

    }



}





@media screen and (max-width: 440px) {

    form .campo .sendBtn {        font-size: 12px;    }



}