header {
	position: sticky;
	top: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	z-index: 200;
	color: white;
	background-color: transparent;
	box-shadow: 1px 1px 2px white;
}
.small {
	background-color: #28559a;
	transition: 1s;
}
.backgroundImage {
    position: fixed;
	
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  z-index: -5;
 
  object-position: top;
  object-fit: cover;
 	animation: beginning linear forwards;
	 animation-timeline: view();
	 animation-range: exit;
 
 

  
}

@keyframes beginning {
  0%   {  opacity: 1; }
  75%, 100% {  opacity: 0.2;  scale: 1.2;  }
}

#topLogo
{    position:relative;
	text-align:center;
	margin-bottom:auto;
	margin-left: 50px;
	animation-name: fade-in;
	 animation-duration: 5s;
	
	 text-shadow: 1px 1px 2px black, 0 0 25px #696969, 0 0 5px 	#282828;
	
}
.logo
{position:absolute;
right: 0px;
	margin:0px;
  padding: 0px;
  max-width: 250px;
  max-height:150px;
  background-color:white;
  right:0px;
  }
  .Image-logo-div
  {position:relative;	
	  width:100px;
  height:100px;
  overflow:hidden;
  text-align: right;
  border: solid;
  padding:0px;
  margin: 2px;
  }
.Image-logo-div >p{
position:absolute;
bottom:0px;
left:0px;
width:100%;
margin:0px;
padding:0px;
}
#titleMobile {
display:none;}

	#menu {
		width: 70%;
		text-align: center;
		margin-top: auto;
		z-index: 0;
		flex-grow: 1;
	}

#lang
{display:none;
color:black; 
	position:absolute;
	right: 150px;
	top:10px;
	
}
#lang p
{margin:0px;

	
}
.lang-Menu
{ 
display: none;
  position: absolute;
  background-color:white;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  text-shadow:none;
  font-size: 16px;
  text-align:left;
  z-index: 1;}
  
 .lang-Menu a {
  color: black;
 padding:5px;
 
  text-decoration: none;
  display: block;
}
#lang:hover .lang-Menu {
  display: block;
}

#menu ul
{margin:0px;
font-size:20px;
 text-shadow: 1px 1px 2px black;
padding: 0px;
text-align: right;

animation-name: slide;
animation-duration: 6s;




	
}
#menu li{ 
position:relative;
list-style-type: none;
display: inline-block;
margin-left:2%;
margin-right:2%;
width:150px;
height:50px;
text-align:center;
vertical-align: middle;
padding-top:45px;
	background-image:url("../images/cloud.png");	
	 background-repeat: no-repeat;
	  background-position: center;
  background-size: 150px 50px;




padding-bottom:10px;
animation-name: rotation;
	 animation-duration: 4s;


	
}

.mainOption
{ position: absolute;
top:0;
left:0;

color: white;
	cursor:pointer;
	margin-bottom:10px;
	text-decoration:none;
	height:100%;
	width:100%;
	line-height:100px;
	vertical-align:bottom;

	
}


a:hover
{
	color:black;
 text-shadow: none;
	text-decoration:underline;
	
	
	
	
}




@keyframes fade-in {
  0%   {  opacity: 0; }
  100% {  opacity: 1; }
}

.dropdown-Menu
{  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  text-shadow:none;
  font-size: 16px;
  margin-top:30px;
  margin-left:10px;
  text-align:left;
  z-index: 1;}
 .dropdown-Menu a {
  color: black;
  padding: 12px 16px;
 text-align:center;
  text-decoration: none;
  display: block;
}




#menuButton
  {display:none;
  font-size: 20px;
  height:100%;
  background-color:transparent;
  box-shadow:none;

 
  }
@media only screen and (min-width: 600px) {
	@keyframes slide {
		0% {
			transform: translate(-100%, 0);
		}

		100% {
			transform: translate( 0%, 0);
		}
	}

	@keyframes rotation {
		0% {
			transform: rotate(15deg);
		}

		75% {
			transform: rotate(10deg);
		}
	}
	@keyframes mymove {
		0% {
			transform: rotateY(0deg);
		}

		50% {
			transform: rotateY(180deg);
		}

		100% {
			transform: rotateY(0deg);
		}
	}


	header li:hover .dropdown-Menu {
		display: block;
	}

	.dropdown-Menu a:hover {
		text-decoration: underline;
		background-color: gray;
	}

}

	@media only screen and (max-width: 600px) {


		#menu {
			display: none;
		}

		#topLogo {
			width: 100%;
			text-align: center;
			margin-left: auto;
		}

		#titleMobile {
			display: inline-block;
		}

		.Image-logo-div {
			display: none;
		}

		#menuButton {
			display: inline;
			position: absolute;
			left: 0px;
			top: 0px:
		}

		#menu li {
			display: block;
			width: 100%;
		}
	}
