.textAlignRight {
  text-align: right;
}

html {
  height: max-content;
  background: linear-gradient(to right bottom, rgb(21, 30, 45), rgb(131, 201, 90) 70%);
  font-family: Poppins, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  overflow-x: hidden;
}

.buttonIcon {
  width: 100%;
  min-width: 40px;
  max-width: 60px;
  aspect-ratio: 1/1;
  cursor: pointer;
}

.filterInvertColor {
  transition: filter 0.5s;
  filter: invert(1);
}
.filterInvertColor:hover {
  filter: invert(0);
}

.videoGradientBackground {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 200%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 100%);
}

.videoBackground {
  position: absolute;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: auto;
}

.sectionPresentation {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: transparent;
  color: rgb(236, 235, 228);
  display: grid;
  align-items: center;
}
@media screen and (max-width: 1150px) {
  .sectionPresentation {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionPresentation {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionPresentation {
    padding: 15% 10%;
  }
}

.presentationTitle {
  justify-self: center;
  padding: 2%;
  z-index: 1;
}
@media screen and (min-width: 1150px) {
  .presentationTitle {
    width: 80%;
  }
}

.presentationTitleText {
  display: grid;
  grid-template-rows: auto;
  margin-left: 5%;
  margin-bottom: 5%;
}
.presentationTitleText > span {
  margin: 2% 0;
  letter-spacing: 0;
}

.presentationTitleTextUp {
  font-size: 40px;
  text-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);
  letter-spacing: 0;
  font-weight: bold;
}
@media screen and (max-width: 525px) {
  .presentationTitleTextUp {
    font-size: 230%;
  }
}

.presentationTitleTextDown {
  line-height: 44px;
  font-size: 1.4vw;
}
@media (max-width: 1150px) {
  .presentationTitleTextDown {
    font-size: 2.5vw;
  }
}
@media (max-width: 850px) {
  .presentationTitleTextDown {
    font-size: 3vw;
  }
}
@media (max-width: 600px) {
  .presentationTitleTextDown {
    font-size: 4.5vw;
  }
}
@media (max-width: 300px) {
  .presentationTitleTextDown {
    font-size: 6vw;
  }
}

.presentationTitleButtons {
  display: flex;
  flex-flow: row nowrap;
  gap: 2%;
  justify-content: flex-start;
  margin-left: 5%;
}
.presentationTitleButtons > button {
  padding: 1.5rem 2.5rem;
  border: 0.3rem solid rgb(131, 201, 90);
  border-radius: 2rem;
  text-decoration: none;
  font: 700 0.875rem/0 "Open Sans", sans-serif;
  font-size: 15px;
  transition: all 0.2s;
  max-height: 45px;
  white-space: nowrap;
  margin-right: 10%;
}
@media screen and (max-width: 1150px) {
  .presentationTitleButtons > button {
    margin-right: 5%;
  }
}
@media screen and (max-width: 600px) {
  .presentationTitleButtons > button {
    padding: 1rem 2rem;
    font-size: 13px;
    max-height: 40px;
    margin-right: unset;
  }
}
@media screen and (max-width: 525px) {
  .presentationTitleButtons > button {
    padding: 4% 7%;
    font-size: 95%;
    max-height: 40px;
  }
}

.presentationTitleButtonDiscover {
  background-color: rgb(131, 201, 90);
  color: rgb(72, 72, 70);
  filter: drop-shadow(2px 2px 5px rgb(42, 46, 51));
  -webkit-filter: drop-shadow(2px 2px 5px rgb(68, 80, 17));
}
.presentationTitleButtonDiscover:hover {
  background-color: transparent;
  color: rgb(131, 201, 90);
  filter: drop-shadow(0px 0px 0px rgb(42, 46, 51));
  -webkit-filter: drop-shadow(0px 0px 0px rgb(42, 46, 51));
}

.presentationTitleButtonLetsTalk {
  background-color: transparent;
  color: rgb(131, 201, 90);
  filter: drop-shadow(0px 0px 0px rgb(42, 46, 51));
  -webkit-filter: drop-shadow(0px 0px 0px rgb(42, 46, 51));
}
.presentationTitleButtonLetsTalk:hover {
  background-color: rgb(131, 201, 90);
  color: rgb(72, 72, 70);
  filter: drop-shadow(2px 2px 5px rgb(42, 46, 51));
  -webkit-filter: drop-shadow(2px 2px 5px rgb(68, 80, 17));
}

@media screen and (min-width: 1150px) {
  .sectionPresentation {
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: unset;
  }
}
@media screen and (max-width: 1150px) {
  .sectionPresentation {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
  }
}
@media screen and (max-width: 525px) {
  .sectionPresentation {
    grid-template-columns: unset;
    grid-template-rows: 1fr auto auto;
    gap: unset;
  }
}
@media screen and (max-width: 355px) {
  .presentationTitleTextUp {
    font-size: 200%;
  }
  .presentationTitleButtons {
    flex-flow: column nowrap;
    align-content: center;
    justify-content: center;
    gap: unset;
    margin: unset;
  }
  .presentationTitleButtons > button {
    margin: 1%;
    padding: 2% 3.5%;
    font-size: 70%;
    max-height: 20px;
  }
}
.sectionMulti {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: rgb(236, 235, 228);
  color: rgb(21, 30, 45);
  display: grid;
  align-items: center;
}
@media screen and (max-width: 1150px) {
  .sectionMulti {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionMulti {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionMulti {
    padding: 15% 10%;
  }
}
@media screen and (min-width: 1150px) {
  .sectionMulti {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: unset;
  }
}
@media screen and (max-width: 1150px) {
  .sectionMulti {
    grid-template-columns: unset;
    grid-template-rows: 1fr auto;
  }
}

.multiTitle {
  justify-self: center;
  padding: 2%;
  z-index: 1;
}
@media screen and (min-width: 1150px) {
  .multiTitle {
    width: 80%;
  }
}
@media screen and (min-width: 1150px) {
  .multiTitle {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .multiTitle {
    order: 2;
  }
}

.multiTitleText {
  display: grid;
  grid-template-rows: auto;
  margin-left: 5%;
  margin-bottom: 5%;
}
.multiTitleText > span {
  margin: 3%;
}
@media screen and (max-width: 525px) {
  .multiTitleText > span {
    margin: 5%;
  }
}

.multiTitleLittleText {
  text-transform: uppercase;
}

.multiTitleTextUp {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: 0;
}
@media screen and (max-width: 525px) {
  .multiTitleTextUp {
    font-size: 300%;
  }
}
@media screen and (max-width: 355px) {
  .multiTitleTextUp {
    font-size: 200%;
  }
}

.multiTitleTextDown {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 20px;
}
@media screen and (max-width: 600px) {
  .multiTitleTextDown {
    line-height: 24px;
  }
}
@media screen and (max-width: 525px) {
  .multiTitleTextDown {
    font-size: 123%;
  }
}
@media screen and (max-width: 355px) {
  .multiTitleTextDown {
    font-size: 90%;
  }
}

.multiTitleTextDownGrid {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 20px;
  display: grid;
  grid-template-rows: unset;
  grid-template-columns: 20% 80%;
  align-items: center;
  justify-items: left;
}
@media screen and (max-width: 600px) {
  .multiTitleTextDownGrid {
    line-height: 24px;
  }
}
@media screen and (max-width: 525px) {
  .multiTitleTextDownGrid {
    font-size: 123%;
  }
}
@media screen and (max-width: 355px) {
  .multiTitleTextDownGrid {
    font-size: 90%;
  }
}
.multiTitleTextDownGrid > img {
  width: 50%;
}
@media screen and (max-width: 600px) {
  .multiTitleTextDownGrid {
    gap: 5%;
  }
  .multiTitleTextDownGrid > img {
    width: 100%;
  }
}

.multiTitleButtons {
  display: flex;
  flex-flow: row nowrap;
  gap: 2%;
  justify-content: left;
  margin-left: 5%;
}
.multiTitleButtons > button {
  margin: 2%;
}
@media screen and (max-width: 525px) {
  .multiTitleButtons > button {
    padding: 1rem 2rem;
    font-size: 13px;
    max-height: 40px;
  }
}

.multiTitleButtonReadMore {
  color: rgb(21, 30, 45);
  -webkit-text-stroke-color: rgb(21, 30, 45);
  background-color: rgba(21, 30, 45, 0.2);
  border-style: none;
  border-color: rgb(21, 30, 45);
  transition: all 0.5s;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1em;
  cursor: pointer;
}
.multiTitleButtonReadMore:hover {
  color: rgb(236, 235, 228);
  background-color: rgb(21, 30, 45);
  box-shadow: inset 0 0 0 1.5px rgb(21, 30, 45);
}
@media screen and (min-width: 1150px) {
  .multiTitleButtonReadMore {
    padding: 2%;
  }
}
@media screen and (max-width: 1150px) {
  .multiTitleButtonReadMore {
    padding: 3%;
  }
}

.pictureMultiPresentation {
  min-width: 500px;
  justify-self: center;
}
@media screen and (min-width: 1150px) {
  .pictureMultiPresentation {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .pictureMultiPresentation {
    width: 50%;
    order: 1;
  }
}
@media screen and (max-width: 525px) {
  .pictureMultiPresentation {
    width: 100%;
    min-width: unset;
  }
}

.imgMultiPresentation {
  width: 100%;
  aspect-ratio: auto;
}

.sectionEvents {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: rgb(229, 229, 223);
  color: rgb(21, 30, 45);
  display: grid;
  align-items: center;
}
@media screen and (max-width: 1150px) {
  .sectionEvents {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionEvents {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionEvents {
    padding: 15% 10%;
  }
}
@media screen and (min-width: 1150px) {
  .sectionEvents {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: unset;
  }
}
@media screen and (max-width: 1150px) {
  .sectionEvents {
    grid-template-columns: unset;
    grid-template-rows: 1fr auto;
  }
}

.eventsTitle {
  justify-self: center;
  padding: 2%;
  z-index: 1;
}
@media screen and (min-width: 1150px) {
  .eventsTitle {
    width: 80%;
  }
}
@media screen and (min-width: 1150px) {
  .eventsTitle {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .eventsTitle {
    order: 2;
  }
}

.eventsTitleText {
  display: grid;
  grid-template-rows: auto;
  margin-left: 5%;
  margin-bottom: 5%;
}
.eventsTitleText > span {
  margin: 3%;
}
@media screen and (max-width: 525px) {
  .eventsTitleText > span {
    margin: 5%;
  }
}

.eventsTitleLittleText {
  text-transform: uppercase;
}

.eventsTitleTextUp {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: 0;
}
@media screen and (max-width: 525px) {
  .eventsTitleTextUp {
    font-size: 300%;
  }
}
@media screen and (max-width: 355px) {
  .eventsTitleTextUp {
    font-size: 200%;
  }
}

.eventsTitleTextDown {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 20px;
  display: grid;
  grid-template-rows: unset;
  grid-template-columns: 20% 80%;
  align-items: center;
  justify-items: left;
}
@media screen and (max-width: 600px) {
  .eventsTitleTextDown {
    line-height: 24px;
  }
}
@media screen and (max-width: 525px) {
  .eventsTitleTextDown {
    font-size: 123%;
  }
}
@media screen and (max-width: 355px) {
  .eventsTitleTextDown {
    font-size: 90%;
  }
}
.eventsTitleTextDown > img {
  width: 50%;
}
@media screen and (max-width: 600px) {
  .eventsTitleTextDown {
    gap: 5%;
  }
  .eventsTitleTextDown > img {
    width: 100%;
  }
}

.eventsTitleButtons {
  display: flex;
  flex-flow: row nowrap;
  gap: 2%;
  justify-content: left;
  margin-left: 5%;
}
.eventsTitleButtons > button {
  margin: 2%;
}
@media screen and (max-width: 525px) {
  .eventsTitleButtons > button {
    padding: 1rem 2rem;
    font-size: 13px;
    max-height: 40px;
  }
}

.eventsTitleButtonReadMore {
  color: rgb(21, 30, 45);
  -webkit-text-stroke-color: rgb(21, 30, 45);
  background-color: rgba(21, 30, 45, 0.2);
  border-style: none;
  border-color: rgb(21, 30, 45);
  transition: all 0.5s;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1em;
  cursor: pointer;
}
.eventsTitleButtonReadMore:hover {
  color: rgb(236, 235, 228);
  background-color: rgb(21, 30, 45);
  box-shadow: inset 0 0 0 1.5px rgb(21, 30, 45);
}
@media screen and (min-width: 1150px) {
  .eventsTitleButtonReadMore {
    padding: 2%;
  }
}
@media screen and (max-width: 1150px) {
  .eventsTitleButtonReadMore {
    padding: 3%;
  }
}

.pictureEventsPresentation {
  min-width: 500px;
  justify-self: center;
}
@media screen and (min-width: 1150px) {
  .pictureEventsPresentation {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .pictureEventsPresentation {
    width: 50%;
    order: 1;
  }
}
@media screen and (max-width: 525px) {
  .pictureEventsPresentation {
    width: 100%;
    min-width: unset;
  }
}

.imgEventsPresentation {
  width: 100%;
  aspect-ratio: auto;
}

.sectionExperience {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: rgb(21, 30, 45);
  color: rgb(236, 235, 228);
  display: grid;
  grid-template-rows: auto 1fr;
}
@media screen and (max-width: 1150px) {
  .sectionExperience {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionExperience {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionExperience {
    padding: 15% 10%;
  }
}
.sectionExperience > div {
  margin: 1%;
}

.experienceTitle {
  justify-self: center;
  padding: 2%;
  z-index: 1;
  padding: unset;
  padding-bottom: 2%;
  width: 100%;
}
@media screen and (min-width: 1150px) {
  .experienceTitle {
    width: 80%;
  }
}

.experienceTitleText {
  display: grid;
  grid-template-rows: auto;
  gap: 5%;
}
.experienceTitleText > span {
  letter-spacing: 0;
  text-align: center;
  margin: 1%;
}

.experienceTitleTextUp {
  font-family: "Montserrat", Sans-serif;
  font-size: 50px;
  font-weight: 300;
  text-transform: capitalize;
  line-height: 1.1em;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.11);
  overflow-wrap: break-word;
}
.experienceTitleTextUp > b {
  font-weight: bold;
}

.experienceTitleTextDown {
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
}

.experienceContent {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}

.experienceBlock {
  color: rgb(131, 201, 90);
  margin: 2%;
  max-width: 270px;
  font-weight: 350;
  text-align: center;
}

.experienceValue {
  font-size: 69px;
  line-height: 1;
  height: 80px;
}

.experienceText {
  font-size: 18px;
  line-height: 1.5;
  padding-top: 15px;
}
.experienceText > b {
  font-weight: bold;
}

@media screen and (max-width: 850px) {
  .experienceBlock {
    margin-top: 10%;
  }
}
@media screen and (max-width: 525px) {
  .sectionExperience {
    padding-top: 50px;
  }
}
@media screen and (max-width: 355px) {
  .experienceTitleTextUp {
    font-size: 200%;
  }
  .experienceTitleTextDown {
    font-size: 130%;
  }
  .experienceValue {
    font-size: 420%;
  }
  .experienceValue > svg {
    height: 60px;
  }
  .experienceText {
    font-size: 120%;
  }
}
.sectionCreativeSeed {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: rgb(21, 30, 45);
  color: rgb(236, 235, 228);
  display: grid;
  align-items: center;
  grid-template-rows: repeat(4, auto);
}
@media screen and (max-width: 1150px) {
  .sectionCreativeSeed {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionCreativeSeed {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionCreativeSeed {
    padding: 15% 10%;
  }
}

.creativeSeedTitle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-self: center;
  padding: 2% 10%;
}
@media screen and (max-width: 600px) {
  .creativeSeedTitle {
    margin-bottom: 5%;
  }
}

.creativeSeedTitleText {
  display: grid;
  grid-template-rows: auto;
}

.creativeSeedTitleTextUp {
  font-weight: 600;
  font-size: 5rem;
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 3%;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .creativeSeedTitleTextUp {
    margin-bottom: 8%;
  }
}
@media screen and (max-width: 525px) {
  .creativeSeedTitleTextUp {
    font-size: 300%;
  }
}
@media screen and (max-width: 355px) {
  .creativeSeedTitleTextUp {
    font-size: 200%;
  }
}
.creativeSeedTitleTextUp > span {
  color: rgb(131, 201, 90);
}

.creativeSeedTitleTextDown {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 30px;
  text-align: justify;
  margin-bottom: 2%;
}
@media screen and (max-width: 600px) {
  .creativeSeedTitleTextDown {
    line-height: 24px;
  }
}
@media screen and (max-width: 525px) {
  .creativeSeedTitleTextDown {
    font-size: 123%;
  }
}
@media screen and (max-width: 355px) {
  .creativeSeedTitleTextDown {
    font-size: 90%;
  }
}

.pictureCreativeSeedFrise {
  justify-self: center;
  margin-bottom: 2%;
}
@media screen and (min-width: 1150px) {
  .pictureCreativeSeedFrise {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .pictureCreativeSeedFrise {
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .pictureCreativeSeedFrise {
    margin-bottom: 10%;
  }
}
@media screen and (max-width: 525px) {
  .pictureCreativeSeedFrise {
    min-width: unset;
  }
}

.imgCreativeSeedFrise {
  width: 100%;
  aspect-ratio: auto;
}

.creativeSeedVideoContainer {
  padding: 2% 10%;
}
.creativeSeedVideoContainer > div {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  box-shadow: 0 2px 30px 20px #040404;
}
.creativeSeedVideoContainer > div > iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 600px) {
  .creativeSeedVideoContainer {
    margin-bottom: 5%;
  }
}

.pictureCreativeSeedCredits {
  min-width: 400px;
  justify-self: center;
}
@media screen and (min-width: 1150px) {
  .pictureCreativeSeedCredits {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .pictureCreativeSeedCredits {
    width: 80%;
  }
}
@media screen and (max-width: 525px) {
  .pictureCreativeSeedCredits {
    min-width: unset;
  }
}

.imgCreativeSeedCredits {
  width: 100%;
  aspect-ratio: auto;
}

.sectionSpecialityServices {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: rgb(229, 229, 223);
  color: rgb(21, 30, 45);
  display: grid;
  align-items: center;
}
@media screen and (max-width: 1150px) {
  .sectionSpecialityServices {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionSpecialityServices {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionSpecialityServices {
    padding: 15% 10%;
  }
}

.specialityServicesTitle {
  justify-self: center;
  padding: 2%;
  z-index: 1;
}
@media screen and (min-width: 1150px) {
  .specialityServicesTitle {
    width: 80%;
  }
}

.specialityServicesTitleText {
  display: grid;
  grid-template-rows: auto;
  margin-left: 5%;
  margin-bottom: 5%;
  transition: all 0.5s, border 0s;
}
.specialityServicesTitleText > span {
  margin: 3%;
}
@media screen and (max-width: 525px) {
  .specialityServicesTitleText > span {
    margin: 5%;
  }
}

.specialityServicesTitleTextUp {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  padding: 5% 0 2% 0 !important;
}
@media screen and (max-width: 525px) {
  .specialityServicesTitleTextUp {
    font-size: 300%;
  }
}
@media screen and (max-width: 355px) {
  .specialityServicesTitleTextUp {
    font-size: 200%;
  }
}

.specialityServicesTitleContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row wrap;
}

.specialityServicesTitleContentBox {
  display: grid;
  grid-template-rows: 1.7fr 0.7fr;
  align-items: center;
  justify-items: center;
  width: 150px;
  min-height: 150px;
  filter: drop-shadow(3px 3px 3px rgba(42, 46, 51, 0.1));
  border-radius: 20px;
  color: rgb(12, 1, 22);
  font-size: 110%;
  line-height: 20px;
  text-align: center;
  background: linear-gradient(178deg, rgb(244, 244, 244) 0%, rgb(244, 244, 244) 100%);
  transition: all 0.5s;
}
.specialityServicesTitleContentBox:hover {
  filter: drop-shadow(6px 6px 6px #2a2e33);
  -webkit-filter: drop-shadow(6px 6px 6px #2a2e33);
}
.specialityServicesTitleContentBox > img {
  width: 60px;
  aspect-ratio: auto;
}
.specialityServicesTitleContentBox > span {
  font-weight: bold;
}
@media screen and (min-width: 1150px) {
  .specialityServicesTitleContentBox {
    margin: 2%;
    padding: 2%;
  }
}
@media screen and (max-width: 1150px) {
  .specialityServicesTitleContentBox {
    margin: 5%;
    padding: 5%;
  }
}

.pictureSpecialityServicesPresentation {
  min-width: 200px;
  justify-self: center;
  border-radius: 20px;
  box-shadow: 0 2px 20px 2px #151e2d;
}

.imgSpecialityServicesPresentation {
  display: block;
  width: 100%;
  aspect-ratio: auto;
  border-radius: 20px;
}

@media screen and (min-width: 1150px) {
  .sectionSpecialityServices {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: unset;
  }
  .specialityServicesTitle {
    width: 100%;
    margin-right: 10%;
  }
  .pictureSpecialityServicesPresentation {
    width: 60%;
    margin-left: 10%;
  }
}
@media screen and (max-width: 1150px) {
  .sectionSpecialityServices {
    grid-template-columns: unset;
    grid-template-rows: 1fr auto;
  }
  .specialityServicesTitle {
    order: 2;
  }
  .pictureSpecialityServicesPresentation {
    width: 40%;
    order: 1;
  }
}
@media screen and (max-width: 525px) {
  .sectionSpecialityServices {
    padding-top: 50px;
  }
}
.sectionSpecialityCompatibility {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: rgb(236, 235, 228);
  color: rgb(21, 30, 45);
  display: grid;
  align-items: center;
}
@media screen and (max-width: 1150px) {
  .sectionSpecialityCompatibility {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionSpecialityCompatibility {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionSpecialityCompatibility {
    padding: 15% 10%;
  }
}

.specialityCompatibilityTitle {
  justify-self: center;
  padding: 2%;
  z-index: 1;
}
@media screen and (min-width: 1150px) {
  .specialityCompatibilityTitle {
    width: 80%;
  }
}

.specialityCompatibilityTitleText {
  display: grid;
  grid-template-rows: auto;
  margin-left: 5%;
  margin-bottom: 5%;
  transition: all 0.5s, border 0s;
}
.specialityCompatibilityTitleText > span {
  margin: 3%;
}
@media screen and (max-width: 525px) {
  .specialityCompatibilityTitleText > span {
    margin: 5%;
  }
}

.specialityCompatibilityTitleTextUp {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  padding: 5% 0 2% 0 !important;
}
@media screen and (max-width: 525px) {
  .specialityCompatibilityTitleTextUp {
    font-size: 300%;
  }
}
@media screen and (max-width: 355px) {
  .specialityCompatibilityTitleTextUp {
    font-size: 200%;
  }
}

.specialityCompatibilityTitleContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row wrap;
}

.specialityCompatibilityTitleContentBox {
  display: grid;
  grid-template-rows: 1.7fr 0.7fr;
  align-items: center;
  justify-items: center;
  width: 150px;
  min-height: 150px;
  filter: drop-shadow(3px 3px 3px rgba(42, 46, 51, 0.1));
  border-radius: 20px;
  color: rgb(12, 1, 22);
  font-size: 110%;
  line-height: 20px;
  text-align: center;
  background: linear-gradient(178deg, rgb(244, 244, 244) 0%, rgb(244, 244, 244) 100%);
  transition: all 0.5s;
}
.specialityCompatibilityTitleContentBox:hover {
  filter: drop-shadow(6px 6px 6px #2a2e33);
  -webkit-filter: drop-shadow(6px 6px 6px #2a2e33);
}
.specialityCompatibilityTitleContentBox > img {
  width: 60px;
  aspect-ratio: auto;
}
.specialityCompatibilityTitleContentBox > span {
  font-weight: bold;
}
@media screen and (min-width: 1150px) {
  .specialityCompatibilityTitleContentBox {
    margin: 2%;
    padding: 2%;
  }
}
@media screen and (max-width: 1150px) {
  .specialityCompatibilityTitleContentBox {
    margin: 5%;
    padding: 5%;
  }
}

.pictureSpecialityCompatibilityPresentation {
  min-width: 200px;
  justify-self: center;
  border-radius: 20px;
  box-shadow: 0 2px 20px 2px #151e2d;
}

.imgSpecialityCompatibilityPresentation {
  display: block;
  width: 100%;
  aspect-ratio: auto;
  border-radius: 20px;
}

@media screen and (min-width: 1150px) {
  .sectionSpecialityCompatibility {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: unset;
  }
  .specialityCompatibilityTitle {
    width: 100%;
    margin-left: 10%;
  }
  .pictureSpecialityCompatibilityPresentation {
    width: 60%;
    margin-right: 10%;
  }
}
@media screen and (max-width: 1150px) {
  .sectionSpecialityCompatibility {
    grid-template-columns: unset;
    grid-template-rows: 1fr auto;
  }
  .specialityCompatibilityTitle {
    order: 2;
  }
  .pictureSpecialityCompatibilityPresentation {
    width: 40%;
    order: 1;
  }
}
@media screen and (max-width: 525px) {
  .sectionSpecialityCompatibility {
    padding-top: 50px;
  }
}
.sectionGallery {
  padding: 2% 10%;
  min-height: 450px;
  transition: all 0.3s;
  background-color: rgb(229, 229, 223);
  color: rgb(21, 30, 45);
  display: grid;
  align-items: center;
}
@media screen and (max-width: 1150px) {
  .sectionGallery {
    padding: 5% 5%;
  }
}
@media screen and (max-width: 850px) {
  .sectionGallery {
    padding: 8% 5%;
  }
}
@media screen and (max-width: 300px) {
  .sectionGallery {
    padding: 15% 10%;
  }
}

.galleryTitle {
  justify-self: center;
  padding: 2%;
  z-index: 1;
}
@media screen and (min-width: 1150px) {
  .galleryTitle {
    width: 80%;
  }
}

.galleryTitleText {
  display: grid;
  grid-template-rows: auto;
  margin-left: 5%;
  margin-bottom: 5%;
  transition: all 0.5s, border 0s;
  width: 100%;
}
.galleryTitleText > span {
  margin: 3%;
}
@media screen and (max-width: 525px) {
  .galleryTitleText > span {
    margin: 5%;
  }
}

.galleryTitleTextUp {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  padding: 5% 0 2% 0 !important;
}
@media screen and (max-width: 525px) {
  .galleryTitleTextUp {
    font-size: 300%;
  }
}
@media screen and (max-width: 355px) {
  .galleryTitleTextUp {
    font-size: 200%;
  }
}

.galleryContent {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-around;
  gap: 60px 2%;
}

.videoBox {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-content: center;
  row-gap: 5%;
  position: relative;
  text-align: center;
  transition: all 0.5s;
}
.videoBox:hover {
  filter: drop-shadow(6px 6px 6px #2a2e33);
  -webkit-filter: drop-shadow(6px 6px 6px #2a2e33);
}

.videoText {
  font-size: 20px;
}
.videoText > strong {
  font-weight: bold;
}

.videoGalleryLarge {
  aspect-ratio: auto;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
}

.videoGallerySmall {
  aspect-ratio: auto;
  border-radius: 20px;
  width: 100%;
  max-width: 300px;
}

.videoPlayButton {
  width: 70px;
  height: 70px;
  aspect-ratio: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@media screen and (min-width: 1150px) {
  .galleryContent {
    margin-bottom: 2%;
  }
}
@media screen and (max-width: 1150px) {
  .galleryContent {
    margin-bottom: 5%;
  }
}
@media screen and (max-width: 525px) {
  .sectionGallery {
    padding-top: 50px;
  }
}

/*# sourceMappingURL=mocap.css.map */