/*******************************************************************************************/
/*CSS Reset*/
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%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height:18px;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*******************************************************************************************/
/*Globle*/
@font-face	{
	font-family:Quicksand;
	src: url(../fonts/Quicksand-Regular.ttf);
}
@font-face	{
	font-family:quicksand-bold;
	src: url(../fonts/Quicksand-bold.ttf);
}
*		{
	margin:0; 
	padding:0;
	font-family: 'Quicksand', sans-serif;
}
h1	{
	font-size:18px;
	text-align:center;
	padding:0px;
	margin:8px auto;
	width:300px;
	color:#ffffff;
	text-shadow: 0px 3px 4px rgb(109, 109, 109);
}
h2, h3	{
	font-size:18px;
	text-align:center;
	padding:10px;
	color:#484848;
}
p	{
	font-size:16px;
	text-align:justify;
	padding:5px 10px;
	color:#8c8c8c;
}
b	{
	color:#8c8c8c;
}
span	{
	font-size:18px;
	text-align:left;
	color:#484848;
	font-weight:bold;
}
strong	{
	text-align:justify;
	color:#333333;
	font-size:100%;
	padding:5px 10px;
}
small	{
	text-align:justify;
	color:#808080;
	font-size:50%;
	padding:5px 10px;
}
.title-01 {
	font-size:125%;
	color:#4A7286;
	text-align:center;
}
.title-02 {
	font-size:125%;
	color:#4A7286;
	text-align:center;
}
ol	{
	list-style-position:outside;
	color:#8c8c8c;
}
ol li	{
	margin:5px auto;
	margin-left:30px;
}
img {
    width: 100%;
  	display:block;
  	margin:0 auto;
}
.bg-color-green	{
	background-color:#b1e2b2;
}
.bg-color-amber	{
	background-color:#e2dfb1;
}
.bg-color-red	{
	background-color:#e2c4b1;
}
/*******************************************************************************************/
/*Body-Wrapper*/
body	{
}
#outer-wrapper	{
	width:100%;
	overflow:hidden;
	margin:0 auto;
}
#inner-wrapper	{
	width:100%;
	overflow:hidden;
	margin:0 auto;
}
/*******************************************************************************************/
/*Header*/
header	{
	width:100%;
	height:auto;
	overflow:hidden;
	padding:5px 0;
	border-bottom:1px #7b7b7b solid;
	position:relative;
	-webkit-animation: myAnimation .5s; /* Safari and Chrome */
	-moz-animation: myAnimation .5s; /* Firefox */
	-ms-animation: myAnimation .5s; /* Internet Explorer */
	-o-animation: myAnimation .5s; /* Opera */
	animation:  myAnimation .5s;
	background-color: #b4b4b4;
/*	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23929292' fill-opacity='0.44' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");*/
}

@keyframes myAnimation {
	 from {left:-100%; top:0%;}
	to   {left:0%; top:0%;}
}
/* Firefox */
@-moz-keyframes myAnimation {
	 from {left:-100%; top:0%;}
	to   {left:0%; top:0%;}
}
/* Safari and Chrome */
@-webkit-keyframes myAnimation {
	 from {left:-100%; top:0%;}
	to   {left:0%; top:0%;}
}
/* Internet Explorer */
@-ms-keyframes myAnimation {
	 from {left:-100%; top:0%;}
	to   {left:0%; top:0%;}
}​
/* Opera */
@-o-keyframes myAnimation {
	 from {left:-100%; top:0%;}
	to   {left:0%; top:0%;}
}
/*******************************************************************************************/
/*Nav*/
nav	{
	display:block;
	margin:auto;
}
nav a	{
	display:block;
	text-decoration:none;
	color:inherit;
	padding:8px;
	text-transform: capitalize;			
}
nav ul	{
	font-size:14px;
	overflow:hidden;
	color:#8c8c8c;
	padding:0;
	text-align:center;
	margin:0;
}
nav ul li	{
	display:inline-block;
	margin:auto;					
	background: #ffffff; 
	background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); 
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );						
	width:40%;
	border-radius:3px;
	border:1px #b4b4b4 solid;
	margin:4px 4px;
	box-shadow:none;
    transition:box-shadow .3s;
}
nav ul li:hover		{
	background-color:#b3b3b3;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.95);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.95);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.95);
}
nav ul li:active	{
	box-shadow:0px 2px 12px #000 inset;
	webkit-box-shadow:0px 2px 12px #000 inset;
}
footer nav ul	{
	font-size:10px;
	margin:1.5% auto;
}
footer nav ul li	{
	width:30%;
	margin:4px;
}
footer nav a	{
	padding:3px;
}
.link	{
	display:inline-block;
	margin:10px;
	color:#f3f3f3;
	font-weight:bold;
	text-shadow:none;
    transition:text-shadow .3s;
}
.link-area a	{
	margin:5px 20px;
}
.link-area {
	display:block;
	overflow:hidden;
	background-color:#5a88a1;
	text-align:center;
}
.link:hover	{
	text-shadow: 0px 4px 3px #292828;
}
.link:active	{
	text-shadow:none;
}

/*******************************************************************************************/
/*Ad*/
.ad-banner	{
	float:none;
	margin:5px auto;
	max-width:336px;
	height:280px;
	text-align:center;
}
.ad-mid	{
	float:none;
	margin:5px auto;
	max-width:336px;
	height:280px;
	text-align:center;
}

/*******************************************************************************************/
/*Image+Nav*/
.img	{
	display:block;
	width:90%;
	height:auto;
	margin:10px auto;
	border:1px #b4b4b4 solid;
}
.img-menu	{
	width:98%;
	margin:5px auto;
	padding:5px;
	background-color:#ffffff;
	position:relative;
	-webkit-animation: myAnimationImg .5s; /* Safari and Chrome */
	-moz-animation: myAnimationImg .5s; /* Firefox */
	-ms-animation: myAnimationImg .5s; /* Internet Explorer */
	-o-animation: myAnimationImg .5s; /* Opera */
	animation:  myAnimationImg .5s;
}

@keyframes myAnimationImg {
	 from {left:0%; top:-300px;}
	to   {left:0%; top:0px;}
}
/* Firefox */
@-moz-keyframes myAnimationImg {
	 from {left:0%; top:-300px;}
	to   {left:0%; top:0px;}
}
/* Safari and Chrome */
@-webkit-keyframes myAnimationImg {
	 from {left:0%; top:-300px;}
	to   {left:0%; top:0px;}
}
/* Internet Explorer */
@-ms-keyframes myAnimationImg {
	 from {left:0%; top:-300px;}
	to   {left:0%; top:0px;}
}​
/* Opera */
@-o-keyframes myAnimationImg {
	 from {left:0%; top:-300px;}
	to   {left:0%; top:0px;}
}
/*******************************************************************************************/
/*Content*/
.content-01 {
	width:100%;
	height:auto;
	overflow:hidden;
}
.content-02 {
}
.content-03 {
	width:100%;
	height:auto;
	overflow:hidden;
}
.content-05 {
	width:100%;
	height:auto;
	margin:8px auto;
	overflow:hidden;
	border:1px #cccccc solid;
}
.content-l1-02 {
	width:73%;
	height:250px;
	overflow:hidden;
	float:right	;
	background-color:#e2dfb1;
}
.content-list p	{
	margin:5px auto;
	overflow:hidden;
	border-bottom:1px #dadada solid;
}

/*******************************************************************************************/
/*Box*/
.box-one3rd	{
	display:block;
	width:95%;
	float:none;
	margin:5px auto;
	min-height:auto;
	overflow:hidden;
}
.box-right	{
	display:block;
	width:90%;
	height:auto;
	margin:5px auto;
	float:none;
	overflow:hidden;
}
.box-left	{
	display:block;
	width:100%;
	height:auto;
	margin:5px;
	float:none;
	overflow:hidden;
}
#clock-flag	{
	display:block;
	width:auto;
	height:auto;
	overflow:hidden;	
}
#flag	{
	display:block;
	width:250px;
	height:auto;
	overflow:hidden;
	float:right;
	margin:10px;
}
#clock-wrapper	{
	display:block;
	width:100%;
	overflow:hidden;
	float:left;
}
#clock-wrapper p {
	text-align:center;
	font-size:130%;	
}
p#clock {
	font-size:350%;
}
.logo-menu	{
	width:100%;
	float:none;
	margin-right:auto;
}
/*******************************************************************************************/
/*Gallary*/
.img-map	{
	display:block;
	width:96%;
	height:auto;
	padding:5px;
	margin:10px auto;
	border:1px #868686 solid;
	border-radius:40px;
	overflow:hidden;
}
.img-map img	{
	display:block;
	border-radius:35px;
	margin:0;
	padding:0;
}
.img-banner img	{
	width:100%;
	height:auto;
}

/*******************************************************************************************/
/*Footer*/
footer	{
	border-top:1px #cccccc solid;
	min-height:60px;
}
/*******************************************************************************************/
/*******************************************************************************************/
/*DESKTOP*/
@media screen and (min-width: 640px){
h1	{
	font-size:22px;
	margin:15px auto;
}
/*******************************************************************************************/
/*Ad*/
.ad-banner	{
	margin:5px 0;
	padding-top:10px;
	height:100px;
	min-width:100%;
	clear:both;
	overflow:hidden;
	text-align:center;
}
.ad-mid	{
	float:right;
}
/*******************************************************************************************/
/*Nav*/
.nav-l2-01 li	{
	width:31%;
}

.ad-mid	{
	float:right;
	width:336px;
}
.img-menu	{
	width:350px;
	background-color:#ffffff;
	border:1px #cccccc solid;
	border-radius:3px;
	float:left;
	margin-right:10px;
}
content-03	{
	float:left;
	
}
content-01	{
	float:right;
	
}
footer nav ul li	{
	width:90px;
}
/*Box*/
.box-one-half	{
	height:580px;
}
@media screen and (max-width: 896px){
.box-one-half	{
	height:630px;
}
}
@media screen and (max-width: 675px){
.box-one-half	{
	height:680px;
}
}
.box-one3rd	{
	display:block;
	width:33%;
	float:left;
	margin:5px .1%;
	min-height:1000px;
}
@media screen and (min-width: 780px){
.box-one3rd	{
	min-height:880px;
}
}
@media screen and (min-width: 890px){
.box-one3rd	{
	min-height:750px;
}
}
.box-right	{
	width:50%;
	height:auto;
	margin:5px;
	float:right;
}

}
/*******************************************************************************************/
/*******************************************************************************************/
@media screen and (min-width: 1000px){
#inner-wrapper	{
	width:1000px;
}
/*******************************************************************************************/
/*Box*/
.box-one3rd {
	width:33%;
	float:left;
	margin:5px .1%;
	min-height:650px;
}
.box-right	{
	width:440px;
}
.box-left	{
	display:block;
	width:400px;
	height:auto;
	margin:5px;
	float:left;
	overflow:hidden;
	border:1px #9e9e9e solid;
	border-radius:10px;
}
.logo-menu	{
	width:350px;
	float:left;
	margin-right:10px;
}

/*******************************************************************************************/
/*Tables*/
.table-01	{
	width:97%;
	float:none;
	margin:5px auto;
}
/*******************************************************************************************/
/*Lists*/
.list-02 	{
	width:93%;
}
/*******************************************************************************************/
/*Gallary*/
.img-banner	{
	position:relative;
	overflow:hidden;
	height:150px;
}
.img-banner img	{
	position:absolute;
	bottom:0;
}
/*******************************************************************************************/
/*Footer*/
footer nav ul li	{
	width:200px;
}
footer nav ul li a	{
	font-size:100%;
}

}