@charset "utf-8";
/* Gatecrasher.tv — cleaned main stylesheet.
   Preserves existing tile dimensions, selectors, layout, and visual design. */

/* 0. Fonts */
@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?3837060');
  src: url('../fonts/fontello.eot?3837060#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff?3837060') format('woff'),
       url('../fonts/fontello.ttf?3837060') format('truetype'),
       url('../fonts/fontello.svg?3837060#fontello') format('svg');
  font-weight: normal;
  font-style: normal;}

/* 1. Utilities and clearfix */
.clear { clear: both; }
.clearfix::after { content: ""; display: table; clear: both; }
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { margin: auto; display: block; }
.alignnone { clear: both; font-size: 0; line-height: 0; margin: 0; padding: 0; border: 0; height: 0; width: 0; }
.centered { text-align: center; }
.hidden { display: none; visibility: hidden; }
*, *::before, *::after { -webkit-font-smoothing: antialiased; }
.flexslider { -webkit-transform: translateZ(0); }

/* 2. Preloader and vertical centering */
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 9999; }
#status { z-index: 28; position: absolute; color: #000 !important; top: 50%; height: 220px; width: 100%; margin-top: -115px; }
.parent { width: 230px; margin: 0 auto; position: relative; height: 220px; z-index: 11; display: table; }
.child { text-align: center; display: table-cell; vertical-align: middle; padding: 0; }
.child span { text-transform: uppercase; }

/* 3. Typography */
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%; }
.content-wrapper { padding-bottom: 272px; background: #fff; }
html { overflow-y: scroll; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { font-size: 16px; font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; color: #000; background: #0b0b0b; }
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
strong, b { font-weight: 700; }
a, a > * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
p { line-height: 1.5; padding: 0 0 13px; }
.child p { padding-bottom: 0; }
.align-left p { text-align: left !important; }
p.small-padding { padding-bottom: 5px; }
a { text-decoration: none; }
p a { color: #c39f76; }
p a:hover { color: #000; }
.black p a { color: #fff; }
.black p a:hover { color: #c39f76; }
p.small { font-size: 12px; }
a p.small { color: #c39f76; border-top: 1px solid #c39f76; display: inline-block; padding-top: 7px; margin-top: 19px; padding-bottom: 0; }
p.tiny { font-size: 11px; font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 400; padding-left: 2px; letter-spacing: 2px; text-transform: uppercase; }
span.arrow { font: 20px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; float: right; padding-bottom: 13px; padding-right: 15px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; position: relative; top: -4px; }
.hentry blockquote::before { content: '“'; float: left; display: block; margin-left: -64px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 96px; margin-top: -6px; font-weight: 400; }
blockquote p.tiny { padding-top: 10px; }
em { font-style: italic; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; color: #777; }
code { font: 13px 'Courier New', Courier, monospace; font-style: normal; line-height: 1.5; display: block; padding-top: 4px; }
pre { padding: 0 30px 25px; border: 1px dotted #3e3e3e; margin-top: 10px; margin-bottom: 10px; display: inline-block; }
.tile-heading { font-family: 'Montserrat', 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; padding: 0; position: absolute; top: -7px; left: 0; text-align: center; width: 100%; color: #2b2b2b; font-weight: 600; }
.tile-heading span { display: inline-block; background: #fff; z-index: 100; padding: 0 8px 0 10px; }

/* 4. Headings and Logo */
.logo-wrapper {
  position: relative;
  padding: 93px 0 45px 0;
  background: #fff;
}

h1#logo {
  display: block;
  position: relative;
  text-align: center;
}

h1#logo a {
  display: inline-block;
  background: url('../images/bg-logo.png') center no-repeat;
  background-size: 60px 52px;
  width: 60px;
  height: 52px;
  text-indent: -9999px;
}
.tagline { font-family: 'Montserrat', 'Open Sans', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 400; padding: 0; margin: 0 auto; position: relative; color: #000; display: inline-block; }
.hentry h1, h2, h3, h4, h5 { line-height: 1.3; display: block; position: relative; padding-bottom: 13px; }
h2 { font-size: 36px; font-weight: 300; line-height: 48px; letter-spacing: -2px; }
h2 strong { font-weight: 700; letter-spacing: -1px; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 400; line-height: 27px; }
h5 { font-size: 18px; font-weight: 400; }
.black h3 { font-weight: 400; }
.col2-3 h3 { font-size: 30px; font-weight: 400; letter-spacing: -1px; }
.back-button h5 { padding: 0; }
.col2-3.grey h3 { font-size: 30px; line-height: 40px; }
a h3 { text-decoration: none; color: #000; }

/* 5. Main navigation */
#menu-button { float: left; text-decoration: none; color: #fff; letter-spacing: 2px; font-size: 11px; font-family: 'Montserrat', 'Open Sans', Arial, Helvetica, sans-serif; padding: 10px 0; text-transform: uppercase; -webkit-tap-highlight-color: rgba(0,0,0,0); display: none; z-index: 1000; position: relative; }
#menu-button .centralizer { display: table-cell; vertical-align: middle; }
#menu-button .centralizer .cursor { display: block; height: auto; cursor: pointer; }
#nav-button { display: inline-block; width: 16px; margin: 0 0 0 5px; -webkit-tap-highlight-color: rgba(0,0,0,0); vertical-align: middle; }
.nav-bar { background-color: #fff; border-radius: 1px; display: block; width: 16px; height: 2px; margin: 0 auto 2px; }
#menu-button.open #nav-button span:nth-child(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); position: relative; top: 2px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
#menu-button.open #nav-button span:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: -2px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#menu-button.open #nav-button span:nth-child(3) { display: none; }
#main-nav ul#options { float: left; margin-left: 10px; }
#main-nav ul#options li { display: inline-block; padding-right: 25px; }
#main-nav a { text-decoration: none; color: #fff; letter-spacing: 2px; font-size: 11px; font-family: 'Montserrat', 'Open Sans', Arial, Helvetica, sans-serif; padding: 11px 0 10px; text-transform: uppercase; display: block; }
#main-nav > ul .active > a, #main-nav > ul a.active, #main-nav li a:hover, #options li a.current, #options li a.selected { color: #c39f76; }
#main-nav ul#options li .sub-nav { position: absolute; background: #161616; margin-left: -15px; padding-top: 9px; display: none; }
#main-nav ul#options li:hover .sub-nav { display: block; }
#main-nav ul#options li .sub-nav > li { display: block; border-top: 1px solid #242424; padding-right: 0; }
#main-nav ul#options li .sub-nav > li > a { font-size: 10px; padding: 13px 15px 14px; display: block; line-height: 1; }

/* 6. Main content */
#header { position: fixed; z-index: 555; width: 100%; padding: 6px 0; background: #161616; -webkit-transform: translateZ(0); }
#content { width: 100%; position: relative; z-index: 55; height: auto; padding-bottom: 50px; }
.container { padding: 0; width: 1280px; position: relative; margin: 0 auto; }
#container { margin: 0 auto; }

/* 7. Tile grid — dimensions intentionally unchanged */
.col3-3 { width: 940px; height: auto; margin: 10px; float: left; position: relative; }
.col4-3 { width: 1260px; height: auto; margin: 10px; float: left; position: relative; }
.col1-3 { width: 300px; height: 300px; margin: 10px; float: left; position: relative; }
.col2-3 { width: 620px; height: 620px; margin: 10px; float: left; position: relative; }
.col2-3.showMovie { width: 620px; height: 349px; margin: 10px; float: left; position: relative; }
.col2-3.showTV { width: 620px; height: 720px; margin: 10px; float: left; position: relative; }
.col1-3.auto, .col2-3.auto, .col3-3.auto { height: auto; }
.col1-3.double { height: 620px; }
.col1-3.triple { height: 940px; }
.grid-fit { min-height: 300px; }
.grey, .black { padding: 30px 40px; background: #fff; border: 2px solid #2b2b2b; text-align: center; }
.col2-3.grey, .col3-3.grey, .col4-3.grey { padding: 45px 80px; }
.black { background: #161616; border: 2px solid #161616; color: #fff; }
.col1-3 .parent { width: 216px; height: 236px; }
.col2-3 .parent { width: 456px; height: 526px; }
.col3-3.grid-fit .parent { width: 756px; height: 206px; }
.col1-3.double .parent { height: 556px; }
.absolute { position: absolute; top: 0; left: 0; z-index: 2; padding: 45px 80px; color: #fff; }

/* 8. Content elements */
.overlay { background: rgba(0,0,0,.4); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.element { overflow: hidden; }
.element.grey { overflow: visible; }
.break { display: block; position: relative; height: 20px; width: 100%; }
.small-break { display: block; position: relative; height: 10px; width: 100%; }
.whole-tile { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 55; padding: 30px 35px; }
.element .tag { text-transform: none; display: inline-block; padding: 0 8px 0 0; }
.element .tag > .tag-count { text-transform: none; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px; }

/* 9. Icon assets — currently used icons only */
.icons { position: relative; height: 48px; width: 48px; margin-bottom: 16px; margin-top: 5px; display: inline-block; }
.icon-holder { position: relative; float: left; height: 48px; width: 48px; border: 1px solid #555; border-radius: 51%; margin-top: 5px; }
.col1-3 .icon-holder { margin-right: 20px; }
.centered .icons, .centered .icon-holder { float: none; display: inline-block; margin-right: 0; }
.mail { background: url("../images/icons/bg-mail.png") no-repeat center; background-size: 48px 48px; }
.smartphone { background: url("../images/icons/bg-smartphone.png") no-repeat center; background-size: 48px 48px; }
.map { background: url("../images/icons/bg-map.png") no-repeat center; background-size: 48px 48px; }
.select { background: url("../images/icons/bg-select.png") no-repeat center; background-size: 48px 48px; }
.close { background: url("../images/icons/bg-close.png") no-repeat center; background-size: 48px 48px; }

/* 10. Image hover */
.images { display: block; position: relative; background: #000; }
.images img { width: 100%; display: block; max-width: 100% !important; z-index: 9; }
.images.dark img { opacity: 0.3; background: #000; }
img { box-shadow: #fff 0 0 0; }
.videos { width: 1260px; height: 710px; }
.description { position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.4); width: 300px; height: 300px; padding: 34px 0; text-align: center; z-index: 10; color: #fff; margin-bottom: -206px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.description h4 { font-size: 20px; font-weight: 700; padding-bottom: 0; padding-top: 0; }
.description p.small { padding-bottom: 5px; }
a .description p.small { color: #fff; border-top: 1px solid #fff; position: relative; }
.bottom { position: absolute; bottom: 111px; left: 0; text-align: center; width: 300px; }
.team .bottom, .sub-page .bottom { bottom: 98px; }
.wrapper { opacity: 0; top: -10px; position: relative; }
.sub-page .description { margin-bottom: -186px; }
.element:hover .description { margin-bottom: 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.element:hover .description h4 { padding-top: 82px; -webkit-transition: all 0.3s ease 0.4s; transition: all 0.3s ease 0.4s; }
.element.team:hover .description h4, .sub-page .element:hover .description h4 { padding-top: 72px; -webkit-transition: all 0.3s ease 0.4s; transition: all 0.3s ease 0.4s; }
.element:hover .wrapper { opacity: 1; top: 0; -webkit-transition: all 0.2s ease 0.7s; transition: all 0.2s ease 0.7s; }

/* 11. Footer */
#footer { background: #0b0b0b; min-height: 272px; margin: -272px 0 0; width: 100%; z-index: 500 !important; position: relative; -webkit-transform: translate3d(0,0,0); text-align: center; }
#footer-top { height: 107px; background: #161616; position: relative; }
#footer-bottom { height: 165px; padding-top: 47px; position: relative; }
footer p, footer p a { color: #a8a8a8; font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 13px; padding: 0; border: 0; text-decoration: none; letter-spacing: 2px; margin-bottom: 28px; }
footer p a:hover { color: #fff; }
footer p span { letter-spacing: 0; text-transform: none; color: #555; }
span.padding { padding: 0 5px; }

/* 12. Lists */
ul.unordered-list, .hentry ul { list-style: circle; line-height: 1.5; padding: 0 0 13px 15px; text-align: left !important; font-size: 16px; font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; }
ol { list-style: decimal; line-height: 1.5; padding: 0 0 13px 15px; font-size: 16px; font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; text-align: left !important; }
ul.unordered-list li a, .hentry ul li a, ol li a { color: #555; text-decoration: underline; }
ul.unordered-list li a:hover, .hentry ul li a:hover, ol li a:hover { color: #000; text-decoration: underline; }

/* Responsive Vimeo and YouTube videos */
iframe[src*="player.vimeo.com"],
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}