﻿/************
	RESET
*************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }




/*****************
	TYPOGRAPHY
******************/
body { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight:300; line-height: 1; color: #f4f4f4; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-weight:normal; }

h1 { font-size: 35px; }
h2 { font-size: 20px; }
h3 { font-size: 20px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

a { color: #dddddd; text-decoration: none; -moz-transition:color 100ms linear; -o-transition:color 100ms linear; -webkit-transition:color 100ms linear; transition:color 100ms linear;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent; /* For some Androids */
	outline: 0;
}
a:hover { color: #ca874b; }

/* ::selection {background:#5cb7e0; color:#ffffff;} */
/* ::-moz-selection {background:#5cb7e0; color:#ffffff;} */


/* CONTENT TYPOGRAPHY */
.content { line-height:1.5; color:#dddddd; font-size:13px; }
.content p, .content ul, .content ol, .content table { margin: 0; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content li { margin: 0 0 5px 20px; }
.content img { max-width:100%; }
.content table { max-width:100%; }
.content table th, .content table td { border:1px solid #a2a2a2; text-align:left; padding:5px; vertical-align:top; }
.content a { color: #ca874b; }
.content a:hover { text-decoration:underline; }



/**************
	HELPERS
***************/
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.overflow { overflow: hidden; }
.wide { width: 100%; }



/**************
	INPUTS
***************/
input, textarea, button, select { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #484848; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #989898; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #989898; opacity: 1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #989898; }
input::input-placeholder, textarea::input-placeholder { color: #989898; }

input[type=date]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; }
input[type=date]::-webkit-calendar-picker-indicator { -webkit-appearance: none; display: none; }
input[type=date]::-webkit-clear-button { display: block; -webkit-appearance: none; }

.textbox { border:none; background:#fff; outline:none; border-radius:0; padding:0 15px; margin:0; width:100%; height:47px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
textarea.textbox { resize:vertical; padding:15px; height:240px; }
.textbox:focus { }
.textbox.error { box-shadow:0 0 3px #ea482a; }



/***************
	BUTTONS
****************/
button { -webkit-appearance: none; appearance: normal; }

.button { -webkit-appearance: none; appearance: normal; border:none; background:#aeaeae; color:#fff; font-size:15px; height:44px; text-transform:uppercase; outline:none; border-radius:0; padding:2px 20px 0 20px; margin:0; cursor:pointer; transition:all 100ms linear; }
.button:hover { color:#ffffff; background:#ea482a; }
.button:active {  }



/***************
	SHARED
****************/



/************
	STYLE
*************/
html { background:#0f0f0f; height: 100%; }
body { height: 100%; min-width: 320px; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; position: relative; overflow:hidden; }
.mobile-only { display:none; }
.desktop-only { display:block; }


/* INTRO */
#intro { position:absolute; top:0; left:0; width:100%; height:100%; background:#0f0f0f; z-index:999; }
#intro table { width:100%; height:100%; }
#intro table td { height:100%; vertical-align:middle; text-align:center; }
#intro-logo { width: 80%; max-width: 555px; opacity: 0;
			  -webkit-transform: scale(0.9) rotateZ(0.01deg); transform: scale(0.9) rotateZ(0.01deg);
			  -webkit-transition-property: opacity, transform; transition-property: opacity, transform; 
			  -webkit-transition-duration: 2s, 8s; transition-duration: 2s, 8s;
			  -webkit-transition-timing-function: linear, linear; transition-timing-function: linear, linear;
}
#intro-logo.in { opacity:1; -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); }
#intro-logo.out { opacity:0; }
#intro h1, #intro h2 { position:absolute;left:-9999px;top:-9999px }


/* HEADER */
#header { width:100%; padding:10px 0; background:#1d1d1d; background:rgba(30,30,30,0.95); border-bottom:1px solid #0f0f0f; position:absolute; top:-100%; left:0; z-index:10; transition:top 500ms cubic-bezier(.11,.64,.05,.98); }
.ready #header { top:0; }
#top-links { width:100%; overflow:hidden; font-size:13px; line-height:15px; }
#top-links a { color:#786e56; text-shadow:0 1px 1px rgba(0,0,0,0.5); padding-right:15px; }
#top-links a::after { content:"♦"; font-size:11px; padding-left:15px; cursor:default; line-height:13px; vertical-align:top; }
/*#top-links a:last-child::after { content:""; padding:0; }*/


/* MAIN */
#main { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
#brand-logo { position:absolute; top:10%; right:5%; width:22%; height:22%; }
#brand-logo img { position:absolute; top:0; right:0; width:100%; height:auto; opacity:0; -moz-transition:opacity 1s linear; -o-transition:opacity 1s linear; -webkit-transition:opacity 1s linear; transition:opacity 1s linear; }
#brand-logo img.show { opacity:1; }

.slider { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
.slider .slide { -moz-transform:rotateZ(0.01deg); -ms-transform:rotateZ(0.01deg); -o-transform:rotateZ(0.01deg); -webkit-transform:rotateZ(0.01deg); transform:rotateZ(0.01deg); position:absolute; top:0; left:0; width:100%; height:100%; background-position:center center; background-size:cover; background-repeat:no-repeat; opacity:0; }
.slider .slide.show { -moz-animation: zoomAmin 10000ms linear 1 normal; -o-animation: zoomAmin 10000ms linear 1 normal; -webkit-animation: zoomAmin 10000ms linear 1 normal; animation: zoomAmin 10000ms linear 1 normal; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

@-webkit-keyframes zoomAmin { 0% {-webkit-transform:scale(1.1) rotateZ(0.01deg); opacity:0; } 10% { opacity:1; } 100% {-webkit-transform:scale(1) rotateZ(0.01deg); opacity:1;} }
@keyframes zoomAmin { 0% {transform:scale(1.1) rotateZ(0.01deg); opacity:0; } 10% { opacity:1; } 100% {transform:scale(1) rotateZ(0.01deg); opacity:1;} }





/* FOOTER */
#footer { position: absolute; bottom:-100%; left: 0; width: 100%; background:#1d1d1d; background:rgba(30,30,30,0.95); color: #ffffff; z-index:11; transition:bottom 500ms cubic-bezier(.11,.64,.05,.98); }
.ready #footer { bottom:0; }
.ftop { height:1px; background:#313131; border-top:1px solid #0f0f0f; }
#footer .layout { padding:0 20px; }
#logo { width:200px; float:left; margin:22px 60px 0 10px; }
#logo img { display:block; width:100%; height:auto; }

/* nav */
.nav {  }
.nav > li { float:left; position:relative; margin:-2px 0 0 0; }
.nav > li > a { display:block; cursor:pointer; padding:30px 20px 27px; margin:2px 0 0 0; border-left:1px solid rgba(0,0,0,0); }
.nav > li > a .sub-arrow { display:block; position:absolute; width:7px; height:5px; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFBAMAAAB7tOvrAAAAHlBMVEUZGRkaGhobGxsQEBARERESEhLOo2fftXrwx4z0z5qdLcdLAAAAA3RSTlMAAAD6dsTeAAAALUlEQVR4XgWAMQ0AIAwEb0AAIQiojK44YKqTphY6sr5bgqSHd19GpUGcCXvZB2NcBfE7kq2VAAAAAElFTkSuQmCC') /*../img/submenu-arrow.png*/ no-repeat 0 0; top:1px; left:21px; opacity:0; transition:opacity 100ms linear; }
.nav > li:hover > a { border-color:#2a2a2a; box-shadow:rgba(0,0,0,0.1) 10px 0 10px inset; color: #ca874b; }
.nav > li:hover > a .sub-arrow { opacity:1; }
.nav-submenu { position:absolute; bottom:100%; left:1px; overflow:hidden; }
.nav-subcontent-wrap { position:absolute; bottom:100%; right:0; overflow:hidden; }
.nav-submenu ul, .nav-subcontent { margin-bottom:-1000px; min-width:140px; background:#1d1d1d; background:rgba(30,30,30,0.95); padding:20px 0; box-shadow:rgba(0,0,0,0.1) 10px 0 10px inset; -moz-transition:margin 300ms cubic-bezier(.09,.56,.05,.99); -o-transition:margin 300ms cubic-bezier(.09,.56,.05,.99); -webkit-transition:margin 300ms cubic-bezier(.09,.56,.05,.99); transition:margin 300ms cubic-bezier(.09,.56,.05,.99); }
.nav-submenu li a { display:block; padding:4px 20px; white-space:nowrap; }
.nav-subcontent { white-space:nowrap; padding:20px; }
.nav > li:hover .nav-submenu ul, .nav > li:hover .nav-subcontent { margin-bottom:0 !important; }



/************
	MOBILE
*************/
@media screen and (max-width:1023px) {
	body { min-width: 320px; }
	.mobile-only { display:block; }
	.desktop-only { display:none; }

	/* HEADER */
	#top-links { display:none; }
	.mobile-logo { float:left; margin:2px 5px 0 15px; }
	.mobile-logo img { display:block; width:180px; height:auto; }

	/* NAV */
	#mobile-menu-icon { display:block; float:right; margin-right:15px; margin-top: 4px; }
	#mobile-menu-icon .fa { font-size:22px; color:#ca874b; }


	/* main-nav-mobile */
	#main-nav-mobile {position:absolute; top:100%; left:0; width:100%; z-index:9999; background:rgba(30,30,30,0.95); border-bottom:1px solid #0f0f0f; overflow:auto; max-height:400px; }
	#main-nav-mobile li { position:relative; margin:0 15px; text-align:right; }
	#main-nav-mobile li > a { display:block; cursor:pointer; font-weight:normal; line-height:1; font-size:14px; text-transform:uppercase; padding:14px 0 12px; white-space:nowrap; }
	#main-nav-mobile li > a:hover, #main-nav-mobile li > a.active { color:#ca874b; }
	#main-nav-mobile > li { float:none; border-top:1px solid rgba(60,60,60,0.95); border-left:none; }
	#main-nav-mobile > li:first-child { border-top:none; border-left:none; }
	#main-nav-mobile > li:last-child > a { border-left:none; padding-right:0; }

	#main-nav-mobile > li > div { position:static; opacity:0; height:0; -moz-transition:opacity 200ms linear; -o-transition:opacity 200ms linear; -webkit-transition:opacity 200ms linear; transition:opacity 200ms linear; }
	#main-nav-mobile > li > a.active + div { opacity:1; height:auto; }
	#main-nav-mobile > li > div > ul, #main-nav-mobile > li > div > div { margin:0 !important; padding:0 0 14px; background:none; box-shadow:none; }
	#main-nav-mobile > li > div > ul li { opacity:1; -moz-transition:0; -o-transition:0; -webkit-transition:0; transition:0; margin:0; }
	#main-nav-mobile > li > div > ul li > a { text-transform:none; font-size:14px; padding:5px 0; }


	/* MAIN */
	#brand-logo { top:auto; bottom:15px; right:15px; width:40%; height:40%; }
	#brand-logo img { top:auto; bottom:0; right:0; }


	/* FOOTER */
	#footer { display:none; }
}