#interactive{ font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: normal; color: #000000; margin-bottom: 30px;}#interactive a{ font-family: 'Open Sans', sans-serif; font-weight: bold; color: #115278; text-decoration: none; margin-top: 30px;}#interactive a.read-more{ float: left;}#interactive a:hover{ text-decoration: underline;}#interactive #external a { color: #0550C8; position: absolute; bottom: 0; right: 10px; z-index: 20; text-decoration: underline; font-family: 'Open Sans', sans-serif; background-color: white; padding: 5px 10px;}#interactive #external a:hover{ background:#EAEAEA;}#interactive .clearfix{ content: ''; display: table; /*clear: both;*/}#interactive .center{ margin: 0 auto;}#interactive .left{ text-align: left;}#interactive .rel{ position: relative;}/* -------------------------------- Legend and Buttons!-------------------------------- */#interactive button{ /*width: 125px;*/ padding: 1em; background: white; color: #7b7b7b; border: 1px solid #7b7b7b; border-radius: 0; font-size: 14px; cursor: pointer; font-family: 'Open Sans', sans-serif; margin: 1px; /*float: left;*/ width: 49%; display: inline;}#interactive button > label{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 0.1s ease;}#interactive button:hover{ color: #115278; background: #f1f1f1; border-color: #115278; text-decoration: underline;}#interactive button.is-checked { color: #f1f1f1; border: 1px solid #115278; background-color: #115278;}#interactive button.is-checked ~ label { color: #fff; background-color: #115278;}#interactive button.is-checked:hover > label{ cursor: default;}#interactive #legend, #interactive #collapseButton{ text-align: center; margin: 0.5rem auto; /*width: 258px;*/ max-width: 620px; width: 100%; margin-top: 0.6rem;}#interactive #collapseButton { margin-bottom: 15px;}#interactive button.chevron{ border: 0; position: absolute; right: 0; width: 8px; text-align: center; padding: 0 1em;}#interactive .chevron::before { border-style: solid; border-width: 0.25em 0.25em 0 0; content: ''; display: inline-block; left: -0.25em; position: relative; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); vertical-align: middle; padding: 3px;}#interactive .chevron.bottom:before { top: 0; transform: rotate(135deg); -webkit-transform: rotate(135deg);}/*#expand{ width: 20px; height: 20px; background:rgba(0,0,0,0.2); border:1px solid grey; position: absolute; top: 4px; right: 4px; position: fixed;}#expand.is-sticky{}*//* -------------------------------- Modules - reusable parts of our design-------------------------------- */#interactive .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; margin: 0 auto;}#interactive .cd-container::after { /* clearfix */ content: ''; display: table; clear: both;}/* -------------------------------- Main components -------------------------------- */#interactive header { line-height: 1.6; padding: 20px; text-align: center; background: #115278; font-family: 'Stag Medium', 'Open Sans', sans-serif ;}#interactive header h1 { color: #f1f1f1; font-size: 24px; font-size: 1.5rem;}#interactive .cd-timeline-block:after { content: ""; display: table; clear: both;}#interactive .cd-timeline-block { position: relative; margin-top: 30px; padding: 0 0 30px 0; width: 100%; border-bottom: 1px solid #DCDCDC;}#interactive .cd-timeline-content:after { content: ""; display: table; clear: both;}#interactive .dateTime{ float:left; width: 100%;}#interactive .body{ width: 100%; float: left;}#interactive #cd-timeline { max-width:620px;}#interactive #cd-timeline iframe{ display: block; margin: 30px auto 0; /*min-height:200px;*/ width: 100%;}#interactive .cd-timeline-block img { width: 100%; float: right; display: block; margin: 30px auto 0; clear:both; /*height: 200px;*/}#interactive .cd-timeline-block .credit{ clear: both; font-size: 11px; color:#595959; padding-top: 0.5em; padding-top: 0.5rem; padding-bottom: 0.5em; padding-bottom: 0.5rem; margin-bottom: 0.5em; margin-bottom: 0.5rem; border-bottom: 1px solid #eeeeee; display: block;}#interactive .cd-timeline-block .category{ padding: 3px 5px; float: left; font-size: 12px; margin: 1px 2px 1px 0; min-width: 80px; text-align:center; margin-top: 30px; border: 1px solid #C3C3C3; color: #C3C3C3;}#interactive .cd-timeline-content .cd-title { clear:both; color: #000000; font-size: 18px; font-family: 'Stag Medium','Open Sans',sans-serif; line-height: 1.2; margin-right: 30px; display: inline-block;}#interactive .cd-timeline-content p { clear:both; font-size: 14px; line-height: 1.6; margin-top: 30px; color: #333;}#interactive .cd-timeline-content .info{ opacity: 1; display:table; transition: all 0.3s;}#interactive .cd-timeline-content .info.hidden { display:none; opacity: 0;}#interactive .cd-timeline-content .cd-date { text-align: left; line-height: 1.2; font-size: 14px; margin-bottom:10px; /*margin-top:30px;*/ font-weight: bold; font-family: 'Open Sans', sans-serif; color: #666666;}#interactive .cd-timeline-block .cd-date-hidden { visibility:hidden; height: 0px;}@media only screen and (min-width: 468px) { #interactive .cd-timeline-content .cd-title, #interactive .cd-timeline-content .cd-date { /*margin-top: 30px;*/ font-size: 24px; } #interactive .cd-timeline-content .cd-date{ font-size: 18px; } #interactive .cd-timeline-content p { clear:none; font-size: 14px; } #interactive .cd-timeline-block .image.rel.portrait { float:right; margin-left: 20px; max-width: 50%; } #interactive .cd-timeline-block img{ margin-bottom: 2px; } #interactive .dateTime{ float:left; width: 33%; margin-right: 20px; } #interactive .body{ width: 60%; float: left; } #interactive .body.full{ width: 60%; float: none; margin: 0 auto; } #interactive header { line-height: 1.6; } #interactive header h1{ line-height: 1.6; }/* #interactive #legend{ width: 516px; }*/ #interactive button{ padding: .3em 1em; width: 24.5%; } #interactive button.chevron{ padding: 0.3em 1em; }}/*** GEM LOADING ANIMATION ***/#gem .north.outer { opacity: 0.15; -webkit-animation: hideshowOuter 3s ease infinite; animation: hideshowOuter 3s ease infinite; }#gem .northeast { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.1s ease infinite; animation: hideshowOuter 3s 0.1s ease infinite; }#gem .east.outer { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.2s ease infinite; animation: hideshowOuter 3s 0.2s ease infinite; }#gem .southeast { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.3s ease infinite; animation: hideshowOuter 3s 0.3s ease infinite; }#gem .south.outer { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.4s ease infinite; animation: hideshowOuter 3s 0.4s ease infinite; }#gem .southwest { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.5s ease infinite; animation: hideshowOuter 3s 0.5s ease infinite; }#gem .west.outer { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.6s ease infinite; animation: hideshowOuter 3s 0.6s ease infinite; }#gem .northwest { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.7s ease infinite; animation: hideshowOuter 3s 0.7s ease infinite; }#gem .north.inner { opacity: 0.15; -webkit-animation: hideshowOuter 3s 0.9s ease infinite; animation: hideshowOuter 3s 0.9s ease infinite; }#gem .east.inner { opacity: 0.15; -webkit-animation: hideshowOuter 3s 1.1s ease infinite; animation: hideshowOuter 3s 1.1s ease infinite; }#gem .south.inner { opacity: 0.15; -webkit-animation: hideshowOuter 3s 1.3s ease infinite; animation: hideshowOuter 3s 1.3s ease infinite; }#gem .west.inner { opacity: 0.15; -webkit-animation: hideshowOuter 3s 1.5s ease infinite; animation: hideshowOuter 3s 1.5s ease infinite; }#gem .center { opacity: 0.15; -webkit-animation: hideshowOuter 3s 1.8s ease infinite; animation: hideshowOuter 3s 1.8s ease infinite; }@-webkit-keyframes hideshowOuter { 0% { opacity: 0.15; } 20% { opacity: 1; } 50% { opacity: 1; } 70% { opacity: 0.15; } }@keyframes hideshowOuter { 0% { opacity: 0.15; } 20% { opacity: 1; } 50% { opacity: 1; } 70% { opacity: 0.15; } }#gem { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); z-index: 99; }#gem svg { position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); }/*IMPORTANT FOR ESI EMBED! Page will not scroll without it*/body, .canvas{ overflow: scroll;}