/* ====================================
   Universal Rules
   ====================================
*/

html
{
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
    margin: 0;   
}

body
{
    margin: 0; /* Removes margins from appearing around the page */
    height: 100%;
    width: 100%;
}

a
{
    text-decoration: none;
}
g{
    color:lightgray;
    text-decoration: none;
    font-weight: bold;
}
/* Image Elements Dimensions */
img
{
    /* PlaceHOlder will be removed (once replaced as background images) */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Subsection Title Style */
.subsectionTitle
{
    margin: 0;
    text-align: center;
    color: rgba(9,74,10,255); /* Sets text color to a dark green */
    font-weight: bolder; /* Makes the font bolder */
}

/* Nav Bar Section */
.top-nav 
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-image: linear-gradient(to right, rgba(9,74,10,255), green) ;
    height: 70px;
    padding: 16px;
    margin: 0;
}

.top-nav #CCN-Title_Container
{
    width: 30%;
}

.top-nav h2
{
    color: white;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    font-size: 1.25rem;
    font-style: italic;
}

.menu 
{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li a
{
    color: white;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 0;
}

.menu > li 
{
    margin: 0 1rem;
    overflow: hidden;
}

.menu-button-container 
{
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu-toggle 
{
    display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after 
{
    display: block;
    background-color: white;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
}

.menu-button::before
{
    content: '';
    margin-top: -8px;
}

.menu-button::after 
{
    content: '';
    margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before 
{
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button 
{
    background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after 
{
    margin-top: 0px;
    transform: rotate(-405deg);
}

/* footer section */

footer
{
    height: auto;
    text-align: center;
    background-image: linear-gradient(green, rgba(9,74,10,255));
    color: white;
    font-size: larger;
    position: relative;
}

.footer-Container
{
    height: auto;
    padding: 15px;
    font-size: 1.75vw;
    font-weight: bolder;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
}
.footer-Container a
{
    text-decoration: none;
    color: white;
}
.footer-Container #contactEmail
{
    color: white;
    text-decoration: underline;
}

/* Image Container Rules */
.ccnIcon-container
{
    width: 12.5%;
    height: 90px;
    float: left;
}
/* Chebucto Image Icon */
#chebuctoImg
{
    width: 100%;
    height: 95%;
    padding-bottom: 5%;
    padding-left: 5%;
}

/* Title Container */
.title-container
{
    font-family: 'Times New Roman', Times, serif;
    width: 90%;
    text-align: center;
}

/* IATS Icons and Footer Images */

.IATS_SecureDataDiv img
{
    width: 30%;
}

.IATS_PaymentItemDiv img
{
    width: auto;
    height: auto;
}

/* ===============================
   Mobile Styles: 0px to 600px 
   ===============================
*/

@media (max-width: 600px) 
{

    .menu-button-container 
    {
        display: flex;
    }

    .menu 
    {
        position: absolute;
        top: 0;
        margin-top: 86px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    #menu-toggle ~ .menu li 
    {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ .menu li
    {
        border-bottom: 1px solid rgba(9,74,10,255);
        height: 48px;
        padding: 8px 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu > li 
    {
        display: flex;
        justify-content: center;
        width: 100%;
        background-color: white;
    }

    .menu li a
    {
        color: rgba(9,74,10,255);
        text-shadow: none;
        text-decoration: none;
        text-align: center;
        font-size: 17.279px;
        padding: 13.75px 0
    }

    .menu > li:not(:last-child) 
    {
        border-bottom: 1px solid rgba(9,74,10,255);
    }

    .top-nav
    {
        justify-content: space-between;
        padding: 8px;
    }

    .top-nav h2
    {
        text-align: center;
        font-size: 1.75vh;
    }

    .top-nav #CCN-Title_Container
    {
        width: 50%;
    }

    .top-nav #CCN-Icon_Container, .menu-button-container 
    {
        width: 20%;
    }

    #CCN-Icon_Container img
    {
        padding-top: 4px;
    }

    /* footer section */

    

    .footer-Container
    {
        font-size: 3vw;
    }
 
}

/* =============================================
   Tablet Styles: 601px to 850px 
   =============================================
*/
@media only screen and (min-width: 601px) and (max-width: 850px)
{
    .menu-button-container 
    {
        display: flex;
    }

    .menu 
    {
        position: absolute;
        top: 0;
        margin-top: 86px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    #menu-toggle ~ .menu li 
    {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ .menu li
    {
        border-bottom: 1px solid rgba(9,74,10,255);
        height: 48px;
        padding: 8px 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu > li 
    {
        display: flex;
        justify-content: center;
        width: 100%;
        background-color: white;
    }

    .menu li a
    {
        color: rgba(9,74,10,255);
        text-shadow: none;
        text-decoration: none;
        text-align: center;
        font-size: 17.279px;
        padding: 13.75px 0
    }

    .menu > li:not(:last-child) 
    {
        border-bottom: 1px solid rgba(9,74,10,255);
    }

    .top-nav
    {
        justify-content: space-between;
        padding: 8px;
    }

    .top-nav h2
    {
        text-align: center;
        font-size: 2.5vw;
    }

    .top-nav #CCN-Title_Container
    {
        width: 40%;
    }

    .top-nav #CCN-Icon_Container, .menu-button-container 
    {
        width: 15%;
    }

    #CCN-Icon_Container img
    {
        height: 95px;
        width: 100px;
        padding-top: 5px;
        padding-left: 15px;
    }

    /* footer section */
    .footer-Container
    {
        font-size: 2.5vw;
    }
 
}

/* =============================================
   Small Desktop Styles: 851px to 1250px 
   =============================================
*/
@media only screen and (min-width: 851px) and (max-width: 1250px)
{
    .top-nav #CCN-Icon_Container, .menu-button-container 
    {
        width: 10%;
    }
    .top-nav #CCN-Title_Container
    {
        width: 40%;
    }


    .top-nav #CCN-Icon_Container img
    {
        height: 100%;
        width: 100%;
        padding-top: 8px;
    }
    .top-nav #CCN-Title_Container h2
    {
        font-size: 1.75vw;
    }
    .top-nav .menu li a
    {
        font-size: 1.51vw;
    }

    /* footer section */
    .footer-Container
    {
        font-size: 2vw;
    }

}

/* =============================================
   Large Desktop Styles: 1251px and beyond 
   =============================================
*/
@media only screen and (min-width: 1251px)
{
    
    .top-nav #CCN-Icon_Container
    {
        width: 7.5%;
    }
    .top-nav #CCN-Title_Container
    {
        width: 45%;
    }
    .top-nav #CCN-Title_Container h2
    {
        font-size: 1.65vw;
    }
    .top-nav #CCN-Icon_Container img
    {
        height: 100%;
        width: 100%;
        padding-top: 8px;
    }
    .top-nav .menu li a
    {
        font-size: 1.5vw;
    }

}


/*
    Rough Code:

        /* Title  /
        h1
        {
            margin: 0;
            padding: 5px;
        }
    
        /* Subsection Title /
        h2
        {
            margin: 0;
            padding: 5px;
            font-style: italic;
            font-family: 'Times New Roman', Times, serif;
        }


*/

/* Rough Code */
/*
    /* Universal 
    .top-nav #CCN-Icon_Container img
    {
        height: 90%;
        width: 100%;
    }

    /* footer section (Mobile)

    footer
    {
        text-align: center;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: larger;
        height: 7.5%;
    }

    .footer-Container
    {
        padding: 10px 0;
    }

    .footer-Container a
    {
        text-decoration: underline;
        color: white;
    }


    
    /* footer section (Tablet)

    footer
    {
        text-align: center;
        background-image: linear-gradient(green, rgba(9,74,10,255));
        color: white;
        font-size: larger;
        height: 70px;
        margin: 0;
        padding: 0;
    }

    .footer-Container
    {
        padding: 12.5px 0;
    }

    .footer-Container a
    {
        text-decoration: underline;
        color: white;
    }
*/