@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;
}

body #progress-bar .sub-unit span.label-sub-unit.multi-br-generational { bottom: -10px; font-size: 11px; }
body div div.copy { text-align: left; }
div.conclusion ul.unit-progress li { padding-bottom: 0px; }

#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; }

/**************************/
/******** LAYOUT **********/
/**************************/
body, html { width: 100%; height: 100%; font-family: open_sans; font-size: 24px; }
body a { color: #223a82; }
#container, div.slide { height: 100%; background-color: transparent; }
body { margin-top: 3px; position: relative; background-image: url('../img/unit3-toc-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: bottom center; background-size: 100%; }
#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; }
#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; }

/* DATE PICKER */
select.ui-datepicker-year option, select.ui-datepicker-month option { color: #444 !important; font-size: 18px; }
select.ui-datepicker-year, select.ui-datepicker-month { color: #888 !important; font-size: 18px; }

/* SLIDER */
div.slider label { position: absolute; width: 5px; margin-top: -4px; margin-left: -2px; text-align: center; background-color: #c5dbec; color: #c5dbec; font-size: 1px; height: 25px; border: 1px solid #c5dbec; }

/* 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 #genogram-bar { background-image: url('../img/sprite.png'); background-repeat: no-repeat; background-position: -100px -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 #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 #genogram-bar.active { opacity: 1; cursor: pointer; }

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.tools div.instructions.open,
div.tools div.transcript.open { -webkit-overflow-scrolling: touch; display: block; overflow-y: scroll; }

div.tools div.genogram { 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; }
div.tools div.genogram.open { -webkit-overflow-scrolling: touch; display: block; overflow: scroll; }
div.tools div.genogram span { text-indent: 0px; display: inline-block; }
div.tools div.genogram #genogram-legend { top: 60px; left: 500px; }
div.tools div.genogram .svg-genogram {  }

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; }
ul.unit-progress { padding: 0px; margin: 0px; }

div.tools.unit2 ul.unit-progress { margin-left: 50px; }
div.tools.unit3 ul.unit-progress { margin-left: 70px; }
div.tools.unit5 ul.unit-progress { margin-left: 50px; }


body div.slide div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); background-size: 80px; background-repeat: no-repeat; }
body div.slide.icon div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); background-size: auto; }
body div.slide.takeaways div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); background-size: auto; }
body div.slide.appreciation div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); background-size: auto; }

body .slide.toc .header .container { background-color: #223a82; }
body .slide.toc .header .container h1 { color: #FFF; }
/*body .slide .header .container h1 span { display: none; }*/

/*ul.unit-progress li { position: relative; padding: 0px; margin: 0px 4px 0px 0px; display: inline-block; width: 20px; height: 20px; background-color: transparent; cursor: pointer; border-radius: 2px; }
ul.unit-progress li a { display: inline-block; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; font-size: 1px; color: #ddd; text-decoration: none; text-indent: -100px; overflow: hidden; border: solid 1px #223a82; border-radius: 2px; }
ul.unit-progress li.viewed { background-color: #223a82;  }
ul.unit-progress li.current { background-color: #444; height: 25px; }
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; }*/
#progress-bar span.intro-nav-label { left: 0px; }

    /******* 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; }


/*****************************/
/********   SPRITE  **********/
/*****************************/
span.sprite { display: block; background-repeat: no-repeat; background-image: url('../img/sprite.png'); overflow: hidden; }
span.sprite1 { background-position: 0px 0px; width: 135px; height: 135px; }
span.sprite2 { background-position: -183px 0px; width: 135px; height: 135px; }
span.sprite3 { background-position: -367px 0px; width: 135px; height: 135px; }
span.sprite4 { background-position: -550px 0px; width: 135px; height: 135px; }
span.sprite5 { background-position: -733px 0px; width: 135px; height: 135px; }
span.sprite6 { background-position: -6px -155px; width: 24px; height: 24px; }

span.sprite10 { background-position: -214px -140px; width: 63px; height: 63px; }
span.sprite11 { background-position: -316px -141px; width: 63px; height: 63px; }
span.sprite12 { background-position: -424px -141px; width: 63px; height: 63px; }
span.sprite13 { background-position: -532px -141px; width: 73px; height: 63px; }
span.sprite14 { background-position: -645px -141px; width: 63px; height: 63px; }


/* 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; }

body .slide.voiceover .header .container { background-color: #223a82; }
body .slide.case-story .header .container { background-color: #223a82; }
body .slide.interactive-activity .header .container { background-color: #223a82; }
body .slide.advice-expert .header .container { background-color: #223a82; }
body .slide.family-interview .header .container { background-color: #223a82; }
body .slide.peer-expert .header .container { background-color: #223a82; }

.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; }

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

/* LIFE CYCLES */
.lifecycle-milestone { display: block; width: 60px; height: 60px; overflow: hidden; background-repeat: no-repeat; background-image: url('../img/sprite.png'); }
.lifecycle-milestone.graduation { background-position: -17px -406px; }
.lifecycle-milestone.work { background-position: -81px -406px; }
.lifecycle-milestone.wedding { background-position: -141px -406px; }
.lifecycle-milestone.baby { background-position: -197px -406px; }
.lifecycle-milestone.retirement { background-position: -253px -406px; }




/*****************************/
/********   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-container { }
/*.mejs-controls { background: transparent url('../img/controls.svg') center 16px no-repeat; height: 65px; }*/
.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 .svg-sync .mejs-controls .mejs-time-rail .mejs-time-total { display: none; }
#voiceover-bar .svg-sync .mejs-controls .mejs-time-rail .mejs-time-buffering { display: none; }
#voiceover-bar .svg-sync .mejs-controls .mejs-time-rail .mejs-time-loaded { display: none; }
*/

#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; }
#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 .svg-sync .mejs-controls .mejs-currenttime-container { display:none; }*/
#voiceover-bar .mejs-controls .mejs-duration-container  { position: absolute; top: 40px; color: #828282; font-size: 14px; left: 190px; }
/*#voiceover-bar .svg-sync .mejs-controls .mejs-duration-container { left: 40px; top: 30px; }*/
#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 h1 { padding: 30px 0px; color: #fff; }
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.icon div.remember-last-unit { display:none; margin-top: 20px; background-color: rgba(255,255,255,0.8); }
div.slide.icon div.remember-last-unit h2 { font-size: 18px; }
div.slide.icon div.remember-last-unit ol { font-size: 14px; margin: 10px 0 20px -15px; }
div.slide.icon div.remember-last-unit ol li { margin-bottom: 10px; }

div.intro div.thank-you { margin-top: 50px; margin-bottom: 100px; background-color: rgba(255,255,255,0.8); padding: 30px; }
div.intro div.thank-you h2 { font-size: 18px;  }
div.intro div.thank-you p,
div.intro div.thank-you ul { font-size: 14px; }
div.intro div.thank-you ul { margin: 10px 0 20px 0; padding-left: 20px; }
div.intro div.thank-you ul li { margin-bottom: 10px; list-style-type: disc; }
div.conclusion ul { padding-left: 10px; }
div.conclusion ul li { list-style-type: none; padding-left: 0px; padding-bottom: 10px; }
div.conclusion ul li strong { padding-right: 5px; }

/*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 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.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.full div.content { height: 100%; }
div.slide.full div.content div.container { height: 100%; width: 100%; margin: 0px; padding: 0px; }
div.slide.full div.header { display: none; }

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

div.slide.icon div.header div.container h1 { position: absolute; color: #FFF; left: 350px; bottom: 30px; font-size: 48px; line-height: 72px; }
div.slide div.content div.container h2 { color: #223a82; padding-bottom: 10px; font-weight: 600; text-shadow: 2px 2px 15px #FFF; }

div.slide.icon div.content div.container p { padding-bottom: 20px; }
div.slide.full div.content, div.slide.full div.content div.container { height: 100%; }

.activity .activity-actions button { margin: 15px auto 30px auto; display: block; }
.activity #activity-session,
.activity #activity-resume { display: none; }

p.source { color: gray; font-style: italic; font-size: 14px; text-align: right; margin-top: -20px; }
.row p.source { margin-top: 0; }

div.slide.video-case div.video { position: relative; float: left; width: 30%; margin-right: 3%; margin-top: 0px; }
div.slide.video-case div.video h3 { text-align: center; }

#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; }


div.slide.intro div.sponsor { text-align: center; }
div.slide.intro div.sponsor img { margin: 40px; }
div.slide.intro div.sponsor p { text-align: justify; }

    /******* RESPONSIVE *******/
    @media (max-height: 800px) {
      body div.slide div.header div.container h1 { width: 80%; }
    }
    @media (max-width: 1100px){
      div.slide.unit3.icon div.header div.container { width: 75%; }
    }

    @media (max-width: 1024px){
      #container div.slide div.header div.container h1 { width: auto;  }
      #container div.slide.icon div.header div.container h1 { width: auto; margin-left: 0px; }
      #container div.slide.takeaways div.header div.container h1 { width: auto;   }

      #container div.slide.appreciation div.header div.container h1 { width: auto; }

      #container div.slide.icon div.content { height: calc(100% - 320px); }
      #container div.content div.container { width: 100%; }
      #container div.content div.container.outcome { width: 80%; }
    }

    @media (max-width: 768px){
      #container div.slide div.header div.container h1 { width: auto; font-size: 24px; }
      #container div.slide.icon div.header div.container h1 { width: auto; font-size: 36px; }
      #container div.slide.icon div.content { height: calc(100% - 320px); }
      #container div.content div.container { width: 100%; }
      body div.slide.icon div.remember-last-unit { padding: 20px; }
    }


/*****************************/
/********   TOC  **********/
/*****************************/
ul.list-units { margin: 0px; padding: 0px; position: relative; }
ul.list-units li { list-style-type: none; display: block; float: left; width: 20%; text-align: center; height: 260px; position: relative; }
ul.list-units li a { display: block; color: #828282; text-decoration: none; font-size: 20px; 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: #828282; font-size: 18px;  font-weight: 600; }
ul.list-units li div.length span.sprite { float: left; margin-left: 40px; }

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 { background-color: #edf0f2; }
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: #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; }
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 { 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; }
    }

/********************************/
/********   GENOGRAM  ***********/
/********************************/
#genogram-legend fieldset div.legend { zoom: 0.75; }
#genogram-legend { display: block; position: absolute; background-color: #FFF; width: 60%; min-width: 800px; padding: 20px; box-shadow: 2px 2px 25px #000; zoom: 0.75; top: 0px; right: 0px; }
#genogram-legend button.close { display: block; position: absolute; right: 40px; z-index: 999; }


#genogram-editor #genogram-legend { display: none; }
#genogram-editor #plus-business { display: none; }
#genogram-editor #go-business { display: none; }
#genogram-default-5-years-later { position: relative; }
#genogram-default-10-years-later { position: relative; }

    /******* RESPONSIVE *******/
    @media (max-height: 750px){
      body #genogram-default { zoom: 0.85; margin-top: -40px; }
      body #genogram-default-5-years-later { zoom: 0.85; margin-top: -40px; }
      body #genogram-default-10-years-later { zoom: 0.85; margin-top: -40px; }
      body #genogram-legend { top: -20px; padding: 15px; }
      body #genogram-legend span.definition { font-size: 22px; }
      body #genogram-legend fieldset { padding-left: 0px; padding-right: 0px; }
      body #genogram-default-5-years-later #genogram-legend { top: 20px; }
      body #genogram-default-10-years-later #genogram-legend { top: 20px; }

      body .genogram.open .svg-genogram { zoom: 0.85; margin-top: -40px; }
    }

    @media (max-width: 768px){
      body #genogram-default { margin-top: 120px; }
      body #genogram-default-5-years-later { padding-top: 120px; height: 660px; }
      body #genogram-default-10-years-later { padding-top: 120px;  }

      body #genogram-legend { right: auto; left: 100px; top: -160px; }

      body #genogram-default-5-years-later #genogram-legend { top: 0px; right: auto; left: 0px; }
      body #genogram-default-10-years-later #genogram-legend { top: 0px; right: auto; left: 0px; }

      body #genogram-editor ul.nav-tabs li, body #genogram-editor ul.nav-tabs li a { font-size: 16px; }
      body .understand-genogram { padding-bottom: 40px; }
      body .understand-genogram button { margin-top: -20px; }
      body #circles-tab { zoom: 0.9; }
    }




/**************************************/
/********   ANIMATED CASES  ***********/
/**************************************/

.image-replace { text-indent: -9999em; display: block; }
/*.schema { position: relative; }
.schema .schema-title { text-align: center; float: left; }
.schema .schema-title h1, .schema .schema-title h2{ padding: 0; margin : 15px 0; line-height: 0.8em; font-size: 25px; }
.schema .schema-box { background: #b0cae9; border-radius: 20px; border: 1px solid #4f647a; padding: 20px; font-weight: bold; font-size: 20px; text-align: center; float: left; }
.schema-transform-point { overflow: visible; position: relative; width: 1px; height: 1px; }
.schema .schema-column { position: relative; float: left; }
.schema .schema-aside { position: absolute; right: -100%; top: 0; width: 100%; padding: 10px; text-align: left; color: #616161; }
.schema .schema-bottom .schema-aside { top: auto; bottom: 0; }
.schema .schema-left .schema-aside { top: auto; right: auto; left: -100%; }
.schema .schema-box h1, .schema .schema-box h2, .schema .schema-box h3, .schema .schema-box h4{ font-weight: bold; }
.schema .schema-centered { float: none; clear: both; margin: 0 auto; position: relative; }
.schema .schema-left { float: left; position: absolute; left: 0; }
.schema .schema-right { float: right; position: absolute; right:0; }
.schema .schema-bottom { position: absolute; bottom:0; }
.schema .schema-top { position: absolute; top:0; }
.schema-blue .schema-box {
  border: none;
  background: #b0cae9;
  background: -moz-linear-gradient(top, #b0cae9 14%, #93bae4 63%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#b0cae9), color-stop(63%,#93bae4));
  background: -webkit-linear-gradient(top, #b0cae9 14%,#93bae4 63%);
  background: -o-linear-gradient(top, #b0cae9 14%,#93bae4 63%);
  background: -ms-linear-gradient(top, #b0cae9 14%,#93bae4 63%);
  background: linear-gradient(to bottom, #b0cae9 14%,#93bae4 63%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0cae9', endColorstr='#93bae4',GradientType=0 );
  color: #334464; }

div.container div.schema.schema-blue div.schema-box h1,
div.container div.schema.schema-blue div.schema-box h2,
div.container div.schema.schema-blue div.schema-box h3,
div.container div.schema.schema-blue div.schema-box h4{ color: #203864; font-weight: bold; }

div.container div.schema.schema-blue div.schema-title h1,
div.container div.schema.schema-blue div.schema-title h2,
div.container div.schema.schema-blue div.schema-title h3,
div.container div.schema.schema-blue div.schema-title h4{ color: #203864; font-weight: bold; }

.schema.timeline { width: 650px; color: #FFF; position: relative; }
.schema.timeline ul, .schema.timeline ol { padding: 0; margin: 0; list-style-type: none; }
.schema.timeline strong { text-transform: uppercase; }
.schema.timeline .timeline-period { font-size: 10px; float: left; width: 16.2%; margin: 0 -3% 0 0; padding: 1% 2.7% 0 2.4%; height: 100%; background-size: 100% auto; background-repeat: no-repeat; cursor: pointer; }
.schema.timeline .timeline-age { position: absolute; padding-top: 13px; bottom: -33px; background: url('../img/unit2-timeline-age.png') center top no-repeat; }
.schema.timeline .timeline-period ul { list-style-type: disc; font-size: 6px; }
.schema.timeline .timeline-age { color: #6d6f71; font-weight: bold; }
.timeline-axis { width: 59%; height: 100%; margin: 0 auto; position: absolute; right: 0; bottom: -25px; }
.timeline-axis-center { border-radius: 500px; width: 100px; height: 100px; background: #888; position: absolute; bottom: 227px; right: 61px; box-shadow: 3px 3px 5px #555; }
.schema.timeline ol{ height: 100%; }
.timeline-transform-point-individual { transform: rotate(52deg); bottom: -415px; right: -560px; }
.schema.timeline-individual { width: 830px; height: 55px; position: absolute; right: -150px; bottom: -5px; }
.schema.timeline-individual .timeline-age{ margin-left: 30%; transform: rotate(-20deg); }
.schema.timeline-individual .timeline-period ul{ padding: 0; padding-right: 10%; margin: 0; list-style-type: none; }
.schema.timeline-individual .timeline-period li{ padding-left: 0.5em; }
.schema.timeline-individual .timeline-period.timeline-adolescence{ background-image: url(../img/unit2-timeline/unit2-timeline-individual-1.png); }
.schema.timeline-individual .timeline-period.timeline-youngadult{ background-image: url(../img/unit2-timeline/unit2-timeline-individual-2.png); }
.schema.timeline-individual .timeline-period.timeline-familyfounder{ background-image: url(../img/unit2-timeline/unit2-timeline-individual-3.png); }
.schema.timeline-individual .timeline-period.timeline-middleage{ background-image: url(../img/unit2-timeline/unit2-timeline-individual-4.png); }
.schema.timeline-individual .timeline-period.timeline-preretirement{ background-image: url(../img/unit2-timeline/unit2-timeline-individual-5.png); }
.schema.timeline-individual .timeline-period.timeline-goldenager{ background-image: url(../img/unit2-timeline/unit2-timeline-individual-6.png); }
.schema.timeline-family { width: 686px; height: 55px; position: absolute; right: -106px; bottom: 225px; }
.schema.timeline-family .timeline-period{ text-align: center; padding-top: 0.25%; }
.schema.timeline-family .timeline-period.timeline-single{ background-image: url(../img/unit2-timeline/unit2-timeline-family-1.png); }
.schema.timeline-family .timeline-period.timeline-couple{ background-image: url(../img/unit2-timeline/unit2-timeline-family-2.png); }
.schema.timeline-family .timeline-period.timeline-couplechildren{ background-image: url(../img/unit2-timeline/unit2-timeline-family-3.png); }
.schema.timeline-family .timeline-period.timeline-coupleadults{ background-image: url(../img/unit2-timeline/unit2-timeline-family-4.png); }
.schema.timeline-family .timeline-period.timeline-grandparents{ background-image: url(../img/unit2-timeline/unit2-timeline-family-5.png); }
.schema.timeline-family .timeline-period strong{ display: table-cell; vertical-align: middle; height: 35px; width: 200px; font-size: 8px; text-align: center; }
.timeline .timeline-period{ position: relative; top: 0%; transition: top 0.5s; }
.timeline .timeline-period.emphase-current { position: relative; top: -20%; }
.timeline-emphase { position: absolute; left: 67px; top: 266px; z-index: 100; padding: 20px; background: #e84324; border-radius: 20px; font-size: 0.5em; color: #FFF; display: none; }
*/
.animation-container { position: relative; visibility: hidden; }
.animation-container .sprite { position: absolute; height: 1px;  width: 20%; overflow: visible !important; }
.animation-container .sprite img { width: 100%; height: auto; }
.animation-container .sprite.relative-height { width: 1px; height: 100%; }
.animation-container .sprite.relative-height img { width: auto; height: 100%; }
.animation-container .sprite.relative-center img, .animation-container .sprite.relative-center .inner-sprite { position: absolute; left: -50%; }
.animation-container .sprite.relative-bottom img, .animation-container .sprite.relative-bottom .inner-sprite { position: absolute; bottom: 0; }
.animation-container .sprite.relative-left img, .animation-container .sprite.relative-left .inner-sprite { position: absolute; left:-100%; }
.animation-container .sprite.absolute-center { left:  50%; top: 50%; }
.animation-container .sprite .inner-sprite{ width: 100%; }
.animation-container .v-align { display: table-cell; vertical-align: middle; height: 5em; }
.animation-container .fill-canevas { height: 100%; width: 300%; top: 0; left: 0; }
.animation-container .canevas-button { cursor: pointer; }
.animation-container .canevas-button.deactivated { cursor: auto; }
.animation-container .canevas-button>img, .animation-container .canevas-button>div { position: absolute; }
.animation-container .canevas-button.deactivated .hover { opacity: 0; }
.animation-container .canevas-debugbox { color: #F00; font-weight: bold; z-index: 9999; }
.activity-overlay { z-index: 90; height: auto; }


/*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; }
#nav .nav-tooltip-next { height: 137px; }
#navbar .nav-tooltip p { text-align: right; font-family: "Comic Sans MS", "open_sans"  ,Arial, Sans-Serif; float: right; color: #000; }
#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; }
.animation .bubble { width: 38%; height: 45%; top: -2.5%; }
.animation .bubble .inner-sprite { padding : 20% 20% 0; width: 100%; position: absolute; font-size: 2.6vh; text-align: center; line-height: 2.6vh; }

#quiz #pager { position: fixed; margin-left: 25%; width: 50%; bottom: 80px; text-align: center; }
#quiz #pager div { margin-left: -140px; }
#quiz #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; }
#quiz #pager span.cycle-pager-active { background-color: transparent; color: #FFF; border: solid 1px #FFF; }
#quiz #prev { position: fixed; left: 0px; bottom: 20%; display: block; padding: 10px 20px; font-size: 18px; background-color: #828282; color: #FFF; text-decoration: none; cursor: pointer; }
#quiz #next { position: fixed; right: 0px; bottom: 20%; display: block; padding: 10px 20px; font-size: 18px; background-color: #828282; color: #FFF; text-decoration: none; cursor: pointer; }
#quiz #prev.disabled { display: none; }
#quiz #next.disabled { display: none; }



/*****************************/
/********   VIDEOS  **********/
/*****************************/
#videos { height: 100%; width: 100% !important; position: relative; }
#videos div.video { width: 100%; position: absolute; left: 0px; top: 0px; padding: 20px; }
#videos div.video h2 { text-align: center; margin-top: 0px; }
.video-case #pager span.cycle-pager-active { color: #888; }
.video-case p { text-align: center; }
.video-case div.transcript { display: none; }
.video-case .row.genogram { display: none; }

    /******* RESPONSIVE *******/
    @media (max-height: 750px){
      #videos div.video iframe { height: 400px !important; }
      body div.video-case #videos { padding-bottom: 0px; }
      body div.video-case p { clear: both; margin-top: 50px;}
    }

    @media (max-width: 1024px){
      #videos div { border: solid 1px transparent; }

    }

    @media (max-width: 768px) {
      #navbar .nav-tooltip { bottom: 200%; }
    }


div.video-case div.container { padding-bottom: 60px; }
div.video-case #videos { padding-bottom: 100px; }
div.video-case #videos #pager { position: absolute; bottom: 20px; width: 50%; left: 25%; right: 25%; margin-left: 0px; }
div.video-case #videos #pager div { margin-left: 0px; }

/* EXPERT-VIDEO */
div.slide.expert-video div.content div.container div.expert { width: 45%; position: relative; float: left; padding-bottom: 50px; }
div.slide.expert-video div.content div.container div.expert.first { margin-right: 10%; }
div.slide.expert-video div.content div.container div.expert div.video iframe { width: 100%; }
div.slide.expert-video div.content div.container div.expert div.description p { font-size: 18px; }

div.slide.intro div.content div.container div.expert { width: 45%; position: relative; float: left; padding-bottom: 50px; }
div.slide.intro div.content div.container div.expert.first { margin-right: 10%; }
div.slide.intro div.content div.container div.expert div.video iframe { width: 100%; }
div.slide.intro div.content div.container div.expert div.description h2 { font-size: 28px; }
div.slide.intro div.content div.container div.expert div.description p { font-size: 18px; }

/* TAKEAWAYS */
div.slide.unit3.takeaways div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); }
div.slide.unit3.quiz div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); }
div.slide.conclusion.takeaways div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); }
div.slide.conclusion.appreciation div.header div.container { background-image: url('../img/unit3-header-bold.jpg'); }

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; }

div.slide.quiz div.header { background-color: #223a82; width: 100%; height: 20%; min-height: 200px; }
div.slide.quiz 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.quiz div.content { height: 80%; }
div.slide.quiz 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.quiz div.header div.container h1 { position: absolute; color: #FFF; left: 250px; bottom: 20px; font-size: 42px; line-height: 72px; }
div.slide.quiz div.content div.container ol { width: 80%; margin-left: 10%; }
div.slide.quiz div.content div.container ol li { padding-bottom: 50px; }

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; }



/*****************************/
/********   UNIT3  ***********/
/*****************************/
div.slide.unit3 div.content { background-color: transparent; }

.slide.unit3.animation div.animation { width: 100%; height: 100%; }


/* OWNERSHIP STAGES */
div.ownershipstages { position: relative; width: 1100px; height: 850px; background-image: url('../img/ownershipstages/base.png'); background-repeat: no-repeat; background-position: left top; background-size: contain; margin-left: auto; margin-right: auto; }
div.ownershipstages h2 { padding: 0px; margin: 0px; }
div.ownershipstages h2.north { position: absolute; width: 100%; top: 25px; text-align: center; }
div.ownershipstages h2.west { position: absolute; left: 55px; top: 400px; text-align: center; }
div.ownershipstages h2.east { position: absolute; right: 75px; top: 400px; text-align: center; }
div.ownershipstages h2.south { position: absolute; width: 100%; bottom: 34px; text-align: center; }

div.ownershipstages div.animatedCompass { position: absolute; width: 725px; height: 725px; left: 189px; top: 54px; background-image: url('../img/ownershipstages/active-arrow.png'); background-repeat: no-repeat; background-position: left top; background-size: contain; }

div.ownershipstages div.workingin { position: absolute; width: 154px; height: 85px; background-image: url('../img/ownershipstages/in.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; left: 55px; bottom: 230px; text-align: center; display: table; }
div.ownershipstages div.workingon { position: absolute; width: 154px; height: 85px; background-image: url('../img/ownershipstages/on.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; right: 66px; top: 100px; text-align: center; display: table; }

div.ownershipstages div.shortterm { position: absolute; width: 154px; height: 85px; background-image: url('../img/ownershipstages/short.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; left: 55px; bottom: 110px; text-align: center; display: table; }
div.ownershipstages div.longterm { position: absolute; width: 154px; height: 85px; background-image: url('../img/ownershipstages/long.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; right: 66px; top: 220px; text-align: center; display: table; }

div.ownershipstages div.workingin span { font-size: 16px; color: #FFF; text-transform: uppercase; vertical-align: middle; display: table-cell; }
div.ownershipstages div.workingin span strong { color: #FFFFFF; text-decoration: underline; }

div.ownershipstages div.workingon span { font-size: 16px; color: #FFF; text-transform: uppercase; vertical-align: middle; display: table-cell; }
div.ownershipstages div.workingon span strong { color: #FFFFFF; text-decoration: underline; }

div.ownershipstages div.shortterm span { font-size: 16px; color: #FFF; text-transform: uppercase; vertical-align: middle; display: table-cell; }
div.ownershipstages div.shortterm span strong { display: block; color: #FFFFFF; }

div.ownershipstages div.longterm span { font-size: 16px; color: #FFF; text-transform: uppercase; vertical-align: middle; display: table-cell; }
div.ownershipstages div.longterm span strong { display: block; color: #FFFFFF; }

div.ownershipstages div.core { position: absolute; width: 725px; height: 725px; left: 176px; top: 60px; }
div.ownershipstages div.core div.q1 { position: absolute; width: 362px; height: 362px; top: 0; left: 0; }
div.ownershipstages div.core div.q2 { position: absolute; width: 362px; height: 362px; top: 0; left: 362px; }
div.ownershipstages div.core div.q3 { position: absolute; width: 362px; height: 362px; top: 362px; left: 362px; }
div.ownershipstages div.core div.q4 { position: absolute; width: 362px; height: 362px; top: 362px; left: 0; }

div.ownershipstages div.core div ul, div.ownershipstages div.core div ul li { padding: 0px; margin: 0px; list-style-type: none; font-size: 14px; text-transform: uppercase; font-weight: 300; color: #FFF; padding-bottom: 15px; }

div.ownershipstages div.core div ul { position: absolute; width: 362px; height: 362px; padding-top: 10px; }
div.ownershipstages div.core div.q1 ul { top: 150px; left: 110px; }
div.ownershipstages div.core div.q2 ul { top: 170px; }
div.ownershipstages div.core div.q3 ul { top: 0; left: 0; }
div.ownershipstages div.core div.q4 ul { top: 0; left: 130px; }

div.ownershipstages div.core div.q2 ul li { text-align: right; }
div.ownershipstages div.core div.q3 ul li { text-align: right; padding-bottom: 5px; }

div.ownershipstages div.core div.q1 ul li.item1 { margin-left: 120px; }
div.ownershipstages div.core div.q1 ul li.item2 { margin-left: 80px; }

div.ownershipstages div.core div.q2 ul li.item1 { margin-right: 180px; }
div.ownershipstages div.core div.q2 ul li.item2 { margin-right: 150px; }
div.ownershipstages div.core div.q2 ul li.item3 { margin-right: 115px; }
div.ownershipstages div.core div.q2 ul li.item4 { margin-right: 110px; }

div.ownershipstages div.core div.q3 ul li.item0 { margin-right: 125px; }
div.ownershipstages div.core div.q3 ul li.item1 { margin-right: 110px; }
div.ownershipstages div.core div.q3 ul li.item2 { margin-right: 115px; }
div.ownershipstages div.core div.q3 ul li.item3 { margin-right: 120px; }
div.ownershipstages div.core div.q3 ul li.item4 { margin-right: 150px; }
div.ownershipstages div.core div.q3 ul li.item5 { margin-right: 180px; }

div.ownershipstages div.core div.q4 ul li.item3 { margin-left: 8px; }
div.ownershipstages div.core div.q4 ul li.item3 { margin-left: 20px; }
div.ownershipstages div.core div.q4 ul li.item4 { margin-left: 54px; }

div.ownershipstages div.core div.growth h3 { position: absolute; background-color: #FFF; padding: 15px 5px; width: 165px; color: #2e6ca4; text-align: left; text-transform: uppercase; font-size: 14px; }
div.ownershipstages div.core div.growth h3 span { display: block; color: #AAA; }

div.ownershipstages div.core div.growth h3.professional { top: 100px; left: 370px; margin-left: 4px; }
div.ownershipstages div.core div.growth h3.managerial { top: 337px; left: 347px; margin-left: 2px; }
div.ownershipstages div.core div.growth h3.entrepreneurial { bottom: 94px; left: 321px; }
p.ownershipstages.source { text-align: center; padding-top: 20px; }


.svg-genogram svg { background-color: transparent; }

.unit3.slide14 div.header { position: absolute; width: 100%; z-index: 100; }
.unit3.slide14 { width: auto; }
.unit3.slide14 h1.category-text { padding: 0px; }
.unit3.slide14 .content { height: 100%; }
.unit3.slide14 .content #activity-session { height: 105%; background: #9be5ff;  }
.unit3.slide14 .content #activity-session .animation-container { height: 90%; overflow: hidden; }

.unit3.slide14 #activity-instructions { padding-top: 200px !important; }
.unit3.slide14 #activity-instructions ol li { padding-bottom: 20px; }


.unit3.slide14 .question-count { background: #FF0000; border-radius: 40px; text-align: center; color: #FFF; font-weight: bold; padding: 4px 5px; margin-top: -7%; z-index: 60; top: 0; right: 0; width: 30px; height: 30px; font-size: 14px; box-shadow: 2px 2px 3px #888; border: solid 1px #FFF; }

.unit3.slide14 #activity-questions, .unit3.slide14 .animation-container{ display: none; }
#show-activity-resume { position: fixed; top: 80px; left: 90px; }
.unit3.slide14 #activity-questions { display: none; position: absolute; bottom: 8%; left: 22%; width: 78%; height: 24%; color: #FFF; background: #3a4c5b; z-index: 900; }
.unit3.slide14 #activity-questions .activity-description{ height: 100%; padding: 70px 0 0 20px; position: relative; }

.unit3.slide14 #activity-questions .activity-description .text-next-slide { display: none; }
.unit3.slide14 .activity-body { width: 100%; padding: 0 5px; display: none; }
.unit3.slide14 .activity-header .activity-answerbank > p { float: left; width: 225px; }
.unit3.slide14 .activity-header { overflow: hidden; width: 100%; padding : 15px 15px 0 15px; }
.unit3.slide14 .activity-header .activity-result { display: none; position: absolute; width: 100%; max-width: 700px; height: 50px; text-align: center; font-size: 45px; font-weight: bold; }
.activity-source-wrapper { overflow: hidden; width: 185px; float: left; }
.activity-source-wrapper p { padding: 0 0 0 5px; display: table-cell; vertical-align: middle; height: 80px; }
.unit3.slide14 .draganddrop-source-bg, .unit3.slide14 .draganddrop-source, .unit3.slide14 .draganddrop-dest { float: left; width: 70px; height: 80px; background-repeat: no-repeat; background-size: 100% auto; cursor: pointer; }
.unit3.slide14 .draganddrop-dest-wrapper{ float: left; }
.unit3.slide14 .activity-answer-category{ float: left; }

.unit3.slide14 h1.info { position: absolute; background-image: url('../img/down-arrow-white.png'); background-repeat: no-repeat; background-position: center top; color: #FFFFFF; font-size: 20px; z-index: 920; text-align: center; padding: 10px; padding-top: 40px; bottom: 25%; }

.unit3.slide14 h1.info.info-filing-cabinet { bottom: auto; top: 10%; left: 17%; background-image: url('../img/left-arrow.png'); background-position: center bottom; color: #2090c0; padding-top: 0px; padding-bottom: 40px; }
.unit3.slide14 h1.info.info-phone { left: 25%; }
.unit3.slide14 h1.info.info-computer { left: 45%; }
.unit3.slide14 h1.info.info-newspaper { left: 70%; background-image: url('../img/down-arrow-white.png'); }

.unit3.slide14  .activity-category-icon { background-repeat: no-repeat; background-size : 100% auto; width: 65px; padding-top: 75px; float: left; font-size: 0.5em; text-align: center; }
.unit3.slide14 .draganddrop-source-bg{ background-image: url('../img/unit3-activity-bubbleslot.png'); }
.unit3.slide14 .activity-owner .activity-category-icon{ background-image: url('../img/unit3-activity-owner.png'); }
.unit3.slide14 .activity-manager .activity-category-icon{ background-image: url('../img/unit3-activity-manager.png'); }
.unit3.slide14 .activity-category-icon span { font-size: 16px; }
.unit3.slide14 .draganddrop-dest { background-image: url('../img/unit3-activity-bubbleslot.png'); margin: 7px; }
.unit3.slide14 .draganddrop-source-decide { background-image: url('../img/unit3-activity-bubbledecide.png'); }
.unit3.slide14 .draganddrop-source-inform { background-image: url('../img/unit3-activity-bubbleinformed.png'); }
.unit3.slide14 .draganddrop-source-consult { background-image: url('../img/unit3-activity-bubbleconsulted.png'); }
.unit3.slide14 .big-table { background: url("../img/unit3-activity-table.png") repeat-x; background-size: auto 40%; background-position: bottom; left:0%; }
.unit3.slide14 .filing-cabinet { height: 90%; /*left: 80%;*/ left: -8%; bottom: 0%; z-index: 800; }

.unit3.slide14 .filing-cabinet .activity-overlay { left: -130px; top: 5%; width: 662px; background: url('../img/unit3-policy-bg.png') no-repeat top left; background-size: 100% auto; }
.unit3.slide14 .filing-cabinet h2{ text-align: center; font-weight: bold; margin: 5px 0; }
.unit3.slide14 .filing-cabinet .policy-rules { width: 47%; float: left; margin: 0 0 0 8%; }
.unit3.slide14 .filing-cabinet .policy-note { float: right; width: 25%; margin: 34% 17.3% 0 0; font-size: 0.8em; }
.unit3.slide14 .filing-cabinet .policy-close { right: 1%; }
.unit3.slide14 .phone { left: 20%; bottom: 40%; }
.unit3.slide14 .phone-bubble { left: 50%; top: -314px; width: 500px; }
.unit3.slide14 .phone-bubble-arrow { background: url('../img/unit3-activity-phonebubblearrow.png') no-repeat 0 20px; width: 86px; min-height: 186px; float: left; }
.unit3.slide14 .phone-bubble-text { background: #FFF; width: 414px; min-height: 166px; float: right; }
.unit3.slide14 .phone-bubble-header{ background: url('../img/unit3-activity-phonebubblechar.jpg') no-repeat 5px center; background-size: 80px auto; padding-left: 90px; padding: 20px 0 20px 90px; }
.unit3.slide14 .phone-bubble-text p { padding: 25px; }
.unit3.slide14 .overlay-close { background: url('../img/unit4-filingcabinet-close.png'); background-size: 30px 30px; width: 30px; height: 30px; position: absolute; top:20px;right:20px; }
.unit3.slide14 .activity-overlay .question-nav { position: absolute; top: -50px; left: 0; height: 50px; overflow: hidden; }
.unit3.slide14 .activity-overlay .question-nav a { display: block; float: left; width: 50px;height:50px; background: transparent no-repeat; background-size: 100% auto; text-indent: -9999em; }
.unit3.slide14 .activity-overlay .question-nav a.call-to-action{ border: 5px solid rgba(255,169,19,1); border-radius: 5px; }
.unit3.slide14 .activity-overlay .question-nav a.question-nav-next { background-image : url('../img/activity-btn-next.png'); }
.unit3.slide14 .activity-overlay .question-nav a.question-nav-prev { background-image : url('../img/activity-btn-prev.png'); }
.unit3.slide14 .activity-overlay .question-nav ul { margin: 0; padding: 5px; width: 300px; font-weight: bold; list-style-type: none; line-height: 1em; font-size: 1.75em; display: block; float: left; }
.unit3.slide14 .activity-overlay .question-nav ul li { display: block; text-align: center; }
.unit3.slide14 .binders { right: 10%; bottom: 40%; width: 35%; }
.unit3.slide14 .computer { left: 45%; bottom: 40%; }
/*html.moder_touch .unit3.slide14 .computer { left: 25% !important; }*/
.unit3.slide14 .computer-email { left: -100%; top: -256px; width: 500px; font-size: 0.6em; }
.unit3.slide14 .computer-question-nav { background: rgba(217,217,217,0.9); }
.unit3.slide14 .computer-email-window { background: rgba(217,217,217,0.9); padding: 10px; }
.unit3.slide14 .computer-email-body { background: #FFF; padding: 10px 15px; }
.unit3.slide14 .computer-email-from, .unit3.slide14 .computer-email-to, .unit3.slide14 .computer-email-subject { padding: 0 15px; }
.unit3.slide14 .computer-email-subject { background: #FFF; padding-top :5px; padding-bottom :5px; }
.unit3.slide14 .newspaper { left: 69%; bottom: 40%; width: 20%; }
/*html.moder_touch .unit3.slide14 .newspaper { left: 49% !important; }*/
.unit3.slide14 .newspaper-header { background: url("../img/unit3-activity-newspaperoverlay.png") top left no-repeat; background-size: 500px auto; width: 500px; height: 385px; left: -100%; top: -350px; padding: 138px 41px 0 72px; }
.unit3.slide14 .newspaper-header h1{ font-family: "Time New Roman", serif; color: #000; font-size: 1.2em; text-transform: uppercase; transform: rotate(5deg); -webkit-transform: rotate(5deg); }
.unit3.slide14 .activity-overlay .newspaper-question-nav { font-family: "Time New Roman", serif; color: #000; top: 91px; left: 66px; transform: rotate(5.5deg); -webkit-transform: rotate(5.5deg); }
.unit3.slide14 .newspaper-header .newspaper-close{ top: 43px; right: 84px; }



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

     @media (max-width: 1100px){
      div.ownershipstages { zoom: 0.70; }
      div.ownershipstages h2 { font-size: 21px; }
      div.ownershipstages div.core div ul li { font-size: 11px; }
      div.ownershipstages div.core div.q2 ul li { padding-bottom: 5px; }
      div.ownershipstages div.core div.q2 ul li.item1 { margin-top: 20px; }
      div.ownershipstages div.core div.growth h3 { font-size: 12px; }
      div.ownershipstages div.workingin span { font-size: 13px; }
      div.ownershipstages div.workingon span { font-size: 13px; }
      div.ownershipstages div.shortterm span { font-size: 13px; }
      div.ownershipstages div.longterm span { font-size: 13px; }
    }

    @media (max-width: 1100px){
      .unit3.slide14 #activity-questions .activity-body { zoom: 0.95;  }
    }

    @media (max-width: 1200px){
      .unit3.slide14 .filing-cabinet { height: 80%; }
      .unit3.slide14 h1.info { font-size: 14px; }
      p.activity-description { font-size: 14px; }
    }

    @media (max-width: 1024px){
      .unit3.slide14 .filing-cabinet { height: 80%; left: -15%; }
      .unit3.slide14 h1.info { font-size: 14px; }
      .unit3.slide14 h1.info.info-filing-cabinet { top: 20%; }
      p.activity-description { font-size: 14px; }
      .unit3.icon p { font-size: 18px; }

      #genogram-bar .svg-genogram { zoom: 0.85; margin-top: 0px !important;  }
      #genogram-bar #genogram-legend { min-width: 700px; }
      #genogram-bar #genogram-legend fieldset { padding-left: 0px; padding-right: 0px; }
      #genogram-bar #genogram-legend fieldset legend { font-size: 14px; }
      #genogram-bar #genogram-legend fieldset div.legend span.definition { font-size: 12px; }


    }

    @media (max-height: 1000px){
      div.ownershipstages { zoom: 0.90; margin-top: -30px; }
      p.ownershipstages.source { margin-top: -40px; }
      div.ownershipstages h2 { font-size: 27px; }
      div.ownershipstages div.core div ul li { font-size: 13px; }
      div.ownershipstages div.core div.growth h3 { font-size: 14px; }
      div.ownershipstages div.workingin span { font-size: 16px; }
      div.ownershipstages div.workingon span { font-size: 16px; }
      div.ownershipstages div.shortterm span { font-size: 16px; }
      div.ownershipstages div.longterm span { font-size: 16px; }
    }
    @media (max-height: 900px){
      div.ownershipstages { zoom: 0.80; margin-top: -30px;  }
      p.ownershipstages.source { margin-top: -40px; }
      div.ownershipstages h2 { font-size: 24px; }
      div.ownershipstages div.core div ul li { font-size: 12px; }
      div.ownershipstages div.core div.growth h3 { font-size: 14px; }
      div.ownershipstages div.workingin span { font-size: 14px; }
      div.ownershipstages div.workingon span { font-size: 14px; }
      div.ownershipstages div.shortterm span { font-size: 14px; }
      div.ownershipstages div.longterm span { font-size: 14px; }
    }

    @media (max-height: 800px){
      div.ownershipstages { zoom: 0.70; margin-top: -40px; }
      p.ownershipstages.source { margin-top: -40px; }
      div.ownershipstages h2 { font-size: 21px; }
      div.ownershipstages div.core div ul li { font-size: 11px; }
      div.ownershipstages div.core div.q2 ul li { padding-bottom: 5px; }
      div.ownershipstages div.core div.q2 ul li.item1 { margin-top: 20px; }
      div.ownershipstages div.core div.growth h3 { font-size: 12px; }
      div.ownershipstages div.workingin span { font-size: 13px; }
      div.ownershipstages div.workingon span { font-size: 13px; }
      div.ownershipstages div.shortterm span { font-size: 13px; }
      div.ownershipstages div.longterm span { font-size: 13px; }
    }

    @media (max-height: 700px){
      div.ownershipstages { zoom: 0.65; margin-top: -40px; }
      p.ownershipstages.source { margin-top: -70px; right: 10px; position: absolute; z-index: 200; }
      div.ownershipstages h2 { font-size: 18px; }
      div.ownershipstages div.core div ul li { font-size: 10px; }
      div.ownershipstages div.core div.growth h3 { font-size: 11px; }
      div.ownershipstages div.workingin span { font-size: 12px; }
      div.ownershipstages div.workingon span { font-size: 12px; }
      div.ownershipstages div.shortterm span { font-size: 12px; }
      div.ownershipstages div.longterm span { font-size: 12px; }

      body div.unit3.slide14 #activity-questions { bottom: 15%; }
      body div.unit3.slide14 #activity-questions p.activity-description { padding-top: 90px; }
    }


    @media (max-height: 650px){
      div.ownershipstages { zoom: 0.50; margin-top: -40px; }
      p.ownershipstages.source { margin-top: -40px; }
      div.ownershipstages h2 { font-size: 15px; }
      div.ownershipstages div.core div ul li { font-size: 11px; }
      div.ownershipstages div.core div.q2 ul li { padding-bottom: 5px; }
      div.ownershipstages div.core div.q2 ul li.item1 { margin-top: 20px; }
      div.ownershipstages div.core div.growth h3 { font-size: 12px; }
      div.ownershipstages div.workingin span { font-size: 12px; }
      div.ownershipstages div.workingon span { font-size: 12px; }
      div.ownershipstages div.shortterm span { font-size: 12px; }
      div.ownershipstages div.longterm span { font-size: 12px; }
    }

    @media (max-width: 768px){
      div.ownershipstages { zoom: 0.65; margin-top: -40px; }
      p.ownershipstages.source { margin-top: -20px; right: 10px; position: absolute; z-index: 200; }
      div.ownershipstages h2 { font-size: 18px; }
      div.ownershipstages div.core div ul li { font-size: 10px; }
      div.ownershipstages div.core div.growth h3 { font-size: 11px; }
      div.ownershipstages div.workingin span { font-size: 12px; }
      div.ownershipstages div.workingon span { font-size: 12px; }
      div.ownershipstages div.shortterm span { font-size: 12px; }
      div.ownershipstages div.longterm span { font-size: 12px; }

      body .unit3.slide14 #activity-questions .activity-body { zoom: 1 !important; }
      body div.unit3.slide14 #activity-questions { bottom: 0px !important; width: 90%; left: 81px !important; padding-bottom: 80px; }
      body div.unit3.slide14 #activity-questions p.activity-description { padding-top: 90px; }
      body .unit3.slide14 .filing-cabinet { left: -30%; }
      body .unit3.slide14 .filing-cabinet .activity-overlay { left: 0px; }
      body .unit3.slide14 .phone-bubble { left: 10% !important; }
      body .unit3.slide14 .phone-bubble .phone-bubble-text p { width: 350px; }
      body .unit3.slide14 .draganddrop-source-bg, body .unit3.slide14 .draganddrop-source, body .unit3.slide14 .draganddrop-dest { width: 50px; height: 60px; }
      body .unit3.slide14 .activity-source-wrapper { width: 130px; }
      body .unit3.slide14 .activity-source-wrapper p { font-size: 16px; }
      body .unit3.slide14 .newspaper-header { margin-left: -50px; }
    }





/********************/
/*** APPRECIATION ***/
/********************/
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; }
}