/* 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.7);
    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_overlay {
    position:absolute;
    bottom:12px;
    right:-1px;
    z-index:6;
    width:180px;      /* change as needed */
    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_overlay {
       object-fit: cover;
       bottom:12px;
       right:8px;
       width:235px;
       height:47px;
       opacity:1;
     }
  }  

  @media (max-width: 560px) {
    #logo_YTH_overlay {
      right:10px;
     }
     #flix_YTH_overlay {
       object-fit: cover;
       bottom:4px;
       right:8px;
       width:210px;
       height:42px;
       opacity:1;
     }
  }  


  #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);
  }