* {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      html {
        font-size: 15px;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      body {
        font-family: "Open Sans", sans-serif;
        position: relative;
        background-color: #454545;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
      }
      @-webkit-keyframes show {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes show {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-webkit-keyframes hidden {
        100% {
          opacity: 0;
        }
      }
      @keyframes hidden {
        100% {
          opacity: 0;
        }
      }
      .wrapper {
        position: absolute;
        margin-bottom: 100px;
        width: 87%;
        max-width: 400px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
        z-index: 100;
        -webkit-animation: show 1.2s steps(1, end) 1;
        animation: show 1.2s steps(1, end) 1;
      }
      .top_wrapper {
        padding: 17px;
        width: 100%;
        text-align: center;
      }
      .top_wrapper h1 {
        text-transform: capitalize;
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .button {
        width: 100%;
        color: #2289fb;
        font-size: 1.3rem;
        font-weight: 400;
        border-top: solid 1px rgba(0, 0, 0, 0.15);
        text-align: center;
        padding: 13px 10px;
        cursor: pointer;
      }
      .button:hover {
        background: rgba(225, 225, 225, 0.5);
        border-radius: 0 0 10px 10px;
      }
      .player {
        width: 100%;
        max-width: 850px;
        height: 60vh;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 15px;
        background: #000;
        color: #fff;
      }
      .bg {
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(#);
        background-size: cover;
        opacity: 0;
        -webkit-animation: show 1s linear forwards;
        animation: show 1s linear forwards;
      }
      .top_icons {
        position: relative;
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }
      .top_icons_left {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
      }
      .top_icons_left img {
        opacity: 0.55;
      }
      .top_icons_left p {
        margin-left: 8px;
        font-size: 0.85rem;
      }
      .top_icons_left:hover img {
        opacity: 1;
      }
      .top_icons img {
        height: 22px;
        cursor: pointer;
      }
      .player_content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        width: 100%;
      }
      .player_content .loading {
        position: absolute;
        padding-top: 50px;
        width: 60px;
        opacity: 0;
        -webkit-animation: show 0.9s steps(1, end) forwards;
        animation: show 0.9s steps(1, end) forwards;
      }
      .player_content .sequence {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }
      .player_content .sequence_icon {
        padding: 18px 16px 18px 12px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.8;
      }
      .player_content .sequence_icon img {
        height: 22px;
      }
      .player_content .sequence_icon:hover {
        opacity: 1;
      }
      .player_content .sequence_icon:last-child {
        padding: 18px 12px 18px 16px;
      }
      .player_content .sequence_icon:last-child img {
        -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        transform: scaleX(-1);
      }
      .pause_play {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }
      .pause_play img:first-child {
        position: absolute;
        opacity: 0;
        -webkit-animation: show 0.9s steps(1, end) forwards;
        animation: show 0.9s steps(1, end) forwards;
      }
      .pause_play img:last-child {
        -webkit-animation: hidden 0.9s steps(1, end) forwards;
        animation: hidden 0.9s steps(1, end) forwards;
      }
      .player_navigation {
        width: 100%;
      }
      .player_navigation_item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 12px 10px 0;
      }
      .player_navigation_item img {
        height: 20px;
        cursor: pointer;
        opacity: 0.8;
      }
      .player_navigation_item .icon_margin {
        margin: 0 15px;
      }
      .player_navigation_item p {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-size: 0.8rem;
        margin-left: 15px;
        opacity: 0.8;
      }
      .progress {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 2px;
        background: rgba(255, 255, 255, 0.3);
        position: relative;
        cursor: pointer;
      }
      .progress_load {
        width: 0%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        -webkit-animation: progress_load 20s linear forwards;
        animation: progress_load 20s linear forwards;
      }
      .progress_line {
        width: 0%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        -webkit-animation: progress_line 1s linear forwards;
        animation: progress_line 1s linear forwards;
      }
      @-webkit-keyframes progress_load {
        0% {
          width: 0;
        }
        100% {
          width: 50%;
        }
      }
      @keyframes progress_load {
        0% {
          width: 0;
        }
        100% {
          width: 50%;
        }
      }
      @-webkit-keyframes progress_line {
        0% {
          width: 0;
        }
        100% {
          width: 10px;
        }
      }
      @keyframes progress_line {
        0% {
          width: 0;
        }
        100% {
          width: 10px;
        }
      }
      @-webkit-keyframes progress_slider {
        0% {
          left: 0px;
        }
        100% {
          left: 7px;
        }
      }
      @keyframes progress_slider {
        0% {
          left: 0px;
        }
        100% {
          left: 7px;
        }
      }
      /*************** media queries start ***********/
      @media screen and (max-width: 992px) {
        .player {
          height: 75vh;
        }
      }
      @media screen and (max-width: 768px) {
        .player {
          height: 42vh;
        }
      }
      @media screen and (max-width: 768px) and (orientation: landscape) {
        .player {
          height: 80vh;
        }
      }
      @media screen and (max-width: 576px) {
        .player_navigation_item {
          padding: 12px 0 0;
        }
      }
      @media screen and (max-width: 440px) {
        .player_content .loading {
          width: 40px;
          padding-top: 25px;
        }
        .player_content .sequence_icon {
          padding: 14px 13px 14px 10px;
          border-radius: 3px;
        }
        .player_content .sequence_icon img {
          height: 18px;
        }
        .player_content .sequence_icon:last-child {
          padding: 14px 10px 14px 13px;
        }
        .player_navigation_item {
          padding: 8px 0 0;
        }
        .player_navigation_item .icon_margin {
          margin: 0 12px;
        }
        .player_navigation_item p {
          margin-left: 12px;
        }
      }
      @media screen and (max-width: 320px), screen and (max-width: 480px) and (orientation: landscape) {
        html {
          font-size: 14px;
        }
        .player_content .loading {
          width: 40px;
          padding-top: 20px;
        }
      }
      @media screen and (max-width: 840px) and (max-height: 440px) and (orientation: landscape) {
        body {
          -webkit-box-align: start;
          -webkit-align-items: flex-start;
          -ms-flex-align: start;
          align-items: flex-start;
        }
        .player {
          width: 100%;
          height: 100%;
        }
        .player_content .loading {
          padding-top: 0;
        }
        .player_content .sequence_icon {
          padding: 14px 13px 14px 10px;
          border-radius: 3px;
        }
        .player_content .sequence_icon img {
          height: 18px;
        }
        .player_content .sequence_icon:last-child {
          padding: 14px 10px 14px 13px;
        }
      }

      /*************** media queries FOR WRAPPER ONLY ***********/

      @media screen and (max-width: 320px), screen and (max-width: 480px) and (orientation: landscape) {
        .top_wrapper {
          padding: 17px;
        }
      }

      @media screen and (max-width: 840px) and (max-height: 440px) and (orientation: landscape) {
        .wrapper {
          margin-bottom: 0;
          margin-top: 8px;
        }
      }