/* Menu Class Composition UI */

.menu-mobile {
    color: #fff;
    position: relative;
    margin: 0 !important;
    display: none !important;
    cursor: pointer;
}

.menu-mobile-close {
    color: #000;
    position: fixed;
    top: 50px;
    right: 50px;
    font-size: 26px !important;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
}

.kisch-menu {
    position: relative;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    font-size: 16px;
}
.kisch-menu ul {
    display: inline-flex;
    list-style: none;
    list-style-type: none;
}
.kisch-menu li {
    display: inline-flex;
    margin: 0;
    margin-right: 12px;
    padding: 0;
    align-items: center;
}
.kisch-menu li:nth-last-child(2){
    margin-right: 0;
}
.kisch-menu li:last-child {
    margin-right: 0;
}
.kisch-menu li a {
    color: #fff;
    padding: 6px 18px;
    background-color: #007AFF;
    border-radius: 20px;
    border: 3px solid #007AFF;
    text-decoration: none;
}
.kitsch-comp {
    padding-right: initial !important;
}
.kisch-menu li a:hover {
    background-color: #003E82;
    border: 3px solid #003E82;
}
.kisch-menu li a i {
    font-style: normal;
    background-color: #CCE7FF;
    color: #007AFF;
    padding: 6px 18px;
    border-radius: 20px;
    margin-left: 10px;
}

.menu-on a {
    background-color: #003E82 !important;
    border: 3px solid #003E82 !important;
    cursor: default;
}

.fn-menu {
    background-color: #003E82;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 999;
    text-align: left;
    padding: 50px;
    display: none;
}
.fn-menu a {
    color: #ffffff;
    font-size: calc(.8rem + 1vw);
    padding: 8px 28px;
    background-color: #007AFF;
    border-radius: 50px;
    border: 5px solid #007AFF;
    text-decoration: none;
}
.fn-menu a:hover {
    background-color: #0056b3;
    border: 5px solid #0056b3;
}
.fn-menu a i {
    font-style: normal;
    background-color: #CCE7FF;
    color: #007AFF;
    padding: 8px 28px;
    border-radius: 50px;
    margin-left: 10px;
}
.fn-menu ul {
    position: relative;
    top: 6vh;
    list-style:none ;
}
.fn-menu li {
    padding: 18px 10px;
}
.menu-on-mobile a {
    color: #ffffff !important;
    cursor: default;
    background-color: #0056b3;
    border: 5px solid #0056b3;
}
.button-support a {
    background-color: #EBFF00 !important;
    color: #003E80 !important;
    border: 3px solid #007AFF !important;
    box-shadow: 1px 1px 20px 0px #999999;
}
.button-support a:hover {
    filter: brightness(0.9);
    border: 3px solid #3BA3FF !important;
    box-shadow: none;
}
.button-support {
    border: 3px solid #b7dafa;
    border-radius: 50px;
    height: 75px;
    width: 205px;
    display: flex;
    justify-content: center;
}
.button-support:hover {
    border-color: #3BA3FF;
}
.support-border {
    border: 3px solid #3BA3FF;
    border-radius: 30px;
    padding: 14px 6px;
}
.support-border:hover {
    border-color: #b7dafa;
}
.fn-menu .button-support {
    border: 3px solid #b7dafa;
    border-radius: 100px;
    height: auto;
    width: auto;
    display: inline-block;
    padding: 10px !important;
    margin-top: 8px;
}
.fn-menu .support-border {
    border: 3px solid #3BA3FF;
    border-radius: 50px;
    padding: 18px 8px;
}

/* --------------------------------
   Remote Support Pulse
   -------------------------------- */

.button-support {
    animation: outerPulse 3s ease-in-out infinite;
}
.support-border {
    animation: middlePulse 3s ease-in-out infinite;
}
.button-support a {
    animation: innerPulse 3s ease-in-out infinite;
}

/* Outer ring */

@keyframes outerPulse {
    0%,
    100% {
        border-color: rgba(183, 218, 250, 1);
    }
    50% {
        border-color: rgba(183, 218, 250, 0.25);
    }
}

/* Middle ring */
@keyframes middlePulse {
    0%,
    100% {
        border-color: rgba(59, 163, 255, 1);
    }
    50% {
        border-color: rgba(59, 163, 255, 0.15);
    }
}

/* Button border */
@keyframes innerPulse {
    0%,
    100% {
        border-color: rgba(0, 122, 255, 1);
    }
    50% {
        border-color: rgba(0, 122, 255, 0.6);
    }
}


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

/* Macbook Pro - Menu */
@media (max-width: 1640px) {
    .button-menu {
        display: none !important;
    }
    .menu-mobile {
        display: block !important;
    }
    .fn-menu {
        display: block;
    }
}
@media (max-width: 640px) {
    .fn-menu li {
    padding: 12px 6px;
}
    .fn-menu a {
    font-size: calc(.7rem + .8vw);
    padding: 6px 16px;
}
.fn-menu a i {
    padding: 6px 16px;
}
.fn-menu .button-support {
    padding: 4px !important;
    border: 2px solid #b7dafa;
    margin-top: 4px;
}
.fn-menu .support-border {
    padding: 13px 4px;
    border: 2px solid #3BA3FF;
}
.fn-menu .button-support:hover {
    border: 2px solid #3BA3FF;
}
.fn-menu .support-border:hover {
    border: 2px solid #b7dafa;
}

}
@media (max-width: 480px) {
    .fn-menu {
    padding: 30px;
    }
    .fn-menu ul {
    top: 3vh;
    }
    .menu-mobile-close {
    top: 30px;
    right: 30px;
    }
    
}

@media (max-width: 360px) {
    .fn-menu {
    padding: 20px;
    }
    
}