/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	Das Dokument "style.css" bindet alle cssDateien ein und beinhaltet das Farbverzeichnis der Website.
//  
//  	Inhalt:
//			- CSS-Importe
//			- Font-Importe
//			- Keayframes
//			- Browser-Settings-Reset
//			- Primary Fontsetting
//			- Globale Einstellungen
//			- Overlay
//			- Registrations Formular
//			- Media-Querrys
//			- Special_Settings for Firefox
//			- Special_Settings for InternetExplorer
//
//		Farbverzeichnis:
//  
//  INFO: 
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	CSS-Importe
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@import url("css/header.css");
@import url("css/index.css");
@import url("css/footer.css");
@import url("css/suche.css");
@import url("css/setcard.css");
@import url("css/subsite.css");

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Font-Importe
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen {

/*title*/
@font-face {
    font-family: 'oswald';
    src: url('fonts/oswald.eot');
    src: url('fonts/oswald.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald.woff2') format('woff2'),
         url('fonts/oswald.woff') format('woff'),
         url('fonts/oswald.ttf') format('truetype'),
         url('fonts/oswald.svg#oswald') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*subtitle*/
@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat.eot');
    src: url('fonts/montserrat.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat.woff2') format('woff2'),
         url('fonts/montserrat.woff') format('woff'),
         url('fonts/montserrat.ttf') format('truetype'),
         url('fonts/montserrat.svg#montserrat') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*text*/
@font-face {
    font-family: 'cooperhewitt';
    src: url('fonts/cooperhewitt.eot');
    src: url('fonts/cooperhewitt.eot?#iefix') format('embedded-opentype'),
         url('fonts/cooperhewitt.woff2') format('woff2'),
         url('fonts/cooperhewitt.woff') format('woff'),
         url('fonts/cooperhewitt.ttf') format('truetype'),
         url('fonts/cooperhewitt.svg#cooperhewitt') format('svg');
    font-weight: normal;
    font-style: normal;
}

}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Keyframes
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@keyframes pulse {
	
0% {
	color: rgba(255,255,255,0);
	transform: rotate(0deg);
	font-size: 1em;
}
	
33% {
	color: rgba(255,255,255,0.33);
	transform: rotate(30deg);
	font-size: 5em;
}
	
66% {
	color: rgba(255,255,255,0.66);
	transform: rotate(0deg);
	font-size: 2em;
}
	
100% {
	color: rgba(255,255,255,1);
	transform: rotate(0deg);
	font-size: 1em;
}

}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Browser-Settings-Reset
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

html {
	-webkit-font-smoothing: subpixel-antialiased;
} 

::selection { 
	color: #fff;
	background: #FF008B;
}

* {
    margin: 0em;
    padding: 0em;
	list-style: none;
    border: 0em;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 1em;
	line-height: 1em;
    font-family: inherit;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Primary Fontsetting
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

h1, h2, h3, p, a {
	color: #fff;
}

h1 {
    font-family: 'oswald';
	font-size: 2.5em;
	margin-bottom: 0.5em;
}

h2 {
    font-family: 'oswald';
	font-size: 2em;
	margin-bottom: 0.5em;
}

h2 span {
	color: rgba(255,0,0,1);
}

h3 {
    font-family: 'montserrat';
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

a {
	text-decoration: none;
}

a:hover, a:active {
	cursor: pointer;
}

p, a, li, .messenger {
    font-family: 'cooperhewitt';
	font-size: 1em;
	line-height: 1.25em;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Globale Einstellungen
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

body{
}

#base {
	max-width: 1920px;
	background-color: #000;
	text-align: center;
}

.container {
    margin-bottom: 4px;
	padding: 48px;
	width: calc(100% - 96px);
	height: auto;
}

.buttonSubmit, .button {
	margin: 24px auto;
	padding: 12px;
	width: 100%;
	max-width: 384px;
	border-radius: 5px;
	color: #fff;
	background-color: #77DF00;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.buttonSubmit:hover, .buttonSubmit:active, .button:hover, .button:active {
	cursor: pointer;
	background-color: #88FF00;
}

.numberMenu {
	
}

.numberMenu ul {
	
}

.numberMenu li {
	display: inline-block;
	margin: 48px 6px;
	padding: 10px 12px 8px 12px;
	line-height: 1em;
	color: #fff;
	background-color: #77DF00;
	border-radius: 50%;
}

.numberMenu li:first-child {
	background-color: #FF0000;
}

.numberMenu li:hover, .numberMenu li:active {
	background-color: #88FF00;
	cursor: pointer;
}

.numberMenu li:first-child:hover, .numberMenu li:first-child:active {
	background-color: #aaa;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Overlay
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#overlay {
	z-index: 99999;
	display: none;
	position: fixed;
	margin-top: -64px;
	padding: 12px;
	width: calc(100% - 48px);
	height: calc(100vh - 48px);
	border: 12px solid #000;
	background-color: rgba(0,0,15,0.9);
}

#overlay .formBox {
	margin: 48px auto;
}

#overlay .formBox h2 {
    color: #fff;
    margin-bottom: 48px;
}

.exit {
	margin-bottom: 12px;
	width: 24px;
	height: 24px;
	margin-left: calc(100% - 24px);
	background-image: url(img/icons/exit.svg);
	background-position: 50%;
	background-size: 75%;
	background-color: #fff;
}

.exit:hover, .exit:active {
	cursor: pointer;
	background-color: #000;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	Registrations Formular
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

iframe {
	width: 100%;
	max-width: 480px;
    height: 224px!important;
}

.feld5, .feld6, #overlay {
	display: none;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Media-Querrys
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (min-width: 800px) { 

#overlay {
	margin-top: -122px;
}

.hot, .not {
	margin: 48px 99px;
}

}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	FireFox-Extrawurst
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@-moz-document url-prefix() {
	
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Internetexplorer-Extrawurst
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen\0 {
	
}