/* HEADER NAV */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: white;
    z-index: 1000000;
    display: block;
}
.progress .bar {
  height: 100%;
  width: 0%;
  background: #ffc600;
  transition: background 0.15s ease;
    padding: 0 !important;
    margin: 0 !important;
}

.menu {
    width: 100%;
    padding: 0 !important;
}
.menu li:first-child {
    padding-top: 0;
}
.header li {
    float: left;
    width: calc(100% / 7);
    text-align: center;
    position: relative;
    z-index: 1000;
    display: block;
        height: 75px;
}
.header li a {
    font-size: 14px;
    height: 100%;
    position: relative;
    transition: all 0.2s;
    padding: 0px;
    line-height: 75px;
}
 .header .menu {
    clear: none;
    float: right;
    max-height: none;
    height: 75px;
    background: #eaeaea;
}
.header .menu-icon {
    display: none;
}
li.current a::after {
    height: 50px;
    width: 50px;
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    left: calc(50% - 25px);
    background: #d2d2d2;
    border-radius: 50%;
    z-index: -1;
}
li.current a {
    border-left: none;
    margin-left: 0;
    font-weight: 600;
}


.header li::before {
    height: 50px;
    width: 50px;
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    left: calc(50% - 25px);
    background: #dedede;
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: all 0.2s;
}
.header li:hover::before {
    opacity: 1;
}



.header {
    position: relative;
}
.sticky {
  position: fixed;
  top: 0;
}

#last {
    line-height: normal;
    padding-top: 21px;
    width: 99px;
    margin: 0 auto;
}




/*FLIPPY CIRCLE*/
.grid {
    padding: 0 18vw;
    margin-top: 0px;
}
.scene {
    width: 32vw;
    height: 32vw;
}
.grid .scene:nth-child(1), .grid .scene:nth-child(2) {
    margin-bottom: 31vw;
}

.homepage-intro {
    top: 34vw;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    left: 0;
}
.homepage-intro h2 {
    padding: 20px 0;
}


/*WIDTHS*/
#message .container, .finances .container, .footer .container {
    width: 725px;
    margin: 0 auto;
}




/*INTEO MESSAGE*/
.fry {
    padding: 0px 40px 40px 40px;
}
.headshot {
    width: 80%;
}
#message .left {
    width: 30%;
    float: left;
}
#message .right {
    width: 70%;
    float: right;
    padding-left: 20px;
    padding-right: 10px;
    border-left: 1px solid black;
}
#message blockquote::before {
    left: -87px;
    top: 151px;
}


/*INTRO HEADSHOTS*/
figure {
    float: left;
    width: 250px;
    margin-left: -150px;
}
figure img {
    width: 100%;
}
figcaption {
    background: white;
    margin-top: -6px;
    text-align: center;
    padding: 15px 0px;
}



.arrows.top {
    transform: scale(1.3);
    top: 191px;
}
.arrows.bottom {
    transform: scale(1.3);
    top: 321px;
    right: -134px;
}



.datasetrenderer section {
    padding-top: 55px;
}
.intro h2 {
    padding-top: 0;
}
.intro .container {
    margin-top: 30px;
    width: 725px;
    margin-left: auto;
    margin-right: auto;
}
.circle-img.small {
    width: 300px;
    height: 300px;
    margin-top: -104px;
    margin-left: 470px;
}
.circle-img.big {
    width: 660px;
       height: 660px;
    margin-top: -171px;
}


.blurb {
    display: block;
    width: calc(100% - 350px);
}



.dot.one {
    display: block; 
}
.dot.animate.one {
    width: 200px;
    height: 200px;
    right: -179px;
    top: -363px;
}
.dot.animate.two {
    width: 470px;
    height: 470px;
    right: -311px;
    top: -253px;
}
.dot.animate.three {
    width: 350px;
    height: 350px;
    left: -212px;
    bottom: -50px;
}



.clearfix {
    clear: both;
    display: block;
    height: 80px;
}







.slide.feature {
    width: 500px;
}






/* =====  TABLE OF CONTENTS  ===== */
.toc {
    background: #eaeaea;
    position: relative;
    padding-bottom: 19px;
    height: 230px;
    border-bottom: 5px solid #d2d2d2;
}
.toc::before {
    width: 200vw;
    height: 50%;
    content: "";
    position: absolute;
    bottom: 0;
    left: -50vw;
    border-bottom: 6px solid #d5d5d5;
    box-shadow: 0px 16px 21px -21px rgba(0,0,0,0.5);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgb(255, 255, 255) 43%, rgb(255, 255, 255) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgb(255, 255, 255) 43%,rgb(255, 255, 255) 100%);
    z-index: -1;
}
.toc .smaller {
    display: block;
}
.toc .container {
    overflow: hidden;
    width: 100vw;
    margin-left: -15px;
    border-top: 11px solid #07294d;
}
.toc h2.smaller {
    text-align: center;
    font-size: 53px;
    margin-bottom: 21px;
    margin-top: 34px;
}





/* =====  VIDEO CIRCLES  ===== */

.ilightbox-video.video {
     font-size: 30px;
}
.ilightbox-video.video span.above {
    margin-top: -93px;
}
.ilightbox-video.video span.below {
    margin-top: 112px;
}
.ilightbox-video.video span {
    width: 60%;
    margin-left: 20%;
}



#finances {
    padding-top: 70px;
}
.finances h2 {
    font-size: 110px !important;
    line-height: 101px;
}
.finances .blurb {
    width: 100% !important;
}


.fundraising .arrows.top {
    top: 512px;
}


.money .dot.animate.one {
    width: 300px;
    height: 300px;
}
.money .arrows.top {
    top: 64px;
    right: -444px;
}




.col-6 {
    width: 50%;
    float: left;
}
#footer .row {
    overflow: hidden;
}