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

.slidertext a {
	font-family: "proxima-nova";
	font-size: 1em;
	border: 3px solid #FFFFFF;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	padding: 8px 20px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	z-index: 50;
}

.slidertext a:hover {
	color: #AFCA00;
	background: #fff;
	text-decoration: none;
}

.slidertext a:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }


.container {
	overflow: hidden;
	margin: 0 auto;
	width: calc(100% - 2 * 20px);
	height: calc(100% - 1 * 20px);
	margin-top: 20px;
}

/* This is the style for the dummy image slider. Animations are in fx[type].css */

.component {
	margin: 0 auto;
	position: relative;
	margin-bottom: 40px;
	max-width: 100%;
}


.component-fullwidth {
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	background: #333;
}

.component > ul {
	width: 100%;
	max-width: 100%;
	height: 100%;
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0 auto;

		z-index: 3;
}


.component-fullwidth > ul {
	overflow: hidden;
}
.component li {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 999;
}

.component-fullwidth li {
	overflow: hidden;
}

.component .current {
	opacity: 1;
	pointer-events: auto;
	z-index: 1000;
}

.component li img {
	display: block;
	max-width: 100%;
}

.component-fullwidth li img {
	min-height: 100%;
	min-width: 100%;
	max-width: none;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.component-fullwidth li .image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.component nav {
		position: absolute;
		top: 40%;
		left: 0;
		right:0;
		z-index: 6;
}
.component nav a {
		display: block;
	position: absolute;
	width: 27px;
	height: 47px;
		opacity: 0.3;
	background: url(../images/arrow-left-right.png) no-repeat;
	text-decoration: none;
}
.component nav a:hover{opacity: 1;}

.component nav  a.prev {
	left: 20px;
}

.component nav  a.next {
	background-position: -27px 0;
	right: 20px;
}

#slider-component-down-arrow{
	display: block;
	position: absolute;
	width: 48px;
	height: 27px;
	left: 50%;
	margin-left: -24px;
	margin-bottom: 15px;
	bottom: 0%;
	background: url(../images/arrow-bottom.png) no-repeat center;
	opacity: 0.8;
	z-index: 30;

/*	-webkit-transition: opacity 0.3s, margin-bottom 0.3s ease-in-out;
	transition: opacity 0.3s, margin-bottom 0.3s ease-in-out;*/

	-webkit-animation: jump 2s ease infinite;
	-moz-animation:    jump 2s ease infinite;
	animation:         jump 2s ease infinite;
}
#slider-component-down-arrow:hover{
	opacity: 1;
	margin-bottom: 5px;
}

@-webkit-keyframes jump {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes jump {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
@keyframes jump {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.slidertext h3 {
		color: #FFFFFF;
		font-family: "proxima-nova";
		font-size: 4em;
		font-weight: 800;
	text-shadow: 0px 0px 10px #000;
		margin: 0 auto;
		text-transform: uppercase;
		width: 95%;
}

.slidertext h4 {
	display: table;
		color: #FFFFFF;
		font-family: "proxima-nova";
		font-size: 1.1em;
		font-weight: 300;
		margin: 5px auto;
	padding: 2px 5px 2px 5px;
		text-transform: uppercase;
	background-color: #AFCA01;
}

.slidertext {
	position: absolute;
	width: 100%;
	bottom: 7%;
	z-index: 500;
	text-align: center;
}

@media (min-width: 768px) and (max-width: 979px) {
}


@media (max-width: 767px) {
	.slidertext h3 {
			font-size: 2.5em;
	}

	.slidertext h4 {
			font-size: 0.8em;
	}

}
@media (max-width: 400px) {
	.component nav{
		display: none;
	}
}







.slidertext .fantasy a {
	border: 3px solid #d7010a;
	font-weight: 800;
	color: #d7010a;
}

.slidertext .fantasy a:hover {
	color: #fff;
	background: #d7010a;
	text-decoration: none;
}



.slidertext .mrspot a {
	border: 3px solid #d31a41;
	font-weight: 800;
	color: #d31a41;
}

.slidertext .mrspot a:hover {
	color: #fff;
	background: #d31a41;
	text-decoration: none;
}



.slidertext .freds a {
	border: 3px solid #6bdde9;
	font-weight: 800;
	color: #6bdde9;
}

.slidertext .freds a:hover {
	color: #fff;
	background: #6bdde9;
	text-decoration: none;
}


.slidertext .ostseelive a {
	border: 3px solid #b71661;
	font-weight: 800;
	color: #b71661;
}

.slidertext .ostseelive a:hover {
	color: #fff;
	background: #40556e;
	text-decoration: none;
}


.slidertext .inklang a {
	border: 3px solid #B88416;
	font-weight: 800;
	color: #B88416;
}

.slidertext .inklang a:hover {
	color: #fff;
	background: #B88416;
	text-decoration: none;
}

.slidertext .klassikradio a {
	border: 3px solid #78b925;
	font-weight: 800;
	color: #78b925;
}

.slidertext .klassikradio a:hover {
	color: #fff;
	background: #78b925;
	text-decoration: none;
}