:root {--grey-light:#efefef;--grey-dark:darkgrey}
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.bg-red {background-color:red}
.bg-black {background-color:black}
.bg-lightgrey {background-color:#efefef}

.text-red {color:red}

.text-title {font-family:'Titillium Web',sans-serif}
.text-p {font-family:'Poppins',sans-serif}

.text-justify {text-align:justify}

.btn-red {background-color:red;color:white;border-radius:0;font-family:'Titillium Web',sans-serif}
.btn-red:hover {background-color:black;color:white}
.btn-grey {background-color:var(--grey-dark);color:white;border-radius:0;font-family:'Titillium Web',sans-serif}
.btn-grey:hover {background-color:black;color:white}
.btn-black:hover {background-color:var(--grey-light);color:var(--grey-dark)}

.form-control, .form-select, .btn.btn-outline-secondary {border-radius:0}

.carousel-indicators button.active {background-color:red}

.modal-backdrop.show {opacity:0.75}

#header {background-color:black;font-family:'Poppins',sans-serif;color:white;position:sticky;top:0;left:0;right:0;z-index:5}
#logo, #mainMenuRow {transition:all 0.2s ease}
#mainMenu .nav-link {color:white;font-size:1rem;padding-left:2rem;padding-right:2rem;text-transform:uppercase}
#mainMenu .dropdown-menu {background-color:black;border-radius:0;padding:1rem;width:500px}
#mainMenu .mainMenuSubFamily {color:white;text-transform:uppercase;text-decoration:none;transition:all .5s}
#mainMenu .mainMenuSubFamily:hover {color:grey}
#mainMenu .mainMenuSubFamily .mainMenuSubFamilyImage {width:100%;height:0;padding-top:100%;background-size:cover;background-position:center}
#mainMenu .mainMenuSubFamily .mainMenuSubFamilyImage:after {position:absolute;content:'';width:100%;height:5px;left:0;bottom:0;transition:all .5s}
#mainMenu .mainMenuSubFamily:hover .mainMenuSubFamilyImage:after {background-color:red}
#header.stuck {top:-22px;box-shadow:0 -2px 20px 4px rgba(0,0,0,.3)}
#header.stuck #logo {height:40px}
#header.stuck #mainMenuRow {padding-top:0!important;padding-bottom:0!important}

#langMenu .dropdown-menu {min-width:fit-content}
#langMenu .dropdown-item {color:white}
#langMenu .dropdown-item:hover {background-color:transparent;color:red}
#langMenu .dropdown-item.currentLang {font-weight:700}

#channelMenu .dropdown-menu {min-width:fit-content}
#channelMenu .dropdown-item {color:white}
#channelMenu .dropdown-item:hover {background-color:transparent;color:red}
#channelMenu .dropdown-item.currentChannel {font-weight:700}

#cartCounter {display:none;position:absolute;left:100%;top:0;background-color:red;color:white;transform:translate(-50%,-50%);border-radius:50rem;font-size:.75rem;padding:0 .5rem;box-shadow:-2px 2px 2px 2px rgba(0,0,0,.3)}
.fontawesome-i2svg-active #cartCounter:not(:empty) {display:initial}

#contactsMenu {height:22px;color:white;font-size:.9rem}

#cartMenu {background-color:var(--grey-light);position:fixed;visibility:hidden;width:400px;top:0;right:0;bottom:0;overflow-y:auto;z-index:4;padding:125px .5rem 2rem;transition:transform 0.3s ease-in-out;transform:translateX(100%);box-shadow:-2px 0 20px 4px rgba(0,0,0,.3)}
#cartMenu table {background-color:var(--grey-light)!important}

#serviceMenu {background-color:black;position:fixed;visibility:hidden;top:0;right:0;bottom:0;z-index:-1;padding:115px 1rem 2rem;transition:transform 0.3s ease-in-out;transform:translateX(100%)}
#serviceMenu .nav-link {padding-right:6rem}
#serviceMenu .nav-link span {position:absolute;right:0;top:50%;transform:translateY(-50%)}

.sectionTitle {font-family:'Titillium Web',sans-serif;padding-top:2.5rem;padding-bottom:2.5rem;text-align:center;font-weight:300}
.featuredBox {font-family:'Titillium Web',sans-serif}

#homeCarousel {font-family:'Titillium Web',sans-serif;color:white}
#homeCarousel .homeCarouselPhoto {max-height:600px}

#homeSpecialSlide {padding-left:18rem}

.homeJumbo {position:relative;height:0;padding-top:62.5%;background-size:cover;background-position:center}
.homeJumbo>div {position:absolute;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.5);color:white;font-family:'Titillium Web',sans-serif;transition:all .5s}
.homeJumbo:hover>div {background-color:rgba(0,0,0,0)}

#historyCarousel {height:436px}

#timeline .line-before {position:absolute;height:2px;width:50%;top:50%;left:0;transform:translateY(-50%);background-color:grey}
#timeline .line-after {position:absolute;height:2px;width:50%;top:50%;left:50%;transform:translateY(-50%);background-color:grey}
#timeline .line-before, #timeline .line-after {transition:all 0.5s linear}
#timeline .segment.past .line-before, #timeline .segment.past .line-after {background-color:red;height:4px}
#timeline .segment.current .line-before {background-color:red;height:4px}
#timeline .dot {position:absolute;width:25px;height:25px;left:50%;top:50%;border-radius:25px;background-color:grey;transform:translate(-50%,-50%)}
#timeline .dot {transition-delay:0.5s}
#timeline .segment.past .dot {border:5px red solid}
#timeline .segment.current .dot {background-color:red}
#timeline .year {position:absolute;left:50%;top:-40px;transform:translateX(-50%)}
#timeline .segment.current .year {color:red;font-weight:bold}

#museumNav .nav-item {margin-bottom:.5rem}
#museumNav .nav-item:not(:first-child) {margin-left:.25rem}
#museumNav .nav-item:not(:last-child) {margin-right:.25rem}
#museumNav .nav-link {background-color:grey;border-radius:0;color:white;font-family:'Titillium Web',sans-serif;font-size:.9rem}
#museumNav .nav-link.active {background-color:red}

.museumCarousel {height:300px}
.museumCarousel .f-carousel__slide {background-size:cover;background-position:center}

#productImage .f-carousel__slide {width:100%;background-size:contain;background-position:center;background-repeat:no-repeat}
#productImage .f-carousel__slide>div {width:100%;padding-top:100%}
#productImageCarousel .f-carousel__slide {width:175px;height:175px;padding:0;background-size:contain;background-position:center;background-repeat:no-repeat}
#productImageCarousel .f-carousel__slide>div {width:100%;height:100%;background-color:rgba(0,0,0,0.25)}
#productImageCarousel .f-carousel__slide.is-nav-selected>div {background-color:transparent}

#accessoriesCarousel {--f-carousel-spacing:15px!important;--f-carousel-slide-width:calc((100% - 30px) / 3)!important}

.productBoxImage .img-hover {visibility:hidden;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background-color:white;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease}
.productBoxImage:hover .img-hover {visibility:visible;opacity:1}

.newsPicture {padding-top:66.2%;background-size:cover;background-position:center}

footer {font-family:'Poppins',sans-serif;color:white;font-size:.75rem}

@media screen and (max-width:1199.98px) {
    .navbar-toggler:focus {outline:none;box-shadow:none}
    #mainMenu .dropdown-menu {width:100%}
    #cartMenu {max-width:100%}
    #serviceMenu {position:static;visibility:visible;transform:translateX(0);padding:0}
    .homeCarouselData {min-height:260px}
    .homeCarouselData .fs-3 {font-size:1rem!important}
    .homeCarouselPhoto {max-height:460px}
    #homeSpecialSlide {padding-left:3rem}
    #historyCarousel {height:auto}
    .museumCarousel .f-carousel__slide {width:100%!important}
    #scMap {min-height:460px}
    #accessoriesCarousel {--f-carousel-spacing:0!important;--f-carousel-slide-width:100%!important}
}