/*  MEDIA QUERYS **********************************************************************

// xtra-Small devices (landscape phones, less than 768px) - iphone SE
@media (max-width: 575.98px) { ... }

@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
*/

/*  Medium devices, tablets 992 px*************************************************************************/
@media screen and (max-width:1024px) {

/**** Schriftgrößen ************************************/
p, li, h4 {
	font-size: 23px;
}

/* index ********************************************/
/* Logo */
.logo_big {width:550px;}
.logo_small{width:350px;}
.container_img_header{height:110px;}
.img_small{height:80px;}
/* aside ***/
aside .sidemenu{right:1%;}
/* Navigation *****************/
.nav-area a {padding: 0px 30px;}
/* home ******/ 
#home h2{font-size:35px;}
.home{width:85%;}
/* Leistungen ****/
#Leistungen{padding-top: 130px;}
#Leistungen .container_col2{padding:1rem;}
#Leistungen .container_col2 li{font-size: 23px;}
/* Produkte *****/
.container_produkte{width:85%;}

/* Neuheiten *******************/
#Neuheiten{padding: 100px 0.5rem 5%;}

/* Bilder ******************************/
/* Brautfrisuren ***********/
.container_single_left, .container_single_right {height: 50vh;}

/* Haarverlängerung / Haarverdichtung *********************/
.img_left, .img_right {height: 80%;}

/* Schnitte ****************/
#Schnitte .img_left, #Schnitte .img_right {height: 90%;}


/* Termin ****************/
#termin{padding: 100px 0.5rem 5%;}

/* Disclaimer ***************/
#disclaimer .container_single p {font-size:23px;}


}


/*  devices, middle Smartphone 770px *************************************************************************/
@media screen and (max-width:900px) {

	/**** Schriftgrößen ************************************/
	li, p, h3, h4 {font-size:20px;}

	/* Navigation *****************/
	.nav-area a {padding: 0px 25px;}

	/* home *****
	#home .CoronaButton {top:12%;left:-2%;width: 15%;}
	#home .CoronaButton p{font-size:15px;}
	*/ 
	
	#home .NewsButton {top:12%;left:0%;width: 15%;}
	
	/* Leistungen ****/
	#Leistungen .container_col2 {margin: 5% 1%;text-align: left;}

	/**** Bilder *************************/
	#Brautfrisuren{padding:65px 1rem;}
	#Brautfrisuren .container_Brautfrisuren{height: 60vh; /*background-size: 125%;*/}

	.container_single_left, .container_single_right {height: 35vh;}

	#Haarverlängerung{padding-top: 50px;}
	/* #Haarverlängerung .container_single_left .img_left, #Haarverlängerung .container_single_right .img_left {display:none;} */
	#Haarverlängerung .container_single_inside{display:none;}
	#Haarverlängerung figcaption, #Haarverdichtung figcaption{font-size:20px;}
	
	#Schnitte{padding-top: 50px;}
	#Schnitte .img_left, #Schnitte .img_right {height: 75%;}

}

/*  devices, middle Smartphone 770px AND LANDSCAPE*************************************************************************/
@media screen and (max-width:900px) and (orientation:landscape) {
	
	/* Sidemenü *****************/
	aside .sidemenu {top: 40%;}
	
	/* home *****
	#home .CoronaButton {top: 35%;left: 0%;width: 15%;}
	*/ 
	#home .NewsButton {top: 35%;left: 0%;width: 15%;}
	
	/* Leistungen ****/
	#Leistungen {height: 150vh;}
	
	/**** Bilder *************************/
	#Brautfrisuren{padding:60px 1rem;}
	#Brautfrisuren .container_Brautfrisuren{height: 150vh;}
	

	.container_single_left, .container_single_right {height:70vh;padding: 0.5rem;}
	.img_right {padding-left: 10px;}
	
}

/*  devices, small Smartphone *************************************************************************/
@media screen and (max-width: 680px) {

	/**** header / nav ************************************/
	.container_logo {padding-left: 10px;}
	.logo_big, .logo_small {width: 350px;}
	.container_img_header {display:none;}

	.menubutton{display:block;}
	.nav-area{display: none;}
	.nav-area ul{display: block;}
	.showmenu + .nav-area{display:block;}


	.nav-area a[href^="#Leistungen"], .nav-area a[href^="index.html#Leistungen"] {display:none;}
	.nav-area ul ul li{display:none;}

	aside .sidemenu {right: 0;}

	/**** home **********************************
	#home .CoronaButton {top:12%;left:-2%;width: 26%;}
	*/
	#home .NewsButton {top:14%;left:0%;width: 24%;}
	#wrapcube{display:none;}
	#home {min-height: -webkit-fill-available;}
	#home .home {width: 95%;}

	.home_img{width: 30%;margin: 0 auto;
}

	.salon img{width:80% !Important;}

	/**** Leistungen *****************************/
	#Leistungen{padding-top: 50px;}
	#Leistungen .container_col2{column-count: 1;}	
	#Leistungen .container_col2 li, #Leistungen .container_col2 p {font-size: 20px;}

	/**** Produkte *****************************/
	#Produkte{padding-top: 50px;}
	#Produkte .container_produkte {width: 100%;}
	.gltapes img, .glynt img {width: 50%;}


	/**** Bilder *************************/
	#Brautfrisuren .container_Brautfrisuren{background-size: 150%;}
	#Brautfrisuren .container_Brautfrisuren{padding-top:4rem;}
	
	#slides img{width:65%;max-height:75%;}

	.container_single_left, .container_single_right {width: 100%;}
	#Schnitte .img_left, #Schnitte .img_right {height:80%;width: 300%;}

	/**** Neuheiten *************************/
	#Neuheiten {padding: 50px 0.5rem 5%;}
	

	/**** Impressum / Disclaimer *************************/
	#impressum {padding-top:75px;}
	.impressum_list_col2 {column-count: 1;padding:0;}
	.impressum_list_col2 h4{font-size:20px;}
	.impressum_list_col2 p, .impressum_list_col2 a {font-size:18px;}

	#disclaimer .container_single p {font-size: 18px;}

	/**** Footer *****************************/
	#footer {padding: 1rem 1rem;}
	#footer .container_col2 {width:100%;}
	#footer .container_col2 p {font-size: 18px;}
	#footer .container_col2 a {font-size: 16px;}
	#footer .container_col2 p:last-child{display: none;}

}





/* Sidemenu beim Laptop tiefer setzen */
@media screen and (max-height: 800px) and (oriantation:portrait){

	aside .sidemenu{
		top:25%;
		right:5%;
	}


}