.bonusesDiv {
border-radius: 20px;
border: 1px solid #004766;
align-items: center;
text-align: center;
height: 300px;
background-color: #fff;
position: relative; 
z-index: 2; 
display: flex; 
justify-content: center; 
align-items: center;
flex-direction: column;
padding: 24px 5%;
}
.benefitTitle {
font-family: "acumin-pro-wide", sans-serif;
font-weight: 900;
font-size: clamp(22px, 2vw, 28px)!important;
color: #004766;
}
.benefitsButton {
width: 100%;
border-radius: 12px;
padding-top: 20px;
padding-bottom: 24px;
padding-left: 5%;
padding-right: 5%;
background-color: #004766;
font-size: 24px;
font-family: "quicksand", sans-serif;
font-weight: 700;
color: #fff;
margin-top: 24px;
border: 1px solid #004766!important;
}
.benefitsButton:hover {
background-color: #fff;
color:#004766;
}
.benefitsButton:focus {
background-color: #fff;
color:#004766;
}
.terms {
margin-top: 24px;
font-family: "quicksand", sans-serif;
color:#004766;
}
@media (max-width: 576px) { .col-xs-11 {
flex: 0 0 90%;
max-width: 90%;
}
}
.combinedDiv {
position: relative;
width: 33.3%;
}
@media (min-width: 1200px) and (max-width: 1919px) {
.benefitsButton {
font-size: clamp(18px, 1.5vw, 24px);
}
.benefitTitle {
font-size: clamp(24px, 1.5vw, 28px)!important;
}
}
@media (min-width: 300px) and (max-width: 1200px) {
.benefitsButton {
font-size: clamp(18px, 2.5vw, 24px);
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.bonusContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.combinedDiv {
flex: 1 0 48%; margin: 1%; } .bonusContainer .combinedDiv:nth-child(3) {
flex: 0 0 60%!important; }
.benefitsButton {
font-size: 20px!important;
}
} @media (min-width: 768px) and (max-width: 992px) {
.combinedDiv {
width: 100%;
}
.bonusContainer {
justify-content: center!important;
flex-direction: column!important;
align-items: center;
}
} @media (min-width: 576px) and (max-width: 768px) {
.combinedDiv {
width: 100%;
}
.benefitsButton {
padding: 16px 12px;
margin-top: 12px;
}
.terms {
margin-bottom: 0;
}
.bonusContainer {
flex-direction: column!important;
}
} @media (max-width: 576px) {
.combinedDiv {
width: 100%;
}
.benefitsButton {
padding: 16px 12px;
margin-top: 12px;
}
.terms {
margin-bottom: 0;
}
.bonusContainer {
flex-direction: column!important;
}
}
.bonusContainer {
gap: 20px;
position: relative; 
flex-direction: row;
}
.coverMe {
position: relative; z-index: 1;
align-items: center;
justify-content: center;
display: flex;
overflow: hidden;
} .coverMeCharacters {  vertical-align: middle;
}
@keyframes jumpIn {
0%, 10% {
transform: matrix(1.1, 0, 0, .9, 0, 243); }
35% {
transform: matrix(.9, 0, 0, 1.05, 0, 105); }
55% {
transform: matrix(1.05, 0, 0, .95, 0, 115); }
75%, 100% {
transform: translateY(110px); }
}
@keyframes jumpInMobile {
0%, 10% {
transform: matrix(1.05, 0, 0, .95, 0, 250); }
35% {
transform: matrix(.95, 0, 0, 1.05, 0, 120); }
55% {
transform: matrix(1.05, 0, 0, .95, 0, 130); }
75%, 100% {
transform: translateY(120px); }
} @media (min-width: 576px) {
.coverMeCharacters {
transform-origin: bottom; animation-name: jumpIn; animation-duration: 1.6s; animation-timing-function: cubic-bezier(.3, .8, .4, 1); animation-iteration-count: 1; animation-delay: 0s; animation-fill-mode: forwards;
}
#coverMeCharactersDog {
animation-delay: 0s; }
#coverMeCharactersWoman {
animation-delay: 0.5s; }
#coverMeCharactersMan {
animation-delay: 1s; }
} @media (prefers-reduced-motion: no-preference) {
.coverMeCharacters {  }
} @media (min-width: 576px) {
.coverMeCharacters { width: 225px;
height: auto;
}
}
@media (max-width: 576px) {
.coverMeCharacters {
width: 240px;  }
.coverMeCharacters {
transform-origin: bottom; animation-name: jumpInMobile; animation-duration: 1.6s; animation-timing-function: cubic-bezier(.3, .8, .4, 1); animation-iteration-count: 1; animation-delay: 0s; animation-fill-mode: forwards;
}
#coverMeCharactersDog {
animation-delay: 0s; }
#coverMeCharactersWoman {
animation-delay: 0.5s; }
#coverMeCharactersMan {
animation-delay: 1s; }
}
.hidden {
opacity: 0;
visibility: hidden;
animation: none !important;
}