@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-Regular-webfont.eot');
    src: url('../webfont/openSans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-Regular-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-Regular-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-Regular-webfont.svg#open_sans') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-Italic-webfont.eot');
    src: url('../webfont/openSans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-Italic-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-Italic-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-Italic-webfont.svg#open_sans') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-Light-webfont.eot');
    src: url('../webfont/openSans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-Light-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-Light-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-Light-webfont.svg#open_sans') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-LightItalic-webfont.eot');
    src: url('../webfont/openSans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-LightItalic-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-LightItalic-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-LightItalic-webfont.svg#open_sans') format('svg');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-Semibold-webfont.eot');
    src: url('../webfont/openSans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-Semibold-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-Semibold-webfont.svg#open_sans') format('svg');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-SemiboldItalic-webfont.eot');
    src: url('../webfont/openSans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-SemiboldItalic-webfont.svg#open_sans') format('svg');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-Bold-webfont.eot');
    src: url('../webfont/openSans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-Bold-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-Bold-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-Bold-webfont.svg#open_sans') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('../webfont/openSans/OpenSans-BoldItalic-webfont.eot');
    src: url('../webfont/openSans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/openSans/OpenSans-BoldItalic-webfont.woff') format('woff'), url('../webfont/openSans/OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('../webfont/openSans/OpenSans-BoldItalic-webfont.svg#open_sans') format('svg');
    font-weight: 700;
    font-style: italic;
}

#blender { position: absolute; bottom: 100px; right: 100px; max-width: 600px; }

/**************************/
/******** LAYOUT **********/
/**************************/
body, html { width: 100%; height: 100%; font-family: open_sans; font-size: 24px; margin: 0; }
body a { color: #223a82; }
#container, div.slide { height: 100%; background-color: transparent; }
#dashboard { height: 35px; width: 100%; position: fixed; top: 0px; z-index: 1010; }
#dashboard div.header { height: 0px; overflow: hidden; width: 101%; position: relative; }
#dashboard div.header iframe { position: absolute !important; }
#dashboard div.handle { width: 100%; height: 30px; }
#dashboard div.handle a { display: block; position: absolute; right: 40px; background-color: #FFF; padding: 5px 15px; height: 30px; border: solid 1px #FFF; border-radius: 0px 0px 10px 10px; color: #444; font-size: 14px; text-decoration: none; }

#container { width: 100%; }
#container .slide .content .container { margin-bottom: 50px; padding-top: 30px; }
div.content div.container div.row { margin-left: 0px; margin-right: 0px; }
div.content div.container div.context p { font-size: 0.8em; }

#partner-logo { width: 200px; height: 76px; position: absolute; left: 0px; top: 0px; z-index: 1001; background-image: url('../img/logo-rbc-small.png'); background-repeat: no-repeat; background-color: rgba(255,255,255,0.5); background-position: center center; background-size: 180px; }
#header-print { display: none; }
.printable { display: none; }
img.print_alt { display: none; }

.browser-restriction { position: fixed; bottom: 60px; left: 0px; width: 100%; height: 30px; text-align: center; color: #FFF; background-color: #000; font-size: 16px; padding: 5px; }

/**************************/
/********* FOOTER *********/
/**************************/
div.copy { text-align: center; font-size: 10px; width: 100%; }
div.tools { width: 100%; position: fixed; bottom: 0px; height: 60px; background-color: rgba(255, 255, 255, 0.75); box-shadow: 3px 0px 10px #444; padding: 20px; z-index: 1000; }
div.tools .function { position: relative; float: left; width: 35px; height: 30px; opacity: 0.2; margin-left: 10px; overflow: hidden; }
div.tools .function a { display: block; }
div.tools .function span { display: block; text-indent: -999px; }
div.tools .function h2 { font-size: 22px; }
div.tools .function .close { width: 20px; height: 20px; margin: -20px; }

div.tools #voiceover-bar { background-repeat: no-repeat; background-position: -50px -155px; background-image: url('../img/sprite.png'); }
div.tools #voiceover-bar.player { width: 260px; height: 80px; overflow: visible; }
div.tools #transcript-bar { background-image: url('../img/sprite.png'); background-repeat: no-repeat; background-position: -155px -155px; }
div.tools #instructions-bar { background-image: url('../img/sprite.png'); background-repeat: no-repeat; background-position: -26px -483px; }
div.tools #print-bar { background-image: url('../img/printer.png'); background-repeat: no-repeat; background-position: center; opacity: 1; cursor: pointer; }
div.tools #share-bar { width: 60px; opacity: 1; display: none; }
div.tools #tips-box { position: fixed; right: 20px; bottom: 80px; display: none; }
div.tools #tips-box a:hover { text-decoration: none; }
div.tools #tips-box a { color: #FCDF00; font-size: 20px; font-weight: 600;  }
div.tools #tips-box img { width: 60px; height: auto; }
div.tools #tips-box span { display: block; width: 60px; margin: -32px 0 0 7px; height: 32px; }

div.tools #instructions-bar.active { opacity: 1; cursor: pointer; }
div.tools #voiceover-bar.active { opacity: 1; cursor: pointer; }
div.tools #transcript-bar.active { opacity: 1; cursor: pointer; }
div.tools div.tips-box { display: none; height: 1px; width: 1px; font-size: 14px; box-shadow: 5px 5px 20px #888888; border: solid 1px #EEE; padding: 30px; background-color: #fff; overflow: hidden; bottom: 80px; right: 0; position: absolute; z-index: 1000; }
div.tools div.instructions,
div.tools div.transcript { display: none; height: 1px; width: 1px; font-size: 14px; box-shadow: 5px 5px 20px #888888; border: solid 1px #EEE; padding: 30px; background-color: #fff; overflow: hidden; bottom: 65px; left: 0; position: absolute; z-index: 1000; }

div.transcript { display: none; }
div.tools div.tips-box.open,
div.tools div.instructions.open,
div.tools div.transcript.open { -webkit-overflow-scrolling: touch; display: block; overflow-y: scroll; }

div.tools div.audio { position: absolute; margin-top: -20px; }
div.tools div.audio .mejs-controls { position: absolute; margin-top: -5px; }

div.tools .autoplay { font-size: 10px; color: #777; width: 125px; position: absolute; right: 275px; top: 20px;  }
div.tools .autoplay input { margin: 5px 0 0 -16px; }

#progress-bar { width: 440px; position: absolute; left: 50%; margin-left: -210px; margin-top: -10px; }

span.intro-nav-label { display: block; font-size: 10px; position: absolute; left: 20px; top: -10px; border-left: solid 1px #223a82; width: 134px; text-align: center; border-right: solid 1px #223a82; color: #223a82; font-weight: bold; }
ul.unit-progress { padding: 0px; margin: 0px; }
ul.unit-progress li { position: relative; padding: 0px; margin: 0px; display: inline-block; width: 15px; height: 20px; background-color: #DDD; cursor: pointer; border-right: solid 1px #DDD; }
ul.unit-progress li a { display: inline-block; position: absolute; top: 0px; left: 0px; width: 15px; height: 20px; font-size: 1px; color: #DDD; text-decoration: none; text-indent: -100px; overflow: hidden; }

ul.unit-progress li.intro { background-color: #428bca; border-right: solid 1px #DDD; }
ul.unit-progress li.intro.viewed { background-color: #223a82; border-right: solid 1px #DDD; }
ul.unit-progress li.viewed { background-color: #AAA; border-right: solid 1px #EEE;  }


ul.unit-progress li.current { background-color: #444; height: 22px; }
ul.unit-progress li.current a { border: none; }
/*ul.unit-progress li.viewed { background-image: url('../img/page-checked-bold.png'); background-repeat: no-repeat; background-position: center center; }*/


/******* RESPONSIVE *******/
@media (max-width: 1100px) {
    div.tools .autoplay { display: none; }
}

@media (max-width: 1024px){
    body div.tools #progress-bar { margin-left: -160px; }
    body div.tools #progress-bar ul { zoom: 0.8; }
    body div.copy { margin-left: -48px; }
}

@media (max-width: 768px){
    body { background-size: cover; }
    /*body div.copy { position: absolute; top: -35px; width: 250px; text-align: right; font-size: 9px; margin-right: 20px; right: 120px; margin-left: 0px; }*/
    /*div.tools { height: 75px; }*/
    div.tools div.function { zoom: 0.9; margin-top: -10px; }
    /*body #progress-bar { bottom: 0px; width: 100%; margin-top: 0px; margin-left: 0px !important; left: 35px;  }
    body #navbar { bottom: 5px; }
    body #navbar a { padding: 5px 15px; }
    body #navbar a#next-button { margin-right: 20px; }*/
}

/**************************/
/********   NAV  **********/
/**************************/
#navbar { position: fixed; bottom: 10px; right: 0px; clear: both; }
#navbar a { display: block; padding: 10px 20px; float: left; margin-right: 20px; text-decoration: none; font-size: 16px; }
#navbar a#back-button { background-color: #DDD; }
#navbar a#next-button { background-color: #223a82; color: #FFF; margin-right: 40px; }
/*Pour permettre l'affichage des call-to-action relativement à la position du bouton*/
#navbar > a { position: relative; }
#navbar .nav-tooltip { position: absolute; bottom: 100%; right: 35%; margin: 0 100% 7px 0; display: none; }
#navbar .nav-tooltip p { text-align: right; float: right; color: #000; font-size: 12px; }
#navbar .nav-tooltip-next p{ width: 500px; }
#navbar .nav-tooltip .nav-arrow { width: 60px; height: 30px; background: url("../img/case-small-arrow.png") no-repeat right bottom; float: right; position: absolute; right: -60px; bottom: 0; }

/* MEDIAS */
.voiceover { background-color: #223a82; height: 12px; }
.case-story { background-color: #f39c12; height: 12px; }
.interactive-activity { background-color: #f1c40f; height: 12px; }
.advice-expert { background-color: #9b59b6; height: 12px; }
.family-interview { background-color: #2ecc71; height: 12px; }
.peer-expert { background-color: #2ecc71; height: 12px; }

.slide.voiceover .header .container { background-color: #223a82; }
.slide.case-story .header .container { background-color: #f39c12; }
.slide.interactive-activity .header .container { background-color: #f1c40f; }
.slide.advice-expert .header .container { background-color: #9b59b6; }
.slide.family-interview .header .container { background-color: #2ecc71; }
.slide.peer-expert .header .container { background-color: #2ecc71; }

.slide.voiceover .header .container h1 {  text-shadow: 1px 1px 2px #888; }
.slide.case-story .header .container h1 {  text-shadow: 1px 1px 2px #888; }
.slide.interactive-activity .header .container h1 {  text-shadow: 1px 1px 2px #888; }
.slide.advice-expert .header .container h1 {  text-shadow: 1px 1px 2px #888; }
.slide.family-interview .header .container h1 {  text-shadow: 1px 1px 2px #888; }
.slide.peer-expert .header .container h1 {  text-shadow: 1px 1px 2px #888; }

.slide .header h1 span { display: none; }

.slide.voiceover .content .container h2 { color: #223a82; text-shadow: 1px 1px 2px #888; }
.slide.case-story .content .container h2 { color: #f39c12; text-shadow: 1px 1px 2px #888; }
.slide.interactive-activity .content .container h2 { color: #f1c40f; text-shadow: 1px 1px 2px #888; }
.slide.advice-expert .content .container h2 { color: #9b59b6; text-shadow: 1px 1px 2px #888; }
.slide.family-interview .content .container h2 { color: #2ecc71; text-shadow: 1px 1px 2px #888; }
.slide.peer-expert .content .container h2 { color: #2ecc71; text-shadow: 1px 1px 2px #888; }

/*****************************/
/********   AUDIO  ***********/
/*****************************/
/* AUDIO ANIMATION */
div.slide.animation div.content div.container div.audio .mejs-container { display: none; }
div.slide.animation div.content div.container div.audio { width: 200px; position: fixed; top: 40%; left: 45%; height: 200px; background: url('../img/audio.png') no-repeat center center; background-size: cover; margin: 0; padding: 0; border: none;cursor: pointer; z-index: 9999; border-radius: 50px; }

div.slide.animation div.content div.container div.audio a.skip { display: none; }
div.slide.animation div.content div.container div.audio a.read { display: none; }
div.slide.animation div.content div.container div.audio a.howto { font-size: 24px; text-decoration: none; color: #828282; display: block; text-align: center; margin-top: 160px;}

/* AUDIO PLAYER */
div.audio a.skip { display: none !important; }
.mejs-button, .mejs-time { position: absolute; background: transparent; }
.mejs-controls .mejs-time-rail { position: absolute; left: 70px; top: 45px; height: 10px; }
.mejs-controls .mejs-time-rail .mejs-time-total { background-color: transparent; height: 6px; }
.mejs-controls .mejs-time-rail .mejs-time-buffering { height: 6px; }
.mejs-controls .mejs-time-rail .mejs-time-loaded { background-color: rgba(255,255,255,0.3); width: 0; height: 6px; }
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 6px; background-color: #223a82; border: solid 1px #223a82; border-width: 1px 0; border-color: #223a82 #fff #619FF2 #fff; }
.mejs-controls .mejs-time-rail .mejs-time-handle  { display: block; margin: 0; width: 16px; height: 9px; top: -3px; border: 0; background: url('../img/controls.svg') no-repeat 0 -80px; }
.mejs-controls .mejs-time-rail .mejs-time-float { display: none; }
.mejs-controls .mejs-time-rail .mejs-time-float-current { font-size: 10px; padding-top: 5px; }
.mejs-controls .mejs-playpause-button { top: 0px; left: 0px; margin: 0px; width: 63px; height: 63px; }
.mejs-controls .mejs-playpause-button:focus { border: none; }
.mejs-controls .mejs-playpause-button button { width: 63px; height: 63px; background: url('../img/sprite.png') no-repeat -316px -144px; margin: 0; padding: 0; border: none; }

.mejs-controls .mejs-button.loading button { background: url('../img/loading.gif') no-repeat center center; margin: 0; padding: 0; border: none; }

.mejs-controls .mejs-pause button  { background-position: -800px -221px; }
.mejs-controls .mejs-currenttime-container  { position: absolute; top: 20px; left: 70px; color: #828282; font-size: 20px; }
.mejs-controls .mejs-duration-container  { position: absolute; top: 20px; color: #828282; font-size: 20px; right: 0px; }
.mejs-controls .mejs-volume-button  { display: none; }
.mejs-controls .mejs-fullscreen-button  { display: none; }
.mejs-controls .mejs-captions-button { display: none; }
.mejs-controls div.mejs-time-rail { direction: ltr; width: 200px; padding-top: 5px; }
.mejs-controls .mejs-time-rail span { display: block; position: absolute; width: 180px; height: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer; }
.mejs-controls .mejs-time-rail .mejs-time-total { margin: 5px; background: #333; background: rgba(50,50,50,0.8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); }
.mejs-controls .mejs-time-rail .mejs-time-buffering { width: 100%; background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 15px 15px; -moz-background-size: 15px 15px; -o-background-size: 15px 15px; background-size: 15px 15px; -webkit-animation: buffering-stripes 2s linear infinite; -moz-animation: buffering-stripes 2s linear infinite; -ms-animation: buffering-stripes 2s linear infinite; -o-animation: buffering-stripes 2s linear infinite; animation: buffering-stripes 2s linear infinite; }
.mejs-controls .mejs-time-rail .mejs-time-loaded { background: #3caac8; background: rgba(60,170,200,0.8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8))); background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8)); width: 0; }

#voiceover-bar.active.player { background-image: none !important; }
#voiceover-bar .howto { display: none; }
#voiceover-bar .mejs-button, #voiceover-bar .mejs-time { position: absolute; background: transparent; }
#voiceover-bar .mejs-controls .mejs-time-rail { position: absolute; left: 30px; top: 25px; height: 10px; }
#voiceover-bar .mejs-controls .mejs-time-rail .mejs-time-total { background-color: transparent; height: 6px; }
#voiceover-bar .mejs-controls .mejs-time-rail .mejs-time-buffering { height: 6px; }
#voiceover-bar .mejs-controls .mejs-time-rail .mejs-time-loaded { background-color: rgba(255,255,255,0.3); width: 0; height: 6px; }
#voiceover-bar .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 6px; background-color: #223a82; border: solid 1px #223a82; border-width: 1px 0; border-color: #223a82 #fff #619FF2 #fff; }

#voiceover-bar .mejs-controls .mejs-playpause-button { top: 23px; left: 0px; margin: 0px; width: 43px; height: 43px; }
#voiceover-bar .mejs-controls .mejs-playpause-button button { width: 63px; height: 63px; background: url('../img/sprite.png') no-repeat -316px -144px; margin: 0; padding: 0; border: none; -moz-transform: scale(0.5,0.5); -moz-transform-origin: 0 0; z-index: 1000; }
#voiceover-bar .mejs-controls .mejs-currenttime-container { position: absolute; top: 40px; left: 35px; color: #828282; font-size: 14px; }
#voiceover-bar .mejs-controls .mejs-currenttime-container span { text-indent: 0px; }
#voiceover-bar .mejs-controls .mejs-duration-container  { position: absolute; top: 40px; color: #828282; font-size: 14px; left: 190px; }
#voiceover-bar .mejs-controls .mejs-duration-container span { text-indent: 0px; }
#voiceover-bar .mejs-controls .mejs-pause { width: 43px; height: 43px; top: 23px; left: 0px; margin: 0px; }
#voiceover-bar .mejs-controls .mejs-pause button  { background-position: -800px -221px; }

/******* RESPONSIVE *******/
@media (max-height: 1000px){ div.slide.animation div.content div.container div.audio { zoom: 0.9; } }
@media (max-height: 900px){ div.slide.animation div.content div.container div.audio { zoom: 0.8; } }
@media (max-height: 800px){ div.slide.animation div.content div.container div.audio { zoom: 0.7; } }
@media (max-height: 700px){ div.slide.animation div.content div.container div.audio { zoom: 0.6; } }
@media (max-height: 600px){ div.slide.animation div.content div.container div.audio { zoom: 0.5; } }
@media (max-width: 1100px){ div.slide.animation div.content div.container div.audio { zoom: 0.7; } }
@media (max-width: 1024px){
    body #voiceover-bar .mejs-controls .mejs-time-rail { width: 60px; }
    body #voiceover-bar .mejs-controls .mejs-time-rail .mejs-time-total { width: 60px; }
    body #voiceover-bar .mejs-controls .mejs-time-rail .mejs-time-buffering {  }
    body #voiceover-bar .mejs-controls .mejs-time-rail .mejs-time-loaded { width: 60px; }
    body #voiceover-bar .mejs-controls .mejs-duration-container { left: 70px; }
    body #voiceover-bar .mejs-controls .mejs-duration-container span { font-size: 10px; }
    body #voiceover-bar .mejs-controls .mejs-currenttime-container span { font-size: 10px; }
}

/*****************************/
/********   SLIDES  **********/
/*****************************/
div.slide div.header div.container { width: 100%; padding: 10px 40px; margin: 0px; background-image: url('../img/square_bg.png'); background-repeat: repeat; }
div.slide.icon div.header { background-color: #223a82; width: 100%; height: 20%; min-height: 300px; }
div.slide.icon div.header div.container { max-width: 960px; height: 100%; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-position: left bottom; position: relative; }
div.slide.icon div.content { height: 80%; }
div.slide.icon div.content div.container { max-width: 960px; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-position: left bottom; padding-top: 10%; }

div.slide h1 { padding: 30px 0px; color: #fff; }


div.slide div.header div.container h1 { min-height: 63px; background-repeat: no-repeat; background-position: left center; margin-top: 0px; padding: 10px 0px; font-size: 24px; width: 90%; margin-left: 100px; }

div.slide.icon div.header div.container h1 { position: absolute; color: #FFF; left: 350px; bottom: 60px; font-size: 48px; line-height: 72px; margin-left: 0px; }
/*div.slide.basic div.header div.container h1 { background-image: url('../img/1startitle.png'); padding-left: 40px; }
div.slide.intermediate div.header div.container h1 { background-image: url('../img/2starstitle.png'); padding-left: 80px; }
div.slide.advanced div.header div.container h1 { background-image: url('../img/3starstitle.png'); padding-left: 120px; }*/

div.slide div.content div.container h2 { color: #223a82; padding-bottom: 10px; font-weight: 600; text-shadow: 2px 2px 15px #FFF; }

div.slide.intro div.header div.container { background-color: #223a82; }
div.slide.intro.icon div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); }

p.source { color: gray; font-style: italic; font-size: 14px; text-align: right; }

/*****************************/
/********   SPRITE  **********/
/*****************************/
span.sprite { display: block; background-repeat: no-repeat; background-image: url('../img/sprite.png'); overflow: hidden; }
span.sprite-intro { background-position: 0px 0px; width: 135px; height: 135px; }
span.sprite-1 { background-position: -142px 0px; width: 135px; height: 135px; }
span.sprite-2 { background-position: -284px 0px; width: 135px; height: 135px; }
span.sprite-3 { background-position: -426px 0px; width: 135px; height: 135px; }
span.sprite-4 { background-position: -568px 0px; width: 135px; height: 135px; }
span.sprite-5 { background-position: -715px 0px; width: 135px; height: 135px; }
span.sprite-6 { background-position: -857px 0px; width: 135px; height: 135px; }
span.sprite-conclusion { background-position: -999px 0px; width: 135px; height: 135px; }
span.sprite-time { background-position: -6px -155px; width: 24px; height: 24px; }

span.sprite-media-1 { background-position: -214px -140px; width: 63px; height: 63px; }
span.sprite-media-2 { background-position: -316px -141px; width: 63px; height: 63px; }
span.sprite-media-3 { background-position: -424px -141px; width: 63px; height: 63px; }
span.sprite-media-4 { background-position: -532px -141px; width: 73px; height: 63px; }
span.sprite-media-5 { background-position: -645px -141px; width: 63px; height: 63px; }

/*****************************/
/*********  TOC  *************/
/*****************************/
ul.list-units { margin: 0px; padding: 0px; position: relative; }
ul.list-units li { list-style-type: none; display: block; float: left; width: 135px; zoom: 0.95; text-align: center; height: auto; position: relative; }
.intro.what-you-will-learn div.preview { clear: both; position: absolute; margin-top: -50px; }
.intro.what-you-will-learn div.preview ul { display: none; width: 235px; background-color: rgba(255,255,255,1); padding: 20px; }
.intro.what-you-will-learn div.preview ul li { padding: 0px 0px; margin: 0px; margin-left: 10px;  font-size: 12px; list-style-type: disc; }
.intro.what-you-will-learn div.preview ul li:first-child { list-style-type: none; font-weight: bold; }


.intro.what-you-will-learn div.preview.intro ul.intro { display: block; }
.intro.what-you-will-learn div.preview.unit1 ul.unit1 { display: block; margin-left: 180px; }
.intro.what-you-will-learn div.preview.unit2 ul.unit2 { display: block; margin-left: 320px; }
.intro.what-you-will-learn div.preview.unit3 ul.unit3 { display: block; margin-left: 480px; }
.intro.what-you-will-learn div.preview.unit4 ul.unit4 { display: block; margin-left: 600px; }
.intro.what-you-will-learn div.preview.unit5 ul.unit5 { display: block; }

ul.list-units li a { width: 150px; display: block; color: #444; text-decoration: none; font-size: 16px; padding: 10px; text-align: center; font-weight: 600; margin-left: auto; margin-right: auto; }
ul.list-units li a span.sprite { margin-left: auto; margin-right: auto; margin-bottom: 10px; }
ul.list-units li div.length { width: 80%; margin-top: 20px; color: #444; font-size: 18px; font-weight: 600; }
ul.list-units li div.length span.sprite { float: left; margin-left: 30px; }

ul.list-medias { margin: 0px; padding: 0px; position: relative; }
ul.list-medias li { list-style-type: none; display: block; float: left; width: 25%; text-align: center; position: relative; }
ul.list-medias li div.media { color: #666; font-size: 20px; text-align: center; display: block; text-decoration: none; font-weight: 600; padding: 10px 0px 10px 8px; }
ul.list-medias li div span.sprite { margin-left: auto; margin-right: auto; margin-bottom: 10px; }
ul.list-medias li div.color { width: 80%; margin-left: 10%; margin-top: 20px; }

.slide.toc ul.list-medias li { max-width: 180px; }
div.slide.toc { /*background-color: #edf0f2;*/ height: 100%; }
div.slide.toc div.content div.container h2 { color: #828282; font-size: 18px; font-weight: 600; background-position: left top; background-repeat: no-repeat; text-transform: uppercase; display: block; opacity: 0.5; clear: both;  }

div.slide.toc div.content div.container h2.basic { background-image: url('../img/1star.png'); padding-left: 20px; background-repeat: no-repeat; overflow: hidden; text-indent: -1000px; }
div.slide.toc div.content div.container h2.intermediate { background-image: url('../img/2stars.png'); padding-left: 40px; background-repeat: no-repeat; overflow: hidden; text-indent: -1000px; }
div.slide.toc div.content div.container h2.advanced { background-image: url('../img/3stars.png'); padding-left: 55px; background-repeat: no-repeat; overflow: hidden; text-indent: -1000px; }

body #container div.slide.toc div.content div.container h2 {
    background-image: none;
    padding-left: 0px;
    background-repeat: no-repeat;
    overflow: visible;
    text-indent: 0px;
    padding-top: 20px;
    margin-top: 0px;
    color: #444;
}

body #container div.slide.toc div.content div.container h2.toc-main-title { padding-top: 0px; font-size: 28px; text-transform: none; color: #444; text-align: left; }

div.slide.toc h1 { padding-top: 30px; padding-bottom: 30px; font-weight: 400; color: #223a82; }
div.slide.toc div.content div.container div.tiles { clear: both; height: 110px; }
div.slide.toc div.content div.container div.item { position: relative; width: 170px; height: 100px; margin-right: 10px; margin-bottom: 10px; float: left; background-color: #FFF; height: 140px;
    width: 150px; }
div.slide.toc div.content div.container div.item a { display: block; padding: 15px; color: #828282; font-size: 16px; text-decoration: none; padding: 65px 6px; color: #223a82; text-align: center; }
div.slide.toc div.content div.container div.item div.color { position: absolute; bottom: 0px; width: 100%; height: 15px; }

div.slide.toc div.content div.container div.viewed:before { content: ' '; background-image: url('../img/toc-checked.png'); background-repeat: no-repeat; background-position: center center; width: 25px; height: 25px; position: absolute; bottom: 5px; right: 5px; z-index: 999; }

div.slide.toc div.content div.container ul.list-medias { clear: both; padding-top: 60px; }
div.slide.toc div.content div.container ul.list-medias li div.media span.sprite { zoom: 50%; float: left; margin-right: 20px; margin-left: 10px; }
div.slide.toc div.content div.container ul.list-medias li div.media { font-size: 14px; text-align: left; }
div.slide.toc div.content div.container ul.list-medias li div.color { margin-top: 10px; width: 90%; }

/******* RESPONSIVE *******/
@media (max-height: 750px){
    div.slide.toc div.content div.container h2 { margin-top: 5px; padding-top: 0px; padding-bottom: 0px; }
    div.slide.toc div.content div.container h2.basic { margin-top: -15px; }
    div.slide.toc div.content div.container ul.list-medias { padding-top: 20px;}
}

@media (max-width: 768px){
    div.slide.toc div.content div.container div.item { width: 140px; height: 120px; }
    div.slide.toc div.content div.container ul.list-medias li div.media { font-size: 12px; }
}

body .slide-type-icon { position: absolute; right:42px; top: 5px; width: 63px; height: 63px; background-repeat: no-repeat; background-image: url('../img/sprite-blue.png'); overflow: hidden; background-color:transparent; -moz-transform: scale(0.65); transform: scale(0.65);}




body .slide-type-icon.voiceover { background-position: -214px -140px;}
body .slide-type-icon.interactive-activity {background-position: -424px -141px;}
body .slide-type-icon.family-interview { background-position: -645px -141px;}
body .slide-type-icon.peer-expert { background-position: -645px -141px;}
body .slide-type-icon.case-story { background-position: -316px -141px; }
body .toc .tiles .item { }
div.slide.toc div.content div.container div.viewed:before { top:-7px; right:-4px;}
div.slide.toc div.content div.container ul.list-medias li div.media span.sprite { -moz-transform: scale(0.5);}
@-moz-document url-prefix() {
    .slide.toc ul.list-medias li {
        max-width: 211px;
    }
}

/*************/
/* TAKEAWAYS */
/*************/
div.slide.takeaways div.header { background-color: #223a82; width: 100%; height: 20%; min-height: 200px; }
div.slide.takeaways div.header div.container { max-width: 960px; height: 100%; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-position: left bottom; position: relative; background-size: 200px; }
div.slide.takeaways div.content { height: 80%; }
div.slide.takeaways div.content div.container { max-width: 960px; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-position: left bottom; padding-top: 10%; }
div.slide.takeaways div.header div.container h1 { position: absolute; color: #FFF; left: 250px; bottom: 20px; font-size: 42px; line-height: 72px; }
div.slide.takeaways div.content div.container ol { width: 80%; margin-left: 10%; }
div.slide.takeaways div.content div.container ol li { padding-bottom: 50px; }


/****************/
/* APPRECIATION */
/****************/
div.slide.appreciation div.header { background-color: #223a82; width: 100%; height: 20%; min-height: 200px; }
div.slide.appreciation div.header div.container { max-width: 960px; height: 100%; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-position: left bottom; position: relative; background-size: 200px; }
div.slide.appreciation div.content { height: 80%; }
div.slide.appreciation div.content div.container { max-width: 960px; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-position: left bottom; padding-top: 10%; }
div.slide.appreciation div.header div.container h1 { position: absolute; color: #FFF; left: 250px; bottom: 20px; font-size: 42px; line-height: 72px; }

div.appreciation div.container div.container { margin-top: -50px; }
div.appreciation #content-header { display: none; }
div.appreciation fieldset.personal_info { display: none; }
div.appreciation .lightbox_masked {display: none;}
div.appreciation input[type=text].elf_hidden {display: none;}

div.appreciation fieldset { border: none; padding: 30px; margin: 0;}
div.appreciation fieldset input[type=text] {border: 1px solid #D7D7D7;}
div.appreciation fieldset label {padding-top: 20px; font-size: 16px; font-weight: normal; }
div.appreciation fieldset div.question label {padding:0px 0px 20px 20px; }
div.appreciation fieldset textarea {resize: none; width: 350px;}
div.appreciation fieldset.general_info textarea {width: 800px; margin: 0px 20px 20px;}
div.appreciation fieldset.general_info div.input_complete {margin: 35px 5px; display: none; width: 20px; height: 20px; text-align: center; float: left; border: 1px solid green; border-radius: 50%; color: green;}

div.appreciation div.question_header {font-size: 18px; margin: 40px 20px 20px; font-weight: 600; }
div.appreciation table {width: 840px; font-size: 16px; }
div.appreciation table td {width: 120px; text-align: center; padding: 10px 0; line-height: 1.5;}
div.appreciation td.active, td.active:hover {background-color: #DAF0DA !important;}
div.appreciation td.hover {background-color: #eee;}
div.appreciation td, th {cursor: default; height: 80px; padding: 10px; }
div.appreciation div.completed {opacity: 0.4;}
div.appreciation tr:nth-child(odd) {background-color: #eee;}
div.appreciation td:first-child {width: 350px;}
div.appreciation table thead th, div.question_confirmation {background-color:#888; color: #FFF; text-align: center; font-weight: lighter;}
div.appreciation td.hover {background-color: #F2FCF2;}
div.appreciation div.question_confirmation {display: none; border: 1px solid #ccc; margin-bottom: 20px; padding: 20px;}
div.appreciation div.question ol li {background: none; list-style: none; padding: 5px; margin-left: 20px;}
div.appreciation .clear {clear: both;}
div.appreciation textarea { font-size: 16px;  }
div.appreciation div.question {margin-bottom: 20px;}

@media (max-width: 768px) {
    body div.appreciation table { width: 640px; }
    body div.appreciation fieldset { padding: 0px; }
    body div.appreciation fieldset.general_info textarea { width: 600px; }
}


/*************/
/* SLIDESHOW */
/*************/
#pager, .pager { position: absolute; margin-left: 25%; width: 50%; bottom: 120px; text-align: center; }
#pager span, .pager span { text-align: center; padding:5px 10px; background-color: #FFF; margin-right: 20px; cursor: pointer; font-size: 16px; box-shadow: 2px 2px 5px #000; }
#pager span.cycle-pager-active, .pager span.cycle-pager-active { background-color: transparent; color: #FFF; border: solid 1px #FFF; }
#prev, a.cycle-prev { position: absolute; left: -20px; bottom: 40%; display: block; padding: 10px 20px; font-size: 18px; background-color: #828282; color: #FFF; text-decoration: none; cursor: pointer;  }
#next, a.cycle-next { position: absolute; right: -20px; bottom: 40%; display: block; padding: 10px 20px; font-size: 18px; background-color: #828282; color: #FFF; text-decoration: none; cursor: pointer;  }
#prev.disabled, a.cycle-prev.disabled { display: none; }
#next.disabled, a.cycle-next.disabled { display: none; }

/*********/
/* INTRO */
/*********/
.intro .submit button { display: block; margin: 0 auto; }

.skip-introduction { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: rgba(25,25,25,0.7); }
.skip-introduction .popup { background: #fff; width: 350px; padding: 25px; margin: 20% auto; text-align: center; border-radius: 10px; }
.skip-introduction .popup p { margin-bottom: 25px; font-size: 16px; line-height: 42px; }
.skip-introduction .popup .btn { color: #fff; width: 85px; }
.skip-introduction .popup .btn-skip { background-color: darkblue; margin-left: 5px; }
.skip-introduction .popup .btn-continue { background-color: grey; }

.intro-3 div.content div.part-1 { width: 100%; display: inline-block; }
.intro-3 div.content div.part-2 { width: 28%; display: inline-block; margin-left: 1%; border-left: 2px dashed #223a82; }
.intro-3 div.content div.part-1 h2,
.intro-3 div.content div.part-2 h2 { text-align: center; }
/*.intro-3 div.content div.part-1 .list-units > li:first-child { width: 10%; zoom: 0.5; }
.intro-3 div.content div.part-1 .list-units > li:last-child { width: 10%; zoom: 0.5; }*/
.intro-3 div.content div.part-1 .list-units > li { width: 25%; min-height: 360px;}
.intro-3 div.content div.part-1 .list-units > li ul li { text-align: center; }
/*.intro-3 div.content div.part-2 .list-units li { width: 135px; }*/
.intro-3 div.content .list-units li div.length { width: 120px; font-size: 16px; margin-left: -75px; left: 50%; }
.intro-3 div.content .list-units li.comming-soon { cursor: not-allowed; opacity: 0.4; }
.intro-3 div.content .list-units li.comming-soon a { cursor: not-allowed; }

.intro-3 div.content .list-units li > ul { margin: 0px; padding: 0px; }
.intro-3 div.content .list-units li > ul li { width: 100% !important; list-style-type: disc; font-size: 14px; float: none; text-align: left; padding: 0px 5px; }
.intro-3 div.content .list-units li > ul li:first-child { font-weight: bold; padding: 0px; }

.intro-5 div.content div.container ol li { padding-bottom: 20px; }

.intro-7 #pager, .intro-7 .pager { margin-left: 0px; width: 50%; bottom: 0px; right: 0px; }
.intro-7 #pager span, .intro-7 .pager span {  }
.intro-7 #pager span.cycle-pager-active, .intro-7 .pager span.cycle-pager-active {  }
.intro-7 #prev, .intro-7 a.cycle-prev { width: 120px; text-align: center; }
.intro-7 #next, .intro-7 a.cycle-next { width: 120px; text-align: center; }
.intro-7 .selectors { padding-top: 30px; }

.intro-6 #circles-model { height: 500px; }
.intro-6 #circles-model svg { background-color: transparent; }
.intro-6 .hat-man { position: relative; }
.intro-6 .hat-man img { position: absolute; display: none; }
.intro-6 .hat-man img.hat-marketing { top: 102px; left: 151px; width: 330px; z-index: 50; }
.intro-6 .hat-man img.hat-sales { top: 147px; left: 30px; width: 320px; z-index: 40; }
.intro-6 .hat-man img.hat-collections { top: 225px; left: 130px; width: 365px; z-index: 25; }
.intro-6 .hat-man img.hat-bookkeeper { top: 292px; left: -26px; width: 370px; z-index: 30; }
.intro-6 .hat-man img.hat-humanresources { top: 305px; left: 122px; width: 360px; z-index: 20; }
.intro-6 .hat-man img.hat-itservice { top: 375px; left: 10px; width: 350px; z-index: 10; }
.intro-6 .hat-man img.head { top: 400px; left: 160px; width: 195px; }
.intro-6 .hat-man h2 { display: none; }

.intro-6 .hat-man .stats { width: 210px; display: none; margin-left: 20px; }
.intro-6 .hat-man .stats img { position: relative; display: block; float: left; }
.intro-6 .hat-man .stats h2 { display: none; }

.intro-6 .map { position: relative; }
.intro-6 .map img { position: absolute; display: none; }
.intro-6 .map h3 { position: absolute; display: none; z-index: 999; }
.intro-6 .map h2 { position: absolute; display: none; z-index: 999; color: #FFF; font-weight: bold; font-size: 40px; }
.intro-6 .map h2.gdp { color: #FFF !important; top: 300px; left: 100px; }
.intro-6 .map h2.jobs { color: #FFF !important; top: 450px; left: 130px; }
.intro-6 .map h3.gdp { font-size: 32px; top: 520px; left: 200px; color: #FFF; }
.intro-6 .map h3.jobs { font-size: 32px; top: 160px; text-align: right; width: 80%; font-weight: bold; }
.intro-6 .map h3.assets { font-size: 32px; top: 20px; left: 0px; font-weight: bold; background-color: rgba(255,255,255,0.5); padding: 10px; }
.intro-6 .map img.gdp { margin-top: 514px; }

.intro-6 .threecircle { cursor: pointer; }
.intro-6 .ownership-circle-description { display: none; background-color: #FFF; padding: 30px; position: absolute; top: -28px; font-size: 16px; z-index: 999; }
.intro-6 .ownership-circle-description button { width: 20px; height: 20px; margin: -20px; }

.intro-7 .community-testimonials { display: none; clear: both; }
.intro-7 #videoexperts { width: 730px; margin-left: auto; margin-right: auto; }

.intro-7 #videoexperts .cycle-prev { text-indent: -1000px; display: block; width: 31px; height: 36px; overflow: hidden; background-image: url('../img/cycle-left.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer; background-color: transparent; left: 0px; bottom: 50%; }
.intro-7 #videoexperts .cycle-next { text-indent: -1000px; display: block; width: 31px; height: 36px; overflow: hidden; background-image: url('../img/cycle-right.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer; background-color: transparent;  right: 0px; bottom: 50%; }

.intro-7 #videoexperts .videoexpert { width: 730px; }
.intro-7 #videocommunitys .videocommunity { width: 540px; }
.intro-7 .testimonials-texts { overflow-y: scroll; height: 400px; }
.intro-7 .testimonial-text { font-size: 12px; border-bottom: 1px grey solid; margin-bottom: 10px; }
.intro-7 .form { font-size: 18px; display: none; margin-bottom: 40px; }
.intro-7 .form span { font-size: 12px; }
.intro-7 .form .next-step, .intro-7 .form .next-help, .intro-7 .form .checkbox, .intro-7 .form button { display: none; }
.intro-7 .form .disabled { color: #aaa; }
.moder_getusermedia .mobile-video { display: none; }
.moder_no-getusermedia .webcam-video { display: none; }
.moder_capture .webcam-video { display: none; }
.moder_capture.moder_getusermedia .webcam-video { display: none; }
.moder_capture.moder_getusermedia .mobile-video { display: block; }
.intro-7 #webcam { width: 640px; height: 480px; }
.intro-7 #cut-step { display: none; margin-bottom: 25px; }
.intro-7 .selectors { margin: 20px 0; }
.intro-7 .selectors button { margin: 0 auto; display: block; }
.intro-7 .selectors .share { display: none; }

.intro-8 .survey .question { margin-bottom: 30px; }
.intro-8 .survey .slider { margin: 15px 0; }
.intro-8 #ownership-survey p { font-size: 18px; text-align: justify; padding-bottom: 30px; }
.intro-8 .likert { clear: both; padding: 0px; margin: 0px; }
.intro-8 .likert li { padding: 0px; margin: 0px; display: block; width: 20%; float: left; text-align: center; font-weight: bold; font-size: 12px; margin-top: -10px; }
.intro-8 .likert li.v-2 { text-align: left; }
.intro-8 .likert li.v2 { text-align: right; }
.intro-8 .likert li.v1 { text-align: right; padding-right: 40px; }
.intro-8 .likert li.v-1 { text-align: left; padding-left: 30px; }
.intro-8 .question .ui-widget-content { border: none; background: none; background-color: rgba(0,0,0,0.4); }
.intro-8 .question .ui-widget-content .ui-slider-handle { background: none; border: none; background-color: #223a82; cursor: move; top: -0.2em; }


.intro-9 #ownership-results-graph { height: 450px; width: 850px; margin: 0 auto; }
.intro-9 svg.survey .axis line.grade { stroke: grey; }
.intro-9 svg.survey .axis line.abscisse { stroke: black; stroke-width: 2px; }
.intro-9 svg.survey .axis text { font-size: 12px; font-family: Arial; }
.intro-9 svg.survey .axis text.label { text-anchor: middle; }
.intro-9 svg.survey .axis text.marker { fill: white; text-anchor: middle; }
.intro-9 svg.survey .axis path { stroke-width: 3px; fill: none; }
.intro-9 svg.survey .limit-top { stroke: #70ad47; fill: #70ad47; }
.intro-9 svg.survey marker .limit-top { fill: #70ad47; stroke-width: 0; }
.intro-9 svg.survey .limit-bottom { stroke: #ed7d31; fill: #ed7d31; }
.intro-9 svg.survey marker .limit-bottom { fill: #ed7d31; stroke-width: 0; }
.intro-9 svg.survey .student-line { stroke: #4372c3; fill: #4372c3; }
.intro-9 svg.survey marker .student-line { fill: #4372c3; stroke-width: 0; }

#SvgjsLine1013 { stroke: black; stroke-width: 2px; }
#SvgjsText1025 { font-size: 18px; }
#SvgjsText1027 { font-size: 18px; }

.intro-9 svg.survey .legend rect.limit-top { fill: #70ad47; stroke: #70ad47; }
.intro-9 svg.survey .legend rect.limit-bottom { fill: #ed7d31; stroke: #ed7d31; }
.intro-9 svg.survey .legend rect.student-line { fill: #4372c3; stroke: #4372c3; }
.intro-9 svg.survey .legend text { font-size: 14px; font-family: Arial; text-anchor: middle; }
.intro-9 svg.survey .legend text.domain { text-anchor: end; }

.intro-9 .explanation { font-size: 18px; padding: 20px 40px; background-color: rgba(255,255,255,0.6); width: 80%; margin-left: auto; margin-right: auto; }
.intro-9 .explanation .first-view { color: #70ad47; }
.intro-9 .explanation .second-view { color: #ed7d31; }
.intro-9 .explanation .your-result { color: #4372c3; }
.intro-9 .submit button { margin-top: 30px; margin-bottom: 100px; }

.guidelines {}
.guidelines label { font-size: 16px; }
.guidelines .parchment { background: url('../img/parchment.png') top center  no-repeat; background-size: 100% 100%; }
.guidelines .parchment #guidelines-form { margin: 150px 25px; height: 100%; }
.guidelines .parchment #guidelines-form .form-group { margin-bottom: 40px; }
.guidelines .parchment #guidelines-form .form-group input { background: transparent; color: #000; }

#ownership-survey div { font-size: 18px; }
#ownership-survey div.ui-slider { height: 15px; }



/* EVOLUTION 2017 */


body #progress-bar { min-width: 855px; width: 50%; left: 25%; height: 45px; margin-left: 10px; margin-top: 18px; top: -10px; }
body #progress-bar .sub-unit { min-width: 90px; position: relative; float: left; border-left: 1px solid #AAA; padding: 0px 10px 20px 10px; }
body #progress-bar .sub-unit:first-child { border-left: none; }
body #progress-bar .sub-unit span.label-sub-unit { text-align: center; text-transform: uppercase; font-size: 12px; display: block; width: 100%; left: 0px; position: absolute; bottom: 0px; white-space: nowrap; }
body #progress-bar .sub-unit span.label-sub-unit.aligning-values-views { font-size: 11px; }
body #progress-bar .sub-unit.aligning-values-views ul.unit-progress li { margin-left: 12px; margin-right: 4px; }
body #progress-bar .sub-unit.key-considerations { min-width: 130px; }

body div.tools { box-shadow: none; height: 50px; }
body div.tools ul.unit-progress  { font-size: 8px; }
body div.tools ul.unit-progress li { border: none !important; background-color: #444; border-radius: 100%; width: 6px; height: 6px; margin-left: 14px; }
body div.tools ul.unit-progress li.intro { background-color: #444; }
body div.tools ul.unit-progress li.current { background-color: #223a82; width: 10px; height: 10px; }
body div.tools ul.unit-progress li:first-child { margin-left: 0px; }
body div.copy { color: #DDD; text-align: center; font-size: 10px; width: 100%; position: absolute; bottom: 0px; clear: both; }
body div.tools #print-bar { position: fixed; bottom: 140px; }
body div.tools #transcript-bar { position: fixed; bottom: 110px; }
body div.tools #genogram-bar { position: fixed; bottom: 82px; }
body div.tools #voiceover-bar.player { position: fixed; bottom: 70px; height: 35px; width: 100px; overflow: hidden; left: 3px; }

body #navbar a { padding: 5px 20px; }
body #navbar .nav-tooltip { bottom: 100%; }
body div.tools #voiceover-bar.player { position: fixed; bottom: 55px; height: 35px; width: 50%; min-width: 880px; overflow: hidden; left: 25%; }
body div.tools #voiceover-bar.player div.audio { position: relative; }
body div.tools #voiceover-bar .mejs-controls .mejs-currenttime-container span { font-size: 10px; }
body div.tools #voiceover-bar .mejs-controls .mejs-duration-container { font-size: 10px; right: 0px; top: 42px; }
body div.tools #voiceover-bar .mejs-time-rail .mejs-time-loaded { background: linear-gradient(rgba(255,255,255,0.8), rgba(200,200,200,0.8)) !important; }
body div.tools #voiceover-bar .mejs-controls .mejs-playpause-button button { zoom: 0.4; }
body div.tools #voiceover-bar .mejs-controls .mejs-playpause-button { top: 30px; left: 5px; }
body div.tools #voiceover-bar .mejs-controls .mejs-playpause-button button { background-image: url('../img/sprite-blue.png'); }
body div.tools #voiceover-bar .mejs-controls .mejs-currenttime-container { top: 43px; }




@media (min-width: 992px) {
  body div.tools #voiceover-bar.player .mejs-container { width: 880px !important; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-time-rail { width: 800px !important; top: 25px; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-controls { width: 800px !important; left: 0px; margin-top: 2px; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-controls .mejs-time-rail span { width: 800px; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-duration-container { right: 0px; left: initial; }
}

@media (max-width: 1451px) {
    body div.tools #voiceover-bar.player { left: 10%; }
}

@media (max-width: 1358px) {

}

@media (max-width: 1230px) {
    body div.tools #voiceover-bar.player { width: 75%;  left: 20px; margin-left: 0px !important; }
}

@media (max-width: 1000px) {
  body #progress-bar .copy { display: none; }
  body div.tools #voiceover-bar.player .mejs-container { width: 300px !important; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-time-rail { width: 300px !important; top: 25px; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-controls { width: 300px !important; left: 0px; margin-top: 2px; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-controls .mejs-time-rail span { width: 300px; }
  body div.tools #voiceover-bar.player .mejs-container .mejs-duration-container { right: 0px; left: initial; }
}

@media (max-width: 832px) {
  body #progress-bar { display: none; }
  body div.tools #voiceover-bar.player { bottom: 20px; }
}








/*.succeeding-succession div.tools #voiceover-bar.player:hover { width: 240px; }*/
body div.tools #instructions-bar { position: fixed; bottom: 175px; }

body div.slide.icon div.header div.container h1 { max-width: 570px; }
body .slide.case-story .header .container h1 { text-shadow: none; }
body .slide.family-interview .header .container h1 { text-shadow: none; }
body .slide.interactive-activity .header .container h1 { text-shadow: none; }

@media (max-width: 1450px) {
    body #progress-bar { left: 10%; }
}

@media (max-width: 1358px) {
    body #progress-bar .sub-unit span.label-sub-unit { font-size: 10px; }
    body div.tools ul.unit-progress li { margin-left: 10px; }
}

@media (max-width: 1230px) {
    body div.tools #progress-bar { width: 75%; left: 20px; margin-left: 0px !important; }
    body div.tools #voiceover-bar.player { min-width: 300px; }
}

@media (max-width: 1000px) {
    body div.tools ul.unit-progress li { margin-left: 8px; }
    body div.tools #progress-bar .sub-unit span.label-sub-unit { bottom: -8px; width: 90%; }
}

body .slide .header h1.nospan { text-transform: uppercase; font-size: 28px; font-weight: 700; margin-top: 14px; margin-bottom: 14px; }
body .slide .header h1 span { font-size: 16px; }
body .slide.icon .header h1 span { font-size: 40px; display: none; }
body .slide .header h1 span { display: block; clear:right; color:#949ec3; text-transform: uppercase; font-weight: 700;  }
body .slide.voiceover .header .container h1 { text-shadow: none; }
body div.slide div.header div.container { padding: 0px 40px; }

div.slide.toc div.content div.container h2.toc-main-title { color: #223a82; text-align: left; }


ol.learning-outcome li { padding-bottom: 20px; }