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

body
{background: #e5e5e5;
 font-family: 'Roboto', sans-serif;position: relative;	-webkit-text-size-adjust: none; margin: 0;
 border-left: 0px solid #fff;
        box-shadow: 0 0 80px rgba(20, 20, 20, 0.4);
		 border-right: 0px solid #fff;
        box-shadow: 0 0 80px rgba(20, 20, 20, 0.4);
 }
 
 

@media only screen and (min-width: 1601px) 
{body {margin:0 10% ;}
}


@media only screen and (min-width: 2001px) 
{body {margin:0 20% ; }
}


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

@media only screen and (max-width: 480px) 
{body
{width: 100%; margin: 0; border: 0;}
}

body *
{	text-shadow: none;}

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

h1{	font-size:3.2em; padding: 32px 12% 0px 5%; color: #FF4500; line-height: 1.4em; font-family: 'Anton', sans-serif; }

h2{font-size: 2.3em;  padding: 0 5%;  line-height: 1.6em; color:/*#6A7C80*/ black; margin: 0; font-weight: 100;   }

h3{	font-size: 1.4em; line-height: 1.9em; padding: 0 5% 8px 5%; color: #6F9992; font-weight: 300; margin: 0;}

h4 {font-size: 1.2em; padding: 12px 12% 0 12%; color: #600; font-weight: 300; line-height: 1.6em;}

h5 {font-size: .8em; padding: 0px 5% 0 5%; color: #bbb; font-weight: 100; line-height: 1.4em; text-align: right;}
h6 {font-size: 1.2em; padding: 12px 8% 0 12%; color: #6F9992; font-weight: 300; line-height: 1.8em;}

p{font-size: 1.6em; margin: 0 ; padding:0 12% 0 5%; font-weight: normal; line-height:2em; color: grey;}

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


@media only screen and (max-width: 480px) {
	h1 {font-size: 1.8em; padding: 82px 3% 0 5%; line-height: 1.4em;}
	h2 {font-size: 1.6em; padding:0 5% 23px 5%;}
	h3 {font-size: 1.2em; }
	h4 {font-size: 1.1em;}
	h3, h4, p{ padding:0 5%; }
	p {font-size: 1.2em;}
	
	
	h4, h5, h6 {font-size: .7em; margin: 0; padding: 0px 5% 0 5%; color: #333; font-weight: 300; line-height: 1.4em;}
	
	
}

.lge {font-size: 1.8em;}
.sml{font-size:.6em;  letter-spacing: .23em;}
.white {color: #fff; font-size: 1.2em;}
.ared {color: #FF4500;}
.red2 {color: #e00;}
.white {color: #fff; font-size: 1.8em; padding: 32px 15%;}


@media only screen and (max-width: 480px) {
.subhead {font-size: 1.2em;}
.hols {padding: 12px 6px;}
}

a, a:link, a:active, a:visited, a:hover
{color: tomato; border-bottom: 1px dotted; text-decoration: none; outline:none; opacity:.8;}

a {outline: none;}

a:hover{color: #fff; text-decoration: none ; outline:none; border:0; opacity: 1; background: #000;}

.red a {color: #496661;}
.red a:hover {color:#CF7000 ;}

 ul li, ol li {	 margin: 0px 2% 0 4%;  padding: 0 0 8px 0px; color: #6F9992; font-size: 1.08em;}
 
 @media only screen and (max-width: 480px) {
	 ul li { margin: 0px 2% 0 0%; }
 }

img { width: 100%; height: auto; padding: 0; border: solid 0px #fff !important;} 

/* menu stuff g'wan 'ere*/

 .content, .footer {text-align: left; background: #ddd; margin: 0;} 

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

	
	.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 0px 0 0; position: fixed;}
	
	@media only screen and (min-width: 481px) { 
		.header {width: 10%;} 
		.header2 {display: none;}
		 }
	
/*==========content ===============
#intro {background: #bbb; height: auto;  padding: 0;  margin: 0px;} */


.socmed { padding: 0px 0 0 23px; }
.one {color: #006;  font-weight: 100;}
.two {color: #A7E9FF; padding: 0;  font-weight: 100;}


#bar {background: #ddd; width: 100%; height:auto; padding: 0; margin:0; }

#bar a {color: orangered;} 
#bar a:hover {color: orangered;}

#bar h1 { font-size: 8.1em;  padding: 23px 32px 0 5%;  margin:0; font-variant:normal; color: black; letter-spacing: .02em;  }

#bar h3 {font-size: 2.1em; padding: 0px 0px 12px 5.8%;  letter-spacing: .32em; font-weight: 600; color: orangered; margin:0;  text-decoration: line-through #ddd;	 }

#bar img {padding: 8px 50px 0px 0px; }
#bar a {border: 0; color: #000;}

@media only screen and (max-width: 768px) { 
#bar { padding: 40px 0 0 0;}
#bar h1 {font-size: 5em;}
}

@media only screen and (max-width: 480px) { 
#bar {height: 360px;  padding: 0;} 
#bar img {padding: 0 0 12px 0;}
#bar h1  {font-size: 5em; padding: 23px 2.3% 23px 6%; line-height: 1.08em;}
#bar h3 {font-size: 1em; padding: 0px 2.3% 0 6%; letter-spacing: .15em;}
}


#social {width: 100%; height: 4px; background: orangered; padding: 69px 0 0 0; text-align: right;}
#social h3 {padding: 4px 2% 0 0;}
#social a {border:0;}
#social img:hover {opacity: .5;}

#first {background: #ddd; height: auto; padding: 0; margin:0px 0 0 0; width: 100%; }
#first img {width: 100%; height: auto;}


#half {width: 50%; height: auto !important; float:left;}

@media only screen and (max-width: 768px) {
#half {width: 100% !important;}
}

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

#second h2 {padding: 0 23% 12px 5%;}
#second img {border: 4px solid #fff; margin: 0 18px 0 0;}

@media only screen and (max-width: 768px) {
#second h1 {font-size: 2.5em; padding: 0px 0 0 5%;}	
#second h2 {font-size: 1.6em;}
}


@media only screen and (max-width: 480px) {
	#second {padding: 100px 0 0 0;}
#second h1 {font-size: 2em;}
#second h2 {padding: 20px 5% 0 5%; font-size: 1.25em;}	
}


#title {width: 100%; height: auto; float:left;  padding: 2% 0 2% 6%;}
#title h2 {color: #333; font-variant:small-caps; font-size: 1.8em;}
#title h3 {letter-spacing: .05em; }



#third {background: #232323; height: auto;  padding: 0; margin:0;  }


#third h2 {padding: 0 5% 32px 5%; color: #fff;}
#third p {color: #eee;}
#third img {border: 4px solid #fff; margin: 0 18px 0 0;}
	

.footer
{	background: orangered;
	font-weight: normal;	width: 100%; height: auto; bottom: 0; margin: 0; text-align: center; border-bottom: 12px solid #ce3700;}
	
.footer img {border: 0; padding: 0 12px 0 0;}
.footer.fixed
{position: fixed; bottom: 0; left: 0;}
.footer a {border: 0; padding: 3px 6px; color: black;}
.footer a:hover {opacity: 1; color: #FFf; background: #000; }
.footer h3 {font-size: 1.6em; line-height: 1.6em; margin: 0; padding: 0px 0 10px 0; font-weight: normal; font-variant:small-caps; color: white;} 
.footer p {font-size: 1em;  margin: 0; padding: 14px 0 10px 0; font-weight: normal; color: white;} 


@media only screen and (max-width: 480px) {
.footer.fixed {background: #3f1d1d;}
}


/* code for gallery on pages  https://galleria.io/  busy page huh - - - - - - -!*/

.galleria{ width: 100%; height: 550px; background: transparent; border-top: 20px solid #fff; border-bottom: 40px solid #fff;}

@media only screen and (max-width: 1024px) 
{	.galleria {height: 450px; }}


@media only screen and (max-width: 768px) 
{	.galleria {height: 360px; }}

@media only screen and (max-width: 480px) 
{	.galleria {height: 220px; }}

 


#box {background:#222; height: 240px;  width: 100%; color: #000; float: left; margin:0; }
#box img{max-width: 100%; height: auto; border: 0; padding: 0;}


#con {  height:400px;  width:100%; margin:0; background: transparent; float:left;}
#con p {padding: 1% 2.3%; margin: 0%; font-size: .88em; text-align: left; line-height: 1.6em; color: #777;}
#con h3 {padding:  2% 2.3%; margin: 0%; font-size: 1.15em; text-align: left; line-height: 1.6em; color: #777;}



#half {width: 50%; height: 600px; background: #EFF1F7; float: left;}




/* for desktop yada - - - - - - - - - - - - - - - - - - */

#navcon {width: 100%; height: 60px; background:#000 ; position:fixed; z-index: 50; border:0;}
#navcon img {padding: 10px 0 0 0; margin: 0;}

@media only screen and (min-width: 1601px) 
{ #navcon {width: 80%;}
}



@media only screen and (min-width: 2001px) 
{ #navcon {width: 60%;}
}


#nav2 h3 {padding: 12px 20px 0 0;   line-height: 50px;}
#nav2 img {margin: 0 0 0px 0; }
#nav2 img:hover {opacity: 0.7;}


@media only screen and (max-width: 480px) 
{ #nav {display: none;}
}

#nav h3 {padding: 10px 0 0 0px; font-weight: normal; font-size: 1.08em; color: #555; margin: 0;}

@media only screen and (min-width: 768px) {
#nav h3 {padding: 15px 0 0 130px; }	}

@media only screen and (max-width: 768px) {
#nav h3 { font-size: .85em; }	}

@media only screen and (max-width: 668px) {
#nav h3 { font-size: .8em; padding: 15px 0 0 125px; }	}


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




/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/

	
 .toggle, [id^=drop] {
 display: none;
}

nav {  margin:  0; padding: 0; width: 80%; position: fixed; z-index: 32;  float: left;}

@media only screen and (max-width: 768px) {
	nav {  margin:  0; padding: 0; width: 100%; position: fixed; z-index: 32;  float: left;}
	
}


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

nav a {
  display: block;
  padding: 0 18px;
  color: white !important;
  font-size: 14px;
  line-height: 60px;
  text-decoration: none; 
  border: 0 !important;
  opacity: 1 !important;
}

nav ul li ul li:hover { background: orangered !important; color: #ff0; border:0;}

nav a:hover { color: #444; border:0; background: transparent;}

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

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

nav ul ul li {
  width: 240px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 240px;
}

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

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

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


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

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


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

.toggle {
  display: block; 
  background-color: #000; /* colour of mobile device menu */
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  line-height: 60px;
  text-decoration: none;
  border: 0; margin:  0; text-align: left;
}

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

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

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

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

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

nav a:hover,
 nav ul ul ul a { background-color: tomato; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #000; padding: 0 0 0 6%;}

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:#f00;}

}


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






/*= = = = = =  web form = = = = */

textarea {background: #cbd6d6 url(bunny-white.png) repeat; margin: 6px 0; color: #fff; font-size: 1.4em; border: #ccc 2px dotted;}
textarea:hover {background:  #e9e9e9 url(bunny-white.png) repeat; color: #6F9992; }

.contact {margin: 0 110px 0 0; }
.email {margin: 0 110px 0 0;}
.phone {margin: 0 102px 0 0;}

.need { margin: 0 73px 0 0;}

.submit {padding: 12px 23px; font-size: 1.2em; margin: 23px 0 0 0; background: #5D8C8C; color: #fff; }
.submit:hover {background: #d00; color: #fff;}