.ct-section { width:100%; background-size:cover; background-repeat:repeat; } .ct-section>.ct-section-inner-wrap { display:flex; flex-direction:column; align-items:flex-start; } .ct-div-block { display:flex; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .ct-new-columns { display:flex; width:100%; flex-direction:row; align-items:stretch; justify-content:center; flex-wrap:wrap; } .ct-link-text { display:inline-block; } .ct-link { display:flex; flex-wrap:wrap; text-align:center; text-decoration:none; flex-direction:column; align-items:center; justify-content:center; } .ct-link-button { display:inline-block; text-align:center; text-decoration:none; } .ct-link-button { background-color: #1e73be; border: 1px solid #1e73be; color: #ffffff; padding: 10px 16px; } .ct-image { max-width:100%; } .ct-fancy-icon>svg { width:55px;height:55px;} .ct-inner-content { width:100%; } .ct-slide { display:flex; flex-wrap:wrap; text-align:center; flex-direction:column; align-items:center; justify-content:center; } .ct-nestable-shortcode { display:flex; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-comments { width:100%; text-align:left; } .oxy-comment-form { width:100%; } .oxy-login-form { width:100%; } .oxy-search-form { width:100%; } .oxy-tabs-contents { display:flex; width:100%; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-tab { display:flex; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-tab-content { display:flex; width:100%; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-testimonial { width:100%; } .oxy-icon-box { width:100%; } .oxy-pricing-box { width:100%; } .oxy-posts-grid { width:100%; } .oxy-gallery { width:100%; } .ct-slider { width:100%; } .oxy-tabs { display:flex; flex-wrap:nowrap; flex-direction:row; align-items:stretch; } .ct-modal { flex-direction:column; align-items:flex-start; } .ct-span { display:inline-block; text-decoration:inherit; } .ct-widget { width:100%; } .oxy-dynamic-list { width:100%; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ct-div-block, .oxy-post-content, .ct-text-block, .ct-headline, .oxy-rich-text, .ct-link-text { max-width: 100%; } img { flex-shrink: 0; } body * { min-height: 1px; } } .oxy-testimonial { flex-direction: row; align-items: center; } .oxy-testimonial .oxy-testimonial-photo-wrap { order: 1; } .oxy-testimonial .oxy-testimonial-photo { width: 125px; height: 125px; margin-right: 20px; } .oxy-testimonial .oxy-testimonial-photo-wrap, .oxy-testimonial .oxy-testimonial-author-wrap, .oxy-testimonial .oxy-testimonial-content-wrap { align-items: flex-start; text-align: left; } .oxy-testimonial .oxy-testimonial-text { margin-bottom:8px;font-size: 21px; line-height: 1.4; -webkit-font-smoothing: subpixel-antialiased; } .oxy-testimonial .oxy-testimonial-author { font-size: 18px; -webkit-font-smoothing: subpixel-antialiased; } .oxy-testimonial .oxy-testimonial-author-info { font-size: 12px; -webkit-font-smoothing: subpixel-antialiased; } .oxy-icon-box { text-align: left; flex-direction: column; } .oxy-icon-box .oxy-icon-box-icon { margin-bottom: 12px; align-self: flex-start; } .oxy-icon-box .oxy-icon-box-heading { font-size: 21px; margin-bottom: 12px; } .oxy-icon-box .oxy-icon-box-text { font-size: 16px; margin-bottom: 12px;align-self: flex-start; } .oxy-icon-box .oxy-icon-box-link { margin-top: 20px; } /* GLOBALS */ .oxy-pricing-box .oxy-pricing-box-section { padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; text-align: center; } .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price { justify-content: center; } /* IMAGE */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic { justify-content: center; } /* TITLE */ .oxy-pricing-box .oxy-pricing-box-title-title { font-size: 48px; } .oxy-pricing-box .oxy-pricing-box-title-subtitle { font-size: 24px; } /* PRICE */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price { flex-direction: row; } .oxy-pricing-box .oxy-pricing-box-currency { font-size: 28px; } .oxy-pricing-box .oxy-pricing-box-amount-main { font-size: 80px; line-height: 0.7; } .oxy-pricing-box .oxy-pricing-box-amount-decimal { font-size: 13px; } .oxy-pricing-box .oxy-pricing-box-term { font-size: 16px; } .oxy-pricing-box .oxy-pricing-box-sale-price { font-size: 12px; color: rgba(0,0,0,0.5); margin-bottom: 20px; } /* CONTENT */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content { font-size: 16px; color: rgba(0,0,0,0.5); } /* CTA */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta { justify-content: center; } .oxy-progress-bar .oxy-progress-bar-background { background-color: #000000; background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent); animation: none 0s paused; } .oxy-progress-bar .oxy-progress-bar-progress-wrap { width: 85%; } .oxy-progress-bar .oxy-progress-bar-progress { background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused; background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent); } .oxy-progress-bar .oxy-progress-bar-overlay-text { font-size: 30px; font-weight: 900; -webkit-font-smoothing: subpixel-antialiased; } .oxy-progress-bar .oxy-progress-bar-overlay-percent { font-size: 12px; } .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide { padding: 0px; } .oxy-superbox .oxy-superbox-secondary, .oxy-superbox .oxy-superbox-primary { transition-duration: 0.5s; } .oxy-shape-divider { width: 0px; height: 0px; } .oxy_shape_divider svg { width: 100%; } .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{ box-shadow:px px px px ;} .oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{ transition-duration:0.4s; } .oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{ margin-left:0px; } .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{ width:30px; height:30px; } .oxy-pro-menu .oxy-pro-menu-mobile-open-icon{ padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:15px; } .oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{ transition-duration:0.4s; } .oxy-pro-menu .oxy-pro-menu-mobile-close-icon{ top:20px; left:20px; } .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{ width:24px; height:24px; } .oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{ transition-duration:0.4s; } .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{ background-color:#ffffff; } .oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{ background-image:url(); } .oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{ font-size:24px; } .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{ background-color:rgba(0,0,0,0.2); border-top-style:solid; } .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{ flex-direction: row; } .oxy-pro-menu .oxy-pro-menu-container .menu-item a{ text-align: left; justify-content: flex-start; } .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{ align-items: flex-start; } .oxy-pro-menu .oxy-pro-menu-off-canvas-container{ top: 0; bottom: 0; right: auto; left: 0; } .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{ text-align: left; justify-content: flex-start; } .oxy-site-navigation { --oxynav-brand-color:#4831B0; --oxynav-neutral-color:#FFFFFF; --oxynav-activehover-color:#EFEDF4; --oxynav-background-color:#4831B0; --oxynav-border-radius:0px; --oxynav-other-spacing:8px; --oxynav-transition-duration:0.3s; --oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93); } .oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{ text-align:left; } .oxy-site-navigation > ul{ left: 0; } .oxy-site-navigation { --oxynav-animation-name: none; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ background-color: var(--oxynav-brand-color); transition: var(--oxynav-transition-duration); margin-left: var(--oxynav-other-spacing); border: none; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ background: transparent; border: 1px solid currentColor; transition: var(--oxynav-transition-duration); margin-left: var(--oxynav-other-spacing); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{ filter: invert(0) !important; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{ background-color: var(--oxynav-activehover-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{ color: var(--oxynav-neutral-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{ color: var(--oxynav-neutral-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{ display: none; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{ display: none; } .ct-section-inner-wrap, .oxy-header-container{ max-width: 1440px; } body {font-family: 'Raleway';}body {line-height: 1.7;font-size: var(--text-base) ;font-weight: 400;color: #535353;}.oxy-nav-menu-hamburger-line {background-color: #535353;}h1, h2, h3, h4, h5, h6 {font-family: 'Rubik';font-size: var(--text-4xlarge) ;font-weight: 600;line-height: 1.1;color: #353535;}h2, h3, h4, h5, h6{font-size: var(--text-2xlarge) ;font-weight: 500;}h3, h4, h5, h6{font-size: var(--text-xlarge) ;font-weight: 500;}h4, h5, h6{font-size: var(--text-large) ;font-weight: 500;}h5, h6{font-size: var(--text-base) ;font-weight: 500;}h6{font-size: var(--text-small) ;font-weight: 500;}a {color: #fd9234;text-decoration: none;}a:hover {color: #ff9d37;text-decoration: none;}.ct-link-text {color: #fd9234;text-decoration: ;}.ct-link-text:hover {color: #ff9d37;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: px;}.ct-section-inner-wrap { }.ct-new-columns > .ct-div-block { }.oxy-header-container { }@media (max-width: 992px) { .ct-columns-inner-wrap { display: block !important; } .ct-columns-inner-wrap:after { display: table; clear: both; content: ""; } .ct-column { width: 100% !important; margin: 0 !important; } .ct-columns-inner-wrap { margin: 0 !important; } } .oxel_toc__primary { color:#353535; text-transform:none; padding-left:0px; width:100%; padding-bottom:0px; border-top-color:color(19); border-right-color:color(19); border-bottom-color:color(22); border-left-color:color(19); border-bottom-style:none; border-bottom-width:1px; margin-bottom:8px; padding-top:0px; border-left-width:2px; border-left-style:none; padding-right:0px; border-top-style:none; border-right-style:none; text-align:left; font-size:var(--text-small) ; line-height:1.3; } .oxel_toc__sub { color:#353535; margin-left:1.8rem; font-size:var(--text-small) ; line-height:1.3; margin-bottom:0.8rem; } .oxel_toc__sub__2 { margin-left:32px; } .oxel_toc__sub__1 { color:#353535; } .oxel_toc__container { width:100%; background-color:#dff1f3; } .oxel_toc__sub__3 { margin-left:48px; } .oxel_toc__sub__4 { margin-left:64px; } .oxel_toc__template { } .oxel_icon_button__container:hover{ background-color:#ffc364; border-top-color:#ff9d37; border-right-color:#ff9d37; border-bottom-color:#ff9d37; border-left-color:#ff9d37; } .oxel_icon_button__container { padding-top:var(--space-xsmall) ; padding-left:var(--space-base) ; padding-right:var(--space-base) ; padding-bottom:var(--space-xsmall) ; transition-duration:0.3s; transition-timing-function:ease-in-out; border-radius:var(--base-radius) ; border-top-color:#ff9d37; border-right-color:#ff9d37; border-bottom-color:#ff9d37; border-left-color:#ff9d37; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; background-color:#ff9d37; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; } .oxel_icon_button__container:not(.ct-section):not(.oxy-easy-posts), .oxel_icon_button__container.oxy-easy-posts .oxy-posts, .oxel_icon_button__container.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; } .oxel_icon_button_text:hover{ } .oxel_icon_button_text { color:#353535; font-weight:500; } .oxel_icon_button_icon:hover{ } .oxel_icon_button_icon { color: #353535;}.oxel_icon_button_icon >svg {width: 32px;height: 32px;}.oxel_icon_button_icon { margin-right:8px; } .oxel_horizontal_divider { margin-top:16px; margin-bottom:16px; } .oxel_horizontal_divider:not(.ct-section):not(.oxy-easy-posts), .oxel_horizontal_divider.oxy-easy-posts .oxy-posts, .oxel_horizontal_divider.ct-section .ct-section-inner-wrap{ display:flex; } .oxel_horizontal_divider__line { background-color:#d3d3d3; width:100%; max-width:100%; height:1px; } .oxel_horizontal_divider__icon { color: #98a1a8;}.oxel_horizontal_divider__icon >svg {width: 23px;height: 23px;}.oxel_horizontal_divider__icon { flex-shrink: 0; } .oxel_horizontal_divider__icon:not(.ct-section):not(.oxy-easy-posts), .oxel_horizontal_divider__icon.oxy-easy-posts .oxy-posts, .oxel_horizontal_divider__icon.ct-section .ct-section-inner-wrap{ display:flex; } .oxel_flipbox { width:100%; position:relative; } .oxel_flipbox__front { background-image:linear-gradient(rgba(25,22,22,0.2), rgba(25,22,22,0.2)), url(http://elements.oxy.host/wp-content/uploads/sites/52/2020/07/atmosphere-blue-cloud-clouds-601798.jpg);background-size:auto, cover; width:100%; text-align:center; padding-top:32px; padding-left:32px; padding-right:32px; padding-bottom:32px; background-position:50% 50%; } .oxel_flipbox__front:not(.ct-section):not(.oxy-easy-posts), .oxel_flipbox__front.oxy-easy-posts .oxy-posts, .oxel_flipbox__front.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .oxel_flipbox__back { background-size: cover;transform:rotateY(180deg); width:100%; text-align:center; padding-top:32px; padding-left:32px; padding-right:32px; padding-bottom:32px; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:#d3d3d3; background-position:50% 50%; } .oxel_flipbox__back:not(.ct-section):not(.oxy-easy-posts), .oxel_flipbox__back.oxy-easy-posts .oxy-posts, .oxel_flipbox__back.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .oxel_number_counter { } .oxel_number_counter__number { font-family:Rubik; } .oxel_number_counter__label { font-family:Raleway; } .oxel_back_to_top_container:hover{ transform:scale(1.1,1.1) translateY(-3px); background-color:#ffc364; } .oxel_back_to_top_container { width:48px; height:48px; border-radius:50%; position:fixed; z-index:1500; right:32px; bottom:32px; text-align:center; overflow:hidden; transition-duration:0.3s; transition-timing-function:ease-in-out; background-color:#ff9d37; box-shadow:0px 4px 17px -10px #1e1e1e; } .oxel_back_to_top_container:not(.ct-section):not(.oxy-easy-posts), .oxel_back_to_top_container.oxy-easy-posts .oxy-posts, .oxel_back_to_top_container.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; } @media (max-width: 767px) { .oxel_back_to_top_container { } .oxel_back_to_top_container:not(.ct-section):not(.oxy-easy-posts), .oxel_back_to_top_container.oxy-easy-posts .oxy-posts, .oxel_back_to_top_container.ct-section .ct-section-inner-wrap{ display:none; } } .oxel_back_to_top_icon { color: #f8f8f8;}.oxel_back_to_top_icon >svg {width: 23px;height: 23px;}.oxel_back_to_top_icon { } .oxy-superbox-primary { } .oxy-superbox-secondary { } .transition { transition-duration:0.5s; } .section-fit { background-size: cover; background-repeat:no-repeat; background-attachment:scroll; width:100%; min-height:100vh; height:100vh; text-align:center; background-position:50% 50%; } .section-fit .ct-section-inner-wrap { padding-top: 0; padding-bottom: 0; } .section-fit:not(.ct-section):not(.oxy-easy-posts), .section-fit.oxy-easy-posts .oxy-posts, .section-fit.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; } @media (max-width: 991px) { .section-fit { min-height:90vh; height:90vh; } } @media (max-width: 767px) { .section-fit { } } .mask1 { } .mask3 { } .mask4 { } .mask2 { } .mask7 { } .mask6 { } .button-pri--s_wrapper:hover{ background-color:#ffce8d; color:#535353; } .button-pri--s_wrapper { background-color:#ff9d37; padding-left:var(--space-xsmall) ; padding-right:var(--space-xsmall) ; border-radius:var(--radius-xsmall) ; transition-duration:0.3s; transition-timing-function:ease-in-out; padding-top:0.2rem; padding-bottom:0.2rem; } .button-pri--s_wrapper:not(.ct-section):not(.oxy-easy-posts), .button-pri--s_wrapper.oxy-easy-posts .oxy-posts, .button-pri--s_wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; } .button-pri--s_icon { color: #353535;}.button-pri--s_icon >svg {width: 20px;height: 20px;}.button-pri--s_icon { padding-right:4px; } .button-pri--s_text { font-size:var(--text-small) ; } .button-pri--l_wrapper:hover{ background-color:#ff9d37; border-top-color:color(12); border-right-color:color(12); border-bottom-color:color(12); border-left-color:color(12); border-top-width:2px; border-right-width:2px; border-bottom-width:2px; border-left-width:2px; } .button-pri--l_wrapper { background-color:#fd9234; padding-left:var(--space-base) ; padding-right:var(--space-base) ; padding-top:var(--space-small) ; padding-bottom:var(--space-small) ; border-radius:var(--radius-large) ; transition-duration:0.3s; transition-timing-function:ease-in-out; border-top-color:color(12); border-right-color:color(12); border-bottom-color:color(12); border-left-color:color(12); border-top-width:2px; border-right-width:2px; border-bottom-width:2px; border-left-width:2px; } .button-pri--l_wrapper:not(.ct-section):not(.oxy-easy-posts), .button-pri--l_wrapper.oxy-easy-posts .oxy-posts, .button-pri--l_wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; } .button-pri--l_icon { color: #353535;}.button-pri--l_icon >svg {width: 40px;height: 40px;}.button-pri--l_icon { padding-right:10px; } .button-pri--l_text { font-family:Rubik; color:#353535; font-size:var(--text-large) ; } .text--xsmall { } .text--small { } .text--base { } .text--large { font-weight:500; } .text--xlarge { } .text--2xlarge:after{ font-size:var(--text-base) ; content:""; } .text--2xlarge { } .text--3xlarge { } .text--4xlarge { } .text--5xlarge { } .text--mega { } .pad--xsmall { } .pad--small { } .pad--base { } .pad--large { } .pad--xlarge { } .pad--xxlarge { } .pad--none { } .pad-section--xsmall { } .pad-section--small { } .pad-section--large { } .pad-section--xlarge { } .pad-section--xxlarge { } .pad-section--none { } .pad-header--xsmall { } .pad-header--small { } .pad-header--base { } .pad-header--large { } .pad-header--xlarge { } .pad-header--xxlarge { } .margin-top--xsmall { } .margin-top--small { } .margin-top--base { } .margin-top--large { } .margin-top--xlarge { } .margin-top--xxlarge { } .margin-bottom--xsmall { } .margin-bottom--small { } .margin-bottom--base { } .margin-bottom--large { } .margin-bottom--xlarge { } .margin-bottom--xxlarge { } .margin-left--xsmall { } .margin-left--small { } .margin-left--base { } .margin-left--large { } .margin-left--xlarge { } .margin-left--xxlarge { } .margin-right--xsmall { } .margin-right--small { } .margin-right--base { } .margin-right--large { } .margin-right--xlarge { } .margin-right--xxlarge { } .owl--xsmall { } .owl--small { } .owl--base { } .owl--large { } .owl--xlarge { } .owl--xxlarge { } .breakout--small { } .breakout--medium { } .breakout--large { } .breakout--xlarge { } .breakout--full { } .width--xsmall { } .width--small { } .width--medium { } .width--large { } .width--xlarge { } .width--xxlarge { } .width--vp-max { } .width--50 { } .width--full { } .width--auto { } .height--30 { } .height--40 { } .height--50 { } .height--60 { } .height--70 { } .height--80 { } .height--90 { } .height--full { } .max-height--30 { } .max-height--40 { } .max-height--50 { } .max-height--60 { } .max-height--70 { } .max-height--80 { } .max-height--90 { } .object-fit--cover { } .object-fit--contain { } .object-fit--top-left { } .object-fit--top-center { } .object-fit--top-right { } .object-fit--center-left { } .object-fit--center-right { } .object-fit--bottom-left { } .object-fit--bottom-center { } .object-fit--bottom-right { } .rounded--xsmall { } .rounded--small { } .rounded--base { } .rounded--large { } .rounded--xlarge { } .rounded--xxlarge { } .rounded--circle { width:10rem; } .rounded--none { } .opacity--5 { } .opacity--10 { } .opacity--20 { } .opacity--30 { } .opacity--40 { } .opacity--50 { } .opacity--60 { } .opacity--70 { } .opacity--80 { } .opacity--90 { } .opacity--95 { } .center--all { } .center--all:not(.ct-section):not(.oxy-easy-posts), .center--all.oxy-easy-posts .oxy-posts, .center--all.ct-section .ct-section-inner-wrap{ display:flex; } .center--bottom { } .center--top { } .center--left { } .center--right { } .gap--xsmall { } .gap--small { } .gap--base { } .gap--large { } .gap--xlarge { } .gap--xxlarge { } .grid--auto-2 { } .grid--auto-3 { } .grid--auto-4 { } .grid--auto-5 { } .grid--auto-6 { } .grid--auto-1-2 { } .grid--auto-2-1 { } .grid--auto-1-3 { } .grid--auto-3-1 { } .grid--auto-2-3 { } .grid--auto-3-2 { } .order--first-s { } .order--first-m { } .order--first-l { } .box-shadow--small { } .box-shadow--medium { } .box-shadow--large { } .box-shadow--xlarge { } .text-shadow--small { } .text-shadow--medium { } .text-shadow--large { } .text-shadow--xlarge { } .bgradient-primary { background-image: linear-gradient(#ffe1b9, #c46300);} .bgradient-secondary { background-image: linear-gradient(#b0dedf, #007474);} .grid--1 { } .grid--2 { } .grid--3 { } .grid--4 { } .grid--5 { } .grid--6 { } .grid--1-2 { } .grid--2-1 { } .grid--1-3 { } .grid--3-1 { } .grid--2-3 { } .grid--3-2 { } .grid--m-1 { } .grid--l-1 { } .button-plight_wrapper:hover{ background-color:#ffce8d; } .button-plight_wrapper { padding-top:var(--space-xsmall) ; padding-left:var(--space-base) ; padding-right:var(--space-base) ; padding-bottom:var(--space-xsmall) ; border-radius:var(--base-radius) ; background-color:#ffe1b9; transition-duration:0.3s; transition-timing-function:ease-in-out; border-top-color:#ffce8d; border-right-color:#ffce8d; border-bottom-color:#ffce8d; border-left-color:#ffce8d; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; } .button-plight_wrapper:not(.ct-section):not(.oxy-easy-posts), .button-plight_wrapper.oxy-easy-posts .oxy-posts, .button-plight_wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; } .button-slight_wrapper:hover{ background-color:#7bc9cb; } .button-slight_wrapper { background-color:#b0dedf; padding-top:var(--space-xsmall) ; padding-bottom:var(--space-xsmall) ; padding-left:var(--space-base) ; padding-right:var(--space-base) ; border-radius:var(--base-radius) ; border-top-color:#7bc9cb; border-right-color:#7bc9cb; border-bottom-color:#7bc9cb; border-left-color:#7bc9cb; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; transition-duration:0.3s; transition-timing-function:ease-in-out; } .button-slight_wrapper:not(.ct-section):not(.oxy-easy-posts), .button-slight_wrapper.oxy-easy-posts .oxy-posts, .button-slight_wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; } .grid--l-2 { } .grid--s-1 { } .bgradient-shade { background-image: linear-gradient(#d3d3d3, #8e8e8e);} .bgradient-plight { background-image: radial-gradient( ellipse farthest-corner, #fff3e3, #ffe1b9);} .bgradient-slight { background-image: radial-gradient( ellipse farthest-corner, #dff1f3, #b0dedf);} .text-display--h1 { font-family:Rubik; font-size:var(--text-4xlarge) ; font-weight:600; } .text-display--h2 { font-family:Rubik; font-size:var(--text-3xlarge) ; font-weight:600; } .text-display--h3:after{ font-size:19px; content:""; } .text-display--h3 { font-family:Rubik; font-size:var(--text-2xlarge) ; font-weight:600; } .text-display--h4 { font-family:Rubik; font-size:var(--text-xlarge) ; font-weight:600; } .text-display--h5 { font-family:Rubik; font-size:var(--text-large) ; font-weight:500; } .text-display--base { font-family:Rubik; font-weight:600; } .text-script--h1 { font-family:South-Korea-Script; font-size:var(--text-mega) ; font-weight:600; } .text-script--h2 { font-family:South-Korea-Script; font-size:var(--text-5xlarge) ; font-weight:600; } .text-script--h3 { font-family:South-Korea-Script; font-size:var(--text-4xlarge) ; font-weight:600; } .text-script--h4 { font-family:South-Korea-Script; font-size:var(--text-3xlarge) ; } .text-script--h5 { font-family:South-Korea-Script; font-size:var(--text-2xlarge) ; font-weight:500; margin-bottom:0px; } .text-script--h6 { font-family:South-Korea-Script; font-size:var(--text-xlarge) ; font-weight:400; } .grid--xl-2 { } .margin-auto { margin-left:auto; margin-right:auto; } .grid--s-2 { } .grid--m-2 { } .grid--l-3 { } .sticky { } .sticky-top--small { } .sticky-top--medium { } .sticky-top--large { } .button-menu__wrapper:hover{ border-top-color:#d3d3d3; border-right-color:#d3d3d3; border-bottom-color:#d3d3d3; border-left-color:#d3d3d3; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; background-color:#ffe1b9; } .button-menu__wrapper { transition-duration:0.3s; transition-timing-function:ease-in-out; background-color:#efefef; border-radius:var(--radius-small) ; border-top-color:#d3d3d3; border-right-color:#d3d3d3; border-bottom-color:#d3d3d3; border-left-color:#d3d3d3; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; text-align:left; width:100%; max-width:100%; padding-left:0.8rem; padding-right:0.8px; margin-bottom:0.3rem; padding-top:0.3rem; padding-bottom:0.3rem; } .button-menu__wrapper:not(.ct-section):not(.oxy-easy-posts), .button-menu__wrapper.oxy-easy-posts .oxy-posts, .button-menu__wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; } .button-menu__icon { color: #353535;}.button-menu__icon >svg {width: 23px;height: 23px;}.button-menu__icon { margin-right:0.6rem; } .button-menu__text { color:#353535; font-weight:500; line-height:1.1; } .button-link__wrapper:hover{ background-color:#dff1f3; } .button-link__wrapper { background-color:#ffe1b9; border-radius:var(--radius-small) ; padding-top:var(--space-small) ; padding-bottom:var(--space-small) ; padding-left:var(--space-base) ; padding-right:var(--space-base) ; transition-duration:0.3s; transition-timing-function:ease-in-out; text-align:left; } .button-link__wrapper:not(.ct-section):not(.oxy-easy-posts), .button-link__wrapper.oxy-easy-posts .oxy-posts, .button-link__wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; } .button-link__descuento { color:#ffffff; font-size:var(--text-small) ; background-color:#fd9234; padding-top:0.5rem; padding-left:1rem; padding-right:1rem; padding-bottom:0.5rem; border-radius:var(--radius-xsmall) ; margin-left:1rem; } .button-menu-shade_wrapper:hover{ background-color:#ffe1b9; border-top-color:#d3d3d3; border-right-color:#d3d3d3; border-bottom-color:#d3d3d3; border-left-color:#d3d3d3; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; } .button-menu-shade_wrapper { text-align:left; background-color:#d3d3d3; padding-top:0.3rem; padding-left:0.8rem; padding-right:0.8rem; padding-bottom:0.3rem; margin-bottom:0.3rem; width:100%; max-width:100%; border-radius:var(--radius-small) ; border-top-color:#d3d3d3; border-right-color:#d3d3d3; border-bottom-color:#d3d3d3; border-left-color:#d3d3d3; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; } .button-menu-shade_wrapper:not(.ct-section):not(.oxy-easy-posts), .button-menu-shade_wrapper.oxy-easy-posts .oxy-posts, .button-menu-shade_wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; } .button-link__image { width:33px; } .button-link__text { font-weight:500; margin-left:1.5rem; color:#535353; } .center--all-s { } .center--bottom-s { } .center--top-s { } .center--left-s { } .center--right-s { } .center--all-m { } .center--bottom-m { } .center--top-m { } .center--left-m { } .center--right-m { } .center--all-l { } .center--bottom-l { } .center--top-l { } .center--left-l { } .center--right-l { } .center--y { } .center--x { } .center--y-s { } .center--x-s { } .center--y-m { } .center--x-m { } .center--y-l { } .center--x-l { } .center--y-xl { } .center--x-xl { } .center--all-xl { } .center--bottom-xl { } .center--top-xl { } .center--left-xl { } .center--right-xl { } .col-span--all { } .col-span--2 { } .col-span--3 { } .col-span--4 { } .col-span--5 { } .col-span--6 { } .row-span--2 { } .row-span--3 { } .row-span--4 { } .row-span--5 { } .row-span--6 { } .row-start--1 { } .row-start--2 { } .row-start--3 { } .row-start--4 { } .row-start--5 { } .row-start--6 { } .col-start--1 { } .col-start--2 { } .col-start--3 { } .col-start--4 { } .col-start--5 { } .col-start--6 { } .order--first { } .order--last { } .grid--xl-1 { } .grid--xl-3 { } .grid--xl-4 { } .grid--xl-5 { } .row-start--xl-1 { } .row-start--xl-2 { } .row-start--xl-3 { } .row-start--xl-4 { } .row-start--xl-5 { } .row-start--xl-6 { } .col-start--xl-1 { } .col-start--xl-2 { } .col-start--xl-3 { } .col-start--xl-4 { } .col-start--xl-5 { } .col-start--xl-6 { } .order--first-xl { } .order--last-xl { } .row-span--xl-1 { } .row-span--xl-2 { } .row-span--xl-3 { } .row-span--xl-4 { } .row-span--xl-5 { } .row-span--xl-6 { } .col-span--xl-1 { } .col-span--xl-2 { } .col-span--xl-3 { } .col-span--xl-4 { } .col-span--xl-5 { } .col-span--xl-6 { } .grid--l-4 { } .grid--l-5 { } .row-start--l-1 { } .row-start--l-2 { } .row-start--l-3 { } .row-start--l-4 { } .row-start--l-5 { } .row-start--l-6 { } .col-start--l-1 { } .col-start--l-2 { } .col-start--l-3 { } .col-start--l-4 { } .col-start--l-5 { } .col-start--l-6 { } .order--last-l { } .row-span--l-1 { } .row-span--l-2 { } .row-span--l-3 { } .row-span--l-4 { } .row-span--l-5 { } .row-span--l-6 { } .col-span--l-1 { } .col-span--l-2 { } .col-span--l-3 { } .col-span--l-4 { } .col-span--l-5 { } .col-span--l-6 { } .grid--m-3 { } .grid--m-4 { } .row-start--m-1 { } .row-start--m-2 { } .row-start--m-3 { } .row-start--m-4 { } .row-start--m-5 { } .row-start--m-6 { } .col-start--m-1 { } .col-start--m-2 { } .col-start--m-3 { } .col-start--m-4 { } .col-start--m-5 { } .col-start--m-6 { } .order--last-m { } .row-span--m-1 { } .row-span--m-2 { } .row-span--m-3 { } .row-span--m-4 { } .row-span--m-5 { } .row-span--m-6 { } .col-span--m-1 { } .col-span--m-2 { } .col-span--m-3 { } .col-span--m-4 { } .col-span--m-5 { } .col-span--m-6 { } .grid--s-3 { } .grid--s-4 { } .row-start--s-1 { } .row-start--s-2 { } .row-start--s-3 { } .row-start--s-4 { } .row-start--s-5 { } .row-start--s-6 { } .col-start--s-1 { } .col-start--s-2 { } .col-start--s-3 { } .col-start--s-4 { } .col-start--s-5 { } .col-start--s-6 { } .order--last-s { } .row-span--s-1 { } .row-span--s-2 { } .row-span--s-3 { } .row-span--s-4 { } .row-span--s-5 { } .row-span--s-6 { } .col-span--s-1 { } .col-span--s-2 { } .col-span--s-3 { } .col-span--s-4 { } .col-span--s-5 { } .col-span--s-6 { } .flex--row { } .flex--col { } .flex--row-reverse { } .flex--col-reverse { } .justify-content--start { } .justify-content--center { } .justify-content--end { } .justify-content--between { } .justify-content--around { } .justify-items--start { } .justify-items--center { } .justify-items--end { } .align-items--start { } .align-items--center { } .align-items--end { } .align-items--baseline { } .align-content--start { } .align-content--center { } .align-content--end { } .align-content--baseline { } .flex--wrap { } .self--start { } .self--end { } .self--center { } .self--stretch { } .stretch { } .flex--col-s { } .flex--row-s { } .flex--row-reverse-s { } .flex--col-reverse-s { } .flex--col-m { } .flex--row-m { } .flex--row-reverse-m { } .flex--col-reverse-m { } .flex--col-l { } .flex--row-l { } .flex--row-reverse-l { } .flex--col-reverse-l { } .flex--col-xl { } .flex--row-xl { } .flex--row-reverse-xl { } .flex--col-reverse-xl { } .flip--x { } .flip--y { } .flip--xy { } .card--xsmall { } .card--small { } .card--base { } .card--large { } .card--xlarge { } .card--xxlarge { } .owl-card--xsmall { } .owl-card--small { } .owl-card--base { } .owl-card--large { } .grid--single-12 { width:100%; } .grid--single-12:not(.ct-section):not(.oxy-easy-posts), .grid--single-12.oxy-easy-posts .oxy-posts, .grid--single-12.ct-section .ct-section-inner-wrap{ display:grid; display: grid !important;justify-items: stretch;align-items: stretch;grid-template-columns: repeat(12, minmax(0px, 1fr));grid-column-gap: var(--space-large) ;grid-row-gap: var(--space-large) ;} .grid--single-12:not(.ct-section):not(.oxy-easy-posts) > :last-child, .grid--single-12.ct-section .ct-section-inner-wrap > :last-child, .grid--single-12.oxy-easy-posts .oxy-posts > :last-child{ grid-column: span 3;} .grid--single-12:not(.ct-section):not(.oxy-easy-posts) > :nth-child(1), .grid--single-12.ct-section .ct-section-inner-wrap > :nth-child(1), .grid--single-12.oxy-easy-posts .oxy-posts > :nth-child(1){ grid-column: span 2;} .grid--single-12:not(.ct-section):not(.oxy-easy-posts) > :nth-child(2), .grid--single-12.ct-section .ct-section-inner-wrap > :nth-child(2), .grid--single-12.oxy-easy-posts .oxy-posts > :nth-child(2){ grid-column: span 7;} @media (max-width: 991px) { .grid--single-12 { width:100%; } .grid--single-12:not(.ct-section):not(.oxy-easy-posts), .grid--single-12.oxy-easy-posts .oxy-posts, .grid--single-12.ct-section .ct-section-inner-wrap{ display:grid; display: grid !important;justify-items: stretch;align-items: stretch;grid-template-columns: repeat(1, minmax(0px, 1fr));grid-column-gap: var(--space-large) ;grid-row-gap: var(--space-large) ;} .grid--single-12:not(.ct-section):not(.oxy-easy-posts) > :last-child, .grid--single-12.ct-section .ct-section-inner-wrap > :last-child, .grid--single-12.oxy-easy-posts .oxy-posts > :last-child{ grid-column: span 1;} .grid--single-12:not(.ct-section):not(.oxy-easy-posts) > :nth-child(2), .grid--single-12.ct-section .ct-section-inner-wrap > :nth-child(2), .grid--single-12.oxy-easy-posts .oxy-posts > :nth-child(2){ grid-column: span 2;} } @media (max-width: 767px) { } .text-shadow-white--small { } .text-shadow-white--medium { } .text-shadow-white--large { } .text-shadow-white--xlarge { } .grid--single-header { width:100%; } .grid--single-header:not(.ct-section):not(.oxy-easy-posts), .grid--single-header.oxy-easy-posts .oxy-posts, .grid--single-header.ct-section .ct-section-inner-wrap{ display:grid; display: grid !important;justify-items: stretch;align-items: stretch;grid-template-columns: repeat(12, minmax(0px, 1fr));grid-column-gap: var(--space-large) ;grid-row-gap: var(--space-large) ;} .grid--single-header:not(.ct-section):not(.oxy-easy-posts) > :last-child, .grid--single-header.ct-section .ct-section-inner-wrap > :last-child, .grid--single-header.oxy-easy-posts .oxy-posts > :last-child{ grid-column: span 10;} .grid--single-header:not(.ct-section):not(.oxy-easy-posts) > :nth-child(1), .grid--single-header.ct-section .ct-section-inner-wrap > :nth-child(1), .grid--single-header.oxy-easy-posts .oxy-posts > :nth-child(1){ grid-column: span 2;} @media (max-width: 991px) { .grid--single-header { width:100%; } .grid--single-header:not(.ct-section):not(.oxy-easy-posts), .grid--single-header.oxy-easy-posts .oxy-posts, .grid--single-header.ct-section .ct-section-inner-wrap{ display:grid; display: grid !important;justify-items: stretch;align-items: stretch;grid-template-columns: repeat(1, minmax(0px, 1fr));grid-column-gap: 0px;grid-row-gap: var(--space-base) ;} } .flag-size { width:20rem; } @media (max-width: 991px) { .flag-size { width:14rem; } } .text-align--center { text-align: center; } .tabs-9928-tab { background-color:#fff3e3; border-top-left-radius:1rem; border-top-right-radius:6rem; padding-right:6%; padding-left:6%; } .tabs-9928-tab:not(.ct-section):not(.oxy-easy-posts), .tabs-9928-tab.oxy-easy-posts .oxy-posts, .tabs-9928-tab.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; } @media (max-width: 767px) { .tabs-9928-tab { padding-right:2%; padding-left:1%; } } @media (max-width: 479px) { .tabs-9928-tab { padding-right:1%; padding-left:1%; } } .tabs-9928-tab-active { background-color:#dff1f3; } .tabs-contents-9928-tab { background-color:#dff1f3; border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; max-height:100%; height:40rem; } .tabs-contents-9928-tab:not(.ct-section):not(.oxy-easy-posts), .tabs-contents-9928-tab.oxy-easy-posts .oxy-posts, .tabs-contents-9928-tab.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .tab-text { font-weight:500; margin-top:var(--space-xsmall) ; } .tab-icon { color: #333333;}.tab-icon >svg {width: 28px;height: 28px;}.tab-icon { } .icon-size { width:10rem; } @media (max-width: 1440px) { } @media (max-width: 767px) { .icon-size { width:8rem; } } .accordion-container { width:100%; } .accordion-container:not(.ct-section):not(.oxy-easy-posts), .accordion-container.oxy-easy-posts .oxy-posts, .accordion-container.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; } @media (max-width: 767px) { .accordion-container { } .accordion-container:not(.ct-section):not(.oxy-easy-posts), .accordion-container.oxy-easy-posts .oxy-posts, .accordion-container.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; } } .accordion-wrapper:hover{ flex-grow:3; } .accordion-wrapper { position:relative; flex-grow:1; transition-duration:0.5s; transition-timing-function:ease; transition-property:flex; height:40rem; } .accordion-wrapper:not(.ct-section):not(.oxy-easy-posts), .accordion-wrapper.oxy-easy-posts .oxy-posts, .accordion-wrapper.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; } @media (max-width: 767px) { .accordion-wrapper { width:100%; } } .accordion-image:hover{ } .accordion-image { position:absolute; height:40rem; object-fit: cover; } .accordion-icon { color: #ffffff;}.accordion-icon >svg {width: 44px;height: 44px;}.accordion-icon { z-index:5; } .accordion-heading { color:#ffffff; z-index:5; margin-top:var(--space-small) ; text-shadow: 0px 0px 8px #353535; } .oxy-close-modal { background-color :rgba(30,115,190,0); border: 1px solid rgba(30,115,190,0); }.oxy-close-modal { } .button-primary:hover{ background-color :#ffce8d; border: 1px solid #ffce8d; color: #535353; }.button-primary:hover{ } .button-primary { background-color :#fd9234; border: 1px solid #fd9234; }.button-primary { } .button-menu-mobile:hover{ border-top-color:#ff9d37; border-right-color:#ff9d37; border-bottom-color:#ff9d37; border-left-color:#ff9d37; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; background-color:#ffce8d; } .button-menu-mobile { background-color:#ff9d37; padding-top:0.3rem; padding-left:0.8rem; padding-right:0.8rem; padding-bottom:0.3rem; margin-bottom:0.8rem; width:100%; border-radius:var(--radius-small) ; border-top-color:#ff9d37; border-right-color:#ff9d37; border-bottom-color:#ff9d37; border-left-color:#ff9d37; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; } .button-menu-mobile:not(.ct-section):not(.oxy-easy-posts), .button-menu-mobile.oxy-easy-posts .oxy-posts, .button-menu-mobile.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; } .oxy-stock-content-styles { } /* TYPOGRAPPHY */ /*** ROOT FONT SIZE Typically 100% or 62.5%. If you want 1 rem = 10px for easier use of rems, keep it at 62.5%. ***/ html{ font-size: 62.5%; } :root { /*** VIEWPORT VARIABLES Match these to the viewport width you set in Oxygen Global Styles. ***/ --vp-min: 32; /* Viewport Min Size in REM (32 = 320px) */ --vp-max: 144; /* Viewport Max Size in REM (144 = 1440px) */ /*** BASE TEXT SIZE Base text sizes are used to calculate the fluid text and heading styles. Adjust accordingly. Headings use same values from H6 (base) to H1 (4xlarge) ***/ --base-text-desk: 1.7; /* Base Text Size in REM (1.7 rem = 17px) */ --base-text-mob: 1.6; /*** TEXT SCALE The text scale controls the progression of text sizes. 1.067 - Minor Second 1.125 - Major Second 1.200 - Minor Third 1.250 - Major Third 1.333 - Perfect Fourth 1.414 - Augmented Fourth 1.500 - Perfect Fifth 1.618 - Golden Ratio Most websites should use 1.200, 1.250, 1.333 and 1.414. Smaller in mobile scale. ***/ --text-scale: 1.250; --mob-text-scale: 1.200; /*** BASE SPACING Control how spacing behaves across your website. Typically equivalent to normal paragraph spacing. This value will adjust all spacing across your website evenly. ***/ --base-space: 2.4; /* Base Spacing in REM (2.4 rem = 24px) */ --base-space-mob: 1.6; /* SPACING: Control how spacing behaves across your website */ /*** SPACING SCALE Control the degree of variance between spacing sizes (xsmall to xxlarge). Larger numbers create more variance. ***/ --space-scale: 1.500; --mob-space-scale: 1.414; /*** BASE SECTION SPACING A multiple of "Base Spacing" above. This value controls default top/bottom section padding and adjusts all section spacing across your site evenly. ***/ --space-adjust-section: 3; --mob-space-adjust-section: 2; /*** LEFT-RIGTH SECTION PADDING Set the default left/right padding for sections & headers. Use any Automatic variable or your own value. ***/ --section-padding-x: var(--space-base); /* BORDERS: Customize the borders on your website */ /*** BASE RADIUS Set the default border radius for elements that have .rounded-- classes or radius variables set. ***/ --base-radius: 1.4rem; /* Base Radius in REM (1.4 rem = 14px) */ /*** RADIUS SCALE Change the degree of change between border radius sizes. ***/ --radius-scale: 1.333; /*** FALLBACKS Automatik has a primary fallback layer that uses calc() instead of clamp(). It has a third fallback layer for older devices that uses raw, non-responsive rem values. The third layer fallback values for each selector can be overridden here. ***/ --text-xsmall-pure: 1.3rem; --text-small-pure: 1.5rem; --text-base-pure: 1.7rem; --text-large-pure: 2.1rem; --text-xlarge-pure: 2.7rem; --text-2xlarge-pure: 3.3rem; --text-3xlarge-pure: 4.2rem; --text-4xlarge-pure: 5.2rem; --text-5xlarge-pure: 6.5rem; --text-mega-pure: 8.1rem; --space-xsmall-pure: 1.1rem; --space-small-pure: 1.6rem; --space-base-pure: 2.4rem; --space-large-pure: 3.6rem; --space-xlarge-pure: 5.4rem; --space-xxlarge-pure: 8.1rem; --section-space-xsmall-pure: 3.3rem; --section-space-small-pure: 4.8rem; --section-space-base-pure: 7.2rem; --section-space-large-pure: 10.8rem; --section-space-xlarge-pure: 16.2rem; --section-space-xxlarge-pure: 24.3rem; /*** SCALE CALCS These calcs are for the text clamps. ***/ /* SCALE-BASED TYPOGRAPHY */ --text-base-max: var(--base-text-desk); --text-base-min: var(--base-text-mob); --text-small-max: calc(var(--text-base-max) / var(--text-scale)); --text-small-min: calc(var(--text-base-min) / var(--mob-text-scale)); --text-xsmall-max: calc(var(--text-small-max) / var(--text-scale)); --text-xsmall-min: calc(var(--text-small-min) / var(--mob-text-scale)); --text-large-max: calc(var(--text-base-max) * var(--text-scale)); --text-large-min: calc(var(--text-base-min) * var(--mob-text-scale)); --text-xlarge-max: calc(var(--text-large-max) * var(--text-scale)); --text-xlarge-min: calc(var(--text-large-min) * var(--mob-text-scale)); --text-2xlarge-max: calc(var(--text-xlarge-max) * var(--text-scale)); --text-2xlarge-min: calc(var(--text-xlarge-min) * var(--mob-text-scale)); --text-3xlarge-max: calc(var(--text-2xlarge-max) * var(--text-scale)); --text-3xlarge-min: calc(var(--text-2xlarge-min) * var(--mob-text-scale)); --text-4xlarge-max: calc(var(--text-3xlarge-max) * var(--text-scale)); --text-4xlarge-min: calc(var(--text-3xlarge-min) * var(--mob-text-scale)); --text-5xlarge-max: calc(var(--text-4xlarge-max) * var(--text-scale)); --text-5xlarge-min: calc(var(--text-4xlarge-min) * var(--mob-text-scale)); --text-mega-max: calc(var(--text-5xlarge-max) * var(--text-scale)); --text-mega-min: calc(var(--text-5xlarge-min) * var(--mob-text-scale)); /*** USEFUL TEXT VARIABLES These can be used in place of classes or in custom classes. ***/ --text-xsmall: var(--text-xsmall-pure); --text-small: var(--text-small-pure); --text-base: var(--text-base-pure); --text-large: var(--text-large-pure); --text-xlarge: var(--text-xlarge-pure); --text-2xlarge: var(--text-2xlarge-pure); --text-3xlarge: var(--text-3xlarge-pure); --text-4xlarge: var(--text-4xlarge-pure); --text-5xlarge: var(--text-5xlarge-pure); --text-mega: var(--text-mega-pure); --text-xsmall-calc: calc(var(--text-xsmall-min) * 1rem + (var(--text-xsmall-max) - var(--text-xsmall-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-small-calc: calc(var(--text-small-min) * 1rem + (var(--text-small-max) - var(--text-small-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-base-calc: calc(var(--text-base-min) * 1rem + (var(--text-base-max) - var(--text-base-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-large-calc: calc(var(--text-large-min) * 1rem + (var(--text-large-max) - var(--text-large-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-xlarge-calc: calc(var(--text-xlarge-min) * 1rem + (var(--text-xlarge-max) - var(--text-xlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-2xlarge-calc: calc(var(--text-2xlarge-min) * 1rem + (var(--text-2xlarge-max) - var(--text-2xlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-3xlarge-calc: calc(var(--text-3xlarge-min) * 1rem + (var(--text-3xlarge-max) - var(--text-3xlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-4xlarge-calc: calc(var(--text-4xlarge-min) * 1rem + (var(--text-4xlarge-max) - var(--text-4xlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-5xlarge-calc: calc(var(--text-5xlarge-min) * 1rem + (var(--text-5xlarge-max) - var(--text-5xlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-mega-calc: calc(var(--text-mega-min) * 1rem + (var(--text-mega-max) - var(--text-mega-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --text-xsmall-clamp: clamp(calc(var(--text-xsmall-min) * 1rem), calc(var(--text-xsmall-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-xsmall-max) - var(--text-xsmall-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-xsmall-max) * 1rem)); --text-small-clamp: clamp(calc(var(--text-small-min) * 1rem), calc(var(--text-small-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-small-max) - var(--text-small-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-small-max) * 1rem)); --text-base-clamp: clamp(calc(var(--text-base-min) * 1rem), calc(var(--text-base-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-base-max) - var(--text-base-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-base-max) * 1rem)); --text-large-clamp: clamp(calc(var(--text-large-min) * 1rem), calc(var(--text-large-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-large-max) - var(--text-large-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-large-max) * 1rem)); --text-xlarge-clamp: clamp(calc(var(--text-xlarge-min) * 1rem), calc(var(--text-xlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-xlarge-max) - var(--text-xlarge-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-xlarge-max) * 1rem)); --text-2xlarge-clamp: clamp(calc(var(--text-2xlarge-min) * 1rem), calc(var(--text-2xlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-2xlarge-max) - var(--text-2xlarge-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-2xlarge-max) * 1rem)); --text-3xlarge-clamp: clamp(calc(var(--text-3xlarge-min) * 1rem), calc(var(--text-3xlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-3xlarge-max) - var(--text-3xlarge-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-3xlarge-max) * 1rem)); --text-4xlarge-clamp: clamp(calc(var(--text-4xlarge-min) * 1rem), calc(var(--text-4xlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-4xlarge-max) - var(--text-4xlarge-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-4xlarge-max) * 1rem)); --text-5xlarge-clamp: clamp(calc(var(--text-5xlarge-min) * 1rem), calc(var(--text-5xlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-5xlarge-max) - var(--text-5xlarge-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-5xlarge-max) * 1rem)); --text-mega-clamp: clamp(calc(var(--text-mega-min) * 1rem), calc(var(--text-mega-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-mega-max) - var(--text-mega-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-mega-max) * 1rem)); /*** USEFUL SPACING VARIABLES These can be used for individul margin, padding, and gap needs. ***/ /* SPACING */ --space-base-min: var(--base-space-mob); --space-base-max: var(--base-space); --space-xsmall-min: calc(var(--space-small-min) / var(--mob-space-scale)); --space-xsmall-max: calc(var(--space-small-max) / var(--space-scale)); --space-small-min: calc(var(--space-base-min) / var(--mob-space-scale)); --space-small-max: calc(var(--space-base-max) / var(--space-scale)); --space-large-min: calc(var(--space-base-min) * var(--mob-space-scale)); --space-large-max: calc(var(--space-base-max) * var(--space-scale)); --space-xlarge-min: calc(var(--space-large-min) * var(--mob-space-scale)); --space-xlarge-max: calc(var(--space-large-max) * var(--space-scale)); --space-xxlarge-min: calc(var(--space-xlarge-min) * var(--mob-space-scale)); --space-xxlarge-max: calc(var(--space-xlarge-max) * var(--space-scale)); /* SPACING CLAMPS */ --space-xsmall: var(--space-xsmall-pure); --space-small: var(--space-small-pure); --space-base: var(--space-base-pure); --space-large: var(--space-large-pure); --space-xlarge: var(--space-xlarge-pure); --space-xxlarge: var(--space-xxlarge-pure); --space-xsmall-calc: calc(var(--space-xsmall-min) * 1rem + (var(--space-xsmall-max) - var(--space-xsmall-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --space-small-calc: calc(var(--space-small-min) * 1rem + (var(--space-small-max) - var(--space-small-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --space-base-calc: calc(var(--space-base-min) * 1rem + (var(--space-base-max) - var(--space-base-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --space-large-calc: calc(var(--space-large-min) * 1rem + (var(--space-large-max) - var(--space-large-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --space-xlarge-calc: calc(var(--space-xlarge-min) * 1rem + (var(--space-xlarge-max) - var(--space-xlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --space-xxlarge-calc: calc(var(--space-xxlarge-min) * 1rem + (var(--space-xxlarge-max) - var(--space-xxlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --space-xsmall-clamp: clamp(var(--space-xsmall-min) * 1rem, calc(var(--space-xsmall-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-xsmall-max) - var(--space-xsmall-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-xsmall-max) * 1rem); --space-small-clamp: clamp(var(--space-small-min) * 1rem, calc(var(--space-small-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-small-max) - var(--space-large-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-small-max) * 1rem); --space-base-clamp: clamp(var(--space-base-min) * 1rem, calc(var(--space-base-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-base-max) - var(--space-base-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-base-max) * 1rem); --space-large-clamp: clamp(var(--space-large-min) * 1rem, calc(var(--space-large-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-large-max) - var(--space-large-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-large-max) * 1rem); --space-xlarge-clamp: clamp(var(--space-xlarge-min) * 1rem, calc(var(--space-xlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-xlarge-max) - var(--space-xlarge-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-xlarge-max) * 1rem); --space-xxlarge-clamp: clamp(var(--space-xxlarge-min) * 1rem, calc(var(--space-xxlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-xxlarge-max) - var(--space-xxlarge-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-xxlarge-max) * 1rem); /* SECTION SPACING */ --section-base-min: calc(var(--space-base-min) * var(--mob-space-adjust-section)); --section-base-max: calc(var(--space-base-max) * var(--space-adjust-section)); --section-xsmall-min: calc(var(--space-xsmall-min) * var(--mob-space-adjust-section)); --section-xsmall-max: calc(var(--space-xsmall-max) * var(--space-adjust-section)); --section-small-min: calc(var(--space-small-min) * var(--mob-space-adjust-section)); --section-small-max: calc(var(--space-small-max) * var(--space-adjust-section)); --section-large-min: calc(var(--space-large-min) * var(--mob-space-adjust-section)); --section-large-max: calc(var(--space-large-max) * var(--space-adjust-section)); --section-xlarge-min: calc(var(--space-xlarge-min) * var(--mob-space-adjust-section)); --section-xlarge-max: calc(var(--space-xlarge-max) * var(--space-adjust-section)); --section-xxlarge-min: calc(var(--space-xxlarge-min) * var(--mob-space-adjust-section)); --section-xxlarge-max: calc(var(--space-xxlarge-max) * var(--space-adjust-section)); /* SECTION CLAMPS */ --section-space-xsmall: var(--section-space-xsmall-pure); --section-space-small: var(--section-space-small-pure); --section-space-base: var(--section-space-base-pure); --section-space-large: var(--section-space-large-pure); --section-space-xlarge: var(--section-space-xlarge-pure); --section-space-xxlarge: var(--section-space-xxlarge-pure); --section-space-xsmall-calc: calc(var(--section-xsmall-min) * 1rem + (var(--section-xsmall-max) - var(--section-xsmall-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --section-space-small-calc: calc(var(--section-small-min) * 1rem + (var(--section-small-max) - var(--section-small-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --section-space-base-calc: calc(var(--section-base-min) * 1rem + (var(--section-base-max) - var(--section-base-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --section-space-large-calc: calc(var(--section-large-min) * 1rem + (var(--section-large-max) - var(--section-large-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --section-space-xlarge-calc: calc(var(--section-xlarge-min) * 1rem + (var(--section-xlarge-max) - var(--section-xlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --section-space-xxlarge-calc: calc(var(--section-xxlarge-min) * 1rem + (var(--section-xxlarge-max) - var(--section-xxlarge-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min)))); --section-space-xsmall-clamp: clamp(calc(var(--section-xsmall-min) * 1rem), calc(var(--section-xsmall-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-xsmall-max) - var(--section-xsmall-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-xsmall-max) * 1rem)); --section-space-small-clamp: clamp(calc(var(--section-small-min) * 1rem), calc(var(--section-small-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-small-max) - var(--section-small-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-small-max) * 1rem)); --section-space-base-clamp: clamp(calc(var(--section-base-min) * 1rem), calc(var(--section-base-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-base-max) - var(--section-base-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-base-max) * 1rem)); --section-space-large-clamp: clamp(calc(var(--section-large-min) * 1rem), calc(var(--section-large-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-large-max) - var(--section-large-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-large-max) * 1rem)); --section-space-xlarge-clamp: clamp(calc(var(--section-xlarge-min) * 1rem), calc(var(--section-xlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-xlarge-max) - var(--section-xlarge-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-xlarge-max) * 1rem)); --section-space-xxlarge-clamp: clamp(calc(var(--section-xxlarge-min) * 1rem), calc(var(--section-xxlarge-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-xxlarge-max) - var(--section-xxlarge-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-xxlarge-max) * 1rem)); --section-xsmall: var(--section-space-xsmall) var(--section-padding-x); --section-small: var(--section-space-small) var(--section-padding-x); --section-base: var(--section-space-base) var(--section-padding-x); --section-large: var(--section-space-large) var(--section-padding-x); --section-xlarge: var(--section-space-xlarge) var(--section-padding-x); --section-xxlarge: var(--section-space-xxlarge) var(--section-padding-x); /* RADIUS SCALE */ --radius-xsmall: calc(var(--radius-small) / var(--radius-scale)); --radius-small: calc(var(--base-radius) / var(--radius-scale)); --radius-base: var(--base-radius); --radius-large: calc(var(--base-radius) * var(--radius-scale)); --radius-xlarge: calc(var(--radius-large) * var(--radius-scale)); --radius-xxlarge: calc(var(--radius-xlarge) * var(--radius-scale)); --radius-50: 50%; /* WIDTH VARIABLES */ --width-xsmall: calc(var(--vp-max) * .1 * 1rem); --width-small: calc(var(--vp-max) * .2 * 1rem); --width-medium: calc(var(--vp-max) * .4 * 1rem); --width-large: calc(var(--vp-max) * .6 * 1rem); --width-xlarge: calc(var(--vp-max) * .8 * 1rem); --width-xxlarge: calc(var(--vp-max) * .9 * 1rem); --width-vp-max: calc((var(--vp-max) - var(--base-space) * 2) * 1rem); --width-50: calc((var(--vp-max) / 2) * 1rem); /* COMPLETELY CUSTOM TYPOGRAPHY Set your own static min and max values for each size. NUMBERS ONLY, NO UNITS (rem/px/etc.). Remove comments to go live. */ --text-xsmall-min: 1.2; --text-xsmall-max: 1.3; --text-small-min: 1.4; --text-small-max: 1.5; /* --text-base-min: value; --text-base-max: value; --text-large-min: value; --text-large-max: value; --text-xlarge-min: value; --text-xlarge-max: value; --text-2xlarge-min: value; --text-2xlarge-max: value; --text-3xlarge-max: value; --text-3xlarge-min: value; --text-4xlarge-max: value; --text-4xlarge-min: value; --text-5xlarge-max: value; --text-5xlarge-min: value; --text-mega-max: value; --text-mega-min: value; */ /***** END ROOT VARIABLES & CALCS *****/ } .ct-section-inner-wrap { padding: var(--section-space-base) var(--section-padding-x); } .oxy-header-container { padding-left: var(--section-padding-x); padding-right: var(--section-padding-x); } /*** TEXT CLASSES These are generated from the text size system. ***/ .text--xsmall { font-size: var(--text-xsmall); } .text--small { font-size: var(--text-small); } .text--base { font-size: var(--text-base); } .text--large { font-size: var(--text-large); } .text--xlarge { font-size: var(--text-xlarge); } .text--2xlarge { font-size: var(--text-2xlarge); } .text--3xlarge { font-size: var(--text-3xlarge); } .text--4xlarge { font-size: var(--text-4xlarge); } .text--5xlarge { font-size: var(--text-5xlarge); } .text--mega { font-size: var(--text-mega); } /*** PADDING UTILITY CLASSES These apply padding to sections and containers. ***/ .pad--xsmall { padding: var(--space-xsmall); } .pad--small { padding: var(--space-small); } .pad--base { padding: var(--space-base); } .pad--large { padding: var(--space-large); } .pad--xlarge { padding: var(--space-xlarge); } .pad--xxlarge { padding: var(--space-xxlarge); } .pad--none { padding: 0; } .pad-section--xsmall .ct-section-inner-wrap { padding: var(--section-xsmall); } .pad-section--small .ct-section-inner-wrap { padding: var(--section-small); } .pad-section--large .ct-section-inner-wrap { padding: var(--section-large); } .pad-section--xlarge .ct-section-inner-wrap { padding: var(--section-xlarge); } .pad-section--xxlarge .ct-section-inner-wrap { padding: var(--section-xxlarge); } .pad-section--none .ct-section-inner-wrap { padding: 0 var(--space-base); } .pad-header--xsmall { padding-top: var(--space-xsmall); padding-bottom: var(--space-xsmall); } .pad-header--small { padding-top: var(--space-small); padding-bottom: var(--space-small); } .pad-header--base { padding-top: var(--space-base); padding-bottom: var(--space-base); } .pad-header--large { padding-top: var(--space-large); padding-bottom: var(--space-large); } .pad-header--xlarge { padding-top: var(--space-xlarge); padding-bottom: var(--space-xlarge); } .pad-header--xxlarge { padding-top: var(--space-xxlarge); padding-bottom: var(--space-xxlarge); } /*** MARGIN UTILITY CLASSES These apply margin to elements. ***/ .margin-top--xsmall { margin-top: var(--space-xsmall); } .margin-top--small { margin-top: var(--space-small); } .margin-top--base { margin-top: var(--space-base); } .margin-top--large { margin-top: var(--space-large); } .margin-top--xlarge { margin-top: var(--space-xlarge); } .margin-top--xxlarge { margin-top: var(--space-xxlarge); } .margin-bottom--xsmall { margin-bottom: var(--space-xsmall); } .margin-bottom--small { margin-bottom: var(--space-small); } .margin-bottom--base { margin-bottom: var(--space-base); } .margin-bottom--large { margin-bottom: var(--space-large); } .margin-bottom--xlarge { margin-bottom: var(--space-xlarge); } .margin-bottom--xxlarge { margin-bottom: var(--space-xxlarge); } .margin-left--xsmall { margin-left: var(--space-xsmall); } .margin-left--small { margin-left: var(--space-small); } .margin-left--base { margin-left: var(--space-base); } .margin-left--large { margin-left: var(--space-large); } .margin-left--xlarge { margin-left: var(--space-xlarge); } .margin-left--xxlarge { margin-left: var(--space-xxlarge); } .margin-right--xsmall { margin-right: var(--space-xsmall); } .margin-right--small { margin-right: var(--space-small); } .margin-right--base { margin-right: var(--space-base); } .margin-right--large { margin-right: var(--space-large); } .margin-right--xlarge { margin-right: var(--space-xlarge); } .margin-right--xxlarge { margin-right: var(--space-xxlarge); } /* OWL SPACING UTILITY CLASSES These apply equal margin to the top of all elements with an adjacent sibling. Use these to automatically space everything in a section or container without creating extra top or bottom spacing. */ .ct-section[class*="owl--"] .ct-section-inner-wrap > * + *, [class*="owl--"]:not(.ct-section) > * + * { margin-top: var(--owl-space); } .owl--xsmall.ct-section > .ct-section-inner-wrap > * + *, .owl--xsmall:not(.ct-section) > * + * { --owl-space: var(--space-xsmall); } .owl--small.ct-section > .ct-section-inner-wrap > * + *, .owl--small:not(.ct-section) > * + * { --owl-space: var(--space-small); } .owl--base.ct-section > .ct-section-inner-wrap > * + *, .owl--base:not(.ct-section) > * + * { --owl-space: var(--space-base); } .owl--large.ct-section > .ct-section-inner-wrap > * + *, .owl--large:not(.ct-section) > * + * { --owl-space: var(--space-large); } .owl--xlarge.ct-section > .ct-section-inner-wrap > * + *, .owl--xlarge:not(.ct-section) > * + * { --owl-space: var(--space-xlarge); } .owl--xxlarge.ct-section > .ct-section-inner-wrap > * + *, .owl--xxlarge:not(.ct-section) > * + * { --owl-space: var(--space-xxlarge); } /* BREAKOUT UTILITY CLASSES Horizontally break any element out of its parent container. */ @media (min-width: 1365px) { .breakout--small { width: 60vw; max-width: 60vw; margin: 0 calc(-30vw + 50%); } .breakout--medium { width: 70vw; max-width: 70vw; margin: 0 calc(-35vw + 50%); } .breakout--large { width: 80vw; max-width: 80vw; margin: 0 calc(-40vw + 50%); } .breakout--xlarge { width: 90vw; max-width: 90vw; margin: 0 calc(-45vw + 50%); } } .breakout--full { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; align-self: flex-start; } @media (max-width: 1439px) { [class*="breakout--"] { width: 100%; max-width: 100%; margin: 0; } } /* MAX WIDTH UTILITY CLASSES Change the max-width of any element. Values are generated from base viewport sizes so they adapt to viewport defaults. */ [class*="width--"]:not([class*="breakout--"]) { width: 100%; max-width: var(--width); } .width--xsmall { --width: var(--width-xsmall); } .width--small { --width: var(--width-small); } .width--medium { --width: var(--width-medium); } .width--large { --width: var(--width-large); } .width--xlarge { --width: var(--width-xlarge); } .width--xxlarge { --width: var(--width-xxlarge); } .width--vp-max { --width: var(--width-vp-max); margin-left: auto; margin-right: auto; } .width--50 { --width: var(--width-50); } .width--full { --width: 100%; } .width--auto { width: auto !important; --width: 100%; } /* HEIGHT UTILITY CLASSES */ .height--30 { min-height: 30vh; } .height--40 { min-height: 40vh; } .height--50 { min-height: 50vh; } .height--60 { min-height: 60vh; } .height--70 { min-height: 70vh; } .height--80 { min-height: 80vh; } .height--90 { min-height: 90vh; } .height--full { min-height: 100vh; } .max-height--30 { max-height: 30vh; } .max-height--40 { max-height: 40vh; } .max-height--50 { max-height: 50vh; } .max-height--60 { max-height: 60vh; } .max-height--70 { max-height: 70vh; } .max-height--80 { max-height: 80vh; } .max-height--90 { max-height: 90vh; } /*** OBJECT-FIT UTILITY CLASSES Use these classes when images require a set width and height. They prevent image stretching and allow control over which area of the image is shown. ***/ .object-fit--cover { object-fit: cover; } .object-fit--contain { object-fit: contain; } .object-fit--top-left { object-position: 10% 10%; } .object-fit--top-center { object-position: 50% 10%; } .object-fit--top-right { object-position: 90% 10%; } .object-fit--center-left { object-position: 10% 50%; } .object-fit--center-right { object-position: 90% 50%; } .object-fit--bottom-left { object-position: 10% 90%; } .object-fit--bottom-center { object-position: 50% 90%; } .object-fit--bottom-right { object-position: 90% 90%; } /*** ROUNDED RADIUS UTILITY CLASSES These control the border radius of elements ***/ [class*="rounded--"] { border-radius: var(--radius); } .rounded--xsmall { --radius: var(--radius-xsmall); } .rounded--small { --radius: var(--radius-small); } .rounded--base { --radius: var(--base-radius); } .rounded--large { --radius: var(--radius-large); } .rounded--xlarge { --radius: var(--radius-xlarge); } .rounded--xxlarge { --radius: var(--radius-xxlarge); } .rounded--circle { --radius: var(--radius-50); } .rounded--none { --radius: none; } /* STICKY UTILITY CLASSES */ .sticky { position: sticky; top: 0; } @media (max-width: 479px) { .sticky-off--s { position: static; } } @media (max-width: 767px) { .sticky-off--m { position: static; } } @media (max-width: 991px) { .sticky-off--l { position: static; } } .sticky-top--small { top: 2.5%; } .sticky-top--medium { top: 5%; } .sticky-top--large { top: 10%; } /*** OPACITY CLASSES These control the opacity of elements. ***/ .opacity--5 { opacity: 0.05; } .opacity--10 { opacity: 0.1; } .opacity--20 { opacity: 0.2; } .opacity--30 { opacity: 0.3; } .opacity--40 { opacity: 0.4; } .opacity--50 { opacity: 0.5; } .opacity--60 { opacity: 0.6; } .opacity--70 { opacity: 0.7; } .opacity--80 { opacity: 0.8; } .opacity--90 { opacity: 0.9; } .opacity--95 { opacity: 0.95; } /*** FLIP CLASSES Flip items and images. ***/ .flip--x, .flip--x > div { transform: scaleX(-1); } .flip--y, .flip--y > div { transform: scaleY(-1); } .flip--xy, .flip--xy > div { transform: scale(-1, -1); } /* CARD UTILITY CLASSES Default cards that pad and space content automatically. */ .card--xsmall { padding: var(--space-xsmall); } .card--small { padding: var(--space-small); } .card--base { padding: var(--space-base); } .card--large { padding: var(--space-large); } .card--xlarge { padding: var(--space-xlarge); } .card--xxlarge { padding: var(--space-xxlarge); } .owl-card--xsmall { padding: var(--space-xsmall); } .owl-card--xsmall > * + * { margin-top: var(--space-xsmall); } .owl-card--small { padding: var(--space-small); } .owl-card--small > * + * { margin-top: var(--space-small); } .owl-card--base { padding: var(--space-base); } .owl-card--base > * + * { margin-top: var(--space-base); } .owl-card--large { padding: var(--space-large); } .owl-card--large > * + * { margin-top: var(--space-large); } /* FALLBACKS OVERRIDES */ @supports (font-size: calc(1vw + 2vw)) { :root { --text-xsmall: var(--text-xsmall-calc); --text-small: var(--text-small-calc); --text-base: var(--text-base-calc); --text-large: var(--text-large-calc); --text-xlarge: var(--text-xlarge-calc); --text-2xlarge: var(--text-2xlarge-calc); --text-3xlarge: var(--text-3xlarge-calc); --text-4xlarge: var(--text-4xlarge-calc); --text-5xlarge: var(--text-5xlarge-calc); --text-mega: var(--text-mega-calc); } } @media (min-width: 1441px) { @supports (font-size: calc(1vw + 2vw)) and (not (font-size: clamp(1vw, 2vw, 3vw))) { :root { --text-xsmall: calc(var(--text-xsmall-max) * 1rem); --text-small: calc(var(--text-small-max) * 1rem); --text-base: calc(var(--text-base-max) * 1rem); --text-large: calc(var(--text-large-max) * 1rem); --text-xlarge: calc(var(--text-xlarge-max) * 1rem); --text-2xlarge: calc(var(--text-2xlarge-max) * 1rem); --text-3xlarge: calc(var(--text-3xlarge-max) * 1rem); --text-4xlarge: calc(var(--text-4xlarge-max) * 1rem); --text-5xlarge: calc(var(--text-5xlarge-max) * 1rem); --text-mega: calc(var(--text-mega-max) * 1rem); } } } @supports (font-size: clamp(1vw, 2vw, 3vw)) { :root { --text-xsmall: var(--text-xsmall-clamp); --text-small: var(--text-small-clamp); --text-base: var(--text-base-clamp); --text-large: var(--text-large-clamp); --text-xlarge: var(--text-xlarge-clamp); --text-2xlarge: var(--text-2xlarge-clamp); --text-3xlarge: var(--text-3xlarge-clamp); --text-4xlarge: var(--text-4xlarge-clamp); --text-5xlarge: var(--text-5xlarge-clamp); --text-mega: var(--text-mega-clamp); } } @supports (padding: calc(1vw + 3vw)) { :root { --space-xsmall: var(--space-xsmall-calc); --space-small: var(--space-small-calc); --space-base: var(--space-base-calc); --space-large: var(--space-large-calc); --space-xlarge: var(--space-xlarge-calc); --space-xxlarge: var(--space-xxlarge-calc); --section-space-xsmall: var(--section-space-xsmall-calc); --section-space-small: var(--section-space-small-calc); --section-space-base: var(--section-space-base-calc); --section-space-large: var(--section-space-large-calc); --section-space-xlarge: var(--section-space-xlarge-calc); --section-space-xxlarge: var(--section-space-xxlarge-calc); } } @media (min-width: 1441px) { @supports (padding: calc(1vw + 3vw)) { :root { --space-xsmall: calc(var(--space-xsmall-max) * 1rem); --space-small: calc(var(--space-small-max) * 1rem); --space-base: calc(var(--space-base-max) * 1rem); --space-large: calc(var(--space-large-max) * 1rem); --space-xlarge: calc(var(--space-xlarge-max) * 1rem); --space-xxlarge: calc(var(--space-xxlarge-max) * 1rem); --section-space-xsmall: calc(var(--section-xsmall-max) * 1rem); --section-space-small: calc(var(--section-small-max) * 1rem); --section-space-base: calc(var(--section-base-max) * 1rem); --section-space-large: calc(var(--section-large-max) * 1rem); --section-space-xlarge: calc(var(--section-xlarge-max) * 1rem); --section-space-xxlarge: calc(var(--section-xxlarge-max) * 1rem); } } } @supports (padding: clamp(1vw, 2vw, 3vw)) { :root { --space-xsmall: var(--space-xsmall-clamp); --space-small: var(--space-small-clamp); --space-base: var(--space-base-clamp); --space-large: var(--space-large-clamp); --space-xlarge: var(--space-xlarge-clamp); --space-xxlarge: var(--space-xxlarge-clamp); --section-space-xsmall: var(--section-space-xsmall-clamp); --section-space-small: var(--section-space-small-clamp); --section-space-base: var(--section-space-base-clamp); --section-space-large: var(--section-space-large-clamp); --section-space-xlarge: var(--section-space-xlarge-clamp); --section-space-xxlarge: var(--section-space-xxlarge-clamp); } } /*** CENTERING CLASSES Quickly align elements without needing to know Flexbox. ***/ .center--y:not(.ct-section), .ct-section.center--y > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; } .center--x:not(.ct-section), .ct-section.center--x > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } @media only screen and (max-width: 479px) { .center--y-s:not(.ct-section), .ct-section.center--y-s > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; } .center--x-s:not(.ct-section), .ct-section.center--x-s > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } } @media only screen and (max-width: 767px) { .center--y-m:not(.ct-section), .ct-section.center--y-m > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; } .center--x-m:not(.ct-section), .ct-section.center--x-m > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } } @media only screen and (max-width: 991px) { .center--y-l:not(.ct-section), .ct-section.center--y-l > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; } .center--x-l:not(.ct-section), .ct-section.center--x-l > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } } @media only screen and (max-width: 1439px) { .center--y-xl:not(.ct-section), .ct-section.center--y-xl > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; } .center--x-xl:not(.ct-section), .ct-section.center--x-xl > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } } /*** CENTERING CLASSES Quickly align elements without needing to know Flexbox. ***/ [class*="center--"]:not(.ct-section), .ct-section[class*="center--"] > .ct-section-inner-wrap { display: flex; } .center--all:not(.ct-section), .ct-section.center--all > .ct-section-inner-wrap { flex-direction: column; align-items: center; align-content: center; justify-items: center; justify-content: center; text-align: center; } .center--bottom:not(.ct-section), .ct-section.center--bottom > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: flex-end; align-items: center; } .center--top:not(.ct-section), .ct-section.center--top > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } .center--left:not(.ct-section), .ct-section.center--left > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; text-align: left; } .center--right:not(.ct-section), .ct-section.center--right > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-end; } @media only screen and (max-width: 479px) { .center--all-s:not(.ct-section), .ct-section.center--all-s > .ct-section-inner-wrap { align-items: center; align-content: center; justify-items: center; justify-content: center; text-align: center; } .center--bottom-s:not(.ct-section), .ct-section.center--bottom-s > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: flex-end; align-items: center; } .center--top-s:not(.ct-section), .ct-section.center--top-s > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } .center--left-s:not(.ct-section), .ct-section.center--left-s > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; text-align: left; } .center--right-s:not(.ct-section), .ct-section.center--right-s > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-end; } } @media only screen and (max-width: 767px) { .center--all-m:not(.ct-section), .ct-section.center--all-m > .ct-section-inner-wrap { align-items: center; align-content: center; justify-items: center; justify-content: center; text-align: center; } .center--bottom-m:not(.ct-section), .ct-section.center--bottom-m > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: flex-end; align-items: center; } .center--top-m:not(.ct-section), .ct-section.center--top-m > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } .center--left-m:not(.ct-section), .ct-section.center--left-m > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; text-align: left; } .center--right-m:not(.ct-section), .ct-section.center--right-m > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-end; } } @media only screen and (max-width: 991px) { .center--all-l:not(.ct-section), .ct-section.center--all-l > .ct-section-inner-wrap { align-items: center; align-content: center; justify-items: center; justify-content: center; text-align: center; } .center--bottom-l:not(.ct-section), .ct-section.center--bottom-l > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: flex-end; align-items: center; } .center--top-l:not(.ct-section), .ct-section.center--top-l > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } .center--left-l:not(.ct-section), .ct-section.center--left-l > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; text-align: left; } .center--right-l:not(.ct-section), .ct-section.center--right-l > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-end; } } @media only screen and (max-width: 1439px) { .ct-section.center--all-xl > .ct-section-inner-wrap, .center--all-xl:not(.ct-section) { align-items: center; align-content: center; justify-items: center; justify-content: center; text-align: center; } .center--bottom-xl:not(.ct-section), .ct-section.center--bottom-xl > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: flex-end; align-items: center; } .center--top-xl:not(.ct-section), .ct-section.center--top-xl > .ct-section-inner-wrap { flex-direction: row; justify-items: center; justify-content: center; align-items: flex-start; } .center--left-xl:not(.ct-section), .ct-section.center--left-xl > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-start; text-align: left; } .center--right-xl:not(.ct-section), .ct-section.center--right-xl > .ct-section-inner-wrap { flex-direction: column; justify-items: center; justify-content: center; align-items: flex-end; } } :root { --grid-break--2: calc( ((var(--vp-max) - (var(--base-space) * 2)) * 1rem) / 2.99 ); --grid-break--3: calc( ((var(--vp-max) - (var(--base-space) * 2)) * 1rem) / 3.99 ); --grid-break--4: calc( ((var(--vp-max) - (var(--base-space) * 2)) * 1rem) / 4.99 ); --grid-break--5: calc( ((var(--vp-max) - (var(--base-space) * 2)) * 1rem) / 5.99 ); --grid-break--6: calc( ((var(--vp-max) - (var(--base-space) * 2)) * 1rem) / 6.99 ); } [class*="grid--"]:not(.ct-section), .ct-section[class*="grid--"] .ct-section-inner-wrap { display: grid !important; grid-template-columns: var(--grid-template-columns); grid-gap: var(--grid-gap); } /* STANDARD GRIDS */ .grid--1 { --grid-template-columns: 1fr; width: 100%; } .grid--2 { --grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .grid--3 { --grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .grid--4 { --grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } .grid--5 { --grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; } .grid--6 { --grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; } /* AUTO GRIDS */ .grid--auto-2 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--2), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); width: 100%; } .grid--auto-3 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--3), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); width: 100%; } .grid--auto-4 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--4), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); width: 100%; } .grid--auto-5 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--5), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); width: 100%; } .grid--auto-6 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--6), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); width: 100%; } /*** PREMADE GRIDS ***/ .grid--1-2 { --grid-template-columns: 1fr 2fr; width: 100%; } .grid--2-1 { --grid-template-columns: 2fr 1fr; width: 100%; } .grid--1-3 { --grid-template-columns: 1fr 3fr; width: 100%; } .grid--3-1 { --grid-template-columns: 3fr 1fr; width: 100%; } .grid--2-3 { --grid-template-columns: 2fr 3fr; width: 100%; } .grid--3-2 { --grid-template-columns: 3fr 2fr; width: 100%; } /*** PREMADE AUTO GRIDS ***/ .grid--auto-1-2 { --grid-template-columns: 1fr 2fr; width: 100%; } .grid--auto-2-1 { --grid-template-columns: 2fr 1fr; width: 100%; } .grid--auto-1-3 { --grid-template-columns: 1fr 3fr; width: 100%; } .grid--auto-3-1 { --grid-template-columns: 3fr 1fr; width: 100%; } .grid--auto-2-3 { --grid-template-columns: 2fr 3fr; width: 100%; } .grid--auto-3-2 { --grid-template-columns: 3fr 2fr; width: 100%; } @media (max-width: 991px) { .grid--auto-1-2 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--3), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); } .grid--auto-1-3 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--3), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); } .grid--auto-3-2 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--3), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); } .grid--auto-2-3 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--3), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); } .grid--auto-2-1 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--3), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); } .grid--auto-3-1 { --grid-template-columns: repeat( auto-fit, minmax( min(var(--grid-break--3), 100vw - (var(--base-space) * 3) * 1rem), 1fr ) ); } } /* COL SPAN CONTROL */ .col-span--all { grid-column: 1 / -1; } .col-span--2 { grid-column: span 2; } .col-span--3 { grid-column: span 3; } .col-span--4 { grid-column: span 4; } .col-span--5 { grid-column: span 5; } .col-span--6 { grid-column: span 6; } /* ROW SPAN CONTROL */ [class*="row-span--"] { align-self: stretch; } .row-span--2 { grid-row: span 2; } .row-span--3 { grid-row: span 3; } .row-span--4 { grid-row: span 4; } .row-span--5 { grid-row: span 5; } .row-span--6 { grid-row: span 6; } /* CELL ORDER CONTROL ACROSS ROWS */ .row-start--1 { grid-row-start: 1; } .row-start--2 { grid-row-start: 2; } .row-start--3 { grid-row-start: 3; } .row-start--4 { grid-row-start: 4; } .row-start--5 { grid-row-start: 5; } .row-start--6 { grid-row-start: 6; } /* CELL ORDER CONTROL ACROSS COLUMNS */ .col-start--1 { grid-column-start: 1; } .col-start--2 { grid-column-start: 2; } .col-start--3 { grid-column-start: 3; } .col-start--4 { grid-column-start: 4; } .col-start--5 { grid-column-start: 5; } .col-start--6 { grid-column-start: 6; } /* QUICK ORDERING PROPERTIES */ .order--first { order: -1; } .order--last { order: 999; } /* GRID GAPS */ .ct-section[class*="gap--"] .ct-section-inner-wrap { grid-gap: var(--grid-gap); } .gap--xsmall { gap: var(--space-xsmall); --grid-gap: var(--space-xsmall); } .gap--small { gap: var(--space-small); --grid-gap: var(--space-small); } .gap--base { gap: var(--space-base); --grid-gap: var(--space-base); } .gap--large { gap: var(--space-large); --grid-gap: var(--space-large); } .gap--xlarge { gap: var(--space-xlarge); --grid-gap: var(--space-xlarge); } .gap--xxlarge { gap: var(--space-xxlarge); --grid-gap: var(--space-xxlarge); } /*** BREAKPOINTS ***/ /* XL BREAKPOINT */ @media (max-width: 1439px) { /* GRID COLUMNS */ .grid--xl-1 { --grid-template-columns: 1fr; } .grid--xl-2 { --grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--xl-3 { --grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--xl-4 { --grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--xl-5 { --grid-template-columns: repeat(5, minmax(0, 1fr)); } /* ROW STARTS */ .row-start--xl-1 { grid-row-start: 1; } .row-start--xl-2 { grid-row-start: 2; } .row-start--xl-3 { grid-row-start: 3; } .row-start--xl-4 { grid-row-start: 4; } .row-start--xl-5 { grid-row-start: 5; } .row-start--xl-6 { grid-row-start: 6; } /* COL STARTS */ .col-start--xl-1 { grid-column-start: 1; } .col-start--xl-2 { grid-column-start: 2; } .col-start--xl-3 { grid-column-start: 3; } .col-start--xl-4 { grid-column-start: 4; } .col-start--xl-5 { grid-column-start: 5; } .col-start--xl-6 { grid-column-start: 6; } /* ORDER */ .order--first-xl { order: -1; } .order--last-xl { order: 999; } /* ROW SPANS */ .row-span--xl-1 { grid-row: auto / span 1; } .row-span--xl-2 { grid-row: auto / span 2; } .row-span--xl-3 { grid-row: auto / span 3; } .row-span--xl-4 { grid-row: auto / span 4; } .row-span--xl-5 { grid-row: auto / span 5; } .row-span--xl-6 { grid-row: auto / span 6; } /* COL SPANS */ .col-span--xl-1 { grid-column: span 1; } .col-span--xl-2 { grid-column: span 2; } .col-span--xl-3 { grid-column: span 3; } .col-span--xl-4 { grid-column: span 4; } .col-span--xl-5 { grid-column: span 5; } .col-span--xl-6 { grid-column: span 6; } } /* L BREAKPOINT */ @media (max-width: 991px) { /* GRID COLUMNS */ .grid--l-1 { --grid-template-columns: 1fr; } .grid--l-2 { --grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--l-3 { --grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--l-4 { --grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--l-5 { --grid-template-columns: repeat(5, minmax(0, 1fr)); } /* ROW STARTS */ .row-start--l-1 { grid-row-start: 1; } .row-start--l-2 { grid-row-start: 2; } .row-start--l-3 { grid-row-start: 3; } .row-start--l-4 { grid-row-start: 4; } .row-start--l-5 { grid-row-start: 5; } .row-start--l-6 { grid-row-start: 6; } /* COL STARTS */ .col-start--l-1 { grid-column-start: 1; } .col-start--l-2 { grid-column-start: 2; } .col-start--l-3 { grid-column-start: 3; } .col-start--l-4 { grid-column-start: 4; } .col-start--l-5 { grid-column-start: 5; } .col-start--l-6 { grid-column-start: 6; } /* ORDER */ .order--first-l { order: -1; } .order--last-l { order: 999; } /* ROW SPANS */ .row-span--l-1 { grid-row: auto / span 1; } .row-span--l-2 { grid-row: auto / span 2; } .row-span--l-3 { grid-row: auto / span 3; } .row-span--l-4 { grid-row: auto / span 4; } .row-span--l-5 { grid-row: auto / span 5; } .row-span--l-6 { grid-row: auto / span 6; } /* COL SPANS */ .col-span--l-1 { grid-column: span 1; } .col-span--l-2 { grid-column: span 2; } .col-span--l-3 { grid-column: span 3; } .col-span--l-4 { grid-column: span 4; } .col-span--l-5 { grid-column: span 5; } .col-span--l-6 { grid-column: span 6; } } /* M BREAKPOINT */ @media (max-width: 767px) { /* GRID COLUMNS */ .grid--m-1 { --grid-template-columns: 1fr; } .grid--m-2 { --grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--m-3 { --grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--m-4 { --grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ROW STARTS */ .row-start--m-1 { grid-row-start: 1; } .row-start--m-2 { grid-row-start: 2; } .row-start--m-3 { grid-row-start: 3; } .row-start--m-4 { grid-row-start: 4; } .row-start--m-5 { grid-row-start: 5; } .row-start--m-6 { grid-row-start: 6; } /* COL STARTS */ .col-start--m-1 { grid-column-start: 1; } .col-start--m-2 { grid-column-start: 2; } .col-start--m-3 { grid-column-start: 3; } .col-start--m-4 { grid-column-start: 4; } .col-start--m-5 { grid-column-start: 5; } .col-start--m-6 { grid-column-start: 6; } /* ORDER */ .order--first-m { order: -1; } .order--last-m { order: 999; } /* ROW SPANS */ .row-span--m-1 { grid-row: auto / span 1; } .row-span--m-2 { grid-row: auto / span 2; } .row-span--m-3 { grid-row: auto / span 3; } .row-span--m-4 { grid-row: auto / span 4; } .row-span--m-5 { grid-row: auto / span 5; } .row-span--m-6 { grid-row: auto / span 6; } /* COL SPANS */ .col-span--m-1 { grid-column: span 1; } .col-span--m-2 { grid-column: span 2; } .col-span--m-3 { grid-column: span 3; } .col-span--m-4 { grid-column: span 4; } .col-span--m-5 { grid-column: span 5; } .col-span--m-6 { grid-column: span 6; } } /* S BREAKPOINT */ @media (max-width: 479px) { /* GRID COLUMNS */ .grid--s-1 { --grid-template-columns: 1fr; } .grid--s-2 { --grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--s-3 { --grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--s-4 { --grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ROW STARTS */ .row-start--s-1 { grid-row-start: 1; } .row-start--s-2 { grid-row-start: 2; } .row-start--s-3 { grid-row-start: 3; } .row-start--s-4 { grid-row-start: 4; } .row-start--s-5 { grid-row-start: 5; } .row-start--s-6 { grid-row-start: 6; } /* COL STARTS */ .col-start--s-1 { grid-column-start: 1; } .col-start--s-2 { grid-column-start: 2; } .col-start--s-3 { grid-column-start: 3; } .col-start--s-4 { grid-column-start: 4; } .col-start--s-5 { grid-column-start: 5; } .col-start--s-6 { grid-column-start: 6; } /* ORDER */ .order--first-s { order: -1; } .order--last-s { order: 999; } /* ROW SPANS */ .row-span--s-1 { grid-row: auto / span 1; } .row-span--s-2 { grid-row: auto / span 2; } .row-span--s-3 { grid-row: auto / span 3; } .row-span--s-4 { grid-row: auto / span 4; } .row-span--s-5 { grid-row: auto / span 5; } .row-span--s-6 { grid-row: auto / span 6; } /* COL SPANS */ .col-span--s-1 { grid-column: span 1; } .col-span--s-2 { grid-column: span 2; } .col-span--s-3 { grid-column: span 3; } .col-span--s-4 { grid-column: span 4; } .col-span--s-5 { grid-column: span 5; } .col-span--s-6 { grid-column: span 6; } } /*** FLEXBOX & GRID ALIGNMENT CLASSES These control the position/behavior of elements in a flexbox or grid. ***/ [class*="flex--"]:not(.ct-section), .ct-section[class*="flex--"] > .ct-section-inner-wrap, [class*="align--"]:not(.ct-section), [class*="justify--"]:not(.ct-section), .ct-section[class*="align--"] > .ct-section-inner-wrap, .ct-section[class*="justify--"] > .ct-section-inner-wrap { display: flex; } .flex--row:not(.ct-section), .ct-section.flex--row > .ct-section-inner-wrap { flex-direction: row; } .flex--col:not(.ct-section), .ct-section.flex--col > .ct-section-inner-wrap { flex-direction: column; } .flex--row-reverse:not(.ct-section), .ct-section.flex--row-reverse > .ct-section-inner-wrap { flex-direction: row-reverse; } .flex--col-reverse:not(.ct-section), .ct-section.flex--col-reverse > .ct-section-inner-wrap { flex-direction: column-reverse; } .justify-content--start:not(.ct-section), .ct-section.justify-content--start > .ct-section-inner-wrap { justify-content: flex-start; } .justify-content--center:not(.ct-section), .ct-section.justify-content--center > .ct-section-inner-wrap { justify-content: center; } .justify-content--end:not(.ct-section), .ct-section.justify-content--end > .ct-section-inner-wrap { justify-content: flex-end; } .justify-content--between:not(.ct-section), .ct-section.justify-content--between > .ct-section-inner-wrap { justify-content: space-between; } .justify-content--around:not(.ct-section), .ct-section.justify-content--around > .ct-section-inner-wrap { justify-content: space-around; } .justify-items--start:not(.ct-section), .ct-section.justify-items--start > .ct-section-inner-wrap { justify-items: flex-start; } .justify-items--center:not(.ct-section), .ct-section.justify-items--center > .ct-section-inner-wrap { justify-items: center; } .justify-items--end:not(.ct-section), .ct-section.justify-items--end > .ct-section-inner-wrap { justify-items: flex-end; } .align-items--start:not(.ct-section), .ct-section.align-items--start > .ct-section-inner-wrap { align-items: flex-start; } .align-items--center:not(.ct-section), .ct-section.align-items--center > .ct-section-inner-wrap { align-items: center; } .align-items--end:not(.ct-section), .ct-section.align-items--end > .ct-section-inner-wrap { align-items: flex-end; } .align-items--baseline:not(.ct-section), .ct-section.align-items--baseline > .ct-section-inner-wrap { align-items: baseline; } .align-content--start:not(.ct-section), .ct-section.align-content--start > .ct-section-inner-wrap { align-content: flex-start; } .align-content--center:not(.ct-section), .ct-section.align-content--center > .ct-section-inner-wrap { align-content: center; } .align-content--end:not(.ct-section), .ct-section.align-content--end > .ct-section-inner-wrap { align-content: flex-end; } .align-content--baseline:not(.ct-section), .ct-section.align-content--baseline > .ct-section-inner-wrap { align-content: baseline; } .flex--wrap:not(.ct-section), .ct-section.flex--row > .ct-section-inner-wrap { flex-wrap: wrap; } .self--start { align-self: flex-start; } .self--end { align-self: flex-end; } .self--center { align-self: center; } .self--stretch { align-self: stretch; } .stretch:not(.ct-section), .ct-section.stretch .ct-section-inner-wrap { display: flex; align-content: stretch; align-items: stretch; justify-content: stretch; justify-items: stretch; } @media only screen and (max-width: 479px) { .flex--col-s:not(.ct-section), .ct-section.flex--col-s > .ct-section-inner-wrap { flex-direction: column; } .flex--row-s:not(.ct-section), .ct-section.flex--row-s > .ct-section-inner-wrap { flex-direction: row; } .flex--row-reverse-s:not(.ct-section), .ct-section.flex--row-reverse-s > .ct-section-inner-wrap { flex-direction: row-reverse; } .flex--col-reverse-s:not(.ct-section), .ct-section.flex--col-reverse-s > .ct-section-inner-wrap { flex-direction: column-reverse; } } @media only screen and (max-width: 767px) { .flex--col-m:not(.ct-section), .ct-section.flex--col-m > .ct-section-inner-wrap { flex-direction: column; } .flex--row-m:not(.ct-section), .ct-section.flex--row-m > .ct-section-inner-wrap { flex-direction: row; } .flex--row-reverse-m:not(.ct-section), .ct-section.flex--row-reverse-m > .ct-section-inner-wrap { flex-direction: row-reverse; } .flex--col-reverse-m:not(.ct-section), .ct-section.flex--col-reverse-m > .ct-section-inner-wrap { flex-direction: column-reverse; } } @media only screen and (max-width: 991px) { .flex--col-l:not(.ct-section), .ct-section.flex--col-l > .ct-section-inner-wrap { flex-direction: column; } .flex--row-l:not(.ct-section), .ct-section.flex--row-l > .ct-section-inner-wrap { flex-direction: row; } .flex--row-reverse-l:not(.ct-section), .ct-section.flex--row-reverse-l > .ct-section-inner-wrap { flex-direction: row-reverse; } .flex--col-reverse-l:not(.ct-section), .ct-section.flex--col-reverse-l > .ct-section-inner-wrap { flex-direction: column-reverse; } } @media only screen and (max-width: 1439px) { .flex--col-xl:not(.ct-section), .ct-section.flex--col-xl > .ct-section-inner-wrap { flex-direction: column; } .flex--row-xl:not(.ct-section), .ct-section.flex--row-xl > .ct-section-inner-wrap { flex-direction: row; } .flex--row-reverse-xl:not(.ct-section), .ct-section.flex--row-reverse-xl > .ct-section-inner-wrap { flex-direction: row-reverse; } .flex--col-reverse-xl:not(.ct-section), .ct-section.flex--col-reverse-xl > .ct-section-inner-wrap { flex-direction: column-reverse; } }/*** MASK IMAGE ***/ .mask1 { -webkit-mask-image:url(/wp-content/uploads/2022/01/mask-image-01.png); -webkit-mask-position:center center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover; mask-image:url(/wp-content/uploads/2022/01/mask-image-01.png); mask-position:center center; mask-repeat:no-repeat; mask-size:cover; } .mask2 { -webkit-mask-image:url(/wp-content/uploads/2022/01/mask-image-02.png); -webkit-mask-position:center center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover; mask-image:url(/wp-content/uploads/2022/01/mask-image-02.png); mask-position:center center; mask-repeat:no-repeat; mask-size:cover; } .mask3 { -webkit-mask-image:url(/wp-content/uploads/2022/01/mask-image-03.png); -webkit-mask-position:center center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover; mask-image:url(/wp-content/uploads/2022/01/mask-image-03.png); mask-position:center center; mask-repeat:no-repeat; mask-size:cover; } .mask4 { -webkit-mask-image:url(/wp-content/uploads/2022/01/mask-image-04.png); -webkit-mask-position:center center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover; mask-image:url(/wp-content/uploads/2022/01/mask-image-04.png); mask-position:center center; mask-repeat:no-repeat; mask-size:cover; } .mask5 { -webkit-mask-image:url(/wp-content/uploads/2022/01/mask-image-05.png); -webkit-mask-position:center center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover; mask-image:url(/wp-content/uploads/2022/01/mask-image-05.png); mask-position:center center; mask-repeat:no-repeat; mask-size:cover; } .mask6 { -webkit-mask-image:url(/wp-content/uploads/2022/01/mask-image-06.png); -webkit-mask-position:center center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover; mask-image:url(/wp-content/uploads/2022/01/mask-image-06.png); mask-position:center center; mask-repeat:no-repeat; mask-size:cover; } .mask7 { -webkit-mask-image:url(/wp-content/uploads/2022/02/mask-image-07.png); -webkit-mask-position:center center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover; mask-image:url(/wp-content/uploads/2022/02/mask-image-07.png); mask-position:center center; mask-repeat:no-repeat; mask-size:cover; } /*** BOX-SHADOW CLASSES Quickly apply multi-layered box shadows. ***/ .box-shadow--small { box-shadow: 1px 1px 4px 2px #353535; } .box-shadow--medium { box-shadow: 2px 2px 8px 2px #353535; } .box-shadow--large { box-shadow: 3px 3px 16px 3px #353535; } .box-shadow--xlarge { box-shadow: 4px 4px 24px 4px #353535; } /*** TEXT-SHADOW CLASSES Quickly apply text shadows. ***/ .text-shadow--small { text-shadow: 0px 0px 0px #353535; } .text-shadow--medium { text-shadow: 0px 0px 8px #353535; } .text-shadow--large { text-shadow: 0px 0px 16px #353535; } .text-shadow--xlarge { text-shadow: 0px 0px 24px #353535; } .text-shadow-white--small { text-shadow: 0px 0px 0px #FFFFFF; } .text-shadow-white--medium { text-shadow: 0px 0px 8px #FFFFFF; } .text-shadow-white--large { text-shadow: 0px 0px 16px #FFFFFF; } .text-shadow-white--xlarge { text-shadow: 0px 0px 24px #FFFFFF; } /*** FIX IMAGE STRETCH Fix Image Stretch in Oxygen Inner Content. ***/ .wp-block-image img { height: auto; }