@import url("fonts.css");


* {
  box-sizing: border-box;
}

.nav {
  height: 72px;
  width: 100%;
  background-color: transparent;
  position: absolute;
  z-index: 20;
  font-family: 'montserrat-bold', sans-serif;
  text-transform:uppercase;
  letter-spacing: .25rem;
}

.nav .nav-header {
  display: inline;
}

.nav .nav-header .nav-title {
  display: inline-block;
  position: absolute;
  left: 50px;
  top: 50%;
  font-family: 'Bungee', serif;
  font-size: 22px;
  color: #fff; 
}

.nav .nav-btn {
  display: none;
}

.nav .nav-links {
  display: inline;
  position: absolute;
  float: right;
  font-size: 11px;
  top:22px;
  right:50px;
}

.nav .nav-links a {
  display: inline-block;
  padding: 10px 8px 10px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav .nav-links a.current {
  font-family: "montserrat-extrabold", sans-serif;
  color: #af2b2b;
}

.nav .nav-links a:hover {
  color: #6e6e6e;
}

.nav #nav-check {
  display: none;
}

@media (max-width:800px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 30px;
    top: 22px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: transparent;
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 80px;
    right: 0px;
    padding: 0 0 0 50px;
  }

  #home .nav > .nav-links {
    background-color: transparent;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

#hero {
  height:100vh;
  width:100%;
  background:rgb(0, 0, 0);
  display:flex;
  align-items:center;
  justify-content:center;
}

#hero::after {
  width:100%;
  height:100%;
  content: '';
  position:absolute;
  z-index:10;
  top:0;
  left:0;
  background:rgba(0,0,0,0.1);
}

#hero video {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:5;
  object-fit:cover;
  font-family:'object-fit: cover';
}

#hero .texture {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:15;
  background:url('../small-crosses.png');
}

#hero .caption {
  position:relative;
  z-index:20;
  text-align:center;
  color: rgba(255, 255, 255, 0.9);
}

#hero .caption h1 {
  text-transform: uppercase;
  font-size:2em;
  font-family: 'Bungee', sans-serif;
}

#hero .caption h2 {
  font-weight:400;
  font-size:1.5rem;
  margin:0;
  font-family: 'PT Sans', sans-serif;
}

#hero .caption a {
    color: #b4b5b5;
    text-decoration: none;
    font-weight: 300;
    font-family: 'Bungee', sans-serif;
  }

#hero .caption a:hover {
    color: #00a5ff;
  }

@media screen and (min-width:768px)
{
  #hero .caption h1 {
    font-size:2.5rem;
  }

  #hero .caption h2 {
    font-size:1.75rem;
  }
}

@media screen and (min-width:992px)
{
  #hero .caption h1 {
    font-size:3rem;
  }

  #hero .caption h2 {
    font-size:2rem;
  }
}

@media screen and (min-width:1200px)
{
  #hero .caption h1 {
    font-size:4rem;
  }

  #hero .caption h2 {
    font-size:2.5rem;
  }
}