* {
    /*box-sizing: border-box;*/
}
body { font-family: 'Orbitron', sans-serif; width: 100%; margin: 0; padding: 0; color: #101336; }

a { text-decoration: none; color: #101336; }

a:hover { color: #56A3A6; }

h2 { font-weight: bold; color: #101336; margin: 15px;}

.container { display: flex; flex-direction: column; background-color: #C0D8E0; }

header { display: flex; flex-direction: column; flex-wrap: wrap; min-height: 100px; margin: 0; padding: 0; border-bottom: 5px solid #FF312E; width: 100%; }

.clear { display: block; clear: both;}

.sb-header {

}

#logo { display: flex; max-width: 20%; min-width: 380px; background-color: #C0D8E0; }

#logo a { display: flex; }

.logo_img { width: 90px; padding: 5px; }

#logo img { border-radius: 8px; width: 90px }

.logo_text { font-size: 1.25em; font-weight: bold; margin: 20px 12px; }

.menu-icon, .x-icon { background-color: #56A3A6; font-size: 2em; text-align: center; padding: 5px 0; }
.x-icon { display: none; }

nav { display: none; flex-grow: 2; align-self:stretch; text-align: center; background-color: #C0D8E0; }

nav ul { list-style: none; display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; font-weight: 800; height: 100%; }

nav ul li { flex-grow: 1; display: flex; margin: 6px 12px; }

#socialMediaBox { display: none; }
.socialMediaIcons { flex-grow: 1; margin: 0 auto; }
.socialIconHeader { color: #ff312e; font-size: 2em; }

.home h1 { font-size: 2em; margin: 0; padding: .5em 0; text-shadow: 2px 2px #56A3A6; }

.sb-content { display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; }

.hyperspace-bar {
    overflow: hidden;
    background: #000;
    text-align: center;
    width: 100%;
    height: 50px;
}

.hyperspace-bar:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;    
}

.wall{
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/PIA09959-1280x800_copy.jpg);
  background-size: cover;
}

.scene{
  display: inline-block;
  vertical-align: middle;
  perspective: 5px;
  perspective-origin: 50% 50%;
  position: relative;
    z-index: 100;
}

.wrap{
  position: absolute;
  width: 1000px;
  height: 1000px;
  left: -500px;
  top: -500px;
  transform-style: preserve-3d;
  animation: move 12s infinite linear;
  animation-fill-mode: forwards;
}

.wrap:nth-child(2){
  animation: move 12s infinite linear;
  animation-delay: 6s;
}

.wall {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  animation: fade 12s infinite linear;
  animation-delay: 0;
}

.wrap:nth-child(2) .wall {
  animation-delay: 6s;
}

.wall-right {
  transform: rotateY(90deg) translateZ(500px);
}

.wall-left {
  transform: rotateY(-90deg) translateZ(500px);
}

.wall-top {
  transform: rotateX(90deg) translateZ(500px);
}

.wall-bottom {
  transform: rotateX(-90deg) translateZ(500px);
}

.wall-back {
  transform: rotateX(180deg) translateZ(500px);
}

@keyframes move {
  0%{
    transform: translateZ(-500px) rotate(0deg);
  }
  100%{
    transform: translateZ(500px) rotate(0deg);
  }
}

@keyframes fade {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.section-text {
    text-align: center;
}

.section-text p { margin: 20px 10%; text-align: left; }

.sb-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.sb-block h2 {
    width: 100%;
}

.sb-block ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    width: 100%;
}

.sb-block ul li {
    width: 50%;
    line-height: 4em;
    flex-grow: 1;
}

.audio-box { display: flex; width: 80%; background-color: #101336; border: 3px solid #ff312e; border-top-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0px 0px 0px 3px #101336; height: auto; flex-flow: column wrap; 
    /*background-image: url("/public/images/FTL_Background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
    /*flex: 1 auto;*/
    /*min-height: 300px;*/
}

.audio_box:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.audio-logo { flex-grow: 1; align-items: center; justify-content: center; }
.audio-logo img { width: 200px; margin-left: 10px; }

.audio-control-box { flex-grow: 1; display: flex; flex-flow: column wrap; }

.audio-episode { font-size: 1.1em; font-weight: bold; color: #ffffff; margin-top: 5px; }
.audio-date-published { color: #ffffff; font-size: .75em; margin: 5px 20px 0 0; }
.audio-date-published span { font-weight: bold; }

.audio-player-box { margin: 0; padding: 0; flex-flow: column wrap; }

#controls { display: flex; flex-flow: column wrap; border: 2px #FF312E solid; border-radius: 6px; padding: 0.6rem; background-color: #C0D8E0;  margin: 0.75em 0.5em 0.5em; }

.controls_wrapper { margin-top: 0px; }
.controls_wrapper > span {
	cursor: pointer;
    color: lightslategray;
    font-size: 2.5em;
    /*margin: 1rem;*/
}
.progress_wrapper { color: #101336; font-weight: bold; height: 40px; }
.progress_wrapper > span { cursor: pointer; font-size: 2em; }

span#playButton {
    display: inline-block;
}

span#pauseButton {
    display: inline-block;
}

.currentSong {
    overflow: hidden;
}

progress { width: 60%; height: 2rem; }

.blankTime { display: inline-block; width: 70px; }
.timeDisplay { display: flex; justify-content: space-between; font-size: 0.85em; min-height: 1.25em; margin: 0 15%; }
.timeDisplayTop { margin-bottom: 0px}
.timeDisplayBottom { margin-top: -8px; }

.timeDisplay span {
    margin: 0;
    padding: 0;
}

#currentTime { text-align: left; color: #101336; }

#remainTime { color: #101336;; }

#durationTime { text-align: right; color: #101336; margin-top: 0px; }

.volume { margin-top: 12px; }
.volumeLabel { margin-right: 1rem; font-size: 0.85em; margin-top: -3px; }

#volumeSlider {
    
}

.plusMinus {
    display: inline-block;
    font-size: .85em;
}

.content-flex-box { margin: 0 auto; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; }
.podcast-episode { position:relative; width: 80%; border: 3px solid #ff312e; margin: 15px 0; /*outline: 3px solid #101336;*/ border-top-right-radius: 20px; border-bottom-left-radius: 20px; box-shadow: 0px 0px 0px 3px #101336; padding: 18px; }
/*.podcast-episode:after { content: " "; display: block; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 2px solid #ff312E; } */

.podcastDate { float: left; font-size: 0.85em; }
.podcastEpisode { float: right; font-family: Arial; font-weight: bold; background-color: #ff312e; color: #fff; border: 2px solid #fff; border-top-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 0px 0px 0px 3px #ff312e; padding: 7px; }
.podcastTitle { font-weight: bold; clear: both; margin: 62px 0 12px 0; }
.podcastLaunch { position: absolute; bottom: 8px; right: 8px; font-weight: bold; font-size: 0.9em; }
.podcastLaunch a { color: #ff312e; }
.podcastLaunch a:hover { color: #56A3A6; }
.listenNow { margin-right: 8px; }
p.podcastDescription { margin: 22px 12px; }

.podcastSearchForm { width: 100%; margin: 0 auto;  text-align: center; }
.podcastSearchForm input { display: inline-block; text-align: left; width: 60%; }
.podcastSearchForm button { background-color: #ff312e; border: 2px solid #101336; height: 40px; padding: 0 15px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; font-size: 1.35em; }

.page-title { margin: 20px 0; }

.content-flex-box-reverse { margin: 0 auto; display: flex; width: 80%; flex-direction: row; flex-wrap: wrap; }

.podcastFiles { width: 80%; margin: 0 auto; border: 3px solid #ff312e; border-top-right-radius: 20px; border-bottom-left-radius: 20px; box-shadow: 0px 0px 0px 3px #101336; text-align: center; padding: 20px; margin}
.podcastFile { width: 100%; }
.podcastFileDesc { display:block; }

.pagination { width: 80%; margin: 12px auto; text-align: center; }
.pagination li { display: inline-block; padding: 0 8px; border: 1px solid #101336; width: 15px; height: 2em; vertical-align: middle; padding-top: 12px; }
.pagination .currentPage a { color: #ff312e; }

.footerWrap { background-color: #101336; border-top: 5px solid #FF312E; margin-top: 0; }
.footer_cmg { display: flex; width: 80%; margin: 0 auto; flex-direction: row; flex-wrap: wrap; }
.footerBox { width: 100%; }
.footerBox p { font-size: .75em; text-align: left; padding-bottom: 40px; }
.footerBox .logo_img { margin: 0 auto; }
.footerBox ul { text-align: left; margin-left: 60px; }
.footerBox li { margin: 10px 0; }
.footerBox li a { color: #fff; }
.footerBox li a:hover { color: #999; }
.socialIcon { color: #ff312e; font-size: 2em; }

@media screen and (min-width: 815px) {
    
    /*body{
        max-width: 60vw;
        font-size: 1.8rem;
    }*/
    
    header {
        flex-direction: row;
    }
    
    .sb-content {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        /*height: 100vh;*/
    }

    .menu-icon { display: none; }
    
    #main-menu {
        display: block;
    }
    
    nav ul {
        flex-direction: row;
    }
    
    nav ul li, .fb-block ul li {
        flex-grow: 1;
        flex-basis: auto;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
    }
	
	nav ul li:hover { /*border-bottom: 5px solid #56A3A6;*/ }
	nav ul li a:hover { border-bottom: 4px solid #ff312e; /*padding: 12px;*/ /*border-top-right-radius: 6px; border-bottom-left-radius: 6px; outline: 2px solid #101336;*/ }
    
	.socialIconHeader { display: block; padding-top: 15px; margin: 0 auto; }
	
    .sb-block ul li {
        max-width: 33%;
    }
	
	.audio-box { width: 80%; flex-flow: row nowrap; }
	.audio-logo { flex-basis: 18%; flex-grow: 0; }
	
	.audio-control-box { flex-flow: row wrap; }

	.audio-episode { flex-basis: 70%; font-size: 1.1em; font-weight: bold; color: #ffffff; margin-top: 5px; text-align: left; }
	.audio-date-published { flex-basis: 20%; color: #ffffff; font-size: .75em; margin: 10px 20px 0 0; text-align: right; }
	.audio-date-published span { font-weight: bold; }
	
	#controls { margin: 1.5em 0.5em 0.5em; }
	
	progress { width: 80%; }
	
	.audio-player-box { flex-grow: 1; }
	
	.controls_wrapper { margin-top: -8px; }
	
	.timeDisplayTop { margin-bottom: -7px}

	.volume { text-align: right; margin-top: -20px; }
	
	.content-flex-box { width: 80%; justify-content: space-around; align-items: stretch; }
	
	.podcast-episode { /*width: 30%;*/ flex: 0 0 33.33%; margin: 15px 20px; max-width: 30%; }
	
	.podcastSearchForm { width: 60%; }
	
	.content-flex-box-reverse { flex-direction: row-reverse; flex-wrap: nowrap; }
	.podcastFiles { width: 50%; min-height: 200px; margin: 15px 0; }
	.podcastNotes { flex-grow: 1; }
	
	.footerBox { width: 25%; }
	.footerBox p { padding-bottom: 0; }
	.footerBox ul { padding-top: 60px; }
	
	#socialMediaBox { display: block; }
	.socialIcon { display: block;  padding-top: 60px; }
}