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

@font-face {
  font-family: MarckScript;
  src: url(../add/fonts/MarckScript-Regular.ttf);
}
body {
  background-image: url(../add/pictures/background.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  min-height: calc(100vh - 112.5px);
}
body .wrapper-main {
  margin: 0 10px;
}

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}

ul {
  display: flex;
  flex-flow: row nowrap;
  margin-top: 10px;
}
@media (max-width: 1280px) {
  ul {
    flex-flow: column nowrap;
  }
}
ul li {
  border-radius: 4px;
  border: 1px solid lightslategray;
  flex: 1 1 200px;
  height: 90px;
}
@media (max-width: 1280px) {
  ul li {
    flex: 0 1 90px;
  }
}
ul li a {
  font-size: 50px;
  text-decoration: none;
  display: block;
  text-align: center;
  color: white;
  padding: 10px 0 0 0;
}
@media (max-width: 1280px) {
  ul li a {
    font-size: 40px;
    padding: 20px 0 0 0;
  }
}
ul li:nth-child(1).menu {
  background-color: rgba(168, 216, 229, 0.95);
  clip-path: polygon(5% 94%, 2% 53%, 11% 7%, 39% 11%, 66% 5%, 93% 16%, 95% 48%, 93% 88%, 83% 95%);
}
ul li:nth-child(2).menu {
  background-color: rgba(128, 238, 151, 0.95);
  clip-path: polygon(95% 87%, 73% 98%, 31% 84%, 3% 90%, 1% 50%, 3% 6%, 46% 10%, 66% 5%, 95% 10%);
}
ul li:nth-child(3).menu {
  background-color: rgba(255, 214, 59, 0.95);
  clip-path: polygon(3% 7%, 26% 13%, 47% 16%, 69% 12%, 94% 22%, 95% 49%, 91% 82%, 80% 90%, 65% 92%, 47% 82%, 37% 91%, 21% 90%, 6% 84%, 2% 55%);
}
ul li:nth-child(4).menu {
  background-color: rgba(146, 0, 136, 0.95);
  clip-path: polygon(54% 97%, 45% 85%, 33% 92%, 25% 78%, 13% 92%, 4% 92%, 4% 66%, 0% 48%, 7% 31%, 2% 4%, 46% 6%, 66% 10%, 79% 4%, 97% 11%, 99% 41%, 97% 62%, 98% 86%, 84% 96%);
}
ul li:nth-child(5).menu {
  background-color: rgba(255, 164, 46, 0.95);
  clip-path: polygon(53% 4%, 74% 16%, 94% 17%, 99% 48%, 100% 87%, 91% 98%, 64% 92%, 40% 96%, 2% 78%, 10% 4%);
}
ul li:nth-child(6).menu {
  background-color: rgba(255, 126, 87, 0.95);
  clip-path: polygon(100% 67%, 88% 96%, 2% 75%, 2% 32%, 1% 2%, 18% 1%, 34% 6%, 50% 2%, 64% 11%, 76% 4%, 85% 0%, 100% 6%);
}

.two-blocks {
  margin-top: 112.5px;
  min-height: calc(100vh - 90px - 30px);
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 1280px) {
  .two-blocks {
    margin-top: 562.5px;
    flex-flow: column nowrap;
  }
}
.two-blocks .grid-1 {
  flex: 1 0 500px;
  align-self: start;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}
@media (max-width: 1280px) {
  .two-blocks .grid-1 {
    align-self: stretch;
  }
}
.two-blocks .grid-2 {
  flex: 100 1 auto;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 200px;
}
.two-blocks .grid-1 ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 150px 150px 150px 150px 150px;
}
.two-blocks .grid-1 ul li.service {
  font-size: 50px;
  background-color: rgba(255, 192, 203, 0.9);
  cursor: pointer;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.two-blocks .grid-1 ul :nth-child(1).service {
  clip-path: polygon(2% 52%, 23% 8%, 74% 14%, 98% 48%, 80% 92%, 21% 94%);
}
.two-blocks .grid-1 ul :nth-child(2).service {
  clip-path: polygon(97% 54%, 91% 88%, 15% 94%, 3% 53%, 11% 10%, 87% 14%);
}
.two-blocks .grid-1 ul :nth-child(3).service {
  clip-path: polygon(2% 54%, 23% 3%, 88% 0%, 96% 43%, 89% 95%, 12% 98%);
}
.two-blocks .grid-1 ul :nth-child(4).service {
  clip-path: polygon(2% 57%, 23% 14%, 77% 5%, 94% 46%, 79% 94%, 36% 95%);
}
.two-blocks .grid-1 ul :nth-child(5).service {
  clip-path: polygon(1% 51%, 26% 10%, 78% 6%, 97% 34%, 75% 96%, 18% 89%);
}
.two-blocks .grid-2 {
  display: grid;
  grid: "gallery gallery gallery gallery gallery gallery" 165px "gallery gallery gallery gallery gallery gallery" 165px "gallery gallery gallery gallery gallery gallery" 165px "info-1 info-1 info-1 info-2 info-2 info-2" 165px "info-3 info-3 info-3 info-3 info-3 info-3" 165px "info-4 info-4 info-5 info-5 info-6 info-6" 165px "info-4 info-4 info-5 info-5 info-6 info-6" 165px/1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 1280px) {
  .two-blocks .grid-2 {
    grid-template-areas: "gallery gallery gallery gallery gallery gallery" "info-1" "info-2" "info-3" "info-4" "info-5" "info-6";
  }
}
.two-blocks .grid-2 .gallery {
  grid-area: gallery;
  clip-path: polygon(1% 23%, 19% 4%, 47% 6%, 66% 3%, 82% 5%, 97% 12%, 99% 34%, 98% 63%, 96% 91%, 78% 97%, 54% 91%, 41% 95%, 22% 91%, 6% 93%, 1% 71%);
  background-image: url(../add/pictures/1.jpg), url(../add/pictures/2.jpg);
  background-position: 0% 30%, 100% 40%;
  background-size: 50% auto, 50% auto;
  background-repeat: no-repeat, no-repeat;
  animation-name: my-animation;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.two-blocks .grid-2 .info-1 {
  grid-area: info-1;
  color: black;
  background-color: rgba(254, 228, 185, 0.9);
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(4% 98%, 24% 1%, 97% 1%, 99% 98%);
}
@media (max-width: 1280px) {
  .two-blocks .grid-2 .info-1 {
    font-size: 26px;
  }
}
.two-blocks .grid-2 .info-2 {
  grid-area: info-2;
  color: black;
  background-color: rgba(254, 228, 185, 0.9);
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(6% 2%, 20% 98%, 83% 99%, 91% 2%);
}
@media (max-width: 1280px) {
  .two-blocks .grid-2 .info-2 {
    font-size: 26px;
  }
}
.two-blocks .grid-2 .info-3 {
  grid-area: info-3;
  color: white;
  text-align: center;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.two-blocks .grid-2 .info-4 {
  grid-area: info-4;
  color: black;
  background-color: rgba(146, 187, 146, 0.9);
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(1% 29%, 13% 0%, 100% 3%, 98% 97%, 1% 91%);
}
@media (max-width: 1280px) {
  .two-blocks .grid-2 .info-4 {
    font-size: 26px;
  }
}
.two-blocks .grid-2 .info-5 {
  grid-area: info-5;
  color: black;
  background-color: rgba(146, 187, 146, 0.9);
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(8% 98%, 1% 15%, 3% 1%, 100% 5%, 99% 64%, 96% 98%);
}
@media (max-width: 1280px) {
  .two-blocks .grid-2 .info-5 {
    font-size: 26px;
  }
}
.two-blocks .grid-2 .info-6 {
  grid-area: info-6;
  color: black;
  background-color: rgba(146, 187, 146, 0.9);
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(4% 0%, 100% 9%, 96% 95%, 21% 97%, 1% 79%);
}
@media (max-width: 1280px) {
  .two-blocks .grid-2 .info-6 {
    font-size: 26px;
  }
}
.two-blocks .grid-2 div {
  border-radius: 10px;
}

@keyframes my-animation {
  0% {
    background-position: 0% 30%, 100% 40%;
  }
  25% {
    background-position: 0% 0%, 100% 100%;
  }
  75% {
    background-position: 0% 100%, 100% 0%;
  }
  100% {
    background-position: 0% 30%, 100% 40%;
  }
}

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