CSS File

1.gridzy{display:block;will-change:width,height}

2.gridzy>.gridzyItem{will-change:left,top,width,height,opacity,transform}

3.gridzy>:not(.gridzyItem){visibility:hidden}

4.gridzyItemHidden{display:none}

5.gridzy .gridzyImage{vertical-align:middle;width:100%;height:100%}

6.gridzyAnimated{height:0;transition:height .4s}

7.gridzyAnimated .gridzyItem{transition:all .4s}

8.gridzyAnimated .gridzyItemInitialToVisible{animation-name:gridzyItemInitialToVisibleAnimation;animation-fill-mode:forwards;animation-duration:.4s}

9@keyframes gridzyItemInitialToVisibleAnimation{0%{opacity:0;transform:scale(.9)}

10100%{opacity:1;transform:scale(1)}

11}

12.gridzyAnimated .gridzyItemHiddenToVisible{animation-name:gridzyItemHiddenToVisibleAnimation;animation-fill-mode:forwards;animation-duration:.4s}

13@keyframes gridzyItemHiddenToVisibleAnimation{0%{opacity:0;transform:scale(.9)}

14100%{opacity:1;transform:scale(1)}

15}

16.gridzyAnimated .gridzyItemVisibleToHidden{animation-name:gridzyItemVisibleToHiddenAnimation;animation-fill-mode:forwards;animation-duration:.4s}

17@keyframes gridzyItemVisibleToHiddenAnimation{0%{opacity:1;transform:scale(1)}

18100%{opacity:0;transform:scale(.9)}

19}

20.gridzyItem{opacity:1}

21.gridzyItemLoading{opacity:.3;box-shadow:inset 0 0 15px -5px #666}

22.gridzyItemLoading::before{content:" ";position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;padding:0;z-index:1;opacity:1;background:0 0;border:2px solid;border-color:transparent transparent #000 #000;border-radius:50%;outline:0;animation-duration:1s;animation-name:gridzyProgressIndicator;animation-iteration-count:infinite;animation-timing-function:linear}

23@keyframes gridzyProgressIndicator{0%{transform:rotate(0);left:50%}

24100%{transform:rotate(360deg);left:50%}

25}