*,
*:before,
*:after {
    box-sizing: border-box;
}

:root {
 --ProductColor: #ffffff;
}

html {
    font-size: 14px;
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    /* font-family: 'Montserrat', sans-serif; */

    font-family: 'Roboto', sans-serif;
}

body {
    /* background-color: rgb(250, 250, 250); */
    /* background-color: rgb(235, 235, 235); */
    color: #444;    
}

body.debug * {
    border: 1px dashed rgba(0, 0, 0, 0.1);
}

main {
    margin: 0em 1em;
}


.page-wrapper {
    /* max-width: 114rem; */
    min-width: 1360px;
    width: 100%;
    margin: 0 auto;
    /* border: 1px solid red; */
    padding: 0 2em;
    margin-bottom: 10px; 
}

@media print
{
.page-wrapper 
{
    min-width: 1100px !important;
    padding: 0 0em;
}
}

@page 
{
    margin: 0.3in;
}


.page-content {
    display: flex;
    justify-content: stretch;
    align-items: flex-start;

    /* background-color: white; */
    min-height: 50vh;
    padding-top: 1em;
}

.page-content main .promo {
    height: 224px;
    padding: 1em;
}

.page-content main .promo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.page-content main .catalog {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    justify-items: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

.page-content main {
    flex-grow: 1;
}

.page-content main .catalog img {
    width: 192px;
    height: auto;
    display: block;
    margin: 0.5em;
    padding: 0;
}

.sidebar {
    max-width: 19em;
    min-width: 19em;
    width: 100%;
    /* padding: 1em; */
    
}

.sidebar__widget {
    padding: 1em;
    width: 100%;
    margin-bottom: 1em;
    background-color: white;
}

.sidebar__widget--links .media-button:not(:last-child) {
    margin-bottom: 1em;
}

.sidebar__title {
    padding: 0.5em 0;
    margin: 0;
    text-align: center;
}

.sidebar__title.sidebar__title--letter {
    font-size: 1.5em;
}

.menu {
    display: flex;
    justify-content: stretch;
    justify-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu--vertical {
    flex-direction: column;
}

.menu .menu__item {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 1em;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    text-align: center;
}

.menu.menu--vertical .menu__item {
    padding: 0;
}

.menu.menu--vertical .menu__item .menu__link {
    padding: 0.5em;
}

.menu.menu--vertical .menu.menu--vertical .menu__item {
    padding-left: 2em;
}

.menu .menu__item .menu__link:hover {
    /* background-color: rgba(14, 122, 189, 0.25); */
    background-color: rgba(30, 30, 30, 0.1);
    /* border-right: 4px solid rgb(14, 122, 189); */
}

.menu.menu--vertical .menu__item {
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

.menu.menu--vertical .menu__item .menu__link {
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.menu .menu__label {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 0.5em;
}

.menu .menu__caption {
    position: relative;
    display: flex;
    justify-content: stretch;
    align-items: center;
    flex-grow: 1;
}

/* .menu.menu--vertical .menu__item a:before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f105';
    color: transparent;
    margin-right: 0.5em;
} */

.menu.menu--vertical .menu__item.has-submenu > .menu__caption .menu__link:before {
    color: inherit;
    font-family: 'Font Awesome 5 Pro';
    content: '\f105';
    font-size: 1em;
    /* color: transparent; */
    margin-right: 0.5em;
}

.menu.menu--vertical .menu__item > .menu__caption .menu__link:before {
    color: inherit;
    font-family: 'Font Awesome 5 Pro';
    content: '\f111';
    font-weight: bold;
    font-size: 0.65em;
    color: #AAAAAA;
    /* color: transparent; */
    margin-right: 0.5rem;
    /*transition: color 100ms ease-in-out;*/
}

.menu.menu--vertical .menu__item:hover > .menu__caption .menu__link:before {
    color: #159cd4;
}

.menu.menu--vertical .menu__item.has-submenu.active > .menu__caption .menu__link:before {
    content: '\f107';
}

#main-navigation-bar {
    height: 4em;
    background-color: white;
}

#main-navigation-bar .menu__item {
    justify-content: space-between;
    /* font-weight: bold; */
    /* background-color: rgb(245, 245, 245); */
    color: #444444;
    text-transform: uppercase;
    min-width: 8em;
    /* margin-right: 0.25em; */
}

#main-navigation-bar .menu__item:last-child {
    margin-right: 0em;
}

#main-navigation-bar .menu__item span {
    text-align: left;
    /* width: 60%; */
    color: inherit;
}

#main-navigation-bar .menu__item .fas {
    font-size: 1.75em;
    margin: 0 0.25em;
}

.menu.menu--colorfull {
    height: 4em;
}

.menu.menu--colorful .menu__item {
    border-top: 8px solid transparent;
}

/* Yellow */
.menu.menu--colorful .menu__item.menu__item--yellow {
    border-top-color: #fbce29;
}

.menu.menu--colorful .menu__item.menu__item--yellow .fas {
    color: #fbce29;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--yellow {
    background-color: #fbce29 !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--yellow .fas {
    color: #d3a423 !important;
}

/* Orange */
.menu.menu--colorful .menu__item.menu__item--orange {
    border-top-color: #f47f35;
}

.menu.menu--colorful .menu__item.menu__item--orange .fas {
    color: #f47f35;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--orange {
    background-color: #f47f35 !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--orange .fas {
    color: #c4682c !important;
}

/* Pink */
.menu.menu--colorful .menu__item.menu__item--pink {
    border-top-color: #eb4474;
}

.menu.menu--colorful .menu__item.menu__item--pink .fas {
    color: #eb4474;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--pink {
    background-color: #eb4474 !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--pink .fas {
    color: #af3448 !important;
}

/* Purple */
.menu.menu--colorful .menu__item.menu__item--purple {
    border-top-color: #a14196;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--purple {
    background-color: #a14196 !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--purple .fas {
    color: #61275a;
}

.menu.menu--colorful .menu__item.menu__item--purple .fas {
    color: #a14196;
}

/* Purple Dark */
.menu.menu--colorful .menu__item.menu__item--purple-dark {
    border-top-color: #5f499b;
}

.menu.menu--colorful .menu__item.menu__item--purple-dark .fas {
    color: #5f499b;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--purple-dark {
    background-color: #5f499b !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--purple-dark .fas {
    color: #342857 !important;
}

/* Blue Dark */
.menu.menu--colorful .menu__item.menu__item--blue-dark {
    border-top-color: #4d60aa;
}

.menu.menu--colorful .menu__item.menu__item--blue-dark .fas {
    color: #4d60aa;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--blue-dark {
    background-color: #4d60aa !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--blue-dark .fas {
    color: #241938 !important;
}

/* Blue */
.menu.menu--colorful .menu__item.menu__item--blue {
    border-top-color: #0e79bd;
}

.menu.menu--colorful .menu__item.menu__item--blue .fas {
    color: #0e79bd;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--blue {
    background-color: #0e79bd !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--blue .fas {
    color: #0a4a86 !important;
}

/* Blue Light */
.menu.menu--colorful .menu__item.menu__item--blue-light {
    border-top-color: #159cd4;
}

.menu.menu--colorful .menu__item.menu__item--blue-light .fas {
    color: #159cd4;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--blue-light {
    background-color: #159cd4 !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--blue-light .fas {
    color: #1471af !important;
}

/* Green Aqua */
.menu.menu--colorful .menu__item.menu__item--green-aqua {
    border-top-color: #41b9be;
}

.menu.menu--colorful .menu__item.menu__item--green-aqua .fas {
    color: #41b9be;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--green-aqua {
    background-color: #41b9be !important;
    color: white !important;
}

.menu.menu--colorful .menu__item.menu__item--active.menu__item--green-aqua .fas {
    color: #328492 !important;
}

.main-navigation {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    height: 4em;
    background-color: white;
}

.main-navigation a {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    text-align: center;
    border-top: 6px solid black;
}

.main-navigation a i {
    font-size: 2em;
    margin-left: 0.5em;
    /* margin-right: -0.25em; */
}

.main-navigation a:last-child {
    margin-right: 0;
}

header {
    position: relative;
    height: 10em;
}

.announcements-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container {    
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 19em;
    width: 100%;
}

.logo {
    max-width: 16em;
    width: 100%;
    height: auto;
    /* margin: 1em 0; */
    margin-left: 8em;
}

.logo__decal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}

.logo__decal_a {
    left: -8em;
    top: -15em;
    width: 28em;
    height: auto;
	transform: rotate(-50deg);
}

.logo__decal_b {
    width: 30em;
    height: auto;
    left: -4em;
    top: 0em;
}

.gabItemForm {
    border: 1px solid rgb(230, 230, 230);
    padding: 0.5em;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.button {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 0.875em;
    margin-bottom: 0.5em;
    border: none;
}

.button:disabled, .button.is-disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.button.button--wide {
    width: 100%;
}

.button.button--primary {
    background-color: #0e79bd;
    color: white;
}

.button.button--secondary {
    background-color: #4d60aa;
    color: white;
}

.button.button--tertiary {
    background-color: #41b9be;
    color: white;
}

.button.button--alternative {
    background-color: #a14196;
    color: white;
}

.button.button--debug {
    background-color: #3b3b3b;
    color: white;
    position: relative;
    overflow: hidden;
}

.button.button--debug:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: bold;
    content: '\f6a4';
    position: absolute;
    right: 0;
    bottom: -0.25em;
    font-size: 3em;
    opacity: 0.3;
}




.boxshadow-wrapper {
    /* box-shadow: 0px 4px 6px 0px rgba(30, 30, 30, 0.1); */
}

.media-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 1em 1em 0em;
    text-decoration: none;
    overflow: hidden;
    border-radius: 3px;
    min-height: 5.5em;
    transition: transform 100ms ease-in-out;
    /* cursor: pointer; */
}

a.media-button {
    cursor: pointer;
}

.media-button.media-button--hover:hover {
    /* transform: translateX(-1em); */
    transform: scale(1.05, 1.05);
}

.media-button.media-button--primary {
    background-color: #0e79bd;
    color: white;
}

.media-button.media-button--secondary {
    background-color: #4d60aa;
    color: white;
}

.media-button img {
    position: absolute;
    left: -3em;
    /* top: 50%;
    transform: translateY(-50%);     */
    bottom: -0.5em;
    width: 6em;
    height: auto;
}

.media-button dl {
    margin: 0;
    padding: 0;
    margin-left: 3em;
    text-align: right;
    /* z-index: 1; */
}

.media-button dl dt {
    margin: 0;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.media-button dl dd {
    margin: 0;
    padding: 0;
    /* max-width: 10em;  */
    margin-left: auto;
    text-align: right;
}

ul.top-products {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875em;
}

ul.top-products li {
    text-decoration: none;
    color: inherit;
    width: 100%;
    display: inline-flex;
    margin-bottom: 0.25em;
}

ul.top-products a {
    margin-right: auto;
    text-decoration: none;
    color: inherit;
}

ul.top-products .label {
    margin: 0 0.25em;
}

.label {
    font-size: 0.75em;
    text-align: center;
    border-radius: 1px;
    display: inline-block;
    padding: 4px;
    line-height: 1em;
}

.label.label--circle {
    border-radius: 100%;
    width: 2em;
    height: 2em;
    line-height: 1em;
    display: flex;
    justify-items: center;
    align-items: center;
}

.label.label--primary {
    background-color: #0e79bd;
    color: white;
}

.label.label--black {
    background-color: #222222;
    color: white;
}

/*  */

.product {
    width: 100%;
    max-width: 12em;
}

.product .product__featured img {
    width: 100%;
    height: 12em;
    object-fit: cover;
}

.product .product__details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    padding-bottom: 2em;
    margin-bottom: 1em;
}

.product .product__title {
    text-align: center;
}

.product__details .product__features {
    list-style: none;
    margin: 0.5em 0;
    padding: 0;
    font-size: 0.875em;
}

.product__details .product__price {
    position: absolute;
    bottom: 0;
    left: 0;
}

.product__details .product__amount {
    position: absolute;
    bottom: 0;
    right: 0;
}

form {
    margin-bottom: 0;
}

.login-widget input {
    width: 100%;
}

.login-widget form {
    margin: 0;
}

.hidden {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    transition: background-color 0.25s linear;
    z-index: 50;
}

.modal-overlay--hidden {
    pointer-events: none;
    background-color: transparent;
}

@keyframes modal-grow-in {
    from {
        transform: translate(-50%,-50%) scale(0, 0);
    }
    to {
        transform: translate(-50%,-50%) scale(1, 1);
    }
}

@keyframes modal-grow-out {
    from {
        transform: translate(-50%,-50%) scale(1, 1);
    }
    to {
        transform: translate(-50%,-50%) scale(0, 0);
    }
}

.modal {
    position: fixed;
    background-color: white;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    z-index: 101;

    top: 50%; 
    left: 50%;
    
    animation: modal-grow-in 0.2s ease-in-out forwards;
}

.modal.modal--hidden {
    animation: modal-grow-out 0.2s ease-in-out forwards;
}

.modal__header {
    display: flex;
    align-items: center;
    padding: 1em;
}

.modal.modal--dark .modal__header {
    background-color: #222;
    color: white;
}

.modal.modal--dark .modal__options a {
    color: white;
}

.modal__title {
    margin: 0;
}

.modal__content {
    flex-grow: 1;
}

.modal__options {
    font-size: 1.5em;
    line-height: 1em;
    margin-left: auto;
}

.modal__options a {
    margin-left: 1em;
    text-decoration: none;
}

/* .search-input {
    position: relative;    
}

.search-input input {
    width: 100%;
    height: 100%;
    padding-right: 2em;
}

.search-input button {
    border: none;
    background-color: rgb(230, 230, 230);
    padding: 0 0.5em;
    position: absolute;
    right: 0em;
    top: 0em;
    height: 100%;
    font-size: 1.25em;
    color: inherit;
    cursor: pointer;
    margin: 1px;
} */

.search-input {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-wrap: nowrap;
}

.search-input input {
    flex-grow: 1;
    height: 100%;
    width: 100%;
    min-width: 0;
}

.search-input button {
    border: none;
    background-color: rgb(230, 230, 230);
    padding: 0 0.5em;
    height: 100%;
    font-size: 1.25em;
    color: inherit;
    cursor: pointer;
    /* min-width: 2.125em; */
} 



.card.card--product {
    max-width: 224px;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: rgb(245, 245, 245); */
}

.card {
    margin: 0.8em;
    display: flex;
    flex-direction: column;
    background-color: white;
    /* box-shadow: 0px 4px 6px 0px rgba(30, 30, 30, 0.1); */
    border-bottom: 1px solid rgb(230, 230, 230);
    padding-bottom: 1em;
}

.card .card__featured {
    
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 -1em;
   
    height: 224px;
    background-color: var(--ProductColor);
}

.card .card__featured img {
    object-fit: contain;
    /*object-position: bottom;*/
    /*
    width: 100%;
    height: 100%;
    */
}   

.card .card__body {
    flex-grow: 1;
    padding: 0 1em;
}

.card.card.card--product .product__features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.card.card.card--product .product__features li {
    margin-bottom: 0.5em;
}

.card.card.card--product .product__features li i {
    min-width: 1.25em;
    text-align: right;
    opacity: 0.75;
}

.products-catalog {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.slide-wrapper {
    position: absolute;
    top: 0;
    left: 0;        
    display: flex;

    width: 100%;
    height: 100%; 

    transition: left ease-in-out 0.6s;  
}

.slide {
    flex: 0 0 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.slide img {
    width: 100%;
}

.slider-container {
    display: flex;
    justify-content: center;
    height: 240px;
}

.slider {
    position: relative;
    /* width: 100%; */
    overflow: hidden;
    border-radius: 3px;
    max-width: 1600px;
    height: 100%;
    width: 100%;
}

.slide--featured-product {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.slide--featured-product img {
    object-fit: cover;
    width: 14em;
    height: 14em;
    border-radius: 3px;
}

.slide--featured-product > div {
    margin: 1em;
}

.slider__controls {
    padding: 0.5em;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    position: absolute;
    list-style: none;
    display: flex;
    z-index: 100;

    left: 1em;
    bottom: 0;
    /* transform: translateX(-50%); */
}

.slider__controls li {      
    opacity: 0.75; 
    background-color: white;
    /* border: 4px solid white; */
    /* box-shadow: 0px 0px 1px 1px black; */
    border-radius: 50%;
    width:  1em;
    height: 1em;
    margin: 0.25em 0.5em;
    cursor: pointer;

    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
}

.slider__controls li.is-active {
    transform: scale(1.25);
    opacity: 1; 
}

@media not print {
    .only-print {
        display: none;
    }
}

@media print {
    .hide-print {
        display: none !important;
    }
}

.tabs {
    display: flex;
}

.flash-message {	
    display: flex;
    place-items: center;
    padding: 1em;
    margin-bottom: 1em;
    background-color: white;
    
    
    color: #444;
    
    position: relative;
    overflow: hidden;
}

.flash-message > .flash-message__decal {
    position: absolute;
    font-size: 4em;
    
    right: -0.25em;
    z-index: 0;
    opacity: 0.25;
}

.flash-message > .flash-message__body {
    z-index: 1;
}

.flash-message.flash-message-danger {
    background-color: rgb(249, 65, 68);
    color: #ffe7e7;
}

.flash-message.flash-message-warning {
    background-color: rgb(248, 150, 30);
    color: #fffdfc;
}

.flash-message.flash-message-info {
    background-color: rgb(39, 125, 161);
    color: #edfaff;
}

.flash-message.flash-message-success {
    background-color: rgb(67, 170, 139);
    color: #edfaff;
}

.flash-message.flash-message-critical {
    background-color: #333;
    color: white;
}

.flash-message.flash-message-critical > .flash-message__decal {		
    color: white;
}

.flash-message > span[role="close"] {
    z-index: 1;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.05);		
    display: inline-flex;
    place-items: center;
    place-content: center;
    margin: 0.5em;
    min-width: 2em;
    min-height: 2em;
    text-align: center;
    margin-left: auto;		
}


.ribbon {
    position: relative;
    margin: 0 auto 20px;
    padding: 15px 40px;
    text-align: center;		
}

.ribbon::before, .ribbon::after {
    content: '';
    width: 20px;
    height: 100%;		
    
    position: absolute;
    z-index: -1;
    top: 5px;
    
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);
            
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.ribbon::before {
    left: -15px;		
}

.ribbon::after {
    right: -15px;		
    transform: scaleX(-1); /* flip horizontally */
}

.ribbon--golden {		
    background: #f1c66d;
    color: #532700;		
}

.ribbon--golden::before, .ribbon--golden::after {
    background-color: #d5ae5d;
    background-image: linear-gradient(45deg, transparent 50%, #7f6632 50%);
}

.ribbon--purple {		
    background: #5f499b;
    color: #dbd4ef;		
}

.ribbon--purple::before, .ribbon--purple::after {
    background-color: #443275;
    background-image: linear-gradient(45deg, transparent 50%, #241c3b 50%);
}