3117 lines
190 KiB
CSS
3117 lines
190 KiB
CSS
body {
|
|
--mouseX: 0;
|
|
--mouseY: 0;
|
|
display: grid;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
place-items: center;
|
|
background: linear-gradient(to top, #f3ebde 25%, rgba(255, 255, 255, 0.001) 50%), radial-gradient(circle at center, #f3ebde 7.5vmin, #6d9fbd 50vmin);
|
|
perspective: 300vmin;
|
|
}
|
|
body:active:hover #wrap {
|
|
transform: translateZ(calc((var(--mouseX) * -7.5vmin) + 55vmin)) translateY(7.5vmin) scale(0.5) rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
|
|
transition: 2s ease-in-out;
|
|
}
|
|
body:active:hover #wrap * {
|
|
transition: 2s ease-in-out;
|
|
}
|
|
body:active:hover #wrap *:before, body:active:hover #wrap *:after {
|
|
transition: 2s ease-in-out;
|
|
}
|
|
body:hover #wrap {
|
|
transition: 0s ease-in-out;
|
|
}
|
|
body:hover #wrap * {
|
|
transition: 0s ease-in-out;
|
|
}
|
|
body:hover #wrap *:before, body:hover #wrap *:after {
|
|
transition: 0s ease-in-out;
|
|
}
|
|
body .panel {
|
|
position: fixed;
|
|
z-index: 999;
|
|
width: 5vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
}
|
|
body .panel:nth-of-type(1) {
|
|
left: 0vw;
|
|
}
|
|
body .panel:nth-of-type(1):hover ~ #wrap {
|
|
--mouseX: -0.3166666667;
|
|
}
|
|
body .panel:nth-of-type(2) {
|
|
left: 5vw;
|
|
}
|
|
body .panel:nth-of-type(2):hover ~ #wrap {
|
|
--mouseX: -0.2833333333;
|
|
}
|
|
body .panel:nth-of-type(3) {
|
|
left: 10vw;
|
|
}
|
|
body .panel:nth-of-type(3):hover ~ #wrap {
|
|
--mouseX: -0.25;
|
|
}
|
|
body .panel:nth-of-type(4) {
|
|
left: 15vw;
|
|
}
|
|
body .panel:nth-of-type(4):hover ~ #wrap {
|
|
--mouseX: -0.2166666667;
|
|
}
|
|
body .panel:nth-of-type(5) {
|
|
left: 20vw;
|
|
}
|
|
body .panel:nth-of-type(5):hover ~ #wrap {
|
|
--mouseX: -0.1833333333;
|
|
}
|
|
body .panel:nth-of-type(6) {
|
|
left: 25vw;
|
|
}
|
|
body .panel:nth-of-type(6):hover ~ #wrap {
|
|
--mouseX: -0.15;
|
|
}
|
|
body .panel:nth-of-type(7) {
|
|
left: 30vw;
|
|
}
|
|
body .panel:nth-of-type(7):hover ~ #wrap {
|
|
--mouseX: -0.1166666667;
|
|
}
|
|
body .panel:nth-of-type(8) {
|
|
left: 35vw;
|
|
}
|
|
body .panel:nth-of-type(8):hover ~ #wrap {
|
|
--mouseX: -0.0833333333;
|
|
}
|
|
body .panel:nth-of-type(9) {
|
|
left: 40vw;
|
|
}
|
|
body .panel:nth-of-type(9):hover ~ #wrap {
|
|
--mouseX: -0.05;
|
|
}
|
|
body .panel:nth-of-type(10) {
|
|
left: 45vw;
|
|
}
|
|
body .panel:nth-of-type(10):hover ~ #wrap {
|
|
--mouseX: -0.0166666667;
|
|
}
|
|
body .panel:nth-of-type(11) {
|
|
left: 50vw;
|
|
}
|
|
body .panel:nth-of-type(11):hover ~ #wrap {
|
|
--mouseX: 0.0166666667;
|
|
}
|
|
body .panel:nth-of-type(12) {
|
|
left: 55vw;
|
|
}
|
|
body .panel:nth-of-type(12):hover ~ #wrap {
|
|
--mouseX: 0.05;
|
|
}
|
|
body .panel:nth-of-type(13) {
|
|
left: 60vw;
|
|
}
|
|
body .panel:nth-of-type(13):hover ~ #wrap {
|
|
--mouseX: 0.0833333333;
|
|
}
|
|
body .panel:nth-of-type(14) {
|
|
left: 65vw;
|
|
}
|
|
body .panel:nth-of-type(14):hover ~ #wrap {
|
|
--mouseX: 0.1166666667;
|
|
}
|
|
body .panel:nth-of-type(15) {
|
|
left: 70vw;
|
|
}
|
|
body .panel:nth-of-type(15):hover ~ #wrap {
|
|
--mouseX: 0.15;
|
|
}
|
|
body .panel:nth-of-type(16) {
|
|
left: 75vw;
|
|
}
|
|
body .panel:nth-of-type(16):hover ~ #wrap {
|
|
--mouseX: 0.1833333333;
|
|
}
|
|
body .panel:nth-of-type(17) {
|
|
left: 80vw;
|
|
}
|
|
body .panel:nth-of-type(17):hover ~ #wrap {
|
|
--mouseX: 0.2166666667;
|
|
}
|
|
body .panel:nth-of-type(18) {
|
|
left: 85vw;
|
|
}
|
|
body .panel:nth-of-type(18):hover ~ #wrap {
|
|
--mouseX: 0.25;
|
|
}
|
|
body .panel:nth-of-type(19) {
|
|
left: 90vw;
|
|
}
|
|
body .panel:nth-of-type(19):hover ~ #wrap {
|
|
--mouseX: 0.2833333333;
|
|
}
|
|
body .panel:nth-of-type(20) {
|
|
left: 95vw;
|
|
}
|
|
body .panel:nth-of-type(20):hover ~ #wrap {
|
|
--mouseX: 0.3166666667;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 65vmin;
|
|
height: 70vmin;
|
|
box-shadow: 0 0 0 5vmin #fff, 0 5vmin 10vmin -2.5vmin rgba(0, 0, 0, 0.5), 0 0 0 200vw #f3ebde;
|
|
z-index: 998;
|
|
}
|
|
body .upperblock {
|
|
position: absolute;
|
|
width: 50vmin;
|
|
height: 100vmin;
|
|
left: 15.5vmin;
|
|
top: -2.5vmin;
|
|
transform: translateZ(-25vmin);
|
|
}
|
|
body .upperblock .roofblock {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
top: -9.5vmin;
|
|
height: 7.5vmin;
|
|
width: 20vmin;
|
|
left: calc(50% - 10vmin);
|
|
transform: scaleY(1.25) scaleX(1.25) translateZ(25vmin);
|
|
}
|
|
body .upperblock .roofblock .tower {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 3vmin;
|
|
height: 5.5vmin;
|
|
left: calc(50% - 3vmin);
|
|
top: auto;
|
|
bottom: 100%;
|
|
transform: translateZ(-62.5vmin);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-origin: 50% 50% 3vmin;
|
|
transform-origin: 50% 50% 3vmin;
|
|
transform-origin: 50% 50% 3vmin;
|
|
transform-origin: 50% 50% 3vmin;
|
|
transform-origin: 50% 50% 3vmin;
|
|
transform-origin: 50% 50% 3vmin;
|
|
transform-origin: 50% 50% 3vmin;
|
|
transform-origin: 50% 50% 3vmin;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:before, body .upperblock .roofblock .tower .towerside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
left: -1.5vmin;
|
|
top: auto;
|
|
bottom: calc(100% - 1.25vmin);
|
|
transform: rotateX(-30deg);
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0 3vmin 11vmin 3vmin;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:after {
|
|
left: calc(50% - 0.375vmin);
|
|
bottom: calc(100% + 4.5vmin);
|
|
border-width: 0 0.75vmin 11vmin 0.75vmin;
|
|
transform: translateZ(4.85vmin) rotateX(-8.5deg);
|
|
transform-origin: 50% -11vmin;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(1) {
|
|
background: linear-gradient(to top, #e5c782 0.5vmin, #e2c175 0.5vmin, #e2c175 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #e3c379 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #e3c379 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #e3c379 calc(100% - 0.5vmin));
|
|
transform: rotateY(45deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(1):before {
|
|
border-color: transparent transparent #5d8061 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(1):after {
|
|
border-color: transparent transparent #e0bc68 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(2) {
|
|
background: linear-gradient(to top, #e9cf93 0.5vmin, #e6c986 0.5vmin, #e6c986 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #e7cb8a 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #e7cb8a 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #e7cb8a calc(100% - 0.5vmin));
|
|
transform: rotateY(90deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(2):before {
|
|
border-color: transparent transparent #557458 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(2):after {
|
|
border-color: transparent transparent #e2c071 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(3) {
|
|
background: linear-gradient(to top, #ecd6a4 0.5vmin, #e9d197 0.5vmin, #e9d197 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #ead29b 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #ead29b 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #ead29b calc(100% - 0.5vmin));
|
|
transform: rotateY(135deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(3):before {
|
|
border-color: transparent transparent #4c694f transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(3):after {
|
|
border-color: transparent transparent #e3c379 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(4) {
|
|
background: linear-gradient(to top, #f0deb4 0.5vmin, #edd8a8 0.5vmin, #edd8a8 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #eedaac 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #eedaac 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #eedaac calc(100% - 0.5vmin));
|
|
transform: rotateY(180deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(4):before {
|
|
border-color: transparent transparent #445d46 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(4):after {
|
|
border-color: transparent transparent #e5c782 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(5) {
|
|
background: linear-gradient(to top, #f3e5c5 0.5vmin, #f0e0b9 0.5vmin, #f0e0b9 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f1e1bd 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f1e1bd 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f1e1bd calc(100% - 0.5vmin));
|
|
transform: rotateY(225deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(5):before {
|
|
border-color: transparent transparent #3b513d transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(5):after {
|
|
border-color: transparent transparent #e7cb8a transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(6) {
|
|
background: linear-gradient(to top, #f7edd6 0.5vmin, #f4e7ca 0.5vmin, #f4e7ca 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f5e9ce 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f5e9ce 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f5e9ce calc(100% - 0.5vmin));
|
|
transform: rotateY(270deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(6):before {
|
|
border-color: transparent transparent #324534 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(6):after {
|
|
border-color: transparent transparent #e9cf93 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(7) {
|
|
background: linear-gradient(to top, #faf4e7 0.5vmin, #f7efda 0.5vmin, #f7efda 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #f8f1df 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #f8f1df 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #f8f1df calc(100% - 0.5vmin));
|
|
transform: rotateY(315deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(7):before {
|
|
border-color: transparent transparent #2a392b transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(7):after {
|
|
border-color: transparent transparent #ead29b transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(8) {
|
|
background: linear-gradient(to top, #fefcf8 0.5vmin, #fbf6eb 0.5vmin, #fbf6eb 0.7vmin, rgba(255, 255, 255, 0.001) 0.7vmin), radial-gradient(circle at bottom, rgba(243, 235, 222, 0.5) 1vmin, #fcf8f0 1vmin) 50% calc(0% - 3.5vmin)/100% 100% no-repeat, linear-gradient(to right, #fcf8f0 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #fcf8f0 calc(100% - 0.5vmin));
|
|
transform: rotateY(360deg);
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(8):before {
|
|
border-color: transparent transparent #212e23 transparent;
|
|
}
|
|
body .upperblock .roofblock .tower .towerside:nth-of-type(8):after {
|
|
border-color: transparent transparent #ecd6a4 transparent;
|
|
}
|
|
body .upperblock .roofblock .roofside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: repeating-linear-gradient(to right, #deb860 0.25vmin, #8b7334 0.25vmin, #8b7334 1vmin, #deb860 1vmin, #deb860 1.25vmin);
|
|
border-radius: 95vmin 95vmin 0 0/70vmin 70vmin 0 0;
|
|
box-shadow: inset 0 0 0 1.5vmin #deb860;
|
|
transform: translateZ(-5vmin);
|
|
}
|
|
body .upperblock .roofblock .roofside:before, body .upperblock .roofblock .roofside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: radial-gradient(circle at bottom, #d5a536 50%, #deb860);
|
|
border-radius: 5vmin 5vmin 0.5vmin 0.5vmin;
|
|
top: -72.5%;
|
|
width: 50%;
|
|
left: 25%;
|
|
height: 75%;
|
|
transform-origin: bottom;
|
|
transform: scale(0.75) translateZ(-4vmin) rotateY(calc(-25deg - (var(--mouseX) * 65deg))) rotateX(calc(var(--mouseX) * -2.5deg));
|
|
box-shadow: inset calc(var(--mouseX) * 5vmin) 0 2vmin #b38825;
|
|
}
|
|
body .upperblock .roofblock .roofside:after {
|
|
top: -82.5%;
|
|
width: 35%;
|
|
left: 32.5%;
|
|
height: 50%;
|
|
background: radial-gradient(circle at bottom, #deb860 50%, #e7cb8a);
|
|
-webkit-mask: linear-gradient(to top, rgba(255, 255, 255, 0.001) 1vmin, #000 1.5vmin);
|
|
mask: linear-gradient(to top, rgba(255, 255, 255, 0.001) 1vmin, #000 1.5vmin);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank {
|
|
top: 17.5vmin;
|
|
height: 4.5vmin;
|
|
width: 1vmin;
|
|
position: absolute;
|
|
left: calc(50% - 0.5vmin);
|
|
transform-origin: 50% -150%;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 175%;
|
|
height: 40vmin;
|
|
top: 100%;
|
|
left: -37.5%;
|
|
background: radial-gradient(circle at left, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% + 1vmin) calc(50% + 1vmin)/6vmin 6vmin, radial-gradient(circle at left, #5b7d5f 2vmin, #466048 2vmin) calc(50% + 1vmin) calc(50% - 1vmin)/6vmin 6vmin;
|
|
transform-origin: top;
|
|
transform: translateZ(5vmin) rotateX(-90deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(1) {
|
|
transform: rotate(110deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(2) {
|
|
transform: rotate(117.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(3) {
|
|
transform: rotate(125deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(4) {
|
|
transform: rotate(132.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(5) {
|
|
transform: rotate(140deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(6) {
|
|
transform: rotate(147.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(7) {
|
|
transform: rotate(155deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(8) {
|
|
transform: rotate(162.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(9) {
|
|
transform: rotate(170deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(10) {
|
|
transform: rotate(177.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(11) {
|
|
transform: rotate(185deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12) {
|
|
transform: rotate(192.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13) {
|
|
transform: rotate(200deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14) {
|
|
transform: rotate(207.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15) {
|
|
transform: rotate(215deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16) {
|
|
transform: rotate(222.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17) {
|
|
transform: rotate(230deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18) {
|
|
transform: rotate(237.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19) {
|
|
transform: rotate(245deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20) {
|
|
transform: rotate(252.5deg);
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(12):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(13):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(14):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(15):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(16):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(17):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(18):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(19):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(20):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(21):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(22):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(23):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(24):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside .roofplank:nth-of-type(25):before {
|
|
background: radial-gradient(circle at right, #516e54 2vmin, rgba(255, 255, 255, 0.001) 2vmin) calc(50% - 1vmin) calc(50% - 1vmin)/6vmin 6vmin, radial-gradient(circle at right, #5b7d5f 2vmin, #466048 2vmin) calc(50% - 1vmin) calc(50% + 1vmin)/6vmin 6vmin;
|
|
}
|
|
body .upperblock .roofblock .roofside:last-of-type {
|
|
transform: translateZ(-35vmin);
|
|
}
|
|
body .upperblock .window {
|
|
top: 0vmin;
|
|
left: -2.5vmin;
|
|
position: absolute;
|
|
width: 55vmin;
|
|
height: 1vmin;
|
|
transform: translateZ(5vmin);
|
|
}
|
|
body .upperblock .window .windowside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
|
|
box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(4) {
|
|
transform: translateZ(-55vmin) rotateY(-180deg);
|
|
}
|
|
body .upperblock .window .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 110%;
|
|
left: -5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(45deg) translateZ(2vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(1):before {
|
|
background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(2):before {
|
|
background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(3):before {
|
|
background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(4):before {
|
|
background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(1):before {
|
|
background: linear-gradient(to bottom, #466048, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #466048, #5b7d5f 0.25vmin, #5b7d5f 0.75vmin, #466048 1.5vmin, #466048 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5b7d5f, #466048 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(1):after {
|
|
background: linear-gradient(to bottom, #4a664d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #4a664d, #608363 0.25vmin, #608363 0.75vmin, #4a664d 1.5vmin, #4a664d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #608363, #4a664d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 155%;
|
|
left: -27.5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 15.5vmin);
|
|
transform-origin: 50% calc(0% - 5vmin);
|
|
transform: rotateX(115deg);
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(2):before {
|
|
background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(2):after {
|
|
background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 155%;
|
|
left: -27.5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 15.5vmin);
|
|
transform-origin: 50% calc(0% - 5vmin);
|
|
transform: rotateX(115deg);
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(3):before {
|
|
background: linear-gradient(to bottom, #304232, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #304232, #466048 0.25vmin, #466048 0.75vmin, #304232 1.5vmin, #304232 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #466048, #304232 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(3):after {
|
|
background: linear-gradient(to bottom, #354837, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #354837, #4a664d 0.25vmin, #4a664d 0.75vmin, #354837 1.5vmin, #354837 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4a664d, #354837 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 155%;
|
|
left: -27.5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 15.5vmin);
|
|
transform-origin: 50% calc(0% - 5vmin);
|
|
transform: rotateX(115deg);
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(4):before {
|
|
background: linear-gradient(to bottom, #263327, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #263327, #3b513d 0.25vmin, #3b513d 0.75vmin, #263327 1.5vmin, #263327 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #3b513d, #263327 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:nth-of-type(4):after {
|
|
background: linear-gradient(to bottom, #2a392b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2a392b, #3f5742 0.25vmin, #3f5742 0.75vmin, #2a392b 1.5vmin, #2a392b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #3f5742, #2a392b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
body .upperblock .window .windowside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 155%;
|
|
left: -27.5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 15.5vmin);
|
|
transform-origin: 50% calc(0% - 5vmin);
|
|
transform: rotateX(115deg);
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
body .upperblock .window .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0vmin;
|
|
width: 120%;
|
|
left: -10%;
|
|
height: 15vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(60deg) translateZ(13vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-132deg, rgba(255, 255, 255, 0.001) 26%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(132deg, rgba(255, 255, 255, 0.001) 26%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
body .upperblock .side {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
-webkit-mask: linear-gradient(to top, transparent 7.5vmin, #000 17.5vmin);
|
|
mask: linear-gradient(to top, transparent 7.5vmin, #000 17.5vmin);
|
|
box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #d8726a;
|
|
}
|
|
body .upperblock .side:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
body .upperblock .side:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
body .upperblock .side:nth-of-type(4) {
|
|
transform: translateZ(-50vmin) rotateY(-180deg);
|
|
}
|
|
body .upperblock .side:first-of-type:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: #cd4c42;
|
|
top: -50vmin;
|
|
height: 50vmin;
|
|
transform-origin: bottom;
|
|
transform: rotateX(90deg);
|
|
}
|
|
body .upperblock .side:nth-of-type(1) {
|
|
box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #d25b52;
|
|
background: repeating-linear-gradient(to right, #d9ad47 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d9ad47 10vmin, #d9ad47 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #d25b52 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d25b52 10vmin, #d25b52 11.25vmin), linear-gradient(to bottom, #d4635a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d25b52 10vmin), rgba(242, 244, 252, 0.75);
|
|
}
|
|
body .upperblock .side:first-of-type {
|
|
background: repeating-linear-gradient(to right, #ddb65c 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #ddb65c 10vmin, #ddb65c 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d76e66 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d76e66 10vmin, #d76e66 11.25vmin), linear-gradient(to bottom, #d4635a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d76e66 10vmin, #d76e66 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d76e66 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
|
|
}
|
|
body .upperblock .side:nth-of-type(2) {
|
|
box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #cb4439;
|
|
background: repeating-linear-gradient(to right, #d3a12d 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d3a12d 10vmin, #d3a12d 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #cb4439 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #cb4439 10vmin, #cb4439 11.25vmin), linear-gradient(to bottom, #d0534a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #cb4439 10vmin), rgba(242, 244, 252, 0.75);
|
|
}
|
|
body .upperblock .side:first-of-type {
|
|
background: repeating-linear-gradient(to right, #dcb458 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #dcb458 10vmin, #dcb458 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d66a62 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d66a62 10vmin, #d66a62 11.25vmin), linear-gradient(to bottom, #d0534a 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d66a62 10vmin, #d66a62 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d66a62 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
|
|
}
|
|
body .upperblock .side:nth-of-type(3) {
|
|
box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #b63a30;
|
|
background: repeating-linear-gradient(to right, #bb8f27 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #bb8f27 10vmin, #bb8f27 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #b63a30 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #b63a30 10vmin, #b63a30 11.25vmin), linear-gradient(to bottom, #cb4439 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #b63a30 10vmin), rgba(242, 244, 252, 0.75);
|
|
}
|
|
body .upperblock .side:first-of-type {
|
|
background: repeating-linear-gradient(to right, #dbb253 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #dbb253 10vmin, #dbb253 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d5675e 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d5675e 10vmin, #d5675e 11.25vmin), linear-gradient(to bottom, #cb4439 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d5675e 10vmin, #d5675e 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d5675e 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
|
|
}
|
|
body .upperblock .side:nth-of-type(4) {
|
|
box-shadow: 0 0 0 0.05vmin #d8726a, inset 0 0 0 0.5vmin #9e3229;
|
|
background: repeating-linear-gradient(to right, #a27b22 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #a27b22 10vmin, #a27b22 11.25vmin) 50% 2vmin/100% 3vmin no-repeat, repeating-linear-gradient(to right, #9e3229 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #9e3229 10vmin, #9e3229 11.25vmin), linear-gradient(to bottom, #bf3c32 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #9e3229 10vmin), rgba(242, 244, 252, 0.75);
|
|
}
|
|
body .upperblock .side:first-of-type {
|
|
background: repeating-linear-gradient(to right, #dab04f 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #dab04f 10vmin, #dab04f 11.25vmin) 50% 2vmin/100% 2vmin no-repeat, repeating-linear-gradient(to right, #d4635a 1.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, rgba(255, 255, 255, 0.001) 10vmin, #d4635a 10vmin, #d4635a 11.25vmin), linear-gradient(to bottom, #bf3c32 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 10vmin, #d4635a 10vmin, #d4635a 10.5vmin, rgba(255, 255, 255, 0.001) 10.5vmin, rgba(255, 255, 255, 0.001) 12.5vmin, #d4635a 10vmin), repeating-linear-gradient(to right, #d8726a 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 0.5vmin, #d8726a 0.5vmin, #d8726a 0.75vmin) 50% 10vmin/100% 25vmin repeat-x, rgba(242, 244, 252, 0.75);
|
|
}
|
|
|
|
#wrap {
|
|
transition: 1s ease-in-out;
|
|
pointer-events: none;
|
|
width: 90vmin;
|
|
height: 90vmin;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(calc((var(--mouseX) * -7.5vmin))) translateY(7.5vmin) scale(0.5) rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
|
|
transform-origin: 50% 50% -45vmin;
|
|
--mouseX: 0;
|
|
}
|
|
#wrap * {
|
|
transition: 1s ease-in-out;
|
|
transform-style: preserve-3d;
|
|
}
|
|
#wrap *:before, #wrap *:after {
|
|
transform-style: preserve-3d;
|
|
transition: 1s ease-in-out;
|
|
}
|
|
#wrap .bridge {
|
|
width: 17.5vmin;
|
|
height: 50vmin;
|
|
bottom: 16vmin;
|
|
position: absolute;
|
|
left: 31.5vmin;
|
|
transform-origin: 100% 100%;
|
|
transform: rotateX(-95deg) rotateY(90deg);
|
|
}
|
|
#wrap .bridge .noface {
|
|
position: absolute;
|
|
width: 10vmin;
|
|
height: 12.5vmin;
|
|
top: 30vmin;
|
|
left: 22.5vmin;
|
|
transform: rotateY(-90deg) rotateX(95deg) translateX(-10vmin) translateZ(calc((var(--mouseX) * 7.5vmin) + 2.5vmin)) translateY(calc(var(--mouseX) * -2vmin));
|
|
}
|
|
#wrap .bridge .noface .body {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.5) 80%, rgba(255, 255, 255, 0.001) 100%);
|
|
width: 4vmin;
|
|
left: calc(50% - 2vmin);
|
|
border-radius: 20vmin 20vmin 25vmin 25vmin/35vmin 35vmin 25vmin 25vmin;
|
|
height: 110%;
|
|
top: -5%;
|
|
overflow: hidden;
|
|
transform: rotateY(calc(var(--mouseX) * -90deg));
|
|
}
|
|
#wrap .bridge .noface .body .face {
|
|
width: 2.75vmin;
|
|
height: 4vmin;
|
|
position: absolute;
|
|
left: calc(50% - 1.375vmin);
|
|
background: white;
|
|
top: 0.5vmin;
|
|
border-radius: 10vmin/15vmin;
|
|
transform: scale(0.9) translateX(clamp(0vmin, calc(var(--mouseX) * 3vmin), 20vmin)) translateY(clamp(-0.5vmin, calc(var(--mouseX) * 1vmin), 2vmin));
|
|
overflow: hidden;
|
|
}
|
|
#wrap .bridge .noface .body .face:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 1vmin;
|
|
height: 3vmin;
|
|
top: -0.25vmin;
|
|
left: 0.15vmin;
|
|
background: radial-gradient(ellipse at center, #000 0.45vmin, rgba(255, 255, 255, 0.001) 0.45vmin) 50% 1.65vmin/100% 0.45vmin no-repeat, linear-gradient(to bottom, #fff 0.15vmin, rgba(255, 255, 255, 0.001) 0.15vmin, rgba(255, 255, 255, 0.001) 1.25vmin, #fff 1vmin, #fff 2.25vmin, rgba(255, 255, 255, 0.001) 2vmin), linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.2vmin, #bfbfbf 0.2vmin, #bfbfbf 0.65vmin, rgba(255, 255, 255, 0.001) 0.65vmin);
|
|
-webkit-box-reflect: right 0.4vmin;
|
|
transform: translateX(clamp(0vmin, calc(var(--mouseX) * 2vmin), 20vmin));
|
|
}
|
|
#wrap .bridge .noface .body .face:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 1.25vmin;
|
|
height: 0.35vmin;
|
|
background: #000;
|
|
left: calc(50% - 0.625vmin);
|
|
bottom: 0.5vmin;
|
|
border-radius: 5vmin;
|
|
transform: translateX(clamp(0vmin, calc(var(--mouseX) * 1vmin), 20vmin));
|
|
}
|
|
#wrap .bridge .plank {
|
|
position: absolute;
|
|
width: 17.5vmin;
|
|
height: 2vmin;
|
|
left: -152.5vmin;
|
|
top: calc(50% - 4vmin);
|
|
transform-origin: 500% 50%;
|
|
}
|
|
#wrap .bridge .plank .rail {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 175%;
|
|
background: linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 0% 50%/60% 100% no-repeat, linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 100% calc(50% + 1.5vmin)/40% 100% no-repeat, linear-gradient(to right, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin), linear-gradient(to right, rgba(255, 255, 255, 0.001) 5vmin, #d35f56 5vmin, #d35f56 5.5vmin, rgba(255, 255, 255, 0.001) 5.5vmin), linear-gradient(to left, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin);
|
|
left: -50%;
|
|
}
|
|
#wrap .bridge .plank .rail:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 1.5vmin;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: #c33d33;
|
|
transform: rotateY(90deg) translateZ(-0.75vmin);
|
|
box-shadow: 18vmin 0 0 #c33d33;
|
|
}
|
|
#wrap .bridge .plank .rail:before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 0% 50%/60% 100% no-repeat, linear-gradient(to bottom, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin) 100% calc(50% + 1.5vmin)/40% 100% no-repeat, linear-gradient(to right, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin), linear-gradient(to right, rgba(255, 255, 255, 0.001) 5vmin, #d35f56 5vmin, #d35f56 5.5vmin, rgba(255, 255, 255, 0.001) 5.5vmin), linear-gradient(to left, #d35f56 0.75vmin, rgba(255, 255, 255, 0.001) 0.75vmin);
|
|
transform: translateZ(-17.5vmin);
|
|
}
|
|
#wrap .bridge .plank:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 150%;
|
|
bottom: 0%;
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
background: #b09242;
|
|
box-shadow: inset 0 0 0 0.5vmin #8b7334;
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(1) {
|
|
transform: rotate(158.125deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(2) {
|
|
transform: rotate(160deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(3) {
|
|
transform: rotate(161.875deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(4) {
|
|
transform: rotate(163.75deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(5) {
|
|
transform: rotate(165.625deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(6) {
|
|
transform: rotate(167.5deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(7) {
|
|
transform: rotate(169.375deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(8) {
|
|
transform: rotate(171.25deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(9) {
|
|
transform: rotate(173.125deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(10) {
|
|
transform: rotate(175deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(11) {
|
|
transform: rotate(176.875deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(12) {
|
|
transform: rotate(178.75deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(13) {
|
|
transform: rotate(180.625deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(14) {
|
|
transform: rotate(182.5deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(15) {
|
|
transform: rotate(184.375deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(16) {
|
|
transform: rotate(186.25deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(17) {
|
|
transform: rotate(188.125deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(18) {
|
|
transform: rotate(190deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(19) {
|
|
transform: rotate(191.875deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(20) {
|
|
transform: rotate(193.75deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(21) {
|
|
transform: rotate(195.625deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(22) {
|
|
transform: rotate(197.5deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(23) {
|
|
transform: rotate(199.375deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(24) {
|
|
transform: rotate(201.25deg);
|
|
}
|
|
#wrap .bridge .plank:nth-of-type(25) {
|
|
transform: rotate(203.125deg);
|
|
}
|
|
#wrap .center {
|
|
position: absolute;
|
|
width: 17.5vmin;
|
|
height: 22.5vmin;
|
|
bottom: 22.5vmin;
|
|
left: 31.5vmin;
|
|
transform: translateZ(-10vmin);
|
|
}
|
|
#wrap .center .leaf {
|
|
position: absolute;
|
|
width: 6vmin;
|
|
height: 6vmin;
|
|
border-radius: 50vmin 0;
|
|
background: linear-gradient(225deg, rgba(255, 255, 255, 0.001) 25%, #e2c175 25%);
|
|
box-shadow: inset 0 0 0 0.35vmin #d5a536;
|
|
top: -20.5vmin;
|
|
left: calc(50% - 6vmin);
|
|
transform: translateZ(1vmin) rotate(-45deg);
|
|
transform-origin: 100% 0%;
|
|
}
|
|
#wrap .center .leaf:nth-of-type(2) {
|
|
transform: translateZ(1vmin) rotate(-75deg) scale(0.9);
|
|
}
|
|
#wrap .center .leaf:nth-of-type(3) {
|
|
transform: translateZ(1vmin) rotate(-15deg) scale(0.9);
|
|
}
|
|
#wrap .center .leaf:nth-of-type(4) {
|
|
transform: translateZ(1vmin) rotate(-105deg) scale(0.8);
|
|
top: -19vmin;
|
|
}
|
|
#wrap .center .leaf:nth-of-type(5) {
|
|
transform: translateZ(1vmin) rotate(15deg) scale(0.8);
|
|
top: -19vmin;
|
|
}
|
|
#wrap .center .plank {
|
|
width: 1vmin;
|
|
height: 16.5vmin;
|
|
left: calc(50% - 0.5vmin);
|
|
position: absolute;
|
|
bottom: 25.25vmin;
|
|
transform-origin: 50% 55%;
|
|
}
|
|
#wrap .center .plank:nth-of-type(5):after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 5vmin;
|
|
height: 100%;
|
|
bottom: 100%;
|
|
left: -2.5vmin;
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
transform-origin: bottom;
|
|
transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg) translateX(-2.5vmin);
|
|
}
|
|
#wrap .center .plank:last-of-type:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 5vmin;
|
|
height: 100%;
|
|
bottom: 100%;
|
|
left: -2.5vmin;
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
transform-origin: bottom;
|
|
transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg) translateX(16vmin);
|
|
}
|
|
#wrap .center .plank:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 140%;
|
|
height: 100%;
|
|
bottom: 100%;
|
|
left: -20%;
|
|
background: #668c6a;
|
|
transform-origin: bottom;
|
|
transform: translateZ(5vmin) rotateX(90deg);
|
|
box-shadow: inset 0 0 0.5vmin 0.5vmin #466048;
|
|
}
|
|
#wrap .center .plank:nth-of-type(1) {
|
|
transform: rotate(-125deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(2) {
|
|
transform: rotate(-116deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(3) {
|
|
transform: rotate(-107deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(4) {
|
|
transform: rotate(-98deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(5) {
|
|
transform: rotate(-89deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(6) {
|
|
transform: rotate(-80deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(7) {
|
|
transform: rotate(-71deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(8) {
|
|
transform: rotate(-62deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(9) {
|
|
transform: rotate(-53deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(10) {
|
|
transform: rotate(-44deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(11) {
|
|
transform: rotate(-35deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(12) {
|
|
transform: rotate(-26deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(13) {
|
|
transform: rotate(-17deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(14) {
|
|
transform: rotate(-8deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(15) {
|
|
transform: rotate(1deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(16) {
|
|
transform: rotate(10deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(17) {
|
|
transform: rotate(19deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(18) {
|
|
transform: rotate(28deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(19) {
|
|
transform: rotate(37deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(20) {
|
|
transform: rotate(46deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(21) {
|
|
transform: rotate(55deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(22) {
|
|
transform: rotate(64deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(23) {
|
|
transform: rotate(73deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(24) {
|
|
transform: rotate(82deg);
|
|
}
|
|
#wrap .center .plank:nth-of-type(25) {
|
|
transform: rotate(91deg);
|
|
}
|
|
#wrap .center:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 6.25vmin;
|
|
height: 3vmin;
|
|
background: repeating-linear-gradient(to right, #8b7334 1vmin, #665426 1vmin, #665426 1.5vmin, #8b7334 2.5vmin);
|
|
border: 0.35vmin dashed #deb860;
|
|
left: 1.15vmin;
|
|
box-sizing: border-box;
|
|
-webkit-box-reflect: right 2vmin;
|
|
top: 5vmin;
|
|
transform: translateZ(0.05vmin);
|
|
}
|
|
#wrap .center:after {
|
|
box-shadow: inset 0 -0.5vmin 0 #d5a536;
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 5vmin;
|
|
width: calc(100% + 7.5vmin);
|
|
left: -3.75vmin;
|
|
transform-origin: top;
|
|
background: linear-gradient(to bottom, #8c8c8c, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #8c8c8c, #a6a6a6 0.25vmin, #a6a6a6 0.75vmin, #8c8c8c 1.5vmin, #8c8c8c 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #a6a6a6, #8c8c8c 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
transform: rotateX(55deg);
|
|
-webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
|
|
clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
|
|
}
|
|
#wrap .center .side {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
}
|
|
#wrap .center .side:nth-of-type(2) .upper .rail {
|
|
transform: translateZ(0vmin) translateY(0.25vmin);
|
|
}
|
|
#wrap .center .side:nth-of-type(3) .upper .rail {
|
|
transform: translateZ(0vmin) translateY(-0.25vmin);
|
|
}
|
|
#wrap .center .side .upper .rail {
|
|
content: "";
|
|
position: absolute;
|
|
width: 125%;
|
|
height: 17.5%;
|
|
bottom: 40%;
|
|
left: -12.5%;
|
|
transform: translateZ(5vmin);
|
|
background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.5vmin, #cd4c42 0.5vmin, #cd4c42 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) 3.5vmin) 50% 0%/100% 0.5vmin no-repeat, linear-gradient(to top, #b09242 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #d5a536 calc(100% - 0.5vmin)), repeating-linear-gradient(to right, #cd4c42 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 3vmin, #cd4c42 3vmin, #cd4c42 3.5vmin);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection {
|
|
position: absolute;
|
|
width: 8.5vmin;
|
|
height: 3.5vmin;
|
|
background: #e7cb8a;
|
|
bottom: 20vmin;
|
|
left: calc(50% - 4.25vmin);
|
|
border-radius: 100vmin 100vmin 0 0/75vmin 75vmin 0 0;
|
|
transform: translateZ(-5vmin);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof {
|
|
width: 1vmin;
|
|
height: 16.5vmin;
|
|
left: calc(50% - 0.5vmin);
|
|
position: absolute;
|
|
bottom: -13vmin;
|
|
transform-origin: 50% 40%;
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 140%;
|
|
left: -20%;
|
|
height: 125%;
|
|
bottom: 100%;
|
|
transform-origin: 50% 100%;
|
|
transform: translateZ(2.5vmin) rotateX(90deg);
|
|
background: #668c6a;
|
|
box-shadow: inset 0 0 0.5vmin 0.5vmin #466048;
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(1) {
|
|
transform: rotate(-50deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(2) {
|
|
transform: rotate(-38.75deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(3) {
|
|
transform: rotate(-27.5deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(4) {
|
|
transform: rotate(-16.25deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(5) {
|
|
transform: rotate(-5deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(6) {
|
|
transform: rotate(6.25deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(7) {
|
|
transform: rotate(17.5deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(8) {
|
|
transform: rotate(28.75deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(9) {
|
|
transform: rotate(40deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper .topsection .roof:nth-of-type(10) {
|
|
transform: rotate(51.25deg);
|
|
}
|
|
#wrap .center .side:first-of-type .upper:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, rgba(216, 114, 106, 0.75), rgba(216, 114, 106, 0.75)), repeating-linear-gradient(to right, #d5a536 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 1vmin, #d5a536 1vmin, #d5a536 1.25vmin), repeating-linear-gradient(to bottom, #d5a536 0.25vmin, rgba(255, 255, 255, 0.001) 0.25vmin, rgba(255, 255, 255, 0.001) 1vmin, #d5a536 1vmin, #d5a536 1.25vmin), #d35f56;
|
|
-webkit-mask: radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) 50% 3vmin/5vmin 5vmin no-repeat, radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) calc(50% - 2.5vmin) 4vmin/5vmin 5vmin no-repeat, radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) calc(50% + 2.5vmin) 4vmin/5vmin 5vmin no-repeat;
|
|
}
|
|
#wrap .center .side .upper {
|
|
background: linear-gradient(to bottom, #daaf4b 10vmin, rgba(255, 255, 255, 0.001) 10vmin), radial-gradient(circle at bottom, rgba(255, 255, 255, 0.001) 8.35vmin, #d8726a 2vmin) 50% 50%/125% 100%;
|
|
position: absolute;
|
|
width: 80%;
|
|
left: 10%;
|
|
bottom: 150%;
|
|
height: 80%;
|
|
}
|
|
#wrap .center .side .upper:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 120%;
|
|
left: -10%;
|
|
height: 7.5vmin;
|
|
bottom: calc(100% - 3.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(45deg) translateZ(2.5vmin);
|
|
background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 25%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 25%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .center .side:nth-of-type(2) .upper {
|
|
transform: translateZ(-1.85vmin);
|
|
left: 0vmin;
|
|
background: linear-gradient(to bottom, #daaf4b 10vmin, #cd4c42 10vmin);
|
|
}
|
|
#wrap .center .side:nth-of-type(3) .upper {
|
|
transform: translateZ(-1.85vmin);
|
|
background: linear-gradient(to bottom, #daaf4b 10vmin, #cd4c42 10vmin);
|
|
left: 3.5vmin;
|
|
}
|
|
#wrap .center .side:first-of-type:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 20vmin;
|
|
box-shadow: inset 3vmin 4vmin 0 0 #8b7334, inset -3vmin 0 0 #8b7334, inset 0 8vmin 0 #8c8c8c, inset calc((-20vmin * var(--mouseX)) - 4vmin) 0 6vmin black;
|
|
left: 0;
|
|
bottom: -8vmin;
|
|
background: linear-gradient(to bottom, #8c8c8c 8vmin, #53451f 8vmin);
|
|
}
|
|
#wrap .center .side:first-of-type:after {
|
|
box-shadow: inset 0 -0.5vmin 0 #d5a536;
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 5vmin;
|
|
width: calc(100% + 7.5vmin);
|
|
left: -3.75vmin;
|
|
transform-origin: top;
|
|
background: linear-gradient(to bottom, #8c8c8c, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #8c8c8c, #a6a6a6 0.25vmin, #a6a6a6 0.75vmin, #8c8c8c 1.5vmin, #8c8c8c 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #a6a6a6, #8c8c8c 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
transform: rotateX(55deg);
|
|
-webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
|
|
clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
|
|
top: auto;
|
|
bottom: 7.5vmin;
|
|
}
|
|
#wrap .center .side:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .center .side:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .center .side:nth-of-type(4) {
|
|
transform: translateZ(-17.5vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .center .side:nth-of-type(1) {
|
|
background: #cc483e;
|
|
}
|
|
#wrap .center .side:nth-of-type(2) {
|
|
background: #c33d33;
|
|
}
|
|
#wrap .center .side:nth-of-type(3) {
|
|
background: #b2382f;
|
|
}
|
|
#wrap .center .side:nth-of-type(4) {
|
|
background: #a2332a;
|
|
}
|
|
#wrap .center .side .topside {
|
|
width: 100%;
|
|
height: 50%;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
}
|
|
#wrap .center .side:first-of-type .topside {
|
|
background: linear-gradient(to right, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) calc(100% - 3vmin), #8b7334 calc(100% - 3vmin)), linear-gradient(to bottom, #8b7334 2vmin, rgba(255, 255, 255, 0.001) 2vmin);
|
|
}
|
|
#wrap .center .side:first-of-type .topside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 8vmin;
|
|
top: -8vmin;
|
|
background: #b09242;
|
|
border-radius: 50vmin 50vmin 0 0;
|
|
}
|
|
#wrap .center .side:first-of-type .topside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 125%;
|
|
height: 35%;
|
|
bottom: 0;
|
|
left: -12.5%;
|
|
transform: translateZ(5vmin);
|
|
background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.5vmin, #b09242 0.5vmin, #b09242 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) 3.5vmin) 50% 0%/100% 0.5vmin no-repeat, linear-gradient(to top, #b09242 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #d5a536 calc(100% - 0.5vmin)), repeating-linear-gradient(to right, #b09242 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 3vmin, #b09242 3vmin, #b09242 3.5vmin);
|
|
}
|
|
#wrap .center .side:nth-of-type(4) .topside {
|
|
background: #413618;
|
|
transform: translateZ(-8vmin);
|
|
}
|
|
#wrap .center .side:nth-of-type(4) .topside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: #8b7334;
|
|
transform-origin: bottom;
|
|
transform: rotateX(90deg);
|
|
width: 120%;
|
|
left: -10%;
|
|
top: auto;
|
|
bottom: 0;
|
|
height: 130%;
|
|
}
|
|
#wrap .center .side:nth-of-type(2) .topside, #wrap .center .side:nth-of-type(3) .topside {
|
|
background: linear-gradient(to right, #78642d 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) calc(100% - 3vmin), #78642d calc(100% - 3vmin)), linear-gradient(to bottom, #78642d 4vmin, rgba(255, 255, 255, 0.001) 4vmin);
|
|
}
|
|
#wrap .center .side:nth-of-type(2) .topside:before, #wrap .center .side:nth-of-type(3) .topside:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -25%;
|
|
transform: translateZ(1.5vmin);
|
|
width: 125%;
|
|
height: 35%;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 0.5vmin, #b09242 0.5vmin, #b09242 3vmin, rgba(255, 255, 255, 0.001) 3vmin, rgba(255, 255, 255, 0.001) 3.5vmin) 50% 0%/100% 0.5vmin no-repeat, linear-gradient(to top, #b09242 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) calc(100% - 0.5vmin), #d5a536 calc(100% - 0.5vmin)), repeating-linear-gradient(to right, #b09242 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 3vmin, #b09242 3vmin, #b09242 3.5vmin);
|
|
}
|
|
#wrap .center .side:nth-of-type(3) .topside:before {
|
|
left: 0%;
|
|
}
|
|
#wrap .rearblock {
|
|
position: absolute;
|
|
width: 65vmin;
|
|
height: 30vmin;
|
|
left: 10vmin;
|
|
top: 47.5vmin;
|
|
transform: translateZ(-35vmin);
|
|
}
|
|
#wrap .rearblock .side {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
top: 20vmin;
|
|
transform-style: preserve-3d;
|
|
}
|
|
#wrap .rearblock .side:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .rearblock .side:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .rearblock .side:nth-of-type(4) {
|
|
transform: translateZ(-45vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .rearblock .side:first-of-type {
|
|
width: 6.5vmin;
|
|
height: 100vmin;
|
|
background: radial-gradient(ellipse at center, black 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) 50% 0.5vmin/100% 2.5vmin no-repeat, linear-gradient(to bottom, gray, #999999, #ccc 75%, rgba(255, 255, 255, 0.001));
|
|
top: -40vmin;
|
|
left: -25vmin;
|
|
border-radius: 125vmin 125vmin 0 0/90vmin 90vmin 0 0;
|
|
transform: rotateY(calc(var(--mouseX) * -95deg));
|
|
box-shadow: inset calc(var(--mouseX) * 5vmin) -1vmin 2vmin gray, inset calc(var(--mouseX) * -2vmin) -1vmin 2vmin #d9d9d9, inset 0 2vmin 2vmin gray;
|
|
}
|
|
#wrap .rearblock .side:first-of-type:before {
|
|
content: "";
|
|
transform-style: preserve-3d;
|
|
position: absolute;
|
|
width: 32.5vmin;
|
|
height: 30vmin;
|
|
left: 1.5vmin;
|
|
border-radius: 500vmin;
|
|
border: 0.5vmin solid;
|
|
border-color: rgba(255, 255, 255, 0.001) rgba(255, 255, 255, 0.001) #a6a6a6 rgba(255, 255, 255, 0.001);
|
|
transform-origin: left;
|
|
transform: rotateY(calc(var(--mouseX) * 65deg)) translateZ(0vmin);
|
|
}
|
|
#wrap .rearblock .side:first-of-type:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 50vmin;
|
|
height: 50vmin;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.001) 10%, rgba(204, 204, 204, 0.35), rgba(191, 191, 191, 0.5));
|
|
bottom: calc(100% - 2vmin);
|
|
right: calc(100% - 5vmin);
|
|
transform-origin: 100% 100%;
|
|
transform: skew(calc(var(--mouseX) * 30deg));
|
|
-webkit-mask: radial-gradient(circle at center, #000 2.5vmin, rgba(255, 255, 255, 0.001) 2.5vmin) 100% 100%/5vmin 5vmin no-repeat, radial-gradient(circle at center, #000 5vmin, rgba(255, 255, 255, 0.001) 5vmin) 100% 100%/15vmin 12.5vmin no-repeat, radial-gradient(circle at center, #000 7.5vmin, rgba(255, 255, 255, 0.001) 7.5vmin) 100% 100%/25vmin 25vmin no-repeat, radial-gradient(circle at center, #000 7.5vmin, rgba(255, 255, 255, 0.001) 7.5vmin) calc(100% - 2.5vmin) 100%/25vmin 25vmin no-repeat, radial-gradient(circle at center, #000 9vmin, rgba(255, 255, 255, 0.001) 9vmin) calc(100% - 5vmin) 100%/30vmin 30vmin no-repeat, radial-gradient(circle at center, #000 12vmin, rgba(255, 255, 255, 0.001) 12vmin) calc(100% - 10vmin) 100%/40vmin 30vmin no-repeat;
|
|
}
|
|
#wrap .rearblock .side:nth-of-type(2), #wrap .rearblock .side:nth-of-type(3) {
|
|
width: 45vmin;
|
|
}
|
|
#wrap .rearblock .side:nth-of-type(3) {
|
|
left: -45vmin;
|
|
height: 80vmin;
|
|
top: -20vmin;
|
|
-webkit-mask: linear-gradient(to top, transparent 5vmin, #000 30vmin);
|
|
mask: linear-gradient(to top, transparent 5vmin, #000 30vmin);
|
|
background-color: #bfbfbf;
|
|
background-image: linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.4vmin), linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.3vmin);
|
|
background-size: 5.8vmin 5.8vmin;
|
|
background-position: 0px 0.5vmin, 0.6vmin 3.6vmin, 3vmin 3.2vmin, 3.5vmin 0.7vmin;
|
|
}
|
|
#wrap .rearblock .side:nth-of-type(3):before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: linear-gradient(to bottom, rgba(128, 128, 128, 0.5), rgba(255, 255, 255, 0.001) 50%);
|
|
}
|
|
#wrap .roofpeak {
|
|
position: absolute;
|
|
width: 10vmin;
|
|
height: 5vmin;
|
|
left: -15vmin;
|
|
top: 2.5vmin;
|
|
transform: translateZ(-45vmin) rotateY(-90deg);
|
|
}
|
|
#wrap .roofpeak:before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-width: 0 5vmin 5vmin 5vmin;
|
|
border-color: transparent transparent #e2c175 transparent;
|
|
transform: translateZ(-1vmin);
|
|
}
|
|
#wrap .roofpeak:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 40%;
|
|
left: 20%;
|
|
bottom: 0;
|
|
background: linear-gradient(to bottom, #f0deb4 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin), repeating-linear-gradient(to right, #f0deb4 1vmin, rgba(255, 255, 255, 0.001) 1vmin, rgba(255, 255, 255, 0.001) 2vmin, #f0deb4 2vmin, #f0deb4 3vmin);
|
|
transform: translateZ(-1vmin);
|
|
}
|
|
#wrap .roofpeak .roof {
|
|
height: 7.5vmin;
|
|
width: 25vmin;
|
|
position: absolute;
|
|
background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
left: 50%;
|
|
transform-origin: 0% 0%;
|
|
transform: rotateY(90deg) rotateX(45deg);
|
|
}
|
|
#wrap .roofpeak .roof:last-of-type {
|
|
left: auto;
|
|
right: 50%;
|
|
transform-origin: 100% 0%;
|
|
transform: rotateY(-90deg) rotateX(45deg);
|
|
}
|
|
#wrap .peak {
|
|
position: absolute;
|
|
width: 10vmin;
|
|
height: 10vmin;
|
|
top: 35vmin;
|
|
left: 0vmin;
|
|
transform: rotateY(90deg) translate(30vmin, 5vmin);
|
|
}
|
|
#wrap .peak:before, #wrap .peak:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform: translateZ(-10vmin);
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 5vmin, #8b7334 5vmin, #8b7334 6vmin, rgba(255, 255, 255, 0.001) 5vmin, rgba(255, 255, 255, 0.001) 8vmin, #8b7334 8vmin);
|
|
}
|
|
#wrap .peak:after {
|
|
top: -4vmin;
|
|
height: 5vmin;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0.001) 40%, #8b7334 40%, #8b7334 60%, rgba(255, 255, 255, 0.001) 60%), linear-gradient(-135deg, rgba(255, 255, 255, 0.001) 40%, #8b7334 40%, #8b7334 50%, rgba(255, 255, 255, 0.001) 50%) 2vmin 50%, linear-gradient(135deg, rgba(255, 255, 255, 0.001) 40%, #8b7334 40%, #8b7334 50%, rgba(255, 255, 255, 0.001) 50%) -2vmin 50%, linear-gradient(to top, #8b7334 1vmin, rgba(255, 255, 255, 0.001) 1vmin);
|
|
}
|
|
#wrap .peak .peakside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
}
|
|
#wrap .peak .peakside:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .peak .peakside:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .peak .peakside:nth-of-type(4) {
|
|
transform: translateZ(-5vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .peak .peakside:nth-of-type(2) {
|
|
background: linear-gradient(to left, #7c672e 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 3.5vmin, #7c672e 3.5vmin), linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 5vmin, #8b7334 5vmin, #8b7334 6vmin, rgba(255, 255, 255, 0.001) 5vmin, rgba(255, 255, 255, 0.001) 8vmin, #8b7334 8vmin);
|
|
}
|
|
#wrap .peak .peakside:nth-of-type(2):after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg) translateZ(4vmin);
|
|
left: 0vmin;
|
|
background: #413618;
|
|
box-shadow: 2vmin 0 0 #665426;
|
|
}
|
|
#wrap .peak .peakside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 10vmin;
|
|
top: -8vmin;
|
|
background: linear-gradient(to bottom, #3b513d, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3b513d, #516e54 0.25vmin, #516e54 0.75vmin, #3b513d 1.5vmin, #3b513d 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #516e54, #3b513d 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
transform-origin: 50% 0%;
|
|
transform: rotateX(38.5deg) translateZ(-5vmin);
|
|
}
|
|
#wrap .peak .peakside:nth-of-type(3) {
|
|
background: linear-gradient(to right, #846d31 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 3.5vmin, #846d31 3.5vmin), linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 5vmin, #846d31 5vmin, #846d31 6vmin, rgba(255, 255, 255, 0.001) 5vmin, rgba(255, 255, 255, 0.001) 8vmin, #846d31 8vmin);
|
|
}
|
|
#wrap .main {
|
|
position: absolute;
|
|
width: 65vmin;
|
|
height: 70vmin;
|
|
left: 7.5vmin;
|
|
transform: translateZ(-20vmin);
|
|
}
|
|
#wrap .main .window {
|
|
top: 55vmin;
|
|
left: 5vmin;
|
|
position: absolute;
|
|
width: 17.5vmin;
|
|
height: 10vmin;
|
|
transform: translateZ(5vmin);
|
|
}
|
|
#wrap .main .window .windowside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
|
|
box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
|
|
}
|
|
#wrap .main .window .windowside:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .main .window .windowside:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .main .window .windowside:nth-of-type(4) {
|
|
transform: translateZ(-17.5vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .main .window .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 110%;
|
|
left: -5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(45deg) translateZ(2vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .main .window .windowside:nth-of-type(1):before {
|
|
background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window .windowside:nth-of-type(2):before {
|
|
background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window .windowside:nth-of-type(3):before {
|
|
background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window .windowside:nth-of-type(4):before {
|
|
background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(4) {
|
|
position: absolute;
|
|
width: 17.5vmin;
|
|
height: 8vmin;
|
|
transform: translateZ(5vmin);
|
|
left: -2.5vmin;
|
|
top: 42.5vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
|
|
box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(4) {
|
|
transform: translateZ(-17.5vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 110%;
|
|
left: -5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(45deg) translateZ(2vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(1):before {
|
|
background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(2):before {
|
|
background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(3):before {
|
|
background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(4) .windowside:nth-of-type(4):before {
|
|
background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) {
|
|
position: absolute;
|
|
width: 26vmin;
|
|
height: 9vmin;
|
|
transform: translateZ(5vmin);
|
|
left: 41.5vmin;
|
|
top: 37.5vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
|
|
box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(4) {
|
|
transform: translateZ(-26vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 110%;
|
|
left: -5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(45deg) translateZ(2vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(1):before {
|
|
background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(2):before {
|
|
background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3):before {
|
|
background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(4):before {
|
|
background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3) {
|
|
background: #8b7334;
|
|
}
|
|
#wrap .main .window:nth-of-type(5) .windowside:nth-of-type(3):before {
|
|
display: none;
|
|
}
|
|
#wrap .main .window:nth-of-type(2) {
|
|
left: 47.5vmin;
|
|
position: absolute;
|
|
width: 20vmin;
|
|
height: 10vmin;
|
|
transform: translateZ(5vmin);
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
|
|
box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(4) {
|
|
transform: translateZ(-20vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 110%;
|
|
left: -5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(45deg) translateZ(2vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(1):before {
|
|
background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(2):before {
|
|
background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(3):before {
|
|
background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(2) .windowside:nth-of-type(4):before {
|
|
background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) {
|
|
position: absolute;
|
|
width: 70vmin;
|
|
height: 12.5vmin;
|
|
transform: translateZ(5vmin);
|
|
top: 22vmin;
|
|
left: -2.5vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
background: linear-gradient(to top, #8b7334 3vmin, rgba(255, 255, 255, 0.001) 3vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to bottom, #8b7334 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, #8b7334 0.5vmin, #dee4f7 0.5vmin, #dee4f7 1.5vmin, #8b7334 1.5vmin, #8b7334 2vmin) 50% 0%/100% calc(100% - 0.5vmin) no-repeat, repeating-linear-gradient(to right, rgba(255, 255, 255, 0.001) 3vmin, #8b7334 3vmin, #8b7334 4vmin, rgba(255, 255, 255, 0.001) 4vmin, rgba(255, 255, 255, 0.001) 7vmin) 50% 100%/100% 0.5vmin;
|
|
box-shadow: inset 1vmin 0 0 #8b7334, inset -1vmin 0 0 #8b7334;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(4) {
|
|
transform: translateZ(-70vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 110%;
|
|
left: -5%;
|
|
height: 5vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(45deg) translateZ(2vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(1):before {
|
|
background: linear-gradient(to bottom, #48634b, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #48634b, #5d8061 0.25vmin, #5d8061 0.75vmin, #48634b 1.5vmin, #48634b 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #5d8061, #48634b 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2):before {
|
|
background: linear-gradient(to bottom, #3f5742, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #3f5742, #557458 0.25vmin, #557458 0.75vmin, #3f5742 1.5vmin, #3f5742 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #557458, #3f5742 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3):before {
|
|
background: linear-gradient(to bottom, #374b39, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #374b39, #4c694f 0.25vmin, #4c694f 0.75vmin, #374b39 1.5vmin, #374b39 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #4c694f, #374b39 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(4):before {
|
|
background: linear-gradient(to bottom, #2e3f30, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #2e3f30, #445d46 0.25vmin, #445d46 0.75vmin, #2e3f30 1.5vmin, #2e3f30 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #445d46, #2e3f30 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(1):after {
|
|
background: linear-gradient(to bottom, #405843, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #405843, #567659 0.25vmin, #567659 0.75vmin, #405843 1.5vmin, #405843 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #567659, #405843 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2):after {
|
|
background: linear-gradient(to bottom, #304232, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #304232, #466048 0.25vmin, #466048 0.75vmin, #304232 1.5vmin, #304232 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #466048, #304232 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3):after {
|
|
background: linear-gradient(to bottom, #202c21, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #202c21, #364a38 0.25vmin, #364a38 0.75vmin, #202c21 1.5vmin, #202c21 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #364a38, #202c21 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(4):after {
|
|
background: linear-gradient(to bottom, #101611, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #101611, #263327 0.25vmin, #263327 0.75vmin, #101611 1.5vmin, #101611 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #263327, #101611 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 102%;
|
|
left: -1%;
|
|
height: 15vmin;
|
|
bottom: calc(100% - 2.5vmin);
|
|
transform-origin: 50% 100%;
|
|
transform: rotateX(40deg) translateZ(2vmin);
|
|
background: linear-gradient(to bottom, #516e54, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #516e54, #668c6a 0.25vmin, #668c6a 0.75vmin, #516e54 1.5vmin, #516e54 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #668c6a, #516e54 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 140%;
|
|
left: -20%;
|
|
height: 3vmin;
|
|
bottom: calc(100% - 12.5vmin);
|
|
transform-origin: 50% calc(0% - 5vmin);
|
|
transform: rotateX(135deg);
|
|
-webkit-mask: linear-gradient(-125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 100% 100%/50% 100% no-repeat, linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%) 0% 100%/50% 100% no-repeat;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(2), #wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3) {
|
|
height: 12.5vmin;
|
|
width: 45vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:nth-of-type(3) {
|
|
left: -45vmin;
|
|
}
|
|
#wrap .main .window:nth-of-type(3) .windowside:last-of-type {
|
|
transform: translateZ(-45vmin) rotateY(180deg);
|
|
}
|
|
#wrap .main .side {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
top: 20vmin;
|
|
-webkit-mask: linear-gradient(to top, transparent, #000 17.5vmin);
|
|
mask: linear-gradient(to top, transparent, #000 17.5vmin);
|
|
transform-style: preserve-3d;
|
|
}
|
|
#wrap .main .side:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .main .side:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .main .side:nth-of-type(4) {
|
|
transform: translateZ(-45vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .main .side:nth-of-type(2), #wrap .main .side:nth-of-type(3) {
|
|
width: 45vmin;
|
|
}
|
|
#wrap .main .side:nth-of-type(3) {
|
|
left: -45vmin;
|
|
}
|
|
#wrap .main .side:nth-of-type(1) {
|
|
background: #d0534a;
|
|
}
|
|
#wrap .main .side:nth-of-type(2) {
|
|
background: #ca4035;
|
|
}
|
|
#wrap .main .side:nth-of-type(3) {
|
|
background: #b63a30;
|
|
}
|
|
#wrap .main .side:nth-of-type(4) {
|
|
background: #a2332a;
|
|
}
|
|
#wrap .baseblock {
|
|
width: 30vmin;
|
|
height: 30vmin;
|
|
position: absolute;
|
|
bottom: -7.5vmin;
|
|
left: 0vmin;
|
|
}
|
|
#wrap .baseblock .side:last-of-type {
|
|
-webkit-mask: linear-gradient(to left, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 6vmin, #000 4vmin) 50% 1vmin/100% 10vmin no-repeat, linear-gradient(to bottom, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 10vmin, #000 10vmin);
|
|
mask: linear-gradient(to left, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 6vmin, #000 4vmin) 50% 1vmin/100% 10vmin no-repeat, linear-gradient(to bottom, #000 2vmin, rgba(255, 255, 255, 0.001) 2vmin, rgba(255, 255, 255, 0.001) 10vmin, #000 10vmin);
|
|
}
|
|
#wrap .baseblock .side:last-of-type:before {
|
|
background: linear-gradient(to bottom, #5b7d5f 3vmin, #bfbfbf 3vmin, #b3b3b3);
|
|
box-shadow: none;
|
|
}
|
|
#wrap .baseblock .steps {
|
|
position: absolute;
|
|
width: 20vmin;
|
|
height: 20vmin;
|
|
transform-origin: right;
|
|
left: -10vmin;
|
|
top: 10vmin;
|
|
transform: translateZ(-30vmin) rotateY(-90deg);
|
|
}
|
|
#wrap .baseblock .steps:before, #wrap .baseblock .steps:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform: translateZ(10.25vmin);
|
|
background-color: #bfbfbf;
|
|
background-image: linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.4vmin), linear-gradient(335deg, #b3b3b3 2.3vmin, transparent 2.3vmin), linear-gradient(155deg, #b3b3b3 2.4vmin, transparent 2.3vmin);
|
|
background-size: 5.8vmin 5.8vmin;
|
|
background-position: 0px 0.5vmin, 0.6vmin 3.6vmin, 3vmin 3.2vmin, 3.5vmin 0.7vmin;
|
|
-webkit-mask: linear-gradient(135deg, rgba(255, 255, 255, 0.001) 55%, #000 50%, #000 65%, rgba(255, 255, 255, 0.001) 80%);
|
|
}
|
|
#wrap .baseblock .steps:after {
|
|
background: rgba(204, 204, 204, 0.5);
|
|
}
|
|
#wrap .baseblock .steps .step {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 10%;
|
|
height: 50%;
|
|
transform-origin: top;
|
|
transform: rotateX(90deg);
|
|
}
|
|
#wrap .baseblock .steps .step:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
right: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .baseblock .steps .step:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 5vmin;
|
|
background: #ccc;
|
|
top: 100%;
|
|
transform-origin: top;
|
|
transform: rotateX(-90deg);
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(1) {
|
|
background: #9e9e9e;
|
|
left: 0%;
|
|
top: 90%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(1):before {
|
|
background: #757575;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(2) {
|
|
background: #a3a3a3;
|
|
left: 10%;
|
|
top: 80%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(2):before {
|
|
background: #7a7a7a;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(3) {
|
|
background: #a8a8a8;
|
|
left: 20%;
|
|
top: 70%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(3):before {
|
|
background: gray;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(4) {
|
|
background: #adadad;
|
|
left: 30%;
|
|
top: 60%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(4):before {
|
|
background: #858585;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(5) {
|
|
background: #b3b3b3;
|
|
left: 40%;
|
|
top: 50%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(5):before {
|
|
background: #8a8a8a;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(6) {
|
|
background: #b8b8b8;
|
|
left: 50%;
|
|
top: 40%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(6):before {
|
|
background: #8f8f8f;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(7) {
|
|
background: #bdbdbd;
|
|
left: 60%;
|
|
top: 30%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(7):before {
|
|
background: #949494;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(8) {
|
|
background: #c2c2c2;
|
|
left: 70%;
|
|
top: 20%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(8):before {
|
|
background: #999999;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(9) {
|
|
background: #c7c7c7;
|
|
left: 80%;
|
|
top: 10%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(9):before {
|
|
background: #9e9e9e;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(10) {
|
|
background: #cccccc;
|
|
left: 90%;
|
|
top: 0%;
|
|
}
|
|
#wrap .baseblock .steps .step:nth-of-type(10):before {
|
|
background: #a3a3a3;
|
|
}
|
|
#wrap .baseblock .tree {
|
|
position: absolute;
|
|
width: 15vmin;
|
|
height: 30vmin;
|
|
top: -27.5vmin;
|
|
left: 17.5vmin;
|
|
transform: translateX(calc(var(--mouseX) * 13vmin)) translateZ(-10vmin) rotateY(calc(-25deg - (var(--mouseX) * 25deg))) rotateX(calc(var(--mouseX) * -2.5deg));
|
|
background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.001) 5vmin, #78642d 5vmin, #8b7334 7vmin, rgba(255, 255, 255, 0.001) 7vmin);
|
|
}
|
|
#wrap .baseblock .tree .branch {
|
|
position: absolute;
|
|
width: 15vmin;
|
|
height: 7.5vmin;
|
|
background: #81a485;
|
|
bottom: 5vmin;
|
|
border-radius: 100vmin 100vmin 100vmin 100vmin/75vmin 75vmin 50vmin 50vmin;
|
|
right: -6.5vmin;
|
|
transform-origin: bottom;
|
|
box-shadow: inset calc(var(--mouseX) * 5vmin) -1vmin 3vmin #5b7d5f, inset calc(var(--mouseX) * -5vmin) 1vmin 3vmin #cbd9cd;
|
|
}
|
|
#wrap .baseblock .tree .branch:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.001) 5vmin, #78642d 5vmin, #8b7334 7vmin, rgba(255, 255, 255, 0.001) 7vmin);
|
|
top: -50%;
|
|
height: 50%;
|
|
}
|
|
#wrap .baseblock .tree .branch:first-of-type {
|
|
transform: translateX(calc(var(--mouseX) * 3vmin));
|
|
}
|
|
#wrap .baseblock .tree .branch:first-of-type:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.001) 5vmin, #78642d 5vmin, #8b7334 6.5vmin, rgba(255, 255, 255, 0.001) 6.5vmin);
|
|
transform: scaleX(-1);
|
|
top: -35%;
|
|
height: 50%;
|
|
left: 1.5vmin;
|
|
}
|
|
#wrap .baseblock .tree .branch:nth-of-type(2) {
|
|
bottom: 15vmin;
|
|
right: -2.5vmin;
|
|
transform: scale(0.9);
|
|
}
|
|
#wrap .baseblock .tree .branch:nth-of-type(2):before {
|
|
transform: translateX(-1.5vmin) scaleX(-1);
|
|
top: -45%;
|
|
}
|
|
#wrap .baseblock .tree .branch:nth-of-type(3) {
|
|
bottom: 13vmin;
|
|
right: -10vmin;
|
|
transform: scale(0.75) translateZ(-1vmin) translateX(calc(var(--mouseX) * 3vmin));
|
|
background: #90ae93;
|
|
}
|
|
#wrap .baseblock .tree .branch:nth-of-type(3):before {
|
|
background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.001) 5vmin, #8b7334 5vmin, #8b7334 6.25vmin, rgba(255, 255, 255, 0.001) 6.25vmin);
|
|
transform: translateX(5vmin) scaleX(-1);
|
|
top: -45%;
|
|
left: -5vmin;
|
|
}
|
|
#wrap .baseblock .tree .branch:nth-of-type(4) {
|
|
bottom: 21vmin;
|
|
right: -11.5vmin;
|
|
transform: scale(0.6) translateX(calc(var(--mouseX) * 3vmin));
|
|
background: #739977;
|
|
}
|
|
#wrap .baseblock .tree .branch:nth-of-type(4):before {
|
|
background: #81a485;
|
|
border-radius: inherit;
|
|
height: 125%;
|
|
width: 115%;
|
|
left: -14vmin;
|
|
top: -5vmin;
|
|
box-shadow: inherit;
|
|
}
|
|
#wrap .baseblock .tree .branch:last-of-type {
|
|
bottom: 30vmin;
|
|
right: -7.5vmin;
|
|
}
|
|
#wrap .baseblock .tree .branch:last-of-type:before {
|
|
top: 95%;
|
|
transform: scaleX(-1);
|
|
left: -6vmin;
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) {
|
|
left: auto;
|
|
right: 0vmin;
|
|
width: 40vmin;
|
|
}
|
|
#wrap .baseblock:nth-of-type(2):before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
left: -20vmin;
|
|
top: auto;
|
|
bottom: 0;
|
|
width: 20vmin;
|
|
height: 22.5vmin;
|
|
background: linear-gradient(to bottom, #999999 2.5vmin, #ce5046 2vmin);
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side {
|
|
transform-style: preserve-3d;
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:nth-of-type(4) {
|
|
transform: translateZ(-40vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:after {
|
|
width: calc(100% + 8vmin);
|
|
left: -4vmin;
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:first-of-type:after {
|
|
-webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 7.5% 100%);
|
|
clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 7.5% 100%);
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:nth-of-type(3) {
|
|
opacity: 0;
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:nth-of-type(3):after {
|
|
display: none;
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:nth-of-type(2) {
|
|
opacity: 1;
|
|
}
|
|
#wrap .baseblock:nth-of-type(2) .side:nth-of-type(2):after {
|
|
display: block;
|
|
}
|
|
#wrap .baseblock .side {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform-style: preserve-3d;
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(2) {
|
|
left: 100%;
|
|
transform-origin: left;
|
|
transform: rotateY(90deg);
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(3) {
|
|
left: -100%;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(4) {
|
|
transform: translateZ(-30vmin) rotateY(-180deg);
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(2) {
|
|
opacity: 0;
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(2):after {
|
|
display: none;
|
|
}
|
|
#wrap .baseblock .side:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 10vmin;
|
|
background: linear-gradient(to bottom, #999999 -25%, rgba(255, 255, 255, 0.001)), repeating-linear-gradient(45deg, #ccc 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.25vmin, #ccc 1.25vmin, #ccc 1.75vmin), repeating-linear-gradient(-45deg, #ccc 0.5vmin, rgba(255, 255, 255, 0.001) 0.5vmin, rgba(255, 255, 255, 0.001) 1.25vmin, #ccc 1.25vmin, #ccc 1.75vmin), #666666;
|
|
box-shadow: inset 0 0 0 0.5vmin #ccc;
|
|
}
|
|
#wrap .baseblock .side:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 5vmin;
|
|
width: calc(100% + 7.5vmin);
|
|
left: -3.75vmin;
|
|
transform-origin: top;
|
|
box-shadow: inset 0 -0.5vmin 0 #d5a536;
|
|
background: linear-gradient(to bottom, #338472, rgba(255, 255, 255, 0.001)) 50% 0%/100% calc(100% - 2vmin) no-repeat, repeating-linear-gradient(to right, #338472, #41a992 0.25vmin, #41a992 0.75vmin, #338472 1.5vmin, #338472 1.75vmin) 50% 0%/100% calc(100% - 2vmin) no-repeat, radial-gradient(circle at top, #41a992, #338472 1vmin, rgba(255, 255, 255, 0.001) 1vmin) 50% 100%/2vmin 2vmin;
|
|
transform: rotateX(55deg);
|
|
-webkit-clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
|
|
clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
|
|
}
|
|
#wrap .baseblock .side:first-of-type:after {
|
|
-webkit-clip-path: polygon(7.5% 0%, 90% 0%, 90% 100%, 0% 100%);
|
|
clip-path: polygon(7.5% 0%, 90% 0%, 90% 100%, 0% 100%);
|
|
}
|
|
#wrap .baseblock .side:last-of-type:after {
|
|
display: none;
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(1) {
|
|
background: #ce5046;
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(2) {
|
|
background: #c73f34;
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(3) {
|
|
background: #b2382f;
|
|
}
|
|
#wrap .baseblock .side:nth-of-type(4) {
|
|
background: #9e3229;
|
|
}
|
|
|
|
.clouds {
|
|
z-index: 999;
|
|
transform-style: preserve-3d;
|
|
position: absolute;
|
|
width: 125vmin;
|
|
height: 25vmin;
|
|
bottom: -18vmin;
|
|
left: -35vmin;
|
|
transform: translateY(calc(-7.5vmin + (var(--mouseX) * -2.5vmin))) translateX(calc(var(--mouseX) * -322.5vmin)) scale(1.5) scaleX(2) rotateY(calc(-5deg + (var(--mouseX) * 45deg))) rotateX(0deg) translateZ(75vmin) rotate(calc(var(--mouseX) * 30deg));
|
|
-webkit-mask: linear-gradient(to bottom, #000 50%, rgba(255, 255, 255, 0.001) 100%);
|
|
mask: linear-gradient(to bottom, #000 50%, rgba(255, 255, 255, 0.001) 100%);
|
|
background: linear-gradient(to top, #000, rgba(255, 255, 255, 0.001) 75%);
|
|
filter: drop-shadow(calc(-55vmin * var(--mouseX)) calc((-2.75vmin * var(--mouseX)) - 1vmin) 0vmin #f6f1e7) drop-shadow(calc(7.5vmin * var(--mouseX)) calc((-0.5vmin * var(--mouseX)) - 1vmin) 0 #f3ebde) blur(3px);
|
|
}
|
|
.clouds:last-of-type {
|
|
transform: translateY(calc(-8.5vmin + (var(--mouseX) * 10vmin))) translateX(calc(var(--mouseX) * 450vmin)) scale(1.5) scaleX(3) rotateY(calc(-25deg + (var(--mouseX) * 65deg))) rotateX(0deg) translateZ(calc(-100vmin + (var(--mouseX) * -50vmin)));
|
|
opacity: 0.65;
|
|
}
|
|
.clouds:before, .clouds:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 40vmin;
|
|
height: 40vmin;
|
|
background: #faf6f1;
|
|
top: 1.5vmin;
|
|
border-radius: 50vmin 50vmin 0 0;
|
|
box-shadow: -20vmin 0 0 -5vmin white, -40vmin 0 0 -1.5vmin white, 20vmin 0 0 -5vmin white, 45vmin 0 0 -1vmin white, 55vmin 0 0 -6.5vmin white, 70vmin 0 0 -1.5vmin white, 90vmin 0 0 -3.5vmin white, 110vmin 0 0 -1.5vmin white;
|
|
opacity: 0.5;
|
|
left: 5vmin;
|
|
transform: translate(calc(var(--mouseX) * 2vmin), calc(var(--mouseX) * 0.5vmin));
|
|
}
|
|
.clouds:before {
|
|
transform: translate(calc(var(--mouseX) * -2vmin), calc(var(--mouseX) * -0.5vmin));
|
|
}
|
|
.clouds:after {
|
|
left: -15vmin;
|
|
} |