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

body {
  margin: 0;
  padding: 0;

  font-size: 18px;
  font-family: "Open Sans", Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", sans-serif
}

html, body, .wrapper {
  height: 100%
}

.wrapper {
  display: flex;
  flex-direction: column;
  background: white;
}

.logo-side, .text-side {
  width: 100%;
}

.logo-side {
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(113, 88, 165);
  padding-left: 2em;
  padding-right: 2.5em;
}

.logo-side h1 {
  flex: 1;
  max-width: 360px;
}

.logo-side h1 img {
  width: 100%;
}

.text-side {
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2em;
  padding-right: 2em;
}

.text-side h2, h3 {
  font-weight: 100;
  margin-bottom: 0;
  margin-top: 0.25em;
}

.text-side h2 {
  font-size: 2em;
}

.text-side h3 {
  font-size: 1.5em;
}

.text-side ul {
  list-style: square;
}

.text-side li {
  padding-bottom: 0.5em;
}

@media screen and (min-width: 1100px) {
  .wrapper {
    flex-direction: row;
  }
  .logo-side {
    width: 45%;
    height: 100%;
    justify-content: flex-end;
    padding-bottom: 5%;
  }
  .logo-side h1 {
    margin-right: 2em;
  }
  .text-side {
    width: 55%;
    height: 100%;
    padding-left: 2em;
    padding-bottom: 5%;
  }
}