@charset "utf-8";
* {margin: 0px;padding: 0px;box-sizing: border-box;}




/***************************************/
/*                                     */
/*         V O O R   A L L E S         */
/*                                     */
/*             vanaf  768px            */
/*                                     */
/***************************************/

@media screen and (min-width: 768px) {
    
    html {
        overflow-x: hidden;
        background-image: url(../data/tekening/achter.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
    }
    header {
        position: fixed;
        background-color: #283892;
        width: 100vw;
        height: 6.8vw;
        padding-left: 7.5vw;
        padding-top: 2vw;
        top: 0;
        z-index: 888;
    }
    #menu ul li {
        float: left;
        color: #fff;
        padding: 1.65vw 1vw;
        border-right: 1px solid rgba(0,0,0,.2);
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10);
    }
    #menu ul li:hover {
        background-color: rgba(40,56,146,0.8);
        box-shadow: 0 0 10px rgba(173,182,233,0.8);
    }
    .logo {
        position: absolute;
        background-image: url(../data/tekening/logo.png);
        background-repeat: no-repeat;
        background-size: 23vw;
        background-position: center;
        background-color: #fff;
        width: 25vw;
        height: 13.5vw;
        margin-left: 53.5vw;
        top: 0vw;
    }
    .fixed {
        position: fixed;
        display: block;
        background-color: rgba(51,51,51,0.8);
        width: 100vw;
        height: 4.5vw;
        z-index: 998;
        top: 0;
        -webkit-box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0,  0, 0, 0.3);
        -moz-box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0, 0, 0, 0.3);
    }


}





/***************************************/
/*                                     */
/*  V O O R   M O B I E L  (PORTRAIT)  */
/*                                     */
/*              tm  767px              */
/*                                     */
/***************************************/

@media (max-width: 767px) and (orientation: portrait) {
    
    html {
        overflow-x: hidden;
        background-image: url(../data/tekening/achter.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
    }   
    header {
        position: relative;
        background-color: #283892;
        width: 100vw;
        height: 18vw;
        padding-left: 7.5vw;
        padding-top: 2vw;
        top: 0;
        z-index: 888;
    }
    header nav {
        display: none;
    }
    #menu {
        margin-left: 7.5vw;
    }
    #menu ul li {
        float: left;
        padding: 1.65vw 1vw;
        border-right: 1px solid rgba(0,0,0,.2);
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10);
    }
    .logo {
        display: block;
        background-image: url(../data/tekening/logo.png);
        background-repeat: no-repeat;
        background-size: 37vw;
        background-position: center;
        background-color: #fff;
        width: 45vw;
        height: 25vw;
        margin-left: 20.5vw;
        margin-top: 1.5vw;
    }
    .fixed {
        position: fixed;
        display: block;
        background-color: rgba(51,51,51,0.8);
        width: 100vw;
        height: 4.5vw;
        z-index: 998;
        top: 0;
        -webkit-box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0,  0, 0, 0.3);
        -moz-box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0, 0, 0, 0.3);
    }
}







/***************************************/
/*                                     */
/*  V O O R   M O B I E L  (LANDSCAPE) */
/*                                     */
/*              tm  767px              */
/*                                     */
/***************************************/

@media (max-width: 767px) and (orientation: landscape) {
    
    html {
        overflow-x: hidden;
        background-image: url(../data/tekening/achter.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
    }   
    header {
        position: relative;
        background-color: #283892;
        width: 100vw;
        height: 7vw;
        padding-left: 7.5vw;
        padding-top: 1vw;
        top: 0;
        z-index: 888;
    }
    header nav {
        display: none;
    }
    #menu {
        margin-left: 7.5vw;
    }
    #menu ul li {
        float: left;
        padding: 1.65vw 1vw;
        border-right: 1px solid rgba(0,0,0,.2);
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10);
    }
    .logo {
        display: block;
        background-image: url(../data/tekening/logo.png);
        background-repeat: no-repeat;
        background-size: 19vw;
        background-position: center;
        background-color: #fff;
        width: 22vw;
        height: 11vw;
        margin-left: 31.5vw;
        margin-top: 1.5vw;
    }
    .fixed {
        position: fixed;
        display: block;
        background-color: rgba(51,51,51,0.8);
        width: 100vw;
        height: 4.5vw;
        z-index: 998;
        top: 0;
        -webkit-box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0,  0, 0, 0.3);
        -moz-box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 -0.2vw 0.4vw 0 rgba(0, 0, 0, 0.3);
    }
}