2213 lines
99 KiB
CSS
2213 lines
99 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
|
|
@font-face {
|
|
font-family: 'Superguns';
|
|
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff") format("woff");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
body .ui_inner, body .ui_inner__item, body .ui_inner__item h2 {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
body .scanlines, body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui_inner__item h2, body .ui_inner__item .item_active__part, body .ui_inner__item .item_active__part h3 {
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
body .ui_inner__item::after, body .ui_inner__item::before {
|
|
width: 400px;
|
|
height: 40px;
|
|
background: #032035;
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
content: '';
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
transition: all 0.6s;
|
|
}
|
|
|
|
body .ui_inner__item .item_active__part, body .ui_inner__item .item_top, body .ui_inner__item .item_bottom {
|
|
border-left: 200px solid transparent;
|
|
border-right: 200px solid transparent;
|
|
border-bottom: 346.410161514px solid #032035;
|
|
-webkit-transform: translateY(-346.410161514px) rotateX(90deg);
|
|
transform: translateY(-346.410161514px) rotateX(90deg);
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
position: absolute;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
transition: all 0.0s;
|
|
}
|
|
|
|
body .ui_inner__item .item_active__part {
|
|
border-left: 200px solid transparent;
|
|
border-right: 200px solid transparent;
|
|
border-top: 346.410161514px solid #032035;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
body {
|
|
background: #021013;
|
|
overflow: hidden;
|
|
font-family: 'Superguns';
|
|
letter-spacing: 1px;
|
|
margin: 0;
|
|
}
|
|
body .scanlines {
|
|
background-image: repeating-linear-gradient(180deg, transparent, transparent 3px, rgba(224, 167, 167, 0.03) 9px, rgba(255, 255, 255, 0.1) 9px);
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
body .intro_wrap {
|
|
height: 100vh;
|
|
transition: opacity 0.2s 1.7s, left 0.4s 1.7s;
|
|
position: relative;
|
|
left: 0;
|
|
}
|
|
body .intro {
|
|
position: absolute;
|
|
width: 370px;
|
|
left: -530px;
|
|
font-family: 'Nunito', sans-serif;
|
|
right: 0;
|
|
margin: auto;
|
|
text-align: center;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
body .intro img {
|
|
width: 150px;
|
|
margin-top: 17px;
|
|
}
|
|
body .intro .gif {
|
|
margin-top: 14px;
|
|
border: 2px solid white;
|
|
border-radius: 4px;
|
|
width: 250px;
|
|
}
|
|
body .intro h1 {
|
|
color: #bf9a7c;
|
|
font-size: 16px;
|
|
margin: 10px 0 0;
|
|
}
|
|
body .intro h2 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #51b8d8;
|
|
}
|
|
body .intro p {
|
|
color: #c8cdc4;
|
|
font-size: 12px;
|
|
}
|
|
body .ui {
|
|
-webkit-perspective: 1300px;
|
|
perspective: 1300px;
|
|
height: 100%;
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 2.5s 0.3s forwards;
|
|
animation: fadeIn 2.5s 0.3s forwards;
|
|
}
|
|
body .ui #item-6:checked + div {
|
|
opacity: 0;
|
|
left: -100px;
|
|
transition: opacity 0.2s, left 0.4s;
|
|
}
|
|
body .ui #item-6:checked + div + div {
|
|
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
top: -350px;
|
|
left: 0;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item {
|
|
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item label {
|
|
transition: background 0.6s 5s;
|
|
-webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
background: #000000b3;
|
|
width: 160px;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item label span {
|
|
opacity: 1;
|
|
transition: all 0.6s 5s;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:hover .item_top, body .ui #item-6:checked + div + div > .ui_inner__item:hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #033520;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:hover::after, body .ui #item-6:checked + div + div > .ui_inner__item:hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap .item_active:after {
|
|
transition: all 1s 5s;
|
|
opacity: 1;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px);
|
|
transform: translateX(-246px);
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
@-webkit-keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 2.5s forwards;
|
|
animation: fadeIn 0.5s 2.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3s forwards;
|
|
animation: fadeIn 0.5s 3s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3.5s forwards;
|
|
animation: fadeIn 0.5s 3.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4s forwards;
|
|
animation: fadeIn 0.5s 4s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4.5s forwards;
|
|
animation: fadeIn 0.5s 4.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5s forwards;
|
|
animation: fadeIn 0.5s 5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5.5s forwards;
|
|
animation: fadeIn 0.5s 5.5s forwards;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
|
|
-webkit-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 2.5s forwards;
|
|
animation: flip 0.5s 2.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
|
|
-webkit-transform: rotateY(-60deg);
|
|
transform: rotateY(-60deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3s forwards;
|
|
animation: flip 0.5s 3s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
|
|
-webkit-transform: rotateY(-120deg);
|
|
transform: rotateY(-120deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3.5s forwards;
|
|
animation: flip 0.5s 3.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4s forwards;
|
|
animation: flip 0.5s 4s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
|
|
-webkit-transform: rotateY(-240deg);
|
|
transform: rotateY(-240deg);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4.5s forwards;
|
|
animation: flip 0.5s 4.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) {
|
|
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
-webkit-animation: flash-6 0.3s linear;
|
|
animation: flash-6 0.3s linear;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) h2 {
|
|
transition: opacity 0.2s 1.4s;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) .item_top, body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) .item_bottom {
|
|
-webkit-animation: flashTop-6 0.3s linear;
|
|
animation: flashTop-6 0.3s linear;
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(7) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(8) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(9) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(10) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(11) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-6:checked + div + div > .ui_inner__item h2 {
|
|
opacity: 0;
|
|
}
|
|
body .ui #item-5:checked + input + div {
|
|
opacity: 0;
|
|
left: -100px;
|
|
transition: opacity 0.2s, left 0.4s;
|
|
}
|
|
body .ui #item-5:checked + input + div + div {
|
|
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
top: -300px;
|
|
left: 0;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item {
|
|
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item label {
|
|
transition: background 0.6s 5s;
|
|
-webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
background: #000000b3;
|
|
width: 160px;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item label span {
|
|
opacity: 1;
|
|
transition: all 0.6s 5s;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-5:checked + input + div + div > .ui_inner__item:hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #033529;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:hover::after, body .ui #item-5:checked + input + div + div > .ui_inner__item:hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap .item_active:after {
|
|
transition: all 1s 5s;
|
|
opacity: 1;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px);
|
|
transform: translateX(-246px);
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 2.5s forwards;
|
|
animation: fadeIn 0.5s 2.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3s forwards;
|
|
animation: fadeIn 0.5s 3s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3.5s forwards;
|
|
animation: fadeIn 0.5s 3.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4s forwards;
|
|
animation: fadeIn 0.5s 4s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4.5s forwards;
|
|
animation: fadeIn 0.5s 4.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5s forwards;
|
|
animation: fadeIn 0.5s 5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5.5s forwards;
|
|
animation: fadeIn 0.5s 5.5s forwards;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
|
|
-webkit-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 2.5s forwards;
|
|
animation: flip 0.5s 2.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
|
|
-webkit-transform: rotateY(-60deg);
|
|
transform: rotateY(-60deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3s forwards;
|
|
animation: flip 0.5s 3s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
|
|
-webkit-transform: rotateY(-120deg);
|
|
transform: rotateY(-120deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3.5s forwards;
|
|
animation: flip 0.5s 3.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4s forwards;
|
|
animation: flip 0.5s 4s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
|
|
-webkit-transform: rotateY(-240deg);
|
|
transform: rotateY(-240deg);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4.5s forwards;
|
|
animation: flip 0.5s 4.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) {
|
|
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
-webkit-animation: flash-5 0.3s linear;
|
|
animation: flash-5 0.3s linear;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) h2 {
|
|
transition: opacity 0.2s 1.4s;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) .item_top, body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) .item_bottom {
|
|
-webkit-animation: flashTop-5 0.3s linear;
|
|
animation: flashTop-5 0.3s linear;
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(6) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(7) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(8) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(9) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(10) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-5:checked + input + div + div > .ui_inner__item h2 {
|
|
opacity: 0;
|
|
}
|
|
body .ui #item-4:checked + input + input + div {
|
|
opacity: 0;
|
|
left: -100px;
|
|
transition: opacity 0.2s, left 0.4s;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div {
|
|
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
top: -250px;
|
|
left: 0;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item {
|
|
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item label {
|
|
transition: background 0.6s 5s;
|
|
-webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
background: #000000b3;
|
|
width: 160px;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item label span {
|
|
opacity: 1;
|
|
transition: all 0.6s 5s;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #033531;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
|
|
transition: all 1s 5s;
|
|
opacity: 1;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px);
|
|
transform: translateX(-246px);
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 2.5s forwards;
|
|
animation: fadeIn 0.5s 2.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3s forwards;
|
|
animation: fadeIn 0.5s 3s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3.5s forwards;
|
|
animation: fadeIn 0.5s 3.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4s forwards;
|
|
animation: fadeIn 0.5s 4s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4.5s forwards;
|
|
animation: fadeIn 0.5s 4.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5s forwards;
|
|
animation: fadeIn 0.5s 5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5.5s forwards;
|
|
animation: fadeIn 0.5s 5.5s forwards;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
|
|
-webkit-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 2.5s forwards;
|
|
animation: flip 0.5s 2.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
|
|
-webkit-transform: rotateY(-60deg);
|
|
transform: rotateY(-60deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3s forwards;
|
|
animation: flip 0.5s 3s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
|
|
-webkit-transform: rotateY(-120deg);
|
|
transform: rotateY(-120deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3.5s forwards;
|
|
animation: flip 0.5s 3.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4s forwards;
|
|
animation: flip 0.5s 4s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
|
|
-webkit-transform: rotateY(-240deg);
|
|
transform: rotateY(-240deg);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4.5s forwards;
|
|
animation: flip 0.5s 4.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) {
|
|
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
-webkit-animation: flash-4 0.3s linear;
|
|
animation: flash-4 0.3s linear;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) h2 {
|
|
transition: opacity 0.2s 1.4s;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) .item_top, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) .item_bottom {
|
|
-webkit-animation: flashTop-4 0.3s linear;
|
|
animation: flashTop-4 0.3s linear;
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(5) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(6) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(7) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(8) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(9) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-4:checked + input + input + div + div > .ui_inner__item h2 {
|
|
opacity: 0;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div {
|
|
opacity: 0;
|
|
left: -100px;
|
|
transition: opacity 0.2s, left 0.4s;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div {
|
|
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
top: -200px;
|
|
left: 0;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item {
|
|
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item label {
|
|
transition: background 0.6s 5s;
|
|
-webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
background: #000000b3;
|
|
width: 160px;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item label span {
|
|
opacity: 1;
|
|
transition: all 0.6s 5s;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #033135;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
|
|
transition: all 1s 5s;
|
|
opacity: 1;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px);
|
|
transform: translateX(-246px);
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 2.5s forwards;
|
|
animation: fadeIn 0.5s 2.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3s forwards;
|
|
animation: fadeIn 0.5s 3s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3.5s forwards;
|
|
animation: fadeIn 0.5s 3.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4s forwards;
|
|
animation: fadeIn 0.5s 4s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4.5s forwards;
|
|
animation: fadeIn 0.5s 4.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5s forwards;
|
|
animation: fadeIn 0.5s 5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5.5s forwards;
|
|
animation: fadeIn 0.5s 5.5s forwards;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
|
|
-webkit-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 2.5s forwards;
|
|
animation: flip 0.5s 2.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
|
|
-webkit-transform: rotateY(-60deg);
|
|
transform: rotateY(-60deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3s forwards;
|
|
animation: flip 0.5s 3s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
|
|
-webkit-transform: rotateY(-120deg);
|
|
transform: rotateY(-120deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3.5s forwards;
|
|
animation: flip 0.5s 3.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4s forwards;
|
|
animation: flip 0.5s 4s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
|
|
-webkit-transform: rotateY(-240deg);
|
|
transform: rotateY(-240deg);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4.5s forwards;
|
|
animation: flip 0.5s 4.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
|
|
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
-webkit-animation: flash-3 0.3s linear;
|
|
animation: flash-3 0.3s linear;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) h2 {
|
|
transition: opacity 0.2s 1.4s;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) .item_top, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) .item_bottom {
|
|
-webkit-animation: flashTop-3 0.3s linear;
|
|
animation: flashTop-3 0.3s linear;
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(5) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(6) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(7) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(8) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item h2 {
|
|
opacity: 0;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div {
|
|
opacity: 0;
|
|
left: -100px;
|
|
transition: opacity 0.2s, left 0.4s;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div {
|
|
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
top: -150px;
|
|
left: 0;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item {
|
|
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item label {
|
|
transition: background 0.6s 5s;
|
|
-webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
background: #000000b3;
|
|
width: 160px;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item label span {
|
|
opacity: 1;
|
|
transition: all 0.6s 5s;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #032835;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
|
|
transition: all 1s 5s;
|
|
opacity: 1;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px);
|
|
transform: translateX(-246px);
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 2.5s forwards;
|
|
animation: fadeIn 0.5s 2.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3s forwards;
|
|
animation: fadeIn 0.5s 3s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3.5s forwards;
|
|
animation: fadeIn 0.5s 3.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4s forwards;
|
|
animation: fadeIn 0.5s 4s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4.5s forwards;
|
|
animation: fadeIn 0.5s 4.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5s forwards;
|
|
animation: fadeIn 0.5s 5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5.5s forwards;
|
|
animation: fadeIn 0.5s 5.5s forwards;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
|
|
-webkit-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 2.5s forwards;
|
|
animation: flip 0.5s 2.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
|
|
-webkit-transform: rotateY(-60deg);
|
|
transform: rotateY(-60deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3s forwards;
|
|
animation: flip 0.5s 3s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
|
|
-webkit-transform: rotateY(-120deg);
|
|
transform: rotateY(-120deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3.5s forwards;
|
|
animation: flip 0.5s 3.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4s forwards;
|
|
animation: flip 0.5s 4s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
|
|
-webkit-transform: rotateY(-240deg);
|
|
transform: rotateY(-240deg);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4.5s forwards;
|
|
animation: flip 0.5s 4.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) {
|
|
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
-webkit-animation: flash-2 0.3s linear;
|
|
animation: flash-2 0.3s linear;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) h2 {
|
|
transition: opacity 0.2s 1.4s;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) .item_top, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) .item_bottom {
|
|
-webkit-animation: flashTop-2 0.3s linear;
|
|
animation: flashTop-2 0.3s linear;
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(5) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(6) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(7) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item h2 {
|
|
opacity: 0;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div {
|
|
opacity: 0;
|
|
left: -100px;
|
|
transition: opacity 0.2s, left 0.4s;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div {
|
|
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
|
|
top: -100px;
|
|
left: 0;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item {
|
|
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item label {
|
|
transition: background 0.6s 5s;
|
|
-webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
|
|
background: #000000b3;
|
|
width: 160px;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item label span {
|
|
opacity: 1;
|
|
transition: all 0.6s 5s;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #032035;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap .item_active:after {
|
|
transition: all 1s 5s;
|
|
opacity: 1;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
|
|
-webkit-transform: translateX(-246px);
|
|
transform: translateX(-246px);
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 1.7s forwards !important;
|
|
animation: fadeIn 0.5s 1.7s forwards !important;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 2.5s forwards;
|
|
animation: fadeIn 0.5s 2.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3s forwards;
|
|
animation: fadeIn 0.5s 3s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 3.5s forwards;
|
|
animation: fadeIn 0.5s 3.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4s forwards;
|
|
animation: fadeIn 0.5s 4s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 4.5s forwards;
|
|
animation: fadeIn 0.5s 4.5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5s forwards;
|
|
animation: fadeIn 0.5s 5s forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
|
|
-webkit-animation: fadeIn 0.5s 5.5s forwards;
|
|
animation: fadeIn 0.5s 5.5s forwards;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
|
|
-webkit-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 2.5s forwards;
|
|
animation: flip 0.5s 2.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
|
|
-webkit-transform: rotateY(-60deg);
|
|
transform: rotateY(-60deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3s forwards;
|
|
animation: flip 0.5s 3s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
|
|
-webkit-transform: rotateY(-120deg);
|
|
transform: rotateY(-120deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 3.5s forwards;
|
|
animation: flip 0.5s 3.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4s forwards;
|
|
animation: flip 0.5s 4s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
|
|
-webkit-transform: rotateY(-240deg);
|
|
transform: rotateY(-240deg);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
|
|
opacity: 0;
|
|
-webkit-animation: flip 0.5s 4.5s forwards;
|
|
animation: flip 0.5s 4.5s forwards;
|
|
-webkit-backface-visibility: none;
|
|
backface-visibility: none;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) {
|
|
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
transform: translateY(calc(50vh + 100px)) translateX(-200px);
|
|
-webkit-animation: flash-1 0.3s linear;
|
|
animation: flash-1 0.3s linear;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) h2 {
|
|
transition: opacity 0.2s 1.4s;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) .item_top, body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(1) .item_bottom {
|
|
-webkit-animation: flashTop-1 0.3s linear;
|
|
animation: flashTop-1 0.3s linear;
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(5) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item:nth-of-type(6) {
|
|
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
|
|
}
|
|
body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item h2 {
|
|
opacity: 0;
|
|
}
|
|
body .ui input {
|
|
display: none;
|
|
}
|
|
body .ui_inner {
|
|
top: calc(50vh - 130px);
|
|
left: 200px;
|
|
-webkit-transform: rotateY(-10deg);
|
|
transform: rotateY(-10deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
transition: all 2s 0.4s;
|
|
height: 0;
|
|
width: 100%;
|
|
}
|
|
body .ui_inner__item {
|
|
width: 400px;
|
|
height: 40px;
|
|
transition: all 0.6s, -webkit-transform 2s 0.4s;
|
|
transition: all 0.6s, transform 2s 0.4s;
|
|
transition: all 0.6s, transform 2s 0.4s, -webkit-transform 2s 0.4s;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
}
|
|
body .ui_inner__item label {
|
|
position: absolute;
|
|
height: 131%;
|
|
width: 100%;
|
|
display: block;
|
|
background: none;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
transition: background 0.6s 0s;
|
|
text-align: center;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
}
|
|
body .ui_inner__item label span {
|
|
opacity: 0;
|
|
top: 9px;
|
|
position: relative;
|
|
transition: all 0s 0s;
|
|
}
|
|
body .ui_inner__item h2 {
|
|
right: 20px;
|
|
color: #c39d7e;
|
|
-webkit-transform: translateY(-50%) translatez(10px);
|
|
transform: translateY(-50%) translatez(10px);
|
|
transition: opacity 0.2s 0.3s;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
left: auto;
|
|
text-transform: uppercase;
|
|
}
|
|
body .ui_inner__item::after {
|
|
-webkit-transform: rotateY(60deg);
|
|
transform: rotateY(60deg);
|
|
-webkit-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
}
|
|
body .ui_inner__item::before {
|
|
-webkit-transform: rotateY(-60deg);
|
|
transform: rotateY(-60deg);
|
|
-webkit-transform-origin: 100% 0;
|
|
transform-origin: 100% 0;
|
|
}
|
|
body .ui_inner__item .item_bottom {
|
|
-webkit-transform: translateY(-306.410161514px) rotateX(90deg);
|
|
transform: translateY(-306.410161514px) rotateX(90deg);
|
|
}
|
|
body .ui_inner__item .item_wrap {
|
|
-webkit-transform: rotatey(0deg);
|
|
transform: rotatey(0deg);
|
|
-webkit-transform-origin: 400px 100%;
|
|
transform-origin: 400px 100%;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
}
|
|
body .ui_inner__item .item_active {
|
|
-webkit-transform: rotateY(30deg) translateX(-55px) translateZ(-200px);
|
|
transform: rotateY(30deg) translateX(-55px) translateZ(-200px);
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
position: absolute;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
}
|
|
body .ui_inner__item .item_active::after {
|
|
display: block;
|
|
content: '';
|
|
width: 400px;
|
|
height: 30px;
|
|
transition: all 0s 0s;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0px;
|
|
-webkit-transform: rotatex(0deg) rotatez(180deg) translateY(29px) rotateY(30deg) translateX(-748px) translateZ(-200px);
|
|
transform: rotatex(0deg) rotatez(180deg) translateY(29px) rotateY(30deg) translateX(-748px) translateZ(-200px);
|
|
-webkit-transform-origin: 0% 100%;
|
|
transform-origin: 0% 100%;
|
|
}
|
|
body .ui_inner__item .item_active:nth-of-type(1)::after {
|
|
background: #032035;
|
|
}
|
|
body .ui_inner__item .item_active:nth-of-type(2)::after {
|
|
background: #032835;
|
|
}
|
|
body .ui_inner__item .item_active:nth-of-type(3)::after {
|
|
background: #033135;
|
|
}
|
|
body .ui_inner__item .item_active:nth-of-type(4)::after {
|
|
background: #033531;
|
|
}
|
|
body .ui_inner__item .item_active:nth-of-type(5)::after {
|
|
background: #033529;
|
|
}
|
|
body .ui_inner__item .item_active:nth-of-type(6)::after {
|
|
background: #033520;
|
|
}
|
|
body .ui_inner__item .item_active__part {
|
|
-webkit-transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
-webkit-transform-origin: 100% 0;
|
|
transform-origin: 100% 0;
|
|
-webkit-transform-style: preserve-3D;
|
|
transform-style: preserve-3D;
|
|
}
|
|
body .ui_inner__item .item_active__part .nodes {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
border: 3px solid white;
|
|
opacity: 0;
|
|
border-radius: 100px;
|
|
top: -315px;
|
|
left: -132px;
|
|
-webkit-transform: translateZ(1px);
|
|
transform: translateZ(1px);
|
|
}
|
|
body .ui_inner__item .item_active__part h3 {
|
|
position: absolute;
|
|
top: -406.410161514px;
|
|
width: 500px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
text-transform: uppercase;
|
|
-webkit-transform-style: preserve-3D;
|
|
transform-style: preserve-3D;
|
|
-webkit-transform: rotateX(-20deg) rotatey(180deg) translateX(50%);
|
|
transform: rotateX(-20deg) rotatey(180deg) translateX(50%);
|
|
color: #c39d7e;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
font-size: 28px;
|
|
opacity: 0;
|
|
}
|
|
@-webkit-keyframes flip {
|
|
from {
|
|
opacity: 1;
|
|
-webkit-transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
}
|
|
}
|
|
@keyframes flip {
|
|
from {
|
|
opacity: 1;
|
|
-webkit-transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
transform: rotatex(90deg) rotatey(0deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
transform: rotatex(90deg) rotatey(180deg) rotateZ(-30deg) translateX(0px) translateY(0px);
|
|
}
|
|
}
|
|
body .ui_inner__item:nth-of-type(1) {
|
|
top: calc(50% + (0 * 16px) + (40px * 0));
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(1) .nodes {
|
|
box-shadow: 40px 0px 0 -3px #032035, 40px 0px 0px 0px white, 80px 0px 0 -3px #032035, 80px 0px 0px 0px white, 120px 0px 0 -3px #032035, 120px 0px 0px 0px white, 160px 0px 0 -3px #032035, 160px 0px 0px 0px white, 200px 0px 0 -3px #032035, 200px 0px 0px 0px white, 240px 0px 0 -3px #032035, 240px 0px 0px 0px white, 20px 40px 0 -3px #032035, 20px 40px 0px 0px white, 60px 40px 0 -3px #032035, 60px 40px 0px 0px white, 100px 40px 0 -3px #032035, 100px 40px 0px 0px white, 140px 40px 0 -3px #032035, 140px 40px 0px 0px white, 180px 40px 0 -3px #032035, 180px 40px 0px 0px white, 220px 40px 0 -3px #032035, 220px 40px 0px 0px white, 40px 80px 0 -3px #032035, 40px 80px 0px 0px white, 80px 80px 0 -3px #032035, 80px 80px 0px 0px white, 120px 80px 0 -3px #032035, 120px 80px 0px 0px white, 160px 80px 0 -3px #032035, 160px 80px 0px 0px white, 200px 80px 0 -3px #032035, 200px 80px 0px 0px white, 60px 120px 0 -3px #032035, 60px 120px 0px 0px white, 100px 120px 0 -3px #032035, 100px 120px 0px 0px white, 140px 120px 0 -3px #032035, 140px 120px 0px 0px white, 180px 120px 0 -3px #032035, 180px 120px 0px 0px white, 80px 160px 0 -3px #032035, 80px 160px 0px 0px white, 120px 160px 0 -3px #032035, 120px 160px 0px 0px white, 160px 160px 0 -3px #032035, 160px 160px 0px 0px white, 100px 200px 0 -3px #032035, 100px 200px 0px 0px white, 140px 200px 0 -3px #032035, 140px 200px 0px 0px white, 120px 240px 0 -3px #032035, 120px 240px 0px 0px white;
|
|
}
|
|
@-webkit-keyframes flash-1 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@keyframes flash-1 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@-webkit-keyframes flashTop-1 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #032035;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #032035;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
@keyframes flashTop-1 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #032035;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #032035;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
body .ui_inner__item:nth-of-type(1)::after, body .ui_inner__item:nth-of-type(1)::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032035 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(1) .item_top, body .ui_inner__item:nth-of-type(1) .item_bottom {
|
|
border-bottom: 346.410161514px solid #032035;
|
|
}
|
|
body .ui_inner__item:nth-of-type(1) .item_active__part {
|
|
border-top: 346.410161514px solid #032035;
|
|
}
|
|
body .ui_inner__item:nth-of-type(1):hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(1):hover::after, body .ui_inner__item:nth-of-type(1):hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(1):hover .item_top, body .ui_inner__item:nth-of-type(1):hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
body .ui_inner__item:nth-of-type(2) {
|
|
top: calc(50% + (1 * 16px) + (40px * 1));
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(2) .nodes {
|
|
box-shadow: 40px 0px 0 -3px #032835, 40px 0px 0px 0px white, 80px 0px 0 -3px #032835, 80px 0px 0px 0px white, 120px 0px 0 -3px #032835, 120px 0px 0px 0px white, 160px 0px 0 -3px #032835, 160px 0px 0px 0px white, 200px 0px 0 -3px #032835, 200px 0px 0px 0px white, 240px 0px 0 -3px #032835, 240px 0px 0px 0px white, 20px 40px 0 -3px #032835, 20px 40px 0px 0px white, 60px 40px 0 -3px #032835, 60px 40px 0px 0px white, 100px 40px 0 -3px #032835, 100px 40px 0px 0px white, 140px 40px 0 -3px #032835, 140px 40px 0px 0px white, 180px 40px 0 -3px #032835, 180px 40px 0px 0px white, 220px 40px 0 -3px #032835, 220px 40px 0px 0px white, 40px 80px 0 -3px #032835, 40px 80px 0px 0px white, 80px 80px 0 -3px #032835, 80px 80px 0px 0px white, 120px 80px 0 -3px #032835, 120px 80px 0px 0px white, 160px 80px 0 -3px #032835, 160px 80px 0px 0px white, 200px 80px 0 -3px #032835, 200px 80px 0px 0px white, 60px 120px 0 -3px #032835, 60px 120px 0px 0px white, 100px 120px 0 -3px #032835, 100px 120px 0px 0px white, 140px 120px 0 -3px #032835, 140px 120px 0px 0px white, 180px 120px 0 -3px #032835, 180px 120px 0px 0px white, 80px 160px 0 -3px #032835, 80px 160px 0px 0px white, 120px 160px 0 -3px #032835, 120px 160px 0px 0px white, 160px 160px 0 -3px #032835, 160px 160px 0px 0px white, 100px 200px 0 -3px #032835, 100px 200px 0px 0px white, 140px 200px 0 -3px #032835, 140px 200px 0px 0px white, 120px 240px 0 -3px #032835, 120px 240px 0px 0px white;
|
|
}
|
|
@-webkit-keyframes flash-2 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@keyframes flash-2 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@-webkit-keyframes flashTop-2 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #032835;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #032835;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
@keyframes flashTop-2 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #032835;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #032835;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
body .ui_inner__item:nth-of-type(2)::after, body .ui_inner__item:nth-of-type(2)::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(2) .item_top, body .ui_inner__item:nth-of-type(2) .item_bottom {
|
|
border-bottom: 346.410161514px solid #032835;
|
|
}
|
|
body .ui_inner__item:nth-of-type(2) .item_active__part {
|
|
border-top: 346.410161514px solid #032835;
|
|
}
|
|
body .ui_inner__item:nth-of-type(2):hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(2):hover::after, body .ui_inner__item:nth-of-type(2):hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(2):hover .item_top, body .ui_inner__item:nth-of-type(2):hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
body .ui_inner__item:nth-of-type(3) {
|
|
top: calc(50% + (2 * 16px) + (40px * 2));
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(3) .nodes {
|
|
box-shadow: 40px 0px 0 -3px #033135, 40px 0px 0px 0px white, 80px 0px 0 -3px #033135, 80px 0px 0px 0px white, 120px 0px 0 -3px #033135, 120px 0px 0px 0px white, 160px 0px 0 -3px #033135, 160px 0px 0px 0px white, 200px 0px 0 -3px #033135, 200px 0px 0px 0px white, 240px 0px 0 -3px #033135, 240px 0px 0px 0px white, 20px 40px 0 -3px #033135, 20px 40px 0px 0px white, 60px 40px 0 -3px #033135, 60px 40px 0px 0px white, 100px 40px 0 -3px #033135, 100px 40px 0px 0px white, 140px 40px 0 -3px #033135, 140px 40px 0px 0px white, 180px 40px 0 -3px #033135, 180px 40px 0px 0px white, 220px 40px 0 -3px #033135, 220px 40px 0px 0px white, 40px 80px 0 -3px #033135, 40px 80px 0px 0px white, 80px 80px 0 -3px #033135, 80px 80px 0px 0px white, 120px 80px 0 -3px #033135, 120px 80px 0px 0px white, 160px 80px 0 -3px #033135, 160px 80px 0px 0px white, 200px 80px 0 -3px #033135, 200px 80px 0px 0px white, 60px 120px 0 -3px #033135, 60px 120px 0px 0px white, 100px 120px 0 -3px #033135, 100px 120px 0px 0px white, 140px 120px 0 -3px #033135, 140px 120px 0px 0px white, 180px 120px 0 -3px #033135, 180px 120px 0px 0px white, 80px 160px 0 -3px #033135, 80px 160px 0px 0px white, 120px 160px 0 -3px #033135, 120px 160px 0px 0px white, 160px 160px 0 -3px #033135, 160px 160px 0px 0px white, 100px 200px 0 -3px #033135, 100px 200px 0px 0px white, 140px 200px 0 -3px #033135, 140px 200px 0px 0px white, 120px 240px 0 -3px #033135, 120px 240px 0px 0px white;
|
|
}
|
|
@-webkit-keyframes flash-3 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@keyframes flash-3 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@-webkit-keyframes flashTop-3 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033135;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033135;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
@keyframes flashTop-3 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033135;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033135;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
body .ui_inner__item:nth-of-type(3)::after, body .ui_inner__item:nth-of-type(3)::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(3) .item_top, body .ui_inner__item:nth-of-type(3) .item_bottom {
|
|
border-bottom: 346.410161514px solid #033135;
|
|
}
|
|
body .ui_inner__item:nth-of-type(3) .item_active__part {
|
|
border-top: 346.410161514px solid #033135;
|
|
}
|
|
body .ui_inner__item:nth-of-type(3):hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(3):hover::after, body .ui_inner__item:nth-of-type(3):hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(3):hover .item_top, body .ui_inner__item:nth-of-type(3):hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
body .ui_inner__item:nth-of-type(4) {
|
|
top: calc(50% + (3 * 16px) + (40px * 3));
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(4) .nodes {
|
|
box-shadow: 40px 0px 0 -3px #033531, 40px 0px 0px 0px white, 80px 0px 0 -3px #033531, 80px 0px 0px 0px white, 120px 0px 0 -3px #033531, 120px 0px 0px 0px white, 160px 0px 0 -3px #033531, 160px 0px 0px 0px white, 200px 0px 0 -3px #033531, 200px 0px 0px 0px white, 240px 0px 0 -3px #033531, 240px 0px 0px 0px white, 20px 40px 0 -3px #033531, 20px 40px 0px 0px white, 60px 40px 0 -3px #033531, 60px 40px 0px 0px white, 100px 40px 0 -3px #033531, 100px 40px 0px 0px white, 140px 40px 0 -3px #033531, 140px 40px 0px 0px white, 180px 40px 0 -3px #033531, 180px 40px 0px 0px white, 220px 40px 0 -3px #033531, 220px 40px 0px 0px white, 40px 80px 0 -3px #033531, 40px 80px 0px 0px white, 80px 80px 0 -3px #033531, 80px 80px 0px 0px white, 120px 80px 0 -3px #033531, 120px 80px 0px 0px white, 160px 80px 0 -3px #033531, 160px 80px 0px 0px white, 200px 80px 0 -3px #033531, 200px 80px 0px 0px white, 60px 120px 0 -3px #033531, 60px 120px 0px 0px white, 100px 120px 0 -3px #033531, 100px 120px 0px 0px white, 140px 120px 0 -3px #033531, 140px 120px 0px 0px white, 180px 120px 0 -3px #033531, 180px 120px 0px 0px white, 80px 160px 0 -3px #033531, 80px 160px 0px 0px white, 120px 160px 0 -3px #033531, 120px 160px 0px 0px white, 160px 160px 0 -3px #033531, 160px 160px 0px 0px white, 100px 200px 0 -3px #033531, 100px 200px 0px 0px white, 140px 200px 0 -3px #033531, 140px 200px 0px 0px white, 120px 240px 0 -3px #033531, 120px 240px 0px 0px white;
|
|
}
|
|
@-webkit-keyframes flash-4 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@keyframes flash-4 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@-webkit-keyframes flashTop-4 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033531;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033531;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
@keyframes flashTop-4 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033531;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033531;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
body .ui_inner__item:nth-of-type(4)::after, body .ui_inner__item:nth-of-type(4)::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(4) .item_top, body .ui_inner__item:nth-of-type(4) .item_bottom {
|
|
border-bottom: 346.410161514px solid #033531;
|
|
}
|
|
body .ui_inner__item:nth-of-type(4) .item_active__part {
|
|
border-top: 346.410161514px solid #033531;
|
|
}
|
|
body .ui_inner__item:nth-of-type(4):hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(4):hover::after, body .ui_inner__item:nth-of-type(4):hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(4):hover .item_top, body .ui_inner__item:nth-of-type(4):hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
body .ui_inner__item:nth-of-type(5) {
|
|
top: calc(50% + (4 * 16px) + (40px * 4));
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(5) .nodes {
|
|
box-shadow: 40px 0px 0 -3px #033529, 40px 0px 0px 0px white, 80px 0px 0 -3px #033529, 80px 0px 0px 0px white, 120px 0px 0 -3px #033529, 120px 0px 0px 0px white, 160px 0px 0 -3px #033529, 160px 0px 0px 0px white, 200px 0px 0 -3px #033529, 200px 0px 0px 0px white, 240px 0px 0 -3px #033529, 240px 0px 0px 0px white, 20px 40px 0 -3px #033529, 20px 40px 0px 0px white, 60px 40px 0 -3px #033529, 60px 40px 0px 0px white, 100px 40px 0 -3px #033529, 100px 40px 0px 0px white, 140px 40px 0 -3px #033529, 140px 40px 0px 0px white, 180px 40px 0 -3px #033529, 180px 40px 0px 0px white, 220px 40px 0 -3px #033529, 220px 40px 0px 0px white, 40px 80px 0 -3px #033529, 40px 80px 0px 0px white, 80px 80px 0 -3px #033529, 80px 80px 0px 0px white, 120px 80px 0 -3px #033529, 120px 80px 0px 0px white, 160px 80px 0 -3px #033529, 160px 80px 0px 0px white, 200px 80px 0 -3px #033529, 200px 80px 0px 0px white, 60px 120px 0 -3px #033529, 60px 120px 0px 0px white, 100px 120px 0 -3px #033529, 100px 120px 0px 0px white, 140px 120px 0 -3px #033529, 140px 120px 0px 0px white, 180px 120px 0 -3px #033529, 180px 120px 0px 0px white, 80px 160px 0 -3px #033529, 80px 160px 0px 0px white, 120px 160px 0 -3px #033529, 120px 160px 0px 0px white, 160px 160px 0 -3px #033529, 160px 160px 0px 0px white, 100px 200px 0 -3px #033529, 100px 200px 0px 0px white, 140px 200px 0 -3px #033529, 140px 200px 0px 0px white, 120px 240px 0 -3px #033529, 120px 240px 0px 0px white;
|
|
}
|
|
@-webkit-keyframes flash-5 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@keyframes flash-5 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@-webkit-keyframes flashTop-5 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033529;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033529;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
@keyframes flashTop-5 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033529;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033529;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
body .ui_inner__item:nth-of-type(5)::after, body .ui_inner__item:nth-of-type(5)::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(5) .item_top, body .ui_inner__item:nth-of-type(5) .item_bottom {
|
|
border-bottom: 346.410161514px solid #033529;
|
|
}
|
|
body .ui_inner__item:nth-of-type(5) .item_active__part {
|
|
border-top: 346.410161514px solid #033529;
|
|
}
|
|
body .ui_inner__item:nth-of-type(5):hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(5):hover::after, body .ui_inner__item:nth-of-type(5):hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(5):hover .item_top, body .ui_inner__item:nth-of-type(5):hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
body .ui_inner__item:nth-of-type(6) {
|
|
top: calc(50% + (5 * 16px) + (40px * 5));
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(6) .nodes {
|
|
box-shadow: 40px 0px 0 -3px #033520, 40px 0px 0px 0px white, 80px 0px 0 -3px #033520, 80px 0px 0px 0px white, 120px 0px 0 -3px #033520, 120px 0px 0px 0px white, 160px 0px 0 -3px #033520, 160px 0px 0px 0px white, 200px 0px 0 -3px #033520, 200px 0px 0px 0px white, 240px 0px 0 -3px #033520, 240px 0px 0px 0px white, 20px 40px 0 -3px #033520, 20px 40px 0px 0px white, 60px 40px 0 -3px #033520, 60px 40px 0px 0px white, 100px 40px 0 -3px #033520, 100px 40px 0px 0px white, 140px 40px 0 -3px #033520, 140px 40px 0px 0px white, 180px 40px 0 -3px #033520, 180px 40px 0px 0px white, 220px 40px 0 -3px #033520, 220px 40px 0px 0px white, 40px 80px 0 -3px #033520, 40px 80px 0px 0px white, 80px 80px 0 -3px #033520, 80px 80px 0px 0px white, 120px 80px 0 -3px #033520, 120px 80px 0px 0px white, 160px 80px 0 -3px #033520, 160px 80px 0px 0px white, 200px 80px 0 -3px #033520, 200px 80px 0px 0px white, 60px 120px 0 -3px #033520, 60px 120px 0px 0px white, 100px 120px 0 -3px #033520, 100px 120px 0px 0px white, 140px 120px 0 -3px #033520, 140px 120px 0px 0px white, 180px 120px 0 -3px #033520, 180px 120px 0px 0px white, 80px 160px 0 -3px #033520, 80px 160px 0px 0px white, 120px 160px 0 -3px #033520, 120px 160px 0px 0px white, 160px 160px 0 -3px #033520, 160px 160px 0px 0px white, 100px 200px 0 -3px #033520, 100px 200px 0px 0px white, 140px 200px 0 -3px #033520, 140px 200px 0px 0px white, 120px 240px 0 -3px #033520, 120px 240px 0px 0px white;
|
|
}
|
|
@-webkit-keyframes flash-6 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@keyframes flash-6 {
|
|
0% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
25% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
50% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
75% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
100% {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
}
|
|
@-webkit-keyframes flashTop-6 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033520;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033520;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
@keyframes flashTop-6 {
|
|
0% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
25% {
|
|
border-bottom: 346.410161514px solid #033520;
|
|
}
|
|
50% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
75% {
|
|
border-bottom: 346.410161514px solid #033520;
|
|
}
|
|
100% {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|
|
}
|
|
body .ui_inner__item:nth-of-type(6)::after, body .ui_inner__item:nth-of-type(6)::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(6) .item_top, body .ui_inner__item:nth-of-type(6) .item_bottom {
|
|
border-bottom: 346.410161514px solid #033520;
|
|
}
|
|
body .ui_inner__item:nth-of-type(6) .item_active__part {
|
|
border-top: 346.410161514px solid #033520;
|
|
}
|
|
body .ui_inner__item:nth-of-type(6):hover {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(6):hover::after, body .ui_inner__item:nth-of-type(6):hover::before {
|
|
background: -webkit-linear-gradient(left, #021013 30%, #ad988e 70%, #021013 100%);
|
|
}
|
|
body .ui_inner__item:nth-of-type(6):hover .item_top, body .ui_inner__item:nth-of-type(6):hover .item_bottom {
|
|
border-bottom: 346.410161514px solid #ad988e;
|
|
}
|