/*
SJ 2018 | Page Layout 
Custom CSS By | Randy Stone
Last Updated | April 2018
Author URL | randystone.co
Author Contact | hello@randystone.co
*/

/* Custom Classes */

::-webkit-scrollbar {width: 6px;}

::-webkit-scrollbar-track {
     background:#080808;
     box-shadow:0 0 3px rgba(0,0,0,0.7);
}

::-webkit-scrollbar-thumb {
    background:#c72026;
    border-radius:6px;
}

::selection {
	background: #c72026;
	color: #FFF;
	text-shadow: none;
}

::-webkit-selection {
    background:#c72026;
    color:#FFF;
    text-shadow:none;
}

::-moz-selection {
    background:#c72026;
    color:#FFF;
    text-shadow:none;
}

.table {
	display: table;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.table-cell { 
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

.fadeIn { opacity: 0; }

.noscroll { overflow: hidden !important; }

/* Twitter */
.grid-Footer {
    padding: 15px 0 !important;
    font-size: .75rem;
    border-bottom: none !important;
}

/* Default Grid */

.grid {
    display: grid;
    grid-gap: 15px;
    grid-template-columns:1fr; 
}
@media screen and (min-width:64em) {
.grid {grid-template-columns:1fr 1fr; }
}

/* HTML,Body */

#wpadminbar {display:none !important;}

html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }
	
@media screen and (max-width: 782px) {
html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }
}

body {
    background:#000;
    opacity: 1;
	transition: 1s opacity;
    color:#ccc;
    width: 100%;
    overflow-y:auto;
    overflow-x: hidden;
}

body.fade-out {
	opacity: 0;
	transition: none;
}

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

/* UI */

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

#ui,
#ui-content {
	width: 100%;
    max-width: 100%;
	height: auto;
	position: relative;
}

#ui {
    min-width:314px;
    padding: 0;
    z-index:1;
	margin: auto;
}
/*
#bg {
    background:url(http://bcrmedia.com/wp-content/uploads/2017/10/sjlabb.jpg) center center no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

#bg:after {
    content: '';
    display: block;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
}

#bg:before {
    content: '';
    display: block;
    width: 100%;   
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
background: -webkit-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0)', endColorstr='#00000000',GradientType=0 );
}

#bg video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}
video { display: block; }
@media screen and (max-device-width: 800px) {
#bg video { display: none;}
}
*/
/***********************************************************************************/

/* Header */

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

#ui-header {
    position: relative;
    text-align: center;
    }

#ui-header_logo {
    padding: 25px;
}

#ui-header_logo img {
    display: block;
    width:65px;
    position: relative;
    margin: 0 auto;
    }

@media screen and (min-width:40em) {
#ui-header_logo {padding: 40px 20px 0 20px;}
#ui-header_logo.fixed {margin-bottom: 78px;}

}

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

/* Nav */

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

#open-menu,
#close-menu {
    position:fixed;
    top:45px;
    left: 0;
    width:54px;
    height:54px;
    line-height: 54px;
    text-align: center;
    display:block;
    z-index: 9999999999999999999999;
    font-size: 1.75rem;
    padding: 0;
}

#open-menu {
    background:#fff;
    color:#010101;
}
#close-menu {
    background:#fff;
    color:#010101;
}

.ion-android-menu:before,
.ion-ios-close-empty:before,
#open-menu .icon:before,
#close-menu .icon:before {
    line-height: 54px !important;
    display: block;
}

/* Mobile */

#ui-nav {
    background: #000;
    position: fixed;
    top:0;
    left: -100%;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    z-index: 3;
	-webkit-transition: all 500ms ease-out;
	-moz-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}

#ui-nav a {
    display: block;
    text-transform: uppercase;
    font-size: 1.875rem;
    padding: 10px;
    font-weight: 700;
    color:#fff;
}

#ui-nav a:hover {color:#c72026}

#ui-nav.show {left: 0;}

/* Desktop */

@media screen and (min-width:64em) {

#ui-nav {
    background: rgba(0,0,0,0);
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    padding: 10px;
}

#ui-nav a {
    display: inline-block;
    font-size: 1.175rem;
    padding: 15px;
}

#ui-nav.fixed {
    background:#fff;
    position: fixed;
    left: 0;
    top: 0;
    height: 74px;
    padding:0;
}

#ui-nav.fixed a {
    height: 74px;
    line-height: 74px;
    padding: 0 15px;
    padding: 0 10px;
    color:#010101;
}

#ui-nav.fixed a:hover {color:#c72026}

}

/* More */

#ui-nav a#open-more,
#ui-nav.fixed a#open-more {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    padding: 0;
    margin: 15px auto; 
    display: inline-block;
}

#ui-nav a#open-more .icon:before,
#ui-nav.fixed a#open-more .icon:before {line-height: 44px;}

@media screen and (min-width:64em) {
#ui-nav a#open-more,
#ui-nav.fixed a#open-more {
    margin: 15px 0; 
}
}

/* Social Nav */

#social-nav {
    height: auto;
    width: 46px;
    text-align: center;
    margin: 12px auto;
    position: relative;
}


#social-nav:before,
#social-nav:after {
    content: '';
    background: rgba(255,255,255,0.5);
    height: 164px;
    width: 1px;
    position: relative;
    display: block;
    margin: 24px auto;
}

#social-nav a {
    background: rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius:50%;
    display:block;
    color:#fcfcfc;
    width: 46px;
    height: 46px;
    margin: 12px auto;
    }

#social-nav a .icon:before {line-height: 42px;}

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

/* WP  Article Layout */

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

main {
	margin: 0 auto;
    text-align: center;
}

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

/* Home */

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

#home-tour,
#home-watch,
#home-merch,
#home-news,
#games,
#bcr,
#home-contact {
    max-width: 800px;
    margin: 15px auto;
    padding:100px 25px 50px 25px;
    text-align: center;
}

#home-tour h2,
#home-watch h2,
#home-merch h2,
#home-news h2,
#home-games h2,
#home-social h2,
#home-bcr h2,
#home-contact h2 {
    font-size:2.8725rem;
    margin: 0 auto 25px auto;
    line-height: 0.9;
    text-align: center;
    font-weight: 100;
}

/*Home : Landing */

#home-landing {padding:0 0 50px 0;}


#home-landing .button {
    display: block;
    margin-bottom: 5px;
}
@media screen and (min-width:40em) {
#home-landing .button {display: inline-block;}
}

#home-landing h2 {
    font-weight: 100;
    margin-bottom: 25px;
    line-height: 0.825;
}

#home-landing h2 small {font-weight: 100;}

.available {
    text-align: center;
    color:#fff;
    font-size:0.8rem;
    margin:25px auto 5px auto;
}

.available-at a {
    padding: 10px;
    color:#fff;
    font-weight: 700;
}

/*Home : Watch */

#home-watch .grid {
    display: grid;
    grid-gap: 15px;
    grid-template-columns:1fr; 
    margin-bottom: 25px;
}

#home-watch h3 {font-size: 1.125rem;}

@media screen and (min-width:64em) {
#home-watch .grid {grid-template-columns:1fr 1fr; }
#home-watch h3 {font-size: 1.025rem;}
}

/*Home : Tour */

#home-tour {max-width: 800px;}

#home-tour_img {
    padding: 25px 0;
    text-align: center;
}

.bit-widget .bit-event {
border-top: 1px solid rgba(124,124,124,0) !important; 
}

.bit-widget .bit-upcoming-events, bit-past-events {
border-bottom: 1px solid rgba(124,124,124,0) !important;
}

.bit-widget .bit-event .bit-venue {
    margin: 0 0 0 0 !important;
    font-size: 1.075rem;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'IM Fell English SC', serif;
}

.bit-widget .bit-event .bit-date {
    margin: 0 0 0 0 !important;
    font-size: 2rem;
    font-weight: 100;
    text-transform: uppercase;
    color:#c72026;
    margin-bottom: 20px;
    line-height: 0.9;
    font-family: 'IM Fell English SC', serif;
}
.bit-widget .bit-event .bit-location {
    margin: 0 0 0 0 !important;
    font-size: 1.75rem;
    color:#aaa;
    text-transform: uppercase;
    line-height: 0.8;
    font-family: 'IM Fell English SC', serif;
}

.bit-offers {
    background:rgba(0,0,0,0) !important;
    border: 1px solid #c72026 !important;
    color:#c72026 !important;
    font-family: 'IM Fell English SC', serif;
}
.bit-rsvp {
    background: #c72026 !important;
    color:#000 !important;
    border: 1px solid #c72026 !important;
    font-family: 'IM Fell English SC', serif;
}

.bit-offers:hover,
.bit-rsvp:hover {
    background: #fff !important;
    color:#c72026 !important;
}

.bit-widget .bit-event .bit-details a, .bit-widget .bit-event .bit-offers-menu a {

    width: 100%;
}
@media screen and (min-width:40em) {
.bit-widget .bit-event .bit-details a, .bit-widget .bit-event .bit-offers-menu a {
    width: 150px;
}}

/* Event Grid */

.bit-widget .bit-event {
    display: block !important;
}

.bit-widget .bit-event .bit-details {
    display: block !important;
}
@media screen and (min-width:40em) {
.bit-widget .bit-event {
    display: flex!important;
}

.bit-widget .bit-event .bit-details {
    display: flex !important;
}
}

/*Home : Merch */

#home-social,
#home-merch {
    max-width: 1080px;
    margin: 15px auto;
    padding:100px 25px 50px 25px;
}

/* Home : BR Game */

#home-brgame {
    background:url(/wp-content/themes/Shooter/assets/images/backgrounds/brgame.jpg) center center no-repeat;
    background-size: cover;
    padding:94px 5%;
    text-align: center;
}

#bcrgames {
    position: relative;
}

#or {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
line-height: 50px;
height: 50px;
background: #fcfcfc;
color:#000;
text-align: center;
z-index: 3;
margin: -20px 0 0 -20px;
border-radius: 50%;
}

@media screen and (min-width:64em) {

#home-brgame {
}

}

/*Home : Contact */

#home-contact {
/*    background:url(/wp-content/themes/Shooter/assets/images/backgrounds/connect.jpg) left center no-repeat;
    background-size: cover; */
    text-align: center;
}

#home-contact h3,
#home-contact h4,
#home-contact h5 {
    text-align: center;
}

.home-contact_item {position:relative; height: 240px;}

.home-contact_link {
    background: rgba(0,0,0,0.6);
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    right:5px;
    bottom: 5px;
    width: auto;
    height: auto;
    z-index: 1;
    opacity: 1;
}

.home-contact_details {
    background: rgba(0,0,0,0.825);
    opacity: 0;
    position: absolute;
    top: 5px;
    left: 5px;
    right:5px;
    bottom: 5px;
    width: auto;
    height: auto;
    z-index: 2;
	-webkit-transition: all 850ms ease-out;
	-moz-transition: all 850ms ease-out;
	-o-transition: all 850ms ease-out;
	transition: all 850ms ease-out;
}

.home-contact_item:hover .home-contact_link {opacity:0;}
.home-contact_item:hover .home-contact_details {opacity: 1;}

.home-contact_details a {
    display: block;
    font-weight:bold;
    font-size:0.85rem;
    }

/* Home Footer */

#ui-footer {
    background: rgba(255,255,255,0.2);
    padding: 12px 25px 25px 25px;
    text-align: center;
}

#ui-footer h4 {margin:0 auto 15px auto;}

#ui-footer p {
    line-height: 0.9;
    font-size:0.85rem;
}

/*Footer : Social */

#footer-social {
    max-width: 420px;
    margin: 15px auto; 
    }

#footer-social a {
    width: 45px;
    height: 45px;
    line-height: 45px;
    margin: 5px;
    display: inline-block;
    font-size: 1.875rem;
}

/* Brands */

#brands {
    background: #000;
    text-align: center;
    }

#brands .grid {
    padding:50px 25px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns:1fr 1fr 1fr; 
    max-width: 800px;
    margin: 0 auto;
}

@media screen and (min-width:40em) {
#brands .grid {
    padding:50px;
}

}

	/*icomoon*/
	@font-face {
		font-family: 'icomoon';
		src:  url('/assets/fonts/fonts/icomoon.eot?2cgs01');
		src:  url('/assets/fonts/icomoon.eot?2cgs01#iefix') format('embedded-opentype'),
		  url('/assets/fonts/icomoon.ttf?2cgs01') format('truetype'),
		  url('/assets/fonts/icomoon.woff?2cgs01') format('woff'),
		  url('/assets/fonts/icomoon.svg?2cgs01#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
	  }
	  [class^="icon-"], [class*=" icon-"] {
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'icomoon' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
	  
		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	  }
	  
	  .icon-facebook:before {
		content: "\ea90";
	  }
	  .icon-instagram:before {
		content: "\ea92";
	  }
	  .icon-twitter:before {
		content: "\ea96";
	  }
	  .icon-youtube:before {
		content: "\ea9d";
	  }
	  .icomoon a{
		text-decoration: none;
		font-size: 22px;
		padding: 0px 13px;
		color: #c72026;
		display: inline-block;
		vertical-align: middle;
	  }
	  .icomoon a:hover{
		  /*color:#141517;*/
		  color:#ffffff;
	  }


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

/* Overlay */

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

#overlay {
	display: block;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	opacity: 0;
	background: rgba(0,0,0,0.85);
	-webkit-transition: opacity 250ms ease-out;
	-moz-transition: opacity 250ms ease-out;
	-o-transition: opacity 250ms ease-out;
	transition: opacity 250ms ease-out;
}

#overlay.show {
	opacity: 1;
	z-index: 98;
}

/* Page Overlays */

.page-overlay_bg {
    background: rgba(0,0,0,0.925);
    position:fixed;
    left: 0;
    bottom:-100vh;
    opacity: 0;
    height: 100vh;
    width: 100%;
    z-index: 98;
	-webkit-transition: all 500ms ease-out;
	-moz-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}

@media screen and (min-width:64em) {

}

.page-overlay {
    position:fixed;
    bottom:-100vh;
    left: 0;
    opacity: 0;
    height: 100vh;
    width: 100%;
    z-index: 9;
    text-align: center;
    padding: 20px 5% 80px 5%;
    overflow-y: auto;
	-webkit-transition: opacity 750ms ease-out;
	-moz-transition: opacity 750ms ease-out;
	-o-transition: opacity 750ms ease-out;
	transition: opacity 750ms ease-out;
}


.page-overlay_bg.show,
.page-overlay.show {
    bottom:0;
    opacity: 1;
}

@media screen and (min-width:64em) {

.page-overlay {
    padding: 104px 17%;
}

.page-overlay_bg.show,
.page-overlay.show {
    bottom:0;
}
}

.close-page-overlays {
    font-size: 3.25rem;
    color:#fff;
    margin: 0 auto 12px auto;
}

@media screen and (min-width:64em) {
.close-page-overlays {
    position: fixed;
    top:95px;
    right:37.5px;
    z-index: auto;
    float: none;
    display: block;
    width: 55px;
    height: 55px;
}
}

.page-overlay h2 {
    text-align: center;
    margin-bottom: 20px;
}