@charset "UTF-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");

* {
	body {
  	font-family: Arial, sans-serif;
	list-style: none;	
	font-weight: normal;	
}

img {
	max-width: 100%;
	height: auto;
	border:none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	}
ul, li, ol {
	margin: 0;
	padding: 0;
}

#nav.grid-container {
	padding:0;
	margin: 0;
}
.grid-container {
	padding-top: 2rem;
}
	
/* NAVIGATION STYLES */
	
.standardNav{
	position: fixed !important;
	overflow: visible;
	top: 0;
	left: 0;		
	z-index: 999;
	width: 100%;
	opacity: 0.9;
}

.standardNav ul{
	display: block;
	margin: 0 auto;
	list-style: none;
	background: #fff;
	width: 100%;
	height: 60px;
	border-bottom: 2px solid #ecf0f1;	
}

	
.standardNav li{
	display: inline-block;
}

.standardNav li a{
	display: block;	
	font-weight: normal;
	padding: 20px 10px;
	text-decoration: none;
	color: #333;		
}	
	
.standardNav li a:hover{
	color: #999;
}
	
.standardNav li.active a{
	color: #999;
}	

#profil {	
	color: #2d3944;
	padding-top: 30px;
}

#profil_artist {	
	color: #2d3944;
	padding-top: 30px;
}
#profil p {
	font-size: 14px;
	color:#666;
}

#profil h1 p {
	text-align: center;
}

#profil img {
	float: none;
	display: block;
	margin: 0 auto;
	margin-top: 0;
}

#profil h2 {
	color: #2d3944;
}
#profil h3 {
	font-size: 16px;
	font-weight: bold;
}
#projects h2 {
	color: #2d3944;
}
#projects h3 {
	font-size: 14px;
	font-weight: normal;
	margin-bottom:10px;
}
#projects ul {
	margin-bottom:10px;
}
#cv h2 {
	color: #2d3944;
}
#cv h3 {
	font-size: 14px;
	margin:0;
	padding:0;
}
#shop h2 {
	color: #2d3944;
}
#contact h2 {
	color: #2d3944;
}
#contact p {
	color: #666;
	font-size: 14px;
}

#cv {
	color: #2d3944;
	padding-top: 30px; 	
}

#cv a {
	color: #2d3944;
	text-decoration: none;	
}

#cv a:hover {
	color: #999;
}

#projects {
	background: #ecf0f1;
	color: #333;
	padding-top: 30px;
}

.project {
	border-radius:0.4rem;
	background: #fff;
	margin-bottom: 1.6rem;
	padding-top: 1.2rem;
}

.project img {
	clear: both;
	border-radius:0.4rem 0.4rem 0 0;
}

.project p {
	margin-bottom: 0;
}

.description   {
	text-align: left;
	display: block;
	padding: 0.8rem;
}

.moving-background-container {
  background-color: #000;
}
.moving-background {
  position: relative;
  overflow: hidden;
  z-index: 0;

  background-color: transparent;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.moving-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  opacity: 0.5;

  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.moving-background.playing video {
  opacity: 0.9;
}
.moving-background .mb-button {
  display: block;
  position: absolute;
  right: 100px;
  bottom: 100px;
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  border-radius: 22px;
  color: #fff;
  text-indent: -999em;
}
.moving-background .mb-button.pause {
  display: none;
}
.moving-background .mb-button.play:after {
  content: '';
  position: absolute;
  top: 11px;
  left: 12px;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-width: 7px 14px;
  border-left-color: #fff;
  overflow: hidden;
}
.moving-background .mb-button.pause:before {
  content: '';
  position: absolute;
  top: 11px;
  left: 13px;
  width: 4px;
  height: 14px;
  border: 3px solid #fff;
  border-top: none;
  border-bottom: none;
}
.moving-background.playing .mb-button.play {
  display: none;
}
.moving-background.playing .mb-button.pause {
  display: block;
}

.project .description {
	height:200px;
}

#contact {
	color: #333;
	padding-top: 30px;	
}
#contact_artist {
	color: #333;
	padding-top: 30px;
	background: #ecf0f1;
}
#contact_artist p {
	color: #666;
	font-size: 14px;
}
#contact label {
	float: none;
	clear: both;
	font-size: 1rem;
	display: block;
	text-align: left;
}

#contact input, #contact textarea, #contact button {	
	border: none;
	border-radius:0.4rem;
	padding: 0.5rem;
	width: 100%;
	margin-bottom: 0.5rem;	
}


#contact button[type="submit"] {
	-moz-box-shadow:  0px 3px 0px rgba(23, 168, 140, 1);
	-webkit-box-shadow:  0px 3px 0px rgba(23, 168, 140, 1);
	-o-box-shadow:  0px 3px 0px rgba(23, 168, 140, 1);
	box-shadow:  0px 3px 0px rgba(23, 168, 140, 1);
	-moz-border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
	border-radius: 0.4rem;
	cursor:pointer;
	color: #FFF;
	background: #31c3a6;
	font-weight: bold;
	padding: 0.5rem 1rem;
	width: auto;
	float: left;
}

#contact button[type="submit"]:hover {
	-moz-box-shadow:  0px 3px 0px rgba(49, 195, 166, 1);
	-webkit-box-shadow:  0px 3px 0px rgba(49, 195, 166, 1);
	-o-box-shadow:  0px 3px 0px rgba(49, 195, 166, 1);
	box-shadow:  0px 3px 0px rgba(49, 195, 166, 1);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#17a98c, Direction=180, Strength=0);
}

#social li{
	display: inline-block;

}
div.pageScrollerNav div.logo{
	padding-top: 10px;
	background-color: #FFF;
}
#shop {
    background: #ecf0f1;
	color: #333;
	padding-top: 30px;
}
#top{
	width: 100%;
	height:650px;
	background-image:url(../img/bg.jpg);
	background-repeat:no-repeat;
}
#logo{
	position:absolute;
	top: 90px;
}
#title{
	position:absolute;
	top: 230px;
	font-family:Helvetica, sans-serif;
}
div#top div#title.grid-100 p.title{
	color:#FFF;
	font-size:65px;
}
div#top div#title.grid-100 p.subtitle{
	color:#FFF;
	font-size:50px;
}
div#top div#title.grid-100 p.go{
	color:#FFF;
	font-size:60px;
}
div#top p{
	color:#FFF;
	font-size:40px;
	margin-bottom: 20px;
}
div#top div#title.grid-100 p.go a{
	color:#FFF;
}
div#top div#title.grid-100 p.go a:hover{
	color:#333;
	text-decoration:none;
}
div#projects div.grid-container div.grid-100 div.grid-33 section.project span.description div#tracklist{
	height:80px;
	margin-bottom: 10px;
}
div#shop div.grid-container div.grid-100 div.grid-70{
	background-color:#FFF;
	padding-bottom: 23px;
}
div#shop div.grid-container div.grid-100 div.grid-25{
	margin-bottom: 20px;
	padding-left:0;
}
div#shop img{
	border:#FFF solid 10px;
}
div#buy{
	float:left;
}
div#shop div.grid-container div.grid-100 div.grid-70 span.description form table{
	float:left;
	margin-right:40px;
}
div#artists.grid-100 {
	border-top: 2px dotted #CCCCCC;
    padding-top: 50px; }
}