@font-face {font-family: 'BlogScriptLight';
    src: url('webfont/blogscript/2ECB8A_0_0.eot');
    src: url('webfont/blogscript/2ECB8A_0_0.eot?#iefix') format('embedded-opentype'),url('webfont/blogscript/2ECB8A_0_0.woff2') format('woff2'),url('webfont/blogscript/2ECB8A_0_0.woff') format('woff'),url('webfont/blogscript/2ECB8A_0_0.ttf') format('truetype');
}
@font-face {font-family: 'BlogScript';
    src: url('webfont/blogscript/2ECB8A_1_0.eot');
    src: url('webfont/blogscript/2ECB8A_1_0.eot?#iefix') format('embedded-opentype'),url('webfont/blogscript/2ECB8A_1_0.woff2') format('woff2'),url('webfont/blogscript/2ECB8A_1_0.woff') format('woff'),url('webfont/blogscript/2ECB8A_1_0.ttf') format('truetype');
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'openSans';
    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#openSans') format('svg');
    font-weight: 700;
    font-style: italic;
}


/**************************/
/******** LAYOUT **********/
/**************************/
#instructions { position: absolute; width: 90%; background-color: #FFF; max-width: 320px; z-index: 999; box-shadow: 5px 5px 10px #AAA; top: 120px; left: -330px; display: none; }
#instructions div.source { padding: 25px; }
#instructions div.source h2 { font-size: 16px; font-weight: bold; }
#instructions div.source p { font-size: 12px; }

.certificate-of-completion {
    background: transparent;
    text-align: center;
}

iframe.certificate { width:400px; height: 300px; margin-left: auto; margin-right: auto; border: none !important; overflow: hidden; }
a.download-certificate { display: block; text-align: center; font-weight: bold; color: #6D3890; }

.sharedaddy { display: none !important; }
#progress-bar {
    font-size: 24px !important;
}
body, html { width: 100%; height:100%; min-height:100%; font-family: openSans, sans-serif; font-size: 14px; margin: 0;
    background: url("../img/wefibg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body a { color: #66C0CB; }

.blogscript{
        text-align:center;
        font-family:blogscript;
        font-size:32px;
}

.blogscriptleft{
        font-family:blogscript;
}

.font-14 {
        font-size: 14px;
}


.font-12 {
        font-size: 12px;
}

.modele-text {
        font-size: 14px;
}

.pull-15-left {
    margin-left:-15px;
    margin-right:15px;
}


.slide.reflection-6 .container, .slide.reflection-7 .container {

        position:relative;
}

.slide.reflection-6 .container, .slide.reflection-7 .container {

        position:relative;
}

.slide.reflection-6 .col-sm-6, .slide.reflection-7 .col-sm-6 {

        position:static;
}

.pull-down {
    position:absolute;
    bottom:0;
}

#wrapper {
    padding:3% 3% 3% 3%;
    background: url("../img/wefibg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height:100%;
  min-height:100%;
}

#inner-content {
    background-color: #fff;
    overflow: hidden;
}

#skipToDialog {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999;
    text-align: center;
}

#skipToDialog button, #skipToDialog a {
    position:absolute;
    text-align:center;
    background-color: #fff;
    color: #6D3890;
    border: solid 2px #CBB7D9;
    border-radius:10px;
    padding:20px;
    top:45%;
    font-weight: bold;
    box-shadow: 1px 1px 1px 2px #6D3890;
}

#skipToDialog button {
    left:55%;
    width:15%;
    min-height: 105px;
}
#skipToDialog a {
    text-decoration: none;
    left:55%;
    width:15%;
    min-height: 105px;
    font-weight: bold;
    color: #6D3890;
    padding-top: 25px;
}


#skipToDialog a:first-child {
    left:35%;
    width:15%;
}



.intro-slideshow {
    position:absolute;
    top:70px;
    left:5000px;
    width:14%;
}

.pop-up-dialogue-box {
    width:60%;
    margin:auto;
    background:#fff;
    margin-top:200px;
    border:thin solid #6D3890;
    border-radius: 10px;
}


/**************************/
/******** HEADER **********/
/**************************/
#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; box-shadow: 3px 1px 4px #444; }

#header-print { display: none; }


.header .container p {
    text-align:center;
    font-size:16px;
}


#course-title {
        text-align:center; color:#fff;
        margin-top:-30px;
        font-family: 'BlogScript'
}

#course-title h1{
        margin-top:-5px;
        margin-bottom:15px;
}

.current-section-nav {
    display:none;
}

#hamburger {
    display:none;
}

#hamburger-div-bg {
    display:none;
}


/*#container { width: 100%; min-height: 100%; margin-bottom: 85px;}*/
#container { width: 100%; margin-bottom: 85px;}
.slide { background-color: transparent; height: 100%; }
#container .slide .header { padding-bottom: 15px;}
#container .slide .header .container:before { display: block; content: ''; width: 80px; height: 80px; }
#container .slide .header.empty .container:before { height: 40px; }

#container .slide .header .container h1 { margin: -70px 0 0 0; padding: 15px 0 10px 0; min-height: 55px; font-size: 28px; }
#container .slide .content { margin-bottom: 0px; padding-top: 10px; }
#container .slide .printable { display: none; }

#learning-guide { position: absolute; top: 40px; right: 5px; background-color: #fff; background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; }
#learning-guide a { display: block; width: 35px; height: 35px; background-image: url('../img/sprite.png'); background-repeat: no-repeat; overflow: hidden; text-indent: -999em; background-position: -140px 0px; }


#progress-bar { position: relative; margin: auto; text-align:center;}

#progress-bar ul li{
    display:inline;
}
#progress-bar ul li ul{
    display:inline;
    padding:0;
}
#progress-bar .unit-progress {
    text-align:center;
    width:100%;
    padding:0px;}
#progress-bar .unit-progress li ul li{ height:20px; width:20px; margin:6px; }
#progress-bar .unit-progress li ul li a {  height:20px; width:20px; background-image: url('../img/sprite.png'); background-repeat: no-repeat; overflow: hidden;  background-position: -226px 6px; text-decoration: none;}
#progress-bar .unit-progress li ul li a:hover { text-decoration: none;}
#progress-bar .unit-progress li ul li.viewed a { background-position: -199px 6px;}
#progress-bar .unit-progress li ul li.current a { background-position: -177px 4px;}
#progress-bar .unit-progress li ul li a span {
    font-size:0px;overflow: hidden; text-indent: -999em;
}
#progress-bar .unit-progress li span {
    position:absolute;
    top:25px;
    text-transform: uppercase;
    font-size:14px;
    color:#bababa;
}

#progress-bar .unit-progress .introduction span {
    margin-left:15px;
}

#progress-bar .unit-progress .reflection span {
    margin-left:80px;
}

#progress-bar .unit-progress .projection span {
    margin-left:82px;
}

#progress-bar .unit-progress .action span {
    margin-left:100px;
}

#progress-bar .unit-progress .conclusion span {
    margin-left:20px;
}

#progress-bar .unit-progress li ul .first-of-section {
    margin-left:10px;
    padding-left:13px;
    border-left: solid 1px #bababa;
    top:10px;
    position:relative;
}

#progress-bar .unit-progress li.introduction ul .first-of-section {
    border: none;
}

#progress-bar .unit-progress li ul .first-of-section a {
    top:-10px;
    position:relative;
}

.nav-image {
    display:none;
    position:absolute;
    top:50px;
    opacity:0.5;
    z-index: 10001;
}

.conditions-alert {
    text-align:center;
    font-size: 16px;
    padding: 0;
    background-color: #fff;
    color: #622988;
    font-weight: bold;
}


/*
#progress-bar .unit-progress li ul li a span{ position: absolute; top: 0px; left: 0px; width: 15px; height: 20px; text-decoration: none; text-indent: -100px; overflow: hidden; }
#progress-bar .unit-section .setting-stage { color: #005828; }
#progress-bar .unit-progress .setting-stage { background-color: rgba(0, 88, 40, 0.5); border-right: solid 1px #005828; }
#progress-bar .unit-progress .setting-stage.viewed { background-color: #005828; }
#progress-bar .unit-progress .setting-stage.current { background-color: rgba(0, 88, 40, 0.75); }
#progress-bar .unit-section .developing-opportunities { color: #F9A818; }
#progress-bar .unit-progress .developing-opportunities { background-color: rgba(249, 168, 24, 0.5); border-right: solid 1px #F9A818; }
#progress-bar .unit-progress .developing-opportunities.viewed { background-color: #F9A818; }
#progress-bar .unit-progress .developing-opportunities.current { background-color: rgba(249, 168, 24, 0.75); }
#progress-bar .unit-section .preparing-future { color: #67CCBD; }
#progress-bar .unit-progress .preparing-future { background-color: rgba(103, 204, 189, 0.5); border-right: solid 1px #67CCBD; }
#progress-bar .unit-progress .preparing-future.viewed { background-color: #67CCBD; }
#progress-bar .unit-progress .preparing-future.current { background-color: rgba(103, 204, 189, 0.75); }
#progress-bar .unit-section .summary { color: #D99694; }
#progress-bar .unit-progress .summary { background-color: rgba(217, 150, 148, 0.5); border-right: solid 1px #D99694; }
#progress-bar .unit-progress .summary.viewed { background-color: #D99694; }
#progress-bar .unit-progress .summary.current {  background-color: rgba(217, 150, 148, 0.75);}

#progress-bar .unit-section,
#progress-bar .unit-progress { padding: 0px; margin: 0px; }
#progress-bar .unit-section li,
#progress-bar .unit-progress li { position: relative; padding: 0px; margin: 0px; display: inline-block; }

#progress-bar .unit-section { font-size: 10px; }
#progress-bar .unit-section li { border-right: 1px solid #b094c3; padding: 0 2px; text-align: center; height: 20px; }
#progress-bar .unit-section li:last-child { border-right: none; }
#progress-bar .unit-progress li a { display: block; width: 35px; height: 35px; background-image: url('../img/sprite.png'); background-repeat: no-repeat; background-size: 483%; margin: 0 auto; overflow: hidden; text-indent: -999em; }
#progress-bar .unit-progress li.introduction {  }
#progress-bar .unit-progress li.reflection {  }
#progress-bar .unit-progress li.projection {  }
#progress-bar .unit-progress li.action {  }
#progress-bar .unit-progress li.conclusion {  }
#progress-bar .unit-section li.balancing-act { width: 55px; }
#progress-bar .unit-section li.balancing-act span { background-position: 2px -24px; }
#progress-bar .unit-section li.setting-stage { width: 85px; }
#progress-bar .unit-section li.setting-stage span { background-position: -34px -24px; }
#progress-bar .unit-section li.developing-opportunities { width: 100px; }
#progress-bar .unit-section li.developing-opportunities span { background-position: -67px -24px; }
#progress-bar .unit-section li.preparing-future { width: 95px; }
#progress-bar .unit-section li.preparing-future span { background-position: -102px -24px; }
#progress-bar .unit-section li.summary { width: 40px; }
#progress-bar .unit-section li.summary span { background-position: -134px -24px; }

#progress-bar .unit-progress { font-size: 1px; }
#progress-bar .unit-progress li span{ font-size: 15px; }
#progress-bar .unit-progress li { width: 15px; height: 20px; cursor: pointer; }
#progress-bar .unit-progress li a { position: absolute; top: 0px; left: 0px; width: 15px; height: 20px; text-decoration: none; text-indent: -100px; overflow: hidden; }
#progress-bar .unit-progress .current { height: 22px; }
*/
/**************************/
/********* FOOTER *********/
/**************************/
#footer { width: 100%; position: relative; bottom: 0px; height: 80px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75);  padding: 0px; z-index: 990; }

#exit-course {
    float:right; margin-top:20px; right:80px;
    border-left: none; width: 45px; height: 75px; line-height: 45px; text-decoration: none; text-align: center; overflow: hidden; cursor: pointer; font-style: normal; font-size: 1px; z-index: 9999; display: block; background-image: url('../img/close.png'); background-repeat: no-repeat; position: absolute;
}
#exit-course a{
    color:#622988; font-size:14px; text-decoration:underline; display: block; text-indent: -100px; overflow: hidden;
}

#exit-course:hover a { color: #622988; font-size: 14px; position: absolute; text-indent: 0px; padding-top: 40px; display: block; text-align: center; width: 45px; text-decoration: none; }
#exit-course a:hover{ color: #622988; font-size: 14px; position: absolute; text-indent: 0px; padding-top: 40px; display: block; text-align: center; width: 45px; text-decoration: none; }

#mobile-back-button {
    display:none;
}

#mobile-pause, #mobile-play {
    display:none;
}



#footer .audio-player { position: absolute; left: 30%; height: 35px; bottom: 15px; }

#share-btn  { position: absolute; bottom: 40px; right: 200px; width: 60px; display: none; }

#footer .buttons { position: absolute; left: 10px; height: 35px; bottom: 25px; }
#footer .buttons > div { position: relative; float: left; width: 45px; height: 45px; opacity: 0.2; margin-left: 5px; overflow: hidden; background-image: url('../img/sprite.png'); background-repeat: no-repeat; background-size: 1700%;}
#footer .buttons > div a { display: block; cursor: not-allowed; }
#footer .buttons > div span { display: block; text-indent: -999px; }
#footer .buttons > div.active-btn { opacity: 1; }
#footer .buttons > div.active-btn a { cursor: pointer; }
#footer .buttons div h2 { font-size: 22px; }
#footer .buttons div .close { width: 20px; height: 20px; margin: -20px; }


#print-btn  { background-position: -120.5px -1px; }
#instructions-btn  { background-position: -59px -2px; }
#mail-btn  { background-position: 3.5px -1px; display: none; }
#settings-btn  { background-position: -297px -1px; }

#audio { position: absolute; bottom: 20px;height: 34px !important;}

#voiceover-btn.player { height: 80px; overflow: visible; background-image: none !important; }
#voiceover-btn.active-btn.player { width: 225px; }
#voiceover-btn .audio { position: absolute; margin-top: -20px; }
#voiceover-btn .audio .mejs-controls { position: absolute; margin-top: -5px; }

#settings-btn .settings-bloc,
#instructions-btn .instructions-bloc,
#transcript-btn .transcript-bloc { 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: 50px; left: 0; position: absolute; z-index: 1000; display: none; border-radius: 10px 10px; }
#settings-btn .settings-bloc.open,
#instructions-btn .instructions-bloc.open,
#transcript-btn .transcript-bloc.open { -webkit-overflow-scrolling: touch; display: block; overflow-y: scroll; }

#footer .vjs-big-play-button { 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; }
#footer .vjs-big-play-button:before { content: ''; }
#footer .vjs-default-skin .vjs-control-bar { display:block; height:0px;}

#footer .vjs-default-skin .vjs-control-bar .vjs-play-control {
    display:block; position:absolute; top:-18px;  left:0px;
}

#footer .vjs-default-skin .vjs-control-bar .vjs-mute-control {
    display:block; position:absolute; top:-18px;
    right:0px;
}

#footer .vjs-default-skin .vjs-control-bar .vjs-progress-control {
    display:block; position:absolute; bottom:-50px;
    background-color:#8DE2C1;
    width:70%;
    left:15%;
    height:1em;
    font-size:0.3em;
}

#footer .vjs-default-skin .vjs-control-bar .vjs-load-progress {
    background-color:#8DE2C1;
}

#footer .vjs-default-skin .vjs-control-bar .vjs-seek-handle.vjs-slider-handle::before {
    font-size: 5em;
    border-radius:5em;
    top:-5px;
    content:"";
    border:thick solid #8DE2C1;
}

#footer .vjs-default-skin .vjs-control-bar .vjs-play-progress {
    background-color:#8DE2C1;
}

.vjs-default-skin {
    color: #8DE2C1 !important;
}

.video-js {
    background-color: transparent !important;
}

.vjs-default-skin .vjs-slider {
    background-color:#8DE2C1 !important;
}

#footer .vjs-default-skin .vjs-control-bar .vjs-volume-control, #footer .vjs-default-skin .vjs-control-bar .vjs-fullscreen-control, #footer .vjs-default-skin .vjs-control-bar .vjs-live-controls, #footer .vjs-default-skin .vjs-control-bar .vjs-duration, #footer .vjs-default-skin .vjs-control-bar .vjs-time-divider, #footer .vjs-default-skin .vjs-control-bar .vjs-current-time {
    display:none;
}

#autoplay { width: 125px; font-size: 10px; color: #777; height: 25px; }
#autoplay label { cursor: pointer; }


#nav-bar { float:right; margin:15px; margin-top:35px; margin-right:15px}
#nav-bar a { display: block; color: #333; padding: 7px 7px; float: left; margin-right: 10px; margin-top: -10px; text-decoration: none; font-size: 16px; }
#nav-bar a#back-button { text-align:center; width:100px; background-color: #fff; color: #622988; border: solid 1px #622988 ; border-radius:5px;}
#nav-bar a#next-button { text-align:center;  width:100px; background-color: #622988; color:#fff; border: solid 1px #622988 ; border-radius:5px;}
/* Pour permettre l'affichage des call-to-action relativement à la position du bouton */
#nav-bar > a { position: relative; }
#nav-bar .nav-tooltip { position: absolute; bottom: 100%; right: 35%; margin: 0 100% 7px 0; display: none; }
#nav-bar .nav-tooltip p { text-align: right; float: right; color: #000; }
#nav-bar .nav-tooltip-next p{ width: 500px; }
#nav-bar .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; }

#copy { position: absolute; width: 100%; font-size: 10px; text-align: center; color:#fff; bottom:-15px;;}

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


/******* CONTENT *******/


.external-video-link {
    color:#733D93;
    font-size: 14px;
}


.external-video-link a {
    color:#733D93;
    display:block;
    font-style: italic;
}

.point-form li.tick:before {
    position: absolute;
    margin-left: -1em;
    font-weight: bold;
    color: #622988;
    font-size: 24px;
    margin-top: -8px;
}
.point-form li.tick:before {
  content: "\2713";
}

.point-form li.tick { text-decoration: line-through; color: #622988; opacity: 0.5; }

.point-form .title {
  margin-left:15px;
}

.slide-instructions {
    font-size:16px;
}

.slide-instructions span{
    display: block;
}

.slide-instructions span:first-child{
    font-weight: bold;
    margin-bottom:1em;
}

.slide.action-5 ol li {
    font-size:14px;
    margin-left:1.2em;
}

.slide.action-5 ol {
    margin-left:0;
    padding-left:0;
}

.slide.video .container {
    text-align: center;
}

.slide.video .container .video-footer {
    color: #6D3890;
    font-size: 13px;
    background-image: url('../img/sharing.png');
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 40px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-size: 25px;
}

.slide.video .container .video-footer a { color: #6D3890; text-decoration: none; }

.point-form {
    width:475px;
    margin:auto;
}

.point-form > div {
    margin-bottom:40px;
}
.point-form .section-reflection > p, .point-form .section-projection > p, .point-form .section-action > p {
    font-weight: bold;
}

.point-form .section-reflection, .point-form .section-projection, .point-form .section-action {
    font-size:14px;
}

.slide.introduction-2 .point-form .section-reflection, .slide.introduction-2 .point-form .section-projection, .slide.introduction-2 .point-form .section-action {
    opacity:0;
}

.feedback-form > div {
    clear: both;
}
.feedback-form p{
    font-size:13px;
}

.feedback-form .slider-div{
    padding:5px 0 0 0;
    background-color:#eee9f2;
}

.feedback-form input {
    width:100%;
    height:100%;
    border:1px solid #8be2bf;
    min-height: 60px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #8be2bf;
    text-align:center;
    font-size:12px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #8be2bf;
   text-align:center;
   font-size:12px;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #8be2bf;
   text-align:center;
   font-size:12px;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #8be2bf;
   text-align:center;
   font-size:12px;
}

.feedback-form .ui-state-default, .feedback-form .ui-widget-content .ui-state-default, .feedback-form .ui-widget-header .ui-state-default, .slide.projection-4 .rate-roles .ui-state-default, .slide.projection-4 .rate-roles .ui-widget-content .ui-state-default,  .slide.projection-4 .rate-roles .ui-widget-header .ui-state-default {
    border:none !important;
    border-radius:20px;
    background: #8be2bf !important;
    color: #8be2bf !important;
    top:-0.4em  !important;
}

.feedback-form .ui-widget-content, .slide.projection-4 .rate-roles .ui-widget-content {
    border:none !important;
    background: #8be2bf !important;
    color: #8be2bf !important;
}

.feedback-form .ui-slider-horizontal, .slide.projection-4 .rate-roles .ui-slider-horizontal {
    height: 0 !important;
}


.feedback-form .ui-slider .ui-slider-handle, .slide.projection-4 .rate-roles .ui-slider .ui-slider-handle {
    width: 0.8em !important;
    height: 0.8em !important;
}

.feedback-form .slider, .slide.projection-4 .rate-roles .slider {
    top:0.6em;
    border-top:thin solid #8be2bf !important;
}

.feedback-form .slider label, .slide.projection-4 .rate-roles .slider label {
    position: absolute;
    width: 20px;
    font-size:15px;
    margin-left: -10px;
    text-align: center;
    margin-top: -12.5px;
}

.feedback-form .slider label.current {
    /*background-color: #8be2bf; */
}

.feedback-form .slider-div p, .feedback-form .slider-div div, .slide.projection-4 .rate-roles .slider-div p, .slide.projection-4 .rate-roles .slider-div div {
    width:31.33%;
    margin:1%;
    float:left;
}

.feedback-form .slider-div, .slide.projection-4 .rate-roles .slider-div{
    width:48%;
    margin:1%;
    float:left;
}

.input-div{
    width:48%;
    margin:1%;
    float:left;
}



/******* RESPONSIVE *******/


@media (max-width: 1100px){
    #nav-bar a#back-button { position:absolute; bottom:80px; right:111px;}
    #nav-bar a#next-button { position:absolute; bottom:80px;right:1px;}
    /*#exit-course {
        border: solid 1px #622988 ; border-radius:5px; width: 145px; height:100px; text-align:center;
        position:absolute; bottom:20px;right:-5px; height:40%;
    }
    #exit-course a{
        text-decoration:none;
        position:absolute; bottom:3px;right:0px; width:145px;
    }*/
    #footer {
        background-color: #eee;
        height:70px;
    }

    #progress-bar .unit-progress > li{
        display:none;
    }

    #progress-bar .unit-progress li ul li.first-of-section {
    border:none;
}

    #progress-bar .unit-progress li.current{
        display:inline-block;
    }

    #progress-bar .unit-progress .section-title {
        top: -20px;
        color:#62298a;
        width:100%;
        text-align:left;
    }

    #progress-bar .unit-progress li.introduction .section-title {
        margin-left:10px;
    }

    #progress-bar .unit-progress li.reflection .section-title, #progress-bar .unit-progress li.projection .section-title {
        margin-left:75px;
    }

    #progress-bar .unit-progress li.action .section-title {
        margin-left:93px;
    }

    #progress-bar .unit-progress li.conclusion .section-title {
        margin-left:-3px;
    }

    #progress-bar {
        top: 25px;
    }

    .slider-div{
        width:98%;
        margin:1%;
        float:left;
    }

    .input-div{
        width:98%;
        margin:1%;
        float:left;
    }

    #progress-bar .unit-progress li ul .first-of-section {
        padding-left: 0;
    }

}

@media (max-width: 768px){
    .audio-player {
        margin-top:50px;
    }
    #audio { background-image: none !important;}
    #footer .vjs-default-skin .vjs-control-bar .vjs-progress-control,
    #footer .vjs-default-skin .vjs-text-track-display,
    #footer .vjs-default-skin .vjs-control-bar .vjs-mute-control {
        display:none;
    }
    #footer .vjs-default-skin .vjs-control-bar {
        height:30px;
        background-image: none !important;
        background-color: transparent !important;
    }


    #footer .vjs-default-skin .vjs-control-bar .vjs-play-control {
        left: 20%;
        font-size: 24px;
    }
    #copy {
        color:#000;
    }
    .section-progress li.reflection-4, .section-progress li.reflection-5, .section-progress li.reflection-6, .section-progress li.reflection-7, .section-progress li.projection-4, .section-progress li.projection-5, .section-progress li.projection-6, .section-progress li.projection-7, .section-progress li.action-4, .section-progress li.action-5, .section-progress li.action-6, .section-progress li.action-7 {
        display:none !important;
    }

    #progress-bar .unit-progress li.reflection .section-title, #progress-bar .unit-progress li.projection .section-title {
        margin-left:25px;
    }

    #progress-bar .unit-progress li.action .section-title {
        margin-left:45px;
    }

    #skipToDialog a {
        left:58%;
    }


    #skipToDialog button {
        left:23%;
    }

    #mobile-pause {
        display:block;
        background-position: -65px -50px;
    }

    #print-btn, #mail-btn {/*, #exit-course*/
        display:none;
    }

    #footer .buttons #instructions-btn {
        margin-left:45px;
    }

    #nav-bar a#back-button {
        position: ; width: 45px; height: 45px; overflow: hidden; background-image: url('../img/sprite.png'); background-repeat: no-repeat; background-size: 750%;
        background-position: -50px -37px;
        left:5px;
        border:none;
        text-indent: -9999px;
        background-color: transparent;
        right:auto;
        top:19px;
    }

    #nav-bar a#next-button {
        position:relative;
        bottom:10px;
    }


    #header-title #course-title {
        display:none;
    }
    #footer {
         z-index: 0;
    }

    #progress-bar .current-section-nav li span {
        top: -15px;
    }
    #progress-bar{
        padding-top:0;
    }
    #wrapper {
        padding:0;
        width: 100%;
        height:100%;
    }
    #inner-content {
      padding:2em 0 0 0;
      width: 100%;
      height:100%;
    }
    #hamburger {
        display:block;
    }

    .ham-trigger {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    label[for="ham-trigger"] {
        position: fixed;
        top: 25px;
        left: 25px;
        z-index: 1000;
        width: 55px;
        height: 55px;
        cursor: pointer;
        background-image: url('../img/sprite.png'); background-repeat: no-repeat; overflow: hidden;  background-position: 0px -47px; text-decoration: none;
        background-size: 800%;
    }

    .ham-trigger:checked + label {
        left: 73%;
    }

    #hamburger-div {
        padding:10% 5%;
        list-style: none;
        width: 70%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
    }
    #hamburger-div-bg {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: url("../img/wefibg.jpg") no-repeat center center fixed;
        background-size: 70% 100%;
        background-position: 0 0;
    }
    .ham-trigger:checked ~ #hamburger-div-bg {
        display:block;
    }
    #hamburger-div a{
        color:#fff;
        text-decoration: none;
    }

    #hamburger-div a:hover{
        color:#EEE9F2;
    }

    #hamburger-div a h1{
        padding:0;
        margin:0;
        font-size: 25px;
        padding-left:5%;
    }

    #hamburger-div h1{
        padding:0;
        margin:0;
        padding-left:5%;
        margin-bottom:1em;
    }

    #hamburger-div hr {
        border-color: #b39ac4;
    }

    #hamburger-div #ham-title{
        color:#fff;
        font-family: 'BlogScript'
    }



    body, html { min-width: 419px; background: #fff;}
}



/* MEDIAS */
/*
.voiceover { background-color: #66C0CB; 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: #66C0CB; }
.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: #66C0CB; 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 */
.slide.animation .content .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; }
.slide.animation .content .audio audio { display: none; }
.slide.animation .content .audio .howto { font-size: 24px; text-decoration: none; color: #828282; display: block; text-align: center; margin-top: 160px; }
.slide.animation .content .audio .transcript { display: none; }
.slide.animation .content .audio .mejs-container { display: none; }

/* AUDIO PLAYER */
#voiceover-btn .audio .howto { display: none; }

#voiceover-btn .audio .mejs-button,
#voiceover-btn .audio .mejs-time { position: absolute; background: transparent; }
#voiceover-btn .audio .mejs-controls .mejs-time-rail { position: absolute; left: 30px; top: 25px; height: 10px; direction: ltr; width: 200px; padding-top: 5px; }
#voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-total { background-color: transparent; height: 6px; }
#voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-buffering { height: 6px; }
#voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-loaded { background-color: rgba(255,255,255,0.3); width: 0; height: 6px; }
#voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-handle  { display: none; }
#voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 6px; background-color: #66C0CB; border: solid 1px #66C0CB; border-width: 1px 0; border-color: #66C0CB #fff #619FF2 #fff; }
#voiceover-btn .audio .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; }
#voiceover-btn .audio .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)); }
#voiceover-btn .audio .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; }
#voiceover-btn .audio .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-btn .audio .mejs-controls .mejs-playpause-button { top: 23px; left: 0px; margin: 0px; width: 43px; height: 43px; }
#voiceover-btn .audio .mejs-controls .mejs-playpause-button button { width: 63px; height: 63px; background: url('../img/sprite.png') no-repeat -60px -35px; margin: 0; padding: 0; border: none; zoom: 0.5; -moz-transform: scale(0.5,0.5); -moz-transform-origin: 0 0; }
#voiceover-btn .audio .mejs-controls .mejs-pause { width: 43px; height: 43px; top: 23px; left: 0px; margin: 0px; }
#voiceover-btn .audio .mejs-controls .mejs-pause button  { background-position: -120px -35px; }
#voiceover-btn .audio .mejs-controls .mejs-currenttime-container { position: absolute; top: 40px; left: 35px; color: #828282; font-size: 14px; }
#voiceover-btn .audio .mejs-controls .mejs-currenttime-container span { text-indent: 0px; }
#voiceover-btn .audio .mejs-controls .mejs-duration-container  { position: absolute; top: 40px; color: #828282; font-size: 14px; left: 190px; }
#voiceover-btn .audio .mejs-controls .mejs-duration-container span { text-indent: -10px; }

#voiceover-btn .audio .mejs-controls .mejs-button.loading button { background: url('../img/loading.gif') no-repeat center center; margin: 0; padding: 0; border: none; }
#voiceover-btn .audio .mejs-controls .mejs-volume-button  { display: none; }
#voiceover-btn .audio .mejs-controls .mejs-fullscreen-button  { display: none; }
#voiceover-btn .audio .mejs-controls .mejs-captions-button { display: none; }
#voiceover-btn .audio .mejs-controls .mejs-playpause-button button:focus { border: none; }

/******* RESPONSIVE *******/
/*
@media (max-height: 1000px){ .slide.animation .content .audio { zoom: 0.9; } }
@media (max-height: 900px){ .slide.animation .content .audio { zoom: 0.8; } }
@media (max-height: 800px){ .slide.animation .content .audio { zoom: 0.7; } }
@media (max-height: 700px){ .slide.animation .content .audio { zoom: 0.6; } }
@media (max-height: 600px){ .slide.animation .content .audio { zoom: 0.5; } }
@media (max-width: 1100px){ .slide.animation .content .audio { zoom: 0.7; } }
*/
/*
@media (max-width: 1024px){
    body #voiceover-btn .audio .mejs-controls .mejs-time-rail { width: 60px; }
    body #voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-total { width: 60px; }
    body #voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-buffering {  }
    body #voiceover-btn .audio .mejs-controls .mejs-time-rail .mejs-time-loaded { width: 60px; }
    body #voiceover-btn .audio .mejs-controls .mejs-duration-container { left: 70px; }
    body #voiceover-btn .audio .mejs-controls .mejs-duration-container span { font-size: 10px; }
    body #voiceover-btn .audio .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: #66C0CB; 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 { background-repeat: no-repeat; background-position: left center; margin-top: 0px; padding: 10px 0px; font-size: 24px; width: 50%; margin-left: auto; margin-right: auto; }
div.slide.icon div.header div.container h1 { position: absolute; color: #FFF; left: 350px; bottom: 30px; font-size: 48px; line-height: 72px; }
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: #66C0CB; padding-bottom: 10px; font-weight: 600; text-shadow: 2px 2px 15px #FFF; }

div.slide.introductionduction div.header div.container { background-color: #66C0CB; }
div.slide.introductionduction.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-introductionduction { 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-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: 260px; position: relative; }
ul.list-units li a { display: block; color: #444; text-decoration: none; font-size: 16px; padding: 10px; text-align: center; font-weight: 600; }
ul.list-units li a span.sprite { margin-left: auto; margin-right: auto; margin-bottom: 10px; }
ul.list-units li div.length { width: 80%; position: absolute; bottom: 0px; 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 { 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; }
div.slide.toc h1 { padding-top: 30px; padding-bottom: 30px; font-weight: 400; color: #66C0CB; }
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; }
div.slide.toc div.content div.container div.item a { display: block; padding: 15px; color: #828282; font-size: 16px; text-decoration: none; }
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; }
}
*/

/*************/
/* TAKEAWAYS */
/*************/
/*
div.slide.takeaways div.header { background-color: #66C0CB; 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: #66C0CB; 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; }
*/






/*********/
/* WATCH */
/*********/

#watch { font-size:1em; position:relative }
#watch .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius:15em;
  background:-webkit-linear-gradient(top, #f9f9f9,#666);
  background:-moz-linear-gradient(top, #f9f9f9,#666);
  background:linear-gradient(to bottom, #f9f9f9,#666);
  box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
}
#watch .frame-face:before {
  content:'';
  width:29.4em;
  height:29.4em;
  border-radius:14.7em;
  position:absolute;
  top:.3em; left:.3em;
  background:
    -webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
    -webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  background:
    -moz-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
    -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  background:
    linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
    radial-gradient(ellipse at center, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
}
#watch .frame-face:after {
  content:'';
  width:28em;
  height:28em;
  border-radius:14.2em;
  position:absolute;
  top:.9em; left:.9em;
  box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
  border:.1em solid rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top, #fff, #ccc);
  background:-moz-linear-gradient(top, #fff, #ccc);
  background:linear-gradient(to bottom, #fff, #ccc);
}
#watch .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#929394;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
}
#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#watch .digits { width:30em; height:30em; border-radius:15em; position:absolute; top:0; left:50%; margin-left:-15em; }
#watch .digits li { font-size:1.6em; display:block; width:1.6em; height:1.6em; position:absolute; top:50%; left:50%; line-height:1.6em; text-align:center; margin:-.8em 0 0 -.8em; font-weight:bold; }
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }
#watch .digits:before {
  content:'';
  width:1.6em;
  height:1.6em;
  border-radius:.8em;
  position:absolute;
  top:50%; left:50%;
  margin:-.8em 0 0 -.8em;
  background:#121314;
}
#watch .digits:after {
  content:'';
  width:4em;
  height:4em;
  border-radius:2.2em;
  position:absolute;
  top:50%; left:50%;
  margin:-2.1em 0 0 -2.1em;
  border:.1em solid #c6c6c6;
  background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
}
@keyframes hours { to {transform:rotate(360deg)} }
#watch .hours-hand {
  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#232425;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#232425 0 0 2px;
  transform-origin:0.4em 6.2em;
  transform:rotate(0deg);
  animation:hours 43200s linear 0s infinite;
}
#watch .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#232425 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #232425;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}
@keyframes minutes { to {transform:rotate(360deg)} }
#watch .minutes-hand {
  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#343536;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  /*transform:rotate(0deg);
  animation:minutes 3600s linear 0s infinite;*/
}
@keyframes seconds { to {transform:rotate(480deg)} }
#watch .seconds-hand {
    display: none;
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  transform:rotate(120deg);
  animation:seconds 60s steps(60, end) 0s infinite;
}
#watch .seconds-hand:after {
  content:'';
  width:1.4em;
  height:1.4em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}