/*
Theme Name: marloo_v2
Version: 2.0
Description: Clubmovie theme for Marloo Cinema — Foundation 6 build
Author: James Gardiner
Author URI: https://www.clubmovie.com.au

-- Body & Typography
-- Utility Classes
-- Header
-- Navigation
-- Footer
-- Content / Typography
-- Buttons
-- Movie listings
-- Movie detail
-- Session times
-- Ratings
-- Saver badge
-- Tickets
-- Video embed
-- Sidebar
-- Orbit / Slider

*/

/* =============================================
   BODY & TYPOGRAPHY
   ============================================= */

html,
body {
  background: #18222E;
  color: #FFF;
  font-family: 'adelle', arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'lnum';
  -webkit-font-feature-settings: 'lnum';
  -moz-font-feature-settings: 'lnum';
}

::-moz-selection { color: #fff; background: #DB324B; }
::selection      { color: #fff; background: #DB324B; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'open-sans', arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1em;
  text-shadow: 0 4px 0 #08020E;
}

h1 {
  font-size: 3rem;
  line-height: 3rem;
  text-shadow: 0 3px 0 #D2D5E1;
  text-transform: uppercase;
}

h2 {
  color: #1e1b3d;
  font-size: 2rem;
  letter-spacing: 0;
  text-shadow: none;
  text-transform: capitalize;
}

h3 {
  color: #DB324B;
  font-size: 1.35rem;
  letter-spacing: -1px;
  text-shadow: none;
  text-transform: uppercase;
}

h4 {
  color: #DB324B;
  font-size: 1.25rem;
  letter-spacing: -1px;
  text-transform: uppercase;
}

a, a:active, a:visited {
  color: #DB324B;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  transition: color 300ms ease-in-out;
}

a:hover { color: #FFF; text-decoration: none; }

p { line-height: 1.6em; margin-bottom: 1rem; }

address {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.25rem;
  margin-top: -0.5rem;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.back-white { background: #FFF; color: #18222E; }
.block { padding-top: 1.875rem; padding-bottom: 1.875rem; }

p.red, span.red, strong.red, li.red, ul.red li, a.red { color: #DB324B; }

.open   { font-family: 'open-sans', arial, sans-serif; font-weight: 800; font-style: italic; }
.bold,
strong  { font-weight: 700; }
.bebas  { font-family: 'bebas-neue', arial, sans-serif; font-weight: 400; }
.adelle { font-family: 'adelle', arial, sans-serif; font-weight: 400; }
.border-bottom { border-bottom: 4px solid #DB324B; }

/* =============================================
   HEADER
   ============================================= */

.header { padding: 15px 0; }

/* Keep the cloned sticky header hidden until Headhesive switches it to stick mode. */
.header.banner--clone {
  display: none;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(-120%);
  transition: transform 220ms ease;
  visibility: hidden;
  width: 100%;
  z-index: 1000;
}

.header.banner--clone.banner--stick {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.header.banner--clone.banner--unstick {
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-120%);
  visibility: hidden;
}

.logo {
  background: url(images/boat-club-cinema-logo-1x.png) no-repeat 0 0;
  display: block;
  height: 77px;
  margin: 0 auto;
  width: 148px;
}

.logo img { display: block; max-height: 77px; width: auto; }

@media screen and (min-width: 641px) {
  .header { height: 107px; padding-top: 37px; }
  .header .column { position: relative; }
  .header .logo { position: absolute; left: 15px; top: -24px; }
}

/* =============================================
   NAVIGATION
   ============================================= */

.title-bar { background: none; }
.title-bar button { color: #FFF; }
.top-bar { background: none; padding: 0; }

.top-bar ul > li:nth-child(2) .second-level,
.top-bar ul > li:nth-child(2) .sub-menu,
.top-bar ul > li:nth-child(2) .is-dropdown-submenu,
.top-bar ul > li:nth-child(2) a::after,
.top-bar ul > li:nth-child(3) .second-level,
.top-bar ul > li:nth-child(3) .sub-menu,
.top-bar ul > li:nth-child(3) .is-dropdown-submenu,
.top-bar ul > li:nth-child(3) a::after { display: none !important; }

.top-bar ul > li a::after { border-color: #AB021B transparent transparent !important; }

.top-bar .second-level,
.top-bar .sub-menu,
.top-bar .is-dropdown-submenu { border: none; margin: 0; padding: 0; }

.top-bar .second-level li,
.top-bar .sub-menu li,
.top-bar .is-dropdown-submenu li { list-style: none; }

.top-bar .second-level li a,
.top-bar .sub-menu li a,
.top-bar .is-dropdown-submenu li a {
  border: none !important;
  font-family: 'adelle', arial, sans-serif;
  font-weight: 400;
}

@media screen and (min-width: 641px) {
  .top-bar { float: right; }
  .header .top-bar ul { background: #DB324B; padding: 4px 0; }

  .top-bar li a {
    font-family: 'open-sans', arial, sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1rem;
  }

  .header .top-bar li a {
    border-right: 1px solid #AB021B;
    color: #FFF;
    padding: 2px 13px 3px;
  }

  .top-bar li:last-child a { border: none; }

  .top-bar ul > li:nth-child(2) > a,
  .top-bar ul > li:nth-child(3) > a { padding-right: 13px !important; }

  .contact-details { float: right; }
  .contact-details .phone { line-height: 27px; margin-left: 10px; }
  .contact-details .phone span { color: #FFF; font-size: 35px; }
}

@media screen and (max-width: 640px) {
  .top-bar ul li a { padding-right: 0; }
  .top-bar ul li a::after { display: none; }
  .header { padding-bottom: 0; }
  .menu-controls { border-top: 1px solid #38424E; margin: 20px -0.625rem 0; }

  .title-bar,
  .contact-details {
    float: left;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    width: 50%;
  }

  .title-bar { border-right: 1px solid #38424E; }
  .contact-details a { color: #FFF; }

  .top-bar { padding-top: 40px; }
  .top-bar ul { background: #DB324B; padding: 15px 0; }
  .top-bar ul li { display: block; padding: 15px; }
  .top-bar ul li a { color: #FFF; padding: 0; text-align: center; text-shadow: 0 1px 0 #AB021B; }

  .top-bar .second-level,
  .top-bar .sub-menu,
  .top-bar .is-dropdown-submenu { display: block; }

  .top-bar .second-level li,
  .top-bar .sub-menu li,
  .top-bar .is-dropdown-submenu li { padding-top: 0; text-align: center; }
  .dropdown.menu > li.opens-right > .is-dropdown-submenu { position: relative; }
}

/* =============================================
   FOOTER
   ============================================= */

.footer {
  background: #08121E;
  border-top: 4px solid #DB324B;
  margin-top: 1px;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.footer-menu > ul { list-style: none; margin: 0; }
.footer-menu li { margin-bottom: 0.6725rem; }
.footer-menu li a { color: #FFF; }
.footer-menu li a:hover { color: #DB324B; }
.footer-logo .logo { margin-bottom: 0.9735rem; }

.footer-phone {
  color: #FFF;
  display: block;
  font-family: 'open-sans', arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 1rem;
}

.footer-phone .fa { color: #DB324B; }

.copyright {
  border-top: 1px solid #2C4461;
  color: #D2D5E1;
  font-size: 0.9rem;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.top {
  background: #2C4461;
  bottom: 15px;
  color: #DB324B;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  position: fixed;
  right: 15px;
  text-align: center;
  width: 40px;
}

@media screen and (max-width: 641px) {
  .footer-menu, .footer-contact { text-align: center; }
  .footer-logo { padding: 30px 0; }
}

/* =============================================
   CONTENT / TYPOGRAPHY
   ============================================= */

.back-white h2 { color: #18222E; }

.typography > p:first-of-type { font-weight: 800; }
.typography p a { color: #DB324B; text-decoration: underline; }
.typography p a:hover { color: #FFF; }

.typography h2 {
  color: #DB324B;
  font-size: 2rem;
  letter-spacing: -1px;
  text-shadow: 0 4px 0 #D2D5E1;
  text-transform: none;
}

/* =============================================
   BUTTONS
   ============================================= */

.button {
  background: #DB324B;
  border: none;
  color: #FFF;
  font-family: 'open-sans', arial, sans-serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -1px;
  text-decoration: none;
}

.button:hover { background: #FFF; color: #18222E; }
.back-white .button:hover { background: #18222E; color: #FFF; }
.button.secondary { background: #D2D5E1; color: #DB324B; }

/* =============================================
   MOVIE LISTINGS
   ============================================= */

.movies { list-style: none; margin: 20px 0 0; }

.movie-summary {
  border-bottom: 1px solid #D2D5E1;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.movie-summary:last-child { border: none; }
.movie-summary .poster { padding-left: 0; }

.movie-summary h2 {
  color: #08121E;
  float: left;
  font-size: 1.8rem;
  letter-spacing: -1px;
  line-height: 1.8rem;
  margin: 0;
  padding-right: 15px;
  text-shadow: 0 3px 0 #D2D5E1;
  text-transform: none;
}

.movie-summary h2 a { color: #08121E; }
.movie-summary h2 a:hover { color: #DB324B; }
.movie-summary .rating { float: left; }

.summary-detail {
  clear: both;
  float: left;
  font-size: 0.9rem;
  margin-top: 10px;
  overflow: auto;
  width: 100%;
}

.summary-detail span:first-child {
  border-right: 1px solid #D2D5E1;
  margin-right: 10px;
  padding-right: 10px;
}

@media screen and (max-width: 641px) {
  .movie-summary .poster { padding-right: 0; }
  .movie-summary h2 { font-size: 1.4rem; line-height: 1.25em; text-shadow: 0 2px 0 #D2D5E1; }
}

/* =============================================
   MOVIE DETAIL
   ============================================= */

.movie-synopsis { position: relative; }
.movie-synopsis h1 { padding-right: 60px; }
.movie-synopsis .rating { position: absolute; top: 6px; right: 0; width: 40px; }

.detail { margin-bottom: 30px; overflow: auto; }
.detail img { float: left; height: auto; max-width: 33.333%; }
.detail dl { float: left; padding-left: 20px; width: 66.6665%; }

.detail dl dt,
.detail dl dd { float: left; margin: 0 0 10px; }

.detail dl dt { text-transform: uppercase; width: 40%; }
.detail dl dd { clear: right; width: 60%; }

.detail dl dt:last-of-type,
.detail dl dd:last-of-type { float: none; margin: 0; width: 100%; }

.detail tr { background: none !important; border-bottom: 5px solid #FFF !important; padding-bottom: 10px; }
.detail td { display: inline-block; padding-top: 0; }
.detail tr td:first-child { font-weight: bold; padding: 0; width: 100%; }
.detail .video-container { margin-bottom: 20px; }

@media screen and (max-width: 641px) {
  .detail dl { font-size: 0.9rem; line-height: 1rem; }
  .detail dl dt { font-size: 0.75rem; }
}

@media screen and (min-width: 1000px) {
  .detail dl dt { width: 25%; }
  .detail dl dd { width: 75%; }
}

/* =============================================
   SESSION TIMES
   ============================================= */

.session-times { border-collapse: collapse; margin-top: 30px; width: 100%; }

.session-times tbody,
table.session-times tbody tr { background: none; border: none; }

.session-times tr td:first-child { text-align: left; }

.session-times th {
  color: #DB324B;
  font-family: 'open-sans', arial, sans-serif;
  font-style: italic;
  line-height: 1em;
  text-transform: uppercase;
}

.session-times th span { color: #18222E; font-size: 1.6rem; font-weight: 800; }
.session-times tr td { border-bottom: 1px solid #aa2e44; }

@media screen and (min-width: 841px) {
  .session-times {
    table-layout: fixed;
  }

  .session-times tr th:first-child,
  .session-times tr td:first-child {
    width: 24%;
  }

  .session-times tr th:not(:first-child),
  .session-times tr td:not(:first-child) {
    width: 6%;
  }

  .session-times th:not(:first-child) {
    white-space: nowrap;
  }
}

.session-times td:not(:first-child) a,
.session-times td:not(:first-child) a:visited {
  color: #FFF;
}

.session-times td:not(:first-child) a:hover,
.session-times td:not(:first-child) a:focus {
  color: #DB324B !important;
}

/* =============================================
   RATINGS
   ============================================= */

.rating {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 40px;
}

.rating-g   { background: #22b24c; color: #FFF; }
.rating-pg  { background: #fff200; color: #08121E; }
.rating-m   { background: #00aeef; color: #FFF; }
.rating-ma  { background: #ed1c24; color: #FFF; }
.rating-r   { background: #231f20; color: #FFF; }
.rating-ctc { background: #f8931e; }

@media screen and (max-width: 641px) {
  .movie-summary .rating { font-size: 12px; height: 20px; line-height: 20px; margin-top: 8px; width: 30px; }
  .movie-synopsis .rating { right: 20px; }
}

/* =============================================
   SAVER BADGE
   ============================================= */

.saver {
  border: 2px solid #DB324B !important;
  color: #DB324B;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  max-width: 100px;
  padding: 2px 10px 1px;
  text-align: center;
}

/* =============================================
   TICKETS
   ============================================= */

.tickets { border: 1px solid #D2D5E1; clear: both; }
.tickets > div { line-height: 1.1em; padding: 10px; text-align: center; }
.tickets small { color: #9398a9; }

.tickets > div:nth-child(1),
.tickets > div:nth-child(2) { border-right: 1px solid #D2D5E1; }

@media screen and (max-width: 641px) {
  .tickets { display: flex; }
  .tickets br { display: none; }
}

/* =============================================
   VIDEO EMBED
   ============================================= */

.video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 35px;
  position: relative;
}

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

/* =============================================
   SIDEBAR
   ============================================= */

.sidebar h2 {
  color: #DB324B;
  font-size: 2rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1rem;
  margin-top: 20px;
  text-shadow: none;
}

.sidebar table { font-size: 0.9rem; }
.sidebar tr td:first-child { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; }

.sidebar td.mumsandbubs {
  background: #ef4b83;
  color: #FFF;
  line-height: 1em;
  padding: 3px;
  text-align: center;
}

@media screen and (max-width: 641px) {
  .sidebar { margin-top: 30px; }
}

/* =============================================
   ORBIT / SLIDER
   ============================================= */

.orbit-container { height: auto !important; }
.orbit-previous, .orbit-next { display: none; }
.orbit-slide { text-align: center; }