/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    /*font-family: 'Times New Roman', Times, serif;*/
    font-family: "Courier New",Courier,monospace;
}

div.text-container {
    margin: 0 auto;
    width: 75%;
}

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: auto; /* sets the height of visible text*/
    position: relative; /* required for fade to work */
}

.showContent {
    line-height: 1em;
    height: auto;
    overflow: visible;
}



h1 {
    font-size: 24px;
}

p {
    padding: 10px 0;
    max-width: 800px;
}

.show-more {
    padding: 10px 0;
    text-align: left;
}

fade {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    height: 80px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 100%);
}

.content em {
    font-size: 11px;
}


.show-read-more .more-text {
    display: none;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/*.img-responsive {
    width: auto;
    height: 200px;
}*/

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

/* AL My Additions for sliding pages */

.slide {
    outline: none;
    margin-left: 100px;
    max-width: 800px;
}

#carouselx {
    width: 100%;
    height: auto;
    overflow: visible;
    white-space: nowrap;
}

    #carouselx .slide {
        display: inline-block;
        padding-right: 50px;
    }

img {
    max-height: 500px;
    max-width:800px;
}

p {
    /*max-width: 450px;*/
    white-space: normal;
}

@media only screen and (max-width: 600px) {
    .navbar-toggle {
        float: left;
        margin-left: 10px;
    }

    .slide {
        margin-left: 10px;
    }
}


@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }

    .navbar-left, .navbar-right {
        float: none !important;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .collapse.in {
        display: block !important;
    }
}