/* ---------------------------------------------------------------------- */
/*  Settings -> Variables
/* ---------------------------------------------------------------------- */


:root {

    /* Colors */

    --main-bg-color: #D7D2CB;
    --secondary-bg-color: rgba(214, 210, 203, .40);

    --main-font-color: #6F6872;
    --secondary-font-color: rgba(5, 5, 1, .66);
    --tertiary-font-color: #999;

    --error-color: #bf1a1a;
    --color-blue: #056E8E;

    /* Typography */

    --main-font-family: 'Montserrat', sans-serif;
    --secondary-font-family: 'KD', sans-serif;

    --base-font-size: 15px;
    --small-font-size: .8rem; /* 12px */
    --medium-font-size: 24px;
    --big-font-size: 30px; /* 48px */
    --bigger-font-size: 40px;


    /* Box Model */

    --spacer: 36px;
    --spacer-2x: 72px;
    --spacer-3x: 108px;
    --spacer-half: 18px;

}


@media all and (max-width: 768px) {

    :root {
        --base-font-size: 14px;
        --small-font-size: .8rem; /* 12px */
        --medium-font-size: 17px;
        --big-font-size: 20px; /* 48px */
        --bigger-font-size: 25px;

        --spacer: 20px;
        --spacer-2x: 40px;
        --spacer-3x: 40px;
        --spacer-half: 10px;


    }


    

}

@media all and (min-width: 768px) and (max-width: 1024px) {

    :root {
        --base-font-size: 15px;
        --small-font-size: .8rem; /* 12px */
        --medium-font-size: 20px;
        --big-font-size: 25px; /* 48px */
        --bigger-font-size: 30px;

        --spacer: 36px;
        --spacer-2x: 72px;
        --spacer-3x: 108px;
        --spacer-half: 18px;

    }


}




/* ---------------------------------------------------------------------- */
/*  Generic > Box Sizing
/* ---------------------------------------------------------------------- */

*, *:before, *:after {box-sizing: border-box;}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------- */
/*  Generic > Shared
/* ---------------------------------------------------------------------- */

html, body {font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: var(--main-font-color); line-height: 1.7; letter-spacing: 1px;   
    background-position-x: right;
    background-position-y: 140px;
    background-size: 22vw; text-align: justify;}
body {margin:0;}

hr {display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid var(--main-bg-color);}

a {color: var(--main-font-family); text-decoration: none; transition: .6s;}
a:hover {opacity: .8;}


h1 {font-family: var(--secondary-font-family); margin: 0 0 var(--spacer) 0;  font-size: var(--bigger-font-size); font-weight: 300; line-height: 1; }

h2 {font-family: var(--secondary-font-family); margin: 0;  font-size: var(--medium-font-size); text-transform: uppercase; font-weight: 300; line-height: 1.2}
h3 {margin: 10px 0 0 0;  font-size: 16px; text-transform: uppercase; font-weight: 300; line-height: 1; letter-spacing: 3px}
h4, h5, h6 {margin: 0; font-weight: 400; text-transform: uppercase;}
h3+h3 {margin-top: 7px;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000;
}
::-moz-placeholder { /* Firefox 19+ */
  font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000;
}

p a {text-decoration: underline;}
p:first-child {margin-top: 0;}
p:last-child {margin-bottom: 0;}

img {display: block; max-width: 100%;}
figure {margin: 0; padding: 0px}
ul {margin: 0; padding: 0; list-style: none;}

section, .wrapper {max-width: 80%; margin: 0px auto;}

section {margin-top: 160px;}

.light-bg {background: var(--secondary-bg-color);}

main {padding-top: 230px;}
.no-mobile {display: block;}
.mobile {display: none!important;}

@media all and (max-width: 768px) {
    body{background-image: none;}
   main {padding-top: 170px;}
   section, .wrapper {max-width: 90%; margin: 60px auto 0 auto;}
   .no-mobile {display: none!important;}
   .mobile {display: block!important;}

    
}

@media all and (min-width: 768px) and (max-width: 1024px) {
   
}



/* ---------------------------------------------------------------------- */
/*  Elements > Header
/* ---------------------------------------------------------------------- */

header {padding: var(--spacer);}
header .site-logo { width: 220px; margin: 0 auto; position: relative; z-index: 999}
header .site-logo img {width: 100%;}

header .langs {position: absolute; top: var(--spacer); left: var(--spacer); font-size: 14px}

@media all and (max-width: 768px) {
    header .site-logo {width: 170px}
    header {padding: var(--spacer)}
    header .langs {top:36px; font-size: 12px}

}


/* ---------------------------------------------------------------------- */
/*  Pages > Home
/* ---------------------------------------------------------------------- */

section.banner {position:relative; width: 100%; max-width: 100%; height: calc(100vh - 148px - 72px); margin: 0; display: flex; justify-content: center; align-items: center; background: #fff }

section.banner img {width: 80%; height: 100%; object-fit: cover; position: relative; z-index: 2}
section.banner .bg {background: var(--main-bg-color); position: absolute; height: 50%; width: 100%; bottom: 0; z-index: 1}

.text-block .text {width: 60%; max-width: 650px; margin-left: 160px;}


section.highlight {}
section.highlight .grid {display: flex; flex-wrap: wrap; max-width: 1300px; margin-left: 0}
section.highlight .grid .col {width: 40%;}
section.highlight .grid .col.desc {width: 60%}
section.highlight .grid .col.desc h3 {margin-top: var(--spacer-2x); margin-bottom: var(--spacer-half); margin-left: var(--spacer-3x)}
section.highlight .grid .col.desc h1  {margin-left: var(--spacer-3x)}

section.highlight .grid .col.desc .text {padding: var(--spacer-2x)  var(--spacer-2x) var(--spacer-2x) var(--spacer-3x)}

@media all and (max-width: 768px) {
   
    section.banner {height: 40vh;}
    section.banner img {width: 90%;}
    .text-block .text {width: 100%; margin-left: 0}
    section.highlight {width: 100%; max-width: 100%;}
    section.highlight .grid{max-width: 100%;} 
    section.highlight .grid .col, section.highlight .grid .col.desc {width: 100%;}
    .full-highlight h3 {margin-bottom: 20px; font-size: 14px}

}
@media all and (min-width: 768px) and (max-width: 1024px) {
section.banner {height: 400px;}
}


/* ---------------------------------------------------------------------- */
/*  Elements > Navigation
/* ---------------------------------------------------------------------- */

body.nav-is-open {overflow: hidden;}
.nav-main {z-index: 998; width: 100%; position: fixed; left: 0; top: 0; background-color: #fff; padding:100px 10vw 0 10vw; transform:translateX(100%); transition: transform .5s; height: 100vh;     display: flex; justify-content: flex-start; align-items: center;  }
body.nav-is-open .nav-main {transform:translateX(0%);}

header {position: absolute; top: 0; left: 0; width: 100%; z-index: 999;}

body.nav-is-open header {position: fixed; z-index: 999}

.nav-main .wrapper { position: relative;}
.nav-main ul {min-width: 50%}

.nav-main ul a {font-size: var(--bigger-font-size); color: var(--main-font-color); text-transform: none; font-family: var(--secondary-font-family)}
.nav-main ul li {}



.nav-main .sub {padding-left: var(--spacer-2x); font-size: 14px;}
.nav-main .sub a {color: var(--main-font-color); text-decoration: none;}
.nav-main .ami {position: absolute; bottom: var(--spacer); font-size: 12px;}

.hamburger {width: 50px; height: 50px; padding: 10px; position: fixed; top: 72px; right: 72px; z-index: 9999}
.hamburger:focus {outline: 0;}
.hamburger-box {width: 30px; height: 26px;}
.hamburger-inner {margin-top: -1px;}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {width: 30px; height: 1px; background-color: #var(--main-font-color);}
.hamburger-inner::before {top: -6px;}
.hamburger-inner::after {bottom: -6px;}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {background-color: var(--main-font-color)}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {background-color: var(--main-font-color)}

.menu {
    position: fixed;
    top: 120px;
    right: 86px;
    writing-mode: tb;
    font-size: 12px;
    letter-spacing: 2px;
    z-index: 999
}

@media all and (max-width: 768px) {
    .hamburger {top:var(--spacer); right: var(--spacer);}
    .nav-main  {padding-top:100px; min-height: 100vh; overflow: auto; padding-left: 40px; flex-flow: column; align-items: flex-start; }
    .nav-main ul a {font-size: var(--big-font-size);}
    .nav-main ul li ul a {font-size: 14px,;}

    .nav-main ul:first-of-type {columns: 1; border-right: 0 none; margin: 80px 0 20px 0}
    .nav-main ul.social {position: static; margin: var(--spacer) 0 40px }
    .nav-main img.lw {max-width: 90%;}
    .nav-main ul li ul a {font-size: 14px;}
    .nav-main .sub {padding-left: 0; font-size: 13px;}
    .menu {display: none;}
    .nav-main .ami {font-size: 11px; letter-spacing: 0}



}
@media all and (min-width: 768px) and (max-width: 1024px) {

    .nav-main  {padding: 150px 72px 0 72px}
    .nav-main ul li ul{display: block!important;}
    .nav-main ul a {font-size: var(--big-font-size)}
}


/* ---------------------------------------------------------------------- */
/*  Elements > page
/* ---------------------------------------------------------------------- */

.statement {padding: var(--spacer-2x); text-align: center; margin-top: 160px;}
.statement h1 {margin: 0 auto; max-width: 60%}

@media all and (max-width: 768px) {
    .statement {margin-top: 40px;}
    .statement h1 {max-width:80%}
}



/* ---------------------------------------------------------------------- */
/*  Elements > solutions
/* ---------------------------------------------------------------------- */

section .cols {columns: 2; column-gap: var(--spacer-2x)}
.full-highlight {width: 100%; max-width: 100%; }
.full-highlight h1 {margin-left: 10%;}
.full-highlight .grid {position: relative; width: 80%; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr}

.full-highlight .grid .col.desc { padding: var(--spacer-2x) var(--spacer-2x) var(--spacer-2x) 0}
.full-highlight .grid .col.photo { position: relative; top:-100px;}

.full-highlight:first-of-type {margin-top: var(--spacer-2x);}
.full-highlight:first-of-type .grid {grid-template-columns: 1fr 2fr}
.full-highlight:first-of-type .grid .col.desc { padding: var(--spacer-2x) }
.full-highlight:first-of-type  h1 {margin-left:calc((80vw / 3) + 10vw + 72px)}

.grid-2cols {display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--spacer-2x)}
.small-container {width: 60%;
    max-width: 650px;
    margin-left: 160px;}

@media all and (max-width: 768px) {
    section .cols {columns: 1}
    .full-highlight {position: relative; margin-top: 160px;}
    .full-highlight:first-of-type h1, .full-highlight h1 {margin-left: 0; position: relative;}

    .full-highlight:first-of-type {margin-top: 100px;}

    .full-highlight .grid, .full-highlight:first-of-type .grid {grid-template-columns: 1fr}
    .full-highlight .grid .col.desc, .full-highlight:first-of-type .grid .col.desc {padding: 0 0 var(--spacer)  0 }
    .full-highlight .grid .col.desc {position: relative; top: -72px}

    .full-highlight:last-of-type .grid .col.photo {}
    .small-container {width: 100%; max-width: 100; margin-left: 0}
    .grid-2cols {grid-template-columns: 1fr}

}
/* ---------------------------------------------------------------------- */
/*  Elements > portfolio
/* ---------------------------------------------------------------------- */

body.portfolio-page .full-highlight .grid {grid-template-columns: 1fr 2fr}
body.portfolio-page .full-highlight .grid .col.desc { padding: var(--spacer-2x) }
body.portfolio-page .full-highlight  h1 {margin-left:calc((80vw / 3) + 10vw + 72px)}

@media all and (max-width: 768px) {
    body.portfolio-page .full-highlight .grid {grid-template-columns: 1fr}
    body.portfolio-page .full-highlight .grid .col.desc {padding: 0}
    body.portfolio-page .full-highlight  h1 {margin-left:0}


}

/* ---------------------------------------------------------------------- */
/*  Elements > register
/* ---------------------------------------------------------------------- */
.register .grid {display: flex; align-items: unset;}
.register .grid .form-contain {flex: 0 0 60%; background-color: #FAFAFA; padding: var(--spacer-2x); position: relative; overflow: hidden; display: flex; }
.register .grid .totals {flex: 0 0 40%; background-color: #EFEFEF; padding: var(--spacer-2x)}

.register .form-contain .slide {transform: translateX(20%); position: relative; flex-shrink: 0; flex-basis: 100%; transition: all 1s}
.register .form-contain .slide.active {transform: translateX(0%);}
.register .info-grey {background-color: #f2f2f2; padding: var(--spacer-half); margin-bottom: var(--spacer); font-size: 13px}
.register .info-grey h4 {text-transform: none;}
.register a.cancel {margin-top: var(--spacer-half); text-decoration: underline; display: inline-block; font-size: 13px; opacity: 0.7 }


#step1.hidden {transform: translateX(-100%); opacity: 0; z-index: -1}
#step1.active {transform: translateX(0%); opacity: 1; z-index: 1}

#step2.hidden {transform: translateX(20%); opacity: 0; z-index: -1}
#step2.hidden2 {transform: translateX(-220%); opacity: 0; z-index: -1}
#step2.active {transform: translateX(-100%); opacity: 1; z-index: 1}


#step3cc.active {transform: translateX(-200%); opacity: 1; z-index: 1}
#step3cc.hidden2 {transform: translateX(-320%); opacity: 0; z-index: -1}

#step3.active {transform: translateX(-300%); opacity: 1; z-index: 1}
#step3.hidden2 {transform: translateX(-420%); opacity: 0; z-index: -1}

#step4.active {transform: translateX(-400%); opacity: 1}


.register form label {text-transform: uppercase; display: block!important; font-size: 11px;} 
.register form label.error {color: red; display: block!important;}
.register form input {border: 0px none; border-bottom: 1px solid #ddd; width: 100%; 
    background-color: transparent; margin-bottom: var(--spacer); padding: 8px 0px; outline: none;}
.register form .radio-group label {margin-bottom: 8px;}
.register form input[type="radio"], .register form input[type="checkbox"] {width: unset; margin-right: 4px;}
.register form input[type="radio"]:nth-of-type(2){margin-left: 10px;}

.register form button {border: 1px solid #ddd; padding: 12px 16px; font-size: 11px; text-transform: uppercase; font-weight: 300; letter-spacing: 1px; display: block;}

.register ul.breadcrumbs {display: flex; margin-bottom: var(--spacer)}
.register ul.breadcrumbs li  {font-size: 11px; text-transform: uppercase; opacity: 0.5}
.register ul.breadcrumbs li:after {content: '>'; padding: 6px;}
.register ul.breadcrumbs li:last-of-type:after {content: ''}
.register ul.breadcrumbs li.active {opacity: 1}


.register .totals .sub {border-bottom: 1px solid #ddd; padding-bottom: var(--spacer); margin-bottom: var(--spacer)}
.register .totals .sub .total {text-transform: uppercase; font-size:12px; margin-top: 20px;}
.register .totals .sub .total span {display: inline-block; }
.register .totals .sub .total span:first-of-type {width: 170px;}

.feedback.error {    background: #ecb2b2;
    padding: 10px;
    margin-bottom: 20px;}

.total_final {font-weight: 400}

.register .notes {font-size: 12px;}

select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0;  border: 1px solid transparent !important; border-bottom-color: #ddd!important; padding: 14px 0px 4px 0px; width: 100%; background-color: #fff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ny4xICg0NTQyMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+QXJyb3c8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkhlYWRlci0xNDQwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDY3LjAwMDAwMCwgLTkzLjAwMDAwMCkiIHN0cm9rZT0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iQXJyb3ciIHBvaW50cz0iNDY3IDk0IDQ3Mi4wMDMwNjEgOTcgNDc3IDk0Ij48L3BvbHlsaW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) 100% 50% no-repeat transparent; margin-bottom: var(--spacer); outline: none}

.info {font-size: 12px; margin-top: -10px; margin-bottom: 10px;}
.info.mt {margin-top: -30px; margin-bottom: 20px; font-size: 12px;}

a.back_step2{margin-top: 20px;
    display: inline-flex;
    cursor: pointer;
    text-transform: lowercase;
    font-size: 13px;
    color: #5b5b5b;
    border-bottom: 1px solid #5b5b5b;}


.login h2 {margin-bottom: 20px;}
.login form label {text-transform: uppercase; display: block!important; font-size: 11px;} 
.login form label.error {color: red; display: block!important;}
.login form input {border: 0px none; border-bottom: 1px solid #ddd; width: 100%; 
    background-color: transparent; margin-bottom: var(--spacer); padding: 8px 0px; outline: none;}
.login form button {border: 1px solid #ddd; padding: 12px 16px; font-size: 11px; text-transform: uppercase; font-weight: 300; letter-spacing: 1px; display: block;}

.errorFeedback, .subserrorFeedback {background: #eac1c1;
    padding: 10px;
    margin: 20px 0;}

 .recover-feedback {background: #f2f2f2;
    padding: 10px;
    margin: 20px 0; font-weight: bold;}

.subserrorFeedback a {text-decoration: underline;}

a.recover_password {
    margin-top: 30px;
    display: inline-flex;
    border-bottom: 1px solid #797979;
    font-size: 12px;
}

#forgot-form input.error, #resetpassword input.error {background: #e8a8a8}
#forgot-form label.error, #resetpassword label.error {display: none!important}

.clientsarea .form-contain {flex-flow: column;}
.clientsarea .form-contain h3 {margin-top: var(--spacer)}
.clientsarea .form-contain ul li {border-bottom: 1px solid #ddd; padding: 8px 0}

.paper_group {display: grid; grid-template-columns: auto 200px; grid-gap: 20px}
.paper_group .paper_date {padding: 6px 0}


@media all and (max-width: 768px) {

 .register .grid {display: block;}   
     .register .grid .totals {}
    .register .grid .form-contain {flex-basis: 100%;}
}


/* ---------------------------------------------------------------------- */
/*  Elements > Footer
/* ---------------------------------------------------------------------- */
footer {border-top: 1px solid var(--secondary-bg-color);  padding: var(--spacer) 0; width: 80%; margin: 160px auto 0 auto; display: flex; font-size: 13px;}

footer a {color: var(--main-font-color)}
footer ul:first-of-type {columns: 2; column-gap: var(--spacer)}
footer>* {margin-right: var(--spacer)}

@media all and (max-width: 768px) {
   
   footer {flex-flow: column; font-size: 12px; margin:40px auto 0 auto; width: 90%}
   footer ul:first-of-type {columns: 1}
   footer>* {margin-right: 0; width: 100%; margin-bottom: 20px}
   footer img {display: none;}


}
@media all and (min-width: 768px) and (max-width: 1024px) {
}