/* ** To change the width of the right column, just change the right padding of
        the body, the width of the #right, and the right-margin
        of the #footer by the same amount. */

        /* ** To change the width of the left column, change the body's left padding by the
        desired amount, the #left's "right" attribute and width by the desired amount, and 
        the #footer's left-margin by the desired amount. */

        /* ** In either scenario above, you can eliminate the content by deleting it. */

        /* ** To eliminate the right column, change the margin of the body to 40px (to account
        for the margin on the main body content), the margin-right of the #footer to 
        -40px and, obviously, delete the right column. */

        .two-unequal-columns {
            /* see INDEX */
        }

        .two-equal-columns {
            /*this is the default */
        }

        .single-content-body {
            /* see PLACES */
        }

        .one-left-column {
            /* tbd */
        }

        .one-right-column {

        }

        /****** WHOLE PAGE STYLING ******/
        body {
            min-width: 240px;       /* LC fullwidth + CC padding */
            margin: 0;
            font-family: 'Spectral', Georgia, serif;
            font-weight: 200;
            box-sizing: border-box;
            background: white;
        }
        .column {
			position: relative;
            float: left;
            padding-top: 1em;
			text-align: left;
        }
        .main-content #center {
            padding: 0 20px;
            max-width: 70ch;
            z-index: 100;
            box-sizing: border-box;
            align-content: center;
            float: none;
            padding-bottom: 20px;
        }
        .main-content h1 {
            margin-top: 20px;
        }
        .main-content .content-wrapper {
            text-align: center;
            min-height: 1px;
            width: 100%;
        }
        .main-content {
            position: relative;
            z-index: 5;
            padding-top: 100px;
            background-color: white;
            box-sizing: border-box;
        }
        .show-on-mobile {
            display: none;
        }    
        .left-menu {
            border-right: 2px solid black;
            position: sticky;
            top: 120px;
            font-family: 'Raleway', sans-serif;
        }
        .left-menu ul {
            list-style-type: none;
            padding-left: 0;
        }
        .left-menu li {
            margin-bottom: 1.8em;
        }
        .left-menu a {
            color: black;
        }
        .left-menu a:visited {
            color: black;
        }
        .left-menu a:hover {
            opacity: 0.5;
        }
        .constrain-main-column-width {
            max-width: 1200px;
        }
        .toc-anchor {
            display: block;
            position: relative; 
            top: -100px; 
            height: 1px;}
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Raleway', sans-serif;
        }
        .flex-box {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            z-index: 1;
            justify-content: center;
            align-items: center;
            position: relative;
            align-items: flex-start;
        }
        .flex-columns {
            display: flex;
            flex-direction: column;
        }
        .top-bottom-padding {
            padding-top: 40px;
        }
        .caption-box {
            width: 100%;
            font-style: italic;
            font-size: 0.75em;
            text-align: center;
        }
        .caption-box p {
            max-width: 800px; 
            margin: 0 auto;
        }
        .flex-columns {
            flex-direction: column;
        }
        .flex-wrap {
            flex-wrap: wrap;
        }
        #gallery {
            padding-top: 30px;
        }
        .gallery-container {
            box-sizing: border-box;
            width: 100%;
            text-align: center;
            padding: 0 10px;
            display: flex;
            background-color: white;
        }
        .gallery-item {
            box-sizing: border-box;
            overflow: hidden;
            width: 100%;
            padding-left: 30px; 
            padding-right: 30px;
            padding-bottom: 30px;
            vertical-align: top;
        }
        .gallery-item a:link, .gallery-item a:visited {
            text-decoration: none;
            color: black;
        }
        .gallery-item .gallery-item-content {
            width: 100%;
        }
        .gallery-item-content img {
            width: 100%;
        }
        .gallery-item-content p, .gallery-item-content h2, .gallery-item-content h3,
        .gallery-item-content h4 {
            display: inline;
        }
        .background-image {
            width: 100%;
            display: table;
            height: auto;
            position: relative;
            text-align: center;
            z-index: 5;
            background-color: rgb(238, 235, 235);
            animation: fade-background-color 2s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            -moz-animation: fade-background-color 2s; /* Firefox */
            -moz-animation-delay: 2s;
            -webkit-animation: fade-background-color 2s; /* Safari and Chrome */
            -webkit-animation-delay: 2s;
            -webkit-animation-fill-mode: forwards;
            -o-animation: fade-background-color 2s; /* Opera */
            -o-animation-delay: 2s;
            -o-animation-fill-mode: forwards;
        }
        .background-image img {
            width: 100%;
            overflow: hidden;
            animation: fadeback 2s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            -moz-animation: fadeback 2s; /* Firefox */
            -moz-animation-delay: 2s;
            -webkit-animation: fadeback 2s; /* Safari and Chrome */
            -webkit-animation-delay: 2s;
            -webkit-animation-fill-mode: forwards;
            -o-animation: fadeback 2s; /* Opera */
            -o-animation-delay: 2s;
            -o-animation-fill-mode: forwards;
        }
        .dividing-line {
            border-bottom: 1px black solid;
            width: 100%;
            min-height: 1px;
        }
        .landing-container-index {
            position: absolute;
            opacity: 0;
            top: 48%;
            left: 50%;
            transform: translate(-50%, -50%); 
            color: white;
            z-index: 2;
            animation: fadein 2s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            -moz-animation: fadein 2s; /* Firefox */
            -moz-animation-delay: 2s;
            -webkit-animation: fadein 2s; /* Safari and Chrome */
            -webkit-animation-delay: 2s;
            -webkit-animation-fill-mode: forwards;
            -o-animation: fadein 2s; /* Opera */
            -o-animation-delay: 2s;
            -o-animation-fill-mode: forwards;
        }
        .landing-container-index a:link, .landing-container-index h1, .landing-container-index h3, .landing-container-index p {
            color: white;
        }
        .small-home-background {
            display: none;
            width: 100%;
        }
        .large-home-background {
            position: relative; 
            z-index: 1; 
            display: table; 
            width: 100%;
        }

        #category-introduction-container {
            position: relative;
            z-index: 1;
            height: 400px;
        }
        .white-ass-text {
            color: white;
        }
        .landing-container {
            width: 100%;
            opacity: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); 
            color: black;
            z-index: 6;
            animation: fadein 2s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            -moz-animation: fadein 2s; /* Firefox */
            -moz-animation-delay: 2s;
            -webkit-animation: fadein 2s; /* Safari and Chrome */
            -webkit-animation-delay: 2s;
            -webkit-animation-fill-mode: forwards;
            -o-animation: fadein 2s; /* Opera */
            -o-animation-delay: 2s;
            -o-animation-fill-mode: forwards;
        }
        .absolute {
            position: absolute;
            flex-direction: column;
            align-items: center;
        }
        
        .white-about-text h1, .white-about-text h4 {
            margin: 5px 0;
        }

        .category-title {
            box-sizing: border-box;
            text-align: center;
            letter-spacing: 2.5px;
            margin: auto;
            z-index: 2;
            opacity: 0;

            /* animations */
            animation: fadein 2s;
            animation-delay: 1s;
            animation-fill-mode: forwards;
            -moz-animation: fadein 2s; /* Firefox */
            -moz-animation-delay: 1s;
            -webkit-animation: fadein 2s; /* Safari and Chrome */
            -webkit-animation-delay: 1s;
            -webkit-animation-fill-mode: forwards;
            -o-animation: fadein 2s; /* Opera */
            -o-animation-delay: 1s;
            -o-animation-fill-mode: forwards;
        }
        .category-title h1 {
            padding: 0;
            margin-block-start: 0.67em;
        }
        .category-description {
            box-sizing: border-box;
            line-height: 1.7;
            text-align: left;
            width: 300px;
            margin: auto;
            z-index: 2;
            opacity: 0;
            animation: fadein 2s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            -moz-animation: fadein 2s; /* Firefox */
            -moz-animation-delay: 2s;
            -webkit-animation: fadein 2s; /* Safari and Chrome */
            -webkit-animation-delay: 2s;
            -webkit-animation-fill-mode: forwards;
            -o-animation: fadein 2s; /* Opera */
            -o-animation-delay: 2s;
            -o-animation-fill-mode: forwards;
        }
        .left-border {
            padding-left: 5px;
            border-left: 1px solid black;
            margin: 50px 0;
        }
        .about-me-main {
            margin-top: 50px;
            box-sizing: border-box;
            padding: 0 30px;
        }
        .about-me-item {
            box-sizing: inherit;
            max-width: 500px;
            padding: 0 15px;
        }
        .about-me-item img {
            padding-bottom: 10px;
        }
        
        /* FADE IN EFFECT FOR HOMEPAGE TEXT */
        @keyframes fadein {
            from {
                opacity:0;
            }
            to {
                opacity:1;
            }
            
        }
        @-moz-keyframes fadein { /* Firefox */
            from {
                opacity:0;
            }
            to {
                opacity:1;
            }
        }
        @-webkit-keyframes fadein { /* Safari and Chrome */
            from {
                opacity:0;
            }
            to {
                opacity:1;
            }
        }
        @-o-keyframes fadein { /* Opera */
            from {
                opacity:0;
            }
            to {
                opacity: 1;
            }
        }   

        /* FADE BACK EFFECT FOR HOMEPAGE PHOTO */
        @keyframes fadeback {
            from {
                opacity:1;
            }
            to {
                opacity:0.5;
            }
            
        }
        @-moz-keyframes fadein { /* Firefox */
            from {
                opacity:1;
            }
            to {
                opacity:0.5;
            }
        }
        @-webkit-keyframes fadein { /* Safari and Chrome */
            from {
                opacity:1;
            }
            to {
                opacity:0.5;
            }
        }
        @-o-keyframes fadein { /* Opera */
            from {
                opacity:1;
            }
            to {
                opacity:0.5;
            }
        }   

        /* FADE BACKGROUND COLOR TO ENSURE SMOOTH TRANSITION BETWEEN IMAGE AND FOOTER */
        @keyframes fade-background-color {
            from {
                background-color: rgb(238, 235, 235);
            }
            to {
                background-color: none;
            }
            
        }
        @-moz-keyframes fade-background-color {
            from {
                background-color: rgb(238, 235, 235);
            }
            to {
                background-color: none;
            }
        }
        @-webkit-keyframes fade-background-color {
            from {
                background-color: rgb(238, 235, 235);
            }
            to {
                background-color: none;
            }
        }
        @-o-keyframes fade-background-color {
            from {
                background-color: rgb(238, 235, 235);
            }
            to {
                background-color: none;
            }
        }   
        /***** HEADER STYLING ******/
        .navbar>ul>li>a {
            padding-top: 15px;
            padding-bottom: 20px;
            font-size: 0.875rem;
            color: #333;
        }

        .navbar>ul>li>a:hover {
            color: orange;
            animation: navbar-spacing 1s;
            -webkit-animation: navbar-spacing 1s;
            -moz-animation: navbar-spacing 1s;
            -o-animation: navbar-spacing 1s;
        }
        @keyframes navbar-spacing {
            from {
                letter-spacing: 0;
            }
            to {
                letter-spacing: 2px;
            }
            
        }
        @-moz-keyframes navbar-spacing {
            from {
                letter-spacing: 0;
            }
            to {
                letter-spacing: 2px;
            }
            
        }
        @-webkit-keyframes navbar-spacing {
            from {
                letter-spacing: 0;
            }
            to {
                letter-spacing: 2px;
            }
            
        }
        @-o-keyframes navbar-spacing {
            from {
                letter-spacing: 0;
            }
            to {
                letter-spacing: 2px;
            }
            
        }

        .navbar-fixed-top {
            padding-top: 0px;
            padding-bottom: 0px;
            position: fixed;
            top: 0; 
            left: 0; 
            right: 0; 
            z-index: 300;
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            background-color:#fff;
            height: 100px;
        }

        .navbar-brand {
            float: left;
            padding-left: 15px;
            padding-right: 15px;
            font-size: 18px;
            margin: 0 0 0 5%;
            height: 100%;
        }

        .overflow-protection {
            padding-left: 180px;
        }

        .navbar-brand img {
            height: 100%;
        }
        .navbar-right {
            float:right;
            padding-left: 0;
            list-style: none;
            min-height: 50px;
            margin: 23px 0 15px 0;
        
            min-width: 300px;
            letter-spacing: 1px;
        }
        
        .navbar-right li {
            float: left;
            display: block;
            letter-spacing: 1px;
            padding-left: 3px;
            box-sizing: border-box;
        }
        
        .navbar-right ul {
            vertical-align: middle;
            text-align: center;
        }
        
        .navbar-right li a:link {
            color: black;
            text-decoration: none;
            font-size: 20pt;
        }
        
        .navbar-right li a:visited {
            color: initial;
        }
        
        .navbar-right li a:hover, .navbar-right li a:focus{
            font-size: 22pt;
            color: #7D3568!important;
        }
        .navbar-right li.current {
            border-left: 2px solid black;
        }
        /* END HEADER STYLING */

        /* FOOTER STYLING */
        #footer {
            clear: both;
            position: fixed;
            bottom: 42px;
            width: 100%;
            background: #7D3568;
            font-size: small;
            text-align: center;
            font-family: 'Raleway', sans-serif;
            line-height: 1.3rem;
            border-top: 80px solid #7D3568;
        }
        #footer p, #footer ul, .small-footer p {
            opacity: 0.6;
        }
        #footer a, .small-footer a {
            color: gold;
        }
        #footer a:hover, .small-footer a:hover {
            opacity: 0.4;
        }
        #footer .column {
            padding: 0 2% 0 2%;
            box-sizing: border-box;
            background-color: #7D3568;
            color: white;
        }
        #footer h3 {
            text-align: left;
            text-transform: uppercase;
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        #footer ul {
            list-style: none;
            padding-left: 0;
        }
        #footer li {
            line-height: 1.5em; 
            margin-bottom: 4px;
        }
        .social-list a {
            display: inline-block;
            float: left;
            width: 30px; 
            height: auto;
            padding-right: 5px; 
            box-sizing: border-box;
            opacity: 0.8;
        }
        .social-list a:hover {
            opacity: 0.4;
        }
        .small-footer {
            padding-left: 2%;
            padding-right: 2%;
            box-sizing: border-box;
            background-color: #7D3568;
            color: white;
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #7D3568;
            font-size: 10px;
            text-align: left;
            font-family: 'Raleway', sans-serif;
            line-height: 1rem;
            display: inline-block;
        }
        .small-footer .col-xl-9 {
            box-sizing: border-box;
        }
        .to-top {
            box-sizing: border-box;
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            opacity: 0.4;
            z-index: 2;
        }
        .to-top img {
            width: 100%;
            height: auto;
        }
        /* END FOOTER STYLING */

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}