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

	
div { border: 0px; font-family: 'Josefin Sans';}
	
body{ background-color: #fff; height:100% ; margin: 0; border: 0px; font-family: 'Josefin Sans';}

strong, b { }


/* josefin-sans-300 - latin */
																											
										
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/josefin-sans-v32-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/josefin-sans-v32-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/josefin-sans-v32-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/josefin-sans-v32-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/josefin-sans-v32-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/josefin-sans-v32-latin-300.svg#JosefinSans') format('svg'); /* Legacy iOS */
}

/* josefin-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/josefin-sans-v32-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/josefin-sans-v32-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/josefin-sans-v32-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/josefin-sans-v32-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/josefin-sans-v32-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/josefin-sans-v32-latin-regular.svg#JosefinSans') format('svg'); /* Legacy iOS */
}


A:link { text-decoration: none; color:#8daf0f4;}
A:visited { text-decoration: none; color:#daf0f4; }
A:active { text-decoration: none; color:#daf0f4;}
A:hover { text-decoration: none;color:#fff; } 

a.one:link { text-decoration: none; color:#daf0f4;}
a.one:visited { text-decoration: none; color:#daf0f4; }
a.one:active { text-decoration: none; color:#daf0f4;}
a.one:hover { text-decoration: none; } 

 
#header {position: fixed; width: 100%; height: 100%; margin-left: 0px; z-index: 50; 
	background-image: url("http://faemoco.com/img/fae-moco-chicago-sky.jpg");
	background-repeat: no-repeat;   
	background-position: center;
   background-size: cover; 	
	font-family: 'Josefin Sans';
	margin-top: 0px;}

#impressum {
position: absolute;
	max-width: 700px; 
	max-height: 40%; 
	margin-top: 200px;
	padding-bottom: 200px;
	z-index: 50;
	overflow-x: hidden;
 }

.imp{

	font-family: 'Josefin Sans';
		font-weight: 300;
	    font-size: 16px;
	padding-left: 20%;

}

#logo {
	float:left;
	margin-top: 6%;
	margin-left: 6%;
	z-index: 54
 }
#navi2 {
	float:right;
	font-family: 'Josefin Sans';
	margin-top: 8%;
	margin-left: 0;
	margin-right: 8%;
	z-index: 55
 }


#skyline { 
	position: absolute; 
	z-index: 52;
    bottom: 0;
	padding-bottom: 38px;
	 width: 100%;
   height: 280px;
display: flex; 
 }

#skylineboo { 
	position: absolute; 
	z-index: 52;
    bottom: 0;
	padding-bottom: 38px;
	 width: 100%;
   height: 280px;
display: flex; 
 }

#overlay { 
	position: absolute; 
	z-index: 53;
    bottom: 0;
	padding-bottom: 38px;
	 width: 100%;
   height: 616px;
display: flex; 
 }

#book-links { 
	position: absolute; 
	z-index: 56;
    bottom: 0;
	padding-bottom: 38px;
	 width: 100%;
   height: 616px;
display: flex; 
 }


#skyline-kontakt { 
	position: absolute; 
	z-index: 52;
    bottom: 0;
	padding-bottom: 38px;
	 width: 100%;
   height: 280px;
display: flex; 
 }

#skyline-books { 
	position: absolute; 
	z-index: 52;
    bottom: 0;
	padding-bottom: 38px;
	 width: 100%;
   height: 590px;
display: flex; 
 }

#band1{

	margin-top: 15px;
	width: 433px;
	z-index: 60;
display: none;
 }

#band2{

	margin-top: 5px;
	width: 433px;
	z-index: 60;
display: none;
 }


#band3{

	margin-top: 5px;
	width: 433px;
	z-index: 60;
display: none;
 }


#band4{

	margin-top: 5px;
	width: 433px;
	z-index: 60;
display: none;
 }

#skyline-mobile { 
	position: absolute; 
	z-index: 52;
    bottom: 0;
	padding-bottom: 20px;
	 width: 1100px;
   height: 329px;
display: none; 
 }

#skyline-mobile-small { 
	position: absolute; 
	z-index: 52;
    bottom: 0;
	padding-bottom: 20px;
	 width: 450px;
display: none; 
 }

#portrait {
position: absolute;
	width: 250px; 
    left: 50%;
    top: 50%;
    margin-left: -125px;
    margin-top: -200px;
	z-index: 60;
 }

#portrait-min{
position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -140px;
	z-index: 60;
	display: none; 
 }

#footer {position: absolute;  bottom: 0; text-align: right; color: #82afbf; padding: 10px 40px 10px 40px; width: 100%; background-color:#1c2b26; box-sizing: border-box; z-index: 60; }





.topnav2 {
    display: inline-block;
    color: #daf0f4;
    text-align: left;
    text-decoration: none;
	padding-left: 2px;
    font-size: 25px;
	font-weight:300;
	font-family: 'Josefin Sans';
}

a.imp:link {color: #82afbf;}
a.imp:visited {color: #82afbf;}
a.imp:hover {color: #fff;}
a.imp:active {color: #82afbf;}




.text-footer {
    color: white;
    text-align: left;
	vertical-align: bottom;
    text-decoration: none;
	letter-spacing: 0px;
    font-size: 14px;
	font-weight:400;
	line-height:1.5em;
	font-family: 'Josefin Sans', serif;
	padding-right: 5%;
	padding-left: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
	
}

@media (max-width: 1000px) {
   #skyline { 
      	min-width: 1100px;}
} 

@media (max-width: 1000px) {
   #overlay { 
      	display: none;}
} 

@media (max-width: 1000px) {
   #book-links { 
      	display: none;}
} 

@media (max-width: 1000px) {
   #skyline-books { 
      	display: none}
}
 
@media (max-width: 1200px) {
   #skyline-books { 
      	width: 1100px;
   height: 450px;} 
}

@media (max-width: 1000px) {
   #navi2 {
	float: left;
	margin-left: 30px;
	padding-right: 0px;
   } }
	
@media (max-width: 1000px) {
.topnav2 {
	float: left;
}	 }
	
@media (max-width: 1000px) {
   #band1 { 
      	display: inline-block ;
	   margin-left: 10px;
	   margin-right: 150px;
	max-width: 320px;} 
}

	@media (max-width: 1000px) {
   #band2 { 
      	display: inline-block ;
	   margin-left: 10px;
	   margin-right: 50px;
	max-width: 320px;} 
}

		@media (max-width: 1000px) {
   #band3 { 
      	display: inline-block ;
	   margin-left: 10px;
	   margin-right: 50px;
	max-width: 320px;} 
}
			@media (max-width: 1000px) {
   #band4 { 
      	display: inline-block ;
	   margin-left: 10px;
	   margin-right: 50px;
	max-width: 320px;} 
}
				
@media (max-width: 1000px) {
#skyline-mobile { 
display: contents;}		 
}	

@media (max-width: 450px) {
#skyline-mobile { 
display: none;}	 
}

@media (max-width: 450px) {
#skylineboo { 
display: none;}	 
}		

@media (max-width: 450px) {
#portrait { 
display: none;}	
}

@media (max-width: 450px) {
#portrait-min { 
display: inline-block;}
}	

@media (max-width: 450px) {
#skyline-kontakt { 
      	width: 400px;
   height: 120px;}  
}

@media (max-width: 450px) {
.imp {
	padding-left: 30px;
	
}	 }

@media (max-width: 450px) {
#skyline-mobile-small{ 
display: contents;}	 
}

@media (max-width: 450px) {
#impressum{ 
margin-top: 160px;
	max-height: 25%; 
	}	 
}