html, body
{
	padding: 0;
	margin: 0;
}
body
{
	background:  #fff;
	font-family: 'Open Sans', sans-serif; 
	position: relative;	-webkit-text-size-adjust: none;}
	
body *
{	text-shadow: none;}

p{font-size: .9em; margin: 0 12px 6px 12px; padding:0; font-weight: normal; color: #222; }
 
h1{	font-size: 1.6em; padding: 32px 0 12px 12px  ; color: #000; font-weight: 200; }

h2, .footer h2{font-size: 1.32em;   color: #515151; padding: 23px 12px 6px 12px; line-height: 1.4em; }

h3{	font-size: 1.15em; padding: 12px 0 0 12px; color: #555; }

h4 {padding:0 12px; font-size: 1.1em;}


h6{padding: 0 ; font-size: 1em; font-weight: 200; margin: 6px 0;}

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

.content
{padding: 10px 0px 0px 0px; background: transparent; margin: 0; width: 100%;}

.bold {font-weight: 600;}

/* menu stuff g'wan 'ere*/

.header,.content,.footer{	text-align: left; }

.content {padding: 60px 0 0 0; background:transparent; outline: none; width: 100%; }


.headertop {background:#111; font-weight: normal; width: 100%;  height: 120px; padding: 0; position: absolute; opacity: 1; margin: 50px 0 0 0; }


.headertop h1 {	 padding: 20px 0; font-weight: normal; margin: 0px 0 10px 12px; font-size: 2em; color: #fff; letter-spacing: .01em;  line-height: 1.3em; font-family: 'Syncopate', sans-serif; }
 

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

/*
.header
{	background: #e00 ; font-weight: normal; color: #fff;	width: 100%; top: 0; height: 42px; margin:0;
	padding: 0 50px; position: absolute; display: block; }
	
	.header.fixed
{ position: fixed; top: 0; left: 0;  }
	
 .header h3 {padding: 6px 0 0 10px; margin: 2px 0 0 0; color: #eee; font-weight: normal; font-size: 1em; color: #a00;}
	
	
.header2 {display: none;}
*/


/*------------ #container for projects -----------------*/
#con {width: 100%; height: auto; float: left; padding: 10px 0 0 0;}

#left  {width: 100%; height: auto; float: left;  margin: 80px 0 0 0; }

#right  {width: 95%; height: auto; float: left;  padding:0px 3% 0 2%; background: #ccc;}




#intro {background: #fff;  height: auto; padding:0px 0 0 0;  margin: 280px 0 0 0; width: 100%;  } 
#intro img {max-width: 100%; height: auto; padding: 12px 0 0px 0;}
#intro h1

/*------------ #first - MOBILE -----------------*/
#first {background:transparent; height: auto; padding:8px ; color: #111; border-top: 0px; opacity:1;  width:100%; ;}
#first img, #second img, #third img, #letter img 
{max-width: 100%; height: auto; border: 0; padding: 0; margin:0;opacity:1;}

.noborder {border: 0px;}

#hide {display:block;}

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

#sub-foot {display: none;}


.footer
{	background: #ddd; position:inherit;	font-weight: normal; width: 100%; height: auto; padding:0px; margin: 0px 2%; border-top: 20px solid #aaa;  }

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

.footer a { font-weight: normal;  }

.footer p{padding: 0;}
.footer h2 {padding: 0px 0px 6px 12px; } 
.footer h3 { padding: 20px 0 0px 12px; font-size: 1.4em; font-weight: normal; line-height: 1.4em;} 
.footer h5  {padding: 0 0 0 12px;}
.footer h6{color: #555; padding: 0 0 0 12px 0; font-size: .7em; letter-spacing: .08em; text-shadow:none;} 

	/* code for menu---------------****************************************************************--*/
	
 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin:  0;
  padding: 0; height: 50px; width: 100%;
  background-color: #888; padding: 0; position: fixed; z-index:12;}


nav:after {
  content: "";
  display: table;
  clear: both;}

nav ul {
    padding: 0;
  margin: 0;
  list-style: none;
  position: relative;}

nav ul li {
  margin: 0px ;
  display: inline-block;
  float: left;
  background-color: #383838;}

nav a {
  display: block; font-weight: 200; font-family: 'Syncopate', sans-serif;
  padding: 0;
  color: #eee; 
  font-size: 1.1em;
  line-height: 45px;
  text-decoration: none; font-variant:small-caps;}

nav ul li ul li:hover { background: #e5e5e5; }

nav a:link, nav a:visited, nav a:active {color: #fff;}
nav a:hover { color: #ff0; background: transparent; border: 0; }

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover > ul { display: inherit; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {


.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: #888 ;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  line-height: 46px;
  text-decoration: none;
  border: none; margin:  0;
}

.toggle:hover { background-color: #c9c9c9; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #d4d4d4 url(grid.jpg) repeat; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #c3c3c3; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {  display: block;  width: 100%;}

}