html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit;}
html, body { height:100%; background-image:url("page01-bg.jpg"); background-color:#000;}
body {line-height:1; }
ol, ul, li {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
body {-webkit-text-size-adjust:none;}
* {-o-transition:color .30s linear, background-color .30s linear, border-color .30s linear;-webkit-transition:color .30s linear, background-color .30s linear, border-color .30s linear;-moz-transition:color .30s linear, background-color .30s linear, border-color .30s linear;transition:color .30s linear, background-color .30s linear, border-color .30s linear;}
b {font-weight:bold;}
p, div, li, td, th, input, textarea {font:normal 15px arial, helvetica, sans-serif; color:#ccc;}

#Header {background:#000; border-bottom:3px solid #555; height:50px; cursor:default; z-index:10;width:100%;}
#Logo {width:112px; height:46px; position:absolute; margin-left:20px; background:url(/images/ASRock[W].png) no-repeat; z-index:10; transition:all 0.3s ease-in-out;}
#Logo:hover {background:url(/images/ASRock[W]On.png); transition:all 0.3s ease-in-out;}

#Menu {display:none; font-family:"Trebuchet MS", arial, helvetica, sans-serif; line-height:50px;}
#Header .nav {float:right; margin-right:30px; display:block; z-index:10;}
#Header .nav li{border-bottom:3px solid #555; transition:all 0.3s ease-in-out; position:relative; float:left; height:50px; line-height:50px;}
#Header .nav li:hover{border-bottom:3px solid #aaa; transition:all 0.5s ease-in-out;}
#Header .nav li>a{font-family:"Trebuchet MS", arial, helvetica, sans-serif; color:#fff; padding:0 20px; text-shadow:1px 1px #555; display:block; text-decoration:none;}
#Header .nav li>a:hover {color:#ccc; cursor:pointer; background:url(/images/MenuOn.png) no-repeat center;}
#Language {width:60px; height:50px; background:url(/images/Language.png) no-repeat center; transition:all 0.3s ease-in-out; }
#Language:hover {background:url(/images/LanguageOn.png) no-repeat center; transition:all 0.3s ease-in-out; cursor:pointer;}





.fancyNav{
	/* Affects the UL element */
	width:100%;
	margin:auto;
  }

.fancyNav li{
	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
	
	background-color: #2d2d2d;
	background-image: -webkit-gradient(linear,left top, left bottom,from(#535353), color-stop(0.5,#2d2d2d), color-stop(0.51, #212121));
	background-image: -moz-linear-gradient(#535353 0%, #2d2d2d 50%, #212121 51%);
	background-image: -o-linear-gradient(#535353 0%, #2d2d2d 50%, #212121 51%);
	background-image: -ms-linear-gradient(#535353 0%, #2d2d2d 50%, #212121 51%);
	background-image: linear-gradient(#535353 0%, #2d2d2d 50%, #212121 51%);
	
	border-right: 1px solid rgba(3e, 3e, 3e, 0.9);
	
	/* Adding a 1px inset highlight for a more polished efect: */
	
	box-shadow: 100px -10px 0 rgba(3e, 3e, 3e, 0.6) inset;
	-moz-box-shadow: 100px -10px 0 rgba(3e, 3e, 3e, 0.6) inset;
	-webkit-box-shadow: 100px -10px 0 rgba(3e, 3e, 3e, 0.6) inset;
	
	position:relative;	
	float: left;
	list-style: none;
}

.fancyNav li:after{

	/* This creates a pseudo element inslide each LI */	
	
	content:'.';
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
	opacity:0;
	
	/* Gradients! */
	
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	
	box-shadow:-1px 0 0 #000,-2px 0 0 #090909,1px 0 0 #000,2px 0 0 #090909;
	-moz-box-shadow:-1px 0 0 #000,-2px 0 0 #090909,1px 0 0 #000,2px 0 0 #090909;
	-webkit-box-shadow:-1px 0 0 #000,-2px 0 0 #090909,1px 0 0 #000,2px 0 0 #090909;
	
	/* This will create a smooth transition for the opacity property */
	
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;
}

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
	border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
	box-shadow:1px 0 0 #000,2px 0 0 #090909;
	-moz-box-shadow:1px 0 0 #000,2px 0 0 #090909;
	-webkit-box-shadow:1px 0 0 #000,2px 0 0 #090909;
	
	border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
	border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
	box-shadow:-1px 0 0 #000,2px 0 0 #090909;
	-moz-box-shadow:-1px 0 0 #000,2px 0 0 #090909;
	-webkit-box-shadow:-1px 0 0 #000,2px 0 0 #090909;
	
	border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
	/* This property triggers the CSS3 transition */
	opacity:1;
}

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
	/* Hides the targeted li when we are hovering on the UL */
	opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
	opacity:1 !important;
}

/* Styling the anchor elements */

.fancyNav li div{
	color: #CCC;
	height: 122px;
	display: inline-block;
	font: 25px/1 'Fjalla One', sans-serif;
	padding: 8px 12px 14px;
	position: relative;
	text-shadow: 1px 1px 0 rgba(000, 000, 000, 0.6);
	z-index:2;
	text-decoration:none !important;
	white-space:nowrap;
	cursor: pointer;
}



.gallery {
  list-style: none;
  width: 100%;
}

.portrait {
	
	margin-top:10px;
	height: 100%;		
    width: 24.5%;
  margin:10px 2px 0px 2px;
  cursor: pointer;
  float: left;  
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;  
  -webkit-filter: grayscale(100%);
  filter: grayscale(0%);
}
.portrait:hover {
  -moz-transform: scale(1.04, 1.04);
  -ms-transform: scale(1.04, 1.04);
  -webkit-transform: scale(1.04, 1.04);
  transform: scale(1.04, 1.04);
  
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.portrait .pic {
  width: 100%;
  
}


.gallery h1{
	font-family: 'Fjalla One', sans-serif;
	color: #fff;
	text-align: center;	
	font-size: 25px;
	}
	
.gallery p{
	color:#fff;
	font-family: 'Fjalla One', sans-serif;
	text-align: center;
	margin:0px 5px 0px 5px;
	font-size: 16px;
	
}







.style1 {
	font-family: 'Fjalla One', sans-serif;
	color: #fff;
	font-size: 18px;
	padding:50px 50px 0px 40px;
	margin: auto;
	margin-bottom:50x;
	letter-spacing: 1px;
	width:1200px;
	line-height: 26px;
}

.style2 {
	font-family: 'Fjalla One', sans-serif;
	color: #999;
	font-size: 16px;
	padding:0px 25px 5px 5px;
}

.style3 {
	font-family:'Fjalla One', sans-serif;
	color: #FFF;
	font-size: 45px;
	letter-spacing: 2px;
	background-color:#333;
	padding:10px 5px 10px 5px;
	text-align: center;
}

.grid-15 {
	width:33%;
	float:left;
	margin-top:10px;
	height: 100%;	
	font-family:'Fjalla One', sans-serif;
	
}

.grid-15 .image{
	width:100%;
	max-width: 400px;
	display:block;
	margin:0px auto;
	vertical-align: bottom;
	}
	


.grid-5 .image{
	width:100%;	
	display:block;	
	vertical-align: bottom;
	}
	
@media screen and (max-width:1024px) {
	#Menu {display:inline-block; background:#222; border-left:1px solid #444; padding:0 20px; color:#fff; float:right; text-shadow:1px 1px #000; font-size:1.1em; cursor:pointer;}
	#Menu:hover {background:#c00;border-left:1px solid #f00;}
	#Header .nav {display:none;position:absolute;width:100%;margin-top:53px;}
	#Header .nav li {float:none; border-bottom:1px solid #555; text-align:center; background:rgba(10%,10%,10%,0.9);} #Header .nav li:hover{border-bottom:1px solid #555; background:#000;}
	#Language {width:100%;}
	.style1 {width:100%;	padding:10px 10px 0px 10px;}
}
@media screen and (max-width:980px) {
	.style1 {width:100%;	padding:10px 10px 0px 10px;}
}
@media screen and (max-width:480px) {
	#Logo {margin-left:10px;}
	.style1 {width:100%; 	padding:10px 10px 0px 10px;}
}

#SearchAll {width:100px; padding:0.5em; border:0; background:transparent; color:#3ff; outline:0; font-size:1em; border:1px dotted #888; border-radius:5px;}
#SearchBtn {background:url(/images/Search.png) no-repeat center; border:0; height:30px; width:30px; cursor:pointer;}
#SearchBtn hover {background:url(/images/SearchOn.png) no-repeat center;}

.Fields {margin-right:1.2em; padding:.2em .4em; background:#000; color:#0CF; font-size:1em; border:1px solid #555; border-radius:3px; outline:0;}
.Fields:hover, .Fields:focus {color:#0CF; text-shadow:1px 1px #000; border:1px solid #5bc; box-shadow:0 0 2px #5bc, 0 0 5px #59b7c2; transition:all 0.3s ease-in-out;}
.Buttons {border-radius:1em; cursor:pointer; font-weight:bold; margin:.2em; padding:.8em 1.6em; text-align:center; background:#333; border:1px solid #444; box-shadow:none; color:#ccc; outline:0;}
.Buttons:hover {background:#666; text-shadow:1px 1px #000; border:1px solid #888; color:#0CF;} .Buttons:active {background:#aaa; color:#0ff;}

.image{width:100%;}
.desktop{display:block;}
.mobile{display:none;}
.right {float:right;}
.left {float:left;}
.center {text-align:center;}
.posRelative {position:relative;}

@media screen and (max-width:1280px) {.desktop{display:none;} .mobile{display:block;} }
@media screen and (max-width:480px) {.desktop{display:none;} .mobile{display:block;} }

#Products {display:none; position:absolute; top:58; z-index:100; background:#111; width:100%; border-bottom:1px solid #555; text-shadow:1px 1px #444; text-align:center; padding-top:.5em; padding-bottom:.5em; box-shadow:0 0 10px rgba(20%, 50%, 100%, 1);}
#Products img {width:60%;}
#Products a {font:normal 13px "Trebuchet MS", arial, helvetica, sans-serif; color:#ccc;} #Products a:hover {color:#0CF;}
#Products .inner div{width:16.6%;float:left;}
#Campaigns {display:none; position:absolute; top:58; z-index:9999; background:#111; width:40%; border-bottom:1px solid #555; text-shadow:1px 1px #444; text-align:center; padding-top:.5em; padding-bottom:.5em; box-shadow:0 0 10px rgba(80%, 80%, 80%, 1); margin-left: 50%;}
#Campaigns a {font:normal 16px "Trebuchet MS", arial, helvetica, sans-serif; color:#ccc;} #Campaigns a:hover {color:#ff0; text-decoration:none;}
#Campaigns img {width:86%;}
#Campaigns .inner {width:96%;}

.ui-autocomplete {max-height:300px; overflow-y:auto; overflow-x:hidden;}
.ui-menu-item-wrapper {background:#000;}
.leftmenubutton {display:none;}
@media screen and (max-width:480px) {
	#Products {top:105px;}
	#Products img {width:90%;}
	#Products .inner div{width:33.3%;}
	#Campaigns {top:155px; margin-left: 0; width:100%;}
	#Campaigns img {width:90%;}
	#Campaigns {display:none;}
	.leftmenubutton {display:block;}
}

.Banner img{width:100%;}
.BannerM, .BannerS {display:none;}


.wrapper {padding:2em 0 2em 0; position:relative; z-index:1; }
.wrapper .inner {margin:0 auto;width:1200px;} .wrapper .inner:after {content:''; display:block; clear:both;}
.wrapper .inner1 {
    margin: 0 auto;
    width: 1920px;
    background-image: url(/images/all.jpg);
} .wrapper .inner1:after {content:''; display:block; clear:both;}
.wrapper h1 {
	font-family: 'Fjalla One', sans-serif;
	color: #CCC;
	font-size: 30px;
	padding:5px 45px 5px 45px;
	letter-spacing: 1px;}
.wrapper h2 {color:#fff; font:normal 50px Verdana, Geneva, sans-serif; line-height:1.2em; text-shadow:2px 2px #333;}
.wrapper h3 {color: #fff; font:normal 40px Verdana, Geneva, sans-serif; line-height:1.1em; text-shadow:2px 2px #333; font-family: 'Fjalla One', sans-serif;}
.wrapper h4 {color:#fff; font:normal 32px Verdana, Geneva, sans-serif; line-height:1.1em; text-shadow:2px 2px #333;}
.wrapper h5 {color:#fff; font:normal 24px Verdana, Geneva, sans-serif; line-height:1.0em; text-shadow:1px 1px #333; font-family: 'Fjalla One', sans-serif;}
.wrapper h6 {color:#fff; font:normal 16px Verdana, Geneva, sans-serif; line-height:1.0em; text-shadow:1px 1px #333;}
.wrapper a {color:#5ff; text-decoration:none;}
.wrapper a:hover {color:#0CF; text-decoration:underline; cursor:pointer;}
.wrapper p {line-height:1.0; padding-bottom:1em;}
.wrapper .BigFeature {position:absolute; right:0; bottom:0; margin:auto;}
.wrapper .FeatureRight {left:55%; right:10%;}
.wrapper .Context {margin-top:2%; padding:1% 2%; background:rgba(0,0,0,0.5); border-radius:0.3em; color:#fff; text-shadow:1px 1px #000; line-height:30px; font-family: 'Fjalla One', sans-serif; font-size: 18px;} .wrapper .Context:hover {background:rgba(0,0,0,0.8); text-shadow:1px 1px #333;}
.wrapper .Remark {color:#aaa; font-family: 'Fjalla One', sans-serif;}

@media screen and (max-width:1280px) {.BannerM {display:block;} .BannerL, .BannerS {display:none;}}
@media screen and (max-width:480px) {.BannerS {display:block;} .BannerL, .BannerM {display:none;}}

@media screen and (max-width:1280px) {
	.wrapper .FeatureRight {left:0%; right:0%;}
	.wrapper .inner {width:90%;}
	.wrapper .BigFeature {position:relative;}
	.wrapper h1 {
	font-family: 'Fjalla One', sans-serif;
	color: #CCC;
	font-size: 30px;
	padding:5px 35px 5px 35px;
	letter-spacing: 1px;}
}
@media screen and (max-width:480px) {
	.wrapper {padding:1em 0;}
	.wrapper .Layout {padding-top:78%;}
	.wrapper .inner {width:99%;}
	.wrapper .inner1 {width:99%;}
	.wrapper h1 {font-size:2.2em;}
	.wrapper h2 {font-size:2.0em;}
	.wrapper h3 {font-size:2.5em;padding:10px 10px 0px 20px;}
	.wrapper h4 {font-size:1.4em;}
	.wrapper h5 {font-size:1.2em;}
	.wrapper h6 {font-size:1.1em;}
	.wrapper .Context {padding:10px 10px 0px 20px;}
	.wrapper .BigFeature {position:relative;}
	.wrapper .FeatureRight {left:0;}
}


.wrapper select {background:#000; color:#ccc; border-radius:5px; padding:0.2em;}
.wrapper table {width:100%;}
.wrapper th{background:#111; text-align:center;}
.wrapper th, .wrapper td{font-size:0.9em; border:1px solid #333; padding:0.2em 0.5em;}
.wrapper th[data-sort]{
	cursor:pointer;
	color:#0CF;
}
.wrapper tr:nth-child(even){background:#111;}
.wrapper tr:hover{background:#282828;}
.wrapper a {color:#5ff; text-decoration:none;} .wrapper a:hover {color:#0CF;text-decoration:underline;}
.wrapper p {margin:0.5em 0; color:#ccc;}
@media screen and (max-width:480px) {
	.wrapper th, .wrapper td{font-size:0.8em; padding:0;}
	.wrapper .Notice {font-size:0.8em;}
}

.VideoContainer {text-align:center; position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%;}
.VideoContainer iframe, .VideoContainer object, .VideoContainer embed, .VideoContainer img {position:absolute; top:0; left:0; width:100%; height:100%;}
.VideoContainer .PlayVideo {z-index:5; width:100%; height:100%; position:absolute; background:url('/images/youtube-play.png') no-repeat center; transition:All 0.3s ease-in-out; transform:scale(0.8);}
.VideoContainer .PlayVideo:hover {transform:scale(1.0);}

#statement .Remark {color:#888; font-size:0.9em; line-height:1.2em; clear:both; padding-top:1em;}

.wide-5 {width:5%;}
.wide-16, .wide-16-3 {width:16.6%;}
.wide-20, .wide-20-1, .wide-20-2 {width:20%;}
.wide-25, .wide-25-1, .wide-25-2, .wide-25-3 {width:25%;}
.wide-30, .wide-30-1 {width:30%;}
.wide-33, .wide-33-1, .wide-33-2 {width:33%;}
.wide-40, .wide-40-1 {width:40%;}
.wide-50, .wide-50-1 {width:50%;}
.wide-60, .wide-60-1 {width:60%;}
.wide-70, .wide-70-1 {width:70%;}
.wide-80, .wide-80-1 {width:80%;}
.wide-90, .wide-90-1 {width:90%;}

@media screen and (max-width:1280px) {
	.wide-25-3 {width:33%;}
	.portrait {width:48%;}
	
}
@media screen and (max-width:980px) {
	.wide-20-2 {width:33%;}
	.portrait {width:48%;}
	.grid-15 {width:100%;}
	.fancyNav li{width:100%;}
	
}
@media screen and (max-width:480px) {
	.wide-16-3 {width:33.3%;}
	.wide-20-1, .wide-25-1, .wide-30-1, .wide-33-1, .wide-40-1, .wide-50-1, .wide-60-1, .wide-70-1, .wide-80-1, .wide-90-1 {width:100%;}
	.wide-25-2, .wide-25-3 {width:50%;}
	.wide-20-2, .wide-33-2 {width:49.8%;}
	.grid-15 {width:100%;}
	.portrait {width:100%;}
	.fancyNav li{width:100%;}
}

#footer {background:#111; text-align:center; border-top:1px solid #333; padding-top:1.5em; padding-bottom:1.5em;}
#footer .inner {font-size:0.9em; margin:0 auto; width:1200px; background:#111; }
#footer .inner li {line-height:1.4em; font-size:1em; line-height:1.5em;}
#footer .inner li a {color:#888; text-decoration:none; display:block;}
#footer .inner li a:hover {color:#ff8; text-decoration:underline;}
#footer .inner h6 {font:bold 1.2em tahoma, "Trebuchet MS"; color:#fff; line-height:2em;}
#footer .inner .copyright {padding-top:2em; padding-bottom:1em; color:#777; text-shadow:1px 1px #222; font-size:1em;}
#footer .inner .copyright a {text-decoration:none; color:#5cc;} #footer .inner .copyright a:hover {color:#0CF; text-decoration:underline;}
@media screen and (max-width:1200px) {
	#footer .inner {width:90%;}
}
@media screen and (max-width:480px) {
	#footer .inner {width:100%;}
	#footer {height:5em; padding-top:1em;}
}

.clear {clear:both;}

.transhover {filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}

#GoTop {width:60px; height:60px; position:fixed; right:1em; bottom:1em; z-index:10; background:url(/images/arrow.png); display:none; cursor:pointer;}