@charset "UTF-8";
/* CSS Document */
html{-webkit-text-size-adjust:none;}
body{
	background-color:#1C1C1C;
	margin:0px auto;
}
main{
	position:relative;
	z-index: 1;	
}
main, footer{
	padding-bottom: 1px;
}

/* begin header */

header {
	margin: 0px auto;
	width: 100%;
	height:60px;
	position: fixed;
	top:0px;
	z-index: 3;
}
#header_block{
	position:fixed;
	width: 100%;
	height: 60px;
	z-index:3;
	background-color:black;
}
#header_block p{
	font-family:helvetica, sans-serif;
	font-size:35px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 4px;
	margin-top:10px;
	color:white;
}
#header_block a:link, #header_block a:visited{
	text-decoration: none;
	color:white;
}
#header_block a:hover, #header_block a:focus, #header_block a:active{
	color:#8c8c8c;
}
nav {
	position: fixed;
	float: left;
	margin: 62px 0px 0px 60px;
	z-index: 5;
}
nav ul li {
	font-family: 'Didact Gothic', sans-serif;
	list-style-type: none;
	margin-left: 2px;
	padding-top: 20px;
	font-size: 14px;
	text-align: left;	
	color:white;
}
nav ul li a:link, nav ul li a:visited{
	color:white;
	text-decoration: none;	
}
nav ul li a:hover, nav ul li a:focus, nav ul li a:active{
	color:#8c8c8c;
}
.current{
	color:#C1272D!important;
}
#menu_line {
	width: 1px;
	height: 273px;
	margin-left: 75px;
	position: relative;
	background-color:#8C8C8C;
}
/* begin socials */
.socials{
	z-index: 5;
	background-size: cover;
	background-repeat: no-repeat;
	width: 30px;
	height: 30px;
	margin-left: 25px;
	position: fixed;
	top:30px;
	background-color: #171717;
	border-radius: 50px;
	-o-transition:.3s ease-out;
	-moz-transition:.3s ease-out;
	-webkit-transition:.3s ease-out;
	transition: 0.3s ease-out;	
}
#facebook, #facebook_mobile, #instagram, #instagram_mobile, #twitter, #twitter_mobile, #soundcloud, #soundcloud_mobile, #vimeo, #vimeo_mobile{
	-o-transition:.3s ease-out;
	-moz-transition:.3s ease-out;
	-webkit-transition:.3s ease-out;
	transition: 0.3s ease-out;	
}
#facebook {
	background-image:url("../images/facebook.svg");
	margin-top: 40px;	
}
#facebook:hover, #instagram:hover, #twitter:hover, #soundcloud:hover, #vimeo:hover{
	background-position: bottom;
}
#instagram {
	background-image:url("../images/instagram.svg");
	margin-top: 82px;
}
#twitter {
	background-image:url("../images/twitter.svg");
	margin-top: 124px;
}
#soundcloud {
	background-image:url("../images/soundcloud.png");
	margin-top: 166px;
}
#vimeo {
	background-image:url("../images/vimeo.svg");
	margin-top: 208px;
}
/* end socials */

#mySidenav{
	display:none;
}

/* end header */

.cover {
  	width: 100%;
	height: 100vh !important;	
	position: fixed;
	top:0px;
	overflow: hidden;
	background-image: url(../images/background-image.jpg);
	background-size:cover;
	background-position:center;
}
.cover-wrapper {
    height: 100vh !important;
	margin:0px auto;
	cursor: pointer;
}
#Container {
	width: 100%;
	margin: 0px auto 20px;
}
footer{
	width: 100%;
	height:30px;
	background-color:black;
	opacity: 1;
	border-top:1px solid black;
	font-family:"Didact Gothic", sans-serif;
	font-size: 12px;
	line-height: 8px;
	color:white;
	text-align: center;
	z-index: 1;
	position:fixed;
	bottom:0px;
}
@-o-keyframes socialsSlideUp {
	from {
		top:0px;
	}
	to {
		top:-300px;
	}
}
@-moz-keyframes socialsSlideUp {
	from {
		top:0px;
	}
	to {
		top:-300px;
	}
}
@-webkit-keyframes socialsSlideUp {
	from {
		top:0px;
	}
	to {
		top:-300px;
	}
}
@keyframes socialsSlideUp {
	from {
		top:0px;
	}
	to {
		top:-300px;
	}
}
@-o-keyframes menuSlide {
	from {
		left:-300px;
	}
	to {
		left:0px;
	}
}
@-moz-keyframes menuSlide {
	from {
		left:-300px;
	}
	to {
		left:0px;
	}
}
@-webkit-keyframes menuSlide {
	from {
		left:-300px;
	}
	to {
		left:0px;
	}
}
@keyframes menuSlide {
	from {
		left:-300px;
	}
	to {
		left:0px;
	}
}
@-o-keyframes logoSlide {
	from {
		top:-300px;
	}
	to {
		top:0px;
	}
}
@-moz-keyframes logoSlide {
	from {
		top:-300px;
	}
	to {
		top:0px;
	}
}
@-webkit-keyframes logoSlide {
	from {
		top:-300px;
	}
	to {
		top:0px;
	}
}
@keyframes logoSlide {
	from {
		top:-300px;
	}
	to {
		top:0px;
	}
}
@-o-keyframes bckgdOpacity {
	from {
		opacity:1;
	}
	to {
		opacity:0.1;
	}
}
@-moz-keyframes bckgdOpacity {
	from {
		opacity:1;
	}
	to {
		opacity:0.1;
	}
}
@-webkit-keyframes bckgdOpacity {
	from {
		opacity:1;
	}
	to {
		opacity:0.1;
	}
}
@keyframes bckgdOpacity {
	from {
		opacity:1;
	}
	to {
		opacity:0.1;
	}
}
@media (max-width: 1036px) {
	body{
		background-color:#1C1C1C;
	}
	nav {	
		display: none;
	}
	.socials, #menu_line{
		display: none;
	}
	#menu_line_mobile{
		display:block;
		top:-300px;
		z-index: 5;
		width: 1px;
		height: 273px;
		margin-left: 102px;
		position: absolute;
		background-color:#8C8C8C;
	}
	#socials_mobile{
		display:block;
		position:fixed;
		z-index: 5;
		top:-300px;
		margin-left:30px;
		margin-top:20px;
	}
	.socials_mobile{
		background-size: cover;
		background-repeat: no-repeat;
		width:40px;
		height:40px;
		margin-left: 22px;
		position: absolute;
		background-color: #171717;
		-o-transition:.3s ease-out;
		-moz-transition:.3s ease-out;
		-webkit-transition:.3s ease-out;
		transition: 0.3s ease-out;	
	}
	#facebook_mobile {
		background-image:url("../images/facebook.svg");
		margin-top: 40px;
	}
	#instagram_mobile {
		background-image:url("../images/instagram.svg");
		margin-top: 82px;
	}
	#twitter_mobile {
		background-image:url("../images/twitter.svg");
		margin-top: 124px;
	}
	#soundcloud_mobile {
		background-image:url("../images/soundcloud.png");
		margin-top: 166px;
	}
	#vimeo_mobile {
		background-image:url("../images/vimeo.svg");
		margin-top: 208px;
	}
	#facebook_mobile:hover, #instagram_mobile:hover, #twitter_mobile:hover, #soundcloud_mobile:hover, #vimeo_mobile:hover{
		background-position: bottom;
	}
	.hamburger {
		float: left;
		z-index:10;
		position:absolute;
		margin-left: 20px;
		margin-top: 17px;
    	display: inline-block;
    	cursor: pointer;
	}
	.bar1, .bar3 {
    	width: 35px;
    	height: 3px;
    	background-color: #FFFFFF;
    	margin: 6px 0;
		-o-transition: 0.4s;
		-moz-transition: 0.4s;
		-webkit-transition: 0.4s;
    	transition: 0.4s; 	
	}
	.change .bar1 {	
    	-o-transform: rotate(-180deg) translate(0px, -7px);
    	-moz-transform: rotate(-180deg) translate(0px, -7px);
    	-ms-transform: rotate(-180deg) translate(0px, -7px);
    	-webkit-transform: rotate(-180deg) translate(0px, -7px);
    	transform: rotate(-180deg) translate(0px, -7px);
		background-color:#C1272D;
	}
	.change .bar3 {
    	-o-transform: rotate(90deg);
    	-moz-transform: rotate(90deg);
    	-ms-transform: rotate(90deg);
    	-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
		background-color:#C1272D;
	}
	#mySidenav{
		display:block;
	}
	/* The side navigation menu */
	.sidenav {
   		height: 0%; /* 100% Full-height */
    	width: 250px; /* 0 width - change this with JavaScript */
   		position: fixed; /* Stay in place */
    	z-index: 4; /* Stay on top */
    	top: -90px; /* Stay at the top */
    	left: -4px;
    	background-color:#171717; /* Black*/
		border: 1px solid #8C8C8C;
    	overflow: hidden; /* Disable horizontal scroll */
    	padding-top: 80px; /* Place content 60px from the top */
    	-o-transition: 0.7s ease-out; /* 0.5 second transition effect to slide in the sidenav */
    	-moz-transition: 0.7s ease-out; /* 0.5 second transition effect to slide in the sidenav */
    	-webkit-transition: 0.7s ease-out; /* 0.5 second transition effect to slide in the sidenav */
    	transition: 0.7s ease-out; /* 0.5 second transition effect to slide in the sidenav */
		margin-top:-4px;
	}
	/* The navigation menu links */
	.sidenav a {
		margin-left: 124px;
    	padding: 12px 8px 8px 8px;
    	text-decoration: none;
		word-wrap:normal;
		text-align: left;
		font-family:"Didact Gothic", sans-serif;
    	font-size: 16px;
    	color: white;
    	display: block;
		position:relative;
		-o-transition: .3s;
		-moz-transition: .3s;
		-webkit-transition: .3s;
    	transition: 0.3s;			
	}
	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover {
    	color: #920000;
	}
	.sidenav{
		font-size: 30px;
		margin-bottom: 20px;
	}
}