/* Juju PR*/

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

body
{
	background: #232934  ;
      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: 6em; padding: 0 5%; color: white	;  font-weight: 100;  ;}

h2{font-size: 3em;   color: white; padding: 0 22.8%; 
font-weight: 400;  font-family: 'Oldenburg', cursive;
font-style: normal; line-height: 1.6em;}

h3{	font-size: 1.4em; line-height: 1.6em; padding: 0 23%; font-family: 'Oldenburg', cursive; color: #eee;}

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

p{font-size: 1.2em; margin: 0 ; padding:0 12% 0 23%; 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.2em;}
}

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

.pink {color: /*pink */deeppink; font-size: 1.4em;}
.green {color: /*lightgreen*/ deeppink; font-size: 1.4em;}
.yellow {color: /*#ff6*/ deeppink; font-size: 1.4em;}

.date {background: #EF7FB9; padding: 4px 8px; box-shadow: 2px 2px 12px rgba(234, 107, 173, 0.9); border: 2px solid #ea6bad;}

.orange {color: orange; }
.dp {color: deeppink; font-size: 2em; padding: 0 23px 23px 0; text-shadow: 1px 1px 2px white;}

audio, video {background: deeppink; width: 80%; 
   box-shadow: 12px  12px 6px rgba(23, 23, 23, 0.23)
}

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

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


img {border: 0px solid #fff;}

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

a {outline: none;}

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

ul li {	
	list-style-type: none;	
	margin: 0px;	
	padding: 0px; 
	color: #fff;}


/* 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.fixed{ position: fixed; top: 0; left: 0;  }

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


	.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: 50px; 
	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; 	background: #232934; }




/* for desktop yada */
#nav {width: 100%; height:60px; background: black ; position: fixed; text-align: right; margin: 0;}

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

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


#nav a {color: white;}
#nav a:hover {color: yellow;}


#nav h3 {padding: 15px 2.3% !important; font-weight: normal; font-size: 1.2em; color: #aaa; margin: 0; }

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

@media only screen and (max-width: 768px) {
#nav h3 { font-size: 1.08em; }	}

@media only screen and (max-width: 668px) {
#nav h3 { font-size: .95em; padding: 16px 12px 0 0px; }	}

add i-pad alteration for navigation here


/*==========contentt ===============*/
#intro {background: #fad201; height: auto;  padding: 0; margin: 0px; } 
#intro img {width: 100%; height: auto;}

@media only screen and (max-width: 600px) { 
#intro  {margin: 10% 0 0 0;}
}




#over-bar {height: auto;  padding: 0; margin-top:0; width:100%; text-align: left;}

#over-bar h1 {padding: 0% 0 0 12% !important; margin: -55% 0px 0 0; color: deeppink;  font-weight: 400;  
font-family: 'Abril Fatface', cursive; opacity: .9; letter-spacing: .04em; }
 
#over-bar h3 {font-size: 3em !important; color: white;  padding: 0 12%; letter-spacing: .2em; 
font-family: 'Raleway', sans-serif !important; margin: 0 0 34% 0;}


@media only screen and (min-width: 1600px) { 
#over-bar h1 { font-size: 10em; }
}


@media only screen and (max-width: 768px) { 
#over-bar h1{  font-size: 4em ;}
#over-bar h3 {font-size: 2.3em !important; margin: 0 0 34% 0 !important;}
}



@media only screen and (max-width: 480px) { 
#over-bar h1{  font-size: 3.5em; padding: 0 0 0 4% !important; margin: -62% 0 0 0;} 
#over-bar h3 {font-size: 1.4em !important; margin: 0 !important; padding: 0 0 0 6% !important;}
}







.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;}
.sml3{font-size:.7em;  letter-spacing: .1em; padding:  4px 8px 6px 8px;  color: white; background: #EF7FB9; border: 1px solid white; margin: 0 12px 12px 0; border-radius: 8px;}



#bar {background: #232934 ; width: 100%; height:auto;}
#bar h2 {color: white; padding: 10% 22.8% 0 22.8% }
#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: #f9aed5; height: auto; }
#first h2 {color: #232934 !important;}
#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 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: #f490c4; height: auto; padding:0; margin: 0;  }
#third h2, #third h4 {color: white !important;}
#third img {padding: 0; margin: 0;}

#map {background:#232934 !important; height: 900px; padding: 0 ; margin: 0;}
#map h2 {color: white;}
#map p {padding: 0;}



#half {width: 50%; height: auto; float:left; background:#232934;}
#half2 {width: 50%; height: auto; float:right; background:#232934;}
#half2 p {padding: 0 0 0 23%;}

@media only screen and (max-width:1024px) {
#half, #half2 {width: 100%;	}
}

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



.footer
{	background: #000; position: fixed; text-align: right;
	font-weight: normal;	width: 100%; border-top: 3px solid white;
	height: auto; bottom: 0; margin: 0;}
	
	 @media only screen and (min-width: 1600px) { .footer { width: 80%;}
}




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

.footer a {color: #fff;}
.footer a:hover {color: yellowgreen;}
.footer h3 {font-size: 1.4em; line-height: 1.6em; margin: 0; padding: 10px 2.3% 10px 0; font-weight: normal; color: #fff;} 

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