/*---------TEAM HEADER SECTION-----------*/
.teamHeaderHeader {
  color: #4b2d7c;
  font-size: 4.7vw;
  font-style: normal;
  font-weight: 700;
  line-height: 6vw;
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: 3.5vw;
  margin-top: -4vw;
}

.teamHeaderSection {
  height: 42vw;
}

.teamHeaderBackground {
  position: absolute;
  width: 70vw;
}

.teamHeaderBackgroundMobile {
  display: none;
}

.teamHeaderContentBox {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 60vw;
  margin: 0 auto;
  padding-top: 5vw;
  align-items: center;
}

/*------HEADER IMAGE--------*/
.teamHeaderImage {
  width: 17.472vw;
  margin-top: -6.3vw;
  position: absolute;
  margin-left: 3.1vw;
}

.teamHeaderLightBG {
  position: absolute;
  width: 19.9vw;
  margin-top: -7.9vw;
  margin-left: 2.2vw;
  transition: all 0.5s ease;
}

/*.teamHeaderImageWrapper:hover .teamHeaderLightBG {
  filter: grayscale(0.6) brightness(1.07);
}*/

.teamHeaderLines {
  position: absolute;
  width: 3.8vw;
  margin-top: -1.5vw;
  margin-left: 0.2vw;
}

.teamHeaderRedSquare {
  position: absolute;
  width: 2.3vw;
  margin-left: 19.1vw;
  margin-top: -1.7vw;
}

.teamHeaderPartyEmj {
  position: absolute;
  width: 2.5vw;
  margin-left: 5.5vw;
  margin-top: -7.2vw;
  transform-origin: bottom left;
}
/*--------------------------*/

.teamHeaderTextWrapper {
  width: 28vw;
  margin-right: 3vw;
}

.teamHeaderTextHead {
  font-size: 2.25vw;
  font-style: normal;
  font-weight: 700;
  line-height: 3vw;
  text-align: left;
  color: #242424;
  margin-bottom: 1.5vw;
}

.teamHeaderTextParagraph {
  font-size: 0.84vw;
  font-style: normal;
  line-height: 1.4vw;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 1vw;
}

.teamHeaderTextParagraph2 {
  width: 27vw;
}

.teamBoldSpan {
  font-weight: 700;
}
/*----------TEAM PORTFOLIO SECTION---------*/
.teamPortroliosSection {
  margin-bottom: 10vw;
}

.teamPortfolioWrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8vw;
}

.teamPortfolioImageWrapper {
  margin-left: 1vw;
}

/*------PORTFOLIO IMAGE--------*/

/*-------IMAGE 1------------*/
.teamPortfolioImage1 {
  image-rendering: -webkit-optimize-contrast;
  margin-top: -3.1vw;
  margin-left: -1vw;
  width: 27.5vw;
  position: absolute;
}

.teamPortfolioImage1LittleSquare {
  image-rendering: -webkit-optimize-contrast;
  margin-top: 1vw;
  margin-left: 25vw;
  width: 1vw;
  position: absolute;
}

.teamPortfolioImage1RedSquare {
  image-rendering: -webkit-optimize-contrast;
  margin-top: 1.55vw;
  margin-left: 22.2vw;
  width: 1.9vw;
  position: absolute;
}

.teamPortfolioImage1BigSquare {
  image-rendering: -webkit-optimize-contrast;
  margin-top: 4.8vw;
  margin-left: 1.9vw;
  width: 1.2vw;
  position: absolute;
}

.teamPortfolioImage1RedCircle {
  image-rendering: -webkit-optimize-contrast;
  margin-top: 6.6vw;
  margin-left: -1.2vw;
  width: 3.2vw;
  position: absolute;
}

.teamPortfolioImageBackground {
  width: 27.55vw;
  position: absolute;
  margin-left: -0.5vw;
}

.teamPortfolioImage1Facebook,
.teamPortfolioImage1LinkedIn {
  background-size: 250% auto;
  color: white;
  background-image: linear-gradient(
    to right,
    #000000 0%,
    #000000 40%,
    #b91a76 60%,
    #c41771 69%,
    #4b2d7c 100%
  );
  text-align: right;
  margin-left: 24.6vw;
  border-radius: 0.5vw;
  height: 2.7vw;
  width: 5vw;
  position: absolute;
  cursor: pointer;
  transition: all 0.3s ease;
}

.teamPortfolioImage1Facebook {
  margin-top: 10vw;
}
.teamPortfolioImage1LinkedIn {
  margin-top: 13.7vw;
}

.teamPortfolioImage1Facebook:hover,
.teamPortfolioImage1LinkedIn:hover {
  margin-left: 25.3vw;
  background-position: right center;
  background-image: linear-gradient(
    to right,
    #000000 0%,
    #4b2d7c 30%,
    #862379 40%,
    #e50d63 60%,
    #c41771 70%,
    #b91a76 80%,
    #862379 90%,
    #4b2d7c 100%
  );
}

.teamPortfolioImageFacebookIcon {
  image-rendering: -webkit-optimize-contrast;
  margin-top: 0.4vw;
  margin-right: 0.6vw;
  width: 1.8vw;
}

/*--------IMAGE 2---------*/

.teamPortfolio2ImageBackground {
  position: absolute;
  image-rendering: -webkit-optimize-contrast;
  width: 27.7vw;
  margin-left: -27.5vw;
  margin-top: -0.8vw;
}

.teamPortfolio2RedRect {
  display: block;
  position: absolute;
  image-rendering: -webkit-optimize-contrast;
  width: 1.8vw;
  margin-left: -24.9vw;
  margin-top: 0.2vw;
}

.teamPortfolio2RedRectMobile,
.teamPortfolio2LittleSquareMobile {
  display: none;
}

.teamPortfolio2LittleSquare {
  position: absolute;
  image-rendering: -webkit-optimize-contrast;
  width: 1.21vw;
  margin-left: -4.8vw;
  margin-top: 7.85vw;
}

.teamPortfolio2Lines {
  position: absolute;
  image-rendering: -webkit-optimize-contrast;
  width: 2.7vw;
  margin-left: -1.8vw;
  margin-top: 4.9vw;
}

.teamPortfolio2Image {
  position: absolute;
  image-rendering: -webkit-optimize-contrast;
  width: 24.1vw;
  margin-left: -25.25vw;
  margin-top: -3.09vw;
}

.teamPortfolioImage2Facebook,
.teamPortfolioImage2LinkedIn {
  background-size: 250% auto;
  color: white;
  background-image: linear-gradient(to right, #000000 0%, #000000 100%);
  text-align: left;
  margin-left: -30vw;
  border-radius: 0.5vw;
  height: 2.7vw;
  width: 5vw;
  position: absolute;
  cursor: pointer;
  transition: all 0.3s ease;
}

.teamPortfolioImage2Facebook {
  margin-top: 10vw;
}
.teamPortfolioImage2LinkedIn {
  margin-top: 13.7vw;
}

.teamPortfolioImage2Facebook:hover,
.teamPortfolioImage2LinkedIn:hover {
  margin-left: -30.8vw;
  background-position: right center;
  background-image: linear-gradient(
    to right,
    #000000 0%,
    #4b2d7c 60%,
    #862379 70%,
    #e50d63 100%
  );
}

.teamPortfolioImageFacebookIcon {
  image-rendering: -webkit-optimize-contrast;
  margin-top: 0.4vw;
  margin-right: 0.6vw;
  margin-left: 0.6vw;
  width: 1.8vw;
}
/*--------IMAGE 3---------*/
.teamPortfolio3ImageBackground {
  image-rendering: -webkit-optimize-contrast;
  width: 27.5vw;
  position: absolute;
  margin-left: -0.5vw;
  margin-top: -0.7vw;
}

.teamPortfolio3TriangleWrapper {
  overflow: hidden;
  width: 4.1vw;
  position: absolute;
  margin-left: -1.1vw;
  margin-top: 5.4vw;
  max-height: 4vw;
}

.teamPortfolio3Triangle {
  image-rendering: -webkit-optimize-contrast;
  width: 4.1vw;
  margin-top: 0.3vw;
}

.teamPortfolio3TriangleHidden {
  margin-top: 10vw;
}

.teamPortfolio3Plus {
  image-rendering: -webkit-optimize-contrast;
  width: 1.4vw;
  position: absolute;
  margin-left: 21.7vw;
  margin-top: 0.9vw;
}

.teamPortfolio3Rect {
  image-rendering: -webkit-optimize-contrast;
  width: 1.2vw;
  position: absolute;
  margin-left: 23.7vw;
  margin-top: 3.2vw;
}

.teamPortfolio3Image {
  image-rendering: -webkit-optimize-contrast;
  margin-top: -2.85vw;
  margin-left: 0.8vw;
  width: 23.9vw;
  position: absolute;
}
/*------------------------*/

.teamPortfolioTextWrapper {
  width: 33.5vw;
  margin-top: 2.1vw;
}

.teamPortfolioName {
  font-size: 2.2vw;
  font-weight: 700;
  line-height: 4vw;
  text-align: left;
}

.teamPortfolioJob {
  font-size: 1vw;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5vw;
  text-align: left;
  margin-bottom: 1.5vw;
  margin-top: 0.5vw;
}

.teamPortfolioJobImage {
  image-rendering: crisp-edges;
  width: 1vw;
  margin-left: 0.3vw;
  margin-top: -0.1vw;
}

.teamPortfolioText {
  font-size: 0.84vw;
  font-style: normal;
  line-height: 1.4vw;
  text-align: left;
  margin-bottom: 1vw;
}

.mobileBreak {
  display: none;
}

footer {
  padding-top: 5vw;
}
/*------------------------------*/
/*----------MOBILE VERSION------*/

@media screen and (max-width: 1023px) {
  .mobileBreak {
    display: block;
  }

  footer {
    padding-top: 22.222vw;
  }
  /*----------MOBILE HEADER-------*/
  .teamHeaderHeader {
    margin-bottom: 11.111vw;
    margin-top: 16.667vw;
    font-size: 13.333vw;
    line-height: 20vw;
  }

  .teamHeaderSection {
    height: 262.222vw;
  }

  .teamHeaderBackgroundMobile {
    position: absolute;
    display: block;
    width: 91.111vw;
  }

  .teamHeaderBackground {
    display: none;
  }

  .teamHeaderContentBox {
    justify-content: space-between;
    flex-direction: column;
    width: 83.333vw;
    margin: 0 4.167vw;
    padding-top: 5vw;
  }

  /*------HEADER MOBILE IMAGE--------*/
  .teamHeaderImageWrapper {
    padding-top: 13.889vw;
    height: 61.667vw;
  }

  .teamHeaderImage {
    width: 66.133vw;
    margin-top: 6.111vw;
    margin-left: -31.431vw;
  }

  .teamHeaderLightBG {
    margin-top: 0vw;
    margin-left: -36vw;
    width: 74.928vw;
    filter: grayscale(0.6) brightness(1.07);
  }

  .teamHeaderLines {
    width: 15.525vw;
    margin-top: 23.194vw;
    margin-left: -43.256vw;
  }

  .teamHeaderRedSquare {
    width: 8.3vw;
    margin-left: 29.8vw;
    margin-top: 23.5vw;
  }

  .teamHeaderPartyEmj {
    width: 9.642vw;
    margin-left: -22.9vw;
    margin-top: 2.5vw;
  }
  /*------TEAM HEADER MOBILE TEXT---------*/
  .teamHeaderTextWrapper {
    width: 82.222vw;
    margin-right: 0vw;
    margin-top: 8.333vw;
  }

  .teamHeaderTextHead {
    font-size: 8.889vw;
    line-height: 13.333vw;
    margin-bottom: 11.111vw;
  }

  .teamHeaderTextParagraph {
    font-size: 3.889vw;
    line-height: 6.389vw;
    margin-bottom: 5.556vw;
    letter-spacing: 0vw;
  }

  .teamHeaderTextParagraph2 {
    width: 82.222vw;
  }

  .teamBoldSpan {
    letter-spacing: -0.1vw;
  }

  /*----------TEAM PORTFOLIO SECTION---------*/
  .teamPortroliosSection {
    margin-bottom: 46.111vw;
    margin-top: 33.333vw;
  }

  .teamPortfolioWrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 8vw;
  }

  .teamPortfolioImageWrapper {
    margin-left: 1.508vw;
    height: 66.111vw;
  }

  /*-------MOBILE IMAGE 1------------*/
  .teamPortfolioImage1 {
    margin-top: -9vw;
    margin-left: -1.944vw;
    width: 79.883vw;
  }

  .teamPortfolioImage1LittleSquare {
    margin-top: 3.333vw;
    margin-left: 74.317vw;
    width: 2.625vw;
  }

  .teamPortfolioImage1RedSquare {
    margin-top: 4.444vw;
    margin-left: 65.708vw;
    width: 5.278vw;
  }

  .teamPortfolioImage1BigSquare {
    margin-top: 14.722vw;
    margin-left: 7.536vw;
    width: 3.611vw;
  }

  .teamPortfolioImage1RedCircle {
    margin-top: 20.278vw;
    margin-left: -1.944vw;
    width: 9.044vw;
    position: absolute;
  }

  .teamPortfolioImageBackground {
    width: 79.883vw;
    margin-left: 0vw;
  }

  .teamPortfolioImage1Facebook,
  .teamPortfolioImage1LinkedIn {
    background-size: 250% auto;
    color: white;
    background-image: linear-gradient(
      to right,
      #000000 0%,
      #000000 40%,
      #b91a76 60%,
      #c41771 69%,
      #4b2d7c 100%
    );
    margin-left: 70.278vw;
    border-radius: 1.923vw;
    height: 10vw;
    width: 19.444vw;
  }

  .teamPortfolioImage1Facebook {
    margin-top: 20vw;
  }
  .teamPortfolioImage1LinkedIn {
    margin-top: 34.5vw;
  }

  .teamPortfolioImage1Facebook:hover,
  .teamPortfolioImage1LinkedIn:hover {
    margin-left: 70.278vw;
    background-position: right center;
    background-image: linear-gradient(
      to right,
      #000000 0%,
      #4b2d7c 30%,
      #862379 40%,
      #e50d63 60%,
      #c41771 70%,
      #b91a76 80%,
      #862379 90%,
      #4b2d7c 100%
    );
  }

  .teamPortfolioImageFacebookIcon {
    image-rendering: -webkit-optimize-contrast;
    margin-top: 1.667vw;
    margin-right: 2.222vw;
    width: 6.389vw;
  }

  /*-------MOBILE IMAGE 2------------*/
  .teamPortfolio2Wrapper {
    flex-direction: column-reverse;
  }

  .teamPortfolio2ImageBackground {
    width: 79.883vw;
    margin-left: 0vw;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  .teamPortfolio2RedRect {
    display: none;
  }

  .teamPortfolio2RedRectMobile {
    display: block;
    position: absolute;
    image-rendering: -webkit-optimize-contrast;
    margin-top: 2.222vw;
    margin-left: 68.056vw;
    width: 5.278vw;
  }

  .teamPortfolio2LittleSquare {
    display: none;
  }

  .teamPortfolio2LittleSquareMobile {
    display: block;
    position: absolute;
    image-rendering: -webkit-optimize-contrast;
    width: 3.611vw;
    margin-left: 11.278vw;
    margin-top: 24.167vw;
  }

  .teamPortfolio2Lines {
    width: 7.536vw;
    margin-left: -1.8vw;
    margin-top: 15.556vw;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  .teamPortfolio2Image {
    margin-top: -7.3vw;
    margin-left: 4.167vw;
    width: 69.333vw;
  }

  .teamPortfolioImage2Facebook,
  .teamPortfolioImage2LinkedIn {
    background-size: 250% auto;
    color: white;
    text-align: right;
    background-image: linear-gradient(
      to right,
      #000000 0%,
      #000000 40%,
      #b91a76 60%,
      #c41771 69%,
      #4b2d7c 100%
    );
    margin-left: 70.278vw;
    border-radius: 1.923vw;
    height: 10vw;
    width: 19.444vw;
  }

  .teamPortfolioImage2Facebook {
    margin-top: 20vw;
  }
  .teamPortfolioImage2LinkedIn {
    margin-top: 34.5vw;
  }

  .teamPortfolioImage2Facebook:hover,
  .teamPortfolioImage2LinkedIn:hover {
    margin-left: 70.278vw;
    background-position: right center;
    background-image: linear-gradient(
      to right,
      #000000 0%,
      #4b2d7c 30%,
      #862379 40%,
      #e50d63 60%,
      #c41771 70%,
      #b91a76 80%,
      #862379 90%,
      #4b2d7c 100%
    );
  }

  /*-------MOBILE IMAGE 3------------*/
  .teamPortfolio3ImageBackground {
    width: 79.883vw;
    margin-left: 0vw;
    margin-top: 0vw;
  }

  .teamPortfolio3TriangleWrapper {
    width: 11.869vw;
    margin-left: -1.9vw;
    margin-top: 17.778vw;
    max-height: 10.833vw;
  }

  .teamPortfolio3Triangle {
    image-rendering: -webkit-optimize-contrast;
    width: 11.869vw;
    margin-top: 0.3vw;
  }

  .teamPortfolio3TriangleHidden {
    margin-top: 30vw;
  }

  .teamPortfolio3Plus {
    width: 3.889vw;
    margin-left: 63.889vw;
    margin-top: 4.444vw;
  }

  .teamPortfolio3Rect {
    width: 3.611vw;
    margin-left: 69.167vw;
    margin-top: 10.833vw;
  }

  .teamPortfolio3Image {
    margin-top: -6vw;
    margin-left: 3.611vw;
    width: 69.333vw;
  }

  /*------TEAM MOBILE TEXT---------*/

  .teamPortfolioTextWrapper {
    width: 91.111vw;
    margin-top: 1.389vw;
  }

  .teamPortfolioName {
    font-size: 8.889vw;
    line-height: 13.333vw;
  }

  .teamPortfolioJob {
    font-size: 4.444vw;
    line-height: 6.667vw;
    margin-top: 2.222vw;
  }

  .teamPortfolioJobImage {
    width: 4.444vw;
    margin-left: 1.667vw;
    margin-top: -0.833vw;
  }

  .teamPortfolioText {
    font-size: 3.889vw;
    line-height: 6.389vw;
    margin-bottom: 16.667vw;
    margin-top: 8.333vw;
  }
}
/*--------ANIMATIONS------------*/
.hiddenClass {
  display: none;
}

@keyframes showHeaderTriangle {
  0% {
    margin-left: 4vw;
  }

  100% {
    margin-left: 0.2vw;
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(12deg);
  }
  20% {
    transform: rotate(-6deg);
  }
  30% {
    transform: rotate(12deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(8deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes showPortfolioTriangle {
  0% {
    margin-top: 4vw;
  }

  100% {
    margin-top: 0.3vw;
  }
}

@media screen and (max-width: 1023px) {
  @keyframes showHeaderTriangle {
    0% {
      margin-left: -28vw;
    }

    100% {
      margin-left: -43.256vw;
    }
  }

  @keyframes showPortfolioTriangle {
    0% {
      margin-top: 13vw;
    }

    100% {
      margin-top: 0.3vw;
    }
  }
}

.showHeaderTriangleAnimationClass {
  animation: showHeaderTriangle 2s 1;
}

.shakeAnimationClass {
  animation: shake 2.5s 1;
}

.showPortfolioTriangleAnimationClass {
  animation: showPortfolioTriangle 1.9s 1;
}