@import "lesshat";

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body {
	line-height: 1;
  background: #fff;
  -webkit-text-size-adjust: none;
}

ol, ul {
	list-style: none;
}

body, input, select, textarea {
  color: #666;
  font-family: 'Roboto', sans-serif;
  font-size: 16pt;
  font-weight: 300;
  line-height: 1.65em;
}

a {
  -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  /*border-bottom: dotted 1px #666; */
  color: inherit;
  text-decoration: none;
}

  a:hover {
    border-bottom-color: transparent !important;
    color: #6bd4c8;
  }

strong, b {
  color: #555;
  font-weight: 400;
}

p {
  margin: 0 0 2em 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #555;
  line-height: 1em;
  margin: 0 0 0.5em 0;
	font-family: 'Oswald', sans-serif;
}

  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
  }

h1 {
  font-size: 2.5em;
  line-height: 1.35em;
}

h2 {
  font-size: 2.25em;
  line-height: 1.35em;
}

h3 {
  font-size: 1.5em;
  line-height: 1.5em;
}

h4 {
  font-size: 1.25em;
  line-height: 1.5em;
}

h5 {
  font-size: 1em;
  line-height: 1.5em;
}

h6 {
  font-size: 0.8em;
  line-height: 1.5em;
}

ul.actions {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  cursor: default;
  list-style: none;
  margin-left: -1em;
  padding-left: 0;
}

ul.actions li {
  padding: 0 0 0 1em;
  vertical-align: middle;
	font-weight: bold;
}

ul.actions.special {
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  width: 100%;
  /* margin-left: 0; */
}

ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0;
}

  ul.icons li {
    display: inline-block;
    padding: 1.25em;
  }

	img {
    max-width: auto;
    max-height: 15em;
		float: left;
		display: inline-block;
		overflow: hidden;
		padding: 0 2em 2em 0;
		vertical-align: center;
}

.accordion {
  background-color: #555;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}

 .active, .accordion:hover {
 	background-color: #696969;
 }
 .panel {
  padding: 0 18px;
  background-color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: #555;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

img.sponsor1 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	float: none;
	width: 100%;
	height: auto;
	max-width: 42em;
	margin-top: 4em;
	margin-bottom: 4em;
}

img.sponsor2 {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	float: none;
	width: 100%;
	height: auto;
	max-width: 20em;
	margin-bottom: 3em;
}

img.sponsor3 {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	float: none;
	width: 100%;
	max-width: 13em;
	height: auto;
	vertical-align: middle;
	margin-bottom: 2em;
}

img.sponsor4 {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	float: none;
	width: 100%;
	max-width: 6em;
	height: auto;
	vertical-align: middle;
	margin-bottom: 2em;
}

#tiers{
		text-align: center;

}

table td {
    /* color: #036bff; */
    padding: 0 0.5em 0.25em 0;
    /* white-space: nowrap; */
		/* display: inline-block; */
}

table {
	width: 80%;
	margin-left: 10%;
}



  .button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: white;
		border-radius: 4px;
		border: 0;
		box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.5);
		color: #555 !important;
		cursor: pointer;
		display: inline-block;
		font-size: 1em;
		font-weight: 400;
		height: 2.75em;
		letter-spacing: 0.125em;
		line-height: 2.75em;
		padding: 0 2em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}


	.button:hover {
		background-color: rgba(201, 241, 107, 1);
	}


	.container {
		margin: 0 auto;
		max-width: calc(100% - 4em);
		width: 60em;
	}




  /* Main */

  	.main {
  		padding: 6em 1.5em 4em 1.5em ;
  	}

  		.main.style1 {
  			background: rgba(255, 255, 255, 0.5);
  		}

			.main.style1 a {
				border-bottom-color: rgba(255, 255, 255, 0.5);
			}

  		.main.style2 {
  			background-color: #333;
  			color: rgba(255, 255, 255, 0.75);
  			background-attachment: fixed,	fixed;
  			background-size: auto,	cover;
				/* margin-left: 3em; */
  		}

  			.main.style2 a {
  				border-bottom-color: rgba(255, 255, 255, 0.5);
  			}

  				.main.style2 a:hover {
  					color: #ffffff;
  				}

  			.main.style2 h1, .main.style2 h2, .main.style2 h3, .main.style2 h4, .main.style2 h5, .main.style2 h6, .main.style2 strong, .main.style2 b {
  				color: #ffffff;
  			}

  			.main.style2 header p {
  				color: #ffffff;
  			}

  			.main.style2 header.major:after {
  				background: #ffffff;
			  }
			  
.flexBox {
	display: flex;
    flex-flow: row wrap;
}

.flexItem {
	flex-grow: 1;
	max-width: 18em;
	margin: 1em;
}
	.flexItem h3{
		font-size: 1.5em;
  		line-height: 1.5em;
	}

	.flexItem p {
		font-size: .75em;
		line-height: 1.2em;
	}

	.flexItem strong { font-weight: bold; }


        /* Header */

        	#header {
        		padding: 10em 0px 10em 0px;
    /*    		background-attachment: fixed,fixed,fixed;
        		background-image: url("background_dark.png");
        		background-position: top left,center center,center center;
        		background-position: center; */
        		height: 15.5em ;
        		background-size: cover;
						background-repeat: no-repeat;
        		overflow: hidden;
        		position: relative;
						z-index: 1;
        		text-align: center;
        	}

          #header h1, #header h2, #header h3, #header h4, #header h5,
					#header h6, #header strong, #header b, #header p {
            color: #333;
					}

					#header h1 {
						margin: 2em 0 0.5em 0;
						transform: scale(1.35);
					}


					#header br {
						display: none;
					}

					#header strong {
						font-weight: 600;
					}

					#header h4 {
						padding: 0.15em 0 0.5em 0;
						/* font-family: "Roboto", sans-serif; */
					}

					#header .button {
						box-shadow: inset 0 0 0 1px #080808;
						color: #080808 !important;
					}

					#canvasContainer {
						position: relative;
						pointer-events:none;
					}

					#canvasContainer canvas {
						position: absolute;
						background-attachment: fixed,fixed,fixed;
					}

					#canvasContainer ul {
						pointer-events: auto;
					}

					#theCanvas {
					  height: 100%;
						width:auto;
						position: relative;
					}

					#controlPanel {
					  line-height: 1em;
					 /* float: left; */
						position: absolute;
					  top: 0;
					  left: 5%;
					  width: 10em;
					  background: rgba(255, 255, 255, 0.4);
					  /* border-left: rgba(0, 0.9, 0, 0.6);
					  border-bottom: rgba(0, 0, 0, 0.6); */
					  padding: 0.65em;
					}
					#controlPanel h1 {
					  font-family: 'Oswald', sans-serif;
					  font-size: 1.25em;
					  margin-bottom: 1em;
					}
					#controlPanel label {
					  display: block;
						font-size: 0.75em;
					}
					#controlPanel input {
					  width: 80%;
						color: #78D5CE;
					}
					#controlPanel span {
					  display: inline-block;
					  width: 15%;
					  text-align: center;
						font-size: 0.75em;
						margin-bottom: 0.5em;
					}




					/* Footer */

						#footer {
							padding: 4em 0 4em 0 ;
	/*						background-attachment: fixed,fixed,fixed;
							background-image: url("background_dark.png");
							background-position: top left,center center,center center;
							background-size: cover; */
							text-align: center;
							overflow: hidden;
				/*			color: white; */
						}

						#footer a {
							border-bottom-color: rgba(255, 255, 255, 0.5);
						}

						#footer a:hover {
									color: #78D5CE;
						}

							#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer strong, #footer b {
								color: #333333;
							}

							#footer header p {
								color: #333333;
							}

							#footer header.major:after {
								background: #333333;
							}

							#footer .icons {
								margin: 0;
								transform: scale(3.5);
								color: #333333;
							}

							#footer .copyright {
								font-size: 0.8em;
								list-style: none;
								margin: 2em 0 0 0;
								padding: 0;
							}

								#footer .copyright li {
									display: inline-block;
									line-height: 1em;
								}

	@media screen and (max-width: 700px) {
		#header h1 {
				margin: 2em 0 0.5em 0;
				transform: scale(1.15);
			}

			#header br {
				display: block;
			}

			#footer .icons {
				margin: 0;
				transform: scale(1.5);
			}

			h1, h2, h3, h4, h5, h6, p {
				transform: scale(0.95);
			}

			.responsiveHide {
				display: none;
			}

		}


		@media screen and (max-width: 415px) {
			#header h1 {
				margin: 2em 0 0.5em 0;
				transform: scale(0.85);
			}

			#schedule td {
				transform: scale(0.85);
				padding: 0 0 0 0;
			}

			#schedule table {
				width: 60%;
				margin-left: 0%;
			}
		}