/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* /tune-in/ */
/* .page.page-id-31445.et_fixed_nav.et_show_nav #page-container {
    padding-top: 0px !important;
	
} */

body.page.page-id-31445.et_fixed_nav.et_show_nav {
	    /* overflow-y: hidden!important; */
}

/* mobile screen */
@media only screen and (max-width: 767px) {
    /* .page.page-id-31445 .et_pb_section {
        padding-bottom: 50%;
    }  */
    
    .page.page-id-31445 .et_pb_code_inner {
        /* margin-top: 50%;
        margin-bottom: 75%; */
    }
    body.page.page-id-31445.et_fixed_nav.et_show_nav {
	    overflow-y: visible!important;
}


}

.page.page-id-31445 #animation_container{
    /* margin: 0!important; */
}


.page.page-id-31445 #animation_container{
    /* width: 1000px!important; */
    /* height: 1000px!important; */
}

#template-article-title h3{
    font-family: 'roboto'!important;
    color: #1C75BC;
    font-size: 22px;
}

.station-info-container *{
    color: #000!important;
}

.wp-block-jetpack-tiled-gallery #featured-image-attribution {
    display: none!important;
}


/* Ajax load icon */
.load-icon {
    display: none;
    position: fixed;
    bottom: 40%;
    left: 56%;
    transform: translate(-50%,0);
    width: 80px;
    height: 80px;
    z-index: 1;
  }
  .load-icon div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #cd0f1e;
    animation: load-icon 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  }
  .load-icon div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
  }
  .load-icon div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
  }
  .load-icon div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
  }
  @keyframes load-icon {
    0% {
      top: 8px;
      height: 64px;
    }
    50%, 100% {
      top: 24px;
      height: 32px;
    }
  }

  .page-control button {
    font-weight: bold;
    height: 25px;
    color: #ffffff;
    background-color: #cd0f1e;
    width: 85px;
    border-color: #cd0f1e;
    border-style: solid;
    border-radius: 5px;
    border-width: 0px;
  }
  .page-control button:hover{
    background-color: #9d0a16;
    border-color: #9d0a16;
    cursor: pointer;
  }

  div#episode-section {
    padding-top: 0px!important;
}

.dg-episode-partial .post-meta a {
    color: #c02b0a!important;
}

.page-selector{
  background-color: #cd0f1e;
    color: #ffffff;
    border-color: #cd0f1e;
    border-radius: 8px;
    -web-border-radius: 8px;
    -moz-border-radius: 8px;
    max-width: 100%;
    border-width: 1px;
}

.page-selector option{
  color:#fff;
}


/* Coverage Area Scroll Bar */
/* width */
.page-selector ::-webkit-scrollbar {
  width: 5px;
}
/* Track */
.page-selector ::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
/* Handle */
.page-selector ::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 15px;
}
/* Handle on hover */
.page-selector ::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


@keyframes jumpAndSquish {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  20% {
    transform: translateY(0) scaleY(0.5);
  }
  40% {
    transform: translateY(-50px) scaleY(1);
  }
  70% {
    transform: translateY(0) scaleY(0.5);
  }
  90% {
    transform: translateY(0) scaleY(1);
  }
}


.animated-jump {
  transform-origin: bottom;
  animation: jumpAndSquish 1s linear infinite;
}