/* Space out content a bit */

    body {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
      /* Everything but the jumbotron gets side spacing for mobile first views */
  
      .header,
      .marketing,
      .footer {
        padding-right: 1rem;
        padding-left: 1rem;
      }
      /* Custom page header */
  
      .header {
        padding-bottom: 1rem;
        border-bottom: .05rem solid #e5e5e5;
      }
      /* Make the masthead heading the same height as the navigation */
  
      .header h3 {
        margin-top: 0;
        margin-bottom: 0;
        line-height: 3rem;
      }
      /* Custom page footer */
  
      .footer {
        padding-top: 1.5rem;
        color: #FFF;
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 0;
      }
      /* Customize container */
  
      @media (min-width: 48em) {
        .container {
          max-width: 46rem;
        }
      }
  
      .container-narrow>hr {
        margin: 2rem 0;
      }
      /* Main marketing message and sign up button */
  
      .jumbotron {
        background-color: rgba(255,255,255,0.10);
        color: #333333;
        text-align: center;
        border-bottom: .05rem solid #e5e5e5;
      }      
      
      .jumbotron .lead {
        text-align: justify;
        padding: 1em 0;
        /* font-weight: lighter; */
        letter-spacing: 0.08em;
        color: #333333;
      }
  
      .jumbotron .btn {
        padding: .75rem 1.5rem;
        font-size: 1.5rem;
      }     
       .jumbotron #codeField {
        background-color: rgba(255,255,255,0.2);
        border: 2px solid rgba(255,255,255, 1);
        color: #333333;
      }
      /* Supporting marketing content */
  
      .marketing {
        margin: 3rem 0;
      }
  
      .marketing p+h4 {
        margin-top: 1.5rem;
      }
      /* Responsive: Portrait tablets and up */
  
      @media screen and (min-width: 48em) {
        /* Remove the padding we set earlier */
        .header,
        .marketing,
        .footer {
          padding-right: 0;
          padding-left: 0;
        }
        /* Space out the masthead */
        .header {
          margin-bottom: 2rem;
        }
        /* Remove the bottom border on the jumbotron for visual effect */
        .jumbotron {
          border-bottom: 0;
        }
      }

      #codeField {
        text-align: center;
      }


      #mainBlock {
        position: absolute;
        top: 50px;
      }

      .img-responsive {
        width: 100%;
        height: auto;
        display: block;
      }

      /* BIDEO */
      .container {
        overflow: hidden;
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
      }
  
      #background_video {
        position: absolute;
  
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
  
        object-fit: cover;
        height: 100%; width: 100%;
      }
  
      #video_cover {
        position: absolute;
  
        width: 100%; height: 100%;
  
        background: url('bg_img.jpg') no-repeat;
        background-size: cover;
        background-position: center;
      }
  
      #video_controls {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
      }
  
      #play img {
        width: 100px;
      }
      #pause img {
        width: 90px;
      }
      #pause {
        display: none;
      }
  
      @media (min-width: 768px) {
        #video_controls {
          display: none;
        }
      }