/* CSS Document */
/* box-sizing gives an element it's specified width & height excluding padding or margin*/
*, *:before, *:after {
 box-sizing: border-box;
margin:0;
 padding:0;
}
/*used for the responsive navigation, this will hide the burger icon*/
nav .icon {
    display: none;
}
/*basic styles for all text on the page, h1,h2,p*/
h1{
	font-family: Calibri;
	font-size: 30px;
	color:#313230;
	font-weight: bold;
	text-align:center;
}
h2{
	font-family: Calibri;
	font-size: 30px;
	color:#313230;
	font-weight: bold;
	text-align:center;
}
p{
	font-family: Roboto;
	font-size: 11px;
	color: #313230;
	line-height: 1.6;
	margin:5px;
}
/*Making the info stand out more, thus a different kind of style is being applied to the text*/
.bwmInfo{
	font-family: Calibri;
	font-size: 11px;
	color:#313230;
	font-weight: bold;
	text-align:center;
}
/* set all padding and margin to zero, and also using a background image for the body and aligning it at the top center */
body{ 
margin:0; 
padding:0;
background-color: #2c2c2c;
background-image: url("images/header.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position:center top;


}
/*using unique style for the links, making them stand out more*/
#linksPage{
	display:block;
	text-align:center;
	line-height: 3;
}
/*setting the logo size for all of the website*/
#logoMain{
	display:block;
	margin-left:auto;
	margin-right:auto;
	width: 400px;

	
}
/*setting the buttons styles on the coming soon page, these styles will be used when booking tickets*/
.linksB{
	display:block;
	width: 350px;
	width: 350px;
	background-color:red;
	color:white;
	border: solid 3px red;
	padding: 10px 0px 10px 0px;
	text-decoration:none;
	text-align:center;
	
}
/*Style changes when hovered, this confirms user's interaction with the website*/
.linksB:hover{
	background-color:white;
	color:red;
	cursor: pointer;
	transition: 1s;
	
}
/* set the width of the wrapper class to 90% of screen with max-width of 1366px , and also making sure there are no margins*/
div.wrapper {
 width: 90%;
 max-width:1366px;
 margin:0px auto;
}
/*setting header margins to none, so that it does not break when it comes in contact with other elements*/
header{
 margin:0px;
 height: 250px;
}
/*making sure that the footer is alligned correctly by using align tags*/
footer {
 padding: 1em;
 color: white;
 background-color: #2c2c2c;
 text-align: center;
 margin:0px;
 width: 100%;
overflow: hidden;
min-height:120px;
}
header img{
height: auto;
max-width:1366px;
width: 100%;
}
/*unique style that will remove float from multiple objects when needed*/
.removeFloat{
	float:none;
}
/* set width of nav to 100% with min-height value */
nav{
width:100%;
background: rgba(250, 249, 249, 0.0);
text-align:center;
padding-bottom:15px;
}
/* remove bullet points from ul */
nav ul {
 list-style-type: none;
}
/* display ul horizontally */
nav ul li{
 display: inline;
}
/* remove default underline from anchor element text */
nav ul a {
	font-family: Roboto;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	margin: 30px;

}
/*Show user interaction when they hover over the navigation links*/
nav ul a:hover{
	border-bottom: 4px solid #ed1c24;
}

/* set width to auto & overflow hidden which stops the content over flowing the footer */
#container{
width: 100%;
overflow: hidden;
background-image:url("images/bg.png");
min-height:650px;
}
/* float main element to the left and also setting the width to 75% of the size allowed */
main {
	margin-top:100px;
	min-height: 450px;
 float: left;
 width: 75%;
background:white;
border-right: 3px solid #ed1c24;
text-align:center;
display:block;

}
/* float aside element to the left setting the size to 25% so that it fully fills the area */
aside {
		margin-top:100px;
	min-height: 450px;
float:left;
width:25%;
 background:white;
}
/* float img to left so that it wraps the text around the image*/
img{
float:left;
max-width:250px;}
.footSponsor{
	height: 40px;
	width: 40px;
	margin-left: 200px;
}
footer img{
	    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*adding padding to the video area so that there's space between the videos*/
.videoArea{
	padding-left:110px;
}
/*Used for all of the social media icons, the settings align the icons, and also make all of them the same size*/
.fa {
  padding: 32px;	
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  	display: inline-block;
	margin:25px;
}
/*grabs the icons*/
.facebook{
	background-image:url("images/fbLogo.png");
}
.insta{
	background-image:url("images/instaLogo.png");
}
.twitter{
	background-image:url("images/twitterLogo.png");
}
.spotify{
	background-image:url("images/spotify.png");
}
.iTunes{
	background-image:url("images/itunes.png");
}
.googlePlay{
	background-image:url("images/googlePlay.png");
}
.youtube{
	background-image:url("images/youtube.png");
}

open{
	border-bottom: 2px solid red;
}
/*aligns the forms in contact page*/
#cForm{
	margin-top:25px;
	display:block;
	text-align:center;
	
}
.mapouter{
	text-align:center;
}
/*Styles the text area for the forms in contact page*/
textarea {
    resize:vertical;
	background-color:#dfdfdf;
	color:#2c2c2c;
	border:2px dotted #9b9b9b;
}
.formStyle{
	background-color:#dfdfdf;
	width: 200px;
	height: 25px;
	color:#2c2c2c;
border:2px dotted #9b9b9b;
	margin:5px;
}
/*Adjusts the interactive map on most of the pages*/
.mapSize{
	width: 350px;
	height: 325px;
}
/*Styles the forms in contacts page*/
#cForm select{
		background-color:#dfdfdf;
	width: 200px;
	height: 25px;
	color:#2c2c2c;
border:2px dotted #9b9b9b;
	margin:5px;
}
/* media queries */
/* viewport hits 667px apply diferent style to the elements in the query */
@media only screen and (max-width: 667px) {
	#logoMain{
		width: 100%;
	}
	main{
		width:100%;
		border-right: none;
		margin-top:0px;
		text-align:center;
	}
	main img{
		float:none;
	}
	/*making sure that the side is responsive, and slides underneath the main*/
	aside {
		border-top: 3px solid #ed1c24;
		margin-top:0px;
		width:100%;
	}
	nav ul li{
	display: block;
	text-align:center;
	}
	.footSponsor{
	margin-left: 80px;
}
/*responsive navigation menu that expands*/
  nav ul li a{display: none;}
  nav a.icon {
    float: right;
    display: block;
  }
/*styling navigation when hovered*/
  nav a.icon:hover{
	border-bottom: none;
}
  nav.responsive {
	  position: relative;
  }
  nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: -80px;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}
.mapouter{
	display:block;
	margin: auto;
}
.videoArea{
	padding-left:0px;
}
nav ul a {
	margin: 8px;
}
nav ul a:hover{
	border-bottom: none;
	opacity: 0.7;
}