/*--------------------------------------------------------------------------
   
	Eventcamp

	0. YUI Library is used for CSS reset (http://yuilibrary.com/yui/docs/cssreset/)
	1. Body
	2. Typography
	3. Page Sections
		3.1. Topbar
		3.2. Event Information
		3.3. Invitation
		3.4. About
		3.5. Concert Program
		3.6. Tickets
		3.7. Map
		3.8. Contact
		3.9. Sponsors
		3.10. Footer
	4. Forms

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

/*--------------------------------------------------------------------------
	1. Body
--------------------------------------------------------------------------*/

body {
	color: #333;
	background: #000;
	font: 400 16px/28px 'DIN Next W01', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}



/*--------------------------------------------------------------------------
	2. Typography
--------------------------------------------------------------------------*/

/* Links */
a, a:visited { color: #333; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #666; }
p a, p a:visited { line-height: inherit; }

/* Font stylings */
em { font-style: italic; }
strong { font-weight: 700; }
small { font-size: 80%; }



/*--------------------------------------------------------------------------
	3. Sections

	* Each block of the HTML page is named similar to "section-name"
	* If you don't need a specific section, just remove the whole section div block in the HTML file
--------------------------------------------------------------------------*/

h2 { 
	font: 900 46px/58px 'DIN Next W01', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	text-align: center;
}

p.desc {
	font: 400 14px/26px 'DIN Next W01', Helvetica, Arial, sans-serif;
}

/* Font colors */
.font-color-primary {
	color: #c02d00;
}

.font-color-white {
	color: #fff;
}

/* Colors - Underline */
.underline-color-primary {
	border-bottom: 1px solid #c02d00;
}

img { max-width: 100%; }

.container{
	border-top: 2px solid #c02d00;
}



	/*---------------------------------------------------
		3.1 Topbar

		* This is the fixed top navigation
	---------------------------------------------------*/

	/* Topbar (fixed) */
	/* Please refer to responsive_custom.css for CSS in smaller viewport */
	#section-topbar {
		height: 195px;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		overflow: visible;
		font: 400 16px/24px 'DIN Next W01', Helvetica, Arial, sans-serif;
	}

	#section-topbar .container{
		border-top: 0;
	}

	#section-topbar a {
	  color: #fff;
	}

	#topbar-inner {
		/*	*	*	*	*	*	*	*	*	*	*	*
			bg_alpha50.png file is used for transparent background 
			Look in the documentation file for usages of transparent png overlays
		*	*	*	*	*	*	*	*	*	*	*	*/
		/*background: url('/img/alpha/bg_alpha80.png');*/
		background: #000;
		height: 195px;
	}

	/*	*	*	*	*	*	*	*	*	*	*	*
		In mobile viewports, the list menu is converted to "select" element via javascript
		https://github.com/lukaszfiszer/selectnav.js
	*	*	*	*	*	*	*	*	*	*	*	*/
	.selectnav { display: none; }


	/*
		Top Bar

		By default, top navigation bar uses "fixed" position
		Menu collapses in mobile viewports
		Refer to css/responsive_custom.css for mobile layouts
	*/
	#section-topbar ul#nav {
		display: block;
		position: relative;
		margin: 0 auto;
		text-align: center;
	}

	#section-topbar ul#nav > li {
		display: inline-block;
		text-align: center;
	}

	#section-topbar ul#nav li{
	padding: 20px 15px;
	text-align: center;
	}

	#section-topbar ul#nav a {
	  display: block;
	  font: 900 15px/22px 'DIN Next W01', Helvetica, Arial, sans-serif;
	  text-decoration: none;
	  text-transform: uppercase;
	  padding: 12px 0px 13px 0px;
	  text-align: center;
	}

		#section-topbar ul#nav a {
			border-bottom: 4px solid transparent;
		}

		#section-topbar ul#nav a:hover {
		  border-bottom: 4px solid #c02d00;
		  text-decoration: none;
		}

		#section-topbar ul#nav .active a {
			border-bottom: 4px solid #c02d00;
		}

		#section-topbar .logo{
			padding: 15px 0 0 0;
		}

		#section-topbar #logocontainer, #section-topbar #navcontainer{
			display: block;
			text-align: center;
			vertical-align: middle;
		}
		
	/*---------------------------------------------------
		3.2 Manifesto
		
	---------------------------------------------------*/
	
	#section-manifesto {
		color: #fff;
		background: #000;
		background: url('_files/doom-redpng-top.jpg') #000 no-repeat 0 top;
		background-size: 100%;
	}

		#section-manifesto .container {
			border-top: none;
		}

		#section-manifesto .columns {
			margin: 0;
		}

		#section-manifesto .gradient-background {
			padding: 200px 0 50px 0;
			background: transparent;
			margin: 0 auto;
		}

		#section-manifesto .padded {
			padding: 0;
		}

		@media only screen and (min-width: 480px) {
			#section-manifesto .gradient-background {
				padding: 280px 0 50px 0;
			}
		}

		@media only screen and (min-width: 640px) {
			#section-manifesto .gradient-background {
				padding: 340px 0 50px 0;
			}
		}

		@media only screen and (max-width: 767px) {
			#section-manifesto .gradient-background {
				float: none;
				display: block;
			}
		}

		@media only screen and (min-width: 768px) and (max-width: 1000px) {
			#section-manifesto .gradient-background {
				width: 420px;
			}
		}

		@media only screen and (min-width: 768px) {
			#section-manifesto {
				background: url('_files/doom-redpng-bg.png') #000 no-repeat center;
				background-size: auto 100%;
			}

			#section-manifesto .gradient-background {
				padding: 50px 0;
			}

			#section-manifesto .padded {
				padding: 0 0 0 20px;
			}
		}

		@media only screen and (min-width: 1000px) {
			#section-manifesto .gradient-background {
				padding: 100px 0;
			}
		}

		@media only screen and (min-width: 1200px) {
			#section-manifesto .gradient-background {
				padding: 150px 0;
			}
		}

		#section-manifesto .btn {
			color: #000;
			background-color: #fff;
			border-color: #fff;
			display: inline-block;
			font-weight: 700;
			text-align: center;
			white-space: nowrap;
			vertical-align: middle;
			border: 1px solid transparent;
			padding: 0.375rem 0.75rem;
			font-size: 1rem;
			line-height: 1.5;
			border-radius: 0;
			transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
			cursor: pointer;
			text-transform: uppercase;
		}

		#section-manifesto h2 { 
			margin: 0 0 50px 0;
			text-align: left;
		}
		#section-manifesto p { 
			font-size: 1.25em;
		}

	/* alpha hover layer */
	#section-info {
		background: url('_files/bg_alpha30.png');
		padding: 30px 0;
	}

		#section-info h2 {
			font: 700 16px/28px 'DIN Next W01', Helvetica, Arial, sans-serif;
			text-transform: uppercase;
		}

		#section-info #box-date {
			background: url('_files/icon_date.png') no-repeat left 5px;
			padding-left: 70px;
		}

		#section-info #box-time {
			background: url('_files/icon_time.png') no-repeat left 5px;
			padding-left: 70px;
		}

		#section-info #box-location {
			background: url('_files/icon_map.png') no-repeat left 5px;
			padding-left: 70px;
		}

		#section-info h3 {
			font: 700 13px/22px 'DIN Next W01', Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			margin-bottom: 4px;
			letter-spacing: 2px;
		}

		#section-info p {
			font: 400 13px/23px 'DIN Next W01', Helvetica, Arial, sans-serif;
		}

	/*---------------------------------------------------
		3.3 Games
	---------------------------------------------------*/

	#section-games {
		color: #c3c3c3;
		background: #000 url('_files/gamesbg.jpg') no-repeat center;
		background-size: cover;
	}

	#section-games .container{
		padding: 50px 0;
	}

		#section-games h2 {
			color: #fff;
			margin-bottom: 20px;
		}

		#section-games p.headline {
			color: #fff;
			font: 700 24px/36px 'DIN Next W01', Georgia, serif;
			text-align: left;
			text-transform: uppercase;
		}

		#section-games p {
			margin-bottom: 30px;
		}

		#section-games a {
			color: #C02D00;
		}

		#section-games a.morebutton {
			font: 900 16px/26px 'DIN Next W01', Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			letter-spacing: 2px;
			display: block;
			cursor: pointer;
			color:#fff;
			background:#c02d00;
			padding: 8px 12px;
			border: none;
			-moz-border-radius: 0px;
			-webkit-border-radius: 0px;
			-khtml-border-radius: 0px;
			border-radius: 0px;
			text-align: center;
			width: 30%;
			margin-top: 20px;
		}
		
		#section-games a.morebutton:hover { 
			color: #000;
			background: #fff; 
		}



	/*---------------------------------------------------
		3.4 Culture
	---------------------------------------------------*/

	#section-culture {
		color: #c3c3c3;
		background: #000;
	}

	#section-culture .container{
		padding: 50px 0;
	}

		#section-culture h2 {
			color: #fff;
			margin-bottom: 20px;
		}

		#section-culture p.desc {
			color: #c02d00;
		}

		#section-culture p {
			margin-bottom: 40px;
		}

		


	/*---------------------------------------------------
		3.5 Dallas
	---------------------------------------------------*/

	#section-dallas {
		background: #000 url('_files/dallas_bg.jpg') no-repeat center;
		color: #c3c3c3;
		background-size: cover;
	}

	#section-dallas .container{
		padding: 50px 0;
	}

		#section-dallas h2 {
			color: #fff;
			margin-bottom: 20px;
		}

		#section-dallas p {
			margin-bottom: 10px;
		}

		#section-dallas a{
			color: #fff;
		}

		#section-dallas a:hover{
			color: #c02d00;
		}

		#section-dallas p.header{
			text-transform: uppercase;
			font-weight: 700;
			color: #c02d00;
		}

		#section-dallas p.title{
			font-weight: 700;
			color: #c02d00;
		}

		#section-dallas .item{
			margin: 20px 0;
		}

		#section-dallas hr{
			border-bottom: 2px solid #c02d00;
			border-top:0;
			border-left:0;
			border-right:0;
		}

/*---------------------------------------------------
		3.5.2 Frankfurt
	---------------------------------------------------*/

	#section-modding {
		background: #000 url('_files/background-frankfurt.jpg') no-repeat center;
		color: #c3c3c3;
		background-size: cover;
	}

	#section-modding .container{
		padding: 50px 0;
	}

		#section-modding h2 {
			color: #fff;
			margin-bottom: 20px;
		}

		#section-modding p {
			margin-bottom: 10px;
		}

		#section-modding a{
			color: #fff;
		}

		#section-modding a:hover{
			color: #c02d00;
		}

		#section-modding p.header{
			text-transform: uppercase;
			font-weight: 700;
			color: #c02d00;
		}

		#section-modding p.title{
			font-weight: 700;
			color: #c02d00;
		}

		#section-modding .item{
			margin: 20px 0;
		}

		#section-modding hr{
			border-bottom: 2px solid #c02d00;
			border-top:0;
			border-left:0;
			border-right:0;
		}



	/*---------------------------------------------------
		3.6 Careers
	---------------------------------------------------*/

	#section-careers {
		color: #c3c3c3;
		background: #000;
	}

	#section-careers .container{
		padding: 50px 0;
	}

		#section-careers h2 {
			color: #fff;
			margin-bottom: 20px;
		}

		#section-careers p{
			margin-bottom: 20px;
		}

		#section-careers p.header{
			text-transform: uppercase;
			font-weight: 700;
			color: #fff;
			margin-bottom: 10px;
		}

		#section-careers p.careertxt{
			margin-bottom: 10px;
		}

		#section-careers a{
			color: #c02d00;
			font-weight: 700;
		}

		#section-careers a:hover{
			color: #fff;
		}

		#section-careers hr{
			border-bottom: 1px solid #3b2b22;
			border-top:0;
			border-left:0;
			border-right:0;
		}

		#section-careers a.morebutton {
			font: 900 16px/26px 'DIN Next W01', Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			letter-spacing: 2px;
			display: inline-block;
			cursor: pointer;
			color:#fff;
			background:#c02d00;
			padding: 8px 12px;
			border: none;
			-moz-border-radius: 0px;
			-webkit-border-radius: 0px;
			-khtml-border-radius: 0px;
			border-radius: 0px;
			text-align: center;
			margin-top: 20px;
		}
		
		#section-careers a.morebutton:hover { 
			color: #000;
			background: #fff; 
		}


	/*---------------------------------------------------
		3.7 Slayers Club
	---------------------------------------------------*/

	#section-music {
		color: #d3d3d3;
		background: #000 url('_files/slayers-club-bg.jpg') no-repeat center;
		background-size: cover;
	}

	#section-music .container{
		padding: 50px 0;
	}

	#section-music h2 {
		color: #fff;
		margin-bottom: 20px;
	}

	#section-music p{
		margin-bottom: 20px;
	}

	#section-music a{
		color: #c02d00;
	}

	#section-music a:hover {
		color: #fff;
	}

	.slayers-club-logo {
		height: 190px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding-bottom: 20px;
	}

	.slayers-club-logo img {
		max-height: 190px;
	}

	/*---------------------------------------------------
		3.8 Quakecon
	---------------------------------------------------*/

	#section-mastering {
		color: #c3c3c3;
		background: #000 url('_files/quakecon_bg.jpg') no-repeat center;
		background-size: cover;
	}

	#section-mastering .container{
		padding: 50px 0;
	}


	#section-mastering h2{
		color: #fff;
		margin-bottom: 20px;
	}

	#section-mastering p {
		margin-bottom: 20px;
	}

	#section-mastering a{
		color: #fff;
	}

	#section-mastering a:hover{
		color: #c02d00;
	}

	.quakecon-img {
		height: 190px;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	.quakecon-img img {
		max-height: 190px;
	}


	/*---------------------------------------------------
		3.9 Contact
	---------------------------------------------------*/
	
	#section-contact {
		color: #c3c3c3;
		background: #000;
	}

	#section-contact .container{
		padding: 50px 0;
	}
	
		#section-contact h2 {
			color: #fff;
			margin-bottom: 40px;
		}

		#section-contact p {
			margin-bottom: 40px;
			margin-top: 40px;
		}

		#section-contact p.header{
			color: #fff;
			text-transform: uppercase;
			font-weight: 700;
			margin-bottom: 20px;
			margin-top: -10px;
		}

		#section-contact p a{
		color: #c02d00;
	}

	#section-contact p a:hover{
		color: #fff;
	}

		
		/* Register Form */
		#section-contact form {
			margin-bottom: 40px;
		}

		#section-contact form p,
		#section-contact label,
		#section-contact legend { 
			font: 400 15px/23px 'DIN Next W01', Helvetica, Arial, sans-serif;
		}
		
		#section-contact label {
			margin: 6px 0;
		}
		
		#section-contact input, 
		#section-contact textarea, 
		#section-contact select { 
			width: 90%; 
			padding: 10px 16px; 
			color: #eee; 
			background: #333;
			margin: 0 0 20px 0; 
			border: 0;
			outline: none;
		}
		
		#section-contact input:focus, 
		#section-contact textarea:focus, 
		#section-contact select:focus { 
			color: #fff;
			background-color: #c02d00;
		}
		
		#section-contact button.submit {
			font: 900 16px/26px 'DIN Next W01', Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			letter-spacing: 2px;
			display: block;
			cursor: pointer;
			color:#fff;
			background:#c02d00;
			padding: 8px 12px;
			border: none;
			-moz-border-radius: 0px;
			-webkit-border-radius: 0px;
			-khtml-border-radius: 0px;
			border-radius: 0px;
		}
		
		#section-contact button.submit:hover { 
			color: #c02d00;
			background: #fff; 
		}
		
		#section-contact span.required { 
			color: #c02d00;
			font-size: 13px;  
		} /* Select the color of the * if the field is required. */

		#contact-warning {
			display: none;
			color: #fff;
			background: #dd3333;
			padding: 20px 25px;
			margin-bottom: 30px;
		}
		
		#contact-warning-nojs {
			color: #fff;
			background: #dd3333;
			padding: 20px 25px;
			margin-bottom: 30px;
		}
		
		#contact-success {
			display: none;
			color: #77aa44;
			background: #111;
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		#section-contact #box-contact {
			margin-bottom: 60px;
		}

			#section-contact #box-contact h3 {
				color: #c02d00;
				font: 700 15px/23px 'DIN Next W01', Helvetica, Arial, sans-serif;
				text-transform: uppercase;
				margin-bottom: 15px;
			}

			#section-contact #box-contact p.address {
				color: #aaa;
				font: 400 14px/25px 'DIN Next W01', Helvetica, Arial, sans-serif;
				margin-bottom: 50px;
			}
			
			#section-contact #box-contact p.address {
				color: #aaa;
				font: 400 14px/25px 'DIN Next W01', Helvetica, Arial, sans-serif;
				margin-bottom: 50px;
			}
			
			
			#section-contact #box-contact a {
				color: #fff;
				font: 400 19px/28px 'DIN Next W01', Helvetica, Arial, sans-serif;
			}
			
				#section-contact #box-contact a:hover {
					color: #c02d00;
				}

		/* PDF Download */
		a.link-pdf {
			color: #c02d00;
			background: url(/img/icons/icon_pdf.png) no-repeat;
			font: 700 16px/30px 'DIN Next W01', Helvetica, Arial, sans-serif;
			text-transform: uppercase;
		    display: block;
		    padding: 40px 60px;
		}

			a.link-pdf span {
				background: #fff;
				padding: 3px 6px;
			}


		a.link-pdf:hover {
			color: #fff;
		}

			a.link-pdf:hover span {
				background: #000;
			}



	/*---------------------------------------------------
		3.10 Social
	---------------------------------------------------*/

	#section-social {
		color: #eee;
		background: #111;
	}

		#section-social .container{
			padding: 30px 0 20px 0;
		}

		#section-social h2 {
			font: 900 24px/36px 'DIN Next W01', Helvetica, Arial, sans-serif;
			margin-bottom: 20px;
		}

		#section-social a{
			color: #eee;
			vertical-align: middle;
			padding: 20px;
		}

		#section-social a img{
 				 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				 filter: alpha(opacity=50);
				  -moz-opacity: 0.5;
				  -khtml-opacity: 0.5;
				  opacity: 0.5;
				  vertical-align: middle;
				  padding-right: 10px;
		}

		#section-social a:hover img{
 				 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				 filter: alpha(opacity=100);
				  -moz-opacity: 1;
				  -khtml-opacity: 1;
				  opacity: 1;
				  vertical-align: middle;
		}

		#section-social .item{

		}



	/*---------------------------------------------------
		3.11 Footer
	---------------------------------------------------*/

	#section-footer {
		font: 400 13px/26px 'DIN Next W01', Helvetica, Arial, sans-serif;
		color: #fff;
		background: #000;
		padding-bottom: 30px;
	}

		#section-footer p.copytext {
			color: #616161;
			vertical-align: middle;
			padding: 35px 20px 10px 0;
			text-transform: uppercase;
			text-align: left;
		}

		#section-footer a { color: #616161; }

		#section-footer a:hover { color: #fff; }

		#section-footer ul#copyrightimgs li{
			display: inline-block;
			vertical-align: top;
			text-align: left;
			padding: 20px 20px 20px 0;
		}


#section-footer .floatright{
	float: right;
}

		#section-footer ul#social {
			float: right;
		}

		#section-footer ul#social li {
			display: inline-block;
			float: left;
			padding: 10px;
		}

		#section-footer ul#social li a img, #section-footer a img.zenimaxlogo {
 				 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				 filter: alpha(opacity=50);
				  -moz-opacity: 0.5;
				  -khtml-opacity: 0.5;
				  opacity: 0.5;
				  vertical-align: middle;
		}

		#section-footer ul#social li a:hover img, #section-footer a:hover img.zenimaxlogo {
 				 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				 filter: alpha(opacity=100);
				  -moz-opacity: 1;
				  -khtml-opacity: 1;
				  opacity: 1;
				  vertical-align: middle;
		}

		#section-footer img.esrb{
			vertical-align: middle;
			padding: 0px 15px 10px 0;
			float: right;
		}

/*--------------------------------------------------------------------------
   4. Forms
--------------------------------------------------------------------------*/

/* HTML5 Placeholder */
::-webkit-input-placeholder {
   color: #c02d00;
}

:-moz-placeholder {  
	color: #c02d00;
}




/*--------------------------------------------------------------------------
   5. Global
--------------------------------------------------------------------------*/



.arrow{
 background: #000 url('_files/arrow.png') center no-repeat;
background-size: 55%;
            height: 34px;
            width: 16px;
            padding: 10px;
}

.left{
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.arrow.active{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
				 filter: alpha(opacity=80);
				  -moz-opacity: .8;
				  -khtml-opacity: .8;
				  opacity: .8;
}

.arrow:not(.active){
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
				 filter: alpha(opacity=40);
				  -moz-opacity: .4;
				  -khtml-opacity: .4;
				  opacity: .4;
}

.gamesbox, .arrow{
	display: inline-block;
	vertical-align: middle;
	padding: 15px;
}
.galleria{ width: 100%; height: 500px; background: #000; margin-bottom: 2em;}
.galleria_games{ width: 80%; height: 400px; margin-bottom: 2em;}
.galleria_games .galleria-container {background: none;}
.galleria_games .galleria-stage {overflow: visible;}

@media (max-width: 1000px) {
	#section-topbar ul#nav a {
	  font: 900 12px/22px 'DIN Next W01', Helvetica, Arial, sans-serif;
	}
}

@media (max-width: 767px) {
	#section-games a.morebutton {
		width:35%;
	}
}

@media (max-width: 479px) {
	#section-games a.morebutton {
		width:50%;
	}
}