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

body
{background: transparent url(golf.jpg) repeat; 	box-shadow: 0px  0px 60px rgba(23, 23, 23, 0.23);
 font-family: 'Muli', sans-serif;position: relative; -webkit-text-size-adjust: none; margin: 0;}
 
@media only screen and (min-width: 1601px) 
{body {margin:0 10% ; background: #e5e5e5 url(golf.jpg) repeat;}
}


@media only screen and (max-width: 1220px) 
{body {margin:0 ; background: #eee url(golf.jpg) repeat;}}

@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:2em; padding: 32px 12% 0 11%; color:#476b6b; font-weight: 300; font-variant:small-caps; 
font-family: 'Muli', sans-serif; letter-spacing: .08em;}

h2{font-size: 1.2em;  padding: 0 12%;  line-height: 1.6em; color:#1B6659; margin: 0; font-weight: 400 !important;}

h3{	font-size: 1.2em; line-height: 1.6em; padding: 0 12%; color: #777; font-weight: 300; margin: 0;}

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

h5 {font-size: .8em; padding:0 12%; color: #300; font-weight: 300; line-height: 1.8em; margin:0;}
.credit {text-align:right;}
.credit:hover { color: #fff;}

h6 {font-size: .95em; padding: 4px 8% 2px 12%; color: #fff; font-weight: 300; line-height: 1.8em;}
#second h6 {padding: 10px 8% 0 0%;}

p {font-size: .95em; margin: 0 ; padding:0 12%; font-weight: normal; line-height:1.8em; color: #444;}

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


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

/*.menu {margin: 0 0 0 32px; font-size: 1.2em;}*/
.menu2  {margin: 0 0 0 120px;font-size: 1.2em;}
.menu3  {margin: 0 0 0 100px;font-size: 1.2em;}
.menu4  {margin: 0 0 0 42px;font-size: 1.2em;}

.lge {font-size: 1.8em;}
.sml{font-size:.666em;  letter-spacing: .15em;}
.white {color: #fff; font-size: 1.2em;}
.red {color: #b00;} /* green - #1B6659*/
.red2 {color: tomato;}

.green {color: #20917F;}
.pink {color: #fff; font-size: 3em;}
.quote {background: url(quoteX.png) no-repeat; margin: 0 0 0 6%; font-style: italic; letter-spacing: .1em; } 

.subhead {font-size: 2.3em; padding:0 6% 12px 6%; font-weight: 100;}

.booknow {background: #A1E0ED; padding: 4% 10%; margin: 16px 0 0 1%; border: 1px solid #fff; box-shadow: 1px 1px 32px rgba(194, 209, 209, 0.88); opacity: .9; }
.booknow:hover  {background: turquoise;  box-shadow: 1px 1px 32px rgba(255, 255, 255, 0.88); opacity:1; color: white !important;}


table{margin:0 12% 0 0%; background: #EFF1F7; padding: 2% 2% 2% 1%; border: 1px solid #fff;}
form {margin: 0 12%;}
table h3 {padding: 0;}


.signup {background: #F2D1A8; padding:16px 12px ; color: #666; font-size: .7em; margin: 12px 0 0 0}
.signup:hover { background: #B79E80; color: white; transition: 1.8s;}

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

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

.submit {padding: 10px 23px; font-size: 1.2em; margin: 23px 0 0 0; background: #effcfa; border: 1px solid #fff;}
.submit:hover {background:#1B6659; color: #fff; transition: 1.8s;}

.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: #effcfa;}
fieldset { margin: 0 ; border:0; padding:0; }
fieldset h6{color: #5d5d5d;}


.msg {background: #e6f7f5; 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;}
}

a, a:link, a:active, a:visited, a:hover
{color: tomato; border-bottom: 0;text-decoration: none; outline:none; }

a {outline: none;}

a:hover{color: #7dc3d1; text-decoration: none; outline:none; border: 0; }

 ul li {list-style-type: disc; margin: 0px 2% 0 -5%; color:#444; padding: 0 0 8px 23px; font-size: .8em;}
 
 @media only screen and (max-width: 480px) {
	 ul li { margin: 0px 2% 0 0%; }
 }

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

/* menu stuff g'wan 'ere*/

 .content, .footer {text-align: left; background: transparent; padding: 0; 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;}
		 }
	


/*==========contentt ===============*/
#intro {background: transparent; height: auto;  padding: 0;  margin: 0px;} 


#first {background: white url(contour-50.png) repeat; height: 100%; padding: 0; margin:0; height: auto;}
#first img {margin:  0px; opacity: 1; border: 0; width:100%;}
#first h1 {font-variant:normal; padding: 3% 12% 0% 12%; color: #1B6659; font-size: 2.3em; line-height: 1.6em;}
#first p, #first h4, #first h3 {color: #555;}
#first ul li {	list-style-type: disc; margin: 0 0 0 4%;  color:#444; padding: 0 ; font-size: .9em;}

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



#bar {background: white url(contour-50.png) repeat; width: 100%; height:auto; padding: 60px 0 20px 0; margin:0; }
#bar h1 { font-size: 4.2em;  padding: 12px 0 0 0;  margin:0; text-align: center;   color: #05211C; font-variant:small-caps;  font-weight: 600; letter-spacing:0.023em; }
#bar h3 {font-size: 1.08em; padding: 16px 0px 0px 0; text-align:center;  letter-spacing: .5em; font-weight: 600; 
color: #900; margin:0;  }
#bar img {padding: 8px 0 0 0px;}

#bar a:hover {-webkit-filter: grayscale(70%);filter: grayscale(70%); transition: 2.3s ease;}


@media only screen and (max-width: 1024px) { 
#bar { padding: 120px 0 0 0;}
}

@media only screen and (max-width: 480px) { 
#bar {background: #fff;} 
#bar h1  {font-size: 4em !important;}
#bar h3 {font-size: 1em;}
}


#second {background: #fff; height: auto; padding: 0; margin: 0; width:100%;}
#second h1 {color: #20917F; font-variant:normal !important; font-weight: 400; padding: 0 12%;}
#second h2 {padding: 0 12% 12px 12%;}
#second img {border: 4px solid #fff; margin: 0 18px 0 0;}

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


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


#col {width: 100%; height: auto; float:left; background: white url(contour-50.png) repeat; padding: 0 0 4% 0;}

#col h1{font-size:2.4em; line-height: 1.8em; padding: 10px 8% 0 8%; color:#05211C; 
font-weight: 400 !important; font-variant:normal; letter-spacing: 0.023em; }


#col h2, #col p {padding: 32px 8% 0 8%; color: #05211C;}
#col h3 {padding: 0 8%; font-size: 1.08em; color: #258C7B;}


@media only screen and (max-width: 480px) {
	#title h3 { padding: 0 5% 0 0;}
	
#col h1 {font-variant:normal; ;}	
#title h2 {font-size: 1.2em; padding: 0 2%;}
}


#col1 {width: 25.3333%; height: auto;  float: left; padding: 0 0 0 6%;}
#col2 {width: 25.3333%; height: auto;  float: left; padding: 0 6%;}
#col3 {width: 25.3333%; height: auto;  float: left; padding: 0 6% 0 0;}

#col1 h4 {padding: 0; }


#cola {width: 100%; height: auto; float:left; background: #082B25 !important; padding: 4% 2%; border-top: 1px dotted #555;  border-bottom: 2px solid #fff;}
#cola h1 {color: white;  }
#cola2 {width: 100%; height: auto; float:left; background: transparent; padding: 4% 2%;}

#coltwo1 {width: 40%; height: auto; float: left; padding: 0 6% 0 4%;}
#coltwo2 {width: 40%; height: auto; float: left; padding: 0 8% 0 2%;}

#cola h3 {color: #fff;}
#cola2 img {/*max-width: 33.33% !important;*/ padding: 0 12px 0 5px;}

.button:hover {-webkit-filter: grayscale(70%);filter: grayscale(70%); transition: 2.3s ease;}

.box { padding: 8% 0% 0 0; margin:  0;  font-weight: 300; color: black; }

@media only screen and (max-width: 980px) 
{#col1 {width: 90%; height: auto;  float: left; padding: 2% 0%;}
#col2 {width: 90%; height: auto;  float: left; padding: 2% 0;}
#col3 {width: 90%; height: auto;  float: left; padding: 2% 0;}
}



@media only screen and (max-width: 1024px) 
{ #coltwo1 {width: 94%; height: auto; float: left; padding: 0;}
#coltwo2 {width: 94%; height: auto; float: left; padding: 0 ;}
}
	
	@media only screen and (max-width: 480px) {
 #col1 {width: 90%; height: auto;  float: left; padding: 2% 5%;}
 #col2 {width: 90%; height: auto;  float: left; padding: 2% 5%;}
 #col3 {width: 90%; height: auto;  float: left; padding: 2% 5%;}
 #coltwo2 h6 {color: #fff;}
	}
	
	
		@media only screen and (min-width: 1601px) {
#cola {width: 96%; height: auto; float:left; padding: 4% 2%;}
		}

 
 .flex-container
{  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;  margin: 0 0% 0 8%;
    display: flex; /* or inline-flex */ }

.flex-container>div 
{ width: 300px;
  margin:0px; padding:0;
  text-align: center;
 height: auto; 
 }

@media only screen and (max-width: 480px) {
	
	.flex-container>div 
{ width: 360px;
  margin:0px; padding:0;
  text-align: center;
 height: auto; 
 }
	
}


#mall  { background: #fff; width: 100%; margin: 0; height: auto; float:left;  padding:0 0 3% 0;}

#shop { background: #f5f5f5; width:92%; padding: 10px 2% 0% 2%; height: auto; float:left; margin: 0 2% 2.3% 2%; border: 1px dashed #fff;}

#shop-pic { background: transparent; width: 0%; padding:  0%; height: 0; float:left; }
#shop-txt { background: transparent; width: 100%; padding: 0 0 32px 0; height: 770px; float:left; }

#shop-txt img {max-width: 100% !important; padding: 12px 0 23px 0;}

		@media only screen and (max-width: 1024px) {
			#shop-pic { background: transparent; width: 0%; padding:0; height: 0; float:left; }
			
			#shop-txt{ background: transparent; width: 96%; padding: 0 2%; height: auto; float:left; }
					}


#shop-btn { background:#d3e2e0; width: 80%; padding: 0; height: 52px; float:left; margin: 0px 0% 10% 9%; box-shadow: 0px  0px 0px rgba(23, 23, 23, 0.23);}
#shop-btn a{color: #1B6659;}
#shop-btn a:hover{color: #fff;}
#shop-btn:hover { background: #1B6659; transition: 2.3s;}
#shop-btn h3 {font-size: 1.4em; text-align:center; padding: 6px 0 0 0; }

@media only screen and (max-width: 600px) {
#shop-btn { width: 80%; padding: 0; height: 52px; float:left; margin: 30px 0% 20% 9%; ;}
}


.bk-lt {width: 33%; height: auto; background: #ddd; float:left;}
.bk-rt {width: 67%; height: auto; background: #ddd; float:left;}


.lib {width: 96%; height: auto; float: left; background: #f5f5f5; padding: 1% 2% 1% 5%;}
.lib img {max-width: 100% !important;}
.cover {width: 30%; height: 350px; float: left; }
.cover img {max-width: 100% !important;}
.write {width: 70%; height: 350px; float: left;}

.vol {width: 48%; height: 400px; background: #ddd; float: left;}

.des {width: 50%; height: auto; background: #fff; float: left;}

#third {background: #244251 !important; height: auto;  padding: 0; margin:0;  }
#third h1 {color: white; padding: 0 18% 32px 12%;}
#third h2 {padding: 23px 18% 0px 12%; color: white;}
#third h3 {padding: 6px 18% 2px 12%; color: #afeeee; font-size: 1.08em;}
#third h4 {color: #fff;}
#third p {color: #fff; padding: 0 12% 0px 12%;}
#third img {border: 4px solid #fff; margin: 0 18px 0 0;}
#third  ul li {	list-style-type: disc; margin: 0px 12% 0 8%; color:#fff; padding: 0 0 8px 2%; font-size: 1em;}
#third a {color: #fff; border-bottom: 1px dashed #aaa; padding: 0 0 1px 0;}
#third a:hover {border: 0;}
	
#booking {margin: 0 35%; height: auto; width: auto;}
	
#map {background: #dae8e8; height: auto; padding: 0 0% 1% 0%;  width: 100%; float:left;}
#map img {border: 2px solid #fff; 	box-shadow: 0px  0px 60px rgba(23, 23, 23, 0.23);}
#map a {border: 0;}
#map a:hover {opacity: .9;}


#insta {width: 100%; height: auto; background: #dae8e8 url(contour-50.png) repeat; padding: 5% 0%;}
#insta h2 {padding: 0; font-weight: 600; color: #666; margin: 0; text-align: center !important;}


.noborder {border: 0px;}

.footer
{	background: #082B25;
	font-weight: normal;	width: 100%;
	height: auto; bottom: 0; margin: 0; text-align: center;}
.footer img {border: 0;}
.footer.fixed
{position: fixed; bottom: 0; left: 0;}
.footer a {color: white; border: 0;}
.footer a:hover {color: tomato; background: transparent;}

.footer p {padding:0; color: gainsboro;}
.footer h3 {font-size: 1.4em; line-height: 1.6em; margin: 0; padding: 0px 0 10px 0; font-weight: normal; color: #fff;} 
.footer h4 {font-size: 1em;  margin: 0; padding: 0px 0 10px 0; font-weight: normal; color: #fff;} 


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


/* =========== code for transform of trip tiles on home page ========== */



#box { height: auto; width:33.3333% ;float: left; margin: 0; position:relative; padding:0; background: #ccc; -webkit-filter: grayscale(30%);filter: grayscale(30%);}
#box:hover {-webkit-filter: grayscale(0%);filter: grayscale(0%); transition: 2.3s ease;}
#box img {width: 100%; padding: 0; margin: 0;}


@media only screen and (max-width: 1024px) {
	#box { height: auto; width:50%;	border: 0px; float: left; margin: 0px 0 0 0; position:relative; }
	
}

#boxwhat { height: auto; width: 23%; border: 0px; float: left; margin: 0 1% 0 1%; }

#boxmenu { height: auto; width: 23%;	border: 0px; float: left; margin: 0% 1% 23% 1%; }
#boxmenu a:hover {opacity:.8;}


@media only screen and (max-width: 1024px) 
{#box, #box2, #box3 {width: 50%;}
}

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

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


#advert-canoe, #advert-bike, #advert-kayak {width:95%; height: 120px;
   padding: 0 2.5% 0px 2.5%; margin: 0; float: left;}

#advert-canoe, #advert-bike, #advert-kayak {background-color: #082b25;}

@media only screen and (max-width: 480px) 
{#advert-kayak {background-color: #082b25;} 
}



#advert-canoe h2, 
#advert-bike h2, 
#advert-kayak h2 
{font-size: 1.2em; padding: 2.3% 0 10px 6%; color: #FFBB00; margin: 0; line-height:1.2em;} 

#advert-canoe h4, 
#advert-bike h4, 
#advert-kayak h4 
{font-size: 0.95em; padding: 0 0 0 6%; line-height: 1.4em; margin: 0; color: #fff;}

#advert-canoe a, #advert-bike a, #advert-kayak a {color: #fff;}
    
#advert-canoe:hover, #advert-bike:hover, #advert-kayak:hover  {opacity: 1; background: #b00;}


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

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    80% {top: 0px;}
}

/* Standard syntax */
@keyframes mymove {
    80% {top: 0px;}
}



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

.galleria{ width: 100%; height: 480px;}

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


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

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


/* navigation section below*/
#navcon {width: 100%; height: 60px; position:fixed; z-index: 50;}


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


#nav2 {width: 50%; height: auto;  margin: 0px 0 0 50%; padding: 0; float: right;  position: fixed; z-index: 60; 
text-align:right; height: 60px; background:  #082b25;}

@media only screen and (max-width: 1024px) {
	#nav2 {width: 100%; height: auto;  margin: 60px 0 0 0; padding: 0 0 0 23px; float: right; position: static;   z-index: 30; text-align:left; 
	background: #082b25; opacity: 1;}
}

@media only screen and (min-width: 1601px) 
{#nav2 {margin:0 0 0 40% ; padding: 0 0 0 0%; width: 40%;}
}

#nav2 h3 {padding: 0px 20px 0 7%;   line-height: 60px; font-size: 2em; }

#nav2 a {color: white;}
#nav2 a:hover {color: #c00;}

#nav2 img:hover { opacity: .32;}

/*

@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: 1024px) {
#nav h3 {padding: 15px 0 0 130px; }	}

@media only screen and (max-width: 1024px) {
#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; }


/* 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: 50%; 
  position: fixed; 
  z-index: 32;  
  float: left; 
  background:  #082b25;}

@media only screen and (max-width: 1024px) {
	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: #082b25; 
  z-index: 20;      /* here for 2nd part of menu */
  list-style-type: none; opacity:1;
}

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

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

nav a:hover { 
  color: #444; opacity: 1;}

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

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

nav ul ul li {
  width:180px;
  float: none;
  display: list-item;
  position: relative;
}
	
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 180px;
  width:270px;
}

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

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

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


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

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


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

.toggle {
  display: block; 
  background-color: #05211c; /* colour of mobile device menu */
  padding: 0 20px; 
  color: #fff;
  font-size: 14px;
  line-height: 60px;
  text-decoration: none; letter-spacing: .1em;
  border-bottom: 0px solid #fff; margin:  0;
}

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

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

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

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

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

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

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

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

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