html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content: none;}
table {border-collapse:collapse;border-spacing: 0;}
textarea, select, input[type="date"], input[type="button"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip:padding-box;
-webkit-border-radius:0;
-moz-border-radius:0;
-ms-border-radius:0;
-o-border-radius:0;
border-radius:0;
-webkit-appearance:none;
background-color:#fff;
outline:0;
margin:0;
padding:0;
border:0;
text-align: left;
font-size:14px;
height: 1em;
vertical-align: middle;
font-family: arial;
font-size:14px;color:#656565;
}
div, p, a, li, td {-webkit-text-size-adjust:100%;}
*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
/* RESET CSS */

@font-face {
  font-family: 'Biko';
  src: url('font/biko_regular-webfont.eot');
  src: url('font/biko_regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/biko_regular-webfont.woff') format('woff'),
       url('font/biko_regular-webfont.ttf') format('truetype'),
       url('font/biko_regular-webfont.svg#webfont') format('svg');
}
@font-face {
  font-family: 'Brandon-light';
  src: url('font/brandon_light-webfont.eot');
  src: url('font/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/brandon_light-webfont.woff') format('woff'),
       url('font/brandon_light-webfont.ttf') format('truetype'),
       url('font/brandon_light-webfont.svg#webfont') format('svg');
}

body {font-family: 'Brandon-light';color:#000;font-size:16px;background:url(img/bg.jpg) top center no-repeat fixed;background-size:cover;letter-spacing:5px;}
.grid {width:968px;margin:0 auto;}
.col-1 {float:left;margin:0 1.5%;width:5.3333%;}
.col-2 {float:left;margin:0 1.5%;width:13.6666%;}
.col-20 {float:left;margin:0 1.5%;width:17%;}
.col-3 {float:left;margin:0 1.5%;width:22%;}
.col-4 {float:left;margin:0 1.5%;width:30.3333%;}
.col-5 {float:left;margin:0 1.5%;width:38.6666%;}
.col-6 {float:left;margin:0 1.5%;width:47%;}
.col-7 {float:left;margin:0 1.5%;width:55.3333%;}
.col-8 {float:left;margin:0 1.5%;width:63.6666%;}
.col-9 {float:left;margin:0 1.5%;width:72%;}
.col-10 {float:left;margin:0 1.5%;width:80.3333%;}
.col-11 {float:left;margin:0 1.5%;width:88.6666%;}
.col-12 {float:left;margin:0 1.5%;width:97%;}
.clearfix:after {display:table;content:"";clear:both;}

.flex-grid {align-items:stretch;display:flex;flex-wrap:wrap;}
.flex-col {display:flex;flex-grow:0;flex-direction:column;}

.intro-wrap {height:100vh;width:1200px;position:relative;margin:0 auto;color:#99accd;text-align:right;align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end;}
.intro {/*height:200px;*/}
.intro h1 {font-size:90px;width:100%;margin-bottom:20px;}
.intro p {width:100%;font-size:22px;line-height:30px;color:#808da5;margin-bottom:20px;}
.white-bg {background:#fff;padding:100px 0;}
.blue-bg {background:#fffaf5;padding:100px 0;}
.blue-bg h2 {color:#7282a0;}

h2 {font-size:30px;margin-bottom:25px;text-align:center;}

.player {width:700px;margin:0 auto;}
.player-1 {margin-bottom:20px;}
.player-bg h2 {width:700px;margin:0 auto 25px auto;}

.soc {float:right;}
.soc li {margin-left:20px;float:left;}
.soc li a {display:block;height:39px;position:relative;}
.soc li a:before {content:"";position:absolute;top:50%;left:0;background:url(img/sprite.png) no-repeat;}
.soc li.soundcloud a {width:68px;}
.soc li.soundcloud a:before {width:68px;height:39px;background-position:0px 0px;margin-top:-20px;}
.soc li.tumblr a {width:100px;}
.soc li.tumblr a:before {width:100px;height:22px;background-position:-100px 0px;margin-top:-11px;}


.down {width:44px;height:44px;position:absolute;left:50%;margin-left:-22px;bottom:50px;}
.down a {position:relative;display:block;width:44px;height:44px;border:2px solid #fff;border-radius:50%;}
.down a:before {content:"";position:absolute;top:50%;left:50%;margin:-4px 0 0 -7px;width:15px;height:9px;background:url(img/sprite.png) -200px 0px no-repeat;-webkit-transition:all ease-in-out;transition:all ease-in-out;
-webkit-animation:down 2.5s infinite;
-moz-animation:down 2.5s infinite;
-o-animation:down 2.5s infinite;
animation:down 2.5s infinite;
}
@-webkit-keyframes down {
  0% {top:30%;}
  50% {top:70%;}
  100% {top:30%;}
}
@-moz-keyframes down {
  0% {top:30%;}
  50% {top:70%;}
  100% {top:30%;}
}
@-o-keyframes down {
  0% {top:30%;}
  50% {top:70%;}
  100% {top:30%;}
}
@keyframes down {
  0% {top:30%;}
  50% {top:70%;}
  100% {top:30%;}
}

@media screen and (max-width: 1360px) {
  .intro h1 {font-size:80px;}
  .intro p {font-size:18px;}
}

@media screen and (max-width: 1260px) {
  .intro-wrap {width:96%;margin:0 2%;}
}

@media screen and (max-width: 1008px) {
  .grid {width:96%;margin:0 2% 10px 2%;}
}

@media screen and (max-width: 712px) {
  .col-1, .col-2, .col-20, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {width:100%;float:none;margin:0;}
  .player {width:96%;margin:0 2%;}
  .player-bg h2 {width:auto;}
  body {background:none;}
  .intro-wrap {height:100%;height:600px;padding:60px 20px 0 20px;align-items:stretch;justify-content:center;background:url(img/bg.jpg) top center no-repeat;background-size:cover;}
  .intro {}
  .intro h1 {font-size:40px;}
  .intro p {font-size:18px;}
}