/* Fonts */
/* Font Size */
/* Colors */
/** Breakpoint sizes */
/** Mixins */
/* stylelint-disable media-query-no-invalid -- The SCSS is confuses stylelint, compiled CSS is valid */
/* stylelint-enable media-query-no-invalid */
.content-with-bear {
background-color: #E5F1FC;
position: relative;
max-width: 2000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
mask-image: url('data:image/svg+xml,');
mask-size: cover;
margin-top: 90px; }
.content-with-bear.affiliate .content-with-bear-inner {
flex-flow: row-reverse wrap; }
@media (max-width: 989px) {
.content-with-bear.affiliate .content-with-bear-inner {
flex-direction: column-reverse;
row-gap: 70px;
padding: 70px 20px; } }
@media (min-width: 993px) and (max-width: 1200px) {
.content-with-bear.affiliate .content-with-bear-inner {
padding-left: 20px;
padding-right: 20px; }
.content-with-bear.affiliate .content-with-bear-inner .content-with-bear-inner-img {
padding-left: 80px; } }
.content-with-bear__icon-top {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 2; }
.content-with-bear__icon-top svg {
width: initial; }
.content-with-bear__icon-top svg path {
fill: #fff; }
.content-with-bear-inner {
width: 100%;
max-width: 1720px;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 100px 0 185px;
align-items: center;
position: relative; }
@media (min-width: 1200px) and (max-width: 1740px) {
.content-with-bear-inner {
padding-left: 20px;
padding-right: 20px; } }
@media (max-width: 989px) {
.content-with-bear-inner {
padding: 100px 20px;
flex-direction: column-reverse;
row-gap: 70px; } }
.content-with-bear-inner-content {
width: 39.768%; }
@media (max-width: 989px) {
.content-with-bear-inner-content {
width: 100%; } }
.content-with-bear-inner-content .subtitle {
color: #007AE5;
font-size: 24px;
letter-spacing: 0.12em;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 28px; }
@media (max-width: 989px) {
.content-with-bear-inner-content .subtitle {
font-size: 18px; } }
.content-with-bear-inner-content h2 {
font-weight: 900;
line-height: 1;
margin-bottom: 15px; }
@media (max-width: 989px) {
.content-with-bear-inner-content h2 {
font-size: 41px; } }
.content-with-bear-inner-content .content-big {
font-size: 24px;
font-weight: 400;
line-height: 1.345;
margin-bottom: 27px; }
.content-with-bear-inner-content .content-small {
font-size: 21px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 27px; }
.content-with-bear-inner-content-buttons {
display: inline-flex;
height: 100%;
column-gap: 14px; }
@media (max-width: 989px) {
.content-with-bear-inner-content-buttons {
flex-direction: column;
width: 100%;
row-gap: 15px; } }
.content-with-bear-inner-content-buttons .button:first-of-type {
background: #007AE5; }
.content-with-bear-inner-content-buttons .button:first-of-type:hover, .content-with-bear-inner-content-buttons .button:first-of-type:focus {
background: #001C3D; }
.content-with-bear-inner-content-buttons .button:hover, .content-with-bear-inner-content-buttons .button:focus {
color: #fff;
background: #007AE5; }
.content-with-bear-inner-img {
width: 53.605%;
padding-left: 168px;
position: relative; }
@media (max-width: 989px) {
.content-with-bear-inner-img {
width: 100%;
padding-left: 65px; } }
.content-with-bear-inner-img .big-image {
width: 100%;
border-radius: 18px;
height: auto; }
.content-with-bear-inner-img .bear-image {
position: absolute;
bottom: -96px;
left: 0;
width: 364px;
height: 450px;
background-color: #E5F1FC;
mask-image: url('data:image/svg+xml,');
mask-size: contain;
mask-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center; }
@media (max-width: 989px) {
.content-with-bear-inner-img .bear-image {
width: 164px;
height: 250px; } }
.content-with-bear-inner-img .bear-image img {
width: 340px;
mask-image: url('data:image/svg+xml,');
mask-size: contain;
mask-repeat: no-repeat;
height: 426px;
object-fit: cover;
position: relative;
z-index: 1; }
@media (max-width: 989px) {
.content-with-bear-inner-img .bear-image img {
width: 146px;
height: 232px; } }
.content-with-bear-inner-img .bear-image::before {
content: "";
width: 346px;
height: 432px;
background-color: #007AE5;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
mask-image: url('data:image/svg+xml,');
mask-size: contain;
mask-repeat: no-repeat; }
@media (max-width: 989px) {
.content-with-bear-inner-img .bear-image::before {
width: 151px;
height: 233px;
top: 49%;
left: 50.3%; } }