/* VARIABLES */
/* MIXIN */
/* FONTFACE */
@font-face {
  font-family: 'museo500';
  src: url("../fonts/museo500-regular-webfont.eot");
  src: url("../fonts/museo500-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/museo500-regular-webfont.woff") format("woff"), url("../fonts/museo500-regular-webfont.ttf") format("truetype"), url("../fonts/museo500-regular-webfont.svg#museo500") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'museo300';
  src: url("../fonts/museo300-regular-webfont.eot");
  src: url("../fonts/museo300-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/museo300-regular-webfont.woff") format("woff"), url("../fonts/museo300-regular-webfont.ttf") format("truetype"), url("../fonts/museo300-regular-webfont.svg#museo300") format("svg");
  font-weight: normal;
  font-style: normal; }

/* GENERAL CSS */
html, body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", verdana, sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  color: #2a2a2a; }

html {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  height: 100%; }

body {
  width: 100vw;
  overflow-x: hidden; }

footer {
  background: #85d9ee;
  clear: both;
  float: none;
  width: 100%;
  color: #FFFFFF; }
  footer #logos {
    padding: 20px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    flex-direction: row; }
    @media all and (max-width: 480px) {
      footer #logos {
        flex-direction: column;
        align-content: space-around; } }
    footer #logos a {
      color: #FFFFFF;
      font-size: 2em;
      text-decoration: none;
      font-family: 'museo500', sans-serif; }
  footer #uitleg #theshift, footer #uitleg #weconnect, footer #uitleg #kdg, footer #uitleg #jaar {
    display: none; }
  footer #uitleg p {
    padding: 20px 0;
    width: 50%;
    font-size: 0.8em;
    text-align: center;
    margin: 0 auto;
    display: block; }
    footer #uitleg p .groot {
      font-family: 'museo500', sans-serif;
      color: #FFFFFF;
      font-size: 2em; }
  footer #uitleg a, footer #uitleg h3 {
    color: #FFFFFF; }

.fullwidth {
  width: 100%; }

.centerTekst {
  text-align: center; }

a {
  color: #85d9ee;
  text-decoration: underline; }
  a:hover {
    color: #85d9ee;
    text-decoration: none; }

.smallscreen {
  display: none; }
  @media all and (max-width: 768px) {
    .smallscreen {
      display: block; } }

.bigscreen {
  display: block; }
  @media all and (max-width: 768px) {
    .bigscreen {
      display: none; } }

.smallscreeni {
  display: none; }
  @media all and (max-width: 768px) {
    .smallscreeni {
      display: inline; } }

.bigscreeni {
  display: inline; }
  @media all and (max-width: 768px) {
    .bigscreeni {
      display: none; } }

/* TYPO ------------------------------------ */
h1 {
  color: #38adcc;
  font-family: 'museo500';
  margin: 0;
  padding: 0;
  font-size: 1.8em; }

h2 {
  color: #38adcc;
  font-family: 'museo500';
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 1.4em; }
  @media all and (max-width: 768px) {
    h2 {
      font-size: 1.2em; } }

h3 {
  color: #FFFFFF;
  font-family: 'museo500';
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 1.2em; }

p {
  /*font-size: 0.9em;*/ }

/* NAVIGATIE ------------------------------------ */
nav#bigNav {
  width: 100vw;
  background-color: rgba(133, 217, 238, 0.95);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  /*padding-bottom: 10px;*/ }
  @media all and (max-width: 768px) {
    nav#bigNav {
      display: none; } }
  nav#bigNav .breedte-vierkant {
    width: 25vw;
    text-align: center;
    float: left; }
    @media all and (max-width: 768px) {
      nav#bigNav .breedte-vierkant {
        width: 100vw;
        text-align: center;
        float: none;
        clear: both; } }
  nav#bigNav #logoNav {
    width: 250px;
    margin-left: 20px;
    margin-right: auto;
    opacity: 1; }
  nav#bigNav section {
    position: absolute;
    left: 25vw;
    width: 75vw;
    text-align: left; }
    @media all and (max-width: 768px) {
      nav#bigNav section {
        position: relative;
        width: 100vw;
        text-align: center;
        left: 0; } }
    nav#bigNav section ul {
      display: block;
      margin: 0;
      padding: 0; }
      nav#bigNav section ul li {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-block;
        padding: 10px 20px; }
        @media all and (max-width: 768px) {
          nav#bigNav section ul li {
            display: block;
            width: 100vw;
            text-align: center;
            float: none;
            clear: both;
            height: 20px; } }
        nav#bigNav section ul li a {
          color: #FFFFFF;
          text-decoration: none;
          font-family: 'museo500';
          font-size: 1em; }
  nav#bigNav ul#top {
    border-bottom: rgba(255, 255, 255, 0.3) 1px solid; }
    nav#bigNav ul#top a {
      font-size: 1.2em; }

#home nav#bigNav {
  width: 100vw;
  background-color: rgba(133, 217, 238, 0);
  position: fixed;
  top: -50px;
  /* JS */ }
  #home nav#bigNav #logoNav {
    opacity: 0;
    /* JS */ }
  #home nav#bigNav section {
    position: absolute;
    left: 0vw;
    width: 100vw;
    text-align: center; }

nav#smallNav {
  display: none; }
  @media all and (max-width: 768px) {
    nav#smallNav {
      display: block;
      width: 100vw;
      background-color: rgba(133, 217, 238, 0.95);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      text-align: center; } }
  nav#smallNav #logoSmallNav {
    width: 25vw;
    max-width: 125px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px; }
  nav#smallNav #hamburger {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 20px; }
    nav#smallNav #hamburger div[id*="lijn"] {
      width: 20px;
      height: 3px;
      border-radius: 2px;
      background: #FFFFFF;
      margin-bottom: 4px; }
  nav#smallNav ul {
    display: block;
    margin: 0;
    padding: 0; }
    nav#smallNav ul li {
      list-style: none;
      margin: 0;
      padding: 0; }
      nav#smallNav ul li a {
        color: #FFFFFF;
        text-decoration: none;
        font-family: 'museo500';
        font-size: 0.9em;
        display: block;
        padding: 5px;
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.2); }

/* HOME ----------------------------------------- */
header {
  width: 100vw;
  height: 100vh;
  background: url(../img/bg_plein.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed; }
  header a#pijlscroll {
    position: absolute;
    bottom: 20px;
    left: 48%;
    color: #FFFFFF; }
  header #container {
    position: relative;
    width: 600px;
    top: 20vh;
    margin-left: auto;
    margin-right: auto;
    height: 50vh;
    text-align: center; }
    @media all and (max-width: 768px) {
      header #container {
        width: 320px; } }
    header #container #logo {
      position: relative;
      width: 50%;
      margin-bottom: 60px;
      opacity: 0;
      /* JS */ }
      @media all and (max-width: 768px) {
        header #container #logo {
          width: 70%;
          margin-bottom: 30px; } }
    header #container span {
      display: inline-block; }
      header #container span p {
        display: block;
        position: relative;
        top: 15px;
        margin: 0 20px;
        font-family: 'museo500';
        color: #85d9ee;
        font-size: 4em; }
    header #container #btnand {
      opacity: 0; }
      @media all and (max-width: 768px) {
        header #container #btnand {
          display: none; } }
    header #container a#btncommunicatie, header #container a#btnevenementen {
      color: #FFFFFF;
      position: relative;
      bottom: 0;
      font-family: 'museo500';
      font-size: 1.2em;
      letter-spacing: 0.05em;
      box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.2);
      opacity: 0;
      /* JS */
      text-decoration: none; }
      header #container a#btncommunicatie button, header #container a#btnevenementen button {
        padding: 12px 26px;
        background: rgba(133, 217, 238, 0.95);
        border: 1px solid #FFFFFF;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
        @media all and (max-width: 768px) {
          header #container a#btncommunicatie button, header #container a#btnevenementen button {
            width: 280px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 20px;
            display: block;
            text-decoration: none; } }
        header #container a#btncommunicatie button i, header #container a#btnevenementen button i {
          text-shadow: none;
          margin-right: 10px; }

#communicatie, #evenementen {
  position: relative;
  clear: both;
  float: none;
  top: 100vh;
  width: 100vw;
  background: #85d9ee;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  /* BG PICTURES*/
  /* BG PICTURES*/ }
  #communicatie a.button, #evenementen a.button {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9em; }
  #communicatie h3, #evenementen h3 {
    padding: 20px 0 10px 30px;
    /*display: block;
		width:150px;
		text-align: center;
		margin: 0 auto;*/ }
  #communicatie figcaption h3, #evenementen figcaption h3 {
    padding: 0; }
  #communicatie .grid, #evenementen .grid {
    background: #85d9ee;
    border-top: 1px solid rgba(255, 255, 255, 0.5); }
  #communicatie section, #evenementen section {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    /* background-color:rgba(133,217,238,0.9); BLAUW*/
    /*background: rgba(138,220,125,0.9); GROEN */
    position: absolute;
    top: 100%;
    left: 0;
    text-align: center;
    /*
			a{
			display: none;
			position: absolute;
			bottom:10%;
			left:15%;
			width:70%;
			border: 1px solid #FFFFFF;
			text-decoration:none;
			color:#FFFFFF;
			font-size:0.9em;
			padding:10px;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
		}
		
		a:hover{
			background: rgba(255,255,255,0.3);
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
		}

		*/ }
    #communicatie section figcaption, #evenementen section figcaption {
      position: relative;
      display: none;
      top: 30%;
      margin-top: 10px; }
      #communicatie section figcaption p, #communicatie section figcaption h3, #evenementen section figcaption p, #evenementen section figcaption h3 {
        color: #666666; }
    #communicatie section a, #evenementen section a {
      display: none;
      position: absolute;
      bottom: 10%;
      left: 15%;
      width: 70%;
      border: 1px solid #666666;
      text-decoration: none;
      color: #666666;
      font-size: 0.9em;
      padding: 10px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
    #communicatie section a:hover, #evenementen section a:hover {
      background: rgba(133, 217, 238, 0.9);
      color: #FFFFFF;
      border: 1px solid #85d9ee;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
  #communicatie .vierkant, #evenementen .vierkant {
    width: 25vw;
    height: 25vw;
    max-height: 300px;
    padding: 30px;
    background: #85d9ee no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    float: left;
    overflow: hidden; }
    @media all and (max-width: 970px) {
      #communicatie .vierkant, #evenementen .vierkant {
        width: 50vw;
        height: 50vw; } }
    @media all and (max-width: 480px) {
      #communicatie .vierkant, #evenementen .vierkant {
        width: 100vw;
        height: 100vw; } }
    #communicatie .vierkant button, #evenementen .vierkant button {
      background: none !important;
      border: none;
      padding: 0 !important;
      color: #FFFFFF;
      font-family: 'museo500';
      text-decoration: none;
      font-size: 0.9em; }
    #communicatie .vierkant i, #evenementen .vierkant i {
      font-size: 0.8em;
      margin-right: 10px; }
  #communicatie .verticaal, #evenementen .verticaal {
    width: 25vw;
    height: 50vw;
    max-height: 600px;
    background: #85d9ee no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    float: left;
    overflow: hidden; }
    @media all and (max-width: 970px) {
      #communicatie .verticaal, #evenementen .verticaal {
        width: 50vw;
        height: 100vw; } }
    @media all and (max-width: 480px) {
      #communicatie .verticaal, #evenementen .verticaal {
        width: 100vw;
        height: 100vw; } }
  #communicatie .horizontaal, #evenementen .horizontaal {
    width: 50vw;
    height: 25vw;
    max-height: 300px;
    background: #85d9ee no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    float: left;
    overflow: hidden; }
    @media all and (max-width: 970px) {
      #communicatie .horizontaal, #evenementen .horizontaal {
        width: 50vw;
        height: 50vw; } }
    @media all and (max-width: 480px) {
      #communicatie .horizontaal, #evenementen .horizontaal {
        width: 100vw;
        height: 100vw; } }
  #communicatie #beeld, #evenementen #beeld {
    background-image: url(../img/c_beeld_2_t.jpg); }
  #communicatie #digitaal, #evenementen #digitaal {
    background-image: url(../img/c_digitaal_5_t.jpg); }
  #communicatie #film, #evenementen #film {
    background-image: url(../img/c_video_4_t.jpg); }
  #communicatie #games, #evenementen #games {
    background-image: url(../img/c_games_3_t.jpg); }
  #communicatie #infographics, #evenementen #infographics {
    background-image: url(../img/c_infographics_1_t.jpg); }
  #communicatie #onsite, #evenementen #onsite {
    background-image: url(../img/c_onsite_1_t.jpg); }
  #communicatie #uitnodiging, #evenementen #uitnodiging {
    background-image: url(../img/c_uitnodiging_1_t.jpg); }
  #communicatie #evonik_amm, #evenementen #evonik_amm {
    background-image: url(../img/evonike_odd_5_t.jpg); }
  #communicatie #evonik_odd, #evenementen #evonik_odd {
    background-image: url(../img/evonike_amm_1_t.jpg); }
  #communicatie #gezinsbond, #evenementen #gezinsbond {
    background-image: url(../img/gezinsbond_13_t.jpg); }
  #communicatie #ibm_scc, #evenementen #ibm_scc {
    background-image: url(../img/ibm_sc_1_t.jpg); }
  #communicatie #ibm_sc, #evenementen #ibm_sc {
    background-image: url(../img/ibm_nl_1_t.jpg); }
  #communicatie #indaver, #evenementen #indaver {
    background-image: url(../img/indaver_16_t.jpg); }
  #communicatie #inkendaal, #evenementen #inkendaal {
    background-image: url(../img/inkendaal_8_t.jpg); }
  #communicatie #jj, #evenementen #jj {
    background-image: url(../img/jj_10_t.jpg); }
  #communicatie #pg-up, #evenementen #pg-up {
    background-image: url(../img/pg-up_12_t.jpg); }
  #communicatie #pg-kole, #evenementen #pg-kole {
    background-image: url(../img/pg-kole_2_t.jpg); }
  #communicatie #pianc, #evenementen #pianc {
    background-image: url(../img/planc_5.jpg); }
  #communicatie #solvay_planckendaal, #evenementen #solvay_planckendaal {
    background-image: url(../img/solvay_plankendael_6_t.jpg); }
  #communicatie #solvay, #evenementen #solvay {
    background-image: url(../img/solvay_br_13_t.jpg); }
  #communicatie #stadgent, #evenementen #stadgent {
    background-image: url(../img/stadgent_3.jpg); }
  #communicatie #wenz, #evenementen #wenz {
    background-image: url(../img/wenz_3_t.jpg); }

/* DETAIL --------------------------------------- */
#subnav {
  position: relative;
  margin-top: 92px;
  padding: 20px;
  border-bottom: 1px solid rgba(133, 217, 238, 0.5); }
  #subnav a {
    text-decoration: none; }
    #subnav a:hover {
      color: #666666; }
  #subnav section {
    width: 25%;
    display: block;
    float: left;
    color: #85d9ee;
    margin-top: 9px; }
    @media all and (max-width: 768px) {
      #subnav section {
        width: 7%; } }
    #subnav section#volgende {
      text-align: right; }
  #subnav h1 {
    width: 50%;
    display: block;
    float: left;
    padding-left: 10px; }
    @media all and (max-width: 768px) {
      #subnav h1 {
        font-size: 1.4em;
        text-align: center;
        width: 85%; } }

#content {
  /*margin-top:92px;*/
  padding: 20px;
  padding-bottom: 40px;
  width: 100%;
  position: relative;
  font-size: 0.9em; }
  #content .kernwoorden {
    width: 20%;
    min-height: 80px;
    float: left;
    margin-right: 6%;
    color: #38adcc;
    font-size: 0.9em; }
    @media all and (max-width: 768px) {
      #content .kernwoorden {
        min-height: 0px;
        width: 90%;
        float: none;
        clear: both;
        margin-right: 5%; } }
    #content .kernwoorden ul li {
      font-size: 0.9em; }
  #content .kolom {
    width: 30%;
    float: left;
    margin-right: 5%; }
    @media all and (max-width: 768px) {
      #content .kolom {
        width: 90%;
        float: none;
        clear: both;
        margin-right: 5%; } }

#referenties #content, #missie #content {
  padding: 20px;
  padding-bottom: 40px;
  width: 75%;
  left: 25%;
  margin-top: 92px;
  position: relative; }
  @media all and (max-width: 768px) {
    #referenties #content, #missie #content {
      width: 100%;
      left: 0; } }
  #referenties #content .kolom, #missie #content .kolom {
    width: 45%;
    float: left;
    margin-right: 5%; }
    @media all and (max-width: 768px) {
      #referenties #content .kolom, #missie #content .kolom {
        width: 90%;
        float: none;
        clear: both;
        margin-right: 5%; } }

#beelden {
  margin: 0;
  padding: 0; }
  #beelden img, #beelden figure {
    width: 25%;
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    float: left;
    line-height: 0;
    font-size: 0;
    position: relative; }
    #beelden img img, #beelden figure img {
      width: 100%; }
    #beelden img figcaption, #beelden figure figcaption {
      width: 100%;
      background: rgba(0, 0, 0, 0.9);
      height: 80px;
      padding-top: 20px;
      position: absolute;
      bottom: 0;
      color: #FFFFFF;
      text-align: center;
      font-size: 14px;
      line-height: 10px; }
    @media all and (max-width: 768px) {
      #beelden img, #beelden figure {
        width: 50%; } }
    @media all and (max-width: 480px) {
      #beelden img, #beelden figure {
        width: 100%; } }
  #beelden img[src*="_b.jpg"] {
    width: 50%; }

/* REFERENTIES */
#referenties #beelden {
  margin: 0;
  padding: 0; }
  #referenties #beelden img {
    width: 10%;
    display: block;
    border: 0;
    margin: 0 1.20% 0 1.20%;
    padding: 0;
    float: left;
    line-height: 0;
    font-size: 0; }
    @media all and (max-width: 768px) {
      #referenties #beelden img {
        width: 20%; } }
    @media all and (max-width: 480px) {
      #referenties #beelden img {
        width: 40%; } }

/* FANCY BOX */
.fancybox-overlay {
  /*z-index: 10000!important;*/
  background: rgba(255, 255, 255, 0.9) !important; }

.fancybox-skin {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 0px !important;
  background: #000000 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important; }

/* CLEARFIX CSS*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

.clearfix {
  display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* close commented backslash hack */