body {
  background-color: #ffffff;
  /* overflow-x: hidden; */
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
  text-align: center;
  padding: 15pt;
  font-size: 85%;
}

footer.contact-page {
  background-color: #BEC4C2;
}

h3 {
  text-align: center;
  color: white;
}

h3.error {
  color: #a50909;
}

p.italic {
  font-style: italic;
}

.content p {
  margin: 0pt 15pt;
}

nav.menu {
  margin: 20pt 0pt;
  margin-top: 35pt;
  background-color: #ffffff;
}

nav.menu ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
nav.menu li {

  font-size: 1.2em;
  line-height: 20px;
  height: 45px;
  color: #1d1d1d;
  width: 200px;
  line-height: 50px;
  width: 18%;
}

nav.menu > ul > li:not(:first-child) {
  border-left: 1px #1d1d1d solid;
}

nav.menu li.current a > span {
  border-bottom: 1px #1d1d1d solid;
  padding-left: 10%;
  padding-right: 10%;
}

nav.menu a {
  display: block;
  transition: .3s background-color;
  color: #1d1d1d;
}

nav.menu a:hover {

}

nav.menu a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}

img.logo {
  width: 70px;
  margin-top: -15pt;
  image-rendering: pixelated;
}

.pure-button-dark {
  background-color: #4b4b4b;
  color: #ffffff;

}

.pure-button-dark:hover, .pure-button-dark:visited {
  color: #ffffff;
}

.content {
  display:flex;justify-content:center;align-items:center;
  flex-direction: column;
}

img.showcase {
  margin-top: 10pt;
  margin-bottom: 10pt;
}

p.script-metadata {
  margin-bottom: 20pt;
}

  /* Option 1 - Display Inline */
  nav.menu  li {
    display: inline-block;
    vertical-align: middle;
    font-weight: 300;
  }
  a {
    text-decoration: none;
  }
  nav.menu li > a {
    text-transform: uppercase;
  }

p.name {
  font-weight: 400;
}

p.job {
  font-weight: 300;
  font-size: 10pt;
  text-transform: initial;
  margin-top: -27pt !important;
}

p.job, p.name {
  margin: 0;
  margin-top: -20pt;
}

.carousel, .grid, .contact {
  margin-top: 50pt;
}

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
}
@media screen and (min-width: 2000px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
  }
}
@media screen and (max-width: 650px) {

  .grid {
    grid-template-columns: 1fr;
  }

  .carousel, .grid {
    margin-top: 20pt;
  }

  nav.menu > ul > li.logo {
    position: absolute;
    top: 30pt;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    border-left: none;
    right: 0;
    width: 100%;
  }

  nav.menu {
    padding-top: 75pt;
  }

  nav.menu li:not(.logo) {
    width: 22%;
    font-size: 0.8em;
  }

  .carousel .title, .grid .title {
    font-size: 10pt !important;
  }

  .carousel .subtitle, .grid .subtitle {
    font-size: 10pt !important;
    bottom: 15pt !important;
  }

  .infobox {
    font-size: 60%;
  }

  .grid > div:hover > .subtitle, .grid > div.active > .subtitle {
    top: 20pt !important;
  }

  .contact-grid {
    font-size: 60%;
  }


}

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

  .carousel .title {
    font-size: 10pt !important;
    bottom: 25pt !important;
  }

  .carousel .subtitle {
    font-size: 10pt !important;
    bottom: 15pt !important;
  }
}

.grid > div, .carousel > div {
  position: relative;
}

.grid img {
  width: 100%;
}

.carousel img {
  width: 100%;
}

.grid .title {
  position: absolute;
  bottom: 25pt;
  left: 20pt;
  color: #fff;
  font-weight: 800;
  font-size: 20pt;
  text-transform: uppercase;
}

.grid .subtitle {
  position: absolute;
  bottom: 8pt;
  left: 40pt;
  color: #fff;
  font-weight: 400;
  font-size: 20pt;
}


.carousel .title {
  position: absolute;
  bottom: 60pt;
  left: 20pt;
  color: #fff;
  font-weight: 800;
  font-size: 30pt;
  text-transform: uppercase;
}

.carousel .subtitle {
  position: absolute;
  bottom: 30pt;
  left: 40pt;
  color: #fff;
  font-weight: 400;
  font-size: 30pt;
}


.infobox {
  position: absolute;
  bottom: 5pt;
  padding: 15pt;
  color: white;
  background-color: rgba(0,0,0,0.5);
  transition: visibility 0s, opacity 0.5s linear;
  opacity: 0;
  visibility: hidden;
  padding-top: 5pt;
}


.grid > div:hover > .infobox, .grid > div.active > .infobox {
  visibility: visible;
  opacity: 0.7;
}

.grid > div:hover > .infobox p, .grid > div:hover > .infobox a,
.grid > div.active > .infobox p, .grid > div.active > .infobox a {
  opacity: 1.0;
}

.infobox > p:first-child {
  font-weight: 800;
}

.infobox p {
  margin: 0;
}

.infobox > a {
  float: right;
  border-bottom: 1px solid white;
  padding-top: 10pt;
  color: white;
}

.infobox > p.logline {
  text-indent: 10pt;
}

.grid > div:hover > .title, .grid > div.active > .title {
  transition: bottom 0.5s linear;
  top: 10pt;
  bottom: 0pt;
}

.grid > div:hover > .subtitle, .grid > div.active > .subtitle {
  transition: top 0.5s linear;
  transition: bottom 0.5s linear;
  top: 30pt;
  bottom: 0pt;
}

.contact {
  background-color: #BEC4C2;
  padding: 15pt;
  height: 100vh;
}

.contact > .wrapper {
  max-width: 1024px;
margin-left: auto;
margin-right: auto;
}

.contact > .wrapper > div {
  background-color: white;
  color: #1d1d1d;
  padding: 15pt;
  text-align: center;
}

.contact label {
  background-color: white;
  padding: 15pt;
  margin-top: 15pt;
  text-transform: uppercase;
  text-align: center;
}

.contact input {
  padding: 15pt;
  margin-left: 15pt;
  margin-top: 15pt;
  text-align: center;
  border: none;

}

.contact input[type=submit] {


  width: 200pt;
  text-transform: uppercase;
  background-color: white;
}

.contact textarea {
  resize: none;
  width: 100%;
  padding: 15pt;
  margin-top: 15pt;
  box-sizing: border-box;
  border: none;
  height: 30vh;
}

.g-recaptcha {
  margin-top: 15pt;
  display:flex;justify-content:center;align-items:center;
}

.g-recaptcha > div {
  margin-left: 15pt;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". ."
    ". .";
}

/* ! - Slick Theme - ! */

button.slick-arrow {
  display: none !important;
}

.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: 20px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 50pt;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .50;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
  opacity: 1.0;
  color: white;
}