/*<!--==============================================================================================

CONTENT ATTRIBUTIONS

The team members utilize their talents in web development and photo-editing. These people used a high fidelity storyboard on drafting this third generation informational website. Usability goals and experience was quite considered in the making of this site.
The team used an image editing software to make the logos and the background of the site.
All pictures used in the site are captured by the member's camera.
Alongside with the use of an image edition software, there was a use of a brush in with this link which says that anyone can use his awesome work and thus, we do not credit anything in the creation of this brush. [Link: http://www.brusheezy.com/terms]
													Authors: Karl Yu & Janine Janer
=============================================================================================-->*/
*{
margin:0px;
padding:0px;
}

@font-face {
font-family: font_italics;
src: url('font1.woff');
}@font-face {
font-family: font_italics1;
src: url('font2.woff');
}@font-face {
font-family: font_italics2;
src: url('font3.woff');
}@font-face {
font-family:bebas;
src: url('bebasneue.otf');
}

body{
background:#eaeae7;
font-family:open-sans,tahoma;
	background-image:url('bg.png');
	background-repeat:repeat;
overflow:hidden;
width:100%;	
	width:100%;
}
#main_wrapper{
	width:100%;	
	width:100%;

}

#img1{
	
}
header {
	font-family:font_italics;
	height: 65px;
	margin:0 0px;
	background: #3c3a37;
	position: fixed;
	width: 100%;
	z-index: 90;
	transition:all 1.0s ease-in-out;
	-webkit-transition:height 1s, opacity 2s;
	-webkit-border-radius:1px;
	-moz-transition:height 1s, opacity 2s;
	-moz-border-radius:1px;
	
	}
#seal h4{
display:inline-block;
}	
footer{
	width: 100%;
	z-index: 90;
	height:30px;
	position: fixed;
	background: #3c3a37;
	bottom:0px;
}
#foot  li{
font-family:open-sans,tahoma;
	display:inline-block;

}
#foot {
	display:-webkit-box;
	display:-moz-box;
		-webkit-box-orient:horizontal;
	-webkit-box-direction:reverse;
	-webkit-box-pack:end;
	-moz-box-orient:horizontal;
	-moz-box-pack:end;
	right:5px;
	bottom:1px;
	top:3px;
	position:relative;
}

#seal{
	margin:2px 10px;
	z-index:99;
}
.header1{
	position:left;
	margin:5px 5px;
	padding:8px 8px;
}
h1 { 
	font-size: 22pt;
	letter-spacing:1.5px;

 }
h2 {
	font-size: 12px;
	line-height: 0px; 
	letter-spacing:2px; 
	text-align:left;
 }
 
.italics{
font-family:font_italics;
}

.italics1{
font-family:font_italics1;
}
.italics2{
font-family:font_italics2;
}


#section1{
	margin: 30px 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: #f5f5f5;
	opacity:.69;
	-webkit-border-radius:5px;
	-webkit-box-shadow:#dbe5e8 -6px 6px 6px  ;
	-moz-border-radius:5px;
	-moz-box-shadow:#dbe5e8 -6px 6px 6px  ;
	
}#section11{
	margin: 30px 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: #f5f5f5;
	opacity:1;
	-webkit-border-radius:5px;
	-webkit-box-shadow:#dbe5e8 -6px 6px 6px  ;
	-moz-border-radius:5px;
	-moz-box-shadow:#dbe5e8 -6px 6px 6px  ;
	
}

#slide_container img{
	position:relative;
	top:100px;
}
.section2{
	top: 150px;
	left:560px;
	width: 350px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
	
}.section21{
	top: 100px;
	left:100px;
	width: 350px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
}.section211{
	top: 150px;
	left:650px;
	width: 350px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
}.section212{
	top: 210px;
	left:500px;
	width: 350px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
}.section213{
	top: 180px;
	left:1000px;
	width: 350px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
}
}.section212{
	top: 210px;
	left:500px;
	width: 350px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
}
}.section212{
	top: 210px;
	left:500px;
	width: 350px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
}
.sectionp2{
	top: 100px;
	left:100px;
	width: 750px;
	height: 250px;
	position: absolute;
	padding: 20px 20px;
	z-index:5;
	text-align:justify;
	text-justify:auto;
}
#section2_h1{
	padding: 20px 0px;
	color:#3e3e3e;
}
ul{
	color:#f5f5f5;
	opacity:0;
	
	
	}
#foot a{

	color:#f5f5f5;
	opacity:1;
	font-family:font_italics2;
	font-size:11px;
	-webkit-transition:width 1s, opacity 1.4s;
		-moz-animation:opacity 1.4s;
}
#foot a:hover{
	color:#ffb900;
	opacity:1;
	font-family:font_italics2;
	-moz-animation:opacity 1.4s;

}#foot a:link{
	color:#f5f5f5;
	opacity:1;
	font-family:font_italics2;
	-moz-animation:opacity 1.4s;

}
ul:hover{
	color:red;
	opacity:1;
	padding:1px 30px;
		text-align:left;
		-webkit-transition:width 1s, opacity 1.4s;
		-moz-transition:width 1s, opacity 1.4s;
}

a{
	color:#f5f5f5;
	font-family:bebas,tahoma;
	font-size:18px;
	font-weight:200;
	letter-spacing:3px;
	font-stretch:extra-expanded;
	text-shadow:#a0b8c0 1px 1px 1px;
}

a:link{
	color:#dbd6d6;
	TEXT-DECORATION: NONE;

}
a:hover{
	color:#ffb900;
}

.side{
	font-family:font_italics;
	height: 90%;
	margin:0 0px;
	background: #1e1e1e;
	position:fixed;
	left:0px;
	width: 20px;
	z-index: 10;
	transition:all 1.0s ease-in-out;
	-webkit-transition:width 1s, opacity 2s;
	-webkit-border-radius:5px;
	-moz-transition:width 1s, opacity 2s;
	-moz-border-radius:5px;	
}

.side:hover{
	left:0px;
	font-family:font_italics;
	height: 90%;
	background: #1e1e1e;
	position: absolute;
	width: 175px;
	opacity:0.80;
	z-index: 10;
	transition:all 1.0s ease-in-out;
	-webkit-transition:width 0.31s, opacity 2s;
	-webkit-border-radius:5px;	
	-moz-transition:width 0.31s, opacity 2s;
	-moz-border-radius:5px;	 
	text-align:right;
}
#page{
 width:100%;
 height:100%;
z-index:99999;

 }

 #p1{
 background-color:green;
 }
 


#side_menu{
	position:fixed;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	height:25px;
	width;150;
	z-index:99;

}

#selection{
	position:relative;
	display:-webkit-box;
	text-align:center;
	padding:10px 10px;
}

.aside1{
	position:absolute;
	bottom:100px;
	right:0px;
	width:300px;
	height:100px;
	z-index:555;
}
/*=========HEX===============*/
#centerhex{
	position:fixed;
	opacity:1;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
}
#hex1{
	position:relative;
	bottom:54px;
	left:36px;
	opacity:.50;
	-webkit-transition:bottom 0.25s,left 0.25s, opacity 1s;
	-moz-transition:bottom 0.25s,left 0.25s, opacity 1s;
}#hex1p{
	position:relative;
	bottom:54px;
	left:36px;
	opacity:0;
	-webkit-transition:bottom 0.25s,left 0.25s, opacity 1s;
	-moz-transition:bottom 0.25s,left 0.25s, opacity 1s;
}
#hex2{
	position:relative;
	top:56px;
	right:33px;
	opacity:.50;
	-webkit-transition:top 0.30s,right 0.30s, opacity .5s;
	-moz-transition:top 0.30s,right 0.30s, opacity .5s;
}#hex2p{
	position:relative;
	top:56px;
	right:33px;
	opacity:.0;
	-webkit-transition:top 0.30s,right 0.30s, opacity .5s;
	-moz-transition:top 0.30s,right 0.30s, opacity .5s;
}
#hex3{
	position:relative;
	bottom:-2px;
	left:-65px;
	opacity:.50;
	-webkit-transition:bottom 0.30s,left 0.30s, opacity .5s;
	-moz-transition:bottom 0.30s,left 0.30s, opacity .5s;
}#hex3p{
	position:relative;
	bottom:-2px;
	left:-65px;
	opacity:0;
	-webkit-transition:bottom 0.30s,left 0.30s, opacity .5s;
	-moz-transition:bottom 0.30s,left 0.30s, opacity .5s;
}
#hex4{
	position:relative;
	bottom:-55px;
	left:-228px;
	opacity:.50;
	-webkit-transition:bottom 0.30s,left 0.30s, opacity .5s;
	-moz-transition:bottom 0.30s,left 0.30s, opacity .5s;
}#hex4p{
	position:relative;
	bottom:-55px;
	left:-228px;
	opacity:.0;
	-webkit-transition:bottom 0.30s,left 0.30s, opacity .5s;
	-moz-transition:bottom 0.30s,left 0.30s, opacity .5s;
}
/*hex Hover*/
#centerhex:hover{
	opacity:.9;
	height:10%;

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
}
#hex1:hover{
	position:relative;
	bottom:62px;
	left:43px;
	opacity:1;
	-webkit-transition:bottom 0.45s,left 0.45s, opacity .5s;
	-moz-transition:bottom 0.45s,left 0.45s, opacity .5s;
}
#hex2:hover{
	position:relative;
	top:61px;
	right:28px;
	opacity:1;
	-webkit-transition:top 0.30s,right 0.30s, opacity .5s;
	-moz-transition:top 0.30s,right 0.30s, opacity .5s;
}
#hex3:hover{
	position:relative;
	bottom:-2px;
	left:-59px;
	opacity:1;
	-webkit-transition:bottom 0.30s,left 0.30s, opacity .5s;
	-moz-transition:bottom 0.30s,left 0.30s, opacity .5s;
}
#hex4:hover{
	position:relative;
	bottom:-60px;
	left:-233px;
	opacity:1;
	-webkit-transition:bottom 0.30s,left 0.30s, opacity .5s;
	-moz-transition:bottom 0.30s,left 0.30s, opacity .5s;
}

/*==========End Hex==============*/

#rotate{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-webkit-animation: spin 1s linear;
}
@-webkit-keyframes spin{
	from{ -webkit-transform: rotateX(0);}
	to {-webkit-transform: rotateX(-345deg);}
 }
 @-moz-keyframes spin{
	from{ -moz-transform: rotateX(0);}
	to {-moz-transform: rotateX(-345deg);}
 }
footer{
	position:bottom;
}

#slide1_container  {
	position:absolute;
	bottom:200px;
  width:400px;
  height:281px;
  overflow:hidden; 
  margin:30 auto;
}
#slide1_images {
	top:80px;
  width:410px;
  margin: 0px 100px;
  -webkit-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out;
   -webkit-animation: flip 0.5s linear ,opacity 2s;
   -moz-animation: flip 0.5s linear ,opacity 2s;
}
.t1{
	-webkit-animation: letter-spacing 1s,opacity 2s;
	-moz-animation: letter-spacing 1s,opacity 2s;
}
@-webkit-keyframes letter-spacing{
	from{ letter-spacing:80px;}
	to{ letter-spacing:5px;}
}@-moz-keyframes letter-spacing{
	from{ letter-spacing:80px;}
	to{ letter-spacing:5px;}
}
	
}
#g1{
	-webkit-animation: opacity 3s;
	-moz-animation: opacity 3s;
}

#circle {
background:#c44513;
 height: 300px;
 -moz-border-radius:275px;
 -webkit-border-radius: 275px;
 width: 300px; 
 opacity:.1;
 
 }
 #circle2 {
background:#235436;
 height: 250px;
 -moz-border-radius:275px;
 -webkit-border-radius: 275px;
 width: 250px; 
 opacity:.1;
 position:absolute;
 top:150px;
 left:200px;
 }
 
 #circle3 {
background:#032d21;
 height: 150px;
 -moz-border-radius:275px;
 -webkit-border-radius: 275px;
 width: 150px; 
 opacity:.1;
 position:absolute;
 bottom:150px;
 left:400px;
 -webkit-transition:bottom 0.30s,left 0.30s, opacity .5s;
 -moz-transition:bottom 0.30s,left 0.30s, opacity .5s;
 }
  #circle3:active {
background:#f48721;
 height: 155px;
 -moz-border-radius:275px;
 -webkit-border-radius: 275px;
 width: 155px; 
 opacity:.3;
 position:absolute;
 bottom:150px;
 left:400px;
 -webkit-transition:width 1s,height 1s, opacity 1s;-moz-transition:width 1s,height 1s, opacity 1s;
 }
 #circle3:hover {
background:#032d21;
 height: 155px;
 -moz-border-radius:275px;
 -webkit-border-radius: 275px;
 width: 155px; 
 opacity:.3;
 position:absolute;
 bottom:150px;
 left:400px;
 -webkit-transition:width 1s,height 1s, opacity 1s; -moz-transition:width 1s,height 1s, opacity 1s;
 }
 
  #circle4 {
background:#f48721;
 height: 500px;
 -moz-border-radius:275px;
 -webkit-border-radius: 275px;
 width: 500px; 
 opacity:.1;
 position:absolute;
 bottom:150px;
 right:400px;
  -webkit-transition:width 3s,height 3s, opacity 3s;  -moz-transition:width 3s,height 3s, opacity 3s;
 }  
 
 #circle4 :active{
background:#f48721;
 height: 400px;
 -moz-border-radius:275px;
 -webkit-border-radius: 275px;
 width: 400px; 
 opacity:.6;
 position:absolute;
 bottom:150px;
 right:400px;
 -webkit-transition:width 3s,height 3s, opacity 1s; -moz-transition:width 3s,height 3s, opacity 1s;
 }

#slide1_images:hover {
  width:410px;
  -webkit-transition:all 1.0s ease-in-out;-moz-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out; 
}
 @-webkit-keyframes flip{
	from{ -webkit-transform: rotateY(0);-moz-transform: rotateY(0);}
	to {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);}
 }
 #fade{
	-webkit-animation: opacity 3s;-moz-animation: opacity 3s;
 } #fade1{
	-webkit-animation: opacity 1s;-moz-animation: opacity 1s;
 }
 @-webkit-keyframes opacity{
	from{opacity:0;}
	to {opacity:1;}
 }@-moz-keyframes opacity{
	from{opacity:0;}
	to {opacity:1;}
 }

#yeah{
 position:absolute;
 bottom:1px;
 left:5px;
 z-index:9999px;
 font-family:tahoma;
 font-size:12pt;
 color:#ffc93a;
 font-weight:400;
}