/*
 * Global Text Styles
 */

h1,h2,h3,h4,h5,h6,.navbar {
    font-family: 'Acre-Regular';
}

h1,h2,h3,h4,h5,h6,.navbar-brand {
    text-transform: uppercase;
}

h1,h2,h3,h4,h5,h6,.navbar {
    font-family: 'Acre-Regular';
}

h1,h2,h3,h4,h5,h6,.navbar-brand {
    text-transform: uppercase;
}

.acre {
    font-family: "Acre-Regular";
    text-transform: uppercase;
}

* {
  border-radius: 0 !important;
}

@media (max-width: 320px) {
    /*
     * Shrink header text for folks who still love small phones
     * (long live the iPhone SE)
     */
    .navbar-brand {
        font-size: 1em;
    }
}

/*
 * Base styles
 */

html {
    position: relative;
}

wrapper {
    min-height: 100vh;
}

body {
    min-height: 100vh; 
    background-color: #d8d8d8;
    font-family: 'Book Antiqua';
    padding-top: 50px
}

.header {
    background-color: white;
}

.panel {
    background-color: white;
}

.story-card-panel {
    height: 100%;
}


.footer {
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-img {
     height: 80px;
     max-height: 10vh;
     max-width: 20vw;
     object-fit: contain;
}

.btn {
    border-style: none;
}

#basic_search {
    border-style: none;
}


/*
 * Index page
 */

/* index page special effect typing header */
@media only screen and (min-width: 1200px) {
   .typing {
       font-size: 24px;
        /* Web-safe typewriter-like font */
       overflow: hidden; /* Ensures the content is not revealed until the animation */
       white-space: nowrap; /* Keeps the content on a single line */
       margin: 0 auto; /* Gives that scrolling effect as the typing happens */
       letter-spacing: .05em; /* Adjust as needed */
       animation: typing 5s steps(30, end),
       blinking-cursor .5s step-end infinite;
   }

   /* The typing effect */
   @keyframes typing {
       from {
           width: 0
       }
       to {
           width: 100%
       }
   }

   /* The typewriter cursor effect */
   @keyframes blinking-cursor {
       from, to {
           border-color: transparent
       }
       50% {
           border-color: lawngreen;
       }
   }
}

@media (min-width: 768px) {
    .story-row {
        /* hack to flush right align the columns with the header
         * for medium and larger layouts
         * */

        margin-right: -23px;
    }
}

.story-title {
    font-family: 'Acre-Regular';
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.1em;
    color: #007bff;
}

.story-title:hover{
    color: #0056b3;
}

.story-teaser {
    font-size: .9em;
}

.story-teaser-img {
    width: 100%;
    height: 160px;
    max-height: 33vh;
    object-fit: cover;
    border-style: solid;
    border-color: white;
    border-width: 5px;
}


/*
 * DOCUMENT PAGE
 */

.sidenav{
    height: 100%;
    width: 12%;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #343a40;
    overflow-x: hidden;
    padding-top: 70px;
    color: #eeeeee;
}

div.info_bar {
    -moz-hyphens:auto;
    -ms-hyphens:auto;
    -webkit-hyphens: auto;
    hyphens:auto;
    background-color: #343a40;
    color: white;
}

@media (max-width: 1000PX) {
    .sidenav {
        position: relative;
        bottom:21%;
        width:100%;
        margin-bottom: 20%;
    }
}

.figure {
    margin: 10px;
}

.doc_metadata {
    white-space: nowrap;
}

/*
 * About Us page
 */

.team-member {
    max-width: 190px;
}

.team-member img {
    max-width: 150px;
    max-height: 150px;
    border: 5px solid #fff;
}


/*
 * Search loader widget
 */

/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
/* border: 16px solid #f3f3f3; */
  border-radius: 50%;
  border: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.figure {
    margin: 10px;

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}