* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#space {
  height: 8rem;
}

/* Title */
.title {
  background-color: #fff200;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

.title .container {
  width: 80%;
  margin: auto;
  padding: 2rem 0;
}

/* Examples */
#examples {
  width: 80%;
  margin: 1.5rem auto;
}

#examples h3 {
  font-family: "Roboto", sans-serif;
  margin-bottom: 1rem;
}

#examples .works {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

#examples .works figure {
  width: 100%;
  background-color: #00afef2f;
}

#examples .works figure img {
  width: 100%;
}

#examples .works .abso {
  width: 100%;
  height: 540px;
  background-color: #00afef2f;
  overflow: hidden;
  position: relative;
}

#examples .works .abso img {
  width: 150%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Prices */
.prices {
  background-color: #cccccc;
  margin: 1.5rem auto 2rem;
}

.prices .container {
  width: 80%;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  font-family: "Roboto", sans-serif;
}

.prices .container h2 {
  margin-bottom: 1rem;
}

.prices .container button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  border: none;
  background-color: #ffffff;
  padding: 1rem;
  font-size: 1rem;
  -webkit-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
}

.prices .container button span {
  font-size: 1.5rem;
}

.prices .container section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0.5rem 3rem;
}

.prices .container section figure {
  width: 100%;
}

.prices .container section figure img {
  width: 100%;
}

.prices .container section div {
  text-align: center;
  margin-top: 1rem;
  color: #ffffff;
}

.prices .container section div h4 {
  font-weight: 200;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.prices .container section div p {
  margin: 0.5rem auto;
}

.prices .container #lineart {
  background-color: #00aeef;
}

.prices .container #flat {
  background-color: #ffffff;
}

.prices .container #flat div {
  color: #000000;
}

.prices .container #shaded {
  background-color: #ec008c;
}

.prices .container #back {
  background-color: #ffffff;
}

.prices .container #back div {
  color: #000000;
}

.prices .container #extras {
  background-color: #000000;
}

.prices .container #extras div {
  color: #ffffff;
}

.prices .container #extras div ul {
  list-style: none;
}

.prices .container #extras div #disclaimer {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 200;
}

.prices .container #vectors {
  background-color: #00aeef;
}

.prices .container #brand {
  background-color: #ffffff;
}

.prices .container #brand div {
  color: #000000;
}

.prices .container #motion {
  background-color: #ec008c;
}

.prices .container #motion video {
  width: 100%;
}

.prices .container #front {
  background-color: #00aeef;
}

.prices .container #front div #disclaimer {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 200;
}

.illustration, .graphic, .web {
  display: none;
}

/* Extra Information */
#extrainfo {
  margin: 1rem auto 10rem;
}

#extrainfo .container {
  width: 80%;
  margin: 1rem auto;
  padding: 1rem 0rem 1.5rem;
}

#extrainfo .container h2 {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: "Roboto Condensed", sans-serif;
  margin-bottom: 1rem;
}

#extrainfo .container h3 {
  font-size: 1.2rem;
  color: #ec008c;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}

#extrainfo .container p {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 200;
  margin-bottom: 0.5rem;
  text-align: justify;
}

/* Tablet */
/* 768px*/
@media screen and (min-width: 768px) {
  #examples .works {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #examples .works figure {
    width: 20em;
  }
  #examples .works .abso {
    width: 20em;
    height: 30rem;
  }
  #examples .works .abso img {
    width: 150%;
    height: auto;
  }
  .prices {
    padding: 2rem 0rem;
  }
  .prices .illustration section {
    padding-left: 1rem;
    padding-right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .prices .illustration section figure {
    width: 18em;
  }
  .prices .illustration section div {
    text-align: left;
    margin-left: 1rem;
  }
  .prices .graphic section {
    padding-left: 1rem;
    padding-right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .prices .graphic section figure {
    width: 18em;
  }
  .prices .graphic section div {
    text-align: left;
    margin-left: 1rem;
  }
  .prices .graphic #motion video {
    width: 18em;
  }
  .prices .web section {
    padding-left: 1rem;
    padding-right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .prices .web section figure {
    width: 18em;
  }
  .prices .web section div {
    text-align: left;
    margin-left: 1rem;
  }
}

/*Desktop version*/
@media screen and (min-width: 940px) {
  .prices .illustration section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .prices .illustration section figure {
    width: 25em;
  }
  .prices .graphic section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .prices .graphic section figure {
    width: 25em;
  }
  .prices .graphic #motion video {
    width: 25em;
  }
  .prices .web section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .prices .web section figure {
    width: 25em;
  }
}
/*# sourceMappingURL=styles.css.map */