/****************************************************************************************************** 												
**********************************************Tablet/Mobile View*****************************************							 
*******************************************************************************************************/
#home {
	display: none;
}
#home-mobile {
	position: relative;
	z-index: 1;
	height: auto;
	text-align: left;
	padding:0px;
	background:url("../imgs/Header_img_1.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	color: white;
	/*animation: chbg-mobile 15s infinite alternate;*/
}

/*@keyframes chbg-mobile {
	  25% {
	    background:url("../imgs/Titelbild_desktop.jpg") no-repeat center center; 
	  background-size:cover
	  }
	  50% {
	    background:url("../imgs/Header_img_2.jpg") no-repeat;
	  background-size:cover
	  }
	  75% {
	    background:url("../imgs/Header_img_3.jpg") no-repeat;
	  background-size:cover
	  }
	  100% {
	    background:url("../imgs/Header_img_4.jpg") no-repeat;
	  background-size:cover
	  }
	}
*/

/****************************************************************************************************** 												
**********************************************MENÜ MOBILE OVERLAY**************************************							 
*******************************************************************************************************/

 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px; 
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; 
  transition: 0.3s; 
}


.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
} 
/****************************************************************************************************** 												
**********************************************MENÜ MOBILE ENDE ****************************************							 
*******************************************************************************************************/



nav#topNavBarMobile {
	font-size: 0.8em;
	padding: 1%;
	letter-spacing: 3px;
	max-width: 100%;
}
nav#topNavBarMobile ul {
	list-style-type: none;
	display: table;
	padding-inline-start: 3%;
	max-width: 94%;
	width: 94%;
	margin-right: 5%
	
}
nav#topNavBarMobile ul li {
	display: table-cell;
}

nav a {
	text-decoration: none;
	color: white;
}


div.paradise-logo-mobile {
	margin-top: 180px;
	padding-bottom: 210px;
	margin-left: 15%;
	margin-right: 15%;
	max-width: 70%;
}

div.bottom-nav-bar-mobile {
	color: white;
	padding-inline-start: 5%;
	padding-inline-end: 5%;
	padding-bottom: 3%;
	text-align: center;

}

div.bottom-nav-bar-mobile p {
	cursor: pointer;
}

div.bottom-nav-bar-mobile p, hr {
	display: inline-block;
}


div.bottom-nav-bar-mobile hr {
	margin-right: 2%;
	margin-left: 2%;
	width: 16.5%;
	font-size: 3px;
}




/****************************************************************************************************** 												
**********************************************Desktop View !!!*****************************************							 
*******************************************************************************************************/
@media (min-width: 1240px) 	 {
	#home-mobile {
		display: none;
	}
	#home {
		display: block;
		position: relative;
		z-index: 1;
		height: auto;
		text-align: left;
		padding:0px;
		background: url("../imgs/Header_img_1.jpg") no-repeat;
		background-size: cover;
		/*animation: chbg 15s infinite alternate;*/
		background-position: center center;

		width: 100%
		height: 100%;
	}

	/*@keyframes chbg {
	  25% {
	    background:url("../imgs/Titelbild_desktop.jpg") no-repeat center; 
	  background-size:cover
	  }
	  50% {
	    background:url("../imgs/Header_img_2.jpg") no-repeat;
	  background-size:cover
	  }
	  75% {
	    background:url("../imgs/Header_img_3.jpg") no-repeat;
	  background-size:cover
	  }
	  100% {
	    background:url("../imgs/Header_img_4.jpg") no-repeat;
	  background-size:cover
	  }
	}*/

	nav#topNavBarDesktop {
		padding: 1%;
		letter-spacing: 5px;

		max-width: 100%;
	}
	nav#topNavBarDesktop ul {
		list-style-type: none;
		padding-inline-start: 2%;
		color: white;
		text-align: center;

	}
	nav#topNavBarDesktop ul li {
		display: inline-block;
	}
	nav#topNavBarDesktop ul li a {
		text-decoration: none;
		color: white;
		padding: 5px;
		
	}
	nav#topNavBarDesktop ul li a:hover {
		padding: 5px;
		outline: 1.5px solid white;
	}
	nav#topNavBarDesktop ul img#eyeLogo {
		height: 40px;
		width: 60px;
		margin-right: 30px;
		float: right;
	}


	div.middle-part {
		height: auto;
		width: 100%;

		position: initial;
		margin-top: 130px;
		
		/*padding-inline-start: 3%;*/
		display: inline-block;
	}
	div.left-nav-bar {
		color:white;
		display: inline-block;
		margin-right: 2%;
		padding-left: 3%;
		
	}
	div.left-nav-bar p {
		margin: 0;
		padding: 1px;
		cursor: pointer;
		
	}
	div.left-nav-bar p:hover {
	 	border-radius:50%;
		box-shadow: 0 0 0 1px #fff;
	}


	div.main-logo-big {
		width: 88%;
		height: auto;
		display: inline-block;
		text-align: center;
		position: absolute;
		padding-top: 120px;

	}
	div.main-logo-big img {
		width: 561px;
		height: auto;
		margin-right: auto;
		margin-left: auto;

	}
	div.right-nav-bar {
		display: inline-block;
		letter-spacing: 5px;
	    writing-mode: vertical-lr; /* Ermnöglicht Vertikales Schreiben !!!*/
	    
	    position: absolute;
	    right: 0%;
	    margin-right: 30px;
	}
	div.right-nav-bar a {
		color: white;
		text-decoration: none;
		padding: 5px;
		margin-bottom: 20px;
	}
	div.right-nav-bar a:hover {
		outline: 1.5px solid white;
	}


	div.inYourEyes {
		padding: 1%;
		color: white;
		padding-inline-start: 3%;
		letter-spacing: 5px;
	}
}




/*IDs for preloaded images*/
#preload-01 { background: url('../imgs/Header_img_2.jpg') no-repeat center center; }
#preload-02 { background: url('../imgs/Header_img_3.jpg') no-repeat center center; }
#preload-03 { background: url('../imgs/Header_img_4.jpg') no-repeat center center; }