.white{
	color:white;
}

body{
margin: 0;
    background-color: #0e9ed8;
	font-family: stratos, sans-serif;
	font-weight:900;
	padding-left:10%;
	padding-right:10%;
	padding-top:3.33%;
	padding-bottom:3.33%;
	display:block
	
}

serif{
	 background: #ffed94; 
}

.title{
	font-family: stratos, sans-serif;
	font-weight:900;
	    text-transform: uppercase;
		font-size: 8vmin;
		display: inline-block;
}


#bottom{
	margin-top: 40px;
	word-spacing: 10px;
}

#bottom a{
	color:black;
	text-decoration:none;
	padding: 0px 5px 0px 5px;
	transition: 0.1s;
}

#bottom a:hover{
	background-color: black;
	color: white;
	transition: 0.2s;
}

#content{
	font-family: odisseia, sans-serif;
	font-size: small;
	font-weight: 300;
	margin-left: 10px;
	-webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -ms-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
}

.fade { opacity: 0; }

.reveal { opacity: 1; }

.start{transform:translate(100%);}

.mid{transform:translate(0px);}

a{
	cursor: pointer;
	font-weight: 600;
}

h2{
	font-family: stratos, sans-serif;
}

#nav {}

#nav a{
	font-size: large;
	background-color: black;
	color: #0e9ed8;
	padding: 0px 5px 0px 5px;
	text-decoration: none;
	transition: opacity 0.2s;
}

#nav a:hover{
	color:black;
	background-color: white;
	padding: 0px 9px 0px 9px;
	transition: 0.4s;	
}

.tick div{
	position: relative;
	background: url(check-solid.svg) no-repeat 50% 50%;
	display: inline-block;
	width: 8vmin;
	height: 6vmin;
}

#kontakt{
	font-family: stratos-lights, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: small;
	width: 500px;
	padding: 15px 30px;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 0px 9px 1px rgba(0, 0, 0, 0.6);
	transition-duration: 1s
}

#kontakt input,
#kontakt textarea,
#kontakt select{
	  display: block;
  width: 100%;
  appearance: none;
}

#modal{
	display: none;
	position: absolute;
	background-color: white;
	width: 80%;
	min-height: 50%;
	font-family: odisseia, sans-serif;
	-webkit-box-shadow: 1px -1px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px -1px 16px 0px rgba(0,0,0,0.75);
box-shadow: 1px -1px 16px 0px rgba(0,0,0,0.75);
	padding: 90px 30px;
font-size: x-small;
	z-index: 99;
}

.button{
	background-color: #0e9ed8;
	border: none;
	color: white;
	padding: 15px 32px;
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	font-size: large;
	cursor: pointer;
}

.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 52px;
  margin-left: 50px;
text-decoration: none;
}

.modal-link{
	text-decoration-line: underline;
}

.status{
	font-family: odisseia, sans-serif;
	font-size: small;
	margin-left: 10px;
}
.status td{
	background-color: #DFDFDF;
	padding: 3px 9px;
}

.status	td:nth-child(even) {
  width: 40px;
}


* {box-sizing:border-box}

.clouds {
  display: inline-block;
width: 8vmin;
height: 6vmin;
  position:relative;
  right:0;
  transform: translate(-23vmin, 6vmin);
}
.clouds div {
  position: absolute;
width: 8vmin;
height: 6vmin;
background: url(cloud.svg) no-repeat 50% 50%;
  animation-timing-function: cubic-bezier(0,1,1,0);
  background-size: contain; 
  -webkit-filter: drop-shadow(2px 6px 3px rgba(0,0,0,0.5));
  filter: drop-shadow(2px 6px 3px rgba(0,0,0,0.5));
}
.clouds div:nth-child(1) {
  right: 0%;
  animation: clouds1 1.6s infinite;
}
.clouds div:nth-child(2) {
  right: -1%;
  animation: clouds2 1.6s infinite;
}
.clouds div:nth-child(3) {
  right: -100%;
  animation: clouds2 1.6s infinite;
}
.clouds div:nth-child(4) {
  right: -200%;
  animation: clouds3 1.6s infinite;
}
@keyframes clouds1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes clouds3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes clouds2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(8vmin, 0);
  }
}

.select{
	background-color: white;
	width:100%;
	padding-top: 3.33%;
	padding-bottom: 3.33%;
	padding-left:10%;
	padding-right: 10%;
}