/*===================================================*/
/*                                                   */
/*                m a i n   C S S                    */ 
/*                                                   */
/*===================================================*/

/********** [1] **********/ * {box-sizing: border-box;} 

/********** [2] **********/ html {font-family: "Lucida Sans", sans-serif;}

/********** [3] **********/ body {padding: 25px;background-repeat: none;background-color: #000000;background-position: left;}


/** [!] BACKGROUND SETUP OH MY GOD IT IS 1:42AM AND I SPENT TOO LONG ON THIS [!] **/
@media (max-width: 300px) {
	body {
		background-image: url('images/mobile-bg.png');
		background-repeat: none;
		background-color: #000000;
		background-position: center;
		background-size: 300px;
		}
		
	.aside {
		background-color: rgba (0, 0, 0, 0);
		padding: 15px;
		color: #ffffff;
		text-align: center;
		font-size: 10px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		opacity: 1;
		margin-bottom: -65px;
		}
/*	#logo {width: 50%;}	*/
	.t-1 {width: auto;}
	.button, .button-spot, .button-app, .button2, .date, .city, .tix-button, .tix {font-size: 7px; width: auto; margin: auto;}
	.i-1 {font-size: 10px;}
	}
	
@media (max-width: 601px) {
	body {
		background-image: url('images/mobile-bg.png'); 
		background-repeat: none;
		background-color: #000000;
		background-position: center;
		background-size: 430px;}
		
    .aside {
	    background-color: rgba (0, 0, 0, 0);
	    padding: 15px;
	    color: #ffffff;
	    text-align: center;
	    font-size: 10px;
	    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		opacity: 1;
		margin-bottom: -65px;
		}
	.button, .button-spot, .button-app, .button2, .date, .city, .tix {font-size: 7px; width: auto;}
	.tix-button {width: auto;}
	.i-1 {font-size: 10px;}
	.t-1 {width: auto;} 
	/*#logo {width: 50%;}	*/
	div.date {display: inline-block; padding: 5px; width: auto;}
    div.city {display: inline-block; padding: 5px; width: auto;}
    div.tix {display: inline-block; width: auto; text-align: left; margin: auto;}
    .tix-button {padding: 5px}
}

@media (min-width: 769px) {
	body {
		background-image: url('images/new-bg2.png'); padding: 25px;
		background-repeat: none;
		background-color: #000000;
		background-position: left;
		background-size: 2222px;}
		
    .aside {
	    background-color: rgba (0, 0, 0, 0);
	    padding: 15px;
	    color: #ffffff;
	    text-align: center;
	    font-size: 14px;
	    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		opacity: 1;
		margin-bottom: -65px;
		}
    .button, .button-spot, .button-app, .button2, .date, .city, .tix {font-size: 12px; width: auto; margin: auto;}
	.i-1 {font-size: 12px;}
    .t-1 {width: 45%;} 
    #logo {max-width: 700px;}	
    div.date {display: inline-block; padding: 5px 5px 5px 15px; width: auto;}
    div.city {display: inline-block; padding: 5px 5px 5px 5px; width: auto;}
    div.tix {display: inline-block; padding: 5px 5px 5px 5px; width: auto;}
    .tix-button {padding: 10px;}
}

/*--------------------------        TEXT CONFIG       ---------------------------------*/

p {color: #FFFFFF; text-decoration: none;}
p:hover {color: #FFFFFF; text-decoration: none;}
p a:hover {color: #00b5de; text-decoration: underline;} /** red color text 850101 **/
a {text-decoration: none;color: #ffffff;}
a[id="email"] {color: #EAEAEA;}
[class*="col-"] {padding: 15px;}

/* -----------------------------------------------------------------------------------*/

.row::after {
	content: "";
	clear: both;
	display: block;
}

.aside::after {
	content: "";
	display: block;
	clear: both;
}


.header {
	padding: 15px;
}



.content {
	background-color: #2D2D2D;
	padding: 15px;
	color: #ffffff;
	text-align: center;
	font-size: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	opacity: 0;
}

.seated-row {background-color: rgba(120, 120, 120, 0.1); padding: 20px 10px 10px 10px; border-top-style: solid; border-top-width: 0.8px; border-top-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between;}
.seated-row:hover {background-color: rgba(120, 120, 120, 0.5);}




.img1 {width: 100%;}


.containment-kit {margin: auto; display: flex; padding-bottom: 20px;}

.footer {
	background-color: #222222;
	color: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	margin: auto;
	height: 80px;
	font-size: 12px;
	padding: 15px;
	width: 100%;
}

.button {
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: #000000;
  margin: 4px 2px;
  transition-duration: 0.3s;
  cursor: pointer;
  background-color: #FFFFFF; 
  border: 1px solid;
  border-color: #000000;
}

.button:hover {
  background-color: #000000;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.button-spot {
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: #FFFFFF;
  margin: 4px 2px;
  transition-duration: 0.3s;
  cursor: pointer;
  background-color: rgb (255, 255, 255, 50);; 
  border: 1px solid;
  border-color: #FFFFFF;
}

.button-spot:hover {
  background-color: #000000;
  border-color: #289906;
  color: #289906;
}

.button-app {
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: #FFFFFF;
  margin: 4px 2px;
  transition-duration: 0.3s;
  cursor: pointer;
  background-color: rgb (255, 255, 255, 50); 
  border: 1px solid;
  border-color: #FFFFFF;
}

.button-app:hover {
  background-color: #000000;
  border-color: #9C0000;
  color: #9C0000;
}

.button2 {
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: #FFFFFF;
  margin: 4px 2px;
  transition-duration: 0.3s;
  cursor: pointer;
  background-color: rgb (255, 255, 255, 50);; 
  border: 1px solid;
  border-color: #FFFFFF;
}

.button2:hover {
  background-color: #FFFFFF;
  border-color: #0054D1;
  color: #0054D1;
}


.tix-button {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: #000000;
  transition-duration: 0.3s;
  cursor: pointer;
  background-color: #FFFFFF; 
  border: 1px solid;
  border-color: #000000;
}

.tix-button:hover {
  background-color: #000000;
  border-color: #FFFFFF;
  color: #FFFFFF;
}


#links {
	margin: auto;
	position: absolute;
	left: 0px;
	width: 100%;
	
}


/* ------> SIZING CONFIG <-------  */



img[id="logo"] {
	max-width: 100%;
	height: auto;
	
}


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
/*.col-3 {width: 25%;} */
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}