.slide.slide--two { padding: 40px 0 40px 0; margin: -140px 0 0 0; } .dapps { margin: 50px auto 30px; width: 880px; display: flex; flex-wrap: wrap; align-content:flex-start; justify-content: space-between; } .dapp { display: block; text-decoration: none; width: 25%; opacity: 0; transform: translate3d(0, 20px, 0); transition: transform .6s ease, opacity .4s ease; transition-delay: .1s; } .dapp:nth-child(2) { transition-delay: .2s; } .dapp:nth-child(3) { transition-delay: .3s; } .dapp:nth-child(4) { transition-delay: .4s; } .dapp:nth-child(5) { transition-delay: .5s; } .dapp:nth-child(6) { transition-delay: .6s; } .dapp:nth-child(7) { transition-delay: .7s; } .dapp:nth-child(8) { transition-delay: 1s; } .slide--shown .dapp { opacity: 1; transform: translate3d(0, 0, 0); } .dapp.dapp--plus { display: flex; } .dapp.dapp--plus a.dapp--plus__link { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dapp__inner { background-color: $colorWhite; height: 240px; margin: 10px; box-shadow: 0px 4px 18px 0px rgba(189,208,223,0.26); border-radius: 8px; padding: 20px; position: relative; transition: box-shadow .3s ease, transform .3s ease; } .dapp:hover .dapp__inner { transform: translate3d(0, -2px, 0); box-shadow: 0px 8px 22px 0px rgba(189,208,223,0.6); } .dapp__title { font-size: 15px; line-height: 15px; font-family:$PostGroteskMedium; margin: 0 0 10px 0; } .dapp__description { font-size: 14px; line-height: 20px; color: #5A6F7E; opacity: .8; } .dapp__icon { display: block; width: 72px; height: 72px; margin: 0 0 10px 0; transform: scale(1); transition: transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425); } .dapp--plus:hover .dapp__icon { transform: scale(1.12); } .dapp__icon-inner { width: 72px; height: 72px; background-image: url(../img/new-site/plus.svg); background-repeat: no-repeat; background-size: cover; opacity: 0; transform: scale(.6); transition: transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425), opacity .2s ease; transition-delay: 1.2s; } .slide--shown .dapp__icon-inner { transform: scale(1); opacity:1 } .dapp--plus .dapp__description { text-align: center; display: inline-block; width: 80%; } .dapp__image { width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 20px; bottom: 20px; background-color: white; background-size: cover; } .dapp.dapp--one .dapp__image { background-image: url(../img/new-site/uport-avatar@2x.png); } .dapp.dapp--two .dapp__image { background-image: url(../img/new-site/gnosis-avatar@2x.png); } .dapp.dapp--three .dapp__image { background-image: url(../img/new-site/oasis-avatar@2x.png); } .dapp.dapp--four .dapp__image { background-image: url(../img/new-site/ethlance-avatar@2x.png); } .dapp.dapp--five .dapp__image { background-image: url(../img/new-site/aragon-avatar@2x.png); } .dapp.dapp--six .dapp__image { background-image: url(../img/new-site/etherisc-avatar@2x.png); } .dapp.dapp--seven .dapp__image { background-image: url(../img/new-site/ujo-avatar@2x.png); } @media (max-width: 922px) { .dapps { margin: 50px auto 30px; width: 748px; display: flex; flex-wrap: wrap; align-content:flex-start; justify-content:flex-start; } .dapp { width: 25%; flex-grow: 1; flex-shrink: 1 } .dapp__inner { height: 260px; } } @media (max-width: 767px) { .slide.slide--two { margin: 0; padding: 0; } .dapps { margin: 20px auto 10px; width: auto; padding: 0 10px; } .dapp__inner { margin: 5px; height: 240px; padding: 15px; } .dapp { width: 50%; opacity: 1; transform: translate3d(0, 0, 0); } .dapp__image { width: 40px; height: 40px; left: 15px; bottom: 15px; } .dapp:nth-child(4), .dapp:nth-child(5) { display: none; } .dapp__icon, .dapp__icon-inner { width: 60px; height: 60px; transform: scale(1); opacity:1 } }