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




/* 1. GLOBALE VOREINSTELLUNGEN
----------------------------------------------------------------------------------------------------------  
 *
 * Box Model, body, images, headlines, fonts, main selectors
 *
------------------------------------------------------------------------------------------------------- */





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



/* -------------------------------------------- 
GLOBAL PRESETS
-------------------------------------------- */

body {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-size: 100%;
	padding: 0;
	margin: 0;
	font-family: din-condensed, sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #fff;
	letter-spacing: 2px;
	background: #282828;
}


article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden], template {
    display: none;
}




/* -------------------------------------------- 
TYPO
-------------------------------------------- */

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

h3 	{
	color: #ededed;
	font-size: 40px;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 40px;
}


a {
	text-decoration: none;
}


abbr[title] { 
	border-bottom: 1px dotted;
}

b, strong {
	font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre { 
	white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 0.5em;
    line-height: 0;
    position: relative;
	display: inline-block;
}

sup {
	vertical-align: 0.4em;
}

sub {
	vertical-align: -0.4em;
}



/* -------------------------------------------- 
IMAGES
-------------------------------------------- */

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

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

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

	svg:not(:root) {
		overflow: hidden;
	}



/* -------------------------------------------- 
FORMS
-------------------------------------------- */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}



/* -------------------------------------------- 
VIDEO
-------------------------------------------- */

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

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







/* 2. GLOBALE KLASSEN
----------------------------------------------------------------------------------------------------------  
 *
 * Gradients, spacing, tables
 *
------------------------------------------------------------------------------------------------------- */



/* -------------------------------------------- 
SPACINGS
-------------------------------------------- */

.space-15 {	height: 15px; }
.space-30 {	height: 30px; }
.space-45 {	height: 45px; }
.space-60 {	height: 60px; }
.space-75 {	height: 75px; }
.space-90 {	height: 90px; }
.space-105 { height: 105px; }
.space-120 { height: 120px; }


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

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

	.table-fixed {
		table-layout: fixed;
	}

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

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







/* 3. MINI GRID
----------------------------------------------------------------------------------------------------------  
 *
 * wraps, col ,scols
 *
------------------------------------------------------------------------------------------------------- */

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

.wrap-1600	{ max-width: 1600px; }
.wrap-1400	{ max-width: 1400px; }
.wrap-1200	{ max-width: 1200px; }
.wrap-960 	{ max-width: 960px; }
.wrap-900	{ max-width: 900px; }
.wrap-800	{ max-width: 800px; }
.wrap-720 	{ max-width: 720px; }
.wrap-640	{ max-width: 640px; }
.wrap-600 	{ max-width: 600px; }
.wrap-480 	{ max-width: 480px; }
.wrap-400 	{ max-width: 400px; }
.wrap-320 	{ max-width: 320px; }
.wrap-300 	{ max-width: 300px; }


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

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



/*------------------------
  spinning icons
-------------------------*/
.sh-icon.spin {
  -webkit-animation: sh-icon-spin 2s infinite linear;
  -moz-animation: sh-icon-spin 2s infinite linear;
  animation: sh-icon-spin 2s infinite linear;
}
@-webkit-keyframes sh-icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes sh-icon-spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes sh-icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}