/* RESET */


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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2em;
}
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;
}




		/* MAIN */




@font-face {
    font-family:gotham-ultra;
    src:url(./fonts/GothamNarrow-Ultra.otf);
}
@font-face {
    font-family:gotham-medium;
    src:url(./fonts/GothamNarrow-Medium.otf);
}
@font-face {
    font-family:gotham-light;
    src:url(./fonts/GothamNarrow-Light.otf);
}
@font-face {
    font-family:gotham-light-italic;
    src:url(./fonts/GothamNarrow-LightItalic.otf);
}

html {
  overflow-y: scroll;
}

body
{
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:16px;
	letter-spacing:0em;
	
	width:1040px;
	margin:0 auto;
	
	padding:40px 0;
	
	/*background-image:url("./grid.png");
	background-position: center;*/
	background-image:url("./images/background.jpg");
	background-position:center 0;
	background-repeat:no-repeat;
	background-size:100%;
}

#backgroundGradient
{
	width:200%;
	height:800px;
	z-index: -100;
	position:absolute;
	left:-100%;
	top:-40px;
	/*background: rgba(255,255,255,1);
	background: -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
	background: -o-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
	background: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
	background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));*/
}

/* TOP BAR */

#topBar
{
	margin-bottom:40px;
	padding:20px 0;
	position:relative;
}

#warriyoLogoBox
{
	display:block;
	width:320px;
	height:71.81px;
	margin:0 auto;
	position:relative;
}

#warriyoLogo
{
	width:320px;
	height:71.81px;
	background-image:url(./images/warriyoLogo.svg);
	background-size: 320px 71.81px;
	margin-left:2px;
	opacity:1;
}
#warriyoLogoShadow
{
	width:320px;
	height:71.81px;
	position:absolute;
	top:3px;
	background-image:url(./images/warriyoLogoShadow.svg);
	background-size: 320px 71.81px;
	z-index:-1;
	filter:blur(5px);
	margin-left:2px;
	opacity:0.3;
}

@-webkit-keyframes wiggle
{
	0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
	12.5% { -webkit-transform: translate(-5px, -6px) rotate(-1.5deg); }
	25% { -webkit-transform: translate(-7px, 4px) rotate(1deg); }
	37.5% { -webkit-transform: translate(3px, 6px) rotate(0deg); }
	50% { -webkit-transform: translate(5px, -5px) rotate(1.5deg); }
	62.5% { -webkit-transform: translate(-5px, 6px) rotate(-1deg); }
	75% { -webkit-transform: translate(-7px, 2px) rotate(0deg); }
	87.5% { -webkit-transform: translate(6px, 5px) rotate(-1.5deg); }
	100% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
}
#warriyoLogo
{
	-webkit-animation-name: wiggleStop;
	-webkit-animation-duration: 2.7586206896551724137931034482759s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1,0,0.9,0.9);
}
#warriyoLogoShadow
{
	-webkit-animation-name: wiggleStop;
	-webkit-animation-duration: 2.7586206896551724137931034482759s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1,0,0.9,0.9);
}

#navBar
{
	width:320px;
	height:40px;
	margin:10px auto 0 auto;
}

.navBarElement
{
	display:block;
	float:left;
	line-height:20px;
	margin:10px 0px;
	width:33.33%;
	text-align:center;
}
.navBarElement a
{
	text-decoration:none;
	color:rgba(255,255,255,1);
	display:inline-block;
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
	width:57px;
	padding:5px;
	background:rgba(0,0,0,0.1);
	box-shadow:0 3px 5px rgba(0,0,0,0.3);
	transition:0.2s;
}
.navBarElement a:hover
{
	box-shadow:0 8px 5px rgba(0,0,0,0.3);
}

/* Hover Animation */

#activePage
{
	color:rgba(255,255,255,1);
	box-shadow:0 8px 5px rgba(0,0,0,0.3);
}

#activePage:after
{
	content:"";
	display:block;
	
	height:2px;
	width:67px;
	margin-left: -5px;
	background-color:rgba(255,255,255,1);
	position: relative;
	top: 5px;
}

a.hoverAnim:hover
{
	color:rgba(0,0,0,1);
}

/* CONTENT */

.leftCol
{
	width:680px;
	float:left;
	position:relative;
}

.rightCol
{
	width:320px;
	float:right;
}

.rightColModule
{
	width:280px;
	padding:20px;
	margin-bottom:20px;
	background-color:rgba(0,0,0,0.1);
	position:relative;
}

.sectionTitle
{
	line-height:20px;
	margin-bottom:12px;
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.fullWidthCol
{
	width:1000px;
	padding:20px;
	background-color:rgba(0,0,0,0.1);
	float:left;
}

/* LEFT COLUMN */

/* LATEST RELEASE */

.verticalText
{
	transform: rotate(-90deg);
	transform-origin: left top 0;
	position:absolute;
	left:-35px;
	font-size:1.3em;
}

#veticalTextLatestRelease
{
	bottom:-33px;
}

#veticalTextPreviousReleases
{
	bottom:47px;
}

#latestRelease
{
	float:left;
	position:relative;
}

#latestRelease.aboutPage
{
	width:680px;
	/* height:180px; */
	text-align:center;
}

#latestReleaseCoverImage, #popupTrackCoverImage
{
	position:relative;
	width:320px;
	height:320px;
	float:left;
}

#latestReleaseCoverImage.aboutPage
{
	width:200px;
	height:200px;
	border-radius:100px;
	top:0px;
	float:none;
	margin:0 auto 20px 0;
}

#latestReleaseCoverImage.aboutPageYoutube
{
	width:56px;
	height:56px;
	border-radius:100px;
	position:relative;
	/* top:15px; */
}
	
#latestReleaseInfo, #popupTrackInfo
{
	width:340px;
	height:320px;
	padding-left:20px;
	float:left;
}

#latestReleaseInfo.aboutPage
{
	width:460px;
	height:auto;
	float:none;
	padding:30px 0 0 0;
	margin:0 auto;
}

#latestReleaseDescription, #popupTrackDescription
{
	margin-bottom:20px;
}

#latestReleaseData, #popupTrackData
{
	margin-bottom:20px;
}

.title
{
	font-family:gotham-ultra, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:1.5em;
	margin-bottom:20px;
}

.light
{
	font-family:gotham-light, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.small
{
	font-size:13px;
}

.medium
{
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.medium:after
{
	content:"\00a0\00a0\00a0\00a0";
}

/* RECENT RELEASES */

#recentReleases
{
	width:680px;
	float:left;
	margin-top:40px;
	position:relative;
}
#recentReleases.aboutPage
{
	text-align:center;
	margin-bottom:80px;
}

.recentReleaseContainer
{
	height:240px;
	width:200px;
	float:left;
	margin-right:40px;
	margin-bottom:40px;
	text-align:center;
	-webkit-filter: opacity(30%);
    filter: opacity(30%);
	position:relative;
	top:0px;
	transition:0.5s;
	cursor: pointer;
}

.recentReleaseContainer:hover
{
	-webkit-filter: opacity(100%);
    filter: opacity(100%);
	top:-10px;
}

.recentReleaseContainerLast
{
	height:240px;
	width:200px;
	float:left;
	margin-right:0px;
	margin-bottom:40px;
	text-align:center;
	-webkit-filter: opacity(30%);
    filter: opacity(30%);
	position:relative;
	top:0px;
	transition:0.5s;
	cursor: pointer;
}

.recentReleaseContainerLast:hover
{
	-webkit-filter: opacity(100%);
    filter: opacity(100%);
	top:-10px;
}

.recentReleaseCover
{
	width:200px;
	height:200px;
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	transition:0.5s;
}

.recentReleaseCover:hover
{
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.recentReleaseInfo
{
	font-size:14px;
	line-height:20px;
	margin-top:10px;
}

.social_icons
{
	width:119px;
	height:30px;
	margin:0 auto;
}

.twitterIcon
{
	display:block;
	background:url(./images/small_icons/social_icons.png) 0px 0px;
	background-repeat:no-repeat;
	width:36px;
	height:30px;
	float:left;
	margin-right:11px;
}

.twitterIcon:hover
{
	background:url(./images/small_icons/social_icons.png) 0px -40px;
}

.instagramIcon
{
	display:block;
	background:url(./images/small_icons/social_icons.png) -47px 0px;
	background-repeat:no-repeat;
	width:30px;
	height:30px;
	float:left;
	margin-right:12px;
}

.instagramIcon:hover
{
	background:url(./images/small_icons/social_icons.png) -47px -40px;
}

.facebookIcon
{
	display:block;
	background:url(./images/small_icons/social_icons.png) -89px 0px;
	background-repeat:no-repeat;
	width:30px;
	height:30px;
	float:left;
}

.facebookIcon:hover
{
	background:url(./images/small_icons/social_icons.png) -89px -40px;
}

/* RECENT RELEASE POPUP */

#recentReleasePopup
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:100;
}

.recentReleasePopupContainer
{
	position:fixed;
	top:50%;
	left:50%;
	margin-left:-360px;
	margin-top:-180px;
	width:680px;
	height:320px;
	padding:20px;
	background-color:white;
	box-shadow:0 0 15px black;
}

.popupFadeOut
{
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 300ms, opacity 300ms;
}
.popupFadeIn
{
	visibility: visible;
	opacity: 1;
	transition: visibility 0s linear 0s, opacity 300ms;
}

#closePopup
{
	width:30px;
	height:30px;
	border-radius:15px;
	background-color:white;
	box-shadow:0 0 15px black;
	position:absolute;
	right:-50px;
	top:0px;
}

#closePopup div
{
	width:30px;
	height:30px;
	background-image:url("./images/closePopup.png");
	opacity:0.5;
	transition:0.5s;
	cursor: pointer;
}

#closePopup div:hover
{
	opacity:1;
}

/* RIGHT COLUMN */

/* BUY MUSIC */

#buyMusicSection
{
	margin-top:-10px;
	height:50px;
}

#buyMusicSection.aboutPage
{
	width:280px;
	margin-bottom:20px;
	float:none;
}

.buyMusicIcon
{
	float:left;
	display:block;
}

.buyMusicIcon #itunes
{
	width:34px;
	height:41px;
	background:url(./images/buyMusicIcons.png) 0px -58px;
	margin-right:23px;
	margin-top:8px;
}

.buyMusicIcon #beatport
{
	width:55px;
	height:33px;
	background:url(./images/buyMusicIcons.png) -56px -66px;
	margin-right:23px;
	margin-top:16px;
}

.buyMusicIcon #googlePlay
{
	width:34px;
	height:36px;
	background:url(./images/buyMusicIcons.png) -132px -64px;
	margin-right:17px;
	margin-top:14px;
}

.buyMusicIcon #bandcamp
{
	width:94px;
	height:32px;
	background:url(./images/buyMusicIcons.png) -186px -66px;
	margin-top:16px;
}

.buyMusicIcon #itunes:hover
{
	background:url(./images/buyMusicIcons.png) 0px -8px;
}

.buyMusicIcon #beatport:hover
{
	background:url(./images/buyMusicIcons.png) -56px -16px;
}

.buyMusicIcon #googlePlay:hover
{
	background:url(./images/buyMusicIcons.png) -132px -14px;
}

.buyMusicIcon #bandcamp:hover
{
	background:url(./images/buyMusicIcons.png) -186px -16px;
}

/* STREAM MUSIC */

#streamMusicSection
{
	margin-top:-10px;
	height:50px;
}

#streamMusicSection.aboutPage
{
	width:280px;
}

.streamMusicIcon
{
	float:left;
}

.streamMusicIcon #spotify
{
	width:34px;
	height:35px;
	background:url(./images/streamMusicIcons.png) 0px -65px;
	margin-right:22px;
	margin-top:15px;
}

.streamMusicIcon #deezer
{
	width:58px;
	height:33px;
	background:url(./images/streamMusicIcons.png) -56px -64px;
	margin-right:23px;
	margin-top:14px;
}

.streamMusicIcon #youtube
{
	width:46px;
	height:33px;
	background:url(./images/streamMusicIcons.png) -137px -64px;
	margin-right:22px;
	margin-top:14px;
}

.streamMusicIcon #soundcloud
{
	width:75px;
	height:33px;
	background:url(./images/streamMusicIcons.png) -205px -64px;
	margin-top:14px;
}

.streamMusicIcon #spotify:hover
{
	background:url(./images/streamMusicIcons.png) 0px -15px;
}

.streamMusicIcon #deezer:hover
{
	background:url(./images/streamMusicIcons.png) -56px -14px;
}

.streamMusicIcon #youtube:hover
{
	background:url(./images/streamMusicIcons.png) -137px -14px;
}

.streamMusicIcon #soundcloud:hover
{
	background:url(./images/streamMusicIcons.png) -205px -14px;
}

/* SMALL ICONS */

.buyMusicSectionSmall
{
	margin-top:-10px;
	height:30px;
}

.spotifySmall
{
	width:21px;
	height:22px;
	background:url(./images/small_icons/spotifySmall.png) 0 -38px;
	background-repeat:no-repeat;
	margin-right:12px;
	margin-top:8px;
}

.itunesSmall
{
	width:21px;
	height:25px;
	background:url(./images/small_icons/itunesSmall.png) 0 -35px;
	background-repeat:no-repeat;
	margin-right:12px;
	margin-top:5px;
}

.youtubeSmall
{
	width:28px;
	height:20px;
	background:url(./images/small_icons/youtubeSmall.png) 0 -40px;
	background-repeat:no-repeat;
	margin-right:12px;
	margin-left:2px;
	margin-top:9px;
}

.bandcampSmall
{
	width:58px;
	height:20px;
	background:url(./images/small_icons/bandcampSmall.png) 0 -40px;
	background-repeat:no-repeat;
	margin-right:12px;
	margin-left:-7px;
	margin-top:9px;
}

.spotifySmall:hover
{
	background:url(./images/small_icons/spotifySmall.png) 0 -8px;
	background-repeat:no-repeat;
}

.itunesSmall:hover
{
	background:url(./images/small_icons/itunesSmall.png) 0 -5px;
	background-repeat:no-repeat;
}

.youtubeSmall:hover
{
	background:url(./images/small_icons/youtubeSmall.png) 0 -10px;
	background-repeat:no-repeat;
}

.bandcampSmall:hover
{
	background:url(./images/small_icons/bandcampSmall.png) 0 -10px;
	background-repeat:no-repeat;
}




#bpmInput
{
	width:22px;
	height:22px;
	font-size:12px;
	padding:4px;
	border:none;
	background-color:rgba(0,0,0,0.1);
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
	position:relative;
	left:66px;
	color:white;
	outline: none;
	box-shadow:0 3px 5px rgba(0,0,0,0.3);
}
#bpmInput:hover
{
	color:black;
}

#bpmLabel
{
	display:inline-block;
	position:relative;
	left:68px;
	width:22px;
	height:22px;
	line-height:22px;
	font-size:11px;
	padding:4px;
	border:none;
	background-color:rgba(0,0,0,0.1);
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
	color:white;
	cursor:default;
	box-shadow:0 3px 5px rgba(0,0,0,0.3);
}
	
#bpmStart
{
	position:relative;
	left:-2px;
	top:35px;
	width:30px;
	height:30px;
	font-size:12px;
	padding:4px;
	border:none;
	background-color:rgba(0,0,0,0.1);
	background-image:url(./images/small_icons/playButton.png);
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
	cursor:pointer;
	outline: none;
	box-shadow:0 3px 5px rgba(0,0,0,0.3);
}
#bpmStart:hover
{
	background-position:0 30px;
}

#bpmStop
{
	position:relative;
	left:-1px;
	top:35px;
	width:30px;
	height:30px;
	font-size:12px;
	padding:4px;
	border:none;
	background-color:rgba(0,0,0,0.1);
	background-image:url(./images/small_icons/stopButton.png);
	font-family:gotham-medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
	cursor:pointer;
	outline: none;
	box-shadow:0 3px 5px rgba(0,0,0,0.3);
}
#bpmStop:hover
{
	background-position:0 30px;
}

#bpmForm
{
	position:absolute;
	right:-106px;
	top:0;
	height:73px;
	width:424px;
	opacity:0;
	transition:0.25s;
	transition-delay: 0.5s;
	text-align:right;
}

#bpmForm:hover
{
	opacity:1;
	transition-delay: 0.15s;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

#popupTrackTempo, #latestTrackTempo
{
	cursor: url(./images/small_icons/mysteryPointer.png),auto;
}

#bottomLimit
{
	width:1040px;
	height:960px;
}

#twitterFeedContainer
{
	width:280px;
	height:224px;
}
#twitterFeedContainer a
{
	color:rgba(0,0,0,0);
	text-decoration:none;
}

#twitterButtonContainer
{
	width:148px;
	height:28px;
	/* margin-bottom:20px; */
}
#twitterButtonContainer a
{
	color:rgba(0,0,0,0);
	text-decoration:none;
}

#youtubeSubscribe
{
	width:117px;
	margin-top:20px;
	position:relative;
	left:12px;
	overflow:hidden;
}



.crediting
{
	font-family:gotham-light-italic, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height:15px;
	margin:10px 0;
	padding:10px;
	background-color:rgba(255,255,255,0.5);
}

.creditingSpaceAfter
{
	margin-bottom:7px;
}

.moveLeft
{
	position:relative;
	left:-55px;
}

.epkHover {
    position: relative;
    display: inline-block;
}

.epkHover .epkHoverText {
    visibility: hidden;
    width: 300px;
    background-color: rgba(0,0,0,0.1);
    text-align: center;
    padding: 5px 10px;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -80%;
    left: 120%;
}

.epkHover:hover .epkHoverText {
    visibility: visible;
}

.aboutPage#latestReleaseInfo
{
	width:680px;
}

.aboutPage#latestReleaseDescription
{
	text-align:justify;
}

.contactPage#latestReleaseDescription
{
	text-align:center;
}




@media screen and (max-width: 1200px) {
    body{
		width:680px;
		padding:0 50px;
	}
	p{
		font-size:1.2em;
	}
	.rightCol{
		width:680px;
		float:left;
		margin:0;
		overflow:hidden;
	}
	.rightColSplit{
		width:320px;
		float:left;
		overflow:hidden;
	}
	.rightColSplit#floatRight{
		float:right;
	}
	.rightColSplit.aboutPage{
		float:none;
		margin:0 auto;
		width:680px;
	}
	.rightColSplit.aboutPage .rightColModule{
		width:640px;
	}
	.rightColSplit.contactPage .rightColModule{
		text-align:center;
	}
	#latestReleaseDescription.contactPage{
		font-size:1.3em;
	}
	#twitterButtonContainer{
		margin: 0 246px;
	}
	#bottomLimit{
		width:680px;
	}
	.moveLeft{
		left:0px;
	}
	#warriyoLogoBox{
		width:680px;
		height:152.59px;
	}
	#warriyoLogoShadow{
		width:680px;
		height:152.59px;
		background-size: 680px 152.59px;
	}
	#warriyoLogo{
		width:680px;
		height:152.59px;
		background-size: 680px 152.59px;
	}
	#navBar{
		width:680px;
	}
	.navBarElement{
		font-size:1.2em;
		line-height:40px;
	}
	.navBarElement a{
		width:124px;
	}
	#activePage:after{
		width:134px;
	}
	#bpmForm{
		width:784px;
		height:153px;
	}
}