.landscape-one{
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}

.visible{
    display: block;
  }

.sky{
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #85BECB 0%, #F7FAFC 40%);
}

.sea{
    width: 100%;
    height: 67.8889%;
    background: linear-gradient(180deg, #E5F7FC 0%, #9CCFDB 10%);
    position: absolute;
    bottom: 0;
    left: 0;
}

.hill5{
    width: 100%;
    height: 73.7778%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.hill4{
    width: 100%;
    height: 64.7778%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.hill3{
    width: 100%;
    height: 60.6667%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.hill2{
    width: 100%;
    height: 45.3333%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.hill1{
    width: 100%;
    height: 40.6667%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.clouds{
    width: 100%;
    height: 32.1111%;
    position: absolute;
    top: 0;
    left: 0;
    animation: cloudsMove 35s linear both infinite normal;
}

.cloud1{
    width: 37.3333%;
    height: 36.5194%;
    position: absolute;
    top: 17.6817%;
    left: 69.3333%;
}

.cloud2{
    width: 20.8333%;
    height:  26.6903%;
    position: absolute;
    top: 42.5606%;
    left: 26.3333%;
}

.cloud3{
    transform: scaleX(-1);
    width: 50.2500%;
    height: 49.1349%;
    position: absolute;
    top: -9.6886%;
    left: -25.5833%;
}

.cloud4{
    width: 16.8333%;
    height: 21.4533%;
    position: absolute;
    top: 38.0623%;
    left: -58.8333%;
}

.trunks-back{
    width: 77.1667%;
    height: 25.5556%;
    position: absolute;
    bottom: 22.6667%;
    left: 9.7292%;
}

.trunks-middle{
    width: 90.5%;
    height: 37.4444%;
    position: absolute;
    bottom: 2%;
    left: 5.2175%;
}

.trunks-front{
    width: 1.7733%;
    height: 21.5767%;
    position: absolute;
    top: 87.2422%;
    left: 82.8908%;
}

.tree-back .treeTip-back path {
    animation: rotateTipsBack 3s linear infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
}

.tree-back{
    width: 80.0450%;
    height: 31.0344%;
    position: absolute;
    top: 43.6667%;
    left: 8.25%;
}

.tree-middle .treeTip-mid path {
    animation: rotateTips 4s linear infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
}

.tree-middle{
    width: 95.5350%;
    height: 46.8889%;
    position: absolute;
    top: 46.5556%;
    left: 2.6667%;
}

.tree-front .treeTip-front path {
    animation: rotateTips 6s linear infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
    position: absolute;
}

.tree-front{
    width: 82.5833%;
    height: 84.3678%;
    position: absolute;
    bottom: -17.5%;
    left: 21%;
}