@charset "utf-8";

/**
 *
 * GRUNDSÄTZLICHE LAYOUT EINSTELLUNGEN
 *
 * 1: 	GLOBALE VOREINSTELLUNGEN
 *		grundsättliche Einstellungen die das Layout angehen.
 *
 * 2: 	ALLGEMEINE KLASSEN
 *		Allgemien Klassen die für das Layout genutzt werden können. Paddings, Farben, Schriften, Floats etc.
 *
 * 3: 	SPARHANDY MINI-GRID
 *		Spalten und Reihen, die für fuildes, responsives Layout benutzt werden können.
 *
 */



/* BOX MODEL
----------------------------------------------------------------------------------------------------------  
------------------------------------------------------------------------------------------------------- */

* {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

*:before {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}





/* GLOBALE VOREINSTELLUNGEN
----------------------------------------------------------------------------------------------------------  
------------------------------------------------------------------------------------------------------- */

html {
  font-size: 100.1%;
	-webkit-text-size-adjust: 100.1%;
	-ms-text-size-adjust: 100.1%;
	height:100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
	font-size: 100%;
	font-style: normal;
	font-weight: 300;
	background: #fff;
	color: #0c2e44;
	text-align:left; 
	height: 100%;
	overflow-x: hidden;
}




/* SUP SUB
---------------- */

sup {
	display: inline-block;
	font-size: 0.5em;
	vertical-align: 0.4em;
}

sub {
	display: inline-block;
	font-size: 0.5em;
	vertical-align: -0.4em;
}




/* BILDER
---------------- */

img {
	vertical-align: top;
	padding: 0;
	margin: 0;
	border: 0;
	border: none;
}

.img-fluid {
	width: 100%;
	height: auto;
}

.img-fluid[usemap] {
	border: none;
	height: auto;
	max-width: 100%;
	width: auto;
}

.img-fullwidth {
	height: 600px;
	overflow: hidden;
}

	.img-fullwidth img {
		min-width: 100%;
		min-height: 600px;
	}




/* VIDEOS
---------------- */

.responsive-video {
	position: relative; 
	padding-bottom: 56.25%; /* 16:9 */
	overflow: hidden; 
	width: 100%;
	height: auto;
}

	.responsive-video iframe {
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
	}




/* ÃœBERSCHRIFTEN
---------------- */

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

h1 {font-weight: 900;
	text-transform: uppercase;
	color: #0c2e44;
	margin-bottom: 15px;
}

h2 {color: #fff;
	font-weight: 600;
	line-height: 35px;
	margin-bottom: 15px;
	text-transform: uppercase;
}

h3 {font-weight: 900;
	text-transform: uppercase;
	color: #0c2e44;
	margin-bottom: 15px;
	font-size: 1.5rem;
	line-height: 24px;
}



p { font-weight: 500;
	margin-bottom: 10px;
}


a {
	color: inherit;
	text-decoration: none;
}

	a:hover {
		text-decoration: underline;
	}



/* ALLGEMEINE KLASSEN
----------------------------------------------------------------------------------------------------------  
------------------------------------------------------------------------------------------------------- */


/* PADDINGS 
---------------- */

.pr-15 {
	padding-right: 15px;
}

.pl-15 {
	padding-left: 15px;
}

.pr-30 {
	padding-right: 30px;
}

.pl-30 {
	padding-left: 30px;
}



/* MARGINS 
---------------- */

.ml-10 {
	margin-left: -10px;
}

.m-t40 {
	margin-top: 40px;
}



/* SPACE 
---------------- */

.space-10 {	height: 10px; }
.space-20 {	height: 20px; }
.space-40 {	height: 40px; }
.space-80 {	height: 80px; }
.space-100 {height: 100px; }


.space-w15 { display: inline-block; width: 15px;}
.space-w30 { display: inline-block; width: 30px;}


/* CLEAR/FLOAT 
---------------- */

.clearfix {
	height: 0;
	clear: both;
	float: none;
}

.clearafter:after {
	content: "";
	display: table;
	clear: both;
}

.left 	{ float: left; }
.right 	{ float: right; }




/* CSS TABLES 
---------------- */

.table {
	display: table;
	position: relative;
	width: 100%;
	border-collapse:collapse; 
}

.table-row {
	display: table-row;
}

.table-cell {
	display: table-cell;
	vertical-align: middle;
}




/* CSS FLEX 
---------------- */

.flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex-top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.flex-bottom {
	display: flex;
	flex-direction: row;
	align-items:flex-end
}

.flex-wrap {
	flex-wrap: wrap;
}

.perfect-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.autoheight {
	align-items: stretch;
}


/* MINI GRID
----------------------------------------------------------------------------------------------------------  
------------------------------------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	margin: 0px auto;
	padding: 0;
}


/* WRAP 1200er
---------------- */

.wrap-1600	{ max-width: 1600px; }
.wrap-1200	{ max-width: 1200px; }
.wrap-900	{ max-width: 900px; }
.wrap-800	{ max-width: 800px; }
.wrap-600 	{ max-width: 600px; }
.wrap-400 	{ max-width: 400px; }
.wrap-300 	{ max-width: 300px; }

/* WRAP 960er
---------------- */

.wrap-960 	{ max-width: 960px; }
.wrap-720 	{ max-width: 720px; }
.wrap-640	{ max-width: 640px; }
.wrap-480 	{ max-width: 480px; }
.wrap-320 	{ max-width: 320px; }




/* ROW
---------------- */

.row {
	display: block;
	position: relative;
	clear: both;
	float: none;
}

.row:before,
.row:after {
	display: table;
	content:"";
	clear: both;
	float: none;
}




/* COLS Ebene 1
---------------- */

.col {
	float: left;
	height: 100%;
	min-height: 100%;
	position: relative;
	display: block;
}

.col-10 	{ width: 10%; }
.col-15 	{ width: 15%; }
.col-20		{ width: 20%; }
.col-25 	{ width: 25%; }
.col-30 	{ width: 30%; }
.col-33 	{ width: 33.33333333%; }
.col-35 	{ width: 35%; }
.col-40 	{ width: 40%; }
.col-45 	{ width: 45%; }
.col-50 	{ width: 50%; }
.col-15 	{ width: 55%; }
.col-60 	{ width: 60%; }
.col-65 	{ width: 65%; }
.col-66 	{ width: 66.66666666%; }
.col-70 	{ width: 70%; }
.col-75 	{ width: 75%; }
.col-80 	{ width: 80%; }
.col-85 	{ width: 85%; }
.col-90 	{ width: 90%; }
.col-95 	{ width: 95%; }




/* SCOLS Ebene 2
---------------- */

.scol {
	float: left;
	height: 100%;
	min-height: 100%;
	position: relative;
	display: block;
}

.scol-10 	{ width: 10%; }
.scol-15 	{ width: 15%; }
.scol-20	{ width: 20%; }
.scol-25 	{ width: 25%; }
.scol-30 	{ width: 30%; }
.scol-33 	{ width: 33.33333333%; }
.scol-35 	{ width: 35%; }
.scol-40 	{ width: 40%; }
.scol-45 	{ width: 45%; }
.scol-50 	{ width: 50%; }
.scol-15 	{ width: 55%; }
.scol-60 	{ width: 60%; }
.scol-65 	{ width: 65%; }
.scol-66 	{ width: 66.66666666%; }
.scol-70 	{ width: 70%; }
.scol-75 	{ width: 75%; }
.scol-80 	{ width: 80%; }
.scol-85 	{ width: 85%; }
.scol-90 	{ width: 90%; }
.scol-95 	{ width: 95%; }



/* TRANSITIONS */

.tran-s {
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

.tran-m {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.tran-l {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}





/* TEXT ALIGN */

.ta-c {text-align: center;}
.ta-r {text-align: right;}
.ta-l {text-align: left;}



/* TRENNSTRICH */

.space-line {border: 1px dashed #f7ab2e; margin: 10px 0 20px 0;}