/* reescribimos partes que no nos interesan ahora de los paneles */
.absolute-center {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

#horizontal-login .panel-login {
  max-width: 100%;
}

/* a partir de aquí metemos css necesario para login horizontal y vertical */
#horizontal-login, #vertical-login {
  /*position: fixed;*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*min-height: 200px;*/
  /*min-width: 200px;*/
}

#vertical-login {
  display: block;
  position: absolute;
  /*border: 2px solid purple;
  background-color: purple;*/
}

#horizontal-login {
  display: none;
  position: absolute;
  min-width: 700px;
  /*border: 2px solid blue;
  background-color: blue;*/
}



#vertical-login .custom-logo {
  margin: auto; /* centrarlo */
}

#vertical-login h4.server-identifier {
  text-align: center;
  margin-top: 2px;
}

#horizontal-login h4.server-identifier {
  text-align: right;
  margin-top: -8px;
}

.boton_rrss.boton_youtube {
  width: 116px;
  margin: auto;
  background-color: #dd4b39;
  color: white;
  font-weight: 500;
  cursor: pointer;
  height: 28px;
  border-radius: 9999px;
  padding: 1px 12px 1px 12px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 26px;
  vertical-align: middle;
}

.boton_rrss.boton_youtube i {
  font-size: 17px;
  line-height: 26px;
  vertical-align: baseline;
}

/* finalmente decidimos qué formato mostrar en base al ancho disponible */
@media (min-width: 768px, max-width: 768px;) {
  .absolute-center {
    min-width: 700px !important;
    top: auto !important;
    left: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 767px) {
  .absolute-center {
    top: auto !important;
    left: auto !important;
    margin-left: auto !important;
  }
}
@media (min-width: 769px) {
  #vertical-login {
    display: none;
  }
  #horizontal-login {
    display: block;
  }
  .boton_rrss.boton_youtube {
    width: 180px;
  }
}