/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

	html,
	button,
	input,
	select,
	textarea {
		color: #222;
	}

	html {
		font-size: 1em;
		line-height: 1.4;
	}

	/*
	 * Remove text-shadow in selection highlight: h5bp.com/i
	 * These selection rule sets have to be separate.
	 * Customize the background color to match your design.
	 */

	::-moz-selection {
		background: #b3d4fc;
		text-shadow: none;
	}

	::selection {
		background: #b3d4fc;
		text-shadow: none;
	}

	/*
	 * A better looking default horizontal rule
	 */

	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid #ccc;
		margin: 1em 0;
		padding: 0;
	}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

	audio,
	canvas,
	img,
	video {
		vertical-align: middle;
	}

	/*
	 * Remove default fieldset styles.
	 */

	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}

	/*
	 * Allow only vertical resizing of textareas.
	 */

	textarea {
		resize: vertical;
	}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

	.browsehappy {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

	body {
		background-color: #33fffe
	}

	div {
		width: 100%;
	}

	img[usemap] {
		position: relative;
		top: 0px;
		padding: 0px;
		border: 0px solid #000;
		//border-radius: 90px;
		overflow: hidden;
		height: auto;
		max-width: 100%;
		width: auto;
		outline: none;
		border-color: #fff;
		//box-shadow: 0px 0px 300px 100px #fff;
	}

	[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
		display: none !important;
	}

	[ui-view].ng-enter, [ui-view].ng-leave {
		position: relative;
		left: 0;
		right: 0;
		-webkit-transition:all .5s ease-in-out;
		transition:all .5s ease-in-out;
	}

	[ui-view].ng-enter {
		opacity: 1;
	}

	[ui-view].ng-enter-active {
		opacity: 1;
	}

	[ui-view].ng-leave {
		opacity: 1;
	}

	[ui-view].ng-leave-active {
		opacity: 0;
	}

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
font-family: 'VTCKomixationCaps';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationCaps'), url('../fonts/VTCKomixationCaps.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationHand';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationHand'), url('../fonts/VTCKomixationHand.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationRegular';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationRegular'), url('../fonts/VTCKomixationRegular.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationSC';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationSC'), url('../fonts/VTCKomixationSC.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationCapsBold';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationCapsBold'), url('../fonts/VTCKomixationCapsBold.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationCapsItalic';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationCapsItalic'), url('../fonts/VTCKomixationCapsItalic.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationHandBold';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationHandBold'), url('../fonts/VTCKomixationHandBold.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationSCBoldItalic';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationSCBoldItalic'), url('../fonts/VTCKomixationSCBoldItalic.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationSCBold';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationSCBold'), url('../fonts/VTCKomixationSCBold.woff') format('woff');
}


@font-face {
font-family: 'VTCKomixationSCItalic';
font-style: normal;
font-weight: normal;
src: local('VTCKomixationSCItalic'), url('../fonts/VTCKomixationSCItalic.woff') format('woff');
}

@font-face {
  font-family: 'Swiss721ExBt';
  src: local('SWZ721BE.TTF'), url('../fonts/SWZ721BE.TTF') format('truetype');
}

@font-face {
  font-family: 'Swiss721Ex';
  src: local('SWZ721E.TTF'), url('../fonts/SWZ721E.TTF') format('truetype');
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	/* IE 6/7 fallback */
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
	display: none !important;
	visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
	*zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

.splash-wrapper img {
	display:none;
}

.wrapper {
	width: 300px;
	margin: 10px auto;
}

header {
	width: 300px;
	background: #00365c;
	border-radius: 70px 70px 0px 0px;
	height: 200px;
}

header .flight{
	display: none;
}

header .logo{
	width: 240px;
	display: block;
	margin: auto;
	position: relative;
	top: 25px;
}

header .header-img{
	display: none;
}

.subheader{
	border-top: 3px solid #33fffe;
	//padding: 0;
	background: #00365c;
}

.subheader ul{
	margin: 0;
	list-style-type: none;
}

.subheader ul li{
	padding: 0px;
	margin: 0px;
}

.subheader ul li a:link {
	color: #fff;
}

.subheader ul li a:visited {
	color: #fff;
}

.subheader ul li a:hover {
	color: #fff;
}

.subheader ul li a:active {
	color: #fff;
}

.subheader ul li a.active {
	color: #000;
	font-weight: bold;
	box-shadow: 0 0 50px #9ecaed;
}

.subheader ul li a{
	display: block;
	text-align: center;
	background-color: #0597bc;
	border: 3px solid #fff;
	text-decoration: none;
	font-family:'VTCKomixationSCItalic';
	padding: 7px;
}

.main {
	padding: 20px;
	background: #0699bb;
}

a {
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
}

a:link    { color: #fff, font-weight: 1000 }  /* unvisited links */
a:visited { color: #fff }  /* visited links   */
a:hover   { color: #00365c }  /* user hovers     */
a:active  { color: #fff }  /* active links    */

.main a {
	color: #fff;
	font-size: 26px;
}

.main a:hover {
	color: #00365c;
	font-size: 26px;
}

#catalog {
	overflow : hidden;
	position : relative;
	height: 1000px;
}

iframe {
	width: 100%;
	height: 1200px;
	position: absolute;
	top: -320px;
	left: 0px;
}

.main h2{
	font-family:'VTCKomixationSCItalic';
	font-size: 30px;
	color: #00365c;
	margin: 5px 20px;
	text-align: center;
}

.main h3{
	font-family:'VTCKomixationSCItalic';
	font-size: 25px;
	color: #00365c;
	margin: 5px 20px;
	text-align: center;
}

.main p {
	margin: 10px;
	font-family:'Swiss721Ex';
	color: #fff;
	font-size: 20px;
	text-align: center;
}

.main p.headline {
	font-family:'Swiss721ExBt';
	font-size: 22px;
}

.main p.subheadline {
	font-family:'Swiss721ExBt';
	font-size: 20px;
}

.main p.footheadline {
	padding: 5px;
	text-align: left;
	font-size: 14px;
}

.main p.footheadline a{
	font-size: 14px;
}

.main ul{
	text-align: left;
	list-style-type: none;
}

.main ul li {
	padding: 10px 30px;
	color: #fff;
	font-family:'Swiss721Ex';
	font-size: 20px;
}

.main ul li .bold {
	font-size: 30px;
}

.main img {
	width: 225px;
	margin: 10px;
}

/* Gallery container : submain section only
used for Gallery page so styles dont conflict */
.submain {
	padding: 0px;
	background: #0699bb;
}

.submain .demo {
    width:230px;
		margin: 0 auto 0 auto;
		border: 10px solid #33fffe;
		border-radius: 10px;
}
.submain ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
.submain li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
.submain img {
    display: block;
    height: auto;
    max-width: 100%;
}

footer {
	padding: 10px;
	margin: 10px;
}

footer p {
	font-size: 10px;
	color: #000;
	text-transform: uppercase;
	font-style: italic;
	float: right;
}

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

	.splash-wrapper {
		width: 100%;
	}

	.splash-wrapper img {
		display:block;
		margin:auto;
	}

	#container .wrapper {
		display: none;
	}

	.wrapper {
		width: 640px;
	}

	header {
		width: 640px;
	}

	header .logo{
		float: left;
		width: 290px;
		position: relative;
		left: 40px;
		top: 18px;
	}

	header .flight{
		display: block;
		float: right;
		position: relative;
		top: 40px;
		right: 10px;
	}

	.subheader{
		width: 640px;
		height: 75px;
		padding: 10px 0 10px 0;
	}

	.subheader ul{
		margin: 0;
		list-style-type: none;
		padding: 0 0 0 35px;
	}

	.subheader ul li{
		float: left;
		padding: 3px;
		margin: 14px 2px;
	}

	.subheader ul li a{
		background-color: #0597bc;
		//border-radius: 3em 0em 3em 0em;
		border-radius: 3em;
		text-decoration: none;
	}

	.subheader ul li a{
		border: 6px solid #fff;
		padding: 7px 14px;
		font-size: 14px;
	}

	nav {
		display: none;
	}

	.main {
		width: 600px;
		padding: 10px 20px;
	}

	.main h2{
		margin: 20px;
		text-align: left;
	}

	.main p {
		padding: 15px 30px;
		font-size: 18px;
		line-height: 30px;
	}

	.main p.headline {
		font-size: 40px;
	}

	.main p.subheadline {
		font-size: 23px;
	}

	.main p.footheadline {
		font-size: 20px;
	}

	.main p.footheadline a{
		font-size: 20px;
	}

	.main img {
		width: 200px;
		margin: 10px 30px;
	}

	.main .clipL {
			float: left;
	}

	.main .clipR {
			float: right;
	}

	.main .alignR {
			text-align: right;
	}

	.main .alignL {
			text-align: left;
	}

	.submain .demo {
	    width:580px;
			/*margin: 0 auto 50px auto;
			border: 10px solid red;
			border-radius: 10px;*/
	}

}

@media screen and (min-width: 1000px) {

	.wrapper {
		width: 960px;
	}

	header {
		width: 960px;
	}

	header .flight{
		display: none;
	}

	header .logo{
		display: none;
	}

	header .header-img{
		display: block;
		margin: auto;
		position: relative;
		top: 8px;
	}

	.subheader{
		width: 960px;
		height: 75px;
	}

	.subheader ul{
		padding: 0 0 0 35px;
	}

	.subheader ul li{
		margin: 14px 15px;
	}

	.subheader ul li a{
		padding: 5px 24px;
		font-size: 18px;
	}

	.main {
		width: 910px;
		padding: 10px 25px;
	}

	.main h2{
		font-size: 45px;
	}

	.main p {
		padding: 15px 30px;
		font-size: 25px;
		line-height: 35px;
	}

	.main p.headline {
		font-size: 50px;
	}

	.main p.subheadline {
		font-size: 30px;
	}

	.main p.footheadline {
		font-size: 30px;
	}

	.main p.footheadline a{
		font-size: 30px;
	}

	.main img {
		width: 225px;
		margin: 30px 40px;
	}

	.main .contact-img {
		width: 300px;
	}

	.main .clipL {
			float: left;
	}

	.main .clipR {
			float: right;
	}

	.main .alignR {
			text-align: right;
	}

	.main .alignL {
			text-align: left;
	}

	.submain .demo {
	    width: 800px;
			/*margin: 0 auto 50px auto;
			border: 10px solid red;
			border-radius: 10px;*/
	}

}


/* ==========================================================================
========================================================================== */

@media print,
	   (-o-min-device-pixel-ratio: 5/4),
	   (-webkit-min-device-pixel-ratio: 1.25),
	   (min-resolution: 120dpi) {
	/* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}