html, body
{padding: 0; margin: 0; scroll-behavior: smooth;}

body
{background: #fff; position: relative; -webkit-text-size-adjust: none; margin: 0;  font-family: 'Roboto Mono', monospace;}
  
body *{	text-shadow: none; outline: none;}

h1, h2, h3, h4, h5, h6
{	line-height: 1;	margin: 0;}

h1 {font-size:2.5em; line-height: 1.8em; padding: 32px 6% 0% 6%; color:tomato; font-weight: 400;} 
h2{font-size: 1.6em;  padding:12px 3% 0px 6%;  line-height: 2em; color:#003; margin: 0; font-weight: 400; }
h3{	font-size: 1.4em;  padding: 12px 6% 12px 6%; color: #555; font-weight: 100; margin: 0; line-height: 1.6em;}

h4 {font-size: 1em; padding: 0 12%; color: #600; font-weight: 300; line-height: 1.6em;}
h5 {font-size: 1.2em; padding:6px 6% 0 6%; color: #300; font-weight: 300; line-height: 1.8em; margin:0;}
h6 {font-size: .95em; padding: 12px 12% 0 8%; color: #777; font-weight: 100; line-height: 1.8em;}

p{font-size: .9em; margin: 0; padding:0 6% 3% 6%; font-weight: 400;  color: #555; line-height:1.8em;}


@media only screen and (max-width: 800px) 
{ h1, h2, h3, p {padding: 0 5%;}}


@media only screen and (max-width: 480px) {
	h1 { padding: 23px 2% 0 2%;}
	h2 {font-size: 1.4em;}
	h3 {font-size: 1.08em;}
	h4 {font-size: 1.15em; padding: 12px 2% 0 2%; color: #333; font-weight: 300; line-height: 1.6em;}
	h2, h3, h4, p{ padding:2% 2% 4% 2%; }
	h5 { padding: 12px 2% 0 2%; color: #333; font-weight: 100; line-height: 1.6em;}}
	


/* width */
::-webkit-scrollbar { width: 15px; }

/* Track */ 
/* Handle */
::-webkit-scrollbar-thumb {background: #c9c9c7;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: tomato;}




a, a:link, a:active, a:visited, a:hover
{color: midnightblue; border-bottom: 1px dotted #95AADF ;text-decoration: none; outline:none; }
a {outline: none;}
a:hover{	color: red;	text-decoration: none;	outline:none;	border:0; background: #eff3f9; opacity: .7;}

img { max-width: 100% !important; height: auto;  border: 0;} 



/* manage width of site*/

#site {background: #95AADF; height: auto; width: 80%; margin: 0 10%;}

@media only screen and (max-width: 1600px) 
{#site {margin:0; width: 100%; }}


 .content, .footer {text-align: left; background: transparent;}
/*
.header
{	background:#FF9200;	font-weight: normal; color: #fff;
	-moz-box-sizing: border-box; box-sizing: border-box;	
	width: 100%; top: 0; height: 0px; 
	padding: 0 50px; position: fixed; }

	
	.header2
{	background:#FF9200;	font-weight: normal;
	color: #fff;
	-moz-box-sizing: border-box; box-sizing: border-box;	
	width: 100%; top: 0; height: 50px; opacity: .9;
	padding: 7px 0 0 0; position: fixed;}
	

	@media only screen and (min-width: 481px) { 
		.header {width: 10%;} 
		.header2 {display: none;}	 }
	
*/
.one {color: #006;  font-weight: 100;}
.two {color: #A7E9FF; padding: -50px 0 0 0;  font-weight: 100;}

.sml{font-size:.55em;  letter-spacing: .18em; padding: 0 0 0 16px; color: tomato;}

.spacer {  clear: both;  height: 20px; margin: 10px 0;}

ul li {color: #999; font-size: 1.2em; padding: 0 0 0 2px; margin: 0 0 0 5%;}

/*==========content ===============*/
#intro {background: transparent; height: auto;  padding: 50px 0 0 0;} 
#intro a {color:#000;}  
#intro a:hover {color:#f00;}

@media only screen and (max-width: 480px) { 
#intro {background:  transparent; height: auto;  
padding: 0px 5% 30px 5%; width: 90%} 
}


#bar {background: #95AADF; width: 100%; height:250px; 
padding: 18px 0 30px 0; text-align: center; border-bottom: 5px solid white; }

#bar h1 {font-size: 5.4em; padding: 28px 0 0 4%; text-align: left;color: white;/* font-family: 'Hind', sans-serif;*/ font-family: 'Open Sans', sans-serif; font-weight: 700;}
#bar img {padding: 0 20% 0 4%;}

#bar a {color: white !important;}
#bar a:hover {background: transparent !important;}


@media only screen and (max-width: 1200px) { 
#bar h1 {font-size: 5.2em; padding: 0px 0 0 0; }
#bar img {padding: 0 12% 0 4%;}
}


@media only screen and (max-width: 800px) { #bar h1 {font-size: 4em; padding: 0px 0 0 23px; margin: 100px 0 0 0;}
#bar {height: 304px;}
}


@media only screen and (max-width: 550px) { 
#bar h1 {font-size: 3.2em; text-align:center; padding: 0;}
#bar img {padding: 0 0 0 10%;}
#bar {margin: 60px 0 0 0; height: auto;}
}


#first {background: #e0e8f9; height: auto;  margin:0;  width: 100%; padding: 0%; float:left;}
#first img {  max-width:100% !important;}
#first img:hover {opacity: 1;}
#first p, #first h4{color: #444;}

@media only screen and (max-width: 480px) {
	#first h1 {font-size: 2.1em; padding: 12px 0 0 3% !important; }
	#first h2 {font-size: 1.4em;}}

.pic a {border: 0; }
.pic:hover {background: transparent;}
/*.pic img {margin: 0 !important;}*/


#zero {width: 35%; height: auto; background: #e0e8f9; float: left; padding:0 2% 0% 3%; }
#zero h2 {padding: 120px 0 0 6%;}
#zero img {padding: 0 18px 12px 0 !important;}

#two {width: 56%; height: auto; background: #e0e8f9; float: left;  padding:0 0% 0% 2%; }  
#two img {padding: 0 18px 12px 0px !important;}
#two h3, #two p {padding: 0 6%;}

#three {width: 90%; height: auto; background: #e8ecf4; float: left; padding: 0 10% 0 0; margin: 0;}
#three img {padding: 0 32px 16px 0px !important;}

#five {width: 0%; height: auto; background: #e8ecf4; float: left; padding: 0 0% 0 0%;}
#five img {margin: 0 23px 0 0;}

#zero h1, #two h1, #three h1, #five h1 { padding: 23px 0 0 6%;}

@media only screen and (max-width: 800px) 
{
#zero, #two, #three, #five {width: 100%; padding: 0 !important;}
}

#zero img:hover {opacity: .8;}


#second {background: #E0E8F9; height: auto; padding: 0% 10%; margin: 0; width:80%; }
#second img {box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.15); border: 1px solid #fff;}


.footer
{	background:#314982;
	font-weight: normal;	width: 100%;
	height: auto; margin: 0; text-align: right; 
	}
	 
.footer img {border: 0;}
.footer.fixed{position: fixed; bottom: 0; left: 0;}
.footer a {color: #fff; border: 0 !important}
.footer a:hover {color: yellow; background: transparent !important; opacity: 1; }
.footer p {padding:0 2.3% 23px 2.3%; color: #ddd; text-align: right;}
.footer h3 {font-size: 1.2em; line-height: 1.6em; margin: 0; padding: 0% 2.3% 0px 0; font-weight: normal; color: tomato !important;}
.footer .sml {color: #550;}


@media only screen and (max-width: 800px) {
.footer.fixed {background: transparent;}
.footer p, .footer h3 {color: #fff;}
}




/* for desktop yada - - - - - - - - - - - - - - - - - - */
#navcon {width: 100%;  height: 40px; background: transparent; position:fixed; z-index: 32; padding: 0; margin: 0;}
#navcon a  {border: 0 !important;}

/* nav */
nav { margin: 0; margin:0; width: 50%; position: fixed;   float: left; background: #95AADF; height: 40px; }

@media only screen and (max-width: 800px){
	nav {width: 100%; margin: 0; padding:0; height: 40px;}
	}


/* #nav2 - right side of nav bar */
#nav2 { width: 30%; height: 40px;  margin: 0 0% 0 50%; padding: 0;  float: right;  position: fixed; text-align: right ; background: #95AADF; } 
#nav2 a {color: #fff !important;}
#nav2 a:hover {background: transparent; text-shadow: 8px 8px 8px #009;}
#nav2 h1 {font-size: 6em; padding: 0px 10% 0px 0px; font-variant:small-caps;}

@media only screen and (max-width: 1600px) {
#nav2 { width: 50%; } }


@media only screen and (max-width: 800px) 
{#nav2 {display: none; width: 100%; height: 90px;  margin: 50px 0 0 0; padding: 0; float: right; position: static;  padding: 0; z-index: 30; text-align:left !important; background: #95AADF;}
#nav2 h1 {padding: 0px 0 0 20px;}
}

nav ul li {	list-style-type: none;	margin: 0; padding:0; }

/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/
 .toggle, [id^=drop] {display: none;}


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: transparent; z-index: 20; /* here for 2nd part of menu */
  	list-style-type: none; margin: 0px 0 0 5px;}

nav ul li:hover { opacity: 1; color: #fff; }

nav a {  display: block;
  padding: 0% 4% 0 6%;
  color: #fff !important;
  text-align: left;
  line-height: 50px;
  text-decoration: none;}
  

nav ul li ul li:hover {color: #222;}

nav a:hover {background: #95AADF; border-bottom: 0; color: red !important; text-align: left !important;}

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

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

nav ul ul li {
  width:200px !important; background: #95AADF; border-bottom: 0;
  float: none;
  display: list-item;
  position: relative;
	 opacity: 1;
}
	
nav ul ul ul li {
  position: relative;
  top: -52px;
  left: 200px;
  width:100%;
   opacity: 1; 
}

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

li > a:after { content: ' '; }

li > a:only-child:after { content: ''; }


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

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

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


.toggle {
  display: block; 
  color: #fff;
  line-height: 50px; padding: 0 23px;  text-decoration: none;
  border: none; margin:  0;  letter-spacing:0.1em;
}

.toggle:hover { background-color: #314982; color: #fff; }

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

  nav a {  padding:0;  color: #fff !important;}

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

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

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

nav ul ul ul a { background-color: transparent; color: white !important;}
nav a:hover { background-color: tomato; color: white !important;}

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

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

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

nav ul ul li:hover {color: tomato;}
}


@media all and (max-width : 330px) {
nav ul li {  display: block;  width: 100%;}
}