/* Foundation Resets xresets */
a:hover, a:focus, a:active, a:visited {
	color:inherit;	
}

body, html {
	font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", serif;
	margin:0px;
	padding:0px;	
}

[data-whatinput="mouse"] a {
	-webkit-transition: border-color 300ms;
	-moz-transition: border-color 300ms;
	transition: border-color 300ms;	
}
	[data-whatinput="mouse"] a:hover {
		-webkit-transition: background-color 300ms, color 300ms;
		-moz-transition: background-color 300ms, color 300ms;
		transition: background-color 300ms, color 300ms;	
	}


/* FONTS xfont xfonts*/

@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-Medium.eot');
	src: url('../fonts/TOP-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-Medium.woff') format('woff'),
		url('../fonts/TOP-Medium.ttf') format('truetype'),
		url('../fonts/TOP-Medium.svg#TOP-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-MediumItalic.eot');
	src: url('../fonts/TOP-MediumItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-MediumItalic.woff') format('woff'),
		url('../fonts/TOP-MediumItalic.ttf') format('truetype'),
		url('../fonts/TOP-MediumItalic.svg#TOP-MediumItalic') format('svg');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-Bold.eot');
	src: url('../fonts/TOP-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-Bold.woff') format('woff'),
		url('../fonts/TOP-Bold.ttf') format('truetype'),
		url('../fonts/TOP-Bold.svg#TOP-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-Light.eot');
	src: url('../fonts/TOP-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-Light.woff') format('woff'),
		url('../fonts/TOP-Light.ttf') format('truetype'),
		url('../fonts/TOP-Light.svg#TOP-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-Thin.eot');
	src: url('../fonts/TOP-Thin.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-Thin.woff') format('woff'),
		url('../fonts/TOP-Thin.ttf') format('truetype'),
		url('../fonts/TOP-Thin.svg#TOP-Thin') format('svg');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'TOP Book';
	src: url('../fonts/TOP-BookItalic.eot');
	src: url('../fonts/TOP-BookItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-BookItalic.woff') format('woff'),
		url('../fonts/TOP-BookItalic.ttf') format('truetype'),
		url('../fonts/TOP-BookItalic.svg#TOP-BookItalic') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-LightItalic.eot');
	src: url('../fonts/TOP-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-LightItalic.woff') format('woff'),
		url('../fonts/TOP-LightItalic.ttf') format('truetype'),
		url('../fonts/TOP-LightItalic.svg#TOP-LightItalic') format('svg');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'TOP Book';
	src: url('../fonts/TOP-Book.eot');
	src: url('../fonts/TOP-Book.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-Book.woff') format('woff'),
		url('../fonts/TOP-Book.ttf') format('truetype'),
		url('../fonts/TOP-Book.svg#TOP-Book') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-ThinItalic.eot');
	src: url('../fonts/TOP-ThinItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-ThinItalic.woff') format('woff'),
		url('../fonts/TOP-ThinItalic.ttf') format('truetype'),
		url('../fonts/TOP-ThinItalic.svg#TOP-ThinItalic') format('svg');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'TOP';
	src: url('../fonts/TOP-BoldItalic.eot');
	src: url('../fonts/TOP-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TOP-BoldItalic.woff') format('woff'),
		url('../fonts/TOP-BoldItalic.ttf') format('truetype'),
		url('../fonts/TOP-BoldItalic.svg#TOP-BoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}


/* Typography xtypeography */

	
h1 {
	font-family: 'TOP';
	font-weight: 300;
	font-style: normal;
	font-size:1.8em;	
}
	h1 b {
		font-family: 'TOP';
		font-weight: 500;
		font-style: normal;
	}
	/* XSmall Screens */
	@media only screen and (max-width: 30em) { 
		h1 { 
			font-size:1.45em;	
		}
	}
	/* Small Screens */
	@media screen and (max-width: 39.9375em) {

	}
	/* Medium Screens */
	@media only screen and (min-width: 40em) {
		h1 {
			font-size:2.3em;	
		}
	}
	@media only screen and (min-width: 50em) {
		h1 {
			font-size:2.4em;	
		}
	}
	/* Large Screens */
	@media only screen and (min-width: 64em) { 
		h1 {
			font-size:2.45em;	
		}
	}
	/* XLarge Screens */
	@media only screen and (min-width: 90em) {
		h1 {
			font-size:2.6em;	
		}
	}
	
h2 {
	text-align:center;
	font-family: 'TOP Book';
	font-weight: normal;
	font-style: normal;
	font-size:1.2em;
	padding:0.6em 0 1.5em 0;
	margin:1.5em 0 2.5em 0;
	border-bottom:1px solid #eee;
}
	/* Small Screens */
	@media screen and (max-width: 39.9375em) {
		h2 span {
			display:none;	
		}
	}
	/* Large Screens */
	@media only screen and (min-width: 64em) { 
		h2 {
			font-size:1.4em;	
			margin:0em 0 2.5em 0;
		}
	}
	/* XLarge Screens */
	@media only screen and (min-width: 90em) {
		h2 {
			font-size:1.5em;	
		}
	}

h3 {
	text-align:left;
	font-family: 'TOP Book';
	font-weight: normal;
	font-style: normal;
	font-size:1em;
}

	
/*   Header  xheader */

header, nav, section, footer {
	width:100%;
	margin:0px;
	padding:0px;
	display:block;
	float:left;
	clear:both;	
}

header {
	background-image:url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position:65% 0%;
	background-size:cover;
	height:75%;
	min-height:480px;
	max-height:600px;
	position:relative;
	margin-bottom:1.5em;
	text-align:center;
}	
	canvas {
		position:absolute;
		z-index:2;
		top:0;
		left:0;
		width:100%;
		height:75%;
		min-height:480px;
		max-height:640px;
		display:block;	
	}
	header .logo {
		overflow:hidden;
		text-indent:-999999999999999999999px;
		display:block;
		width: 70px;
		height: 70px;
		background-image: url(../img/top.svg);
		background-position:top left;
		background-repeat:no-repeat;
		margin:12px 5px 5px 13px;
		position:relative;
		z-index:3;
	}
	header h1 {
		color:#fff;
		position:relative;
		top:35%;
		bottom:0;
		left:0;
		right:0;
		z-index:4;
		text-align:left;
		vertical-align:top;
		margin:0px auto;
		width:75%;
		padding:0px 0px 40px 0px;
		height:auto;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	
	/* Medium Screens */
	@media only screen and (min-width: 40em) {
		header {
			background-position:65% 37%;	
		}
		header, canvas {
			min-height:500px;
			max-height:720px;
			height:85%;
		}
		header h1 {
			padding:50px 0px 60px 0px;
		}
	}
	/* Large Screens */
	@media only screen and (min-width: 64em) { 
		header {
			background-position:65% 37%;	
			background-image:url(../img/bg2.jpg);
		}
		header, canvas {
			min-height:640px;
			max-height:720px;
			height:65%;
		}
			.logo {
				margin:24px 5px 5px 4%;	
			}
			header h1 {
				width:70%;
				max-width:780px;
				padding:20px 0px 0px 0px;
			}
	}
	/* XLarge Screens */
	@media only screen and (min-width: 90em) {
		header {
			background-position:65% 40%;	
		}
		header, canvas {
			min-height:720px;
			max-height:820px;
			height:60%;
		}
			header h1 {
				padding:20px 0px 10px 0px;
			}
	}
	

	
/* Navigation xnav xnavigation */	
	
nav {
	width:75%;
	margin:0 auto;
	text-align:center;
	float:none;
	clear:both;
	vertical-align:bottom;
	position:absolute;
	left:0;
	right:0;
	z-index:3;
	bottom:0px;
	overflow:visible;
	color:#fff;
	font-family: 'TOP Book';
	font-weight: normal;
	font-style: normal;
}
	nav a {
		border:1px solid #fff;
		border-bottom:0px;
		color:#fff;
		display:inline-block;
		float:left;
		clear:none;
		width:50%;
		padding:0.75em 0px;
	}
		
	
	nav a:first-child {
		-webkit-border-radius: 2px 0px 0px 0px;
		-moz-border-radius: 2px 0px 0px 0px;
		-ms-border-radius: 2px 0px 0px 0px;
		-o-border-radius: 2px 0px 0px 0px;
		border-radius: 2px 0px 0px 0px;	
		border-color:#3d3d3d #fff #fff #3d3d3d;
	}
	nav a:last-child {
		-webkit-border-radius: 0px 2px 0px 0px;
		-moz-border-radius: 0px 2px 0px 0px;
		-ms-border-radius: 0px 2px 0px 0px;
		-o-border-radius: 0px 2px 0px 0px;
		border-radius: 0px 2px 0px 0px;	
		border-color:#3d3d3d #3d3d3d #fff #fff;
	}
	[data-whatinput="mouse"] nav a:hover {
			border-color:#fff;
			color:#fff;
			-webkit-transition: border-color 100ms;
			-moz-transition: border-color 100ms;
			transition: border-color 100ms;	
	}
	
	nav a.is-active {
		background-color:#fff;
		border-color:#fff;
		color:#000 !important;
	}
	
	/* XXSmall */
	@media only screen and (max-width: 24em) { 
		nav a span {
			display:none;	
		}
	}
	/* Medium Screens */
	@media only screen and (min-width: 40em) {
		nav {
			width:60%;	
		}
	}
	/* Large Screens */
	@media only screen and (min-width: 64em) { 
		nav {
			top:24px;
			right:30px;
			left:inherit;
			margin:0px;
			padding:2px;
			float:right;
			clear:both;
			width:auto;
			height:auto;
			text-align:center;
			vertical-align:middle;
		}
		nav a, nav a.is-active {
			vertical-align:middle;
			color:#fff !important;
			margin:0px 1em 0px 1em;
			text-align:center;
			padding:0.3em 0.5em 0.4em 0.5em;
			width:auto;
			border:none;
			background-color:transparent;
			-webkit-border-radius:2px !important;	
			-moz-border-radius:2px !important;
			-ms-border-radius:2px !important;
			-o-border-radius:2px !important;	
			border-radius:2px !important;
		}
			nav a.is-active {
				border:1px solid #fff;	
			}
		[data-whatinput="mouse"] nav a:hover {
			
		}
	}

/*  General Layout for sections */

section, footer {
	margin-bottom:1.5em;
}
	
	/* Small Screens */
	@media screen and (max-width: 39.9375em) {
		section, footer {
			width:84%;
			margin-left:8%;
		}
	}
	/* Medium Screens */
	@media only screen and (min-width: 40em) {
		section, footer  {
			width:92%;
			margin-left:4%;
		}
	}
	/* Large Screens */
	@media only screen and (min-width: 64em) { 
		section, footer  {
			width:94%;
			margin-left:3%;
		}
	}
	/* XLarge Screens */
	@media only screen and (min-width: 90em) {
		section, footer {
			width:100%;
			margin-left:0px;	
		}
	}
	
	
/* Video Samples Section xvideos xyoutube xmusic */	
	.youtube {
		position:relative;
		padding-bottom: 56%;
		margin-bottom:2em;
		overflow: hidden; 
		max-width: 100%;
	}
		.youtube iframe,
		.youtube embed,
		.youtube object {
				height:100%;	
				width:100%;
				position:absolute;
				top:0;
				left:0;
			}
			

/* About Us and Contact Sections xaboutus xcontact */	
	
	.section_text, .contact_text {
		margin-top:0px;	
		padding-top:0px;
		font-size:0.9em;
	}
		.section_text p {
			margin-top:0px;	
			padding-top:0px;
			line-height:200%;
			margin-bottom:2em !important;
		}
		
	.contact_text,
	.contact_text li {
		list-style:none;
		text-indent:0px;
		text-align:center;
		font-size:0.9em;
	}
		.contact_text li {
			margin-bottom:2em;	
		}
		.contact_text div {
			border:1px solid #eee;
			-webkit-border-radius:2px;	
			-moz-border-radius:2px;	
			-ms-border-radius:2px;	
			-o-border-radius:2px;	
			border-radius:2px;	
			padding:1.4em 0;
		}
		.contact_text p {
			
			font-size:1.4em;
			line-height:110%;
		}
		.contact_text i {
			
		}
		/* Large Screens */
		@media only screen and (min-width: 64em) { 
			.section_text, .contact_text {
				width:74%;
				margin-left:13% !important;
			}
		}
		/* XLarge Screens */
		@media only screen and (min-width: 90em) {
			.section_text, .contact_text {
				width:60%;
				margin-left:20% !important;
				font-size:1em;
			}
		}
			
/* Footer xfooter */			
footer {
	font-size:0.75em;	
	padding-top:3em;
	padding-bottom:2.5em;
}
	.footer_logo {
		background-image: url(../img/top-black.svg);
		background-repeat:no-repeat;
		background-position:top left;
		height:2em;
		width:2.5em;
		margin:0px;
		padding:0px;
		float:left;
		text-align:left;
		clear:none;
		display:inline-block;
	}
		footer p {
			margin-left:1em;
			margin-top:2px;
			width:auto;
			display:inline-block;
			vertical-align:middle;
			float:left;
			clear:none;
			text-align:left;
		}