/*
colors
spotify 	
background-color: #000;
color: #6AE368;

getup
background-color: #4fc3f7 #b3e5fc;

Footlocker 
#e71836

muna #d2d0c4
hilltrackr #42a5f5

*/

div, body, section, p, h1, h2, h3, h4 {
	padding: 0px;
	margin: 0px;
	font-family: 'Roboto', Tahoma, Arial, sans-serif;
	font-weight: 100;
}

h1 {
	padding-top: 14vw;
	text-align: center;
	font-size: 2.5em;
	font-weight: 100;
}

h2 {
	padding-top: 15vw;
	padding-left: 15vw;
	font-weight: 400;
}
h3 {
	/*font-family: 'Roboto:100', Tahoma, Arial, sans-serif;*/
	font-size: 1em;
	padding-left: 15vw;
	font-weight: 300;
}
h4 {
	font-size: 1em;
	padding-left: 15vw;
	font-weight: 400;
	/*color: rgba(47,213,101,1);*/
	/*color: rgba(0,0,0,1);*/
}
.spotify_text {
	color: rgba(47,213,101,1);
}
.footlocker_text {
	color: rgba(231,24,54,0.8);

}
strong {
	font-weight: 400;
/*	color: rgba(47,213,101,1);
*/
}

.h4_first {
	padding-top: 10vw;
}
.h4_second {
	padding-top: 5vw;
}
.footer {
	/*height: 5vw;*/
	margin-top: 10vw;
	padding-top: 2vw;
	padding-bottom: 2vw;
	width: 100%;
}

.spotify {
	background-color: rgba(47,213,101,0.8);
	color: #fff;
}
.previous {
	position: relative;
	display: inline-block;
}
.next {
	position: relative;
	display: inline-block;
	float: right;
	margin-right: 15vw;
}
p {
	font-weight: 300;
	padding-left: 15vw;
	padding-right: 15vw;
	line-height: 1.2em;
	letter-spacing: 0.4px;
	word-spacing: 0.7px;
}

video {
	width: 100%;
	height: 100%;
}
.project {
	width: 100vw;
	height: 34vw;
}
.content {
	width: 100vw;
	/*padding-bottom: 10vw;*/
/*	height: 50vw;
*/	/*background-color: rgba(47,213,101,0.1);*/
		background-color: rgba(255,255,255,0.0);

	color: rgba(0,0,0,0.6);

}
.spotify {
	background-color: rgba(47,213,101,0.8);
	color: #fff;
	background-image: url("../images/spotify_3screens.png");
	background-size:	45vw;
	background-repeat: no-repeat;
	background-position: 47vw;

}
#getup {
	background-color: rgba(79,195,247,0.7);
	color: #fff;
	background-image: url("../images/getup_3screens.png");
	background-size:	45vw;
	background-repeat: no-repeat;
	background-position: 47vw;
}
.footlocker {
	/*background-color: rgba(231,24,54,0.8);*/
	background-color: #444;

	color: #fff;
	background-image: url("../images/footlocker_3screens.png");
	background-size:	45vw;
	background-repeat: no-repeat;
	background-position: 47vw;
}
#muna {
	background-color: #d2d0c4;
	color: #fff;
	background-image: url("../images/muna_1screen.png");
	background-size:	45vw;
	background-repeat: no-repeat;
	background-position: 47vw;
}
#hilltrackr {
	background-color: #42a5f5;
	color: #fff;
	background-image: url("../images/hilltrackr_2screens.png");
	background-size:	45vw;
	background-repeat: no-repeat;
	background-position: 47vw;
}
#instapay {
	background-color: #36A5A3;
	color: #fff;
	background-image: url("../images/instapay/triplescreen.png");
	background-size:	37vw;
	background-repeat: no-repeat;
	background-position: 51.2vw;
}
.titles {
	padding-top: 15vw;
}
.project_image {
	height: 25vw;
	float: right;
}	
.navbar {
	position: fixed;
	width: 100vw;
	top: 0px; 
	left: 0px;
	background-color: rgba(255,255,255,0.9);
}
.nav_space {
	height: 44px;
}
.nav {
	text-align: center;
	position: relative;
	display: inline-block;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 0px;
	padding-right: 36px;
	color: #000;

}
.nav:hover {
	color: #999;
}
.nav_left {
	margin-left: 36px;
	position: relative;
	display: inline-block;
}
.nav_right {
	float: right;
	position: relative;
}

a:hover{
	text-decoration: none;
}
a:visited{
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:active{
	text-decoration: none;
}
.phover:hover {
	opacity: 0.8;
}
.project_hover:hover{
	text-decoration: none;
}
.project_hover:visited{
	text-decoration: none;
}
.project_hover:link{
	text-decoration: none;
}
.project_hover:active{
	text-decoration: none;
}
.fw_video {
	margin-top: 10vw;
	margin-left: 15vw;
	margin-right: 15vw;
	/*padding-bottom: 15vw;*/
	height: 40vw;
}
.footlocker_gifs {
	background-size:	230%;
	background-position: -15vw 0px;
	background-repeat: no-repeat;
	height: 40vw;

}
.about {
	padding-top: 15vw;
	padding-bottom: 15vw;
}
.about_image {
	background-image: url("../images/Josh-on-wall.jpg");
	background-size:	100%;
	background-repeat: no-repeat;
	width: 100vw;
	height: 49vw;
	background-position: 0vw -3vw;
}
.w_image {
	background-size:	100%;
	background-repeat: no-repeat;
	margin-top: 2vw;
	margin-left: 20vw;
	margin-right: 20vw;
	height: 35vw;
}
.xw_image {
	background-size:	100%;
	background-repeat: no-repeat;
	margin-top: 2vw;
	margin-left: 5vw;
	margin-right: 15vw;
	height: 35vw;
}
.xxw_image {
	background-size:	100%;
	background-repeat: no-repeat;
	margin-top: 2vw;
	margin-left: 8vw;
	margin-right: 8vw;
	height: 43vw;
}
#spotify_cjf {
	background-image: url("../images/spotify/spotifyJourneyFramework.png");
	background-size:	100%;
	/*background-repeat: no-repeat;*/
	/*background-position: 0px 0px;*/
}
#footlocker_experience {
	background-image: url("../images/footlocker/footlocker_experience.png");
		/*background-size:	100%;*/
	/*height: 46vw;*/
	background-position: 0px 0px;
}
#footlocker_bp {
	background-image: url("../images/footlocker/footlocker_bp.png");
		/*background-size:	100%;*/
	/*height: 46vw;*/
	background-position: 2vw 0px;
}
#footlocker_cjf {
	background-image: url("../images/footlocker/footlocker_cjf.png");
		/*background-size:	100%;*/
	height: 24vw;
	margin-left: 1vw;
	margin-right: 1vw;
	background-position: 0vw 0px;
	/*width: 100vw;*/
}
#footlocker_scan {
	background-image: url("../images/footlocker/footlocker_scan.gif");
}
#footlocker_context {
	background-image: url("../images/footlocker/footlocker_context.gif");
}
#footlocker_action {
	background-image: url("../images/footlocker/footlocker_action.gif");
}
#footlocker_compare_short {
	background-image: url("../images/footlocker/footlocker_compare_short.gif");
}
#footlocker_compare_slow {
	background-image: url("../images/footlocker/footlocker_compare_slow.gif");
}
#footlocker_fast_swipe {
	background-image: url("../images/footlocker/footlocker_fast_swipe.gif");
}
#footlocker_info_fit_review {
	background-image: url("../images/footlocker/FL-prototype_info_fit_review2.gif");
}
.no-padding-right {
	padding-right: 0px;
}
.slides {
	/*width: 100%;*/
	margin-right: 15vw;
	margin-top: 10vw;
	text-align: center;
	font-size: 1.3em;
}
.slides:hover {
	opacity: 0.7;
}
.a-70-30 {
	position: relative;
	display: inline-block;
	width: 60vw;
	height: 100%;
	bottom: 21vw;
}
.b-70-30 {
	padding-top: 10vw;
	position: relative;
	display: inline-block;
	width: 24vw;
}
@media only screen and (max-width: 1080px) {
	h1 {
	padding-top: 30vw;
	text-align: center;
	font-size: 2.5em;
	font-weight: 100;
	}

	h2 {
		width: 100%;
		text-align: center;
		padding-top: 5vw;
		padding-left: 0vw;
		font-size: 1.2em;
	}
	h3 {
		font-size: 0.9em;
		padding-left: 0vw;
		width: 100%;
		text-align: center;
	}
	h4 {
		font-size: 1em;
		padding-left: 0vw;
		width: 100%;
		text-align: center;
	}
	.nav {
		padding-right: 0px;
		width: 30%;
	}
	.josh_nav{
		width: 100%;
	}
	.nav_left {
		margin-left: 0px;
		text-align: center;
		width: 35%;
	}	
	.nav_right {
		width: 60%;
	}
	.project {
		height: 80vw;
	}
	.spotify, #getup, .footlocker, #muna, #hilltrackr {
		background-size:	80vw;
		background-position: center 20vw;
	}
	#instapay {
		background-size:	69vw;
		background-position: center 20vw;
	}
	.previous, .next {
		width: 33%;
	}
	.previous {
		text-align: left;
		margin-left: 15vw;
	}
	.next {
		text-align: right;
	}
}