html,body{
	margin:0;
	padding:0;
	background:black;
	font-family: 'Kavivanar', cursive;
}
header{
	border-bottom:3px solid yellow;
	height:150px;
}
.nav a{
text-decoration: none;
}
ul.nav li{
list-style-type: none;
float:right;
}
ul.nav li a{
display: block;
margin: 10px 10px 10px 0;
padding:10px 10px 0 5px;
color: yellow;
font-family: fantasy;
background: gray;
width:250px;
height:40px;
border: 2px solid yellow;
} 
h1{
	color:yellow;
	font-family:Lobster;
}
 #box {
	 display:inline-block;
	 position: absolute;
	 margin-left: 400px;
	 margin-top:10%;
	 margin-bottom:10%;
	 width: 200px;
	 height: 200px;
	 perspective: 700px;
	 }
	 #clock {
	 width: 200px;
	 height: 200px;
	 transform-style: preserve-3d;
	 transition: all 1.0s linear;
	 }
	 #box:hover #clock {
	 transform: rotateY(180deg);
	 }
	 .front {
	 position: absolute;
	 backface-visibility: hidden;
	 }
	 .back {
	 backface-visibility: hidden;
	 transform: rotateY(180deg);
	 }
	 .content{
		  display:inline-block;
	margin-bottom:5%;
	margin-left:5%;
	color:white;
}
.section21{
	margin-bottom:5%;
	margin-top:5%;
}
.section21 img{
	width:400px;
	height:250px;
	opacity: 0.7;
	transition:all 2s;
}
.section21 img:hover{
	width:490px;
	height:300px;
	opacity: 1;
	transition:all 2s;
}
.section31{
	margin-top:5%;
	margin-bottom:5%;
	padding-left:5%;
}
.ok{
	color: green;
}
.error{
	color:red;
}
.video{
	padding:3%;
	padding-left:5%;
}
.picture {
		    position: relative;
			height: 640px;
			width: 900px;
			margin: 50px auto;
		}
		.picture input {
			display: none; 
		}
		.picture label{
			position: absolute; 
			width: 90%;
			height: 50%;
		    visibility: hidden;
		    opacity: 0;
			transition: 2.5s; 
		}
		.picture img {
			position: absolute;
			height:550px;
			width:960px;
		}
		.picture #picture1:checked ~ [for="picture1"],
		.picture #picture2:checked ~ [for="picture2"],
		.picture #picture3:checked ~ [for="picture3"],
		.picture #picture4:checked ~ [for="picture4"],
		.picture #picture5:checked ~ [for="picture5"]{		  
		  visibility: hidden;
		  opacity: 0;
		}
		.picture #picture1:checked ~ [for="picture2"],
		.picture #picture2:checked ~ [for="picture3"],
		.picture #picture3:checked ~ [for="picture4"],
		.picture #picture4:checked ~ [for="picture5"],
		.picture #picture5:checked ~ [for="picture1"] {
			visibility: visible; 
			opacity: 1;
		}

input:focus:invalid + .mist .ok{
	display:none;
}
input:focus:valid + .mist .error{
	display:none;	
}
.mist {		  
  display: none;
}
iframe{
	margin-left:80px;
}
input:focus + .mist {
  display: inline;
}	
input:focus:valid{
	background:lightgreen;
	border:3px groove lime;
}
input:focus:invalid{
	background:pink;
	border:3px groove red;
}
.section:after{
content:"";
font-size:40px;
text-align:center;
COLOR:cyan;
display:block;
background-image:url(images/dragon.jpg);
background-size:cover;
background-attachment:fixed;
height:640px;
background-size:contain;
}
.section1:after{
content:"";
font-size:40px;
text-align:center;
COLOR:cyan;
display:block;
background-image:url(images/bakgrund.jpg);
background-size:cover;
background-attachment:fixed;
height:640px;
}
.section2:after{
content:"";
font-size:40px;
text-align:center;
COLOR:cyan;
display:block;
background-image:url(images/bakgrund.jpg);
background-size:cover;
background-attachment:fixed;
height:640px;
}
.section3:after{
content:"";
font-size:40px;
text-align:center;
COLOR:cyan;
display:block;
background-image:url(images/background.jpg);
background-size:cover;
background-attachment:fixed;
height:640px;
}
.section4:after{
content:"";
font-size:40px;
text-align:center;
COLOR:cyan;
display:block;
background-image:url(images/bakgrund.jpg);
background-size:cover;
background-attachment:fixed;
height:640px;
}
@media screen and (max-width: 500px) {	
	ul.nav li a{
display: block;
margin: 10px 10px 10px 0;
padding:10px 10px 0 5px;
color: yellow;
font-family: fantasy;
background: gray;
width:150px;
height:40px;
border: 2px solid yellow;
} 
iframe{
	width:450px;
	height:400px
}
}