/*  
    ----------- MEDIA_P.JS ----------------------------------------------------------------------------------------------------------
    ----------- AUDIO // VIDEO PLAYER -----------------------------------------------------------------------------------------------
    ----------- Routledge.com -------------------------------------------------------------------------------------------------------
    ----------- Companion Website Team ----------------------------------------------------------------------------------------------
    ----------- Written by James Douglas --------------------------------------------------------------------------------------------
    ----------- Version 1.0 (March 2014) --------------------------------------------------------------------------------------------
*/

/* ------------------------------- FONT STYLING ------------------------------- */

.audiotitle > h1 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.5);
    font-size: 2em;
    overflow: hidden;
    padding-left: 40px;
    padding-right: 40px;
    position: absolute;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.superTitle {
    display: inline;
    font-size: 1.2em;
    font-weight: bold;
    overflow: hidden;
    padding-left: 10px;
    top: 9px;
    color:#343131;
    position: relative;
    text-align: center;
}
.active{color:#000;}






/* Playlist Styling */

.playlist{list-style:none;margin-top:-5px;}
.sm{margin-left:0;margin-top:10px;margin-bottom:10px;padding:0;}

.playlist li, .sm li{
    background: rgba(0,0,0,0.1);
    position:relative;
    height: 44px;
    margin: 5px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor:pointer;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

.sm li{margin:0;}
.liSuperTitle{background: rgba(0,0,0,0.4) !important;}
.plItemani:hover{color:rgba(255,255,255,0.8);}
.plItemani {
    left: 0px;
    position: relative;
    overflow:hidden;
    text-overflow: ". . .";
    white-space: nowrap;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.playlist span{text-align:center;margin:1px;}
.trackthumb{
    font-size:2em;
    width:50px;
    display:inline-block;
    position:relative;
    top:-1px;
    text-align:center;
    cursor:pointer;
    background:none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease;  
}
.trackTitle, .trackTitle_spaced{
    top:-6px;
    left:10px;
    position:relative;
    cursor:pointer;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.trackTitle:before, .trackTitle_spaced:before{background:#222;height:10px;width:2px;position:relative;}
.trackTitle_spaced{top:-12px;}
.trackLength{
    font-size:0.5em;
    position:absolute;
    left:80px;
    top:-46px;
    width:50px;
    padding:0px;
    margin:0px;
    display:block;
}
.splash{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
    width:100%;
    color: rgba(255, 255, 255, 0.2);
    position:relative;
    top:0;
    text-align: center;
    z-index:300;
    height:50vh;
}
.playlist_media_type, .single_media_type{text-align: center;background:rgba(0,0,0,0.7);}

/* Media Controls */
.media_controls {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: #888888;
    height: 41px;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    width: 100%;
    z-index:100;
}
.media_buttons{
    font-size: 20px;
    top: 4px;
    min-width:44px;
    position:relative;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.kill_mediap {font-size: 3em;position: absolute;right: -42px;top: -53px;}
.kill_mediap i{color: rgba(255, 0, 0, 0.5);cursor:pointer;}
.kill_mediap i:hover{color: rgba(255, 255, 255, 0.5);}
#annotation_button{display:none;}
.rmp {margin-bottom: 20px;overflow: hidden;padding: 0 0 0 15px;}
video {width: 100%;margin-bottom: -6px;}
.youtube {margin-bottom: -5px;position: relative;z-index: 100000;}
.progress_timer, .sprogress_timer{margin-left:20px;position: relative;top: 6px;}
.progress_duration, .sprogress_duration{position: relative;top: 6px;}
.progress_duration:before, .sprogress_duration:before{content: "/";padding-left:5px;padding-right:5px;}
.media_controls > .fa-play {padding-right:14px;}
.largeTimer {color: rgba(255, 255, 255, 0.2);font-size: 5em;padding-bottom: 15vh;padding-top: 15vh;position: relative;}
.playcontent {
    display: none;
    color:#fff;
    font-size: 8vw;
    height: 200px;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    opacity: 0.2;
    position: absolute;
    top: 50%;
    width: 200px;
}

.playlist_media_type:hover > .playcontent{opacity: 0.4;}

/*--------------Annotations-----------------------*/
.trackAnnotation {font-size: 0.5em;font-weight: bold;left: 62px;position: absolute;top: 26px;}
.annotations {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    display: none;
    height: 25vh;
    top: 100%;
    width: 100%;
    z-index: 100;
    overflow:hidden;
}
.preload_annotation {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    list-style: none outside none;
    margin: 5px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    position: relative;
}
.annotations ul{margin:0;padding:5px;position:relative;}
.topofthelist{color:rgba(255,255,255,0.5);}
.flash_active{animation: highlight 3s;-o-animation: highlight 3s;-webkit-animation: highlight 3s;-moz-animation: highlight 3s;}
@keyframes highlight {0% {color: #ffffff;} 100% {color:rgba(255,255,255,0.5);}}
@-webkit-keyframes highlight {0% {color: #ffffff;} 100% {color:rgba(255,255,255,0.5);}}
@-moz-keyframes highlight {0% {color: #ffffff;} 100% {color:rgba(255,255,255,0.5);}}
@-o-keyframes highlight {0% {color: #ffffff;} 100% {color:rgba(255,255,255,0.5);}}
/*--------------------------Animated Splash-----------------------------*/
.splash{text-align: center;white-space:nowrap;overflow:hidden;}
.ani_logo {animation: 0.3s ease 0s normal none 1 animatedLogo;-o-animation: 0.3s ease 0s normal none 1 animatedLogo;-webkit-animation: 0.3s ease 0s normal none 1 animatedLogo;-moz-animation: 0.3s ease 0s normal none 1 animatedLogo;color: rgba(255, 255, 255, 0.3);font-size: 2vw;left: 0; position: relative;text-align: center;top: 48%;width: 100%;}
@o-keyframes animatedLogo {
    0% {color:rgba(255,255,255,0);font-size:50vw;opacity:0;width:100vw;left:-25vw;top:0;text-shadow: 4px 4px 30px rgba(255, 255, 255, 0.8);}
    90%{opacity:0.5;color:rgba(255,255,255,0);text-shadow: 4px 4px 23px rgba(255, 255, 255, 0.5);}
    100% {color:rgba(255,255,255,0.53);font-size:2vw;opacity:1;width: 100%;text-shadow: 0px 0px 21px rgba(150, 150, 150, 0);}
}
@-moz-keyframes animatedLogo {
    0% {color:rgba(255,255,255,0);font-size:50vw;opacity:0;width:100vw;left:-25vw;top:0;text-shadow: 4px 4px 30px rgba(255, 255, 255, 0.8);}
    90%{opacity:0.5;color:rgba(255,255,255,0);text-shadow: 4px 4px 23px rgba(255, 255, 255, 0.5);}
    100% {color:rgba(255,255,255,0.53);font-size:2vw;opacity:1;width: 100%;text-shadow: 0px 0px 21px rgba(150, 150, 150, 0);}
}
@-webkit-keyframes animatedLogo {
    0% {color:rgba(255,255,255,0);font-size:50vw;opacity:0;width:100vw;left:-25vw;top:0;text-shadow: 4px 4px 30px rgba(255, 255, 255, 0.8);}
    90%{opacity:0.5;color:rgba(255,255,255,0);text-shadow: 4px 4px 23px rgba(255, 255, 255, 0.5);}
    100% {color:rgba(255,255,255,0.53);font-size:2vw;opacity:1;width: 100%;text-shadow: 0px 0px 21px rgba(150, 150, 150, 0);}
}
@keyframes animatedLogo {
    0% {color:rgba(255,255,255,0);font-size:50vw;opacity:0;width:100vw;left:-25vw;top:0;text-shadow: 4px 4px 30px rgba(255, 255, 255, 0.8);}
    90%{opacity:0.5;color:rgba(255,255,255,0);text-shadow: 4px 4px 23px rgba(255, 255, 255, 0.5);}
    100% {color:rgba(255,255,255,0.53);font-size:2vw;opacity:1;width: 100%;text-shadow: 0px 0px 21px rgba(150, 150, 150, 0);}
}
/*--------------------------Animated Slides-----------------------------*/
@-o-keyframes slide1 {0% {left:0;opacity:0;}50%{left:50%;opacity:0.9;}70&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-moz-keyframes slide1 {0% {left:0;opacity:0;}50%{left:50%;opacity:0.9;}70&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-webkit-keyframes slide1 {0% {left:0;opacity:0;}50%{left:50%;opacity:0.9;}70&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@keyframes slide1 {0% {left:0;opacity:0;}50%{left:50%;opacity:0.9;}70&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
.slide1{position:relative;animation: slide1 3s infinite;-o-animation: slide1 3s infinite;-webkit-animation: slide1 3s infinite;-moz-animation: slide1 3s infinite;}
@-o-keyframes slide2 {0% {left:0;opacity:0;}45%{left:50%;opacity:0.9;}65&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-moz-keyframes slide2 {0% {left:0;opacity:0;}45%{left:50%;opacity:0.9;}65&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-webkit-keyframes slide2 {0% {left:0;opacity:0;}45%{left:50%;opacity:0.9;}65&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@keyframes slide2 {0% {left:0;opacity:0;}45%{left:50%;opacity:0.9;}65&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
.slide2{position:relative;animation: slide2 3s infinite;-o-animation: slide2 3s infinite;-webkit-animation: slide2 3s infinite;-moz-animation: slide2 3s infinite;}
@-o-keyframes slide3 {0% {left:0;opacity:0;}40%{left:50%;opacity:0.9;}60&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-moz-keyframes slide3 {0% {left:0;opacity:0;}40%{left:50%;opacity:0.9;}60&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-webkit-keyframes slide3 {0% {left:0;opacity:0;}40%{left:50%;opacity:0.9;}60&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@keyframes slide3 {0% {left:0;opacity:0;}40%{left:50%;opacity:0.9;}60&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
.slide3{position:relative;animation: slide3 3s infinite;-o-animation: slide3 3s infinite;-webkit-animation: slide3 3s infinite;-moz-animation: slide3 3s infinite;}
@-o-keyframes slide4 {0% {left:0;opacity:0;}35%{left:50%;opacity:0.9;}55&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-moz-keyframes slide4 {0% {left:0;opacity:0;}35%{left:50%;opacity:0.9;}55&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-webkit-keyframes slide4 {0% {left:0;opacity:0;}35%{left:50%;opacity:0.9;}55&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@keyframes slide4 {0% {left:0;opacity:0;}35%{left:50%;opacity:0.9;}55&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
.slide4{position:relative;animation: slide4 3s infinite;-o-animation: slide4 3s infinite;-webkit-animation: slide4 3s infinite;-moz-animation: slide4 3s infinite;}
@-o-keyframes slide5 {0% {left:0;opacity:0;}30%{left:50%;opacity:0.9;}50&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-moz-keyframes slide5 {0% {left:0;opacity:0;}30%{left:50%;opacity:0.9;}50&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@-webkit-keyframes slide5 {0% {left:0;opacity:0;}30%{left:50%;opacity:0.9;}50&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
@keyframes slide5 {0% {left:0;opacity:0;}30%{left:50%;opacity:0.9;}50&{left:60%;}71%{opacity:0;}100% {left:150%;opacity:0;}}
.slide5{position:relative;animation: slide5 3s infinite;-o-animation: slide5 3s infinite;-webkit-animation: slide5 3s infinite;-moz-animation: slide5 3s infinite;}
.loading {color: #FFFFFF;height: 50px;margin-top: -25px;overflow: hidden;position: absolute;text-align: center;top: 50%;width: 100%;}
.loader_icons {left: -50%;font-size:0.1em !important;position: relative;}
#loader{color:#fff;opacity:0.5;}
/*-------------------------Animated Blink -------------------------------*/
.blink {animation-name: blinker;animation-duration: 2s;animation-timing-function: linear;animation-iteration-count: infinite;-webkit-animation-name: blinker;-webkit-animation-duration: 1s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;}
@-moz-keyframes blinker {0% { opacity: 1.0; }50% { opacity: 0.5; }100% { opacity: 1.0; }}
@-webkit-keyframes blinker {0% { opacity: 1.0; }50% { opacity: 0.5; }100% { opacity: 1.0; }}
@keyframes blinker {0% { opacity: 1.0; }50% { opacity: 0.5; }100% { opacity: 1.0; }}
/*--------------------------Modal-----------------------------*/

.modal_media{position: relative;z-index: 1000000;}
.mmediabk{background:rgba(0,0,0,0.9);width:100vw;height:100vh;position:fixed;top:0;left:0;z-index: 100000;}
.mmedia_container {background: none repeat scroll 0 0 #FFFFFF;display: block;position: fixed;top: 15vh;width: 50vw;max-width:800px;left:25vw;z-index: 100000;}

@media only screen and (min-width : 1500px){
    .mmedia_container {left:50vw;margin-left:-400px;}
}
/*--------------------------DEFAULT-----------------------------*/
.progress{
    border-radius: 0;
    margin-bottom:0;
    position: relative;
    top: 10px;
    width:35%;
}

.sprogress {
    border-radius: 0;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    top: 10px;
    width: 29vw;
}
/*-------------------------- Fert Fox -----------------------------*/
input.progress[type='range']::-moz-range-track,input.sprogress[type='range']::-moz-range-track {
    -moz-appearance: none;
    border: none;
    margin-left:20px;
    background-color: #888;  
    height: 20px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    color: #fff; 
    border-radius:0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    position: relative;
    top: 9px;
} 
input.progress[type='range']::-moz-range-thumb,input.sprogress[type='range']::-moz-range-thumb {
    -webkit-appearance: none;
    width:10px;
    height: 20px;
    border:none;
    border-radius: 0;
    background: #ffffff;
}
/*-------------------------- GERGEL CHRERM -----------------------------*/

input.progress[type='range']::-webkit-slider-thumb, input.sprogress[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:10px;
    height: 20px;
    border-radius: 0;
    border:none;
    background: #ffffff;
}

input.progress[type='range'],input.sprogress[type='range']{
   -webkit-appearance: none;
    background-color: #727272;
    border:0;
    padding:0;
}
/*-------------------------- MICROFAIL -----------------------------*/

input.progress[type='range']::-ms-thumb, input.sprogress[type='range']::-ms-thumb {
    -webkit-appearance: none;
    width:10px;
    height: 20px;
    border-radius: 0;
    border:none;
    background: #ffffff;
}

input.progress[type='range']::-ms-track, input.sprogress[type='range']::-ms-track {
    position: relative;
    top: -1px;
    background-color: #727272;
    padding:0;
    border:0;
    height:20px;
}

/*Iphone 5 @ 1pixel density*/
@media (min-width : 320px) and (max-width : 800px) {
    .rmp {margin: 15px;overflow: hidden;padding: 0;}
    .ani_logo {font-size: 6vw;}
    .playlist {border-bottom: 3px solid rgba(0, 0, 0, 0.5);margin: 0 0 20px;padding: 0;}
    .playlist li, .sm li {margin-left:0;margin-right:0;}
    .media_controls {height: 80px;position: relative;text-align: center;background:#343131;opacity: 1 !important;}
    .progress{display:none;}
    .progress_timer, .sprogress_timer,.progress_duration, .sprogress_duration {font-size: 1.5em;margin-left:0;}
    #annotation_button {display: inline-block;}
    .btn:focus, .btn:hover {color: #fff;}
    .mmedia_container {left: 0;max-width: 800px;top: 21vh;width: 100vw;}
    .kill_mediap {right: 0px;top: 0px;background: #343131;height: 44px;line-height: 0;padding: 0 5px 5px;height: 50px;}
    .largeTimer {font-size:2em;padding-top: 16vh;}
    .audiotitle > h1 {background: #343131; color: rgba(255, 255, 255, 0.5);height: 50px;line-height: 1.5;padding: 0;position:relative;}
    .playcontent {font-size: 30vw;opacity: 0.7;}
    .largeTimer {padding-top: 5vh;padding-bottom: 5vh;}
}
@media (min-width : 321px)and (max-width : 600px){.playcontent {font-size: 20vw;}}
@media (min-width : 1024px)and (max-width : 1025px){.playcontent {font-size: 14vw;}}
@media (min-width : 1026px)and (max-width : 1440px){.playcontent {font-size: 12vw;}}

@media (min-width : 600px) and (max-width:1023px){
    .rmp {margin: 0;padding:15px;}
    .audiotitle > h1 {padding-left:5px;}
    .media_controls {height:44px;text-align: center;}
    .playcontent {font-size: 20vw;}
    .playlist {margin: 16px 0 20px;}
    .largeTimer {font-size: 4em;padding-top: 8vh;padding-bottom: 8vh;}
    .media_buttons {top: 2px;}
    .loading{margin-left:-20px;}
    @keyframes animatedLogo {
        0% {color:rgba(255,255,255,0);font-size:50vw;opacity:0;width:100vw;left:-25vw;top:25vh;text-shadow: 4px 4px 30px rgba(255, 255, 255, 0.8);}
        90%{opacity:0.5;color:rgba(255,255,255,0);text-shadow: 4px 4px 23px rgba(255, 255, 255, 0.5);}
        100% {color:rgba(255,255,255,0.53);font-size:6vw;opacity:1;width: 100%;text-shadow: 0px 0px 21px rgba(150, 150, 150, 0);}
    }

}