.main__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .main__container {
    display: none;
  }
}
.main__container #slogan-wrapper {
  z-index: 1;
  margin: auto;
  transform: scale(1);
  width: 70%;
  text-align: center;
  pointer-events: none;
}
.main__container #slogan-wrapper h1 {
  font-family: 'MarketPro', 'OpenSans', serif;
  font-size: 50px;
  color: var(--third-color);
  text-shadow: #102d3f 1px 0px 0px, #102d3f 0.540302px 0.841471px 0px, #102d3f -0.416147px 0.909297px 0px, #102d3f -0.989992px 0.14112px 0px, #102d3f -0.653644px -0.756802px 0px, #102d3f 0.283662px -0.958924px 0px, #102d3f 0.96017px -0.279415px 0px;
}
.main__container .container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.main__container .container .container--bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  transition: all 0.5s;
}
.main__container .container .container--bg .image {
  position: absolute;
  object-fit: cover;
  transition: all 0.5s;
  margin: 1.5vw;
}
.main__container .container.hover {
  cursor: pointer;
}
.main__container .container.hover .image {
  transform: scale(1.1);
}
.main__container .container.container__madrid {
  top: 0;
  right: 0;
  clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 100% 0%);
  /* transition: clip-path 0.5s 0.6s;
   */
}
.main__container .container.container__madrid .container--bg .image {
  right: 0;
  width: 38%;
}
.main__container .container.container__andorra {
  bottom: 0;
  left: 0;
  clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
  /* transition: width 0.5s 0.6s, clip-path 0.5s 0.6s;
   */
}
.main__container .container.container__andorra .container--bg .image {
  bottom: 0;
  left: 0;
  width: 40%;
}
.main__container .container.container__separator {
  clip-path: polygon(0% 15%, 0% 0%, 15% 0%, 100% 85%, 100% 100%, 85% 100%);
  background: #102d3f;
}
.main__container .container.container__separator .separator__vertical {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 58%;
  width: 100%;
  height: 100%;
  transform: scale(0);
  opacity: 0;
}
.main__container .container.container__separator .separator__vertical .element--vertical {
  position: static;
  align-items: flex-start;
  width: 100%;
  height: auto;
}
.main__container .container.container__separator .separator__vertical .element--vertical .box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.main__container .container.container__separator .separator__vertical .element--vertical .box#box--madrid {
  display: none;
  transform: scale(0.9);
}
.main__container .container.container__separator .separator__vertical .element--vertical .box#box--madrid img {
  transform: scale(1.1);
}
.main__container .container.container__separator .separator__vertical .element--vertical .box#box--andorra {
  display: none;
  transform: scale(0.9);
}
.main__container .container.container__separator .separator__vertical .element--vertical .box .box--text {
  position: relative;
  top: 20px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.main__container .container.container__separator .separator__vertical #return {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.main__container .container.container__separator .separator__vertical #return:hover {
  cursor: pointer;
}
.main__container .container.container__separator .separator__vertical #return:hover .arrow {
  transform: scale(1.1) translateX(-10px);
}
.main__container .container.container__separator .separator__vertical #return .return--content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.main__container .container.container__separator .separator__vertical #return .return--content .arrow {
  width: 50%;
  height: 50%;
  color: white;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.main__container .container.container__separator .separator__vertical #return .return--content .arrow::before {
  font-size: 3.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main__container .container.container__separator .separator__vertical #return .return--content p {
  color: white;
}
.main__container .container.container__separator .element {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s;
}
.main__container .container.container__separator .element.element--madrid {
  bottom: 0;
  right: 3%;
}
.main__container .container.container__separator .element.element--madrid .box img {
  transform: scale(1.2);
}
.main__container .container.container__separator .element.element--andorra {
  top: 0;
  left: -3%;
}
.main__container .container.container__separator .element .box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.main__container .container.container__separator .element .box img {
  max-width: 200px;
}
@media (min-width: 1650px) {
  .main__container .container.container__separator .element .box img {
    max-width: 230px;
  }
}
@media (max-width: 1450px) {
  .main__container .container.container__separator .element .box img {
    max-width: 170px;
  }
}
.main__container .container.container__separator .element .box .box--text {
  position: relative;
  top: 20px;
  left: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.main__container .container.container__separator .element .box .box--text h2 {
  font-size: 1.5rem;
  color: white;
}
.main__container .container.container__separator .element .box .box--text p {
  color: white;
}
.main__container .container.container__separator.hover-madrid .element--madrid {
  transform: scale(1.3);
  transition: transform 0.5s;
}
.main__container .container.container__separator.hover-madrid .element--madrid .box img {
  cursor: pointer;
}
.main__container .container.container__separator.hover-madrid .element--madrid .box .box--text {
  cursor: pointer;
}
.main__container .container.container__separator.hover-madrid .element--madrid .box .box--text h2 {
  color: var(--secondary-color);
}
.main__container .container.container__separator.hover-madrid .element--madrid .box .box--text p {
  color: var(--secondary-color);
}
.main__container .container.container__separator.hover-madrid .element--andorra {
  transform: scale(0.8);
  transition: transform 0.5s;
}
.main__container .container.container__separator.hover-andorra .element--andorra {
  transform: scale(1.3);
  transition: transform 0.5s;
}
.main__container .container.container__separator.hover-andorra .element--andorra .box img {
  cursor: pointer;
}
.main__container .container.container__separator.hover-andorra .element--andorra .box .box--text {
  cursor: pointer;
}
.main__container .container.container__separator.hover-andorra .element--andorra .box .box--text h2 {
  color: var(--secondary-color);
}
.main__container .container.container__separator.hover-andorra .element--andorra .box .box--text p {
  color: var(--secondary-color);
}
.main__container .container.container__separator.hover-andorra .element--madrid {
  transform: scale(0.8);
  transition: transform 0.5s;
}
.main__container.show__madrid .container.container__madrid {
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
  transition: clip-path 0.3s 0.6s;
}
.main__container.show__madrid .container.container__madrid .container--bg {
  opacity: 0;
  transition: opacity 0.5s 0.6s;
}
.main__container.show__madrid .container.container__andorra {
  width: 0;
  transition: width 0.5s 0.6s;
}
.main__container.show__madrid .container.container__separator {
  clip-path: polygon(0% 15%, 0% 0%, 100% 0%, 100% 85%, 100% 100%, 0% 100%);
  width: clamp(220px, 20%, 230px);
  transition: width 0.5s 0.6s, clip-path 0.5s 0.6s;
}
@media (min-width: 1650px) {
  .main__container.show__madrid .container.container__separator {
    width: clamp(220px, 20%, 270px);
  }
}
.main__container.show__madrid .container.container__separator .element.element--andorra {
  transform: scale(0);
  transition: transform 0.3s;
}
.main__container.show__madrid .container.container__separator .element.element--madrid {
  transform: scale(0);
  transition: transform 0.3s 0.3s;
}
.main__container.show__madrid .container.container__separator .separator__vertical {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.3s 1.1s, opacity 0.3s 1.1s;
}
.main__container.show__madrid .container.container__separator .separator__vertical .element--vertical .box#box--madrid {
  display: flex;
}
.main__container.show__madrid .container.container__separator .separator__vertical .element--vertical .box#box--madrid:hover {
  cursor: pointer;
}
.main__container.show__madrid #slogan-wrapper {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s 0.15s;
}
.main__container.show__andorra .container.container__andorra {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.3s 0.6s;
}
.main__container.show__andorra .container.container__andorra .container--bg {
  opacity: 0;
  transition: opacity 0.5s 0.6s;
}
.main__container.show__andorra .container.container__madrid {
  width: 0;
  transition: width 0.5s 0.6s;
}
.main__container.show__andorra .container.container__separator {
  right: 0;
  clip-path: polygon(0% 15%, 0% 0%, 100% 0%, 100% 85%, 100% 100%, 0% 100%);
  width: clamp(220px, 20%, 230px);
  transition: width 0.5s 0.6s, clip-path 0.5s 0.6s;
}
@media (min-width: 1650px) {
  .main__container.show__andorra .container.container__separator {
    width: clamp(220px, 20%, 270px);
  }
}
.main__container.show__andorra .container.container__separator .element.element--madrid {
  transform: scale(0);
  transition: transform 0.3s;
}
.main__container.show__andorra .container.container__separator .element.element--andorra {
  transform: scale(0);
  transition: transform 0.3s 0.3s;
}
.main__container.show__andorra .container.container__separator .separator__vertical {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.3s 1.1s, opacity 0.3s 1.1s;
}
.main__container.show__andorra .container.container__separator .separator__vertical .element--vertical .box#box--andorra {
  display: flex;
}
.main__container.show__andorra .container.container__separator .separator__vertical .element--vertical .box#box--andorra:hover {
  cursor: pointer;
}
.main__container.show__andorra #slogan-wrapper {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s 0.15s;
}
.main__container.return-show--madrid .container.container__madrid {
  transition: clip-path 0.5s 0.3s;
}
.main__container.return-show--madrid .container.container__andorra {
  transition: width 0.5s 0.3s;
}
.main__container.return-show--madrid .container.container__separator {
  transition: width 0.5s 0.3s, clip-path 0.5s 0.3s;
}
.main__container.return-show--madrid .container.container__separator .element.element--andorra {
  transition: transform 0.3s 0.3s;
}
.main__container.return-show--madrid .container.container__separator .element.element--madrid {
  transition: transform 0.3s 0.3s;
}
.main__container.return-show--madrid .container.container__separator .separator__vertical {
  transition: transform 0.3s, opacity 0.3s;
}
.main__container.return-show--madrid #slogan-wrapper {
  transition: all 0.3s 0.3s;
}
.main__container.return-show--andorra .container.container__andorra {
  transition: clip-path 0.5s 0.3s;
}
.main__container.return-show--andorra .container.container__madrid {
  transition: width 0.5s 0.3s;
}
.main__container.return-show--andorra .container.container__separator {
  right: 0;
  transition: width 0.5s 0.3s, clip-path 0.5s 0.3s;
}
.main__container.return-show--andorra .container.container__separator .element.element--andorra {
  transition: transform 0.3s 0.3s;
}
.main__container.return-show--andorra .container.container__separator .element.element--madrid {
  transition: transform 0.3s 0.3s;
}
.main__container.return-show--andorra .container.container__separator .separator__vertical {
  transition: transform 0.3s, opacity 0.3s;
}
.main__container.return-show--andorra #slogan-wrapper {
  transition: all 0.3s 0.3s;
}