@import url(seats.css);

body {
	font-size:16px;	
}

a {
    color: #68acd5;
}

.pull-right {float:right}

header {
	padding:10px 0;
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 80%;
}

header #organization_logo {
	max-height:50px;
	max-width:100%;
	width:auto;
	height:auto;	
}

#header_account {
	color:#fff;
    width: auto;
    display: inline-block;
    font-size: 14px;
    background: rgba(0,0,0,0.3);
    padding: 6px 12px;
    border-radius: 10px;	
}

#header_account a {
	color:#fff;	
}

.container.main_content {padding-bottom:10px}

#footer_spacer {
	height:80px;
	transition:all 0.5s ease;	
}

#contact_phone,#contact_email {
	color:#efefef;
	display:inline-block;
	margin:10px;
	font-size:1.2em;	
}
#contact_phone:hover,#contact_email:hover {text-decoration:none}

h1,h2,h3 {
	font-weight:400;	
}

h1 {font-size:2em}
h2 {font-size:1.8em}
h3 {font-size:1.6em}
h4 {font-size:1.4em}
h5 {font-size:1.2em}


.menu_icon.feather {
    width: 48px;
    height: 36px;
    color: #fff;
    cursor: pointer;
    float: right;
    margin: 5px;
}

#nav-menu .menu_icon.feather {float:left;color:#fff}

#nav-menu {
    position: fixed;
    top: 0px;
    right:-25%;
    background: #1f2f5a;
    height: 100%;
    opacity:0;
    width:25%;
    transition: all 0.5s ease;
}

#nav-menu.visible {

	right:0px;
	opacity:1;	
}
#nav-menu a {
	display:block;
	clear:both;
	padding:10px 20px;
	color:#fff;
	width:100%;
	box-sizing:border-box;
	text-decoration:none;
	background:rgba(0,0,0,0.25);
	margin-bottom:1px;	
}
#nav-menu a:hover {
	background:rgba(0,0,0,0.6);	
}

#nav-menu a i {width:30px}



img {max-width:100%}

.event_banner img {
	display:block;
	margin:0px auto;	
}
.event_banner .banner_details {
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 20%;
    text-align: center;
    width: 100%;
    color: #fff !important;
    font-size: 1.2em;
}
.event_banner .banner_details h1 {color:#fff;}

.btn-small, .instructions .btn {
	    padding: .15rem .5rem;
	    font-size:0.8em !important;	
}

.btn-medium {
    padding: .20rem .5rem;
    font-size: 0.95em !important;
}


.table.table-small td, .table th {
    padding: .25rem;
    font-size:0.8em;
    font-weight:normal;
}

.instructions .order_cart {float:right}

footer {
	background:#000;
	position:fixed;
	bottom:0px;
	min-height:50px;
	width:100%;	
	z-index:10;
}
footer img {
	max-height:40px;
	margin:3px auto;	
}

#footer_spacer {
	height:80px;	
}

#order_cart {
	color:#fff;
	float:right;
	margin:6px auto;	
}

.event_link {
	background:#F9F9F9;
	padding:10px;	
}
.event_link:nth-child(even) {
	background:#fff;	
}

.event_link h2 {
	font-size:1.5rem;
	margin-bottom:5px;	
}

.event_image {
	height:100px;
	width:100px;
	max-width:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;	
	cursor:pointer;
	display:block;
}

a.buy-tickets {
	margin-top:10%;
	float:right;
	display:block;
	color:#fff;	
}

table.table tr.clear td {
	background:#fff;
    /*border-top: none;*/	
}

.event_date_tickets {
	
	float:right;	
}

/* details page */

#social i {
	color:#68acd5;
	font-size:40px;
	margin:5px;	
}



h3 {color:#ccc}

.card .card-body {
    padding: 15px 15px 10px 15px;
    background-color: #fdfdfd;
}

.card label, .form-group label, .table thead th {
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #9A9A9A;
    font-weight: 400;
}

.card h4 {
    color: #9A9A9A;
    font-weight: normal;
    font-size: 1.2em;
}

.card em {color:#9a9a9a}

.purchase_options {
	text-align:right;	
}


.label_column {
	text-align:right;
	font-weight:500;	
}
.price_column {
	text-align:right;
	font-weight:500;
	padding-right:25px !important;	
}

.inputerror {
	background:#f8d7da;	
}

div.inputerrormessage, div[role="alert"] {
	color:red;
	font-size:12px;
	height:12px;
	margin-bottom:-12px;	
}

div[role="alert"] {
	margin-bottom:0px;	
}

.calendar_date {
    width: 14.285%;
    box-shadow: inset 0 0 1px #4e4e4e;
}

.alert.alert-small {
    padding: 2px;
    margin-bottom: 5px;
    font-size: 0.8em;
    font-weight: bold;
}


/*checkout*/
.header-row {
    background: rgba(0,0,0,0.05);
    font-size: 13px;
    font-weight: bold;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.list-group {
	font-size:14px;	
}
.list-group .row {
	border-top: 1px solid rgba(0,0,0,0.075);
	padding:3px 0;	
}

.list-group .row:nth-child(even) {
	background: rgba(0,0,0,0.03);	
}

.list-group .row.clear {background:transparent}

#order_items h3 span {display:inline-block;padding-left:30px;}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

#submission_screen {
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	text-align:center;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.7);
	background-image:url(ajax-loader.gif);
	background-position:50% 50%;
	background-repeat:no-repeat;	
}

#submission_message {
	margin:20% auto;
	text-align:center;
	font-size:18px;	
	padding:20px;
	background:#fff;
}

.seat_chart_buttons {
	text-align:right;	
}

#seat_layout {margin:10px 0;}

.display-phone {display:none}

.crossed-out {text-decoration:line-through;opacity:0.5}

.share_links a {
    width: 32px;
    height: 32px;
    background-size: 100% 100%;
    margin:10px 2px 2px;
    background-color:#ccc;
    display:inline-block;
    border-radius:100%;
}
.share_li {
background-image:url('social/li.png');
}
.share_tw {
background-image:url('social/tw.png');
}
.share_fb {
background-image:url('social/fb.png');
}
.share_pin {
background-image:url('social/pin.png');
}
.share_gp {
background-image:url('social/gp.png');
}

.event_image_location {
    background: #fbfbfb;
    padding: 10px;
    border: 1px solid #eee;
}

@media (max-width: 1200px) {
	.event_banner .banner_details {

	    top: 70px;
	    font-size:1.1em;
	}
}

@media (min-width: 767px) {
	.hidden-desktop {display:none}
}



@media (max-width: 767px) {
	body {
		font-size:14px;	
	}
	.order_list_order:nth-child(even) {
		background:#fafafa;
	}
	.order_list_order {
		padding:10px 0;
	}

	h1 {
		font-size: 1.5em;
	}
	
	div[role="dialog"] {max-width:96%}
	.instructions .order_cart {display:none}
	header #organization_logo {max-height:30px}
	header .menu_icon {
		position:fixed;
		top:0px;
		right:0px;
		background:#375297;
		z-Index:99;	
	}
	#nav-menu {width:300px;z-index:100;right:-300px;}
	
	.menu_icon.feather {
	  width: 36px;
	  height: 36px;
	 
	}

	
	table.responsive,table.responsive tbody,table.responsive tr, table.responsive td {
	display:block;
	border-top:none;
	}
	table.responsive td.price_column_label {
	text-align:left;
	display:inline-block;
	}
	table.responsive td.price_column {
	text-align:right;
	font-size:1.3em;
	margin-top:-1em;
	}
	table.responsive table tr {
	clear:both;
	}
	
	table.responsive tr th {display:none}
	
	.event_description {
		max-height:80px;
		overflow-y:hidden;
		transition:all 0.5s ease;	
	}
	
	.event_description.show {
		max-height:4000px;	
	}
	.desc_show_more {
	    display: block;
	    padding: 6px 0;
	    width: 100%;
	    color: #f89b23;
	    font-weight:bold;
	    text-align: center;
	    text-decoration: none;
	    margin-top: -30px;
	    position:relative;
	    background-image: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,1));
	}
	.purchase_options button.btn-success {
		width:100%;	
	}
	
	.list-group {
		font-size:16px;	
	}
	#order_items h3 {font-size:1.4em;}
	#order_items h3 span {display:block;padding-left:0px;}
	.event_date_tickets {float:none}
	
	.display-phone {display:inherit}
	.hidden-phone {display:none}
	
	.event_datetime {font-style:italic}
	.price_column {
	    color: #006b00;
	    font-size: 1.1em;
	}
	
	.seat_chart_buttons {
		text-align:center;	
	}
	
	.event_date_tickets tr.clear {border-bottom:1px solid #eee}
	.event_banner .banner_details {font-size:1em}

	.scroll-lr {max-width: 100%;overflow-x:scroll;}
	.scroll-lr * {
		white-space: nowrap; 
	}

}

@media (max-width: 576px) {
	
	header .contact {text-align:center}
	#contact_phone, #contact_email {
		margin:5px;
		font-size:1em;	
	}
	
	.event_image {
		height:200px;
		width:100%;
	}
	
	.event_image_container {
		padding:10px 20% 0;	
	}
	
	.event_link h2 {
		text-align:center	
	}
	
	.event_link p {
		padding:3px 10%;	
	}
	
	
	
	a.buy-tickets {
	    margin: 3px 10% 8px;
	    float: none;
	    display: block;
		width:80%;
		box-sizing:border-box;
	}
	
	footer img {
	    display: block;
	}
	#order_cart {

		float:none;
		text-align:center;
		margin:6px auto;	
	}
	.share_links {
		text-align:center;
	}
	.event_banner .banner_details {font-size:0.8em;}
}