* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%; }

body {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#493926+0,19140d+100 */
  background: #493926;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #493926 0%, #19140d 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #493926 0%, #19140d 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #493926 0%, #19140d 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#493926', endColorstr='#19140d',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

#mask {
  height: 100%;
  width: 100%;
  overflow: hidden; }

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.topright {
  top: 5%;
  right: 5%; }

.topleft {
  top: 5%;
  left: 5%; }

.bottomleft {
  bottom: 5%;
  left: 5%; }

.bottomright {
  bottom: 5%;
  right: 5%; }

.centerright {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(0%, -50%); }

#sectionssss {
  position: fixed;
  top: 0;
  left: 0;
  width: 900%;
  height: 100%;
  background-size: cover; }
  #sectionssss section {
    width: 11.11111%;
    height: 100%;
    /*border:9px orange solid;*/
    position: relative;
    float: left;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    /*=== DROP SLIDE ===*/ }
    #sectionssss section h1 {
      font-family: 'Lora', serif;
      color: white;
      font-size: 200px;
      position: absolute;
      /*background-color:blue;*/
      margin: 0px;
      text-shadow: 2px 2px #000000;
      z-index: 100; }
    #sectionssss section .hbox {
      text-align: center;
      width: 40%;
      height: auto;
      position: absolute;
      padding: 50px;
      color: white;
      z-index: 20;
      background-color: rgba(51, 51, 51, 0.5);
      border: solid;
      border-color: #A8A15D;
      border-width: 6px;
      padding: 100px;
      -webkit-box-shadow: 0px 0px 0px 16px rgba(51, 51, 51, 0.5);
      -moz-box-shadow: 0px 0px 0px 16px rgba(51, 51, 51, 0.5);
      box-shadow: 0px 0px 0px 16px rgba(51, 51, 51, 0.5); }
      #sectionssss section .hbox h2 {
        font-size: 28px;
        font-family: 'Lora', serif;
        color: #A8A15D; }
      #sectionssss section .hbox p {
        font-size: 20px;
        font-family: 'Lora', serif; }
    #sectionssss section .drop {
      /*width: 100%;
      left:0;
      right: 0;
      position: absolute;*/
      background-size: cover; }
  #sectionssss #slide-10 {
    		/* background-image:url('../assets/images/map_1800.svg');
    		 background-color:black;
    */ }
  #sectionssss #slide-20 {
    overflow: hidden;
    top: auto; }
    #sectionssss #slide-20 .drop {
      /*background-size: cover;*/ }
    #sectionssss #slide-20 img {
      /*position:absolute;
      display: block;*/
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%); }
  #sectionssss #slide-30 {
    background: url("../assets/images/1850_CanalWorkers.jpg") no-repeat center center;
    background-size: cover; }
    #sectionssss #slide-30 .drop {
      background-size: cover; }
    #sectionssss #slide-30 img {
      position: absolute;
      display: block;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 100%;
      height: 100%; }
  #sectionssss #slide-40 {
    background-image: url("../assets/images/1900_ColumbiaWis.jpg");
    background-size: cover; }
    #sectionssss #slide-40 .drop {
      z-index: 5; }
    #sectionssss #slide-40 img {
      position: absolute;
      display: block;
      left: 50%;
      top: 50%;
      width: 100%;
      height: 100%;
      transform: translateX(-50%) translateY(-50%); }
  #sectionssss #slide-50 {
    background: url("../assets/images/1950_LosAngeles.jpg") no-repeat center center;
    background-size: cover; }
    #sectionssss #slide-50 .drop {
      height: 100%;
      width: 100%; }
    #sectionssss #slide-50 img {
      position: absolute;
      display: block;
      left: 50%;
      top: 50%;
      width: 100%;
      height: 100%;
      transform: translateX(-50%) translateY(-50%); }
  #sectionssss #slide-60 {
    background-image: url("../assets/images/Border_Mexico_USA.jpg");
    background-size: cover; }
    #sectionssss #slide-60 .drop {
      height: 100%;
      width: 100%; }
    #sectionssss #slide-60 img {
      position: absolute;
      display: block;
      left: 50%;
      top: 50%;
      width: 100%;
      height: 100%;
      transform: translateX(-50%) translateY(-50%); }
  #sectionssss #slide-70 {
    background-image: url("../assets/images/Reform.jpg");
    background-size: cover; }
  #sectionssss .drop {
    height: 100%;
    width: 100%; }
  #sectionssss img {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%); }

.nav_bar {
  position: fixed;
  bottom: 25px;
  width: 50%;
  height: 5%;
  z-index: 100;
  overflow: hidden; }
  .nav_bar li {
    height: 20px;
    width: 50px;
    display: inline;
    text-decoration: none;
    font-family: 'Lora', serif;
    font-size: 20px;
    margin: 5px;
    color: white; }
  .nav_bar a {
    text-decoration: none;
    color: white; }

.marker {
  height: 25%;
  width: 100%; }

.red {
  background-color: red; }

.green {
  background-color: green; }

.blue {
  background-color: blue; }

.yellow {
  background-color: yellow; }

/*# sourceMappingURL=time_line.css.map */