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

/*
    groen: #489631
    oranje: #ea7546
*/

/*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:'Roboto', sans-serif; font-size:1.6rem; line-height:1.628571; color:#1d1d1b; 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:'Roboto', sans-serif;}
h1{font-size:5rem; margin-bottom:48px; color:#489631; border-bottom:2px solid #ea7546;}
h2{font-size:3rem; margin-bottom:32px; color:#489631; border-bottom:2px solid #ea7546;}
h3{font-size:2.4rem; margin-bottom:16px; color:#489631; border-bottom:2px solid #ea7546;}
h1.nomargin, h2.nomargin, h3.nomargin{margin:0px;}
h1.noborder, h2.noborder, h3.noborder{border-bottom:none;}
h1.smaller,h2.smaller,h3.smaller{width:unset; display:inline-block;}
p{margin:0px 0px 32px 0px;}
a, a *{color:#489631; 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;}

/*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{display:inline-block; padding:8px 16px; text-align:center; font-size:1.4rem; border-radius:8px; text-transform:uppercase; text-decoration:none !important; color:#ffffff;}  
.button.green{background:#489631;}
.button.orange{background:#ea7546;}

/*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;}
section.nopadding{padding:0px;}
section.grey{background:#f4f4f4;}

/*forms*/

/*header*/
header{height:128px; background:#489631; overflow:visible;}
header .grid{display:grid; grid-template-columns:234px auto 200px; grid-gap:24px;}
header .logo{padding:16px 0px;}
header .logo a{height:inherit; display:block;}
header .logo a img{max-width:100%; height:96px;}
header nav{padding:16px 0px;}
header nav ul{display:flex; justify-content:right;}
header nav ul li{height:40px; line-height:40px; margin:28px 8px;}
header nav ul li a{display:block; line-height:40px; color:#489631; font-weight:bold; background:#ffffff; border-radius:8px; padding:4px 8px;}
header nav ul li a.on{color:#ea7546;}
header nav ul li a:hover{background:#ea7546; color:#ffffff;}
header nav ul li:last-of-type{margin-right:0px;}
header .menu{display:none;}
header .contact{width:200px; height:200px; border-radius:100px; margin-top:24px; z-index:800;}
header .contact img{width: 100%; height:100%; object-fit:contain;}
/*sections*/
section.slider{padding:0px;}
section.slider .slide{height:400px; position:relative;}
section.slider .slide.big{height:680px; position:relative;}
section.slider .slide .spot{width:100%; height:100%; display:block;}
section.slider .slide .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:8rem; color:#ffffff; margin:0; border-bottom:none;}
section.slider .slide .payoff h2{font-size:5rem; color:#ffffff; border-bottom:none;}

section.content article{}
section.content .split{display:grid; grid-template-columns:1fr 2px 1fr; grid-gap:32px;}
section.content .split .bar{background:#ea7546;}
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.employees{}
section.employees .grid{display:grid; grid-template-columns:1fr 1fr; grid-gap:16px; margin-bottom:16px;}
section.employees .grid .image{padding-top:80%; position:relative; overflow:hidden;}
section.employees .grid .image img{position:absolute; top:0; left:0; bottom:0; right:0; object-fit:cover; width:100%; height:100%;}
section.employees .grid .about{background:#ea7546; padding:32px;}
section.employees .grid .about *{color:#ffffff;}
section.employees .grid:nth-of-type(even) .image{grid-area:1/2/1/3;}
section.employees .grid:nth-of-type(even) .about{grid-area:1/1/1/2; background:#489631;}
section.employees .grid:last-of-type{margin-bottom:0px;}

section.animals{}
section.animals .grid{display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:32px; margin-bottom:16px;}
section.animals .grid .image img{width:100%; object-fit:cover;}
section.animals .grid .about p{color:#1d1d1b;}

section.animal .grid{display:grid; grid-template-columns:auto 300px; grid-gap:32px;}
section.animal .grid .image img{width:100%; object-fit:cover;}

section.contact .grid{display:grid; grid-template-columns:300px auto; grid-gap:32px;}

footer{background:#489631;}
footer .container{}
footer .container .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:32px 0px;}
footer .container .grid .content{font-size:1.4rem; color:#ffffff;}
footer .container .grid .content span{display:block; margin-bottom:12px; font-size:1.6rem; font-weight:bold;}
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{color:#ffffff;}
footer .container .grid .copyright{grid-column-end:span 4; margin-top:12px;}
footer .container .grid .copyright,
footer .container .grid .copyright a{font-size:1.2rem; color:rgba(255,255,255,0.8);}
footer .container .grid .copyright br{display:none;}

/*laptop*/
@media only screen and (max-width:1024px) 
{  

}

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

    header{height:112px;}
    header .grid{grid-template-columns:195px auto;}
    header .logo a img{height:80px;}
    header nav ul li{margin:20px 8px;}
    header .contact{display:none;}

    section{padding:48px 0px;}
    
    section.slider .slide{height:300px;}
    section.slider .slide.big{height:480px;}
    section.slider .slide .payoff h1{padding-top:140px; font-size:6rem;}
    section.slider .slide .payoff h2{font-size:3rem;}
    
    section.animals .grid{grid-template-columns:repeat(2, 1fr); margin-bottom:32px;}
    section.animal .grid{grid-template-columns:auto 200px;}

}

/*mobile l*/
@media only screen and (max-width:426px)
{
    h1{font-size:3.2rem; margin-bottom:24px;}
    h2{font-size:2.4rem; margin-bottom:16px;}
    h3{font-size:1.6rem; margin-bottom:12px;}    
    .container{padding:0px 12px;}
    
    header{height:86px; overflow:visible;}
    header .grid{grid-template-columns:151px auto;}
    header .logo{padding:12px 0px;}
    header .logo a img{height:62px;}
    header .menu{display:unset; display:block; text-align:right;}
    header .menu a{width:32px; height:32px; display:block; float:right; background:#ffffff; border-radius:8px; margin:27px 0px; text-align:center;}
    header .menu a i{font-size:2.2rem; line-height:32px; }
    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:#ea7546;}
    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:#1d1d1b; height:48px; line-height:48px; margin:unset; background:none;}    
    header nav ul li a.on{color:#ffffff;}    
    header nav.open{width:100%; height:100vh; display:block; float:none; left:0px; top:70px; z-index:1000; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}

    section{padding:32px 0px;}
    
    section.slider .slide{height:200px;}
    section.slider .slide.big{height:320px;}
    section.slider .slide .payoff h1{padding-top:100px; font-size:4rem;}
    section.slider .slide .payoff h2{font-size:2rem;} 
    
    section.content .split{grid-template-columns:1fr; gap:32px;}
    section.content .split .bar{display:none;}
    
    section.employees .grid{grid-template-columns:1fr; grid-gap:8px; margin-bottom:16px;}
    section.employees .grid .about{padding:16px;}
    section.employees .grid:nth-of-type(even) .image{grid-area:unset;}
    section.employees .grid:nth-of-type(even) .about{grid-area:unset;}
    
    section.animals .grid{grid-template-columns:1fr; margin-bottom:32px;}
    section.animals .grid .about h3{font-size:2.4rem;}    
    section.animal .grid{grid-template-columns:1fr;}    
    
    section.contact .grid{grid-template-columns:1fr;}
}

/*mobile m*/
@media only screen and (max-width:376px)
{
    footer .container .grid{grid-template-columns:1fr;}  
    footer .container .grid .copyright{grid-column-end:unset;}
    footer .container .grid .copyright br{display:block;}

}

/*mobile s*/
@media only screen and (max-width:320px)
{
    section.slider .slide{height:240px;}
    section.slider .slide.big{height:280px;}
    section.slider .slide .payoff h1{padding-top:100px; font-size:4rem;}
    section.slider .slide .payoff h2{font-size:2rem;}
    

}