::selection {
  color: white;
  background-color: #948ECC;
}

body {
  overflow-x: hidden;
}

#productTable td {
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.25rem;
}

.mainBannerTitle {
  font-size: clamp(35px, 4vw, 52px) !important;
}

.mainBannerSubTitle {
  font-size: clamp(36px, 3vw, 45px) !important;
}

.mainCta {
  font-size: clamp(22px, 3vw, 35px) !important;
}

.smallText {
  font-size: clamp(14px, 1.125vw, 12px) !important;
}


.mainImages {
  width: clamp(25px, 5vw, 125px) !important;
  height: clamp(25px, 5vw, 125px) !important;
}

.mainImagesRectangle {
  width: clamp(45px, 5vw, 185px) !important;
  height: clamp(25px, 5vw, 125px) !important;
}

#mainCtaPage {
  padding-top: 50px; 
}

.mainCtaCarouselImage {
  height: 556px;
}

.mainCtaCarousel {
  height: 731px;
}

.main-banner-container {
  padding-top: 165px;
  margin-top: -185px;
}

.navbar-row {
  max-height: 33px;
  margin-bottom: 15px;
}

.nav-container {
  z-index: 999;
}

.contact-button-cta {
  width: 7.5rem;
}

@media (max-width: 1300px) {
  .navbar-row {
    height: 70px;
    max-height: 70px;
    margin-bottom: 0px;
  }

  .puzzle-piece {
    display: none;
  }
}

@media (max-width: 770px) {
  .contact-button-cta {
    margin-left: 0px !important;
  }

  .hide-on-sm {
    display: none !important;
  }

  .navbar-row {
    height: 80px;
    margin-top: -20px;
    margin-bottom: 15px;
  }
  
  #mainCtaPage {
    padding-top: 75px;
  }
  .mainCtaCarouselImage {
    height: 350px;
  }
  .mainCtaCarousel {
    height: 531px;
  }
  
  .grid-services {
    border: none !important;
  }
}

@media (min-width: 770px) {
  .main-text {
    text-wrap: nowrap;
  }

  .puzzle-piece.piece-1 {
    height: 250px;
    transform: rotate(90deg) translateY(-54px);
  }

  .puzzle-piece.piece-2 {
    height: 250px;
    transform: rotate(180deg) translateX(42px) translateY(16px);
  }

  .puzzle-piece.piece-3 {
    height: 250px;
    transform: rotate(0deg) translateX(50px) translateY(-96px);
  }

  .puzzle-piece.piece-4 {
    height: 250px;
    transform: rotate(-90deg) translateX(112px) translateY(-46px);
  }
}

@media (min-width: 1400px) {
  .puzzle-piece.piece-3 {
    height: 250px;
    transform: rotate(0deg) translateX(47px) translateY(-96px);
  }

  .puzzle-piece.piece-4 {
    height: 250px;
    transform: rotate(-90deg) translateX(112px) translateY(-49px);
  }
}

.fade-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
 80% { transform: rotate(0deg); }
 85% { transform: rotate(5deg); }
 95% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.wiggle {
display: inline-block;
animation: wiggle 2.5s infinite;
}

.wiggle:hover {
animation: none;
}

#portfolioContainer {
  padding-top: 100px; 
  padding-bottom: 100px;
}

.ourWorkContainer {
  min-height: 400px;
}

@media (max-width: 770px) {
  #portfolioContainer {
    padding-top: 10px;
  }
}

.losList li::marker {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900; /* Ensure the correct weight is used */
  content: "\f00c";
}

.negativeLosList li::marker {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 600; /* Ensure the correct weight is used */
  content: "\f067";
  font-size: .75rem;
}

.negativeLosList li.finalItem::marker {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900; /* Ensure the correct weight is used */
  content: "\f52c";
  font-size: 1.25rem !important;
}

.lostHighlightText {
  position: relative;
  display: inline-block;
  background-color: #948ECC;
}

.greySecondaryText {
  color: #30313D;
}

.readableParagraph {
  line-height: 1.625 !important;
}

.lightGreySecondaryText {
  color: #D3D3D3;
}

.lightGreyBackground {
  background-color: #D3D3D3;
}

.title-text {
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
}

.topCompaniesImages {
  object-fit: contain;
  max-height: 90px;
  max-width: 90px;
  filter: grayscale(100%);
  transition: filter 0.3s ease; /* Adding transition for smooth effect */
}

.offWhiteBackground {
  background-color: #f1f2f2 !important;
}

.topCompaniesImages:hover {
  filter: grayscale(0%);
}

.imgAsIcon {
  max-height: 4rem;
  max-width: 4rem;

}

* {
  font-family: "Montserrat", sans-serif;
}

h1 {
  margin: 0 !important;
  padding: 0 !important; 
}

.losBackground {
  background-color: #173b6c;
}

.losSecondaryBackground {
  background-color: #948ECC;
}

.losGreenBackground {
  background-color: #439a87;
}

.losPrimaryBtnBackground {
  background-color: #173b6c;
  transition: background-color 0.3s ease;
}

.losPrimaryBtnBackground:hover {
  background-color: #215faf;
  color: white !important;
  transition: background-color 0.3s ease;
}

.losSecondaryBtnBackground {
  background-color: #6c757d;
  transition: background-color 0.3s ease;
}

.losSecondaryBtnBackground:hover {
  background-color: #484E54;
  color: white !important;
  transition: background-color 0.3s ease;
}

.losBtnBackground {
  background-color: #948ECC;
  transition: background-color 0.3s ease;
}

.losBtnBackground:hover {
  background-color: #7975a3;
}

.border-primary {
  border-color: #948ECC !important;
}

.los-border-secondary {
  border-color: #173b6c !important;
}

a:hover {
  color: #948ECC !important;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #948ECC;
}

.losBtnBackground.primaryBackground:hover {
  background-color: #706B9E;
  color: white !important;
}

.losSecondaryText {
  color: #948ECC;
}

.losSecondaryFont {
  font-family: 'Literata', serif !important;
}

.losColor {
  color: #173b6c;
}

.losGreenColor {
  color: #439a87;
}

.losGreenBhColor {
  color: #439a87;
}

.losFancyBackground {
  position: relative;
  background-color: #173b6c;
}

.losFancyBackground:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.losFancyBackground:hover:before {
  opacity: 1;
}

.related-page-col {
  min-height: 200px;
}

.info-container {
  min-height: 348px;
}

.smaller-info-container {
  min-height: 248px;
}

.black-and-white {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.close.fileinput-remove {
  display: none;
} 

.innards {
  position: relative;
  z-index: 1;
}

.transparent {
  background-color: hsla(0, 0%, 0%, 0);
}

.losColor {
  color: #173b6c;
}

.nav-tabs .nav-link.active {
  color: #173b6c !important;
}

.nav-tabs .nav-link {
  color: #706B9E !important;
}

.losUnderline {
  text-decoration: underline;
  text-decoration-color: #948ECC;
}

.losUnderlineSecondary {
  text-decoration: underline;
  text-decoration-color: #173b6c;
}

blockquote {
  margin: 24px;
  padding: 8px 24px;
  border-left: 4px solid #ccc;
  background: #f9f9f9;
}

.nav-link {
  cursor: pointer;
}

hr.style-five {
  border: 0;
  height: 0;
  /* Firefox... */
  box-shadow: 0 0 10px 1px black;
}

hr.style-five:after {
  /* Not really supposed to work, but does */
  content: "\00a0";
  /* Prevent margin collapse */
}

/* Gradient transparent - color - transparent */

hr.style-two {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.bg-primary {
  background-color: #948ECC !important;
}

.slick-slide {
  text-align: center;
}

a {
  cursor: pointer;
}

.ourwork-portfolio-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 40vw;
  height: 500px;
  min-width: 350px
}

#videoColumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#video {
  object-fit: cover;
}

/* COVERFLOW CSS */
.coverflow {
  height: 100px;
  border-bottom: solid 2px black;
}

.coverflow .cover {
  width: 100px;
  height: 100px;
  cursor: pointer;
  font-size: 500%;
  border: solid 2px black;
  text-align: center;

  background: #e2e2e2;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2QxZDFkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWZlZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0);
  /* IE6-8 */
}

.coverflow .cover.current {
  opacity: 1;
  border-bottom: none;

  box-shadow: 0 0 16px rgba(0, 0, 0, .5);

  background: #ffffff;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f3f3f3), color-stop(51%, #ededed), color-stop(100%, #ffffff));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  /* IE6-8 */
}

.coverflow .cover.current:after {
  content: ' ';
  background-color: white;
  display: block;
  position: absolute;
  width: 132px;
  height: 16px;
  left: -16px;
  bottom: -16px;
}

/* CD covers */
.photos .cover {
  cursor: pointer;
  /*-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, .5)));*/
}

#photos-info {
  position: relative;
  text-align: center;
  z-index: 1000;
  text-shadow: 0 0 8px white;
}

#photos-name {
  font-size: 200%;
  font-weight: bold;
}

.clearfix {
  clear: both;
}

.carousel {
  height: 50%;
  width: 80%;

  left: 10%;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.imac {
  /* width: 300px; */
  perspective: 250px;
  position: relative;
}

.screen {
  height: 260px;
  background-size: cover;
  box-sizing: border-box;
  border: 24px solid black;
  border-top: 32px solid black;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.facetime__camera  {
  background: #222;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: -21px;
}

.chin {
  height: 54px;
  background: #dadada;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.logo {
  width: 2em;
  display: block;
  margin: 0 auto;
  transform: translatey(12px);
}

.stand {
  margin: 0 auto;
  width: 120px;
  height: 80px;
  background: linear-gradient(to bottom, #c1c1c1, #EFEFEF);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  transform: rotatex(100deg);
  margin-top: -26px;
  box-shadow: 0 4px 0 0 #D5D5D5;
}

#top-left-invisible-cell { 
  border-left: 1px solid transparent !important; 
  border-top: 1px solid transparent !important; 
  border-right: none !important; 
  border-bottom: none !important; 
} 

.far.fa-plus-square[data-table-expand]:hover {
  cursor: pointer;
}

.puzzle-container {
  position: sticky;
  top: 33vh; /* Sticks at the center of the viewport */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.cta-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: 50px;
  padding: .75rem 1.25rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-btn:hover {
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .2);
}

.cta-btn i {
  font-size: 1.8rem;
}

@media (max-width: 576px) {
  .cta-btn {
    padding: .45rem .8rem;
    font-size: .9rem;
  }

  .cta-btn i {
    font-size: 1.3rem;
  }
}