/******************************************

Youmacon 2015 Website
Copyright 2015 Youmacon Enterprises, all rights reserved.
HTML, CSS, JavaScript, and Joomla Template by Chris Boren (@XiberKernel / @ChrisBoren)

Branding Colors:
Dark red	cb2026
Orange		f5881f			245, 136, 31

******************************************/

/******************************************
Web Fonts
******************************************/

/*	Open Sans from Google Webfonts  */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300italic,300);

@font-face {
    font-family: 'SF-Arborcrest-Heavy';
    src:url('../fonts/SF-Arborcrest-Heavy.ttf.woff') format('woff'),
        url('../fonts/SF-Arborcrest-Heavy.ttf.svg#SF-Arborcrest-Heavy') format('svg'),
        url('../fonts/SF-Arborcrest-Heavy.ttf.eot'),
        url('../fonts/SF-Arborcrest-Heavy.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

/*****************************************
General Styling
*****************************************/
html, body{
	font-family: 'Open Sans', sans-serif;
	background-color:black;
	color:#111;
	overflow-x:hidden; /*	Fixes overflow caused by scrollbar & using vewpoint width 	*/
}

h1{
	text-transform:uppercase;
	letter-spacing:-1px;
	font-size:3em;
	font-weight:normal;
	color:#f5881f;
}

.center{
	text-align:center;
	vertical-align: middle;
}


.youma-font{
	font-family: 'SF-Arborcrest-Heavy';
	text-transform:uppercase;
	letter-spacing:-1px;
	font-weight:normal;
}

.youma-topbar{
	position:absolute;
	z-index:10;
	margin-top:20px;
	width:100%;
	min-height:60px;
	background-color:rgba(255,255,255,.95);
}

@media screen and (max-width: 767px) {
	.youma-topbar{
		position:absolute;
		z-index:10;
		margin-top:0px;
		width:100%;
		min-height:60px;
		background-color:rgba(255,255,255,.95);
	}

}

.youma-topbar-menu{
	display:table;
	text-align:center;
	width:100%;
	height:60px;

	vertical-align: middle;
}

.youma-topbar-menu ul, .nav .menu{
	display:table-cell;
	list-style:none;
	vertical-align:middle;
	margin-right:10px;
	font-weight:300;
	text-transform:uppercase;
	line-height:1.2em;
}

.youma-topbar-menu ul li, .nav .menu li{
	list-style:none;
	display:inline-block;
	font-weight:300;
	text-transform:uppercase;
	color:#444;
}

.youma-topbar-menu ul li a{
	color:#777;
	padding-left:7px;
	padding-right:7px;
	padding-top:2px;
	padding-bottom:2px;
	display:inline-block;
	transition:color .1s ease-in, background-color .1s ease-in;
	border-radius:5px;
}

.youma-topbar-menu ul, .nav .menu{
	margin:0;
	padding:0;
}


li.current a{
	color:#fff!important;
	padding-left:5px;
	padding-right:5px;
	padding-top:1px;
	padding-bottom:1px;
	display:inline-block;
	transition:color .1s ease-in, background-color .1s ease-in;
	border-radius:5px;
	background-color:#f5881f;
}

.youma-topbar-menu ul li a:hover{
	color:#fff;
	text-decoration: none;
	background-color:#cb2026;
}


#logo{
	max-height:100%;
	max-width:100%;
	vertical-align: middle;
}

.logo-helper{
	margin-top:0;
	padding-top:0;
	height: 60px;      /* equals max image height */
	width: 100%;
	white-space: nowrap;
	text-align: center;
}

/*  Solution from http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div  */
.img-center-helper {
    display: inline-block;
    height: 60px;
    vertical-align: middle;
}


.youma-cover-image{
	position:absolute;
	top:0;
	z-index:0;
	background-image:url('../img/cover-bg-01.jpg');
	background-size:cover;
	background-position: center;
	height:calc(100vh + 150px);
	width:100vw;
}



.youma-cover-text{
	position:relative;
	padding:20px;
	color:#f6891f;
	margin-top:calc(45vh - 200px);
	width:45vw;
	float:right;
	margin-right:5vw;
	font-size:1.2em;
	background-color:rgba(255,255,255,.95);
	border-radius:40px;
	border:5px solid #f6891f;
	z-index:101;
}

@media screen and (max-width:992px){
	.youma-cover-text{
		width:60vw;
	}
}


.youma-cover-text h1{
	margin:0;
	margin-bottom:10px;
	line-height:1em;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-weight: 700;

}

.youma-cover-text p{
	font-weight:600;
}

.youma-cover-text a.btn{
	font-size:1.25em;
}

.youma-page{
	border-top:2px solid #f5881f;
	position:relative;
	min-height:200px;
	background-color:#fff; /*Fallback for legacy browsers*/
	margin-top:300px;
	background: -webkit-linear-gradient(top, rgba(255,255,255,.75) 0%, #fff 150px); /* Chrome10+,Safari5.1+ */
	background:    -moz-linear-gradient(top, rgba(255,255,255,.75) 0%, #fff 150px); /* FF3.6+ */
	background:         linear-gradient(top, rgba(255,255,255,.75) 0%, #fff 150px); /* W3C */
	box-shadow: 0px 1px 4px 0px rgba(0,0,0,.25), 0px 0px 40px rgba(0,0,0,.25); 
	padding-bottom:100px;

}

.youma-cover-page{

	margin-top:calc(100vh - 20px);
}

.youma-header{
	position:absolute;
	top:0;
	z-index:0;
	background-image:url('../img/cover-bg-01.jpg');
	background-size:cover;
	background-position: center;
	height:450px;
	width:100vw;
	text-align:right;
}

.youma-header h1{
	color:rgba(255,255,255,.85);
	display:block;
	position:relative;
	margin-top:220px;
	font-family: 'SF-Arborcrest-Heavy';
	text-transform:uppercase;
	letter-spacing:-1px;
	font-weight:normal;
	margin-right:50px;
	font-size:5em;
}

@media screen and (max-width:992px){
.youma-header h1{
	font-size:3em;
}
}

.youma-header-cosplay{
	background-image:url('../img/cover-cosplay.jpg');
}

.youma-header-registration{
	background-image:url('../img/cover-registration.jpg');
}

.youma-header-guests{
	background-image:url('../img/cover-guests.jpg');
}

.youma-header-events{
	background-image:url('../img/cover-events.jpg');
}

.youma-header-tabletop{
	background-image:url('../img/cover-tabletop.jpg');
}

.youma-header-dealers{
	background-image:url('../img/cover-dealers.jpg');
}

.youma-header-faq{
	background-image:url('../img/cover-faq.jpg');
}

.youma-header-contact{
	background-image:url('../img/cover-contact.jpg');
}

.youma-header-location{
	background-image:url('../img/cover-location.jpg');
}

.youma-page h1{
	font-family: 'Open Sans', sans-serif;
	letter-spacing:.25em;
}

.youma-page-content{
	font-size:1.2em;
}

.youma-page-content h3{

	font-family: 'Open Sans', sans-serif;
	letter-spacing:.25em;
	text-transform: uppercase;
}

.youma-page-content h4{

	text-transform: uppercase;
	font-weight:600;
}

.youma-page-content a, .youma-sidebar a{
	color:#f5881f;
}


.youma-page-content h2{
	color:#cb2026;
	font-weight:600;
	border-bottom:2px solid #cb2026;
	padding-bottom:10px;

}

.youma-page-content h2 a{
	color:#cb2026;
	text-decoration: none;
	padding-bottom:none;
	margin-bottom:none;
	transition:color .1s ease-in, background-color .1s ease-in;
}

.youma-page-content h2 a:hover{
	background-color:#cb2026;
	color:white;
	text-decoration: none;
}

.youma-page h1 .center{
	display:inline-block;
	color:#111;
	padding: 0px 40px 0px 0px;
	border-bottom:3px solid #f5881f;
}

@media screen and (max-width:992px){
	.youma-page{
		margin-left:0;
		margin-right:0;
	}
}

/******************************************
		Sidebar
******************************************/
.youma-sidebar{
	font-size:1em;
}

.youma-sidebar-section{
	border-left:2px solid #f5881f;
	padding-left:10px;
	padding-bottom:20px;
}

.youma-sidebar h2, .youma-sidebar h3{
	color:#cb2026;
	letter-spacing:.25em;
	text-transform: uppercase;
	font-size:1.5em;
}

/******************************************
Nav Blocks - buckle up, you're in for a ride
******************************************/
.youma-nav-block-container{
	width:100vw;
	margin:0;
	padding:0;
	display:table;
}

.youma-nav-block-container a{
	text-decoration: none;
}

.youma-nav-block{
	transition:background-color .2s ease-out;
	width:25%;
	height:25vw;
	float:left;
	margin:0;
	padding:0;
	overflow:hidden;
}

.youma-nav-block:hover{
	background-color:red;
}

@media screen and (max-width:992px){
	.youma-nav-block{
		width:50%;
		height:50vw;
	}

}

.youma-nav-block p{

	display:absolute;
	font-family: 'Open Sans', sans-serif;
	letter-spacing:.25em;
	text-transform: uppercase;
	text-align:center;
	vertical-align:bottom;
	color:white;
	font-size:3em;
	height:100%;
	line-height:1em;
	overflow:hidden;

}

/******************************************
Cosplay Block
******************************************/

.youma-nav-block-cosplay{
	background-image:url('../img/15links-cosplay.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-cosplay-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(228, 58, 53, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-cosplay-overlay:hover{
	background-color:rgba(228, 58, 53, .75);
}

/******************************************
Video Gaming Block
******************************************/

.youma-nav-block-gaming{
	background-image:url('../img/15links-gaming.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-gaming-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(69, 128, 194, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-gaming-overlay:hover{
	background-color:rgba(69, 128, 194, .75);
}

/******************************************
Guests Block
******************************************/

.youma-nav-block-guests{
	background-image:url('../img/15links-kroze.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-guests-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(77, 175, 78, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-guests-overlay:hover{
	background-color:rgba(77, 175, 78, .75);
}



/******************************************
Events block
******************************************/

.youma-nav-block-events{
	background-image:url('../img/15links-events.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-events-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(247, 140, 30, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-events-overlay:hover{
	background-color:rgba(245, 136, 31, .75);
}

/******************************************
Tabletop block
******************************************/

.youma-nav-block-tabletop{
	background-image:url('../img/15links-tabletop.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-tabletop-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(0, 172, 93, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-tabletop-overlay:hover{
	background-color:rgba(0, 172, 93, .75);
}

/******************************************
Dealers block
******************************************/

.youma-nav-block-dealers{
	background-image:url('../img/15links-dealers.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-dealers-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(240, 83, 35, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-dealers-overlay:hover{
	background-color:rgba(240, 83, 35, .75);
}

/******************************************
Video block
******************************************/

.youma-nav-block-video{
	background-image:url('../img/15links-video.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-video-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(134, 59, 150, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-video-overlay:hover{
	background-color:rgba(134, 59, 150, .75);
}

/******************************************
Music block
******************************************/

.youma-nav-block-music{
	background-image:url('../img/15links-music.jpg')!important;
	background-position:center;
	background-size:cover;
	float:left;
	margin:0;
	padding:0;
}

.youma-nav-block-music-overlay{
	display:block;
	vertical-align:bottom;
	height:100%;
	width:100%;
	position:relative;
	background-color:rgba(211, 72, 154, .25);
	transition:background-color .1s ease-in, background-color .1s ease-in;

}

.youma-nav-block-music-overlay:hover{
	background-color:rgba(211, 72, 154, .75);
}

/******************************************
Footer
******************************************/
.youma-footer{
	position:inline;
	background-color:white;
	border-top:2px solid #f5881f;
	border-bottom:2px solid #f5881f;
	padding-top:10px;
	padding-bottom:10px;
	z-index:20;
	width:100%;
	font-size:.9em;
}

/******************************************
Mobile
******************************************/

@media screen and (max-width: 767px) {
	.youma-cover-text{
		width:100vw;
		position:inherit;
		display:inline;
		border-radius:0px;
		margin-top:150px;
		margin-right:0px;
		border-left:0px;
		border-right:0px;
		height:100%;
		z-index:101;
	}

	.youma-cover-image{
		position:static;
		top:0;
		z-index:0;
		background:#fff;
		min-height:300px;
		height:auto;
		width:100vw;
	}
	body, html{
		background-color:#fff;
	}
	.youma-cover-page, .youma-cover{

		position:static;
		margin-top:20px;
		padding-top:20px;
		top:auto;
		border-top:0px;
	}
}

/******************************************
Joomla overrides
******************************************/
.article-info-term{
	display:none;
}
.published{
	font-size:.75em;
	font-family: 'Open Sans', sans-serif;
	letter-spacing:.25em;
	text-transform: uppercase;
}

.page-header{
	padding:0;
	border:0;
	margin:0;
}

h2.item-title{
	margin-bottom:5px;
}

.item-image img{
	max-width:300px;
	width:33vw;
	margin-left:10px;
	margin-bottom:10px;
	border-radius: 5px;
	border:1px solid rgba(0,0,0,.5);
	box-shadow: 8px 8px 5px rgba(0,0,0,.25);
}

/*.page-header{
	display:none;
}
*/

/******************************************
I don't care what Weird Al says, I used the Oxford Comma 
in the beginning of this file and no one can stop me.
******************************************/