@media only screen and (max-width: 768px){
    /* Index Page */
    .main-wrapper
    {
        background-image: url("bck_001_m.jpg") !important;
        height: 95vh !important;
    }

    .home-main
    {
        height: 95vh !important;
    }

    .main-wrapper h1
    {
        font-size: 30px;
        margin-top: 4.5vh;
    }

    .main-content h2
    {
        font-size: 15px;
    }

    .main-wrapper p 
    {
        width: 85%;
        font-size: 14px;
        text-align: left;
        margin-top: 8vh;
        letter-spacing: 1px;
        kerning: 0;
    }
    .main-content a 
    {
        margin-top: 6vh; 
        padding: 5px;
        font-size: 14px;
    }

    .main-content 
    {
        padding: 40px;
        padding-bottom: 0;
        height: auto !important;
    }

    .main-wrapper
    {
        background-image: none;
    }

    .media-links 
    {
        margin-top: -2vh;
        
    }

    .media-links a
    {
        font-size: 20px;
        margin-right: 20px; 
    }

    /* Menu Icon */

    .menu-icon
    {
        margin-top: 10px;
        margin-left: -60px;
        width: 23px !important;
        height: 15px;
        position: relative !important;
    }

    .notHomeIcon
    {
        margin-top: -45px !important;
    }

    .notHomeLinks
    {
        padding-top: -45px !important;
    }

    .menu-icon > *
    {
        background-color: black !important;
        height: 2px !important;
    }

    .menu-links
    {
        margin-top: -60px !important;
        display: flex !important;
        flex-flow: wrap;
        flex-direction: column;
        justify-content: center;
        width: 100% !important;
    }

    .menu 
    {
        padding-right: 0px !important;
        width: 0;
        margin: 0;
    }

    .active
    {
       margin-left: 20px; 
       
    }

    .active #bar3
{
    -webkit-transform: translate(0px, -4px) rotate(45deg) !important;
        -moz-transform: translate(0px, -4px) rotate(45deg) !important;
            -o-transform: translate(0px, -4px) rotate(45deg) !important;
                transform: translate(0px, -4px) rotate(45deg) !important;
}

    /* Sections */

    .section-title 
    {
        font-size: 25px;
    }

    .section-title::after
    {
        margin-top: 30px;   
        border: 3px solid #68acff;
    }

    /* Downloads */

    .downloads-section
    {
        height: 85vh;
        padding: 25px;
    }

    .dwnld-grid
    {
        margin-top: 15px;
        grid-template-columns: none;
        grid-template-rows: 1fr 1fr 1fr;
        grid-auto-flow: row;
        padding: 5px;
        height: 80%;
        align-self: center;
    }
    .dwnld-grid > *
    {
        padding: 10px;
    }
    .d-icon
    {
        font-size: 25px;
    }

    .dwnld-grid p
    {
        font-size: 13px;
    }

    .dwnld-grid .download-opt a 
    {
        padding: 8px;
    }

    /* Posts Section */

    .news-section
    {
        height: auto;
    }

    .nopost
    {
        margin-top: 15px;
    }

    .posts
    {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        margin-top: 0px;
        column-gap: 0px;
        margin-left: auto !important;
    }

    .post-r 
    {
        grid-column: unset;
        grid-row: 1;
        /* width: 100vw; */
    }

    .post-r-title {margin-top: 15px; margin-bottom: 5px; font-size: 20px;}

    .post-img
    {
        height: 150px;
        width: 65vw;
        clear: both;
        margin-top: 10px;
        margin-bottom: 10px;
        margin: auto;
        margin-top: 5px;
    }

    .post-r-body
    {
        font-size: 12px;
        text-align: justify;
        line-height: 16px;
        margin-top: 10px;
    }

    .post-r-link, .viewAll-link
    {
        font-size: 13px;
    }

    .post-r-date, .post-o-date
    {
        font-size: 10px;
    }

    .post-o
    {
        margin-top: 30px;
        grid-column: unset;
        grid-row: 2;
    }
    .post-o-title {font-size: 17px;}
    .post-card
    {
        height: 12vh !important;
        width: 70vw;
    }

    .post-o-body
    {
        /* font-size: 12px; */
        display: none !important;
    }

    /* Calendar Section */

    .calendar-section
    {
        padding: 25px;
        height: 85vh;
    }

    .event-card-wrapper
    {
        grid-template-columns: none;
    }
    .card-dow{display: none;}

    .card-events
    {
        width: 100%;
    }

    .card-events table
    {
        width: 100%;
    }
    .card-events table tr th 
    {
        font-size: 19px;
    }
    .card-events table tr td
    {
        font-size: 13px;
        padding: 5px;
    }

    /* Footer */
    .footer-section
    {
        display: inline-block !important;
        height: auto !important;
        padding: 25px;
        display: block;
        grid-template-columns: none;
        width: -webkit-calc(100% - 100px);
        width: -moz-calc(100% - 100px);
        width: -o-calc(100% - 100px);
        width: calc(100% - 100px);
    }

    .footer-section > * 
    {
        display: block !important;
    }

    .rights
    {
        text-align: center;
        font-size: 18px;
        padding: 10px;
    }
    .footer-title
    {
        font-size: 20px !important;
    }

    #ft3 ul li a 
    {
        font-size: 20px !important;
    }

    /* Gallery Page */
    .g-slide p
    {
        width: 90% !important;
    }

    .g-wrapper 
    {
        flex-direction: none !important;
        text-align: center !important;
        justify-content: space-around !important;
    }

    .gallery-image
    {
        width: 150px !important;
        height: 150px !important;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 0 !important;
    }


    /* Posts Page */

    .hide
    {
        display: none !important;
    }

    .posts-container
    {
        width: 100%;
    }

    .posts-main
    {  
        padding-right: 0 !important;
        padding-left: 0 !important;
        display: block !important;
        height: auto !important;
        width: 90%;
        margin: auto;
    }

    .p-section-title
    {
        font-size: 25px; 
    }

    .p-main-content
    {
        margin-right: 0px !important;
        width: 100%;
    }

    .p-main-content .img-container
    {
        height: 100%;
        margin-right: 0px !important;
        background-color: transparent;
        float: none;
    }

    .p-main-content .img-container img
    {
        text-align: center;
    }

    .post-body
    {
        padding-right: 0 !important;
        float: none;
    }

    .tabs
    {
        margin-left: 0 !important;
        display: block !important;
        text-align: center;
    }

    .tabs p:nth-child(3)
    {
        display: none;
    }

    .tabs input
    {
        margin-top: 15px;
    }

    .tabs input:focus
    {
        margin-top: 13px !important;
        margin-left: 0 !important;
    }

    .p-main-side
    {
        display: none !important;
    }

    .p-main-header
    {
        margin: 0 !important;
        padding-top: 20px !important;
    }

    .a-posts-active .a-post-body
    {
        height: 30vh;
    }

    .a-category
    {
        font-size: 12px !important;
    }
    .mobile
    {
        margin-top: 10px !important;
    }

    /* Contact Page */
    .card-wrapper
    {
        grid-template-columns: none !important;
        grid-template-rows: 0.25fr 1fr;
        margin-bottom: 5vh;
        border-radius: 10px;
    }

    .main-content iframe
    {
        grid-row: 1;
        grid-column: 1 !important;
        width: 100%;
        border-radius: 10px 10px 0 0;
    }

    .main-content form
    {
        padding: 0 !important; 
    }

    .main-content form input, form textarea
    {
        width: 90% !important; 
        padding: 2px !important;
        margin-bottom: 10px;
    }
    .main-content form
    {
        grid-row: 2;
        grid-column: 1 !important;
        width: 100%;
        display: block;
        grid-template-columns: none !important;
        border-radius: 0 0 10px 10px;
    }
    .form-title
    {
        font-size: 25px !important;
        margin-bottom: 20px;
    }

    /* About Page */

    .image-container
    {
        display: none;
    }

    .section-body
    {
        width: 100% !important;
    }

    /* Login Page */

    .lg-card-container
    {
        grid-template-columns: none !important;
        height: auto;
        border-radius: 10px;
    }

    .lg-card-left
    {
        padding: 0;
        border-radius: 10px;
    }

    .lg-card-left h1
    {
        margin-top: 10px;
    }

    .lg-card-right
    {
        display: none !important;
    }

}

@media only screen and (width: 1024px)
{

        /* Calendar Section */
    
        .card-events
        {
            width: 100%;
        }
    
        .card-events table
        {
            width: 100%;
        }
        .card-events table tr th 
        {
            font-size: 19px;
        }
        .card-events table tr td
        {
            font-size: 13px;
            padding: 5px;
        }

}