.slide.slide--five { display: flex; padding: 40px 0 60px; } .slide.slide--five .slide__inner { background-image: linear-gradient(-138deg, #5070D5 14%, #4957B8 100%); box-shadow: 0px 12px 23px 0px rgba(74,92,105,0.33); border-radius: 8px; padding: 50px 0; height: 740px; width: 1080px; } .slide.slide--five .slide__header { padding: 150px 0 0 0; } .slide.slide--five .slide__bg-image { width: 814px; height: 519px; background-image: url(../img/new-site/lines@2x.png); background-size: 814px; position: absolute; left: 50%; top:0; margin: 0 0 0 -407px; } .slide__bg-area { position: absolute; background-color: $colorWhite; opacity: 0; left: 50%; top: -88px; margin: 0 0 0 -200px; width: 400px; height: 400px; border-radius: 50%; transform: scale(.1); animation-timing-function: ease; animation-name: pulsateArea; animation-duration: 3.4s; animation-delay: 2.3s; animation-iteration-count: infinite; } .slide.slide--five .slide__bg-icon { position: absolute; top: 86px; left: 50%; margin: 0 0 0 -26px; height: 52px; width: 52px; border-radius: 50%; background: #68C0F8; box-shadow: 0 2px 9px 0 rgba(57,80,164,0.69); position: relative; animation-timing-function: cubic-bezier(0.685, 0.000, 0.025, 1.185); animation-name: pulsate; animation-duration: 3.4s; animation-iteration-count: infinite; } .slide.slide--five .slide__bg-icon-inner { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); width: 24px; height: 24px; background-image: url(../img/new-site/icon-community.svg); background-position: 24px; } .contributors { width: 870px; margin: 0 auto; padding: 80px 0 0 0 } .contributors__title { text-align: center; color: $colorWhite; opacity: .6; padding: 24px 0; } .contributors__list { display: flex; flex-wrap: wrap; justify-content: center; } .contributor { display: flex; align-items: center; width: 210px; height: 92px; } .contributor__pic { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 2px 8px 0 #394C97; background-size: cover; } .contributor--carl .contributor__pic {background-image: url(../img/new-site/carl.png)} .contributor--jarrad .contributor__pic {background-image: url(../img/new-site/jarrad.png)} .contributor--roman .contributor__pic {background-image: url(../img/new-site/roman.png)} .contributor--victor .contributor__pic {background-image: url(../img/new-site/victor.png)} .contributor--alexander .contributor__pic {background-image: url(../img/new-site/alexander.png)} .contributor--andrey .contributor__pic {background-image: url(../img/new-site/andrey.png)} .contributor--gustavo .contributor__pic {background-image: url(../img/new-site/gustavo.png)} .contributor--andrei .contributor__pic {background-image: url(../img/new-site/andrei.png)} .contributor__info { padding: 0 0 0 16px; color: $colorWhite; } .contributor__info__name { font-family:$PostGroteskMedium; line-height: 16px; } .contributor__info__position { font-size: 14px; color: #68C0F8; } @keyframes pulsate { 0% { transform: scale(1); box-shadow: 0 2px 9px 0 rgba(57,80,164,0.69); } 50% { transform: scale(1.14); box-shadow: 0px 10px 14px 0 rgba(57,80,164,0.69); } 100% { transform: scale(1); box-shadow: 0 2px 9px 0 rgba(57,80,164,0.69); } } @keyframes pulsateArea { 0% { transform: scale(.1); opacity: .1 } 100% { transform: scale(1.4); opacity: 0 } } @media (max-width: 1140px) { .slide.slide--five .slide__inner { width: 860px; height: auto; } .contributors { padding: 60px 0 0 0; width: 640px; } .contributor { flex-direction: column; text-align: center; justify-content: center; height: auto; margin: 0 0 24px 0; width: 160px; } .contributor__info { padding: 8px 0 0 0; } } @media (max-width: 960px) { } @media (max-width: 922px) { .slide.slide--five .slide__inner { width: 728px; } .contributors { width: 100%; } .contributors__list { justify-content: center; } .contributor { width: 160px; } } @media (max-width: 767px) { .slide.slide--five { padding: 40px 0 40px } .slide.slide--five .slide__inner { padding: 30px 0; width: 100%; border-radius: 0; } }