/*---------------- Colours --------------*/

.white {
	background: white!important;
}

.white-text,
.white-text p {
	color: white!important;
}

.black {
	background: black!important;
}

.black-text,
.black-text p {
	color: black!important;
}

.teal {
	background: #133c43!important;
}

.teal-text {
	color: #133c43!important;
}

.yellow {
	background: #f4d90c!important;
}

.yellow-text {
	color: #f4d90c!important;
}

.anthrazit {
	background: #202020!important;
}

.anthrazit-text,
.anthrazit-text p {
	color: #202020!important;
}

.light-grey {
	background: #b8b8af!important;
}

.light-grey-text,
.light-grey-text p {
	color: #b8b8af!important;
}

.mid-grey {
	background: #8b8b87!important;
}

.mid-grey-text,
.mid-grey-text p {
	color: #8b8b87!important;
}

.dark-grey {
	background: #444444!important;
}

.dark-grey-text,
.dark-grey-text p {
	color: #444444!important;
}

.brown {
	background: #7d624b!important;
}

.brown-text,
.brown-text p {
	color: #7d624b!important;
}

.green {
	background: #7b9353!important;
}

.green-text,
.green-text p {
	color: #7b9353!important;
}

/*-------------- Allgemeine Styles ------------*/

* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box!important;
	-webkit-box-sizing: border-box!important;
	-o-box-sizing: border-box!important;
	box-sizing: border-box!important;
	list-style: none;
	position: relative;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

a,
.btn {
	cursor: pointer!important;
}

p {
	line-height: 1.5rem;
	font-weight: 200;
	font-size: 1.125rem;
}

.heading-1 {
	font-size: 2.75rem!important;
	line-height: 2.75rem!important;
}

.heading-2 {
	font-size: 2.25rem!important;
	line-height: 2.25rem!important;
}

.heading-3 {
	font-size: 2rem!important;
	line-height: 2rem!important;
}

.heading-4 {
	font-size: 1.75rem!important;
	line-height: 1.75rem!important;
}

.heading-5 {
	font-size: 1.5rem!important;
	font-size: 1.5rem!important;
}

.heading-6 {
	font-size: 1.25rem!important;
	line-height: 1.25rem!important;
}

@media screen and (min-width: 1024px) {
	.heading-1 {
		font-size: 3.25rem!important;
		line-height: 3.25rem!important;
	}
	
	.heading-2 {
		font-size: 2.75rem!important;
		line-height: 2.75rem!important;
	}
	
	.heading-3 {
		font-size: 2.25rem!important;
		line-height: 2.25rem!important;
	}
	
	.heading-4 {
		font-size: 2rem!important;
		line-height: 2rem!important;
	}
	
	.heading-5 {
		font-size: 1.75rem!important;
		line-height: 1.75rem!important;
	}
	
	.heading-6 {
		font-size: 1.5rem!important;
		line-height: 1.5rem!important;
	}
}

@media screen and (min-width: 1280px) {
	.heading-1 {
		font-size: 3.75rem!important;
		line-height: 3.75rem!important;
	}
	
	.heading-2 {
		font-size: 3.25rem!important;
		line-height: 3.25rem!important;
	}
	
	.heading-3 {
		font-size: 2.75rem!important;
		line-height: 2.75rem!important;
	}
	
	.heading-4 {
		font-size: 2.25rem!important;
		line-height: 2.25rem!important;
	}
	
	.heading-5 {
		font-size: 1.9rem!important;
		line-height: 1.9rem!important;
	}
	
	.heading-6 {
		font-size: 1.6rem!important;
		line-height: 1.6rem!important;
	}
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0px;
}

a, button {
    outline: none;
}

html {
	overflow-x: hidden;
}

*, body {
	font-family: 'Eurostile', sans-serif;
}

/*------------ Helfer-Klassen------------*/

.valign {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 15px;
}

@media screen and (min-width: 600px) {
	.valign {
		padding: 0 30px;
	}
}

@media screen and (min-width: 1024px) {
	.valign {
		padding: 0;
	}
}

.absolute {
	position: absolute;
}

.show {
	display: block;
}

.hide {
	display: none;
}

.noMarg {
	margin: 0!important;
}

.noMargTop {
	margin-top: 0!important;
}

.noMargLeft {
	margin-left: 0!important;
}

.noMargRight {
	margin-right: 0!important;
}

.noMargBot {
	margin-bottom: 0!important;
}

.noPad {
	padding: 0!important;
}

.noPadTop {
	padding-top: 0!important;
}

.noPadLeft {
	padding-left: 0!important;
}

.noPadRight {
	padding-right: 0!important;
}

.noPadBot {
	padding-bottom: 0!important;
}

.inline-block {
	display: inline-block!important;
}

.block {
	display: block!important;
}

.inline {
	display: inline!important;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

.noTrans {
	text-transform: none;
}

.italic {
	font-style: italic;
}

.normal {
	font-style: normal;
}

.light {
	font-weight: 200!important;
}

.bold {
	font-weight: 700!important;
}

.ultra,
.ultra p {
	font-weight: 900!important;
}

.noDeco {
	text-decoration: none;
}

.underline {
	text-decoration: underline;
}

.center {
	margin: 0 auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

.center-align {
	text-align: center;
}

.left-align {
	text-align: left;
}

.right-align {
	text-align: right;
}

.justify {
	text-align: justify;
	-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
}

.full {
	width: 100%!important;
	max-width: 100%!important;
}

/*-------------- GRID-Styles ------------*/

.container {
	width: 100%!important;
	max-width: 1280px!important;
	padding: 0 15px!important; 
	margin: 0 auto!important;
}

.max-960 {
	max-width: 960px!important;
}

.max-800 {
	max-width: 800px!important;
}

.max-900 {
	max-width: 900px!important;
}

.max-1000 {
	max-width: 1000px!important;
}

.row {
	overflow: hidden;
}

.col {
	display: inline-block;
	padding: 20px 0;
	vertical-align: top;
}

.s1 {
	width: 8%;
}

.s2 {
	width: 16%;
}

.s3 {
	width: 24.5%;
}

.s4 {
	width: 33%;
}

.s5 {
	width: 41%;
}

.s6 {
	width: 49.5%;
}

.s7 {
	width: 58%;
}

.s8 {
	width: 66%;
}

.s9 {
	width: 74.5%;
}

.s10 {
	width: 83%;
}

.s11 {
	width: 91%;
}

.s12 {
	width: 100%;
}

.offset-s1 {
	margin-left: 8%;
}

.offset-s2 {
	margin-left: 16%;
}

.offset-s3 {
	margin-left: 24.5%;
}

.offset-s4 {
	margin-left: 33%;
}

.offset-s5 {
	margin-left: 41%;
}

.offset-s6 {
	margin-left: 49%;
}

.offset-s7 {
	margin-left: 58%;
}

.offset-s8 {
	margin-left: 66%;
}

.offset-s9 {
	margin-left: 74.5%;
}

.offset-s10 {
	margin-left: 83%;
}

.offset-s11 {
	margin-left: 91%;
}

.offset-s12 {
	margin-left: 100%;
}

@media screen and (min-width:600px) {
	
	.container {
		padding: 0 30px!important; 
	}
	
	.col {
		padding: 20px 10px;
	}
	
	.offset-s1,
	.offset-s2,
	.offset-s3,
	.offset-s4,
	.offset-s5,
	.offset-s6,
	.offset-s7,
	.offset-s8,
	.offset-s9,
	.offset-s10,
	.offset-s11,
	.offset-s12 {
	    margin-left: 0;
	}
	
	.m1 {
		width: 8%;
	}
	
	.m2 {
		width: 16%;
	}
	
	.m3 {
		width: 24.5%;
	}
	
	.m4 {
		width: 33%;
	}
	
	.m5 {
		width: 41%;
	}
	
	.m6 {
		width: 49.5%;
	}
	
	.m7 {
		width: 58%;
	}
	
	.m8 {
		width: 66%;
	}
	
	.m9 {
		width: 74.5%;
	}
	
	.m10 {
		width: 83%;
	}
	
	.m11 {
		width: 91%;
	}
	
	.m12 {
		width: 100%;
	}
	
	.offset-m1 {
		margin-left: 8%;
	}
	
	.offset-m2 {
		margin-left: 16%;
	}
	
	.offset-m3 {
		margin-left: 24.5%;
	}
	
	.offset-m4 {
		margin-left: 33%;
	}
	
	.offset-m5 {
		margin-left: 41%;
	}
	
	.offset-m6 {
		margin-left: 49.5%;
	}
	
	.offset-m7 {
		margin-left: 58%;
	}
	
	.offset-m8 {
		margin-left: 66%;
	}
	
	.offset-m9 {
		margin-left: 74.5%;
	}
	
	.offset-m10 {
		margin-left: 83%;
	}
	
	.offset-m11 {
		margin-left: 91%;
	}
	
	.offset-m12 {
		margin-left: 100%;
	}
}

@media screen and (min-width: 1200px) {
	
	.col {
		padding: 20px 15px;
	}		
	
	.offset-m1,
	.offset-m2,
	.offset-m3,
	.offset-m4,
	.offset-m5,
	.offset-m6,
	.offset-m7,
	.offset-m8,
	.offset-m9,
	.offset-m10,
	.offset-m11,
	.offset-m12 {
	    margin-left: 0;
	}
	
	.l1 {
		width: 8%;
	}
	
	.l2 {
		width: 16%;
	}
	
	.l3 {
		width: 24.5%;
	}
	
	.l4 {
		width: 33%;
	}
	
	.l5 {
		width: 41%;
	}
	
	.l6 {
		width: 49.5%;
	}
	
	.l7 {
		width: 58%;
	}
	
	.l8 {
		width: 66%;
	}
	
	.l9 {
		width: 74.5%;
	}
	
	.l10 {
		width: 83%;
	}
	
	.l11 {
		width: 91%;
	}
	
	.l12 {
		width: 100%;
	}
	
	.offset-l1 {
		margin-left: 8%!important;
	}
	
	.offset-l2 {
		margin-left: 16%;
	}
	
	.offset-l3 {
		margin-left: 24.5%;
	}
	
	.offset-l4 {
		margin-left: 33%;
	}
	
	.offset-l5 {
		margin-left: 41%;
	}
	
	.offset-l6 {
		margin-left: 49.5%;
	}
	
	.offset-l7 {
		margin-left: 58%;
	}
	
	.offset-l8 {
		margin-left: 66%;
	}
	
	.offset-l9 {
		margin-left: 74.5%;
	}
	
	.offset-l10 {
		margin-left: 83%;
	}
	
	.offset-l11 {
		margin-left: 91%;
	}
	
	.offset-l12 {
		margin-left: 100%;
	}
	
	.hide-on-large {
		display: none!important;
	}
}

@media screen and (min-width:1100px) {
	
	.container {
		padding: 0 50px!important; 
	}
}

@media screen and (min-width:1400px) {
	
	.container {
		padding: 0!important; 
	}
}