section.m37_mm_core {
overflow: hidden;
}
section.m37_mm_core .mM_row {
min-height: 650px;
}
section.m37_mm_core .m37_mm_core_graph {
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-90px);
}
section.m37_mm_core .m37_mm_core_content {
position: relative;
z-index: 10;
}
section.m37_mm_core .m37_mm_core_subtitle {
color: var(--sh_color, var(--font_color));
transition: color .4s;
font-weight: 800;
margin-bottom: 25px;
}
section.m37_mm_core .m37_mm_core_claim {
font-size: 2.5625rem;
line-height: 1.2;
margin-bottom: 27px;
}
section.m37_mm_core .m37_mm_core_text_container {
max-width: 49%;
}
section.m37_mm_core .m37_mm_core_claim .mM_core_brand {
position: relative;
display: inline-block;
z-index: 2;
cursor: default;
letter-spacing: 1px;
cursor: pointer;
}
section.m37_mm_core .m37_mm_core_claim .mM_core_brand:after {
content: '';
position: absolute;
left: -6px;
bottom: 9px;
width: 100%;
height: 12px;
background: #2f87d6;
z-index: -1;
opacity: .5;
transition: opacity .4s;
}
section.m37_mm_core .m37_mm_core_claim .mM_core_brand.mM_core_emplory:after {
background: #ff890c;
width: calc(100% + 12px);
}
section.m37_mm_core .m37_mm_core_claim .mM_core_brand.mM_core_btw:after {
background: #8e8fc0;
}
section.m37_mm_core .m37_mm_core_claim .mM_core_brand:hover:after {
opacity: 1;
}
section.m37_mm_core .m37_mm_core_brands_container {
position: relative;
margin-top: 89px;
}
section.m37_mm_core .m37_mm_core_brand_item {
position: absolute;
left: 175px;
top: 0;
opacity: 0;
}
section.m37_mm_core .m37_mm_core_brand_logo_claim_container svg {
fill: var(--brand_color);
width: auto;
max-width: unset;
height: 44px;
}
section.m37_mm_core .m37_mm_core_brand_claim {
font-weight: 800;
line-height: 1;
margin-top: -5px;
}
section.m37_mm_core .m37_mm_core_brand_description_container {
max-width: 83%;
margin-bottom: 30px;
margin-top: 30px;
}
section.m37_mm_core .m37_mm_core_brand_button {
background: var(--brand_color);
display: inline-flex;
align-items: flex-start;
gap: 0 8px;
font-family: Nexa-Heavy, sans-serif;
font-weight: 400;
border-radius: 30px;
padding: 22px 29px 20px;
}
section.m37_mm_core .m37_mm_core_brand_button .m37_mm_core_brand_button_text {
color: #374052;
line-height: 1;
}
section.m37_mm_core .m37_mm_core_brand_button svg {
fill: #374052;
transform: rotate(-45deg);
width: 14px;
}
section.m37_mm_core .m37_mm_core_brand_item.mM_core_btw .m37_mm_core_brand_button .m37_mm_core_brand_button_text {
color: #fff;
}
section.m37_mm_core .m37_mm_core_brand_item.mM_core_btw .m37_mm_core_brand_button svg {
fill: #fff;
}
section.m37_mm_core .m37_mm_core_graph_content_container {
position: relative;
}
section.m37_mm_core .m37_mm_core_center_element {
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 132px;
height: 132px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
pointer-events: none;
}
section.m37_mm_core .m37_mm_core_center_element:after {
content: '';
width: 120%;
height: 120%;
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
transform: translate(-50%, -50%);
background: radial-gradient(
circle at center, 
rgba(255,255,255,1) 0%, 
rgba(255,255,255,.7) 50%, 
rgba(255,255,255, .4) 100% 
);
filter: blur(20px);
}
section.m37_mm_core .m37_mm_core_center_element svg {
fill: #374052;
width: 98px;
} section.m37_mm_core .m37_mm_core_graph_item {
border-radius: 50%;
width: 306px;
height: 306px;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -100%);
transition: transform .4s;
cursor: pointer;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_emplory {
transform: translate(-10%, -20%);
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_btw {
transform: translate(-90%, -20%);
}
section.m37_mm_core .m37_mm_core_graph_item:before,
section.m37_mm_core .m37_mm_core_graph_item:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border: 2px solid #fff;
transform: translate(-50%, -50%);
z-index: 5;
transition: transform .4s, opacity .4s;
transform-origin: center;
}
section.m37_mm_core .m37_mm_core_graph_item:after {
opacity: 0;
}
section.m37_mm_core .m37_mm_core_graph_active_border_item {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
transform-origin: center;
opacity: 0;
transition: opacity .4s, transform .4s;
} section.m37_mm_core .m37_mm_core_graph_item.active .m37_mm_core_graph_active_border_item {
opacity: 1;
transform: translate(-50%, -50%) scale(1.5);
}
section.m37_mm_core .m37_mm_core_graph_item_inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
section.m37_mm_core .m37_mm_core_graph_item_inner:before,
section.m37_mm_core .m37_mm_core_graph_item_inner:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
width: 100%;
height: 100%;
filter: blur(10px);
background: var(--brand_color);
opacity: .3;
z-index: -1;
transform: translate(-50%, -50%);
transition: transform .4s, filter .4s, opacity .4s, width .4s, height .4s;
}
section.m37_mm_core .m37_mm_core_graph_item_inner:before {
width: 50%;
height: 50%;
opacity: .7;
filter: blur(40px);
} section.m37_mm_core .m37_mm_core_graph_item.active .m37_mm_core_graph_item_inner:before {
width: 90%;
height: 90%;
filter: blur(25px);
opacity: .9;
}
section.m37_mm_core .m37_mm_core_graph_item svg {
fill: #fff;
position: relative;
z-index: 2;
transition: transform .4s;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_mM svg {
width: 164px;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_emplory svg {
width: 131px;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_btw svg {
width: 141px;
} section.m37_mm_core .m37_mm_core_graph_item.active svg {
transform: scale(.87);
} section.m37_mm_core .m37_mm_core_graph_item.active {
z-index: 3;
} section.m37_mm_core .m37_mm_core_graph_item.mM_core_mM.active {
transform: translate(-50%, -100%) scale(1.15);
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_emplory.active {
transform: translate(-10%, -20%) scale(1.15);
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_btw.active {
transform: translate(-90%, -20%) scale(1.15);
} section.m37_mm_core .m37_mm_core_graph_item.active:after {
transform: translate(-50%, -50%) scale(1.15);
opacity: 1;
}
section.m37_mm_core .m37_mm_core_graph_item.active .m37_mm_core_graph_item_inner:after {
transform: translate(-50%, -50%) scale(1.3);
filter: blur(50px);
opacity: .5;
} @media (hover: hover) and (pointer: fine) {
section.m37_mm_core .m37_mm_core_graph_item:hover .m37_mm_core_graph_active_border_item {
opacity: 1;
transform: translate(-50%, -50%) scale(1.5);
}
section.m37_mm_core .m37_mm_core_graph_item:hover .m37_mm_core_graph_item_inner:before {
width: 90%;
height: 90%;
filter: blur(25px);
opacity: .9;
}
section.m37_mm_core .m37_mm_core_graph_item:hover svg {
transform: scale(.87);
}
section.m37_mm_core .m37_mm_core_graph_item:hover {
z-index: 3;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_mM:hover {
transform: translate(-50%, -100%) scale(1.15);
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_emplory:hover {
transform: translate(-10%, -20%) scale(1.15);
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_btw:hover {
transform: translate(-90%, -20%) scale(1.15);
}
section.m37_mm_core .m37_mm_core_graph_item:hover:after {
transform: translate(-50%, -50%) scale(1.15);
opacity: 1;
}
section.m37_mm_core .m37_mm_core_graph_item:hover .m37_mm_core_graph_item_inner:after {
transform: translate(-50%, -50%) scale(1.3);
filter: blur(50px);
opacity: .5;
}
}
section.m37_mm_core .m37_brand_addition_button_container {
position: absolute;
left: -999999px;
top: -999999px;
z-index: 2;
opacity: 0;
transition: opacity .6s;
pointer-events: none;
}
section.m37_mm_core .m37_brand_addition_button_container.active {
opacity: 1;
}
section.m37_mm_core .m37_brand_addition_button_container.mM_core_btw .m37_mm_core_brand_button .m37_mm_core_brand_button_text {
color: #fff;
}
section.m37_mm_core .m37_brand_addition_button_container.mM_core_btw .m37_mm_core_brand_button svg {
fill: #fff;
}
section.m37_mm_core .m37_mm_core_brands_container.m37_mm_core_brands_mobile {
display: none;
}
@media all and (min-width: 992px) {
section.m37_mm_core .mM_col_33 {
width: calc(45% - 10px);
}
section.m37_mm_core .mM_col_66 {
width: calc(55% - 10px);
}
}
@media all and (min-width: 1200px) {
section.m37_mm_core .mM_col_33 {
width: calc(33.333% - 10px);
}
section.m37_mm_core .mM_col_66 {
width: calc(66.6666% - 10px);
}
}
@media all and (max-width: 2199px) {
section.m37_mm_core .m37_mm_core_text_container {
max-width: 63%;
}
}
@media all and (max-width: 1849px) {
section.m37_mm_core .m37_mm_core_text_container {
max-width: 75%;
}
}
@media all and (max-width: 1599px) {
section.m37_mm_core .m37_mm_core_text_container {
max-width: 89%;
}
}
@media all and (max-width: 1399px) {
section.m37_mm_core .m37_mm_core_graph_item {
width: 255px;
height: 255px;
}
section.m37_mm_core .m37_mm_core_claim {
font-size: 2.1625rem;
}
section.m37_mm_core .m37_mm_core_text_container {
max-width: 100%;
}
}
@media all and (max-width: 1199px) {
section.m37_mm_core .m37_mm_core_graph {
transform: translateX(-30px);
}
section.m37_mm_core .m37_mm_core_graph_item {
width: 215px;
height: 215px;
}
section.m37_mm_core .m37_mm_core_center_element {
width: 100px;
height: 100px;
}
section.m37_mm_core .m37_mm_core_center_element svg {
width: 75px;
}
}
@media all and (max-width: 991px) {
section.m37_mm_core .mM_col_33,
section.m37_mm_core .mM_col_66,
section.m37_mm_core .m37_mm_core_brands_container.m37_mm_core_brands_mobile {
width: 100%;
}
section.m37_mm_core .m37_mm_core_graph {
order: 2;
height: 450px;
margin-top: 40px;
transform: translateX(0);
position: relative;
z-index: 4;
}
section.m37_mm_core .m37_mm_core_content {
order: 1;
}
section.m37_mm_core .m37_mm_core_brands_container.m37_mm_core_brands_mobile {
order: 3;
}
section.m37_mm_core .m37_mm_core_brands_container:not(.m37_mm_core_brands_mobile) {
display: none;
}
section.m37_mm_core .m37_mm_core_brands_container.m37_mm_core_brands_mobile {
display: block;
margin-top: 0;
}
section.m37_mm_core .m37_mm_core_brand_item {
left: 0;
width: 100%;
top: auto;
bottom: 0;
}
}
@media all and (max-width: 767px) {
section.m37_mm_core .m37_mm_core_claim {
font-size: 1.8625rem;
}
section.m37_mm_core .m37_mm_core_brand_description_container {
max-width: 100%;
}
}
@media all and (max-width: 575px) {
section.m37_mm_core .m37_mm_core_claim {
font-size: 1.5625rem;
}
}
@media all and (max-width: 400px) {
section.m37_mm_core .m37_mm_core_graph_item {
width: 195px;
height: 195px;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_mM svg {
width: 134px;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_emplory svg {
width: 101px;
}
section.m37_mm_core .m37_mm_core_graph_item.mM_core_btw svg {
width: 111px;
}
}
@media all and (max-width: 350px) {
section.m37_mm_core .m37_mm_core_graph_item {
width: 175px;
height: 175px;
}
section.m37_mm_core .m37_mm_core_brand_logo_claim_container svg {
max-width: 100%;
}
}