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

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

#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; }
#container, div.slide { height: 100%; background-color: transparent; }
body { margin-top: 0px; position: relative; background-image: url('../img/compass-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: bottom -200px; background-size: 100%; }
#container { margin-left: 81px; width: calc(100% - 81px); }

body.blender-class #container { margin-left: 0px; 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%;  margin-left: 81px; 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; }

body.blender-class div.tools { margin-left: 0px; width: 100%; }

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: 460px; position: absolute; left: 50%; margin-left: -220px; 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; }

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 #55b9e7; border-radius: 2px; }
ul.unit-progress li.viewed { background-color: #55b9e7;  }
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.png'); background-repeat: no-repeat; background-position: center center; }

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

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

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

/**************************/
/********   NAV  **********/
/**************************/
#menu { cursor: pointer; display: block; width: 81px; height: 100%; position: fixed; top: 0px; left: 0px; background-color: #2090c0; padding: 0px; border: none; z-index: 1001; background-image: url('../img/square_bg.png'); background-repeat: repeat; }
#menu #menuhandle { display: block; position: absolute; z-index: 901; width: 81px; height: 100%; cursor: pointer; }
#menu a.compass { display: block; width: 100%; height: auto; background-color: #5ab9e5; position: relative; }
#menu a.compass.notcurrent { background-color: #2090c0; }
#menu a.compass img { display: block; width: 100%; max-width: 120px; height: auto; }
#menu a.compass span.title { position: absolute; display: block; width: 1px; overflow: hidden; }

#menu ul, #menu ul li { margin: 0px; padding: 0px; clear: both; width: 100%; }
#menu ul li { position: relative; }

#menu ul li a:hover { border: none !important; background-color: transparent; }

#menu > ul > li > a > img { display: block; width: 100%; max-width: 120px; height: auto; }
#menu > ul > li > a > span.title { position: absolute; display: block; width: 1px; overflow: hidden; }

#menu ul li.unit1.current, #menu ul li.unit2.current, #menu ul li.unit3.current, #menu ul li.unit4.current, #menu ul li.unit5.current { background-color: #5ab9e5; }

#menu ul li ul.submenu { display: none; }

#menu div.utils { display: block; position: absolute; bottom: 20px; right: 30px; text-align: right; }
#menu div.utils a { color: #FFF; display: block; font-size: 14px; text-decoration: none; position: relative; }
#menu div.utils a span.label { font-size: 14px; }
#menu div.utils a span.icon { display: block; float: right; text-align: center; margin-left: 5px; height: 20px; width: 20px; background-position: center center; background-repeat: no-repeat; }
#menu div.utils a.help span.icon { background-color: #FFF; border-radius: 100px; color: #2090c0; }
#menu div.utils a.closed { margin-top: 40px; }
#menu div.utils a.closed span.icon { background-image: url('../img/menu-handle.jpg'); }
#menu div.utils a span.label { display: none; }

#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: #2090c0; color: #FFF; margin-right: 40px; }


/* OPEN MENU */
body.open #menu { width: 320px; }
body.open #menu #menuhandle { display: none; }
body.open #menu a.compass span.title { left: 140px; top: 20px; color: #FFF; font-weight: 300; width: 180px; font-size: 20px; }
body.open #menu > ul > li > a > span.title { left: 140px; top: 50px; color: #FFF; font-weight: 300; width: 160px; font-size: 18px; }
body.open #container { margin-left: 320px; }
body.open #menu div.utils { display: block; }
body.open #menu div.utils a.closed span.icon { background-image: url('../img/close.jpg'); }
body.open #menu div.utils a.closed { margin-top: 20px; }
body.open #menu div.utils a span.label { display: inline; }
body.open #menu div.utils { right: 20px; }

    /******* RESPONSIVE *******/
    @media (max-height: 750px) {

      #menu > ul > li > a > img { display: block; width: 100%; max-width: 60px; height: auto; }
      #menu > ul > li > a > span.title { position: absolute; display: block; width: 1px; overflow: hidden; }
      body.open #menu > ul > li > a > span.title { left: 80px; top: 20px; color: #FFF; font-weight: 300; width: 220px; font-size: 18px; }
    }


/*****************************/
/********   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: #2090c0; 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: #2090c0; }
.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.voiceover .content .container h2 { color: #2090c0; 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; }

/* 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: #7FC9FA; border: solid 1px #7FC9FA; border-width: 1px 0; border-color: #7FC9FA #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: #7FC9FA; border: solid 1px #7FC9FA; border-width: 1px 0; border-color: #7FC9FA #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; zoom: 0.5; -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: #55b9e7; 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 { 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.conclusion div.thank-you { margin-top: 50px; margin-bottom: 100px; background-color: rgba(255,255,255,0.8); padding: 30px; }
div.conclusion div.thank-you h2 { font-size: 18px;  }
div.conclusion div.thank-you p,
div.conclusion div.thank-you ul { font-size: 14px; }
div.conclusion div.thank-you ul { margin: 10px 0 20px 0; padding-left: 20px; }
div.conclusion 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.unit1.icon div.header div.container { background-image: url('../img/unit1-header.jpg'); }
div.slide.unit2.icon div.header div.container { background-image: url('../img/unit2-header.jpg'); }
div.slide.unit3.icon div.header div.container { background-image: url('../img/unit3-header.jpg'); }
div.slide.unit4.icon div.header div.container { background-image: url('../img/unit4-header.jpg'); }
div.slide.unit5.icon div.header div.container { background-image: url('../img/unit5-header.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: #55b9e7; 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; }

    /******* 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.content { height: calc(100% - 320px); }
      #container div.content div.container { width: 100%; }
    }

    @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: #428bca; }
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%; }

div.slide.toc.unit4 div.content div.container div.tiles.advanced { height: 130px; }
div.slide.toc.unit4 div.content div.container div.tiles.advanced div.item { height: 120px; }

div.slide.toc.unit5 div.content div.container div.tiles.basic { height: 130px; }
div.slide.toc.unit5 div.content div.container div.tiles.basic div.item { height: 120px; }

    /******* 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 - 3 CIRCLE MODEL TABS */
#genogram-editor .tab-genogram { background-image: url('../img/tab-genogram.png'); background-repeat: no-repeat; background-position: 10px center; padding-left: 80px !important; }
#genogram-editor .tab-3-circle { background-image: url('../img/tab-3-circle.png'); background-repeat: no-repeat; background-position: 10px center; padding-left: 80px !important; }

#genogram-editor ul.nav-tabs li.active a { background-color: #ecf0f1; border-bottom: none; }
#genogram-editor ul.nav-tabs { border-bottom: none; }
#genogram-editor .panel-genogram { border-top: none; border-radius: 0px; }
#genogram-editor ul.nav-tabs li.title { padding: 10px 20px;  }


/* GENOGRAM 5 YEARS */
.genogram-5-years.overlay { background-color:rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; z-index: 990; }
.overlay.genogram-5-years .questions { position: absolute; width: 580px; padding: 40px; background-color: #FFF; margin-left: -290px; left: 50%; height: 325px; top: 25%; z-index: 999; font-size: 22px; }
.overlay.genogram-5-years .questions .question { width: 500px; height: 180px; display: none; text-align: center; white-space: normal; }
.overlay.genogram-5-years .questions .cycle-carousel-wrap { white-space: normal !important; left: 0px; }
.overlay.genogram-5-years .questions #pager { position: absolute; bottom: 20px; width: 400px; margin-left: 40px; }
.overlay.genogram-5-years .questions #pager span.cycle-pager-active { background-color: #AAA; }
.overlay.genogram-5-years .questions #next { position: absolute; right: 250px; }
.overlay.genogram-5-years .questions #prev { display: none !important; }

/* GENOGRAM 10 YEARS */
.genogram-10-years.overlay { background-color:rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; z-index: 990; }
.overlay.genogram-10-years .questions { position: absolute; width: 440px; padding: 40px; background-color: #FFF; margin-left: -200px; left: 50%; height: 325px; top: 25%; z-index: 999; font-size: 22px; }
.overlay.genogram-10-years .questions .question { width: 360px; height: 180px; display: none; text-align: center; white-space: normal; }
.overlay.genogram-10-years .questions .cycle-carousel-wrap { white-space: normal !important; left: 0px; }
.overlay.genogram-10-years .questions #pager { position: absolute; bottom: 20px; width: 400px; margin-left: 40px; }
.overlay.genogram-10-years .questions #pager span.cycle-pager-active { background-color: #AAA; }
.overlay.genogram-10-years .questions #next { position: absolute; right: 180px; }
.overlay.genogram-10-years .questions #prev { display: none !important; }

#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: 0.5% 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: -15px; 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: 100px; right: 355px; box-shadow: 3px 3px 5px #555; }
.schema.timeline ol{ height: 100%; }
.timeline-transform-point-individual { transform: rotate(25deg); bottom: -545px; right: -250px; }
.schema.timeline-individual { width: 830px; height: 55px; position: absolute; right: -150px; bottom: -5px; }
.schema.timeline-individual .timeline-age{ margin-left: 30%; transform: rotate(-25deg); }
.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: 200px; bottom: 100px; }
.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.6em; color: #FFF; display: none; }
.animation-container { position: relative; visibility: hidden; }
.animation-container .sprite { position: absolute; height: 1px; /* Nécéssaire pour relative-top et relative-bottom */ 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; }
.animation.case .header { height:auto; }
.animation.case .content { overflow: hidden; background-size: auto 100%; height: 80%; }
.animation.case .content .container { padding-left: 0; margin-left: 0; width: 100%; height: 100%; position: relative; }
div.audio { display: none; }
#container div.animation.case div.audio { position: absolute; top: 33%; left: 63%; width: 17%; height: 17%; z-index: 9999; }
#container div.animation.case div.audio.current { position: relative; top: 0; left: 0; margin-left: 0; width: 250px; height: 15%; clear: both; }
/*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; }


/*****************************/
/********   VIDEOS  **********/
/*****************************/
#videos { height: 100%; width: 100% !important; position: relative; }
body .unit1 #videos { zoom:1; }
#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; }
#videos div.video iframe { min-height: 400px; }

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


/*****************************/
/********   INTRO  ***********/
/*****************************/
div.content.intro.slide3 { height: 100%; }

#container div.slide.myth { height: 100% !important; }
#container div.slide.myth div.content div.container { padding-bottom: 0px; padding-top: 0px; height: 90%; }
#myths { height: 100%; width: 100% !important; }
#myths div.cycle-carousel-wrap, #myths div.item { width: 100%; }
#myths div.item, #myths div.item div.myth, #myths div.item div.reality, #myths div.cycle-carousel-wrap { height: 100%; }
#myths div.item div.myth { width: 40%; position: relative; float: left; }
#myths div.item div.reality { width: 60%; position: relative; float: left; }
#myths div.item div.myth h2, #myths div.item div.reality h2 { color: #FFF; font-size: 62px; margin-left: 10%; margin-top: 1em; font-weight: 300; }
#myths div.item div.myth p, #myths div.item div.reality p { color: #FFF; font-size: 42px; margin-left: 10%; padding-top: 60px; font-weight: 300; white-space: normal !important; width: 80%; }

#myths div#item1 div.myth { background-color: #227fbb; }
#myths div#item1 div.reality { background-color: #56b9e8; }

#myths div#item2 div.myth { background-color: #82409c; }
#myths div#item2 div.reality { background-color: #9c55b8; }

#myths div#item3 div.myth { background-color: #e9a800; }
#myths div#item3 div.reality { background-color: #f2c500; }

#myths div#item4 div.myth { background-color: #67a02e; }
#myths div#item4 div.reality { background-color: #7bbf38; }

#myths div#item5 div.myth { background-color: #f07700; }
#myths div#item5 div.reality { background-color: #ff9a1f; }

#myths div.item div.image { display: none; z-index: 0; text-align: left; }
#myths div.item div.myth div.image { text-align: right; }
#myths div.item.cycle-slide-active div.myth div.image { display: block; position: absolute; bottom: 60px; right: 0px; }
#myths div.item.cycle-slide-active div.reality div.image { display: block; position: absolute; bottom: 60px; left: 40px; }

    /******* RESPONSIVE *******/
    @media (min-height: 1000px) {
      #myths div.item div.myth p, #myths div.item div.reality p { font-size: 52px; font-weight: 300; }
    }

    @media (max-height: 750px) {
      #myths div.item div.image img { height: 230px; width: auto; }
      #myths div.item div.myth p, #myths div.item div.reality p { font-size: 32px; }
    }
    @media (max-height: 600px) {
      #myths div.item div.image img { height: 150px; width: auto; }
      #myths div.item.cycle-slide-active div.myth div.image { bottom: 20px; }
      #myths div.item.cycle-slide-active div.reality div.image { bottom: 20px; }
      #myths div.item div.myth p, #myths div.item div.reality p { padding-top: 40px; }
    }
    @media (max-height: 500px) { #myths div.item div.image { display: none !important; } }

    @media (max-width: 1024px) {
      body #myths div.item div.myth p, #myths div.item div.reality p { font-size: 32px; padding-top: 15px; }
      body #myths div.item div.image { bottom: 30px !important; }
      body #myths div.item div.image img { height: 230px; width: auto; }
    }

    @media (max-width: 768px){
      body div.slide div.content.intro.slide3 { zoom: 0.9; }
      body div.slide div.content.intro.slide3 a { font-size: 18px; }
      body div.slide div.content.intro.slide3 ul.list-units li { height: 300px; }
      body div.slide div.content.intro.slide3 ul.list-units li div.length { font-size: 16px; }
      body div.slide div.content.intro.slide3 ul.list-units li div.length span.sprite { margin-left: 20px; }
    }

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


/* THREE-CIRCLE */
div.three-circle { width: 50%; height: 50%; position: relative; margin-left: auto; margin-right: auto; }
div.three-circle div.circle { width: 33%; height: 69%; border-radius: 50%; opacity: 0.5; }
div.three-circle div.circle.family { background-color: red; position: absolute; top: 50px; left: 0px; }
div.three-circle div.circle.business { background-color: blue; position: absolute; top: 50px; left: 22%; }
div.three-circle div.circle.ownership { background-color: yellow; position: absolute; top: 40%; left: 12%; }
div.three-circle h2 { position: absolute; margin: 0px !important; padding: 0px !important; width: 33%; text-align: left; font-size: 2vw; }
div.three-circle h2.family { top: 25%; left: 5%; color: red !important; }
div.three-circle h2.business { top: 25%; left:35%; color: blue !important; }
div.three-circle h2.ownership { bottom: 12%; left: 12%; text-align: center; color: gold !important; }

/* TAKEAWAYS */
div.slide.unit1.takeaways div.header div.container { background-image: url('../img/unit1-header.jpg'); }
div.slide.unit2.takeaways div.header div.container { background-image: url('../img/unit2-header.jpg'); }
div.slide.unit3.takeaways div.header div.container { background-image: url('../img/unit3-header.jpg'); }
div.slide.unit4.takeaways div.header div.container { background-image: url('../img/unit4-header.jpg'); }
div.slide.unit5.takeaways div.header div.container { background-image: url('../img/unit5-header.jpg'); }

div.slide.unit1.quiz div.header div.container { background-image: url('../img/unit1-header.jpg'); }
div.slide.unit2.quiz div.header div.container { background-image: url('../img/unit2-header.jpg'); }
div.slide.unit3.quiz div.header div.container { background-image: url('../img/unit3-header.jpg'); }
div.slide.unit4.quiz div.header div.container { background-image: url('../img/unit4-header.jpg'); }
div.slide.unit5.quiz div.header div.container { background-image: url('../img/unit5-header.jpg'); }

div.slide.conclusion.takeaways div.header div.container { background-image: url('../img/logo-header.jpg'); }
div.slide.conclusion.appreciation div.header div.container { background-image: url('../img/logo-header.jpg'); }

div.slide.takeaways div.header { background-color: #55b9e7; 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: #55b9e7; 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; }

#quiz .question ul li a.question { font-size: 20px; }

div.slide.appreciation div.header { background-color: #55b9e7; 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; }


/*****************************/
/********   UNIT1  ***********/
/*****************************/
div.slide.unit1 div.content { background-color: transparent; }

div.slide.unit1.case-story-1 div.content { background-image: url('../img/unit1-case1-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
div.slide.unit1.case-story-3 div.content { background-image: url('../img/unit1-case2-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
div.slide.unit1.case-story-5 div.content { background-image: url('../img/unit1-case3-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }

div.slide.unit1.case-story-4 div.content div.container { width: 100%; }
div.slide.unit1.case-story-4 div.content div.container div.context { max-width: 960px; margin-left: auto; margin-right: auto; }
div.slide.unit1.case-story-2 div.content div.container { width: 100%; }
div.slide.unit1.case-story-2 div.content div.container div.context { max-width: 960px; margin-left: auto; margin-right: auto; }

div.overemphasis div.three-circle { height: 400px; }
div.overemphasis div.three-circle div.circle { width: 250px; height: 250px; opacity: 0.8; }
div.overemphasis div.three-circle div.circle.family { background-color: #fdaca7; }
div.overemphasis div.three-circle div.circle.business { background-color: #96dcfb; left: 190px; }
div.overemphasis div.three-circle h2 { text-align: center; width: 250px; font-size: 32px; }
div.overemphasis div.three-circle h2.family { color: #fd2e00 !important; left: -20px; top: 150px; }
div.overemphasis div.three-circle h2.business { color: #0070c5 !important; left: 190px; top: 150px; }

div#consequences div.consequence { position: relative; float: left; width: 20%; }
div#consequences div.consequence h3 { text-align: center; font-size: 20px; color: #828282; }
div#consequences div.consequence div.icon { width: 100px; height: 98px; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-image: url('../img/sprite.png'); background-position: 0px -201px; position: relative; }
div#consequences div.consequence div.icon span { position: absolute; top: 10px; right: 10px; display: block; width: 0px; height: 0px; background-repeat: no-repeat; background-image: url('../img/sprite.png'); background-position: -762px -156px; overflow: hidden; }
div#consequences div#communications div.icon { background-position: -20px -198px; }
div#consequences div#relations div.icon { background-position: -360px -201px; }
div#consequences div#performance div.icon { background-position: -190px -201px; }
div#consequences div#decision div.icon { background-position: -530px -202px; }
div#consequences div#strategic div.icon { background-position: -690px -201px; }

div#consequences div#loyalty div.icon { background-position: -360px -291px; }
div#consequences div#identification div.icon { background-position: -190px -291px; }
div#consequences div#emotions div.icon { background-position: -530px -291px; }
div#consequences div#family-time div.icon { background-position: -690px -291px; }

div.source { text-align: right; font-size: 14px; color: #888; clear: both; padding-top: 30px; }

.unit1.voiceover-1 p.source { margin-top: -200px; }

#circles-model { margin: 0 auto; width: 640px; height: 640px; }
#circles-model svg { background-color: transparent; }

#genogram-default { margin: 0 auto; width: 1050px; height: 560px; }
#genogram-default-5-years-later { margin: 0 auto; width: 1135px; height: 560px; overflow: hidden; }
#genogram-default-10-years-later { margin: 0 auto; width: 1475px; height: 720px; overflow: hidden; }

#genogram-default svg,
#genogram-default-5-years-later svg,
#genogram-default-10-years-later svg { background-color: transparent; }

.understand-genogram button,
.submit button { margin: 10px auto 30px auto; display: block; }

#genogram-editor { padding-bottom: 100px; }
#genogram-editor .panel-genogram { background-color: #ecf0f1;  }
#genogram-editor .tab-pane .svg-container { margin: 0 auto; width: 720px; height: 720px; }
#genogram-editor .tab-pane #genogram { margin-top: 10px; width: 100%; overflow: scroll; }
#genogram-tab { position: relative; }
#person-controller, #relation-controller { font-size: 14px; position: absolute; background-color: #ecf0f1; padding: 20px; }
#genogram-tab .edit-box { border: 2px solid #ddd; border-radius: 20px; padding: 10px; margin: 0px; }
#person-controller .close { font-size: 45px; }
#genogram-editor #circles { position: relative; }
#genogram-editor #circles .zone { position: absolute; overflow-x: hidden; overflow-y: auto; }
#genogram-editor #circles .zone-1 { top: 255px; left: 263px; width: 154px; height: 110px; }
#genogram-editor #circles .zone-2 { top: 135px; left: 263px; width: 154px; height: 110px; }
#genogram-editor #circles .zone-3 { top: 345px; left: 155px; width: 115px; height: 95px; }
#genogram-editor #circles .zone-4 { top: 115px; left: 80px; width: 160px; height: 160px; }
#genogram-editor #circles .zone-5 { top: 345px; left: 405px; width: 115px; height: 95px; }
#genogram-editor #circles .zone-6 { top: 115px; left: 440px; width: 160px; height: 160px; }
#genogram-editor #circles .zone-7 { top: 455px; left: 195px; width: 290px; height: 130px; }
#genogram-editor #circles .zone .person { width: 40px; margin-right: 5px; display: inline-block; }
#genogram-editor #circles .zone .sex { height: 40px; }
#genogram-editor #circles .zone img.sex { margin: 0 auto; display: block; }
#genogram-editor #circles .zone .male { border: 3px solid #1e8fc4; background-color: #fff; width: 40px; height: 40px; }
#genogram-editor #circles .zone .female { border: 3px solid #eb64f3; height: 40px; border-radius: 50%; background-color: #fff; width: 40px; }
#genogram-editor #circles .zone .firstname { font-size: 10px; text-align: center; font-weight: bold; }

#seven-territories { margin: 0 auto; width: 640px; height: 640px; }
#seven-territories svg { background-color: transparent; }

#genogram-editor .business-partner { display: none; }

#dynamic-model { margin: 0 auto; width: 690px; height: 720px; }
#dynamic-model svg { background-color: transparent; }

    /******* RESPONSIVE *******/
    @media (max-height: 750px){
      .unit1.voiceover-1 #circles-model { zoom: 0.9; }
      body #seven-territories { zoom: 0.85; margin-top: -30px; }
      body #seven-territories text { font-size: 65px; }
      body div.overemphasis { zoom: 0.75; }
      body #dynamic-model { zoom: 0.80; margin-top: -30px; }
    }

    @media (max-width: 1200px) {
        #genogram-default,
        #genogram-default-5-years-later { overflow-x: scroll; overflow-y: hidden;  width: 90%; margin-bottom: 65px; }
    }
    @media (max-width: 1575px) {
        #genogram-default-10-years-later { overflow-x: scroll; overflow-y: hidden;  width: 90%; margin-bottom: 65px; }
    }

    @media (max-width: 1024px) {
      #genogram-default #genogram-legend { min-width: 700px; }
      #genogram-default #genogram-legend fieldset { padding-left: 0px; padding-right: 0px; }
      #genogram-default #genogram-legend fieldset legend { font-size: 14px; }
      #genogram-default #genogram-legend fieldset div.legend span.definition { font-size: 12px; }

      #genogram-default-5-years-later #genogram-legend { min-width: 700px; }
      #genogram-default-5-years-later #genogram-legend fieldset { padding-left: 0px; padding-right: 0px; }
      #genogram-default-5-years-later #genogram-legend fieldset legend { font-size: 14px; }
      #genogram-default-5-years-later #genogram-legend fieldset div.legend span.definition { font-size: 12px; }

      #genogram-default-10-years-later #genogram-legend { min-width: 700px; }
      #genogram-default-10-years-later #genogram-legend fieldset { padding-left: 0px; padding-right: 0px; }
      #genogram-default-10-years-later #genogram-legend fieldset legend { font-size: 14px; }
      #genogram-default-10-years-later #genogram-legend fieldset div.legend span.definition { font-size: 12px; }
      .slide.unit1.voiceover-3 p.source { margin-top: -20px; }
    }

    @media (max-width: 768px) {
      body div.slide.unit1.voiceover-1 p.source { margin-top: -100px; }
      body div.slide.unit1 div.context { padding-bottom: 60px; }
      body div#consequences div.consequence h3 { font-size: 17px; }

    }

/*****************************/
/********   UNIT2  ***********/
/*****************************/
div.slide.unit2 div.content { background-color: transparent; }

#container .unit2.activity.interactive-activity-1 { width: 100%; }
#container .unit2.activity.interactive-activity-1 .content .container { padding-top: 0px; width: 100%; }

.unit2.activity.life-cycle #activity-instructions { width: 900px; margin-left: auto; margin-right: auto; margin-top: 140px; }
.unit2.activity.life-cycle #activity-session #timeline h2 { position: absolute; padding-top: 12px; font-size: 24px; text-align: center; color: #444; background-color: #c6c6c6; height: 85px; width: 100%; top: 0px; margin-top: 0px; }
.unit2.activity.life-cycle #activity-session #timeline { position: relative; height: 200px; border-bottom: solid 8px #ed7d31; }
.unit2.activity.life-cycle #activity-session #timeline div.icons { position: absolute; background-image: url('../img/life-cycle-activity-sprite.png'); background-position: center center; background-repeat: no-repeat; width: 100%; height: 88px; top: 40px; }
.unit2.activity.life-cycle #activity-session #timeline span.arrow { position: absolute; display: block; width: 23px; height: 25px; background-image: url('../img/life-cycle-arrow.png'); background-repeat: no-repeat; bottom: -16px; right: -10px; }
.unit2.activity.life-cycle #activity-session #timeline ul.titles { position: absolute; top: 125px; padding: 0px; list-style-type: none; width: 960px; margin: 0px; left: 50%; margin-left: -500px; }
.unit2.activity.life-cycle #activity-session #timeline ul.titles li { padding: 0px; margin: 0px; list-style-type: none; display: block; float: left; color: #444; text-align: center; width: 110px; font-size: 20px; }

.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t17-28,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t22-33,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t28-40,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t33-45,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t40-50,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t45-55,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t50-60,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t55-65,
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t60-80 { display: none; }

.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t17-22 { width: 80px; text-align: left; }
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t22-28 { width: 80px; text-align: left; }
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t28-33 { width: 100px;  }
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t33-40 { text-align: left; width: 90px; }
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t60-65 { width: 100px; }
.unit2.activity.life-cycle #activity-session #timeline ul.titles li#t65-80 { text-align: right; width: 70px; }

.unit2.activity.life-cycle #activity-session #timeline ul.answers { position: absolute; top: 150px; padding: 0px; list-style-type: none; width: 960px; margin: 0px; left: 50%; margin-left: -500px; }
.unit2.activity.life-cycle #activity-session #timeline ul.answers li { position: relative; padding: 0px; margin: 0px; list-style-type: none; display: block; float: left; color: #444; text-align: center; width: 48px !important; height: 130px; }
.unit2.activity.life-cycle #activity-session #timeline ul.answers li a { text-decoration: none; }
.unit2.activity.life-cycle #activity-session #timeline ul.answers li div a { font-size: 12px; display: block; margin: 0px; padding: 0px; }
.unit2.activity.life-cycle #activity-session #timeline ul.answers li a.disabled { display: none; }
.unit2.activity.life-cycle #activity-session #timeline ul.answers li .cycle-carousel-wrap { width: 48px !important; }


.unit2.activity.life-cycle #activity-session #pager div span { background-color: #DDD; }
.unit2.activity.life-cycle #activity-session #pager div span.cycle-pager-active { background-color: transparent; color: #444; }

.unit2.activity.life-cycle #activity-session #persons { width: 100% !important; min-width: 960px; margin-top: 50px; }
.unit2.activity.life-cycle #activity-session #persons .cycle-carousel-wrap { width: 100%; }
.unit2.activity.life-cycle #activity-session #persons .person { width: 100%; height: 100%; }
.unit2.activity.life-cycle #activity-session #persons .person .form { width: 50%; min-width: 820px; margin-left: auto; margin-right: auto; }
.unit2.activity.life-cycle #activity-session #persons .person .form div.questions { float: left; width: 80%; height: 220px; background-color: #EEE; padding: 20px; }
.unit2.activity.life-cycle #activity-session #persons .person .form div.questions ul { list-style-type: none; padding: 0px; margin: 0px; }
.unit2.activity.life-cycle #activity-session #persons .person .form div.questions ul li { list-style-type: none; padding: 0px; margin: 0px; width: 45%; float: left; }
.unit2.activity.life-cycle #activity-session #persons .person .form div.questions ul li label { font-size: 15px; font-weight: normal; }
.unit2.activity.life-cycle #activity-session #persons .person .form div.questions ul li input.checkbox { float: left; margin-right: 20px; margin-top: 15px; }
.unit2.activity.life-cycle #activity-session #persons .person .form div.image { width: 100px; height: 220px; float: left; background-image: url('../img/bubulles.png'); background-repeat: no-repeat; background-position: right top; text-align: right; }
.unit2.activity.life-cycle #activity-session #persons .person .form div.image img { width: 100%; max-width: 80px; margin-top: 100px; margin-right: 40px; }
.unit2.activity.life-cycle #show-activity-resume { z-index: 800; }

#personal-life-cycles,
#personal-life-axis { margin: 0 auto; width: 710px; height: 690px; }
#personal-life-cycles svg { background-color: transparent; }

#family-business-life-cycles { margin: 0 auto; width: 710px; height: 690px; }
#family-business-life-cycles svg { background-color: transparent; }

svg.circles .axis line { stroke-width: 3px; }
svg.circles .axis .label { font-size: 14px; stroke-width: 0; }
svg.circles .axis text { stroke: #333; fill: #333; }
svg.circles .axis .family-axis line,
svg.circles .axis .individual-axis line { stroke: #c30000; }
svg.circles .axis .business-axis line,
svg.circles .axis .industry-axis line { stroke: blue; }
svg.circles .axis .ownership-axis line { stroke: #c09100; }
svg.circles .axis .axis-element { font-size: 12px; stroke-width: 0; }
svg.circles .axis .individual-axis .axis-element { text-anchor: end; }
svg.circles .axis .family-axis .axis-element { text-anchor: middle; }
svg.circles .axis .business-axis .axis-element { text-anchor: end; }

svg.circles marker .marker { fill-opacity: 1; }
svg.circles marker .start-marker { fill: white; }

.unit2 #priority-board { min-height: 350px; position: relative; }
.unit2 .board { position: absolute; top: 0px; min-height: 350px; width: 30%; padding: 0px; margin: 0px; background-color: rgba(255,255,255,0.8); }
.unit2 .board .answer { min-height: 350px; width: 100%; position: absolute; z-index: 100; }
.unit2 .board .answer:hover { z-index: 90; }
.unit2 .board .answer .post-it { margin: 0 auto; }
.unit2 .board h2 { padding: 4px; text-align: center; }
.unit2 .board-robert { left: 0px; }
.unit2 .board-jane { left: 33%; }
.unit2 .board-eric { left: 66%; }

.unit2 .post-its { position: relative; }
.unit2 .post-its ul li { display: inline-block; }
.unit2 .post-it { height: 164px; width: 205px; background-image: url('../img/post-it.png'); padding: 18px; display: inline-block; cursor: pointer; }
.unit2 .post-it p { font-style: italic; font-size: 12px; padding: 10px 5px 5px 12px; }
.unit2 .post-it.right p:before { content: " "; background-image: url('../img/good.png'); background-repeat: no-repeat; display: block; font-size: 24px; color: green; position: absolute; top: 0px; left: 5px; font-weight: 700; text-shadow: 2px 2px 10px #888; padding: 12px; }
.unit2 .post-it.wrong p:before { content: "x"; font-size: 24px; color: red; position: absolute; top: 0px; left: 5px; font-weight: 700; text-shadow: 2px 2px 10px #888; }
.unit2 .post-its .post-it { display: block; float: left; }

.timelines { height: 450px; overflow: hidden; }
.button-timeline { background-image: url('../img/c36-scroll.png'); background-repeat: no-repeat; background-position: center; }
.button-timeline .next-timeline,
.button-timeline .prev-timeline { font-size: 50px; color: grey; cursor: pointer; font-weight: 700; border: solid 1px #FFF; background-color: rgba(255,255,255,0.8); border-radius: 400px; display: block; width: 70px; height: 70px; text-align: center; box-shadow: 2px 2px 10px #AAA; }
.button-timeline .next-timeline { float: right; }
.button-timeline .prev-timeline { float: left;}


.timelines .timeline { margin-bottom: 30px; position: relative; width: 4020px;}

.timelines .timeline .milestone { position: absolute; margin-top: -20px; z-index: 888; }
.timelines .timeline .milestone:hover { z-index: 900; }
.timelines .timeline .milestone .circle { width: 60px; height: 60px; border-radius: 50%; box-shadow: 2px 2px 3px #888; }

.timelines .timeline .milestone span { color: #000; font-size: 12px; }
.timelines .timeline .milestone span.age-milestone { color: #fff; font-weight: bold; margin: -35px 0 0 25px; display: block; }
.timelines .timeline .milestone span.label-milestone { display: block; color: #FFF; text-align: center; padding: 2px 5px; background-color: rgba(0,0,0,0.6); margin-left: 45px; margin-top: -90px; -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -ms-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); writing-mode: lr-tb; }

.timelines .timeline ul { padding: 0; }
.timelines .timeline li { display: inline-block; list-style-type: none; }
.timelines .timeline li.year-point { font-size: 30px; color: grey; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); writing-mode: lr-tb; }
.timelines .timeline li.img { height: 70px; }
#history-timeline ul { height: 100px; }


div.slide.unit2.interactive-activity-3 form.form-horizontal div.form-field { padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; }
div.slide.unit2.interactive-activity-3 form.form-horizontal input { padding: 0px; text-align: center; }
div.slide.unit2.interactive-activity-3 form.form-horizontal input.age-input { width: 35px; margin-left: -8px; }
div.slide.unit2.interactive-activity-3 form.form-horizontal .col-md-2 input.age-input { margin-left: 0px; }
div.slide.unit2.interactive-activity-3 form.form-horizontal label { padding-left: 10px; padding-right: 5px; font-weight: normal; }
div.slide.unit2.interactive-activity-3 form.form-horizontal div.row { margin-bottom: 5px; margin-top: 5px; }

#comparing-life { height: 335px; }
#comparing-life .timeline ul { width: 1020px; font-size: 0.0001px; }
#comparing-life #timeline-ages li { background-color: #7f7f7f; width: 60px; height: 28px; font-size: 18px; color: #fff; font-weight: bold; }
#comparing-life #timeline-ages li.legend { padding-left: 5px; }

.legend  h3 { text-align: center; }
#comparing-life .timeline {left: 0;}
#comparing-life #timeline-1965,
#comparing-life #timeline-ages,
#comparing-life #timeline-1965 ul,
#comparing-life #timeline-ages ul { margin-bottom: 0; }
#comparing-life #timeline-1965 .start,
#comparing-life #timeline-2015 .start,
#comparing-life #timeline-1965 .end,
#comparing-life #timeline-2015 .end { background-color: #f2f2f2;}
#comparing-life #timeline-1965 .young-adult,
#comparing-life #timeline-2015 .young-adult,
.legend .young-adult .circle { background-color: #9dc3e6; }
.legend .young-adult h3 { color: #9dc3e6; }
#comparing-life #timeline-1965 .family-building,
#comparing-life #timeline-2015 .family-building,
.legend .family-building .circle { background-color: #ffd966; }
.legend .family-building h3 { color: #ffd966; }
#comparing-life #timeline-1965 .middle-age,
#comparing-life #timeline-2015 .middle-age,
.legend .middle-age .circle { background-color: #a9d18e; }
.legend .middle-age h3 { color: #a9d18e; }
#comparing-life #timeline-1965 .golden-age,
#comparing-life #timeline-2015 .golden-age,
.legend .golden-age .circle { background-color: #f4b183; }
.legend .golden-age h3 { color: #f4b183; }
#comparing-life #timeline-1965 ul,
#comparing-life #timeline-2015 ul,
#comparing-life #timeline-1965 li,
#comparing-life #timeline-2015 li { height: 80px; }
#comparing-life #timeline-1965 li.start { width: 130px; }
#comparing-life #timeline-2015 li.start { width: 100px; }
#comparing-life #timeline-1965 li.young-adult { width: 70px; }
#comparing-life #timeline-2015 li.young-adult { width: 200px; }
#comparing-life #timeline-1965 li.family-building { width: 290px; }
#comparing-life #timeline-2015 li.family-building { width: 300px; }
#comparing-life #timeline-1965 li.middle-age { width: 180px; }
#comparing-life #timeline-2015 li.middle-age { width: 210px; }
#comparing-life #timeline-1965 li.golden-age { width: 140px; }
#comparing-life #timeline-2015 li.golden-age { width: 170px; }
#comparing-life #timeline-1965 li.end { width: 40px; }
#comparing-life #timeline-2015 li.end { width: 40px; }

#comparing-life #timeline-1965,
#comparing-life #timeline-2015 { position: relative; }
#comparing-life .transition { position: absolute; border-left: 5px #fff dotted; color: #fff; height: 45px; }
#comparing-life .transition p { font-size: 16px; text-shadow: 1px 1px 1px #888; }
#comparing-life #timeline-1965 .transition p { margin-top: -25px; }
#comparing-life #timeline-2015 .transition p { margin-top: 48px; }
#comparing-life #timeline-1965 .transition { top: 35px; }
#comparing-life #timeline-2015 .transition { top: 0; }
#comparing-life #timeline-1965 .midlife-transition { left: 430px; }
#comparing-life #timeline-2015 .midlife-transition { left: 550px; }
#comparing-life #timeline-1965 .late-adult-transition { left: 610px; }
#comparing-life #timeline-2015 .late-adult-transition { left: 730px; }

.legend .circle { margin: 0 auto; box-shadow: 1px 1px 10px #888; border-radius: 50%; width: 120px; height: 120px; background-image: url('../img/life-cycle-activity-sprite.png'); background-repeat: no-repeat; }
.legend .young-adult .circle { background-position: 32px 14px; }
.legend .family-building .circle { background-position: -252px 14px; }
.legend .middle-age .circle { background-position: -398px 14px; }
.legend .golden-age .circle { background-position: -830px 14px; }

.unit2.voiceover-4 .legend .circle { zoom: 0.8; }
.unit2.voiceover-4 .legend h3 { margin-top: 10px; text-shadow: 1px 1px 5px #000; }

.timelines .timeline .timeline-bar ul { font-size: 0.001px; }
.timelines .timeline .timeline-bar li { height: 25px; width: 20px; padding: 0; margin: 0; border: none; }
.timelines .timeline .timeline-bar .age { padding: 0 0 0 5px; font-size: 12px; text-transform: uppercase; font-weight: bold; }
.timelines .timeline h3 { font-size: 28px; }
.timelines .timeline-grandfather { color: #f39c12; }
.timelines .timeline-grandfather .circle,
.timelines .timeline-grandfather .timeline-bar li { background-color: #f39c12; }
.timelines .timeline-father { color: #2ecc71; }
.timelines .timeline-father .circle,
.timelines .timeline-father .timeline-bar li { background-color: #2ecc71; }
.timelines .timeline-you { color: #2090c0; }
.timelines .timeline-you .circle,
.timelines .timeline-you .timeline-bar li { background-color: #2090c0; }
.timelines .timeline .timeline-bar li.out-generation { background-color: transparent; }

.timeline-form .control-label { color: #fff; font-size: 13px; text-align: left; }
.timeline-form form { padding: 10px; }

.timeline-form.grandfather-form form { background-color: #f39c12; }
.timeline-form.grandfather-form h3 { color: #f39c12; }
.timeline-form.father-form form { background-color: #2ecc71; }
.timeline-form.father-form h3 { color: #2ecc71; }
.timeline-form.you-form form { background-color: #2090c0; }
.timeline-form.you-form h3 { color: #2090c0; }

div.slide.unit2.interactive-activity-3 #activity-session { padding-top: 0px; }
div.slide.unit2.interactive-activity-3 div.timelines { height: 260px; }
div.slide.unit2.interactive-activity-3 div.timelines .timeline { margin-bottom: 0px; }
div.slide.unit2.interactive-activity-3 div.timelines .timeline .timeline-bar ul li { height: 10px; }
div.slide.unit2.interactive-activity-3 div.timelines .timeline h3 { font-size: 20px; padding: 0px; margin-top: 0px; }

.animation.case.unit2, .animation.case.unit2 .content { background: #fff26b; }
.animation.unit2 .animation-container { height: 85%; width: 113.333%; /* Pour connaitre ratio. Width en px calculé en JS */ background: url('../img/unit2-fond.jpg')  no-repeat; background-size: 100%; }
.animation.unit2 .content .advisor { width: 35%; left: -100%; bottom: 0%; }
.unit2 .sprite.absolute-center { left: 64%; top: 20%; }
.case .father, .case .mother, .case.son, .case .son2, .case .son3 { top:  20%; width: 35%; }
.unit2.slide3 .son { width: 30%; top: 29%; }
.unit2.slide3 .sonWife { width: 25%; top: 24%; }
.unit2.slide3 .son2 { width: 23%; left: 84%; }
.unit2.slide3 .son3 { width: 25%; left: 45%; }
.unit2.slide3 .window1{ width: 20%; top : 15%; left : 50%; }
.unit2.slide3 .window2{ width: 20%; top : 15%; left : 80%; }
.unit2.slide3 .persoTable { width: 60%; top: 37%; }
.unit2.slide3 .bubble01 { left : 55%; }
.unit2.slide3 .bubble02 { left : 85%; }
.unit2.slide3 .bubble03 { left : 64%; top : 25%; }
#personal-life-cycles { position: relative; }




div.slide.unit2.voiceover-2.slide5 div.content { width: 100%; height: 100%; }
div.slide.unit2.voiceover-2.slide5 div.content div.container { width: 100%; height: 100%; }
div.slide.unit2.voiceover-2.slide5 div.content div.container div.row { width: 100%; height: 100%; }
div.slide.unit2.voiceover-2.slide5 div.content div.container div.row div.col-md-12 { width: 90%; height: 80%; }
div.slide.unit2.voiceover-2.slide5 #personal-life-axis { width: 100%; height: 100%; padding-bottom: 100px; }
div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis { width: 100%;}

div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual { right: 145px; bottom: 380px; height: 100%; width: 100%; transform: rotate(25deg); -webkit-transform:rotate(25deg); }
div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual { width: 1200px; height: 90px; }
div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual ol li ul { font-size: 9px; padding-top: 5px; }

div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family { width: 1200px; height: 90px; bottom: 50px; right: 30px; }
div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family li.timeline-period strong { font-size: 10px; padding-top: 15px; }

div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis-center { width: 150px; height: 150px; bottom: 60px; }



.unit2.slide8 .bg { width: 100%; top:0%; left:0%; }
.unit2.slide8 .father { left:48%; top:26%; width: 43%; }
.unit2.slide8 .mother{ left:76%; top:25%; }
.animation.unit2.slide8 .advisor, .animation.unit2.slide8 .advisor2{ width: 35%; left: 0%; bottom: 0%; }
.unit2.slide8 .bubble01 { left:41%; top:-4%; }
.unit2.slide8 .bubble01 .inner-sprite, .unit2.slide8 .bubble02 .inner-sprite{ padding-top: 17%; }
.unit2.slide8 .bubble02 { left:82%; }
.unit2.slide8 .window1{ top : 15%; left : 33%; }
.unit2.slide8 .window2{ top : 15%; left : 84%; }
.unit2.slide8 .picture-frame{ top : 21%; left : 58%; width: 17%; }
.animation.unit2.slide12 .advisor, .animation.unit2.slide12 .advisor2{ width: 35%; left: 0%; bottom: 0%; }
.unit2.slide12 .bg{ width: 100%; top:0%; left:0%; }
.unit2.slide12 .window1{ top: 15%; left: 33%; }
.unit2.slide12 .window2{ top: 15%; left: 84%; }
.unit2.slide12 .picture-frame{ top: 21%; left: 58%; width: 17%; }
.unit2.slide12 .son-and-mother{ top:16%; left:59%; width: 60%; }
.unit2.slide12 .son-and-mother img {  }
.unit2.slide12 .bubble01 { left:94%; top:0%; }
.unit2.slide12 .bubble02 { left:25%; top: 2%; }
.unit2.slide12 .animation-container .bubble .inner-sprite { padding-top: 12%; }


    /******* RESPONSIVE *******/
    @media (min-width: 1200px) {
      .button-timeline .prev-timeline,
      .button-timeline .next-timeline { display: none; }
      #activity-session .button-timeline .prev-timeline,
      #activity-session .button-timeline .next-timeline { display: block; }
    }

    @media (max-width: 765px) {
      body div.slide.unit2.interactive-activity-3 form.form-horizontal input.age-input { margin-left: 0px; }
    }
    @media (max-width: 992px) {
      body div.slide.unit2.interactive-activity-3 form.form-horizontal input.age-input { margin-left: 0px; }
    }

    @media (max-height: 750px){
      body #personal-life-cycles { zoom: 0.80; margin-top: -30px;}

      body div.slide.unit2.voiceover-1 p.source { margin-top: -50px; }

      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis { zoom: 1.1; max-width: 1000px; position: relative; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis { bottom: 30px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual { right: 185px; bottom: 380px; }

      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual { right: 0px; bottom: 240px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual { width: 1000px; height: 80px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual ol li ul { font-size: 7px; padding-top: 5px; }

      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family { width: 1000px; height: 80px; bottom: 0px; right: -135px; }
      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family li.timeline-period strong { font-size: 10px; padding-top: 10px; }

      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis-center { width: 120px; height: 120px; bottom: 20px; right: 120px; }

      body #family-business-life-cycles { zoom: 0.80; margin-top: -30px; }
      body .slide.unit2.voiceover-3 p.source { margin-top: -100px; }
    }

    @media (max-width: 1300px){
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual { right: 0px; bottom: 240px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual { width: 1000px; height: 80px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual ol li ul { font-size: 7px; padding-top: 5px; }

      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family { width: 1000px; height: 80px; bottom: 0px; right: -135px; }
      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family li.timeline-period strong { font-size: 10px; padding-top: 10px; }

      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis-center { width: 120px; height: 120px; bottom: 20px; right: 120px; }
    }

    @media (max-width: 960px){
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual { right: 0px; bottom: 240px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual { width: 800px; height: 60px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual ol li ul { font-size: 6px; padding-top: 0px; }

      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family { width: 800px; height: 60px; bottom: 40px; right: -125px; }
      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family li.timeline-period strong { font-size: 8px; padding-top: 10px; }

      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis-center { width: 120px; height: 120px; bottom: 45px; right: 60px; }
    }

    @media (max-width: 1024px){
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual { right: 0px; bottom: 240px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual { width: 800px; height: 60px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-transform-point-individual .timeline-individual ol li ul { font-size: 6px; padding-top: 0px; }

      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family { width: 800px; height: 60px; bottom: 40px; right: -125px; }
      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family li.timeline-period strong { font-size: 8px; padding-top: 10px; }

      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis-center { width: 120px; height: 120px; bottom: 45px; right: 60px; }

      body div.slide.unit2.interactive-activity-2 h2 { font-size: 24px; }
      body div.slide.unit2.interactive-activity-2 .post-its { padding-bottom: 30px;}
      body div.slide.unit2.interactive-activity-2 .post-it { width: 164px; height: 131px; background-size: contain; }
      body div.slide.unit2.interactive-activity-2 .post-it p { font-size: 10px; }
      body div.slide.unit2.interactive-activity-2 #priority-board { min-height: 310px; }
      body div.slide.unit2.interactive-activity-2 #priority-board .board { min-height: 310px; }
      body div.slide.unit2.interactive-activity-2 #priority-board .board .answer { min-height: 280px; }

      body div.slide.unit2.voiceover-4 div.content div.container { zoom: 0.9; }
    }

    @media (min-width: 1024px) {
      body div.slide.unit2.voiceover-4 div.content div.container .button-timeline { display: none; }

    }

    @media (max-width: 768px) {
      div.case-story div.animation-container { zoom: 0.65; }
      div#container div.animation.case div.audio { left: 40%; }
      #personal-life-cycles { zoom: 0.9; }

      body div.slide.unit2.voiceover-2.slide5 div.content div.container div.row div.col-md-12 { width: 100% !important; padding: 0px !important; height: 600px; overflow: hidden;  }
      body div.slide.unit2.voiceover-2.slide5 div.content #personal-life-axis .timeline-transform-point-individual { right: -120px; bottom: 200px; }
      body div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-family { right: -210px; }
      div.slide.unit2.voiceover-2.slide5 #personal-life-axis .timeline-axis-center { right: 0px !important; }

      #family-business-life-cycles { zoom: 0.9; }

      #comparing-life { zoom: 0.80; height: 400px; }
      #comparing-life #timeline-ages ul li { height: 40px; }
      #comparing-life #timeline-1965 .midlife-transition p { margin-left: -100px; }
      #comparing-life #timeline-2015 .midlife-transition p { margin-left: -100px; }
      #comparing-life #timeline-1965 .late-adult-transition p { margin-left: -50px; }
      #comparing-life #timeline-2015 .late-adult-transition p { margin-left: -50px; }
      body div.slide.unit2.voiceover-4 div.content div.container .button-timeline { display: none; }


      body .unit2.activity.life-cycle #activity-session #timeline div.icons { top: 60px; }
      body .unit2.activity.life-cycle #activity-session #timeline ul.titles { top: 140px; }
      body .unit2.activity.life-cycle #activity-session #persons .person .form { margin-left: 0px; }


    }



/*****************************/
/********   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.7; }
      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.9; 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.8; 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.7; 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.5; 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; }
    }







/*****************************/
/********   UNIT4  ***********/
/*****************************/
div.slide.unit4 div.content { background-color: transparent; }

div.slide.unit4.voiceover.animation div.content div.container { width: 900px; }

p.credit { font-size: 10px; text-align: right; padding-right: 100px; }

div.slide.unit4 div.indication { display: none; }
div.slide.unit4 div.indication p { font-size: 16px; text-align: center; font-weight: bold; }

#topography-family-meetings h2 { margin-top: 300px; font-size: 26px; text-transform: uppercase; text-align: center; }
#topography-family-meetings .preparation-setup,
#topography-family-meetings .conducting-meeting { position: relative; }
#topography-family-meetings .circle { position: absolute; width: 130px; height: 130px; border-radius: 50%; background-color: black; color: #fff; display: table; cursor: pointer; }
#topography-family-meetings .circle p { font-size: 14px; text-align: center; vertical-align: middle; display: table-cell; }
#topography-family-meetings .accolade { font-family: Arial; font-size: 200px; width: 90px; }
#topography-family-meetings .accolade p { margin-top: -20px; color: #5b9bd5; }
#topography-family-meetings .preparation-setup {  width: 260px; }
#topography-family-meetings .preparation-setup .circle {  background-color: #5b9bd5; }
#topography-family-meetings .preparation-setup .circle-realizing-need { top: 0; left: 0; }
#topography-family-meetings .preparation-setup .circle-organizing-meeting { top: 75px; left: 130px; }
#topography-family-meetings .preparation-setup .circle-converting-meeting { top: 150px; left: 0; }
#topography-family-meetings .conducting-meeting { width: 280px; }
#topography-family-meetings .conducting-meeting .circle {  background-color: #accce9; }
#topography-family-meetings .conducting-meeting .circle-structure { top: 75px; left: 0; }
#topography-family-meetings .conducting-meeting .circle-dynamics { top: 75px; left: 150px; }
#topography-family-meetings .post-meeting { width: 130px; }
#topography-family-meetings .post-meeting .circle {  background-color: #5b9bd5; }
#topography-family-meetings .post-meeting .circle-followup { top: 75px; left: 0; }
#tooltip-box { position: absolute; background-color: #2090c0; border-radius: 15px; padding: 18px; font-size: 16px; color: #fff; display: none; }

#governance-structure-agreements { margin: 0 auto; width: 650px; }

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

.gsa { position: relative; width: 630px; height: 600px; background-image: url(../img/gsa/schema.png); background-size: 100% 100%; }
.gsa .content,
.gsa .circle { position: absolute; width: 262px; height: 272px; display: block; }
.gsa .content-family-council,
.gsa .circle-family-council { top: 0; left: 0; }
.gsa .content-board-directors,
.gsa .circle-board-directors { top: 0; left: 368px; }
.gsa .content-shareholders-group,
.gsa .circle-shareholders-group { top: 330px; left: 184px; }

.gsa .content h3 { font-size: 20px; color: #fff; text-align: center; padding-top: 150px; }
.gsa .content h3 small { display: block; color: #fff; }
.gsa .content-family-council, .gsa .content-board-directors, .gsa .content-shareholders-group { background-size: 30%; background-position: center 40%; background-repeat: no-repeat; }
.gsa .content-family-council { background-image: url(../img/gsa/icon-family.png); }
.gsa .content-family-council img { width: 44px; margin: -77px 0 0 202px; }
.gsa .content-board-directors { background-image: url(../img/gsa/icon-directors.png); }
.gsa .content-board-directors img { width: 48px; margin: -90px 0 0 10px; }
.gsa .content-shareholders-group { background-image: url(../img/gsa/icon-shareholders.png); }
.gsa .content-shareholders-group img { width: 110px; margin: -423px 0 0 75px; }
.gsa .content-center { top: 138px; left: 208px; width: 211px; height: 212px; }
.gsa .content-center span.bg { display: block; position: absolute; width: 211px; height: 212px; background-image: url(../img/gsa/tricircle.png); background-size: 80% 80%; background-repeat: no-repeat;  background-position: center center; }
.gsa .content-center h3 { font-size: 12px; font-weight: bold; text-transform: uppercase; padding-top: 65px; }

.gsa .circle { border-radius: 50%; background-color: transparent; color: #fff; z-index: 100; }

.unit4 .post-it { height: 164px; width: 205px; padding: 12px 0 0 25px; background-image: url(../img/post-it.png); background-size: 100% 100%; cursor: pointer; }
.unit4 .post-it p { font-size: 12px; padding: 15px 10px;}
.unit4 .circle .post-it { height: 90px; width: 110px; padding: 4px 10px 0 11px; display: inline-block; }
.unit4 .circle .post-it p { color: #000; font-style: italic; font-size: 10px; padding: 10px 2px; }

.unit4.interactive-activity-6 #activity-instructions { margin-top: 100px; width: 600px; text-align: center; }
.unit4.interactive-activity-6 .post-its .post-it { width: 150px; height: 120px; }

.survey .question .slider { margin: 10px 10px 25px 10px; height: 20px; }
.survey .question .slider .ui-state-default {  }
.survey .question .slider .ui-state-active {  }
.survey .question .slider .ui-state-focus {  }

#decisions-results-graph { margin: 0 auto; width: 900px; height: 500px; }
#decisions-results-graph svg { background-color: transparent; }
svg.survey .axis line.grade { stroke: grey; }
svg.survey .axis line.abscisse { stroke: black; stroke-width: 2px; }
svg.survey .axis text { font-size: 12px; font-family: Arial; }
svg.survey .axis text.label { text-anchor: middle; }
svg.survey .axis text.marker { fill: white; text-anchor: middle; }
svg.survey .axis path { stroke-width: 3px; fill: none; }
svg.survey .structure-business { stroke: #70ad47; fill: #70ad47; }
svg.survey marker .structure-business { fill: #70ad47; stroke-width: 0; }
svg.survey .structure-family { stroke: #ed7d31; fill: #ed7d31; }
svg.survey marker .structure-family { fill: #ed7d31; stroke-width: 0; }
svg.survey .relationship-business { stroke: #4372c3; fill: #4372c3; }
svg.survey marker .relationship-business { fill: #4372c3; stroke-width: 0; }
svg.survey .relationship-family { stroke: #ffc001; fill: #ffc001; }
svg.survey marker .relationship-family { fill: #ffc001; stroke-width: 0; }

svg.survey .legend rect.structure-business { fill: #70ad47; stroke: #70ad47; }
svg.survey .legend rect.structure-family { fill: #ed7d31; stroke: #ed7d31; }
svg.survey .legend rect.relationship-business { fill: #4372c3; stroke: #4372c3; }
svg.survey .legend rect.relationship-family { fill: #ffc001; stroke: #ffc001; }
svg.survey .legend text { font-size: 14px; font-family: Arial; text-anchor: middle; }
svg.survey .legend text.domain { text-anchor: end; }

.animation.case.unit4, .animation.case .content { background: #b1d7fd; }
.animation.unit4 .animation-container { height: 85%; width: 113.333%; /* Pour connaitre ratio. Width en px calculé en JS */ background: url('../img/unit4-fond.png')  no-repeat; background-size: 100%; }
.animation.unit4 .advisor, .animation.unit4 .advisor2{ width: 35%; left: 0%; bottom: 0%; }
.unit4.slide3 .bg1 { background:  url('../img/unit4-case1-bg-1.png') left top repeat-x; background-size: contain; }
.unit4.slide3 .phone-bg { left: 50%; }
.unit4.slide3 .phone-bg .inner-sprite { height: 100%; position: static; float: left; }
.unit4.slide3 .phone-bg .inner-sprite.phone-bg-left { background:  url('../img/unit4-case1-phonebg.png') left top no-repeat; background-size: auto 101%; width: 9%; }
.unit4.slide3 .phone-bg .inner-sprite.phone-bg-right { background: #b3d9ff; width: 80%; }
.unit4.slide3 .family-members { top: 30%; left:65%; width: 65%; }
.unit4.slide3 .family-members .inner-sprite { width: 100%; position: absolute; font-size: 2.5vh; text-align: center; line-height: 2.5vh; font-weight: bold; }
.unit4.slide3 .family-members .v-align { position: absolute; width: 100%; padding: 23.5% 40% 0; }
.unit4.slide3 .Daniel { top: 29%; width: 29%;}
.unit4.slide3 .Diana { top: 25%; left: 63%; }
.unit4.slide3 .Julie { top: 23%; left: 81%; width: 22%; }
#container div.animation div.audio.audio-back { background-image: url('../img/case-back.png'); background-position: center center; left: -36%; }
.unit4.slide3 .bubble01 { left: 64%; top: 40%; }
.unit4.slide3 .door { left: 85%; top: 0%; width: 36.5%; }
.unit4.slide3 .entry-desk { left: 28%; top: 25%; width: 54%; }
.unit4.slide3 .picture-frames { width: 150%; left: -99%; top: 11%; }
.unit4.slide3 .door .hover-glow { visibility: visible; }
.unit4.slide3 .hover-text { width: 400%; right: 100%; background: url('../img/case-arrow-1.png') right 2px no-repeat; background-size: 10% auto; padding-right: 43%; margin-top: 2em; font-size: 3vh; }
.unit4.slide3 .hover-text p { text-align: right; }
.unit4.slide3 .notepad { top:53%; left:93%; width: 25%; }
.unit4.slide3 .notepad-close { width: 8%; left: 84%; top:25%; }
.unit4.slide3 .manager-desk { top:-5%; left:43%; width: 100%; }
.unit4.slide3 .filing-cabinet { top:35%; left:22%; width:30%; }
.unit4.slide3 .overlay { background: rgba(0,0,0,0.8); }
.unit4.slide3 .genogram { top: 85%; left: 74%; width: 73%; }
.unit4.slide3 .genogram-close { top: 18%; left: 102%; width: 5%; }
.unit4.slide3 .notepad .inner-sprite { transform: skewX(-10deg) rotate(12deg); -webkit-transform: rotate(12deg); width: 48%; margin-top: 19%; margin-left: 27%; font-size: 4vh; }
.unit4.slide3 .phone { top:62%; left:62%; width: 25%; }
.unit4.slide3 .diana-phone { width: 44%; left: 88%; top: 36%; }
.unit4.slide3 .bubble .text-1, .unit4.slide3 .bubble .text-2 { display: none; }
.unit4.slide3 .bubble-diana{ top: 5%; left: 90%; }
.unit4.slide3 .bubble-manager{ top: 0%; left: 59%; }
.animation .bubble-manager .inner-sprite{ padding-top: 10%; }
.unit4.slide7 .meeting{ top: 78%; left: 64%; width: 59%; }
.unit4.slide7 .manager-desk{ top: 61%; left: 43%; width: 68%; }
.unit4.slide7 .father-1{ left: 57%; top: 24%; width: 12%; }
.unit4.slide7 .father-2{ width: 19%; left: 70%; top: 22%; }
.unit4.slide7 .computer{ top: 83%; left: 86%; width: 46%; }
.unit4.slide7 .bubble01{ top: 9%; left: 50%; }
.unit4.slide7 .bubble01 .inner-sprite{ padding-top: 15%; }
.unit4.slide7 .bubble02{ top: 29%; left: 63%; }
.unit4.slide7 .bubble05{ top: 29%; left: 63%; }
.unit4.slide7 .bubble03{ top: 8%; left: 50%; }
.unit4.slide7 .bubble03 .inner-sprite { padding-top: 15%; }
.unit4.slide7 .bubble04{ top: 0%; left: 87%; }
.unit4.slide7 .phone-bg { left: -25%; background: #FFF; }
.unit4.slide7 .phone-bg .inner-sprite { height: 100%; left: 26%; position: relative; float: left; }
.unit4.slide7 .phone-bg .inner-sprite.phone-bg-left { background:  url('../img/unit4-case1-phonebg.png') left top no-repeat; background-size: auto 101%; width: 9%; }
.unit4.slide7 .phone-bg .inner-sprite.phone-bg-right { background : #b3d9ff; width: 80%; }
.unit4.slide8 div.content { height: 100%; }
.unit4.slide8 div.content div.container { padding-bottom: 100px; margin-top: 100px; height: 90%; }
.unit4.slide8 .schema { margin: 0 auto; width: 85%; height: 85%; }
.unit4.slide8 .schema-title { padding: 0 0 0 0; width: 35%; top: 5%; }
.unit4.slide8 .schema-title h1{ position: relative; padding-bottom: 20px; line-height: 30px; /*For animation*/ }
.unit4.slide8 .schema .schema-engaging { width: 25%; height: 35%; margin-top: -5%; }
.unit4.slide8 .schema .schema-engaging .schema-text small { font-size: 14px; display: block; }
.unit4.slide8 .schema .schema-bottom { width: 20%; margin: 0 15% 0%; bottom: 10%; }
.unit4.slide8 .schema .schema-bottom .schema-aside { bottom: 10%; }
.unit4.slide8 .schema .schema-evaluation { top: 30%; margin-left: 0px !important; }
.unit4.slide8 .schema .schema-exploring { top: 30%; margin-right: 0px !important; }
.unit4.slide8 .schema .schema-evaluation .schema-aside { left: 0; top: -140%; }
.unit4.slide8 .schema .schema-exploring, .unit4.slide8 .schema .schema-evaluation { margin: 3% 9%; width: 22%; }
.unit4.slide8 .schema .schema-bg-arrow-wrapper { overflow: hidden; position: absolute; width: 100%; height: 100%; }
.unit4.slide8 .schema .schema-bg-arrow { width: 100%; height: 100%; background: url('../img/unit4-arrow360.png') center center no-repeat; background-size: contain; transform: rotate(8deg);  -webkit-transform: rotate(8deg);  }
.unit4.slide8 .schema .schema-box { width: 25%; height: 15%; display: table; padding: 10px; border-radius: 10px; box-shadow: 5px 5px 25px #AAA; }
.unit4.slide8 .schema .schema-box .schema-text { display: table-cell; vertical-align: middle; font-size: 18px; }
.unit4.slide8 .schema .schema-box .schema-aside { font-size: 18px; right: -110%; }

.unit4.slide9 .content { height: 55%; }
.unit4.slide9 .content>.container, .unit4.slide9 .schema, .unit4.slide9 .schema-column { height: 100% }
.unit4.slide9 .schema-column-fairprocess ul{ text-align: left; }
.unit4.slide9 .schema-column-fairprocess li{ margin:20px 0; font-size: 25px; }
.unit4.slide9 .schema-column-second .schema-arrow{ margin-top: 20%; margin-bottom: 20%; }
.unit4.slide9 .schema-arrow { padding: 0 0 0 25%; max-height: 200px; background: url('../img/unit4-schema-arrow.png') left center no-repeat; background-size: 20% auto; width: 100%;  }
.unit4.slide9 .schema-arrow .schema-box { float:none; width: 100%;
  background: #b0e9e3;
  background: -moz-linear-gradient(top, #b0e9e3 14%, #93e4ca 63%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#b0e9e3), color-stop(63%,#93e4ca));
  background: -webkit-linear-gradient(top, #b0e9e3 14%,#93e4ca 63%);
  background: -o-linear-gradient(top, #b0e9e3 14%,#93e4ca 63%);
  background: -ms-linear-gradient(top, #b0e9e3 14%,#93e4ca 63%);
  background: linear-gradient(to bottom, #b0e9e3 14%,#93e4ca 63%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0e9e3', endColorstr='#93e4ca',GradientType=0 );
}

.unit4.slide9 .schema-column-third .schema-arrow .schema-box { float:none; width: 100%;
  background: #b0e9b7;
  background: -moz-linear-gradient(top, #b0e9b7 14%, #a8e493 63%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#b0e9b7), color-stop(63%,#a8e493));
  background: -webkit-linear-gradient(top, #b0e9b7 14%,#a8e493 63%);
  background: -o-linear-gradient(top, #b0e9b7 14%,#a8e493 63%);
  background: -ms-linear-gradient(top, #b0e9b7 14%,#a8e493 63%);
  background: linear-gradient(to bottom, #b0e9b7 14%,#a8e493 63%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0e9b7', endColorstr='#a8e493',GradientType=0 );
}

.unit4.slide9 .schema { max-height: 400px; margin-top: 40px; }
.unit4.slide9 .schema-commitment{ top: 40%; }
.unit4.slide9 .schema-column-fairprocess, .unit4.slide9 .schema-fairprocess { height: 100%; }
.unit4.slide9 .schema-fairprocess {  }
.unit4.slide9 p.source { margin-top: 40px; }
.unit4.slide9 .schema .schema-box { padding: 20px; border-radius: 10px; box-shadow: 5px 5px 25px #AAA;  }
.unit4.slide9 .schema .schema-box h1 { font-size: 24px; }
.unit4.slide9 .schema .schema-box ul li { font-size: 18px; }

.unit4.slide12 .phone-bg { left: 0%; background: #FFF; }
.unit4.slide12 .phone-bg .inner-sprite { height: 100%; left: 29%; position: relative; float: left; }
.unit4.slide12 .phone-bg .inner-sprite.phone-bg-left { background:  url('../img/unit4-case1-phonebg.png') left top no-repeat; background-size: auto 101%; width: 9%; }
.unit4.slide12 .phone-bg .inner-sprite.phone-bg-right { background: #b3d9ff; width: 80%; }
.unit4.slide12 .manager-desk{ top: 61%; left: 43%; width: 68%; }
.unit4.slide12 .diana-phone { width: 44%; left: 88%; top: 36%; }
.unit4.slide12 .father-1{ left: 49%; top: 38%; }
.unit4.slide12 .father-2{ width: 33%; left: 84%; top: 37%; }
.unit4.slide12 .shop{ width: 34%; left: 64%; top: 12%; }
.unit4.slide12 .Daniel { top: 29%; width: 29%; }
.unit4.slide12 .Diana { top: 25%; left: 63%; }
.unit4.slide12 .Julie { top: 23%; left: 81%; width: 22%; }
.unit4.slide12 .family-members { top: 30%; left:65%; width: 65%; }
.unit4.slide12 .family-members .inner-sprite { width: 100%; position: absolute; font-size: 2.5vh; text-align: center; line-height: 2.5vh; font-weight: bold; }
.unit4.slide12 .family-members .v-align { position: absolute; width: 100%; padding: 23.5% 40% 0; }
.unit4.slide12 .bubble01{ top: 11%; left: 50%; }
.unit4.slide12 .bubble01 .inner-sprite{ padding-top: 15%; }
.unit4.slide12 .bubble02{ top: 49%; left: 64%; }



    /******* RESPONSIVE *******/
    @media (max-width: 960px ){
      div.slide.unit4.voiceover.animation div.content div.container { zoom: 0.8; }
    }

    @media (max-width: 992px ){
      body .gsa { zoom: 0.85; }
      div.slide.unit4.interactive-activity-6 div.content div.container { width: 100%; }
    }

    @media ( max-width: 1024px ){
      .schema-aside { font-size: 0.7em; }
      .unit4.slide8 .schema .schema-exploring .schema-aside { right: auto; left: 0; top: -90%; }
      .unit4.slide8 .schema .schema-evaluation .schema-aside { top: -90% !important; }
      .unit4.slide8 .schema .schema-evaluation { top: 20%; }
      .unit4.slide8 .schema .schema-exploring { top: 20%; }
      .unit4.icon .remember-last-unit { width: 33%; }
      .unit4.icon .col-md-8.col-md-offset-1 { width: 55%; }
      .unit4.icon .col-md-8.col-md-offset-1 p { font-size: 22px; }

    }



    @media (min-height: 750px ){
      body .unit4 #topography-family-meetings { margin-top: 100px; }
    }

    @media (min-height: 850px ){
      body .unit4 #topography-family-meetings { margin-top: 150px; }
    }

    @media (min-height: 950px ){
      body .unit4 #topography-family-meetings { margin-top: 200px; }
    }

    @media (max-height: 850px) {
      body .unit4 div.schema-title h1 { font-size: 20px !important; line-height: 20px !important; padding-bottom: 15px !important; }
    }

    @media (max-height: 750px ){
      .unit4 #decisions-survey { zoom: 0.8; }
      .unit4 #decisions-survey div.question { font-size: 20px; }
      .unit4 #decisions-results { margin-top: -20px; }
      .unit4 #decisions-results-graph { margin-top: -20px; }
      .unit4 #decisions-results-all { margin-top: -20px; }

      body .unit4 div.schema-blue { margin-top: -20px !important; }
      body .unit4 div.schema-title { top: 0px !important; }
      body .unit4 div.schema-title h1 { font-size: 18px !important; line-height: 15px !important; padding-bottom: 10px !important; }
      body .unit4 .schema-aside { font-size: 16px !important; top: -60%;  }
      body .unit4 .schema-text { font-size: 16px !important;  }
      body .unit4 .schema-text { height: 90px; padding-bottom: 10px; }
      body .unit4 #governance-structure-agreements { zoom: 0.85; }
      body .unit4.voiceover-4 #governance-structure-agreements p.source { position: absolute; bottom: 20px; right: 50px; }

      body .unit4.interactive-activity-6 #structure-priorities { margin-top: -100px; zoom: 0.9; }
    }

    @media ( max-width: 768px ){
      body .unit4.toc div.content div.container { margin-top: -50px; }
      body .unit4.icon .remember-last-unit { width: 100%; }
      body .unit4.icon .col-md-8.col-md-offset-1 { width: 100%; }
      body .unit4.icon .col-md-8.col-md-offset-1 p { font-size: 22px; }
      body .unit4.slide3 .family-members .inner-sprite { font-size: 16px; line-height: 22px; }
      body .unit4.slide3 .entry-desk { left: 20px; }
      body .unit4.slide3 .door { left: 65%; }
      body .unit4.slide3 .hover-text { margin-top: 1em; }
      body .unit4.slide3 .filing-cabinet { left: 0px; }
      body .unit4.slide3 .manager-desk { left: 10%; zoom: 0.8; }
      body .unit4.slide3 .phone { left: 50%; }
      body .unit4.slide3 .notepad { left: 75%; }
      body .unit4.slide3 .notepad div.inner-sprite p { font-size: 24px; }
      body .unit4.slide3 .genogram { left: 50%; }
      body .unit4.slide3 .genogram-close { left: 80%; }
      body #navbar .nav-tooltip-next p { background-color: transparent !important; }
      body .unit4 #decisions-results-graph { zoom: 0.8; margin-left: -80px; }
      body .unit4 #topography-family-meetings div.circle { zoom: 0.9; }
      body .unit4 #topography-family-meetings .accolade { font-size: 150px; }
      body #topography-family-meetings .post-meeting { width: 120px; }
      body #topography-family-meetings .preparation-setup {  width: 240px; }
      body #topography-family-meetings .conducting-meeting { width: 260px; }
      body #topography-family-meetings h2 { font-size: 22px; }


      body .unit4 .schema-aside { font-size: 16px !important; top: -60%;  }
      body .unit4 .schema-text { font-size: 16px !important;  }
      body .unit4 .schema-text { height: 90px; padding-bottom: 10px; }
      body .unit4.slide8 .schema .schema-exploring .schema-aside { right: auto; left: 0; top: -130%; }
      body .unit4.slide8 .schema .schema-evaluation .schema-aside { top: -130% !important; }
      body .unit4.slide8 .schema .schema-evaluation { top: 30%; }
      body .unit4.slide8 .schema .schema-exploring { top: 30%; }
      body .unit4.slide9 .schema-column-third .schema-arrow .schema-box { font-size: 18px; }
      body div.slide.unit4.voiceover.animation div.content div.container { zoom: 1 !important; }
    }


/*****************************/
/********   UNIT5  ***********/
/*****************************/
div.slide.unit5 div.content { background-color: transparent; }

.unit5 #family-envisioning-process,
.unit5 #family-envisioning-process-focus,
.unit5 #individual-dreams,
.unit5 #common-vision,
.unit5 #family-envisioning-process-sync { height: 550px; }
.unit5 .family-envisioning-process,
.unit5 .business-planning-process { position: relative; }
.unit5 .family-envisioning-process { height: 230px; }
.unit5 .business-planning-process { height: 180px; }
.unit5 .business-planning-process h2 { padding-top: 200px; }
.unit5 .circle { position: absolute; width: 150px; height: 150px; border-radius: 50%; background-color: red; color: #fff; display: table; }
.unit5 .circle p { font-size: 20px; font-weight: bold; text-align: center; vertical-align: middle; display: table-cell; }
.unit5 .circle.business-philosophy { background-color: #5b9bd5; }
.unit5 .right-arrow,
.unit5 .bottom-arrow { position: absolute; }
.unit5 .dashed-arrow { background-image: url(../img/dashed.png); width: 100%; height: 100%; position: absolute; top: 0; }
.unit5 .business-philosophy svg { background-color: transparent; fill: #5b9bd5; }
.unit5 .strategic-thinking svg { fill: #f4b183; }
.unit5 .strategic-plan svg { fill: #a9d18e; }
.unit5.interactive-activity-1 .family-behaviors { padding-bottom: 100px; }
.unit5 .circle.business-philosophy-values { top: 0; left: 0; z-index: 1; }
.unit5 .circle.business-philosophy-principles { top: 0; left: 200px; }
.unit5 .circle.strategic-thinking { background-color: #f4b183; }
.unit5 .circle.strategic-thinking-dreams { top: 0; left: 400px; }
.unit5 .circle.strategic-plan { background-color: #a9d18e; }
.unit5 .circle.strategic-plan-vision { top: 0; left: 600px; z-index: 1; }
.unit5 .circle.strategic-plan-plans { top: 0; left: 800px; }
.unit5 .right-arrow.business-philosophy-values { top: 42px; left: 145px; }
.unit5 .right-arrow.business-philosophy-principles { top: 42px; left: 345px; }
.unit5 .right-arrow.strategic-thinking-dreams { top: 42px; left: 545px; }
.unit5 .right-arrow.strategic-plan-vision { top: 42px; left: 745px; }
.unit5 .right-arrow.business-philosophy-process { top: 10px; left: 270px; z-index: 1; }
.unit5 .right-arrow.strategic-thinking-process { top: 10px; left: 570px; z-index: 1; }
.unit5 .bottom-arrow.business-philosophy-values { top: 130px; left: 45px; }
.unit5 .bottom-arrow.business-philosophy-principles { top: 135px; left: 225px; }
.unit5 .bottom-arrow.strategic-thinking-dreams { top: 135px; left: 425px; }
.unit5 .bottom-arrow.strategic-plan-vision-thinking { top: 130px; left: 572px; }
.unit5 .bottom-arrow.strategic-plan-vision-plan { top: 130px; left: 660px; }
.unit5 .bottom-arrow.strategic-plan-plans { top: 135px; left: 825px; }

.unit5 .rectangle { position: absolute; width: 200px; height: 180px;  border-radius: 10%; background-color: #7f7f7f; }
.unit5 .rectangle.business-philosophy-process { top: 0; left: 100px; }
.unit5 .rectangle.strategic-thinking-process { top: 0; left: 400px; }
.unit5 .rectangle.strategic-plan-process { top: 0; left: 700px; }
.unit5 .rectangle .circle { top: 15px; left: 25px; }

.unit5 .right-arrow.disabled svg,
.unit5 .bottom-arrow.disabled svg { fill: #d9d9d9; }
.unit5 .circle.disabled { background-color: #d9d9d9; }
.unit5 .rectangle.disabled { background-color: #bfbfbf; }

#family-envisioning-process-sync h2,
#family-envisioning-process h2,
#family-envisioning-process-focus h2,
#individual-dreams h2,
#common-vision h2 { height: 33px; text-align: center; text-transform: uppercase; margin-left: -200px;  }


#individual-dreams .circle.strategic-thinking-dreams { z-index: 3; }
#individual-dreams .family-envisioning-process .rectangle { width: 350px; height: 150px; top: 0; left: 540px; z-index: 2; border-radius: 20px; color: #fff; text-align: center; padding-top: 20px; }
#individual-dreams .family-envisioning-process .rectangle h3 { text-transform: uppercase; font-weight: bold; }

#common-vision .family-envisioning-process .rectangle { width: 280px; height: 150px; border-radius: 20px; color: #fff; text-align: center; padding-top: 20px; }
#common-vision .family-envisioning-process .rectangle.strategic-plan-vision { top: 0; left: 330px; }
#common-vision .family-envisioning-process .rectangle.strategic-plan-plans { top: 0; left: 940px; z-index: -1; }
#common-vision .family-envisioning-process .rectangle h3 { text-transform: uppercase; font-weight: bold; }

#family-envisioning-process-sync .bottom-arrow.business-philosophy-values { top: 135px; left: 25px; }
#family-envisioning-process-sync .bottom-arrow.strategic-plan-vision { top: 135px; left: 625px; }
#family-envisioning-process-sync .rectangle { width: 220px; }
#family-envisioning-process-sync .rectangle .circle { top: 15px; left: 35px; }
#family-envisioning-process-sync .rectangle.business-philosophy-process { top: 0; left: 65px; }
#family-envisioning-process-sync .right-arrow.business-philosophy-process { top: 10px; left: 245px; }
#family-envisioning-process-sync .rectangle.strategic-thinking-process { top: 0; left: 370px; }
#family-envisioning-process-sync .right-arrow.strategic-thinking-process { top: 10px; left: 540px; }
#family-envisioning-process-sync .rectangle.strategic-plan-process { top: 0; left: 665px; }

.unit5 .post-it { height: 164px; background-image: url('../img/post-it.png'); background-size: contain; background-repeat: no-repeat; }
.unit5 .family-values .post-it p { font-size: 18px; padding: 60px 12px; text-align: center; }
.unit5 .family-values .post-it input { font-size: 18px; width: 100%; max-width: 200px; margin: 60px 12px; text-align: center; background: transparent; border: none; }
.unit5 .family-behaviors .post-it p { font-size: 11px; padding: 30px 5px 5px 12px; }
.unit5 .family-behaviors .post-it textarea { font-size: 12px; margin: 30px 0px 0px 12px; height: 100px; width: 100%; max-width: 200px; background: transparent; border: none; }
.unit5 .family-values label,
.unit5 .family-behaviors label { font-size: 12px; }

.unit5.interactive-activity-2 #example-title { font-size: 26px; margin-top: 120px; position: absolute; z-index: 88; margin-left: 20px; }
.unit5.interactive-activity-2 ul.examples.on { border: solid 1px #DDD; padding: 30px; width: 400px; border-radius: 5px; background-color: #FFF; margin-top: 100px; padding-top: 60px; box-shadow: 2px 2px 10px #AAA; }
.unit5.interactive-activity-2 ul.examples.on li { font-size: 18px; margin-bottom: 10px; margin-left: 15px; }

#overlap-individual-dreams { margin: 0 auto; width: 600px; height: 600px; }
#overlap-individual-dreams svg { background-color: transparent; }
ul.examples { font-size: 14px; }

svg.family-vision .ellipses text { font-size: 18px; font-family: Arial; text-anchor: middle;}
svg.family-vision .ellipses line { stroke: blue; stroke-width: 2px; }
svg.family-vision .ellipses ellipse { stroke-width: 4px; fill: transparent; }
svg.family-vision .ellipses ellipse.orange { stroke: orange; }
svg.family-vision .ellipses ellipse.aquamarine { stroke: aquamarine; }
svg.family-vision .ellipses ellipse.pink { stroke: pink; }
svg.family-vision .ellipses ellipse.dark-blue { stroke: darkblue; }
svg.family-vision .ellipses ellipse.yellow-green { stroke: greenyellow; }
svg.family-vision .ellipses ellipse.gray { stroke: gray; }
svg.family-vision .ellipses ellipse.red { stroke: red; }
svg.family-vision .ellipses ellipse.yellow { stroke: yellow; }

    /******* RESPONSIVE *******/
    @media (max-height: 750px ){
      body .unit5 #family-envisioning-process { margin-top: -30px; }
      body .unit5 #family-envisioning-process-focus { margin-top: -30px; }
      body .unit5 #individual-dreams { margin-top: -30px; }
      body .unit5 #common-vision { margin-top: -30px; }
      body .unit5 #family-envisioning-process-sync { margin-top: -30px; }
      body .unit5.interactive-activity-2 p.source { margin-top: -105px; position: absolute; left: 0px; }

      .unit5.interactive-activity-2 #example-title { margin-top: 20px; }
      .unit5.interactive-activity-2 ul.examples.on { width: 100%; margin-top: 0px; padding-top: 60px; }

    }

    @media (max-width: 1024px) {
      body .unit5 #family-envisioning-process { zoom: 0.9; }
      body .unit5 #family-envisioning-process-focus { zoom: 0.9; }
      body .unit5 #individual-dreams { zoom: 0.9; }
      body .unit5 #common-vision { zoom: 0.9; }
      body .unit5 #family-envisioning-process-sync { zoom: 0.9; }
      body .unit5 .family-values .post-it input { font-size: 12px; }
    }

    @media (max-width: 768px) {
      body .unit5 #family-envisioning-process { zoom: 0.7; }
      body .unit5 #family-envisioning-process-focus { zoom: 0.7; }
      body .unit5 #individual-dreams { zoom: 0.7; }
      body .unit5 #common-vision { zoom: 0.7; }
      body .unit5 #family-envisioning-process-sync { zoom: 0.7; }

      body .unit5 #family-envisioning-process h2 { font-size: 24px; }
      body .unit5 #family-envisioning-process-focus h2 { font-size: 24px; }
      body .unit5 #individual-dreams h2 { font-size: 24px; }
      body .unit5 #common-vision h2 { font-size: 24px; }
      body .unit5 #family-envisioning-process-sync h2 { font-size: 24px; }

      body .unit5 #common-vision h3 { font-size: 20px; }

      body .unit5 #family-envisioning-process p { font-size: 18px; }
      body .unit5 #family-envisioning-process-focus p { font-size: 18px; }
      body .unit5 #individual-dreams p { font-size: 18px; }
      body .unit5 #common-vision p { font-size: 18px; }
      body .unit5 #family-envisioning-process-sync p { font-size: 18px; }

      body .unit5.interactive-activity-2 ul.examples.on { width: 200px; }
      body .unit5.interactive-activity-2 ul.examples.on li { font-size: 16px; }
    }



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