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

/*MEDIA QUERY*/

@media only screen and (min-width : 100px)
{		
	html { 	
		background: url("../img/backgroud_Bild_small.jpg") center center no-repeat fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		-webkit-backface-visibility: hidden;
		overflow: hidden;
	}
	
	body /* fix for fixed background on iOS devices together with overflow: hidden in html {} */
	{
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
		
	.carousel-indicators {	
		display:none;
	}
	
	.lyrik {
		margin: 5px auto;
		padding: 50px 10px 5px;
		background-color: white;
		color: black;
		width: 92%;
		max-width: 300px;
		height: 360px;
		postion: absolute;
		vertical-align: middle;
		line-height: 1.0em;
	}
	
	.lyrik-large {
		margin: 5px auto;
		padding: 5px 10px 5px;
		background-color: white;
		color: black;
		width: 92%;
		max-width: 300px;
		height: 360px;
		postion: absolute;
		vertical-align: middle;
		line-height: 1.1em;
		font-size: 95%;
	}
	
	.picture-size {
		max-height: 75vh;  /* To scale picture down, if viewport height (browser height) is to small */
		max-width: 75vw;   /* To scale picture down, if viewport width (browser width) is to small or picture is to wide, so that complete picture fits into browser width */
	}		
}	


/* ----------- iPhone 4 and 4S ----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 374px)
  and (-webkit-min-device-pixel-ratio: 2)  	
  and (orientation: portrait) {		

	.section {
		width: 98%;
	}

	.carousel-control 
	{	 
		width: 1%;
	}	
	
	.carousel-control .glyphicon-chevron-left {
		margin-left:-23px;
	}
   
	.carousel-control .glyphicon-chevron-right {
		margin-right:-23px;
	}
	
	.picture-size {
		max-height: inherit;  /* reset to default for small screens */
		max-width: inherit;   /* reset to default for small screens */
	}

}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 374px)
  and (-webkit-min-device-pixel-ratio: 2)  	
  and (orientation: landscape) {		

	.section {
		width: 98%;
	}

	.lyrik {
		padding: 50px 20px 5px;
		width: 96%;
		max-width: 280px;
		height: 300px;
	}	
	
	.lyrik-large {
		padding: 2px 10px 2px;
		width: 96%;
		max-width: 280px;
		height: 300px;
	}	

	.carousel-control 
	{	 
		width: 1%;
	}	
	
	.carousel-control .glyphicon-chevron-left {
		margin-left:-23px;
	}
   
	.carousel-control .glyphicon-chevron-right {
		margin-right:-23px;
	}
	
	.picture-size {
		max-height: inherit;  /* reset to default for small screens */
		max-width: inherit;   /* reset to default for small screens */
	}

}
/* ----------- iPhone 6 ----------- */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) 
{	
	.carousel-control 
	{	 
		width: 1%;
	}	
	
	.carousel-control .glyphicon-chevron-left {
		margin-left:-20px;
	}
   
	.carousel-control .glyphicon-chevron-right {
		margin-right:-20px;
	}		
	.section {
		width: 90%;
	}
	
	.picture-size {
		max-height: inherit;  /* reset to default for small screens */
		max-width: inherit;   /* reset to default for small screens */	
	}
}	

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

	.lyrik {
		padding: 50px 20px 5px;
		width: 96%;
		max-width: 280px;
		height: 340px;
	}	
	
	.lyrik-large {
		padding: 2px 10px 2px;
		width: 96%;
		max-width: 280px;
		height: 340px;
	}	

	.carousel-control 
	{	 
		width: 5%;
	}	
	
	.carousel-indicators {	
	display:block;
	}	
}


 ----------- Desktop -----------


 
@media only screen and (min-width : 300px) 
{		
	.carousel-indicators {
		display:none; /* Einfluss auf iPhone?? */
	}
}	


@media only screen and (min-width : 668px)  
{		
	
	.lyrik, .lyrik-large {
		margin: 20px auto;
		padding: 50px 30px;
		width: 70%;
		max-width: 325px;
		height: 450px;
		line-height: 1.1em;
	}
	
	.carousel-indicators {	
		display:block;  
	}
}	
	
	
@media only screen and (min-width : 821px) {		
	html { 
		background: url("../img/backgroud_Bild.jpg") center center no-repeat fixed;
    	-webkit-background-size: cover;
		-moz-background-size: cover;
 		-o-background-size: cover;
 		background-size: cover;
		-webkit-backface-visibility: hidden;
		overflow: hidden;
	}

	body /* fix for fixed background on iOS devices together with overflow: hidden in html {} */
	{
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.navbar-inverse {
		background-color:transparent;
	}

	.lyrik, .lyrik-large {
		margin: 20px auto;
		padding: 50px 30px;
		width: 70%;
		max-width: 325px;
		height: 450px;
		line-height: 1.1em;
	}

	.carousel-indicators {	
		display:block;
	}

}

/*
@media only screen and (max-width : 720px) {

	header {

		position: absolute;

	}

	#menu-icon {

		display:inline-block;

	}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 10px;
		background: rgba(51,51,51,0.6);
		
		right: 20px;
		top: 60px;
		width: 20%;
		border-radius: 4px 0 4px 4px;

	}

	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}
*/