/* IMPORTS ------------------------------------------------------------*/

@import url('reset.css');

@import url('styled-elements.css');

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

}


body {
	line-height: 1;
	color: #51565b;
	background: #f1f1f1 url(../img/bg/patterns/noise.png);
	font-family: 'ralewayregular', Helvetica, sans-serif;
	font-size:  100%;
}

.teaserlink {
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
width: 350px;
margin: 180px auto;
text-shadow: 1px 1px 1px #000;
-webkit-transition: all 900ms linear;
-moz-transition: all 900ms linear;
-o-transition: all 900ms linear;
transition: all 900ms linear;
}

.teaserlink:hover{
text-shadow: 0 0 6px #fff;
color:#75C2C9;
}

.teaserlink2{
display:none;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
width: 350px;
font-weight: 800;
font-style: italic;
margin: 0 auto;
}

.teaserlink2:hover{
color:#00C0B1;
}


.video-btn2 {
display:none;
position: absolute;
float: right;
color: white;
text-align: center;
background: #995B74;
text-decoration: none;
font-weight: bold;
line-height: 27px;
font-style: normal;
text-transform: uppercase;
font-size: 25px;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
width: 100px;
height: 100px;
padding: 20px 10px;
right:1%;
top: 15px;
border-radius: 250px;
cursor: pointer;
}

.video-btn2:hover {background: #995A24;}

#mute-video {
display: block;
color: #ff3c1c;
position: relative;
float: right;
margin-top: -8em;
height: 2em;
width: auto;
line-height: 1em;
background-color: #f2f2f2;
padding:10px;
margin-right:1em;
cursor: pointer;
}

/*  IPHONE --------------------------------------------------------*/


@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {

.teaserlink{
display:none;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
font-weight: 800;
font-style: italic;
width: 350px;
margin: 0 auto;
}

.teaserlink:hover{
color:#00C0B1;
}

.teaserlink2 {
display: block;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
font-weight: 800;
font-style: italic;
width: inherit;
margin: 20px auto;
}

.teaserlink2 a {
text-decoration: none;
color: #fff;
font-style: normal;
}



.teaserlink2 a:hover{
color:#00C0B1;
}



.navtouch-btn{
display: inline;
opacity:0.6;
cursor:pointer;
	position: fixed;
	top: -44px;
	left:0;
	height: 45px;
font-size:30px;
	min-width: 70px;
	text-align: center;
	background:#34495e;
	//background:rgba(52, 73, 94,0.6);
    	background-repeat: no-repeat;
   	background-position:0 0;
    	background-size:  0 0;
z-index:1000;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.navtouch-btn:before{
content: "|||||||";
color:#fff;
line-height:40px;
}

.nav{
	display: none;
	position: fixed;
top: 0;
	left:0;
	//height: 95px;
	min-width: 110px;

text-align: center;
}

.box { 
	opacity:1;
	background:#34495e;
	background:rgba(52, 73, 94,0.6);
    	background-repeat: no-repeat;
   	background-position:0 0;
    	background-size:  0 0;
-webkit-filter: none;
filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;

	padding:1px;
border:none;
	border-radius:0;
	margin-bottom:0;
}

.box:hover { 
opacity:1;
	
}


.playlist-fox {
position:relative;
background: #363636;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
width: 90px;
text-align: center;
padding: 5px 5px;
margin-left: 5px;
border-radius: 5px;
float:none;
}

.playlist-english { 
background: #363636;
display:block;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
width: 90px;
text-align: center;
padding: 5px 5px;
margin-left: 5px;
border-radius: 5px;
}


.playlist-active {
opacity: 0.5;
background: #2980b9;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
text-align: right;
width: 90px;
padding: 5px 5px;
margin-left: 5px;
border-radius: 5px;
float:none;
}

.video-list {
list-style: none;
float:left;
width: 50px;
margin: 0;

text-align: center;
}
.video-list li {
margin-bottom: 10px;
}

.video-list li[style] {
margin-left:-10px !important;}

.video-list-up {
display:none;
}

.nav p2 {display:none;}
.line {display:none;}

.nav>li{
	display: inline;
	//float: right;
height:10px;
	max-width:20%;

//border-left:1px solid white;
padding-bottom:10px;
	margin:0 auto;
}


/* MEDIA IPHONE ------------------- */

#big-video-wrap{display:none !important;}
#big-video-vid,#big-video-image{display:none !important;}
#big-video-image{
display:none !important;
}
#big-video-control-container{display:none !important;}


header {
   position: relative;
z-index: 999;
color: #fff;
background-image: url("../main/bigvideo/img/soundofslow_cover2.jpg");
background-size: 30%;
background-position: 110px 0;
background-repeat: no-repeat;
width: 290px;
height: 200px;
margin: 170px auto;
text-align: center;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-ms-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;}

header img{
margin-top: 60px;
margin-left: -10px;
width:290px;
animation: inout 5s; 
animation-iteration-count: 1;
-webkit-animation: inout 5s; /* Safari & Chrome */
-webkit-animation-iteration-count: 1; 
}

header h1 {
margin-top: 0;
padding: 0;
font-size: 40px;
line-height: 30px;
}

header h1 small {
line-height: 55px;
font-size: 24px;
}

#firstpic{
background: #222426 url(../main/bigvideo/vids/backgrounds/sos_background2.jpg) no-repeat;
background-size: cover;
background-position: -200px 0;
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}


}

/* NAV IPHONE ENDE --------------------------------------------------------*/

/* IPAD STYLINGS --------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 1024px){

.teaserlink{
display:none;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
font-weight: 800;
font-style: italic;
width: 350px;
margin: 0 auto;
}

.teaserlink:hover{
color:#00C0B1;
}

.teaserlink2 {
display: block;
cursor: pointer;
font-size: 25px;
text-transform: uppercase;
font-weight: 800;
margin: 10px auto;
width: inherit;
}

.teaserlink2 a {
text-decoration: none;
color: #fff;
font-style: normal;
text-align: center;
}

.teaserlink2 a:hover{
color:#00C0B1;
}


.navtouch-btn{
display: inline;
opacity:0.6;
cursor:pointer;
	position: fixed;
	top: -44px;
	left:0;
	height: 45px;
font-size:30px;
	min-width: 70px;
	text-align: center;
	background:#34495e;
	//background:rgba(52, 73, 94,0.6);
    	background-repeat: no-repeat;
   	background-position:0 0;
    	background-size:  0 0;
z-index:1000;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.navtouch-btn:before{
content: "|||||||";
color:#fff;
line-height:40px;
}

.nav{
	display: none;
	position: fixed;
top: 0;
	left:0;
	//height: 95px;
	min-width: 110px;

text-align: center;
}

.box { 
	opacity:1;
	background:#34495e;
	background:rgba(52, 73, 94,0.6);
    	background-repeat: no-repeat;
   	background-position:0 0;
    	background-size:  0 0;
-webkit-filter: none;
filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;

	padding:1px;
border:none;
	border-radius:0;
	margin-bottom:0;
}

.box:hover { 
opacity:1;
	
}


.playlist-fox {
position:relative;
background: #363636;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
width: 90px;
text-align: center;
padding: 5px 5px;
margin-left: 5px;
border-radius: 5px;
float:none;
}

.playlist-english { 
background: #363636;
display:block;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
width: 90px;
text-align: center;
padding: 5px 5px;
margin-left: 5px;
border-radius: 5px;
}


.playlist-active {
opacity: 0.5;
background: #2980b9;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
text-align: right;
width: 90px;
padding: 5px 5px;
margin-left: 5px;
border-radius: 5px;
float:none;
}

.video-list {
list-style: none;
float:left;
width: 50px;
margin: 0;

text-align: center;
}
.video-list li {
margin-bottom: 10px;
}

.video-list li[style] {
margin-left:-10px !important;}

.video-list-up {
display:none;
}

.nav p2 {display:none;}
.line {display:none;}

.nav>li{
	display: inline;
	//float: right;
height:10px;
	max-width:20%;

//border-left:1px solid white;
padding-bottom:10px;
	margin:0 auto;
}


#big-video-wrap{display:none !important;}
#big-video-vid,#big-video-image{display:none !important;}
#big-video-image{
display:none !important;
}
#big-video-control-container{display:none !important;}

header {
position: relative;
z-index: 999;
color: #fff;
background-image: url("../main/bigvideo/img/soundofslow_cover2.jpg");
background-size: 30%;
background-position: 120px 380px;
background-repeat: no-repeat;
top: 160px;
width: 340px;
height: 600px;
margin: 80px auto;
text-align: center;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-ms-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}

header img{
margin-top: 60px;
margin-left: -90px;
width:490px;
animation: inout 5s; 
animation-iteration-count: 1;
-webkit-animation: inout 5s; /* Safari & Chrome */
-webkit-animation-iteration-count: 1; 
}

header h1 {
margin-top: -10px;
padding: 0;
font-size: 80px;
line-height: 40px;
}

#firstpic{
background: #222426 url(../main/bigvideo/vids/backgrounds/sos_background2.jpg) no-repeat;
background-size: cover;
background-position: -120px 0;
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}

}