/* YTH stuff */

  .YTHPhoneOnly {
      display:none;
  }

  .fullscreen-class {
    width:100% !important;
    height:100% !important;	  
  }

  #container4player {
    width:960px;
    height:540px;
    aspect-ratio: 16 / 9;   /* maintains 960:540 ratio */
    margin: 0 auto;    
  }

  @media (max-width: 960px) {	  
    #container4player {
      width:854px;
      height:480px;
    }
  }

  @media (max-width: 854px) {
    #container4player {
      width:640px;
      height:360px;
    }
  }
  
  @media (max-width: 640px) {
    #container4player {
      width:560px;
      height:315px;
    }
  }

  @media (max-width: 560px) {
    #container4player {
      width:416px;
      height:234px;
    }
    .YTHDesktopOnly {
      display:none;
    }
    .YTHPhoneOnly {
      display:table-cell;
     }
  }  

  @media (max-width: 416px) {
    #container4player {
      width:320px;
      height:180px;
    }
    .YTHDesktopOnly {
      display:none;
    }
    .YTHPhoneOnly {
      display:table-cell;
     }
  }  
    
  #player-container {
    position:relative;
    width:100%;   /* max size */
    height:100%;  /* 16:9 ratio */
    background:black;
    overflow:hidden;
  }

  #player-container iframe {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    border:0;
    pointer-events:none !important;
    z-index:1;
  }

  /* YTH_overlay (dark layer with "Click to Play") */
  #YTH_overlay {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.6);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
    font-size:1.3rem;
    transition:opacity .25s;
  }

  /* Top-right logo YTH_overlay */
  #logo_YTH_overlay {
    position:absolute;
    top:8px;
    right:20px;
    z-index:6;
    width:60px;      /* change as needed 60 or 90 */
    height:60px;
    pointer-events:none; /* so clicks pass through */
    opacity:1;
  }
  #flix_YTH_overlayL {
    position:absolute;
    z-index:6;
    bottom:1px;
    left:1px;
    width:300px;
    height:60px;
    
    pointer-events:none; /* so clicks pass through */
    opacity:1;
  }
  #flix_YTH_overlayR {
    position:absolute;
    z-index:6;
    bottom:12px;
    right:-1px;
    /* if YouTube is right use: bottom:12px; */
    /* if YouTube is right use: right:-1px; */
    /* if YouTube is left use: bottom:6px; */
    /* if YouTube is left use: left:3px; */
    /* right was: width:180px;   */   /* change as needed */
    /* right was: height:36px;   */
    /* left is: width:300px;     */   /* change as needed */
    /* left is: height:60px;     */
    width:180px;
    height:36px;
    
    pointer-events:none; /* so clicks pass through */
    opacity:1;
  }

  @media (max-width: 800px) {
    #logo_YTH_overlay {
      top:auto;
      bottom:4px;
      left:2px;
      opacity:1;
     }
     #flix_YTH_overlayL { /* not used, Logo is here */
       object-fit: cover;
       bottom:12px;
       left: 4px;
       right:auto;
       width:0px; /*200px 40px*/
       height:0px;
     }
     #flix_YTH_overlayR {
       object-fit: cover;
       bottom:12px;
       left: auto;
       right:6px;
       width:235px;
       height:47px;
     }
  }  

  @media (max-width: 560px) {
    #logo_YTH_overlay {
      right:10px;
     }
     #flix_YTH_overlayL { /* not used, Logo is here */
       object-fit: cover;
       bottom:4px;
       left: 4px;
       right:auto;
       width:0px; /*150px 30px*/
       height:0px;
     }
     #flix_YTH_overlayR {
       object-fit: cover;
       bottom:4px;
       left: auto;
       right:4px;
       width:210px; /*210 42*/
       height:42px;
     }
  }  


  #logo_YTH_overlay img, #logo_YTH_overlay svg {
    width:100%;
    height:100%;
    object-fit:contain;
  }

  #controls {
    margin-top:15px;
  }

  .YTControls {
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.3);
    color:white;
    border-radius:6px;
    padding:10px 20px;
    cursor:pointer;
    font-size:1rem;
    transition:background .2s;
    margin: 10px;
  }

  .YTControls:hover {
    background:rgba(255,255,255,0.25);
  }

  .YTH_TimeSpan {
    display:inline-block;
    background-color:white;
    border:2px black solid;
    margin-left:14px;
    padding:0 5px;
    border-radius:4px;
    color:black;
    font-size:0.9rem;
  }
  
  .VCHelpTD0 {
    padding:5px 10px;
  }
  
  .VCHelpTD7 {
    padding:5px 17px;
  }
  
  @media (max-width: 560px) {
    .YTH_TimeSpan {
      border:2px black solid;
      margin-left:14px;
      padding:0 5px;
      font-size:0.7rem;
    }
    .VCHelpTD0 {
      padding:0;
    }
    .VCHelpTD7 {
      padding:0 7px;
    }
  }


  .YTH_timelineHandle {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
            width: 14px;
            height: 14px;
            background: #fff;
            border: 2px solid #2196F3;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
  }