.section-d {
    width: 100vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: anchor-center;
}
.wrapper {
  width: 100%;
  min-height: 100vh;
  margin-bottom: 25%;
}

.landscape {
  width: 100%;
  background-color: #0081B5;
}
.landscape__background {
  fill: #82EBFF;
}

.st0 {
  fill: #47677F;
}

.st1 {
  fill: #AAE81A;
}

.st2 {
  fill: #14B1FF;
}

.st3 {
  fill: #E843DE;
}

.st4 {
  opacity: 0.8;
  fill: #F5388A;
}

.st5 {
  fill: #4EC7ED;
}

.st6 {
  fill: #804913;
}

.st8 {
  fill: #EC6547;
}

.st9 {
  fill: #ECEDDF;
}

.st10 {
  fill: #536A75;
}

.st11 {
  fill: #56CC16;
}

.st12 {
  fill: #8C6031;
}

.st13 {
  fill: #BF483A;
}

.st17 {
  fill: #F5F3DC;
}

.st14 {
  fill: #F06549;
}

.st15 {
  fill: #225C63;
}

.st16 {
  fill: #F1F3DC;
}

.st18 {
  fill: #5B8500;
}

.st19 {
  fill: #5C7373;
}

.st20 {
  fill: #C34BF2;
}

.st21 {
  fill: #FAC608;
}

.st22 {
  fill: #FAFFFA;
}

.st23 {
  fill: #99492E;
}

.st24 {
  fill: #C900BD;
}

.st25 {
  fill: #C9D7E8;
}

.st26 {
  opacity: 0.1;
  fill: #536A75;
}

.st27 {
  fill: #FDA12C;
}

.st28 {
  opacity: 0.1;
}

.st29 {
  opacity: 0.2;
}

.st30 {
  fill: #FF2C14;
}

.st31 {
  fill: #FF6E30;
}

.st32 {
  fill: #FF7214;
}

.st33 {
  fill: #FFECA6;
}

.st34 {
  fill: #FFFFFF;
}

.st35 {
  fill: #647D7D;
}

.st36 {
  fill: none;
  stroke: #338B96;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st37 {
  fill: #687294;
}

.st38 {
  fill: #30B814;
}

.st39 {
  fill: #338B96;
}

.st40 {
  opacity: 0.6;
  fill: #B87431;
}

.st41 {
  opacity: 0.3;
  fill: #804913;
}

.st42 {
  fill: #6A45FF;
}

.st43 {
  opacity: 0.3;
  fill: #B87431;
}

.st44 {
  fill: #D46643;
}

.st45 {
  fill: #D4B02D;
}

.st46 {
  fill: #09B300;
}

.st47 {
  fill: #A1662B;
}

.st48 {
  fill: #734111;
}

.st49 {
  fill: #759393;
}

.st50 {
  fill: #0AB500;
}

.st51 {
  opacity: 0.16;
  fill: #FFFFFF;
}

.st52 {
  fill: #77AB07;
}

.st53 {
  fill: #0F83C2;
}

.st54 {
  fill: #40403B;
}

.st55 {
  fill: #407519;
}

.cloud__seven {
  fill: #bbb;
  -webkit-animation: cloud--move1 2s ease-in-out infinite;
          animation: cloud--move1 2s ease-in-out infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.sun {
  -webkit-animation: rotate360 5s linear infinite;
          animation: rotate360 5s linear infinite;
  transform-origin: 305px;
}

.raindrop1 {
  -webkit-animation: raindrop 0.3333333333s 0.125s ease-out infinite;
          animation: raindrop 0.3333333333s 0.125s ease-out infinite;
}

.raindrop2 {
  -webkit-animation: raindrop 0.6666666667s 0.25s ease-out infinite;
          animation: raindrop 0.6666666667s 0.25s ease-out infinite;
}

.raindrop3 {
  -webkit-animation: raindrop 1s 0.375s ease-out infinite;
          animation: raindrop 1s 0.375s ease-out infinite;
}

.raindrop4 {
  -webkit-animation: raindrop 1.3333333333s 0.5s ease-out infinite;
          animation: raindrop 1.3333333333s 0.5s ease-out infinite;
}

.raindrop5 {
  -webkit-animation: raindrop 1.6666666667s 0.625s ease-out infinite;
          animation: raindrop 1.6666666667s 0.625s ease-out infinite;
}

.raindrop6 {
  -webkit-animation: raindrop 2s 0.75s ease-out infinite;
          animation: raindrop 2s 0.75s ease-out infinite;
}

.raindrop7 {
  -webkit-animation: raindrop 2.3333333333s 0.875s ease-out infinite;
          animation: raindrop 2.3333333333s 0.875s ease-out infinite;
}

.raindrop8 {
  -webkit-animation: raindrop 2.6666666667s 1s ease-out infinite;
          animation: raindrop 2.6666666667s 1s ease-out infinite;
}

.raindrop9 {
  -webkit-animation: raindrop 3s 1.125s ease-out infinite;
          animation: raindrop 3s 1.125s ease-out infinite;
}

.raindrop10 {
  -webkit-animation: raindrop 3.3333333333s 1.25s ease-out infinite;
          animation: raindrop 3.3333333333s 1.25s ease-out infinite;
}

.blimp {
  -webkit-animation: blimp-fly 15s linear infinite;
          animation: blimp-fly 15s linear infinite;
}

.balloon {
  -webkit-animation: balloon-fly 10s linear infinite;
          animation: balloon-fly 10s linear infinite;
}

.bike {
  -webkit-animation: bike-ride 6s linear infinite;
          animation: bike-ride 6s linear infinite;
}

@-webkit-keyframes butterfly {
  0% {
    transform: translate(0, 0);
  }
  33.33333% {
    transform: translate(4px, 10px);
  }
  66.66666% {
    transform: translate(17px, 4px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes bike-ride {
  0% {
    transform: translate(-150px, 0);
  }
  10% {
    transform: translate(-150px, 0);
  }
  45% {
    transform: translate(50px, 0);
  }
  55% {
    transform: translate(50px, 0);
  }
  100% {
    transform: translate(-150px, 0);
  }
}
@-webkit-keyframes balloon-fly {
  0% {
    transform: translate(0, -150px);
  }
  45% {
    transform: translate(0, 275px);
  }
  55% {
    transform: translate(0, 275px);
  }
  100% {
    transform: translate(0, -150px);
  }
}
@-webkit-keyframes blimp-fly {
  0% {
    transform: translate(-500px, 0);
  }
  100% {
    transform: translate(600px, 0);
  }
}
@-webkit-keyframes cloud--move1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 7px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes raindrop {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    transform: translate(0, 30px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 60px);
    opacity: 0;
  }
}
@media(max-width: 1300px){
  .section-d {
      width: 100vw;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: anchor-center;
  }
  .wrapper {
    height: 50vh;
    margin-top: 10vh;
    margin-bottom: 0;
  }
}
@media(max-width: 800px){
  .section-d {
      width: 100vw;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: anchor-center;
  }
  .wrapper {
    height: 500px;
    margin-top: 30vh;
  }
}
@media(max-width: 600px){
  .section-d {
      width: 100vw;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .wrapper {
    height: 500px;
    margin-top: 25vh;
  }
  .landscape {
    width: 100%;
    height: 600px;
    background-color: #0081B5;
  }
}