/* THIS CSS SHARE USE FOR MANY OTHER PAGES */

html{
	height:100%;
	-webkit-font-smoothing: antialiased;
}

@font-face {
  font-family:Helvetica;
  src: url('../font/HelveticaNeueRoman.otf');
}

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

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

body{
	height:100%;
	font-family:Helvetica, Arial, Verdana;
	color:#333;
	background-color:#FFF;
	font-size:17px;
	line-height:25px;
	text-decoration:none;
	margin: 0px;
	background-position:top;
	-webkit-text-size-adjust: none;
}

p{
	margin:0px;
}

.clickable{
	cursor:pointer;
}

.clickable:hover{
	color:#318FA5;
}

.clear {
	clear: both;
}

a{
	color:#F90;
}

a:hover{
	color:#F63;
}

.bold{
	font-weight:bold;
}

img{
	border:none;
}

h1{
	font-size:50px;
	font-family:HelveticaLight, Arial, Verdana;
	font-weight:normal; margin:0px; margin-bottom:15px;
	line-height:50px;
}

h2{
	font-size:20px; color:#333;
	font-weight:normal; 
	line-height:20px;
	margin-top:0px;
}

input{
	border: #DDD 1px solid;	height:15px; padding:4px;
	background-color:#FFF; outline: none; font-family:Helvetica, Arial, Verdana;
}

input:focus{
	background-color:#FFFFFF;
	text-shadow: white 0 0 30px;
	outline: none;
}

input:hover{
	background-color:#FFFFFF;
}

select{
	border: #CCC 1px solid;
	color:#333;
	height:25px;
	padding:2px;
	background-color:#FFF;
}

input[type="radio"], input[type="checkbox"] {
	border:none; border-width:0px; margin:0px; padding:0px;	margin-right:4px;
	background-color:transparent; 
}

.checkbox {
	border:#666 1px solid; margin:0px; padding:0px; margin-right:4px;
	background-color:#FFF;
}

input[type="radio"]:hover {
	border:none; border-width:0px;
	background-color:transparent;
}

input[type="image"] {
	border:none;
	border-width:0px;
	padding:0px;
	background-color:transparent;
}

input[type="textarea"]{
	outline: none;
}

textarea{
	resize:none;
	padding:5px;
	border:#E5E5E5 1px solid;
	height:17px;
	outline: none;
}

textarea:focus{
	outline: none;
}

.btn{
	font-size:20px; color:#FFF; padding: 10px 10px 10px 10px;	 height:25px; 
	-moz-border-radius: 4px; border-radius: 4px; cursor:pointer; text-align:center;	
	background: #6d6d6d; /* Old browsers */
	background: -moz-linear-gradient(top, #6d6d6d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #6d6d6d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #6d6d6d 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #6d6d6d 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(to bottom, #6d6d6d 0%,#000000 100%); /* W3C */
	text-shadow:none;
}

.btn:active{
	box-shadow:inset 1px 1px 4px #CCC; -moz-box-shadow:inset 1px 1px 4px #CCC; -webkit-box-shadow:inset 1px 1px 4px #CCC;
}

.btn a{
	font-size:12px;	font-weight:bold;
}

.floatL{
	float:left;
}

.floatR{
	float:right;
}

.main, .container{
	width:100%; height:100%;
}

.posFix{
	position:fixed;
}

.header{
	background-color:rgba(255,255,255,0.9);
	position:absolute;
	z-index:1;
	width:100%;
}

.header .wrapper{
	padding:25px 35px 25px 35px;
}

.logo{
	background:url(../images/logo.png) no-repeat 0 0;
	background-size:cover;
	width:249px; height:42px; 
	float:left;
}

.nav{
	float:right;
	padding-top:12px;
}

.nav div{
	float:left;
	margin-left:30px;
	font-size:20px;
	cursor:pointer;
}

.keyvisual{
	height:600px;
	background:url(../images/highlight3.jpg) no-repeat center center;
	background-size:cover;
	position:relative;
    }

.slogan{
	font-size:47px;
	width:450px;
	font-family:HelveticaBold, Arial, Verdana;
	color:#FFF;
	position:absolute;
	top:150px; left:130px;
	line-height:50px;
	opacity:0;
}

.section{
	background:url(../images/section_bg.png) repeat-x top;
	padding:50px;
}

.overview_box{
	width:27%; 
	font-size:14px;
	padding:0px 3% 0px 3%;
	text-align:center;
	float:left;
	color:#666;
	line-height:17px;
}

.overview_box img{
	width:100%; height: auto;
}

.borderR{
	border-right:1px solid #DDD;
}

.ruler{
	border-bottom:1px solid #DDD;
	padding-top:20px;
	margin-bottom:20px;
}

.btn_more{
	width:50px; margin:20px auto;
	padding:5px 10px 2px 10px;
	border:1px solid #CCC;
	cursor:pointer;
	line-height:20px;
	text-align:center;
}

.btn_more:hover{
	background-color:#333;
	color:#FFF;
}

.content{
	margin:0 auto;
	margin:0px 7% 0px 7%;
	font-size:17px;
}

h3{
	font-size:33px;
	font-family:HelveticaBold, Arial, Verdana;
	margin:5px 0 30px 0;
	line-height:33px;
}

.content .floatL{
	width:45%;
	margin-right:5%;
}

.content .floatR{
	width:50%;
}

.content img{
	width:90%; height: auto;
}

.smalltext{
	font-size:14px;
	line-height:17px;
	font-family:Helvetica, Arial, Verdana;
	margin-top:10px;
}

.video2 { display: block; background: #eee; padding: 10px; }

.video {
	font-size:47px;
	width:800px;	
	height:450px;
	font-family:HelveticaBold, Arial, Verdana;
	color:#FFF;
	position:absolute;
	top:120px; left:200px;
	line-height:50px;
	opacity:0;
}

@media screen and (max-width: 1024px) 
{ 
	.video {		
		margin:0 auto;
		display: block; 
		background: #eee; 
		padding: 5px 0px; 				
		font-family:HelveticaBold, Arial, Verdana;
		color:#FFF;
		position:relative;
		top:110px; 		
		left:0px !important;		
		line-height:0px;
		opacity:0;
	}
}
	

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

	.section{
		padding:20px;
	}
	
	.content{
		margin:0 auto;
		margin:0px;
	}
	
	.overview_box{
		font-size:13px;
	}
}

@media screen and (max-width: 650px) {
	
	.content .floatL{
		width:100%;
		margin-right:0%;
		float:none;
		margin-bottom:15px;
	}
	
	.content .floatR{
		width:100%;
		margin-right:0%;
		float:none;
	}
	
	.overview_box{
		width:100%; 
		padding:0px;
		float:none;
		padding-bottom:0px;
	}
	
	.overview_box .icon{
		width:80%; margin:0 auto;
	}
	
	.borderR{
		border-right:none;
		border-bottom:1px solid #DDD;
	}
	
	.header .wrapper{
		padding:20px;
	}
	
	.keyvisual{
		height:600px;
		background:url(../images/highlight3.jpg) no-repeat center center;
		position:relative;
	}
	
	.slogan{
		font-size:33px;
		width:280px;
		top:150px; left:110px;
		line-height:33px;
	}
	
	h1{
		font-size:40px;
		line-height:40px;
	}
	
	.logo{
		float:none;
	}
	
	.nav{
		float:none;
		padding-top:8px;
	}
	
	.nav div{
		float:left;
		margin-left:0px;
		margin-right:23px;
		font-size:16px;
		cursor:pointer;
	}
	
	h3{
		font-size:22px;
	}
}

@media screen and (max-width: 480px) { 
		
	.keyvisual#home 
	{ 
		height:350px !important;  
	}
	
	.video {				
		height:0px !important;  
		margin:0 auto;
		display: block; 
		background: #eee; 
		padding: 5px 0px; 				
		width:100%;
		font-family:HelveticaBold, Arial, Verdana;
		color:#FFF;
		position:relative;
		top:140px; 		
		left:0px !important;		
		line-height:0px;
		opacity:0;
	}
	
}