@font-face {
    font-family: 'Dosis';
    src: url('../fonts/Dosis-Regular.woff2') format('woff2'),
    url('../fonts/Dosis-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('../fonts/Dosis-Medium.woff2') format('woff2'),
    url('../fonts/Dosis-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('../fonts/Dosis-Bold.woff2') format('woff2'),
    url('../fonts/Dosis-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prata';
    src: url('../fonts/Prata-Regular.woff2') format('woff2'),
    url('../fonts/Prata-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
    url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
    url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Regular.woff2') format('woff2'),
    url('../fonts/Caveat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 10%;
    right: 50%;
    transform: translate(50%, -50%);
}
.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #000;
}
.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.form-loading {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    height: 100%;
    width: 100%;
    z-index: 30;
}

.bg-brand{background-color: #674230}
header{position: absolute;z-index: 20;width: 100%;font-size: 12px}
.btn{font-size: 14px !important;}
.btn-dark,.btn-dark:hover{background-color: #674230; border: none !important;}
.user-access-wrapper{display: none}
.user-logged-wrapper{display: none}
body.user-logged .user-logged-wrapper{display: block !important;}
body.user-not-logged .user-access-wrapper{display: block !important;}

.main-stripe-full{width: 100%;height: calc(100vh + 2px); position: relative;z-index: 3; min-height: 660px;overflow: hidden}
.main-stripe-full div{background-size: cover;background-position: center}
.bg-animated{position: absolute;top: 0px; left: 0px; width: 100%; z-index: -1;overflow: hidden}

.hero-logo{transition: all 0.5s !important;width: 220px; height:220px;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7)}
#frame-region-hero{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 0; width: 1500px}
@media(min-width: 400px) and (min-height: 760px){
    .logo-frame img{width: 200px;height: 200px}
}

@media(min-width: 640px) and (min-height: 800px){
    .logo-frame img{width: 240px;height: 240px}
}
@media(min-width: 900px){
    .hero-logo{width: 300px; height:300px}
    #frame-region-hero{width: 2200px}
}
.claim{animation-fill-mode: backwards;animation-duration: 1s;animation-iteration-count: unset;transition: all 0.5s;animation-name:fade-in; animation-delay: 1.5s}
.bg-animated>div{
    position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;min-height: 660px;background-repeat: no-repeat;background-position: center;
    background-size: cover !important;animation-fill-mode: backwards;animation-duration: 15s;animation-iteration-count: infinite;transition: all 0.5s; }
.bg-animated>div:first-child{animation-name: anim-zoom-1;z-index: 1}
.bg-animated>div:last-child{animation-name: anim-zoom-2;z-index: 2}
@keyframes fade-in {
    0% { transform: translateY(300px);opacity: 0 }
    100%{opacity: 1;transform: translateY(0px);}

}
@keyframes anim-zoom-1 {
    0% { scale: 1;opacity: 1 }
    50%{ scale: 1.2;opacity: 1}
    100%{opacity: 0}

}
@keyframes anim-zoom-2 {
    0% { scale: 1; opacity: 0}
    50%{ scale: 1; opacity: 0}
    51%{ scale: 1; opacity: 1}
    100% { scale: 1.2;opacity: 1; }
}
/*.bg-animated::after{content: "";
    position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;min-height: 660px;background: url(../img/regions/slide_01.webp) no-repeat center;
    background-size: cover !important;animation-fill-mode: backwards;animation-duration: 15s;animation-name: anim-zoom;animation-iteration-count: infinite;transition: all 0.5s}

@keyframes anim-zoom {
    0%,100% { scale: 1;background: url(../img/regions/slide_01.webp) no-repeat center; }
    45% { scale: 1.2;background: url(../img/regions/slide_01.webp) no-repeat center;}
    50%{ scale: 1.2;background: url(../img/regions/slide_01.webp) no-repeat center;}
    53% { scale: 1;background: url(../img/regions/slide_02.webp) no-repeat center;}
    97% { scale: 1.2;background: url(../img/regions/slide_02.webp) no-repeat center;}

}*/

/*.bg-animated::before{min-height: 660px;content: "";position: absolute;z-index: 3;width: 100%; height: 100vw;background-color: rgba(103, 66, 48, .6);clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 35%, 65% 35%, 65% 65%, 35% 65%, 35% 100%, 100% 100%, 100% 0%);transform: translateY(-50%); top: 50%}

@media (max-aspect-ratio: 1/1) {
    .bg-animated::before{width: 100vh; height: 100vh;left: 50%;transform: translateX(-50%) translateY(0); top: 0px;clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)}
}
@media (min-aspect-ratio: 1/1) and (min-width: 840px) and (max-width: 1200px) {
    .bg-animated::before{clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 30% 30%, 70% 30%, 70% 70%, 30% 70%, 30% 100%, 100% 100%, 100% 0%)}

}
@media (min-aspect-ratio: 1/1) and (min-width: 1201px) and (max-width: 1520px) {
    .bg-animated::before{clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 35%, 65% 35%, 65% 65%, 35% 65%, 35% 100%, 100% 100%, 100% 0%)}

}
@media (min-aspect-ratio: 1/1) and (min-width: 1521px) and (max-width: 1720px) {
    .bg-animated::before{clip-path: polygon(0% 0%, 0% 100%, 37% 100%, 37% 37%, 63% 37%, 63% 63%, 37% 63%, 37% 100%, 100% 100%, 100% 0%)}

}
@media (min-aspect-ratio: 1/1) and (min-width: 1721px) and (max-width: 1920px) {
    .bg-animated::before{clip-path: polygon(0% 0%, 0% 100%, 40% 100%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 100%, 100% 100%, 100% 0%)}

}
@media (min-aspect-ratio: 1/1) and (min-width: 2320px)  {
    .bg-animated::before{clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 35%, 65% 35%, 65% 65%, 35% 65%, 35% 100%, 100% 100%, 100% 0%)}

}*/
html,body{font-family: 'Montserrat';  line-height: calc(22px + 1vw);font-size:  calc(14px + 1vw);}

h1,.h1{font-family: 'Dosis'; font-weight: normal; font-size: calc(2.2rem + 3vw)}
span.h1{font-size: calc(1.2rem + 3vw) }
h2,.h2{font-family: 'Prata';font-size: calc(1.2rem + 2vw);font-weight: normal}
@media (min-width: 764px) {
    html,body{
        line-height: calc(16px + 1vw);
        font-size: calc(10px + 0.5vw);
    }

}

@media (min-width: 1120px) {
    html,body{
        line-height: calc(18px + 1vw);
        font-size: calc(12px + 0.5vw);
    }
    h1,.h1{ font-size: 3.4rem}
    span.h1{font-size: 1.8rem}
    h2,.h2{font-size: 1.4rem}

}
@media (min-width: 1480px) {
    html,body{font-size: 24px; line-height:38px }
    h1,.h1{ font-size: 3.8rem}
    span.h1{font-size: 2.6rem}
    h2,.h2{font-size: 2rem}
}
@media (min-width: 1300px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
    }
}
@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1340px;
    }
}


.color-y{color: #FFC550}
.bg-y{background-color:#F3C66A }
.color-b{color: #674230}
.stripe{padding: 120px 0px}
a,a:hover{color: #674230}
.square-num{width: 240px; height: 240px; border: 10px solid #835D4B; margin: auto; position: relative}
.square-num > div{position: absolute; width: 100%; top: 50%; transform: translateY(-50%) }
.square-num .num{font-family: 'Prata';font-size: 3rem}
.square-num .label{font-family: 'Caveat';font-size: 2rem}


.square-title{background-color: #FFC550; color:#674230; font-family: Dosis; font-size: 1.8rem; width: 100%;  line-height: 2.2rem; font-weight: 500;width: 240px; height: 240px; position: relative; margin-top: -120px }
.square-title > div{position: absolute;width: 100%;bottom: 0px;padding: 20px}
.region-flag{width: 280px; margin-bottom: -120px}

@media(min-width: 1260px){
    .side-img{max-width: calc(100% + 12%);width: calc(100% + 12%);}
}
.square-bg-b{position: absolute;width: 170px; height: 170px;border: 55px solid #F6F0EB;  top: 0px;left: 15px}
.square-bg-y{position: absolute;width: 170px; height: 170px;  top: 0px;left: 15px; border: 55px solid #f7d797}
.z-1{z-index: 1}
.z-2{z-index: 2}
.bg-product{ background-size: cover;background-position: center; background-repeat: no-repeat; min-height: 500px}

.claim{font-family: Dosis;font-size: 0.9rem; position: absolute; bottom: 20px;width: 100%; margin-left: -15px}
@media(min-width: 992px){
    .ml-lg-n6{margin-left: -4rem !important;}
    .square-title{width: 340px; height: 340px; }
    .stripe{padding: 180px 0px}
    .square-title{margin-top: -180px}
    .region-flag{margin-bottom: -180px}
    .bg-product{min-height: 650px}


}
@media (min-width: 1280px) {
    .region-flag{width: 380px; position: absolute;bottom: 0px; right: 5%; margin-bottom: 0px}
    .bg-product{min-height: 700px}
}
@media (min-width: 1680px) {
    .region-flag{right: 10%;width: 480px;}
    .bg-product{min-height: 750px}
}
footer{font-size: 14px; line-height: 24px}
footer a{color: #212529 !important;}

/*.region-flag{position: absolute; bottom: 0px; right: 30px; width: 450px}*/
.modal,.form-control{font-size: 14px !important;line-height: 20px}


.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}
.from-left{
    position: relative;
    transform: translateX(-100%);
    opacity: 0;
    transition: 1.5s all ease;
}
.from-right{
    position: relative;
    transform: translateX(100%);
    opacity: 0;
    transition: 1.5s all ease;
}
.from-left.active,.from-right.active{
    transform: translateX(0);
    opacity: 1;
}
.reveal.active{
    transform: translateY(0);
    opacity: 1;
}

.toast{z-index: 20}


#welcome-popup{width: 100%; height: 100%; padding: 0px !important; color: #fff; overflow: hidden}
#welcome-popup .region-select{background-color: #FFC658; color: #674230 }
#welcome-popup .modal-dialog{margin: 0px; height: 100%; width: 100% !important;max-width: 100% !important;}
#welcome-popup #select-region-box{height: 100%}
#welcome-popup .modal-content{border-radius: 0px; height: 100%; background-color: rgb(103, 66, 48, 0.9)}
#welcome-popup .modal-header{position: absolute; width: 30px;height: 30px; z-index: 2; right: 0px; padding: 0px; text-align: center; border-bottom: none !important;}
#welcome-popup .modal-body{padding: 0px; height: 100%}
#welcome-popup .modal-header button.close{padding: 0px; margin: auto; color: #fff}
#welcome-popup .login-stripe{height: 20%;background-color:#FFC658; color: #674230;font-family: Montserrat; padding-top: 2vh; -webkit-border-bottom-right-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -moz-border-radius-bottomright: 16px;
    -moz-border-radius-bottomleft: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px; }
#welcome-popup #login-box{height: 100%}
#welcome-popup .current-region-stripe{height: 60%; padding: 15px 0px}
body.user-logged #welcome-popup .current-region-stripe{height: 80%}
.s-logged{display: none}
.no-logged{display: block}
body.user-logged .s-logged{display: block}
body.user-logged .no-logged{display: none}
#welcome-popup .region-select{height: 20%; border-top-right-radius:16px; border-top-left-radius: 16px; padding-top: 15px; padding-bottom: 15px }
#welcome-popup .login-stripe .btn{color: #FFC658; text-transform: uppercase}
.btn{border-radius: 0px !important;}
.btn-y{background-color: #FFC658; color: #674230 }
.logo-frame{background-color: rgb(169, 111, 62,0.2); padding: 25px; margin: auto; display: inline-block}
.fs-12{font-size: 1.2rem; line-height: 1.4rem}
#login-box .modal-body > .row{height: 100%}
#welcome-popup .row{margin: 0px !important;}
.line{position: relative;display: inline-block;width: 20%; height: 10px}
.line:after{content: "";width: 100%;height: 1px;background-color:#674230; position: absolute;left: 0px; top: 50%; transform: translateY(-50%) }

@media(max-width: 360px) and  (max-height: 760px){
    #welcome-popup{overflow: auto}
    #welcome-popup .modal-dialog{min-height: 760px}
}

@media(min-width: 992px) and  (min-aspect-ratio: 1/1){
    #welcome-popup{width: 800px; height: 100vh; padding: 0px !important; color: #fff; left: 50%;transform: translateX(-50%)}
}


@media(min-width: 992px) and  (min-aspect-ratio: 1/1) and (min-height: 750px){
    #welcome-popup{height: 800px;top: 50%; transform: translate(-50%, -50%)}
}

#region-invitation-toast{bottom: 0px !important;margin: 0px; text-align: center; color: #fff; position: fixed !important;border: 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; display: none}
#region-invitation-toast .toast-header{background-color:#674230; border-bottom: 0px ; display: block}
#region-invitation-toast  button{color: #fff; float: right;display: block}
@media (max-width: 991px) {
    #region-invitation-toast{right: 0px !important; width: 100% !important;max-width: 100%;}

}