@charset "utf-8";
/* CSS Document */


/*======================

	PHONE MEDIA QUERIES

=======================*/

  @media only screen and (min-width: 320px) and (max-width: 700px){
	/* Small screen, non-retina */

#container{
		width:100%;
		background-image:url(../images/black_texture_texture_background_01_hd_pictures_169906.jpg);
		height:100%;
		
	}
	
	
a[href^=tel]{ color:#D3BFA9; text-decoration:none;}/* PHONE NUMBER LINKS ON IPHONE AND IPAD - STOP THEM APPEARING BLUE AND UNDERLINED*/
	


/*======================

	MAIN MENU AT TOP OF SCREEN

=======================*/


#topMenu{
	background-image:url(../mobilesite/mobilemenu.png);
	width:100%;
	background-repeat:no-repeat;
	background-position:top center;
	height:100px;
	margin:0 auto;
	display:block;
}

#header{
	width:300px;
	height:100px;
	display:block;
	margin:0 auto;
	

	
}

#header ul a{
	list-style:none;
	font-family:"bebas_neueregular";
	font-size:14px;
	color:#F68B2A
	
	
	
}

#menuAbout{
	position:relative;
	left:15px;
	top:10px;
	text-shadow: #000 0.1em 0.1em 0.2em;

	
}

#menuAbout a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuContact{
	position:relative;
	left:35px;
	top:15px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuContact a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuMenu{
	position:relative;
	left:20px;
	top:35px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuMenu a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuDrinks{
	position:relative;
	left:155px;
	top:35px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuDrinks a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}


#menuCatering{
	position:relative;
	left:130px;
	top:15px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}
#menuCatering a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuEmployment{
	position:relative;
	left:100px;
	top:-5px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuEmployment a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;

	
}


/*======================

	FIRST SECTION - WELCOME

=======================*/




#welcome{
	width:100%;
	background-image:url(../mobilesite/welcomemobile700x634.jpg);
	height:634px;


	
	
	
	
}

#welcomeTransparent{
	color:#000;
	height:100%;
	width:100%;
	
	
}

#welcomeText{
	width:50%;
	height:200px;
	font-size:28pt;
	text-align:center;
	text-shadow: black 0.1em 0.1em 0.1em;
	top:-460px;
	left:25%;
	/*color:#BBBDC0; /*grey*/
	color:#D3BFA9; 
	
	}





/*==============================================

			MENUS - DOWNLOADABLE PDFS
			
			
==============================================*/



#chaosMenus{
	background-image:url(../mobilesite/blackmobile700x634.jpg);
	width:100%;
	height:634px;
	
	
	
}

#chaosmenusheaderimg{
	display:none;
}

#chaosmenusheader h1{
	left:40%;
	top:20px;
	height:50px;
	width:40%;

}

#chaosmenusheader h1{
	
	text-shadow: black 0.1em 0.1em 0.2em;
	font-size:44pt;
	
}

#chaosMenustransparent{
	width:80%;
	height:70%;
	left:15px;
	top:80px;
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.2) ;
	display:block;

}




#chaostheory a{
	font-size:25pt;
	left:35%;
	top:40px;
	height:50px;
	width:100px;
	position:relative;
	
}


#hullabaloo a{
	font-size:25pt;
	left:40%;
	top:40px;
	height:50px;
	width:100px;

}


#pandemonium a{
	font-size:25pt;
	left:40%;
	top:40px;
	height:50px;
	width:100px;
	
}

#chaostheorytext{
	
	margin:0 auto;
	top:40px;
	height:50px;
	width:100px;
	position:relative;
	left:20px;
	
}


#chaostheorytext h2{
	color:#BA3319;
	font-size:15px;
	
}

#chaostheorytext h3{
	display:none;

}
#chaostheorytext h4{
	display:none;

}
#chaostheorytext p{
	display:none;

}

#hullabalootext h2{
	font-size:15px;
	margin:0 auto;
	top:35px;
	height:50px;
	width:200px;
	color:#BA3319;
	left:20px;
	position:relative;
	
}


#pandemoniumtext h2{
	font-size:15px;
	
	margin:0 auto;
	top:40px;
	height:50px;
	width:100px;
	color:#BA3319;
	left:20px;
	position:relative;
}




/*==============================================

			ABOUT SECTION
			
			
==============================================*/


#about{
	background-image:url(../mobilesite/carmobile700x634.jpg);
	width:100%;
	height:500px;
}


#aboutTransparent{
	width:100%;
	height:500px;
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.3) ;
	
	
}


#aboutHeader{
	background-image:none;
	left:25%;
	float:left;
	top:70px;
	height:50px;
	width:200px;
	text-shadow: black 0.1em 0.1em 0.2em;
}


#aboutHeader h1{
	font-size:48pt;
	top:-30px;
	

}

#aboutText{
	width:70%;
	height:400px;
	float:left;
	left:15%;
	top:110px;
	position:relative;
}

#aboutText p{
	font-size:80%;
	
}

#gallery{
	display:none;
}


.image-row{
	display:none;
	
	
}




/*==============================================

			LOCATION SECTION
			
			
==============================================*/





#location{
	background-image:url(../mobilesite/blackmobile700x634.jpg);
	height:634px;
	width:100%;
	
	
}



#locationTransparent{
	width:60%;
	height:90%;
	left:20%;
	top:50px;
	position:relative;
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.4) ;
	
}

#locationHeader h1{
	left:20%;
	position:relative;
	top:-40px;
	height:50px;
	width:200px;
	text-shadow: black 0.1em 0.1em 0.2em;
		
}

#locationHeader h1{
	color:#C63622;
	font-size:44pt;
	
}

#locationContact h4{
	color:#D3BFA9;
	font-size:90%;
	position:relative;
	left:30%;
	top:-30px;
	width:100px;
	
}

#locationHours h4{
	color:#D3BFA9;
	font-size:90%;
	position:relative;
	left:30%;
	top:20px;
	float:left;
	width:100px;
}


#locationMap{
	display:none;
	}



#locationMap:hover{
	display:none;
	
}







/*==============================================

			CATERING
			
			
==============================================*/




#catering{
	
	display:none;
	
	
}






/*==============================================

			EMPLOYMENT
			
			
==============================================*/





#employment{
	display:none;
	
}




/*==============================================

		FOOTER
			
			
==============================================*/


#footer{
	background-image:url(../mobilesite/footer.jpg);
	height:70px;
	width:100%;
	z-index:2;
	
}


#supremelogo{
	background-image:url(../images/supreme.png);
	height:49px;
	width:43px;
	position:relative;
	left:20%;
	top:12px;
}

#supremelogo:hover{
	background-image:url(../images/supremehover.png);
	
}
	

#HOME{
	width:104px;
	height:10px;
	position:relative;
	left:42%;	
	top:-30px;
	font-size:24pt;
	font-family:"bebas_neueregular";
	

}

#HOME a{
	
	color:#D3BFA9;
	text-decoration:none;
		
	
}

#HOME a:hover{
	text-decoration:none;
	color:#2B100F;

}

#facebook{
	background-image:url(../images/facebook.png);
	width:44px;
	height:44px;
	margin:0 auto;
	float:right;
	top:17px;
	position:relative;
	right:18%;

}

#facebook:hover{
	background-image:url(../images/facebookhover.png);
	
	
}
 
#built{
	width:80px;
	height:10px;
	position:relative;
	float:right;
	top:-30px;	
	
}
#built p{
	font-size:8px;
	font-family:"bebas_neueregular";
	color:#2B100F;
	
}
#built a{
	color:#2B100F;
	text-decoration:none;
	font-size:10px;
}
#built a:hover{
	text-decoration:none;
	color:#D3BFA9;
	
}
 
 
  

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}



/*==============================================

		END OF PHONE SIZING
			
			
==============================================*/





/*==============================================

		IPAD SIZE
			
			
==============================================*/



@media only screen and (min-width: 700px)  and (max-width: 1024px){

a[href^=tel]{ color:#D3BFA9; text-decoration:none;}/* STOP BLUE PHONE NUMBER LINKS IN IPHONE AND IPAD*/
	

/*==============================================

		CONTAINER
			
			
==============================================*/



#container{
	width:100%;
	
	
	
}

/*==============================================

		MAIN MENU TOP OF PAGE
			
			
==============================================*/


#topMenu{
	background-image:url(../mobilesite/mobilemenu.png);
	width:100%;
	background-repeat:no-repeat;
	background-position:top center;
	height:100px;
	margin:0 auto;
	display:block;
}

#header{
	width:300px;
	height:100px;
	display:block;
	margin:0 auto;
	

	
}

#header ul a{
	list-style:none;
	font-family:"bebas_neueregular";
	font-size:14px;
	color:#F68B2A
	
	
	
}

#menuAbout{
	position:relative;
	left:15px;
	top:10px;
	text-shadow: #000 0.1em 0.1em 0.2em;

	
}

#menuAbout a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuContact{
	position:relative;
	left:40px;
	top:15px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuContact a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuMenu{
	position:relative;
	left:20px;
	top:35px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuMenu a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuDrinks{
	position:relative;
	left:155px;
	top:35px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuDrinks a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}


#menuCatering{
	position:relative;
	left:130px;
	top:15px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}
#menuCatering a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;
	
}

#menuEmployment{
	position:relative;
	left:100px;
	top:-5px;
	text-shadow: #000 0.1em 0.1em 0.2em;
	
}

#menuEmployment a:hover{
	color:#2B100F;
	text-decoration:none;
	text-shadow:none;

	
}


/*==============================================

		FIRST SECTION - WELCOME TEXT
			
			
==============================================*/





#welcome{
	width:100%;
	background-image:url(../mobilesite/welcomemobile1024x634.jpg);
	height:634px;


	
	
	
	
}

#welcomeTransparent{
	color:#000;
	height:100%;
	width:100%;
	
	
}

#welcomeText{
	width:50%;
	height:200px;
	font-size:50pt;
	text-align:center;
	text-shadow: black 0.1em 0.1em 0.1em;
	top:-460px;
	left:25%;
	/*color:#BBBDC0; /*grey*/
	color:#D3BFA9; 
	
	}





/*==============================================

		MENUS - DOWNLOADABLE PDFS
			
			
==============================================*/



#chaosMenus{
	background-image:url(../mobilesite/blackmobile900x634.jpg);
	width:100%;
	height:634px;
	
	
	
}

#chaosmenusheaderimg{
	display:none;
}

#chaosmenusheader h1{
	left:40%;
	top:-20px;
	height:50px;
	width:40%;

	
	
	
}

#chaosmenusheader h1{
	text-shadow: black 0.1em 0.1em 0.2em;
	font-size:54pt;
	
	
}

#chaosMenustransparent{
	width:70%;
	height:70%;
	left:100px;
	top:80px;
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.4) ;

	
}


#chaosMenusContainer{
	margin:0 auto;
	text-align:center;
	

}

#chaostheory a{
	font-size:25pt;
	left:35%;
	top:40px;
	height:50px;
	width:200px;
	
	
	
	
}


#hullabaloo a{
	font-size:25pt;
	left:40%;
	top:40px;
	height:50px;
	width:200px;



}


	
	
	
#pandemonium a{
	font-size:25pt;
	left:40%;
	top:40px;
	height:50px;
	width:200px;
	
	


}

#chaostheorytext{
	
	margin:0 auto;
	top:40px;
	height:50px;
	width:100px;
	position:relative;
	left:5px;
	
}


#chaostheorytext h2{
	color:#BA3319;
	font-size:15px;
	
}

#chaostheorytext h3{
	display:none;

}
#chaostheorytext h4{
	display:none;

}
#chaostheorytext p{
	display:none;

}

#hullabalootext h2{
	font-size:15px;
	top:35px;
	height:50px;
	color:#BA3319;
	width:100px;
	position:relative;
	left:5px;
	margin:0 auto;
	
}


#pandemoniumtext h2{
	font-size:15px;
	margin:0 auto;
	top:40px;
	height:50px;
	width:100px;
	position:relative;
	left:5px;
	color:#BA3319;
}




/*==============================================

			ABOUT SECTION
			
			
==============================================*/


#about{
	background-image:url(../mobilesite/carmobile1024x634.jpg);
	width:100%;
	height:500px;
}


#aboutTransparent{
	width:100%;
	height:500px;
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.3) ;
	
	
}


#aboutHeader{
	background-image:none;
	left:35%;
	float:left;
	top:70px;
	height:50px;
	width:40%;
	text-shadow: black 0.1em 0.1em 0.2em;
}


#aboutHeader h1{
	font-size:54pt;
	top:-30px;
	

}

#aboutText{
	width:70%;
	height:400px;
	float:left;
	left:25%;
	top:110px;
	position:relative;
}

#aboutText p{
	font-size:80%;
	
	
	
}

#gallery{
	display:none;
}

/*==============================================

		LIGHTBOX GALLERY
			
			
==============================================*/

.image-row{
	display:none;
	
	
}




/*==============================================

			LOCATION
			
			
==============================================*/





#location{
	background-image:url(../mobilesite/blackmobile900x634.jpg);
	height:634px;
	width:100%;
	
	
}



#locationTransparent{
	width:60%;
	height:90%;
	left:15%;
	top:50px;
	position:relative;
	
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.4) ;
	
	
}



#locationImg{
	display:none;
	
	
	
}




#locationHeader h1{
	left:15%;
	top:-40px;
	height:50px;
	width:40%;
	text-shadow: black 0.1em 0.1em 0.2em;
	
	
	
	
}



#locationHeader h1{
	color:#C63622;
	font-size:54pt;
	
}






#locationContact h4{
	color:#D3BFA9;
	font-size:90%;
	position:relative;
	left:35%;
	top:-30px;
	width:100px;
	
	
	
	
	
}



#locationHours h4{
	color:#D3BFA9;
	font-size:90%;
	position:relative;
	left:35%;
	top:20px;
	float:left;
	width:100px;
}


#locationMap{
	
	display:none;
	
	}



#locationMap:hover{
	display:none;
	
}







/*==============================================

			CATERING INFORMATION
			
			
==============================================*/




#catering{
	background-image:url(../mobilesite/einstein1024x634.jpg);
	width:100%;
	height:400px;
	
}


#cateringTransparent{
	width:100%;
	height:500px;
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.6) ;
	

}

#cateringImg{
	display:none;
	
	
	
}
#cateringHeader h1{
	left:40%;
	float:left;
	top:50px;
	height:50px;
	width:40%;
	text-shadow: black 0.1em 0.1em 0.2em;
	
	
}

#cateringHeader h1{
	font-size:54pt;
	color:#606620;/* green */
}
#cateringText p{
	width:35%;
	height:90%;
	float:left;
	left:-5%;
	top:150px;
	font-size:80%;
	
}

#cateringText a{
	/*font-size:16px;*/
	font-size:100%;
	color:#D3BFA9;
	text-decoration:none;
	text-shadow: black 0.1em 0.1em 0.3em;
}

#cateringText a:hover{
		font-size:100%;
		color:#BA3319;
		text-decoration:none;
	
}

	
	
	






/*==============================================

		EMPLOYMENT INFORMATION
		
			
==============================================*/





#employment{
	background-image:url(../mobilesite/blackmobile900x634.jpg);
	height:400px;
	width:100%;
}

#employmentTransparent{
	
	width:70%;
	height:300px;
	background: rgb(0, 0, 0) transparent ;
	background: rgba(0, 0, 0, 0.6) ;
	position:relative;
	left:100px;
	
}






#employmentHeader h1{
	left:100px;
	position:relative;
	top:-150px;
	height:20px;
	width:100px;
	text-shadow: black 0.1em 0.1em 0.2em;
	color:#BA3319;/* burnt orange*/


}
#employmentHeader h1{
	font-size:54pt;
	
}

#employmentText p{
	width:300px;
	height:200px;
	position:relative;
	left:20px;
	float:left;
	top:20px;
	
	
}

#employmentText p{
	font-size:90%;
	text-decoration:none;
	
}


#employmentText a{
	color:#FBB03B;
	text-decoration:none;
	font-size:100%
	
}
#employmentText a:hover{
	font-size:100%
}

#employmentStaffImg{
	display:none;
	
}

#employmentStaffImgTwo{
	display:none;
	
}


/*==============================================

				FOOTER
			
			
==============================================*/


#footer{
	background-image:url(../mobilesite/footer.jpg);
	height:70px;
	width:100%;
	z-index:2;
	
}


#supremelogo{
	background-image:url(../images/supreme.png);
	height:49px;
	width:43px;
	position:relative;
	left:25%;
	top:12px;
}

#supremelogo:hover{
	background-image:url(../images/supremehover.png);
	
}
	

#HOME{
	width:104px;
	height:10px;
	position:relative;
	left:42%;	
	top:-25px;
	font-size:24pt;
	font-family:"bebas_neueregular";
	

}

#HOME a{
	
	color:#D3BFA9;
	text-decoration:none;
		
	
}

#HOME a:hover{
	text-decoration:none;
	color:#2B100F;

}

#facebook{
	background-image:url(../images/facebook.png);
	width:44px;
	height:44px;
	margin:0 auto;
	float:right;
	top:17px;
	position:relative;
	right:35%;

}

#facebook:hover{
	background-image:url(../images/facebookhover.png);
	
	
}
 #built{
	
	width:100px;
	height:0px;
	position:relative;
	float:right;
	top:-25px;
	right:30px;	
	
}
#built p{
	font-size:8px;
	font-family:"bebas_neueregular";
	color:#2B100F;
	
}
#built a{
	color:#2B100F;
	text-decoration:none;
	font-size:10px;
}
#built a:hover{
	text-decoration:none;
	color:#D3BFA9;
	
}
 
 
   /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}
/*@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina 

}*/

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}
  
 
/*@media screen and (max-width: 900px) and (min-width: 300px) {*/
/*@media (min-width: 20em) and (max-width: 1024px) {*/