.start {
  background-image: url(../imgs/IMG_8646.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 58.333vw;
  max-height: 58.333vw;
  text-align: center;
  z-index: 100;
}
.name {
  font-weight: 300;
  color: rgb(255, 255, 255);
  grid-area: a;
  font-size: 6.5vw;
  position: absolute;
  top: 24.167vw;
  right: 0px;
  bottom: 0;
  left: 0;
}
.about {
  font-size: 6.8vw;
  position: absolute;
  top: -4vw;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline;
}
.work {
  font-size: 6.8vw;
  position: absolute;
  top: 53vw;
  left: 2vw;
  display: inline;
}
.contacts {
  font-size: 6.8vw;
  position: absolute;
  top: 53vw;
  right: 2vw;
  display: inline;
}
.about:hover {
  animation: slideabout 200ms linear;
  animation-timing-function: ease-in-out;
  animation-delay: 150ms;
  animation-fill-mode: forwards;
}
.work:hover {
  animation: slidework 200ms forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 150ms;
  animation-fill-mode: forwards;
}
.contacts:hover {
  animation: slidecontacts 200ms linear;
  animation-timing-function: ease-in-out;
  animation-delay: 150ms;
  animation-fill-mode: forwards;
}
@keyframes slideabout {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateY(3.750vw);
  }
}
@keyframes slidework {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateY(-3.750vw);
  }
}
@keyframes slidecontacts {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateY(-3.750vw);
  }
}
.sobre {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    " . . first first . ."
    ". beggining beggining beggining beggining ."
    " image1 image1 image1 middle1 middle1 middle1"
    "middle2 middle2 middle2 image2 image2 image2"
    ". . end end . .";
  grid-column-gap: 40px;
  grid-row-gap: 60px;
  background-color: white;
  color: rgb(104, 104, 104);
  font-size: 1.6vw;
  text-align: center;
  padding: 20px;
  transition-property: all;
  transition-duration: 150ms;
}
.first {
  grid-area: first;
}
.beggining {
grid-area: beggining;
}
.image1 {
  grid-area: image1;
  width: 100%;
}
.middle1 {
  grid-area: middle1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.image2 {
  grid-area: image2;
  width: 100%;
}
.middle2 {
  grid-area: middle2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.end {
  grid-area: end;
}
.title {
  font-size: 3.2vw;
  font-weight: 600;
  padding: 3vw;
  padding-top: 6vw;
}
.trabalho {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "second second second second second second"
    "set1 set1 set1 set1le set1le set1le"
    "set2 set2 set2 set2 set2 set2"
    "set2le set2le set2le set2le set2le set2le"
    "set3 set3 set3 set4 set4 set4"
    "set3 set3 set3 set4le set4le set4le"
    "set3le set3le . . . .";
  grid-column-gap: 1.6vw;
  grid-row-gap: 1.6vw;
  background-color: white;
  color: rgb(104, 104, 104);
  font-size: 18px;
  padding: 10px;
}
.second {
  text-align: center;
  grid-area: second;
}
.set1 {
  grid-area: set1;
  max-width: 100%;
}
.set1le {
  grid-area: set1le;
}
.set2 {
  grid-area: set2;
  max-width: 100%;
}
.set2le {
  grid-area: set2le;
}
.set3 {
  grid-area: set3;
  max-width: 100%;
}
.set3le {
  grid-area: set3le;
}
.set4 {
  grid-area: set4;
  max-width: 100%;
}
.set4le {
  grid-area: set4le;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.legenda {
  position: relative;
  top: 0px;
}
.direita {
  position: relative;
  padding-left: 100px;
}
.contactos {
  background-color: rgb(255, 255, 255);
  color: rgb(104, 104, 104);
  text-align: center;
  display: inline;
  transition-property: all;
  transition-duration: 150ms;
}
.grey {
  background-color: rgb(192, 192, 192);
  color: rgb(104, 104, 104);
  font-size: 1.6vw;
  text-align: center;
  height: 60vw;
  padding: 30px;
}
.instagram {
  display: inline;
  padding-top: 3vw;
  padding-bottom: 2vw;
 width: 8%;
}
.facebook {
  display: inline;
  padding-top: 3vw;
  padding-bottom: 2vw;
  width: 8%;
}
.subtitle {
  font-size: 2vw;
  padding-top: 1vw;
  padding-bottom: 2vw;
}
.links {
  font-size: 1.3vw;
  text-align: center;
}
.homebutton {
  width: 1em;
  position: fixed;
  bottom: 1.667vw;
  right: 7.500vw;
  font-size: 3vw;
  z-index: 98;
}