.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}.u-hidden {
display: none !important
}
.u-block {
display: block !important
}
.u-inline {
display: inline !important
}
.u-inline-block {
display: inline-block !important
}
.u-flex {
display: flex !important
}
.u-inline-flex {
display: inline-flex !important
}
.u-grid {
display: grid !important
}
.u-flex-row {
flex-direction: row !important
}
.u-flex-col {
flex-direction: column !important
}
.u-flex-wrap {
flex-wrap: wrap !important
}
.u-flex-nowrap {
flex-wrap: nowrap !important
}
.u-justify-start {
justify-content: flex-start !important
}
.u-justify-end {
justify-content: flex-end !important
}
.u-justify-center {
justify-content: center !important
}
.u-justify-between {
justify-content: space-between !important
}
.u-justify-around {
justify-content: space-around !important
}
.u-justify-evenly {
justify-content: space-evenly !important
}
.u-items-start {
align-items: flex-start !important
}
.u-items-end {
align-items: flex-end !important
}
.u-items-center {
align-items: center !important
}
.u-items-baseline {
align-items: baseline !important
}
.u-items-stretch {
align-items: stretch !important
}
.u-flex-1 {
flex: 1 1 0% !important
}
.u-flex-auto {
flex: 1 1 auto !important
}
.u-flex-initial {
flex: 0 1 auto !important
}
.u-flex-none {
flex: none !important
}
.u-m-0 {
margin: 0 !important
}
.u-mt-0 {
margin-top: 0 !important
}
.u-mr-0 {
margin-right: 0 !important
}
.u-mb-0 {
margin-bottom: 0 !important
}
.u-ml-0 {
margin-left: 0 !important
}
.u-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important
}
.u-my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important
}
.u-m-1 {
margin: 0.25rem !important
}
.u-mt-1 {
margin-top: 0.25rem !important
}
.u-mr-1 {
margin-right: 0.25rem !important
}
.u-mb-1 {
margin-bottom: 0.25rem !important
}
.u-ml-1 {
margin-left: 0.25rem !important
}
.u-mx-1 {
margin-left: 0.25rem !important;
margin-right: 0.25rem !important
}
.u-my-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important
}
.u-m-2 {
margin: 0.5rem !important
}
.u-mt-2 {
margin-top: 0.5rem !important
}
.u-mr-2 {
margin-right: 0.5rem !important
}
.u-mb-2 {
margin-bottom: 0.5rem !important
}
.u-ml-2 {
margin-left: 0.5rem !important
}
.u-mx-2 {
margin-left: 0.5rem !important;
margin-right: 0.5rem !important
}
.u-my-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important
}
.u-m-3 {
margin: 0.75rem !important
}
.u-mt-3 {
margin-top: 0.75rem !important
}
.u-mr-3 {
margin-right: 0.75rem !important
}
.u-mb-3 {
margin-bottom: 0.75rem !important
}
.u-ml-3 {
margin-left: 0.75rem !important
}
.u-mx-3 {
margin-left: 0.75rem !important;
margin-right: 0.75rem !important
}
.u-my-3 {
margin-top: 0.75rem !important;
margin-bottom: 0.75rem !important
}
.u-m-4 {
margin: 1rem !important
}
.u-mt-4 {
margin-top: 1rem !important
}
.u-mr-4 {
margin-right: 1rem !important
}
.u-mb-4 {
margin-bottom: 1rem !important
}
.u-ml-4 {
margin-left: 1rem !important
}
.u-mx-4 {
margin-left: 1rem !important;
margin-right: 1rem !important
}
.u-my-4 {
margin-top: 1rem !important;
margin-bottom: 1rem !important
}
.u-m-5 {
margin: 1.25rem !important
}
.u-mt-5 {
margin-top: 1.25rem !important
}
.u-mr-5 {
margin-right: 1.25rem !important
}
.u-mb-5 {
margin-bottom: 1.25rem !important
}
.u-ml-5 {
margin-left: 1.25rem !important
}
.u-mx-5 {
margin-left: 1.25rem !important;
margin-right: 1.25rem !important
}
.u-my-5 {
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important
}
.u-m-6 {
margin: 1.5rem !important
}
.u-mt-6 {
margin-top: 1.5rem !important
}
.u-mr-6 {
margin-right: 1.5rem !important
}
.u-mb-6 {
margin-bottom: 1.5rem !important
}
.u-ml-6 {
margin-left: 1.5rem !important
}
.u-mx-6 {
margin-left: 1.5rem !important;
margin-right: 1.5rem !important
}
.u-my-6 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important
}
.u-m-8 {
margin: 2rem !important
}
.u-mt-8 {
margin-top: 2rem !important
}
.u-mr-8 {
margin-right: 2rem !important
}
.u-mb-8 {
margin-bottom: 2rem !important
}
.u-ml-8 {
margin-left: 2rem !important
}
.u-mx-8 {
margin-left: 2rem !important;
margin-right: 2rem !important
}
.u-my-8 {
margin-top: 2rem !important;
margin-bottom: 2rem !important
}
.u-m-10 {
margin: 2.5rem !important
}
.u-mt-10 {
margin-top: 2.5rem !important
}
.u-mr-10 {
margin-right: 2.5rem !important
}
.u-mb-10 {
margin-bottom: 2.5rem !important
}
.u-ml-10 {
margin-left: 2.5rem !important
}
.u-mx-10 {
margin-left: 2.5rem !important;
margin-right: 2.5rem !important
}
.u-my-10 {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important
}
.u-m-12 {
margin: 3rem !important
}
.u-mt-12 {
margin-top: 3rem !important
}
.u-mr-12 {
margin-right: 3rem !important
}
.u-mb-12 {
margin-bottom: 3rem !important
}
.u-ml-12 {
margin-left: 3rem !important
}
.u-mx-12 {
margin-left: 3rem !important;
margin-right: 3rem !important
}
.u-my-12 {
margin-top: 3rem !important;
margin-bottom: 3rem !important
}
.u-m-16 {
margin: 4rem !important
}
.u-mt-16 {
margin-top: 4rem !important
}
.u-mr-16 {
margin-right: 4rem !important
}
.u-mb-16 {
margin-bottom: 4rem !important
}
.u-ml-16 {
margin-left: 4rem !important
}
.u-mx-16 {
margin-left: 4rem !important;
margin-right: 4rem !important
}
.u-my-16 {
margin-top: 4rem !important;
margin-bottom: 4rem !important
}
.u-m-20 {
margin: 5rem !important
}
.u-mt-20 {
margin-top: 5rem !important
}
.u-mr-20 {
margin-right: 5rem !important
}
.u-mb-20 {
margin-bottom: 5rem !important
}
.u-ml-20 {
margin-left: 5rem !important
}
.u-mx-20 {
margin-left: 5rem !important;
margin-right: 5rem !important
}
.u-my-20 {
margin-top: 5rem !important;
margin-bottom: 5rem !important
}
.u-m-24 {
margin: 6rem !important
}
.u-mt-24 {
margin-top: 6rem !important
}
.u-mr-24 {
margin-right: 6rem !important
}
.u-mb-24 {
margin-bottom: 6rem !important
}
.u-ml-24 {
margin-left: 6rem !important
}
.u-mx-24 {
margin-left: 6rem !important;
margin-right: 6rem !important
}
.u-my-24 {
margin-top: 6rem !important;
margin-bottom: 6rem !important
}
.u-m-32 {
margin: 8rem !important
}
.u-mt-32 {
margin-top: 8rem !important
}
.u-mr-32 {
margin-right: 8rem !important
}
.u-mb-32 {
margin-bottom: 8rem !important
}
.u-ml-32 {
margin-left: 8rem !important
}
.u-mx-32 {
margin-left: 8rem !important;
margin-right: 8rem !important
}
.u-my-32 {
margin-top: 8rem !important;
margin-bottom: 8rem !important
}
.u-p-0 {
padding: 0 !important
}
.u-pt-0 {
padding-top: 0 !important
}
.u-pr-0 {
padding-right: 0 !important
}
.u-pb-0 {
padding-bottom: 0 !important
}
.u-pl-0 {
padding-left: 0 !important
}
.u-px-0 {
padding-left: 0 !important;
padding-right: 0 !important
}
.u-py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important
}
.u-p-1 {
padding: 0.25rem !important
}
.u-pt-1 {
padding-top: 0.25rem !important
}
.u-pr-1 {
padding-right: 0.25rem !important
}
.u-pb-1 {
padding-bottom: 0.25rem !important
}
.u-pl-1 {
padding-left: 0.25rem !important
}
.u-px-1 {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important
}
.u-py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important
}
.u-p-2 {
padding: 0.5rem !important
}
.u-pt-2 {
padding-top: 0.5rem !important
}
.u-pr-2 {
padding-right: 0.5rem !important
}
.u-pb-2 {
padding-bottom: 0.5rem !important
}
.u-pl-2 {
padding-left: 0.5rem !important
}
.u-px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important
}
.u-py-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important
}
.u-p-3 {
padding: 0.75rem !important
}
.u-pt-3 {
padding-top: 0.75rem !important
}
.u-pr-3 {
padding-right: 0.75rem !important
}
.u-pb-3 {
padding-bottom: 0.75rem !important
}
.u-pl-3 {
padding-left: 0.75rem !important
}
.u-px-3 {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important
}
.u-py-3 {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important
}
.u-p-4 {
padding: 1rem !important
}
.u-pt-4 {
padding-top: 1rem !important
}
.u-pr-4 {
padding-right: 1rem !important
}
.u-pb-4 {
padding-bottom: 1rem !important
}
.u-pl-4 {
padding-left: 1rem !important
}
.u-px-4 {
padding-left: 1rem !important;
padding-right: 1rem !important
}
.u-py-4 {
padding-top: 1rem !important;
padding-bottom: 1rem !important
}
.u-p-5 {
padding: 1.25rem !important
}
.u-pt-5 {
padding-top: 1.25rem !important
}
.u-pr-5 {
padding-right: 1.25rem !important
}
.u-pb-5 {
padding-bottom: 1.25rem !important
}
.u-pl-5 {
padding-left: 1.25rem !important
}
.u-px-5 {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important
}
.u-py-5 {
padding-top: 1.25rem !important;
padding-bottom: 1.25rem !important
}
.u-p-6 {
padding: 1.5rem !important
}
.u-pt-6 {
padding-top: 1.5rem !important
}
.u-pr-6 {
padding-right: 1.5rem !important
}
.u-pb-6 {
padding-bottom: 1.5rem !important
}
.u-pl-6 {
padding-left: 1.5rem !important
}
.u-px-6 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important
}
.u-py-6 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important
}
.u-p-8 {
padding: 2rem !important
}
.u-pt-8 {
padding-top: 2rem !important
}
.u-pr-8 {
padding-right: 2rem !important
}
.u-pb-8 {
padding-bottom: 2rem !important
}
.u-pl-8 {
padding-left: 2rem !important
}
.u-px-8 {
padding-left: 2rem !important;
padding-right: 2rem !important
}
.u-py-8 {
padding-top: 2rem !important;
padding-bottom: 2rem !important
}
.u-p-10 {
padding: 2.5rem !important
}
.u-pt-10 {
padding-top: 2.5rem !important
}
.u-pr-10 {
padding-right: 2.5rem !important
}
.u-pb-10 {
padding-bottom: 2.5rem !important
}
.u-pl-10 {
padding-left: 2.5rem !important
}
.u-px-10 {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important
}
.u-py-10 {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important
}
.u-p-12 {
padding: 3rem !important
}
.u-pt-12 {
padding-top: 3rem !important
}
.u-pr-12 {
padding-right: 3rem !important
}
.u-pb-12 {
padding-bottom: 3rem !important
}
.u-pl-12 {
padding-left: 3rem !important
}
.u-px-12 {
padding-left: 3rem !important;
padding-right: 3rem !important
}
.u-py-12 {
padding-top: 3rem !important;
padding-bottom: 3rem !important
}
.u-p-16 {
padding: 4rem !important
}
.u-pt-16 {
padding-top: 4rem !important
}
.u-pr-16 {
padding-right: 4rem !important
}
.u-pb-16 {
padding-bottom: 4rem !important
}
.u-pl-16 {
padding-left: 4rem !important
}
.u-px-16 {
padding-left: 4rem !important;
padding-right: 4rem !important
}
.u-py-16 {
padding-top: 4rem !important;
padding-bottom: 4rem !important
}
.u-p-20 {
padding: 5rem !important
}
.u-pt-20 {
padding-top: 5rem !important
}
.u-pr-20 {
padding-right: 5rem !important
}
.u-pb-20 {
padding-bottom: 5rem !important
}
.u-pl-20 {
padding-left: 5rem !important
}
.u-px-20 {
padding-left: 5rem !important;
padding-right: 5rem !important
}
.u-py-20 {
padding-top: 5rem !important;
padding-bottom: 5rem !important
}
.u-p-24 {
padding: 6rem !important
}
.u-pt-24 {
padding-top: 6rem !important
}
.u-pr-24 {
padding-right: 6rem !important
}
.u-pb-24 {
padding-bottom: 6rem !important
}
.u-pl-24 {
padding-left: 6rem !important
}
.u-px-24 {
padding-left: 6rem !important;
padding-right: 6rem !important
}
.u-py-24 {
padding-top: 6rem !important;
padding-bottom: 6rem !important
}
.u-p-32 {
padding: 8rem !important
}
.u-pt-32 {
padding-top: 8rem !important
}
.u-pr-32 {
padding-right: 8rem !important
}
.u-pb-32 {
padding-bottom: 8rem !important
}
.u-pl-32 {
padding-left: 8rem !important
}
.u-px-32 {
padding-left: 8rem !important;
padding-right: 8rem !important
}
.u-py-32 {
padding-top: 8rem !important;
padding-bottom: 8rem !important
}
.u-text-xs {
font-size: .75rem !important
}
.u-text-sm {
font-size: .875rem !important
}
.u-text-base {
font-size: 1rem !important
}
.u-text-lg {
font-size: 1.125rem !important
}
.u-text-xl {
font-size: 1.25rem !important
}
.u-text-2xl {
font-size: 1.5rem !important
}
.u-text-3xl {
font-size: 1.875rem !important
}
.u-text-4xl {
font-size: 2.25rem !important
}
.u-text-5xl {
font-size: 3rem !important
}
.u-text-6xl {
font-size: 3.75rem !important
}
.u-font-light {
font-weight: 300 !important
}
.u-font-normal {
font-weight: 400 !important
}
.u-font-medium {
font-weight: 500 !important
}
.u-font-semibold {
font-weight: 600 !important
}
.u-font-bold {
font-weight: 700 !important
}
.u-font-extrabold {
font-weight: 800 !important
}
.u-text-left {
text-align: left !important
}
.u-text-center {
text-align: center !important
}
.u-text-right {
text-align: right !important
}
.u-text-justify {
text-align: justify !important
}
.u-text-primary {
color: #202124 !important
}
.u-text-secondary {
color: #5f6368 !important
}
.u-text-tertiary {
color: #9aa0a6 !important
}
.u-text-inverse {
color: #fff !important
}
.u-text-brand {
color: #03a2cc !important
}
.u-text-success {
color: #34a853 !important
}
.u-text-warning {
color: #fbbc04 !important
}
.u-text-error {
color: #ea4335 !important
}
.u-underline {
text-decoration: underline !important
}
.u-no-underline {
text-decoration: none !important
}
.u-line-through {
text-decoration: line-through !important
}
.u-uppercase {
text-transform: uppercase !important
}
.u-lowercase {
text-transform: lowercase !important
}
.u-capitalize {
text-transform: capitalize !important
}
.u-normal-case {
text-transform: none !important
}
.u-leading-tight {
line-height: 1.25 !important
}
.u-leading-snug {
line-height: 1.375 !important
}
.u-leading-normal {
line-height: 1.5 !important
}
.u-leading-relaxed {
line-height: 1.625 !important
}
.u-leading-loose {
line-height: 2 !important
}
.u-tracking-tighter {
letter-spacing: -0.05em !important
}
.u-tracking-tight {
letter-spacing: -0.025em !important
}
.u-tracking-normal {
letter-spacing: 0 !important
}
.u-tracking-wide {
letter-spacing: .025em !important
}
.u-tracking-wider {
letter-spacing: .05em !important
}
.u-tracking-widest {
letter-spacing: .1em !important
}
.u-bg-primary {
background-color: #fff !important
}
.u-bg-secondary {
background-color: #f8f9fa !important
}
.u-bg-tertiary {
background-color: #f1f3f4 !important
}
.u-bg-brand {
background-color: #03a2cc !important
}
.u-bg-success {
background-color: #34a853 !important
}
.u-bg-warning {
background-color: #fbbc04 !important
}
.u-bg-error {
background-color: #ea4335 !important
}
.u-bg-transparent {
background-color: rgba(0, 0, 0, 0) !important
}
.u-border {
border: 1px solid #dadce0 !important
}
.u-border-0 {
border: 0 !important
}
.u-border-t {
border-top: 1px solid #dadce0 !important
}
.u-border-r {
border-right: 1px solid #dadce0 !important
}
.u-border-b {
border-bottom: 1px solid #dadce0 !important
}
.u-border-l {
border-left: 1px solid #dadce0 !important
}
.u-rounded-none {
border-radius: 0 !important
}
.u-rounded-sm {
border-radius: .125rem !important
}
.u-rounded {
border-radius: .25rem !important
}
.u-rounded-md {
border-radius: .375rem !important
}
.u-rounded-lg {
border-radius: .5rem !important
}
.u-rounded-xl {
border-radius: .75rem !important
}
.u-rounded-2xl {
border-radius: 1rem !important
}
.u-rounded-3xl {
border-radius: 1.5rem !important
}
.u-rounded-full {
border-radius: 9999px !important
}
.u-shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}
.u-shadow {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
}
.u-shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
}
.u-shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}
.u-shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
}
.u-shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}
.u-shadow-inner {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06)
}
.u-shadow-none {
box-shadow: none !important
}
.u-static {
position: static !important
}
.u-relative {
position: relative !important
}
.u-absolute {
position: absolute !important
}
.u-fixed {
position: fixed !important
}
.u-sticky {
position: sticky !important
}
.u-overflow-auto {
overflow: auto !important
}
.u-overflow-hidden {
overflow: hidden !important
}
.u-overflow-visible {
overflow: visible !important
}
.u-overflow-scroll {
overflow: scroll !important
}
.u-overflow-x-auto {
overflow-x: auto !important
}
.u-overflow-x-hidden {
overflow-x: hidden !important
}
.u-overflow-y-auto {
overflow-y: auto !important
}
.u-overflow-y-hidden {
overflow-y: hidden !important
}
.u-w-auto {
width: auto !important
}
.u-w-full {
width: 100% !important
}
.u-w-screen {
width: 100vw !important
}
.u-w-min {
width: min-content !important
}
.u-w-max {
width: max-content !important
}
.u-h-auto {
height: auto !important
}
.u-h-full {
height: 100% !important
}
.u-h-screen {
height: 100vh !important
}
.u-h-min {
height: min-content !important
}
.u-h-max {
height: max-content !important
}
.u-opacity-0 {
opacity: 0 !important
}
.u-opacity-25 {
opacity: .25 !important
}
.u-opacity-50 {
opacity: .5 !important
}
.u-opacity-75 {
opacity: .75 !important
}
.u-opacity-100 {
opacity: 1 !important
}
.u-cursor-auto {
cursor: auto !important
}
.u-cursor-default {
cursor: default !important
}
.u-cursor-pointer {
cursor: pointer !important
}
.u-cursor-wait {
cursor: wait !important
}
.u-cursor-text {
cursor: text !important
}
.u-cursor-move {
cursor: move !important
}
.u-cursor-help {
cursor: help !important
}
.u-cursor-not-allowed {
cursor: not-allowed !important
}
.u-select-none {
user-select: none !important
}
.u-select-text {
user-select: text !important
}
.u-select-all {
user-select: all !important
}
.u-select-auto {
user-select: auto !important
}
@media (min-width: 480px) {
.u-sm\:hidden {
display: none !important
}
.u-sm\:block {
display: block !important
}
.u-sm\:flex {
display: flex !important
}
.u-sm\:grid {
display: grid !important
}
.u-sm\:text-left {
text-align: left !important
}
.u-sm\:text-center {
text-align: center !important
}
.u-sm\:text-right {
text-align: right !important
}
.u-sm\:justify-start {
justify-content: flex-start !important
}
.u-sm\:justify-center {
justify-content: center !important
}
.u-sm\:justify-end {
justify-content: flex-end !important
}
.u-sm\:justify-between {
justify-content: space-between !important
}
.u-sm\:items-start {
align-items: flex-start !important
}
.u-sm\:items-center {
align-items: center !important
}
.u-sm\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 768px) {
.u-md\:hidden {
display: none !important
}
.u-md\:block {
display: block !important
}
.u-md\:flex {
display: flex !important
}
.u-md\:grid {
display: grid !important
}
.u-md\:text-left {
text-align: left !important
}
.u-md\:text-center {
text-align: center !important
}
.u-md\:text-right {
text-align: right !important
}
.u-md\:justify-start {
justify-content: flex-start !important
}
.u-md\:justify-center {
justify-content: center !important
}
.u-md\:justify-end {
justify-content: flex-end !important
}
.u-md\:justify-between {
justify-content: space-between !important
}
.u-md\:items-start {
align-items: flex-start !important
}
.u-md\:items-center {
align-items: center !important
}
.u-md\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 1024px) {
.u-lg\:hidden {
display: none !important
}
.u-lg\:block {
display: block !important
}
.u-lg\:flex {
display: flex !important
}
.u-lg\:grid {
display: grid !important
}
.u-lg\:text-left {
text-align: left !important
}
.u-lg\:text-center {
text-align: center !important
}
.u-lg\:text-right {
text-align: right !important
}
.u-lg\:justify-start {
justify-content: flex-start !important
}
.u-lg\:justify-center {
justify-content: center !important
}
.u-lg\:justify-end {
justify-content: flex-end !important
}
.u-lg\:justify-between {
justify-content: space-between !important
}
.u-lg\:items-start {
align-items: flex-start !important
}
.u-lg\:items-center {
align-items: center !important
}
.u-lg\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 1280px) {
.u-xl\:hidden {
display: none !important
}
.u-xl\:block {
display: block !important
}
.u-xl\:flex {
display: flex !important
}
.u-xl\:grid {
display: grid !important
}
.u-xl\:text-left {
text-align: left !important
}
.u-xl\:text-center {
text-align: center !important
}
.u-xl\:text-right {
text-align: right !important
}
.u-xl\:justify-start {
justify-content: flex-start !important
}
.u-xl\:justify-center {
justify-content: center !important
}
.u-xl\:justify-end {
justify-content: flex-end !important
}
.u-xl\:justify-between {
justify-content: space-between !important
}
.u-xl\:items-start {
align-items: flex-start !important
}
.u-xl\:items-center {
align-items: center !important
}
.u-xl\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 1536px) {
.u-2xl\:hidden {
display: none !important
}
.u-2xl\:block {
display: block !important
}
.u-2xl\:flex {
display: flex !important
}
.u-2xl\:grid {
display: grid !important
}
.u-2xl\:text-left {
text-align: left !important
}
.u-2xl\:text-center {
text-align: center !important
}
.u-2xl\:text-right {
text-align: right !important
}
.u-2xl\:justify-start {
justify-content: flex-start !important
}
.u-2xl\:justify-center {
justify-content: center !important
}
.u-2xl\:justify-end {
justify-content: flex-end !important
}
.u-2xl\:justify-between {
justify-content: space-between !important
}
.u-2xl\:items-start {
align-items: flex-start !important
}
.u-2xl\:items-center {
align-items: center !important
}
.u-2xl\:items-end {
align-items: flex-end !important
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeOut {
from {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9)
}
to {
opacity: 1;
transform: scale(1)
}
}
@keyframes scaleOut {
from {
opacity: 1;
transform: scale(1)
}
to {
opacity: 0;
transform: scale(0.9)
}
}
@keyframes rotateIn {
from {
opacity: 0;
transform: rotate(-180deg)
}
to {
opacity: 1;
transform: rotate(0deg)
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0)
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0)
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0)
}
90% {
transform: translate3d(0, -4px, 0)
}
}
@keyframes pulse {
0% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
100% {
transform: scale(1)
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0)
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px)
}
20%, 40%, 60%, 80% {
transform: translateX(10px)
}
}
@keyframes spin {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0
}
}
@keyframes wiggle {
0%, 7% {
transform: rotateZ(0)
}
15% {
transform: rotateZ(-15deg)
}
20% {
transform: rotateZ(10deg)
}
25% {
transform: rotateZ(-10deg)
}
30% {
transform: rotateZ(6deg)
}
35% {
transform: rotateZ(-4deg)
}
40%, 100% {
transform: rotateZ(0)
}
}
.animate-fade-in {
animation: fadeIn 300ms ease
}
.animate-fade-out {
animation: fadeOut 300ms ease
}
.animate-slide-up {
animation: slideUp 300ms ease
}
.animate-slide-down {
animation: slideDown 300ms ease
}
.animate-slide-in-left {
animation: slideInLeft 300ms ease
}
.animate-slide-in-right {
animation: slideInRight 300ms ease
}
.animate-scale-in {
animation: scaleIn 300ms ease
}
.animate-scale-out {
animation: scaleOut 300ms ease
}
.animate-rotate-in {
animation: rotateIn 300ms ease
}
.animate-bounce {
animation: bounce 1s infinite
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
.animate-shake {
animation: shake .5s ease-in-out
}
.animate-spin {
animation: spin 1s linear infinite
}
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
}
.animate-wiggle {
animation: wiggle 1s ease-in-out
}
.animate-delay-75 {
animation-delay: 75ms
}
.animate-delay-100 {
animation-delay: 100ms
}
.animate-delay-150 {
animation-delay: 150ms
}
.animate-delay-200 {
animation-delay: 200ms
}
.animate-delay-300 {
animation-delay: 300ms
}
.animate-delay-500 {
animation-delay: 500ms
}
.animate-delay-700 {
animation-delay: 700ms
}
.animate-delay-1000 {
animation-delay: 1000ms
}
.animate-duration-75 {
animation-duration: 75ms
}
.animate-duration-100 {
animation-duration: 100ms
}
.animate-duration-150 {
animation-duration: 150ms
}
.animate-duration-200 {
animation-duration: 200ms
}
.animate-duration-300 {
animation-duration: 300ms
}
.animate-duration-500 {
animation-duration: 500ms
}
.animate-duration-700 {
animation-duration: 700ms
}
.animate-duration-1000 {
animation-duration: 1000ms
}
.animate-fill-none {
animation-fill-mode: none
}
.animate-fill-forwards {
animation-fill-mode: forwards
}
.animate-fill-backwards {
animation-fill-mode: backwards
}
.animate-fill-both {
animation-fill-mode: both
}
.animate-once {
animation-iteration-count: 1
}
.animate-twice {
animation-iteration-count: 2
}
.animate-thrice {
animation-iteration-count: 3
}
.animate-infinite {
animation-iteration-count: infinite
}
.animate-normal {
animation-direction: normal
}
.animate-reverse {
animation-direction: reverse
}
.animate-alternate {
animation-direction: alternate
}
.animate-alternate-reverse {
animation-direction: alternate-reverse
}
.animate-play {
animation-play-state: running
}
.animate-pause {
animation-play-state: paused
}
.hover\:animate-bounce:hover {
animation: bounce 1s infinite
}
.hover\:animate-pulse:hover {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
.hover\:animate-spin:hover {
animation: spin 1s linear infinite
}
.hover\:animate-ping:hover {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
}
.hover\:animate-wiggle:hover {
animation: wiggle 1s ease-in-out
}
@media (prefers-reduced-motion: reduce) {
.animate-fade-in, .animate-fade-out, .animate-slide-up, .animate-slide-down, .animate-slide-in-left, .animate-slide-in-right, .animate-scale-in, .animate-scale-out, .animate-rotate-in, .animate-bounce, .animate-pulse, .animate-shake, .animate-spin, .animate-ping, .animate-wiggle {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important
}
}
*, *:before, *:after {
box-sizing: border-box
}
html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, input, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video, button {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: inherit;
line-height: inherit;
vertical-align: baseline;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-size-adjust: none
}
footer, header, nav, section, main {
display: block
}
body {
line-height: 1
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
input {
-webkit-appearance: none;
border-radius: 0
}
a {
text-decoration: none
}
@font-face {
font-family: InstrumentSans;
font-display: swap;
src: url(//tonagena.cz/wp-content/themes/tonagena/assets/fonts/InstrumentSans-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal
}
@font-face {
font-family: InstrumentSans;
font-display: swap;
src: url(//tonagena.cz/wp-content/themes/tonagena/assets/fonts/InstrumentSans-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal
}
@font-face {
font-family: InstrumentSans;
font-display: swap;
src: url(//tonagena.cz/wp-content/themes/tonagena/assets/fonts/InstrumentSans-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal
}
@font-face {
font-family: InstrumentSans;
font-display: swap;
src: url(//tonagena.cz/wp-content/themes/tonagena/assets/fonts/InstrumentSans-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal
}
.splide__container {
box-sizing: border-box;
position: relative
}
.splide__list {
backface-visibility: hidden;
display: -ms-flexbox;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block
}
.splide__pagination {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
pointer-events: none
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto
}
.splide:not(.is-overflow) .splide__pagination {
display: none
}
.splide__progress__bar {
width: 0
}
.splide {
position: relative;
visibility: hidden
}
.splide.is-initialized, .splide.is-rendered {
visibility: visible
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative
}
.splide__slide img {
vertical-align: bottom
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
display: none
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0
}
@keyframes splide-loading {
0% {
transform: rotate(0)
}
to {
transform: rotate(1turn)
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none
}
.splide__track--fade > .splide__list > .splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
opacity: 1;
z-index: 1
}
.splide--rtl {
direction: rtl
}
.splide__track--ttb > .splide__list {
display: block
}
.splide__arrow {
-ms-flex-align: center;
align-items: center;
background: #ccc;
border: 0;
border-radius: 50%;
cursor: pointer;
display: -ms-flexbox;
display: flex;
height: 2em;
-ms-flex-pack: center;
justify-content: center;
opacity: .7;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
z-index: 1
}
.splide__arrow svg {
fill: #000;
height: 1.2em;
width: 1.2em
}
.splide__arrow:hover:not(:disabled) {
opacity: .9
}
.splide__arrow:disabled {
opacity: .3
}
.splide__arrow:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__arrow--prev {
left: 1em
}
.splide__arrow--prev svg {
transform: scaleX(-1)
}
.splide__arrow--next {
right: 1em
}
.splide.is-focus-in .splide__arrow:focus {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__pagination {
bottom: .5em;
left: 0;
padding: 0 1em;
position: absolute;
right: 0;
z-index: 1
}
.splide__pagination__page {
background: #ccc;
border: 0;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 3px;
opacity: .7;
padding: 0;
position: relative;
transition: transform .2s linear;
width: 8px
}
.splide__pagination__page.is-active {
background: #fff;
transform: scale(1.4);
z-index: 1
}
.splide__pagination__page:hover {
cursor: pointer;
opacity: .9
}
.splide__pagination__page:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide.is-focus-in .splide__pagination__page:focus {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__progress__bar {
background: #ccc;
height: 3px
}
.splide__slide {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.splide__slide:focus {
outline: 0
}
@supports (outline-offset: -3px) {
.splide__slide:focus-visible {
outline: 3px solid #0bf;
outline-offset: -3px
}
}
@media screen and (-ms-high-contrast: none) {
.splide__slide:focus-visible {
border: 3px solid #0bf
}
}
@supports (outline-offset: -3px) {
.splide.is-focus-in .splide__slide:focus {
outline: 3px solid #0bf;
outline-offset: -3px
}
}
@media screen and (-ms-high-contrast: none) {
.splide.is-focus-in .splide__slide:focus {
border: 3px solid #0bf
}
.splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
border-color: #0bf
}
}
.splide__toggle {
cursor: pointer
}
.splide__toggle:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide.is-focus-in .splide__toggle:focus {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__track--nav > .splide__list > .splide__slide {
border: 3px solid rgba(0, 0, 0, 0);
cursor: pointer
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
border: 3px solid #000
}
.splide__arrows--rtl .splide__arrow--prev {
left: auto;
right: 1em
}
.splide__arrows--rtl .splide__arrow--prev svg {
transform: scaleX(1)
}
.splide__arrows--rtl .splide__arrow--next {
left: 1em;
right: auto
}
.splide__arrows--rtl .splide__arrow--next svg {
transform: scaleX(-1)
}
.splide__arrows--ttb .splide__arrow {
left: 50%;
transform: translate(-50%)
}
.splide__arrows--ttb .splide__arrow--prev {
top: 1em
}
.splide__arrows--ttb .splide__arrow--prev svg {
transform: rotate(-90deg)
}
.splide__arrows--ttb .splide__arrow--next {
bottom: 1em;
top: auto
}
.splide__arrows--ttb .splide__arrow--next svg {
transform: rotate(90deg)
}
.splide__pagination--ttb {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
left: auto;
padding: 1em 0;
right: .5em;
top: 0
}
.btn {
background: none;
border: none;
padding: 0;
margin: 0;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: .875rem;
font-weight: 500;
line-height: 1.5
}
.btn:focus {
outline: none;
box-shadow: none
}
.btn {
height: 44px;
padding: .75rem 1.5rem;
border-radius: .375rem;
transition: all 300ms ease;
text-decoration: none;
cursor: pointer;
user-select: none
}
.btn:disabled {
opacity: .6;
cursor: not-allowed
}
.btn--primary {
background-color: #03a2cc;
color: #fff;
border: 1px solid #03a2cc
}
.btn--primary:hover:not(:disabled) {
background-color: #0288a3;
border-color: #0288a3;
transition: transform 300ms ease
}
.btn--primary:hover:not(:disabled):hover {
transform: translateY(-4px)
}
.btn--primary:focus:focus {
outline: none;
box-shadow: none
}
.btn--secondary {
background-color: rgba(0, 0, 0, 0);
color: #03a2cc;
border: 1px solid #03a2cc
}
.btn--secondary:hover:not(:disabled) {
background-color: #03a2cc;
color: #fff;
transition: transform 300ms ease
}
.btn--secondary:hover:not(:disabled):hover {
transform: translateY(-4px)
}
.btn--secondary:focus:focus {
outline: none;
box-shadow: none
}
.btn--outline {
background-color: rgba(0, 0, 0, 0);
color: #202124;
border: 1px solid #dadce0
}
.btn--outline:hover:not(:disabled) {
background-color: #f8f9fa;
border-color: #bdc1c6
}
.btn--outline:focus:focus {
outline: none;
box-shadow: none
}
.btn--ghost {
background-color: rgba(0, 0, 0, 0);
color: #202124;
border: 1px solid rgba(0, 0, 0, 0)
}
.btn--ghost:hover:not(:disabled) {
background-color: #f1f3f4
}
.btn--ghost:focus:focus {
outline: none;
box-shadow: none
}
.btn--link {
background-color: rgba(0, 0, 0, 0);
color: #03a2cc;
border: none;
text-decoration: underline;
height: auto;
padding: 0
}
.btn--link:hover:not(:disabled) {
color: #0288a3;
text-decoration: none
}
.btn--link:focus:focus {
outline: none;
box-shadow: none
}
.btn--sm {
height: 36px;
padding: .5rem 1rem;
font-size: .875rem
}
.btn--lg {
height: 52px;
padding: 1rem 2rem;
font-size: 1.125rem
}
.btn--loading {
position: relative;
color: rgba(0, 0, 0, 0)
}
.btn--loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: rgba(0, 0, 0, 0);
animation: spin 1s linear infinite
}
.btn--disabled, .btn:disabled {
opacity: .6;
cursor: not-allowed;
pointer-events: none
}
.btn__icon {
display: inline-flex;
align-items: center;
margin-right: .5rem
}
.btn__icon:last-child {
margin-right: 0;
margin-left: .5rem
}
.btn__icon:only-child {
margin: 0
}
.btn--full {
width: 100%
}
@media (max-width: 767px) {
.btn--responsive {
height: 36px;
padding: .5rem 1rem;
font-size: .875rem
}
}
.btn-group {
display: inline-flex;
vertical-align: middle
}
.btn-group .btn {
position: relative;
border-radius: 0
}
.btn-group .btn:first-child {
border-top-left-radius: .375rem;
border-bottom-left-radius: .375rem
}
.btn-group .btn:last-child {
border-top-right-radius: .375rem;
border-bottom-right-radius: .375rem
}
.btn-group .btn:not(:first-child) {
margin-left: -1px
}
.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
z-index: 1
}
.btn-group .btn:focus {
z-index: 2
}
.btn-group--vertical {
flex-direction: column;
align-items: flex-start;
justify-content: center
}
.btn-group--vertical .btn {
width: 100%
}
.btn-group--vertical .btn:first-child {
border-top-left-radius: .375rem;
border-top-right-radius: .375rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.btn-group--vertical .btn:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: .375rem;
border-bottom-right-radius: .375rem
}
.btn-group--vertical .btn:not(:first-child) {
margin-left: 0;
margin-top: -1px
}
.fab {
background: none;
border: none;
padding: 0;
margin: 0;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: .875rem;
font-weight: 500;
line-height: 1.5
}
.fab:focus {
outline: none;
box-shadow: none
}
.fab {
height: 44px;
padding: .75rem 1.5rem;
border-radius: .375rem;
transition: all 300ms ease;
text-decoration: none;
cursor: pointer;
user-select: none
}
.fab:disabled {
opacity: .6;
cursor: not-allowed
}
.fab {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 9999px;
background-color: #03a2cc;
color: #fff;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}
.fab:hover:not(:disabled) {
background-color: #0288a3;
transition: transform 300ms ease
}
.fab:hover:not(:disabled):hover {
transform: translateY(-8px)
}
.fab:hover:not(:disabled) {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
}
.fab:focus:focus {
outline: none;
box-shadow: none
}
.fab--sm {
width: 40px;
height: 40px
}
.fab--lg {
width: 64px;
height: 64px
}
.fab--extended {
width: auto;
padding: 0 1.5rem;
border-radius: 9999px
}
.fab--extended .fab__icon {
margin-right: .5rem
}
.icon-btn {
background: none;
border: none;
padding: 0;
margin: 0;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center
}
.icon-btn:focus {
outline: none;
box-shadow: none
}
.icon-btn {
width: 40px;
height: 40px;
border-radius: .375rem;
color: #5f6368;
transition: all 300ms ease
}
.icon-btn:hover:not(:disabled) {
background-color: #f1f3f4;
color: #202124
}
.icon-btn:focus {
background-color: #f1f3f4;
color: #202124
}
.icon-btn:disabled {
opacity: .5;
cursor: not-allowed
}
.icon-btn--sm {
width: 32px;
height: 32px
}
.icon-btn--lg {
width: 48px;
height: 48px
}
.icon-btn--primary {
color: #03a2cc
}
.icon-btn--primary:hover:not(:disabled) {
background-color: rgba(3, 162, 204, .1);
color: #0288a3
}
.form-group {
margin-bottom: 1.5rem
}
.form-group--inline {
display: flex;
align-items: flex-start;
gap: 1rem
}
.form-group--inline .form-label {
flex-shrink: 0;
margin-bottom: 0;
padding-top: .75rem
}
.form-group--inline .form-control, .form-group--inline .form-select, .form-group--inline .form-textarea {
flex: 1
}
.form-group--horizontal {
display: grid;
grid-template-columns:1fr 2fr;
gap: 1rem;
align-items: center
}
@media (max-width: 767px) {
.form-group--horizontal {
grid-template-columns:1fr;
gap: .5rem
}
}
.form-label {
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
display: block;
margin-bottom: .5rem;
color: #202124
}
.form-label--required::after {
content: " *";
color: #ea4335
}
.form-label--optional::after {
content: " (optional)";
color: #9aa0a6;
font-weight: 400
}
.form-control, .form-select, .form-textarea {
width: 100%;
height: 44px;
padding: .75rem 1rem;
border: 1px solid #dadce0;
border-radius: .375rem;
background-color: #fff;
color: #202124;
font-size: 1rem;
line-height: 1.5;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.form-control:focus:focus, .form-select:focus:focus, .form-textarea:focus:focus {
outline: none;
box-shadow: none
}
.form-control:focus, .form-select:focus, .form-textarea:focus {
border-color: #03a2cc
}
.form-control::placeholder, .form-select::placeholder, .form-textarea::placeholder {
color: #9aa0a6
}
.form-control:disabled, .form-select:disabled, .form-textarea:disabled {
background-color: #f1f3f4;
color: #9aa0a6;
cursor: not-allowed
}
.form-control--sm {
height: 36px;
padding: .5rem .75rem;
font-size: .875rem
}
.form-control--lg {
height: 52px;
padding: 1rem 1.25rem;
font-size: 1.125rem
}
.form-control--error {
border-color: #ea4335
}
.form-control--error:focus:focus {
outline: none;
box-shadow: none
}
.form-control--success {
border-color: #34a853
}
.form-control--success:focus:focus {
outline: none;
box-shadow: none
}
.form-control--disabled {
background-color: #f1f3f4;
color: #9aa0a6;
cursor: not-allowed
}
.form-textarea {
min-height: 100px;
resize: vertical;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right .75rem center;
background-repeat: no-repeat;
background-size: 16px 12px;
padding-right: 2.5rem;
appearance: none
}
.form-select:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2303A2CC' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")
}
.form-check {
display: flex;
align-items: flex-start;
gap: .75rem;
margin-bottom: 1rem
}
.form-check--inline {
display: inline-flex;
margin-right: 1.5rem;
margin-bottom: 0
}
.form-check__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.form-check__input:checked + .form-check__label::before {
background-color: #03a2cc;
border-color: #03a2cc
}
.form-check__input:checked + .form-check__label::after {
opacity: 1
}
.form-check__input:focus + .form-check__label::before:focus {
outline: none;
box-shadow: none
}
.form-check__input:disabled + .form-check__label {
opacity: .6;
cursor: not-allowed
}
.form-check__label {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
position: relative;
padding-left: 2rem;
cursor: pointer;
user-select: none
}
.form-check__label::before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 16px;
height: 16px;
border: 2px solid #dadce0;
border-radius: .125rem;
background-color: #fff;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.form-check__label::after {
content: "";
position: absolute;
top: 5px;
left: 3px;
width: 6px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 300ms ease
}
.form-check--radio .form-check__label::before {
border-radius: 9999px
}
.form-check--radio .form-check__label::after {
width: 8px;
height: 8px;
top: 4px;
left: 4px;
border: none;
border-radius: 9999px;
background-color: #fff;
transform: none
}
.form-switch {
display: flex;
align-items: center;
gap: .75rem
}
.form-switch__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.form-switch__input:checked + .form-switch__toggle {
background-color: #03a2cc
}
.form-switch__input:checked + .form-switch__toggle::after {
transform: translateX(20px)
}
.form-switch__input:focus + .form-switch__toggle:focus {
outline: none;
box-shadow: none
}
.form-switch__input:disabled + .form-switch__toggle {
opacity: .6;
cursor: not-allowed
}
.form-switch__toggle {
position: relative;
width: 44px;
height: 24px;
background-color: #dadce0;
border-radius: 9999px;
cursor: pointer;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.form-switch__toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 9999px;
transition: transform 300ms ease
}
.form-switch__label {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
cursor: pointer;
user-select: none
}
.form-help {
font-size: .75rem;
font-weight: 400;
line-height: 1.5;
margin-top: .25rem;
color: #5f6368
}
.form-help--error {
color: #ea4335
}
.form-help--success {
color: #34a853
}
.form-control.is-valid, .is-valid.form-textarea, .is-valid.form-select {
border-color: #34a853
}
.form-control.is-valid:focus:focus, .is-valid.form-textarea:focus:focus, .is-valid.form-select:focus:focus {
outline: none;
box-shadow: none
}
.form-control.is-invalid, .is-invalid.form-textarea, .is-invalid.form-select {
border-color: #ea4335
}
.form-control.is-invalid:focus:focus, .is-invalid.form-textarea:focus:focus, .is-invalid.form-select:focus:focus {
outline: none;
box-shadow: none
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%
}
.input-group .form-control, .input-group .form-textarea, .input-group .form-select {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0
}
.input-group .form-control:focus, .input-group .form-textarea:focus, .input-group .form-select:focus {
z-index: 3
}
.input-group__text {
display: flex;
align-items: center;
justify-content: center;
padding: .75rem 1rem;
font-size: .875rem;
font-weight: 400;
color: #5f6368;
text-align: center;
white-space: nowrap;
background-color: #f1f3f4;
border: 1px solid #dadce0
}
.input-group__prepend .input-group__text {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group__prepend .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group__append .input-group__text {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-group__append .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-group__prepend .form-control, .input-group__prepend .form-textarea, .input-group__prepend .form-select, .input-group__append .form-control, .input-group__append .form-textarea, .input-group__append .form-select {
border-radius: 0
}
.input-group__prepend .form-control, .input-group__prepend .form-textarea, .input-group__prepend .form-select, .input-group__append .form-control, .input-group__append .form-textarea, .input-group__append .form-select {
border-radius: 0
}
.input-group__prepend + .form-control, .input-group__prepend + .form-textarea, .input-group__prepend + .form-select, .form-control + .input-group__append, .form-textarea + .input-group__append, .form-select + .input-group__append {
border-radius: 0
}
.input-group__prepend .form-control:first-child, .input-group__prepend .form-textarea:first-child, .input-group__prepend .form-select:first-child, .input-group__append .form-control:last-child, .input-group__append .form-textarea:last-child, .input-group__append .form-select:last-child {
border-radius: .375rem
}
.form-floating {
position: relative
}
.form-floating .form-control, .form-floating .form-textarea, .form-floating .form-select {
height: calc(3.5rem + 2px);
padding: 1rem .75rem;
border-radius: .375rem
}
.form-floating .form-control::placeholder, .form-floating .form-textarea::placeholder, .form-floating .form-select::placeholder {
color: rgba(0, 0, 0, 0)
}
.form-floating .form-control:focus, .form-floating .form-textarea:focus, .form-floating .form-select:focus, .form-floating .form-control:not(:placeholder-shown), .form-floating .form-textarea:not(:placeholder-shown), .form-floating .form-select:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: .625rem
}
.form-floating .form-control:focus ~ .form-floating__label, .form-floating .form-textarea:focus ~ .form-floating__label, .form-floating .form-select:focus ~ .form-floating__label, .form-floating .form-control:not(:placeholder-shown) ~ .form-floating__label, .form-floating .form-textarea:not(:placeholder-shown) ~ .form-floating__label, .form-floating .form-select:not(:placeholder-shown) ~ .form-floating__label {
opacity: .65;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem)
}
.form-floating__label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 1rem .75rem;
overflow: hidden;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
border: 1px solid rgba(0, 0, 0, 0);
transform-origin: 0 0;
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
color: #5f6368
}
.wpcf7-spinner {
display: none !important
}
.wpcf7-list-item {
margin: 0 !important;
display: inline-block
}
.wpcf7-not-valid-tip {
color: #03a2cc;
font-size: .75em;
padding-top: 5px;
display: block
}
.wpcf7-response-output {
margin-top: 1rem;
padding: .75rem;
border-radius: 4px
}
.wpcf7-response-output.wpcf7-mail-sent-ok {
background-color: rgba(52, 168, 83, .1);
color: #34a853;
border: 1px solid rgba(52, 168, 83, .2)
}
.wpcf7-response-output.wpcf7-validation-errors, .wpcf7-response-output.wpcf7-acceptance-missing {
background-color: rgba(234, 67, 53, .1);
color: #ea4335;
border: 1px solid rgba(234, 67, 53, .2)
}
.wpcf7-response-output.wpcf7-spam-blocked {
background-color: rgba(251, 188, 4, .1);
color: #fbbc04;
border: 1px solid rgba(251, 188, 4, .2)
}
.card, .form--card {
background-color: #fff;
border-radius: .5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box
}
.card__header, .form--card .form__header {
padding: 1.5rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0);
border-bottom: 1px solid #e8eaed
}
.card__header:first-child, .form--card .form__header:first-child {
border-radius: .5rem .5rem 0 0
}
.card__body, .form--card .form__body {
flex: 1 1 auto;
padding: 1.5rem
}
.card__footer, .form--card .form__footer {
padding: 1.5rem;
background-color: rgba(0, 0, 0, 0);
border-top: 1px solid #e8eaed
}
.card__footer:last-child, .form--card .form__footer:last-child {
border-radius: 0 0 .5rem .5rem
}
.card__title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
margin: 0 0 1rem 0;
color: #202124;
margin-bottom: .5rem
}
.card__title:last-child {
margin-bottom: 0
}
.card__subtitle {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
margin-top: -0.5rem;
margin-bottom: 1rem;
color: #5f6368
}
.card__text {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin-bottom: 1rem;
color: #5f6368
}
.card__text:last-child {
margin-bottom: 0
}
.card__link {
color: #03a2cc;
text-decoration: none
}
.card__link:hover {
color: #0288a3;
text-decoration: underline
}
.card__image {
width: 100%;
height: auto;
border-radius: .5rem .5rem 0 0
}
.card__image:last-child {
border-radius: 0 0 .5rem .5rem
}
.card__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
border-radius: .5rem
}
.card--elevated {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}
.card--outlined {
border: 1px solid #e8eaed;
box-shadow: none
}
.card--flat {
box-shadow: none;
border: 1px solid #e8eaed
}
.card--interactive {
cursor: pointer;
transition: all 300ms ease
}
.card--interactive:hover {
transition: transform 300ms ease
}
.card--interactive:hover:hover {
transform: translateY(-4px)
}
.card--interactive:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}
.card--sm .card__header, .card--sm .form--card .form__header, .form--card .card--sm .form__header, .card--sm .card__body, .card--sm .form--card .form__body, .form--card .card--sm .form__body, .card--sm .card__footer, .card--sm .form--card .form__footer, .form--card .card--sm .form__footer {
padding: 1rem
}
.card--lg .card__header, .card--lg .form--card .form__header, .form--card .card--lg .form__header, .card--lg .card__body, .card--lg .form--card .form__body, .form--card .card--lg .form__body, .card--lg .card__footer, .card--lg .form--card .form__footer, .form--card .card--lg .form__footer {
padding: 2rem
}
.card--primary {
border-left: 4px solid #03a2cc
}
.card--success {
border-left: 4px solid #34a853
}
.card--warning {
border-left: 4px solid #fbbc04
}
.card--error {
border-left: 4px solid #ea4335
}
.card-group {
display: flex;
flex-direction: column
}
.card-group .card, .card-group .form--card {
margin-bottom: 1rem
}
.card-group .card:last-child, .card-group .form--card:last-child {
margin-bottom: 0
}
@media (min-width: 768px) {
.card-group {
flex-direction: row
}
.card-group .card, .card-group .form--card {
flex: 1 1 0%;
margin-bottom: 0;
margin-right: 1rem
}
.card-group .card:last-child, .card-group .form--card:last-child {
margin-right: 0
}
.card-group .card:not(:first-child), .card-group .form--card:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.card-group .card:not(:last-child), .card-group .form--card:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
}
.card-deck {
display: flex;
flex-direction: column;
gap: 1rem
}
@media (min-width: 768px) {
.card-deck {
flex-direction: row
}
.card-deck .card, .card-deck .form--card {
flex: 1 1 0%
}
}
.card-columns {
column-count: 1;
column-gap: 1rem
}
.card-columns .card, .card-columns .form--card {
display: inline-block;
width: 100%;
margin-bottom: 1rem
}
@media (min-width: 480px) {
.card-columns {
column-count: 2
}
}
@media (min-width: 1024px) {
.card-columns {
column-count: 3
}
}
@media (min-width: 1280px) {
.card-columns {
column-count: 4
}
}
.card-grid {
display: grid;
gap: 1.5rem;
grid-template-columns:1fr
}
@media (min-width: 480px) {
.card-grid {
grid-template-columns:repeat(2, 1fr)
}
}
@media (min-width: 1024px) {
.card-grid {
grid-template-columns:repeat(3, 1fr)
}
}
@media (min-width: 1280px) {
.card-grid {
grid-template-columns:repeat(4, 1fr)
}
}
@media (min-width: 768px) {
.card-grid--2-cols {
grid-template-columns:repeat(2, 1fr)
}
}
@media (min-width: 768px) {
.card-grid--3-cols {
grid-template-columns:repeat(3, 1fr)
}
}
@media (min-width: 768px) {
.card-grid--4-cols {
grid-template-columns:repeat(4, 1fr)
}
}
.card-actions {
display: flex;
align-items: center;
gap: .5rem;
padding: 1rem 1.5rem;
background-color: #f8f9fa;
border-top: 1px solid #e8eaed
}
.card-actions--right {
justify-content: flex-end
}
.card-actions--center {
justify-content: center
}
.card-actions--space-between {
justify-content: space-between
}
.card-actions .btn {
margin: 0
}
.card-media {
position: relative;
overflow: hidden;
border-radius: .5rem .5rem 0 0
}
.card-media__image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 300ms ease
}
.card--interactive:hover .card-media__image {
transform: scale(1.05)
}
.card-media__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
display: flex;
align-items: flex-end;
padding: 1.5rem;
color: #fff
}
.card-media__title {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.25;
margin: 0 0 1rem 0;
color: #202124;
color: #fff;
margin: 0
}
.card-media__subtitle {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: hsla(0, 0%, 100%, .8);
margin: .25rem 0 0 0
}
.card-stats {
display: grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem
}
.card-stats__item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 1.5rem;
text-align: center;
background-color: #fff;
border-radius: .5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
}
.card-stats__value {
font-size: 1.875rem;
font-weight: 700;
line-height: 1.5;
color: #03a2cc;
margin-bottom: .25rem
}
.card-stats__label {
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
color: #5f6368;
text-transform: uppercase;
letter-spacing: .025em
}
.card-stats__change {
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
margin-top: .25rem
}
.card-stats__change--positive {
color: #34a853
}
.card-stats__change--negative {
color: #ea4335
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none
}
.nav__item {
position: relative
}
.nav__link {
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
display: block;
padding: .75rem 1rem;
color: #202124;
text-decoration: none;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease;
border-radius: .375rem
}
.nav__link:hover {
color: #03a2cc;
background-color: rgba(3, 162, 204, .05)
}
.nav__link:focus:focus {
outline: none;
box-shadow: none
}
.nav__link--active {
color: #03a2cc;
background-color: rgba(3, 162, 204, .05)
}
.nav__link--disabled {
color: #9aa0a6;
pointer-events: none;
cursor: default
}
.nav--tabs {
border-bottom: 1px solid #e8eaed
}
.nav--tabs .nav__item {
margin-bottom: -1px
}
.nav--tabs .nav__link {
border: 1px solid rgba(0, 0, 0, 0);
border-top-left-radius: .375rem;
border-top-right-radius: .375rem
}
.nav--tabs .nav__link:hover {
border-color: #dadce0;
background-color: rgba(0, 0, 0, 0)
}
.nav--tabs .nav__link--active {
color: #202124;
background-color: #fff;
border-color: #e8eaed;
border-bottom-color: #fff
}
.nav--pills .nav__link {
border-radius: 9999px
}
.nav--pills .nav__link--active {
color: #fff;
background-color: #03a2cc
}
.nav--underline {
border-bottom: 1px solid #e8eaed
}
.nav--underline .nav__link {
position: relative;
border-bottom: 2px solid rgba(0, 0, 0, 0);
border-radius: 0
}
.nav--underline .nav__link::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 2px;
background-color: #03a2cc;
transition: width 300ms ease
}
.nav--underline .nav__link:hover::after, .nav--underline .nav__link--active::after {
width: 100%
}
.nav--underline .nav__link--active {
color: #03a2cc;
background-color: rgba(0, 0, 0, 0)
}
.nav--sm .nav__link {
padding: .5rem .75rem;
font-size: .875rem
}
.nav--lg .nav__link {
padding: 1rem 1.5rem;
font-size: 1.125rem
}
.nav--vertical {
flex-direction: column
}
.nav--vertical .nav__link {
border-radius: .375rem
}
.nav--horizontal {
flex-direction: row
}
.nav--fill .nav__item {
flex: 1 1 auto;
text-align: center
}
.nav--justify-center {
justify-content: center
}
.nav--justify-end {
justify-content: flex-end
}
.nav--justify-between {
justify-content: space-between
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: .75rem 0;
margin-bottom: 1rem;
list-style: none;
background-color: rgba(0, 0, 0, 0);
border-radius: .375rem
}
.breadcrumb__item {
display: flex;
align-items: center
}
.breadcrumb__item + .breadcrumb__item {
padding-left: .5rem
}
.breadcrumb__item + .breadcrumb__item::before {
content: "/";
display: inline-block;
padding-right: .5rem;
color: #9aa0a6;
font-size: .875rem
}
.breadcrumb__item--active {
color: #9aa0a6
}
.breadcrumb__link {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: #03a2cc;
text-decoration: none;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.breadcrumb__link:hover {
color: #0288a3;
text-decoration: underline
}
.breadcrumb--separator-dot .breadcrumb__item + .breadcrumb__item::before {
content: "·"
}
.breadcrumb--separator-arrow .breadcrumb__item + .breadcrumb__item::before {
content: "→"
}
.pagination {
display: flex;
padding-left: 0;
list-style: none;
border-radius: .375rem
}
.pagination__item:first-child .pagination__link {
border-top-left-radius: .375rem;
border-bottom-left-radius: .375rem
}
.pagination__item:last-child .pagination__link {
border-top-right-radius: .375rem;
border-bottom-right-radius: .375rem
}
.pagination__item--active .pagination__link {
color: #fff;
background-color: #03a2cc;
border-color: #03a2cc
}
.pagination__item--disabled .pagination__link {
color: #9aa0a6;
background-color: #fff;
border-color: #dadce0;
pointer-events: none
}
.pagination__link {
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
position: relative;
display: block;
padding: .75rem 1rem;
margin-left: -1px;
color: #03a2cc;
text-decoration: none;
background-color: #fff;
border: 1px solid #dadce0;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.pagination__link:hover {
color: #0288a3;
background-color: rgba(3, 162, 204, .05);
border-color: #bdc1c6
}
.pagination__link:focus:focus {
outline: none;
box-shadow: none
}
.pagination__link:focus {
z-index: 2
}
.pagination--sm .pagination__link {
padding: .5rem .75rem;
font-size: .75rem
}
.pagination--lg .pagination__link {
padding: 1rem 1.5rem;
font-size: 1rem
}
.dropdown {
position: relative;
display: inline-block
}
.dropdown__toggle {
background: none;
border: none;
padding: 0;
margin: 0;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
gap: .5rem;
padding: .75rem 1rem;
color: #202124;
background-color: #fff;
border: 1px solid #dadce0;
border-radius: .375rem;
cursor: pointer;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.dropdown__toggle:hover {
background-color: #f8f9fa
}
.dropdown__toggle:focus:focus {
outline: none;
box-shadow: none
}
.dropdown__toggle::after {
content: "";
width: 0;
height: 0;
margin-left: .5rem;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-top: 4px solid currentColor
}
.dropdown__menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 160px;
padding: .5rem 0;
margin: .25rem 0 0 0;
background-color: #fff;
border: 1px solid #e8eaed;
border-radius: .375rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 300ms ease
}
.dropdown__menu--show {
opacity: 1;
visibility: visible;
transform: translateY(0)
}
.dropdown__menu--right {
left: auto;
right: 0
}
.dropdown__item {
display: block
}
.dropdown__link {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
display: block;
width: 100%;
padding: .5rem 1rem;
color: #202124;
text-decoration: none;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.dropdown__link:hover {
color: #03a2cc;
background-color: rgba(3, 162, 204, .05)
}
.dropdown__link:focus:focus {
outline: none;
box-shadow: none
}
.dropdown__link--active {
color: #03a2cc;
background-color: rgba(3, 162, 204, .05)
}
.dropdown__link--disabled {
color: #9aa0a6;
pointer-events: none
}
.dropdown__divider {
height: 0;
margin: .5rem 0;
overflow: hidden;
border-top: 1px solid #e8eaed
}
.dropdown__header {
font-size: .75rem;
font-weight: 600;
line-height: 1.5;
display: block;
padding: .25rem 1rem;
color: #9aa0a6;
text-transform: uppercase;
letter-spacing: .025em
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, .08);
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.header--inner {
background-color: #141f24
}
.header--inner .nav__link {
color: #fff
}
.header--inner .nav__link:hover {
color: #fff
}
.header--inner .nav__link:hover::after {
background-color: #03a2cc
}
.header--inner .nav__link--active {
color: #fff
}
.header--inner .nav__link--active::after {
background-color: #03a2cc
}
.header--inner .mobile-menu__link {
color: #202124
}
.header--inner .mobile-menu__link:hover {
color: #03a2cc
}
.header--inner .mobile-menu__link--active {
color: #03a2cc
}
.header--inner .burger__line {
background: #fff
}
.header--inner .burger--active .burger__line {
background: #000
}
.header--scrolled:not(.header--inner) {
background: hsla(0, 0%, 100%, .98);
box-shadow: 0 4px 20px rgba(0, 0, 0, .08)
}
.header--animate-in {
animation: fadeIn .6s cubic-bezier(0.4, 0, 0.2, 1)
}
.header--animate-out {
animation: fadeOut .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.header__container {
max-width: 1600px !important;
margin: 0 auto;
padding: 0 32px !important
}
@media (max-width: 1023px) {
.header__container {
padding: 0 24px !important
}
}
@media (max-width: 767px) {
.header__container {
padding: 0 20px !important
}
}
@media (max-width: 479px) {
.header__container {
padding: 0 16px !important
}
}
.header__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 90px;
gap: 32px
}
@media (max-width: 1023px) {
.header__wrapper {
min-height: 95px;
gap: 24px
}
}
@media (max-width: 767px) {
.header__wrapper {
min-height: 85px;
gap: 16px
}
}
.header__logo {
flex-shrink: 0;
z-index: 1001
}
.logo__link {
display: flex;
align-items: center;
text-decoration: none;
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.logo__link:hover {
transform: scale(1.05)
}
.logo__link:focus {
outline: none;
box-shadow: none
}
.logo__image {
height: 40px;
width: auto;
object-fit: contain;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1)
}
@media (max-width: 1023px) {
.logo__image {
height: 35px
}
}
@media (max-width: 767px) {
.logo__image {
height: 30px
}
}
@media (max-width: 479px) {
.logo__image {
height: 25px
}
}
.header__nav {
flex: 1;
display: flex;
justify-content: flex-end;
margin: 0 32px
}
@media (max-width: 1023px) {
.header__nav {
margin: 0 24px
}
}
@media (max-width: 767px) {
.header__nav {
display: none
}
}
.nav__list {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 32px;
list-style: none;
margin: 0;
padding: 0
}
@media (max-width: 1279px) {
.nav__list {
gap: 4px 28px
}
}
@media (max-width: 1023px) {
.nav__list {
gap: 4px 24px
}
}
@media (max-width: 767px) {
.nav__list {
gap: 20px
}
}
.nav__item {
position: relative
}
.nav__link {
display: block;
padding: 0 0 4px 0;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 500;
color: #202124;
text-decoration: none;
background: none;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
line-height: 1.2
}
@media (max-width: 1279px) {
.nav__link {
font-size: 15px
}
}
@media (max-width: 1023px) {
.nav__link {
font-size: 14px
}
}
.nav__link::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #03a2cc;
transition: width .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.nav__link:hover {
color: #03a2cc;
background: none
}
.nav__link:hover::after {
width: 100%
}
.nav__link:focus {
outline: none;
box-shadow: none
}
.nav__link--active {
color: #03a2cc
}
.nav__link--active::after {
width: 100%
}
.current-menu-item > .nav__link, .current_page_item > .nav__link, .current-menu-ancestor > .nav__link {
color: #03a2cc
}
.current-menu-item > .nav__link::after, .current_page_item > .nav__link::after, .current-menu-ancestor > .nav__link::after {
width: 100%
}
.header__actions {
display: flex;
align-items: center;
gap: 24px;
flex-shrink: 0
}
@media (max-width: 1023px) {
.header__actions {
gap: 20px
}
}
@media (max-width: 767px) {
.header__actions {
gap: 16px
}
}
.header__button {
padding: 12px 24px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(3, 162, 204, .2)
}
@media (max-width: 1023px) {
.header__button {
padding: 10px 20px;
font-size: 15px
}
}
@media (max-width: 767px) {
.header__button {
padding: 8px 16px;
font-size: 14px
}
}
.header__button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(3, 162, 204, .3)
}
.header__button:focus {
outline: 2px solid #03a2cc;
outline-offset: 2px
}
.header__languages {
display: flex;
align-items: center;
gap: 8px
}
@media (max-width: 767px) {
.header__languages--desktop {
display: none
}
}
.header__lang {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: none;
border-radius: 6px;
cursor: pointer;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 18px;
position: relative
}
@media (max-width: 767px) {
.header__lang {
width: 28px;
height: 28px;
font-size: 16px
}
}
.header__lang:hover {
background: rgba(3, 162, 204, .1);
transform: scale(1.1)
}
.header__lang:focus {
outline: 2px solid #03a2cc;
outline-offset: 2px
}
.header__burger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: none;
background: none;
cursor: pointer;
padding: 0;
z-index: 1001
}
@media (max-width: 767px) {
.header__burger {
display: flex
}
}
@media (max-width: 479px) {
.header__burger {
display: flex
}
}
.header__burger:focus {
outline: none;
box-shadow: none
}
.burger__line {
width: 24px;
height: 2px;
background: #202124;
border-radius: 1px;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center
}
.burger__line:not(:last-child) {
margin-bottom: 4px
}
.burger--active .burger__line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px)
}
.burger--active .burger__line:nth-child(2) {
opacity: 0;
transform: scaleX(0)
}
.burger--active .burger__line:nth-child(3) {
transform: rotate(-45deg) translate(3px, -3px)
}
.header__mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.header__mobile-menu--active {
opacity: 1;
visibility: visible
}
.header__mobile-menu--active .mobile-menu__content {
transform: translateX(0)
}
.mobile-menu__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
backdrop-filter: blur(4px)
}
.mobile-menu__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 320px;
background: #fff;
box-shadow: -4px 0 20px rgba(0, 0, 0, .1);
transform: translateX(100%);
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
padding: 80px 24px 24px
}
@media (max-width: 479px) {
.mobile-menu__content {
width: 100%;
padding: 80px 20px 20px
}
}
.mobile-menu__nav {
flex: 1;
margin-bottom: 32px
}
.mobile-menu__list {
list-style: none !important;
margin: 0;
padding: 0
}
.mobile-menu__item {
margin-bottom: 8px
}
.mobile-menu__link {
display: block;
padding: 16px 0;
font-size: 18px;
font-weight: 500;
color: #202124;
text-decoration: none;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.mobile-menu__link:hover {
color: #03a2cc;
padding-left: 8px
}
.mobile-menu__link:focus {
outline: none;
box-shadow: none
}
.mobile-menu__link--active {
color: #03a2cc;
font-weight: 600
}
.current-menu-item > .mobile-menu__link, .current_page_item > .mobile-menu__link, .current-menu-ancestor > .mobile-menu__link {
color: #03a2cc;
font-weight: 600
}
.mobile-menu__actions {
padding-top: 24px
}
.mobile-menu__button {
width: 100%;
justify-content: center
}
.mobile-menu__languages {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 20px
}
.mobile-menu__lang {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background: rgba(3, 162, 204, .1);
border-radius: 8px;
cursor: pointer;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 20px
}
.mobile-menu__lang:hover {
background: rgba(3, 162, 204, .2);
transform: scale(1.1)
}
.mobile-menu__lang:focus {
outline: none;
box-shadow: none
}
@media (max-width: 767px) {
.header__nav {
display: none
}
.header__actions .header__button {
display: none
}
}
@media (max-width: 479px) {
.header__container {
padding: 0 12px
}
.header__wrapper {
min-height: 56px
}
.logo__image {
height: 30px
}
}
.header--animate-in {
animation: fadeIn .6s cubic-bezier(0.4, 0, 0.2, 1)
}
.header--animate-out {
animation: fadeOut .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.nav__link--animate-in {
animation: slideInLeft .6s cubic-bezier(0.4, 0, 0.2, 1)
}
.footer {
background-color: #42575e;
color: #fff;
position: relative
}
.footer__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.footer__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.footer__container {
padding: 0 32px
}
}
.footer__social {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
padding: 40px 0;
border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}
@media (max-width: 768px) {
.footer__social {
gap: 20px;
padding: 30px 0
}
}
@media (max-width: 480px) {
.footer__social {
gap: 16px;
padding: 25px 0
}
}
.footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #fff;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 50%
}
.footer__social-link:hover {
transform: translateY(-2px)
}
.footer__social-link:focus {
outline: none;
box-shadow: none;
outline-offset: 4px
}
@media (max-width: 768px) {
.footer__social-link {
width: 36px;
height: 36px
}
}
@media (max-width: 480px) {
.footer__social-link {
width: 32px;
height: 32px
}
}
.footer__social-icon {
width: 40px;
height: 40px;
filter: brightness(0) invert(1);
transition: filter .3s ease
}
@media (max-width: 768px) {
.footer__social-icon {
width: 36px;
height: 36px
}
}
@media (max-width: 480px) {
.footer__social-icon {
width: 32px;
height: 32px
}
}
.footer__content {
display: grid;
grid-template-columns:2fr 1fr 2fr 3fr;
gap: 60px;
padding: 60px 0;
border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}
@media (max-width: 1279px) {
.footer__content {
gap: 40px;
padding: 50px 0;
grid-template-columns:1.5fr 1fr 1.5fr 2fr
}
}
@media (max-width: 1024px) {
.footer__content {
grid-template-columns:1fr 1fr;
gap: 30px;
padding: 40px 0
}
}
@media (max-width: 768px) {
.footer__content {
grid-template-columns:1fr;
gap: 30px;
padding: 30px 0
}
}
@media (max-width: 480px) {
.footer__content {
gap: 30px;
padding: 30px 0
}
}
.footer__section {
display: flex;
flex-direction: column;
gap: 20px
}
@media (max-width: 768px) {
.footer__section {
gap: 16px
}
}
@media (max-width: 480px) {
.footer__section {
gap: 14px
}
}
.footer__logo {
display: inline-flex;
align-items: center
}
.footer__logo .logo__image {
height: 40px;
width: auto
}
@media (max-width: 768px) {
.footer__logo .logo__image {
height: 36px
}
}
@media (max-width: 480px) {
.footer__logo .logo__image {
height: 32px
}
}
.footer__company-info {
display: flex;
flex-direction: column;
gap: 12px
}
.footer__badges {
display: flex;
flex-direction: row;
gap: 12px;
margin-top: 20px
}
@media (max-width: 1024px) {
.footer__badges {
margin-top: 18px;
flex-direction: column
}
}
@media (max-width: 768px) {
.footer__badges {
margin-top: 16px
}
}
@media (max-width: 480px) {
.footer__badges {
margin-top: 14px
}
}
.footer__badge {
display: block;
flex: 1;
width: fit-content;
transition: transform .3s ease
}
.footer__badge:hover {
transform: translateY(-2px)
}
.footer__badge-img {
width: 100%;
height: auto;
display: block
}
.footer__address .footer__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0;
text-transform: uppercase;
letter-spacing: .5px
}
@media (max-width: 768px) {
.footer__address .footer__title {
font-size: 16px
}
}
@media (max-width: 480px) {
.footer__address .footer__title {
font-size: 14px
}
}
.footer__address-info {
display: flex;
flex-direction: column;
gap: 12px
}
.footer__email {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color .3s ease
}
.footer__email:hover {
color: #fff;
text-decoration: none
}
.footer__email:focus {
outline: none;
box-shadow: none;
outline-offset: 4px;
border-radius: 4px
}
.footer__map-section {
display: flex;
align-items: flex-start
}
.footer__map {
width: 100%;
border-radius: 12px;
overflow: hidden;
height: 100%
}
@media (max-width: 768px) {
.footer__map {
height: 200px
}
}
@media (max-width: 480px) {
.footer__map {
height: 180px
}
}
.footer__map-img {
width: 100%;
height: 100%;
object-fit: cover
}
.footer__contact .footer__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0;
text-transform: uppercase;
letter-spacing: .5px
}
@media (max-width: 768px) {
.footer__contact .footer__title {
font-size: 16px
}
}
@media (max-width: 480px) {
.footer__contact .footer__title {
font-size: 14px
}
}
.footer__form .form__row {
display: grid;
grid-template-columns:1fr 1fr;
gap: 16px
}
@media (max-width: 480px) {
.footer__form .form__row {
grid-template-columns:1fr;
gap: 12px
}
}
.footer__form .form__field {
margin-bottom: 16px
}
@media (max-width: 480px) {
.footer__form .form__field {
margin-bottom: 12px
}
}
.footer__form .form__input, .footer__form .form__textarea {
width: 100%;
padding: 12px 16px;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 0;
color: #fff;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
transition: all .3s ease
}
.footer__form .form__input::placeholder, .footer__form .form__textarea::placeholder {
color: #fff
}
.footer__form .form__input:focus, .footer__form .form__textarea:focus {
outline: none;
border-color: #03a2cc;
box-shadow: 0 0 0 2px rgba(3, 162, 204, .2)
}
@media (max-width: 480px) {
.footer__form .form__input, .footer__form .form__textarea {
padding: 10px 14px;
font-size: 13px
}
}
.footer__form .form__textarea {
resize: vertical;
min-height: 100px
}
.footer__form .form__actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px
}
@media (max-width: 480px) {
.footer__form .form__actions {
flex-direction: column;
gap: 12px
}
}
.footer__form .form__checkbox {
display: flex;
align-items: flex-start;
gap: 8px;
flex: 1
}
.footer__form .form__checkbox-input {
margin: 0;
width: 16px;
height: 16px;
accent-color: #03a2cc;
flex-shrink: 0;
margin-top: 2px;
appearance: auto
}
.footer__form .form__checkbox-label {
font-size: 12px;
line-height: 1.4;
color: #fff;
cursor: pointer
}
@media (max-width: 480px) {
.footer__form .form__checkbox-label {
font-size: 11px
}
}
.footer__form .form__privacy-link {
color: #fff;
text-decoration: none
}
.footer__form .form__privacy-link:hover {
text-decoration: underline
}
.footer__form .form__submit {
padding: 10px 32px;
background-color: #03a2cc;
color: #fff;
border: none;
border-radius: 8px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all .3s ease;
white-space: nowrap
}
.footer__form .form__submit:hover {
background-color: rgb(6.652173913, 200.2173913043, 251.347826087);
transform: translateY(-2px)
}
.footer__form .form__submit:focus {
outline: 2px solid hsla(0, 0%, 100%, .5);
outline-offset: 4px
}
@media (max-width: 480px) {
.footer__form .form__submit {
padding: 8px 24px;
font-size: 14px;
width: 100%
}
}
.footer__bottom {
background-color: #354d56
}
.footer__bottom-wrapper {
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px
}
@media (max-width: 768px) {
.footer__bottom-wrapper {
padding: 16px 24px;
flex-direction: column;
text-align: center;
gap: 12px
}
}
@media (max-width: 480px) {
.footer__bottom-wrapper {
padding: 14px 16px;
gap: 10px
}
}
.footer__copyright {
flex: 1
}
.footer__links {
display: flex;
gap: 24px;
align-items: center
}
@media (max-width: 768px) {
.footer__links {
gap: 20px
}
}
@media (max-width: 480px) {
.footer__links {
gap: 16px
}
}
.footer__link {
color: hsla(0, 0%, 100%, .8);
text-decoration: none;
font-size: 14px;
transition: color .3s ease
}
.footer__link:hover {
color: #fff;
text-decoration: none
}
.footer__link:focus {
outline: none;
box-shadow: none;
outline-offset: 4px;
border-radius: 4px
}
@media (max-width: 480px) {
.footer__link {
font-size: 13px
}
}
.footer__credits {
flex: 1;
text-align: right
}
@media (max-width: 768px) {
.footer__credits {
text-align: center
}
}
.footer__credit-link {
color: #fff;
text-decoration: none;
transition: color .3s ease
}
.footer__credit-link:hover {
color: #fff;
text-decoration: underline
}
.footer__credit-link:focus {
outline: none;
box-shadow: none;
outline-offset: 4px;
border-radius: 4px
}
.footer__text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
color: hsla(0, 0%, 100%, .8);
margin: 0
}
@media (max-width: 480px) {
.footer__text {
font-size: 13px
}
}
@keyframes footerFadeIn {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.footer__social {
animation: footerFadeIn .8s ease-out
}
.footer__content {
animation: footerFadeIn .8s ease-out .2s both
}
.footer__bottom {
animation: footerFadeIn .8s ease-out .4s both
}
.main {
min-height: 100vh;
padding-top: 80px
}
@media (max-width: 767px) {
.main {
padding-top: 60px
}
}
.main__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.main__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.main__container {
padding: 0 32px
}
}
.main__content {
padding: 2rem 0
}
@media (max-width: 767px) {
.main__content {
padding: 1.5rem 0
}
}
.main--home .main__content {
padding: 0
}
.main--page .main__content {
padding: 3rem 0
}
@media (max-width: 767px) {
.main--page .main__content {
padding: 2rem 0
}
}
.main--blog .main__content {
padding: 2.5rem 0
}
@media (max-width: 767px) {
.main--blog .main__content {
padding: 1.5rem 0
}
}
.page-header {
background: linear-gradient(135deg, #202124 0%, #3C4043 100%);
color: #fff;
padding: 4rem 0;
margin-bottom: 3rem;
position: relative;
overflow: hidden
}
.page-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: .1
}
.page-header__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.page-header__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.page-header__container {
padding: 0 32px
}
}
.page-header__container {
position: relative;
z-index: 1
}
.page-header__content {
text-align: center;
max-width: 800px;
margin: 0 auto
}
.page-header__title {
font-size: 3rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 1rem 0;
color: #202124;
color: #fff;
margin-bottom: 1rem
}
@media (max-width: 767px) {
.page-header__title {
font-size: 2.25rem
}
}
@media (max-width: 479px) {
.page-header__title {
font-size: 1.875rem
}
}
.page-header__subtitle {
font-size: 1.25rem;
font-weight: 400;
line-height: 1.625;
color: #dadce0;
margin-bottom: 2rem
}
@media (max-width: 767px) {
.page-header__subtitle {
font-size: 1.125rem
}
}
.page-header__breadcrumb {
margin-bottom: 1.5rem
}
.page-header__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem
}
@media (max-width: 479px) {
.page-header__actions {
flex-direction: column;
width: 100%
}
}
.section {
padding: 4rem 0
}
@media (max-width: 767px) {
.section {
padding: 3rem 0
}
}
@media (max-width: 479px) {
.section {
padding: 2.5rem 0
}
}
.section--sm {
padding: 2rem 0
}
@media (max-width: 767px) {
.section--sm {
padding: 1.5rem 0
}
}
.section--lg {
padding: 5rem 0
}
@media (max-width: 767px) {
.section--lg {
padding: 4rem 0
}
}
.section--xl {
padding: 6rem 0
}
@media (max-width: 767px) {
.section--xl {
padding: 5rem 0
}
}
.section--dark {
background-color: #202124;
color: #fff
}
.section--light {
background-color: #f8f9fa
}
.section--primary {
background-color: #03a2cc;
color: #fff
}
.section--gradient {
background: linear-gradient(135deg, #03A2CC 0%, #0288A3 100%);
color: #fff
}
.section__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.section__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.section__container {
padding: 0 32px
}
}
.section__header {
text-align: center;
margin-bottom: 3rem
}
@media (max-width: 767px) {
.section__header {
margin-bottom: 2rem
}
}
.section__title {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 1rem 0;
color: #202124;
margin-bottom: 1rem
}
@media (max-width: 767px) {
.section__title {
font-size: 1.875rem
}
}
@media (max-width: 479px) {
.section__title {
font-size: 1.5rem
}
}
.section__subtitle {
font-size: 1.125rem;
font-weight: 400;
line-height: 1.625;
color: #5f6368;
max-width: 600px;
margin: 0 auto
}
@media (max-width: 767px) {
.section__subtitle {
font-size: 1rem
}
}
.section--dark .section__subtitle {
color: #dadce0
}
.section--primary .section__subtitle, .section--gradient .section__subtitle {
color: hsla(0, 0%, 100%, .9)
}
.container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.container {
padding: 0 32px
}
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(-1 * 1.5rem / 2)
}
@media (max-width: 767px) {
.row {
margin: 0 calc(-1 * 1rem / 2)
}
}
.col {
flex: 1 1 0%;
padding: 0 calc(1.5rem / 2);
margin-bottom: 1.5rem
}
@media (max-width: 767px) {
.col {
padding: 0 calc(1rem / 2);
margin-bottom: 1rem
}
}
.col--1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%
}
.col--2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%
}
.col--3 {
flex: 0 0 25%;
max-width: 25%
}
.col--4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%
}
.col--5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%
}
.col--6 {
flex: 0 0 50%;
max-width: 50%
}
.col--7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%
}
.col--8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%
}
.col--9 {
flex: 0 0 75%;
max-width: 75%
}
.col--10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%
}
.col--11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%
}
.col--12 {
flex: 0 0 100%;
max-width: 100%
}
@media (min-width: 480px) {
.col--sm-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%
}
.col--sm-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%
}
.col--sm-3 {
flex: 0 0 25%;
max-width: 25%
}
.col--sm-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%
}
.col--sm-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%
}
.col--sm-6 {
flex: 0 0 50%;
max-width: 50%
}
.col--sm-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%
}
.col--sm-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%
}
.col--sm-9 {
flex: 0 0 75%;
max-width: 75%
}
.col--sm-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%
}
.col--sm-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%
}
.col--sm-12 {
flex: 0 0 100%;
max-width: 100%
}
}
@media (min-width: 768px) {
.col--md-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%
}
.col--md-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%
}
.col--md-3 {
flex: 0 0 25%;
max-width: 25%
}
.col--md-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%
}
.col--md-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%
}
.col--md-6 {
flex: 0 0 50%;
max-width: 50%
}
.col--md-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%
}
.col--md-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%
}
.col--md-9 {
flex: 0 0 75%;
max-width: 75%
}
.col--md-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%
}
.col--md-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%
}
.col--md-12 {
flex: 0 0 100%;
max-width: 100%
}
}
@media (min-width: 1024px) {
.col--lg-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%
}
.col--lg-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%
}
.col--lg-3 {
flex: 0 0 25%;
max-width: 25%
}
.col--lg-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%
}
.col--lg-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%
}
.col--lg-6 {
flex: 0 0 50%;
max-width: 50%
}
.col--lg-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%
}
.col--lg-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%
}
.col--lg-9 {
flex: 0 0 75%;
max-width: 75%
}
.col--lg-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%
}
.col--lg-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%
}
.col--lg-12 {
flex: 0 0 100%;
max-width: 100%
}
}
@media (min-width: 1280px) {
.col--xl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%
}
.col--xl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%
}
.col--xl-3 {
flex: 0 0 25%;
max-width: 25%
}
.col--xl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%
}
.col--xl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%
}
.col--xl-6 {
flex: 0 0 50%;
max-width: 50%
}
.col--xl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%
}
.col--xl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%
}
.col--xl-9 {
flex: 0 0 75%;
max-width: 75%
}
.col--xl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%
}
.col--xl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%
}
.col--xl-12 {
flex: 0 0 100%;
max-width: 100%
}
}
@media (min-width: 1536px) {
.col--2xl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%
}
.col--2xl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%
}
.col--2xl-3 {
flex: 0 0 25%;
max-width: 25%
}
.col--2xl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%
}
.col--2xl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%
}
.col--2xl-6 {
flex: 0 0 50%;
max-width: 50%
}
.col--2xl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%
}
.col--2xl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%
}
.col--2xl-9 {
flex: 0 0 75%;
max-width: 75%
}
.col--2xl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%
}
.col--2xl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%
}
.col--2xl-12 {
flex: 0 0 100%;
max-width: 100%
}
}
.section-spacing--none {
padding: 0
}
.section-spacing--sm {
padding: 2rem 0
}
.section-spacing--md {
padding: 3rem 0
}
.section-spacing--lg {
padding: 4rem 0
}
.section-spacing--xl {
padding: 5rem 0
}
.content__wrapper {
max-width: 800px;
margin: 0 auto
}
.content__header {
margin-bottom: 2rem
}
.content__body {
font-size: 1rem;
font-weight: 400;
line-height: 1.625;
color: #202124
}
.content__body h1, .content__body h2, .content__body h3, .content__body h4, .content__body h5, .content__body h6 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 1rem 0;
color: #202124;
margin-top: 2rem;
margin-bottom: 1rem
}
.content__body h1:first-child, .content__body h2:first-child, .content__body h3:first-child, .content__body h4:first-child, .content__body h5:first-child, .content__body h6:first-child {
margin-top: 0
}
.content__body p {
margin-bottom: 1rem
}
.content__body p:last-child {
margin-bottom: 0
}
.content__body ul, .content__body ol {
margin-bottom: 1rem;
padding-left: 1.5rem
}
.content__body ul li, .content__body ol li {
margin-bottom: .5rem
}
.content__body blockquote {
border-left: 4px solid #03a2cc;
padding-left: 1rem;
margin: 1.5rem 0;
font-style: italic;
color: #5f6368
}
.content__body code {
background-color: #f1f3f4;
padding: .25rem .5rem;
border-radius: .125rem;
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
font-size: .875rem
}
.content__body pre {
background-color: #f1f3f4;
padding: 1rem;
border-radius: .375rem;
overflow-x: auto;
margin-bottom: 1rem
}
.content__body pre code {
background: none;
padding: 0
}
.content__body img {
max-width: 100%;
height: auto;
border-radius: .375rem;
margin: 1rem 0
}
.content__body table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem
}
.content__body table th, .content__body table td {
padding: .75rem;
text-align: left;
border-bottom: 1px solid #e8eaed
}
.content__body table th {
font-weight: 600;
background-color: #f8f9fa
}
@media (max-width: 1023px) {
.main__content {
padding: 1.5rem 0
}
.section {
padding: 3rem 0
}
}
@media (max-width: 767px) {
.main__content {
padding: 1rem 0
}
.section {
padding: 2.5rem 0
}
}
@media (max-width: 479px) {
.main__content {
padding: .75rem 0
}
.section {
padding: 2rem 0
}
}
.section--animate-in {
animation: fadeIn 300ms ease
}
.page-header--animate-in {
animation: slideDown 300ms ease
}
.content--animate-in {
animation: slideUp 300ms ease
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
white-space: nowrap;
user-select: none
}
.button:focus {
outline: none;
box-shadow: none
}
.button:disabled {
opacity: .6;
cursor: not-allowed;
pointer-events: none
}
.button--loading {
pointer-events: none
}
.button--loading .button__text {
opacity: 0
}
.button--loading .button__spinner {
opacity: 1
}
.button--primary {
background: linear-gradient(135deg, #03A2CC 0%, rgb(2.2608695652, 122.0869565217, 153.7391304348) 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(3, 162, 204, .3)
}
.button--primary:hover {
background: linear-gradient(135deg, rgb(2.6304347826, 142.0434782609, 178.8695652174) 0%, rgb(1.8913043478, 102.1304347826, 128.6086956522) 100%);
box-shadow: 0 6px 20px rgba(3, 162, 204, .4);
transform: translateY(-2px)
}
.button--primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(3, 162, 204, .3)
}
.button--primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left .5s
}
.button--primary:hover::before {
left: 100%
}
.button--secondary {
background: #fff;
color: #03a2cc;
border: 2px solid #03a2cc;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}
.button--secondary:hover {
background: #03a2cc;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(3, 162, 204, .3)
}
.button--secondary:active {
transform: translateY(0)
}
.button--ghost {
background: rgba(0, 0, 0, 0);
color: #000;
border: 2px solid rgba(0, 0, 0, 0)
}
.button--ghost:hover {
background: rgba(3, 162, 204, .1);
color: #03a2cc;
border-color: rgba(3, 162, 204, .2)
}
.button--ghost:active {
background: rgba(3, 162, 204, .2)
}
.button--danger {
background: linear-gradient(135deg, #ef4444 0%, rgb(234.9802955665, 21.0197044335, 21.0197044335) 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(239, 68, 68, .3)
}
.button--danger:hover {
background: linear-gradient(135deg, rgb(236.9901477833, 44.5098522167, 44.5098522167) 0%, rgb(212.3325123153, 18.1674876847, 18.1674876847) 100%);
box-shadow: 0 6px 20px rgba(239, 68, 68, .4);
transform: translateY(-2px)
}
.button--danger:active {
transform: translateY(0)
}
.button--sm {
padding: 8px 16px;
font-size: 14px;
border-radius: 6px
}
.button--lg {
padding: 16px 32px;
font-size: 18px;
border-radius: 10px
}
.button--xl {
padding: 20px 40px;
font-size: 20px;
border-radius: 12px
}
.button--full {
width: 100%
}
.button--icon {
padding: 12px;
border-radius: 50%;
aspect-ratio: 1
}
.button--icon.button--sm {
padding: 8px
}
.button--icon.button--lg {
padding: 16px
}
.button--rounded {
border-radius: 50px
}
.button__text {
transition: opacity .3s ease
}
.button__icon {
width: 20px;
height: 20px;
transition: transform .3s ease
}
.button:hover .button__icon {
transform: scale(1.1)
}
.button__spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid rgba(0, 0, 0, 0);
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
opacity: 0
}
.button-group {
display: flex;
gap: 12px;
align-items: center
}
.button-group--vertical {
flex-direction: column;
align-items: stretch
}
.button-group--attached .button {
border-radius: 0
}
.button-group--attached .button:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px
}
.button-group--attached .button:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg)
}
100% {
transform: translate(-50%, -50%) rotate(360deg)
}
}
@media (max-width: 767px) {
.button {
padding: 10px 20px;
font-size: 15px
}
.button--sm {
padding: 6px 12px;
font-size: 13px
}
.button--lg {
padding: 14px 28px;
font-size: 17px
}
}
@media (max-width: 479px) {
.button {
padding: 8px 16px;
font-size: 14px
}
.button--sm {
padding: 6px 10px;
font-size: 12px
}
.button--lg {
padding: 12px 24px;
font-size: 16px
}
}
.form--inline .form-group {
display: flex;
align-items: flex-end;
gap: 1rem;
margin-bottom: 1rem
}
.form--inline .form-group .form-label {
flex-shrink: 0;
margin-bottom: 0;
padding-top: .75rem
}
.form--inline .form-group .form-control, .form--inline .form-group .form-textarea, .form--inline .form-group .form-select {
flex: 1
}
.form--horizontal .form-group {
display: grid;
grid-template-columns:1fr 2fr;
gap: 1rem;
align-items: center;
margin-bottom: 1.5rem
}
@media (max-width: 767px) {
.form--horizontal .form-group {
grid-template-columns:1fr;
gap: .5rem
}
}
.form--horizontal .form-label {
margin-bottom: 0
}
.form--vertical .form-group {
margin-bottom: 1.5rem
}
.form--bordered {
padding: 2rem;
border: 1px solid #e8eaed;
border-radius: .5rem;
background-color: #fff
}
.form--floating .form-group {
position: relative;
margin-bottom: 2rem
}
.form--floating .form-control, .form--floating .form-textarea, .form--floating .form-select {
height: calc(3.5rem + 2px);
padding: 1rem .75rem;
border-radius: .375rem
}
.form--floating .form-control::placeholder, .form--floating .form-textarea::placeholder, .form--floating .form-select::placeholder {
color: rgba(0, 0, 0, 0)
}
.form--floating .form-control:focus, .form--floating .form-textarea:focus, .form--floating .form-select:focus, .form--floating .form-control:not(:placeholder-shown), .form--floating .form-textarea:not(:placeholder-shown), .form--floating .form-select:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: .625rem
}
.form--floating .form-control:focus ~ .form-label, .form--floating .form-textarea:focus ~ .form-label, .form--floating .form-select:focus ~ .form-label, .form--floating .form-control:not(:placeholder-shown) ~ .form-label, .form--floating .form-textarea:not(:placeholder-shown) ~ .form-label, .form--floating .form-select:not(:placeholder-shown) ~ .form-label {
opacity: .65;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem)
}
.form--floating .form-label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 1rem .75rem;
overflow: hidden;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
border: 1px solid rgba(0, 0, 0, 0);
transform-origin: 0 0;
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
color: #5f6368
}
.form__header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e8eaed
}
.form__title {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.25;
margin: 0 0 1rem 0;
color: #202124;
margin-bottom: .5rem
}
.form__subtitle {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #5f6368
}
.form__body {
margin-bottom: 1.5rem
}
.form__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid #e8eaed
}
@media (max-width: 479px) {
.form__footer {
flex-direction: column;
gap: 1rem
}
}
.form__actions {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem
}
@media (max-width: 479px) {
.form__actions {
width: 100%
}
}
.form__help {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: #5f6368;
margin-top: .5rem
}
.form-control--outline {
background-color: rgba(0, 0, 0, 0);
border: 2px solid #dadce0
}
.form-control--outline:focus {
border-color: #03a2cc;
background-color: #fff
}
.form-control--filled {
background-color: #f1f3f4;
border: 1px solid rgba(0, 0, 0, 0)
}
.form-control--filled:focus {
background-color: #fff;
border-color: #03a2cc
}
.form-control--underline {
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 2px solid #dadce0;
border-radius: 0;
padding-left: 0;
padding-right: 0
}
.form-control--underline:focus {
border-bottom-color: #03a2cc;
box-shadow: none
}
.form-control--rounded {
border-radius: 9999px
}
.form-control--square {
border-radius: 0
}
.form-group--required .form-label::after {
content: " *";
color: #ea4335
}
.form-group--optional .form-label::after {
content: " (optional)";
color: #9aa0a6;
font-weight: 400
}
.form-group--error .form-control, .form-group--error .form-textarea, .form-group--error .form-select {
border-color: #ea4335
}
.form-group--error .form-control:focus:focus, .form-group--error .form-textarea:focus:focus, .form-group--error .form-select:focus:focus {
outline: none;
box-shadow: none
}
.form-group--error .form-label {
color: #ea4335
}
.form-group--success .form-control, .form-group--success .form-textarea, .form-group--success .form-select {
border-color: #34a853
}
.form-group--success .form-control:focus:focus, .form-group--success .form-textarea:focus:focus, .form-group--success .form-select:focus:focus {
outline: none;
box-shadow: none
}
.form-group--success .form-label {
color: #34a853
}
.form-group--disabled .form-control, .form-group--disabled .form-textarea, .form-group--disabled .form-select {
background-color: #f1f3f4;
color: #9aa0a6;
cursor: not-allowed
}
.form-group--disabled .form-label {
color: #9aa0a6
}
.form-search {
position: relative
}
.form-search .form-control, .form-search .form-textarea, .form-search .form-select {
padding-right: 2.5rem
}
.form-search__icon {
position: absolute;
top: 50%;
right: .75rem;
transform: translateY(-50%);
color: #9aa0a6;
pointer-events: none
}
.form-search__clear {
position: absolute;
top: 50%;
right: .75rem;
transform: translateY(-50%);
background: none;
border: none;
color: #9aa0a6;
cursor: pointer;
padding: .25rem
}
.form-search__clear:hover {
color: #202124
}
.form-password {
position: relative
}
.form-password .form-control, .form-password .form-textarea, .form-password .form-select {
padding-right: 2.5rem
}
.form-password__toggle {
position: absolute;
top: 50%;
right: .75rem;
transform: translateY(-50%);
background: none;
border: none;
color: #9aa0a6;
cursor: pointer;
padding: .25rem
}
.form-password__toggle:hover {
color: #202124
}
.form-file {
position: relative;
display: inline-block;
cursor: pointer
}
.form-file__input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer
}
.form-file__label {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .75rem 1rem;
background-color: #f1f3f4;
border: 2px dashed #dadce0;
border-radius: .375rem;
color: #5f6368;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.form-file__label:hover {
background-color: #e8eaed;
border-color: #bdc1c6
}
.form-file__icon {
width: 20px;
height: 20px
}
.form-file--drag-over .form-file__label {
background-color: rgba(3, 162, 204, .05);
border-color: #03a2cc;
color: #03a2cc
}
.form-validation__message {
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
margin-top: .25rem;
display: flex;
align-items: center;
gap: .25rem
}
.form-validation__message--error {
color: #ea4335
}
.form-validation__message--success {
color: #34a853
}
.form-validation__message--warning {
color: #fbbc04
}
.form-validation__message--info {
color: #4285f4
}
.form-validation__icon {
width: 16px;
height: 16px;
flex-shrink: 0
}
.form-steps {
display: flex;
align-items: center;
margin-bottom: 2rem;
counter-reset: step
}
.form-steps__item {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex: 1;
counter-increment: step
}
.form-steps__item:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
left: calc(50% + 20px);
width: calc(100% - 40px);
height: 2px;
background-color: #dadce0;
transform: translateY(-50%);
z-index: 1
}
.form-steps__item--completed:not(:last-child)::after {
background-color: #34a853
}
.form-steps__item--active:not(:last-child)::after {
background-color: #03a2cc
}
.form-steps__step {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 40px;
background-color: #dadce0;
color: #fff;
border-radius: 9999px;
font-weight: 600;
z-index: 2
}
.form-steps__step::before {
content: counter(step)
}
.form-steps__step--completed {
background-color: #34a853
}
.form-steps__step--completed::before {
content: "✓"
}
.form-steps__step--active {
background-color: #03a2cc
}
.form-steps__label {
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
margin-top: .5rem;
text-align: center;
color: #5f6368
}
.form-steps__item--active .form-steps__label {
color: #03a2cc
}
.form-steps__item--completed .form-steps__label {
color: #34a853
}
.form-progress {
margin-bottom: 1.5rem
}
.form-progress__bar {
width: 100%;
height: 8px;
background-color: #e8eaed;
border-radius: 9999px;
overflow: hidden
}
.form-progress__fill {
height: 100%;
background-color: #03a2cc;
border-radius: 9999px;
transition: width 300ms ease
}
.form-progress__text {
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
margin-top: .5rem;
text-align: center;
color: #5f6368
}
@media (max-width: 767px) {
.form--horizontal .form-group {
grid-template-columns:1fr;
gap: .5rem
}
.form--inline .form-group {
flex-direction: column;
align-items: stretch;
gap: .5rem
}
.form--inline .form-group .form-label {
padding-top: 0
}
.form-steps__item:not(:last-child)::after {
display: none
}
}
@media print {
.form__actions {
display: none !important
}
.form .form-control, .form .form-textarea, .form .form-select {
border: 1px solid #000 !important;
background-color: rgba(0, 0, 0, 0) !important
}
}
.hero {
padding: 120px 0 40px 0
}
@media (max-width: 768px) {
.hero {
padding: 100px 0 30px 0
}
}
@media (max-width: 480px) {
.hero {
padding: 80px 0 20px 0
}
}
.hero__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.hero__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.hero__container {
padding: 0 32px
}
}
.hero__banner {
position: relative;
background: rgba(60, 80, 120, .85);
border-radius: 24px;
padding: 80px 60px;
backdrop-filter: blur(10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
display: flex;
align-items: center;
max-width: 100%;
overflow: hidden
}
@media (max-width: 1279px) {
.hero__banner {
padding: 60px 40px
}
}
@media (max-width: 768px) {
.hero__banner {
padding: 50px 30px
}
}
@media (max-width: 480px) {
.hero__banner {
padding: 40px 20px;
border-radius: 16px
}
}
.hero__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1
}
.hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom
}
.hero__content {
position: relative;
z-index: 2;
width: 100%
}
.hero__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: #fff;
margin: 0 0 20px 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, .3)
}
@media (max-width: 1279px) {
.hero__title {
font-size: 42px
}
}
@media (max-width: 768px) {
.hero__title {
font-size: 36px;
margin-bottom: 16px
}
}
@media (max-width: 480px) {
.hero__title {
font-size: 28px;
margin-bottom: 12px
}
}
.hero__subtitle {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.4;
color: hsla(0, 0%, 100%, .9);
margin: 0 0 40px 0;
text-shadow: 0 1px 5px rgba(0, 0, 0, .2)
}
@media (max-width: 1279px) {
.hero__subtitle {
font-size: 18px;
margin-bottom: 35px
}
}
@media (max-width: 768px) {
.hero__subtitle {
font-size: 16px;
margin-bottom: 30px
}
}
@media (max-width: 480px) {
.hero__subtitle {
font-size: 14px;
margin-bottom: 25px
}
}
.hero__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
background: linear-gradient(135deg, #03A2CC 0%, rgb(2.2608695652, 122.0869565217, 153.7391304348) 100%);
color: #fff;
text-decoration: none;
border-radius: 12px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(3, 162, 204, .3);
border: none;
cursor: pointer;
position: relative;
overflow: hidden
}
.hero__button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left .5s
}
.hero__button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(3, 162, 204, .4);
background: linear-gradient(135deg, rgb(3.3695652174, 181.9565217391, 229.1304347826) 0%, #03A2CC 100%)
}
.hero__button:hover::before {
left: 100%
}
.hero__button:active {
transform: translateY(-1px)
}
.hero__button:focus {
outline: none;
box-shadow: none
}
@media (max-width: 768px) {
.hero__button {
padding: 14px 28px;
font-size: 16px
}
}
@media (max-width: 480px) {
.hero__button {
padding: 12px 24px;
font-size: 14px
}
}
@keyframes hero-fade-in {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes hero-slide-in {
from {
opacity: 0;
transform: translateX(-50px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
.hero__banner {
animation: hero-fade-in 1s ease-out
}
.hero__content {
animation: hero-slide-in 1s ease-out .2s both
}
.focus {
padding: 50px 0;
background-color: #fff
}
@media (max-width: 768px) {
.focus {
padding: 40px 0
}
}
@media (max-width: 480px) {
.focus {
padding: 30px 0
}
}
.focus__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.focus__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.focus__container {
padding: 0 32px
}
}
.focus__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: #000;
text-align: left;
margin: 0 0 60px 0
}
@media (max-width: 1024px) {
.focus__title {
font-size: 36px;
margin-bottom: 50px
}
}
@media (max-width: 768px) {
.focus__title {
font-size: 32px;
margin-bottom: 40px
}
}
@media (max-width: 480px) {
.focus__title {
font-size: 28px;
margin-bottom: 30px
}
}
.focus__grid {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 40px
}
@media (max-width: 1279px) {
.focus__grid {
gap: 30px
}
}
@media (max-width: 768px) {
.focus__grid {
grid-template-columns:1fr;
gap: 30px
}
}
@media (max-width: 480px) {
.focus__grid {
gap: 25px
}
}
.card, .form--card {
background-color: rgba(0, 0, 0, 0);
border-radius: 0;
overflow: visible;
box-shadow: none;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
opacity: 0;
transform: scale(0.9)
}
.card.is-visible, .is-visible.form--card {
opacity: 1;
transform: scale(1)
}
.card:hover, .form--card:hover {
transform: translateY(-5px);
box-shadow: none
}
.card__image-link {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 20px;
overflow: hidden
}
.card__image {
position: relative;
overflow: hidden;
aspect-ratio: 16/8
}
.card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1)
}
.card:hover .card__img, .form--card:hover .card__img {
transform: scale(1.03)
}
.card__content {
padding: 0;
margin-top: 24px;
flex: 1;
display: flex;
flex-direction: column
}
@media (max-width: 1279px) {
.card__content {
margin-top: 20px
}
}
@media (max-width: 768px) {
.card__content {
margin-top: 18px
}
}
@media (max-width: 480px) {
.card__content {
margin-top: 16px
}
}
.card__title-link {
text-decoration: none;
color: inherit;
display: block;
margin-bottom: 16px;
transition: color .3s ease
}
.card__title-link:hover {
color: #03a2cc
}
.card__title-link:hover .card__title {
color: #03a2cc
}
.card__title-link:focus {
outline: none;
box-shadow: none;
outline-offset: 4px;
border-radius: 4px
}
@media (max-width: 768px) {
.card__title-link {
margin-bottom: 14px
}
}
@media (max-width: 480px) {
.card__title-link {
margin-bottom: 12px
}
}
.card__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: #000;
margin: 0;
transition: color .3s ease
}
@media (max-width: 1024px) {
.card__title {
font-size: 22px
}
}
@media (max-width: 768px) {
.card__title {
font-size: 20px;
margin-bottom: 14px
}
}
@media (max-width: 480px) {
.card__title {
font-size: 18px;
margin-bottom: 12px
}
}
.card__text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #000;
margin: 0 0 24px 0;
flex: 1
}
@media (max-width: 1024px) {
.card__text {
font-size: 15px
}
}
@media (max-width: 768px) {
.card__text {
font-size: 14px;
margin-bottom: 20px
}
}
@media (max-width: 480px) {
.card__text {
font-size: 13px;
margin-bottom: 18px
}
}
.card__link {
color: #03a2cc;
text-decoration: none;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
position: relative
}
.card__link:hover {
text-decoration: none
}
.card__link::after {
content: "→";
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 18px
}
.card__link:hover {
color: rgb(2.2608695652, 122.0869565217, 153.7391304348);
transform: translateX(4px)
}
.card__link:hover::after {
transform: translateX(4px)
}
.card__link:focus {
outline: none;
box-shadow: none;
outline-offset: 4px;
border-radius: 4px
}
@media (max-width: 1024px) {
.card__link {
font-size: 15px
}
}
@media (max-width: 768px) {
.card__link {
font-size: 14px
}
}
@media (max-width: 480px) {
.card__link {
font-size: 13px
}
}
.focus__card:nth-child(1) {
transition-delay: .1s
}
.focus__card:nth-child(2) {
transition-delay: .2s
}
.focus__card:nth-child(3) {
transition-delay: .3s
}
.card--featured {
border: 2px solid #03a2cc;
position: relative;
transform: scale(1.02)
}
.card--featured::before {
content: "Featured";
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #03A2CC 0%, rgb(2.2608695652, 122.0869565217, 153.7391304348) 100%);
color: #fff;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
z-index: 2;
box-shadow: 0 4px 12px rgba(3, 162, 204, .3)
}
.card--compact .card__content {
padding: 24px
}
@media (max-width: 480px) {
.card--compact .card__content {
padding: 20px
}
}
.card--compact .card__title {
font-size: 20px;
margin-bottom: 12px
}
@media (max-width: 480px) {
.card--compact .card__title {
font-size: 18px
}
}
.card--compact .card__text {
font-size: 14px;
margin-bottom: 16px
}
@media (max-width: 480px) {
.card--compact .card__text {
font-size: 13px
}
}
.card--minimal {
box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
border: 1px solid rgba(0, 0, 0, .05)
}
.card--minimal:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
border-color: rgba(3, 162, 204, .2)
}
.specialization {
position: relative;
padding: 80px 0;
background-color: #64838f;
overflow: hidden
}
@media (max-width: 768px) {
.specialization {
padding: 60px 0
}
}
@media (max-width: 480px) {
.specialization {
padding: 40px 0
}
}
.specialization__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: .1
}
.specialization__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}
.specialization__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.specialization__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.specialization__container {
padding: 0 32px
}
}
.specialization__container {
position: relative;
z-index: 2
}
.specialization__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.3;
color: #fff;
text-align: center;
margin: 0 0 60px 0;
max-width: 1000px;
margin-left: auto;
margin-right: auto
}
@media (max-width: 1279px) {
.specialization__title {
font-size: 32px;
margin-bottom: 50px
}
}
@media (max-width: 768px) {
.specialization__title {
font-size: 28px;
margin-bottom: 40px
}
}
@media (max-width: 480px) {
.specialization__title {
font-size: 24px;
margin-bottom: 30px
}
}
.specialization__content {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 0;
position: relative
}
@media (max-width: 768px) {
.specialization__content {
grid-template-columns:1fr;
gap: 40px
}
}
@media (max-width: 480px) {
.specialization__content {
gap: 30px
}
}
.specialization__content:not(.specialization--five-columns .specialization__content)::before, .specialization__content:not(.specialization--five-columns .specialization__content)::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: hsla(0, 0%, 100%, .3);
z-index: 3
}
@media (max-width: 768px) {
.specialization__content:not(.specialization--five-columns .specialization__content)::before, .specialization__content:not(.specialization--five-columns .specialization__content)::after {
display: none
}
}
.specialization__content:not(.specialization--five-columns .specialization__content)::before {
left: calc(33.333% - .5px)
}
.specialization__content:not(.specialization--five-columns .specialization__content)::after {
right: calc(33.333% - .5px)
}
.specialization__item {
position: relative;
padding: 0 40px;
display: flex;
flex-direction: column
}
.specialization__item:first-child::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
background-color: hsla(0, 0%, 100%, .3);
z-index: 3
}
@media (max-width: 768px) {
.specialization__item:first-child::before {
display: none
}
}
@media (max-width: 1279px) {
.specialization__item {
padding: 0 30px
}
}
@media (max-width: 768px) {
.specialization__item {
padding: 0;
text-align: center
}
}
@media (max-width: 480px) {
.specialization__item {
padding: 0
}
}
.specialization__item-title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin: 0 0 20px 0
}
@media (max-width: 1279px) {
.specialization__item-title {
font-size: 22px;
margin-bottom: 18px
}
}
@media (max-width: 768px) {
.specialization__item-title {
font-size: 20px;
margin-bottom: 16px
}
}
@media (max-width: 480px) {
.specialization__item-title {
font-size: 18px;
margin-bottom: 14px
}
}
.specialization__item-text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: hsla(0, 0%, 100%, .9);
margin: 0
}
@media (max-width: 1279px) {
.specialization__item-text {
font-size: 15px
}
}
@media (max-width: 768px) {
.specialization__item-text {
font-size: 14px
}
}
@media (max-width: 480px) {
.specialization__item-text {
font-size: 13px
}
}
@keyframes specializationFadeIn {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.specialization__title {
animation: specializationFadeIn .8s ease-out
}
.specialization__item:nth-child(1) {
animation: specializationFadeIn .8s ease-out .2s both
}
.specialization__item:nth-child(2) {
animation: specializationFadeIn .8s ease-out .4s both
}
.specialization__item:nth-child(3) {
animation: specializationFadeIn .8s ease-out .6s both
}
.specialization--five-columns .specialization__content {
display: grid;
grid-template-columns:repeat(5, 1fr);
gap: 0;
position: relative
}
@media (max-width: 1200px) {
.specialization--five-columns .specialization__content {
grid-template-columns:repeat(3, 1fr)
}
}
@media (max-width: 768px) {
.specialization--five-columns .specialization__content {
grid-template-columns:1fr;
gap: 40px
}
}
@media (max-width: 480px) {
.specialization--five-columns .specialization__content {
gap: 30px
}
}
.specialization--five-columns .specialization__item {
position: relative;
padding: 0 30px;
text-align: left
}
.specialization--five-columns .specialization__item:not(:nth-child(5n))::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
background-color: #fff;
z-index: 3
}
@media (max-width: 768px) {
.specialization--five-columns .specialization__item:not(:nth-child(5n))::after {
display: none
}
}
.specialization--five-columns .specialization__item:first-child::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
background-color: #fff;
z-index: 3
}
@media (max-width: 768px) {
.specialization--five-columns .specialization__item:first-child::before {
display: none
}
}
@media (max-width: 1200px) {
.specialization--five-columns .specialization__item {
padding: 0 25px
}
.specialization--five-columns .specialization__item:nth-child(3n+2)::before, .specialization--five-columns .specialization__item:nth-child(3n+3)::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
background-color: #fff;
z-index: 3
}
}
@media (max-width: 1200px)and (max-width: 768px) {
.specialization--five-columns .specialization__item:nth-child(3n+2)::before, .specialization--five-columns .specialization__item:nth-child(3n+3)::before {
display: none
}
}
@media (max-width: 1200px) {
.specialization--five-columns .specialization__item:nth-child(3n+1)::before {
display: none
}
}
@media (max-width: 768px) {
.specialization--five-columns .specialization__item {
padding: 0;
text-align: center
}
}
@media (max-width: 480px) {
.specialization--five-columns .specialization__item {
padding: 0
}
}
.specialization--five-columns .specialization__item-text {
font-size: 18px;
color: #fff
}
@media (max-width: 1279px) {
.specialization--five-columns .specialization__item-text {
font-size: 16px
}
}
@media (max-width: 768px) {
.specialization--five-columns .specialization__item-text {
font-size: 15px
}
}
@media (max-width: 480px) {
.specialization--five-columns .specialization__item-text {
font-size: 14px
}
}
.specialization--five-columns .specialization__item:nth-child(1) {
animation: specializationFadeIn .8s ease-out .1s both
}
.specialization--five-columns .specialization__item:nth-child(2) {
animation: specializationFadeIn .8s ease-out .2s both
}
.specialization--five-columns .specialization__item:nth-child(3) {
animation: specializationFadeIn .8s ease-out .3s both
}
.specialization--five-columns .specialization__item:nth-child(4) {
animation: specializationFadeIn .8s ease-out .4s both
}
.specialization--five-columns .specialization__item:nth-child(5) {
animation: specializationFadeIn .8s ease-out .5s both
}
.news {
padding: 80px 0;
background-color: #fff
}
@media (max-width: 768px) {
.news {
padding: 60px 0
}
}
@media (max-width: 480px) {
.news {
padding: 40px 0
}
}
.news--after-breadcrumbs {
padding-top: 40px
}
@media (max-width: 768px) {
.news--after-breadcrumbs {
padding-top: 30px
}
}
@media (max-width: 480px) {
.news--after-breadcrumbs {
padding-top: 20px
}
}
.news__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.news__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.news__container {
padding: 0 32px
}
}
.news__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: #000;
text-align: left;
margin: 0 0 60px 0
}
@media (max-width: 1024px) {
.news__title {
font-size: 36px;
margin-bottom: 50px
}
}
@media (max-width: 768px) {
.news__title {
font-size: 32px;
margin-bottom: 40px
}
}
@media (max-width: 480px) {
.news__title {
font-size: 28px;
margin-bottom: 30px
}
}
.news__grid {
display: flex;
flex-direction: column;
gap: 50px
}
@media (max-width: 1279px) {
.news__grid {
gap: 40px
}
}
@media (max-width: 768px) {
.news__grid {
gap: 35px
}
}
@media (max-width: 480px) {
.news__grid {
gap: 30px
}
}
.news-card {
display: flex;
gap: 40px;
align-items: flex-start;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1)
}
@media (max-width: 1279px) {
.news-card {
gap: 30px
}
}
@media (max-width: 768px) {
.news-card {
flex-direction: column;
gap: 20px
}
}
@media (max-width: 480px) {
.news-card {
gap: 16px
}
}
.news-card__image {
flex-shrink: 0;
width: 300px;
height: 200px;
border-radius: 20px;
overflow: hidden
}
@media (max-width: 1279px) {
.news-card__image {
width: 250px;
height: 170px
}
}
@media (max-width: 768px) {
.news-card__image {
width: 100%;
height: 250px;
border-radius: 16px
}
}
@media (max-width: 480px) {
.news-card__image {
height: 200px;
border-radius: 12px
}
}
.news-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1)
}
.news-card:hover .news-card__img {
transform: scale(1.03)
}
.news-card__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px
}
@media (max-width: 768px) {
.news-card__content {
gap: 14px
}
}
@media (max-width: 480px) {
.news-card__content {
gap: 12px
}
}
.news-card__date {
display: inline-block;
padding: 6px 12px;
background-color: rgba(124, 158, 171, .2);
border-radius: 0;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
color: #000;
align-self: flex-start
}
@media (max-width: 768px) {
.news-card__date {
font-size: 13px;
padding: 5px 10px
}
}
@media (max-width: 480px) {
.news-card__date {
font-size: 12px;
padding: 4px 8px
}
}
.news-card__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: #000;
margin: 0
}
@media (max-width: 1279px) {
.news-card__title {
font-size: 22px
}
}
@media (max-width: 768px) {
.news-card__title {
font-size: 20px
}
}
@media (max-width: 480px) {
.news-card__title {
font-size: 18px
}
}
.news-card__text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #000;
margin: 0
}
@media (max-width: 1279px) {
.news-card__text {
font-size: 15px
}
}
@media (max-width: 768px) {
.news-card__text {
font-size: 14px
}
}
@media (max-width: 480px) {
.news-card__text {
font-size: 13px
}
}
.news-card__link {
color: #03a2cc;
text-decoration: none;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start
}
.news-card__link::after {
content: "→";
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 18px
}
.news-card__link:hover {
color: rgb(2.2608695652, 122.0869565217, 153.7391304348);
transform: translateX(4px);
text-decoration: none
}
.news-card__link:hover::after {
transform: translateX(4px)
}
.news-card__link:focus {
outline: none;
box-shadow: none
}
@media (max-width: 1279px) {
.news-card__link {
font-size: 15px
}
}
@media (max-width: 768px) {
.news-card__link {
font-size: 14px
}
}
@media (max-width: 480px) {
.news-card__link {
font-size: 13px
}
}
@keyframes newsFadeIn {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.news__title {
animation: newsFadeIn .8s ease-out
}
.news-card:nth-child(1) {
animation: newsFadeIn .8s ease-out .1s both
}
.news-card:nth-child(2) {
animation: newsFadeIn .8s ease-out .2s both
}
.news-card:nth-child(3) {
animation: newsFadeIn .8s ease-out .3s both
}
.news-detail {
padding: 40px 0 80px 0;
background-color: #fff
}
@media (max-width: 1023px) {
.news-detail {
padding: 30px 0 60px 0
}
}
@media (max-width: 767px) {
.news-detail {
padding: 20px 0 40px 0
}
}
.news-detail__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.news-detail__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.news-detail__container {
padding: 0 32px
}
}
.news-detail__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #000;
margin: 0 0 40px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.news-detail__title {
font-size: 42px;
margin-bottom: 35px
}
}
@media (max-width: 767px) {
.news-detail__title {
font-size: 36px;
margin-bottom: 30px
}
}
@media (max-width: 479px) {
.news-detail__title {
font-size: 32px;
margin-bottom: 25px
}
}
.news-detail__block {
display: grid;
grid-template-columns:1fr 2fr;
gap: 60px;
align-items: start
}
.news-detail__block:not(:last-child) {
margin-bottom: 40px
}
@media (max-width: 1023px) {
.news-detail__block:not(:last-child) {
margin-bottom: 35px
}
}
@media (max-width: 767px) {
.news-detail__block:not(:last-child) {
margin-bottom: 30px
}
}
@media (max-width: 1023px) {
.news-detail__block {
gap: 50px
}
}
@media (max-width: 767px) {
.news-detail__block {
grid-template-columns:1fr;
gap: 30px
}
}
.news-detail__block--reversed {
grid-template-columns:2fr 1fr
}
@media (max-width: 767px) {
.news-detail__block--reversed {
grid-template-columns:1fr
}
}
.news-detail__block-image {
position: relative;
width: 100%;
aspect-ratio: 16/10;
border-radius: 20px;
overflow: hidden
}
@media (max-width: 767px) {
.news-detail__block-image {
border-radius: 16px
}
}
@media (max-width: 479px) {
.news-detail__block-image {
border-radius: 12px
}
}
.news-detail__block-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.news-detail__block-content {
display: flex;
flex-direction: column
}
.news-detail__date {
display: inline-block;
padding: 8px 16px;
background-color: rgba(124, 158, 171, .2);
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: #000;
margin-bottom: 24px;
width: fit-content
}
@media (max-width: 767px) {
.news-detail__date {
margin-bottom: 20px
}
}
@media (max-width: 479px) {
.news-detail__date {
font-size: 13px;
padding: 6px 12px;
margin-bottom: 16px
}
}
.news-detail__text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
line-height: 1.7
}
.news-detail__text p {
margin: 0 0 24px 0
}
.news-detail__text p:last-child {
margin-bottom: 0
}
@media (max-width: 767px) {
.news-detail__text p {
margin-bottom: 20px
}
}
@media (max-width: 479px) {
.news-detail__text p {
margin-bottom: 16px
}
}
@media (max-width: 1023px) {
.news-detail__text {
font-size: 15px
}
}
@media (max-width: 767px) {
.news-detail__text {
font-size: 14px
}
}
.news-detail__full-text {
margin-top: 40px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
line-height: 1.7
}
@media (max-width: 1023px) {
.news-detail__full-text {
margin-top: 35px;
font-size: 15px
}
}
@media (max-width: 767px) {
.news-detail__full-text {
margin-top: 30px;
font-size: 14px
}
}
.news-detail__full-text p {
margin: 0 0 24px 0
}
.news-detail__full-text p:last-child {
margin-bottom: 0
}
@media (max-width: 767px) {
.news-detail__full-text p {
margin-bottom: 20px
}
}
@media (max-width: 479px) {
.news-detail__full-text p {
margin-bottom: 16px
}
}
.about {
padding: 80px 0;
background-color: #fff
}
@media (max-width: 1023px) {
.about {
padding: 60px 0
}
}
@media (max-width: 767px) {
.about {
padding: 40px 0
}
}
@media (max-width: 479px) {
.about {
padding: 30px 0
}
}
.about--after-breadcrumbs {
padding-top: 40px
}
@media (max-width: 1023px) {
.about--after-breadcrumbs {
padding-top: 30px
}
}
@media (max-width: 767px) {
.about--after-breadcrumbs {
padding-top: 20px
}
}
@media (max-width: 479px) {
.about--after-breadcrumbs {
padding-top: 15px
}
}
.about__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.about__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.about__container {
padding: 0 32px
}
}
.about__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #000;
margin: 0 0 60px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.about__title {
font-size: 42px;
margin-bottom: 50px
}
}
@media (max-width: 767px) {
.about__title {
font-size: 36px;
margin-bottom: 40px
}
}
@media (max-width: 479px) {
.about__title {
font-size: 32px;
margin-bottom: 30px
}
}
.about__content {
display: grid;
grid-template-columns:1fr 2fr;
gap: 60px;
align-items: start
}
@media (max-width: 1023px) {
.about__content {
gap: 50px
}
}
@media (max-width: 767px) {
.about__content {
grid-template-columns:1fr;
gap: 40px
}
}
@media (max-width: 479px) {
.about__content {
gap: 30px
}
}
.about__image {
position: relative;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 16/10
}
.about__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.about__text {
display: flex;
flex-direction: column;
gap: 24px
}
@media (max-width: 767px) {
.about__text {
gap: 20px
}
}
@media (max-width: 479px) {
.about__text {
gap: 16px
}
}
.about__subtitle {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 24px;
font-weight: 600;
color: #000;
margin: 0;
line-height: 1.3
}
@media (max-width: 1023px) {
.about__subtitle {
font-size: 22px
}
}
@media (max-width: 767px) {
.about__subtitle {
font-size: 20px
}
}
@media (max-width: 479px) {
.about__subtitle {
font-size: 18px
}
}
.about__paragraph {
display: flex;
flex-direction: column;
gap: 20px
}
@media (max-width: 767px) {
.about__paragraph {
gap: 16px
}
}
@media (max-width: 479px) {
.about__paragraph {
gap: 12px
}
}
.about__paragraph p {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000;
margin: 0;
line-height: 1.6
}
@media (max-width: 1023px) {
.about__paragraph p {
font-size: 15px
}
}
@media (max-width: 767px) {
.about__paragraph p {
font-size: 14px
}
}
@media (max-width: 479px) {
.about__paragraph p {
font-size: 13px
}
}
.team {
padding: 80px 0;
background-color: rgba(245, 245, 245, .9)
}
@media (max-width: 1023px) {
.team {
padding: 60px 0
}
}
@media (max-width: 767px) {
.team {
padding: 40px 0
}
}
@media (max-width: 479px) {
.team {
padding: 30px 0
}
}
.team__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.team__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.team__container {
padding: 0 32px
}
}
.team__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #000;
margin: 0 0 24px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.team__title {
font-size: 42px;
margin-bottom: 20px
}
}
@media (max-width: 767px) {
.team__title {
font-size: 36px;
margin-bottom: 18px
}
}
@media (max-width: 479px) {
.team__title {
font-size: 32px;
margin-bottom: 16px
}
}
.team__description {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000;
margin: 0 0 60px 0;
line-height: 1.6;
max-width: 800px
}
@media (max-width: 1023px) {
.team__description {
font-size: 15px;
margin-bottom: 50px
}
}
@media (max-width: 767px) {
.team__description {
font-size: 14px;
margin-bottom: 40px
}
}
@media (max-width: 479px) {
.team__description {
font-size: 13px;
margin-bottom: 30px
}
}
.team__grid {
display: grid;
grid-template-columns:repeat(5, 1fr);
gap: 32px
}
@media (max-width: 1279px) {
.team__grid {
gap: 28px
}
}
@media (max-width: 1023px) {
.team__grid {
grid-template-columns:repeat(3, 1fr);
gap: 24px
}
}
@media (max-width: 767px) {
.team__grid {
grid-template-columns:repeat(2, 1fr);
gap: 20px
}
}
@media (max-width: 479px) {
.team__grid {
grid-template-columns:1fr;
gap: 16px
}
}
.team__member {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
transition: transform .3s ease
}
.team__member:hover {
transform: translateY(-4px)
}
.team__photo {
width: 100%;
aspect-ratio: 3/4;
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px
}
@media (max-width: 1023px) {
.team__photo {
margin-bottom: 16px
}
}
@media (max-width: 767px) {
.team__photo {
margin-bottom: 14px
}
}
@media (max-width: 479px) {
.team__photo {
margin-bottom: 12px
}
}
.team__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.team__name {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
color: #000;
margin: 0;
line-height: 1.3
}
@media (max-width: 1023px) {
.team__name {
font-size: 15px
}
}
@media (max-width: 767px) {
.team__name {
font-size: 14px
}
}
@media (max-width: 479px) {
.team__name {
font-size: 13px
}
}
.team__expertise {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: #000;
margin: 0 0 16px 0;
line-height: 1.4;
flex-grow: 1
}
@media (max-width: 1023px) {
.team__expertise {
font-size: 13px;
margin-bottom: 14px
}
}
@media (max-width: 767px) {
.team__expertise {
font-size: 12px;
margin-bottom: 12px
}
}
@media (max-width: 479px) {
.team__expertise {
font-size: 11px;
margin-bottom: 10px
}
}
.team__linkedin {
display: flex;
align-items: center;
justify-content: flex-start;
width: 32px;
height: 32px;
transition: transform .3s ease
}
.team__linkedin:hover {
transform: scale(1.1)
}
@media (max-width: 767px) {
.team__linkedin {
width: 28px;
height: 28px
}
}
@media (max-width: 479px) {
.team__linkedin {
width: 24px;
height: 24px
}
}
.team__linkedin-icon {
width: 100%;
height: 100%;
display: block
}
.partners {
padding: 80px 0;
background-color: #fff
}
@media (max-width: 1023px) {
.partners {
padding: 60px 0
}
}
@media (max-width: 767px) {
.partners {
padding: 40px 0
}
}
@media (max-width: 479px) {
.partners {
padding: 30px 0
}
}
.partners__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.partners__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.partners__container {
padding: 0 32px
}
}
.partners__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #000;
margin: 0 0 60px 0;
line-height: 1.2;
text-align: left
}
@media (max-width: 1023px) {
.partners__title {
font-size: 42px;
margin-bottom: 50px
}
}
@media (max-width: 767px) {
.partners__title {
font-size: 36px;
margin-bottom: 40px
}
}
@media (max-width: 479px) {
.partners__title {
font-size: 32px;
margin-bottom: 30px
}
}
.partners__grid {
display: grid;
grid-template-columns:repeat(8, 1fr);
gap: 40px;
align-items: center
}
@media (max-width: 1279px) {
.partners__grid {
gap: 32px
}
}
@media (max-width: 1023px) {
.partners__grid {
grid-template-columns:repeat(4, 1fr);
gap: 24px
}
}
@media (max-width: 767px) {
.partners__grid {
grid-template-columns:repeat(3, 1fr);
gap: 20px
}
}
@media (max-width: 479px) {
.partners__grid {
grid-template-columns:repeat(2, 1fr);
gap: 16px
}
}
.partners__item {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
transition: transform .3s ease
}
.partners__item:hover {
transform: translateY(-4px)
}
@media (max-width: 1023px) {
.partners__item {
padding: 16px
}
}
@media (max-width: 767px) {
.partners__item {
padding: 12px
}
}
@media (max-width: 479px) {
.partners__item {
padding: 8px
}
}
.partners__logo {
max-width: 100%;
max-height: 60px;
height: auto;
object-fit: contain;
transition: all .3s ease
}
.partners__logo:hover {
transform: scale(1.05)
}
@media (max-width: 1023px) {
.partners__logo {
max-height: 50px
}
}
@media (max-width: 767px) {
.partners__logo {
max-height: 40px
}
}
@media (max-width: 479px) {
.partners__logo {
max-height: 35px
}
}
.certifications {
padding: 80px 0;
background-color: #fff
}
@media (max-width: 1023px) {
.certifications {
padding: 60px 0
}
}
@media (max-width: 767px) {
.certifications {
padding: 40px 0
}
}
@media (max-width: 479px) {
.certifications {
padding: 30px 0
}
}
.certifications__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.certifications__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.certifications__container {
padding: 0 32px
}
}
.certifications__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #000;
margin: 0 0 60px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.certifications__title {
font-size: 42px;
margin-bottom: 50px
}
}
@media (max-width: 767px) {
.certifications__title {
font-size: 36px;
margin-bottom: 40px
}
}
@media (max-width: 479px) {
.certifications__title {
font-size: 32px;
margin-bottom: 30px
}
}
.certifications__grid {
display: grid;
grid-template-columns:repeat(5, 1fr);
gap: 24px
}
@media (max-width: 1279px) {
.certifications__grid {
gap: 20px
}
}
@media (max-width: 1023px) {
.certifications__grid {
grid-template-columns:repeat(3, 1fr);
gap: 18px
}
}
@media (max-width: 767px) {
.certifications__grid {
grid-template-columns:repeat(2, 1fr);
gap: 16px
}
}
@media (max-width: 479px) {
.certifications__grid {
grid-template-columns:1fr;
gap: 14px
}
}
.certifications__item {
position: relative;
cursor: pointer;
transition: transform .3s ease
}
.certifications__item:hover {
transform: scale(1.05)
}
.certifications__img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
transition: box-shadow .3s ease
}
.certifications__img:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, .15)
}
.lightbox {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all .3s ease
}
.lightbox--active {
opacity: 1;
visibility: visible
}
.lightbox--active .lightbox__content {
transform: scale(1)
}
.lightbox__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .9);
backdrop-filter: blur(4px)
}
.lightbox__content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 40px;
transform: scale(0.8);
transition: transform .3s ease
}
@media (max-width: 767px) {
.lightbox__content {
padding: 20px
}
}
.lightbox__close {
position: absolute;
top: 20px;
right: 20px;
z-index: 2001;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: hsla(0, 0%, 100%, .1);
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: all .3s ease
}
.lightbox__close:hover {
background: hsla(0, 0%, 100%, .2);
transform: scale(1.1)
}
.lightbox__close:focus {
outline: none;
box-shadow: none
}
.lightbox__close svg {
width: 24px;
height: 24px
}
.lightbox__img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}
@media (max-width: 767px) {
.lightbox__img {
max-width: 95%;
max-height: 85%
}
}
.product-hero {
padding: 80px 0 80px 0;
background-color: #fff
}
@media (max-width: 1023px) {
.product-hero {
padding: 60px 0 100px 0
}
}
@media (max-width: 767px) {
.product-hero {
padding: 40px 0 80px 0
}
}
@media (max-width: 479px) {
.product-hero {
padding: 30px 0 60px 0
}
}
.product-hero--after-breadcrumbs {
padding-top: 40px
}
@media (max-width: 1023px) {
.product-hero--after-breadcrumbs {
padding-top: 30px
}
}
@media (max-width: 767px) {
.product-hero--after-breadcrumbs {
padding-top: 20px
}
}
@media (max-width: 479px) {
.product-hero--after-breadcrumbs {
padding-top: 15px
}
}
.product-hero__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.product-hero__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.product-hero__container {
padding: 0 32px
}
}
.product-hero__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 64px;
font-weight: 700;
color: #000;
margin: 0 0 60px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.product-hero__title {
font-size: 56px;
margin-bottom: 50px
}
}
@media (max-width: 767px) {
.product-hero__title {
font-size: 48px;
margin-bottom: 40px
}
}
@media (max-width: 479px) {
.product-hero__title {
font-size: 40px;
margin-bottom: 30px
}
}
.product-hero__banner {
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 300px;
display: flex;
align-items: center
}
@media (max-width: 1023px) {
.product-hero__banner {
min-height: 260px;
border-radius: 16px
}
}
@media (max-width: 767px) {
.product-hero__banner {
min-height: 220px;
border-radius: 12px
}
}
@media (max-width: 479px) {
.product-hero__banner {
min-height: 180px;
border-radius: 8px
}
}
.product-hero__bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1
}
.product-hero__content {
position: relative;
z-index: 2;
padding: 60px
}
@media (max-width: 1023px) {
.product-hero__content {
padding: 50px
}
}
@media (max-width: 767px) {
.product-hero__content {
padding: 40px
}
}
@media (max-width: 479px) {
.product-hero__content {
padding: 30px 20px
}
}
.product-hero__subtitle {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 28px;
font-weight: 600;
color: #fff;
margin: 0 0 40px 0;
line-height: 1.4
}
@media (max-width: 1023px) {
.product-hero__subtitle {
font-size: 26px;
margin-bottom: 35px
}
}
@media (max-width: 767px) {
.product-hero__subtitle {
font-size: 24px;
margin-bottom: 30px
}
}
@media (max-width: 479px) {
.product-hero__subtitle {
font-size: 20px;
margin-bottom: 25px
}
}
.product-hero__button {
font-size: 18px;
font-weight: 600;
padding: 16px 32px;
border-radius: 12px;
background: #03a2cc;
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(3, 162, 204, .3)
}
.product-hero__button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(3, 162, 204, .4);
background: rgb(2.6304347826, 142.0434782609, 178.8695652174)
}
.product-hero__button:focus {
outline: none;
box-shadow: none
}
@media (max-width: 1023px) {
.product-hero__button {
font-size: 17px;
padding: 14px 28px
}
}
@media (max-width: 767px) {
.product-hero__button {
font-size: 16px;
padding: 12px 24px
}
}
@media (max-width: 479px) {
.product-hero__button {
font-size: 15px;
padding: 10px 20px
}
}
.product-info {
padding: 80px 0;
background-color: #fff
}
@media (max-width: 1023px) {
.product-info {
padding: 60px 0
}
}
@media (max-width: 767px) {
.product-info {
padding: 40px 0
}
}
@media (max-width: 479px) {
.product-info {
padding: 30px 0
}
}
.product-info__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.product-info__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.product-info__container {
padding: 0 32px
}
}
.product-info__img picture img {
width: 100%;
height: auto;
object-fit: cover;
}
.product-info__wrapper {
display: grid;
grid-template-columns:1fr 2fr;
gap: 80px;
align-items: start;
grid-template-areas: "media content";
}
.product-info__slider {
grid-area: media;
}
.product-info__content {
grid-area: content;
}
.product-info--reverse .product-info__wrapper {
grid-template-columns: 2fr 1fr;
grid-template-areas: "content media";
}
.product-info__content {
display: grid;
grid-template-columns:2fr minmax(320px, 1fr);
gap: 40px;
align-items: start
}
@media (max-width: 1200px) {
.product-info__content {
width: 100%;
display: flex;
flex-direction: column;
}
}
@media (max-width: 1023px) {
.product-info__wrapper {
gap: 60px
}
}
@media (max-width: 767px) {
.product-info__wrapper {
display: flex;
flex-direction: column-reverse;
gap: 40px
}
}
.product-info__text p {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000;
margin: 0;
line-height: 1.6;
}
.product-info__text p:not(:last-child) {
margin-bottom: 16px;
}
@media (max-width: 1023px) {
.product-info__text p {
font-size: 15px
}
}
@media (max-width: 767px) {
.product-info__text p {
font-size: 14px
}
}
@media (max-width: 479px) {
.product-info__text p {
font-size: 13px
}
}
.product-info__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 36px;
font-weight: 700;
color: #03a2cc;
margin: 0;
line-height: 1.2;
margin-bottom: 24px;
}
@media (max-width: 1023px) {
.product-info__title {
font-size: 32px
}
}
@media (max-width: 767px) {
.product-info__title {
font-size: 28px
}
}
@media (max-width: 479px) {
.product-info__title {
font-size: 24px
}
}
.product-info__subtitle {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 24px;
font-weight: 600;
color: #000;
margin: 0;
line-height: 1.3;
margin-bottom: 16px;
}
@media (max-width: 1023px) {
.product-info__subtitle {
font-size: 22px
}
}
@media (max-width: 767px) {
.product-info__subtitle {
font-size: 20px
}
}
@media (max-width: 479px) {
.product-info__subtitle {
font-size: 18px
}
}
.product-info__areas {
width: 100%;
background-color: #64838f;
border-radius: 20px;
padding: 40px;
height: fit-content
}
@media (max-width: 1023px) {
.product-info__areas {
padding: 35px;
border-radius: 16px
}
}
@media (max-width: 767px) {
.product-info__areas {
padding: 30px;
border-radius: 12px
}
}
@media (max-width: 479px) {
.product-info__areas {
padding: 25px;
border-radius: 8px
}
}
.product-info__areas-title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 32px;
font-weight: 700;
color: #fff;
margin: 0 0 40px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.product-info__areas-title {
font-size: 28px;
margin-bottom: 35px
}
}
@media (max-width: 767px) {
.product-info__areas-title {
font-size: 26px;
margin-bottom: 30px
}
}
@media (max-width: 479px) {
.product-info__areas-title {
font-size: 24px;
margin-bottom: 25px
}
}
.product-info__areas-grid {
display: flex;
flex-direction: column;
gap: 12px
}
@media (max-width: 1023px) {
.product-info__areas-grid {
gap: 12px
}
}
@media (max-width: 767px) {
.product-info__areas-grid {
gap: 12px
}
}
@media (max-width: 479px) {
.product-info__areas-grid {
gap: 12px
}
}
.product-info .product-info__areas-title {
color: #fff;
}
.product-info__areas-item {
position: relative;
padding-left: 20px
}
.product-info__areas-item::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%
}
.product-info__areas-item-text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 400;
color: hsla(0, 0%, 100%, .9);
margin: 0;
line-height: 1.5;
color: #fff !important;
}
.product-info__areas-item-text strong {
font-weight: 600;
color: #fff
}
@media (max-width: 1023px) {
.product-info__areas-item-text {
font-size: 15px
}
}
@media (max-width: 767px) {
.product-info__areas-item-text {
font-size: 14px
}
}
@media (max-width: 479px) {
.product-info__areas-item-text {
font-size: 13px
}
}
.page-content {
padding: 40px 0 80px 0;
background-color: #fff
}
@media (max-width: 1023px) {
.page-content {
padding: 30px 0 60px 0
}
}
@media (max-width: 767px) {
.page-content {
padding: 20px 0 40px 0
}
}
.page-content--after-breadcrumbs {
padding-top: 40px
}
.page-content__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.page-content__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.page-content__container {
padding: 0 32px
}
}
.page-content__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #000;
margin: 0 0 40px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.page-content__title {
font-size: 42px;
margin-bottom: 35px
}
}
@media (max-width: 767px) {
.page-content__title {
font-size: 36px;
margin-bottom: 30px
}
}
@media (max-width: 479px) {
.page-content__title {
font-size: 32px;
margin-bottom: 25px
}
}
.page-content__text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
line-height: 1.7
}
@media (max-width: 1023px) {
.page-content__text {
font-size: 15px
}
}
@media (max-width: 767px) {
.page-content__text {
font-size: 14px
}
}
.error-404 {
padding: 80px 0 120px 0;
background-color: #fff;
min-height: calc(100vh - 500px);
display: flex;
align-items: center
}
@media (max-width: 1023px) {
.error-404 {
padding: 60px 0 100px 0
}
}
@media (max-width: 767px) {
.error-404 {
padding: 40px 0 80px 0
}
}
.error-404__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.error-404__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.error-404__container {
padding: 0 32px
}
}
.error-404__content {
text-align: center;
max-width: 800px;
margin: 0 auto
}
.error-404__number {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 180px;
font-weight: 700;
color: #03a2cc;
line-height: 1;
margin-bottom: 20px;
opacity: .15
}
@media (max-width: 1023px) {
.error-404__number {
font-size: 150px
}
}
@media (max-width: 767px) {
.error-404__number {
font-size: 120px
}
}
@media (max-width: 479px) {
.error-404__number {
font-size: 90px
}
}
.error-404__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 48px;
font-weight: 700;
color: #000;
margin: 0 0 24px 0;
line-height: 1.2
}
@media (max-width: 1023px) {
.error-404__title {
font-size: 42px;
margin-bottom: 20px
}
}
@media (max-width: 767px) {
.error-404__title {
font-size: 36px;
margin-bottom: 18px
}
}
@media (max-width: 479px) {
.error-404__title {
font-size: 28px;
margin-bottom: 16px
}
}
.error-404__text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 18px;
font-weight: 400;
color: #5f6368;
line-height: 1.7;
margin: 0 0 40px 0;
max-width: 600px;
margin-left: auto;
margin-right: auto
}
@media (max-width: 767px) {
.error-404__text {
font-size: 16px;
margin-bottom: 32px
}
}
@media (max-width: 479px) {
.error-404__text {
font-size: 15px;
margin-bottom: 28px
}
}
.error-404__actions {
margin-bottom: 60px
}
@media (max-width: 767px) {
.error-404__actions {
margin-bottom: 50px
}
}
@media (max-width: 479px) {
.error-404__actions {
margin-bottom: 40px
}
}
.error-404__actions .button {
min-width: 200px
}
@media (max-width: 479px) {
.error-404__actions .button {
min-width: 100%
}
}
.error-404__search {
margin-bottom: 60px
}
@media (max-width: 767px) {
.error-404__search {
margin-bottom: 50px
}
}
.error-404__search-text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
color: #000;
margin: 0 0 20px 0
}
@media (max-width: 479px) {
.error-404__search-text {
font-size: 15px;
margin-bottom: 16px
}
}
.error-404 .search-form {
display: flex;
gap: 12px;
max-width: 500px;
margin: 0 auto
}
@media (max-width: 479px) {
.error-404 .search-form {
flex-direction: column;
gap: 10px
}
}
.error-404 .search-form__input {
flex: 1;
padding: 14px 20px;
border: 1px solid #dadce0;
border-radius: 4px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
transition: border-color .3s ease
}
.error-404 .search-form__input::placeholder {
color: #9aa0a6
}
.error-404 .search-form__input:focus {
outline: none;
border-color: #03a2cc
}
@media (max-width: 479px) {
.error-404 .search-form__input {
padding: 12px 16px;
font-size: 15px
}
}
.error-404 .search-form__submit {
min-width: 120px
}
@media (max-width: 479px) {
.error-404 .search-form__submit {
min-width: 100%
}
}
.error-404__recent {
margin-top: 60px;
padding-top: 60px;
border-top: 1px solid #e8eaed
}
@media (max-width: 767px) {
.error-404__recent {
margin-top: 50px;
padding-top: 50px
}
}
.error-404__recent-title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 32px;
font-weight: 700;
color: #000;
margin: 0 0 32px 0;
text-align: center
}
@media (max-width: 767px) {
.error-404__recent-title {
font-size: 28px;
margin-bottom: 28px
}
}
@media (max-width: 479px) {
.error-404__recent-title {
font-size: 24px;
margin-bottom: 24px
}
}
.error-404__recent-grid {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 24px
}
@media (max-width: 767px) {
.error-404__recent-grid {
grid-template-columns:repeat(2, 1fr);
gap: 20px
}
}
@media (max-width: 479px) {
.error-404__recent-grid {
grid-template-columns:1fr;
gap: 16px
}
}
.error-404__recent-item {
background-color: #f8f9fa;
border-radius: 8px;
padding: 24px;
transition: transform .3s ease, box-shadow .3s ease
}
.error-404__recent-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}
@media (max-width: 479px) {
.error-404__recent-item {
padding: 20px
}
}
.error-404__recent-link {
text-decoration: none;
display: block
}
.error-404__recent-item-title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 18px;
font-weight: 600;
color: #000;
margin: 0 0 12px 0;
line-height: 1.4;
transition: color .3s ease
}
.error-404__recent-item:hover .error-404__recent-item-title {
color: #03a2cc
}
@media (max-width: 479px) {
.error-404__recent-item-title {
font-size: 16px;
margin-bottom: 10px
}
}
.error-404__recent-date {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: #5f6368;
display: block
}
@media (max-width: 479px) {
.error-404__recent-date {
font-size: 13px
}
}
.page-enter {
opacity: 0;
transform: translateY(20px);
transition: all 300ms ease
}
.page-enter-active {
opacity: 1;
transform: translateY(0)
}
.page-exit {
opacity: 1;
transform: translateY(0);
transition: all 300ms ease
}
.page-exit-active {
opacity: 0;
transform: translateY(-20px)
}
.fade-in {
animation: fadeIn 300ms ease
}
.fade-out {
animation: fadeOut 300ms ease
}
.slide-up {
animation: slideUp 300ms ease
}
.slide-down {
animation: slideDown 300ms ease
}
.slide-in-left {
animation: slideInLeft 300ms ease
}
.slide-in-right {
animation: slideInRight 300ms ease
}
.scale-in {
animation: scaleIn 300ms ease
}
.scale-out {
animation: scaleOut 300ms ease
}
.rotate-in {
animation: rotateIn 300ms ease
}
.hover-lift {
transition: transform 300ms ease
}
.hover-lift:hover {
transition: transform 300ms ease
}
.hover-lift:hover:hover {
transform: translateY(-4px)
}
.hover-scale {
transition: transform 300ms ease
}
.hover-scale:hover {
transition: transform 300ms ease
}
.hover-scale:hover:hover {
transform: scale(1.05)
}
.hover-rotate {
transition: transform 300ms ease
}
.hover-rotate:hover {
transform: rotate(5deg)
}
.hover-glow {
transition: all 300ms ease
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(3, 162, 204, .5)
}
.hover-slide {
position: relative;
overflow: hidden
}
.hover-slide::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 500ms ease
}
.hover-slide:hover::before {
left: 100%
}
.loading {
position: relative;
pointer-events: none;
opacity: .6
}
.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #dadce0;
border-radius: 50%;
border-top-color: #03a2cc;
animation: spin 1s linear infinite
}
.loading--sm::after {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px
}
.loading--lg::after {
width: 24px;
height: 24px;
margin: -12px 0 0 -12px
}
.skeleton {
background: linear-gradient(90deg, #E8EAED 25%, #F1F3F4 50%, #E8EAED 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: .375rem
}
.skeleton--text {
height: 1em;
margin-bottom: .5rem
}
.skeleton--title {
height: 1.5em;
margin-bottom: 1rem
}
.skeleton--button {
height: 44px;
width: 120px
}
.skeleton--avatar {
width: 40px;
height: 40px;
border-radius: 9999px
}
.skeleton--card {
height: 200px;
border-radius: .5rem
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0
}
100% {
background-position: -200% 0
}
}
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: all 500ms ease
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0)
}
.scroll-reveal--left {
transform: translateX(-30px)
}
.scroll-reveal--left.revealed {
transform: translateX(0)
}
.scroll-reveal--right {
transform: translateX(30px)
}
.scroll-reveal--right.revealed {
transform: translateX(0)
}
.scroll-reveal--scale {
transform: scale(0.9)
}
.scroll-reveal--scale.revealed {
transform: scale(1)
}
.scroll-reveal--rotate {
transform: rotate(-5deg)
}
.scroll-reveal--rotate.revealed {
transform: rotate(0deg)
}
.stagger-item {
opacity: 0;
transform: translateY(20px);
transition: all 300ms ease
}
.stagger-item.animate {
opacity: 1;
transform: translateY(0)
}
.stagger-item:nth-child(1) {
transition-delay: 100ms
}
.stagger-item:nth-child(2) {
transition-delay: 200ms
}
.stagger-item:nth-child(3) {
transition-delay: 300ms
}
.stagger-item:nth-child(4) {
transition-delay: 400ms
}
.stagger-item:nth-child(5) {
transition-delay: 500ms
}
.stagger-item:nth-child(6) {
transition-delay: 600ms
}
.stagger-item:nth-child(7) {
transition-delay: 700ms
}
.stagger-item:nth-child(8) {
transition-delay: 800ms
}
.stagger-item:nth-child(9) {
transition-delay: 900ms
}
.stagger-item:nth-child(10) {
transition-delay: 1000ms
}
.stagger-fade .stagger-item {
transform: none
}
.stagger-slide-left .stagger-item {
transform: translateX(-20px)
}
.stagger-slide-right .stagger-item {
transform: translateX(20px)
}
.stagger-scale .stagger-item {
transform: scale(0.9)
}
.ripple {
position: relative;
overflow: hidden
}
.ripple::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: hsla(0, 0%, 100%, .3);
transform: translate(-50%, -50%);
transition: width .6s, height .6s
}
.ripple:active::before {
width: 300px;
height: 300px
}
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
.bounce {
animation: bounce 1s infinite
}
.wiggle {
animation: wiggle 1s ease-in-out
}
.shake {
animation: shake .5s ease-in-out
}
.focus-ring {
transition: all 300ms ease
}
.focus-ring:focus:focus {
outline: none;
box-shadow: none
}
.focus-ring:focus {
transform: scale(1.02)
}
.focus-glow {
transition: all 300ms ease
}
.focus-glow:focus {
box-shadow: 0 0 0 3px rgba(3, 162, 204, .3);
transform: scale(1.02)
}
.btn-animated {
position: relative;
overflow: hidden;
transition: all 300ms ease
}
.btn-animated::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 300ms ease
}
.btn-animated:hover::before {
left: 100%
}
.btn-animated:active {
transform: scale(0.98)
}
.card-hover {
transition: all 300ms ease
}
.card-hover:hover {
transition: transform 300ms ease
}
.card-hover:hover:hover {
transform: translateY(-4px)
}
.card-hover:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}
.card-flip {
perspective: 1000px
}
.card-flip__inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform .6s;
transform-style: preserve-3d
}
.card-flip:hover .card-flip__inner {
transform: rotateY(180deg)
}
.card-flip__front, .card-flip__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden
}
.card-flip__back {
transform: rotateY(180deg)
}
.text-reveal {
overflow: hidden
}
.text-reveal__line {
display: block;
transform: translateY(100%);
transition: transform 500ms ease
}
.text-reveal__line.animate {
transform: translateY(0)
}
.text-reveal__line:nth-child(1) {
transition-delay: 100ms
}
.text-reveal__line:nth-child(2) {
transition-delay: 200ms
}
.text-reveal__line:nth-child(3) {
transition-delay: 300ms
}
.text-reveal__line:nth-child(4) {
transition-delay: 400ms
}
.text-reveal__line:nth-child(5) {
transition-delay: 500ms
}
.text-reveal__line:nth-child(6) {
transition-delay: 600ms
}
.text-reveal__line:nth-child(7) {
transition-delay: 700ms
}
.text-reveal__line:nth-child(8) {
transition-delay: 800ms
}
.text-reveal__line:nth-child(9) {
transition-delay: 900ms
}
.text-reveal__line:nth-child(10) {
transition-delay: 1000ms
}
.typewriter {
overflow: hidden;
border-right: 2px solid #03a2cc;
white-space: nowrap;
animation: typewriter 3s steps(40, end), blink-caret .75s step-end infinite
}
@keyframes typewriter {
from {
width: 0
}
to {
width: 100%
}
}
@keyframes blink-caret {
from, to {
border-color: rgba(0, 0, 0, 0)
}
50% {
border-color: #03a2cc
}
}
.progress-bar {
width: 100%;
height: 8px;
background-color: #e8eaed;
border-radius: 9999px;
overflow: hidden
}
.progress-bar__fill {
height: 100%;
background-color: #03a2cc;
border-radius: 9999px;
transition: width 500ms ease;
position: relative
}
.progress-bar__fill::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 50px 50px;
animation: progress-stripes 1s linear infinite
}
@keyframes progress-stripes {
0% {
background-position: 50px 0
}
100% {
background-position: 0 0
}
}
@media (max-width: 767px) {
.scroll-reveal {
transform: translateY(20px)
}
.scroll-reveal--left, .scroll-reveal--right {
transform: translateY(20px)
}
.stagger-item {
transform: translateY(15px)
}
.stagger-slide-left .stagger-item, .stagger-slide-right .stagger-item {
transform: translateY(15px)
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important
}
.scroll-reveal {
opacity: 1;
transform: none
}
.stagger-item {
opacity: 1;
transform: none
}
}
.redactor {
padding-bottom: 80px;
}
@media (max-width: 1023px) {
.redactor {
padding-bottom: 60px;
}
}
@media (max-width: 767px) {
.redactor {
padding-bottom: 40px;
}
}
.formatted h1, .formatted h2, .formatted h3, .formatted h4, .formatted h5, .formatted h6 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 1rem 0;
color: #202124;
margin-top: 0;
margin-bottom: 1rem;
color: #202124;
font-weight: 700;
line-height: 1.25
}
.formatted h1:last-child, .formatted h2:last-child, .formatted h3:last-child, .formatted h4:last-child, .formatted h5:last-child, .formatted h6:last-child {
margin-bottom: 0
}
.formatted h1 {
font-size: 2.25rem
}
@media (max-width: 767px) {
.formatted h1 {
font-size: 1.875rem
}
}
@media (max-width: 479px) {
.formatted h1 {
font-size: 1.5rem
}
}
.formatted h2 {
font-size: 1.875rem
}
@media (max-width: 767px) {
.formatted h2 {
font-size: 1.5rem
}
}
@media (max-width: 479px) {
.formatted h2 {
font-size: 1.25rem
}
}
.formatted h3 {
font-size: 1.5rem
}
@media (max-width: 767px) {
.formatted h3 {
font-size: 1.25rem
}
}
@media (max-width: 479px) {
.formatted h3 {
font-size: 1.125rem
}
}
.formatted h4 {
font-size: 1.25rem
}
@media (max-width: 479px) {
.formatted h4 {
font-size: 1rem
}
}
.formatted h5 {
font-size: 1.125rem
}
@media (max-width: 479px) {
.formatted h5 {
font-size: 1rem
}
}
.formatted h6 {
font-size: 1rem;
font-weight: 600
}
.formatted p {
font-size: 1rem;
font-weight: 400;
line-height: 1.625;
margin-bottom: 1rem;
color: #202124
}
.formatted p:last-child {
margin-bottom: 0
}
.formatted p--lead {
font-size: 1.125rem;
font-weight: 400;
color: #5f6368
}
.formatted p--small {
font-size: .875rem;
color: #5f6368
}
.formatted p--large {
font-size: 1.125rem
}
.formatted a {
color: #03a2cc;
text-decoration: none;
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.formatted a:hover {
color: #0288a3;
text-decoration: underline
}
.formatted a:focus:focus {
outline: none;
box-shadow: none
}
.formatted a--secondary {
color: #5f6368
}
.formatted a--secondary:hover {
color: #202124
}
.formatted a--muted {
color: #9aa0a6
}
.formatted a--muted:hover {
color: #5f6368
}
.formatted a--external::after {
content: "↗";
margin-left: .25rem;
font-size: .75rem
}
.formatted ul:not(.nav__list):not(.mobile-menu__list):not(.splide__list) {
list-style: none;
margin: 0 0 1.5rem 0;
padding: 0
}
.formatted ul:not(.nav__list):not(.mobile-menu__list):not(.splide__list) li {
position: relative;
padding-left: 1.5rem;
margin-bottom: .5rem;
font-size: 1rem;
line-height: 1.5;
color: #202124
}
.formatted ul:not(.nav__list):not(.mobile-menu__list):not(.splide__list) li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: #03a2cc;
font-weight: 700;
font-size: 1.125rem
}
.formatted ul:not(.nav__list):not(.mobile-menu__list):not(.splide__list) li:last-child {
margin-bottom: 0
}
@media (min-width: 1024px) {
.formatted ul:not(.nav__list):not(.mobile-menu__list):not(.splide__list) li {
font-size: 1.125rem;
padding-left: 1.5rem;
margin-bottom: .75rem
}
}
.formatted ul:not(.nav__list):not(.mobile-menu__list):not(.splide__list) ul {
margin-top: .5rem;
margin-bottom: 0
}
.formatted ul:not(.nav__list):not(.mobile-menu__list):not(.splide__list) ul li::before {
content: "◦";
font-size: 1rem
}
.formatted ol {
counter-reset: item;
margin: 0 0 1.5rem 0;
padding: 0
}
.formatted ol li {
position: relative;
padding-left: 1.5rem;
margin-bottom: .5rem;
font-size: 1rem;
line-height: 1.5;
color: #202124
}
.formatted ol li::before {
content: counter(item) ".";
counter-increment: item;
position: absolute;
left: 0;
top: 0;
color: #03a2cc;
font-weight: 700;
font-size: 1rem
}
.formatted ol li:last-child {
margin-bottom: 0
}
@media (min-width: 1024px) {
.formatted ol li {
font-size: 1.125rem;
padding-left: 1.5rem;
margin-bottom: .75rem
}
}
.formatted ol ol {
margin-top: .5rem;
margin-bottom: 0;
counter-reset: item
}
.formatted ol ol li::before {
content: counter(item, lower-alpha) "."
}
.formatted ol ol ol li::before {
content: counter(item, lower-roman) "."
}
.formatted dl {
margin-bottom: 1.5rem
}
.formatted dl dt {
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
color: #202124;
margin-bottom: .25rem
}
.formatted dl dd {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #5f6368;
margin-left: 1rem;
margin-bottom: .75rem
}
.formatted dl dd:last-child {
margin-bottom: 0
}
.formatted blockquote {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid #03a2cc;
background-color: #f8f9fa;
border-radius: 0 .375rem .375rem 0;
font-style: italic;
color: #5f6368
}
.formatted blockquote p {
margin-bottom: .5rem
}
.formatted blockquote p:last-child {
margin-bottom: 0
}
.formatted blockquote cite {
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
color: #9aa0a6;
font-style: normal
}
.formatted blockquote cite::before {
content: "— "
}
.formatted blockquote--large {
padding: 2rem 2.5rem;
font-size: 1.125rem
}
@media (max-width: 767px) {
.formatted blockquote--large {
padding: 1.5rem 2rem
}
}
.formatted blockquote--centered {
text-align: center;
border-left: none;
border-top: 4px solid #03a2cc;
border-radius: .375rem
}
.formatted code {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
background-color: #f1f3f4;
color: #202124;
padding: .25rem .5rem;
border-radius: .125rem;
word-break: break-word
}
.formatted pre {
background-color: #f1f3f4;
color: #202124;
padding: 1rem;
border-radius: .375rem;
overflow-x: auto;
margin-bottom: 1rem;
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
font-size: .875rem;
line-height: 1.5
}
.formatted pre code {
background: none;
padding: 0;
color: inherit;
font-size: inherit
}
.formatted pre:last-child {
margin-bottom: 0
}
.formatted table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
background-color: #fff;
border-radius: .375rem;
overflow: hidden;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}
.formatted table:last-child {
margin-bottom: 0
}
.formatted th, .formatted td {
padding: .75rem 1rem;
text-align: left;
border-bottom: 1px solid #e8eaed
}
.formatted th:last-child, .formatted td:last-child {
text-align: right
}
.formatted th {
font-size: .875rem;
font-weight: 600;
line-height: 1.5;
background-color: #f8f9fa;
color: #202124;
text-transform: uppercase;
letter-spacing: .025em
}
.formatted td {
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: #202124
}
.formatted tr {
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease
}
.formatted tr:hover {
background-color: #f8f9fa
}
.formatted tr:last-child td {
border-bottom: none
}
.formatted .table--striped tr:nth-child(even) {
background-color: #f8f9fa
}
.formatted .table--bordered th, .formatted .table--bordered td {
border: 1px solid #e8eaed
}
.formatted .table--hover tr:hover {
background-color: rgba(3, 162, 204, .05)
}
@media (max-width: 767px) {
.formatted .table--responsive {
display: block;
width: 100%;
overflow-x: auto;
white-space: nowrap
}
}
.formatted .text--muted {
color: #9aa0a6
}
.formatted .text--primary {
color: #03a2cc
}
.formatted .text--success {
color: #34a853
}
.formatted .text--warning {
color: #fbbc04
}
.formatted .text--error {
color: #ea4335
}
.formatted .text--info {
color: #4285f4
}
.formatted .text--center {
text-align: center
}
.formatted .text--left {
text-align: left
}
.formatted .text--right {
text-align: right
}
.formatted .text--justify {
text-align: justify
}
.formatted .text--uppercase {
text-transform: uppercase
}
.formatted .text--lowercase {
text-transform: lowercase
}
.formatted .text--capitalize {
text-transform: capitalize
}
.formatted .text--nowrap {
white-space: nowrap
}
.formatted .text--break {
word-break: break-word
}
.formatted .text--truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
@media (max-width: 767px) {
.formatted h1 {
font-size: 1.875rem
}
.formatted h2 {
font-size: 1.5rem
}
.formatted h3 {
font-size: 1.25rem
}
.formatted p {
font-size: .875rem
}
.formatted ul li, .formatted ol li {
font-size: .875rem
}
}
@media print {
.formatted h1, .formatted h2, .formatted h3, .formatted h4, .formatted h5, .formatted h6 {
color: #000 !important;
page-break-after: avoid
}
.formatted p {
color: #000 !important;
orphans: 3;
widows: 3
}
.formatted a {
color: #000 !important;
text-decoration: underline !important
}
.formatted a[href^=http]:after {
content: " (" attr(href) ")";
font-size: .75rem
}
.formatted blockquote {
border-left: 2px solid #000 !important;
background-color: rgba(0, 0, 0, 0) !important
}
.formatted code {
background-color: #f1f3f4 !important;
color: #000 !important
}
.formatted pre {
background-color: #f1f3f4 !important;
color: #000 !important;
border: 1px solid #dadce0 !important
}
.formatted table {
border-collapse: collapse !important;
page-break-inside: avoid
}
.formatted th, .formatted td {
border: 1px solid #000 !important;
color: #000 !important
}
}
.breadcrumbs {
background-color: #fff;
padding: 32px 0 8px 0;
padding-top: 128px
}
@media (max-width: 768px) {
.breadcrumbs {
padding: 24px 0 6px 0;
padding-top: 115px
}
}
@media (max-width: 480px) {
.breadcrumbs {
padding: 20px 0 4px 0;
padding-top: 105px
}
}
.breadcrumbs__container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 16px
}
@media (min-width: 768px) {
.breadcrumbs__container {
padding: 0 24px
}
}
@media (min-width: 1024px) {
.breadcrumbs__container {
padding: 0 32px
}
}
.breadcrumbs__container {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px
}
.breadcrumbs__container span {
display: flex;
align-items: center;
gap: 10px
}
.breadcrumbs__container a {
color: #000;
text-decoration: none;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
transition: color .3s ease
}
.breadcrumbs__container a:hover {
color: #03a2cc;
text-decoration: none
}
.breadcrumbs__container a:focus {
outline: none;
box-shadow: none
}
@media (max-width: 480px) {
.breadcrumbs__container a {
font-size: 13px
}
}
.breadcrumbs__container .breadcrumb_last {
color: #000;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400
}
@media (max-width: 480px) {
.breadcrumbs__container .breadcrumb_last {
font-size: 13px
}
}
.breadcrumbs__list {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 8px
}
.breadcrumbs__item {
display: flex;
align-items: center
}
.breadcrumbs__item:not(:last-child)::after {
content: "/";
margin-left: 8px;
color: #000;
font-size: 14px
}
.breadcrumbs__link {
color: #000;
text-decoration: none;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
transition: color .3s ease
}
.breadcrumbs__link:hover {
color: #03a2cc;
text-decoration: none
}
.breadcrumbs__link:focus {
outline: none;
box-shadow: none
}
@media (max-width: 480px) {
.breadcrumbs__link {
font-size: 13px
}
}
.breadcrumbs__current {
color: #000;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400
}
@media (max-width: 480px) {
.breadcrumbs__current {
font-size: 13px
}
}
.yoast-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0
}
.yoast-breadcrumbs a {
color: #000;
text-decoration: none;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
transition: color .3s ease
}
.yoast-breadcrumbs a:hover {
color: #03a2cc;
text-decoration: none
}
.yoast-breadcrumbs a:focus {
outline: none;
box-shadow: none
}
@media (max-width: 480px) {
.yoast-breadcrumbs a {
font-size: 13px
}
}
.yoast-breadcrumbs .breadcrumb_last {
color: #000;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400
}
@media (max-width: 480px) {
.yoast-breadcrumbs .breadcrumb_last {
font-size: 13px
}
}
.yoast-breadcrumbs .separator {
margin: 0 8px;
color: #000
}
.pagination {
display: flex;
justify-content: center;
margin-top: 48px
}
@media (max-width: 480px) {
.pagination {
margin-top: 32px
}
}
.pagination ul {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0
}
.pagination li {
display: flex
}
.pagination a, .pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
color: #000;
text-decoration: none;
background: #fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 6px;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1)
}
@media (max-width: 480px) {
.pagination a, .pagination span {
min-width: 36px;
height: 36px;
padding: 0 10px;
font-size: 13px
}
}
.pagination a:hover, .pagination span:hover {
color: #fff;
background: #03a2cc;
border-color: #03a2cc;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(3, 162, 204, .3)
}
.pagination a:focus, .pagination span:focus {
outline: none;
box-shadow: none
}
.pagination .current {
color: #fff;
background: #03a2cc;
border-color: #03a2cc;
cursor: default;
pointer-events: none
}
.pagination .dots {
border: none;
background: rgba(0, 0, 0, 0);
cursor: default;
pointer-events: none
}
.pagination .dots:hover {
transform: none;
box-shadow: none;
background: rgba(0, 0, 0, 0);
color: #000
}
.pagination .prev, .pagination .next {
font-size: 16px
}
.pagination .prev a, .pagination .next a {
font-weight: 600
}
.contact-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease
}
.contact-modal--active {
opacity: 1;
visibility: visible
}
.contact-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
cursor: pointer
}
.contact-modal__content {
position: relative;
background-color: #3a4f57;
padding: 60px;
max-width: 640px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
z-index: 10000;
transform: scale(0.9);
transition: transform .3s ease
}
@media (max-width: 768px) {
.contact-modal__content {
padding: 50px;
max-width: 600px
}
}
@media (max-width: 480px) {
.contact-modal__content {
padding: 40px 30px;
max-width: 100%;
width: 95%
}
}
.contact-modal--active .contact-modal__content {
transform: scale(1)
}
.contact-modal__close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
cursor: pointer;
color: #fff;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .3s ease, transform .3s ease;
z-index: 10001
}
.contact-modal__close:hover {
opacity: .7;
transform: rotate(90deg)
}
.contact-modal__close:focus {
outline: none;
box-shadow: none;
outline-offset: 2px
}
.contact-modal__close svg {
display: block;
width: 24px;
height: 24px
}
@media (max-width: 480px) {
.contact-modal__close svg {
width: 20px;
height: 20px
}
}
@media (max-width: 480px) {
.contact-modal__close {
top: 15px;
right: 15px
}
}
.contact-modal__title {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 36px;
font-weight: 700;
color: #fff;
text-align: center;
margin: 0 0 40px 0;
line-height: 1.2;
letter-spacing: 2px
}
@media (max-width: 768px) {
.contact-modal__title {
font-size: 32px;
margin-bottom: 35px
}
}
@media (max-width: 480px) {
.contact-modal__title {
font-size: 28px;
margin-bottom: 30px;
letter-spacing: 1px
}
}
.contact-modal__form {
display: flex;
flex-direction: column;
gap: 20px
}
@media (max-width: 480px) {
.contact-modal__form {
gap: 16px
}
}
.contact-modal__field {
width: 100%
}
.contact-modal__input, .contact-modal__textarea {
width: 100%;
background-color: rgba(0, 0, 0, 0);
border: 1px solid hsla(0, 0%, 100%, .5);
color: #fff;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
padding: 16px 20px;
transition: border-color .3s ease, box-shadow .3s ease
}
.contact-modal__input::placeholder, .contact-modal__textarea::placeholder {
color: hsla(0, 0%, 100%, .6);
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 400
}
.contact-modal__input:focus, .contact-modal__textarea:focus {
outline: none;
border-color: #fff;
box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .1)
}
@media (max-width: 480px) {
.contact-modal__input, .contact-modal__textarea {
font-size: 15px;
padding: 14px 18px
}
.contact-modal__input::placeholder, .contact-modal__textarea::placeholder {
font-size: 15px
}
}
.contact-modal__textarea {
resize: vertical;
min-height: 150px;
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
}
@media (max-width: 480px) {
.contact-modal__textarea {
min-height: 120px
}
}
.contact-modal__checkbox {
margin-top: 10px
}
@media (max-width: 480px) {
.contact-modal__checkbox {
margin-top: 5px
}
}
.contact-modal__checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer
}
@media (max-width: 480px) {
.contact-modal__checkbox-label {
gap: 10px
}
}
.contact-modal__checkbox-input {
appearance: auto;
width: 20px;
height: 20px;
min-width: 20px;
cursor: pointer;
margin-top: 2px
}
@media (max-width: 480px) {
.contact-modal__checkbox-input {
width: 18px;
height: 18px;
min-width: 18px
}
}
.contact-modal__checkbox-text {
font-family: "InstrumentSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: #fff;
line-height: 1.5
}
@media (max-width: 480px) {
.contact-modal__checkbox-text {
font-size: 13px
}
}
.contact-modal__link {
color: #fff;
text-decoration: underline;
transition: color .3s ease
}
.contact-modal__link:hover {
color: #03a2cc
}
.contact-modal__link:focus {
outline: none;
box-shadow: none;
outline-offset: 2px
}
.contact-modal__submit {
margin-top: 10px;
width: auto;
align-self: flex-start;
padding: 14px 40px
}
@media (max-width: 480px) {
.contact-modal__submit {
width: 100%;
padding: 12px 30px
}
}
body.modal-open {
overflow: hidden
}
.u-hidden {
display: none !important
}
.u-block {
display: block !important
}
.u-inline {
display: inline !important
}
.u-inline-block {
display: inline-block !important
}
.u-flex {
display: flex !important
}
.u-inline-flex {
display: inline-flex !important
}
.u-grid {
display: grid !important
}
.u-flex-row {
flex-direction: row !important
}
.u-flex-col {
flex-direction: column !important
}
.u-flex-wrap {
flex-wrap: wrap !important
}
.u-flex-nowrap {
flex-wrap: nowrap !important
}
.u-justify-start {
justify-content: flex-start !important
}
.u-justify-end {
justify-content: flex-end !important
}
.u-justify-center {
justify-content: center !important
}
.u-justify-between {
justify-content: space-between !important
}
.u-justify-around {
justify-content: space-around !important
}
.u-justify-evenly {
justify-content: space-evenly !important
}
.u-items-start {
align-items: flex-start !important
}
.u-items-end {
align-items: flex-end !important
}
.u-items-center {
align-items: center !important
}
.u-items-baseline {
align-items: baseline !important
}
.u-items-stretch {
align-items: stretch !important
}
.u-flex-1 {
flex: 1 1 0% !important
}
.u-flex-auto {
flex: 1 1 auto !important
}
.u-flex-initial {
flex: 0 1 auto !important
}
.u-flex-none {
flex: none !important
}
.u-m-0 {
margin: 0 !important
}
.u-mt-0 {
margin-top: 0 !important
}
.u-mr-0 {
margin-right: 0 !important
}
.u-mb-0 {
margin-bottom: 0 !important
}
.u-ml-0 {
margin-left: 0 !important
}
.u-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important
}
.u-my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important
}
.u-m-1 {
margin: 0.25rem !important
}
.u-mt-1 {
margin-top: 0.25rem !important
}
.u-mr-1 {
margin-right: 0.25rem !important
}
.u-mb-1 {
margin-bottom: 0.25rem !important
}
.u-ml-1 {
margin-left: 0.25rem !important
}
.u-mx-1 {
margin-left: 0.25rem !important;
margin-right: 0.25rem !important
}
.u-my-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important
}
.u-m-2 {
margin: 0.5rem !important
}
.u-mt-2 {
margin-top: 0.5rem !important
}
.u-mr-2 {
margin-right: 0.5rem !important
}
.u-mb-2 {
margin-bottom: 0.5rem !important
}
.u-ml-2 {
margin-left: 0.5rem !important
}
.u-mx-2 {
margin-left: 0.5rem !important;
margin-right: 0.5rem !important
}
.u-my-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important
}
.u-m-3 {
margin: 0.75rem !important
}
.u-mt-3 {
margin-top: 0.75rem !important
}
.u-mr-3 {
margin-right: 0.75rem !important
}
.u-mb-3 {
margin-bottom: 0.75rem !important
}
.u-ml-3 {
margin-left: 0.75rem !important
}
.u-mx-3 {
margin-left: 0.75rem !important;
margin-right: 0.75rem !important
}
.u-my-3 {
margin-top: 0.75rem !important;
margin-bottom: 0.75rem !important
}
.u-m-4 {
margin: 1rem !important
}
.u-mt-4 {
margin-top: 1rem !important
}
.u-mr-4 {
margin-right: 1rem !important
}
.u-mb-4 {
margin-bottom: 1rem !important
}
.u-ml-4 {
margin-left: 1rem !important
}
.u-mx-4 {
margin-left: 1rem !important;
margin-right: 1rem !important
}
.u-my-4 {
margin-top: 1rem !important;
margin-bottom: 1rem !important
}
.u-m-5 {
margin: 1.25rem !important
}
.u-mt-5 {
margin-top: 1.25rem !important
}
.u-mr-5 {
margin-right: 1.25rem !important
}
.u-mb-5 {
margin-bottom: 1.25rem !important
}
.u-ml-5 {
margin-left: 1.25rem !important
}
.u-mx-5 {
margin-left: 1.25rem !important;
margin-right: 1.25rem !important
}
.u-my-5 {
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important
}
.u-m-6 {
margin: 1.5rem !important
}
.u-mt-6 {
margin-top: 1.5rem !important
}
.u-mr-6 {
margin-right: 1.5rem !important
}
.u-mb-6 {
margin-bottom: 1.5rem !important
}
.u-ml-6 {
margin-left: 1.5rem !important
}
.u-mx-6 {
margin-left: 1.5rem !important;
margin-right: 1.5rem !important
}
.u-my-6 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important
}
.u-m-8 {
margin: 2rem !important
}
.u-mt-8 {
margin-top: 2rem !important
}
.u-mr-8 {
margin-right: 2rem !important
}
.u-mb-8 {
margin-bottom: 2rem !important
}
.u-ml-8 {
margin-left: 2rem !important
}
.u-mx-8 {
margin-left: 2rem !important;
margin-right: 2rem !important
}
.u-my-8 {
margin-top: 2rem !important;
margin-bottom: 2rem !important
}
.u-m-10 {
margin: 2.5rem !important
}
.u-mt-10 {
margin-top: 2.5rem !important
}
.u-mr-10 {
margin-right: 2.5rem !important
}
.u-mb-10 {
margin-bottom: 2.5rem !important
}
.u-ml-10 {
margin-left: 2.5rem !important
}
.u-mx-10 {
margin-left: 2.5rem !important;
margin-right: 2.5rem !important
}
.u-my-10 {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important
}
.u-m-12 {
margin: 3rem !important
}
.u-mt-12 {
margin-top: 3rem !important
}
.u-mr-12 {
margin-right: 3rem !important
}
.u-mb-12 {
margin-bottom: 3rem !important
}
.u-ml-12 {
margin-left: 3rem !important
}
.u-mx-12 {
margin-left: 3rem !important;
margin-right: 3rem !important
}
.u-my-12 {
margin-top: 3rem !important;
margin-bottom: 3rem !important
}
.u-m-16 {
margin: 4rem !important
}
.u-mt-16 {
margin-top: 4rem !important
}
.u-mr-16 {
margin-right: 4rem !important
}
.u-mb-16 {
margin-bottom: 4rem !important
}
.u-ml-16 {
margin-left: 4rem !important
}
.u-mx-16 {
margin-left: 4rem !important;
margin-right: 4rem !important
}
.u-my-16 {
margin-top: 4rem !important;
margin-bottom: 4rem !important
}
.u-m-20 {
margin: 5rem !important
}
.u-mt-20 {
margin-top: 5rem !important
}
.u-mr-20 {
margin-right: 5rem !important
}
.u-mb-20 {
margin-bottom: 5rem !important
}
.u-ml-20 {
margin-left: 5rem !important
}
.u-mx-20 {
margin-left: 5rem !important;
margin-right: 5rem !important
}
.u-my-20 {
margin-top: 5rem !important;
margin-bottom: 5rem !important
}
.u-m-24 {
margin: 6rem !important
}
.u-mt-24 {
margin-top: 6rem !important
}
.u-mr-24 {
margin-right: 6rem !important
}
.u-mb-24 {
margin-bottom: 6rem !important
}
.u-ml-24 {
margin-left: 6rem !important
}
.u-mx-24 {
margin-left: 6rem !important;
margin-right: 6rem !important
}
.u-my-24 {
margin-top: 6rem !important;
margin-bottom: 6rem !important
}
.u-m-32 {
margin: 8rem !important
}
.u-mt-32 {
margin-top: 8rem !important
}
.u-mr-32 {
margin-right: 8rem !important
}
.u-mb-32 {
margin-bottom: 8rem !important
}
.u-ml-32 {
margin-left: 8rem !important
}
.u-mx-32 {
margin-left: 8rem !important;
margin-right: 8rem !important
}
.u-my-32 {
margin-top: 8rem !important;
margin-bottom: 8rem !important
}
.u-p-0 {
padding: 0 !important
}
.u-pt-0 {
padding-top: 0 !important
}
.u-pr-0 {
padding-right: 0 !important
}
.u-pb-0 {
padding-bottom: 0 !important
}
.u-pl-0 {
padding-left: 0 !important
}
.u-px-0 {
padding-left: 0 !important;
padding-right: 0 !important
}
.u-py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important
}
.u-p-1 {
padding: 0.25rem !important
}
.u-pt-1 {
padding-top: 0.25rem !important
}
.u-pr-1 {
padding-right: 0.25rem !important
}
.u-pb-1 {
padding-bottom: 0.25rem !important
}
.u-pl-1 {
padding-left: 0.25rem !important
}
.u-px-1 {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important
}
.u-py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important
}
.u-p-2 {
padding: 0.5rem !important
}
.u-pt-2 {
padding-top: 0.5rem !important
}
.u-pr-2 {
padding-right: 0.5rem !important
}
.u-pb-2 {
padding-bottom: 0.5rem !important
}
.u-pl-2 {
padding-left: 0.5rem !important
}
.u-px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important
}
.u-py-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important
}
.u-p-3 {
padding: 0.75rem !important
}
.u-pt-3 {
padding-top: 0.75rem !important
}
.u-pr-3 {
padding-right: 0.75rem !important
}
.u-pb-3 {
padding-bottom: 0.75rem !important
}
.u-pl-3 {
padding-left: 0.75rem !important
}
.u-px-3 {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important
}
.u-py-3 {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important
}
.u-p-4 {
padding: 1rem !important
}
.u-pt-4 {
padding-top: 1rem !important
}
.u-pr-4 {
padding-right: 1rem !important
}
.u-pb-4 {
padding-bottom: 1rem !important
}
.u-pl-4 {
padding-left: 1rem !important
}
.u-px-4 {
padding-left: 1rem !important;
padding-right: 1rem !important
}
.u-py-4 {
padding-top: 1rem !important;
padding-bottom: 1rem !important
}
.u-p-5 {
padding: 1.25rem !important
}
.u-pt-5 {
padding-top: 1.25rem !important
}
.u-pr-5 {
padding-right: 1.25rem !important
}
.u-pb-5 {
padding-bottom: 1.25rem !important
}
.u-pl-5 {
padding-left: 1.25rem !important
}
.u-px-5 {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important
}
.u-py-5 {
padding-top: 1.25rem !important;
padding-bottom: 1.25rem !important
}
.u-p-6 {
padding: 1.5rem !important
}
.u-pt-6 {
padding-top: 1.5rem !important
}
.u-pr-6 {
padding-right: 1.5rem !important
}
.u-pb-6 {
padding-bottom: 1.5rem !important
}
.u-pl-6 {
padding-left: 1.5rem !important
}
.u-px-6 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important
}
.u-py-6 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important
}
.u-p-8 {
padding: 2rem !important
}
.u-pt-8 {
padding-top: 2rem !important
}
.u-pr-8 {
padding-right: 2rem !important
}
.u-pb-8 {
padding-bottom: 2rem !important
}
.u-pl-8 {
padding-left: 2rem !important
}
.u-px-8 {
padding-left: 2rem !important;
padding-right: 2rem !important
}
.u-py-8 {
padding-top: 2rem !important;
padding-bottom: 2rem !important
}
.u-p-10 {
padding: 2.5rem !important
}
.u-pt-10 {
padding-top: 2.5rem !important
}
.u-pr-10 {
padding-right: 2.5rem !important
}
.u-pb-10 {
padding-bottom: 2.5rem !important
}
.u-pl-10 {
padding-left: 2.5rem !important
}
.u-px-10 {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important
}
.u-py-10 {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important
}
.u-p-12 {
padding: 3rem !important
}
.u-pt-12 {
padding-top: 3rem !important
}
.u-pr-12 {
padding-right: 3rem !important
}
.u-pb-12 {
padding-bottom: 3rem !important
}
.u-pl-12 {
padding-left: 3rem !important
}
.u-px-12 {
padding-left: 3rem !important;
padding-right: 3rem !important
}
.u-py-12 {
padding-top: 3rem !important;
padding-bottom: 3rem !important
}
.u-p-16 {
padding: 4rem !important
}
.u-pt-16 {
padding-top: 4rem !important
}
.u-pr-16 {
padding-right: 4rem !important
}
.u-pb-16 {
padding-bottom: 4rem !important
}
.u-pl-16 {
padding-left: 4rem !important
}
.u-px-16 {
padding-left: 4rem !important;
padding-right: 4rem !important
}
.u-py-16 {
padding-top: 4rem !important;
padding-bottom: 4rem !important
}
.u-p-20 {
padding: 5rem !important
}
.u-pt-20 {
padding-top: 5rem !important
}
.u-pr-20 {
padding-right: 5rem !important
}
.u-pb-20 {
padding-bottom: 5rem !important
}
.u-pl-20 {
padding-left: 5rem !important
}
.u-px-20 {
padding-left: 5rem !important;
padding-right: 5rem !important
}
.u-py-20 {
padding-top: 5rem !important;
padding-bottom: 5rem !important
}
.u-p-24 {
padding: 6rem !important
}
.u-pt-24 {
padding-top: 6rem !important
}
.u-pr-24 {
padding-right: 6rem !important
}
.u-pb-24 {
padding-bottom: 6rem !important
}
.u-pl-24 {
padding-left: 6rem !important
}
.u-px-24 {
padding-left: 6rem !important;
padding-right: 6rem !important
}
.u-py-24 {
padding-top: 6rem !important;
padding-bottom: 6rem !important
}
.u-p-32 {
padding: 8rem !important
}
.u-pt-32 {
padding-top: 8rem !important
}
.u-pr-32 {
padding-right: 8rem !important
}
.u-pb-32 {
padding-bottom: 8rem !important
}
.u-pl-32 {
padding-left: 8rem !important
}
.u-px-32 {
padding-left: 8rem !important;
padding-right: 8rem !important
}
.u-py-32 {
padding-top: 8rem !important;
padding-bottom: 8rem !important
}
.u-text-xs {
font-size: .75rem !important
}
.u-text-sm {
font-size: .875rem !important
}
.u-text-base {
font-size: 1rem !important
}
.u-text-lg {
font-size: 1.125rem !important
}
.u-text-xl {
font-size: 1.25rem !important
}
.u-text-2xl {
font-size: 1.5rem !important
}
.u-text-3xl {
font-size: 1.875rem !important
}
.u-text-4xl {
font-size: 2.25rem !important
}
.u-text-5xl {
font-size: 3rem !important
}
.u-text-6xl {
font-size: 3.75rem !important
}
.u-font-light {
font-weight: 300 !important
}
.u-font-normal {
font-weight: 400 !important
}
.u-font-medium {
font-weight: 500 !important
}
.u-font-semibold {
font-weight: 600 !important
}
.u-font-bold {
font-weight: 700 !important
}
.u-font-extrabold {
font-weight: 800 !important
}
.u-text-left {
text-align: left !important
}
.u-text-center {
text-align: center !important
}
.u-text-right {
text-align: right !important
}
.u-text-justify {
text-align: justify !important
}
.u-text-primary {
color: #202124 !important
}
.u-text-secondary {
color: #5f6368 !important
}
.u-text-tertiary {
color: #9aa0a6 !important
}
.u-text-inverse {
color: #fff !important
}
.u-text-brand {
color: #03a2cc !important
}
.u-text-success {
color: #34a853 !important
}
.u-text-warning {
color: #fbbc04 !important
}
.u-text-error {
color: #ea4335 !important
}
.u-underline {
text-decoration: underline !important
}
.u-no-underline {
text-decoration: none !important
}
.u-line-through {
text-decoration: line-through !important
}
.u-uppercase {
text-transform: uppercase !important
}
.u-lowercase {
text-transform: lowercase !important
}
.u-capitalize {
text-transform: capitalize !important
}
.u-normal-case {
text-transform: none !important
}
.u-leading-tight {
line-height: 1.25 !important
}
.u-leading-snug {
line-height: 1.375 !important
}
.u-leading-normal {
line-height: 1.5 !important
}
.u-leading-relaxed {
line-height: 1.625 !important
}
.u-leading-loose {
line-height: 2 !important
}
.u-tracking-tighter {
letter-spacing: -0.05em !important
}
.u-tracking-tight {
letter-spacing: -0.025em !important
}
.u-tracking-normal {
letter-spacing: 0 !important
}
.u-tracking-wide {
letter-spacing: .025em !important
}
.u-tracking-wider {
letter-spacing: .05em !important
}
.u-tracking-widest {
letter-spacing: .1em !important
}
.u-bg-primary {
background-color: #fff !important
}
.u-bg-secondary {
background-color: #f8f9fa !important
}
.u-bg-tertiary {
background-color: #f1f3f4 !important
}
.u-bg-brand {
background-color: #03a2cc !important
}
.u-bg-success {
background-color: #34a853 !important
}
.u-bg-warning {
background-color: #fbbc04 !important
}
.u-bg-error {
background-color: #ea4335 !important
}
.u-bg-transparent {
background-color: rgba(0, 0, 0, 0) !important
}
.u-border {
border: 1px solid #dadce0 !important
}
.u-border-0 {
border: 0 !important
}
.u-border-t {
border-top: 1px solid #dadce0 !important
}
.u-border-r {
border-right: 1px solid #dadce0 !important
}
.u-border-b {
border-bottom: 1px solid #dadce0 !important
}
.u-border-l {
border-left: 1px solid #dadce0 !important
}
.u-rounded-none {
border-radius: 0 !important
}
.u-rounded-sm {
border-radius: .125rem !important
}
.u-rounded {
border-radius: .25rem !important
}
.u-rounded-md {
border-radius: .375rem !important
}
.u-rounded-lg {
border-radius: .5rem !important
}
.u-rounded-xl {
border-radius: .75rem !important
}
.u-rounded-2xl {
border-radius: 1rem !important
}
.u-rounded-3xl {
border-radius: 1.5rem !important
}
.u-rounded-full {
border-radius: 9999px !important
}
.u-shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}
.u-shadow {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
}
.u-shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
}
.u-shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}
.u-shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
}
.u-shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}
.u-shadow-inner {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06)
}
.u-shadow-none {
box-shadow: none !important
}
.u-static {
position: static !important
}
.u-relative {
position: relative !important
}
.u-absolute {
position: absolute !important
}
.u-fixed {
position: fixed !important
}
.u-sticky {
position: sticky !important
}
.u-overflow-auto {
overflow: auto !important
}
.u-overflow-hidden {
overflow: hidden !important
}
.u-overflow-visible {
overflow: visible !important
}
.u-overflow-scroll {
overflow: scroll !important
}
.u-overflow-x-auto {
overflow-x: auto !important
}
.u-overflow-x-hidden {
overflow-x: hidden !important
}
.u-overflow-y-auto {
overflow-y: auto !important
}
.u-overflow-y-hidden {
overflow-y: hidden !important
}
.u-w-auto {
width: auto !important
}
.u-w-full {
width: 100% !important
}
.u-w-screen {
width: 100vw !important
}
.u-w-min {
width: min-content !important
}
.u-w-max {
width: max-content !important
}
.u-h-auto {
height: auto !important
}
.u-h-full {
height: 100% !important
}
.u-h-screen {
height: 100vh !important
}
.u-h-min {
height: min-content !important
}
.u-h-max {
height: max-content !important
}
.u-opacity-0 {
opacity: 0 !important
}
.u-opacity-25 {
opacity: .25 !important
}
.u-opacity-50 {
opacity: .5 !important
}
.u-opacity-75 {
opacity: .75 !important
}
.u-opacity-100 {
opacity: 1 !important
}
.u-cursor-auto {
cursor: auto !important
}
.u-cursor-default {
cursor: default !important
}
.u-cursor-pointer {
cursor: pointer !important
}
.u-cursor-wait {
cursor: wait !important
}
.u-cursor-text {
cursor: text !important
}
.u-cursor-move {
cursor: move !important
}
.u-cursor-help {
cursor: help !important
}
.u-cursor-not-allowed {
cursor: not-allowed !important
}
.u-select-none {
user-select: none !important
}
.u-select-text {
user-select: text !important
}
.u-select-all {
user-select: all !important
}
.u-select-auto {
user-select: auto !important
}
@media (min-width: 480px) {
.u-sm\:hidden {
display: none !important
}
.u-sm\:block {
display: block !important
}
.u-sm\:flex {
display: flex !important
}
.u-sm\:grid {
display: grid !important
}
.u-sm\:text-left {
text-align: left !important
}
.u-sm\:text-center {
text-align: center !important
}
.u-sm\:text-right {
text-align: right !important
}
.u-sm\:justify-start {
justify-content: flex-start !important
}
.u-sm\:justify-center {
justify-content: center !important
}
.u-sm\:justify-end {
justify-content: flex-end !important
}
.u-sm\:justify-between {
justify-content: space-between !important
}
.u-sm\:items-start {
align-items: flex-start !important
}
.u-sm\:items-center {
align-items: center !important
}
.u-sm\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 768px) {
.u-md\:hidden {
display: none !important
}
.u-md\:block {
display: block !important
}
.u-md\:flex {
display: flex !important
}
.u-md\:grid {
display: grid !important
}
.u-md\:text-left {
text-align: left !important
}
.u-md\:text-center {
text-align: center !important
}
.u-md\:text-right {
text-align: right !important
}
.u-md\:justify-start {
justify-content: flex-start !important
}
.u-md\:justify-center {
justify-content: center !important
}
.u-md\:justify-end {
justify-content: flex-end !important
}
.u-md\:justify-between {
justify-content: space-between !important
}
.u-md\:items-start {
align-items: flex-start !important
}
.u-md\:items-center {
align-items: center !important
}
.u-md\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 1024px) {
.u-lg\:hidden {
display: none !important
}
.u-lg\:block {
display: block !important
}
.u-lg\:flex {
display: flex !important
}
.u-lg\:grid {
display: grid !important
}
.u-lg\:text-left {
text-align: left !important
}
.u-lg\:text-center {
text-align: center !important
}
.u-lg\:text-right {
text-align: right !important
}
.u-lg\:justify-start {
justify-content: flex-start !important
}
.u-lg\:justify-center {
justify-content: center !important
}
.u-lg\:justify-end {
justify-content: flex-end !important
}
.u-lg\:justify-between {
justify-content: space-between !important
}
.u-lg\:items-start {
align-items: flex-start !important
}
.u-lg\:items-center {
align-items: center !important
}
.u-lg\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 1280px) {
.u-xl\:hidden {
display: none !important
}
.u-xl\:block {
display: block !important
}
.u-xl\:flex {
display: flex !important
}
.u-xl\:grid {
display: grid !important
}
.u-xl\:text-left {
text-align: left !important
}
.u-xl\:text-center {
text-align: center !important
}
.u-xl\:text-right {
text-align: right !important
}
.u-xl\:justify-start {
justify-content: flex-start !important
}
.u-xl\:justify-center {
justify-content: center !important
}
.u-xl\:justify-end {
justify-content: flex-end !important
}
.u-xl\:justify-between {
justify-content: space-between !important
}
.u-xl\:items-start {
align-items: flex-start !important
}
.u-xl\:items-center {
align-items: center !important
}
.u-xl\:items-end {
align-items: flex-end !important
}
}
@media (min-width: 1536px) {
.u-2xl\:hidden {
display: none !important
}
.u-2xl\:block {
display: block !important
}
.u-2xl\:flex {
display: flex !important
}
.u-2xl\:grid {
display: grid !important
}
.u-2xl\:text-left {
text-align: left !important
}
.u-2xl\:text-center {
text-align: center !important
}
.u-2xl\:text-right {
text-align: right !important
}
.u-2xl\:justify-start {
justify-content: flex-start !important
}
.u-2xl\:justify-center {
justify-content: center !important
}
.u-2xl\:justify-end {
justify-content: flex-end !important
}
.u-2xl\:justify-between {
justify-content: space-between !important
}
.u-2xl\:items-start {
align-items: flex-start !important
}
.u-2xl\:items-center {
align-items: center !important
}
.u-2xl\:items-end {
align-items: flex-end !important
}
}