@charset "UTF-8";
/* CSS Document */

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v20-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-100italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-v20-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-100italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-100italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}


body, html {
    height: 100%;
    margin: 0;
	background-image: url("http://ylk.dk/ylkdk_background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}




#logo {
	width: 70px;
	height: 70px;
	position: fixed;
	bottom: 20px;
	right: 35px;
	background-repeat:no-repeat;
	background-position:bottom right;
	

}

#logo:hover img {
  animation: ani 2s linear forwards infinite;
}

@keyframes ani {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}


video {  
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
 
}



#rauschen {
	background-image: url("http://www.ylk.dk/rauschen.gif");
    height: 100%;
    width: 100%;
    opacity: 0.1;
	

}


#pfeil {
	

	width: 300px;
	height: 300px;
	position: fixed;
	top: 35px;
	left: 29px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	background-position:top left;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	color:#000;

}


#obg {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
	visibility:hidden;
}

a:hover + #obg {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
	float: none;
	visibility:visible;
}



.text {
	

	transform: rotate(90deg);
	width: 300px;
	height: 300px;
	position: fixed;
	top: 35px;
	right: 59px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	background-position:top left;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;

}




.about {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
	visibility:hidden;
}

.text:hover + .about {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
	float: none;
	visibility:visible;
}

.hallo {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
}

.text:hover + .hallo {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
   display:none;
}




#ahoi {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
	visibility:hidden;
}

a:hover + #ahoi {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-80px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:15px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
	float: none;
	visibility:visible;
}




#mail {
	width: 300px;
	height: 300px;
	position: fixed;
	bottom: -245px;
	left: 35px;
	text-align: left ;
	font-size:15px;
	color: #FFFFFF;
	background-position:bottom right;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
}



.i1 {
	width: 300px;
	height: 300px;
	position: fixed;
	top: 30px;
	left: 28px;
	text-align: left;
	font-size: 15px;
	letter-spacing: 1px;
	color: #FFFFFF;
	background-position: top right;
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 100;
}




.i2 {
	position:absolute;
	left:50%;
	top:50%;
	height:300px;
	width:600px;
	margin-left:-300px;
	margin-top:-120px;
	letter-spacing: 3px;
	color: #FFFFFF;
	font-size:9px;
	font-family: 'Roboto';
  	font-style: italic;
  	font-weight: 100;
	text-align: center;
	letter-spacing: 3px;
	line-height:30px;
}










</style>