#lakmus{
	background-color: 	gray;
	width:				1vw;
}

@media screen and (orientation: landscape) {
	.logo {
		width:			20%; 
	}
	.container > header h1	 {
		font-size: 		3vw;		
		line-height: 	2.5vw;
		width:			30%;
	}

	.slideshow li div h3 {
		font-size: 		8vw;		
	}
	
	section.centered h2 {
		font-size:			2vw;
	}

	/*
	section.centered p, section.centered ul, section.centered table {
		font-size:		3vh;
	}*/
	
	section.centered  {
		width:			70%;
		font-size:		1.5vw;		
	}
	
}

@media screen and (orientation: portrait) {
	.logo {
		width:	50%; 
	}
	.container > header h1, .logo > header h1	 {
		font-size: 		3vh;
		line-height: 	4vh;
		width:			70%;
	}

	.slideshow li div h3 {
		font-size: 		10vh;		
	}
	
	section.centered h2 {
		font-size:		2vh;
	}	

	/*
	section.centered p, section.centered ul, section.centered table {
		font-size:		2vh;
	}*/	
	
	section.centered  {
		width:			90%;
		font-size:		1.5vh;		
	}	
	
}

/* For  pads */
@media screen and (orientation: portrait) and (min-resolution: 130dpi) and (max-width:30cm){
	section.centered h2 {
		font-size:			3vh;
	}
	
	section.centered  {
		font-size:			2vh;
		bbackground-color: 	black;
	}	
}


@media screen and (orientation: landscape) and (min-resolution: 130dpi) and (max-width:40cm) {
	section.centered h2 {
		font-size:			3vw;
	}
	
	section.centered  {
		font-size:			2vw;
		bbackground-color: 	black;
	}
}

/* For  mobiles */
@media screen and (orientation: portrait) and (min-resolution: 130dpi) and (max-width:10cm){
	section.centered h2 {
		font-size:			4vh;
	}
	
	section.centered  {
		font-size:			3vh;
		bbackground-color: 	gray;
		
	}
	#lakmus{
		background-color: 	red;
	}
}


@media screen and (orientation: landscape) and (min-resolution: 130dpi) and (max-width:20cm) {
	section.centered h2 {
		font-size:			4vw;
	}
	
	section.centered  {
		font-size:			3vw;
		bbackground-color: 	gray;
	}
}