/* tags */

html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
}

html, body {
	height: 100%;
	width: 100%;
	overflow-x: hidden;
}

body {
	font-size: 20px;
	line-height: 1.5;
	font-family: 'Source Sans Pro', sans-serif;
	background-image: url(img/bg.png);
	background-repeat: repeat;
}

input, textarea, button {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
}

p {
	margin-bottom: 1em;
}

.mainContent a {
	color: inherit;
	border-bottom: 1px solid #5CBDAE;
}

.mainContent a:hover {
	border-bottom: 1px solid transparent;
}


@media screen and (max-width: 800px) {
	body {
		font-size: 17px;
	}
}

/* colors */

.mainColor {
	color: #5CBDAE;
}


.spotColor,
.column h3,
.mainContent a:hover {
	color: #E5323C;
}

.spotFill svg {
	fill: #E5323C;
}



/* header titles */

.mainTitle {
	position: absolute;
	left: 2.2em;
	top: 3em;
}

.pageTitle {
	position: absolute;
	top: 3em;
	right: 2em;
	margin-top: 1.65em;
}

@media screen and (max-width: 800px) {
	.mainTitle {
		top: 1em;
		left: 1em;
	}
	
	.pageTitle {
		right: 0.5em;
		top: 8em;
		margin-top: 0;
		text-align: right;
	}
	
	.pageTitle svg {
		width: 95%;
		height: auto;
	}
}


/* containers */

.contentContainer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	min-height: 100%;
	max-width: 1000px;
	padding-bottom: 10em;
}

.mainHeader {
	height: 80vh;
	max-height: 669px;
}

.illuContainer {
	position: static;
	width: 5000px;
	height: 80vh;
	max-height: 669px;
	z-index: -1;
	background-image: url(img/illu.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	-webkit-animation: backgroundScroll 50s linear infinite;
	animation: backgroundScroll 50s linear infinite;
}

@-webkit-keyframes backgroundScroll {
	0% { -webkit-transform: translateX(0px) }
	100% { -webkit-transform: translateX(-2444px)}
}

.mainContent {
	min-height: 800px;
}



/* tabs */

.tab {
	margin-top: -2px;
	display:none;
	background-color: white;
	border: 1px solid #5CBDAE;
	padding: 2.4em;
}

.tab.active {
	display:block;
}

.tab .column {
	display:inline-block;
	vertical-align: top;
	width: 48%;
}

.tab .column.left {
	margin-right: 2%;
}

.tab .column img {
	width: 95%;
	display:block;
	margin-bottom: 1em;
}

.tab h3 {
	margin-bottom: 1em;
}

.tab .note {
	font-size: 0.8em;
}


@media screen and (max-width: 800px) {
	.tab {
		padding: 1em;
	}
	.tab .column {
		display:block;
		width: 100%;
		margin-bottom: 3em;
	}
	
	.tab .column img {
		width: 100%;
	}
}



/* table */

.table {
	margin-bottom: 1em;
}

.table svg {
	width: 85%;
	height: auto;
}

.seat {
	fill: white;
	cursor:pointer;
}

.seat[data-occupied="true"],
.seat[data-selected="true"]{
	fill: #5CBDAE;
	cursor: default;
}

.seat:hover {
	fill: #5CBDAE;
}

@media screen and (max-width: 800px) {
	.table svg {
		width: 100%;
	}
}


/* form */

.form {
	margin-bottom: 1em;
}

.form button[type=submit] {
	background-color: #E5323C;
	color: white;
	border: 1px solid #E5323C;
	font-size: 0.8em;
	padding: 4px 20px;
	height: 34px;
	display:inline-block;
	vertical-align: top;
	cursor: pointer;
	border-radius: 0;
	-webkit-appearance: none;
}

.form input[type=email] {
	border: 1px solid #E5323C;
	margin-right: 0.5em;
	padding: 4px 8px;
	height: 34px;
	display:inline-block;
	vertical-align: top;
	outline: none;
	width: 11em;
	margin-bottom: 0.5em;
	border-radius: 0;
	-webkit-appearance: none;
}


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: #5CBDAE;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #5CBDAE;
	opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #5CBDAE;
	opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #5CBDAE;
}
:placeholder-shown { /* Standard */
	color: #5CBDAE;
}

@media screen and (max-width: 900px) {
	.form input[type=email] {
		width: 100%;
	}
}




/* nav */

.mainNav {
	position: relative;
	width: 100%;

}

.mainNav {
	display:table;
	table-layout:fixed;
}

.mainNav>div {
	display:table-cell;
	text-align: center;
	width: 20%;
	height: 40px;
	vertical-align: middle;
	border: 1px solid transparent;
}

.mainNav>div.active {
	background-color: white;
	border: 1px solid #5CBDAE;
	border-bottom-color: white;
	margin-bottom: -2px;
}

.mainNav a {
	padding: 1em;
	display:block;
}

@media screen and (max-width: 1000px) {
	.mainNav a {
		padding: 1em 0.5em;
	}
	
	.mainNav>div {
		overflow:hidden;
	}
	
	.mainNav svg {
		height: 0.7em;
		width: auto;
	}

}

@media screen and (max-width: 800px) {
	.mainNav svg {
		height: 0.9em;
		width: auto;
	}
}