.hero {
  height: auto;
  margin-bottom: 6vw;
}
.hero h1 {
  color: #222323;
  margin-top: 15.9vw;
  font-size: 2.9vw;
}
.hero h2 {
  color: #6D2DD3;
  margin-top: 1.3vw;
  text-align: center;
  font-weight: 400;
  font-size: 1.37vw;
  line-height: 3.3vw;
  margin-bottom: 0;
}
.hero>p {
  width: 44vw;
  font-size: 1.35vw;
  line-height: 1.9vw;
  text-align: center;
  margin-bottom: 6.8vw;
  margin-top: 2.1vw;
  line-height: 2.2vw;
}
.hero>p span {
  color: #BC931E;
}
.hero .wrapper {
  width: 90.8vw;
}
.hero .wrapper .list {
  flex: 0 50%;
  margin-bottom: 5.8vw;
}
.hero .wrapper h3 {
  display: inline-flex;
  color: white;
  font-size: 1.36vw;
  padding: 0.4vw 1.1vw;
  margin: 0;
  border-radius: 0.8vw;
  margin-bottom: 1.2vw;
}
.hero .wrapper .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.25vw;
  width: 39.3vw;
}
.hero .wrapper .title {
  font-size: 0.94vw;
  color: #333;
  width: 20vw;
}
.hero .wrapper .title span {
  font-size: 1vw;
  font-weight: bold;
  margin-right: 0.5vw;
}
.hero .wrapper a {
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2vw;
  width: 8.8vw;
  border-radius: 5vw;
  box-shadow: 0 0 0.5vw rgba(0,0,0,0.1);
  transition: .2s;
}


.hero .wrapper .green .title span,
.hero .wrapper .green a {
  color: #7FC710;
}
.hero .wrapper .red .title span,
.hero .wrapper .red a {
  color: #EC5D60;
}
.hero .wrapper .blue .title span,
.hero .wrapper .blue a {
  color: #1883B2;
}
.hero .wrapper .light-blue .title span,
.hero .wrapper .light-blue a {
  color: #00B8BD;
}
.hero .wrapper .purple .title span,
.hero .wrapper .purple a {
  color: #633986;
}


.hero .wrapper .green h3,
.hero .wrapper .green a:hover {
  background-color: #7FC710;
}
.hero .wrapper .red h3,
.hero .wrapper .red a:hover {
  background-color: #EC5D60;
}
.hero .wrapper .blue h3,
.hero .wrapper .blue a:hover {
  background-color: #1883B2;
}
.hero .wrapper .light-blue h3,
.hero .wrapper .light-blue a:hover {
  background-color: #00B8BD;
}
.hero .wrapper .purple h3,
.hero .wrapper .purple a:hover {
  background-color: #633986;
}




.hero .wrapper a:hover {
  color: white;
}
.hero .wrapper span.divider {
  color: #333 !important;
}
.hero .wrapper .title span:not(.divider) {
  width: 1vw;
  display: inline-flex;
}

.hero .arrow-up {
  position: absolute;
  bottom: 0;
  left: 7.5vw;
}
.hero .arrow-up p {
  font-family: 'Waiting for the Sunrise', cursive;
  color: #eb2874;
  font-size: 1.7vw;
}
.hero .arrow-up p::before {
  content: '';
  background-image: url('../../assets/img/past-papers-arrow-up.svg');
  position: absolute;
  background-repeat: no-repeat;
  height: 3vw;
  width: 2.6vw;
  top: 0.2vw;
  left: -2.8vw;
}

/* ############################# */
/*         Text with header      */
/* ############################# */
.text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4.4vw;
}
.text-block h2 {
  color: #663396;
  margin-bottom: 0.8vw;
  text-align: center;
  line-height: 1.4;
}
.text-block p {
  width: 51vw;
  font-size: 1.2vw;
  color: #666;
  line-height: 2.3vw;
  text-align: center;
}
.text-block.extra-space {
  margin-top: 9.95vw;
}
.text-block.extra-space h2 {
  margin-bottom: 1.9vw;
}
.text-block p span {
  color: #15B6A4;
  font-weight: bold;
}



.chain {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chain h2 {
  font-size: 1.88vw;
  color: #663396;
}
.chain .wrapper {
  display: flex;
  width: 77.6vw;
}
.chain .wrapper.block-1 {
  margin-top: 1vw;
}
.chain .wrapper.block-1 .image {
  position: relative;
  transition: .2s;
}
.chain .block-1 img {
  margin-left: 1vw;
  height: 42.3vw;
}
.chain .block-1 .text {
  padding-left: 3.8vw;
}
.chain .block-1 .text h2 {
  margin-top: 7.1vw;
}
.chain .block-1 .text p {
  font-size: 1.203vw;
  color: #666;
  margin-top: 0;
  line-height: 2vw;
}
.chain .block-1 .text ul {
  list-style-type: none;
  padding-left: 2.72vw;
  margin-top: 1.9vw;
}
.chain .block-1 .text li {
  position: relative;
  font-size: 1.065vw;
  color: #666;
  margin-bottom: 1vw;
  line-height: 2vw;
}
.chain .block-1 .text li::before {
  content: '';
  background-image: url('../../assets/img/ucat-hero-arrow.svg');
  height: 1.584vw;
  width: 1.584vw;
  position: absolute;
  left: -2.826vw;
  top: 0.2vw;
}
.chain .wrapper.block-2 {
  margin-top: 4.9vw;
}
.chain .block-2 .image img {
  margin-right: 9.8vw;
  width: 29vw;
}
.chain .block-2 .text img {
  width: 30.2vw;
}
.chain .block-2 .text {
  padding-right: 6.7vw;
  text-align: right;
}
.chain .block-2 .text h2 {
  margin-top: 0.7vw;
  text-align: right;
  line-height: 1.4;
  margin-right: 0.8vw;
  margin-bottom: 1.4vw;
}
.chain .block-2 .text p {
  font-size: 1.203vw;
  color: #666;
  margin-top: 0;
  line-height: 2vw;
  text-align: right;
  margin-bottom: 2.2vw;
}
.chain .wrapper.block-3 {
  margin-top: 3vw;
}
.chain .block-3 .image img {
  margin-left: 9.7vw;
  margin-top: 1.5vw;
  width: 26.4vw;
}
.chain .block-3 .text {
  padding-left: 5.9vw;
}
.chain .block-3 .text h2 {
  margin-top: 0;
  margin-bottom: 0.8vw;
}
.chain .block-3 .text p {
  font-size: 1.203vw;
  color: #666;
  margin-top: 0;
  line-height: 2vw;
}
.chain .block-3 .list {
  margin-top: 2vw;
}
.chain .block-3 .item {
  display: flex;
  margin-bottom: 1.3vw;
}
.chain .block-3 .item img {
  height: 2.5vw;
}
.chain .block-3 .item p {
  margin: 0;
  color: #f2b122;
  font-weight: bold;
  margin-top: 0.4vw;
  margin-left: 1.4vw;
}
.chain .wrapper.block-4 {
  margin-top: 2.15vw;
}
.chain .block-4 .image img {
  margin-right: 4.2vw;
  height: 26.8vw;
}
.chain .block-4 .text img {
  width: 12.9vw;
}
.chain .block-4 .text {
  text-align: right;
  padding-right: 5vw;
}
.chain .block-4 .text h2 {
  line-height: 1.4;
  margin-top: 3.5vw;
  margin-bottom: 0.6vw;
}
.chain .block-4 .text p {
  font-size: 1.203vw;
  color: #666;
  margin-top: 0;
  line-height: 2vw;
}
.chain .chain-1 {
  height: 13.5vw;
  margin-top: -3vw;
}
.chain .chain-2 {
  height: 13.5vw;
  margin-top: 3.1vw;
  transform: translateX(-6.3vw);
}
.chain .chain-3 {
  height: 13.7vw;
  margin-top: 2.1vw;
  transform: translateX(5.9vw);
}
.chain .chain-4 {
  height: 15.3vw;
  margin-top: 2.8vw;
  transform: translateX(-8.5vw);
  margin-bottom: 1vw;
}
.chain .chain-button {
  background-color: #f7931e;
  text-decoration: none;
  color: white;
  padding: 0.9378vw 2.1882vw;
  border-radius: 0.4168vw;
  font-size: 1.0941vw;
  font-weight: bold;
  transform: translateX(10.8vw);
  transition: .2s;
}
.chain .chain-button:hover {
  background: white;
  color: #f7931e;
  box-shadow: 0 0 1vw rgba(0,0,0,.2);
}
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  margin-top: 3vw;
}
#popmake-634 .pum-close, #popmake-652 .pum-close {
  background: #b389ef;
}
#popmake-634 h2, #popmake-652 h2 {
  color: #b389ef;
}
.start-journey .form-wrapper::before {
  left: 43.7%;
}
.reviews h2 {
  margin-top: 4.5vw;
}
.improvements .points li:hover h3 {
    color: #a362ef;
}
.improvements ol li:hover::before {
    background-color: #a362ef;
}
.improvements .content h2 {
    line-height: 1.5;
}
body .hero .hero-form h3 {
    padding-top: 4.6vw;
}

#ucat-tutor-slider,
#ucat-tutor-slider-mobile {
  width: 40vw;
  position: absolute;
  height: 39vw;
}
#ucat-tutor-slider .slide img,
#ucat-tutor-slider-mobile .slide img {
  margin: auto;
  height: 31vw;
  border-radius: 1vw;
  box-shadow: 0 0 3vw rgba(0,0,0,.1);
  margin-top: 1.4vw;
  cursor: pointer;
  opacity: 0;
  transition: .1s;
}
#ucat-tutor-slider .slick-active img,
#ucat-tutor-slider-mobile .slick-active img {
  opacity: 1;
}
#ucat-tutor-slider .slick-arrow,
#ucat-tutor-slider-mobile .slick-arrow {
  display: inline-block;
  position: absolute;
  top: 15.2vw;
  left: 6vw;
  height: 3.7vw;
  background: transparent;
  color: transparent;
  width: 3.3vw;
  z-index: 1;
  border: 0;
  cursor: pointer;
  outline: none;
}
#ucat-tutor-slider .slick-arrow.slick-next,
#ucat-tutor-slider-mobile .slick-arrow.slick-next {
  display: block;
  right: 6.5vw;
  left: unset;
}
#ucat-tutor-slider .slick-dots,
#ucat-tutor-slider-mobile .slick-dots {
  display: block;
  padding: 0;
  display: flex !important;
  list-style-type: none;
  position: absolute;
  bottom: 1.3vw;
  width: 100%;
  justify-content: center;
}
#ucat-tutor-slider .slick-dots li,
#ucat-tutor-slider-mobile .slick-dots li {
  margin: 0 0.43vw;
}
#ucat-tutor-slider .slick-dots button,
#ucat-tutor-slider-mobile .slick-dots button {
  border-radius: 10vw;
  height: 0.9vw;
  width: 0.9vw;
  border: 0;
  color: transparent;
  background-color: #C8C8C8;
  outline: none;
}
#ucat-tutor-slider .slick-active button,
#ucat-tutor-slider-mobile .slick-active button {
  background-color: #969696;
}

.chain .block-1 .left.image.lightbox-active {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.5);
  overflow: scroll;
  padding: 40vw 0;
}
.chain .block-1 .left.image #close-lightbox {
  position: fixed;
  top: 23vw;
  right: 37vw;
  color: white;
  background-color: rgba(255,255,255,.5);
  display: none;
  width: 1.5vw;
  height: 1.5vw;
  align-items: center;
  justify-content: center;
  border-radius: 6vw;
  font-size: 0.7vw;
  cursor: pointer;
  z-index: 1;
}
.chain .block-1 .left.image.lightbox-active #close-lightbox {
  display: flex;
}
.chain.only-mobile {
  display: none;
}

/* ############################# */
/*        Start Your Journey     */
/* ############################# */
.start-journey {
  background-image: linear-gradient(-45deg,#f2b122,#f7931e);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position-y: 17.7661vw;
}
.start-journey h2 {
  text-align: center;
  margin: 0;
  line-height: 1.8;
  color: #f7941e;
}
.start-journey h2 span {
  font-size: 1.8756vw;
  line-height: 2.4;
  color: #f2b122;
}
.start-journey .form-wrapper,
.hero .hero-form {
  background: white;
  width: 56.0075vw;
  margin-top: 5.21vw;
  height: 27.1441vw;
  border-radius: 0.9378vw;
  margin-bottom: 10.42vw;
  position: relative;
  box-shadow: 0 0 1.563vw rgba(0,0,0,0.3);
  padding: 5.21vw;
}
.start-journey .form-wrapper::before,
.hero .hero-form::before {
  content: '';
  background-image: url('../../assets/img/mmi-telegram.svg');
  height: 5.9394vw;
  width: 5.9394vw;
  position: absolute;
  z-index: 9999;
  top: -2.9697vw;
  left: 42%;
}
.start-journey h3,
.hero .hero-form h3 {
  font-size: 1.7714vw;
  margin: 0.3647vw 0;
  color: #F7931E;
  position: relative;
}
.start-journey h3 span,
.hero .hero-form h3 span {
  color: #F2B122;
}
.start-journey h3::after,
.hero .hero-form h3::after {
  content: 'FREE';
  position: absolute;
  font-size: 1.0941vw;
  top: 0;
  right: 6.3562vw;
  border: 0.0521vw solid red;
  padding: 0.521vw 1.4588vw;
  border-radius: 1.042vw;
}
.start-journey form,
.hero form {
  display: flex;
  padding-top: 3.8554vw;
  flex-wrap: wrap;
}
.start-journey .form-group,
.hero .hero-form .form-group {
  display: flex;
  flex-direction: column;
  flex: 0 50%
}
.start-journey .form-group label,
.hero .hero-form .form-group label {
  margin-bottom: 1.3546vw;
  font-size: 1.0336vw;
}
.start-journey .form-group input,
.hero .hero-form .form-group input {
  border: 0;
  border-bottom: 0.0521vw solid #666;
  font-size: 1.042vw;
  width: 18.235vw;
  padding: 0.6vw 0;
}
.start-journey .form-group input::placeholder,
.hero .hero-form .form-group input::placeholder {
  color: #bbb;
  font-weight: 300;
}
.start-journey .form-group.submit,
.hero .hero-form .form-group.submit {
  flex: 0 100%;
  padding-top: 4.168vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-journey .form-group.submit input,
.hero .hero-form .form-group.submit input {
  border: 0;
  background: #f7931e;
  width: 11.462vw;
  height: 3.1781vw;
  border-radius: 1.042vw;
  color: white;
  transition: .2s;
}
.start-journey .form-group.submit input:hover,
.hero .hero-form .form-group.submit input:hover {
  background: white;
  color: #f7931e;
  box-shadow: 0 0 1vw rgba(0,0,0,.2);
}
.still-unsure h3 span {
  color: #16b3a2;
}
.call-us h2 span {
  color: black;
}
.call-us a {
  background: #EF1D72;
}
.call-us a:hover {
  color: #EF1D72;
}
.text-block h2 {
  color: #f7931e;
}
.text-block p span {
  color: #f2b122;
}
.chain h2 {
  color: #f7931e;
}
.chain .block-1 .text li:before {
  background-image: url('../../assets/img/gold-arrow-past.svg');
}


#popmake-634 h2, #popmake-652 h2 {
  color: #f7931e;
}
#popmake-634 .pum-close, #popmake-652 .pum-close {
  background: #f7931e;
}
#popmake-634 form, #popmake-652 form {
  justify-content: space-around;
  width: 40vw;
}
#popmake-634 .book-online input[type=submit],
#popmake-652 .book-online input[type=submit] {
  margin-top: 0.8218vw;
}



.mobile-lessons {
  display: none;
}


@media screen and (max-width: 768px) {
  .pum {
    display: none!important;
  }
  .mobile-lessons {
    display: inherit;
  }
  .chain.only-mobile {
    display: flex;
  }
  .chain .chain-pattern {
    height: 26.6vw;
  }
  .chain .wrapper {
    width: 100vw;
    flex-direction: column;
  }
  .chain .wrapper.block-1 .image {
    margin-top: 11vw;
    height: 95vw;
    overflow: hidden;
  }
  .chain .block-1 img {
    height: 106vw;
    transform: translateX(1.1vw);
    z-index: -1;
  }
  #ucat-tutor-slider-mobile {
    width: 100vw;
    position: absolute;
    height: 100vw;
    z-index: 1;
  }
  #ucat-tutor-slider-mobile .slide img {
    height: 80vw;
  }
  #ucat-tutor-slider-mobile .slick-arrow {
    top: 37.7vw;
    left: 14vw;
    height: 10vw;
    width: 10vw;
  }
  #ucat-tutor-slider-mobile .slick-arrow.slick-next {
    right: 14.7vw;
  }
  #ucat-tutor-slider-mobile .slick-dots {
    bottom: 2.1vw;
  }
  #ucat-tutor-slider-mobile .slick-dots button {
    border-radius: 79vw;
    height: 2.9vw;
    width: 2.9vw;
  }
  #ucat-tutor-slider-mobile .slick-dots li {
    margin: 0 1.2vw;
  }
  .chain .block-1 .text h2 {
    width: 100%;
    padding: 0 21vw;
  }
  .chain h2 {
    font-size: 5.58vw;
  }
  .chain .block-1 .text p,
  .chain .block-2 .text p,
  .chain .block-3 .text p,
  .chain .block-4 .text p {
    font-size: 4.203vw;
    line-height: 1.85;
    text-align: center;
    padding: 0 10vw;
  }
  .chain .block-1 .text ul {
    display: none;
  }
  .chain .wrapper.block-2 .image,
  .chain .wrapper.block-3 .image,
  .chain .wrapper.block-4 .image {
    text-align: center;
  }
  .chain .block-2 .image img {
    width: 62vw;
    margin-right: 0;
  }
  .chain .wrapper.block-2 {
    margin-top: 17.8vw;
  }
  .chain .block-2 .text h2 {
    text-align: center;
    margin-top: 12.5vw;
    line-height: 1.6;
  }
  .chain .block-2 .text p {
    padding: 0 8vw;
    margin-top: 6.7vw;
  }
  .chain .block-2 .text {
    text-align: center;
    padding: 0;
  }
  .chain .block-2 .text img {
    width: 74.2vw;
    margin-top: 6.9vw;
    margin-bottom: 16vw;
  }
  .chain .chain-button {
    padding: 2.8378vw 4.8882vw;
    border-radius: 1.9168vw;
    font-size: 3.5941vw;
    transform: translateX(0) translateY(-1.5vw);
  }
  .chain .block-3 .image img {
    margin: 0;
    margin-top: 15.8vw;
    width: 58vw;
  }
  .chain .block-3 .text h2 {
    margin-top: 44px;
    margin-bottom: 0.8vw;
    padding: 0 22.6vw;
  }
  .chain .block-3 .text p {
    padding: 0 4vw;
    margin-top: 8.3vw;
  }
  .chain .block-3 .item img {
    height: 8vw;
  }
  .chain .block-3 .item p {
    margin: 0;
  }
  .chain .block-3 .list {
    margin-top: 9.5vw;
    margin-bottom: 15.5vw;
  }
  .chain .block-3 .item {
    padding-left: 13.2vw;
    margin-bottom: 3.5vw;
  }
  .chain .block-4 .image img {
    margin-right: 0;
    height: 47.5vw;
    margin-top: 8.8vw;
    margin-bottom: 8.3vw;
  }
  .chain .block-4 .text {
    text-align: center;
    padding-right: 0;
    margin-bottom: 35.7vw;
  }
  .chain .block-4 .text p {
    padding: 0 6vw;
  }
  .chain .block-4 .text img {
    display: none;
  }
  .chain .block-1 .left.image.lightbox-active {
    width: 100vw;
    height: 170vw;
    padding: 0vw 0;
  }
  .chain .block-1 .left.image #close-lightbox {
    top: 39vw;
    right: 18vw;
    width: 6vw;
    height: 6vw;
    z-index: 10000;
    font-size: 2.5vw;
  }
  .chain .block-4 .text h2 {
    margin-bottom: 1em;
  }
  .hero h1 {
    font-size: 6.9vw;
    margin-top: 31vw;
  }
  .hero h2 {
    font-size: 4.4vw;
    line-height: 6.3vw;
    margin-bottom: 0;
  }
  .hero>p {
    font-size: 4vw;
    width: 76vw;
    line-height: 7.9vw;
    margin-top: 6.3vw;
  }
  .hero .wrapper .list {
    flex: 0 100%;
    margin-bottom: 10vw;
  }
  .hero .wrapper h3 {
    font-size: 6.2vw;
    padding: 1.4vw 3vw;
    border-radius: 1.8vw;
    width: 100%;
    margin-bottom: 4vw;
    align-items: center;
    justify-content: center;
  }
  .hero .wrapper .item {
    height: auto;
    width: 100%;
    flex-wrap: wrap;
    background: #fafafa;
    padding: 2vw;
    margin-bottom: 4vw;
    border-radius: 3vw;
    padding-bottom: 6vw;
  }
  .hero .wrapper .title {
    font-size: 4vw;
    margin-right: 0;
    flex: 0 100%;
  }
  .hero .wrapper .title span {
    font-size: 4vw;
  }
  .hero .wrapper .title span:not(.divider) {
    width: 4vw;
    display: inline-flex;
  }
  .hero .wrapper a {
    height: 11vw;
    width: 40.8vw;
    border-radius: 20vw;
    font-size: 3.9vw;
    background-color: white;
    box-shadow: 0 0 3vw rgba(0,0,0,.1);
  }
  .hero .arrow-up {
    display: none;
  }
  .hero h2 span {
    margin-top: 5.4vw;
    display: inherit;
  }
  .hero .wrapper {
    margin-top: 10vw;
  }
}

@media (min-width: 769px) and (max-width: 1500px)  {
  .hero .wrapper .list{
    flex: 100%;
    height: auto
  }
  .hero .wrapper .item{
    width: 100%;
    height: auto;
  }
  .hero .wrapper .title{
    width: 50%;
    height: auto;
  }
  .hero .wrapper a{
    width: 20%;
    height: auto;
    padding: 5px 20px;
  }
}