Hover me
Breake the wall
Breake the wall
Tags:
43 | 0 | 0
Hover me
Breake the wall
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500); html, body { height: 100%; } body { position: relative; margin: 0; font-family: "Roboto", sans-serif; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } *:after, *:before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background-color: #000; perspective: 1000px; } .main:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; z-index: 1; content: ''; opacity: 0.05; } .main .row { position: absolute; width: 100%; left: 0; } .main { overflow: hidden; } .main:hover .item { transform: rotateY(0deg) !important; } .main:hover .msg { opacity: 0; } .item { position: absolute; border: 1px solid rgba(0, 0, 0, 0.5); background-image: url("https://codeshow.io.vn/ckfinder/userfiles/files/photo-1453106037972-08fbfe790762.jpg"); height: 100%; } .item.row1-col1 { transform: rotateX(-24deg) rotateY(17deg) rotateZ(-2deg); -moz-transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out; -o-transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out; -webkit-transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out; transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out; } .item.row1-col2 { transform: rotateX(25deg) rotateY(-23deg) rotateZ(0deg); -moz-transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out; -o-transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out; -webkit-transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out; transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out; } .item.row1-col3 { transform: rotateX(-18deg) rotateY(22deg) rotateZ(2deg); -moz-transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out; -o-transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out; -webkit-transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out; transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out; } .item.row1-col4 { transform: rotateX(-3deg) rotateY(-12deg) rotateZ(-1deg); -moz-transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out; -o-transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out; -webkit-transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out; transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out; } .item.row1-col5 { transform: rotateX(-23deg) rotateY(21deg) rotateZ(0deg); -moz-transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out; -o-transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out; -webkit-transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out; transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out; } .item.row1-col6 { transform: rotateX(-8deg) rotateY(-23deg) rotateZ(2deg); -moz-transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out; -o-transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out; -webkit-transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out; transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out; } .item.row1-col7 { transform: rotateX(-11deg) rotateY(-22deg) rotateZ(2deg); -moz-transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out; -o-transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out; -webkit-transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out; transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out; } .item.row1-col8 { transform: rotateX(15deg) rotateY(-20deg) rotateZ(4deg); -moz-transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out; -o-transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out; -webkit-transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out; transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out; } .item.row1-col9 { transform: rotateX(3deg) rotateY(-10deg) rotateZ(-1deg); -moz-transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out; -o-transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out; -webkit-transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out; transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out; } .item.row1-col10 { transform: rotateX(25deg) rotateY(-22deg) rotateZ(2deg); -moz-transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out; -o-transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out; -webkit-transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out; transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out; } .item.row1-col11 { transform: rotateX(21deg) rotateY(3deg) rotateZ(-2deg); -moz-transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out; -o-transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out; -webkit-transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out; transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out; } .item.row1-col12 { transform: rotateX(-5deg) rotateY(5deg) rotateZ(4deg); -moz-transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out; -o-transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out; -webkit-transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out; transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out; } .item.row1-col13 { transform: rotateX(4deg) rotateY(-14deg) rotateZ(4deg); -moz-transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out; -o-transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out; -webkit-transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out; transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out; } .item.row1-col14 { transform: rotateX(-2deg) rotateY(-22deg) rotateZ(-2deg); -moz-transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out; -o-transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out; -webkit-transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out; transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out; } .item.row1-col15 { transform: rotateX(24deg) rotateY(4deg) rotateZ(-1deg); -moz-transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out; -o-transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out; -webkit-transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out; transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out; } .item.row1-col16 { transform: rotateX(-2deg) rotateY(-7deg) rotateZ(3deg); -moz-transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out; -o-transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out; -webkit-transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out; transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out; } .item.row1-col17 { transform: rotateX(19deg) rotateY(21deg) rotateZ(0deg); -moz-transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out; -o-transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out; -webkit-transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out; transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out; } .item.row1-col18 { transform: rotateX(10deg) rotateY(8deg) rotateZ(1deg); -moz-transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out; -o-transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out; -webkit-transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out; transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out; } .item.row2-col1 { transform: rotateX(13deg) rotateY(3deg) rotateZ(-2deg); -moz-transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out; -o-transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out; -webkit-transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out; transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out; } .item.row2-col2 { transform: rotateX(-21deg) rotateY(20deg) rotateZ(4deg); -moz-transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out; -o-transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out; -webkit-transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out; transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out; } .item.row2-col3 { transform: rotateX(-3deg) rotateY(-8deg) rotateZ(3deg); -moz-transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out; -o-transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out; -webkit-transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out; transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out; } .item.row2-col4 { transform: rotateX(-23deg) rotateY(-1deg) rotateZ(4deg); -moz-transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out; -o-transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out; -webkit-transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out; transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out; } .item.row2-col5 { transform: rotateX(3deg) rotateY(8deg) rotateZ(-3deg); -moz-transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out; -o-transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out; -webkit-transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out; transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out; } .item.row2-col6 { transform: rotateX(17deg) rotateY(-15deg) rotateZ(4deg); -moz-transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out; -o-transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out; -webkit-transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out; } .item.row2-col7 { transform: rotateX(9deg) rotateY(4deg) rotateZ(-2deg); -moz-transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out; -o-transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out; -webkit-transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out; transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out; } .item.row2-col8 { transform: rotateX(21deg) rotateY(-9deg) rotateZ(2deg); -moz-transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out; -o-transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out; -webkit-transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out; transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out; } .item.row2-col9 { transform: rotateX(5deg) rotateY(-23deg) rotateZ(-1deg); -moz-transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out; -o-transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out; -webkit-transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out; transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out; } .item.row2-col10 { transform: rotateX(20deg) rotateY(-2deg) rotateZ(1deg); -moz-transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out; -o-transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out; -webkit-transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out; transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out; } .item.row2-col11 { transform: rotateX(-19deg) rotateY(10deg) rotateZ(3deg); -moz-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; -o-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; -webkit-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; } .item.row2-col12 { transform: rotateX(-4deg) rotateY(-23deg) rotateZ(-2deg); -moz-transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out; -o-transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out; -webkit-transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out; transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out; } .item.row2-col13 { transform: rotateX(8deg) rotateY(18deg) rotateZ(0deg); -moz-transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out; -o-transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out; -webkit-transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out; transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out; } .item.row2-col14 { transform: rotateX(16deg) rotateY(-14deg) rotateZ(-1deg); -moz-transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out; -o-transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out; -webkit-transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out; transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out; } .item.row2-col15 { transform: rotateX(6deg) rotateY(-24deg) rotateZ(-1deg); -moz-transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out; -o-transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out; -webkit-transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out; transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out; } .item.row2-col16 { transform: rotateX(9deg) rotateY(5deg) rotateZ(-3deg); -moz-transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out; -o-transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out; -webkit-transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out; } .item.row2-col17 { transform: rotateX(-7deg) rotateY(22deg) rotateZ(-3deg); -moz-transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out; -o-transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out; -webkit-transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out; transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out; } .item.row2-col18 { transform: rotateX(6deg) rotateY(19deg) rotateZ(2deg); -moz-transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out; -o-transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out; -webkit-transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out; transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out; } .item.row3-col1 { transform: rotateX(-11deg) rotateY(-2deg) rotateZ(1deg); -moz-transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out; -o-transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out; -webkit-transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out; transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out; } .item.row3-col2 { transform: rotateX(-23deg) rotateY(14deg) rotateZ(-2deg); -moz-transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out; -o-transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out; -webkit-transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out; transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out; } .item.row3-col3 { transform: rotateX(23deg) rotateY(-24deg) rotateZ(3deg); -moz-transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out; -o-transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out; -webkit-transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out; transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out; } .item.row3-col4 { transform: rotateX(15deg) rotateY(-9deg) rotateZ(2deg); -moz-transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out; -o-transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out; -webkit-transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out; transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out; } .item.row3-col5 { transform: rotateX(0deg) rotateY(0deg) rotateZ(4deg); -moz-transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out; -o-transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out; -webkit-transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out; transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out; } .item.row3-col6 { transform: rotateX(-7deg) rotateY(23deg) rotateZ(-2deg); -moz-transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out; -o-transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out; -webkit-transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out; transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out; } .item.row3-col7 { transform: rotateX(21deg) rotateY(15deg) rotateZ(3deg); -moz-transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out; -o-transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out; -webkit-transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out; transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out; } .item.row3-col8 { transform: rotateX(22deg) rotateY(-23deg) rotateZ(4deg); -moz-transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out; -o-transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out; -webkit-transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out; transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out; } .item.row3-col9 { transform: rotateX(22deg) rotateY(10deg) rotateZ(2deg); -moz-transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out; -o-transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out; -webkit-transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out; transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out; } .item.row3-col10 { transform: rotateX(-23deg) rotateY(2deg) rotateZ(1deg); -moz-transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out; -o-transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out; -webkit-transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out; transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out; } .item.row3-col11 { transform: rotateX(14deg) rotateY(-13deg) rotateZ(-3deg); -moz-transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out; -o-transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out; -webkit-transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out; transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out; } .item.row3-col12 { transform: rotateX(9deg) rotateY(25deg) rotateZ(4deg); -moz-transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out; -o-transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out; -webkit-transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out; transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out; } .item.row3-col13 { transform: rotateX(-23deg) rotateY(-20deg) rotateZ(-2deg); -moz-transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out; -o-transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out; -webkit-transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out; transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out; } .item.row3-col14 { transform: rotateX(-12deg) rotateY(12deg) rotateZ(2deg); -moz-transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out; -o-transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out; -webkit-transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out; transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out; } .item.row3-col15 { transform: rotateX(-5deg) rotateY(-13deg) rotateZ(1deg); -moz-transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out; -o-transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out; -webkit-transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out; } .item.row3-col16 { transform: rotateX(6deg) rotateY(24deg) rotateZ(4deg); -moz-transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out; -o-transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out; -webkit-transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out; transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out; } .item.row3-col17 { transform: rotateX(13deg) rotateY(20deg) rotateZ(2deg); -moz-transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out; -o-transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out; -webkit-transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out; transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out; } .item.row3-col18 { transform: rotateX(15deg) rotateY(-5deg) rotateZ(-2deg); -moz-transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out; -o-transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out; -webkit-transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out; transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out; } .item.row4-col1 { transform: rotateX(7deg) rotateY(-2deg) rotateZ(1deg); -moz-transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out; -o-transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out; -webkit-transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out; transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out; } .item.row4-col2 { transform: rotateX(-22deg) rotateY(13deg) rotateZ(-2deg); -moz-transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out; -o-transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out; -webkit-transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out; transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out; } .item.row4-col3 { transform: rotateX(12deg) rotateY(12deg) rotateZ(3deg); -moz-transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out; -o-transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out; -webkit-transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out; transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out; } .item.row4-col4 { transform: rotateX(-15deg) rotateY(12deg) rotateZ(2deg); -moz-transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out; -o-transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out; -webkit-transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out; transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out; } .item.row4-col5 { transform: rotateX(1deg) rotateY(-21deg) rotateZ(-3deg); -moz-transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out; -o-transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out; -webkit-transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out; transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out; } .item.row4-col6 { transform: rotateX(21deg) rotateY(2deg) rotateZ(2deg); -moz-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; -o-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; -webkit-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; } .item.row4-col7 { transform: rotateX(-13deg) rotateY(20deg) rotateZ(3deg); -moz-transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out; -o-transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out; -webkit-transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out; transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out; } .item.row4-col8 { transform: rotateX(-14deg) rotateY(22deg) rotateZ(-3deg); -moz-transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out; -o-transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out; -webkit-transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out; transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out; } .item.row4-col9 { transform: rotateX(-17deg) rotateY(14deg) rotateZ(3deg); -moz-transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out; -o-transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out; -webkit-transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out; transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out; } .item.row4-col10 { transform: rotateX(5deg) rotateY(3deg) rotateZ(3deg); -moz-transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out; -o-transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out; -webkit-transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out; transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out; } .item.row4-col11 { transform: rotateX(-18deg) rotateY(-7deg) rotateZ(-2deg); -moz-transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out; -o-transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out; -webkit-transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out; transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out; } .item.row4-col12 { transform: rotateX(-10deg) rotateY(18deg) rotateZ(-1deg); -moz-transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out; -o-transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out; -webkit-transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out; transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out; } .item.row4-col13 { transform: rotateX(-23deg) rotateY(-7deg) rotateZ(3deg); -moz-transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out; -o-transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out; -webkit-transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out; transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out; } .item.row4-col14 { transform: rotateX(-16deg) rotateY(17deg) rotateZ(4deg); -moz-transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out; -o-transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out; -webkit-transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out; transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out; } .item.row4-col15 { transform: rotateX(-18deg) rotateY(-19deg) rotateZ(1deg); -moz-transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out; -o-transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out; -webkit-transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out; transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out; } .item.row4-col16 { transform: rotateX(14deg) rotateY(1deg) rotateZ(-3deg); -moz-transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out; -o-transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out; -webkit-transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out; transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out; } .item.row4-col17 { transform: rotateX(16deg) rotateY(-24deg) rotateZ(1deg); -moz-transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out; -o-transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out; -webkit-transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out; transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out; } .item.row4-col18 { transform: rotateX(23deg) rotateY(24deg) rotateZ(2deg); -moz-transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out; -o-transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out; -webkit-transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out; transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out; } .item.row5-col1 { transform: rotateX(11deg) rotateY(-4deg) rotateZ(2deg); -moz-transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out; -o-transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out; -webkit-transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out; transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out; } .item.row5-col2 { transform: rotateX(-15deg) rotateY(-17deg) rotateZ(4deg); -moz-transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out; -o-transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out; -webkit-transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out; transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out; } .item.row5-col3 { transform: rotateX(-22deg) rotateY(7deg) rotateZ(2deg); -moz-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; -o-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; -webkit-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out; } .item.row5-col4 { transform: rotateX(-14deg) rotateY(-16deg) rotateZ(0deg); -moz-transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out; -o-transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out; -webkit-transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out; transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out; } .item.row5-col5 { transform: rotateX(10deg) rotateY(23deg) rotateZ(1deg); -moz-transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out; -o-transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out; -webkit-transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out; transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out; } .item.row5-col6 { transform: rotateX(23deg) rotateY(-16deg) rotateZ(1deg); -moz-transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out; -o-transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out; -webkit-transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out; transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out; } .item.row5-col7 { transform: rotateX(-1deg) rotateY(2deg) rotateZ(-3deg); -moz-transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out; -o-transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out; -webkit-transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out; transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out; } .item.row5-col8 { transform: rotateX(-4deg) rotateY(-9deg) rotateZ(0deg); -moz-transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out; -o-transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out; -webkit-transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out; transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out; } .item.row5-col9 { transform: rotateX(-7deg) rotateY(2deg) rotateZ(-3deg); -moz-transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out; -o-transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out; -webkit-transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out; transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out; } .item.row5-col10 { transform: rotateX(7deg) rotateY(23deg) rotateZ(-1deg); -moz-transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out; -o-transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out; -webkit-transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out; transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out; } .item.row5-col11 { transform: rotateX(15deg) rotateY(-19deg) rotateZ(-3deg); -moz-transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out; -o-transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out; -webkit-transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out; transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out; } .item.row5-col12 { transform: rotateX(-20deg) rotateY(9deg) rotateZ(3deg); -moz-transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out; -o-transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out; -webkit-transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out; transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out; } .item.row5-col13 { transform: rotateX(-24deg) rotateY(-11deg) rotateZ(3deg); -moz-transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out; -o-transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out; -webkit-transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out; transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out; } .item.row5-col14 { transform: rotateX(24deg) rotateY(-3deg) rotateZ(-1deg); -moz-transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out; -o-transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out; -webkit-transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out; transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out; } .item.row5-col15 { transform: rotateX(-20deg) rotateY(3deg) rotateZ(3deg); -moz-transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out; -o-transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out; -webkit-transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out; transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out; } .item.row5-col16 { transform: rotateX(8deg) rotateY(3deg) rotateZ(0deg); -moz-transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out; -o-transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out; -webkit-transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out; transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out; } .item.row5-col17 { transform: rotateX(-11deg) rotateY(-13deg) rotateZ(-1deg); -moz-transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out; -o-transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out; -webkit-transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out; transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out; } .item.row5-col18 { transform: rotateX(-24deg) rotateY(22deg) rotateZ(-2deg); -moz-transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out; -o-transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out; -webkit-transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out; transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out; } .item.row6-col1 { transform: rotateX(-8deg) rotateY(11deg) rotateZ(-2deg); -moz-transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out; -o-transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out; -webkit-transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out; transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out; } .item.row6-col2 { transform: rotateX(0deg) rotateY(-24deg) rotateZ(4deg); -moz-transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out; -o-transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out; -webkit-transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out; transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out; } .item.row6-col3 { transform: rotateX(23deg) rotateY(0deg) rotateZ(-2deg); -moz-transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out; -o-transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out; -webkit-transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out; transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out; } .item.row6-col4 { transform: rotateX(17deg) rotateY(-6deg) rotateZ(-1deg); -moz-transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out; -o-transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out; -webkit-transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out; transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out; } .item.row6-col5 { transform: rotateX(-18deg) rotateY(-12deg) rotateZ(4deg); -moz-transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out; -o-transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out; -webkit-transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out; transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out; } .item.row6-col6 { transform: rotateX(-15deg) rotateY(-16deg) rotateZ(2deg); -moz-transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out; -o-transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out; -webkit-transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out; transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out; } .item.row6-col7 { transform: rotateX(3deg) rotateY(3deg) rotateZ(2deg); -moz-transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out; -o-transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out; -webkit-transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out; transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out; } .item.row6-col8 { transform: rotateX(20deg) rotateY(8deg) rotateZ(-3deg); -moz-transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out; -o-transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out; -webkit-transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out; transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out; } .item.row6-col9 { transform: rotateX(18deg) rotateY(9deg) rotateZ(-2deg); -moz-transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out; -o-transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out; -webkit-transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out; transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out; } .item.row6-col10 { transform: rotateX(-17deg) rotateY(15deg) rotateZ(-2deg); -moz-transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out; -o-transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out; -webkit-transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out; transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out; } .item.row6-col11 { transform: rotateX(-23deg) rotateY(-12deg) rotateZ(2deg); -moz-transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out; -o-transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out; -webkit-transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out; transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out; } .item.row6-col12 { transform: rotateX(-10deg) rotateY(1deg) rotateZ(-2deg); -moz-transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out; -o-transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out; -webkit-transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out; transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out; } .item.row6-col13 { transform: rotateX(19deg) rotateY(7deg) rotateZ(-3deg); -moz-transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out; -o-transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out; -webkit-transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out; transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out; } .item.row6-col14 { transform: rotateX(17deg) rotateY(-19deg) rotateZ(0deg); -moz-transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out; -o-transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out; -webkit-transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out; transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out; } .item.row6-col15 { transform: rotateX(6deg) rotateY(-3deg) rotateZ(0deg); -moz-transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out; -o-transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out; -webkit-transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out; transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out; } .item.row6-col16 { transform: rotateX(4deg) rotateY(-3deg) rotateZ(1deg); -moz-transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out; -o-transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out; -webkit-transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out; transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out; } .item.row6-col17 { transform: rotateX(-24deg) rotateY(5deg) rotateZ(3deg); -moz-transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out; -o-transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out; -webkit-transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out; transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out; } .item.row6-col18 { transform: rotateX(-8deg) rotateY(-4deg) rotateZ(2deg); -moz-transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out; -o-transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out; -webkit-transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out; transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out; } .msg { position: absolute; color: white; top: 15%; text-align: center; width: 100%; z-index: 111; width: 500px; left: 50%; margin-left: -250px; font-weight: 500; font-size: 38px; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; z-index: 3; } .credits { position: fixed; left: 0; bottom: 0; padding: 2px 15px; background-color: rgba(0, 0, 0, 0.6); width: 100%; z-index: 3; } .credits a { color: #fff; font-size: 13px; text-decoration: none; }
var win_width, win_height; win_width = $(window).width(); win_height = $(window).height(); $('.main').css({ 'background-size': win_width + 'px ' + 'auto' }) $('.item').css({ 'background-size': win_width + 'px ' + 'auto' }) $('.row').each(function() { var pos, item_index, pos_y, total_rows; total_rows = $('.row').length; item_row_index = $(this).index('.row'); pos_y = -win_height / total_rows * item_row_index + 'px'; $(this).css({ 'top': 100 / total_rows * item_row_index + '%', 'height': 100 / total_rows + '%' }) var total_items = $(this).find('.item').length; $(this).find('.item').each(function() { var pos_x; var item_index = $(this).index('.item'); pos_x = -win_width / total_items * item_index + 'px'; $(this).css({ 'background-position': pos_x + ' ' + pos_y, 'left': 100 / total_items * (item_index - total_items * item_row_index ) + '%', 'width': 100 / total_items + '%', }) }) })
Latest Comments section by users