/* what if lambeth*/

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

body
{	background: #5c616b !important;
    font-family: 'Raleway', sans-serif;
    scroll-behavior: smooth;
	position: relative;
	-webkit-text-size-adjust: none;
}

body *
{	text-shadow: none;}

 @media only screen and (min-width: 1600px) { 
 body {margin: 0 10%; 	background: #232934  url(bg_body-rock.png) repeat;}
}

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

h1{	
font-size: 3.2em; 
padding: 0 12% 0 6%; 
color: #E62D9B;  
font-weight: 400; 
font-family: 'Arvo', serif; 
line-height: 1.4em; }

h2{
font-size: 3.2em;   
color: white; 
padding: 0 15%; 
font-weight: 400;  
font-family: 'Arvo', serif;
font-style: normal; 
line-height: 1.6em;}

h3{
font-size: 1.6em; 
line-height: 1.6em; 
padding: 0 15%; 
font-family: 'Arvo', serif; 
color: #eee;}

h4 {
font-size: 1.4em; 
padding: 0 15%; 
line-height:1.8em;}

h5 {
color: #eee; 
font-size: .95em; 
letter-spacing: .2em; 
padding: 0 15%; 
line-height: 1.6em; 
font-weight: 100;}

p{
font-size: 1.3em; 
margin: 0; 
padding:0 12% 0 15%; 
font-weight: 400; 
line-height:1.9em; 
color: white !important; }

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

	h2, h3, h4, p{
		padding:0 8%; }
		
	h2 {font-size: 2.1em;}
	h3 {font-size: 1.4em;}
}

.white {
color: #fff; 
font-size: 1.2em;}

.pink {
color: deeppink; 
font-size: 1.4em;}

.green {
color:  deeppink; 
font-size: 1.4em;}

.yellow {color:  deeppink; 
font-size: 1.4em;}

.space {
padding: 6% 0;
width: 100%; 
height: 1px;}

hr {
margin: 0 10%; 
height: 23px; 
border: 0; 
background: #ef7fb9;}


img {
border: 0px; 
max-width: 100%; 
height: auto;}

a, a:link, a:active, a:visited, a:hover {
color: #E62D9B; 
border-bottom: 0; 
text-decoration: none; 
outline:none; 
padding: 4px;}

a {outline: none;}

a:hover {
color: #fff; 
text-decoration: none; 
outline:none; 
background: #E62D9B;}

a:active {
color: #232934; 
background: #FFBF37;}

ul li {	
list-style-type: disc;	
margin: 0 0 0 12%; 
color: #fff;}

.header.fixed{ 
position: fixed; 
top: 0; 
left: 0;  }

.header
{	background: #000;
	moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; top: 0;
	height: 60px; 
	padding: 0; 
	position: fixed; 
	left: 0px; 
	opacity: .5;}


	.header a
{	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;	
	width: 40px; 
	height: 40px; 
	position: absolute;	
	top: 5px; 
	left: 12px;}
	
	@media only screen and (min-width: 599px) 
{ .header a {display: none;}
}


	.header2
{	background: #fff;
	font-weight: normal;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; top: 0;
	height: 60px; 
	padding: 0; position: fixed;}
	
	@media only screen and (min-width: 599px) { 
		.header {width: 10%;}
		.header2 {display: none;}
			.header FixedTop {display: none}
	}


 .content{	
 text-align: left; 
 padding: 0; 
 margin: 0;}


.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-width: 768px) { 
.column {
  float: left;
  width: 100%;
}
}


.btn {
background: #232934; 
padding: 12px 16px !important; 
color: white !important;}

/*==========contentt ===============*/

.sml{
font-size:.32em;  
letter-spacing: .7em; 
padding: 0 0 0 23px;  
color: white;}

.sml2{
font-size:.6em;  
letter-spacing: .23em; 
padding: 0 0 0 8px;  
color: white;}

.quote {
color: #CED5E0; 
letter-spacing: .2em;
padding: 1% 5%; 
margin: 0% 10%; 
font-size: 1.4em;}

.fab {
	padding:0 12px; 
	font-size: 3rem;}



#logo {
width: 100%; 
background: #000; 
height: 230px; 
float: left; 
margin: 68px 0 0 0;}

#logo h1 {
font-weight: 900; 
padding: 0 6%; 
font-size: 4em;}

#logo h3 {color: #fff; padding: 0 7%; font-size: 1.25em; 
letter-spacing: 0.05em;}
#logo a:hover {background: transparent;}


@media only screen and (max-width: 768px) {
#logo {	height: 340px;}

#logo h1 {font-weight: 900; padding: 0 6%; font-size: 3.6em;}	
}

#bar {background: #FFBF37 url(../img/pink-yellow-whatif.jpg) no-repeat 100% 42% ; width: 100%; height:auto;}
#bar h1 {color: #E62D9B; background: white ; margin: 6% 27% 0% 12%; padding: 4% 1% 4% 4%; font-weight: 800; opacity: .7; font-size: 4em;}
#bar h3 {color: #E62D9B; padding: 2% 23% 0 15%;  }
#bar p, #bar h4 {color: white;}

@media only screen and (max-width: 768px) { 
#bar h2 {padding: 10% 8% 0 8%;}
}

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


#first {background: white; height: auto; }
#first h2{color: #E62D9B !important;}
#first h3 {color: #232934;}
#first p {color: #232934 !important;}
#first img, #second img, #third img {max-width: 100%; height: auto; border: 0px; padding: 0 0 23px 23px;}


#second {background:#232934 ; height: auto;}

#second h1 {color: #E62D9B;}

#second h2 {color: white;}

#second h3 {color: #eee;}

#second h4 {font-size: 1.4em; padding: 0 23%; line-height:1.8em; color: #eee;}

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

#second p {letter-spacing: .1em; line-height: 1.8em;}

#first img, #second img {
margin: 0 23px 23px 0; 
border: 2px solid #fff; 
padding: 0;}


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

#third p, #third h2, #third h3 {
color: #fff !important;
}

#third img {
padding: 0; 
margin: 0;}


#third a:hover {background: #E62D9B; border-bottom: solid;}


#four {background: #222; height: auto; padding:0; margin: 0; width: 100%; }
#four img {padding: 0 32px 32px 0;}

#five {
background: #E62D9B; 
height: auto; 
padding:0; 
margin: 0; 
width: 100%; }

#five h1 {color:white;}
#five a{color:#ffbf37; background:  #222;  padding: 4px 8px;} 
#five a:hover {background: #FFBF37; color: black;}

#five img {padding: 0 32px 32px 0; }


#six {background: #FFBF37; height: 0; padding:0; margin: 0; width: 100%; }

#six p{color: #fff !important;}

#seven {background: #173624; height: auto; padding:0; margin: 0; width: 100%;width: 100%; }


#first h2, #second h2, #third h2, #bar h2, #map h2
{ font-family: 'Raleway', sans-serif !important;}



.footer
{	background: #232934;  text-align: left;
	font-weight: normal;	width: 100%;
	height: auto; bottom: 0; margin: 0;}
	


.footer.fixed
{bottom: 0; left: 0;}

.footer a {color: #ddd; border-bottom: 0; padding: 12px 0;}
.footer a:hover {color: #fff; background: transparent; border-bottom: 2px solid;}

.footer h3 {font-size: 1.4em; line-height: 1.6em; margin: 0;  font-weight: normal; color: #E62D9B;} 

@media only screen and (max-width: 600px) { 
	 .footer h3{ font-size: 1em;}
}

.feet a {color:#ffbf37; background:  #111 !important;  padding: 16px;} 
.feet a:hover {background: #FFBF37; color: black;}

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


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

/* NAV -------------------------------------------------------- */

#navcon {
  width:100%; 
  height: 68px; 
  background: transparent; 
  position:fixed;}

#navrt { 
  width: 20%;
  height: 50px; 
  background: black; 
  float: left;  
  text-align: right; 
  padding: 18px 0 0 0;  
  z-index: 23;}

#navrt a {
  color: white; 
  background: transparent; 
  border-bottom: 0 !important;}

#navrt a:hover {
  color: #FFBF37;}

#navrt h3 {
font-size: 1.3em; 
line-height: 1.4em; 
padding: 0 2% 0 0;  
margin: 0; 
letter-spacing: 0.23em; 
font-weight: 100;}


nav {
  margin: 0 !important; 
  background-color: black !important; 
  width:60% !important;  
  z-index: 23; 
  height: 68px; 
  padding: 0; 
  float: left;}


 @media only screen and (max-width: 1600px) { 
 nav {
  width: 70% !important; 
  margin: 0;  
  padding: 0 !important; 	}

 #navrt {
   width: 30%;
    }
 }



nav h3 {
  font-size: 1.2em; 
  padding: 0 0 0 8%;  
  margin: 0; 
  font-weight: 100;}


 @media only screen and (max-width: 1024px) { 
 #navrt {
width: 100%; 
background: #000; 
text-align: left;
padding: 0; 
line-height: 30px;}
 
 #navrt:hover{color: #FFBF37 !important;}
 
 #navrt h3 {
  padding:  0px 0% 0px 0.5%; 
  font-size: 1.08em;}

 
  nav {width: 100% !important; } 
 
  nav h3 {padding: 0; margin: 0 0 0 1%;}
 
  #logo {margin: 118px 0 23px 0;}
  }


/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/
.toggle, [id^=drop] { display: none;}


nav a {
  display: block;

  color: #fff !important;
     line-height: 60px;     
  text-decoration: none;
   border: 0 !important;
   background: #000;
}

nav a:hover { color: #FFBF37 !important; background: #000; }


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

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


nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
  text-align: left !important;
}


nav ul li {
  background-color: #000;
 color: white !important;
  display: inline-block;
  	list-style-type: none; 
	margin: 0;
	padding: 0 23px 0 0px;  
	  z-index: 20; /* here for 2nd part of menu */
}


nav ul ul li {
background: #000; 
  display: list-item;
  float: none; 
   margin: 0;
   opacity: .85; 
   padding:0 6px 0 6px;
    position: relative; 
    width: 190px;
  }

nav ul ul li a{background: #000	 !important; }

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


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



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: #000; /* colour of mobile device menu */
  padding: 10px 0% 0px 0; letter-spacing: .23em;
  color: white; 
  line-height: 30px;
    text-align: left !important;
  text-decoration: none;
  margin: 0 ; 

  
}

.toggle:hover { color: #FFBF37; }

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

nav {width: 100%; margin: 0; padding: 0; }

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

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

/*nav ul ul ul a { padding: 0 10px; }*/

nav a:hover
 /*nav ul ul ul a*/ { background-color: #195D72; color: white !important;}

/*nav ul li ul li .toggle,*/
nav ul ul a 
{ background-color: #53C4E0; color: white !important; }

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


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

nav ul li {  display: block;  width: 100%;   text-align: left !important;}

}