﻿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, 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, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit;}
html, body { height:100%;}
body {
	line-height:1;
	background-image:url(images/index.jpg);
	background-repeat: no-repeat;
	background:#000;
}
ol, ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
table th {background:#181818;color:#ccc;padding:2px 3px;}
table td {
	color:#999;
	padding:2px 3px;
	background-color: #333;	
	
}
table tbody tr:nth-child(2n) {background: #333;}
body {-webkit-text-size-adjust:none;}
*:link, *:visited, *:hover, *:active, *:focus {-o-transition:color .20s linear, background-color .20s linear, border-color .20s linear;-webkit-transition:color .20s linear, background-color .20s linear, border-color .20s linear;-moz-transition:color .20s linear, background-color .20s linear, border-color .20s linear;transition:color .20s linear, background-color .20s linear, border-color .20s linear;}
b {font-weight:bold;}
p {
	padding-top:1em;
	padding-bottom:1em;
	color: #FFF;
}


@media screen and (max-width:480px) { #banner {background-position:45% top;background-size:300%;} }
#sHeader {
	background-color:rgba(0, 0, 0, 0.8);	
	height:55px;
	line-height:55px;
	cursor:default;
	position:fixed;
	left:0;
	top:0;
	z-index:10001;
	width:100%;
	}
#Logo {
	width:112px;
	height:46px;
	position:absolute;
	background:url(images/asrock.png) no-repeat;
	z-index:10010;
	left: 30px;
}

#Menu {
	display:none;
	font-family: "Fjalla One", Arial, Helvetica, sans-serif;
	
}


	
#sHealing{
	
	height:600px;
	}	
		
#sSpecification{
	background-color:#000;
	}
	
	
#nav {float:right;display:block;font-family: "Fjalla One", Arial, Helvetica, sans-serif;}
#nav li{
	position:relative;
	float:left;
	color:#fff;
	display:block;
	padding:0 20px;
	height:55px;
	text-decoration:none;
	background-color: #000;
	}
#nav li:hover {
	cursor:pointer;
	color: #fff;
	background-color: #666;
}



.grid {
	position: relative;
	clear: both;
	margin: 0 auto;	
	max-width: 300px;
	list-style: none;
	
}
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	height: auto;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}
/*-----------------*/
/***** Selena *****/
/*-----------------*/


figure.effect-selena img {
	opacity: 0.95;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
	-webkit-transform: scale3d(0.95,0.95,1);
	transform: scale3d(0.95,0.95,1);
}








@media screen and (max-width: 1500px) { #nav li {padding:0 10px;}}
@media screen and (max-width: 1024px) {
	#Menu {display:inline-block;background:#333;padding:0 1em;color: #fff;float:right;font-size:1.1em;cursor:pointer;}
	#nav {display:none;position:absolute;width:100%;margin-top:56px;}
	#nav li {float:none;}
}
@media screen and (max-width: 480px) {
	#Logo {width:112px;}
}

.Banner img{width:100%;}
.BannerM, .BannerS {display:none;}
@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;}}


.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 h1 {
	color:#919191;
	line-height:1.2em;
	text-shadow:2px 2px #000;
	text-align:left;
	padding-top:1em;
	padding-bottom:0.2em;
	font-size: 32px;
	font-family: 'Fjalla One', sans-serif;
}
.wrapper h2 {
	color:#555;
	font-family: 'Fjalla One', sans-serif;	
	line-height:1em;
	padding:0px 0px 5px 20px;
	padding-top:1em;
	padding-bottom:0.2em;
	font-size: 20px;
	text-align:left;
}
.wrapper h3 {
	color:#fff;
	text-align:left;
	padding:10px 20px 10px 10px;
	font-size: 22px;
	font-family: 'Fjalla One', sans-serif;
	}
.wrapper h4 {
	border-bottom:1px solid #D4D4D4;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:90px 20px 10px 30px;
	font-size: 25px;
		
}
.wrapper p, .wrapper li {
	color:#fff;
	line-height:1.5em;
	font-family: 'Fjalla One', sans-serif;
	}
.wrapper img {
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	border-right: 1px solid #333;
	border-left: 1px solid #333;
	padding:10px 20px 10px 30px;	
	max-width: 300px;
	display: block;
		
}




.grid-15 {
	width:33%;float:left;
	margin-top:10px;
	height: 100%;	
}



.grid-15 .image{
	width:100%;
	max-width: 300px;
	display:block;
	margin:0px auto;
	vertical-align: bottom;
	
	opacity: 0.75;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	
	}
	
.grid-15 .image:hover {
	-webkit-transform: scale3d(0.95,0.95,1);
	transform: scale3d(0.95,0.95,1);
	background-color:#0C0C0C;
	opacity: 0.99;
}


.wrapper li {list-style:circle;margin-left:1.2em;}
.wrapper p a, .wrapper td a, .wrapper li a {color:#5ff;text-decoration:none;}
.wrapper p a:hover, .wrapper td a:hover, .wrapper li a:hover {color:#ff0;text-decoration:underline;}
.wrapper input[type="submit"], .wrapper input[type="reset"], .wrapper input[type="button"], .wrapper button, .wrapper .button {-moz-appearance: none;-webkit-appearance: none;-ms-appearance: none;appearance: none;border-radius: 2.5em;border: 0;cursor: pointer;display: inline-block;font-weight: 700;height: 2.85em;line-height: 2.95em;min-width: 10em;margin:0.5em;padding: 0 1.5em;text-align: center;text-decoration: none;white-space: nowrap;background-color: #555;border:1px solid #666;box-shadow: none;color: #eee !important;}
.wrapper input[type="submit"].icon:before, .wrapper input[type="reset"].icon:before, .wrapper input[type="button"].icon:before, .wrapper button.icon:before, .wrapper .button.icon:before { color: #bbb; }
.wrapper input[type="submit"]:hover, .wrapper input[type="reset"]:hover, .wrapper input[type="button"]:hover, .wrapper button:hover, .wrapper .button:hover { background-color: #777;text-shadow:1px 1px #000; border:1px solid #888; }
.wrapper input[type="submit"]:active, .wrapper input[type="reset"]:active, .wrapper input[type="button"]:active, .wrapper button:active, .wrapper .button:active { background-color: #444;}
@media screen and (max-width: 1280px) {
	.wrapper > .inner {width: 100%;}
	.grid-15 {width:48%;}
}
@media screen and (max-width: 980px) {
	.wrapper > .inner {width: 100%;}
	.grid-15 {width:100%;}
}
@media screen and (max-width: 480px) {
	.wrapper {padding:1em 0;}
	.wrapper > .inner {width: 50%;}
	.grid-15 {width:100%;}
}


.grid-1 {
	width:100%;
	background-color: #000;
	height: 100%;	
}
.grid-1 .image-L {
	width:100%;
	max-width: 1020px;
	float:left;
	display:block;
	margin: 10px 40px 10px 30px;	
}
.grid-1 .image-L1 {
	width:100%;
	max-width: 850px;
	float:left;
	display:block;
	margin: 10px 40px 10px 30px;	
}
.grid-1 p{
	color:#CACACA;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:20px 20px 10px 30px;
	font-size: 15px;
	line-height: 15px;
}



.grid-2 {float:left;}
.grid-2 .image-2{
	width: 100%;
	max-width: 1200px;
	display: block;
	margin: auto;
	float: left;
	}
	
.grid-2 .image-1{
	width:100%;
	max-width: 900px;
	display:block;
	margin: auto;
	float:left;	
	padding:20px 20px 10px 20px;
}



	
.grid-5{width:100%;}
.grid-5 .image{
	width:100%;
	max-width: 230px;
	display:block;
	margin: auto;
	}
	
	
.grid-6 {
	width:100%;
	float:left;
}
.grid-6 .image{
	width:100%;
	max-width: 200px;
	display:block;
	margin: 10px 10px 2px 140px;
	}
.grid-7 {
	width:100%;
	float:left;
}
.grid-7 p{
	color:#ccc;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	margin: 2px 300px 10px 140px;
	font-size: 12px;
	line-height: 15px;
}	
	
@media screen and (max-width: 980px) {
	
	.grid-2{width:100%;}
	.grid-1{width:100%;}
}
@media screen and (max-width:736px) {
	.grid-2{width:100%;}
	.grid-1 {width:100%;}
	.grid-5 {width:100%;}
}
@media screen and (max-width: 480px) {
	.grid-1, .grid-2{width:100%;}
	.grid-5 {width:100%;display:block;margin: auto;}
}

.image {border-radius: 0;border: 0;display: inline-block;position: relative;}
.image img {border-radius: 0;display: block;}
.image.left, .image.right {max-width: 50%;}
.image.left img, .image.right img {width: 100%;}
.image.left {float: left; padding: 0 1.5em 1em 0; top: 0.25em;}
.image.right {float: right; padding: 0 0 1em 1.5em; top: 0.25em;}



#footer {background-color: #333;color: rgba(255, 255, 255, 0.75);text-align: center;}
#footer .inner {
	padding: 2em 0 1em 0;
	border-top: solid 1px rgba(255, 255, 255, 0.1);
	margin: 0 auto;
	width: 75%;
	font-family: Verdana, Geneva, sans-serif;
	color: #666;
}
@media screen and (max-width: 980px) {
	#footer .inner {padding: 5em 0 3em 0;width: 100%;}
}
@media screen and (max-width: 736px) {
	#footer .inner {padding: 3em 0 1em 0;}
}
@media screen and (max-width: 480px) {
	#footer .inner {padding: 2em 0 0.1em 0;}
}

.transhover {filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}

.Spec1 {width:80%;margin:0 auto;}
.Spec1 tr td{
	vertical-align:middle;
	background-color:#ccc;
	color:#000;
	border-bottom:1px solid #000;
	border-right: 1px solid #000;
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0.39, rgb(189,189,189)), color-stop(0.7, rgb(224,224,224)));
	background:-moz-linear-gradient(center bottom,rgb(189,189,189) 39%,rgb(224,224,224) 70%);
	text-align: center;
	padding: 10px 0 5px 0;
	font-size:12px;
	font-family: "Fjalla One", Arial, Helvetica, sans-serif;
	line-height:1.6em;
}
.Spec1 tr:nth-child(even) td{	background-color:#555;color:#f0f0f0;border-bottom:1px solid #444;background:-webkit-gradient(linear,left bottom,left top,color-stop(0.39, rgb(85,85,85)),color-stop(0.7, rgb(105,105,105)));background:-moz-linear-gradient(center bottom,rgb(85,85,85) 39%,rgb(105,105,105) 70%);}

.Spec1 h2{color:#000;font:400 2em "Fjalla One"; text-shadow:2px 2px #ccc; line-height:1em;padding:0.2em auto 1em;padding-top:0.2em;padding-bottom:0.2em;}

.concept1 {
	color:#eee;
	border-left:1px solid #888;
	margin-top:20em;
	padding:1.5em 0 1em 1em;
	line-height:1.5em;
	font-size:1em;
	font-family: Arial, Helvetica, sans-serif;
}
.concept2 {
	width:100%;
	border-top:1px solid #555;
	border-bottom:1px solid #555;
	background:#333;
	color:#eee;
}

.concept2 p{
	width:90%;
	font-size:1em;
	line-height:1.5em;
	font-family: Arial, Helvetica, sans-serif;
	
	text-shadow:1px 1px #000;
	text-align:left;
	display:block;
	margin: auto;
}


#GoTop {width:80px;height:80px;position:fixed;right:1em;bottom:1em;;z-index:10005;background:url(images/arrow.png);display:none;cursor:pointer;}

@media screen and (max-width:980px) {
	.concept1 {margin-top:8em;}
	.concept2 { padding:3em 0;}
}
@media screen and (max-width:480px) {
	.Spec1 {width:99%;}
	.concept1 {margin-top:1em;margin-bottom:1em;}
	.concept2 { padding:3em 0;}
}
