* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  width: 100vw;
  height: 100%;
  background-color: black;
  font-family: Verdana;
  overflow-x: hidden;
  /*font-family: 'Kaushan Script', cursive;*/
}

#container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
/*   grid-template-columns: auto;
  grid-template-rows: auto */
}

.top-menu {
  width: 100%;
  height: 50px;
  background-color: black;
  color: beige;
}

.top-menu ul {
/*   text-align: center; */
  min-width: 1000px;
  height: 100%;
    margin: 0px 0px;
  padding: 0px;
/*   list-item-style: none; */
/*     background: linear-gradient(to right, lightblue, #369 50%, #369, black, black); */
  background-image: 
 linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,.1), black),  url(https://i.pinimg.com/originals/e9/38/40/e9384051baae512f3c87a6989c919a9d.jpg);
  background-position: 0% 36.5%;
  background-size: cover;
  background-repeat: no-repeat;
}

.top-menu ul li {
  display: inline-block;
  width: 15%;
  height: 100%;
  margin: 0px -3px;
  padding:14px;
  border:0px solid white;
  background-color: black;
}

.top-menu ul li:hovr {
  color: white;
  background-color: transparent;
  cursor: pointer;
  height: 100%;
  margin:-14px -3px;
  padding:14px;
  text-shadow: 1px 1px 3px black;
}

.top-menu ul li.static-bg:hovr {
  background-color: black;
  cursor: default;
}

.ov-logo {
  position: absolute;
  top: 0px;
  left: 115px;
  font-family: arial;
  font-size: 2.6em;
  letter-spacing: -26px;
  background-image: url(../images/worldwide-broadcasting-icon.jpg);
  background-position: center center;
  background-size:cover;
  width: 50px;
  height: 50px; 
  color: transparent;
}

.current-view {
 display: flex;
 justify-content: space-evenly;
 flex-direction: column;
}

.current-view div {
  margin: 4px 0px;
}

.player {
  width: 100%;
  height: 150px;
  display: grid;
  grid-template-columns: 200px repeat(2, minmax(275px, 1fr)) 1fr;
  background-image: 
 linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,.1)),  url(https://i.pinimg.com/originals/e9/38/40/e9384051baae512f3c87a6989c919a9d.jpg);
  -webkitbackdrop-filter: blur(5px);
  background-position: 0% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #369;
  color: beige;
}

/*.play-show {
  position: relative;
  width: 100%;
  height: 100%;
  align-self: center;
  justify-self: center;
  font-size: 4em;
  border: 0px solid red;
}

.play-show i, .play-show svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.play-show button, .volume-wrap {
  position: absolute;
  margin: 0px auto;
  bottom: 3px;
}*/

.play-show {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-self: center;
  justify-self: center;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  align-content: space-around;
}

.volume-slider {
  justify-self:end;
}

/* input[type=range] !important {
  width: 75%;
} */

.volume-wrap {
  text-align: center;

}

.volume-display {
  font-size: 10pt;
  margin: 10px 0px 10px 0px;
  padding: 0px;
  
}

.current-track, .current-show {
  background-color: transparent;
  align-self: center;
}

.current-episode-track {
  font-weight:bold;
}

.current-artist-host {
  font-style: italic;
}

.current-content {
  display: flex;
  flex-direction:row;
}

.current-show-jumbo {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 400px;
  background-color: grey;
  background-image: 
    linear-gradient(to right, rgba(0,0,0, .7), rgba(0,0,0, .79)),
    url(../images/39533844-radio-wallpapers.png);
    background-size: cover, cover;
}

.on-air-wrap {
  color: white;
  justify-self: center;
  align-self: center;
  text-align: center;
  line-height: 2.5em;
  text-shadow : 3px 3px 7px black;
}

.on-air {
  background-color: white;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  text-shadow: none;
  margin: 0px 70px 50px;
}

.show-title {
  font-weight: bold;
  font-size: 3em;
  margin: 10px;
}

.show-title-sub {
  font-size: 1.5em;
}

.message, .upcoming {
  display: flex;
  height: 200px;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.message div {
  width: auto;
  height: auto;
  background-color: black;
  color: white;
  font-size: 1.4em;
  font-weight: bold;
  padding: 37px 20%;
}

.upcoming, .play-on-devices {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  background-color: #eee;
  height: 300px;
}

.upcoming {
  flex-direction: column;
}

.upcoming .upcoming-title {
  /*justify-self: start;*/
  font-size: 1.2em;
  font-weight: bold;
  width: calc((384px * 3) + (13px * 2));
  margin-bottom: 17px;
}

.upcoming-title {
  display: grid;
  grid-template-columns: 164px 1fr;
}

.upcoming-item-scroller {
  height: auto;
  width:calc((384px * 3) + (20px * 2));
  overflow-x : auto;
}

.upcoming-item-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.upcoming-item {
  width: 384px;
  height: 196px;
  background-image: url(https://cdn.theatlantic.com/assets/media/img/2015/05/07/_Atlantic_Radio_Host/1920.jpg?1431367124);
  background-size:cover;
}

.upcoming.schedule {
/*  flex-direction: column;
  justify-content: center;
  align-content: center;*/
  padding-top: 20px;
  height: 700px;
}

.schedule .upcoming-item-scroller {
  height: 100%;
  overflow: default;
}

.schedule .upcoming-item-wrap {
  grid-template-columns: repeat(3, 1fr);
  width:calc((384px * 3) + (20px * 2));
}

.schedule .upcoming-item {
  background-image: url(https://i2.wp.com/www.mtitecnologia.com.br/wp-content/uploads/2017/05/3d_human_robot_wallpaper_wide.jpg);
  background-position: center center;
}

.play-on-devices {
  position: relative;
  flex-direction: column;
  background-color: pink;
  align-content: center;
  /*background-image: url(https://line25.com/wp-content/uploads/2015/responsive/3.jpg), url(https://cdn.cultofmac.com/wp-content/uploads/2016/02/iphone-ipad-lock-home-hero-780x439.jpg), url(https://cdn57.androidauthority.net/wp-content/uploads/2017/01/Chrooma-best-live-wallpapers-featured-image.jpg),  url(https://i.pinimg.com/originals/f9/ff/da/f9ffda01753567a64dc196184f19b45e.jpg);*/
  background-image: url(https://cdn.cultofmac.com/wp-content/uploads/2016/02/iphone-ipad-lock-home-hero-780x439.jpg), url(https://cdn57.androidauthority.net/wp-content/uploads/2017/01/Chrooma-best-live-wallpapers-featured-image.jpg),  url(https://i.pinimg.com/originals/f9/ff/da/f9ffda01753567a64dc196184f19b45e.jpg);
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center center;
}

.play-on-devices::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;   
  width: 100%;
  height: 100%;
  background-image: url(https://i.pinimg.com/originals/f9/ff/da/f9ffda01753567a64dc196184f19b45e.jpg);
  background-size: cover;
  opacity: 0.79;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-backdrop-filter:blur(3px);
}

.play-on-devices .on-air {
  align-self: center;
  justify-content: center;
  padding: 7px;
  height:auto;
  width: auto;
  line-height: 1.5em;
  z-index: 2;
}

.brand-bar span, .brand-bar div, .brand-bar svg {
  width: 50px;
  height: 50px;
/*  padding: 7px;
*/  margin:10px;
  background-color: black;
}

.play-on-devices .brand-bar {
  align-self: center;
  justify-content: center;
  height: auto;
  width: auto;
  z-index: 2;
  background-color: black;
  border-radius: 10px;
  box-shadow: 0px 0px 17px inset grey
}


.blue-spacer {
  height: 70px;
  background-color: #369;
  background-image: url(https://i.pinimg.com/originals/f9/ff/da/f9ffda01753567a64dc196184f19b45e.jpg);
}

.blue-space div {
  height: 70px;
}

@font-face {
  font-family: 'Pixel';
  src: url('https://openvisionnetworks.com/radio/fonts/edundot.woff') format('woff'),
       url('https://openvisionnetworks.com/radio/fonts/edundot.ttf')  format('truetype');
}

.now-playing-episode-track {
  font-family: 'Pixel', Verdana;
  /* font-style: italic; */
  background-image: url(https://rare-gallery.com/uploads/posts/508900-Texture-Stripes.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color:dodgerblue;
  /* text-shadow: 3px 3px 7px rgba(255, 255, 255, .40); */
}
/* background-image: url(https://rare-gallery.com/uploads/posts/508900-Texture-Stripes.jpg);
background-size: cover;
background-repeat: no-repeat;
color: cornflowerblue;
text-shadow: 3px 3px 7px rgb(0 0 0 / 75%); */

.material-icons { cursor: pointer; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-52 { font-size: 52px; }
.material-icons.md-64 { font-size: 64px; }
.material-icons.md-72 { font-size: 72px; }

.mobile-player { display: none; }

.station-wrap {
  position: relative;
  font-family: arial;
  font-size: 20pt;
  width: 95%;
  text-align: center;
  padding-top: 10px;
  background-color:rgba(255,255,255, 0.2);
  margin: 12px;
  border-radius: 5px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.station-number {
  position: relative;
  font-size: 34pt;
  font-weight: bolder;
  background-color: #369;
  color: white;
  left: 50%;
  border: 1px solid black;
  width: 61px;
  height: 61px;
  line-height: 61px;
  border-radius: 50% 50%;
  transform: translateX(-50%);
}

.station-slider {
  position: relative;
  left: 50%;
  width: 90% !important;
  transform: translateX(-50%);
}

.time-weather {
  position: absolute;
  left:5px;
  top: 5px;
  text-align: left;
  font-size: 9pt;
}
/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

    #container {
      display: none;
    }

    .mobile-player {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background-color: black;
      display: block;
      overflow: hidden;
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

    body {
      overflow: hidden;
    }

    #container {
      display: none;
    }

    .mobile-player {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background-color: black;
      display: block;
      overflow: hidden;
    }

    .mobile-player .player {
      display: grid;
      grid-template-columns: 200px repeat(2, minmax(275px, 1fr));
    }

    .station-wrap {
      grid-column: 1/end;
    }

    .station-slider {
      width: 75% !important;
    }

    .dial {
      grid-column: 1/end; 
      color: black !important;
    }

    .dial-button {
      color: black !important;
    }

    .player {
      height : 100%;
    }


}