.mob__main__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  overflow: hidden;
  background-color: var(--primary-color);
}

@media all and (max-width: 992px) {
  .mob__main__container {
    padding-bottom: 50px;
  }
}

@media (min-width: 1024px) {
  .mob__main__container {
    display: none;
  }
}

.mob__main__container .mob__divider {
  background-color: var(--secondary-color);
  height: 4px;
  margin: 0 auto;
  width: 90%;
}

.mob__main__container .mob__slogan {
  /*---------------------Prova texte canviant ----------------------*/
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 90%;
  font-family: 'Lato', sans-serif;
  font-size: 5vw;
  line-height: 40px;
  color: #ecf0f1;
  animation: introSlogan 2s ease;
  transition: all 0.5s 0.6s ease;
}

.mob__main__container .mob__slogan .container {
  position: relative;
  font-weight: 600;
  overflow: hidden;
  height: 6vh;
  width: 100%;
  padding: 0 1vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2vw;
}

.mob__main__container .mob__slogan .container:before {
  content: '[';
  left: 0;
}

.mob__main__container .mob__slogan .container:after {
  content: ']';
  position: absolute;
  right: 0;
}

.mob__main__container .mob__slogan .container:after,
.mob__main__container .mob__slogan .container:before {
  position: absolute;
  top: 0;
  color: var(--secondary-color);
  font-size: 7vw;
  line-height: 40px;
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: opacity;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.mob__main__container .mob__slogan .container .text {
  /*display: inline;*/
  /*float: left;*/
  /*margin: 0;*/
}

.mob__main__container .mob__slogan .container .list {
  margin-top: 0;
  /*padding-left: 32vw;*/
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.mob__main__container .mob__slogan .container .list .item {
  /*line-height: 40px;*/
  margin: 0;
  text-align: center;
}

.mob__main__container .mob__container {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s 0.6s ease;
}

.mob__main__container .mob__container.container--andorra {
  transform: translateX(-100%);
  animation: introAnd 1s ease forwards, movementAndorra 8s 1s ease infinite;
}

.mob__main__container .mob__container.container--madrid {
  transform: translateX(100%);
  animation: introMad 1s ease forwards, movementMadrid 8s 1s ease infinite;
}

.mob__main__container .mob__container .intro__box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3vh;
  width: 80%;
  height: 50%;
  transition: all 0.5s 0.6s ease;
}

.mob__main__container .mob__container .intro__box .intro--logo {
  width: 100%;
  object-fit: contain;
  max-width: 300px;
}

.mob__main__container .mob__container .intro__box .intro--text {
  width: 100%;
  text-align: right;
  font-size: 6vw;
  color: white;
}

@media all and (max-width: 1024px) and (min-width: 768px) {
  .mob__main__container .mob__container .intro__box .intro--text {
    font-size: 3vw;
  }
}

.mob__main__container.show-mob-andorra .mob__container {
  animation-play-state: paused;
}

.mob__main__container.show-mob-andorra .mob__container.container--andorra {
  height: 100%;
  transition: height 0.1s 1.1s ease;
}

.mob__main__container.show-mob-andorra .mob__container.container--andorra .intro__box {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s ease;
}

.mob__main__container.show-mob-andorra .mob__container.container--madrid {
  height: 0%;
  transition: height 0.1s 1.1s ease;
}

.mob__main__container.show-mob-andorra .mob__container.container--madrid .intro__box {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s 0.3s ease;
}

.mob__main__container.show-mob-andorra .mob__slogan {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s 0.6s ease;
}

.mob__main__container.show-mob-madrid .mob__container {
  animation-play-state: paused;
}

.mob__main__container.show-mob-madrid .mob__container.container--madrid {
  height: 100%;
  transition: height 0.1s 1.1s ease;
}

.mob__main__container.show-mob-madrid .mob__container.container--madrid .intro__box {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s ease;
}

.mob__main__container.show-mob-madrid .mob__container.container--andorra {
  height: 0%;
  transition: height 0.1s 1.1s ease;
}

.mob__main__container.show-mob-madrid .mob__container.container--andorra .intro__box {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s 0.3s ease;
}

.mob__main__container.show-mob-madrid .mob__slogan {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s 0.6s ease;
}

/*-----------------------------ANIMACIONS---------------------------*/

/* inici elements */
@keyframes introAnd {
  0% {
    transform: translateX(-100%) scale(1.05);
  }
  75% {
    transform: translateX(2%) scale(1.05);
  }
  100% {
    transform: translateX(0) scale(1.05);
  }
}

@keyframes introMad {
  0% {
    transform: translateX(100%) scale(0.95);
  }
  75% {
    transform: translateX(-2%) scale(0.95);
  }
  100% {
    transform: translateX(0) scale(0.95);
  }
}

@keyframes introSlogan {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes movementAndorra {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}

@keyframes movementMadrid {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0.95);
  }
}

/* prova faceIn slogan */
@keyframes faceInText {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1); /* Aumenta el tamaño */
    opacity: 1;
  }
  100% {
    transform: scale(2); /* Desaparece al crecer aún más */
    opacity: 0;
  }
}

/* prova slogan texte animat */
/*@-webkit-keyframes opacity {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}*/

/*@-webkit-keyframes change {
  0%, 12.66%, 100% { transform: translate3d(0, 0, 0); }
  16.66%, 29.32% { transform: translate3d(0, -25%, 0); }
  33.32%, 45.98% { transform: translate3d(0, -50%, 0); }
  49.98%, 62.64% { transform: translate3d(0, -75%, 0); }
  66.64%, 79.3% { transform: translate3d(0, -50%, 0); }
  83.3%, 95.96% { transform: translate3d(0, -25%, 0); }
}*/

/*@-o-keyframes opacity {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}*/

/*@-o-keyframes change {
  0%, 12.66%, 100% { transform: translate3d(0, 0, 0); }
  16.66%, 29.32% { transform: translate3d(0, -25%, 0); }
  33.32%, 45.98% { transform: translate3d(0, -50%, 0); }
  49.98%, 62.64% { transform: translate3d(0, -75%, 0); }
  66.64%, 79.3% { transform: translate3d(0, -50%, 0); }
  83.3%, 95.96% { transform: translate3d(0, -25%, 0); }
}*/

/*@-moz-keyframes opacity {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}*/

/*@-moz-keyframes change {
  0%, 12.66%, 100% { transform: translate3d(0, 0, 0); }
  16.66%, 29.32% { transform: translate3d(0, -25%, 0); }
  33.32%, 45.98% { transform: translate3d(0, -50%, 0); }
  49.98%, 62.64% { transform: translate3d(0, -75%, 0); }
  66.64%, 79.3% { transform: translate3d(0, -50%, 0); }
  83.3%, 95.96% { transform: translate3d(0, -25%, 0); }
}*/

@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes change {
  0%, 12.5%, 100% {
    transform: translate3d(0, 33.5%, 0); /* Primera opción */
  }
  25%, 37.5% {
    transform: translate3d(0, 1%, 0); /* Segunda opción */
  }
  50%, 62.5% {
    transform: translate3d(0, -32.5%, 0); /* Tercera opción */
  }
  75%, 87.5% {
    transform: translate3d(0, 1%, 0); /* Regreso a la segunda opción */
  }
}

/*// 6 is the number of animation.*/
/*// Here, there are 4 lines :*/
/*// 1 to 2*/
/*// 2 to 3*/
/*// 3 to 4*/
/*// 4 to 3*/
/*// 3 to 2*/
/*// 2 to 1*/
/*// 6x + 6y = 100 (100% duration)*/
/*// HERE :*/
/*// y = 4 -> Animation between two lines*/
/*// x = 12.66 -> Time spent on a line*/
/*// You can define a value and calculate the other if you want change speed or the number of lines */