/* This website is using Bootstrap 5! https://getbootstrap.com/docs/5.1/getting-started/introduction/ */ @font-face { font-family: 'Hando'; src: url('/fonts/hando-bold.woff2') format('woff2'), url('/fonts/hando-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Hando'; src: url('/fonts/hando-medium.woff2') format('woff2'), url('/fonts/hando-medium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Hando'; src: url('/fonts/hando-regular.woff2') format('woff2'), url('/fonts/hando-regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Monoglyphic'; src: url('/fonts/monoglyphic-thin.woff2') format('woff2'), url('/fonts/monoglyphic-thin.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Monoglyphic'; src: url('/fonts/monoglyphic-light.woff2') format('woff2'), url('/fonts/monoglyphic-light.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Monoglyphic'; src: url('/fonts/monoglyphic-regular.woff2') format('woff2'), url('/fonts/monoglyphic-regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Monoglyphic'; src: url('/fonts/monoglyphic-semibold.woff2') format('woff2'), url('/fonts/monoglyphic-semibold.woff') format('woff'); font-weight: bold; font-style: normal; } /* ========================================================================== Global ============================================================================= */ :root { --primary: #00a551; --primary-rgb: 0,165,81; --secondary: #167fe1; --secondary-rgb: 22,127,225; --blue: #167FE1; --blue-light: #ccecf8; --blue-dark: #0e5aa2; --indigo: #6610f2; --purple: #984FE2; --pink: #d63384; --red: #F84848; --orange: #fd7e14; --yellow: #FFB31F; --green: #00a551; --green-md: #0fb696; --green-light: #ecfaf4; --teal: #20c997; --cyan: #0dcaf0; --gray: #f2f2f2; --gray-dark: #353a3f; --dark: #111; --light: #f4f9fc; --body-text: #B1B1B1; --border: #cccccc; --icon-color: currentColor; --primary-font: 'Manrope', sans-serif; --secondary-font: 'Hando', sans-serif; --mono-font: 'Monoglyphic', sans-serif; --latin-font: 'Anek Latin', sans-serif; --ls1: '.01em'; --ls2: '.025em'; --fs-60: 6.0rem; --fs-55: 5.5rem; --fs-45: 4.5rem; --fs-40: 4.0rem; --fs-34: 3.4rem; --fs-32: 3.2rem; --fs-30: 3.0rem; --fs-26: 2.6rem; --fs-24: 2.4rem; --fs-22: 2.2rem; --fs-20: 2.0rem; --fs-18: 1.8rem; --fs-16: 1.6rem; --fs-15: 1.5rem; --box-shadow: 2px 3px 0 0 rgba(0,0,0,.1); --box-shadow-2: 0 2px 7px 0 rgba(0,0,0,.22); --animate-duration: 2s; --RV-Gradient-Dark: linear-gradient(90deg, #00A54F 0%, #167FE1 100%); --RV-Gradient-Dark-2: linear-gradient(0, #167FE1 0%, #00A54F 100%); --dark-gradient: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); --dark-gradient-2: linear-gradient(-77deg, #111 -16.01%, #313131 143.08%); --dark-gradient-3: linear-gradient(170deg, #1D1D1D 35.92%, #111 137.79%); --clamp-1: clamp(15px, 2vw, 100px); --clamp-2: clamp(15px, 4.8vw, 100px); --clamp-3: clamp(15px, 7.82vw, 150px); } @media (max-width: 1801px) { :root { --clamp-3: clamp(15px, 4.8vw, 150px); } } @media (max-width: 991px) { :root { --fs-60: 5.0rem; --fs-55: 4.5rem; --fs-45: 3.5rem; --fs-40: 3.2rem; --fs-34: 3.0rem; --fs-32: 2.8rem; --fs-30: 2.6rem; --fs-26: 2.4rem; --fs-24: 2.2rem; --fs-22: 2.0rem; --fs-20: 1.8rem; --fs-18: 1.7rem; --fs-16: 1.6rem; --fs-15: 1.5rem; } } @media (max-width: 500px) { :root { --fs-60: 3.8rem; --fs-55: 3.5rem; --fs-45: 3.0rem; --fs-40: 2.8rem; } } html { font-size: 10px; } body { --bs-body-bg: var(--dark); font-family: var(--primary-font); color: var(--body-text); font-size: 16px; letter-spacing: var(--ls1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body > h1 { padding: 350px 15px 200px; text-align: center; } text { display: none; } * { scroll-behavior: auto!important; } .green {color:var(--green)} .rounded { border-radius: 20px!important; } .rounded--right { border-top-left-radius: 0!important; border-bottom-left-radius: 0!important; } .rounded--left { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; } .shadow { box-shadow: var(--box-shadow)!important; } .shadow-2 { box-shadow: var(--box-shadow-2)!important; } @media(min-width: 1199px) { .rounded-lg--right { border-top-left-radius: 0!important; border-bottom-left-radius: 0!important; } .rounded-lg--left { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; } } lottie-player svg { max-width: 100%!important; } main { overflow: hidden; } /* Fade image in after lazyloaded */ .lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; transition: opacity 300ms; } .carousel-item [class*='lazyload'] { opacity: 1; } .sr-only { color: var(--body-text); } /* Font Styles ============================================================================= */ h1, h2, h3, h4, h5 { color: #fff; } h1, h2, .display-1 { font-family: var(--primary-font); font-size: var(--fs-55); font-style: normal; font-weight: 700; line-height: 1.1; margin: 0 0 86px; } h1 + h2, h2:not(.display-1) + h3, .display-2 { font-size: var(--fs-24); margin: -66px 0 86px; font-weight: bold; line-height: 1.2; } .display-pre { font-size: var(--fs-18); color: var(--primary); font-weight: 600; margin: 0 0 15px; line-height: 1.5; letter-spacing: 0.0225em; } .display-pre + .display-1 { font-size: var(--fs-30); font-style: normal; font-weight: 700; line-height: 1.1; letter-spacing: 0.0375em; margin: 0 0 22px; } .display-pre + .display-1 + .display-2 { margin: 0 0 86px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.1; } .display-pre ~ p { color: var(--body-text); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; } @media (max-width: 776px) { h1, h2, .display-1 { margin: 0 0 46px; } h1 + h2, h2:not(.display-1) + h3, .display-2 { margin: -26px 0 46px; } } .fs-60 { font-size: var(--fs-60)!important; } .fs-55 { font-size: var(--fs-55)!important; } .fs-30 { font-size: var(--fs-30)!important; } .fs-18 { font-size: var(--fs-18)!important; } .fw-300 { font-weight: 300!important; } .fw-400, .fw-normal { font-weight: 400!important; } .fw-500 { font-weight: 500!important; } .fw-600 { font-weight: 600!important; } .fw-700, .fw-bold { font-weight: 700!important; } p { margin-bottom: 25px; } a { color: var(--secondary); text-decoration: none; transition: 0.4s; } a:not(.btn):hover { color: var(--primary); transition: 0.4s; } .font-primary, .font-manrope { font-family: var(--primary-font); } .font-secondary, .font-hando { font-family: var(--secondary-font); } .font-latin { font-family: var(--latin-font); } .font-mono { font-family: var(--mono-font); } .lead--mono { font-size: var(--fs-20); font-family: var(--mono-font); color: #fff; } .text-gradient { display: inline-block; background: -webkit-linear-gradient(#00a551, #167fe1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-vert { display: inline-block; background: linear-gradient(90deg, #00A54F 0%, #167FE1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-muted { opacity: .8; color: inherit!important; } .text-green { color: var(--primary); } .text-blue { color: var(--secondary); } .text-purple { color: var(--purple); } .text-red { color: var(--red); } .text-yellow { color: var(--yellow); } .fs-7 { font-size: .95rem; } .mb-sm { margin-bottom: 36px!important; } .mb-md { margin-bottom: 52px!important; } .mb-lg { margin-bottom: 86px!important; } @media (max-width: 776px) { .mb-md { margin-bottom: 32px!important; } .mb-lg { margin-bottom: 46px!important; } } .display-horizontal-lines { display: flex; align-items: center; justify-content: center; gap: 35px; text-align: center; margin-bottom: 65px; } .display-horizontal-lines::before, .display-horizontal-lines::after { content: ''; display: block; height: 1px; background: #fff; width: 100%; } .display-horizontal-lines h3 { font-family: var(--mono-font); font-size: var(--fs-30); margin: 0; font-style: normal; font-weight: 300; line-height: 110%; flex: 1 1 content; } @media (min-width: 500px) { .display-horizontal-lines h3 { white-space: nowrap; } } /* List Styles ============================================================================= */ /* List with Circle Checks instead of bullets */ .checks { list-style: none; padding: 0; margin: 20px 0 30px; padding-left: 0; text-align: left; font-size: inherit; font-family: var(--secondary-font); } .checks li, .check { position: relative; padding-left: 52px; margin-bottom: 36px; font-size: inherit; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; font-family: var(--secondary-font); } .checks li { min-height: 37px; display: flex; align-items: center; margin: 15px 0; } .checks li:has(> strong) { display: block; } .checks li > p:last-child { margin: 0; } .checks li::before, .check::before { background-color: var(--primary); color: #fff; height: 37px; width: 37px; border-radius: 50%; content: '\f00c'; font-size: 1.45em; line-height: 1; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; padding-top: 2px; } /* List with Checks (no circles) instead of bullets */ .checks--basic li::before { background: none; color: var(--primary); height: auto; width: auto; padding: 0; } .checks--basic li { position: relative; padding-left: 32px; min-height: unset; } /* List with X (no circles) instead of bullets */ .checks--times li::before { content: '\f00d'; color: var(--red); top: 1px; } /* Checklist */ @media (min-width: 501px) { .checklist { display: inline-flex; } .checklist .checks { flex: 0 1 auto; margin: 0!important; } } .dots { color: var(--body-text); font-family: var(--secondary-font); text-align: left; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; } /* Icon List */ .icon-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 96px; } .icon-list__item { font-size: 18px; } .icon-list__icon { height: 48px; width: 48px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(170deg, #262626 4.88%, #111 105.98%); display: flex; align-items: center; justify-content: center; } .icon-list__icon img, .icon-list__icon svg { width: 25px; height: 25px; margin: 0 auto; position: relative; color: var(--primary); } .icon-list__title { color: #FFF; text-align: center; font-family: var(--secondary-font); font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 0.64px; } /* List inline with pipes */ .list-inline-pipes { list-style: none; padding: 0; margin: 0; display: inline-block; } .list-inline-pipes > li { display: inline-block; } .list-inline-pipes > li:not(:last-child)::after { content: '|'; margin: 0 10px; display: inline; } /* Numbered List */ .numbers { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; } .numbers > li { margin-bottom: 35px; counter-increment: item-counter; flex: 1 1 auto; } .numbers > li::before { content: counter(item-counter); display: inline-block; height: 32px; width: 32px; line-height: 32px; text-align: center; background: var(--green); color: #fff; font-size: 16px; border-radius: 5px; font-weight: bold; } .numbers__title { font-size: 20px; color: var(--green); margin: 20px 0; font-weight: bold; } @media (min-width: 768px) { .numbers { justify-content: flex-start; margin: 0 -5vw; } .numbers > li { flex: 0 1 50%; padding: 0 5vw; } } @media (min-width: 1200px) { .numbers > li { flex: 0 1 33.33%; } } /* Default Numbered List */ ol.default { } ol.default > li { margin: 10px 0; } /* Buttons ============================================================================= */ /* Button Primary */ .btn { --btn-bg: var(--primary); --btn-text: var(--dark); --btn-border: var(--primary); font-size: 1.6rem; font-weight: 600; color: var(--btn-text)!important; background-color: var(--btn-bg); border: 1px solid var(--btn-border)!important; min-height: 42px; line-height: 1.1; display: inline-flex; justify-content: center; align-items: center; letter-spacing: 0.0328rem; text-transform: lowercase; padding: 5px 18px; border-radius: 25px; white-space: normal; } .btn:hover, .btn:focus, .btn:active { color: var(--btn-bg)!important; background-color: var(--btn-text); } .btn:active { -webkit-transform: scale(.97); -ms-transform: scale(.97); transform: scale(.97); } /* Button Secondary */ /* .btn--secondary { --btn-bg: var(--secondary); --btn-border: var(--secondary); } */ .btn--secondary { --primary: var(--secondary); } /* Button Outline */ .btn--outline { --btn-bg: transparent; --btn-border: #fff; --btn-text: #fff; } .btn--outline:hover, .btn--outline:focus, .btn--outline:active { color: var(--dark)!important; } /* Button White */ .btn--white { --btn-bg: #fff; --btn-border: #fff; } /* Button Dark */ .btn--dark { --btn-text: #fff; --btn-bg: var(--dark); --btn-border: var(--dark); } /* Button List */ .btn-list { display: inline-flex; gap: 16px; } /* Color Utilities ============================================================================= */ *:focus { outline-color: var(--primary); } .link-white { color: #fff; } .link-white:hover { color: #fff; opacity: .6; } .link-green, .link-primary, .text-green { color: var(--green); } .link-green:hover, .link-hover { color: var(--blue); } .bg-primary, .bg-green { background: var(--primary)!important; } .bg-secondary, .bg-blue { background: var(--secondary)!important; } .bg-green-light { background: var(--green-light)!important; } .bg-blue-light { background: var(--blue-light)!important; } .bg-blue-dark { background: var(--blue-dark)!important; } .bg-gray { background: var(--gray)!important; color: var(--dark)!important; } .bg-gray-dark { background: var(--gray-dark)!important; } .bg-dark { background: var(--dark)!important; } .bg-light { background: var(--light)!important; color: var(--dark)!important; } .bg-light .display-1, .bg-gray .display-1, .bg-light h2, .bg-gray h2 { color: var(--dark)!important; } .bg-gradient { background: #00a451!important; background: -moz-linear-gradient(left, #00a451 0%, #2d71db 100%)!important; background: -webkit-linear-gradient(left, #00a451 0%,#2d71db 100%)!important; background: linear-gradient(to right, #00a451 0%,#2d71db 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a451', endColorstr='#2d71db',GradientType=1 )!important; } .bg-gradient-light { background: -moz-linear-gradient(left, rgba(0,165,81,0.3) 0%, rgba(0,165,82,0.3) 1%, rgba(22,127,225,0.3) 100%); background: -webkit-linear-gradient(left, rgba(0,165,81,0.3) 0%,rgba(0,165,82,0.3) 1%,rgba(22,127,225,0.3) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8000a551', endColorstr='#80167fe1',GradientType=1 ); } .bg-gradient-light-reverse { background: -moz-linear-gradient(right, rgba(0,165,81,0.3) 0%, rgba(0,165,82,0.3) 1%, rgba(22,127,225,0.3) 100%); background: -webkit-linear-gradient(right, rgba(0,165,81,0.3) 0%,rgba(0,165,82,0.3) 1%,rgba(22,127,225,0.3) 100%); background: linear-gradient(to left, rgba(0,165,81,0.3) 0%,rgba(0,165,82,0.3) 1%,rgba(22,127,225,0.3) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8000a551', endColorstr='#80167fe1',GradientType=1 ); } .bg-gradient-light-angle { background: -moz-linear-gradient(-45deg, rgba(0,165,81,0.3) 0%, rgba(0,165,82,0.3) 1%, rgba(22,127,225,0.3) 100%); background: -webkit-linear-gradient(-45deg, rgba(0,165,81,0.3) 0%,rgba(0,165,82,0.3) 1%,rgba(22,127,225,0.3) 100%); background: linear-gradient(to -45deg, rgba(0,165,81,0.3) 0%,rgba(0,165,82,0.3) 1%,rgba(22,127,225,0.3) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8000a551', endColorstr='#80167fe1',GradientType=1 ); } .bg-dark-gradient { background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); } .border-bottom { border-color: #ccc!important; } .eclipse-bg { position: relative; } .eclipse-bg::after { content: ''; width: 90vw; height: 263px; border-radius: 1823px; background: #D9D9D9; filter: blur(250px); position: absolute; top: calc(100% + 137px); left: 50%; transform: translateX(-50%); } /* Image Utilities ============================================================================= */ img { max-width: 100%; } .cover { object-fit: cover; width: 100%; height: 100%; } .bg-img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } /* video wrapper */ .video-wrapper { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .video-wrapper, .video-wrapper.video-16by9 { padding-bottom: 56.25%; } .video-wrapper.video-4by3 { padding-bottom: 75%; } .video-wrapper iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .video-wrapper--rounded { border-radius: 30px; } /* Video Wrapper Overlay */ .video-wrapper { background: #00a451; transition: 0.3s; background: -moz-linear-gradient(left, #00a451 0%, #2d71db 100%); background: -webkit-linear-gradient(left, #00a451 0%,#2d71db 100%); background: linear-gradient(to right, #00a451 0%,#2d71db 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a451', endColorstr='#2d71db',GradientType=1 ); } .video-thumbnail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .video-wrapper:has([id*="ytplayer-"])::after, .video-wrapper:has([id*="ytplayer-"])::before, .video-wrapper:has([id*="ytplayer-"]) .video-thumbnail, .video-wrapper:has([id*="ytplayer-"]) .video-title { visibility: hidden; opacity: 0; z-index: -9; transition: 0.3s; margin: 0 !important; } .video-wrapper:has([id*="ytplayer-"]) { background: #000; transition: 0.3s; } .video-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; background-size: cover; background-position: center; opacity: .4; } .video-wrapper::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); width: 71px; height: 71px; border-radius: 50%; transition: 0.3s; background: rgba(0,0,0,1); } .video-wrapper::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-39%, -50%); height: 24px; width: 24px; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.99994 4.99C4.99994 4.01884 4.99994 3.53326 5.20243 3.26558C5.37883 3.03239 5.64846 2.88809 5.94034 2.87067C6.27537 2.85066 6.6794 3.12001 7.48746 3.65872L18.003 10.6691C18.6707 11.1142 19.0045 11.3368 19.1209 11.6173C19.2226 11.8626 19.2226 12.1382 19.1209 12.3834C19.0045 12.664 18.6707 12.8865 18.003 13.3317L7.48746 20.342C6.6794 20.8807 6.27537 21.1501 5.94034 21.1301C5.64846 21.1127 5.37883 20.9683 5.20243 20.7352C4.99994 20.4675 4.99994 19.9819 4.99994 19.0107V4.99Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); z-index: 999; } .video-wrapper:hover::before { background: var(--primary); cursor: pointer; transition: 0.3s; } .video-wrapper:hover { cursor: pointer; } .video-title { position: absolute; z-index: 3; color: #fff; text-align: center; top: 55%; left: 15px; right: 15px; font-size: 24px; font-weight: 600; } @media (max-width:500px) { .video-title { font-size: 18px; } } /* Video Popups */ .video-popup-btn { display: inline-block; width: 71px; height: 71px; border-radius: 50%; transition: 0.3s; background-color: var(--dark); background-size: 24px; background-position: 54% center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.99994 4.99C4.99994 4.01884 4.99994 3.53326 5.20243 3.26558C5.37883 3.03239 5.64846 2.88809 5.94034 2.87067C6.27537 2.85066 6.6794 3.12001 7.48746 3.65872L18.003 10.6691C18.6707 11.1142 19.0045 11.3368 19.1209 11.6173C19.2226 11.8626 19.2226 12.1382 19.1209 12.3834C19.0045 12.664 18.6707 12.8865 18.003 13.3317L7.48746 20.342C6.6794 20.8807 6.27537 21.1501 5.94034 21.1301C5.64846 21.1127 5.37883 20.9683 5.20243 20.7352C4.99994 20.4675 4.99994 19.9819 4.99994 19.0107V4.99Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .video-popup-btn:hover { background-color: var(--primary); } .video-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.8); padding: 10vw; z-index: -1; opacity: 0; transition: .4s; display: flex; align-items: center; justify-content: center; visibility: hidden; } .video-popup.playing { opacity: 1; visibility: visible; z-index: 1030; transition: .4s; } .video-popup-wrapper { padding-top: 56.25%; height: 0; position: relative; width: 100%; transform: scale(0); transition: 0.4s; transition-delay: .4s;} .video-popup.playing .video-popup-wrapper { transform: scale(1); transition: 0.4s; transition-delay: .4s; } .video-popup-wrapper iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .video-popup-close { position: absolute; top: 20px; right: 20px; opacity: .7; transition: .4s; } .video-popup-close button { background: none; border: 0; font-size: 30px; color: #fff; } .video-popup-close:hover { opacity: 1; transition: .4s; } /* ========================================================================== #Header ============================================================================= */ :root { --header-height: 170px; --header-px: 7.82vw; } .header { height: var(--header-height); color: #fff; display: flex; align-items: center; position: absolute; top: 0; left: 0; width: 100%; transition: 0.4s; z-index: 9999; } .header .container-fluid { padding: 0 var(--header-px); } .header a { color: #fff; } .header a:hover { color: var(--primary); } .header__links { font-size: 14px; font-weight: 600; display: inline-flex; gap: 40px; align-items: center; list-style: none; padding: 0 32px; letter-spacing: 0.035em; text-transform: capitalize; list-style: none; margin: 0; border-radius: 30px; background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); } .header__navbar { width: 100%; margin: 0 auto; display: flex; text-align: center; justify-content: space-between; align-items: center; transition: 0.4s; } .header__navlinks { text-align: center; align-items: center; justify-content: space-evenly; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .header__logo { display: flex; align-items: center; position: relative; z-index: 1; } .header__logo svg { height: 30px; } .header__nav { font-size: 15px; font-weight: 600; letter-spacing: 0.0375em; } .header .launch-menu-button { display: none; font-size: 0; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: right; color:inherit; -webkit-transition: bottom 0s; -o-transition: bottom 0s; transition: bottom 0s; } .header .launch-menu-button i { font-size: 25px; } .header .launch-menu-only { display: none; } .nav-item { position: relative; } .dropdown-menu { display: block!important; opacity: 0; visibility: hidden; top: 100%!important; transform: translate3d(0px, -50px, 0px)!important; transition: 0.4s cubic-bezier(0, 0.5, 0.32, 1.07); border-radius: 0; } .dropdown-menu.show { visibility: visible; opacity: 1; transform: translate3d(0px, 0, 0px)!important; transition: 0.4s cubic-bezier(0, 0.5, 0.32, 1.07); } @media (max-width: 1439px) { :root { --header-px: 5vw; } } @media (max-width: 1200px) { .header .container-xxl { padding: 0 15px; } } @media (max-width: 999px) { .header:not(.affix) .launch-menu-button { display: flex; position: relative!important; margin: 0 0 auto; top: 0; left: 0; transform: none; font-size: 18px; justify-content: center; align-items: center; gap: 10px; letter-spacing: .05em; font-weight: 700; } .header:not(.affix) .header__nav { display: none!important; } .header:not(.affix) .header__navlinks { justify-content: flex-start; } .header:not(.affix) .header__links { margin: 10px 0 22px; } } @media (max-width: 700px) { .header:not(.affix) .btn { display: none!important; } .header:not(.affix) .header__navlinks { width: 100%; } .header:not(.affix) .launch-menu-button { margin: 0 15px auto auto; font-size: 0; } } @media (min-width: 501px) and ( max-width: 800px ) { .header:not(.affix) .header__logo { margin-top: 30px; } .header:not(.affix) .launch-menu-button { margin-top: 15px; } .header:not(.affix) .btn { margin-top: 20px; } } @media (max-width: 500px) { .header:not(.affix) .header__links { display: none; } .header:not(.affix) .launch-menu-button { margin-top: auto;} :root { --header-height: 100px; } } .dropdown-toggle.no-caret::after { display: none; } /* Header Affix */ :root { --header-affix-height: 100px; } .header.affix { --header-height: var(--header-affix-height); background: #111; position: fixed; top: 0; left: 0; right: 0; box-shadow: var(--box-shadow-2); } .header.affix .header__navbar { transition: 0.4s; } .header.affix .header__logo svg { height: 30px; } @media (max-width: 999px) { :root { --header-affix-height: 60px; } .header.affix .launch-menu-button { display: flex; } .header.affix .header__nav { display: none!important; } .header.affix .header__logo { margin-bottom: 3px; } .header.affix .header__logo svg { height: 25px; } .header.affix .header__links, .header.affix .btn { display: none!important; } .header.affix .header__navlinks { width: 100%; } } /* #maincontent */ .features__hero { padding-top: var(--header-height); } .hero { --hero-pt: calc(var(--header-height) + 90px); padding-top: var(--hero-pt); } .hero:has(.text-gradient-vert) h1 { margin-bottom: 0; font-size: var(--fs-60); } .hero:has(.text-gradient-vert) h1 + .text-gradient-vert { margin: 20px 0 35px; font-size: var(--fs-26); font-weight: 600; letter-spacing: 0.0325em; line-height: 1.3; } .hero:has(.text-gradient-vert) p { font-size: var(--fs-18); letter-spacing: 0.045em; line-height: 1.5; width: 1030px; max-width: 100%; margin: 0 auto; } .hero:has(.text-gradient-vert + .lead--mono) .text-gradient-vert { margin-bottom: 25px; } .hero:has(.text-gradient-vert + .lead--mono) .lead--mono { margin-bottom: 30px; } @media (max-width: 992px) { .hero { --hero-pt: calc(var(--header-height) + 50px); } } /* ========================================================================== #Nav ============================================================================= */ #header .header__nav { list-style: none; padding: 0; margin: 0; color: inherit; -ms-flex-wrap: nowrap; flex-wrap: nowrap; display: flex; gap: 40px; } #header .nav__item { position: relative; line-height: 40px; align-items: center; } #header .nav__item a { color: inherit; opacity: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; } #header .nav__icon { height: 20px; width: 20px; } #header .nav__item:hover > a { color: var(--primary); } #header .nav > .nav__item > a { line-height: 76px; } #header .nav__item a:focus { outline: none!important; box-shadow: none!important; } #header .nav__item:has(a:focus-visible):not(.service-title) { box-shadow: 0 0 3px 3px rgba(var(--primary-rgb),.7); } #header .nav__item a:active { box-shadow: none; } #header .nav__item:hover > a::after, #header .nav__item.active > a::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } #header .nav__dropdown, .custom-dropdown__dropdown { font-size: 14px; color: inherit; text-align: left; display: none; list-style: none; padding: 10px 0; margin: 0; position: absolute; top: calc(100% - 4px); left: -15px; background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); border-radius: 0 0 10px 10px; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2); z-index: 9; } #header .nav__dropdown > li, .custom-dropdown li { white-space: nowrap; line-height: 1.15; padding: 10px 20px; } #header .nav__dropdown > li > a, .custom-dropdown a { color: inherit; } #header .nav__dropdown > li:hover, .custom-dropdown li:hover { background-color: var(--primary); } #header .nav__item:not(.dropdown):hover .nav__dropdown, .custom-dropdown:not(.dropdown):hover .custom-dropdown__dropdown { display: block; } #header .nav__item:not(.dropdown):hover .nav__dropdown { display: block; } #header .nav__item:last-child .nav__dropdown { left: auto; right: -15px; } #header .nav__dropdown:has(.nav__dropdown) { } #header .nav__dropdown .nav__dropdown { left: 100%; top: -10px; border-radius: 0 10px 10px 0; } #header .nav__dropdown > .nav__item > a { position: relative; color: #fff!important; } #header .nav__dropdown > .nav__item > a::after { content: '\f105'; font-size: 14px; margin-left: auto; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; position: relative; transform: translateX(10px); opacity: 0; transition: 0.5s; } #header .nav__dropdown > .nav__item:hover > a::after { opacity: 1; } /* Custom Dropdown */ .dropdown:has(.dropdown__btn) { position: relative; z-index: 9; } .dropdown:has(.dropdown__btn):hover .dropdown__list { display: block; } .dropdown__btn::after { content: '\f107'; font-size: 14px; margin-left: 10px; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; } .dropdown__list { font-size: 14px; color: #fff; text-align: left; display: none; list-style: none; padding: 10px 0; margin: 0; position: absolute; top: 100%; left: 20px; background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); border-radius: 0 0 10px 10px; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2); z-index: 9; } .dropdown__list li { white-space: nowrap; line-height: 1.15; padding: 10px 20px; font-weight: 600; } .dropdown__list li > a { color: #fff!important; } .dropdown__list li:hover { background-color: var(--primary); } /* Launch Menu ============================================================================= */ .launch-menu { position:fixed; top:0; bottom:0; right:0; width:300px; background:var(--dark); color: #fff; padding-bottom: 50px; z-index:9999; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; text-align: center; overflow-y: scroll; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } .launch-menu.open { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } .launch-menu-mask { background: rgba(0,0,0,0.8); position: fixed; top:0; left:0; height: 100%; width: 100%; z-index: 9998; display: none; } .launch-menu-close { opacity: 0.4; margin: 15px auto; font-size: 30px; display: block; background: transparent; border: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; outline: none!important; color: inherit; } .launch-menu-close:hover { opacity: 0.8; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .launch-menu .nav { text-align: left; margin-top: 30px; } .launch-menu .nav a { color: inherit; position: relative; font-weight: 500; letter-spacing: .05em; } .launch-menu .nav__item a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); transform: translateX(-100%); transition: 0.5s cubic-bezier(0,.49,.54,.99); z-index: 9; } .launch-menu .nav__item a:hover::before, .launch-menu .nav__item.active > a::before { transform: translateX(0); }.launch-menu .nav__item > a { padding: 13px 10px 13px 20px; display: block; } .launch-menu .nav__item > a:hover, .launch-menu .nav__item.active > a { background: rgba(255,255,255,.10); color: #fff; -webkit-transition: color 0s; -o-transition: color 0s; transition: color 0s; } .launch-menu .nav__dropdown { display: none; list-style: none; padding: 0; margin: 0; background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.25); box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.25); } .launch-menu .nav__dropdown li, .launch-menu .nav__dropdown > li.active a { background: rgba(0,0,0,.25); } .launch-menu .nav__dropdown a { color: #fff; padding: 13px 10px 13px 40px; display: block; } .launch-menu .nav__dropdown i { display: none; } .launch-menu .nav__dropdown .nav__dropdown { background: rgba(0,0,0,.25); -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.25); box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.25); } .launch-menu .nav__dropdown .nav__dropdown a { padding-left: 60px; } .launch-menu .nav__dropdown a:hover { background: rgba(0,0,0,.25); } .launch-menu .nav__dropdown .nav__dropdown a:hover { background: rgba(var(--primary-rgb).5); } .launch-menu .nav__sub-link { padding-left: 4rem!important; } .launch-menu .logo svg { max-width: 70%; margin: 20px auto 30px; display: block; } .launch-menu .phone { font-size: 24px; margin: 20px 0; color: inherit; } .launch-menu .phone a:not(:hover) { color: inherit; } .launch-menu .links { margin: 0 auto 20px; } .launch-menu .links .btn { width: 80%; min-width: unset; margin-bottom: 15px; white-space: nowrap; } .launch-menu .social { margin-top: 35px; } .launch-menu .social ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 3px; } .launch-menu .social a { color: var(--body-text); background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); } .launch-menu__links { display: flex; gap: 11px; flex-direction: column; justify-content: center; width: 70%; margin: 0 auto; } .launch-menu__links .btn { gap: 8px; } .launch-menu .header__links { padding: 0; width: 100%; gap: 0; flex-wrap: wrap; justify-content: space-around; } .launch-menu .header__links a { color: #fff; } .launch-menu .nav__icon { height: 20px; width: 20px; } .launch-menu .custom-dropdown { position: relative; } .launch-menu .custom-dropdown__btn { width: 100%; } .launch-menu .custom-dropdown__btn:hover a, .launch-menu .custom-dropdown a:not(.btn):hover { color: #fff!important; } .launch-menu .custom-dropdown__btn:hover + .custom-dropdown__dropdown { display: block; } .launch-menu .custom-dropdown__dropdown { top: 100%; left: 50%; transform: translateX(-50%); } /* ========================================================================== Footer ============================================================================= */ .footer { padding: 175px 0; color: #fff; font-size: 15px; font-family: var(--primary-font); overflow: hidden; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.0375em; } .footer a { color: #fff; } .footer a:hover { color: var(--primary); } .footer .hidden { display: none; } .footer__logo { width: 165px; max-width: 100%; margin: 0 auto; } .footer__address { margin-bottom: 32px; } .footer__address, .footer__copy { width: 300px; max-width: 100%; } .footer__address address { margin: 0 0 10px; } .footer__copy { } .footer__social { margin: 40px 0; } .footer__social .social { margin: 0; display: flex; } .footer__social a { margin: 0; } .footer__social a:not(:hover) { background: transparent!important; } .footer__social a:hover { opacity: 1; } .footer__link-heading { font-size: 20px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; color: var(--primary); } .footer__links { list-style: none; margin: 0; padding: 0; font-weight: 300; } .footer__links li { margin: 10px 0 0; color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; } @media (max-width:991px) { .footer { text-align: center; padding: 100px 0; } .footer__address { margin: 0 auto 32px; } } @media (max-width:500px) { .footer { padding: 80px 0; } .footer__logo { margin-top: 30px; } .footer__links { margin-bottom: 30px; } } /* Social */ .social a { height: 46px; width: 46px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; margin: 3px; font-size: 18px; text-align: center; line-height: 46px; transition: .4s; } .social a:hover { background: var(--RV-Gradient-Dark); color: #fff; } .social--primary a { background: var(--primary); border: 1px solid var(--primary); color: #fff; } .social--primary a:hover { background: #fff; color: var(--primary); } /* ========================================================================== Forms ============================================================================= */ .form-container, .form-container-inline { border-radius: 20px; padding: 47px 50px; color: #fff; background: linear-gradient(170deg, #1D1D1D 35.92%, #111 137.79%); border: 0!important; box-shadow: var(--box-shadow); width: 661px; max-width: 100%; } .form-container__heading { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-34); color: inherit; font-weight: 500; letter-spacing: .025em; margin: 0 0 30px; display: inline-flex; align-items: center; } .form-container__heading i { font-size: 60px; margin-right: 20px; background: -webkit-linear-gradient(180deg,#00a551, #167fe1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .form-container__heading svg:has(#logo) { width: 165px; margin-top: 5px; } .form-container__links { color: var(--body-text); font-family: var(--primary-font); font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.2; letter-spacing: 0.0175em; } .form-container__links h4 { font-size: 16px; margin: 30px 0 10px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } .form-container__links a, .form-container__links strong { text-decoration: underline!important; font-weight: 700; color: inherit; } .form-container__links a:hover { color: var(--primary)!important; } .form-container__sub-heading { font-size: 20px; margin: -20px 0 30px; } .form-container-inline { width: 957px; margin: 0 auto; padding: 50px 55px 65px; } @media (max-width:500px) { .form-container, .form-container-inline { padding: 45px 35px; } .form-container__heading svg:has(#logo) { width: 150px; } } /* Hubspot Forms */ .hbspt-form { overflow: hidden; color: var(--dark); display: flex; flex-wrap: wrap; gap: 11px; } .hbspt-form label:not(.hs-error-msg) { position: absolute; left: -200vw; top: -200vh; } .hbspt-form input:not(.hs-button), .hbspt-form select, .hbspt-form textarea { background: rgba(255, 255, 255, 0.95); border: 0; border-radius: 0; height: 40px; padding: 11px; width: 100%; color: inherit; font-family: var(--primary-font); font-size: 16px; font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0.02em; } .hbspt-form select { padding: 0 30px 0 7px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; } .hbspt-form textarea { height: 120px; } .hbspt-form input:focus, .hbspt-form select:focus, .hbspt-form textarea:focus { outline: 0; box-shadow: inset 0 0 1px 2px rgba(var(--primary-rgb),1); } .hbspt-form ::-webkit-input-placeholder, .hbspt-form select.is-placeholder { color: inherit; } .hbspt-form .hs-form-field { position: relative; flex: 1 0 150px; } .hbspt-form .hs-form-field:has(textarea) { flex: 1 1 100%; } .hbspt-form .hs-form-field:has(select)::after { content: '\f107'; font-size: 1em; line-height: 1; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; position: absolute; top: 50%; right: 11px; transform: translateY(-50%); } .hbspt-form .hs-error-msgs { position: absolute; top: 1px; left: 0; font-size: 11px; color: var(--bs-danger); list-style: none; margin: 0; padding: 0 5px; line-height: 1; font-weight: 600; white-space: nowrap; } .hbspt-form .hs-form-field:has(.inputs-list:not(.no-list)) { display: none; } .hbspt-form .hs-richtext { color: var(--body-text); line-height: 1; letter-spacing: 0.0156em; } .hbspt-form .hs-richtext strong { color: #fff; } .hbspt-form .hs-submit { margin-top: 5px; margin-left: auto; } .hbspt-form .hs-submit .hs-button { font-size: 0; padding: 0; height: 42px; width: 42px; border: 0; border-radius: 0; background-color: transparent!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Ccircle cx='21.0005' cy='21' r='20' stroke='url(%23paint0_linear_187_272)' stroke-width='2'/%3E%3Cpath d='M14.0007 20.9998H28.1428M28.1428 20.9998L21.0718 13.9287M28.1428 20.9998L21.0718 28.0708' stroke='url(%23paint1_linear_187_272)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_187_272' x1='0.000488281' y1='21' x2='42.0005' y2='21' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300A54F'/%3E%3Cstop offset='1' stop-color='%23167FE1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_187_272' x1='17.5362' y1='17.4642' x2='24.6073' y2='24.5353' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300A54F'/%3E%3Cstop offset='1' stop-color='%23167FE1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); background-repeat:no-repeat; transition: .4s; } .hbspt-form .hs-submit .hs-button:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Ccircle cx='21.0005' cy='21' r='20' stroke='white' stroke-width='2'/%3E%3Cpath d='M14.0007 20.9998H28.1428M28.1428 20.9998L21.0718 13.9287M28.1428 20.9998L21.0718 28.0708' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .hbspt-form .hs-recaptcha { position: fixed; bottom: 8px; left: 0; transform: translateX(-185px); transition: .4s; z-index: 9999; } .hbspt-form .hs-recaptcha:hover { transform: translateX(0); } .hbspt-form .grecaptcha-badge { animation-name: fadeIn; animation-delay: 2s; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Inline Hubspot Form */ .inline-form { width: 900px; max-width: 100%; margin-left: auto; margin-right: auto; } .inline-form .hbspt-form { align-items: center; justify-content: flex-end; } .inline-form .hbspt-form .hs-submit { margin: 0; } .inline-form .hbspt-form textarea { height: 40px; } .inline-form .hbspt-form .hs-form-field:has(textarea) { flex: 1 0 100%; margin-bottom: -6px; } @media (max-width: 500px) { .hbspt-form .hs-form-field, .inline-form .hbspt-form .hs-form-field:has(textarea) { flex: 1 1 100%; } .inline-form .hbspt-form .hs-submit { margin-left: auto; } .inline-form__sub-text { justify-content: center!important; } .inline-form .hbspt-form textarea { height: 70px; padding: 11px; } } /* Inline Hubspot Form with button on next line */ .inline-form--btn-wrap .hbspt-form .hs-submit { flex: 1 1 100%; text-align: right; margin-top: 15px; } /* Standard Hubspot Form Button with Text */ .hbspt-standard-btn .hbspt-form .hs-submit .hs-button { height: 42px; width: auto; font-size: 16px; background: var(--primary)!important; border-radius: 27px; border: 1px solid var(--primary); padding: 0 20px; color: var(--dark); font-family: var(--primary-font); font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: 0.328px; text-transform: lowercase; } .hbspt-standard-btn .hbspt-form .hs-submit .hs-button:hover { background: var(--dark)!important; color: var(--primary)!important; } /* Hubspot Form Loading Animation */ .spinner-border { transition: 0.4s; } .hbspt-form + .spinner-border { opacity: 0!important; visibility: hidden!important; transition: 0.2s; } /* Hubspot Form Mods */ @media (min-width: 992px) { .tenant-support-form .hs-form-field:has(input[name="company"]), .tenant-support-form .hs-form-field:has(input[placeholder="Issue"]), .tenant-support-form .hs-form-field:has(input[name*="address"]) { flex: 1 1 100%!important; } } /* Hubspot Calendar */ .meetings-iframe-container .hubspot .meetings-lib .fullsize-container { height: auto!important; } .meetings-iframe-container iframe { height: 1000px!important; } /* Calendar Modal */ .modal { --bs-modal-zindex: 9999; --bs-modal-margin: 15px; } .modal .form-container { margin: 0 auto; } .custom-modal { padding: 0; } .custom-modal h3 { color: #fff; margin: 0 0 35px; } .custom-modal .modal-header { color: #fff; border: 0; } .custom-modal .modal-body { padding: 0; } .custom-modal .modal-content { background: transparent; border: 0; width: 900px; max-width: 100%; margin: auto; } .custom-modal .meetings-iframe-container { width: 100%; } .custom-modal .btn-close { width: 1.3em; height: 1.3em; color: #fff; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1.3em auto no-repeat; border-radius: 0; } .custom-modal:has(.form-container) .modal-content { width: 661px; } .custom-modal:has(.form-container) .modal-header { transform: translateY(100%); padding: 15px; position: relative; z-index: 1; } .modal-backdrop.show { opacity: .8; } .modal .hbspt-form .hs-form-field:not(:has(textarea)) { flex: 1 0 200px; } /* Form Swap ================================================== */ .form-swap { text-align: left; max-width: 100%; width: 1100px; margin: 0 auto; } .form-swap p:not(.form-container__sub-heading) { font-size: 15px; font-weight: bold; margin: 0 0 10px; color: inherit; } .form-swap a { color: inherit; } .form-swap .is-required:after { display: inline-block; content: '*'; color: #dc3545; margin-left: .5em; } .form-swap .nav { font-size: 15px; margin: 0 0 10px; display: flex; flex-wrap: wrap; } .form-swap .nav li { margin: 0 0 8px; } .form-swap .nav a { position: relative; display: block; padding: 0 15px 0 28px; } .form-swap .nav a::before { content: ''; position: absolute; left: 0; top: 0; height: 20px; width: 20px; background: var(--gray); display: block; transition: 0.3s; } .form-swap .nav a::after { content: "\f00c"; color: var(--primary); font-size: 16px; position: absolute; left: 3px; top: 3px; opacity: 0; font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 600; line-height: 1; transition: 0.3s; } .form-swap .nav a:hover::after { opacity: .5; transition: 0.3s; } .form-swap .nav a.active::after { opacity: 1; } /* ========================================================================== Get Started ============================================================================= */ #get-started { text-align: center; position: relative; padding-bottom: 360px; } #get-started header { margin-bottom: 50px; } #get-started .inline-form { width: 900px; margin: 0 auto; max-width: 100%; } #get-started .form-container-inline header { margin-bottom: 45px; } .get-started__graphic { position: absolute; top: 45%; left: 0; width: 100%; transform: translateY(-50%); z-index: -1; } .inline-form__sub-text { color: #fff; font-size: 15px; font-weight: 600; display: flex; justify-content: end; flex-wrap: wrap; gap: 10px; align-items: center; margin: 35px 0 0; } .inline-form__sub-text a:not(:hover) { color: inherit; } @media (max-width:991px) { #get-started { padding-bottom: 150px; } } /* ========================================================================== Accordion ============================================================================= */ .accordion { --bs-accordion-color: #fff; --bs-accordion-btn-color: #fff; --bs-accordion-bg: transparent; --bs-accordion-border-color: #494949; --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; } .accordion-item { border: 0; border-bottom: 1px solid #494949; padding-bottom: 10px; } .accordion-button { padding: 24px 0 14px; color: #fff; font-family: var(--primary-font); font-size: var(--fs-20); font-style: normal; font-weight: 600; line-height: 1.5; letter-spacing: 0.05em; justify-content: space-between; gap: 15px; } .accordion-button:not(.collapsed) { } .accordion-button.collapsed:hover { } .accordion-button:focus { outline: none; box-shadow: none; } .accordion-button:hover, .accordion-button:focus-visible { color: var(--primary); } .accordion-button::after { background-size: 12px; margin: auto 0 auto 15px; position: relative; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .accordion-item:has(.show) .accordion-button::after { transform: rotate( -180deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .accordion-body { padding: 0 0 24px; text-align: left; color: var(--body-text); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; } .accordion--lg { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); align-items: start; grid-template-rows: repeat(1, 1fr); grid-template-rows: masonry; gap: 33px; margin: 0; background: none; border-bottom: 0!important; } .accordion--lg .accordion-col { display: flex; flex-direction: column; gap: 33px; } .accordion--lg .accordion-item { position: relative; padding: 10px 0; color: #fff; margin: 0; border: 0!important; border-radius: 20px; background: linear-gradient(170deg, #1D1D1D 4.88%, #111 105.98%); transition: background .5s; min-height: 178px; display: flex; justify-content: center; flex-direction: column; } .accordion--lg .accordion-header { color: inherit; } .accordion--lg .accordion-button { position: unset; font-size: 18px; font-weight: bold; color: inherit; background: none!important; padding: 40px 45px; } .accordion--lg .accordion-item:hover { background: linear-gradient(170deg, #303030 4.88%, #1b1b1b 105.98%); } .accordion--lg .accordion-body { padding: 0 45px 40px; color: #000; opacity: 0; transition: opacity .25s; } .accordion--lg .accordion-item:has(.show), .accordion--lg .accordion-item:has(.collapsing) { color: var(--dark); background: linear-gradient(170deg, #fff 4.88%, #fff 105.98%);; } .accordion--lg .accordion-item:has(.show) .accordion-body { opacity: 1; } .accordion--lg .accordion-button::after { content: ''; position: absolute; bottom: 33px; right: 38px; height: 24px; width: 24px; background-size: 100%; transition: .5s; background-positiion: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.9991 5V19M11.9991 19L18.9991 12M11.9991 19L4.99915 12' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .accordion--lg .accordion-item:has(.show) .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.9993 6L5.99933 18M5.99933 6L17.9993 18' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .accordion--lg .accordion-item:has(.show) .accordion-button:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.9993 6L5.99933 18M5.99933 6L17.9993 18' stroke='%2300a551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .accordion--faq .accordion-button { justify-content: flex-start; gap: 21px; } .accordion--faq .accordion-button::after { margin-left: auto; } .accordion--faq .accordion-button::before, .accordion--faq .accordion-body::before { content: 'Q'; line-height: 1; font-feature-settings: 'liga' off, 'clig' off; font-family: Manrope; font-size: 45.6px; font-style: normal; font-weight: 700; } .accordion--faq .accordion-body::before { content: 'A'; } .accordion--faq .accordion-body { display: flex; gap: 21px; } .accordion--faq .accordion-body a { font-weight: bold; } .accordion-item:has(.accordion-button__icon) { --pl: 63px; border-bottom: 1px solid #494949!important; padding: 18px 0; } .accordion-item:has(.accordion-button__icon) .accordion-button::after { font-size: 14px; height: 14px; width: 14px; opacity: 1; transition: .4s; } .accordion-item:has(.accordion-button__icon) .accordion-button { padding-left: var(--pl)!important; position: relative; } .accordion-item:has(.accordion-button__icon) .accordion-body { padding-left: var(--pl)!important; padding-top: 0; padding-bottom: 16px; color: var(--body-text); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; } .accordion-item:has(.accordion-button__icon) .accordion-button { border: 0!important; padding-top: 14px; padding-bottom: 14px; } .accordion-item:has(.accordion-button__icon) .accordion-button.collapsed:hover, .accordion-item:has(.accordion-button__icon) .accordion-button:not(.collapsed) { background: transparent!important; opacity: 1; } /* .accordion-item:has(.accordion-button__icon):has(.show) .accordion-button::after { opacity: 0; } */ .accordion-button__icon { color: #fff; position: absolute; left: 0; top: 50%; height: 46px; width: 46px; border-radius: 50%; transform: translateY(-50%); background: linear-gradient(0deg, #1D1D1D 0%, #1D1D1D 100%); display: flex; align-items: center; justify-content: center; } .accordion-button__icon svg { height: 25px; width: 25px; } @media (max-width:1200px) { .accordion--lg { display: flex; flex-direction: column; } .accordion--lg .accordion-item { min-height: unset; } .accordion--lg .accordion-button { padding: 20px 45px; } .accordion--lg .accordion-col { width: 100%; } } @media (max-width:600px) { .accordion--lg .accordion-button { padding: 20px 25px; } .accordion--lg .accordion-body { padding: 0 25px 35px; } .accordion--lg .accordion-button::after { bottom: 20px; right: 20px; } } @media (max-width:425px) { .accordion--lg .accordion-button { font-size: 16px; gap: 18px; } .accordion--faq .accordion-button::before, .accordion--faq .accordion-body::before { font-size: 35px; } .accordion--lg .accordion-button::after { bottom: 10px; right: 10px; } } /* ========================================================================== Info Grid ============================================================================= */ .info-grid { text-align: left; display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 39px; } .info-grid__item { --item-color: var(--primary); padding: 70px 65px 65px; border: 2px solid var(--item-color); border-radius: 20px; background: linear-gradient(170deg, #1D1D1D 4.88%, #111 105.98%); box-shadow: 0 0 0 0 var(--item-color); transition: .5s; } .info-grid__title { display: flex; align-items: center; margin-bottom: 50px; gap: 16px; color: #FFF; font-family: var(--primary-font); font-size: 30px; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: 0.6px; } .info-grid__icon { height: 25px; width: 25px; } .info-grid__list { color: var(--body-text); font-family: var(--secondary-font); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 44px; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 0.64px; } .info-grid__sub-title { color: var(--item-color); font-family: var(--secondary-font); margin: 0; font-size: 18px; font-style: italic; font-weight: 400; line-height: 150%; letter-spacing: 0.72px; } .info-grid__list p:last-child { margin: 0; } .info-grid__item:hover { transform: scale(1.025); box-shadow: 0 0 8px 0 var(--item-color); } .info-grid__item--blue { --item-color: var(--blue); } .info-grid__item--purple { --item-color: var(--purple); } .info-grid__item--yellow { --item-color: var(--yellow); } /* ========================================================================== Cta Box ============================================================================= */ .cta-box { position: relative; text-align: center; background: var(--dark); padding: 77px 5vw 85px; width: 1312px; max-width: 80vw; margin: 0 auto; border: solid 2px transparent; background-clip: padding-box; box-sizing: border-box; } .cta-box::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; margin: -2px; border-radius: inherit; background: var(--RV-Gradient-Dark-2); } .cta-box__btn { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(50%); } .cta-box__btn::before, .cta-box__btn::after { content: ''; height: 7px; width: 22px; position: absolute; background: var(--dark); left: -1px; transform: translateX(-100%); } .cta-box__btn::after { left: auto; right: -1px; transform: translateX(100%); } /* ========================================================================== Banners ============================================================================= */ .banner-xs { } .banner-sm { } .banner-md { padding-top: 118px; padding-bottom: 118px; } .banner-lg { padding-top: 150px; padding-bottom: 150px; } .banner-xl { padding-top: 180px; padding-bottom: 180px; } @media (max-width:991px) { .banner-xs { } .banner-sm { } .banner-md { padding-top: 78px!important; padding-bottom: 78px!important; } .banner-lg { padding-top: 99px!important; padding-bottom: 99px!important; } .banner-xl { padding-top: 118px!important; padding-bottom: 118px!important; } } @media (max-width:600px) { .banner-xs { } .banner-sm { } .banner-md { padding-top: 50px!important; padding-bottom: 50px!important; } .banner-lg { padding-top: 70px!important; padding-bottom: 70px!important; } .banner-xl { padding-top: 80px!important; padding-bottom: 80px!important; } } /* Containers */ .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 3rem; } /* ========================================================================== Features Explore Banner ============================================================================= */ .features-explore { position: relative; } .features-explore p { margin: 0 0 19px; } .features-explore h3 { margin: 0 0 57px;} .features-explore__bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: -1; } .features-explore__links { background: #fff; border-radius: 20px; padding: 74px min(15px, 40px) 63px; margin: 57px auto 0; display: grid; justify-content: center; gap: 80px 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-flow: dense; } .features-explore__links .active { display: none; } .features-explore__links a { color: var(--dark)!important; font-weight: 700; font-size: 18px; letter-spacing: 0.0225em; transition: .4s; } .features-explore__links a:hover { --icon-color: url(#icon-gradient); background: linear-gradient(90deg, #00A54F 0%, #167FE1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .features-explore__links p { margin: 15px 0 0; line-height: 1.3; } .features-explore__links svg { max-height: 27px; max-width: 27px; } .features-explore__links:has(.features-explore__link:nth-child(14)) { width: 100%; } .features-explore__links:not(:has(.features-explore__link:nth-child(14))) { width: 1200px; max-width: 100%; margin-left: auto; margin-right: auto; } @media (max-width:600px) { .features-explore__links { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 50px 10px; } } /* ========================================================================== Hero Styles ============================================================================= */ .hero { } /* ========================================================================== Home Page ============================================================================= */ .test-cta { background: var(--primary); padding: 40px; border-radius: 20px; transition: .5s; } .test-cta:hover { transform: scale(1.5); } /* Hero */ #home-hero { text-align: center; width: 1528px; max-width: 100%; margin: 0 auto; padding-bottom: 110px; } .home-hero__content { padding: 220px 15px 50px; width: 966px; max-width: 100%; margin: 0 auto; } .home-hero__img { position: relative; } .home-hero__img-container { width: 851px; max-width: 100%; margin: 0 auto; } .home-hero__imgs { height: 0; padding-top: 60.16%; overflow: hidden; width: 100%; max-width: 100%; margin: 0 auto; position: relative; } .home-hero__img-1,.home-hero__img-2 { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; transform: translate(-50%,-50%); } .home-hero__bg-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } .home-hero__heading { font-size: var(--fs-60); font-style: normal; font-weight: 700; line-height: 1.1; margin: 0 0 31px; } .home-hero__sub-heading { font-size: var(--fs-26); font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0.0325em; margin: 0 0 38px; background: linear-gradient(90deg, #00A54F 0%, #167FE1 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .home-hero__text { font-size: 18px; width: 80%; margin: 0 auto 40px; } .home-hero__buttons { margin: 38px 0 53px; } .home-hero__link { padding-left: 5px; letter-spacing: var(--ls2); } .home-hero__link a { font-weight: bold; } .home-hero__link i { font-size: 18px; } @media (max-width: 500px) { #home-hero { padding-bottom: 30px; } .home-hero__content { padding: 205px 15px 50px; } .home-hero__img { display: none; } } /* Welcome */ #home-welcome { position: relative; } @media (min-width: 501px) { #home-welcome .display-1 { margin-bottom: 59px; } } /* Home Support */ #home-support { position: relative; padding: 100px 0; } .home-support__num-container { font-size: 75px; } .home-support__num { font-size: 2.66em; font-weight: 900; line-height: .9; margin: 0; font-family: var(--secondary-font); } .home-support__num-text { font-size: inherit; line-height: 1; font-weight: 900; margin: 0; font-family: var(--mono-font); } .home-support__pre { font-size: 18px; color: var(--primary); margin: 69px 0 15px; font-weight: 600; } .home-support__lead { font-size: 30px; margin: 0 0 22px; font-weight: 700; } .home-support__text { color: #B1B1B1; font-size: 16px; } .home-support__text p { margin-bottom: 25px; } .home-support__graphic { position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(-5%); z-index: -1; } .home-support__graphic--reverse { transform: translateY(-35%) scaleX(-1); } .home-support__graphic img { width: 100%; } .home-support__widget-container { animation-timing-function: cubic-bezier(.25,.97,.93,.99)!important; width: 341px; max-width: 100%; } .home-support__widget { height: 0; width: 100%; max-width: 100%; position: relative; padding-top: 205.78%; } .home-support__widget-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .home-support__msgs { backface-visibility: hidden!important; position: absolute; top: 9%; left: 10%; right: 10%; border: 0!important; border-radius: 30px; } .home-support__widget-card { position: absolute; top: 0; left: 0; height: 100%; width: 100%; backface-visibility: hidden!important; } .home-support__widget-card.flipInY { animation-duration: .8s!important; animation-timing-function: cubic-bezier(0,.48,.86,.56)!important; } .home-support__widget-card--front.flipInY, .home-support__msg { backface-visibility: hidden!important; } .home-support__widget-card--back.flipInY { } .home-support__widget-bg--back { backface-visibility: hidden!important; } .home-support__msg { width: 100%; } @media(min-width: 992px) { .home-support__content { padding-top: 69px; } } @media(max-width: 1199px) { .home-support__num-container { font-size: 53px; } } @media(max-width: 991px) { .home-support__widget-container { max-width: 80vw; margin: 50px auto 0; } } @media(max-width: 767px) { #home-support { text-align: center; } } /* Customize */ #home-customize { position: relative; } .home-customize__bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .home-customize__bg--r { left: auto; right: 0; top: 0; transform: none; z-index: -1; } @media(min-width: 1400px) { .home-customize__content { padding-top: 52px; position: relative; left: -50px; } } /* API */ #home-api { position: relative; z-index: 1; } #home-api header { margin-bottom: 70px; } .home-api__bg { position: absolute; right: 0; bottom: 0; transform: translateY(60%); z-index: -1; } .home-api__gallery { position: relative; } .home-api__gallery .scroller { list-style: none; padding: 0; margin: 0; } .home-api__gallery-images:not(.simply-scroll-list) { position: relative; display: flex; justify-content: center; align-items: center; gap: 28px; width: 130vw; margin: 70px auto 0; left: 50%; transform: translateX(-50%); } .home-api__img { border-radius: 16px; overflow: hidden; position: relative; flex: 1 1 25%; height: 100%; transition: .8s; } .home-api__img:not(.home-api__img--main) { opacity: .2; } @media(min-width: 992px) { #home-api { margin-bottom: 200px; } .home-api__examples { position: absolute; left: 0; right: 0; top: 20%; width: 1183px; max-width: 100vw; margin: 0 auto; display: flex; justify-content: space-between; } .home-api__example--1 { margin-left: 39px; } .home-api__example--2 { margin-top: 39px; } } @media(max-width: 991px) { .home-api__bg { transform: translateY(-64%); } .home-api__gallery { flex-wrap: wrap; } .home-api__img:first-child, .home-api__img:last-child { display: none; } .home-api__examples { text-align: center; display: flex; flex: 1 1 100%; justify-content: center; transform: translateY(-40%); z-index: 2; position: relative; } .home-api__example--1 { margin-left: 39px; } .home-api__example--2 { margin-top: 39px; } } @media(max-width: 991px) { .home-api__example--1 { margin-left: 20px; } } /* Open API Page */ .api-gallery { position: relative; z-index: 1; padding-bottom: 200px; } .api-gallery .home-api__bg { transform: translateY(40%); } .api-gallery .home-api__bg img { z-index: -1; } @media(max-width: 991px) { .api-gallery { padding-bottom: 0; } .api-gallery .home-api__bg { transform: translateY(-40%); } } .api-details { text-align: center; } .logo-list { display: flex; gap: 25px 65px; flex-wrap: wrap; justify-content: center; align-items: center; list-style: none; margin: 100px 0; padding: 0; } .logo-list img { max-height: 80px; } .restful-api { position: relative; } .restful-api-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: 100% auto; background-repeat: no-repeat; z-index: -1; } .restful-api .box { padding: 74px; text-align: center; color: var(--dark); position: relative; z-index: 3; } .restful-api .box p:not(.display-pre) { color: inherit; } @media(max-width: 991px) { .restful-api .box { padding: 74px 25px; } } /* Simply Scroller */ .simply-scroll-container { position: relative; width: 100%; } .simply-scroll-clip { position: relative; overflow: hidden; } .simply-scroll-list { overflow: hidden; margin: 0; padding: 0; list-style: none; } .simply-scroll-list li { padding: 0 14px!important; margin: 0; list-style: none; } .simply-scroll-list li .home-api__img { opacity: .2; } .simply-scroll-list li .home-api__img::after { content: ''; position: absolute; top: 0; right: -21px; background-image: url('/images/for-rent.svg'); height: 108px; width: 200px; background-position: center; border-radius: 20px; transform: scale(.8); opacity: 0; transition: .6s ease-out; } .simply-scroll-list li.active .home-api__img { opacity: 1; } .simply-scroll-list li.active .home-api__img::after { opacity: 1; transform: none; } .simply-scroll-list li img { border: none; display: block; } .simply-scroll { width: 100%!important; height: 380px!important; margin: 0!important; } .simply-scroll .simply-scroll-clip { width: 100%!important; height: 380px!important; } .simply-scroll .simply-scroll-list li { float: left; width: 538px!important; height: 380px!important; } @media (max-width: 600px) { .scroller:not(.simply-scroll-list) { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); } .scroller__item:nth-child(2n+1) { display: none; } } /* Features */ #home-features { padding-top: 236px; } /* Features Carousel */ .features-carousel { text-align: center; } .features-carousel .carousel-inner { padding: 0; min-height: 150px; margin-bottom: 35px; overflow: visible; } .features-carousel:has(.features-tabs__nav) .carousel-inner { padding: 0; } .features-carousel .carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 11px; padding: 0 7vw; } .features-carousel .carousel-control { color: var(--dark)!important; display: inline-block; position: relative; opacity: 1; font-size: 18px; width: 42px; height: 42px; border-radius: 50%; background: #fff!important; } .features-carousel .carousel-control:not(:hover,:focus,.carousel-control-next) { opacity: .1; } .feature__item { position: relative; font-size: 18px; min-height: 466px; border: solid 2px transparent; padding: 90px 78px 65px; border-radius: 20px; background: linear-gradient(170deg, #1D1D1D 4.88%, #111 105.98%); color: #fff; background-clip: padding-box; box-sizing: border-box; transition: .8s ease-out; opacity: 1; text-align: left; } .feature__item::before, .feature__item::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; margin: -2px; border-radius: inherit; background: var(--RV-Gradient-Dark); opacity: 0; transition: .6s ease-out; } .feature__item::after { background: linear-gradient(170deg, #1D1D1D 4.88%, #111 105.98%); margin: 0; opacity: 1; z-index: -1; } .feature__icon { margin: 0 0 24px; color: inherit; font-size: 30px; min-height: 30px; } .feature__icon svg { height: 30px; width: 30px; } .feature__logo { height: 75px; margin-bottom: 25px; display: flex; align-items: flex-end; } .feature__logo img { max-height: 65px; } .feature__logo img[src*='transunion'] { max-height: 75px; } .feature__title { color: inherit; font-family: var(--primary-font); font-size: var(--fs-30); font-style: normal; font-weight: 600; line-height: 1.1; letter-spacing: 0.0375em; margin: 0 0 21px; } .feature__title small { display: block; font-size: 20px; line-height: 1.43; letter-spacing: 0.025em; } .feature__description { font-size: 16px; font-family: var(--secondary-font); letter-spacing: 0.64px; color: var(--body-text); } .feature__description p { margin: 0; } .feature__description p ~ p { margin: 1em 0 0; } .feature__link { padding-top: 25px; display: block; font-weight: 600; color: #fff; opacity: 0; transition: .6s ease-out; } .feature__link::after { content: '\e09f'; font-size: 20px; position: relative; top: 1px; padding-left: 10px; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; } .feature__link:hover { color: var(--primary); } .features-carousel .carousel-item.active:not(.carousel-item-start, .carousel-item-end) .feature__item:first-child .feature__link, .features-carousel .carousel-item-next.carousel-item-start .feature__item:first-child .feature__link, .features-carousel .carousel-item-prev.carousel-item-end .feature__item:first-child .feature__link { opacity: 1; } .features-carousel--icons-lg .feature__icon { font-size: 50px; } .features-carousel--icons-lg .feature__icon svg { height: 50px; width: 50px; } .carousel .features-tabs__nav { justify-content: center; gap: 40px; margin: 40px 0 60px; } .carousel .carousel-indicators { position: relative; } .carousel .carousel-indicators [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: auto; height: auto; padding: 5px 10px; margin-right: 0; margin-left: 0; text-indent: unset; cursor: pointer; background-color: transparent; background-clip: padding-box; border: 0; border-top: 0; border-bottom: 0; opacity: 1; } .carousel .carousel-indicators li:has(.hidden) { position: absolute; top: -110vw; left: -110vw; } .carousel .carousel-indicators li:has(+ li .hidden.active) .nav-link::after { opacity: 1; transform: scaleX(1); } .carousel .carousel-indicators li:has(+ li .hidden.active) .nav-link { font-size: var(--fs-26); } .features-carousel--white .feature__item { --body-text: var(--dark); background: #fff; color: var(--dark); padding: 35px 55px 35px; min-height: unset; } .features-carousel--white .feature__item::before, .features-carousel--white .feature__item::after { display: none!Important; } .features-grid { display: grid; gap: 33px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .features-grid .feature__item { min-height: unset!important; } .features-grid:has(.feature__link) .feature__item:hover::before, .features-grid:has(.feature__link) .feature__item:hover::after, .features-grid:has(.feature__link) .feature__item:hover .feature__link { opacity: 1; } .features-grid .feature__link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding: 45px; color: #fff!important; } @media (max-width: 450px) { .features-grid { grid-template-columns: 1fr; } } @media (min-width: 992px) { .features-carousel .carousel-inner { display: flex; transform: translateX(10vw); } } @media (max-width: 991px) { .features-carousel { padding-left: 5vw; padding-right: 5vw; } .feature__item:has(.feature__icon) { padding: 60px 50px; } } @media (max-width: 767px) { .feature__item:has(.feature__icon) { padding: 50px 40px; min-height: 400px; } .feature__item:not(:has(.feature__icon)) { padding-left: 40px; padding-right: 40px; } } /* Multi Item Carousel */ .multi-item-carousel { --gap: 30px; --shown-items: 1; --shown-percent: calc(100% / var(--shown-items)); --shown-percent-prev: calc(-100% / var(--shown-items)); margin-right: calc(var(--gap) * -1); } .multi-item-carousel .carousel-item { justify-content: space-between; padding-right: var(--gap); } .multi-item-carousel .carousel-item > * { transition: opacity .6s; } .multi-item-carousel .carousel-item.active, .multi-item-carousel .carousel-item-next, .multi-item-carousel .carousel-item-prev, .carousel-item--get-height { display: grid; visibility: visible; gap: var(--gap); grid-template-columns: repeat(var(--shown-items), minmax(0, 1fr)); } .multi-item-carousel .carousel-item-next:not(.carousel-item-start), .multi-item-carousel .active.carousel-item-end { -webkit-transform: translateX(var(--shown-percent)); transform: translateX(var(--shown-percent)); } .multi-item-carousel .carousel-item-prev:not(.carousel-item-end), .multi-item-carousel .active.carousel-item-start { -webkit-transform: translateX(var(--shown-percent-prev)); transform: translateX(var(--shown-percent-prev)); } /* Carousel Steps */ .features-carousel--steps .carousel-item { } .features-carousel--steps .feature__item { counter-reset: items var(--item-num); padding-left: 60px; padding-right: 60px; padding-bottom: 60px; } .features-carousel--steps .carousel-item .feature__title { margin: 26px 0 18px; } .features-carousel--steps .carousel-item .feature__title::before { content: counter(items); color: #FFF; font-family: var(--primary); font-size: 25px; font-weight: 400; height: 50px; width: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); position: absolute; top: 45px; right: 52px; z-index: 1; display: flex; align-items: center; justify-content: center; } @media (min-width: 992px) { .features-carousel--steps { display: block; } .features-carousel--steps .carousel-inner, .features-carousel--center .carousel-inner { transform: translateX(0); } } /* Carousel item child animation ====================================== */ /* Child Opacity ------------------------------ */ /* Fade out as it's sliding away from active */ .multi-item-carousel .carousel-item-prev:not(.carousel-item-end) > *:first-child, .multi-item-carousel .active.carousel-item-start > *:first-child { opacity: 0!important; } /* Gradient Border ------------------------------ */ /* As it's sliding into active - show border */ .multi-item-carousel .carousel-item-start:not(.active) > *:first-child::before, .multi-item-carousel .carousel-item-end:not(.active) > *:first-child::before { opacity: 1!important; } /* While Active - show border */ .multi-item-carousel .carousel-item.active:not(.carousel-item-start, .carousel-item-end) > *:first-child::before { opacity: 1!important; } /* ========================================================================== Testimonials ============================================================================= */ #home-testimonials { padding: 0 0 120px; position: relative; } .home-testimonials__bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-18%) rotateX(170.464deg); z-index: -1; } .testimonials-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); margin-bottom: 94px; } .testimonial-box { position: relative; border-radius: 20px; overflow: hidden; } .testimonial-box__img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; } .testimonial-box__content { padding: 64px 15px 135px; background: #fff; position: relative; z-index: 2; transition: .4s; height: 100%; } .testimonial-box__name { color: var(--dark); text-align: center; font-family: var(--mono-font); font-size: var(--fs-32); font-style: normal; font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; } .testimonial-box__company { color: var(--dark); text-align: center; font-family: var(--mono-font); font-size: 18px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.0225em; } .testimonial-box__quote { color: var(--dark); width: 400px; max-width: 100%; margin: 40px auto; text-align: center; font-family: var(--mono-font); font-size: 18px; font-style: normal; font-weight: 600; line-height: 1.25; letter-spacing: 0.0225em; } .testimonial-box .video-wrapper--btn { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: transparent; } .testimonial-box .video-wrapper--btn .video-thumbnail { display: none!important; } .testimonial-box .video-wrapper--btn:not(.play) [id*="ytplayer-"] { opacity: 0; z-index: -1; } .testimonial-box .video-wrapper--btn::before { top: auto; bottom: 64px; transform: translateX(-50%); } .testimonial-box .video-wrapper--btn::after { top: auto; bottom: 64px; transform: translateX(-39%) translateY(-95%); } @media(min-width: 992px) { .testimonial-box__content { opacity: 0; } .testimonial-box__img:hover { cursor: pointer; } .testimonial-box:hover .testimonial-box__content, .testimonial-box__content:has(.play), .testimonials-grid:not(:hover) .testimonial-box:first-child .testimonial-box__content { opacity: 1; } } @media(max-width: 700px) { .testimonials-grid { grid-template-columns: 1fr; } } /* Reviews */ #home-reviews { } .reviewmgr-stream iframe { min-height: 410px; } /* FAQ */ #home-faq { } #home-faq .container-fluid { width: calc(100% - 7.5vw); max-width: 1980px; } /* Home Blog */ #home-blog { } /* ========================================================================== Blog ============================================================================= */ .blog__featured { width: 100%; background: var(--gray); border-radius: 20px; flex: 1 1 auto; margin-bottom: 20px; overflow: hidden; } .blog__featured img { height: 100%; width: auto; min-width: 100%; } .blog__featured img.default { max-width: 60%; min-width: unset; margin: 0 auto; display: block; } .blog__body { margin-bottom: 55px; } .blog__header { } .blog__date { font-size: 16px; margin-bottom: 25px; } .blog__title { font-size: 20px; font-weight: bold; margin: 0 0 5px; } .blog__content { font-size: 17px; } .blog__inline .blog__post .video-thumbnail { opacity: 1; } @media (min-width: 992px) { .blog__inline { display: flex; flex-direction: column; flex-wrap: wrap; height: 1100px; align-items: center; } .blog__post { height: 50%; width: 38%; display: flex; flex-direction: column; } .blog__post:first-child { height: 85%; width: 53%; } .blog__post:not(:first-child) .blog__content { display: none; } } @media (max-width: 991px) { .blog__featured { height: 0; padding-top: 56.65%; display: block; position: relative; } .blog__featured img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } } /* Inline */ .blog-inline { width: 1069px; max-width: 100%; margin: 0 auto 94px; } .blog-inline a { position: relative; } .blog-inline__post *:hover { cursor: pointer; } .blog-inline a:not(:hover) { color: currentColor; } .blog-inline__post { text-align: left; height: auto; width: 100%; } .blog-inline__post::after { content: ''; height: 2px; width: 100%; display: block; background: var(--RV-Gradient-Dark, linear-gradient(90deg, #00A54F 0%, #167FE1 100%)); } .blog-inline__link { padding: 20px 0 20px 36px; display: block; position: relative; } .blog-inline__type-icon { position: absolute; top: 20px; left: 0; font-size: 24px; color: #fff; } .blog-inline__type-icon svg { height: 24px; width: 24px; } .blog-inline__body { } .blog-inline__header { } .blog-inline__title { margin: 0 0 7px; color: #fff; padding-right: 36px; position: relative; font-size: var(--fs-20); font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; } .blog-inline__link-icon { opacity: 0; height: 24px; width: 24px; position: absolute; top: 0; right: 0; transition: .5s; } .blog-inline__content { color: var(--body-text); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; } .blog-inline__link:hover .blog-inline__link-icon { opacity: 1; } /* ========================================================================== Blog Page ============================================================================= */ #blog #header:not(.affix) { background: var(--dark); } #blog main { padding-top: var(--header-height); } #blog .view-more-posts { color: #fff; } #blog .view-more-posts:hover { color: var(--primary); } #blog #get-started { padding-bottom: 150px; } .blog__container { --post-width: 840px; --ad-width: 940px; } @media (min-width: 992px) and (max-width: 1300px) { .blog__container { --post-width: 60vw; --ad-width: 65vw; } } @media (max-width: 991px) { .blog__container { --post-width: 100%; --ad-width: 100%; } } #blog-subnav {position: relative; background: var(--RV-Gradient-Dark); color: var(--dark); z-index: 999; } #blog-subnav::before { content: ''; position: absolute; top: -100px; height: 100px; background: var(--dark); width: 100%; } #blog-subnav .container-xxl { background: inherit; display: flex; justify-content: space-between; align-items: center; } #blog-subnav__categories { padding: 20px 0; flex: 1 1 auto; position: relative; } #blog-subnav__categories ul { list-style: none; margin: 0; padding: 0; display: flex; } #blog-subnav__categories li { padding: 0 1.6vw 0 0; margin: 0; } #blog-subnav__categories li::before { display: none; } #blog-subnav__categories a { color: #fff; letter-spacing: 0.025em; font-size: 16px; font-weight: 600; } #blog-subnav__categories li.active a, #blog-subnav__categories a:hover, #blog-subnav__categories a:active { color: var(--green); } #blog-subnav__search { margin: 0; } #tipue_search_content { max-width: 100%!important; } #blog-subnav__search #tipue_search_input { background: none!important; color: inherit!important; border: 0; transition: 0.4s; padding: 10px 0; position: relative; } #blog-subnav__search #tipue_search_input::-webkit-input-placeholder { font-size: 16px; opacity: 0; } #blog-subnav__search .tipue_search_group { height: 45px; position: relative; } #blog-subnav__search .tipue_search_group::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--dark); transform-origin: right; opacity: .3; transform: scaleX(0); } #blog-subnav__search button { background: none; border: 0; font-size: 31px; font-weight: bold; padding: 0; opacity: .7; } #blog-subnav__search button i { font-weight: bold; color: inherit; } #blog-subnav__search button:hover { opacity: 1; color: inherit; } #blog-subnav__search:hover .tipue_search_group::after { transform: scaleX(1); transition: 0.4s; } #blog-subnav__search:hover #tipue_search_input::-webkit-input-placeholder, #blog-subnav__search #tipue_search_input:focus::-webkit-input-placeholder { opacity: 1; } @media (min-width:992px) { } @media (max-width:1250px) { #blog-subnav__categories a { font-size: 15px; } } @media (min-width:1201px) { #blog-subnav__categories a { color: var(--dark); } #blog-subnav__categories a:hover { color: #fff; } } @media (max-width:1200px) { #blog-subnav { overflow: visible; } #blog-subnav__categories { flex: 0 0 auto; } #blog-subnav__categories::before { content: 'Select Category +'; display: block; font-weight: bold; } #blog-subnav__categories ul { transform: translateY(-100%); min-width: 200px; transition: .4s; flex-direction: column; position: absolute; top: 100%; left: 0; background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); z-index: -1; } #blog-subnav__categories li { padding: 0; } #blog-subnav__categories a { padding: 8px 20px; display: block; } #blog-subnav__categories a:hover { color: var(--primary); } #blog-subnav__categories:hover ul { transform: translateY(0); transition: .4s; } } @media (max-width:575px) { #blog-subnav .container-xxl { justify-content: center; flex-wrap: wrap; } #blog-subnav form { flex: 1 1 100%; padding-top: 10px; } #blog-subnav__search .tipue_search_group::after { transform: scaleX(1); } #blog-subnav__search #tipue_search_input::-webkit-input-placeholder { opacity: 1; } #blog-subnav__categories ul { text-align: center; left: 50%; transform: translate(-50%,-100%); } #blog-subnav__categories:hover ul { transform: translate(-50%,0); } } .blog__category-btns { display: flex; justify-content: space-between; padding-bottom: 60px; overflow: visible; } .blog__category-btn { flex: 0 0 19%; margin-bottom: 20px; background: linear-gradient(77deg, #111 -16.01%, #313131 143.08%); padding: 0 20px; height: 52px; line-height: 1.1; font-size: 16px; color: #fff!important; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; } .blog__category-btn-icon { margin-left: 10px; color: var(--primary); font-size: 23px; } .blog__category-btn:hover { box-shadow: 0 0 0 1px var(--primary); } @media (max-width:1170px) { .blog__category-btn { font-size: 15px; } } @media (max-width:1080px) { .blog__category-btns { flex-wrap: wrap; justify-content: center; margin: 0 -10px; } .blog__category-btn { flex: 1 1 45%; white-space: nowrap; margin-left: 10px; margin-right: 10px; } } @media (max-width:700px) { .blog__category-btns { flex-wrap: wrap; justify-content: center; } .blog__category-btn { flex: 1 1 100%; margin-left: 0; margin-right: 0; } } .blog__recent-panel .heading-main a:not(:hover) { color: inherit; } .blog__recent-panel { overflow: visible; } .blog__recent-panel .blog__panel-title { margin-bottom: 0; } .blog__recent-panel hr { margin: 15px 0 30px; } .blog__recent-panel:not(.all-posts) article:nth-child(1n+4) { display: none; } .blog__recent-panel .blog-post-list { display: grid; } .blog__recent-panel .blog-post-list .post-title { font-size: 21px; } .blog__recent-panel.all-posts .blog-post-list .post-body { display: none; } .blog__recent-panel:not(.all-posts) article:first-child .post-title { font-size: 24px; } @media (min-width: 992px) { .blog__recent-panel:not(.all-posts) .blog-post-list { grid-template-columns: repeat(3, 1fr); gap: 40px 60px; } .blog__recent-panel:not(.all-posts) .blog-post-list article:first-child { grid-area: auto / auto / span 2 / span 2; } .blog__recent-panel:not(.all-posts) .blog-post-list article:not(:first-child) .post-body { display: none; } .blog__recent-panel.all-posts .blog-post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 60px; } } @media (min-width: 650px) and (max-width:991px) { .blog__recent-panel:not(.all-posts) .blog-post-list { grid-template-columns: repeat(2, 1fr); gap: 30px 40px; } .blog__recent-panel:not(.all-posts) .blog-post-list article:first-child { grid-area: auto / auto / span 2 / span 2; } .blog__recent-panel:not(.all-posts) .blog-post-list article:not(:first-child) .post-body { display: none; } .blog__recent-panel.all-posts .blog-post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; } } .blog__container { padding-top: 100px; } .blog__panel-title { font-size: 24px; font-weight: bold; letter-spacing: 0.01em; margin: 30px 0 0; } .view-more-posts { font-size: 18px; font-weight: 500; white-space: nowrap; } .blog__container .page-nav { display: none; } @media (max-width: 991px) { .blog__container { padding-top: 80px; } } @media (max-width: 500px) { .blog__container { padding-top: 50px; } .blog__panel-header { flex-wrap: wrap; } .view-more-posts { display: block; text-align: right; margin-top: 10px; align-self: end; flex: 1 1 100%; font-size: 16px; } } .blog__category-panel hr { margin: 15px 0 30px; } .blog__category-panel .post-title { font-size: 21px; } .blog__category-panel .post-body { display: none; } @media (min-width: 992px) { .blog__category-panel .blog-post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 60px; } } @media (min-width: 650px) and (max-width:991px) { .blog__category-panel .blog-post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; } .blog__category-panel .blog-post-list article:last-child { display: none; } } .blog__recommended { max-width:var(--ad-width); width: 100%; margin: 0 auto; } .blog__recommended .blog__panel-title { margin-bottom: 10px; } .blog__recommended article { display: flex; align-items: center; border-bottom: 1px solid var(--border-color); padding: 35px 0; } .blog__recommended .post-image { flex: 0 0 223px; overflow: hidden; border-radius: 4px; } .blog__recommended .post-title { transition: 0.4s; } .blog__recommended .post-content { padding-left: 35px; flex: 1 1 auto; } .blog__recommended a:hover { cursor: pointer; } .blog__recommended a:hover .post-image img { transform: scale(1.05); } .blog__recommended a:hover .post-image img.default { transform: translate(-50%,-50%) scale(1.05); } .blog__recommended a:hover .post-title { color: var(--primary); transition: 0.4s; } @media (max-width: 600px) { .blog__recommended .post-image { flex: 0 0 120px; } .blog__recommended .post-title { font-size: 18px!important; } .blog__recommended .post-content { padding-left: 25px; } } .blog__full-post { width: 100%; max-width: 1062px; margin: 0 auto; } .blog__full-post .post-featured { padding-top: 45%; position: relative; overflow: hidden; margin-bottom: 55px; } .blog__full-post .post-featured--video { padding-top: 56.25%; } .blog__full-post .post-featured img, .blog__full-post .post-featured .video-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .blog__full-post .post-header { padding: 0 0 40px; max-width: var(--post-width); width: 100%; margin: 0 auto; } .blog__full-post .post-title { font-size: 36px; margin: 0 0 10px; } .blog__full-post .post-date { font-size: 18px; letter-spacing: 0.01em; } .blog__full-post .author-icon { height: 39px; width: 39px; border-radius: 50%; border: 0; background-repeat: no-repeat; background-size: cover; background-position: center top; display: inline-block; vertical-align: middle; margin-right: 3px; } .blog__full-post .post-header__share { flex: 0 0 225px; text-align: right; } .blog__full-post .post-header__share h4 { text-transform: uppercase; font-weight: 500; margin-bottom: 15px; font-size: 16px; } .blog__full-post .post-body { padding: 0; font-size: 17px; letter-spacing: 0.01em; max-width: var(--post-width); width: 100%; margin: 0 auto; position: relative; overflow: visible; } .blog__full-post .post-body h2 { font-size: 24px; margin: 40px 0 10px; font-weight: bold; } .blog__full-post .post-body h3 { font-size: 20px; margin: 35px 0 10px; font-weight: bold; } .blog__full-post .post-body h4 { font-size: 18px; margin: 25px 0 10px; font-weight: bold; } .blog__full-post .post-body p > img { display: block; margin: 30px auto; } .blog__full-post .post-body p { margin-bottom: 20px; } .blog__full-post .post-body a:not(.btn) { font-weight: bold; } .blog__full-post .post-body a:not(.btn):hover { color: var(--green); } #blog-side-nav { position: fixed; top: var(--header-height); left: 0; width: 15%; max-width: 300px; bottom: 50px; } #blog-side-nav.affix { z-index: 998; overflow: scroll; scrollbar-color: #111 #111; scrollbar-width: thin; } #blog-side-nav.affix ::-webkit-scrollbar-track { background: #111; } #blog-side-nav ul { display: block; } #blog-side-nav li { padding: 3px 0; transition: 0.4s; } #blog-side-nav li a { padding-left: 35%; color: var(--body-text); font-size: 18px; display: block; position: relative; } #blog-side-nav li a:not(.active) { transform: translateX(-30px); } #blog-side-nav li a::before { content: ''; position: absolute; top: 1.2em; left: 0; transform: translateY(-50%); height: 3px; width: 25%; background: var(--body-text); transition: 0.4s; } #blog-side-nav li a::after { content: ''; position: absolute; top: 1.2em; left: 25%; transform: translateY(-50%) scaleX(0); height: 6px; width: 6px; border-radius: 50%; background: var(--body-text); transition: 0.4s; transform-origin: left; } #blog-side-nav li a.active, #blog-side-nav li a:hover { color: var(--primary); text-shadow: 0.5px 0 0 currentColor; } #blog-side-nav li a.active::before { background: var(--green); transition: 0.4s; } #blog-side-nav li a.active::after { background: var(--green); transform: translateY(-50%) scaleX(1); transition: 0.4s; } #blog-side-nav:not(.affix) li { transform: translateX(-100%); transition: 0.4s; } @media (min-width: 1490px) { #blog-side-nav { width: 19%; } } @media (max-width: 1300px) { #blog-side-nav { width: 20%; } #blog-side-nav li a { font-size: 15px; } } @media (max-width: 1200px) { #blog-side-nav { width: 200px; } } @media (max-width: 991px) { #blog-side-nav { display: none; } } /* Blog Post Helper Classes */ .post-body .text-center > img { margin: 35px auto 40px; } .blog-img { position: relative; margin: 60px auto 65px; width: var(--ad-width); left: 50%; transform: translateX(-50%); } .post-body ul.dashes { list-style: none; padding: 0 0 0 40px; margin: 0; } .post-body ul.dashes li { position: relative; margin: 25px 0; padding-left: 25px; } .post-body ul.dashes li::before { content: ''; height: 36px; width: 6px; background: var(--green); border-radius: 3px; position: absolute; top: 4px; left: 0; } .post-body .quote { position: relative; margin: 30px 0 35px!important; padding-left: 35px; font-family: var(--cursive); font-size: 1.35em; letter-spacing: .025em; color: var(--primary); line-height: 1.25; } .post-body .quote::before { content: '"'; display: inline; } .post-body .quote::after { content: '"'; display: inline; } .blog-ad { color: var(--dark); position: relative; width: var(--ad-width); left: 50%; transform: translateX(-50%); background: var(--gray); margin: 55px auto; padding: 0 45px; display: flex; align-items: center; font-size: 18px; font-weight: 500; } .blog-ad h3 { font-size: 30px!important; font-weight: bold; margin: 0 0 25px!important; color: inherit; } .blog-ad__content { padding: 80px 15px; } .blog-ad__img { padding-top: 10px; display: flex; flex-direction: column; } .blog-ad__img img { margin: auto auto 0; } .blog-ad--orange { background-color: #fdf0dc!important; } .blog-ad--blue { background-color: #e8f9fc!important; } @media (max-width: 991px) { .blog-ad__content { text-align: center; padding: 60px 15px 50px; } } @media (max-width: 500px) { .blog-ad { padding: 0 15px; } .blog-ad h3 { font-size: 24px!important; } } .blog__container hr { border: 0; height: 2px; width: 100%; opacity: 1; background: var(--RV-Gradient-Dark, linear-gradient(90deg, #00A54F 0%, #167FE1 100%)); } #blog__subscribe { left: 0; transform: none; padding: 45px; border-radius: 20px; background: var(--dark-gradient-2); color: #fff; } #blog__subscribe form { display: flex; position: relative; overflow: hidden; width: 100%; } #blog__subscribe form label { position: absolute; left: -9999px; visibility: hidden; opacity: 0; } #blog__subscribe .hs-form-field { flex: 1 1 auto; } #blog__subscribe input[type="email"] { height: 52px; border: 1px solid var(--border-color)!important; border-right: 0!important; width: 100%; padding: 0 10px; } #blog__subscribe input[type="email"]::-webkit-input-placeholder { text-transform: none; } #blog__subscribe .hs-button { border-radius: 0!important; height: 52px!important; margin: 0; border: 0; font-weight: 500; margin-left: 10px; } #blog__subscribe .hs-button:hover { background-color: var(--primary); } #blog__subscribe .actions { padding: 0; } #blog__subscribe .row { margin: auto; } @media (min-width: 500px) and (max-width: 767px) { #blog__subscribe{ padding: 45px 15px; } #blog__subscribe img { max-width: 70%; margin: 0 auto; } } @media (max-width: 500px) { #blog__subscribe { padding: 45px 5vw; text-align: center; } #blog__subscribe form { flex-direction: column; justify-content: center; } #blog__subscribe input[type="email"] { border-right: 1px solid var(--border-color)!important; margin-bottom: 20px; } } @media (max-width: 400px) { #blog__subscribe .checks { padding-left: 0; } } /* OLD BLOG */ /* Main Template */ .blog-container { width: 100%; padding-top: 100px; } .blog-container .main-panel { } .blog-container .side-panel { float: none; width: unset; } .blog-container .index { display: block; margin: 30px 0; text-transform: uppercase; font-weight: bold; } @media (min-width:992px) { .blog-container { display: flex; justify-content: space-between; } .blog-container .main-panel { flex: 1 1 auto; margin-right: 105px; } .blog-container .side-panel { flex: 0 0 300px; margin-right: auto; } } @media (min-width:992px) and (max-width:1199px) { .blog-container .main-panel { margin-right: 60px; } } @media (max-width:991px) { .blog-container .main-panel { width: 100%; } #blog .heading-main { text-align: center; } #blog .heading-main .back-btn { float: none!important; } } @media (max-width:600px) { #blog .body-container { width: 100%; padding: 50px 15px; } .blog-container .side-panel, .blog-container .index { padding-left: 15px; padding-right: 15px; } } /* Search */ #tipue_search_content { max-width: 100% !important; padding: 0 0 50px!important; } #tipue_search_content { padding: 0!Important; max-width: 100%!Important; font-weight: 400; } #tipue_search_content .tipue_search_content_title { font-size: 24px; font-weight: 400; color: #fff; line-height: 1.15; } #tipue_search_content .tipue_search_content_title ~ .tipue_search_content_title { margin-top: 50px; } #tipue_search_content .tipue_search_content_title a, #tipue_search_content .tipue_search_content_text span { color: #fff; } #tipue_search_content .tipue_search_content_text, #tipue_search_results_count { color: var(--body-text)!important; } #tipue_search_content .tipue_search_content_text span { } #tipue_search_content .tipue_search_content_url a { color: var(--primary)!Important; font-size: 16px!Important; font-weight: 400!Important; } #tipue_search_content .tipue_search_content_text { font-weight: 400 !important; } #tipue_search_content .tipue_search_content_text:last-child { padding-bottom: 100px; } #tipue_search_input { background: var(--gray); padding: 10px; border-radius: 15px 0 0 15px; flex: 1 1 auto; border: 0; font-size: 16px; color: #000; } #tipue_search_input::-webkit-input-placeholder { color: var(--dark); } .tipue_search_icon { color: var(--dark); } .tipue_search_group { display: flex; height: 30px; width: 100%; } .tipue_search_button { color: #fff; background: var(--primary); border: 1px solid var(--primary); border-radius: 0 15px 15px 0; flex: 0 0 37px; padding: 0 5px 0 0; transition: 0.4s; outline: none!important; } .tipue_search_button:hover { background: #fff; color: var(--primary); transition: 0.4s; } ul.pagination { padding: 15px 0; } ul.pagination li { font-weight: 500; padding: 0; height: 35px; width: 35px; line-height: 35px; border-radius: 3px; border: 1px solid var(--primary); text-align: center; } ul.pagination li a { display: block; color: var(--primary)!important; } ul.pagination li:hover, ul.pagination li.active { background: var(--primary); color: #fff; } ul.pagination li:hover a, ul.pagination li.active a { color: #fff!important; } /* Side Panel ============================================================================= */ .blog-container .side-panel section { margin: 0 0 45px; overflow: visible; } .blog-container .side-panel section h4 { font-size: 15px; letter-spacing: 0.1em; font-weight: 500; text-transform: uppercase; padding-bottom: 15px; margin: 0 0 20px; border-bottom: 1px solid #cccccc; } .blog-container .side-panel section ul { list-style: none; padding: 0; margin: 0; } .blog-container .side-panel section a { } .blog-container .side-panel section a:hover { } .blog-container .side-panel section .social a:hover { } .blog-container .side-panel section .social a.d-none { display: inline-block!important; } @media (max-width: 1199px) { .blog-container .side-panel { margin-top: 50px; } } /* Blog Search */ .blog-container .side-panel .tipue_search_group { display: flex; } .blog-container .side-panel .tipue_search_group input { flex: 1 1 auto; background: #fff !important; padding: 10px !important; } .blog-container .side-panel .tipue_search_group button { flex: 0 0 46px; } /* Recent */ .blog-recent-posts { } .blog-recent-posts li { margin-bottom: 25px; } .blog-recent-posts li a { display: flex; justify-content: space-between; } .blog-recent-posts .post-thumb { position: relative; flex: 0 0 127px; height: 85px; overflow: hidden; margin-right: 20px; background: var(--dark); border-radius: 4px;} .blog-recent-posts .post-thumb img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; transition: 0.7s; } .blog-recent-posts .post-thumb .video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #fff; text-align: center; line-height: 85px; font-size: 50px; transition: 0.7s; z-index: 2; background: rgba(0,0,0,.3); } .blog-recent-posts .post-thumb .default { max-height: 60%; width: auto; height: auto; max-width: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.7s; filter: brightness(0) invert(1); } .blog-recent-posts .post-thumb .video-thumbnail { transform: scale(1.2); } .blog-recent-posts .post-details { font-size: 14px; line-height: 1.2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } .blog-recent-posts .post-details .post-title { margin: 0 0 3px; font-weight: 500; letter-spacing: 0.01em; color: var(--body-text); } .blog-recent-posts .post-details .post-date { color: #8f8f8f; font-size: 12px; margin: 0 0 10px; } .blog-recent-posts .post-details:hover .post-title { color: var(--primary); } /* Recent - Hover Effects */ .blog-recent-posts li a:hover .post-thumb img, .blog-recent-posts li a:hover .post-thumb .video { transform: scale(1.1); transition: 0.7s; } .blog-recent-posts li a:hover .post-thumb .video-thumbnail { transform: scale(1.3); transition: 0.7s; } .blog-recent-posts li a:hover .post-thumb img.default { transform: translate(-50%, -50%) scale(1.1); transition: 0.7s; } /* Categories */ .blog-category-list { border-radius: 0 0 20px 20px; } .blog-category-list li { font-size: 15px; display: block; font-weight: 500; padding: 0px 10px; margin: 0 0 5px; } .blog-category-list li::before { content: '- '; } .blog-category-list li a { } /* Tags */ .blog-tag-list li { font-size: 14px; display: inline-block; padding: 8px 10px 7px; line-height: 1; margin-left: 1px; margin-bottom: 5px; border-radius: 3px; background: var(--primary); transition: 0.3s; border-bottom: 2px solid rgba(0,0,0,0.1); } .blog-tag-list li a { color: #fff; } .blog-tag-list li:hover { box-shadow: 1px 1px 5px rgba(0,0,0,0.35); transform: scale(1.01); transition: 0.3s; background: var(--primary); } /* Authors */ .blog-author-list { display: flex; flex-wrap: wrap; text-align: center; margin: 0 -10px} .blog-author-list li { flex: 0 0 80px; padding: 0 10px 15px; } .blog-author-list .author-image { height: 100px; width: 100px; margin: 0 auto 5px; border-radius: 50%; border: 3px solid var(--primary); background: var(--primary); position: relative; overflow: hidden; background-position: center top; background-size: cover; transition: 0.7s; } .blog-author-list .author-image img { position: absolute; top: 0; left: 0; transition: 0.7s; } .blog-author-list .author-name { font-size: 13px; text-transform: uppercase; font-weight: 500; } .blog-author-list li a:hover .author-image { transform: scale(1.025); transition: 0.7s; box-shadow: var(--box-shadow); } @media (max-width: 991px) { .blog-author-list { justify-content: center; } } /* Post ============================================================================= */ .blog-post { border: 0; } .blog-post .post-featured { position: relative; display: block; height: 0; padding-top: 56.25%; overflow: hidden; background: var(--gray); border-radius: 4px; } .blog-post .post-featured img, .blog-post .post-featured iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; transition: 0.7s linear; border-radius: 4px; } .blog-post .post-featured img.default { width: 300px!important; max-width: 70%; height: auto; width: auto; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blog-post .post-featured img:not(.default) { transform: scale(1.01); } .blog-post .post-featured .video-wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .blog-post a.post-featured:hover img:not(.default) { transform: scale(1.03); transition: 0.7s ease; } .blog-post .post-header { padding: 25px 0 20px; border: 0; margin: 0; } .blog-post .post-header .post-title { font-size: 21px; font-weight: 500; margin: 0; padding: 0; border: 0; letter-spacing: -0.01em; text-transform: none; color: #fff; line-height: 1.2; } .blog-post .post-header .post-title a { color: inherit; } .blog-post .post-header .post-title a:hover { color: var(--primary); } .blog-post .post-header h1.post-title { font-size: 34px; color: var(--body-text); font-weight: 600; } .blog-post .post-header .post-date { font-size: 12px; color: var(--body-text); line-height: 1.4; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; margin: 0 0 10px; } .blog-post .post-body { padding: 25px 0px 0; font-size: 18px; margin: 0; line-height: 1.8; letter-spacing: -0.005em; } .blog-post .post-body h2 { font-size: 30px; margin: 40px 0 25px; } .blog-post .post-body a { font-weight: bold; color: var(--secondary); } .blog-post .post-body a:hover { color: var(--primary); } .blog-post .post-footer { padding: 20px 35px 35px; } .blog-post .post-footer h4, .blog-post .post-comments h4, .post-footer-author h4 { font-size: 15px!important; font-weight: 500!important; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 20px; } .blog-post .post-footer-share { text-align: right; } .blog-post .read-more { margin-top: 30px; display: block; text-transform: uppercase; font-size: 14px; font-weight: bold; } /* Post Author */ .post-footer-author { margin: 50px 0 80px; padding-top: 50px; border-top: 1px solid #f1f3f5; } .post-footer-author .author-image { position: relative; height: 80px; width: 80px; overflow: hidden; margin: 0 auto 30px; border-radius: 50%; background-position: center top; background-size: cover; border: 0; border-radius: 50%; } .post-footer-author .author-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; object-position: top; } .post-footer-author .author-details { text-align: center; font-size: 15px; line-height: 1.8; letter-spacing: -.005em; color: var(--body-text); } .post-footer-author .author-details .author-name { font-size: 21px; color: #fff; font-weight: 500; letter-spacing: -0.01em; margin: 10px 0; } .post-footer-author .author-details .author-title { font-size: 14px; color: var(--body-text); line-height: 1.1; text-transform: none; margin: -10px 0 10px; } .post-footer-author .author-details .author-bio { display: none; } .post-footer-author .author-details .author-bio, .author-bio-preview { font-size: 16px; color: var(--body-text); line-height: 1.25; } .post-footer-author .author-details .author-bio > *:last-child { display: inline; } .post-footer-author .author-details .author-bio-toggle { font-size: 13px; display: inline; color: var(--body-text); text-transform: uppercase; } .blog-post .post-comments { padding: 45px 0 10px; } .author-icon { height: 39px; width: 39px; border-radius: 50%; border: 0; background-repeat: no-repeat; background-size: cover; background-position: center top; display: inline-block; vertical-align: middle; margin-right: 3px; } @media (min-width:501px) { .post-footer-author .author-image { float: left; margin: 0 24px 10px 0; } .post-footer-author .author-details { text-align: left; } } /* Post Full Page */ .blog-post--full { } .blog-post--full .post-body img { display: block; margin: 0 auto; } .blog-post--full .post-body, .blog-post--full .post-header, .blog-post--full .post-footer { padding-left: 0; padding-right: 0; } /* Post List ============================================================================= */ .blog-post-list { } .blog-post-list .blog-post { margin-bottom: 30px; } .blog-post-list .post-body { padding: 0 0px 35px; font-size: 18px; color: var(--body-text); line-height: 1.8; letter-spacing: -0.005em; } .blog-post-list .blog-post .post-featured .default svg { position: absolute; top: 50%; left: 50%; max-width: 70%; transform: translate(-50%, -50%); } .blog-post-list .blog-post .post-featured .default #logo-text * { fill: #fff; } /* .blog-post-list .blog-post .post-featured .video-thumbnail { transform: scale(1.34); transition: 0.7s; } */ /* .blog-post-list a:hover img.video-thumbnail { transform: scale(1.45)!important; } */ /* Split Blog Post List */ /* @media (min-width:1199px) { .blog-post-list .blog-post { display: flex; min-height: 285px; } .blog-post-list .post-image { flex: 0 1 40%; min-width: 40%; padding: 0; } .blog-post-list .post-featured { height: 100%; padding: 0; } .blog-post-list .post-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } .blog-post-list .post-body { padding-bottom: 30px; } } */ /* Blog Carousel ============================================================================= */ .blog-carousel { text-align: center; } .blog-carousel .carousel-inner { padding: 40px 0 0; min-height: 150px; margin-bottom: 35px; overflow: visible; } .blog-carousel:has(.features-tabs__nav) .carousel-inner { padding: 0; } .blog-carousel .carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 11px; padding: 0 26vw; } .blog-carousel .carousel-control { color: var(--dark)!important; display: inline-block; position: relative; opacity: 1; font-size: 18px; width: 42px; height: 42px; border-radius: 50%; background: #fff!important; } .blog-carousel .carousel-control:not(:hover,:focus,.carousel-control-next) { opacity: .1; } .blog-carousel__item { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(170deg, #1D1D1D 4.88%, #111 105.98%); color: #fff; background-clip: padding-box; box-sizing: border-box; transition: .8s ease-out; opacity: 1; text-align: left; } .blog-carousel__link { display: block; position: relative; padding-top: 54.57%; height: 0; } .blog-carousel__featured { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .blog-carousel__featured::before { content: 'read more'; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; font-weight: bold; display: flex; align-items: center; justify-content: center; opacity: 0; transition: .5s; } .blog-carousel__featured .cover { height: 100%; width: 100%; } .blog-carousel__link:hover .blog-carousel__featured::before { opacity: 1; } .blog-carousel__logo { width: 60%; } .blog-carousel__title { color: #fff; font-size: var(--fs-20); text-align: center; margin-top: 40px; } @media (min-width: 992px) { .blog-carousel .carousel-inner { display: flex; transform: translateX(25vw); } } @media (max-width: 991px) { .blog-carousel { padding-left: 5vw; padding-right: 5vw; } } /* ========================================================================== CTA Banner ============================================================================= */ .cta { padding: 70px 0 145px; font-size: 18px; overflow: hidden; } .cta-container { padding: 125px 5.6vw; display: flex; position: relative; } .cta-heading { font-size: 42px; margin: 0 0 10px; } .cta-sub { font-size: 18px; font-weight: bold; margin: 10px 0 15px; } .cta-list { font-size: 17px; margin: 15px 0 30px; } .cta-list li { margin: 15px 0; } .cta__img { position: absolute; top: 47%; transform: translateY(-50%); right: -5vw; width: 991px; max-width: 60vw; } .cta .btn { margin-top: 5px; } @media (min-width: 992px) { .cta-content { flex: 0 1 55.5%; } } @media (min-width: 1201px) and (max-width: 1400px) { .cta__img { top: 55%; } } @media (min-width: 991px) and (max-width: 1200px) { .cta__img { top: 60%; } } @media (max-width: 991px) { .cta { text-align: center; } .cta-heading { font-size: 36px; } .cta__img { display: none; } } @media (max-width: 500px) { .cta { padding: 30px 0 65px; } .cta-container { padding: 80px 5.6vw; } .cta-heading { font-size: 32px; } } /* ========================================================================== Features Overview Page ============================================================================= */ .features__hero { padding-top: calc(var(--header-height) + 100px); height: auto!important; } .features__hero .container-fluid { width: 1400px; max-width: 100%; } .features__hero .row { --bs-gutter-x: 123px; --bs-gutter-y: 50px; } .features__hero-content { } .features__hero-heading { margin: 0 0 36px; } .features__hero-sub { margin: 0 0 35px; font-size: var(--display-xs); } .features__hero-img { margin-top: 50px; } .features__hero .text-center .features__hero-content { padding-bottom: 50px; } .features__hero .checklist { margin: 0 0 50px; } .features__hero .checks { font-size: 20px; } @media (max-width: 991px) { .features__hero .checklist { display: block; } .features__hero .text-center .features__hero-content { padding: 80px 0 50px; } } @media (max-width: 700px) { .features__hero { padding-top: calc(var(--header-height) + 50px) }; } @media (max-width: 500px) { .features__hero-content .checks { font-size: 17px!important; padding-left: 0; } } /* */ #features-details { position: relative; } #features-details .display-1 { margin-bottom: 65px; } .features-details__bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-30%) rotateX(150.603deg); z-index: -1; } .features-tabs__nav { justify-content: center; gap: 10px; margin: 40px 0; } .features-tabs__nav { justify-content: space-around; align-items: center; margin-bottom: 25px; min-height: 50px; } .features-tabs__nav .nav-link { position: relative; color: #F1F1F1; font-feature-settings: 'liga' off, 'clig' off; font-family: var(--primary-font); font-size: 15px; font-style: normal; font-weight: 600; line-height: 1.5; letter-spacing: 0.0375em; transition: .5s; transform-origin: center; } .features-tabs__nav .nav-link::after { content: ''; position: absolute; opacity: 0; transform: scaleX(0); bottom: 0; left: 10px; right: 10px; height: 5px; border-radius: 30px; background: linear-gradient(90deg, #00A54F 0%, #167FE1 100%); transition: .5s; } .features-tabs__nav .nav-link:hover::after, .features-tabs__nav .nav-link.active::after { opacity: 1; transform: scaleX(1); } .features-tabs__nav .nav-link.active { font-size: var(--fs-24); } .features__tabs .tab-pane { border-radius: 20px; background: rgba(255, 255, 255, 0.95); padding: 86px 144px 95px 60px; } .features__tabs .tab-pane .row { align-items: center; --bs-gutter-x: 70px; --bs-gutter-y: 70px; } .features__tabs .tab-pane .col-lg:has(img) { text-align: center; } .features__tabs .tab-pane .col-lg:has(.features-tabs__content) { flex: 0 1 388px; } .features-tabs__content { color: var(--dark); width: 388px; max-width: 100%; } .features-tabs__content .checks { margin-bottom: 50px; } .features-tabs__content .checks li { margin-bottom: 45px; } .features-tabs__header { color: var(--dark); font-size: var(--fs-45); font-style: normal; font-weight: 700; line-height: 1.1; margin: 0 0 50px; } @media (min-width: 992px) { .features-tabs__nav { flex-wrap: nowrap; } } @media (max-width: 1200px) { .features-tabs__nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .features-tabs__nav li { margin: 0 auto; } } @media (max-width: 991px) { .features__tabs .tab-pane { padding: 50px; } .features-tabs__nav { gap: 10px; } .features-tabs__content { text-align: center; margin: 0 auto; } .features__tabs .tab-pane .row { justify-content: center; } } @media (max-width: 500px) { .features__tabs .tab-pane { padding: 35px; } } .tab-navigation { display: flex; gap: 20px; justify-content: center; margin-top: 50px; } .tab-navigation .btn[disabled] { display: none; color: var(--primary)!important; opacity: .5; } /* ========================================================================== Feature Details Pages ============================================================================= */ /* Feature Title */ .feature-title { position: relative; margin: var(--header-height) auto 0; padding: 90px var(--clamp-3); width: calc(1920px + var(--clamp-3) * 2); max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px 5vw; z-index: 1; } .feature-title::before { content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 100vw; transform: translateX(-50%); background: var(--RV-Gradient-Dark); z-index: -1; } .feature-title__icon { --icon-size: 89px; --icon-img-size: calc(var(--icon-size) * .449); height: var(--icon-size); width: var(--icon-size); min-width: var(--icon-size); border-radius: 50%; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; } .feature-title__icon svg { width: var(--icon-img-size); } .feature-title__heading { color: var(--dark); font-size: var(--fs-60); font-style: normal; font-weight: 700; line-height: 1.1; margin: 0; display: flex; align-items: center; gap: 20px 30px; } .feature-title__sub { color: #141414; font-family: var(--mono-font); font-size: var(--fs-30); font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0.0375em; margin: 0; } @media (min-width: 1201px) { .feature-title__heading { white-space: nowrap; } .feature-title__sub { text-align: right; } } @media (max-width: 1200px) { .feature-title { flex-wrap: wrap; } } @media (max-width: 991px) { .feature-title { padding: 50px var(--clamp-3); } } @media (max-width: 500px) { .feature-title, .feature-title__heading { text-align: center; justify-content: center; flex-wrap: wrap; } .feature-title__icon { --icon-size: 50px; } } /* Feature Welcome */ .feature-welcome { padding: 80px 0; position: relative; text-align: center; } .feature-welcome__graphic { position: absolute; left: 0; bottom: 0; right: 0; transform: translateY(55%); z-index: -1; } .feature-welcome__graphic img { width: 100%; } .feature-welcome__row { --bs-gutter-y: 55px; --bs-gutter-x: 55px; margin-bottom: 100px; } .feature-welcome__img { margin-bottom: 35px; } .feature-welcome .check { text-align: left; color: #fff; line-height: 1.5; letter-spacing: 0.04em; width: 322px; max-width: calc(100% - 30px); margin-left: auto; margin-right: auto; } .feature-welcome .check:last-child { margin-bottom: 0; } .checks-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(322px, 1fr)); gap: 19px 88px; color: #fff; width: 1150px; max-width: 100%; margin: 0 auto; } .checks-row .check { margin: 0; } @media (min-width: 992px) { .feature-welcome { padding: 149px 0; } .feature-welcome__img { position: relative; padding-top: 79.66%; height: 0; width: 100%; } .feature-welcome__img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .feature-welcome__img--align-top img { top: 0; transform: translate(-50%,0); } } /* Feature Details */ .feature-details { width: calc(1392px + 5vw); max-width: 100%; margin: 0 auto; padding-left: 5vw; padding-right: 5vw; display: flex; flex-direction: column; gap: 300px; } .feature-details__row { --bs-gutter-y: 55px; --bs-gutter-x: 150px; align-items: center; position: relative; justify-content: center; } .feature-details__row [class^="col-"]:has(img) { text-align: center; } .feature-details .checks { color: #fff; margin: 49px 0 0; } .feature-details .checks li { margin: 15px 0; } .feature-details .checks + .accordion { margin-top: 34px; } @media (min-width: 992px) { .feature-details__row:not(.flex-row-reverse) ~ .feature-details__row:nth-child(even) { flex-direction: row-reverse; } .feature-details__row.flex-row-reverse ~ .feature-details__row:nth-child(odd) { flex-direction: row-reverse; } } @media (max-width: 1200px) { .feature-details { gap: 150px; } .feature-details__row { --bs-gutter-x: 10vw; } } @media (max-width: 991px) { .feature-details { text-align: center; padding-left: 10vw; padding-right: 10vw; } .feature-details__row [class^="col-"]:has(img) { text-align: center; order: 2; } .feature-details__row .dots { display: inline-block; } } /* Feature Package */ .feature-package { text-align: center; position: relative; padding-left: 5vw; padding-right: 5vw; } .feature-package__bg { position: absolute; right: 0; bottom: 0; transform: translateY(50%); z-index: -1; } @media (max-width: 600px) { .feature-package__bg { opacity: .5; transform: translateY(20%); } } /* Feature Solutions */ .feature-solutions header { padding-left: 5vw; padding-right: 5vw; margin-bottom: 94px; } @media (min-width: 992px) { .feature-solutions header { padding-left: 10vw; } } /* Accounting */ .accounting-diagnostics__bg { position: absolute; width: 100vw; left: 50%; top: 150px; bottom: -150px; transform: translateX(-50%); max-width: unset; z-index: -1; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; } /* Marketing */ .marketing-distribution { position: relative; text-align: center; } .marketing-distribution__bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; } .marketing-distribution__logos { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 0; } .marketing-distribution__img { margin: 100px auto; position: relative; z-index: 1; } .marketing-distribution .check { text-align: left; } /* Websites */ @media (min-width: 992px) { .websites .feature-title__sub { flex: 0 1 410px; } } /* Innovations */ .innovations-hero { position: relative; } .innovations-hero__bg { position: absolute; top: 0; left: 0; z-index: -1; } .innovations-hero__graphic { margin: 125px 0; position: relative; display: flex; gap: 50px; align-items: center; justify-content: center; } .innovations-hero__icons { display: flex; gap: 4vw; justify-content: space-around; } .innovations-hero__icons--left .circle-icon:nth-child(1) { margin-top: 50%; } .innovations-hero__icons--left .circle-icon:nth-child(2) { margin-top: 15%; } .innovations-hero__icons--left .circle-icon:nth-child(3) { margin-top: 70%; } .innovations-hero__icons--right .circle-icon:nth-child(1) { margin-top: 45%; } .innovations-hero__icons--right .circle-icon:nth-child(2) { margin-top: 10%; } .innovations-hero__icons--right .circle-icon:nth-child(3) { margin-top: 55%; } .circle-icon { --icon-size: 123px; --icon-img-size: calc(var(--icon-size) * .449); height: var(--icon-size); width: var(--icon-size); font-size: var(--icon-img-size); border-radius: 50%; background: radial-gradient(702.82% 702.82% at 52.88% 124.29%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.08) 18.24%, #FFF 100%); color: #7E8080; display: flex; align-items: center; justify-content: center; } .circle-icon img, .circle-icon svg { width: var(--icon-img-size); } .feature-num { text-align: center; position: relative; } .feature-num__bg { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); z-index: -1; } .feature-num .countup { font-size: 150px; font-family: var(--secondary-font); line-height: 1; display: block; background: linear-gradient(180deg, #FFF 0%, #999 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* Dev Team */ .team { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 307px)); gap: 32px; padding: 0 5vw; justify-content: center; } .team__item { text-align: center; } .team__photo { position: relative; padding-top: 127%; height: 0; border-radius: 20px; overflow: hidden; background: #f1f1f1; } .team__photo img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .team__name { color: #FFF; font-family: var(--mono-font); font-size: 20px; margin: 24px 0 0; font-style: normal; font-weight: 400; line-height: 1.1; } .team__title { color: var(--body-text); font-family: var(--mono-font); font-size: 16px; font-style: normal; margin: 8px 0 0; font-weight: 100; line-height: 1.1;} .carousel[id*='team'] { --shown-items: 5; } .carousel[id*='team'] .carousel-item { background-color: #111; background-image: } .display-horizontal-lines + .carousel .carousel-inner { padding: 0; } /* Cards */ .card { --card-accent-color: var(--primary); --bs-border-radius: 30px; --bs-border-width: 0px; --bs-card-color: var(--body-text); --bs-card-cap-color: var(--dark); background: linear-gradient(170deg, #262626 4.88%, #111 105.98%); --bs-card-cap-bg: #fff; --bs-card-cap-padding-y: 30px; --bs-card-cap-padding-x: 30px; height: 100%; } .card:nth-of-type(even), .card--secondary { --card-accent-color: var(--secondary); } .card-header { text-align: center; min-height: 140px; padding-bottom: 37px; display: flex; align-items: center; justify-content: center; } .card-header:has(.card-title__logo) { padding-top: 15px; } .card-title { font-size: var(--fs-45); display: flex; gap: 9px; margin: auto 0 0; align-items: center; justify-content: center; font-family: var(--primary-font); font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0.0562em; } .card-title__icon { height: 35px; width: 35px; margin-top: 3px; } .card-title__logo, .card-title__logo svg { width: 285px; max-width: 100%; } .card-title__logo:has(svg) { width: 100%; height: auto; } .card-title__logo--transunion { height: 80px; } .card-body { padding: 55px 55px 100px; display: flex; flex-direction: column; } .card-body h4:not([class]) { color: var(--card-accent-color); font-size: var(--fs-22); font-weight: 600; line-height: 1; letter-spacing: 0.0275em; margin: 0; } .card-body .btn-list { margin-top: auto; padding-top: 45px; justify-content: center; } .card-price-grid { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); text-align: center; } .card-price { font-size: var(--fs-30); color: var(--card-accent-color); font-weight: 700; line-height: 1; letter-spacing: 0.0375em; flex: 1 1 0; } .card-price span:not([data-bind]), .card-price-range__name, .card-price-info, .fee-remitted { color: #fff; font-size: var(--fs-16); font-weight: 600; letter-spacing: 0.02em; display: block; line-height: 1; } .card-price span:not([data-bind]) { margin-top: 6px; } .card-price small { display: block; color: #F1F1F1; font-size: 14px; font-style: normal; font-weight: 300; line-height: 1.41; letter-spacing: 0.0175em; } .card-price-range { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; width: 320px; max-width: 100%; margin: 0 auto; } .card-price-range::before { content: '+'; color: #FFF; font-size: var(--fs-30); font-weight: 700; letter-spacing: 0.0375em; } .card-price-range .card-price:first-child { order: -1; } .card-price-range__name { flex: 1 1 100%; border-top: 1px solid #D9D9D9; padding-top: 19px; position: relative; } .card-price-range__name::before, .card-price-range__name::after { content: ''; height: 16px; width: 1px; background: #D9D9D9; position: absolute; top: 0; left: 0; transform: translateY(-100%); } .card-price-range__name::after { right: 0; left: auto; } .card-price-info { margin: 51px auto 68px; width: 366px; max-width: 100%; } .card-links { list-style: none; margin: 30px 0 50px; padding: 0; color: #fff; font-weight: 500; letter-spacing: 0.02em; } .card-links li { margin: .5em 0; } .card-links a, .card-disclaimer a { text-decoration-line: underline; color: inherit; } .card-links a:hover, .card-disclaimer a:hover { color: var(--card-accent-color); } .card-disclaimer { color: var(--body-text); text-align: center; font-family: var(--font-secondary); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; } /* Screening ============================================================================= */ #screening-packages { position: relative; } .screening-packages__graphic { position: absolute; transform: rotateX(170.464deg); left: -10%; top: -20%; z-index: -1; } #screening-packages h2 { margin-bottom: 70px; } #screening-packages .checklist { gap: 0 7vw; padding-left: calc(7vw - 15px); } #screening-packages .checks { margin: 0; } #screening-packages .checks li:first-child { margin-top: 0; } @media (max-width: 500px) { #screening-packages .checklist { width: 75%; margin: 0 auto; } } /* Screening Price Calculator */ #calculator { width: 1289px; max-width: 100%; margin: 0 auto; } #calculator .card-body { padding-bottom: 75px; } #calculator .card-price { color: #fff; } .calculator-input-group { display: flex; justify-content: space-between; align-items: center; gap: 35px; } .calculator-input-group h3 { color: #FFF; font-size: var(--fs-22); font-style: normal; font-weight: 500; line-height: 1; letter-spacing: 0.0275em; margin: 0; } #calculator-input { width: 885px; max-width: 100%; margin: 0 auto 84px; } #calculator-input .form-checks { display: flex; gap: 47px; } #calculator-input #app-fee-value { color: #FFF; text-align: center; font-size: 25px; font-weight: 500; line-height: 1; letter-spacing: 0.0312em; } #calculator-input input { margin-right: 20px; } #calculator-input label { font-size: 18px; font-weight: bold; padding-left: 10px; } #calculator-input .form-check { position: relative; padding-left: 35px; } #calculator-input .form-check-label { color: #FFF; font-size: var(--fs-18); font-style: normal; font-weight: 500; line-height: 1; letter-spacing: 0.0225em; } #calculator-input input[type="radio"] { opacity: 0; position: fixed; width: 0; } #calculator-input .form-check label::before { content: ''; position: absolute; left: 0; top: 0; height: 28px; width: 28px; background: transparent; border-radius: 4px; border: 1px solid #FFF; display: block; transition: 0.3s; } #calculator-input .form-check label::after { content: "\f00c"; color: var(--green); font-size: 20px; position: absolute; left: 5px; top: 4px; opacity: 0; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; line-height: 1; transition: 0.3s; } #calculator-input .form-check input:hover + label::after { opacity: .5; transition: 0.3s; } #calculator-input .form-check input:checked + label::after { opacity: 1; } #calculator-range { margin-top: 35px; } #calculator-range small { font-size: 18px; font-weight: bold; } #calculator input[type=range] { --track-bg: #D9D9D9; -webkit-appearance: none; margin: 18px 0; width: 100%; } #calculator input[type=range]:focus { outline: none; } #calculator input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: var(--track-bg); border-radius: 0; border: 0; } #calculator input[type=range]::-webkit-slider-thumb { height: 26px; width: 26px; border-radius: 50%; background: var(--green)!important; cursor: pointer; -webkit-appearance: none; transform: translateY(-50%); top: 50%; position: relative; } #calculator input[type=range]:focus::-webkit-slider-runnable-track { background: var(--track-bg); } #calculator input[type=range]::-moz-range-track { width: 100%; height: 4px; cursor: pointer; background: var(--track-bg); border-radius: 1.3px; border: 0; } #calculator input[type=range]::-moz-range-thumb { box-shadow: 0; border: 0; height: 26px; width: 26px; border-radius: 50%; background: var(--green); cursor: pointer; } #calculator input[type=range]::-ms-track { width: 100%; height: 4px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } #calculator input[type=range]::-ms-fill-lower { background: var(--track-bg); border: 0; border-radius: 0; box-shadow: 0; } #calculator input[type=range]::-ms-fill-upper { background: var(--track-bg); border: 0; border-radius: 0; box-shadow: 0; } #calculator input[type=range]::-ms-thumb { box-shadow: 0; border: 0; height: 26px; width: 26px; border-radius: 50%; background: var(--green); cursor: pointer; } #calculator input[type=range]:focus::-ms-fill-lower { background: var(--track-bg); } #calculator input[type=range]:focus::-ms-fill-upper { background: var(--track-bg); } #calculator .custom-range { flex: 0 0 290px; } #calculator-results .fee-remitted { margin: 70px 0 20px; display: flex; flex-wrap: wrap; gap: 19px; justify-content: center; align-items: center; } #calculator-results .fee-remitted__amount { color: var(--card-accent-color); font-size: var(--fs-40); font-weight: 600; line-height: 1; letter-spacing: 0.05em; } .add-money::before { content: '$'; } /* Onboarding ============================================================================= */ /* Websites ============================================================================= */ .website-pricing header { margin-bottom: 75px; } .website-pricing .card { --card-accent-color: #fff; text-align: center; } .website-pricing .card-header { padding-bottom: 43px; } .website-pricing .card-body { padding: 55px 45px 74px; } .website-pricing__slogan { text-align: center; width: 378px; max-width: 100%; margin: 0 auto; font-size: 16px; font-weight: 500; line-height: 1.21em; letter-spacing: 0.02em; } .website-pricing__add-ons { color: #fff; padding-top: 21px; margin: auto 0 49px; text-align: center; font-family: var(--mono-font); font-size: 16px; font-style: normal; font-weight: 300; line-height: 2; letter-spacing: 0.02em; } .website-pricing__row { --bs-gutter-y: 55px; --bs-gutter-x: 55px; } .website-pricing ul { color: #FFF; text-align: center; font-size: 16px; font-weight: 300; line-height: 1; letter-spacing: 0.02em; margin: 10px 0 0; } .website-pricing li { margin: 1em 0; } .price-discount { color: #F1F1F1; font-size: 16px; font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0.02em; width: 397px; max-width: 100%; margin: 54px auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 30px; } .price-discount__text { text-align: right; min-height: var(--fs-30); display: flex; align-items: center; white-space: nowrap; justify-content: center; } .price-discount__prices { display: flex; align-items: flex-start; gap: 25px 20px; flex: 1 1 280px; } .price-discount__price, .circled-num { position: relative; color: #FFF; display: block; font-size: var(--fs-30); font-weight: 700; line-height: 1; letter-spacing: 0.0399em; flex: 1 1 50%; } .price-discount__price > span { font-size: .66em; } .price-discount__price::after, .circled-num::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-position: center center; background-repeat: no-repeat; background-size: contain; } .price-discount__price--orginal::after { background-image: url('/images/price-original.svg'); height: 40px; width: 63px; } .price-discount__price--discount::after, .circled-num::after { background-image: url('/images/price-discount.svg?v2'); height: 69px; min-width: 134px; background-size: 100% 69px; } .rentvine-discount { flex: 1 1 50%; } .rentvine-discount small { display: block; margin-top: 36px; text-align: center; font-family: var(--mono-font); font-size: 16px; font-style: normal; font-weight: 300; line-height: 1; letter-spacing: 0.02em; min-width: 150px; } .price-discount:has(.btn) { width: 561px; } .price-discount:has(.btn) .price-discount__text { min-width: 150px; } @media (min-width: 501px) and (max-width: 1530px){ .websites .feature-title { flex-wrap: wrap; } .websites .feature-title__sub { flex: 1 1 100%; text-align: left; } } @media (min-width: 992px) and (max-width: 1200px){ .website-pricing .card-title { font-size: 30px; } .website-pricing .website-pricing__row { --bs-gutter-y: 35px; --bs-gutter-x: 35px; } } /* #Pricing ============================================================================= */ .pricing-hero { padding-bottom: 40vw; } .pricing-hero__bg img { width: 100%; } .pricing .card-title__logo { width: 265px; } .pricing .card-body { padding: 50px 65px 60px; font-size: 18px; line-height: 118%; letter-spacing: 0.36px; font-family: var(--primary-font); color: #fff; } .pricing .card-body .checks { display: flex; flex-direction: column; gap: 19px; } .pricing .card-body .checks, .pricing .card-body .checks li { margin: 0; } @media (min-width: 600px) { #pricing-compare [class*="col-"]{ width: 515px!important; } #pricing-demo { margin-top: -9vw; } } /* ========================================================================== Integrations Page ============================================================================= */ .integrations-hero, section:has(.bg-left), section:has(.bg-right), section:has(.bg-bottom) { position: relative; } .integrations-hero__bg, .bg-left { position: absolute; top: 0; left: 0; transform: translate(-35%,0) rotateX(170.464deg); z-index: -1; } .integrations-hero .carousel { margin-top: 120px; } .bg-right { position: absolute; top: 50%; right: 0; transform: translate(-40%,-50%) rotateX(-170.464deg); z-index: -1; } .bg-bottom { position: absolute; bottom: 0; right: 0; left: 0; z-index: -1; } /* ========================================================================== Prorated Rent Page ============================================================================= */ .prorated-rent-hero { position: relative; } .prorated-rent-hero header { margin-bottom: 30px; } .prorated-rent-hero__bg, .bg-right { position: absolute; top: 50%; right: 0; transform: translate(40%,-50%) rotateY(-180deg); z-index: -1; } /* Prorate Calculator */ #prorate-calculator { position: relative; } /* Prorate Form */ #prorate-form { display: flex; flex-wrap: wrap; gap: 11px; width: 937px; max-width: 100%; margin: 0 auto; } #prorate-form .form-container__heading { display: none; margin: 0 0 10px; font-size: 24px; font-weight: bold; } #prorate-form .form-group { margin-bottom: 0; flex: 1 1 200px; position: relative; } #prorate-form .form-control, #prorate-form .form-select { padding-left: 11px; padding-right: 11px; } #prorate-form label { position: absolute; top: -9999px; visibility: hidden; opacity: 0; } #prorate-form input, #prorate-form textarea, #prorate-form select { color: var(--dark); width: 100%; text-transform: none; border: 0; font-size: 16px; border-radius: 0; height: 40px; background: #fff; } #prorate-form select:invalid, #prorate-form ::-webkit-input-placeholder { color: var(--dark); } /* Prorate Result */ #prorate-result { display: none; font-size: 16px; flex-wrap: wrap; justify-content: center; gap: 10px; width: 400px; max-width: 100%; margin: auto; text-align: center; line-height: 1.25em; padding: 35px 0 0; } #prorate-result p { font-size: 16px; } .prorate-results__heading { display: flex; gap: 15px; width: 100%; justify-content: center; align-items: center; color: #F1F1F1; font-family: var(--primary-font); font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: 0.32px; } .prorate-results__heading .circled-num { flex: 0 1 auto; padding: 0 15px; height: 69px; display: flex; align-items: center; justify-content: center; } .prorate-results__heading .circled-num::after { width: 100%; } .prorate-results__row { display: flex; width: 100%; text-align: left; gap: 0 4px; border-bottom: 1px solid #464646; } .prorate-results__row br { display: none; } .prorate-results__row b { margin-left: auto; } .prorate-results__action { text-align: center; margin-top: 15px; } /* Prorate Embed */ #prorate-embed { padding: 281px 0 100px; } #prorate-embed h3 { font-size: 30px; font-weight: bold; margin: 0 0 40px; } #prorate-embed h4 { font-size: 18px; margin: 0 0 30px; } #embedCode { border: 1px solid #fff; color: #fff; width: 1034px; max-width: 100%; padding: 50px 5vw; font-size: 16px; margin: 0 auto 50px; resize: none; height: auto; font-style: italic; background: transparent; line-height: 1.25; } @media (max-width: 500px) { #prorate-embed { padding: 30px 0 50px; } #embedCode { padding: 35px 30px; } } /* Prorate Plugin */ body.plugin { background: transparent; } body.plugin *:not(:has(#btnProrate, #newCalc), #prorate-calculator *) { display: none; } /* body.plugin *:not(:has(#btnProrate, #newCalc)):not(#prorate-calculator *) { display: none; } */ #prorate.plugin .form-container__heading { display: block; } #prorate.plugin, #prorate.plugin .container { padding: 0; } #prorate.plugin #prorate-calculator, #prorate.plugin #prorate-result { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } #prorate.plugin #prorate-form { height: 100%; box-shadow: none; gap: 15px; } #prorate.plugin .form-group { flex: 1 1 100%; } #prorate.plugin .form-control, #prorate.plugin .form-select { height: 55px; font-size: 18px; } #prorate.plugin #btnProrate { margin-top: 12px; } #prorate.plugin #prorate-result { background: inherit; padding: 15px 0; } /* Plugin Loading Screen */ .prorate__loading-screen { background: #111; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; -webkit-animation-duration: 1.50s; animation-duration: 1.50s; animation-delay: 1.50s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeOut; animation-name: fadeOut; } .prorate__loading-screen svg { width: 100px; -webkit-animation-duration: 1.50s; animation-duration: 1.50s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: pulse; animation-name: pulse; } .prorate__loading-screen::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 50px; background: var(--green); } body.plugin .prorate__loading-screen { } /* calendar input */ input.calendar { cursor:pointer; background-image:url('/images/calendar-date.svg')!important; background-repeat:no-repeat!important; background-position:right 14px center!important; } /* jcalendar */ #jcalendar { display:none; position:absolute; top:0px; bottom:0px; left:0px; right:0px; z-index:9997; color: #363636; } #jcalendar .mask { position:absolute; top:0px; bottom:0px; left:0px; right:0px; z-index:9998; background:#000; opacity:0.5; display: none; } #jcalendar .container { position:absolute; width:300px; left:50%; margin-left:-150px; height:auto; top:50%; margin-top:-130px; padding:10px; text-align:center; background:#fff; z-index:9999; -webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.35); box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.35); } #jcalendar table { width: 100%; } #jcalendar table tr td { text-align:center; padding: 0 5px 5px; vertical-align: baseline; } #jcalendar table td.label { color: #363636; letter-spacing: 0.1em; font-size: 15px; } #jcalendar .calendar { border-collapse:collapse; } #jcalendar .calendar, #jcalendar .calendar td { border:solid 1px #888; background:#fff; } #jcalendar .calendar .headings td { background:#eee; font-weight:bold; } #jcalendar .prev span, #jcalendar .next span { display:inline-block; width:30px; font-size: 20px; cursor:pointer; text-align:center; } #jcalendar .calendar tr td { height:30px; line-height:30px; width:14.25%; padding:0; vertical-align:middle; border-radius:0; display:table-cell; } #jcalendar .calendar .day { cursor:pointer; -webkit-transition:background-color 0.2s ease; -o-transition:background-color 0.2s ease; transition:background-color 0.2s ease; } #jcalendar .calendar .day:hover, #jcalendar .calendar .disabled { font-weight:bold; background:#eee; } #jcalendar .calendar .day.active { font-weight:bold; color:red; } /* ========================================================================== Careers Page ============================================================================= */ .core-values dl { position: relative; text-align: left; width: 525px; padding-left: 80px; max-width: calc(100% - 10vw); margin: 0 auto; } .core-values dt { color: #fff; margin: 56px 0 0; font-feature-settings: 'liga' off, 'clig' off; font-family: var(--primary-font); font-size: var(--fs-24); font-weight: 600; line-height: 150%; text-transform: capitalize; } .core-values__letter { content: attr(letter); font-size: 56px; font-weight: 800; position: absolute; left: 0; padding: 9px 0 0 0; } .core-values dd { color: #B1B1B1; font-feature-settings: 'liga' off, 'clig' off; font-family: var(--secondary-font); font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: 0.32px; } .scrolling-blocks { list-style: none; margin: 0; padding: 32px; display: flex; align-items: center; gap: 32px; overflow: scroll; } .scrolling-blocks li { padding: 40px 70px; color: #fff; font-family: var(--mono-font); font-size: var(--fs-30); font-style: normal; font-weight: 300; line-height: 110%; letter-spacing: 0.6px; border-radius: 20px; background: linear-gradient(170deg, #262626 4.88%, #111 105.98%); white-space: nowrap; } /* ========================================================================== About Page ============================================================================= */ .timeline__tabs .tab-content { background: #fff; border-radius: 20px; padding: 68px 5vw 40px; } .timeline__header { color: var(--dark); margin: 0 0 25px; text-align: center; font-family: var(--mono-font); font-size: var(--fs-40); font-style: normal; font-weight: 300; line-height: 110%; } .timeline__list { list-style: none; padding: 0; margin: 0; text-align: center; font-family: var(--secondary-font); font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 0.64px; } .timeline__list li { padding: 25px; color: var(--dark); } .timeline__list li:not(:last-child) { border-bottom: 1px solid #000; } /* Placeholder Photo */ /* .team__photo img[alt]:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-image: url('/images/team/placeholder.jpg'); background-size: cover; background-position: center; filter: grayscale(1) brightness(1.4); } */ .team__photo img.no-image { filter: grayscale(1) brightness(1.4); } /* ========================================================================== FAQ Page ============================================================================= */ .num-box { text-align: center; padding: 50px 20px 60px; border-radius: 20px; height: 100%; font-size: 17px; background: var(--dark-gradient-3); } .num-box__num { font-size: var(--fs-40); font-weight: bold; color: var(--green); line-height: 1; margin: 0 0 25px; } .num-box__title { font-size: var(--fs-20); letter-spacing: .01em; font-weight: bold; margin: 0 0 10px; } .num-box .btn { margin-top: 5px; } /* ========================================================================== VirtuallyinCredible Page ============================================================================= */ /* hero */ .virtuallyincredible__hero { padding-bottom: 120px; } .virtuallyincredible__hero-header { padding: 100px 0 30px; } .virtuallyincredible__logo { width: 277px; max-width: 100%; margin: 0 0 20px; } .virtuallyincredible__logo ~ h3 { font-weight: bold; margin: 0 0 10px; } .virtuallyincredible__logo ~ h4 { font-weight: bold; margin: 0 0 30px; } @media (min-width: 992px) { .virtuallyincredible__hero-heading { font-size: 60px; } } @media (max-width: 991px) { .virtuallyincredible__hero { text-align: center; } } /* Welcome */ .virtuallyincredible__welcome { font-size: 17px; } .virtuallyincredible__welcome-banner { padding: 45px 15px; font-size: 32px; font-weight: bold; margin: 0; } .virtuallyincredible__welcome-content { padding: 90px 15px; } .virtuallyincredible__welcome ol { text-align: center; list-style: none; margin: 0 0 70px; padding: 0; display: flex; justify-content: space-around; } .virtuallyincredible__welcome li { font-size: var(--display-xxs); font-weight: bold; counter-increment: item-counter; padding: 20px 15px; } .virtuallyincredible__welcome li::before { content: counter(item-counter); display: block; height: 60px; width: 60px; line-height: 60px; margin: 0 auto 15px; text-align: center; color: #fff; font-size: 24px; background: var(--green-md); border-radius: 50%; } @media (max-width: 767px) { .virtuallyincredible__welcome ol { flex-wrap: wrap; } .virtuallyincredible__welcome { text-align: center; } } /* CTA */ .virtuallyincredible__cta .cta-content { flex: 0 1 545px; max-width: 50%; } .virtuallyincredible__cta .cta__img { top: auto; bottom: 100px; transform: translateY(1.5vw); right: 30px; width: 815px; max-width: 50vw; } @media (max-width: 991px) { .virtuallyincredible__cta .cta-content { flex: 1 1 100%; max-width: 100%; } .virtuallyincredible__cta ul { text-align: left; display: inline-block; } } /* Help */ .virtuallyincredible__help { padding: 0 0 120px; } .virtuallyincredible__help header { margin-bottom: 40px; } .virtuallyincredible__help .checklist { margin: 0 0 25px; } .virtuallyincredible__help .checks { padding-left: 0; padding-right: 35px; font-weight: bold; font-size: var(--display-xxs); } .virtuallyincredible__help .checks li { margin: 0 0 15px; } .virtuallyincredible__help .checks li::before { color: var(--green-md); font-weight: 400; } @media (max-width: 991px) { .virtuallyincredible__help { text-align: center; } .virtuallyincredible__help .virtuallyincredible__logo-lg { margin-bottom: 20px; max-width: 80%; } } @media (max-width: 539px) { .virtuallyincredible__help .checklist { display: inline-block; text-align: center; } .virtuallyincredible__help .checks { padding: 0; } .virtuallyincredible__help .btn { display: flex; width: 234px; max-width: 100%; margin: 0 auto; } } /* Calls */ .virtuallyincredible__calls { padding: 100px 0; font-size: 17px; } .virtuallyincredible__calls header { margin-bottom: 50px; font-size: var(--display-xxs); font-weight: bold; line-height: 1.25; } .virtuallyincredible__calls u { text-decoration-color: #cbd0d3; } .numbers-left { list-style: none; margin: 0; padding: 0; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-around; } .numbers-left__title { font-size: var(--display-xxs); font-weight: bold; margin: 0 0 20px; } .numbers-left ul { list-style: disc; margin: 0; padding-left: 20px; text-align: left; display: inline-block; } .numbers-left p { margin: 0; } .numbers-left > li { counter-increment: item-counter; position: relative; padding-top: 7px; margin-bottom: 50px; flex: 0 1 375px; width: 375px; max-width: 100%; } .numbers-left > li::before { content: counter(item-counter); display: block; height: 42px; width: 42px; line-height: 42px; margin: 0 auto 15px; text-align: center; font-weight: 600; color: #fff; font-size: 17px; background: var(--green-md); border-radius: 50%; } @media (min-width: 600px) and (max-width:1150px) { .numbers-left { flex-direction: column; align-items: center; } .numbers-left > li { flex: 0 1 auto; } } @media (min-width: 600px) { .numbers-left > li { padding-left: 55px; text-align: left; } .numbers-left > li::before { position: absolute; left: 0; top: 0; } .numbers-left p + ul { padding-left: 55px; } } /* Other Calls */ .virtuallyincredible__other-calls { padding: 110px 0 100px; text-align: center; } .virtuallyincredible__other-calls h2 { font-size: 36px; width: 775px; max-width: 100%; margin: 0 auto 55px; } .item-with { font-size: 17px; position: relative; margin-bottom: 45px; } .item-with h4 { font-size: 22px; font-weight: 600; margin: 0 0 5px; } .item-with__icon { margin: 0 auto 20px; } .item-with__icon img { width: 42px; } @media (min-width: 600px) { .item-with { padding-left: 60px; text-align: left; } .item-with__icon { position: absolute; left: 0; top: 0; } } .virtuallyincredible__why { padding: 55px 0; font-size: var(--display-xxs); } .virtuallyincredible__why h3 { font-size: 32px; margin: 0 0 15px; font-weight: bold; } .virtuallyincredible__why p { margin: 0; line-height: 1.25; font-weight: 500; } .virtuallyincredible__pricing { padding: 120px 0 140px; font-size: var(--display-xxs); } .virtuallyincredible__pricing header { margin-bottom: 65px; } .virtuallyincredible__pricing header h2 { font-size: var(--display-md); margin: 0 0 20px; } .virtuallyincredible__pricing header h3 { margin: 0 0 15px; } .virtuallyincredible__pricing .checks { font-weight: 500; font-size: 20px; padding: 0; display: inline-block; } .virtuallyincredible__pricing .checks li { margin: 0 0 15px; } .virtuallyincredible__pricing .checks li::before { font-weight: 400; } .virtuallyincredible__pricing-cta h3 { font-weight: bold; margin: 0 0 35px; } @media (max-width: 991px) { .virtuallyincredible__pricing { text-align: center; } .virtuallyincredible__pricing .checks { font-size: 18px; margin: 0; } } /* Container Utilities ============================================================================= */ .container-lg { width: calc(1392px + var(--clamp-2) * 2); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--clamp-2); padding-right: var(--clamp-2); } .container-xl { width: calc(1520px + var(--clamp-2) * 2); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--clamp-2); padding-right: var(--clamp-2); } .container-xxl { width: calc(1920px + var(--clamp-3) * 2); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--clamp-3); padding-right: var(--clamp-3); } [class*="mw-"] { --mw: 100%; max-width: var(--mw); width: 100%; margin-left: auto; margin-right: auto; } .mw-325 { --mw: 325px; } .mw-400 { --mw: 400px; } .mw-600 { --mw: 600px; } .mw-650 { --mw: 650px; } .mw-900 { --mw: 900px; } .mw-950 { --mw: 950px; } .mw-1020 { --mw: 1020px; } .mw-1090 { --mw: 1090px; } .mw-1130 { --mw: 1130px; } .mw-1350 { --mw: 1350px; } .mw-1400 { --mw: 1400px; } .mw-1600 { --mw: 1600px; } .mw-1700 { --mw: 1700px; } /* Gutters */ .g-6, .gx-6 { --bs-gutter-x: 5rem } .g-6, .gy-6 { --bs-gutter-y: 5rem } .g-7, .gx-7 { --bs-gutter-x: 6.8rem } .g-7, .gy-7 { --bs-gutter-y: 6.8rem } .g-8, .gx-8 { --bs-gutter-x: 12.5rem } .g-8, .gy-8 { --bs-gutter-y: 12.5rem } @media (min-width: 1200px) { .g-lg-8, .gx-lg-8 { --bs-gutter-x: 12.5rem } .g-lg-8, .gy-lg-8 { --bs-gutter-y: 12.5rem } } @media (min-width: 1400px) { .g-xxl-7, .gx-xxl-7 { --bs-gutter-x: 6.8rem } .g-xxl-7, .gy-xxl-7 { --bs-gutter-y: 6.8rem } } @media (min-width: 2001px) { .g-lg-auto { --bs-gutter-x: 6.8rem; --bs-gutter-y: 6.8rem; } } @media (max-width: 2000px) { .g-lg-auto { --bs-gutter-x: 4vw; --bs-gutter-y: 4vw; } } /* Padding */ .pt-6, .py-6 { padding-top: 4rem!important; } .pb-6, .py-6 { padding-bottom: 4rem!important; } .pt-7, .py-7 { padding-top: 5.5rem!important; } .pb-7, .py-7 { padding-bottom: 5.5rem!important; } .pt-8, .py-8 { padding-top: 7rem!important; } .pb-8, .py-8 { padding-bottom: 7rem!important; } .pt-9, .py-9 { padding-top: 9.5rem!important; } .pb-9, .py-9 { padding-bottom: 9.5rem!important; } @media (min-width: 1200px) { .py-lg-8 { padding-bottom: 7rem!important; padding-top: 7rem!important; } } @media (min-width: 992px) { .pt-lg-6 { padding-top: 4rem!important; } .pb-lg-6 { padding-bottom: 4rem!important; } .pt-lg-7 { padding-top: 5.5vw!important; } .pb-lg-7 { padding-bottom: 5.5vw!important; } .pt-lg-8 { padding-top: 10vw!important; } .pb-lg-8 { padding-bottom: 10vw!important; } .ps-lg-6 { padding-left: 4rem!important; } .pe-lg-6 { padding-right: 4rem!important; } .pe-lg-7 { padding-right: 5.5vw!important; } .ps-lg-7 { padding-left: 5.5vw!important; } .ps-lg-8 { padding-left: 10vw!important; } .pe-lg-8 { padding-right: 10vw!important; } } /* ========================================================================== Animations ============================================================================= */ /* Typewritter Animation */ .typewritter-animation-container { min-height: 83px; } .typewritter-animation { position: relative; } .typewritter-animation .text { display: none; } .typewritter-animation-group { position: relative; border-right: 1px solid rgba(0,0,0,1); animation: blinkTextCursor 600ms steps(44) infinite normal; } @keyframes blinkTextCursor{ from{border-right-color: rgba(0,0,0,0);} to{border-right-color: rgba(0,0,0,1);} } [class*='lazy-animate'], [data-lazy]:not([class=*'animated-']), [data-stagger] > * { animation-fill-mode: backwards; animation-play-state: paused; } /* Chrome only: */ @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { /* Lazy Stagger */ @media (min-width: 992px) { .lazy-stagger:not(*:root) > *:not([class*='animated']) { animation-fill-mode: backwards; animation-play-state: paused; opacity: 0; transition: opacity .2s; } } } /* Safari Only */ @media not all and (min-resolution:.001dpcm) { @media { }} /* Animations */ @media (min-width: 992px) and (prefers-reduced-motion: no-preference) { :root { --animation-x: 0; --animation-y: 0; --animation-z: 0; --animation-rotate-y: 0deg; --animation-rotate-x: 0deg; --animation-perspective: none; --animation-opacity: 1; --animation-scale: 1; --animation-distance: 15%; --animation-distance-min: 5%; --animation-distance-full: 100%; --animation-distance-neg: calc(var(--animation-distance) - var(--animation-distance) * 2); --animation-scale-min: .8; --animation-scale-min-neg: calc(var(--animation-scale-min) - var(--animation-scale-min) * 2); } [data-lazy], [data-stagger] { opacity: 0; transition: opacity 0.5s ease; } [data-lazy][class*='animated'], [data-stagger]:has([class*='animated']) { opacity: 1; } [class*="animated"] { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: var(--animation-duration); animation-duration: var(--animation-duration); } [class*="animate-"], [data-delay] { animation-delay: var(--animation-delay); -webkit-animation-delay: var(--animation-delay); } .animated-fast { --animation-duration: .5s; } .animated { --animation-duration: 1s; } .animated-slow { --animation-duration: 1.5s; } .animated-slower { --animation-duration: 2s; } .animated-slowest { --animation-duration: 2.5s; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { --animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { --animation-duration: .75s; } /* Animation Delay */ .animate-1 { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .animate-2 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .animate-3 { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } .animate-4 { -webkit-animation-delay: 1s; animation-delay: 1s; } .animate-5 { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } .animate-6 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .animate-7 { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; } .animate-8 { -webkit-animation-delay: 2s; animation-delay: 2s; } .animate-9 { -webkit-animation-delay: 2.25s; animation-delay: 2.25s; } .animate-10 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } /* Animate In - All Animations */ @-webkit-keyframes animateIn { from { opacity: var(--animation-opacity); -webkit-transform: translate3d(var(--animation-x), var(--animation-y), 0) scale3d(var(--animation-scale), var(--animation-scale), var(--animation-scale)) rotateY(var(--animation-rotate-y)) rotateX(var(--animation-rotate-x)) perspective(var(--animation-perspective)); transform: translate3d(var(--animation-x), var(--animation-y), 0) scale3d(var(--animation-scale), var(--animation-scale), var(--animation-scale)) rotateY(var(--animation-rotate-y)) rotateX(var(--animation-rotate-x)) perspective(var(--animation-perspective)); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateY(0deg) rotateX(0deg) perspective(var(--animation-perspective)); transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateY(0deg) rotateX(0deg) perspective(var(--animation-perspective)); } } @keyframes animateIn { from { opacity: var(--animation-opacity); -webkit-transform: translate3d(var(--animation-x), var(--animation-y), 0) scale3d(var(--animation-scale), var(--animation-scale), var(--animation-scale)) rotateY(var(--animation-rotate-y)) rotateX(var(--animation-rotate-x)) perspective(var(--animation-perspective)); transform: translate3d(var(--animation-x), var(--animation-y), 0) scale3d(var(--animation-scale), var(--animation-scale), var(--animation-scale)) rotateY(var(--animation-rotate-y)) rotateX(var(--animation-rotate-x)) perspective(var(--animation-perspective)); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateY(0deg) rotateX(0deg) perspective(var(--animation-perspective)); transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateY(0deg) rotateX(0deg) perspective(var(--animation-perspective)); } } /* Fade In - Fade Only - no motion */ @-webkit-keyframes fadeIn { from { opacity: var(--animation-opacity); } to { opacity: 1; } } @keyframes fadeIn { from { opacity: var(--animation-opacity); } to { opacity: 1; } } [class*='slideIn'], [class*='fade']:not(.fadeIn), [class*='zoomIn'], .flipInY { --animation-opacity: 0; /* transition-timing-function: cubic-bezier(.165, .84, .44, 1); */ transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); -webkit-animation-name: animateIn; animation-name: animateIn; } .fadeIn { --animation-opacity: 0; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* Direction Mods */ [class*='slideIn'] { --animation-opacity: 1; } [class*='zoomIn'] { --animation-scale: .8; } [class*='Far'] { --animation-distance: 100%; } [class*='Down'] { --animation-y: calc(var(--animation-distance) * -1); } [class*='Up'] { --animation-y: var(--animation-distance); } [class*='Left'] { --animation-x: calc(var(--animation-distance) * -1); } [class*='Right'] { --animation-x: var(--animation-distance); } [class*='Min']:has([class*='zoomIn']), .zoomInMin { --animation-scale: .95; } [class*='Min'] { --animation-distance: 5%; } [class*='Big'] { --animation-distance: 2000px; } /* Flip */ .flipInY { --animation-rotate-y: 180deg; --animation-perspective: 1000px; -webkit-backface-visibility: visible!important; backface-visibility: visible!important; } .flipInX { --animation-rotate-x: 180deg; --animation-perspective: 1000px; -webkit-backface-visibility: visible!important; backface-visibility: visible!important; } } /* */ @-webkit-keyframes rotateInRound { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; border-radius: 50%; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; border-radius: 20px; } } @keyframes rotateInRound { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg) scale(0); transform: rotate3d(0, 0, 1, -200deg) scale(0); opacity: 0; border-radius: 50%; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; border-radius: 20px; } } .rotateInRound { -webkit-animation-name: rotateInRound; animation-name: rotateInRound; }