html, 
body
{
  padding: 0; 
  margin: 0; 
  scroll-behavior: smooth; 
  font-family: 'Special Elite', cursive;}

body
{background: #fff; position: relative; -webkit-text-size-adjust: none; margin: 0;  }
  
body *{	text-shadow: none;}

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

h1 {font-size:1.6em; line-height: 1.8em; padding: 0px 6% 2.3% 6%; color:#444; font-weight: 100; letter-spacing: 0.15em;}
h2{font-size: 1.3em;  padding:12px 6% 0px 6%;  line-height: 2em; color:#444; margin: 0; font-weight: 100; letter-spacing: 0.07em; }
h3{	font-size: 1.08em;  padding: 12px 6% 12px 6%; color: #222; font-weight: 100; margin: 0; line-height: 1.4em;}

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

p{font-size: .95em; margin: 0; padding:0 6% 3% 6%; font-weight: normal;  color: #222; line-height:2em; letter-spacing: 0.07em;}


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


@media only screen and (max-width: 480px) {
	h1 { padding: 2px 2% 23px 2%;}
	h2 {font-size: 1.4em; padding: 0 2%;}
	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 {font-size: .8em; 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: #000; 
  border-bottom: 1px dotted #000; 
  text-decoration: none; 
  outline:none; 
  padding: 0 0 4px 0;}

a {outline: none;}

a:hover {
  color:  rgba(10,10,50,.7) ;	
  text-decoration: none;	
  outline:none;	
  transition: .5s;
  border-bottom: 6px solid;}
  
  a:active { 
  opacity: .7; 
  color: black; }

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



/* manage width of site*/

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

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


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

.lge {font-size: 1.2em; color: #999; }

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

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

ul li {color: #999; padding: 0 0 0 23px; margin: 0 0 0 5%;}


#intro {background: transparent; height: auto;  padding: 50px 0 0 0;} 

#intro a:hover {color:#f00;}

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


#bar {
  background: #fff; 
  width: 100%; 
  height:0px; 
  padding: 23px 0 4px 0; 
  margin:0;  }


#first {background: #fff; height: auto;  margin:0;  width: 100%; padding: 32px 0 2% 0;}

#first img {margin:  0px;  border: 0 !important; max-width:100% !important;}

#first h1 {font-size: 1.6em;  padding: 32px 6% 0% 6%;}

#first img:hover {opacity: 1;}

#first h2 {letter-spacing: 0.15em !important;}

@media only screen and (max-width: 480px) {
	#first h1 {font-size: 1.4em; padding: 2px 6% 8% 3%;} 

  #first h2 {font-size: 1.08em;}
}


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

#second img {
	box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.15); 
	border: 2px solid #fff;}


.footer
{	background: white;
	font-weight: normal;	
  width: 100%; 
  padding: 4% 0 0 0;
	height: auto; 
  text-align: right;
  margin: 4% 0 0 0;

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

.footer a {color: #777; border:0;}

.footer a:hover {color:  rgba(10,10,50,.6) ; border-bottom: 6px solid;}

.footer p {
	padding:0 2.3% 23px 2.3%; 
    color: #555; 
    text-align: right;}

.footer h3 {
font-size: 1.4em; 
line-height: 1.6em; 
margin: 0; 
padding: 0px 6% 10px 0; 
font-weight: normal; 
color: #444;}

.footer .sml {
	color: #bbb; 
    font-size: .808rem;}


@media only screen and (max-width: 600px) {
.footer.fixed {background: transparent;}

.footer {padding: 0;}

.footer p, .footer h3 {color: #fff;}
}

.box { 
  opacity: 1; 
  background: transparent;  
  padding: 10px 0 0 0;   
  margin: 0px;  
  height: auto; 
  width: 33.33%; 
  float: left }

@media only screen and (min-width: 1800px) 
 {	.box { width: 33.33%; }  }
 
 @media only screen and (max-width: 1200px) 
 {	 .box { width: 33.33%; }  }
 
 @media only screen and (max-width: 880px) 
 {	 .box { width: 50%; }  }
 
  @media only screen and (max-width: 640px) 
 {	 .box { width: 100%; }  } 
 
 .box:hover { opacity: .9;}


#box { 
  height: auto; 
  width:95% ;
  float: left; 
  margin:0; 
  position:relative; 
  padding:0 2.5%; 
  background: transparent;}

#box img {
  width: 100%; 
  padding: 0; 
  margin: 0;}

@media only screen and (max-width: 800px) 
{#box {width: 95%;}
}

@media only screen and (max-width: 480px) 
{#box {
  width: 100%; 
  padding: 0;}
}


#con {width: auto; height: auto; background: transparent; }


#one {width:96%; height: auto; padding: 2% 2% 2% 0; margin: 0; float: left; background: #fff;}

#one h2 {font-size: 1em; padding: 6px 0 12px 0 !important;  margin: 0; line-height:1.2em; font-variant:normal;} 

#one a {color: #fff; border:0;}

#one:hover  { background:transparent;}




/* for desktop yada*/
#navcon {
  width: 100%;  
  height: 60px; 
  background: white; 
  position:fixed; 
  z-index: 32; 
  padding: 0; 
  margin: 0;}

#navcon li {padding: 0 12px;}


/* left side of nav bar*/
nav { 
  margin: 0;  
  width: 50%; 
  position: fixed;   
  float: left; 
  height: 50px; 
  z-index: 100;}

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


/* #nav2 - right side of nav bar */
#nav2 { 
  width: 30%; 
  height: 54px;  
  margin: 0 0% 0 45%; 
  padding: 0;  
  float: right;  
  position: fixed; 
  text-align: right; 
   } 

#nav2 a {color: #555 !important; border:0 !important;}

#nav2 a:hover {color: #8B8A6B !important;}

#nav2 h1 {
  font-size: 1.7em; 
  padding: 4px 0 0px 0px;
}

@media only screen and (min-width: 1600px) {
#nav2 h1 {font-size: 2.2em;}	
}


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


@media only screen and (max-width: 768px) 
{#nav2 {
  width: 100%; 
  height: 50px;  
  margin: 50px 0 0 0; 
  padding: 0; 
  float: right; 
  position: static; 
  z-index: 30; 
  text-align:left !important; 
  background: #fff;}

#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: #fff; 
  z-index: 20; /* here for 2nd part of menu */
  list-style-type: none;}

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

nav a {  
  display: block;
  padding: 3px 0px 0 4px !important;
  color: #666 !important;
  text-align: left; border:0 !important;
  line-height: 50px;
  letter-spacing: .23rem;
  font-variant:small-caps;
  text-decoration: none;}

nav a:hover {
  background: linear-gradient(90deg, rgba(10,10,50,.7) 
  32%, rgba(32,52,82,.9) 100%); 
  border-bottom: 0; 
  color: white !important; 
  padding: 0 6px;
  align: left !important;}

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

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

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

nav ul ul li 
{ 
  width:320px !important; 
  background: #f5f5f5; border-bottom: 0;
  float: none;
  display: list-item;
  position: relative;
  opacity: 1;
}

nav ul ul ul li 
{
  position: relative;
  top: -52px;
  left: 320px;
  width:100%;
  opacity: 1; 
}

nav ul ul ul li:hover {  background: orangered;}

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

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


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

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

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


.toggle {
  display: block; 
  color: #555;
  padding: 0 12px;
  line-height: 40px;   
  text-decoration: none;
  border: none; 
  margin:  0;
  background: whitesmoke;
  letter-spacing:0.23em;
}

.toggle:hover { 
background-color: #bbb; 
color: black; }

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

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

nav ul li {  
  display: block;  
  width: 100%; 
  background: white; 
  padding: 0!important;  }


nav ul li ul li a
{ padding: 12px;}


nav ul li ul li a:before
{
  content: " ";
  display:table;
  clear: both;
}


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


nav ul ul ul a { 
padding: 0 20px; 
color:#555 !important; 
margin:0 0 0 12px !important;
}


nav ul ul ul a { 
  background-color: whitesmoke; 
  color: #555!important;}


nav a:hover {
	background-color: #eee; 
  color: #555 !important;}


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

 padding: 0 0 0 40px !important;}

nav ul ul {
	float: none;  
	position: static;  
	color: #555 !important;}


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

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