/* --- General styles  --- */

.swop22-intro-image {
  position: relative;
  margin: 0 auto;
}

.swop22-intro-image > .swop22-img-holder img {
  box-shadow: 0 2px 18px 0 rgba(137, 136, 136, 0.5);
}

.swop22-intro-note {
  z-index: 1;
}

.swop22-intro-note h1 {
  margin: 0;
  font-size: 52px;
  line-height: 42px;
  letter-spacing: 1.49px;
  position: absolute;
}

.swop22-es .swop22-intro-note h1,
.swop22-fr .swop22-intro-note h1 {
  font-size: 32px;
  line-height: 22px;
  padding-right: 20px;
}

@media screen and (min-width: 480px) {
  .swop22-intro-note h1 {
    font-size: 64px;
    line-height: 50px;
  }

  .swop22-es .swop22-intro-note h1,
  .swop22-fr .swop22-intro-note h1 {
    font-size: 50px;
    line-height: 35px;
  }
}

@media screen and (min-width: 1000px) {
  .swop22-intro-note h1 {
    font-size: 74px;
    line-height: 60px;
  }

  .swop22-es .swop22-intro-note h1,
  .swop22-fr .swop22-intro-note h1 {
    font-size: 50px;
    line-height: 35px;
  }
}

@media screen and (min-width: 1200px) {
  .swop22-intro-note h1 {
    font-size: 86px;
    line-height: 70px;
  }

  .swop22-es .swop22-intro-note h1,
  .swop22-fr .swop22-intro-note h1 {
    font-size: 68px;
    line-height: 44px;
  }
}

/* ---  Styles for image and note  --- */

.swop22-intro-default .swop22-intro-image .swop22-img-holder {
  padding-bottom: 73.3468%;
}

.swop22-intro-vertical .swop22-intro-image .swop22-img-holder {
  padding-bottom: 126.8656%;
}

.swop22-intro-wide .swop22-intro-image .swop22-img-holder {
  padding-bottom: 44.2433%;
}

.swop22-intro-vertical .swop22-intro-n1 .swop22-img-holder,
.swop22-intro-default .swop22-intro-n5 .swop22-img-holder {
  padding-bottom: 79.2147%;
}

.swop22-intro-vertical .swop22-intro-n2 .swop22-img-holder {
  padding-bottom: 120.8078%;
}

.swop22-intro-default .swop22-intro-n3 .swop22-img-holder,
.swop22-intro-wide .swop22-intro-n4 .swop22-img-holder {
  padding-bottom: 74.4736%;
}

/* --- 'Default' styles  --- */

.swop22-intro-default .swop22-intro-image {
  width: 88%;
}

.swop22-intro-default .swop22-intro-n3 {
  width: 79%;
  margin: -16% 0 0 13%;
}

.swop22-intro-default .swop22-intro-n3 h1 {
  top: 26%;
  left: 18%;
}

.swop22-es .swop22-intro-default .swop22-intro-n3 h1,
.swop22-fr .swop22-intro-default .swop22-intro-n3 h1 {
  top: 21%;
}

.swop22-fr .swop22-intro-default .swop22-intro-n3 h1 {
  padding-right: 30px;
}

.swop22-intro-default .swop22-intro-n5 {
  width: 91%;
  margin: -22% 0 0 6%;
}

.swop22-intro-default .swop22-intro-n5 h1 {
  top: 32%;
  left: 30%;
}

.swop22-es .swop22-intro-default .swop22-intro-n5 h1,
.swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
  font-size: 40px;
  line-height: 36px;
  top: 32%;
  left: 16%;
  padding-right: 25px;
}

.swop22-es .swop22-intro-default .swop22-intro-n5 h1 {
  line-height: 30px;
  left: 20%;
}

@media screen and (min-width: 359px) {
  .swop22-es .swop22-intro-default .swop22-intro-n5 h1,
  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    font-size: 45px;
    padding-right: 30px;
  }
}

@media screen and (min-width: 480px) {
  .swop22-intro-default .swop22-intro-n5 h1 {
    top: 36%;
    left: 33%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n5 h1 {
    top: 25%;
    left: 21%;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    top: 23%;
    left: 15%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n3 h1,
  .swop22-fr .swop22-intro-default .swop22-intro-n3 h1 {
    top: 21%;
    left: 20%;
    font-size: 54px;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n3 h1 {
    line-height: 35px;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n3 h1 {
    line-height: 45px;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n5 h1,
  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    font-size: 64px;
    line-height: 50px;
    padding-right: 30px;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    top: 40%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n3 h1 {
    top: 23%;
    left: 20%;
  }
}

@media screen and (min-width: 768px) {
  .swop22-es .swop22-intro-default .swop22-intro-n3 h1,
  .swop22-fr .swop22-intro-default .swop22-intro-n3 h1 {
    font-size: 64px;
    line-height: 45px;
    padding-right: 40px;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n3 h1 {
    top: 34%;
    left: 22%;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n3 h1 {
    top: 40%;
    left: 24%;
  }

  .swop22-intro-default .swop22-intro-n5 {
    width: 55%;
    margin: -10% 0 0 10%;
  }

  .swop22-intro-default .swop22-intro-n5 h1 {
    left: 19%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n5 h1 {
    font-size: 56px;
    line-height: 45px;
    padding-right: 30px;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    font-size: 60px;
    line-height: 45px;
    top: 33%;
  }

  .swop22-intro-default .swop22-intro-n5 {
    position: absolute;
    width: 46%;
    bottom: 2%;
    left: -5%;
    margin: 0;
  }

  .swop22-intro-default .swop22-intro-n5 h1 {
    top: 30%;
    left: 28%;
  }
}

@media screen and (min-width: 1000px) {
  .swop22-intro-default .swop22-intro-n3 {
    position: absolute;
    width: 38%;
    bottom: 3%;
    left: -7%;
    margin: 0;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n3 h1 {
    top: 22%;
    left: 18%;
    font-size: 52px;
    line-height: 35px;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n3 h1 {
    top: 26%;
    left: 18%;
  }

  .swop22-intro-default .swop22-intro-n5 {
    position: absolute;
    width: 45%;
    bottom: 3%;
  }

  .swop22-intro-default .swop22-intro-n5 h1 {
    top: 33%;
    left: 29%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n5 h1,
  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    font-size: 64px;
    line-height: 50px;
    top: 32%;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    left: 18%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n5 h1 {
    left: 27%;
  }

}

@media screen and (min-width: 1400px) {
  .swop22-intro-default .swop22-intro-n3 {
    left: -17%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n3 h1 {
    font-size: 64px;
    line-height: 42px;
  }

  .swop22-intro-default .swop22-intro-n5 {
    left: -16%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n5 h1,
  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    font-size: 86px;
    line-height: 70px;
    top: 26%;
    left: 14%;
  }

  .swop22-fr .swop22-intro-default .swop22-intro-n5 h1 {
    top: 34%;
    left: 16%;
  }

  .swop22-es .swop22-intro-default .swop22-intro-n5 h1 {
    left: 22%;
  }
}

/* --- 'Vertical' styles  --- */

.swop22-intro-vertical .swop22-intro-image {
  width: 86%;
}

.swop22-intro-vertical .swop22-intro-n1 {
  width: 92%;
  margin: -26% 0 0 4%;
}

.swop22-intro-vertical .swop22-intro-n1 h1 {
  top: 33%;
  left: 27%;
}

.swop22-es .swop22-intro-vertical .swop22-intro-n1 h1 {
  top: 40%;
  left: 20%;
  padding-right: 35px;
}

.swop22-fr .swop22-intro-vertical .swop22-intro-n1 h1 {
  top: 40%;
  left: 30%;
  padding-right: 30px;
}

.swop22-intro-vertical .swop22-intro-n2 {
  width: 85%;
  margin: -34% 0 0 13%;
}

.swop22-intro-vertical .swop22-intro-n2 h1 {
  top: 35%;
  left: 25%;
}

.swop22-es .swop22-intro-vertical .swop22-intro-n2 h1,
.swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
  font-size: 38px;
  line-height: 28px;
  top: 34%;
  left: 14%;
  padding-right: 25px;
}

.swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
  top: 36%;
  left: 16%;
}

@media screen and (min-width: 359px) {

  .swop22-es .swop22-intro-vertical .swop22-intro-n1 h1 {
    font-size: 47px;
    line-height: 40px;
    top: 28%;
    left: 25%;
    padding-right: 30px;
  }

  .swop22-fr .swop22-intro-vertical .swop22-intro-n1 h1 {
    font-size: 47px;
    line-height: 40px;
    top: 36%;
    left: 26%;
    padding-right: 30px;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n2 h1,
  .swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
    font-size: 47px;
    top: 34%;
    left: 22%;
    padding-right: 30px;
  }
}

@media screen and (min-width: 480px) {
  .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 33%;
    left: 27%;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n1 h1 {
    font-size: 60px;
    line-height: 45px;
    top: 40%;
    left: 25%;
    padding-right: 50px;
  }

  .swop22-fr .swop22-intro-vertical .swop22-intro-n1 h1 {
    font-size: 60px;
    line-height: 45px;
    top: 34%;
    left: 25%;
    padding-right: 50px;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n2 h1,
  .swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
    font-size: 64px;
    line-height: 40px;
    left: 24%;
    padding-right: 50px;
  }
}

@media screen and (min-width: 600px) {
  .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 39%;
    left: 31%;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 42%;
    left: 22%;
    padding-right: 16%;
  }

  .swop22-fr .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 42%;
    left: 30%;
    padding-right: 16%;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n2 h1,
  .swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
    line-height: 45px;
    top: 39%;
    padding-right: 55px;
  }

}

@media screen and (min-width: 768px) {
  .swop22-intro-vertical .swop22-intro-image {
    width: 60%;
    margin-left: 24%;
  }

  .swop22-intro-vertical .swop22-intro-n1 {
    position: absolute;
    width: 64%;
    bottom: 13%;
    left: -40%;
    margin: 0;
  }

  .swop22-intro-vertical h1 {
    top: 33%;
    left: 26%;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 25%;
    padding-right: 40px;
  }

  .swop22-fr .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 32%;
    left: 22%;
    padding-right: 40px;
  }

  .swop22-intro-vertical .swop22-intro-n2 {
    position: absolute;
    width: 60.5%;
    bottom: 8%;
    left: -35%;
    margin: 0;
  }

  .swop22-intro-vertical .swop22-intro-n2 h1 {
    top: 35%;
    left: 26%;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n2 h1 {
    font-size: 52px;
    line-height: 35px;
    top: 33%;
  }

  .swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
    font-size: 52px;
    line-height: 38px;
    padding-right: 30px;
    top: 34%;
    left: 22%;
  }

}

@media screen and (min-width: 1000px) {
  .swop22-intro-vertical h1 {
    top: 33%;
    left: 26%;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 40%;
    left: 22%;
    padding-right: 50px;
  }

  .swop22-es .swop22-intro-vertical .swop22-intro-n2 h1,
  .swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
    font-size: 64px;
    line-height: 45px;
    left: 25%;
    padding-right: 40px;
  }

  .swop22-fr .swop22-intro-vertical .swop22-intro-n1 h1 {
    top: 38%;
    left: 28%;
  }
}

@media screen and (min-width: 1200px) {
  .swop22-es .swop22-intro-vertical .swop22-intro-n1 h1 {
    font-size: 86px;
    line-height: 60px;
    top: 30%;
    left: 20%;
  }

  .swop22-fr .swop22-intro-vertical .swop22-intro-n1 h1 {
    font-size: 86px;
    line-height: 60px;
    top: 35%;
    left: 26%;
  }
}

@media screen and (min-width: 1400px) {

  .swop22-es .swop22-intro-vertical .swop22-intro-n2 h1,
  .swop22-fr .swop22-intro-vertical .swop22-intro-n2 h1 {
    font-size: 86px;
    line-height: 70px;
    top: 30%;
    left: 16%;
  }
}

/* --- 'Wide' styles  --- */

.swop22-intro-wide .swop22-intro-n4 {
  width: 60%;
  margin: -11% 0 0 15%;
}

.swop22-intro-wide .swop22-intro-n4 h1 {
  top: 32%;
  left: 21%;
}

.swop22-es .swop22-intro-wide .swop22-intro-n4 h1,
.swop22-fr .swop22-intro-wide .swop22-intro-n4 h1 {
  top: 36%;
  left: 14%;
}

@media screen and (min-width: 359px) {
  .swop22-es .swop22-intro-wide .swop22-intro-n4 h1,
  .swop22-fr .swop22-intro-wide .swop22-intro-n4 h1 {
    font-size: 40px;
    line-height: 35px;
  }
}

@media screen and (min-width: 480px) {
  .swop22-intro-wide .swop22-intro-n4 {
    bottom: -84%;
  }

  .swop22-es .swop22-intro-wide .swop22-intro-n4 h1,
  .swop22-fr .swop22-intro-wide .swop22-intro-n4 h1 {
    font-size: 50px;
    line-height: 40px;
  }

}

@media screen and (min-width: 768px) {
  .swop22-intro-wide .swop22-intro-image {
    margin-bottom: 165px;
  }

  .swop22-intro-wide .swop22-width-wrap {
    max-width: 1380px;
  }

  .swop22-intro-wide .swop22-intro-n4 {
    position: absolute;
    width: 41%;
    bottom: -39%;
    left: 12%;
    margin: 0;
  }

  .swop22-intro-wide .swop22-intro-note h1 {
    left: 25%;
  }

  .swop22-es .swop22-intro-wide .swop22-intro-n4 h1,
  .swop22-fr .swop22-intro-wide .swop22-intro-n4 h1 {
    top: 38%;
    left: 22%;
  }
}

@media screen and (min-width: 1000px) {
  .swop22-intro-wide .swop22-intro-image {
    margin-bottom: 185px;
  }

  .swop22-es .swop22-intro-wide .swop22-intro-n4 h1,
  .swop22-fr .swop22-intro-wide .swop22-intro-n4 h1 {
    font-size: 65px;
    line-height: 50px;
  }
}

@media screen and (min-width: 1200px) {
  .swop22-intro-wide .swop22-intro-image {
    margin-bottom: 123px;
  }

  .swop22-intro-wide .swop22-intro-n4 {
    width: 31%;
    bottom: -20%;
    left: 19%;
  }

  .swop22-es .swop22-intro-wide .swop22-intro-n4 {
    width: 33%;
    bottom: -33%;
    left: 19%;
  }
}

@media screen and (min-width: 1400px) {
  .swop22-intro-wide .swop22-intro-n4 {
    width: 27%;
  }

  .swop22-es .swop22-intro-wide .swop22-intro-n4 {
    width: 31%;
    bottom: -31%;
    left: 21%;
  }

  .swop22-es .swop22-intro-wide .swop22-intro-n4 h1,
  .swop22-fr .swop22-intro-wide .swop22-intro-n4 h1 {
    font-size: 86px;
    line-height: 70px;
    left: 12%;
  }
}