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

   reset.css
   * Resets default browser CSS.

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

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

body
{
	background-color: #000027;
	width: 100%;
	line-height: 1.5;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table
{
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	font-weight: normal;
}

table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/*
    ! Typebase.less v0.1.0 | MIT License
    https://github.com/devinhunt/typebase.css/
*/

/* Setup */
html
{
	/* Change default typefaces here */
	font-family: 'Zilla Slab', Helvetica, Verdana, Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

/* Copy & Lists */
p
{
	line-height: 1.74rem;
	margin-top: 0;
	margin-bottom: 1.45rem;
}

ul, ol, dl
{
	margin-top: 1.45rem;
	margin-bottom: 1.45rem;
}

li, dd, dt { line-height: 1.45rem; margin-left: 2em; }
dt:nth-child(1n+1) { margin-top: 1.45rem; }

ul ul, ol ol, dl dl
{
	margin-top: 0;
	margin-bottom: 0;
}

blockquote
{
	font-size: 1.333em;
	font-weight: bold;
	line-height: 1.885rem;
	margin: 1rem 1rem 1rem 2rem;
	padding: 10px 0 0 10px;
}

blockquote span
{
	display: block;
	font-weight: normal;
	text-align: right;
}

h1, h2, h3, h4
{
	font-family: 'Bangers', Helvetica, Verdana, Arial, sans-serif;
	letter-spacing: 1px;
	margin: .5em 0 0.5em;
	/*font-weight: bold;*/
	line-height: 1.2;
}

h1
{
	margin-top: 0;
	font-size: 2.369em;
}

h2 { font-size: 2.369em; }
h3 { font-size: 1.777em; }
h4 { font-size: 1.333em; }
small, .font_small { font-size: 0.75em; }

/* Tables */
table
{
	border-spacing: 0px;
	border-collapse: collapse;
	margin-top: 1.45rem;
}

td, th
{
	line-height: 23.2px;
	padding: 8px;
}

/* Core HTML Styles
=========================================================*/

/*  Clickable elements
------------------------------*/

a
{
	color: #3AC3F1;
	cursor: pointer;
	text-decoration: none;
}

a:hover, a:active, a:visited, a:focus
{
	color: #A6A6A6;
	outline: none;
}

a:hover { text-decoration: underline; }

a.active
{
	color: #A6A6A6;
	outline: none;
}

button, .btn, input[type="submit"]
{
	background: #eee;
	border: 1px solid #ddd;
	border-radius: 3px;
	color: #333;
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	line-height: 16px;
	padding: 8px 12px;
	/*text-transform: uppercase;*/
}

button.btn-primary, .btn.btn-primary, input[type="submit"].btn-primary
{
	background: #f5faf1;
	border-color: #7ac142;
	color: #333;
}

/* Removed dotted outlines around active links in FF */
:focus, :active, :-moz-any-link:focus
{
	-moz-outline-style: none;
	outline: none;
}

/*  Type styling - Typography is in _typography.scss
-----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
	color: #4A006F;
	clear: both;
}

.main h2, .main h1
{
	color: #ffffff;
	font-size: 2.5em;
	margin: 5px;
	margin-bottom: 1em;
	font-weight: lighter;
	letter-spacing: 2px;
	text-align: left;
	padding-left: 1em;
	background: #3A7FD4;
	box-shadow: 7px 7px #233B6E;
}

li, dd, dt
{
	line-height: 1.45rem;
	padding: 5.3333333333px;
}

dt
{
	border-bottom: 1px solid #eee;
	font-weight: bold;
}

hr
{
	border: 1px solid #fff;
	clear: both;
}

strong, b
{
	font-weight: bold;
	font-size: 1.1em;
}

pre
{
	background: #eee;
	border: 1px solid #ccc;
	font-family: Source Sans, Courier, Courier New, Georgia;
	margin: 20px 0;
	padding: 20px;
}

/* Common Elements
-------------------------*/

.note
{
	display: block;
	font-size: 80%;
}

.right
{
	display: inline-block;
	float: right;
}

.left
{
	display: inline-block;
	float: left;
}

.flexbox
{
	display: flex;
	overflow: hidden;
}

.col
{
	flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	margin-right: 40px;
}

.col70 {
  width: 50%;
}

.col40 {
  width: 50%;
}

.col:last-child { margin-right: 0; }


/* Structural Elements
-------------------------*/

.wrapper {
	position: relative;
	background-color: #000027;
	background-image: url("../images/outside.png");
	background-repeat: no-repeat;
	background-position: 0px 89%;
}

header, nav, footer { margin: 0 auto; }

/* HEADER
------------*/
header {
	position: relative;
	width: 100%;
}

.masthead {
  background: #000;
  height: 70px;
  width: 100%;
}

.masthead-content {
  display: flex;
  margin: 0 auto;
  max-width: 1366px;
}

.logo--bloom {
  flex: 0 1 20%;
  padding: 10px;
}

.logo--bloom img {
  height: 50px;
  width: auto;
}

.logo--later-daters {
  height: 460px;
  padding-top: 0px;
}

.links--text {
  flex: 1 0 auto;
  text-align: center;
}

.links--text {
  color: #fff;
  display: inline-block;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 100%;
}

.links--text a {
  color: #fff;
  display: inline-block;
  margin-right: 20px;
  margin-left: 20px;
  padding-top: 12px;
}

.links--text a:hover {
  color: #2ACFF5;
  text-decoration: none;
}

.links--social {
  flex: 0 1 auto;
  margin-right: 20px;
  text-align: right;
}

.links--social img {
  margin: 10px;
  filter: drop-shadow( 2px 2px 2px #333333);
}

.link-img:hover {
  filter: invert(0.4) sepia(1) saturate(4) hue-rotate(151.2deg) brightness(0.96);
}

.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 200;
	filter: drop-shadow( 2px 2px 2px #333333);
}

.stranger-text {
	font-family: 'Bangers', cursive;
	color: #4A006F;
	margin: 0;
}

header .sign {
  padding-top: 16px;
}

.header-content {
display: block;
}

.header-content h2.box-title{
  text-align: center;
  margin: 0 auto;
  margin-top: 0px;
}

.release {
  flex: 1 0 50%;
  line-height: inherit;
  /*padding-left: 40px;*/
  text-align: left;
}

.trailer {
  flex: 1 0 50%;
  padding-right: 40px;
  text-align: right;
}

.trailer .btn--trailer, .release {
  color: #fff;
  font-family: 'Bangers', Helvetica, Verdana, Arial, sans-serif;
  font-size: 2.369em;
  letter-spacing: 1px;
  margin: 0;
}

.trailer .btn--trailer {
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 4px;
}

.trailer .btn--trailer {
  background-color: #3AC3F1;
  border: none;
  border-radius: 3px;
  box-shadow: 4px 4px #ffffff;
  font-family: 'Bangers', sans-serif;
  letter-spacing: 2px;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
}

.header-content h1
{
	color: #fff;
	font-weight: bold;
}

/* FOOTER
------------*/
#footer
{
	background: #000;
	color: #fff;
	width: 100%;
}

.copyright
{
	text-align: center;
	background-color: #009999;
	padding-bottom: 10px;
}

/* Page Elements
-----------------------------*/

.content {
/*  background-image: linear-gradient(to bottom, transparent, 160px, #000027, 10%, transparent);*/
	margin: 0 auto;
	/*min-height: 800px;*/
	padding: 0px 0 0 0;
	max-width: 100%;
}



.block {
	margin: 30px auto;
	padding: 0 40px;
	max-width: 3500px;
	width: 100%;

}

.block .block + .block { margin-bottom: 0px; }

.block.error
{
	background: #ffecec;
	border-color: #f00;
	color: #f00;
	padding: 20px;
}

.block.error p { margin-bottom: 0; }

.block.error a.dismiss
{
	float: right;
	font-weight: bold;
	margin-top: -23px;
}

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

.block--store-icons {
  margin-bottom: -20px;
  text-align: center;
	width: 100%;

}


.steamwidget {
	margin-right: auto;
	margin-left: auto;
	width: 100%;

}

.itchwidget {
  margin-top: 30px;
  float: left;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

.store-icons a {
  display: inline-block;
  margin-right: 40px;
}

img.bd-icon {
  filter: drop-shadow( 2px 2px 2px #333333);
	width: 200px;
}

.bd-icon:hover {
  filter: invert(0.4) sepia(1) saturate(4) hue-rotate(151.2deg) brightness(0.96);
  /*filter: invert(0.4) sepia(1) saturate(4) hue-rotate(176.4deg) brightness(0.89);*/
  /*filter: invert(0.4) sepia(1) saturate(4) hue-rotate(212.4deg) brightness(0.61);*/
}

/* Carousel
-----------*/
.carousel{
  background: transparent;
  /*background-image: url("../images/pattern-7.png");
	background-repeat: repeat;*/
}

.card--cast {
 background: transparent;
  display: flex;
  flex-direction: column;
  height: 450px;
  margin: 0 10px;
  padding: 10px;
  width: 330px;
}

.card--cast img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 300px;
}

.cap_character_select_gif {
box-shadow: 7px 10px rgba(0, 0, 0, 0.5);
}

.card-image {
  flex-grow: 1;
}

.caption, .captionPax {
  align-self: flex-end;
	background: white;
  flex-grow: 0;
	font-size: 1rem;
	font-style: italic;
  margin: 0;
	padding: 10px;
	width: 100%;
}

.portraits { text-align: center; }

.portraits h3
{
	background: white;
	padding: 12px;
	color: #4A006F;
	text-align: center;
	box-shadow: 10px 10px #4A006F;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

.portraits p
{
	margin-left: auto;
	margin-right: auto;
}


h2.box-title{
  padding-right: 80px;
  color: #ffffff;
  font-size: 3em;
  margin: 0em;
  /*font-weight: bold;*/
  line-height: 1em;
  filter: drop-shadow( 2px 2px 2px #333333);
}


.block--extra-content {
  display: flex;
  max-width: 3500px;
}

.press .item{
  margin-bottom: 4rem;
}

.press h4, .press p{
	color: #ffffff;
}

.block-poster{
	display: inline-grid;
  max-width: 3500px;
height: auto;
}
.block-poster img{
		width:70%;
		margin: -30px auto 0px auto;
		z-index: 200;
	}

.steambox{
	width: 80%;
	margin: 0px auto;
}


#mc_embed_signup
{
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}

.block--supported {
  background-color: #fff;
  margin:  0 0 0 0;
/*  max-width: 100%;*/
}

.box--supported {
padding: 10px;
  }

.logo-support{
	/*margin-left: auto;
	margin-right: auto;*/
	text-align: center;

}

.logo-support img{
	max-width: 250px;
	margin: 10px 40px 30px 40px;
	display: inline-block;

}

.block-bloom
{
	background-color: #009999;
/*	background-image: url(../images/logo_bloom.gif);
	background-position: 40px 20px;
	background-repeat: no-repeat;*/
	color: #fff;
	margin: 0px auto 0px auto;
	max-width: 3500px;
	padding: 20px 40px 40px 20px;

}

.boilerplate p{
margin: 0px;
margin-left: 350px;
}

.boilerplate img{
	float: left;
	width: 300px;

}

.block-bloom h1, .block-bloom h2, .block-bloom h3, .block-bloom a, .block-bloom p, .copyright{
font-family: 'Raleway', Helvetica, Verdana, Arial, sans-serif;
color: #fff;}

.block-bloom h2{

font-weight: 800;
letter-spacing: 1px;
margin-left: 350px;
clear: none;

}

.block-bloom a { text-decoration: underline; }

.block-main .main, .frame {
	border-style: inset;
	border: 15px inset #835807;

}

.borderplus {
	border: 5px outset #835807;
	/*margin-bottom: 10px;*/

}

.matte {
	background: #F4F0D3;
  border: 30px solid #38B8D7;
  box-shadow: inset 0 0 3px #333333;
  padding: 2rem;
}

.mattewhite {
	background: #FFFFFF;
  border: 30px solid #F78FCF;
  box-shadow: inset 0 0 3px #333333;
  padding: 1.5rem;
}


.mobile {
  display: none;
}

.sidebar {
margin-left: 1rem;

}

/*TEAM PHOTOS
======================*/

.team h2 {
	font-size: 2.4em;
	color: white;
}

.row {
	display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */

.column {
	flex: 25%;
	  max-width: 25%;
	  padding: 0 4px;
}

.column img {
	margin-top: 8px;
   vertical-align: middle;
   width: 100%;
}

.teamportrait {
  position: relative;
  margin: 0; /* Center it */
}

.teamportrait .name {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 10px; /* Some padding */
}
.teamportrait .name p{
  margin-bottom: 0;
	text-align: right;
	margin-right: 10px;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {

  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

  .column {
    flex: 100%;
    max-width: 100%;
  }
}


/* RESPONSIVE
============================*/


@media screen and (max-width: 2773px) {
  .wrapper {
    margin: 0 auto;
    max-width: 2773px;
  }
}


@media screen and (max-width: 1025px) {

	.mobile { display: block; }
	.screen { display: none; }

	h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.2em;
  }

	.logo--later-daters {
    height: 400px;
    padding-top: 20px;
	  margin-left: auto;
	  margin-right: auto;
  }

	.block-poster{
		display: block;
	  /*max-width: 1000px;*/
	text-align: center;
	}

	.block-poster img{

			max-width: 600px;
			height: auto;
			margin: 10px auto 0px auto;
			z-index: 200;
		}


	.steambox{
		width: 100%;
		margin: 0px auto;
	}


  .links--social {
    margin: 10px auto;
  }


  .links--social, .links--text {
    margin-right: 0;
    text-align: center;

	}

	.links--text {
	  color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 100%;
		margin: 0px auto;
	}

	.header-content {
  flex-direction: column;
  }

  .store-icons {
    margin-top: 0px;
    text-align: center;

}
  .sidebar img{
  margin: 20px 40px; 20px auto;
  }
  .content {
  background-image: linear-gradient(to bottom, transparent, 50px, #000027, 10%, transparent);
  padding: 30px 0 0 0;
  }

	.flexbox {
		display: block;
		overflow: hidden;
		position: relative;
	}

	.col {
		display: block;
		margin-right: 0;
		width: 100%;
	}

	.col40 {
		display: block;
		margin-right: 0;
		width: 100%;	}

	.col:last-child {
    margin-right: inherit;
  }

	.block {
	  padding: 0 20px;
	}

.block--extra-content {
	  display: block;
	}

  #mc_embed_signup {
    margin-top: 0px;
    padding-top: 0px;
    width: auto;
  }

  #mc_embed_signup input.email {
    width: auto;
  }


	header h1 {
	  font-size: 1.777em;
	}


	.main h2, .main h1 {
    font-size: 2em;
    padding-right: 0;
    text-align: center;
  }

	.block-bloom h2 {
	  padding: 0;
		margin-left:auto;
		margin-right: auto;
		display: block:
	}

	.boilerplate {
	text-align: center;}

	.boilerplate img {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	.boilerplate p {
		float: none;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 20px;
	}
	.block--supported{
  display: block;
	padding: 0 auto;
}
  .block--supported img{
    max-width: 300px;
		margin: 15px;

  }
}


.modal-window {
  background-color: rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s;
  visibility: hidden;
  z-index: 999;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.modal-window > div {
  background: #ffffff;
  padding: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
}

.modal-window  header {
  font-weight: bold;
}

.modal-window  h1 {
  margin: 0 0 15px;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  text-decoration: none;
  width: 70px;
}

.modal-close:hover {
  color: black;
}

.embed-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 40.25%;
  padding-bottom: 56.25%;
  position: relative;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*mailchimp garbage*/
#mc_embed_signup .button
{
	margin-top: 0px;
	background-color: #3AC3F1;
	border: none;
	border-radius: 3px;
	font-size: 2em;
	font-family: 'Bangers', sans-serif;
	letter-spacing: 2px;
	height: 50px;
	padding-left: 20px;
	padding-right: 20px;
	box-shadow: 4px 4px #233B6E;
}

#mc_embed_signup .button:hover { background-color: #3A7FD4; }
.break { clear: both; }

#mc_embed_signup .float
{float:right;}