@charset "UTF-8";
@font-face {
	font-family:'latoblack';
	src:url('font/lato/lato-bla-webfont.eot');
	src:url('font/lato/lato-bla-webfont.eot?#iefix') format('embedded-opentype'),url('font/lato/lato-bla-webfont.woff') format('woff'),url('font/lato/lato-bla-webfont.ttf') format('truetype'),url('font/lato/lato-bla-webfont.svg#latoblack') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'latobold';
	src:url('font/lato/lato-bol-webfont.eot');
	src:url('font/lato/lato-bol-webfont.eot?#iefix') format('embedded-opentype'),url('font/lato/lato-bol-webfont.woff') format('woff'),url('font/lato/lato-bol-webfont.ttf') format('truetype'),url('font/lato/lato-bol-webfont.svg#latobold') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'latohairline';
	src:url('font/lato/lato-hai-webfont.eot');
	src:url('font/lato/lato-hai-webfont.eot?#iefix') format('embedded-opentype'),url('font/lato/lato-hai-webfont.woff') format('woff'),url('font/lato/lato-hai-webfont.ttf') format('truetype'),url('font/lato/lato-hai-webfont.svg#latohairline') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'latolight';
	src:url('font/lato/lato-lig-webfont.eot');
	src:url('font/lato/lato-lig-webfont.eot?#iefix') format('embedded-opentype'),url('font/lato/lato-lig-webfont.woff') format('woff'),url('font/lato/lato-lig-webfont.ttf') format('truetype'),url('font/lato/lato-lig-webfont.svg#latolight') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'latoregular';
	src:url('font/lato/lato-reg-webfont.eot');
	src:url('font/lato/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),url('font/lato/lato-reg-webfont.woff') format('woff'),url('font/lato/lato-reg-webfont.ttf') format('truetype'),url('font/lato/lato-reg-webfont.svg#latoregular') format('svg');
	font-weight:normal;
	font-style: normal;
}
/* Icons */
@font-face {
	font-family:'icomoon';
	src:url('font/icomoon.eot?-k1wi28');
	src:url('font/icomoon.eot?#iefix-k1wi28') format('embedded-opentype'),	url('font/icomoon.woff?-k1wi28') format('woff'),	url('font/icomoon.ttf?-k1wi28') format('truetype'),	url('font/icomoon.svg?-k1wi28#icomoon') format('svg');
	font-weight:normal;
	font-style: normal;
}
[class^="icon-"],[class*=" icon-"] {
	font-family:'icomoon';
	speak:none;
	font-style:normal;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.smHead {
	color:#fff;
	font-size:22px;
	display:inline-block;
	height:60px;
	line-height:60px;
	vertical-align:top;
	float:right;
	margin-right:2%;
}
.icon-mobile:before {
	content: "\e604";
}
.icon-star:before {
	content: "\e62b";
}
.icon-featured-star:before {
	font-family:'icomoon';
	content: "\e62b";
	color:#f6ff00;
	text-shadow:0 0 3px rgba(0,0,0,0.75);
	-webkit-text-shadow:0 0 3px rgba(0,0,0,0.75);
	font-size:20px;
	margin-right:18px;
}
.icon-arrow-up-left:before {
	content: "\e60f";
}
.icon-arrow-up:before {
	content: "\e610";
}
.icon-arrow-up-right:before {
	content: "\e611";
}
.icon-arrow-right:before {
	content: "\e612";
}
.icon-arrow-down-right:before {
	content: "\e613";
}
.icon-arrow-down:before {
	content: "\e614";
}
.icon-arrow-down-left:before {
	content: "\e615";
}
.icon-arrow-left:before {
	content: "\e616";
}
.icon-googleplus:before {
	content: "\e600";
}
.icon-googleplus2:before {
	content: "\e617";
}
.icon-googleplus3:before {
	content: "\e618";
}
.icon-googleplus4:before {
	content: "\e619";
}
.icon-facebook:before {
	content: "\e601";
}
.icon-facebook2:before {
	content: "\e61a";
}
.icon-facebook3:before {
	content: "\e61b";
}
.icon-instagram:before {
	content: "\e607";
}
.icon-twitter:before {
	content: "\e602";
}
.icon-twitter2:before {
	content: "\e61c";
}
.icon-twitter3:before {
	content: "\e61d";
}
.icon-youtube:before {
	content: "\e61e";
}
.icon-youtube2:before {
	content: "\e61f";
}
.icon-wordpress:before {
	content: "\e620";
}
.icon-linkedin:before {
	content: "\e603";
}
.icon-pinterest:before {
	content: "\e621";
}
.icon-pinterest2:before {
	content: "\e622";
}
.icon-html5:before {
	content: "\e608";
}
.icon-css3:before {
	content: "\e609";
}
.icon-chrome:before {
	content: "\e60a";
}
.icon-firefox:before {
	content: "\e60b";
}
.icon-IE:before {
	content: "\e60c";
}
.icon-opera:before {
	content: "\e60d";
}
.icon-safari:before {
	content: "\e60e";
}
.icon-phone:before {
	content: "\e623";
}
.icon-mail:before {
	content: "\e605";
}
.icon-location:before {
	content: "\e606";
}
.icon-arrow-right2:before {
	content: "\e62a";
}
.icon-twitter4:before {
	content: "\e624";
}
.icon-facebook4:before {
	content: "\e625";
}
.icon-googleplus5:before {
	content: "\e626";
}
.icon-pinterest3:before {
	content: "\e627";
}
.icon-tumblr:before {
	content: "\e628";
}
.icon-linkedin2:before {
	content: "\e629";
}

/*global styles*/
html body {
	margin:0;
	padding:0;
	height: 100%;
	overflow-x:hidden;
	background-color:#fff;
}
/*Video Player */
.videoPlayer {
	background-color:#2b2b2b;
	z-index:0;
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
}
.videoDisplayGrid {
	font-size:0;
}
.videoDisplay {
	margin-top:50px;
	margin:0;
	text-align:left;
	width:50%;
	height:261px;
	background-color:#000;
	font-size:18px;
	position:relative;
	display:inline-block;
	overflow:hidden;
	background-position:center center;
	background-size:100% 100%;
	z-index:0;
}
.videoDisplayDark {
	z-index:0;
	opacity:0;
	-webkit-transition:all 0.1s linear;
	-moz-transition:all 0.1s linear;
	-o-transition:all 0.1s linear;
	transition:all 0.1s linear;
}
.videoDisplay:hover {
	-webkit-filter:grayscale(1);
}
.videoDisplay:hover>.videoDisplayDark {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(42,42,42,0.8);
	opacity:0.8;
}
.videoDisplay a {
	-webkit-transform:translatez(0);
	-moz-transform:translatez(0);
	-ms-transform:translatez(0);
	-o-transform:translatez(0);
	transform:translatez(0);
	z-index:2;
	text-decoration:none;
	color:#fff;
}
.channelNavigation:before {
	content:'Jump to:';
	padding-right:10px;
}
.channelNavigation {
	padding:0;
	font-family:'latolight';
	font-size:16px;
}
.channelNavigation li {
	display:inline-block;
	padding-right:10px;
}
.playButton:before {
	content:'►';
	font-family:arial;
	font-size:12px;
	margin-right:10px;
}
.videoDisplay:hover h3 {
	margin-top:50px;
}
.videoDisplay:hover p {
	z-index:2;
	top:70px;
}
.videoDisplay h3 {
	z-index:2;
	color:#fff;
	-webkit-transform:translatez(0);
	-moz-transform:translatez(0);
	-ms-transform:translatez(0);
	-o-transform:translatez(0);
	transform:translatez(0);
	margin-left:20px;
	margin-top:210px;
	font-family:'latoregular';
	font-size:25px;
	-webkit-transition:all 0.1s linear;
	-moz-transition:all 0.1s linear;
	-o-transition:all 0.1s linear;
	transition:all 0.1s linear;
}
.videoDisplay p {
	-webkit-transform:translatez(0);
	-moz-transform:translatez(0);
	-ms-transform:translatez(0);
	-o-transform:translatez(0);
	transform:translatez(0);
	color:#fff !important;
	font-size:18px !important;
	line-height:1em !important;
	font-family:'latoregular';
	width:90%;
	height:100%;
	margin-left: 20px !important;
}

.clear {
	content:" ";
	clear:both;
}

.portfolioItem {
	margin-top:50px;
	
	
	padding:20px;
	border:1px solid #000;
	-webkit-transition:0.3s all linear;
	-o-transition:0.3s all linear;
	-mozt-transition:0.3s all linear;
	-ms-transition:0.3s all linear;
	transition:0.3s all linear;
}

.portfolioItem:hover {
	border:1px solid #b30;
	box-shadow:0px 3px 20px rgba(0,0,0,0.7);
}

.portfolioItem ul {
	padding:0;
}

.portfolioItem li:first-child {
	margin-left:0;
}

.portfolioItem li {
	margin-left:10px;
	display:inline-block;
	color:#c5c5c5;
	font-family:'latoregular';
	list-style:disc;
	font-size:16px;
}

.portfolioItem:hover > .portfolioThumb {
	background-size:auto 140%;
	-webkit-transition:3s all linear;
	-o-transition:3s all linear;
	-mozt-transition:3s all linear;
	-ms-transition:3s all linear;
	transition:3s all linear;
}

.portfolioThumb {
	width:30%;
	height:250px;
	padding:20px;
	overflow:hidden;
	float:left;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-webkit-transition:0.3s all linear;
	-o-transition:0.3s all linear;
	-mozt-transition:0.3s all linear;
	-ms-transition:0.3s all linear;
	transition:0.3s all linear;
	
}

.portfolioDescrip {
	float:left;
	width:60%;
	margin-left:2%;
}

.portfolioItem h2 {
	font-size:18px;
	font-family:'latolight';
	color:#000;
}

.portfolioP {
	font-size:14px;
	font-family:'latolight';
	color:#000;
	line-height:1.5em;

}

.websitedisplay {
	width:300px;
	height:250px;
	background-color:#fff;
	border-radius:3px;
	box-shadow:0 2px 15px rgba(0,0,0,0.1);
	overflow:hidden;
	white-space:nowrap;
	position:relative;
	display:inline-block;
	margin-right:15px;
	margin-top:15px;
}


.websitedisplay:hover > .information {
	margin-left:-159px;
	opacity:0;
}

.featureddisplay {
	width:100%;
	height:350px;
	background-color:#fff;
	border-radius:3px;
	box-shadow:0 2px 15px rgba(0,0,0,0.1);
	overflow:hidden;
	white-space:nowrap;
	position:relative;
	display:inline-block;
	margin-right:15px;
	margin-top:15px;
}

.featuredinformation {
	margin:auto;
	text-align:center;
}

.featuredinformation h5 {
	position:absolute;
	top:10px;
	left:0;
	right:0;
	margin:auto;
	text-align:center;
	font-family:'latobold',arial;
	font-size:18px;
}

.featuredimage {
	margin-left:10px;
	top:170px;
	width:33%;
	display:inline-block;
	opacity:0.8;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}



.featuredimage:hover {
	top:40px;
	opacity:1;
}

.featuredDock {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	font-size:0;
	padding:0;
	margin:0;
}

.featuredButton {
	padding:0;
	margin:0;
	width:25%;
	height:45px;
	display:inline-block;
	color:#656565;
	font-size:16px;
	text-align:center;
	line-height:45px;
	vertical-align:middle;
	font-family:'latolight',arial;
	box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
	webkit-box-text-shadow:inset 0 0 6px rgba(0,0,0,0.3);
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(219,219,219,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(219,219,219,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 ); /* IE6-9 */
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}

.featuredButton:hover {
	box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
	webkit-box-text-shadow:inset 0 0 6px rgba(0,0,0,0.11);
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */

}

.information {
	display:inline-block;
	width:150px;
	height:250px;
	-webkit-transition:all 0.3s linear;
	position:relative;
}

.laptop {
	display:inline-block;
	width:300px;
	height:250px;
	position:relative;
}

.information h5 {
	font-family:'lato','segoe ui regular',arial;
	font-weight:bolder;
	font-size:18px;
	position:absolute;
	font-weight:bolder;
	top:90px;
	left:20px;
}

.information h6 {
	font-family:'lato','segoe ui light',arial;
	font-size:16px;
	position:absolute;
	font-weight:100;
	top:110px;
	left:20px;
}

.laptop img {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:240px;
	height:auto;
	-webkit-transition:all 0.3s linear;
}


.view {
	opacity:0;
	-webkit-transition:all 0.3s linear;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	-webkit-transform:rotateY(540deg);
	width:42px;
	height:42px;
	font-size:36px;
	text-align:center;
	text-decoration:none;
	overflow:hidden;
	background-color:#1b1b1b;
	border-radius:100%;
	font-weight:bolder;
	line-height:42px;
	vertical-align:middle;
}

.websitedisplay:hover > .view {
	-webkit-transform:rotateY(0deg);
	position:absolute;
	opacity:1;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	border-radius:100%;
	color:#f5f5f5;
	text-align:center;
	text-decoration:none;
}

.view:hover {
	background-color:#06f;
}

.codepenNav {

	background-image:url('images/codepenIcon.png') !important;
	background-position:5px center;
	
}



@media (min-aspect-ratio:16/10) {
	#overflowContainer {
		position:relative;
		padding-bottom:56.25%;
		padding-top:56.25%;
		/* 16:9 */
		padding-top:0px;
		height:0;
	}
	#overflowContainer:after {
	}
	#videoBackground {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
	}
}
@media (max-aspect-ratio:16/10) {
	#overflowContainer {
		position:relative;
		padding-bottom:75%;
		padding-top:75%;
		/* 4:3 */
		padding-top:0px;
		height:0;
	}
	#overflowContainer:after {
	}
	#videoBackground {
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:auto;
		width:100%;
		height: 100%;
	}
}

@media (max-aspect-ratio:1/1) {
	#overflowContainer {
		position:relative;
		padding-bottom:45%;
		/* 4:3 */
		padding-top:0px;
		height:0;
	}
	#overflowContainer:after {
	}
	#videoBackground {
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:auto;
		width:100%;
		height: 100%;
	}
}
/*End Video Player*/
#menu {
	width:100%;
	height:60px;
	position:fixed;
	background-color:rgba(56,56,56,0.2);
	top:0;
	left:0;
	right:0;
	/*-webkit-transform:translate3d(0,0,0);*/
	z-index:1000;
	border-bottom:2px solid rgba(56,56,56,0.8);
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
	-webkit-transform:translatez(0);
	-moz-transform:translatez(0);
	-ms-transform:translatez(0);
	-o-transform:translatez(0);
	transform:translatez(0);
}
#menu:hover {
	background-color:rgba(56,56,56,0.7);
}
.centerScreen {
	margin-left:auto;
	margin-right: auto;
}
#navicon {
	margin-left:20px;
	-webkit-transition:all 0.3s ease-in-out;
	/* Chrome 1-25,Safari 3.2+*/
	-moz-transition:all 0.3s ease-in-out;
	
	-ms-transition:all 0.3s ease-in-out;
	/* Firefox 4-15 */
	-o-transition:all 0.3s ease-in-out;
	/* Opera 10.50–12.00 */
	transition:all 0.3s ease-in-out;
	/* Chrome 26,Firefox 16+,IE 10+,Opera 12.10+*/		display:inline-block;
	cursor:pointer;
}
.navicon {
	margin-top:7px;
	border-radius:100%;
	cursor:pointer;
	width:45px;
	height:45px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:75% 50%;
	border:1px solid #ff8c10;
}
.navicon:hover {
	border:1px solid #d4740d;
}
.logo {
	width:100%;
	height:60px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	pointer-events:none;
	display:inline-block;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:44px 50px;
}
.headerUtility {
	width:400px;
	margin-left:50px;
	height:60px;
	display:inline-block;
	vertical-align:top;
	float:right;
	margin-right: 2%;
}
#navigationMenu {
	z-index:1001;
	position:fixed;
	left:-200px;
	top:0;
	bottom:0;
	width:200px;
	background-color:#555;
	
	
	
	-webkit-transition:all 0.1s ease-in-out;
	/* Chrome 1-25,Safari 3.2+*/
	-moz-transition:all 0.3s ease-in-out;
	
	-ms-transition:all 0.3s ease-in-out;
	/* Firefox 4-15 */
	-o-transition:all 0.3s ease-in-out;
	/* Opera 10.50–12.00 */
	transition:all 0.3s ease-in-out;
	/* Chrome 26,Firefox 16+,IE 10+,Opera 12.10+*/
	-webkit-transform:translatez(0);
	-moz-transform:translatez(0);
	-ms-transform:translatez(0);
	-o-transform:translatez(0);
	transform:translatez(0);
}
#navigationMenu ul {
	margin:0;
	padding:0;
	text-align:left;
	width:100%;
	margin-top:18px;
}
#navigationMenu a {
	text-decoration:none;
}
#navigationMenu li {
	border-bottom:1px solid #3f3f3f;
	list-style-type:none;
	color:#afafaf;
	font-family:arial;
	font-size:14px;
	line-height:22px;
	vertical-align:middle;
	width:175px;
	height:22px;
	padding:10px;
	padding-left:20px;
	padding-right:5px;
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-ms-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;
}

.activePage {
	background-color:#0099cb;
	color:#fff !important;
}

#navigationMenu ul:first-child {
	border-top:1px solid #3f3f3f;
}

#navigationMenu li:hover {
	background-color:#424242;
	color:#fff;
	padding-left:30px;
	width:165px;
}
.burger-box {
	position:relative;
	width:60px;
	height:60px;
	margin:0 auto;
	display:block;
	-webkit-transform:scale3d(1,1,1);
	-moz-transform:scale3d(1,1,1);
	-ms-transform:scale3d(1,1,1);
	-o-transform:scale3d(1,1,1);
	transform:scale3d(1,1,1);
}
.burger,.burger:before,.burger:after {
	position:absolute;
	top:28px;
	left:18px;
	width:24px;
	height:4px;
	background:#fff;
	-webkit-transition:background 0.3s,-webkit-transform 0.3s,top 0.3s;
	-moz-transition:background 0.3s,-moz-transform 0.3s,top 0.3s;
	-ms-transition:background 0.3s,-ms-transform 0.3s,top 0.3s;
	-o-transition:background 0.3s,-o-transform 0.3s,top 0.3s;
	
	transition:background 0.3s,transform 0.3s,top 0.3s;
}
.burger:before {
	top:-8px;
	left:0;
	content:"";
}
.burger:after {
	top:8px;
	left:0;
	content:"";
}
.open .burger {
	background:transparent;
}
.open .burger:before {
	top:0;
	-webkit-transform:rotate3d(0,0,1,-45deg);
	-moz-transform:rotate3d(0,0,1,-45deg);
	-ms-transform:rotate3d(0,0,1,-45deg);
	-o-transform:rotate3d(0,0,1,-45deg);
	transform:rotate3d(0,0,1,-45deg);
}
.open .burger:after {
	top:0;
	-webkit-transform:rotate3d(0,0,1,45deg);
	-moz-transform:rotate3d(0,0,1,45deg);
	-ms-transform:rotate3d(0,0,1,45deg);
	-o-transform:rotate3d(0,0,1,45deg);
	transform:rotate3d(0,0,1,45deg);
}
.whiteThinH1 {
	line-height:100px;
	vertical-align:middle;
	color:#fff;
	margin:0;
	text-align:center;
	font-family:'latohairline';
	font-size: 25px;
}
/*internet explorer scrollbar styles*/
body {
	scrollbar-base-color:#c33;
	scrollbar-base-color:#c33;
	scrollbar-highlight-color:#b30000;
	scrollbar-track-color:#f5f5f5;
	background-color:#2b2b2b;
}
::-moz-selection {
	background-color:#0099cb;
	color:#f5f5f5;
}
/* Works in Safari */::selection {
	background-color:#0099cb;
	color:#f5f5f5;
}
::-webkit-scrollbar-track {
	background-color:rgba(0,0,0,0);
	opacity:0.8;
}
::-webkit-scrollbar {
	width:3px;
	background-color:rgba(0,0,0,0);
	opacity:0.8;
}
::-webkit-scrollbar-thumb {
	background-color: #0099cb;
}

.primaryPicture {
	background-color:#2b2b2b;
	z-index:0;
	width:100%;
	height:1080px;
	overflow:hidden;
	background-image:url('images/primaryPicture.png');
	background-position:center center;
	background-attachment:fixed;
	position:relative;

}

.academicPrimaryPicture {
	z-index:0;
	width:100%;
	height:1080px;
	overflow:hidden;
	background-image:url('images/academicPicture.png');
	background-position:center center;
	background-attachment:fixed;
	position:relative;	
}

#textSlider {
	text-align:center;
	position:fixed;
	left:0;
	right:0;
	top:60px;
	bottom:0;
	opacity:1;
	z-index:0;
	-webkit-transition:all 0.05s linear;
	-moz-transition:all 0.05s linear;
	-ms-transition:all 0.05s linear;
	-o-transition:all 0.05s linear;
	transition:all 0.05s linear;
}
#textSlider h1 {
	line-height:45px;
	color:#fff;
	font-size:40px;
	font-family:'latoregular';
}
#textSlider h1:first-child {
	margin-top:200px;
}
.ghostButton {
	border:3px solid #fff;
	background-color:rgba(255,255,255,0);
	color:#fff;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	font-family:'latoregular';
	cursor:pointer;
	margin:auto;
	width:300px;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
.ghostButton:hover {
	background-color:rgba(255,255,255,1);
	color:#000;
}

.ghostButtonCircle {

	text-align:center;
	background-color:#d34836;
	color:#fff;
	border-radius:100%;
	width:48px;
	height:48px;
	font-family:'latolight';
	font-size:20px;
	cursor:pointer;
	margin:auto;
	line-height:48px;
	right: 0;
	left: 0;
	margin: auto;
	vertical-align:middle;
	position:fixed;
	bottom:48px;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;	
}

.ghostButtonCircle:hover {
	background-color:#f5f5f5;
	color:#000;
}


.bodyContent {
	position:relative;
	z-index:10;
	background-color:#fff;
	width:100%;		padding-top:50px;
	padding-bottom:50px;
	margin-bottom:400px;
	box-shadow:0px 5px 10px rgba(0,0,0,0.6);
}
.margin {
	width:960px;
	margin:auto;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;	
}
.bodyContent p {
	font-family:'latoregular';
	font-size:20px;
	color:#000;
	line-height:2em;
}
.bodyContent h1 {
	font-family:'latohairline';
	font-size:50px;
	color:#000;
}
.bodyContent h4 {
	font-family:'latolight';
	font-size:20px;
	color:#000;
}

.panel .pad {
	padding:0 15px;
}
.panel.flip .action {
	display:none;
}
.panel {
	text-align:left;
	margin-bottom:50px;
	width:200px;
	height:300px;
	position:relative;
	display:inline-block;
	-webkit-perspective:600px;
	-moz-perspective:600px;
	-ms-perspective:600px;
	-o-perspective:600px;
	perspective:600px;
	margin-left:15px;
	margin-right:15px;
}
.panel .front {
	z-index:900;
	width:inherit;
	height:inherit;
	background:#fff;
	-moz-box-shadow: 0 1px 15px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 1px 15px rgba(0,0,0,0.1);
	box-shadow: 0 1px 15px rgba(0,0,0,0.1);
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	-webkit-transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	-moz-transform:rotateX(0deg) rotateY(0deg);
	-moz-transform-style:preserve-3d;
	-moz-backface-visibility:hidden;

	-o-transform:rotateX(0deg) rotateY(0deg);
	-o-transform-style:preserve-3d;
	-o-backface-visibility:hidden;

	-ms-transform:rotateX(0deg) rotateY(0deg);
	-ms-transform-style:preserve-3d;
	-ms-backface-visibility:hidden;

	transform:rotateX(0deg) rotateY(0deg);
	transform-style:preserve-3d;
	backface-visibility:hidden;

	-o-transition:all .4s ease-in-out;
	-ms-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
}
.panel.flip .front {
	z-index:900;
	background:#fff;

	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-o-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
	transform:rotateY(180deg);

	-moz-box-shadow:0 15px 50px rgba(0,0,0,0.2);
	-webkit-box-shadow:0 15px 50px rgba(0,0,0,0.2);
	box-shadow:0 15px 50px rgba(0,0,0,0.2);
}
.panel .back {
	position:absolute;
	top:0;
	left:0;
	z-index:800;
	width:inherit;
	height:inherit;
	background:#fff;
	border:1px solid #000;

	-webkit-transform:rotateY(-180deg);
	-webkit-transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;

	-moz-transform:rotateY(-180deg);
	-moz-transform-style:preserve-3d;
	-moz-backface-visibility:hidden;

	-o-transform:rotateY(-180deg);
	-o-transform-style:preserve-3d;
	-o-backface-visibility:hidden;

	-ms-transform:rotateY(-180deg);
	-ms-transform-style:preserve-3d;
	-ms-backface-visibility:hidden;

	transform:rotateY(-180deg);
	transform-style:preserve-3d;
	backface-visibility:hidden;


	-o-transition:all .4s ease-in-out;
	-ms-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
}
.panel.flip .back {
	z-index:1000;
	background:#fff;
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	-moz-transform:rotateX(0deg) rotateY(0deg);
	-o-transform:rotateX(0deg) rotateY(0deg);
	-ms-transform:rotateX(0deg) rotateY(0deg);
	transform:rotateX(0deg) rotateY(0deg);

	box-shadow:0 15px 50px rgba(0,0,0,0.2);
	-moz-box-shadow:0 15px 50px rgba(0,0,0,0.2);
	-webkit-box-shadow:0 15px 50px rgba(0,0,0,0.2);
}
.frontTitle {
	padding-top:5px;
	text-align:center;
	font-family:'latoregular',arial;
	font-size:18px;
	color:#000;
	height:45px;
}
.frontLogo {
	width:100%;
	height:200px;
	background-repeat:no-repeat;
	background-position:center center;
}
.isas {
	background-image:url('http://i.imgur.com/tVaGRNU.png');
	background-size:150px 150px;
}
.socialeyes {
	background-image:url('http://getsocialeyes.com/websites/sedev/images/logo.png');
	background-size:100px 100px;
}
.dissolve {
	background-image:url('http://portfolio.dizin.x10.bz/images/dissolve.png');
	background-size:125px 125px;
}
.leadamerica {
	background-image:url('http://www.iienationalcapital.com/wp-content/uploads/2011/01/lead_america_logo.png');
	background-size:151px 88px;
}
.codecamp {
	background-image:url('http://elegantcode.com/wp-content/uploads/2012/03/image.png');
	background-size:182px 99px;
}
.hardwareprototyping {
	background-image:url('images/hardwareprototyping.png');
	background-size:74px 80px;
}
.atob {
	background-image:url('http://a-to-b.dizin.x10.bz/images/logo.png');
	background-size:72px 70px;
}
.turbosquid {
	background-image:url('images/turbosquid.png');
	background-size:80px 88px;
}
.frontLocation {
	padding-top:10px;
	text-align:center;
	color:#aaa;
	font-family:'latoregular',arial;
	font-size:18px;
}
.backTitle {
	padding:10px;
	color:#000;
	font-family:'latolight',arial;
	font-size:18px;
}
.backParagraph {
	padding:10px;
	padding-top:0;
	color:#000;
	font-family:'latoregular',arial;
	font-size:14px;
}
.backGoto {
	padding:10px;
	padding-top:0;
	color:#06f;
	font-family:'latoregular',arial;
	font-size:14px;
}
.backGoto a {
	text-decoration:none;
	color:#06f;
	-webkit-transition:0.1s all linear;
	-moz-transition:0.1s all linear;
	-o-transition:0.1s all linear;
	transition:0.1s all linear;
}
.backGoto a:hover {
	text-decoration:underline;
	padding-left:15px;
}
.portfolioCallToAction {
	margin-top:50px;
	text-align:center;
}
.portfolioCallToAction h1 {
	font-size:38px;
	font-family:'latolight';
	color:#555;
	margin:0;
	text-align:center;
	margin-bottom:50px;
	margin-top: 50px;
}

footer {
	height:400px;
	position:fixed;
	bottom:0;
	width:100%;
	background-image:url('images/footerbg.png');
	background-position:center center;
	background-size:cover;
	z-index:-10;
}

.madeinboise {
	width:257px;
	height:252px;
	background-image:url('images/madeinboise.png');
	margin:auto;
	margin-top:80px;
}




/* #tablet */
@media (min-width:960px) and (max-width:1279px) {

	.margin {
		width:960px;
	}

}

@media (min-width:720px) and (max-width:959px) {

	.margin {
		width:720px;
	}

}

/* #mobile #mobilesideways #480 */
@media (min-width:480px) and (max-width:719px) {

	.margin {
		width:480px;
	}

}

/* #320 #mobilevertical */
@media (max-width:479px) {

	.margin {
		width:320px;
	}

}