/* Pagina departamento de formacion (4 botones) */

#departamento-formacion {
  width: 100%;
  border-collapse: collapse;
}
#departamento-formacion-movil {
  display: none;
}
#departamento-formacion td,
#departamento-formacion-movil td {
  border: 25px solid transparent;
  padding: 0;
}
@media only screen and (max-width: 880px) {
  #departamento-formacion {
    display: none;
  }
  #departamento-formacion-movil {
    display: table;
  }
}

/* FIN Pagina departamento de formacion */

/* LISTADO DE CURSOS */

/* Icono cargando */

.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.cube1,
.cube2 {
  background-color: #490a4a;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg)
      scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg)
      scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

/* FIN Icono cargando */

/* Listado cursos */

#banner_cursos {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#botones_ordenar {
  float: right;
  margin-bottom: 20px;
}
#botones_ordenar span {
  font-size: 25px;
  padding-top: 30px;
}
.boton_ordenar {
  border-radius: 5px;
  border: 1px solid black;
  color: black;
  background-color: white;
  width: 80px;
  height: 50px;
  padding: 0;
  margin: 0 5px;
  font-size: 20px;
  display: inline-block;
}
.boton_ordenar:hover,
.boton_ordenar:focus {
  background-color: #490a4a;
  color: white;
}
.boton_ordenar:hover img,
.boton_ordenar:focus img {
  filter: invert(100%);
}
.boton_ordenar img {
  height: 70%;
}
.alert {
  width: 80%;
  margin: 0 auto;
  font-size: 20px;
  height: 50px;
  vertical-align: middle;
  border-radius: 10px;
  border: 2px solid #6f5400;
  padding: 10px;
  background-color: #fff3cd;
  color: #856404;
  display: flex !important;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  align-items: center;
}
#padre {
  padding: 0 20px;
}
.tabla_curso {
  height: 140px;
  width: 100%;
  border: solid 1px #ddd;
  margin-bottom: 20px;
  vertical-align: middle;
}
.tabla_curso tbody,
.tabla_curso tbody > tr {
  vertical-align: inherit;
}
.tabla_curso td {
  vertical-align: inherit;
  text-align: left;
  color: #222;
}
#padre .tabla_curso:hover {
  border: 1px solid grey;
  box-shadow: 0 0 5px #490a4a;
}
.tabla_curso_imagen {
  width: 180px;
  height: 140px;
  padding: 0;
  text-align: center;
}
.tabla_curso_imagen img {
  height: auto;
}
.tabla_curso_titulo {
  font-size: 23px !important;
  font-weight: bolder;
  text-align: left;
  border-bottom: 1px solid grey;
  padding: 10px;
}
.tabla_curso_titulo a {
  color: #0169a5;
}
.tabla_curso_titulo a:hover {
  color: #01598c;
  text-decoration: underline !important;
}
/* En la página de microcredenciales, cambiar el color */
#contenido_microcredenciales .tabla_curso_titulo a {
  color: #333333;
}
#contenido_microcredenciales .tabla_curso_titulo a:hover {
  color: #555555;
}
.boton_link {
  width: 100%;
  height: 100%;
  font-size: 1em;
  background-color: lightblue;
  color: white;
  border-radius: 5px;
  border: none;
  margin: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 5px;
}
/* FIN LISTADO DE CRUSOS */

/* ENTRADA de un curso */
#entrada_curso {
  position: relative;
}
#entrada_curso .tabla_curso_imagen {
  height: 100px;
  width: 230px;
}
#entrada_curso .tabla_curso_imagen img {
  width: auto;
  height: 100%;
}
#entrada_curso #boton_inscribete,
#entrada_curso #boton_tarifas {
  padding: 0;
}
#entrada_curso #boton_tarifas {
  width: 100px;
  position: absolute;
  top: 0;
  right: 15px;
}
#entrada_curso #boton_inscribete button {
  width: 100%;
  height: 100%;
  font-size: 1.3em;
  background-color: #490a4a;
  border-radius: 10px;
  border: none;
  margin: 0;
  margin-top: 10px;
  padding: 0.8em;
  color: white;
  cursor: pointer;
}
#entrada_curso #boton_tarifas button {
  width: 100%;
  height: 100%;
  font-size: 1.3em;
  background-color: #2ba6cb;
  border-radius: 10px;
  border: none;
  margin: 0;
  margin-top: 10px;
  padding: 15px 10px;
  color: white;
  cursor: pointer;
}
.centro-idiomas #entrada_curso #boton_inscribete button {
  background-color: #207d99;
}
#entrada_curso #boton_inscribete button:hover {
  background-color: #6a2c6b;
}
.centro-idiomas #entrada_curso #boton_inscribete button:hover {
  background-color: #124e60;
}
#entrada_curso #boton_tarifas button:hover {
  background-color: #1f8aab;
}

/* MODAL DE TARIFAS */
.modal-tarifas {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.modal-tarifas .close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  top: 0;
}
.modal-tarifas .close:hover,
.modal-tarifas .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-tarifas .modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

.modal-header {
  padding: 2px 16px;
  background-color: #490a4a;
  color: white;
}
.centro-idiomas .modal-header {
  background-color: #e27000;
}

.modal-tarifas .modal-header h2 {
  padding-top: 3px;
  color: white;
}

.modal-tarifas .modal-body {
  padding: 5px;
}

/* FIN MODAL DE TARIFAS */

/* FIN ENTRADA de un curso*/

/* Animaciones modal */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@media only screen and (max-width: 720px) {
  footer#mainfooter div.logos img {
    height: auto;
  }
  #entrada_curso .tabla_curso_imagen {
    display: none;
  }
  #padre .tabla_curso_imagen {
    width: 150px;
  }
  .tabla_curso_titulo {
    font-size: 15px !important;
  }
  .tabla_curso_fecha,
  .tabla_curso_area {
    text-align: left;
  }
  #entrada_curso #boton_tarifas {
    padding-bottom: 10px;
    height: 100px;
    width: 100%;
    position: static;
  }
  #entrada_curso #boton_inscribete {
    height: 100px;
  }
  /* MODAL DE TARIFAS*/
  .modal-tarifas {
    padding-top: 130px;
  }
  .modal-tarifas .modal-content {
    width: 100%;
  }
  /* FIN MODAL DE TARIFAS */
}