/* BEGIN Font Face Definitions*/
    @font-face {
        font-family: athelas;
        font-style: normal;
        src: url("../fonts/Athelas-Regular.otf") format('opentype');
    }
    @font-face {
        font-family: athelas;
        font-style: italic;
        src: url("../fonts/Athelas-Italic.otf") format('opentype');
    }
    @font-face {
        font-family: athelas;
        font-weight: bold;
        src: url("../fonts/Athelas-Bold.otf") format('opentype');
    }
    @font-face {
        font-family: athelas;
        font-style: italic;
        font-weight: bold;
        src: url("../fonts/Athelas-BoldItalic.otf") format('opentype');
    }
    @font-face {
        font-family: 'majesti banner';
        font-style: normal;
        src: url("../fonts/Majesti-Banner-Book.otf") format('opentype');
    }
    @font-face {
        font-family: 'majesti banner';
        font-style: italic;
        src: url("../fonts/Majesti-Banner-BookItalic.otf") format('opentype');
    }
    @font-face {
        font-family: 'majesti banner';
        font-style: italic;
        src: url("../fonts/Majesti-Banner-BookItalic.otf") format('opentype');
    }
    @font-face {
        font-family: 'majesti banner';
        font-weight: bold;
        src: url("../fonts/Majesti-Banner-Bold.otf") format('opentype');
    }
    @font-face {
        font-family: 'majesti banner';
        font-style: italic;
        font-weight: bold;
        src: url("../fonts/Majesti-Banner-BoldItalic.otf") format('opentype');
    }
/* END Font Face Definitions*/

/* BEGIN Grid framework 
Page grid layout is 1 column by 5 rows.
5 Row layout was chosen to allow text overlay to be centered
within the main content grid container. */

    /* Header container */
    .item1 { 
        grid-area: header;
        grid-row: 1 / 2;
    }

    /* Main content container */
    .item2 {
        grid-area: main;
        grid-row: 2 / 5;
        height: 768px;
    }

    /* Text overlay container for main content */
    .item3 { 
        grid-area: statement;
        grid-row: 3 / 4;
        z-index: 1;
    }

    /* Footer container */
    .item4 { 
        grid-area: footer;
        grid-row: 5 / 6;
    }

    /* Page container for grid framework */
    .grid-container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
        grid-gap: 5px;
        padding: 0px;
    }

    /* Defaults for all grid containers on the page */
    .grid-container > div {
        text-align: center;
        width: 1024px;
        padding: 5px 0;
        
    }
/* END Grid framework */

/* BEGIN Nav Bar Styling */
    .nav {
        list-style-type: none;
        margin: auto;
        padding: 0;
        overflow: hidden;
        background-color: #ffffff;
    }

    .nav li {
    display: inline;
    }

    .nav li a {
        display: inline-block;
        color: #be1e2d;
        padding: 16px;
        text-decoration: none;
        font-family: 'majesti banner', serif;
        font-weight: bold;
        font-size: 22px;
    }

    .nav li a:hover {
        background-color: #41393d;
    }
/* END Nav Bar Styling */

/* BEGIN Footer Styling */
    .foot {
        list-style-type: none;
        margin: auto;
        padding: 0;
        overflow: hidden;
        background-color: #8a8c8f;
        outline: 2px solid #be1e2d;
    }


    .foot li {
        display:inline;
        color: #be1e2d;
        font-family: athelas, serif;
        font-size: 12px;
        padding: 1px;
    }

    .foot li a {
        display: inline-block;
        color: #be1e2d;
        padding: 4px;
        padding-bottom: 0;
        text-decoration: none;
        font-family: athelas, serif;
        font-weight: bold;
        font-size: 16px;
 

    }

    .foot li a:hover {
        background-color: #41393d;
    }
/* END Footer Styling */

/* BEGIN Main Content Styling */
    /*  Main page text formatting for statement overlaying slideshow */
        .home-text {
            color: #ffffff;
            font-family: athelas, serif;
            font-weight: bold;
            font-style: italic;
            font-size: 26px;
            background: rgba(0,0,0,.5);
            width: 100%;
        }


        /* BEGIN Slideshow Styling and Logic */
        .bg-slideshow {
            position:relative;
            height: 100%;
            width: 100%;
            margin: auto;
            outline: 2px solid #be1e2d;
            z-index: -1;   
        }

        .bg-slideshow img {
            display: block;
            position:absolute;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            opacity: 0;
            animation-name: imageAnimation;
            animation-duration: 24s;
            animation-iteration-count: infinite;
        }

        /* Animation calculations: (https://snook.ca/archives/html_and_css/simplest-css-slideshow)

        3 images with 2 second fade in time and visible for 6 seconds
        (2+6) * 3 = 24 seconds total animation 

        Animation Delay = (fade-in + visible) * (order position - 1) 
        Delays = 0 8 16

        Keyframes
        100 / total animation duration = % for 1 second
        100 / 24 = 4.17%
        */

        .bg-slideshow img:nth-child(1) {

        }

        .bg-slideshow img:nth-child(2) { 
            animation-delay: 8s; 
        }

        .bg-slideshow img:nth-child(3){ 
            animation-delay: 16s; 
        }

        @keyframes imageAnimation { 
            0% { opacity: 0;}
            8.33% { opacity: 1; } /* 2 second fade in */
            33.36% { opacity: 1 } /* Img visible for 6 seconds + previous 2 seconds of fade in time */
            41.7% { opacity: 0; } /* 2 second fade out while next image fades in */
            100% { opacity: 0; }
        }

        .no-cssanimations .bg-slideshow img { /* Added in case browser does not support CSS animations */
            opacity: 1;
        }
        /* END Slideshow Styling and Logic */

        /* BEGIN Image Gallery Styling */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
            grid-gap: 20px;
            align-items: stretch;
        }

        .gallery img:hover {
            border: 2px solid #8a8c8f;
        }

        .gallery img {
            border: 2px solid #be1e2d;
            box-shadow: 4px 6px 12px 0px rgba(0,0,0,0.75);
            max-width: 100%;
        }
        /* END Image Gallery Styling */

    .hours{
        font-family: athelas, serif;
        font-style: normal;
        color: #8a8c8f;
        display: inline-block;
        text-align: left;
    }

    h1 {
        font-family: athelas, serif;
        font-weight: bold;
        color: #be1e2d;
    }

    h3 {
        font-family: athelas, serif;
        font-weight: bold;
        color: #be1e2d;
    }

    p {
        font-family: athelas, serif;
        font-style: normal;
        color: #8a8c8f;
    }
/* END Main Content Styling */