.astel-page-container {
  width: 100%;
  max-width: 420px;
  height: 100%;
  padding-bottom: 200px;
  background: url("./astel/astel_bg.jpg") no-repeat;
  text-align: center;
  background-position: center;
  overflow: hidden;
}



.astel-text-container {
  position: relative;
  width: 80%;
  height: auto;
  margin: 0 auto;
  z-index: 5;
  top: -20px;
}

.astel-text-container h1 {
  font-size: 21px;
  letter-spacing: 1px;
}

.astel-text-container p {
  width: 90%;
  margin: 0 auto;
  font-size: 14px;
  line-height: 17px;
  height: 37px;
}

.astel-text-class {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  margin-top: -20px;
}

.astel-text-class h1 {
  font-size: 18px;
  margin: 0 10px 0 0;
  letter-spacing: 1px;
}

.astel-text-class p {
  font-size: 13px;
  line-height: 15px;
  margin: 0 5px;
  text-align: left;
}


.astel-carousel {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0px;
  padding: 0px;
  margin: 0 auto;
  top: -5px;
}

.carousel-indicators {
  position: relative;
  padding-top: 30px;
}

.carousel-indicators .active {
  background-color: #ffff99;
}

.astel-slide {
  z-index: 10;
  position: relative;
  margin: 0 auto;
  height: auto;
}

.astel-slide div {
  float: left;
  margin: 0 2px;
}

.braga {
  width: 50px;
  height: 300px;
  background: url("./astel/braga.jpg");
}

.braga:hover {
  transition: 1s;
  background: url("./astel/braga_hover.jpg");
}

.braga-active {
  background: url("./astel/braga_hover.jpg");
}

.eligos {
  width: 50px;
  height: 300px;
  background: url("./astel/eligos.jpg");
}

.eligos:hover {
  transition: 1s;
  background: url("./astel/eligos_hover.jpg");
}

.eligos-active {
  background: url("./astel/eligos_hover.jpg");
}

.seika {
  width: 50px;
  height: 300px;
  background: url("./astel/seika.jpg");
}

.seika:hover {
  transition: 1s;
  background: url("./astel/seika_hover.jpg");
}

.seika-active {
  background: url("./astel/seika_hover.jpg");
}

.glacier {
  width: 50px;
  height: 300px;
  background: url("./astel/glacier.jpg");
}

.glacier:hover {
  transition: 1s;
  background: url("./astel/glacier_hover.jpg");
}

.glacier-active {
  background: url("./astel/glacier_hover.jpg");
}

.venecia {
  width: 50px;
  height: 300px;
  background: url("./astel/venecia.jpg");
}

.venecia:hover {
  transition: 1s;
  background: url("./astel/venecia_hover.jpg");
}

.venecia-active {
  background: url("./astel/venecia_hover.jpg");
}

.ignagon {
  width: 50px;
  height: 300px;
  background: url("./astel/ignagon.jpg");
}

.ignagon:hover {
  transition: 1s;
  background: url("./astel/ignagon_hover.jpg");
}

.ignagon-active {
  background: url("./astel/ignagon_hover.jpg");
}

.enakir {
  width: 50px;
  height: 300px;
  background: url("./astel/enakir.jpg");
}

.enakir:hover {
  transition: 1s;
  background: url("./astel/enakir_hover.jpg");
}

.enakir-active {
  background: url("./astel/enakir_hover.jpg");
}

.aida {
  width: 50px;
  height: 300px;
  background: url("./astel/aida.jpg");
}

.aida:hover {
  transition: 1s;
  background: url("./astel/aida_hover.jpg");
}

.aida-active {
  background: url("./astel/aida_hover.jpg");
}

.grimoire {
  width: 50px;
  height: 300px;
  background: url("./astel/grimoire.jpg");
}

.grimoire:hover {
  transition: 1s;
  background: url("./astel/grimoire_hover.jpg");
}

.grimoire-active {
  background: url("./astel/grimoire_hover.jpg");
}

.rota {
  width: 50px;
  height: 300px;
  background: url("./astel/rota.jpg");
}

.rota:hover {
  transition: 1s;
  background: url("./astel/rota_hover.jpg");
}

.rota-active {
  background: url("./astel/rota_hover.jpg");
}

.aquarius {
  width: 50px;
  height: 300px;
  background: url("./astel/aquarius.jpg");
}

.aquarius:hover {
  transition: 1s;
  background: url("./astel/aquarius_hover.jpg");
}

.aquarius-active {
  background: url("./astel/aquarius_hover.jpg");
}

.archer {
  width: 50px;
  height: 300px;
  background: url("./astel/archer.jpg");
}

.archer:hover {
  transition: 1s;
  background: url("./astel/archer_hover.jpg");
}

.archer-active {
  background: url("./astel/archer_hover.jpg");
}

.canceria {
  width: 50px;
  height: 300px;
  background: url("./astel/canceria.jpg");
}

.canceria:hover {
  transition: 1s;
  background: url("./astel/canceria_hover.jpg");
}

.canceria-active {
  background: url("./astel/canceria_hover.jpg");
}

.capricorn {
  width: 50px;
  height: 300px;
  background: url("./astel/capricorn.jpg");
}

.capricorn:hover {
  transition: 1s;
  background: url("./astel/capricorn_hover.jpg");
}

.capricorn-active {
  background: url("./astel/capricorn_hover.jpg");
}

.corvus {
  width: 50px;
  height: 300px;
  background: url("./astel/corvus.jpg");
}

.corvus:hover {
  transition: 1s;
  background: url("./astel/corvus_hover.jpg");
}

.corvus-active {
  background: url("./astel/corvus_hover.jpg");
}

.cygnus {
  width: 50px;
  height: 300px;
  background: url("./astel/cygnus.jpg");
}

.cygnus:hover {
  transition: 1s;
  background: url("./astel/cygnus_hover.jpg");
}

.cygnus-active {
  background: url("./astel/cygnus_hover.jpg");
}

.draco {
  width: 50px;
  height: 300px;
  background: url("./astel/draco.jpg");
}

.draco:hover {
  transition: 1s;
  background: url("./astel/draco_hover.jpg");
}

.draco-active {
  background: url("./astel/draco_hover.jpg");
}

.kukuma {
  width: 50px;
  height: 300px;
  background: url("./astel/kukuma.jpg");
}

.kukuma:hover {
  transition: 1s;
  background: url("./astel/kukuma_hover.jpg");
}

.kukuma-active {
  background: url("./astel/kukuma_hover.jpg");
}

.leo {
  width: 50px;
  height: 300px;
  background: url("./astel/leo.jpg");
}

.leo:hover {
  transition: 1s;
  background: url("./astel/leo_hover.jpg");
}

.leo-active {
  background: url("./astel/leo_hover.jpg");
}

.link_astel {
  width: 50px;
  height: 300px;
  background: url("./astel/link_astel.jpg");
}

.link_astel:hover {
  transition: 1s;
  background: url("./astel/link_astel_hover.jpg");
}

.link_astel-active {
  background: url("./astel/link_astel_hover.jpg");
}

.lira {
  width: 50px;
  height: 300px;
  background: url("./astel/lira.jpg");
}

.lira:hover {
  transition: 1s;
  background: url("./astel/lira_hover.jpg");
}

.lira-active {
  background: url("./astel/lira_hover.jpg");
}

.miho {
  width: 50px;
  height: 300px;
  background: url("./astel/miho.jpg");
}

.miho:hover {
  transition: 1s;
  background: url("./astel/miho_hover.jpg");
}

.miho-active {
  background: url("./astel/miho_hover.jpg");
}

.papilia {
  width: 50px;
  height: 300px;
  background: url("./astel/papilia.jpg");
}

.papilia:hover {
  transition: 1s;
  background: url("./astel/papilia_hover.jpg");
}

.papilia-active {
  background: url("./astel/papilia_hover.jpg");
}

.pisces {
  width: 50px;
  height: 300px;
  background: url("./astel/pisces.jpg");
}

.pisces:hover {
  transition: 1s;
  background: url("./astel/pisces_hover.jpg");
}

.pisces-active {
  background: url("./astel/pisces_hover.jpg");
}

.ram {
  width: 50px;
  height: 300px;
  background: url("./astel/ram.jpg");
}

.ram:hover {
  transition: 1s;
  background: url("./astel/ram_hover.jpg");
}

.ram-active {
  background: url("./astel/ram_hover.jpg");
}

.scorpio:hover {
  transition: 1s;
  background: url("./astel/scorpio_hover.jpg");
}

.scorpio {
  width: 50px;
  height: 300px;
  background: url("./astel/scorpio.jpg");
}

.scorpio-active {
  background: url("./astel/scorpio_hover.jpg");
}

.serpens:hover {
  transition: 1s;
  background: url("./astel/serpens_hover.jpg");
}

.serpens {
  width: 50px;
  height: 300px;
  background: url("./astel/serpens.jpg");
}

.serpens-active {
  background: url("./astel/serpens_hover.jpg");
}

.sirius:hover {
  transition: 1s;
  background: url("./astel/sirius_hover.jpg");
}

.sirius {
  width: 50px;
  height: 300px;
  background: url("./astel/sirius.jpg");
}

.sirius-active {
  background: url("./astel/sirius_hover.jpg");
}

.taurus:hover {
  transition: 1s;
  background: url("./astel/taurus_hover.jpg");
}

.taurus {
  width: 50px;
  height: 300px;
  background: url("./astel/taurus.jpg");
}

.taurus-active {
  background: url("./astel/taurus_hover.jpg");
}

.tetrinio:hover {
  transition: 1s;
  background: url("./astel/tetrinio_hover.jpg");
}

.tetrinio {
  width: 50px;
  height: 300px;
  background: url("./astel/tetrinio.jpg");
}

.tetrinio-active {
  background: url("./astel/tetrinio_hover.jpg");
}

.tioka:hover {
  transition: 1s;
  background: url("./astel/tioka_hover.jpg");
}

.tioka {
  width: 50px;
  height: 300px;
  background: url("./astel/tioka.jpg");
}

.tioka-active {
  background: url("./astel/tioka_hover.jpg");
}

.unicorn:hover {
  transition: 1s;
  background: url("./astel/unicorn_hover.jpg");
}

.unicorn {
  width: 50px;
  height: 300px;
  background: url("./astel/unicorn.jpg");
}

.unicorn-active {
  background: url("./astel/unicorn_hover.jpg");
}

.ursa:hover {
  transition: 1s;
  background: url("./astel/ursa_hover.jpg");
}

.ursa {
  width: 50px;
  height: 300px;
  background: url("./astel/ursa.jpg");
}

.ursa-active {
  background: url("./astel/ursa_hover.jpg");
}

.virgo:hover {
  transition: 1s;
  background: url("./astel/virgo_hover.jpg");
}

.virgo {
  width: 50px;
  height: 300px;
  background: url("./astel/virgo.jpg");
}

.virgo-active {
  background: url("./astel/virgo_hover.jpg");
}

.vulpecula:hover {
  transition: 1s;
  background: url("./astel/vulpecula_hover.jpg");
}

.vulpecula {
  width: 50px;
  height: 300px;
  background: url("./astel/vulpecula.jpg");
}

.vulpecula-active {
  background: url("./astel/vulpecula_hover.jpg");
}

.astel-slide .astel-card-active {
  opacity: 1;
}



.carousel-control.left {
  background-image: none;
  margin-left: -45px;
}

.carousel-control.right {
  background-image: none;
  margin-right: -45px;
}

.astel-image-container {
  position: absolute;
  top: 70px;
  left: -240px;
  margin: 0 auto;
  z-index: 3;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 2s;
width: 100%;
max-width: 612px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:-400px; top:70px;}
  85%  {left:-220px; top:70px;}
  100% {left:-240px; top:70px;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:-400px; top:70px;}
  85%  {left:-230px; top:70px;}
  100% {left:-240px; top:70px;}
}

.braga-image {
  width: 612px;
  height: 878px;
  background: url("./astel/braga-image.png");
}

.eligos-image {
  width: 612px;
  height: 878px;
  background: url("./astel/eligos-image.png");
}

.seika-image {
  width: 612px;
  height: 878px;
  background: url("./astel/seika-image.png");
}

.glacier-image {
  width: 612px;
  height: 878px;
  background: url("./astel/glacier-image.png");
}

.venecia-image {
  width: 612px;
  height: 878px;
  background: url("./astel/venecia-image.png");
}

.ignagon-image {
  width: 612px;
  height: 878px;
  background: url("./astel/ignagon-image.png");
}

.enakir-image {
  width: 612px;
  height: 878px;
  background: url("./astel/enakir-image.png");
}

.aida-image {
  width: 612px;
  height: 878px;
  background: url("./astel/aida-image.png");
}

.grimoire-image {
  width: 612px;
  height: 878px;
  background: url("./astel/grimoire-image.png");
}

.rota-image {
  width: 612px;
  height: 878px;
  background: url("./astel/rota-image.png");
}

.aquarius-image {
  width: 612px;
  height: 878px;
  background: url("./astel/aquarius-image.png");
}

.archer-image {
  width: 612px;
  height: 878px;
  background: url("./astel/archer-image.png");
}

.canceria-image {
  width: 612px;
  height: 878px;
  background: url("./astel/canceria-image.png");
}

.capricorn-image {
  width: 612px;
  height: 878px;
  background: url("./astel/capricorn-image.png");
}

.corvus-image {
  width: 612px;
  height: 878px;
  background: url("./astel/corvus-image.png");
}

.cygnus-image {
  width: 612px;
  height: 878px;
  background: url("./astel/cygnus-image.png");
}

.draco-image {
  width: 612px;
  height: 878px;
  background: url("./astel/draco-image.png");
}

.kukuma-image {
  width: 612px;
  height: 878px;
  background: url("./astel/kukuma-image.png");
}

.leo-image {
  width: 612px;
  height: 878px;
  background: url("./astel/leo-image.png");
}

.link-image {
  width: 612px;
  height: 878px;
  background: url("./astel/link-image.png");
}

.lira-image {
  width: 612px;
  height: 878px;
  background: url("./astel/lira-image.png");
}

.miho-image {
  width: 612px;
  height: 878px;
  background: url("./astel/miho-image.png");
}

.papilia-image {
  width: 612px;
  height: 878px;
  background: url("./astel/papilia-image.png");
}

.pisces-image {
  width: 612px;
  height: 878px;
  background: url("./astel/pisces-image.png");
}

.ram-image {
  width: 612px;
  height: 878px;
  background: url("./astel/ram-image.png");
}

.scorpio-image {
  width: 612px;
  height: 878px;
  background: url("./astel/scorpio-image.png");
}

.serpens-image {
  width: 612px;
  height: 878px;
  background: url("./astel/serpens-image.png");
}

.sirius-image {
  width: 612px;
  height: 878px;
  background: url("./astel/sirius-image.png");
}

.taurus-image {
  width: 612px;
  height: 878px;
  background: url("./astel/taurus-image.png");
}

.tetrinio-image {
  width: 612px;
  height: 878px;
  background: url("./astel/tetrinio-image.png");
}

.tioka-image {
  width: 612px;
  height: 878px;
  background: url("./astel/tioka-image.png");
}

.unicorn-image {
  width: 612px;
  height: 878px;
  background: url("./astel/unicorn-image.png");
}

.ursa-image {
  width: 612px;
  height: 878px;
  background: url("./astel/ursa-image.png");
}

.virgo-image {
  width: 612px;
  height: 878px;
  background: url("./astel/virgo-image.png");
}

.vulpecula-image {
  width: 612px;
  height: 878px;
  background: url("./astel/vulpecula-image.png");
}

@media screen and (max-width: 370px) {
  .astel-image-container {
    left: -300px;
  }
}