@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900");
@import url("font-awesome.min.css");

/* Reset */
	html {
		overflow-x:hidden;
	}

	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, strong, 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;
		vertical-align: baseline;
		text-decoration:none;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	body {
		-webkit-text-size-adjust: none;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Desktop + Tablet */

	@media screen and (min-width: 737px) {
				

		.container {
			background: #333333;
			width:100%; height:70em;
		}


	.sd_01 {
		position:absolute;
		display:scroll;
		position:fixed;
		background: #333333;
		top:0%;
		left:0%;
		width:100%; height:4em; z-index:99;		
		box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.25);
	}
	.sd_01 ul {
		position:absolute;
		width:60%; 
		height:8em;
		left:23%;
		top:0.5em;
	}
	.sd_01 li {
		display:inline-block;
		border-bottom:0.1em solid gray;
		padding: 0.2em;
		margin-right:2em;
		text-align:center;
		width:20%;
	}
	.sd_01 a {
		color:#ffffff;
		font-size:80%;
	}
	.sd_01 li:hover a {
		color:#fffaaa;
	}

	.sd_02 {
		position:relative;
		width:60%;
		height:100%;
		top:8em; left:23%;
	}
	.text {
		position:absolute;
		top:0px; left:0px;
		color:#ffffff;
		font-size:1.5em;
		font-weight:500;
		text-shadow:0.2em 0.2em 0.2em #000000;
	}

	.m_01 {
		position:absolute;
		top:7%; left:0px;		
	  	width:100%;
	}
	.ti {
		position:absolute;
	  	width:100%;top:0;
	  	font-size:1.1em;
	  	color:#ffffff;
	}
	.img {
		width:40%;
	  	display: block;
	  	margin: 0px auto;
	}
	.tit {
		position:absolute;
	  	width:100%;
	  	color:#ffffff;
	  	text-align:center;
	  	font-size:0.9em;
	  	top:27em; left: 0px;
	  	line-height:1.5em;
	}

	.ti_02 {
	  	width:100%; height:1em;
	  	font-size:1.1em;
	  	color:#ffffff;
	  	font-weight:500;
	}
	}

/* Tablet Only */

	@media screen and (min-width: 737px) and (max-width: 1200px) {


		.container {
			background: #333333;
			position:relative;
			width:100%; height:55em;
		}

	.sd_01 {
		position:absolute;
		display:scroll;
		position:fixed;
		background: #333333;
		top:0%;
		left:0%;
		width:100%; height:4em; z-index:99;		
		box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.25);
	}
	.sd_01 ul {
		position:absolute;
		width:70%; 
		height:4em;
		left:30%;
		top:0.5em;
	}
	.sd_01 li {
		display:inline-block;
		border-bottom:0.1em solid gray;
		padding: 0.2em;
		margin-right:2em;
		text-align:center;
		width:20%;
	}
	.sd_01 a {
		color:#ffffff;
		font-size:0.8em;
	}
	.sd_01 li:hover a {
		color:#fffaaa;
	}

	.sd_02 {
		position:relative;
		width:80%;
		height:100%;
		top:8em; left:30%;
	}
	.text {
		position:absolute;
		top:0px; left:0px;
		color:#ffffff;
		font-size:1.5em;
		font-weight:500;
		text-shadow:0.2em 0.2em 0.2em #000000;
	}
	.sd_02 p {
		padding-top:0.3em;
	}

	}

/* Mobile Only */

	#navPanel, #titleBar {
		display: none;
	}

	@media screen  and (min-width: 401px) and (max-width: 736px) {

		/* Wrappers */

			.container {
				background: #333333;
				position:relative;
				width:100%; height:83em;
				overflow:hidden;
			}

		/* Logo */
			#logo {
				z-index: 200
				width: 100%;
				text-align: center;
				padding:1em;
				background: #333333
			}

	#nav {
		display:none;
	}
	.sd_01 ul {
		display:none;
	}
	.sd_02 {
	  	position:relative;
	  	width:88%;
	  	height:100%;
	  	top:1em; left:1em;
	}
	#t_info {
		display:none;
	}
	.text {
	  	position:absolute;
	  	top:0px; left:0px;
	  	color:#ffffff;
	  	font-size:1.5em;
	  	font-weight:500;
	  	text-shadow:0.2em 0.2em 0.2em #000000;
	}

	.m_01 {
		position:absolute;
		top:7%; left:0px;		
	  	width:100%;
	}
	.ti {
		position:absolute;
	  	width:100%;top:0;
	  	font-size:1.5em;
	  	color:#ffffff;
	}
	.img_01 {
		width:50%;
	  	position:absolute;
	  	top:-3em; left:0px;
	  	border:0.15em solid #b0b0b0;
	}
	.img_02 {
		width:50%;
	  	position:absolute;
	  	top:-3em; right:0px;
	  	border:0.15em solid #b0b0b0;
	}
	.tit {
	  	width:100%;
	  	position:absolute;
	  	top:84em;
	  	border:0.15em solid #b0b0b0;
	  	color:#ffffff;
	  	text-align:justify;
	  	font-size:0.8em;
	  	padding:0.5em 0.5em;
	  	line-height:1.5em;
	}
}

/* 360*/

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

		/* Wrappers */

			.container {
				background: #333333;
				position:relative;
				width:100%; height:50em;
			}

	#nav {
		display:none;
	}
	.sd_01 {
		display:none;
	}
	.sd_02 {
	  	position:relative;
	  	width:90%;
	  	height:100%;
	  	top:2em; left:1em;
	}
	#t_info {
		display:none;
	}
	.text {
	  	position:absolute;
	  	top:0px; left:0px;
	  	color:#ffffff;
	  	font-size:1.5em;
	  	font-weight:500;
	  	text-shadow:0.2em 0.2em 0.2em #000000;
	}

	.m_01 {
		position:absolute;
		top:5%; left:0px;		
	  	width:100%;
	  	height:37em;
	}
	.ti {
		position:absolute;
	  	width:100%;top:0;
	  	font-size:1.5em;;
	  	color:#ffffff;
	}
	.img_01 {
		width:100%;
	  	position:absolute;
	  	top:-3em; left:0px;
	  	border:0.15em solid #b0b0b0;

	}
	.img_02 {
		width:100%;
	  	position:absolute;
	  	top:17em; left:0px;
	  	border:0.15em solid #b0b0b0;

	}
	.tit {
	  	width:100%;
	  	position:absolute;
	  	top:45em;
	  	border:0.15em solid #b0b0b0;
	  	color:#ffffff;
	  	text-align:justify;
	  	font-size:0.8em;
	  	padding:0.5em 0.5em;
	  	line-height:1.5em;
	}
}