@charset "utf-8";
/* CSS Document */

/* //////// SECTION DIVS ////////// */


html {
	background:url(../images/dolphin-sunset.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper { 
	}


#top_blue {
	background-color:#000;
	height:5px;
	}


#header{ 
	
	top: 6;
	padding:0px;
	width:90%;
	
	}


#footer {
	background-color:#000;
	height:17px;
	position: fixed;
    bottom: 0;
    width: 100%;
	color:#CCC;
	text-align:center;
	padding: 10px;
	font-weight:bold;
	text-align:center;
	clear:!important;
	padding:5px; padding-right:4px;
	}
	
	
body {
	overflow:hidden;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}

#header_left {
	float:left;
	width:50%;
	margin: 1px;
	padding: 10px;
	padding-left:80px;
	text-align:center;
}
	
#header_right {
	float:right;
	width:35%;	
	padding:3px;
	/*background-color:#fff; */
	alignment-adjust:middle;
	alignment-baseline:middle;
	text-align:left;
}		
	
#body_section {
	clear:both;
	width:99.5%;
	
	/*background-color:#fff; */
}		

.div2column { /*/////////////////////////////////////////////// set 2 columns //////////////////////////////*/
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
     -moz-column-count: 2; /* Firefox */
     column-count: 2;
	 padding:20px;
	 margin:20px;
	 
    -webkit-column-gap: 100px; /* Chrome, Safari, Opera */
    -moz-column-gap: 100px; /* Firefox */
    column-gap: 100px;	

    -webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
     -moz-column-rule: 2px outset #ff00ff; /* Firefox */
     column-rule: 2px outset #ff00ff;	
	 
 }
 
.div2column .desc {
    background: url("image/slide_desc.png") repeat scroll 0 0 transparent;
    left: 0;
    padding: 0 15px 0 15px;
    position: absolute;
    bottom: 15%;
    max-width: 85%;
	display:inline-block;
}
 
.logo_text { 
	color:#fff;
	font-family:font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
	font-size:2.5em; 
	text-shadow: black 0.1em 0.1em 0.2em; /* shadow */
}
 
	#header_left img {
		margin-left: auto;
  		margin-right: auto;
		width: 8%;
		height:8%;		
	}	
	 
 @media screen and (max-width: 960px) {
	/* body {
		background-color: red;
	} */
	
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
  	
	#footer {
		font-size: 0.8em;
	}
	
	#header{
		width:100%;
		
	}

	#header_right {
		float:right;
		width:40%;
		padding:1px;
		/*background-color:#fff; */
	}
		
	#header_left {
		float:left;
		width:40%;
		margin: auto;
	}	
	
	#header_left img {
		margin-left: auto;
  		margin-right: auto;
		width: 15%;
		height:15%;		
	}		
	.logo_text { 
		color:#fff; 
		font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
		font-size:2em; 
		text-shadow: black 0.1em 0.1em 0.2em; /* shadow */
	}
	

} 
@media screen and (max-width: 768px) {
	/* body {
		background-color: orange;
	} */
	
	#header_right {
		clear:left;
		width:45%;
		padding:1px;
		/*background-color:#fff; */
		 top: 7; 
		 margin-left: auto;
  		margin-right: auto;
	}

	#header_left img {
		width: 18%;
		height:18%;		
	}		
		
	#header_left {
		width:45%;
		margin: auto;
	}	
	#header_right {
		width:85%;
		margin: auto;
	}
	
	.div2column {
		width:80%; 
		}

} 
@media screen and (max-width: 550px) {
	/* body {
		background-color: yellow;
	}
	*/
	#footer {
		font-size: 0.6em;
	}
	
	#header_left {
		width:65%;
		margin: auto;
	}	
	#header_right {
		width:85%;
		margin: auto;	
	}
	#header_left img {
		width: 16%;
		height:16%;		
	}	
	
.logo_text { 
	color:#fff; 
	font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	font-size:1.7em; 
	text-shadow: black 0.1em 0.1em 0.2em; /* shadow */
}	
		
} 
@media screen and (max-width: 320px) {
	/* body {
		background-color: green;
	} */
	#footer {
	 width: 100%;
	}
	
	#header_left {
		width:45%;
		margin: auto;
	}	
	#header_right {
		width:85%;
		margin: auto;
	}	
	#header_left img {
		width: 12%;
		height:12%;		
	}	
	
	.logo_text { 
		color:#fff; 
		font-size:1.3em; 
		text-shadow: black 0.1em 0.1em 0.2em; /* shadow */
	}	
			
}