/*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: 3.8vw; 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; margin: 6px 0px; }
    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; line-height: 24px; 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 img { width: 48%; margin: 0.5%; }



.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 img {
        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;    }

}