@media screen and (min-width: 1001px){
body {margin-top: 15px; margin-left: 200px; margin-right: 20px; background-color: #FFFFFF;}
#kop{font-family: 'Open Sans', sans-serif; color: #777777; font-size: 50px; z-index: 20;}
#kop_datum{font-family: 'Open Sans', sans-serif; color: #777777; font-size: 14px; z-index: 20;}
.content{margin-top: 50px}
.link_item{display: inline-block; width: 100px; height: 100px; padding: 8px; margin: 0px 8px 8px 0px; border: solid 1px #dddddd;}

ul{list-style-type: none;}
#het_menu li:nth-child(1){position: fixed; top:  20px; left: -50px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); z-index: 15;}
#het_menu li:nth-child(2){position: fixed; top: 110px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.2s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(3){position: fixed; top: 200px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.4s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(4){position: fixed; top: 295px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.6s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(5){position: fixed; top: 385px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.8s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(6){position: fixed; top: 475px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 1.0s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(7){position: fixed; top: 560px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 1.2s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
.svg_icon{position: absolute; top: 0px; left: 0px; width: 40px; height: 40px; background: transparent; padding: 18px 55px 15px 140px; transition: width 1s, height 1s, padding 1s; z-index; 20;}
.svg_icon:hover{position: absolute; top: 0px; left: 0px; width: 70px; height: 70px; background: transparent; padding: 6px 45px 5px 125px; transition: width 1s, height 1s, padding 1s; z-index; 20;}
}


@media screen and (max-width: 1000px) and (min-width: 601px){
body {margin-top: 10px; margin-left: 190px; margin-right: 15px; background-color: #FFFFFF;}
#kop{font-family: 'Open Sans', sans-serif; color: #777777; font-size: 35px; z-index: 20;}
#kop_datum{font-family: 'Open Sans', sans-serif; color: #777777; font-size: 12px; z-index: 20;}
.content{margin-top: 50px}
.link_item{display: inline-block; width: 90px; height: 90px; padding: 8px; margin: 0px 8px 8px 0px; border: solid 1px #dddddd;}

ul{list-style-type: none;}
#het_menu li:nth-child(1){position: fixed; top:  10px; left: -50px;  width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); z-index: 15;}
#het_menu li:nth-child(2){position: fixed; top: 100px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.2s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(3){position: fixed; top: 190px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.4s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(4){position: fixed; top: 280px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.6s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(5){position: fixed; top: 370px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.8s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(6){position: fixed; top: 460px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 1.0s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(7){position: fixed; top: 550px; left: -255px; width: 225px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 1.2s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
.svg_icon{position: absolute; top: 0px; left: 0px; width: 40px; height: 40px; background: transparent; padding: 18px 55px 15px 140px; transition: width 1s, height 1s, padding 1s; z-index; 20;}
.svg_icon:hover{position: absolute; top: 0px; left: 0px; width: 70px; height: 70px; background: transparent; padding: 6px 45px 5px 125px; transition: width 1s, height 1s, padding 1s; z-index; 20;}	
}

@media screen and (max-width: 600px){
body {margin-top: 0px; margin-left: 185px; margin-right: 5px; background-color: #FFFFFF;}
#kop{position: relative; top: -10; font-family: 'Open Sans', sans-serif; color: #777777; font-size: 25px; z-index: 20;}
#kop_datum{position: relative; top: -10; font-family: 'Open Sans', sans-serif; color: #777777; font-size: 12px; z-index: 20;}
.content{margin-top: 30px}
.link_item{display: inline-block; width: 80px; height: 80px; padding: 8px; margin: 0px 8px 8px 0px; border: solid 1px #dddddd;}

ul{list-style-type: none;}
#het_menu li:nth-child(1){position: fixed; top:  5px; left: -50px; width: 220px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); z-index: 15;}
#het_menu li:nth-child(2){position: fixed; top: 95px; left: -255px; width: 220px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.2s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(3){position: fixed; top: 185px; left: -255px; width: 220px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.4s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(4){position: fixed; top: 275px; left: -255px; width: 220px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.6s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(5){position: fixed; top: 365px; left: -255px; width: 220px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 0.8s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(6){position: fixed; top: 455px; left: -255px; width: 220px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 1.0s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
#het_menu li:nth-child(7){position: fixed; top: 545px; left: -255px; width: 220px; height: 80px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; transition: left 2s; transition-delay: 1.2s; box-shadow: 2px 3px 6px rgba(0, 0, 0, .5); transition-timing-function: cubic-bezier(0.1,0.8,0.7,1.4); z-index: 15;}
.svg_icon{position: absolute; top: 0px; left: 0px; width: 40px; height: 40px; background: transparent; padding: 18px 55px 15px 140px; transition: width 1s, height 1s, padding 1s; z-index; 20;}
.svg_icon:hover{position: absolute; top: 0px; left: 0px; width: 70px; height: 70px; background: transparent; padding: 6px 45px 5px 125px; transition: width 1s, height 1s, padding 1s; z-index; 20;}	
}