@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Lato:wght@300;400&display=swap'); * { margin: 0; padding: 0; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; } article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, main { display: block; } mark, rp, rt, ruby, summary, time { display: inline; } a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var { background: transparent; border: 0 none; font-weight: inherit; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; } a { text-decoration: none; outline: none !important; vertical-align: baseline; } b, strong { font-weight: bold; } ul, ol { list-style: none; } q { quotes: none; } table, table td { padding: 0; border: none; border-collapse: collapse; } img { vertical-align: top; max-width: 100%; } embed { vertical-align: top; } input, textarea { font-family: inherit; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } input, button { -webkit-appearance: none; outline: none; background: transparent; } button::-moz-focus-inner { border: 0; } th { text-align: left; } textarea { outline: none !important; } button { font-family: inherit; cursor: pointer; color: inherit; } html, body { min-height: 100%; } fieldset, legend, label, select, input, textarea, form, button, optgroup { -webkit-appearance: none !important; } i, .fa, .fab, .fal, .far, .fas, .material-icons-outlined, .material-icons { line-height: inherit; } /* ---------------------------------------- Global ---------------------------------------- */ .mad-page-wrapper { overflow: hidden; } body { overflow-x: hidden; overflow-y: initial !important; } html { overflow-y: initial !important; } ::-webkit-selection { color: var(--color-neutral-0); background-color: var(--color-neutral); } ::-moz-selection { color: var(--color-neutral-0); background-color: var(--color-neutral); } ::selection { color: var(--color-neutral-0); background-color: var(--color-neutral); } mark { color: var(--color-neutral-0); background-color: var(--color-neutral); } mark.style-2 { color: var(--color-neutral-80); background-color: var(--color-neutral-15); } .clearfix::after { content: ""; display: block; clear: both; } .page-wrapper { overflow: hidden; } [data-bg-image-src] { background-size: cover; background-position: center; background-repeat: no-repeat; } .animated { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .w-100 { width: 100%; } /* ---------------------------------------- Typography ---------------------------------------- */ :root { font-size: 16px; --color-primary: #C28566; --color-primary-darker: #AB6A49; --color-primary-lighter: #DF936D; --color-primary-50: #E8CDBF; --color-primary-25: #F4E8E1; --color-primary-10: #F9F3F0; --color-primary-5: #FCF9F7; --color-neutral: #0D0D0D; --color-neutral-80: #3D3D3D; --color-neutral-60: #6E6E6E; --color-neutral-40: #9E9E9E; --color-neutral-20: #CFCFCF; --color-neutral-15: #DBDBDB; --color-neutral-10: #E7E7E7; --color-neutral-5: #F3F3F3; --color-neutral-0: #fff; --color-secondary: #402B1D; --color-secondary-80: #665346; --color-secondary-60: #8C7D71; --color-secondary-40: #B3A59E; --color-secondary-20: #D9D0CA; --color-secondary-10: #ECE7E5; --color-secondary-5: #F5F3F0; --br-custom: 60% 40% 60% 40% / 50% 30% 70% 50%; --br-main: 0.25rem; } body { font-family: 'Nanum Gothic', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-text-size-adjust: 100%; font-weight: 400; color: var(--color-neutral-80); } address:not(:last-child) { margin-bottom: 1.625rem; } q, kbd, strong, em, tt, var, span, del, big, small { vertical-align: baseline; } /* ---------------------------------------- Headings ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--color-neutral); font-family: 'Judson', sans-serif; font-weight: 400; letter-spacing: -0.5px; } h1:not(:last-child) { margin-bottom: 3rem; } h2:not(:last-child) { margin-bottom: 2.5rem; } h3:not(:last-child) { margin-bottom: 2rem; } h4:not(:last-child) { margin-bottom: 1.5rem; } h5:not(:last-child) { margin-bottom: 1.5rem; } h6:not(:last-child) { margin-bottom: 1.5rem; } h1 { font-size: 4rem; line-height: 4.5rem; } h2 { font-size: 3.5rem; line-height: 4rem; } h3 { font-size: 3rem; line-height: 3.5rem; } h4 { font-size: 2.25rem; line-height: 3rem; } h5 { font-size: 1.875rem; line-height: 2.5rem; } h6 { font-size: 1.5rem; line-height: 2rem; } .mad-title-wrap:not(:last-child) { margin-bottom: 3rem; } .mad-title-wrap .mad-title-row { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 1rem; align-items: flex-end; justify-content: space-between; width: 100%; } .mad-pre-title { font-size: 0.875rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 3.5px; position: relative; align-items: center; color: var(--color-secondary); } .mad-pre-title:not(:last-child) { margin-bottom: 0.5rem; } .mad-title span { font-style: italic; } /* ---------------------------------------- Paragraphs ---------------------------------------- */ p { line-height: inherit; } p:not(:last-child) { margin-bottom: 1.5rem; } p.mad-text-small:not(:last-child) { margin-bottom: 1.3125rem; } .mad-text-mini { font-size: 0.8125rem; line-height: 1rem; } .mad-text-small { font-size: 0.875rem; line-height: 1.5rem; } .mad-text-normal { font-size: 1rem; line-height: 1.5rem; } .mad-text-medium { font-size: 1.125rem; line-height: 2rem; } .mad-text-color-2 { color: var(--color-neutral-60); } .mad-text-color-3 { color: var(--color-secondary); } /* ---------------------------------------- Links ---------------------------------------- */ a { color: inherit; } .mad-link, a, button { transition: all .5s ease; } .mad-link { color: var(--color-primary); } .mad-link:hover { color: var(--color-primary-lighter); } /* ---------------------------------------- Icons ---------------------------------------- */ [class*="mad-font-icon"] { line-height: 1; } /* ---------------------------------------- Utils classes ---------------------------------------- */ .mad-d-none { display: none; } .mad-fw-bold { font-weight: bold; } .mad-tt-uppercase { text-transform: uppercase; } .mad-d-down-xxxl-none { display: none; } .mad-fw-down-xxxl-bold { font-weight: bold; } .alignleft { float: left; } .alignright { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } img[class*="align"] { margin-bottom: 0.875rem; } img.alignleft { margin-right: 1.875rem; } img.alignright { margin-left: 1.875rem; } .img-wrap { position: relative; overflow: hidden; margin-bottom: -1rem; } .img-wrap img { border-radius: var(--br-main); } .img-wrap>* { margin-bottom: 1rem; } /* ---------------------------------------- 2. Layout ---------------------------------------- */ /* ---------------------------------------- Preloader ---------------------------------------- */ .mad-preloader-circle, .mad-preloader { position: fixed; width: 260vw; height: 260vw; margin-left: -130vw; margin-top: -130vw; background-color: #fff; z-index: 50; border-radius: 50%; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transition-duration: 700ms; transition-duration: 700ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-preloader-circle { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .mad-preloader { left: 50%; top: 50%; } .mad-preloader-circle, .mad-preloader.mad-preloader--disappearing { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } .mad-preloader-circle--appearing { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } /* ---------------------------------------- Critical full screen message ---------------------------------------- */ .mad-body--has-critical-fullscreen-message { overflow: hidden !important; } .mad-fullscreen-message { position: fixed; z-index: 49; top: 0; right: 0; bottom: 0; left: 0; text-align: center; font-family: 'Arial', serif; font-size: 1.875rem; line-height: 2.34375rem; color: #313131; background-color: #fff; padding: 2rem; overflow: auto; } .mad-fullscreen-message .mad-aligner-inner { vertical-align: middle; } .mad-fullscreen-message-before { font-size: 3.25rem; line-height: 4rem; } .mad-fullscreen-message-before:not(:last-child) { margin-bottom: 1rem; } .mad-fullscreen-message-before:empty, .mad-fullscreen-message-after:empty { display: none; } /* ---------------------------------------- Header ---------------------------------------- */ .mad-header { line-height: 1.5rem; position: relative; z-index: 25; } [class*="mad-header-section--sticky"] { padding: 1.00rem 0 1.00rem; transition: all .5s ease; } [class*="mad-header-section--sticky"].mad-header-section--sticked { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #fff; } .mad-header--transparent.mad-header--transparent-single:not(.header-4):hover { background: #fff; } .mad-header--transparent.mad-header--transparent-single { position: absolute; top: 0; left: 0; right: 0; z-index: 25; transition: all .5s ease; } .mad-header--transparent.mad-header--transparent-single [class*="mad-header-section--sticky"]:not(.mad-header-section--sticked) .mad-navigation>li>a, .mad-header--transparent.mad-header--transparent-single [class*="mad-header-section--sticky"]:not(.mad-header-section--sticked) .mad-navigation>li.menu-item-has-children:after, .mad-header--transparent [class*="mad-header-section--sticky"]:not(.mad-header-section--sticked) .mad-actions { color: var(--color-neutral-0); } .mad-header--transparent.mad-header--transparent-single:not(.header-4):hover .mad-actions { color: var(--color-neutral); } .mad-header--transparent:not(.header-4) [class*="mad-header-section--sticky"]:not(.mad-header-section--sticked) .logo1, .mad-header--transparent:not(.header-4) [class*="mad-header-section--sticky"].mad-header-section--sticked .logo2, .mad-header--transparent.mad-header--transparent-single:not(.header-4):hover [class*="mad-header-section--sticky"] .logo2 { display: none; } .mad-header--transparent.mad-header--transparent-single:not(.header-4):hover [class*="mad-header-section--sticky"] .logo1 { display: block; } .mad-header--transparent [class*="mad-header-section--sticky"]:not(.mad-header-section--sticked):not(:hover) .mad-navigation>li>a::before { background-color: var(--color-secondary-80); } .mad-header--transparent:not(.header-4) [class*="mad-header-section--sticky"]:not(.mad-header-section--sticked):not(:hover) .mad-mobile-nav-btn .line, .mad-header--transparent.header-4 .mad-mobile-nav-btn .line { background-color: var(--color-neutral-0); } /* ---------------------------------------- Header Section ---------------------------------------- */ .mad-header-section { display: block; } .mad-header-section:not(:last-child) { margin-bottom: 3.5rem; } /* ---------------------------------------- Header Items ---------------------------------------- */ .mad-header-items { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: space-between; } .mad-header-item { display: flex; align-items: center; column-gap: 2.5rem; } .mad-navigation-container { display: flex; } .mad-logo { display: block; } .mad-actions { display: flex; align-items: center; column-gap: 2.5rem; } .mad-actions>.mad-item { position: relative; } .mad-actions .mad-item-link { position: relative; color: #262123; } .mad-actions .mad-item-link i { font-size: 1.75rem; max-width: 1.5rem; } .mad-pre-header { padding: 0.5rem 0 0.5rem; } /* Header-2 */ .mad-header.header-2 { background-color: var(--color-primary-5); } .header-2 .mad-navigation-container { justify-content: center; } .header-2 .mad-middle-header { padding-top: 2rem; } .header-2 [class*="mad-header-section--sticky"] { background-color: var(--color-primary-5); padding: 1.5rem 0; } .header-2 .mad-navigation .sub-menu { margin-top: 1.5rem; } .header-2 .mad-navigation .sub-menu:after { height: 1rem; } .header-2 .mad-dropdown-cart .shopping-cart { margin-top: -3rem; } /* Header-3 */ .mad-header.header-3 { background-color: var(--color-neutral-0); } .header-3 .row>*:last-child .mad-actions { justify-content: flex-end; } .header-3 .mad-header-section--sticky-xl { padding: 2.75rem 0; } .header-3 .mad-header-section--sticky-xl.mad-header-section--sticked { padding: 1rem 0; } /* Header-4 */ .mad-header.header-4 [class*="mad-header-section--sticky"] { background: #6f6662; } .mad-header--transparent.mad-header--transparent-single.header-4 [class*="mad-header-section--sticky"] .mad-navigation>li>a, .mad-header--transparent.mad-header--transparent-single.header-4 [class*="mad-header-section--sticky"] .mad-navigation>li.menu-item-has-children:after, .mad-header--transparent.header-4 [class*="mad-header-section--sticky"] .mad-actions { color: var(--color-neutral-0); } .mad-header--transparent.header-4 [class*="mad-header-section--sticky"] .mad-navigation>li>a::before { background-color: var(--color-secondary-80); } .header-4 .mad-pre-header { background-color: var(--color-primary-5); } /* ---------------------------------------- Navigation ---------------------------------------- */ .mad-navigation { z-index: 4; display: flex; column-gap: 1.2rem; } .mad-navigation>li { position: relative; } .mad-navigation>li>a { font-family: 'Nanum Gothic', sans-serif; color: var(--color-neutral); font-size: 0.875rem; line-height: 1rem; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; display: block; position: relative; } .mad-navigation>li>a::before { content: ""; position: absolute; top: 0; left: 0; width: 5.25rem; height: 2.5rem; margin-left: -1rem; margin-top: -0.625rem; -webkit-mask: url(../legasy_icons_svg/menu_item_hover.svg) no-repeat; mask: url(../legasy_icons_svg/menu_item_hover.svg) no-repeat; background-color: var(--color-primary-25); opacity: 0; visibility: hidden; transition: all .5s ease; z-index: -1; } .mad-navigation>li.menu-item-has-children { display: flex; align-items: center; line-height: 1rem; } .mad-navigation>li.menu-item-has-children:after { content: "keyboard_arrow_down"; font-family: 'Material Icons'; text-transform: none; line-height: inherit; font-size: 1.125rem; margin-left: 0.625rem; max-width: 0.875rem; } .mad-navigation>li:hover>a::before { opacity: 1; visibility: visible; } .mad-navigation .menu-item-has-children:hover, .mad-navigation .menu-item-has-children.mad-seleceted, .mad-navigation .menu-item-has-children.mad-tapped { z-index: 2; } .mad-no-touchevents .mad-navigation>li:hover>a::before, .mad-no-touchevents .mad-navigation>.mad-seleceted>a::before, .mad-touchevents .mad-navigation>.mad-tapped>a::before, .mad-navigation>.current-menu-ancestor>a::before, .mad-navigation>.current-menu-parent>a::before, .mad-navigation>.current-menu-item>a::before { opacity: 1; visibility: visible; } .mad-navigation .sub-menu { font-family: 'Nanum Gothic', sans-serif; min-width: 17rem; font-size: 0.875rem; padding: 1.5rem 2rem 1.5rem; line-height: 2rem; font-weight: 400; margin-left: -2rem; margin-top: 4rem; position: absolute; top: 100%; left: 0; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; opacity: 0; visibility: hidden; color: var(--color-neutral); background-color: var(--color-neutral-5); -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transition-duration: 500ms; transition-duration: 500ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-navigation .sub-menu:after { content: ''; position: absolute; bottom: 100%; height: 3.5rem; width: 100%; left: 0; } .mad-navigation>.mega-menu>a:after { content: ''; position: absolute; top: 100%; height: 4rem; width: 100%; left: 0; } .mad-navigation .sub-menu a:not(.btn) { color: var(--color-neutral); } .mad-navigation .sub-menu>li>a { display: block; } .mad-navigation .sub-menu:not(.with-aside).mad-reverse { left: auto; right: 0; } .mad-navigation .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 2rem; margin-top: -1.5rem; border-bottom-left-radius: 0; border-top-right-radius: 0.25rem; background: var(--color-neutral-10); } .mad-navigation .sub-menu .sub-menu.mad-reverse { left: auto; right: 100%; margin-left: 0; margin-right: 2rem; border-top-right-radius: 0; } .mad-navigation .sub-menu .menu-item-has-children { position: relative; } .mad-navigation .sub-menu .menu-item-has-children>a:not(.sub-title)::after { font-family: 'Material Icons'; content: "keyboard_arrow_right"; position: absolute; right: 0; font-size: 1.25rem; color: var(--color-neutral); line-height: inherit; width: 14px; top: 0; z-index: 1; } .mad-no-touchevents .mad-navigation .sub-menu li:hover>a, .mad-no-touchevents .mad-navigation .sub-menu .menu-item-has-children.mad-selected>a, .mad-touchevents .mad-navigation .sub-menu .menu-item-has-children.mad-tapped>a, .mad-navigation .sub-menu .current-menu-item>a, .mad-navigation .sub-menu .current-menu-ancestor>a, .mad-navigation .sub-menu .current-menu-parent>a { text-decoration: underline; } .mad-no-touchevents .menu-item-has-children:hover>.sub-menu, .mad-no-touchevents .menu-item-has-children.mad-selected>.sub-menu, .mad-touchevents .menu-item-has-children.mad-tapped>.sub-menu { opacity: 1; visibility: visible; } .mad-csstransforms3d .mad-navigation .sub-menu { -webkit-transition-property: -webkit-transform, opacity, visibility; transition-property: transform, opacity, visibility; -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } .mad-csstransforms3d.mad-no-touchevents .menu-item-has-children:hover>.sub-menu, .mad-csstransforms3d.mad-no-touchevents .menu-item-has-children.mad-selected>.sub-menu, .mad-csstransforms3d.mad-touchevents .menu-item-has-children.mad-tapped>.sub-menu { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mad-mobile-nav-btn, .mad-nav-btn { width: 3rem; height: 1.5625rem; position: relative; display: none; } .mad-nav-btn { display: block; } .mad-mobile-nav-btn .line, .mad-nav-btn .line { position: absolute; left: 0; width: 100%; height: 3px; background-color: var(--color-neutral); transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transition: transform 0.5s 0.08s, background-color 0.5s, top 0.5s 0.08s, left 0.3s, opacity 0.5s, width 0.6s 0.05s; -webkit-transition: transform 0.5s 0.08s, background-color 0.5s, top 0.5s 0.08s, left 0.3s, opacity 0.5s, width 0.6s 0.05s; } .mad-mobile-nav-btn .line-top, .mad-nav-btn .line-top { top: 0; } .mad-mobile-nav-btn .line-center, .mad-nav-btn .line-center { top: 50%; margin-top: -1.5px; } .mad-mobile-nav-btn .line-bottom, .mad-nav-btn .line-bottom { bottom: 0; } .mad-mobile-nav-btn:hover .line-center, .mad-nav-btn:hover .line-center { width: 100%; } .mad-mobile-nav-btn.mad-opened .line-top, .mad-nav-btn.mad-opened .line-top { top: 50%; margin-left: -1.5px; transform: rotate(45deg) translate(0, -50%); -webkit-transform: rotate(45deg) translate(0, -50%); } .mad-mobile-nav-btn.mad-opened .line-bottom, .mad-nav-btn.mad-opened .line-bottom { top: 50%; margin-right: -1.5px; transform: rotate(-45deg) translate(0, -50%); -webkit-transform: rotate(-45deg) translate(0, -50%); } .mad-mobile-nav-btn.mad-opened .line-center, .mad-nav-btn.mad-opened .line-center { opacity: 0; left: -5px; width: 0; } .mad-mobile-nav-btn.mad-opened, .mad-nav-btn.mad-opened { transform: rotate(90deg); -webkit-transform: rotate(90deg); } .mad-nav-btn.size-2 { width: 1.125rem; height: 0.75rem; } .mad-nav-btn.size-2 .line { height: 2px; } .mad-nav-btn.size-2 .line-center { margin-top: -1px; } .mad-nav-btn.size-2.mad-opened .line-top { margin-left: -1px; } .mad-nav-btn.size-2.mad-opened .line-bottom { margin-right: -1px; } /* Navigation Full Scr */ .mad-nav-canvas { position: fixed; left: 0; top: 0; bottom: 0; z-index: 99; color: #ffffff; text-align: center; overflow: auto; } .mad-nav-canvas .mad-logo { position: absolute; top: 2rem; left: 3.5rem; } .mad-nav-inner { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: space-between; } .mad-nav-canvas.mad-nav-opened { transform: translateX(0); } @keyframes nav-fade-in { 0% { opacity: 0; visibility: hidden } 100% { opacity: 1; visibility: visible } } @keyframes nav-fade-out { 0% { opacity: 1; visibility: visible } 100% { opacity: 0; visibility: hidden } } .mad-nav-canvas.full-screen { right: 0; width: auto; z-index: 99; padding: 0; top: 0; overflow: hidden; background: url(../images/fullsrc_menu_bg.svg) no-repeat top right #6f6662; animation: nav-fade-out .25s linear both; } .mad-nav-canvas.full-screen.mad-nav-opened { animation: nav-fade-in .25s linear both; } .mad-vr-nav { cursor: auto; position: relative; z-index: 2; padding: 8.5rem 0; padding-top: 11rem; } .mad-nav-canvas.full-screen .mad-nav-inner { overflow: hidden; overflow-y: auto; padding-bottom: 8.5rem; cursor: url(../legasy_icons_svg/close2.svg) 15 15, move; } .mad-nav-canvas .mad-icon-boxes { width: 100%; } .mad-vr-nav>ul>li.menu-item-has-children .sub-menu { display: none; padding-top: 1rem; } [class*="mad-img-move"] { transition: all 2s ease; } html.with-src-menu { overflow: hidden !important; } html.with-src-menu body { padding-top: 0 !important; } html.with-src-menu .mad-back-to-top { display: none !important; } .mad-header-section--sticky-xl { transition: background 1s ease; } html.with-src-menu .mad-header.header-5 .mad-header-section--sticky-xl { background: var(--color-neutral); } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li:not(:last-child) { margin-bottom: 1.5rem; } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li a { font-family: 'Judson', sans-serif; font-size: 1.5rem; line-height: 2.5rem; color: #ffffff; letter-spacing: 1px; font-weight: normal; letter-spacing: 0; } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li>a { font-size: 2.25rem; line-height: 2.5rem; text-transform: none; border: none; position: relative; } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li>a:before { content: attr(data-hover); position: absolute; top: 0; left: 0; right: 0; height: 0; font-size: 2.25rem; overflow: hidden; white-space: nowrap; color: #b07a9e; transition: all .5s ease; } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li>a:hover:before, .mad-nav-canvas.full-screen .mad-vr-nav>ul>li.current-menu-item>a:before { height: 100%; letter-spacing: 5px; } .mad-vr-nav>ul>li.menu-item-has-children>a:after { content: "keyboard_arrow_down"; font-family: 'Material Icons'; text-transform: none; font-size: 1.5rem; margin-left: 0.625rem; max-width: 1.125rem; position: absolute; top: 2px; left: 100%; margin-left: 0.75rem; } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li.current-menu-item>a, .mad-nav-canvas.full-screen .mad-vr-nav>ul>li:hover>a, .mad-nav-canvas.full-screen .mad-vr-nav>ul>li>.sub-menu a:hover, .mad-nav-canvas.full-screen .mad-vr-nav>ul>li>.sub-menu>li.current-menu-item a { text-decoration: none; letter-spacing: 5px; color: #b07a9e; } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li>.sub-menu a:hover, .mad-nav-canvas.full-screen .mad-vr-nav>ul>li>.sub-menu>li.current-menu-item a { letter-spacing: 3.2px; } .mad-nav-canvas.full-screen .mad-vr-nav>ul>li { transition: all .5s ease; -webkit-transform: translateY(1rem); transform: translateY(1rem); white-space: nowrap; opacity: 0; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li { -webkit-transform: none; transform: none; opacity: 1; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li:first-child { -webkit-transition-delay: .13s, .13s, 0s; transition-delay: .13s, .13s, 0s; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li:nth-child(2) { -webkit-transition-delay: .26s, .26s, 0s; transition-delay: .26s, .26s, 0s; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li:nth-child(3) { -webkit-transition-delay: .39s, .39s, 0s; transition-delay: .39s, .39s, 0s; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li:nth-child(4) { -webkit-transition-delay: .52s, .52s, 0s; transition-delay: .52s, .52s, 0s; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li:nth-child(5) { -webkit-transition-delay: .65s, .65s, 0s; transition-delay: .65s, .65s, 0s; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li:nth-child(6) { -webkit-transition-delay: .78s, .78s, 0s; transition-delay: .78s, .78s, 0s; } .mad-nav-canvas.full-screen.mad-nav-opened .mad-vr-nav>ul>li:nth-child(7) { -webkit-transition-delay: .91s, .91s, 0s; transition-delay: .91s, 1.91s, 0s; } .mad-nav-canvas .mad-nav-bottom { position: absolute; bottom: 10rem; left: 0; right: 0; } .mad-nav-canvas:after { content: ''; position: absolute; bottom: 0; height: 100%; left: 0; right: 0; background: url(../images/nav_bg_bottom.svg) no-repeat bottom right; z-index: -1; } /* ---------------------------------------- Breadcrumb ---------------------------------------- */ .mad-breadcrumb { padding-top: 4.5625rem; padding-bottom: 5rem; color: var(--color-neutral-60); background: var(--color-neutral-5); text-align: center; } .mad-breadcrumb-path:not(:last-child) { margin-bottom: 0.5rem; } .mad-breadcrumb-path { text-transform: uppercase; font-size: 0.875rem; line-height: 1rem; letter-spacing: 0.25rem; vertical-align: baseline; } .mad-breadcrumb-path>span { display: inline-block; } .mad-breadcrumb .mad-page-title:not(:last-child) { margin-bottom: 1rem; } .mad-breadcrumb.with-bg-img { background-size: cover; padding-top: 12.75rem; padding-bottom: 12.75rem; background-repeat: no-repeat; color: var(--color-neutral-15); } .mad-breadcrumb.with-bg-img .mad-page-title, .mad-breadcrumb.with-bg-img .mad-link { color: var(--color-neutral-0); } .mad-breadcrumb+.mad-section { z-index: 2; position: relative; } .mad-breadcrumb.simple-type { padding: 1rem 0; background: var(--color-neutral-5); } .mad-breadcrumb.simple-type .mad-link { color: var(--color-neutral); } /* ---------------------------------------- Sections ---------------------------------------- */ .mad-content { padding-top: 9rem; padding-bottom: 9rem; } .mad-section { position: relative; padding-top: 9rem; padding-bottom: 9rem; } .mad-content.no-pt, .mad-section.no-pt { padding-top: 0 !important; } .mad-content.no-pb, .mad-section.no-pb { padding-bottom: 0 !important; } .mad-content.no-pd, .mad-section.no-pd { padding-top: 0 !important; padding-bottom: 0 !important; } .mad-section.mad-custom-pd { padding-bottom: 0; padding-top: 13rem; } .mad-section.small-size { padding-top: 3rem; padding-bottom: 3rem; } .mad-section.medium-size { padding-top: 6rem; padding-bottom: 6rem; } .mad-section.medium-size-2 { padding-top: 6.625rem; padding-bottom: 6.625rem; } .mad-section--parallax { background-size: auto; } .content-element:not(:last-child) { margin-bottom: 0.5rem; } .content-element-2:not(:last-child) { margin-bottom: 1rem; } .content-element-3:not(:last-child) { margin-bottom: 1.5rem; } .content-element-4:not(:last-child) { margin-bottom: 2rem; } .content-element-5:not(:last-child) { margin-bottom: 2.5rem; } .content-element-6:not(:last-child) { margin-bottom: 3rem; } .content-element-7:not(:last-child) { margin-bottom: 3.5rem; } .content-element-8:not(:last-child) { margin-bottom: 4rem; } .content-element-9:not(:last-child) { margin-bottom: 4.5rem; } .content-element-10:not(:last-child) { margin-bottom: 5rem; } .content-element-11:not(:last-child) { margin-bottom: 5.5rem; } .content-element-12:not(:last-child) { margin-bottom: 6rem; } .content-element-13:not(:last-child) { margin-bottom: 6.5rem; } .content-element-14:not(:last-child) { margin-bottom: 7rem; } .content-element-15:not(:last-child) { margin-bottom: 7.5rem; } .content-element-main:not(:last-child) { margin-bottom: 9rem; } .content-element-main-2:not(:last-child) { margin-bottom: 14.5rem; } .mad-section.with-overlay.mad-colorizer--parallax { color: var(--color-neutral-10); } .mad-section.with-overlay.mad-colorizer--parallax .mad-page-title { color: var(--color-neutral-0); } [class*="content-element-"] { position: relative; } .mad-section.mad-section-bg-img { padding-top: 0; padding-bottom: 44% !important; } .mad-section.mad-section-bg-img.mad-colorizer--parallax .mad-colorizer-bg-image { background-size: cover; } .owl-center .owl-item:not(.center) .mad-entity .mad-entity-media img { height: calc(100% - 2rem); } .mad-section.pt-size-2 { padding-top: 13rem; } /* ---------------------------------------- Sidebar ---------------------------------------- */ /* ---------------------------------------- Widgets ---------------------------------------- */ .mad-widget { font-size: 1rem; line-height: 1.5rem; } .mad-sidebar .mad-widget:not(:last-child) { margin-bottom: 4rem; } /* ---------------------------------------- Tags ---------------------------------------- */ .tagcloud { display: flex; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.5rem; } .tagcloud>a { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0; font-weight: bold; padding: .5rem 0.5rem; letter-spacing: 0.5px; border-radius: var(--br-main); text-transform: uppercase; display: block; white-space: nowrap; background: var(--color-secondary-10); color: var(--color-primary-darker); } .tagcloud>a:hover { color: var(--color-secondary); background: var(--color-secondary-20); } /* ---------------------------------------- Search ---------------------------------------- */ /* ---------------------------------------- Banner ---------------------------------------- */ /* ---------------------------------------- Calendar ---------------------------------------- */ .mad-calendar-section { display: flex; justify-content: flex-end; } .mad-calendar-element { max-width: 55rem; border-radius: var(--br-main); position: relative; padding: 9rem 9.5rem; margin-bottom: -4rem; background-color: var(--color-primary-darker); background: url(../images/calendar_bg.svg) var(--color-primary-darker) right top no-repeat; } .mad-calendar-element .mad-pre-title { color: var(--color-secondary-10); } .mad-calendar-element .mad-title { color: var(--color-neutral-0); } .calendar_wrap { border-radius: var(--br-main); overflow: hidden; } .calendar_wrap table { font-size: 1rem; line-height: 1.5rem; border-width: 0; background: var(--color-neutral-5); font-family: 'Nanum Gothic', sans-serif; } .calendar_wrap table caption { color: var(--color-neutral-0); font-family: 'Judson', sans-serif; font-size: 1.5rem; line-height: 4.5rem; text-align: center; letter-spacing: 0; position: relative; background: var(--color-secondary); } .calendar_wrap table tr:hover { background-color: transparent; } .calendar_wrap table thead { overflow: auto; background-color: var(--color-secondary-80); } .calendar_wrap table thead th { font-family: 'Nanum Gothic', sans-serif; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; font-weight: bold; color: var(--color-neutral-0); background: transparent; border: none; } .calendar_wrap table th, .calendar_wrap table td { text-align: center; line-height: 3rem; padding: 0 0.875rem; vertical-align: middle; letter-spacing: 0; } .calendar_wrap table td { font-size: 1.125rem; line-height: 5rem; } .calendar_wrap table td { border: none; } .calendar_wrap table td.mad-td-link { padding: 0; } .calendar_wrap table td a { display: block; background-color: var(--color-primary); color: var(--color-neutral-0); } .calendar_wrap table td:not(:last-child) { border-right: 1px solid var(--color-neutral-15); } .calendar_wrap table tr:first-child td:nth-child(1), .calendar_wrap table tr:first-child td:nth-child(2), .calendar_wrap table tr:last-child td:nth-last-child(1), .calendar_wrap table tr:last-child td:nth-last-child(2), .calendar_wrap table tr:last-child td:nth-last-child(3) { background: var(--color-neutral-10); color: var(--color-neutral-60); } .calendar_wrap table .calendar-caption-prev, .calendar_wrap table .calendar-caption-next { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; height: 100%; width: 4rem; text-align: center; color: var(--color-neutral-0); -webkit-transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1); } .calendar_wrap table caption>a>i { line-height: 4.5rem; font-size: 2.5rem; color: inherit; display: block; } .calendar_wrap table caption .mad-row { display: flex; justify-content: space-between; column-gap: 1rem; padding: 0 1.5rem; } .calendar_section table caption .mad-col { width: auto; padding: 0; } .calendar_wrap table caption .mad-custom-select .mad-selected-option { border-bottom: none; color: var(--color-neutral-0); line-height: 3.5rem; height: 3.5rem; } .calendar_wrap table caption .mad-custom-select .mad-selected-option::after, .calendar_wrap table caption .mad-custom-select .mad-selected-option::before { color: var(--color-neutral-0); } .calendar_wrap table .calendar-caption-prev:hover, .calendar_wrap table .calendar-caption-next:hover { color: var(--color-neutral); } .calendar_wrap table .calendar-caption-prev { left: 0; } .calendar_wrap table .calendar-caption-next { right: 0; } .calendar_wrap.size-2 table caption { font-size: 1.875rem; line-height: 5.5rem; } .calendar_wrap.size-2 table thead th { font-size: 1.125rem; line-height: 3.5rem; } .calendar_wrap.size-2 table td { font-size: 1.5rem; line-height: 9rem; } .mad-sidebar .calendar_wrap table td { line-height: 3.5rem; } /* ---------------------------------------- Recent Comments ---------------------------------------- */ .mad-widget .recentcomments li:not(:last-child) { margin-bottom: 1rem; } .mad-widget .recentcomments li { position: relative; padding-left: 2rem; line-height: 1.5rem; font-size: 1rem; color: var(--color-neutral-60); } .mad-widget .recentcomments li a:last-child { color: var(--color-neutral); } .mad-widget .recentcomments li:before { position: absolute; font-family: 'Material Icons Outlined'; content: 'comment'; font-size: 1.125rem; top: 0; left: 0; line-height: 1.5rem; color: var(--color-primary); } .mad-widget .recentcomments li a:first-child { color: var(--color-primary); } .mad-widget .recentcomments li a:hover { text-decoration: underline; } /* ---------------------------------------- Sponsors widget ---------------------------------------- */ .mad-sponsors:not(.owl-carousel) { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin: -2rem -1rem 0; align-items: center; position: relative; z-index: 1; } .mad-sponsors:not(.owl-carousel)>.mad-grid-item { padding: 2rem 1rem 0; width: 16.6666%; } .mad-sponsors a { display: block; text-align: center; } .mad-sponsors a:hover { transform: scale(1.1); } .mad-sponsors a:not(:last-child) { margin-bottom: 2rem; } .mad-sponsors a:hover { border-color: #26658d; } .mad-sponsors.owl-carousel .owl-nav { display: block; } .mad-csstransforms3d .mad-sponsors img { width: auto; margin: 0 auto; } .mad-sponsors.small-type:not(.owl-carousel)>.mad-grid-item { width: auto; } /* ---------------------------------------- Footer ---------------------------------------- */ .mad-footer:not(.footer-2) { color: var(--color-secondary-5); padding: 6rem 0; background: var(--color-secondary); position: relative; z-index: 1; } .mad-gmap-wrap+.mad-footer:not(.footer-2) { padding-top: 10rem; } .mad-footer:not(.footer-2):after, .mad-footer:not(.footer-2):before { content: ''; position: absolute; background: url(../images/footer_bg_left.svg) no-repeat; bottom: 0; left: 0; width: 100%; height: 100%; background-position: left bottom; z-index: -1; } .mad-footer:not(.footer-2):before { background: url(../images/footer_bg_right.svg) no-repeat; background-position: right top; z-index: -1; } .mad-footer .mad-footer-main:not(:last-child) { margin-bottom: 5rem; } .mad-footer:not(.footer-2):not(.footer-4) .mad-widget .mad-widget-title { color: var(--color-neutral-0); } .mad-footer-bottom { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 1rem; color: var(--color-secondary-20); justify-content: space-between; } .mad-footer .mad-widget:not(:last-child) { margin-bottom: 4.5rem; } /* Footer 2 */ .mad-footer.footer-2 { padding: 5.5rem 0; position: relative; overflow: hidden; z-index: 1; background-color: var(--color-neutral-0); } .mad-footer.footer-2:after { content: ''; position: absolute; background: url(../images/footer2_bg.svg) no-repeat; bottom: 0; left: 0; width: 100%; height: 100%; background-position: left top -15.5rem; z-index: -1; } /* Footer 3 */ .footer-box .mad-footer { border-radius: var(--br-main); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-top: 0; overflow: hidden; } .footer-box .mad-footer .container-fluid { padding-left: 2rem; padding-right: 2rem; } .mad-footer.footer-3:after { background: url(../images/footer3_bg.svg) no-repeat; background-position: center bottom; } .mad-footer.footer-3 .mad-footer-main { padding: 6rem 0 0; } .mad-footer.footer-3 .mad-footer-bottom { flex-direction: column; justify-content: center; row-gap: 2.5rem; } /* Footer 4 */ .mad-footer.footer-4 { background: var(--color-primary-5); color: var(--color-neutral-80); } .mad-footer.footer-4::before { display: none; } .mad-footer.footer-4:after { content: ''; position: absolute; background: url(../images/footer4_bg.svg) no-repeat; bottom: 0; left: 0; width: 100%; height: 100%; background-position: right bottom; z-index: -1; } .mad-footer.footer-4 .mad-footer-bottom { color: var(--color-neutral-80); } /* ---------------------------------------- Grid ---------------------------------------- */ [class*="item-col-"]:not(.no-gutters) { margin: -2rem -1rem 0; } [class*="item-col-"]:not(.no-gutters)>* { padding: 2rem 1rem 0; } .item-col-1>* { width: 100%; } .item-col-2>* { width: 50%; } .item-col-3>* { width: 33.3333%; } .item-col-4>* { width: 25%; } .item-col-5>* { width: 20%; } .item-col-6>* { width: 16.6666%; } .item-col-7>* { width: 14.28222%; } .container-fluid { padding-left: 4rem; padding-right: 4rem; } .row { margin-left: -1rem; margin-right: -1rem; row-gap: 2rem; } .row.no-row-gap { row-gap: 0; } .row>* { padding-left: 1rem; padding-right: 1rem; } .row.vr-size { row-gap: 3rem; } .row.vr-size-1 { row-gap: 9rem; } .mad-footer .row.vr-size-1 { row-gap: 5rem; } .row.vr-size-main { row-gap: 9rem; } .row.hr-size-1 { margin-left: -2rem; margin-right: -2rem; } .row.hr-size-1>* { padding-left: 2rem; padding-right: 2rem; } .row.hr-size-2 { margin-left: -1.5rem; margin-right: -1.5rem; } .row.hr-size-2>* { padding-left: 1.5rem; padding-right: 1.5rem; } .row.vr-size-2 { row-gap: 9rem; } .row.vr-size-main { row-gap: 9rem; } .container.wide { max-width: 100%; padding-left: 4rem; padding-right: 4rem; } /* ---------------------------------------- Modals ---------------------------------------- */ .mad-modal { border-radius: 0; overflow: hidden; position: relative; display: none; } /* ---------------------------------------- Arctic Modal ---------------------------------------- */ .arcticmodal-container { bottom: auto; } .arcticmodal-overlay { bottom: auto; } .arcticmodal-container_i2 { padding: 0; height: 100%; } .arcticmodal-container table { background-color: transparent; border: none; } .arcticmodal-container table tr { border: none; -webkit-transition: none; transition: none; } .arcticmodal-container table tr:hover { background-color: transparent; } .arcticmodal-close { font-size: 1rem; color: var(--color-primary); } .arcticmodal-close:hover { color: var(--color-primary-lighter); } /* ---------------------------------------- Search Modal ---------------------------------------- */ .mad-modal--search .arcticmodal-container_i2 { vertical-align: middle; } .arcticmodal-container table { border-radius: 0; } .mad-modal--search { padding: 2rem 1rem; display: flex; align-items: center; justify-content: center; position: relative; column-gap: 2rem; row-gap: 2rem; z-index: 1; background: none; } .mad-modal--search:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-neutral-0); opacity: 0.9; z-index: -1; } .mad-modal--search .mad-title:not(:last-child) { margin-bottom: 0; } .mad-searchform { position: relative; } .mad-modal--search form { width: 100%; max-width: 45rem; display: flex; } .mad-modal--search form.mad-search-section input { width: 100%; height: 3rem !important; border-top-right-radius: 0; border-bottom-right-radius: 0; } .mad-modal--search form.mad-search-section .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .mad-search-section { display: flex; align-items: flex-end; } /* ---------------------------------------- Responsive Iframe ---------------------------------------- */ .mad-responsive-iframe { position: relative; height: 0; padding-bottom: 56%; border-radius: var(--br-main); overflow: hidden; } .mad-responsive-iframe>iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .mad-fullwidth-iframe>iframe { width: 100%; } /* ---------------------------------------- Comments ---------------------------------------- */ .comments-list { overflow: hidden; } .comments-list>.comment:first-child { margin-top: -2rem; } .comment { font-size: 1rem; line-height: 1.5rem; padding-top: 2rem; } .comment .fn { font-family: 'Judson', sans-serif; font-size: 1.5rem; line-height: 2rem; color: var(--color-neutral); display: block; font-style: normal; } .comment-author-avatar { float: left; margin-right: 1.5rem; position: relative; border-radius: 50%; overflow: hidden; z-index: 2; } .comment .children>li, .comment.comment-has-children>.comment-body>.comment-author-info { position: relative; } .comment-author-info { padding-left: 8rem; } .comment-row { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; row-gap: 1rem; } .comment-row:not(:last-child) { margin-bottom: 1.5rem; } .comment-meta { font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; display: flex; align-items: center; } .comment-meta i { font-size: 1rem; line-height: inherit; } .comment-meta time { color: var(--color-neutral-60); font-style: normal; } .comment-actions { font-size: 0.6875rem; line-height: 1.75rem; text-transform: uppercase; color: #b1b1b1; letter-spacing: 0.82px; margin-left: -0.5rem; margin-right: -0.5rem; } .comment-actions>a { margin-left: 0.5rem; margin-right: 0.5rem; } .comment::after { content: ""; display: block; clear: both; } .comment .children { padding-left: 2.5rem; overflow: hidden; } .comment.single-comment { padding: 2rem; border-radius: var(--br-main); background: var(--color-primary-5); } /* ---------------------------------------- 3. Components ---------------------------------------- */ /* ---------------------------------------- Social icons ---------------------------------------- */ .mad-social-icons ul { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 1rem; } .mad-social-icons ul li a { font-size: 1.125rem; line-height: 2rem; text-align: center; display: block; color: var(--color-primary); position: relative; z-index: 1; } .mad-social-icons ul li a:after { content: ''; position: absolute; top: 0; left: 50%; width: 2rem; bottom: 0; margin-left: -1rem; z-index: -1; background: var(--color-primary-lighter); opacity: 0; border-radius: 63% 37% 68% 32% / 63% 35% 65% 37%; visibility: hidden; transition: opacity .5s ease; } .mad-social-icons ul li a:hover { color: var(--color-neutral-0); } .mad-social-icons ul li a:hover:after { opacity: 1; visibility: visible; } .mad-social-icons.size-small ul { column-gap: 1.5rem; row-gap: 1rem; } .mad-social-icons.size-small ul li a { line-height: 1.5rem; font-size: 1rem; } .mad-social-icons.size-small ul li a:after { width: 1.5rem; margin-left: -0.75rem; } .mad-social-icons.size-2 ul { column-gap: 2rem; row-gap: 2rem; } .mad-social-icons.size-2 ul li a { line-height: 2.5rem; font-size: 1.5rem; } .mad-social-icons.size-2 ul li a:after { width: 2.5rem; margin-left: -1.25rem; } .mad-social-icons.style-2 ul li a:not(:hover) { color: var(--color-neutral); } /* ---------------------------------------- Dropcaps ---------------------------------------- */ .mad-dropcap>*:first-child:first-letter { font-size: 3rem; color: var(--color-neutral); font-weight: bold; line-height: 1; display: block; float: left; margin-right: 0.875rem; margin-top: 0; } .mad-dropcap--filled>*:first-child:first-letter { font-family: 'NanumGothic', sans-serif; font-size: 1.5rem; color: var(--color-neutral-0); background: var(--color-neutral); padding-top: 0.5rem; padding-right: 10px; padding-left: 10px; padding-bottom: 0.5rem; margin-top: 0.25rem; border-radius: 50%; } .mad-dropcap.style-2:not(.mad-dropcap--filled)>*:first-child:first-letter { font-family: "Judson", sans-serif; } .mad-dropcap.color-2>*:first-child:first-letter { color: var(--color-primary); } .mad-dropcap--filled.style-2>*:first-child:first-letter { border-radius: var(--br-main); background: var(--color-primary); } .mad-text-medium.mad-dropcap>*:first-child:first-letter { font-size: 4rem; } .mad-text-medium.mad-dropcap.mad-dropcap--filled>*:first-child:first-letter { font-size: 2rem; margin-top: 0.5rem; font-family: "Judson", sans-serif; } /* firefox only */ @-moz-document url-prefix() { .mad-dropcap>*:first-child:first-letter { margin-top: 8px; } .mad-text-medium.mad-dropcap>*:first-child:first-letter { margin-top: 14px; } .mad-dropcap--filled>*:first-child:first-letter { margin-top: 4px; padding-top: 0.6rem; padding-bottom: 0.455rem; } .mad-dropcap--filled>*:first-child:first-letter { padding-top: 11px; padding-bottom: 11px; } .mad-text-medium.mad-dropcap--filled>*:first-child:first-letter { padding-top: 14px; padding-bottom: 14px; } } /* ---------------------------------------- Alert Boxes ---------------------------------------- */ .mad-alert-box { font-weight: 400; font-size: 1.125rem; line-height: 2rem; border-radius: var(--br-main); width: 100%; flex: 1; } .mad-alert-box:not(:last-child) { margin-bottom: 2rem; } .mad-alert-box strong { font-weight: inherit; } .mad-alert-box-inner { position: relative; padding-top: 1rem; padding-bottom: 1rem; padding-left: 4.5rem; padding-right: 3.75rem; border-radius: var(--br-main); text-align: initial; } .mad-alert-box-inner::before { font-family: 'Material Icons Outlined'; font-size: 1.5rem; line-height: 1; position: absolute; font-weight: normal; left: 2rem; top: 1.25rem; } .mad-alert-box-close::-moz-selection { color: transparent; } .mad-alert-box-close::selection { color: transparent; } .mad-alert-box-close::-webkit-selection { color: transparent; } .mad-alert-box--success { color: #4a7309; } .mad-alert-box--success .mad-alert-box-inner { background: #F2F5EB; color: #7D9E36; } .mad-alert-box--success .mad-alert-box-inner::before { content: "check_circle"; } .mad-alert-box--warning { color: #d9a934; } .mad-alert-box--warning .mad-alert-box-inner { background: #F5F0EB; color: #BF885E; } .mad-alert-box--warning .mad-alert-box-inner::before { content: "error_outline"; } .mad-alert-box--info { color: #26658c; } .mad-alert-box--info .mad-alert-box-inner { color: #009DC4; background: #E6F6FA; } .mad-alert-box--info .mad-alert-box-inner::before { content: "info"; } .mad-alert-box--error { color: #CC7C6E; } .mad-alert-box--error .mad-alert-box-inner { background: #FAEDEB; } .mad-alert-box--error .mad-alert-box-inner::before { content: "highlight_off"; } .mad-alert-box-close { position: absolute; color: transparent; font-size: 1rem; line-height: 1; display: block; width: 1rem; height: 1rem; right: 1.75rem; top: 0; margin-top: 1.5rem; overflow: hidden; } .mad-alert-box-close::-moz-selection { color: transparent; } .mad-alert-box-close::selection { color: transparent; } .mad-alert-box-close::-webkit-selection { color: transparent; } .mad-alert-box-close::after { font-family: "Material Icons"; content: 'close'; position: absolute; top: 50%; left: 0; right: 0; text-align: center; font-weight: bold; margin-top: -0.575rem; color: var(--color-neutral); } .mad-csstransforms3d .mad-alert-box-close { -webkit-transition: -webkit-transform .4s cubic-bezier(0.25, 3, 0.75, 0.9); transition: transform .4s cubic-bezier(0.25, 3, 0.75, 0.9); } .mad-csstransforms3d .mad-alert-box-close:hover { -webkit-transform: scale3d(1.3, 1.3, 1.3); transform: scale3d(1.3, 1.3, 1.3); } /* ---------------------------------------- Lists ---------------------------------------- */ .mad-list-content>ul:not(.mad-list--icon):not(.mad-list--unstyled)>li::before, .mad-list-content>ul>li i { font-size: 1.25rem; color: var(--color-primary); } .mad-list-content ol { list-style-position: inside; list-style-type: decimal; } .mad-list-content ol ol, .mad-entity-content ol ul { padding-left: 2rem; } .mad-list-content ol ul>li>ul, .mad-list-content ol ul>li>ol { padding-left: 0; } .mad-list-title:not(:last-child) { margin-bottom: 0.5rem; } /* ---------------------------------------- Icon List ---------------------------------------- */ .mad-list--icon>li, .mad-list-content>ul:not(.mad-list--icon):not(.mad-list--unstyled)>li { padding-left: 2rem; line-height: 1.5rem; position: relative; } .mad-list--icon>li>.icon, .mad-list-content>ul:not(.mad-list--icon):not(.mad-list--unstyled)>li::before { position: absolute; left: 1px; top: 0; line-height: 1.5rem; } .mad-list--icon ul, .mad-list-content>ul:not(.mad-list--icon):not(.mad-icon-first) { padding-top: 1rem; } .mad-list-content>ul:not(.mad-list--icon):not(.mad-list--unstyled)>li:not(:last-child), .mad-list--icon>li:not(:last-child), .mad-list--icon-big>li:not(:last-child), .mad-list-content ol:not(.mad-list--unstyled)>li:not(:last-child), .mad-list-content>ul:not(.mad-list--icon):not(.mad-list--unstyled)>li:not(:last-child), .mad-list--icon>li:not(:last-child), .mad-list--icon-big>li:not(:last-child), .mad-list-content>ol:not(.mad-list--unstyled)>li:not(:last-child) { margin-bottom: 1rem; } /* ---------------------------------------- Vertical list ---------------------------------------- */ .mad-vr-list>li>a { font-weight: bold; } .mad-vr-list>li:not(:last-child) { margin-bottom: 1rem; } .mad-vr-list.mad-map-info li { font-weight: bold; font-size: 1.125rem; line-height: 2rem; display: flex; column-gap: 1.5rem; } .mad-vr-list.mad-map-info li .svg { min-width: 2rem; height: 2rem; } /* ---------------------------------------- Horizontal list ---------------------------------------- */ .mad-hr-list { display: flex; flex-wrap: wrap; row-gap: 1rem; font-weight: bold; } .mad-hr-list>li>a { position: relative; } .mad-hr-list>li>a, .mad-vr-list>li>a { color: var(--color-primary); letter-spacing: 1px; padding-right: 0.875rem; } .mad-hr-list>li>a:hover, .mad-vr-list>li>a:hover { color: var(--color-primary-lighter); } .mad-hr-list>li:not(:last-child) a { margin-right: 0.875rem; } .mad-hr-list>li:not(:last-child) a:after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 1rem; background: var(--color-primary); } .mad-vr-list.mad-map-info>li>a { letter-spacing: 0; } .mad-our-info { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: 1rem; } .mad-our-info .mad-info { font-size: 0.875rem; line-height: 1rem; letter-spacing: -0.3px; color: var(--color-neutral-80); display: flex; align-items: center; column-gap: 0.5rem; } .mad-our-info .mad-info>i { line-height: 0.625rem; } /* ---------------------------------------- Blockquotes ---------------------------------------- */ blockquote:not(.mad-blockquote--unstyled) { font-weight: 400; font-family: 'Judson', sans-serif; font-style: italic; } blockquote:not(.mad-blockquote--unstyled).mad-blockquote--style-2 { border-style: solid; border-width: 0 0 0 3px; color: #313131; background-color: #f8f8f8; } .mad-testimonial-bg { position: relative; padding: 3.5rem; background: var(--color-primary-10); z-index: 1; border-radius: var(--br-main); } .mad-testimonial-bg .mad-testimonial { text-align: left; } .mad-testimonial-bg .mad-testimonial .mad-author .mad-author-info { align-items: flex-start; color: var(--color-neutral-60); } .mad-testimonial-bg:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/blockquote_back1.svg) no-repeat; background-size: cover !important; z-index: -1; } .mad-testimonial-bg.style-2:after { background: url(../images/blockquote_back2.svg) no-repeat; background-position: bottom left; } .mad-testimonial-bg.style-2 { background: var(--color-primary); } .mad-testimonial-bg.style-2 .mad-testimonial blockquote { color: var(--color-neutral-0); } .mad-testimonial-bg.style-2 .mad-testimonial .mad-author .mad-author-info { color: var(--color-primary-25); } .mad-entities:not(.type-2) .mad-entity .mad-testimonial-bg.style-2:after, .mad-entities.mad-grid--isotope .mad-entity .mad-testimonial-bg.style-2:after { background: url(../images/blockquote_back3.svg) no-repeat; background-position: bottom left; } .mad-entities.mad-grid--isotope.item-col-3 .mad-entity .mad-testimonial-bg.style-2:after { background: url(../images/blockquote_back4.svg) no-repeat; background-position: bottom left; } /* ---------------------------------------- Buttons ---------------------------------------- */ .btn { padding: 1rem 1.5rem 1rem; display: inline-block; color: var(--color-neutral-0); font-weight: normal; text-align: center; font-size: 0.875rem; line-height: 1rem; position: relative; white-space: nowrap; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; z-index: 1; position: relative; border-radius: var(--br-main); background: var(--color-primary); } .btn:hover { background: var(--color-primary-lighter); } .btn.btn-disabled, .btn.btn-disabled:hover { background: var(--color-neutral-20); color: var(--color-neutral); cursor: not-allowed; } .btn.btn-pressed, .btn.btn-pressed:hover { background: var(--color-primary-darker); } .btn.btn-disabled-secondary, .btn.btn-disabled-secondary:hover { background: var(--color-secondary-20); color: var(--color-neutral); } .btn.style-2 { background: var(--color-secondary-80); } .btn.style-2:hover { background: var(--color-secondary-60); } .btn.btn-pressed.style-2, .btn.btn-pressed.style-2:hover { background: var(--color-secondary); } .btn.style-2.btn-disabled, .btn.style-2.btn-disabled:hover { background: var(--color-secondary-20); color: var(--color-neutral); cursor: not-allowed; } .btn.style-3 { background: var(--color-neutral-80); color: #fff; } .btn.style-3:hover { background: var(--color-neutral-60); } .btn.btn-pressed.style-3, .btn.btn-pressed.style-3:hover { background: var(--color-neutral); } .btn.style-3.btn-disabled, .btn.style-3.btn-disabled:hover { background: var(--color-neutral-20); color: var(--color-neutral); cursor: not-allowed; } .btn-very-small { font-size: 0.75rem; padding: 0.5rem 1.5rem; } .btn-tag { font-size: 0.75rem; line-height: 2rem; padding: 0 0.5rem; } .btn-small { font-size: 0.75rem; padding: 0.75rem 1.5rem; } .btn-big { font-size: 1rem; line-height: 1.5rem; padding: 1rem 2rem; letter-spacing: 1.2px; } .btn-huge { font-size: 1.125rem; line-height: 2rem; padding: 1.25rem 2.5rem; letter-spacing: 1.2px; } [class*="btn"]>i { font-size: 1.25rem; display: inline-block; font-weight: normal; vertical-align: -4px; line-height: 0.5rem; } .btn-small>i { font-size: 1rem; } .btn-big>i { font-size: 1.5rem; vertical-align: -5px; } .btn-huge>i { font-size: 1.75rem; vertical-align: -7px; } [class*="btn"]>i:not(:only-child):first-child { margin-right: 0.75rem; } [class*="btn"]>i:not(:only-child):last-child { margin-left: 0.75rem; } .page-nav { padding-top: 50px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; } .page-nav .menu-button { font-size: 30px; } .btn-wrap { margin: -0.625rem; } .btn-wrap>* { margin: 0.625rem; } .prev-btn, .next-btn, .exp { font-weight: 600; margin-left: 30px; position: relative; } .prev-btn, .next-btn { border-bottom: 1px solid transparent; } .prev-btn:hover, .next-btn:hover { border-bottom-color: inherit; } .prev-btn:before, .next-btn:before, .exp:before { font-family: 'Linearicons'; content: '\e964'; font-size: 20px; color: #262626; position: absolute; font-weight: normal; left: 0; top: 0; margin-top: -3px; margin-left: -30px; } .next-btn { margin-left: 0; margin-right: 30px; } .next-btn:before { margin-left: 0; margin-right: -30px; } .next-btn:before { content: '\e965'; right: 0; left: auto; } .mad-back-to-top { width: 3.5rem; height: 3.5rem; padding: 0; text-align: center; position: fixed; border-radius: 50%; z-index: 103; right: 3.3%; top: 60%; color: var(--color-neutral-0); background: var(--color-secondary-80); opacity: 0; } .mad-back-to-top.zoomIn { opacity: 1; } .mad-back-to-top:hover { background: var(--color-secondary-60); } .mad-back-to-top .icon { width: 1.375rem; height: 1.1875rem; } .mad-back-to-top .icon:after { content: 'keyboard_arrow_up'; font-family: "Material Icons"; font-size: 2rem; line-height: 3.5rem; } [class*="mad-text-link"] { display: inline-block; position: relative; font-size: 1rem; line-height: 1.625rem; font-weight: bold; letter-spacing: 1px; color: var(--color-primary); transition: all .5s ease; z-index: 1; } .mad-text-link:not(.no-bp):after { content: ''; position: absolute; top: 0; left: 0; width: 5.25rem; height: 2.5rem; margin-top: -0.375rem; -webkit-mask: url(../legasy_icons_svg/menu_item_hover.svg) no-repeat; mask: url(../legasy_icons_svg/menu_item_hover.svg) no-repeat; background-color: var(--color-primary-25); opacity: 0; visibility: hidden; transition: all .5s ease; z-index: -1; } .mad-text-link:not(.btn-disabled):hover:after, .mad-text-link.pressed:after { opacity: 1; visibility: visible; } .mad-text-link.pressed, .mad-text-link.pressed:hover { color: var(--color-primary-darker); } .mad-text-link:not(.btn-disabled):hover, .mad-text-link.pressed { padding-left: 1rem; } [class*="mad-text-link"]:not(.pressed):not(.btn-disabled):not([class*="style-"]):hover { color: var(--color-primary-lighter); } [class*="mad-text-link"]:not(.pressed).style-2:hover { color: var(--color-secondary-60); } [class*="mad-text-link"].btn-disabled, [class*="mad-text-link"].btn-disabled:hover { color: var(--color-neutral-40); cursor: not-allowed; } [class*="mad-text-link"].style-2 { color: var(--color-secondary-80); } .mad-text-link.style-2.pressed, .mad-text-link.style-2.pressed:hover { color: var(--color-secondary); } [class*="mad-text-link"].pressed.style-2:after, [class*="mad-text-link"].style-2:hover:after { background-color: var(--color-secondary-10); } [class*="mad-text-link"].style-2.btn-disabled, [class*="mad-text-link"].style-2.btn-disabled:hover { color: var(--color-secondary-40) !important; } [class*="mad-text-link"].style-3 { color: var(--color-neutral-80); } .mad-text-link.style-3.pressed, .mad-text-link.style-3.pressed:hover { color: var(--color-neutral); } [class*="mad-text-link"].pressed.style-3:after, [class*="mad-text-link"].style-3:hover:after { background-color: var(--color-neutral-10); color: var(--color-secondary-60); } [class*="mad-text-link"].style-3.btn-disabled, [class*="mad-text-link"].style-3.btn-disabled:hover { color: var(--color-secondary-40) !important; } .mad-share-wrap { position: relative; } .mad-share-wrap:not(.type-2) .mad-social-icons { position: absolute; top: 50%; right: 0; margin-top: -1rem; opacity: 0; visibility: hidden; transition: all .5s ease; transform: translateY(50%); } .mad-share-wrap:hover .mad-social-icons { opacity: 1; visibility: visible; transform: translateY(0); } .mad-share-wrap:not(.type-2):hover a.share { opacity: 0; visibility: hidden; } .mad-share-wrap:not(.type-2) .mad-social-icons>ul { flex-wrap: nowrap; } .mad-share-wrap.type-2 { display: flex; flex-wrap: wrap; column-gap: 1rem; align-items: center; row-gap: 1rem; } .mad-share-wrap.type-2>span { font-size: 1.125rem; line-height: 2rem; font-weight: bold; color: var(--color-neutral-60); } .mad-text-link.share .svg { margin-right: 1.25rem; display: inline-block; vertical-align: middle; height: 2rem; } .mad-text-link.share:after { display: none; } .mad-flex-item { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: 2rem; } .btn-set { margin: -1rem -0.5rem 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; align-items: center; } .btn-set>* { margin: 1rem 0.5rem 0; } .btn-set.vr-type { flex-direction: column; } .btn-set.small-btns { margin: -0.25rem -0.125rem 0; } .btn-set.small-btns>* { margin: 0.25rem 0.125rem 0; } .btn-set.big-btns { margin: -2rem -1rem 0; } .btn-set.big-btns>* { margin: 2rem 1rem 0; ; } .btn-set.size-2 { margin: -1rem -1.25rem 0; } .btn-set.size-2>* { margin: 1rem 1.25rem 0; } .btn-set.mad-logos { flex-wrap: nowrap; margin: -1.5rem -0.75rem 0; } .btn-set.mad-logos>* { margin: 1.5rem 0.75rem 0; } .btns-set { margin: -4rem -1.5rem 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .btns-set:not(:last-child) { margin-bottom: 4rem; } .btns-set>ul { width: 16.6666%; padding: 4rem 1.5rem 0; line-height: normal; } .btns-set ul>li:not([class*="content-element-"]):not(:last-child) { margin-bottom: 1.5rem; } .mad-share-btns { display: flex; flex-wrap: wrap; align-items: center; margin: -0.25rem -0.125rem 0; } .mad-share-btns>a { padding: 0.3125rem 2rem; font-size: 0.9375rem; letter-spacing: 0.1px; color: #fff !important; border-radius: 8px; font-weight: 500; margin: 0.25rem 0.125rem 0; background-image: none !important; } .mad-share-btns>a i { font-size: 0.75rem; margin-right: 0.625rem !important; margin-left: 0 !important; margin-top: 0.25rem; line-height: 25px; } .mad-share-btns>a i.icon { font-size: 0.875rem; } .mad-share-btns>span { margin-right: 1rem; } .mad-paycards a { border-radius: 0.5rem; display: block; overflow: hidden; } /* ---------------------------------------- Panels (Accordions & Toggles) ---------------------------------------- */ .mad-panels-title>button { font-size: 1.5rem; line-height: 2rem; font-weight: 400; font-family: "Judson", sans-serif; text-align: initial; display: block; width: 100%; position: relative; padding-left: 2.5rem; letter-spacing: -0.3px; background-clip: padding-box; color: var(--color-primary); -webkit-transition: background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), color .5s cubic-bezier(0.165, 0.84, 0.44, 1), border-color .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), color .5s cubic-bezier(0.165, 0.84, 0.44, 1), border-color .5s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .mad-panels-title>button:hover { color: var(--color-primary-darker); } .mad-panels-title>button::after, .mad-panels-title>button::before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -0.8125rem; height: 26px; width: 26px; background-color: var(--color-primary); border-radius: var(--br-custom); } .mad-panels-title>button::before { -webkit-mask: url(../legasy_icons_svg/plus.svg) no-repeat; mask: url(../legasy_icons_svg/plus.svg) no-repeat; } .mad-panels-title>button::after { -webkit-mask: url(../legasy_icons_svg/minus.svg) no-repeat; mask: url(../legasy_icons_svg/minus.svg) no-repeat; opacity: 0; } .mad-panels:not(.mad-panels--style-2) { margin-bottom: -2rem; } .mad-panels:not(.mad-panels--style-2) .mad-panels-title.mad-panels-active>button::after, .mad-panels:not(.mad-panels--style-2) .mad-panels-title.mad-panels-active>button::before { background-color: var(--color-primary-darker); } .mad-panels-title:not(:last-child) { margin-bottom: 0; } .mad-panels-active.mad-panels-title>button::before { opacity: 0; } .mad-panels-active.mad-panels-title>button::after { opacity: 1; } .mad-panels-definition { padding-top: 1.5rem; padding-bottom: 2rem; } .mad-panels-title:not(.mad-panels-active):not(:last-child) { margin-bottom: 2rem; } .mad-panels-definition:not(:last-child) { margin-bottom: 0; } .mad-panels-definition p:not(:last-child) { margin-bottom: 1rem; } .mad-panels-title.mad-panels-active>button { color: var(--color-primary-darker); } .mad-panels-title:first-child>button { border-top: none; } .mad-panels-title>button { border-width: 1px 0 0 0; border-color: #dadada; } .mad-panels.mad-panels--style-2 .mad-panels-title>button { background-color: var(--color-primary); color: var(--color-neutral-0); padding: 1rem 2rem; padding-left: 4.5rem; border-radius: var(--br-main); } .mad-panels.mad-panels--style-2 { margin-bottom: -0.5rem; } .mad-panels.mad-panels--style-2 .mad-panels-title>button:hover { background-color: var(--color-primary-lighter); } .mad-panels.mad-panels--style-2 .mad-panels-title.mad-panels-active>button { background-color: var(--color-primary-darker); } .mad-panels.mad-panels--style-2 .mad-panels-title>button::before { -webkit-mask: url(../legasy_icons_svg/plus.svg) no-repeat; mask: url(../legasy_icons_svg/plus.svg) no-repeat; left: 2rem; background: var(--color-neutral-0); } .mad-panels.mad-panels--style-2 .mad-panels-title>button::after { -webkit-mask: url(../legasy_icons_svg/minus.svg) no-repeat; mask: url(../legasy_icons_svg/minus.svg) no-repeat; left: 2rem; top: 50%; transform: translateY(-50%); background: var(--color-neutral-0); } .mad-panels.mad-panels--style-2 .mad-panels-title:not(.mad-panels-active):not(:last-child) { margin-bottom: 0.5rem; } .mad-panels.mad-panels--style-2 .mad-panels-definition { padding: 2rem; } .mad-csstransforms3d .mad-panels-title>button::after, .mad-csstransforms3d .mad-panels-title>button::before { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity; } .mad-csstransforms3d .mad-panels-title>button::after, .mad-csstransforms3d .mad-panels-title.mad-panels-active>button::before { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } .mad-csstransforms3d .mad-panels-title>button::before, .mad-csstransforms3d .mad-panels-title.mad-panels-active>button::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mad-panels-definition p { line-height: 1.5rem; } .mad-panels-definition .img-wrap img { border-radius: var(--br-main); } /* ---------------------------------------- Tabs & Tour Sections ---------------------------------------- */ .mad-tabs:not(.mad-tabs--unstyled) { overflow: hidden; } .mad-tabs:not(.mad-tabs--unstyled) .mad-tabs-nav { font-weight: bold; display: flex; column-gap: 2.5rem; position: relative; z-index: 2; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } .mad-tabs.mad-tabs--style-2:not(.mad-tabs--unstyled):not(.mad-tabs--tour-sections) .mad-tabs-nav>span { margin-bottom: -2px; } .mad-tabs:not(.mad-tabs--unstyled) .mad-tabs-nav a { font-family: 'Judson', sans-serif; color: var(--color-primary); display: block; font-weight: normal; white-space: nowrap; border-radius: var(--br-main); font-size: 1.5rem; line-height: 2rem; -webkit-transition: background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), color .5s cubic-bezier(0.165, 0.84, 0.44, 1), border-color .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), color .5s cubic-bezier(0.165, 0.84, 0.44, 1), border-color .5s cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-tabs:not(.mad-tabs--unstyled) .mad-tabs-nav a:hover { color: var(--color-primary-lighter); } .mad-tabs:not(.mad-tabs--unstyled) .mad-tabs-nav .mad-active>a { color: var(--color-primary-darker); } .mad-tabs:not(.mad-tabs--unstyled) .mad-tab { font-size: 1rem; line-height: 1.5rem; padding-top: 1.5rem; } .mad-tabs--style-2:not(.mad-tabs--unstyled) .mad-tabs-nav { column-gap: 0.5rem; row-gap: 0.5rem; } .mad-tabs--style-2:not(.mad-tabs--unstyled) .mad-tabs-nav a { position: relative; padding: 1rem 2rem; background: var(--color-primary); color: var(--color-neutral-0); } .mad-tabs--style-2:not(.mad-tabs--unstyled) .mad-tabs-nav a:hover { background: var(--color-primary-lighter); color: var(--color-neutral-0); } .mad-tabs:not(.mad-tabs--unstyled).mad-tabs--style-2:not(.mad-tabs--tour-sections) .mad-tabs-nav .mad-active>a { background: var(--color-primary-darker); color: var(--color-neutral-0); } .mad-tabs--style-2:not(.mad-tabs--unstyled) .mad-tab { padding: 2rem; padding-bottom: 0; overflow: hidden; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled) .mad-tabs-nav { float: left; width: 100%; max-width: 17rem; display: block; border: none; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled) .mad-tabs-nav>span { display: block; } .mad-tabs--tour-sections .mad-tabs-nav>span a { position: relative; padding-left: 2.5rem; } .mad-tabs--tour-sections .mad-tabs-nav>span:not(:last-child) { margin-bottom: 2rem; } .mad-tabs--tour-sections .mad-tabs-nav>span a:before, .mad-tabs--tour-sections .mad-tabs-nav>span a:after { content: ''; position: absolute; left: 0; top: 50%; margin-top: -0.8125rem; height: 26px; width: 26px; background-color: var(--color-primary); } .mad-tabs--tour-sections .mad-tabs-nav>span a:after { -webkit-mask: url(../legasy_icons_svg/minus.svg) no-repeat; mask: url(../legasy_icons_svg/minus.svg) no-repeat; opacity: 0; } .mad-tabs--tour-sections .mad-tabs-nav>span a:before { -webkit-mask: url(../legasy_icons_svg/plus.svg) no-repeat; mask: url(../legasy_icons_svg/plus.svg) no-repeat; } .mad-tabs--tour-sections .mad-tabs-nav>span.mad-active a:before { opacity: 0; } .mad-tabs--tour-sections .mad-tabs-nav>span.mad-active a:after { opacity: 1; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled):not(.mad-tabs--style-2) .mad-tabs-nav>span:first-child a { padding-top: 0; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled), .mad-tabs--tour-sections:not(.mad-tabs--unstyled) .mad-tabs-container { overflow: hidden; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled):not(.mad-tabs--style-2) .mad-tab { padding-top: 0; padding-left: 2rem; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled) .mad-tab, .mad-tabs--tour-sections:not(.mad-tabs--unstyled).mad-tabs--style-2 .mad-tab { padding-top: 0; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled) .mad-tab { padding-right: 0; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled).mad-tabs--style-2 .mad-tabs-nav { margin-right: -2px; margin-bottom: -2px; } .mad-tabs--tour-sections:not(.mad-tabs--unstyled).mad-tabs--style-2 .mad-tabs-nav a { padding: 1rem 2rem; padding-left: 4.5rem; } .mad-tabs--tour-sections.mad-tabs:not(.mad-tabs--unstyled).mad-tabs--style-2 .mad-tabs-nav>span a:after, .mad-tabs--tour-sections.mad-tabs:not(.mad-tabs--unstyled).mad-tabs--style-2 .mad-tabs-nav>span a:before { background-color: var(--color-neutral-0); left: 2rem; } .mad-tabs--tour-sections.mad-tabs:not(.mad-tabs--unstyled).mad-tabs--style-2 .mad-tabs-nav>span.mad-active a { color: var(--color-neutral-0); background: var(--color-primary-darker); } .mad-tabs--tour-sections.mad-tabs--style-2 .mad-tabs-nav>span:not(:last-child) { margin-bottom: 0.5rem; } .mad-tabs.no-icons:not(.mad-tabs--unstyled) .mad-tabs-nav>span a { padding: 0; } .mad-tabs.no-icons .mad-tabs-nav>span a:before, .mad-tabs.no-icons .mad-tabs-nav>span a:after { display: none; } /* ---------------------------------------- Pagination ---------------------------------------- */ .mad-img-section .mad-img-content { padding: 9rem 0; } .mad-img-content .mad-title { position: relative; z-index: 11; } .mad-img-section .mad-img-container { position: relative; height: 100%; display: flex; align-items: flex-end; } .mad-img-container.index-11 { z-index: 11; } .mad-img-container .mad-img { margin-bottom: -4rem; } .mad-img-section .mad-img-container.top-side { align-items: flex-start; } .mad-img-section .mad-img-container.top-side .mad-img { margin-bottom: 0; margin-top: -4rem; } .mad-img { display: block; overflow: hidden; width: 100%; border-radius: var(--br-main); } .mad-img>img { width: 100%; } /* Pages Navigation */ .mad-page-nav { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .mad-page-nav>[class*="mad-nav-"] { display: flex; align-items: center; position: relative; max-width: 50%; } .mad-page-nav>[class*="mad-nav-"]:before { content: ''; display: block; width: 3.5rem; min-width: 3.5rem; height: 3.5rem; text-align: center; line-height: 3.5rem; background: #e6e6e6; transition: all .5s ease; border-radius: 50%; cursor: pointer; } .mad-page-nav>.mad-nav-left:after, .mad-page-nav>.mad-nav-right:after { position: absolute; left: 1rem; top: 50%; margin-top: -9.5px; content: ''; height: 19px; width: 22px; -webkit-mask: url(../yummi_svg_icons/arrow_left.svg) no-repeat; mask: url(../yummi_svg_icons/arrow_left.svg) no-repeat; background-color: #232223; background-size: cover; } .mad-page-nav>.mad-nav-right:after { left: auto; right: 1rem; -webkit-mask: url(../yummi_svg_icons/arrow_right.svg) no-repeat; mask: url(../yummi_svg_icons/arrow_right.svg) no-repeat; } .mad-page-nav>[class*="mad-nav-"]:hover:before { background: #ebe117; } .nav-actions a b { font-weight: normal; } .mad-page-nav>.mad-nav-right { flex-direction: row-reverse; text-align: right; } .mad-page-nav>[class*="mad-nav-"]>* { padding: 0 1rem; } .mad-page-nav.mad-entities.mad-entity-hr .mad-nav-right .mad-entity .mad-entity-tags { justify-content: flex-end; } .mad-page-nav.mad-entities.mad-entity-hr .mad-nav-right .mad-entity .mad-entity-media { margin-right: 0; margin-left: 1rem; } /* / Pages Navigation */ .mad-pagination { display: flex; margin-top: 3rem; justify-content: center; } .mad-pagination>li>a.mad-arrows>.svg path { fill: var(--color-primary); transition: all .5s ease; } .mad-pagination>li>a.mad-arrows { display: flex; font-size: 1rem; line-height: 2.5rem; column-gap: 1rem; font-weight: bold; width: auto; color: var(--color-primary); letter-spacing: 0.3px; } .mad-pagination>li:first-child, .mad-pagination>li:last-child { flex: auto; } .mad-pagination>li>a.mad-arrows.next { flex-direction: row-reverse; } .mad-pagination>li>a.mad-arrows>.svg { height: 2.5rem; width: 1.375rem; } .mad-pagination>li>a:hover>.svg path { fill: var(--color-primary-lighter); } .mad-pagination>li>a.page-numbers>i { line-height: 3.25rem; } .mad-pagination>li>a.mad-arrows>span { position: relative; } .mad-pagination>li>a.mad-arrows>span:after { content: ''; position: absolute; top: 50%; left: 0; width: 5.25rem; height: 2.5rem; margin-top: -1.25rem; -webkit-mask: url(../legasy_icons_svg/menu_item_hover.svg) no-repeat; mask: url(../legasy_icons_svg/menu_item_hover.svg) no-repeat; background-color: var(--color-primary-25); opacity: 0; visibility: hidden; transition: all .5s ease; z-index: -1; } .mad-pagination>li>a.mad-arrows>span { transition: .5s ease; } .mad-pagination>li>a.mad-arrows:hover>span { transform: translateX(1rem); } .mad-pagination>li>a.mad-arrows.next:hover>span { transform: translateX(-1rem); } .mad-pagination>li>a.mad-arrows:hover>span:after { margin-left: -1rem; opacity: 1; visibility: visible; } .mad-pagination>li>a.mad-arrows.next>span:after { left: auto; right: 0; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .mad-pagination>li>a.mad-arrows.next:hover>span:after { margin-left: 0; margin-right: -1rem; } .mad-pagination>li>a:hover, .mad-pagination>li>a.mad-arrows:hover>i { color: var(--color-primary-lighter); border-color: var(--color-primary-lighter); } .mad-pagination>li>a:not(.mad-arrows):hover .svg rect { stroke: var(--color-primary-lighter); } .mad-pagination>li>a.current { color: var(--color-primary-darker); border-color: var(--color-primary-darker); } .mad-pagination>li>a.page-numbers { width: 2.5rem; line-height: 2.5rem; font-weight: bold; color: var(--color-primary); text-align: center; display: block; border-radius: 60% 40% 40% 60% / 50% 55% 45% 50%; } .mad-pagination>li>a.page-numbers:hover, .mad-pagination>li>a.page-numbers.current { background: var(--color-primary-25); color: var(--color-primary-darker); } .mad-pagination>li>a.page-numbers:not(.current):hover { background: none; } .mad-pagination>li>a.page-numbers:not(.current):hover { color: var(--color-primary-lighter); } .mad-pagination>li>a.page-numbers.current { cursor: inherit; } /* ---------------------------------------- Progress Bars ---------------------------------------- */ .mad-progress-bars-item:not(:last-child) { margin-bottom: 2rem; } .mad-progress-bar { height: 0.5rem; position: relative; border-radius: var(--br-main); overflow: hidden; background-color: var(--color-primary-25); } .mad-progress-bar-title { font-family: "Judson", sans-serif; font-size: 1.5rem; line-height: 2rem; font-weight: 400; margin-bottom: 0.5rem; display: block; position: relative; padding-right: 6.25rem; letter-spacing: -0.3px; color: var(--color-neutral); } .mad-progress-bar-title::after { content: attr(data-value) attr(data-units); position: absolute; bottom: 0; right: 0; } .mad-progress-bar-indicator { position: absolute; top: 0; bottom: 0; left: 0; right: auto; background: var(--color-primary); } .mad-progress-bars--secondary .mad-progress-bar { height: 0.25rem; border-radius: 0; } .mad-progress-bars--secondary .mad-progress-bar-title { font-family: 'Roboto', sans-serif; font-size: 1.125rem; } .mad-progress-bars.style-2 .mad-progress-bar { background: var(--color-neutral-15); } .mad-progress-bars.style-2 .mad-progress-bar-indicator { background: var(--color-neutral); } .mad-review-section { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: 2rem; } .mad-review-section>* { flex: 1; } .mad-review-box { display: flex; align-items: center; justify-content: center; padding: 1rem; height: 100%; width: 100%; max-width: 17rem; min-height: 17rem; background: var(--color-primary-10); } .mad-review-box-inner { font-family: 'Judson', sans-serif; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.5px; text-align: center; color: var(--color-neutral); display: flex; flex-direction: column; } .mad-review-box-inner>span:first-child { font-size: 6rem; line-height: 6rem; color: var(--color-primary); } /* ---------------------------------------- Counters ---------------------------------------- */ .mad-counters { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; position: relative; z-index: 2; } .mad-counters[class*="item-col-"]:not(.no-gutters) { margin-top: -3rem; } .mad-counters[class*="item-col-"]:not(.no-gutters)>* { padding-top: 3rem; } .mad-counter { color: var(--color-neutral-80); font-size: 1rem; line-height: 1.5rem; } .mad-counter-count { font-family: 'Judson', sans-serif; font-size: 4rem; line-height: 3.5rem; white-space: nowrap; font-weight: 400; color: var(--color-neutral); letter-spacing: 0; margin-bottom: 0.5rem; } .mad-counter-icon .svg { height: 6rem; } .mad-counters.type-2 .mad-counter-icon .svg { height: 4.875rem; } .mad-counters.vr-type .mad-counter .mad-counter-inner { flex-direction: column; column-gap: 0; row-gap: 0; } .mad-counters.vr-type .mad-counter .mad-counter-icon:not(:last-child) { margin-bottom: 1rem; } .mad-counter .mad-counter-icon:after { width: 4rem; height: 4rem; margin-right: -0.5rem; margin-top: -0.5rem; } .mad-counters .mad-counter .mad-counter-inner { display: flex; column-gap: 1.5rem; row-gap: 1rem; } .mad-counters.style-2 .mad-counter { color: var(--color-primary-10); } .mad-counters.style-2 .mad-counter-count { color: var(--color-neutral-0); } .mad-counters.no-icons .mad-counter .mad-counter-icon { display: none; } .mad-counters.style-2 .mad-counter .mad-counter-icon path { stroke: var(--color-neutral-0); } /* ---------------------------------------- Tooltips ---------------------------------------- */ [data-tooltip]:not(a) { font-weight: bold; color: var(--color-secondary-80); } .monkeysan-tooltip-skin-mad { font-size: 0.8125rem; line-height: 2rem; font-weight: normal; padding-left: 0.5rem; padding-right: 0.5rem; background-color: var(--color-primary-25); border-radius: var(--br-main); } .monkeysan-tooltip-skin-mad.monkeysan-tooltip::after { content: ""; width: 0; height: 0; border-style: solid; border-color: transparent; position: absolute; } .monkeysan-tooltip-skin-mad.monkeysan-tooltip-top::after, .monkeysan-tooltip-skin-mad.monkeysan-tooltip-bottom.monkeysan-tooltip-position-reversed::after { bottom: auto; right: auto; top: 100%; left: 50%; margin-left: -8px; margin-top: -1px; border-width: 7px 8px 0 8px; border-color: var(--color-primary-10) transparent transparent transparent; } .monkeysan-tooltip-skin-mad.monkeysan-tooltip-bottom::after, .monkeysan-tooltip-skin-mad.monkeysan-tooltip-top.monkeysan-tooltip-position-reversed::after { top: auto; right: auto; bottom: 100%; left: 50%; margin-left: -8px; margin-bottom: -1px; border-width: 0 8px 7px 8px; border-color: transparent transparent var(--color-primary-10) transparent; } .monkeysan-tooltip-skin-mad.monkeysan-tooltip-right::after, .monkeysan-tooltip-skin-mad.monkeysan-tooltip-left.monkeysan-tooltip-position-reversed::after { bottom: auto; right: 100%; top: 50%; left: auto; margin-top: -8px; margin-right: -1px; border-width: 8px 7px 8px 0; border-color: transparent var(--color-primary-10) transparent transparent; } .monkeysan-tooltip-skin-mad.monkeysan-tooltip-left::after, .monkeysan-tooltip-skin-mad.monkeysan-tooltip-right.monkeysan-tooltip-position-reversed::after { bottom: auto; right: auto; top: 50%; left: 100%; margin-top: -8px; margin-left: -1px; border-width: 8px 0 8px 7px; border-color: transparent transparent transparent var(--color-primary-10); } /* ---------------------------------------- Team Members ---------------------------------------- */ .mad-team { display: flex; flex-wrap: wrap; } .mad-team .mad-team-member { position: relative; transition: all .5s ease; padding-bottom: 2rem; } .mad-team-member-photo { display: block; border-radius: var(--br-main); overflow: hidden; } .mad-team-member-photo img { width: 100%; } .mad-team-member .mad-team-member-info { position: absolute; bottom: 0; left: 0; padding: 2rem; width: calc(100% - 2rem); border-radius: var(--br-main); border-top-left-radius: 0; background: var(--color-neutral-5); transition: all .5s ease; } .mad-team-member-info .mad-team-member-name:not(:last-child) { margin-bottom: 0.5rem; } .mad-team-member-info .mad-team-member-name a { border-bottom: 1px solid transparent; } .mad-team-member-info .mad-team-member-name a:hover { border-bottom-color: inherit; } .mad-team-member-info .mad-member-stat { font-size: 1rem; line-height: 1.5rem; letter-spacing: 1px; color: var(--color-neutral-60); transition: color .5s ease; } .mad-team:not(.type-3) .mad-team-member .mad-social-icons { opacity: 0; visibility: hidden; transition: all .5s ease; margin-top: -2rem; } .mad-team:not(.type-3) .mad-team-member:hover .mad-social-icons { opacity: 1; visibility: visible; margin-top: 1rem; } .mad-team:not(.type-3) .mad-team-member:hover .mad-team-member-info { background: var(--color-secondary-80); transform: translateX(2rem); border-top-left-radius: 0.25rem; border-top-right-radius: 0; } .mad-team:not(.type-3) .mad-team-member:hover .mad-member-stat { color: var(--color-secondary-20); } .mad-team:not(.type-3) .mad-team-member:hover .mad-team-member-name { color: var(--color-neutral-0); } .mad-entities.mad-team .mad-entity .mad-entity-content .mad-title:not(:last-child) { margin-bottom: 0; } .mad-team .mad-pre-title { color: var(--color-neutral-60); } /* ---------------------------------------- Tables ---------------------------------------- */ .mad-table-wrap { border-radius: var(--br-main); overflow: hidden; position: relative; z-index: 1; background-color: var(--color-neutral-0); } .mad-table-wrap:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--br-main); border-width: 1px; border-style: solid; border-color: var(--color-neutral-15); z-index: -1; } table { table-layout: fixed; border-collapse: collapse; border-width: 1px; border-style: solid; overflow: hidden; border-color: var(--color-neutral-15); width: 100%; } table:not(:last-child) { margin-bottom: 1rem; } table tr { -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transition-duration: 500ms; transition-duration: 500ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); border-width: 0; border-style: solid; } table tr:hover, table tr:focus { -webkit-transition-duration: 150ms; transition-duration: 150ms; } table tr:hover { background-color: var(--color-neutral-5); } table td, table th { padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; font-size: 1rem; border-top-width: 1px; border-top-style: solid; border-top-color: var(--color-neutral-15); color: var(--color-neutral-80); } table th, table tfoot td.title { font-family: 'Judson', sans-serif; font-size: 1.25rem; font-weight: 400; color: var(--color-neutral); } table tfoot td span { color: var(--color-secondary); } table tfoot th, table tfoot td, table tfoot td.title { font-weight: bold; } table th { background: var(--color-neutral-15); } .mad-table-label { display: block; color: #b1b1b1; } .mad-table-label:not(:last-child) { margin-bottom: 1.75rem; } table tbody, table thead, table tfoot, table tr, table th, table td { border-color: inherit; } table.mad-table--vertical tr th { width: 17rem; } .mad-sidebar table.mad-table--vertical tr th, .mad-order table.mad-table--vertical tr th, .col-xxl-3 table.mad-table--vertical tr th { width: 37.5%; } .mad-table-wrap.style-2 table td, .mad-table-wrap.style-2 table th, .mad-table-wrap.style-2 table { border-color: var(--color-secondary-80); } .mad-table-wrap.style-2 table th { background: var(--color-secondary-80); } .mad-table-wrap.style-2 table th { color: var(--color-neutral-0); } .mad-table-wrap.style-2:after { border-color: var(--color-secondary-80); } .mad-table-wrap.style-2 table tr:hover { background-color: var(--color-primary-5); } /* Pricing tables */ .mad-entities.mad-pricing .mad-entity .mad-entity-content { display: flex; column-gap: 1.875rem; } .mad-entities.mad-pricing:not(.style-2) .mad-entity, .mad-entities.mad-pricing .mad-entity:after { transition: all .5s ease !important; } .mad-entities.mad-pricing:not(.style-2) .mad-entity .mad-entity-content { transition: padding .5s ease; } .mad-entities.mad-pricing:not(.style-2) .mad-entity:hover { padding-left: 0; padding-right: 2rem; } .mad-entities.mad-pricing .mad-entity:hover:after { transform: translateX(2rem); } .mad-entities.mad-pricing:not(.style-2) .mad-entity:hover .mad-entity-content { padding-right: 0; padding-left: 4rem; } .mad-pricing-value { display: flex; flex-direction: column; font-size: 0.875rem; line-height: 1rem; row-gap: 0.5rem; color: var(--color-neutral-60); transition: color .5s ease; } .mad-pricing-value .mad-value-pay { font-family: 'Judson', sans-serif; font-size: 4rem; line-height: 3.5rem; color: var(--color-primary); letter-spacing: -0.5px; display: flex; align-items: flex-start; } .mad-pricing-value .mad-value-pay:before { content: '$'; font-size: 2.25rem; line-height: 2.5rem; } .mad-entities.mad-pricing.mad-entities:not(.type-3):not(.mad-entity-small) .mad-entity:hover:after { background: var(--color-secondary-80); } .mad-entities.mad-pricing .mad-entity, .mad-entities.mad-pricing .mad-entity-title, .mad-pricing-value .mad-value-pay { transition: color .5s ease; } .mad-entities.mad-pricing .mad-entity:hover { color: var(--color-secondary-5); } .mad-entities.mad-pricing .mad-entity:hover .mad-value-pay, .mad-entities.mad-pricing .mad-entity:hover .mad-entity-title, .mad-entities.mad-pricing .mad-entity:hover .mad-pricing-value { color: var(--color-neutral-0); } .mad-entities.mad-pricing.style-2 .mad-entity { color: var(--color-secondary-5); text-align: center; padding: 0; } .mad-entities.mad-pricing.style-2 .mad-entity::after { display: none; } .mad-entities.mad-pricing.style-2 .mad-entity .mad-pre-title { color: var(--color-neutral-10); } .mad-entities.mad-pricing.style-2 .mad-entity .mad-entity-title { font-size: 3.5rem; line-height: 4rem; } .mad-entities.mad-pricing.style-2 .mad-entity { color: var(--color-secondary-5); } .mad-entities.mad-pricing.style-2 .mad-entity .mad-entity-title, .mad-entities.mad-pricing.style-2 .mad-entity .mad-pricing-value .mad-value-pay { color: var(--color-neutral-0); } .mad-entities.mad-pricing.style-2 .mad-entity .mad-pricing-value { color: var(--color-neutral-10); } .mad-entities.mad-pricing.style-2 .mad-entity .mad-entity-content { padding: 0; display: block; } .mad-entities.mad-pricing.style-2 .mad-entity .mad-entity-content .mad-col:last-child { display: flex; column-gap: 2rem; align-items: center; justify-content: center; } .mad-simple-slideshow.owl-carousel .owl-nav button.owl-prev { left: 15rem; } .mad-simple-slideshow.owl-carousel .owl-nav button.owl-next { right: 15rem; } .mad-entities:not(.type-2) .mad-entity .mad-simple-slideshow.owl-carousel .owl-nav button.owl-prev, .mad-entities.mad-grid--isotope .mad-entity .mad-simple-slideshow.owl-carousel .owl-nav button.owl-prev { left: 4rem; } .mad-entities:not(.type-2) .mad-entity .mad-simple-slideshow.owl-carousel .owl-nav button.owl-next, .mad-entities.mad-grid--isotope .mad-entity .mad-simple-slideshow.owl-carousel .owl-nav button.owl-next { right: 4rem; } /* ---------------------------------------- Banners ---------------------------------------- */ .mad-banners { display: flex; flex-wrap: wrap; } .mad-banners.masonry { margin: -2rem -1rem 0; } .mad-banners.masonry>.mad-col { width: 66.6666%; padding: 2rem 1rem 0; } .mad-banners.masonry>.mad-col:last-child { width: 33.3333%; } .mad-banners.masonry>.mad-col>.mad-banner { height: 100%; } .mad-banner { position: relative; min-height: 33rem; display: block; z-index: 1; border-radius: var(--br-main); transition: all .5s ease; overflow: hidden; } .mad-banner .btn { transition: all .5s ease; } .mad-banners .mad-banner .mad-banner-content { text-align: center; display: flex; flex-direction: column; padding: 4rem; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .mad-banner .mad-banner-main-img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; transition: all .8s ease; z-index: -1; } .mad-banner .mad-banner-aligner { display: contents; } .mad-banner .mad-banner-title { color: var(--color-neutral-0); } .mad-banner .mad-banner-title:not(:last-child) { margin-bottom: 0; } .mad-banners:not(.type-2) .mad-banner .btn { opacity: 0; visibility: hidden; margin-top: -3.5rem; } .mad-banners:not(.type-2) .mad-banner:hover .btn { margin-top: 2rem; opacity: 1; visibility: visible; } .mad-banners .mad-banner:hover .btn { background: var(--color-primary-lighter); } .mad-banners .mad-banner:hover .btn.style-2 { background: var(--color-secondary-80); } .mad-banners:not(.type-2) .mad-banner:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-secondary); opacity: 0.6; z-index: -1; transition: all .5s ease; } .mad-banners:not(.type-2) .mad-banner:hover:after { background-color: var(--color-primary-darker); } .mad-banners:not(.type-2) .mad-banner .mad-banner-content:before { content: ''; position: absolute; top: 2rem; left: 2rem; right: 2rem; bottom: 2rem; border: 1px solid var(--color-primary-25); border-radius: var(--br-main); } .mad-banners.masonry .two-columns { display: flex; flex-wrap: wrap; margin: -2rem -1rem 0; } .mad-banners.masonry .two-columns>* { padding: 2rem 1rem 0; width: 50%; } .mad-banners.masonry .two-columns>.full-width { width: 100%; } .mad-banners.type-2 .mad-banner { padding: 2rem; min-height: 39rem; position: relative; } .mad-banners.type-2.no-gutters .mad-banner { border-radius: 0; } .mad-banners.type-2 .mad-col .mad-banner:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; transition: all .5s ease; } .mad-banners.type-2.with-bg-img .mad-banner:hover:after { opacity: 0.8; } .mad-banners.type-2 .mad-col:first-child .mad-banner:after { background: var(--color-primary-darker); } .mad-banners.type-2 .mad-col:nth-child(2) .mad-banner:after { background: var(--color-neutral-80); } .mad-banners.type-2 .mad-col:nth-child(3) .mad-banner:after { background: var(--color-secondary-80); } .mad-banners.type-2 .mad-banner .mad-content-inner { max-width: 29rem; color: var(--color-secondary-5); } .mad-banners.type-2 .mad-banner .mad-banner-title:not(:last-child) { margin-bottom: 2.5rem; } .mad-banners.type-2 .mad-banner .mad-content-inner p:not(:last-child) { margin-bottom: 3.5rem; } .mad-banners.type-2 .mad-banner .mad-pre-title { color: var(--color-secondary-10); } .mad-banners.type-2 .mad-col .mad-banner.custom-color:after { background: var(--color-primary); } .mad-sidebar .mad-banners.type-2 .mad-banner { min-height: 29rem; padding-top: 4rem; padding-bottom: 4rem; } /* ---------------------------------------- Icon boxes ---------------------------------------- */ .mad-icon-boxes:not(.vr-type) { font-size: 1rem; line-height: 1.5rem; position: relative; z-index: 1; } .mad-icon-boxes:not(.vr-type) { display: flex; flex-wrap: wrap; } .mad-icon-boxes[class*="item-col-"]:not(.grid-type):not(.no-gutters) { margin: -4rem -2rem 0; } .mad-icon-boxes[class*="item-col-"]:not(.grid-type):not(.no-gutters)>* { padding: 4rem 2rem 0; } .mad-icon-boxes .mad-icon-box .mad-icon-box-icon { display: inline-flex; } .mad-icon-boxes:not(.hr-type):not(.our-info) .mad-icon-box .mad-icon-box-icon:not(:last-child) { margin-bottom: 1.5rem; } .mad-icon-box .mad-icon-box-icon .svg { height: 4.875rem; } .mad-icon-boxes:not(.hr-type):not(.grid-type):not(.small-size):not(.icon-size-2):not(.align-center) .mad-icon-box { max-width: 24.5rem; } .mad-icon-box-title>a { border-bottom: 1px solid transparent; } .mad-icon-box-title>a:hover { border-color: inherit; } .mad-icon-box .mad-icon-box-icon .svg path, .mad-icon-box .mad-icon-box-icon .svg rect { stroke: var(--color-primary); } .mad-icon-box h6.mad-icon-box-title { font-size: 1.875rem; line-height: 2.5rem; } .mad-icon-box .mad-icon-box-title:not(:last-child) { margin-bottom: 1.5rem; } .mad-icon-boxes:not(.our-info) .mad-icon-box .mad-icon-box-icon:after { width: 4rem; height: 4rem; margin-right: -0.5rem; margin-top: -0.5rem; } .mad-icon-box p:not(:last-child) { margin-bottom: 1.5rem; } .mad-icon-box h4.mad-icon-box-title span { font-size: 1.5rem; line-height: 2.5rem; display: block; color: var(--color-neutral-80); } /* Horisontal style */ .mad-icon-boxes.hr-type .mad-icon-box { display: flex; column-gap: 1.5rem; row-gap: 1rem; } .mad-icon-boxes.hr-type.mad-reverse .mad-icon-box { flex-direction: row-reverse; text-align: right; } .mad-icon-boxes.hr-type:not(.icon-size-2):not(.small-size) .mad-icon-box .mad-icon-box-content { max-width: 18rem; } .mad-icon-box-content p>a:hover { text-decoration: underline; } /* Color Style 2 */ .mad-colorizer--scheme-color-3 .mad-icon-box .mad-icon-box-title, .mad-colorizer--scheme-color-5 .mad-icon-box .mad-icon-box-title { color: var(--color-neutral-0); } .mad-colorizer--scheme-color-3 .mad-icon-boxes, .mad-colorizer--scheme-color-3 .mad-icon-box h4.mad-icon-box-title span { color: var(--color-primary-10); } .mad-colorizer--scheme-color-3 .mad-text-link-hover:after { background-color: var(--color-secondary-80); } .mad-colorizer--scheme-color-5 .mad-icon-boxes, .mad-colorizer--scheme-color-5 .mad-icon-box h4.mad-icon-box-title span { color: var(--color-secondary-10); } .mad-colorizer--scheme-color-5 .mad-icon-boxes .mad-icon-box .mad-icon-box-icon .svg path, .mad-colorizer--scheme-color-5 .mad-icon-boxes .mad-icon-box .mad-icon-box-icon .svg rect { stroke: var(--color-secondary); } /* Icons size 2 */ .mad-icon-boxes.icon-size-2 .mad-icon-box .mad-icon-box-icon .svg { height: 4rem; min-width: 4rem } .mad-icon-boxes.icon-size-2 .mad-icon-box .mad-icon-box-title { letter-spacing: -0.7px; } /* Small size */ .mad-icon-boxes.small-size .mad-icon-box .mad-icon-box-icon .svg { height: 2.5rem; min-width: 2.5rem; } .mad-icon-boxes.small-size:not(.hr-type):not(.our-info) .mad-icon-box .mad-icon-box-icon:not(:last-child) { margin-bottom: 1rem; } .mad-icon-box.small-size .mad-icon-box-icon .svg path { stroke: var(--color-primary); } .mad-icon-boxes.small-size .mad-icon-box { font-size: 1.125rem; line-height: 2rem; font-weight: bold; color: var(--color-neutral); position: relative; } .mad-icon-boxes.small-size:not(.vr-type) .mad-col:not(:last-child) .mad-icon-box:after { content: ''; position: absolute; right: -2rem; top: 0; bottom: 0; width: 1px; background: var(--color-neutral-15); } .mad-icon-boxes.small-size.style-2 .mad-icon-box { color: var(--color-neutral-0); } .mad-icon-boxes.small-size.style-2 .mad-col:not(:last-child) .mad-icon-box:after { background: var(--color-secondary-60); } .mad-colorizer--scheme-color-3 .mad-icon-boxes.small-size.style-2 .mad-col:not(:last-child) .mad-icon-box:after { background: var(--color-secondary-80); } .mad-icon-box-icon svg path { transition: .5s ease; } /* Grid Type */ .mad-icon-boxes.grid-type .mad-icon-box { font-size: 1rem; line-height: 1.5rem; text-align: center; align-items: center; justify-content: center; padding: 8rem 1.5rem; border-radius: var(--br-main); display: block; background: var(--color-primary-5); } .mad-icon-boxes.grid-type .mad-icon-box p { margin: 0 auto; } .mad-icon-boxes.grid-type .mad-icon-box p:not(:last-child) { margin-bottom: 2rem; } .mad-icon-boxes.grid-type .mad-icon-box .mad-icon-box-title { font-size: 1.875rem; line-height: 2.5rem; } .mad-icon-boxes.grid-type .mad-icon-box { background-size: cover; position: relative; transition: all 1s ease; height: 100%; } .mad-icon-boxes.grid-type .mad-icon-box .back-side { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; display: flex; align-items: center; justify-content: center; background: var(--color-primary-5); visibility: hidden; transition: all .5s ease; } .mad-icon-boxes.grid-type .mad-icon-box:hover .mad-text-link { padding-left: 1rem; color: var(--color-primary-lighter); } .mad-icon-boxes.grid-type .mad-icon-box:hover .mad-text-link:after { opacity: 1; visibility: visible; } .mad-icon-boxes.grid-type .mad-icon-box.empty-item { background: transparent; } .mad-icon-boxes.grid-type .mad-icon-box:not([data-bg-image-src]):hover+.mad-icon-box .back-side { opacity: 1; visibility: visible; } .mad-icon-box .back-side .mad-icon-box-icon svg { height: 8rem; width: 8rem; } .mad-icon-box .back-side .mad-icon-box-icon svg path { stroke: var(--color-primary); } .mad-icon-boxes.with-hover .mad-icon-box:hover .mad-icon-box-icon svg path, .mad-icon-boxes.grid-type .mad-icon-box:hover .mad-icon-box-icon svg path { stroke: var(--color-primary-lighter); } /* VR Type */ .mad-icon-boxes.vr-type .mad-col:not(:last-child) { margin-bottom: 4rem; } /* ---------------------------------------- Info boxes ---------------------------------------- */ /* ---------------------------------------- Entities ---------------------------------------- */ .mad-entities[class*="item-col-"]:not(.mad-grid--isotope) { display: flex; flex-wrap: wrap; } .mad-entities:not([class*="content-element-"]):not(:last-child) { margin-bottom: 3.5rem; } .mad-entities .mad-entity:not(:last-child) { margin-bottom: 2rem; } .mad-entities .mad-entity { display: flex; padding-bottom: 2rem; position: relative; height: 100%; } .mad-entities:not(.type-3):not(.mad-entity-small) .mad-entity:after { content: ''; position: absolute; left: 2rem; right: 0; bottom: 0; top: 2rem; background: var(--color-primary-5); border-radius: var(--br-main); z-index: -1; transition: background .5s ease; } .mad-entities:not(.mad-entity-small):not(.type-2):not(.type-3) .mad-entity .mad-entity-media { width: 49.9%; } .mad-entity .mad-entity-media, .mad-entity .mad-entity-media .owl-carousel { border-radius: var(--br-main); overflow: hidden; } .mad-entity .mad-entity-media>a:not(.mad-entity-link-element) { border-radius: var(--br-main); overflow: hidden; display: block; } .mad-entity-media img { width: 100%; } .mad-entities:not(.type-2):not(.mad-entity-small):not(.type-3) .mad-entity .mad-entity-content { padding: 4rem 2rem 2rem; width: 50%; } .mad-entity-content .mad-entity-title { letter-spacing: -0.5px; } .mad-entity-title>a { border-bottom: 1px solid transparent; } .mad-entity-title>a:hover { border-bottom-color: inherit; } .mad-entity .mad-entity-content p:not(:last-child), .mad-entity .mad-entity-content .mad-entity-title:not(:last-child) { margin-bottom: 2rem; } .mad-entity .mad-entity-content h3.mad-entity-title { letter-spacing: -1.15px; } .mad-entity .mad-entity-content h3.mad-entity-title:not(:last-child) { margin-bottom: 1.5rem; } .mad-entity .mad-entity-content p+p { margin-top: -1rem; } .mad-entity-tags { text-transform: uppercase; color: var(--color-primary); font-weight: bold; font-size: 0.875rem; line-height: 1.5rem; letter-spacing: 1.5px; } .mad-entity-tags span { color: var(--color-neutral-40); } .mad-entity-tags:not(:last-child) { margin-bottom: 1rem; } .mad-entity-tags>*:not(:last-child):after { content: ''; height: 12px; width: 1px; display: inline-block; vertical-align: middle; margin: 0 0.875rem; background: var(--color-neutral-40); } .mad-entities.type-2 .mad-entity { display: block; padding-left: 2rem; padding-bottom: 0; } .mad-entities.type-2:not(.mad-entity-small) .mad-entity:after { left: 0; right: 2rem; } .mad-entities.type-2 .mad-entity .mad-entity-content { padding-right: 4rem; padding-left: 0; padding-top: 2rem; padding-bottom: 2rem; } .mad-entities.no-media .mad-entity { padding: 0; } .mad-entities.no-media .mad-entity .mad-entity-content { padding: 2rem; } .mad-entities.no-media:not(.type-3):not(.mad-entity-small) .mad-entity:after { top: 0; left: 0; right: 0; bottom: 0; } .mad-entities.type-3 .mad-entity { padding-bottom: 2rem; position: relative; display: block; } .mad-entities.type-3 .mad-entity .mad-entity-content { position: absolute; bottom: 0; left: 0; padding-top: 2rem; padding-bottom: 2.5rem; padding-left: 2rem; padding-right: 2rem; width: calc(100% - 2rem); border-radius: var(--br-main); border-top-left-radius: 0; background: var(--color-primary-5); z-index: 1; } .mad-entities.type-4 .mad-entity { padding: 0; } .mad-entities.type-4:not(.type-3):not(.mad-entity-small) .mad-entity:after { background: var(--color-secondary); top: 0; bottom: 0; left: -6.25rem; z-index: -2; } .mad-entities.type-4.bg-color-2 .mad-entity:after { background: var(--color-primary-darker); } .mad-entities.with-date .mad-entity .mad-entity-content { position: relative; padding-left: 6.5rem; min-height: 10rem; } .mad-entities.with-date .mad-entity { font-size: 1.125rem; line-height: 2rem; } .mad-entities.with-date .mad-entity .mad-entity-content .mad-entity-date { position: absolute; top: 2rem; left: 0; font-size: 4rem; line-height: 4rem; font-family: 'Judson', sans-serif; color: var(--color-neutral); display: flex; flex-direction: column; text-align: center; text-transform: uppercase; } .mad-entities.with-date .mad-entity .mad-entity-content .mad-entity-date span:last-child { font-size: 1.5rem; line-height: 2rem; letter-spacing: 5px; } .mad-entity-footer { display: flex; flex-wrap: wrap; margin-top: 1.5rem; justify-content: space-between; align-items: flex-end; column-gap: 1rem; row-gap: 1rem; } .mad-entity-single .mad-entity-footer { margin-top: 3rem; } .mad-entities:not([class*="item-col-"])>.mad-col:not(:last-child) { margin-bottom: 2rem; } .mad-entities.mad-entity-small { display: block; } .mad-entities.mad-entity-small:not([class*="item-col-"])>.mad-col:not(:last-child) { margin-bottom: 1.5rem; } .mad-entities.mad-entity-small .mad-entity { display: flex; column-gap: 1.5rem; align-items: flex-start; row-gap: 1rem; padding-bottom: 0; } .mad-entities.mad-entity-small .mad-entity .mad-entity-title { font-size: 1.25rem; line-height: 1.5rem; letter-spacing: 0; color: var(--color-neutral); } .mad-entities.mad-entity-small .mad-entity .mad-entity-tags { font-size: 0.75rem; line-height: 1rem; } .mad-entities.mad-entity-small .mad-entity .mad-entity-media { min-width: 6.5rem; border-radius: var(--br-main); overflow: hidden; } .mad-entities.mad-entity-small .mad-entity .mad-entity-tags>*:not(:last-child):after { margin: 0 0.5rem; } .mad-entities.mad-entity-small .mad-entity .mad-entity-tags:not(:last-child) { margin-bottom: 0.5rem; } .mad-entity-link-element { display: flex; align-items: center; font-size: 1.5rem; line-height: 2rem; color: var(--color-neutral-0); background: url(../images/link_blog_bg.svg) no-repeat center var(--color-secondary-80); background-size: cover; padding: 4.625rem 4rem; letter-spacing: -0.3px; word-break: break-word; font-style: italic; column-gap: 1rem; } .mad-entity-link-element>.svg { height: 2.5rem; } .mad-entities:not(.type-2) .mad-entity .mad-entity-link-element, .mad-entities.mad-grid--isotope .mad-entity .mad-entity-link-element { background: url(../images/link_blog_bg2.svg) no-repeat center var(--color-secondary-80); background-size: cover; } .mad-entities.mad-grid--isotope.item-col-3 .mad-entity .mad-entity-link-element { background: url(../images/link_blog_bg3.svg) no-repeat center var(--color-secondary-80); background-size: cover; } .mad-entity.mad-entity-single { font-size: 1.125rem; line-height: 2rem; } .mad-entity-single .mad-testimonial-bg { float: left; margin-right: 2rem; max-width: 50%; } .mad-entity-single .mad-testimonial-bg:not(:last-child) { margin-bottom: 1rem; } .mad-entities:not([class*="item-col-"]) .mad-entity .mad-entity-footer [class*="mad-text-link"], .mad-entities:not([class*="item-col-"]):not(.owl-carousel) .mad-entity { font-size: 1.125rem; line-height: 2rem; } /* --------------- Before & After --------------------- */ .mad-before-after .mad-before-after-media { border-radius: var(--br-main); overflow: hidden; position: relative; display: inline-block; } .mad-before-after.type-2, .mad-entities.type-4 .mad-entity { position: relative; display: flex; justify-content: flex-end; } .mad-entities.type-4:not(.with-instagram) .mad-entity { align-items: center; } .mad-entities.type-4:not(.style-2) .mad-entity { padding-left: 4rem; } .mad-before-after.type-2 .mad-before-after-media, .mad-entities.type-4 .mad-entity .mad-entity-media { width: 50%; overflow: hidden; z-index: 2; padding: 3.5rem 0; } .mad-before-after.type-2 .mad-before-after-media img, .mad-entities.type-4 .mad-entity .mad-entity-media img { border-radius: var(--br-main); } .mad-before-after.type-2 .mad-before-after-content, .mad-entities.type-4:not(.type-2):not(.mad-entity-small) .mad-entity .mad-entity-content { width: 50%; font-size: 1.125rem; line-height: 2rem; padding: 12rem 9.5rem 12.5rem 10.5rem; position: relative; } .mad-before-after.type-2 .mad-before-after-content:after, .mad-entities.type-4 .mad-entity .mad-entity-content:after { content: ''; position: absolute; top: 0; left: -9.5rem; border-radius: var(--br-main); right: 0; bottom: 0; background: var(--color-primary-10); z-index: -1; } .mad-entities.type-4 .mad-entity .mad-entity-content:after { border-radius: 0; } .mad-section--stretched-content-no-px .mad-entities.type-4 .mad-entity .mad-entity-content { border-radius: 0; padding: 12rem 9rem 12.5rem 9rem; } .mad-entity .mad-entity-content.with-texture:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: url(../images/texture4.svg) no-repeat; background-position: bottom left; } .mad-entities.type-4:not(.mad-reversed) .mad-entity .mad-entity-content.with-texture:before { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .mad-entities.type-4.mad-reversed .mad-entity .mad-entity-content.with-texture:before { background-position: left bottom; } .mad-entities.type-4.mad-reversed .mad-entity .mad-entity-content:after { left: 0; right: -9.5rem; } .mad-entities.type-4.mad-reversed .mad-entity { flex-direction: row-reverse; } .mad-entities.type-4.mad-reversed:not(.style-2) .mad-entity { padding-left: 0; padding-right: 4rem; } .mad-entities.type-4.style-2 .mad-entity::after { display: none; } .mad-entities.type-4.mad-reversed.style-2 .mad-entity .mad-entity-media { right: 0; } .mad-before-after-media img { width: 100%; } .mad-entities.type-4.style-2 .mad-entity .mad-entity-content:after { border-radius: var(--br-main); } .mad-entities.type-4.style-2 .mad-entity .mad-entity-content { padding-left: 9.5rem; padding-right: 9.5rem; } .mad-entities.type-4 .mad-entity-content h2.mad-title { letter-spacing: -1px; } .comparison { width: 100%; overflow: hidden; position: relative; border-radius: var(--br-main); overflow: hidden; } .comparison figure { width: 100%; height: 100%; margin: 0; } .divisor { background: url(../images/1792x577_img1.jpg) no-repeat; position: absolute; background-size: cover; width: 50%; bottom: 0; height: 100%; } .mad-before-after.type-2 .divisor { background: url(../images/880x808_img.jpg) no-repeat; background-size: cover; } .divisor::before, .divisor::after { content: ''; position: absolute; right: -4px; width: 0.5rem; height: calc(50% - 2.5rem); background: white; z-index: 3; } .divisor::before { top: 0; } .divisor::after { bottom: 0; } .comparison .handle { position: absolute; width: 6rem; height: 6rem; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); background: url(../images/before_after.png) no-repeat; z-index: 1; } .comparison input[type=range] { -webkit-appearance: none; -moz-appearance: none; position: absolute; top: 50%; left: -3rem; transform: translateY(-50%); background-color: transparent; width: calc(100% + 3rem); cursor: pointer; z-index: 2; } .comparison input[type=range]:focus, .comparison input[type=range]:active { border: none; outline: none; } .comparison input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 6rem; width: 6rem; border-radius: 50%; background: transparent; } .comparison input[type=range]::-moz-range-track { -moz-appearance: none; height: 6rem; width: 100%; background-color: transparent; position: relative; outline: none; } .comparison input[type=range]::-moz-range-thumb { opacity: 0; } .mad-before-after-container { overflow: hidden; border-radius: var(--br-main); } /* ---------------------------------------- Style 2 ---------------------------------------- */ /* ---------------------------------------- Carousels ---------------------------------------- */ .owl-carousel { position: relative; } .owl-carousel:not(.mad-simple-slideshow) .owl-stage, .mad-pricing.mad-simple-slideshow .owl-stage { display: flex; } .owl-carousel:not(.mad-simple-slideshow) .owl-item, .mad-pricing.mad-simple-slideshow .owl-item { float: none; } .owl-carousel .mad-col { height: 100%; } .owl-carousel .mad-col>.mad-section { height: 100%; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { position: absolute; left: 4rem; } .owl-carousel .owl-nav>button { top: calc(50% - 2.75rem); } .owl-carousel .mad-grid-item { height: 100%; } .owl-carousel .owl-nav button.owl-next { right: 4rem; left: auto; } .owl-carousel .owl-nav { display: block !important; opacity: 0; visibility: hidden; transition: .5s ease; } .owl-carousel:hover .owl-nav { opacity: 1; visibility: visible; } .owl-carousel.with-push-right { transform: translateX(8%); } .owl-carousel.with-push-right .owl-dots { display: none !important; } .owl-carousel.with-push-right .owl-nav button.owl-next { right: calc(4rem + 16%); } .nav-color-2 .owl-nav button svg path { fill: var(--color-neutral-0); } .owl-carousel.no-nav .owl-nav, .owl-carousel.no-dots .owl-dots { display: none !important; } .owl-dots { display: flex; column-gap: 1rem; margin-top: 3rem; } .owl-carousel.dots-center .owl-dots { justify-content: center; } .owl-dots .owl-dot span, .tp-bullet { display: block; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--color-neutral); position: relative; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; } .tp-bullet, .tp-bullet:hover { border-color: var(--color-neutral-0); background: transparent; } .dots-color-2 .owl-dots .owl-dot span, .dots-color-3 .owl-dots .owl-dot span { border-color: var(--color-neutral-0); } .tp-bullets { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1rem; width: 100% !important; } .owl-dots .owl-dot.active span, .tp-bullet.selected { background: var(--color-primary); border-color: var(--color-primary); } .dots-color-3 .owl-dots .owl-dot.active span { background: var(--color-secondary); border-color: var(--color-secondary); } .mad-owl-moving:not(.no-loop) { overflow: hidden; } .owl-carousel.no-loop .owl-stage-outer { overflow: visible; } .mad-owl-moving .owl-prev, .mad-owl-moving .owl-next { width: 20% !important; left: 0 !important; top: 0 !important; height: 100% !important; position: absolute; border: none !important; border-radius: 0 !important; margin-top: 0 !important; } .mad-owl-moving .owl-next { left: auto !important; right: 0 !important; } .mad-owl-moving .owl-nav button:before { display: none !important; } .mad-owl-moving .owl-nav button { overflow: hidden; cursor: none !important; } .mad-owl-moving .owl-nav .owl-next>.svg, .mad-owl-moving .owl-nav .owl-prev>.svg { position: absolute; top: 0; left: 0; margin-left: -3rem; margin-top: -3rem; opacity: 0; visibility: hidden; } .mad-owl-moving .owl-nav .owl-next:hover>.svg, .mad-owl-moving .owl-nav .owl-prev:hover>.svg { opacity: 1; visibility: visible; } .owl-carousel.no-loop .owl-stage { align-items: flex-end; } .owl-carousel.no-loop .owl-nav>button.disabled { display: none; } .mad-carousel-type-2 .owl-item.active .mad-entity:after, .mad-carousel-type-2 .owl-item.active .mad-entity-content, .mad-carousel-type-2.mad-entities .owl-item.active .mad-entity, .mad-carousel-type-2 .owl-item .mad-entity .mad-entity-media { transition: all .5s ease; opacity: 1; visibility: visible; } .mad-carousel-type-2 .owl-item:not(.active) .mad-entity-content, .mad-entities.mad-carousel-type-2 .owl-item:not(.active) .mad-entity:after { opacity: 0; visibility: hidden; transition: all .5s ease; } .mad-carousel-type-2.mad-entities .owl-item:not(.active) .mad-entity { padding: 0; transform: translateY(2rem); transition: all .5s ease; } .mad-carousel-type-2 .mad-entity .mad-entity-media { position: relative; } .mad-entities.mad-carousel-type-2 .owl-item .mad-entity .mad-entity-media:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--br-main); background: var(--color-neutral); transition: all .5s ease; opacity: 0; visibility: hidden; } .mad-entities.mad-carousel-type-2 .owl-item:not(.active) .mad-entity .mad-entity-media:after { opacity: 0.6; visibility: visible; } .mad-carousel-type-2 .owl-item .mad-entity .mad-entity-media { height: 34.75rem; } .mad-carousel-type-2 .owl-item .active-item .mad-entity .mad-entity-media { height: 38.875rem; } .owl-carousel.mad-owl-center .owl-item .mad-owl-center-img:after, .mad-carousel-type-2 .owl-item .mad-gallery-item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-neutral); opacity: 0.6; visibility: visible; transition: all .5s ease; } .owl-carousel.mad-owl-center .owl-item.center .mad-owl-center-img:after, .mad-carousel-type-2 .owl-item.active .mad-gallery-item:after { opacity: 0; visibility: hidden; } .owl-carousel.mad-owl-center .owl-nav button.owl-prev { left: 17.5rem; } .owl-carousel.mad-owl-center .owl-nav button.owl-next { right: 17.5rem; } .owl-carousel:not(.mad-simple-slideshow) .owl-stage { display: flex; } .owl-carousel:not(.mad-simple-slideshow) .owl-item { float: none; } .owl-carousel:not(.mad-simple-slideshow) .owl-item .mad-col { height: 100%; } /* ---------------------------------------- Call to Actions ---------------------------------------- */ .mad-cta { font-size: 1.125rem; line-height: 2rem; letter-spacing: 0.2px; color: var(--color-neutral-60); } .mad-cta .mad-cta-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6.125rem; row-gap: 2rem; justify-content: center; } .mad-cta .mad-page-title { letter-spacing: -1px; } .mad-cta .mad-page-title:not(:last-child) { margin-bottom: 1rem; } .mad-cta .mad-page-title span { font-style: italic; } .mad-cta.align-center p:not(:last-child) { margin-bottom: 3rem; } /* ---------------------------------------- Rating ---------------------------------------- */ .mad-rating { line-height: 1; white-space: nowrap; } .mad-rating-top-level { display: flex; } .mad-product-price+.mad-rating { display: block !important; } .mad-rating-top-level>*, .mad-rating-bottom-level>* { font-size: 1rem; line-height: 1; color: var(--color-primary-lighter); } .mad-rating-bottom-level>* { color: var(--color-primary-lighter); } .mad-rating.size-2 .mad-rating-top-level>*, .mad-rating.size-2 .mad-rating-bottom-level>* { font-size: 1.75rem; } /* ---------------------------------------- Testimonials ---------------------------------------- */ .mad-testimonial .mad-rating:not(:last-child) { margin-bottom: 2.5rem; } .mad-testimonial blockquote { font-size: 1.875rem; line-height: 2.5rem; letter-spacing: -1px; color: var(--color-neutral); font-weight: normal; } .mad-testimonials .owl-carousel .mad-testimonial { padding-left: 0.25rem; } .mad-testimonial .mad-testimonial-info:not(:last-child), .mad-testimonial-title:not(:last-child), .mad-testimonial-rating:not(:last-child) { margin-bottom: 2.5rem; } .mad-testimonial-service { display: inline-block; } .mad-testimonial-service img { width: auto !important; } .mad-testimonials.style-2 .mad-testimonial blockquote { color: var(--color-neutral-0); } .mad-testimonials.style-2 .mad-author { color: var(--color-secondary-20); } .mad-testimonial-rating { display: flex; column-gap: 0.375rem; justify-content: center; } .mad-testimonials .mad-testimonial-rating .svg path { stroke: var(--color-secondary); } .mad-testimonials.style-2 .mad-testimonial-rating .svg path { stroke: #fff; } .mad-testimonials[class*="with-quotes"] .mad-testimonial:before { content: ''; display: block; width: 7.5rem; height: 6.5rem; -webkit-mask: url(../legasy_icons_svg/quotes.svg) no-repeat; mask: url(../legasy_icons_svg/quotes.svg) no-repeat; background-color: var(--color-secondary); margin: 0 auto; margin-bottom: 3.5rem; } .mad-testimonials.with-quotes-color-2 .mad-testimonial:before { background-color: var(--color-primary); } /* ---------------------------------------- Author ---------------------------------------- */ .mad-author .mad-author-info { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.05rem; color: var(--color-neutral-60); } .mad-author-photo:not(:last-child) { margin-bottom: 1rem; } .mad-testimonials.style-2 .mad-author .mad-author-info { color: var(--color-secondary-5); } /* ---------------------------------------- Instafeed ---------------------------------------- */ .mad-instafeed:not(.owl-carousel) { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .mad-instafeed.owl-carousel { border-radius: var(--br-main); overflow: hidden; } .mad-instafeed[class*="item-col-"]:not(.no-gutters) .mad-col a { border-radius: var(--br-main); overflow: hidden; } .mad-instafeed .mad-col a { display: block; position: relative; height: 100%; } .mad-instafeed img { width: 100%; } .mad-instafeed .mad-col a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../legasy_icons_svg/instagram.svg) no-repeat; background-color: rgba(13, 13, 13, 0.6); background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: hidden; transition: all .5s ease; } .mad-instafeed .mad-col a:hover:before { opacity: 1; visibility: visible; } .mad-instafeed.owl-carousel .mad-col a { border-radius: var(--br-main); overflow: hidden; } .mad-sidebar .mad-instafeed:not(.owl-carousel)[class*="item-col-"]:not(.no-gutters) { margin: -1.5rem -0.75rem 0; ; } .mad-sidebar .mad-instafeed:not(.mad-grid--no-gutters):not(.owl-carousel)[class*="item-col-"]:not(.no-gutters)>* { padding: 1.5rem 0.75rem 0; } /* ---------------------------------------- Sliders ---------------------------------------- */ .rev-slider-section .rev-slider, .rev-slider-section .rev_slider_wrapper { position: relative; } .rev-slider-section { padding: 5rem 0; padding-bottom: 2.5rem; position: relative; } .rev-slider-section:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f2fcfe; z-index: -1; } .rev-slider[class*="with-overlay"] { z-index: 1; position: relative; } .rev-slider[class*="with-overlay"] .tp-bgimg:after { z-index: 22 !important; } .rev-slider[class*="with-overlay"] .tp-bgimg:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-neutral); opacity: 0.6; } .tp-layer-section-title { text-transform: capitalize; font-family: 'Judson', sans-serif; } .tp-layer-section-title span { font-style: italic; } .rev-slider .mad-pre-title { color: var(--color-neutral-10); } .rev-slider-element { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 0; z-index: 9; border-radius: var(--br-main); border-top-left-radius: 0; border-top-right-radius: 0; overflow: hidden; } .rev-slider-element:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-secondary); opacity: 0.8; z-index: -1; } #rev-slider-2 { border-radius: var(--br-main); overflow: hidden; } .rev-slider-element .mad-icon-boxes.small-size .mad-icon-box { font-size: 1.125rem; line-height: 2rem; } /* ---------------------------------------- Google Map ---------------------------------------- */ .mad-gmap { height: 40.625rem; } .mad-gmap { height: 100%; min-height: 40.625rem; } #googleMap2.mad-gmap { min-height: 48.625rem; } .mad-gmap-wrap { position: relative; padding: 9rem 4rem 0; } .mad-gmap-wrap .mad-gmap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .mad-element-holder { display: flex; } .mad-gmap-element, .mad-contact-element { padding: 9rem 9.5rem; max-width: 55rem; background: var(--color-neutral-0); border-radius: var(--br-main); background-image: url(../images/map_item_bg.svg); background-position: right bottom; background-repeat: no-repeat; overflow: hidden; font-size: 1.125rem; line-height: 2rem; z-index: 3; position: relative; margin-bottom: -4rem; } /* ---------------------------------------- Forms ---------------------------------------- */ input[type="text"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="month"], input[type="number"], input[type="password"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], textarea, .mad-custom-select .mad-selected-option, .select2-container--milenia .select2-selection { border-width: 0; height: 3.5rem; width: 100%; padding-top: 0.3rem; padding-right: 1rem; padding-bottom: 0.3rem; padding-left: 1rem; font-size: 1rem; line-height: 1.5rem; color: var(--color-neutral-80); background-color: var(--color-neutral-0); border-radius: var(--br-main); border-width: 1px; border-style: solid; border-color: var(--color-secondary-20); } .mad-form.style-2 input, .mad-form.style-2 textarea, .mad-form.style-2 .mad-custom-select .mad-selected-option { background-color: var(--color-primary-5); } .mad-form { display: flex; flex-wrap: wrap; } .mad-form.type-2 .mad-col>input:not(:last-child) { margin-bottom: 1rem; } .mad-contact-form.mad-form .mad-col { display: flex; flex-direction: column; } [class*="item-col-"]>*.full-width { width: 100%; } .mad-form-row:not(:last-child), .mad-form-item:not(:last-child) { margin-bottom: 2rem; } .mad-contact-form.mad-form .mad-col { display: flex; flex-direction: column; } .mad-contact-form.mad-form .mad-col .mad-form-item.full-height { flex: 1; } .mad-form-item.full-height textarea { height: 100%; } .mad-form-item.full-height+.mad-form-item { margin-top: 2rem; } /* ---------------------------------------- Placeholder ---------------------------------------- */ ::-webkit-input-placeholder { color: inherit; opacity: 1; } ::-webkit-textarea-placeholder { color: inherit; opacity: 1; } input::-moz-placeholder { color: inherit; opacity: 1; } textarea::-moz-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-textarea-placeholder { color: inherit; opacity: 1; } /* ---------------------------------------- Range Slider ---------------------------------------- */ .mad-range-slider-field { display: flex; flex-wrap: wrap; justify-content: space-between; } .mad-range-slider-field .mad-range-slider { width: 100%; } .mad-range-slider-field.type-2 { flex-wrap: nowrap; column-gap: 0.5rem; } .mad-range-slider-field input[type="text"], .mad-range-slider-field input[type="search"], .mad-range-slider-field input[type="date"], .mad-range-slider-field input[type="datetime-local"], .mad-range-slider-field input[type="email"], .mad-range-slider-field input[type="file"], .mad-range-slider-field input[type="month"], .mad-range-slider-field input[type="number"], .mad-range-slider-field input[type="password"], .mad-range-slider-field input[type="tel"], .mad-range-slider-field input[type="time"], .mad-range-slider-field input[type="url"], .mad-range-slider-field input[type="week"], .mad-range-slider-field textarea { height: auto !important; font-size: inherit; line-height: inherit !important; border-width: 0px; font-weight: inherit; width: 100%; padding: 0 !important; letter-spacing: 2px; margin-bottom: 0 !important; background-color: transparent; color: var(--color-neutral-80); } .mad-range-slider-input:not(:last-child) { margin-bottom: 0.7rem; } .mad-range-slider { margin-top: 0.9375rem; margin-bottom: 0.9375rem; position: relative; height: 0.125rem; background: var(--color-secondary); } .mad-range-slider .ui-slider-range { position: absolute; top: 0; bottom: 0; cursor: pointer; background-color: var(--color-primary-lighter); } .mad-range-slider .ui-slider-handle { display: block; position: absolute; top: 50%; margin-top: -0.5rem; width: 1rem; height: 1rem; border-radius: 50%; cursor: pointer; background-color: var(--color-primary-lighter); } .mad-range-slider .ui-slider-handle:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 0.5rem; height: 0.5rem; border: 2px solid var(--color-neutral-0); margin: 2px; border-radius: 50%; } .mad-range-slider .ui-slider-handle:last-child { margin-left: -0.625rem; } /* ---------------------------------------- Checkbox & Radio ---------------------------------------- */ .mad-toggled-fields:not(:last-child) { margin-bottom: 2rem; } input[type="checkbox"], input[type="radio"] { display: none !important; } input[type="checkbox"]+label[for], input[type="radio"]+label[for] { display: block; position: relative; text-transform: none; font-size: 1rem; line-height: 1.5rem; letter-spacing: 1.2px; padding-left: 2.5rem; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 0; } input[type="checkbox"]+label[for]::before, input[type="radio"]+label[for]::before { content: ""; border: 2px solid var(--color-secondary-20); width: 1.25rem; height: 1.25rem; position: absolute; left: 0; top: 0; } input[type="radio"]+label[for]::before { border-color: var(--color-secondary-20); } input[type="checkbox"]+label[for]::after, input[type="radio"]+label[for]::after { font-family: 'Material Icons'; content: "done"; font-size: 1rem; line-height: 1; position: absolute; text-transform: none; left: 0; width: 1.6rem; text-align: center; top: 0.25rem; display: none; } input[type="checkbox"]+label[for]::before { border-radius: var(--br-main); } input[type="checkbox"]+label[for]:not(:last-child), input[type="radio"]+label[for]:not(:last-child) { margin-bottom: 1rem; } input[type="checkbox"]:checked+label[for]::after, input[type="radio"]:checked+label[for]::after { display: block; } input[type="radio"]+label[for]::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--color-neutral-80); left: 0.5rem; top: 0.5rem; } input[type="radio"]+label[for]::before { border-radius: 50%; } table input[type="checkbox"]+label[for], table input[type="radio"]+label[for] { letter-spacing: 0; padding-left: 2rem; } .mad-toggled-fields.style-2 input[type="checkbox"]+label[for], .mad-toggled-fields.style-2 input[type="radio"]+label[for] { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0; padding-left: 3.5rem; padding-top: 0.5rem; min-height: 2.5rem; } .mad-toggled-fields.style-2 input[type="checkbox"]+label[for]::before, .mad-toggled-fields.style-2 input[type="radio"]+label[for]::before { width: 2.25rem; height: 2.25rem; } .mad-toggled-fields.style-2 input[type="checkbox"]+label[for]::after, .mad-toggled-fields.style-2 input[type="radio"]+label[for]::after { font-size: 1.5rem; width: 2.5rem; top: 0.5rem; } .mad-toggled-fields.size-2 input[type="checkbox"]+label[for] { padding-left: 3.5rem; padding-top: 0.5rem; min-height: 2.5rem; letter-spacing: 0; } .mad-toggled-fields.size-2 input[type="radio"]+label[for]:not(:last-child) { margin-bottom: 0.5rem; } .mad-toggled-fields.size-2 input[type="radio"]+label[for]::before, .mad-toggled-fields.size-2 input[type="checkbox"]+label[for]::before { width: 2.25rem; height: 2.25rem; } .mad-toggled-fields.size-2 input[type="radio"]+label[for]::after { width: 1rem; height: 1rem; left: 0.75rem; top: 0.75rem; } .mad-toggled-fields.size-2 input[type="checkbox"]+label[for]:after { font-size: 2rem; left: 4px; } /* ---------------------------------------- Select ---------------------------------------- */ .mad-custom-select { position: relative; } .mad-custom-select.mad-over { z-index: 3; } .mad-custom-select .mad-selected-option { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; height: 3.5rem; line-height: 3.5rem; position: relative; padding-right: 2.625rem; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-top: 0; padding-bottom: 0; } .mad-custom-select .mad-selected-option::after, .mad-custom-select .mad-selected-option::before { content: "keyboard_arrow_down"; font-family: 'Material Icons'; font-size: 1.5rem; line-height: inherit; position: absolute; color: var(--color-neutral-80); top: 0; right: 1.45rem; max-width: 1rem; -webkit-transition: opacity .5s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity .5s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .5s cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-custom-select .mad-selected-option::before { content: "keyboard_arrow_up"; opacity: 0; visibility: hidden; } .mad-custom-select .mad-options-list { font-size: 0.875rem; line-height: 1.5rem; text-align: initial; letter-spacing: 0.7px; color: var(--color-neutral-80); background-color: var(--color-secondary-5); padding-bottom: 1rem; border: 1px solid var(--color-secondary-20); position: absolute; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; top: 100%; left: 0; width: 100%; margin-top: -2px; opacity: 0; visibility: hidden; -webkit-transition: opacity .5s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity .5s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .5s cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-custom-select .mad-options-list>li { cursor: pointer; padding-top: 1rem; padding-right: 1.5rem; padding-left: 1.5rem; -webkit-transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-custom-select .mad-options-list>li:hover, .mad-custom-select .mad-options-list>li.mad-active { color: var(--color-primary-lighter); } .mad-custom-select.mad-opened .mad-options-list, .mad-custom-select.mad-opened .mad-selected-option::before { opacity: 1; visibility: visible; } .mad-custom-select.mad-opened .mad-selected-option::after { opacity: 0; visibility: hidden; } .mad-csstransforms3d .mad-custom-select .mad-options-list, .mad-csstransforms3d .mad-custom-select .mad-selected-option::after, .mad-csstransforms3d .mad-custom-select .mad-selected-option::before { -webkit-transition-property: -webkit-transform, opacity, visibility; transition-property: transform, opacity, visibility; } /* ---------------------------------------- Counter ---------------------------------------- */ .mad-field-counter { position: relative; padding-right: 3rem; } .mad-field-counter-value { font-family: "Judson", serif; color: #313131; font-size: 3.7rem; line-height: 0.82; position: relative; top: 5px; } .mad-field-counter-control { font-size: 1.25rem; line-height: 1; position: absolute; right: 0; -webkit-transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: color .5s cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-field-counter-control::after { font-family: 'Linearicons'; } .mad-field-counter-control:hover { color: #313131; } .mad-field-counter-control--increase { top: 0; } .mad-field-counter-control--increase::after { content: "\e939"; } .mad-field-counter-control--decrease { bottom: 0; } .mad-field-counter-control--decrease::after { content: "\e93a"; } /* ---------------------------------------- Products ---------------------------------------- */ .mad-products:not(.owl-carousel) { display: flex; flex-wrap: wrap; z-index: 1; position: relative; } .mad-products.mad-product-small { flex-direction: column; } .mad-products:not(.mad-product-small) .mad-product { position: relative; overflow: hidden; transition: all .5s ease; display: flex; flex-direction: column; height: 100%; } .mad-products:not(.mad-product-small) .mad-product-content { padding-top: 2rem; display: flex; flex: 1; flex-direction: column; justify-content: space-between; } .mad-products:not(.mad-product-small) .mad-product:hover { border-color: #26658c; } .mad-products .mad-product-image { position: relative; border-radius: var(--br-main); overflow: hidden; } .mad-products.mad-product-small .mad-product { display: flex; column-gap: 1.5rem; row-gap: 1rem; } .mad-product .mad-title-wrap, .mad-product .mad-cat-holder { display: flex; justify-content: space-between; align-items: center; column-gap: 1rem; row-gap: 1rem; } .mad-product-cat { font-size: 0.875rem; line-height: 1rem; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; color: var(--color-primary); } .mad-product-cat:hover { color: var(--color-primary-lighter); } .mad-product-description .mad-cat-holder:not(:last-child) { margin-bottom: 1rem; } .mad-products.mad-product-small .mad-product:not(:last-child), .mad-product-description:not(:last-child) { margin-bottom: 2rem; } .mad-title-wrap .mad-product-title:not(:last-child) { margin-bottom: 0; } h5.mad-product-title { font-size: 1.5rem; line-height: 2rem; } .mad-products.mad-product-small .mad-product-title { font-size: 1.25rem; line-height: 1.5rem; } .mad-products.mad-product-small .mad-product-title:not(:last-child) { margin-bottom: 1rem; } .mad-products .mad-product-title a { border-bottom: 1px solid transparent; } .mad-products .mad-product-title a:hover { border-bottom-color: inherit; } table .mad-price { font-size: 1rem; line-height: 1.5rem; color: var(--color-secondary); } .mad-products.mad-product-small .mad-price { font-size: 0.875rem; line-height: 1rem; color: var(--color-secondary); } .mad-products.mad-product-small .mad-price:not(:last-child) { margin-bottom: 1rem; } .mad-products:not(.mad-product-small) .mad-price, .mad-product-single .mad-price { font-size: 1rem; line-height: 1.5rem; color: var(--color-secondary); } .mad-products:not(.mad-product-small) .mad-price span, .mad-product-single .mad-price span { color: var(--color-neutral-60); text-decoration: line-through; } .mad-product .mad-product-image { position: relative; background: var(--color-neutral-0); } .mad-product .mad-product-image img { width: 100%; } .mad-product .mad-product-image .mad-label, .image-preview .mad-label { position: absolute; top: 1rem; left: 1rem; line-height: 2rem; padding: 0 0.5rem; text-transform: uppercase; font-size: 0.875rem; font-weight: bold; border-radius: var(--br-main); color: var(--color-secondary); letter-spacing: 1px; background: var(--color-primary-50); } .mad-product .mad-product-image .mad-label.new { background: var(--color-secondary-20); } .mad-product:not(.mad-product-single) .btn { width: 100%; } .mad-price-holder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; row-gap: 1rem; } .shop-cart-form table tr th:first-child { width: 37%; } .shop-cart-form .mad-product { align-items: flex-start; display: flex; align-items: center; column-gap: 1.5rem; row-gap: 1.5rem; } .shop-cart-form .mad-product .mad-close-item { font-size: 1.5rem; } .shop-cart-form .mad-product .mad-close-item:hover { color: var(--color-primary-darker); } .shop-cart-form tr td { vertical-align: middle; } .mad-shop-footer { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 1rem; justify-content: space-between; } .mad-shop-footer form input { min-width: 24.5rem } .mad-order .mad-product-title { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0; } .mad-order.mad-table-wrap table:not(.mad-table--vertical) tr th:last-child { width: 33%; } .mad-order.mad-table-wrap table:not(:last-child) { margin-bottom: 0; } .mad-order table tr td.payment-option { padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: 0.8125rem; line-height: 1rem; } .payment-option input[type="radio"]+label[for] { font-family: 'Judson', sans-serif; font-size: 1.125rem; padding-left: 3.5rem; padding-top: 0.25rem; } .payment-option input[type="checkbox"]+label[for] { padding-left: 3.5rem; padding-top: 0.25rem; } .payment-option input[type="radio"]+label[for]:not(:last-child) { margin-bottom: 0.5rem; } .payment-option input[type="radio"]+label[for]::before, .payment-option input[type="checkbox"]+label[for]::before { width: 2.25rem; height: 2.25rem; } .payment-option input[type="radio"]+label[for]::after { width: 1rem; height: 1rem; left: 0.75rem; top: 0.75rem; } .payment-option input[type="checkbox"]+label[for]:after { font-size: 2rem; left: 4px; } .payment-option li:last-child { padding-top: 15px; } .payment-desc { font-size: 0.875rem; line-height: 1rem; padding-left: 3.5rem; } .input-wrapper.with-link { display: flex; justify-content: space-between; align-items: center; } .payment-option .input-wrapper.with-link input[type="radio"]+label[for] { padding-top: 0.5rem; } .payment-option .input-wrapper.with-link input[type="radio"]+label[for] span { display: inline-block; line-height: 1rem; padding-left: 0.25rem; } .payment-option .input-wrapper:not(:last-child) { margin-bottom: 0; } .payment-option .input-wrapper.with-link .mad-link { font-size: 0.875rem; line-height: 1.25rem; } .payment-option input[type="checkbox"]+label[for] { padding-top: 0; padding-bottom: 0; } .hidden-section .row:not(.col-no-space) { margin-bottom: -1rem; } .hidden-section .row:not(.col-no-space)>[class*="col"] { padding-bottom: 1rem; } .hidden-section:not(:last-child) { margin-bottom: 0.5rem; } .hidden-section .account-action { display: block; padding: 1rem 2rem; background: var(--color-primary); border-radius: var(--br-main); font-family: 'Judson', sans-serif; font-size: 1.5rem; line-height: 2rem; color: var(--color-neutral-0); } .hidden-section .account-action:hover { background: var(--color-primary-lighter); } .hidden-section .account-action.toggled { background: var(--color-primary-darker); } .hidden-section .content { padding: 2rem; } .mad-table-wrap.shop-acc table tr td:last-child a { font-weight: bold; } .mad-table-wrap.shop-acc table tr td a { font-weight: bold; letter-spacing: 1px; } /* Product Single */ .mad-product.mad-product-single:not(:last-child) { margin-bottom: 4rem; } .mad-product.mad-product-single { display: flex; column-gap: 2rem; row-gap: 2rem; } .mad-product.mad-product-single .mad-label { z-index: 8; } .mad-product.mad-product-single .mad-col { width: 42%; } .mad-product.mad-product-single .mad-col:first-child { width: 58%; } #main .mad-product.mad-product-single .mad-col { width: 45%; } #main .mad-product.mad-product-single .mad-col:first-child { width: 55%; } .image-preview { position: relative; } .image-preview img { border-radius: var(--br-main); } .mad-zoom-img { position: absolute; right: 2rem; bottom: 2rem; z-index: 9; } .mad-product-single .mad-price { font-size: 1.875rem; line-height: 2.5rem; } .mad-product-single .mad-product-title:not(:last-child), .mad-product-single .mad-price:not(:last-child) { margin-bottom: 1.5rem; } .image-preview-container.type-2 { position: relative; overflow: hidden; min-height: 51.5rem; } .image-preview-container.type-2 .image-preview { margin-left: 12.875rem; border-radius: var(--br-main) !important; overflow: hidden; } .image-preview-container.type-2 .mad-thumb-holer { position: absolute; transform: rotate(90deg); top: 314px; left: -313px; z-index: 8; width: 100%; max-width: 51.166rem; } .owl-carousel.mad-product-thumbs .mad-grid-item>a { display: block; } .zoomContainer, .owl-carousel.mad-product-thumbs .mad-grid-item>a img, .image-preview-container.type-2 .mad-thumb-holer, .owl-carousel.mad-product-thumbs { border-radius: var(--br-main) !important; overflow: hidden; } .zoomContainer { display: none !important; } .image-preview-container.type-2 .mad-thumb-holer .mad-grid-item img { transform: rotate(-90deg); } .image-preview-container:not(.type-2) .mad-thumb-holer { margin-top: 1rem; } .mad-product-thumbs.owl-carousel .owl-nav button { top: calc(50% - 1rem); } .mad-product-thumbs.owl-carousel .owl-nav button .svg { width: 1.125rem; height: 2rem; } /* ----------------- Quantity ----------------- */ .quantity { width: 100%; position: relative; } .quantity input[type="text"] { font-size: 3rem; line-height: 3.5rem; padding-bottom: 0; color: var(--color-neutral-0); border-color: var(--color-neutral-0); } .quantity button { position: absolute; top: 0.25rem; right: 0; max-width: 1rem; color: var(--color-neutral-80); } .quantity button.qty-minus { top: auto; bottom: 0.25rem; } .quantity button i { font-size: 1.25rem; color: var(--color-neutral-0); } .quantity.size-2 input[type="text"] { font-size: 1rem; line-height: 2rem; height: 2rem; } .quantity.size-2 button.qty-plus { margin-top: -1.5rem; } .quantity.type-2 { max-width: 11rem; } .quantity.type-2 input[type="text"] { border: 1px solid var(--color-secondary-20); line-height: 3.5rem; height: 3.5rem; padding: 0; color: var(--color-neutral-80); font-size: 1rem; text-align: center; } .quantity.type-2 button i { color: var(--color-neutral-80); } .quantity.type-2 button { top: 50%; transform: translateY(-50%); } .quantity.type-2 .qty-plus { right: 1rem; } .quantity.type-2 .qty-minus { left: 1rem; } /* Sorting */ .product-sort-section { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: 2rem; justify-content: space-between; color: var(--color-neutral-80); font-size: 1rem; line-height: 1.5rem; } .product-sort-section:not(:last-child) { margin-bottom: 2rem; } #main .product-sort-section .mad-col { width: calc(33.3333% - 1.5rem); } .product-sort-section .mad-col { width: calc(25% - 1.5rem); } /* Shopping Cart */ .mad-dropdown-cart>.mad-dropdown-title i { position: relative; } .mad-dropdown-cart>.mad-dropdown-title i>span { font-family: 'Nanum Gothic', sans-serif; position: absolute; width: 1rem; height: 1rem; background: var(--color-primary); color: var(--color-neutral-0); border-radius: 50%; text-align: center; line-height: 1rem; font-size: 10px; font-weight: 500; bottom: -4px; right: -6px; } .mad-dropdown-cart .shopping-cart { left: auto; right: 4rem; margin: 0; transform: none !important; } .mad-dropdown-cart:hover .shopping-cart { padding: 2rem; max-width: 24.5rem; opacity: 1; visibility: visible; } .mad-dropdown-cart .shopping-cart:after { content: ''; height: 4rem; position: absolute; bottom: 100%; left: 0; width: 100%; } .mad-dropdown-cart .btn { width: 100%; line-height: 2rem; font-size: 0.75rem; padding-top: 0; padding-bottom: 0; } .mad-dropdown-cart .btn-set { flex-wrap: nowrap; margin: -8px -4px 0; } .mad-dropdown-cart .btn-set>* { margin: 8px 4px 0; } .mad-dropdown-cart .subtotal { letter-spacing: 0; padding: 1.5rem 0; margin-top: 1.5rem; border-top: 1px solid var(--color-neutral-15); line-height: 1.5rem; } .mad-dropdown-cart .subtotal span:first-child { display: inline-block; font-family: 'Judson', sans-serif; font-size: 1.25rem; font-weight: bold; color: var(--color-neutral); margin-right: 1rem; } .mad-dropdown-cart .subtotal span:last-child { font-weight: bold; font-size: 1.125rem; color: var(--color-secondary); } .shopping-cart .mad-product { position: relative; padding-right: 2rem; } .shopping-cart .mad-close-item { position: absolute; right: -6px; top: 50%; margin: 0; margin-top: -0.625rem; font-size: 1.25rem; color: var(--color-neutral); width: auto !important; display: block; } .shopping-cart .mad-close-item:hover { color: var(--color-primary-lighter); } /* ---------------------------------------- Label ---------------------------------------- */ label { margin-bottom: 0.5rem; display: block; } label[for] { cursor: pointer; } /* ---------------------------------------- Textarea ---------------------------------------- */ textarea { height: auto; resize: none; padding-top: 1rem; padding-bottom: 1rem; display: block; } /* ---------------------------------------- Form groups ---------------------------------------- */ .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 2rem; column-gap: 2rem; } [class*="form-col"] { width: 100%; } .form-col-1 { width: 8.33333%; } /* ---------------------------------------- Single Field Form ---------------------------------------- */ form.one-line { position: relative; display: flex; flex-wrap: nowrap; } form.one-line.mad-newsletter-form input, form.one-line input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .mad-newsletter-form.one-line { display: flex; } .mad-newsletter-form.one-line .mad-col:first-child { width: 100%; max-width: 26.5rem; } .mad-newsletter-form:not(.one-line) { display: block; } .mad-newsletter-form.one-line .btn, form.one-line .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .mad-newsletter-form:not(.one-line) .btn { margin-top: 1.5rem; } form.size-2 input { height: 4.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } form.size-2 .btn.wide { padding-left: 5.75rem; padding-right: 5.75rem; } .mad-search-form .btn i { font-size: 1.5rem; line-height: 1; } /* ---------------------------------------- Colorizer ---------------------------------------- */ [class*="mad-colorizer--scheme-"] { position: relative; } .container .mad-section[class*="mad-colorizer--scheme-"]:not([class*="mad-section--stretched"]):not(.mad-section--no-adaptive) { padding-left: 1rem; padding-right: 1rem; } .mad-colorizer-bg-color, .mad-colorizer-bg-image { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; } .mad-colorizer-bg-image { background-repeat: no-repeat; background-size: cover; background-position: center; } .mad-colorizer--parallax .mad-colorizer-bg-image { background-size: auto; background-attachment: fixed; } .mad-touchevents .mad-colorizer--parallax .mad-colorizer-bg-image { background-size: cover !important; background-position: center !important; background-attachment: scroll !important; } [class*="with-overlay"] { z-index: 1; position: relative; } [class*="with-overlay"]:not(.mad-section):after, .mad-section[class*="with-overlay"]>[class*="mad-colorizer-"]:after { content: ''; background: var(--color-neutral); position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.5; z-index: -1; } .mad-section.with-overlay-1>[class*="mad-colorizer-"]:after { opacity: 0.2; } .mad-section.with-overlay-2>[class*="mad-colorizer-"]:after { opacity: 0.3; } .mad-bg-section { min-height: 400px; padding-bottom: 40% !important; } .mad-colorizer--scheme-color-2>.mad-colorizer-bg-color { background: var(--color-primary-10); } .mad-colorizer--scheme-color-3>.mad-colorizer-bg-color { background: var(--color-secondary); } .mad-colorizer--scheme-color-4>.mad-colorizer-bg-color { background: var(--color-primary-5); } .mad-colorizer--scheme-color-5>.mad-colorizer-bg-color { background: var(--color-primary); } .mad-colorizer--scheme-color-6>.mad-colorizer-bg-color { background: var(--color-secondary-80); } .mad-colorizer--scheme-color-7>.mad-colorizer-bg-color { background: var(--color-neutral-5); } .mad-colorizer--scheme-color-8>.mad-colorizer-bg-color { background: var(--color-primary-darker); } .mad-colorizer--scheme-light .mad-cta-title, .mad-colorizer--scheme-light .mad-title, .mad-colorizer--scheme-light .mad-section-title, .mad-colorizer--scheme-light .mad-page-title, .mad-colorizer--scheme-color-3 .mad-page-title { color: #fff; } .mad-colorizer--scheme-light .mad-pre-title { color: var(--color-secondary-10); } .mad-colorizer--scheme-color-3 { color: var(--color-secondary-10); } .mad-colorizer--scheme-color-3 .mad-text-link:after { background-color: var(--color-secondary-80); } .mad-colorizer--scheme-color-3 .mad-pre-title { color: var(--color-secondary-40); } .mad-colorizer--scheme-color-3 .mad-pre-title:before { background-color: var(--color-secondary-40); } .mad-colorizer--scheme-color-5 { color: var(--color-secondary-10); } [class*="with-texture"] .mad-colorizer-bg-color:after, [class*="with-texture"] .mad-colorizer-bg-color:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } [class*="with-texture"] .mad-colorizer-bg-color:after { background: url(../images/texture.svg) no-repeat; } .with-texture1 .mad-colorizer-bg-color:after { background: url(../images/texture1.svg) no-repeat; background-position: top right; } .with-texture2 .mad-colorizer-bg-color:after { background: url(../images/texture2.svg) no-repeat; background-position: top right; } .with-texture3 .mad-colorizer-bg-color:after { background: url(../images/texture3.svg) no-repeat; background-position: top right; } .with-texture4 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back1.svg) no-repeat; background-position: bottom left; width: 50%; } .with-texture4 .mad-colorizer-bg-color:before { background: url(../images/testimonials_back1.svg) no-repeat; background-position: top right; width: 50%; left: auto; right: 0; background-size: cover; } .with-texture5 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back2.svg) no-repeat; background-position: bottom left; width: 50%; } .with-texture5 .mad-colorizer-bg-color:before { background: url(../images/testimonials_back2.svg) no-repeat; background-position: bottom right; width: 50%; left: auto; right: 0; background-size: cover; } .with-texture6 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back3.svg) no-repeat; background-position: bottom left; width: 50%; } .with-texture6 .mad-colorizer-bg-color:before { background: url(../images/testimonials_back3.svg) no-repeat; background-position: top right; width: 50%; left: auto; right: 0; background-size: cover; } .with-texture7 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back4.svg) no-repeat; background-position: bottom left; background-size: cover; width: 50%; } .with-texture7 .mad-colorizer-bg-color:before { background: url(../images/testimonials_back4.svg) no-repeat; background-position: top right; width: 50%; left: auto; right: 0; background-size: cover; } .with-texture8 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back5.svg) no-repeat; background-position: bottom left; width: 50%; } .with-texture8 .mad-colorizer-bg-color:before { background: url(../images/testimonials_back5.svg) no-repeat; background-position: top right; width: 50%; left: auto; right: 0; background-size: cover; } .with-texture9 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back6.svg) no-repeat; background-position: top left; width: 50%; } .with-texture9 .mad-colorizer-bg-color:before { background: url(../images/testimonials_back6.svg) no-repeat; background-position: top right; width: 50%; left: auto; right: 0; background-size: cover; } .with-texture10 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back7.svg) no-repeat; background-position: top right; } .with-texture11 .mad-colorizer-bg-color:after { background: url(../images/mad_texture_full.svg) no-repeat; background-position: top left; } .with-texture12 .mad-colorizer-bg-color:after { background: url(../images/texture4.svg) no-repeat; background-position: bottom left; } .with-texture13 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back9.svg) no-repeat; background-position: bottom left; } .with-texture14 .mad-colorizer-bg-color:after { background: url(../images/texture6.svg) no-repeat; background-position: bottom left; } .with-texture14 .mad-colorizer-bg-color:before { background: url(../images/texture5.svg) no-repeat; background-position: top 5.75rem right; } .with-texture15 .mad-colorizer-bg-color:after { background: url(../images/testimonials_back10.svg) no-repeat; background-position: bottom left; } .with-texture16 .mad-colorizer-bg-color:after { background: url(../images/texture8.svg) no-repeat; background-position: top left; } .with-texture17 .mad-colorizer-bg-color:after { background: url(../images/texture9.svg) no-repeat; background-position: top right; } .with-texture18 .mad-colorizer-bg-color:after { background: url(../images/texture12.svg) no-repeat; background-position: top right; } .with-texture19 .mad-colorizer-bg-color:after { background: url(../images/texture14.svg) no-repeat; background-position: top right; } .with-texture20 .mad-colorizer-bg-color:after { background: url(../images/texture16.svg) no-repeat; background-position: bottom -22.5rem right; } .mad-texture-holder { position: relative; } [class*="mad-img-texture"] { position: absolute; right: -6rem; bottom: -25rem; height: 43.75rem; width: 60rem; background: url(../images/testimonials_back8.svg) no-repeat right top; } .mad-img-texture2 { background: url(../images/center_texture.svg) no-repeat right top; bottom: -21rem; } .mad-img-texture3 { background: url(../images/center_texture2.svg) no-repeat right top; bottom: -12rem; z-index: -2; } .mad-img-texture4 { background: url(../images/center_texture4.svg) no-repeat right top; right: -9.5rem; width: 33rem; z-index: 10; } .mad-img-texture5 { background: url(../images/center_texture3.svg) no-repeat; left: -12rem; right: auto; width: 22rem; } .mad-img-texture6 { left: -6rem; right: auto; width: 40rem; bottom: -34rem; background: url(../images/texture7.svg) no-repeat; background-position: top left; } .mad-img-texture7 { left: -6rem; right: auto; width: 640px; height: 87.8125rem; bottom: auto; top: 50%; margin-top: -45%; background: url(../images/center_texture5.svg) no-repeat; background-position: top left; } .mad-img-texture8 { left: 0; right: 0; width: 110%; height: 100%; bottom: auto; top: 20rem; background: url(../images/texture10.svg) no-repeat; background-position: top left; } .mad-img-texture9 { right: -6rem; width: 40rem; height: 87.8125rem; bottom: auto; top: 50%; margin-top: -48%; background: url(../images/center_texture6.svg) no-repeat; background-position: top right; } .mad-img-texture10 { left: -6rem; right: auto; bottom: -14rem; background: url(../images/texture11.svg) no-repeat; background-position: bottom left; z-index: -1; } .mad-img-texture11 { left: -6rem; right: auto; top: -13rem; bottom: auto; background: url(../images/texture13.svg) no-repeat; background-position: top left; z-index: 1; } .mad-img-texture12 { left: -4rem; right: auto; top: 0; height: 71rem; bottom: auto; background: url(../images/texture15.svg) no-repeat; background-position: top left; z-index: 1; } .mad-img-texture13 { left: -4rem; right: auto; bottom: -18rem; width: 60.125rem; height: 48.4375rem; background: url(../images/center_texture7.svg) no-repeat; background-position: top left; } .mad-img-texture14 { background: url(../images/texture5.svg) no-repeat right top; right: -2rem; top: 5.75rem; z-index: -1; } .mad-img-texture15 { background: url(../images/texture6.svg) no-repeat left bottom; left: -2rem; bottom: -2rem; z-index: -1; } .mad-img-texture16 { background: url(../images/texture4.svg) no-repeat left bottom; left: -2rem; bottom: -2rem; z-index: -1; } .mad-img-texture17 { background: url(../images/texture12.svg) no-repeat right top; right: -2rem; top: -2rem; z-index: -1; } .mad-img-texture18 { background: url(../images/testimonials_back9.svg) no-repeat left bottom; left: -2rem; bottom: -2rem; height: 100%; z-index: -1; } .mad-img-texture19 { background: url(../images/texture17.svg) no-repeat right top; right: -12rem; top: 2rem; z-index: -1; } /* Video wrapper */ .video_wrapper { width: 100%; margin: 0 auto; position: relative; border-radius: var(--br-main); overflow: hidden; } .video_wrapper>iframe { z-index: 2; } .video_wrapper_full { padding-top: 36rem; } .videoIframe { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: transparent; } .videoPoster { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(../images/1304x904_img5.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; border: none; text-indent: -999em; opacity: 1; z-index: 3; overflow: hidden; -webkit-transition: opacity 800ms, height 0s; -moz-transition: opacity 800ms, height 0s; transition: opacity 800ms, height 0s; -webkit-transition-delay: 0s, 0s; -moz-transition-delay: 0s, 0s; transition-delay: 0s, 0s; } .video_wrapper_full.image-1 { padding-top: 56.5rem; } .video_wrapper_full.image-2 { padding-top: 32rem; } .video_wrapper_full.image-3 { padding-top: 26.5rem; } .video_wrapper_full.image-2 .videoPoster { background-image: url(../images/652x512_img5.jpg); } .video_wrapper_full.image-3 .videoPoster { background-image: url(../images/544x425_img5.jpg); } #main .video_wrapper_full.image-1.videoWrapperActive { padding-top: 45.5rem; } .video_wrapper_full.image-1.videoWrapperActive { padding-top: 51.5rem; } #main .video_wrapper_full.image-2.videoWrapperActive { padding-top: 22rem; } .video_wrapper_full.image-2.videoWrapperActive { padding-top: 18rem; } .video_wrapper_full.image-3.videoWrapperActive { padding-top: 19.5rem; } .videoPoster:hover { cursor: pointer; } .videoPoster:before { content: ''; position: absolute; top: 50%; left: 50%; width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; background: url(../images/play-btn.svg) no-repeat; } .videoPoster.no-btn { cursor: auto; } .videoPoster.no-btn:before { display: none; } .videoWrapperActive .videoPoster { opacity: 0; height: 0; -webkit-transition-delay: 0s, 800ms; -moz-transition-delay: 0s, 800ms; transition-delay: 0s, 800ms; } /* ---------------------------------------- Gallery ---------------------------------------- */ .mad-grid--isotope:not(:last-child) { margin-bottom: 2rem; } .mad-gallery:not(.mad-grid--isotope) { display: flex; flex-wrap: wrap; } .mad-gallery:not(.mad-grid--isotope) .mad-gallery-item { display: block; position: relative; overflow: hidden; transition: all .5s ease; } .mad-grid-item.col-x2 { width: 66.6666%; } .mad-grid--isotope.item-col-4 .mad-grid-item.col-x2 { width: 50%; } .mad-grid--isotope.item-col-2 .mad-grid-item.col-x2 { width: 100%; } .mad-gallery .mad-gallery-item a { display: block; overflow: hidden; position: relative; cursor: url(../images/crosshair.svg), crosshair; border-radius: var(--br-main); z-index: 1; } .mad-gallery-item { border-radius: var(--br-main); } .mad-gallery .mad-gallery-item a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-neutral); opacity: 0; visibility: hidden; transition: all .5s ease; } .mad-gallery .mad-gallery-item a:hover:after { opacity: 0.6; visibility: visible; } .mad-grid-sizer { padding: 0 !important; } .mad-portfolio.mad-grid--isotope:not(.type-2) .mad-gallery-item .mad-gallery-desc .mad-gallery-name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mad-grid--isotope:not(:last-child) { margin-bottom: 2rem; } .mad-portfolio:not(.mad-grid--isotope) { display: flex; flex-wrap: wrap; } .mad-grid--isotope.mad-portfolio:not(:last-child) { margin-bottom: 2rem; } .mad-portfolio:not(.type-2) .mad-gallery-item { position: relative; padding-left: 2rem; } .mad-portfolio:not(.type-2) .mad-gallery-item::after { content: ''; position: absolute; top: 2rem; left: 0; right: 2rem; bottom: 0; border-radius: var(--br-main); background: var(--color-primary-5); z-index: -1; } .mad-portfolio .mad-gallery-item .mad-gallery-desc { padding: 2rem 0; padding-right: 4rem; } .mad-gallery-cat { font-size: 14px; line-height: 1rem; font-weight: bold; color: var(--color-primary); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 0.5rem; display: block; } .mad-gallery-cat:hover { color: var(--color-primary-lighter); } .mad-gallery-name a { border-bottom: 1px solid transparent; } .mad-gallery-name a:hover { border-color: inherit; } .mad-gallery-media { display: block; border-radius: var(--br-main); overflow: hidden; } .mad-portfolio.type-2 .mad-gallery-item { position: relative; } .mad-portfolio.type-2 .mad-gallery-item .mad-gallery-desc { position: absolute; top: 50%; left: 0; right: 0; padding-left: 1rem; padding-right: 1rem; text-align: center; color: var(--color-neutral-0); background: none; transition: all .7s ease; opacity: 0; visibility: hidden; transform: translateY(50%); } .mad-portfolio.type-2 .mad-gallery-item:hover .mad-gallery-desc { transform: translateY(-50%); opacity: 1; visibility: visible; } .mad-portfolio.type-2 .mad-gallery-item .mad-gallery-media { display: block; position: relative; } .mad-portfolio.type-2 .mad-gallery-item .mad-gallery-media:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-neutral); opacity: 0; visibility: hidden; transition: all .5s ease; } .mad-portfolio.type-2 .mad-gallery-item:hover .mad-gallery-media:after { opacity: 0.6; visibility: visible; } .mad-portfolio.type-2 .mad-gallery-item .mad-gallery-desc .mad-gallery-name { color: var(--color-neutral-0); } .mad-filter { position: relative; z-index: 2; display: flex; column-gap: 0.5rem; margin-bottom: 2rem; } .mad-filter>li>a { display: block; font-family: 'Judson', sans-serif; font-size: 1.5rem; line-height: 2rem; color: var(--color-neutral-0); background: var(--color-primary); letter-spacing: -0.3px; border-radius: var(--br-main); padding: 1rem 2rem; } .mad-filter>li>a:hover { background: var(--color-primary-lighter); } .mad-filter>li>a.mad-active { background: var(--color-primary-darker); } .mad-gallery:not([class*="item-col-"]).col-size-3 .mad-gallery-item { width: 33.3333%; } .mad-gallery-item img { width: 100%; } .mad-grid-item.col-x2 { width: 66.6666%; } /* ---------------------------------------- Countdown ---------------------------------------- */ .mad-countdown .countdown-row { display: flex; flex-wrap: wrap; margin: -3rem -1rem 0; } .mad-countdown .countdown-section { width: 25%; padding: 3rem 1rem 0; } .mad-countdown .countdown-amount { display: block; font-family: 'Judson', sans-serif; font-size: 4rem; line-height: 3.5rem; margin-bottom: 0.5rem; color: var(--color-neutral); } .mad-countdown .countdown-period { display: block; font-size: 1rem; line-height: 1.5rem; color: var(--color-neutral-80); } .mad-countdown.style-2 .countdown-amount { color: var(--color-neutral-0); } .mad-countdown.style-2 .countdown-period { color: var(--color-primary-10); } /* ---------------------------------------- Dropdown ---------------------------------------- */ .mad-dropdown { position: relative; z-index: 1; } .mad-dropdown-title { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } .mad-dropdown-element { font-size: 0.875rem; line-height: 2rem; text-align: initial; margin-top: 2rem; padding-top: 0; padding-bottom: 1rem; letter-spacing: 0.8px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background-color: var(--color-neutral-5); color: var(--color-neutral); opacity: 0; visibility: hidden; position: absolute; padding: 1.5rem 2rem; top: 100%; left: 0; margin-left: -2rem; -webkit-transition: opacity .5s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity .5s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .5s cubic-bezier(0.165, 0.84, 0.44, 1); } .mad-dropdown-element>li>a { color: var(--color-neutral); } .mad-dropdown-element>li>a:hover { text-decoration: underline; } .mad-dropdown-element--icons>li { position: relative; padding-left: 3.1rem; } .mad-dropdown-element--x-right { left: auto; right: 0; } .mad-dropdown-element--y-top { bottom: 100%; top: auto; } .mad-dropdown--opened { z-index: 6; } .mad-dropdown--opened .mad-dropdown-element { opacity: 1; visibility: visible; } .mad-dropdown--title-icon .mad-dropdown-title { position: relative; padding-right: 0.875rem; } .mad-csstransforms3d .mad-dropdown-element { -webkit-transition-property: -webkit-transform, opacity, visibility; transition-property: transform, opacity, visibility; -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } .mad-csstransforms3d .mad-dropdown--title-icon .mad-dropdown-icon--state-opened, .mad-csstransforms3d .mad-dropdown--title-icon .mad-dropdown-icon--state-default { -webkit-transition-property: -webkit-transform, opacity, visibility; transition-property: transform, opacity, visibility; } .mad-csstransforms3d .mad-dropdown--title-icon .mad-dropdown-icon--state-opened, .mad-csstransforms3d .mad-dropdown--title-icon.mad-dropdown--opened .mad-dropdown-icon--state-default { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } .mad-csstransforms3d .mad-dropdown--opened .mad-dropdown-element, .mad-csstransforms3d .mad-dropdown--title-icon.mad-dropdown--opened .mad-dropdown-icon--state-opened { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mad-dropdown.mad-lang>a { font-weight: bold; font-size: 0.875rem; line-height: 1rem; } .mad-dropdown.mad-lang>a:after { content: "keyboard_arrow_down"; font-family: 'Material Icons'; font-size: 1.125rem; margin-left: 0.5rem; max-width: 0.875rem; line-height: 1rem; vertical-align: middle; } /* ---------------------------------------- Twitter Feed ---------------------------------------- */ .mad-twitter-feed:not(:last-child) { margin-bottom: 1rem; } .mad-twitter-feed>li:not(:last-child) { margin-bottom: 1rem; } .mad-twitter-feed>li { padding-left: 2rem; } .mad-twitter-feed>li { position: relative; font-size: 1rem; line-height: 1.5rem; } .mad-twitter-feed>li::before { content: "\f099"; font-family: Font Awesome\ 5 Brands; font-size: 1rem; line-height: 1.5rem; position: absolute; left: 0; top: 0; color: var(--color-primary); } .mad-twitter-feed>li a { color: var(--color-primary); } .mad-twitter-feed>li a:hover { text-decoration: underline; } /* ---------------------------------------- 4. Pages ---------------------------------------- */ .mad-hands { display: flex; justify-content: space-between; margin-bottom: -14.6875rem; } .with-half-bg { position: relative; } .with-half-bg .mad-grid--isotope { z-index: 1; } .with-half-bg:before, .with-half-bg.type-2:after { content: ''; position: absolute; top: 0; height: 50%; left: -2000px; right: -2000px; z-index: -1; background-color: var(--color-neutral-0); } .with-half-bg.type-2:before, .with-half-bg.type-2:after { background-color: var(--color-primary-10); height: 25%; } .with-half-bg.type-2:after { top: auto; bottom: 0; } .mad-service-section { position: relative; z-index: 2; } .mad-services li:not(:last-child) { margin-bottom: 2rem; } .mad-services li .mad-service-header { display: flex; justify-content: space-between; align-items: center; font-size: 1.125rem; line-height: 2rem; row-gap: 1rem; column-gap: 1rem; font-weight: bold; } .mad-services li .mad-service-header:not(:last-child) { margin-bottom: .5rem; } /* Sidebar element */ .mad-sidebar-element { position: fixed; right: 0; top: 0; bottom: 0; width: 34.5rem; transform: translateX(100%); background: url(../images/sidebar_bg.svg) no-repeat top right var(--color-primary-5); transition: all .6s cubic-bezier(.77, 0, .175, 1); cursor: url(../legasy_icons_svg/close.svg) 15 15, move; padding: 5.5rem 4rem; z-index: 99; overflow: auto; } .mad-sidebar-inner { cursor: auto; text-align: center; } .mad-sidebar-element.mad-opened { transform: translateX(0); } .mad-sidebar-inner .mad-sidebar-section:not(:last-child) { margin-bottom: 4rem; } .mad-sidebar-inner h5.mad-icon-box-title { font-size: 1.5rem; line-height: 2rem; } .mad-icon-boxes.small-size .mad-icon-box { font-size: 1.125rem; line-height: 2rem; } /* Video Section */ .mad-video-wrapper { --color: var(--color-neutral-0); --color-invert: var(--color-neutral-0); --clip-path: circle(15px at left); --clip-path-hover: circle(70px at left); --clip-path-clicked: circle(100vw at left); --duration: 0.4s; --timing-function: ease; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 66.5rem; padding-top: 14.5rem; background: url(../images/1920x1064_bg1.jpg) no-repeat; overflow: hidden; } .mad-video-wrapper .video { height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-left: 1rem; clip-path: var(--clip-path); transition: clip-path var(--duration) var(--timing-function); } .mad-video-wrapper .video video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); } .mad-video-wrapper .text { position: relative; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; opacity: var(--opacity, 1); transition: opacity 0.3s var(--timing-function) 0.2s; } .mad-video-wrapper .text::before, .mad-video-wrapper .text::after { content: ""; position: absolute; bottom: 0; left: -1px; right: 25px; height: 0; } .mad-video-wrapper .text::before { box-shadow: 26px 0 0 1px var(--color); right: var(--r, 100%); opacity: var(--opacity, 0); transition: right 0.5s ease-in, opacity 0.1s linear; } .mad-video-wrapper .text::after { box-shadow: 26px 0 0 1px var(--color-invert); clip-path: var(--clip-path); transition: clip-path var(--duration) var(--timing-function); } .mad-video-wrapper .text>span::before, .mad-video-wrapper .text>span::after { content: attr(data-text); padding-left: 26px; } .mad-video-wrapper .text>span::before { color: var(--color-neutral-0); } .mad-video-wrapper .text>span::after { color: var(--color-invert); clip-path: var(--clip-path); transition: clip-path var(--duration) var(--timing-function); position: absolute; left: 0; } .mad-video-wrapper input { width: 220px; height: 40px; margin: auto; position: absolute; left: 0; right: 0; border-radius: 40px; outline: none; z-index: 2; appearance: none; cursor: pointer; display: block !important; } .mad-video-wrapper input:focus { outline: 0; } .mad-video-wrapper input:hover~.video { clip-path: var(--clip-path-hover); } .mad-video-wrapper input:hover~.text::before { --r: 25px; --opacity: 1; } .mad-video-wrapper input:hover~.text::after { clip-path: var(--clip-path-hover); } .mad-video-wrapper input:hover~.text>span::after { clip-path: var(--clip-path-hover); } .mad-video-wrapper input:checked { width: 100%; height: 100%; border-radius: 0; } .mad-video-wrapper input:checked~.video { clip-path: var(--clip-path-clicked); } .mad-video-wrapper input:checked~.text { --opacity: 0; transition: opacity 0.3s var(--timing-function); } .mad-video-wrapper input:checked~.text::after { clip-path: var(--clip-path-clicked); } .mad-video-wrapper input:checked~.text>span::after { clip-path: var(--clip-path-clicked); } .mad-video-content { text-align: center; position: absolute; top: 48%; left: 50%; width: 100%; transform: translate(-50%, -50%); } .mad-video-content .mad-title { color: var(--color-neutral-0); } .mad-video-content .mad-pre-title { color: var(--color-neutral-10); } .mad-video-wrapper .mad-video-holder { position: absolute; bottom: 3rem; left: 0; right: 0; z-index: 0; } /* Storyline */ .mad-storyline { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; } .mad-storyline:after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--color-neutral-0); } .mad-storyline>.mad-col { position: relative; width: 100%; } .mad-storyline>.mad-col:not(:last-child) { margin-bottom: 20rem; } .mad-storyline .mad-story-item { position: relative; } .mad-story-item .mad-story-inner { position: relative; max-width: 36rem; padding-bottom: 4rem; } .mad-story-inner figure img { border-radius: var(--br-main); } .mad-storyline .mad-story-item:after { content: ''; position: absolute; top: 20.5rem; left: calc(50% - 7px); width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-secondary); border: 2px solid var(--color-neutral-0); z-index: 1; } .mad-storyline .mad-story-item.right-col { position: absolute; width: 100%; left: 0; top: 29.375rem; display: flex; justify-content: flex-end; } .mad-storyline .mad-story-item.right-col:after { left: auto; right: calc(50% - 0.5625rem); } .mad-storyline .mad-story-item .mad-story-content { position: absolute; right: 0; bottom: 0; color: var(--color-neutral-80); width: calc(100% - 2rem); background: var(--color-neutral-0); padding: 2rem 2rem 2.5rem; border-radius: var(--br-main); border-top-right-radius: 0; z-index: 1; } .mad-storyline .mad-story-item.right-col .mad-story-content { right: auto; left: 0; border-top-right-radius: var(--br-main); border-top-left-radius: 0; } .mad-story-content .mad-title:not(:last-child) { margin-bottom: 2rem; } /* Info list */ .mad-rest-info { padding: 2.5rem 2rem; background: var(--color-primary-5); border-radius: var(--br-main); } .mad-rest-info>.mad-rest-info-item { display: flex; column-gap: 2rem; } .mad-rest-info:not(:first-child) { margin-top: 2.5rem; } .mad-rest-info:not(:last-child) { margin-bottom: 3rem; } .mad-rest-info>.mad-rest-info-item>.mad-rest-title { min-width: 7.5rem; font-weight: bold; } .mad-rest-info>.mad-rest-info-item:not(:last-child) { margin-bottom: 1rem; } /* ---------------------------------------- Blog Single ---------------------------------------- */ /* ---------------------------------------- 404 Page ---------------------------------------- */ .mad-404-title { font-family: 'Judson', sans-serif; font-size: 25rem; line-height: 25.5rem; font-weight: bold; letter-spacing: -5px; color: var(--color-primary); } .mad-404-title+* { letter-spacing: 0; margin-top: -5rem; } .mad-404-content { padding: 5.5rem 0 9rem; } .mad-404-content .mad-newsletter-form.one-line .btn { min-width: auto; } /* ---------------------------------------- Coming Soon Page ---------------------------------------- */ .mad-coming-soon-page { display: flex; flex-direction: column; overflow: auto; height: 100vh; } .mad-coming-soon { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; background-size: cover; color: var(--color-neutral-10); } .mad-coming-soon .mad-logo { position: absolute; top: 0; left: 0; right: 0; text-align: center; padding: 2.75rem 0; } .mad-coming-soon-title { color: var(--color-neutral-0); } .mad-coming-soon-title:not(:last-child) { margin-bottom: 3rem; } .mad-coming-soon-content { width: 100%; padding: 17.5rem 1rem 9rem; margin: 0 auto; } .mad-coming-soon+.mad-footer:not([class*="footer-"]):after, .mad-coming-soon+.mad-footer:not([class*="footer-"]):before { bottom: 0; } .mad-coming-soon-page .mad-footer .copyrights { color: var(--color-secondary-20); } /* ---------------------------------------- Home ---------------------------------------- */ /* Nav spacing tightened */ .mad-nav-tight > li > a{ padding: 14px 7px; letter-spacing: 0.2px; } /* Dropdown spacing tightened */ .mad-navigation .sub-menu{ padding: 10px 0; min-width: 260px; } .mad-navigation .sub-menu > li > a{ padding: 10px 16px; line-height: 1.15; } /* Third level flyouts */ .mad-navigation .sub-menu .sub-menu{ left: 100%; top: 0; } /* Featured NanoFrax item */ .mad-navigation a.nav-featured{ font-weight: 800; } .mad-navigation a.nav-featured:hover, .mad-navigation a.nav-featured:focus{ text-decoration: none; } /* Badge */ .mad-navigation .nav-badge{ display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 800; vertical-align: middle; border: 1px solid rgba(212, 175, 55, 0.75); background: rgba(212, 175, 55, 0.14); } /* Buttons: 360 outlined, Book Now solid */ .btn-outline-gold{ background: transparent; border: 2px solid #d4af37; color: #d4af37; } .btn-outline-gold:hover, .btn-outline-gold:focus{ background: rgba(212, 175, 55, 0.14); color: #d4af37; } .btn-solid-gold{ background: #d4af37; border: 2px solid #d4af37; color: #111; } .btn-solid-gold:hover, .btn-solid-gold:focus{ filter: brightness(0.96); color: #111; } /* ------------------------------- NAV DROPDOWN CLEANUP (TIGHTEN) -------------------------------- */ /* Make parent li the positioning anchor */ .mad-navigation > li.menu-item-has-children{ position: relative; } /* Level 1 dropdown: align UNDER the parent item (Services) */ .mad-navigation > li.menu-item-has-children > .sub-menu{ left: 0 !important; right: auto !important; top: 100% !important; margin-top: 4px; min-width: 240px; padding: 8px 0; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.18); } /* Level 2 dropdown: not jammed, slight gap, aligned clean */ .mad-navigation .sub-menu li.menu-item-has-children{ position: relative; } .mad-navigation .sub-menu li.menu-item-has-children > .sub-menu{ left: 100% !important; top: 0 !important; margin-left: 10px; min-width: 280px; padding: 8px 0; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.18); } /* Tighter item spacing + better typography */ .mad-navigation .sub-menu > li > a{ padding: 10px 44px 10px 16px; /* more right padding for arrow space */ line-height: 1.15; font-size: 13px; } /* Clean arrow spacing: push it away from the edge */ .mad-navigation .sub-menu > li.menu-item-has-children > a{ position: relative; } /* Most themes add the arrow via ::after */ .mad-navigation .sub-menu > li.menu-item-has-children > a::after{ right: 14px !important; /* <-- fixes the ">" too close to edge */ } /* If your theme uses a span/icon for the arrow, this still helps */ .mad-navigation .sub-menu > li.menu-item-has-children > a i, .mad-navigation .sub-menu > li.menu-item-has-children > a .mad-submenu-icon{ position: absolute; right: 14px; } /* Optional: tighten the dropdown container vertical spacing */ .mad-navigation .sub-menu > li{ margin: 0; } /* Optional: make hover feel cleaner */ .mad-navigation .sub-menu > li > a:hover{ text-decoration: none; } /* Brand colors pulled from logo */ .mad-header{ background: rgba(241, 221, 234, 0.92); } .mad-pre-header{ background: rgba(241, 221, 234, 0.75); } /* Nav link styling */ .mad-navigation > li > a{ color: #050505; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mad-navigation > li > a:hover, .mad-navigation > li.current-menu-item > a{ color: #050505; } /* Subtle underline hover cue */ .mad-navigation > li > a{ position: relative; } .mad-navigation > li > a::after{ content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background: rgba(232, 201, 221, 0.95); transform: scaleX(0); transform-origin: left; transition: transform 160ms ease; } .mad-navigation > li > a:hover::after, .mad-navigation > li.current-menu-item > a::after{ transform: scaleX(1); } /* Dropdown cleanup and tightening */ .mad-navigation > li.menu-item-has-children{ position: relative; } .mad-navigation > li.menu-item-has-children > .sub-menu{ left: 0 !important; right: auto !important; top: calc(100% + 10px); min-width: 260px; padding: 8px 0; border-radius: 12px; background: #ffffff; border: 1px solid rgba(232, 201, 221, 0.85); box-shadow: 0 14px 30px rgba(0,0,0,0.12); } /* Level 2 flyouts */ .mad-navigation .sub-menu li.menu-item-has-children{ position: relative; } .mad-navigation .sub-menu li.menu-item-has-children > .sub-menu{ left: 100% !important; top: 0 !important; margin-left: 10px; min-width: 300px; padding: 8px 0; border-radius: 12px; background: #ffffff; border: 1px solid rgba(232, 201, 221, 0.85); box-shadow: 0 14px 30px rgba(0,0,0,0.12); } /* Dropdown item spacing and arrow spacing */ .mad-navigation .sub-menu > li > a{ color: #050505; padding: 10px 44px 10px 16px; line-height: 1.15; font-size: 13px; } .mad-navigation .sub-menu > li > a:hover{ background: rgba(241, 221, 234, 0.55); color: #050505; } /* Fix cramped arrow on right edge */ .mad-navigation .sub-menu > li.menu-item-has-children > a{ position: relative; } .mad-navigation .sub-menu > li.menu-item-has-children > a::after{ right: 14px !important; } /* Highlight NanoFrax */ .mad-navigation a.nav-featured{ font-weight: 800; } .mad-navigation .nav-badge{ display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 1px solid rgba(232, 201, 221, 1); background: rgba(241, 221, 234, 0.9); color: #050505; } /* Buttons */ .btn-outline-gold{ background: transparent; border: 2px solid rgba(232, 201, 221, 1); color: #050505; } .btn-outline-gold:hover, .btn-outline-gold:focus{ background: rgba(241, 221, 234, 0.8); color: #050505; } .btn-solid-gold{ background: rgba(232, 201, 221, 1); border: 2px solid rgba(232, 201, 221, 1); color: #050505; } .btn-solid-gold:hover, .btn-solid-gold:focus{ background: rgba(223, 182, 207, 1); border-color: rgba(223, 182, 207, 1); color: #050505; } /* Tighten top-level spacing a bit */ .mad-nav-tight > li > a{ padding: 14px 7px; } /* Top Level Nav */ .mad-navigation > li > a{ font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; } /* Dropdown Items */ .mad-navigation .sub-menu > li > a{ font-family: 'Lato', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; } /* Make NanoFrax even stronger */ .mad-navigation a.nav-featured{ font-weight: 700; } /* Intentional header redesign */ .mad-header.header-4 [class*="mad-header-section--sticky"], .mad-header.header-4 [class*="mad-header-section--sticky"].mad-header-section--sticked{ background: #6f6662 !important; /* soft greige */ box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .mad-navigation > li > a{ font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; } .mad-navigation > li > a:hover{ color: #e8c9dd; } .btn-outline-gold{ background: transparent; border: 2px solid #e8c9dd; color: #ffffff; } .btn-outline-gold:hover{ background: #e8c9dd; color: #000; } .btn-solid-gold{ background: #e8c9dd; border: 2px solid #e8c9dd; color: #000; font-weight: 700; } .btn-solid-gold:hover{ background: #d8aec9; } .mad-navigation .sub-menu{ border-radius: 14px; border: none; box-shadow: 0 18px 40px rgba(0,0,0,0.12); }/* /* Softer blush brush highlight */ .mad-navigation > li > a::before{ background: rgba(232, 201, 221, 0.22) !important; /* very soft blush */ border-radius: 40px; transition: all 180ms ease; } /* Hover state slightly stronger but still subtle */ .mad-navigation > li:hover > a::before, .mad-navigation > li.current-menu-item > a::before{ background: rgba(232, 201, 221, 0.32) !important; } /* timeline fix */ .shay-timeline { position: relative; max-width: 1320px; margin: 0 auto; padding: 1rem 0; } .shay-timeline:before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255, 255, 255, 0.75); transform: translateX(-50%); } .shay-timeline-item { position: relative; width: calc(50% - 70px); margin-bottom: 50px; } .shay-timeline-item.left { margin-right: auto; } .shay-timeline-item.right { margin-left: auto; } .shay-timeline-item:before { content: ""; position: absolute; top: 42px; width: 18px; height: 18px; border: 3px solid #ffffff; border-radius: 50%; background: #7a5846; z-index: 3; } .shay-timeline-item.left:before { right: -79px; } .shay-timeline-item.right:before { left: -79px; } .shay-timeline-card { background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); } .shay-timeline-card figure { margin: 0; } .shay-timeline-card figure img { display: block; width: 100%; height: auto; } .shay-timeline-content { padding: 30px; } .shay-timeline-content .mad-title { font-size: 2rem; line-height: 1.2; margin-bottom: 15px; word-break: normal; overflow-wrap: break-word; } .shay-timeline-content p { margin: 0; font-size: 1.05rem; line-height: 1.7; } .shay-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .shay-info-card { background: #ffffff; border-radius: 10px; padding: 30px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06); height: 100%; } .shay-info-card h3, .shay-faq-item h3 { margin-bottom: 12px; } .shay-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .shay-faq-item { background: #ffffff; border-radius: 10px; padding: 30px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06); height: 100%; } @media (max-width: 1199px) { .shay-timeline-item { width: calc(50% - 45px); } .shay-timeline-item.left:before { right: -54px; } .shay-timeline-item.right:before { left: -54px; } .shay-timeline-content .mad-title { font-size: 1.75rem; } } @media (max-width: 991px) { .shay-timeline:before { left: 24px; transform: none; } .shay-timeline-item, .shay-timeline-item.left, .shay-timeline-item.right { width: calc(100% - 60px); margin-left: 60px; margin-right: 0; } .shay-timeline-item:before, .shay-timeline-item.left:before, .shay-timeline-item.right:before { left: -45px; right: auto; top: 34px; } .shay-info-grid, .shay-faq-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .shay-timeline-item, .shay-timeline-item.left, .shay-timeline-item.right { width: calc(100% - 45px); margin-left: 45px; } .shay-timeline:before { left: 16px; } .shay-timeline-item:before, .shay-timeline-item.left:before, .shay-timeline-item.right:before { left: -37px; width: 14px; height: 14px; } .shay-timeline-content { padding: 22px; } .shay-timeline-content .mad-title { font-size: 1.45rem; } .shay-timeline-content p, .shay-info-card p, .shay-faq-item p { font-size: 0.98rem; line-height: 1.65; } .shay-info-card, .shay-faq-item { padding: 22px; } } .shay-timeline-content p { color: #2b2b2b !important; opacity: 1 !important; } .shay-timeline-content .mad-title { color: #111111 !important; } .shay-timeline-card { color: #2b2b2b !important; }.shay-faq-item { color: #3f342d !important; } .shay-faq-item h3, .shay-faq-item .mad-title { color: #211914 !important; } .shay-faq-item p { color: #3f342d !important; opacity: 1 !important; }.shay-breadcrumb { position: relative; width: 100%; overflow: hidden; background: #7b706f; } .shay-breadcrumb picture, .shay-breadcrumb-img { display: block; width: 100%; } .shay-breadcrumb-img { display: block; width: 100%; height: auto; } .shay-breadcrumb-overlay { position: absolute; inset: 0; background: rgba(68, 57, 57, 0.28); z-index: 1; } .shay-breadcrumb-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; } .shay-breadcrumb-content .mad-page-title, .shay-breadcrumb-content .mad-breadcrumb-path, .shay-breadcrumb-content .mad-breadcrumb-path a { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.28); } .shay-breadcrumb-content .mad-page-title { margin-bottom: 10px; } @media (max-width: 767px) { .shay-breadcrumb-content { padding: 14px; } .shay-breadcrumb-content .mad-page-title { font-size: 1.5rem; line-height: 1.15; margin-bottom: 6px; } .shay-breadcrumb-content .mad-breadcrumb-path { font-size: .9rem; line-height: 1.4; } } .products-hero-copy{ max-width: 850px; margin: 0 auto 50px; text-align: center; } .products-hero-copy .mad-title{ margin-bottom: 12px; } .products-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .product-card{ background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 35px rgba(0,0,0,.08); height: 100%; } .product-card .product-image{ background: #f6f1eb; padding: 20px; text-align: center; } .product-card .product-image img{ width: 100%; height: auto; display: block; border-radius: 8px; } .product-card .product-body{ padding: 28px; } .product-card h3{ font-size: 1.9rem; margin-bottom: 12px; } .product-card .product-subtitle{ font-weight: 700; color: #b08b57; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin-bottom: 14px; } .product-card p:last-child{ margin-bottom: 0; } .product-badge{ display: inline-block; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; background: #f7efe4; color: #7d5d35; font-size: .85rem; font-weight: 700; line-height: 1; } .cta-row{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; } .btn-outline-gold{ background: transparent; border: 1px solid #b08b57; color: #b08b57; } .btn-outline-gold:hover{ background: #b08b57; color: #fff; } .systematic-section{ background: #f8f6f3; border-radius: 18px; padding: 50px; margin-top: 60px; } .systematic-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .steps-list{ display: grid; gap: 24px; } .step-box{ background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 8px 25px rgba(0,0,0,.05); } .step-box h4{ margin-bottom: 10px; font-size: 1.25rem; } .step-label{ color: #a0a0a0; font-weight: 700; margin-right: 8px; text-transform: uppercase; letter-spacing: .06em; } .supplement-strip{ margin-top: 60px; background: linear-gradient(135deg,#fff 0%,#f8f3ed 100%); border-radius: 18px; padding: 38px; } .supplement-strip .row{ align-items: center; } .supplement-strip img{ width: 100%; max-width: 360px; display: block; margin: 0 auto; } .small-note{ font-size: .95rem; opacity: .85; } @media (max-width: 991px){ .products-grid, .systematic-grid{ grid-template-columns: 1fr; } .systematic-section{ padding: 30px 20px; } .supplement-strip{ padding: 28px 20px; } } /* ---------------------------------------- Logo Size ---------------------------------------- */ .mad-logo img { width: auto; max-height: 90px; } /* ---------------------------------------- Mobile Nav Color Fix ---------------------------------------- */ /* Override all brown/secondary backgrounds on mobile nav items */ .mad-nav-canvas.full-screen .mad-vr-nav > ul > li > a { background: transparent !important; color: #ffffff; } .mad-nav-canvas.full-screen .mad-vr-nav > ul > li { background: transparent !important; } .mad-nav-canvas.full-screen .mad-vr-nav .sub-menu { background: rgba(111, 102, 98, 0.85) !important; } .mad-nav-canvas.full-screen .mad-vr-nav .sub-menu > li > a { background: transparent !important; color: #ffffff; } /* Mobile nav open state - override any header brown backgrounds */ html.with-src-menu .mad-header { background: #6f6662 !important; } /* ---------------------------------------- Mobile Nav - Remove ALL brown ---------------------------------------- */ @media (max-width: 1024px) { .mad-header, .mad-header.header-4, .mad-header [class*="mad-header-section--sticky"], .mad-header.header-4 [class*="mad-header-section--sticky"] { background: #6f6662 !important; } .mad-navigation > li > a { background: transparent !important; } .mad-navigation > li { background: transparent !important; } }