@charset "UTF-8";

html {height: 100%}

body,td,th {
	cursor: default;
    font-family: 'Roboto';
    src: url('Roboto-Regular.ttf') format('truetype');
	font-weight: 300;
    font-style: normal;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size:cover;
    background-attachment:fixed;
}

html, html a {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'Roboto';
    src: url(roboto/Roboto-Regular.ttf);
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url(roboto/Roboto-Black.ttf);
    font-weight: 600;
    font-style: normal;
}

a:link 			{color:#fff; text-decoration:none}
a:visited 		{color:#fff; text-decoration:none}
a:hover 		{color:#06F; text-decoration:underline}
a:active 		{color:#fff; text-decoration:none}

a.projecten:link 	    {color:#fff; text-decoration:none;}
a.projecten:visited     {color:#fff; text-decoration:none}
a.projecten:hover 	    {color:#FFF; text-decoration:none}
a.projecten:active 	    {color:#fff; text-decoration:none}

a.knoplink:link         {color:#fff; text-decoration:none; display: inline-block;}
a.knoplink:visited      {color:#fff; text-decoration:none; display: inline-block;}
a.knoplink:hover        {color:#fff; text-decoration:none; display: inline-block;}
a.knoplink:active       {color:#fff; text-decoration:none; display: inline-block;}

#knop {
    width: 121px;
    height: auto;
    display: inline-block;
    margin: 0 auto;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 19px;
    border: solid;
    border-width: 2px;
    border-color: #3b4d63;
    border-radius: 10px;
    text-align: center;
    background-color: #1b395d;
    color: #fff;
}

#knop:hover {
    border-color: #fff;
    background-color: #4e7baf;
    transition: 0.1s;
}


/* ----------- VIDEO ----------- */


#video-player-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: none;
    animation-name: darken;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  @keyframes darken {
			100% {
        background-color: rgba(0, 0, 0, 0.9);
			}
  }

  #video-player-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    padding-top: 50px;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    overflow: hidden;
    z-index: 99;
  }

  #video-player {
    width: 100%;
    height: 100%;
    z-index: 98;
  }

  #close-btn {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 25px;
    color: #ccc;
    background-color: #633333;
    cursor: pointer;
    border: none;
  }








/* ----------- MENU ----------- */


a.menu_2:link 	    {color:#fff; text-decoration:none}
a.menu_2:visited    {color:#fff; text-decoration:none}
a.menu_2:hover 	    {color:#fff; text-decoration:underline}
a.menu_2:active 	{color:#fff; text-decoration:none}

.menu_p {
    margin-left: 10px;
    margin-top: 7px;
}

.menu_1 {
    z-index: 15;
	position:fixed;
	left:0px;
	top:-100px;
    color: #fff;
	text-align:left;
	width:100px;
	height:33px;
	font-size:16px;
	background-color:#003533;
    border-radius: 0px 0px 0px 0px;
    border: solid;
    border-width: 2px;
    border-color: #003533;
    transition: 0.2s ease;
    animation-name: slide-in-menu_1b;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

div.menu_1:hover {
	width:110px;
	background-color:#4a7;
    border-radius: 10px 0px 10px 0px;
    border-color: white;
}

.menu_2 {
    z-index: 15;
	position:fixed;
	left:0px;
	top:-32px;
	text-align:left;
    padding-left: 0px;
	width:100px;
	height:35px;
	font-size:16px;
	background-color:#004f4d;
    border-radius: 0px 0px 0px 0px;
    border: solid;
    border-width: 2px;
    border-color: #004f4d;
    color: #fff;
    transition: 0.2s ease;
    animation-name: slide-in-menu_2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

div.menu_2:hover {
	width:110px;
	background-color:#4a7;
    border-radius: 10px 0px 10px 0px;
    border-color: white;
}

.menu_3 {
    z-index: 15;
	position:fixed;
	left:0px;
	margin-top:-39px;
	text-align:left;
    top: -200px;
    padding-left: 0px;
	width:100px;
	height:35px;
	font-size:16px;
	background-color:#42936B;
    border-radius: 0px 0px 0px 0px;
    border: solid;
    border-width: 2px;
    border-color: #42936B;
    color: #fff;
    transition: 0.2s ease;
    animation-name: slide-in-menu_3;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

div.menu_3:hover {
	width:110px;
	background-color:#4a7;
    border-radius: 10px 0px 10px 0px;
    border-color: white;
}


#balk {
    z-index: 20;
	position:fixed;
	text-align:left;
    left:0px;
	top:-100px;
	width:100%;
	font-size:13px;
	height:38px;
    color: #fff;
	background-color: #162c47;
    animation-name: slide-in-balk;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

@keyframes slide-in-balk {
    100% {
        top: 0px;
    }
}

@keyframes slide-in-menu_1 {
    100% {
        top: 27px;
    }
}

@keyframes slide-in-menu_1b {
    100% {
        top: 38px;
    }
}

@keyframes slide-in-menu_2 {
    100% {
        top: 75px;
    }
}

@keyframes slide-in-menu_3 {
    100% {
        top: 153px;
    }
}









/* ----------- AUDIO POST ----------- */


#content {
	position:absolute;
    width: 100%;
    left: -4000px;
    right: 0px;
	text-align:center;
    animation-name: slide-in-audio;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.logo{
    text-align: center;
    margin: 0 auto;
    margin-top: 100px;
    font-size: 25px;
}

.voorwoord {
    font-size: 16px;
    text-align: left;
    width: 450px;
    color: #fff;
    margin: 0 auto;
    padding: 0px;
}

.project {
	position:relative;
	width:100%;
    max-width: 400px;
    min-width: 100px;
	text-align:left;
    margin:0 auto;
    padding: 5px;
    padding-top: 40px;
    color: #fff;
	font-size:12px;
	border:solid;
    border-width: 0px;
	border-color:#000;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}
.project:hover {
    filter: brightness(130%)
}

.project_film {
	position:relative;
	width:100%;
    left: -15000px;
    max-width: 300px;
    min-width: 100px;
	text-align:left;
    margin:0 auto;
    margin: 10px;
    font-size:12px;
	border:solid;
    border-width: 0px;
    color: #fff;
	border-color:#000;
    display: inline-block;
    vertical-align: top;
    animation-name: slide-in-audio;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    cursor: pointer;
}

.project_film:hover {
    transition: 0.2s ease;
}

.project_1 {
    font-size: 15px;
    padding-top: 5px;
    padding-left: 5px;
    margin: 0px;
}

.project_2 {
    font-size: 13px;
    padding-left: 5px;
    padding-top: 3px;
    margin: 0px;
}

#lijn {
    position:relative;
    left: -10000px;
    animation-name: slide-in-audio;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
}

.lijn {
    width: 99.9%;
    opacity: 0.4;
}

#genre {
	position:relative;
	width:auto;
	text-align:center;
    width: 350px;
    margin:0 auto;
    padding: 5px;
    height: 30px;
	font-size:15px;
    color: #fff;
}

#audio {
    z-index: 15;
	position:sticky;
	width:100%;
    background-color: #3b618d;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    top: 38px;
	text-align:center;
    height: 25px;
	font-size:22px;
    color: #fff;
}

#muziek {
    z-index: 15;
	position:sticky;
	width:100%;
    background-color: #3b618d;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    top: 38px;
	text-align:center;
    height: 25px;
	font-size:22px;
    color: #fff;
}

#studio {
    z-index: 15;
	position:sticky;
	width:100%;
    background-color: #3b618d;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    top: 38px;
	text-align:center;
    height: 25px;
	font-size:22px;
    color: #fff;
}

#studio_content {
    z-index: 13;
	position:sticky;
	width:100%;
    padding-left: 0px;
    top: 0px;
	text-align:center;
	font-size:25px;
    color: #fff;
}

@keyframes slide-in-audio {
    100% {
        left: 0px;
    }
}









/* ----------- MUZIEK ----------- */


.voorwoord_muziek {
    font-size: 18px;
    text-align: justify;
    width: 80%;
    max-width: 800px;
    color: #fff;
    margin: 0 auto;
    padding: 0px;
}

#project_muziek {
	width:350px;
	text-align:left;
    margin-top: 10000px;
    vertical-align: top;
	font-size:12px;
	display: inline-block;
	border: none;
    border-width: 2px;
    border-color: #223347;
    color: #fff;
    cursor: pointer;
    padding: 20px;
    animation-name: slide-in-muziek;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

#project_muziek:hover {
    border-color: #eee;
    background-color:#eee;
    color:#000; 
    transition: 0.2s ease;
}

#muziek_showreel {
	width:56vw;
    height: 32vw;
    min-width: 392px;
    min-height: 221px;
    max-height: 325px;
    max-width: 560px;
	display: inline-block;
	border: none;
    border-width: 2px;
    border-color: #223347;
    color: #fff;
    cursor: pointer;
    padding: 20px;
}

#muziek_showreel:hover {
    border-color: #eee;
    background-color:#eee;
    color:#000; 
    transition: 0.2s ease;
}

@keyframes slide-in-muziek {
    100% {
        margin-top: 0px;
    }
}






/* ----------- INFO ----------- */

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
}

#bio {
    z-index: 14;
    position: relative;
    height: 100%;
    overflow-y:scroll;
    width: 100%;
    margin: 0 auto;
}

#scroll_content {
    z-index: 14;
    position: relative;
    top: -390px;
    text-align: center;
    height: 100px;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
}

#bio_content {
    z-index: 14;
    color: #000;
    position: relative;
    top: -100px;
    background-color:aliceblue;
    border-radius: 35px;
    height: 100%;
    width: 90%;
    overflow: scroll;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px;
    font-size: 15px;
}
  
.expanded {
position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 95%;
    max-height: 95%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.75);
    background-color: white;
    padding: 10px;
    display: none;
    animation-name: fadeIn; /* set the animation name */
    animation-duration: 0.2s; /* set the animation duration */
    animation-fill-mode: forwards; /* keep the last frame of the animation visible */
}

.expanded img {
    z-index: 9999;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: auto;
}

.shrunken img:hover {
    z-index: 9999;
    transition: transform 0s ease-out;
    transform: scale(0.99);
    cursor: pointer;
}

@keyframes slide-in-bio {
    100% {
        top: 1000px;
    }
}
@keyframes slide-in-scroll {
    100% {
        top: 50%;
    }
}