@media only screen and (max-width: 1050px) {
	#page {width: 96% !important;}
}

@media only screen and (min-width: 1001px) {
	body.article #head.offcanvas #logoline,
	body.ressort #head.offcanvas #logoline {height: 15px; background-image: none;}
	body.article #head.offcanvas #logoline .homelink,
	body.ressort #head.offcanvas #logoline .homelink {display: none;}
	
}

@media only screen and (max-width: 1000px) {
	
	body.article #page.offcanvas, 
	body.ressort #page.offcanvas {margin-top: 85px;}
	
	#head #mainnav,
	#bottomnav,
	#teaser .navi2sp,
	#head > .line_950,
	#main .navi2sp,
	#advert-front,
	#main .element4sp .footer {display: none !important;}

	#head #logoline {background-image: url('/_pics/head_small_left.gif'); background-position: top left; width: 100%; height: 70px;}
	#head #logoline .homelink {float: left;}
	
	#content {width: 100%;}
	#content #main {width: 100%;}
	#content #main .element4sp {width: 100% !important; margin-left: 0 !important;}
	#content #main .element4sp .element {width: 22% !important;}
	#content #main .element4sp .hspace {width: 4% !important;}
	
	#content #main .element4sp .element figure img {width: 100%;}
	
	#head {margin-top: 0; position: relative;}
	body.article #head.offcanvas,
	body.ressort #head.offcanvas {width: 96%; margin-left: -2%; padding-left: 2%; padding-right: 2%;}
	body.article #head.offcanvas .burger.mobile,
	body.ressort #head.offcanvas .burger.mobile {right: 2% !important;}
	
	
	body.article #content #main {width: 60%;}
	
	.mainslider,
	.slide,
	#headline,
	#headline img.mainimg {width: 100% !important;}
	
	#headline {margin-left: 0 !important; background-image: none !important; height: auto !important; margin-bottom: 8px; border-bottom: 2px dotted #878787; padding-bottom: 16px; }
	#headline img.mainimg {margin-top: 0 !important;}
	#head .head.mobile {display: block; background-color: #f0f0f1; z-index: 100000 !important; position: relative; height: 120px; }
	#headline .logo.mobile {display: block; width: 70%; height: 100%; background-image: url('/_pics/head_large_responsive.gif'); background-size: contain; background-repeat: no-repeat; background-position: bottom left; background-color: #f0f0f1; float: left;}
	#head .burger.mobile {display: flex; float: right; top: 36px; position: absolute; z-index: 900000; right: 2px;}
	body.ressort #headline {display: none !important;}
	body.index #headline .burger.mobile {display: flex; float: right; width: 40px; text-align: right; line-height: 100%; height: 100%; top: inherit;}
	body.article .burger.mobile {display: flex; float: right; top: 36px; position: absolute; z-index: 900000; right: 2px;}
	
	.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {background-color: #878787 !important;}
	.hamburger {padding: 0 !important;}
	
	body.is-active {overflow: hidden;}
	
	body.is-active #content {opacity: 0.4;}
	
	body.is-active .hamburger-inner,
	body.is-active .hamburger-inner:before,
	body.is-active .hamburger-inner:after {background-color: white !important;}
	body.is-active #headline .burger.mobile,
	body.article.is-active .burger.mobile,
	body.ressort.is-active .burger.mobile { display: block; float: none !important; width: 40px; text-align: inherit; line-height: inherit; height: auto; position: fixed !important; top: 36px; right: 2% !important; }
	body.is-active #head .head.mobile {background-color: inherit;}
	body.is-active #head .logo.mobile {background-image: none; background-color: inherit;}
	body.is-active #head {position: relative !important;}
	body.is-active #mainmobile .head {background-image: url('/_pics/tt-menuoverlay-head.png'); background-size: contain; background-position: left; display: block; position: fixed; height: 200px; width: 100vw; top: 0; left: 0; content: " ";}
	body.is-active #mainmobile {display: block !important; position: fixed; z-index: 90000; height: 100vh; width: 100vw; top: 200px; left: 0; background-color: rgba(234, 15, 120, 0.8); padding-top: 10vh; opacity: 1; }
	
	#mainmobile > span {display: inline-block; text-align: left; width: 65vw; padding-bottom: 20px;}
	#mainmobile > span a {text-decoration: none; color: #fff; font-weight: bold; font-size: 1.2em; letter-spacing: 1.2px; padding-bottom: 2px; display: inline-block; border-bottom: 2px dashed white;}
}


@media only screen and (max-width: 980px) {
	body.article #content #main {width: 60%;}
	#teaser {width: 38%;}
	#teaser .element2sp {width: 100%;}
	#teaser .element2sp .element {width: 48%;}
	#teaser .element2sp .hspace {width: 4%;}
	#teaser .element2sp .element .img img {width: 100%;}
	#teaser .advert2sp img {width: 100%; height: auto;}
	
	article figure img {width: 100%;}

}

@media only screen and (max-width: 780px) {
	body.article #content #main {width: 72%;}
	
	#content .imgbox.fullwidth, #content .imgbox.fullwidth img  {width: 100% !important;}
	
	#teaser {width: 25%;}
	
	#teaser .element2sp .element {width: 100%;}
	#teaser .element2sp .hspace {display: none;}
	
	#content #main .element4sp {clear: inherit !important;}
	#content #main .element4sp .element {width: 32% !important;}
	#content #main .element4sp .hspace {width: 2% !important;}
	#content #main .element4sp .hspace.pos_4 {display: block !important;}
	#content #main .element4sp .hspace.pos_3,
	#content #main .element4sp .hspace.pos_6 {display: none !important;}
	
	#content #main .element4sp .hspace.pos_9,
	#content #main .element4sp .hspace.pos_12,
	#content #main .element4sp .hspace.pos_15,
	#content #main .element4sp .hspace.pos_18,
	#content #main .element4sp .hspace.pos_21,
	#content #main .element4sp .hspace.pos_24,
	#content #main .element4sp .hspace.pos_27,
	#content #main .element4sp .hspace.pos_30 {display: none !important;}

	#head .head.mobile {height: 100px;}

}

@media only screen and (max-width: 710px) {
	body.article #content #main {width: 100%;}
	body.article figure#mainimg {margin-left: -4%; width: 108%;}
	body.article figure#mainimg figcaption {width: 96%; margin-left: 4%;}
	#teaser {width: 96%; margin-left: 2%;}
	#teaser:before {width: 96%; height: 12px; border-bottom: 2px dotted #878787; content: " "; display: block;}
	#teaser .element2sp .element {width: 46%;}
	#teaser .element2sp .hspace {display: block;}
	
	#teaser .element2sp .footer {width: 96%; border-bottom: 2px dotted #878787; background-image: none; height: 12px;}
	
	#socialbookmarks {display: none;}
}

@media only screen and (max-width: 580px) {
	#head #logoline {background-image: url('/_pics/head_smaller_left.gif');}

	#content #main .element4sp .element {width: 49% !important; height: 240px;}
	#content #main .element4sp .hspace {width: 2% !important;}
	#content #main .element4sp .hspace.pos_4 {display: block !important;}
	#content #main .element4sp .hspace.pos_3 {display: block !important;}	
	
	#content #main .element4sp .hspace.pos_2,
	#content #main .element4sp .hspace.pos_4,
	#content #main .element4sp .hspace.pos_6,
	#content #main .element4sp .hspace.pos_8,
	#content #main .element4sp .hspace.pos_10,
	#content #main .element4sp .hspace.pos_12,
	#content #main .element4sp .hspace.pos_14,
	#content #main .element4sp .hspace.pos_16,
	#content #main .element4sp .hspace.pos_18,
	#content #main .element4sp .hspace.pos_20,
	#content #main .element4sp .hspace.pos_22,
	#content #main .element4sp .hspace.pos_24,
	#content #main .element4sp .hspace.pos_26,
	#content #main .element4sp .hspace.pos_28,
	#content #main .element4sp .hspace.pos_30 {display: none !important;}	
	
	#content #main .element4sp .hspace.pos_9,
	#content #main .element4sp .hspace.pos_15,
	#content #main .element4sp .hspace.pos_21,
	#content #main .element4sp .hspace.pos_27 {display: block !important;}
	
	#head .head.mobile {height: 50px;}
	#headline .logo.mobile {width: 60%;}
	#head #logoline .homelink {width: 175px;}

}