@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #fff;
  text-decoration: none;
}

@-webkit-keyframes skyline {
  0% {
    -webkit-transform: translateX(-845px);
  }
  85% {
    -webkit-transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(-140px);
  }
}
@keyframes skyline {
  0% {
    transform: translateX(-845px);
  }
  85% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(-140px);
  }
}
@-webkit-keyframes clouds {
  0% {
    -webkit-transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(-50px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
@keyframes clouds {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
  }
}
html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0px;
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  background: #3d3963;
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #3d3963 0%,
    #232541 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #3d3963 0%,
    #232541 100%
  );
  background: radial-gradient(ellipse at center, #3d3963 0%, #232541 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3963', endColorstr='#232541',GradientType=1 );
  -webkit-font-smoothing: antialiased;
}

.flex {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block {
  background: #150633;
  width: 370px;
  text-align: center;
  overflow: hidden;
  height: 650px;
  position: relative;
  box-shadow: 0 19px 48px rgba(0, 0, 0, 0.22), 0 15px 32px rgba(0, 0, 0, 0.15);
}
.block .background {
  top: -60px;
}
.block .background.london {
  transition: 0.4s all ease;
  transform: translateX(-845px);
}
.block .background.london .slidetext {
  transform: translateX(-845px);
}
.block .background.paris {
  transition: 0.4s all ease;
  transform: translateX(-130px);
}
.block .background.paris .slidetext {
  transform: translateX(-130px);
}
.block .background svg {
  width: 1400px;
}
.block .background svg #clouds {
  animation: clouds 20s ease-in-out forwards infinite;
}
.block .slidetext {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 30px;
}
.block .slidetext.active {
  opacity: 0;
}
.block .slidetext h1 {
  display: block;
  color: white;
  font-weight: 300;
  font-size: 36px;
  margin-bottom: 0px;
}
.block .slidetext h2 {
  margin-top: 0px;
  margin-bottom: 40px;
  color: #7b6ca0;
  font-size: 24px;
  font-weight: 300;
}
.block .slidetext .bttn {
  line-height: normal;
  padding: 12px 35px;
  background: #3c2075;
  border-radius: 25px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.2s ease;
}
.block .slidetext .bttn:hover {
  background: #462589;
}
.block .slidetext .dots {
  padding: 0px;
  margin: 15px 0px 0px 0px;
}
.block .slidetext .dots li {
  list-style-type: none;
  display: inline-block;
  height: 5px;
  width: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  margin-right: 3px;
}
.block .slidetext .dots li.active {
  background: rgba(255, 255, 255, 0.9);
}
.block .slidetext .dots li:last-of-type {
  margin-right: 0px;
}