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

	.leistungen .container::before {width: 16%!important}
}

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

	.kontakt .container::before {width: 15%}
}

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

	.leistungen .container::before {width: 14%!important}
}

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

	.leistungen .container::before {width: 16%}
}

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

	.kontakt .container::before {width: 13%}
}




@media only screen and (max-width: 1790px) {
	.unternehmen .container::before{width: 15%}
	.leistungen .container::before {width: 12%!important}
	
}

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

	.kontakt .container::before {width: 10%}

}

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

	.leistungen .container::before {width: 10%!important}
}

@media only screen and (max-width: 1650px) {
	.unternehmen .container::before  {width: 12%}
}

@media only screen and (max-width: 1610px) {
	.kontakt .container::before{width: 8%}
	.leistungen .container::before {width: 8%!important}
}

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

header .quote {right: 11%;}
}

@media only screen and (max-width: 1265px) {
header .quote {right: 4%;}

}

@media only screen and (max-width: 1170px) {
	h1 {font-size: 33px;}
	header .quote::after {right: 60px;}
	header .quote {right: 0%;}
	header .quote::before, header .quote::after {
    content: '';
    height: 30px;
    width: 37px;
    display: block;
    position: absolute;
    background-size: 103%;
    top: 5px;
		}
	header .quote::after {}
	header .quote::before{left: -75px;}
	header .quote {  width: 455px;}
	header .quote::before {    left: -64px;}
	header .quote::after {    height: 29px;}
}

@media only screen and (max-width: 1056px) {
	header{ background-position: -220px bottom;}
}

@media only screen and (max-width: 975px) {
	#second-navi {display: none}
	.unternehmen .columns:first-child {padding-left: 0}
	.unternehmen .columns:first-child p {width: 100%}
	.unternehmen .sub-head {  top: -2px;    left: 0;}
	.sub-head {   font-size: 113px;}
	.leistungen .sub-head {    right: -30px;    top: -46px;}
	.kontakt .four,	.kontakt .eight {width: 48%}
	.unternehmen .container::before  {width: 9%}
}


@media only screen and (max-width: 950px) {
	header {    height: 663px;}
}

/* ----------------------------------------------------- tabletish screens */

@media only screen and (max-width: 860px) {
	header .quote {    width: 374px;}
	h1 {    font-size: 24px;}
}


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

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	header{	height: 721px;    max-height: 721px;}
	.sub-head {    font-size: 97px;}
	.unternehmen .sub-head {    top: 49px;}
	.hello-beautiful {font-size: 39px}
	section#leistungen .six {    width: 100%;    margin: 0;}
	section#leistungen .container {    margin-bottom: 50px;}
	.leistungen .sub-head {
    right: -33px;
    top: -44px;
}
	#menu-menu-1.menu .menu-item a, #menu-menu-2.menu .menu-item a {
    text-transform: uppercase;
    font-size: 15px;
}
		.kontakt .four,	.kontakt .eight {width: 48%}
	.unternehmen .columns:first-child p {
    width: 88%;
}
	.kontakt span.sub-head {
     top: -5px;
    left: -10px;
}
	#Unternehmen .six.columns:last-child {    position: relative;    height: 260px;}
	#Unternehmen .six.columns:last-child img {position: absolute; top: 50%}
	.main section {    padding: 60px 0;} 
	.anfrage::before { height: 150px;  top: -80px;}
	.leistungen {padding-top: 120px!important;}
	#anfrage h2::before {   height: 125px;    margin-top: -35px;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	.main section {    padding: 100px 0;}   
}

/* ----------------------------------------------------- smartphonish screens */
@media only screen and (max-width: 768px) {
	.kontakt span.sub-head {
     top: -5px;
    left: -10px;
}
	header #logo {width: 60%}
	.sub-head {    font-size: 97px;}
	.unternehmen .sub-head {    top: 49px;}
	.hello-beautiful {font-size: 39px}
	section#leistungen .six {    width: 100%;    margin: 0;}
	.copyright {    left: 30%;}
	section#leistungen .container {    margin-bottom: 50px;}
}

@media only screen and (max-width: 767px) {
	span.sub-head {  left: 0;}
	.leistungen .sub-head {  left: 10px; top: 38px; right: auto}
	.leistungen .container.headline {text-align: left}
	.anfrage h2 {    font-size: 32px;    padding: 20px;}
	.button {    font-size: 18px;    padding: 17px 25px;}
	.kontakt .four, .kontakt .eight {    width: 100%;}
	.kontakt span.sub-head {    left: 20px;    top: -2px;}
	.copyright, .impressum {position: relative;left: auto;}
	
	/*header {    height: 683px;background-size: 260%;   background-position: -160px bottom;}*/
	header {    height: 98vh;		background-size: 235%;background-position: -160px bottom;}
	header #logo {   width: 80%;}
	header .quote {    left: 21px;    top: 140px;    width: 89%!important;		right:auto}
	header .quote::before {display: none}
	header .quote::after { display: none;   height: 29px;    right: 26px;}	
	section#leistungen .container {    margin-bottom: 20px;}
	section#leistungen .container:last-child {margin-bottom: 0}
	.unternehmen .container::before  {display: none!important}
	.kontakt .container::before{display: none!important}
	.leistungen .container::before {display: none!important}
	.anfrage::before {display: none!important}
}
@media only screen and (max-width: 500px) {
	.cat-con span {font-size: 16px}
	header .quote span{font-size: 40px; position: absolute;  right: auto; left: 0; top: 59px;}
	.main section {    padding: 60px 0;}
	#anfrage h2::before {    display: block;    content: ' ';    height: 125px;    margin-top: -115px;    visibility: hidden;}
	#Unternehmen .sub-head {    top: -9px;}
	.unternehmen .columns:first-child {    padding-top: 40px;}
	.mitglieder .logo-zr {    width: 160px;    display: block;    float: right;    margin-right: 20px;}
	.mitglieder .logo-mrn {    width: 71px;    margin: 0px 30px;    display: block;    float: left;}
	.mitglieder h2::before {    height: 85px;}
	.leistungen .sub-head {    top: -46px;}
	.popup {	width: 90%;    height: 90%;}
	
	}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
		header {  background-size: 283%;   background-position: -230px bottom;}
		
}
/* ----------------------------------------------------- desktopish screens */




/* -------------------------------- Browser specific CSS */