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

@media (min-width: 960px) {
  .grid-home {
    grid-template-areas: "top top top top" ". content content ." ". footer footer .";
    grid-template-rows: 10vh 80vh 10vh;
    min-height: 100vh; }

  .top {
    padding: 1vh 2rem; }

  .content .flex {
    flex-direction: row;
    padding: 0 3vh; }
    .content .flex .description {
      padding: 0 1.2rem;
      width: 65%; }
    .content .flex h2 {
      font-size: 2vw; }
    .content .flex .image {
      width: 35%;
      padding: 0 1.2rem; }
      .content .flex .image img {
        z-index: 10;
        position: relative;
        width: 100%;
        height: auto; }
      .content .flex .image:after {
        height: 85vh; }
    .content .flex .item {
      padding: 0 1rem;
      margin-top: 1rem; }
      .content .flex .item:nth-of-type(1) {
        padding: 0; }

  .contact {
    text-align: left !important; } }
@media (min-width: 577px) {
  .grid-home {
    grid-template-areas: "top top top" "content content content" "footer footer footer";
    min-height: 100%;
    grid-template-rows: 10vh 80vh 10vh; }

  .top {
    padding-left: 30px;
    padding-right: 30px; }
    .top .flex {
      justify-content: space-between; }

  .content h2 {
    font-size: 3vh; }
  .content .flex {
    padding: 0 20px; }
  .content .image:after {
    height: 85vh; }

  .contact {
    text-align: center; } }
@media (max-width: 576px) {
  .grid-home {
    grid-template-areas: "top top" "content content" "footer footer";
    min-height: 100%; }

  .top {
    padding: 5vh 15px; }
    .top .flex {
      justify-content: center; }
    .top .menu {
      margin-top: 30px; }

  .content {
    text-align: center;
    padding: 0 10px; }
    .content .flex {
      flex-direction: column;
      padding: 30px 0; }
    .content h2 {
      font-size: 3.8vh; }
    .content .description {
      padding-left: 5px;
      padding-right: 5px; }
    .content .item {
      padding: 6px 15px; }
    .content .image:after {
      height: 100vh;
      top: -100%; }

  .section, .challenger {
    padding: 0 15px; } }
.challenger {
  background-color: #EFEFEF;
  text-align: center;
  margin-top: 30px;
  padding: 90px 0; }
  .challenger h1 {
    font-size: 32px;
    letter-spacing: -0.04em;
    color: #515252;
    text-transform: uppercase;
    margin-bottom: 30px; }
  .challenger p {
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300; }

.section01 {
  padding: 90px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  font-weight: 300;
  flex-wrap: wrap; }
  .section01 .text {
    padding-right: 30px; }
    .section01 .text h2 {
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-align: left;
      color: #515252; }
    .section01 .text p {
      margin-top: 20px; }

body, html {
  font-family: 'Montserrat', sans-serif;
  height: 100%;
  min-height: 100%; }

p {
  font-size: 16px;
  line-height: 1.5rem; }

.top .flex, .content .flex, footer .flex {
  display: flex; }

.top nav .link, footer .flex .link {
  transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s; }

.grid-home {
  display: grid; }

.top {
  display: grid;
  grid-area: top;
  position: relative;
  z-index: 10; }
  .top .flex {
    align-items: center;
    flex-wrap: wrap; }
  .top .logo {
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 18px; }
    .top .logo span {
      font-weight: 900; }
    .top .logo a {
      color: #3F3F4D;
      text-decoration: none; }
  .top nav .menu {
    min-width: 300px; }
  .top nav .link {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin: 0 7px;
    text-decoration: none;
    color: #3F3F4D;
    align-content: center; }
    .top nav .link:hover {
      opacity: 0.7; }
  .top nav .active {
    position: relative; }
    .top nav .active:before {
      content: '';
      display: block;
      position: absolute;
      width: 40px;
      height: 5px;
      bottom: -10px;
      left: 50%;
      margin-left: -20px;
      background: #63FAE9; }

.content {
  display: grid;
  grid-area: content; }
  .content .flex {
    justify-content: space-around;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto; }
    .content .flex .description {
      z-index: 10;
      padding-top: 6vh; }
      .content .flex .description h2 {
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-top: auto; }
      .content .flex .description .d-subtitle {
        font-weight: 200;
        font-size: 1.2rem;
        padding: 5px 0;
        text-transform: uppercase; }
      .content .flex .description .me {
        font-weight: 200;
        line-height: 22px; }
    .content .flex .image {
      position: relative;
      top: 4vh; }
      .content .flex .image img {
        z-index: 10;
        position: relative;
        width: 100%;
        height: auto; }
      .content .flex .image:after {
        position: absolute;
        content: '';
        display: block;
        background-color: #63FAE9;
        width: 65%;
        margin-left: 18%;
        bottom: 4px;
        z-index: 0; }
    .content .flex .item {
      font-weight: 200; }
      .content .flex .item h3 {
        text-transform: uppercase;
        font-size: 18px;
        letter-spacing: 3px;
        padding-bottom: 10px;
        color: #626464; }
  .content .steps {
    padding: 0;
    margin-top: 60px; }
  .content .place {
    margin-top: 60px; }

footer {
  display: grid;
  grid-area: footer;
  text-align: center; }
  footer .flex {
    max-width: 600px;
    align-items: center;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between; }
    footer .flex .link {
      margin: 0 10px;
      color: #3F3F4D;
      padding: 5px; }
      footer .flex .link:hover {
        opacity: 0.6;
        color: #63FAE9;
        background: #3F3F4D; }

.contact {
  background: #ffffff;
  color: #3F3F4D; }
  .contact a {
    color: #3F3F4D; }
  .contact .top a {
    color: #3F3F4D; }
  .contact p {
    margin: 5px 0; }
  .contact .place {
    margin-top: 10px; }
    .contact .place h3 {
      text-transform: uppercase;
      font-size: 18px;
      letter-spacing: 3px;
      padding: 10px 15px;
      color: #63FAE9;
      background: #3F3F4D; }
  .contact .contact-desc {
    position: relative;
    z-index: 10; }
  .contact footer .link {
    color: #3F3F4D; }
    .contact footer .link:hover {
      color: #63FAE9;
      background: #3F3F4D; }

.works {
  background: #3F3F4D;
  color: #ffffff; }
  .works .top a {
    color: #ffffff; }
  .works .top .active:before {
    background: #ffffff; }
  .works .image:after {
    background: #63FAE9 !important; }
  .works h3 {
    color: #63FAE9;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px; }
  .works p {
    font-weight: 200;
    margin-bottom: 20px; }

/*# sourceMappingURL=style.css.map */