:root {
--primary: #ffd91b;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
font-size: 10px;
line-height: 1.3;
}
$grid-gutter-width: 32px;
$duration: 0.3s;
.service-card {
border-radius: 8px;
background-color: var(--primary);
display: flex;
flex-direction: column;
margin: $grid-gutter-width * 0.5 0;
min-height: 90%;
overflow: hidden;
padding: 6px;
position: relative;
text-decoration: none;
&__media {
background-position: 50% 100%;
background-size: contain;
position: relative;
&::before {
content: '';
display: block;
padding-bottom: 56.52%;
}
}
&__content {
background-color: #fff;
border-radius: 8px;
color: #000;
display: block;
flex: 1 1 auto;
padding: $grid-gutter-width * 0.5;
position: relative;
text-align: center;
text-decoration: none;
}
&__title {
color: #0063b3;
display: block;
font-size: calc(5px + 2vw);
font-weight: 700;
margin-bottom: 0.5em;
text-decoration: none;
}
&__body {
font-size: calc(3px + 2vw);
text-decoration: none;
}
svg {
bottom: 0;
fill: #fff;
position: absolute;
transition: transform $duration;
.filler { fill: var(--primary); }
}
// Accomodation -------------------
.accomodation {
&__house {
right: 0;
transform: translateY(6%);
transform-origin: 100% 100%;
width: 64%;
}
&__tree-1 {
left: 16%;
transform: translateY(6%);
transform-origin: 50% 100%;
width: 17%;
}
&__tree-2 {
left: 3%;
transform: translateY(6%);
transform-origin: 50% 100%;
width: 13%;
}
}
// Transportation -------------------
.transportation {
&__car {
animation: transportation-car 3s linear infinite;
animation-delay: -1.4s;
animation-play-state: paused;
left: 0;
width: 50%;
}
&__cloud-1 {
animation: transportation-cloud-1 4s linear infinite;
animation-delay: -1.1s;
animation-play-state: paused;
bottom: auto;
left: 0;
top: 3%;
width: 20%;
}
&__cloud-2 {
animation: transportation-cloud-1 4s linear infinite;
animation-delay: -3s;
animation-play-state: paused;
bottom: auto;
left: 0;
top: 21%;
width: 26%;
}
&__sun {
bottom: auto;
left: 42%;
top: 11%;
width: 15%;
}
}
// Camp -------------------------------
.camp {
&__logs {
left: 36%;
transform: translateY(17%);
transform-origin: 50% 100%;
width: 20%;
}
&__flames {
bottom: 23%;
left: 40%;
transform: translateY(17%);
transform-origin: 50% 100%;
width: 11%;
path {
animation: camp-flames 1s infinite linear alternate;
animation-play-state: paused;
}
}
&__tree-1 {
left: 9%;
transform-origin: 50% 100%;
width: 16%;
}
&__tree-2 {
bottom: 25%;
left: 26%;
transform-origin: 50% 100%;
width: 13%;
}
&__tree-3 {
left: 59%;
transform-origin: 50% 100%;
width: 19%;
}
&__tree-4 {
bottom: 10%;
left: 79%;
transform-origin: 50% 100%;
width: 15%;
}
}
// Community -------------------
.community {
&__computer {
left: 26%;
transform: translateY(16%);
transform-origin: 50% 100%;
width: 51%;
}
&__person-1,
&__person-2 {
bottom: 28%;
overflow: hidden;
position: absolute;
width: 12%;
&::before {
content: '';
display: block;
padding-bottom: 136.03%;
width: 100%;
}
svg {
animation: community-people-up infinite linear 2s alternate;
animation-play-state: paused;
bottom: 0;
left: 0;
position: absolute;
transform: translateY(0);
transform-origin: 50% 100%;
width: 100%;
}
}
&__person-1 {
left: 32%;
svg { animation-delay: -1.5s; }
}
&__person-2 {
right: 29%;
svg { animation-delay: -1s; }
}
&__bubble {
animation: community-bubble infinite linear 2s alternate;
animation-delay: -1.25s;
animation-play-state: paused;
bottom: 51%;
left: 34%;
width: 35%;
}
}
// Support group -------------------
.support-group {
&__hand {
left: 16%;
transform: translateY(25%);
transition: transform $duration;
width: 56%;
}
&__heart {
animation: pulse infinite linear 2s;
animation-play-state: paused;
bottom: 50%;
left: 39%;
width: 22%;
}
}
// Support group 2 -------------------
.support-group-2 {
&__hands {
left: 23%;
transform: translateY(38%);
transition: transform $duration;
width: 54%;
}
&__heart {
animation: pulse infinite linear 2s;
animation-play-state: paused;
bottom: 50%;
left: 39%;
width: 22%;
}
}
// Practical support -------------------
.practical-support {
&__jar {
bottom: 6%;
left: 34%;
transition: transform $duration;
width: 31%;
}
&__heart {
animation: pulse infinite linear 2s;
animation-play-state: paused;
bottom: 30%;
left: 42%;
width: 16%;
}
}
// Financial support -------------------
.financial-support {
&__hand {
left: 16%;
transform: translateY(25%);
transition: transform $duration;
width: 56%;
}
&__coin {
animation: rotateY infinite linear 2s;
animation-play-state: paused;
bottom: 48%;
left: 39%;
width: 22%;
}
}
// Quit smoking -------------------
.quit-smoking {
&__hand {
left: 16%;
transform: translateY(25%);
transition: transform $duration;
width: 56%;
}
&__cigarette {
bottom: 61%;
left: 29%;
width: 41%;
}
&__cross {
bottom: 50%;
left: 41%;
width: 21%;
}
}
// Look good ----------------------
.look-good {
&__person {
bottom: -12%;
left: 30%;
width: 40%;
}
&__smile {
bottom: 34%;
left: 41%;
width: 18%;
.smile {
d: path('M19.4,14.9c-6.5,0-12.7-2.5-17.3-7.2c-0.8-0.8-0.8-2.1,0-3c0.8-0.8,2.1-0.8,3,0c3.8,3.8,8.9,5.9,14.3,5.9c5.9,0,11.5-2.6,15.4-7.1c0.8-0.9,2.1-1,3-0.2c0.9,0.8,1,2.1,0.2,3C33.3,11.7,26.6,14.9,19.4,14.9z');
transition: all $duration;
}
}
&__star-1,
&__star-2 {
animation: look-good-star infinite linear 2s;
animation-play-state: paused;
bottom: 0;
transform: translateY(110%);
width: 10%;
}
&__star-1 {
animation-delay: -1.2s;
left: 17%;
}
&__star-2 {
animation-delay: -0.6s;
right: 17%;
}
}
// Service-locator ----------------------
.service-locator {
&__map {
bottom: 11%;
left: 17%;
width: 66%;
}
&__pin {
animation: service-locator-pin infinite 2s;
animation-play-state: paused;
bottom: 29%;
left: 38%;
width: 23%;
}
}
// Information kits -------------
.information-kits {
&__book {
bottom: -17%;
left: 17%;
transform: rotate(0deg);
transition: transform 0.5s;
width: 60%;
}
}
// Find a wig -------------
.find-a-wig {
&__person {
bottom: -12%;
left: 23%;
width: 46%;
path {
animation: find-a-wig-wig infinite alternate 1s;
animation-play-state: paused;
d: path('M181.6,183.7c0-0.1,0-0.1,0-0.2c-4.6-24.9-16.8-40-34.6-43.2c4.6-3.3,8.8-7.2,12.4-11.5c-0.1,5.3-0.5,8.6-0.5,8.7c-0.2,1.5,0.4,2.9,1.7,3.8c0.7,0.5,1.5,0.7,2.3,0.7c0.6,0,1.3-0.1,1.8-0.5c1.4-0.7,33.5-18.1,22.2-77.2c-3.3-17.1-11.7-39.7-33-50.6c-10.2-5.2-19.6-5.7-23.2-5.6c-5.5-3.9-27.3-16.4-64.3,0.4C50.7,15.7,32.1,34,32.1,80.5v0.2c0,17.7-17.3,35.4-18.1,36.2c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0.2-0.1,0.5-0.1,0.7c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.2,0.5c0,0,0,0.1,0,0.1c0.1,0.2,0.2,0.4,0.3,0.5c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.3,0.3,0.4,0.4c0,0,0.1,0.1,0.1,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0,0.1,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.8,0.3,15.7,5.7,36-1.7c4.7,7.4,10.8,13.8,18,18.9c-17.6,3.9-30.1,18.5-34.2,40.8c0,0.1,0,0.3-0.1,0.4l-3,37.7c-0.1,1.1,0.3,2.2,1,3c0.8,0.8,1.8,1.3,2.9,1.3h146.5c1.2,0,2.3-0.5,3-1.4c0.8-0.9,1.1-2,0.9-3.2L181.6,183.7z M32.4,117.6c2.7-1.7,5.7-3.7,9.1-6.4c17.8-13.5,25.6-35,25.9-35.9c0.7-2.1-0.3-4.4-2.4-5.1c-2.1-0.7-4.4,0.3-5.1,2.4c-0.1,0.2-7.3,20.1-23.2,32.2c-2.6,1.9-4.8,3.5-6.8,4.9C35,102,40.1,91.5,40.1,80.7v-0.2c0-33.5,10.2-55.8,29.5-64.6c29.8-13.5,47.8-6.3,54.3-2.5l-7.1,11.1c-1.2,1.9-0.6,4.3,1.2,5.5c0.7,0.4,1.4,0.6,2.1,0.6c1.3,0,2.6-0.7,3.4-1.8l8.1-12.7c8.2,0.1,38.5,3.6,47.3,49.7c7,36.7-3.8,55.2-11.5,63.3c0.4-14.2-1.2-41.5-17-61.4C140,54.6,125.1,47,106.2,45.1c-0.1,0-0.3,0-0.4,0c-1.9,0-3.5,1.3-3.9,3.1c-0.1,0.4-8.4,36.5-35.3,56.3C53.3,114.3,41.2,117.2,32.4,117.6z M58.8,118.6c4-2,8.2-4.5,12.5-7.7c24.5-18,34.6-47.3,37.5-57.4c15,2.2,26.9,8.6,35.3,19.2c10.1,12.8,13.7,29.4,14.8,42.7c-6.2,10.7-15.6,19.4-27.4,24.6c-7.5,3.3-15.4,5-23.7,5s-16.2-1.7-23.7-5C73.7,135.4,65,127.8,58.8,118.6z M40.4,215.9l2.7-33.2c4.2-22.3,17.3-35.1,36.2-35.1h2.6c0.4,0.2,0.9,0.3,1.3,0.5c0.5,0.2,1,0.4,1.5,0.6c0.6,0.2,1.1,0.4,1.7,0.6c0.5,0.2,1,0.4,1.5,0.5c0.6,0.2,1.2,0.3,1.7,0.5c0.5,0.1,1,0.3,1.5,0.4c0.6,0.2,1.2,0.3,1.8,0.4c0.5,0.1,1,0.2,1.5,0.3c0.6,0.1,1.2,0.2,1.9,0.3c0.5,0.1,1,0.2,1.5,0.3c0.7,0.1,1.3,0.2,2,0.3c0.5,0.1,0.9,0.1,1.4,0.2c0.7,0.1,1.5,0.1,2.2,0.2c0.4,0,0.8,0.1,1.1,0.1c1.1,0.1,2.3,0.1,3.4,0.1s2.3,0,3.4-0.1c0.4,0,0.8-0.1,1.2-0.1c0.8-0.1,1.5-0.1,2.2-0.2c0.5,0,0.9-0.1,1.4-0.2c0.7-0.1,1.3-0.2,2-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.3-0.2,1.9-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.2-0.3,1.8-0.4c0.5-0.1,1-0.3,1.5-0.4c0.6-0.2,1.2-0.3,1.7-0.5c0.5-0.2,1-0.3,1.5-0.5c0.6-0.2,1.1-0.4,1.7-0.6c0.5-0.2,1-0.4,1.5-0.6c0.4-0.2,0.9-0.3,1.3-0.5h5.4c12.5,0,28.6,6.5,34.3,37.2l4.3,31H40.4z');
}
}
}
// Specialist support -------------
.specialist-support {
&__person {
bottom: -12%;
left: 41%;
width: 46%;
}
&__bubble {
bottom: 40%;
left: 14%;
width: 23%;
&__line-1 {
animation: specialist-support-line1 infinite 2s;
animation-delay: -1s;
animation-play-state: paused;
transform-origin: 100% 50%;
}
&__line-2 {
animation: specialist-support-line2 infinite 2s;
animation-delay: -0.5s;
animation-play-state: paused;
transform-origin: 100% 50%;
}
}
}
// Talk to someone
.talk-to-someone {
&__person-1,
&__person-2 {
bottom: -4%;
width: 27%;
}
&__person-1 {
left: 16%;
}
&__person-2 {
right: 16%;
}
&__bubble {
bottom: 46%;
left: 37%;
width: 23%;
transform: scale(1);
transition: transform $duration;
&__line-1 {
animation: specialist-support-line1 infinite 2s;
animation-delay: -1s;
animation-play-state: paused;
transform-origin: 100% 50%;
}
&__line-2 {
animation: specialist-support-line2 infinite 2s;
animation-delay: -0.5s;
animation-play-state: paused;
transform-origin: 100% 50%;
}
}
}
.hospice-palliative {
&__icon {
bottom: 10%;
left: 28%;
transform: rotate(0deg);
transition: transform 0.75s;
width: 44%;
}
}
// Hover ============================
&:hover {
.accomodation {
&__house { transform: translateY(6%) scale(1.1); }
&__tree-1,
&__tree-2 { transform: translateY(6%) rotate(-8deg); }
}
.transportation {
&__car,
&__cloud-1,
&__cloud-2 { animation-play-state: running; }
}
.camp {
&__logs { transform: translateY(17%) scale(1.15); }
&__flames {
transform: translateY(2%) scale(1.15);
path { animation-play-state: running; }
}
&__tree-1,
&__tree-2 { transform: translateY(0) rotate(-8deg); }
&__tree-3,
&__tree-4 { transform: translateY(0) rotate(8deg); }
}
.community {
&__person-1,
&__person-2 {
svg { animation-play-state: running; }
}
&__bubble { animation-play-state: running; }
}
.support-group {
&__hand { transform: translateY(15%); }
&__heart { animation-play-state: running; }
}
.support-group-2 {
&__hands { transform: translateY(35%); }
&__heart { animation-play-state: running; }
}
.practical-support {
&__jar { transform: scale(1.1) rotate(5deg); }
&__heart { animation-play-state: running; }
}
.financial-support {
&__hand { transform: translateY(15%); }
&__coin { animation-play-state: running; }
}
.quit-smoking {
&__hand { transform: translateY(15%); }
&__cross { animation: rubberBand 1 linear 1s; }
}
.look-good {
&__smile {
.smile {
d: path('M19.4,14.9c-8-0.2-13.2-4.6-18.3-10.2c-0.8-0.9-0.8-2.1,0-3c0.8-0.8,2.1-0.8,3,0c3.8,3.8,7.6,8.8,15.3,8.9c9,0.2,12.5-5.3,16.4-9.8c0.8-0.9,2.1-1,3-0.2c0.9,0.8,0.9,2,0.2,3C34.2,9.6,29.7,14.6,19.4,14.9z');
}
}
&__star-1,
&__star-2 { animation-play-state: running; }
}
.service-locator {
&__pin { animation-play-state: running; }
}
.information-kits {
&__book { transform: translateY(-14%) translateX(5%) rotate(20deg); }
}
.find-a-wig {
&__person {
path { animation-play-state: running; }
}
}
.specialist-support,
.talk-to-someone {
&__bubble {
transform: scale(1.1);
&__line-1 { animation-play-state: running; }
&__line-2 { animation-play-state: running; }
}
}
.hospice-palliative {
&__icon { transform: rotate(180deg); }
}
}
}
@keyframes transportation-car {
from { transform: translate3d(210%, 2%, 0); }
to { transform: translate3d(-110%, 2%, 0); }
}
@keyframes transportation-cloud-1 {
from { transform: translate3d(510%, 0, 0); }
to { transform: translate3d(-110%, 0, 0); }
}
@keyframes camp-flames {
from { d: path('M23.4,62.1c-0.2,0-0.4,0-0.6,0l-0.1,0c-0.2,0-0.3,0-0.5,0c-8.3,0-16-4.5-20.1-11.9c-4.5-8.4-1.2-16.9,3-21.7c0.1-0.1,0.2-0.2,0.3-0.3c3.5-3.3,2.3-9.3,2.3-9.3C7.3,17,8.3,15.1,10,14.3c1.3-0.6,2.7-0.4,3.9,0.3c0.1-0.2,0.2-0.4,0.2-0.6c1.8-4.7,4.7-9,8.3-12.4c0,0,0.1-0.1,0.1-0.1c2.6-2.2,6.6-1.9,8.8,0.7c1.3,1.5,1.8,3.5,1.4,5.4c-1.7,7.9,0.7,10,3,12c9.4,8.2,9.5,18.2,9.4,20.4c0,7-2.2,12.5-6.5,16.5C33.1,61.5,26.1,62.1,23.4,62.1z M22.6,54.1l0.8,0c1.4,0,6.3-0.3,9.8-3.5c2.6-2.4,3.9-6,3.9-10.8c0-0.1,0-0.2,0-0.2c0-0.8,0.3-8-6.6-14c-3.4-3-6.4-6.8-6.3-13.7c-1,1.6-1.9,3.3-2.6,5c-0.5,1.3-0.9,2.6-1.1,4c-0.2,1.2-0.5,2.8-0.5,3.7c2,4,3.9,8.6,4.3,12c0.2,2.2-1.4,4.2-3.6,4.4c-2.2,0.2-4.2-1.4-4.4-3.6c-0.2-1.8-1.2-4.4-2.5-7.2c-0.7,1.3-1.6,2.5-2.7,3.6c-0.9,1-5.1,6.5-1.9,12.5C11.9,51.2,17,54.2,22.6,54.1z M24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9z'); }
to { d: path('M23.4,62.1c-0.2,0-0.4,0-0.6,0l-0.1,0c-0.2,0-0.3,0-0.5,0c-8.3,0-16-4.5-20.1-11.9c-4.5-8.4-1.2-16.9,3-21.7c0.1-0.1,0.2-0.2,0.3-0.3c3.5-3.3,2.3-9.3,2.3-9.3C7.3,17,8.3,15.1,10,14.3c1.3-0.6,2.7-0.4,3.9,0.3c0.1-0.2,0.2-0.4,0.2-0.6c0.3-11.6-8.7-11-3.4-13.1c0.1,0,0,0,0,0c5.2-1,7-1.1,11.8-0.2c3.7,0.7,6.5,4.1,7,6c2,7.6,3.8,10.9,6.1,12.9c9.4,8.2,9.5,18.2,9.4,20.4c0,7-2.2,12.5-6.5,16.5C33.1,61.5,26.1,62.1,23.4,62.1z M22.6,54.1l0.8,0c1.4,0,6.3-0.3,9.8-3.5c2.6-2.4,3.9-6,3.9-10.8c0-0.1,0-0.2,0-0.2c0-0.8,2.2-8.6-5.3-13.9c-8.4-6-3.6-16.6-13.4-17.9c0,0,1,2.2,1.3,6.7c0.1,1.4-0.1,5.8-0.3,7.2c-0.2,1.2,0.6,2,0.5,3c2,4,3.9,8.6,4.3,12c0.2,2.2-1.4,4.2-3.6,4.4c-2.2,0.2-4.2-1.4-4.4-3.6c-0.2-1.8-1.2-4.4-2.5-7.2c-0.7,1.3-1.6,2.5-2.7,3.6c-0.9,1-5.1,6.5-1.9,12.5C11.9,51.2,17,54.2,22.6,54.1z M24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9z'); }
}
@keyframes look-good-star {
from { transform: translate3d(0, 115%, 0); }
to { transform: translate3d(0, -575%, 0); }
}
@keyframes service-locator-pin {
0% {
opacity: 1;
transform: translate3d(0, -130%, 0);
}
46% {
opacity: 1;
transform: translate3d(0, 10%, 0);
}
50% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
90% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes find-a-wig-wig {
from { d: path('M181.6,183.7c0-0.1,0-0.1,0-0.2c-4.6-24.9-16.8-40-34.6-43.2c4.6-3.3,8.8-7.2,12.4-11.5c-0.1,5.3-0.5,8.6-0.5,8.7c-0.2,1.5,0.4,2.9,1.7,3.8c0.7,0.5,1.5,0.7,2.3,0.7c0.6,0,1.3-0.1,1.8-0.5c1.4-0.7,33.5-18.1,22.2-77.2c-3.3-17.1-11.7-39.7-33-50.6c-10.2-5.2-19.6-5.7-23.2-5.6c-5.5-3.9-27.3-16.4-64.3,0.4C50.7,15.7,32.1,34,32.1,80.5v0.2c0,17.7-17.3,35.4-18.1,36.2c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0.2-0.1,0.5-0.1,0.7c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.2,0.5c0,0,0,0.1,0,0.1c0.1,0.2,0.2,0.4,0.3,0.5c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.3,0.3,0.4,0.4c0,0,0.1,0.1,0.1,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0,0.1,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.8,0.3,15.7,5.7,36-1.7c4.7,7.4,10.8,13.8,18,18.9c-17.6,3.9-30.1,18.5-34.2,40.8c0,0.1,0,0.3-0.1,0.4l-3,37.7c-0.1,1.1,0.3,2.2,1,3c0.8,0.8,1.8,1.3,2.9,1.3h146.5c1.2,0,2.3-0.5,3-1.4c0.8-0.9,1.1-2,0.9-3.2L181.6,183.7z M32.4,117.6c2.7-1.7,5.7-3.7,9.1-6.4c17.8-13.5,25.6-35,25.9-35.9c0.7-2.1-0.3-4.4-2.4-5.1c-2.1-0.7-4.4,0.3-5.1,2.4c-0.1,0.2-7.3,20.1-23.2,32.2c-2.6,1.9-4.8,3.5-6.8,4.9C35,102,40.1,91.5,40.1,80.7v-0.2c0-33.5,10.2-55.8,29.5-64.6c29.8-13.5,47.8-6.3,54.3-2.5l-7.1,11.1c-1.2,1.9-0.6,4.3,1.2,5.5c0.7,0.4,1.4,0.6,2.1,0.6c1.3,0,2.6-0.7,3.4-1.8l8.1-12.7c8.2,0.1,38.5,3.6,47.3,49.7c7,36.7-3.8,55.2-11.5,63.3c0.4-14.2-1.2-41.5-17-61.4C140,54.6,125.1,47,106.2,45.1c-0.1,0-0.3,0-0.4,0c-1.9,0-3.5,1.3-3.9,3.1c-0.1,0.4-8.4,36.5-35.3,56.3C53.3,114.3,41.2,117.2,32.4,117.6z M58.8,118.6c4-2,8.2-4.5,12.5-7.7c24.5-18,34.6-47.3,37.5-57.4c15,2.2,26.9,8.6,35.3,19.2c10.1,12.8,13.7,29.4,14.8,42.7c-6.2,10.7-15.6,19.4-27.4,24.6c-7.5,3.3-15.4,5-23.7,5s-16.2-1.7-23.7-5C73.7,135.4,65,127.8,58.8,118.6z M40.4,215.9l2.7-33.2c4.2-22.3,17.3-35.1,36.2-35.1h2.6c0.4,0.2,0.9,0.3,1.3,0.5c0.5,0.2,1,0.4,1.5,0.6c0.6,0.2,1.1,0.4,1.7,0.6c0.5,0.2,1,0.4,1.5,0.5c0.6,0.2,1.2,0.3,1.7,0.5c0.5,0.1,1,0.3,1.5,0.4c0.6,0.2,1.2,0.3,1.8,0.4c0.5,0.1,1,0.2,1.5,0.3c0.6,0.1,1.2,0.2,1.9,0.3c0.5,0.1,1,0.2,1.5,0.3c0.7,0.1,1.3,0.2,2,0.3c0.5,0.1,0.9,0.1,1.4,0.2c0.7,0.1,1.5,0.1,2.2,0.2c0.4,0,0.8,0.1,1.1,0.1c1.1,0.1,2.3,0.1,3.4,0.1s2.3,0,3.4-0.1c0.4,0,0.8-0.1,1.2-0.1c0.8-0.1,1.5-0.1,2.2-0.2c0.5,0,0.9-0.1,1.4-0.2c0.7-0.1,1.3-0.2,2-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.3-0.2,1.9-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.2-0.3,1.8-0.4c0.5-0.1,1-0.3,1.5-0.4c0.6-0.2,1.2-0.3,1.7-0.5c0.5-0.2,1-0.3,1.5-0.5c0.6-0.2,1.1-0.4,1.7-0.6c0.5-0.2,1-0.4,1.5-0.6c0.4-0.2,0.9-0.3,1.3-0.5h5.4c12.5,0,28.6,6.5,34.3,37.2l4.3,31H40.4z'); }
to { d: path('M181.6,183.7c0-0.1,0-0.1,0-0.2c-4.6-24.9-16.8-40-34.6-43.2c4.6-3.3,2.8-9,2.4-11.5c-0.1,5.3-0.5,8.6-0.5,8.7c-0.2,1.5,0.4,2.9,1.7,3.8c0.7,0.5,1.5,0.7,2.3,0.7c0.6,0,1.3,0,1.8-0.5c6.2-5.4,41.1-29.6,32.2-77.2c-3.2-17.1-11.7-39.7-33-50.6c-10.2-5.2-19.6-5.7-23.2-5.6c-5.5-3.9-27.3-16.4-64.3,0.4C50.7,15.7,32.1,34,32.1,80.5v0.2c0,17.7-27.3,25.4-28.1,26.2c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0.2-0.1,0.5-0.1,0.7c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.2,0.5c0,0,0,0.1,0,0.1c0.1,0.2,0.2,0.4,0.3,0.5c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.3,0.3,0.4,0.4c0,0,0.1,0.1,0.1,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0,0.1,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.8,0.3,25.7,15.7,46,8.3c4.7,7.4,10.8,13.8,18,18.9c-17.6,3.9-30.1,18.5-34.2,40.8c0,0.1,0,0.3-0.1,0.4l-3,37.7c-0.1,1.1,0.3,2.2,1,3c0.8,0.8,1.8,1.3,2.9,1.3h146.5c1.2,0,2.3-0.5,3-1.4c0.8-0.9,1.1-2,0.9-3.2L181.6,183.7z M21,113.9c5.3-1.4,16.5-0.3,25.7-8.7c15.3-13.9,20.5-29,20.8-29.9c0.7-2.1-0.3-4.4-2.4-5.1c-2.1-0.7-4.4,0.3-5.1,2.4c-0.1,0.2-3.5,16.6-19.5,28.6c-7.1,5.4-18.7,5.2-20.7,6.5c10.7-8.5,20.3-16.3,20.3-27.1v-0.2c0-33.5,10.2-55.8,29.5-64.6c29.8-13.5,47.8-6.3,54.3-2.5l-7.1,11.1c-1.2,1.9-0.6,4.3,1.2,5.5c0.7,0.4,1.4,0.6,2.1,0.6c1.3,0,2.6-0.7,3.4-1.8l8.1-12.7c8.2,0.1,38.5,3.6,47.3,49.7c7,36.7-13.8,55.2-21.5,63.3c0.4-14.2,8.8-41.5-7-61.4C140,54.6,125.1,47,106.2,45.1c-0.1,0-0.3,0-0.4,0c-1.9,0-3.5,1.3-3.9,3.1c-0.1,0.4-8.4,36.5-35.3,56.3C53.3,114.3,37.8,120.9,21,113.9z M58.8,118.6c4-2,8.2-4.5,12.5-7.7c24.5-18,34.6-47.3,37.5-57.4c15,2.2,26.9,8.6,35.3,19.2c10.1,12.8,8.1,36.7,5.2,56.1c-0.9,1.6-6,6-17.8,11.2c-7.5,3.3-15.4,5-23.7,5s-16.2-1.7-23.7-5C73.7,135.4,65,127.8,58.8,118.6z M40.4,215.9l2.7-33.2c4.2-22.3,17.3-35.1,36.2-35.1h2.6c0.4,0.2,0.9,0.3,1.3,0.5c0.5,0.2,1,0.4,1.5,0.6c0.6,0.2,1.1,0.4,1.7,0.6c0.5,0.2,1,0.4,1.5,0.5c0.6,0.2,1.2,0.3,1.7,0.5c0.5,0.1,1,0.3,1.5,0.4c0.6,0.2,1.2,0.3,1.8,0.4c0.5,0.1,1,0.2,1.5,0.3c0.6,0.1,1.2,0.2,1.9,0.3c0.5,0.1,1,0.2,1.5,0.3c0.7,0.1,1.3,0.2,2,0.3c0.5,0.1,0.9,0.1,1.4,0.2c0.7,0.1,1.5,0.1,2.2,0.2c0.4,0,0.8,0.1,1.1,0.1c1.1,0.1,2.3,0.1,3.4,0.1s2.3,0,3.4-0.1c0.4,0,0.8-0.1,1.2-0.1c0.8-0.1,1.5-0.1,2.2-0.2c0.5,0,0.9-0.1,1.4-0.2c0.7-0.1,1.3-0.2,2-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.3-0.2,1.9-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.2-0.3,1.8-0.4c0.5-0.1,1-0.3,1.5-0.4c0.6-0.2,1.2-0.3,1.7-0.5c0.5-0.2,1-0.3,1.5-0.5c0.6-0.2,1.1-0.4,1.7-0.6c0.5-0.2,1-0.4,1.5-0.6c0.4-0.2,0.9-0.3,1.3-0.5h5.4c12.5,0,28.6,6.5,34.3,37.2l4.3,31H40.4z'); }
}
@keyframes specialist-support-line1 {
0% {
d: path('M29.2,32.7h-2c-2.2,0-4,1.8-4,4s1.8,4,4,4h2c2.2,0,4-1.8,4-4S31.4,32.7,29.2,32.7z');
opacity: 0;
}
30%,
70% {
d: path('M69.2,32.7h-42c-2.2,0-4,1.8-4,4s1.8,4,4,4h42c2.2,0,4-1.8,4-4S71.4,32.7,69.2,32.7z');
opacity: 1;
}
100% {
d: path('M69.2,32.7h-3c-2.2,0-4,1.8-4,4s1.8,4,4,4h3c2.2,0,4-1.8,4-4S71.4,32.7,69.2,32.7z');
opacity: 0;
}
}
@keyframes specialist-support-line2 {
0% {
d: path('M44.2,49h-1.8c-2.2,0-4,1.8-4,4s1.8,4,4,4h1.8c2.2,0,4-1.8,4-4S46.4,49,44.2,49z');
opacity: 0;
}
30%,
70% {
d: path('M69.2,49H42.4c-2.2,0-4,1.8-4,4s1.8,4,4,4h26.8c2.2,0,4-1.8,4-4S71.4,49,69.2,49z');
opacity: 1;
}
100% {
d: path('M69.2,49h-2.8c-2.2,0-4,1.8-4,4s1.8,4,4,4h2.8c2.2,0,4-1.8,4-4S71.4,49,69.2,49z');
opacity: 0;
}
}
@keyframes community-people-up {
0%,
40% { transform: translateY(101%); }
50%,
100% { transform: translateY(0); }
}
@keyframes community-bubble {
0%,
65% { opacity: 0; }
75%,
100% { opacity: 1; }
}
@keyframes pulse {
0%,
30%,
48%,
52%,
70%,
100% { transform: scale(1); }
40%,
60% { transform: scale(1.2); }
}
@keyframes rotateY {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
@keyframes rubberBand {
from { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, 0.85, 1); }
65% { transform: scale3d(0.95, 1.05, 1); }
75% { transform: scale3d(1.05, 0.95, 1); }
to { transform: scale3d(1, 1, 1); }
}
@media (min-width: 576px) {
.service-card {
&__title {
font-size: calc(10px + 1vw);
}
}
}
@media (min-width: 576px) {
.service-card {
&__title {
font-size: calc(5px + 1.5vw);
}
&__body {
font-size: calc(3px + 1.5vw);
}
}
}
@media (min-width: 768px) {
.service-card {
&__title {
font-size: calc(5px + 1vw);
}
&__body {
font-size: calc(3px + 1vw);
}
}
}
@media (min-width: 992px) {
.service-card {
&__title {
font-size: calc(5px + 1vw);
}
&__body {
font-size: calc(3px + 1vw);
}
}
}
@media (min-width: 1200px) {
.service-card {
&__title {
font-size: calc(5px + 0.75vw);
}
&__body {
font-size: calc(3px + 0.75vw);
}
}
}
!
