/*  Reference for custom font used: PPD-Black */
@font-face
{
    font-family: myFont;
    src:url(fonts/PPD-Black.otf);
    
}

/*  No padding on webpage, initially, by default */
*
{
    padding: 0;
}

.mobileNavButton
{        
    visibility: hidden;
    position: relative;        
    color:#3fb82a;
    display: inline-block;  
}

.mobileNavButton:hover
{
    filter: brightness(110%);
}


/*  Mobile navigation menu.  Hidden by default. */
#mobileNav    
{
    max-width: 100%;
    visibility: hidden;
    position: absolute;
    list-style-type: none;
}

        .captionTextMobile
        {
            display: none;
        }


/*  Mobile navigation menu.  Hidden by default. */
#ageCheck
{
    font-size: 20px;
    color: black;
    top: 0;
    height: 100%;
    background-color: rgba(256,256,256,0.975);
    max-width: 100%;
    width: 100%;
    visibility: visible;
    position: absolute;
    list-style-type: none;
    z-index: 100;
    text-align: center;
}   

/*  Mobile navigation menu.  Hidden by default. */
#ageVerificationHeader
{
    font-weight: bold;
}   

.ageCheckOverlayContent
{
    position: relative;
    top: 200px;
}

#ageVerificationButtons
{    
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

    #ageVerificationButtons button
    {        
        margin-left: 15px;        
        margin-right: 15px;        
        text-align: center;        
        background-color: #3fb82a;
        color: black;
        font-size: 20px;  
        width: 80px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;        
    }

    #ageVerificationButtons button:hover
    {
        filter: brightness(125%);
        cursor: pointer;
    }

#linksList
{
    position: relative;
    display:inline-block;
}
          
#loading #appContent, #tableStyle2Spelling, #tableStyle2Reading, #tableStyle2Stages, #spellingList
{
    display: none;
}

#tableMobile
{
    display: none;
}

#mobileScreensOnly
{
    display: none;
}
    
/*  Default settings for body of pages, sets default font, background color and fade in animation settings  */
html
{
    overflow-x: hidden;
}

body 
{
    overflow-x: hidden;
    font-family: 'myFont', cursive;    
    background-color:white;
    
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*  Opacity range for page fade-in animation  */
@keyframes fadeInAnimation 
{
    0% 
    {
        opacity: 0;
    }
    100% 
    {
        opacity: 1;
    }
}

#img
{    
    height: auto;
}

#imgOther
{
    width: 0px;
    height: 0px;
    /*display:hidden;*/
}


/*  Sets background logo container to transparent */
.logo
{
    background-color: transparent;
    
}

/*  Sets background logo image specs */
.logo img
{
    margin-top: 30px;
    padding: 0px;
    width: 15%;
    background-color: rgba(0,0,0,0);
    border-radius: 10%;
    transition: 0.5s;
}


/*  Navbar container specs - adapted from Greatstack 'Website Design With HTML and CSS' */

#headerBody
{  
    position: relative;
    text-align: right;       
}

#headerBody h6
{
    color: dodgerblue;
    letter-spacing: 5px;
    font-size: 12px;
    width: 90%;
    margin-left: 5%;
}

#headerLogoContainer
{
    top: 30px;
    position: absolute;
    left: 5%;
    background-color: transparent;
}

#headerLogo
{        
    width: 100px;
    height: 100px;
    filter: brightness(120%);
    background-color:transparent;
}

#headerLogo::after
{    
    filter: brightness(140%);
}

.navbar
{
    margin-right: 5%;    
    right: 7.5%;        
    justify-content: space-between;
    z-index: 1;
    
}
    /*  List of links container specs */
    .navbar ul
    {       
        background-color: none;
        border-radius: 25px;
        display: inline-block;
        list-style-type: none;
    }

    /*  General list of links specs */
    .navbar ul li
    {
        height: auto;
        position: relative;
        display: inline-block;    
        margin: 12px 12px 0px 12px;
    }

    /*  Individual links spec */
    .navbar ul li a
    {
        height: 20px;    
        text-decoration: none;
        color: black;
        letter-spacing: 5px;
    }

    /*  Link underline specs - has 0 width initially, not displayed on hover  */
    .navbar ul li::after
    {
        background: #3fb82a;        
        content: '';
        width: 0;
        height: 3px;    
        left: 0;
        bottom: -10px;
        position: absolute;
        transition: 0.5s;
    }

    #shoppingCartLink
    {
        top: 12.5px;
    }

    /*  Displays link underline on hover */
    .navbar ul li:hover::after
    {
        width: 100%;
    }

    /*  Displays link underline on hover */
    #shoppingCartLink:hover::after
    {
        width: 0%;
    }

    .navbar img
    {
        background-color: dodgerblue;
    }

    #usernameOnIndexPage
    {
        color: darkorange;
        font-size: 18px;
    }

    /*  Sets background logo container to transparent */
    .shoppingCart
    {
        padding-right: 30px;
        background-color: transparent;        
    }

    /*  Sets background logo image specs */
    .shoppingCart img
    {                
        height: 40px;
        background-color: transparent;
        border-radius: 10%;
        transition: 0.5s;        
    }

    .shoppingCartBadge
    {
        
        position: absolute;
        background-color: red; /* Badge background color */
        color: white; /* Badge text color */
        border-radius: 50%; /* Makes it circular */
        text-align: center;        
        padding: 3px 2px 2.5px 5.5px; /* Adjust padding for size */
        font-size: 11px; /* Adjust font size */        
        z-index: 0.5; /* Ensures it appears above the icon */
    }

    /*  To brighten logo on cursor hover */
    .shoppingCart img:hover
    {
        filter: brightness(110%);
    }

#heroPicture
{
    position: relative;    
    margin-left: 0;
    padding-left: 0;
    margin-top: 35px;    
}
#heroPicture img
{
    position: relative;
    width: 100%;
    height: auto;
}

/* Caption container over hero image  */
.captionText 
{
    background-color: rgba(0, 0, 0, 0.5); /* Red with 50% opacity */    
    border-radius: 25px;    
    top: 72.5%;
    left: 10%;    
        
    position: absolute;
    text-decoration: none;
}

.innerCaptionText
{
    position:relative;
    margin: 15px 15px 15px 15px;
}

    /* First heading specs  */
    .captionText h1
    {
        position: relative;        
        color:#3fb82a;        
        font-size: 24px;
        letter-spacing: 10px;
        padding-left: 10px;        
    }

    /* Second heading specs  */
    .captionText h2
    {
        position: relative;
        right: 2%;
        font-size: 45px;
        font-weight: lighter;
        margin-bottom:  0px;
    }

    /* Third heading specs  */
    .captionText h4
    {
        position: relative;
        right: 2%;
        font-size: 18px;
        font-weight: lighter;        
        margin-bottom:  15px;
        text-align: left;
        margin-left:10px;
    }

    /* Link specs  */
    .captionText a
    {
        position: relative;        
        color:#8ff17e;
        font-size: 20px;      
    }

    /* Increases link size on cursor hover */   
    .captionText a:hover
    {
        color: white;
        transform: scale(1.1); 
    }

/* Specs for right columns on Home page containing captioned image panels */ 
.leftColumn 
{
    display:inline-block;    
    width: 39.8%;
}

/* Specs for left columns on Home page containing captioned image panels */ 
.rightColumn
{
    display:inline-block;    
    width: 39.8%;    
}

    /* General specs for both columns */ 
    .flexColumn 
    {
        flex-direction: column;
        position:relative;        
        color: white;
        margin-top: 100px;
        width: 100%;
        left: 17.5%;

    }

    /* General specs for images in the panels */ 
    .leftColumn img, .rightColumn img
    {
        vertical-align: bottom;
        width: 100%;
        height: 450px;
        transition: transform 0.75s ease;
    }

    /* Height specs for long image panels */ 
    .longItem img
    {   
        height: 1000px;
    }

    /* General specs for all panels */ 
    .longItem, .topShortItem, .bottomShortItem
    {
        position: relative;
    }

    /* Margin specs for top short panel, to create space from the bottom short panel */ 
    .bottomShortItem img
    {
        margin-top: 100px;
    }

    /* Image resizing and brightness specs for cursor hover over images*/ 
    .leftColumn img:hover, .rightColumn img:hover
    {        
        filter: brightness(75%);
        cursor: pointer;
    }

    /* Column caption container specs */
    .caption
    {   
        position: absolute;
        bottom: 50px;
        left: 10%;
        padding: 8px 12px;
        background-color: rgba(38, 48, 43, 0.5);
        color: ghostwhite;
        font-size: 12px;    
    }

    /* Caption resizing specs on cursor hover */
    .caption:hover
    {        
        cursor: pointer;
    }

    /* Specs for first heading */
     .caption h1
    {
        font-size: 15px;
        letter-spacing: 7.5px;
        margin-bottom:  20px;
    }

    /* Specs for second heading */
     .caption h2
    {
        font-size: 30px;
        font-weight: lighter;
    }

/* Specs for section line breaks */
hr
{
    margin-left: 7.5%;
    margin-top: 100px;
    margin-bottom: 100px;
    width: 85%;
    text-align: center;
}

/* Specs for call to action section on Home page */
.callToAction
{
    width: 85%;
    margin-left: 15%;    
    margin-top: 50px;
}

    /* Specs for heading and link */
    .callToAction h1, .callToAction h2
    { 
        width: 80%;
        color: ghostwhite;
    }

    /* Specs for heading */
     .callToAction h1
    {    
        font-size: 40px;
        letter-spacing: 5px;
        margin-bottom:  40px;
    }

    /* Specs for link */
    .callToAction h2
    {    
        font-weight: lighter;
        font-size: 25px;
        cursor: pointer;
        transition: 0.5s;    
    }

    /* Recolouring and size specs for link on mouse cursor hover */
    .callToAction h2:hover
    {
        font-size: 27px;
        color: cyan;
    }


/* Awards section specs */
.awards
{
    margin-left: 15%;
}

    /* Awards heading specs */
    .awards h1
    {
        color: white;
        margin-top:  10px;
        font-size: 20px;
        letter-spacing: 5px;
        margin-bottom:  75px;
    }

    /* Specs for column container containing each award, as displayed in list */
    .awardsFlexColumn
    {
        transition: ease 0.1s;
    }

    /* Specs for each award image */
    .awardsFlexColumn img
    {
        background-color: white;
        border-radius: 5px;
    }

    /* Specs for lists for each award, including image and details */
    .awards ul li
    {
        width: 20%;
        height: auto;
        margin: 0 20px;
        display: inline-block;
        position: relative;
        
    }

    /* Specs for list of details for each award */
    .awards h2
    {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: 5px;
    }


    .shoppingCartItems
    {        
        text-align: left;
        color:black;
        flex-direction: column;
        position: relative;
        display:inline-block;
        left: 5%;
        margin-top:150px;    
        text-align:left;
        width: 95%;              
    }

    .shoppingCartItems hr
    {
        margin:0px 0px 0px 0px;
        width: 90%;
        padding:0%;               
    }

    .shoppingCartItems h1
    {
        text-align: left;
    }
    .shoppingCartItems h2
    {
              
        font-size: 14px;
        color:red;
    }
    
    .shoppingCartItem
    {
        font: 10px;
        height: 10%;             
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
    }

    .shoppingCartItemsHeadings
    {
        font-weight:bold;
    }

    .shoppingCartItemName
    {        
        width: 500px;
    }

    .shoppingCartItemSize
    {
        width: 200px;

    }
    .shoppingCartItemPrice
    {
        width: 200px;

    }

    .shoppingCartItemQuantity
    {
        width: 200px;
    }

    .shoppingCartItemRemove
    {                
        width: 400px;
    }

    .shoppingCartItemQuantity input
    {
        width: 38px;
        text-align: left;
        padding-left: 28px;
    }

    .shoppingCartItems button
    {        
        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
        background-color: rgba(255, 190, 9, 0.75);
        color: black;
        font-size: 14px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;
        
    }

    .shoppingCartItemRemove button
    {        
        margin-bottom: 8px;
        width: 20px;    
        vertical-align: middle;
        background-color:chocolate;
        color: black;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;        
    }    

    .shoppingCartItems button:hover
    {     
        filter: brightness(125%);
        cursor: pointer;
    }

    
    #checkoutItems
    {        
        left: -25%;        
        width: 50%;           
    }

    #checkoutItems .shoppingCartItem
    {        
        height: 50px;
    }

    #checkoutItems hr
    {
        width: 100%;
    }

    #checkoutItems  .shoppingCartItemName
    {        
        width: 150px;
    }

    #checkoutItems .shoppingCartItemPrice
    {
        width: 150px;

    }

    #checkoutItems .shoppingCartItemQuantity
    {
        width: 150px;
    }
    
    #checkoutItems .shoppingCartItemSubtotal
    {
        width: 150px;
    }

    

     .generalForm2
    {
        margin-top: 100px;
        margin-bottom: 100px;
        flex-direction: column;
        position: relative;        
        background-color: none;        
    }

    .generalForm2 h1
    {
        
        font-size: 20px;  
        margin-bottom: 0px;
        
    }

    .generalForm2 input
    {
        width: 300px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px;
        text-align: center;
        font-size: 20px;          
    }

    .generalForm2 button
    {        
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: center;
        vertical-align: middle;
        background-color: #3fb82a;
        color: black;
        font-size: 20px;  
        width: 80px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;        
    }

    .generalForm2 button:hover
    {
        filter: brightness(125%);
        cursor: pointer;
    }

    .generalForm2 p
    {        
        font-size: 12px;    
        color: red;    
    }

    #resetPasswordMessage
    {
        font-size: 12px;    
        color: black;    
    }

    #myAccount p
    {
        color:black;
    }
    
    .generalForm2 a
    {        
        margin-top: 20px;
        font-size: 15px;
            
        margin: 10px;
        margin-top: 15px;
        width: 100%;
        text-decoration: underline;
        color: #3fb82a;
    }

    #learnButton a
    {
        font-size: 20px;
        color:black;
        text-decoration: none;    
    }

    .generalForm2 h3
    {
        color: red;
    }

    

/* Specs for mail-list sign-up section */
.mailList
{
    margin-left: 15%;
    width: 75%
}

    /* mail-list heading specs */
    .mailList h1
    {
        display: inline-block;
        margin-top:  10px;
        margin-bottom:  75px;
        margin-right: 20px;
        font-size: 20px;
        letter-spacing: 5px;
        color: white;
        
    }

    /* mail-list text-input box specs */
    .mailList input
    {
        display: inline-block;
        width:30%;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom:  75px;
        padding: 5px;
        font-size: 15px;        
        letter-spacing: 2px;
        color:#26302b;
        transition: 1s;
    }

    /* mail-list button specs */
    .mailList button
    {        
        position: relative;
        display: inline-block;
        background:none;
        border:none;
        width:auto;
        height: 27.5px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom:  75px;
        font-size: 15px;
        letter-spacing: 2px;
        color: white;
        transition: 1s;
    }

    /* mail-list color and resize specs on mouse cursor hover */
    .mailList button:hover
    {
        color: cyan;
        font-size: 15.5px;
        cursor: pointer;
    }

/* Spacer before footer specs */
.spacer
{
    position: relative;
    margin-top: 100px;    
}

/* Footer section specs */
.footer
{
    position: relative;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 25px;
    background-color: white;
    text-align: center;    
}
    /* Links columns specs */
    .footer-flex-column
    {    

        position: relative;
        display: flex;
        display:inline-block;
        width: 40%;
    }

        .footer-flex-column ul
        {
            list-style-type: none;
        }

            /* Links column header specs */
            .footer-flex-column h1
            {
                margin-top: 25px;    
                font-size: 20px;
                letter-spacing: 5px;
                color:black;
            }

            /* Links specs */
            .footer-flex-column a
            {
                font-size: 12.5px;
                letter-spacing: 5px;
                color: black;
                text-decoration: none;    
                transition: 0.5s;
                margin-bottom: 10px;    
            }

            /* Link resize specs on mouse cursor hover */
            .footer-flex-column a:hover
            {
                color: #3fb82a; 
            }

    /* Social media container with all social media icons specs */
    .socialMediaContainer
    {
        width: 50px;
        height: 20px;
        margin-top: 25px;
        margin-left: 15%;

    }

    .socialMediaContainer a
    {
        position: relative;
        display: flex;
        display:inline-block;
    }

        /* Social media icon specs */
        .socialMediaIcon
        {
            height: 15px; 
            width: 15px; 
            
            margin-right: 10%;  
            transition: 0.5s;
        }        


    /* Copyright disclaimer specs */
    .copyrightDisclaimer h1
    {
        min-width: 30%;
        margin-top: 75px;        
        color:black;
        font-size: 10px;
        letter-spacing: 5px;    
    }

/* Message specs - used at top of Services, Blog and Contact pages */
.message
{
    padding-top: 75px;
    padding-bottom: 100px;
    width: 70%;
    margin-left: 15%;    
    margin-top: 50px;
    transition:0.5s
}

    /* Heading specs for all headings */
    .message h1, .message h2, .message h3
    {
        color: black;
        background-color: transparent;
        text-decoration: none;
    }

    /* Heading specs for main heading */
    .message h1
    {    
        font-size: 15px;
        letter-spacing: 5px;
        margin-bottom:  20px;
    }

    /* Heading specs for second heading on Service and Blog pages */
    .message h2
    {
        font-size: 40px;
        font-weight: lighter;
    }

    /* Contact details text specs on Contact page */
    .message h3
    {
        font-size: 20px;
        font-weight:100;
        text-align: center;
    }

    #privacyPolicy
    {
        text-align: left;
    }

    #privacyPolicy p
    {
        font-size:12px;
        color: black;
    }

    #privacyPolicy h1
    {
        text-align: left;
        font-size:18px;
    }

    #privacyPolicy h3
    {
        text-align: left;
        font-size:16px;
        font-weight: bold;
    }

    #copyrightPolicy
    {
        color: black;        
    }

    #copyrightPolicy h1
    {
        text-align: left;
    }

    .message p
    {
        text-align: left;
    }

/* Contact form specs */
.contactForm
{
    padding-top: 100px;
    padding-bottom: 200px;
    width: 85%;
    margin-left: 15%;    
    margin-top: 15px;
    transition:0.5s
}

    /* Heading specs */
    .contactForm h1
    {
        font-size: 20px;
        letter-spacing: 5px;
        margin-bottom:  40px;
        font-size: 15px;
        color: ghostwhite;
        background-color: transparent;
        text-decoration: none;

    }

    /* E-mail field specs */
    .contactForm input
    {
        display: inline-block;
        width:70%;
        padding: 5px;
        margin-right: 10px;
        margin-bottom:  37.5px;
        font-size: 15px;        
        letter-spacing: 2px;
        color:#26302b;
        font-family: 'myFont';    
    }

    /* Message field specs */
    .contactForm textarea
    {
        display: inline-block;
        width: 70%;
        height: 200px;
        padding: 5px;
        margin-right: 10px;
        margin-bottom:  37.5px;
        font-size: 15px;        
        letter-spacing: 2px;
        color:#26302b;
        font-family: 'myFont';   
    }

    /* Send button specs */
    .contactForm button
    {
        position: relative;
        display: inline-block;
        top: 40px;
        background:none;
        border:none;
        width:auto;
        vertical-align: bottom;
        height: 27.5px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom:  75px;
        font-size: 15px;
        letter-spacing: 2px;
        color: white;
        transition: 1s;
    }

    /* Send button resize and re-colour specs on mouse-cursor hover */
    .contactForm button:hover
    {
        color: cyan;
        font-size: 15.5px;
        cursor: pointer;
    }


/* Two panel/column row specs used in Services, About and Blog pages */
.twoPanelRow
{        
    margin-left: 5%;
    width: 95%;
    text-align: left;
    flex-direction: column;
    position: relative;
    display:inline-block;
}

.onePanelRow
{        
    margin-left: 5%;
    width: 95%;
    text-align: left;
    flex-direction: column;
    position: relative;
    display:inline-block;
}

    .twoPanelRow button, .onePanelRow button
    {
        background-color: #3fb82a;
        color: black;
        font-size: 15.5px;
        cursor: pointer;
        border-radius: 10px;
        border-style: none;
        padding: 10px 10px 10px 10px;
    }

    /* Left column panel specs */
    .leftColumnPanel
    {        
        flex-direction: row;
        position: relative;
        display:inline-block; 
        margin-top: 100px;        
        width: 46%;
        height: 400px;
        vertical-align: top;
        transition: 0.5s;
    }

    /* Right column panel specs */
    .rightColumnPanel
    {        
        margin-left: 5%;
        flex-direction: row;
        position: relative;
        display:inline-block;   
        margin-top: 100px;    
        width: 40%;
        height: 400px;
        transition: 0.5s;
        vertical-align: top;
    }

    /* Left column panel specs */
    .centerColumnPanel
    {        
        text-align: center;
        flex-direction: row;
        position: relative;
        display:inline-block; 
        margin-top: 100px;        
        width: 46%;
        height: 400px;
        vertical-align: top;
        transition: 0.5s;
    }

    #indexTwoPanelRow
    {
        width: 100%;
    }

    #indexOnePanelRow
    {
        width: 100%;
        text-align: center;
    }

    /* Left column panel specs */
    .indexLeftColumnPanel, .indexRightColumnPanel
    {        
        flex-direction: row;
        position: relative;
        display:inline-block; 
        margin-top: 150px;                
        width: 40%;
        margin-right: 4.75%;
        height: auto;
        vertical-align: top;
        transition: 0.5s;
        text-align: center;
    }

    /* Left column panel specs */
    .indexRightColumnPanel
    {        
        margin-left: 4.75%;
    }

    /* Left column panel specs */
    .indexCenterColumnPanel
    {        
        flex-direction: row;
        position: relative;
        display:inline-block; 
        margin-top: 150px;                
        width: 40%;
        margin-right: 4.75%;
        height: auto;
        vertical-align: top;
        transition: 0.5s;
        text-align: center;
    }


    #productImage:hover
    {
        transition: filter 0.1s ease-in-out; /* Smooth transition */        
        filter: brightness(90%); /* Original brightness */
    }

    #productTwoPanelRow ul
    {        
        color:black;
        font-size: 18px;
        margin-bottom: 25px;
    }

    #productTwoPanelRow ul li
    {        
        margin-left: 30px;
        color:black;
        padding-top:2.5px;
        padding-bottom:2.5px;
    }

    #productRightColumnPanel, #productLeftColumnPanel
    {
        height: auto;
    }
    /* Left column panel specs */
    #productRightColumnPanel img, #indexCenterColumnPanel img
    {        
        position: relative;
        display: inline-block;
        width: 100%;
        margin-bottom: 25px;
    }

    #indexTwoPanelRow img, #indexOnePanelRow img
    {
        width: 100%;            
    }

    #indexTwoPanelRow p, #indexOnePanelRow p
    {
        padding: 20px;
        color: black;    
        text-align: center;
    }

    #indexTwoPanelRow h1, #indexOnePanelRow h1
    {
        font-size: 20px;
        position: relative;
        display: inline-block;
        padding: 20px;
        text-align: left;
        font-weight: 300;
    }

    #indexTwoPanelRow h1:hover, #indexOnePanelRow h1:hover
    {
        text-decoration: underline;
    }

    #indexTwoPanelRow button, #indexOnePanelRow button
    {
        position: relative;
        display: inline-block;
        background-color: #3fb82a;
        color: black;
        font-size: 15.5px;
        cursor: pointer;
        border-radius: 10px;
        border-style: none;
        padding: 10px 10px 10px 10px;        
    }

    #indexTwoPanelRow button:hover, #indexOnePanelRow button:hover
    {
        filter: brightness(110%);
    }

    .indexSeeFullRange
    {
        width: 100%;
        text-align: center;       
    }

    .indexSeeFullRange a
    {
        color: black;
        font-size: 20px;       
    }

    .indexSeeFullRange a:hover
    {
         color: #3fb82a;  
    }

    .indexProductDetails
    {
        text-align:center;
    }
    
    #aboutTextPanel
    {
        width: 65%;
    }

    #aboutImagePanel
    {        
        width: 20%;
        text-align:center;        
    }

    #aboutImagePanel img
    {
        width:100%;
    }


    /* Prevents text panels from appearing in left column and images appearing in right column by default */ 
    .column1Text, .column2Image
    {
        visibility: hidden;
    }

    /* Text panel specs */
    .textPanel
    {
        border-top: 1px solid grey;  
        transition: 0.25s;
        width: 100%;
    }

    /* Text panel main heading specs on Services and About page */
    .textPanel h1
    {
        letter-spacing: 5px;
        margin-top: 15px;
        margin-bottom: 15px;    
        font-size: 20px;
        color: black;
    }

    /* Text panel main heading for Blog page */
    .textPanel h2
    {
        margin-top: 15px;
        margin-bottom: 15px;    
        font-size: 25px;  
        color: black;
    }

    /* Text panel date heading specs for blog page */
    .textPanel h3
    {
        margin-top: 15px;
        margin-bottom: 15px;    
        font-size: 15px;
        font-style: italic;
        color:black;        
    }

    /* Text panel paragraph specs */
    .textPanel p
    {
        color:black;
        font-size: 20px;
        line-height: 30px;
    }

    .textPanel button:hover
    {
        filter: brightness(110%);
    }

    #aboutImage
    {        
        width: auto;
    }

    /* If arriving via a link to specific item (e.g. specific service) page appears a bit further scrolled up than default */
    .anchor
    { 
        position: absolute;
        transform: translateY(-13vh);      
    }

    /* Range select specs on Range page */

    .rangeButtons
    {
        padding-top: 100px;         
        text-align: center;
        vertical-align: middle;
    }

    .rangeButtons a
    {
        margin-bottom: 5px;
        text-align: center;
        vertical-align: middle;
    }

    #staffMenuButtons
    {
        background-color:#3fb82a;
        color: black;
        border-radius: 25px;
        font-size: 16px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 100px;
    }
        .button
        {
            padding-bottom: 5px;
            display:inline-block;   
            background-color:transparent;
            width: 80px;                  
        }

            .button button
            {
                padding: 10px;
                background-color: #3fb82a;
                color: black;
                font-size: 16px;
                cursor: pointer;
                border-radius: 10px;
                border-style: none;                
                
                /*padding: 10px 10px 10px 10px;*/
            }

            .button a
            {
                color: black;
            }

        #readers button, #tableStyle2Stages button, #tableStyle2Reading button, #tableStyle2Spelling button
        {
            border-radius: 10px;
            border-style:none;
            font-size: 16px;
            margin: 1px;
        }

        #tableStyle2Reading button
        {
            width: 80px;
        }

        #readers button:hover, #tableStyle2Stages button:hover, #tableStyle2Reading button:hover, #tableStyle2Spelling button:hover
        {
            filter: brightness(125%);
            cursor: pointer;
        }

        .rangeButtons button:hover
        {
            filter: brightness(125%);
            cursor: pointer;
        }

        #staffMenuButtons:hover
        {
            filter: brightness(125%);
        }

        .searchForm 
        {
            margin-top: 35px;            
            margin-bottom: 35px;            
            text-align: center;
            vertical-align: middle;
            color: black;
        }

        .searchForm select
        {
            margin-right: 10px;
            height: 20px;
        }

        .searchForm label
        {
            margin-right: 10px;
        }

        .searchForm input
        {
            margin-right: 10px;
            height: 20px;
            width: 125px;
        }


        .searchForm button
        {

            background-color: gold;
            color: black;
            height: 24px;
            padding: 2px;
            cursor: pointer;
            
        }

            .searchForm button:hover
            {             
                filter: brightness(125%);                
            }
       



    /* Page select spects on Range page */

    .pageSelect
    {
        text-align: center;
        vertical-align: middle;
    }

        .previousPage
        {
            display:inline-block;   
            background-color:transparent;
        }

        .previousPage button
        {
            font-size: 30px;
            color:  white;
            background-color:transparent;
            border-style:none;
            padding-right: 15px;
        }

        .nextPage
        {
            display:inline-block;   
            background-color:transparent;
        }

        .nextPage button
        {
            font-size: 30px;
            color: white;
            background-color:transparent;
            border-style:none;
            padding-left: 15px;
        }
    
        .pageSelect button:hover
        {            
            filter: brightness(125%);
            cursor: pointer;
        }

/* Slideshow container specs on About page - Adapted from www.w3schools.com 'How TO - slideshow' */
.slideshow-container 
{
  top: 15%;
  width: 100%;
  position: relative;
  margin: auto;
}

    /* Hides images by default */
    .mySlides 
    {
      display: none;
    }

    /* Slideshow fading animation specs */
    .fade 
    {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    /* Sets opacity level range for fade animation */
    @keyframes fade 
    {
      from {opacity: .4}
      to {opacity: 1}
    }

/* History section specs on About page */
.history
{
    padding-top: 100px;
    padding-bottom: 100px;
    width: 55%;
    margin-left: 15%;    
    margin-top: 50px;
    transition: 0.5s;   
   
}

    /* Paragraph specs */
    .history p
    {
        color: ghostwhite;
        background-color: transparent;
        text-decoration: none;
        font-size: 20px;
        font-weight: lighter;
        transition: 0.12s;  
    }

h1
{
    color: black;
    font-size: 16px;
    text-align: center;
}

#tableStyle1 h1
{
    color: black;
    font-size: 16px;
    text-align: center;
}

.tableContainer, .textContainer
{    
    background-color: white;
    opacity: 0.8;    
    z-index: 100;        
    color: white;
    width: auto;
    
    position:relative;
    text-align: center;
}

.imageCentraliser
{
    width: 100%;
    text-align: center;

}

    .textContainer
    {
        overflow-y:auto;
    }

        #tableStyle2
        {
            visibility: visible;
            height: auto;
        }

        #tableStyle2 h1
        {
            color: black;
            font-size: 16px;
            text-align: center;
        }

        /* Table and text container heading / paragraph / content specs */
        .tableContainer p, .textContainer p, .tableContainer h1, .textContainer h1
        {
            padding-left: 20px;
            color: black;
        }

        /* General table specs */
        table
        {
            width: auto;
            width: 90%;
            left: 5%;
            border: 1px solid dodgerblue;
            color: black;
            position: relative;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #tableStyle2Reading
        {
            width: auto;
            width: 90%;
            left: 5%;
            border: 1px solid dodgerblue;
            color: black;
            position: relative;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #tableStory
        {
            border: none;
        }

        #toggleButtons
        {
            border: none;
        }

            /* Table heading specs */
            .tableHeading
            {                
                background-color: white;
                color: black;
            }

            /* Table row specs */
            tr
            {
                height: 25px;
            }

            /* Table heading for mobile */
            .tableHeadingMobile
            {                
                background-color: white;
                
                color: black;
            }

            #sentence1
            {
                font-weight: bolder;
                text-align: center;
            }

            #sentence2, #sentence3, #sentence4,  #sentence5,  #sentence6,  #sentence7,  #sentence8,  #sentence9,  #sentence10     
            {
                padding-left: 5%;
                font-weight: lighter;
                text-align: left;
            }

            h5
            {
                position: absolute;
                z-index: 100;
                color: black;
            }

            /* Table input specs */
            table input
            {                
                font-size: 20px;
                min-height: 40px;
                width: 200px !important;
                text-align: left;
                padding-left: 10px;                                
            }

            table #spellingAnswer1, #spellingAnswer2, #spellingAnswer3, #spellingAnswer4, #spellingAnswer5, #spellingAnswer6, #spellingAnswer7, #spellingAnswer8, #spellingAnswer9, #spellingAnswer10
            {
                background-color: lightsteelblue;
            }
            
            table .button
            {
                background-color: #3fb82a;
                color: black;                
                height: 40px;
                padding-left: 15px; 
                padding-right: 15px;
                padding: 2px;
            }

            #editButton
            {
                height: 20px;
            }

            table .button:hover
            {                
                filter: brightness(125%);
                
            }

            table #notCompleted
            {
                background-color: gray;
            }

            #storyTableCell
            {
                text-align: center;
            }
            
            
            .addButton
            {
                width: 100%;
                text-align: center;
            }
            .addButton button
            {
                margin-top: 15px;;
                padding:5px;
                border-radius:10px;
                background-color: red;
                color: black;
                border-style:none;   
                text-align:center;          
            }

            .addButton a
            {
                color: black;
            }

            .addButton button:hover
            {                
                filter: brightness(125%);
                
            }
            .addButton a:hover
            {             
                filter: brightness(125%);
                
            }
            
            #storyRow1Buttons, #storyRow2Buttons, #storyRow3Buttons, #storyRow4Buttons, #storyRow5Buttons, #storyRow6Buttons, #storyRow7Buttons, #storyRow8Buttons,  #storyRow9Buttons, #storyRow10Buttons
            {
                text-align: right;
                margin-right: 2.5%;
                padding-right: 2.5%;
            }

/* Form layout specs */
.formLayout 
{       
    margin: auto;
    margin-top: 60px;
    text-align: center;
    width: 40%;    
    color: black;
    padding: 8px 12px;
    text-decoration: none;
}

    /* Form heading specs  */
    .formLayout h1
    {
        color: black;
        font-size: 20px;
        letter-spacing: 10px;
        margin-bottom:  25px;
        text-align: center;
    }

    /* General form positioning specs e.g. for add and edit operations  */
    #generalForm
    {
        z-index: 500;
    }

    #generalForm button
    {
        background-color: gold;
        color: black;
        height: 24px;
        padding: 2px;
        cursor: pointer;       
        margin-bottom: 10px; 
    }

    #checkoutForm button
    {        
        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
        background-color: rgba(255, 190, 9, 0.75);
        color: black;
        font-size: 14px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;
        
    }

        .searchForm button:hover
        {            
            filter: brightness(125%);                
        }

        #generalForm #regularPostage, #generalForm #expressPostage, #generalForm #storePickup
        {
            width: 1.5%;            
        }

    /* Registration form positioning specs e.g. for add and edit operations  */
    #regForm
    {
        top: 30%;
    }

    /* Login form positioning specs */
    
    
    .generalForm2
    {
        text-align: center;
        left: 0%
    }

    #generalForm2 h6
    {
        margin-top:0px;
        color: black;
        font-size: 12px;
        margin-bottom: 2px;
    }

    .generalForm2 select
    {
        font-size: 16px;
        margin-bottom:10px;
        text-align: center;
        padding: 2.5px;
    }


    #cancelSubscription p
    {
        color: black;
        font-size: 16px;
        margin-bottom:10px;
        text-align: center;
        padding: 2.5px;
    }

    /* Span for displaying form processing messages e.g. processing error messages */ 
    .formLayout span
    {
        opacity: 0.9;
        background-color: white;        
        margin-bottom: 150px;
    }

    /* Form input and combo box specs */ 
    .formLayout input
    {
        border-style: solid;
        border-width:thin;
        display: inline-block;
        width:96.5%;
        margin-right: 10px;
        margin-bottom:  20px;
        padding: 5px;
        letter-spacing: 2px;
        color:#26302b;
    }

    .formLayout textarea
    {
        border-style: solid;
        border-width:thin;
        display: inline-block;
        width:96.5%;
        margin-right: 10px;
        margin-bottom:  20px;
        padding: 5px;
        letter-spacing: 2px;
        color:#26302b;
    }

    .formLayout select 
    {
        border-style: solid;
        border-width:thin;
        display: inline-block;
        width:100%;
        margin-right: 10px;
        margin-bottom:  20px;
        padding: 5px;
        letter-spacing: 2px;
        color:#26302b;
    }

    .formHeading
    {
        color:black;
    }


            .formLayout button
            {
                background-color: rgb(114, 100, 20);
                color: black;
            }

            .formLayout button
            {                
                filter: brightness(125%);
            }

    #editButton
    {
        text-align: center;
        
    }
    
            
#appContent, #tableStyle2Spelling, #tableStyle2Reading, #tableStyle2Stages, #spellingList
{
    display: none;

}

#modProgress
{
    width:auto;
    position: relative;
    display:inline-block;

}

    #contactFormButton
    {
        background-color: #3fb82a !important;
        color: black;
        font-size: 15.5px;
        cursor: pointer;
        border-radius: 10px;
        border-style: none;
        padding: 10px 10px 10px 10px;
    }

    #contactFormButton:hover
    {
        filter: brightness(130%);
    }

/* ------------ */

@media screen and (min-width: 1500px) 
{
    .leftColumnPanel
    {   
        width: 42.5%;
    }

    /* Right column panel specs */
    .rightColumnPanel
    { 
        width: 45%;
    }      
}

@media screen and (min-width: 1750px) 
{
    .leftColumnPanel
    {   
        width: 42.5%;
    }

    /* Right column panel specs */
    .rightColumnPanel
    { 
        width: 45%;
    }   
}

#markSpelling
{
    margin-top: 5px;
    position: relative;
    display:inline-block;
}    
    
    .container
    {
        position: relative;
        display: block;
        width: 100%;
        margin: auto;
        
    }

    .subcontainer
    {
        width: 100%;
        margin: auto;
    }

    .subcontainer style
    {
        width: 100%;
    }

    .grid
    {
        display: grid;        
        gap: 0.5rem;
        overflow-x: hidden;
        border-width: 20px;
        border-color: black;
        width: 100%;
    }

    .img
    {
        width: 80%;
        max-height: 100px !important;
        background-position: center;
        background-size: cover;
    }


    #rangeImage
    {
        width: 80%;
        min-height: 100px !important;
        background-position: center;
        background-size: cover;
    }

@media screen and (max-width: 1600px) 
{
    #aboutTextPanel
    {
        width: 60%;
    }

    #aboutImagePanel
    {        
        width: 28%;
        text-align:center;        
    }
}

@media screen and (max-width: 1400px) 
{
    #aboutTextPanel
    {
        width: 58%;
    }

    #aboutImagePanel
    {        
        width: 30%;
        text-align:center;        
    }
}

@media screen and (max-width: 1200px) 
{
    #aboutTextPanel
    {
        width: 53%;
    }

    #aboutImagePanel
    {        
        width: 36%;
        text-align:center;        
    }

        /* Left column panel specs */
    .indexLeftColumnPanel, .indexRightColumnPanel
    {        
        flex-direction: row;
        position: relative;
        display:inline-block; 
        margin-left: -5%;
        margin-right: -5%;
        margin-top: 100px;                        
        width: 100%;                
        height: auto;
        vertical-align: top;
        transition: 0.5s;
        text-align: center;
    }
}

/* SPECS FOR NARROW SCREENS (EG. MOBILES) */
@media screen and (max-width: 1000px) 
{    
    #indexTwoPanelRow h1, #indexOnePanelRow h1
    {
        font-size: 16px;
    }

    #indexTwoPanelRow button, #indexOnePanelRow button
    {
        position: relative;
        display: inline-block;
        background-color: #3fb82a;
        color: black;
        font-size: 14px;
        cursor: pointer;
        border-radius: 10px;
        border-style: none;
        padding: 10px 10px 10px 10px;        
    }

    #generalForm
    {
        width: 90%;
    }
    

 /* Displays mobile navigation menu button on narrower screens */    
    .mobileNavButton
    {
        top: 0px;
        visibility: visible;
        z-index: 0;
    }
    
    /* Mobile navigation menu specs on narrower screens */   
    #mobileNav    
    {
        top: 0;
        position: fixed;
        visibility: visible;
    }

        /* Hides the default navigation bar links container on narrower screens */  
    
    #linksList
    {
        visibility: hidden;        
        width: 0px;    
        height:0px;
        margin: 0px;
        padding: 0px;
        font-size: 0px;
    }
    
    #linksList a
    {
        visibility: hidden;        
        width: 0px;    
        height: 0px;
        margin: 0px;
        padding: 0px;
        font-size: 0px;
    }
    
    
    #shoppingCartLink
    {
        top: 0px;
        right: -30%;        
    }

    #shoppingCartLink img
    {
        filter: grayscale(3) contrast(3) brightness(0.1);
    }
    
    #shoppingCartLink img:hover
    {
        filter: grayscale(0) contrast(1) brightness(1);
        
    }

    .navbar
    {
        top: 1%;
    }

    #headerLogoContainer
{
    top: 40px;
    position: absolute;
    left: 5%;
    background-color: transparent;
}

    #headerLogo
    {        
        width: 75px;
        height: 75px;
        filter: brightness(120%);
        background-color:transparent;
    }


 .tableContainer, .textContainer
{
    overflow-y:unset;   
}

    .tableContainer td
    {
        margin: 0px;
        padding: 0px;        
    }

    #regularScreensOnly
    {
        display: none;        
        height: 0px;
    }

    #mobileScreensOnly
    {
        display: block;        
        height: 0px;
    }

    #mobileScreensOnly td
    {
        width: 25%;
    }

    #mobileScreensOnly #tableHeadingStyle2 td
    {
        width: 75%;
    }

    .leftColumnPanel
    {
        height: 100px;
    }

    .rightColumnPanel
    {
        height: 300px;
    }
     
    .rightColumnPanel img
    {
        margin-top: -40px;
        height:125%;
    }

    
    /* Hero video specs on Home page for narrower screens.  Widens image to prevent it being 'squished' and too short subsequently to function as a hero image */
    
       
    

    #heroPicture img
    {      
        overflow-x: hidden;  
        margin-top: 20px;    
        height: 500px;
    }

    /* Caption container over hero image  */
    .captionText 
    {        
        top: 70%;                            
    }

    .innerCaptionText h2
    {        
        font-size: 15px;                          
    }
    


    
    .shoppingCartItems
    {
        flex-direction: column;
        position: relative;
        display:inline-block;
        width: 95%;        
        margin-top:0px;    
    }

    #checkoutItems
    {        
        left: 0%;        
        width: 95%;           
    }

    #generalForm #regularPostage, #generalForm #expressPostage, #generalForm #storePickup
    {
        width: 2%;            
    }

    .shoppingCartItems hr
    {        
        padding:0%;               
    }

    .shoppingCartItems h2
    {        
        font-size: 14px;
        color:red;        
    }

    .shoppingCartItems h3
    {                
        
        font-size: 14px;        
        font-weight:100;
    }
    
    .shoppingCartItems
    {                
        margin-left: 0px;          
    }    

    .shoppingCartItemsHeadings
    {
        font-weight:bold;
        
    }

    .shoppingCartItem
    {        
        font: 10px;
        height: 10%;             
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
    }

    .shoppingCartItemName
    {        
        margin-right: 20px;        
    }

    .shoppingCartItemSize
    {
        margin-right: 20px;

    }
    .shoppingCartItemPrice
    {
        margin-right: 20px;

    }

    .shoppingCartItemQuantity
    {
        margin-right: 20px;
    }

    .shoppingCartItemQuantity input
    {
        width: 38px;
        text-align: left;
        padding-left: 28px;
    }

    .shoppingCartItems button
    {        

        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
        background-color: rgba(255, 190, 9, 0.75);
        color: black;
        font-size: 14px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;
        
    }

    .shoppingCartItemRemove button
    {        
        margin-bottom: 8px;
        width: 20px;
        text-align: center;
        vertical-align: middle;
        background-color:chocolate;
        color: black;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;        
    }    

    .shoppingCartItems button:hover
    {     
        filter: brightness(125%);
        cursor: pointer;
    }
    
    
        
    #tableMobile
    {
        display: inline-block;
        width: 100%;
    }

    #tableMobile td
    {
        display: inline-block;
        width: 50%;
    }

    #tableRegular
    {
        display: none;
    }
    
    /* Logo specs for narrower screens */
    .logo img
    {
        width: 60px;
        height: auto;
        position: absolute;
        top: -5%;  
        height: 60px;  
        left: 2.5%;
    }
    
    /* Displays mobile navigation menu button on narrower screens */    
    .mobileNavButton
    {
        visibility: visible;
        z-index: 0;
    }
    
    /* Mobile navigation menu specs on narrower screens */   
    #mobileNav    
    {
        top: 0;
        position: fixed;
        visibility: visible;
    }

    .shoppingCart
    {        
        margin-right: 65px;
        background-color: transparent;        
    }

    .shoppingCart img
    {
        
        margin-top:6px;
        height: 25px;
    }

    .captionText
    {
        width: 75%
    }

    #login
    {
        text-align: center;
    }


    #aboutTextPanel
    {
        width: 100%;
    }

    #aboutImagePanel
    {        
        display: hidden;
        width: 0%;
        height: 0%;
        text-align:center;        
    }



    /* Mobile navigation overlay specs on narrower screens */      
    .overlay 
    {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: white;
      overflow-x: hidden;
      transition: 0.5s;
    }
    
        /* Close button specs */
        .overlay .closebtn 
        {
          position: absolute;
          top: 20px;
          right: 45px;
          font-size: 60px;
        }

        /* Links container specs */
        .overlayContent 
        {
          position: relative;
          top: 25%;
          width: 100%;
          text-align: center;
          margin-top: 30px;
        }

        /* Links specs */
        .overlay a 
        {
          padding: 8px;
          text-decoration: none;
          font-size: 36px;
          color: black;
          display: block;
          transition: 0.3s;
        }

        /* Links color specs on mouse cursor hover */
        .overlay a:hover, .overlay a:focus 
        {
          color: #3fb82a;
        }
    
    /* First heading specs hero video caption on Home page for narrower screens */
    .captionText h1
    {
        font-size: 18px;
        letter-spacing: 9px;
    }

    /* Second heading font-resize for hero video caption on Home page for narrower screens */
    .captionText h2
    {
        font-size: 15px;
    }

    /* Link font-resize for hero video caption on Home page for narrower screens */
    .captionText a
    {
        font-size: 15px;
    }
    
    /* Left column width change on home page for narrower screens - columns will now be wider to ensure only one column can be displayed at a time - this prevents appearance of  two squished columns on mobile widths */
    .leftColumn 
    {
        width: 75%;
    }

    /* Right column width change on home page for narrower screens - columns will now be wider to ensure only one column can be displayed at a time - this prevents two squished columns on mobile widths */
    .rightColumn
    {
        width: 75%;
        margin-left: 0;
    }

    /* Column panel specs */
    .indexTwoColumnPanel, .indexOneColumnPanel
    {        
        margin-left: 0;        
        margin-top: 0;
        width: 95%;        
    }
     
    .twoPanelRow, .onePanelRow
    {
        margin-top: 0;
        margin-bottom: 0;
        margin-left:0;
    }

    #indexOnePanelRow
    {
        margin-top: -50px;
    }
    .indexLeftColumnPanel, .indexRightColumnPanel, .indexCenterColumnPanel
    {     
        margin-top: 100px;
        margin-left: 0;        
        margin-right: 0;        
        width: 100%;
    }

    /* Left column panel specs */
    #productRightColumnPanel img, #indexCenterColumnPanel img
    {        
        margin-bottom: 50px;
    }


    .message
    {
        margin-top: 0px;
    }

    .shoppingCartItems
    {
        margin-top: 100px;
    }

    

    /* Individual award re-specs for narrower screens */
    .awards ul li
    {
        width: 85%;
        height: auto;
        margin-bottom: 50px;
    }
    
    /* Mail-list sign up input field respecs on Home page for narrower screens  */
    .mailList input
    {
        width:55%;      
    }

    /* Mail-list sign up button respecs on Home page for narrower screens  */
    .mailList button
    {
        width:20%;
    }
    
    /* Copyright disclaimer re-specs for narrower screens */
    .spacer
    {
        height: 5%;
    }

    /* Copyright disclaimer re-specs for narrower screens */
    .copyrightDisclaimer h1
    {        
        font-size: 10px;
    }

    /* Left column panel re-specs on Services, About, and Blog pages.  Columns will now be wider to ensure only one column can be displayed at a time - this prevents two squished columns on narrower screens */
    .leftColumnPanel
    {
        width: 100%;
        height: auto;
    }

    .textPanel
    {
        width: 90%;
    }

    /* Right column panel re-specs on Services, About, and Blog pages.  Columns will now be wider to ensure only one column can be displayed at a time - this prevents two squished columns on narrower screens */
    .rightColumnPanel
    {
        margin-left: 0px;
        width: 95%;
        height: auto;
    }

        /* The below CSS ensure that on mobile screens, when scrolling, the items on the Blog page do not display as image -> text -> text -> image -> image etc., rather more consistently as text -> image -> text -> image -> text -> image etc.  */

        /* Makes visible any text in left column panels */
        .column1Text
        {
            display:block;
        }
    
        /* Hides any text in right column panels */
        .column2Text
        {
            display:none;
        }

        /* Makes visible any images in right column panels */
        .column2Image
        {
            display:block;
        }

        /* Hides any images in left column panels */
        .column1Image
        {
            display:none;
        }
    
    #aboutImagePanel
    {
        position: relative;
    }

    #aboutImage
    {        
        position: relative;
    }


    /* Slideshow container re-specs on About page for narrower screens - heightens the slideshow images so they can still display as hero images */
    .slideshow-container img
    {
        height: 350px;
    }   

    @media screen and (max-width: 500px) 
    {        
        #heroPicture
        {
            height: 200px;
        }

        #heroPicture img
        {
            position: relative;
            width: 110%;
            margin-left: -5%;
            height: auto;
            height: 225px;
            overflow-x: hidden;  
            object-fit: cover;
            object-position: top;
        }

        .captionText
        {
            display: none;
        }
        
        .captionTextMobile
        {
            margin-top: 100px;
            margin-bottom: -100px;
            display: inline-block;
            width: 100%;
            color: black;
            text-align: center;
        }
        
        .captionTextMobile a
        {
            color: black;
        }

        .captionTextMobile a:hover
        {
            color:#3fb82a;      
        }
    }

    @media screen and (orientation: portrait) 
    {
        /* Links specs */

        .footer-flex-column h1
        {    
            font-size: 16px;
        }

        .footer-flex-column a
        {    
            font-size: 10px;
        }

        #aboutTextPanel p
        {
            font-size: 16px;
        }
    }


}