@media (orientation: landscape) {
  .player {
  width: 70%;
  height: 89%;
  float:left;
  transition: 0.5s;
  }

  iframe {
    border: none;
  }

  

  .playlist {
  width: 30%;
  height: 89%;
  float:left;

  }

  nav {
    height: 11% !important;
    transition: 0.25s;
  }
  .navbar {
    padding: 0.1rem 1rem;
    transition: 0.25s;
  }
  .navbar-collapse collapse show {
    height: 15%;
  }
  

  .colex {
    position: absolute;
    font-size: 1.5em;
    top:50%;
    right:30%;
    color: white;
    z-index: 1;
    background-color: orange;
    border-radius: 30px;
    transition: 0.5s;
  }
}

@media (orientation: portrait) {
  .player {
    width:100%;
    height:30%;
  }
  .playlist {
    width: 100%;
    height:62%;
  }
  
  .colex {
    display: none;
  }


  nav {
    height: 8% !important;
    transition: 0.25s;
  }
  .navbar {
    padding: 0.5rem 1rem;
    transition: 0.25s;
  }



}

.player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.playlist iframe {
    width: 100%;
    height: 100%;
    border: none;
  }



body {
  background-color: rgb(40,40,40);
  
}

/* Override some bs. Courses page title otherwise gets smaller if the page gets wider (i.e. >768px) */
@media (min-width: 768px){
.col-md-6 {
  max-width: 100%;
}

}

.h3, h3 {
  color: white;
}