/* ===============================
   FLECHAS COMPACTAS CARRUSEL
   =============================== */


.principal-arrow{

  width:30px;

  height:30px;


  flex:0 0 30px;


  display:flex;

  align-items:center;

  justify-content:center;


  border-radius:50%;


  border:1px solid rgba(255,255,255,.12);


  background:#151d2c;


  color:#ffffff;


  font-size:22px;


  font-weight:300;


  cursor:pointer;


  transition:.2s ease;

}



.principal-arrow:hover{

  background:#2638c8;

  border-color:#6070ff;

}



.principal-arrow:active{

  transform:scale(.9);

}
/* =======================
   BOTÓN PANTALLA COMPLETA
======================= */

.fullscreen-toggle{
  flex:0 0 42px;

  width:42px;
  height:42px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:1px solid #111;
  border-radius:5px;

  background:
    linear-gradient(
      180deg,
      #505050 0%,
      #343434 100%
    );

  color:#fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 7px rgba(0,0,0,.30);

  cursor:pointer;

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}


.fullscreen-toggle:hover{
  border-color:#6070ff;

  background:
    linear-gradient(
      180deg,
      #3549d8 0%,
      #242e9d 100%
    );

  box-shadow:
    0 0 0 2px rgba(96,112,255,.16),
    inset 0 1px 0 rgba(255,255,255,.14);
}


.fullscreen-toggle:active{
  transform:scale(.94);
}


/* Estado activo */

.fullscreen-toggle.activo{
  border-color:#0b8411;

  background:
    linear-gradient(
      180deg,
      #13b51b 0%,
      #07880d 100%
    );

  box-shadow:
    0 0 0 2px rgba(19,181,27,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}


/* Iconos */

.fullscreen-icon{
  width:20px;
  height:20px;

  display:block;

  pointer-events:none;
}


.fullscreen-icon-exit{
  display:none;
}


.fullscreen-toggle.activo
.fullscreen-icon-enter{
  display:none;
}


.fullscreen-toggle.activo
.fullscreen-icon-exit{
  display:block;
}


/* En móvil pequeño no es necesario mostrarlo */

@media(max-width:520px){

  .fullscreen-toggle{
    display:none;
  }

}