html, body
{	padding: 0;	margin: 0;}

body{background: #eee url(noise.png) repeat; font-family: 'Open Sans', sans-serif;
position: relative; font-weight:normal; -webkit-text-size-adjust: none;}

body *
{	text-shadow: none;}

@media only screen and (min-width: 1801px) { 
body {width: 70%;
margin: 0 15%;
}

}


h1, h2, h3, h4, h5, h6{	line-height: 1.4em;	}

h1{	font-size: 3.2em; padding: 0px 23px; color: #111;  font-family: 'Ubuntu', sans-serif;}

h2{font-size: 1.6em; color: #5698B1; padding: 32px 23px 16px 23px; font-weight: 400;   }

h3{	font-size: 1.2em;  padding: 6px 23% 0 23px; font-weight: normal; color: #555; }

h4{	font-size: .9em;  padding: 10px 0px 10px 23px; color: #ccc; font-weight: 100;}

h5{	font-size: .8em;  padding: 0px 0px 0px 23px; color: #666; font-weight: 400; line-height: 1.6em; }

h6{	  padding: 0 0 0 20px;}

p{font-size: 1.08em; margin: 0; padding:4px 12% 6px 23px; font-weight: normal; color: #222;}


a, 
a:link, 
a:active, 
a:visited, 
a:hover 
{color: #47595F; border-bottom: 1px dotted #47595F;text-decoration: none; outline:none;}

a {outline: none; padding:0 2px;}

a:hover{color: #fff; border-bottom: 0px;text-decoration: none; outline:none; background: #80ACC0; }


ul li {	list-style-type: disc; font-size: 1.08em; margin:0 40px; color: #222; padding: 0 23px;	}

.grey {color: #888;}

.lge {font-size: 1.8em;}

.sml {font-size: 0.23em; color: #c00; }

.min {    padding: 0 0 6px 23px;}




/* menu stuff g'wan 'ere*/
nav:not(.mm-menu){display: none;}

#menu p{color: #3B4E4F; padding: 20px; font-size: 1em; background: transparent;}

#menu h3 {font-size: 1.2em;}


.header
{	background: transparent; font-weight: normal; color: #fff;	-moz-box-sizing: border-box;	box-sizing: border-box;	
	width: 90%; top: 0;	height: 42px; 	padding: 0 50px; position: fixed; display: block; margin:48px 5% 0 5%;}
	
	
@media only screen and (min-width: 481px) { 
.header {display: none;}	
}
	
	.header h3 {padding: 4px 0 0 10px; margin: 2px 0 0 0; color: #800; font-weight: normal; }
	
	.header2
{  	font-weight: normal; 
	-moz-box-sizing: border-box;	box-sizing: border-box;	
	width: 100%; top: 0;	height: 60px; opacity: .92; padding: 7px 0px 0 0; position: fixed;}
	
	.header a
{display: block; width: 40px; height: 40px;	position: absolute;	top: 0;	left: 12px; background: center center no-repeat transparent;
background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );}
	
.header.fixed{ position: fixed; top: 0; left: 0; disp }

.headertop
{	background: #eee;	font-weight: normal; color: #fff; 
width: 100%; top: 0; height: 80px; padding: 0 15px; position: fixed; z-index: 10; margin: 0; opacity: .9; border-bottom: 1px solid #dcdcdc; }

@media only screen and (min-width: 1801px) { 
.headertop {width: 70%;
 padding: 0;
}

}



.headertop h1 {	 padding: 1px 0 0 12px; font-weight: normal; margin: 0px 5%; font-size: 2.5em; color: #3B4A4F; letter-spacing: .01em;}

.headertop h3 {	 padding: 6px 0 0 14px; font-weight: normal; margin: 0px 5%; font-size: .8em; color: #4591AC; letter-spacing: .06em;}

.headertop a {color:  #50838F; border-bottom: 0; }

.headertop a:hover {color: #000; background: transparent;}


#nav {width: 90%; margin: 81px 0 12px 0; background: #599aaf; height: 40px; padding:6px 5% 0 5%; opacity: .7; }

#nav h3 {padding: 6px 0 0 26px; font-size: 1em; font-weight: normal;  color: #eee; margin:0;}

#nav a {color: #fff; border-bottom: 0;}

#nav a:hover {color: #003; background: transparent;}

.red {color: #325F00; font-size: .7em; font-family: 'Open Sans', sans-serif; padding: 0 8px 0 0;}

.noborder {border: 0px;}

.content {margin: 0px 5% 4% 5%; background: transparent; outline: none; width: 90%; }

/*------------ #intro -----------------*/

#intro {background: transparent;  height: auto;   margin: 0px 0 10px 0; width: 100%; padding:0;} 

#intro h1 {color: #e00; font-size: 1.1em; padding: 32px 0 0px 28px; font-weight:normal; font-variant:small-caps; }

#intro h2 {   margin:0;}

#intro img {max-width: 100%; height: auto; border: 1px solid #fff;}


/*------------ #first -----------------*/

#first {background:#eee; height: auto; margin: 0px; width: 23.8%;	color: #000; border: 0px; float: left; margin: 0.6%; }

#first a:hover {opacity: 1;}

#first img {max-width: 100%; height: auto; border: 0; padding: 0;}

/*------------ transform  -----------------*/

#box {background:transparent; height: auto;  width: 48.5%;	color: #000; border: 0px; float: left; margin: 0.4%; }

#box img {max-width: 100%; height: auto; border: 2px solid #fff; padding: 0;}

#cf1 {  position:relative;  height:auto;  width:96%;
  margin:8% auto;  }
  
#cf1 img {  position:absolute;  left:0;  
-webkit-transition: opacity 1.8s ease-in-out;  -moz-transition: opacity 1.8s ease-in-out;  -o-transition: opacity 1.8s ease-in-out;  transition: opacity 1.8s ease-in-out;}

#cf1 img.top:hover {  opacity:.1;}


#cf2 {  position:relative;  height:auto;  width:96%;
  margin: 76% auto 40% auto;  }
  
#cf2 img { position:absolute;  left:0;  -webkit-transition: opacity 1.8s ease-in-out;  -moz-transition: opacity 1.8s ease-in-out;  -o-transition: opacity 1.8s ease-in-out;  transition: opacity 1.8s ease-in-out;}

#cf2 img.top:hover {  opacity:0.23;}



#cf3 {  position:relative;  height:auto;  width:96%;
  margin: 64% auto 140% auto;  }
  
#cf3 img {  position:absolute;  left:0;  -webkit-transition: opacity 1.8s ease-in-out;  -moz-transition: opacity 1.8s ease-in-out;  -o-transition: opacity 1.8s ease-in-out;  transition: opacity 1.8s ease-in-out;}

#cf3 img.top:hover {  opacity:.23;}

#hide {display:none;}

.top {opacity:  .8;}

/*------------ #display -----------------*/

#galleries {width: 100%; height: auto; background: transparent; padding: 0 ; margin: 0;}


#display {background:#000; height: auto; margin: 0; width: auto; }
/*--
#display-mobile {display: none;}--*/

#projects {width: 100%; height: auto; background: transparent; padding: 12px 0; margin: 0;}


/*------------------ #second --------------*/

#second {background: transparent; height: auto; padding: 0; width: 100%;}

#second h2{ padding: 12px 23px 12px 23px; }

#second h3 { color: #fff; margin: 12px 9px 6px 23px; font-size: 1.4em; padding: 27px 0 0 0px;}

#second h4
{	font-size: .9em;  padding: 6px 0px 0px 12px; color: #aaa; font-weight: 100;}

#second p {color: #fff;}	

/*------------ #footer -----------------*/

#sub-foot
{width: 90%; margin: 0; height: auto; padding: 12px 5% 1px 5%; background: #47595F;
}

#sub-foot a:link, 
#sub-foot a:visited {color: #ccc; padding: 0 0 4px 0;}

#sub-foot a:hover {color: #fff; background: transparent;}

#sub-foot a:active {color: lightblue !important; }

#sub-foot h4 {padding: 12px 0 0px 23px; text-align:right; font-size: 1.08rem;}


.footer
{	background: #1F373F; position: inherit;
	font-weight: normal;
	width: 90%; text-align: right;
	height: auto;
	padding:12px 5% 52px 5%; margin: 0; border-top: 0px solid #ccc; border-bottom: 8px solid #14292F;
}

.footer.fixed
{position: inherit; bottom: 0;left: 0; }

.footer a {color: #aaa; border-bottom: 0;}

.footer a:hover {color: #fff; background: transparent;}

.footer h3 {font-size: 1.4em; margin: 0; padding: 10px 0 0px 0; font-weight: normal; } 

.footer h4 {padding:12px 0 4px 0px; ; font-size: .81em; margin: 0; color: white; opacity:.8;}