775 lines
21 KiB
CSS
775 lines
21 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");
|
|
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
width: 100%;
|
|
border-bottom: 1px solid #f6f6f6;
|
|
padding: 17px;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all 0.3s;
|
|
color: #54589c;
|
|
cursor: pointer;
|
|
}
|
|
.close:hover {
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
}
|
|
body.open .panel {
|
|
right: 0;
|
|
}
|
|
body.open .grid {
|
|
-webkit-transform: translateX(-450px);
|
|
transform: translateX(-450px);
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
}
|
|
body span {
|
|
font-size: 10px;
|
|
opacity: 0.1;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
}
|
|
|
|
.grid_alt {
|
|
background: #2a3648;
|
|
}
|
|
.grid_alt span {
|
|
color: white;
|
|
}
|
|
.grid_alt .grid_item:hover {
|
|
background: #293340;
|
|
}
|
|
.grid_alt .menu_part {
|
|
background: white !important;
|
|
}
|
|
|
|
.panel {
|
|
overflow-y: scroll;
|
|
width: 450px;
|
|
border-left: 1px solid whitesmoke;
|
|
position: fixed;
|
|
padding: 100px 60px 60px 60px;
|
|
background: white;
|
|
right: -450px;
|
|
height: 100vh;
|
|
top: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
.panel h1,
|
|
.panel h2 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
.panel h2 {
|
|
margin-top: 30px;
|
|
}
|
|
.panel p {
|
|
white-space: pre;
|
|
-moz-tab-size: 2;
|
|
-o-tab-size: 2;
|
|
tab-size: 2;
|
|
font-family: 'Source Code Pro', monospace;
|
|
font-size: 9px;
|
|
font-weight: 100;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.grid,
|
|
.grid_alt {
|
|
transition: all 0.3s;
|
|
overflow: hidden;
|
|
width: 100vw;
|
|
margin: 0 auto;
|
|
padding: 100px;
|
|
}
|
|
.grid_item,
|
|
.grid_alt_item {
|
|
width: 8.3333vw;
|
|
height: 8.3333vw;
|
|
float: left;
|
|
position: relative;
|
|
transition: all 0.5s;
|
|
overflow: hidden;
|
|
}
|
|
@media only screen and (max-width: 1200px) {
|
|
.grid_item,
|
|
.grid_alt_item {
|
|
width: 20vw;
|
|
height: 20vw;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 700px) {
|
|
.grid_item,
|
|
.grid_alt_item {
|
|
width: 25vw;
|
|
height: 25vw;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 400px) {
|
|
.grid_item,
|
|
.grid_alt_item {
|
|
width: 50vw;
|
|
height: 50vw;
|
|
}
|
|
}
|
|
.grid_item:hover i,
|
|
.grid_alt_item:hover i {
|
|
bottom: 20px;
|
|
}
|
|
.grid_item i,
|
|
.grid_alt_item i {
|
|
opacity: 0.1;
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: -20px;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
.grid_item i:hover,
|
|
.grid_alt_item i:hover {
|
|
opacity: 1;
|
|
}
|
|
.grid_item:hover,
|
|
.grid_alt_item:hover {
|
|
background: #f7f7f7;
|
|
}
|
|
.grid_item:nth-of-type(1),
|
|
.grid_alt_item:nth-of-type(1) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.0285714286s forwards;
|
|
animation: fadeIn 1s 0.0285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(2),
|
|
.grid_alt_item:nth-of-type(2) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.0571428571s forwards;
|
|
animation: fadeIn 1s 0.0571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(3),
|
|
.grid_alt_item:nth-of-type(3) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.0857142857s forwards;
|
|
animation: fadeIn 1s 0.0857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(4),
|
|
.grid_alt_item:nth-of-type(4) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.1142857143s forwards;
|
|
animation: fadeIn 1s 0.1142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(5),
|
|
.grid_alt_item:nth-of-type(5) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.1428571429s forwards;
|
|
animation: fadeIn 1s 0.1428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(6),
|
|
.grid_alt_item:nth-of-type(6) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.1714285714s forwards;
|
|
animation: fadeIn 1s 0.1714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(7),
|
|
.grid_alt_item:nth-of-type(7) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.2s forwards;
|
|
animation: fadeIn 1s 0.2s forwards;
|
|
}
|
|
.grid_item:nth-of-type(8),
|
|
.grid_alt_item:nth-of-type(8) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.2285714286s forwards;
|
|
animation: fadeIn 1s 0.2285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(9),
|
|
.grid_alt_item:nth-of-type(9) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.2571428571s forwards;
|
|
animation: fadeIn 1s 0.2571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(10),
|
|
.grid_alt_item:nth-of-type(10) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.2857142857s forwards;
|
|
animation: fadeIn 1s 0.2857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(11),
|
|
.grid_alt_item:nth-of-type(11) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.3142857143s forwards;
|
|
animation: fadeIn 1s 0.3142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(12),
|
|
.grid_alt_item:nth-of-type(12) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.3428571429s forwards;
|
|
animation: fadeIn 1s 0.3428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(13),
|
|
.grid_alt_item:nth-of-type(13) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.3714285714s forwards;
|
|
animation: fadeIn 1s 0.3714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(14),
|
|
.grid_alt_item:nth-of-type(14) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.4s forwards;
|
|
animation: fadeIn 1s 0.4s forwards;
|
|
}
|
|
.grid_item:nth-of-type(15),
|
|
.grid_alt_item:nth-of-type(15) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.4285714286s forwards;
|
|
animation: fadeIn 1s 0.4285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(16),
|
|
.grid_alt_item:nth-of-type(16) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.4571428571s forwards;
|
|
animation: fadeIn 1s 0.4571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(17),
|
|
.grid_alt_item:nth-of-type(17) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.4857142857s forwards;
|
|
animation: fadeIn 1s 0.4857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(18),
|
|
.grid_alt_item:nth-of-type(18) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.5142857143s forwards;
|
|
animation: fadeIn 1s 0.5142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(19),
|
|
.grid_alt_item:nth-of-type(19) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.5428571429s forwards;
|
|
animation: fadeIn 1s 0.5428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(20),
|
|
.grid_alt_item:nth-of-type(20) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.5714285714s forwards;
|
|
animation: fadeIn 1s 0.5714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(21),
|
|
.grid_alt_item:nth-of-type(21) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.6s forwards;
|
|
animation: fadeIn 1s 0.6s forwards;
|
|
}
|
|
.grid_item:nth-of-type(22),
|
|
.grid_alt_item:nth-of-type(22) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.6285714286s forwards;
|
|
animation: fadeIn 1s 0.6285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(23),
|
|
.grid_alt_item:nth-of-type(23) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.6571428571s forwards;
|
|
animation: fadeIn 1s 0.6571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(24),
|
|
.grid_alt_item:nth-of-type(24) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.6857142857s forwards;
|
|
animation: fadeIn 1s 0.6857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(25),
|
|
.grid_alt_item:nth-of-type(25) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.7142857143s forwards;
|
|
animation: fadeIn 1s 0.7142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(26),
|
|
.grid_alt_item:nth-of-type(26) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.7428571429s forwards;
|
|
animation: fadeIn 1s 0.7428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(27),
|
|
.grid_alt_item:nth-of-type(27) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.7714285714s forwards;
|
|
animation: fadeIn 1s 0.7714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(28),
|
|
.grid_alt_item:nth-of-type(28) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.8s forwards;
|
|
animation: fadeIn 1s 0.8s forwards;
|
|
}
|
|
.grid_item:nth-of-type(29),
|
|
.grid_alt_item:nth-of-type(29) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.8285714286s forwards;
|
|
animation: fadeIn 1s 0.8285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(30),
|
|
.grid_alt_item:nth-of-type(30) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.8571428571s forwards;
|
|
animation: fadeIn 1s 0.8571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(31),
|
|
.grid_alt_item:nth-of-type(31) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.8857142857s forwards;
|
|
animation: fadeIn 1s 0.8857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(32),
|
|
.grid_alt_item:nth-of-type(32) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.9142857143s forwards;
|
|
animation: fadeIn 1s 0.9142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(33),
|
|
.grid_alt_item:nth-of-type(33) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.9428571429s forwards;
|
|
animation: fadeIn 1s 0.9428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(34),
|
|
.grid_alt_item:nth-of-type(34) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 0.9714285714s forwards;
|
|
animation: fadeIn 1s 0.9714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(35),
|
|
.grid_alt_item:nth-of-type(35) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1s forwards;
|
|
animation: fadeIn 1s 1s forwards;
|
|
}
|
|
.grid_item:nth-of-type(36),
|
|
.grid_alt_item:nth-of-type(36) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.0285714286s forwards;
|
|
animation: fadeIn 1s 1.0285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(37),
|
|
.grid_alt_item:nth-of-type(37) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.0571428571s forwards;
|
|
animation: fadeIn 1s 1.0571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(38),
|
|
.grid_alt_item:nth-of-type(38) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.0857142857s forwards;
|
|
animation: fadeIn 1s 1.0857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(39),
|
|
.grid_alt_item:nth-of-type(39) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.1142857143s forwards;
|
|
animation: fadeIn 1s 1.1142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(40),
|
|
.grid_alt_item:nth-of-type(40) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.1428571429s forwards;
|
|
animation: fadeIn 1s 1.1428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(41),
|
|
.grid_alt_item:nth-of-type(41) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.1714285714s forwards;
|
|
animation: fadeIn 1s 1.1714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(42),
|
|
.grid_alt_item:nth-of-type(42) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.2s forwards;
|
|
animation: fadeIn 1s 1.2s forwards;
|
|
}
|
|
.grid_item:nth-of-type(43),
|
|
.grid_alt_item:nth-of-type(43) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.2285714286s forwards;
|
|
animation: fadeIn 1s 1.2285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(44),
|
|
.grid_alt_item:nth-of-type(44) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.2571428571s forwards;
|
|
animation: fadeIn 1s 1.2571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(45),
|
|
.grid_alt_item:nth-of-type(45) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.2857142857s forwards;
|
|
animation: fadeIn 1s 1.2857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(46),
|
|
.grid_alt_item:nth-of-type(46) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.3142857143s forwards;
|
|
animation: fadeIn 1s 1.3142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(47),
|
|
.grid_alt_item:nth-of-type(47) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.3428571429s forwards;
|
|
animation: fadeIn 1s 1.3428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(48),
|
|
.grid_alt_item:nth-of-type(48) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.3714285714s forwards;
|
|
animation: fadeIn 1s 1.3714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(49),
|
|
.grid_alt_item:nth-of-type(49) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.4s forwards;
|
|
animation: fadeIn 1s 1.4s forwards;
|
|
}
|
|
.grid_item:nth-of-type(50),
|
|
.grid_alt_item:nth-of-type(50) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.4285714286s forwards;
|
|
animation: fadeIn 1s 1.4285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(51),
|
|
.grid_alt_item:nth-of-type(51) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.4571428571s forwards;
|
|
animation: fadeIn 1s 1.4571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(52),
|
|
.grid_alt_item:nth-of-type(52) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.4857142857s forwards;
|
|
animation: fadeIn 1s 1.4857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(53),
|
|
.grid_alt_item:nth-of-type(53) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.5142857143s forwards;
|
|
animation: fadeIn 1s 1.5142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(54),
|
|
.grid_alt_item:nth-of-type(54) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.5428571429s forwards;
|
|
animation: fadeIn 1s 1.5428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(55),
|
|
.grid_alt_item:nth-of-type(55) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.5714285714s forwards;
|
|
animation: fadeIn 1s 1.5714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(56),
|
|
.grid_alt_item:nth-of-type(56) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.6s forwards;
|
|
animation: fadeIn 1s 1.6s forwards;
|
|
}
|
|
.grid_item:nth-of-type(57),
|
|
.grid_alt_item:nth-of-type(57) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.6285714286s forwards;
|
|
animation: fadeIn 1s 1.6285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(58),
|
|
.grid_alt_item:nth-of-type(58) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.6571428571s forwards;
|
|
animation: fadeIn 1s 1.6571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(59),
|
|
.grid_alt_item:nth-of-type(59) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.6857142857s forwards;
|
|
animation: fadeIn 1s 1.6857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(60),
|
|
.grid_alt_item:nth-of-type(60) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.7142857143s forwards;
|
|
animation: fadeIn 1s 1.7142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(61),
|
|
.grid_alt_item:nth-of-type(61) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.7428571429s forwards;
|
|
animation: fadeIn 1s 1.7428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(62),
|
|
.grid_alt_item:nth-of-type(62) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.7714285714s forwards;
|
|
animation: fadeIn 1s 1.7714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(63),
|
|
.grid_alt_item:nth-of-type(63) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.8s forwards;
|
|
animation: fadeIn 1s 1.8s forwards;
|
|
}
|
|
.grid_item:nth-of-type(64),
|
|
.grid_alt_item:nth-of-type(64) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.8285714286s forwards;
|
|
animation: fadeIn 1s 1.8285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(65),
|
|
.grid_alt_item:nth-of-type(65) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.8571428571s forwards;
|
|
animation: fadeIn 1s 1.8571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(66),
|
|
.grid_alt_item:nth-of-type(66) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.8857142857s forwards;
|
|
animation: fadeIn 1s 1.8857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(67),
|
|
.grid_alt_item:nth-of-type(67) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.9142857143s forwards;
|
|
animation: fadeIn 1s 1.9142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(68),
|
|
.grid_alt_item:nth-of-type(68) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.9428571429s forwards;
|
|
animation: fadeIn 1s 1.9428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(69),
|
|
.grid_alt_item:nth-of-type(69) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 1.9714285714s forwards;
|
|
animation: fadeIn 1s 1.9714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(70),
|
|
.grid_alt_item:nth-of-type(70) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2s forwards;
|
|
animation: fadeIn 1s 2s forwards;
|
|
}
|
|
.grid_item:nth-of-type(71),
|
|
.grid_alt_item:nth-of-type(71) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.0285714286s forwards;
|
|
animation: fadeIn 1s 2.0285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(72),
|
|
.grid_alt_item:nth-of-type(72) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.0571428571s forwards;
|
|
animation: fadeIn 1s 2.0571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(73),
|
|
.grid_alt_item:nth-of-type(73) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.0857142857s forwards;
|
|
animation: fadeIn 1s 2.0857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(74),
|
|
.grid_alt_item:nth-of-type(74) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.1142857143s forwards;
|
|
animation: fadeIn 1s 2.1142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(75),
|
|
.grid_alt_item:nth-of-type(75) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.1428571429s forwards;
|
|
animation: fadeIn 1s 2.1428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(76),
|
|
.grid_alt_item:nth-of-type(76) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.1714285714s forwards;
|
|
animation: fadeIn 1s 2.1714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(77),
|
|
.grid_alt_item:nth-of-type(77) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.2s forwards;
|
|
animation: fadeIn 1s 2.2s forwards;
|
|
}
|
|
.grid_item:nth-of-type(78),
|
|
.grid_alt_item:nth-of-type(78) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.2285714286s forwards;
|
|
animation: fadeIn 1s 2.2285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(79),
|
|
.grid_alt_item:nth-of-type(79) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.2571428571s forwards;
|
|
animation: fadeIn 1s 2.2571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(80),
|
|
.grid_alt_item:nth-of-type(80) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.2857142857s forwards;
|
|
animation: fadeIn 1s 2.2857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(81),
|
|
.grid_alt_item:nth-of-type(81) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.3142857143s forwards;
|
|
animation: fadeIn 1s 2.3142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(82),
|
|
.grid_alt_item:nth-of-type(82) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.3428571429s forwards;
|
|
animation: fadeIn 1s 2.3428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(83),
|
|
.grid_alt_item:nth-of-type(83) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.3714285714s forwards;
|
|
animation: fadeIn 1s 2.3714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(84),
|
|
.grid_alt_item:nth-of-type(84) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.4s forwards;
|
|
animation: fadeIn 1s 2.4s forwards;
|
|
}
|
|
.grid_item:nth-of-type(85),
|
|
.grid_alt_item:nth-of-type(85) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.4285714286s forwards;
|
|
animation: fadeIn 1s 2.4285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(86),
|
|
.grid_alt_item:nth-of-type(86) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.4571428571s forwards;
|
|
animation: fadeIn 1s 2.4571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(87),
|
|
.grid_alt_item:nth-of-type(87) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.4857142857s forwards;
|
|
animation: fadeIn 1s 2.4857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(88),
|
|
.grid_alt_item:nth-of-type(88) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.5142857143s forwards;
|
|
animation: fadeIn 1s 2.5142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(89),
|
|
.grid_alt_item:nth-of-type(89) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.5428571429s forwards;
|
|
animation: fadeIn 1s 2.5428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(90),
|
|
.grid_alt_item:nth-of-type(90) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.5714285714s forwards;
|
|
animation: fadeIn 1s 2.5714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(91),
|
|
.grid_alt_item:nth-of-type(91) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.6s forwards;
|
|
animation: fadeIn 1s 2.6s forwards;
|
|
}
|
|
.grid_item:nth-of-type(92),
|
|
.grid_alt_item:nth-of-type(92) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.6285714286s forwards;
|
|
animation: fadeIn 1s 2.6285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(93),
|
|
.grid_alt_item:nth-of-type(93) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.6571428571s forwards;
|
|
animation: fadeIn 1s 2.6571428571s forwards;
|
|
}
|
|
.grid_item:nth-of-type(94),
|
|
.grid_alt_item:nth-of-type(94) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.6857142857s forwards;
|
|
animation: fadeIn 1s 2.6857142857s forwards;
|
|
}
|
|
.grid_item:nth-of-type(95),
|
|
.grid_alt_item:nth-of-type(95) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.7142857143s forwards;
|
|
animation: fadeIn 1s 2.7142857143s forwards;
|
|
}
|
|
.grid_item:nth-of-type(96),
|
|
.grid_alt_item:nth-of-type(96) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.7428571429s forwards;
|
|
animation: fadeIn 1s 2.7428571429s forwards;
|
|
}
|
|
.grid_item:nth-of-type(97),
|
|
.grid_alt_item:nth-of-type(97) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.7714285714s forwards;
|
|
animation: fadeIn 1s 2.7714285714s forwards;
|
|
}
|
|
.grid_item:nth-of-type(98),
|
|
.grid_alt_item:nth-of-type(98) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.8s forwards;
|
|
animation: fadeIn 1s 2.8s forwards;
|
|
}
|
|
.grid_item:nth-of-type(99),
|
|
.grid_alt_item:nth-of-type(99) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.8285714286s forwards;
|
|
animation: fadeIn 1s 2.8285714286s forwards;
|
|
}
|
|
.grid_item:nth-of-type(100),
|
|
.grid_alt_item:nth-of-type(100) {
|
|
opacity: 0;
|
|
-webkit-animation: fadeIn 1s 2.8571428571s forwards;
|
|
animation: fadeIn 1s 2.8571428571s forwards;
|
|
}
|
|
.grid_item__inner,
|
|
.grid_alt_item__inner {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
top: 50%;
|
|
-webkit-transform: translatey(-50%);
|
|
transform: translatey(-50%);
|
|
text-align: center;
|
|
}
|
|
.grid_item__inner .menu:hover,
|
|
.grid_alt_item__inner .menu:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|