:root {
  --primaryfont: "Figtree", sans-serif;
  --dark: #141413;
  --darkgrey: #333;
  --light: #fff;
  --faintgrey: #d3d3d3;
  --lightgrey: #676767;
  --lightergrey: #f3f3f3;
  --darkblue: #005da0;
  --blue: #0089ec;
  --lightblue: #d8efff;
  --lighterblue: #f2f9ff;
  --infocolor: #008b8b;
  --infocolordark: #067474;
}

body {
  background-color: #eeeeee !important;
}

.breadcrumbs {
  background-color: var(--dark);
  color: var(--white);
}

.wrapper:not("wrapper.analytics") {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 24px;
}

body.intelligence {
  background-color: var(--light);
}

.position-right {
  margin-right: 0 !important;
}

.row {
  clear: both;
  height: 2rem;
}

.divider {
  background-color: #d9d9d9;
  height: 24px;
  margin: 0 32px;
  width: 1px;
}

.white-font {
  color: #fff !important;
}

.text-white > * {
  color: var(--light);
}

.hoz-divider {
  margin: 64px auto;
  height: 1px;
  width: 100%;
  background-color: #e2e2e2;
}

.hoz-divider.light {
  background-color: #888;
}

section {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media only screen and (min-width: 744px) {
  /* section {
        padding-top: 80px;
        padding-bottom: 80px;
    } */
}

.section-grey {
  background-color: #f6f6f6;
}

.section-dark {
  background-color: var(--dark);
}

/* REPEAT COMPONENTS */

#successmessage {
  color: #4caf50;
  font-weight: 700;
  margin: 8px 0;
  display: none;
}

.outline {
  outline: 1px solid red;
}

/* SEARCH HOLDER */

@media only screen and (min-width: 768px) {
  #xsearch {
    display: none;
  }
}

/* HIGHLIGHT WRAPPER*/

.wrapper.highlights {
  position: relative;
  padding: 64px 0;
  display: block;
  background-color: #f4f4f4;
}

/* ANALYTICS STYLES */

.wrapper.analytics {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  padding: 0 48px;
  box-shadow: rgba(150, 150, 150, 0.2) 0 8px 64px;
  background-color: #fff;
  z-index: 1;
}

@media only screen and (max-width: 1024px) {
  .wrapper.analytics {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .wrapper.analytics {
    min-width: unset;
    max-width: unset;
    box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.5);
    z-index: 1;
    align-items: flex-start;
    width: 100%;
    padding: 0;
  }
}

/* ANALYTICS BODY */

.analytics.body {
  height: 100%;
  overflow-y: scroll;
  position: relative;
  transition: 0.3s all ease;
  width: 90%;
  /* min-width: 1024px;*/
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.analytics.body.hide {
  width: 100%;
}

@media only screen and (max-width: 1024px) {
  .analytics.body {
    padding: 0 16px;
  }
}

@media only screen and (max-width: 767px) {
  .analytics.body {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
}

.body-header {
  width: 100%;
  height: 80px;
  //background-color: var(--light);
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  //box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.right.header-holder {
  width: fit-content;
  border-bottom: 3px solid var(--dark);
  display: block;
  width: 100%;
}

.right.header-holder h2 {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.search-tag > a {
}

.search-tag > h2 {
  text-transform: uppercase;
  font-size: 24px;
  padding: 0 0 6px;
  font-weight: 700;
}

.search-tag > span {
  padding: 0 0 0 8px;
}

.search-tag > a {
}

.body-body {
  width: 100%;
  height: inherit;
  padding: 0;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  overflow-y: scroll;
}

.body-body-body-right {
  width: 33%;
  padding: 32px 40px 0 0;
  position: sticky;
  top: -180px;
  margin-bottom: 16px;
  z-index: 0;
  transition: 0.3s all ease;
}

@media only screen and (max-width: 1024px) {
  .body-body-body-right {
    padding:32px 8px 8px;
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  .body-body-body-right {
    position: fixed;
    left: -120%;
    width: 100%;
    transition: 0.3s all ease;
    padding: 0 40px;
    z-index: 4;
    background-color: var(--light);
    height: 100svh;
    z-index: 10 !important;
    top: 0;
    padding: 32px 0 0;
  }

  .body-body-body-right.unhide {
    left: 0;
  }
}

.body-disclaimer,
.body-disclaimer a {
  font-size: 11px;
  color: #333;
  margin-top: 16px;
}

@media only screen and (max-width: 767px) {
  .body-disclaimer {
    padding: 0 32px;
  }
}

.body-disclaimer a {
  text-decoration: underline !important;
}

.body-body-right {
  background-color: var(--white);
  display: flex;
  align-items: center;
  position: relative;
  transition: 0.3s all ease 0.15s;
  z-index: 10;
  padding: 24px 40px 32px 32px;
  border-radius: 6px;
  //border: 1px solid var(--dark);
  //box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
  box-shadow: 0 -0.5px 4px -3px rgb(0, 0, 0);
}

@media only screen and (max-width: 1024px) {
  .body-body-right {
    padding: 16px 24px 24px 24px;
  }
}

@media only screen and (max-width: 767px) {
  .body-body-right {
    box-shadow: unset;
    display: block;
  }
}

.body-body-right > div:first-of-type {
  position: relative;
  margin: 0 auto;
  width: 100%;
  //padding-bottom: 8px;
  //border-bottom: 1.5px solid var(--faintgrey);
}

.body-body-left {
  height: inherit;
  //padding: 32px 0 0;
  padding: 0;
  //overflow-y: scroll;
  position: relative;
  width: 66%;
  padding-top: 32px;
}

@media only screen and (max-width: 1024px) {
  .body-body-left {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  .body-body-left {
    width: 100%;
  }
}

.body-right-slide {
  position: absolute;
  color: var(--light);
  font-size: 18px;
  top: 48px;
  right: 64px;
  padding: 2px 8px;
  border-radius: 50%;
  transition: 0.3s all ease;
}

.body-right-slide:hover {
  background-color: var(--light);
  color: var(--dark);
}

.body-body-nav {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
}

@media only screen and (max-width: 1024px) {
  .body-body-nav {
    padding: 8px 24px;
  }
}

.nav-btn {
  margin-right: 16px;
  position: relative;
  font-weight: 300;
}

.nav-btn.active {
  font-weight: 500;
}

.nav-btn::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #777;
  position: absolute;
  left: 0;
  bottom: -9.5px;
  transition: 0.5s all ease;
  transform-origin: left;
  transition: 0.3s all ease;
  transform: scaleX(0);
}

.nav-btn:hover::after {
  transform: scaleX(1);
}

.nav-btn.active::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--blue);
  position: absolute;
  left: 0;
  bottom: -9.5px;
  transition: 0.5s all ease;
  transform-origin: left;
  transform: scaleX(1);
}

.body-body-section-carrier {
  position: relative;
  //height: 70svh;
  //overflow-y: scroll;
  //overflow-x: hidden;
  padding: 0 40px;
}

@media only screen and (max-width: 767px) {
  .body-body-section-carrier {
    padding: 0 24px;
  }
}

@media only screen and (max-width: 1024px) {
  .body-body-section-carrier {
    padding: 0 8px;
  }
}

.body-body-section-title {
    width: 100%;
    margin: 0;
    padding: 16px 0;
    position: relative;
    //margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
  }

@media only screen and (max-width: 1280px) {
  /* .body-body-section-title {
        width: calc(100% - 344px - 16px);
    } */
}

@media only screen and (max-width: 1024px) {
  .body-body-section-title {
    width: 100%;
    padding: 16px 24px 8px;
    margin-bottom: 0;
  }
}

.body-duration {
  position: relative;
  display: flex;
  padding: 0;
  width: auto;
  text-align: right;
  justify-content: flex-end;

  select.minimal {
    font-size: 11px;
  }
}

.bc-item {
  background-color: var(--dark);
  color: var(--light);
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 11px;
  margin-right: 8px;
}

.bc-item:last-of-type {
  margin-right: unset;
}

.time-selector {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 1024px) {
  .time-selector {
    right: 40px;
  }
}

.time-selector select {
  border: unset;
  padding: 8px;
  border-radius: 2px;
  position: relative;
  appearance: none;
  text-align: center;
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .time-selector {
    display: none;
  }
}

.mobile-caller {
  display: none;
  position: absolute;
  right: 24px;
  bottom: 24px;
  line-height: 0;
  background: var(--dark);
  color: var(--light);
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 1px 1px 2px 1px;
  font-size: 10px;
  opacity: 0.3;
  transition: 0.3s all ease;
  z-index: 4;
}

.mobile-caller:hover {
  opacity: 1;
}

.mobile-caller.has {
  display: flex;
}

.close-mobile-caller {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 2rem;
  position: absolute;
  top: 12px;
  right: -17px;
  z-index: 11;
  color: var(--dark);
  background-color: var(--lighterblue);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 8px -4px;
  display: block;
  line-height: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 3px 8px;
}

@media only screen and (min-width: 768px) {
  .close-mobile-caller {
    display: none;
  }
}

.time-selector select::after {
  content: "+";
  position: absolute;
  top: 0;
  right: 0;
}

.body-body-card-container {
  //overflow: scroll;
  //padding: 8px;
  position: relative;
  z-index: 0;
  //width: 67%;
  width: 100%;
}

@media only screen and (max-width: 1280px) {
  /* .body-body-card-container{
        width: calc(100% - 400px);
    } */
}

.blank-notice {
  position: absolute;
  top: 128px;
  left: 56px;
  z-index: 0;
  display: none;
}

@media only screen and (max-width: 767px) {
  .blank-notice {
    left: 40px;
    width: 80%;
  }
}

.blank-notice p:first-of-type {
  font-weight: 700;
  font-size: 24px;
}

.body-body-card-holder {
  position: relative;
  display: inline-block;
  background-color: var(--white);
  min-height: 320px;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto 32px;
  box-shadow: 0 -0.5px 4px -3px rgb(0, 0, 0);
  /*! box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;*/
}

@media only screen and (max-width: 1024px) {
  .body-body-card-holder {
    display: flex;
  }
}

@media only screen and (max-width: 767px) {
  .body-body-card-holder {
    display: flex;
    flex-wrap: wrap;
    box-shadow: unset;
    border-radius: 6px;
    padding-bottom: 16px;
    margin-bottom: 48px;
    box-shadow: 0 -0.5px 4px -3px rgb(0, 0, 0);
  }
}

/* .body-body-card-holder:first-of-type{
    display: none;;
} */

.body-left-icons-holder{
  width: 120px;
  height: auto;
  position: absolute;
  top: 48px;
  right: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

@media only screen and (max-width: 1024px){
  .body-left-icons-holder{
    right: 0;
    top: 32px;
    width: unset;
  }
}

.body-left-icons-holder > button:last-of-type{
  margin-left: 8px;
}

.body-body-card-holder:last-of-type {
  margin: 0 auto;
}

.card-holder.left:hover{
  background-color: var(--blue) !important;
  color: var(--white);
}

.card-holder.left {
  transition: 0.3s all ease;
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 16px;
  background: unset;
  color: var(--darkblue);
  background-color: var(--lightblue) !important;
  border: unset;
  border-radius: 4px;
  font-size: 13px;
  position: relative;
  right: 16px;

  >{

  }

  span{
    font-size: 10px;
    color: var(--white);
    line-height: 0;
    padding: 9px 6px;
    top: -8px;
    right: -8px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 2;
    display: inline-block;
  }
}

.card-holder.left::after {
  /* content: '2';
  font-size: 11px;
  color: var(--white);
  line-height: 0;
  padding:11px 8px;
  top: -12px;
  right: -12px;
  border-radius: 12px;
  background-color: red;
  position: absolute;
  z-index: 2; */
}

/* .card-holder.left::before{
    position: absolute;
    right: 0;
    top: 45%;
    transform: translateX(-50%);
    transition: 0.15s all ease;
    z-index: -7;
    opacity: 0;
    pointer-events: none;
    color: var(--white);
    background-color: var(--blue);
    border-radius: 50%;
    padding: 6px;
    font-size: 11px;
    transform: scaleX(-1);
}



.card-holder.left:hover::before{
    right: -24px;
    z-index: 1;
    opacity: 1;
} */

.card-holder.left > img {
  width: 100%;
  height: 100%;
}

.card-holder.right {
  width: 100%;
  padding: 48px;
  display: block;
  text-transform: capitalize;
}

@media only screen and (max-width: 1024px) {
  .card-holder.right {
    height: unset;
    padding: 16px;
  }

  .card-holder.left {
    /* height: 64px;
    width: 64px; */
  }
}

@media only screen and (max-width: 767px) {
  .card-holder.left {
    top: 12px;
    right: 12px;
  }

  .card-holder.right {
    width: 100%;
    padding: 12px;
  }
}

.card-holder-card > p:nth-of-type(1) {
  color: var(--blue);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.card-holder-card h3 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 80px);
}

@media only screen and (max-width: 1024px){
  .card-holder-card h3{
    width: calc(100% - 128px);
  }
}

.card-holder-card > span:nth-of-type(1) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.card-holder-card > span:nth-of-type(1) > p:nth-of-type(1) {
  margin-left: 8px;
}

@media only screen and (max-width: 767px) {
  .card-holder-card > p:nth-of-type(1) {
    font-size: 11px;
  }

  .card-holder-card h2 {
    line-height: 1;
  }

  .card-holder-card h3 {
    letter-spacing: 0;
    font-size: 1.3rem;
  }
  .card-holder-card > span:nth-of-type(1) > p:nth-of-type(1) {
    font-size: 11px;
    font-weight: 600;
  }
}

.card-holder-table {
  margin: 32px 0 24px;
  padding: 16px 0;
  border-top: 3px solid var(--dark);
  //border-bottom: 1.5px solid var(--faintgrey);
}

@media only screen and (max-width: 1024px) {
  .card-holder-table {
    padding: 0;
    border-top: unset;
    margin: 16px 0 16px;
  }
}

.card-div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
}

.card-holder-table > .card-div:first-of-type {
  border-bottom: 1px solid var(--faintgrey);
  padding: 0 0 12px;
}

.card-holder-table > .card-div {
  border-bottom: 1px solid #eaeaea;
}

.card-holder-table > .card-div:last-of-type {
  //border-bottom: unset;
  //padding: 12px 0 0;
}

.card-div > .th {
  display: inline-block;
  font-weight: 700;
}

.card-div > .th,
.card-div > .td {
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-div > .th:nth-of-type(1),
.card-div > .td:nth-of-type(1),
.card-div > .th:nth-of-type(2),
.card-div > .td:nth-of-type(2),
.card-div > .th:nth-of-type(3),
.card-div > .td:nth-of-type(3),
.card-div > .th:nth-of-type(4),
.card-div > .td:nth-of-type(4),
.card-div > .th:nth-of-type(5),
.card-div > .td:nth-of-type(5),
.card-div > .th:nth-of-type(6),
.card-div > .td:nth-of-type(6) {
  width: calc(20% - 4px);
}

.card-div > .th:nth-of-type(2),
.card-div > .td:nth-of-type(2),
.card-div > .th:nth-of-type(3),
.card-div > .td:nth-of-type(3),
.card-div > .th:nth-of-type(4),
.card-div > .td:nth-of-type(4),
.card-div > .th:nth-of-type(5),
.card-div > .td:nth-of-type(5) {
  text-align: left;
}

.card-div > .th:last-of-type,
.card-div > .td:last-of-type {
  text-align: right;
}

.data-div {
}

.data-div::before {
}

@media only screen and (max-width: 1024px) {
  .card-div > .th:nth-of-type(2),
  .card-div > .td:nth-of-type(2),
  .card-div > .th:nth-of-type(3),
  .card-div > .td:nth-of-type(3),
  .card-div > .th:nth-of-type(4),
  .card-div > .td:nth-of-type(4),
  .card-div > .th:nth-of-type(5),
  .card-div > .td:nth-of-type(5),
  .card-div > .th:nth-of-type(1),
  .card-div > .td:nth-of-type(1),
  .card-div > .th:nth-of-type(6),
  .card-div > .td:nth-of-type(6) {
    padding: 8px;
    text-align: right;
    width: calc(50% - 4px);
    border-bottom: 1px solid var(--faintgrey);
  }

  .card-div > .td:nth-of-type(5) {
    border: unset;
  }

  .card-div > .td::before {
    content: attr(data-cell) " :  ";
    font-size: 11px;
    color: var(--dark);
    font-weight: 600;
    float: left;
  }

  .card-div:not(.data-div.card-div) {
    display: none;
  }

  .card-div.data-div:nth-of-type(odd) {
    //background-color: #fafafa;
  }

  .card-div.data-div:not(
      .card-holder-table > .card-div.data-div:first-of-type
    ) {
    border-top: 3px solid var(--dark);
  }
}

.body-body-card-holder.searchhide,
.body-body-card-holder.filterhide,
.body-body-card-holder.typehide,
.body-body-card-holder.availabilityhide,
.data-div.searchhide,
.data-div.sizehide,
.data-div.pricehide,
.data-div.filterhide {
  display: none;
}

/* .cta-zone {
    position: relative
} */

.cta-button,
.cta-info {
  font-size: 11px;
  font-weight: 400;
  border-radius: 2px;
  padding: 6px 12px;
  margin-right: 8px;
  display: inline-block;
  position: relative;
  transition: 0.3s all ease;
}

.info .cta-info {
  background-color: var(--lightblue);
  border-color: var(--lightblue);
}

.info .cta-info:hover {
  background-color: var(--blue);
  border-color: var(--lightblue);
  color: var(--white);
}

@media only screen and (max-width: 767px) {
  .cta-button {
    font-size: 11px;
  }
}

.cta-button:not(.arrow, .line)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 2px;
  top: -1px;
  border: 2px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(315deg);
  position: relative;
  z-index: 0;
  margin: 0 0 0 4px;
  display: inline-block;
  transition: 0.3s all ease;
}



.cta-button:not(.arrow, .line):hover::after {
  right: -2px;
}

.cta-button.line:hover::after {
  right: 0;
}


.cta-button.primary::after {
  border-color: #fff !important;
}

.cta-button.primary {
  background-color: var(--dark);
  color: var(--white);
}

.cta-button.blue {
  background-color: #0587e7;
  color: var(--light);
  padding: 12px;
}

.cta-button.blue:hover {
  background-color: var(--darkblue);
}

.cta-button.blue::after {
  border-color: var(--light) !important;
}

.cta-button.info {
  background-color: var(--infocolor);
  color: var(--light);
}

.cta-button.info:hover {
  background-color: var(--infocolordark);
}

.cta-button.info::after {
  border-color: #fff !important;
}

.cta-button.grey {
  background-color: var(--lightergrey);
  color: var(--lightgrey);
}

.cta-button.grey:hover {
  background-color: #eaeaea;
}

.cta-button.grey::after {
  border-color: var(--lightgrey);
}

.cta-button.search {
  width: auto;
  text-align: center;
  padding: 8px 16px;
  border: 1px solid var(--light);
}

.cta-button.search::after {
  border-color: var(--light);
}

.cta-button > i {
  transition: 0.3s all ease;
}

.filter-reset {
  display: none;
  color: var(--light);
  border: 1px solid var(--light);
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 11px;
  position: absolute;
  right: 32px;
  top: 4px;
  opacity: 0;
  transition: 0.3s all 0.15s;
}

.filter-reset.show {
  right: 0;
  opacity: 0.8;
}

.filter-reset:hover {
  opacity: 1;
}

.filter {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  border: 1px solid var(--blue);
  padding: 4px 12px;
  margin: 0 0 0 auto;
  text-align: center;
  transition: 0.3s all ease;
  color: var(--light);
  transform-origin: left;
  transform: scale(1);
  border-radius: 2px;
  text-transform: ;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.4px;
  background-color: var(--blue);
}

@media only screen and (max-width: 767px) {
  .filter {
    display: none;
  }
}

.filter.show {
  margin-top: 0;
}

.filter:hover {
  opacity: 1;
}

.filter.fltr {
  opacity: 1;
  display: inline-block;
  width: calc(66% - 8px);
}

.filter.show i::after {
  filter: invert(0);
}

.filter.fltr:hover {
  background-color: #008b8b;
  border-color: #;
}

.filter.fltr:hover span {
  color: var(--dark);
}

.filter.fltr:hover .filter-icon::after {
  filter: invert(0);
}

.filter span {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.filter i {
  color: var(--light);
  width: 16px;
}

.filter-icon {
  position: relative;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.filter-icon::after {
  content: "";
  background-image: url("../images/noun-filter-3212577.svg");
  display: inline-block;
  width: 11px;
  position: relative;
  top: 0px;
  height: 11px;
  background-size: contain;
  background-repeat: no-repeat;
  //filter: invert(1);
}

/* .cta-button.primary:hover {
    background-color: #c8c8c8;
} */

.keyword-search {
  color: var(--light);
  display: inline;
  width: 33%;
  transform-origin: left center;
  transform: scaleX(0);
  vertical-align: middle;
  border: 1px solid var(--light);
  padding: 4px 8px;
  border-radius: 2px;
  margin: 0 0 0 8px;
  text-align: center;
  opacity: 0;
  transition: 0.3s all ease;
  position: absolute;
  margin-top: 1px;
}

.keyword-search.show {
  opacity: 0.5;
  transform: scaleX(1);
}

.keyword-search:hover {
  opacity: 1;
}

.cta-button.line {
  color: #343434;
  border: 1px solid #777;
}

.cta-button.line:hover {
  color: #343434;
  border: 1px solid var(--dark);
}

.cta-button.white-line {
  color: var(--light);
  border: 1px solid var(--light);
}

.cta-button.white-line:hover {
  color: #343434;
  background-color: #ccc;
}

.cta-button.arrow {
  padding: 10px 0;
  color: var(--lightgrey);
  margin: 0;
}

.cta-button.arrow:hover {
  color: var(--dark);
}

.cta-zone > .cta-info {
  float: right;
  margin-right: 0;
}

@media only screen and (max-width: 767px) {
  .cta-zone > .cta-button:last-of-type {
  }
}

.cta-zone > .cta-button:last-of-type > i {
  left: 0;
  position: relative;
  transition: 0.3s all ease-out;
}

.cta-zone > .cta-button:last-of-type:hover > i {
  left: 4px;
}

.cta-button.callmodal.line {
  color: var(--blue);
  border: 1px solid var(--faintgrey);
}

.cta-button.callmodal.line::after {
  border-color: var(--blue);
}

.cta-button.callmodal.line:hover::after {
  right: 0px;
}

.body-body-containment {
  padding: 0 0;
  background-color: ;
  z-index: 0;
  position: relative;
}

.body-body-containment > h2,
.body-body-containment > h3 {
  color: var(--light);
}

.filter-holder {
  padding: 8px 0;
  position: relative;
  overflow: hidden;
  //border-bottom: 0.03rem solid var(--faintgrey);
}

.body-body-search {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  border: unset;
  background-color: var(--light);
  font-size: 14px;
  border: 1px solid #eee;
}

.body-body-search:focus {
  outline: none;
}

.body-body-search::placeholder {
  color: #777;
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 11px;
  text-transform: capitalize;
}

.filter-holder > button {
  /* position: absolute;
    color: #333;
    padding: 0;
    margin: 0;
    right: 8px;
    font-size: 14px;
    border: unset;
    //padding: 9px 12px 10px; */
  transition: 0.3s all ease;
  position: absolute;
  top: 8px;
  z-index: 0;
  border-radius: 2px;
}

.search-btn {
  display: inline-block;
  padding: 8px;
  opacity: 0.5;
  right: 32px;
}

.search-fltr {
  display: inline-block;
  padding: 8px;
  background-color: var(--blue);
  color: var(--blue);
  right: 0;
}

.search-fltr:hover {
  background-color: var(--darkblue);
}

.search-btn i {
  color: ;
  transition: 0.3s all ease;
}

.search-btn:hover i {
  color: #343434;
}

.search-tag {
  padding: 0;
  display: block;
  background-color: transparent;
  margin: 0;
  border-radius: 2px;
  border: 0px;
  transition: 0.3s all ease;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .search-tag {
    margin: 0;
  }
}

#clearfilters {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  line-height: 0;
  background: var(--dark);
  color: var(--light);
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 1px 1px 2px 1px;
  font-size: 10px;
  opacity: 0.3;
  transition: 0.3s all ease;
}

#clearfilters:hover {
  opacity: 1;
}

#clearfilters.has {
  display: flex;
}

.search-tag > a::before,
.search-tag > a::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 8px;
  width: 1px;
  transform-origin: center center;
  cursor: pointer;
}

.search-tag > a::after {
  transform: rotateZ(45deg);
  height: 8px;
}

.search-tag > a::before {
  transform: rotateZ(-45deg);
  height: 8px;
}

.searchtag::before,
.searchtag::after {
  background-color: var(--blue);
}

.selecttag::before,
.selecttag::after {
  background-color: var(--blue);
}

.search-tag.has {
  padding: 16px 16px 0;
  margin: 16px 0;
  border: 1px solid #eeee;
  background-color: #fafafa;
  transition: 0.3s all ease;
}

.search-tag > a {
  position: relative;
  margin: 0 16px 8px 0;
  letter-spacing: 0.5px;
  padding: 12px 20px 12px 12px;
  line-height: 0;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
  transition: 0.5s all ease;
  transform-origin: right center;
  transform: translateX(48px);
  transform: translateY(0);
  text-transform: capitalize;
  z-index: -9999;
  opacity: 0;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 180px;
}

.search-tag > a.show {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
  text-transform: uppercase;
  font-size: 11px;
}

.search-tag > a.show.elevate {
  transform: translateY(-48px);
  opacity: 0;
}

.search-tag > a.show.elevate.remove {
  max-width: 0;
  padding: 0;
  margin: 0;
}

.search-tag > a:hover {
  background-color: var(--blue);
  color: var(--lightblue);
}

.search-tag > a:hover::before,
.search-tag > a:hover::after {
  background-color: var(--lightblue);
}

.search-tag > a button {
  font-size: 16px;
  position: absolute;
  top: 8px;
  right: 4px;
  -webkit-appearance: none;
  appearance: none;
  line-height: 0;
  padding: 0;
  margin: 0;
}

.search-tag > a:hover > button {
  color: var(--dark);
}

.searchtag {
  border: 1px solid var(--lightblue);
  background-color: var(--lightblue);
  color: var(--blue);
  //box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.selecttag {
  background-color: var(--lighterblue);
  border: 1px solid var(--lightblue);
  color: var(--blue);
}

.body-select-containers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background-color: ;
  z-index: 0;
  transition: 0.3s ease all;
  //opacity: 0;
  transform-origin: top center;
  transform: scaleY(0);
  height: 0;
  opacity: 0;
  top: 0;
  padding: 0 8px;
  //pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .body-select-containers {
    opacity: 1;
    transform: scaleY(1);
    height: 170.2px;
    padding: 0;
  }
}

.body-select-containers.show {
  /* animation-name: slide-down;
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    pointer-events: initial; */
  transition: 0.3s ease all;
  height: 170.2px;
  opacity: 1;
  top: 0;
  transform: scaleY(1);
  margin-top: 1px;
}

.body-select-containers > span {
  position: relative;
  cursor: pointer;
  background-color: var(--white);
}

.body-select-containers > span.hide {
  color: #d3d3d3;
  opacity: 0.4;
  pointer-events: none;
}

.body-select-containers > span::after {
  content: "›";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  font-size: 14px;
}

.search-announcement {
  font-size: 11px;
  color: var(--dark);
  transition: 0.3s all ease;
  width: 100%;
  display: block;
}

.dynamic-titler {
  font-weight: 600;
  transition: 0.3s all ease;
  width: calc(50% - 16px);
}

@keyframes slide-down {
  0% {
    z-index: -1;
  }

  90% {
    z-index: 0;
  }

  100% {
    margin-top: 0;
    opacity: 1;
    z-index: 0;
  }
}

.body-select-containers.show.take {
  animation-name: slide-up;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes slide-up {
  0% {
    opacity: 1;
    z-index: 0;
    margin-top: 0;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    z-index: -1;
    margin-top: -191px;
  }
}

.body-select-containers > span {
  display: inline-block;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--lightgrey);
}

@media only screen and (min-width: 1024px) {
  .body-select-containers > span:nth-of-type(1),
  .body-select-containers > span:nth-of-type(2),
  .body-select-containers > span:nth-of-type(3),
  .body-select-containers > span:nth-of-type(4) {
    width: 100%;
  }
}

.body-select-containers > span:last-of-type {
  //margin-bottom: 32px;
}

.body-select-containers > span:last-of-type > .select-containers {
  border-bottom: unset;
}

.select-containers {
  appearance: none;
  /* safari */
  -webkit-appearance: none;
  /* other styles for aesthetics */
  width: 100%;
  position: relative;
  border: unset;
  border-bottom: 0.03rem solid var(--faintgrey);
  padding: 12px 8px;
  position: relative;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.4px;
  background-color: unset;
}

.select-containers::before,
.select-containers::after {
  --size: 0.3rem;
  position: absolute;
  content: "";
  right: -1rem;
  pointer-events: none;
}

.select-containers::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.select-containers::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}

.body-select-quicklinks {
  //margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  //border-bottom: 3px solid var(--light);
  //padding: 0 0 32px;
  display: none;
}

.body-select-quicklinks > a:not(.quicklinks-triple) {
  /* color: var(--light);
    font-size: 1.3rem;
    width: 100%;
    height: 80px;
    border-radius: 8px;
    background-color: #707070;
    display: block;
    line-height: 80px;
    text-align: center;
    background-image: url('../images/dubai-downtown-skyline-united-arab-emirates-or-ua-2022-12-16-04-29-57-utc\ \(1\).webp');
    background-size: cover;
    background-position: center center;
    background-blend-mode: soft-light; */
}

.quicklinks-cta-zone {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 8px 0;
}

.quicklinks-cta-zone > p {
  padding: 0;
  font-weight: 300;
  color: var(--light);
}

.quicklinks-cta-zone > a::after {
  //content: ;
}

.quicklinks-btn {
  color: var(--light);
  border: 1px solid var(--light);
  border-radius: 2px;
  padding: 4px 12px;
  margin: 0 4px 8px 0;
  font-size: 11px;
  opacity: 0.5;
  transition: 0.3s all ease;
}

.quicklinks-btn:hover {
  opacity: 1;
}

.quicklinks.info > *:nth-of-type(2) {
  background-color: unset;
  border: 1px solid var(--dark);
  color: var(--dark);
}

@media only screen and (max-width: 767px) {
  .body-body {
    padding: 16px;
  }
}

.body-body.show {
  display: flex;
}

.body-body#b-home {
}

.body-body#b-one {
}

.tableauPlaceholder {
  height: auto !important;
  margin: 0 auto 48px;
}

.tableauViz {
  margin: 0 auto !important;
}

#tabZoneId105 {
  display: none;
}

.leave {
  animation: leave 0.2s ease-in normal forwards;
}

.arrive {
  animation: arrive 0.2s ease-in normal forwards;
}

@keyframes leave {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(50px);
    pointer-events: none;
  }
}

.hide {
  display: ;
}

@keyframes arrive {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.loader-container {
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: -3;
  opacity: 0;
  background-color: #fafafa;
  transition: 0.2s all ease;
}

.loader-container.show {
  opacity: 1;
  z-index: 3;
}

/***** LOADER ****/
/*************************/

.loader {
  display: block;
  --height-of-loader: 4px;
  --loader-color: #0071e2;
  width: 130px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

/* MODALS */
.image-modal,
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background-color: rgba(40, 40, 40, 0.8);
  filter: blur(1);
  z-index: -2;
  opacity: 0;
  transition: 0.3s all ease;
}
.image-modal.show,
.modal.show {
  opacity: 1;
  z-index: 10;
}

.modal-close {
  color: #000;
  top: 16px;
  right: 8px;
  font-size: 24px;
  position: absolute;
  z-index: 10;
  line-height: 0;
  height: unset;
  border: unset;
}

.modal-carrier {
  box-sizing: border-box;
  border-radius: 6px;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 45%;
  opacity: 0;
  transition: 0.3s all ease;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1024px;
  height: 80svh;
  max-height: 800px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: var(--light);
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

@media only screen and (max-width: 1024px) {
  .modal-carrier {
    padding: 0;
    width: calc(100% - 32px);
    max-width: 1024px;
    height: 90svh;
  }
}

.modal-carrier.show {
  left: 50%;
  opacity: 1;
}

.modal-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  box-sizing: content-box;
  background-color: #f9f9f9;
  overflow-x: scroll;
  position: relative;
}

.modal-left,
.modal-right {
  width: 50%;
  height: inherit;
  position: relative;
}

.modal-left {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}

.modal-left > div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 32px;
}

.modal-right {
  position: relative;
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.modal-right > div {
  width: 100%;
  transition: 0.3s all ease;
}

.modal-left::after {
  content: "";
  display: block;
  height: 90%;
  width: 2px;
  background-color: #eaeaea;
  position: absolute;
  top: 5%;
  right: 0;
  z-index: 103;
}

.modal-inner {
  padding: 0 32px;
  width: 100%;
  position: relative;
  height: inherit;
}

.modal-body {
  padding: 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.modal-offkilter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.slidetrack label,
.slidetrack input {
  display: block;
  width: 100%;
}

.slidetrack label {
  font-size: 11px;
  columns: var(--faintgrey);
}

.slidetrack input {
  border: 1px solid var(--faintgrey);
  padding: 8px;
  margin: 4px 0 16px;
}

.slidetrack input::placeholder {
  color: var(--faintgrey);
}

.slidetrack {
  position: relative;
  height: auto;
}

.slidetrack,
.slidetrack > * {
  transition: 0.3s all ease;
}

.slidetrack form {
  transition: 0.3s all ease 0.3s;
}

.login-holder {
  display: block;
}

.register-holder {
  display: none;
}

.login-form {
  opacity: 1;
}

.register-form {
  opacity: 0;
}

.login-form .cta-button:nth-of-type(2),
.registration-form .cta-button:nth-of-type(2) {
  font-weight: 200;
}

.bc-item {
  text-transform: uppercase !important;
}

/*TUTORIAL COVER*/

.tutcover {
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -99999999;
  opacity: 0;
  display: none;
  min-width: unset;
  transition: 0.3s all ease;
}

.tutcover.show {
  display: block;
  opacity: 1;
  z-index: 2;
}

.tutcover.show > div {
  width: 320px;
}

.tutcover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

.tutcover::after {
}

#tutmessage > a:nth-child(1) {
  font-family: initial;
  font-weight: 700;
  text-decoration: underline !important;
}

.tutcover > div {
  max-width: ;
  width: auto;
  padding: 32px;
  background-color: #fff;
  position: absolute;
  right: 32px;
  top: 128px;
  left: unset;
  transform: unset;
  border-radius: 6px;
  z-index: 10000;
  display: block;
}

.tutcover > div.alt {
  top: 128px;
}

.tutcover > div.alt.side {
  left: unset;
  right: calc(50% + 16px);
}

@media only screen and (max-width: 1024px) {
  .tutcover > div {
    top: 80px;
  }

  .tutcover > div.alt {
    top: 96px;
  }

  .tutcover > div.alt.side {
    left: 32px;
    right: unset;
  }
}

@media only screen and (max-width: 767px) {
  .tutcover.show > div {
    top: 80px;
  }

  .tutcover.show > div.alt {
    top: 200px;
    left: 50%;
    z-index: 99999;
  }
}

.tutcover > div.center {
  right: unset;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tutcover p::before {
  content: "\f059";
  position: relative;
  margin-right: 8px;
  color: var(--infocolor);
}

.tutcover p:first-of-type {
  font-size: 16px;
  color: #444;
  position: relative;
  margin-bottom: 16px;
  line-height: 1.618;
}

.tutactions {
  width: fit-content;
  margin: 0 0 0 auto;
}

.tutactions > button {
}

@media only screen and (max-width: 767px) {
  .tutcover {
    z-index: 4;
  }

  .tutcover > div {
    width: calc(100% - 16px);
    max-width: unset;
    right: unset;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px;
  }
}

.cookie-banner {
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
  border-radius: 6px;
  max-width: 1024px;
  background-color: rgba(30, 30, 30, 0.8);
  z-index: 100;
  padding: 16px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  transition: 0.5s all ease;
  box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.5);
}

.cookie-banner:hover {
  background-color: rgba(30, 30, 30, 1);
}

@media only screen and (max-width: 1024px) {
  .cookie-banner {
    width: calc(100% - 16px);
  }
}

.cookie-banner.show {
  bottom: 16px;
}

.cookie-banner > div:first-of-type {
  width: calc(66% - 8px);
}

.cookie-banner > div:last-of-type {
  width: calc(33% - 8px);
  display: flex;
  justify-content: flex-end;
}

.cookie-banner > div:first-of-type > p:first-of-type {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.cookie-banner > div:first-of-type > p:last-of-type {
  font-size: 11px;
  color: #fff;
}

.cookie-banner > div:last-of-type > button:first-of-type {
}

@media only screen and (max-width: 767px) {
  .cookie-banner > div:first-of-type {
    width: 100%;
    margin-bottom: 8px;
  }

  .cookie-banner > div:last-of-type {
    width: 100%;
    justify-content: flex-start;
  }
}

.floader {
  width: 100svw;
  height: 100svh;
  position: fixed;
  background-color: var(--light);
  top: 0;
  z-index: 9999999;
  opacity: 1;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s all ease;
}

.floader.hide {
  z-index: -9;
  opacity: 0;
}

/*HEADER STYLES*/

.hdr {
  width: 100%;
  position: fixed;
  transition: 0.3s all ease;
  top: 0;
  z-index: 4;
}

@media only screen and (max-width: 1024px) {
  .hdr .header-container {
    padding: 16px 0;
  }
}

.header-container {
  width: 100%;
  position: relative;
  padding: 32px 0;
  transition: 0.3s all ease;
}

.header-container > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  position: relative;
  width: calc(100% - 64px);
  max-width: 1440px;
  margin: 0 auto;
  transition: 0.3s all ease;
}

.hdr.active,
.hdr.scroll,
.hdr.scroll .header-container {
  transition: 0.3s background ease;
  background: linear-gradient(0deg, #1f1a23 0%, #000000 19%);
}

.hdr.scroll .header-container {
  padding: 16px 0;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  transition: 0.3s all ease;
}

.hdr.active .header-container-left img,
.hdr.active .desktop-menu-section button img,
.hdr.active .desktop-menu-section a img,
.hdr.scroll .header-container-left img,
.hdr.scroll .desktop-menu-section button img,
.hdr.scroll .desktop-menu-section a img {
  filter: invert(0);
  transition: all 0.3s ease;
}

body .hdr.scroll .desktop-menu-section label {
  filter: invert(0);
  opacity: 0.6;
}

body.invert .hdr.scroll .desktop-menu-section label {
  filter: invert(0);
  opacity: unset;
}

.hdr.scroll .header-container-left img {
  transform: scale(0.8);
}

.hdr.active .desktop-menu-section button span,
.hdr.scroll .desktop-menu-section a span,
.hdr.active .desktop-menu-section button span,
.hdr.scroll .desktop-menu-section a span {
  //color: var(--dark)
}

@media only screen and (max-width: 1024px) {
  .hdr .desktop-menu-section .divider,
  .hdr .desktop-menu-section .menu-item:nth-of-type(1) {
    display: none;
  }
}

.header-container-left {
  height: 48px;
}

@media only screen and (max-width: 1024px) {
  .header-container-left {
    height: 32px;
  }
}

/*INVERT HEADERS*/
body.invert .hdr {
  background-color: #fff;
}

body.invert .hdr img,
body.invert .hdr span:not(.hdr.scroll span, .menu-trigger span) {
  filter: invert(1);
}

.hero-cta-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.hero-cta-zone > * {
}

.hero-cta-zone > *:first-of-type {
  margin-right: 16px;
}

.header-container-left > img {
  height: 100%;
  width: auto;
  display: block;
  transition: 0.3s all ease;
}

.header-conainer-right {
  height: 24px;
  width: auto;
}

.header-container-right > .menu-section {
  display: flex;
  flex-wrap: wrap;
  width: 120px;
  align-items: center;
  justify-content: space-between;
}

.desktop-menu-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

@media only screen and (max-width: 1024px) {
  .desktop-menu-section {
    display: none;
  }
}

.desktop-menu-section > button,
.desktop-menu-section > a {
  display: flex;
  align-items: center;
}

.desktop-menu-section > button > img,
.desktop-menu-section > a > img {
  width: 20px;
  height: 20px;
}

.desktop-menu-section > button > span,
.desktop-menu-section > a > span {
  border-bottom: 1px solid transparent;
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: normal;
  margin-left: 16px;
  position: relative;
  text-transform: uppercase !important;
  top: 1px;
  transition: all 0.3s ease-in-out;
}

.desktop-menu-section > label {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .desktop-menu-section > label {
    display: none;
  }
}

.desktop-menu-section > label::after {
  content: url(../images/search-d.svg);
  position: relative;
  left: -32px;
  top: 6px;
}

body.invert .desktop-menu-section > label {
  color: var(--dark);
}

body.invert .desktop-menu-section > label::after {
  filter: invert(1);
}

body.invert .desktop-menu-section > label input {
  color: var(--dark);
}

body.invert .scroll .desktop-menu-section > label input {
  color: var(--white);
}

.mobile-menu-section {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .mobile-menu-section {
    display: inline-block;
  }
}

.header-container-right > .menu-section > img {
  height: 24px;
  width: 24px;
}

.home-logo {
  height: 36px;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.home-logo img {
  height: 36px;
  width: auto;
  filter: invert(1);
}

.home-logo h1 {
  text-transform: uppercase;
  font-weight: 300;
  margin-right: 16px;
  padding-right: 16px;
  font-size: 1.3rem;
  border-right: 2px solid var(--dark);
}

.body-body {
  width: 100%;
  height: calc(100vh - 80px);
  padding: 48px;
  display: none;
}

.body-body.show {
  display: block;
}

.menu-search {
  position: relative;
}

.menu-search::after {
  content: url(../images/search-d.svg);
  width: 20px;
  height: 20px;
}

.menu-header {
  border-bottom: 1px solid var(--lightgrey);
  margin-bottom: 4px;
}

.menu-header > * {
  font-weight: 700;
  font-size: ;
}

/*MEGA MENU*/
.hdr-megamenu {
  width: 100%;
  background-color: var(--light);
  /*! height: 600px; */
  position: fixed;
  top: 64px;
  z-index: -99999;
  transition: 0.3s all ease;
  transform-origin: top center;
  /*! transform: scaleY(0); */
  /*! padding: 32px 0; */
  transform: translateY(-80%);
  opacity: 0;
  pointer-events: none;
}

.hdr-megamenu.active {
  transform: translateY(16px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 6px -4px;
  border-top: 1px solid var(--lightgrey);
  opacity: 1;
  pointer-events: auto;
}

.megamenu {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px;
}

@media only screen and (max-width: 1024px) {
  .megamenu {
    padding: 48px;
  }
}

.menu-trigger {
  position: relative;
}

.menu-trigger > * {
  background-color: var(--white);
  height: 2px;
  width: 17px;
  display: block;
  transition: 0.3s all ease;
}

.menu-trigger span:first-of-type {
}

.menu-trigger span:last-of-type {
  margin-top: 4px;
}

.menu-trigger.trig > *,
.menu-trigger.scroll > * {
  //background-color: var(--dark);
}

.menu-trigger.trig + span,
.menu-trigger.scroll + span {
  //color: var(--dark);
}

.menu-trigger.trig span:first-of-type {
  transform: rotate(-45deg);
}

.menu-trigger.trig span:last-of-type {
  margin-top: 0px;
  transform: rotate(45deg);
  margin-left: 0px;
  margin-top: -2px;
}

#menuclose.hide,
#megamenu.hide {
  display: none;
}

#mobilemenu {
  display: none;
}

@media only screen and (max-width: 1024px) {
  #megamenu {
    display: none;
  }

  #mobilemenu {
    display: flex;
  }
}

.megamenu h4 {
  width: 100%;
  padding-bottom: 8px;
  display: block;
}

.megamenu-items {
  list-style-type: none;
}

.megamenu-item {
  padding: 1px 8px;
  margin-left: 8px;
}

.megamenu-item::marker {
  content: "›";
}

.sm.megamenu-item {
  margin-left: 0;
  padding: 4px 8px 4px 0px;
}

.sm.megamenu-item i {
  margin-right: 8px;
}

.sm.megamenu-item::marker {
  content: "";
}

.megamenu-item > a {
  text-decoration: none;
  color: inherit;
}

.megamenu-item > a:hover {
  font-weight: 700;
}

.megamenu-socialmedia {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.megamenu-socialmedia > a {
  margin-right: 8px;
  font-size: 1.3rem;
}

.megamenu-socialmedia > a:last-of-type {
  margin-right: 0;
}

/*SLIDE MENU*/

.hdr-slidemenu {
}

.slidemenu-search {
  position: relative;
  margin-bottom: 32px;
}

.slidemenu-search input {
  width: 100%;
}

.slidemenu-search input::placeholder {
  color: var(--dark);
  font-weight: 300;
  letter-spacing: 1px;
}

.slidemenu-search::after {
  content: url(../images/search-d.svg);
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  top: 8px;
  filter: invert(1);
}

.menu-accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 1.3rem;
  font-weight: 700;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 0.875rem;
  transition: 0.4s;
}

.menu-accordion:hover {
  background-color: #ccc;
}

.menu-accordion:after {
  content: "\027E9";
  color: #777;
  font-weight: bold;
  float: right;
  margin-right: 5px;
}

.active:after {
  content: "";
}

.menu-panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  list-style-image: url(../images/right-box-angle.svg);
}

.mobile-hdr {
  padding: 16px 32px 0;
  box-sizing: border-box !important;
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  left: -100%;
  background-color: #000;
  z-index: 3;
  transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  /* easeInOutQuart */
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  /* easeInOutQuart */
}

.mobile-hdr.slide {
  left: 0;
}

.mobile-hdr .menu-accordion {
  background-color: unset;
  color: var(--white);
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 0 16px 16px;
}

.mobile-hdr .menu-accordion::after {
  color: var(--lightgrey);
}

.mobile-hdr .menu-panel {
  background-color: unset;
  padding: 0 40px;
  margin: unset;
}

.mobile-menu-item {
  margin-bottom: 16px;
  background-size: 32px;
}

.mobile-menu-item a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--primaryfont);
  font-size: 0.85rem;
  border-bottom: 1px solid #333;
  padding: 0 0 8px;
  display: block;
}

.mobile-menu-item:last-of-type a {
  //border-bottom: unset;
}

.mobile-socialmedia {
}

.mobile-socialmedia .megamenu-item > a {
  color: var(--white);
}

.mobile-hdr div:last-of-type {
  position: absolute;
  bottom: 32px;
  padding-top: 8px;
  box-sizing: border-box;
  width: calc(100% - 64px);
  display: block;
}

.mobile-hdr div:last-of-type::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--lightgrey);
  position: relative;
}

.mobile-hdr div:last-of-type p {
  color: var(--lightgrey);
  font-size: 0.75rem;
}

.mobile-hdr div:last-of-type strong {
  display: block;
  text-transform: uppercase;
}

#slidemenu-close {
  color: #fff;
  top: 12px;
  right: 32px;
  font-size: 1.6rem;
  position: absolute;
  z-index: 3;
}

.mobile-hdr-logo {
  width: 128px;
  height: auto;
  margin-bottom: 32px;
  filter: invert(0) !important;
}

.info-request.sticky-form > input,
.info-request.sticky-form > textarea {
  margin-bottom: 16px;
}

/*SIDEBAR GALLERY*/

.sidebar-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 24px 0;
  width: 100%;
  background-color: var(--white);
  box-shadow: 0 -0.5px 4px -3px rgb(0, 0, 0);
  padding: 32px;
  border-radius: 6px;
  
  >{

  }

  .featured-gallery-info > p{
    font-size: 11px;
  }

  .featured-gallery-info > p:first-of-type{
    font-weight: 700;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    width: calc(100% - 16px);
  }  

  > div > a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
    background-color: transparent;
    border: 1px solid var(--grey);
    border-radius: 4px;
  }

  > div > a:hover{
    background-color: #f9f9f9;
  }



 > div > a:last-of-type{
  margin-bottom: 0;
  }

  >div > a > img{
    width: calc(33% - 8px);
    border-radius: 2px;
  }

  a > div{
    width: calc(66% - 8px);
  }

  .quicklinks.info{
    display: flex;
    justify-content: flex-start;
  }

  .quicklinks.info > a:nth-of-type(2){
    font-weight: 200;
  }
}

.featured-gallery-holder{
  padding: 24px 0 0;
  width: 100%;
}


/*IMAGE MODAL*/

/*MODAL CONTENT CONTENT GRID*/

.modal--content{
  padding: 0;
}

@media only screen and (max-width: 1024px){
  .modal--content{
    padding: 16px;
  }
}

.modal--content.content-grid{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: space-between;
  height: auto;
  overflow-y: scroll;

  > {

  }

  h3{
    display: block;
    width: 100%;
    font-size: 1.3rem;
    margin-bottom: 32px;
    border-bottom: 4px solid var(--dark);
  }

  a{
    width: calc(50% - 16px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    transition: 0.3s all ease;
    border-radius: 4px;
    border: 1px solid var(--grey);
    overflow: hidden;
  }

  a:hover{
    background-color: #f9f9f9;
  }

  a > img{ 
    width: calc(33% - 8px);
  }

  a > div{ 
    width: calc(66% - 8px);
  }

  a > div > p{
    font-size: 11px;
  }

  a > div > p:first-of-type{
    font-weight: 700;
    font-size: 13px;
  }

  a > img {
    aspect-ratio: 4 / 3;
    border-radius: 2px;
  }
}

@media only screen and (max-width: 1024px){
  .modal--content.content-grid {
    & a {
      width: 100%;
    }
  }
}

.content-carousel{
  width: 100%;
}

.content-carousel .carousel-item{
  height: 50vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

  > {

  }

  > span{
    width: 40%;
    display: inline-block;
    margin: 0 16px 16px 0;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0.8;
  }

  > span a{
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background-color: var(--white);
  }

  > span:hover{
    opacity: 1;
  }

  > span a:first-of-type{
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    background-color: var(--darkblue);
    color: var(--white);
  }

  > span a:last-of-type{
    border-top: 1px solid var(--fff);
    font-size: 11px;
    text-align: center;
  }

  > span a:first-of-type:hover{
    background-color: var(--blue);
    color: var(--white);
  }
}

body.intelligence .flickity-page-dots{
  bottom: -20px;
}

@media only screen and (max-width: 1024px){
  .content-carousel .carousel-item{
    height: 32vh;

    > span{
      width: calc(100% - 32px);
      margin: 0 auto 16px;
    }
  }
}

.showmobilefilter{
  display: none;
  pointer-events: none;
}

@media only screen and (max-width: 767px){
  .showmobilefilter{
    pointer-events: all;
    width: calc(100% - 16px);
    margin: 0 auto;
    border-radius: 4px;
    display: block;
    text-align: center;
    font-weight: 700;
    color: var(--white);
    background-color: var(--darkblue);
    padding: 8px;
    margin-bottom: 16px;
    > {
  
    }
  
    > i{
      width: 32px;
    }
  }

  .showmobilefilter.hide{
    width: 100%;
    margin-top: 16px;
    margin-bottom: 0;
  }
}