html { -webkit-text-size-adjust: 100%; position: relative; float: left; font-size: 16px; width: 100%; }

.hidden{width: 0; height: 0; overflow: hidden;}

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, font, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0px;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
  list-style:none;
  text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

body {

  position: relative; float: left; width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size:1em;
  line-height:1.1em;
  color:#000000;
  box-sizing:border-box;
  font-weight: 500;
  background-color: #fff;
  overflow-y: scroll; /* has to be scroll, not auto */
  overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                        supported by Chrome and Opera */

}

input, textarea{font-family: 'Work Sans', sans-serif; font-size: 1em;}
input[type=text]:focus, textarea:focus {
  -webkit-box-shadow:none;
          box-shadow:none;
  outline: none;
}

a{color: inherit; text-decoration: none; }

i, cite, em, var, dfn {
    font-style:normal;
}

b, strong {font-weight: 500; font-family: 'Work Sans', sans-serif;}

ul, li{position: relative;  display: inline-block;}

section, header, main, footer, nav, article, ul, p, img, blockquote, label{position: relative; float: left; width: 100%; display: block; -webkit-box-sizing:border-box; box-sizing:border-box; }
p{ margin-bottom: 0; font-size: 1.2em; line-height: 1.4em;  }
p strong{font-size: 1.5em;}
article p{margin-bottom: 1.8em;}


article p:last-child{margin-bottom: 0;}
p a{color: inherit; text-decoration: underline;}
label{ font-size: 1.5em; line-height: 1.4em; font-family: 'Work Sans', sans-serif; }

article table{font-size: 1.2em; line-height: 1.4em; margin-bottom: 1.1em;}
article table td{padding-right: 1em;}
article img{ margin-bottom: 1.9em;}
/* BASICS */

h1, h2, h3, h4, h5, h6{ position: relative; float: left; width: 100%; display: block; font-weight:400; letter-spacing: -0.024em; line-height: 1.14em; font-family: 'MS900'; }
h1{font-size:3.0em; margin-bottom: 1.15em; }
h2{font-size:3.0em; margin-bottom: 1em;}
h3{font-size:1.5em; margin-bottom: 0.5em;}
h4{font-size:1.5em; margin-bottom: 1em}


/* BLOCKS */

.middle{ position:absolute; left:50%; top: 50%; -webkit-transform:translateY(-50%) translateX(-50%); -ms-transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%);}
.textcenter{text-align: center;}
.leftside{position: relative; float: left!important; width: auto; display: block;}
.rightside{position: relative; float: right!important; width: auto; display: block;}
.textinvert{color: #fff;}

.b15{width: 15%;}
.b16{width: 16.665%;}
.b20{width: 20%;}
.b25{width: 25%;}
.b75{width: 75%; }
.b30{width: 30%;}
.b60{width: 60%; }
.b35{width: 35%;}
.b40{width: 40%;}
.b41{width: 41.6666%;}
.b65{width: 65%; }
.b50{width: 50%;}
.b33{width: 33.33%;}
.b66{width: 66.66%;}
.b100{width: 100%;}

.viceversa .b{float: right!important;}

.videoWrapper {
  position: relative;
  padding-bottom: 41%; /* 16:9 = 56.25% */
  padding-top: 25px;
  height: 0;
  margin-bottom: 3em;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ALL CONTENT */

.main{position: relative; float: left; width: 100%; height: 100vh; min-height: 40em; }
.bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
.bw{position: absolute; display: block; left:50%; top:50%; margin-left: -24.28em; margin-top: 0.4em; transform:translate(-50%,-50%); width: 30em; height:40em; background-image: url(../img/bw.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;}
.logo{position: absolute; display: block; left:50%; top:50%;  transform:translate(-50%,-50%); width: 42.2em; height:10em; background-image: url(../img/logo.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;}
.elements{position: absolute; display: block; width: 100%; height: 100%; top:0; left:0; }
.elements article{position: absolute; display: block; left:50%; top:50%;transform:translate(-50%,-50%); box-sizing:border-box; padding: 0 2em; margin-top: 8em; text-align: center;}
.elements .buttons{position: absolute; width: 100%; text-align: center; display: block; left:50%; top:50%;transform:translate(-50%,-50%);  margin-top: 14.6em; text-align: center;}
.elements .buttons .btn{position: relative; display: inline-block; background-color: #000; font-size: 1.3em; letter-spacing: 0.09em; min-width: 6em; margin-left: 0.5em; margin-bottom: 0.5em; margin-right: 0.5em; text-align: center; color: #fff; padding: 0.25em 1.8em 0.35em; text-transform: uppercase; font-weight: 600; line-height: 1.2em;}
.stickers{position: absolute; display: block; line-height: 1.7em; left:50%; top:50%; margin-top: -5.3em; margin-left: 32em; transform:translate(-50%,-50%); width: 20em; height:20em;}
.stickers .st1{position: absolute; width: 7.4em; height: 7.4em; border-radius: 50%; background-color: #000; color: #fff;}
.stickers .st1 span{position: absolute; left:50%; top:50%;transform:translate(-50%,-50%); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.5em;}
.stickers .st2{position: absolute; left: 6em; top: 5.5em; width: 12em; height: 12em; border-radius: 50%; background-color: #000; color: #fff; text-align: center;}
.stickers .st2 .e1{position: absolute; left:50%; top:50%;transform:translate(-50%,-50%); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: -.5em; font-size: 1.3em; line-height: 1.4em; text-align: center;}
.stickers .st2 .e2{position: absolute; left:50%; top:50%;transform:translate(-50%,-50%); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 0.7em; font-size: 1.3em; white-space: nowrap; text-align: center;}



footer{position: absolute; bottom: 0; width: 100%; height: 2.8em;box-sizing:border-box;padding: 0 2em; font-weight: 600;}
footer br{display: none;}
.floatleft{position: relative; float: left; width: auto;}
.floatright{position: relative; float: right; width: auto;}
footer .floatleft a{margin-right: 2.2em;}
footer .vosselaer{position: absolute; right:0; top:auto; top:-2em;display: block; width: 12em; height:4em; background-image: url(../img/vosselaer.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;}


/* ////// MEDIA QUERIES /////// */


@media screen and (min-width: 1500px) {

  html{font-size: 17px;}

}

@media screen and (min-width: 1700px) {

  html{font-size: 18px;}

}

@media screen and (min-width: 1900px) {

  html{font-size: 19px;}

}

@media screen and (max-width: 1230px) {

  .stickers{margin-left: 28em;}

}

@media screen and (max-width: 1100px) {
 
  .bg{font-size: 0.9em;}

}

@media screen and (max-width: 980px) {

  .bg{font-size: 0.8em;}
  .bw{margin-left: -20em;  opacity: 0.5;}
  .stickers{margin-left: 3em; font-size: 0.8em;margin-top: -17em;}
  .elements .buttons{margin-top: 17em;}
  footer{height: 6em;}
  footer .vosselaer{ margin: 7em auto 0; float: none; position: relative;}
  footer .floatright{width: 100%;}
  footer .floatleft{width: 100%; text-align: center;}
  footer .floatleft a{ float: none; position: relative; display: inline-block; clear: both; margin-right: 0; margin-bottom: 0.3em;}
  footer br{display: block;}
  .main{margin-top: -5em; min-height: 60em;}
 
}

@media screen and (max-width: 800px) {
  
  .bg{font-size: 0.6em;}
  .bw{margin-left: -20em;  opacity: 0.5; margin-top: -40.0em;margin-left: 0em; font-size: 0.6em; opacity: 0.3;}
  .logo{margin-top: -24em;}
  .stickers{margin-left: 3em; font-size: 0.7em;margin-top: -2em;}
  .stickers .st1{margin-top: 8em; margin-left: -4em;}
   .main{margin-top: -7em; min-height: 55em; max-height: 55em; }
   p{font-size: 1em; font-weight: 600; line-height: 1.5em;}
}


@media screen and (max-width: 600px) {
 
 .bw{}
 .elements article{margin-top: 9.6em;}
 .elements .buttons{font-size: 0.9em; margin-top: 18em;}

}

@media screen and (max-width: 530px){
   html{font-size: 15px;}

 
}

@media screen and (max-width: 450px){

  .buttons br{display: block!important;}
  
}

@media screen and (max-width: 420px){

   .bg{font-size: 0.55em;}
   
}

@media screen and (max-width: 375px){

   .bg{font-size: 0.5em;}

}

@media screen and (max-width: 320px){

  html{font-size: 14px;}

}

/* MAX HEIGHT */

@media screen and (max-height: 800px){

  html{font-size: 15px;}
  .buttons br{display: none;}

}

@media screen and (max-height: 700px){
 
}

@media screen and (max-height: 400px){

}

@media screen and (max-height: 350px){
  
}