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

body
{	background: #eee url(foot-noise.png) repeat ; font-family: 'Open Sans', sans-serif; 
position: relative;	-webkit-text-size-adjust: none;  box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.23);}

body *
{	text-shadow: none;}

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

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

h1{padding: 30px 7.5% 32px 7%; color: #466603;  margin: 0px;  font-size: 2em;  line-height: 1.6em;
    font-family: 'Proza Libre', sans-serif;; font-weight: 500;}

h2{font-size: 2.3em;   color: seagreen; padding: 0px 7.5% 6px 7.5%;   margin:0;   line-height: 1.8em; font-weight: 400; font-family: 'Proza Libre', sans-serif;}

h3{	font-size: 1.6em; line-height: 1.6em; padding: 0px 7.5%; font-weight: 500; color: #466603;}

h4{	font-size: 1.4em; padding: 0 7.5% 0 7.5%; color: #444B66; font-weight: 400; margin: 0; line-height: 1em;}

h5{	font-size: 1.25em; padding: 0 0% 32px 7.5%; font-weight: 100; color: #320432; line-height: 2em;}

h6{	font-size: 1.08em; padding: 1% 7.5% 0 7.5%; color: #444B66; font-weight: 400; margin: 0; line-height: 1.6em;}

p{ font-size: 1.2em;  padding: 0px 7.5%;   margin:0px;  font-weight: normal; color: #323956; line-height: 1.6em}


@media only screen and (max-width: 480px) { 
 h1 {padding: 0 3%; font-size: 2.3em !important;} 
 h2 {font-size: 1.4em; padding:  0px 3% 0 3% !important;}
 h3 {font-size: 1.2em; padding: 12px 3% 0 3%; }
 p {padding:0px 3% 12px 3%; 	font-size: 1em;  }
}


img { max-width: 100%; height: auto; margin: 0 32px 12px 0; }

.look {color: tomato; font-size: 1.2em; text-shadow: 3px 3px 23px pink; padding: 0 0 0 5%; letter-spacing: .35em;}
.opacity {opacity: .5; color: tomato; font-size: 1.5em;}
.opacity2 {opacity: .32; color: white; font-size: 1.8em; padding: 0 32px 0 0;}

@media only screen and (max-width: 480px) {	 
.big{  font-size:1.2em; opacity:.9; line-height: .8em;}
.red {color:#ED2939;  font-size:.8em; opacity:.5; line-height: .8em; font-family: 'Open Sans', sans-serif; border-bottom:0; padding: 0 0 23px 0; text-shadow: 0;}
 }
 
 .spr { color: yellowgreen; font-size: 1.4em; }
 .sum { color: deeppink; font-size: 1.4em; }
 .aut { color: orange; font-size: 1.4em; }
 .win { color: skyblue; font-size: 1.4em; }



a, a:link, a:active, a:visited, a:hover
{color: #F76565; border-bottom: 0;text-decoration: none; outline:none;}
a {outline: none;}
a:hover{ border-bottom: 6px solid tomato; text-decoration: none; outline:none; background: #fff;  transition: 2.3s; color: black;}
a:active {background: #3C84BC; border-bottom: 6px solid #3C84BC; color: white;}


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

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

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


ul li {	list-style-type: disc;	margin: 0 2.3%;color: #111; padding: 0;}

#contain 
{height: auto; width: auto; box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.4); background: #d7d7d7;}


/* menu stuff g'wan 'ere*/
nav:not(.mm-menu)
{display: none;}

#menu p{color: #ffc; padding: 20px; font-size: 1em; background: transparent; font-weight: normal;}
#menu h3 {font-size: 1.2em;}


.header
{	background: transparent;
	font-weight: normal;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; top: 0;
	height: 46px; 
	padding: 0 50px; position: fixed; opacity: .8;}

	
	.header2
{	background: #000;
	font-weight: normal;
	width: 100%; top: 0;
	height: 50px; opacity: .7;
	padding: 7px 0 0 0; position: fixed;}
	
	
	.header a
{
	background: center center no-repeat #4A6017;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 12px;
	left: 23px;
}
	
@media only screen and (min-width: 480px) 
{ 		.header {width: 10%;}
		.header2 {display: none;}
		.header FixedTop {display: none}
        .header a {display: none;}
}
	
.header.fixed{ position: fixed; top: 0; left: 0;  }


/* - - - nav - - - */
/* for desktop yada */
#nav 
{width: 100%;  background: transparent; position: fixed; border-bottom: 0px; padding: 0 0 0 0px; z-index: 10; text-align: right;  opacity: .9;}

@media only screen and (min-width: 1600px) 
{#nav { width: 68%;  margin: 0; padding: 0 2% 0 0;}}

#nav a {border: 0; font-variant:small-caps; color: white; padding: 4px 6px 6px 6px; background: #4F6A19; }
#nav a:hover {background: #85B51E;  padding: 30px 6px 23% 6px;  border-top: 3px solid #fff;   transition: 1.5s; color: yellow; opacity: .9; border-bottom: 132px solid #FE2897; }

#nav a:active {background: orangered;  padding: 40px 6px 260px 6px;  border-top: 22px solid #fff; color: #fff !important; opacity: .8; } 

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

#nav h3 {padding: 0px; font-weight: normal; font-size: 1.2em; color: #fff; line-height: 50px; font-weight: 700;}

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



/*==========content ===============*/

#banner {width: 100%; height: auto; background: yellowgreen url(../img/banner.jpg) repeat;}
#banner h1{padding: 80px 0 12px 0; color: #fff;  
margin: 0px;   font-size: 5.6em; text-shadow: 6px 6px 32px #000; text-align: center;}

@media only screen and (max-width: 480px) 
{ #banner h1 {font-size: 3.8em !important; padding: 55% 0;} 
#banner h2  {font-size: 1.2em; padding: 0 3% 20px 11% !important; line-height: 1.25em; letter-spacing: .21em;}
}

#banner a {color: #fff;}
#banner a:hover {color: yellow; background: transparent; border: 0;}


#intro {background: #4A6017; height: auto; padding: 0;}
#intro h2 {font-size: 1.3em; padding: 14px 0 8px 0%; color: white; letter-spacing: .1em; text-align: center;}
#intro img {width: 100% !important;}

@media only screen and (max-width: 480px) {
#intro {  line-height: 1.4em; margin:0; border:0;  height: auto; padding: 45% 0 55% 0; } 
#intro h2 {font-size: 2.5em;}
}


#first { height: auto; padding-top: 0px; padding-bottom: 0px; background: mintcream;}
#first h1 {font-size: 2.3em;  font-weight: 500;}
#first h2 {padding:0% 7.5% 0 7.5%;}

#first img {width: 100%;}

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


.boxed {width: 87.5%; padding: 0 5% 0 7.5%; float: left;}

.box1, .box2, .box3 {width: 29%; margin: 0 .5%; padding: 2% 1% 3% 1%; height: auto; float: left;  border-radius: 6px; border: 4px solid white;}

.box1 {background: #e3f1f7; }
.box2 {background: #f2dce0; }
.box3 {background: #f4f3d9;}

@media only screen and (max-width: 768px) {
	
.box1, .box2, .box3 {width: 96%; margin:1% 0%; padding: 10% 2% 0% 2%; height: 300px; float: left;}	
	
}



#second { height: auto; width: 100%; background: WhiteSmoke; }

#second h1 {padding: 5.3% 7.5% 0 12%; font-size: 3.2em;}
#second h2 {padding: 0 12%;}
#second h4  {padding: 0 12%; font-size: 1.8em; line-height: 1.6em;} 
#second p {padding: 0 12%; letter-spacing: .1em; line-height: 1.8em;}

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


#third { height: auto;  background: white; }
#third h1 {color: orangered; font-size: 3em;}
	

	
#four{ height: 23px;   background: hotpink; width: 100%; padding: 0; margin: 0;} 
#four h1 {font-size: 3em; color: skyblue;}
#four h3 {color: white;}
#four p{color: white;}



#footer {
	background: #4A6017; 
  background-image: linear-gradient(#708937, #37480F);
	width: 100%; height: auto; margin: 0; text-align: right;}

#footer p {color: #ff9;}
#footer h2 {color: pink !important;}
#footer h3 {font-size: 1.6em;  margin: 0; padding:40px 4% 0 4%; font-weight: normal; color: yellow;} 

#footer a {color: #fff; border:0;}
#footer a:hover {color: pink; background: transparent;}

.dark {width: 100%; height: auto; background: hsl(78, 66%, 17%); padding: 40px 0 0 0;}

.sml {font-size: .4em; padding: 0 0 0 4%; color: yellow; }
.sml2 {font-size: .6em; padding: 0; color: white;  line-height: .01em;}
.sml3 {font-size: .6em;}

@media only screen and (max-width: 480px) {
  #footer	{ position: relative;	font-weight: normal;}
  #footer h3 {font-size: 1.2em !important; line-height: 1.8em; margin: 0; padding:23px 0 0 3% !important; font-weight: normal; bottom: 0;} 
}



/* code for gallery -  https://galleria.io/  */

.galleria {width: 100% !important; height: 850px !important; background:#F5FFFA; padding: 0 !important; margin:3px 0 !important; float: left;}

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



@media only screen and (max-width:800px) 
{	.galleria {height: 520px !important; }}



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



/*form on about page ------------- */

.first {margin: 0 102px 0 0; }
.email {margin: 0 106px 0 0;}
.phone {margin: 0 101px 0 0;}


.submit {padding: 10px 23px; font-size: 1.2em; margin: 23px 0 0 0; background: #E3F1F7; border: 0;}
.submit:hover {background:#444B66; border: #fff; color: white;}

.hols {background: transparent; padding: 10px 12px; margin: 6px;}
.hols:hover {background:pink;}

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

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


#trips {background: pink; font-size: 1em; color: #800; width: 100%; padding: 6px 0px 6px 6px; } 

textarea {background: #E3F1F7;}

fieldset { margin: 0 ; border:0; padding:0;}
fieldset h6{color: #111;}

.msg {background: #FFF8DC; height: 50px; font-size: 1em; width: 85%; padding: 5px 0px 5px 10px;color: #423636; }

.ban {color: orangered; font-size: .8em; font-weight: 100;}
.textcircle {color: #fff;}

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