@charset "utf-8";
/* CSS Document */

/*reset*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:0;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; background:#ffffff; font-family:'Alata', sans-serif; font-size:1.6rem; line-height:1.628571; color:#4b4b4b; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/*text*/
h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2; font-weight:normal; font-family:'Alata', serif; text-align:center;}
h1{font-size:2.8rem; margin-bottom:48px; color:#068972;}
h2{font-size:2.4rem; margin-bottom:32px; color:#068972;}
h3{font-size:2.2rem; margin-bottom:16px; color:#068972;}
h1.nomargin, h2.nomargin, h3.nomargin{margin:0px;}
p{margin:0px 0px 32px 0px;}
a, a *{color:#068972; text-decoration:none;}
small{font-size:1.2rem;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
article p:last-of-type{margin:0px;}
article a{text-decoration:underline;}

/*floats*/
.left{float:left;}
.right{float:right;}

/*youtube*/
.video-container{position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position:absolute; top:0; left:0; width:100%; height:100%;}

/*buttons*/
.button{min-width:200px; height:40px; line-height:40px; display:inline-block; padding:0px 16px; text-align:center; font-size:1.4rem; border-radius:8px; text-transform:uppercase; text-decoration:none !important; color:#ffffff;}  
.button.green{background:#068972;}
.button.green:hover{background:#ae8b31;} 
.button.gold{background:rgb(186,154,64); background:linear-gradient(90deg, rgba(186,154,64,1) 0%, rgba(224,203,112,1) 100%);}
.button.white{background:#ffffff; color:#068972;}

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto;}
.container{max-width:1260px; margin:0px auto; padding:0px 24px; position:relative;}
section{padding:64px 0px;}


/*forms*/
.form-grid{display:grid; grid-template-columns:200px auto; gap:16px; width:80%; margin:0px auto;}
.form-grid .wide{grid-column-end:span 2;}
.form-grid h2{margin-top:35px; margin-bottom:0px; font-size:2.4rem;}
.form-grid h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
.form-grid h2.nomargin,
.form-grid h3.nomargin{margin-top:0px !important;}
.form-grid div{padding:8px 0px;}
.form-grid div.row{border-bottom:1px dotted #eae9e9;}
.form-grid div.noborder{border-bottom:none !important;}
.form-grid div.label{color:#2a2620; font-size:1.4rem;}
.form-grid div.label.white{color:#ffffff; font-size:1.4rem;}
.form-grid div.row label{font-size:1.4rem;}
.form-grid div.row label.red{color:#e2001a;}
.form-grid div span{display:block; height:32px; line-height:32px; color:#a3a3a3; font-size:1.2rem;}

/*input*/
.form-grid div input[type="text"],
.form-grid div input[type="number"],
.form-grid div input[type="date"],
.form-grid div input[type="time"],
.form-grid div input[type="datetime-local"]{width:100%; height:24px; line-height:24px; padding:16px; font-family:'Rubik', sans-serif; border-radius:8px; border:1px solid #eae9e9;}
.form-grid div select{width:100%; height:24px; line-height:24px; font-size:1.4rem; padding:16px; border-radius:8px; border:1px solid #eae9e9; font-family:'Ubuntu', sans-serif; color:#555555;}
.form-grid div select{height:unset; line-height:unset; padding:8px 16px;}
.form-grid div select option{color:#555555;}
.form-grid div input[type="text"].red,
.form-grid div input[type="number"].red,
.form-grid div input[type="date"].red,
.form-grid div input[type="time"].red,
.form-grid div input[type="datetime-local"].red{border:1px solid #e2001a;}
.form-grid div select.red{border:1px solid #e3051b;}
.form-grid div input[type="text"]:focus,
.form-grid div input[type="number"]:focus,
.form-grid div input[type="date"]:focus,
.form-grid div input[type="time"]:focus,
.form-grid div input[type="datetime-local"]:focus{border:1px solid #2a2620;}
.form-grid div select:focus{border:1px solid #303030;}
.form-grid div textarea{width:100%; height:300px; line-height:24px; padding:16px; border-radius:8px; border:1px solid #eae9e9; font-family:'Rubik', sans-serif;} 
.form-grid div textarea:focus{border:1px solid #303030;}

/*buttons*/
.form-grid div.submit{display:grid; grid-template-columns:1fr 1fr;}
.form-grid div.submit .button-left input[type=button],
.form-grid div.submit .button-left input[type=submit]{border:0px; font-family:'Rubik', sans-serif; color:#555555; background-color:#eae9e9; font-size:1.6rem; border-radius:8px; text-decoration:none; float:left; cursor:pointer;}
.form-grid div.submit .button-right input[type=button],
.form-grid div.submit .button-right input[type=submit]{border:0px; font-family:'Rubik', sans-serif; font-size:1.6rem; border-radius:8px; text-decoration:none; float:right; cursor:pointer;}
.form-grid div.submit .button-right input[type=submit].grey{color:#f1f1f1; background-color:#444444;}

/*select*/
.form-grid .input-wrapper-select{position:relative; border: #eae9e9 1px solid; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE; box-shadow: inset 0px 0px 10px 1px #FEFEFE;  display:block; margin:0px 0px 45px 0px; padding:0px 1%;}
.form-grid .input-wrapper-select.red{border:#FF0000 3px solid;}
.form-grid .input-wrapper-select .headlabel{position:absolute; top:-25px; opacity:1; left:0; font-size:11px; color:#777376; padding:0px 1%; transition:all 0.1s linear; font-weight:bold;}
.form-grid .input-wrapper-select .selectDefault,
.form-grid .input-wrapper-select .selectDefault2 { padding-left:8px; font-size:15px; font-size:1.5rem; }
.form-grid .input-wrapper-select select { opacity:.65; filter:alpha(opacity=0); position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:101; border:none; padding-left:12px; }
.form-grid .input-wrapper-select select:focus { outline: none; }

/*header*/
header{width:100%; max-width:1920px; height:96px; position:fixed; top:0px; z-index:1000; background:#ffffff; -webkit-box-shadow:0px 8px 16px 0px rgba(75,75,75,0.4); box-shadow:0px 8px 16px 0px rgba(75,75,75,0.4);}
header.scroll{background:rgba(255,255,255,0.8);}
header .grid{display:grid; grid-template-columns:334px auto; grid-gap:24px;}
header .logo{padding:16px 0px;}
header .logo a{height:inherit; display:block;}
header .logo a img{max-width:100%; height:64px;}
header nav{}
header nav ul{display:flex; justify-content:right;}
header nav ul li a{height:96px; display:block; line-height:96px; color:#162631; margin:0px 16px; text-transform:uppercase; transition:0.6s; }
header nav ul li a:hover,
header nav ul li a.on{color:#ae8b2e; border-bottom:4px solid #ae8b2e;}
header nav ul li:last-of-type a{margin-right:0px;}
header .menu{display:none;}

/*sections*/
section.slider{padding:0px;}
section.slider .slide{height:90vh; position:relative;}
section.slider .slide .clip{width:100%; height:100%; position:absolute; top:0; left:0; z-index:800; pointer-events:none; background:url('../images/slider-clip.webp') no-repeat center bottom / cover;}
section.slider .slide .gradient{width:100%; height:100%; position:absolute; top:0; left:0; z-index:700; pointer-events:none; background:linear-gradient(90deg, rgba(6,137,114,1) 0%, rgba(6,137,114,0) 41%);}
section.slider .slide .hero{width:100%; height:100%; position:absolute; top:0; left:0; z-index:600;}
section.slider .slide .hero .spot{width:100%; height:100%; display:block;}
section.slider .slide .hero .spot img{width:100%; height:100%; object-fit:cover;}
section.slider .slide .payoff{width:100%; height:100%; position:absolute; top:0; left:0; z-index:900;}
section.slider .slide .payoff h1{padding-top:176px; font-size:4.8rem; color:#ffffff; text-align:left; text-shadow:-1px -1px 1px rgb(255 255 255 / 10%), 1px 1px 1px rgb(0 0 0 / 50%);}
section.slider .slide .payoff h2{width:60%; font-size:2.4rem; color:#ffffff; text-align:left; text-shadow:-1px -1px 1px rgb(255 255 255 / 10%), 1px 1px 1px rgb(0 0 0 / 50%);}
section.slider .slide .bar{width:100%; height:96px; display:block; position:absolute; bottom:32px; left:0; z-index:950;}
section.slider .slide .bar .grid{width:100%; height:96px; display:grid; grid-template-columns:auto 2px auto 2px auto 2px auto; grid-gap:16px; border-radius:16px; padding:16px 24px; background:#ffffff; -webkit-box-shadow:4px 4px 15px 4px rgba(75,75,75,0.4); box-shadow: 4px 4px 15px 4px rgba(75,75,75,0.4);}
section.slider .slide .bar .grid .line{background:#efe8d6;}
section.slider .slide .bar .grid .contact{display:grid; grid-template-columns:min-content auto; grid-gap:24px;}
section.slider .slide .bar .grid .contact i{color:#ae8b31; font-size:3.6rem; line-height:64px;}
section.slider .slide .bar .grid .contact span{font-size:1.2rem; color:#068972; line-height:28px;}
section.slider .slide .bar .grid .contact span a{font-size:1.6rem; color:#4b4b4b;}
section.slider .slide .bar .grid .button a{margin-top:12px;}
section.slider.smaller .slide{height:60vh;}
section.slider.smaller .slide .payoff h1{padding-top:176px; font-size:3.6rem;}

section.content .breadcrumb{width:100%; height:32px; display:block; margin-bottom:32px;}
section.content .breadcrumb ol{width:100%; list-style:none; display:block; display:flex; justify-content:center;}
section.content .breadcrumb ol li{float:left; color:#e0cb70; margin-right:10px;}
section.content .breadcrumb ol li:last-child{margin-right:0px;}
section.content .breadcrumb ol li a{width:auto; text-decoration:none; font-weight:600; margin-right:10px;}
section.content .breadcrumb ol li:last-child a{margin-right:0px;}
section.content .breadcrumb ol li a span{color:#e0cb70; font-size:1.4rem; font-weight:600; text-decoration:none; }  
section.content .breadcrumb ol li:last-child a span{color:#ae8b31; font-weight:600;}
section.content .breadcrumb ol li i{margin-top:3px; font-size:12px; font-size:1.2rem;}
section.content article{width:80%; margin:0px auto; display:block;}

section.products{overflow:visible;}
section.products .about{width:45%; height:416px; display:block; background:#068972; padding:48px; border-radius:64px 16px 16px 16px; float:left;}
section.products .about h2{color:#ffffff; text-align:left; width:80%;}
section.products .about h4{color:#e0cb70; text-align:left; width:80%;}
section.products .cards{width:60%; height:auto; overflow:visible; display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; padding-bottom:16px; float:right; margin-top:-352px;}
section.products .cards .subpage{background:#ffffff; text-decoration:none !important; border-radius:12px; -webkit-box-shadow:2px 2px 6px 0px rgba(180,180,180,0.8); box-shadow:2px 2px 6px 0px rgba(180,180,180,0.8);}
section.products .cards .subpage .image{padding-top:56.25%; border-radius:12px 12px 0px 0px;}
section.products .cards .subpage .info{padding:16px;}
section.products .cards .subpage .info h3{font-size:1.6rem; text-align:left; min-height:64px;}
section.products .cards .subpage .info i{font-size:1.8rem; float:right; color:#ba9a40; margin-bottom:16px;}

section.reviews{position: relative;}
section.reviews .grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
section.reviews .grid .review{background:#068972; border-radius:64px 16px 16px 16px;  position:relative; z-index:100;}
section.reviews .grid .review:nth-of-type(2n+0),
section.reviews .grid .review:nth-of-type(3n+0){background:#e0cb70; border-radius:16px;}
section.reviews .grid .review:nth-of-type(4n+0){background:#068972;}
section.reviews .grid .review:nth-of-type(2){border-radius:16px 64px 16px 16px; }
section.reviews .grid .review:last-of-type{border-radius:16px 16px 16px 64px; }
section.reviews .grid article{grid-column-end:span 2;}
section.reviews .grid .review article{padding:48px; color:white;}
section.reviews .grid .review article *{margin-bottom:12px;}
section.reviews .grid .review .button{position:absolute; bottom:16px; left:48px;}
section.reviews .grid .review .quote{font-style:italic;}
section.reviews .grid .review .author{font-size:1.2rem; font-style:italic; color:white; margin-bottom:24px;}
section.reviews .grid .review .client{color:#e0cb70; font-weight:normal;}
section.reviews .grid .review:nth-of-type(even) .client{color:#068972}

section.subpages{}
section.subpages .about{width:45%; height:416px; display:block; background:#068972; float:left;}
section.subpages .about img{width:100%; height:100%; object-fit:cover; border-radius:64px 16px 16px 16px;}
section.subpages .gold{width:60%; height:auto; overflow:visible; background:#ae8b31; float:right; margin-top:-352px; border-radius:16px 64px 64px 64px; padding:48px;}
section.subpages .gold h2{color:#ffffff; font-size:2.8rem; text-align:left;}
section.subpages .gold p{color:#ffffff;}
section.subpages .gold p *{color:#ffffff;}

section.references{}
section.references .container{display:grid; grid-template-columns:32px auto 32px; grid-gap:24px;}
section.references .container h2{grid-column-end:span 3;}
section.references .container .quote p,
section.references .container .quote span{width:80%; margin:0px auto; text-align:center;}
section.references .container .quote span{display:block; margin-top:24px; color:#ae8b31; font-size:1.6rem;}
section.references .container .fade{-webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}
@-webkit-keyframes fade{from {opacity: .4} to {opacity: 1}}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
section.references .container a{width:32px; height:32px; background:#e0cb70; border-radius:16px; line-height:32px; color:#ffffff; text-align:center; cursor:pointer;}
section.references .container a:hover{background:#ae8b31;}

footer{background:#ae8a2e;}
footer .white{width:100%; height:64px; display:block; position:absolute; top:0; left:0; background:#ffffff;}
footer .container{min-height:300px; background:url('../images/footer.webp') no-repeat center top / cover; padding-top:64px;}
footer .container .grid{display:grid; grid-template-columns:334px auto auto auto 32px; gap:24px; padding:0px 32px;}
footer .container .grid .logo{grid-column-end:span 5; margin-bottom:12px;}
footer .container .grid .logo a{height:inherit; display:block;}
footer .container .grid .logo a img{max-width:100%; height:64px;}
footer .container .grid .content{font-size:1.4rem; color:#ffffff;}
footer .container .grid .content span{display:block; font-size:1.2rem; color:rgba(255,255,255,0.6);}
footer .container .grid .content a{font-size:1.4rem; color:#ffffff;}
footer .container .grid .social ul li{margin-bottom:12px;}
footer .container .grid .social ul li a i{color:#ffffff; font-size:2.0rem;}
footer .container .grid .copyright{grid-column-end:span 5; display:grid; grid-template-columns:1fr; border-top:2px solid rgba(255,255,255,0.6); padding:8px 0px;}
footer .container .grid .copyright br{display:none;}
footer .container .grid .copyright div{text-align:center;}
footer .container .grid .copyright div,
footer .container .grid .copyright div a{font-size:1.2rem; color:rgba(255,255,255,0.8);}
footer .container .grid .copyright div a{margin-left:12px;}

/*laptop*/
@media only screen and (max-width:1024px) 
{  
    body{font-size:1.4rem;}
    
    header{height:72px;}
    header .grid{grid-template-columns:250px auto;}
    header .logo{padding:12px 0px;}
    header .logo a{height:inherit; display:block;}
    header .logo a img{max-width:100%; height:48px;}
    header nav ul li a{height:72px; line-height:72px;}

    section.slider .slide .clip{background:url('../images/slider-clip.webp') no-repeat right bottom / cover;}
    section.slider .slide .payoff h1{padding-top:136px; font-size:4.0rem; margin-bottom:32px;}
    section.slider .slide .payoff h2{width:60%; font-size:2.0rem;}
    section.slider .slide .bar .grid{padding:16px;}
    section.slider .slide .bar .grid .contact{grid-gap:16px;}
    section.slider .slide .bar .grid .contact span a{font-size:1.4rem;}

}

/*tablet*/
@media only screen and (max-width:768px) 
{
    body{font-size:1.4rem;}
    h1{font-size:2.0rem; margin-bottom:32px;}
    h2{font-size:1.8rem; margin-bottom:24px;}
    h3{font-size:1.4rem; margin-bottom:16px;}

    header{overflow:visible;}
    header .menu{display:unset; display:block; text-align:right;}
    header .menu a{height:72px;}
    header .menu a i{font-size:2.2rem; line-height:72px;}
    header nav{width:100%; height:auto; display:block; float:none; left:0; top:-800px; position:absolute; -webkit-transform:translateY(-140%); transform:translateY(-140%); -webkit-transition:-webkit-transform 0.5s, visibility 0s 0.5s; transition:transform 0.5s, visibility 0s 0.5s;}
    header nav ul{width:100%; height:auto; display:block; position:relative; float:left; padding:24px; background:#efe8d6;}
    header nav ul li{width:100%; height:auto; min-height:48px; display:block; float:left; margin:0px; text-align:right;}
    header nav ul li a{color:#333333; height:48px; line-height:48px; margin:unset;}    
    header nav.open{width:100%; height:100vh; display:block; float:none; left:0px; top:72px; z-index:100; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}
    
    section.slider{overview:visible;}
    section.slider .slide .payoff h1{padding-top:120px; font-size:3.8rem; margin-bottom:28px;}
    section.slider .slide .payoff h2{width:80%; font-size:1.8rem;}
    section.slider .slide .bar{height:auto;}
    section.slider .slide .bar .grid{height:auto; grid-template-columns:auto 232px; background:rgba(255,255,255,0.8)}
    section.slider .slide .bar .grid .line{display:none;}
    section.slider .slide .bar .grid .contact{display:grid; grid-template-columns:48px auto; grid-gap:24px;}
    section.slider .slide .bar .grid .contact i{color:#ae8b31; font-size:3.6rem; line-height:64px;}
    section.slider .slide .bar .grid .contact span{font-size:1.2rem; color:#068972; line-height:28px;}
    section.slider .slide .bar .grid .contact span a{font-size:1.6rem; color:#4b4b4b;}
    section.slider .slide .bar .grid .mob{grid-area:3/1/4/2;}
    section.slider .slide .bar .grid .button{grid-area:1/2/2/3;}
    section.slider .slide .bar .grid .button a{margin-top:12px;}
    
    section.references .container h2{font-size:1.8rem;}
    section.references .container .quote span{font-size:1.4rem;}

    section.reviews .grid{gap:32px;}

    section.products .cards{grid-template-columns:1fr 1fr; gap:24px;}

    footer .container{min-height:300px; background:url('../images/footer.webp') no-repeat center top / cover; padding-top:64px;}
    footer .container .grid{display:grid; grid-template-columns:auto auto auto; gap:24px; padding:0px;}
    footer .container .grid .logo{grid-column-end:span 3; margin-bottom:12px; margin-top:12px;}
    footer .container .grid .content:nth-of-type(2){grid-column-end:span 3;}
    footer .container .grid .social ul li{margin-bottom:0px; margin-right:12px; float:left;}
    footer .container .grid .copyright{grid-column-end:span 3;}
    footer .container .grid .copyright div{height:32px;}
    footer .container .grid .copyright div,
    footer .container .grid .copyright div a{line-height:32px;}
}

/*mobile l*/
@media only screen and (max-width:426px)
{
    .form-grid{width:100%;}
    
    section{padding:32px 0px;}

    section.slider .slide{height:40vh;}
    section.slider .slide .clip{display:none;}
    section.slider .slide .payoff h1{padding-top:96px; font-size:3.0rem; margin-bottom:0px;}
    section.slider .slide .payoff h2{display:none;}
    section.slider .slide .bar{display:none;}
        
    section.content article{width:100%;}
    
    section.references .container h2{font-size:2.0rem;}
    section.references .container .quote span{font-size:1.2rem;}
    section.reviews .grid{grid-template-columns:1fr; gap:24px;}
    section.reviews .grid .review:nth-of-type(2){border-radius:16px; }

    section.products .about{width:100%; height:auto; padding:24px 24px 120px 24px; border-radius:48px 12px 12px 12px;}
    section.products .cards{width:80%; gap:16px; grid-template-columns:1fr; margin-top:-72px; margin-right:16px;}
          
    section.content .breadcrumb{display:none;}

    section.subpages .about{width:100%; height:auto;}
    section.subpages .gold{width:80%; margin-top:-72px; margin-right:16px; border-radius:16px 32px 32px 32px; padding:24px;}
    section.subpages .gold h2{font-size:2.0rem;}

    footer .container .grid{grid-template-columns:1fr;}
    footer .container .grid .logo{grid-column-end:unset;}
    footer .container .grid .content:nth-of-type(2){grid-column-end:unset;}
    footer .container .grid .copyright{grid-column-end:unset;}
    footer .container .grid .copyright{grid-template-columns:1fr;}
    footer .container .grid .copyright br{display:block;}
    footer .container .grid .copyright div,
    footer .container .grid .copyright div a{text-align:center;}
    footer .container .grid .copyright div:last-of-type{text-align:center;}
}

/*mobile m*/
@media only screen and (max-width:376px)
{
    header .grid{grid-template-columns:200px auto;}
    
    section.slider .slide .payoff h1{padding-top:120px; font-size:2.4rem;}

}

/*mobile s*/
@media only screen and (max-width:320px)
{
    section.slider .slide .payoff h1{padding-top:128px; font-size:2.0rem;}
    section.products .cards{grid-template-columns:1fr;}

}