/* menubtn */
#menubtn{position:absolute; top:50%; left:-100px; left:100px \9; z-index:98; -webkit-animation:slideLeft 0.3s ease-in 1.5s 1 forwards; animation:slideLeft 0.3s ease-in 1.5s 1 forwards;}
#menubtn div{position:relative; float:left; width:60px; height:30px; margin-top:-15px; cursor:pointer;}
#menubtn div span{position:absolute; left:0; top:50%; display:block; width:100%; height:2px; background:#fff;}
#menubtn div span:nth-child(1){top:0% \9; -webkit-animation:firstSpan 0.2s ease-in 1.8s 1 forwards; animation:firstSpan 0.2s ease-in 1.8s 1 forwards;}
#menubtn div span:nth-child(3){top:100% \9; -webkit-animation:lastSpan 0.2s ease-in 1.8s 1 forwards; animation:lastSpan 0.2s ease-in 1.8s 1 forwards;}
@-webkit-keyframes slideLeft{100%{left:100px;}} @keyframes slideLeft{100%{left:100px;}}
@-webkit-keyframes firstSpan{100%{top:0;}} @keyframes firstSpan{100%{top:0;}}
@-webkit-keyframes lastSpan{100%{top:100%;}} @keyframes lastSpan{100%{top:100%;}}
#menubtn div:hover{-webkit-animation:grow 0.3s linear 1; animation:grow 0.3s linear 1;}
#menubtn div:hover span{background:#eda615;}
@-webkit-keyframes grow{50%{-webkit-transform:scale(1.2); transform:scale(1.2);}}
@keyframes grow{50%{-webkit-transform:scale(1.2); transform:scale(1.2);}}
/* menu */
#menu{position:fixed; width:100%; height:100%; background:url(/img/menubg.png) repeat; z-index:9999; overflow:hidden; display:none;}
#menu .content{display:table; width:100%; height:100%;}
#menu .content .inner{display:table-cell; text-align:left; vertical-align:middle; width:100%;} 
#menu .content .inner a{display:inline-block; margin-left:-40%; font-size:45px; line-height:85px; color:#fff; font-weight:300; text-transform:uppercase; cursor:pointer;}
#menu .content .inner a:hover{color:#efac23;}
#menu.actief .content .inner a{margin-left:18%;}
/* close */
#menu a.close{position:absolute; top:38px; right:40px; width:36px; height:36px; z-index:9; cursor:pointer;}
#menu a.close span{background:#fff; height:100%; position:absolute; top:0; width:3px; -webkit-transition:All 0.3s ease; -moz-transition:All 0.3s ease; -o-transition:All 0.3s ease; -ms-transition:All 0.3s ease; transition:All 0.3s ease; -webkit-appearance:none;}
#menu a.close span:nth-child(1){right:45%; -webkit-transform:rotate(45deg); transform:rotate(45deg); background:#ddd;}
#menu a.close span:nth-child(2){left:45%; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
@media screen and (max-width:750px) {
#menubtn{position:fixed; top:18px; z-index:100;}
#menubtn div{position:relative; float:left; width:40px; height:18px; margin-top:0;}
@-webkit-keyframes slideLeft{100%{left:20px;}} @keyframes slideLeft{100%{left:20px;}}
#menu .content .inner a{font-size:28px; line-height:70px;}
#menu.actief .content .inner a{margin-left:14%;}
}
@media screen and (max-width:320px) {
#menu .content .inner a{font-size:24px; line-height:60px;}
#menu.actief .content .inner a{margin-left:12%;}
}

/* top */
.section.top {position:fixed; top:0; left:0; width:100%; height:80px; padding:0; z-index:99;}
.section.top .contact{float:left; margin:25px 0 0 60px; font-size:13px; line-height:26px; color:#fff; text-transform:uppercase; letter-spacing:1px;}
.section.top .contact span{display:inline-block; padding-right:15px;}
.section.top .contact span:first-child{color:#eda615;}
.section.top .contact a{color:#fff;}
.section.top .contact a:hover{color:#fff; text-decoration:underline;}
.section.top .social{float:right; margin:25px 25px 0 0;}
.section.top .social a{display:inline-block; width:32px; height:36px; background-size:32px 32px; margin:0 0 0 6px; vertical-align:top; opacity:0; opacity:1 \9; -webkit-animation:fadeIn 2s ease-in 1 forwards; animation:fadeIn 2s ease-in 1 forwards;}
.section.top .social a.linkedin{background:url(/img/icons/social/linkedin.png) no-repeat center 0px; -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.section.top .social a.youtube{background:url(/img/icons/social/youtube.png) no-repeat center; -webkit-animation-delay:0.3s; animation-delay:0.3s;}
.section.top .social a.vimeo{background:url(/img/icons/social/vimeo.png) no-repeat center; -webkit-animation-delay:0.6s; animation-delay:0.6s;}
/*.section.top .social a.google{margin:0; background:url(/img/icons/social/google+.png) no-repeat center; -webkit-animation-delay:0.9s; animation-delay:0.9s;}*/
.section.top .social a.instagram{margin:0; background:url(/img/icons/social/instagram.png) no-repeat center; -webkit-animation-delay:0.9s; animation-delay:0.9s;}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.section.top .social a.linkedin{background:url(/img/icons/social/linkedin@2x.png) no-repeat center 0px; background-size:32px 32px;}
.section.top .social a.youtube{background:url(/img/icons/social/youtube@2x.png) no-repeat center; background-size:32px 32px;}
.section.top .social a.vimeo{background:url(/img/icons/social/vimeo@2x.png) no-repeat center; background-size:32px 32px;}
/*.section.top .social a.google{background:url(/img/icons/social/google+@2x.png) no-repeat center; background-size:32px 32px;}*/
.section.top .social a.instagram{background:url(/img/icons/social/instagram@2x.png) no-repeat center; background-size:32px 32px;}
}
.section.top .social a:hover{margin-top:3px;}
/* actief */
.section.top.actief{background:#000; height:60px; overflow:hidden;}
.section.top.actief span.hide{opacity:0;}
.section.top.actief .contact{margin:17px 0 0 60px;}
.section.top.actief .social{margin:13px 25px 0 0;}
@media screen and (max-width:750px) {
.section.top {height:auto;}
.section.top .contact{display:none;}
.section.top .social{float:right; margin:10px 15px 10px 0;}
.section.top .social a{margin:0 0 0 3px;}
/* actief */
.section.top.actief{background:#000; height:auto;}
.section.top.actief .social{margin:10px 15px 10px 0;}
}

/* head */

.section.head{position:relative; float:left; width:100%; height:100%; padding:0; background:#000;}
.section.head .inner{width:100%; height:100%; padding-left:20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.section.head .inner .content{position:absolute; top:0; left:0; width:100%; height:100%; z-index:9; background:url(../video/videobg.png) repeat;}
.section.head .inner .content .logo{position:absolute; bottom:40%; right:10%; width:265px; height:193px; background:url(../img/logo/01.png) no-repeat center / 265px 193px; transition:none;}
.section.head .inner .content .logo::before{content:""; position:absolute; top:0; left:0; width:265px; height:193px; background:url(../img/logo/00.png) no-repeat center / 265px 193px;}

.section.head .inner .content h1{position:absolute; bottom:20%; right:10%; font-size:28px; line-height:54px; font-weight:300; color:#fff; text-align:right; margin:0; text-transform:none;}
.section.head .inner .content h1 span{color:#eda615; text-transform:uppercase;}
/* video */
.video_wrapper{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
video#bgvid{position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; -ms-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%);}
/*scroller*/
.section.head .scroll{position:absolute; bottom:5%; left:50%; width:66px; height:auto; margin-left:-33px; font-size:12px; line-height:30px; color:#fff; letter-spacing:6px; z-index:98; -webkit-transition:All 0.3s ease; -moz-transition:All 0.3s ease; -o-transition:All 0.3s ease; -ms-transition:All 0.3s ease; transition:All 0.3s ease;}
.section.head .scroll span{display:inline-block; width:66px; height:12px; background:url(../img/icons/scroll.png) no-repeat 45% top;}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {.section.head .scroll span{background:url(../img/icons/scroll@2x.png) no-repeat 45% top; background-size:20px 12px;}}
.section.head .scroll:hover{cursor:pointer; filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;}
.bounce{-webkit-animation:bouncer linear 0.8s; -webkit-animation-iteration-count:infinite; -webkit-transform-origin:50% 50%; animation:bouncer linear 0.8s; animation-iteration-count:infinite; transform-origin:50% 50%;} 
@-webkit-keyframes bouncer {0%{-webkit-transform:translate(0px,0px);} 25%{-webkit-transform:translate(0px,-2px);} 50%{-webkit-transform:translate(0px,0px);} 75%{-webkit-transform:translate(0px,2px);} 100%{-webkit-transform:translate(0px,0px);}}
@keyframes bouncer{0%{transform:translate(0px,0px);} 25%{transform:translate(0px,-2px);} 50%{transform:translate(0px,0px);} 75%{transform:translate(0px,2px);} 100%{transform:translate(0px,0px);}}

@media screen and (max-width:1440px) {
.section.top .contact{font-size:12px; line-height:24px;}
.section.head .inner .content .logo{bottom:45%; right:110px;}
.section.head .inner .content h1{bottom:20%; right:110px; font-size:26px; line-height:45px;}
}
@media screen and (max-width:1024px) {
.section.head{background:url(../img/header-phone.jpg); background-size:cover;}
.section.head .inner .content .logo{bottom:43%; right:90px; width:240px; height:175px; background-size:240px 175px;}
.section.head .inner .content .logo::before{width:240px; height:175px; background-size:240px 175px;}
.section.head .inner .content h1{bottom:23%; right:90px; font-size:22px; line-height:40px;}
}
@media screen and (max-width:750px) {
.section.head .inner .content .logo{bottom:48%; right:0; width:100%; height:175px; background-size:240px 175px; background-position:center;}
.section.head .inner .content .logo::before{width:100%; height:175px; background-size:240px 175px;}
.section.head .inner .content h1{right:10%; bottom:20%; width:80%; text-align:center; font-size:17px; line-height:26px;}
.video_wrapper{display:none;}
}
@media screen and (max-width:320px) {
.section.head .inner .content h1{font-size:16px; line-height:26px;}
.section.head .scroll{bottom:4%; line-height:24px;}
}
@media screen and (max-height:440px) {
.section.head .inner .content .logo{bottom:48%; height:117px; background-size:161px 117px;}
.section.head .inner .content .logo::before{ height:117px; background-size:161px 117px;}
}

/* footer */
.section.footer {padding:0;}
.section.footer .inner{position:relative; float:left; width:100%; padding:140px 0 100px; margin-left:0px; background:#efac23; text-align:left; color:#fff; font-size:16px; font-weight:300; line-height:34px; letter-spacing:2px; z-index:10;}
/*.section.footer .inner::before{content:""; position:absolute; bottom:-20px; left:20px; width:100%; height:100%; background:#eda615; z-index:-1;}*/
.section.footer .inner .left{float:left; width:60%; margin-right:2%;}
.section.footer .inner .left span{float:left; width:100%; height:1px; margin-top:11px; background:#fff;}
.section.footer .inner .left .content{float:left; padding:85px 0 0 85px; text-transform:uppercase;}
.section.footer .inner .left .social {margin-bottom:50px;}
.section.footer .inner .left .social a{display:inline-block; width:32px; height:36px; background-size:32px 32px; margin:0 6px 0 0; vertical-align:top; opacity:0; opacity:1 \9; -webkit-animation:fadeIn 2s ease-in 1 forwards; animation:fadeIn 2s ease-in 1 forwards;}
.section.footer .inner .left .social a.linkedin{background:url(/img/icons/social/linkedin.png) no-repeat center 0px; -webkit-animation-delay:0.1s; animation-delay:0.1s; width:20px;}
.section.footer .inner .left .social a.youtube{background:url(/img/icons/social/youtube.png) no-repeat center; -webkit-animation-delay:0.3s; animation-delay:0.3s;}
.section.footer .inner .left .social a.vimeo{background:url(/img/icons/social/vimeo.png) no-repeat center; -webkit-animation-delay:0.6s; animation-delay:0.6s; margin:0;}
.section.footer .inner .left .social a.google{background:url(/img/icons/social/google+.png) no-repeat center; -webkit-animation-delay:0.9s; animation-delay:0.9s;}
.section.footer .inner .left .social a.instagram{background:url(/img/icons/social/instagram.png) no-repeat center; -webkit-animation-delay:1.2s; animation-delay:1.2s;}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.section.footer .inner .left .social a.linkedin{background:url(/img/icons/social/linkedin@2x.png) no-repeat center 0px; background-size:32px 32px;}
.section.footer .inner .left .social a.youtube{background:url(/img/icons/social/youtube@2x.png) no-repeat center; background-size:32px 32px;}
.section.footer .inner .left .social a.vimeo{background:url(/img/icons/social/vimeo@2x.png) no-repeat center; background-size:32px 32px;}
.section.footer .inner .left .social a.google{background:url(/img/icons/social/google+@2x.png) no-repeat center; background-size:32px 32px; margin:0;}
.section.footer .inner .left .social a.instagram{background:url(/img/icons/social/instagram@2x.png) no-repeat center; background-size:32px 32px;}
}
.section.footer .inner .right{float:left; width:38%;}
.section.footer .inner .right h2{color:#fff; margin:0 0 60px;}
.section.footer .inner .right p.gonner{display:none;}
.section.footer .inner a{color:#fff;}
.section.footer .inner a:hover{text-decoration:underline;}
@media screen and (max-width:1440px) {
.section.footer .inner{font-size:15px; line-height:32px;}
.section.footer .inner .left{width:50%;}
.section.footer .inner .right{width:48%;}
}
@media screen and (max-width:1024px) {
.section.footer .inner{padding:120px 0 80px; font-size:14px; line-height:28px;}
.section.footer .inner .left{width:46%;}
.section.footer .inner .right{width:52%;}
}
@media screen and (max-width:750px) {
.section.footer .inner{padding:60px 0;}
.section.footer .inner .left{display:none;}
.section.footer .inner .right{width:76%; margin:0 12%;}
.section.footer .inner .right h2{margin:0 0 30px;}
.section.footer .inner .right p.gonner{display:block;}
}

/* bottom */
.section.bottom {padding:45px 0 60px;}
.section.bottom .inner{float:left; width:100%;}
.section.bottom .inner p{text-align:center; font-size:13px; line-height:30px; color:#000; font-weight:300; letter-spacing:1px;}
.section.bottom .inner p span{text-transform:uppercase;}
@media screen and (max-width:1440px) {
.section.bottom .inner p{font-size:12px; line-height:28px;}
}
@media screen and (max-width:1024px) {
.section.bottom .inner p{font-size:11px; line-height:24px;}
}
@media screen and (max-width:1010px) {
.section.bottom {padding:35px 0 50px;}
.section.bottom .inner{width:80%; margin:0 10%;}
}
@media screen and (max-width:750px) {
.section.bottom {padding:20px 0 35px;}
.section.bottom .inner{width:88%; margin:0 6%;}
}