/*
Theme Name: Cyberguard Child
Template:   cyberguard
*/
.website-switcher-container {
  top: 0;
  position: fixed;
  z-index: 1002;
  width: 100%;
  display: block;
  height: 50px;
}
.px-header--fixed {
  top: 50px;
}
.admin-bar .website-switcher-container {
  top:30px;
}
.tml-button {
    font-size: 15px;
    color: #fff;
    padding: 5px 20px 0 20px;
    font-weight: bold;
    line-height: 37.4px;
    -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: none;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    background-color: var(--link-color-hover);
    height: auto;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    overflow: hidden;
}
.tml-field-wrap input {
    margin-bottom: 0px !important;
}
header .header-main.active{top: 50px !important; background-color: #000000 !important;}
main.site-main{margin-top: 50px;}
.website-switcher-html-content{width: 100%; background-color: #292f45;}
.website-switcher{display: flex;gap: 0;height: 100%; background-color: #292f45;}
.website-switcher .website{position: relative;display: flex;transition: all 0.3s ease;flex: 1;justify-content: center;}
.website-switcher .website:nth-child(1){order:1;}
.website-switcher .website:nth-child(2){order:3;}
.website-switcher .website .website-link{display: flex;align-items: center;gap: 12px;color: #fff;padding: 4px 8px;width: 100%; justify-content: center;transition: all 0.3s ease;}
.website-switcher .website .website-link:hover{background-color: #157b3a;}
.website-switcher .website .website-image{width: 42px;aspect-ratio: 1 / 1;overflow: hidden;display: flex; flex-shrink: 0;}
.website-switcher .website .website-image img{width: 100%;height: 100%;object-fit: contain;}
.website-switcher .website .website-content{flex-shrink: 1; display: flex; flex-direction: column; gap: 4px;}
.website-switcher .website .website-title{font-size: 20px;line-height: 1;font-weight: 400;}
.website-switcher .website .website-title strong{font-weight: 400;}
.website-switcher .website .website-subtitle{font-size: 12px;font-family: "Apercu Pro 1", Sans-serif;opacity: 0.75;}
.website-switcher .website-separator{position: relative; z-index: 2;order:2}
.website-switcher .website-separator .switch-icon{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;width: 32px;height: 32px;background-color: #292f45;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 24px; opacity: 0; transition: all 1s ease;}
.website-switcher .website-separator .switch-icon:after{content: "\f105";font-family: "Font Awesome 5 Pro"; font-weight: 300;}
.website-switcher .website.current-website .website-link{background-color: #000000;}
.website-switcher .website:hover ~ .website-separator .switch-icon{opacity: 1;}
.website-switcher .website.current-website:hover ~ .website-separator .switch-icon{opacity: 0;}
.website-switcher .website.current-website .website-link{cursor: default; pointer-events: none;}
.website-switcher.switching .website{opacity: 0.5; pointer-events: none;background-color: #000000;}
.website-switcher.switching .current-website .website-link{background-color: #000000;}
.website-switcher.switching .website-separator .switch-icon{background-color: #157b3a;opacity: 1;animation: icon-pulse 1s ease-in-out infinite;}
.website-switcher.switching .website-separator .switch-icon:after{content: "\f0ec";}

.dialog-widget .popup{height: 100dvh !important;}
.elementor-popup-modal .dialog-message{height: 100dvh !important;max-height: 100dvh !important;}


@keyframes icon-pulse {
  0%,100% { transform: translate(-50%, -50%) scale(1); opacity: .5; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.glitch{position:relative}
.glitch::before,.glitch::after{color:#fff;content: attr(data-text);position:absolute;width:100%;height:100%;overflow:hidden;top:0;font-size: 20px;line-height: 1;font-weight: 400;}
.glitch::before{left:1px;text-shadow:-2px 0 red;animation-name:glitch-animation-1;animation-duration:2s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:reverse-alternate}
.glitch::after{left:-1px;text-shadow:-2px 0 blue;animation-name:glitch-animation-2;animation-duration:2s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:reverse-alternate}

.website-switcher .website:hover .glitch::before {text-shadow: -3px 0 red;animation-duration: 0.6s;}
.website-switcher .website:hover .glitch::after {text-shadow: 3px 0 blue;animation-duration: 0.6s;}
.website-switcher .website:hover .glitch::before, .website-switcher .website:hover .glitch::after {opacity: 1;}


@keyframes glitch-animation-1 {
  0%, 65% {
    clip: rect(0, 350px, 100%, 0);
    opacity: 0;
  }

  70%  { clip: rect(-8px, 350px, 6px, 0); opacity: 1; }
  75%  { clip: rect(12px, 350px, 22px, 0); }
  80%  { clip: rect(-4px, 350px, 10px, 0); }
  85%  { clip: rect(18px, 350px, 30px, 0); }
  90%  { clip: rect(4px, 350px, 16px, 0); }
  95%  { clip: rect(-10px, 350px, 4px, 0); }
  100% { clip: rect(0, 350px, 100%, 0); opacity: 0; }
}

@keyframes glitch-animation-2 {
  0%, 65% {
    clip: rect(0, 350px, 100%, 0);
    opacity: 0;
  }

  70%  { clip: rect(14px, 350px, 26px, 0); opacity: 1; }
  75%  { clip: rect(-6px, 350px, 8px, 0); }
  80%  { clip: rect(20px, 350px, 30px, 0); }
  85%  { clip: rect(6px, 350px, 18px, 0); }
  90%  { clip: rect(-10px, 350px, 4px, 0); }
  95%  { clip: rect(10px, 350px, 22px, 0); }
  100% { clip: rect(0, 350px, 100%, 0); opacity: 0; }
}



@media screen and (max-width:480px) {
  .website-switcher .website .website-title{font-size: 14px;}
  .website-switcher .website .website-title strong{display: block; font-size: 18px;}
}