html {
  scroll-behavior: smooth;
}
@font-face  {
    font-family: "Tenor Sans";
    src: local(''),
     url('../font/TenorSans-Regular.ttf');

  }
    .loading-gif {
            max-width: 500px;
        }

        .pre-loader {
            position: fixed;
            z-index: 9999999; /** make sure this is the highest value compared to all other divs **/
            top: 0;
            left: 0;
/*            background: #191f26;*/
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        .pre-loader.hidden {
            animation: fadeOut 2s; /** change to 1s */
            animation-fill-mode: forwards;
            pointer-events: none;
             
        }

        @keyframes fadeOut {
            100% {
                opacity: 0;
                visibility: hidden;

            }
        }

  .song_progress_elapsed_offcanvas {
    font-family: monospace;
    position: absolute;
    right:55px;
    bottom: 0;
    font-size: 12px;
    margin-bottom: -2px;
    /* margin-left: 20px; */
    z-index: 1;
    color: whitesmoke;
  }
  .song_duration_offcanvas {
    font-family: monospace;
    position: absolute;
    right: 5px;
    bottom: 0;
    font-size: 12px;
    margin-bottom: -2px;
    /* margin-right: 20px; */
    z-index: 1;
    color: whitesmoke;
  }
  .song_separator_offcanvas {
    font-family: monospace;
    position: absolute;
    right: 45px;
    bottom: 0;
    font-size: 12px;
    margin-bottom: -2px;
    /* margin-right: 20px; */
    z-index: 1;
    color: whitesmoke;
  }
  
 
    .progress_bar_div_wrapper_offcanvas {
      height: 15px;
      width: 100%;
      border-bottom-right-radius: 0.45rem;
      border-bottom-left-radius: 0.45rem;
      border: none;
      color: #777;
      opacity: 0.8;
      background: #777;
      overflow: hidden;
    }
    #progress_bar_div_offcanvas {
      height: 15px;
      width: 100%;
      border: none;
      opacity: 0.8;
      background: orange; 
      transition: width 1s linear;

      
    }
  .song_progress_elapsed {
    font-family: monospace;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 14px;
    margin-bottom: 1.5px;
    margin-left: 22px;
    z-index: 1;
  }
  .song_duration {
    font-family: monospace;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    margin-bottom: 1.5px;
    margin-right: 22px;
    z-index: 1;
  }
      .progress_bar_div_wrapper {
      height: 15px;
      width: calc(100% - 28px);
      position: absolute;
      bottom: 5%;
      left: 14px;
      right: 0%;
      border: none;
      background-color: rgba(75, 75, 75, 1);
      opacity: 1;
      border-radius: 100px;
      overflow: hidden;
    }
    #progress_bar_div {
      height: 15px;
      width:  0%;
      background-color: #FF000080;
      opacity: 0.75;
      transition: width 1s linear;
      
    }
 #clock {
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    color: #c9a885;
    opacity: 0.5;
    text-shadow: 0 0 20px rgb(230, 10, 134), 0 0 20px rgba(10, 175, 230, 0);
    }
    #clock .time {
        letter-spacing: 0.05em;
        font-size: 30px;
         
    }
    #clock .utc {
        letter-spacing: 0.1em;
        font-size: 10px;
        top: -1.4em;
    }
.UTC_mobile {
position: absolute;
  top: 0;
  right: 0;
  z-index: 99999;margin-right: 12px;margin-top: 11px;
}
 @media (max-width: 700px) and  (min-width:600px) {
    #clock .utc {
        display: none;
    }
 }
  @media (max-width: 599px) {
    .UTC_mobile {
       position: absolute;
  top: 0;
  left: 0; 
  margin-left: 15px;
  margin-top: 55px;
  right: unset;
   z-index: 999;

    }
          #clock {
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    color: #c9a885;
    opacity: 0.6;
    text-shadow: 0 0 20px rgb(230, 10, 134), 0 0 20px rgba(10, 175, 230, 0);
    }
        #clock .time {
        letter-spacing: 0.05em;
        font-size: 20px;
         
    }
    #clock .utc {
        letter-spacing: 0.1em;
        font-size: 7px;
        top: -1.4em;
    }

    .leftOffcanvasUTC {display: none;} 
    
}
#button_block .btn {margin-right: 12px}
  .btn-warning {
  --bs-btn-bg: #ff9d41!important;
  --bs-btn-border-color: #ff9d41!important;
}
  .btn-outline-warning {
  --bs-btn-color: #ff9d41!important;
  --bs-btn-border-color: #ff9d41!important;
}
   .icecast-enabled {font-size: 30px; background: rgba(245,245,245,0.8); border-radius: 40px; transform: rotate(20deg); margin-top: -10px;}
    .icecast-enabled img {height:60px;}
    .enabled {position: absolute;top: -6%;left: 50%;}
    .hls-enabled img {height:60px; border-radius:40px;
    }
    .hls-enabled .img1 {transform: rotate(20deg);}
  @media (max-width: 390px) and (min-width: 345px)  {
      .enabled {position: absolute;top: -14%;left: 50%;}
       .icecast-enabled img {height:47px;}
        .hls-enabled img {height:47px; border-radius:40px;}
           .icecast-enabled {font-size: 30px; background: rgba(245,245,245,0.7); border-radius: 40px; transform: rotate(20deg); margin-top: -10px;}

        }
        @media (max-width: 475px)  and (min-width:390px) {
      .enabled {position: absolute;top: -12%;left: 45%;}
       .icecast-enabled img {height:50px;}
        .hls-enabled img {height:50px; border-radius:40px;}
        }
         @media (max-width: 344px) {
            .enabled {position: absolute;top: -16%;left: 43%;}
         .icecast-enabled img {height:47px;}
        .hls-enabled img {height:47px; border-radius:40px;}
           .icecast-enabled {font-size: 30px; background: rgba(245,245,245,0.7); border-radius: 40px; transform: rotate(20deg); margin-top: -10px;}

         }
  .dropdown-menu.show {margin-left: -50px!important; margin-top: -2px!important}
  .dropdown-menu {margin-left: -50px!important; margin-top: -2px!important}
  .dropdown:hover>.dropdown-menu {
    display: block;
  transform: translate3d(0px, 2px, 0px);

  }
  .dropdown>.non-sticky:active {
    /*Without this, clicking will make it sticky*/
      pointer-events: none;
  }
  .modal-content {border-radius: 1rem!important}
.modal-content-dark-stepan{
  border-radius: 40px;
  background: url(/assets/img/orig.webp) 100% 0 no-repeat, rgba(0, 0, 0, 0.4);;
  color: #fff;
  font-size: 14px;
  background-size:  cover;
  position: absolute;
  border: 7px solid black;
  border-radius: 40px;
  opacity:0.95;
}
.modal-content-dark-stepan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}
.modal-content-dark-stepan-shiva{
  border-radius: 40px;
 background:   url("/assets/img/hero-bg.png") center center no-repeat ;

    
    background-attachment: fixed;  
    color: #fff;
  font-size: 14px;
  background-size:  cover;
  position: absolute;
  border: 7px solid black;
  border-radius: 40px;
}
.modal-content-dark-stepan-shiva::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}
.moodalbackgroundst-col{
  background: 50% 0 no-repeat;
   box-shadow:  0 50px 80px rgb(0 0 0 / 50%);
   background-size:  cover;
   position: absolute;
   padding: 23px 0;
border-radius: 40px;
}
body {
  font-family: "Tenor Sans";
  background: url(/assets/img/3xN23mT0F0bPNNpAHdl59Pf1qgT3.png) 50% 50% no-repeat;
  background-size:  cover;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.background-general {

  background: url(/assets/img/3xN23mT0F0bPNNpAHdl59Pf1qgT3.png) 50% 50% no-repeat;
  background-size:  cover;
  position: absolute;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: -1;
}

#myVideo {
  position: fixed; 
  opacity: 0.3;
  min-width: 100%;
  min-height: 100vh;
  z-index: -1;
}
 

.accordion {
  --bs-accordion-color: #fff;
  --bs-accordion-bg: inherit;
  --bs-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
  --bs-accordion-border-color: white;
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0.375rem;
  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: white;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: white;
  --bs-accordion-active-bg: none;
}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
.rotate {
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.rotate.down {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
}
.colorred {
    background: darkred!important;
}
.colorred.red {
    background: darkgreen!important;
}
@media screen and (min-width: 800px) {
#qth,#qth2,#Qbtn, #schedulebut, #linksbut, #dwnld, #dwnldom, #dwnldR {margin-right: 8px;}
#qth,#qth2 {margin-left: 8px;}
  
#videostream {margin-right:9px!important;}
#extaudio {margin-right:10px!important;}
}
#extaudio {padding: 10px 8px;background: rgba(220, 140, 20, 0.2); border-radius: 100px; color: #ccc;}
 #extaudio {margin-right:4px;}
 
#dwnld2 {margin-left:3px;}
#links a {color:orangered;}
.accordion button {color: white;}
.accordion a {color: orangered;}
.accordion-header {margin-top: 10px; margin-bottom: 10px;}
.writer {color: darkred;}
.quote {font-size: 0.9em;}
.tooltip {font-size: 14px;z-index: 99999;}
.col-mod {width: 90%;}
#schedulebut {padding: 10px 10px 10px 10px;}
#linksbut {padding: 10px 7px 10px 7px;}
#qth {padding: 10px 12px 10px 12px;}
#qth2 {padding: 10px 8px 10px 8px;}
#Qbtn {padding:9.5px 8.25px 10px 9px;}
#dwnld {padding: 9px 10px 9px 10px;background: rgba(220, 220, 220, 0.2); border-radius: 100px; color: #ccc;}
#dwnldom {padding: 11px 10px 11px 10px;background: rgba(220, 220, 220, 0.2); border-radius: 100px; color: #ccc;}
#dwnldR {padding: 11px 10px 11px 10px;background: rgba(220, 220, 220, 0.2); border-radius: 100px; color: #ccc;}
#qth,#qth2,#Qbtn, #schedulebut, #linksbut {color: #ccc;background-color: rgba(255, 157, 65, 0.6) ;border-radius: 100%;}
.copybutton  {background: orangered;}
.copybutton:hover  {background: red;}
.copybutton:active  {background: white;}
.gifbg {
position: absolute;
background: url(/assets/img/gif/1.gif) 10% no-repeat;
z-index: 0;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
opacity: 0;
display: none;
z-index: 9;   
 display: none;
}
.mcont {font-size: 15px;}
    #menu-faq  {background: rgba(0, 0, 0, 0.8) !important; width: 470px;    }
 #diviframe, #iframe1 { height:140vh; }

@media (max-width: 1200px) and (min-width: 1000px) {
  #algeron2,#algeron p {font-size: 0.8em ;}
       #menu-faq  { width: 450px;}

}
@media (max-width: 1000px) and (min-width: 800px) {
  #algeron2,#algeron p {font-size: 0.6em ;}
}
@media (max-width: 1000px) and (min-width: 500px) {
.moon { width: 25em !important;
        height: 25em !important;}
.mcont {font-size: 12.5px;}
.quote {font-size: 12.5px !important;}
.writer {font-size: 13px; }
.omback i {font-size: 15em!important;}
#menu-faq  { width: 400px;}
}

@media (max-width: 500px) and (min-width: 376px) {
.gifbg {display: block;}
.mcont {font-size: 12.5px;}
.quote {font-size: 12px !important;}
.writer {font-size: 13px; }
#myVideo { display:none !important; }
.moon {opacity: 1 !important;
    width: 25em !important;
    height: 25em !important;}
 .omback i {font-size: 14em!important;}
  #menu-faq  { width: 320px;}
  #button_block .btn {margin-right: 0px}

}
@media (max-width: 375px) and (min-width: 350px) {
.gifbg {display: block;}
.mcont {font-size: 11.5px;}
.quote {font-size: 11px !important;}
.writer {font-size: 12px; }
#myVideo { display:none !important; }
.moon {opacity: 1 !important;
    width: 22em !important;
    height: 22em !important;}
 .omback i {font-size: 11em!important;}
  #menu-faq  { width: 320px;}
    #button_block .btn {margin-right: 0px}

   
}
@media screen and (max-width: 349px) {
.gifbg {display: block;}
.mcont {font-size: 11px;}
.quote {font-size: 10px !important;}
.writer {font-size: 11px; }
#myVideo { display:none !important; }
.moon {opacity: 1 !important;
    width: 20em !important;
    height: 20em !important;}
 .omback i {font-size: 9em!important;}
  #menu-faq  { width: 300px;}
    #button_block .btn {margin-right: 0px}

}

@media screen and (max-width: 800px) {
 #algeron2,#algeron  {display: none;}
 .satellite {display: none;}
}

.moon {
  color: black;
  width: 30em;
  height: 30em;
  border-radius: 50%;
  background-color: white; display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 5em 0 rgb(254 216 76 / 50%),
    0 0 20em 4em rgb(232 165 82 / 20%), 0 0 55em 8em rgb(255 77 77 / 10%);
}
.satellite,
.satellite::after {
  content: "";
  position: absolute;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  /*   z-index: 100; */
}
.satellite {
  background-color: #ffedd1;
  box-shadow: -2em 0 5em -1em white;
  transition: 250ms;
  overflow: hidden;
  left: 32em;
  /*   z-index: -1; */
  transform: rotate(20deg);

  animation: test 5s infinite ease-in-out;
}
.satellite::after {
  background-color: #262938;
  width: 2.5em;
  left: 2.5em;
  box-shadow: 0 0 0.75em 0.95em #262938;
  animation: shadow 5s infinite ease-in-out;
}

@keyframes shadow {
  0% {
    width: 2.5em;

    left: 0;
  }

  25% {
    width: 5em;
    left: 0;
  }
  50% {
    width: 2.5em;
    left: 2.5em;
  }

  75% {
    width: 0em;
    left: 5em;
    /*     box-shadow: none; */
  }

  80% {
    left: 0;
    box-shadow: 0 0 0.55em 0.75em #262938;
  }

  100% {
    width: 2.5em;
    left: 0;
  }
}

@keyframes test {
  0%,
  100% {
    top: 2em;
    left: -15em;
    box-shadow: -2em 0 5em 0.5em rgb(198 131 100 / 40%);
    z-index: 2;
  }
  25% {
    box-shadow: 0 0 3em 1em #412104b5;
  }
  75% {
    box-shadow: 0 0 3em 1em black;
  }

  48% {
    z-index: 2;
  }
  50% {
    left: 40em;
    top: 20em;
    z-index: -1;
    box-shadow: 2em 0 5em 0.5em rgb(132 90 70 / 51%);
  }

  99% {
    z-index: -1;
  }
}

/***********************************/
.moodalbackgroundst .footer-top {
   position: relative;
   z-index: 2;
   text-align: center;
 }
 
 .moodalbackgroundst .footer-top .footer-logo img {
   height: 125px;
 }
 @media (max-width: 768px) {
 
 
 .moodalbackgroundst .footer-top .footer-logo img {
     height: 103px;
   }
 }
 
 
 .moodalbackgroundst .footer-top h3 {
   font-size: 36px;
 
   color: #aeaeae;
   position: relative;
 
   padding: 30px 0 0 0;
   margin-bottom: 0;
 }
 
 
 .moodalbackgroundst .footer-top p {
   font-size: 17px;
   font-style: italic;
   margin: 30px 0 0 0;
   padding: 0;
   color: #aeaeae;
 }
 
 .moodalbackgroundst .footer-top .social-links {
   margin-top: 20px;
   
 }
 
 .moodalbackgroundst .footer-top .social-links a {
   background: rgba(255,255,255,0.1);
    box-shadow:  0 50px 80px rgb(0 0 0 / 50%);
   
   font-size: 25px;
   display: inline-block;
 
   color: #b4b4b4;
   line-height: 1;
   padding: 9px 0;
   margin-bottom: 4px;
   border-radius: 50%;
   text-align: center;
   width: 45px;
   height: 45px;
   transition: 0.3s;
 }
 
 .moodalbackgroundst .footer-top .social-links a:hover {
   background: #fff;
   color: #000;
   text-decoration: none;
 }
 
 .moodalbackgroundst .footer-bottom {
   border-top: 1px solid #222222;
   z-index: 2;
   position: relative;
   padding-top: 40px;
   padding-bottom: 40px;
 }
 .moodalbackgroundst .btn-mail-to {
   font-family: "Montserrat", sans-serif;
   text-transform: uppercase;
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 1px;
   display: inline-block;
   width: 220px;
 
   padding: 14px 35px;
   border-radius: 40px;
   border-width: medium;
   border-color: #111;
   margin: 10px;
   color: #aeaeae;
   background: rgba(255,255,255,0.1);
 }
 .moodalbackgroundst .btn-mail-to:hover {
   transition: 0.5s;
   background: #fff;
   color: #333333;
 }
 .moodalbackgroundst .btn-gogo {
   font-family: "Montserrat", sans-serif;
   text-transform:  uppercase;
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 5px;
   display: inline-block;
   width: 95%;
   padding: 15px 1px;
   border-radius: 40px;
   border-width: medium;
   border-color: #111;
    margin-bottom: 10px;;
   color: #aeaeae;
   background: rgba(255,255,255,0.1);
   background: rgba(255,255,255,0.1);
text-decoration: none;
 }
 .moodalbackgroundst .btn-gogo:hover {
   transition: 0.5s;
   background: #fff;
   color: #333333;
 }
 
 .moodalbackgroundst .copyright {
   text-align: center;
 }
 
 .moodalbackgroundst .credits {
   text-align: center;
   font-size: 13px;
   padding-top: 5px;
 }
 
 
 
 .moodalbackgroundst  .image2 {
   background-color: #222;
   padding: 15px;
   box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.4);
 
 
 
 
 
 }
 
 
 
 .moodalbackgroundst .image2 img:hover {
 
 
   transform: scale(1.1);
 
   filter: none;
 }