@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black'); 

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Luxurious+Script&display=swap'); 

    
    body {
	scroll-behavior: smooth;
}
/*************************************************** Top Banner ***************************************************/
   .banner {
  position: relative;
  height: 100vh;
  overflow: hidden;
  z-index: 5;
  background: url(/Portals/1/SANDBOXES/ANielsen/DODTimeline/historybackground.jpg) #000 no-repeat center center;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.banner .content {
  display: flex;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9752275910364145) 0%, rgba(0, 0, 0, 0) 31%);
    justify-content: center;
    align-items: center;
}
.banner .content h1{
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffffe3;
  font-size: 3.7em;
  text-align: center;
  font-weight: 400;
  padding-bottom: 20px;
  margin-bottom: -15px;
  text-shadow: 1px 1px 2px #000000de;
}
.banner .content h1 span{
  font-family: 'Luxurious Script', cursive;
  color: #ffffffe3;
  font-size: 1em;
  text-align: center;
  font-weight: 400;
  padding-bottom: 20px;
  margin-bottom: -15px;
  text-shadow: 1px 1px 2px #000000de;
}
.banner .content h2 {
  font-family: 'Luxurious Script', cursive;
  color: #ffffffe3;
  text-align: center;
  font-weight: 400;
  font-size: 2em;
  line-height: .5;
  position: relative;
}
.banner .box {
  position: relative;
  width: 100%;
  max-width: 900px;
}
.banner img {
    max-height: 700px
}
.banner .content p:before, .content p:after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}
.banner .content p:before {
  margin-right: 10px
}
.banner .content p:after {
  margin-left: 10px}
    
.banner .box {
          padding: 30px;
    background: rgba(0,0,0,.7);
    }
    #datenav {
        position: absolute;
        top: 85%;
        width:100%;
    }
    
    #datenav .btn {
        width: 100%;
        color: #fff;
         font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-size: 1.5em;
    }
    
    #datenav .btn-17 {
            background: rgba(0,0,0,.7);
    border: 3px solid #C10230;
       
  
    }
#datenav .btn-17:hover {
            background: #C10230;
    border: 3px solid #C10230!important;
       
  
    }
    #datenav .btn-18 {
         background: rgba(0,0,0,.7);
    border: 3px solid #002169;
   
   
    }
#datenav .btn-18:hover {
         background: #002169;
    border: 3px solid #002169!important;
   
   
    }
    #datenav .btn-19 {
         background: rgba(0,0,0,.7);
    border: 3px solid #4D5A31;
    
     
    }
 #datenav .btn-19:hover {
         background: #4D5A31;
    border: 3px solid #4D5A31!important;
    
     
    }
    #datenav .btn-20 {
         background: rgba(0,0,0,.7);
    border: 3px solid #623C21;
       
    
    } 
 #datenav .btn-20:hover {
         background: #623C21;
    border: 3px solid #623C21!important;
       
    
    } 


    
    #timelinewrap1700 .contentslicecentury {
        background: none;
    }
    
    /*************************************************** TIMELINE Container ***************************************************/
#dodhistory {
    height: 100%;
    width: 100%;
}
.timelinewrap {
    position: sticky;
    top: 0px;
}
/*******************************.contentslice::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(4px);
    opacity: .4;
}
/*************************************************** Content Backgrounds ***************************************************/
#jun1775 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1700s-images/1-jun1775.jpg');
     margin-top: -100px;
}
#oct1775 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1700s-images/2-oct1775.jpeg');
}
#nov1775 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1700s-images/3-nov1775.jpeg');
}
#jul1776 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1700s-images/4-jul1776-2.jpg');
}
#sep1783 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1700s-images/5-sep1783-2.jpg');
}
#aug1789 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#aug1790 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1700s-images/6-aug1790.png');
}
#apr1798 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1700s-images/7-april1798.jpeg');
}
#mar1802 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/1-march1802.jpeg');
     margin-top: -100px;
}
#jun1812 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/2-june1812.jpg');
}
#aug1814 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/3-aug1814-3.jpeg');
}
#feb1815 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/4-feb1815.jpg');
}
#jun1834 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/5-june1834.jpeg');
}
#oct1845 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/6-oct1845-2.jpeg');
}
#may1846 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/7-may1846-2.jpg');
}
#jul1850 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/8-july1850.jpeg');
}
#apr1861 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/231116-D-D0439-100.jpg');
}
#year1889 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/10-1889.jpeg');
}
#apr1898 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/11-feb1899.jpeg');
}
#feb1899 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1800s-images/12-1899.jpg');
}
#apr1917 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/1-apr1917.jpeg');
     margin-top: -100px;
}
#jul1926 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/2-july1926.jpeg');
}
#year1940 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#jul1941 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#sep1941 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/4-sep1941.jpeg');
}
#dec1941 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/5-dec1941.gif');
}
#jan1943 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#may1945 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/7-may81945.jpeg');
}
#sep1945 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/8-sep1945.jpeg');
}
#mar1947 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/9-mar1947.jpeg');
}
#jul1947 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/10-jul1947.tif.jpg');
}
#sep171947 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#sep1947 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/11-sept1947.jpg');
}
#aug1949 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/13-aug1949.JPG');
}
#aug19492 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#jun1950 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/14-jun1950.JPG');
}
#jul1953 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/15-jul1953.JPG');
}
#apr1954 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/16-apr1954.JPG');
}
#mar1965 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/17-mar1965.png');
}
#mar1973 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#jan1991 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/1900s-images/19-Jan1991.jpeg');
}
#dec1991 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#sep2001 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/2000s-images/1-sept2001.jpeg');
     margin-top: -100px;
}
#oct2001 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/2000s-images/2-oct2001.jpg');
}
#mar2003 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/2000s-images/3-mar2003.jpg');
}
#sep2008 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/2000s-images/4-sept2008.jpg');
}
#dec2011 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/2000s-images/5-dec2011.jpg');
}
#aug2014 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/2000s-images/6-aug2014.jpg');
}
#dec2014 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#dec2019 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
#aug2021 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG');
}
/*************************************************** TIMELINE BAR ***************************************************/

main {
    background: #000;
}

main > nav {
  position: sticky;
  top: 2rem;
  align-self: start;
}

#years {
    height: 100%;
    z-index: 1;
    position: relative;
    padding-top: 100px;
}
#years nav {
    position: sticky;
    top: 10px;
}

#years nav ul li a {
    position: relative;
    color: white;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-weight: 700;
    opacity: 1;
    transition: .3s ease-in-out;
}
    #years nav ul li.active a {
    position: relative;
    color: white;
    font-size: 2em;
    text-align: center;
    text-decoration: none;
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-weight: 700;
    opacity: 1;

}
   
    #years nav ul li a:hover {
    text-align: center;
        text-decoration: underline;
    transition: .3s ease-in-out;
        background: rgba(0,0,0,.7);
}
#years nav ul li.active a:hover {
    font-size: 2em;
    text-align: center;
        text-decoration: none;
    opacity: 1;
        background: none;
    border: none;
}
    
#years nav ul li ul {
    display:none;
}
    #years nav ul li.active ul.subnav {
    display:block;
         position: relative;
    color: white;
    text-align: center;
    text-decoration: none;
   font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-weight: 700;
    padding: 0px 15px;
        margin-left:0;
        margin-top: -20px;
}

    #years nav ul li.active ul.subnav li a {
        position: relative;
    color: white;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-weight: 700;
    opacity: 1;
}
    #years nav ul li.active ul.subnav li.active a {
        text-decoration: underline;
}
    
    
#years nav ul li {
    line-height: 2;
}
#timeline-nav .btn:hover {
     background: rgba(0,0,0,.7);
    text-decoration: underline;
}
 /*************************************************** TIMELINE CONTENT ***************************************************/
div.slider {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/**div.contentslice {
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}**/
.datecontent {
    padding: 15px;
    position: relative;
    border-radius: 5px;
    max-width: 80%;
    margin: auto;
}
.datecontent .date {
    text-align: center;
    border-bottom: 3px solid white;
    padding-bottom: 20px;
}

.mediacontent a {
    text-decoration: none;
}
.mediacontent a:hover {
    background: none;
    padding: 0px;
}

.datecontent img {
    max-height: 400px;
    object-fit: contain;
    transition: 1s ease;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid white;
    -webkit-filter: brightness(.7);
   filter: brightness(.7);
}
.datecontent img:hover {
    border: 5px solid white;
    -webkit-filter: brightness(1);
   filter: brightness(1);
    transition: 1s ease;
}

.datecontent h1 {
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    color: white;
}
.datecontent h2 {
    font-family: Archivo Black;
    color: white;
    font-size: 1.5rem;
}
.datecontent p {
    color: white;
    max-width: 600px;
    font-size: 25px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    
}
.datecontent .mediacontent {
    text-align: center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.copy a {
    color: #fff;
    text-decoration: underline;
}
.copy a:hover {
    background-color: white;
    color: black;
    transition: .7s ease;
}

.source a {
    color: #fff !important;
    text-decoration: underline !important;
}
.slider .fa {
    font-size: 45px;
    z-index: 9;
    position: relative;
    color: #E4E4E4;
}
.slider .fa-chevron-right {
    right: 100px;
}
.slider .fa-chevron-left {
    left: 100px;
}
.slick-arrow:hover {
    color: #355e93;
}
.lightbox {
    display: none;
}
.slick-track {
    height: 1249px;
}
.bar {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 4px;
    height: 100%;
    background: white;
    opacity: .8;
}
.slider-pentagon {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.years {
    padding: 0px;
    z-index: 1000;
}
.pentagon {
    padding-left: 0px;
}
.featherlight .featherlight-content {
    margin-left: 15%!important;
    margin-right: 15%!important;
    padding: 40px 40px!important;
    border-bottom: none!important;
}
.featherlight .featherlight-close-icon {
    line-height: 50px!important;
    width: 40px!important;
    font-size: 30px!important;
    top: -2px!important;
    right: 1px!important;
}
.featherlight h2{
    font-size: 1.5em!important;
}
.featherlight p {
    font-size: 18px!important;
}

 .featherlight .btn {
        width: auto;
        color: #fff;
         font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-size: 1.5em;
    }

.featherlight .btn-17 {
            background: rgba(0,0,0,.7);
    border: 3px solid #C10230;
       
  
    }
.featherlight .btn-17:hover {
            background: #C10230;
    border: 3px solid #C10230!important;
       
  
    }
   .featherlight .btn-18 {
         background: rgba(0,0,0,.7);
    border: 3px solid #002169;
   
   
    }
.featherlight .btn-18:hover {
         background: #002169;
    border: 3px solid #002169!important;
   
   
    }
   .featherlight .btn-19 {
         background: rgba(0,0,0,.7);
    border: 3px solid #4D5A31;
    
     
    }
.featherlight .btn-19:hover {
         background: #4D5A31;
    border: 3px solid #4D5A31!important;
    
     
    }
.featherlight .btn-20 {
         background: rgba(0,0,0,.7);
    border: 3px solid #623C21;
       
    
    } 
.featherlight .btn-20:hover {
         background: #623C21;
    border: 3px solid #623C21!important;
       
    
    } 

.sectiontitle1700 h1 {
    color: #fff;
    text-align: center;
    margin:0;
    padding: 20px;
}
.sectiontitle1800 h1 {
    color: #fff;
    text-align: center;
    margin:0;
    padding: 20px;
}
.sectiontitle1900 h1 {
    color: #fff;
    text-align: center;
    margin:0;
    padding: 20px;
}
.sectiontitle2000 h1 {
    color: #fff;
    text-align: center;
    margin:0;
    padding: 20px;
}



    .contentslicecentury {
        height: 150px;
    }
    
    #1700s .century {
    color: #fff;
    text-align: center;
    margin:0;
    }
    
    .contentslicecentury h1 {
        text-align: center;
        font-size: 3em;
    }
   #timelinewrap1700 .contentslicecentury {
        background: none;

    }
#timelinewrap1800 .contentslicecentury {
        background: none;

    }
#timelinewrap1900 .contentslicecentury {
        background: none;
    margin-bottom: 40px;

    }
#timelinewrap2000 .contentslicecentury {
        background: none;

    }

.sectiontitle1700 {
    background-color: #C10230;
}
#timelinewrap1700 #years {
    background-color: #C10230;
}
.sectiontitle1800 {
    background-color: #002169;
}
#timelinewrap1800 #years {
    background-color: #002169;
}
.sectiontitle1900 {
    background-color: #4D5A31;
}
#timelinewrap1900 #years {
    background-color: #4D5A31;
}
.sectiontitle2000 {
     background-color: #623C21;
}
#timelinewrap2000 #years {
    background-color: #623C21;
}


.backfilter {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0,0,0,.8);
}
.right {
    box-shadow: -10px 10px 5px 0px rgba(255,255,255,0.75) inset;
    -webkit-box-shadow: -7px 7px 25px -4px rgba(0,0,0,1) inset;
    -moz-box-shadow: -10px 10px 5px 0px rgba(255,255,255,0.75) inset;
}
.left {
    box-shadow: 10px 10px 5px 0px rgba(255,255,255,0.75) inset;
    -webkit-box-shadow: 7px 7px 25px -4px rgba(0,0,0,1) inset;
    -moz-box-shadow: 10px 10px 5px 0px rgba(255,255,255,0.75) inset;
}
.contentslice {
    height: 70vh;
    min-height: 800px;
    display: flex;
    align-content: center;
}
 #dodhistory .btn {
       color: #fff;
        font-size: 1em;
    text-decoration: none;
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-weight: 700;
    text-align: center;
    width: 100%;
    }



.yearsmobile {
    display: none;
}
    .yearscontent {
        padding: 0px;
        
    }
   


.contentbox {
        display: flex;
        align-items: center;
    }

#datenav .btn {
    transition: .3s ease-in-out;
}
#datenav .btn:hover {
    text-decoration: underline;
    transition: .3s ease-in-out;
}
.contentbox {
    display: flex;
}
.dropbtn {
     width: 25%;
        color: #fff;
         font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-size: 1em;
    color: black;
}
    .dropbtn:hover {
     width: 25%;
        color: #fff;
         font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-size: 1em;
    color: black;
        border: 3px solid black;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: relative;
    background-color: #f9f9f9;
   width: 25%;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #fff;
}
    
    #datenavmobile .btn {
        width: 100%;
        color: #fff;
         font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        font-size: 1em;
    }
    
    #datenavmobile .btn-17 {
            background: rgba(0,0,0,.7);
    border: 3px solid #C10230;
       
  
    }
#datenavmobile .btn-17:hover {
            background: #C10230;
    border: 3px solid #C10230!important;
       
  
    }
    #datenavmobile .btn-18 {
         background: rgba(0,0,0,.7);
    border: 3px solid #002169;
   
   
    }
#datenavmobile .btn-18:hover {
         background: #002169;
    border: 3px solid #002169!important;
   
   
    }
    #datenavmobile .btn-19 {
         background: rgba(0,0,0,.7);
    border: 3px solid #4D5A31;
    
     
    }
 #datenavmobile .btn-19:hover {
         background: #4D5A31;
    border: 3px solid #4D5A31!important;
    
     
    }
    #datenavmobile .btn-20 {
         background: rgba(0,0,0,.7);
    border: 3px solid #623C21;
       
    
    } 
 #datenavmobile .btn-20:hover {
         background: #623C21;
    border: 3px solid #623C21!important;
       
    
    } 
.learnmore {
    text-align: center;
}
     
    
    #datenavmobile {
        display: none;
    }
.banner .mobilebox {
        display:none;
    }

        .banner .mobilebox {
  position: relative;
  width: 100%;
  max-width: 900px;
}
    .banner .mobilebox {
          padding: 30px;
    background: rgba(0,0,0,.7);
    }
#tours {
    background: url('/Portals/1/Interactive/2023/11-historyofdod/dodoverview.JPG') #000 no-repeat center center;
    background-size: cover;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
#tours .content {
    padding: 70px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.8);
        width: 100%;
}
#tours .btn {
    width: 100%;
    color: #fff;
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 1.5em;
    border: 3px solid white;
    background: none;
    width: 40%;
    margin-top: 30px;
}
#tours .btn:hover {
    width: 100%;
    color: #000;
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 1.5em;
    border: 3px solid white;
    background: #fff;
}
#tours h2 {
    color: white;
    font-family: 'oswald', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 2em;
}
    
@media screen and (max-width: 996px) {
.yearsmobile {
    display: block;
    position: sticky;
    top: 0px;
    z-index: 1000;
    padding: 0px;
    transition: 0.5s;
    height: 80px;
}
.years {
    display: none;
}
#years nav ul li {
    display: none;
}
#years nav ul li.active a {
    padding-bottom: 0px;
}
#timelinewrap1700 #years nav ul li.active {
    display: block;
 background-color: #C10230;
}
    #timelinewrap1800 #years nav ul li.active {
    display: block;
 background-color: #002169;
}
    #timelinewrap1900 #years nav ul li.active {
    display: block;
 background-color: #4D5A31;
}
    #timelinewrap2000 #years nav ul li.active {
    display: block;
 background-color: #623C21;
}
   
    
    
#years {
    padding-top: 70px;
}
    .contentslice {
        height: 60vh;
    }
    
    .banner .content {
        text-align: center;
    }
    .banner .content h1 {
        font-size: 2.5em;
    }
    .banner .content h1 span {
        font-size: 1em;
    }
    .banner img {
        max-height: 400px;
    }
    #datenav {
        position: absolute;
        top: 70%;
        width:100%;
    }
    #datenav h1{
        font-size: 1em;
    }
    
}
@media screen and (max-width: 770px) {
    #datenav {
        display: none;
    } 
    .featherlight .featherlight-content {
    margin-left: 10%!important;
    margin-right: 10%!important;
    padding: 20px 20px!important;
    border-bottom: none!important;
}
    .featherlight .featherlight-image {
        width: 100%!important;
        height: 100%!important;
    }
    .datecontent {
        max-width: 90%;
    }
    .contentslice {
        height: auto;
        padding: 50px 0px;
        min-height: auto;
    }
    #datenavmobile {
        display: block;
    }
    
    
    #timelinewrap1700 #years {
        background-color: transparent;
    }
    #timelinewrap1800 #years {
        background-color: transparent;
    }
    #timelinewrap1900 #years {
        background-color: transparent;
    }
    
    #timelinewrap2000 #years {
        background-color: transparent;
    }
    .banner {
    height: 100vh;
        overflow: visible;}
        
   .banner img {
        max-height: 100px;
    }
        .banner .mobilebox {
            display: block;
        }
       .banner .box{
            display: none;
        }
    #tours .btn {
        width: 100%;
    }
    #timelinewrap2000 .contentslicecentury {
        margin-bottom: 70px;

    }
    .featherlight .featherlight-close-icon {
    font-size: 22px!important;
    top: -6px!important;
    right: 0px!important;
}
    
}


@media screen and (max-width: 550px) {
   
    #timelinewrap2000 .contentslicecentury {
        margin-bottom: 90px;
        padding-bottom: 90px;

    }
    
}