:root {
  --b: 50px;
  --box: max(10rem, 20vmin);
  --outerPad: 12rem;
  --primaryColor: deeppink;
  --sliderColor: var(--primaryColor);
  --sliderBorder: white;
  --sliderThumbColor: white;
  --ltBg: #f2f4f5;
  --mdBg: #e1e6e8;
  --dkBg: #303947;
  --text: #1d2026;
}

main {
  position: absolute;
  bottom: 4%;
  z-index: 1000;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
}

p {
  font-weight: 500;
  color: #40183d;
}

.canvas-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.title {
  -webkit-transform-origin: center center;
  /* transform-origin: center center; */
  will-change: transform;
  pointer-events: none;
  position: absolute;
  width: 13.3%;
  right: 15%;
  top: 0;
  bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.title h1 {
  width: 330px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  text-align: center;
  font-size: 50px;
}

img {
  width: 200px;
  z-index: -1000;
  width: 100%;
  height: 100%;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

video {
  width: 200px;
  z-index: -1000;
  width: 100%;
  height: 100%;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0;
  -webkit-box-flex: 0.5;
      -ms-flex: 0.5;
          flex: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

.video-container-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  cursor: pointer;
  width: 1000px;
  height: 600px;
}

.video-container-inner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  -webkit-box-flex: 0.8;
      -ms-flex: 0.8;
          flex: 0.8;
  position: relative;
  -webkit-transition: -webkit-box-flex 0.2s ease-in;
  transition: -webkit-box-flex 0.2s ease-in;
  transition: flex 0.2s ease-in;
  transition: flex 0.2s ease-in, -webkit-box-flex 0.2s ease-in, -ms-flex 0.2s ease-in;
  margin-left: 7px;
  margin-right: 7px;
}

.video-container-wrapper img {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  opacity: 0.8;
}

.video-container-1 {
  top: 0;
  left: 0;
  -webkit-animation: fadein 1s;
          animation: fadein 1s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.video-container-2 {
  top: 8%;
  left: 0;
  -webkit-animation: fadein1 1s;
          animation: fadein1 1s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.video-container-3 {
  top: 11%;
  left: 0;
  -webkit-animation: fadein2 1s;
          animation: fadein2 1s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.video-container-4 {
  top: 0;
  left: 0;
  -webkit-animation: fadein3 1s;
          animation: fadein3 1s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.video-container-5 {
  top: 8%;
  left: 0;
  -webkit-animation: fadein4 1s;
          animation: fadein4 1s;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.video-container-6 {
  top: 0;
  left: 0;
  -webkit-animation: fadein5 1s;
          animation: fadein5 1s;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.video-container-inner {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.video-big {
  opacity: 1;
  z-index: 1000;
  -webkit-transition: width .10s ease-in-out;
  transition: width .10s ease-in-out;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.video-big-container {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
  width: 100%;
  height: 100%;
}

.video-big-container .video-container-inner {
  display: none;
  margin: 0;
}

.video-big-container .video-container-wrapper {
  width: 100%;
  height: 100%;
}

.video-big-container img {
  opacity: 0;
  display: none;
}

.video-big-container video:not(.video-big) {
  opacity: 0;
  width: 100%;
}

.video-big-container .video-container-inner:has(.video-big) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: unset;
      -ms-flex: unset;
          flex: unset;
  scale: 1;
  -webkit-animation: blowUpModal 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: blowUpModal 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@-webkit-keyframes blowUpModal {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes blowUpModal {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes blowUpContent {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  99.9% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes blowUpContent {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  99.9% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.video-big-container .video-container-inner {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
}

.video-big-container #modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  z-index: 1;
}

.close {
  opacity: 0;
  margin-right: 0;
  top: 0;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  cursor: pointer;
  margin-right: 5%;
  width: 100%;
  z-index: 100;
}

.close-open {
  opacity: 1;
}

.vid-modal-1 {
  width: 0;
  height: 0;
  scale: 0;
}

.vid-hover.inactive {
  opacity: 0;
  visibility: none;
  width: 0;
  height: 0;
}

.modal-active {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.titles {
  position: relative;
  top: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100px;
}

.titles .title-invisible {
  display: none;
}

.titles .title-0 p, .titles .title-1 p, .titles .title-2 p, .titles .title-3 p, .titles .title-4 p, .titles .title-5 p, .titles .title-6 p {
  font-size: 50px;
  line-height: 55px;
  margin: 0;
}

.titles .title-1 .d {
  padding-right: 20px;
}

.titles .title-4 .page-title-inner {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.titles .title-4 .page-title-inner .capitalP, .titles .title-4 .page-title-inner .capitalB, .titles .title-4 .page-title-inner .capitalO {
  padding-left: 20px;
}

.titles .title-4 .page-title-inner .ndash {
  padding-left: 20px;
  padding-right: 20px;
  display: block;
}

.titles .title-4 .page-title-inner .g {
  padding-right: 20px;
}

.titles .title-4 .page-title-inner .p-1, .titles .title-4 .page-title-inner .p-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.titles .title-5 .page-title-inner {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.titles .title-5 .page-title-inner .capitalT, .titles .title-5 .page-title-inner .capitalE, .titles .title-5 .page-title-inner .capitalC {
  padding-left: 20px;
}

.titles .title-5 .page-title-inner .p-1, .titles .title-5 .page-title-inner .p-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.titles .title-6 .page-title-inner {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.titles .title-6 .page-title-inner .p-1, .titles .title-6 .page-title-inner .p-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.titles .title-6 .page-title-inner .ndash {
  padding-left: 20px;
  padding-right: 20px;
}

.titles .title-6 .page-title-inner .capitalR, .titles .title-6 .page-title-inner .capitalT, .titles .title-6 .page-title-inner .capitalS, .titles .title-6 .page-title-inner .capitalC {
  padding-left: 20px;
}

.titles .title-1 .capitalW, .titles .title-1 .capitalI, .titles .title-1 .capitalP, .titles .title-1 .capitalT {
  padding-left: 20px;
}

.titles .title-2 .n, .titles .title-2 .f, .titles .title-2 .t {
  padding-right: 20px;
}

.titles .title-2 .capitalF {
  padding-right: 0 !important;
}

.titles .title-3 .capitalS {
  padding-left: 20px;
}

.titles svg {
  padding: 0 1.5px;
}

.page-title .page-title-inner .capitalW {
  padding-left: 20px;
}

.page-title p {
  font-size: 50px;
  margin: 0;
}

.page-title-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}

.featured-title {
  position: absolute;
}

@media screen and (max-width: 1366px) {
  .video-container-wrapper {
    height: 520px;
  }
}

@media screen and (max-width: 768px) {
  .video-container-wrapper {
    padding-left: 100px;
    padding-right: 100px;
  }
  .title-1 p, .title-2 p, .title-3 p, .title-4 p, .title-5 p, .title-6 p {
    font-size: 40px !important;
    line-height: 45px !important;
  }
  .page-title p {
    font-size: 40px !important;
    line-height: 45px !important;
  }
  .video-container {
    position: absolute;
    left: 1%;
    top: 8%;
    width: 100%;
    height: 500px;
  }
  .video-container-wrapper {
    position: absolute;
    top: 0;
    height: 100%;
    width: 200%;
    gap: 5px;
  }
  .video-container-2, .video-container-3, .video-container-4, .video-container-5, .video-container-6 {
    top: 0;
  }
  .video-big-container .video-container-wrapper {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    height: 100%;
  }
  .video-big-container .video-container-wrapper video {
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media screen and (min-width: 902px) {
  .video-container-inner:hover img {
    opacity: 0;
    display: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .video-container-inner:hover video {
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .video-container-inner:hover {
    -webkit-box-flex: 1.5;
        -ms-flex: 1.5;
            flex: 1.5;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .titles.titles-big-container {
    display: none;
  }
}

@media screen and (max-width: 901px) {
  .canvas-container {
    position: relative;
    max-width: 2000px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-left: 20px;
    margin-right: 20px;
    overflow-y: hidden;
  }
  .video-container-wrapper {
    padding-left: 200px;
    padding-right: 200px;
  }
  img.img-inactive {
    opacity: 0;
  }
  img.img-inactive + video {
    opacity: 1;
  }
  .titles {
    position: fixed;
    bottom: 7%;
    top: unset;
  }
}

.featured-title {
  display: none;
}

@media screen and (max-width: 575px) {
  .video-container-wrapper {
    padding-left: 85px;
    padding-right: 85px;
    width: 270%;
  }
  .titles .title-1 p, .titles .title-2 p, .titles .title-3 p, .titles .title-4 p, .titles .title-5 p, .titles .title-6 p {
    font-size: 30px !important;
    line-height: 35px !important;
  }
  .titles .page-title-inner .p-1, .titles .page-title-inner .p-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .titles .page-title {
    display: none;
  }
  .titles .title-1 .d {
    padding-right: 20px;
  }
  .titles .title-4 .page-title-inner .capitalP, .titles .title-4 .page-title-inner .capitalB, .titles .title-4 .page-title-inner .capitalO {
    padding-left: 10px;
  }
  .titles .title-4 .page-title-inner .ndash {
    padding-left: 10px;
    padding-right: 10px;
  }
  .titles .title-4 .page-title-inner .g {
    padding-right: 10px;
  }
  .titles .title-5 .page-title-inner .capitalT, .titles .title-5 .page-title-inner .capitalE, .titles .title-5 .page-title-inner .capitalC {
    padding-left: 10px;
  }
  .titles .title-6 .page-title-inner .p-1, .titles .title-6 .page-title-inner .p-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .titles .title-6 .page-title-inner .ndash {
    padding-left: 10px;
    padding-right: 10px;
  }
  .titles .title-6 .page-title-inner .capitalR, .titles .title-6 .page-title-inner .capitalT, .titles .title-6 .page-title-inner .capitalS, .titles .title-6 .page-title-inner .capitalC {
    padding-left: 10px;
  }
  .titles .title-1 .capitalW, .titles .title-1 .capitalI, .titles .title-1 .capitalP, .titles .title-1 .capitalT {
    padding-left: 10px;
  }
  .titles .title-2 .n, .titles .title-2 .f, .titles .title-2 .t {
    padding-right: 10px;
  }
  .titles .title-3 .capitalS {
    padding-left: 10px;
  }
  .canvas-container {
    margin-left: 0;
    margin-right: 0;
  }
}

@-webkit-keyframes fadein {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@-webkit-keyframes fadein1 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein1 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@-webkit-keyframes fadein2 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein2 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@-webkit-keyframes fadein3 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein3 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@-webkit-keyframes fadein4 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein4 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein4 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@-webkit-keyframes fadein5 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein5 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@-webkit-keyframes fadein6 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes fadein6 {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}
/*# sourceMappingURL=style.css.map */