@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%; font-family:'Open Sans', sans-serif; font-size:1.4rem; line-height:1.628571; color:white; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}


/*text*/
h1, h2, h3, h4, h5, h6{width:100%; font-family:'Quicksand', sans-serif; height:auto; font-weight:500;}
h1{font-size:3.5rem; margin-bottom:24px;}
h2{font-size:3.0rem; margin-bottom:32px;}
h3{font-size:2.0rem; margin-bottom:16px;}
h4{font-size:1.6rem; margin-bottom:12px;}
p{margin:0px 0px 32px 0px;}
p:last-of-type{margin:0px 0px 0px 0px;}
a, a{color:#444444; text-decoration:none;}
a:hover, a:hover {color:#40A629;}
small{font-size:1.2rem;}
section{padding: 32px 0;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
article.white *{color:#444444;}
article.smaller{width:80%; margin:0px auto;}

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

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

/*generals*/
.button{display:block; width:fit-content; font-size:1.4rem; font-weight:700; padding:8px 24px; border-radius:75px; color:#ffffff; background:#354638;}
.button:hover{}
.button.full{width:100%; height:48px; line-height:48px; padding:unset; border-radius: 0px 0px 4px 4px;}
.button.full:hover{}
.button.outline{background:unset; border:4px solid white;}

/*forms*/
.wrapper{width:80%; margin: 0 auto;}
form.form-grid{display:grid; grid-template-columns:200px auto; gap:16px;}
form.form-grid.order{gap:0px;}
form.form-grid .wide{grid-column-end:span 2;}
form.form-grid h2{margin-bottom:8px; color:#354638;}
form.form-grid h3{margin-top:16px; margin-bottom:8px;}
form.form-grid div{padding:8px 0px;}
form.form-grid div.margin-top{margin-top:16px;}
form.form-grid.order div{padding:0px;}
form.form-grid.order div.padding{padding:16px;}
form.form-grid div.hide{display:none;}
form.form-grid div.row{border-bottom:1px dotted #eae9e9;}
form.form-grid.order div,
form.form-grid div.noborder{border-bottom:none !important;}
form.form-grid div.label{color:#2a2620;}
form.form-grid div.row label.red{color:#e2001a;}
form.form-grid div:not(.input-wrapper-submit) span{display:block; height:32px; line-height:32px; color:#a3a3a3; font-size:1.2rem;}
form.form-grid div input[type="datetime-local" ],
form.form-grid div input[type="time" ],
form.form-grid div input[type="date" ]{color:#2a2620;}
form.form-grid div input[type="text"],
form.form-grid div input[type="number"],
form.form-grid div input[type="date"],
form.form-grid div input[type="time"],
form.form-grid div input[type="datetime-local"]{width:100%; height:24px; line-height:24px; font-family:'Roboto',sans-serif; font-size:1.4rem; padding:16px; border-radius:8px; border:1px solid #eae9e9; color:#2a2620; background:#ffffff;}
form.form-grid div select{width:100%; height:24px; line-height:24px; font-size:1.4rem; padding:16px; border-radius:8px; color:#2a2620; background:#ffffff; border:1px solid #eae9e9; font-family:'Roboto', sans-serif; color:#555555;}
form.form-grid div select{height:unset; line-height:unset; padding:8px 16px;}
form.form-grid div select option{color:#555555;}
form.form-grid div input[type="text"].red,
form.form-grid div input[type="number"].red,
form.form-grid div input[type="date"].red,
form.form-grid div input[type="time"].red,
form.form-grid div select.red,
form.form-grid div input[type="datetime-local"].red{border:1px solid #e2001a;}
form.form-grid div input[type="text"]:focus,
form.form-grid div input[type="number"]:focus,
form.form-grid div input[type="date"]:focus,
form.form-grid div input[type="time"]:focus,
form.form-grid div input[type="datetime-local"]:focus{border:1px solid #2a2620;}
form.form-grid div textarea{width:100%; height:300px; line-height:24px; padding:16px; border-radius:8px; font-family:'Roboto',sans-serif; font-size:1.4rem; background:#ffffff; color:#2a2620; border:1px solid #eae9e9} 
form.form-grid div textarea:focus{border:1px solid #303030;}
form.form-grid div.submit{display:grid; grid-template-columns:1fr 1fr;}
form.form-grid div.submit .left input[type=button],
form.form-grid div.submit .left input[type=submit]{border:0px; font-family:'Roboto', sans-serif; color:#555555; background-color:#eae9e9; font-size:1.4rem; padding:15px 25px; border-radius:30px; text-decoration:none; float:left; cursor:pointer;}
form.form-grid div.submit .right input[type=button],
form.form-grid div.submit .right input[type=submit]{border:0px; font-family:'Roboto', sans-serif; color:#ffffff; background-color:#354638; font-size:1.4rem; padding:15px 25px; border-radius:30px; text-decoration:none; float:right; cursor:pointer;}
form.form-grid div.submit .right input[type=submit].grey{color:#f1f1f1; background-color:#444444;}


/*header*/
header{background:white; height:110px;}
header .grid{display:grid; grid-template-columns:260px 1fr 50px auto; gap:24px;}
header .grid .logo{height:60px; width:260px; margin:auto;}
header .grid .logo img{height:100%; width:100%; object-fit:contain;}
header .grid nav ul{display:flex; justify-content:flex-end;}
header .grid nav ul li{margin: 0 12px; line-height:110px; font-family:'Quicksand',sans-serif; font-size:1.8rem;}
header .grid nav ul li a:hover,
header .grid nav ul li a.active{border-bottom:3px solid #40A629;}
header .grid nav ul li .on{color:#40A629; border-bottom:3px solid #40A629;}

header .grid .search a{line-height:110px; font-size:1.8rem; margin:0 auto;}
header .grid div.lang{line-height:110px;}
header .grid div.lang select{width:100%; font-size:1.6rem; padding:8px; border-radius:8px; color:#2a2620; background:#ffffff; border:1px solid #eae9e9; font-family:'Maven Pro', sans-serif; color:#555555;}
header .grid .menu{display:none;}

/*Sections*/
section.nopadding{padding-top:0px;}
section.hero{padding:0; position: relative; overflow:visible;}
section.hero .image{height:650px; width:100%;}
section.hero.small .image{height:400px;}
section.hero .image img{height:100%; width:100%; object-fit:cover;}
section.hero .whitebar.text{height:180px;}
section.hero .whitebar{height:100px; width:100%; background-color:white; border-top-left-radius:75px; border-top-right-radius:75px; position:absolute; bottom:-1px; left:0; z-index:1;}
section.hero .whitebar.cat{height:192px;}
section.hero.small .whitebar article{color:#354638; text-align:center; padding:24px; margin:auto 0;}
section.hero .whitebar .wrapper{max-width: 80%;;}
section.hero.small .whitebar .container article.cont{padding:unset;}
section.hero.small .whitebar .container article.cont p{text-align:left;}
section.hero.small .whitebar .floating-image{position:absolute; right:3%; top:-38%; height:150px; width:150px;}
section.hero .whitebar .floating-image{position:absolute; right:3%; top:-70%; height:200px; width:200px;}
section.hero .whitebar .floating-image img{height: 100%; width: 100%; object-fit:cover;}

section.content{padding:32px 0px;}
section.content:first-child{padding-top:unset;}
section.content .background{background:#354638; position:absolute; top:32px; left:0; width:50%; height:calc(100% - 64px);}
section.content .grid{display:grid; grid-template-columns:1fr 1fr 400px; gap:0px;}
section.content .grid article{background:#354638; grid-column:span 2; padding:16px 24px 16px 16px;}
section.content .grid article *{color:#ffffff;}
section.content .grid article p:last-of-type{margin:0px;}
section.content .grid .image{background:linear-gradient(90deg, #354638 50%, #ffffff 50%);}
section.content .grid .image img{width:100%; height:100%; object-fit:cover; border-radius:300px; border:20px solid #ffffff;}
section.content .grid article .certificate{height:72px; width:100px;}
section.content .grid article .certificate img{height:100%; width:100%; object-fit:contain;}
section.content:nth-of-type(odd) .background{left:unset; right:0;}
section.content:nth-of-type(odd) .grid{grid-template-columns:400px 1fr 1fr;}
section.content:nth-of-type(odd) .grid article{padding:16px 16px 16px 24px;}
section.content:nth-of-type(odd) .grid .image{grid-area:1/1/1/1; background:linear-gradient(90deg, #ffffff 50%, #354638 50%);}

section.categories{background:#354638; border-top-left-radius:75px; border-top-right-radius:75px;}
section.categories .grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;}
section.categories .category .image{position: relative;}
section.categories .category .title{text-align:center; color:white; font-size:2.2rem; margin-bottom:12px; min-height:4.0rem;font-family:'Quicksand',sans-serif; font-weight:700;}
section.categories .category .image{height: 150px; width:100%;}
section.categories .category .background{display:none;}
section.categories .category.active .background,
section.categories .category:hover .background{display:block; position:absolute; top:0; left:0; height:100%; width:100%; border-radius:40px; background:#84ca60; z-index: 200; opacity:0.6;}
section.categories .category .image img{width:100%; height:100%; object-fit:cover; border-radius:40px; border:3px solid white;}
section.categories .description div{background:white; border-top-left-radius:75px; border-top-right-radius:75px;}
section.categories .description .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px;  margin-top:64px;}
section.categories .description .grid .subitem .title{text-align:center; color:#707070; margin:12px 0; font-family:'Quicksand',sans-serif; font-size:2.2rem; font-weight:700; opacity:0.6;}
section.categories .description .grid .subitem .image{width:100%; height:100px; margin: 24px 0;}
section.categories .description .grid .subitem .image img{width:100%; height:100%; object-fit:contain;}

section#search article *{color:#354638;}

.popup{width:100vw; height:100vh; background:rgba(0,0,0,0.5); display:none; position:fixed; top:0; left:0; z-index:5000;}
.popup .popup-content{display:grid; grid-template-columns:200px 1fr; gap:24px; background:white; border-radius:30px; width: 70vw; height:fit-content; margin:auto; margin-top:350px; padding:32px; position: relative;}
.popup .popup-content .title{color:#354638; opacity:unset; font-size:2.2rem;}
.popup .popup-content .image{height:100px; width:100%; grid-column-start:1;}
.popup .popup-content .image img{height:100%; width:100%; object-fit:contain;}
.popup .popup-content article{color:#444444; grid-row-start:1; grid-column-start:2; grid-row-end:span 2;}
.popup .popup-content p a.button{margin-top:12px;}
.popup .popup-content p a.button:after{content:'\21E8'; font-size:1.4rem; color:white; margin-left:12px;}
.popup .popup-content p a.button:hover::after{color:#40A629;}
.popup .popup-content a.close-popup{position:absolute; top:18px; right:18px; height:20px; width:20px; line-height:20px; color:#354638; text-align:center; font-size:2.0rem; font-weight:700;}
.popup .popup-content a.close-popup:hover{cursor:pointer;}

/*Footer*/
footer{background:#354638; padding:24px 0; font-size:1.2rem;}
footer *{color:white; font-style:normal;}
footer .grid{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px;}
footer .grid .logo{width:190px; height:190px;}
footer .grid .logo img{width:100%; height:100%; object-fit:cover;}
footer .grid .sociallinks a i{font-size:4.0rem;}
footer .grid .sociallinks a i:hover,
footer .grid .sociallinks a i:active{color:#40A629;}
footer .grid .sociallinks a:last-of-type{margin-left:12px;}

@media only screen and (max-width:1220px)
{
    h1{font-size:3.0rem; margin-bottom:24px;}
    h2{font-size:2.8rem; margin-bottom:24px;}

    header{overflow:visible;}
    header .grid{grid-template-columns:268px auto 100px 50px; gap:12px;}
    header .grid .logo{height:60px; width:268px;}
    header .grid .menu{display:block; text-align:right;}
    header .grid .menu a i{font-size:3.0rem; color:#354638; line-height:110px;} 
    header .grid 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 .grid nav ul{width:100%; height:auto; display:block; position:relative; float:left; padding:24px; background:#354638; margin-left:unset;}
    header .grid nav ul li:before{background:none;}
    header .grid nav ul li{width:100%; height:auto; min-height:48px; line-height:unset; display:block; float:left; margin:0px; text-align:right; border-radius:unset;}
    header .grid nav ul li a{color:#ffffff; height:48px; line-height:48px; margin:unset;}
    header .grid nav.open{width:100%; height:100vh; display:block; float:none; left:0px; top:110px; z-index:1001; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}
    header .grid .search{width:fit-content; margin: 0 0 0 auto;}
    
    section.content .grid{display:grid; grid-template-columns:1fr 1fr 350px;}
    section.content:nth-of-type(odd) .grid{grid-template-columns:350px 1fr 1fr;}
}

/*tablet: 768-1023*/
@media only screen and (max-width:1023px) 
{
    body{font-size:1.3rem;}
    h1{font-size:2.3rem; margin-bottom:20px;}
    h2{font-size:2.0rem; margin-bottom:20px;}
    h3{font-size:1.8rem; margin-bottom:12px;}
    h4{font-size:1.6rem; margin-bottom:12px;}

    .container{padding:0px 12px;}

    body.noscroll{overflow:hidden;}
    .popup .popup-content{width:90vw;}

    section.hero .image{height:420px;}
    section.hero .whitebar{height:100px; width:100%; background-color:white; border-top-left-radius:65px; border-top-right-radius:65px;}
    section.hero .whitebar .floating-image{position:absolute; right:5%; top:-88%; height:150px; width:150px;}
    section.hero.small .whitebar .floating-image{position:absolute; right:5%; top:-26%;  height:100px; width:100px}

    section.content .grid article{padding:12px 16px 12px 8px;}
    section.content .grid .image img{width:100%; height:100%; object-fit:cover; border-radius:300px; border:16px solid #ffffff;}
    section.content:nth-of-type(odd) .grid article{padding:12px 8px 12px 16px;}

    section.categories{background:#354638; border-top-left-radius:65px; border-top-right-radius:65px;}
    section.categories .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
    section.categories .category .title{text-align:center; color:white; font-size:2.0rem; margin-bottom:12px; line-height:unset; font-family:'Quicksand',sans-serif; font-weight:700;}
    section.categories .category .image{height: 150px; width:100%;}
    section.categories .description .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
    section.categories .description .grid .subitem .title{text-align:center; color:#707070; margin-top:12px; font-family:'Quicksand',sans-serif; font-size:2.0rem; font-weight:700; opacity:0.6;}
    section.categories .description .grid .subitem .image{width:100%; height:100px; margin: 24px 0;}
    section.categories .description .grid .subitem .image img{width:100%; height:100%; object-fit:contain;}

    footer{padding:24px 0;}
    footer .grid{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px;}
    footer .grid .logo{width:150px; height:150px; margin: 0 auto auto auto;}
    footer .grid .sociallinks a i{font-size:3.2rem;}
}

/*mobile l: 427-767*/
@media only screen and (max-width:767px) 
{

    h1{font-size:2.5rem; margin-bottom:24px;}
    h2{font-size:2.2rem; margin-bottom:24px;}
    h3{font-size:2.0rem; margin-bottom:12px;}
    h4{font-size:1.8rem; margin-bottom:12px;}
    .popup .popup-content{grid-template-columns:1fr;}
    .popup .popup-content p{grid-row-start:unset; grid-column-start:unset; grid-row-end:unset; }

    article.smaller{width:100%;}

    header .grid{grid-template-columns:170px auto 75px 50px; gap:12px;}
    header .grid .logo{height:60px; width:170px;}
    header .grid .menu a i{font-size:2.4rem;}

    form.form-grid div{padding:unset;}
    form.form-grid{grid-template-columns:1fr;}
    form.form-grid .wide{grid-column-end:unset;}
    form.form-grid div.submit{grid-template-columns:1fr; grid-column-end:unset;}
    form.form-grid div.row.label{font-weight:500;}

    form.form-grid .submit .left input[type=button],
    form.form-grid .submit .left input[type=submit]{width: 100%; float:unset; margin-bottom:8px;}
    form.form-grid .submit .right input[type=button], 
    form.form-grid .submit .right input[type=submit]{width:100%; float:unset;}
    form.form-grid .submit .right input[type=submit].grey{float:unset; width:100%;}

    section.hero .image{height:260px;}
    section.hero .whitebar{height:60px; border-top-left-radius:55px; border-top-right-radius:55px;}
    section.hero .whitebar .floating-image{position:absolute; right:5%; height:100px; width:100px;}
    section.hero.small .whitebar .floating-image{position:absolute; right:5%;  height:100px; width:100px}

    section.content{padding:24px 0px;}
    section.content .background{background:#354638; position:absolute; top:24px; left:0; width:100%; height:calc(100% - 48px); border-radius:65px 65px 0px 0px;}
    section.content .grid{grid-template-columns:1fr 350px;}
    section.content .grid article{background:unset; grid-column:unset; padding:36px 16px 12px 8px}
    section.content .grid .image{background:unset; padding:24px 0px;}
    section.content .grid .image img{width:300px; height:300px; border-radius:300px; border:20px solid #ffffff; float:right;}
    section.content:nth-of-type(odd) .background{left:0; right:unset;}
    section.content:nth-of-type(odd) .grid{grid-template-columns:350px 1fr;}
    section.content:nth-of-type(odd) .grid .image{grid-area:1/1/1/1; background:unset;}
    section.content:nth-of-type(odd) .grid .image img{float:left;}

    section.categories .grid {grid-template-columns:1fr 1fr;}
    section.categories .category .image{height:120px;}
    section.categories .description .grid {grid-template-columns:1fr 1fr; padding:24px;}
    section.categories .description .grid .subitem .image {height:80px;}

    footer{padding:24px 0;}
    footer .grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
    footer .grid .logo{width:150px; height:150px; margin: 0 auto auto auto; grid-area:2/2/2/2;}
    footer .grid .sociallinks a i{font-size:3.2rem;}
}

/*mobile: - extra */
@media only screen and (max-width:667px) 
{
    section.content .grid{grid-template-columns:1fr 200px;}
    section.content .grid .image{background:unset; padding:24px 0px 0px 0px;}
    section.content .grid .image img{width:200px; height:200px; border-radius:200px; border:12px solid #ffffff;}
    section.content:nth-of-type(odd) .grid{grid-template-columns:200px 1fr;}
}

/*mobile s: 320-426*/
@media only screen and (max-width:426px)
{
    h1{font-size:2.2rem; margin-bottom:16px;}
    h2{font-size:2.0rem; margin-bottom:16px;}
    h3{font-size:1.8em; margin-bottom:12px;}
    h4{font-size:1.8rem; margin-bottom:12px;}

    section{padding:24px 0;}

    header .grid{grid-template-columns:119px auto 75px auto; gap:12px;}
    header .grid .logo{height:60px; width:119px;}

    section.hero .whitebar.text{height:180px;}
    section.hero.small .whitebar .floating-image{height:50px; width:50px; top:-13%;}

    section.categories .category .title{min-height:7.0rem;}

    section.content .grid{grid-template-columns:1fr;}
    section.content .grid .image{padding:0px 0px 24px 0px;}
    section.content .grid .image img{width:200px; height:200px; border-radius:200px; border:12px solid #ffffff; float:unset !important; margin:0px auto;}
    section.content:nth-of-type(odd) .grid{grid-template-columns:1fr;}    
    section.content:nth-of-type(odd) .grid .image{grid-area:unset;}    

    footer{padding:24px 0;}
    footer .grid{display:grid; grid-template-columns:1fr; gap:12px;}
    footer .grid .logo{width:100px; height:100px; margin: auto; grid-area:4/1/4/1;}
    footer .grid .sociallinks a i{font-size:3.2rem;}
    
}