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

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

p{font-size: .9em; margin: 0 23px 6px 23px; padding:0; font-weight: normal; color: #444;}

h1, h2, h3, h4
{	line-height: 1;	margin: 20px 0 10px 0;}

h1{	font-size: 2em; padding: 0px 6px; color: #fff; opacity: .9; }

h2{font-size: 1.6em;   color: #7BABBF; padding: 0 23px; font-weight: 300; }

h3{	font-size: 1.08em; line-height: 1.4em; padding: 0 23px 8px 23px; font-weight: 300; }


h4, h5
{	font-size: .9em;  padding: 0px 20px 0 20px; color: #777; font-weight: 100;}


.blockquote {border-left: 15px solid #eee; margin: 0 20px 0 20px; padding: 20px 0 0 20px; font-size: 1.2em; color: #444; letter-spacing: .05em;  }
.crash {font-size: .5em; letter-spacing: -.1em;}

.red {color: #f00;}
.sml{font-size:.6em; color: #f00; letter-spacing: .3em;  padding: 3px 8px; opacity: .7; }
.sml2{font-size:.7em; color: #555;   padding: 3px 8px; }

a, a:link, a:active, a:visited, a:hover {color: #5c97d1; border-bottom: 0px dotted ;text-decoration: none; outline:none; padding: 0 1px;}
a {outline: none;}
a:hover{color: #111; border-bottom: 1px dashed #333; text-decoration: none; outline:none; background: transparent;}

ul li {	list-style-type: disc;	margin: 0px 0 0 12px; padding: 0px 0px 0 23px; color: #222;}




		
	.header h3 {padding: 0px 0 0 10px; text-align: left; margin: 2px 0 0 0; color: #eee; font-weight: normal;}
	
	
	.headertop
{	background: #383838;	font-weight: normal; color: #fff; 
width: 100%; top: 0; height: 120px; padding: 12px 15px; position: fixed; z-index: 10; margin: 50px 0 0 0; opacity: .9;  }
	
	
	.headertop h1 {	font-size: 3.2em; padding: 0px; color: #fff;  font-weight: normal; margin:4px 0 0 28px; }
	
.headertop h3 {	 padding: 6px 0 0 0px; font-weight: normal; margin: 0px 5%; font-size: .8em; color: #4591AC; letter-spacing: .06em;}
.headertop a {color: #325F00; }
.headertop a:hover {color: #3B4A4F;}

	.red {color: #325F00; font-size: .7em; font-family: 'Open Sans', sans-serif; padding: 0 8px 0 0;}
	
	/*
	.header2
{
	
		font-weight: normal;
	color: #fff;
	width: 100%; top: 0;
	height: 60px; opacity: .92; 
	padding: 7px 0px 0 0; position: fixed;}
	
	.header a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;	left: 12px;}
	
.header.fixed
{ position: fixed; top: 0; left: 0; }


#nav {width: 80%; margin: 59px 0 12px 0; background: #5598B0; 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;}
#nav a:hover {color: #003;}



*/
.content {margin: 0
; background: transparent; outline: none; width: 100%; }

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

#left  {width: 47%; height: auto; float: left; }

#right  {width: 48%; height: auto; float: left;  padding: 138px 3% 0 2%;}




#sub-foot
{width: 100%; margin: 0; height: 42px; padding: 4px 0 0 0; background:  #222;}
#sub-foot p {padding: 5px 12px 0 12px; font-size:.9em; font-weight: normal;  color: #ddd; margin:0; font-variant:small-caps; font-family: 'Syncopate', sans-serif;}

#intro {padding: 0; margin:0; width: 100%;}
#intro img {max-width: 100%; height: auto; padding: 6px 0;}


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

#first {background:transparent; height: auto; margin: 0px; width: 50%;	color: #111; border: 0px; float: left; }
#first img {max-width: 100%; height: auto; border: 0; padding: 0;}

.noborder {border: 0px;}




/*------------ #second - MOBILE -----------------*/
#second {background: transparent; height: auto; padding: 0; }


#second a, #second a:link, #second a:active, a:visited
{color: #444; border-bottom: 0;text-decoration: none; outline:none;}

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


/*------------ #third -----------------*/

#third {background: #000;  height: auto; padding-left: 10px; padding-right:10px;
				padding-top: 0px;padding-bottom: 0px; color: #111; border-top: 0; }

#third p {color: #fff; padding: 0 0 10px 0; letter-spacing: .1em;}



/*------------ #letter -----------------

#letter {background: #ededed; height: auto; padding-left: 10px; padding-right:10px;	padding-top: 20px;padding-bottom: 10px; color: #111; }
#letter h3 {padding: 0px 20px; color: #fff;}
				*/



.footer
{	 background: transparent url(wdf_bg_tile_dk2.jpg) repeat;
	font-weight: normal;
	width: 100%; border-top:0px;
	height: auto; bottom: 0; 
	padding:0px 20px; margin: 0; border-top:0;opacity: .9;
}

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

.footer a {color: #444;}
.footer a:hover {color: #bbb;}
.footer p{padding: 0;}
.footer h3 {font-size: 1em; line-height: 1.6em; margin: 0; padding: 20px 0 0 0;  } 

.ted{margin: 0 0 0 8%; font-size: .8em;}

.content
{padding: 0px; background: transparent;}


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

nav {
  margin:  0;
  padding: 0; height: 50px; width: 100%;
  background-color: #383838; 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 0px;
  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; }

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; opacity: .9;
  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; }

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

nav a:hover,
 nav ul ul ul a { background-color: #555; border: 0; }

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%;}

}