* {
    font-family: Arial, Helvetica, sans-serif;            
    margin: 0px;
    padding: 0px;
}   

html {
    -webkit-text-size-adjust: none;
}
                    
.fs10 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; }        
.fs13 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.fs15 { font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.fs16 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
.fs17 { font-family: Arial, Helvetica, sans-serif; font-size: 17px; }
.fs18 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; }
.fs20 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; }        
.fs25 { font-family: Arial, Helvetica, sans-serif; font-size: 25px; }
.fs30 { font-family: Arial, Helvetica, sans-serif; font-size: 30px; }

a { color:#000000; } 
a:visited { color:#000000; } 
a:active { color:#000000; } 
a:hover { color:#000000; } 

button {
    background-color: rgba(0,0,0,0.0); /* transparent */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;            
}

.MainContainer {
    position: relative;
    margin: auto;
    margin-bottom: 30px;
    width: 1000px;
    height: auto;
    min-height: 600px;
    border-top: 1px solid black;
    box-sizing: border-box;    
}

.HeaderContainer {
    display: flex;
    text-align: start;
    max-height: 150px;
    background-color: #fffcf1;
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-sizing: border-box;  
    
/*    background-color: aqua;*/
}       
    .HeaderContainer > .LogoFrame {
        vertical-align: top; 
        position: relative; 
        display: inline-block; 
        flex-basis: 100%; 
        background-color: none; 
    }
    .HeaderContainer > .LogoFrame > img {
        vertical-align: bottom; 
        position: relative; 
        display: inline-block; 
        width: 100%;
        max-width: 629px;
        max-height: 150px;
        background: none; 
        height: auto; 
    }
    .HeaderContainer > .ShoppingcartFrame {
        flex-basis: 129px;
        min-width: 129px;
        text-align: end;
        background-color: none;
        
/*        background-color: lightblue;*/
    }
        .HeaderContainer > .ShoppingcartFrame > .ShoppingbagContainer {
            display: inline-block;
            width: 100%;
            height: 100%;
            max-width: 129px;
            background-image: url(pics/main_header_shoppingbag_240206.jpg);
            background-size: cover;
        }                
            .HeaderContainer > .ShoppingcartFrame > .ShoppingbagContainer > .ShoppingbagFrame {
                padding: 0px 0px;
                width: 100%;
                height: 100%;  
                text-align: center;
                
/*            background-color: lightcoral;*/
            }    
                .HeaderContainer > .ShoppingcartFrame > .ShoppingbagContainer > .ShoppingbagFrame > .ShoppingbagText {
                    padding: 0px 0px;
                    margin-top: 42%;
                    margin-right: 14%;                    
                    height: 40%;
                    width: 48%;
                    color: black;
                    font-size: 22px;
                    background-color: rgba(255, 245, 210, 0.8);;
                    border: 1px solid black;
                    border-radius: 50%;
                    box-sizing: border-box;
                    transition: 0.5s
                }                        


.StatusContainer {
    display: flex;
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 50px;
    color: white;
    background-color: #242424;
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-sizing: border-box;    
    transition: 0.5s;
}     
    .StatusContainer > .MenuheaderFrame {
        display: flex;
        position: inherit;
        margin: 0px;
        padding: 0px;
        width: 200px;
        min-width: 200px;
        height: auto;
        background-color: none;
        overflow: hidden;
    }       
        .StatusContainer > .MenuheaderFrame > .MenuLabel {
            text-align: start;
            padding: 0px 10px;
            min-width: 150px;
            color: white;
            font-size: 16px;
            background-color: none;
            cursor: default;
        }
        .StatusContainer > .MenuheaderFrame > .MenuIcon {
            display: none;
            padding: 0px 0px;
            width: 50px;
            color: white;
            font-size: 22px;
            background-color: #ffa91f;
            transition: 0.5s;
        }
        .StatusContainer > .MenuheaderFrame > .MenuIcon:hover {
            background-color: #000000;
        }
    .StatusContainer > .StatusbuttonFrame {
        display: flex;
        justify-content: flex-end;
        position: inherit;
        margin: 0px;
        padding: 0px;
        flex-basis: 100%;
        height: auto;
        background-color: none;
    }     
        .StatusContainer > .StatusbuttonFrame > .StatusButton {
            padding: 0px 0px;
            width: 150px;
            color: white;
            font-size: 16px;
            background-color: none;
            transition: 0.5s;
        }      
        .StatusContainer > .StatusbuttonFrame > .StatusButton:hover {
            background-color: #313131;
        }    
        .StatusContainer > .StatusbuttonFrame > .StatusCartButton {
            padding: 0px 0px;
            width: 150px;
            color: white;
            font-size: 16px;
            background-color: none;
            transition: 0.5s;
        }      
        .StatusContainer > .StatusbuttonFrame > .StatusCartButton:hover {
            background-color: #313131;
        }                          
        .StatusContainer > .StatusbuttonFrame > .ToggleButtonVisibility {
            display: inline-block;
        }
    .StatusContainer > .StatusHoverContainer {
        display: block;
        visibility: hidden;
        position: absolute;
        overflow: hidden;
        z-index: 2;
        top: 50px;
        right: 0px;
        width: 797px;
        height: 0px;
/*        opacity: 0.95;*/
        opacity: 0;
        transition: 0.5s;

/*        background-color: lightgreen;*/
    }
        .StatusContainer > .StatusHoverContainer > .InformationContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;  
            
/*            background-color: lightcoral;*/
        }
            .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;    
                width: 100%;
                max-width: 715px; 
                padding: 30px 0px 30px 0px;
                margin-bottom: 20px;
                background-image: linear-gradient(to bottom left, #fff1e6, #ffffff, #fff9ed);                
                box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(0, 0, 0, 0.3);
                border-radius: 10px;
                
/*                background-color: lightgreen;*/
            }
                .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .InformationText {
                    display: block;
                    width: 100%;
                    max-width: 600px;
                    height: auto;
                    margin: 0px 10px 30px 10px;
                    padding: 0px;                    
                    color: #000;
                    font-size: 22px; 
                    font-weight: 400; 
                    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                    line-height: 40px;
                    text-align: center;

/*                    background-color: lightblue;*/
                }   
                    .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .InformationText > .TodayContainer {
                        display: block;
                        width: auto;
                        padding: 10px 80px;
                        margin: 15px 5px 5px 5px;
                        border: 1px solid rgba(0, 0, 0, 0.2);
                        border-radius: 10px;
                        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
                        transition: 0.5s;
                    }
                .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .ButtonHide {
                    display: block;
                    width: 150px;
                    height: 50px;
                    text-decoration: none;
                    background-color: #fffcdc;
                    border: 1px solid #aaa;
                    border-radius: 5px;
                    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
                    color: #000;
                    font-size: 16px;
                    transition: 0.5s;                                                                                                    
                }      
                .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .ButtonHide:hover {
                    background-color: #fdd5a2;                                                        
                }
    .StatusContainer > .ToggleStatusVisibility {
        visibility: visible;
        height: 590px;
        opacity: 1;
        transition: 0.5s;
    }

.ColorCodeOpen {
    background-color: rgba(0, 255, 0, 0.1);
}
.ColorCodeClosed {
    background-color: rgba(255, 0, 0, 0.1);
}

.ContentContainer {
    display: flex;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-sizing: border-box;
}      
    .ContentContainer > .MenuFrame {
        position: inherit;
        margin: 0px;
        padding: 0px;
        width: 200px;
        min-width: 200px;
        height: auto;
        min-height: 400px;
/*        background-color: #fff3ea;*/

/*        background-image: linear-gradient(to bottom left, #fff1e6, #ffffff, #fff9ed);*/
        background-image: linear-gradient(#fff6e4, #fff8e8);
        
        border-right: 1px solid black;
        transition: 0.5s;
        overflow: inherit;
    }
        .ContentContainer > .MenuFrame > .MenuContainer {
            display: flex;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: auto;
            min-height: 51px;
            background-color: none;
            overflow: hidden;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        }    
            .ContentContainer > .MenuFrame > .MenuContainer > a {
                display: inline-block;
                margin: 0px;
                padding: 16px 10px;
                flex-basis: 100%;
                height: auto;
                border: none;
                text-align: start;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);                
                text-decoration: none;
                transition: 0.5s;
            }     
            .ContentContainer > .MenuFrame > .MenuContainer:hover a {
                background-color: #ffd5b6;
            }
            .ContentContainer > .MenuFrame > .MenuContainer:hover .MenuButton {
                background-color: #ffd5b6;
            }
            .ContentContainer > .MenuFrame > .MenuContainer > .MenuLabel {
                position: inherit;
                margin: 0px;
                padding: 0px;
                padding-left: 10px;
                flex-basis: 100%;
                height: auto;
                text-align: start;
                font-size: 16px;
                color: #000000;
                background-color: none; 
                cursor: default;
            }
            .ContentContainer > .MenuFrame > .MenuContainer > .MenuButton {
                position: inherit;
                margin: 0px;
                padding: 0px;
                padding-bottom: 0px;
                width: 50px;
                min-width: 50px;
                height: auto;
                font-size: 25px;
                color: #000000;
                transition: 0.5s;
            }                   
            .ContentContainer > .MenuFrame > .MenuContainer > .CloseMenuButton {
                position: inherit;
                margin: 0px;
                padding: 0px;
                padding-bottom: 3px;
                width: 50px;
                min-width: 50px;
                height: auto;
                font-size: 25px;
                background-color: #ffbf67;
                transition: 0.5s;
            }  
            .ContentContainer > .MenuFrame > .MenuContainer > .CloseMenuButton:hover {
                color: white;
                background-color: #313131;
            }
        .ContentContainer > .MenuFrame > .ToggleVisibility {
            display: none;
        }
        .ContentContainer > .MenuFrame > .SearchContainer {
            display: flex;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: auto;
            min-height: 50px;
            background-color: white;
        }        
            .ContentContainer > .MenuFrame > .SearchContainer > .Searchbox {
                width: 100%;
                padding: 0px;
                padding-left: 10px;
                margin: 0px;
                font-size: 16px;
                border: none;
                outline: none;
                transition: 0.5s;
            }  
            .ContentContainer > .MenuFrame > .SearchContainer > .SearchboxAlert {
                width: 100%;
                padding: 0px;
                padding-left: 10px;
                margin: 0px;
                font-size: 16px;
                background-color: #ffc9c9;
                border: none;
                outline: none;
                transition: 0.5s;
            }              
        .ContentContainer > .MenuFrame > .SubItemsContainer {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: auto;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            
/*            background-color: lemonchiffon;*/
        }     
            .ContentContainer > .MenuFrame > .SubItemsContainer > a {
                text-decoration: none;
                background-color: #fff7f1; 
/*                border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
                transition: 0.5s;
            }
            .ContentContainer > .MenuFrame > .SubItemsContainer > a:hover {
                background-color: #fff0e4;                                
            }
                .ContentContainer > .MenuFrame > .SubItemsContainer > a > .SubItemFrame {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 90%;
                    height: 40px;
                    margin-left: 10%;
                }
                    .ContentContainer > .MenuFrame > .SubItemsContainer > a > .SubItemFrame > .SubItemText {
                        display: block;
                    }
                
        .fs_SubItemText { font-size: 16px; color: rgba(0, 0, 0, 0.8); }
            
@media screen and (max-width: 1000px) {

    .StatusContainer > .StatusHoverContainer {
        width: 100%;
    }
    
    .StatusContainer > .ToggleStatusVisibility {
        height: 590px;
    }
    
            .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame {
                margin: 0px 10px 20px 10px;
            }
                    
}

@media screen and (max-width: 600px) {

    .StatusContainer > .ToggleStatusVisibility {
        height: 530px;
    }
        
            .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame {
                padding: 22px 0px 30px 0px;
                margin: 0px 5px 20px 5px;
            }    
                .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .InformationText {
                    width: 100%;
                    margin: 0px 5px 20px 5px;                
                    line-height: 35px;
                    font-size: 20px;
                }        
                    .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .InformationText > .TodayContainer {
                        width: auto;
                        padding: 10px 0px;
                        margin: 15px 5px 5px 5px;
                    }

}

@media screen and (max-width: 400px) {

        .StatusContainer > .StatusbuttonFrame > .StatusButton:hover {
            background-color: #242424;
        }    
        .StatusContainer > .StatusbuttonFrame > .StatusCartButton:hover {
            background-color: #242424;
        }     
    
    .StatusContainer > .ToggleStatusVisibility {
        height: 530px;
    }
    
            .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame {
                padding: 20px 0px 30px 0px;
                margin: 0px 5px 30px 5px;
            }    
                .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .InformationText {
                    width: 100%;
                    margin: 0px 5px 20px 5px;                
                    line-height: 35px;
                    font-size: 18px;
                }
                    .StatusContainer > .StatusHoverContainer > .InformationContainer > .InformationFrame > .InformationText > .TodayContainer {
                        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
                    }

}