@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
----------------------------------------------------------------------------------------------------------  
------------------------------------------------------------------------------------------------------- */


body {
	

	font-family: 'big-caslon-fb', serif;
	font-weight: 400;
	font-style: normal;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-size: 100%;
	color: #fff;
	background: #000; 
	padding: 0;
	margin: 0;
}




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

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

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;
}






/* ÜBERSCHRIFTEN
---------------- */

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	font-weight: 100;
	color: #fff;
}

h1 {
	font-size: 40px;
	padding-bottom: 40px;
}

h2 {
	font-size: 30px;
	color: #265073;
	padding: 40px 0;
	font-weight: 600;
}


/* LINKS
---------------- */

a {
	color: #265073;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

a:hover,
a:focus,
a:active {
	color: #616161;
	text-decoration: none;
}

	/* */

	a.link-alone {
		position: relative;
	}
	
	a.link-alone:before {
		content: url(../img/icons/ico-link-before.png);
		position: absolute;
		top: 0;
		left: -10px;
	}
	
	a.link-alone:hover {
		color: #ac1a2f;
	}







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



/* 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;
	border-collapse: collapse; 
}

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

.table-cell {
	display: table-cell;
	vertical-align: middle;
	padding: 5px;
	border: 1px solid #3c3c3c;
}

.table-cell span {
	font-size: 12px;
}

.table-descr {
	background: #f5f5f5;
}

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

.title-vert {
	width: 180px;
}

.title-hori {
	width: 120px;
}

.table-mobile {
	display: none;
}

/* 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;
	padding: 0;
	marging: 0;
}

.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;
	padding: 0;
	margin: 0;
}

.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%; }



/* TOGGLE BUTTON */


button {
	border: none;
	margin: 0;
	margin-top: 40px;
	padding: 20px;
	background: #265073;
	color: #fff;
	display: inline-block;
	font-weight: 500;
	font-size: 16px;
}

	button:hover {
		cursor: pointer;
	}




/* 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;
}



/* MARGINS */

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



/* 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;}