@font-face {
  font-family: Blackletter; src: url('../fonts/blackletter.ttf');
}

html, body{
  min-height: 100%;
}

body{
  position: relative;
}

body,span,div,a {
  text-rendering: optimizeLegibility;
  color: #FFF;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
  text-decoration: none;
  outline: none;
}

li {
    display: inline-block;
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #151515;
}

.bg img {
    display: none;
}

body {
    width:100%;
    height: 100%;
    background:#fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    overflow:scroll;
}

/* Header styles */
.header-row-1 {
    clear:both;
    float:left;
    position: relative;
    background-color: #000;
    opacity: 0.9;
    filter: alpha(opacity=85);
    display:block;
    padding: .25em 0em;
    width: inherit;
    height: 3em;
}

.header-row-2 {
  top: 3em;
  position: absolute;
  left: 0;
}

.services {
    background-color: rgba(20, 20, 20, 0.45);
    color: #fff;
    clear: inherit;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    width: inherit;
    white-space: nowrap;
    overflow: hidden;
}

#mainContent {
  position: relative;
  width: inherit;
  box-sizing: border-box;
  padding: 0.5em 0 0 1.5em;
}

#all {
    margin: 3em;
}

#all ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, 16em);
    gap: 2em 1.2em;
    justify-content: center;
}

#all img {
    width: 100%;
    height: 9em;
    object-fit: cover;
    margin-bottom: 10px;
}
#all h3 {
    margin-bottom: 5px;
}

#all h4 {
    color: #ACACAC;
    font-size: .9em;
    line-height: 1.125em;
}
#all li {
    cursor: pointer;
    box-shadow: 10px 10px 10px #000;
}

#all li img {
    border: 1px solid #000;
}

#all li img:hover {
  border-color: #ff4646;
  transition: border-color .5s;
  transition-timing-function: cubic-bezier(.2, 1, .6, .8);
}

#blurbTitle {
    font-size: 2em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid #FF0000;
    margin-bottom: 0.5em;
}

#blurbMore {
  float: right;
  margin: 1em .5em 0em 0em;
  font-size: 1.2em;
  border-bottom: 2px solid transparent;
}


#blurbMore:hover {
  border-bottom: 2px solid transparent;
  border-bottom-color: #F00;
  transition: border-bottom-color .5s;
  transition-timing-function: cubic-bezier(.2, 1, .6, .8);
}

.moreText {
  padding: 2em;
  line-height: 1.35em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.35);
  text-align: left;
}

.siteText {
  line-height: 1.35em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.35);
  text-align: left;
}

#menuBars {
  z-index: 1; /* appear in front of the mainContent for scrolling reasons */
  width: inherit;
  position: fixed;
}

.menuBarsSpacer {
  height: 7em;
}

#movieContainerDiv {
  z-index: 101; /* the overlay is 100 */
  width: 720px;
  height: 405px;
  position: fixed;
  padding: 1em;
  background-color: rgba(22, 22, 22, 0.8);
  border: 1px solid #333;
  /* no top & left, inherit from .centered ... */
}

#movieContainerDiv * {
  z-index: inherit;
}

#vimeo, #youtube{
  display: none;
}

.contact-link {
  border-bottom: 1px solid transparent;
}

.contact-link:hover{
  border-bottom: 1px solid #F00;
}

.blurb-more-movie {
  display: block;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-bottom: 20px;
}

.centered-iframe {
    position: relative;
    margin: 0 auto;
    display: block;
    width: 32em;
    height: 18em;
    padding-bottom: 4em;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%);
}

#movieDiv {
  display:block;
  position: absolute;
  width: inherit;
  height: inherit;
}

.movie-iframe {
  width: inherit;
  height: inherit;
}

#blurbDiv {
  float: left;
  position: relative;
  box-sizing: border-box;
  padding: 1em;
  background-color: rgba(0, 0, 0, 0.80);
  width: 16em;
  height: 20em;
  overflow: hidden;
}


.noscroll {
  overflow: hidden;
}



.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

/*
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
*/


.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 26px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover {
    background: #00d9ff;
}


.vimeo-icon-container {
  border: 0 !important;
  margin: 0 !important;
}

.vimeo-icon {
  background: url("../i/social-icons.png") no-repeat -366px -12px;
  border-bottom: none !important;
}

.vimeo-icon:hover {
  background-position: -366px -54px;
}

.youtube-icon-container {
  border: 0 !important;
  margin-right: .4em;
}

.youtube-icon {
  background: url("../i/social-icons.png") no-repeat -455px -12px;
  border-bottom: none !important;
}

.youtube-icon:hover {
  background-position: -455px -54px;
}

.facebook-icon {
  background: url("../i/social-icons.png") no-repeat -54px -12px;
  border-bottom: none !important;
}

.facebook-icon:hover {
  background-position: -54px -54px;
}

.instagram-icon {
  background: url("../i/social-icons.png") no-repeat -232px -12px;
  border-bottom: none !important;
}

.instagram-icon:hover {
  background-position: -232px -54px;
}

.social-icon-container {
  margin: .4em;
  display: inline-block;
}

.social-icon-container a {
  margin-right: .4em;
  display: inline-block;
  width: 36px;
  height: 36px;
}


#moreDiv {
  float: right;
  position: relative;
  box-sizing: border-box;
  width: 55%;
  min-width: 20em;
  font-size: .9em;
  background-color: rgba(0, 0, 0, 0.85);
  margin: 0 4em 0 0;
}
.menuPage {
  display:none;
  width: 60%;
  float: right;
  margin: 3em 3em 3em 9em;
  padding: 2em;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.80);
}

.header-menu-link {
  text-decoration: none;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin: 0em .75em 0em .75em;
  font-size: .875em;
  padding-bottom: 2px;
  transition: border-bottom-color 1s;
}

.header-menu li {
  vertical-align: text-bottom;
}

#contactDetails td {
  padding: 0 10px 7px 0;
}

.header-menu-link:hover {
  border-bottom: 2px solid transparent;
  border-bottom-color: #F00;
  transition: border-bottom-color .5s;
  transition-timing-function: cubic-bezier(.2, 1, .6, .8);
}

.header-menu {
  right: 0;
  display: inline-block;
  position: absolute;
  font-size: .95em;
  white-space: nowrap;
  z-index: 10;
}

.header-menu ul li {
    border-right: 1px solid #ACACAC;
    padding: 0 .25em 0 .25em;
    vertical-align: middle;
}

.header-menu ul li.last {
    border: 0;
    padding-right: 0;
}

.services ul {
    display: flex;
}

.services li {
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    text-transform: uppercase;
    flex: 1;
    text-align: center;
    border-right: 2px solid rgba(0, 0, 0, 0.65);
}

.service {
    display: block;
    padding: .7em 0 .3em 0;
    text-decoration: none;
    border-bottom: 4px solid rgba(0, 0, 0, 0.65);
    font-size: .8em;
    opacity: .85;
    transition: border-bottom-color 1s;
}

.service:hover {
    background-color: rgba(0,0,0,0.45);
    border-bottom: 4px solid transparent;
    border-bottom-color: #F00;
    transition: border-bottom-color .5s;
    transition-timing-function: cubic-bezier(.2, 1, .6, .8);
}

.active-service {
    border-bottom: 4px solid transparent;
    border-bottom-color: #F00;
    background-color: rgba(0,0,0,0.6);
}

#masthead {
  position: absolute;
  overflow:hidden;
  left: 0;
  float: left;
  padding-left: 3em;
  font-size: 1.3em;
  z-index: 9;
  white-space: nowrap;
}

#masthead-left {
  display: inline-block;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.35);
  font-family: "Blackletter" !important;
  font-size: 1.7em;
}

#masthead-right {
    display: inline-block;
    font-size: .65em;
    font-family: 'Lato', sans-serif;
    margin-left: .7em;
    padding-bottom: .06em;
    padding-top: .09em;
}


.film-button{
  border:1px solid #F00;
  padding: 5px 11px;
  border-radius: 20px;
  background-color: #F00;
}

.film-button-div{
  text-align:center;
  padding: 1em 2em;
}

/* About page structured content */
.about-more-link {
  color: #F00;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: border-bottom-color .5s;
  transition-timing-function: cubic-bezier(.2, 1, .6, .8);
}

.about-more-link:hover {
  border-bottom-color: #F00;
}

.about-section-title {
  font-size: 1.3em;
  color: #FFF;
  margin: 1.5em 0 0.5em 0;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #F00;
}

#about-details p {
  margin-bottom: 1em;
  line-height: 1.5em;
}

#menuPageAbout p {
  margin-bottom: 0.75em;
  line-height: 1.5em;
}

/* Hamburger menu button */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: #FFF;
  font-size: 1.4em;
  cursor: pointer;
  padding: 0.4em 0.7em;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  background-color: rgba(20, 20, 20, 0.9);
}

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

/* Tablet: max-width 1024px */
@media (max-width: 1024px) {
  .hamburger {
    display: block;
  }

  .services {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background-color: rgba(10, 10, 10, 0.95);
    float: none;
    white-space: normal;
    overflow-y: auto;
    padding-top: 3em;
  }

  .services.open {
    display: block;
  }

  .services ul {
    display: block;
  }

  .services li {
    display: block;
    float: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .services li a {
    display: block;
    padding: 1em 1.5em;
    font-size: 1em;
    text-align: left;
    border-bottom: none;
  }

  .services li a:hover,
  .services li a.active-service {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: none;
  }

  #masthead {
    padding-left: 2.5em;
  }

  .header-menu {
    font-size: .8em;
  }

  #blurbDiv {
    width: 100%;
    height: auto;
    float: none;
  }

  #moreDiv {
    width: 100%;
    float: none;
    margin: 1em 0 0 0;
  }

  .menuPage {
    width: 80%;
    margin: 3em auto;
    float: none;
  }

  #all ul {
    grid-template-columns: repeat(auto-fill, 14em);
  }

  #all img {
    height: auto;
  }

  #movieContainerDiv {
    width: 90vw;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .movie-iframe {
    width: 100%;
    height: 100%;
  }

  .centered-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Mobile: max-width 767px */
@media (max-width: 767px) {
  .services li {
    width: auto;
  }

  #masthead {
    padding-left: 0.5em;
    font-size: 1em;
  }

  #masthead-right {
    display: none;
  }

  .header-menu {
    position: static;
    display: block;
    text-align: center;
  }

  .header-row-1 {
    height: auto;
    padding: .5em 0;
    text-align: center;
  }

  #masthead {
    position: static;
    float: none;
    text-align: center;
  }

  #mainContent {
    padding: 0.5em 0.5em 0 0.5em;
  }

  #blurbDiv {
    width: 100%;
    padding: 0.75em;
  }

  #moreDiv {
    width: 100%;
    margin: 1em 0 0 0;
  }

  #all {
    margin: 1em;
  }

  #all ul {
    grid-template-columns: 1fr;
  }

  #all img {
    height: auto;
  }

  .menuPage {
    width: 95%;
    margin: 2em auto;
    padding: 1em;
  }

  #movieContainerDiv {
    width: 95vw;
  }

  .movie-iframe,
  .centered-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .menuBarsSpacer {
    height: 9em;
  }
}