:root {
  --cty-alink: #1976D2; /* primary link color */
  --cty-ahover: #2196F3; /* primary hover color */

  --cty-ddnavy: #001A72; /* data dashboard brand blue */
  --cty-ddnavydark: #001A72; 
  --cty-ddgreen: #009A44; /* mp green like on top nav */ 
  --cty-silver: #f5f5f5;
}

body { font-family: 'Fakt', sans-serif; }
h1,h2,h3 { font-family: 'Fakt', sans-serif!important; }

.oly-basic-cards { margin:0; }

.container-dashboard { padding:0 24px; margin:0 auto; }
@media all and (min-width: 992px) {
	.container-dashboard { padding:0 24px!important; }
}
@media all and (min-width: 1200px) {
	.container-dashboard { padding:0 24px!important; max-width:1500px!important; }
}

.make-white * { color:white!important; }
.make-blue * { color:var(--cty-ddnavy)!important; }

/* header hero */

.dd-hero { width:100%; height:auto; background-position:center center; background-size:cover; }
.dd-hero-cover { background-color:rgba(0,26,114,0.5); }

.dd-nala-nav { position:relative; }
.dd-nala-nav-mobile-bg { position:absolute; background-color: #fff; border-radius: 0px 0px 16px 0px; width:150px; height:90px; } 
@media screen and (min-width: 992px) { .dd-nala-nav-mobile-bg { display:none; } }  

.dd-hero-content { display:flex; flex-direction: column; width:100%; max-width:1100px; height:510px; align-items:center; margin:0 auto; padding:0 30px; justify-content: center; text-align:center; }
.dd-hero-content h1.h1-smaller { font-family: 'Fakt', sans-serif; font-weight: 400; font-size:22px; line-height:1.1; letter-spacing:0.200rem; text-transform:uppercase; color:white; margin-bottom:10px; }
.dd-hero-content h1.h1-larger { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:50px; line-height:1.1; letter-spacing:-0.020rem; text-transform:none; color:white; }
@media screen and (min-width: 992px) {
  .dd-hero-content h1.h1-smaller { font-size:26px; }
  .dd-hero-content h1.h1-larger { font-size:60px; }
}


/* dashboard */


.dash-bg { background-color:#001d80; padding:30px 0; 
  /*background-image:url('https://ctycms.com/va-national-landing/NavyPattern.svg');
  background-size: cover;*/
  background-image:url('https://ctycms.com/va-national-landing/National-Landing-officialpattern-smallest.svg');
  background-position: top center;
  background-size: 160px 208px; 
}

.dash-swiper-hold { position:relative; width:100%; }
@media screen and (min-width: 992px) {
  .dash-swiper-hold { height:1600px; overflow:hidden; }
}
@media screen and (min-width: 1200px) {
  .dash-swiper-hold { height:1100px; overflow:hidden; }
}

.dash-slide { width:100%; min-height:900px; background-color:#001d80; color:white; }
.dash-slide-cover { background-color:transparent; }
.dash-slide h1, .dash-slide h2, .dash-slide h3 { color:white; font-family: 'Fakt', sans-serif; }
.dash-slide h2 { font-size: 25px; text-wrap:balance; }
.dash-slide p { color:white; font-family: 'Fakt', sans-serif; }
.dash-slide p a { color:white; text-decoration:underline; }
.dash-slide p a:hover { color:white; text-decoration:underline; }

p.cite { font-size:0.9rem; margin-top:8px; text-wrap:balance; }

.dash-toc-card { width:100%; height:400px; position:relative; transition: all 0.15s linear 0s; }
.dash-toc-card:hover { cursor:pointer;  }

.dash-toc-card-bg { width:calc(100% - 6px); height:394px; position:absolute; top:3px; left:3px; border:4px solid transparent; border-width: 0 4px 4px 0; transition: all 0.15s linear 0s; }
.dash-toc-card:hover .dash-toc-card-bg { border-color: var(--cty-ddgreen); top:5px; left:5px; }

.dash-toc-card-bg2 { width:calc(100% - 6px); height:394px; position:absolute; top:3px; left:3px; background-color:rgba(0,26,114,0.7);; transition: all 0.15s linear 0s; }
.dash-toc-card:hover .dash-toc-card-bg2 { background-color:rgba(0,26,114,1); top:-1px; left:-1px; }


.dash-toc-card-content { width:calc(100% - 6px); height:394px; position:relative; top:3px; left:3px; padding:24px; position:relative; transition: all 0.15s linear 0s; }
.dash-toc-card:hover .dash-toc-card-content { color:inherit; }

@media screen and (min-width: 992px) {
  .dash-toc-card  { height:500px }
  .dash-toc-card-bg { height:500px; }
  .dash-toc-card-bg2 { height:500px; }
  .dash-toc-card-content { height:500px; }
}

.dash-toc-subhead { font-weight:500; font-size:18px; line-height:1.15; margin-bottom:1rem; }
.dash-toc-headline { font-weight:700; font-size:40px; line-height:1.15; margin-bottom:1rem; letter-spacing:-0.050rem; }

.dash-toc-icon { width:120px; position:absolute; bottom:24px; left:24px; }
.dash-toc-icon-inline { width:120px; }
.dash-toc-html { color:inherit; }

.dash-slide-intro { background-color:var(--cty-ddnavydark); width:100%; height:100%; padding:24px; }
.dash-icon-intro { width:120px; }

.dash-slide-panel { background-color:#001d80; border:16px solid #001d80; }

.dash-nav-bar { display:table; width:100%; margin-bottom:1.5rem;  }
.dash-nav-left { display:table-cell; width:33%; text-align:left; }
.dash-nav-center { display:table-cell; width:33%; text-align:center; }
.dash-nav-right { display:table-cell; width:33%; text-align:right; }

.dash-nav-bar-repeat { margin-top:1rem; }
@media screen and (min-width: 992px) {
  .dash-nav-bar-repeat { display:none; }
}

.dash-nav-left button { border:0; background-color:#263f94; color:white; padding:0 10px 0 8px; border-radius:4px; }
.dash-nav-right button { border:0; background-color:#263f94; color:white; padding:0 8px 0 10px; border-radius:4px; }
.dash-nav-center button { border:0; background-color:transparent; color:white; }



.dash-icon-home { width:100%; padding-bottom:75%; background-position: bottom left; background-size:contain; background-repeat:no-repeat; }
.dash-icon-panel { width:100%; padding-bottom:75%; background-position: center left; background-size:contain; background-repeat:no-repeat; margin-bottom:1rem; }

.dash-icon1 { background-image:url('https://ctycms.com/va-national-landing/icon1-demographics.svg'); }
.dash-icon2 { background-image:url('https://ctycms.com/va-national-landing/icon2-industries.svg'); }
.dash-icon3 { background-image:url('https://ctycms.com/va-national-landing/icon3-innovation.svg'); }
.dash-icon4 { background-image:url('https://ctycms.com/va-national-landing/nl-icons-placemaking-v4.svg'); }
.dash-icon5 { background-image:url('https://ctycms.com/va-national-landing/icon4-officemarket.svg'); }
.dash-icon6 { background-image:url('https://ctycms.com/va-national-landing/icon6-housing.svg'); }
.dash-icon7 { background-image:url('https://ctycms.com/va-national-landing/icon7-hospitality.svg'); }
.dash-icon8 { background-image:url('https://ctycms.com/va-national-landing/icon8-retail.svg'); }

.infogram-embed { background-color:var(--cty-ddnavydark); border:6px solid var(--cty-ddnavydark); border-width:4px 12px; }

/* dashboard parts */

.dash-box { width:100%; background-color:var(--cty-ddnavydark); padding:12px 24px 36px 12px; margin-top:16px; }
.dash-box p { margin-bottom:4px; }
.text-large { font-size:46px; line-height:1.1; font-weight:700; text-wrap:balance; }
.text-medium { font-size:23px; line-height:1.1; font-weight:700; text-wrap:balance;  }
.text-small { font-size:18px; line-height:1.1; font-weight:700; text-wrap:balance;  }

.dash-box td { font-size:15px; padding-right:16px; }
.dash-box td b { font-size:20px; }
.dash-box th { font-size:20px; color:#f1cd12; }

.dash-slide .cc-sponsor-logos { margin-top:0; }
.dash-slide .cc-logo { background-color:#001a72; }
.dash-slide .cc-logo span { border-color:#001a72; }
.dash-slide .cc-logo-img { border-color:#001a72; }

.dash-slide .oc { background-color:var(--cty-ddnavydark); height:100%; }
.dash-slide .oc a { display:block; height:100%; text-decoration:none; color:inherit; }
.dash-slide .oc a:hover { color:inherit; text-decoration:none; }
.dash-slide .oc-image { display:block; }
.dash-slide .oc-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; }
.dash-slide .oc-content { padding:12px; }

.dash-slide .oc-subhead { font-weight:700; font-size:0.9rem; text-transform:uppercase; margin-bottom:0.5rem; }
.dash-slide .oc-headline { font-weight:700; font-size:1.4rem; line-height:1.3; margin-bottom:12px; }
.dash-slide .oc-text { font-size:1rem; margin-bottom:0.5rem; }
.dash-slide .oc-html a { display:inline; height:auto; }
.dash-slide .oc-cta { display:inline-block; font-size:0.9rem; text-transform:uppercase; background-color:black; color:white; padding:0.25rem 0.75rem; margin-top:1rem; }
.dash-slide .oc-cta a { color:white; text-decoration:none; }
.dash-slide .oc-cta a:hover { color:white; text-decoration:none; }
.dash-slide .oc-cta span::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f178"; 
  content: "\203a"; /* angle */ 
  padding-left: 8px;
}



/* simple slider carousel */

.panel-spotlight-bg { background-color:var(--cty-silver); }
.panel-spotlight { background:white; width:100%; max-width:9999px; margin:0 auto; }

.cafe-carousel-card { position:relative; background-color:var(--cty-silver); }

.cafe-carousel-next, .cafe-carousel-prev {
  display: flex;
  position: absolute;
  top: var(--swiper-navigation-top-offset,270px);
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: white;
  font-size:24px;
  color: var(--cty-ddgreen);
}
.cafe-carousel-prev { left:0px; }
.cafe-carousel-next { right:0px; }

.carousel-card { display:block;  }
.carousel-card-image { display:block; }
.carousel-card-image-img { display:block; width:100%; height:400px; background-size:cover; background-position:center center; }
.carousel-card-content { padding:30px 24px; }
.carousel-card-content-cell { text-align:left; }

@media all and (min-width: 992px) {
  .carousel-card { display:flex; flex-direction: row-reverse; }
  .carousel-card-image { width:50%; height:auto; }
  .carousel-card-image-img { width:100%; height:100%; padding:0; }
  .carousel-card-content { width:50%; min-height:540px; padding:0; display: flex; align-items: center; }
  .carousel-card-content-cell { padding:0 2rem 0 4rem; }
}
@media all and (min-width: 992px) {
  .carousel-card-content-cell { padding:0 4rem 0 8rem; }
}

.carousel-card-subhead { color:var(--cty-ddnavy); font-size:1.1rem; font-weight:500; margin-bottom:0.5rem; text-wrap:balance; }
.carousel-card-headline { color:var(--cty-ddnavy); font-weight:700; font-size:1.8rem; line-height:1.1; margin-bottom:0.5rem; text-wrap:balance; }
.carousel-card-text { color:var(--cty-ddnavy); font-size:1rem; }
.carousel-card-link { margin-top:1rem; }




/* https://ryanmulligan.dev/blog/css-marquee/ */

.marquee {
  --gap: 3rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  background-color: white;
  color:black;
  padding:0; 
  margin:0;
  background-color:white;
}

ul.marquee_content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  list-style:none;
  margin:0;
  padding:0;
}

ul.marquee_content li { width:180px; }

.marquee-logo-img { width:180px; height:120px; background-position:center center; background-size: contain; background-repeat:no-repeat; }

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee_content {
    animation-play-state: paused !important;
  }
}

/* Enable animation */
.marquee_content {
  animation: scroll 80s linear infinite;
}

/* Pause on hover 
.marquee:hover .marquee_content {
  animation-play-state: paused;
}
  */





/* reports slider */

.reports-panel { background-color:var(--cty-silver); }

.cafe-swiper-hold { position:relative; }

.cafe-swiper-next, .cafe-swiper-prev {
  display: flex;
  position: absolute;
  top: var(--swiper-navigation-top-offset,40%);
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: white;
  font-size:24px;
  color: var(--cty-ddgreen);
}
.cafe-swiper-prev { left:-22px; }
.cafe-swiper-next { right:-22px; }


.report-crd { background-color:white; height:100%; }
.report-crd-auto { height:auto; }  /* as with masonry */ 
.report-crd a { display:block; height:100%; text-decoration:none; color:inherit; }
.report-crd a:hover { color:inherit; text-decoration:none; }
.report-crd-image { display:block; }
.report-crd-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; width:100%; padding-bottom:100%; }
.report-crd-content { padding:1.5rem; }

.report-crd-subhead { color:var(--cty-ddnavy); font-size:1.1rem; font-weight:500; margin-bottom:0.5rem; text-wrap:balance; }
.report-crd-headline { color:var(--cty-ddnavy); font-weight:700; font-size:1.8rem; line-height:1.1; margin-bottom:0.5rem; text-wrap:balance;  }




/* panel-contact */

.panel-contact { background-color:var(--cty-ddnavy); }


.panel-contact-image { border-radius:50%; overflow:hidden; width:250px; height:250px; display:inline-block; border:8px solid white; background-color:black; }
.panel-contact-image { background-size:cover; background-position: center center; }