<div class="container-fluid p-0">
  <img
    src="{{apiImagenes}}/imagenes/homeBackground.jpg"
    class="background-image vh-100 w-100">
  <div
    class="fade-in vh-100 d-flex align-content-between flex-wrap disable-user-select"
    [routerLink]="['/inicio']">

    <!-- HEADER -->
    <div class="vh-15 d-flex flex-row flex-wrap m-0 w-100 bg-primary-gradient-horizontal">
      <div class="h-100 w-50 bg-white rounded-bottom-right">
        <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
      </div>
    </div>

    <!-- INFO DE BIENVENIDA -->
    <div class="d-flex h-50 flex-row flex-wrap justify-content-around align-items-center w-100 m-3">
      <iframe
        class="w-50 h-100 rounded fade-in"
        src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
      </iframe>
      <div class="w-auto text-center text-white">
        <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
        <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
      </div>
    </div>

    <!-- FOOTER -->
    <div class="vh-15 d-flex flex-row-reverse flex-wrap w-100 bg-gray">
      <div class="h-100 w-50 bg-white rounded-top-left">
        <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
      </div>
    </div>

  </div>
</div>