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


/* Defaults */
@media {
html, body {background-color: #000000; width: 100%; height: 100%; margin: 0; padding: 0;}

body {color: #DDDDDD; font-size: 14px; font-weight: 400;}

a {color: #DDDDDD; text-decoration: none;}

	a:hover {opacity: 0.7;}
	a img:hover {opacity: 0.7;}
	grid-image:hover {opacity: 0.7;}

.border {border: 1px solid #111111;}
	
wrapper {position: relative; display: block; margin: auto auto auto auto; padding: 2em 0 4em 0; width: 960px;}

header {position: relative; display: block; vertical-align: bottom; font-size: 0; height: 30px;}

	header a {color: #000000;}
	
	header-branding {position: relative; display: inline-block; width: 60%; height: inherit; font-size: 16px;}
		logo {display: inline-block; height: inherit; margin-right: 1.0em;}
			logo img {height: inherit;}
			logo a {height: inherit;}
		headline {display: inline-block; height: auto;  font-size: 26px;}
		tagline {display: inline-block; height: auto; margin-left: 1.5em;}

	header-nav {position: relative; display: inline-block; width: 40%; height: inherit; text-align: right; font-size: 16px;}
		header-nav ul {display: inline-block; height: auto; list-style-type: none; margin: auto auto auto auto; padding: 0 0 0 0;}
		header-nav li {display: inline-block; height: auto; margin-left: 1.5em;}

video-section {position: relative; display: block; margin: 2.0em 0 0 0;}
website-section {position: relative; display: block; margin: 4.0em 0 0 0;}
music-section {position: relative; display: block; margin: 4.0em 0 0 0;}
about-section {position: relative; display: block; margin: 4.0em 0 0 0;}
bulktext-section {position: relative; display: block; margin: 4.0em 0 0 0;}
socialmedia-section {position: relative; display: block; margin: 2.0em 0 0 0; text-align: center; font-size: 26px}
	socialmedia-section ul {list-style-type: none; margin: auto auto auto auto; padding: 0 0 0 0;}
	socialmedia-section li {display: inline; margin-left: 1.5em;}
	.marginleft0 {margin-left: 0;}

section-name {position: relative; display: block; font-size: 26px; margin: 0 0 .5em 0;}

video-container {position: relative; display: block; margin: 0 0 2.5em 0;}
	video-player {position: relative; display: block; margin: 0 auto .5em auto; line-height: 0;}
	video-title {position: relative; display: block; text-align: center;}
	.video16x9 {width: 100%;}
	.video4x3 {width: 75%;}
	.video1x1 {width: 55%;}
	.video4x5 {width: 45%;}

grid {position: relative; display: block; width: 100%; font-size: 0;}
	grid ul {position: relative; list-style-type: none; margin: 0; padding: 0;}
	grid li {position: relative; display: inline-block;	margin: 0 .92em 1em 0; font-size: 10px; vertical-align: top;}
	grid-image {position: relative; display: block;	width: 311px; height: 176px; background-size: cover; background-position: center center; margin: 0 0 .4em 0;}
	grid-title {position: relative; display: block; width: 100%; text-align: center;}

	.margin0 {margin: 0;}
	.text-client {}
	.text-spot {}
	.text-project {}
	.text-extra {}

about-container {position: relative; display: block;}
	portrait {position: relative; display:inline-block; vertical-align: top; width: 320px; height: 320px; background-size: cover; background-position: center center; margin: 0 2.0em 0 0;}
	bio {position: relative; display: inline-block; vertical-align: top; width: 60%; top:-.2em;}
	
bulktext-container {position: relative; display: block; font-size: 0;}
	column1 {position: relative; display: inline-block; vertical-align: top; width: 48%; margin: 0 2% 0 0; font-size: 14px;}
	column2 {position: relative; display: inline-block; vertical-align: top; width: 48%; margin: 0 0 0 2%; font-size: 14px;}

.indent {display: block; margin-left: 2em;}
		
}


/* Mobile */
@media only screen and (min-device-width : 320px) and (max-device-width : 736px) {
	/* Padding */
	wrapper {padding-bottom: 6em;}
	
	/* Widths */
	wrapper {width: 95%;}
	
	/* Font Sizes */
	header-nav {font-size: 26px;}
	tagline {font-size: 18px;}
	section-name {font-size: 20px;}
	socialmedia-section {font-size: 40px;}
	
	/* Grid */
	grid li {margin: 0 .92em .92em 0;}
	grid-image {width: 302px; height: 171px;}
	grid-title {display:none;}
}