@font-face {
  font-family: 'CircularStd-Bold';
  src:  url('../fonts/CircularStd-Bold.eot') format('embedded-opentype'), url('../fonts/CircularStd-Bold.otf') format('opentype'), url('../fonts/CircularStd-Bold.woff') format('woff'), url('../fonts/CircularStd-Bold.ttf')  format('truetype'), url('../fonts/CircularStd-Bold.svg#CircularStd-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ==========================================================================
   teqz.nl (c) RvK
   ========================================================================== */
html, body{font:2.3vh/3.2vh Georgia, serif; color:rgba(0,0,0,0.9);}
.overlay{display:none; background:rgba(0,0,0,0.85); position:fixed; z-index:10000; width:100%; height:100%; top:0; }
h1,h2,h3,h4,h5{font-family:'CircularStd-Bold', sans-serif;}
h3{font-size:2.65vh;}
a, a:hover, a:visited, a:focus{color:#000;}
article a{text-decoration:underline;}
.back-pattern, .back-pattern-wit{background:url(../img/pattern.png) repeat center center; height:94vh; margin:0 30px; margin:3vh;}
.section-groot .back-white{margin:30px; margin:3vh;}
.inner{margin:0 0 0 6vw;}
.inner-left{margin-left:6vw;}
.inner-right{margin-right:6vw;}

.btn, .btn:hover, .btn:visited{display:block; border:1px solid white; border-radius:5px; color:white; float:left; font-family:'CircularStd-Bold', sans-serif; clear:both; text-decoration:none;}
.btn:hover{background-color:white; border-color:black; color:black;  transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out;   -webkit-transition: all .25s ease-in-out;}
.btn.zwart{border-color:#aeb0b2; color:#000;}
.btn.bekijk{font-size:3.6vh; line-height:7.2vh; padding:0 1.5vw; margin-bottom:20vh;}
.btn.projecten{font-size:3vh; line-height:6.2vh; padding:0 1.5vw;}
.btn.small{font-size:2.5vh; line-height:5vh; padding:0 1.1vw;}
.btn .fa{padding-left:20px;}
.btn.pijltje-wit{background:url(../img/pijltje-wit.png) no-repeat 110% center; transition-property:background-position; transition-duration:2s; padding-right:100px;}
.btn.pijltje-wit:hover{background-position:90% center; transition-duration:1s;}


.video-container, .video-placeholder{position:absolute; top:0; width:100vw; height:100vh; max-width:100%; max-height:100%; overflow:hidden; z-index:-1; background:#ffb301;}
.video-placeholder{left:0;}
.video{position:absolute; top:0; width:100vw; height:107%; background-size:100% 100%; background-color:black; background-position:center center; background-size:contain; object-fit:cover; z-index:-1; overflow:hidden;}
.slogan{font-size:88px; line-height:82px; font:9.5vh/9vh 'CircularStd-Bold', sans-serif; color:white; letter-spacing:-1px; min-height:43vh}
.frontpage .slogan{margin-top:15vh;}
.paginatitel{padding:7.5vh 0 2.5vh; font-size:2.6vh; font-style:italic; color:#fff;}
.next, .next:hover, .next:visited, .next:focus{position:absolute; bottom:0; left:0; margin-left:calc( 6vw + 45px ); width:4vw; height:4vw; display:block; color:white; font-size:3.5vw; line-height:4vw; background:#ffb301; text-align:center; cursor:pointer;}
.logo img{width:10vw; min-width:105px;}

.section0 .inner{margin-top:9vh;}
.section0 .links .fa-circle{position:absolute; right:0; top:0; font-size:12px;}
.section0 .links a, .section0 .links a:hover, .section0 .links a:visited{font-size:20px; width:100%; padding:9px 25px; text-align:left; color:black; background:rgba(255,255,255,0.6);}
.section0 .links a:hover, .links a.active{background:#ffb301 !important; border-color:#ffb301;}