/* Core styles */
html,
body {
width: 100%;
/* prevent font scaling in mobile landsdcape mode */
-webkit-text-size-adjust: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* push footer to bottom */
display: flex;
flex-direction: column;
min-height: 100%;
}
footer{
/* push footer to bottom */
margin-top: auto;
}
body.filter-open,
body.body-no-scroll{
-webkit-overflow-scrolling: hidden;
overflow: hidden;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
font-weight: 700;
font-family: Avenir, Helvetica, Arial, sans-serif;
}
/*
** FONT DECLARATIONS
**/
.boxed-layout {
margin-left: 0.75rem;
margin-right: 0.75rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
.boxed-layout {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
}
@media (min-width: 768px) {
.boxed-layout {
margin-left: 2.25rem;
margin-right: 2.25rem;
}
.boxed-layout {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
@media (min-width: 1024px) {
.boxed-layout {
margin-left: 3rem;
margin-right: 3rem;
}
.boxed-layout {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
@media (min-width: 1280px) {
.boxed-layout {
margin-left: auto;
margin-right: auto;
}
.boxed-layout {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1536px) {
.boxed-layout {
margin-left: auto;
margin-right: auto;
}
.boxed-layout {
padding-left: 0px;
padding-right: 0px;
}
}
@media (min-width: 1280px) {
.page-max-width,
.boxed-layout{
max-width: 1120px;
}
}
@media (min-width: 1536px) {
.page-max-width,
.boxed-layout{
max-width: 1240px;
}
}
.section-padding-y {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
@media (min-width: 1280px) {
.page-max-width {
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1536px) {
.page-max-width {
margin-left: auto;
margin-right: auto;
}
}
/*
** Tailwind currently has the following properties
** gap-2 gap-y-2 gap-x-2
** These properties will translate to {gap: 2} or {gap-row: 2}
** The {gap} property has very low browser support. Safari for instance does not accept it.
** Using the {grid-gap} property however has better browser support
** AND works in combination with Flexbox.
**/
/*
** Main buttons
**/
.btn {
position: relative;
display: flex;
cursor: pointer;
justify-content: center;
overflow: hidden;
border-radius: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 800;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
z-index: 1;
}
.btn:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
transition: all 0.3s;
border-radius: 10rem;
z-index: -1;
}
.btn.yellow {
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
}
.btn.yellow:before {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
}
@media (hover: hover) and (pointer: fine) {
.btn:hover:before {
width: 100%;
}
}
/*
** Text links
**/
.btn-link {
display: inline-flex;
font-weight: 700;
}
.btn-link svg {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.btn-link:hover svg {
transform: translateX(6px);
}
/*
** Icons
**/
.icon {
display: flex;
height: 1.5rem;
width: 1.5rem;
align-self: center;
fill: currentColor;
}
/*
** Style text that does not have a class.
** This is needed for dynamically loaded content (via WYSIWYG editor)
** All other HTML elements will be added manually and can have classes assigned that take care of margin/padding
**/
/*
** Fix the layout shift before Slick Init
**/
@media (max-width: 767px) {
.slick-init:not(.slick-initialized)
{
display: flex;
overflow: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
/* or */
backface-visibility: hidden;
}
}
/*
** Enable a mobile swiper for Slick
**/
@media (max-width: 767px) {
.slick-swiper-mobile .slick-list {
overflow-x: scroll;
-webkit-transform: translate3d(0, 0, 0);
}
}
@media (max-width: 1023px) {
.slick-swiper-tablet .slick-list {
overflow-x: scroll;
-webkit-transform: translate3d(0, 0, 0);
}
}
/* .slick-slider .slick-track, .slick-slider .slick-list { transform: none; } */
.slick-slider .slick-track, .slick-slider .slick-list { transform: none; z-index: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/*
** Fix whitespace underneath Track
**/
.slick-track {
line-height: 0;
transform-style: preserve-3d;
}
.slick-track > .slick-slide {
line-height: 1rem;
transform: translate3d(0, 0, 0);
}
/*
** Disable UL styles for when a Slick slider is in a list
**/
.slick-init {
display: block;
}
.slick-left .slick-track {
margin-left: 0;
}
.slick-left .slick-list {
padding: 0 10% 0 0 !important;
}
.slick-left .slick-slide {
margin: 10px;
}
/*
** Slick spacing between slides
** These are premade classes, based on Tailwind utilities
** Required since Slick still has not fixed this since 2014 :-)
**/
.slick-space-0 .slick-slide {
margin: 0;
}
.slick-space-0 .slick-list {
margin: 0 -8px;
}
.slick-space-2 .slick-slide {
margin: 0 8px;
}
.slick-space-2 .slick-list {
margin: 0 -8px;
}
.slick-space-4 .slick-slide {
margin: 0 16px;
}
.slick-space-4 .slick-list {
margin: 0 -16px;
}
.slick-space-6 .slick-slide {
margin: 0 24px;
}
.slick-space-6 .slick-list {
margin: 0 -24px;
}
.slick-space-8 .slick-slide {
margin: 0 32px;
}
.slick-space-8 .slick-list {
margin: 0 -32px;
}
/*
** Slick dots
**/
.slick-dots {
margin-top: 16px;
display: flex;
justify-content: center;
width: 100%;
bottom: 25px;
}
.slick-dots li {
display: inline-flex;
}
.slick-dots li.slick-active button:before {
color: white !important;
}
.slick-dots button {
color: transparent;
width: 8px;
height: 8px;
border-radius: 100%;
}
.slick-dots button:before {
color: rgba(255, 255, 255, 0.5) !important;
font-size: 10px !important;
opacity: 1 !important;
}
/*
** Slick buttons
**/
.slick-prev,
.slick-next {
position: absolute;
z-index: 100;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
box-sizing: content-box;
border-radius: 100%;
font-size: 0;
background-color: rgba(72, 72, 72, 0.5) !important;
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.slick-prev:hover,
.slick-next:hover {
background-color: rgba(72, 72, 72, 0.8) !important;
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.slick-prev:before,
.slick-next:before {
content: '';
display: none;
}
.slick-prev:after,
.slick-next:after {
content: '';
display: block;
color: white;
padding: 8px;
width: 40px;
height: 40px;
}
.slick-disabled {
opacity: 0;
pointer-events: none !important;
}
.slick-prev {
left: 16px;
}
.slick-prev:after {
content: '<';
position: relative;
left: 50%;
transform: translateX(-50%);
}
.slick-next {
right: 16px;
}
.slick-next:after {
content: '>';
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
content: '';
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* the slides */
.slick-slide {
margin: 0 10px;
}
/* the parent */
.slick-list {
margin: 0 0;
}
/* the parent */
.slick-track {
margin: 0 16px;
}
/* Theme styles */
@media screen and (max-width: 767px) {
section.cta .double_visual {
height: 75vw;
}
section.cta .img_container {
position: absolute;
top: 0;
width: 100%;
min-width: 105vw;
}
section.cta[data-layout="visual_left"] .double_visual {
margin-left: -16px;
}
section.cta[data-layout="visual_right"] .double_visual {
margin-right: -16px;
}
section.cta[data-layout="visual_left"] .img_container {
left: 0;
}
section.cta[data-layout="visual_right"] .img_container {
left: 0;
}
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
section.cta .double_visual {
height: 500px;
}
section.cta .img_container {
position: absolute;
top: 0;
width: 100%;
min-width: 105vw;
}
section.cta img {
width: 85%;
}
}
/* Start */
section.content h3 {
margin-block: 0em;
font-weight: 900;
}
section.content .regular-text ul {
padding-left: 20px;
padding-left: 0;
}
section.content .regular-text li {
padding-left: 28px;
padding-bottom: 4px;
list-style-type: none;
}
section.content .regular-text li::before {
content: url(/wp-content/themes/vecos/dist/img/check-bullet.svg);
position: absolute;
transform: translateX(-28px);
}
section.content h3 {
margin-block: 0em;
font-weight: 900;
}
.disabled-checkbox{
cursor: not-allowed;
opacity: 0.5;
}
.disabled-checkbox:hover{
cursor: not-allowed;
/* opacity: 0.5; */
}
.disabled-checkbox:hover label{
color:#000;
/* opacity: 0.5; */
}
.disabled-checkbox label{
cursor: not-allowed;
opacity: 0.5;
/* opacity: 0.5; */
}
.disabled-checkbox input{
cursor: not-allowed;
opacity: 0.5;
/* opacity: 0.5; */
}
/* .btn.yellow {
@apply bg-green-500;
}
.btn.yellow:before {
@apply bg-yellow-500;
} */
section.content[data-theme="bg-white"] .btn.yellow {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
}
section.content[data-theme="bg-white"] .btn.yellow:before {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
}
section.content[data-theme="bg-grey-500"] .btn.yellow {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
section.content[data-theme="bg-grey-500"] .btn.yellow:before {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
section.content[data-theme="bg-yellow-500"] .btn.yellow {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
}
section.content[data-theme="bg-yellow-500"] .btn.yellow:before {
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
}
section.content[data-theme="bg-blue-500"] .btn.yellow {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
}
section.content[data-theme="bg-blue-500"] .btn.yellow:before {
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
}
section.content[data-theme="bg-white"] h3 {
color: #17bb7e;
}
section.content .regular-text h3 {
font-size: 28px;
line-height: 1;
margin-block: 0em;
}
section.content .regular-text p:not(:last-of-type) {
margin-block: 0.5em;
margin-bottom: 1em;
}
section.content .regular-text p {
margin-block: 0.5em;
}
section.content[data-theme="bg-grey-500"] h3 {
color: #17bb7e;
}
@media screen and (min-width: 768px) {
section.content[data-layout="visual_left"] .visual_inner {
margin-right: auto;
}
section.content[data-layout="visual_right"] .visual_inner {
margin-left: auto;
}
}
/* End of aylin (Reference project) */
section.content .double {
position: absolute;
top: 0;
width: 100%;
min-width: 105vw;
}
section.content .double_visual {
height: 75vw;
}
section.content[data-layout="visual_left"] .double_visual {
margin-left: -16px;
}
section.content[data-layout="visual_right"] .double_visual {
margin-right: -16px;
}
section.content[data-layout="visual_left"] .double {
right: 0;
}
section.content[data-layout="visual_right"] .double {
left: 0;
}
@media (min-width: 768px) {
section.cta[data-layout="visual_left"] .visual {
order: initial;
}
section.content .double_visual {
height: initial;
}
section.content .double {
min-width: 552px;
}
section.content[data-layout="visual_left"] .double_visual {
margin-left: 0;
}
section.content[data-layout="visual_right"] .double_visual {
margin-right: 0;
}
}
@media (min-width: 1024px) {
section.cta[data-layout="visual_left"] .visual {
order: -9999;
}
section.cta .img_container {
margin-top: -30px;
height: 100%;
position: absolute;
overflow: hidden;
padding-bottom: 30px;
box-sizing: content-box;
}
}
@media (min-width: 1536px) {
section.content .double_visual {
min-height: 320px;
}
}
/*
** Custom section IDs
**/
section#feel_at_home img {
position: relative;
}
@media (min-width: 768px) {
section#feel_at_home .boxed-layout {
height: 500px;
}
section#in_viewport .boxed-layout {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
/*
** Logo reel wrapper
**/
@media (min-width: 1024px) {
.logo-reel .wrap {
display: grid;
grid-template-columns: repeat(7, -webkit-max-content);
grid-template-columns: repeat(7, max-content);
width: 100%;
justify-content: space-between;
}
}
/*
**
** References masonry grid
**/
@media (min-width: 1024px) {
.references article.reference {
grid-column: span 1 / span 1;
}
.references article.reference:nth-of-type(10n+2) {
grid-column: span 2 / span 2;
}
.references article.reference:nth-of-type(10n+6) {
grid-column: span 2 / span 2;
}
}
/*
** References navigation Bold on click
**/
.ajax_trigger {
display: inline-flex;
flex-direction: column;
align-items: center;
}
.ajax_trigger::after {
content: attr(data-text);
content: attr(data-text) / "";
height: 0;
visibility: hidden;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
font-weight: bold;
}
@media speech {
.ajax_trigger::after {
display: none;
}
}
/*
** iFrame styling for hero elements
** max-height = (full viewport - header - first headline)
**/
.vimeo-wrapper.stretch {
position: relative;
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
overflow: hidden;
}
.vimeo-wrapper.stretch iframe {
width: 100vw;
min-width: 500vw;
height: 56.5vw;
/*min-height: calc(100vh - 72px - 160px);*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
.vimeo-wrapper.contain iframe {
height: 43.5vw;
}
}
@media (min-width: 768px) {
.vimeo-wrapper.stretch {
padding-bottom: calc(
100vh - 72px - 160px
); /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
}
.vimeo-wrapper.stretch iframe {
min-height: calc(100vh - 72px - 160px);
}
.vimeo-wrapper.contain iframe {
height: calc(100vh - 72px - 160px);
}
.image-wrapper {
padding-bottom: calc(
100vh - 72px - 160px
); /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
position: relative;
}
.image-wrapper .placeholder {
height: calc(100vh - 72px - 160px);
min-width: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
/* OLD FIX, MAY NEED TO BE USED AGAIN LATER */
/*
** Accordion styling
**/
.faq.active .icon {
transform: rotate(45deg);
}
/*
** Add custom font size to the first section on the Home Page
**/
.home .hero + .full-width .regular-text {
font-size: 1.25rem;
line-height: 1.75rem;
}
/*
** Add custom font size to the first section on the Home Page
**/
@media (min-width: 768px) {
.hero .page-max-width::before {
content: "";
display: block;
height: 100%;
width: 1000px;
background-color: white;
position: absolute;
right: 100%;
top: 0;
}
}
.leadinModal img {
opacity: 1 !important;
}
.no-hero-gradiant::before {
background-color: transparent !important;
}
/* Base themes */
[data-theme="bg-black-900"] {
--tw-bg-opacity: 1;
background-color: rgba(11, 8, 63, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
[data-theme="bg-grey-500"] {
--tw-bg-opacity: 1;
background-color: rgba(233, 233, 233, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
/*[data-theme="bg-grey-500"] h2,*/
[data-theme="bg-grey-500"] a {
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
}
[data-theme="bg-white"] {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
/* Coloured themes */
[data-theme="bg-blue-500"] {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
[data-theme="bg-red-500"] {
--tw-bg-opacity: 1;
background-color: rgba(253, 79, 87, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
[data-theme="bg-green-500"] {
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
[data-theme="bg-yellow-500"] {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
/* Active top-level menu item */
.menu-a{
position: relative;
}
.menu-a::before{
content: '';
display: block;
position: absolute;
background-color: transparent;
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.current-menu-parent .menu-a::before, .current-menu-item .menu-a::before, .menu-a:hover::before {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
bottom: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Active sub-menu item */
.sub-menu-a{
position: relative;
width: 100%;
}
.sub-menu-a::before{
content: '';
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
bottom: initial;
left: 0;
width: 3px;
height: 36px;
background-color: transparent;
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.sub-menu-li:hover .sub-menu-a {
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
}
.current-menu-item > .sub-menu-a::before, .sub-menu-li:hover .sub-menu-a::before {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
}
.current-menu-item > .sub-menu-a::before {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
}
.menu-item:hover > .sub-menu-a::before {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
}
/*
** Main navigation - Submenu
**/
#mobile_menu{
position: absolute;
-webkit-overflow-scrolling: scroll;
overflow: scroll;
height: 100vh;
}
@media (min-width: 1024px) {
#mobile_menu{
position: relative;
height: auto;
-webkit-overflow-scrolling: visible;
overflow: visible;
}
}
.menu-item-has-children > a {
display: flex;
align-items: center;
}
.menu-item-has-children > a::after{
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url('../img/down.svg');
}
.menu-item-has-children.active > a::after{
transform: rotateX(180deg);
}
.sub-menu {
display: none;
}
.sub-menu > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.sub-menu {
padding-left: 1rem;
padding-top: 0.75rem;
}
@media (min-width: 1024px) {
.sub-menu {
position: absolute;
}
.sub-menu > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.sub-menu {
border-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
.sub-menu {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.sub-menu {
padding: 0px;
}
.sub-menu {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.sub-menu{ top: 100%; }
.sub-menu{
transform: translateX(-20px);
}
.sub-menu-li {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.sub-menu-a {
display: block;
}
.sub-menu-a {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.sub-menu-a {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/*
** Main navigation - Search form
**/
@media (min-width: 1024px) {
#main_menu .searchform{
/*display: none;*/
position: absolute;
right: 0;
width: 600px;
transform: scaleX(0) translateX(0);
transform-origin: right;
opacity: 0;
transition: all .3s;
}
#main_menu .search_container .trigger-close{
display: none;
}
#main_menu .search_container.active .trigger-close{
display: block;
}
#main_menu .search_container.active .trigger-search{
display: none;
}
#main_menu .search_container.active .searchform{
display: block;
transform: scaleX(1) translateX(-40px);
opacity: 1;
}
}
/*
** Footer
**/
#footer .menu-item:first-of-type{
font-weight: 700;
}
@media (min-width: 768px) {
[data-layout="visual_left"] .visual {
order: -9999;
}
}
img, .animate-fade-in {
opacity: 0;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 500ms;
}
@media (max-width: 767px) {
.height_transition {
height: 144px;
max-height: 2000px;
transition: height 0.3s ease;
}
.height_transition.closed {
transition: height 0.3s ease;
height: 1px;
}
}
.animate-fade {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 500ms;
}
/* Popup Modal Styles */
.popup-video {
will-change: transform, opacity;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent background */
z-index: 999; /* Ensure it sits above other content */
visibility: hidden; /* Hide by default */
opacity: 0;
transition: visibility 0s, opacity 0.5s ease; /* Smooth transition for showing/hiding */
}
.popup-video.visible {
visibility: visible;
opacity: 1;
}
.popup-video__content {
background: #fff;
padding: 30px;
border-radius: 8px;
max-width: 70vw;
width: 90%; /* Responsive width */
position: relative;
}
.popup-video__close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
cursor: pointer;
color: #333; /* Close button color */
}
.popup-video__close .icon-close {
width: 24px;
height: 24px;
}
.popup-video__content .vimeo-wrapper-popup {
position: relative;
padding-bottom: 70.25%; /* 1:1 Aspect Ratio */
height: 0;
}
.vimeo-wrapper-popup iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width: 1550px) {
.popup-video__content {
padding: 30px;
max-width: 80vw;
}
.popup-video__content .vimeo-wrapper-popup {
position: relative;
padding-bottom: 70.25%; /* 1:1 Aspect Ratio */
height: 0;
}
}
@media (max-width: 1500px) {
.popup-video__content {
padding: 30px;
max-width: 66vw;
}
.popup-video__content .vimeo-wrapper-popup {
position: relative;
padding-bottom: 70.25%; /* 1:1 Aspect Ratio */
height: 0;
}
}
@media (max-width: 1280px) {
.popup-video__content {
padding: 30px;
max-width: 50vw;
}
.popup-video__content .vimeo-wrapper-popup {
position: relative;
padding-bottom: 70.25%; /* 1:1 Aspect Ratio */
height: 0;
}
}
@media (max-width: 1024px) {
.popup-video__content {
padding: 20px;
max-width: 350px;
}
.popup-video__content .vimeo-wrapper-popup {
position: relative;
padding-bottom: 70.25%; /* 1:1 Aspect Ratio */
height: 0;
}
}
@media (max-width: 768px) {
.popup-video__content {
padding: 20px;
}
.popup-video__content .vimeo-wrapper-popup {
position: relative;
padding-bottom: 86.25%; /* 1:1 Aspect Ratio */
height: 0;
}
#banner-close{
position: absolute;
top: 1px;
right: 10px;
}
}
.vimeo-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
:root {
--colors: #0533FF, #FD4F57, #17BB7E, #FFC32E;
}
.confetti {
z-index: 99999999;
will-change: transform, opacity;
position: absolute;
font-family: "delio";
font-size: 40px;
display: flex;
top: -100px;
width: 80vw; /* Hier stel je de breedte in op 100% van de viewport breedte */
height: 30px;
color: transparent;
}
.confetti:nth-of-type(1) {
color: #FD4F57 !important;
left: 97.9954984044%;
-webkit-animation: fall2 1.2732907734s ease-out 1 0.4838847987s;
animation: fall2 1.2732907734s ease-out 1 0.4838847987s;
}
.confetti:nth-of-type(2) {
color: #17BB7E !important;
left: 46.4669356289%;
-webkit-animation: fall2 1.5338867529s ease-out 1 0.9847577338s;
animation: fall2 1.5338867529s ease-out 1 0.9847577338s;
}
.confetti:nth-of-type(3) {
color: #FD4F57 !important;
left: 70.6233615363%;
-webkit-animation: fall2 1.6234339644s ease-out 1 1.482332493s;
animation: fall2 1.6234339644s ease-out 1 1.482332493s;
}
.confetti:nth-of-type(4) {
color: #17BB7E !important;
left: 83.806640391%;
-webkit-animation: fall 1.1241272205s ease-out 1 0.8131109115s;
animation: fall 1.1241272205s ease-out 1 0.8131109115s;
}
.confetti:nth-of-type(5) {
color: #FD4F57 !important;
left: 96.8904746698%;
-webkit-animation: fall 1.4961653248s ease-out 1 0.5045594434s;
animation: fall 1.4961653248s ease-out 1 0.5045594434s;
}
.confetti:nth-of-type(6) {
color: #17BB7E !important;
left: 5.5598529497%;
-webkit-animation: fall2 1.5745461351s ease-out 1 1.0803943407s;
animation: fall2 1.5745461351s ease-out 1 1.0803943407s;
}
.confetti:nth-of-type(7) {
color: #FD4F57 !important;
left: 15.4256930923%;
-webkit-animation: fall 1.0411927839s ease-out 1 1.370777137s;
animation: fall 1.0411927839s ease-out 1 1.370777137s;
}
.confetti:nth-of-type(8) {
color: #FD4F57 !important;
left: 11.4927073339%;
-webkit-animation: fall 1.8945892251s ease-out 1 1.1406286259s;
animation: fall 1.8945892251s ease-out 1 1.1406286259s;
}
.confetti:nth-of-type(9) {
color: #FFC32E !important;
left: 66.5029533075%;
-webkit-animation: fall2 1.7620459316s ease-out 1 0.1139004479s;
animation: fall2 1.7620459316s ease-out 1 0.1139004479s;
}
.confetti:nth-of-type(10) {
color: #FFC32E !important;
left: 67.6929576044%;
-webkit-animation: fall2 1.0227589366s ease-out 1 0.2528390223s;
animation: fall2 1.0227589366s ease-out 1 0.2528390223s;
}
.confetti:nth-of-type(11) {
color: #FD4F57 !important;
left: 6.0002116975%;
-webkit-animation: fall2 1.8446228921s ease-out 1 1.2701063811s;
animation: fall2 1.8446228921s ease-out 1 1.2701063811s;
}
.confetti:nth-of-type(12) {
color: #17BB7E !important;
left: 55.5815820699%;
-webkit-animation: fall 1.2754713503s ease-out 1 0.1374725312s;
animation: fall 1.2754713503s ease-out 1 0.1374725312s;
}
.confetti:nth-of-type(13) {
color: #17BB7E !important;
left: 89.8563603386%;
-webkit-animation: fall 1.0963208084s ease-out 1 0.8999547897s;
animation: fall 1.0963208084s ease-out 1 0.8999547897s;
}
.confetti:nth-of-type(14) {
color: #0533FF !important;
left: 38.7324778284%;
-webkit-animation: fall2 1.4731599614s ease-out 1 1.2026729305s;
animation: fall2 1.4731599614s ease-out 1 1.2026729305s;
}
.confetti:nth-of-type(15) {
color: #17BB7E !important;
left: 14.3078506698%;
-webkit-animation: fall2 1.8943299222s ease-out 1 0.2491145783s;
animation: fall2 1.8943299222s ease-out 1 0.2491145783s;
}
.confetti:nth-of-type(16) {
color: #0533FF !important;
left: 17.1006413041%;
-webkit-animation: fall2 1.2006981269s ease-out 1 1.2097926423s;
animation: fall2 1.2006981269s ease-out 1 1.2097926423s;
}
.confetti:nth-of-type(17) {
color: #FFC32E !important;
left: 9.2180742566%;
-webkit-animation: fall2 1.8194204795s ease-out 1 0.0099456124s;
animation: fall2 1.8194204795s ease-out 1 0.0099456124s;
}
.confetti:nth-of-type(18) {
color: #0533FF !important;
left: 59.5663215595%;
-webkit-animation: fall2 1.2662236732s ease-out 1 0.0941415253s;
animation: fall2 1.2662236732s ease-out 1 0.0941415253s;
}
.confetti:nth-of-type(19) {
color: #0533FF !important;
left: 64.2642309197%;
-webkit-animation: fall2 1.3522135074s ease-out 1 0.0927798571s;
animation: fall2 1.3522135074s ease-out 1 0.0927798571s;
}
.confetti:nth-of-type(20) {
color: #FD4F57 !important;
left: 7.786109174%;
-webkit-animation: fall 1.5948141882s ease-out 1 0.7132596417s;
animation: fall 1.5948141882s ease-out 1 0.7132596417s;
}
.confetti:nth-of-type(21) {
color: #FFC32E !important;
left: 98.16669929%;
-webkit-animation: fall2 1.5782716312s ease-out 1 0.7619391499s;
animation: fall2 1.5782716312s ease-out 1 0.7619391499s;
}
.confetti:nth-of-type(22) {
color: #17BB7E !important;
left: 31.5804544332%;
-webkit-animation: fall2 1.2993715327s ease-out 1 0.0775649828s;
animation: fall2 1.2993715327s ease-out 1 0.0775649828s;
}
.confetti:nth-of-type(23) {
color: #FFC32E !important;
left: 48.5455749973%;
-webkit-animation: fall2 0.9067472383s ease-out 1 0.8556429228s;
animation: fall2 0.9067472383s ease-out 1 0.8556429228s;
}
.confetti:nth-of-type(24) {
color: #FFC32E !important;
left: 12.7203299501%;
-webkit-animation: fall 1.8612062166s ease-out 1 1.4888583156s;
animation: fall 1.8612062166s ease-out 1 1.4888583156s;
}
.confetti:nth-of-type(25) {
color: #17BB7E !important;
left: 35.288323246%;
-webkit-animation: fall 1.7060266593s ease-out 1 0.852997627s;
animation: fall 1.7060266593s ease-out 1 0.852997627s;
}
.confetti:nth-of-type(26) {
color: #FD4F57 !important;
left: 45.8889080817%;
-webkit-animation: fall2 1.5111172749s ease-out 1 1.0068717015s;
animation: fall2 1.5111172749s ease-out 1 1.0068717015s;
}
.confetti:nth-of-type(27) {
color: #17BB7E !important;
left: 34.0632374035%;
-webkit-animation: fall2 1.447553819s ease-out 1 0.7705917211s;
animation: fall2 1.447553819s ease-out 1 0.7705917211s;
}
.confetti:nth-of-type(28) {
color: #FD4F57 !important;
left: 10.6102224682%;
-webkit-animation: fall 1.5647411804s ease-out 1 0.9373478213s;
animation: fall 1.5647411804s ease-out 1 0.9373478213s;
}
.confetti:nth-of-type(29) {
color: #17BB7E !important;
left: 81.8516240674%;
-webkit-animation: fall 1.55440112s ease-out 1 0.0848637261s;
animation: fall 1.55440112s ease-out 1 0.0848637261s;
}
.confetti:nth-of-type(30) {
color: #FD4F57 !important;
left: 62.9113464752%;
-webkit-animation: fall2 0.9357297235s ease-out 1 0.0770060403s;
animation: fall2 0.9357297235s ease-out 1 0.0770060403s;
}
.confetti:nth-of-type(31) {
color: #0533FF !important;
left: 74.5143408963%;
-webkit-animation: fall2 1.777918759s ease-out 1 0.0776763612s;
animation: fall2 1.777918759s ease-out 1 0.0776763612s;
}
.confetti:nth-of-type(32) {
color: #FFC32E !important;
left: 3.1866915435%;
-webkit-animation: fall2 1.4665846345s ease-out 1 1.4810421644s;
animation: fall2 1.4665846345s ease-out 1 1.4810421644s;
}
.confetti:nth-of-type(33) {
color: #FD4F57 !important;
left: 30.3780017528%;
-webkit-animation: fall 1.6142110962s ease-out 1 0.102443608s;
animation: fall 1.6142110962s ease-out 1 0.102443608s;
}
.confetti:nth-of-type(34) {
color: #17BB7E !important;
left: 45.689518784%;
-webkit-animation: fall2 1.1067271963s ease-out 1 0.2443399132s;
animation: fall2 1.1067271963s ease-out 1 0.2443399132s;
}
.confetti:nth-of-type(35) {
color: #FD4F57 !important;
left: 95.380973606%;
-webkit-animation: fall2 1.7657855317s ease-out 1 0.4130723365s;
animation: fall2 1.7657855317s ease-out 1 0.4130723365s;
}
.confetti:nth-of-type(36) {
color: #17BB7E !important;
left: 56.757400986%;
-webkit-animation: fall 1.3958193082s ease-out 1 0.3717702817s;
animation: fall 1.3958193082s ease-out 1 0.3717702817s;
}
.confetti:nth-of-type(37) {
color: #0533FF !important;
left: 92.1290238991%;
-webkit-animation: fall2 1.60049222s ease-out 1 1.4795871414s;
animation: fall2 1.60049222s ease-out 1 1.4795871414s;
}
.confetti:nth-of-type(38) {
color: #17BB7E !important;
left: 90.6813619764%;
-webkit-animation: fall 1.8065021321s ease-out 1 0.0566572733s;
animation: fall 1.8065021321s ease-out 1 0.0566572733s;
}
.confetti:nth-of-type(39) {
color: #FD4F57 !important;
left: 87.1573234054%;
-webkit-animation: fall 1.1446325935s ease-out 1 0.0908815744s;
animation: fall 1.1446325935s ease-out 1 0.0908815744s;
}
.confetti:nth-of-type(40) {
color: #0533FF !important;
left: 55.9743757396%;
-webkit-animation: fall2 1.0656702138s ease-out 1 1.301915526s;
animation: fall2 1.0656702138s ease-out 1 1.301915526s;
}
.confetti:nth-of-type(41) {
color: #0533FF !important;
left: 29.3350278049%;
-webkit-animation: fall 1.0686782245s ease-out 1 1.3183086984s;
animation: fall 1.0686782245s ease-out 1 1.3183086984s;
}
.confetti:nth-of-type(42) {
color: #FFC32E !important;
left: 84.4309292447%;
-webkit-animation: fall2 1.4097111802s ease-out 1 0.1090531175s;
animation: fall2 1.4097111802s ease-out 1 0.1090531175s;
}
.confetti:nth-of-type(43) {
color: #FD4F57 !important;
left: 36.1731967315%;
-webkit-animation: fall2 1.3746838661s ease-out 1 1.1567903941s;
animation: fall2 1.3746838661s ease-out 1 1.1567903941s;
}
.confetti:nth-of-type(44) {
color: #0533FF !important;
left: 84.8048466106%;
-webkit-animation: fall2 1.0940249116s ease-out 1 0.0250212315s;
animation: fall2 1.0940249116s ease-out 1 0.0250212315s;
}
.confetti:nth-of-type(45) {
color: #FD4F57 !important;
left: 33.9630435765%;
-webkit-animation: fall 1.6940812839s ease-out 1 0.0107494089s;
animation: fall 1.6940812839s ease-out 1 0.0107494089s;
}
.confetti:nth-of-type(46) {
color: #0533FF !important;
left: 93.019937999%;
-webkit-animation: fall 1.2656640422s ease-out 1 1.4796713976s;
animation: fall 1.2656640422s ease-out 1 1.4796713976s;
}
.confetti:nth-of-type(47) {
color: #FFC32E !important;
left: 76.4927284365%;
-webkit-animation: fall2 1.8030178244s ease-out 1 1.027346416s;
animation: fall2 1.8030178244s ease-out 1 1.027346416s;
}
.confetti:nth-of-type(48) {
color: #FFC32E !important;
left: 45.5349282957%;
-webkit-animation: fall 1.0779500631s ease-out 1 0.0676159116s;
animation: fall 1.0779500631s ease-out 1 0.0676159116s;
}
.confetti:nth-of-type(49) {
color: #FFC32E !important;
left: 33.486623833%;
-webkit-animation: fall2 1.2445360556s ease-out 1 1.3362234751s;
animation: fall2 1.2445360556s ease-out 1 1.3362234751s;
}
.confetti:nth-of-type(50) {
color: #FD4F57 !important;
left: 81.3415821352%;
-webkit-animation: fall 1.2515967325s ease-out 1 0.9584435836s;
animation: fall 1.2515967325s ease-out 1 0.9584435836s;
}
.confetti:nth-of-type(51) {
color: #FD4F57 !important;
left: 74.725360269%;
-webkit-animation: fall2 1.2767382487s ease-out 1 0.9582519693s;
animation: fall2 1.2767382487s ease-out 1 0.9582519693s;
}
.confetti:nth-of-type(52) {
color: #0533FF !important;
left: 17.6137005086%;
-webkit-animation: fall2 1.8685645007s ease-out 1 0.2908458839s;
animation: fall2 1.8685645007s ease-out 1 0.2908458839s;
}
.confetti:nth-of-type(53) {
color: #FFC32E !important;
left: 26.17725077%;
-webkit-animation: fall2 1.6917965392s ease-out 1 0.3816254075s;
animation: fall2 1.6917965392s ease-out 1 0.3816254075s;
}
.confetti:nth-of-type(54) {
color: #17BB7E !important;
left: 49.5109489782%;
-webkit-animation: fall2 1.2990364563s ease-out 1 0.6580457741s;
animation: fall2 1.2990364563s ease-out 1 0.6580457741s;
}
.confetti:nth-of-type(55) {
color: #0533FF !important;
left: 96.1446302482%;
-webkit-animation: fall 1.5968139119s ease-out 1 0.7802752253s;
animation: fall 1.5968139119s ease-out 1 0.7802752253s;
}
.confetti:nth-of-type(56) {
color: #FD4F57 !important;
left: 48.0480718175%;
-webkit-animation: fall2 1.4613867945s ease-out 1 0.3155676303s;
animation: fall2 1.4613867945s ease-out 1 0.3155676303s;
}
.confetti:nth-of-type(57) {
color: #FD4F57 !important;
left: 35.8102134731%;
-webkit-animation: fall 1.2152012012s ease-out 1 0.5297560208s;
animation: fall 1.2152012012s ease-out 1 0.5297560208s;
}
.confetti:nth-of-type(58) {
color: #FD4F57 !important;
left: 61.7248068063%;
-webkit-animation: fall2 1.5817355346s ease-out 1 0.1428960885s;
animation: fall2 1.5817355346s ease-out 1 0.1428960885s;
}
.confetti:nth-of-type(59) {
color: #0533FF !important;
left: 35.6367673413%;
-webkit-animation: fall2 1.4862004358s ease-out 1 0.6057386583s;
animation: fall2 1.4862004358s ease-out 1 0.6057386583s;
}
.confetti:nth-of-type(60) {
color: #0533FF !important;
left: 71.5751095797%;
-webkit-animation: fall 1.3488531011s ease-out 1 0.6750433428s;
animation: fall 1.3488531011s ease-out 1 0.6750433428s;
}
.confetti:nth-of-type(61) {
color: #17BB7E !important;
left: 7.5422992165%;
-webkit-animation: fall 1.0764247679s ease-out 1 0.0368701097s;
animation: fall 1.0764247679s ease-out 1 0.0368701097s;
}
.confetti:nth-of-type(62) {
color: #FD4F57 !important;
left: 35.0558791354%;
-webkit-animation: fall2 1.0369179583s ease-out 1 0.6449357919s;
animation: fall2 1.0369179583s ease-out 1 0.6449357919s;
}
.confetti:nth-of-type(63) {
color: #FD4F57 !important;
left: 29.7627303417%;
-webkit-animation: fall2 1.5355446847s ease-out 1 1.2619104628s;
animation: fall2 1.5355446847s ease-out 1 1.2619104628s;
}
.confetti:nth-of-type(64) {
color: #FD4F57 !important;
left: 23.1236855623%;
-webkit-animation: fall2 1.1988118034s ease-out 1 0.5795132847s;
animation: fall2 1.1988118034s ease-out 1 0.5795132847s;
}
.confetti:nth-of-type(65) {
color: #0533FF !important;
left: 77.0226699732%;
-webkit-animation: fall2 1.1845160296s ease-out 1 1.4811585973s;
animation: fall2 1.1845160296s ease-out 1 1.4811585973s;
}
.confetti:nth-of-type(66) {
color: #FD4F57 !important;
left: 40.6235606958%;
-webkit-animation: fall2 1.68285782s ease-out 1 1.409761361s;
animation: fall2 1.68285782s ease-out 1 1.409761361s;
}
.confetti:nth-of-type(67) {
color: #17BB7E !important;
left: 69.1238907504%;
-webkit-animation: fall 1.2006259861s ease-out 1 0.663863764s;
animation: fall 1.2006259861s ease-out 1 0.663863764s;
}
.confetti:nth-of-type(68) {
color: #FD4F57 !important;
left: 57.8561769328%;
-webkit-animation: fall2 1.3226415252s ease-out 1 1.3852612027s;
animation: fall2 1.3226415252s ease-out 1 1.3852612027s;
}
.confetti:nth-of-type(69) {
color: #17BB7E !important;
left: 21.2974502728%;
-webkit-animation: fall 1.3847038459s ease-out 1 1.1582244318s;
animation: fall 1.3847038459s ease-out 1 1.1582244318s;
}
.confetti:nth-of-type(70) {
color: #FD4F57 !important;
left: 21.8219230301%;
-webkit-animation: fall2 1.454111552s ease-out 1 0.205495898s;
animation: fall2 1.454111552s ease-out 1 0.205495898s;
}
.confetti:nth-of-type(71) {
color: #FD4F57 !important;
left: 27.136424476%;
-webkit-animation: fall2 1.8070891152s ease-out 1 1.0281059197s;
animation: fall2 1.8070891152s ease-out 1 1.0281059197s;
}
.confetti:nth-of-type(72) {
color: #17BB7E !important;
left: 9.2721225761%;
-webkit-animation: fall 1.8368283892s ease-out 1 1.3527208858s;
animation: fall 1.8368283892s ease-out 1 1.3527208858s;
}
.confetti:nth-of-type(73) {
color: #17BB7E !important;
left: 33.115805731%;
-webkit-animation: fall2 1.3146461488s ease-out 1 0.3683371923s;
animation: fall2 1.3146461488s ease-out 1 0.3683371923s;
}
.confetti:nth-of-type(74) {
color: #FD4F57 !important;
left: 10.5599314995%;
-webkit-animation: fall 1.0395759466s ease-out 1 1.3109469522s;
animation: fall 1.0395759466s ease-out 1 1.3109469522s;
}
.confetti:nth-of-type(75) {
color: #FD4F57 !important;
left: 70.6543967107%;
-webkit-animation: fall2 1.5977246448s ease-out 1 0.8435512456s;
animation: fall2 1.5977246448s ease-out 1 0.8435512456s;
}
.confetti:nth-of-type(76) {
color: #FFC32E !important;
left: 7.6847561557%;
-webkit-animation: fall 1.3911487326s ease-out 1 0.3861591614s;
animation: fall 1.3911487326s ease-out 1 0.3861591614s;
}
.confetti:nth-of-type(77) {
color: #17BB7E !important;
left: 5.2279559991%;
-webkit-animation: fall2 1.4355131551s ease-out 1 0.6299616436s;
animation: fall2 1.4355131551s ease-out 1 0.6299616436s;
}
.confetti:nth-of-type(78) {
color: #FFC32E !important;
left: 72.9124788677%;
-webkit-animation: fall 1.1456776009s ease-out 1 0.8610346869s;
animation: fall 1.1456776009s ease-out 1 0.8610346869s;
}
.confetti:nth-of-type(79) {
color: #0533FF !important;
left: 49.0192704194%;
-webkit-animation: fall 1.3084886992s ease-out 1 0.7734438944s;
animation: fall 1.3084886992s ease-out 1 0.7734438944s;
}
.confetti:nth-of-type(80) {
color: #0533FF !important;
left: 47.9720125351%;
-webkit-animation: fall2 1.6966968143s ease-out 1 1.2974298803s;
animation: fall2 1.6966968143s ease-out 1 1.2974298803s;
}
.confetti:nth-of-type(81) {
color: #17BB7E !important;
left: 11.2301571967%;
-webkit-animation: fall2 1.8481532579s ease-out 1 1.400614404s;
animation: fall2 1.8481532579s ease-out 1 1.400614404s;
}
.confetti:nth-of-type(82) {
color: #0533FF !important;
left: 51.7418792933%;
-webkit-animation: fall2 1.5973143103s ease-out 1 0.4697361357s;
animation: fall2 1.5973143103s ease-out 1 0.4697361357s;
}
.confetti:nth-of-type(83) {
color: #0533FF !important;
left: 54.5984158096%;
-webkit-animation: fall 1.7577989882s ease-out 1 0.2159426308s;
animation: fall 1.7577989882s ease-out 1 0.2159426308s;
}
.confetti:nth-of-type(84) {
color: #0533FF !important;
left: 81.8759303645%;
-webkit-animation: fall 0.9771164233s ease-out 1 1.0323758592s;
animation: fall 0.9771164233s ease-out 1 1.0323758592s;
}
.confetti:nth-of-type(85) {
color: #17BB7E !important;
left: 66.9858172429%;
-webkit-animation: fall2 0.9812675945s ease-out 1 0.3856557487s;
animation: fall2 0.9812675945s ease-out 1 0.3856557487s;
}
.confetti:nth-of-type(86) {
color: #0533FF !important;
left: 44.1656016851%;
-webkit-animation: fall2 1.7616617664s ease-out 1 0.5862012899s;
animation: fall2 1.7616617664s ease-out 1 0.5862012899s;
}
.confetti:nth-of-type(87) {
color: #0533FF !important;
left: 43.1010417807%;
-webkit-animation: fall2 1.5072278488s ease-out 1 0.8842822647s;
animation: fall2 1.5072278488s ease-out 1 0.8842822647s;
}
.confetti:nth-of-type(88) {
color: #FD4F57 !important;
left: 84.8489066094%;
-webkit-animation: fall2 1.0837600366s ease-out 1 0.184855289s;
animation: fall2 1.0837600366s ease-out 1 0.184855289s;
}
.confetti:nth-of-type(89) {
color: #FFC32E !important;
left: 92.9927938001%;
-webkit-animation: fall2 1.7720797438s ease-out 1 1.3898160879s;
animation: fall2 1.7720797438s ease-out 1 1.3898160879s;
}
.confetti:nth-of-type(90) {
color: #0533FF !important;
left: 8.4550466674%;
-webkit-animation: fall2 1.7446329171s ease-out 1 1.1223897714s;
animation: fall2 1.7446329171s ease-out 1 1.1223897714s;
}
.confetti:nth-of-type(91) {
color: #FFC32E !important;
left: 74.4752899101%;
-webkit-animation: fall2 1.2031271955s ease-out 1 1.1517581877s;
animation: fall2 1.2031271955s ease-out 1 1.1517581877s;
}
.confetti:nth-of-type(92) {
color: #FFC32E !important;
left: 68.4010878993%;
-webkit-animation: fall 1.1174185814s ease-out 1 1.2711853358s;
animation: fall 1.1174185814s ease-out 1 1.2711853358s;
}
.confetti:nth-of-type(93) {
color: #0533FF !important;
left: 37.1171115822%;
-webkit-animation: fall2 1.7891435927s ease-out 1 1.0462968142s;
animation: fall2 1.7891435927s ease-out 1 1.0462968142s;
}
.confetti:nth-of-type(94) {
color: #0533FF !important;
left: 21.3381501082%;
-webkit-animation: fall2 1.5634847456s ease-out 1 1.3985665197s;
animation: fall2 1.5634847456s ease-out 1 1.3985665197s;
}
.confetti:nth-of-type(95) {
color: #FD4F57 !important;
left: 69.4858904732%;
-webkit-animation: fall2 1.7794089986s ease-out 1 0.0744352063s;
animation: fall2 1.7794089986s ease-out 1 0.0744352063s;
}
.confetti:nth-of-type(96) {
color: #17BB7E !important;
left: 93.4614057153%;
-webkit-animation: fall2 1.5819727957s ease-out 1 0.2975510834s;
animation: fall2 1.5819727957s ease-out 1 0.2975510834s;
}
.confetti:nth-of-type(97) {
color: #FFC32E !important;
left: 53.8487539485%;
-webkit-animation: fall 1.0809541136s ease-out 1 1.0810260715s;
animation: fall 1.0809541136s ease-out 1 1.0810260715s;
}
.confetti:nth-of-type(98) {
color: #FFC32E !important;
left: 82.3431390276%;
-webkit-animation: fall2 1.2268291689s ease-out 1 0.4131398472s;
animation: fall2 1.2268291689s ease-out 1 0.4131398472s;
}
.confetti:nth-of-type(99) {
color: #FFC32E !important;
left: 8.5615681219%;
-webkit-animation: fall2 0.9525339805s ease-out 1 1.3156355427s;
animation: fall2 0.9525339805s ease-out 1 1.3156355427s;
}
.confetti:nth-of-type(100) {
color: #0533FF !important;
left: 37.1500275293%;
-webkit-animation: fall 1.4769672203s ease-out 1 0.1543157769s;
animation: fall 1.4769672203s ease-out 1 0.1543157769s;
}
@-webkit-keyframes fall {
0% {
top: -110px;
transform: rotate(0deg) rotateY(-90deg);
opacity: 1;
}
100% {
top: 100vh; /* Verander de eindpositie naar 100vh om het scherm te vullen */
transform: rotate(360deg) rotateY(180deg);
opacity: 0.7;
}
}
@keyframes fall {
0% {
top: -110px;
transform: rotate(0deg) rotateY(-90deg);
opacity: 1;
}
100% {
top: 100vh; /* Verander de eindpositie naar 100vh om het scherm te vullen */
transform: rotate(360deg) rotateY(180deg);
opacity: 0.7;
}
}
@-webkit-keyframes fall2 {
0% {
top: -110px;
transform: rotate(0deg) rotateY(90deg);
opacity: 1;
}
100% {
top: 100vh; /* Verander de eindpositie naar 100vh om het scherm te vullen */
transform: rotate(-360deg) rotateY(-180deg);
opacity: 0.5;
}
}
@keyframes fall2 {
0% {
top: -110px;
transform: rotate(0deg) rotateY(90deg);
opacity: 1;
}
100% {
top: 100vh; /* Verander de eindpositie naar 100vh om het scherm te vullen */
transform: rotate(-360deg) rotateY(-180deg);
opacity: 0.5;
}
}
/* Plugin styles */
/* Theme styles */
#cookie {
border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
--tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
filter: var(--tw-filter);
}
@media (min-width: 768px) {
#cookie {
border-radius: 0.125rem;
}
}
#cookie .cookie_title {
font-weight: 700;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
#cookie .cookie_link, #cookie .cookie_text, #cookie .btn-decline {
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
#cookie .btn {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
/* General styles */
#cookie{
width: 100%;
}
#cookie .cookie_container{
margin: 16px;
}
#cookie .cookie_title{
margin-bottom: 8px;
}
#cookie .cookie_buttons_container{
margin-top: 16px;
display: grid;
grid-auto-rows: -webkit-max-content;
grid-auto-rows: max-content;
align-content: center;
grid-row-gap: 16px;
}
#cookie .btn-decline{
text-align: center;
}
#cookie .btn-decline:hover {
--tw-text-opacity: 1;
color: rgba(209, 213, 219, var(--tw-text-opacity));
}
#cookie .cookie-revoke-container{
padding: 16px;
}
#cookie .cookie-revoke-container .cn-text-container{
display: block;
margin-bottom: 8px;
}
@media screen and (min-width: 768px){
#cookie .cookie_container{
display: grid;
grid-template-columns: 1fr -webkit-max-content;
grid-template-columns: 1fr max-content;
grid-column-gap: 16px;
}
#cookie .cookies_title,
#cookie .cookies_text{
grid-column: 1;
}
#cookie .cookie_buttons_container{
margin-top: 0;
align-items: center;
}
#cookie .btn{
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
max-width: initial !important;
}
}
@media screen and (min-width: 1024px){
#cookie{
bottom: 8px;
}
#cookie .cookie_container{
margin-left: 48px;
margin-right: 48px;
}
}
@media screen and (min-width: 1120px){
#cookie{
width: auto;
}
#cookie .cookie_container{
width: 1120px;
margin: 24px;
}
}
/* Theme styles */
.gfield_error input {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(253, 79, 87, var(--tw-ring-opacity));
}
.gfield_required {
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
}
.validation_error, .validation_message {
--tw-text-opacity: 1;
color: rgba(253, 79, 87, var(--tw-text-opacity));
}
.gform_confirmation_message {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
/* General styles */
.gform_title{
margin-bottom: 4px;
}
.hidden_label .gfield_label{
display: none;
}
.gfield_label{
margin-bottom: 4px;
}
.gfield_required{
margin-left: 4px;
}
.ginput_container_consent{
display: grid;
grid-column-gap: 8px;
grid-template-columns: -webkit-max-content 1fr;
grid-template-columns: max-content 1fr;
}
.validation_message{
position: absolute;
}
.gform_ajax_spinner{
position: absolute;
}
/* Succesfull submit */
.gform_confirmation_message{
padding: 16px;
}
/*
** Newsletter form
**/
form.newsletter{
position: relative;
}
form.newsletter .gform_title {
font-weight: 700;
}
form.newsletter .gform_footer{
position: absolute;
right: 4px;
bottom: 4px;
}
form.newsletter .gform_button {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
@media screen and (max-width: 1023px){
#cta form.newsletter .gform_footer{
position: relative;
right: 0;
bottom: 0;
padding-top: 16px;
}
#cta form.newsletter .gform_button{
width: 100%;
}
#cta form.newsletter .gform_button {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
/*
** Contact form
**/
form.contact > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
form.contact .gfield_error{
padding-bottom: 1em;
}
.gform_wrapper .gform_title {
font-weight: 700;
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
font-size: 36px;
line-height: 40px;
}
.footer .gform_wrapper .gform_title {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 800;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
form.contact .gfield_label {
font-weight: 700;
}
form.contact .gform_button {
width: 100%;
}
form.contact .gform_fields {
display: grid;
row-gap: 1rem;
}
@media (min-width: 768px) {
form.contact .gform_fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
form.contact .gform_fields {
-moz-column-gap: 1rem;
column-gap: 1rem;
}
form.contact .gfield {
grid-column: span 1 / span 1;
}
form.contact .gfield:nth-of-type(1n + 5) {
grid-column: span 2 / span 2;
}
}
/* Theme styles */
.toast {
/* border-left-style: solid;
border-left-width: 5px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);*/
}
/* Default */
.toast.default, .toast.info {
--tw-bg-opacity: 1;
background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(30, 64, 175, var(--tw-text-opacity));
}
.toast.default svg, .toast.info svg {
--tw-text-opacity: 1;
color: rgba(96, 165, 250, var(--tw-text-opacity));
}
.toast.default::after, .toast.info::after {
--tw-bg-opacity: 1;
background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
}
/* Success */
.toast.success {
--tw-bg-opacity: 1;
background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(6, 95, 70, var(--tw-text-opacity));
}
.toast.success svg {
--tw-text-opacity: 1;
color: rgba(52, 211, 153, var(--tw-text-opacity));
}
.toast.success::after {
--tw-bg-opacity: 1;
background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
}
/* Danger */
.toast.error {
--tw-bg-opacity: 1;
background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(153, 27, 27, var(--tw-text-opacity));
}
.toast.error svg {
--tw-text-opacity: 1;
color: rgba(248, 113, 113, var(--tw-text-opacity));
}
.toast.error::after {
--tw-bg-opacity: 1;
background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
}
/* Warning */
.toast.attention {
--tw-bg-opacity: 1;
background-color: rgba(255, 251, 235, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(146, 64, 14, var(--tw-text-opacity));
}
.toast.attention svg {
--tw-text-opacity: 1;
color: rgba(251, 191, 36, var(--tw-text-opacity));
}
.toast.attention::after {
--tw-bg-opacity: 1;
background-color: rgba(251, 191, 36, var(--tw-bg-opacity));
}
/* General styles */
.toast::after{
content: '';
display: block;
position: absolute;
width: 100%;
height: 4px;
/*background-color: red;*/
border-radius: 0 0 2px 2px;
bottom: 0;
-webkit-animation-name: progressbar;
animation-name: progressbar;
-webkit-animation-duration: 3000ms;
animation-duration: 3000ms;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(.5,0,.5,1);
animation-timing-function: cubic-bezier(.5,0,.5,1);
}
.toast {
position: absolute; /* Fallback */
position: fixed;
top: 104px;
right: 24px;
width: calc(100% - 60px);
max-width: 450px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
transform: translateX(150%);
transition: transform .4s;
/*@apply rounded;*/
z-index: 100; /* */
}
.toast[aria-hidden="false"] {
transform: translateX(0%);
}
.toast_btn {
font-weight: 700;
}
.toast_btn--custom {
background: rgb(50,50,50);
color: #fff;
}
.toast_btn:hover,
.toast_btn:focus {
outline: none;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}
@-webkit-keyframes progressbar {
from {
width: 100%;
/*background: #0F0;*/
}
to {
width: 0%;
/*background: #F00;*/
}
}
@keyframes progressbar {
from {
width: 100%;
/*background: #0F0;*/
}
to {
width: 0%;
/*background: #F00;*/
}
}
/*
* Extra styling by no.dots
*/
.submitted-message{
padding: 16px;
border: 2px;
background-color: white;
}
/*
* Default HubSpot form styling, provided by Webs company (hubspot partner of Vecos)
*/
.hbspt-form, .hs-form, .hs-form *, .hs-form *::before, .hs-form *::after {
box-sizing: border-box;
}
.newsletter-hs-form form { position: relative; }
.newsletter-hs-form .hs-form input[type=email]:focus { box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(209, 213, 219) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; }
.newsletter-hs-form.no-label .hs-form .hs-submit { position: absolute; right: 4px; top: 3px; width: auto; }
.newsletter-hs-form .hs-form .hs-submit { position: absolute; right: 4px; top: 27px; width: auto; }
.newsletter-hs-form .hs-button.primary,
.newsletter-hs-form .hs-form input[type=submit],
.newsletter-hs-form .hs-form input[type=button] { padding: 8px 16px; }
.hs-form .hs-field-desc {
line-height: 1;
}
.hs-form label {
font-size: 14px;
line-height: 1.42;
}
.hs-form .hs-form-field {
margin-bottom: 16px;
}
.hs-form .hs-form-field > label {
font-family: Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-bottom: 4px;
}
.hs-form .hs-error-msgs {
list-style: none;
margin: 0;
padding: 0;
}
.hs-form .hs-error-msgs li:last-child {
margin-right: 0;
}
.hs-form .hs-error-msgs label {
color: #F95361;
font-size: 12px;
}
.hs-form .hs-dependent-field ul {
list-style: none;
margin: 0;
padding: 0;
}
.hs-form .hs-form-required {
color: rgb(5, 51, 255);
margin-left: 5px;
}
.hs-form .legal-consent-container {
margin-bottom: 32px;
}
.hs-form .legal-consent-container .field.hs-form-field {
margin-bottom: 20px;
}
.hs-form .legal-consent-container,
.hs-form .legal-consent-container p,
.hs-form .legal-consent-container label,
.hs-form .legal-consent-container a {
color: #000;
font-size: 14px;
font-family: Avenir,Helvetica,Arial,sans-serif;
font-weight: 400;
line-height: 24px;
}
.hs-form .legal-consent-container a {
text-decoration: underline;
}
.hs-form .legal-consent-container label {
align-items: center;
display: flex;
}
.hs-form .legal-consent-container .hs-error-msgs label {
color: #F95361;
}
.hs-form .legal-consent-container .hs-form-booleancheckbox {
margin: 10px 0;
}
.hs-form .legal-consent-container .hs-form-booleancheckbox-display > span {
margin: 0;
}
@media only screen and (min-width: 992px) {
.hs-form .legal-consent-container {
margin-bottom: 40px;
}
}
.hs-form input[type=text],
.hs-form input[type=password],
.hs-form input[type=datetime],
.hs-form input[type=datetime-local],
.hs-form input[type=date],
.hs-form input[type=month],
.hs-form input[type=time],
.hs-form input[type=week],
.hs-form input[type=number],
.hs-form input[type=email],
.hs-form input[type=url],
.hs-form input[type=search],
.hs-form input[type=tel],
.hs-form input[type=color],
.hs-form input[type=file],
.hs-form textarea,
.hs-form select {
background: #fff;
border: none;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(209, 213, 219) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
border-radius: 24px;
color: #0B181E;
display: block;
font-family: Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
outline: none;
padding: 8px 12px;
width: 100%;
}
.hs-form input[type=text]:disabled,
.hs-form input[type=password]:disabled,
.hs-form input[type=datetime]:disabled,
.hs-form input[type=datetime-local]:disabled,
.hs-form input[type=date]:disabled,
.hs-form input[type=month]:disabled,
.hs-form input[type=time]:disabled,
.hs-form input[type=week]:disabled,
.hs-form input[type=number]:disabled,
.hs-form input[type=email]:disabled,
.hs-form input[type=url]:disabled,
.hs-form input[type=search]:disabled,
.hs-form input[type=tel]:disabled,
.hs-form input[type=color]:disabled,
.hs-form input[type=file]:disabled,
.hs-form textarea:disabled,
.hs-form select:disabled {
background: #EDF1F2;
}
.hs-form input[type=text]:focus,
.hs-form input[type=password]:focus,
.hs-form input[type=datetime]:focus,
.hs-form input[type=datetime-local]:focus,
.hs-form input[type=date]:focus,
.hs-form input[type=month]:focus,
.hs-form input[type=time]:focus,
.hs-form input[type=week]:focus,
.hs-form input[type=number]:focus,
.hs-form input[type=email]:focus,
.hs-form input[type=url]:focus,
.hs-form input[type=search]:focus,
.hs-form input[type=tel]:focus,
.hs-form input[type=color]:focus,
.hs-form input[type=file]:focus,
.hs-form textarea:focus,
.hs-form select:focus {
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(5, 51, 255) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
.hs-form input[type=file] {
display: flex;
padding: 8px 6px;
}
.hs-form select {
background-color: #ffffff;
-webkit-appearance: none;
-moz-appearance: none;
}
.hs-form .hs-fieldtype-select .input {
position: relative;
}
.hs-form .hs-fieldtype-select .input::after {
background: url("https://insights.vecos.com/hubfs/_system_do_not_modify_delete/chevron-down-dark.svg") center/cover;
content: "";
height: 6px;
pointer-events: none;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 10px;
}
.hs-form .hs-fieldtype-select .input select {
padding-right: 40px;
}
.hs-form .hs-fieldtype-select .input select:focus {
border-color: #00E6A0;
}
.hs-form textarea {
height: 256px;
min-height: 256px;
min-width: 100%;
max-width: 100%;
resize: vertical;
}
.hs-form .hs-form-field ul.inputs-list {
list-style: none;
margin: 0;
padding: 0;
}
.hs-form .hs-form-field ul.inputs-list li label {
align-items: center;
display: inline-flex;
}
.hs-form .hs-form-radio-display {
color: #003246;
font-size: 14px;
}
.hs-form .hs-form-radio-display input[type=radio] {
position: absolute;
left: 0;
max-width: 10px !important;
z-index: -1;
opacity: 0;
}
.hs-form .hs-form-booleancheckbox-display span {
color: #003246;
font-size: 15px;
position: relative;
}
.hs-form .hs-form-booleancheckbox-display span::before {
background: #ffffff;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(209, 213, 219) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
border-radius: 2px;
content: "";
cursor: pointer;
display: inline-block;
height: 12px;
min-width: 12px;
margin-right: 10px;
width: 12px;
}
.hs-form .hs-form-booleancheckbox-display:hover span::before{
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(23, 187, 126) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
.hs-form input[type=checkbox]:checked+span::before {
background: url("https://insights.vecos.com/hubfs/_system_do_not_modify_delete/checkmark-white.svg") center/10px 10px no-repeat, rgb(23, 187, 126);
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(5, 51, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
.hs-form .hs-form-checkbox-display input[type=checkbox],
.hs-form .hs-form-booleancheckbox-display input[type=checkbox] {
position: absolute;
left: 0;
max-width: 10px !important;
z-index: -1;
opacity: 0;
}
.hs-form fieldset.form-columns-1, .hs-form fieldset.form-columns-2, .hs-form fieldset.form-columns-3 {
max-width: 100%;
}
.hs-form fieldset.form-columns-1 .hs-form-field .input, .hs-form fieldset.form-columns-2 .hs-form-field .input, .hs-form fieldset.form-columns-3 .hs-form-field .input {
margin-right: 0;
}
.hs-form fieldset.form-columns-1 .hs-form-field .input .hs-input, .hs-form fieldset.form-columns-2 .hs-form-field .input .hs-input, .hs-form fieldset.form-columns-3 .hs-form-field .input .hs-input {
width: 100% !important;
}
.hs-form fieldset.form-columns-2 .hs-form-field {
width: 100%;
}
@media only screen and (min-width: 576px) {
.hs-form fieldset.form-columns-2 .hs-form-field {
margin-right: 3.49%;
width: 48.253% !important;
}
.hs-form fieldset.form-columns-2 .hs-form-field:last-of-type {
margin-right: 0;
}
.hs-form fieldset.form-columns-3 .hs-form-field {
margin-right: 1.6233766%;
width: 32.2510823% !important;
}
.hs-form fieldset.form-columns-3 .hs-form-field:last-of-type {
margin-right: 0;
}
}
.hs-form .actions {
background-color: rgb(23, 187, 126);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.hs-form .actions::before {
border-radius: 24px;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background-color: rgb(5, 51, 255);
transition: all .3s;
z-index: -1;
}
.hs-form .actions:hover::before {
width: 100%;
z-index: 1;
}
.hs-form .hs-button.primary,
.hs-form input[type=submit],
.hs-form input[type=button] {
align-items: center;
background: transparent;
border: none;
border-radius: 24px;
color: #fff;
cursor: pointer;
display: inline-flex;
font: 800 16px Avenir, Helvetica, Arial, sans-serif;
justify-content: center;
outline: none;
overflow: hidden;
padding: 10px 16px;
position: relative;
text-decoration: none;
transition: background 0.1s linear, border 0.1s linear, color 0.1s linear;
-moz-appearance: none;
-webkit-appearance: none;
width: 100%;
z-index: 1;
}
.hs-form--small .hs-form-field {
margin-bottom: 10px;
}
.hs-form--small .actions {
margin-top: 26px;
}
.hs-form--full-width-actions .actions input[type=submit] {
width: 100%;
}
.hs-form--primary .actions input[type=submit] {
background: #003246;
color: #fff;
}
.hs-form--primary .actions input[type=submit]:hover {
background: #fff;
color: #003246;
}
.hs-form--no-labels .hs-form-field > label {
display: none;
}
.hs-form .bg_primary .submit-message {
color: #ffffff;
}
/* ! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com */
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
/**
Use a more readable tab size (opinionated).
*/
html {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/
body {
font-family:
system-ui,
-apple-system, /* Firefox supports this but not yet `system-ui` */
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/**
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
* A thin layer on top of normalize.css that provides a starting point more
* suitable for web applications.
*/
/**
* Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
button {
background-color: transparent;
background-image: none;
}
fieldset {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
/**
* Tailwind custom reset styles
*/
/**
* 1. Use the user's configured `sans` font-family (with Tailwind's default
* sans-serif font stack as a fallback) as a sane default.
* 2. Use Tailwind's default "normal" line-height so the user isn't forced
* to override it to ensure consistency even when using the default theme.
*/
html {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
line-height: 1.5; /* 2 */
}
/**
* Inherit font-family and line-height from `html` so users can set them as
* a class directly on the `html` element.
*/
body {
font-family: inherit;
line-height: inherit;
}
/**
* 1. Prevent padding and border from affecting element width.
*
* We used to set this in the html element and inherit from
* the parent element for everything else. This caused issues
* in shadow-dom-enhanced elements like where the content
* is wrapped by a div with box-sizing set to `content-box`.
*
* https://github.com/mozdevs/cssremedy/issues/4
*
*
* 2. Allow adding a border to an element by just adding a border-width.
*
* By default, the way the browser specifies that an element should have no
* border is by setting it's border-style to `none` in the user-agent
* stylesheet.
*
* In order to easily add borders to elements by just setting the `border-width`
* property, we change the default border-style for all elements to `solid`, and
* use border-width to hide them instead. This way our `border` utilities only
* need to set the `border-width` property instead of the entire `border`
* shorthand, making our border utilities much more straightforward to compose.
*
* https://github.com/tailwindcss/tailwindcss/pull/116
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
}
/*
* Ensure horizontal rules are visible by default
*/
hr {
border-top-width: 1px;
}
/**
* Undo the `border-style: none` reset that Normalize applies to images so that
* our `border-{width}` utilities have the expected effect.
*
* The Normalize reset is unnecessary for us since we default the border-width
* to 0 on all elements.
*
* https://github.com/tailwindcss/tailwindcss/issues/362
*/
img {
border-style: solid;
}
textarea {
resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
color: #9ca3af;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1;
color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af;
}
button,
[role="button"] {
cursor: pointer;
}
table {
border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/**
* Reset links to optimize for opt-in styling instead of
* opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/**
* Reset form element properties that are easy to forget to
* style explicitly so you don't inadvertently introduce
* styles that deviate from your design system. These styles
* supplement a partial reset that is already applied by
* normalize.css.
*/
button,
input,
optgroup,
select,
textarea {
padding: 0;
line-height: inherit;
color: inherit;
}
/**
* Use the configured 'mono' font family for elements that
* are expected to be rendered with a monospace font, falling
* back to the system monospace stack if there is no configured
* 'mono' font family.
*/
pre,
code,
kbd,
samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/**
* 1. Make replaced elements `display: block` by default as that's
* the behavior you want almost all of the time. Inspired by
* CSS Remedy, with `svg` added as well.
*
* https://github.com/mozdevs/cssremedy/issues/14
*
* 2. Add `vertical-align: middle` to align replaced elements more
* sensibly by default when overriding `display` by adding a
* utility like `inline`.
*
* This can trigger a poorly considered linting error in some
* tools but is included by design.
*
* https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/**
* Constrain images and videos to the parent width and preserve
* their intrinsic aspect ratio.
*
* https://github.com/mozdevs/cssremedy/issues/14
*/
img,
video {
max-width: 100%;
height: auto;
}
*, ::before, ::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(5, 51, 255, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-blur: var(--tw-empty,/*!*/ /*!*/);
--tw-brightness: var(--tw-empty,/*!*/ /*!*/);
--tw-contrast: var(--tw-empty,/*!*/ /*!*/);
--tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
--tw-invert: var(--tw-empty,/*!*/ /*!*/);
--tw-saturate: var(--tw-empty,/*!*/ /*!*/);
--tw-sepia: var(--tw-empty,/*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
--tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
--tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
body{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: 'Avenir';
src: url('../fonts/AvenirLTStd-Book.eot');
src: local('Avenir LT Std 45 Book'), local('AvenirLTStd-Book'),
url('../fonts/AvenirLTStd-Book.eot?#iefix') format('embedded-opentype'),
url('../fonts/AvenirLTStd-Book.woff2') format('woff2'),
url('../fonts/AvenirLTStd-Book.woff') format('woff'),
url('../fonts/AvenirLTStd-Book.ttf') format('truetype'),
url('../fonts/AvenirLTStd-Book.svg#AvenirLTStd-Book') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Avenir';
src: url('../fonts/AvenirLTStd-Heavy.eot');
src: local('Avenir LT Std 85 Heavy'), local('AvenirLTStd-Heavy'),
url('../fonts/AvenirLTStd-Heavy.eot?#iefix') format('embedded-opentype'),
url('../fonts/AvenirLTStd-Heavy.woff2') format('woff2'),
url('../fonts/AvenirLTStd-Heavy.woff') format('woff'),
url('../fonts/AvenirLTStd-Heavy.ttf') format('truetype'),
url('../fonts/AvenirLTStd-Heavy.svg#AvenirLTStd-Heavy') format('svg');
font-weight: 900;
font-style: normal;
font-display: swap;
}
select,
textarea,
input {
-webkit-appearance: none;
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
select::-moz-placeholder, textarea::-moz-placeholder, input::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}
select:-ms-input-placeholder, textarea:-ms-input-placeholder, input:-ms-input-placeholder {
--tw-placeholder-opacity: 1;
color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}
select::placeholder, textarea::placeholder, input::placeholder {
--tw-placeholder-opacity: 1;
color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}
select, textarea, input {
width: 100%;
border-radius: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgba(209, 213, 219, var(--tw-ring-opacity));
/* Focus styles */
}
select:focus, textarea:focus, input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgba(5, 51, 255, var(--tw-ring-opacity));
}
select,
textarea,
input {
}
textarea::-moz-placeholder, input::-moz-placeholder {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
textarea:-ms-input-placeholder, input:-ms-input-placeholder {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
textarea::placeholder, input::placeholder, select:first-child {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
/* Custom Checkbox styling */
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 0;
padding: 0;
margin: 0.25rem;
height: 0.75rem;
width: 0.75rem;
border-radius: 0.125rem;
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
input[type="checkbox"]:before {
content: close-quote;
display: inline-block;
height: 0.75rem;
width: 0.75rem;
border-radius: 0.125rem;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgba(209, 213, 219, var(--tw-ring-opacity));
}
input[type="checkbox"]:hover:before {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(23, 187, 126, var(--tw-ring-opacity));
}
input[type="checkbox"]:checked:before {
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
--tw-ring-opacity: 1;
--tw-ring-color: rgba(23, 187, 126, var(--tw-ring-opacity));
background-image: url("data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 11L0 6L1.41 4.59L5 8.17L12.59 0.580002L14 2L5 11Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
input[type="checkbox"][data-reference-filter-checkbox]:before {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgba(11, 8, 63, var(--tw-ring-opacity));
}
input[type="checkbox"][data-reference-filter-checkbox]:hover:before {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(5, 51, 255, var(--tw-ring-opacity));
}
input[type="checkbox"][data-reference-filter-checkbox]:checked:before {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
--tw-ring-opacity: 1;
--tw-ring-color: rgba(5, 51, 255, var(--tw-ring-opacity));
}
/* Custom Select/Dropdown styling */
select {
/* SVG background image */
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z' fill='%231B202D'/%3E%3C/svg%3E%0A");
background-size: 18px;
background-position: calc(100% - 12px) center;
background-repeat: no-repeat;
padding-right: 36px;
}
/* VECOS SPECIFIC */
html, body {
font-family: Avenir, Helvetica, Arial, sans-serif;
font-weight: 400;
}
b,
strong {
font-weight: 600;
}
/* VECOS SPECIFIC */
.regular-text h1 {
font-size: 48px;
line-height: 52px;
margin-block: 0.75em;
}
.regular-text h2 {
font-size: 36px;
line-height: 40px;
margin-block: 0.75em;
}
.regular-text h3 {
font-size: 28px;
line-height: 1;
margin-block: 0.75em;
}
.regular-text h4 {
font-size: 24px;
line-height: 24px;
margin-block: 0.75em;
}
.regular-text a {
text-decoration: underline;
}
.regular-text p:not(:last-of-type) {
margin-block: 1em;
}
.regular-text ul,
.regular-text ol {
margin-block: 1em;
-webkit-padding-start: 1.25em;
padding-inline-start: 1.25em;
}
.regular-text ul {
list-style: disc;
}
.regular-text ol {
list-style: decimal;
}
.regular-text img {
border-radius: 0.125rem;
}
.regular-text .wp-caption {
max-width: 100%;
}
/* Firefox */
[data-filter-options] {
scrollbar-width: thin;
scrollbar-color: transparent;
}
/* Chrome, Edge, and Safari */
[data-filter-options]::-webkit-scrollbar {
width: 4px;
margin: 0 4px;
}
[data-filter-options]::-webkit-scrollbar-track {
background: transparent;
border-radius: 5px;
}
[data-filter-options]::-webkit-scrollbar-thumb {
background-color: #c9c8c8;
border-radius: 14px;
}
.container {
width: 100%;
}
.\!container {
width: 100% !important;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
.\!container {
max-width: 640px !important;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
.\!container {
max-width: 768px !important;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
.\!container {
max-width: 1024px !important;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
.\!container {
max-width: 1280px !important;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
.\!container {
max-width: 1536px !important;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.visible {
visibility: visible;
}
.\!visible {
visibility: visible !important;
}
.invisible {
visibility: hidden;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.\!fixed {
position: fixed !important;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.\!relative {
position: relative !important;
}
.sticky {
position: sticky;
}
.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.right-4 {
right: 1rem;
}
.top-2 {
top: 0.5rem;
}
.left-2 {
left: 0.5rem;
}
.right-6 {
right: 1.5rem;
}
.bottom-6 {
bottom: 1.5rem;
}
.top-6 {
top: 1.5rem;
}
.left-6 {
left: 1.5rem;
}
.top-1\/3 {
top: 33.333333%;
}
.-left-1\/4 {
left: -25%;
}
.-bottom-60 {
bottom: -15rem;
}
.-left-10 {
left: -2.5rem;
}
.left-0 {
left: 0px;
}
.top-0 {
top: 0px;
}
.-right-2 {
right: -0.5rem;
}
.bottom-0 {
bottom: 0px;
}
.-right-3 {
right: -0.75rem;
}
.-bottom-3 {
bottom: -0.75rem;
}
.bottom-2\/4 {
bottom: 50%;
}
.right-10 {
right: 2.5rem;
}
.-top-16 {
top: -4rem;
}
.right-0 {
right: 0px;
}
.right-2 {
right: 0.5rem;
}
.left-1\/2 {
left: 50%;
}
.top-1\/2 {
top: 50%;
}
.top-14 {
top: 3.5rem;
}
.top-80 {
top: 20rem;
}
.isolate {
isolation: isolate;
}
.isolation-auto {
isolation: auto;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-12 {
z-index: 12;
}
.z-11 {
z-index: 11;
}
.z-50 {
z-index: 50;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.float-none {
float: none;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}
.clear-none {
clear: none;
}
.m-auto {
margin: auto;
}
.m-3 {
margin: 0.75rem;
}
.m-8 {
margin: 2rem;
}
.m-14 {
margin: 3.5rem;
}
.m-16 {
margin: 4rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mr-6 {
margin-right: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-20 {
margin-top: 5rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.mb-28 {
margin-bottom: 7rem;
}
.-mb-10 {
margin-bottom: -2.5rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.\!mt-0 {
margin-top: 0px !important;
}
.mt-1 {
margin-top: 0.25rem;
}
.box-border {
box-sizing: border-box;
}
.box-content {
box-sizing: content-box;
}
.block {
display: block;
}
.\!block {
display: block !important;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.inline-table {
display: inline-table;
}
.table-caption {
display: table-caption;
}
.table-cell {
display: table-cell;
}
.table-column {
display: table-column;
}
.table-column-group {
display: table-column-group;
}
.table-footer-group {
display: table-footer-group;
}
.table-header-group {
display: table-header-group;
}
.table-row-group {
display: table-row-group;
}
.table-row {
display: table-row;
}
.flow-root {
display: flow-root;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.contents {
display: contents;
}
.\!contents {
display: contents !important;
}
.list-item {
display: list-item;
}
.hidden {
display: none;
}
.\!hidden {
display: none !important;
}
.h-72 {
height: 18rem;
}
.h-56 {
height: 14rem;
}
.h-32 {
height: 8rem;
}
.h-80 {
height: 20rem;
}
.h-full {
height: 100%;
}
.h-1000 {
height: 1000px;
}
.h-250 {
height: 250px;
}
.h-90 {
height: 90px;
}
.h-9 {
height: 2.25rem;
}
.h-px {
height: 1px;
}
.h-64 {
height: 16rem;
}
.h-24 {
height: 6rem;
}
.h-auto {
height: auto;
}
.h-60v {
height: 60vh;
}
.h-120 {
height: 120px;
}
.h-8 {
height: 2rem;
}
.h-0\.5 {
height: 0.125rem;
}
.h-0 {
height: 0px;
}
.h-4 {
height: 1rem;
}
.h-16 {
height: 4rem;
}
.h-52 {
height: 13rem;
}
.h-5 {
height: 1.25rem;
}
.max-h-\[192px\] {
max-height: 192px;
}
.max-h-100 {
max-height: 25rem;
}
.min-h-\[290px\] {
min-height: 290px;
}
.w-max {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.w-96 {
width: 24rem;
}
.w-full {
width: 100%;
}
.w-1000 {
width: 1000px;
}
.w-250 {
width: 250px;
}
.w-80 {
width: 20rem;
}
.w-48 {
width: 12rem;
}
.w-90 {
width: 90px;
}
.w-9 {
width: 2.25rem;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.w-3 {
width: 0.75rem;
}
.w-24 {
width: 6rem;
}
.w-10 {
width: 2.5rem;
}
.w-120 {
width: 120px;
}
.w-8 {
width: 2rem;
}
.w-56 {
width: 14rem;
}
.w-40 {
width: 10rem;
}
.w-16 {
width: 4rem;
}
.w-20 {
width: 5rem;
}
.w-28 {
width: 7rem;
}
.w-32 {
width: 8rem;
}
.w-3\/5 {
width: 60%;
}
.w-1\/2 {
width: 50%;
}
.min-w-max {
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-max {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
.max-w-xs {
max-width: 20rem;
}
.max-w-\[391px\] {
max-width: 391px;
}
.max-w-sm {
max-width: 24rem;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-none {
flex: none;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-grow {
flex-grow: 1;
}
.table-auto {
table-layout: auto;
}
.table-fixed {
table-layout: fixed;
}
.border-collapse {
border-collapse: collapse;
}
.border-separate {
border-collapse: separate;
}
.translate-y-2\/4 {
--tw-translate-y: 50%;
transform: var(--tw-transform);
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: var(--tw-transform);
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: var(--tw-transform);
}
.-translate-y-1\.5 {
--tw-translate-y: -0.375rem;
transform: var(--tw-transform);
}
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: var(--tw-transform);
}
.translate-y-1\.5 {
--tw-translate-y: 0.375rem;
transform: var(--tw-transform);
}
.translate-y-1 {
--tw-translate-y: 0.25rem;
transform: var(--tw-transform);
}
.rotate-45 {
--tw-rotate: 45deg;
transform: var(--tw-transform);
}
.-rotate-45 {
--tw-rotate: -45deg;
transform: var(--tw-transform);
}
.-rotate-180 {
--tw-rotate: -180deg;
transform: var(--tw-transform);
}
.transform {
transform: var(--tw-transform);
}
.\!transform {
transform: var(--tw-transform) !important;
}
.transform-cpu {
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-gpu {
--tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-none {
transform: none;
}
@-webkit-keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
.cursor-pointer {
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select-text {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.select-all {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
.select-auto {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.resize-none {
resize: none;
}
.resize-y {
resize: vertical;
}
.resize-x {
resize: horizontal;
}
.resize {
resize: both;
}
.list-inside {
list-style-position: inside;
}
.list-outside {
list-style-position: outside;
}
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-flow-col {
grid-auto-flow: column;
}
.grid-flow-row-dense {
grid-auto-flow: row dense;
}
.grid-flow-col-dense {
grid-auto-flow: column dense;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.place-content-center {
place-content: center;
}
.place-content-start {
place-content: start;
}
.place-content-end {
place-content: end;
}
.place-content-between {
place-content: space-between;
}
.place-content-around {
place-content: space-around;
}
.place-content-evenly {
place-content: space-evenly;
}
.place-content-stretch {
place-content: stretch;
}
.place-items-start {
place-items: start;
}
.place-items-end {
place-items: end;
}
.place-items-center {
place-items: center;
}
.place-items-stretch {
place-items: stretch;
}
.content-center {
align-content: center;
}
.content-start {
align-content: flex-start;
}
.content-end {
align-content: flex-end;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-evenly {
align-content: space-evenly;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.justify-items-start {
justify-items: start;
}
.justify-items-end {
justify-items: end;
}
.justify-items-center {
justify-items: center;
}
.justify-items-stretch {
justify-items: stretch;
}
.gap-6 {
gap: 1.5rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-4 {
gap: 1rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.gap-y-8 {
row-gap: 2rem;
}
.gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.gap-y-3 {
row-gap: 0.75rem;
}
.gap-y-10 {
row-gap: 2.5rem;
}
.gap-x-20 {
-moz-column-gap: 5rem;
column-gap: 5rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 1;
}
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 1;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 1;
}
.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 1;
}
.divide-solid > :not([hidden]) ~ :not([hidden]) {
border-style: solid;
}
.divide-dashed > :not([hidden]) ~ :not([hidden]) {
border-style: dashed;
}
.divide-dotted > :not([hidden]) ~ :not([hidden]) {
border-style: dotted;
}
.divide-double > :not([hidden]) ~ :not([hidden]) {
border-style: double;
}
.divide-none > :not([hidden]) ~ :not([hidden]) {
border-style: none;
}
.divide-grey-500 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgba(233, 233, 233, var(--tw-divide-opacity));
}
.place-self-auto {
place-self: auto;
}
.place-self-start {
place-self: start;
}
.place-self-end {
place-self: end;
}
.place-self-center {
place-self: center;
}
.place-self-stretch {
place-self: stretch;
}
.self-auto {
align-self: auto;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.justify-self-auto {
justify-self: auto;
}
.justify-self-start {
justify-self: start;
}
.justify-self-end {
justify-self: end;
}
.justify-self-center {
justify-self: center;
}
.justify-self-stretch {
justify-self: stretch;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-x-visible {
overflow-x: visible;
}
.overflow-y-visible {
overflow-y: visible;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overscroll-auto {
-ms-scroll-chaining: chained;
overscroll-behavior: auto;
}
.overscroll-contain {
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
.overscroll-none {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
.overscroll-y-auto {
overscroll-behavior-y: auto;
}
.overscroll-y-contain {
overscroll-behavior-y: contain;
}
.overscroll-y-none {
overscroll-behavior-y: none;
}
.overscroll-x-auto {
overscroll-behavior-x: auto;
}
.overscroll-x-contain {
overscroll-behavior-x: contain;
}
.overscroll-x-none {
overscroll-behavior-x: none;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-clip {
text-overflow: clip;
}
.whitespace-normal {
white-space: normal;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre {
white-space: pre;
}
.whitespace-pre-line {
white-space: pre-line;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.break-normal {
overflow-wrap: normal;
word-break: normal;
}
.break-words {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
.rounded-sm {
border-radius: 0.125rem;
}
.rounded-full {
border-radius: 9999px;
}
.\!rounded-3xl {
border-radius: 1.5rem !important;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-t-sm {
border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
}
.rounded-b-sm {
border-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
.rounded-t {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.rounded-r {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.rounded-b {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.rounded-l {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.rounded-tl {
border-top-left-radius: 0.25rem;
}
.rounded-tr {
border-top-right-radius: 0.25rem;
}
.rounded-br {
border-bottom-right-radius: 0.25rem;
}
.rounded-bl {
border-bottom-left-radius: 0.25rem;
}
.border {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-t {
border-top-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-r {
border-right-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
.border-l {
border-left-width: 1px;
}
.border-solid {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-dotted {
border-style: dotted;
}
.border-double {
border-style: double;
}
.border-none {
border-style: none;
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgba(5, 51, 255, var(--tw-border-opacity));
}
.border-yellow-500 {
--tw-border-opacity: 1;
border-color: rgba(255, 195, 46, var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.border-gray-900 {
--tw-border-opacity: 1;
border-color: rgba(17, 24, 39, var(--tw-border-opacity));
}
.bg-grey-500 {
--tw-bg-opacity: 1;
background-color: rgba(233, 233, 233, var(--tw-bg-opacity));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(253, 79, 87, var(--tw-bg-opacity));
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
}
.bg-black-900 {
--tw-bg-opacity: 1;
background-color: rgba(11, 8, 63, var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-white {
--tw-gradient-from: #FFFFFF;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}
.decoration-slice {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
.decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.bg-contain {
background-size: contain;
}
.bg-fixed {
background-attachment: fixed;
}
.bg-local {
background-attachment: local;
}
.bg-scroll {
background-attachment: scroll;
}
.bg-clip-border {
background-clip: border-box;
}
.bg-clip-padding {
background-clip: padding-box;
}
.bg-clip-content {
background-clip: content-box;
}
.bg-clip-text {
-webkit-background-clip: text;
background-clip: text;
}
.bg-center {
background-position: center;
}
.bg-repeat {
background-repeat: repeat;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.bg-repeat-x {
background-repeat: repeat-x;
}
.bg-repeat-y {
background-repeat: repeat-y;
}
.bg-repeat-round {
background-repeat: round;
}
.bg-repeat-space {
background-repeat: space;
}
.bg-origin-border {
background-origin: border-box;
}
.bg-origin-padding {
background-origin: padding-box;
}
.bg-origin-content {
background-origin: content-box;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.object-fill {
-o-object-fit: fill;
object-fit: fill;
}
.object-none {
-o-object-fit: none;
object-fit: none;
}
.object-scale-down {
-o-object-fit: scale-down;
object-fit: scale-down;
}
.p-6 {
padding: 1.5rem;
}
.p-4 {
padding: 1rem;
}
.p-2 {
padding: 0.5rem;
}
.p-1 {
padding: 0.25rem;
}
.p-3 {
padding: 0.75rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-9 {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pt-0 {
padding-top: 0px;
}
.pt-8 {
padding-top: 2rem;
}
.pr-12 {
padding-right: 3rem;
}
.pl-20 {
padding-left: 5rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pt-10 {
padding-top: 2.5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-0 {
padding-bottom: 0px;
}
.pt-6 {
padding-top: 1.5rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.align-baseline {
vertical-align: baseline;
}
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.align-bottom {
vertical-align: bottom;
}
.align-text-top {
vertical-align: text-top;
}
.align-text-bottom {
vertical-align: text-bottom;
}
.text-9xl {
font-size: 8rem;
line-height: 1;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-\[8px\] {
font-size: 8px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.normal-case {
text-transform: none;
}
.italic {
font-style: italic;
}
.not-italic {
font-style: normal;
}
.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
--tw-ordinal: var(--tw-empty,/*!*/ /*!*/);
--tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);
--tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);
--tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);
--tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.normal-nums {
font-variant-numeric: normal;
}
.ordinal {
--tw-ordinal: ordinal;
}
.slashed-zero {
--tw-slashed-zero: slashed-zero;
}
.lining-nums {
--tw-numeric-figure: lining-nums;
}
.oldstyle-nums {
--tw-numeric-figure: oldstyle-nums;
}
.proportional-nums {
--tw-numeric-spacing: proportional-nums;
}
.tabular-nums {
--tw-numeric-spacing: tabular-nums;
}
.diagonal-fractions {
--tw-numeric-fraction: diagonal-fractions;
}
.stacked-fractions {
--tw-numeric-fraction: stacked-fractions;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
}
.text-black-900 {
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgba(255, 195, 46, var(--tw-text-opacity));
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgba(23, 187, 126, var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
.\!text-white {
--tw-text-opacity: 1 !important;
color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgba(253, 79, 87, var(--tw-text-opacity));
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.no-underline {
text-decoration: none;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.subpixel-antialiased {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.bg-blend-normal {
background-blend-mode: normal;
}
.bg-blend-multiply {
background-blend-mode: multiply;
}
.bg-blend-screen {
background-blend-mode: screen;
}
.bg-blend-overlay {
background-blend-mode: overlay;
}
.bg-blend-darken {
background-blend-mode: darken;
}
.bg-blend-lighten {
background-blend-mode: lighten;
}
.bg-blend-color-dodge {
background-blend-mode: color-dodge;
}
.bg-blend-color-burn {
background-blend-mode: color-burn;
}
.bg-blend-hard-light {
background-blend-mode: hard-light;
}
.bg-blend-soft-light {
background-blend-mode: soft-light;
}
.bg-blend-difference {
background-blend-mode: difference;
}
.bg-blend-exclusion {
background-blend-mode: exclusion;
}
.bg-blend-hue {
background-blend-mode: hue;
}
.bg-blend-saturation {
background-blend-mode: saturation;
}
.bg-blend-color {
background-blend-mode: color;
}
.bg-blend-luminosity {
background-blend-mode: luminosity;
}
.mix-blend-normal {
mix-blend-mode: normal;
}
.mix-blend-multiply {
mix-blend-mode: multiply;
}
.mix-blend-screen {
mix-blend-mode: screen;
}
.mix-blend-overlay {
mix-blend-mode: overlay;
}
.mix-blend-darken {
mix-blend-mode: darken;
}
.mix-blend-lighten {
mix-blend-mode: lighten;
}
.mix-blend-color-dodge {
mix-blend-mode: color-dodge;
}
.mix-blend-color-burn {
mix-blend-mode: color-burn;
}
.mix-blend-hard-light {
mix-blend-mode: hard-light;
}
.mix-blend-soft-light {
mix-blend-mode: soft-light;
}
.mix-blend-difference {
mix-blend-mode: difference;
}
.mix-blend-exclusion {
mix-blend-mode: exclusion;
}
.mix-blend-hue {
mix-blend-mode: hue;
}
.mix-blend-saturation {
mix-blend-mode: saturation;
}
.mix-blend-color {
mix-blend-mode: color;
}
.mix-blend-luminosity {
mix-blend-mode: luminosity;
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
--tw-ring-inset: inset;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-filter);
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
filter: var(--tw-filter);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-filter);
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-filter);
}
.sepia {
--tw-sepia: sepia(100%);
filter: var(--tw-filter);
}
.filter {
filter: var(--tw-filter);
}
.\!filter {
filter: var(--tw-filter) !important;
}
.filter-none {
filter: none;
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-filter);
backdrop-filter: var(--tw-backdrop-filter);
}
.backdrop-grayscale {
--tw-backdrop-grayscale: grayscale(100%);
-webkit-backdrop-filter: var(--tw-backdrop-filter);
backdrop-filter: var(--tw-backdrop-filter);
}
.backdrop-invert {
--tw-backdrop-invert: invert(100%);
-webkit-backdrop-filter: var(--tw-backdrop-filter);
backdrop-filter: var(--tw-backdrop-filter);
}
.backdrop-sepia {
--tw-backdrop-sepia: sepia(100%);
-webkit-backdrop-filter: var(--tw-backdrop-filter);
backdrop-filter: var(--tw-backdrop-filter);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-filter);
backdrop-filter: var(--tw-backdrop-filter);
}
.backdrop-filter-none {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition {
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-200 {
transition-duration: 200ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.h1{
font-size: 48px;
line-height: 52px;
}
.\!h1{
font-size: 48px !important;
line-height: 52px !important;
}
.h2{
font-size: 36px;
line-height: 40px;
}
.h3{
font-size: 30px;
line-height: 36px;
}
.h4{
font-size: 24px;
line-height: 24px;
}
.large{
font-size: 20px;
line-height: 28px;
}
.xlarge{
font-size: 24px;
line-height: 28px;
}
.label {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.\!label {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em !important;
}
.top-100{ top: 100%; }
/*
** Square container
**/
.ratio_1x1{
position: relative;
}
.ratio_1x1:after{
content: '';
display: block;
padding-bottom: 100%;
}
.ratio_1x1 .content,
.ratio_1x1 > img,
.ratio_1x1 > canvas{
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.\!ratio_1x1 .\!content,
.\!ratio_1x1 > img,
.\!ratio_1x1 > canvas{
position: absolute !important;
width: 100% !important;
height: 100% !important;
-o-object-fit: cover !important;
object-fit: cover !important;
}
.ratio_1x1.object-contain .content,
.ratio_1x1.object-contain > img,
.ratio_1x1.object-contain > canvas{
-o-object-fit: contain;
object-fit: contain;
}
.\!ratio_1x1.\!object-contain .\!content,
.\!ratio_1x1.\!object-contain > img,
.\!ratio_1x1.\!object-contain > canvas{
-o-object-fit: contain !important;
object-fit: contain !important;
}
/*
** 1920x1080 // 16x9 container
**/
.ratio_16x9{
position: relative;
}
.ratio_16x9:after{
content: '';
display: block;
padding-bottom: 56.25%;
}
.ratio_16x9 .content,
.ratio_16x9 > img,
.ratio_16x9 > iframe{
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.\!ratio_16x9 .\!content,
.\!ratio_16x9 > img,
.\!ratio_16x9 > iframe{
position: absolute !important;
width: 100% !important;
height: 100% !important;
-o-object-fit: cover !important;
object-fit: cover !important;
}
.ratio_16x9.object-contain .content,
.ratio_16x9.object-contain > img,
.ratio_16x9.object-contain > iframe{
-o-object-fit: contain;
object-fit: contain;
}
.\!ratio_16x9.\!object-contain .\!content,
.\!ratio_16x9.\!object-contain > img,
.\!ratio_16x9.\!object-contain > iframe{
-o-object-fit: contain !important;
object-fit: contain !important;
}
/*
** Accordion
**/
.accordion{
cursor: pointer;
}
.dropdown{
cursor: pointer;
}
.dropdown:after{
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-image: url('../img/down.svg');
}
.dropdown.active:after{
transform: rotate(180deg);
}
.\!dropdown.\!active:after{
transform: rotate(180deg) !important;
}
.grid-gutter-x {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
@media (min-width: 1024px) {
.grid-gutter-x {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
}
.section-padding-x {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
@media (min-width: 640px) {
.section-padding-x {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
@media (min-width: 768px) {
.section-padding-x {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
}
@media (min-width: 1024px) {
.section-padding-x {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media (min-width: 1280px) {
.section-padding-x {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1536px) {
.section-padding-x {
padding-left: 0px;
padding-right: 0px;
}
}
.grid-gap-0.5 {grid-gap: 0.125rem;}
.grid-gap-1.5 {grid-gap: 0.375rem;}
.grid-gap-2.5 {grid-gap: 0.625rem;}
.grid-gap-3.5 {grid-gap: 0.875rem;}
.grid-gap-x-0.5 {grid-column-gap: 0.125rem;}
.grid-gap-x-1.5 {grid-column-gap: 0.375rem;}
.grid-gap-x-2.5 {grid-column-gap: 0.625rem;}
.grid-gap-x-3.5 {grid-column-gap: 0.875rem;}
.grid-gap-x-12 {grid-column-gap: 3rem;}
.grid-gap-y-0.5 {grid-row-gap: 0.125rem;}
.grid-gap-y-1.5 {grid-row-gap: 0.375rem;}
.grid-gap-y-2.5 {grid-row-gap: 0.625rem;}
.grid-gap-y-3.5 {grid-row-gap: 0.875rem;}
.grid-gap-y-8 {grid-row-gap: 2rem;}
.hover\:cursor-pointer:hover {
cursor: pointer;
}
.hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(5, 51, 255, var(--tw-bg-opacity));
}
.hover\:bg-yellow-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
}
.hover\:bg-grey-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(233, 233, 233, var(--tw-bg-opacity));
}
.hover\:bg-gray-300:hover {
--tw-bg-opacity: 1;
background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
}
.hover\:font-bold:hover {
font-weight: 700;
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.hover\:text-yellow-500:hover {
--tw-text-opacity: 1;
color: rgba(255, 195, 46, var(--tw-text-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.hover\:focus\:text-center:hover:focus {
text-align: center;
}
.focus\:hover\:text-center:focus:hover {
text-align: center;
}
.group:hover .group-hover\:text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:active .group-active\:bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(253, 79, 87, var(--tw-bg-opacity));
}
input[type="checkbox"]:checked ~ .label-checked\:text-blue-500 {
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
}
@media (min-width: 640px) {
.sm\:-right-2\/4 {
right: -50%;
}
.sm\:mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.sm\:mb-8 {
margin-bottom: 2rem;
}
.sm\:h-64 {
height: 16rem;
}
.sm\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
@media (min-width: 768px) {
.md\:absolute {
position: absolute;
}
.md\:sticky {
position: sticky;
}
.md\:top-24 {
top: 6rem;
}
.md\:left-\[40\%\] {
left: 40%;
}
.md\:-top-48 {
top: -12rem;
}
.md\:-top-20 {
top: -5rem;
}
.md\:order-2 {
order: 2;
}
.md\:order-1 {
order: 1;
}
.md\:col-span-6 {
grid-column: span 6 / span 6;
}
.md\:col-span-8 {
grid-column: span 8 / span 8;
}
.md\:col-span-7 {
grid-column: span 7 / span 7;
}
.md\:col-span-4 {
grid-column: span 4 / span 4;
}
.md\:col-span-5 {
grid-column: span 5 / span 5;
}
.md\:col-span-12 {
grid-column: span 12 / span 12;
}
.md\:col-span-10 {
grid-column: span 10 / span 10;
}
.md\:col-span-3 {
grid-column: span 3 / span 3;
}
.md\:col-span-9 {
grid-column: span 9 / span 9;
}
.md\:col-start-3 {
grid-column-start: 3;
}
.md\:col-start-2 {
grid-column-start: 2;
}
.md\:col-start-8 {
grid-column-start: 8;
}
.md\:col-end-11 {
grid-column-end: 11;
}
.md\:col-end-13 {
grid-column-end: 13;
}
.md\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.md\:mx-9 {
margin-left: 2.25rem;
margin-right: 2.25rem;
}
.md\:my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.md\:mt-0 {
margin-top: 0px;
}
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:mt-auto {
margin-top: auto;
}
.md\:mt-14 {
margin-top: 3.5rem;
}
.md\:mb-12 {
margin-bottom: 3rem;
}
.md\:mb-10 {
margin-bottom: 2.5rem;
}
.md\:mb-8 {
margin-bottom: 2rem;
}
.md\:mt-4 {
margin-top: 1rem;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:grid {
display: grid;
}
.md\:hidden {
display: none;
}
.md\:h-full {
height: 100%;
}
.md\:h-80v {
height: 80vh;
}
.md\:h-24 {
height: 6rem;
}
.md\:h-1000 {
height: 1000px;
}
.md\:h-50v {
height: 50vh;
}
.md\:h-56 {
height: 14rem;
}
.md\:max-h-144 {
max-height: 36rem;
}
.md\:min-h-10 {
min-height: 40px;
}
.md\:w-96 {
width: 24rem;
}
.md\:w-max {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.md\:w-6\/12 {
width: 50%;
}
.md\:w-52 {
width: 13rem;
}
.md\:w-1000 {
width: 1000px;
}
.md\:w-80 {
width: 20rem;
}
.md\:w-56 {
width: 14rem;
}
.md\:w-3\/6 {
width: 50%;
}
.md\:w-5\/6 {
width: 83.333333%;
}
.md\:w-4\/5 {
width: 80%;
}
.md\:w-32 {
width: 8rem;
}
.md\:w-full {
width: 100%;
}
.md\:min-w-max {
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.md\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.md\:grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:flex-row-reverse {
flex-direction: row-reverse;
}
.md\:flex-col {
flex-direction: column;
}
.md\:items-end {
align-items: flex-end;
}
.md\:items-center {
align-items: center;
}
.md\:justify-between {
justify-content: space-between;
}
.md\:justify-around {
justify-content: space-around;
}
.md\:gap-x-16 {
-moz-column-gap: 4rem;
column-gap: 4rem;
}
.md\:gap-y-10 {
row-gap: 2.5rem;
}
.md\:self-center {
align-self: center;
}
.md\:rounded-t-none {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.md\:rounded-l-sm {
border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
.md\:border-white {
--tw-border-opacity: 1;
border-color: rgba(255, 255, 255, var(--tw-border-opacity));
}
.md\:bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.md\:p-4 {
padding: 1rem;
}
.md\:p-8 {
padding: 2rem;
}
.md\:p-12 {
padding: 3rem;
}
.md\:py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.md\:px-9 {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.md\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.md\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.md\:py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.md\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.md\:pb-6 {
padding-bottom: 1.5rem;
}
.md\:pb-12 {
padding-bottom: 3rem;
}
.md\:pt-16 {
padding-top: 4rem;
}
.md\:pb-16 {
padding-bottom: 4rem;
}
.md\:text-center {
text-align: center;
}
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.md\:text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.md\:text-gray-400 {
--tw-text-opacity: 1;
color: rgba(156, 163, 175, var(--tw-text-opacity));
}
.md\:opacity-0 {
opacity: 0;
}
.md\:shadow-none {
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.md\:h2{
font-size: 36px;
line-height: 40px;
}
.md\:ratio_1x1{
position: relative;
}
.md\:ratio_1x1:after{
content: '';
display: block;
padding-bottom: 100%;
}
.ratio_1x1 .md\:content,
.md\:ratio_1x1 > img,
.md\:ratio_1x1 > canvas{
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.ratio_1x1 .md\:content,
.md\:ratio_1x1 > img,
.md\:ratio_1x1 > canvas{
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.ratio_1x1 .md\:content,
.md\:ratio_1x1 > img,
.md\:ratio_1x1 > canvas{
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.ratio_1x1.object-contain .md\:content,
.ratio_1x1.md\:object-contain > img,
.ratio_1x1.md\:object-contain > canvas{
-o-object-fit: contain;
object-fit: contain;
}
.ratio_1x1.object-contain .md\:content,
.ratio_1x1.md\:object-contain > img,
.ratio_1x1.md\:object-contain > canvas{
-o-object-fit: contain;
object-fit: contain;
}
.ratio_1x1.object-contain .md\:content,
.ratio_1x1.md\:object-contain > img,
.ratio_1x1.md\:object-contain > canvas{
-o-object-fit: contain;
object-fit: contain;
}
.md\:grid-gutter-x {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
@media (min-width: 1024px) {
.md\:grid-gutter-x {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
}
.md\:section-padding-x {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
@media (min-width: 640px) {
.md\:section-padding-x {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
@media (min-width: 768px) {
.md\:section-padding-x {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
}
@media (min-width: 1024px) {
.md\:section-padding-x {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media (min-width: 1280px) {
.md\:section-padding-x {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1536px) {
.md\:section-padding-x {
padding-left: 0px;
padding-right: 0px;
}
}
.md\:hover\:bg-yellow-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
}
.md\:hover\:bg-\[\#D1D5DB\]:hover {
--tw-bg-opacity: 1;
background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
}
.md\:hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
}
.group:hover .md\:group-hover\:block {
display: block;
}
.group:hover .md\:group-hover\:translate-y-full {
--tw-translate-y: 100%;
transform: var(--tw-transform);
}
.group:hover .md\:group-hover\:-rotate-180 {
--tw-rotate: -180deg;
transform: var(--tw-transform);
}
.group:hover .md\:group-hover\:border-blue-500 {
--tw-border-opacity: 1;
border-color: rgba(5, 51, 255, var(--tw-border-opacity));
}
.group:hover .md\:group-hover\:border-yellow-500 {
--tw-border-opacity: 1;
border-color: rgba(255, 195, 46, var(--tw-border-opacity));
}
.group:hover .md\:group-hover\:text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.group:hover .md\:group-hover\:text-blue-500 {
--tw-text-opacity: 1;
color: rgba(5, 51, 255, var(--tw-text-opacity));
}
.group:hover .md\:group-hover\:text-yellow-500 {
--tw-text-opacity: 1;
color: rgba(255, 195, 46, var(--tw-text-opacity));
}
.group:hover .md\:group-hover\:opacity-100 {
opacity: 1;
}
}
@media (min-width: 1024px) {
.lg\:absolute {
position: absolute;
}
.lg\:relative {
position: relative;
}
.lg\:top-6 {
top: 1.5rem;
}
.lg\:left-6 {
left: 1.5rem;
}
.lg\:-top-7 {
top: -1.75rem;
}
.lg\:-right-1\/3 {
right: -33.333333%;
}
.lg\:-top-10 {
top: -2.5rem;
}
.lg\:-top-12 {
top: -3rem;
}
.lg\:-top-16 {
top: -4rem;
}
.lg\:left-2 {
left: 0.5rem;
}
.lg\:-bottom-52 {
bottom: -13rem;
}
.lg\:-left-32 {
left: -8rem;
}
.lg\:-top-20 {
top: -5rem;
}
.lg\:right-0 {
right: 0px;
}
.lg\:right-48 {
right: 12rem;
}
.lg\:bottom-0 {
bottom: 0px;
}
.lg\:left-0 {
left: 0px;
}
.lg\:left-full {
left: 100%;
}
.lg\:top-full {
top: 100%;
}
.lg\:left-12 {
left: 3rem;
}
.lg\:top-24 {
top: 6rem;
}
.lg\:bottom-12 {
bottom: 3rem;
}
.lg\:right-4 {
right: 1rem;
}
.lg\:z-10 {
z-index: 10;
}
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:col-span-10 {
grid-column: span 10 / span 10;
}
.lg\:col-span-6 {
grid-column: span 6 / span 6;
}
.lg\:col-span-8 {
grid-column: span 8 / span 8;
}
.lg\:col-start-2 {
grid-column-start: 2;
}
.lg\:col-start-3 {
grid-column-start: 3;
}
.lg\:col-end-11 {
grid-column-end: 11;
}
.lg\:m-6 {
margin: 1.5rem;
}
.lg\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.lg\:mx-12 {
margin-left: 3rem;
margin-right: 3rem;
}
.lg\:mt-0 {
margin-top: 0px;
}
.lg\:mb-0 {
margin-bottom: 0px;
}
.lg\:mb-10 {
margin-bottom: 2.5rem;
}
.lg\:mt-20 {
margin-top: 5rem;
}
.lg\:block {
display: block;
}
.lg\:flex {
display: flex;
}
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:h-full {
height: 100%;
}
.lg\:h-32 {
height: 8rem;
}
.lg\:h-1200 {
height: 1200px;
}
.lg\:h-80v {
height: 80vh;
}
.lg\:h-96 {
height: 24rem;
}
.lg\:h-250 {
height: 250px;
}
.lg\:h-600 {
height: 600px;
}
.lg\:h-150 {
height: 150px;
}
.lg\:h-auto {
height: auto;
}
.lg\:h-80 {
height: 20rem;
}
.lg\:h-24 {
height: 6rem;
}
.lg\:max-h-144 {
max-height: 36rem;
}
.lg\:w-4\/5 {
width: 80%;
}
.lg\:w-max {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.lg\:w-1200 {
width: 1200px;
}
.lg\:w-\[40\%\] {
width: 40%;
}
.lg\:w-\[60\%\] {
width: 60%;
}
.lg\:w-96 {
width: 24rem;
}
.lg\:w-250 {
width: 250px;
}
.lg\:w-600 {
width: 600px;
}
.lg\:w-48 {
width: 12rem;
}
.lg\:w-80 {
width: 20rem;
}
.lg\:w-150 {
width: 150px;
}
.lg\:w-56 {
width: 14rem;
}
.lg\:w-3\/5 {
width: 60%;
}
.lg\:w-24 {
width: 6rem;
}
.lg\:w-52 {
width: 13rem;
}
.lg\:min-w-max {
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
}
.lg\:max-w-md {
max-width: 28rem;
}
.lg\:flex-shrink-0 {
flex-shrink: 0;
}
.lg\:-translate-y-10 {
--tw-translate-y: -2.5rem;
transform: var(--tw-transform);
}
.lg\:transform {
transform: var(--tw-transform);
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-col {
flex-direction: column;
}
.lg\:items-start {
align-items: flex-start;
}
.lg\:items-end {
align-items: flex-end;
}
.lg\:items-center {
align-items: center;
}
.lg\:justify-start {
justify-content: flex-start;
}
.lg\:justify-end {
justify-content: flex-end;
}
.lg\:justify-center {
justify-content: center;
}
.lg\:justify-between {
justify-content: space-between;
}
.lg\:gap-x-0 {
-moz-column-gap: 0px;
column-gap: 0px;
}
.lg\:gap-y-20 {
row-gap: 5rem;
}
.lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.lg\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.lg\:divide-white > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgba(255, 255, 255, var(--tw-divide-opacity));
}
.lg\:self-center {
align-self: center;
}
.lg\:overflow-hidden {
overflow: hidden;
}
.lg\:overflow-visible {
overflow: visible;
}
.lg\:rounded-full {
border-radius: 9999px;
}
.lg\:rounded-none {
border-radius: 0px;
}
.lg\:rounded-t-none {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.lg\:rounded-l-sm {
border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
.lg\:bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgba(23, 187, 126, var(--tw-bg-opacity));
}
.lg\:bg-gray-200\/0 {
background-color: rgba(229, 231, 235, 0);
}
.lg\:bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgba(255, 195, 46, var(--tw-bg-opacity));
}
.lg\:p-4 {
padding: 1rem;
}
.lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.lg\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.lg\:py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.lg\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.lg\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.lg\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.lg\:py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.lg\:pt-6 {
padding-top: 1.5rem;
}
.lg\:pr-12 {
padding-right: 3rem;
}
.lg\:pl-6 {
padding-left: 1.5rem;
}
.lg\:pb-20 {
padding-bottom: 5rem;
}
.lg\:pt-20 {
padding-top: 5rem;
}
.lg\:text-center {
text-align: center;
}
.lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.lg\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.lg\:text-black-900 {
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
.lg\:text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.lg\:opacity-0 {
opacity: 0;
}
.lg\:h1{
font-size: 48px;
line-height: 52px;
}
.lg\:h2{
font-size: 36px;
line-height: 40px;
}
.lg\:h3{
font-size: 30px;
line-height: 36px;
}
.lg\:large{
font-size: 20px;
line-height: 28px;
}
.lg\:grid-gutter-x {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
@media (min-width: 1024px) {
.lg\:grid-gutter-x {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
}
.lg\:hover\:text-black-900:hover {
--tw-text-opacity: 1;
color: rgba(11, 8, 63, var(--tw-text-opacity));
}
.group:hover .lg\:group-hover\:-translate-y-3\/5 {
--tw-translate-y: -60%;
transform: var(--tw-transform);
}
.group:hover .lg\:group-hover\:-translate-x-3\/4 {
--tw-translate-x: -75%;
transform: var(--tw-transform);
}
.group:hover .lg\:group-hover\:bg-gray-200\/90 {
background-color: rgba(229, 231, 235, 0.9);
}
.group:hover .lg\:group-hover\:opacity-100 {
opacity: 1;
}
}
@media (min-width: 1280px) {
.xl\:-right-1\/3 {
right: -33.333333%;
}
.xl\:right-8 {
right: 2rem;
}
.xl\:-top-56 {
top: -14rem;
}
.xl\:col-span-5 {
grid-column: span 5 / span 5;
}
.xl\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.xl\:h-80 {
height: 20rem;
}
.xl\:h-64 {
height: 16rem;
}
.xl\:h-286 {
height: 286px;
}
.xl\:w-3\/5 {
width: 60%;
}
.xl\:w-5\/12 {
width: 41.666667%;
}
.xl\:w-286 {
width: 286px;
}
.xl\:rounded-tr-none {
border-top-right-radius: 0px;
}
.xl\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1536px) {
.\32xl\:-top-20 {
top: -5rem;
}
.\32xl\:-left-20 {
left: -5rem;
}
.\32xl\:-left-24 {
left: -6rem;
}
.\32xl\:right-0 {
right: 0px;
}
.\32xl\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.\32xl\:h-96 {
height: 24rem;
}
.\32xl\:h-1500 {
height: 1500px;
}
.\32xl\:h-72 {
height: 18rem;
}
.\32xl\:w-1500 {
width: 1500px;
}
.\32xl\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
}