@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i,700,700i|Arvo:400,400i,700,700i|Zilla+Slab:400,400i,600,600i,700,700i');
/* ==========================================================================
   Fonts
   ========================================================================== */
body,
button,
input,
select,
textarea {
  font-family: 'Zilla Slab','Arvo', 'Raleway',"Helvetica Neue", Arial, sans-serif;
}
body {
  color: #020202 !important;
}

h1,h2,h3,h4,h5,h6
       {
    font-family:  'Josefin Sans','Montserrat','Raleway', 'Ubuntu', 'Charter', 'Vollkorn', sans-serif;
    text-transform: uppercase;
       }
.navbar {
     font-family: 'Josefin Sans',  'Montserrat', sans-serif;
    font-weight:600;
}
.intro-text {
  margin-bottom:1rem;
}
.decorative-text {
  color: #fff;
  text-shadow: -1px -1px 0 #242424, 1px -1px 0 #242424, -1px 1px 0 #242424, 1px 1px 0 #242424, 1px 1px 0 #242424;
}
/* ==========================================================================
  Links
   ========================================================================== */
a {
   	text-decoration: none;
   	padding-bottom: 1px;
   	border-bottom: 1px solid #8d8df3;
   }
a:visited {
     color: #551a8b;
   }
   a:hover {
        color: rgb(57, 128, 192);
      }
.flex-size {
  padding-left: .75rem;
}
.image-responsive {
  object-fit: cover;
  width:100%;
  height:100%;
}
/* ==============.
Nav Bar Burger Expansion
================
*/
.navbar-burger {
   height: 5rem;
   width: 5rem; }
.navbar-burger span {
   height: 2px;
   left: calc(50% - 8px);
   width: 20px;
   }
.navbar-burger span:nth-child(1) {
   top: calc(50% - 9px); }
.navbar-burger span:nth-child(2) {
   top: calc(50% - 1.5px); }
.navbar-burger span:nth-child(3) {
   top: calc(50% + 6px); }
.navbar-burger:hover {
   background-color: rgba(0, 0, 0, 0.05); }
.navbar-burger.is-active span:nth-child(1) {
   transform: translateY(7.5px) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) {
   opacity: 0; }
.navbar-burger.is-active span:nth-child(3) {
   transform: translateY(-7.5px) rotate(-45deg); }

   .top-nav {
     margin-top:-2rem;
   }

/* ==========================================================================
    Links
   ========================================================================== */
 a.gallery-hover:hover {
  opacity: 0.5;
}
 ul.fictionlinks {
  list-style-type: none;
  margin:0;
}
.site-name {
  font-size:1.3rem;
}


.navbar-brand > a, .navbar-end > a:link, .navbar-end > a:visited, .navbar-start > a:link, .navbar-start > a:visited {
   color: #4a4a4a;
   padding-bottom: 0px;
   border-bottom: none;
 }
.navbar-end > a:hover,  .navbar-start > a:hover {
      color: #3273dc;
    }
hr {
  background-color: black !important;
}
#nav-hr {
  margin-top:.04rem;
  margin-left:.75rem;
}
.nav-mobile-hr {
  margin-top:-5rem;
  margin-bottom:2rem;
}

/* ==========================================================================
    Image Overlay
   ========================================================================== */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Original image */
.overlay-image .link-image {
 display: block;
 width: 100%;

}
/* Original text overlay */
.overlay-image .text {
 color: #fff;
 text-shadow: 1px 1px 1px black;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
 opacity: .8;
}

/********* Background and text only overlay on hover *******/
.overlay-image .normal {
 transition: .3s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgb(0, 105, 255);
}
/* ==========================================================================
    Image Overlay
   ========================================================================== */
.overlay-image2 {
 position: relative;
 width: 100%;
}
/* Original image */
.overlay-image2 .link-image {
 display: block;
 width: 100%;

}
/* Original text overlay */
.overlay-image2 .text {
 color: #fff;
 text-shadow: 1px 1px 1px black;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image2 .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image2:hover .hover {
 opacity: .8;
}

/********* Background and text only overlay on hover *******/
.overlay-image2 .normal {
 transition: .3s ease;
}
.overlay-image2:hover .normal {
 opacity: 0;
}
.overlay-image2 .hover {
 background-color: rgb(0, 105, 255);
}

.text {
  font-size: 2rem;
  line-height: 2.5rem;
}
.line-two {
  font-size: 1.5rem;
}
/* ==========================================================================
    Media Queries
   ========================================================================== */
@media only screen and (max-width: 1087px) {
  .flex-size {
    padding-left:0rem;
  }
  .text {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .line-two {
    font-size: 1rem;
  }
}

/* ==========================================================================
    Buttons
   ========================================================================== */

   button {
     margin: 20px;
   }
   .custom-btn {
     padding: 10px 25px;
     margin-bottom:2rem;
     font-weight: 500;
     background: transparent;
     outline: none !important;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     display: inline-block;
   }
   /**** BTN No. 13 ****/
   .btn-13 {
     border: 2px solid #000;
     z-index: 1;
   }
   .btn-13:after {
     position: absolute;
     content: "";
     width: 100%;
     height: 0;
     top: 0;
     left: 0;
     z-index: -1;
     background: #000;
     transition: all 0.3s ease;
   }
   .btn-13:hover {
     color: #fff;
   }
   .btn-13:hover:after {
     top: auto;
     bottom: 0;
     height: 100%;
   }
   .btn-13:active {
     top: 2px;
   }