﻿/*.hotspotbtn {
    width: 2.4em;
    height: 2.4em;
}

.hotspotbtn:hover {
    z-index: unset;
}

.hotspotbtn .hotspotborder.static {
    width: 3em;
    height: 3em;
}

.hotspotbtn.infobtn:hover {
    background-color: var(--sick-blue-primary400);
    background-image: none;
}

.hotspotbtn.infobtn:hover .hotspotborder {
    border-color: var(--sick-blue-primary400);
}

.hotspotbtn .hotspotlabel {
    top: 50%;
    transform: translate(3.5em, -50%);
    text-align: left;
    height: auto;
    line-height: 1.2em;
    background-color: transparent;
    padding: 0em;
    width: 16em;
    text-overflow: unset;
    white-space: normal;
    overflow: visible;
    font-weight: bold;
    text-shadow: 1px 1px 0.2em #000000, 0px 0px 0.1em #000000;
    font-size: 0.95em;
    max-width: 16em;
    hyphens: auto;
    hyphenate-limit-chars: 4 3 3;
}

.hotspotbtn.left .hotspotlabel {
    left: auto;
    right: 0%;
    transform: translate(-3.5em, -50%);
    text-align: right;
}

.hotspotbtn.areabtn .hotspotlabel {
    background-color: transparent;
    font-weight: bold;
    font-size: 1.2em;
    transform: translate(3em, -50%);
}

.hotspotbtn.areabtn.left .hotspotlabel {
    transform: translate(-3em, -50%);
}

.hotspotbtn.areabtn .hotspotborder.static {
    width: 3em;
    height: 3em;
    border: 1px solid #ffffff;
}

.hotspotbtn.areabtn .hotspotborder.animated,
.hotspotbtn.areabtn .hotspotborder.animated2 {
    border: 1px solid #ffffff;
}


.sidemenu {

    top: auto;
    bottom: 2.5em;

}*/

.modebtn.mode_browser_nowlan {
    display: none;
}

/* INTRALOGISTIC OLD*/

.hotspotbtn {
    width: 1.8em;
    height: 1.8em;
}

.hotspotbtn:hover {
    z-index: unset;
}

.hotspotbtn .hotspotborder.static {
    width: 2.4em;
    height: 2.4em;
}

.hotspotbtn.areabtn .hotspotborder {
    display: none;
}

.hotspotbtn .hotspotlabel,
.hotspotbtn.left .hotspotlabel,
.hotspotbtn.areabtn .hotspotlabel,
.hotspotbtn.areabtn.left .hotspotlabel {
    top: auto;
    bottom: 100%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -1.25em) scale(0);
    text-align: center;
    height: auto;
    line-height: 1.3em;
    background-color: var(--sick-blue-primary500);
    padding: 0.5em 1em 0.6em 1em;
    width: 15em;
    text-overflow: unset;
    white-space: normal;
    font-weight: normal;
    font-size: 0.9em;

    transition: transform 0.3s ease;
    text-shadow: none;
}

.hotspotbtn:hover {

    z-index: 10;

}

.hotspotbtn:hover .hotspotlabel,
.hotspotbtn.left:hover .hotspotlabel,
.hotspotbtn.areabtn:hover .hotspotlabel,
.hotspotbtn.areabtn.left:hover .hotspotlabel {
    transition-delay: 0.5s;
    transform: translate(-50%, -1.25em) scale(1);


}

.hotspotbtn.areabtn .hotspotlabel,
.hotspotbtn.areabtn.left .hotspotlabel {
    background-color: var(--sick-neutral-650);
    font-weight: bold;
    font-size: 1em;

}


.hotspotbtn.mainbtn {
    position: absolute;
    line-height: 0em;
    border-radius: 0%;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(1) rotate(-13deg) skew(-20deg);
    padding: 0em;
    pointer-events: auto;
    user-select: none;
    width: 1.6em;
    height: 1.6em;
    font-size: 0.9em;
    background-color: var(--sick-blue-primary500);
    background-image: linear-gradient(135deg, var(--sick-blue-primary400) 0%, var(--sick-blue-primary500) 33%, var(--sick-blue-primary600) 100%);

}

.hotspotbtn.mainbtn .hotspotborder.static {
    width: 2.2em;
    height: 2.2em;
    top: -0.285em;
    left: -0.285em;
}

.hotspotbtn.mainbtn .hotspotborder,
.hotspotbtn.mainbtn .hotspotimage {
    display: block;
}

.hotspotbtn.mainbtn::before {
    display: none;
}

.hotspotbtn.mainbtn.bottom::before {
    top: 0em;
    bottom: auto;
}

.hotspotbtn.mainbtn .hotspotimage {
    padding: 0.25em;

}

.hotspotbtn.mainbtn .hotspotlabel,
.hotspotbtn.mainbtn.left .hotspotlabel,
.hotspotbtn.mainbtn.bottom .hotspotlabel,
.hotspotbtn.mainbtn.bottom.left .hotspotlabel {
    position: absolute;
    top: 50%;
    bottom: auto;
    height: auto;
    left: 2em;
    right: auto;
    color: #ffffff;
    cursor: pointer;
    padding: 0.4em 0.5em 0.4em 0.5em;
    white-space: nowrap;
    background-color: transparent;
    transform: translate(0, -50%);
    font-size: 1em;
    text-shadow: none;
    font-weight: bold;
    text-align: left;
    width: auto;
    text-overflow: unset;
    max-width: none;
    line-height: 1.2em;
    text-shadow: -2.5px 0px 2px #000000b0;
    z-index: 3;

}

.hotspotbtn.mainbtn:hover img {
    transform: rotate(0deg);

}

.hotspotbtn.mainbtn.link .hotspotimage {

    display: none;
}

.hotspotbtn.mainbtn.link {
    background-color: var(--sick-orange-accent600);

    background-image: url(../custom/mobilerobot.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;

}

.hotspotbtn.mainbtn.link .hotspotborder {
    border-color: var(--sick-orange-accent600);
}

.overlaymenu {

    background: #1e1e1ee8;

}

.overlaymenu .item__inner:after {

    background: none;
}

.logo {

    width: 10vh;

}

.maintitle {

    text-shadow: none;
}

.item img {

    box-shadow: 2px 2px 2px rgb(0 0 0 / 15%);
    filter: opacity(0.7);
    -webkit-filter: opacity(0.7);

}

.backgroundswitch {
    position: absolute;
    bottom: 2em;
    left: 2.5em;
    transform: translate(-0%, 0%);
    white-space: nowrap;
    padding: 1em 0.5em;
    background-color: #ffffff;
}

.backgroundswitchbutton {
    padding: 0.5em 1em 0.5em 3em;
    border-radius: 0;
}

.backgroundswitchbutton.active {
    color: var(--sick-main-primary-500);
    background-color: #d1dfe6;
}

.top-menu.burger-menu {
    right: 2em;
    background: var(--sick-blue-primary600);
}

.top-menu.burger-menu:hover {
    background: var(--sick-blue-primary500);
}

.overlay_close {

    right: 2em;

}

.homebtn.bottom {
    position: absolute;

    left: auto;
    right: 2em;
    bottom: auto;
    top: 2em;
    transform: translate(0%, 0%);
    z-index: 1;
    display: none;

    background: var(--sick-blue-primary600);
}

.homebtn.bottom:hover {
    background: var(--sick-blue-primary500);
}

.tour {
    position: absolute;
    width: 14em;
    height: auto;
    top: 10em;
    right: auto;
    left: 2.5em;
    cursor: pointer;
}

.tour .tourbtn {
    display: none;
}

.iltourbtn {
    background-color: var(--sick-blue-primary600);
    color: #ecf0f1;
    padding: 0.75em 1em;
    position: relative;
    transition: background-color linear 0.2s;
}

.tour:hover .iltourbtn {
    background: var(--sick-blue-primary500);
}

.iltourbtn::before {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    background-image: url(../img/arrow_next.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(0%, -50%) rotate(90deg);
    top: 50%;
    right: 1em;
    transition: transform 0.25s ease;
    opacity: 0.9;
}

.iltourbtn.open::before {

    transform: translate(0%, -50%) rotate(270deg);

}

.tourhead,
.tourclose {
    display: none;
}

.tourlistcontainer {
    position: relative;
    width: 100%;
    right: auto;
    left: 0%;
    transform: translate(0%, 0%);
    top: 0em;
    display: none;
    background-color: #ecf0f1;
    color: var(--sick-blue-primary500);
    box-shadow: none;
    height: auto;
    z-index: 20;
    padding: 0em;
}

.tourlistcontainer:before {
    display: none;
}

.tourlist {
    margin-top: 0em;

}

.tourstartbtn {
    color: var(--sick-blue-primary500);
    font-size: 0.9em;
    margin: 0em;
    padding: 0.5em 1em;
    cursor: pointer;
    background-color: transparent;

    white-space: normal;
}

.tourstartbtn:hover {
    background: #e3e9eb;
}

.sidemenu {
    position: absolute;
    top: auto;
    bottom: 2em;
    left: 50%;
    transform: translate(-50%, 0);
    width: 20em;

}

.sidemenu .sidebtn {
    display: none;

}

.sidemenu:hover .sidebtn {
    display: block;

}

.sidemenuopenbtn {
    color: var(--sick-gray-secondary500);
    background-color: #ffffff;
    text-align: center;
    padding: 0.25em 0.75em;
    font-size: 1em;
    border: 3px solid var(--sick-element-notactive);
    cursor: pointer;
}

.sidemenu:hover .sidemenuopenbtn {
    color: #ffffff;
    background-color: var(--sick-blue-primary600);
    text-align: center;
    padding: 0.25em 0.75em;
    font-size: 1em;
    border: 3px solid var(--sick-blue-primary600);
}

.sidemenu .sidebtn.sidemenubtn {
    margin: 0;
    color: var(--sick-gray-secondary500);
    background-color: #ffffff;
    padding: 0.5em 0.75em;
    line-height: 1.3em;
    min-height: 2.5em;
    align-items: center;
    justify-content: start;
    font-size: 0.825em;
    font-weight: normal;
    text-align: left;
    border: none;
}

.sidemenu .sidebtn.sidemenubtn:hover,
.sidemenu .sidebtn.sidemenubtn.active,
.sidemenu .sidebtn.sidemenubtn.active:hover {
    border: none;
    background: #e3e9eb;
    color: var(--sick-blue-primary500);
}

.overlaymenu .filters .filter.areafilter {

    background-image: none !important;
    padding: 0.7em 1.2em 0.7em 1.2em;
    transition: background-color linear 0.2s;
}

.overlaymenu .filters .filter.customfilter,
.overlaymenu .filters .filter.tourfilter {
    background-color: var(--sick-blue-primary600);
    background-image: none !important;
    padding: 0.7em 1.2em 0.7em 1.2em;
    transition: background-color linear 0.2s;
}



.overlaymenu .filters .filter.customfilter.active,
.overlaymenu .filters .filter.tourfilter.active {
    background-color: var(--sick-blue-primary500);
    background-image: none !important;
}

.overlaymenu .filters .filter.customfilter:hover,
.overlaymenu .filters .filter.tourfilter:hover,
.overlaymenu .filters .filter.customfilter.active:hover,
.overlaymenu .filters .filter.tourfilter.active:hover {
    background-color: var(--sick-blue-primary400);
    background-image: none !important;
}

.panoturn {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 25%;
    width: 10em;
    height: 10em;
    cursor: pointer;
    opacity: 0;
    transition: none;
    pointer-events: none;

}

.panoturn.panoleft.ani {
    animation: panoleft linear 4s 1;
}

.panoturn.panoright {
    left: auto;
    right: 25%;
}

.panoturn.panoright.ani {
    animation: panoright linear 4s 1;
}

@keyframes panoleft {
    0% {
        opacity: 0;
        left: 25%;
    }

    20% {
        opacity: 0;
        left: 25%;
    }

    25% {
        opacity: 0.5;
        left: 25%;
    }

    30% {
        opacity: 0.5;
        left: 25%;
    }

    50% {
        opacity: 0;
        left: 10%;
    }

    55% {
        opacity: 0;
        left: 25%;
    }

    60% {
        opacity: 0.5;
        left: 25%;
    }

    80% {
        opacity: 0;
        left: 10%;
    }

    90% {
        opacity: 0;
        left: 25%;
    }
}

@keyframes panoright {
    0% {
        opacity: 0;
        right: 25%;
    }

    20% {
        opacity: 0;
        right: 25%;
    }

    25% {
        opacity: 0.5;
        right: 25%;
    }

    30% {
        opacity: 0.5;
        right: 25%;
    }

    50% {
        opacity: 0;
        right: 10%;
    }

    55% {
        opacity: 0;
        right: 25%;
    }

    60% {
        opacity: 0.5;
        right: 25%;
    }

    80% {
        opacity: 0;
        right: 10%;
    }

    90% {
        opacity: 0;
        right: 25%;
    }
}

.info_inner {

    max-width: 85em;
    font-size: 0.95em;

}

.info .productlist {
    font-size: 0.9em;
}

.subheadline-product {
    position: relative;
    font-weight: 600;
    color: var(--sick-gray-secondary650);
    font-size: 0.95em;
}

.headline-product a {
    font-size: 1.1em;
}

.carousel-indicators li {

    width: 0.9em;
    height: 0.9em;

}

#carousel_product .carousel-control-prev,
#carousel_product .carousel-control-next {

    opacity: 0;

}

#carousel_product .carousel-control-prev:hover,
#carousel_product .carousel-control-next:hover {

    opacity: 1;

}

.startlogo {
    display: none;
}

.mainlogo {
    width: 4em;
}