* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; *behavior:url(boxsizing.htc); }
html, body { 
	margin:0;
	padding:0;background:#FFFFFF;
	line-height:1;
	font-family: 'ralewayregular', sans-serif,  serif;
}
h1, h2, .nav-link, .playlist-btn {
	font-family:'ralewayregular', sans-serif; font-weight:900; 
	text-transform:uppercase;

}
h1 {font-size:48px; }
h1, h2, h3, p, p1 { margin:0 0 10px; color:#FFFEFA; text-shadow: 1px 1px 1px #000;}
p { line-height:1.4;  }
p1 { line-height:1.4;  }
a { color:#A8A8A8; font-style:italic;}
.nav a:hover {color: #fff;
         position: relative;
}

.nav .box a[title]:{display:none;}

.nav a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
font-size: 12px;
font-weight:lighter; 
  opacity:0.4;
  position: absolute;
  left: 100%;
  top: -20px;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 8px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);

}

/* Header */

header {
    position: relative;
z-index: 999;
color: #fff;
/* background-image: url("../img/soundofslow_cover2.jpg");
background-size: 22%;
background-position: 270px 420px;
background-repeat: no-repeat; */
width: 690px;
height: auto;
margin: 140px auto;
text-align: center;
-webkit-transition-duration: 4.6s;
-moz-transition-duration: 4.6s;
-ms-transition-duration: 4.6s;
-o-transition-duration: 4.6s;
transition-duration: 4.6s;
}

header h1 {
    margin-top: -20px;
padding: 0;
font-size: 80px;
line-height: 40px;
color: #ff3c1c;
}

header h1 small {
    line-height:40px;
    color: #ff3c1c;
    font-size: 30px;
    
}


header h1 span {
    font-weight: 300;
}

header h2 {
font-size: 20px;
font-weight: normal;
color: #ff3c1c;
}

header p {
    font-family: 'ralewayregular', sans-serif;
color: #ff3c1c;
}

header a {
text-decoration: none;
font-style: normal;
color: #ff3c1c;
}

header h1:hover {
opacity:0.6;
}

header img{
margin-top: 80px;
margin-left: -60px;
animation: inout 5s; 
animation-iteration-count: 1;
-webkit-animation: inout 5s; /* Safari & Chrome */
-webkit-animation-iteration-count: 1; 
}
 
@keyframes inout { 
from   { transform: scale(0, 0); } 

to { transform: scale(1, 1); } 
}
 
@-webkit-keyframes inout { /* Safari & Chrome */
from   { -webkit-transform: scale(0, 0); } 

to { -webkit-transform: scale(1, 1); } 
} 


blockquote { 
	background:#fff; 
	margin:0 0 20px;
	padding:5px 20px; 
}
pre {
	white-space:pre-wrap;       /* css-3 */
	white-space:-moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space:-pre-wrap;      /* Opera 4-6 */
	white-space:-o-pre-wrap;    /* Opera 7 */
	word-wrap:break-word;       /* Internet Explorer 5.5+ */
}


#nav-container{
position:fixed;

}

.line{
border: 2px solid #B88181;
width: 273px;
padding: 0;
margin-left: 10px;
position: absolute;
}

.box {
opacity: 0.6;
background: #D1D1D1;
background: rgba(155, 155, 155, 0.35);
background-repeat: no-repeat;
background-position: 20px 0;
background-size: 360px 590px;
-webkit-filter: blur(1px) opacity(0.6) hue-rotate(220deg);
filter: blur(1px) opacity(0.6) hue-rotate(220deg);
-moz-filter: blur(1px) opacity(0.6) hue-rotate(220deg);
-o-filter: blur(1px) opacity(0.6) hue-rotate(220deg);
-ms-filter: blur(1px) opacity(0.6) hue-rotate(220deg);
padding: 50px;
border: 3px solid #748B76;
border-radius: 0px 350px 350px 0px;
margin-bottom: 0;
}

.box:hover { 
opacity:1;
	-webkit-filter: blur(0) opacity(1) hue-rotate(0deg);
filter: blur(0) opacity(1) hue-rotate(0deg);
-moz-filter: blur(0) opacity(1) hue-rotate(0deg);
-o-filter: blur(0) opacity(1) hue-rotate(0deg);
-ms-filter: blur(0) opacity(1) hue-rotate(0deg);
}


.nav { 
	position:fixed; 
	top:150px;

left:-70px;
       
	z-index: 1000;
	min-width:360px;
        
	-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.nav p {
text-align: center;
margin-left: 155px;
width: 90px;
margin-bottom: -5px;
padding-top: 10px;
font-family: Cambria, Georgia, serif;
font-style: italic;
font-size: 30px;
    
}

.nav p2 {
text-align: center;
margin-left: 52px;
width: 90px;
font-weight: lighter;
color: #FCF3DB;
margin-bottom: -5px;
font-family: 'ralewayregular', sans-serif, serif;
font-size: 12px;
zoom: 1;
}

.nav p1 {
    font-family: Cambria, Georgia, serif;
    font-style: italic;
    border-top: 1px solid rgba(0, 0, 0, 0.8);
    margin-left: 20px;
    
}

.credit {
	margin:20px 0;
}
.download-links { margin-top:20px; }
.download { margin-left:10px; padding:5px 10px; color:#fff; background:#111; border-radius:5px; }

.video-list {
list-style: none;
width: 100px;
margin: 90px 10px 0 70px;
padding: 10px 15px 0 15px;
text-align: center;
}

.video-list-up {
	list-style: none;
width: 240px;
height: 80px;
margin: 0 0 50px 0;
padding: 10px 15px 0 30px;
text-align: center;
}

.video-list-up li {
	margin-bottom: 4px;
margin-left: 4px;
float: left;
}


.video-list li {
	margin-bottom:20px;
margin-left:-40px;
}
.video-list .playlist-btn {
	display:block;
	
}
.video-list .playlist-fox, .video-list .playlist-active {
	display:block;
	
}


.main {
	position:relative;
	margin:50px 50px 440px 220px;
	min-width:300px;
	-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.nav-link {
	display:block;
	padding-bottom:10px;
	text-decoration:none;
	font-style:normal;
}
.toggle-btn {
position: relative;
	        width: 150px;
	
	left: 167px;
	background:rgba(0,0,0,0.7);
	padding: 6px 12px;
	border-radius: 10px;
	
}
.playlist { 
	padding:0; 
	margin:20px 20px 40px;
}

.playlist-btn { 
	background: #686868;
color: #fff;
text-decoration: none;
font-weight: bold;
font-style: normal;
text-align: center;
text-transform: uppercase;
font-size: 14px;
width: 50px;
height: 50px;
padding: 4px 2px 0 1px;
margin-right: 0;
border-radius: 50%;
cursor: pointer;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}



.playlist-btn:hover { background: rgba(221, 220, 220, 0.32);}

.playlist-btn-active:hover { background: rgba(221, 220, 220, 0.32);}

.playlist-btn-active { 
opacity:0.1;
	background: #7f8c8d;
color: #fff;
text-decoration: none;
font-weight: bold;
font-style: normal;
text-align: center;
text-transform: uppercase;
font-size: 14px;
width: 50px;
height: 50px;
padding: 4px 2px 0 1px;
margin-right: 0;
border-radius: 50%;
cursor: pointer;
}

.playlist-btn img{
width:43px;
height:43px;
}

.playlist-btn-active img{ 
width:43px;
height:43px;
}

.video-btn {
display: none;
position: fixed;
float: left;
color: white;
text-align: left;
background: #6A8A6E;
text-decoration: none;
font-weight: bold;
line-height: 17px;
font-style: normal;
text-transform: uppercase;
font-size: 15px;
padding: 20px 15px 20px 20px;
margin-left: -10px;
top: 30px;
border-radius: 0 10px 10px 0;
cursor: pointer;
}

.video-btn:hover {background: #B88181;}

.playlist-fox { 
background: rgba(54, 54, 54, 0.55);
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
width: 300px;
text-align: right;
padding: 5px 10px;
margin-left: -140px;
border-radius: 5px;
-webkit-transition: all 900ms linear;
-moz-transition: all 900ms linear;
-o-transition: all 900ms linear;
transition: all 900ms linear;
}

.playlist-english { 
background: rgba(54, 54, 54, 0.25) url('../../../img/union_jack2.png') no-repeat;
background-size: 90% 100%;
background-position:70px 0px;
display:block;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
width: 300px;
text-align: right;
padding: 5px 10px;
margin-left: -140px;
border-radius: 5px;
-webkit-transition: all 900ms linear;
-moz-transition: all 900ms linear;
-o-transition: all 900ms linear;
transition: all 900ms linear;
}


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


.dimmed {opacity:.6;}
.footer-text {
position:fixed;
bottom:1px;
margin-left:20px;
	padding:0 30px;
	font-size:.7em;
	font-style:italic;
	opacity:.8;
	text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}

#loading{background-image:url('../img/ss_logo.png');position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; line-height: 60px; color: grey; text-align: center; opacity:0.6;}
#container{width: 100%; margin: 0 auto; margin-top: 0;}
.loading-text {
margin-top:300px;
margin-left:auto;
margin-right:auto;
	
	font-size:50px;
	font-weight:bold;
        text-align: center;
	opacity:.8;
	text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}

input[type=checkbox].css-checkbox {
							position: absolute; 
							overflow: hidden; 
							clip: rect(0 0 0 0); 
							height:1px; 
							width:1px; 
							margin:-1px; 
							padding:0;
							border:0;
						}

input[type=checkbox].css-checkbox + label.css-label {
							padding-left:20px;
							height:20px; 
							display:inline-block;
							line-height:20px;
							background-repeat:no-repeat;
							background-position: 0 0;
font-family:'Source Sans Pro', sans-serif; font-weight:900; 
	text-transform: uppercase;
-webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; 

							font-size:15px;
							vertical-align:middle;
							cursor:pointer;
						}

.css-label:hover {
color:grey;
margin-bottom: 2px;
margin-top: 2px;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
		background-position: 0 -20px;

}
						
.css-label{ 
background-image:url(http://csscheckbox.com/checkboxes/web-two-style.png);

 }