@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{appearance:none; -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:'Roboto Mono', sans-serif; font-size:1.4rem; line-height:1.628571; font-weight:300; color:#352d25; 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:'Roboto', sans-serif; height:auto; font-weight:900;}
h1{font-size:3.5rem; margin-bottom:32px;}
h2{font-size:3.0rem; margin-bottom:24px;}
h3{font-size:2.0rem; margin-bottom:16px;}
h4{font-size:2.0rem; margin-bottom:16px;}
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:#C0D8F4;}
small{font-size:1.2rem;}
section{padding: 32px 0;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}

/*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;}
.button:hover{box-shadow: 0 3px 6px #ababab;}
.button.full{width:100%; height:48px; line-height:48px; padding:unset; border-radius: 0px 0px 4px 4px;}
.button.outline{background:unset; border:4px solid white;}


/*header*/
header{position: relative;  height:156px;}
header .image{position:absolute; top:0; left: 0; height:155px; width:100%;}
header .image img{width: 100%; height: 100%; object-fit:cover;}
header .grid{display:grid; grid-template-columns:110px auto;}
header .grid .logo{width: 110px; height: 110px; margin: 5px 0;}
header .grid .logo img{width:100%; height:100%; object-fit:cover;}

/*Sections*/
section.intro .grid{display:grid; grid-template-columns:1fr 1fr; gap:32px}
section.intro .grid .image{width:390px; height:128px; margin:auto auto 0 0;}
section.intro .grid .image img{width:100%; height:100%; object-fit:contain;}

section.links .grid{display:grid; grid-template-columns: 1fr 1fr; gap:32px;}
section.links .grid .image{width:470px; height:226px;}
section.links .grid .image img{width:100%; height:100%; object-fit:contain;}
section.links .grid .link{position: relative;}
section.links .grid .link article{max-width:85%;margin:auto; background-color:white; padding:24px; background-image:url(../images/ZBR-Article-BG.png); background-position: bottom 2% right 24px; background-repeat:no-repeat; background-size:20%; box-shadow: 0px 3px 6px #ababab;}
section.links .grid .link article p{margin-bottom:24px;}
section.links .grid .link article .button{display:grid; grid-template-columns:62px auto; gap:24px; width:80%; padding:12px; cursor: pointer; margin-bottom:12px; border: 1px solid black;}
section.links .grid .link article .button .image{width:62px; height:62px;}
section.links .grid .link article .button .image img{width:100%; height:100%; object-fit:contain;}
section.links .grid .link article .button a{width:fit-content;}
section.links .grid .link article .button a img{height:62px; width:80%; object-fit:contain;}
section.links .grid .link .image{position:absolute; top: 0; left: 0; width:100%; height:100%; z-index:-1;}
section.links .grid .link .image img{width:100%; height:100%; object-fit:cover;}


/*Footer*/
footer .container{background:url(../images/ZBR-Footer-image.png) no-repeat bottom -20% right; }
footer .grid{display:grid; grid-template-columns:1fr 1fr; gap:0px;}
footer .grid h3,
footer .grid p{grid-column-end: span 2;}
footer .grid address{margin-bottom:24px; grid-column-start:1; grid-row-start:3; font-style:normal;}
footer .grid .image img{width:100%; height:100%; object-fit:cover;}
footer .grid .image{grid-row-start:4; width:100%; height:43px; margin-left:0px;}


/*tablet: 768-1023*/
@media only screen and (max-width:1023px) 
{
    h1{font-size:3.0rem; margin-bottom:24px;}
    h2{font-size:2.8rem; margin-bottom:24px;}
    h3{font-size:2.0rem; margin-bottom:16px;}
    h4{font-size:1.8rem; margin-bottom:16px;}
 
    header{position: relative;  height:148px;}
    header .image{position:absolute; top:0; left: 0; height:142px;}
    header .image img{object-fit:cover;}
    header .grid{display:grid; grid-template-columns:100px auto;}
    header .grid .logo{width: 100px; height: 100px; margin:unset; margin-top:4px;}

    section.intro .grid{gap:24px}
    section.intro .grid .image{width:343px; height:106px; margin:auto auto 0 0;}

    section.links .grid{gap:24px;}
    section.links .grid .link article{max-width:unset;margin:auto;  padding:18px;}
    section.links .grid .image{width:340px; height:186px;}
    section.links .grid .link article .button{padding:2px;}

    footer .container{background:url(../images/ZBR-Footer-image.png)bottom -15% right/40% no-repeat; }
    footer .grid h3,
    footer .grid p{margin-bottom:24px;}
    footer .grid address{margin-bottom:24px; grid-column-start:1; grid-row-start:3; font-style:normal;}
    footer .grid .image{height:26px;}
}

/*mobile l: 427-767*/
@media only screen and (max-width:767px) 
{
    h1{font-size:2.6rem; margin-bottom:24px;}
    h2{font-size:2.4rem; margin-bottom:24px;}
    h3{font-size:2.0rem; margin-bottom:16px;}
    h4{font-size:1.8rem; margin-bottom:16px;}
 
    header{position: relative;  height:148px;}
    header .image{position:absolute; top:0; left:0; height:142px;}
    header .image img{object-fit:cover;}

    section.intro .grid{display:grid; grid-template-columns:1fr; gap:24px}
    section.intro .grid .image{width:319px; height:103px; margin:auto auto 0 0;}

    section.links .grid{display:grid; grid-template-columns: 1fr; gap:24px;}
section.links .grid .link article{max-width:100%;}
section.links .grid .link article p{margin-bottom:12px;}
section.links .grid .link article .button{display:grid; grid-template-columns:45px auto; gap:12px; margin-bottom:12px;}
section.links .grid .link article .button img{width:45px; height:45px;}
section.links .grid .link article .button a img{height:45px; width:80%; object-fit:contain;}


footer .container{background:url(../images/ZBR-Footer-image.png)bottom -10% right/50% no-repeat; }
footer .grid{display:grid; grid-template-columns:1fr; gap:0px;}
footer .grid h3,
footer .grid p{grid-column-end:unset;}
footer .grid address{margin-bottom:24px; grid-column-start:1; grid-row-start:3; font-style:normal;}
footer .grid .image img{width:100%; height:100%; object-fit:cover;}
footer .grid .image{display:none;}

}

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

    body{font-size:1.4rem;}
    section{padding: 12px 0;}
 
    header{position: relative;  height:148px;}

    section.intro .grid{display:grid; grid-template-columns:1fr; gap:24px}
    section.intro .grid .image{width:259px; height:103px;}

    section.links .grid{display:grid; grid-template-columns: 1fr; gap:24px;}
    section.links .grid .image{width:266px; height:125px;}
    section.links .grid .link article{max-width:100%;}
    section.links .grid .link article p{margin-bottom:12px;}
    section.links .grid .link article .button{display:grid; grid-template-columns:45px auto; gap:12px; margin-bottom:12px; width:100%;}
    section.links .grid .link article .button img{width:45px; height:45px;}
    section.links .grid .link article .button a img{height:45px; width:80%; object-fit:contain;}


footer .container{background:url(../images/ZBR-Footer-image.png)bottom -10% right/50% no-repeat; }
footer .grid{display:grid; grid-template-columns:1fr; gap:0px;}
footer .grid h3,
footer .grid p{margin-bottom:12px;}
footer .grid address{margin-bottom:24px; grid-column-start:1; grid-row-start:3; font-style:normal;}
footer .grid .image img{width:100%; height:100%; object-fit:cover;}
footer .grid .image{display:none;} 
    
}