/*
    Theme Name: i4beyond
    Description: Theme for the I-4 Beyond the Ultimate Website
    Author: Global-5 Inc.
    Version: 0.1
*/

*,
*:before,
*:after {
  box-sizing: border-box;
  font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
}

body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
img {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.2em;
}

html {
  display: block;
  height: 100% !important;
  text-rendering: optimizeLegibility;
  margin-top: 0 !important;
}
html.fullscreen {
  overflow: hidden;
}

a img {
  border: none;
}

body {
  background: #238090 !important;
  font-family: "Gotham Light";
  font-size: 16px;
  color: #000000;
  position: relative;
  height: auto !important;
}

/* FDOT top nav skinny */
#fdotnav {
  background: url(/wp-content/themes/i4beyond/images/topNav.png) top center;
  width: 938px;
  height: 31px;
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 102;
}
#fdotnav ul {
  float: right;
  display: block;
  width: 800px;
  height: 24px;
  list-style: none;
  font-family: "Abel", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}
#fdotnav ul li {
  float: left;
  line-height: 1;
  margin-right: 1.8em;
  padding: 0.5em;
  transition: background-color 0.3s;
}
#fdotnav ul li:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
#fdotnav ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
}

/* main container */
#main {
  width: 960px;
  display: block;
  margin: 0 auto !important;
  background-color: #ededed;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
body:not(.home):not(.mobile) .content-main {
  margin-bottom: 28px; /* used for the fdot footer */
}

/* FDOT's header */
#fdot-banner * {
  box-sizing: border-box;
}
#fdot-banner #nav .nav-item-red {
  background-color: #d72e2a !important;
}
#fdot-banner #nav .nav-item-red:hover a {
  color: #d72e2a !important;
}
#fdot-banner {
  font-family: Arial, Helvetica, sans-serif !important;
  display: block;
  overflow: hidden;
  background-color: #ffffff;
  display: none;
  z-index: 103;
  position: relative;
}

/* jumbo banner */
#banner {
  float: left;
  width: 100%;
  position: relative;
  padding: 0 0 5px;
  min-height: 292px;
}
#BTUlogo {
  position: absolute;
  left: 2em;
  bottom: 0.5em;
  z-index: 10;
  transition: 0.3s;
}
#BTUlogo img {
  width: 320px;
}
#BTUlogo:hover {
  -webkit-filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.6));
  filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.6));
}
#banner > img {
  float: left;
}
#banner .cycloneslider {
  z-index: 1;
  margin: 0;
}
#connect-container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  font-family: "Archer Bold";
  float: right;
  display: block;
  width: auto;
  /* overflow: hidden; */
}
#connect-container .round-icon {
  background-color: #1f1f1f;
  width: 30px;
  height: 30px;
  display: block;
  line-height: 30px;
  font-size: 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 30px;
  float: left;
  margin-left: 5px;
  color: #ffffff !important;
}
#connect-container .round-icon > i {
  color: #ffffff !important;
}
#connect-container .col {
  padding: 0 15px;
}
#connect-container .col:first-of-type {
  padding-left: 0;
}
#connect-container .col:last-of-type {
  padding-right: 0;
}
#connect-container .col:not(:last-of-type) {
  border-right: 2px solid #1f1f1f;
}

#connect-container .quick-links a {
  color: #1f1f1f;
  text-decoration: none;
}
#connect-container .quick-links a:hover {
  text-decoration: underline;
}

#floating-search {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  display: none;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
#floating-search .search-field {
  position: absolute;
  width: calc(100% - 2em);
  left: 1em;
  right: 1em;
  top: 1em;
  bottom: 1em;
  /* padding: 1em; */
  outline: none;
}

#mainnav {
  padding: 0 2.5px 5px;
  display: block;
  float: left;
  font-family: "Archer Bold", "Gotham", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  overflow: hidden;
  width: 100%;
}

#mainnav > ul {
  list-style: none;
  display: block;
}

#mainnav > ul > li {
  display: block;
  width: 154px;
  width: calc(100% / 6 - 5.2px);
  float: left;
  background-color: #999;
  padding: 0.25em;
  text-align: center;
  position: relative;
  height: 100px;
  margin: 0 2.5px;
}

/* #mainnav > ul > li.menu-project-designs   { background-color: #f79322; } */
/* #mainnav > ul > li.menu-construction-info { background-color: #fff45f;} */

#mainnav > ul > li.menu-project-info {
  background-color: #db393f;
}
#mainnav > ul > li.menu-construction-info {
  background-color: #f79322;
}
#mainnav > ul > li.menu-project-designs {
  background-color: #fff45f;
}
#mainnav > ul > li.menu-drive-safely {
  background-color: #b0c730;
}
#mainnav > ul > li.menu-resources {
  background-color: #238090;
}
#mainnav > ul > li.menu-public-outreach {
  background-color: #7f7f7f;
}

/* sub menu */
#mainnav-sub > ul {
  list-style: none;
}
#mainnav-sub > ul > li > a {
  display: none;
}
#mainnav-sub > ul > li > .sub-menu {
  display: block;
  width: calc(100% - 10px);
  float: left;
  margin: 0 5px 5px;
  display: none;
  list-style: none;
}
#mainnav-sub > ul > li.current-menu-item > .sub-menu,
#mainnav-sub > ul > li.current-page-ancestor > .sub-menu,
#mainnav-sub > ul > li.current-page-parent > .sub-menu {
  display: block;
}

/* #mainnav-sub > ul > li.menu-project-designs   > .sub-menu{ background-color: #f79322; }
#mainnav-sub > ul > li.menu-construction-info > .sub-menu{ background-color: #fff45f;} */

#mainnav-sub > ul > li.menu-project-info > .sub-menu {
  background-color: #db393f;
}
#mainnav-sub > ul > li.menu-construction-info > .sub-menu {
  background-color: #f79322;
}
#mainnav-sub > ul > li.menu-project-designs > .sub-menu {
  background-color: #fff45f;
}
#mainnav-sub > ul > li.menu-drive-safely > .sub-menu {
  background-color: #b0c730;
}
#mainnav-sub > ul > li.menu-resources > .sub-menu {
  background-color: #238090;
}
#mainnav-sub > ul > li.menu-public-outreach > .sub-menu {
  background-color: #7f7f7f;
}

#mainnav-sub > ul > li > .sub-menu > li {
  float: left;
}
#mainnav-sub > ul > li > .sub-menu > li > a {
  padding: 0.5em 0.825em;
  color: #ffffff;
  display: block;
  font-family: "Archer Bold";
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
}

#mainnav-sub > ul > li > .sub-menu,/* > li.current-page-ancestor > a,*/
#mainnav-sub > ul > li > .sub-menu > li.current-menu-item > a,
#mainnav-sub > ul > li > .sub-menu > li > a:hover {
  text-decoration: underline;
}
/* li.current-page-ancestor > a, => removed inorder to ONLY underline the current page nav link without underlining both the parent and child nav links* (Daryl)/
/* ******** */

#mainnav > ul > li:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 28px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
  transition: 0.3s;
}

#mainnav > ul > li.menu-project-info:after {
  background-image: url("/wp-content/themes/i4beyond/images/icons/project-info.png");
}
#mainnav > ul > li.menu-project-designs:after {
  background-image: url("/wp-content/themes/i4beyond/images/icons/project-designs.png");
}
#mainnav > ul > li.menu-construction-info:after {
  background-image: url("/wp-content/themes/i4beyond/images/icons/construction-info.png");
}
#mainnav > ul > li.menu-drive-safely:after {
  background-image: url("/wp-content/themes/i4beyond/images/icons/drive-safely.png");
}
#mainnav > ul > li.menu-resources:after {
  background-image: url("/wp-content/themes/i4beyond/images/icons/resources.png");
}
#mainnav > ul > li.menu-public-outreach:after {
  background-image: url("/wp-content/themes/i4beyond/images/icons/outreach.png");
}

#mainnav > ul > li > a {
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.25em;
  padding-top: 68px;
  color: #ffffff;
  line-height: 14px;
  font-size: 16px;
  transition: 0.3s;
  z-index: 1;
}
#mainnav > ul > li.menu-project-designs > a {
  color: #7f7f7f;
}

#mainnav-sub > ul > li.menu-project-designs > .sub-menu > li > a {
  color: #7f7f7f;
}

#mainnav > ul > li.current_page_parent > a,
#mainnav > ul > li.current_page_item > a,
#mainnav > ul > li > a:hover {
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}

#mainnav > ul > li.current_page_parent:after,
#mainnav > ul > li.current_page_item:after,
#mainnav > ul > li:hover:after {
  -webkit-filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

#mainnav > ul > li.menu-project-designs.current_page_parent > a,
#mainnav > ul > li.menu-project-designs.current_page_item > a,
#mainnav > ul > li.menu-project-designs > a:hover {
  text-shadow: 0 0 3px rgba(127, 127, 127, 0.6);
}

#mainnav > ul > li.menu-project-designs.current_page_parent:after,
#mainnav > ul > li.menu-project-designs.current_page_item:after,
#mainnav > ul > li.menu-project-designs:hover:after {
  -webkit-filter: drop-shadow(0 0 3px rgba(127, 127, 127, 0.6));
  filter: drop-shadow(0 0 3px rgba(127, 127, 127, 0.6));
}

/* Front page sub */
.sub-info-container {
  padding: 0 5px 5px;
  display: block;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 60px;
}
.sub-info-container .upcoming-info {
  display: block;
  float: left;
  padding: 4px;
  width: calc(100% / 6 * 4 - 2px);
  margin-right: 5px;
  height: 100%;
}
.sub-info-container .upcoming-info .info-spinner {
  width: calc(100% / 4 * 3 + 4px);
  margin: 0;
  background-color: #ffffff;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.44);
  display: block;
  height: 100%;
  float: left;
  overflow: hidden;
  color: #494949;
}
.sub-info-container .upcoming-info .info-spinner > span {
  background-color: #fff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  height: 100%;
  position: relative;
  font-weight: bold;
  line-height: 1.1em;
  display: block;
}
.sub-info-container .upcoming-info .info-spinner > span > span {
  position: absolute;
  left: 1em;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}
.sub-info-container .upcoming-info .info-spinner > span a {
  color: inherit;
  font-weight: bolder;
}
.sub-info-container .upcoming-info .message {
  text-transform: uppercase;
  color: #ffffff;
  width: calc(100% / 4 - 4px);
  margin: 0;
  float: left;
}
.sub-info-container .upcoming-info .message .loud {
  font-family: "Gotham Cond Bold";
  font-size: 22px;
  padding-left: 4px;
}
.sub-info-container .upcoming-info .message .soft {
  font-family: "Archer Bold";
  font-size: 16px;
  padding-left: 4px;
}
.sub-info-container .upcoming-info .message .soft a {
  color: white;
  text-decoration: none;
}
.sub-info-container .search-container {
  display: block;
  float: left;
  padding: 15px;
  width: calc(100% / 6 * 2 - 3px);
  height: 100%;
}
.sub-info-container .search-container .search-box {
  display: block;
  background-color: #ffffff;
  height: 100%;
  width: 100;
  overflow: hidden;
  position: relative;
  line-height: 1em;
  font-size: 15px;
}
.sub-info-container .search-container .search-box i.fa-search {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  padding: 5px;
  color: #aaaaaa;
}
.sub-info-container .search-container .search-box input {
  border: none;
  float: left;
  width: 100%;
  font-family: "Archer Bold";
  padding: 5px 15px;
}
.sub-info-container .search-container .search-box input::placeholder {
  color: #aaaaaa;
}

.search-form {
  text-align: right;
  margin-bottom: 1em;
}
.search-submit,
.search-field {
  border: 1px solid #7f7f7f;
  padding: 0.5em;
  font-size: 15px;
  font-family: "Gotham Light";
}
.search-field {
  width: calc(100% - 90px);
  float: left;
}
.search-submit {
  background-color: #7e7e7e;
  color: #ffffff;
}
.search-excerpt {
  position: relative;
  white-space: nowrap;
}
.search-excerpt:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 10%;
  top: 10%;
  opacity: 0.25;
  background-color: #fff45f;
  z-index: -1;
}

.search-result-item {
  /* margin-top: .75em; */
  overflow: hidden;
  display: block;
  width: 100%;
  float: left;
  padding: 1.5em 0em;
}
.search-result-item:hover {
  transition: 0.3s;
  /* background-color: #f5f5f5; */
}
.search-result-item:not(:last-of-type) {
  /* margin-bottom: 1.5em; */
  border-bottom: 25px solid #fbfbfb;
}
.search-result-item h3 {
  font-size: 18px;
  line-height: 1.1em;
  margin-bottom: 0.5em;
}
.search-result-item img {
  float: right;
  margin: 0 0 1em 1em;
  padding: 0.5em;
  border: 1px solid #ddd;
  transition: 0.3s;
}
.search-result-item img:hover {
  border-color: #287f8f;
}

.search-result-event-past-badge {
  background-color: #db393f;
  color: #fff;
  font-size: 11px;
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
}

/* main content section */
.content-container {
  padding: 0 5px 5px;
  display: block;
  float: left;
  overflow: hidden;
  width: 100%;
  margin: 0;
}
.content-container .content-main {
  float: left;
  display: block;
  width: 675px;
  background-color: #ffffff;
  position: relative;
}
.content-container .content-main:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.44);
  pointer-events: none;
}
.content-container.full-width .content-main {
  width: 100%;
  overflow: hidden;
  display: block;
}
.content-container .content-main .content-title {
  font-size: 24px;
  font-family: "Gotham Cond Bold";
  padding: 30px 30px 0;
  display: block;
  float: left;
  width: 100%;
  position: relative;
  z-index: 2;
}
.content-container .content-main .content-title a {
  color: #287f8f;
  text-decoration: none;
}
.content-container .content-main .content-title a:hover {
  text-decoration: underline;
}
.content-container .content-main .content-body {
  padding: 30px;
  float: left;
  width: 100%;
  position: relative;
  z-index: 3;
  line-height: 1.5em;
}
.content-container .content-main .content-body.map-26{
  padding: 0;
}
.content-container .cb-warning {
  color: #db393f;
  font-weight: bold;
}
hr {
  border: 0;
  height: 1px;
  width: 100%;
  clear: both;
  margin: 1.5em 0 calc(1.5em - 1px);
  background-color: #ddd;
}
p:empty {
  display: none;
}
strong {
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
}
p:not(:last-of-type) {
  margin-bottom: 1em;
}
.content-container .content-main .content-body a {
  color: #238090;
  text-decoration: none;
}
.content-container .content-main .content-body a:hover {
  text-decoration: underline;
}

.content-container .content-main .content-body ul {
  margin: 1em;
}
.content-container .content-main .content-body ul li {
  margin-left: 2em;
}
.content-container .content-main .content-body ul li:not(:last-of-type) {
  margin-bottom: 0.5em;
}
.content-container .content-main .content-body img {
  max-width: 100%;
  max-height: 100%;
}

.content-container .content-main .content-banner {
  position: relative;
  height: 270px;
  width: 100%;
  display: block;
  float: left;
  overflow: hidden;
  z-index: 0;
  border-bottom: 1px solid #aaa;
}
.content-container .content-main .content-banner:empty {
  display: none;
}
.content-container .content-main .content-banner.full-image {
  height: auto;
}
.content-container .content-main .content-banner .featured-image-cut-line {
  padding: 0.5em 1em;
  display: block;
  float: left;
  width: 100%;
  background-color: #aaa;
  color: #ffffff;
  font-size: 0.9em;
}

/* content articles front page */
.content-container .content-main .content-banner .content-article {
  display: inline-block;
  float: left;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 2;
  transition: 0.3s;
  opacity: 1;
}
/* when the articles aren't showcased, put them away */
.content-container
  .content-main
  .content-banner
  .content-article:not(.selected) {
  /* display: none; */
  z-index: 1;
}
.content-container
  .content-main
  .content-banner
  .content-article:not(.selected)
  img {
  opacity: 0;
  transform: scale(1) translateX(-30px);
  transition: 0.9s ease-out 0.9s;
}
.content-container .content-main .content-banner .carousel-dots {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px;
  display: block;
  z-index: 2;
}
.content-container .content-main .content-banner .carousel-dots ul {
  list-style-type: none;
  margin: 0;
}
.content-container .content-main .content-banner .carousel-dots ul > li {
  display: block;
  background-color: #ffffff;
  width: 10px;
  height: 10px;
  float: left;
  margin-left: 5px;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.44);
  cursor: pointer;
  transition: 0.3s;
}
.content-container .content-main .content-banner .carousel-dots ul > li:hover {
  transform: scale(1.2);
}
.content-container
  .content-main
  .content-banner
  .carousel-dots
  ul
  > li.selected {
  background-color: #db393f;
}
.content-container .content-main .content-banner img,
.content-container .content-main .content-banner .content-article img {
  float: left;
  display: block;
  z-index: 0;
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.content-container .content-main .content-banner .content-article img {
  transition: 0.9s ease-out;
}
.content-container .content-main .content-banner .content-article:hover img {
  transform: scale(1.3);
  transition: 8s ease-out 0.6s;
}
.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container {
  padding: 15px 30px;
  background-color: rgba(0, 0, 0, 0.63);
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  float: left;
  color: #ffffff;
  text-shadow: 1px 2px 2px #000000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-title {
  font-family: "Gotham Cond Bold";
  font-size: 24px;
  width: calc(100%);
  margin: 0;
  margin-bottom: 0.5em;
}
.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-title
  > a {
  color: #ffffff;
  transition: 0.3s;
  text-decoration: none;
}
.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-title
  > a:hover {
  opacity: 0.8;
}
.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-desc {
  font-family: "Gotham Light Italic";
  font-size: 14px;
  width: calc(100% - 40px);
  margin: 0;
}

.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-desc,
.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-title {
  transition: 0.9s ease-out;
}

.content-container
  .content-main
  .content-banner
  .content-article:not(.selected)
  .content-banner-container
  .banner-desc,
.content-container
  .content-main
  .content-banner
  .content-article:not(.selected)
  .content-banner-container
  .banner-title {
  transform: translateX(-30px);
  opacity: 0;
}

.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-desc
  > a {
  transition: 0.3s;
  color: #ffffff;
  font-weight: bolder;
  text-decoration: underline;
}
.content-container
  .content-main
  .content-banner
  .content-article
  .content-banner-container
  .banner-desc
  > a:hover {
  opacity: 0.8;
}
.content-container .content-sidebar {
  width: calc(100% - 675px);
  margin: 0;
  float: right;
  padding-left: 5px;
}
.content-container .content-sidebar .sb-widget {
  float: left;
  display: block;
  font-family: "Helvetica Lt Std", Arial, sans-serif;
  font-size: 14px;
  line-height: 23px;
  color: #676767;
}
.content-container .content-sidebar .sb-widget:not(:last-of-type) {
  margin-bottom: 5px;
}
.content-container .content-sidebar .sb-widget .widget-padding {
  padding: 1em;
}

/* contact form stuff */
.content-container .content-main .content-body label {
  color: #676767;
  text-align: left;
}

.content-container .content-main .content-body textarea,
.content-container .content-main .content-body input[type="tel"],
.content-container .content-main .content-body input[type="email"],
.content-container .content-main .content-body input[type="text"] {
  font-family: "Gotham Light";
  font-size: 16px;
  padding: 0.5em;
  border: 1px solid #aaaaaa;
  width: 100%;
}
.content-container .content-main .content-body textarea {
  width: 100%;
}

.content-container .content-main .content-body input[type="submit"],
.content-container .content-main .content-body input[type="button"] {
  padding: 0.5em 1em;
  background-color: #287f8f;
  border: none;
  color: #fff;
  font-family: "Gotham Light";
  font-size: 16px;
}

/* faq stuff */
.content-container .content-main .content-body .faq-question {
  padding: 1em;
  background-color: #eee;
  font-family: "Archer Bold";
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
}
.content-container .content-main .content-body .faq-question.show,
.content-container .content-main .content-body .faq-question:hover {
  background-color: #ddd;
}
.content-container
  .content-main
  .content-body
  .faq-question:not(:first-of-type) {
  margin-top: 0.5em;
}
.content-container .content-main .content-body .faq-answer {
  padding: 1em;
  overflow: hidden;
  transition: 0.3s;
  background-color: #f8f8f8;
}
.content-container .content-main .content-body .faq-answer:not(.show) {
  max-height: 0;
  padding: 0 1em;
}

/* article stuff */
.article-container {
  background-color: #f0f0f0;
  padding: 1em;
  overflow: hidden;
  clear: both;
}
.article-container .article {
  clear: both;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.article-container .article:last-of-type {
  margin-bottom: 0 !important;
}
.article-container .article .article-image {
  width: 40%;
  margin-right: 1em;
  min-width: 200px;
  max-height: 230px;
  float: left;
  overflow: hidden;
  line-height: 1;
  transition: 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.article-container .article .article-image:hover {
  border: 1px solid #287f8f;
}
.article-container .article .article-image img {
  max-width: 100%;
  height: auto;
  float: left;
}

/* event stuff */
.event-list-container {
  display: block;
  /* overflow: hidden; */
}
.event-title {
  /* font-family: "Gotham Cond Bold"; */
  font-size: 24px;
  margin-bottom: 1em;
}
.event-title a {
  color: #287f8f;
  text-decoration: none;
}
.event-title a:hover {
  text-decoration: underline;
}
.event-list-item {
  display: block;
  width: 100%;
  position: relative;
  /* overflow: hidden; */
  float: left;
}
.event-list-item:not(:last-of-type) {
  border-bottom: 1px solid #c4c4c4;
  margin-bottom: 2em;
  padding-bottom: 2em;
}

.tribe-events-event-image {
  width: 230px;
  height: 155px;
  overflow: hidden;
  box-shadow: 0 0.25em 0.5em 1px rgba(0, 0, 0, 25%);
  border-radius: 0.25em;
}
.tribe-events-event-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* event map */
#event-map {
  width: 100%;
  height: 100%;
}

/* event signup */
.signup {
  max-width: 500px;
  display: block;
  padding: 1em;
  margin: 2em auto;
  background-color: #eee;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Construction Project Map */
#project-container {
  height: 100%;
  display: block;
  overflow-y: scroll;
}
#project-container .project-bucket {
  padding: 0;
  display: block;
  border-bottom: 1px solid #ddd;
  position: relative;
}
#project-container .project-bucket.bucket-opened {
  padding-bottom: 1em;
}

#project-container #current-construction-project:after {
  background-color: rgba(40, 127, 143, 0.3);
  box-shadow: inset 0 0 0 3px #287f8f;
}
#project-container #future-construction-project:after {
  background-color: rgba(176, 199, 48, 0.3);
  box-shadow: inset 0 0 0 3px #b0c730;
}
#project-container #design-segment:after {
  background-color: rgba(218, 60, 65, 0.3);
  box-shadow: inset 0 0 0 3px #da3c41;
}
#project-container #completed-construction-project:after {
  background-color: rgba(127, 127, 127, 0.3);
  box-shadow: inset 0 0 0 3px #7f7f7f;
}
#project-container .project-bucket:after {
  content: "";
  opacity: 0.25;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  /* width: .5em; */
  transition: 0.3s;
  z-index: 1;
  pointer-events: none;
}
#project-container .project-bucket:not(.bucket-opened):after {
  opacity: 0;
}
#project-container .project-bucket:not(.bucket-opened):hover:after {
  opacity: 0.2;
}
#project-container .project-bucket:not(.bucket-opened) .project-menu-item {
  /* display: none; */
  height: 0;
  overflow: hidden;
  padding: 0 1.5em;
  margin: 0;
  border: none;
  opacity: 0;
}
#project-container .project-bucket > .project-bucket-title {
  cursor: pointer;
  padding: 1em;
  display: block;
  position: relative;
}
#project-container .project-bucket > .project-bucket-title .count {
  font-family: "Google Sans";
  font-variant-numeric: tabular-nums;
}
#project-container .project-bucket.bucket-opened > .project-bucket-title {
  cursor: default;
  border-bottom: 1px solid #ddd;
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
  margin-bottom: 1em;
  background-color: #f8f8f8;
}
#project-container
  #current-construction-project.bucket-opened
  > .project-bucket-title {
  background-color: rgba(40, 127, 143, 0.1);
}
#project-container
  #future-construction-project.bucket-opened
  > .project-bucket-title {
  background-color: rgba(176, 199, 48, 0.1);
}
#project-container
  #design-segment.bucket-opened
  > .project-bucket-title {
  background-color: rgba(218, 60, 65, 0.1);
}
#project-container
  #completed-construction-project.bucket-opened
  > .project-bucket-title {
  background-color: rgba(127, 127, 127, 0.1);
}
#project-container .project-bucket > .project-menu-item {
  display: block;
  padding: 0.5em 1.5em;
  margin: 0;
  font-size: 0.9em;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}
#project-container .project-bucket .project-menu-item:last-child {
	margin-bottom: 17px !important;
}
#project-container .project-bucket > .project-menu-item:nth-of-type(1) {
  transition: 0.3s, 0.3s opacity 0.03s, 0.3s height 0.03s;
}
#project-container .project-bucket > .project-menu-item:nth-of-type(2) {
  transition: 0.3s, 0.3s opacity 0.06s, 0.3s height 0.06s;
}
#project-container .project-bucket > .project-menu-item:nth-of-type(3) {
  transition: 0.3s, 0.3s opacity 0.09s, 0.3s height 0.09s;
}
#project-container .project-bucket > .project-menu-item:nth-of-type(4) {
  transition: 0.3s, 0.3s opacity 0.12s, 0.3s height 0.12s;
}
#project-container .project-bucket > .project-menu-item:nth-of-type(5) {
  transition: 0.3s, 0.3s opacity 0.15s, 0.3s height 0.15s;
}
#project-container .project-bucket > .project-menu-item:nth-of-type(6) {
  transition: 0.3s, 0.3s opacity 0.18s, 0.3s height 0.18s;
}

#project-container .project-bucket > .project-menu-item:hover {
  background-color: #f0f0f0;
}
#project-container .project-bucket > .project-menu-item .project-list-title {
  display: block;
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
  color: #333;
}
#project-container .project-bucket > .project-menu-item .project-list-fpid {
  display: block;
  color: #666;
  font-family: "Google Sans";
  font-variant-numeric: tabular-nums;
}

#project-container .project-bucket > .project-menu-item .project-list-tooltip {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-20%);
  text-align: center;
  width: 50%;
  display: block;
  padding: 0.5em;
  line-height: 1.1em;
  /* font-size: 14px; */
  background-color: #333;
  color: #fff !important;
  opacity: 0;
  z-index: -1;
  border-radius: 1px;
  transition: 0.3s all ease-out;
}
#project-container
  .project-bucket
  > .project-menu-item
  .project-list-tooltip:after {
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  left: 50%;
  bottom: 10px;
  border-radius: 2px;
  background-color: #333;
  transition: 0.1s;
  z-index: -1;
  transform: rotate(45deg) translateX(-50%);
}
#project-container
  .project-bucket
  > .project-menu-item.hover
  .project-list-tooltip {
  transition: 0.3s all ease-out 0.3s;
  opacity: 1;
  z-index: 2;
  transform: translate(-20%, -2em);
  pointer-events: none;
}
#project-container
  .project-bucket
  > .project-menu-item.hover
  .project-list-tooltip:after {
  transition: 0.3s all ease-out 0.3s;
  width: 20px;
  height: 20px;
  bottom: -10px;
}

#project-container .project-bucket > .project-menu-item.shoot:before {
  transform: translate(-50%, -50%) rotate(-135deg);
  width: 13px;
  height: 13px;
  background-color: #f79227;
  border-color: rgba(0, 0, 0, 0.4);
  border-radius: 0%;
}
#project-container
  .project-bucket
  > .project-menu-item.current-construction-project.shoot:before {
  background-color: #287f8f;
}
#project-container
  .project-bucket
  > .project-menu-item.future-construction-project.shoot:before {
  background-color: #b0c730;
}
#project-container
  .project-bucket
  > .project-menu-item.design-segment.shoot:before {
  background-color: #da3c41;
}
#project-container
  .project-bucket
  > .project-menu-item.completed-construction-project.shoot:before {
  background-color: #7f7f7f;
}
#project-container .project-bucket > .project-menu-item:before {
  content: "";
  transition: 0.3s;
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 100%;
  width: 9px;
  height: 9px;
  border: 1px solid #aaaaaa;
  background-color: #fff;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#project-container > .project-title {
  padding: 1em;
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
  border-bottom: 1px solid #ddd;
}
#project-container > .project-title > .project-fpid {
  display: block;
  color: #666;
  font-family: "Google Sans";
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}
#project-container > .project-children {
  border-bottom: 1px solid #ddd;
}
#project-container > .project-children .child-container-title {
  background-color: #fda43a;
  color: #fff;
  padding: 0.5em 1em;
}
#project-container > .project-children .child-title {
  padding: 0.5em 1em;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}
#project-container > .project-children .child-title:hover {
  background-color: #f0f0f0;
}

#project-container .project-children .child-title.shoot:before {
  transform: translate(-50%, -50%) rotate(-135deg);
  width: 13px;
  height: 13px;
  background-color: #f79227;
  border-color: rgba(0, 0, 0, 0.4);
  border-radius: 0%;
}
#project-container .project-children .child-title:before {
  content: "";
  transition: 0.3s;
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 100%;
  width: 9px;
  height: 9px;
  border: 1px solid #aaaaaa;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
#project-container > .project-content {
  padding: 1em;
  line-height: 1.25em;
  background-color: #f5f5f5;
  overflow-y: auto;
}
#project-container > .project-content ul {
  margin: 1em;
}
#project-container > .project-content a {
  color: #238090;
}

/* Project Design Map */
#project-design-map .segment {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}
#project-design-map .segment:hover .tooltip {
  opacity: 0.9;
  transform: translate(0%, -50%) !important;
}
#project-design-map .segment .tooltip {
  opacity: 0;
  transition: 0.3s;
  position: absolute;
  display: block;
  top: 50%;
  z-index: 10;
  padding: 0.5em 1em;
  background-color: #333;
  color: #fff;
  pointer-events: none;
}
#project-design-map .segment .tooltip.left {
  left: 1em;
  transform: translate(-50%, -50%);
}
#project-design-map .segment .tooltip.right {
  right: 1em;
  transform: translate(50%, -50%);
}
#project-design-map img {
  transition: 0.3s;
  z-index: 2;
}
#project-design-map:hover img {
  transition: 0.3s ease-in-out 0.1s;
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
  opacity: 0.7;
  z-index: 8;
}
#project-design-map .segment:hover img {
  z-index: 9;
  transition: 0.3s;
  -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
  filter: grayscale(0%);
  opacity: 1;
}

/* interactive map overrides */
#map-container {
  clear: both;
}
#map-controls {
  /* display: inline-block;
    width: 100%; */
}

/* project info map */

#segment-laser {
  position: absolute;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  left: 0;
}
#segment-laser .laser-pointer-line {
  transition-property: none;
  width: 1px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  overflow: visible !important;
}
#segment-laser .laser-pointer-head {
  left: -4px;
  top: -9px;
  width: 9px;
  height: 9px;
  position: absolute;
  display: block;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 100px;
}

#project-info-map-container {
  width: 100%;
  min-height: 680px;
  height: 70vh;
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #aaaaaa;
  background-color: #fff;
}

#project-info-map-container.fullscreen {
  z-index: 999999;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}

#project-info-map {
  width: 50%;
  height: 100%;
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  z-index: 2;
}
#info-panel {
  width: 50%;
  height: 100%;
  position: relative;
  display: block;
  float: right;
  border-left: 1px solid #aaaaaa;
  z-index: 3;
  background-color: #fff;
}
#project-info-map-container.fullscreen #project-info-map {
  width: calc(100% - 473px);
}
#project-info-map-container.fullscreen #info-panel {
  width: 473px;
}
#map-loading-overlay {
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.6);
}
#map-loading-overlay span {
  border-radius: 0.25em;
  padding: 1em;
  background-color: #000;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#map-loading-overlay .spinner {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 4px solid transparent;
  border-right: 4px solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0);
  animation: spin 0.6s infinite linear;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    border-right-color: #fff;
  }
  20% {
    transform: translate(-50%, -50%) rotate(72deg);
    border-right-color: #da3c41;
  }
  40% {
    transform: translate(-50%, -50%) rotate(144deg);
    border-right-color: #f79227;
  }
  60% {
    transform: translate(-50%, -50%) rotate(216deg);
    border-right-color: #fff45f;
  }
  80% {
    transform: translate(-50%, -50%) rotate(288deg);
    border-right-color: #287f8f;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
    border-right-color: #7e7e7e;
  }
}

#segment-menu {
  height: 100%;
}

.segment-container {
  height: 100%;
}

.segment-content .segment-body {
  background-color: #f0f0f0;
}
.segment-content p:not(:last-of-type) {
  margin-bottom: 1em;
}

.segment-content .segment-image-container {
  width: 100%;
  float: left;
  overflow: hidden;
}

.segment-content img {
  width: 100%;
  float: left;
  height: auto;
}

.segment-content a {
  color: #287f8f;
  text-decoration: none;
}
.segment-content a:hover {
  text-decoration: underline;
}
.segment-content ul {
  margin: 0 1em !important;
}
.segment-content ul li:not(:last-of-type) {
  margin-bottom: 0.5em;
}

.segment-interchanges {
  border-bottom: 1px solid #aaaaaa;
}

.segment-link {
  /* padding: 1em; */
  cursor: pointer;
  color: #666;
  position: relative;
  line-height: 1;
}
.segment-link:hover {
  color: #333;
  background-color: #f8f8f8;
  text-decoration: underline;
}
.segment-link:not(:last-of-type) {
  /* margin-bottom: 1em; */
}
.segment-link.shoot:before {
  transform: translate(-50%, -50%) rotate(-135deg);
  width: 13px;
  height: 13px;
  background-color: #f79227;
  border-color: rgba(0, 0, 0, 0.4);
  border-radius: 0%;
}
.segment-link.north.shoot:before {
  background-color: #287f8f;
}
.segment-link.south.shoot:before {
  background-color: #b0c730;
}
.segment-link.central.shoot:before {
  background-color: #7e7e7e;
}
.segment-link:before {
  content: "";
  transition: 0.3s;
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 100%;
  width: 9px;
  height: 9px;
  border: 1px solid #aaaaaa;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

.segment-link .segment-tooltip {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 60%;
  display: block;
  padding: 0.5em;
  line-height: 1.1em;
  /* font-size: 14px; */
  background-color: #1f1f1f;
  border-radius: 2px;
  color: #fff !important;
  opacity: 0;
  z-index: -1;
  border-radius: 2px;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.4);
  transition: 0.3s all ease-out;
}
.segment-link .segment-tooltip:after {
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  left: 50%;
  bottom: 10px;
  border-radius: 2px;
  background-color: #1f1f1f;
  transition: 0.1s;
  z-index: -1;
  transform: rotate(45deg) translateX(-50%);
}
.segment-link.hover .segment-tooltip {
  transition: 0.3s all ease-out 0.3s;
  opacity: 1;
  z-index: 2;
  transform: translate(-50%, -1.5em);
}
.segment-link.hover .segment-tooltip:after {
  transition: 0.3s all ease-out 0.3s;
  width: 20px;
  height: 20px;
  bottom: -10px;
}

.segment-link .fpid {
  opacity: 0.45;
}
.segment-link:hover .fpid {
  opacity: 1;
}

.segment-back-button i {
  transition: 0.3s;
}
.segment-back-button:hover i {
  transform: translateX(-5px);
}

.segment-container:not(.selected) {
  display: none;
}

/* Styles for Signup page */

.signup-container {
  overflow: hidden;
  padding: 4px;
  background-color: #eee;
  margin: 1em 0;
}
.signup-container > a > .su {
  width: calc(50% - 8px);
  margin: 4px;
  float: left;
  background-color: #fda43a;
  padding: 1em;
  box-sizing: border-box;
  /* border-radius: 10px; */
  position: relative;
  min-height: 200px;
  cursor: pointer;
  transition: 0.3s;
  overflow: hidden;
  /* box-shadow: 0px 2px 2px rgba(0,0,0,.15);
	border: 2px solid #333; */
}

.signup-container > a > .su.su-alert {
  width: calc(100% - 8px);
  min-height: 400px;
}
.signup-container > a > .su.su-twitter {
  background-color: #1da1f3;
}
.signup-container > a > .su.su-twitter:before {
  content: "\f099";
  font-size: 100px;
  text-align: center;
  font-family: "Font Awesome 5 Brands";
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
}
.signup-container > a > .su.su-twitter:after {
  content: "@I4Ultimate";
  text-align: center;
  width: 100%;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Open Sans";
  letter-spacing: 1px;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1em;
  font-size: 13px;
}
.signup-container > a > .su.su-youtube,
.signup-container > a > .su.su-newsletter,
.signup-container > a > .su.su-newsfeed,
.signup-container > a > .su.su-alert {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #fff;
}

.signup-container > a > .su.su-youtube {
  background-image: url("./signup-assets/yt_logo_rgb_light.png");
  background-size: 70%;
}

.signup-container > a > .su.su-newsletter {
  background-image: url("./signup-assets/i4Beyond-eNewsletter-9423b-2018.jpg");
}

.signup-container > a > .su.su-alert {
  background-image: url("./signup-assets/I-4-Ultimate-Personalized-Alerts-Mobile-Website-02-cropped.jpg");
}
.signup-container > a > .su.su-newsfeed {
  background-image: url("./signup-assets/newsfeed-beyond.jpg");
  background-size: 150%;
}

.signup-container > a > .su:hover {
  /* box-shadow: 0px 6px 12px rgba(0,0,0,.3); */
  /* transform: translateY(-3px); */
  filter: saturate(150%);
}

.signup-container > a > .su > span.title {
  color: #fff;
  font-family: "Gotham Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em;
  width: calc(100%);
  background-color: rgba(0, 0, 0, 0.25);
  line-height: 1em;
  transition: 0.3s;
  letter-spacing: 1.35px;
}
.signup-container > a > .su > span.title.nh {
  padding: 0 1em;
}

.signup-container > a > .su > span.title > span.sub-title {
  display: block;
  transition: 0.3s;
  max-height: 0px;
  overflow: hidden;
  line-height: 1em;
  font-size: 13.5px;
  font-weight: 900;
  font-family: "Archer";
  text-transform: uppercase;
  letter-spacing: 1.25px;
  color: #eee;
}
.signup-container > a > .su:hover > span.title {
  background-color: #000;
  padding: 0.5em 1em;
  color: #aaa;
}
.signup-container > a > .su:hover > span.title > span.sub-title {
  max-height: 1em;
  color: #fff;
}
.signup-container > a > .su:hover > span.title:not(.nh) > span.sub-title {
  /* padding-top: .5em; */
}

/* SIGN UP New styles */
.sign-up-row {
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 0.5em 0em 0em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.sign-up-col:not(:last-of-type) {
  margin-right: 0.5em;
}
.sign-up-col {
  width: calc(100% / 3 - 0.35em);
  display: block;
  float: left;
  border: 3px solid #bbb;
  flex: 1 0 auto;
}
.sign-up-col.col-alerts {
  border-color: #f79322;
}
.sign-up-col.col-newsletter {
  border-color: #238090;
}
.sign-up-col.col-project-updates {
  border-color: #db393f;
}
.sign-up-col.col-twitter {
  border-color: #1da1f3;
}
.sign-up-col.col-youtube {
  border-color: #e62117;
}
.sign-up-col.col-presentation {
  border-color: #7f7f7f;
}

.sign-up-container {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  align-content: space-between;
  height: 100%;
  justify-content: space-between;
  min-height: 190px;
  /* max-height: 600px; */
  overflow: hidden;
}

.sign-up-container .sign-up-content-container {
  padding: 1em !important;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sign-up-col.col-twitter,
.sign-up-col.col-youtube {
  align-self: baseline;
}
.sign-up-col.col-twitter .sign-up-container,
.sign-up-col.col-youtube .sign-up-container {
  max-height: 190px;
}

.sign-up-container .sign-up-image {
  height: 150px;
  width: 100%;
  margin-bottom: 1em;
  overflow: hidden;
  position: relative;
  display: none !important;
}
.sign-up-container .sign-up-image .fa-twitter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 4em;
}
.sign-up-container .sign-up-image img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: inherit;
  object-fit: cover;
}
.sign-up-col .sign-up-title {
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
  line-height: 1.1em;
  padding: 0.75em 1em 0.75em 3em;
  color: #fff;
  font-size: 1.1em;
  position: relative;
}
.sign-up-col.col-alerts .sign-up-title {
  background-color: #f79322;
}
.sign-up-col.col-newsletter .sign-up-title {
  background-color: #238090;
}
.sign-up-col.col-project-updates .sign-up-title {
  background-color: #db393f;
}
.sign-up-col.col-twitter .sign-up-title {
  background-color: #1da1f3;
}
.sign-up-col.col-youtube .sign-up-title {
  background-color: #e62117;
}
.sign-up-col.col-presentation .sign-up-title {
  background-color: #7f7f7f;
}

.sign-up-col .sign-up-title .sign-up-title-icon {
  position: absolute;
  left: 1.5em;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2em;
  height: 2em;
  font-size: 0.9em;
}

.sign-up-container .sign-up-subtitle {
  margin-bottom: 0.5em;
  padding: 0 10px;
}
.sign-up-container .sign-up-frequency {
  font-size: 0.8em;
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
  padding: 0 10px;
}
.sign-up-container .sign-up-frequency span {
  font-family: "Gotham Light", Helvetica, Arial, sans-serif;
}
.sign-up-container .sign-up-sub-container {
  margin-top: auto;
}
.sign-up-container .sign-up-sub-container input[type="text"],
.sign-up-container .sign-up-sub-container input[type="email"] {
  padding: 0.25em 0.5em !important;
  margin-top: 0 !important;
  width: 100% !important;
}
.sign-up-container .sign-up-sub-container .gform_wrapper .ginput_container,
.sign-up-container .sign-up-sub-container .gform_wrapper {
  margin: 0;
}
.sign-up-container .sign-up-sub-container .es-field-wrap,
.sign-up-container .sign-up-sub-container .gform_wrapper .sign-up-sub-email {
  margin: 0.5em 0;
  padding: 0;
}
.sign-up-container .sign-up-sub-container .emaillist,
.sign-up-container .sign-up-sub-container .gform_wrapper .gform_footer {
  margin: 0;
  padding: 0;
}
.sign-up-container
  .sign-up-sub-container
  .gform_wrapper
  ul.gform_fields
  li.gfield {
  padding-right: 0;
}
.sign-up-container .sign-up-sub-container iframe#twitter-widget-0.extend {
  height: 20px !important;
  width: auto !important;
}
.sign-up-container .sign-up-sub-container #nf-field-4,
.sign-up-container .sign-up-sub-container .sign-up-sub-button,
.sign-up-container .sign-up-sub-container input[type="submit"] {
  padding: 0.5em !important;
  width: 100% !important;
  font-size: 16px !important;
  line-height: 1;
  background-color: #287f8f;
  display: block;
  color: #fff !important;

  text-align: center;
  cursor: default;
  transition: 0.3s;
}
.sign-up-container .sign-up-sub-container #nf-field-4:hover,
.sign-up-container .sign-up-sub-container .sign-up-sub-button:hover,
.sign-up-container .sign-up-sub-container input[type="submit"]:hover {
  opacity: 0.7;
}
.sign-up-container .sign-up-sub-container .validation_message {
  color: #db393f;
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
  font-weight: normal;
}
.sign-up-container .sign-up-sub-container .validation_error {
  color: #db393f;
  border: none;
  padding: 0.5em 0;
  text-align: left;
  margin: 0.25em 0;
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 0.8em;
  line-height: 1.2em;
}
.sign-up-container .sign-up-sub-container .nf-field-container {
  margin-bottom: 0.5em;
}
.sign-up-container .sign-up-sub-container .nf-form-fields-required {
  font-size: 0.8em;
  display: none;
}
.sign-up-container .sign-up-sub-container .gfield_label,
.sign-up-container .sign-up-sub-container .nf-field-label {
 display: none !important;    
}

/* Added by daryl on 09/26/2024 to reveal the label for "request a presentation" on the signup page */
#field_7_7 .gfield_label.gform-field-label {
  display: block !important;
}

.sign-up-container .sign-up-sub-container #field_7_5 {
  display: none;
}
.sign-up-container .sign-up-sub-container #___ytsubscribe_0 {
  float: left !important;
}

.sign-up-col.col-alerts
  .sign-up-container
  .sign-up-sub-container
  .sign-up-sub-button,
.sign-up-col.col-alerts
  .sign-up-container
  .sign-up-sub-container
  input[type="submit"] {
  background-color: #f79322;
}
.sign-up-col.col-newsletter
  .sign-up-container
  .sign-up-sub-container
  .sign-up-sub-button,
.sign-up-col.col-newsletter
  .sign-up-container
  .sign-up-sub-container
  input[type="submit"] {
  background-color: #287f8f;
}
.sign-up-col.col-project-updates
  .sign-up-container
  .sign-up-sub-container
  .sign-up-sub-button,
.sign-up-col.col-project-updates
  .sign-up-container
  .sign-up-sub-container
  input[type="submit"] {
  background-color: #db393f;
}
.sign-up-container .sign-up-sub-container #nf-field-4,
.sign-up-col.col-presentation
  .sign-up-container
  .sign-up-sub-container
  .sign-up-sub-button,
.sign-up-col.col-presentation
  .sign-up-container
  .sign-up-sub-container
  input[type="submit"] {
  background-color: #7f7f7f;
}

.post-content blockquote {
  background: #dcdcdc;
  padding: 2em;
  box-sizing: border-box;
}

/* footer stuff */
footer {
  display: block;
  overflow: hidden;
  position: relative;
  clear: both;
}
footer#insidefooter {
  background: url("/wp-content/themes/i4beyond/images/FDOTfooter.png") top
    center;
  width: 938px;
  height: 28px;
  display: block;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 102;
}
footer#insidefooter ul {
  float: right;
  display: block;
  width: 800px;
  height: 28px;
  list-style: none;
  font-family: "Abel", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}
footer#insidefooter ul li {
  float: left;
  line-height: 1;
  margin-right: 3em;
  padding: 0.5em;
  transition: background-color 0.3s;
}
footer#insidefooter ul li:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
footer#insidefooter ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
}

/* twitter widget */
iframe#twitter-widget-0 {
  height: 432px !important;
  float: left;
  width: 270px !important;
}
iframe#twitter-widget-0.extend {
  height: 657px !important;
}

#ctf.ctf-narrow .ctf-corner-logo {
    top: 0;
}
#ctf.ctf-narrow .ctf-corner-logo svg {
    width: 25px;
}

/* featherlight stuff */
.featherlight-iframe .featherlight-content {
  overflow: hidden !important ;
}

/* admin stuff */
#wpadminbar.mobile {
  display: none;
}

/* flexslider overrides */
.flexslider {
  margin: 0 !important;
}
.flexslider .slides {
  padding: 0 !important;
  margin: 0 !important;
}
.flexslider .slides > li {
  margin-bottom: 0.5em !important;
}
.flexslider.black ol.flex-control-nav {
  position: relative !important;
  bottom: 0 !important;
}

.alignright {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}
.alignleft {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}
.aligncenter {
  margin: 1em auto;
}
.wp-caption-text {
  font-size: 14px;
  color: #676767;
  font-style: oblique;
  padding: 0 1em;
  line-height: 1;
}

/* Use these classes instead of hard-coding the colors */
.color-red {
  color: #db393f !important;
}
.bg-color-red {
  background-color: #db393f !important;
}
.color-orange {
  color: #f79322 !important;
}
.bg-color-orange {
  background-color: #f79322 !important;
}
.color-yellow {
  color: #fff45f !important;
}
.bg-color-yellow {
  background-color: #fff45f !important;
}
.color-green {
  color: #b0c730 !important;
}
.bg-color-green {
  background-color: #b0c730 !important;
}
.color-teal {
  color: #238090 !important;
}
.bg-color-teal {
  background-color: #238090 !important;
}
.color-grey {
  color: #7f7f7f !important;
}
.bg-color-grey {
  background-color: #7f7f7f !important;
}
.color-mediumgrey {
  color: #e0e0e0 !important;
}
.bg-color-mediumgrey {
  background-color: #e0e0e0 !important;
}
.color-lightgrey {
  color: #f0f0f0 !important;
}
.bg-color-lightgrey {
  background-color: #f0f0f0 !important;
}
.color-white {
  color: #ffffff !important;
}
.bg-color-white {
  background-color: #ffffff !important;
}

/* ********** */

/* float classes */
.f-l {
  float: left;
}
.f-r {
  float: right;
}
.cl-b {
  clear: both;
}
/* ********** */

/* width classes */
.w-100p {
  width: 100%;
}
.w-50p {
  width: 50%;
}
.w-33p {
  width: 33.333333333%;
}
.w-25p {
  width: 25%;
}
.w-auto {
  width: auto;
}
/* ********** */

/* cursor classes */
.cur-p {
  cursor: pointer;
}
/* ********** */

/* display classes */
.dsp-n {
  display: none;
}
.dsp-b {
  display: block;
}
.dsp-i {
  display: inline;
}
.dsp-ib {
  display: inline-block;
}
/* ********** */

/* position classes */
.pos-r {
  position: relative;
}
.pos-ab {
  position: absolute;
}
.pos-fix {
  position: fixed;
}
/* ********** */

/* font classes */
.f-bold {
  font-weight: bold;
}
.font-xsmall {
  font-size: 12px;
}
.font-small {
  font-size: 15px;
}
.font-default {
  font-size: 16px;
}
.font-large {
  font-size: 18px;
}
.font-xlarge {
  font-size: 20px;
}
.font-xxlarge {
  font-size: 22px;
}
/* ********** */

/* overflow classes */
.of-h {
  overflow: hidden;
}
.y-scroll {
  overflow-y: scroll;
}
.y-auto {
  overflow-y: auto;
}
/* ********** */

/* unordered list classes */
ul.list-style-none {
  list-style: none;
}
/* ********** */

/* padding classes */
.p-3 {
  padding: 3em !important;
}
.pt-3 {
  padding-top: 3em !important;
}
.pb-3 {
  padding-bottom: 3em !important;
}
.ph-3 {
  padding-top: 3em !important;
  padding-bottom: 3em !important;
}
.pr-3 {
  padding-right: 3em !important;
}
.pl-3 {
  padding-left: 3em !important;
}
.pw-3 {
  padding-left: 3em !important;
  padding-right: 3em !important;
}

.p-2 {
  padding: 2em !important;
}
.pt-2 {
  padding-top: 2em !important;
}
.pb-2 {
  padding-bottom: 2em !important;
}
.ph-2 {
  padding-top: 2em !important;
  padding-bottom: 2em !important;
}
.pr-2 {
  padding-right: 2em !important;
}
.pl-2 {
  padding-left: 2em !important;
}
.pw-2 {
  padding-left: 2em !important;
  padding-right: 2em !important;
}

.p-1 {
  padding: 1em !important;
}
.pt-1 {
  padding-top: 1em !important;
}
.pb-1 {
  padding-bottom: 1em !important;
}
.ph-1 {
  padding-top: 1em !important;
  padding-bottom: 1em !important;
}
.pr-1 {
  padding-right: 1em !important;
}
.pl-1 {
  padding-left: 1em !important;
}
.pw-1 {
  padding-left: 1em !important;
  padding-right: 1em !important;
}

.p-075 {
  padding: 0.25em !important;
}
.pt-075 {
  padding-top: 0.75em !important;
}
.pb-075 {
  padding-bottom: 0.75em !important;
}
.ph-075 {
  padding-bottom: 0.75em !important;
  padding-top: 0.75em !important;
}
.pr-075 {
  padding-right: 0.75em !important;
}
.pl-075 {
  padding-left: 0.75em !important;
}
.pw-075 {
  padding-left: 0.75em !important;
  padding-left: 0.75em !important;
}

.p-05 {
  padding: 0.5em !important;
}
.pt-05 {
  padding-top: 0.5em !important;
}
.pb-05 {
  padding-bottom: 0.5em !important;
}
.ph-05 {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}
.pr-05 {
  padding-right: 0.5em !important;
}
.pl-05 {
  padding-left: 0.5em !important;
}
.pw-05 {
  padding-left: 0.5em !important;
  padding-right: 0.5em;
}

.p-025 {
  padding: 0.25em !important;
}
.pt-025 {
  padding-top: 0.25em !important;
}
.pb-025 {
  padding-bottom: 0.25em !important;
}
.ph-025 {
  padding-bottom: 0.25em !important;
  padding-top: 0.25em !important;
}
.pr-025 {
  padding-right: 0.25em !important;
}
.pl-025 {
  padding-left: 0.25em !important;
}
.pw-025 {
  padding-left: 0.25em !important;
  padding-left: 0.25em !important;
}

.p-0 {
  padding: 0em !important;
}
.pt-0 {
  padding-top: 0em !important;
}
.pb-0 {
  padding-bottom: 0em !important;
}
.ph-0 {
  padding-bottom: 0em !important;
  padding-top: 0em !important;
}
.pr-0 {
  padding-right: 0em !important;
}
.pl-0 {
  padding-left: 0em !important;
}
.pw-0 {
  padding-left: 0em !important;
  padding-left: 0em !important;
}
/* ********** */

/* margin classes */

.m-3 {
  margin: 3em !important;
}
.mt-3 {
  margin-top: 3em !important;
}
.mb-3 {
  margin-bottom: 3em !important;
}
.mh-3 {
  margin-top: 3em !important;
  margin-bottom: 3em !important;
}
.mr-3 {
  margin-right: 3em !important;
}
.ml-3 {
  margin-left: 3em !important;
}
.mw-3 {
  margin-left: 3em !important;
  margin-right: 3em !important;
}

.m-2 {
  margin: 2em !important;
}
.mt-2 {
  margin-top: 2em !important;
}
.mb-2 {
  margin-bottom: 2em !important;
}
.mh-2 {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}
.mr-2 {
  margin-right: 2em !important;
}
.ml-2 {
  margin-left: 2em !important;
}
.mw-2 {
  margin-left: 2em !important;
  margin-right: 2em !important;
}

.m-1 {
  margin: 1em !important;
}
.mt-1 {
  margin-top: 1em !important;
}
.mb-1 {
  margin-bottom: 1em !important;
}
.mh-1 {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}
.mr-1 {
  margin-right: 1em !important;
}
.ml-1 {
  margin-left: 1em !important;
}
.mw-1 {
  margin-left: 1em !important;
  margin-right: 1em !important;
}

.m-075 {
  margin: 0.25em !important;
}
.mt-075 {
  margin-top: 0.75em !important;
}
.mb-075 {
  margin-bottom: 0.75em !important;
}
.mh-075 {
  margin-bottom: 0.75em !important;
  margin-top: 0.75em !important;
}
.mr-075 {
  margin-right: 0.75em !important;
}
.ml-075 {
  margin-left: 0.75em !important;
}
.mw-075 {
  margin-left: 0.75em !important;
  margin-right: 0.75em !important;
}

.m-05 {
  margin: 0.5em !important;
}
.mt-05 {
  margin-top: 0.5em !important;
}
.mb-05 {
  margin-bottom: 0.5em !important;
}
.mh-05 {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}
.mr-05 {
  margin-right: 0.5em !important;
}
.ml-05 {
  margin-left: 0.5em !important;
}
.mw-05 {
  margin-left: 0.5em !important;
  margin-right: 0.5em;
}

.m-025 {
  margin: 0.25em !important;
}
.mt-025 {
  margin-top: 0.25em !important;
}
.mb-025 {
  margin-bottom: 0.25em !important;
}
.mh-025 {
  margin-bottom: 0.25em !important;
  margin-top: 0.25em !important;
}
.mr-025 {
  margin-right: 0.25em !important;
}
.ml-025 {
  margin-left: 0.25em !important;
}
.mw-025 {
  margin-left: 0.25em !important;
  margin-right: 0.25em !important;
}

.m-0 {
  margin: 0em !important;
}
.mt-0 {
  margin-top: 0em !important;
}
.mb-0 {
  margin-bottom: 0em !important;
}
.mh-0 {
  margin-bottom: 0em !important;
  margin-top: 0em !important;
}
.mr-0 {
  margin-right: 0em !important;
}
.ml-0 {
  margin-left: 0em !important;
}
.mw-0 {
  margin-left: 0em !important;
  margin-right: 0em !important;
}

.m-auto {
  margin: auto !important;
}
.mt-auto {
  margin-top: auto !important;
}
.mb-auto {
  margin-bottom: auto !important;
}
.mh-auto {
  margin-bottom: auto !important;
  margin-top: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}
.ml-auto {
  margin-left: auto !important;
}
.mw-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ********** */

/* border classes */
.br-1 {
  border-radius: 0.25em;
}
.br-2 {
  border-radius: 0.5em;
}
.br-3 {
  border-radius: 0.75em;
}
.br-4 {
  border-radius: 1em;
}
.br-5 {
  border-radius: 1.25em;
}
.br-100 {
  border-radius: 100em;
}

.b-0,
.b-none {
  border: none;
}

.b-1 {
  border: 1px solid #aaaaaa;
}
.b-r-1 {
  border-right: 1px solid #aaaaaa;
}
.b-l-1 {
  border-left: 1px solid #aaaaaa;
}
.b-t-1 {
  border-top: 1px solid #aaaaaa;
}
.b-b-1 {
  border-bottom: 1px solid #aaaaaa;
}

.b-2 {
  border: 2px solid #aaaaaa;
}
.b-r-2 {
  border-right: 2px solid #aaaaaa;
}
.b-l-2 {
  border-left: 2px solid #aaaaaa;
}
.b-t-2 {
  border-top: 2px solid #aaaaaa;
}
.b-b-2 {
  border-bottom: 2px solid #aaaaaa;
}

.b-3 {
  border: 3px solid #aaaaaa;
}
.b-r-3 {
  border-right: 3px solid #aaaaaa;
}
.b-l-3 {
  border-left: 3px solid #aaaaaa;
}
.b-t-3 {
  border-top: 3px solid #aaaaaa;
}
.b-b-3 {
  border-bottom: 3px solid #aaaaaa;
}

.b-color-light {
  border-color: #ddd;
}
/* ********** */

/* row */
.row {
  display: block;
  width: 100%;
  overflow: hidden;
  float: left;
  clear: both;
}
/* ********** */

/* columns */
.col {
  float: left;
  display: block;
}
/* ********** */

/* line height classes */
.lh-0 {
  line-height: 0;
}
.lh-1 {
  line-height: 1em;
}
.lh-1-25 {
  line-height: 1.25em;
}
.lh-1-5 {
  line-height: 1.5em;
}
.lh-2 {
  line-height: 2em;
}
/* ********** */

/* font classes */
[class*="archer"] {
  font-family: "Archer Bold", "Gotham", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}
[class*="gotham-bold"] {
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
}
[class*="gotham-light"] {
  font-family: "Gotham Light", Helvetica, Arial, sans-serif;
}
[class*="helvetica"] {
  font-family: "Helvetica Lt Std", Helvetica, Arial, sans-serif;
}

.archer-16 {
  font-size: 16px;
}
/* ********** */

/* text classes */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-upper {
  text-transform: uppercase;
}
.text-d-none {
  text-decoration: none !important;
}
/* ********** */

/* button classes */
.button {
  transition: 0.3s;
  overflow: hidden;
  line-height: 1em;
  position: relative;
}
.button:hover {
  opacity: 0.7;
}

.button-icon {
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.button-icon:before {
  top: 50%;
  position: absolute;
  transform: translateY(-55%) scale(1.25);
}

.button-text {
  width: calc(100% - 3em);
  float: right;
  display: flex;
  display: inline-block;
}
.button-text > span {
  display: flex;
}
/* ********** */

/* no select */
/* put this class anywhere you dont want the user to select the text */
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*  */
.file-type {
  position: absolute;
  right: 1em;
  opacity: 0.6;
  top: 50%;
  transform: translateY(-50%);
}

.button-link {
  max-width: 90%;
  display: block;
}

.accordion-control {
  padding: 0.5em;
  display: block;
  overflow: hidden;
}
.accordion-control:empty {
  padding: 0;
  display: 0;
}
.accordion-control button {
  margin: 0 0.25em;
}

.accordion {
  margin: 0.5em 0;
  transition: 1s background-color;
  text-align: left !important;
}
.invert .accordion .title,
.invert .accordion .accordion-content * {
  color: #ffffff !important;
}
.accordion.animate {
  background-color: rgba(0, 130, 153, 0.1);
}
.accordion .accordion:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.accordion .title {
  cursor: pointer;
  padding: 0.5em;
  padding-right: 2em;
  transition: 0.3s;
  line-height: 1.5;
  position: relative;
  text-transform: none;
  margin: 0;
}
.accordion .title.activated {
  background-color: #ddd;
}
.accordion .title .question,
.accordion .accordion-content .answer {
  color: #6f6e6f;
  margin-right: 0.5em;
  font-weight: bold;
}
.accordion .title > i.fa {
  float: right;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  line-height: inherit;
  font-size: 0.8em;
  opacity: 0.7;
}
.accordion .title > i.fa-chevron-down {
  color: #6f6e6f;
}
.accordion-content {
  overflow: hidden;
  height: 0;
  transition: 0.3s;
  padding: 0 1em;
}
.accordion-content.activated {
  height: auto;
  padding: 1em 1em;
  background-color: #f8f8f8;
}
.accordion-content p:last-of-type {
  margin: 0;
}
.accordion-content ul.alt {
  margin: 0;
}

.accordion .title:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.accordion .title:hover i.fa {
  opacity: 1;
}

.pagination {
  line-height: 1;
  display: table;
  margin: auto;
}

.pagination span,
.pagination a {
  display: block;
  float: left;
  margin: 0.5em;
  padding: 0.5em;
}

/* toolkit */

.toolkit-section {
  width: 100%;
}
.toolkit-section h1 {
  background-color: #238090;
  color: #fff;
  padding: 0.5em;
  margin: 0;
  font-size: 18px;
  width: 100%;
}

.toolkit-quick-links {
  /* background-color: #eeeeee; */
  /* padding: .5em 1em; */
  /* border-radius: 2px; */
}

.toolkit-article {
  overflow: hidden;
  padding: 2em;
  border: 1px solid #aaa;
  position: relative;
  transition: 0.3s max-height, 0.3s height;
}
.toolkit-article:hover .expand {
  opacity: 1;
  transform: translateY(0px) translateX(-50%);
}
.toolkit-article .expand {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1em;
  transform: translateY(10px) translateX(-50%);
  padding: 0.5em 1em;
  border-radius: 0.25em;
  color: #238090;
  border: 1px solid rgba(35, 128, 144, 0.5);
  background-color: #f0f0f0;
  font-family: "Gotham Bold";
  transition: 0.3s;
}
.toolkit-article .expand:hover {
  background-color: #ddd;
}
.toolkit-article.preview {
  z-index: 2;
  border: 1px solid #eee;
  max-height: 150px;
}
.toolkit-article.preview:after {
  content: "";
  transition: 0.3s;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(255, 255, 255, 0);
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(80%, rgba(255, 255, 255, 1)),
    color-stop(100%, rgba(255, 255, 255, 1))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 1) 100%
  );
}
.toolkit-article:not(:last-of-type) {
  margin-bottom: 1em;
}
.toolkit-article .toolkit-article-title {
  /* z-index: 1; */
  /* position: relative; */
  margin-bottom: 1em;
  text-align: center;
  font-weight: bold;
  font-size: 1.25em;
  font-family: "Gotham Bold";
}
.toolkit-article .toolkit-article-content {
}

.toolkit-social-media {
  margin: 0 0 1em;
  padding: 1em;
  border: 1px solid #aaa;
  overflow: hidden;
}
.toolkit-social-media span {
  float: left;
  display: block;
  width: 100%;
}
.toolkit-social-media a {
  padding: 0.5em;
  border: 1px solid #ddd;
  float: left;
  margin-top: 0.5em;
  margin-right: 0.5em;
  transition: 0.3s;
}
.toolkit-social-media a:hover {
  border: 1px solid #238090;
}
.toolkit-social-media img {
  float: left;
  display: block;
  margin: 0;
  padding: 0;
  max-height: 240px !important;
}

.toolkit-handout {
  float: left;
  padding: 0.5em;
  font-family: "Gotham Bold";
  background-color: #f0f0f0;
  border-radius: 0.25em;
  width: calc(100% / 3 - 1em);
  margin-bottom: 0.5em;
  height: fit-content;
  min-height: 436px;
}
.toolkit-handout:not(:nth-of-type(3n)) {
  margin-right: 1.5em;
}
.toolkit-handout a {
}
.toolkit-handout img {
  margin-bottom: 0.5em;
  border-radius: 0.25em;
}

.toolkit-graphic {
  width: calc(50% - 1em);
  float: left;
  margin: 0.5em;
}
.toolkit-graphic a {
  padding: 0.5em;
  border: 1px solid #ddd;
  float: left;
  margin-top: 0.5em;
  margin-right: 0.5em;
  transition: 0.3s;
}
.toolkit-graphic a:hover {
  border: 1px solid #238090;
}

/* project files */
.project-section h1 {
  background-color: #238090;
  color: #fff;
  padding: 0.5em;
  margin: 0;
  font-size: 18px;
  width: 100%;
}
.project-section h2 {
  background-color: #238090;
  color: #fff;
  padding: 0.5em;
  margin: 0;
  font-size: 18px;
  width: 100%;
}
.project-handout {
  float: left;
  padding: 0.5em;
  font-family: "Gotham Bold";
  background-color: #f0f0f0;
  border-radius: 0.25em;
  width: calc(100% / 3 - 1em);
  margin-bottom: 0.5em;
}
.project-handout:not(:nth-of-type(3n)) {
  margin-right: 1.5em;
}
.project-handout a {
}
.project-handout img {
  margin-bottom: 0.5em;
  border-radius: 0.25em;
}

@media screen and (max-width: 640px) {
  .toolkit-handout,
  .project-handout {
    width: 90%;
    margin: 0 auto 1em !important;
    float: none;
  }
}

/* survey form */

.survey-form {
}
.survey-form .gfield_label {
  font-family: "Gotham Bold", "Gotham", "Open Sans";
}
.survey-form
  .gfield:not(:first-of-type):not(.survey-grid-select):not(.survey-grid-title) {
  margin: 2em 0 0 !important;
  padding-bottom: 2em;
  display: block;
  width: 100%;
  float: left;
  border-bottom: 1px solid #ddd;
  padding-right: 0 !important;
}
.survey-form select {
  margin: 0 !important;
}
.survey-form select,
.survey-form input,
.survey-form textarea {
  padding: 1em !important;
  line-height: 1.2em !important;
}

.survey-grid-title {
  display: block;
  float: left;
  width: 100%;
  margin: 2em 0 0 !important;
  padding: 0 !important;
}
.survey-grid-title ul {
  float: right;
  margin: 0;
  position: relative;
}
.survey-grid-title ul#survey-grid-title-useful-sections,
.survey-grid-title ul#survey-grid-title-agreement-level {
  margin: 1em 0 0 !important;
}
.survey-grid-title ul#survey-grid-title-useful-sections > li,
.survey-grid-title ul#survey-grid-title-agreement-level > li {
  list-style: none !important;
  width: 90px;
  font-size: 14px !important;
  font-family: "Gotham Bold";
  line-height: 1.25em;
  text-align: center;
  padding: 0.5em;
  display: table-cell;
  vertical-align: middle;
  /* float: left; */
  margin: 0;
  position: relative;
  bottom: 0;
}
.survey-grid-title ul > li {
  background-color: #f8f8f8;
}
.survey-grid-title ul > li:nth-of-type(2n-1) {
  background-color: #eee;
}

.survey-grid-select {
  height: 100px;
  margin: 0 !important;
  padding: 0 !important;
  /* background-color: #f8f8f8; */
  position: relative;
}
.survey-grid-select label {
  width: calc(100% - (90px * 6));
  padding: 1em;
  font-size: 14px !important;
  float: left;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: auto !important;
}
.survey-grid-select .ginput_container_radio {
  margin: 0 !important;
  padding: 0 !important;
}
.survey-grid-select:not(:last-of-type) {
  border-bottom: 1px solid #ddd;
}
.survey-grid-select ul {
  float: left;
  width: calc(90px * 6) !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100px !important;
}
.survey-grid-select ul > li {
  width: 90px;
  height: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  float: left;
  position: relative;
  text-align: center;
}
.survey-grid-select ul > li:nth-of-type(2n-1) {
  background-color: rgb(0, 0, 0, 0.05);
}
.survey-grid-select ul > li > input {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 !important;
  margin: 0 !important;
  z-index: 10;
  display: none !important;
}
.survey-grid-select ul > li > label {
  z-index: 9;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translate(0%, 0%);
  /* opacity: 0; */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  max-width: 100% !important;
  transition: 0.3s;
}
.survey-grid-select ul > li > label:before {
  content: "\f111";
  display: block;
  font-size: 1em;
  font-family: "Font Awesome 5 Free";
  color: #bbb;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: 0.3s opacity 0.1s;
}
.survey-grid-select ul > li > label:after {
  content: "\f00c";
  display: block;
  font-size: 1.2em;
  font-family: "Font Awesome 5 Free";
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.survey-grid-select ul > li > label:hover {
  background-color: rgba(35, 128, 144, 0.2) !important;
}
.survey-grid-select ul > li > input[type="radio"]:checked + label {
  background-color: rgba(35, 128, 144, 0.8) !important;
}
.survey-grid-select ul > li > input[type="radio"]:checked + label:before {
  opacity: 0;
}
.survey-grid-select ul > li > input[type="radio"]:checked + label:after {
  transition: 0.3s opacity 0.1s;
  opacity: 1;
}

table.status-table {
  width: 100%;
  margin: 0;
  padding: 2px;
  border: 1px solid #494949;
}
table.status-table:not(:last-of-type) {
  margin-bottom: 1em;
}
table.status-table > thead {
}
table.status-table > thead > tr {
  background-color: #494949;
  color: #ffffff;
}
table.status-table > thead > tr > th {
  text-align: left;
  padding: 0.5em;
}

table.status-table > thead > tr > td:last-of-type,
table.status-table > thead > tr > th:last-of-type {
  width: 290px;
}
table.status-table > tbody {
}
table.status-table > tbody > tr {
}
table.status-table > tbody > tr > td {
  padding: 0.5em;
}
table.status-table > tbody > tr:nth-of-type(odd) > td {
  background-color: #ededed;
}
table.status-table > tbody > tr > td {
}
table.status-table > tbody > tr > td b {
  color: #db393f;
  font-family: "Gotham Bold";
}

@media screen and (max-width: 760px) {
  table.status-table thead,
  table.status-table tbody,
  table.status-table th,
  table.status-table td,
  table.status-table tr {
    display: block;
  }
  table.status-table tr th:last-of-type {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.status-table td {
    position: relative;
    text-align: left !important;
    padding: 0em 0.5em;
  }
  table.status-table tr td:last-of-type {
    font-size: 0.9em;
    font-family: "Gotham Bold";
  }
}

.aspect-ratio-box {
  height: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
.aspect-ratio-inside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-feed {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#video-feed .fas.fa-spinner.fa-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
}
#video-feed .yt-video-embed {
  z-index: 2;
  flex: 0 0 auto;
  width: calc(50% - 1em);
  margin: 0.5em;
}
@media screen and (max-width: 760px) {
  #video-feed .yt-video-embed {
    width: 100%;
    margin: 1em 0;
  }
}

.photos-gallery-3-wide .ngg-gallery-thumbnail-box {
  max-width: calc(100% / 3) !important;
}
.photos-gallery-3-wide .ngg-gallery-thumbnail-box:nth-of-type(3) {
  position: relative;
}
.photos-gallery-3-wide .ngg-gallery-thumbnail-box:nth-of-type(3):after {
  z-index: 3;
  pointer-events: none;
  content: "Click to see more";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.photos-gallery-3-wide .ngg-gallery-thumbnail-box:nth-of-type(3):before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0.5em;
  right: 0.5em;
  top: 0.5em;
  bottom: 0.5em;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

/* mockup sections */

.file-mockup-container {
  width: 100%;
  padding: 1em 0;
  display: block;
}
.file-mockup-container .top-section {
  display: inline-block;
  padding: 0.5em;
  background-color: rgba(35, 128, 144, 0.2);
  color: #000;
  margin-bottom: 0.25em;
  cursor: default;
}
.file-mockup-container .top-section.selected {
  background-color: #287f8f;
  color: #fff;
}
.file-mockup-container .mockup-section {
  display: none;
  width: 100%;
  overflow: hidden;
}
.file-mockup-container .mockup-section.selected {
  display: block;
}
.file-mockup-container .mockup-section .mockup-buttons {
  width: 250px;
  float: left;
}
.file-mockup-container .mockup-section .mockup-buttons button {
  display: block;
  padding: 1em;
  width: 100%;
  font-size: 16px;
  border-radius: 0;
  border: none;
  background-color: rgba(35, 128, 144, 0.2);
  color: #000;
  outline: none;
  transition: 0.15s;
}
.file-mockup-container .mockup-section .mockup-buttons button:hover,
.file-mockup-container .mockup-section .mockup-buttons button.selected {
  background-color: #287f8f;
  color: #fff;
}
.file-mockup-container
  .mockup-section
  .mockup-buttons
  button:not(:last-of-type) {
  margin-bottom: 0.25em;
}
.file-mockup-container .mockup-section .mockup-image {
  width: calc(100% - 250px);
  float: left;
  padding: 0 0.25em;
}

/* GF Quiz Stuff */
.gquiz-field {
  margin-bottom: 1em !important;
  float: left;
  display: block;
  /* overflow: hidden; */
  padding-bottom: 1em;
  width: 100%;
}
.gquiz-field:not(:last-of-type) {
  border-bottom: 1px solid #ddd;
}
.gquiz-correct-choice,
.gquiz-field-label,
.gquiz-field .gfield_label {
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
}
.gquiz-field ul.gfield_radio li input[type="radio"]:checked + label {
  font-family: "Gotham Bold", "Gotham Light", Helvetica, Arial, sans-serif;
}
.gquiz-answer-explanation {
  padding: 1em;
  border: 1px solid rgb(255, 244, 95);
  background-color: rgba(255, 244, 95, 0.3);
}

/* Handout section for toolkits (Daryl)*/
.toolkit-handout-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Survey Styles */
.ays-survey-question[data-id="13"] {
  display: none;
}

div[id*="ays-survey-container-"] .ays-survey-footer-with-live-bar {
  flex-direction: row-reverse !important;
}

.ays-survey-popup-modal-1[data-id="1"] {
  box-shadow: 3px 4px 10px 2px rgba(46, 46, 46, 0.75);
  -webkit-box-shadow: 3px 4px 10px 2px rgba(46, 46, 46, 0.75);
  -moz-box-shadow: 3px 4px 10px 2px rgba(46, 46, 46, 0.75);
}

/* Styles for word search */
#iframe-puzzleme {
  height: 500px !important;
}

#iframe-puzzleme[name="60b284c01f5a2627d79f7b870657c60047293d163b63e9a806b6c68a903e36b5"] {
  height: 579px !important;
}


/* Project handout-container more consistent layout for when you add more documents - Daryl*/
.project-handout-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/*  added by daryl 05/07/2024 for Oversight Committee page modal*/
.modal-backdrop {
 display: none !important;

}

/* added by Jonathan 11/21/2025 for toolkit list styling */
.b-1.br-1.b-color-light.p-1.mb-05 {
    display: flex;
    flex-direction: row;
    position: relative;
}

.b-1.br-1.b-color-light.p-1.mb-05 a {
    display: block;
    width: 75%;
}

.b-1.br-1.b-color-light.p-1.mb-05 span {
    display: block;
    width: 25%;
    text-align: right;
    align-items: center;
    float: unset;
}