/* Merkzettel nach links */
@media only screen and (max-width:1700px) {
    .merkzettel {
        left: 5px;
    }
}

/* Seite/Banner nur verkleinern wenn der Browser media queries versteht */
@media only screen and (max-width: 1500px) {
	
	.container {
		width: auto;
		max-width: 1020px;
	}
}


@media only screen and (max-width: 1050px) {
    /* Produktberater */
    .pb_right {
        padding: 10px 0 10px 100px;
    }
    
	.greyInfos {
		overflow:hidden;
	}
	.greyInfos .column {
		width:49%;
	}
	.greyInfos .column.planung {
		margin-left:0;
		clear:both;
	}
	.greyInfos .column.planung,
	.greyInfos .column.webcode {
		margin-top:20px;
	}
}

@media only screen and (max-width: 1030px) {
    
    .dropDown p.headline {
        font-size: 30px;
    }
    
    .dropDown p {
        font-size: 18px;
        margin-bottom: 0;
    }
    /* ES: smaller font / product advisor overground */
	#c1665 .pb_top h2 {
	    font-size: 17px;
	}
}


@media only screen and (max-width: 1000px) {
	
	/* Spalten Startseite auf 100%, kein float mehr */
	.main .content.teaser,
	.main aside.menu {
		width: 100%;
	}
	/* Teaser auf Produkte-Seite */
	aside + .content .teaserList {
		padding: 0;
	}
	
	aside.menu {
		margin-top: 20px;
	}
	
	/* Subnav zweispaltig */
	.grey aside {
		overflow: hidden;
	}
	.grey aside ul {
		width: 48.61111111111111%;
		float: left;
		margin: 0;
		padding: 0;
	}
	.grey aside ul.last {
		float: right;
	}
	.grey aside ul li {
		margin-right: 1px;
		position: static;
	}
	.grey aside li.last a {
		margin-top: 5.555555555555556%;
	}
	
	nav.subMenu {
		height: 42px;
		line-height: 42px;
	}
	nav.subMenu a {
		font-size: 12px;
		margin-right: 1%;
	}
	
	/* Wasseruhr Banner */
	.banner .watercounter_container {
		left: 10px;
		top: 23%;
	}
	.banner .watercounter_container embed {
		float: left;
	}
	.banner .watercounter {
		display: table-cell;
		height: 130px;
		vertical-align: bottom;
	}
	
	/* Presse Bilder */
	.tx-hidownloadgallery-pi1 {
		overflow: hidden;
	}
	.presse-row {
		display: inline;
	}
	.presse-img.first {
		margin-left: 16px;
	}
	
	.dropDown {
		padding-left:20px;
		padding-right:20px;
	}
	.dropDown .container > a {
		width:22.5490196% !important;
		padding-bottom:22.5490196% !important;
		margin-right:1.96078431373% !important;
	}
	.dropDown a.wastewater {
		margin-right:0 !important;
	}
	.dropDown a span {
		font-size:11px;
	}
	.dropDown a.rainwaterAbove,
	.dropDown a.rainwaterUnderground,
	.dropDown a.stormwater,
	.dropDown a.wastewater {
		margin-bottom:1.96078431373% !important;
	}
}


@media only screen and (max-width: 960px) {
	/* Produktberater */
    .pb_top {
        margin: 0 auto 10px;
        max-width: 400px;
        min-width: 300px;
    }
    .pb_left,.pb_right {
        float: none;
        width: 100%;
        background: rgba(255,255,255,0.90);
        padding: 10px 10px 0;
        max-width: 400px;
        min-width: 300px;
        height: auto;
        position: relative;
    }
    .pb_left {
        margin: 0 auto 30px;
    }
    .pb_right {
        margin: 0 auto;
        height: auto;
    }
    #pb_back {
        background: none;
    }
    .pb_option,
    .pb_option.pb_break,
    .pb_option.pb_lower {
        margin: 0 10px 10px 0;
        clear: none;
    }
    .pb_groessenberechnung_left, .pb_groessenberechnung_right {
        clear: both;
        float: none;
        width: 100%;
    }
    .pb_groessenberechnung_left {
        overflow: hidden;
        margin: 0 0 10px;
    }
    .pb_groessenberechnung_right {
        margin-top: 40px;
    }
	.pb_groessenberechnung_right > div,
	.pb_groessenberechnung_left > div {
		margin-top: 15px;
	}
    #pb_plz, #pb_dachtyp {
        float: left;
        margin: 15px 0 20px;
    }
    #pb_plz {
        margin: 15px 20px 20px 0;
    }
    #pb_sicherheit {
        clear: both;
    }
    .pb_background_arrow {
        background: url("../images/produktberater/arrow.png") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
        bottom: -20px;
        display: block;
        height: 20px;
        padding: 0;
        position: relative;
        width: 100%;
    }
    #pb_groessenberechnung {
        height: 480px;
    }
    .regenwasserbedarf_back {
        border-bottom: 1px solid black;
        clear: both;
        float: none;
        margin: 0 !important;
        overflow: hidden;
        width: 100%;
    }
    .regenwasserbedarf_wrapper {
        border: none;
    }
    #ersparnis,
    #tankgroesse {
        float: none;
        margin: 10px 0 0;
        width: 100%;
    }
    .produktberater_ergebnisse #pb_produkte .teaserlisteklein {
        border: none;
        margin: 0;
    }
    #pb_produkte .teaserlisteklein .eintrag {
        border-bottom: 1px solid #ccdfee;
        float: none;
        margin: 10px 0 0;
        padding-bottom: 10px;
        width: 100%;
    }
    #ertragTooSmall {
        margin: 20px 0 0 0;
    }
    .pb_summe_ersparnis p {
        float: left;
        margin-right: 10px;
    }
	/*CookieLeiste anpassen */
	#cookies.big {	
    height: 105px;
	padding: 5px 20px;
	}
}

@media only screen and (max-width: 910px) {
    /* DropDown */
    .dropDown p.headline {
        font-size: 28px;
    }
    
    .dropDown p {
        font-size: 16px;
    }
	
	/* Katalog Downloads */
	.catalogDownloads .column .row a {
		padding: 15px;
	}
	.catalogDownloads h4 {
		font-size: 14px;
	}
}

@media only screen and (max-width: 850px) {
    
    .dropDown p.headline {
        font-size: 26px;
    }
    
    .dropDown p {
        font-size: 14px;
    }
}


@media only screen and (max-width: 830px) {
	/* Nur noetig falls die Navigationspunkte erweitert werden
	.logo {
		margin-bottom: 45px;
	}
	*/
	
	/* Kontaktformular */
	.contactForm .personal,
	.contactForm .candidate {
		padding: 20px 10px;
	}
	.contactForm .contactStart > .type-radio,
	.contactForm .contactStart > .type-select,
	.contactForm .contactStart > .type-text,
	.contactForm .product,
	.contactForm .type-button {
		padding-left: 10px;
	}
	/*CookieLeiste anpassen */
	#cookies.big {	
    height: 115px;
	padding: 5px 5px;
	}
}

@media only screen and (max-width: 767px) {
	
	/* Spalten auf 100%, kein float mehr */
	.main .content,
	.main aside {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	
	.main .container > .left,
	.main .container > .right {
		float: none;
	}
	/* Abstand nach oben einfuegen, da nicht mehr gefloatet */
	.content + aside,
	aside + .content {
		margin-top: 20px;
	}
	
	/* Downloads raus */
	aside .tx-hifilemanagement-pi1 {
		display: none;
	}

	.teaserList a.teaser,
	.startTeaser a span {
		font-size: 12px;
	}
	
	aside.menu li a {
		font-size: 18px;
		height: 60px;
		line-height: 60px;
	}
	
	.logo {
		margin-bottom: 15px;
	}
	
	/* Menu als Icon */
	nav.mainMenu {
		overflow: inherit;
		position: static;
	}
	nav.mainMenu ul {
		display: none;
		height: auto;
		width: 100%;
		float: none;
		background: #fff;
	}
	nav.mainMenu > ul {
		position: absolute;
		top: 90px;
		left: 0;
		z-index: 99;
		box-shadow: 0 3px 3px #666;
		-webkit-box-shadow: 0 3px 3px #666;
	}
	nav.mainMenu li {
		float: none;
		position: relative;
	}
	nav.mainMenu li a {
		height: auto;
		line-height: 20px;
		padding: 10px 8px;
		font-size: 16px;
	}
	nav.mainMenu li.act > a,
	nav.mainMenu li a:hover {
		border-left: none;
		margin-left: 0;
	}
	nav.mainMenu li a,
	nav.mainMenu li.sub span,
	nav.mainMenu li.act.sub span,
	nav.mainMenu li.sub a:hover span {
		background: none;
	}
	nav.mainMenu ul li {
		border-top: 1px solid #E5E5E5;
	}
	nav.mainMenu label {
		display: block;
	}
	nav.mainMenu label,
	.search label {
		width: 42px;
		height: 37px;
		line-height: 37px;
		position: absolute;
		right: 20px;
		top: 43px;
		/*background: #f3f3f3 url('../images/menu.png') center no-repeat;*/
		background: #f3f3f3;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 2px;
		-webkit-border-radius: 2px;
		box-shadow: 0 1px 0 #8e8e8e;
		-webkit-box-shadow: 0 1px 0 #8e8e8e;
		color: #1569AF;
		font-size: 22px;
		text-align: center;
	}
	/* Dropdown bei Produkte entfernen */
	.dropDown {
		display:none !important;
		visibility:hidden !important;
		opacity:0 !important;
	}
	nav.mainMenu label:hover,
	.search label:hover {
		color: #E82427;
	}
	
	nav.mainMenu ul label {
		top: 7px;
		height: 24px;
		background-image: url('../images/arrow-down.png');
	}
	/* Menu einblenden bei Aktivieren der Checkbox */
	nav.mainMenu input:checked ~ ul {
		display: block;
	}
	nav.mainMenu ul input:checked + label {
		background-image: url('../images/arrow-up.png');
	}
	
	/* Zweite Ebene */
	nav.mainMenu ul ul {
		background-color: #f3f3f3;
	}
	nav.mainMenu ul ul li {
		border-color: #fff;
	}
	nav.mainMenu li li a {
		padding-left: 4%;
		font-size: 15px;
	}
	nav.mainMenu li li.act > a {
		background: none;
	}
	nav.mainMenu ul ul label {
		background-color: #fff;
	}
	
	/* Dritte Ebene */
	nav.mainMenu li li li a {
		padding-left: 8%;
		font-size: 14px;
	}
	
	/* Vierte Ebene */
	nav.mainMenu li li li li a {
		padding-left: 12%;
	}
	
	/* Fuenfte Ebene */
	nav.mainMenu li li li li li a {
		padding-left: 16%;
	}
	
	/* Subnav weg */
	nav.subMenu {
		display: none;
	}
	
	/* Breadcrumb weg */
	.breadcrumbs {
		display: none;
	}
	
	/* Subnav Inhalt 1. Ebene weg */
	aside nav > ul > li,
	aside nav > ul > li.act > a {
		display: none;
	}
	aside nav > ul > li.act {
		display: block;
	}
	/* Trennlinie oben dazu */
	aside nav > ul > li.act ul {
		border-top: 1px solid #E5E5E5;
	}
	/* Subnav TOP komplett Ebene weg, sollte nur bis max. 3. Ebene enthalten */
	aside.top nav > ul {
		display: none;
	}
	aside div.csc-space-before-30:nth-of-type(1) {
		margin-top: 0 !important;
	}
	
	/* Footer untereinander */
	footer .copy.left,
	footer nav.right {
		width: 100%;
		float: none;
		text-align: center;
	}
	footer a {
		margin: 0 5px 0 3px;
	}
	footer li {
		display: inline-block;
	}
	footer .uvp {
		text-align: center;
	}

	#footerCopyLeftImage {
		position: static;
		display: block;
		padding: 2px 0 0;
		margin: 0px auto;
	}
	
	/* Downloads untereinander */
	.content ul.csc-uploads li {
		float: none;
		width: 100% !important;
	}
	
	/* Adresse untereinander */
	.adresse ul li {
		float: none;
		width: 100%;
		font-size: 14px;
	}
	
	/* Google Maps hoeher */
	.tx-go-maps-ext {
		padding-bottom: 50%;
	}
	
	/* Kontaktformular */
	.contactBox {
		width: auto;
		margin-bottom: 20px;
		padding: 20px;
	}

	.contactBox.right {
		float: none;
	}
	.contactStart {
		margin: 0;
	}
	
	.subNav .column.left {
		float:none;
	}
	.subNav .column.right {
		display:none;
	}
	
	/* Call us (UK) */
	.call-us {
		display: none;
	}
}


@media only screen and (max-width: 620px) {

	/* Teaser zweispaltig */
	.teaserList a.teaser,
	div.startTeaser > a {
		display: inline-block;
		float: left;
		width: 48.61111111111111% !important;
		padding-bottom: 48.61111111111111% !important;; /* make it square */
		margin: 0 0 2.777777777777778% 0 !important;;
		font-size: 18px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	.teaserList {
		margin: 0;
	}
	/* gerade teaser rechts floaten */
	.startTeaser a:nth-child(even),
	div.teaserList > a.teaser:nth-child(even) {
		float: right;
	}
	
	/* Flaggen nach rechts, Startseite Flaggen (eigentlich im Header) nach oben */
	.language > ul {
		right: 0;
	}
	.language > ul > li {
		height: 32px;
	}
	.language > ul > li:hover > ul {
		top: 0;
	}
	
	/* TODO: Suche als Icon */
	.search {
		border-width: 0;
		position: static;
	}
	.search .border {
		display: none;
		position: relative;
	}
	.search.products .border {
		display: block;
	}
	.search label {
		/* background-image: url('../images/search.png'); */
		display: block;
	}
	/* Main Menu und Suche vorhanden (z.B. nicht auf der Startseite)? Suche weiter nach links ruecken */
	.mainMenu ~ .search label {
		right: 70px;
	}
	.search input:checked ~ .border {
		display: block;
		float: left;
		margin-bottom: 20px;
	}
	
	/* Kontaktformular */
	.contactForm input,
	.contactForm select,
	.contactForm .type-select select,
	.contactForm .type-text.product input,
	#country {
		width: 93%;
	}
	.contactForm .type-radio input,
	.contactForm input.checkbox,
	.contactForm .type-check input {
		width: auto;
	}
	.contactForm textarea {
		width: 100%;
	}
	.contactForm label {
		float: none;
	}
	.contactForm .type-submit label {
		display: none;
	}
	.contactForm .type-check.privacy {
		margin-left: 0;
		margin-right: 0;
	}
	
	/* Wasseruhr Banner */
	.banner .watercounter_container {
		top: 10%;
	}
	
	/* Text mit Bild */
	div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap,
	div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
		float: none;
	}
	.csc-textpic-text {
		margin: 0 !important;
	}
}
@media only screen and (max-width: 560px) {
	/* Zweispaltig untereinander */
	.two_columns > .column.size50 {
		width: 100%;
		margin: 0;
	}
	.two_columns > .column.last {
		margin-top: 20px;
	}
		/*CookieLeiste anpassen */
	#cookies.big {
	height: 135px;
	}
}
@media only screen and (max-width: 480px) {

	/* Ueberschriften verkleiner */
	h1 {
		font-size: 26px;
	}
	.teaserList a.teaser {
		font-size: 15px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	
	aside.menu li a {
		font-size: 16px;
	}
        
	/* Kontaktformular */
	.two-columns .column {
		float: none;
		margin-left: 0;
		width: 100%;
	}
	
	/* Wasseruhr Banner */
	.banner .watercounter_container {
		top: 20px;
	}
	.banner .watercounter_container embed {
		display: none;
	}
	.banner .watercounter {
		display: block;
		height: auto;
		text-align: center;
	}
	#cookies.big {
	height: 155px;
	}

}
@media only screen and (max-width: 370px) {

	/* Ueberschriften verkleiner */
	h1 {
		font-size: 24px;
	}
	/* Logo / Header */
	.logo {
		width: 134px;
	}
	.logo img {
		width: 75%;
	}
	nav.mainMenu label,
	.search label {
		top: 35px;
	}
	nav.mainMenu > ul {
		top: 82px;
	}
	
	.teaserList a.teaser {
		font-size: 12px;
		border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	
	aside.menu ul,
	aside.menu ul.last {
		width: 100%;
		float: none;
	}
	aside.menu li a,
	aside.menu li.last a {
		margin-top: 2.777777777777778%;
	}
	
	/* Wasseruhr Banner */
	.banner .watercounter_container {
		top: 10px;
	}
	.banner .watercounter {
		font-size: 21px;
	}
	
	/* Produktberater kompakter */
	.pb_groessenberechnung_right {
		margin-top: 20px;
	}
	#pb_plz select,
	#pb_dachtyp select {
		width: 1px;
	}
	#cookies.big {
	height: 165px;
	}

}