/* ######## river ######## */
#river{
    background: var(--trBlack);
    clip-path: polygon(0 10%,100% 0%,100% 90%,0 100%);
}

.river-photo{
    position: relative;
    min-height: 60vh;
}

.riverh{
    width: 25%;
    height: auto;
    position: absolute;
    transition: all 2s ease-in-out;
}

.riverv{
    height: 50%;
    width: auto;
    position: absolute;
    transition: all 2s ease-in-out;
}

.riverh:hover, .riverv:hover{
    z-index: 50;
    transform: scale(1.5);
}

.river-1{
    top: 5%;
    left: 37%;
    transform: rotate(-7deg);
    z-index: 20;
}

.river-2{
    top: 10%;
    left: 65%;
    transform: rotate(-18deg);
    z-index: 30;
}

.river-3{
    top: 20%;
    left: 12%;
    transform: rotate(14deg);
    z-index: 20;
}

.river-4{
    top: 52%;
    left: 16%;
    transform: rotate(38deg);
    z-index: 25;
}

.river-5{
    top: 55%;
    left: 40%;
    transform: rotate(-28deg);
    z-index: 30;
}

.river-6{
    top: 49%;
    left: 65%;
    transform: rotate(8deg);
    z-index: 30;
}
/* ######## end of river ######## */