/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/

body {
	background: #000000;
}
/* ----------------------------------------------------------------
	Typography
-----------------------------------------------------------------*/

/*#content h2 { font-size: 34px !important;}*/

/* ----------------------------------------------------------------
	Icons
-----------------------------------------------------------------*/

.sidenav li svg {
	position: relative;
    top: 1px;
    margin-right: 6px;
    font-size: 14px;
    text-align: center;
    width: 16px !important;
}

/* Header
-----------------------------------------------------------------*/

header {
	z-index: 1;
}



#header.full-header #logo {
	margin-right: 15px;
	padding-right: 15px;
}

#header.full-header #header-wrap .container {
    padding: 0 15px;
}


@media (min-width: 768px) and (max-width: 1200px) {
	#page-title {
		background: url(/public/media/careers/Header_Image_Careers_1029x250_v1.png) #064887 !important;
	}
}

@media (min-width: 1200px) {
	#page-title {
		background: url(/public/media/careers/Header_Image_Careers_3440x250_v1.png) #064887 !important;		
	}
}


/* Primary Menu
-----------------------------------------------------------------*/

#header.full-header #primary-menu > ul {
	margin-right: 0;
	padding-right: 0;
	border-right: 0;
}

#primary-menu ul li > a {
	font-size: 16px;
	letter-spacing: 0.5px;
	padding: 39px 12px;
}

#primary-menu ul ul li > a {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.5px;
}

#primary-menu ul li:hover > a, #primary-menu ul li.current > a {
	color: #aaa;
}

/*#primary-menu ul ul:not(.mega-menu-column) {
	border-top: 2px solid #333 !important;
}*/

@media (max-width: 575px) {
	#primary-menu #top-login {
    	display: block; 
	}
}

#top-login .login {
	font-family: 'Dosis', sans-serif;
	font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.5px;
    width: 30px;
    margin-right: 15px;
}

/* Side Navigation */

.sidenav > .ui-tabs-active > a, .sidenav > .ui-tabs-active > a:hover {
	background-color: #064887 !important;
}


/* Buttons
-----------------------------------------------------------------*/

@media (max-width: 768px) {
.button.button-xlarge {
	font-size: 16px;
	padding: 0 20px;
}
}

@media (min-width: 768px) {
.button.button-xlarge {
	font-size: 22px;
	padding: 0 32px;
}
}

.button {
	font-family: 'Dosis', sans-serif;
}



#content .button-3d:hover {
	background-color: #aaa !important;
}

ul.tab-nav.tab-nav2 li.ui-state-active a {
	background-color: #333 !important;
}


/* ----------------------------------------------------------------
	Content
-----------------------------------------------------------------*/

.indent {
	padding-left: 50px;
}

#content ul {
	margin-left: 20px !important;
}

.section .container {
	z-index: 0;
}

#inner #footer {
	margin-top: 0 !important;
}

.terms .increase-text-size {
	font-size: 18px;
}

figcaption {
	font-size: 14px;
    color: #aaaaaa;
    font-style: italic;
    padding: 10px 0 10px 0;
}

iframe {
	border-radius: 0.25rem;
}

/* Fullscreen Trailer
-----------------------------------------------------------------*/

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

@media (max-width: 980px) {
.trailer { height: 0; }
}

@media (min-width: 980px) {
.trailer { height: 75vh;}
}

.trailer {
  position: relative;
  background-color: black;  
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

.trailer .container {
  position: relative;  
}

@media (max-width: 980px) {
.trailer .container { width: %100; }
}

@media (min-width: 980px) {
.trailer .container { width: %65; }
}

.trailer .title-container {
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px 40px;
}

@media (max-width: 980px) {
.trailer .title { font-size: 2rem;}
}

@media (min-width: 980px) {
.trailer .title { font-size: 4rem;}
}

.trailer .title {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;  
}

.trailer .subtitle {
  color: #cccccc;
  font-size: 2rem;
}

/* Promo
-----------------------------------------------------------------*/

@media (max-width: 980px) {
.promo .span-width { width: 100%;}
}

@media (min-width: 980px) {
.promo .span-width {width: 50%;}
.promo a.button.play-viveport {
    top: 120px !important;
}
}

@media (min-width: 0px) {
    top: 0px !important;
}

.promo h3 {
	font-size: 30px;
}

.promo a.button {
	top: 30%;
}

.promo a.button.play-steam,
.promo a.button.play-oculus,
.promo a.button.play-viveport {
	padding: 0 16px !important;
}

.promo a.button.play-steam {
	right: 260px !important;
}

.promo a.button.play-viveport {
	right: 130px !important;
}

.promo a.button.play-steam img,
.promo a.button.play-oculus img,
.promo a.button.play-viveport img {
	max-width: 32px;
	margin-right: 10px;
}

/* Feature Box
-----------------------------------------------------------------*/

.feature-box h3 {
	font-size: 18px !important;
}

.feature-box.fbox-plain .fbox-icon i {
	color: #222 !important;
}

/* Why Join
-----------------------------------------------------------------*/

.video .why-join .heading-block {
    margin-bottom: 30px !important;
}

/* ----------------------------------------------------------------
	Release
-----------------------------------------------------------------*/

#page-release .content-wrap .outer {
	padding: 20px 0 !important;
}

#page-release .list-group-item {
	border: none !important;
}

#page-release .line {
	width: 96% !important;
	margin: 30px auto 10px auto !important;
}

/* ----------------------------------------------------------------
	Resources
-----------------------------------------------------------------*/

#help .col_full,
#help .col_half {
	float: left;	
}

#help .item-text {
	float: left;
	width: 90%;
}

#help .col_half .item-text {
	width:80%;
}

#resources .feature-box .fbox-icon i {
	background-color: #555555 !important;
}

/* ----------------------------------------------------------------
	Careers Main
-----------------------------------------------------------------*/

.intro-p {
	font-size: 1.25rem;
}

.blue-btn {
	background-color: #166ccd; 
	font-size: 1.25rem;
	border: 0;
	width: 280px;
	margin: 30px 0px;
    padding: 15px 0;
}

.info-box.style-msg2  {
	background-color: #eaf2fa;
	border-left: 4px solid #acc9ea;
	letter-spacing: 0.75px;
}

.info-box i {
	float: right;
	font-size: 22px;
    margin-right: 10px;
}

.info-box .top.msgtitle {
	background: #eaf2fa;
	color: #000;
	text-shadow: none;
	padding: 20px 20px 0 20px;
}

.info-box .top i {
	border:2px solid #acc9ea;    
	color: #acc9ea;
    height:35px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:35px;
}

.info-box .sb-msg {
	color: #444;
	font-size: 0.75rem;
	text-shadow: none; 
	padding: 0px 15px 20px 20px;
}

.info-box .sb-msg li {
	padding: 0 0 5px 0;
}

.perks-icon i {
	font-size: 82px !important;
	background: none !important;
	color: #166ccd !important;
}

.perks-icon .subtitle {
	font-size: 0.75rem;
	letter-spacing: 0.25px;
	padding: 0 20px;
}

#content .open-positions.list-group {
	margin: 0 !important;
}

.open-positions h5 {
	font-weight: normal;
}

.open-positions .list-group-item {
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	padding: 0.75rem 0;
}

.posting-btn {
	background-color: #166ccd; 
}

/* ----------------------------------------------------------------
	Spookality
-----------------------------------------------------------------*/

#spookality h1 {
	font-size: 2.25rem;
}

#spookality h2 {
	font-size: 1.5rem;
	font-weight: normal !important;
}

@media (max-width: 767px) {
	#spookality h2 {
		font-size: 1.15rem;
	}
}

@media (max-width: 767px) {
	#spookality h1 {
		font-size: 2rem;
	}
}

#spookality #slider,
#spookality_terms #content,
#spookality {	
	background-color: #000000 !important;
	padding: 0;
}

#spookality #slider .content-wrap  {
	padding: 0 !important;
}

#spookality #content .content-wrap .divcenter {
	padding: 0px 40px 40px 40px;
}

#spooky {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    
}

.intro-section {
	max-width: 900px;
}

.spook-hero-img {
    background-image: url('/public/media/spookality2020/Web_Banner_0020.jpg'); 
}

#spooky .inner {
    padding-top: 24%;
    display: block;
    height: 0;
}

@media (max-width: 980px) {
	#spooky .inner {
		padding-top: 35%;
	}
}

#spookality-container a {
	color: #ffd400;
}

#spookality-container p {
	font-size: 18px;
}

#spookality-container .boxed-slider {
	padding: 0;
}

#spookality-container .btn-primary {
	background-color: #ffffff !important;
	border: none !important;
	color: #111111;
	display: block;
	margin: 0 auto;
}

#spookality-container .modal-body .modal-content {
	background-color: #000000;
}

#spookality-container .btn-primary:hover, 
#spookality-container .btn-primary:visited,
#spookality-container .btn-primary:active {
	background-color: #111111 !important;	
	border: none !important;
	box-shadow: none;
	color: #ffffff;
}

#spookality-container .contest-details .contest-details-item.item1 .btn-primary,
#spookality-container .contest-details .contest-details-item.item1 .btn-primary:hover, 
#spookality-container .contest-details .contest-details-item.item1 .btn-primary:visited,
#spookality-container .contest-details .contest-details-item.item1 .btn-primary:active,
#spookality-container .contest-details .contest-details-item.item1 .btn-primary:focus {
    opacity: 0.5;    
    background-color: #111111 !important;
    color: #ffffff !important;
}

#spookality-container .contest-details .row {
	margin: 0 auto;
}

#spookality-container .contest-details h4 {
	text-align: center;
}

#spookality-container .contest-details-item {
	background-repeat: no-repeat;	
    height: 700px !important;
    width: 400px;
 	margin: 0 auto;
 }

#spookality-container .contest-details-item.item1 {
	background-image: url('/public/media/spookality2020/Web_Spook_Backdrop_1_long_Darker.png'); 	
	background-size: contain;
	padding: 30px 17px 20px 17px;
}

#spookality-container .contest-details-item.item2 {
	background-image: url('/public/media/spookality2020/Web_Spook_Backdrop2_longDarker.png'); 	
	background-size: contain;
	padding: 30px 17px 20px 17px;
}


@media (max-width: 767px) {
	#spookality-container .contest-details-item.item1 .item-title,
	#spookality-container .contest-details-item.item2 .item-title,
	#spookality-container .contest-details-item.item3 .item-title {
		font-size: 1.5rem;
	}
}

#spookality-container .heading-block {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#spookality-container .heading-block:after {
	border: 0;
}

#spookality-container .rules-title {
	font-size: 1.5rem;
}

#spookality-container .prize-graphic {
	max-width: 300px;
    display: block;
    margin: 40px auto;
}

#spookality #footer {	
	margin: 0 !important;
	color: #ffffff;
}

/* ----------------------------------------------------------------
	Login
-----------------------------------------------------------------*/

#login form .btn-primary {
	background: #000000 !important;
	border: 0 !important;	
}


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

#footer {
	margin: 0;
}

.footer-stick {
	background-color: #444;
}

#content .button:hover {
	background-color: #666;
}

/* Copyright + Subscribe
-----------------------------------------------------------------*/

#subscriber {
	float: left;
    width: 400px;
}

#copyrights .subscribe {
    margin-top: 0px;
}