html {
      background: url(https://iddwqlawgjth.objectstorage.us-ashburn-1.oci.customer-oci.com/p/-JzTmvU957oXL4EV7QhohC61H4R284hsNms8FAFwvGFzq2nFIFxcy42HZIM9a0qK/n/iddwqlawgjth/b/email-images/o/MARIUS.BACIU@ORACLE.COM_bg-abstracts-mobileapp.png) top center no-repeat;
      background-size: cover;
      background-attachment: fixed;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
    }

    * {
      box-sizing: border-box
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
    }

    .mySlides {
      display: none;
      box-shadow: 0 0 30px #00000062;
    }

    img {
      vertical-align: top;
    }




    #menu_footer {
      text-align: center;
      position: fixed;
      bottom: 0px;
      margin-top: -30px;
      width: 100%;
      background: #04232D;
      /* background: rgb(132, 171, 170);
      background: -moz-linear-gradient(180deg, rgb(132, 135, 171) 10%, rgba(132, 171, 170, 0) 100%);
      background: -webkit-linear-gradient(180deg, rgba(132, 171, 170, 1) 10%, rgba(132, 171, 170, 0) 100%);
      background: linear-gradient(180deg, rgba(132, 171, 170, 1) 10%, rgba(132, 171, 170, 0) 100%); */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#84abaa", endColorstr="#84abaa", GradientType=1);
      max-width: 450px;
      width: 100%;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      z-index: 10001;
      margin: 0 auto;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
    }

    @media only screen and (min-width: 450px) {
      #menu_footer {
        left: calc(50% - 225px);
      }
    }


    /* Style the buttons */
    .btn {
      border: none;
      outline: none;
      padding: 10px; 
      background-color: transparent;
      color: #fefefe;
      cursor: pointer;
      font-size: 12px;
      display: inline-block;
      border-radius: 5px;
      transition-duration: 0.5s;
      animation-duration: 0.5s;
    }

    .btn p {
      font-size: 12px;
      line-height: 12px;
      color: #ffffff;
    }

    .btn i {
      display: inline-block;
      font-size: 22px;
      margin: 2px;
    }

    .active p {
      display: none;
      /* color: #ffffff; */
    }

    .btn.active i {
      font-size: 35px;
      padding: 10px;
    }

    .btn.large.active i {

      vertical-align: top;
    }

    /* Style the active class, and buttons on mouse-over */
    .active {
      color: rgb(255, 255, 255);
      background: #04232D;
      /* background: -moz-linear-gradient(180deg, rgba(132, 171, 170, 1) 20%, rgba(132, 171, 170, 0) 50%);
      background: -webkit-linear-gradient(180deg, rgba(132, 171, 170, 1) 20%, rgba(132, 171, 170, 0) 50%);
      background: linear-gradient(180deg, rgba(132, 171, 170, 1) 20%, rgba(132, 171, 170, 0) 50%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#84abaa", endColorstr="#84abaa", GradientType=1); */
      vertical-align: top;
      border-radius: 5px 5px 0 0;
      margin-top: -10px;
      box-shadow: 0 5px 15px #000000dc;
    }

    /* Slideshow container */
    .slideshow-container {
      max-width: 450px;
      position: relative;
      margin: auto;
    }

    header {
      margin: 0 auto;
      margin-bottom: 0px;
      position: fixed;
      display: flex;
      background-color: transparent;
      height: 100px;
      width: 100%;
      max-width: 450px;
      top: 0;
      background-size: cover;
      text-align: center;
      vertical-align: bottom;
      z-index: 100;
      align-items: flex-start;
      justify-content: space-between;
    }

    header img {
      max-width: 450px;
      width: 100vw;
      height: auto;
    }

    iframe,
    .player-placeholder {
      position: absolute;
      max-width: 450px;
      width: 100%;
      aspect-ratio: 16/9 !important;
    }

    .push {
      user-select: none;
      cursor: pointer;
      width: 100%;
      height: 3%;
      /* background-color: rgba(213, 223, 17, 0.507); */
      position: absolute;
      margin: 0 auto;
      border-radius: 5px;
    }

 

    .video-page {
      background: url(https://iddwqlawgjth.objectstorage.us-ashburn-1.oci.customer-oci.com/p/-JzTmvU957oXL4EV7QhohC61H4R284hsNms8FAFwvGFzq2nFIFxcy42HZIM9a0qK/n/iddwqlawgjth/b/email-images/o/ALEXIE.PISICA@ORACLE.COM_CHLA_Mobile_App_bg_video.jpg) center top no-repeat;
      background-size: cover;
      overflow: hidden;
      height: 100vh;
    }

    .back {
      width: 15%;
      height: 30%;
      top: 7%;
      left: 2%;
    }

    .splashcreen {
      width: 70%;
      height: 60%;
      top: 30%;
      left: 15%;
    }

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1s;
    }

    @keyframes fade {
      from {
        opacity: 0.5
      }

      to {
        opacity: 1
      }
    }

    #ctxmenu {
      position: fixed;
      background: ghostwhite;
      color: black;
      cursor: pointer;
      border: 1px black solid;
      border-radius: 5px;
    }

    #ctxmenu>p {
      padding: 0 10px;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
    }

    #video_container {
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translateX(-50%);
      width: 93%;
      z-index: 10;
    }

    #video_youtube {
      width: 100%;
      max-width: 442px;
      height: 250px;
    }