@import url('https://fonts.googleapis.com/css?family=Special+Elite');

@font-face {
    font-family: 'high_jakartaregular';
    src: url('highjakarta-webfont.woff2') format('woff2'),
         url('highjakarta-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'boxingregular';
    src: url('boxing-webfont.woff2') format('woff2'),
         url('boxing-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'medio_vintage_roughregular';
    src: url('medio_vintage_rough-webfont.woff2') format('woff2'),
         url('medio_vintage_rough-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'komika_axisregular';
    src: url('komikax_-webfont.woff2') format('woff2'),
         url('komikax_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.snapshot{
  display: block;
  margin-left: 150px;
  /*margin-right: auto;*/
  padding-bottom:5px;
}

.caption {
	font-family: 'Source Code Pro', monospace;
	font-size: 15px;
	margin-left: 50px;
	color: grey;
	margin-bottom: 15px;
	/*text-align: center;*/
}

.formative-years {
  display:flex;
  flex-direction:column;
  margin-left: 100px;
}

.column-CH1 {
  /*flex: 40%;*/
  padding: 5px;
}

.secondDecade {
  display:flex;
  flex-direction:column;
}

.column-CH2 img{
  /*flex: 50%;*/
  margin-left: 150px;
  margin-right:auto;
  padding: 5px;
}

blockquote {
    position:relative;
    left:150px;
    margin-top:40px;   
    margin-left: 150px;
    margin-right:150px;
    margin-bottom:30px;
    margin: 0;
}

.quote {
  width:700px;
}
.quote p {
    margin-top:40px;      
    padding: 15px;
    font-size:22px;
    font-family:'komika_axisregular';
    background: #eee;
    border-radius: 15px;
}

.quote p::before {
    content: '\201C';
}

.quote p::after {
    content: '\201D';
}

.quote-source {
  padding-top:0px;
  right:300px;
  /* text-align: center; */
  padding-bottom: 25px;
} 

.big-container{
  display:flex;
  flex-direction:row;
  position:relative;
}

.flex-container-1 {
  /*width: 24px;*/
  height: 24px;
}

.intro{
  text-align: center;
  margin:auto;
}

.hero1 {
  padding-top: 2vh;
  background-image: url("https://ids.si.edu/ids/deliveryService?max=800&id=NMAAHC-2016_164_22_2_001");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: #C6962F;
  min-height: 800px; 
  /*font-size:52px;*/
  /*line-height:30px;*/
  height: 100vh;
  position:relative;
  z-index: 11;
  /*height: 100%;*/
}

.intro h2 {
  font-family:'high_jakartaregular';
  margin: auto;
  padding: 100px 0 100px;
  font-size:120px;
  font-weight:bold;
}

.intro p {
  font-family: 'boxingregular';
  /*font-family:'roboto';*/
  margin: auto;
  /*color:#C64B2F;*/
  color:white;
  font-size:42px;
}
.chevron {
  /*position: absolute;*/
  margin: auto;
  align-items: center;
  width: 28px;
  height: 12px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: grey;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.text {
  display: block;
  margin-top: 15px;
  text-align: center;
  /*margin-right: -30px;*/
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 16px;
  color: grey;
  text-transform: uppercase;
  /*white-space: nowrap;*/
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}

section {
  height: 20vh;
}

.filler{
    height: 25rem;
    /*display: flex;*/
    justify-content: center;
}

.filler h4{
  text-align: center;
  font-family:'high_jakartaregular';
  font-size:24px;
  color:#C6962F;
  margin-bottom:0;
}

.filler p{
  /*text-align: center;*/
  font-family:'courier';
  /*font-family:'high_jakartaregular';*/
  font-size: 18px;
  text-align: justify;
  /*text-justify: inter-word;*/
  margin-left: auto;
  margin-right:auto;
  padding-left: 150px;
  padding-right:150px;
  font-weight:normal;
  font-style:normal;
}


.sidenav {
  height: 100%; 
  width: 170px;
  /*position: sticky; */
  position:fixed;
  z-index: 10;
  top: 0; 
  /*margin:10;*/
  /*font-size:0;*/
  /*padding-bottom: 15;*/
  /*background-color: #111;*/
  background-color: #eed6bc;
  overflow-x: hidden; 
}

/* The navigation menu links */
.sidenav h4 a {
  padding-left: 10px;
  padding-top: 10px;
  text-decoration: none;
  font-size: 24px;
  /*font-family: courier;*/
  font-family:'high_jakartaregular';
  /*color: #868686;*/
  color:black;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav h4 a:hover {
  /*color:#d74620;*/
  color:#d6342b;
  font-size:26px;
}

.sidenav a {
/*color: #868686;*/
padding-left: 0px;
color: #91808b;
text-decoration: none;
list-style-type: none;/* Remove bullets */
/*font-weight: bold;*/
font-family:'courier';
font-size:16px;
/*margin-top:30*/
}

.sidenav ul {
  padding-left: 20px;
}

.sidenav li :hover {
  color: #b07662;
  font-size:20px;
  font-weight: bold;
  font-family:'helvetica';
}
.no-bullets{
  list-style-type: none;
  margin: 0;
  /*padding: 0;*/
}


/* Style page content */
.main {
  margin-left: 150px; 
  /* Same as the width of the sidebar */
  /*width:calc(100% - 160px);*/
  z-index:5;
  padding: 0px 0px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

#scrolly-bottom .main.scrolly {
  /*display: flex;*/
  /*padding-left: 50px;*/
  /*max-width: 100rem;*/
  width: 90%;
  /*width:calc(100%-160px);*/
  margin: 3em auto;
  background-color: #f4f4f4;
  padding: 1rem;
}

#scrolly-bottom .scrolly > * {
  flex: 1;
}
#scrolly-bottom .scrolly article {
  padding-right: 1rem;
  /*max-width: 40rem;*/
  max-width: 100rem;
}
#scrolly-bottom .scrolly article .step {
  /*padding-left: 50px;*/
  min-height: 100vh;
  font-size: 18px;
  /*margin-bottom: 2rem;*/
  background-color: #898989;
  transition: background-color 250ms ease-in-out;
}
#scrolly-bottom .scrolly article .step p {
padding-left: 150px;
padding-right:200px;
text-align: justify;
text-justify: inter-word;
/*font-family: 'courier';*/
}

.narrative{
font-family: courier;
padding-left: 100px;
margin-right:400px;
}

#scrolly-bottom .scrolly article .step h4 {
    font-family:'high_jakartaregular';
    font-size: 50px;
    text-align: center;
    margin:auto;
    color:#d6342b;
    padding-top: 15px;
    padding-bottom:30px;
}

#scrolly-bottom .scrolly article .step:last-of-type {
  margin-bottom: 0;
}

#scrolly-bottom .scrolly article .step.is-active {
  background-color: #eed6bc;
  /*background-color: #d8b99a;*/
  color:black;
}

#scrolly-bottom .scrolly article.step.is-active h4{
  color: #d6342b;
  /*color:white;*/
}
  
/*#scrolly-bottom .scrolly article.step h4 {*/
/*  margin: 0;*/
/*  padding: 5rem;*/
/*  text-align: center;*/
  /*position:relative;*/
  /*font-family: "medio_vintage_roughregular";*/
  /*font-weight: 100;*/
/*  color: #e8e2db;*/
/*}*/

#scrolly-bottom .scrolly figure.sticky {
  /*position: sticky;*/
  position:fixed;
  width: 1500px;
  /*height: 50vh;*/
  height:13vh;
  background-color: #eed6bc;
  transform: translateX(3%);
  /*background-color:#111;*/
  /*background-color:#b39689;*/
  margin: 0;
  bottom: 0;
  right: 50;
  /*left:50;*/
  border-radius: 15px;
}
/*#scrolly-bottom .scrolly figure.sticky .flex-container {*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 5%;*/
/*  transform: translateY(-10%);*/
/*  width: 90%;*/
/*  height: 30rem;*/
/*  background-color: #fff;*/
  /*display: flex;*/
  /*flex-direction:row;*/
/*  border-radius: 15px;*/
/*}*/

#scrolly-bottom .scrolly figure.sticky .flex-container {
  position: absolute;
  top: 55%;
  /*left: 2%;*/
  transform: translateY(-10%);
  /*transform:translateX(2%);*/
  z-index: 25;
  width: 95%;
  height: 3rem;
  /*background-color: #ebe8ea;*/
  background-color: #f6f4f5;
  border-radius: 25px;
}

/*#scrolly-bottom .scrolly figure.sticky .flex-container.bar-wins {*/
  /*margin:auto;*/
/*  width: 20%;*/
/*  height: 100%;*/
/*  border-radius: 15px;*/
/*  transition: width 1s ease-in-out;*/
  /*background-color: #d6342b;*/
/*}*/

/*#scrolly-bottom .scrolly figure.sticky.flex-container.bar-losses {*/
  /*margin:auto;*/
/*  width: 20%;*/
/*  height: 100%;*/
/*  border-radius: 15px;*/
/*  transition: width 1s ease-in-out;*/
  /*background-color: #daa520;*/
  /*background-color:blue;*/
/*}*/

#scrolly-bottom .scrolly figure.sticky p {
  text-align: center;
  margin: 2;
  /*padding: 2px;*/
  font-family: 'medio_vintage_roughregular';
  /*font-weight: 400;*/
  font-size: 18px;
  color: #22201b;
}

.fullscreen-image {	
	position: relative;
	z-index: 6;
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*margin-top: 400px;;*/
}

.fullscreen-image img {
	/*position: absolute;*/
	/*min-width: 400px;*/
	height:auto;
	margin-left:-170px;
	/*width:100%;*/
	width: 100vw; 
	/*left: -50px;*/
	/*margin-top: 500px;*/
	/*margin-bottom:500px;*/
	z-index: 8;
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fullscreen-image h1 {
	position: absolute;
	right: 0;
	color: #fff;
}

/*.bottom-left-title {*/
  /*margin: 20px;*/
/*  z-index:9;*/
/*}*/

.bottom-left-title h1 {
  position: absolute;
  bottom: 8px;
  z-index:9;
  left: 56px;
  font-size:90px;
  /*font-family:'komika_axisregular';*/
  font-family: 'high_jakartaregular';
  color:#d6342b;
}

.js-floating-text span {
  position:fixed;
  text-align: justify;
  z-index:20;
  font-size: 20px;
  border-radius: 20px;
  color: black;
  background: #eed6bc;
  font-family:'courier';
  font-weight:bold;
  font-style:normal;
  bottom: 400px;
  width:450px;
  right: 10vh;
  padding: 10px 15px;
}

.js-floating-score span {
  position:fixed;
  z-index:20;
  font-size: 24px;
  border-radius: 15px;
  /* color:#d6342b; */
  /* color: #C6962F; */
  /* background: #111; */
  /* background-color: #6c7474; */
  color: hsla(0,0%,20%,1);
text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;

background-color: hsl(0,0%,90%);
box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
  inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
  inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
  inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */  
  hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
  hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */ 
border-radius: 80px;
  text-align: center;
  font-family:'komika_axisregular';
  font-weight:normal;
  font-style:normal;
  bottom: 85px;
  width:600px;
  left: 450px;
  padding: 10px 15px;
}





#tooltip {
   pointer-events: none;
   font-size: 12px;
   z-index: 25;
   padding: 4px;
   /*border: 1px solid #CCC;*/
   border-radius: 25px;
}

.suspension{
  color:red;
}

.finalblock{
  height:150px;
}