/* VCU CTI Master Style Sheet | V1.0 */

/* General Styles
================================= */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
:root {
	--cti-lightgray: #F0F0F0;
    --cti-mediumgray: #919191;
	--cti-darkgray: #555555;
	--cti-lightblue: #E7E9EA;
    --cti-darkblue: #1C2635;
	--cti-darkorange: #E56027;
	--cti-orange: #F89F1D;
	--cti-tan: #C5B9A7;
    --cti-lightestteal: #C5E4E4;
	--cti-lightteal: #9FD3D2;
	--cti-teal: #007A8F;
    --cti-lightestgray: #f7f7f7;
	--cti-link--color: var(--cti-teal);
    --cti-link--active--color: var(--cti-darkorange);
    --cti-font--sans-serif: Roboto, sans-serif;
    --cti-contain--max-width: 1400px;
}
:root,
*{font-family: var(--cti-font--sans-serif);}

body {
	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*color: var(--cti-darkgray);*/
    margin: 0;
    min-height: 100vh;
    padding: 0;
    overflow-x: hidden !important;
    /*font-family: var(--cti-font--sans-serif);*/
}
body {
	background: var(--cti-lightestgray);
}
body main#mainBody {
	background:  white;
}
body header,
body main#mainBody {
	max-width: var(--cti-contain--max-width);
	margin:  0 auto;
}
a {
    color: var(--cti-link--color);
    font-weight: 700;
}
a:active,a:focus,a:hover {
    color: var(--cti-link--active--color);
    text-decoration: underline;
}
img {
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
}
.h1,h1 {
    font-size: 2.055556rem;
    font-weight: 700;
    line-height: 1.1em;
    margin-bottom: 0.888889rem;
    padding-top: 0.777778rem;
    color: var(--cti-darkblue);
}
@media (min-width: 1024px) {
    .h1,h1 {
        font-size: 2.333333rem;
    }
}
.h2,h2 {
    font-size: 1.611111rem;
    font-weight: 700;
    line-height: 1.1em;
    margin-bottom: 0.666667rem;
    padding-top: 1rem;
    color: var(--cti-darkblue);
    text-transform: uppercase;
}
@media (min-width: 1024px) {
    .h2,h2 {
        font-size: 2rem;
    }
}
.h3,h3 {
    font-size: 1.477778rem;
    font-weight: 700;
    line-height: 1.1em;
    margin-bottom: 0.555556rem;
    padding-top: 0.888889rem;
    color: var(--cti-darkblue);
}
@media (min-width: 1024px) {
    .h3,h3 {
        font-size: 1.444444rem;
    }
}
.h4,h4 {
    font-size: 1.111111rem;
    font-weight: 500;
    line-height: 1.1em;
    margin-bottom: 0.722222rem;
    padding-top: 1.111111rem;
}
@media (min-width: 1024px) {
    .h4,h4 {
        font-size: 1.222222rem;
    }
}
.h5,h5 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1em;
    margin-bottom: 0.944444rem;
    padding-top: 0.888889rem;
}
.h5,.h6,h5,h6 {
    letter-spacing: 0.055556rem;
}
.h6,h6 {
    font-size: 0.888889rem;
    font-weight: 500;
    line-height: 1.5rem;
    margin-bottom: 0.888889rem;
    padding-top: 0.944444rem;
}
.cti-paragraph--lead > p:first-of-type,
p.cti-paragraph--lead {
    font-size: 1.25rem;
    padding-top: 1rem;
}
.cti-paragraph--drop-cap > p:first-of-type:first-letter,
p.cti-paragraph--drop-cap:first-letter {
    float: left;
    font-size: 3.6em;
    font-weight: 700;
    line-height: 0.65;
    margin: 0.2em 0.15em 0.15em 0;
}
ol.cti-list--inline,
ol.cti-list--unstyled,
ul.cti-list--inline,
ul.cti-list--unstyled {
    list-style: none;
    margin-left: 0;
    padding-left: 0 !important;
}
ol.cti-list--inline li,
ul.cti-list--inline li {
    display: inline-block;
}
dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
}
small {
    font-size: 0.5em;
}

blockquote {
    background: var(--cti-lightblue);
    padding:  40px;
}

/*blockquote {
    --cwf-blockquote--accent-color: var(--cwf-accent--background, var(--cwf-color--blue, #006894));
    --cwf-blockquote__marker--background-color: #ccc;
    --cwf-blockquote__marker--color: #444;
    border-bottom: 1px solid var(--cwf-blockquote--accent-color);
    border-top: 1px solid var(--cwf-blockquote--accent-color);
    font-size: 1.25rem;
    margin: 0 0 1rem;
}
blockquote:before {
    text-rendering: auto;
    align-items: center;
    background-color: var(--cwf-blockquote__marker--background-color);
    -webkit-clip-path: polygon(0 0, 64.5527045559% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 64.5527045559% 0, 100% 100%, 0 100%);
    color: var(--cwf-blockquote__marker--color);
    content: "/0x8d";
    display: inline-flex;
    font-family: Font Awesome\5 Free;
    font-size: 1rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    height: 2rem;
    line-height: 1;
    line-height: 0;
    margin-top: 1rem;
    padding-left: 0.5rem;
    width: 3rem;
}
blockquote footer,
blockquote p {
    margin: 1rem;
}
blockquote footer,
blockquote p:last-child:not(blockquote p:only-child) {
    font-size: 0.875rem;
}
blockquote footer:first-line,
blockquote p:last-child:not(blockquote p:only-child):first-line {
    color: var(--cwf-blockquote--accent-color);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}*/
p {
	color: var(--cti-darkgray);
}

.type-darkblue,
.type-darkblue p {
    color:  var(--cti-darkblue);
}


/* Buttons
================================= */

/* Primary Button */
.button,
a.button,
a.btn,
a.btn-primary {
	background: var(--cti-darkblue);
	color:  white;
	font-weight: 700;
	border-radius: 0;
	padding:  8px 15px;
	border:  0;
}
.btn-primary:hover {
    background: var(--cti-lightteal);
    color:  var(--cti-darkblue);
    text-decoration: underline;
}

.btn-primary:active,
.btn-primary:focus {
    background:  var(--cti-teal) !important;
    color:  white !important;
}
a.button:active,
a.button:focus,
a.button:hover {
	background:  var(--cti-lightteal);
	color:  var(--cti-darkblue);
	font-weight: 700;
	text-decoration: underline;
	border:  0;
}

/* Reverse Button */
a.button.reverse {
	background:  var(--cti-lightteal);
	color:  var(--cti-darkblue);
}
a.button.reverse:hover,
a.button.reverse:active,
a.button.reverse:focus {
	background:  var(--cti-darkblue);
	color:  var(--cti-lightteal);
}
a.button.reverse.hover-white:hover,
a.button.reverse.hover-white:active,
a.button.reverse.hover-white:focus {
    background:  white;
    color:  var(--cti-teal);
}


/* Back To Top Button
================================= */
.back-to-top-button.hide {
    display:  none;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in-out;
}
.back-to-top-button {
    position: fixed;
    bottom: 50px;
    right: 50px;
    display:  block;
    visibility: visible;
    opacity: 1;
    z-index: 9999 !important;
}
.back-to-top-button a.button {
    background: white;
    color: var(--navyblue);
    padding: 12px 18px 12px 22px;
    box-shadow: 0px 4px 10px 2px #00000024;
    border-radius: 50px;
    text-decoration: none;
    transition:  background .2s ease-in-out;
    border:  3px solid white;
}
.back-to-top-button a.button:after {
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    color: var(--cti-darkblue);
    /* width: 30px; */
    /* height: 10px; */
    /* display: inline-block; */
    /* background: url(/assets/img/icon-arrow-up.svg) center center no-repeat; */
    font-size: 25px;
    position: relative;
    margin-left: 10px;
    top: 4px;
}
.back-to-top-button a.button:hover {
    background:  var(--cti-darkblue);
    border:  3px solid white;
    color:  white;
}
.back-to-top-button a.button:hover:after {
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    color:  white;
}


/* Footer
================================= */
footer {
	background: var(--cti-darkblue);
	color: white;
	padding:  75px 0;
}
footer p {
	color: white;
}
footer a {
	color: white;
}
footer a:active,
footer a:focus,
footer a:hover {
    color: rgba(255,255,255,0.8);
    text-decoration: underline;
}

/* Social Button Group - In Footer */
.social-btn-group {
    display: flex;
    flex-direction: row;
}
i.fa-regular,
i.fa-reg {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
}
.social-btn-group a.social-icon {
    color: white;
    border: 2px solid white;
    background: var(--cti-darkblue);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin: 5px 6px;
    transition: .2s all ease-in-out;
}
.social-btn-group a.social-icon:hover {
    background: white;
    color: var(--cti-darkblue) !important;
    border: 2px solid var(--cti-darkblue);
}
.social-btn-group a.social-icon:first-child {
    margin-left: 0;
}


/* Footer VDOE logo */
footer img.vdoe-logo {
    max-width: 200px;
    margin-bottom: 25px;
    display: block;
}
footer .logo-credits {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: end;
}

/* Footer Menu */
footer .link-header {
    font-weight: bold;
    text-transform: uppercase;
    font-size:  1.1rem;
    margin-bottom:  10px;
    display: block;
}
footer ul.footer-menu {
    list-style: none;
    padding:  0;
    margin: 0;
}
footer ul.footer-menu a {
    margin-bottom:  10px;
    text-decoration: none;
    display: block;
}

/* Footer Address */
footer a.address {
    text-decoration: none;
    font-weight: 400;
}

/* Skip Links
================================= */
.skip-links {
    font-family: var(--cti-font--sans-serif, inherit);
    left: 0;
    list-style: none outside;
    margin-left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.skip-links__link {
    --cwf-link--color: var(--cti-orange);
    --cwf-link--active--color: var(--cti-orange);
    background-color: initial;
    height: auto;
    left: 15px;
    margin: 0 auto;
    outline: none;
    padding: 10px 15px;
    position: absolute;
    text-decoration: none;
    top: -100px;
    transition: top 0.1s ease-in-out, background-color 0.1s ease-in-out;
    z-index: 100002;
}
@media (prefers-reduced-motion: reduce) {
    .skip-links__link {
        transition: top 0s;
    }
}
:root[data-reduced-motion="true"] .skip-links__link {
    transition: top 0s;
}
@media (prefers-reduced-motion: no-preference) {
    .skip-links__link {
        transition: top 0.1s ease-in-out, background-color 0.1s ease-in-out;
    }
}
:root[data-reduced-motion="false"] .skip-links__link {
    transition: top 0.1s ease-in-out, background-color 0.1s ease-in-out;
}
.skip-links__link:active,
.skip-links__link:focus {
    background-color: black;
    top: 0;
}


/* Header
==================================================== */
header#cti-header a.cti-logo.homelink span.mobile-title {
    display: none;
    color:  var(--cti-darkgray);
    text-transform: uppercase;
}
@media (max-width: 991px) {
    header#cti-header a.cti-logo.homelink img {
        display:  none;
    }
    header#cti-header a.cti-logo.homelink span.mobile-title {
        display:  block;
        font-size: 0.85rem;
    }
    header#cti-header a {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:  .95rem;
    }
    header {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}


/* Navigation
==================================================== */
header {
	background: white;
	padding:  30px 50px;
}
.navbar-expand-lg .navbar-nav {
    display: flex;
    align-items: center;
}
.navbar.cti-nav li.nav-item a.nav-link {
    color: var(--cti-darkblue);
    text-transform: uppercase;
    text-decoration: none;
}
.navbar.cti-nav li.nav-item a.nav-link:hover {
    color: var(--cti-darkorange);
    text-decoration: none;
}
li.nav-item.primary-menu {
    margin: 0 5px;
}
/* Social Buttons */
li.nav-item.social-btns {
    width: fit-content;
    display: flex;
    align-items: center;
    padding: 0 !important;
    flex-direction: row;
    flex-wrap: nowrap;
}
#cti-header li.social-btns a:hover {
    color: var(--cti-darkorange);
}
#cti-header li.social-btns a {
    height: 44px;
    position: relative;
}
#cti-header li.social-btns a:after {
    content: " ";
    display: block;
    height: 2px;
    background: var(--cti-darkorange);
    transition: .2s all ease-in-out;
    opacity: 0;
    width: 0;
}
#cti-header li.social-btns a:hover:after {
    opacity: 1;
    width: 100%;
    
}
/* Search Button */
span.search-btn {
    background: var(--cti-lightgray);
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin: 0 10px 0 !important;
    position: relative;
}

/* WIP - Makes Dropdowns work on hover - Needs accessibilty added */
/*@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu { display: none; }
  .navbar .nav-item:hover .nav-link{   }
  .navbar .nav-item:hover .dropdown-menu{ display: block; }
  .navbar .nav-item .dropdown-menu{ margin-top:0; }
}*/

.navbar .nav-item .dropdown-menu {
    text-transform: uppercase;
}
.navbar .nav-item ul.dropdown-menu {
    padding:  0;
    border-radius: 0;
    background:  transparent !important;
    padding-top: 42px;
    border:  0px;
}
.navbar .nav-item .dropdown-menu li {
    padding:  0px;
    border:  1px solid var(--cti-lightgray);
    background:  white;
    border-bottom: 0;
}
.navbar .nav-item .dropdown-menu li:last-child {
    border-bottom:  1px solid var(--cti-lightgray);
}
.navbar .nav-item .dropdown-menu li a {
    padding:  12px 25px;
    font-weight: bold;
}

.navbar.cti-nav li.primary-menu a.nav-link {
    postion: relative;
}

.navbar.cti-nav li.primary-menu a.nav-link:after {
    content: " ";
    display: block;
    width: 100%;
    height: 2px;
    background: var(--cti-darkorange);
    transition: .2s all ease-in-out;
    opacity: 0;
    width: 0;
}

.navbar.cti-nav li.primary-menu a.nav-link:hover:after,
.navbar.cti-nav li.primary-menu a.nav-link:active:after,
.navbar.cti-nav li.primary-menu a.nav-link:focus:after,
.navbar.cti-nav li.primary-menu:hover a.nav-link:after,
.navbar.cti-nav li.primary-menu:hover a.nav-link,
.navbar.cti-nav li.primary-menu.active a.nav-link:after {
    opacity: 1;
    width: 100%;
    color:  var(--cti-darkorange) !important;
    text-decoration: none !important;
}

.dropdown-item.active, 
.dropdown-item:active {
    background: var(--cti-teal);
}




/* Search Modal */
div#site-search {
    background: var(--cti-orange);
}
#site-search .modal-content {
    background: transparent;
    border: 0;
}
#site-search .modal-content form#search {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
#site-search .modal-content form#search input[type=text] {
    width: 75%;
    padding: 15px;
    border: 0;
    border-radius: 0;
}
#site-search .modal-content form#search input[type=submit] {
    background: black;
    border: 0;
    color: white;
    width: 25%;
}
#site-search button.btn-close {
    float: right;
    margin-bottom: 25px;
    color: black;
    opacity: 1;
}

/* Mobile Menu  */
@media (max-width: 991px) {
    header#cti-header {
        position: relative;
    }
    nav#cti-nav--main.navbar {
        position: unset;
    }
    div#main_nav.navbar-collapse {
        position: absolute;
        left: 0;
        width: 100%;
        background: white; 
        z-index: 9;
        top: 115px;
        background: var(--cti-lightgray);
        text-align: left;
        padding: 25px 25px 50px;
    }   
    div#main_nav.navbar-collapse ul li {
        width: 80%;
        text-align: left;
        border-bottom: 1px solid var(--cti-darkgray);
        padding: 10px;
    }
    div#main_nav.navbar-collapse ul li a {
        align-items: flex-start;
        justify-content: left;
    }
    .hide-on-mobile {
        display: none !important;
    }
    .navbar.cti-nav li.dropdown a {
        justify-content: space-between !important;
        display: flex !important;
        align-items: center;
        width: 100%;
    }
    .navbar.cti-nav li.dropdown a.nav-link:after {
        content: "\f0da" !important;
        font-family: "Font Awesome 5 Free";
        opacity: 1 !important;
        width: fit-content !important;
        background: transparent !important;
        height: fit-content !important;
    }
    .navbar.cti-nav li.dropdown a.nav-link.show:after {
        content: "\f0d7" !important;
        font-family: "Font Awesome 5 Free";
        opacity: 1 !important;
        width: fit-content !important;
        background: transparent !important;
        height: fit-content !important;
    }
    ul.dropdown-menu.show {
        padding-top: 0 !important;
        width: 100% !important;
    }

    ul.navbar-nav a.nav-link.show {
        color: var(--cti-darkorange) !important;
        border-bottom: 2px solid;
        width: 100% !important;
    }

    ul.dropdown-menu.show li {
        background: transparent !important;
        border: 0 !important;
        width: 100% !important;
        padding: 0px !important;
    }
    .navbar .nav-item ul.dropdown-menu {
        background: white !important;
        width: 100% !important;
        padding: 0px !important;
    }
    .navbar ul.navbar-nav li {
        padding: 0 !important;
    }
    .navbar ul.navbar-nav li a {
        padding: 15px 
    }
    ul.dropdown-menu.show a:hover {
        background: transparent !important;
    }
}

/* Sidebar Navigation
==================================================== */
#sticky-sidebar a {
    color:  var(--cti-darkgray);
}
.sticky-top {
    top:  5px;
}
/*.sticky-top {
    overflow-y: scroll;
    max-height: 100vh;
}*/

div#sticky-sidebar li {
    margin-bottom:  10px;
}

div#sticky-sidebar a:hover,
div#sticky-sidebar a.active {
    background: var(--cti-lightgray);
    border-radius: 8px;
}

@media (max-width:  991px) {
    #sticky-sidebar {
        display: none;
    }
}

/* Next Columns
==================================================== */
.nested-col {
    max-width: 45%;
}
@media (max-width:  991px) {
    .nested-col {
        max-width: 100%;
    }
}



/* Section Controls
==================================================== */
.wrapPad {
    padding-top: 100px;
    padding-bottom: 100px;
}
.wrapPad-50-top {
    padding-top: 50px;
}
.wrapPad-25-top {
    padding-top: 25px;
}
.wrapPad-50-bottom {
    padding-bottom: 50px;
}
.wrapPad-25-bottom {
    padding-bottom: 25px;
}
.container-fluid.teal-bkgd,
.container.teal-bkgd {
    background:  var(--cti-teal);
}
.container-fluid.lightteal-bkgd,
.container.lightteal-bkgd {
    background:  var(--cti-lightestteal);
}
.container-fluid.lightgray-bkgd,
.container.lightgray-bkgd {
    background:  var(--cti-lightgray);
}
.container-fluid.darkorange-bkgd,
.container.darkorange-bkgd {
    background:  var(--cti-darkorange);
    color:  white;
}
.container-fluid.darkorange-bkgd h1,
.container.darkorange-bkgd h1 {
    color:  white;
}

@media (max-width: 991px) {
    .container,
    .container-fluid .row {
        max-width: 85%;
        margin: 0 auto;
    }
}



/* Interior Template
==================================================== */
.page-header {
    padding:  75px 50px;
}

.page-header h1 {
    text-transform: capitalize !important;
    font-size:  3rem !important;
}

.page-template-default #body-content-wrapper {
    padding:  50px 0px;
}


/* Courses Page Template
==================================================== */
.course-details {
    box-shadow: 0 0 15px 0px #00000026;
}
.course-details .list-group {
    padding: 30px;
    border: 0 !important;
    border-radius: 0;
}
.course-details .list-group li {
    border: 0;
}
.course-details .list-group li i {
    margin-right: 15px;
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--cti-mediumgray);
    width: 40px;
    height: 35px;
    text-align: center;
    display: inline-block; 
    margin: 0; 
    margin-right: 15px;   
}
.course-cta-buttons {
    padding: 30px;
    border-top: 1px solid var(--cti-mediumgray);
}

.course-cta-buttons a.button {
    width: 100%;
    color: white !Important;
    margin-bottom: 25px;
    text-transform: uppercase
}
.course-cta-buttons a.button:hover {
    color:  var(--cti-darkblue) !important;
    background:  var(--cti-lightteal) !important;
}

.course-details-wrapper.simple .course-img {
    position: relative;
}

.course-details-wrapper.simple .course-img .img-flag {
    background: var(--cti-lightteal);
    color: var(--cti-darkblue);
    font-weight: bold;
    text-transform: uppercase;
    padding:  10px 15px;
    position: absolute;
    bottom:  0;
    left:  0;
}


/* Home Page
==================================================== */
div#homepage-hero {
	background:  var(--cti-darkblue);
	padding:  150px 100px;
	border-top:  1px solid var(--cti-darkgray);
	color:  white;
}
div#homepage-hero h1 {
    font-size:  3.5rem;
}

@media (max-width:  767px) {
    div#homepage-hero h1 {
        font-size:  3rem;
    }
}

div#homepage-hero h1,
div#homepage-hero p {
	color:  white;
}
#homepage-hero {
    position: relative;
}
#homepage-hero .row.hero-content {
    z-index: 2;
    position: relative;
}
#homepage-hero .hero-img-overlay {
    background: rgb(28,38,53);
    background: linear-gradient(90deg, rgba(28,38,53,0.9136029411764706) 39%, rgba(28,38,53,0) 100%);
    position: absolute; 
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
#homepage-hero img.hero-img.full-width.contain {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    z-index: 0;
}
@media (max-width:  991px) {
    div#homepage-hero {
        padding: 45px 20px
    }
    /*div#homepage-hero h1 {
        font-size: 1.5rem;
    }

    div#homepage-hero h1,
    div#homepage-hero p {
        max-width: 50%;
    }
    #homepage-hero .row.hero-content {
        max-width: 100%;
    }*/
}


/* Home - Topics for Transition Planning - Icon Buttons
==================================================== */
#transition-planning .icon-btn-group {
    margin-top:  25px;
}


/* Enewsletter Sign Up - CTA
==================================================== */
#newsletter-signup h2 {
    text-transform: capitalize;
}
#newsletter-signup h2 span.uppercase {
    text-transform: uppercase;
}
#newsletter-signup form {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
#newsletter-signup form input[type=email] {
    width: 75%;
    padding: 10px;
    border-radius: 0px !important;
    border: 1px solid gray;
}
#newsletter-signup form input[type=submit] {
    background: var(--cti-darkblue);
    color: white;
    border: 0;
    padding: 10px ;
    width: 25%
}
.enews-bkgd {
    background: rgb(240,240,240);
    background: linear-gradient(0deg, rgba(240,240,240,1) 83%, rgba(240,240,240,0) 99%);
}


@media (max-width: 767px) {
    #newsletter-signup form input[type=email] {
        width: 100%;
        display: block;
    }
    #newsletter-signup form {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    } 
    
    #newsletter-signup form input[type=submit] {
         width: 100% !important;
         display: block;
         margin-top: 15px;
     }   
}


/* ====================================================
   :::::::::::::::::::: Widgets ::::::::::::::::::::
==================================================== */


/* Callout Number Group
===================================== */
.callout-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 25px 0;
}
.callout-group span.callout-title {
    font-weight: bold;
}
.callout-group .callout-number {
    font-weight: 700;
    font-size: 3rem;
}


/* Icon Group
===================================== */
.icon-btn-group {
    margin: 40px 0;
}
.icon-btn-group .planning-icon-btns {
    display:  flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    /*margin-top:  15px;*/
}
@media (max-width:  767px) {
    .icon-btn-group a.planning-icon-btns {
        margin-bottom: 30px;
    }
}
.icon-btn-group a.planning-icon-btns {
    color:  var(--cti-darkblue);
    text-decoration: none;
    transition:  all .2s ease-in-out;
}
.icon-btn-group a.planning-icon-btns:hover {
    transform:  scale(1.1);
}
.icon-btn-group a.planning-icon-btns:focus {
    border:  .5px dotted var(--cti-lightgray);
}
.icon-btn-group .planning-icon-btns .icon-title {
    font-weight: bold;
    margin-top:  15px;
}


/* Publication Group
===================================== */
.publication-group {
    margin: 40px 0;
}
.publication-group .publication-link {
    display:  flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
.publication-group a.publication-link {
    color:  var(--cti-darkblue);
    text-decoration: none;
    transition:  all .2s ease-in-out;
}
.publication-group a.publication-link:hover {
    /*transform:  scale(1.1);*/
    color:  var(--cti-teal);
    text-decoration: underline;
}
.publication-group .publication-link .icon-title {
    font-weight: bold;
    margin-top:  15px;
}
.plublication-card {
    transition: .2s all ease-in-out;
}
.plublication-card:hover {
    transform: scale(1.03);
}

/* Publications Slider
===================================== */
.publications-slider {
    max-width: 1000px;
    margin-bottom:  40px;
}
/* the slides */
.publications-slider .slick-slide {
    margin: 0 20px;
}
/* the parent */
.publications-slider .slick-list {
    margin: 0 -20px;
}
.publications-slider .plublication-card {
    text-align: center;
}
.publications-slider {
    position: relative; 
}
.publications-slider .slick-arrow {
    position: absolute;
    top: 40%;
    z-index: 10;
    background:  transparent;
    border:  0;
    font-size:  3rem;
    color:  var(--cti-darkgray);
}
.publications-slider .slick-arrow.slick-prev {
    left: -50px !important;
    right: auto;
}
.publications-slider .slick-arrow.slick-next {
    left: auto;
    right: -50px !important;
}
@media (max-width: 800px) {
    .publication-group {
        max-width: 100vw;
        min-width: 100vw;
        width: 100vw;
        padding:  0;
    }
    #latest-publications {
        padding:  50px 0 !important;
        margin:  0 !important;
        max-width: 100vw;
        min-width: 100vw;
        width: 100vw;
    }
    #latest-publications h2 {
        max-width: 80%;
        margin:  0 auto;
    }
    .publications-slider {
        min-width:  100vw;
        padding:  0;
        margin:  0;
    }
    /* the slides */
    .publications-slider .slick-slide {
        margin: initial;
    }
    /* the parent */
    .publications-slider .slick-list {
        margin: initial;
        width:  100vw;
        padding:  0;
    }
}

/* Innovation Slider
===================================== */
.innovation-slider {
    max-width: 1000px;
    margin-bottom:  40px;
}
.innovation-slider .project-card {
    max-width: 400px;
}
/* the slides */
.innovation-slider .slick-slide {
    margin: 0 20px;
}
/* the parent */
.innovation-slider .slick-list {
    margin: 0 -20px;
}



/* Testimonial
===================================== */
.testimonial-card {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
}
.testimonial-card .testimonial-credits {
    display:  flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 15px;
}
.testimonial-card .testimonial-img {
    width: 60px;
    height: 60px;
    background: white;
    border: 1px solid var(--cti-darkgray);
    border-radius: 50%;
    margin-right: 20px;
}
.testimonial-card .testimonial-content {
    font-size:  1.25rem;
}


/* Project Card
===================================== */
.project-card {
    margin: 40px 0;
    transition: all .2s ease-in-out;
}
.project-card a {
    text-decoration: none;
}
.project-card:hover {
    transform:  scale(1.03);
}


/* Webcast Element
===================================== */
#webcast-element .profile-img img {
    width: 140px;
    height: 140px;
    max-width: 140px;
    max-height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid var(--cti-lightteal) !important;
    margin-right:  20px;
}

/* Team Member
===================================== */
.card.team-member {
    border:  0;
    transition:  .2s all ease-in-out;
}
.card.team-member .card-body {
    padding:  0;
}
.card.team-member:hover {
    transform: scale(1.03);
}

/* Accordion
===================================== */
.accordion {
    border:  1px solid var(--cti-lightgray);
}
.accordion .accordion-item h2 {
    padding-top: 0 !important;
}
.accordion-button:not(.collapsed) {
    background: var(--cti-lightestteal);
    color:  var(--cti-darkblue);
}
.accordion-button.collapsed {
  background: var(--cti-lightestgray)
}
.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(
-180deg
);
}


/* Video Gallery
===================================== */

/* Main Container */
.vid-container {
    position: relative;
    padding-bottom: 52%;
    padding-top: 30px; 
    height: 0; 
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Playlist */
.vid-list-container {
    width: 92%;
    overflow: hidden;
    margin-top: 20px;
    margin-left:4%;
    padding-bottom: 20px;
}
.vid-list {
    width: 1344px;
    position: relative;
    top:0;
    left: 0;
}
.vid-item {
    display: block;
    width: 148px;
    height: 148px;
    float: left;
    margin: 0;
    padding: 10px;
}
.thumb {
    overflow:hidden;
    height: 84px;
}
.thumb img {
    width: 100%;
    position: relative;
    top: -13px;
}
.vid-item .desc {
    color: #21A1D2;
    font-size: 15px;
    margin-top:5px;
}


/* Nav Links */
.arrows.video-player {
    position:relative;
    width: 100%;
}

.arrows.video-player .arrow-left {
    color: #fff;
    position: absolute;
    background: #777;
    padding: 15px;
    left: -25px;
    top: -130px;
    z-index: 99;
    cursor: pointer;
}

.arrows.video-player .arrow-right {
    color: #fff;
    position: absolute;
    background: #777;
    padding: 15px;
    right: -25px;
    top: -130px;
    z-index:100;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 624px) {
    .arrows.video-player {
        position:relative;
        margin: 0 auto;
        width:96px;
    }
    .arrows.video-player .arrow-left {
        left: 0;
        top: -20px;
    }

    .arrows.video-player .arrow-right {
        right: 0;
        top: -20px;
    }
}


/* Style Guide
===================================== */
.style-guide section.divider {
    padding-bottom:  50px;
    border-bottom:  1px solid var(--cti-darkgray);
    margin-bottom:  50px;
}

.style-guide code {
    background:  var(--cti-lightgray);
    border:  1px solid var(--cti-darkgray);
    padding:  5px 10px;
    border-radius:  8px;
    margin:  10px 0;
    display:  block;
    max-width:  90%;
}

.swatch-wrap {
    margin-bottom:  25px;
    min-width:  24%;
    width:  24%;
}

@media (max-width:  800px) {
    .swatch-wrap {
        width:  33%;
    }
}

.swatch {
    height:  100px;
    width:  90%;
    display:  block;
}
.swatch.lightgray {background: var(--cti-lightgray);}
.swatch.mediumgray {background: var(--cti-mediumgray);}
.swatch.darkgray {background: var(--cti-darkgray);}
.swatch.lightblue {background: var(--cti-lightblue);}
.swatch.darkblue {background: var(--cti-darkblue);}
.swatch.darkorange {background: var(--cti-darkorange);}
.swatch.orange {background: var(--cti-orange);}
.swatch.tan {background: var(--cti-tan);}
.swatch.lightestteal {background: var(--cti-lightestteal);}
.swatch.lightteal {background: var(--cti-lightteal);}
.swatch.teal {background: var(--cti-teal);}
.swatch.lightestgray {background: var(--cti-lightestgray);}