@charset "UTF-8";
@-ms-viewport {width: device-width;}
@-o-viewport{width: device-width;}
@viewport{width: device-width;}
/* CLS fixes */
.HeroBanner.HeroHome{background-image:url(/assets/images/hero-bg/home-hero-luckygym.jpg)}
/* ---- RESET  ---- */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
body{-webkit-text-size-adjust:none}
.red_star{color:red;visibility:hidden;font-size:22px;line-height:15px}
/* ------- BASIC & GENERAL   ---------- */
body,input,select,textarea,h2,h3,h4,h5,h6{font-family:'Open Sans',Arial,sans-serif}
h1{font-family:'Open Sans',Arial,sans-serif}
body,input,select,textarea{font-size:16px;font-weight:400;line-height:1.65em}
a{-moz-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;-webkit-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;-ms-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out}
strong,b{font-weight:bold}
em,i{font-style:italic}
h1,h2,h3,h4,h5,h6{color:#f5a631;font-weight:800;line-height:1em;margin:0 0 .5em}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none;letter-spacing:0}
h1{font-size:66px;line-height:1.2em;padding:0 0 10px 10px;margin:0}
h2{font-size:50px;line-height:1.5em}
h3{font-size:29px;line-height:1.5em}
h4{font-size:1.3em;line-height:1.5em}
h5{font-size:.9em;line-height:1.5em}
h6{font-size:.7em;line-height:1.5em}
sub{font-size:.8em;position:relative;top:.5em}
sup{font-size:.8em;position:relative;top:-.5em}
hr{border:0;border-bottom:solid 2px #e5e5e5;margin:2em 0}
h1.smaller{font-size:4.2em;line-height:1.5em;font-weight:400}
hr.major{margin:3em 0}
pre{-webkit-overflow-scrolling:touch;background:#f8f8f8;border-radius:6px;border:solid 1px #e5e5e5;font-family:monospace;font-size:.9em;line-height:1.75em;margin:0 0 2em;overflow-x:auto;padding:1em 1.5em}
code{background:#f8f8f8;border-radius:6px;border:solid 1px #e5e5e5;font-family:monospace;font-size:.9em;margin:0 .25em;padding:.25em .65em}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.clear{clear:both;float:none;width:100%}
.mobHide{display:block}
.mobShow{display:none}
.clearfix{display:block}
.clearfix::after{content:"";clear:both;display:table}
.CircleImg{border-radius:50%}
.img-responsive{max-width:100%}
.padding{padding:70px 10px}
p.padding{padding:0 0 20px}
.telefoonnummer{white-space:nowrap}
p {    font-size: 15px;
    line-height: 23px;}
/* ------- SITES & WIDTHS  ------- */
.site-width{max-width:1000px;margin:0 auto;padding:0 10px}
#nav-trigger,#nav-trigger span{width:50px;height:49px}
#header, #header .logo{/*height: 50px;*/}
/* -------- COLORS  -------- */
body{background:#fff;color:#333}
input,select,textarea{color:#333}
h3{color:#333}
a{color:#333;text-decoration:underline}
a:hover{color:#f5a631}
/* Brand colors */
.vw-geel {color:#f5a631}
.vw-geel-bg {background-color:#f5a631}
.vw-wit {color:#fff}
.vw-wit-bg {background-color:#fff}

/* --- BUTTONS  --- */
.button { position: relative;    display: block; overflow: visible; width: 200px; margin-top: 20px; margin-right: auto;    margin-left: auto;    padding: 20px 0px; background-color: #f5a631; box-shadow: 1px 1px 9px 0 rgb(0 0 0 / 50%);    opacity: 1;    -webkit-transition: all 500ms ease;    transition: all 500ms ease; color: #fff;    font-weight: 700;    text-align:center;text-decoration:none; text-transform:uppercase}
.button:hover {    border-radius: 24px;    background-color: #f5a631;    opacity: 1;    color: #fff;}

.button.donker {background-color: #2c2d33; color:#fff}
.button.donker:hover {}

.bgColor1{background-color:#fff}
.bgColor2{background-color:#333}
.bgColor3{background-color:#000;color:#fff}

.bgWhite{background-color:#fff;color:#333}
.bgColor5,.bgColor5 h2,.bgColor5 h3{background-color:#f04c23;color:#fff}


/* ---- HEADER  -- */
#header{width:100%;position:absolute;padding:0;display:block;clear:both;z-index:100;
background-color: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.62)), to(transparent));
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent);}
#header .flag{float:right;padding:13px 10px 8px}
#header .flag img{width:28px;height:auto}
/* --- MENU & NAV  -- */
#nav{ position:relative; font-size:13px;font-weight:800;padding:0;z-index:999; text-align:center}
#nav-main li.back-link{display:none}

#nav-main{background-color:inherit;padding:0}
#nav-main ul{list-style-type:none;margin:0;padding:0;}
#nav-main li{display:inline-block}
#nav-main a{color:#fff;padding:0px;text-decoration:none; margin:10px;text-transform: uppercase;letter-spacing: 1px; display:inline-block}
#nav-main a:hover{color:#f5a631}
#nav-main li.active a{color:#1871d7}
#nav-main li.active a:hover{background-color:#fff;color:#ef4c23}
#nav-main .win-voucher a {padding: 0;
    margin: 0;}

#nav-main a.meld-button {     border-radius: 3px; position: relative;  display: block;     padding: 8px 12px 8px 12px;background-color: #f5a631; box-shadow: 1px 1px 9px 0 rgb(0 0 0 / 50%);    opacity: 1;    text-align:center;text-decoration:none; text-transform: uppercase}
#nav-main a.meld-button:hover {  color: #2c2d33;    }
.win-voucher { width:260px; vertical-align: -83px;  display: inline-block;}
.win-voucher img { width:100%; height:auto}
/*
#nav-main .dropdown-content a.oranjeMenuItem{background-color:#ef4c23;color:#fff}
#nav-main .dropdown-content a.blauwMenuItem{background-color:#09f;color:#fff}
#nav-trigger{display:none;text-align:right}
#nav-trigger span{display:inline-block;padding:0;color:#000;cursor:pointer;line-height:0}
#nav-trigger span:after{display:inline-block;content:"\f0c9";font-family:FontAwesome;font-size:24px;padding:0;line-height:49px;width:50px;text-align:center}
#nav-trigger span:hover{background-color:#EAEAEA}
#nav-trigger span.open:after{content:"\f00d"}
#nav-mobile{position:absolute;top:49px;left:0;right:0;display:none;z-index:99}
#nav-mobile .fa{display:none}
#nav-mobile ul{padding:0;display:none;list-style-type:none;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;text-align:left;background-color:#fff;border-top:solid 1px #697E8B;font-size:20px}
#nav-mobile li{display:block;float:none;border-bottom:solid 1px #697E8B;background-color:#fff}
#nav-mobile li:last-child{border-bottom:solid 1px #697E8B}
#nav-mobile a{display:block;color:#222;padding:14px 30px;text-decoration:none}
#nav-mobile a:hover{background-color:#ef4c23;color:#fff}
#nav-mobile li.divide{border-top:3px solid #003e7e}*/

/* --- GRID  --- */
.section{clear:both;padding:0}
.col{display:block;float:left;margin:2% 0 2% 2%;padding:8px}
.col:first-child{margin-left:0}
.group:before,.group:after{content:"";display:table}
.group:after{clear:both}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF SIX  */
.span_6_of_6 {	width: 100%;}
.span_5_of_6 {  width: 83%;}
.span_4_of_6 {  width: 66%;}
.span_3_of_6 {  width: 48%;}
.span_2_of_6 {  width: 32%;}
.span_1_of_6 {  width: 15%;}
/*  GRID OF FIVE  */
.span_5_of_5 {	width: 100%;}
.span_4_of_5 {	width: 79%;}
.span_3_of_5 {	width: 59%;}
.span_2_of_5 {	width: 39%;}
.span_1_of_5 {	width: 18.3%;}
/*  GRID OF FOUR  */
.span_4_of_4 {	width: 100%;}
.span_3_of_4 {	width: 73%;}
.span_2_of_4 {	width: 48%;}
.span_1_of_4 {	width: 22%;}


/* ---- HOME HERO    ---- */
.logo{width:100%; display:block;padding:5px;    margin: auto;}
.logo a{display:block;border-bottom:none}
.logo img{width:100%; max-width:250px; height:auto; margin:auto;}
/* ---- HERO BANNERS   ---- */
.HeroBanner{background-attachment:scroll;background-color:#fff;background-position:center center;background-repeat:no-repeat;background-size:cover;color:#fff;padding:50px 0;text-align:left}
.HeroBanner.HeroHome{position:relative;padding:200px 0 100px 0;overflow:hidden;background-image:url(/assets/images/videos/Veiligheidstoppers-background-poster-00001.jpg)}
.HeroBanner #myVideo{position:absolute;min-width:100%;min-height:100%;z-index:3;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.HeroBanner .heroContent{position:relative;z-index:5}
.HeroButtons{width:100%;text-align:center}
.HeroButtonBlock{display:inline-block;text-align:center}

.HeroBanner h1 a {color:#fff; text-decoration:underline;text-shadow: 1px 1px 10px rgb(0 0 0 / 41%);}
.HeroBanner h1 a:hover {    text-shadow: 0 0 29px #fff;}

/* --- VIDEO HERO --- */
.video-container{position:relative;padding-bottom:56.25%;padding-top:0;height:0;overflow:hidden;margin-bottom:30px}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}
.video-two-items{padding-top:30px}  

/* --- HOME   ---- */
/* PROMO BAR */
.promo-bar { color:#fff; }
.promo-bar-bg {  background-color: #131313;background-image: url(../images/construction-bg-2.svg), url(../images/construction-bg-2.svg);
  background-position: -15% center, 115% center;  background-repeat: no-repeat, no-repeat;    background-size: 40%  auto, 40%  auto;
-webkit-box-shadow: inset 0px 2px 3px -1px rgba(0,0,0,0.5),inset 0px -2px 3px 0px rgba(255,255,255,0.5); 
box-shadow: inset 0px 2px 3px -1px rgba(0,0,0,0.5),inset 0px -2px 3px 0px rgba(255,255,255,0.5);
}
.promo-bar-pos {padding:15px;}
.promo-bar a {color:#fff;    margin: 7px 0px 10px;    -webkit-transition: text-shadow 500ms ease;    transition: text-shadow 500ms ease;    color: #fff;    font-size: 25px;    line-height: 29px;    font-weight: 700;    text-transform: uppercase;}
.promo-bar a:hover {    text-shadow: 0 0 29px #fff;}


/* KEN JE BAR */
.ken-je-bar {    font-size: 15px; font-weight:bold}
.ken-items {width: 100%;}
.ken-group {      display: flex;    flex-wrap: wrap;	  align-items: flex-start;	justify-content: center; margin-bottom:30px}
.ken-item-block {      display: inline-block;    max-width: 300px;    flex: 0 0 33.33%;	padding:15px}
.ken-je-bar h3 {        font-size: 21px;   line-height: 36px;    font-weight: 800;    text-transform: uppercase;}


/*  AANMELDEN BAR*/
.aanmelden-bar { background-image:url(../images/aanmelden-topper-bg.jpg);     background-position: 100% 50%;    background-size: cover;    background-attachment: fixed;}
.aanmelden-bar .logo img {max-width:150px;}
.aanmelden-bar h2 {     margin-bottom: 0px;    color: #fff;      text-shadow: 1px 1px 6px #000;}	
.aanmelden-bar .intro{margin-top: 15px;    margin-bottom: 0px;    color: #f5a631;    font-size: 29px;    font-weight: 800;    text-transform: uppercase;
    text-shadow: 1px 1px 6px #000;    line-height: 28px;}
	
.aanmelden-bar.bedankt-pagina { height: 100vh;    padding-top: 155px;}
.contactformulier{margin:auto;max-width:600px;}
.contactformulier div{position:relative}

.contactformulier  input[type=text],.contactformulier  input[type=email],.contactformulier select,.contactformulier textarea{width:100%;  height: 65px;
    margin-bottom: 5px;    border: 3px solid #fff;    border-radius: 4px;    background-color: hsla(0, 0%, 100%, 0.93);    font-family: 'Open Sans', sans-serif;    color: #000;    font-size: 15px;    font-weight: 700;	padding: 8px 12px;}
	
.contactformulier input.button {    border: none; cursor:pointer}
.contactformulier textarea{height: 150px; }
.contactformulier form{background-color:#fff;width:100%}

.red_star{position:absolute;right:10px;top:20px;font-size:34px}

/* VW Loont BAR */
.vw-loont-bar {}
.vw-loont-bar .intro { text-transform:uppercase; font-weight:bold;font-size: 18px; margin-bottom:15px;}
.vw-loont-bar .text-content {}
.vw-loont-bar .checkmark {font-size: 20px;}
.vw-loont-bar .checkmark-list p {margin-bottom: 10px}
/* eervolle vermelding BAR */
.eervol-bar {    
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(245, 166, 49, 0.72)), to(rgba(245, 166, 49, 0.72))), url(../images/superhero-bg.svg);
background-image: linear-gradient(180deg, rgba(245, 166, 49, 0.72), rgba(245, 166, 49, 0.72)), url(../images/superhero-bg.svg);
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;}
.eervol-bar h2 a {color:#fff; text-decoration:underline;text-shadow: 1px 1px 10px rgb(0 0 0 / 41%);}
.eervol-bar h2 a:hover {    text-shadow: 0 0 29px #fff;}
.toppers-group {  display: flex;    flex-wrap: wrap;	  align-items: flex-start;	justify-content: center; margin-bottom:0px}
.topper-item {display: inline-block;    max-width: 300px;    flex: 0 0 33.33%;	padding:15px; color:#fff;font-weight:bold}
.topper-item img {    display: inline-block;    width: 150px;    height: auto;   max-width: 100%; margin: 30px auto 15px auto;border: 4px solid #fff;    border-radius: 90px;    box-shadow: 0 0 12px 0 rgb(255 255 255 / 50%);    -webkit-transition: all 500ms ease;    transition: all 500ms ease;}
.topper-item img:hover {box-shadow: 0 0 12px 0 rgb(0 0 0 / 50%);}

/* disclaimer  vermelding BAR */
.disclaimer-bar {   color:#fff;font-size: 15px;    line-height: 23px;
    background-image: url(../images/barrels.jpg);    background-position: 50% 50%;    background-size: cover;}
.disclaimer-bar .site-width {max-width:600px;}
.disclaimer-bar .vt-logo {width:100%;max-width:150px; height:auto}
.disclaimer-bar .vw-logo{width:100%;max-width:250px; height:auto}
.disclaimer-bar .line{display: block;   margin: 30px 0 10px 0;
    padding-top: 0;   border-top: 1px solid #fff;}
	
.disclaimer-bar .big-arrow-link { 	display: block;    margin-top: 50px;    margin: 0 auto;   width: 45px;    height: 45px;
 border: 2px solid hsla(0, 0%, 100%, 0.3);    border-radius: 3px;    -webkit-transition: background-color 500ms ease;    transition: background-color 500ms ease;}
.disclaimer-bar .big-arrow-link:hover { border-color: #f5a631;
    background-color: #f5a631;}
.disclaimer-bar  .big-arrow-top { width: 100%; padding: 10px;   height: auto;max-width: 100%;    vertical-align: middle;    display: inline-block;}
 .disclaimer-bar p{ text-shadow: 1px 1px 10px rgb(0 0 0 / 41%);}

.smallTxt{font-size:14px;line-height:21px}

.back-to-top-square{position:fixed;bottom:-1px;right:20px;width:40px;height:39px;background-color:#fff;border:1px solid #c5c5c5;border-radius:2px 2px 0 0;z-index:800;float:right;cursor:pointer;font-size:13px;opacity:.8}
.back-to-top-square img{padding:14px;width:100%;height:auto;}
/* -- ANIMATIONS  --- */
.fadeItIn{
-webkit-transition: opacity 1s ease-in;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;}
			
@keyframes fadein {
from { opacity: 0; transform: translateY(50px) }
to   { opacity: 1; transform: translateY(0px)}
}
@keyframes slide-in {
from {left: 100%; width: 100%;}
to {  left: 0%; width: 100%;}
}
@keyframes slide-out {
from {left: 0%; width: 100%;}
to {  left: 100%; width: 100%;}
}

/* --- LAPTOPS  --- */
@media all and (max-width:1100px) {
.promo-bar-bg {  background-color: #131313;background-image: url(../images/construction-bg-2.svg), url(../images/construction-bg-2.svg);
  background-position: -20% center, 120% center;
  background-repeat: no-repeat, no-repeat;
    background-size: 35% auto, 35%  auto;
}
}
@media all and (max-width:950px) {
.promo-bar-pos {
    padding: 8px;
    max-width: 300px;
    margin: auto;
}
.promo-bar a {}
.promo-bar-bg {
    background-color: #131313;
    background-image: url(../images/construction-bg-2.svg), url(../images/construction-bg-2.svg);
    background-position: -30% center, 130% center;
    background-repeat: no-repeat, no-repeat;
    background-size: 53% auto, 53% auto;
}
}
/* --- TABLETS  -- */
@media all and (max-width: 780px) {
h1{font-size:2.5em;line-height:1em}
#header .logo{width:225px;padding:5px 5px 0}

#header .flag{margin-right:54px;margin-top:4px}
/*promo bar fix */
.promo-bar{}
.promo-bar a {font-size: 20px;}

/* NAV 2.0 */
#nav-main li.win-voucher { position:absolute;  top:0;  left: 0; max-width: 238px; display: inline-block;  width: 50%;}
#nav-main li.menu-link {   width:100%; float:right; display: block;     text-align: center; width: 60%;    min-width: 162px;}
#nav-main li.menu-link a {padding: 5px; display: inline-block; margin:0}
#nav-main li.menu-link a.meld-button {max-width:175px;display:inline-block; padding: 5px 10px 5px; margin-top:7px;}
#header {    padding: 8px 0 0 0;}
#nav {    max-width: 600px;    margin: auto;}

}
/* MOB */
@media only screen and (max-width: 580px) {
/*nav */
#nav{margin-bottom:0}
#nav-main li.menu-link {    text-align: right;}
#nav-main li.win-voucher a{   vertical-align: middle;    height: 131px;    justify-content: center;    align-items: center;    display: flex;}

.mobHide{display:none}
.mobShow{display:block}
#nav{margin-bottom:0}
#hero-banner{padding:50px 0}
#hero-banner img{max-width:100%;max-height:100%;width:100%;height:100%}
#hero-banner h1{padding:10px}
.HeroBanner.HeroHome{    padding:150px 0 58px 0; min-height: 620px;n}
/*
.HeroBanner.HeroHome{background-image:url(/assets/images/videos/Veiligheidstoppers-background-poster-00001.jpg)}*/
/* .HeroBanner #myVideo,.HeroBanner video{display:none}*/
h1{font-size:34px;line-height:1em}
h2{font-size:1.8em;line-height: 32px;}
h3{font-size:1.4em;line-height:1.5em}
h4{font-size:1em;line-height:1.5em}
h5{font-size:.9em;line-height:1.5em}
h6{font-size:.7em;line-height:1.5em}
h1.smaller{font-size:3.5em;padding:0}
.col{margin:1% 0}
.span_1_of_6,.span_2_of_6,.span_3_of_6,.span_4_of_6,.span_5_of_6,.span_6_of_6{width:100%}
.span_5_of_5,.span_4_of_5,.span_3_of_5,.span_2_of_5,.span_1_of_5{width:100%}
.span_4_of_4,.span_3_of_4,.span_2_of_4,.span_1_of_4{width:100%}
/*promo bar fix */

.promo-bar a {font-size: 18px;    line-height: 24px;}
.promo-bar-bg {    background-color: #131313;    background-image: url(../images/construction-bg-2.svg), url(../images/construction-bg-2.svg);    background-position: -100% center, 200% center;    background-repeat: no-repeat, no-repeat;    background-size: 66% auto, 66% auto;}
/* KEN JE */
.ken-item-block {   max-width: 220px;    flex: 0 0 50%;	padding:15px}
.ken-item-block p {    font-size: 14px;    line-height: 20px;}
.ken-je-bar .site-width {padding:0}
}
@media only screen and (max-width: 460px) {
h1.smaller{font-size:3em;padding:0}
h1{font-size:28px;line-height:1em}
/* KEN JE */
.ken-item-block {   max-width: 220px;    flex: 0 0 50%;	padding:10px}
.ken-item-block p {    font-size: 14px;    line-height: 20px;}
/* EERVOLLE TOPPERS */
.topper-item {  max-width: 200px;    flex: 0 0 100%;	padding:5px; }
}
@media only screen and (max-width: 359px) {
.HeroBanner.HeroHome {    padding: 100px 0 58px 0; min-height:500px}
.logo img {  width: 100%;    max-width: 200px;}
#nav-main li.win-voucher {width:100%;   vertical-align: inherit;    max-width: inherit; position: relative;    top: inherit;    left: inherit;}
#nav-main li.win-voucher img {max-width:150px;}
#nav-main li.win-voucher a { height:inherit}
#nav-main li.menu-link.informatie {    display: none;}
#nav-main li.menu-link {display: none;    width: 100%;    float: none;    text-align: center;}
}
@media only screen and (max-width: 350px) {
h1,h2,h3,{font-size:24px;line-height:1em}
}
@media only screen and (max-width: 330px) {
.ken-item-block {   max-width: 220px;    flex: 0 0 100%;	padding:15px}
.eervol-bar h2 {font-size: 1.3em;}
.aanmelden-bar .intro {    font-size: 22px;}
h1 {    font-size: 25px;    line-height: 1em;}
}
/* NAV 
#nav-main .dropdown{position:relative;display:inline-block}
#nav-main .dropdown-content{display:none;position:absolute;background-color:#f1f1f1;margin-top:5px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:998}
#nav-main .dropdown-content a{color:#072d58;padding:12px 16px;text-decoration:none;display:block;min-width:226px}
#nav-main .dropdown-content a:hover{background-color:#fff;color:#ef4c23}
#nav-main .dropdown:hover .dropdown-content{display:block;font-weight:400}*/