html,
body {
  padding: 0;
  margin: 0;
  font-size: 32px;
  font-family: 'Inter', sans-serif;
  color: #202046;
  position: relative;
}

html {
  height: 100%;
}

body {
  background: url(../images/pattern-bg.svg) center top 20px no-repeat, url(../images/pattern-quotes.svg) center 55% no-repeat;
  background-size: 84%, 15%;
  min-height: 100%;
  display: -ms-grid;
  display: grid;
}

@media (min-width: 380px) {
  body {
    background: url(../images/pattern-bg.svg) center top 12% no-repeat, url(../images/pattern-quotes.svg) center 48% no-repeat;
    background-size: 50%, 10%;
  }
}

@media (min-width: 870px) {
  body {
    background: url(../images/pattern-bg.svg) right 25% top 23% no-repeat, url(../images/pattern-quotes.svg) left 300px top 25% no-repeat;
    background-size: 37%, 7%;
  }
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

.slideImg {
  max-width: 300px;
  margin: 0 auto;
  -webkit-box-shadow: 0 35px 25px -12px rgba(32, 32, 70, 0.2);
          box-shadow: 0 35px 25px -12px rgba(32, 32, 70, 0.2);
  display: block;
}

@media (min-width: 870px) {
  .slideImg {
    max-width: 400px;
  }
}

.arrowImg {
  z-index: 5;
  width: 10px;
}

@media (min-width: 870px) {
  .arrowImg {
    width: 12px;
  }
}

.arrowImg--next {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.curve-img {
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  max-width: 80%;
}

@media (min-width: 870px) {
  .curve-img {
    max-width: 40%;
  }
}

.slideContainer {
  width: 85%;
  margin: 0 auto;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

@media (min-width: 870px) {
  .slideContainer {
    height: 70%;
  }
}

.slide {
  max-width: 330px;
  margin: 0 auto;
  margin-top: 28px;
  height: auto;
}

@media (min-width: 380px) {
  .slide {
    max-width: 460px;
    margin: 30px auto;
  }
}

@media (min-width: 870px) {
  .slide {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[5];
        grid-template-columns: repeat(5, 1fr);
    max-width: 1000px;
    min-height: 300px;
  }
}

.slide_text {
  text-align: center;
  font-weight: 300;
  font-size: .5rem;
  padding: 4.5em 1em 0 1em;
  margin-bottom: 0;
  max-width: 550px;
}

@media (min-width: 380px) {
  .slide_text {
    font-size: .6rem;
    padding-top: 3em;
  }
}

@media (min-width: 870px) {
  .slide_text {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / 4;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    padding-top: 0;
    z-index: 10;
    text-align: left;
    font-size: .7rem;
    padding: 3em 1em 0 1em;
  }
}

.slide_nameText {
  font-weight: 700;
  font-size: .5rem;
}

.slide_jobTitle {
  font-weight: 500;
  font-size: .5rem;
  color: #babacf;
}

.slideImg_area {
  position: relative;
  margin: 0 auto;
  max-width: 240px;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 380px) {
  .slideImg_area {
    max-width: 400px;
    margin-top: 10px;
  }
}

@media (min-width: 870px) {
  .slideImg_area {
    max-width: 500px;
    grid-column: 3 / -1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
  }
}

.slideControls {
  background-color: #fff;
  padding: .1em .1em 0 .1em;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media (min-width: 380px) {
  .slideControls {
    bottom: -15px;
  }
}

@media (min-width: 870px) {
  .slideControls {
    left: 50px;
    right: auto;
    width: 70px;
  }
}

button {
  background-color: #fff;
  border: none;
  padding: .2em .2em .2em .2em;
  border-radius: 20px;
}

.prevArrow,
.nextArrow {
  -webkit-transition: 0.1s ease;
  transition: 0.1s ease;
}

.prevArrow:hover,
.nextArrow:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.prevArrow {
  padding: .1em 0 .1em .3em;
}

.nextArrow {
  padding: .1em .3em .1em 0;
}

.slide2 {
  display: none;
}

footer {
  margin: 0;
  padding: .3em;
  grid-column: 1 / -1;
  margin-top: auto;
}

.attribution {
  font-size: .3rem;
  text-align: center;
  padding: 0 0 .2em 0;
}

@media (min-width: 380px) {
  .attribution {
    font-size: .40rem;
  }
}

.attribution a {
  color: #3e52a3;
}
/*# sourceMappingURL=styles.css.map */