.ff-bubble-intro-container {
position: relative;
margin-top: 120px;
margin-bottom: 200px;
}
@media screen and (max-width: 781px) {
.ff-bubble-intro-container {
margin-top: 50px;
margin-bottom: 100px;
}
}
.ff-bubble-intro-container .ff-svg-container {
position: absolute;
top: 50%;
z-index: -1;
height: min(100vh, 730px);
width: 100%;
transform: translateY(-50%);
pointer-events: none;
}
.ff-bubble-intro-container .ff-svg-container svg {
mix-blend-mode: multiply;
}
.ff-bubble-intro-container .bubble-intro-content-wrapper {
display: block;
}
.ff-bubble-intro-container .bubble-intro-content-wrapper .bubble-intro-content {
padding-left: 50px;
padding-right: 50px;
}
@media (min-width: 1023px) {
.ff-bubble-intro-container .bubble-intro-content-wrapper .bubble-intro-content {
padding-left: 35px;
padding-right: 35px;
}
}
@media (max-width: 767px) {
.ff-bubble-intro-container .bubble-intro-content-wrapper .bubble-intro-content {
padding-left: 0;
padding-right: 0;
}
}
.ff-bubble-intro-container .bubble-intro-content-wrapper .bubble-intro-content p {
color: #66a2bc;
font-size: clamp(30px, 3.7vw, 50px) !important;
line-height: clamp(41px, 3.7vw, 61px) !important;
}
.ff-bubble-intro-container .bubble-intro-content-wrapper .bubble-intro-citation {
margin-left: 20%;
padding-top: 70px;
}
@media (max-width: 767px) {
.ff-bubble-intro-container .bubble-intro-content-wrapper .bubble-intro-citation {
margin-left: 0;
padding-top: 50px;
}
}
.ff-bubble-intro-container .bubble-intro-content-wrapper .bubble-intro-citation p {
color: #003c59;
font-size: clamp(26px, 3.7vw, 45px) !important;
line-height: clamp(29px, 3.7vw, 48px) !important;
font-family: "TiemannPro-Roman", serif;
font-weight: 500;
}
.ff-bubble-intro-container div.ff-svg-container .ff-citation-svg:nth-child(1) svg {
margin-top: 10vh;
}
@media screen and (max-width: 676px) {
.ff-bubble-intro-container div.ff-svg-container.without-subline .ff-citation-svg:nth-child(1) {
width: 100% !important;
}
.ff-bubble-intro-container div.ff-svg-container.without-subline .ff-citation-svg:nth-child(2) {
width: 100% !important;
}
.ff-bubble-intro-container div.ff-svg-container.without-subline .ff-citation-svg:nth-child(3) {
width: 100% !important;
}
}
@media screen and (max-width: 1400px) {
.ff-bubble-intro-container div.ff-svg-container .ff-citation-svg:nth-child(1) {
width: 75% !important;
}
}
@media screen and (max-width: 676px) {
.ff-bubble-intro-container div.ff-svg-container .ff-citation-svg:nth-child(1) {
width: 85% !important;
}
.ff-bubble-intro-container div.ff-svg-container .ff-citation-svg:nth-child(2) {
width: 110% !important;
top: -20% !important;
left: -14% !important;
}
.ff-bubble-intro-container div.ff-svg-container .ff-citation-svg:nth-child(3) {
width: 70% !important;
}
}.ff-bubble-container {
position: relative;
display: flex;
justify-content: left;
color: #003c59;
}
@media screen and (min-width: 782px) {
.ff-bubble-container.ff-show-on-desktop {
display: flex !important;
}
}
.ff-bubble-container .ff-bubble-content {
width: 75%;
}
@media (max-width: 766px) {
.ff-bubble-container .ff-bubble-content {
width: 100%;
}
}
.ff-bubble-container .ff-bubble-content * {
color: inherit;
}
.ff-bubble-container .ff-bubble-content h2,
.ff-bubble-container .ff-bubble-content h3 {
font-size: clamp(31.5px, 3.7vw, 50px);
line-height: 1.2;
margin-bottom: 10px;
margin-top: 0;
}
.ff-bubble-container .ff-bubble-content h3 {
font-family: "FuturaLTPro-Light", sans-serif;
}
.ff-bubble-container .ff-bubble-content p {
font-size: clamp(26px, 3.7vw, 30px);
line-height: 1.4;
}
.ff-bubble-container.content-position-horizontal-middle {
justify-content: center;
}
.ff-bubble-container.content-position-horizontal-right {
justify-content: right;
}
.ff-bubble-container svg.ff-bubble {
position: absolute;
z-index: -1;
height: auto;
mix-blend-mode: multiply;
pointer-events: none;
aspect-ratio: 1/1;
top: var(--bubble-position-top, initial);
left: 0;
right: 0;
bottom: var(--bubble-position-bottom, initial);
transform: translate(var(--bubble-position-x, 0), var(--bubble-position-y, 0));
}
.ff-bubble-container.bubble-position-horizontal-left {
--bubble-position-x: -25%;
}
.ff-bubble-container.bubble-position-horizontal-middle {
--bubble-position-x: 0;
}
.ff-bubble-container.bubble-position-horizontal-right {
--bubble-position-x: 25%;
}
.ff-bubble-container.bubble-position-vertical-top {
--bubble-position-top: 0;
--bubble-position-y: -50%;
}
.ff-bubble-container.bubble-position-vertical-middle {
--bubble-position-top: 50%;
--bubble-position-y: -50%;
}
.ff-bubble-container.bubble-position-vertical-bottom {
--bubble-position-bottom: 0;
--bubble-position-y: 50%;
}
.block-editor-page .ff-bubble-container {
z-index: 0;
}