.logo {
  margin-bottom: 2vw;
}

.brushes {
	position: absolute;
  left: 8.2vw;
  height: 14vw;
  z-index: 4;
  top: 6.5vw;
}

#brushes {
	animation: brushes 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 1.8s;
}

@keyframes brushes {
 0% {
  left: 4vw;
  opacity: 0;
 }

 100% { 
  left: 8.2vw;
  opacity: 1;
 }

}

.brush1 {
  height: 14vw;
  z-index: 3;
  left: 7.9vw;
  top: 7vw;
  transform: rotate(22deg);
}

#brush1 {
	animation: brush1 2s infinite ease;
}


@keyframes brush1 {
 0% {
  transform: rotate(22deg);
 }

 50% {
  transform: rotate(9deg);
 }

 100% { 
  transform: rotate(22deg);
 }

}

.brush2 {
	height: 12vw;
  position: absolute;
  z-index: 3;
  left: 2vw;
  top: 6vw;
  max-width: none;
  transform: rotate(-21deg);
}

#brush2 {
	animation: brush2 2s infinite ease;
}

@keyframes brush2 {
 0% {
  transform: rotate(-21deg);
 }

 50% {
  transform: rotate(0deg);
 }

 100% { 
  transform: rotate(-21deg);
 }

}

.slide1 .man {
  height: 22vw;
  position: absolute;
  z-index: 4;
  right: 3vw;
  bottom: 0;
  animation: manSlide1 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 1.8s;
}

@keyframes manSlide1 {
 0% {
  right: -1vw;
  opacity: 0;
 }

 100% { 
  right: 3vw;
  opacity: 1;
 }

}

.slide1 .figure {
    height: 19vw;
    max-width: none;
}

.slide1 .figure-cont {
    height: 19vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    max-width: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide1 #figure1-cont {
  animation: figure1Slide1 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
}

@keyframes figure1Slide1 {
 0% {
  opacity: 0;
  top: 3vw;
 }

 100% { 
  opacity: 1;
  top: 0;
 }

}

.slide1 #figure2-cont {
  animation: figure2Slide1 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 3.7s;
}

@keyframes figure2Slide1 {
 0% {
  opacity: 0;
  top: 3vw;
 }

 100% { 
  opacity: 1;
  top: 0;
 }

}


.slide1 #figure3-cont {
  animation: figure3Slide1 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 6.5s;
}

@keyframes figure3Slide1 {
 0% {
  opacity: 0;
  top: 3vw;
 }

 100% { 
  opacity: 1;
  top: 0;
 }

}

.slide1 #square1 {
  animation: square1Slide1 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
}

@keyframes square1Slide1 {
 0% {
  opacity: 0;
  top: -3vw;
 }

 100% { 
  opacity: 1;
  top: 0;
 }

}

.slide1 #square2 {
  animation: square2Slide1 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 3.7s;
}

@keyframes square2Slide1 {
 0% {
  opacity: 0;
  top: -3vw;
 }

 100% { 
  opacity: 1;
  top: 0;
 }

}


.slide1 #square3 {
  animation: square3Slide1 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 6.5s;
}

@keyframes square3Slide1 {
 0% {
  opacity: 0;
  top: -3vw;
 }

 100% { 
  opacity: 1;
  top: 0;
 }

}

.square {
  height: 14vw;
	position: relative;
	z-index: 2;
	margin: 0 auto;
}

.images-block {
  position: relative;
  min-height: 25.5vw;
}


.slide1 #col1:after {
    animation: col1Slide1 0.15s linear;
    animation-fill-mode: forwards;
    animation-delay: 3.1s;
}

@keyframes col1Slide1 {
 0% {
  opacity: 0;
  height: 0;
 }

 100% { 
  opacity: 1;
  height: 100%;
 }

}

.slide1 #col2:after {
  animation: col2Slide1 0.15s linear;
  animation-fill-mode: forwards;
  animation-delay: 5.9s;
}

@keyframes col2Slide1 {
 0% {
  opacity: 0;
  height: 0;
 }

 100% { 
  opacity: 1;
  height: 100%;
 }

}

.woman {
	position: absolute;
  z-index: 4;
  left: 0.3vw;
  bottom: 0;
  height: 21vw;
  animation: woman 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 7s;
}

@keyframes woman {
 0% {
  opacity: 0;
  left: -1vw;
 }

 100% { 
  opacity: 1;
  left: 0.3vw;
 }

}

.mens {
	position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  height: 22vw;
  animation: mens 0.2s linear;
  animation-fill-mode: forwards;
  animation-delay: 7s;
}

@keyframes mens {
 0% {
  opacity: 0;
  right: -4vw;
 }

 100% { 
  opacity: 1;
  right: 0;
 }

}