:root {--bs-primary: #262527;--bs-secondary: #555257;--bs-dark: #262527;--bs-light: #dedede;--bs-body-color: #262527;--bs-body-bg: #fff;--bs-link-color: #4f536a;--bs-link-hover-color: #262527;--bs-border-radius: .375rem;--bs-focus-ring-color: rgba(79, 83, 106, .25);--bs-body-font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--bs-font-sans-serif: var(--bs-body-font-family);--bs-heading-font: "Playfair Display", Georgia, "Times New Roman", serif;--lh-base: 1.4;--lh-heading: 1.2;}html, body {font-family: "Urbanist", sans-serif;font-weight: 300;font-style: normal;font-optical-sizing: auto;line-height: var(--lh-base);color: var(--bs-body-color);overflow-x: hidden;overscroll-behavior-x: none;font-size: clamp(16px, calc(15px + 0.6vw), 18px);}h1,h2,h3,h4,h5,h6 {font-family: "Playfair Display SC", serif;font-weight: 400;font-style: normal;line-height: var(--lh-heading);color: var(--bs-dark);}p {max-width: 50em;}p:not(:last-child) {margin-bottom: 1.4em;}small {font-size: .8304rem;}.text-justify {text-align: justify;hyphens: auto;-webkit-hyphens: auto;-ms-hyphens: auto;word-wrap: break-word;}ul,ol {padding-left: 0;list-style-position: outside;}.small-caps {font-variant-caps: small-caps;}.sppb-panel-title {font-size: 1rem;}.article-details .article-ratings-social-share, .article-details .article-can-edit {display: none;}--- ## Responsive Font Scaling ```css @media (min-width: 390px) {html, body {font-size: clamp(16px, calc(15px + 0.65vw), 18.5px);}}@media (min-width: 480px) {html, body {font-size: clamp(16.8px, calc(14.5px + 0.75vw), 19.3px);}}@media (min-width: 768px) {html, body {font-size: clamp(17px, calc(14px + 0.8vw), 20px);}}@media (min-width: 1200px) {html, body {font-size: clamp(18px, calc(12px + 0.9vw), 21px);}}@media (min-width: 1440px) {html, body {font-size: clamp(19px, calc(12px + 1vw), 22px);}}@media (min-width: 2560px) {html, body {font-size: clamp(20px, calc(10px + 0.5vw), 24px);}}@media (min-width: 7680px) {html, body {font-size: clamp(22px, calc(8px + 0.4vw), 26px);}}@media (min-width: 1280px) and (min-resolution: 192dpi) {html, body {font-size: clamp(18.5px, calc(12px + 0.95vw), 21.5px);}}@media (min-width: 1440px) and (min-resolution: 192dpi) {html, body {font-size: clamp(19px, calc(12px + 1vw), 22px);}}@media (min-width: 1512px) and (min-resolution: 192dpi) {html, body {font-size: clamp(19.5px, calc(12px + 1vw), 22.5px);}}@media (min-width: 1728px) and (min-resolution: 192dpi) {html, body {font-size: clamp(20px, calc(12px + 1.05vw), 23px);}}--- ## New & Custom Classes ```css .box-shadow {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px, rgba(0, 0, 0, 0.12) 0px -3px 8px;}.intro-bg {background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a1c4fd", endColorstr="#c2e9fb", GradientType=1);}.intro-two-bg {background: linear-gradient(120deg, #6ca1cb 0%, #a0c2de 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6ca1cb", endColorstr="#a0c2de", GradientType=1);}.kesatauko-bg {background: linear-gradient(120deg, #5da92f 0%, #9bd46a 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5da92f", endColorstr="#9bd46a", GradientType=1);}.text-stroke {color: white;text-shadow: -1px -1px 0 #262527, 1px -1px 0 #262527, -1px 1px 0 #262527, 1px 1px 0 #262527;}.center {height: auto;display: flex;align-items: center;justify-content: center;}--- ## Responsive Styling ```css @media (min-width: 992px) {.img-left-radius {border-radius: 10px 0% 0% 10px;}}@media (max-width: 991.98px) {.img-top-radius {border-radius: 10px 10px 0px 0px;}}--- ## Scroll Down Animations ```css .css-scroll-down {display: flex;flex-flow: row;align-items: flex-start;padding: 50px 30px;}.css-scroll-down .single-scroll-down-animation {margin-right: 20px;width: calc(25% - 20px);margin-bottom: 50px;}.css-scroll-down .single-scroll-down-animation h4 {text-transform: uppercase;font-weight: 700;font-size: 20px;text-align: center;margin-bottom: 30px;}.scroll-down1, .scroll-down3 {width: 50px;height: 50px;border-radius: 100%;border: 2px solid #fff;font-size: 30px;overflow: hidden;cursor: pointer;display: flex;flex-flow: column;align-items: center;justify-content: center;margin: 0 auto;}.scroll-down1 i, .scroll-down3 i {color: #fff;animation: scrollDown1 1.5s ease infinite;}.scroll-down3 i {animation: scrollDown3 2s ease infinite;}.scroll-down2 {width: 30px;height: 50px;border: 2px solid #fff;border-radius: 50px;cursor: pointer;position: relative;overflow: hidden;margin: 0 auto;}.scroll-down2:hover {background-color: #fff;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}.scroll-down2:before {content: "";position: absolute;left: 50%;top: 20px;width: 6px;height: 6px;border-radius: 100%;transform: translateX(-50%);background: #fff;animation: scrollDown2 1.5s ease infinite;}.scroll-down2:after {content: "";position: absolute;left: 50%;top: 5px;width: 6px;height: 15px;border-radius: 3px;transform: translateX(-50%);background: #fff;}.scroll-down2:hover:before, .scroll-down2:hover:after {background: var(--bs-primary);}.scroll-down4 {width: 3px;height: 80px;background: #fff;animation: scrollDown4 2s ease infinite;margin: 0 auto;}.scroll-down5 {width: 2px;height: 110px;position: relative;background: transparent;animation: scrollDown5 1.5s ease infinite;border-radius: 100%;margin: 0 auto;}.scroll-down5:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(transparent, #fff, transparent);}@keyframes scrollDown1 {0% {transform: translateY(-15px);opacity: 0;}50% {transform: translateY(0px);opacity: 1;}100% {transform: translateY(15px);opacity: 0;}}@keyframes scrollDown2 {0% {transform: translate(-50%, 0px);opacity: 0;}50% {transform: translate(-50%, 8px);opacity: 1;}100% {transform: translate(-50%, 16px);opacity: 0;}}@keyframes scrollDown3 {0% {transform: translateY(-15px);opacity: 0;}45% {transform: translateY(0px);opacity: 1;}65% {transform: translateY(-5px);opacity: 1;}100% {transform: translateY(15px);opacity: 0;}}@keyframes scrollDown4 {0% {transform-origin: top;transform: scaleY(0);}45% {transform-origin: top;transform: scaleY(1);}55% {transform-origin: bottom;transform: scaleY(1);}100% {transform-origin: bottom;transform: scaleY(0);}}@keyframes scrollDown5 {0% {transform-origin: top;transform: scaleY(0);}45% {transform-origin: top;transform: scaleY(1);}55% {transform-origin: bottom;transform: scaleY(1);}100% {transform-origin: bottom;transform: scaleY(0);}}--- ## Header & Navigation ```css #sp-top-bar, #sp-logo, .sp-megamenu-parent, #offcanvas-toggler {display: none;}#sp-header {background-color: transparent;position: absolute;box-shadow: none;height: auto;}#sp-header .sp-module {width: 100%;}#sp-header.header-sticky {background-color: #fff;}#sp-menu > .sp-column {justify-content: center;}#sp-header.header-sticky .logo img {opacity: 0;height: 60px;}#sp-header.header-sticky .logo a {background: url(images/2024/06/15/lahde-risti-raumavapaasrk-logo-262527.png) no-repeat center/contain;margin-top: 0;height: 60px;}--- ## Menu Underline Animation ```css .menu_under a {position: relative;text-decoration: none;cursor: pointer;color: #fff;}.menu_under a::before {content: '';position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;background-color: currentColor;border-radius: 2px;transform: scaleX(0);transform-origin: right;transition: transform .3s ease-in-out;}.menu_under a:hover::before {transform: scaleX(1);transform-origin: left;}--- ## Layout Backgrounds & Footer ```css #sp-main-body, .bg-page {background: linear-gradient(120deg, #cfcfcf 0%, #dedede 100%);}#sp-footer, #sp-bottom, .footer-dark {background: var(--bs-dark);color: #fff;}.footer-dark a {color: #fff;}.footer-dark a:hover {opacity: .9;}--- ## Buttons ```css .btn-primary {--bs-btn-bg: var(--bs-primary);--bs-btn-border-color: var(--bs-primary);--bs-btn-hover-bg: #1b1b1c;--bs-btn-hover-border-color: #1b1b1c;--bs-btn-active-bg: #141415;--bs-btn-active-border-color: #141415;}.btn-outline-primary {--bs-btn-color: var(--bs-primary);--bs-btn-border-color: var(--bs-primary);--bs-btn-hover-bg: var(--bs-primary);--bs-btn-hover-border-color: var(--bs-primary);--bs-btn-hover-color: #fff;}.btn-secondary {--bs-btn-bg: var(--bs-secondary);--bs-btn-border-color: var(--bs-secondary);--bs-btn-hover-bg: #3e3c40;--bs-btn-hover-border-color: #3e3c40;}.sppb-btn {font-size: .8304rem;line-height: 1.2;}.sp-copyright {font-size: .64rem;font-family: var(--bs-body-font-family);font-weight: 400;font-style: normal;}