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

  }

  .song_time_offcanvas {
    color: orange;
  position: absolute;
  top: 13%;
  left: 3%;
  font-family: monospace;
  font-size: 23px;
  text-shadow: 1px 1px 5px black;
  }
  .song_progress_elapsed {
    font-family: monospace;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 14px;
    margin-bottom: 1px;
    margin-left: 22px;
    z-index: 1;
  }
  .song_duration {
    font-family: monospace;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    margin-bottom: 1px;
    margin-right: 22px;
    z-index: 1;
  }
  .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;
  }
  .song_duration_offcanvas {
    font-family: monospace;
    position: absolute;
    right: 5px;
    bottom: 0;
    font-size: 12px;
    margin-bottom: -2px;
    /* margin-right: 20px; */
    z-index: 1;
  }
  .song_separator_offcanvas {
    font-family: monospace;
    position: absolute;
    right: 45px;
    bottom: 0;
    font-size: 12px;
    margin-bottom: -2px;
    /* margin-right: 20px; */
    z-index: 1;
  }
  
  #progress_bar {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 12px;
      width: calc(100% - 30px);
      position: absolute;
      bottom: 3%;
      left: 15px;
      right: 0%;
      border: none;
      color: #e03333;
      opacity: 0.75;
      background: #777; /* Firefox: unfilled portion */
      border-radius: 100px;
    }
    .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;
      
    }
    .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;

      
    }

 

    #progress_bar_offcanvas {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 15px;
      width: 100%;
      border-bottom-right-radius: 0.45rem;
      border-bottom-left-radius: 0.45rem;
      border: none;
      color: orange;
      opacity: 0.8;
      background: #777; /* Firefox: unfilled portion */
      /* margin-left: -0.5px;
      margin-right: -0.5px; */
      
    }



      #clock {
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    color: #daf6ff;
    opacity: 0.3;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1),  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: 15px;margin-top: 12px;
}
  @media (max-width: 600px) {
    .utc_hide_xs {
      display: none;
    }

    .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: #daf6ff;
    opacity: 0.6;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1),  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;
    }

.offcanvas-title {font-size: 1.1rem!important}      
}

 #button_block .btn {margin-right: 8px}

    .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: -5%;left: 50%;}
    .hls-enabled img {height:60px; border-radius:40px;
    }
    .hls-enabled .img1 {transform: rotate(20deg);}
  @media (max-width: 390px) and (min-width: 350px)  {
    .leftOffcanvasUTC {display: none;} 
      .enabled {position: absolute;top: -9%;left: 37%;}
        }
        @media (max-width: 500px)  and (min-width:390px) {
      .enabled {position: absolute;top: -9%;left: 40%;}
        }
 @media (max-width: 349px) {
            .enabled {position: absolute;top: -16%;left: 33%;}
         }

  .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-dark-stepan{
  border-radius: 40px;
  background: url(https://main.omfm.ru/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;
}
.modal-content-dark-stepan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  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(https://main.omfm.ru/assets/img/3xN23mT0F0bPNNpAHdl59Pf1qgT3.png) 50% 50% no-repeat;
  background-size:  cover;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
body::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;

}
.background-general {

  background: url(https://main.omfm.ru/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%;
}
.background-general::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;

}
#myVideo {
  position: fixed; 
  opacity: 0.3;
  min-width: 100%;
  min-height: 100vh;
  z-index: -1;
}
 #sphere {
  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: #36013F!important;
}
@media screen and (min-width: 800px) {
#icont {margin-right: 8px; }
}

.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%;}

.copybutton  {background: orangered;}
.copybutton:hover  {background: red;}
.copybutton:active  {background: white;}
.gifbg {
position: absolute;
background: url(https://rock.omfm.ru/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: block;
}
  #chakra {font-size: 28px;}

    #menu-faq  {background: rgba(0, 0, 0, 0.8) !important; width: 470px;    }
  #diviframe, #iframe1 { height:150vh; }
    
@media (max-width: 1200px) and (min-width: 1000px) {
  #algeron2,#algeron p {font-size: 0.8em ;}
  #chakra {font-size: 20px}
     #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: 13px;}
.quote {font-size: 12.5px !important;}
.writer {font-size: 13px; }
.omback i {font-size: 15em!important;}
.gifbg {display: block;}
#chakra {font-size: 13px}
  #menu-faq  { width: 400px;}
}

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

 }

@media (max-width: 500px) and (min-width: 200px) {
#diviframe, #iframe1 { height:165vh; }
#button_block .btn {margin-right: 0px}

}
@media (max-width: 375px) and (min-width: 350px) {
.gifbg {display: block;}
.mcont {font-size: 12px;}
.quote {font-size: 11px !important;}
.writer {font-size: 12px; }
#chakra {display: none;}
.moon {opacity: 1;
    width: 22em !important;
    height: 22em !important;}
 .omback i {font-size: 11em!important;}
  #menu-faq  { width: 320px;}
}
@media screen and (max-width: 349px) {
.gifbg {display: block;}
.mcont {font-size: 11px;}
.quote {font-size: 10px !important;}
.writer {font-size: 11px; }
#chakra {display: none;}
.moon {opacity: 1 ;
    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, #moon1 {
  width: 30em;
  height: 30em;
  border-radius: 50%;
  background-color: black;
  background-position: center;
  background-size: cover;
  background-image: url('https://rock.omfm.ru/assets/img/skull3.png') ;
  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%);
    opacity: 0.5;
}
.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;
 }