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

body
{	background:#c5c5c5 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.4);}

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% 2px 7%; color: skyblue;  margin: 0px;  font-size: 2em;  line-height: 1.6em;
font-family: 'Comfortaa', cursive; font-weight: 100;}

h2{font-size: 2.3em;   color: #320432; padding: 0px 7.5% 6px 7.5%;   margin:0;   line-height: 1.8em; font-weight: 400;}

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

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

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

h6{	font-size: .89em; 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: 3.2em !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;  padding: 0; letter-spacing: .6em; font-weight: 400; }
.opacity {opacity: .5; color: tomato; font-size: 1.5em;}
.opacity2 {opacity: .32; color: white; font-size: 1.8em; padding: 0 32px 0 0;}

.fas, .fab {padding: 0 15px 10px 0 ; color: tomato;}

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

.blue {color: skyblue;}

.contact {background: #A6D6EC; padding: 12px;}
.contact a{color: white !important; padding:12px 16px;}
.contact a:hover{ background: #4B516B; padding: 12px 16px;}
/*
.button {background: #A8D8EE; padding: 16px; font-size:.5em; margin: 16px 0; color: white;}

/*input {background: #A7D7ED; height: 50px; color: white; font-size: .6em;}*/


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: 0px 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: 0px 0 0 7.5%;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 #330433;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: -2px;
	left: 31px;
}
	
@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;  }




/* ------------------------- content --------------------------- */

#banner {width: 100%; height: auto; background: skyblue url(banner.jpg) repeat; padding: 50px 0;}
#banner h1{padding: 10% 0% 0px 0%; color: #fff;  margin: 0px;   font-size: 5.2em; text-align: center; letter-spacing: .17em;}
#banner h2 {font-size: 1.6em; letter-spacing: 0.1em; padding: 0% 0% 3% 0% !important;  color: navy; margin: 0; font-weight: 100; font-family: 'Comfortaa', cursive; text-align: center;}

@media only screen and (max-width: 600px) 
{
#banner {padding: 20px 0;}

 #banner h1 {padding: 32% 0 12% 0; font-size: 4em !important;} 
#banner h2  {font-size: 1.4em; padding: 0 12% 14% 12% !important; line-height: 1.25em; letter-spacing: .21em;}
}

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



#intro {background: #fff; height: auto; padding: 0;}
#intro img {width: 100% !important;}

@media only screen and (max-width: 480px) {
#intro {  line-height: 1.4em; margin:0; border:0;  height: auto; } 
}


#first { height: auto; padding-top: 0px; padding-bottom: 0px; background: ghostwhite;}
#first h1 {font-size: 3.2em;  font-weight: 100;}
#first h2 {padding:0% 7.5% 0 7.5%;}




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


.boxed {width: 87.5%; padding: 0 5% 0 7.5%; float: left;}
.boxed a {border-bottom: 1px dotted;}
.boxed a:hover {border-bottom: 0;}

.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: 1024px) {
	
.box1, .box2, .box3 {width: 96%; margin:1% 0%; padding: 10% 2% 0% 2%; height: auto; float: left;}	
	
}


.contain {width: 100%; height: 500px; float: left;}

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


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

#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;} 
#second p {padding: 0 12%; letter-spacing: .1em; line-height: 1.8em;}

@media only screen and (max-width: 920px) 
{ 	

#second h1 {padding:  5.3% 7.5% 0 4%;}
#second h4, #second p {padding:  0% 4% 0 4%;}

}



#third { height: auto;  background: #fff; }
#third h1 {color: orangered; font-size: 3em;}
	
#pic1 {margin: 0; height: auto; width: 80%; background: #F8F8FF ; padding: 0 10%;}
#pic1 img {width: 100%;}
	
#four{ height: auto;   background:  #444b66; width: 100%; padding: 0; margin: 0;} 
#four h1 {font-size: 3em; color: skyblue;}
#four h3 {color: white;}
#four p{color: white;}



#footer
{background: #444b66  url(banner-2.jpg) repeat; width: 100%;  margin: 0; text-align: right;}

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


.sml {font-size: .666em; padding: 0 0 0 4%; color: tomato; }
.sml2 {font-size: .7em; padding: 0; font-weight: 400;}
.sml3 {font-size: .88em; padding: 0 0 0 8%; color: tomato; }

.blue {background: #def1f9; padding: 12px 24px; color: #4B516B; margin: 0 8%; font-size: 1.3em; border-radius: 6px; box-shadow: 6px 8px 12px rgba(115, 193, 226 1); letter-spacing: .023em;}

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

}


#width {width: 30%; padding: 0 65% 0 5%; background: transparent; float: left;} 

@media only screen and (max-width: 600px) {
	
	#width {width: 90%; padding: 0 7% 0 3%; background: transparent; float: left;}
}

/*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:#A7D7ED ; color: #4B516B; font-size: 1.08em; padding: 6px; border: yellow 1px solid;}

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

*/


/* new nav include drop down menu
/* nav */

.navlt {width:77%; height:auto; float:left; font-variant:small-caps;}

.navrt {width: 20%; height:auto; float:right; background:tomato; border: 2px solid white; margin:16px 8px 0 0; border-radius: 6px; padding: 6px 0; box-shadow: 0px 0px 0px rgba(23, 23, 23, .32); font-variant: normal !important;}

.navrt a { padding:0; line-height: 1.4em; color: white !important;}
.navrt a:hover {background: transparent !important; color: #000 !important;}

.navrt p {color: #fff; text-align: center; font-size: 1em; font-weight: 100; }

 @media only screen and (max-width: 920px){
.navlt {width:100%;}
.navrt {width:100%; margin: 0; border:0; border-radius: 0; letter-spacing: .1em; margin: 6px 0 0 0;}
}





nav { margin: 0; width: 100%; position: fixed;   float: left; background:  skyblue url(banner.jpg) repeat; 
padding:6px 0; height:auto;  z-index: 10; }

 @media only screen and (min-width: 1600px) { nav {width: 70%;}
}


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

nav a {  display: block; padding: 12px; color: navy !important; line-height: 50px; 
  text-decoration: none; font-size: 1.1em;}

nav a:hover {background: skyblue;   transition: 0.32s; color: #fff; opacity: 1; }


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

@media only screen and (max-width: 920px) {	nav ul {text-align:center;}	}



nav ul li {  margin: 0px; display: inline-block; font-size: 1em; float: left;   z-index: 20;
  	list-style-type: none; padding:0;}                       /* here for 2nd part of menu */

nav ul li:hover { opacity: 1; }


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

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

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

nav ul ul li {
  width:190px; background: #c1e5f4; border-bottom: 0;
  float: none;  display: list-item;
  position: relative; opacity: .8; margin: 8px 0 0 0;
}
	
	
li > a:after { content: ' '; }

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


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

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


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

.toggle {
  display: block; 
  background-color: #5899b5; /* colour of mobile device menu */
  padding: 0;  color: #fff;   line-height: 50px;
  text-decoration: none; width: 100%; font-variant: small-caps;
  border: none; margin:  0; text-align: center; letter-spacing:0.23em;
}

.toggle:hover {  color: yellow; }

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

nav ul li {  display: block;  width: 100%; ; padding: 0; color: #fff;}

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

nav ul ul ul a { padding: 0; }

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

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

nav ul ul {  float: none;  position: static;  color: #fff !important; background-color: #111; }

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