:root {
  --black: black;
  --white: white;
}

.body {
  color: var(--black);
  background-color: #8d8671;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  display: flex;
}

.logo {
  z-index: 200;
  opacity: 0;
  position: fixed;
  top: 50px;
  left: 44px;
}

.image-2 {
  width: 200px;
}

.kypselia {
  background-color: #0000;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.title {
  width: 100%;
  margin-bottom: 21px;
  font-size: 40px;
  font-weight: 300;
}

.menuolo {
  z-index: 1000;
  background-color: #9b978a;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0% auto auto 0%;
}

.butmenu {
  color: var(--white);
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 29px;
  font-weight: 300;
  line-height: 29px;
  text-decoration: none;
}

.social {
  z-index: 500;
  opacity: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -63px;
  display: flex;
  position: fixed;
  inset: auto auto 13px 10px;
}

.slink {
  width: 28px;
}

.slink.f {
  width: 22px;
  margin-top: 35px;
}

.slink.ins {
  width: 40px;
}

.image-5 {
  padding: 5px;
}

.menu-2 {
  z-index: 200000;
  opacity: 1;
  background-color: #0000;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 100px;
  height: 70px;
  text-decoration: none;
  display: flex;
  position: fixed;
  inset: 28px 0 auto auto;
}

.buttona1 {
  background-color: #2d2188;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
}

.buttona1.out {
  z-index: 49000;
  background-color: #0000;
  background-image: none;
  height: 100%;
  display: block;
  position: absolute;
}

.buttona1.in {
  z-index: 50000;
  background-color: #0000;
}

.logopurplesheep {
  z-index: 20000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: auto;
  display: flex;
  position: fixed;
  inset: auto 10px 33% auto;
}

.link-block-8 {
  position: relative;
}

.design {
  color: var(--black);
  width: 90px;
  font-family: Roboto, sans-serif;
  font-size: 10px;
  font-weight: 500;
  position: absolute;
  top: -58px;
  left: -38px;
  transform: rotate(-90deg);
}

.purplesheeplogo {
  width: 20px;
}

.popup-overlay {
  z-index: 540000;
  color: var(--white);
  background-color: #6b6637;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: auto;
  padding-top: 14px;
  padding-bottom: 14px;
  display: none;
  position: fixed;
  inset: auto 0% 3% auto;
}

.cookiein {
  margin-left: 10px;
  margin-right: 3px;
  display: flex;
}

.text-block-7 {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  line-height: 14px;
}

.link-2 {
  color: #000;
  background-color: #ecd905;
  padding-left: 11px;
  padding-right: 11px;
  font-weight: 700;
  text-decoration: none;
}

.button-3 {
  color: #000;
  background-color: #0000;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-family: Roboto, sans-serif;
  font-size: 30px;
  font-weight: 500;
  display: flex;
}

.button-3:hover {
  background-color: #fbff00;
}

.pardiv {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 49px;
  display: block;
  position: relative;
}

.out {
  z-index: 300000;
  background-color: var(--white);
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0% auto auto 0%;
}

.paragraph-2 {
  margin-top: 0;
  margin-left: 94px;
  margin-right: 94px;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 25px;
}

.section-3 {
  margin-bottom: 100px;
}

.section-4 {
  height: 190px;
}

.fixcover {
  opacity: 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  overflow: hidden;
}

.covanimationa {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.allo {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: visible;
}

.lottie-animation {
  width: 100%;
  position: fixed;
  inset: auto 0% auto auto;
}

.picin {
  opacity: 1;
  background-color: #0000;
  width: 55%;
  padding-top: 28%;
  position: absolute;
  right: 0%;
}

.image-6 {
  perspective-origin: 0%;
  transform-origin: 0%;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: auto 0% 0% auto;
}

.animpic {
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
  overflow: hidden;
}

.titlefour {
  flex-direction: row;
  margin-bottom: -15%;
  margin-left: -51%;
  display: flex;
  position: fixed;
  left: 50%;
}

.titlemoto {
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 26px;
  font-size: 8vw;
  font-weight: 100;
  line-height: 1;
}

.titlemoto.b {
  margin-right: 19px;
  font-size: 8vw;
  font-weight: 300;
  line-height: 1;
}

.titlemoto.b.sm {
  color: #fff;
}

.titlemoto.b.sm._70 {
  opacity: 0;
  text-align: right;
  margin-right: 0;
  line-height: .8;
  display: block;
  position: absolute;
  bottom: -29%;
  left: -14%;
}

.titlemoto.b.sm.cust {
  opacity: 0;
  position: absolute;
  left: 17%;
}

.titlemoto.sm {
  font-size: 3vw;
}

.menunew {
  color: #000;
  align-items: center;
  font-weight: 100;
  display: flex;
}

.cyclos {
  background-color: var(--black);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 13px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.menuooo {
  margin-right: 8px;
  font-size: 20px;
  font-weight: 300;
}

.olo {
  z-index: 2;
  width: 100%;
  padding-top: 45%;
  padding-bottom: 21%;
  position: relative;
}

.olo.contact {
  padding-top: 15%;
}

.textblog {
  width: 100%;
}

.textcol {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.aniimationin {
  justify-content: center;
  align-items: center;
  display: block;
}

.peragraph-first {
  padding-right: 15%;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
}

.peragraph-first.bi {
  font-size: 30px;
  font-weight: 900;
}

.heading {
  color: var(--white);
  margin-bottom: 26px;
  line-height: 1.1;
  display: none;
  position: relative;
}

.newa {
  z-index: 4;
  flex-direction: row;
  width: auto;
  display: flex;
  position: absolute;
  inset: auto auto auto 11%;
}

.stgr {
  background-color: var(--white);
  color: var(--white);
  width: 2px;
  height: 100%;
}

.strw {
  background-color: var(--white);
  width: 2px;
  height: 100%;
  position: absolute;
}

.picaa {
  width: 90%;
  margin-bottom: 98px;
  position: relative;
}

.picaa.erga {
  justify-content: center;
  align-items: center;
  margin-top: 142px;
  display: flex;
  overflow: hidden;
}

.picaa.erga.pro {
  margin-top: 0;
  margin-bottom: 0;
}

.picaa.erga.services {
  margin-top: 0;
}

.picaa.erga.buttoneso {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.picaa.katsssk {
  width: 100%;
  margin-bottom: 0;
  padding-top: 100%;
}

.image-7 {
  position: relative;
}

.image-7.kattt {
  object-fit: cover;
  object-position: 50% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
}

.works {
  color: var(--white);
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1;
  position: absolute;
  inset: auto;
}

.works.perigrafh {
  padding-left: 24px;
  padding-right: 24px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.1;
}

.map {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.dieyt {
  justify-content: center;
  display: flex;
}

.telem {
  color: var(--black);
  text-align: center;
  margin-bottom: 18px;
  font-size: 24px;
  text-decoration: none;
}

.adsola {
  flex-direction: column;
  margin-top: 16%;
  margin-bottom: 16%;
  display: flex;
  position: relative;
}

.dieuthinsi {
  text-align: center;
  margin-bottom: 27px;
  font-size: 24px;
}

.mapes {
  background-color: #1d1d1d;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
}

.telephone {
  z-index: 60;
  background-color: #5a5959;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  display: flex;
  position: relative;
  inset: auto 1% 1% auto;
}

.telephone.email {
  margin-right: 10px;
}

.telephona {
  z-index: 60;
  opacity: 0;
  flex-direction: row;
  display: flex;
  position: fixed;
  top: auto;
  bottom: 15px;
  left: 72px;
}

.pilink {
  width: 35px;
  height: 35px;
  margin-right: 7px;
}

.image-8 {
  width: 25px;
}

.lku {
  position: relative;
}

.projects {
  width: 100vw;
  padding: 11% 10%;
}

.projecrgrid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.projecrgrid.katttttt {
  grid-column-gap: 30px;
  margin-bottom: 195px;
}

.naveso {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5% 35% 200px;
  display: flex;
}

.look {
  width: 100%;
  font-size: 28px;
  line-height: 1.2;
}

.worksgraphic {
  color: var(--white);
  margin-top: 20%;
  margin-bottom: 44px;
  padding-left: 5%;
  font-size: 90px;
  line-height: 1.2;
}

.worksgraphic.inanimation {
  color: #0000;
  line-height: 1;
}

.kataskevestitle {
  color: var(--white);
  margin-bottom: 28px;
  font-size: 2.2vw;
  line-height: 1.1;
}

.kataskevewperigrafi {
  font-size: 1.4vw;
  font-weight: 500;
  line-height: 1.6;
}

.extra {
  width: 100%;
  max-height: 0;
  position: absolute;
}

.ena {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.kentro {
  position: relative;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.button-4 {
  background-color: var(--black);
}

.keykoo {
  z-index: auto;
  opacity: 0;
  position: fixed;
  inset: 0% auto auto 0%;
}

.keyskoo {
  margin-top: 0;
  margin-bottom: 0;
  position: fixed;
}

.image-9 {
  width: 20px;
}

.logoespa {
  z-index: 45;
  position: fixed;
  inset: auto auto 16px 221px;
}

.image-10 {
  width: 210px;
}

@media screen and (max-width: 991px) {
  .title.text {
    font-size: 35px;
  }

  .butmenu {
    margin-top: 13px;
    margin-bottom: 13px;
    font-size: 24px;
    line-height: 24px;
  }

  .menu-2 {
    top: 7px;
  }

  .lottie-animation {
    width: 140%;
  }

  .picin {
    width: 75%;
    padding-top: 44%;
  }

  .titlemoto {
    margin-right: 0;
  }

  .titlemoto.b {
    margin-right: 13px;
  }

  .titlemoto.b.sm {
    margin-right: 0;
    font-size: 4vw;
  }

  .titlemoto.b.sm._70 {
    bottom: 52%;
    left: -28%;
  }

  .titlemoto.b.sm.cust {
    left: 35%;
  }

  .titlemoto.sm {
    font-size: 4vw;
  }

  .olo.contact {
    padding-top: 21%;
  }

  .textcol {
    grid-template-columns: .5fr 1fr;
  }

  .peragraph-first {
    font-size: 23px;
  }

  .peragraph-first.bi {
    font-size: 28px;
    line-height: 1.4;
  }

  .newa {
    flex-direction: column;
    align-items: flex-end;
    left: 8%;
  }

  .picaa.erga.pro {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .works {
    font-size: 29px;
  }

  .works.perigrafh {
    margin-top: 0;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 22px;
    line-height: 1;
    top: auto;
  }

  .telephone.email {
    margin-right: 12px;
  }

  .projects {
    padding-top: 27%;
  }

  .projecrgrid.katttttt {
    grid-column-gap: 20px;
  }

  .naveso {
    flex-direction: column;
    padding-left: 29%;
    padding-right: 29%;
  }

  .look {
    color: var(--black);
    width: 100%;
    line-height: 1.2;
  }

  .worksgraphic.inanimation {
    margin-top: 21%;
    margin-bottom: 0;
    font-size: 70px;
  }

  .kataskevestitle {
    margin-bottom: 17px;
    font-size: 4vw;
  }

  .kataskevewperigrafi {
    font-size: 2.3vw;
  }
}

@media screen and (max-width: 767px) {
  .logo {
    top: 26px;
    left: 33px;
  }

  .image-2 {
    width: 150px;
  }

  .kypselia {
    align-items: center;
  }

  .title {
    text-align: center;
    margin-bottom: 14px;
    font-size: 30px;
    line-height: 40px;
  }

  .title.text {
    text-align: left;
    font-size: 28px;
  }

  .butmenu {
    margin-top: 11px;
    margin-bottom: 11px;
    font-size: 20px;
    line-height: 20px;
  }

  .social {
    inset: auto auto 11px 0%;
  }

  .slink {
    width: 24px;
  }

  .slink.f {
    width: 20px;
  }

  .slink.ins {
    width: 35px;
  }

  .menu-2 {
    width: 70px;
    top: 0;
    right: 0;
  }

  .logopurplesheep {
    right: 5px;
  }

  .pardiv {
    margin-top: 34px;
  }

  .section-4 {
    height: 130px;
  }

  .lottie-animation {
    width: 100%;
  }

  .picin {
    width: 55%;
    padding-top: 28%;
  }

  .titlemoto.b {
    margin-right: 9px;
  }

  .peragraph-first {
    font-size: 20px;
  }

  .peragraph-first.bi, .works {
    font-size: 25px;
  }

  .telephone {
    width: 30px;
    height: 30px;
  }

  .telephone.email {
    margin-right: 13px;
  }

  .telephona {
    bottom: 9px;
    left: 56px;
  }

  .projects {
    padding-left: 6%;
    padding-right: 9%;
  }

  .projecrgrid.katttttt {
    margin-bottom: 109px;
  }

  .naveso {
    padding-top: 17%;
  }

  .look {
    font-size: 25px;
  }

  .worksgraphic.inanimation {
    font-size: 60px;
  }

  .kataskevewperigrafi {
    font-size: 2.6vw;
  }

  .image-9 {
    width: 20px;
  }

  .logoespa {
    left: 149px;
  }

  .image-10 {
    width: 160px;
  }
}

@media screen and (max-width: 479px) {
  .logo {
    top: 23px;
    left: 11px;
  }

  .image-2 {
    width: 150px;
  }

  .kypselia {
    align-items: center;
  }

  .title {
    font-size: 30px;
  }

  .title.text {
    line-height: 35px;
  }

  .butmenu {
    margin-bottom: 24px;
    font-size: 23px;
    line-height: 23px;
  }

  .social {
    border-radius: 6px;
    inset: auto auto 60px 2px;
  }

  .menu-2 {
    top: 0;
    right: 0;
  }

  .popup-overlay {
    width: 250px;
  }

  .pardiv {
    margin-top: 38px;
    display: block;
  }

  .paragraph-2 {
    margin-left: 44px;
    margin-right: 44px;
  }

  .allo {
    overflow: hidden;
  }

  .lottie-animation {
    width: 170%;
  }

  .picin {
    width: 90%;
    padding-top: 68%;
  }

  .titlefour {
    margin-left: -47%;
  }

  .titlemoto {
    font-size: 12vw;
  }

  .titlemoto.b {
    margin-right: 7px;
    font-size: 12vw;
  }

  .titlemoto.b.sm, .titlemoto.sm {
    font-size: 7vw;
  }

  .olo {
    justify-content: center;
    display: block;
    overflow: visible;
  }

  .textblog {
    justify-content: center;
    align-items: flex-start;
    padding-left: 13%;
    padding-right: 13%;
    display: flex;
    position: relative;
  }

  .textcol {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: 1fr;
    justify-items: stretch;
    width: 100%;
    position: relative;
  }

  .griddd {
    width: 100%;
    padding-bottom: 0;
    padding-right: 0;
    position: relative;
  }

  .aniimationin {
    position: static;
  }

  .peragraph-first {
    width: 100%;
    padding-right: 0;
    font-size: 20px;
  }

  .peragraph-first.bi {
    font-size: 25px;
  }

  .heading {
    font-size: 10vw;
    line-height: 1.1;
    display: block;
  }

  .newa {
    display: none;
    left: 16%;
  }

  .picaa {
    width: 100%;
  }

  .image-7 {
    position: relative;
  }

  .works {
    line-height: 1;
  }

  .telem {
    font-size: 20px;
  }

  .adsola {
    margin-top: 37%;
    margin-bottom: 37%;
  }

  .telephone.email {
    margin-right: 19px;
  }

  .telephona {
    left: 9px;
  }

  .pilink {
    margin-left: 0;
    margin-right: 14px;
  }

  .image-8 {
    position: relative;
    top: -4px;
  }

  .projects {
    padding-left: 9%;
  }

  .projecrgrid, .projecrgrid.katttttt {
    grid-template-columns: 1fr;
  }

  .naveso {
    padding-top: 24%;
    padding-left: 8%;
    padding-right: 8%;
  }

  .worksgraphic.inanimation {
    margin-top: 38%;
    font-size: 40px;
  }

  .kataskevestitle {
    font-size: 24px;
  }

  .kataskevewperigrafi {
    font-size: 18px;
  }

  .bold-text, .bold-text-2 {
    font-size: 20px;
  }

  .kentro {
    top: -41%;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_9b82c28b-72fe-f481-1723-6974e2297ef4-daff51be {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_04332c60-6be4-226c-d27a-718219a4e3ea-ea8ce390, #w-node-_22eddb95-cd97-5bc9-f348-72de3c49b826-ea8ce390, #w-node-_4d2ba0a1-d32d-9f06-453c-1d2d5358052b-ea8ce390, #w-node-bb5d4e82-8a1a-9740-dddd-11b421c47706-ea8ce390 {
    order: -9999;
  }
}