/*
* Moon Lasso
* designed and developed by Smith
* www.smithmade.org  @madebysmith
*/


/* #Site Styles
================================================== */



* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.video-background {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.video-background video {
	/*min-height: 100%;  */
	width:100%;  
}

.header {
	position: relative;
	width: 31.5%;
	left: 0;
	right: 0;
	top: 0;
	bottom:0;
	text-align: center;
	margin: auto;
	opacity: .95;
	z-index: 999;
}

.content {
	position: relative;
	margin-top: 50%;
}

header {
	height: 100px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding: 1rem 6.25rem 1rem 6.25rem;
	z-index: 99999;

}

.logo {
	width: 71px;
	float: left;
}

nav {
	float: right;
	text-align: right;
	margin-top: .7em;
}

nav a {
	margin-right: 2rem;
}

nav a, nav a:visited {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'LHF Union Thug';
	font-weight: bold;
	font-size: 15px;
	line-height: 15px;
	letter-spacing: 2px;
}

nav a:hover, nav a:active {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'LHF Union Thug';
	font-weight: bold;
	font-size: 15px;
	line-height: 15px;
	letter-spacing: 2px;
	border-bottom: 1px solid #fff;
}	

section {
	margin-bottom: 0;
	padding: 1rem 1rem 2rem 1rem;
	text-align: center;
}

p {
	font-family: 'Bell Gothic Light';
	font-size: 16px;
	line-height: 25px;
	font-weight: normal;	
}

#about {
	background: #2b2c2e;
	width: 100%;
}

#about h1 {
	width: 40%;
	float: left;
	color: #26ace2;
	text-align: right;
	font-size: 30px;
	line-height: 35px;
	margin-top: 0;
}

#about p {
	width: 55%;
	text-align: left;
	float: right;
	padding: 0;
	color: #fff;
}

.content-container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding-top: 3rem;
	padding-bottom: 8.6rem;
}

.content-container span {
	float: right;
}

h1 {
	font-family: 'Bell Gothic Black';
	font-size: 25px;
	text-align: center;
	width: 100%;
	text-transform: uppercase;
	margin-top: 1rem;
	margin-bottom: 0.3rem;
	color: #000;
	font-weight: normal;
}

h2 {
	font-family: 'Bell Gothic Black';
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	width: 100%;
	text-transform: uppercase;
	margin-top: 1rem;
	margin-bottom: 0;
}

.eye {
	width: 80px;
	display: block;
	clear: left;
	margin: 0 auto;
}

#work {
	background: #fff;
}

#work p {
	color: #000;
}

#work h1 {
	color: #26ace2;
}

.slider {
	width: 67%;
}

#contact {
	background: #2b2c2e;
	opacity: 1;
	padding-bottom: 4rem;
}

#contact h1 {
	color: #26ace2;
	margin-bottom: 1.3rem;
}

.icons {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.icons div:not(.social-break) {
	width: 15%;
	display: inline-block;
}

.icons div img {
	height: 40px;
	display: block;
	clear: both;
	margin: 0 auto;
	margin-bottom: 1rem;
}

.icons a, .icons a:visited {
	font-size: 11px;
	text-transform: uppercase;
	font-family: 'Bell Gothic Black';
	text-decoration: none;	
	font-weight: normal;
	padding-bottom: .1rem;
	color: #fff;
}

.icons a:hover, .icons a:active {
	border-bottom: 1px solid #fff;
}

.footer {
	background: #000;
	padding-bottom: 1rem !important;
}

.footer img {
	width: 120px;
}

/* pause/mute styleing */

.controls {
	display: none;
}

div.ui-widget-content {
	border: none;
	background: none;
	color: #ffffff;
}

div.ui-video-background {
	position: relative;
	top: 0;
	left: 0;
}

ul.ui-video-background-controls {
	padding: 0;
	float: right;
}

ul.ui-video-background-controls li {
	padding: 0;
}

#work {
	color: #fff;
}

#work h2 {
	color: #26ace2;
	text-align: left;
	padding-top: 0.9rem;
}

#work .owl-carousel p, #work .owl-carousel h2 {
	width: 84%;
	text-align: left;
	margin: 0 auto;
}

#work .owl-carousel p {
	margin-top: .5rem;
	font-size: 12px;
	line-height: 15px;
}

.owl-carousel {
	max-width: 900px;
	margin: 0 auto;
	margin-top: 2.2rem;
}

.owl-buttons {
	display: none;
}

/* owl slider 3 at a time fix */

.owl-buttons, .owl-pagination {
	position: absolute;
	top: 22%;
	width: 100%;
	z-index: 1;
}

.owl-prev {
	left: 0;
	float: left;
	margin-left: -2em;
}

.owl-next {
	right: 0;
	float: right;
	margin-right: -2em;
}

.owl-theme .owl-controls .owl-page span {
	display: block;
	margin: 4px -13px;
	filter: Alpha(Opacity=50);
	opacity: 0.5;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important; 
	background: transparent;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-right: 9px solid #231f21;
}

.owl-theme .owl-controls .owl-page {
	float: left;
	position: relative;
	left: -23px;
}

/*.owl-theme .owl-controls .owl-page + .owl-page {
	float: right;
	margin-right: -22px;
	position: relative;
	left: 870px;
}
*/
.owl-theme .owl-controls .owl-page + .owl-page {
float: right;
margin-right: -22px;
position: absolute;
left: 920px;
}


.owl-theme .owl-controls .owl-page + .owl-page span {
	display: block;
	margin: 4px 9px;
	filter: Alpha(Opacity=100);
	opacity: 1.0;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important; 
	background: transparent;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 9px solid #231f21;
	border-right: none;
}

.owl-theme .owl-controls .owl-page span {
	background: transparent !important;
}

.owl-prev img, .owl-next img {
	width: 9px;
}

div.fancybox-overlay {
	background: rgba(0, 0, 0, .89);
}

.owl-wrapper img {
	width: 253px;
}

.owl-wrapper-outer{
	max-width: 900px;
	max-height: 235px;
}

.social-break {
	display: none;
}

.tablet-video {
	position: absolute;
	top: 10rem;
	left: 0;
	z-index: -1;
	background: #000;
}

.tablet-video img {
	width: 100%;
}

.hidden-desktop {
	display: none !important;
}

.hidden-mobile {
	display: block !important;
}

@-moz-document url-prefix() { 
	nav a, nav a:visited {
		font-weight: normal;
	}

	nav a:hover, nav a:active {
		font-weight: normal;
	}
}



/* #Media Queries
================================================== */

	@media only screen and (max-width: 1024px) {

		.icons a, .icons a:visited {
			font-size: 10px;
		}

		.icons a:hover, .icons a:active {
			font-size: 14px;
		}

		.tablet-video {
			top: 0;
		}
	}

	@media only screen and (max-width: 960px) {

		.icons a, .icons a:visited {
			font-size: 9px;
		}

		.icons a:hover, .icons a:active {
			font-size: 13px;
		}
	}

	@media only screen and (max-width: 890px) {

		.icons a, .icons a:visited {
			font-size: 8px;
		}

		.icons a:hover, .icons a:active {
			font-size: 12px;
		}
	}

	@media only screen and (max-width: 800px) {

		.icons a, .icons a:visited {
			font-size: 7px;
		}

		.icons a:hover, .icons a:active {
			font-size: 11px;
		}
	}


	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) and (orientation: portrait) {
		.owl-carousel {
			max-width: 600px;
		}


		.video-background {
			position: absolute;
			top: 6.3rem;
			height: 600px !important;
			min-width: 600px;
			display: none !important;
		}

		header {
			background: none;
			padding: 1rem 2.25rem 1rem 4.25rem;
		}
		
		.content {
			margin-top: 56%;
		}

		.tablet-video {
			top: 0;
		}

		.owl-pagination {
			display: none;
		}

		.owl-buttons {
			display: block;
			width: auto;
		}

		.owl-next {
			position: relative;
			left: 591px;
		}

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {



		#about p {
			width: 100%;
			-webkit-column-count: 1;
			-moz-column-count: 1;
			column-count: 1;
		}

		#about p:first-of-type {
			margin-bottom: 0;
		}

		.icons div {
			width: 31%;
			margin-top: 6%;
		}

		.icons div:not(.social-break) {
			width: 32%;
			display: inline-block;
		}

		.social-break {
			margin-bottom: -2rem;
		}

		.icons a, .icons a:visited {
			font-size: 10px;
		}

		.icons a:hover, .icons a:active {
			font-size: 14px;
		}

		.social-break {
			display: block;
		}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.video-background {
			position: relative;
			top: 4rem;
			height: auto !important;
		}

		header {
			background: rgba(0, 0, 0, 1.0);
		}

		.content {
			margin-top: 10%;
		}

				.icons a, .icons a:visited {
			font-size: 8px;
		}

		.icons a:hover, .icons a:active {
			font-size: 10px;
		}

		header {
			padding: 1rem 0 1rem ;
			background: #2b2c2e;
			height: 160px;
		}

		.logo {
			width: 60px;
			margin-left: 1.6rem;
		}

		nav a:hover, nav a:active {
			display: block;
			border: none;
			font-size: 29px;
			line-height: 50px;
			margin-right: 0rem;
		}

		nav a, nav a:visited {
			display: block;
			border: none;
			font-size: 29px;
			line-height: 50px;
			margin-right: 0rem;
		}

		.video-background {
			position: relative;
			top: 6.25rem;
			height: auto !important;
		}

		.content {
			margin-top: 84.4%;
		}

		.content-container {
			width: 90%;
		}

		html, body {
		    max-width: 100% !important;
		    overflow-x: hidden !important;
		}

		#about h1 {
			width: 100%;
			text-align: left;
		}

		.content-container {
			padding-bottom: 13rem;
		}

		.icons div:not(.social-break) {
			width: 19%;
			display: inline-block;
		}

		.social-break {
			display: none;
		}


		.phone {
			margin-left: 0;
		}

		div.email img {
			margin-right: 1.8rem;
		}

		.vimeo {
			position: relative;
			left: 1rem;
		}

		.twitter {
			position: relative;
			left: 0.75rem;
		}

		.hidden-desktop {
			display: block !important;
		}

		.hidden-mobile {
			display: none !important;
		}

		.hamburger {
			width: 40px;
			float: right;
			position: absolute;
			right: 1.6rem;
			top: 7.3rem;
		}

		.hamburger:hover {
			cursor: pointer;
		}

		nav {
			background: rgba(43, 44, 46, 0.8);
			width: 100%;
			text-align: center;
			height: 0;
			overflow-y: hidden; 
			transition: all .3s;
			opacity: 0;
		}

		.show-nav {
			height: 152%;
			opacity: 1.0;
			padding-top: 2rem;
			overflow-y: visible; 
			transition: all .3s;
		}

		.tablet-video {
			top: 10rem;
		}

		.owl-pagination {
			display: none;
		}

		.owl-buttons {
			display: block;
			width: auto;
		}

		.owl-next {
			position: relative;
			left: 526px;
		}


	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

		.icons a, .icons a:visited {
			font-size: 8px;
		}

		.icons a:hover, .icons a:active {
			font-size: 10px;
		}

		header {
			padding: 1rem 0 1rem ;
			background: #2b2c2e;
			height: 160px;
			height: 116px;
		}

		.logo {
			width: 60px;
			width: 40px;
			margin-left: 1.6rem;
		}

		nav a:hover, nav a:active {
			display: block;
			border: none;
			font-size: 29px;
			line-height: 50px;
			margin-right: 0rem;
		}

		nav a, nav a:visited {
			display: block;
			border: none;
			font-size: 29px;
			line-height: 50px;
			margin-right: 0rem;
		}

		.video-background {
			position: relative;
			top: 6.25rem;
			height: auto !important;
		}

		.content {
			margin-top: 106.4%;
			margin-top: 92.3%;
		}

		.content-container {
			width: 90%;
		}

		html, body {
		    max-width: 100% !important;
		    overflow-x: hidden !important;
		}

		#about h1 {
			width: 100%;
			text-align: left;
		}

		.content-container {
			padding-bottom: 21.6rem;
		}

		.phone {
			margin-left: -1.3rem;
		}

		div.email img {
			margin-right: 1.2rem;
		}

		.hidden-desktop {
			display: block !important;
		}

		.hidden-mobile {
			display: none !important;
		}

		.hamburger {
			width: 40px;
			width: 30px;
			float: right;
			position: absolute;
			right: 1.6rem;
			top: 7.3rem;
			top: 5.15rem;
		}

		.hamburger:hover {
			cursor: pointer;
		}

		nav {
			background: rgba(43, 44, 46, 0.8);
			width: 100%;
			text-align: center;
			height: 0;
			overflow-y: hidden; 
			transition: all .3s;
			opacity: 0;
		}

		.show-nav {
			height: 152%;
			height: 224%;
			opacity: 1.0;
			padding-top: 2rem;
			padding-top: 1.7rem;
			overflow-y: visible; 
			transition: all .3s;
		}

		.tablet-video {
			top: 10rem;
			top: 7.2rem;
		}

		.owl-pagination {
			display: none;
		}

		.owl-buttons {
			display: block;
			width: auto;
		}

		.owl-next {
			position: relative;
			left: 278px;
		}

	}

/* Font Face */

@font-face {
  font-family: 'LHF Union Thug';
  src: url('LHFunionthug.eot'); /* IE9 Compat Modes */
  src: url('LHFunionthug.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('LHFunionthug.woff') format('woff'), /* Modern Browsers */
       url('LHFunionthug.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('LHFunionthug.svg#16182c209e799b5fdd7756baeab0e14a') format('svg'); /* Legacy iOS */       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Bell Gothic Black';
  src: url('bell-gothic-black.eot'); /* IE9 Compat Modes */
  src: url('bell-gothic-black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('bell-gothic-black.woff') format('woff'), /* Modern Browsers */
       url('bell-gothic-black.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('bell-gothic-black.svg#27315772d33a1aaa5ee9422837f56264') format('svg'); /* Legacy iOS */
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Bell Gothic Light';
  src: url('bell-gothic-light.eot'); /* IE9 Compat Modes */
  src: url('bell-gothic-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('bell-gothic-light.woff') format('woff'), /* Modern Browsers */
       url('bell-gothic-light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('bell-gothic-light.svg#f685884e65738f283e7d257b80d51190') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}