/* new CSS for episode page */

/* for authors with long names: they're now always right-aligned */
.author-name{
  width: 110%;
  position:relative;
  right: 20px;
}
.second_author_row{
  padding-top: 45px;
}
@media(max-width:991px) {
  .author-name{
  padding:60px 0 20px 0;
  text-align: left;
  right: 0px;
  width: 100%
  }
}
.author-image {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media(min-width:1200px) {
  .author-image {
    width: 70%;
    margin-left:60px;
  }
  .previous-audiodoc{
    width: 1100px;
  }
}
@media only screen and (max-width:991px) {
  .author-image {
    display:none;
  }
}

/* TODO: This is the bit with with the abstract. I need to rename it and structure that
whole bit better (so that a single css attribute gives the grey box its colour) */
.previous-audiodoc{
  background-color: #F9F9F9;    /* #F8F8F8 */
  padding-top: 30px;
  border-radius: 15px;
  padding-bottom: 17px;
}
.text-only-previous-audiodoc{
  padding-bottom: 25px
}


.transcript{
  padding: 40px;
  text-align: justify;
  margin: auto;
}
.transcript p {
  line-height: 170%;
  }

@media(min-width:1200px){
  .transcript{
    width: 1000px;
  }
}
@media(max-width:991px) {
  .transcript{
    padding: 10px 35px;
  }
  .transcript p {
    line-height: 140%;
    font-size: 1.2em;
    }
}
@media(max-width:768px){
  .transcript{
    padding: 10px 60px;
  }
}
@media(max-width:599px){
  .transcript{
    text-align: left;
    padding: 4px
  }
}
/* this is added to the audiodoc page navbar to position the links properly */
.navbarADpage {
  padding: 0px 360px 20.5px 20px;
}
.navbarADpage_video {
  padding: 0px 250px 20.5px 20px;
}
@media(max-width: 768px){
  .navbarADpage {
    padding: 0px 0px 20.5px 20px;
  }
}
@media(max-width: 1200px) and (min-width:767px){
  .navbarADpage {
    padding: 0px 0px 20.5px 20px;
  }
}

/* STUFF FROM OLD AUDIDOC_PAGE.CSS */


/**/
/* scroll down arrow */

.audiodoc_abstract{
  font-size:20px;
}
.audiodoc_bio{
  font-size:20px;
  margin-bottom:20px;
  text-align: justify;
}
.audiodoc_narrate-credits, .download_audio_link{
  font-style:italic;
}
.download_audio_link{
  font-size: italic;
  padding-bottom: 25px;
}

.download_audio_link a{
  color: black;
}
.download_audio_link a:hover{
  color: #ffc21c;
}
.justify{
  text-align: justify;
}
@media(max-width:768px){
  .audiodoc_abstract{
    font-size:18px;
  }
  .audiodoc_bio{
    font-size:18px;
    margin-bottom:10px;
    text-align: left;
  }
  .audiodoc_narrate-credits{
    font-size:18px;
  }
}
.arrow_row{
  padding-top: 230px;
  padding-bottom: 130px; /* put padding-bottom at 130px: rather than 70px, as otherwise 1-line title don't fill the screen */
  /*height: 100%;*/
}
.arrow-wrap {
  position:absolute;
  z-index:1;
  left:50%;
  top:-5em;
  margin-left:-5em;
  background:#111;
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.4em;
  display:block;
  box-shadow:0px 0px 5px 0px #333;
}

@media(max-width: 561px){
.arrow-wrap{
  font-size:0.33em;
}
}

.arrow {
  float:left;
  position:relative;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}

.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}



  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }

  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }

/* the following makes the arrow opaque when you hover. The 'a_arrow' class means that
   this only applies to the arrow and not any other <a> tag
*/
a.a_arrow{
  opacity:0.8;
  text-decoration:none;
}

a:hover.a_arrow{
  color:#333;
  opacity:1;
}

@media only screen and (max-width:991px){
  .arrow_row{
    padding-top: 60px;
  }
}
@media(min-width:768px){
  #all_episodes{
    background-color: #ffc21c;
    border-radius: 5px;
    color: #27282D;
  }
}
/* end of scroll down arrow */
/**/
/* take off padding for the header (because there's the arrow on this page) */
header{
  text-align: center;
}
header .container {
    padding-bottom: 0px;
    padding-top: 300px;
}
@media(max-width:768px) {
    header .container {
        padding-top: 150px;
    }
}
@media(max-width:440px) {
  header .container {
  /*padding-top: 150px;
  padding-bottom: 150px;*/
  }
}
/* image credits stuff */
/* take of padding of section id=episodes (for image credits) */

#episodes{
  padding: 0;
  padding-bottom: 50px;
}
/* for the image credits */
.image_credits {
  padding-bottom: 40px;
  padding-top: 6px;
}
.image_credits p{
  font-size: 12px;
}
/* end of image credits stuff */
/**/
.by_author_in_subject{
  color: black;
  font-size:125%;
}

footer .footer-above{
  background-color: #FFC21C;
}
footer .footer-below{
  background-color: #FFC21C;
}
footer h3{
  color:#27282D;
}
footer .btn-social{
  color: #27282D;
  border: 2px solid #27282D;
}
footer .footer-info{
  color: #F5F5F5;
}

/*contains the video player*/
.video_div{
  padding-left: 150px;
  padding-right:150px;
  background-color:black;
  padding-top: 58px;
  height: 700px;
}
header .container_video{
  padding-top:300px;
  padding-bottom:230px;
}
#header_no_player{
  cursor:pointer;
}
.episode-title_video{
  font-size:42px;
}
.video_button_wrapper{
  margin-bottom:30px;
  height:100px
}
.video_author_info{
  color: black;
  font-size:18px
}
@media(max-width:768px){
  .video_div{
    padding-left: 15px;
    padding-right: 15px;
    height: 500px
  }
  header .container_video{
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media(max-width:414px){
  .video_button_wrapper{
    height:60px
  }
  .video_author_info{
    font-size:15px
  }
  .video_div{
    height: 250px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 40px;
  }
  .episode-title_video{
    font-size:25px;
  }
  header .container_video{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  #image_credits{
    padding-left: 10px;
  }
}

/* for text-only episodes */
.container > .text-only-margin{
  margin-right:110px;
}
@media(max-width:992px){
  .container > .text-only-margin{
    margin-right:0px;
  }
}
.text-only-abstract{
   margin-bottom:41px;
}
@media(max-width:991px){
  .text-only-abstract{
    margin-bottom:0px;
  }
}
@media(max-width:991px) {
  .text-only-author-name{
  padding-top:10px;
  }
}

/* TRANSCRIPT IMAGES */
.fancybox-image{
  border-radius: 4px;
}
.figure_transcript_middle{
  text-align:center;
  padding-top: 1.5em;
  padding-bottom:0.8em;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding-left: 4em;
  padding-right: 4em;
  width: 75%;
  margin: auto;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}
.figure_transcript_left{
  float: left;
  margin: 1em 1.3em 0 0;
  background-color:#F9F9F9;
  padding-top: 2em;
  padding-right:2em;
  padding-left:2em;
  padding-bottom:1.5em;
  text-align:center;
  max-width: 50%;
  border-radius: 5px;
}
.tr_image_left{
  max-width: 100%;
  min-width: 55%;
  max-height: 550px;
  margin-bottom:1em;
  border-radius: 3px;
}
.tr_image_middle{
  max-width:100%;
  max-height: 600px;
  margin-bottom:9px;
  border-radius: 8px;
}
.figure_transcript_double{
  text-align:center;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-top: 1.5em;
  padding-bottom:0.8em;
  margin-left: 9%;
  margin-right:9%;
  background-color: #F9F9F9;
  padding-left: 30px;
  padding-right:30px;
  border-radius: 5px;
}
.tr_image_double{
  width:100%;
  height:100%;
  border-radius: 3px;
  padding-bottom: 0.8em;
}

@media(max-width:420px){
  .figure_transcript_left{
    margin-right: 0%;
    margin-left: 0%;
    padding-right:1em;
    padding-left:1em;
  }
}
@media(max-width: 730px){
 .figure_transcript_left{
   float:none;
   margin:auto;
 }
}
@media only screen and (max-width:991px) {
  .figure_transcript_middle{
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
  }
  .tr_image_left{
    width: 90%;
    height: auto;
  }
  .figure_transcript_left{
    margin-right: 0%;
    margin-left: 0%;
    padding-right:0em;
    padding-left:0em;
    max-width: 100%;
    margin-bottom: 1em;
  }
  .figure_transcript_double{
    text-align:center;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 1.5em;
    padding-bottom:0.8em;
    margin-left: 0;
    margin-right: 0;
    background-color: #F9F9F9;
    padding-left: 30px;
    padding-right:30px;
    border-radius: 5px;
  }
}