@charset "utf-8";
/* CSS Document (Zero Sanity) */
@font-face {
    font-family: 'ZeroSanity';
    src: url('../font/Code_Pro_Demo-webfont.eot');
    src: url('../font/Code_Pro_Demo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Code_Pro_Demo-webfont.woff2') format('woff2'),
         url('../font/Code_Pro_Demo-webfont.woff') format('woff'),
         url('../font/Code_Pro_Demo-webfont.ttf') format('truetype'),
         url('../font/Code_Pro_Demo-webfont.svg#code_pro_demoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html { 
    height: 100%;
    margin: 0;
   overflow: hidden;
    padding: 0;
    width: 100%;
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
    background-attachment: fixed;  
    background-size: cover;
}

body { margin:0px; padding:0px;} /* Zorgt ervoor dat de default windowpadding wordt gereset naar 0 */

a {
  color:#e0ded2;
  text-decoration:none;
}

#menu {
	color:#FFF;
	line-height:50px;
	font-family: "ZeroSanity";
	font-size:50px;
	text-transform:uppercase;
	float:right;
    text-align:right;
    margin-right:50px;
}

#menu ul{
    list-style-type: none;
}

li{
      -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  transition:.2s;
}

li:hover{

    border-right:8px solid #e0ded2;
    padding-right:10px;
}

#footer{
    width:100%;
    position:fixed;
    bottom:0;
    margin:0 auto;
    text-align:center;
    padding-bottom:10px;
}
/* ----------- iPhone 4 and 5 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2){
    body{
        -webkit-text-size-adjust: 100%;
    }
    
    a{
         -o-transition:0s;
          -ms-transition:0s;
          -moz-transition:0s;
          -webkit-transition:0s;
          transition:0s;
    }    
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    html{
        background-image: url("../img/background-mob.jpg");
    }
    #menu{
        font-size:70px;
        line-height:70px;
        float:none;
        width:100%;
        text-align:center;
        margin:0;
        position:absolute;
        bottom:0;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.77);
    }  
    
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      html{
        background-image: url("../img/background-mid.jpg");
    }
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    body{
        -webkit-text-size-adjust: 100%;
    }
    
    li{
         -o-transition:0s;
          -ms-transition:0s;
          -moz-transition:0s;
          -webkit-transition:0s;
          transition:0s;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    html{
        background-image: url("../img/background-mob.jpg");
    }
    
    #menu{
        font-size:70px;
        line-height:70px;
        float:none;
        width:100%;
        text-align:center;
        margin:0;
        position:absolute;
        bottom:0;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.77);
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
      html{
        background-image: url("../img/background.jpg");
    }
    
    #menu{
        font-size:36px;
        line-height:36px;
    }
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    body{
        -webkit-text-size-adjust: 100%;
    }
    
    li{
         -o-transition:0s;
          -ms-transition:0s;
          -moz-transition:0s;
          -webkit-transition:0s;
          transition:0s;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
        html{
        background-image: url("../img/background-mob.jpg");
    }
      
    #menu{
        font-size:70px;
        line-height:70px;
        float:none;
        width:100%;
        text-align:center;
        margin:0;
        position:absolute;
        bottom:0;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.77);
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    html{
        background-image: url("../img/background.jpg");
    }
    
    #menu{
        font-size:36px;
        line-height:36px;
    }
}

/* ----------- Tablet ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
    body{
        -webkit-text-size-adjust: 100%;
    }
    
    li{
         -o-transition:0s;
          -ms-transition:0s;
          -moz-transition:0s;
          -webkit-transition:0s;
          transition:0s;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
    html{
        background-image: url("../img/background-mid.jpg");
    }
    #menu{
        font-size:36px;
        line-height:36px;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
    html{
        background-image: url("../img/background.jpg");
    }
    #menu{
        font-size:44px;
        line-height:44px;
    }
}