/* MOTION STYLES HERE *****/
#section1-motion {
  background: #d9e0d0;
  color: #656D56;
  min-height: 100vh;
  border-radius: 12px 12px 0 0;
}
#section2-motion {
	background: #D9E0D0;
  background: linear-gradient(180deg, rgba(217, 224, 208, 1) 0%, rgba(217, 224, 208, 1) 50%, rgba(40, 65, 69, 1) 50%, rgba(40, 65, 69, 1) 100%);
}
#section3-motion {
  background-color: #274144;
  border-radius: 0px 0px 0px 0px;
	margin-top: -1px;
}
#section4-motion {
  position: relative;
  height: 100vh;
  overflow: hidden;
  border-radius: 0 0 0 0;
}
#section5-motion {
	background: #151c15;
  position: relative;
  border-radius: 0 0 0 0;
}
#section6-motion {
	background-color: #151c15;
  border-radius: 0px 0px 12px 12px;
  margin-top: -1px;
}
@media (max-width: 840px) {
	#section1-motion,
	#section6-motion {
		border-radius: 0 0 0 0;
	}
}

#section1-motion .headline-portfolio h1 {
  color: #2f3d46;
}
#section1-motion .headline-motion h1 {
  position: relative;
  color: #2f3d46;
}
#section3-motion .headline-motion h1 {
  position: relative;
  color: #d9e0d0;
}
#section4-motion .headline-motion h1 {
  display: block;
  color: #dbdfd0;
  margin: 4rem auto;
}
#section5-motion .headline-motion h1 {
  display: block;
  color: #d9e0d0;
  margin: 4rem auto;
}


.specialty-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Instrument Sans', arial, tahoma, sans-serif;
}
.specialty-list li {
  margin: 0 0 20px 0;
  font-size: 1.0em;
	color: #656D56;
}
.specialty-list li:first-child {
  font-family: 'lft-etica-mono', monospace;
  font-weight: 200;
  color: #b4bca7;
  text-transform: uppercase;
}

.company-list.motion-list {
    justify-self: left;
}
.company-list.motion-list li:first-child {
    color: #656D56;
    font-weight: 400;
}
.company-list.motion-list li {
    color: #656D56;
}
.company-list.motion-list li:after {
    background-color: #abaea7;
}

h3.overview {
	color: #2f3d46;
  text-transform: uppercase;
  font-size: 1.75em;
  font-family: 'owners-xnarrow', arial, tahoma, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
p.overview {
  font-family: 'lft-etica-mono', monospace;
  font-weight: 200;
  text-transform: uppercase;
}
.overview ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  list-style: none;
}
.overview ul li,
.overview p {
  color: #828a75;
  font-family: "Instrument Sans", sans-serif;
  font-size: 1.0em;
}
.overview ul li:first-child {
  font-family: "lft-etica-mono", sans-serif;
  font-weight: 100;
  text-transform: uppercase;
}
.overview p.overview_title {
  font-family: "lft-etica-mono", sans-serif;
  font-weight: 100;
  text-transform: uppercase;
}

/* FULL WIDTH FEATURED VIDEO ***/
#section4-motion a {
	display: block;
	width: 100%;
	height: 100%;
}
.video-full-width {
	position: relative;
	width: 100%;
	height: 100%;
}
.video-full-width img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-full-width-body {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.video-full-width-title {
  font-size: clamp(4rem, calc(6.0vw + 0.18rem), 6.52rem);
  margin: 0;
  line-height: 1;
	font-family: 'owners-xnarrow', arial, tahoma, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: #ffffff;
}
.video-full-width-body p {
  margin: 0 0 2rem 0;
  color: #a8a4a3;
  font-family: "lft-etica-mono", sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  font-size: .8em;
}

.campaign-title {
  font-family: 'Instrument Sans', arial, helvetica, tahoma, sans-serif;
  color: #303c48;
  font-size: .8em;
  margin: 0 0 10px 0;
  font-weight: 400;
}
#section2-motion .campaign-title {
  color: #d9e2d1;
}
.client-name {
  font-family: 'Instrument Sans', arial, helvetica, tahoma, sans-serif;
  font-weight: 400;
  font-size: .6rem;
}
#section2-motion .client-name {
  color: #fffeff;
}
.client-name span {
  font-family: 'lft-etica-mono', arial, helvetica, tahoma, sans-serif;
  font-weight: 100;
  text-transform: uppercase;
}
#section2-motion .client-name span {
  color: #79888d;
}

#section2 a {
  position: relative;
  display: block;
  height: 100%;
}
.mobile-only {
  display: none;
}
@media (max-width: 840px) {
  .mobile-only {
    display: inline-flex;
  }
  
  .video-info {
    opacity: 1;
    top: calc(100% - 30px);
  }
}

/********** parallax column logos ***********/
.parallax-grid-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 250vh;
}
.parallax-grid-container:before, .parallax-grid-container:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    content: '';
    background: rgb(21, 28, 21);
    width: 100%;
    height: 200px;
    z-index: 2;
}
.parallax-grid-container:before {
    top: 0;
    background: linear-gradient(180deg, rgba(21, 28, 21, 1) 0%, rgba(21, 28, 21, 1) 49%, rgba(21, 28, 21, 0) 100%);
}
.parallax-grid-container:after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(21, 28, 21, 1) 0%, rgba(21, 28, 21, 0.50) 49%, rgba(21, 28, 21, 0) 100%);
}
.parallax-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    will-change: transform;

    border-top: 1px solid #151c15;
    border-bottom: 1px solid #151c15;
}
  
.parallax-column:last-child {
    border-right: none;
}
  
.parallax-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.parallax-image {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    transition: all 0.5s ease;
    filter: grayscale(100%) brightness(1.2);
    opacity: 0.7;
}
  
.parallax-item:hover .logo-image {
    filter: grayscale(0%);
    opacity: 1;
}
  
.parallax-item {
    position: relative;
    display: block;
}

.parallax-video-play img {
    border-radius: 12px;
}
.parallax-video-play .client-info {
    opacity: 0;
    position: relative;
    margin: 15px 0 40px 0;
    color: white;
    transition: all .3s ease;
}
.parallax-video-play:hover .client-info {
    opacity: 1;
}
.parallax-video-play .campaign-title {
    color: #d9dfd1;
}
.parallax-video-play .video-info p {
    color: #e4e6e3;
}
.parallax-video-play .video-info span {
    color: #495049;
}

/* Hide parallax grid on mobile */
@media (max-width: 960px) {
    /* Create a new container for the Swiper carousel */
    .parallax-grid-container {
        position: relative;
        display: block;
        width: 100%;
        height: unset;
        overflow: unset;
    }
    .parallax-column.swiper {
        position: relative;
        flex: none;
        display: block;
        overflow: visible; 
        width: 100%;
        height: auto;
        align-items: center;
        margin: 0 auto;
    }
    .parallax-track.swiper-wrapper {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 800px;
        top: unset;
        left: unset;
    }
    .parallax-item.swiper-slide {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 90vw;
        height: var(--slide-height) !important;
        padding: 0;
        opacity: 0.6;
        transition: opacity 0.3s ease;
        box-sizing: border-box;
    }
    .parallax-item.swiper-slide-active {
        opacity: 1;
    }
}