/* /css/pages/friends.css (4.74 KB) */
#content{ background: #FFF; } .friends{ width: calc(100% - 20px * 2); padding: 25px 20px 30px; font-size: 14px; } .friends > h1{ font-size: 24px; color: var(--color-blue-dd); margin: 0 auto 20px auto; } .friends > p{ font-size: 16px; color: var(--color-blue-dd); text-align: center; margin: 0; } .friends .els{ margin: 25px auto; display: flex; flex-wrap: wrap; justify-content: center; } .friends .el{ box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px; border-radius: 8px; background-repeat: no-repeat; background-position: 100% 0; background-size: cover; width: calc(50% - 10px - 50px * 2); max-width: 430px; padding: 50px; margin: 0 10px 20px 0; } .friends .el:nth-child(2n){ margin: 0 0 20px 10px; } .friends .el p{ margin: 17px 0 0; color: #FFF; } .friends .el i{ display: block; } .friends .el.tcs p, .friends .el.online_trade p{ color: var(--color-blue-dd) } .friends .el a.btn{ min-width: 128px; margin: 15px 0 0; color: #FFF; background: rgba(0,0,0,0.3); } .friends .el a.btn:hover{ background: rgba(0,0,0,0.5) } .friends .el a.btn_light{ background: rgba(255,255,255,0.3); } .friends .el a.btn_light:hover{ background: rgba(255,255,255,0.5); } .friends .el img{ max-height: 70px; } .friends .el.tcs{ background-image: url(/images/common/pages/friends/bg/tinkoff.png); } .friends .el.selectel{ background-image: url(/images/common/pages/friends/bg/selectel.png); } .friends .el.diadoc{ background-image: url(/images/common/pages/friends/bg/kontur.png); } .friends .el.uber{ background-image: url(/images/common/pages/friends/uber.png); } .friends .el.axel{ background-image: url(/images/common/pages/friends/bg/axelname.png); } .friends .el.delo{ background-image: url(/images/common/pages/friends/moyo_delo.png); } .friends .el.onep{ background-image: url(/images/common/pages/friends/bg/1password.png); } .friends .el.droplr{ background-image: url(/images/common/pages/friends/bg/droplr.png); } .friends .el.turbaza{ background-image: url(/images/common/pages/friends/bg/turbaza.png); } .friends .el.knopka{ background-image: url(/images/common/pages/friends/bg/knopka.png); } .friends .el.travelpayouts{ background-image: url(/images/common/pages/friends/bg/travelpayouts.png); } .friends .el.pravoved{ background-image: url(/images/common/pages/friends/pravoved.png); } .friends .el.online_trade{ background-image: url(/images/common/pages/friends/bg/onlinetrade.png); } .friends .el.rucaptcha{ background-image: url(/images/common/pages/friends/bg/rucapcha.png); } .friends .el.taksovichkof{ background-image: url(/images/common/pages/friends/bg/taksovichkoff.png); } .friends .el.blackterminal{ background-image: url(/images/common/pages/friends/bg/blackterminal.png); } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5){ .friends .el.tcs{ background-image:url(/images/common/pages/friends/bg/2x/tinkoff.png); } .friends .el.selectel{ background-image:url(/images/common/pages/friends/bg/2x/selectel.png); } .friends .el.diadoc{ background-image:url(/images/common/pages/friends/bg/2x/kontur.png); } .friends .el.uber{ background-image:url(/images/common/pages/friends/2x/uber.png); } .friends .el.axel{ background-image:url(/images/common/pages/friends/bg/2x/axelname.png); } .friends .el.delo{ background-image:url(/images/common/pages/friends/2x/moyo_delo.png); } .friends .el.onep{ background-image:url(/images/common/pages/friends/bg/2x/1password.png); } .friends .el.droplr{ background-image:url(/images/common/pages/friends/bg/2x/droplr.png); } .friends .el.turbaza{ background-image:url(/images/common/pages/friends/bg/2x/turbaza.png); } .friends .el.knopka{ background-image:url(/images/common/pages/friends/bg/2x/knopka.png); } .friends .el.travelpayouts{ background-image:url(/images/common/pages/friends/bg/2x/travelpayouts.png); } .friends .el.pravoved{ background-image:url(/images/common/pages/friends/2x/pravoved.png); } .friends .el.online_trade{ background-image:url(/images/common/pages/friends/bg/2x/onlinetrade.png); } .friends .el.rucaptcha{ background-image:url(/images/common/pages/friends/bg/2x/rucapcha.png); } .friends .el.taksovichkof{ background-image:url(/images/common/pages/friends/bg/2x/taksovichkoff.png); } .friends .el.blackterminal{ background-image:url(/images/common/pages/friends/bg/2x/blackterminal.png); } } @media only screen and (max-width: 1023px){ .friends .el{ width: calc(50% - 10px - 20px * 2); padding: 20px; position: relative; } .friends .el i{ padding: 0 0 42px; } .friends .el a.btn{ position: absolute; bottom: 20px; left: 20px; } } @media only screen and (max-width: 613px){ .friends .el{ width: calc(100% - 20px * 2); max-width: 490px; margin: 0 0 20px 0 !important; } }