/*
 Project Name: Divina Noite Sleepwear - Seja Uma Revendedora
 Theme Name: Default
 Author: Digisoft Informática
 URI: www.lojadivinanoite.com.br/seja-uma-revendedora

 Sumary:
 [ 1 - Commons ]
 [ 2 - Header ]
 [ 3 - Banner ]
 [ 4 - Section ]
 [ 5 - Footer ]
 [ 6 - Forms ]
 [ 7 - Loader ]
*/


/*************************
 1 - Commons
**************************/

/* 
 Cores de bg: #7a542d 
*/

body {/*#ffe7ec*/
    background: #FFF url(../img/bg.jpg) center 500px repeat-x;
    -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-size: contain;
 height:2000px;
    color: #111;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    margin: 0 auto;
    padding: 0px;
    text-align: left;
    top: 0px;
}

.elastic {
    margin: 0 auto;
    max-width: 1240px;	
    padding: 0px 20px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

h2 {font-family: 'Lato', sans-serif; font-size: 32px; font-weight: 300; color: #CA5D6A; line-height: 36px;}
.h2-bold {font-weight: bold; font-size: 35px;}

a.btn-action, a.btn-whatsapp {background-color: #CA5D6A; border-radius: 100px; border: 1px solid #CA5D6A; color: #FFF; font-size: 20px; text-transform: uppercase; display: inline-block; margin: 0px auto; text-decoration: none; padding: 15px 50px;}
a.btn-action:hover, a.btn-whatsapp:hover {background-color: #CA5D6A; border: 1px solid #CA5D6A; text-decoration: none;}

/*a.btn-whatsapp {background-color: #0FA859 !important; border: 1px solid #0FA859 !important; }*/
/*a.btn-whatsapp:hover {background-color: #0FA859 !important; border: 1px solid #0FA859 !important;}*/

a.btn-whatsapp {
    background-image: url(../img/whatsapp-white.svg);
    background-size: 34px 34px;
    background-position: 20px center;
    background-repeat: no-repeat;
    padding-left: 64px;
    line-height: 22px;
}

.btn-whatsapp-add-mrg {margin-bottom: 30px !important;}
.info-whats p {color: #CA5D6A; margin-bottom: 50px !important; font-size: 17px; font-style: italic; line-height: 20px;}

a.btn-login {background-color: #C2906F; border-radius: 30px; border: 1px solid #C2906F; color: #FFF;}
a.btn-login:hover {background-color: #C2906F; border: 1px solid #C2906F; text-decoration: none; color: #FFF;}

/*@media screen and (max-width: 1000px) {
    body {
        background: #FFF url(../img/bg-body-mobile.png) center top repeat-y;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}*/
 
/*************************
 2 - Header
**************************/
.container-header {background: #DBADB0 url(../img/header-resellers-1920-2.jpg) center center no-repeat; display: flex; height: 750px; position: relative;}
.container-header .btn-action {padding: 12px 28px; margin: 70px 0 0 0;}
.container-header .btn-login {margin: 10px 0 0 0;}
.container-header .bd-bottom {height: 12px; width: 100%; position: absolute; background-color: #FFF; opacity: 0.5; bottom: 0px;}

/*#nav-fixed {background-color: #a5733c; width: 100%; height: 58px; position: fixed; top: -100px; left: 0; z-index: 999; }
#nav-fixed .elastic {text-align: right;}
#nav-fixed a {color: #FFF; text-decoration: none; display: inline-block; margin: 20px 15px;}
#nav-fixed a.nav-sign-up {padding: 10px 20px; margin: 5px 20px 0; background-color: #fceede; color: #a5733c; border-radius: 30px; font-weight: 400;}
#nav-fixed .logo-nav-fixed {background: transparent url(../img/wings-white.svg) center center no-repeat; height: 40px; width: 80px; background-size: contain; position: absolute; left: 50px; top: 10px;}*/

#nav-fixed {background-color: #FFF; width: 100%; height: 58px; position: fixed; top: -100px; left: 0; z-index: 999; }
#nav-fixed .elastic {text-align: right;}
#nav-fixed a {color: #CA5D6A; text-decoration: none; display: inline-block; margin: 20px 15px;}
#nav-fixed a.nav-sign-up {padding: 10px 20px; margin: 5px 20px 0; background-color: #CA5D6A; color: #FFF; border-radius: 30px; font-weight: 400;}
#nav-fixed .logo-nav-fixed {background: transparent url(../img/wings-header-2.svg) center center no-repeat; height: 40px; width: 80px; background-size: contain; position: absolute; left: 50px; top: 10px;}
#nav-fixed-mobile-active {display: block; height: 100%; overflow-y: auto; top: 60px; text-align: center;}
#nav-fixed span {display: none;}

.nav-absolute {background: #E5ADB0 url(../img/bg-nav-absolute.png) center top no-repeat; width: 100%; height: 50px; position: absolute; z-index: 998;}
.nav-absolute .elastic {text-align: right;}
.nav-absolute a {color: #FFF; display: inline-block; font-size: 16px; margin:15px 20px; text-decoration: none;}

.nav-top-mobile {box-sizing: border-box; background-color: transparent; width: 100%; height: 60px; z-index: 999; display: none; position: fixed; top: 0; left: 0;}
.nav-top-mobile-active {background: rgba(255, 255, 255, 0.9) url(../img/wings-header-2.svg) center 5px no-repeat !important; background-size: 80px 50px !important;}
.nav-top-mobile .btn-nav {width: 50px; height: 40px; background: transparent url(../img/nav-btn-3.svg) center center no-repeat; cursor: pointer; position: absolute; right: 10px; top: 10px;}

.logo {background: transparent url(../img/logo-divinanoite-original-2.svg) center center no-repeat; height: 100px; width: 230px; left:  30px; top: 180px; position: absolute;}
.box-info-buttons {height: 300px; width: 300px; position: absolute; left: 30px; top: 350px; text-align: left;}
.box-info-buttons span {color: #CA5D6A; font-size: 22px; font-weight: 600;}
.info-header {display: none;}

.box-welcome {margin: 120px 0; text-align: center; display: block;}
.msg-welcome {color: #CA5D6A; font-style: italic; font-size: 26px; display: inline-block; max-width: 800px; line-height: 30px; padding: 0 20px;}
.msg-welcome img {margin: 0 10px;}

@media screen and (max-width: 1700px) {
    .container-header {background: #fffaef url(../img/header-resellers-1700-2.jpg) center center no-repeat; height: 750px;}
}

@media screen and (max-width: 1400px) {
    .container-header {background: #DBADB0 url(../img/header-resellers-1400-2.jpg) center center no-repeat; height: 650px; }
    .info-header {width: 260px; background-size: contain;}    
}

@media screen and (max-width: 1100px) {
    .container-header {background: #DBADB0 url(../img/header-resellers-1100-2.jpg) center center no-repeat;}
    .box-info-buttons span {margin-top: 20px; display: block;}
}

@media screen and (max-width: 1000px) {
    .container-header {border-top: none; background: #DBADB0 url(../img/header-resellers-1000-2.jpg) center center no-repeat;}
    .nav-absolute, #nav-fixed {display: none; height: 100%; top: 0px; overflow-y: auto;}
    .nav-top-mobile {display: block;}
    #nav-fixed .logo-nav-fixed {display: inline-block; position: relative; width: 80px; box-sizing: border-box; left: 0; margin: 0px auto 50px;}
    #nav-fixed .elastic {text-align: right; display: flex; flex-direction: column;}
    #nav-fixed a {text-align: center; font-weight: 500; font-size: 18px;}
    #nav-fixed span {display: inline-block; font-family: 'Lato',sans-serif; font-size: 24px; text-align: center; color: #CA5D6A;}
    #nav-fixed span.s-bold {font-weight: 600; margin: 10px 0 30px;} 
    .nav-sign-up {width: 150px; margin: 0 auto !important;}
    .logo {top: 100px;}
    .box-info-buttons {top: 330px;}
    .box-info-buttons span {margin-top: 0px;}
}

@media screen and (max-width: 650px) {
    .container-header {background: #DBADB0 url(../img/header-resellers-650-4.jpg) top left no-repeat; display: flex; height: 660px;}
    .box-welcome {margin: 60px 0;}
    .msg-welcome img {margin: 20px auto !important; display: block;}
    .logo {background: transparent url(../img/logo-divinanoite-original-rose.svg) center center no-repeat; left: auto; top: 50px; position: relative; margin: 0 auto;}
    .box-info-buttons {top: 180px; left: 20px;}
    .info-header {background: transparent url(../img/msg-header-2.svg) left top no-repeat; display: inline-block; height: 150px; width: 260px; margin-top: 50px; position: relative;}
    .container-header .btn-action {padding: 10px 20px; margin: 40px 0 0 0; width: 150px; text-align: center;}
    .container-header .btn-login {margin: 10px 0 0 0; width: 100px;}
}


/*************************
 3 - Section
**************************/
.container-advantages {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 40px 0 0;}
.container-advantages div {width: 200px; margin: 20px 10px;}
.container-advantages div span {margin: 10px 0; display: block; font-size: 20px; color: #000; font-weight: 400;}
.container-advantages div p {font-size: 14px; color: #000; line-height: 18px;}
.container-advantages div img {width: 100px;}

.container-work {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 20px auto 0; max-width: 1000px;}
.container-work div {width: 240px; margin: 20px 10px;}
.container-work div > span {background-color: #CA5D6A; /*#844d1c*/ font-size: 33px; font-weight: 400; padding: 17px; border-radius: 100px; color: #FFF; height: 55px; width: 55px; display: inline-block; box-sizing: border-box; margin: 0 0 10px 0;}
.container-work div > p {font-size: 15px; color: #111; line-height: 18px;}
.container-work div > p > span {font-weight: 600; font-size: 16px; display: block; margin: 0 0 5px 0;}

.rules {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 0;}
.rules > div {background-color: #FFF; /*#fff1ec*/ box-shadow: #FCE5F1 2px 2px 5px; border-radius: 4px; width: 500px; padding: 30px; box-sizing: border-box; margin: 0 40px 30px;}
.rules > div > span {color: #333; font-size: 16px; font-weight: 600; margin: 0 0 10px 0; display: block;}
.rules > div > p {color: #333; font-size: 14px;}

.container-testimonials {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 40px 0 80px; align-items: flex-start;}
.container-testimonials > div {background-color: #fff8e7; /*#fff1ec*/ box-shadow: #d6b28b 5px 5px 5px; border-radius: 10px; width: 340px; padding: 30px; box-sizing: border-box; margin: 0 10px 20px;}
.container-testimonials > div > p, .container-testimonials > div > span {color: #bc803f; font-style: italic; display: block;}
.container-testimonials > div > p {font-size: 16px; margin: 20px 0 20px; line-height: 20px;}
.container-testimonials > div > p > img {margin: 0 4px 0}
.container-testimonials > div > p > img:first-of-type {margin: 0 4px 2px}
.container-testimonials > div > span.name {font-size: 17px;font-weight: bold; text-align: right;}
.container-testimonials > div > span.info {font-size: 15px; text-align: right;}

.who {text-align: center;}
.who h2 {color: #333; font-size: 22px; font-style: italic; font-weight: bold; margin: 50px 0 10px;}
.who p {color: #333; font-size: 17px; max-width: 800px; margin: 0 auto 80px; font-style: italic; line-height: 20px;}

.container-photos {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 40px 0 60px; align-items: flex-start;}
.container-photos > div {background-color: #fff8e7; box-shadow: #d6b28b 5px 5px 5px; border-radius: 10px; height: 380px; width: 380px; padding: 30px; box-sizing: border-box; margin: 0 10px 20px;}
.container-photos > div.mg-top {margin-top: 30px;}

.container-video {background-color: #fff8e7; box-shadow: #d6b28b 5px 5px 5px; border-radius: 10px; height: auto; width: 90%; padding: 30px; box-sizing: border-box; margin: 20px auto 80px; max-width: 800px;}

.questions {margin: 0 0 60px 0;}
.questions h2 {font-weight: 400; margin: 0 0 20px 0;}
.questions .question {cursor: pointer; color: #CA5D6A; font-size: 17px; font-weight: 400; line-height: 20px; margin: 0 auto 10px; max-width: 800px;}
.questions .answer {color: #333; display: none; font-size: 16px; line-height: 20px; margin: 0 0 40px; max-width: 800px; margin: 0 auto 30px;}

.only-mobile {display: none !important;}

@media screen and (max-width: 1200px) {
    .container-photos > div.mg-top {margin-top: 0px;}
    .container-testimonials > div {width: 300px;}
    .container-testimonials > div > img {width: 100%; max-width: 282px;}
}

@media screen and (max-width: 650px) {
    .rules {margin: 30px auto;}
    
    .container-advantages div {width: 280px;}
    .container-advantages div span {font-size: 22px;}
    .container-advantages div p {font-size: 18px; line-height: 20px;}
    
    .container-work div {width: 280px;}
    .container-work div > p > span {font-size: 20px; margin: 0 0 10px 0;}
    .container-work div > p {font-size: 18px; line-height: 20px;}
    
    .container-video {width: 100%; padding: 10px;}
    .only-mobile {display: block !important;}
    
    .container-testimonials > div {width: 340px;}    
}

@media screen and (max-width: 500px) {
    .rules > div {margin: 0 0 30px;}
}


/*************************
 5 - Footer
**************************/
.container-footer {background-color: #CA5D6A; box-sizing: border-box; padding: 60px 0; text-align: center;}
.container-footer h2 {color: #FFF; margin: 0 0 20px 0;}
.container-footer p {color: #FFF; font-size: 20px; line-height: 24px;}
.container-footer p.credits {color: #FFF; font-size: 14px; line-height: 18px;}
.container-footer a.face {background: transparent url(../img/face-white.svg) center center no-repeat; height: 30px; width: 30px; display: inline-block; margin: 20px 2px 5px;}
.container-footer a.insta {background: transparent url(../img/insta-white.svg) center center no-repeat; height: 30px; width: 30px; display: inline-block; margin: 20px 2px 5px;}
.container-footer .wings {background: transparent url(../img/wings.svg) center center no-repeat; display: block; height: 40px; opacity: 0.5; margin: 0 0 20px; width: 100%;}
.container-footer span.phone, .container-footer span.whatsapp {font-size: 30px; font-weight: 400; color: #FFF; display: inline-block; margin: 25px 10px 10px; padding: 5px 0 5px 40px; height: 36px; box-sizing: border-box;}
.container-footer span.phone {background: transparent url(../img/phone-white.svg) center left no-repeat;}
.container-footer span.whatsapp {background: transparent url(../img/whatsapp-white.svg) left center no-repeat;}

@media screen and (max-width: 600px) {
    .container-footer span.phone {margin: 10px 0 0;}
    .container-footer span.whatsapp { margin: 15px 0 10px;}
}

/*************************
 6 - Forms
**************************/
button, .btn {background-color: #CA5D6A; color: #FFF; font-size: 17px; font-weight: 600; padding: 13px 15px; border-radius: 3px;}
button:hover, .btn:hover {background-color: #CA5D6A; color: #FFF !important;}
.btn {display: inline-block;}
.long-btn {width: 90%; max-width: 664px; display: block; margin: 0 auto; text-align: center;}
.big-btn {padding: 23px 25px; font-size: 20px;}

.btn-buy {background: #8c1c28 url(../img/icon-btn-buy.svg) 10px center no-repeat; padding-left: 45px;}

*:focus {outline: none;}

.container-form {background-color: #FFF; border: 1px solid #CA5D6A; margin: 80px auto 60px; max-width: 780px; border-radius: 10px;}
.container-form .title {background-color: #CA5D6A; display: block; padding: 30px 0 25px; text-align: center; width: 100%; box-sizing: border-box; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.container-form .content {padding: 30px 80px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: left;}
.container-form h2 {color: #FFF;}
.container-form input, .container-form select {border: 1px solid #FFB4BA; padding: 7px 10px; font-size: 16px; color: #333; background-color: #FFF !important; width: 100%; box-sizing: border-box; border-radius: 4px; margin: 5px 0;}
.container-form select {moz-appearance: none; -webkit-appearance: none; background: url(../img/icon-arrow-select.svg) no-repeat scroll right center transparent;}
.container-form input.phone-ddd {width: 20%; display: inline-block;}
.container-form input.phone-number {width: 50%; margin-left: 5px; display: inline-block;}
.container-form label {color: #CA5D6A; font-weight: bold; font-size: 15px; margin: 3px 0 0 0; display: block;}
.container-form div.two-columns {display: flex; flex-direction: row; justify-content: space-between;}
.container-form div.two-columns > div {width: 47%;}
.container-form .bar-btn {text-align: right; padding: 0px 80px 40px;}
.container-form button {background-color: #CA5D6A; border-radius: 30px; color: #FFF; font-size: 16px; font-weight: 400; padding: 10px 20px; border: none; font-family: 'Lato', sans-serif; cursor: pointer; display: inline-block; margin-left: 10px;}
.container-form #content-person {display: block;}
.container-form #content-address {display: none;}
.container-form #content-company {display: none;}
.container-form #content-success {display: none;}
.container-form .box-step {margin: 0px auto 10px; width: 100%; text-align: center;}
.container-form .box-step img {max-width: 470px;}

#content-success .box-success {background-color: #009245; padding: 40px 0px; margin: 30px auto; text-align: center; width: 100%; max-width: 400px; border-radius: 10px;}
#content-success .box-success > span {color: #FFF; font-size: 30px; font-weight: 400; margin: 0 0 20px 0;}
#content-success .box-success > p {color: #FFF; font-size: 18px; font-weight: 400; line-height: 22px; margin: 10px 0 0;}
.bt-sending {background-color: #009245 !important; cursor: default;}
.btn-access-store {margin: 10px 0; display: inline-block; background-color: #009245; padding: 10px 20px; border-radius: 30px; color: #fff; text-decoration: none;}

@media screen and (max-width: 600px) {
    .container-form .content {padding: 30px 30px 20px;}
    .container-form .bar-btn {padding: 0px 30px 40px;}
    .container-form h2 {font-size: 24px;}    
    .container-form div.two-columns {display: flex; flex-direction: column;}
    .container-form div.two-columns div {width: 100%;}
}