* { outline:none!important; } html,body { width:100%;height:100%;margin:0;font-size:13px;line-height:20px;font-family:Arial,sans-serif;color:white;overflow:hidden;} .articles-open,.quiz-open,.about-open { overflow:hidden; } #content { width:100%;height:100%;background:#463312;position:fixed;top:0;left:0; } .container { width:95%;max-width:1400px;height:100%;margin:0 auto;position:relative;box-sizing:border-box; } h1,h2,h3,.btn,.nav-bar a { margin:0;font-family:Perpetua,Baskerville,"Big Caslon","Palatino Linotype",Palatino,"URW Palladio L","Nimbus Roman No9 L",serif;font-weight:normal;line-height:normal; } h3#distance-travelled-text { font-size:22px;font-style:italic;float: left; } h3#distance-travelled-value { font-size:22px;font-style:italic;float: left; } a img { border:none; } .clear { clear:both; } a.btn,input.btn { height:45px;padding:0 15px;font-size:26px;font-weight:bold;line-height:45px;color:white;text-decoration:none;text-shadow:1px 1px 0 rgba(0,0,0,0.3);display:block;border:1px Solid #2d608d;border-radius:7px;box-shadow:1px 2px 3px rgba(0,0,0,0.2);font-weight:bold;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.3);position:relative;overflow:hidden;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out; background: rgb(115,127,139); /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzczN2Y4YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjVmNjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgb(115,127,139) 0%, rgb(86,95,104) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(115,127,139)), color-stop(100%,rgb(86,95,104))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(115,127,139) 0%,rgb(86,95,104) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(115,127,139) 0%,rgb(86,95,104) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(115,127,139) 0%,rgb(86,95,104) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(115,127,139) 0%,rgb(86,95,104) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#737f8b', endColorstr='#565f68',GradientType=0 ); /* IE6-8 */ } a.btn:hover,input.btn:hover { border-color:#6ebce1;background:rgb(209,245,253); background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxZjVmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2EzZGNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NmI2ZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background:-moz-linear-gradient(top, rgba(209,245,253,1) 0%, rgba(163,220,242,1) 17%, rgba(118,182,221,1) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,245,253,1)), color-stop(17%,rgba(163,220,242,1)), color-stop(100%,rgba(118,182,221,1))); background:-webkit-linear-gradient(top, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); background:-o-linear-gradient(top, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); background:-ms-linear-gradient(top, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); background:linear-gradient(to bottom, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f5fd', endColorstr='#76b6dd',GradientType=0 ); } #msn-header { width:100%;height:45px;background:#fbfaf6;position:absolute;top:0;left:0;z-index:901;box-shadow:0 1px 3px rgba(0,0,0,0.3); } #msn-header .msn-logo { margin:10px 0 0 15px; } #msn-header-navigation { height:45px;font-size:14px;line-height:45px;white-space:nowrap;position:absolute;top:0;left:200px; } #msn-header-navigation a { color:#777;padding:0 10px;text-decoration:none; } #header { width:100%;height:45px;background:#8f7f70 url('Images/header-background.jpg');box-shadow:0 1px 3px rgba(0,0,0,0.3);text-shadow:1px 1px 0 rgba(0,0,0,0.3);position:absolute;top:45px;left:0;z-index:900; } #header .branding { width:239px;float:left;position:relative;z-index:100; } #header .branding #logo { display:block;width:100%;padding:0;border:1px Solid #968c80;border-top:none;box-shadow:1px 2px 3px rgba(0,0,0,0.2);font-size:0;line-height:0; } #header .branding #logo img { width:100%;height:auto; } #header .branding .btn { margin-top:7px; } #header .nav-bar.nav-left { float:left; } #header #menuButton span { display:inline-block;margin-left:10px; } #header .nav-bar a { display:block;height:45px;padding:0 15px;font-size:16px;font-weight:bold;font-style:italic;line-height:45px;color:white;text-decoration:none;cursor:pointer;float:left; } #header .nav-bar a:hover { background:#6e7e8b; } #header .nav-bar a.active { background:#efebe0;color:#6e7e8b;text-shadow:none; } #header .nav-bar .divider { display:block;width:0;height:45px;border-left:1px solid rgba(0,0,0,0.1);border-right:1px solid rgba(255,255,255,0.3);float:left; } #header .nav-bar .divider.first { margin-left:30px; } #header .nav-bar.nav-right { float:right; } #header .nav-bar.nav-right .shareOptions { display:block;padding:0 15px;white-space:nowrap;float:left; } #header .nav-bar.nav-right .shareOptions h3 { height:45px;margin:0;font-size:16px;font-weight:bold;font-style:italic;line-height:45px;float:left; } #header .nav-bar.nav-right .shareOptions a { width:23px;height:23px;margin:10px 0 0 10px;padding:0;background:White;border:1px solid White;border-radius:50%;text-align:center;line-height:28px;text-shadow:none; } #header .nav-bar.nav-right .shareOptions a#facebookShareButton { color:#2952a2; } #header .nav-bar.nav-right .shareOptions a#twitterShareButton { color:#01acf1; } #header .nav-bar.nav-right .shareOptions a:hover { background:#6e7e8b;color:white!important; } .no-audio #audioButton, .no-audio #audioButton-divider { display:none!important; } #header #navMenuButton i { display:none; } #header #navMenuButton .animated-icon { display:block;width:20.48px;height:12px;margin:14px 0;position:relative; } #header #navMenuButton .bar { display:block;width:14px;height:2px;background:White;box-shadow:1px 1px 0 rgba(0,0,0,0.3);position:absolute;top:0;left:4px;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transform-origin:left center;transform-origin:left center; } #header #navMenuButton .bar.bar-2 { top:5px; } #header #navMenuButton .bar.bar-3 { top:10px; } #header #navMenuButton.active .bar { background:#6e7e8b;box-shadow:none; } #header #navMenuButton.active .bar-1 { width:17px;top:-1px;left:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg); } #header #navMenuButton.active .bar-2 { opacity:0; } #header #navMenuButton.active .bar-3 { width:17px;top:11px;left:5px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg); } #carousel { width:100%;height:305px;background:#9b8d80 url('Images/carousel-background.jpg') repeat-x;border-top:1px Solid #bbafa3;box-shadow:-2px 0 5px rgba(0,0,0,0.5);position:absolute;bottom:0;left:0;z-index:800; } #timeline { width:100%;height:140px;background:#b6a89b url('Images/timeline-background.png') repeat-x center top;box-shadow:-2px 0 5px rgba(0,0,0,0.2);position:absolute;bottom:0;left:0;z-index:801; } .sub-page { position:absolute;top:90px;bottom:50px;left:0;right:0;z-index:804;overflow:hidden; background: rgb(242,235,227); background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2YyZWJlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNmE4OWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background:-moz-linear-gradient(top, rgb(242,235,227) 1%, rgb(182,168,155) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(242,235,227)), color-stop(100%,rgb(182,168,155))); background:-webkit-linear-gradient(top, rgb(242,235,227) 1%,rgb(182,168,155) 100%); background:-o-linear-gradient(top, rgb(242,235,227) 1%,rgb(182,168,155) 100%); background:-ms-linear-gradient(top, rgb(242,235,227) 1%,rgb(182,168,155) 100%); background:linear-gradient(to bottom, rgb(242,235,227) 1%,rgb(182,168,155) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ebe3', endColorstr='#b6a89b',GradientType=0 ); } .sub-page .sub-page-scroll-content { position:absolute;top:140px;bottom:0;left:0;right:0;overflow:auto; } .sub-page .container { max-width:1020px; } #footer { width:100%;height:50px;background:#fbfaf6;box-shadow:-2px 0 5px rgba(0,0,0,0.2);color:#777;position:absolute;bottom:0;left:0;z-index:802; } #footer p { margin:0;line-height:50px; } #footer p.left { float:left; } #footer p.left a { font-size:14px;padding:0 10px;color:#777;text-decoration:none; } #footer p.right { float:right;font-size:11px; } #footer p.right img { vertical-align:middle;margin-left:20px; } #carousel, #timeline, #scroll-content { -ms-transition:bottom 1s ease;-moz-transition:bottom 1s ease;-webkit-transition:bottom 1s ease;transition:bottom 1s ease; } .menu-collapse #carousel { bottom:-265px; } .menu-collapse #carousel:hover, .menu-collapse #timeline { bottom:-90px; } .menu-collapse #scroll-content { bottom:45px; } #scroll-content { width:100%;max-height:800px;position:absolute;top:90px;bottom:305px;left:0;right:0; background:rgb(77,142,210); background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkOGVkMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhY2NlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background:-moz-linear-gradient(top, rgb(77,142,210) 0%, rgb(170,204,232) 50%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(77,142,210)), color-stop(50%,rgb(170,204,232))); background:-webkit-linear-gradient(top, rgb(77,142,210) 0%,rgb(170,204,232) 50%); background:-o-linear-gradient(top, rgb(77,142,210) 0%,rgb(170,204,232) 50%); background:-ms-linear-gradient(top, rgb(77,142,210) 0%,rgb(170,204,232) 50%); background:linear-gradient(to bottom, rgb(77,142,210) 0%,rgb(170,204,232) 50%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d8ed2', endColorstr='#aacce8',GradientType=0 ); } #scroll-content #background, #scroll-content #background .background, #scroll-content #pages .page { width:100%;height:100%;position:absolute;bottom:0;left:0; } #scroll-content #scenes { width:24000px;height:100%;position:absolute;top:0; } #scroll-content #scenes .scene { width:3000px;height:100%;position:absolute; } #scroll-content #scenes .scene img { position:absolute;left:0;z-index:651; } #scroll-content #scenes .scene img.scene-foreground { z-index:899; } #scroll-content #background { z-index:0;overflow:hidden; } #scroll-content #background #background1 { height:168px;background:url('Images/SFG-Grass-Forground.png') repeat-x;z-index:900; } #scroll-content #background #background2 { height:348px;bottom:-80px;background:url('Images/SFG-Ground.png') repeat-x;z-index:650; } #scroll-content #background #background2-grass { height:348px;bottom:-80px;background:url('Images/SFG-Grass-Ground.png') repeat-x;z-index:650; } #scroll-content #background #background3 { height:178px;bottom:170px;background:url('Images/SFG-Mountains.png') repeat-x;z-index:600; } #scroll-content #background #background4 { height:197px;bottom:200px;background:url('Images/SFG-Mountains-Distance.png') repeat-x;z-index:500; } #scroll-content #background #background5 { height:700px;background:url('Images/SFG-Clouds.png') repeat-x;z-index:400; } #scroll-content #background #background6 { height:600px;background:url('Images/sun.png') no-repeat center 5%;z-index:300; } #scroll-content #stats { position:absolute;bottom:50px;right:0;color:white;font-family:Arial;font-size:2vw;line-height:2vw;text-align:right;z-index:1000; } #scroll-content #stats p { margin:0; } #scroll-content #elephant { width:566px;height:390px;z-index:700;position:absolute;bottom:50px;left:30px;overflow:hidden; } #scroll-content #elephant #elephantInner { height:100%; } #scroll-content #elephant #elephantSprite { width:auto;height:390px;position:absolute;top:0; } .page .paging-button.next { display:block;width:75px;height:75px;margin:-39px auto 0;background:transparent url('Images/SFG-playButton75x75.png') no-repeat;position:absolute;top:50%;right:20px;cursor:pointer;z-index:700; } .page .hotspot { width:50px;height:50px;display:block;background:url('Images/hotspot-background.png') no-repeat;border-radius:50%;box-shadow:1px 2px 3px rgba(0,0,0,0.3);position:absolute;z-index:701;cursor:pointer; } .page .hotspot p { display:none;width:300px;position:absolute;bottom:50px;left:-50px;padding:20px;background:rgba(0,0,0,0.8);border-radius:10px; } .page .hotspot p:before { content:'';display:block;width:0;height:0;border-top:10px solid rgba(0,0,0,0.8);border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:none;position:absolute;bottom:-10px;left:65px } .page .hotspot.on-right p { left:-240px; } .page .hotspot.on-right p:before { left:255px; } .page .hotspot.on-top p { bottom:auto;top:50px; } .page .hotspot.on-top p:before { border-bottom:10px solid rgba(0,0,0,0.8);border-top:none;bottom:auto;top:-10px; } .page .hotspot:hover, .page .hotspot.active { box-shadow:0 0 30px White; } .page .meet-the-elephants { width:450px;padding:13px 13px 13px 37px;background:#ebe6da;color:#748088;position:absolute;top:40px;right:0; } .page .meet-the-elephants:before { content:'';display:block;width:164px;height:164px;background:#ebe6da;border-radius:50%;position:absolute;top:50%;margin-top:-82px;left:-127px; } .page .meet-the-elephants:after { content:'';display:block;width:132px;height:132px;padding:6px;border:2px dashed #d3cabb;border-radius:50%;position:absolute;top:50%;margin-top:-74px;left:-119px; } .page .meet-the-elephants h4 { margin:0;padding:0;font-size:16px;font-weight:normal; } .page .meet-the-elephants p { margin:0;padding:0;font-size:12px;line-height:15px; } .page .meet-the-elephants p.follow { margin-top:10px;font-size:16px;vertical-align:top; } .page .meet-the-elephants p.follow a { display:inline-block;width:20px;height:20px;margin-left:10px;background:White;border-radius:50%;font-size:12px;text-align:center;line-height:20px;vertical-align:top;cursor:pointer; } .page .meet-the-elephants p.follow a.facebook { color:#24519f; } .page .meet-the-elephants p.follow a.twitter { color:#37a4dd; } .page #page7-hs5 span.follow {display:block; margin-top:10px;font-size:16px;vertical-align:top; background-color: transparent } .page #page7-hs5 span.follow span.round { display:inline-block;width:20px;height:20px;margin-left:10px;background:White;border-radius:50%;font-size:12px;text-align:center;line-height:20px;vertical-align:top;cursor:pointer; } .page #page7-hs5 span.follow span.facebook { color:#24519f; } .page #page7-hs5 span.follow span.twitter { color:#37a4dd; } #chapter-carousel .owl-wrapper-outer { margin-top:-35px; } #chapter-carousel .owl-item a { display:block;padding:0 10px;text-align:center;color:white;text-shadow:1px 1px 0 rgba(0,0,0,0.2);text-decoration:none; } #chapter-carousel .owl-item .item-image { max-width:177px;display:block;margin:0 auto;padding:6px;background:#f2ebe3;border:1px Solid #988f7e;box-shadow:1px 2px 3px rgba(0,0,0,0.3);font-size:0;line-height:0; } #chapter-carousel .owl-item .item-image:hover { background:#6e7e8b!important; } #chapter-carousel .owl-item img { max-width:100%;height:auto;max-height:129px;border:1px solid #fefdfb;box-sizing:border-box; } #chapter-carousel .owl-item h3 { margin:7px 5px 0;font-size:18px; } #chapter-carousel .owl-buttons .owl-prev { position:absolute;top:60px;left:-20px; } #chapter-carousel .owl-buttons .owl-next { position:absolute;top:60px;right:-20px; } #chapter-carousel .owl-buttons div { width:25px;height:25px;padding:0;background:#685a4d;border-radius:50%;font-size:0;text-indent:10000px; } #chapter-carousel .owl-buttons div:before { content:'';display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;position:absolute;top:50%;left:50%;margin:-5px 0 0 -4px; } #chapter-carousel .owl-prev:before { border-right:7px solid #9b8d80;border-left:none; } #chapter-carousel .owl-next:before { border-left:7px solid #9b8d80;border-right:none;margin-left:-2px!important; } #chapter-carousel .owl-buttons div:hover { background:#6e7e8b; } #chapter-carousel .owl-prev:hover:before { border-right-color:white; } #chapter-carousel .owl-next:hover:before { border-left-color:white; } #chapter-carousel .owl-buttons div.disabled { background:#685a4d;opacity:0.3;cursor:default;pointer-events:none; } #chapter-timeline { height:100%;position:relative; } #chapter-timeline .line { height:45px;margin:-60px 15px 15px;border-bottom:1px dashed #8b7b6c;position:absolute;top:50%;left:0;right:0; } #chapter-timeline .line-progress { height:0;border-bottom:1px dashed #ffffff;position:absolute;bottom:-1px;left:0; } #chapter-timeline .marker { width:34px;height:30px;margin-left:-17px;background:url('Images/timeline-marker.png') no-repeat;position:absolute;left:0;top:-5px; } #chapter-timeline .marker:before { content:'';display:block;width:0;height:0;border-top:4px solid #8a7a6d;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:none;position:absolute;bottom:-7px;left:50%;margin-left:-4px; } #chapter-timeline .point { width:12px;height:12px;margin-left:-6px;background:#feffff;border:1px solid #b3a396;box-shadow:0 0 0 2px #8a7a6d;display:block;position:absolute;bottom:-8px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg); } #chapter-timeline .point .inner { display:block;width:6px;height:6px;margin:3px;background:#6e7e8b;opacity:0; } #chapter-timeline .point:hover { background:#6e7e8b; } #chapter-timeline .point:hover .inner { background:#ffffff;opacity:1!important; } #chapter-timeline .label { width:50px;margin-left:-25px;position:absolute;left:0;bottom:-33px;color:white;font-size:11px;font-style:italic;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.3); } #chapter-timeline .point-2 { left:16.66%; } #chapter-timeline .point-3 { left:33.33%; } #chapter-timeline .point-4 { left:50%; } #chapter-timeline .point-5 { left:66.66%; } #chapter-timeline .point-6 { left:83.33%; } #chapter-timeline .point-7 { left:100%; } .overlay { width:100%;height:100%;background:url('Images/overlay-background.png');background:rgba(26,23,19,0.8);position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999; } .overlay .content { width:400px;height:300px;padding:50px;background:White;box-shadow:2px 3px 5px rgba(0,0,0,0.5);color:#222;text-align:center;position:absolute;top:50%;left:50%;margin:-200px 0 0 -250px; } /* ----- SCENES ----- */ .hotspot1 { top:50%;left:55px; } .hotspot2 { top:50%;left:25%; } .hotspot2a { top:50%;left:40%; } .hotspot3 { top:50%;left:50%; } .hotspot4 { top:50%;right:25%; } .hotspot5 { top:50%;right:55px; } #scene1.scene { left:0; } #scene1.scene img { bottom:0; } .page1 .intro-content { width:450px;margin-left:-256px;margin-top:-80px;padding:20px;background:rgba(242,235,227,0.85);border:1px Solid #988f7e;color:#727f87;position:absolute;top:50%;left:70%; } .page1 .intro-content h1 { font-size: 33px; padding: 0 15px 0 15px } #scene2.scene { left:12.5%; } #scene2.scene img { bottom:0; } .page2 .hotspot1 { top:38%;left:55px; } .page2 .hotspot2 { top:70%;left:48%; } .page2 .hotspot3 { top:54%;left:69%; } .page2 .hotspot4 { top:71%;right:15%; } .page2 .meet-the-elephants:after { background:url('Images/meet-the-elephants-jocelyn.png') center center no-repeat; } #scene3.scene { left:25%; } #scene3.scene img { bottom:0; } .page3 .hotspot1 { top:38%;left:55px; } .page3 .hotspot2 { top:56%;left:48%; } .page3 .hotspot3 { top:55%;left:70%; } .page3 .hotspot4 { top:71%;right:55px; } .page3 .meet-the-elephants:after { background:url('Images/meet-the-elephants-gilfred.png') center center no-repeat; } #scene4.scene { left:37.5%; } #scene4.scene img.scene-background { bottom:-65px; } #scene4.scene img.scene-foreground { bottom:0; } .page4 .hotspot1 { top:9%;left:39%; } .page4 .hotspot2 { top:36%;left:63%; } .page4 .hotspot3 { top:68%;left:75%; } .page4 .meet-the-elephants:after { background:url('Images/meet-the-elephants-kimani.png') center center no-repeat; } #scene5.scene { left:50%; } #scene5.scene img { bottom:0; } .page5 .hotspot1 { top:75%;left:46%; } .page5 .hotspot2 { top:50%;right:25%;left:auto; } .page5 .meet-the-elephants:after { background:url('Images/meet-the-elephants-evegny.png') center center no-repeat; } #scene6.scene { left:62.5%; } #scene6.scene img { bottom:0; } .page6 .hotspot1 { top:48%;left:55px } .page6 .hotspot2a { top:35%;right:44%; } .page6 .hotspot3 { top:65%;right:25%;left:auto; } .page6 .meet-the-elephants:after { background:url('Images/meet-the-elephants-diana.png') center center no-repeat; } #scene7.scene { left:75%; } #scene7.scene img { bottom:0; } .page7 .hotspot1 { top:auto;bottom:135px;left:55px } .page7 .hotspot2 { left:35%;top:10%; } .page7 .hotspot3 { top:-25%; } .page7 .hotspot4 { top:45%;right:40%; } .page7 .hotspot5 { top:70%; } .page7 .meet-the-elephants:after { background:url('Images/meet-the-elephants-mpala.png') center center no-repeat; } .page7 .take-the-quiz { width:350px;padding:10px 20px;background:rgba(242,235,227,0.85);color:#727f87;position:absolute;top:190px;right:0; } /* ----- ARTICLES ----- */ .articles-open #articles { display:block!important; } .articles-open #header #nav-bar-articles { background:#f2ebe3;color:#727f87;text-shadow:none; } #articles .container { height:auto; } #articles .articles-menu { background:White;padding:30px 20px 0; } #articles a.articles-menu-item { width:25%;margin-bottom:30px;display:block;text-decoration:none;float:left; } #articles a.articles-menu-item.new-row { clear:both; } #articles a.articles-menu-item .item-image { display:block;margin:0 10px;font-size:0;line-height:0; } #articles a.articles-menu-item .item-image:hover { background:#6e7e8b!important; } #articles a.articles-menu-item .item-image img { width:100%;max-width:100%;height:auto;border:1px solid #fefdfb;box-sizing:border-box; } #articles a.articles-menu-item h3 { font-family:Arial,sans-serif;margin:10px 10px 0;color:#727f87;font-size:18px;font-weight:bold; } #articles.article-open .articles-menu { width:300px;padding-top:30px;margin:0;position:absolute;top:0;right:0; } #articles.article-open a.articles-menu-mpu { display:block!important;margin-bottom:20px;text-decoration:none; } #articles.article-open a.articles-menu-mpu p { margin:0;color:#666; } #articles.article-open .articles-menu h3 { display:block!important;color:#727f87;font-size:24px; } #articles.article-open a.articles-menu-item { width:100%;margin-bottom:0;display:block;clear:both;text-align:left;float:none; } #articles.article-open a.articles-menu-item .item-image { width:80px;margin:0 0 20px;float:left; } #articles.article-open a.articles-menu-item h3 { margin-left:100px;padding-top:10px;font-size:14px; } #articles.article-open a.articles-menu-mpu h1 { color: #727f87;font-size: 30px;} #articles.article-open a.articles-menu-mpu h3 { font-size: 14px;font-family: Arial,sans-serif;font-style: italic;color: #999;margin-bottom: 10px} #articles .articles { background:White;margin-right:360px;margin-bottom:30px;padding:30px;display:none; } #articles.article-open .articles { display:block; } #articles .articles h1 { color:#727f87;font-size:30px; } #articles .articles h3 { font-size:14px;font-family:Arial,sans-serif;font-style:italic;color:#999; } #articles .articles .article { color:#333; } #articles .articles .article img { max-width:100%;height:auto; } #articles .articles .article .caption { max-width:576px;background:#fbfaf6;position:relative;line-height:0; } #articles .articles .article .caption p { margin:0;padding:10px 20px;background:rgba(0,0,0,0.6);color:white;line-height:normal;position:absolute;bottom:0;left:0;right:0;opacity:0; } #articles .articles .article .caption:hover p { opacity:1; } #articles .articles .article h3 + img { margin-top:20px; } #articles .articles .article .gallery { width:100%;max-width:576px;margin:20px 0 0;padding:0;overflow:hidden; } #articles .articles .article .gallery li { position:relative; } #articles .articles .article .gallery li h4 { height:40px;padding:0 20px;background:rgba(0,0,0,0.6);font-size:18px;color:white;line-height:40px;position:absolute;top:276px;left:0;right:0; } #articles .articles .article .gallery li .copyright { font-size:11px;margin:5px 0; } #articles .articles .article .gallery li .caption { background:transparent; } #articles .articles .article .gallery li .caption p { font-size:13px;margin:10px 0 0;padding:0;position:static;bottom:auto;left:auto;right:auto;opacity:1;color:#666;background:transparent; } #articles .articles .article .gallery .owl-controls { margin:0; } #articles .articles .article .gallery .owl-pagination { display:none; } #articles .articles .article .gallery .owl-controls .owl-page span { width:8px;height:8px;background:#fbfaf6; } #articles .articles .article .gallery .owl-buttons div { width:25px;height:25px;padding:0;background:#e3ddcf;border-radius:50%;font-size:0;text-indent:10000px;position:absolute;top:150px;opacity:1; } #articles .articles .article .gallery .owl-buttons .owl-next { right:10px; } #articles .articles .article .gallery .owl-buttons .owl-prev { left:10px; } #articles .articles .article .gallery .owl-buttons div:before { content:'';display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;position:absolute;top:50%;left:50%;margin:-5px 0 0 -4px; } #articles .articles .article .gallery .owl-prev:before { border-right:7px solid #96856f;border-left:none; } #articles .articles .article .gallery .owl-next:before { border-left:7px solid #96856f;border-right:none;margin-left:-2px!important; } #articles .articles .article .gallery .owl-buttons div:hover { background:White; } #articles .articles .article .gallery .advert { width:100%;max-width:576px;height:340px;padding:0 45px;background:#eee;box-sizing:border-box; } #articles .articles .article .gallery .advert a { margin-left: 11%;width:33%;padding:0 5px;display:block;vertical-align:top;color:#666;text-decoration:none;float:left;box-sizing:border-box; } #articles .articles .article .gallery .advert a img { max-width:100%;height:auto;margin-top:70px; } #articles .articles .article .gallery .advert a h3 { color:#666;margin:5px 0 0; } #articles .articles .article .gallery .advert a p { margin:5px 0 0; } /* ----- QUIZ PAGE ----- */ .quiz-open #quiz { display:block!important; } .quiz-open #header #nav-bar-quiz { background:#f2ebe3;color:#727f87;text-shadow:none; } .sidebar { background:White;width:300px;padding:27px 20px 0; } .sidebar a.articles-menu-mpu { display:block;margin-bottom:20px;text-decoration:none; } .sidebar a.articles-menu-mpu p { margin:0;color:#666; } .sidebar h3 { display:block!important;color:#727f87;font-size:24px; } .sidebar a.articles-menu-item { width:100%;margin-bottom:0;display:block;clear:both;text-align:left;float:none;text-decoration:none; } .sidebar a.articles-menu-item .item-image { width:80px;margin:0 0 20px;float:left; } .sidebar a.articles-menu-item .item-image img { width:100%;max-width:100%;height:auto;border:1px solid #fefdfb;box-sizing:border-box; } .sidebar a.articles-menu-item h3 { margin:10px 10px 0 100px;padding-top:10px;color:#727f87;font-family:Arial,sans-serif;font-size:14px;font-weight:bold; } .sidebar a.articles-menu-mpu h1 {color: #727f87;font-size: 30px;} .sidebar a.articles-menu-mpu h3 {font-size: 14px;font-family: Arial,sans-serif;font-style: italic;color: #999;margin-bottom: 10px} .quiz-page,.left-column { background:White;padding:30px;margin-right:360px;color:#666; } .quiz-page img { width:100%;height:auto; } .quiz-page h3 { max-width:574px;margin:20px 0;font-family:Arial,sans-serif;color:#727f87;font-size:18px;font-weight:bold; } .quiz-page label { width:50%;box-sizing:border-box;display:block;float:left;margin:5px 0 0;padding:0;color:white;font-weight:bold;text-shadow:none;cursor:pointer;position:relative; } .quiz-page label:hover span.answer, .quiz-page label.selected span.answer { background:#fff;color:#8f7f70; } .quiz-page label.selected { box-shadow:0 0 30px White; } .quiz-page label span.answer { display:block;min-height:40px;margin:0 5px;padding:20px 10px 10px 80px;background:#b6a89b;border:1px Solid #988f7e;border-radius:8px; } .quiz-page label span.icon { display:block;background-repeat:no-repeat;width:50px;height:50px;position:absolute;top:10px;left:20px; } .quiz-page label span.icon-a { background-image:url('Images/Quiz/Quiz_SFG-Button-A.png'); } .quiz-page label span.icon-b { background-image:url('Images/Quiz/Quiz_SFG-Button-B.png'); } .quiz-page label span.icon-c { background-image:url('Images/Quiz/Quiz_SFG-Button-c.png'); } .quiz-page label span.icon-d { background-image:url('Images/Quiz/Quiz_SFG-Button-D.png'); } .quiz-page label span.icon-e { background-image:url('Images/Quiz/Quiz_SFG-Button-E.png'); } .quiz-page label span.icon-f { background-image:url('Images/Quiz/Quiz_SFG-Button-F.png'); } .quiz-page label input[type="radio"] { position:absolute;top:-10000px;left:-10000px; } .quiz-page input[type="button"] { display:none;width:100%;margin:20px 0 0;cursor:pointer; } .quiz-page0 input[type="button"] { display:block!important; } .quiz-page6 .share-this a { width:25px;height:25px;display:inline-block;background:White;border:1px solid rgb(143, 127, 112);border-radius:50%;font-size:14px;text-align:center;line-height:25px;cursor:pointer; } .quiz-page6 .share-this a.facebook { color:#2952a2; } .quiz-page6 .share-this a.twitter { color:#01acf1; } /* ----- ABOUT PAGE ----- */ .about-open #about { display:block!important; } .about-open #header #aboutuslink { background:#f2ebe3;color:#727f87;text-shadow:none; } #about .container h1 { color:#727f87;font-size:30px; } #about .left-column p a { color:rgb(115,127,139); } /* ----- RESPONSIVE STYLES ----- */ /* WIDE SCREENS */ @media (min-width:1400px) { .page .content-panel h2 { font-size:27px; } } @media (max-width:1399px) { #header .branding { width:20%;min-width:100px; } #header .branding .btn { font-size:1.7vw;padding:0;text-align:center;white-space:nowrap; } #header .nav-bar.nav-right .shareOptions h3 { display:none; } } /* NARROW SCREENS - OWL CAROUSEL SHOWS 4 ITEMS BELOW 1199px */ @media (min-width:1200px) { #header #nav-bar-collapse { display:block!important; } } @media (max-width:1199px) { #header .container { width:100%;padding:0 2.5%;white-space:nowrap; } #header .nav-bar { display:inline-block; } #header .nav-bar.nav-right { float:none; } #header .nav-bar.nav-right .shareOptions { padding-left:5px; } #header #nav-bar-collapse { display:none;width:100%;margin:0;padding:20px;background:#f1ede2 url('Images/beige-dot-background.jpg');border-bottom:1px solid #968c80;box-shadow:0 2px 5px rgba(0,0,0,0.3),inset 0 1px 5px rgba(0,0,0,0.3);position:absolute;top:45px;left:0;box-sizing:border-box;float:none; } #header #nav-bar-collapse a { float:none;height:45px;margin-bottom:5px;padding:0 15px;font-size:18px;font-weight:bold;font-style:italic;line-height:45px;color:white;text-decoration:none;text-shadow:1px 1px 0 rgba(0,0,0,0.3);display:block;border:1px Solid #2d608d;border-radius:7px;font-weight:bold;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.3);position:relative;overflow:hidden;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out; background:rgb(147,204,231); background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzY2NlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzYxOWNiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NTc1YTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background:-moz-linear-gradient(top, rgba(147,204,231,1) 0%, rgba(97,156,190,1) 17%, rgba(69,117,163,1) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,204,231,1)), color-stop(17%,rgba(97,156,190,1)), color-stop(100%,rgba(69,117,163,1))); background:-webkit-linear-gradient(top, rgba(147,204,231,1) 0%,rgba(97,156,190,1) 17%,rgba(69,117,163,1) 100%); background:-o-linear-gradient(top, rgba(147,204,231,1) 0%,rgba(97,156,190,1) 17%,rgba(69,117,163,1) 100%); background:-ms-linear-gradient(top, rgba(147,204,231,1) 0%,rgba(97,156,190,1) 17%,rgba(69,117,163,1) 100%); background:linear-gradient(to bottom, rgba(147,204,231,1) 0%,rgba(97,156,190,1) 17%,rgba(69,117,163,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cce7', endColorstr='#4575a3',GradientType=0 ); } #header #nav-bar-collapse a:hover { border-color:#6ebce1;background:rgb(209,245,253); background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxZjVmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2EzZGNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NmI2ZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background:-moz-linear-gradient(top, rgba(209,245,253,1) 0%, rgba(163,220,242,1) 17%, rgba(118,182,221,1) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,245,253,1)), color-stop(17%,rgba(163,220,242,1)), color-stop(100%,rgba(118,182,221,1))); background:-webkit-linear-gradient(top, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); background:-o-linear-gradient(top, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); background:-ms-linear-gradient(top, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); background:linear-gradient(to bottom, rgba(209,245,253,1) 0%,rgba(163,220,242,1) 17%,rgba(118,182,221,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f5fd', endColorstr='#76b6dd',GradientType=0 ); } #header #nav-bar-collapse .divider { display:none; } #header #menuButton span { display:none; } #header #navMenuButton, #header #navMenuButton-divider { display:block!important; } #carousel .container, #timeline .container { padding:0 20px; } .sub-page .sub-page-scroll-content { top:12vw; } #quiz .quiz-page img { width:100%;height:auto;max-width:100%; } } @media (min-width:769px) and (max-width:1199px) { #header #nav-bar-collapse { padding-left:20%; } #header #nav-bar-collapse a { margin-left:40px; } } /* SMALL SCREENS */ @media (max-width:768px) { #header .branding .btn { display:none; } #articles .articles-menu a { width:50%; } #articles.article-open a { width:100%; } #articles.article-open .articles-menu { width:40%;box-sizing:border-box; } #articles.article-open h3, #articles.article-open a.articles-menu-item { margin-bottom:20px; } #articles.article-open a.articles-menu-mpu img { max-width:100%;height:auto; } #articles.article-open a.articles-menu-item .item-image { width:100%;height:auto;margin:0 0 10px;float:none; } #articles.article-open a.articles-menu-item h3 { margin:0;padding:0; } #articles.article-open .articles { margin-right:42%; } .sidebar { width:40%;box-sizing:border-box; } .sidebar img { max-width:100%;height:auto; } #quiz .quiz-page,.left-column { margin-right:42%; } .quiz-page label { width:100%; } } @media (max-width:500px) { #articles .articles-menu a { width:100%; } #articles.article-open .articles-menu { display:none!important; } #articles.article-open .articles { margin-right:0; } .sidebar { display:none!important; } #quiz .quiz-page,.left-column { margin-right:0; } } /* TALL SCREENS */ @media (min-height:880px) { #header .nav-bar a#audioButton + .divider, #header .nav-bar a#menuButton { display:none; } .menu-collapse #carousel, .menu-collapse #timeline { bottom:0!important; } .menu-collapse #scroll-content { bottom:305px; } } /* SHORT SCREENS */ @media (max-height:768px) { #scroll-content { bottom:35px; } } /* VERY SHORT SCREENS */ @media (max-height:400px) { #header #nav-bar-collapse { max-height:200px;overflow:auto; } #carousel { display:none; } }