/* main stylesheet for kayakinglondon.com - each page has alterations for that page in the head section */ 

/*
dark blue to light grey-blue
#070d59
#1f3c88
#5893d4
#ceddef
*/

html, body
{	padding: 0;	margin: 0;  scroll-behavior: smooth; }

body
{background: #ebf0f5 url(wave-50.png) repeat; 
	font-family: 'PT Sans', sans-serif;
box-shadow: 0px 0px 60px rgba(23, 23, 23, .6);
 position: relative; -webkit-text-size-adjust: none; margin: 0; border-left: 0px; }

 
@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:2.5em; 
padding: 1% 12% 0px 12%; 
color: #fff; 
line-height: 1.4em; font-variant:normal; 
font-weight: 500;
font-family: 'PT Sans', sans-serif; letter-spacing: -.023em; }

.redh1 {color: tomato; padding: 0 10px 0 0px;}

h2{font-size: 2em;  padding: 4% 5% 2% 5%;  line-height: 1.6em; 
color: white; margin: 0;
font-weight: 500;
}

h3{	font-size: 1.2em; line-height: 1.8em; padding: 0 5% 4px 5%; color: #fff; font-weight: 300; margin: 0;     }

h4 {font-size: 1.2em; padding: 12px 5% 0 5%; color: #fff; font-weight: 300; line-height: 1.4em; font-family: 'PT Sans', sans-serif; }

h5 {font-size: 1.4em; padding: 0px 5% 0 5%; color: #fff; font-weight: 100; line-height: 1.4em; }
h6 {font-size: 1.2em; padding: 23% 5% 0 5%; color: #fff;  line-height: 1.2em;  font-weight: 900;}

p{font-size: 1em; 
margin: 0; 
padding:0 5% !important; 
font-weight: normal; 
line-height:1.7em; 
color: hsl(207, 81%, 15%); 
text-align: left;    
}

@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: 23px 3% 0 3.2%; line-height: 1.4em;}
	h2 {font-size: 2.3em; padding:12px 5% 23px 5%;}
	h3 {font-size: 1.6em; }
	h4 {font-size: 1.1em;}
	h3, p{ padding:0 5%; }
	
	h4{font-size: .8em; padding: 12px 5% 0 5%; color: #333; font-weight: 300; line-height: 1.6em;}
}



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

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

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

.buttons {background:hsl(207, 80%, 86%); padding: 12px; border-radius: 6px; border: 2px solid white; }

.buttons a{color: yellow !important;}

.big {font-size: 3.2rem ; font-weight: 900; 
opacity:.7;
font-variant: small-caps; background: white; border-radius: 6px;padding: 4px 12px;}


    @media only screen and (max-width: 600px) {
		
	.big{ font-size: 1.8rem;}	
	}

.big:hover {background: transparent; transition: 2s;}

.lge {font-size: 1.8em;}

.lger {font-size: 1.25em;}

.sml{font-size:.7em;  padding: 10px 0 20px 0%;}

.sml2{font-size:.6em;  padding: 10px 0 20px 0%; letter-spacing: .6rem;}

.more{font-size:.8em;  padding: 6px 6px; background: #243D49;}

.more2{font-size:.8em;  padding: 6px 6px; background: #243D49; color: white !important;}

.more2:hover {color: white !important;}

.boat { color:gold; margin: 8px 0 0 0;}

.reduce {font-size: .6em; line-height: 1em;}

.covid {border: 3px solid white; background: white url(contour2.png) repeat; margin: 2% 5% !important;}

.button {background: yellow; padding: 6px 12px; display:inline;}

.cta {background: white; padding: 12px; font-size: 1em; letter-spacing: .2em;}
.cta:hover {background: #070D59; color: white !important;}

.space {  clear: both;  height: 4px;  color: transparent; }

.ylw  {background: #ffa; padding: 12px; border-radius: 6px;}

.xmas {
	border-radius: 8px;
	background: darkseagreen url(css/snow.png) repeat; 
	color: white;
	padding:16px 16px;
	border: white 2px solid;
	box-shadow: 0px 0px 60px rgba(23, 23, 23, .2);
	}
	
	
	.xmas:hover {
		background:limegreen;
        transition: 2s;
	}
	
		.xmas a {color: #ffe !important;}
		.xmas a:hover {color: white !important;}
	

    @media only screen and (max-width: 600px) {
	.xmas{
		background: mediumseagreen; 
		line-height:4rem;
		box-shadow: 0px 0px 60px rgba(23, 23, 23, 0);
			}
			
			
		.xmas a {color: yellow !important;}		
}



a, a:link, a:active, a:visited 
{ text-decoration: none; outline:none; border-bottom: 1px dotted; 
color: white;}
a:hover {  border-bottom: 5px solid; color: gold;}
a:active { background: white; opacity: .7; transition: 1s;}


ul li, ol li {	margin: 0px 2% 0 4%;  padding: 0 0 8px 0px;   }
 
@media only screen and (max-width: 480px) {
 ul li { margin: 0px 2% 0 0%; } }
 

img { max-width: 100%; height: auto; padding: 0; margin:0;} 

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

.headertop
{background: #fff; font-weight: normal;  width: 100%; top: 0; height: 0px; padding: 0; position: absolute; z-index: 10; margin: 0;  }
.headertop h4 {font-size: 1em; color: #fff; padding: 16px 1.08% 0 0; text-align: right; margin: 0;}
.headertop p {font-size: .9em; color: #fff; padding: 16px 1.08% 0 0; text-align: right; margin: 0; line-height: 1.5em;}


.header {background:/*#B3BED0 */ #070D59; font-weight: normal; width: 100%; height: 0px; margin: 0;	padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; top:0;	
  position: fixed; }
	

.header2
{	background:#070D59;	font-weight: normal;
	-moz-box-sizing: border-box; box-sizing: border-box;	
	width: 100%; top: 0; height: 50px; opacity: .9;
	padding: 0; position: fixed;}
	

@media only screen and (max-width: 481px) { 
.header {width: 10%;} 
.header2 {display: none;}}




#logo {width:50%; height: 180px; background: hsl(207, 81%, 16%) url(cross.png)repeat; float: left; margin: 60px 0 0 0 ; padding: 0; }

#logo h1 {border: 0px; padding: 3% 0 3% 3%; margin:5% 44% 5% 5% ;}

#logo img {padding: 8% 0 0 4.5%;}

#logo a {border: 0;}

#logo h5 {border-top: 2px solid;  margin: 0 40% 0 5%;}

@media only screen and (max-width: 767px) {
#logo {width: 100%; height:160px;  float: left; 
padding: 80px 0 0px 0;}
}


#strap {width: 50%; height: 200px; background: hsl(207, 81%, 16%) url(cross.png)repeat; float: left; text-align: right; margin: 40px 0 0 0;}

#strap h3 {padding: 0% 3.2% 1% 3.2%; font-size: 2.3em;}

#strap h4{color: white; font-size: 1em; text-align: right; padding: 14px 3.2% 0 0; letter-spacing: .04em;}

#strap p {color: white; text-align: right; padding:0% 3.2% 0 0; font-size: .9em; font-variant: small-caps;}

#strap a{border-bottom: 0;}

#strap a:active {background: #115E9E;}


@media only screen and (max-width: 768px) { 
#logo {margin: 0; width: 100%; float: left; }
#strap h4, #strap p, #strap h3 {text-align:left; padding: 0 0 12px 5%;}
#strap {height: auto; width: 100%; float: left; text-align: left;
margin:0;
}
}
}



// content - top

#bar {background: hsl(207, 81%, 15%) !important; width: 100%; height:auto !important;  float: left;}

#bar img {padding:0 !important ; margin: 0 !important; border: 0;}

#bar h2 {font-size: 3em; color: #4e4965; font-family: 'Merriweather', serif; line-height: 1.2em; }

#bar a {border: 0;}

@media only screen and (max-width: 768px) { 
#bar { padding: 40px 0 0 0;  margin:0;}
}

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




#over-bar { height: 0px; background:transparent; padding: 0; margin-top:0; opacity: 1; width:100%; }
#over-bar h2 { padding: 15% 0 0 5%; margin: -550px 0 0px 0; font-size: 2.7em; color: #4e4965;  line-height: 1.2em; opacity: .9;}
#over-bar a {color: white; padding: 4px 6px; border: 0 !important; background: skyblue; border-radius: 8px;}
#over-bar a:hover {color: tomato !important; border: 0 !important; background:  #115E9E;}


@media only screen and (max-width: 768px) { 
#over-bar { height: 284px; }
#over-bar a {color: #fff;}
#over-bar h2 {font-size: 2em; margin: -290px 0 0px 0;}
}

@media only screen and (max-width: 480px) { 
#over-bar { height: 296px; }
#over-bar h2 {font-size: 1.2em; margin: -250px 0 0px 0;}
}


#news {
	height: auto; width: 100%; background: #eee; 
float: left; }

#news p {padding: 0 5%;}

#news h1 {padding: 2% 5% 0 5%; color: #266392; }

#news h2 {padding: 6% 5% 0 5%; color: navy; }

#news h3 { font-size: 1.4em !important; padding: 1% 5%; color:/* #266392 */ #243D49;  font-weight: 400;}

#news a {color: #006;}

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


#news h2 {
	font-size: 1.3em; 
	padding: 4% 3% 23px 3%; 
	line-height: 1.6em; 
	font-weight: 100;}
}


#news h3 {font-size: 1.08em;}
}


@media only screen and (max-width: 480px) { 
#news  {margin: 50px 0 0 0; !important; }

}



// content - proper
/*
#hold-a {width: 100%; height: auto; float: left; background: transparent; margin: 160px 0 0 0;}
#hold-a p, #hold-b p {text-align: left; padding: 30px 5% 6px 5%;}

#hold-a a {border: 0;}
*/

#first img, #second img, #third img, #fourth img, #fifth img {width: 100%; padding: 0%; border: 1px solid #fff; margin:0;}
#contain {width: 33.333333%; height: 650px;}

#first {background: #1F3C88; height: 700px; padding: 0; margin: 0; width: 33.3333%; float: left;}
#first a {border-bottom: 1px dotted white; padding: 2px 0 1px 0;}
#first a:hover {border-bottom: 0;}
#first h1 {padding: 5% 3% 0 5%;}
#first h3 {padding: 10px 5% 0 5%;}
#first p { padding: 0 5% !important;}

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

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


#second {background: /*#e0403f */ #CEDDEF; height:700px; padding: 0; margin: 0; width:33.3333%; float: right;}
#second a {color: #006; border-bottom: 1px dashed;}
#second h1 {color: #1F3C88; padding: 2% 5% 0 5%;}}
#second p {padding: 0 5% !important;}


@media only screen and (max-width: 1024px) { 
	 #second p{ padding: 6% 5% 0 10% !important; }
}

#third {background: /*#0084a1 */ #1f3c88; height: 700px;  padding: 0; margin:0; width: 33.3333%; float: left;}

#fourth {background: /* #509dd8 */#5893d4 ;  height: 700px;  padding: 0; margin:0; width: 33.3333%; float: left; }
#fifth {background: /*#4e4a65*/#266392 ;  height: 700px;  padding: 0; margin:0; width: 33.3333%; float: left; }
#sixth {background: /*#6f4c77*/ #E0403F;  height: 700px;  padding: 0; margin:0; width: 33.3333%; float: left; }

#seventh {display: block; background:#ff7d15;  height: 590px;  padding: 0; margin:0; width: 33.3333%; float: left; }
#eighth {background: #f5f5f5 !important; display: block;   height: 590px;  padding: 0; margin:0; width: 33.3333%; float: left; }
#ninth {background: #6f4c77; display: block;  height: 590px;  padding: 0; margin:0; width: 33.3333%; float: left; }

#tenth {display: none; }
#eleventh {display: none; }
#twelfth {display: none; }


@media only screen and (max-width: 1024px) { 
#first, #second, #third, #fourth, #fifth, #sixth 
{width: 50%; height: 700px;}



}

@media only screen and (max-width: 768px) { 
#first, #second, #third, #fourth, #fifth, #sixth 
{width: 100%; height: auto !important;}
}
	
	
#second h2 {padding: 10% 5% 0 5%;}




	
/*book now button */

#shop-btn { 
background:#082C4A;
width: 80%; 
padding: 0; 
opacity: .7;
height: auto; 
float:left; 
margin: 40px 0% 6% 10%; 
border: solid white 2px; 
border-radius: 6px; 
box-shadow: 0px 0px 60px rgba(23, 23, 23, .12);  }

#shop-btn a{
	border: 0; 
color: white;
letter-spacing: .15rem;  
font-size: 2rem; 
font-weight: 900; 
line-height: 1.6rem; }

@media only screen and (max-width: 768px) { 
#shop-btn a{
	font-size: 1.4rem; 
}

}


#shop-btn:hover {  background: #e00 !important; color: white !important; transition: 1s;
opacity: 1;
}

#shop-btn a:hover {color: white !important;}

#shop-btn a:active {color: white !important; background: transparent; letter-spacing: .4rem; transition: 2s;  font-size: 1.8rem;}

#shop-btn h3 {font-size: 1.2em; text-align:center; padding: 18px 6px 16px 6px !important;font-weight: 400; line-height: 2rem;}

@media only screen and (max-width: 600px) {
#shop-btn { width: 80%; padding: 0; height: 100px; float:left; margin: 30px 10% 0% 10%; }
}
	
	
	/* ====== footeer ============  */
	
	

.foot-1
{ width: 65%; height: 164px; float: left; background: hsla(207, 81%, 86%, .8) ; text-align: left;}

.foot-1 a {color: navy !important;}
.foot-1 a:hover {color: orangered !important;}

.foot-2
{width: 35%; height: 164px; float: right; background: hsla(207, 81%, 86%, .8) ;}

.foot-1 p {font-size: .85em;  margin: 0; padding: 0px 1% 6px 0; font-weight: normal; color: white; text-align: right;} 
.foot-2 p, .footer p {font-size: .85em;  margin: 0; padding: 0px 10% 6px 0; font-weight: normal; color: white; text-align: right;} 


@media only screen and (max-width: 1024px) { 
.foot-1, .foot-2 { width: 100%; height: auto;}
.foot-1 p {padding: 0px 5% 6px 0;}
.foot-2 p, .footer p { padding: 0px 5% 6px 0; } 
.footer .sml {padding: 0;}
}


.footer
{background: hsl(207, 81%, 16%) ; font-weight: normal; width: 100%; height: auto; margin: 0; bottom: 0px; float: left; padding: 6px 0 40px 0; }
	
.footer.fixed {position: fixed; bottom: 0; left: 0; }

.footer a, .foot-1 a, .foot-2 a {color: white; border: 0;}

.footer a:hover, .foot-1 a:hover, .foot-2 a:hover   
{color: lightblue;}

.footer a:active {color: navy;}

.footer h3 {font-size: 1.25em; line-height: 1.6em; margin: 0; padding: 8px 2% 10px 0; font-weight: normal;  color: white; text-align: right;} 

.footer p {font-size: .85em;  margin: 0; padding: 12px 2% 6px 0; font-weight: normal; color: #ddd; text-align: right;} 


@media only screen and (max-width: 480px) {
.footer.fixed {background: #3f1d1d;}
.footer p {padding: 8px 5% 6px 0;} 
}



//  for desktop yada 

#navcon {width: 100%; height:60px; background:#1F3C88; position:fixed; z-index: 50; border:0;}





@media only screen and (max-width: 480px) {
#navcon {height: 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: 100%; position: fixed; z-index: 32;  float: left; border:0; height: 60px; background: hsl(207, 81%, 16%);}




	
@media only screen and (min-width: 1601px) {
	nav {  margin:  0; padding: 0; width: 80%; position: fixed; z-index: 32;  float: left; border:0;}
	}
	
	@media only screen and (min-width: 2001px) {
	nav {  margin:  0; padding: 0; width: 60%; position: fixed; z-index: 32;  float: left; border:0;}
	}
	

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


nav:after {
  content: "";
  display: table;
  clear: both;
}



nav ul {  
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;  font-family: 'PT Sans', sans-serif;
  display: inline-block;
  float: left;
  background-color:transparent; z-index: 20; /* here for 2nd part of menu */
  	list-style-type: none; border:0 !important; 
}

nav a {
  display: block;
  padding: 12px 23px 0px 23px;
  color: white !important;
  font-size: 1em;
  letter-spacing: 0.08rem;
  line-height: 40px;
  text-decoration: none; 
  border: 0 !important;
  opacity: 1 !important;
}

nav a:hover {background:#115e9e; color: white; border:0;}

nav ul li ul li:hover { background: #1F3C88; color: #ff0; }



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

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

nav ul ul li {
  width: 240px;
  float: none;
  display: list-item;
  position: relative;
  background: #115e9e;
  border-bottom:1px dashed white;

}

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

nav ul ul ul li:hover {   background: hsl(207, 80%, 56%);}

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: hsl(207, 80%, 16%); /* colour of mobile device menu */
  padding: 18px 23px 12px 23px; margin: 0;
  color: #fff;  line-height: 20px;  text-decoration: none;  
}

.toggle:hover {  background-color: hsl(207, 80%, 26%);}

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


nav ul li {
  display: block;
  opacity: .95;
  width: 100%; background: url(cross.png) repeat hsl(207, 80%, 16%); /* color of dropdown on mobile */
}

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: hsl(207, 80%, 46%); }

nav ul li ul li .toggle,
 nav ul ul a {background-color: transparent; padding: 0 0 0 9%;}
 
   
      nav ul ul a::before
    {content: "- ";}
 

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%; background: hsl(207, 80%, 16%) !important;
}

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





/* TEXT ON IMG
http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/
*/

ul.img-list {
  list-style-type: none;  margin: 0;  padding: 0;  text-align: center;}

ul.img-list li {
  display: inline-block;  height: auto;  margin: 0 0em 0em 0;  position: relative;  width: 100%;}

span.text-content span {
  display: table-cell;  text-align: center;  vertical-align: middle;}

span.text-content {
  background: rgba(255,255,255,0);
   cursor: pointer;  display: table;  height: 100%;  left: 0;  position: absolute;  top: 0;  width: 100%;  opacity: .6;
  -webkit-transition: opacity 500ms;  -moz-transition: opacity 500ms;  -o-transition: opacity 500ms;  transition: opacity 500ms;}


ul.img-list li:hover span.text-content {
  opacity: 1; background: #12a6c3; margin: auto 0;}