/*--------------------------------------------------
                     HTML5 Reset
 --------------------------------------------------*/
 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;
 }
 
 address, article, aside, canvas, details, figcaption,
 figure, footer, header, hgroup, menu, nav, section, summary, img {
   display: block;
 }
 
 *, *:before, *:after {
     box-sizing: border-box;
 }
 
 ul {
   list-style-type: none;
 }
 
 a {
   text-decoration: none;
 }
 
 a:hover {
   color: white;
 }
 
 picture {
   z-index: 1;
 }
 
 .container {
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 
 /*--------------------------------------------------
      removed white space glich in RD's module
  --------------------------------------------------*/
 
.toptop_banner.full,
.nav_mobile.submenu_nav {
  float: left;
  width: 100%;
  margin-bottom: 0;
 }
 
.pd_purchase_left #purchase_title {
  top: -33px;
 }

 .pd_purchase_full .promo_box_ribbon {
  left: 0;
}
 
 
 /*--------------------------------------------------
                         Fonts
  --------------------------------------------------*/
 
 
 h1, h2, h3, h4, h5 {
   font-family: 'Roboto', sans-serif;
 }
 
 h2 {
   font-size: 2.6rem;
   font-weight: 600;
 }
 
 h3 {
   font-size: clamp(1.8rem, 2vw, 33px);
   font-weight: 600;
 }
 
 h2,h3, main p {
   color: white;
   line-height: 2.6rem;
 }
 
 main p {
   font-size: 1.2rem;
   line-height: 2rem;
   font-family: sans-serif;
   font-weight: 100;
 }
 

 
 /*--------------------------------------------------
             Japan only style "software labels"
  --------------------------------------------------*/
 
 .center-labels {
   display: flex;
   justify-content: center;
  }
 
 span.standard,
 span.pro,
 span.ultra,
 span.sub {
   display: block;
   float: left;
   padding: 0.2em 1.5em 0.2em 1.5em;
   font-size: 0.9em;
   color: #fff;
   margin-right: 0.5em;
   margin-bottom: 5px;
 }
 
 span.standard {
   background: #0c9784;
 }
 
 span.pro {
   background: #0c7cba;
 }
 
 span.ultra {
   background: #821d7e;
 }
 
 span.sub {
   background: black;
   outline-width: 1px;
   outline-style: solid;
   outline-color: #444444;
 }
 
 sup {
     font-size: 73%;
     /*font-style: italic;*/
     /*opacity: 0.4;*/
 }

/*--------------------------------------------------
                  Red labels
--------------------------------------------------*/
span.red-label {
  font-size: clamp(12px, 2vw, 19px);
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  border-radius: 15px;
  position: absolute;
  rotate: -15deg;
  color: white;
  line-height: 1;
  background: red;
  text-shadow: 2px 1px 3px black;
  z-index: 2;
  left: 14px;
  top: -13px;
}

 span.new {
  position: absolute;
  top: -27px;
  left: -25px;
  background: red;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-size: clamp(12px, 2vw, 15px);
  rotate: -15deg;
  color: white;
  line-height: 1;
 }
 
 /*--------------------------------------------------
                   Mobile first layout
  --------------------------------------------------*/
 
 section {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
   overflow: hidden;
 }
 
 #main-content img {
   width: 100%;
 }
 
 section > div {
   padding: 2rem 1.5rem;
   height: fit-content;
 }
 
     /*=====   logos   ======*/
 
 #def-logos,
 #disc-logos,
 #codec-logos,
 #sound-logos,
 #casting-logos {
   width: 100%;
   height: auto;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding-top: 0.5rem;
 }
 
 #def-logos,
 #disc-logos,
 #sound-logos,
 #casting-logos {
   max-width: 340px;
 }
 
 #def-logos img,
 #disc-logos img,
 #sound-logos img {
   width: calc(100% / 3.4);
 }
 
 #def-logos img,
 #disc-logos img {
   max-width: 112px;
 }
 
 
       /*=====   Play Button   ======*/
 
 .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);
 }
 
 
 /*--------------------------------------------------
            Your Movies, Your Way section
  --------------------------------------------------*/
 
  #your-movie .left-side,
  #your-movie picture {
   background: #1f006c;
  }
 
 
 /*--------------------------------------------------
               Studio-Quality Audio section
  --------------------------------------------------*/
#studio-quality {
  /* background: #1f006c; */
  background: #000;
 }
 
 
 /*--------------------------------------------------
                   YouTube section
  --------------------------------------------------*/
#youtube {
background: #000;
}

 .sub-yt-grid {
   display: grid;
   grid-template-columns: 1fr;
 }
 
 .sub-yt-grid img {
   width: 100%;
   grid-column: 1;
   grid-row: 1;
 }
 
 #yt-video {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
    width: 20%;
    height: 30%;
    justify-self: center;
    align-self: center;
    cursor: pointer;
 }
 
 img#yt {
   padding-top: 0.5rem;
   width: 50%;
   max-width: 200px;
   min-width: 150px;
 }
 

 /*--------------------------------------------------
             Extract Trim Convert section
  --------------------------------------------------*/
 
 
 @keyframes trim {
   0%   {transform: translate(0px, 220px);
         opacity: 0;}
   100% {transform: translate(0px, 0px);
         opacity: 1;}
 }
 
 .icons-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 2rem;
   width: 100%;
   text-align: center;
   margin: 0 auto;
 }
 
 .icons-cards span img {
   width: 100%;
   opacity: 0.25;
   filter: drop-shadow(2px 4px 11px #00000096);
 }
 
 #extract,
 #trim,
 #convert {
   opacity: 0;
   animation-fill-mode: forwards;
   animation-duration: 1s;
   animation-iteration-count: 1;
   animation-delay: 0.5s;
   background: #22146e;
   border-radius: 2rem;
   overflow: hidden;
   padding: 1em;
   background: rgb(86,73,184);
   background: linear-gradient(51deg, rgba(86,73,184,1) -17%, rgba(34,20,110,1) 100%);
   box-shadow: inset 2px 2px 2px 2px #61359a73,
                     2px 4px 11px #00000096;
 }
 
 #etc {
  background: #1f006c;
 }
 
 
 /*==================================================
                     iPad layout
 ==================================================*/
 
 @media (min-width: 600px) {
 
   /*-///////////  Basic layout /////////////-*/
 
   section {
     grid-template-columns: 1fr 1fr;
   }
 
   section div,
   section img {
     background: none;
     z-index: 1;
   }
 
   section div.full-width:not(.icons-cards) {
     z-index: 2;
     padding: 7% 1.5rem;
   }

   section picture {
    align-self: end;
   }

   .full-width {
     grid-column: 1 / -1;
     text-align: center;
   }
 
   .left-side,
   .right-side {
     align-self: center;
     place-self: center;
   }
 
   div.left-side,
   div.right-side {
     max-width: 500px;
   }
 
   .left-side {
     grid-column: 1;
   }
 
   .right-side {
     grid-column: 2;
   }
 
   img.full-width {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

/*--------------------------------------------------
                  Red labels
--------------------------------------------------*/
  span.red-label {
    top: 0;
    left: -40px;
  }
 
   /*--------------------------------------------------
            Your Movies, Your Way section
   --------------------------------------------------*/
 
   #your-movie .right-side,
   #your-movie .left-side {
     grid-row: 1;
   }
 
   #your-movie picture {
     padding: 10%;
   }
 
   #your-movie {
     background: #1f006c;
   }
 
   /*--------------------------------------------------
               Studio-Quality Audio section
   --------------------------------------------------*/
  
  #studio-quality {
   /* background: #1f006c; */
   overflow: visible;
  }

   #studio-quality .right-side,
   #studio-quality .left-side {
    grid-row: 1;
   }

   #studio-quality .audio-studio {
    transform: scale(1.5);
    margin: 8% 10% 15% 0;
    z-index: 3;
   }
 
 
   /*--------------------------------------------------
                   YouTube section
   --------------------------------------------------*/
   #youtube .intro {
     grid-row: 1;
   }
 
   #youtube .sub-yt-grid,
   #youtube .right-side {
     grid-row: 2 / 3;
   }
 
 
   /*--------------------------------------------------
             Extract Trim Convert section
   --------------------------------------------------*/
 
   #etc {
    background: #1f006c;
   }
 
   #etc .icons-cards {
    max-width: 900px;
    margin: 7% auto;
    grid-row: 1;
   }

 }
 
 
 /*==================================================
                   Desktop layout
 ==================================================*/
 
 @media (min-width: 1065px) {
 
   /*-///////////  Basic layout /////////////-*/
 
   section {
     grid-template-columns:
       minmax(25px, 1fr)
       minmax(min-content, 520px)
       minmax(7%, 100px)
       minmax(7%, 100px)
       minmax(min-content, 520px)
       minmax(25px, 1fr)
   }

   section div.full-width:not(.icons-cards) {
    padding: 7% 1.5rem 0;
  }
 
   .full-width {
     grid-column: 1 / 7;
   }
 
   div.left-side,
   div.right-side {
     max-width: 520px;
   }
 
   .left-side {
     grid-column: 2;
   }
 
   .right-side {
     grid-column: 5;
   }
 
   /*--------------------------------------------------
            Your Movies, Your Way section
   --------------------------------------------------*/
 
   #your-movie picture {
     grid-column: 3 / 6;
   }
 
   /*--------------------------------------------------
               Studio-Quality Audio section
   --------------------------------------------------*/
 
   #studio-quality .audio-studio {
     grid-column: 4 / 6;
   }
 
   /*--------------------------------------------------
             Extract Trim Convert section
   --------------------------------------------------*/
   #etc {
    background: #1f006c;
   }

   #etc .icons-cards {
     max-width: 1000px;
   }
 
 }