@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css?family=Oswald');*/
@import url('https://fonts.googleapis.com/css?family=Mitr');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Khand');
@import url('https://fonts.googleapis.com/css?family=Orbitron');
@import url('https://fonts.googleapis.com/css?family=Maven+Pro');
/* CSS Document */

@font-face {
  font-family: 'supermarket';
  src: url(../font/supermarket.ttf);
}

body {
	font-family: Verdana, Arial, Microsoft Sans Serif; word-wrap:break-word;
	font-size: 13px; line-height: 20px; color: #FFF;
	margin: 0px;
}

a:link, a:active, a:visited { color: #266ec7; text-decoration: none; outline: none; }
a:hover{ color: #2989ff; text-decoration: none; outline: none; }

#mainRoot {
	margin: 0px; padding: 0px;
}

/* Logo ------------------------------------ */
#menuHome:link, #menuHome:active, #menuHome:visited, #menuHome:hover {
	text-decoration: none; outline: none;
	position: absolute; top: 0px; left: 0px; z-index: 999;
	width: 156px; height: 50px;
	background: url(../img/imgVermillionMenu.png) no-repeat;
}

/* Social ----------------------------------- */
#menuTwitter:link, #menuTwitter:active, #menuTwitter:visited, #menuTwitter:hover {
	text-decoration: none; outline: none;
	position: absolute; top: 0px; right: 0px; z-index: 999;
	width: 50px; height: 50px;
	background: url(../img/imgMenuTwitterIcon.png) no-repeat center;
}
#menuFB:link, #menuFB:active, #menuFB:visited, #menuFB:hover {
	text-decoration: none; outline: none;
	position: absolute; top: 0px; right: 50px; z-index: 999;
	width: 50px; height: 50px;
	background: url(../img/imgMenuFBIcon.png) no-repeat center;
}

#moreProduct:link, #moreProduct:active, #moreProduct:visited, #moreProduct:hover {
	font-family: 'Khand'; font-size: 1.45em; font-weight: bold;  letter-spacing: 0.06em;
	color: #111; line-height: 24px; text-align: center; padding-top: 2px;
	text-decoration: none; outline: none;
	display: block;
	width: 64px; height: 24px;
	background: #F90; margin-top: -10px;
}

#steamButton:link, #steamButton:active, #steamButton:visited, #steamButton:hover {
	font-family: 'Khand'; font-size: 2.0em; font-weight: bold;  letter-spacing: 0.02em;
	color: #033; line-height: 32px; text-align: center; padding-top: 2px;
	text-decoration: none; outline: none;
	display: block;
	width: 210px; height: 151px;
	background: url(../img/imgSteam.png) no-repeat;
}
/* Menu ----------------------------------------------------------------------------------------------------------------------------------- */
#menuRoot {
    width: 100%;height: 50px;
    position: fixed;
    top: 0px;
	z-index: 900;
    background: #2a2a2a;
}
#menuContent {
	margin: 0 auto; position: relative;
	width: 100%;
	max-width: 1060px;
	min-width: 550px;
	height: 50px;
}
#menuBar {
	position: absolute; top: 0px; left: 156px; z-index: 999;
	width: 800px; height: 50px;
	background: none;
}
#menuList {
	list-style-type: none; margin: 0px; padding: 0px;
}
#menuList li {
	display: block; float: left; margin: 0px; padding: 0px;
}
#menuList li a:link, #menuList li a:active, #menuList li a:visited, #menuList li a:hover {
	color: #fff;
	font-family: 'Orbitron'; font-size: 0.95em; font-weight: 800;  letter-spacing: 0.1em;
	word-wrap:break-word; 
	text-decoration: none; outline: none; 
	display: block; height: 50px; line-height: 50px;
	padding: 0px 24px 0px 24px; margin: 0px;
}

/* Menu List Animation Background */
.menuBGHover {
	color: #fff !important;
	background-color: #666 !important;
	-webkit-animation: menuBGHoverData 0.24s ease 0s 1 alternate !important;
}
@-webkit-keyframes menuBGOutData { from { color: #fff; background-color: #666; } to { color: #fff; background-color: #2a2a2a; } }
@-moz-keyframes menuBGOutData { from { color: #fff; background-color: #666; } to { color: #fff; background-color: #2a2a2a; } }
@-ms-keyframes menuBGOutData { from { color: #fff; background-color: #666; } to { color: #fff; background-color: #2a2a2a; } }
@-o-keyframes menuBGOutData { from { color: #fff; background-color: #666; } to { color: #fff; background-color: #2a2a2a; } }
@keyframes menuBGOutData { from { color: #fff; background-color: #666; } to { color: #fff; background-color: #2a2a2a; } }
.menuBGOut {
	color: #fff !important;
	background-color: #2a2a2a !important;
	-webkit-animation: menuBGOutData 0.24s ease 0s 1 alternate !important;
}
@-webkit-keyframes menuBGHoverData { from { color: #fff; background-color: #2a2a2a; } to { color: #fff; background-color: #666; } }
@-moz-keyframes menuBGHoverData { from { color: #fff; background-color: #2a2a2a; } to { color: #fff; background-color: #666; } }
@-ms-keyframes menuBGHoverData { from { color: #fff; background-color: #2a2a2a; } to { color: #fff; background-color: #666; } }
@-o-keyframes menuBGHoverData { from { color: #fff; background-color: #2a2a2a; } to { color: #fff; background-color: #666; } }
@keyframes menuBGHoverData { from { color: #fff; background-color: #2a2a2a; } to { color: #fff; background-color: #666; } }

/* Section Root ---------------------------------------------------------------------------------------------------------------------*/
#sectionRoot div {
	position: relative;
	display: block;
	width: 100%;
	background: no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.secHome { background: #000 !important; }
.secAbout { background-color: #FFF !important; }
.secProduct { background-image: url(../img/imgSecBG_Product.html) !important; }
.secContact { background: #333 !important; }

/* Video ---------------------------------------------------------------------------------------------------------------------*/
.videoW {
	width: 100%;
}
.videoH {
	height: 100%;
}
.bgVideo {
	width: 100%;
	height: 100%;
	position: absolute !important;
	overflow: hidden;
	z-index: 0;
}

.bgVideoMask {
	width: 100%;
	height: 100%;
	position: absolute !important;
	z-index: 1;
	background: url(../img/imgSecBG_Filter.png) repeat !important;
}

.stopfade { 
   opacity: .5;
}

.archieve {
	position: absolute !important;
	bottom: 30px; right: 30px;
	display: block;
	width: 300px !important; height: 130px;
	background: url(../img/imgMASSBuilderArchieve.png) no-repeat center !important;
	z-index: 500;
}

/* Content Box ----------------------------------------------------------------------------------------------------------- */
.contentRoot {
	margin: 0 auto;
	width: 100%;
	max-width: 1020px;
	min-width: 500px;
	z-index: 2;
}
.contentBox {
	float: left;
	position: absolute;
	display: block;
	border: none;
	padding: 60px 15px 0px 15px;
	max-width: 44%;
	min-width: 400px;
}
.contentPack {
	display: inline-block !important;
}
.contentBlack {
	color: #555 !important;
}

.contentBox h1 {
	font-family: 'Khand'; font-size: 3.2em; font-weight: bold; letter-spacing: 0.022em; margin: 0px 0px 4px 0px; line-height: 0.92em;
}

.contentBox h2 {
	font-family: 'Khand'; font-size: 3.2em; font-weight: bold; letter-spacing: 0.022em; margin: 0px 0px 15px 0px; line-height: 0.8em;
}

.contentBox h3 {
	font-family: 'Khand'; font-size: 1.75em; font-weight: 600; letter-spacing: 0.022em; margin: 0px 0px 8px 0px; line-height: 0.62em;
}

.contentBox p {
	font-family: 'Maven Pro'; font-size: 1.2em; font-weight: 400; margin: 0px 0px 22px 0px;
}




/* History --------------------------------------------------- */
.stretchBox {
	color: #555 !important;
	/*position: relative !important;*/
	display: inline-block !important;
	width: 100%;
	background: #F2F2F2 url(../img/imgBGHistory.jpg) no-repeat center !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	padding: 60px 0px 100px 0px;
	border-bottom: 1px solid #EAEAEA;
}

.historyBox {
	width: 140px !important;
	height: 105px !important;
	display: inline-block !important;
	margin: 4px;
}

.historyBox .detail{
	text-align: center; float: left;
	font-family: 'Khand'; font-weight: bold;
	height: 65px !important;
	border-bottom: 1px solid #DDD;
}
.historyBox .detail .s{
	font-size: 1.2em; line-height: 1.0em; color: #866;
}
.historyBox .detail .m{
	font-size: 2.0em; line-height: 0.9em;
}
.historyBox .year {
	height: 40px !important; float: left;
	text-align: center;
	font-family: 'Khand'; font-size: 2.6em; font-weight: bold; line-height: 1.3em; letter-spacing: 0.02em;
	color: #A99 !important; margin: 0px; padding:0px;
}

.stretchBoxProduct {
	display: inline-block !important; height: auto;
	width: 100%; 
	background: url(../img/imgProductBGTrans.png) repeat !important;
	padding: 0px 0px 20px 0px;
}


.char {
	position: absolute !important;
	z-index: 100;
	bottom: 0px; left: 48%;
	background: url(../img/imgChar.png) no-repeat cover !important;
}

/* Contact ------------------------------------------- */
.stretchBoxContact {
	color: #555 !important;
	/*position: relative !important;*/
	display: inline-block !important;
	width: 100%;
	background: #F2F2F2 url(../img/imgBGContact.jpg) no-repeat center !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	padding: 60px 0px 0px 0px;
	border-bottom: 1px solid #EAEAEA;
}

.contactLabel {
	font-size: 1.2em !important; font-weight: bold !important; line-height: 1.3em !important; letter-spacing: 0.06em !important;
	color: #CCC !important;
}

.contactSocial:link, .contactSocial:active, .contactSocial:visited, .contactSocial:hover, .contactSocial {
	font-size: 1.0em !important; font-weight: bold !important; line-height: 36px !important; letter-spacing: 0.06em !important;
	
	color: #CCC !important; padding-left: 44px; display: inline-block !important; width: auto !important; margin-bottom: 4px;
	text-decoration: none; outline: none; height: 36px;
}

.contactFB {
	background: url(../img/imgMenuFBIconT.png) no-repeat left !important;
}
.contactTwitter {
	background: url(../img/imgMenuTwitterIconT.png) no-repeat left !important;
}
.contactMailLabel {
	font-size: 1.0em !important; font-weight: bold !important; line-height: 36px !important; letter-spacing: 0.06em !important;
	
	color: #CCC !important; padding-left: 44px; display: inline-block !important; width: auto !important; margin-bottom: 4px;
	text-decoration: none; outline: none; height: 36px;
}
.contactMail {
	background: url(../img/imgMailIcon.png) no-repeat left !important;
}

.footer {
	font-family: 'Khand' !important; font-size: 1.4em !important; font-weight: normal !important; color: #888;
}