/* Orange : F15D22 Blue : 2F6EB1 LG : D1D3D4 MG : 808285 DG : 414042 */ .vimeo-wrapper.hide { display: none; } .vimeo-wrapper.show { display: block; } #intergenerational-family-journey-app-container.introEnd0.playing0 #audiomap { display: none; } #intergenerational-family-journey-app-container.introEnd1 #audiomap { display: inline-block; } #intergenerational-family-journey-app-container.playingtrue #audiomap { display: inline-block; } #intergenerational-family-journey-app-container.introEnd0.playing0 .hugePlayButton button { border-radius: 100%; border-color: transparent; width: 150px; height: 150px; position: fixed; left: 50%; top: 50%; margin-left: -75px; margin-top: -75px; box-shadow: 2px 2px 5px #000; cursor: pointer; z-index: 101; } #intergenerational-family-journey-app-container.playingtrue .hugePlayButton button { display: none; } #intergenerational-family-journey-app-container.playing1 .hugePlayButton button { display: none; } #intergenerational-family-journey-app-container.introEnd1 .hugePlayButton { display: none; } #intergenerational-family-journey-app-container.playing1 #background-video:hover .hugePlayButton button.pauseButton { display: block; border-radius: 100%; border-color: transparent; width: 150px; height: 150px; position: fixed; left: 50%; top: 50%; margin-left: -75px; margin-top: -75px; box-shadow: 2px 2px 5px #000; cursor: pointer; z-index: 101; opacity: 0.8; } #intergenerational-family-journey-app-container .authorize.hugePlayButton { display: block; } #intergenerational-family-journey-app-container .authorize.hugePlayButton button { border-radius: 100%; border-color: transparent; width: 150px; height: 150px; position: fixed; left: 50%; top: 50%; margin-left: -75px; margin-top: -75px; box-shadow: 2px 2px 5px #000; cursor: pointer; z-index: 101; } #intergenerational-family-journey-app-container.showContent1 .hugePlayButton button { display: none !important; z-index: 98; } #intergenerational-family-journey-app-container #map-content .camp1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp6 { display: none; } #intergenerational-family-journey-app-container.camp1 #map-content .camp1 { display: block; } #intergenerational-family-journey-app-container.camp2 #map-content .camp2 { display: block; } #intergenerational-family-journey-app-container.camp3 #map-content .camp3 { display: block; } #intergenerational-family-journey-app-container.camp4 #map-content .camp4 { display: block; } #intergenerational-family-journey-app-container.camp5 #map-content .camp5 { display: block; } #intergenerational-family-journey-app-container.camp6 #map-content .camp6 { display: block; } #intergenerational-family-journey-app-container.camp1.path0 #map-content .camp1 { display: none; } #intergenerational-family-journey-app-container.camp2.path0 #map-content .camp2 { display: none; } #intergenerational-family-journey-app-container.camp3.path0 #map-content .camp3 { display: none; } #intergenerational-family-journey-app-container.camp4.path0 #map-content .camp4 { display: none; } #intergenerational-family-journey-app-container.camp5.path0 #map-content .camp5 { display: none; } #intergenerational-family-journey-app-container.camp6.path0 #map-content .camp6 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path3 { display: none; } #intergenerational-family-journey-app-container.camp1.path1 #map-content .camp1 .camp1path1 { display: block; } #intergenerational-family-journey-app-container.camp1.path2 #map-content .camp1 .camp1path2 { display: block; } #intergenerational-family-journey-app-container.camp1.path3 #map-content .camp1 .camp1path3 { display: block; } #intergenerational-family-journey-app-container.camp2.path1 #map-content .camp2 .camp2path1 { display: block; } #intergenerational-family-journey-app-container.camp2.path2 #map-content .camp2 .camp2path2 { display: block; } #intergenerational-family-journey-app-container.camp2.path3 #map-content .camp2 .camp2path3 { display: block; } #intergenerational-family-journey-app-container.camp3.path1 #map-content .camp3 .camp3path1 { display: block; } #intergenerational-family-journey-app-container.camp3.path2 #map-content .camp3 .camp3path2 { display: block; } #intergenerational-family-journey-app-container.camp3.path3 #map-content .camp3 .camp3path3 { display: block; } #intergenerational-family-journey-app-container.camp4.path1 #map-content .camp4 .camp4path1 { display: block; } #intergenerational-family-journey-app-container.camp4.path2 #map-content .camp4 .camp4path2 { display: block; } #intergenerational-family-journey-app-container.camp4.path3 #map-content .camp4 .camp4path3 { display: block; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path1 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path1 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path1 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path1 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path1 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path2 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path2 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path2 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path2 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path2 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path3 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path3 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path3 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path3 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp1 .camp1path3 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path1 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path1 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path1 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path1 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path1 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path2 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path2 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path2 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path2 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path2 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path2 .list-step6 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path3 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path3 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path3 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path3 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path3 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp2 .camp2path3 .list-step6 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path1 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path1 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path1 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path1 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path1 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path2 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path2 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path2 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path2 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path2 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path3 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path3 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path3 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path3 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp3 .camp3path3 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path1 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path1 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path1 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path1 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path1 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path2 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path2 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path2 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path2 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path2 .list-step5 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path3 .list-step1 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path3 .list-step2 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path3 .list-step3 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path3 .list-step4 { display: none; } #intergenerational-family-journey-app-container #map-content .camp4 .camp4path3 .list-step5 { display: none; } #intergenerational-family-journey-app-container.camp1.path1.step1 #map-content .camp1 .camp1path1 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp1.path1.step2 #map-content .camp1 .camp1path1 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp1.path1.step3 #map-content .camp1 .camp1path1 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp1.path1.step4 #map-content .camp1 .camp1path1 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp1.path1.step5 #map-content .camp1 .camp1path1 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp1.path2.step1 #map-content .camp1 .camp1path2 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp1.path2.step2 #map-content .camp1 .camp1path2 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp1.path2.step3 #map-content .camp1 .camp1path2 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp1.path2.step4 #map-content .camp1 .camp1path2 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp1.path2.step5 #map-content .camp1 .camp1path2 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp1.path3.step1 #map-content .camp1 .camp1path3 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp1.path3.step2 #map-content .camp1 .camp1path3 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp1.path3.step3 #map-content .camp1 .camp1path3 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp1.path3.step4 #map-content .camp1 .camp1path3 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp1.path3.step5 #map-content .camp1 .camp1path3 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp2.path1.step1 #map-content .camp2 .camp2path1 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp2.path1.step2 #map-content .camp2 .camp2path1 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp2.path1.step3 #map-content .camp2 .camp2path1 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp2.path1.step4 #map-content .camp2 .camp2path1 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp2.path1.step5 #map-content .camp2 .camp2path1 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp2.path2.step1 #map-content .camp2 .camp2path2 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp2.path2.step2 #map-content .camp2 .camp2path2 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp2.path2.step3 #map-content .camp2 .camp2path2 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp2.path2.step4 #map-content .camp2 .camp2path2 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp2.path2.step5 #map-content .camp2 .camp2path2 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp2.path2.step6 #map-content .camp2 .camp2path2 .list-step6 { display: block; } #intergenerational-family-journey-app-container.camp2.path3.step1 #map-content .camp2 .camp2path3 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp2.path3.step2 #map-content .camp2 .camp2path3 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp2.path3.step3 #map-content .camp2 .camp2path3 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp2.path3.step4 #map-content .camp2 .camp2path3 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp2.path3.step5 #map-content .camp2 .camp2path3 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp2.path3.step6 #map-content .camp2 .camp2path3 .list-step6 { display: block; } #intergenerational-family-journey-app-container.camp3.path1.step1 #map-content .camp3 .camp3path1 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp3.path1.step2 #map-content .camp3 .camp3path1 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp3.path1.step3 #map-content .camp3 .camp3path1 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp3.path1.step4 #map-content .camp3 .camp3path1 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp3.path1.step5 #map-content .camp3 .camp3path1 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp3.path2.step1 #map-content .camp3 .camp3path2 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp3.path2.step2 #map-content .camp3 .camp3path2 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp3.path2.step3 #map-content .camp3 .camp3path2 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp3.path2.step4 #map-content .camp3 .camp3path2 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp3.path2.step5 #map-content .camp3 .camp3path2 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp3.path3.step1 #map-content .camp3 .camp3path3 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp3.path3.step2 #map-content .camp3 .camp3path3 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp3.path3.step3 #map-content .camp3 .camp3path3 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp3.path3.step4 #map-content .camp3 .camp3path3 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp3.path3.step5 #map-content .camp3 .camp3path3 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp4.path1.step1 #map-content .camp4 .camp4path1 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp4.path1.step2 #map-content .camp4 .camp4path1 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp4.path1.step3 #map-content .camp4 .camp4path1 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp4.path1.step4 #map-content .camp4 .camp4path1 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp4.path1.step5 #map-content .camp4 .camp4path1 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp4.path2.step1 #map-content .camp4 .camp4path2 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp4.path2.step2 #map-content .camp4 .camp4path2 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp4.path2.step3 #map-content .camp4 .camp4path2 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp4.path2.step4 #map-content .camp4 .camp4path2 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp4.path2.step5 #map-content .camp4 .camp4path2 .list-step5 { display: block; } #intergenerational-family-journey-app-container.camp4.path3.step1 #map-content .camp4 .camp4path3 .list-step1 { display: block; } #intergenerational-family-journey-app-container.camp4.path3.step2 #map-content .camp4 .camp4path3 .list-step2 { display: block; } #intergenerational-family-journey-app-container.camp4.path3.step3 #map-content .camp4 .camp4path3 .list-step3 { display: block; } #intergenerational-family-journey-app-container.camp4.path3.step4 #map-content .camp4 .camp4path3 .list-step4 { display: block; } #intergenerational-family-journey-app-container.camp4.path3.step5 #map-content .camp4 .camp4path3 .list-step5 { display: block; } .questions ul li { padding-bottom: 2rem; } .questions ul li textarea { width: 500px; height: 100px; } #audiomap { height: 30px; margin-top: 1rem; width: 150px; } #audiomap::-webkit-media-controls-current-time-display, #audiomap::-webkit-media-controls-time-remaining-display, #audiomap::-webkit-media-controls-timeline { display: none; } body { overflow: hidden; margin: 0px; font-family: Tinos, Arial, Helvetica, sans-serif; color: #414042; } header { height: 100px; width: 100%; z-index: 1000; padding: 0px; box-sizing: border-box; display: flex; justify-content: space-between; position: fixed; top: 0px; background-color: rgba(255,255,255,0.8); } header .logo { text-align: left; flex-basis: 200px; } header .logo img { height: 70%; width: auto; margin-top: 1rem; margin-left: 1rem; } header > h1 { text-align: center; line-height: 1.6rem; flex-grow: 1; } header .select-path { padding: 10px 20px; box-sizing: border-box; }/*background-color: rgba(255,255,255,0.5);*/ header .select-path p { font-weight: bold; color: #414042; } header .select-path a { font-weight: bold; padding: 10px; background-color: #FFF; color: #222; cursor: pointer; display: block; text-decoration: none; } header .select-path a:hover { color: #F15D22; } header .select-path a.business { font-weight: bold; border: solid 1px #b0d235; padding: 5px 10px; border-radius: 10px; background-color: #FFF; color: #b0d235; } header .select-path a.ownership { font-weight: bold; border: solid 1px #2F6EB1; padding: 5px 10px; border-radius: 10px; background-color: #FFF; color: #2F6EB1; } header .select-path a.family.active { background-color: #F15D22; color: #FFF; } header .select-path a.business.active { background-color: #b0d235; color: #FFF; } header .select-path a.ownership.active { background-color: #2F6EB1; color: #FFF; } header .select-path a.c1, header .select-path a.c2 { padding: 5px; border: solid 1px #000; background-color: #FFF; color: #000; font-size: 12px; } header .select-path a.c1.active, header .select-path a.c2.active { border: solid 1px #000; background-color: #000; color: #FFF; } div.menu { flex-basis: 200px; } div.menu div.select-path { display: none; } div.menu.open div.select-path { display: block; position: absolute; width: 320px; background-color: #FFF; box-shadow: 5px 5px 5px #AAA; top: 55px; right: 40px; height: auto; padding-bottom: 40px; } div.menu div.handle span.text { float: left; margin-left: -60px; } div.menu.open div.handle span.line1 { transform: rotate(45deg); } div.menu.open div.handle span.line2 { opacity: 0; } div.menu.open div.handle span.line3 { transform: rotate(-45deg); margin-top: -14px; margin-left: 3px; } div.menu div.handle { width: 40px; height: 40px; position: absolute; top: 30px; right: 40px; cursor: pointer; } div.menu div.handle span.line1 { border-top: solid 2px #000; display: block; width: 30px; height: 5px;} div.menu div.handle span.line2 { border-top: solid 2px #000; display: block; width: 30px; height: 5px;} div.menu div.handle span.line3 { border-top: solid 2px #000; display: block; width: 30px; height: 5px;} #background-video { position: absolute; height: calc(100vh - 175px); width: 100vw; z-index: 1; margin-top: 99px; display: flex; background-size: cover; background-repeat: no-repeat; left: 0px; top: 0px; background-color:#FFF; } /*426 x 240*/ /* background-image: url('../images/map.jpeg'); */ #background-video.animate-intro { width: 200vw; height: calc(200vh - 155px); left: -100vw; transition: width 10s, height 10s, left 10s; } #background-video.animate-intro-step2 { width: 100vw; height: calc(100vh - 155px); left: 0px; transition: width 9s, height 9s, left 9s; } /* #background-video.animate-camp1 { width: 200vw; height: calc(200vh - 155px); left: -50vw; top: -50vw; transition: width 10s, height 10s, left 10s, top 10s; } */ /* #background-video iframe { width: calc(105vh * 1.77); height: 105vh; margin-bottom: auto; top: 99px; position: fixed; } */ #background-video iframe { aspect-ratio: 16 / 9; width: 100vw; height: auto; top: 99px; position: fixed; } #background-video .overlay { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 30; } #intergenerational-family-journey-app-container.camp5 #background-video { display: none; } #intergenerational-family-journey-app-container.camp6 #background-video { display: none; } #intergenerational-family-journey-app-container.camp5 #map-content { display: none; } #intergenerational-family-journey-app-container.camp6 #map-content { display: none; } #intergenerational-family-journey-app-container.camp6 div.camp6 { display: flex; flex-direction: row; align-items: flex-start; padding-top: 100px; flex-wrap: nowrap; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.filters { flex-grow: 1; padding: 1rem; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.filters .step-content { width: auto; height: 70%; right: auto; top: auto; bottom: auto; min-width: auto; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.filters .step-content ul.progress-line li span.item-number { top: -1rem; border-radius: 0; width: 140px; left: -25px; text-align: center; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.filters div.filters { display: flex; padding: 1.5rem; flex-direction: row; flex-wrap: wrap; justify-content: space-between; border-radius: 10px; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.filters div.filters select { width: 100%; height: 25px; margin-top: 0.5rem; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.filters div.filters { display: flex; background-color: rgba(47, 110, 177, 0.3); font-weight: bold; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.filters div.filters select { border-radius: 5px; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav { flex-grow: 0; flex-basis: 800px; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav div { position: absolute; top: 100px; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 2rem; text-shadow: 1px 1px 10px #000; cursor: pointer; border: solid 3px #FFF; border-radius: 100%; background-color: rgba(0, 0, 0, 0.4); } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav div a { padding: 2rem 0rem; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav div.c1 { top: 500px; left: 220px; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav div.c2 { top: 460px; left: 500px; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav div.c3 { top: 630px; left: 575px; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav div.c4 { top: 500px; left: 700px; } #intergenerational-family-journey-app-container.camp6 div.camp6 .col.mapnav img { width: 100%; height: auto; } .Mainintro { position: absolute; width: 100%; height: 100%; z-index: 1; } .animate-intro-started .Mainintro .c::before { content: ''; position: absolute; width: 100%; height: 100%; background-size: cover; } .animate-intro-camp1 .Mainintro .c1::before { background-image: url('../images/map-camp1.png'); } .animate-intro-camp2 .Mainintro .c2::before { background-image: url('../images/map-camp2.png'); } .animate-intro-camp3 .Mainintro .c3::before { background-image: url('../images/map-camp3.png'); } .animate-intro-camp4 .Mainintro .c4::before { background-image: url('../images/map-camp4.png'); background-size: cover; } .animate-intro-ended .Mainintro .c::before { content: ''; position: absolute; width: 100%; height: 100%; background-size: cover; } .animate-intro-ended .Mainintro .c1::before { background-image: url('../images/map-camp1.png'); } .animate-intro-ended .Mainintro .c2::before { background-image: url('../images/map-camp2.png'); } .animate-intro-ended .Mainintro .c3::before { background-image: url('../images/map-camp3.png'); } .animate-intro-ended .Mainintro .c4::before { background-image: url('../images/map-camp4.png'); background-size: cover; } /* .animate-camp-started .Mainintro .c::before { content: ''; position: absolute; width: 100%; height: 100%; background-size: cover; } #background-video.animate-camp-started .vimeo-player-1 { position: absolute; width: 100%; height: 100%; } #background-video.animate-camp-started iframe { top: 65%; left: 57%; width: 75px; height: 75px; } .animate-camp-started .Mainintro .c1::before { background-image: url('../images/map-camp1.png'); } .animate-camp-started .Mainintro .c2::before { background-image: url('../images/map-camp2.png'); } .animate-camp-started .Mainintro .c3::before { background-image: url('../images/map-camp3.png'); } .animate-camp-started .Mainintro .c4::before { background-image: url('../images/map-camp4.png'); background-size: cover; } */ /* .animate-camp1-ended .Mainintro .c1::before { background-image: url('../images/map-camp1.png'); } .animate-camp1-ended .Mainintro .c2::before { background-image: url('../images/map-camp2.png'); } .animate-camp1-ended .Mainintro .c3::before { background-image: url('../images/map-camp3.png'); } .animate-camp1-ended .Mainintro .c4::before { background-image: url('../images/map-camp4.png'); background-size: cover; } */ #intergenerational-family-journey-app-container.camp1 #background-video .Mainintro { display: none; } #intergenerational-family-journey-app-container.camp2 #background-video .Mainintro { display: none; } #intergenerational-family-journey-app-container.camp3 #background-video .Mainintro { display: none; } #intergenerational-family-journey-app-container.camp4 #background-video .Mainintro { display: none; } #intergenerational-family-journey-app-container.camp5 #background-video .Mainintro { display: none; } #intergenerational-family-journey-app-container.camp6 #background-video .Mainintro { display: none; } #introEnd { width: 100vw; height: calc(100vw / 1.77); max-height: calc(100vh - 125px); margin-bottom: auto; } #introEnd #intro-questionnaire { width: 450px; position: absolute; left: 50%; margin-left: -210px; top: 60px; background-color: rgba(255,255,255,1); padding: 40px; border-radius: 40px; min-height: 325px; box-sizing: border-box; z-index: 100; } #introEnd #intro-questionnaire .question { padding: 0px 1rem; } #introEnd #intro-questionnaire .question h2 { margin: 0px; } #introEnd #intro-questionnaire .question ul { margin-top: 5px; } #introEnd #intro-questionnaire .question ul li { cursor: pointer; font-size: 1.2rem; padding: 4px; } #introEnd #intro-questionnaire .question ul li.selected { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire .intro-question-nav { list-style-type: none; padding: 0px; margin: 0px; text-align: center; width: 100%; bottom: 15px; position: absolute; } #introEnd #intro-questionnaire .intro-question-nav li { display: block; float: left; width: 45px; } #introEnd #intro-questionnaire .intro-question-nav li span { cursor: pointer; width: 15px; height: 15px; background-color: transparent; border: solid 1px #AAA; border-radius: 20px; display: block; margin: 15px; } #introEnd #intro-questionnaire .intro-question-nav li.current span { background-color: #AAA; } #introEnd #intro-questionnaire .intro-question-nav li.done span { background-color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question1 ul.gen1 li.gen1 { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question1 ul.gen2 li.gen2 { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question1 ul.gen3 li.gen3 { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question1 ul.gen4 li.gen4 { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question2 ul.values-not-radar li.values-not-radar { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question2 ul.values-not-transmitted li.values-not-transmitted { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question2 ul.values-mentioned-outdated li.values-mentioned-outdated { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question2 ul.values-talked-about li.values-talked-about { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question2 ul.values-deeply-engrained li.values-deeply-engrained { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question3 ul.selling li.selling { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question3 ul.not-interested li.not-interested { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question3 ul.no-letting-go li.no-letting-go { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question3 ul.not-ready li.not-ready { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question4 ul.never li.never { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question4 ul.rarely li.rarely { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question4 ul.sometimes li.sometimes { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question4 ul.often li.often { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question4 ul.always li.always { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.code-of-conduct li.code-of-conduct { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.family-meetings li.family-meetings { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.family-council li.family-council { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.family-constitution li.family-constitution { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.shareholders-agreement li.shareholders-agreement { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.owners-council li.owners-council { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.board-directors li.board-directors { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question5 ul.advisory-board li.advisory-board { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question6 ul.very-unprepared li.very-unprepared { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question6 ul.unprepared li.unprepared { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question6 ul.somewhat-prepared li.somewhat-prepared { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question6 ul.prepared li.prepared { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question6 ul.very-prepared li.very-prepared { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question7 ul.family li.family { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question7 ul.business li.business { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question7 ul.ownership li.ownership { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question8 ul.governance li.governance { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question8 ul.vision-and-values li.vision-and-values { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question8 ul.leadership li.leadership { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question8 ul.financing-the-transition li.financing-the-transition { font-weight: bold; color: #F15D22; } #introEnd #intro-questionnaire #intro-questionnaire-question8 ul.not-sure li.not-sure { font-weight: bold; color: #F15D22; } #introEnd #camp1-nav { display: block; position: absolute; width: 10%; height: 17%; bottom: 5%; left: 45%; cursor: pointer; border-radius: 100%; } #intro-start { display: inline-block; border-radius: 10px; background-color: #F15D22; color: #FFF; text-decoration: none; padding: 0.5rem 1rem; cursor: pointer; position: absolute; bottom: 20px; right: 20px; } #intro-next { position: absolute; top: 50%; right: 20px; height: 60px; margin-top: -30px; width: 30px; } #intro-previous { position: absolute; top: 50%; left: 20px; height: 60px; margin-top: -30px; width: 30px; } #intro-next > span { width: 100%; height: 100%; display: block; cursor: pointer; margin-left: 25px; } #intro-previous > span { width: 100%; height: 100%; display: block; cursor: pointer; margin-left: 0px; } #intro-next > span > span.l { background-color: #F15D22; width: 4px; height: 50%; display: block; transform: rotate(-30deg); border-radius: 20px; } #intro-next > span > span.r { background-color: #F15D22; width: 4px; height: 50%; display: block; transform: rotate(30deg); border-radius: 20px; margin-top: -6px; } #intro-previous > span > span.l { background-color: #F15D22; width: 4px; height: 50%; display: block; transform: rotate(30deg); border-radius: 20px; } #intro-previous > span > span.r { background-color: #F15D22; width: 4px; height: 50%; display: block; transform: rotate(-30deg); border-radius: 20px; margin-top: -6px; } #introEnd #camp2-nav { display: block; position: absolute; width: 6%; height: 10%; top: 35%; left: 53%; } #introEnd #camp3-nav { display: block; position: absolute; width: 6%; height: 10%; top: 32%; left: 31%; } #introEnd #camp4-nav { display: block; position: absolute; width: 6%; height: 10%; top: 9%; left: 30%; } #introEnd #camp1-title { cursor: pointer; position: absolute; left: 58%; bottom: 8%; color: #FFF; text-shadow: 2px 2px 10px #000; } #introEnd #camp2-title { cursor: pointer; position: absolute; left: 59%; top: 35%; color: #FFF; text-shadow: 2px 2px 10px #000; font-size: 1.3rem; } #introEnd #camp3-title { cursor: pointer; position: absolute; left: 36%; top: 34%; color: #FFF; text-shadow: 2px 2px 10px #000; font-size: 1.1rem; } #introEnd #camp4-title { cursor: pointer; position: absolute; left: 35%; top: 11%; color: #FFF; text-shadow: 2px 2px 10px #000; font-size: 0.9rem; } #navCamp1 #camp1-family-title { cursor: pointer; position: absolute; left: 28%; bottom: 30%; color: #F15D22; text-shadow: 1px 1px 2px #FFF; } #navCamp1 #camp1-business-title { cursor: pointer; position: absolute; left: 75%; bottom: 30%; color: #b0d235; text-shadow: 1px 1px 2px #FFF; } #navCamp1 #camp1-ownership-title { cursor: pointer; position: absolute; left: 53%; bottom: 30%; color: #2F6EB1; text-shadow: 1px 1px 2px #FFF; } #navCamp1 #camp1-family-step1-nav { cursor: pointer; position: absolute; left: 28%; bottom: 32%; width: 130px; height: 100px; } #navCamp1 #camp1-business-step1-nav { cursor: pointer; position: absolute; left: 81%; bottom: 26%; width: 130px; height: 100px; } #navCamp1 #camp1-ownership-step1-nav { cursor: pointer; position: absolute; left: 52%; bottom: 34%; width: 130px; height: 100px; } .camp1, .camp2, .camp3, .camp4 { /*background-image: url('../images/camp1-bg.jpg');*/ background-repeat: no-repeat; /*background-size: cover;*/ z-index: 100; position: absolute; width: 100%; height: 100vh; } a.back-to-list { font-weight: bold; padding: 20px 0px; color: #2F6EB1; cursor: pointer; } a.back-to-list span { color: #2F6EB1; font-size: 1rem; padding: 5px; font-family: monospace; } .step-content { display: flex; position: absolute; top: 100px; right: 0rem; width: 40%; min-width: 725px; bottom: 25px; padding: 2rem; background-color: rgba(255,255,255,0.6); color: #444; overflow: scroll; overflow-x: hidden; flex-wrap: wrap; flex-direction: row; } .step-content.open { position: relative; width: 100%; height: calc(100vh - 100px); background-color: rgba(255,255,255,0.8); display: block; right: 0rem; } .step-content.open > h1 { display: none; } .step-content.open .progress-line > li { display: none; } .step-content.open .progress-line > li.active { display: block; } .step-content .progress-line li .preview { display: flex; cursor: pointer; border: solid 1px #DDD; background-color: #FFF; box-shadow: 2px 2px 8px #DDD; } .step-content .progress-line li.active .preview { border: solid 1px #2F6EB1; } .step-content .progress-line li.done .preview { border: solid 1px green; } .step-content .progress-line li .preview .thumbnail { flex-basis: 30%; align-self: center; padding: 0.5rem; box-sizing: border-box; } .step-content .progress-line li .preview .thumbnail img { width: 100%; height: auto; } .step-content .progress-line li .preview .description { flex-basis: 70%; padding: 1rem 1rem 1rem 2rem; box-sizing: border-box; font-size: 1.6rem; align-self: center; } .step-content a.close { position: absolute; top: 35px; right: 50px; color: #414042; font-weight: normal; text-align: center; font-size: 25px; padding: 2px; line-height: 15px; cursor: pointer; font-family: sans-serif; border: solid 1px #414042; display: block; width: 20px; height: 20px; padding: 2px; display: none; } .step-content h2 { flex-basis: 100%; display: block; color: #444; } .step-content p { color: #444; flex-basis: 80%; } .step-content ul.progress-line { flex-basis: 100%; position: relative; list-style-type: none; padding: 0px; margin: 0px; margin-top: 2rem; } .step-content ul.progress-line::before { content: ' '; position: absolute; top: 15px; left: 27px; border-left: dotted 5px #DDD; height: calc(100% - 100px); } .step-content ul.progress-line > li { padding: 0px; margin: 0px; position: relative; padding-left: 4rem; min-height: 70px; padding-bottom: 3rem; } .step-content ul.progress-line li span.item-number { position: absolute; left: 15px; top: 0rem; background-color: #888; color: #FFF; font-weight: bold; border-radius: 50%; display: flex; width: 30px; height: 30px; justify-content: center; align-items: center; cursor: pointer; } .step-content ul.progress-line li.active span.item-number { background-color: #2F6EB1; } .step-content ul.progress-line li.done span.item-number { background-color: green; } .step-content ul.progress-line li.active::before { content: ' '; position: absolute; top: 15px; left: 27px; border-left: solid 5px #2F6EB1; height: calc(100% - 15px); } .step-content ul.progress-line li.done::before { border-left: solid 5px green; content: ' '; position: absolute; top: 15px; left: 27px; height: calc(100% - 15px); } .step-content.open ul.progress-line li.active .item-content { display: flex; padding-bottom: 100px; flex-wrap: wrap; max-width: 90%; } .step-content.open ul.progress-line li.active .item-content blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } .step-content.open ul.progress-line li.active .item-content blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } .step-content.open ul.progress-line li.active .item-content blockquote p { display: inline; } .res-author, .res-date { display: none; } .step-content.open ul.progress-line li.active .item-content .cols { display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; } .step-content.open ul.progress-line li.active .item-content .col { flex-basis: 45%; margin: 0px 2%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; } .step-content.open ul.progress-line li.active .item-content .col img { max-width: 80%; height: auto; } .step-content.open ul.progress-line li.active .item-content .col iframe { width: 100%; height: calc(40vw/1.77); } .step-content.open ul.progress-line li.active .item-content .col iframe.tut { height: 150vh; } .step-content.open ul.progress-line li.active .item-content .block { display: block; } .step-content.open ul.progress-line li.active .item-content div.nav { display: flex; justify-content: flex-end; width: 200px; padding: 40px 0px; position: fixed; bottom: 50px; right: 20px; } .step-content.open ul.progress-line li.active .item-content div.nav a { display: inline-block; border-radius: 10px; background-color: #F15D22; color: #FFF; text-decoration: none; padding: 0.5rem 1rem; cursor: pointer; margin: 0px 10px; } .step-content.open ul.progress-line li.active .item-content div.nav a.hide { opacity: 0; } .step-content.open ul.progress-line li.active .item-content div.nav.nav2 a { background-color: #b0d235; } .step-content.open ul.progress-line li.active .item-content div.nav.nav3 a { background-color: #2F6EB1; } .step-content a.next, .step-content a.prev { display: inline-block; border-radius: 10px; background-color: #F15D22; color: #FFF; text-decoration: none; padding: 0.5rem 1rem; cursor: pointer; margin: 0px 10px; height: 20px; } .step-content a.next.path2, .step-content a.prev.path2 { background-color: #b0d235; } .step-content a.next.path3, .step-content a.prev.path3 { background-color: #2F6EB1; } .step-content ul.nav { list-style-type: none; padding: 0px; margin: 0px; } .step-content ul.nav li { float: left; padding: 0px; margin: 0px; } .step-content ul.nav li a { display: inline-block; border-radius: 10px; background-color: #444; color: #FFF; text-decoration: none; padding: 0.5rem 1rem; cursor: pointer; margin: 0px 10px 0px 0px; height: 20px; } .step-content ul.nav a { position: relative; } .step-content ul.nav a span.progress { height: 100%; display: block; position: absolute; left: 0; bottom: 0px; background-color: rgba(255,255,255,0.3); } .step-content ul.nav a span.progress.p1 { width: 1%; } .step-content ul.nav a span.progress.p2 { width: 2%; } .step-content ul.nav a span.progress.p3 { width: 3%; } .step-content ul.nav a span.progress.p4 { width: 4%; } .step-content ul.nav a span.progress.p5 { width: 5%; } .step-content ul.nav a span.progress.p6 { width: 6%; } .step-content ul.nav a span.progress.p7 { width: 7%; } .step-content ul.nav a span.progress.p8 { width: 8%; } .step-content ul.nav a span.progress.p9 { width: 9%; } .step-content ul.nav a span.progress.p10 { width: 10%; } .step-content ul.nav a span.progress.p11 { width: 11%; } .step-content ul.nav a span.progress.p12 { width: 12%; } .step-content ul.nav a span.progress.p13 { width: 13%; } .step-content ul.nav a span.progress.p14 { width: 14%; } .step-content ul.nav a span.progress.p15 { width: 15%; } .step-content ul.nav a span.progress.p16 { width: 16%; } .step-content ul.nav a span.progress.p17 { width: 17%; } .step-content ul.nav a span.progress.p18 { width: 18%; } .step-content ul.nav a span.progress.p19 { width: 19%; } .step-content ul.nav a span.progress.p20 { width: 20%; } .step-content ul.nav a span.progress.p21 { width: 21%; } .step-content ul.nav a span.progress.p22 { width: 22%; } .step-content ul.nav a span.progress.p23 { width: 23%; } .step-content ul.nav a span.progress.p24 { width: 24%; } .step-content ul.nav a span.progress.p25 { width: 25%; } .step-content ul.nav a span.progress.p26 { width: 26%; } .step-content ul.nav a span.progress.p27 { width: 27%; } .step-content ul.nav a span.progress.p28 { width: 28%; } .step-content ul.nav a span.progress.p29 { width: 29%; } .step-content ul.nav a span.progress.p30 { width: 30%; } .step-content ul.nav a span.progress.p31 { width: 31%; } .step-content ul.nav a span.progress.p32 { width: 32%; } .step-content ul.nav a span.progress.p33 { width: 33%; } .step-content ul.nav a span.progress.p34 { width: 34%; } .step-content ul.nav a span.progress.p35 { width: 35%; } .step-content ul.nav a span.progress.p36 { width: 36%; } .step-content ul.nav a span.progress.p37 { width: 37%; } .step-content ul.nav a span.progress.p38 { width: 38%; } .step-content ul.nav a span.progress.p39 { width: 39%; } .step-content ul.nav a span.progress.p40 { width: 40%; } .step-content ul.nav a span.progress.p41 { width: 41%; } .step-content ul.nav a span.progress.p42 { width: 42%; } .step-content ul.nav a span.progress.p43 { width: 43%; } .step-content ul.nav a span.progress.p44 { width: 44%; } .step-content ul.nav a span.progress.p45 { width: 45%; } .step-content ul.nav a span.progress.p46 { width: 46%; } .step-content ul.nav a span.progress.p47 { width: 47%; } .step-content ul.nav a span.progress.p48 { width: 48%; } .step-content ul.nav a span.progress.p49 { width: 49%; } .step-content ul.nav a span.progress.p50 { width: 50%; } .step-content ul.nav a span.progress.p51 { width: 51%; } .step-content ul.nav a span.progress.p52 { width: 52%; } .step-content ul.nav a span.progress.p53 { width: 53%; } .step-content ul.nav a span.progress.p54 { width: 54%; } .step-content ul.nav a span.progress.p55 { width: 55%; } .step-content ul.nav a span.progress.p56 { width: 56%; } .step-content ul.nav a span.progress.p57 { width: 57%; } .step-content ul.nav a span.progress.p58 { width: 58%; } .step-content ul.nav a span.progress.p59 { width: 59%; } .step-content ul.nav a span.progress.p60 { width: 60%; } .step-content ul.nav a span.progress.p61 { width: 61%; } .step-content ul.nav a span.progress.p62 { width: 62%; } .step-content ul.nav a span.progress.p63 { width: 63%; } .step-content ul.nav a span.progress.p64 { width: 64%; } .step-content ul.nav a span.progress.p65 { width: 65%; } .step-content ul.nav a span.progress.p66 { width: 66%; } .step-content ul.nav a span.progress.p67 { width: 67%; } .step-content ul.nav a span.progress.p68 { width: 68%; } .step-content ul.nav a span.progress.p69 { width: 69%; } .step-content ul.nav a span.progress.p70 { width: 70%; } .step-content ul.nav a span.progress.p71 { width: 71%; } .step-content ul.nav a span.progress.p72 { width: 72%; } .step-content ul.nav a span.progress.p73 { width: 73%; } .step-content ul.nav a span.progress.p74 { width: 74%; } .step-content ul.nav a span.progress.p75 { width: 75%; } .step-content ul.nav a span.progress.p76 { width: 76%; } .step-content ul.nav a span.progress.p77 { width: 77%; } .step-content ul.nav a span.progress.p78 { width: 78%; } .step-content ul.nav a span.progress.p79 { width: 79%; } .step-content ul.nav a span.progress.p80 { width: 80%; } .step-content ul.nav a span.progress.p81 { width: 81%; } .step-content ul.nav a span.progress.p82 { width: 82%; } .step-content ul.nav a span.progress.p83 { width: 83%; } .step-content ul.nav a span.progress.p84 { width: 84%; } .step-content ul.nav a span.progress.p85 { width: 85%; } .step-content ul.nav a span.progress.p86 { width: 86%; } .step-content ul.nav a span.progress.p87 { width: 87%; } .step-content ul.nav a span.progress.p88 { width: 88%; } .step-content ul.nav a span.progress.p89 { width: 89%; } .step-content ul.nav a span.progress.p90 { width: 90%; } .step-content ul.nav a span.progress.p91 { width: 91%; } .step-content ul.nav a span.progress.p92 { width: 92%; } .step-content ul.nav a span.progress.p93 { width: 93%; } .step-content ul.nav a span.progress.p94 { width: 94%; } .step-content ul.nav a span.progress.p95 { width: 95%; } .step-content ul.nav a span.progress.p96 { width: 96%; } .step-content ul.nav a span.progress.p97 { width: 97%; } .step-content ul.nav a span.progress.p98 { width: 98%; } .step-content ul.nav a span.progress.p99 { width: 99%; } .step-content ul.nav a span.progress.p100 { width: 100%; } .step-content ul.nav.step1 a.step1 { background-color: #F15D22; } .step-content ul.nav.step2 a.step2 { background-color: #F15D22; } .step-content ul.nav.step3 a.step3 { background-color: #F15D22; } .step-content ul.nav.step4 a.step4 { background-color: #F15D22; } .step-content ul.nav.step5 a.step5 { background-color: #F15D22; } .camp1path2 .step-content ul.nav.step1 a.step1 { background-color: #b0d235; } .camp1path2 .step-content ul.nav.step2 a.step2 { background-color: #b0d235; } .camp1path2 .step-content ul.nav.step3 a.step3 { background-color: #b0d235; } .camp1path2 .step-content ul.nav.step4 a.step4 { background-color: #b0d235; } .camp1path2 .step-content ul.nav.step5 a.step5 { background-color: #b0d235; } .camp1path3 .step-content ul.nav.step1 a.step1 { background-color: #2F6EB1; } .camp1path3 .step-content ul.nav.step2 a.step2 { background-color: #2F6EB1; } .camp1path3 .step-content ul.nav.step3 a.step3 { background-color: #2F6EB1; } .camp1path3 .step-content ul.nav.step4 a.step4 { background-color: #2F6EB1; } .camp1path3 .step-content ul.nav.step5 a.step5 { background-color: #2F6EB1; } .camp2path2 .step-content ul.nav.step1 a.step1 { background-color: #b0d235; } .camp2path2 .step-content ul.nav.step2 a.step2 { background-color: #b0d235; } .camp2path2 .step-content ul.nav.step3 a.step3 { background-color: #b0d235; } .camp2path2 .step-content ul.nav.step4 a.step4 { background-color: #b0d235; } .camp2path2 .step-content ul.nav.step5 a.step5 { background-color: #b0d235; } .camp2path2 .step-content ul.nav.step6 a.step6 { background-color: #b0d235; } .camp2path3 .step-content ul.nav.step1 a.step1 { background-color: #2F6EB1; } .camp2path3 .step-content ul.nav.step2 a.step2 { background-color: #2F6EB1; } .camp2path3 .step-content ul.nav.step3 a.step3 { background-color: #2F6EB1; } .camp2path3 .step-content ul.nav.step4 a.step4 { background-color: #2F6EB1; } .camp2path3 .step-content ul.nav.step5 a.step5 { background-color: #2F6EB1; } .camp2path3 .step-content ul.nav.step6 a.step6 { background-color: #2F6EB1; } .camp3path2 .step-content ul.nav.step1 a.step1 { background-color: #b0d235; } .camp3path2 .step-content ul.nav.step2 a.step2 { background-color: #b0d235; } .camp3path2 .step-content ul.nav.step3 a.step3 { background-color: #b0d235; } .camp3path2 .step-content ul.nav.step4 a.step4 { background-color: #b0d235; } .camp3path2 .step-content ul.nav.step5 a.step5 { background-color: #b0d235; } .camp3path2 .step-content ul.nav.step6 a.step6 { background-color: #b0d235; } .camp3path3 .step-content ul.nav.step1 a.step1 { background-color: #2F6EB1; } .camp3path3 .step-content ul.nav.step2 a.step2 { background-color: #2F6EB1; } .camp3path3 .step-content ul.nav.step3 a.step3 { background-color: #2F6EB1; } .camp3path3 .step-content ul.nav.step4 a.step4 { background-color: #2F6EB1; } .camp3path3 .step-content ul.nav.step5 a.step5 { background-color: #2F6EB1; } .camp3path3 .step-content ul.nav.step6 a.step6 { background-color: #2F6EB1; } .camp4path2 .step-content ul.nav.step1 a.step1 { background-color: #b0d235; } .camp4path2 .step-content ul.nav.step2 a.step2 { background-color: #b0d235; } .camp4path2 .step-content ul.nav.step3 a.step3 { background-color: #b0d235; } .camp4path2 .step-content ul.nav.step4 a.step4 { background-color: #b0d235; } .camp4path2 .step-content ul.nav.step5 a.step5 { background-color: #b0d235; } .camp4path2 .step-content ul.nav.step6 a.step6 { background-color: #b0d235; } .camp4path3 .step-content ul.nav.step1 a.step1 { background-color: #2F6EB1; } .camp4path3 .step-content ul.nav.step2 a.step2 { background-color: #2F6EB1; } .camp4path3 .step-content ul.nav.step3 a.step3 { background-color: #2F6EB1; } .camp4path3 .step-content ul.nav.step4 a.step4 { background-color: #2F6EB1; } .camp4path3 .step-content ul.nav.step5 a.step5 { background-color: #2F6EB1; } .camp4path3 .step-content ul.nav.step6 a.step6 { background-color: #2F6EB1; } .step-content.open ul.progress-line li.active .item-content .podcast > img.podcast { float: left; margin-right: 3rem; margin-bottom: 5rem; } .step-content.open ul.progress-line li.active .item-content iframe { width: 80vw; height: calc(80vw/1.77); } .step-content.open ul.progress-line li.active .item-content .additional-resources ul { margin-left: 0px; padding-left: 0px; } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li { list-style-type: none; position: relative; display: flex; align-items: center; padding-left: 60px; min-height: 50px; } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li:before { content: ' '; position: absolute; width: 40px; height: 40px; background-repeat: no-repeat; background-size: cover; left: 0px; } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li.pdf:before { background-image: url('../images/pdf.svg'); } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li.link:before { background-image: url('../images/link.svg'); } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li.video:before { background-image: url('../images/video.svg'); } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li.podcast:before { background-image: url('../images/podcast.svg'); } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li.excel:before { background-image: url('../images/excel.svg'); } .step-content.open ul.progress-line li.active .item-content .additional-resources { flex-basis: 100%; } .step-content.open ul.progress-line li.active .item-content .additional-resources ul li a { color: #F15D22; } #skip { position: fixed; right: 2rem; bottom: 6rem; display: inline-block; border-radius: 10px; background-color: #F15D22; color: #FFF; text-decoration: none; padding: 0.5rem 1rem; cursor: pointer; z-index: 100; } #intergenerational-family-journey-app-container.showContent1 #skip.skip11 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip12 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip13 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip21 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip22 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip23 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip31 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip32 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip33 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip41 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip42 { display: none; } #intergenerational-family-journey-app-container.showContent1 #skip.skip43 { display: none; } #intergenerational-family-journey-app-container.showContent0 #camp1path1 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp1path2 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp1path3 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp2path1 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp2path2 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp2path3 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp3path1 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp3path2 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp3path3 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp4path1 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp4path2 { right: -800px; } #intergenerational-family-journey-app-container.showContent0 #camp4path3 { right: -800px; } #intergenerational-family-journey-app-container.showContent1 #camp1path1 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp1path2 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp1path3 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp2path1 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp2path2 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp2path3 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp3path1 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp3path2 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp3path3 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp4path1 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp4path2 { right: 0px; transition: all 2s; } #intergenerational-family-journey-app-container.showContent1 #camp4path3 { right: 0px; transition: all 2s; } .camp5 p { position: absolute; top: 15%; background-color: rgba(255, 255, 255, 0.8); padding: 2rem; width: 350px; left: 10%; } footer.select-path { position: fixed; bottom: 25px; height: 50px; display: flex; flex-direction: row; background-color: #FFFFFF; padding: 0px; } footer.select-path div.camp { flex-basis: 25%; position: relative; display: flex; flex-direction: row; align-items: center; height: 25px; flex-wrap: wrap; margin: 0px; } footer.select-path div.camp h3 { flex-basis: 100%; text-align: center; padding: 5px; margin: 0px; color: #000; background-color: rgba(255, 255, 255, 0.7); border-right: solid 1px #CCC; } footer.select-path div.camp.active h3 { background-color: #444; color: #FFF; } footer.select-path div.camp.not-active { opacity: 0.7; } footer.select-path div.camp a { height: 25px; align-content: center; cursor: pointer; display: block; color: #FFF; text-align: center; flex-basis: 33.3%; } footer.select-path div.camp a.family { background-color: #f15d2285; } footer.select-path div.camp a.business { background-color: #b0d23585; } footer.select-path div.camp a.ownership { background-color: #2F6EB185; } footer.select-path div.camp a:hover { height: 30px; margin-top: -5px; } footer.select-path div.camp a.active { color: #FFF !important; background-color: #444 !important; } footer.select-path div.camp a.active:hover { height: 25px; margin-top: 0px; } #survey { position: absolute; z-index: 1000; left: 2rem; bottom: 2rem; } #start-survey { display: inline-block; border-radius: 10px; background-color: #F15D22; color: #FFF; text-decoration: none; padding: 0.5rem 1rem; cursor: pointer; } footer { position: fixed; bottom: 0px; height: 15px; color: #FFF; background-color: rgba(0,0,0,0.5); display: flex; overflow: hidden; padding: 5px; width: 100%; font-size: 12px; z-index: 105; } footer.open { height: auto; background-color: rgba(0, 0, 0, 0.8); padding: 2rem; box-sizing: border-box; } /* footer.open .credits a#credits { display: none; } */ footer.open .credits { font-size: 0.9rem; font-family: Tinos, Arial, Helvetica, sans-serif; } footer .credits { flex-basis: 50%; text-align: left; padding-left: 10px; } footer .credits a#credits { cursor: pointer; } footer .copy { flex-basis: 50%; text-align: right; padding-right: 10px; } .transcript { display: none; } .audio { text-align: center; } #drawing { margin: 0 auto; width: 1024px; height: 1024px; } svg.circles { width: 600px; height: 600px; } .tile1 #circles-model { text-align: center; } .tile1 svg.circles { text-align: center; width: 640px; height: 640px; } .tile1 p.source { color: gray; font-style: italic; font-size: 14px; text-align: right; margin-top: -50px; } #personal-life-cycles { zoom: 0.80; } #personal-life-cycles svg.circles { width: 100%; height: 100%; } #personal-life-cycles { position: relative; } #personal-life-cycles, #personal-life-axis { margin: 0 auto; width: 710px; height: 690px; } #personal-life-cycles svg.circles .axis .axis-element { font-size: 12px; stroke-width: 0; } #personal-life-cycles svg.circles .axis .label { font-size: 14px; stroke-width: 0; font-weight: bold; } #personal-life-axis { margin: 0 auto; width: 800px; height: 580px; position: relative; } #personal-life-axis .timeline-axis { width: 100%;} #personal-life-axis .timeline-transform-point-individual { right: 0px; bottom: 0px; height: 56%; width: 114%; transform: rotate(25deg); -webkit-transform:rotate(25deg); } /*#personal-life-axis .timeline-transform-point-individual .timeline-individual { width: 1200px; height: 90px; }*/ #personal-life-axis .timeline-transform-point-individual .timeline-individual ol li ul { font-size: 9px; padding-top: 5px; } #personal-life-axis .timeline-family { width: 115%; height: 90px; bottom: -140px; right: -5px; position: absolute; } #personal-life-axis .timeline-family li.timeline-period strong { font-size: 10px; padding-top: 15px; } /*#personal-life-axis .timeline-axis-center { width: 150px; height: 150px; bottom: 60px; }*/ #personal-life-axis .schema.timeline { color: #FFF; position: relative; } #personal-life-axis .schema.timeline ul, .schema.timeline ol { padding: 0; margin: 0; list-style-type: none; } #personal-life-axis .schema.timeline strong { text-transform: uppercase; } #personal-life-axis .schema.timeline .timeline-period { font-size: 10px; float: left; width: 15%; margin: 0 -4% 0 0; padding: 1% 2.4% 0 2.7%; height: 100%; background-size: 100% auto; background-repeat: no-repeat; cursor: pointer; opacity: 0; } #personal-life-axis .schema.timeline .timeline-age { position: absolute; padding-top: 13px; bottom: -15px; background: url('../images/unit2-timeline-age.png') center top no-repeat; } #personal-life-axis .schema.timeline .timeline-period ul { list-style-type: disc; font-size: 6px; } #personal-life-axis .schema.timeline .timeline-age { color: #6d6f71; font-weight: bold; } #personal-life-axis .timeline-axis { width: 100%; height: 100%; margin: 0 auto; position: absolute; right: 0; bottom: 0px; } #personal-life-axis .timeline-axis-center { border-radius: 500px; width: 100px; height: 100px; background: #888; position: absolute; bottom: 60px; right: -30px; box-shadow: 3px 3px 5px #555; } #personal-life-axis .schema.timeline ol{ height: 100%; } #personal-life-axis .timeline-transform-point-individual { transform: rotate(25deg); bottom: -545px; right: -250px; } #personal-life-axis .schema.timeline-individual { width: 830px; height: 55px; position: absolute; right: 35px; bottom: 20px; } #personal-life-axis .schema.timeline-individual .timeline-age{ margin-left: 30%; transform: rotate(-25deg); } #personal-life-axis .schema.timeline-individual .timeline-period ul{ padding: 0; padding-right: 10%; margin: 0; list-style-type: none; } #personal-life-axis .schema.timeline-individual .timeline-period li{ padding-left: 0.5em; } #personal-life-axis .schema.timeline-individual .timeline-period.timeline-adolescence{ background-image: url(../images/unit2-timeline/unit2-timeline-individual-1.png); } #personal-life-axis .schema.timeline-individual .timeline-period.timeline-youngadult{ background-image: url(../images/unit2-timeline/unit2-timeline-individual-2.png); } #personal-life-axis .schema.timeline-individual .timeline-period.timeline-familyfounder{ background-image: url(../images/unit2-timeline/unit2-timeline-individual-3.png); } #personal-life-axis .schema.timeline-individual .timeline-period.timeline-middleage{ background-image: url(../images/unit2-timeline/unit2-timeline-individual-4.png); } #personal-life-axis .schema.timeline-individual .timeline-period.timeline-preretirement{ background-image: url(../images/unit2-timeline/unit2-timeline-individual-5.png); } #personal-life-axis .schema.timeline-individual .timeline-period.timeline-goldenager{ background-image: url(../images/unit2-timeline/unit2-timeline-individual-6.png); } /*#personal-life-axis .schema.timeline-family { width: 115%; height: 55px; position: absolute; right: 200px; bottom: 100px; }*/ #personal-life-axis .schema.timeline-family .timeline-period{ text-align: center; padding-top: 0.25%; } #personal-life-axis .schema.timeline-family .timeline-period.timeline-single{ background-image: url(../images/unit2-timeline/unit2-timeline-family-1.png); } #personal-life-axis .schema.timeline-family .timeline-period.timeline-couple{ background-image: url(../images/unit2-timeline/unit2-timeline-family-2.png); } #personal-life-axis .schema.timeline-family .timeline-period.timeline-couplechildren{ background-image: url(../images/unit2-timeline/unit2-timeline-family-3.png); } #personal-life-axis .schema.timeline-family .timeline-period.timeline-coupleadults{ background-image: url(../images/unit2-timeline/unit2-timeline-family-4.png); } #personal-life-axis .schema.timeline-family .timeline-period.timeline-grandparents{ background-image: url(../images/unit2-timeline/unit2-timeline-family-5.png); } #personal-life-axis .schema.timeline-family .timeline-period strong{ display: table-cell; vertical-align: middle; height: 35px; width: 200px; font-size: 8px; text-align: center; } #personal-life-axis .timeline .timeline-period{ position: relative; top: 0%; transition: top 0.5s; } #personal-life-axis .timeline .timeline-period.emphase-current { position: relative; top: -20%; } #personal-life-axis .timeline-emphase { position: absolute; right: 60px; top: 150px; z-index: 100; padding: 20px; background: #e84324; border-radius: 20px; font-size: 14px; color: #FFF; display: none; } #family-business-life-cycles { margin: 0 auto; width: 710px; height: 690px; } #family-business-life-cycles svg { background-color: transparent; width: 100%; height: 100%; } #family-business-life-cycles svg.circles .axis .family-axis line { stroke: #c30000; stroke-width: 3px; } #family-business-life-cycles svg.circles .axis .individual-axis line { stroke: #c30000; stroke-width: 3px; } #family-business-life-cycles svg.circles .axis .label { font-size: 14px; stroke: #333; } #family-business-life-cycles svg.circles .axis text { font-size: 14px; fill: #333; } #family-business-life-cycles svg.circles .axis .business-axis line { stroke: blue; stroke-width: 3px; } #family-business-life-cycles svg.circles .axis .industry-axis line { stroke: blue; stroke-width: 3px; } #family-business-life-cycles svg.circles .axis .ownership-axis line { stroke: #c09100; stroke-width: 3px; } #comparing-life { height: 335px; } #comparing-life h2 { color: #2090c0; text-shadow: 1px 1px 2px #888; } #comparing-life .timeline ul { width: 1020px; font-size: 0.0001px; } #comparing-life #timeline-ages li { background-color: #7f7f7f; width: 55px; height: 28px; font-size: 18px; color: #fff; font-weight: bold; display: inline-block; list-style-type: none; } #comparing-life #timeline-ages li.legend { padding-left: 5px; } #comparing-life .legend .col-md-3 { float: left; width: 25%; } #comparing-life .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, #comparing-life .legend .young-adult .circle { background-color: #9dc3e6; } #comparing-life .legend .young-adult h3 { color: #9dc3e6; } #comparing-life #timeline-1965 .family-building, #comparing-life #timeline-2015 .family-building, #comparing-life .legend .family-building .circle { background-color: #ffd966; } #comparing-life .legend .family-building h3 { color: #ffd966; } #comparing-life #timeline-1965 .middle-age, #comparing-life #timeline-2015 .middle-age, #comparing-life .legend .middle-age .circle { background-color: #a9d18e; } #comparing-life .legend .middle-age h3 { color: #a9d18e; } #comparing-life #timeline-1965 .golden-age, #comparing-life #timeline-2015 .golden-age, #comparing-life .legend .golden-age .circle { background-color: #f4b183; } #comparing-life .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 p.source { text-align: right; padding-bottom: 60px; } #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; } #comparing-life .legend .circle { margin: 0 auto; box-shadow: 1px 1px 10px #888; border-radius: 50%; width: 120px; height: 120px; background-image: url('../images/3circles/life-cycle-activity-sprite.png'); background-repeat: no-repeat; } #comparing-life .legend .young-adult .circle { background-position: 32px 14px; } #comparing-life .legend .family-building .circle { background-position: -252px 14px; } #comparing-life .legend .middle-age .circle { background-position: -398px 14px; } #comparing-life .legend .golden-age .circle { background-position: -830px 14px; } #comparing-life .legend .circle { zoom: 0.8; } #comparing-life .legend h3 { margin-top: 10px; text-shadow: 1px 1px 5px #000; } .audio.svg-sync { display: flex; justify-content: space-between; padding: 1rem; align-items: center; } .audio.svg-sync audio { margin-left: 2rem; } svg.circles ellipse, svg.circles g.as-circle path { stroke-width: 0; fill-opacity: 0.35; stroke-opacity: 1; } svg.circles text { font-family: Arial; font-size: 48px; text-anchor: start; } svg.circles g.family { fill: #ef6565; stroke: #c30000; } svg.circles g.family tspan { fill: #c30000; } svg.circles g.family path { stroke: #c30000; } svg.circles g.business { fill: #00acff; stroke: #006ec3; } svg.circles g.business tspan { fill: #006ec3; } svg.circles g.business path { stroke: #006ec3; } svg.circles g.ownership { fill: #fdff00; stroke: #c09100; } svg.circles g.ownership tspan { fill: #c09100; } svg.circles g.ownership path { fill: #c09100; } svg.circles g.border-plain ellipse, svg.circles g.as-circle path.border-plain { stroke-width: 4px; } svg.circles g.border-dashed ellipse, svg.circles g.as-circle path.border-dashed { stroke-width: 4px; stroke-dasharray: 18,10; } svg.circles g.text-over text { text-anchor: middle; } svg.circles g.persons rect, svg.circles g.persons circle, svg.circles g.persons ellipse { stroke: black; stroke-width: 2px; fill: white; fill-opacity: 1; stroke-opacity: 1; } svg.circles g.persons .male { stroke: #00f; } svg.circles g.persons .female { stroke: #f0f; } svg.circles g.persons text { font-family: Arial; font-size: 12px; text-anchor: middle; } svg.circles g.zoneNumber text.number { text-anchor: middle; font-size: 55px; } div#who-is-family ul.slider { background-image: url('../images/bg-slider.png'); } #who-is-family h3 { font-weight: bold; } #who-is-family span.letter { font-weight: bold; display: block; padding-bottom: 20px; } #who-is-family #next p { text-align: center; } #who-is-family #graph-score { display: none; } #who-is-family #graph-info { display: block; } #who-is-family #solving { position: relative; } #who-is-family #solving #graphic-print { position: relative; width: 400px; height: 400px; float: left; } #who-is-family #solving #graphic-print img { position: absolute; top: 0px; left: 0px; } div#who-is-family div p span.left { margin: 0px 0px 30px 30px; display: block; float: left; position: relative; width: 320px; border: solid 2px #AAA; padding: 20px; border-radius: 20px; } div#who-is-family div p span.right { margin: 0px 0px 30px 155px; display: block; float: left; position: relative; width: 320px; border: solid 2px #AAA; padding: 20px; border-radius: 20px; } div#who-is-family ul.slider { padding: 0px; height: 42px; overflow: hidden; list-style-type: none; background-repeat: no-repeat; background-position: 12px top; width: 825px; /*background-color: #FFF;*/ margin-left: auto; margin-right: auto; } div#who-is-family ul.slider.answer-3 { background-position: 12px -45px; } div#who-is-family ul.slider.answer-2 { background-position: 12px -89px; } div#who-is-family ul.slider.answer-1 { background-position: 12px -133px; } div#who-is-family ul.slider.answer0 { background-position: 12px -177px; } div#who-is-family ul.slider.answer1 { background-position: 12px -221px; } div#who-is-family ul.slider.answer2 { background-position: 12px -265px; } div#who-is-family ul.slider.answer3 { background-position: 12px -308px; } div#who-is-family ul.slider.answer-3 .first a { display: none; } div#who-is-family ul.slider.answer-2 .second a { display: none; } div#who-is-family ul.slider.answer-1 .third a { display: none; } div#who-is-family ul.slider.answer0 .fourth a { display: none; } div#who-is-family ul.slider.answer1 .fifth a { display: none; } div#who-is-family ul.slider.answer2 .sixth a { display: none; } div#who-is-family ul.slider.answer3 .seventh a { display: none; } div#who-is-family ul.slider li { position: relative; float: left; display: block; width: 126px; height: 40px; cursor: pointer; list-style-type: none; } div#who-is-family ul.slider li.seventh { width: 60px; } div#who-is-family ul.slider li a { display: block; width: 114px; height: 40px; text-decoration: none; margin: 7px 0px 0px 0px; /*background-color: #FFF;*/ padding: 5px 0px 0px 27px; font-weight: bold; } #who-is-family .instruction { text-align: center; } #who-is-family p.button a { margin-bottom: 10px; display: block; text-decoration: none; background-color: #F15D22; font-weight: bold; padding: 6px 20px; text-align: center; width: 120px; text-shadow: 0 1px 1px rgb(0 0 0 / 30%); border-radius: 0.5em; box-shadow: 0 1px 2px rgb(0 0 0 / 20%); color: #FFF; border: solid 1px #F15D22; cursor: pointer; margin-left: auto; margin-right: auto; } #who-is-family #graphic { cursor: pointer; position: relative; width: 400px; height: 400px; background-image: url('../images/graphic.jpg'); background-repeat: no-repeat; float: left; } #who-is-family #graphic div { display: block; position: absolute; } #who-is-family #legend { float: left; width: 50%; } #who-is-family #legend .remember { clear: both; margin-top: 0px; padding-top: 0px; margin-left: 40px; } #who-is-family #legend ul li { list-style-type: none; cursor: pointer; clear: both; } #who-is-family #legend ul li.icon1 span { width: 15px; margin-right: 15px; background-position: 4px 0px; padding-bottom: 20px; } #who-is-family #legend ul li.icon2 span { width: 20px; background-position: -15px 0px; padding-bottom: 20px; } #who-is-family #legend ul li.icon3 span { width: 20px; background-position: -35px 0px; padding-bottom: 20px; } #who-is-family #legend ul li.icon4 span { width: 24px; margin-right: 6px; background-position: -58px 0px; padding-bottom: 20px; } #who-is-family #legend ul li.icon5 span { width: 20px; background-position: -82px 0px; padding-bottom: 70px; } #who-is-family #legend ul li span { margin-top: 3px; margin-right: 10px; display: block; float: left; height: 15px; overflow: hidden; background-image: url('../images/icons.png'); background-repeat: no-repeat; } #who-is-family #legend ul li span.acc { margin: 0px !important; width: 40px !important; display: block; float: left; height: 15px; overflow: visible; background-image: none; font-weight: bold; } #who-is-family div#graphic div span { margin-right: 5px; display: block; float: left; height: 15px; overflow: hidden; background-image: url('../images/icons.png'); background-repeat: no-repeat; } #who-is-family div#graphic div.icon1 span { width: 15px; background-position: 4px 0px; } #who-is-family div#graphic div.icon2 span { width: 20px; background-position: -15px 0px; } #who-is-family div#graphic div.icon3 span { width: 20px; background-position: -35px 0px; } #who-is-family div#graphic div.icon4 span { width: 24px; background-position: -58px 0px; } #who-is-family div#graphic div.icon5 span { width: 20px; background-position: -82px 0px; } #who-is-family p.howto1, #who-is-family p.howto2 { position: absolute; font-weight: bold; margin-left: 100px; z-index: 999; width: 300px; bottom: 0px; color: red; } #who-is-family #review { clear: both; float: left; } #who-is-family #redo { float: left; margin-left: 20px; } #who-is-family #solving { height: 400px; } #ownership-ellipses { width: 910px; height: 630px; margin: 0 auto; } #ownership-ellipses svg.ellipses ellipse { stroke: #223a82; stroke-width:2px; stroke-dasharray: 3,3; opacity: 0; } #ownership-ellipses svg.ellipses g.ellipse-behaviors ellipse { fill: #e2e1f1; } #ownership-ellipses svg.ellipses g.ellipse-ownership ellipse { fill: #d5d3e9; } #ownership-ellipses svg.ellipses g.ellipse-family ellipse { fill: #c7c7e3; } #ownership-ellipses svg.ellipses g.ellipse-values ellipse { fill: #babade; } #ownership-ellipses svg.ellipses line { stroke: #444; stroke-width: 1px; stroke-linecap: round;} #ownership-ellipses svg.ellipses line.line-ellipse { opacity: 0; stroke: #223a82; stroke-width: 4px; } #ownership-ellipses svg.ellipses text { opacity: 0; fill: #223a82; font-size: 18px; text-anchor:middle;} #ownership-ellipses svg.ellipses .centered-svg { text-anchor:middle;} #ownership-ellipses svg.ellipses text.title { font-size: 21px; font-weight: bold; text-transform: uppercase; } #ownership-ellipses svg.ellipses text.subtitle { font-size: 18px; text-anchor: center; fill: #444; } #ownership-ellipses svg.ellipses text.values { font-size: 16px; } #ownership-ellipses svg.ellipses g.ellipse-behaviors text.values { fill: darkblue; } #ownership-ellipses .ellipse.ellipse-values ellipse { opacity: 0.3; } #ownership-ellipses .ellipse.ellipse-values text { opacity: 0.3; } #ownership-ellipses.s1 .ellipse.ellipse-values ellipse { opacity: 1 !important; } #ownership-ellipses.s1 .ellipse.ellipse-values text { opacity: 1 !important; } #ownership-ellipses.s2 .ellipse-values line { opacity: 1 !important; } #ownership-ellipses.s2 .ellipse-family ellipse { opacity: 1 !important; } #ownership-ellipses.s2 .ellipse-family text.title { opacity: 1 !important; } #ownership-ellipses.s3 .ellipse-family line { opacity: 1 !important; } #ownership-ellipses.s3 .ellipse-ownership ellipse { opacity: 1 !important; } #ownership-ellipses.s3 .ellipse-ownership text.title { opacity: 1 !important; } /*#ownership-ellipses.s3 .ellipse-ownership text.value { opacity: 1 !important; }*/ #ownership-ellipses.s4 .ellipse-family text.value { opacity: 0.2 !important; } #ownership-ellipses.s4 .ellipse-family text.value.value-sincerity { font-weight: bold !important; opacity: 1 !important; } #ownership-ellipses.s5 .ellipse-ownership line { opacity: 1 !important; } #ownership-ellipses.s5 .ellipse-behaviors ellipse { opacity: 1 !important; } #ownership-ellipses.s5 .ellipse-behaviors text.title { opacity: 1 !important; } #ownership-ellipses.s5 .ellipse-behaviors text.subtitle { opacity: 1 !important; } #ownership-ellipses.s5 .ellipse-behaviors line.line-subtitle { opacity: 1 !important; } #ownership-ellipses.s6 .ellipse-ownership text.value { opacity: 0.2 !important; } #ownership-ellipses.s6 .ellipse-ownership text.value.value-integrity { opacity: 1 !important; } #ownership-ellipses.s7 .ellipse-behaviors text.value { opacity: 1 !important; } #ownership-ellipses.s8 .ellipse-behaviors .subtitle-interacting { font-weight: bold !important; } #ownership-ellipses.s9 .ellipse-behaviors .subtitle-making-decision { font-weight: bold !important; } #ownership-ellipses.s10 .ellipse-behaviors .subtitle-problem-solving { font-weight: bold !important; } #ownership-ellipses.s11 .ellipse-behaviors .subtitle-interacting { font-weight: normal !important; } #ownership-ellipses.s11 .ellipse-behaviors .subtitle-making-decision { font-weight: normal !important; } #ownership-ellipses.s11 .ellipse-behaviors .subtitle-problem-solving { font-weight: normal !important; } #ownership-ellipses.s11 .ellipse-family text.value { opacity: 1 !important; } #ownership-ellipses.s11 .ellipse-ownership text.value { opacity: 1 !important; } .slide3-2 { display: flex; flex-wrap: wrap; } .slide3-2 .power-element { background-color: #e2e1f1; min-height: 150px; display: table; flex-basis: 315px; margin: 20px; border-radius: 100px; border: 2px dotted #2c3696; } .slide3-2 .power-element .element-label { text-align: center; display: table-cell; vertical-align: middle; color: #2c3696; padding: 5px 25px; text-transform: uppercase; font-size: 22px; font-weight: bold; } .slide3-2 .element-description { padding-top: 1.5em; flex-basis: calc(100% - 400px); } .slide3-2 .element-description p { font-size: 22px; } /* OWNERSHIP STAGES */ div.ownershipstages { position: relative; width: 1100px; height: 850px; background-image: url('../images/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('../images/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('../images/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('../images/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('../images/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('../images/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; } div.ownershipstages .animatedCompass { display: none; } div.ownershipstages .workingin { opacity: 0; } div.ownershipstages .workingon { opacity: 0; } div.ownershipstages .shortterm { opacity: 0; } div.ownershipstages .longterm { opacity: 0; } div.ownershipstages .core .q1 ul li { opacity: 0; } div.ownershipstages .core .q2 ul li { opacity: 0; } div.ownershipstages .core .q3 ul li { opacity: 0; } div.ownershipstages .core .q4 ul li { opacity: 0; } div.ownershipstages .growth .professional { opacity: 0; } div.ownershipstages .growth .managerial { opacity: 0; } div.ownershipstages .growth .entrepreneurial { opacity: 0; } div.ownershipstages * { -webkit-transition: all 2.5s ease-in-out; -moz-transition: all 2.5s ease-in-out; -o-transition: all 2.5s ease-in-out; transition: all 2.5s ease-in-out; } div.ownershipstages.s1 .animatedCompass.i1 { display: block; } div.ownershipstages.s2 .animatedCompass.i1 { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); } div.ownershipstages.s3 .core .growth h3.entrepreneurial { opacity: 1; } div.ownershipstages.s4 .animatedCompass.i1 { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); } div.ownershipstages.s5 .core .q4 ul li.item1 { opacity: 1; } div.ownershipstages.s6 .core .q4 ul li.item2 { opacity: 1; } div.ownershipstages.s7 .core .q4 ul li.item3 { opacity: 1; } div.ownershipstages.s8 .core .q4 ul li.item4 { opacity: 1; } div.ownershipstages.s9 .core .q3 ul li.item5 { opacity: 1; } div.ownershipstages.s10 .core .q3 ul li.item4 { opacity: 1; } div.ownershipstages.s11 .core .q3 ul li.item2 { opacity: 1; } div.ownershipstages.s12 .animatedCompass.i1 { transform:rotate(271deg); -webkit-transform:rotate(271deg); -moz-transform:rotate(271deg); -o-transform:rotate(271deg); } div.ownershipstages.s13 .core .growth h3.managerial { opacity: 1; } div.ownershipstages.s14 .core .growth h3.professional { opacity: 1; } div.ownershipstages.s15 .animatedCompass.i1 { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } div.ownershipstages.s16 .animatedCompass.i1 { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); } div.ownershipstages.s17 .animatedCompass.i1 { transform:rotate(271deg); -webkit-transform:rotate(271deg); -moz-transform:rotate(271deg); -o-transform:rotate(271deg); } div.ownershipstages.s18 .workingin { opacity: 1; } div.ownershipstages.s19 .animatedCompass.i1 { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); } div.ownershipstages.s20 .workingon { opacity: 1; } div.ownershipstages.s21 .animatedCompass.i1 { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); } div.ownershipstages.s22 .animatedCompass.i1 { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } div.ownershipstages.s23 .shortterm { opacity: 1; } div.ownershipstages.s24 .longterm { opacity: 1; } div.ownershipstages.s24 .animatedCompass.i2 { display: block; } div.ownershipstages.s25 .animatedCompass.i2 { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); } div.ownershipstages.s25 .animatedCompass.i1 { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); } div.ownershipstages.s26 .animatedCompass.i2 { transform:rotate(271deg); -webkit-transform:rotate(271deg); -moz-transform:rotate(271deg); -o-transform:rotate(271deg); } div.ownershipstages.s27 .core .q1 ul li.item1 { opacity: 1; } div.ownershipstages.s28 .core .q1 ul li.item2 { opacity: 1; } div.ownershipstages.s29 .animatedCompass.i2 { display: none; } div.ownershipstages.s29 .animatedCompass.i3 { display: none; } div.ownershipstages.s29 .animatedCompass.i4 { display: none; } div.ownershipstages.s29 .animatedCompass.i1 { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); } div.ownershipstages.s29 .core .q2 ul li { opacity: 0; } div.ownershipstages.s29 .core .q3 ul li.item0 { opacity: 0; } div.ownershipstages.s29 .core .q3 ul li.item1 { opacity: 0; } div.ownershipstages.s29 .core .q3 ul li.item3 { opacity: 0; } div.ownershipstages.s30 .animatedCompass.i1 { transform:rotate(271deg); -webkit-transform:rotate(271deg); -moz-transform:rotate(271deg); -o-transform:rotate(271deg); } div.ownershipstages.s31 .core .q3 ul li.item4 { font-weight: bold; } div.ownershipstages.s32 .core .q3 ul li.item1 { font-weight: bold; opacity: 1; } div.ownershipstages.s33 .core .q3 ul li.item0 { font-weight: bold; opacity: 1; } div.ownershipstages.s34 .core .q3 ul li.item3 { font-weight: bold; opacity: 1; } div.ownershipstages.s35 .animatedCompass.i2 { display: none; } div.ownershipstages.s35 .animatedCompass.i3 { display: none; } div.ownershipstages.s35 .animatedCompass.i4 { display: none; } div.ownershipstages.s35 .animatedCompass.i1 { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); } div.ownershipstages.s35 .core .q2 ul li { opacity: 0; } div.ownershipstages.s36 .animatedCompass.i1 { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } div.ownershipstages.s37 .core .q2 ul li.item1 { opacity: 1; } div.ownershipstages.s38 .core .q2 ul li.item2 { opacity: 1; } div.ownershipstages.s39 .core .q2 ul li.item3 { opacity: 1; } div.ownershipstages.s40 .core .q2 ul li.item4 { opacity: 1; } div.ownershipstages.s41 h2.east { font-size: 150%; } div.ownershipstages.s42 h2.east { font-size: 100%; } div.ownershipstages.s43 h2.west { font-size: 100%; } div.ownershipstages.s44 .core .growth h3.entrepreneurial { opacity: 0; } div.ownershipstages.s44 .core .growth h3.managerial { opacity: 0; } div.ownershipstages.s44 .core .growth h3.professional { opacity: 0; } div.ownershipstages.s45 .core .growth h3.entrepreneurial { opacity: 1; } div.ownershipstages.s46 .core .growth h3.managerial { opacity: 1; } div.ownershipstages.s47 .core .growth h3.professional { opacity: 1; } div.ownershipstages.s48 .core .growth h3.entrepreneurial { background-color: "#FFEEDD"; } div.ownershipstages.s49 .core .growth h3.managerial { background-color: "#FFEEDD"; } div.ownershipstages.s50 .core .growth h3.professional { background-color: "#FFEEDD"; } ul.quiz { display: flex; flex-direction: column; flex-wrap: wrap; } ul.quiz li { font-size: 18px; list-style-type: disc; padding: 20px 0px; position: relative; cursor: pointer; } ul.quiz li.checked { font-weight: bold; list-style-type: none; } ul.quiz li.checked::before { content: ''; display: block; width: 30px; height: 30px; background-image: url('../images/circle-check-regular.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; left: -40px; position: absolute; top: 15px; } ul li.statement { list-style-type: none; font-size: 18px; } ul li.statement .likert { margin-top: 20px; } ul.likert { list-style:none; width:100%; margin:0; padding:0 0 35px; display:block; border-bottom:2px solid #efefef; } ul.likert:last-of-type { border-bottom:0; } ul.likert:before { content: ''; position:relative; top:11px; left:12%; display:block; background-color:#efefef; height:4px; width:75%; } ul.likert li { display:inline-block; width:25%; text-align:center; vertical-align: top; } ul.likert li input[type=radio] { display:block; position:relative; top:-7px; left:50%; margin-left:-6px; height: 25px; width: 25px; } ul.likert li label {width:100%;} ul.likert5 li { width: 20%; } ul.likert5:before { width: 78%; } .likert-statement { list-style-type: none; font-size: 18px; } .likert-statement label.statement { font-size: 18px; font-weight: bold; display: block; padding-bottom: 20px; } a.play-link { position: relative; max-width: 600px; height: auto; margin-left: auto; margin-right: auto; display: block; text-align: center; } a.play-link span { position: absolute; display: block; top: 40%; text-align: center; padding: 1rem 60px; font-size: 2.5rem; background-color: rgba(255,255,255,0.8); border-radius: 40px; color: #444; font-weight: bold; width: 100%; box-sizing: border-box; } a.play-link span::after { position: absolute; right: 30px; top: 50%; margin-top: -20px; content: ' '; background-repeat: no-repeat; background-position: center center; background-size: contain; width: 40px; height: 40px; } .camp1path1 a.play-link span::after { background-image: url('../images/click-family.png'); } .camp1path1 a.play-link:hover span { color: #F15D22; } .camp1path2 a.play-link span::after { background-image: url('../images/click-business.png'); } .camp1path2 a.play-link:hover span { color: #B0D235; } .camp1path3 a.play-link span::after { background-image: url('../images/click-ownership.png'); } .camp1path3 a.play-link:hover span { color: #2F6EB1; } .camp2path1 a.play-link span::after { background-image: url('../images/click-family.png'); } .camp2path1 a.play-link:hover span { color: #F15D22; } .camp2path2 a.play-link span::after { background-image: url('../images/click-business.png'); } .camp2path2 a.play-link:hover span { color: #B0D235; } .camp2path3 a.play-link span::after { background-image: url('../images/click-ownership.png'); } .camp2path3 a.play-link:hover span { color: #2F6EB1; } .camp3path1 a.play-link span::after { background-image: url('../images/click-family.png'); } .camp3path1 a.play-link:hover span { color: #F15D22; } .camp3path2 a.play-link span::after { background-image: url('../images/click-business.png'); } .camp3path2 a.play-link:hover span { color: #B0D235; } .camp3path3 a.play-link span::after { background-image: url('../images/click-ownership.png'); } .camp3path3 a.play-link:hover span { color: #2F6EB1; } .camp4path1 a.play-link span::after { background-image: url('../images/click-family.png'); } .camp4path1 a.play-link:hover span { color: #F15D22; } .camp4path2 a.play-link span::after { background-image: url('../images/click-business.png'); } .camp4path2 a.play-link:hover span { color: #B0D235; } .camp4path3 a.play-link span::after { background-image: url('../images/click-ownership.png'); } .camp4path3 a.play-link:hover span { color: #2F6EB1; } #compass1920 div.three-circle { width: 50%; height: 50%; position: relative; margin-left: auto; margin-right: auto; } #compass1920 div.three-circle div.circle { width: 33%; height: 69%; border-radius: 50%; opacity: 0.5; } #compass1920 div.three-circle div.circle.family { background-color: red; position: absolute; top: 50px; left: 0px; } #compass1920 div.three-circle div.circle.business { background-color: blue; position: absolute; top: 50px; left: 22%; } #compass1920 div.three-circle div.circle.ownership { background-color: yellow; position: absolute; top: 40%; left: 12%; } #compass1920 div.three-circle h2 { position: absolute; margin: 0px !important; padding: 0px !important; width: 33%; text-align: left; font-size: 2vw; } #compass1920 div.three-circle h2.family { top: 25%; left: 5%; color: red !important; } #compass1920 div.three-circle h2.business { top: 25%; left:35%; color: blue !important; } #compass1920 div.three-circle h2.ownership { bottom: 12%; left: 12%; text-align: center; color: gold !important; } #compass1920 div.overemphasis div.three-circle { height: 400px; } #compass1920 div.overemphasis div.three-circle div.circle { width: 250px; height: 250px; opacity: 0.8; } #compass1920 div.overemphasis div.three-circle div.circle.family { background-color: #fdaca7; } #compass1920 div.overemphasis div.three-circle div.circle.business { background-color: #96dcfb; left: 190px; } #compass1920 div.overemphasis div.three-circle h2 { text-align: center; width: 250px; font-size: 32px; } #compass1920 div.overemphasis div.three-circle h2.family { color: #fd2e00 !important; left: -20px; top: 150px; } #compass1920 div.overemphasis div.three-circle h2.business { color: #0070c5 !important; left: 190px; top: 150px; } #compass1920 div#consequences1 div.consequence { position: relative; float: left; width: 20%; } #compass1920 div#consequences1 div.consequence h3 { text-align: center; font-size: 20px; color: #828282; } #compass1920 div#consequences1 div.consequence div.icon { width: 100px; height: 98px; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-image: url('../images/sprite.png'); background-position: 0px -201px; position: relative; } #compass1920 div#consequences1 div.consequence div.icon span { position: absolute; top: 10px; right: 10px; display: block; width: 0px; height: 0px; background-repeat: no-repeat; background-image: url('../images/sprite.png'); background-position: -762px -156px; overflow: hidden; } #compass1920 div#consequences1 div#communications1 div.icon { background-position: -20px -198px; } #compass1920 div#consequences1 div#relations1 div.icon { background-position: -360px -201px; } #compass1920 div#consequences1 div#performance1 div.icon { background-position: -190px -201px; } #compass1920 div#consequences1 div#decision1 div.icon { background-position: -530px -202px; } #compass1920 div#consequences1 div#strategic1 div.icon { background-position: -690px -201px; } #compass1920 div#consequences1 div#loyalty1 div.icon { background-position: -360px -291px; } #compass1920 div#consequences1 div#identification1 div.icon { background-position: -190px -291px; } #compass1920 div#consequences1 div#emotions1 div.icon { background-position: -530px -291px; } #compass1920 div#consequences1 div#family-time1 div.icon { background-position: -690px -291px; } #compass1920 div#consequences2 div.consequence { position: relative; float: left; width: 20%; } #compass1920 div#consequences2 div.consequence h3 { text-align: center; font-size: 20px; color: #828282; } #compass1920 div#consequences2 div.consequence div.icon { width: 100px; height: 98px; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-image: url('../images/sprite.png'); background-position: 0px -201px; position: relative; } #compass1920 div#consequences2 div.consequence div.icon span { position: absolute; top: 10px; right: 10px; display: block; width: 0px; height: 0px; background-repeat: no-repeat; background-image: url('../images/sprite.png'); background-position: -762px -156px; overflow: hidden; } #compass1920 div#consequences2 div#communications2 div.icon { background-position: -20px -198px; } #compass1920 div#consequences2 div#relations2 div.icon { background-position: -360px -201px; } #compass1920 div#consequences2 div#performance2 div.icon { background-position: -190px -201px; } #compass1920 div#consequences2 div#decision2 div.icon { background-position: -530px -202px; } #compass1920 div#consequences2 div#strategic2 div.icon { background-position: -690px -201px; } #compass1920 div#consequences2 div#loyalty2 div.icon { background-position: -360px -291px; } #compass1920 div#consequences2 div#identification2 div.icon { background-position: -190px -291px; } #compass1920 div#consequences2 div#emotions2 div.icon { background-position: -530px -291px; } #compass1920 div#consequences2 div#family-time2 div.icon { background-position: -690px -291px; } #compass1920 div.source { text-align: right; font-size: 14px; color: #888; clear: both; padding-top: 30px; } div.questions ul li { list-style-type: none; } div.questions ul li textarea { margin-top: 1rem; } .btn.print { display: inline-block; border-radius: 10px; background-color: #888; color: #FFF; text-decoration: none; padding: 0.5rem 1rem; cursor: pointer; margin: 20px; border: none; } .camp5map { position: relative; width: 100%; height: 100%; min-width: 1100px; min-height: 1024px; } .camp5map .shack { position: absolute; display: block; background-color: rgba(255, 255, 255, 0.2); text-decoration: none; width: 100px; height: 100px; border-radius: 100px; cursor: pointer; margin-top: -50px; margin-left: -50px; } .camp5map .shack a { color: #444; background-color: #FFF; padding: 0.5rem; text-decoration: none; display: none; min-width: 200px; margin-top: 25px; margin-left: 50px; } .camp5map .shack small { display: block; font-style: italic; } .camp5map .shack:hover { background-color: #FFF; overflow: visible; } .camp5map .shack:hover a { display: block; } .camp5map .shack1 { top: 42%; left: 39%; } .camp5map .shack2 { top: 50%; left: 54%; } .camp5map .shack3 { top: 50%; left: 31%; } .camp5map .shack4 { top: 60%; left: 69%; } .camp5map .shack5 { top: 70%; left: 33%; } @media (max-width: 1650px) { .camp5map .shack1 { top: 40%; left: 39%; } .camp5map .shack2 { top: 47%; left: 54%; } .camp5map .shack3 { top: 50%; left: 31%; } .camp5map .shack4 { top: 58%; left: 69%; } .camp5map .shack5 { top: 66%; left: 33%; } } @media (max-width: 1500px) { .camp5map .shack1 { top: 38%; left: 39%; } .camp5map .shack2 { top: 42%; left: 54%; } .camp5map .shack3 { top: 45%; left: 31%; } .camp5map .shack4 { top: 54%; left: 69%; } .camp5map .shack5 { top: 62%; left: 33%; } } @media (max-width: 1400px) { .camp5map .shack1 { top: 36%; left: 39%; } .camp5map .shack2 { top: 40%; left: 54%; } .camp5map .shack3 { top: 43%; left: 31%; } .camp5map .shack4 { top: 51%; left: 69%; } .camp5map .shack5 { top: 60%; left: 33%; } } @media (max-width: 1300px) { .camp5map .shack1 { top: 34%; left: 39%; } .camp5map .shack2 { top: 38%; left: 54%; } .camp5map .shack3 { top: 40%; left: 31%; } .camp5map .shack4 { top: 48%; left: 69%; } .camp5map .shack5 { top: 55%; left: 33%; } } @media (max-width: 1200px) { .camp5map .shack1 { top: 31%; left: 39%; } .camp5map .shack2 { top: 35%; left: 54%; } .camp5map .shack3 { top: 36%; left: 31%; } .camp5map .shack4 { top: 43%; left: 69%; } .camp5map .shack5 { top: 50%; left: 33%; } .camp5 p { left: auto; right: 10%; top: 15%; } } @media (max-width: 1100px) { .camp5map .shack1 { top: 28%; left: 39%; } .camp5map .shack2 { top: 32%; left: 54%; } .camp5map .shack3 { top: 34%; left: 31%; } .camp5map .shack4 { top: 40%; left: 69%; } .camp5map .shack5 { top: 47%; left: 33%; } } @media print { footer { display: none !important; } #audiomap { display: none !important; } header .menu { display: none !important; } #background-video { display: none !important; } .back-to-list { display: none !important; } div.nav { display: none !important; } .btn.print { display: none !important; } .hugePlayButton { display: none !important; } }