@media only screen and (min-width: 1200px) {
	.headline {font-size: 3.8em}
	.mobile {display: none}
	.right-box {width: 60%; margin-left: 20px; margin-right: -160px;}
	.left-box {width: 60%; margin-left: -160px; margin-right: 20px}
}

@media only screen and (min-width: 992px) and (max-width:1199px) {
	.headline {font-size: 3em}
	.mobile {display: none}
	.right-box {width: 72%; margin-left: 20px; margin-right: -160px;}
	.left-box {width: 72%; margin-left: -160px; margin-right: 20px}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.headline {font-size: 2.6em}
	.desktop {display: none}
	.right-box {width: 100%; margin-left: 0px; margin-right: 0px;}
	.left-box {width: 100%; margin-left: 0px; margin-right: 0px;}
}

@media only screen and (min-width: 576px) and (max-width:767px) {
	.headline {font-size: 2.4em}
	.right-box {width: 60%; margin-left: 10px; margin-right: 0px;}
	.left-box {width: 60%; margin-left: 0px; margin-right: 10px;}
	.quote-content {font-size: 1.6em;}
	.desktop {display: none}
}

@media screen and (max-width: 575px) {
	.headline {font-size: 2.2em}
	.quote-content {font-size: 1.6em;}
	.desktop {display: none}
	img.big-icon {max-width: 260px}
}



@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */ 
	.hero {background-attachment: scroll;}
}


@supports not (-webkit-touch-callout: none) {
	/* CSS for other than iOS devices */ 
	.hero {background-attachment: fixed;}
}