/*--------------------------------------------------
                      Variables
 --------------------------------------------------*/

 :root {
  --fit-height: fit-content;
}

/*--------------------------------------------------
                     HTML5 Reset
 --------------------------------------------------*/
 html {
    scroll-behavior: smooth;
  /*   overflow-x: hidden; */
  }


  html, body, div, section, article, aside, header,
  hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p,
  blockquote, address, time, span, em, strong, img,
  ol, ul, li, figure, canvas, video, th, td, tr {
    margin: 0;
    padding: 0;
    border: 0;
  }

  main *, main *:before, main *:after {
      box-sizing: border-box;
  }

  ul {
    list-style-type: none;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    color: white;
  }

  address, article, aside, canvas, details, figcaption,
  figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
  }

  picture {
    z-index: 1;
  }

/*--------------------------------------------------
                Reset RD code
 --------------------------------------------------*/
.toptop_banner {
    height: 0px;
    margin-bottom: 0px;
}

.pd_purchase_left{
	display: none !important;
}

/*fix purchase ui issues*/
.banner1200{
	height: 0px !important;
}

/*hide pdrm purchase*/
.bundle_pdrm{
	display: none !important;
}

.container {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.on_600 {
  display: none;
}

.top_nav_bar {
  max-width: 100%;
  background: #333;
  position: relative;
  z-index: 1;
}

.back_top {
  z-index: 1001 !important;
}

  /*--------------------------------------------------
                          Fonts
   --------------------------------------------------*/


  main h1,
  main h2,
  main h3,
  main h4,
  main h5,
  main span,
  main ul {
    font-family: 'Poppins', sans-serif;
  }

  h2 {
    font-size: clamp(1.6rem, 5vw, 3.4rem);
    font-weight: bold;
  }

  h2, h3, main p {
    line-height: 1.3;
  }

  h2, h3 {
    color: white;
  }

  main h3 {
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    font-weight: 700;
  }

  main p, main ul {
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 2rem;
    font-family: system-ui;
    font-weight: 400;
    line-height: 1.4;
  }

  main a,
  main button {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-weight: 600;
    color: white;
  }

  .description p,
  .green-screen-fx p,
  .your-way p {
   color: white;
  }

  #main-content span {
    color: white;
  }

  #main-content .testim span {
    color: black;
  }


  /*--------------------------------------------------
                    Mobile first layout
   --------------------------------------------------*/

  #main-content {
    width: 100%;
  /*   overflow-x: hidden; */
  }

  section {
    height: 100vh;
    height: var(--fit-height);
  }

  h2 span {
    background: rgb(1,94,247);
    background: linear-gradient(90deg, rgba(1,94,247,1) 0%, rgba(163,0,254,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    display: inline-block;
  }

  h2, h3 {
    margin-bottom: 0.4rem;
  }

  .text {
    height: fit-content;
  }

    /*=====   Play Button   ======*/

  .video-btn {
    display: flex;
    position: relative;
  }

  .video-btn:after,
  .video-btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .video-btn:after {
    width: 0;
    height: 0;
    border: 1.3em solid transparent;
    border-left: 2em solid white;
    margin-top: -1.25em;
    margin-left: -0.7em;
  }

  .video-btn:before {
    width: 5.6em;
    height: 5.6em;
    margin-left: -2.8em;
    margin-top: -2.8em;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 24px #000000c7;
    background: #0000008c;
  }

  .video-btn:hover:before {
    background: #7d2dd2;
    transition: all 0.45s ease;
  }

  .video-btn:hover:before,
  .video-btn:hover:after {
    transform: scale(1.05);
  }


  /*--------------------------------------------------
                      Main Hero
   --------------------------------------------------*/

  .hero {
    display: grid;
    grid-template-columns: 1fr;
    background: rgb(1,94,247);
    background: linear-gradient(170deg, rgba(1,94,247,1) 0%, rgba(163,0,254,1) 100%);
    color: white;
    text-align: center;
    width: 100%;
    height: 100vh;
  }

  .hero .promo_ribbon {
    background-color: #ff0057;
    height: fit-content;
    padding: 6px;
    grid-row: 1;
    grid-column: 1;
    margin-top: 46px;
  }

  .hero .product-info {
    grid-column: 1;
    grid-row: 1;
    height: fit-content;
    align-self: center;
    justify-self: center;
    padding: 1rem;
    width: -webkit-fill-available;
  }

  .hero .product {
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 0.95;
    width: 63vw;
    align-self: center;
  }

  .JPN .hero .product {
    line-height: 1;
    font-weight: 500;
  }

  .hero .product img {
    width: 10%;
    margin-right: 2%;
    min-width: 45px;
    max-width: 60px;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 6vw, 3.4rem);
    line-height: 1;
    margin-top: 1rem;
    font-weight: 800;
  }

  .hero h2 {
    font-size: clamp(0.8rem, 5vw, 1.6rem);
    margin-bottom: 40px;
    margin-top: 10px;
  }

  .switch-os {
    width: fit-content;
    margin: 0.6rem auto 0;
  }

  .switch-os a {
    margin-left: 20px;
    padding: 2px 5px;
    text-decoration: underline;
    font-weight: 300;
    transition: 0.15s all;
}

  .switch-os a:hover {
    text-decoration: none !important;
    color: aqua;
    background: black;
    outline: solid aqua 2px;
    border-radius: 4px;
  }

  .btn-cta {
     display: flex;
     width: 100%;
     justify-content: center;
     margin-top: 0.6rem;
     flex-wrap: wrap;
  }

  .btn-cta a {
     border-radius: 7px;
     font-size: 1rem;
     line-height: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 70px;
     width: 190px;
     transition: 0.2s all;
     margin: 12px;
     text-transform: uppercase;
  }

  .btn-cta a:hover {
    transform: scale(1.08);
    font-size: 1.1rem;
  }

  .btn-cta span {
    font-size: clamp(0.6rem, 0.6vw, 1rem);
    padding-top: 6px;
  }

  a.trial-btn {
    border: 1px solid white;
  }

  a.buy-now-btn {
    background: #21EEEF;
    color: #000;
  }

  a.buy-now-btn span {
    color: #000 !important;
    padding-top: 4px;
  }

  a.buy-now-btn:hover {
    color: #000;
  }

  a.pricing {
    color: #21eeef;
    text-decoration: underline;
    transition: 0.2s all;
    outline: 0;
  }

  a.pricing:hover {
    color: white;
    text-decoration: none;
    filter: drop-shadow(1px 1px 7px #0000008f);
  }

  #top-video {
    display: none;
    height: 100%;
  }

  /*-------------------------------------------------
                       WebCommerce ad
   -------------------------------------------------*/

  /* .webcommerce-ad,
  .to-contest {
    display: none;
  }

  .to-contest {
    position: sticky;
    display: grid;
    top: 49px;
    height: auto;
    width: 100%;
    color: #ffffff;
    background-color: hsl(311deg 87% 53%);
    z-index: 200;
    padding: 5px 0;
  }

  .to-contest img,
  .to-contest b br {
    display: none
  }

   .to-contest b {
    text-align: center;
    width: 100%;
    align-self: center;
   } */

.webcommerce-ad {
  display: none;
}


.to-contest {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 255px;
  width: 195px;
  border-radius: 50%;
  top: 35%;
  right: -125px;
  z-index: 200;
  color: #7a0555;
  background-color: hsla(0,0%,100%,1);
  background: linear-gradient(185deg, rgba(22,222,255,1) 0%, rgb(255 235 162) 58%, rgba(255,170,247,1) 100%);
  cursor: pointer;
  filter: drop-shadow(5px 5px 18px #0000006b) drop-shadow(5px 5px 7px #0000006b);
  padding: 0;
  /* transform: scale(0.6); */
}

 .to-contest img {
   display: block;
   width: 28%;
   margin: 33% 0 3% 6%;
   height: auto;
  }

 .to-contest b {
   height: auto;
   text-align: right;
   padding-right: 67%;
   padding-left: 5%;
   width: 100%;
 }

 .to-contest b br {
   display: block;
 }

 a.to-contest:hover {
  color: #7a0555;
}

.FRA .to-contest,
.DEU .to-contest {
  width: 200px;
}

.FRA .to-contest img {
  margin: 26% 0 0 8%;
}

.DEU .to-contest img {
  margin: 29% 0 0 8%;
}

.JPN .to-contest img {
 margin: 32% 0 0 6%;
}

.FRA .to-contest b {
  padding-right: 65%;
  padding-left: 1%;
}

.DEU .to-contest b {
  font-size: 0.7rem;
  padding-right: 64%;
  padding-left: 0;
  line-height: 1.2;
}

.JPN .to-contest b {
  padding-right: 66%;
}

.ESP .to-contest,
.ITA .to-contest,
.CHS .to-contest {
  display: none;
}


  /*--------------------------------------------------
                   Smarter features
   --------------------------------------------------*/

  .smarter-features {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    padding: 3rem;
  }

  .smarter-features h2,
  .smarter-features h3,
  .smarter-features p {
    color: black;
  }

  .smarter-features h3 span {
    display: inline-block;
    color: white;
    background: linear-gradient(135deg, rgba(1,94,247,1) 0%, rgba(163,0,254,1) 100%);
    padding: 0 1rem;
    /* border-radius: 6px; */
  }

  .smarter-features > :nth-child(2) {
     width: 100%;
     margin: 1rem 0;
     grid-row: 2;
     height: 100%;
     object-fit: cover;
     clip-path: polygon(1% 0%,99% 0%, 99% 100%, 1% 100%);
  }

  .smarter-features img {
     width: 100%;
  }

  .btns-templates {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .btns-templates a {
     background: black;
     padding: 1rem 2rem;
     border-radius: 7px;
     transition: 0.2s all;
  }

  .btns-templates a:hover {
     transform: scale(1.06);
  /*    outline: solid 2px black;
     background: white;
     color: black; */
  }

  .btns-templates > :nth-child(1) {
     margin-bottom: 1rem;
  }


  /*--------------------------------------------------
                  Green Screen Effects
   --------------------------------------------------*/

  .green-screen-fx {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    height: var(--fit-height);
    overflow: hidden;
  }

  .green-screen-fx > :nth-child(1) {
     grid-column: 1;
     grid-row: 1;
     z-index: 5;
     justify-self: center;
     text-align: center;
     height: fit-content;
     margin: 12%;
  }

  .green-screen-fx .chroma {
     grid-column: 1;
     grid-row: 2;
     z-index: 4;
     font-weight: 900;
     text-transform: uppercase;
     justify-self: center;
     align-self: end;
     line-height: 1;
     padding: 13% 12%;
     font-size: clamp(3rem, 14vw, 16rem);
  }

  .green-screen-fx picture {
     grid-column: 1;
     grid-row: 1 / 3;
  }

  #clipped-anim1,
  #clipped-anim2 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  /*transition: clip-path 0.8s cubic-bezier(0.42, 0, 0.5, 1) 0.2s, opacity 0.6s linear 0.6s; */
    transition: clip-path 0.8s cubic-bezier(0.42, 0, 0.5, 1) 0.1s;
  }

  #clipped-anim2 {
    transition-delay: 1.15s;
  }

  #clipped-anim1.start,
  #clipped-anim2.start {
    clip-path: polygon(105% 0, 100% 0, 100% 100%, 45% 100%);
  }

  .green-screen-fx img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /*--------------------------------------------------
                        AI Tools
   --------------------------------------------------*/

  .ai-tools {
    height: 280vh;
    position: relative;
  }

 .ai-tools h2 {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: center;
    z-index: 1;
    margin-top: 4%;
    height: fit-content;
    font-size: clamp(1.6rem, 5vw, 3.4rem);
    width: 80%;
    padding-top: 3rem;
}

  .sticky-sec {
    background: #000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: sticky;
    top: 39px;
    height: 100%;
    max-height: 100vh;
    z-index: 1;
  }

  .description {
   display: grid;
   width: fit-content;
   height: fit-content;
   margin: 10% 10% 0 10%;
   max-width: 350px;
   position: sticky;
   grid-column: 1;
   grid-row: 1;
   z-index: 2;
   transition: 0.4s all 0.4s;
  }

  .JPN .description {
   margin: 0 10% 10%;
   align-self: center;
  }

  .description a {
    background: black;
    padding: 1rem 2rem;
    border-radius: 7px;
    transition: 0.2s all;
    margin-top: 7px;
    width: fit-content;
  }

  .description p.info {
    font-size: 0.6rem;
    max-width: 197px;
    text-align: center;
    margin: 8px;
    line-height: 1.2;
   }

  .description a:hover {
    transform: scale(1.06);
  }

  .description ul {
    color: white;
    padding-top: 12px;
    list-style-type: disclosure-closed;
    margin-left: 19px;
  }

  .off-screen {
    transition: 0.4s all 0s;
    z-index: 0;
  }

  .upward.off-screen {
    transform: translateY(-50px);
  }

  .downward.off-screen {
    transform: translateY(50px);
  }

  .backdrop {
    grid-column: 1;
    grid-row: 1;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s cubic-bezier(0.42, 0, 0.5, 1);
    opacity: 0.8;
  }

  .backdrop.faded-out {
    opacity: 0;
  }

  .backdrop img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }

  .observers1 {
    position: absolute;
    top: 0;
    height: -webkit-fill-available;
  }

  .trigger1 {
    display: block;
    width: 100vw;
    /* background: red; */
    height: 60vh;
    margin: 5vh 0;
  }

  #a1 {
    margin-bottom: 1vh;
  }

  #a3 {
    height: 50vh;
    margin-top: 0;
  }

  .description h3 {
   opacity: 1;
   margin-bottom: 0.4rem;
   transition: opacity 0.5s cubic-bezier(0.64, 0, 1, 0.49) 0.2s, margin-bottom 0.5s cubic-bezier(0.54, 0.01, 0.25, 1) 0.2s;
  }

  .off-screen h3 {
   opacity: 0;
   margin-bottom: 2rem;
   transition: 0.3s all;
  }

  .description p {
   opacity: 1;
   margin-bottom: 0.4rem;
   transition: opacity 0.5s cubic-bezier(0.64, 0, 1, 0.49) 0.2s, margin-bottom 0.5s cubic-bezier(0.54, 0.01, 0.25, 1) 0.2s;
   /* transition: 0.4s all 0.2s; */
  }

  .off-screen p {
   opacity: 0;
   /* margin-bottom: 3rem; */
   transition: 0.2s all;
  }

  .description a {
   opacity: 1;
   transition: opacity 0.4s cubic-bezier(0.54, 0.01, 0.25, 1) 0.3s;
  }

  .off-screen a {
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
  }


  /*--------------------------------------------------
                    Customizable Content
   --------------------------------------------------*/

  .simple-tools {
    height: 210vh;
    position: relative;
  }

  .simple-tools .stk {
    background: rgb(34,246,247);
    background: linear-gradient(180deg, rgba(34,246,247,1) 0%, rgba(255,255,255,1) 87%);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content min-content;
    padding: 3rem 2rem 2rem;
    position: sticky;
    top: -80px;
    height: min-content;
    z-index: 1;
  }

  .simple-tools h2 {
    text-align: left;
    grid-column: 1;
  }

  .simple-tools h3 {
     border-top: 2px solid #000;
     border-bottom: 2px solid #000;
     line-height: 2.3;
     text-align: center;
     font-size: clamp(1.4rem, 1.2vw, 1.6rem);
     margin-bottom: 0;
     margin-top: -2px;
     text-transform: uppercase;
     position: relative;
   }

   .FRA .simple-tools h3,
   .ESP .simple-tools h3,
   .ITA .simple-tools h3
    {
     text-align: left;
     font-size: clamp(1.2rem, 1.2vw, 1.6rem);
   }

  .simple-tools p {
     max-width: 90%;
     margin: 0 auto;
     padding-top: 10px;
   }

  .simple-tools h2,
  .simple-tools h3,
  .simple-tools p {
    color: black;
  }

  .simple-tools h3.active {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(34,246,247,0.3) 50%, rgba(255,255,255,0) 100%);
    opacity: 1;
    position: relative;
    }

  .accordion-sec {
    width: 100%;
    grid-column: 1;
    justify-self: center;
    align-self: center;
  }

  .accordion-sec li {
     list-style: disc;
     margin-left: 1.5rem;
  }

  .accordion-sec ul {
     padding: 5px 0px 20px 20px;
     max-width: 90%;
     font-weight: 700;
  }

  .simple-tools picture {
      grid-column: 1;
      grid-row: 2;
      justify-self: center;
      align-self: center;
  }

  .stk img {
    opacity: 1;
    max-width: 60vw;
    transition: 0.4s all;
    padding-bottom: 20px;
  }

  .stk img.noshow {
    opacity: 0;
  }

  .des {
    transition: 0.2s all;
  }

  .des.noshow {
    height: 0px !important;
    overflow: hidden;
  }

  .observers2 {
    position: absolute;
    top: 0;
    height: -webkit-fill-available;
  }

  .trigger2 {
    display: block;
    width: 100vw;
    height: 60vh;
    margin: 5vh 0;
  }

  #b2 {
    margin-bottom: 1vh;
  }

  #b3 {
    height: 50vh;
    margin-top: 0;
  }
  .simple-tools h3.active::after {
    content: url(https://www.cyberlink.com/stat/edms/product-version-images/2023/PDR/minus.png);;
    padding-right: 10px;
    position: absolute;
    right: 0;;
top: 5px;
}
.simple-tools h3::after {
    content: url(https://www.cyberlink.com/stat/edms/product-version-images/2023/PDR/plus.png);;
    padding-right: 10px;
    position: absolute;
    right: 0;;
top: 5px;
}

  /*--------------------------------------------------
                        Stock Media
   --------------------------------------------------*/

  .stock-media {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content;
    height: fit-content;
    overflow: hidden;
    width: 100%;
    padding: 3rem 1rem;
  }

  .stock-media h2 {
      color: black;
      text-align: center;
      max-width: 80%;
      margin: 0 auto -6%;
  }

  /* @keyframes words_swap {
      8.3% {transform: translateY(-112%);}
      16.6% {transform: translateY(-100%);}
      25% {transform: translateY(-212%);}
      33.3% {transform: translateY(-200%);}
      41.6% {transform: translateY(-312%);}
      50% {transform: translateY(-300%);}
      58.3% {transform: translateY(-410%);}
      66.6% {transform: translateY(-400%);}
      75% {transform: translateY(-512%);}
      83.3% {transform: translateY(-500%);}
      91.6% {transform: translateY(-612%);}
      100% {transform: translateY(-600%);}
  } */

  @keyframes words_swap {
      12.5% {transform: translateY(-112%);}
      25% {transform: translateY(-100%);}
      37.5% {transform: translateY(-212%);}
      50% {transform: translateY(-200%);}
      62.5% {transform: translateY(-312%);}
      75% {transform: translateY(-300%);}
      87.5% {transform: translateY(-410%);}
      100% {transform: translateY(-400%);}
  }

  .words {
      height: 3.4rem;
      overflow: hidden;
      padding-left: 0.9%;
      clip-path: inset(4.5% 0% 0% 0%);
  }

  .DEU .words {
    height: 4.35rem;
  }

  .CHT .words,
  .CHS .words {
    height: 3.7rem;
  }

  .words b {
      display: block;
      padding-top: 2%;
      height: 100%;
      animation: words_swap 10s infinite;
      background: rgb(1,94,247);
      background: linear-gradient(90deg, rgba(1,94,247,1) 0%, rgba(163,0,254,1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
     font-weight: 700;
  /*    display: inline-block; */
  }

  .ENU span b:nth-child(1),
  .ENU span b:nth-child(5),
  .JPN span b:nth-child(1),
  .JPN span b:nth-child(5),
  .ESP span b:nth-child(1),
  .ESP span b:nth-child(5),
  .FRA span b:nth-child(1),
  .FRA span b:nth-child(5),
  .ITA span b:nth-child(1),
  .ITA span b:nth-child(5) {
    line-height: 1;
  }

  .JPN span b:nth-child(2) {
   word-break: keep-all;
  }

  /* @keyframes fading_swap {
      0% {opacity: 0;}
      8.3% {opacity: 1;}
      16.6% {opacity: 1;}
      25% {opacity: 0;}
      100% {opacity: 0;}
  } */

  @keyframes fading_swap {
      0% {opacity: 0;
          z-index: 0;}
      12.5% {opacity: 1;
            z-index: 100;}
      25% {opacity: 1;
          z-index: 100;}
      37.5% {opacity: 0;
            z-index: 0;}
      100% {opacity: 0;
            z-index: 0;}
  }

  .stock-media div.slide {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 1630px;
    align-self: center;
    justify-content: center;
    margin: 1rem auto;
    animation: fading_swap 10s infinite;
    opacity: 0;
    border-radius: 20px;
    overflow: hidden;
  }

  .stock-vid {
    display: none;
  }

  .stock-media img {
    width: 100%;
  }

  .stock-media div.slide:nth-child(2) {
   animation-delay: 2.5s;
  }

  .stock-media div.slide:nth-child(3) {
   animation-delay: 5s;
  }

  .stock-media div.slide:nth-child(4) {
   animation-delay: 7.5s;
  }

.stock-media a.cta-try-now {
  background: black;
  padding: 1rem 2rem;
  border-radius: 7px;
  transition: 0.2s all;
  width: fit-content;
  grid-row: 3;
  opacity: 1;
  animation: none;
  justify-self: center;
}

a.cta-try-now:hover {
  transform: scale(1.06);
}

.stock-media p.info {
  justify-self: center;
  font-size: 0.6rem;
  max-width: 197px;
  text-align: center;
  line-height: 1.2;
 }




  /*--------------------------------------------------
                  Your Footage Your Way
   --------------------------------------------------*/

  .your-way {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto 0.5fr 3fr;
    height: fit-content;
    padding: 3rem 3rem 0;
    overflow: hidden;
    width: 100%;
    background: rgb(1,94,247);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(1,94,247,1) 30%);
    gap: 1rem;
  }

  .your-way h2 {
    color: black;
    text-align: center;
  }

  .your-way picture,
  .your-way video {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-self: center;
  }

  .your-way img {
    width: 100%;
  }

  .your-way video {
    width: 84%;
    justify-self: center;
    align-self: center;
    z-index: 2;
    transform: translateY(-3%);
    clip-path: inset(0 5%);
  }

  .your-way .no-show {
    display: none;
  }

  .your-way nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    text-align: center;
    color: white;
    font-weight: bold;
  }

  .your-way button {
    width: 100%;
    background-color: #015ef7;
    border: solid 1px white;
    border-radius: 7px;
    padding: 3% 0;
    text-transform: uppercase;
   }

   .your-way button:hover {
     transform: scale(1.05);
     filter: drop-shadow(2px 4px 6px #00000063);
    }

   button.btn-active {
    background-color: white;
    color: #015ef7;
    font-weight: 700;
    border: solid 1px #015ef7;
    }

  .feature-des {
    width: 82%;
    justify-self: center;
   }


/*--------------------------------------------------
                         Reviews
--------------------------------------------------*/

.testim {
	width: 100%;
	height: min-content;
	display: grid;
	grid-template-rows: min-content auto;
	max-height: 750px;
	padding: 10% 5% 5% 5%;
	background-color: #f3f3f3;
	}

.testim h2 {
  color: black;
  text-align: center;
  margin-bottom: 2rem;
  }

.terstim-cover {
  align-self: center;
  justify-self: center;
  }

.testim .wrap {
  position: relative;
  width: 100%;
  max-width: 1020px;
  padding: 0;
  margin: 0 auto 20px auto;
  height: 400px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgb(207 207 207 / 10%);
}

.testim .arrow {
  position: absolute;
  color: #333;
  cursor: pointer;
  font-size: 2em;
  top: 50%;
  transform: translateY(-50%);
  transition: all .3s ease-in-out;
  padding: 5px;
  z-index: 4;
  opacity: 1;
  width: 40px;
  display: none;
}

.testim .arrow:before {
		cursor: pointer;
}

.testim .arrow:hover {
    color: #015ef7;
}

.testim .arrow.left {
    left: 30px;
}

.testim .arrow.right {
    right: 30px;
}

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 20px;
    display: block;
    z-index: 3;
		height: fit-content;
}

.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d5d3d3;
    margin: 0 15px;
    padding: 8px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: #015ef7;
}

.testim .dots .dot.active {
    animation: testim-scale .5s ease-in-out forwards;
}

.testim .cont {
    position: relative;
		overflow: hidden;
    padding: 3rem 0 0 0;
}

.testim .cont > div {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0 0 70px 0;
    opacity: 0;
}

 .testim .cont > div a {
   cursor: default;
 }

.testim .cont > div.inactive {
    opacity: 1;
}


.testim .cont > div.active {
    position: relative;
    opacity: 1;
}

.testim .cont > div.active a {
  cursor: pointer;
}

.testim .cont div .img img {
    display: block;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 50%;
}

.testim .cont div .img img.tom {
  width: 50%;
  height: auto;
  border-radius: 0;
  margin: 0 auto;
}

.testim .cont div .img img.pc-mag {
  width: 50%;
  max-width: 300px;
  height: auto;
  border-radius: 0;
  margin: 0rem auto;
}

.testim .cont div .img img.topten {
  width: 50%;
  height: auto;
  border-radius: 0;
  margin: 0 auto;
}

.testim .cont div h3,
.testim .cont div h3 a {
   color: #015ef7;
   font-size: 1.2em;
   margin: 15px 0 10px 0;
}

.testim .cont div h3 span {
  font-weight: 700;
  color: #000;
}

.testim .cont div p {
    font-size: 1.15em;
    color: #333;
    width: 90%;
    margin: auto;
    line-height: 1.2;
}

.testim .cont div.active .img img {
    animation: testim-show .5s ease-in-out forwards;
}

.testim .cont div.active h3 {
    animation: testim-content-in .4s ease-in-out forwards;
}

.testim .cont div.active p {
    animation: testim-content-in .5s ease-in-out forwards;
}

.testim .cont div.inactive .img img {
    animation: testim-hide .5s ease-in-out forwards;
}

.testim .cont div.inactive h3 {
    animation: testim-content-out .4s ease-in-out forwards;
}

.testim .cont div.inactive p {
    animation: testim-content-out .5s ease-in-out forwards;
}

@keyframes testim-scale {
/*     0% {box-shadow: 0px 0px 0px 0px #eee;}
    35% {box-shadow: 0px 0px 10px 5px #eee;}
    70% {box-shadow: 0px 0px 10px 5px #ea830e;}
   100% {box-shadow: 0px 0px 0px 0px #ea830e;} */
}

@keyframes testim-content-in {
    from {opacity: 0;
          transform: translateY(100%);}
    to {opacity: 1;
        transform: translateY(0);}
}

@keyframes testim-content-out {
    from {opacity: 1;
         transform: translateY(0);}
    to {opacity: 0;
       transform: translateY(-100%);}
}

@keyframes testim-show {
    from {opacity: 0;
         transform: scale(0);}
    to {opacity: 1;
       transform: scale(1);}
}

@keyframes testim-hide {
    from {opacity: 1;
          transform: scale(1);}
    to {opacity: 0;
        transform: scale(0);}
}

@media all and (max-width: 300px) {
	body {
		font-size: 14px;
	}
}

@media all and (max-width: 500px) {
	/* .testim .arrow {
		font-size: 1.5em;
	} */

}

.testim .cont div p {
  line-height: 25px;
}

.testim .cont div p::before,
.testim .cont div p::after {
  font-weight: bolder;
  font-family: ui-monospace;
  font-size: xx-large;
  color: #015ef7;
}

.testim .cont div p::before {
 content: "\201C";
 padding-right: 10px;
}

.testim .cont div p::after {
 content: "\201D";
 padding-left: 10px;
 line-height: 0;
}

.testim a.cta-try-now {
  background: black;
  padding: 1rem 2rem;
  border-radius: 7px;
  transition: 0.2s all;
  width: fit-content;
  grid-row: 3;
  opacity: 1;
  animation: none;
  justify-self: center;
}

/*--------------------------------------------------
                      Blog Articles
 --------------------------------------------------*/

.blog {
  padding: 5% 3% 5%;
  display: grid;
  height: fit-content;
}

.blog h2,
.blog p {
  text-align: center;
}

.blog p {
  color: black;
}

.blog ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 85%;
  margin: 2rem auto;
  max-width: 1400px;
}

.blog li {
  padding-bottom: 34px;
  position: relative;
}

.blog ul p {
  display: none;
}

.blog img {
  width: 100%;
}

.blog h3 {
  padding: 5% 0% 2% 0%;
  font-size: clamp(1rem, 2vw, 1.7rem);
  color: #000;
}

.blog li a:last-of-type {
  color: #000000;
  background-color: white;
  position: absolute;
  bottom: 11px;
  transition: 0.1s all;
}

.blog li a:last-of-type:hover {
    padding: 0 8%;
}

.blog > a:last-of-type {
    background-color: #015ef7;
    padding: 1rem 2rem;
    border-radius: 7px;
    width: fit-content;
    justify-self: center;
    transition: 0.1s all;
}

.blog > a:last-of-type:hover {
    transform: scale(1.05);
    filter: drop-shadow(2px 5px 8px #00000026) drop-shadow(0px 2px 2px #00000076);
}

  /*==================================================
                      iPad layout
  ==================================================*/

  @media (min-width: 600px) {

  /*--------------------------------------------------
                    Mobile first layout
   --------------------------------------------------*/

  #main-content {
    /* overflow: hidden;
    overflow-y: scroll; */
    height: min-content;
  }

  section {
    /* scroll-snap-align: start; */
    height: 100vh;
    height: var(--fit-height);
  }

  /*--------------------------------------------------
                    Hero
   --------------------------------------------------*/

  .hero .promo_ribbon {
    grid-column: 1;
    grid-row: 1;
    height: fit-content;
    width: fit-content;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #ff0057;
    border-bottom-right-radius: 6px;
    margin-top: 0;
  }

  .hero .product {
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  }


  /*--------------------------------------------------
                   Smarter features
   --------------------------------------------------*/


   .smarter-features div {
     text-align: center;
  }


  .btns-templates {
    flex-direction: row;
    justify-content: center;
  }

  .btns-templates > :nth-child(1) {
     margin-right: 1rem;
     margin-bottom: 0;
  }

  .smarter-features > :nth-child(3) p {
     max-width: 420px;
     text-align: center;
     margin: 0 auto;
  }


  /*--------------------------------------------------
                      AI tools
   --------------------------------------------------*/

  .ai-tools h2 {
   width: initial;
 }

  /*--------------------------------------------------
                  Green Screen Effects
   --------------------------------------------------*/

  .green-screen-fx > :nth-child(1) {
     margin: 3rem 0 0 0;
  }

   .green-screen-fx .chroma {
     transform: translateY(3vw);
     padding: unset;
  }

    /*--------------------------------------------------
                    Customizable Content
  --------------------------------------------------*/

  .simple-tools {
    height: 190vh;
  }

  .simple-tools .stk {
    top: 39px;
    padding: 3rem;
  }

  .simple-tools h2 {
    text-align: center;
    max-width: 650px;
    justify-self: center;
  }

  .FRA .simple-tools h3,
  .ESP .simple-tools h3,
  .ITA .simple-tools h3
   {
    text-align: center;
   }

    /*--------------------------------------------------
                        Stock Media
   --------------------------------------------------*/

   .stock-media {
    padding: 4rem;
  }

  .stock-media h2 {
    margin: 0 auto;
    max-width: 100%;
  }

  .words b {
    padding-top: 0;
  }

  .words br {
    display: none;
  }

  /*--------------------------------------------------
                  Your Footage Your Way
   --------------------------------------------------*/

   .your-way {
    grid-template-rows: auto auto 0.5fr 1.8fr;
    padding: 3rem 3rem 0;
    /* padding: 3rem 3rem 6rem; */
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(1,94,247,1) 35%);
    gap: 1.6rem;
  }

   .your-way picture {
     width: 95%;
   }

   .your-way video {
    width: 80%;
  }

  .your-way nav {
    width: 85%;
    justify-self: center;
    gap: 1.6rem;
  }

  .your-way button {
    padding: 5% 0;
  }

  .feature-des {
    width: 78%;
  }

/*--------------------------------------------------
                   Review
--------------------------------------------------*/

    .testim .wrap {
      margin: 0 auto 50px auto;
    }

    .testim .cont div p {
        width: 70%;
    }

    .testim .arrow {
      display: block;
    }

    .testim .dots .dot {
      margin: 0 5px;
      padding: 0;
    }

  /*--------------------------------------------------
                          Blog Articles
  --------------------------------------------------*/

    .blog ul {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3%;
      margin: 2% auto;
    }


  }


  /*==================================================
                  Bigger iPad layout
  ==================================================*/

  @media (min-width: 800px) {

  /*--------------------------------------------------
                  Your Footage Your Way
   --------------------------------------------------*/

   .your-way {
    grid-template-rows: auto auto 0.5fr 1.5fr;
  }
}


  /*==================================================
                    Desktop layout
  ==================================================*/

  @media (min-width: 1065px) {

    /*-///////////  Basic layout /////////////-*/


   /*--------------------------------------------------
                      Main Hero
   --------------------------------------------------*/

  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100vh - 109px);
    overflow: hidden;
  }

   #top-video {
    display: block;
    width: 100%;
    object-fit: cover;
  }

  /*-------------------------------------------------
                       WebCommerce ad
   -------------------------------------------------*/

  .webcommerce-ad {
    display: grid;
    grid-template-columns: 1fr;
    /* background: rgb(107,31,97);
    background: linear-gradient(90deg, rgba(107,31,97,1) 0%, rgba(107,31,97,1) 40%, rgba(159,60,146,1) 60%, rgba(159,60,146,1) 100%); */
    height: fit-content;
  }

  #long-banner {
    justify-self: center;
  }

  .to-contest {
    position: fixed;
    display: flex;
    flex-direction: column;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    top: 35%;
    right: -125px;
    z-index: 200;
    color: #7a0555;
    background-color:hsla(0,0%,100%,1);
    background-image:
    radial-gradient(at 0% 39%, hsl(39deg 100% 74% / 67%) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
    radial-gradient(at 59% 48%, hsla(30,100%,81%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(289,91%,72%,1) 0px, transparent 50%),
    radial-gradient(at 99% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
    radial-gradient(at 26% 0%, hsla(180,100%,76%,1) 0px, transparent 50%);
    cursor: pointer;
    filter: drop-shadow(5px 5px 18px #0000006b) drop-shadow(5px 5px 7px #0000006b);
    padding: 0;
 }

   .to-contest img {
     display: block;
     width: 34%;
     margin: 19% 0 3% 13%;
     height: auto;
    }

   .to-contest b {
     height: auto;
     text-align: right;
     padding-right: 56%;
     padding-left: 8%;
     width: 100%;
   }

   .to-contest b br {
     display: block;
   }

   a.to-contest:hover {
    color: #db35c7;
    transform: scale(1.1);
    transition: 0.2s all;
  }

  .FRA .to-contest,
  .DEU .to-contest {
    height: 255px;
    width: 255px;
  }

  .FRA .to-contest img {
    margin: 12% 0 0 14%;
  }

  .JPN .to-contest img {
    margin: 17% 0 3% 13%;
  }

  .DEU .to-contest img {
    margin: 16% 0 0% 13%;
  }

  .FRA .to-contest b {
    padding-right: 53%;
  }

  .JPN .to-contest b {
    padding-right: 54%;
  }

  .DEU .to-contest b {
    font-size: 0.9rem;
    padding-right: 56%;
    line-height: 1.2;
  }

  .ESP .to-contest,
  .ITA .to-contest,
  .CHS .to-contest {
    display: none;
  }


  /*--------------------------------------------------
                   Smarter features
   --------------------------------------------------*/

   .smarter-features {
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding: 5rem;
  }

   .smarter-features > :nth-child(1) {
     grid-column: 1 / 3;
     grid-row: 1;
  }

  .smarter-features img {
     grid-column: 1;
     grid-row: 2;
     width: 100%;
  }

  .smarter-features > :nth-child(3) {
     max-width: 460px;
     text-align: left;
     justify-self: center;
     align-self: center;
  }

  .FRA .smarter-features > :nth-child(3) {
    max-width: 480px;
  }

  .smarter-features > :nth-child(3) p {
     max-width: inherit;
     text-align: inherit;
     margin: unset;
  }

  .btns-templates {
    justify-content: start;
  }


  /*--------------------------------------------------
                  Green Screen Effects
   --------------------------------------------------*/

  .green-screen-fx {
    grid-template-columns: 1fr 1fr;
    /* height: 100vh; */
    min-height: 607px;
  }

  .green-screen-fx > :nth-child(1) {
    margin: 5rem 0 0 0;
  }

  .green-screen-fx .chroma {
    grid-column: 1 / 3;
  }

  .green-screen-fx picture {
    grid-column: 1 / 3;
  }

  #clipped-anim1.start,
  #clipped-anim2.start {
    clip-path: polygon(62% 0, 100% 0, 100% 100%, 45% 100%);
  }

    /*--------------------------------------------------
                        AI Tools
   --------------------------------------------------*/

   .ai-tools {
      height: 200vh;
    }

   .ai-tools h2 {
    padding-top: 1rem;
   }

  .sticky-sec {
    height: calc(100vh - 39px);
  }


  /*--------------------------------------------------
                    Customizable Content
  --------------------------------------------------*/

  .simple-tools {
    height: 220vh;
  }

  .simple-tools .stk {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    padding: 2%;
  }

  .simple-tools h2 {
    grid-column: 1 / 3;
    max-width: unset;
  }

  .simple-tools picture {
    max-width: 62vh;
  }

  .stk img {
    width: 100%;
    max-width: 450px;
    height: inherit;
  }

  .accordion-sec {
    width: 30vw;
    max-width: 450px;
    grid-column: 2;
    margin-right: 10%;
  }


 /*--------------------------------------------------
                   Stock Media
  --------------------------------------------------*/

  .stock-media {
    padding: 8rem 5rem;
  }

  .stock-media h2 {
    max-width: unset;
  }

  .stock-vid {
    display: block;
    width: -webkit-fill-available;
  }

  .stock-media div.slide:nth-child(2) picture,
  .stock-media div.slide:nth-child(3) picture,
  .stock-media div.slide:nth-child(5) picture {
    display: none;
   }

/*--------------------------------------------------
                  Your Footage Your Way
--------------------------------------------------*/

   .your-way {
     grid-template-columns: 1.6fr 1fr;
     grid-template-rows: auto 1fr 2fr 3fr;
     padding: 3rem;
    }

    .your-way h2 {
      grid-column: 1 /3;
      margin-bottom: 0;
      line-height: 1.3;
    }

    .your-way picture,
    .your-way video {
      grid-column: 1;
      grid-row: 2 / 5;
      align-self: center;
    }

    .your-way nav {
      grid-column: 2;
      grid-row: 3;
      align-self: end;
      justify-self: start;
    }

    .feature-des {
      width: 84%;
      grid-column: 2;
      grid-row: 4;
      justify-self: start;
    }

/*--------------------------------------------------
                  Blog Article
--------------------------------------------------*/

    .blog li a:last-of-type {
      bottom: 16px;
    }

  }


    /*==================================================
                    medium Desktop layout
    ==================================================*/

    @media (min-width: 1285px) {

   /*--------------------------------------------------
                    Mobile first layout
   --------------------------------------------------*/

  /* section {
     height: 100vh;
  } */

   /*--------------------------------------------------
                      Main Hero
   --------------------------------------------------*/

  .hero {
    grid-template-columns: 45% 55%;
  }

  /*--------------------------------------------------
                   Smarter features
   --------------------------------------------------*/

  /*   .smarter-features {
     height: 100vh;
  }    */

  /*--------------------------------------------------
                  Green Screen Effects
   --------------------------------------------------*/

  .green-screen-fx {
    min-height: unset;
  }


/*--------------------------------------------------
                  AI Tools
--------------------------------------------------*/

  .description {
    max-width: 450px;
    padding: 2.4rem;
    border-radius: 10px;
  }

    /*--------------------------------------------------
                    Customizable Content
  --------------------------------------------------*/

  .simple-tools .stk {
    padding: 3%;
  }

  .stk img {
    margin-left: 12%;
    max-width: 900px;
  }

  /*--------------------------------------------------
                        Stock Media
   --------------------------------------------------*/

  .stock-media {
    height: 100vh;
    height: var(--fit-height);
  }

  .stock-media h2 {
    z-index: 3;
}

    /*--------------------------------------------------
                  Your Footage Your Way
   --------------------------------------------------*/

  .your-way {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 0.5fr 3fr;
    height: min-content;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 49%, rgba(1,94,247,1) 49%);
  }

  .your-way h2 {
    grid-column: 1;
  }

  .your-way picture,
  .your-way video {
    grid-row: 2;
    align-self: center;
    padding-bottom: 0;
  }

  .your-way picture {
    width: 59%;
  }

  .your-way video {
    width: 50%;
  }

  .your-way nav {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column: 1;
    justify-self: center;
    width: 80%;
   }

  .feature-des {
    grid-column: 1;
    justify-self: center;
    width: 55%;
  }

  .btn-active {
    position: relative;
  }

  .btn-active::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: 48%;
    border: 10px solid transparent;
    border-top: 12px solid white;
  }

/*--------------------------------------------------
                       Reviews
 --------------------------------------------------*/

   /* .reviews {
    height: 100vh;
    height: var(--fit-height);
  } */

  .testim {
   padding: 3%;
   }

  .testim .cont div .img img.tom {
    width: 50%;
    height: auto;
    border-radius: 0;
    margin: 0 auto -4rem;
  }

  .testim .cont div .img img.pc-mag {
    width: 30%;
    height: auto;
    border-radius: 0;
    margin: -2rem auto;
  }

  .testim .cont div .img img.topten {
    width: 50%;
    height: auto;
    border-radius: 0;
    margin: -2rem auto -4rem;
  }
}

  /*==================================================
                  Large Desktop layout
  ==================================================*/

  @media (min-width: 1700px) {

/*--------------------------------------------------
                    Customizable Content
--------------------------------------------------*/
  .your-way nav {
		width: 60%;
  }

  .simple-tools picture {
    max-width: 70vh;
  }

}