@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
A:active {
  text-decoration: none;
  outline: none;
}
.overlay {
  background-image: linear-gradient(to bottom right, #002f4b, #5a1c10);
  opacity: 0.6;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 15% 32px;
  line-height: 1.5;
  text-align: center;
}
.side-nav {
  display: none;
}
p {
  font-size: 18px;
  line-height: 1.4;
}
.other-units, .footer-search, #footer-main, #extended-nav {
  z-index: 9999;
}
/***new arrows fontawesome to replace images **/
.arrow {
  margin: 0 auto;
}
i.fa-solid.fa-down-long {
  font-size: 4rem;
  color: #e8b00f;
}
.blue.fa-down-long {
  text-shadow: 0px 8px 0px #052a3a;
}
.white.fa-down-long {
  text-shadow: 0px 8px 0px #fffef9;
}
.single.fa-down-long {
  padding: 1.5rem 0 1rem;
}
.fa-right-long {
  font-size: 4rem;
  color: #e8b00f;
}
.third-section .right-side .both-arrow {
  top: 42%;
  left: -60px;
}
.fourth-section .right-side .both-arrow {
  top: 10%;
  left: -45px;
}
.fa-right-long.blue {
  text-shadow: 8px 0px 0px #052a3a;
}
.fa-right-long.white {
  text-shadow: 8px 0px 0px #fffef9;
}
/*** new component seals with flex instead of grid ****/
.seal span {
  display: block;
  white-space: nowrap;
}
.commander-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
}
.commander-grid .seal {
  flex: 1 1 200px;
  max-width: 250px;
  max-height: 180px;
}
.commander-grid.seal a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.commander-grid.command-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.commander-grid.seal img {
  max-width: 100%;
  height: auto;
  display: block;
}
.top-seal {
  position: relative;
  z-index: 2;
  left: -40px;
}
.bottom-seal {
  position: relative;
  top: -125px;
  left: 60px;
  z-index: 1;
}
/**** new combatant seals using flex instead of grid ****/
.combatant-grid, .shore-command, .type-command.row2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  width: 100%; /* container full width */
  max-width: 950px;
  margin: 0 auto;
}
.combatant-grid .seal, .shore-command .seal {
  flex: 1 1 calc(33.333% - 1.333rem); /* 3 per row accounting for gap */
  max-width: 200px; /* optional: controls item size */
}
.type-command.row2 {
  gap: 1rem;
}
.type-command.row2 .seal {
  flex: 1 1 calc(25% - 1.333rem);
  max-width: 200px;
}
.combatant-grid .command-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.combatant-grid .seal img {
  width: 115px;
}
/*** shore command flex instead of grid ***/
.shore-command .seal img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.seal img.enlarge {
  width: 170px;
}
.shore-command .command-title {
  margin: 0.5rem 0 1rem;
  font-weight: 600;
  font-size: 1rem;
  min-height: 3em;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/**** type commands flexbox instead of grid ***/
.type-command {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1280px;
}
.type-command.row2 {
  max-width: 1020px;
}
.type-command .card {
  flex: 1 1 30%;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #ffffff17;
  padding: 1rem 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  align-items: center;
  justify-content: space-between;
}
.type-command .seal a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.command-title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0.5rem 0 1rem;
}
.fleet-icon, .seal img {
  max-width: 100%;
  height: auto;
  margin: 0 auto 1rem;
}
.locations {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.second-command-title {
  margin: 0.25rem 0;
  font-size: 0.95rem;
  font-weight: 500;
}
/**** system commands flexbox instead of grid ***/
.system-command {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 950px;
}
.system-command .seal {
  flex: 1 1 220px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.system-command .seal a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.system-command .command-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 1rem;
  min-height: 3em;
  align-items: flex-start;
  text-align: center;
}
.type-command .card .command-title {
  text-transform: uppercase;
}
/* images align with each other */
.system-command img {
  max-width: 120px;
  height: auto;
  margin-top: auto;
}
/****************************************************
 NUMBER COUNTER
****************************************************/
.stats {
  display: flex;
  justify-content: center;
  width: 100vw;
  z-index: 1;
  background-color: #052a3a;
  position: relative;
  padding: 1rem;
  box-shadow: inset -4px 0px 14px 0px rgba(0, 0, 0, 0.56);
  background-image: linear-gradient(180deg, #022a3ad9 0%, #011c26e0 37%), url(/Portals/1/Interactive/2019/05-military-units/navy-cammo.jpg);
}
.single-counterup {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stats .title {
  font-family: 'Oswald';
  color: #fffef9;
  font-size: 1.4rem;
}
span.count-num.plus {
  min-width: 400px;
  color: #ffcc01;
  font-weight: 900;
  padding: 0 15px 10px;
  font-size: 5rem;
  text-align: center;
  text-shadow: 1px 1px 2px black;
}
/***********************************************************
TO TOP ARROW BUTTON -- NOTE: CHANGE MODULE NUMBER TO MATCH NEW PAGE
************************************************************/
.DnnModule.DnnModule-DNN_HTML.DnnModule-9134 {
  z-index: 5000;
  position: relative;
}
.DnnModule-DNN_HTML.DnnModule-9134 .top {
  bottom: 20px;
  position: fixed;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.DnnModule-DNN_HTML.DnnModule-9134 .top::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: transparent;
}
.DnnModule-DNN_HTML.DnnModule-9134 .top.show {
  opacity: 1;
  pointer-events: auto;
}
.btn-success, .btn-success:visited {
  background: #221f1f;
  color: #e8b00f;
  border: 1px solid #e8b00f;
}
i.fa.fa-arrow-up {
  margin-top: 6px;
  margin-left: -6px;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: #e8b00f;
  border: 1px solid #e8b00f;
  color: #000000;
}
#footer, #footer-hosting {
  position: relative;
  z-index: 5001 !important;
}
#dnn_ContentPaneFullBleed1 {
  background: linear-gradient(to bottom right, #002f4b, #5a1c10);
}
/*****************************************************
 NEW BANNER STYLES 
******************************************************/
#navy {
  position: relative;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  overflow: hidden;
  width: 100vw;
  background-position: 50% 87%;
  background-size: cover;
  /*background-image: linear-gradient(180deg, #022a3a57 0%, #011c26a1 55%), url(https://media.defense.gov/2025/Nov/04/2003818850/1200/1200/0/251001-N-IF194-4296E.JPG);*/
	background-image: linear-gradient(to bottom right, #002f4b, #5a1c10);
}
.updated {
  position: absolute;
  bottom: 80px;
  right: 20px;
  font-size: 14px;
  z-index: 500;
  color: #d9d9d9;
  margin: 0;
  font-style: italic;
}
#navy video {
  object-fit: cover;
  width: 100vw;
  height: 100dvh;
}
.top-description {
  text-align: center;
  transition: .25s;
}
.top-description p {
  color: #fffef9;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: -15px;
}
.top-description p::before {
  content: "";
  display: inline-block;
  border-top: 3px solid #fffef9;
  width: 2rem;
  margin: 0 1rem;
  transform: translateY(-6px);
}
.top-description p::after {
  content: "";
  display: inline-block;
  border-top: 3px solid #fffef9;
  width: 2rem;
  margin: 0 1rem;
  transform: translateY(-6px);
}
.wrap-center {
  z-index: 100;
  position: absolute;
  /* top: 30%; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  transition: .25s;
}
#navy h1.title {
  font-family: 'Lato';
  color: #fffef9;
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 3px 0px #022a3a;
  line-height: .9;
  font-size: 10rem;
  padding-top: .5rem;
  transition: .25s;
}
#navy h2.title span {
  color: #c3a703;
}
.hero-video {
  position: relative;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}
/* VIDEO — fades in on capable devices */
.hero-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  animation: videoFadeIn 1.5s ease-out forwards;
}
/* FALLBACK IMAGE — responsive + fades in */
.hero-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* shown only on iOS */
  opacity: 0;
  animation: imageFadeIn 1.2s ease-out forwards;
}
/* Fade-in animations */
@keyframes videoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes imageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* iOS ONLY — swap video for fallback image */
@supports (-webkit-touch-callout: none) {
  .hero-video-el {
    display: none !important;
  }
  .hero-fallback {
    display: block !important;
  }
}
/* Overlay gradient */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #002f4b, #5a1c10);
  opacity: 0.55;
  z-index: 2;
}
.video-wrapper {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-fallback {
  display: none; /* only shown on iOS */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#navy h2.title {
  font-family: 'Lato';
  color: #fffef9;
  text-transform: uppercase;
  font-size: 8rem;
  font-weight: 900;
  text-shadow: 3px 0px black;
}
img.seals.wow.fadeInUp {
  z-index: 101;
  top: 28%;
  position: absolute;
  transition: .25s;
}
/****************************************************
BANNER TOP NAV 
*****************************************************/
.nav-buttons {
  background: #000000;
  display: flex;
  gap: 20px;
  justify-content: center;
  position: absolute;
  z-index: 102;
  padding: 5px;
  margin-top: 0;
  bottom: 0;
  width: 100%;
  align-items: center;
}
.nav-buttons .matrix {
  position: relative;
  padding: 10px 40px;
  font-size: 17px;
  color: #fffef9;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
  white-space: nowrap;
}
.matrix {
  background: #000;
  border: 1px solid #56bc91;
  color: #0f0;
  border-radius: 50px;
}
.matrix a {
  color: #fffef9;
  text-decoration: none;
  transition: .3s;
}
a .matrix:hover {
  color: #bdd8ff;
  text-decoration: none;
  opacity: 1;
  text-shadow: 6px 0px 4px #28baf98f;
}
.code-rain {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0076a900 0%, #0076a98a 50%, #0076a900 100%);
  opacity: 0;
  transition: 0.3s;
}
.matrix:hover .code-rain {
  opacity: 1;
  animation: rain 1s linear infinite;
}
@keyframes rain {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
/***************************************************
	GLOBAL
***************************************************/
html {
  scroll-behavior: smooth;
}
/****************************************************
PRIORITIES
****************************************************/
#priorities .content {
  padding: 0 30px;
}
#priorities .content-wrap {
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}
#priorities {
  background-image: linear-gradient(to bottom right, rgb(28 71 90), rgb(7 42 58));
  display: flex;
  justify-content: center;
  background-color: #022a3a;
  padding: 4rem 0;
  box-shadow: inset -4px 0px 14px 0px rgba(0, 0, 0, 0.56);
}
.stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  width: 100%;
  box-sizing: border-box;
}
.stories .grid {
  width: 100%;
}
.desc {
  background: #052a3ac7;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 185px;
  transform: translateY(118px);
  transition: transform 0.3s ease;
  z-index: 3;
  padding: 25px;
}
.stories .grid .container:hover .desc {
  transform: translateY(0);
}
.desc h3 {
  font-family: oswald;
  text-transform: uppercase;
  color: #fffef9;
  font-weight: 500;
  font-size: 1.2em;
  margin-bottom: 18px;
  text-align: left;
  border-left: 5px solid #e8b00f;
  padding-left: 8px;
  line-height: .9;
  /* letter-spacing: -.5px; */
}
.desc p {
  color: #fffef9;
  font-size: 17px;
  margin: 0;
  text-align: left;
}
.stories .grid .container {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
}
.grid .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: inherit;
  opacity: 1;
  transition: 300ms ease;
  top: 0;
  position: relative;
}
.stories .grid .video {
  border-radius: inherit;
  inset: 0;
  z-index: 1;
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 400px;
}
.stories .grid .container:hover .image {
  opacity: 0;
}
/**************************************************
***************************************************
GENERIC SLIDESHOW
***************************************************
**************************************************/
img.cropzoomimg-img.cropzoomFillHeight {
  border-radius: 15px;
}
.cropzoomimg-container .cropzoomimg-img.cropzoomFillHeight, img.cropzoomimg-img {
  border-radius: 15px;
  padding: .3rem;
  background-color: #072a3a;
  transform: translateX(-50%);
}
.hover-overlay-layer {
  border: 5px solid #e8b00f;
  border-radius: 15px;
}
div#featuregrid-id-9156 {
  color: #e8b00f;
  text-align: center;
  font-family: lato;
  text-transform: uppercase;
}
/*** photo gallery pop up ***/
.dgov2-popup-container[data-v-0e7a03d2] {
  border-radius: 15px !important;
  background-color: #022a3a !important;
}
.dgov2-popup-close[data-v-0e7a03d2] {
  font-size: 2em !important;
  right: -13px !important;
  top: -5px !important;
  color: #e8b00f !important;
}
.cropzoomimg-container .cropzoomimg-img.cropzoomFillHeight {
  background-color: transparent !important;
}
.cropzoomimg-container .cropzoomimg-img.cropzoomFillHeight, img.cropzoomimg-img {
  border-radius: 10px !important;
}
.dgov2-popup-container[data-v-0e7a03d2] {
  padding: 15px !important;
}
.cropzoomimg-container .cropzoomimg-img.cropzoomFillHeight, img.cropzoomimg-img {
  padding: 0 !important;
}
.dgov2-popup-close[data-v-0e7a03d2] {
  top: 0px !important;
  right: 10px !important;
  color: #e8b00f !important;
  padding: 0 !important;
  font-size: 2.8em !important;
}
.cropzoomimg-container .cropzoomimg-img.cropzoomFillHeight {
  border-radius: 15px !important;
}
.dgov2-popup-container .dgov2-popup-contents .dgov2-popup-media[data-v-0e7a03d2] {
  background-color: #022a3a !important;
  border-radius: 12px 12px 0 0 !important;
}
.dgov2-popup-container .dgov2-popup-contents .dgov2-popup-info[data-v-0e7a03d2] {
  background-color: #022a3a !important;
  border-radius: 0 0 12px 12px !important;
}
.dgov2-slickslideshow .slick-prev.slick-arrow, .dgov2-slickslideshow .slick-next.slick-arrow {
  top: 51% !important;
}
.dgov2-slickslideshow .slick-next.slick-arrow {
  margin-right: 35px !important;
}
.dgov2-slickslideshow .slick-prev.slick-arrow {
  margin-left: 35px !important;
}
/*** end photo gallery pop up ***/
#content-pane-wrap6 {
  padding: 5rem 30px;
  background-color: #212121;
  background: url(/Portals/1/Interactive/2021/10-tomb-of-the-unkown-soldier/bkgd.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #121212;
}
#content-pane-wrap6 .af-title h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #fffef9;
  font-size: 3rem;
}
.top-rotator .top {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: transparent;
  position: relative;
}
.top-rotator.slideshow {
  max-width: 950px;
  margin: 0 auto;
}
.top-rotator.slideshow .bottom {
  left: 25px;
  right: -25px;
  background: -webkit-linear-gradient(top, rgb(0 0 0 / 44%) 0%, rgba(0, 0, 0, 0.95) 100%);
}
.GenericSlideshow .slideWrapper .rsNav .rsNavSelected {
  background-color: #ffcc01;
  border-color: #ffcc01;
}
.GenericSlideshow .slideWrapper .rsNav .rsNavItem:hover {
  background-color: #e8b00f;
  border-color: #e8b00f;
}
.GenericSlideshow .slideWrapper .slideContainer .rsArrow.rsArrowLeft {
  color: #fff;
}
.GenericSlideshow .slideWrapper .slideContainer .rsArrow {
  color: #ffff;
}
.rsArrow.rsArrowLeft {
  background: linear-gradient(-90deg, #022a3a00 0%, #022a3ac7 100%);
}
.rsArrow.rsArrowRight {
  background: linear-gradient(90deg, #022a3a00 0%, #022a3ac7 100%);
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .bottom {
  display: none;
}
.GenericSlideshow .slideWrapper .rsNav .rsNavItem {
  width: 25px;
  height: 15px;
  border: 1px solid #e8b00f;
  border-radius: 50px;
  background-color: #221f1f;
  border-color: #e8b00f;
}
.GenericSlideshow .slideWrapper .rsNav .rsNavSelected {
  width: 25px;
  height: 15px;
  background-color: #e8b00f;
  border-color: #e8b00f;
}
.top-rotator a.slide-inner {
  border-radius: 12px;
}
.top-rotator .top {
  background: #18161c;
}
span.slideTitle {
  display: none;
}
.tomb-slider p {
  text-align: center;
}
.tomb-slider {
  padding: 5rem 10rem 0;
}
.GenericSlideshow {
  padding: 0 10rem 5rem;
}
span.slideCaption {
  font-size: 1.3em;
  color: #ffffff;
  font-weight: 300;
  line-height: 1.6em;
}
.GenericSlideshow .slideWrapper .rsNav {
  text-align: center;
  width: 100% !important;
  margin-top: 40px;
}
.bottom {
  padding: 1rem 3rem;
}
span.slideCaptionDivider {
  display: none;
}
.GenericSlideshow .slideWrapper .slideContainer {
  margin-bottom: -30px;
}
.GenericSlideshowItem a {
  border-radius: 12px;
}
.afTopRotator {
  width: 980px !important;
  height: auto;
}
#dnn_ContentPane6 .pagination {
  display: none;
}
/*** VIDEO SLICE ****/
#video-slice {
  position: relative;
  background-color: #000;
  overflow: hidden;
  max-height: 380px;
}
#video-slice .video-wrapper {
  position: relative;
  height: 60vh;
  min-height: 250px;
  max-height: 500px;
  overflow: hidden;
}
#video-slice video, #video-slice .mobile-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#video-slice video {
  z-index: 1;
}
#video-slice .mobile-fallback {
  display: none;
  object-position: center;
  z-index: 1;
}
/* Overlay for text readability */
#video-slice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
  z-index: 1;
}
/* Centered text overlay */
#video-slice .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  width: max-content;
  color: #fff;
  padding: 0 10px;
}
#video-slice h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 1rem;
  font-weight: 100;
  line-height: 1.1;
}
#video-slice span {
  display: block;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  border-bottom: 2px solid #e8b00f;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
/****************************************************
NAVY 101 SLIDESHOW 
*****************************************************/
div#dnn_ctr9139_HtmlModule_lblContent {
  background-color: #000000;
}
#about {
  padding: 2rem 0 6rem;
  width: 100vw;
  background-image: linear-gradient(180deg, #022a3a 0%, #7093a2c4 106%), url(/Portals/1/Interactive/2019/05-military-units/navy-cammo.jpg);
  /*background-image: linear-gradient(180deg, #022a3ad6 0%, #011c26eb 55%), url(/Portals/1/Interactive/2019/05-military-units/navy-cammo.jpg);*/
  z-index: 1;
  position: relative;
  box-shadow: inset -4px 0px 14px 0px rgba(0, 0, 0, 0.56);
}
#units.background {
  width: 100vw;
  z-index: 1;
  position: relative;
  background-size: cover;
  box-shadow: inset -4px 0px 14px 0px rgba(0, 0, 0, 0.56);
}
/*#units.background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/Portals/1/Interactive/2019/05-military-units/banner-bkgd.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  transform: rotate(180deg);
}*/
#units .content {
  color: #fffef9;
  text-align: center;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  pointer-events: auto;
  background-image: linear-gradient(180deg, #022a3ad9 0%, #011c26e0 37%), url(/Portals/1/Interactive/2019/05-military-units/navy-cammo.jpg);
  /* background: linear-gradient(180deg, #022a3af7 0%, #011c26bd 85%); */
  /* background-color: #022a3ac7; */
}
#about .content {
  color: #fffef9;
  text-align: center;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 30px;
  pointer-events: auto;
}
.navy-title {
  padding: 0 10px;
}
.content h2 {
  color: #fffef9;
  font-size: 3rem;
  margin-bottom: 0;
}
.content .blurb {
  max-width: 75ch;
  color: #fffef9;
  line-height: 1.4;
  padding: 30px 0 0;
}
#wrapper {
  height: 65vh;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 700px;
  padding: 0 30px;
}
#wrapper .slideshow {
  position: relative;
  color: #ffffff;
  background-color: #1e1e22;
  overflow: hidden;
  height: 65vh;
  min-height: 700px;
  border-radius: 10px;
  max-height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
#about .pagination {
  position: absolute !important;
  width: 100%;
  text-align: center;
  right: 0;
  padding: 0 !important;
  top: 30px;
  z-index: 999;
  max-width: 1200px;
}
#about .pagination .container {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
}
#about p.slideshow__desc {
  font-size: 20px;
  color: #fffef9;
  max-width: 70ch;
}
#about p.slideshow__desc span {
  font-weight: 900;
}
#about .pagination__item {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  font-size: 20px;
  width: auto;
  height: auto;
  border-radius: 50px;
  border: 1px solid #fffef9;
  transition: 0.2s ease-in-out;
  padding: 4px 30px 6px;
  background: #072a3a6b;
}
#about .pagination__item.is-current, .pagination__item:hover {
  background-color: #fffef9 !important;
  color: #221f20;
}
#about .slideshow .container {
  position: relative;
  margin: 0 auto;
}
.listen video {
  display: block;
  margin: 0;
  padding: 0;
  height: 3rem;
}
.custom-audio-button, .custom-audio-button:visited {
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  white-space: nowrap;
  font-size: 20px;
  border-radius: 50px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  color: #fffef9;
  background-color: #fafff917;
  text-decoration: none;
  padding: 5px 7px 7px 20px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #fffef9;
  font-weight: 400;
  gap: 10px;
}
i#play-icon, i#play-icon2 {
  font-size: 30px;
}
.custom-audio-button:hover, .custom-audio-button:focus {
  background-color: #fffef9;
  color: #221f20;
  outline: none;
  text-decoration: none;
}
.custom-audio-button:focus-visible {
  outline: 2px dashed #fffef9;
  outline-offset: 4px;
}
#about .background-absolute {
  border-radius: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center;
  background-size: cover;
}
#wrapper .slideshow {
  position: relative;
  color: #ffffff;
  background-color: #1e1e22;
  overflow: hidden;
  height: 100dvh;
  min-height: 450px;
  border-radius: 10px;
  max-height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.slideshow__slide {
  visibility: hidden;
  transition: visibility 0s 1.7s;
}
.slideshow__slide.is-current {
  visibility: visible;
  transition-delay: 0s;
}
.slideshow__slide-background-load-wrap {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, 100%, 0);
  overflow: hidden;
}
.is-loaded .slideshow__slide-background-load-wrap {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.slideshow__slide.is-prev .slideshow__slide-background-parallax, .slideshow__slide.is-next .slideshow__slide-background-parallax {
  transform: none !important;
}
.slideshow__slide.is-prev-section .slideshow__slide-background-parallax, .slideshow__slide.is-next-section .slideshow__slide-background-parallax {
  transform: none !important;
}
.slideshow__slide-background-load {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, -50%, 0);
}
.is-loaded .slideshow__slide-background-load {
  transform: translate3d(0, 0, 0);
}
.slideshow__slide-background-wrap {
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
  transform: translate3d(0, 0, 0);
}
.slideshow__slide.is-prev .slideshow__slide-background-wrap {
  transform: translate3d(0, -100%, 0);
}
.slideshow__slide.is-next .slideshow__slide-background-wrap {
  transform: translate3d(0, 100%, 0);
}
.slideshow__slide.is-prev-section .slideshow__slide-background-wrap {
  transform: translate3d(0, -100%, 0);
  transition: none;
}
.slideshow__slide.is-next-section .slideshow__slide-background-wrap {
  transform: translate3d(0, 100%, 0);
  transition: none;
}
.slideshow__slide-background {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
  transform: scale(1);
  overflow: hidden;
}
.slideshow__slide.is-prev .slideshow__slide-background, .slideshow__slide.is-next .slideshow__slide-background {
  transform: scale(0.5);
  transition-delay: 0s;
}
.slideshow__slide.is-prev-section .slideshow__slide-background, .slideshow__slide.is-next-section .slideshow__slide-background {
  transform: scale(0.5);
  transition-delay: 0s;
  transition: none;
}
.slideshow__slide-image-wrap {
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
  transform: translate3d(0, 0, 0);
}
.slideshow__slide.is-prev .slideshow__slide-image-wrap {
  transform: translate3d(0, 50%, 0);
}
.slideshow__slide-image {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
  transform: scale(1);
}
.slideshow__slide.is-prev .slideshow__slide-image, .slideshow__slide.is-next .slideshow__slide-image {
  transform: scale(1.25);
  transition-delay: 0s;
}
.slideshow__slide.is-prev-section .slideshow__slide-image, .slideshow__slide.is-next-section .slideshow__slide-image {
  transform: scale(1.25);
  transition-delay: 0s;
  transition: none;
}
.slideshow__slide-image::before, .slideshow__slide-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.slideshow__slide-image::before {
  background-color: #1e1e22;
}
.slideshow__slide-image::after {
  background: linear-gradient(to bottom, transparent 0%, #1e1e22 100%);
}
.slideshow__slide.is-prev .slideshow_container, .slideshow__slide.is-next .slideshow_container {
  transform: none !important;
}
.slideshow__slide.is-prev-section .slideshow_container, .slideshow__slide.is-next-section .slideshow_container {
  transform: none !important;
}
.slideshow__slide-caption-text {
  position: relative;
  height: 100%;
  padding-top: 45vh;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  transform: translate3d(0, 0, 0);
}
.slideshow__slide-caption-text.long {
  padding-top: 40vh;
}
opaict p.slideshow__desc span {
  font-weight: 900;
}
.values-list {
  font-size: 1.3rem;
  font-weight: 600;
  width: 100%;
  text-align: center;
  max-width: 750px;
  color: #ffffffcf;
  border-top: 1px dashed #e8b00f;
  padding: 10px 0 12px;
  border-bottom: 1px dashed #e8b00f;
}
i.fa.fa-circle {
  font-size: 6px;
  margin: 0 15px;
  vertical-align: middle;
  color: #e8b00f;
}
.slideshow__slide.is-prev .slideshow__slide-caption-text {
  transform: translate3d(0, -100%, 0);
}
.slideshow__slide.is-next .slideshow__slide-caption-text {
  transform: translate3d(0, 100%, 0);
}
.slideshow__slide.is-prev-section .slideshow__slide-caption-text {
  transform: translate3d(0, -100%, 0);
  transition: none;
}
.slideshow__slide.is-next-section .slideshow__slide-caption-text {
  transform: translate3d(0, 100%, 0);
  transition: none;
}
.slideshow__slide-caption {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 60%, rgb(0, 0, 0, .75) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#a6000000", GradientType=0);
  position: relative;
  height: 100%;
  transform: translate3d(0, 100%, 0);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.is-loaded .slideshow__slide-caption {
  transform: translate3d(0, 0, 0);
}
h3.slideshow__slide-caption-title {
  max-width: 60ch;
  font-weight: 900;
  text-shadow: 1px 1px 1px #000000cc;
  line-height: 1;
  color: #fffef9;
  margin-bottom: 15px;
  font-size: 2.7rem;
}
.slideshow__slide-caption-title.-full {
  width: 100%;
}
.slideshow__slide-caption-subtitle {
  display: inline-block;
}
.slideshow__slide-caption-subtitle.-load {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  transform: translate3d(0, 3.75rem, 0);
}
.is-loaded .slideshow__slide-caption-subtitle.-load {
  transform: translate3d(0, 0, 0);
}
body[data-route-option="prev-section"] .slideshow__slide-caption-subtitle.-load, body[data-route-option="next-section"] .slideshow__slide-caption-subtitle.-load {
  transform: translate3d(0, 0, 0);
}
.slideshow__slide-caption-subtitle-label {
  margin-right: 10px;
  cursor: pointer;
  font-family: 'lato';
  white-space: nowrap;
  font-size: 20px;
  border-radius: 50px;
  border: 1px solid #fffef9;
  transition: 0.2s ease-in-out;
  color: #fffef9;
  Text-decoration: none;
  padding: 8px 20px 10px;
  display: inline-block;
  font-weight: 400;
}
.slideshow__slide-caption-subtitle-label:hover {
  background-color: #fffef9;
  color: #221f20;
}
::-moz-selection {
  background: #0084c0;
  color: #ffffff;
}
::selection {
  background: #0084c0;
  color: #ffffff;
}
#about img, #about svg {
  max-width: 100%;
}
.js-parallax {
  transform: translateZ(0);
  will-change: transform;
  padding-left: 10%;
  padding-right: 30px;
}
.scroll-content {
  overflow: hidden;
}
#about h3 {
  font-size: 1.5625rem;
}
/*****************************************
TABS SECTION
******************************************/
.tabs-section {
  /* background-color: #022a3a; */
  background: #052a3a;
  padding: 5rem 30px;
  box-shadow: 0px 315px 75px -300px rgba(0, 0, 0, 0.6) inset;
  z-index: 500;
  position: relative;
}
.tabs-section .content-wrap {
  position: relative;
}
.tabs .dgov-col-md-7 {
  padding: 1rem 3rem 3rem 2rem;
}
.tabs-section p {
  max-width: 65ch;
  color: #fffef9;
  line-height: 1.5;
  padding-top: 10px;
  font-size: 20px;
}
.tabs-section-content {
  padding: 3rem 2rem 0px;
}
.tabs-section .tabs {
  width: 100%;
  margin: 0 auto;
  padding: 2rem 0 1rem;
}
.tabs-section img {
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09), 0 6px 6px rgba(0, 0, 0, 0.13);
}
.tabs-section section {
  border-radius: 0 12px 12px 12px;
  display: none;
  /* border: 1px solid #ffffff78; */
  border-top: none;
  background: #264451;
  box-shadow: 0 10px 20px rgb(0 0 0 / 9%), 0 6px 6px rgb(0 0 0 / 13%);
  padding: 2rem;
}
.tabs-section input {
  display: none;
}
.tabs-section label {
  display: inline-block;
  margin-bottom: -1px;
  padding: 16px 3% 15px;
  text-align: center;
  color: #fffef9;
  -webkit-transition: ALL 0.15s;
  transition: ALL 0.15s;
  width: fit-content;
  background: #031c26;
  /* border: 1px solid #ffffff75; */
  border-bottom: 1px solid #264451;
  border-top: 4px solid #fffef9b8;
  font-weight: 600;
  font-size: clamp(.9rem, 1.2rem, 1.3rem);
  border-radius: 12px 12px 0 0;
  white-space: nowrap;
}
.tabs-section label:hover {
  background: #1d3740;
  cursor: pointer;
  text-shadow: 1px 1px 2px black;
  border-top: 4px solid #fffef9;
}
.tabs-section input:checked + label {
  color: #ffffff;
  background: #264451;
  border-top: 4px solid #e8b00f;
}
.tabs-section #tab1:checked ~ #content1, .tabs-section #tab2:checked ~ #content2, .tabs-section #tab3:checked ~ #content3, .tabs-section #tab4:checked ~ #content4 {
  display: block;
}
.tabs-section h3 {
  font-size: 1.4em;
  color: #fffef9;
  font-family: oswald;
  padding: 5px 20px;
  text-align: center;
  background-color: #1e88c3;
  background-image: linear-gradient(135deg, #254267 0%, #0e1826 100%);
}
.tabs span {
  display: block;
  width: fit-content;
}
.tabs p span {
  display: inline-block;
  font-weight: 900;
}
.tabs-buttons {
  display: flex;
}
.tabs .custom-audio-button {
  margin-right: 15px;
}
.tabs a:hover, .tabs a:active {
  text-decoration: none;
  color: #221f20 !important;
}
.tabs a:visited {
  text-decoration: none;
}
i.fa.fa-external-link {
  font-size: 16px;
  padding-left: 5px;
  top: -1px;
  position: relative;
}
/****************************************
MODAL SYLES 
****************************************/
/** NOTE: -UPDATE THIS TO MATCH MODULE NUMBER TO FIX MODAL Z INDEX ISSUE ***/
.DnnModule.DnnModule-DNN_HTML.DnnModule-9137, .DnnModule.DnnModule-DNN_HTML.DnnModule-9137 {
  position: unset;
}
.modal-body li {
  list-style: unset;
  margin-left: 2em;
}
.modal-body {
  color: transparent;
  padding: 0;
  background-color: transparent;
}
.modal-header {
  background-color: #022a3a;
  padding: 10px 25px;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}
.modal-title {
  letter-spacing: 1px;
  font-weight: 600;
  color: #fffef9;
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Lato';
}
#modalBannervid .modal-title {
  font-size: 2rem;
  letter-spacing: 3px;
}
.modal-content {
  border-radius: 12px;
  background-color: #022a3a;
  border: 3px solid #052a3a;
}
.modal-header p {
  color: #fffef9;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 15px;
  margin: 0;
  line-height: 1.3;
}
.modal-body p {
  color: #5a5152;
  margin: 10px 10px 25px;
  border-radius: 5px;
}
.modal-header .close {
  margin-top: -60px;
  font-size: 2.5em;
  opacity: .5;
  color: #fffef9;
  transition: .25s;
}
.modal-header .close:hover {
  opacity: 1;
}
.modal-body .page-section {
  padding: 0;
  background: #EBEAE5;
}
#modalMissions .modal-body, #modalMusic .modal-body {
  padding: 0;
  background-color: transparent;
}
.modal-vid {
  padding: 1rem;
  background: #03111b;
}
video#video {
  width: 100%;
  border-radius: 12px;
}
.modal-vid p {
  background: none;
  padding: 0;
  color: #5a5052;
  margin: 0;
}
.modal-footer {
  background: #022a3a;
  border: none;
  border-radius: 0 0 10px 10px;
}
button.btn.btn-outline-primary {
  color: #fffef9;
  text-transform: uppercase;
  border-color: #fffef9;
  background-color: #fafff917;
  font-size: 18px;
  border-radius: 50px;
  padding: 6px 30px;
}
button.btn.btn-outline-primary:hover {
  background: #fffef9;
  color: #221f20;
}
.caption {
  font-size: 18px;
  color: #c6c6c6;
  word-spacing: normal;
  padding: 10px;
  letter-spacing: .5px;
  max-width: 65ch;
  text-align: center;
  margin: 0 auto;
  line-height: 1.4;
  /* font-style: italic; */
}
button.close.topvid {
  font-size: 3rem;
  color: #fffef9;
  z-index: 501;
  position: absolute;
  right: 10px;
  opacity: .7;
  top: -5px;
  text-shadow: 0px 2px 5px black;
  transition: .25s all;
}
button.close.topvid:hover {
  opacity: 1;
}
/**************************************/
/********* KEEP EXPLORING ************/
/**************************************/
#content-pane-wrap10 {
  background: #2f372f;
  width: 100vw;
  background-image: linear-gradient(180deg, #022a3ad6 0%, #011c26eb 55%), url(https://d1ldvf68ux039x.cloudfront.net/thumbs/photos/2307/7927395/1000w_q95.jpg);
  z-index: 1;
  position: relative;
  background-size: cover;
  background-position: center center;
  padding: 4rem 30px;
  box-shadow: inset -4px 0px 14px 0px rgba(0, 0, 0, 0.56);
}
.explore {
  position: relative;
}
.line-title {
  padding: 0;
  border-left: 8px solid #e8b00f;
  margin: 0 0 10px;
  max-height: 2.2rem;
}
.explore h2, .tabs-section h2 {
  font-family: oswald;
  text-transform: uppercase;
  color: #fffef9;
  font-weight: 500;
  text-align: left;
  display: inline-block;
  font-size: 2.5rem;
  padding-left: 2px;
  line-height: .8;
  margin: -2px 0 0;
}
.line-title {
  border-left: 8px solid #e8b00f;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 0;
  max-height: 2.15rem;
}
.line-title {
  margin-top: 10px;
  display: inline-block;
}
.explore span a {
  transition: .25s;
  color: #ffffffb5;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 2px;
  float: right;
  position: relative;
  margin-top: 2rem;
}
.explore span a:hover {
  color: #fffef9;
  letter-spacing: 4px;
}
.explore .glyphicon-chevron-right {
  color: #e8b00f;
  transition: .25s;
}
.explore span a:hover .glyphicon {
  margin-left: 5px;
}
.related-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  width: 100%;
  margin: 0 auto;
}
figure.snip1136 {
  border-radius: 12px;
  color: #fffef9;
  max-height: 220px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.related h3 {
  color: #fffef9;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 1.1rem;
  text-align: center;
  margin-top: 15px;
}
a:hover .related h3 {
  color: #e8b00f;
  text-decoration: underline;
}
figure.snip1136 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip1136 img {
  opacity: .7;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  border-radius: 12px;
}
figure.snip1136 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure.snip1136 figcaption > div {
  height: 40%;
  overflow: hidden;
  width: 100%;
  position: relative;
}
figure.snip1136 h3, figure.snip1136 p {
  display: none;
  margin: 0;
  opacity: 0;
  padding: 0 30px;
  position: absolute;
  width: 100%;
  left: 0;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s, -o-transform 0.4s, transform 0.4s;
}
figure.snip1136 p {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.related p a:hover {
  text-decoration: underline;
  color: blue;
}
figure.snip1136 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip1136:hover img, figure.snip1136.hover img {
  opacity: 1;
}
figure.snip1136:hover figcaption p, figure.snip1136.hover figcaption p {
  opacity: 1;
}
/**********************************************************************
OTHER UNITS
**********************************************************************/
#other-units {
  padding: 80px 20px 80px;
  position: relative;
  background: rgb(37, 37, 37);
  background: linear-gradient(304deg, rgba(37, 37, 37, 1) 33%, rgba(0, 0, 0, 1) 100%);
  z-index: 10;
}
#other-units h2 {
  color: #fffef9;
  text-align: center;
  padding: 0 1rem;
  line-height: 1.1em;
}
#other-units p.blurb {
  max-width: 95%;
  color: #fffef9;
  text-align: center;
  width: 600px;
  margin: 0 auto;
}
#other-units .bottom-seals {
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  padding: 2rem 0;
  max-width: 80%;
}
#other-units img.seal {
  max-width: 200px;
  width: 100%;
  border-radius: 50%;
  transition: .5s;
}
#other-units .unit p {
  transition: .3s;
  text-wrap: nowrap;
  color: #fffef9;
  text-align: center;
  margin-bottom: 0;
}
#other-units a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#other-units a:hover img {
  transform: scale(1.1);
}
#other-units .unit:hover p {
  transform: scale(1.25);
}
#other-units img.seal:hover {
  transform: scale(1.1);
}
/*****FROM ORIG PAGE *******/
hr {
  border-top: unset;
  border-bottom: 3px solid #ffcc01;
  width: 28rem;
  margin: 0 auto;
}
.footer-search, #footer-main, #extended-nav {
  z-index: 9999;
}
.unit.navy {
  display: none;
}
/*************************
NAV JUMP HOVER ANIMATIONS
**************************/
@keyframes up {
  50% {
    transform: translate(0px, -10px);
  }
}
@keyframes down {
  50% {
    transform: translate(0px, 10px);
  }
}
/******************
NAV THROUGHOUT
******************/
.next-unit:hover {
  transform: scale(1.3);
}
.next-unit:hover i {
  animation: down 1s ease infinite;
}
/*****************************
MAIN SCREEN
******************************/
/********************************************************
SIDE NAV BAR
*********************************************************/
#nav {
  width: 100vw;
}
.side-nav {
  position: fixed;
  top: 50%;
  transition: 0.5s;
  padding: 15px 25px 30px;
  text-decoration: none;
  text-align: center;
  font-size: 40px;
  border-radius: 5px 5px 0 0;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}
.side-nav span {
  display: block;
  font-size: 25px;
}
#admin-side-btn {
  right: 0;
  transform: rotate(-90deg) translate(50px, 190px);
  background-color: #79b5d9;
}
#admin-side-btn:hover {
  right: 35px;
  opacity: 1;
}
.admin-side-btn-responsive {
  right: -215px;
  opacity: 1;
}
#admin-side-btn a {
  color: rgb(5 42 58);
}
#admin-side-btn a:hover {
  color: #022a3a;
  text-decoration: none;
}
#op-side-btn:hover a {
  color: #022a3a;
}
#op-side-btn {
  left: 0;
  transform: rotate(90deg) translate(-50px, 160px);
  background-color: #c6ccd0;
}
#op-side-btn:hover {
  left: 35px;
  opacity: 1;
  background-color: #939393;
}
.op-side-btn-responsive {
  left: -200px;
  opacity: 1;
}
#op-side-btn a {
  color: #493200;
}
#op-side-btn a:hover {
  color: #022a3a;
  text-decoration: none;
}
#op-side-btn:hover a {
  color: #022a3a;
}
.sticky {
  top: 50%;
  opacity: .4;
}
.stick-point {
  position: absolute;
}
/********************************************************
OPERATIONAL or ADMINISTRATIVE
*********************************************************/
.operational {
  background-color: #c6ccd0;
  padding: 3rem 2rem;
}
.administrative {
  background-color: #79b5d9;
  padding: 3rem 2rem;
}
.command-options .content {
  text-align: center;
}
.command-options h2 {
  text-transform: uppercase;
  font-weight: 800;
}
.command-options .btn, .last-section .btn {
  background-color: #022a3a;
  transition: .3s;
  color: #fffef9;
  font-weight: 600;
  border-radius: 50px;
}
.last-section .smooth-scroll {
  text-align: center;
  padding: 30px 0;
}
.operational h2 {
  color: #022a3a;
}
.operational .btn:hover, .last-section .operational-button .btn:hover, .administrative .btn:hover, .last-section .administrative-button .btn:hover {
  background-color: #0076a9;
  color: #fffef9;
}
.administrative h2 {
  color: #022a3a;
}
.command-options .content p {
  max-width: 600px;
  color: #000000;
  margin: 0 auto 30px;
  font-family: 'Lato';
  line-height: 1.4;
  font-size: 18px;
}
.command-options .sub-blurb {
  color: #fffef9;
}
/*********************************************************
OPS SECTION
*********************************************************/
/**GENERIC**/
#op-side, #admin-side {
  position: relative;
  /* top: -90px;*/
}
.title-break {
  width: 60%;
}
.section {
  padding: 3rem 2rem 5rem;
  position: relative;
}
.section h2 {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 5rem;
  padding-top: 35px;
}
.section h3 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 3rem;
  margin-bottom: 0;
  padding-top: 25px;
}
.command-title {
  color: #022a3a;
  /* text-transform: uppercase; */
  font-weight: 600;
  margin-bottom: 10px;
  transition: .3s;
  line-height: 1.2;
}
.arrow {
  width: 50px;
}
.solo {
  position: relative;
  left: 50%;
  transform: translate(-25px, 0);
  padding: 25px 0 0;
}
.both-arrow {
  position: absolute;
  z-index: 999;
}
.bottom {
  left: 50%;
  bottom: -22px;
  transform: translate(-50%, 0);
}
.line {
  height: 400px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.seal img {
  width: 125px;
  transition: .3s;
}
.seal img:hover {
  transform: scale(1.1);
}
.seal a:hover {
  text-decoration: none;
}
.seal a:hover p {
  color: #365e93;
}
.sub-blurb, .ending-blurb {
  color: #212121;
  max-width: 65ch;
  margin: 0 auto;
  padding: 25px 0 0;
  text-align: center;
}
.ending-blurb {
  padding-bottom: 50px;
}
.combatant-grid, .commander-grid, .fleet-grid {
  padding: 50px 0;
}
.acronym {
  display: block !important;
  font-weight: 400;
}
/*************FIRST SECTION*************/
.first-section {
  background-color: #fffef9;
  box-shadow: 0px -5px 15px -5px rgba(0, 0, 0, .6);
}
.first-section h2 {
  color: #022a3a;
  text-align: center;
}
.first-section .sec-def .left-side {
  text-align: center;
}
.first-section .sec-def .left-side img {
  width: 225px;
}
.first-section .sec-def .left-side .title {
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  text-transform: uppercase;
  color: #022a3a;
  font-weight: 600;
  margin-bottom: 0;
  padding: 15px 0 0;
}
.first-section .sec-def .right-side p {
  color: #242424;
  max-width: 65ch;
  margin: 0 auto;
  text-align: left;
}
.first-section h2 {
  color: #022a3a;
}
.combatant-grid .seal {
  text-align: center;
}
.combatant-grid .seal a:hover {
  text-decoration: none;
  color: #0076a9;
}
.commander-grid .seal {
  text-align: center;
}
/*************SECOND SECTION*************/
.second-section {
  background-color: #022a3a;
}
.second-section h3 {
  color: #e8b00f;
}
.second-section p.sub-blurb {
  color: #fffef9;
}
.second-section p.command-title {
  color: #c6ccd0;
}
.second-section .seal a:hover p {
  color: #79b5d9;
}
#op-side .second-section .ending-blurb {
  color: #fffef9;
  padding-top: 50px;
}
.second-section .ending-blurb {
  color: #fffef9;
}
/*************THIRD SECTION*************/
.third-section {
  background-color: #fffef9;
  position: relative;
}
.third-section .right-side .both-arrow .arrow {
  width: unset;
  height: 50px;
}
.third-section h2 {
  color: #022a3a;
  padding-bottom: 15px;
}
.third-section .fleet-grid .seal {
  padding-bottom: 0;
}
.third-section .left-side, .third-section .right-side {
  text-align: center;
  color: #fffef9;
}
.third-section .left-side p, .third-section .right-side p {
  margin: 25px 0 10px;
}
.third-section .right-side {
  background-color: #022a3a;
  margin-left: 50px;
  padding: 1rem 2rem 2rem;
  border-radius: 12px;
}
.right-side .dgov-grid.dgov-justify-center.dgov-align-center {
  margin-top: -3rem;
}
.third-section .right-side p {
  text-transform: uppercase;
  font-weight: 600;
}
.third-section .right-side p span {
  display: block;
}
.third-section .right-side .fleet-icon {
  display: inline;
  align-self: flex-end;
}
.third-section .fine-print {
  text-transform: none;
  font-size: 14px;
}
.third-section .fleet-title {
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 600;
  color: #e8b00f;
  margin-top: 0 !important;
}
.right-side .fa-angle-down {
  font-size: 40px;
  color: #ffb81d;
}
.third-section .responsive-arrow {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translate(-50%, 0);
}
.task-grid {
  margin: 25px 2rem;
}
.single-task {
  height: 300px;
  position: relative;
}
.single-task::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
.tasks hr {
  border-bottom: 5px solid #e8b00f;
  width: 200px;
}
.task-title {
  color: #fffef9;
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  padding: 30px 10px 10px;
  margin-bottom: 0;
}
.task-content {
  color: #fffef9;
  padding: 15px 30px;
  font-size: 16px;
  line-height: 1.3;
}
#task1 {
  background-color: #022a3a;
  border-radius: 12px 0 0 12px;
}
#task1::after {
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #213e4c;
}
#task2 {
  background-color: #213e4c;
}
#task2::after {
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #344e5a;
}
#task3 {
  background-color: #344e5a;
}
#task3::after {
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #4f646e;
}
#task4 {
  background-color: #4f646e;
  border-radius: 0 12px 12px 0;
}
.third-section .unit-options {
  position: relative;
  margin: 30px auto;
}
.unit-options .unit-list {
  padding: 0;
}
.unit-options p {
  max-width: 65ch;
  margin: 0 auto;
}
.unit-list .nav-item {
  position: relative;
  cursor: pointer;
  background-color: rgb(198 204 208);
  padding: 15px;
  text-align: center;
  font-size: 16px;
  color: #022a3a;
  font-weight: 800;
  text-transform: uppercase;
  transition: .5s;
  border-radius: 5px;
  margin: 5px;
}
.unit-list .nav-item a {
  text-decoration: none;
  color: #022a3a;
}
.unit-list .nav-item:hover {
  background-color: #e8b00f;
}
.unit-options .unit-list .unit span {
  display: inline-block;
}
.unit-list .nav-item.active {
  background-color: #022a3a;
}
.unit-list .nav-item.active a {
  color: #fffef9;
}
.unit-options .unit-list .active::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #022a3a;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translate(0, -50%);
  z-index: 99;
}
.unit-options .unit-list .active::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #fffef9;
  position: absolute;
  top: 50%;
  right: -35px;
  transform: translate(0, -50%);
  z-index: 9;
}
.unit-options .unit-info {
  position: relative;
  background-color: #022a3a;
  color: #fffef9;
  border-radius: 8px;
}
.unit-info .tab-content .tab-pane {
  padding: 15px 25px 0;
}
.third-section .unit-options .deployable-units-tabs .dgov-col-5 {
  padding-top: 0;
  padding-bottom: 0;
}
.unit-list div:nth-child(1) {
  margin-top: 0;
}
.third-section hr {
  width: 10rem;
  border-bottom: 3px solid #e8b00f;
}
.third-section .command-title {
  color: #022a3a;
  font-weight: 600;
  margin-bottom: 20px;
  transition: .3s;
}
.nav-tabs {
  border-bottom: none;
}
/*************FOURTH SECTION*************/
.fourth-section {
  background-color: #022a3a;
  text-align: center;
}
.fourth-section h3 {
  color: #fffef9;
  margin-bottom: 0;
}
.fourth-section p {
  color: #fffef9;
}
.fourth-section .right-side .both-arrow .arrow {
  width: unset;
  height: 50px;
}
.fourth-section .icons {
  padding: 10px 0;
}
.fourth-section .fleet-icon {
  width: 200px;
}
.fourth-section .fleet-icon:nth-child(3) {
  width: 125px;
}
.fourth-section .sailor {
  width: 100px;
}
.vessel-hierarchy {
  background-color: #1e88c3;
  position: relative;
  padding: 25px 30px;
  border-radius: 12px;
}
.vessel-hierarchy i {
  color: #e8b00f;
  font-size: 50px;
}
.vessel-hierarchy p {
  text-align: center;
  max-width: 65ch;
  margin: 15px auto;
}
.vessel-hierarchy img {
  width: 200px;
  padding: 20px 0;
}
.vessel-hierarchy .responsive-arrow {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-25px, 0);
}
.vessel-hierarchy .vessel-title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  color: #fffef9;
  font-weight: 600;
}
#vessel5 {
  font-size: 22px;
}
#vessel6 {
  font-size: 35px;
}
#vessel7 {
  font-size: 50px;
}
/*********************************************************
ADMIN SECTION
*********************************************************/
/************FIFTH SECTION*********/
.fifth-section {
  background-color: #fffef9;
  box-shadow: 0px -5px 15px -5px rgba(0, 0, 0, .6);
}
.fifth-section h2 {
  color: #022a3a;
  text-align: center;
}
.fifth-section p {
  color: #000;
  max-width: 65ch;
  margin: 0 auto 30px;
}
.fifth-section .leader-grid {
  margin: 4rem 0 6rem;
}
.fifth-section .leader-grid .flag {
  width: 250px;
  padding-bottom: 50px;
}
.fifth-section .command-header {
  color: #717171;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0;
}
.fifth-section .command-title {
  color: #011F46;
  height: 60px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 25px;
  font-weight: 600;
}
.first-section .left-side .acronym, .fifth-section .command-title .acronym {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
}
.fifth-section .left-side .line {
  border-right: 5px solid #022a3a;
  height: 680px;
  top: 50%;
}
.fifth-section .leader-grid .left-side, .fifth-section .leader-grid .right-side {
  text-align: center;
}
.fifth-section .leader-grid .left-side {
  padding-right: 2rem;
}
.fifth-section .leader-grid .right-side {
  padding-left: 2rem;
}
.fifth-section .leader-grid .right-side img {
  width: 200px;
  padding-bottom: 25px;
}
/************SIXTH SECTION*********/
.sixth-section {
  background-color: #022a3a;
}
.sixth-section h2 {
  color: #fffef9;
}
.sixth-section h3, .sixth-section h4 {
  color: #e8b00f;
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  font-size: 2rem;
  border-bottom: 2px solid;
  max-width: 350px;
  margin: 0 auto;
  padding-bottom: 15px;
}
#tab5:checked ~ #content5, #tab6:checked ~ #content6, #tab7:checked ~ #content7 {
  display: block;
  transition: .3s;
}
.command-options .command-title {
  color: #c7ced8;
}
.command-options .seal a:hover p {
  color: #c79a00;
}
.sixth-section .command-options {
  position: relative;
  text-align: center;
  padding-bottom: 50px;
}
.sixth-section .command-options label {
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  background-color: #c6ccd0;
  color: #052a3a;
  text-transform: uppercase;
  padding: 15px 30px;
  margin: 50px 20px;
  border-radius: 50px;
  transition: .3s;
}
.sixth-section .command-options label:hover, .sixth-section .command-options input:checked + label {
  background-color: #1d88c3;
  color: #fffef9;
}
.sixth-section .command-options input {
  display: none;
}
.sixth-section .command-options section {
  display: none;
}
.sixth-section .command-options section .sub-blurb {
  text-align: center;
  margin-bottom: 50px;
}
.sixth-section .shore-command {
  padding-bottom: 30px;
}
.type-command .command-title {
  color: #c3d9e6;
  font-weight: 600;
  margin-bottom: 20px;
  transition: .3s;
}
.type-command .seal a:hover p {
  color: #ffffff;
}
.sixth-section .shore-command .seal {
  text-align: center;
}
.sixth-section .fleet-icon {
  width: 150px;
  transform: scale(1.3);
  margin: 25px 0 50px;
}
.sixth-section #content7 .type-command div:nth-child(2) .fleet-icon {
  width: 75px;
}
.sixth-section .type-command .command-title {
  font-size: 18px;
}
.sixth-section .type-command .locations a:hover {
  text-decoration: none;
}
.sixth-section .type-command .seal {
  margin-top: 75px;
}
.sixth-section .second-command-title {
  color: #fffef9;
  text-transform: uppercase;
  font-size: 16px;
  background-color: #1e88c3;
  padding: 5px 20px;
  margin-bottom: 0;
  border-radius: 50px;
  font-weight: 600;
  transition: .3s;
}
.sixth-section .second-command-title i {
  position: relative;
  bottom: 2px;
  font-size: 15px;
  padding-left: 10px;
}
.sixth-section .second-command-title:hover {
  background-color: #fffef9;
  color: #022a3a;
}
.sixth-section .system-command {
  padding-bottom: 50px;
}
/************LAST SECTION*********/
.last-section {
  background-color: #fffef9;
  position: relative;
  padding: 1rem 3rem 5rem;
}
.last-section h4 {
  color: #022a3a;
  padding: .5rem 1rem 0;
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
}
.last-section .sub-blurb {
  color: #000;
}
.last-section p {
  color: #000;
  max-width: 65ch;
  margin: 0 auto;
}
.last-section .orders {
  margin: 50px 0;
  margin: 20px auto;
}
.last-section .orders .left-side {
  background-color: #c6ccd0;
  margin-right: 2rem;
  padding: 35px 35px 45px;
  border-radius: 12px;
}
.last-section .orders .left-side h4 {
  color: #012759;
}
.last-section .orders .right-side {
  background-color: #79b5d9;
  margin-left: 2rem;
  padding: 35px 35px 45px;
  border-radius: 12px;
}
.last-section .orders .right-side h4 {
  color: #011f46;
}
/***************************************************************
INTERNET EXPLORER ONLY
***************************************************************/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .loader-content {
    display: block;
    position: relative;
    top: 100px;
  }
  .wrapper .smooth-scroll {
    bottom: 130px;
    transform: translate(-50%, 30%);
  }
  .solo {
    display: block;
  }
}
/***************************************************************
RESPONSIVE STYLES
***************************************************************/
.responsive-title {
  margin: 0;
  padding-bottom: 10px;
  color: #022a3a;
  font-size: 18px;
  font-weight: 800;
}
/* ----- Default: show desktop, hide mobile ----- */
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}
/* ----- Mobile styles (up to 768px) ----- */
@media (max-width: 991px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: inline-flex;
  }
}
/**** SCREEN HEIGHTS ****/
@media (max-height: 900px) and (orientation: landscape) {
  .slideshow__slide-caption-text {
    padding-top: 55vh !important;
  }
  .slideshow__slide-caption-text.long {
    padding-top: 50vh !important;
  }
}
@media (max-height: 800px) {
  .wrap-center {
    top: calc(30% + 180px);
  }
  img.seals.wow.fadeInUp {
    max-width: 100%;
    top: 32%;
    left: unset;
  }
}
@media (max-height: 720px) {
  #navy h1.title {
    font-size: 8.5rem;
  }
  .wrap-center {
    top: calc(25% + 180px);
  }
}
@media (max-height: 675px) {
  img.seals.wow.fadeInUp {
    max-width: 738px;
  }
}
@media (max-height: 625px) {
  #navy h1.title {
    font-size: 7.5rem;
  }
  img.seals.wow.fadeInUp {
    max-width: 680px;
    left: 18%;
  }
}
@media (max-height: 600px) {
  #navy h1.title {
    font-size: 7.5rem !important;
  }
  img.seals.wow.fadeInUp {
    max-width: 641px;
    left: 20%;
  }
}
@media (max-height: 550px) {
  img.seals.wow.fadeInUp {
    max-width: 576px;
    left: 22%;
  }
  .video-link {
    top: calc(23% + 120px);
  }
  .slideshow__slide-caption-title {
    margin-bottom: 0;
  }
}
/*** MIN  WIDTHS ****/
/* XLG */
@media only screen and (min-width: 1770px) {
  div#dnn_ContentPaneFullBleed3 .DnnModule-DNN_HTML {
    display: flex;
    justify-content: center;
  }
  #dnn_ContentPaneFullBleed3 hr:before, #dnn_ContentPaneFullBleed3 hr:after {
    display: none;
  }
  #video-slice {
    max-height: 80vh;
  }
  #video-slice .video-wrapper {
    height: 80VH;
    max-height: unset;
  }
}
@media (min-width: 1400px) {
  .desc {
    transform: translateY(118px);
    ;
  }
  .dgov-grid.sec-def, .dgov-grid.fleet-grid, .task-grid, .third-section .unit-options, .section.fourth-section .dgov-grid, .dgov-grid.orders {
    max-width: 1500px;
    margin: 0 auto;
  }
  .unit-options {
    padding-top: 2rem;
  }
  .vessel-hierarchy {
    max-width: 850px;
  }
  #navy h1.title {
    font-size: 12rem;
  }
  img.seals.wow.fadeInUp {
    top: 30%;
    width: 1400px;
  }
  .updated {
    bottom: 120px;
  }
  #other-units .bottom-seals {
    max-width: 1200px;
  }
}
@media screen and (min-width: 1200px) {
  .responsive-seal {
    display: none;
  }
  .third-section .left-side p {
    margin: 25px 0 10px;
  }
  .responsive-arrow {
    display: none;
  }
  #about .slideshow {
    overflow: hidden;
    height: 100%;
  }
  .dgov2-popup-close[data-v-0e7a03d2] {
    right: 6px !important;
    font-size: 2rem !important;
  }
}
@media screen and (min-width: 991px) {
  .fifth-section .leader-grid {
    margin: 2rem 0;
  }
  .vessel-hierarchy .responsive-arrow {
    display: none;
  }
  .unit-blurb {
    max-width: 70%;
  }
  .section {
    padding: 3rem 2rem;
  }
  .tabs .dgov-col-md-7 {
    padding: 1rem 1rem 2rem;
  }
  .tabs .dgov-col-md-7 {
    padding: 1rem 1rem 3rem;
  }
}
/*** MAX  WIDTHS ****/
@media screen and (max-width: 1275px) {
  .desc p {
    font-size: 16.5px;
    line-height: 1.3;
  }
  .desc {
    transform: translateY(120px);
  }
}
@media screen and (max-width: 1199px) {
  .wrapper .seal {
    display: none;
  }
  .wrapper .loader-content h1 {
    font-size: 7.5rem;
    margin-top: -8px;
    padding-left: 10px;
  }
  .side-nav {
    padding: 5px 25px 15px;
    font-size: 25px;
    top: 50%;
  }
  .side-nav span {
    font-size: 20px;
  }
  .sticky {
    top: 50%;
  }
  #admin-side .fifth-section .leader-grid .right-side {
    margin-top: 20px;
    border-top: 1px solid grey;
    padding-top: 40px !important;
  }
  #admin-side-btn {
    transform: rotate(-90deg) translate(50px, 130px);
  }
  #admin-side-btn:hover {
    right: 30px;
  }
  #op-side-btn {
    transform: rotate(90deg) translate(-50px, 110px);
  }
  #op-side-btn:hover {
    left: 35px;
  }
  .first-section .sec-def .right-side p {
    text-align: center;
  }
  .fleet-grid {
    padding: 25px 0;
  }
  .third-section h2 {
    padding-bottom: 15px;
  }
  .third-section .right-side {
    margin: 100px 1rem 0;
  }
  .third-section .right-side .both-arrow {
    display: none;
  }
  .task-grid {
    margin: 25px 1rem;
  }
  .fifth-section .left-side .line {
    display: none;
  }
  .fifth-section .leader-grid .right-side {
    margin-top: 50px;
  }
  .fifth-section .leader-grid .left-side, .fifth-section .leader-grid .right-side {
    padding: 15px 2rem;
  }
  .fifth-section .left-side p, .fifth-section .right-side p {
    text-align: left;
  }
  .fifth-section .leader-grid {
    margin: 4rem 0 2rem;
  }
  .fifth-section .leader-grid .command-header, .fifth-section .leader-grid .command-title {
    text-align: center;
  }
  .last-section .orders .left-side {
    margin-right: unset;
    margin-bottom: 50px;
  }
  .last-section .orders .right-side {
    margin-left: unset;
  }
  #dnn_ContentPaneFullBleed3 > .DnnModule.DnnModule-4769 > div .content-wrap {
    padding: 3rem 30px 0;
    width: 100%;
  }
  h3.section-subtitle {
    left: 0;
  }
  .stories {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  .stories .grid .container {
    position: static;
    overflow: visible;
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }
  .desc {
    position: static;
    transform: none;
    background: #021c27;
    padding: 20px;
    margin-top: -1rem;
    width: 100%;
    z-index: 101;
    opacity: 1;
    border-radius: 0 0 12px 12px;
    overflow: visible;
    height: auto;
    min-height: 150px;
  }
  .desc h3 {
    padding-left: 6px;
    margin: 1px 0 10px;
    font-size: 1em;
    border-left: 4px solid #e8b00f;
  }
  .stories .grid .container:hover .desc {
    transform: none;
  }
  .stories .grid .video {
    display: none;
  }
  .stories .grid .container:hover .image {
    opacity: 1;
  }
  .js-parallax {
    padding-left: 40px;
    padding-right: 40px;
  }
  .slideshow__slide-caption-text {
    padding-top: 43vh;
  }
  .slideshow__slide-caption-text.long {
    padding-top: 40vh;
  }
  .desc p {
    font-size: 20px;
    line-height: 1.3;
  }
}
/* IPAD PRO */
@media only screen and (max-width: 1024px) {
  #navy h1.title {
    font-size: 12rem;
  }
  img.seals.wow.fadeInUp {
    max-width: 100%;
    top: 32%;
    left: unset;
  }
  .video-link {
    top: calc(27% + 120px);
  }
  #dnn_ContentPaneFullBleed2 {
    width: 250px;
  }
  #sections-nav .nav > li.active > a {
    font-size: 24px;
  }
  #sections-nav .nav > li > a {
    padding: 15px 10px 10px 40px;
  }
  h2.heading {
    font-size: 18px;
    text-align: center;
    padding: 10px;
  }
  #sections-nav li a:hover {
    background-color: transparent;
  }
  .back-to-top {
    width: 90%;
  }
  #squadrons .ranks {
    max-width: 80%;
  }
  #commands .dgov-grid {
    margin: 0 -15px 0 -15px;
  }
}
@media screen and (max-width: 1050px) {
  .responsive-title {
    padding-bottom: 30px;
  }
}
/* Tablet: 2 across */
@media (max-width: 992px) {
  .related-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 991px) {
  .command-options h2 {
    font-size: 2rem;
  }
  .fourth-section .both-arrow {
    display: none;
  }
  .vessel-hierarchy {
    margin-top: 60px;
    padding: 50px 30px 25px;
  }
  .responsive-arrow img {
    width: 50px;
  }
  .sixth-section .command-options label {
    font-size: 18px;
  }
  .single-task {
    height: fit-content;
  }
  .single-task::after {
    top: unset;
    right: unset;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  #task1 {
    background-color: #022a3a;
    border-radius: 12px 12px 0 0;
  }
  #task1::after {
    border-top: unset;
    border-bottom: 20px solid #213e4c;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  }
  #task2::after {
    border-top: unset;
    border-bottom: 20px solid #344e5a;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  }
  #task3::after {
    border-top: unset;
    border-bottom: 20px solid #4f646e;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  }
  #task4 {
    background-color: #4f646e;
    border-radius: 0 0 12px 12px;
  }
  .f-22.wow.fadeInUp {
    max-width: 150vw;
    width: 150vw;
    top: 32%;
    left: 49%;
  }
  .video-link {
    top: calc(27% + 120px);
  }
  #dnn_ContentPaneFullBleed3 hr {
    border-bottom: 2px dashed transparent;
  }
  div#team {
    padding-top: 1.5rem;
  }
  h2.section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 500;
    position: relative;
    text-transform: uppercase;
    padding: 12px 0 14px;
    background: #022a3a;
    color: #ffffff;
    margin: 1rem 0 3rem;
    border-top: 1px solid #e8b00f;
    border-radius: 12px;
    border-bottom: 1px solid #e8b00f;
  }
  .DnnModule-SlideShow {
    padding: 3rem 0;
  }
  h2.section-title:before, h2.section-title:after {
    display: none;
  }
  .rt h2.sm-title {
    margin-top: 1.5rem;
  }
  .dgov-col-md-6.rt {
    border-left: none !important;
  }
  #squadrons .ranks {
    max-width: 90%;
  }
  .first-section {
    padding-bottom: 5rem !important;
  }
  .task-content {
    text-align: center;
  }
  .DnnModule-SlideShow {
    padding: 0;
  }
  .stories {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
  }
  .desc {
    min-height: 165px;
  }
  svg.svg-logo {
    display: none;
  }
  #about .pagination .container {
    gap: 10px;
  }
  figure.snip1136:hover figcaption p, figure.snip1136.hover figcaption p {
    opacity: 0;
  }
  figure.snip1136:hover img, figure.snip1136.hover img {
    opacity: 0.6;
    -webkit-filter: unset;
  }
}
@media screen and (max-width: 860px) {
  .section.third-section {
    padding: 1rem 5px 5rem;
  }
  .section h2 {
    font-size: 4rem;
  }
  .unit-info .tab-content .tab-pane {
    padding: 5px 0 5px 15px;
  }
  .unit-options p {
    font-size: 17.5px;
  }
  .third-section .unit-options {
    position: relative;
    margin: 30px 5px 30px;
  }
  .desc p {
    font-size: 15.7px;
  }
  .slideshow__slide-caption-text.long {
    padding-top: 35vh;
  }
  .slideshow__slide-caption-text {
    padding-top: 40vh;
  }
}
@media only screen and (max-width: 845px) {
  .desc h3 span {
    display: none;
  }
}
/* SM - IPAD AIR */
@media only screen and (max-width: 820px) {
  img.seals.wow.fadeInUp {
    left: unset;
    top: 40%;
  }
  .updated {
    bottom: 114px;
    right: 20px;
  }
  .content .blurb {
    max-width: 65ch;
  }
  span.count-num.plus {
    min-width: auto;
    padding: 0 10px 10px;
  }
  .top-description p {
    margin-bottom: unset;
  }
  header#header-main {
    z-index: 999;
  }
  .fourth-section .icons {
    padding: 0;
  }
  .last-section {
    padding: 3rem;
  }
  .last-section .orders {
    margin: 20px;
  }
  .sub-blurb, .ending-blurb {
    padding: 10px 0 0;
  }
  #admin-side .fifth-section .leader-grid .right-side {
    margin-top: 0;
    border-top: 1px solid gray;
    padding-top: 40px !important;
  }
  .section {
    padding: 3rem 2rem 3rem;
  }
  .command-title span, .seal span {
    display: unset;
    white-space: normal;
  }
  .command-options .command-title {
    color: #c6ccd0;
    font-size: 1.3rem;
    min-height: unset;
  }
  .unit-list .nav-item {
    margin: 5px 5px 0 0;
  }
  .dgov-col-lg-6.dgov-col-md-12.left-side {
    max-width: 700px;
  }
  .third-section .left-side p, .third-section .right-side p {
    margin: 15px 0;
  }
  .ending-blurb {
    padding-bottom: 0;
  }
  #op-side .second-section .ending-blurb {
    color: #fffef9;
    padding-top: 20px;
    padding-bottom: 50px;
  }
  .fifth-section .leader-grid {
    margin: 1rem 0 2rem;
  }
  .command-title span {
    display: unset;
  }
  .stories {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  .stories .grid .container {
    position: static;
    overflow: visible;
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }
  .stories .grid .container:hover .desc {
    transform: none;
  }
  .stories .grid .video {
    display: none;
  }
  #about {
    padding: 2rem 0 5rem;
  }
  .slideshow__slide-caption-text {
    padding-top: 35vh;
  }
  .js-parallax {
    padding-left: 7%;
  }
  .desc {
    min-height: 190px;
  }
  .slideshow__slide-caption-text.long {
    padding-top: 38vh;
  }
  p.slideshow__desc {
    font-size: 18px;
  }
  .explore span a {
    display: block;
    float: unset;
    margin-top: 15px;
  }
  .other-units p {
    padding: 5px 0 0;
  }
}
@media screen and (max-width: 790px) {
  .wrapper {
    justify-content: center;
    display: flex;
  }
  .top-description {
    padding-top: 2rem;
  }
  .responsive-title {
    padding: 10px;
  }
  .responsive-seal {
    padding-left: unset;
  }
  .wrapper hr {
    width: 80%;
  }
  .loader-content {
    height: unset;
  }
  .loader-content .unit-blurb {
    text-align: center;
    padding: 1rem 2rem;
  }
  .left-seal {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .third-section .left-side p, .third-section .right-side p {
    margin: 25px 0 10px;
  }
  .sixth-section .command-options label {
    width: 140px;
    margin: 50px 10px;
  }
  .fourth-section .icons {
    padding: 20px 0;
  }
  .last-section .orders {
    margin: 10px;
  }
  .last-section {
    padding: 3rem 3rem 3rem;
  }
  .fifth-section .leader-grid {
    margin: 2rem 0;
  }
  #admin-side .dgov-col-lg-5.right-side {
    border-top: 1px solid grey;
    padding-top: 50px;
  }
  .section {
    padding: 3rem 2rem;
  }
  .type-command .seal {
    min-width: unset;
  }
  .dgov-col-lg-6.dgov-col-md-12.left-side {
    max-width: 600px;
  }
  .third-section .fleet-grid .seal {
    max-height: 200px;
  }
  .ending-blurb {
    padding-bottom: 0;
  }
  .section h2 {
    margin-bottom: 1rem;
  }
  #video-slice .video-wrapper {
    height: 45vh;
    min-height: 220px;
  }
  /* Hide video, show static image */
  #video-slice video {
    display: none;
  }
  #video-slice .mobile-fallback {
    display: block;
  }
  #video-slice span {
    font-size: 2.15rem;
  }
  #video-slice h2 {
    font-size: 1.2rem;
    letter-spacing: 1px;
    white-space: normal;
    line-height: 1.3;
  }
  #video-slice .content {
    padding: 0 10px;
  }
  img.seals.wow.fadeInUp {
    max-width: 1007px;
    left: unset;
    top: 32%;
  }
  video#background-video {
    display: none;
  }
  .wrap-center {
    z-index: 100;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -65%);
    white-space: nowrap;
  }
  .nav-buttons .matrix {
    padding: 10px 20px;
    border: .5px solid #052a3a;
    background: #052a3a;
  }
  span.count-num.plus {
    font-size: 4rem;
  }
  .stories {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  .desc {
    min-height: 190px;
  }
  .desc h3 {
    font-weight: 400;
    font-size: 19px;
  }
  #about {
    padding: 2rem 0 5rem;
  }
  #about .pagination .container {
    gap: 5px;
  }
  #about .pagination__item {
    padding: 4px 20px 6px;
  }
  .js-parallax {
    padding-left: 8%;
  }
  div#back-to-up:after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
  }
}
@media screen and (max-width: 710px) {
  .wrapper .next-unit {
    width: unset;
  }
  .loader-content p {
    max-width: unset;
    padding: 0 3rem;
  }
  .first-section h2 {
    text-align: center;
    position: unset;
    font-size: 4rem;
  }
  .section h2 {
    font-size: 3rem;
    padding-top: unset;
  }
}
@media (min-width: 700px) {
  .slideshow .slideshow__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@media (max-width: 699px) {
  .stories {
    gap: 2.5rem;
  }
  .slideshow .slideshow__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .slideshow__slide-caption-title {
    font-size: 25px;
    margin-bottom: 150px;
  }
  .slideshow.-full .slideshow__slide-caption-title {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 675px) {
  #navy h1.title {
    padding-top: 0;
    font-size: 9rem;
  }
  /** mobile styles for banner link start here ***/
  .video-link {
    position: absolute;
    top: calc(22% + 120px);
    left: unset;
    transform: none;
    margin: 0 auto;
    max-width: 30ch;
  }
  .video-link a.custom-audio-button {
    white-space: wrap;
    display: unset;
    padding: 15px;
  }
  .video-link span {
    display: unset;
  }
  span:nth-child(2) {
    padding-right: 6px !important;
  }
  .video-play-button {
    margin: 10px auto;
  }
  /*** end mobile banner link styles **/
  .single-counterup {
    flex-direction: column-reverse;
  }
  .single-counterup div:first-child {
    display: none;
  }
  .stats .title {
    font-family: 'Oswald';
    color: #fffef9;
    font-size: 1.4rem;
    padding-top: 1.2rem;
  }
  span.count-num.plus {
    padding: 0 15px 10px;
    font-size: 5rem;
  }
  .desc {
    min-height: auto;
  }
  .desc h3 span {
    display: unset;
  }
  .tabs-section .tabs {
    padding: 0;
  }
  .tabs-section label {
    display: block;
    border-bottom: 1px solid #ffffff75;
    border-radius: 50px;
    padding: 8px 20px;
    min-height: unset;
    width: 100%;
    margin: 0 auto 10px;
    font-size: 20px;
  }
  .tabs-section section {
    padding: 2rem 1rem;
    border-top: 1px solid #ffffff78;
    border-radius: 12px;
    margin-top: 1rem;
  }
  .tabs .dgov-col-md-5 {
    padding: 0 0 1rem;
  }
  .tabs .dgov-col-md-7 {
    padding: 0;
  }
  .tabs-section p {
    font-size: 18px;
  }
  .modal-title {
    letter-spacing: UNSET;
    font-size: 1.5rem;
  }
  .modal-header .close {
    margin-top: -35px;
    font-size: 1.5em;
    margin-right: -10px;
  }
  .explore span a {
    float: unset;
    letter-spacing: 1px;
  }
  .related-container {
    flex-flow: wrap;
    padding-top: 2rem;
  }
  .related h3 {
    font-size: 1.5rem;
  }
  #other-units .unit p {
    font-size: 18px;
  }
}
@media screen and (max-width: 628px) {
  .sixth-section .command-options label {
    margin: 25px auto;
    width: fit-content;
    min-width: 210px;
  }
  .sixth-section label {
    display: block;
  }
}
/* Mobile: 1 across */
@media (max-width: 600px) {
  .related-container {
    grid-template-columns: 1fr;
  }
  .type-command.row2 {
    padding-top: 50px;
  }
  .sixth-section .type-command .seal {
    margin-top: 0;
  }
  .type-command.row2 .seal {
    flex: 1 1 calc(50% - 1rem);
  }
  .combatant-grid .seal, .shore-command .seal {
    flex: 1 1 calc(33.333% - 1.333rem); /* still 3 per row on small screens */
  }
}
/* XS */
@media only screen and (max-width: 576px) {
  .nav-buttons {
    font-size: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
  }
  .btn.matrix {
    border: 1px solid #79b5d9;
    padding: 5px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #5977a300;
    color: white;
    border-radius: 50px;
    width: 100%;
    text-align: center;
  }
  a.btn.btn-default.btn-default-ghost.learn-more span {
    display: none;
  }
  a.btn.btn-default.btn-default-ghost.learn-more {
    width: 100%;
  }
  #units .content {
    padding: 3rem 15px;
  }
  #about {
    padding: 0;
    border-bottom: 1px solid #e8b00f;
  }
  #about .content {
    padding: 2rem 15px 1rem;
  }
  .content .blurb {
    line-height: 1.4;
    font-size: 18px;
    padding: 30px;
  }
  .operational, .administrative {
    padding: 3rem 15px;
  }
  #video-slice span {
    font-size: 2rem;
  }
  #video-slice h2 {
    font-size: 1.1rem;
  }
  #about .background-absolute {
    border-radius: 0;
  }
  #wrapper .slideshow {
    min-height: inherit;
  }
  #wrapper {
    padding: 0;
  }
  #wrapper .slideshow {
    border-radius: 0;
  }
  .background-absolute {
    border-radius: 0;
  }
  .js-parallax {
    padding: 0 15px;
  }
  .slideshow__slide-caption-text.long {
    padding-top: 25vh;
  }
  #other-units .bottom-seals {
    flex-wrap: wrap;
  }
  #other-units .unit {
    flex: 1 1 50%;
  }
  #other-units .unit p {
    margin-bottom: 10px;
    margin-top: -10px;
  }
}
@media screen and (max-width: 568px) {
  .loader-content h1 {
    font-size: 7rem;
  }
}
@media screen and (max-width: 510px) {
  .section h2 {
    font-size: 2.5rem;
  }
  .section h3 {
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 500px) {
  img.seals.wow.fadeInUp {
    max-width: 765px;
  }
  #modalBannervid .modal-title {
    letter-spacing: 1px;
    line-height: 1;
  }
  .nav-buttons {
    flex-wrap: wrap;
  }
  .nav-buttons {
    gap: 5px;
  }
  .content .blurb {
    padding: 15px 0 0;
  }
  /***start op & admin section ***/
  .section {
    padding: 3rem 15px 5rem;
  }
  .section h2 {
    font-size: 2.8rem;
  }
  #admin-side .dgov-col-lg-5.right-side {
    border-top: 1px solid grey;
  }
  .dgov-col-lg-3.left-side {
    padding-bottom: 0;
  }
  .sixth-section h3, .sixth-section h4 {
    padding-top: 1rem;
  }
  .bottom-seal {
    position: relative;
    top: -140px;
    left: 60px;
    z-index: 1;
  }
  .unit-options .unit-list .active::after {
    right: -25px;
  }
  .task-grid {
    margin: 25px 0;
  }
  .third-section .unit-options .deployable-units-tabs .dgov-col-5 {
    padding-left: 0;
    padding-right: 0;
  }
  .third-section .unit-options {
    margin: 30px 0;
  }
  .ending-blurb {
    padding: 0;
  }
  .command-title {
    font-size: 1.3rem;
    margin: 1.5rem 0 1rem;
  }
  #op-side .second-section .ending-blurb {
    color: #fffef9;
    padding-top: 0;
    padding-bottom: 2rem;
  }
  .third-section .left-side p, .third-section .right-side p {
    margin: 10px 0 5px;
  }
  .left-side .seal img {
    padding-top: 0 !important;
  }
  .third-section .right-side {
    margin: 70px 0 0;
  }
  .last-section h3, .last-setion .sub-blurb {
    text-align: center;
  }
  .section.third-section {
    padding: 3rem 15px 5rem;
  }
  .fourth-section .icons {
    padding: 20px 0;
  }
  .last-section {
    padding: 1rem 15px 2rem;
  }
  .last-section .orders .left-side {
    margin-bottom: 20px;
  }
  .last-section .orders {
    margin: 20px 0;
  }
  .last-section .sub-blurb {
    margin: 0;
    padding: 10px 0 0;
    text-align: center;
  }
  p.command-title {
    margin: 10px;
  }
  .commander-grid .seal {
    max-height: 210px;
  }
  .fifth-section .leader-grid {
    margin: 0;
  }
  .fifth-section .leader-grid .flag {
    width: unset;
    padding-bottom: 30px;
  }
  .fifth-section .leader-grid .left-side, .fifth-section .leader-grid .right-side {
    padding: 30px 15px 0;
  }
  .type-command {
    gap: 1rem;
    margin: 2rem 15px;
  }
  .sixth-section .type-command .seal {
    margin-top: 30px;
  }
  .sixth-section .command-options {
    padding-bottom: 0;
  }
  .unit-options .unit-list {
    padding: 0 10px 0 0;
  }
  /***end op & admin sections***/
  #priorities {
    /* background-image: linear-gradient(to bottom right, rgb(28 35 71), rgb(13 16 33)); */
    padding: 3rem 0;
  }
  #priorities .content {
    padding: 0 15px;
  }
  .tabs-section {
    padding: 5rem 15px;
  }
  .DnnModule-SlideShow .empty-container.base-container {
    padding: 0 !important;
  }
  #about .pagination__item {
    padding: 4px 10px;
  }
  #about .background {
    width: 100vw;
    background-image: linear-gradient(180deg, #022a3ad6 0%, #011c26eb 55%), url(/Portals/1/Interactive/2019/05-military-units/navy-cammo.jpg);
    z-index: 1;
    position: relative;
    background-size: cover;
    box-shadow: inset -4px 0px 14px 0px rgba(0, 0, 0, 0.56);
  }
  .dgov2-popup-close[data-v-0e7a03d2] {
    top: 10px !important;
    right: 10px !important;
  }
  .desc h3 {
    font-size: 1.1em;
    line-height: 1.2;
    font-weight: 600;
  }
  #content-pane-wrap6 {
    padding: 3rem 5px;
  }
  #video-slice span {
    font-size: 1.8rem;
  }
  #video-slice h2 {
    font-size: 1rem;
  }
  #content-pane-wrap10 {
    padding: 3rem 15px 4rem;
  }
  #about h3 {
    font-size: 1.8rem;
  }
  .slideshow__slide-caption-text {
    padding-top: 40vh;
  }
  .slideshow__slide-caption-text.long {
    padding-top: 30vh;
  }
  .related-container {
    padding-top: 0;
  }
  .explore h2, .tabs-section h2 {
    font-family: oswald;
    text-transform: uppercase;
    color: #fffef9;
    font-weight: 500;
    text-align: left;
    display: inline-block;
    font-size: 2.5rem;
    padding-left: 0;
    line-height: .8;
    margin: -2px 0 0;
    letter-spacing: -1px;
  }
  .explore span a {
    margin-bottom: 1.5rem;
  }
  #other-units {
    3rem 20px 1.5rem;
  }
}
@media screen and (max-width: 480px) {
  .wrapper {
    height: unset;
    padding: 7rem 0 5rem;
    justify-content: center;
    display: flex;
  }
  .loader-content h1 {
    font-size: 5rem;
  }
  .wrapper .smooth-scroll {
    display: none;
  }
  #video-slice .video-wrapper {
    height: 40vh;
    min-height: 180px;
  }
  #video-slice span {
    font-size: 1.5rem;
  }
  #video-slice h2 {
    font-size: 0.9rem;
  }
}
@media (max-width: 450px) {
  .combatant-grid .seal, .shore-command .seal {
    flex: 1 1 calc(50% - 1rem); /* 2 per row on very small screens */
  }
}
/* XXS */
@media only screen and (max-width: 430px) {
  h1.page-title, div.page-title {
    font-size: 3.2rem;
    line-height: 60px;
    padding-top: 10px;
    margin: 0;
  }
  img.seals.wow.fadeInUp {
    z-index: 101;
    max-width: 999px;
    left: -110%;
    position: absolute;
    transition: .25s;
    top: 34%;
  }
  .nav-buttons {
    padding: 1rem;
  }
  .content h2 {
    font-size: 2.5rem;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .responsive-top-nav a#drop1:after {
    top: 48%;
  }
  .responsive-top-nav .open > .dropdown-menu {
    width: 90%;
    left: 5%;
  }
  .responsive-top-nav a#drop1:after {
    top: 50%;
  }
  .desc h3 {
    font-weight: 400;
    font-size: 20px;
  }
  #about .pagination__item {
    padding: 4px 10px 8px;
  }
  .slideshow__slide-caption {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 20%, rgb(0, 0, 0, .85) 100%);
  }
}
@media screen and (max-width: 415px) {
  .wrapper .loader-content h1 {
    font-size: 5rem;
    padding-left: 15px;
    margin-top: 15px;
  }
  .third-section .unit-options .deployable-units-tabs .dgov-col-5 {
    padding-left: 0;
  }
  .single-task {
    height: 225px;
  }
  .unit-list .nav-item {
    margin: 15px 0;
    padding: 8px;
  }
  .unit-options .unit-list .unit {
    font-size: 12px;
    text-align: left;
  }
  .last-section .orders .left-side h4, .last-section .orders .right-side h4 {
    font-size: 25px;
  }
  .last-section h4, .sub-blurb {
    text-align: center;
  }
  .second-section p.sub-blurb {
    text-align: center;
  }
}
@media only screen and (max-width: 375px) {
  #navy h1.title {
    font-size: 8rem;
  }
  .wrap-center {
    top: 30%;
  }
  .DnnModule-DNN_HTML.DnnModule-8851 .top {
    bottom: 5px;
    right: 5px;
  }
  .single-counterup {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .stats {
    padding: 1.5rem 0 2rem;
  }
  span.count-num.plus {
    font-size: 2.5em;
    padding: 0;
    line-height: 1;
  }
  .section {
    padding: 3rem 15px 5rem;
  }
  .section h2 {
    font-size: 2.3rem;
  }
  #priorities {
    box-shadow: none;
    padding: 3rem 0 4rem;
  }
  .desc h3 span {
    display: none;
  }
  #about {
    padding: 3rem 0 0;
  }
  #about .blurb {
    padding: 1rem 15px;
  }
  #wrapper {
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid #e8b00f;
  }
  #wrapper .slideshow {
    border-radius: 0;
    height: 90vh;
  }
  .background-absolute {
    border-radius: 0;
  }
  #about .pagination {
    top: 10px;
  }
  #about .pagination__item {
    font-size: 18px;
  }
  .slideshow__slide-caption-text.long {
    padding-top: 20vh;
  }
  .custom-audio-button, .custom-audio-button:visited, .slideshow__slide-caption-subtitle-label {
    padding: 6px 8px 8px 20px;
    font-size: 18px;
  }
  .values span {
    border-top: 4px dotted #ffffff69;
  }
  p.slideshow__desc {
    font-size: 18px;
  }
  .tabs-section {
    padding: 3rem 15px 4rem;
  }
  #other-units {
    padding: 3rem 15px;
  }
}
@media (max-width: 320px) {
  .combatant-grid .seal, .shore-command .seal, .type-command.row2 .seal {
    flex: 1 1 100%; /* 1 per row on extra small screens */
  }
}
/***************************************************
    RESPONSIVE NEW
***************************************************/
/****MOBILE WOW FIXES*****/
.wow {
  visibility: hidden;
}
/***************************************************
	end.
	***************************************************/