/* Responsive-CSS - Lenk Webservice UG */

/* Kein Media-Query für Große Geräte, z.B. Desktop-PCs, weil dies der Standard "screen_css.css" ist */
/* ------------------------------------------------------------------------------------------------ */

/* Geräte bis 1300px */
@media (max-width:1300px) {

	div.content {max-width:700px;}
	div#produkt-detailansicht-artikelbeschreibung div.content_left {width:30%;}
	div#produkt-detailansicht-artikelbeschreibung div.content_right div.content_left {width:100%;}
	div#produkt-detailansicht-artikelbeschreibung div.content_right div.content_left img.produkt-detailansicht-image {width: 70%;margin-top: 0px; margin-left: 12%}
	div#produkt-detailansicht-artikelbeschreibung div.content_right {width:70%;}

	/*div.content.picture {
		width:calc(75% - 108px);
		max-width:680px !important;
	}*/
	
}


/* Geräte (moblie Navigation einblenden) bis 1199px */
@media (max-width:1199px) {

  div#left-mobil-menu {display:block;}
	section#header {display:none;}
	section#mainnavi {display:none;}
	div.content_bg_image {top:53px;}
	div.body_bg_image {top:53px;width: 100%;}
	div.body_bg_image div#bg_img_body {top:0px}
	
	div#left-mobil-menu div.mobilmenu_wrapper {
		/* EDIT LW, RS position:relative; */
		position:fixed;
		height: 60px;
		top:0px;
		left:0px;
		width:-moz-calc(100% - 0px);
		width:-webkit-calc(100% - 0px);
		width: calc(100% - 0px);
		margin:0px;
		padding:0px;
		background-color:#FFFFFF;
		background-image:url(../upload/bilder/body_home_bg.jpg);
		/* border-bottom:3px solid #afcb37; */
		/* -webkit-box-shadow:1px 3px 10px 3px rgba(51, 51, 51, 0.18); */ /* WebKit */
		-moz-box-shadow:1px 3px 10px 3px rgba(51, 51, 51, 0.18); /* Firefox */
		/* box-shadow:3px 3px 10px 3px rgba(51, 51, 51, 0.18); */ /* Standard */
		}		
	
	div.content_wrapper {min-height:0;}
	div.content.picture {width:calc(72% - 108px);}


}

@media (max-width: 1200px){
	.stacktable.large-only{table-layout:fixed;}
}

@media (max-width: 767px){
	#img_home_top{
		display:block;
		margin-top: -30px;
	}
}


/* Mittlere Geräte (iPad Querformat) bis 1024px */
@media (max-width:1199px) {

	section#header {margin-top:62px;}
	
	div#left-mobil-menu a#mobil-menu {left:15px; width: 5%}
	div#left-mobil-menu a#mobile_zum_shop {right:4%;}
	
	div#background {display:none;}
	
	div#left-mobil-menu a#mobil-logo {left: 40%;margin:0px;}
	a#zum_shop {display:none;}
	section#mainnavi {display:none;}
	nav#subnavi {display:none;}
	
	div.content {
        width:-moz-calc(90% - 72px);
        width:-webkit-calc(90% - 72px);
        width:calc(90% - 72px);	
		padding:25px 36px 30px 36px;
		}
	
	div.content.picture {
        width:-moz-calc(90% - 72px);
        width:-webkit-calc(90% - 72px);
        width:calc(90% - 72px);	
		margin-top:0px;
		padding:24px 36px 30px 36px;
		background-image:none;
		}	
		
	/*EDIT UH 2017/05: No breadcrumb with mobile menu */
	nav#breadcrumb {display:none;}
	/*nav#breadcrumb {
		width:-moz-calc(100% - 36px);
		width:-webkit-calc(100% - 36px);
		width:calc(100% - 36px);
		margin:10px 0px 10px 0px;
		padding:0px 0px 0px 36px;
		}		
	*/
	section#content {margin:0px 0px 30px 0px;}
	
	div.content.home {
		margin-top:30px;
        width:-moz-calc(60% - 0px);
        width:-webkit-calc(60% - 0px);
        width:calc(60% - 0px);
		padding:0px 0px 30px 0px;
		}
	
	div.content.picture{
		margin-left:0px;
	}
		
		div.content_schatten {display:none;}	
		
	div.content_bg_image {
        width:-moz-calc(100% - 0px);
        width:-webkit-calc(100% - 0px);
        width:calc(100% - 0px);
		padding:0px 0px 0px 0px;
		}		

	div.header_wrapper,
	div.content_wrapper,
	div.galerie_wrapper,
	div.teaser_wrapper,
	div.footer_wrapper {
		left:auto;
		width:-moz-calc(100% - 40px);
		width:-webkit-calc(100% - 40px);
		width: calc(100% - 39px);
		margin:0px 20px 0px 20px;
		padding:0px;
		}
		
	section#footer {
		/* EDIT LW, RS
		min-height:220px; 
		*/
		padding:20px 0px 20px 0px;
		background-color: rgba(207, 222, 178, 1);
		opacity: 0.6;
		}
		
		div.footer_schatten {display:none;}	
		
		div#social_media_links {display:none;}
		div#social_media_links_mobile {display:block;padding:0px;position: absolute;bottom: 2%;left: 28%;z-index: 3000;}
		
		div.footer_bg_sidenavi {
			float:left;
			position: absolute;
			right:0px;
			width:100%;
			padding:0px 0px 0px 0px;
			background-color:transparent!important;
			background-image:none;
			}
				

		div.footer_wrapper {display:block;}
			div.footer {width:100%;}

	nav#sidenavi,
	div.footer_bg_sidenavi {padding:0px;left:0px}
	div.footer_kontaktdaten {width:200px; padding:0px 0px 20px 0px;color:#000000; top:40px}
	div.footer_kontaktdaten p,
	div.footer_kontaktdaten h1,
	div.footer_kontaktdaten h2,
	div.footer_kontaktdaten h3,
	div.footer_kontaktdaten li, 
	div.footer_kontaktdaten a {font-family: 'Gilroy-Regular';font-weight: normal;font-size: 13px;line-height:20px;color:#000000;}

	nav#sidenavi {padding:0px;}
	nav#sidenavi ul.ul_sidenavi_1,
	nav#sidenavi ul.ul_sidenavi_1 li {top: 15%;padding-bottom: 2px;padding-top: 4px;}
	nav#sidenavi ul.ul_sidenavi_1 li{
		border-bottom:1px solid;
		width:150%;
		left:-20px
		}
	nav#sidenavi ul.ul_sidenavi_1 li:nth-child(1){
		padding-bottom:100px;
		left:-20px
	}
	nav#sidenavi ul.ul_sidenavi_1{margin-left:0%}
	nav#sidenavi ul.ul_mainnavi_1_e1{display:none}

	nav#sidenavi ul.ul_sidenavi_1 li a {float:left;width:271px;padding:0px 0px 0px 0px;color: #000000;font-weight: bold;font-family: 'Gilroy-Medium';padding-left: 20px}
		nav#sidenavi ul.ul_sidenavi_1 li.first a {padding:0px 0px 0px 20px;}
		nav#sidenavi ul.ul_sidenavi_1 li:hover a,
		nav#sidenavi ul.ul_sidenavi_1 li.over a {color:#000000;} 

	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 {float:left; position:relative; top:0px; padding:0px 0px 8px 0px;}
	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 li > a {width:260px; padding:0px 0px 4px 20px; color:#FFFFFF;}
	nav#sidenavi ul.ul_sidenavi_1 li.first ul.ul_sidenavi_1_e2 li > a {padding:0px 0px 4px 20px;}
	
	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 li:hover > a,
	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 li.over > a {color:#000000;}
}


/* Zwischengöße (iPad Hochformat) bis 767px */
@media (max-width:767px) {
	
	div.content.picture h1{
        font-size:30px !important;
    }

    .content h1, .content h1 a {
        margin:0px 0px 30px 0px;
        font-size:30px;
        line-height:36px;
        }

    .content h2, .content h2 a {
        margin:25px 0px 18px 0px;
        font-size:16px;
        line-height:24px;
        }
	
	.content h3, .content h3 a {
        margin:0px 0px 10px 0px;
        font-size:16px;
        line-height:24px;
        }

	div#produkt-detailansicht-artikelbeschreibung div,	
    .content p {margin:0px 0px 18px 0px; font-size:16px; line-height:22px;}

	.freeland_gross {margin:0px 0px 30px 0px!important; line-height:46px!important; font-family:'Freeland'!important; font-size:38px!important;}
	
	h1.ueberschrift-1-groesser {margin:10px 0px 15px 0px!important; line-height:44px!important; font-family:'Gilroy-Medium';font-size:38px!important;}
	h1.ueberschrift-1-groesser2 {margin:10px 0px 15px 0px!important; line-height:44px!important; font-family:'Gilroy-Medium'; font-size:38px!important;}
	
	/*EDIT UH 2017/05: No breadcrumb with mobile menu */
	nav#breadcrumb {display:none;}
	/*nav#breadcrumb {
		width:-moz-calc(100% - 0px);
		width:-webkit-calc(100% - 0px);
		width:calc(100% - 0px);
		margin:10px 0px 10px 0px;
		padding:0px 0px 0px 0px;
		}			
	*/
	div.content {
        width:-moz-calc(100% - 0px);
        width:-webkit-calc(100% - 0px);
        width:calc(100% - 0px);	
		padding:25px 0px 30px 0px;
		}

	div.content.home {
        width:-moz-calc(70% - 0px);
        width:-webkit-calc(70% - 0px);
        width:calc(70% - 0px);
		padding:0px 0px 30px 0px;
		}
		
	div.content.picture,
	div.content.home,
	div.content {min-width:0 !important;}	

	div.content.picture {
        width:-moz-calc(100% - 0px);
        width:-webkit-calc(100% - 0px);
        width:calc(100% - 0px) !important;
        margin-top:0px;
        padding:24px 0px 30px 0px;
        background-image:none;
        background-color:transparent!important;
  }
		div#left-mobil-menu a#mobil-logo {left: 35%;margin:0px;}
		div.body_bg_image div#bg_img_body {top:0px; width: 200%}
		
}


/* Kleine Geräte bis 740px */
@media (max-width:740px) {

	nav#sidenavi,
	nav#sidenavi ul.ul_sidenavi_1,
	nav#sidenavi ul.ul_sidenavi_1 li {padding-bottom: 2px;padding-top: 4px;}
	nav#sidenavi ul.ul_sidenavi_1 li{
		border-bottom:1px solid;
		width:150%;
		left:-20px
		}
	nav#sidenavi ul.ul_sidenavi_1 li:nth-child(1){
		padding-bottom:100px;
		left:-20px
	}
	nav#sidenavi ul.ul_sidenavi_1{margin-left:0%}
	nav#sidenavi ul.ul_mainnavi_1_e1{display:none}

	nav#sidenavi ul.ul_sidenavi_1 li a {float:left;width:271px;padding:0px 0px 0px 0px;color: #000000;font-weight: bold;font-family: 'Gilroy-Medium';padding-left: 20px}
		nav#sidenavi ul.ul_sidenavi_1 li.first a {padding:0px 0px 0px 20px;}
		nav#sidenavi ul.ul_sidenavi_1 li:hover a,
		nav#sidenavi ul.ul_sidenavi_1 li.over a {color:#000000;} 

	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 {float:left; position:relative; top:0px; padding:0px 0px 8px 0px;}
	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 li > a {width:260px; padding:0px 0px 4px 20px; color:#FFFFFF;}
	nav#sidenavi ul.ul_sidenavi_1 li.first ul.ul_sidenavi_1_e2 li > a {padding:0px 0px 4px 20px;}
	
	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 li:hover > a,
	nav#sidenavi ul.ul_sidenavi_1 li ul.ul_sidenavi_1_e2 li.over > a {color:#000000;}

	div.content iframe {width:450px; height:253px;}
	
		
}


/* Kleine Geräte bis 560px */
@media (max-width:560px) {

	h1.produkt-detailansicht-h1 {
        font-size:22px;
        line-height:28px;
        }
    
    div#left-mobil-menu a#mobil-logo {left: 35%;margin:0px;}
	div#left-mobil-menu a#mobil-menu {left: 15px; width: 5%}
	div#left-mobil-menu a#mobile_zum_shop {right:4%}
	
	div.sprachauswahl ul.ul-sprachauswahl-e1 li {margin:0px 10px 0px 0px;}

	div.content.home {
        width:-moz-calc(100% - 0px);
        width:-webkit-calc(100% - 0px);
        width:calc(100% - 0px);
		padding:0px 0px 30px 0px;
		}		
		
	div.content iframe {width:390px; height:219px;}
	
	div#produkt-detailansicht-artikelbeschreibung img.produkt-detailansicht-image {width:90%; margin-top: 0px;}
	div#produkt-detailansicht-artikelbeschreibung div.content_left {width:100%;}
	div#produkt-detailansicht-artikelbeschreibung div.content_right {width:100%;}
	div#rezept-detailansicht-artikelbeschreibung div.content_right {width:100%;}
		
}


/* Kleine Geräte bis 390px */
@media (max-width:390px) {

	div#left-mobil-menu a#mobil-logo {left: 25%;margin:0px;}

	div.content iframe {width:280px; height:157px;}
	
	div#produkt-detailansicht-artikelbeschreibung div,
	div#produkt-detailansicht-artikelbeschreibung div a,
	div#produkt-detailansicht-artikelbeschreibung div li,
	div#produkt-detailansicht-artikelbeschreibung div p {font-size:14px; line-height:18px;}	
	
	.content ul li.listenpunkt_grafik,
	div#produkt-detailansicht-artikelbeschreibung ul li {
		font-size:17px;
		line-height:20px;
		background-size: 21px;
		background-position: 0 12px;
		padding: 9px 20px 0 32px;
	}	
	
	.content ul li {
		font-size: 16px;
		padding: 0 0 3px 17px;
		background-position: 0 7px;
	}	
}

/*CSS code for Frusano USA page*/
@media (max-width:1199px){
	div#us_wrapper{
		display:block;
		margin-top:0px;
	}
	div#us_wrapper img{
		margin-left:0px;
		
	}
	div#us_wrapper hr{
		display:block
	}
	
	.fodmap_diet_img{
		width:95%;
		height:95%;
	}
}