html, body { color: #333; font-family: "Heebo", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }
.row { margin: 0; }
#content > .row > div { padding: 24px 10% 64px; }
.vertical-center > div { float: none; display: inline-block; margin-left: -.5%; vertical-align: middle; }
.vertical-center > div:first-of-type { margin: 0; }

/* Links */
a { transition: background-color .2s, color .2s; }
a:hover,
a:focus { text-decoration: none; }
.button { background-color: #c47; border-radius: 14px; border: 0; color: #fff; display: inline-block; letter-spacing: .05em; margin-top: 12px; padding: 4px 16px; transition: background-color .2s; }
.button:hover { background-color: #b16; color: #fff; }
.button:focus { color: #fff; }

#skiptocontent { background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 8px 0 #000; font-size: 1.3em; left: -9999px; padding: 3px 12px; position: absolute; top: -9999px; }
#skiptocontent:focus { left: 8px; top: 8px; }
.ada-element { left: -9999px; position: absolute; }

.vc:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.vc > * { display: inline-block; vertical-align: middle; }

.list-var { min-height: 110px; padding-left: 120px; position: relative; }
.list-var > img { left: 0; position: absolute; width: 100px; }

.circ { background: #c47; border-radius: 50%; height: 100px; line-height: 100px; text-align: center; width: 100px; }
.circ img { width: 60px; }

/* Headers */
h1 { font-size: 3.3em; margin: 30px 0 22px; }
h2 { color: #06283f; font-size: 2.2em; font-weight: 900; margin: 12px 0 0; text-transform: uppercase; }
h2 span { color: #005daa; font-size: .7em; text-transform: none; }
h3 { color: #005daa; font-size: 1.6em; font-weight: 700; margin: 42px 0 14px; }
h4 { font-size: 1.6em; margin: 28px 0 0; }
h5 { font-size: 1.4em; margin: 26px 0 0; }
h6 { font-size: 1.3em; margin: 26px 0 0; }

/* Paragraphs & Lists */
p { line-height: 1.5em; margin: 16px 0 6px; }
ul, ol { margin: 16px 0 10px; }
li { line-height: 1.4em; margin-bottom: 8px; }
img { max-width: 100%; }
.full-width { width: 100%; }

/* Forms */
form { margin: 18px 0; }
label { display: block; margin: 10px 0 8px; width: 100%; }
input[type="text"] { margin-bottom: 8px; padding-left: 3px; width: 100%; }
textarea { height: 80px; margin-bottom: 8px; padding: 3px 5px; resize: none; width: 100%; }
input[type="checkbox"],
input[type="radio"] { margin: 0 4px 0 2px; }
input[type="checkbox"] + label,
input[type="radio"] + label { display: inline-block; margin-right: 14px; position: relative; top: -1px; width: auto; }
input[type="submit"],
input[type="reset"] { background-color: #c47; border-radius: 14px; border: 0; color: #fff; letter-spacing: .05em; margin-top: 14px; padding: 4px 16px; transition: background-color .2s; }
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover { background-color: #b16; }

/* Tables */
table { border: 1px solid #333; margin: 14px 0; width: 100%; }
table tr th { border: 1px solid #333; padding: 2px 4px; }
table tr td { border: 1px solid #333; padding: 2px 4px; }

/* Quick Header */
.header { background-color: #0b3c5d; background-image: linear-gradient(to bottom, #05365a, #06518e); color: #fff; margin-top: 56px; padding: 18px 0 0; position: fixed; top: 0; width: 100%; z-index: 10; }

#header-top { background: #00172a; font-size: .9em; margin-bottom: 18px; padding: 6px 20px 2px 0; }
#header-top img { height: 24px; margin: 0; }
#header-top p { display: inline-block; margin: 0; }
#header-top ul { float: right; padding-top: 1px; }
#header-top li { margin-left: 9px; margin-bottom: 0; padding-left: 9px; }
#header-top li:Last-of-type { border-left: 1px solid #fff; }
#header-top li a:hover { color: #22bcb9; }
.header h1 { left: -9999px; position: absolute; }
.header img { height: 56px; margin-left: 22px; margin-bottom: 16px; }
.header .nav { float: right; top: 0; padding: 17px 40px 0 0; right: 0; }
.header ul { margin: 0; padding: 0; }
.header li { display: inline-block; margin-left: 32px; }
.header li a { color: #fff; display: block; padding: 0 4px; position: relative; }
.header .nav li a:before { background: #22bcb9; content: ""; height: 0; left: 0; margin-top: -9px; position: absolute; transition: height .3s;  width: 100%; }
.header .nav li a:hover:before,
.header .nav li a.active:before { height: 5px; }
.header li a:hover { color: #22bcb9; }
.header li {position:relative}
.header li ul {position:absolute;top:30px;max-height:0px;overflow:hidden;  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;background-color:white}
.header li.dropdown:hover ul {max-height:1000000px;height:auto;}
.header li.dropdown ul li {margin:0px;border-bottom:#dedede solid 1px;display:block}
.header li.dropdown ul li a {color:#0B3C5D;padding:10px 15px;font-weight:bold}
.header li.dropdown ul li:hover a:before {display:none}
.header li.dropdown ul li:hover a {color:#22bcb9}
.header li.dropdown:first-of-type ul { width: 120px; }
#mobile-menu { background-color: transparent; border: 0; cursor: pointer; display: none; padding: 0 4px; }
.menu-opened .dropdown ul {max-height:10000px;height:auto;top:30px!important;left:0px;}
.mapframe {display:none;}

#homepage .va-agency-bar-container { z-index: 100; }
.va-agency-bar-container .va-agency-bar { position: fixed; width: 100%; }

/* Image Slideshow */
.image-slideshow { margin-top: 56px; position: relative; width: 100%; }
.image-slideshow > button { background: transparent; border: 0; color: #fff; position: absolute; transition: background .2s, margin .3s; z-index: 3; }
.image-slideshow > button span { right: -9999px; position: absolute; }
.image-slideshow > button:hover { margin-left: -8px; }
.slideshow-trigger { border-radius: 24px; height: 38px; line-height: 38px; margin: 12px; padding: 0; width: 38px; }
.slideshow-move { font-size: 1.6em; left: 16%; margin-top: -25px; padding: 0 8px; position: relative; top: 38%; transform: rotate(-180deg); z-index: 2; }
.slideshow-move img { width: 90px; }
.slideshow-move.next { left: auto; right: 16%; transform: rotate(-0deg); }
.slideshow-move.next span { right: auto; left: -9999px; }
.slideshow-move.next:hover { margin-right: -8px; }
.image-slideshow-slides { overflow: hidden; padding: 32px 0 18px; position: relative; }
.image-slideshow-slides > div { box-shadow: 0 0 18px -4px #333; margin-top: 0; opacity: 0; overflow: hidden; position: absolute; transition: opacity 0s; }
.image-slideshow-slides > div.active { height: 400px; margin-left: 20%; margin-top: 18px; opacity: 1; position: relative; top: 0; transition: margin .3s, opacity .25s; width: 60%; z-index: 1; }
.image-slideshow-slides > div.prev-one { height: 330px; margin-left: 1%; opacity: 1; position: absolute; top: 0; transition: opacity .25s; width: 40%; }
.image-slideshow-slides > div.next-one { height: 330px; margin-left: 59%; opacity: 1; position: absolute; top: 0; transition: opacity .25s; width: 40%; }
.image-slideshow-slides > div img { left: -35%; max-width: 8000%; position: relative; width: 170%; }
.image-slideshow-slides > div > div { color: #fff; display: none; padding: 0 52px; position: absolute; text-align: center; bottom: 34px; width: 100%; }
.image-slideshow-slides > div > div span { font-size: 2.4em; font-weight: 700; }
.image-slideshow-slides > div > div button { background: #fff; border: 2px solid #004680; border-radius: 60px; color: #004680; display: block; font-size: .9em; margin: 15% auto 0; padding: 5px 10px 4px; transition: background .2s; width: 120px; }
.image-slideshow-slides > div > div button:hover { background: #a8e9e8; }
.image-slideshow-slides > div > div a { background: #fff; border: 2px solid #004680; border-radius: 60px; color: #004680; display: block; font-size: .9em; margin: 15% auto 0; padding: 5px 10px 4px; transition: background .2s; width: 120px; }
.image-slideshow-slides > div > div a:hover { background: #a8e9e8; }
.image-slideshow-slides > div.active > div { display: block; }
.caption { bottom: 20px; color: #fff; font-size: 1.1em; position: absolute; text-align: center; width: 100%; z-index: 1; }

#img-slideshow-buttons { list-style-type: none; padding: 0; text-align: center; }
#img-slideshow-buttons li { display: inline-block; }
#img-slideshow-buttons li button { background: #747d84; border: 0; border-radius: 50%; height: 12px; margin: 0 4px; transition: .2s; width: 12px; }
#img-slideshow-buttons li button.active { background: #004680; height: 18px; width: 18px; }

#content {padding-top: 144px; }
#subpage-header { background-position: center; background-size: cover; height: 360px; overflow: hidden; position: relative; }
#subpage-header.image-about { background-image: url("../images/Interstate95_CowanBoulevardOverpass_FacingNorth.jpg"); }
#subpage-header.image-project { background-image: url("../images/DTT-Aerial-View[1].jpg"); }
#subpage-header.image-innovation-bg { background-image: url("../images/24402226191_86e5b19f7d_o.jpg"); }
#subpage-header.image-pe { background-image: url("../images/SouthIsl_04_2022.07.14_11.16.jpg"); }
#subpage-header.image-pe2 { background-image: url("../images/52536431508_2983ed0fda_o.jpg"); background-position: top; }
#subpage-header.image-careers { background-image: url("../images/DTT-East-Bound-8-15-2017.jpg"); }
#subpage-header.image-contact { background-image: url("../images/48545527591_3c2901557b_o.jpg"); }
#subpage-header.image-resources-bg { background-image: url("../images/8122662701_4e7d475bb9_o.jpg"); }
#subpage-header.image-team { background-image: url("../images/Old-Highway-Building-DSC02148-(2).jpg"); background-position: top; }
#subpage-header:after { background: #fff; box-shadow: 0 0 18px 6px #111; content: ""; height: 30%; left: -10%; position: absolute; top: 90%; transform: rotate(2deg); width: 120%; }
#subpage-header > div { background: #fff; display: inline-block; margin-top: 74px; padding: 14px 32px; }
#subpage-header > div img { height: 110px; }

/* Quick Footer */
.footer { background-color: #06283f; color: #fff; margin-top: 32px; }
.footer nav { background-color: #06518e; background-image: linear-gradient(to right, #05365a, #06518e); overflow: auto; }
.footer nav a { color: #fff; float: left; font-size: 1.1em; font-weight: 700; padding: 11px 0 9px; position: relative; text-align: center; text-transform: uppercase; width: 25%; }
.footer nav a:hover { color: #22bcb9; }
.footer nav a:after { background: #fff; content: ""; height: 12px; left: 100%; margin-top: -6px; position: absolute; top: 50%; width: 1px; }
.footer nav a:last-of-type:after { display: none; }
#footer-middle { font-size: .9em; padding: 18px 0; }
#footer-middle div { display: inline-block; text-align: center; vertical-align: middle; width: 25%; }
#footer-middle img { height: 54px; }
#footer-middle p { display: inline-block; line-height: 1.4em; margin: 0; vertical-align: middle; width: 70%; }
#footer-bottom { background: #00172a; font-size: .9em; padding: 14px; text-align: center; }
#footer-bottom p { margin: 0; }

#intro-screens { height: 100%; }
#homepage #background-video-container { height: 100%; max-height: 8000px; position: fixed; top: 0; width: 100%; }
#homepage .header { background: none; padding-top: 6px;position: fixed; }
#homepage .header > img:last-of-type { left: -20%; opacity: 0; position: relative; }

#current-projects { background-image: url("../images/288.jpg"); background-size: cover; background-position: center; color: #fff; padding: 78px 0; }

#first-screen { height: 100%; position: fixed; text-align: center; top: 0; width: 100%; }
#first-screen h2 { color: #fff; display: inline-block; font-size: 4.4em; font-weight: 700; text-transform: none; vertical-align: middle; }
#first-screen h2 span { color: #fff; display: block; font-size: .35em; letter-spacing: .15em; margin-top: 12px; text-transform: uppercase; }
#first-screen h2 img { display: block; height: 70px; margin: 0 auto 14px; }
#first-screen:after { content: ""; display: inline-block; height: 94%; vertical-align: middle; }

#second-screen { color: #fff; height: 100%; margin-top: -90px; padding-top: 120px; position: fixed; text-align: center; top: 100%; width: 100%; }
#second-screen span { background: #06283f; box-shadow: 0 -38px 38px -26px #000; content: ""; height: 100%; left: 0; margin-top: -26px; position: absolute; transform: skewY(-3deg); top: 0; width: 100%; }
#second-screen:after { content: ""; display: inline-block; height: 72%; vertical-align: middle; }
#second-screen div { display: inline-block; position: relative; vertical-align: middle; width: 80%; }
#second-screen p { font-size: 1.2em; margin-bottom: 10px; padding: 0 10%; }
#homepage #second-screen h3 { color: #fff; font-size: 4.4em; }

#scroll-for-more { bottom: 0; color: #fff; left: 0; margin-bottom: 18px; position: fixed; text-align: center; width: 100%; z-index: 4; }
#scroll-for-more img { cursor: pointer; display: block; height: 140px; margin: 0 auto 3px; position: relative; z-index: 3; }
#scroll-for-more span { position: relative; z-index: 3; }
#scroll-for-more div { background: #004680; box-shadow: 0 -38px 38px -26px #000; height: 234px; margin-top: 194px; position: absolute; transform: skewY(-3deg); transition: background .4s; width: 100%; z-index: 2; }
#scroll-for-more div.fade-bg { background-image: linear-gradient(to bottom, #000f1a, #06518e); }

#homepage h3 { color: #06283f; font-size: 2em; text-transform: uppercase; }
#homepage .footer { margin-top: 0; }
#homepage .footer #footer-bottom div { display: inline-block; float: none; vertical-align: middle; width: 32%; }

.blue-staggered { background: #0b3c5d; color: #fff; margin-top: 100px; padding-bottom: 60px; position: relative; }
.blue-staggered h2 { color: #fff; margin: 56px 0 28px; }
.blue-staggered h3 { color: #fff !important; }
.blue-staggered:before { background: #0b3c5d; content: ""; height: 100px; position: absolute; top: -50px; transform: skewY(-3deg); width: 100%; }
.blue-staggered > span { background: #0b3c5d; bottom: -50px; content: ""; height: 100px; left: 0; position: absolute; transform: skewY(3deg); width: 100%; }
#homepage .blue-staggered { background: #06283f; }
#homepage .blue-staggered:before { background: #06283f; }
#homepage .blue-staggered > span { background: #06283f; }
#p3-factsheets > span { display: none; }
.resources-footer { margin: 0; }
.resource-list p { color: #000; }

#current-projects { text-align: center; }
#p3-benefits { text-align: center; }

#temp-cards a { background: #747d84; background-position: left; background-size: cover; display: inline-block; height: 320px; margin: 14px 18px 26px; overflow: hidden; position: relative; width: 450px; }
#temp-cards a:first-of-type { background-image: url("../images/scms-poster.jpg"); }
#temp-cards a:last-of-type { background-image: url("../images/srm-img.jpg"); }
#temp-cards a p { bottom: 0; color: #fff; margin: 0; position: absolute; height: 130px; transition: margin .3s; width: 100%; }
#temp-cards a p:before { background: #000; background: rgba(0,0,0,.5); content: ""; height: 140%; left: 0; position: absolute; transform: skewY(-3deg); transition: .4s; width: 100%; }
#temp-cards a p strong { display: block; font-size: 1.5em; margin: 24px 0 10px; position: relative; }
#temp-cards a p span { background: #fff; border-radius: 18px; color: #002856; display: inline-block; font-size: .85em; font-weight: 700; padding: 0 10px; position: relative; transition: .2s; }
#temp-cards a:hover p { margin-bottom: 20px; }
#temp-cards a:hover p:before { background: rgba(0,0,0,.6); }
#temp-cards a:hover p span { background: #c8ddef; }

#awards h3 { margin-bottom: 34px; text-align: center; }
#awards .row > * > * { background: #fff; background-position: center; background-size: cover; display: block; position: relative; width: 100%; }
#awards .col-md-6 > * { height: 540px; }
#awards .col-sm-3 > * { height: 256px; margin-bottom: 28px; }
#awards a > div { background: #fff; bottom: 0; color: #000; font-size: .85em; position: absolute; width: 100%; }
#awards a h4 { font-size: 1.2em; font-weight: 700; margin: 0; padding: 12px 12px 0; }
#awards a p { border-bottom: 4px solid #f47735; margin: 0 0 6px; padding: 0 12px 16px; transition: padding .3s, margin .5s; }
#awards a:hover > div p { margin-bottom: 12px; padding-bottom: 24px; }
#awards .award-box > div { background: #fff; bottom: 0; color: #000; font-size: .85em; position: absolute; width: 100%; }
#awards .award-box h4 { font-size: 1.2em; font-weight: 700; margin: 0; padding: 12px 12px 0; }
#awards .award-box p { border-bottom: 4px solid #f47735; margin: 0 0 6px; padding: 0 12px 16px; transition: padding .3s, margin .5s; }
#awards .img-awards1 { background-image: url("../images/1651497396736.jpg"); }
#awards .img-awards4 { background-image: url("../images/awards4.jpg"); }
#awards .col-md-6 > * > div { background: rgba(255,255,255,.8); font-size: .95em; padding: 8px 16px; }
#awards .col-md-6 > * > div > div { display: inline-block; vertical-align: middle; }
#awards .col-md-6 > * > div > div h4 { padding: 12px 4px 0; }
#awards .col-md-6 > * > div > div p { padding: 0 4px 12px; }
#awards .col-md-6 > * > div > .btn { background: #0070cc; border-color: #000; color: #fff; float: right; font-size: .8em; margin: 24px 12px; vertical-align: middle;  }
#awards .col-md-6 a:hover > div > .btn { background: #00467f; }
#awards > span { display: none; }

.innovation-img { opacity: .8; transition: opacity .3s; }
.innovation-img:hover { opacity: 1; }

#project-stats { background-image: url("../images/FAM110222p0709hr.jpg"); background-size: cover; background-position: center; color: #fff; padding: 280px 0 200px; text-align: center; }
#project-stats img { display: block; height: 140px; margin: 0 auto 26px; }
#project-stats strong { border-bottom: 6px solid #22bcb9; display: block; font-size: 1.3em; margin: 0 10%; padding-bottom: 6px; }
#project-stats p { padding: 0 10%; }
#project-stats a { background: #fff; color: #0b3c5d; border: 3px solid #0b3c5d; border-radius: 8px; display: block; font-size: 1.3em; margin: 0 12px; padding: 22px 18px;  }
#project-stats a:hover { background: #50dad7; }

.map-iframe { height: 520px; width: 100%; }

#project-topics { margin-top: 52px; overflow: auto; }
#project-topics nav { border-spacing: 14px 0; display: table; width: 100%; }
#project-topics nav a { background: #b9c2c8; border-radius: 50px; color: #0b3c5d; display: table-cell; font-weight: 700; line-height: 1.2em; padding: 14px; text-align: center; width: 20%; }
#project-topics nav a:hover { background: #22bcb9; }
#project-topics nav a:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
#project-topics nav a span { display: inline-block; vertical-align: middle; }
#project-topics nav a.active { background: #22bcb9; border: 2px solid #119F9D; color: #0b3c54; }
#project-topics nav a.active:hover { background: #0b908e; }
#topic-cards { margin: 30px 0 0 2%; padding-bottom: 14px; display:flex; flex-direction:row;flex-wrap:wrap;justify-content:left;}

#topic-cards .card { margin-right: 1.5%; margin-bottom: 20px; position: relative; border-radius: 12px; box-shadow: 0 0 14px 0 #888; padding: 30px 10px 40px;  text-align: center; }
#topic-cards .card img { display: block; height: 130px; margin: 0 auto 18px; }
#topic-cards .card h3 { color: #000; display: block; height: 64px; margin-top: 4px; padding: 0 10%;  }
#topic-cards .card span { color: #0070cc; display: block; font-weight: 700; margin: 6px 0;  }
#topic-cards .card > a { bottom: 0px;
    width: 100%; background: #fff; border-radius: 8px; color: #fff; display: block; font-size: 1.1em; font-weight: 700; margin-top: 0; margin-bottom: 0; }
#topic-cards .card > a:hover { background: #0b3c5d; }
#topic-cards .card > a:hover h3 { color: #fff; }
#topic-cards .card > a:hover span { color: #f47735; }
#topic-cards .card.show { -webkit-transition: all 1s ease-in-out .4s, opacity .4s;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1.1s, opacity .9s; width: 31.5%; }

#topic-cards .card.hide {width: 0px; overflow: hidden; box-shadow: none; margin-right: 0px; margin-top: -12px; margin-bottom: 0; opacity: 0; padding: 0;  transform: rotateY(360deg); -webkit-transition: all 1s ease-in-out .4s, opacity .4s;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1.1s ease-in-out 0s, opacity .9s, width .9s, margin-right .15s; }
.callout { background: #005daa; border-left: 18px solid #22bcb9; border-radius: 8px; color: #fff; padding: 18px; }
.callout h3 { color: #fff; font-size: 1.3em; margin: 0 0 3px; }
.callout p { margin: 0; }

.procurement-message { opacity: 0; }
.procurement-message.showing { opacity: 1; transition: opacity .6s ease-in-out .6s; }

.contact-us-row { text-align: center; }
#contact-us > div { display: block; float: none; margin: 30px auto 0; }

#meeting-materials { margin-top: 80px; }

#secondary-resources { margin-top: 40px; }
#secondary-resources h2 + a { display: block; font-weight: 700; margin-bottom: 48px; }

#resource-archive { margin-top: 80px; }

#careers > div > h3 { display: inline-block; margin-bottom: 28px; }
#careers > div > a { float: right; margin-top: 30px; }

#guiding-principles ul { display: block; list-style-type: none; padding: 0; }
#guiding-principles li { background: #fff; border-radius: 50%; color: #004680; display: inline-block; font-size: 1.2em; font-weight: 700; height: 280px; margin: 30px 4% 0 0; padding: 0 42px; text-align: center; vertical-align: middle; width: 280px; }
#guiding-principles li img { display: block;; height: 80px; margin: 0 auto 18px; }
#guiding-principles li div { display: inline-block; vertical-align: middle; width: 96%; }
#guiding-principles li:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }

#team-members { margin-top: 32px; }

.bio { display: none; }
.bio-title { display: block; margin-bottom: 40px; overflow: auto; }
.bio-title div { float: left; height: 100px; margin-right: 24px; width: 100px; }
.bio-title h2 { margin-top: 32px; }
.bio .btn { display: block; margin: 36px auto 0; width: 200px; }

#contact-us > div { padding: 0 4% 0 0;}
.contact-info { background: #f2f3f3; border-top: 3px solid #005DAA; padding: 0 18px 12px !important; }

.btn {
    display: inline-block;
    font-weight: 600;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 50px;
	margin-top: 18px; 
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
a.btn.btn-vdot-blue {
    background: #0070CC;
    border: 2px solid #004680;
    color: #FFFFFF;
}
a.btn.btn-vdot-blue:hover {
    background: #004680;
    color: #FFFFFF;
}
a.btn.btn-darkblue {
    background: #004680;
    border: 2px solid #073452;
    color: #FFFFFF;
}
a.btn.btn-darkblue:hover {
    background: #005DAA;
    color: #FFFFFF;
}
a.btn.btn-orange {
    background: #F47735;
    border: 2px solid #C04E11;
    color: #FFFFFF;
}
a.btn.btn-orange:hover {
    background: #C04E11;
    color: #FFFFFF;
}
a.btn.btn-teal {
    background: #22BCB9;
    border: 2px solid #119F9D;
    color: #06283f;
}
a.btn.btn-teal:hover {
    background: #119F9D;
    color: #06283f;
}
.outline-btn {
	border-color: #004680; 
	color: #004680;
}
.outline-btn:hover {
    background: #004680;
    color:white;
}

/* ACCORDION */
.accordion {
    display: block;
    max-width: 100%;
    margin-bottom:30px;
}
.accordion .btn {
	border-radius: 0; border-bottom: 1px solid #e7e7e7; color: #004680; font-weight: 700; margin: 0; padding: 10px 16px; text-align: left; text-decoration: none; width: 100%;
}
.accordion .btn img { margin-right: 6px; }
.accordion .btn span { background: #fff; border-radius: 50%; box-shadow: 0 3px 8px -3px #333;  color: #005daa; float: right; font-size: 1.8em; font-weight: 400; height: 28px; line-height: 28px; text-align: center; width: 28px; }
.accordion .card {
	background: #f2f3f3; 
    border-radius: 0;
}
.accordion .card.card-header {
	padding: 0;
}
.accordion .card.card-header h5 {
    margin: 0;
}
.accordion .card.card-header h5 .btn {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    outline: none;
    background-color: #dee2e6;
    border-radius: 0;
    padding: 10px 30px 10px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #004680;
}
.accordion .card.card-header h5 .btn .accordion-icon {
    width: 16px;
    height: auto;
    margin-right: 5px;
}

.accordion .card.card-header h5 .btn:after {
    content: "a";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    color: #005DAA;
    text-align: center;
    font-weight: 400;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 19px;
    right: 10px;
}

.accordion .card.card-header h5 .btn.collapsed {
    background-color: #F2F3F3;
}
.accordion .card.card-header h5 .btn:after {
    content: "+";
}

.accordion .card.card-header h5 .btn:focus {
    box-shadow: none;
    text-decoration: underline;

}

.accordion .card.card-header h5 .btn:visited {
    text-decoration: none;
}

.accordion .card.card-header h5 .btn:hover {
    background-color: #dee2e6;
    text-decoration: none;
}

.accordion .collapse {
	padding: 0 18px 12px; 
}



/* RESOURCE CARDS */
.resource-card {
    -webkit-transition: all  300ms ease-in-out;
    -moz-transition: all  300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all  300ms ease-in-out;
    box-shadow: 0 0 10px 2px #e3e3e3;
    border-radius: 10px;
    min-height: 250px;
    margin-bottom: 20px;
    padding: 28px 24px;
    position: relative;
    text-align: center;
    background-color: white;
}
.resource-card a {
	display: block; 
}
.resource-card a h3 {
    color: #0B3C5D!important;
}
.resource-card p {
    color: black;
}
.resource-card:hover {
        background: #0070CC;
}
.resource-card:hover a {
    text-decoration: none;
}

.resource-card .underline-link {
    display: inline-block;
    margin: 0 1px;
    font-size: 0.7500em;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0px;
    padding-bottom: 2px;
    border-bottom: 2px solid #F47735;
    transition: border-color 300ms;
}
.resource-card:hover h3 {
    color: white !important;
}
.resource-card:hover p {
    color: white;
}
.resource-card:hover .underline-link {
    color: white;
    border-bottom: solid 3px #F47735;

}
.resource-card img {
    height: 60px;
}
.resource-card h3 {
    border-top: 1px solid #e3e3e3;
    font-size: 1.4em;
    font-weight: 700;
    margin-top: 24px;
    padding-top: 24px;
}
.resource-card h3:hover {
    color: #F47735;
}
.resource-card p {
    margin-bottom:40px;
}
.resource-card > div {
	bottom: 18px;
	left: 50%;
	margin-left: -70px; 
	position: absolute;
	text-align: center;
	width: 140px;
}
.resource-card > div .underline-link {
    font-size: 1em;
}
.resource-card > div .underline-link :hover {
    color: #22BCB9;
    border-bottom: 3px solid white;
}

/* RESOURCE LIST */
.regular-list {
    padding: 0;
}

.regular-list li {
    border-bottom: 1px solid #E3E3E3;
    font-weight: 700;
    list-style-type: none;
    padding: 14px 16px;
    position: relative;
}

.regular-list li:before {
    background: #22BCB9;
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: 16px;
    width: 3px;
}


.header-list {
    padding: 0;
}

@media (max-width: 991.98px) {
    .header-list {
        font-size: .85em;
    }
}

.header-list h3 {
    font-size: 1.6em;
    font-weight: 700;
}

.header-list li {
    border-top: 1px solid #E3E3E3;
    list-style-type: none;
    padding: 10px 0;
   
}

.header-list li h4 {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 5px;
    padding-left: 26px;
    position: relative;
}

.header-list li h4:before {
    background: #22BCB9;
    content: "";
    height: 18px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 18px;
}


.resource-list ul {
    padding: 0;
}
.resource-list h3 {
    border-bottom: 3px solid #e3e3e3;
    color: #0B3C5D;
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 10px;
}
.resource-list li {
	list-style-type: none;
	-webkit-transition: all  300ms ease-in-out;
	-moz-transition: all  300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all  300ms ease-in-out;
    margin-bottom:0px;
}
.resource-list li:hover {
    background: #F2F3F3;
}
.resource-list li:hover a > span:last-of-type {
    background: #22BCB9;
}
.resource-list li:hover a > span:last-of-type img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(2deg) brightness(107%) contrast(103%);
}
.resource-list a {
    border-bottom: 1px solid #e3e3e3;
    color: #005DAA;
    display: block;
    font-weight: 700;
    padding: 14px 40px 14px 0;
    position: relative;
    -webkit-transition: all  300ms ease-in-out;
    -moz-transition: all  300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all  300ms ease-in-out;
}
.resource-list a > span > span {
	color: #000;
}
.resource-list a > span:last-of-type {
    height: 26px;
    width: 26px;
    background: #F2F3F3;
    position: absolute;
    right: 10px;
    top: 14px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all  300ms ease-in-out;
    -moz-transition: all  300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all  300ms ease-in-out;
}
.resource-list a span img {
    height: 10px;
    -webkit-transition: all  300ms ease-in-out;
    -moz-transition: all  300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all  300ms ease-in-out;
}

/* TABS */
.tab-component {
    display: block;
	margin-top: 38px; 
    max-width: 100%;
}
.tab-component .nav-tabs {
    width: 100%;
    background-color: #F2F3F3;
    display: flex;
    flex: 1;
    flex-direction: row;
}
.tab-component .nav-tabs .nav-item {
    display: flex;
    flex: 1;
	position: relative;
    align-items: stretch;
}
.tab-component .nav-tabs .nav-item:after {
	background: #22BCB9;
	content: "";
	height: 0;
	position: absolute;
	top: 0;
	transition: height .2s;
	width: 100%;
}
.tab-component .nav-tabs .nav-item .nav-link {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 71px;
    min-height: 94px;
    padding: 15px 0px;
    border-radius: 0;
    border: 1px solid #e3e3e3;
    transition: background-color 200ms;
    margin-right:0px;
}
.tab-component .nav-tabs .nav-item .nav-link:hover {
    background-color: #dee2e6;
}
.tab-component .nav-tabs .nav-item .nav-link .tab-title {
    color: #495057;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    transition: 100ms ease-in-out;
}
.tab-component .nav-tabs .nav-item .nav-link .tab-title .icon {
    filter: invert(50%) sepia(10%) saturate(357%) hue-rotate(164deg) brightness(95%) contrast(88%);
    width: 20px;
    height: auto;
    display: block;
    margin: auto;
    margin-bottom: 1px;
    transition: 100ms ease-in-out;
}
.tab-component .nav-tabs .nav-item.active:after {
	height: 7px;
}
.tab-component .nav-tabs .nav-item .nav-link.active .tab-title {
    color: #004680;
}
.tab-component .nav-tabs .nav-item .nav-link.active .tab-title.icon {
    filter: invert(59%) sepia(25%) saturate(1230%) hue-rotate(130deg) brightness(100%) contrast(88%);
}
.tab-component .tab-content {
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    padding: 15px;
}

/* CONTACT */
.cimage {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius:100%;
}

.contact-square {
    -webkit-transition: all  300ms ease-in-out;
    -moz-transition: all  300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all  300ms ease-in-out;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 24px;
    padding: 18px;
    text-align: center;
}
.contact-square .cimage {
    height: 140px;
    width: 140px;
}
.contact-square h3 {
    font-size: 1.3em;
    margin-top: 16px;
}
.contact-square p {
    margin-bottom: 3px;
}
.contact-square.gray-version {
    background: #F2F3F3;
    color: #000;
}
.contact-square.gray-version:hover {
    background: darken(#F2F3F3, 10%);
}
.contact-square.gray-version h3 {
    color: #0B3C5D;
}

/*GRID*/
/* Nav Bar */
#background-video-container {
    position: relative;
    display: flex;
    height: 60vw;
    max-height: 60vh;
    overflow: hidden;
    background-image: url("../images/bg-video-fallback.jpg");
    background-size: cover;
    background-position: center;
}
#background-video-container .header-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 0;
    padding-bottom: 66.25%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#background-video-container .header-video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/bg-video-fallback.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.5s linear;
}
#background-video-container .header-video-overlay--fadeOut {
    opacity: 0;
    visibility: hidden;
}
#background-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#background-video-container .header-video {
    display: none;
}
#background-video-container .inner-banner:after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10vh;
    background: #f2f3f3;
    background: linear-gradient(180deg, rgba(242, 243, 243, 0) 0%, #f2f3f3 100%);
    z-index: 22;
}
#background-video-container .header-video-overlay {
    display: none;
}
#background-video-container button {
    position: absolute;
    bottom: 5vh;
    left: 20px;
    background: none;
    border: white solid 1px;
    z-index: 23;
    color: white;
    font-size: 0.8em;
}
#background-video-container button:after {
    content: "Stop video";
    display: inline-block;
}
#background-video-container button.yt-paused:after {
    content: "Play video";
    display: inline-block;
}

/*********************************************/
/****** Media Queries ************************/
/*********************************************/
/* Add more queries as needed; 992px is the column breakpoint for "medium"  columns in Bootstrap */

@media screen and (min-width: 1950px) {
	html, body { font-size: 20px; }
}

@media screen and (max-width: 1260px) {
	.header img { height: 36px; margin-left: 12px; }
	.header .nav { padding: 6px 26px 0 0; }
	.header li { margin-left: 18px; }

	#first-screen h2 { font-size: 3.4em; }
	#first-screen h2 img { height: 54px; }
	#second-screen { margin-top: -70px; }
	#second-screen:after { height: 64%; }
	#homepage #second-screen h3 { font-size: 3.4em; }
	#scroll-for-more img { height: 104px; }
	
	#content { padding-top: 102px; }

	#temp-cards a { font-size: .9em; height: 280px; width: 390px; }

	#project-stats a { font-size: 1.2em; margin: 0; padding: 16px 12px; }

	.image-slideshow-slides > div.active { height: 320px; }
	.image-slideshow-slides > div.prev-one { height: 260px; }
	.image-slideshow-slides > div.next-one { height: 260px; }
	.image-slideshow-slides > div > div span { font-size: 2em; }
	.image-slideshow-slides > div > div a { margin-top: 12%; }

	.footer nav a { font-size: 1em; }

	#topic-cards > div h3 { font-size: 1.3em; height: 52px; }

	#background-video-container iframe {
	    top: -8%;
	}
}

@media screen and (max-width: 992px) {
    h1 { font-size: 2.2em; margin: 20px 0 6px; }
    h2 { font-size: 1.7em; margin: 12px 0 0; }
    h3 { font-size: 1.4em; margin: 20px 0 0; }
    h4 { font-size: 1.3em; margin: 28px 0 0; }
    h5 { font-size: 1.2em; margin: 26px 0 0; }
    h6 { font-size: 1.1em; margin: 26px 0 0; }
    p, li { font-size: .9em; line-height: 1.3em; }
    .button { font-size: .8em; border-radius: 12px; padding: 4px 12px 3px; }
    table tr { font-size: .8em; padding: 2px; }
    .vertical-center > div { margin: 0; }

    /* Quick Mobile Menu */
    #mobile-menu { display: inline-block; font-size: 1.3em; }
	.header { margin-top: 51px; }
	.header .nav { padding: 0 14px; }
    .header .nav ul { background-color: #fff; box-shadow: 2px 4px 8px -4px #000; display: none; opacity: 0; position: absolute; right: 110%; top: 70px; width: 190px; z-index: 1; }
    .menu-opened .header .nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }
    .header .nav li { border-top: 0; display: block; margin: 0; text-align: center; }
	.header .nav li a { border-bottom: 1px solid #06283f; color: #06283f; padding: 7px 5px 5px; }
	.header .nav li a.active { background: #22bcb9; }
	.header .nav li a.active:before { display: none; }
	.header li.dropdown:first-of-type ul { width: 100%; }
	.header .nav ul ul { position: static; border: 0; }
	.header li.dropdown ul li a { font-size: 1.1em; font-weight: 400; padding: 6px 0; }
	.header li.dropdown:last-of-type ul li:last-of-type { display: none; }
	#content { padding-top: 121px; }

	#second-screen > div { width: 96%; }
	#second-screen div p { font-size: 1em; padding: 0 44px; }
	#homepage #second-screen h3 { font-size: 2.6em; }

	#homepage h3 { font-size: 1.6em; }
	#subpage-header { height: 280px; }

	#careers > div > a { margin-top: 6px; }

	#awards .col-sm-3 > * { height: 180px; }

	#guiding-principles li { border-radius: 8px; height: auto !important; padding: 23px; width: 100% !important;  }
	#guiding-principles li div { width: 90%; }
	#guiding-principles li img { height: 50px; }
	
	.image-slideshow-slides > div.active { height: 260px; margin-top: 0; }
	.image-slideshow-slides > div.prev-one { height: 180px; }
	.image-slideshow-slides > div.next-one { height: 180px; }
	.image-slideshow-slides > div > div { bottom: 22px; padding: 0 54px; }
	.image-slideshow-slides > div > div span { font-size: 1.6em; }
	.image-slideshow-slides > div > div a { font-size: .8em; margin-top: 10%; padding: 2px 8px; }
	
	#awards .col-md-6 { margin-bottom: 28px; }
	#awards .col-md-6 a { height: 360px; }
	#awards .col-sm-3 { float: left; width: 50%; }

	#project-stats { padding: 140px 0 40px; }
	#content #project-stats > div { padding: 24px 6% 64px; }
	#project-stats p { margin-bottom: 28px; }
	#project-stats img { height: 100px; }
	#project-stats .col-sm-3 { margin-bottom: 18px;  width: 50%; }
	#project-stats .col-sm-3:nth-of-type(3) { clear: both; }

	#project-topics nav a { font-size: .9em; padding: 10px; }
	
	.footer nav a { font-size: .9em; }

	#topic-cards > div { margin-top: 20px; }
	#topic-cards > div h3 { font-size: 1.1em; height: 72px; }
	#topic-cards > div > a { font-size: 1em; }

	#secondary-resources { margin-top: 20px; }

	.tab-component .nav-tabs .nav-item .nav-link { font-size: .8em; }

    
    .regular-list {
        font-size: .85em;
    }

    .accordion .card.card-header h5 .btn {
        font-size: 1.125rem;
        padding: 22.5px 40px 22.5px 20px;
    } 
    .accordion .card.card-header h5 .btn:after {
        width: 24px;
        height: 24px;
        font-size: 22px;
        line-height: 26px;
        right: 10px;
    }
	


    .resource-card {
        font-size: .9em;
    }
    .resource-card img {
        height: 48px;
    }
    .resource-card h3 {
        margin-top: 18px;
        padding-top: 18px;
    }

   
    .header-list li h4 {
        padding-left: 22px;
    }
    .header-list li h4:before {
        height: 14px;
        width: 14px;
    }
    .tab-component .nav-tabs .nav-item .nav-link .tab-title {
        font-size: 1.1em; padding: 0 8px; 
    }
    .tab-component .tab-content {
        padding: 20px 30px;
    }

    .contact-square {
        font-size: .9em;
    }
    .contact-square .cimage {
        height: 80px;
        width: 80px;
    }
}

@media screen and (max-width: 768px) {
    #topic-cards .card.show {width: 46%; }
	.image-slideshow-slides { margin-top: 0; padding-top: 0; }
	.image-slideshow-slides > div.active { height: 220px; margin-left: 10%; margin-top: 0; width: 80%; }
	.image-slideshow-slides > div.prev-one,
	.image-slideshow-slides > div.next-one { display: none;  }
	.image-slideshow-slides > div > div { bottom: 22px; }
	.image-slideshow-slides > div > div span { font-size: 1.3em; }
	.image-slideshow-slides > div > div a { font-size: .8em; margin-top: 10%; padding: 2px 8px; }
	.slideshow-move { left: 0; }
	.slideshow-move.next { right: 0; }
	.slideshow-move img { width: 74px; }

	.fade-bg { display: none; }

	.va-agency-bar-container .va-agency-bar { position: relative; }
	.header { margin: 0; position: relative !important; }
	#content { padding-top: 0; }

	#footer-middle div { display: none; }
	#footer-middle p { display: block; margin: 0 auto; width: 92%; }

	#project-topics nav { display: block; }
	#project-topics nav a { display: inline-block; margin: 0 4px 6px 0; padding: 8px 12px; vertical-align: top; width: auto; }

	#topic-cards > div { box-shadow: 0 0 8px 0 #9999; font-size: .9em;}
	#topic-cards > div img { height: 80px; }
	
	#project-stats .col-sm-3 { margin: 0 auto 16px; max-width: 500px; width: 100%;  }
	#project-stats a { font-size: 1.1em; padding: 9px 14px; }

	#careers > div > h3 { display: block; }
	#careers > div > a { float: none; margin: 0 0 28px; }
	
    .resource-card {
        height: 168px;
		min-height: 0;
        font-size: .8em;
        padding: 10px 8px;
    }
    .resource-card img {
        height: 38px;
    }
    .resource-card h3 {
        font-size: 1.2em;
        line-height: 1.1em;
        margin-top: 10px;
        padding-top: 10px;
    }
    .resource-card p {
        line-height: 1.2em;
    }

    .contact-square .cimage {
        height: 62px;
        width: 62px;
    }
    .contact-square h3 {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 580px) {
    #topic-cards .card.show {
        width: 100%;
    }
	.header img { height: 28px; margin-left: 4px; margin-bottom: 8px; }
	.header .nav ul { top: 54px; }
    #mobile-menu { font-size: 1.2em; }

	.va-agency-bar-container .va-agency-bar .cardinal-logo img { display: none !important; }
	
	#header-top { margin-bottom: 10px; padding: 5px 8px; text-align: right; }
	#header-top p { display: none; }
	#header-top ul { float: none; }
	#subpage-header { height: 200px; }

	#temp-cards > a { height: 240px; width: 80%;  }

	#first-screen h2 { font-size: 2em; margin-top: 72px !important; width: 96%; }
	#first-screen h2 img { height: 44px; margin-bottom: 4px; }
	#first-screen h2 span { font-size: .4em; line-height: 1.3em; margin-top: 4px; padding: 0 36px; }
	#second-screen .btn { font-size: .9em; margin-top: 6px; padding: 2px 10px; }
	#second-screen:after { height: 56%; }
	#second-screen div p { font-size: .9em; margin-top: 8px; padding: 0 12px; }
	#homepage #second-screen h3 { font-size: 1.5em; margin: 0; padding: 0 14px; }
	#scroll-for-more img { height: 84px; }
	
	#awards .col-sm-3 { float: left; width: 100%; }
	#awards .col-sm-3 a { height: 200px; }
						
	.image-slideshow-slides > div.active { height: 160px; }
	.image-slideshow-slides > div > div span { font-size: 1.3em; line-height: 1em; }

	#subpage-header > div { margin-top: 36px; padding: 8px 18px;}
	#subpage-header > div img { height:70px; }

	.tab-component .nav-tabs { display: inline-block;  }
	.tab-component .nav-tabs .nav-item { display: inline-block; float: none; position: relative; }
	.tab-component .nav-tabs .nav-item .nav-link { display: inline-block; flex: auto; min-height: 0; width: auto; }
	.tab-component .nav-tabs .nav-item:after { left: 0; }

	.footer { margin-top: 0; }
	.footer nav { padding: 5px 0 3px; }
	.footer nav a { font-size: .85em; padding: 3px 0; width: 45%; }
	.footer nav a:nth-of-type(even) { width: 55%; }
	.footer nav a:nth-of-type(2):after { display: none; }
	#footer-bottom { padding: 6px; }
	#homepage .footer #footer-bottom div { font-size: .8em; width: 100%; }
}

@media (min-width: 992px) {
    #background-video-container .header-video {
        display: block;
    }
    #background-video-container .header-video-overlay {
        display: block;
    }
}