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

section {
    position: relative;
}

#banner {
    position: relative;
}

#banner .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0; /* Start invisible */
  transition: opacity 2s ease; /* Smooth fade-in effect */
}
#banner .title h1 {
  color: white;
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 90px;
  line-height: 1.5;
  text-shadow: 2px 2px 3px black;
}
#banner .title h2 {
  color: white;
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 60px;
  line-height: 1.5;
  text-shadow: 2px 2px 3px black;
  border: 2px solid white;
  padding: 20px;
}
#banner .title.visible {
  opacity: 1; /* Fully visible */
}
/*************************************************** INFAMY ***************************************************/
#infamy {
  background-color: #253D5B; /* blue color */
  padding: 60px;
  text-align: center;
}
#infamy .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background: url(/Portals/1/Interactive/2024/09-pearlharbor/images/rust/9.png);
  background-size: cover;
  top: 0px;
  left: 0px;
  opacity: .2;
}
#infamy h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
}

#infamy p {
  font-family: 'Montserrat', sans-serif;
  font-weight: medium;
  font-size: 18px;
  text-align: left;
  color: #fff;
  padding: 25px;
  margin: 0;
}
#infamy p span {
  
  color: #fff;
  padding: 2px 5px;
  margin-left: -4px;
  font-weight: bold;
  font-size: 22px;
}
#infamy .content {
  margin-left: auto;
  margin-right: auto;
}
#infamy video {
  width: 100%;
}
#infamy .border {
  border: 4px solid #fff;
}
#infamy .spacing {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
/*************************************************** REFLECTIONS ***************************************************/
#reflections {
  background: #7E6C42;
  padding: 40px 60px;
    position: relative;
}
#reflections h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
  margin: 0;
}
#reflections .drawer h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 25px;
  color: #fff;
  margin: 0;
}
#reflections h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  margin-top: 5px;
}
#reflections p {
  font-family: 'Montserrat', sans-serif;
  font-weight: medium;
  font-size: 18px;
  color: #fff;
  padding: 15px;
  margin: 0;
  text-align: left;
}
#reflections .border {
  border: 4px solid #fff;
}
#reflections .header {
  padding: 20px;
  text-align: center;
}
.lightbox {
  display: none;
}
#reflections .click {
  text-align: center;
}
#reflections button {
  color: #253D5B;
  background: white;
  padding: 10px 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.featherlight-inner {
  padding: 20px;
  text-align: center;
}
.featherlight-content img {
  width: 60%;
  padding-bottom: 10px;
}

.featherlight-content video {
    width:70%;
}
.featherlight-content p {
  text-align: left;
}
#reflections .container-background {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  background-size: cover;
  background-position-x: center;
}
#reflections #witness1 {
  background-image: url(/Portals/1/Interactive/2024/09-pearlharbor/images/lynn-2.png);
    background-position: left;
}
#reflections #witness2 {
  background-image: url(/Portals/1/Interactive/2024/09-pearlharbor/images/chavez.jpg);
    background-position: left;
}
#reflections #witness3 {
  background-image: url(/Portals/1/Interactive/2024/09-pearlharbor/images/shirley.png);
    background-position: left;
}
#reflections #witness4 {
  background-image: url(https://media.defense.gov/2024/Sep/12/2003542908/-1/-1/0/151207-F-LG169-086R.JPG);
}
#reflections #witness5 {
  background-image: url(https://media.defense.gov/2015/Dec/07/2001322914/-1/-1/0/151205-N-RJ834-042.JPG);
}
#reflections #witness6 {
  background-image: url(https://media.defense.gov/2024/Aug/29/2003535405/-1/-1/0/050406-F-1234P-100R.JPG);
}
#reflections .drawer {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, .7);
  transition: all 0.6s ease;
  position: relative;
  top: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}
#reflections .container-background:hover .drawer {
  top: 0px;
}

.featherlight-content a {
    text-decoration: underline;
}
.featherlight-content h2 {
    font-size: 30px;
}

 #reflections .drawer:hover .fa-solid {
        display: none;
         transition: all 0.6s ease;
    }


/*************************************************** BATTLESHIPS ***************************************************/
#battleships {
  padding: 40px 60px;
  background-image: url(/Portals/1/Interactive/2024/09-pearlharbor/images/metal-2.jpg);
  background-size: cover;
     position: relative;
}
#battleships h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
  margin: 0;
}
#battleships h3 {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  color: #fff;
  padding: 15px;
  margin: 0;
  text-align: center;
  text-shadow: 2px 1px 2px black;
}
#battleships p {
  font-family: 'Montserrat', sans-serif;
  font-weight: medium;
  font-size: 18px;
  color: #fff;
  padding: 15px;
  margin: 0;
}
#battleships .header {
  background: #253D5B;
  padding: 20px;
  text-align: center;
    margin-bottom: 20px;
}
#battleships .border {
  border: 4px solid #fff;
  padding: 20px;
}
#battleships img {
  height: 220px;
  object-fit: cover;
  border: 4px solid #fff;
}
#battleships .content {
  position: relative;
  top: 220px;
}
#battleships .img {
  display: flex;
  justify-content: center;
}
#battleships .row {
  width: 100%;
  height: 350px;
}

#battleships .med-row {
  width: 100%;
  height: 320px;
}
#battleships #top1 {
  position: absolute;
  width: auto;
  transform: rotate(7deg);
  transition: 700ms;
}
#battleships #bot1 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top1 {
  transform: rotate(-7deg);
  transition: 700ms;
}
#battleships #top2 {
  position: absolute;
  width: auto;
  transform: rotate(-6deg);
  transition: 700ms;
}
#battleships #bot2 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top2 {
  transform: rotate(6deg);
  transition: 700ms;
}
#battleships #top3 {
  position: absolute;
  width: auto;
  transform: rotate(8deg);
  transition: 700ms;
}
#battleships #bot3 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top3 {
  transform: rotate(-8deg);
  transition: 700ms;
}
#battleships #top4 {
  position: absolute;
  width: auto;
  transform: rotate(-5deg);
  transition: 700ms;
}
#battleships #bot4 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top4 {
  transform: rotate(5deg);
  transition: 700ms;
}
#battleships #top5 {
  position: absolute;
  width: auto;
  transform: rotate(7deg);
  transition: 700ms;
}
#battleships #bot5 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top5 {
  transform: rotate(-7deg);
  transition: 700ms;
}
#battleships #top6 {
  position: absolute;
  width: auto;
  transform: rotate(-8deg);
  transition: 700ms;
}
#battleships #bot6 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top6 {
  transform: rotate(8deg);
  transition: 700ms;
}
#battleships #top7 {
  position: absolute;
  width: auto;
  transform: rotate(7deg);
  transition: 700ms;
}
#battleships #bot7 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top7 {
  transform: rotate(-7deg);
  transition: 700ms;
}
#battleships #top8 {
  position: absolute;
  width: auto;
  transform: rotate(-5deg);
  transition: 700ms;
}
#battleships #bot8 {
  position: absolute;
  width: auto;
  transition: 700ms;
}
#battleships a:hover #top8 {
  transform: rotate(5deg);
  transition: 700ms;
}
#battleships .screw {
  border: none;
  height: 50px;
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translate(-50%);
  filter: drop-shadow(3px 5px 7px black);
  top: 0;
}
#battleships a:hover h3 {
  text-decoration: underline;
  text-decoration-color: white;
}
/*************************************************** FIVE THINGS ***************************************************/
#fivethings {
  padding: 40px 60px;
  background: rgb(37, 61, 91);
  background: linear-gradient(156deg, rgba(37, 61, 91, 1) 0%, rgba(126, 108, 66, 1) 100%);
  box-shadow: 0px 315px 75px -300px rgba(0, 0, 0, 0.6) inset;
}
#fivethings h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
  margin: 0;
}
#fivethings p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  padding: 0 0 20px;
  margin: 0;
}
#fivethings a {
  text-decoration: underline;
}
.tabs-section .tabs {
  width: 100%;
  margin: 0 auto;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
}
.tabs-section img {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09), 0 6px 6px rgba(0, 0, 0, 0.13);
}
.tabs-section section {
  display: none;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 20px rgb(0 0 0 / 9%), 0 6px 6px rgb(0 0 0 / 13%);
  padding: 2rem;
  margin-top: -5px;
}
section {
  flex: 0 0 100%;
}
.tabs-section input {
  display: none;
}
.tabs-section label {
  flex: 1;
  display: inline-block;
  padding: 18px 25px 18px;
  text-align: center;
  color: #253d5b;
  -webkit-transition: ALL 0.15s;
  transition: ALL 0.15s;
  max-width: 19%;
  font-family: "Oswald", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  border-radius: 4px 4px 0 0;
  background: rgba(255, 255, 255, .6);
}
.tabs-section label:hover {
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
}
.tabs-section input:checked + label {
  color: #253d5b;
  background: rgba(255, 255, 255, 0.85);
}
.tabs-section #tab1:checked ~ #content1, .tabs-section #tab2:checked ~ #content2, .tabs-section #tab3:checked ~ #content3, .tabs-section #tab4:checked ~ #content4, .tabs-section #tab5:checked ~ #content5 {
  display: block;
}
.tabs span {
  display: block;
}
#fivethings p span {
  font-family: 'Montserrat', sans-serif;
  font-weight: medium;
  font-size: 14px;
  margin: 0;
  font-style: italic;
  padding-top: 10px;
}
#fivethings .header {
  padding: 20px;
  text-align: center;
}
#fivethings .border {
  border: 4px solid #fff;
  padding: 20px;
}
/*************************************************** HEROES ***************************************************/
#heroes {
  background: #253D5B;
  padding: 40px 60px;
}
#heroes h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
  margin: 0;
}
#heroes .border {
  border: 4px solid #fff;
}
#heroes p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  padding: 15px;
  max-width: 70ch;
  margin: 0 auto;
}
#heroes h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 25px;
  margin: 0;
}
#heroes h3 span {
  font-family: 'Montserrat', sans-serif;
  font-weight: medium;
  font-size: 15px;
  margin: 0;
}
#heroes .header {
  text-align: center;
}
#heroes a.button:hover {
  background-color: #877245;
  text-decoration: none;
}
#heroes .button {
  color: white;
  background: #68511f;
  width: 80%;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  transition: .25s all;
}
#heroes .card {
  background-color: transparent;
  width: 100%;
  height: 380px;
  perspective: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#heroes .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
#heroes .card:hover .card-inner {
  transform: rotateY(180deg);
}
#heroes .card-front, #heroes .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#heroes .card-front {
  background-color: #fff;
  color: black;
}
#heroes .card-back {
  background-color: #fff;
  color: black;
  transform: rotateY(180deg);
}
#heroes .card p {
  border: 4px solid #253D5B;
  padding: 5px;
  color: #253D5B;
}
#heroes .titles {
  height: 80px;
}
#heroes .border {
  padding: 20px;
}
/*************************************************** GO FOR BROKE ***************************************************/
#goforbroke {
  background: url(/Portals/1/Interactive/2024/09-pearlharbor/images/goforbroke.jpg);
  background-size: cover;
  background-position: center right;
  padding: 40px 60px;
}
#goforbroke h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
  margin: 0;
}
#goforbroke .blurbs {
  padding: 10px 5px;
}
#goforbroke p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-align: left;
  color: #fff;
  margin: 0;
  padding-top: 1rem;
}
#goforbroke .screen {
  background: rgb(43 36 21);
  background: linear-gradient(90deg, #2b2516 40%, rgba(0, 0, 0, .2) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
}
#goforbroke .content {
  z-index: 2;
  text-align: center;
}
#goforbroke .border {
  border: 4px solid #fff;
}
#goforbroke a.btn.btn-default {
  width: 100%;
  margin-top: 1.5rem;
  background-color: #68511f;
  color: #fff;
}
#goforbroke a.btn.btn-default:hover {
  background-color: #877245;
}
span.dgov-word-anchor {
  font-size: unset;
  font-style: unset;
}
#goforbroke p .credit {
  font-style: italic;
  font-size: 14px;
    position: absolute;
    bottom: 0px;
}
/*************************************************** THROUGH THE YEARS ***************************************************/
#throughtheyears {
  padding: 40px 60px 0px;
}
#throughtheyears h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #0C1F2D;
  margin: 0;
  text-align: center;
}
#throughtheyears p {
  font-family: 'Montserrat', sans-serif;
  font-weight: medium;
  font-size: 18px;
  text-align: center;
  color: #0C1F2D;
  padding: 15px;
  margin: 0;
}
#throughtheyears .border {
  border: 4px solid #0C1F2D;
  padding: 20px;
}
/*************************************************** LEGACY ***************************************************/
#legacy-video {
  width: 100%;
  height: 100%;
   position: relative;
  z-index: -100;
}
#legacy {
  display: flex;
  position: absolute;
  z-index: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px;
}
#legacy h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
  margin: 0;
  padding: 20px;
  text-align: center;
}
#legacy .border {
  border: 4px solid #fff;
  width: 100%;
}
/*************************************************** RELATED LINKS ***************************************************/
#relatedlinks {
  z-index: 12;
  position: relative;
  background: white;
  background-color: #253D5B;
  padding: 60px;
    margin-top: -4px;
}
#relatedlinks .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background: url(/Portals/1/Interactive/2024/09-pearlharbor/images/rust/4.png);
  background-size: cover;
  top: 0px;
  left: 0px;
  opacity: .2;
}
#relatedlinks h3 span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: white;
  text-shadow: 2px 2px 3px black;
}
#relatedlinks h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: white;
}
#relatedlinks .related {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  top: 20px;
  margin: auto;
  border: 4px solid #fff;
}
#relatedlinks h2 {
  margin: 0px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 50px;
}
#relatedlinks .invert {
  margin-bottom: 0px;
}
#relatedlinks .max {
  max-width: 1800px;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto;
}
#relatedlinks .sec2 {
  background-image: url(https://media.defense.gov/2016/Dec/07/2001675833/-1/-1/0/161206-D-BN624-081.JPG);
  transition: 1000ms;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  padding: 20px 0px;
}
#relatedlinks .sec2:hover {
  transition: 1000ms;
  transform: scale(1.1);
}
#relatedlinks .sec2 .content, #relatedlinks .sec3 .content, #relatedlinks .sec4 .content, #relatedlinks .sec5 .content, #relatedlinks .sec6 .content, #relatedlinks .sec7 .content {
  text-align: center;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 300px;
}
#relatedlinks .sec2:hover .content, #relatedlinks .sec3:hover .content, #relatedlinks .sec4:hover .content,#relatedlinks .sec5:hover .content, #relatedlinks .sec6:hover .content, #relatedlinks .sec7:hover .content {
  background: rgba(0, 0, 0, 0);
}
#relatedlinks .sec3 {
  background-image: url(https://media.defense.gov/2019/Oct/22/2002198961/-1/-1/0/450413-O-ZZ999-001C.JPG);
  transition: 1000ms;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  padding: 20px 0px;
}
#relatedlinks .sec3:hover {
  transition: 1000ms;
  transform: scale(1.1);
}
#relatedlinks .sec4 {
  background-image: url(https://media.defense.gov/2021/Jun/28/2002751011/-1/-1/0/210624-F-YU668-0053R.JPG);
  transition: 1000ms;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  padding: 20px 0px;
}
#relatedlinks .sec4:hover {
  transition: 1000ms;
  transform: scale(1.1);
}
#relatedlinks .sec5 {
  background-image: url(https://media.defense.gov/2022/Dec/01/2003123904/-1/-1/0/411207-N-D0439-017.JPG);
  transition: 1000ms;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  padding: 20px 0px;
}
#relatedlinks .sec5:hover {
  transition: 1000ms;
  transform: scale(1.1);
}
#relatedlinks .sec6 {
  background-image: url(https://media.defense.gov/2020/Aug/07/2002472503/-1/-1/0/160507-M-TA471-009A.JPG);
  transition: 1000ms;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  padding: 20px 0px;
}
#relatedlinks .sec6:hover {
  transition: 1000ms;
  transform: scale(1.1);
}
#relatedlinks .sec7 {
  background-image: url(/Portals/1/Interactive/2024/09-pearlharbor/images/190507-O-PP334-004.jpeg);
  transition: 1000ms;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  padding: 20px 0px;
}
#relatedlinks .sec7:hover {
  transition: 1000ms;
  transform: scale(1.1);
}
#relatedlinks a:hover {
  text-decoration: none;
  color: white;
}
#relatedlinks a:hover span {
  text-decoration: underline;
  color: white;
}
/*************************************************** RESPONSIVE ***************************************************/
/* Laptops - MD */
@media only screen and (min-width: 1200px) {
 
    #battleships .row {
        display: block;
    }
    #battleships .med-row {
        display: none;
    }
    #battleships .mini-row {
        display: none;
    }
    
}

@media only screen and (max-width: 1200px) {
    
    #reflections .drawer h2 {
  font-size: 25px;
}
    #battleships .row {
        display: block;
    }
    #battleships .med-row {
        display: none;
    }
    
    #battleships .mini-row {
        display: none;
    }
    
}




/* Tablets - SM */
@media only screen and (max-width: 991px) {
  
    #banner-video {
        padding-top: 90px!important;
    }
    
    #battleships .row {
        display: none;
    }
     #battleships .med-row {
        display: block;
    }
    #battleships .mini-row {
        display: none;
    }
    
    #goforbroke .screen {
    background: linear-gradient(90deg, #2b2516 40%, rgba(0, 0, 0, .6) 100%);
  }
  #fivethings {
    padding: 40px 30px;
  }
    #fivethings p {
        padding: 0;
    }
  .tabs-section label {
    padding: 10px;
    font-size: 20px;
  }
}




/* Phones - XS */
@media only screen and (max-width: 768px) {
    .featherlight-content video {
        width: 100%;
    }
    #banner span {
        font-family: "Imperial Script", cursive;
    font-weight: 400;
    font-size: 60px;
    }
    #banner .title h1 {
  font-size: 50px;
  line-height: 1.2;
}
#banner .title h2 {
  font-size: 30px;
  line-height: 1;
}
    
    #fivethings {
    padding: 40px 15px;
  }
  #fivethings h2 {
    font-size: 40px;
  }
    #heroes img {
        max-width: 80%;
        margin-left: auto;
    margin-right: auto;
    }
  .tabs-section label {
    padding: 10px 5px;
    max-width: unset;
    font-size: 17px;
    box-shadow: -1px 0px 4px 0px;
  }
    #heroes h2 {
        font-size: 40px;
    }
    
    #battleships .row {
        display: none;
    }
     #battleships .med-row {
        display: none;
    }
    #battleships .mini-row {
        display: block;
    width: 100%;
    height: 350px;
    }
    section {
        overflow: hidden;
    }
    .slick-dots {
    display: none;
}
}





@media only screen and (max-width: 530px) {
  #banner span {
    font-family: "Imperial Script", cursive;
    font-size: 40px;
    font-weight: 400; 
    }
    
    #goforbroke {
    padding: 40px 10px;
  }
  #goforbroke h2 {
    font-size: 40px;
  }
  #goforbroke a.btn.btn-default {
    padding: 10px;
  }
    #legacy {
        padding: 40px;
    }
    #legacy h2 {
        font-size: 30px;
    }
    
    #battleships {
        padding: 40px 0px;
    }
    
    #banner .title h2 {
        padding: 10px;
        font-size: 18px;
    }
    
    #banner .title h1 {
        font-size: 25px;
        line-height: 1.2;
    }
    
    .dgov-container {
        padding: 0px;
    }
    
    #reflections h2 {
        font-size: 40px;
    }
    #reflections .drawer h2 {
        font-size: 20px;
        padding-bottom: 5px; 
    }
    
    #heroes {
        padding: 40px 30px;
    }
    #throughtheyears h2 {
        font-size: 40px;
    }
    
    #legacy h2 {
        padding: 10px;
        font-size: 20px;
    }
    
    #battleships .row {
        display: none;
    }
     #battleships .med-row {
        display: none;
    }
    #battleships .mini-row {
        display: block;
    width: 100%;
    height: 340px;
    }
    
    #battleships .content {
        top: 230px;
    }
    #reflections {
        padding: 40px 15px;
    }
    #infamy {
        padding: 40px 15px;
    }
    #battleships {
        padding: 40px 15px;
    }
    #heroes {
        padding: 40px 15px;
    }
    #throughtheyears {
        padding: 40px 15px 0px;
    }
    #banner .title {
        padding-top:  80px;
    }
    #battleships #top1, #battleships #bot1, #battleships #top2, #battleships #bot2, #battleships #top3, #battleships #bot3, #battleships #top4, #battleships #bot4, #battleships #top5, #battleships #bot5, #battleships #top6, #battleships #bot6, #battleships #top7, #battleships #bot7, #battleships #top8, #battleships #bot8 {
        width: 80%
    }
    
    #infamy .btn {
        margin-top: 20px;
    }
    .featherlight-content h2 {
        font-size: 20px!important;
    }
    .featherlight-content video {
        width: 100%;
        padding-bottom: 10px;
    }
    .featherlight-content img {
        width: 100%;
    }
    #relatedlinks h2 {
    margin: 0px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 30px;
    padding: 10px;
    }
    
    #relatedlinks h3 span {
        font-size: 20px;
    }
    
    #relatedlinks h3 {
        line-height: 1;
    }
    
    #relatedlinks .sec2 .content, #relatedlinks .sec3 .content, #relatedlinks .sec4 .content, #relatedlinks .sec5 .content, #relatedlinks .sec6 .content, #relatedlinks .sec7 .content { 
        min-height: 150px;
    }
    #relatedlinks {
        padding: 20px;
    }
    .slick-dots {
    display: none;
}
}




@media only screen and (max-width: 460px) {
  .tabs-section label {
    font-size: 15px;
    max-width: 100%;
    padding: 18px 25px 18px;
    margin-bottom: 0px;
  }
  #fivethings p {
    padding: 15px 0;
  }
    
#battleships .row {
        display: none;
    }
     #battleships .med-row {
        display: none;
    }
    #battleships .mini-row {
        display: block;
    width: 100%;
    height: 340px;
    }
    .slick-dots {
    display: none;
}
}





@media only screen and (max-width: 390px) {
  .tabs-section label {
    font-size: 14px;
    max-width: 100%;
    padding: 18px 25px 18px;
    margin-bottom: 0px;
  }
    .slick-dots {
    display: none;
}
}