@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500);

body{
	margin:0;
	padding:0;
	font-family:'Ubuntu';
	background:#444;
	color:#fff;
}
a {
	color:#ffc502;
	text-decoration: none;
	-webkit-transition: color .7s; /* For Safari 3.1 to 6.0 */
    transition: color .7s;
}
a:hover, a.active {
	text-decoration: none;
	color: #fff;
}
strong{
	font-weight:500;
	text-transform: uppercase;
	font-size:1.1em;
}
.clearfix{
	clear:both;
}
header{
	height:70px;
	width:100%;
	position:fixed;
	z-index:9;
	background: linear-gradient(to right, rgba(87, 10, 75, 1) 0%, rgba(255, 0, 106, 1) 100%);
	box-shadow: 0 1px 15px #b21968;
}
.name {
	margin:11px 10px 0 13px;
	float:left;
	font-size:2.7em;
	font-weight: 500;
	background:url('images/iconCode.png') no-repeat 0 3px;
	padding:0 0 0 55px;
}
.name a{color:#fff;}
.name a:hover{color:#ffc502;}
.nav {
	margin:27px 0 0 1.5em;
	float:right;
	font-size:1.2em;
}
.nav a{
	margin:0 15px;
	-webkit-transition: all .7s; /* For Safari 3.1 to 6.0 */
    transition: all .7s;
	position:relative;
	display:inline-block;
}
.container {
	position:relative;
  	max-width: 1015px;
  	width: auto;
  	margin: 0 auto;
  	padding:20px 15px 0;
}
#videos{ padding:70px 15px 20px; }
.summary{
	background:#777;
	text-align: center;
	padding:100px 0 30px;
}

.summary p{
	font-size:1.5em;
	font-weight: 300;
	width:70%;
	max-width:700px;
	margin:0 auto;
}

h2{
	font-size:1.2em;
	font-weight:400;
}
h2 span{
	font-size:1.4em;
	font-weight: 500;
}

/*  VIDEO PLAYER CONTAINER */
  		.vid-container {
		    position: relative;
		    padding-top: 30px; 
		    height: 0; 
		    float:left;
			width:845px;
			height: 460px;
		}
		 
		.vid-container iframe,
		.vid-container object,
		.vid-container embed {
		    position: absolute;
		    top: 0;
		    left: 0;
		}
		
		video {
		  width: 100%    !important;
		  height: auto   !important;
		}


		/*  VIDEOS PLAYLIST ############################### */
		.vid-list-container {
			width: 148px;
			float:right;
			overflow: hidden;
		}

		.vid-list {
			width: 1344px;
			position: relative;
			top:0;
			left: 0;
		}

		.vid-item {
			display: block;
			width: 148px;
			margin: 0 0 5px;
			padding:0 0 10px;
			position:relative;
		}
		.vid-item:hover {
			cursor:pointer;
		}

		.thumb {
			/*position: relative;*/
			overflow:hidden;
			height: auto;
		}

		.thumb img {
			width: 100%;
			position: relative;
		}

		.vid-item .desc {
			color: #ffc502;
			font-size: 1em;
			margin:5px 0;
			-webkit-transition: color .7s; /* For Safari 3.1 to 6.0 */
    		transition: color .7s;
		}
		.vid-item:hover .desc {
			color:#fff;
		}
		.vid-item .play {
			opacity:0;
			width:20px;
			height:20px;
			-webkit-transition: opacity .7s; /* For Safari 3.1 to 6.0 */
    		transition: opacity .7s;
		}
		.vid-item:hover .play {
			opacity:1;
		}
		
/* Scripts, News, Contact */
#scriptWrap{
	background:#777;
	width:100%;
	padding-bottom:5px;
}

.script{
	border-bottom:1px solid #ccc;
	padding:0 0 15px;
}
.script.last{
	border-bottom:0;
}

h3{
	text-transform:uppercase;
	font-weight:500;
}

#scriptWrap p{
	font-weight:300;
}

#contactbox .nolink a{
	background:none;
	width:auto;
	height:auto;
}
#contactbox a{
	background:url(/portfolio/images/socialmedia.png) 1px 0 no-repeat;
	height:58px;
	width:58px;
	margin:5px 5px 0;
	display:inline-block;
	float:none;
}
#contactbox a.tw{
	background-position:-71px 0;
}
#contactbox a.yt{
	background-position:0 -120px;
}
#contactbox a.tm{
	background-position:-140px -62px;
}
#contactbox a.insta{
	background-position:0 -62px;
}
#contactbox a.imdb{
	background-position:0 -185px;
	width:103px;
}
#contactbox a:hover{
	opacity:70;
	filter: alpha(opacity=70);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.contactbox .nolink a{
	background:none;
	width:auto;
	height:auto;
}

.contact{
	width:400px;
	float:left;
}
.social{
	float:left;
	margin:0 0 10px;
}


@media all and (max-width: 920px){
	.nav{margin:38px 0 0 1em;font-size:1.1em}
	.nav a {margin: 0 15px 0 0;}
	.heading {font-size:1.2em}
	.descrip{font-size:.9em;}
}
		
@media screen and (max-width: 1015px) {
	.container{
		max-width:853px;
	}
	.caption {
		margin-top: 40px;
	}
	.vid-container {
		float:none;
		margin:0 auto;
		padding-bottom:460px;
		width:100%;
		height:auto;
		margin-bottom:25px;
	}
	.vid-list-container {
		float:none;
		width:100%;
		margin:0 auto;
	}
	.vid-list {
		width:100%;
	}
	.vid-item {
		display: inline-block;
		margin:0 2px 0;
		width: 46%;
	}
	#scriptWrap {
		background: none;
	}
}


@media screen and (max-width: 736px) {
	header {
		height: 120px;
		text-align:center;
	}
	.name, .nav { float:none; }
	.name { padding: 0; }
	.nav{margin:20px 0 0 0;}
	.nav a {margin: 0 15px;}
	.container { top: 70px; }
	.container p { font-size: 1.4em; }
	.contactbox.appear { top:120px; }
}