/*Red Tusker*/

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; color: #DD4649;  font-weight: 400; font-family: 'Arvo', serif; text-shadow: 2px 2px 2px black; text-align:center;}

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 {text-align: center; color: white; font-size: 2.3em; letter-spacing: .23em; padding: 12px 0;}

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) {
	h1 {font-size: 4em;}
	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;}

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


.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; max-width: 100%; height: auto;}

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

a {outline: none;}

a:hover{color: #fff; text-decoration: none; outline:none; border-bottom: 1px dashed}

a:active {color: #2E95FF;}

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


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

#menu {background: #0061C6;}
#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;}


/* for desktop yada */
#nav {width: 100%; height:60px; background: black ; position: fixed; text-align: center; 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: #2E95FF; border: 0;}


#nav h3 {padding: 16px 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;}
}


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


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


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

#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;}
}
/*
  
  .nelly { 
  height: 666px;
  width: 666px;
  background-color: #fff;
  border-radius: 50%;
    display: inline-block;
  padding: 60px ;
    border: solid 4px black;
	margin: 5% 4% 0 2%;
	float: left;}
  
  
  
  .dot{
  height: 160px;
  width: 160px;
  background-color: #E2484B;
  border-radius: 50%;
    display: inline-block;
  padding: 40px;
    border: solid 4px white;
	margin: 0 0 0 5%;
	float: left;
}

  .dot2{
  height: 160px;
  width: 160px;
  background-color: #2E95FF;
  border-radius: 50%;
    display: inline-block;
  padding: 40px;
    border: solid 4px white;
	margin: 0 0 0 5%;
		float: left;
}

  .dot3{
  height: 160px;
  width: 160px;
  background-color: #CED5E0;
  border-radius: 50%;
    display: inline-block;
  padding: 40px;
    border: solid 4px white;
	margin: 0 0 0 5%;
		float: left;
}

.dot:hover, .dot2:hover, .dot3:hover {  -webkit-filter: grayscale(80%);
  filter: grayscale(80%);    }

.dot h3 {padding: 8px 0 0 2px; color: #CED5E0 !important; font-size: 3em;}
.dot2 h3 {padding: 8px 0 0 38px; color: #CED5E0!important; font-size: 3em;}
.dot3 h3 {padding: 0px 0 0 54px; color: #232934!important; font-size: 5em;}
*/