html
{padding: 0; margin: 0;}

body{background:  #aaa url(tiles.png) repeat; 
position: relative; font-weight:normal; -webkit-text-size-adjust: none; margin: 0 12%;
 box-shadow: 0px  0px 60px rgba(23, 23, 23, 0.23);
font-family: 'Open Sans', sans-serif;
}

@media only screen and (max-width: 1420px) 
{
body {margin:0 5%;}

}

@media only screen and (max-width: 1023px) 
{
body {margin:0;  background: #a00; }

}

body *
{	text-shadow: none;}

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

p{font-size: 1.1em; margin: 0; padding:0px 7% 6px 81px; font-weight: normal; color: #737373;  line-height: 1.9em;}

h1{	font-size: 2.4em; padding: 0px 0px 0 81px; color: #fff; font-weight: 200; font-family: 'Syncopate', sans-serif; }
h2{font-size: 2em; color: #222; padding: 23px 23px 0px 81px; font-weight: 600; font-family: 'Syncopate', sans-serif; }
h3{	font-size: 1.25em;  padding:0 10% 0 81px; font-weight: 300; color: #777;  }
h4{	font-size: .9em;  padding: 0px 0px 0px 28.5%; color: #555; font-weight: 100; letter-spacing: 1em;}
h5{	font-size: 1.2em;  padding: 0px 5% 0px 81px; color: #666; font-weight: 300; }
h6{margin: 0 ; font-size: 0.8em; padding:4px 0; }

a, a:link, a:active, a:visited, a:hover {color: #c00; border-bottom: 0px dotted ;text-decoration: none; outline:none; padding:  1px 0;}
a {outline: none;}
a:hover{color: #111; border: 0px;text-decoration: none; outline:none; background: #ffc; padding: 1px 0px;}
a:active {color: #111; background: #ff0;}

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

.eng { letter-spacing: .23em; margin: 0 0 0px 1px;}
.over {border-top: 23px solid #ddd; padding: 50px 0 0 81px ;}


/* menu stuff g'wan 'ere*/



/* HIDE
#nav {width: 76%; margin:0px 0 0 0; background: #1c1c1c; height:24px; padding:8px 0; opacity: .88; position: fixed; z-index:20; }
#nav h3 {padding: 4px 36px 4px 81px; font-size: 1.08em; font-weight: normal;  color: #ddd; margin:0; font-variant:small-caps;  font-family: 'Syncopate', sans-serif;}
#nav a {color: #fff; border: 0; padding: 0 2px;}
#nav a:hover {color: #ff0; padding:21px 2px; background: transparent; }


@media only screen and (max-width: 1420px) 
{#nav {width:90%;}}

@media only screen and (max-width: 1023px) 
{#nav {width:100%;}}

*/

.content {padding: 0; background: #fff; outline: none; width: 100%; margin:0; }
/*
.header
{	background: transparent; font-weight: normal; color: #fff; width: 100%; top: 0;	height: 42px; 	padding: 0 ; position: absolute; display: block; margin:0;}
	
	
@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: 0px; opacity: .92; padding: 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; }

*/

.headertop
{background: #383838; font-weight: normal;  width: 100%; top: 0; height: 80px; padding: 0; position: absolute; margin: 40px 0 0 0;  }


.bold {font-weight: 600;}


.noborder {border: 0px;}

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

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

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


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

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

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

#first {background:transparent; height: auto; margin: 0px; width: 100%;	 float: left; }


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

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


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

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

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

#sub-foot
{width: 100%; margin: 0; height: 42px; padding: 4px 0 0 0; background:  #222;}
#sub-foot p {padding: 2px 36px 0 81px; font-size: 1.08em; font-weight: normal;  color: #ddd; margin:0; font-variant:small-caps; font-family: 'Syncopate', sans-serif;}
#sub-foot a:link, #sub-foot a:visited {color: #fff; border: 0;}
#sub-foot a:hover {color: #f00; background: transparent; padding: 1px 0;}


.footer
{	background: #9999AF url(wdf_bg_tile_dk2.jpg) repeat; position: inherit;
	font-weight: normal;
	width: 90%; height: auto;
	padding:8px 5%; 
	margin: 0;  border-bottom: 50px solid #222;
}

.footer p {color: #fff; font-size: .85em;}

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

.footer a {color: #b00; border: 0;}
.footer a:hover {color: #f00; background: transparent;}
.footer p {color: #fff; padding: 8px 0 0 81px;}
.footer h2 {padding: 0;}
.footer h3 {font-size: 1.4em; margin: 0; padding: 23px 0 0 81px; font-weight: normal; color: #000;} 
.footer h6 {padding:12px 0 0 81px; font-size: .8em; margin: 0; color: #3c3c3c; letter-spacing: .1em; text-shadow: 3px 3px 3px #888; font-weight: 200;}


/* code for gallery on project page*/

    .galleria{ width: 100%; height: 450px; background: transparent; padding: 0; margin:0; }


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

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

@media only screen and (max-width: 1420px) 
{
nav {width: 90%;}
}

@media only screen and (max-width: 1023px) 
{
nav {width: 100%;}
}



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

}