/** * title: Innovaro * created: 28/04/2025 * author: Development Team * copyright: Optiva Ltd * ========================================================================== */ body { font-family: Open Sans; font-weight: 400; overflow-x: hidden; scroll-behavior: smooth; position: relative; } h1 { color: #2d2d2d; font-size: 42px; line-height: 48px; font-weight: 400; } h2 { color: #2d2d2d; font-size: 42px; line-height: 48px; font-weight: 400; } h3 { color: #2d2d2d; font-size: 36px; line-height: 42px; font-weight: 400; } h4 { color: #2d2d2d; font-size: 30px; line-height: 36px; font-weight: 400; } h5 { color: #2d2d2d; font-size: 24px; line-height: 30px; font-weight: 400; } h6 { color: #2d2d2d; font-size: 20px; line-height: 26px; font-weight: 400; } p { color: #666666; font-size: 18px; line-height: 26px; font-weight: 400; } li { color: #666666; font-size: 18px; line-height: 26px; font-weight: 400; } .h1 { color: #2d2d2d; font-size: 42px; line-height: 48px; font-weight: 400; } .h2 { color: #2d2d2d; font-size: 42px; line-height: 48px; font-weight: 400; } .h3 { color: #2d2d2d; font-size: 36px; line-height: 42px; font-weight: 400; } .h4 { color: #2d2d2d; font-size: 30px; line-height: 36px; font-weight: 400; } .h5 { color: #2d2d2d; font-size: 24px; line-height: 30px; font-weight: 400; } .h6 { color: #2d2d2d; font-size: 20px; line-height: 26px; font-weight: 400; } ul.ticks { padding-left: 2rem; } ul.ticks li { padding-left: 0px; text-indent: -10px; } ul.ticks li:before { font-family: 'FontAwesome'; content: '\f00c'; margin:0 5px 0 -15px; color: #41ad49; font-weight: 900; left: -5px; position: relative; } ul.ticks li::marker { font-size: 0px; line-height: 0px; display: none; } .container { max-width: 1200px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-green { color: #4bc184!important; } .uppercase { text-transform: uppercase; } a { color: #d10a11; text-decoration: none; } a:link { text-decoration: none; } a:hover { color: #f30404; text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; } .btn { font-size: 17px; line-height: 18px; font-weight: 500; padding: 10px 32px; color: #333333; border: 1px #333333 solid; border-radius: 30px; filter: drop-shadow(0px); box-shadow: none; transition: 0.2s; transition-timing-function: ease-in; } .btn:hover { transition: 0.2s; transition-timing-function: ease-in; } .btn:focus { transition: 0.2s; transition-timing-function: ease-in; } .btn.large { font-size: 21px; line-height: 23px; padding: 10px 45px; } .btn-black { background: #333333; border-color: #333333; color: #ffffff; } .btn-black:hover { background: #d10a11!important; border-color: #d10a11!important; color: #ffffff!important; } .btn-black:focus { background: #d10a11; border-color: #d10a11; color: #ffffff; } .btn-black:active { background: #d10a11!important; border-color: #d10a11!important; color: #ffffff!important; } .btn-white { background: #ffffff; border-color: #ffffff; color: #d10a11; } .btn-white:hover { background: #d10a11!important; border-color: #d10a11!important; color: #ffffff!important; } .btn-white:focus { background: #d10a11; border-color: #d10a11; color: #ffffff; } .btn-white:active { background: #d10a11!important; border-color: #d10a11!important; color: #ffffff!important; } .btn-red { background: #d10a11; border-color: #d10a11; color: #ffffff; } .btn-red:hover { background: #be0b11!important; border-color: #be0b11!important; color: #ffffff!important; } .btn-red:focus { background: #be0b11; border-color: #be0b11; color: #ffffff; } .btn-red:active { background: #be0b11!important; border-color: #be0b11!important; color: #ffffff!important; } .btn-red-keyline { background: none; border-color: #d10a11; color: #d10a11; } .btn-red-keyline:hover { background: #d10a11!important; border-color: #d10a11!important; color: #ffffff!important; } .btn-red-keyline:focus { background: #d10a11; border-color: #d10a11; color: #ffffff; } .btn-red-keyline:active { background: #d10a11!important; border-color: #d10a11!important; color: #ffffff!important; } .btn-green { background: #43817b; border-color: #43817b; color: #ffffff; } .btn-green:hover { background: #55a79f!important; border-color: #55a79f!important; color: #ffffff!important; } .btn-green:focus { background: #55a79f; border-color: #55a79f; color: #ffffff; } .btn-green:active { background: #55a79f!important; border-color: #55a79f!important; color: #ffffff!important; } .btn-green-keyline { background: none; border-color: #43817b; color: #43817b; } .btn-green-keyline:hover { background: #43817b!important; border-color: #43817b!important; color: #ffffff!important; } .btn-green-keyline:focus { background: #43817b; border-color: #43817b; color: #ffffff; } .btn-green-keyline:active { background: #43817b!important; border-color: #43817b!important; color: #ffffff!important; } .arrow-button { font-size: 20px; line-height: 28px; } .arrow-button:after { content:""; display: inline-block; width: 48px; height: 16px; background: url("../assets/arrow-button.png") 50% center no-repeat; margin-left: 12px; transition: 0.2s; transition-timing-function: ease-in; } .arrow-button:hover:after { margin-left: 20px; transition: 0.2s; transition-timing-function: ease-in; } .form-control { border: 1px #ffffff solid; font-size: 16px; } .form-control.is-invalid { border: 1px #d10a11 solid!important; } select.form-control { background: #fff url('../assets/dropdown-arrow.png') no-repeat right 50%; border: 1px #cccccc solid; border-radius: 30px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-size: 24px; padding-right: 30px !important; } .formeo-column .text-error { color: #d10a11; display: inline-block; } .formeo-column label { color: #333333; font-size: 17px; font-weight: 400; display: block; margin-bottom: 6px; } .formeo-column label br { display: none; } .formeo-column .f-field-group { margin-bottom: 15px; position: relative; } .formeo-column .f-field-group:last-child { margin-bottom: 0px; } .formeo-column select { display: block; width: 100%;padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background: #fff url('../assets/dropdown-arrow.png') no-repeat right 50%; background-size: 24px; background-clip: padding-box; border: 1px solid #ffffff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .375rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .formeo-column input[type='checkbox'] + label { font-size: 14px; line-height: 18px; display: block; margin: 0px; padding-left: 40px; } .formeo-column input[type='checkbox'] + label h6 { font-size: 14px; line-height: 18px; display: inline; margin: 0px; } .formeo-column input[type='checkbox'] + label h6 a { color: #333333; text-decoration: underline; z-index: 5; position: relative; } .formeo-column input[type='checkbox'] + label h6 a:hover { color: #d10a11; } .formeo-column .checkbox + label::before { content: ""; display: inline-block; position: absolute; width: 29px; height: 29px; left: 0; margin-left: 0px; border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .formeo-column .checkbox + label::after { display: inline-block; position: absolute; width: 28px; height: 28px; left: 0; top: 0; margin-left: 0px; padding-left: 3px; padding-top: 5px; font-size: 18px; color: #41ad49; font-weight: 900; text-align: center; } .formeo-column .checkbox:checked + label::after { font-family: "Font Awesome 5 Pro"; content: "\f00c"; } .formeo-column input[type="checkbox"] { opacity: 0; z-index: 1; cursor: pointer; width: 100%; height: 100%; position: absolute; } .formeo-column .checkbox.error + label::before { border-color: #d10a11; } fieldset.formeo-row-wrap { display: block; margin: 20px -10px 20px -10px; } fieldset.formeo-row-wrap .formeo-row { display: block; font-size: 0px; } fieldset.formeo-row-wrap .formeo-row .formeo-column { display: inline-block; vertical-align: bottom; padding: 0px 10px; } .formeo-column input.disabled { height: 38px; font-size: 14px; background-color: #e9ecef; opacity: 1; pointer-events: none; cursor: none; } .border-light { border-color: rgb(134, 130, 112) !important; } .checkbox { position: relative; } .checkbox label { color: #1b1631; font-size: 24px; font-weight: 300; padding-left: 15px; } .checkbox label.big span { font-size: 20px; line-height: 28px; margin-top: 2px; } .checkbox label span { font-size: 18px; line-height: 22px; font-weight: 400; display: block; margin-top: 4px; margin-left: 15px; } .checkbox label::before { background: #ffffff; border: 1px #ada68a solid; width: 34px; height: 34px; } .checkbox label::after { color: #4bc184; font-size: 20px; line-height: 35px; font-weight: 900; border: none; width: 34px; height: 34px; left: 0px; top: 0px; padding: 0px; text-align: center; } .checkbox input { top: 0px; left: 0px; margin: 0px; height: 100%; width: 100%; position: absolute; } .checkbox input.is-invalid + label::before { border: 1px #d10a11 solid; } .radio { position: relative; } .radio label { color: #1b1631; font-size: 24px; font-weight: 300; padding-left: 15px; } .radio label span { display: block; margin-top: 4px; } .radio label::before { background: #ffffff; border: 1px #ada68a solid; width: 28px; height: 28px; margin-top: 1px; } .radio label::after { background: #4bc184; width: 14px; height: 14px; left: 7px; top: 8px; margin-top: 0px; } .radio input { top: 0px; left: 0px; margin: 0px; height: 100%; width: 100%; position: absolute; } .radio input.is-invalid + label::before { border: 1px #d10a11 solid; } .nav-above { margin-top: 90px; } .cky-btn.cky-btn-accept { background: #d10a11!important; border-color: #d10a11!important; color: #ffffff!important; } .cky-btn-revisit-wrapper { background: #d10a11!important; } /** * Header * ========================================================================== */ header { width: 100%; top: 0px; position: fixed; z-index: 1200; transition: 0.3s; transition-timing-function: ease-in; } .header { background: none; width: 100%; height: 104px; padding: 28px 20px; position: relative; transition: 0.3s; transition-timing-function: ease-in; } .header.internal { background: #303e47; } .header .logo { float: left; width: 180px; height: 29px; margin-right: 35px; position: relative; transition: 0.3s; transition-timing-function: ease; } .header .logo img { position: absolute; } .header .logo img.black { visibility: hidden; opacity: 0; transition: 0.3s; transition-timing-function: ease-in; } .header .nav { padding: 0px; margin: -32px 0px 0px 0px; transition: 0.3s; transition-timing-function: ease; } .header .nav ul { padding: 0px; margin: 0px; font-size: 0px; } .header .nav li { font-size: 17px; line-height: 24px; font-weight: 500; display: inline-block; padding-top: 40px; padding-right: 30px; height: 90px; transition: 0.3s; transition-timing-function: ease-in; } .header .nav li:hover { color: #d10a11; } .header .nav li:hover a { color: #d10a11; } .header .nav li a { color: #e8e8e8; display: block; transition: 0.3s; transition-timing-function: ease-in; } .header .nav li a span { padding-right: 6px; } .header .nav li.active a { color: #d10a11; } .header .nav li a.active { color: #d10a11; } .header .nav li.dropdown a:hover { cursor: default; } .header .nav li.dropdown.active a { color: #d10a11; transition: 0.3s; transition-timing-function: ease-in; } .header .nav li.dropdown a::after { color: #e8e8e8!important; display: inline-block; transform: rotate(0deg); font-family: "Font Awesome 5 Pro"; content: "\f078"; transition: 0.3s; transition-timing-function: ease-in; } .header .nav li:last-child { padding-right: 0px; } .header .nav li .nav-border { background: #d10a11; height: 3px; width: 0%; margin-top: 42px; position: relative; z-index: 1201; transition: 0.3s; transition-timing-function: ease-in; } .header .buttons { margin-top: 4px; float: right; transition: 0.3s; transition-timing-function: ease; } .header .buttons .btn { padding: 10px 15px; margin-left: 20px; float: right; } .header .buttons .icon-circle { width: 30px; height: 30px; border: 2px #ffffff solid; border-radius: 50%; margin-top: 6px; margin-left: 20px; text-align: center; float: right; overflow: hidden; position: relative; transition: 0.3s; transition-timing-function: ease-in; } .header .buttons .icon-circle:hover { background: #d10a11; border-color: #d10a11; } .header .buttons .icon-circle i { color: #ffffff; position: absolute; transition: 0.3s; transition-timing-function: ease-in; } .header .buttons .icon-circle:hover i { color: #ffffff; transition: 0.3s; transition-timing-function: ease-in; } .header .buttons .icon-circle.user i { font-size: 24px; left: 0px; right: 0px; bottom: -3px; } .header .buttons .search { margin-top: 6px; display: inline-block; position: relative; } .header .buttons .search i { color: #b0b0b0; font-size: 26px; position: relative; } .header .buttons .search:hover i { color: #ffffff; } .header .buttons .icon-circle.nav-i i { font-size: 17px; top: 5px; left: 0px; right: 0px; } .header .buttons .icon-circle.nav-i { display: none; } .header.active { background: #ffffff; transition: 0.3s; transition-timing-function: ease-in; } .header.active .logo img.white { visibility: hidden; opacity: 0; transition: 0.3s; transition-timing-function: ease-in; } .header.active .logo img.black { visibility: visible; opacity: 1; transition: 0.3s; transition-timing-function: ease-in; } .header.active .nav li { color: #2d2d2d; transition: 0.3s; transition-timing-function: ease-in; } .header.active .nav li a { color: #2d2d2d; transition: 0.3s; transition-timing-function: ease-in; } .header.active .nav li.dropdown a::after { color: #2d2d2d!important; } .header.active .buttons .btn { color: #ffffff; background: #d10a11; border-color: #d10a11; } .header.active .buttons .icon-circle { border-color: #999999; } .header.active .buttons .icon-circle i { color: #999999; } .header .nav li.dropdown.active a::after { color: #d10a11!important; transform: rotate(-180deg); transition: 0.3s; transition-timing-function: ease-in; } .header .nav li.dropdown.active .nav-border { width: 100%; transition: 0.3s; transition-timing-function: ease-in; } header .nav ul li.dropdown:hover .navigation-dropdown { opacity: 1; visibility: visible; z-index: 1200; transition: 0.3s; transition-timing-function: ease-in; } header .navigation-dropdown { background: #ffffff; width: 100%; max-width: 1920px; left: 0px; right: 0px; border-top: 1px #ccc solid; border-radius: 0px; padding: 35px 10px 35px 10px; margin: auto; top: 104px; position: fixed; opacity: 0; visibility: hidden; z-index: unset; transition: 0.3s; transition-timing-function: ease-in; } header .navigation-dropdown.active { display: block; } header .navigation-dropdown li { height: auto!important; padding-top: 0px!important; } header .navigation-dropdown .list-items { padding-left: 0px; } header .navigation-dropdown.two .list-items { padding-left: 0px; } header .navigation-dropdown.two { min-width: 580px; } header .navigation-dropdown.three .list-items { padding-left: 0px; } header .navigation-dropdown h5 { color: #666666; font-size: 19px; line-height: 24px; font-weight: 500; margin-bottom: 12px; } header .nav ul .navigation-dropdown ul { list-style: none; padding: 0px; margin: 0px; } header .nav ul .navigation-dropdown ul li.title { color: #d10a11; font-size: 17px; line-height: 23px; font-weight: 500; margin-bottom: 8px; } header .nav ul .navigation-dropdown ul li.title a { color: #2d2d2d!important; } header .nav ul .navigation-dropdown ul li.title a:hover { color: #d10a11!important; } header .nav ul .navigation-dropdown ul li { font-size: 14px; line-height: 21px; font-weight: 400; padding-right: 0px; margin-right: 0px; margin-bottom: 6px; height: auto; display: block; } header .nav ul .navigation-dropdown ul li.bold { font-weight: 600; } header .nav ul .navigation-dropdown ul li a { color: #666666!important; display: block; } header .nav ul .navigation-dropdown ul li a:hover { color: #d10a11!important; cursor: pointer!important; } header .nav ul .navigation-dropdown ul li a::after { opacity: 0; display: inline; margin-left: 6px; font-family: "Font Awesome 5 Pro"; content: "\f054"!important; transform: none!important; } header .nav ul .navigation-dropdown ul li a:hover::after { opacity: 1; } header .navigation-dropdown .nav-feature-box { background: #0c252c; background-size: cover; background-position: right 50%; padding: 20px; border-radius: 10px; width: 230px; height: 96%; float: right; position: relative; } header .navigation-dropdown .nav-feature-box .cta-circle { width: 60px; height: 60px; } header .navigation-dropdown .nav-feature-box h4 { color: #ffffff; bottom: 20px; position: absolute; } header .navigation-dropdown .nav-text-feature { padding-right: 105px; display: block; cursor: pointer!important; } header .navigation-dropdown.two { padding-top: 42px; padding-bottom: 42px; } header .navigation-dropdown.two .nav-text-feature { padding-right: 10px; } header .navigation-dropdown.three { padding-top: 38px; padding-bottom: 42px; } header .navigation-dropdown .nav-text-feature::after { display: none!important; } header .navigation-dropdown .nav-text-feature h5 { color: #2d2d2d; font-size: 17px; line-height: 23px; font-weight: 500; margin-bottom: 8px; } header .navigation-dropdown .nav-text-feature h5::after { opacity: 0; display: inline; margin-left: 6px; font-family: "Font Awesome 5 Pro"; content: "\f054"!important; transition: 0.3s; transition-timing-function: ease; } header .navigation-dropdown .nav-text-feature:hover h5::after { opacity: 1; transition: 0.3s; transition-timing-function: ease; } header .navigation-dropdown .nav-text-feature p { color: #666666; font-size: 14px; line-height: 20px; margin: 0px; } header .navigation-dropdown .nav-text-feature:hover h5 { color: #d10a11; } header .dropdown .navigation-dropdown .col { top: -30px; position: relative; opacity: 0; visibility: hidden; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } header .dropdown.active .navigation-dropdown .col { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.4s; } header .dropdown .navigation-dropdown .col:nth-child(2) { transition-delay: 0.1s; } header .dropdown.active .navigation-dropdown .col:nth-child(2) { transition-delay: 0.5s; } header .dropdown .navigation-dropdown .col:nth-child(3) { transition-delay: 0.1s; } header .dropdown.active .navigation-dropdown .col:nth-child(3) { transition-delay: 0.6s; } header .dropdown .navigation-dropdown .col:nth-child(4) { transition-delay: 0.1s; } header .dropdown.active .navigation-dropdown .col:nth-child(4) { transition-delay: 0.7s; } header .dropdown .navigation-dropdown .col:nth-child(5) { transition-delay: 0.1s; } header .dropdown.active .navigation-dropdown .col:nth-child(5) { transition-delay: 0.8s; } .header.scrolled { background: #303e47; height: 92px; padding-top: 22px; padding-bottom: 22px; box-shadow: 0 -6px 10px 5px rgba(0,0,0,0.3); transition: 0.3s; transition-timing-function: ease-in; } .header.scrolled .nav { transition: 0.3s; transition-timing-function: ease; } .header.scrolled .nav li { height: 92px; padding-top: 43px; } .header.scrolled .nav li .nav-border { margin-top: 32px; } .header.scrolled .buttons { margin-top: 6px; transition: 0.3s; transition-timing-function: ease; } .header.scrolled.active { background: #ffffff; } header .navigation-dropdown.scrolled { top: 92px; transition: 0.1s; transition-timing-function: ease-in; } .overlay-bg { transition: 0.3s; transition-timing-function: ease; } .overlay-bg.active { background-color: #000; opacity: 0.5; height: 100%; width: 100%; position: absolute; z-index: 1000; transition: 0.3s; transition-timing-function: ease; } .header-above { margin-top: 90px; } /* === Menu Modal =============================== */ .menu-modal { background: #ffffff; opacity: 0; visibility: hidden; position: fixed; width: 100%; height: 100%; min-height: 100vh; padding: 0px 0px 0px 0px; overflow: auto; top: 0px; transition: 0.4s; transition-timing-function: ease-in; z-index: 0; } .menu-modal.active { z-index: 9998; opacity: 1; visibility: visible; top: 0px; transition: 0.4s; transition-timing-function: ease-in; } .menu-modal .header-content { padding: 32px 32px; } .menu-modal.scrolled .header-content { padding-top: 18px; padding-bottom: 18px; } .menu-modal .header-content .logo { width: 180px; float: left; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal .buttons { margin-top: 0px; } .menu-modal .buttons .icon-circle { width: 36px; height: 36px; border: 2px #999999 solid; border-radius: 50%; margin-top: 0px; margin-left: 15px; text-align: center; float: right; overflow: hidden; position: relative; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal .buttons .icon-circle:hover { background: #d10a11; border-color: #d10a11; } .menu-modal .buttons .icon-circle i { color: #999999; font-size: 22px; top: 4px; left: 0px; right: 0px; position: absolute; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal .buttons .icon-circle:hover i { color: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal .link-content { padding: 0px 30px 20px 30px; } .menu-modal .link-content .accordion { background: none; border-radius: 0px; margin-bottom: 25px; } .menu-modal .link-content .accordion .accordion-item { background: none; border: 0px; border-bottom: 1px #7f7f7f solid; border-radius: 0px; } .menu-modal .link-content .accordion .accordion-item .accordion-header { background: none; font-size: 22px; line-height: 26px; } .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button { background: none; color: #2d2d2d; font-size: 19px; line-height: 24px; font-weight: 600; box-shadow: none; padding: 15px 0px; } .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button:hover { color: #d10a11; } .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button::after { background: none!important; font-family: "Font Awesome 5 Pro"; content: "\2b"; } .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { background: none!important; font-family: "Font Awesome 5 Pro"; content: "\f068"; } .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button.link::after { display: none!important; } .menu-modal .link-content .accordion .accordion-item .accordion-body { padding: 0px 0px 25px 0px; } .menu-modal .link-content .accordion .accordion-item .accordion-body ul { list-style: none; padding: 0px; margin: 0px; } .menu-modal .link-content .accordion .accordion-item .accordion-body ul li { font-size: 17px; line-height: 23px; padding: 5px 0px; font-weight: 500; } .menu-modal .link-content .accordion .accordion-item .accordion-body ul li a { color: #666666;} .menu-modal .link-content .accordion .accordion-item .accordion-body ul li a:hover { color: #d10a11; } .menu-modal .link-content .accordion .accordion-item .accordion-body ul li.title { font-size: 18px; line-height: 24px; padding-top: 15px!important; margin-top: 15px; border-top: 1px #cccccc solid; } .menu-modal .link-content .accordion .accordion-item .accordion-body ul li.title a { color: #d10a11; } .menu-modal .link-content .accordion .accordion-item .accordion-body ul li.title:first-child { border: 0px; padding-top: 5px!important; margin-top: 0px!important; } .menu-modal .link-content .accordion .accordion-item .accordion-body ul li:first-child { padding-top: 0px; } .menu-modal .link-content .btn { width: 100%; max-width: 400px; font-size: 18px; line-height: 19px; padding: 12px 18px; } .menu-modal .link-content .social-icons { margin: 38px 0px 0px 0px; } .menu-modal .link-content .social-icons li a { border-color: #ffffff; } .menu-modal .link-content .social-icons li a i { color: #ffffff; } .menu-modal .link-content .social-icons li a:hover { background: #ffffff; border-color: #ffffff; } .menu-modal .link-content .social-icons li a:hover i { color: #333333; } /** * Hero Panel * ========================================================================== */ .hero-panel { background-color: #160625; padding: 120px 20px 350px 20px; background-position: center -150px; background-repeat: no-repeat; overflow: hidden; position: relative; } .hero-panel .container { z-index: 1; position: relative; } .hero-panel .text-content { padding-top: 40px; } .hero-panel .text-content h1 { margin-bottom: 0px; } .hero-panel .text-content h2 { margin-bottom: 0px; } @media screen and (min-width: 1200px) { .hero-panel .text-content h1 { font-size: 34px; line-height: 42px; } .hero-panel .text-content h2 { font-size: 34px; line-height: 42px; } } .hero-panel .side-image.desktop { display: block; } .hero-panel .side-image.mobile { display: none; } .hero-panel .side-image { position: relative; } .hero-panel .side-image .icon { width: 70px; position: absolute; right: 47px; top: 105px; } .hero-panel .side-image .screen { width: 130px; position: absolute; } .hero-panel .side-image .screen.element-left { left: 5px; top: 90px; } .hero-panel .side-image .screen.element-right { right: 10px; top: 220px; } .hero-panel .video-bg { width: 100%; height: 100%; top: 0px; left: 0px; right: 0px; position: absolute; margin: auto; } .hero-panel .video-bg video { width: 100%; min-width: 1600px; top: -160px; left: 0px; right: 0px; margin: auto; position: absolute; } .hero-panel .swiper { margin-top: 100px; z-index: 1; } .hero-panel .slider.container { position: relative; z-index: 1; } .hero-feature-box { background: #336666; min-height: 330px; padding: 40px 40px 60px 40px; overflow: hidden; position: relative; } .hero-feature-box.green { background: #336666; } .hero-feature-box.blue { background: #336699; } .hero-feature-box.grey { background: #303e47; } .hero-feature-box .feature-content { max-width: 550px; width: 80%; position: relative; z-index: 1; } .hero-feature-box .feature-content h2 { margin-bottom: 20px; } .hero-feature-box .feature-content h6 { color: #e8e8e8; } .hero-feature-box .feature-content .link { color: #ffffff; font-weight: 600; margin: 0px; } .hero-feature-box .side-image { height: 100%; width: 100%; max-width: 570px; background-position: left 50%; background-repeat: no-repeat; background-size: cover; top: 0px; right: -60px; position: absolute; mask: url(../assets/hero-feature-box-mask.svg) right 50% no-repeat; -webkit-mask: url(../assets/hero-feature-box-mask.svg) right 50% no-repeat; } /** * Solution Features Slider Panel * ========================================================================== */ .solution-features-slider-panel { background: none; padding: 0px 20px 80px 20px; margin-top: -220px; position: relative; } .solution-features-slider-panel .slider.container { position: relative; } .solution-feature-box { background: #ffffff; padding: 5px; border: 1px #ccc solid; position: relative; } .solution-feature-box .feature-content { padding: 25px; position: relative; } .solution-feature-box .feature-content h3 { color: #2d2d2d; font-weight: 300; padding-right: 40px; position: relative; } .solution-feature-box .feature-content i { color: #d10a11; font-size: 40px; right: 0px; bottom: 0px; position: absolute; } .solution-feature-box .background { height: 200px; width: 100%; background-size: 420px; background-position: 50% center; background-repeat: no-repeat; transition: 0.3s; transition-timing-function: ease; } .solution-feature-box:hover .background { background-size: 470px; transition: 0.3s; transition-timing-function: ease; } .solution-feature-box:hover .feature-content h3 { color: #d10a11;} .animate .solution-feature-box { top: 80px; opacity: 0; visibility: hidden; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .animate.visible .solution-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .animate .swiper-slide:nth-child(2) .solution-feature-box { transition-delay: 0.1s; } .animate.visible .swiper-slide:nth-child(2) .solution-feature-box { transition-delay: 0.4s; } .animate .swiper-slide:nth-child(3) .solution-feature-box { transition-delay: 0.1s; } .animate.visible .swiper-slide:nth-child(3) .solution-feature-box { transition-delay: 0.7s; } .animate .swiper-slide:nth-child(4) .solution-feature-box { transition-delay: 0.1s; } .animate.visible .swiper-slide:nth-child(4) .solution-feature-box { transition-delay: 1.0s; } .animate .swiper-slide:nth-child(5) .solution-feature-box { transition-delay: 0.1s; } .animate.visible .swiper-slide:nth-child(5) .solution-feature-box { transition-delay: 1.3s; } .animate .swiper-slide:nth-child(6) .solution-feature-box { transition-delay: 0.1s; } .animate.visible .swiper-slide:nth-child(6) .solution-feature-box { transition-delay: 1.6s; } /** * Internal Header Panel * ========================================================================== */ .internal-header-panel { background: #303e47 !important; padding: 120px 20px 55px 20px; background-position: center -280px; background-repeat: no-repeat; position: relative; } .internal-header-panel .text-content h1 { margin-bottom: 15px; } .internal-header-panel .text-content h5 { color: #d10a11; } .internal-header-panel .text-content p { margin: 0px; } .internal-header-panel .side-mask { height: 100%; width: 39%; top: 0px; right: 0px; position: absolute; mask: url(../assets/internal-header-mask-1.svg) left 50% no-repeat; -webkit-mask: url(../assets/internal-header-mask-1.svg) left 50% no-repeat; mask-size: cover; -webkit-mask-size: cover; } /** * Content Panel * ========================================================================== */ .content-panel { background-position: top center; background-repeat: no-repeat; padding: 65px 20px; overflow: hidden; position: relative; } .content-panel .container { position: relative; } .content-panel .text-content h1 { margin-bottom: 25px; } .content-panel .text-content h2 { margin-bottom: 25px; } .content-panel .text-content h3 { margin-bottom: 20px; } .content-panel .text-content h4 { margin-bottom: 20px; } .content-panel .text-content a h4 { color: #333333; } .content-panel .text-content a:hover h4 { color: #d10a11; } .content-panel .text-content h5 { margin-bottom: 20px; } .content-panel .text-content p { font-weight: 400; } .content-panel .text-content p strong { font-weight: 600; } .content-panel .text-content ul { list-style: none; padding: 0px; margin: 0px; } .content-panel .text-content ul.line-links li { padding: 15px 0px; } .content-panel .text-content ul li { list-style: none; padding: 12px 0px; border-top: 1px #7f7f7f solid; } .content-panel .text-content ul li:last-child { border-bottom: 1px #7f7f7f solid; } .content-panel .text-content * + .line-link { margin-top: 20px; } .content-panel .text-content .btn { margin-top: 20px; } .content-panel .text-content * + .btn { margin-top: 20px; } .content-panel .text-content .btn { margin-right: 20px; } .content-panel .text-content .btn:last-child { margin-right: 0px; } .content-panel .text-content.contained { max-width: 900px; margin: auto; } .content-panel .text-content .paragraph-container { width: 90%; text-align: left; margin: auto; } .content-panel .text-content ul.ticks li { padding: 0px 0px 5px 0px; border: 0px!important; } .content-panel.vertical-center { min-height: 900px; padding: 0px 0px 0px 0px; } .content-panel.vertical-center .col { min-height: 900px; position: relative; } .content-panel.vertical-center .text-content { position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); width: 94%; max-width: 620px; margin: auto; } .content-panel.vertical-center.height-800 { min-height: 800px; } .content-panel.vertical-center.height-800 .col { min-height: 800px; } .content-panel.vertical-center.height-700 { min-height: 700px; } .content-panel.vertical-center.height-700 .col { min-height: 700px; } .content-panel.vertical-center.height-600 { min-height: 600px; } .content-panel.vertical-center.height-600 .col { min-height: 600px; } .content-panel .feature-holder { margin-bottom: 20px; } .content-panel .swiper.success { margin-bottom: 70px; } .content-panel .swiper.article { margin-bottom: 70px; } .content-panel .col { position: relative; } .content-panel.bg { padding-top: 80px; padding-bottom: 80px; } .content-panel.bgs { padding: 0px; } .content-panel.bgs.grey { background: #333333; } .content-panel.bgs .container { max-width: 1550px; } .content-panel.bgs .img-bg { background-size: cover; } .content-panel.bgs .text-bg { padding: 90px 60px 90px 90px; } .content-panel.bgs .text-content { max-width: 528px; } .content-panel.bgs.left .text-content { float: right; } @media screen and (min-width: 991px) { .content-panel .text-content ul.line-links li h4 { font-size: 26px; line-height: 30px; } .content-panel .text-content ul.small li { font-size: 18px; line-height: 24px; } .content-panel.bgs .text-content p { font-size: 18px; line-height: 24px; } .content-panel.bgs .text-content li { font-size: 18px; line-height: 24px; } } @media screen and (max-width: 991px) { .content-panel .text-content ul.line-links li h4 { font-size: 22px; line-height: 28px; } } .content-panel .side-image { width: 90%; max-width: 480px; height: 100%; overflow: hidden; position: relative; } .content-panel .side-image img { width: 100%; max-width: unset; margin: auto; position: relative; } .content-panel .side-image.full-height { width: 100%; max-width: 100%; height: 100%; overflow: hidden; position: relative; } .content-panel .side-image.full-height img { width: 100%; bottom: 0px; max-width: unset; margin: auto; position: absolute; } .content-panel .side-image.offset-height { overflow: visible; position: relative; } .content-panel .side-image.offset-height img { bottom: -65px; margin-top: -60px; } .content-panel .side-image.offset-height.bottom img { position: absolute; } .content-panel .side-image.device-shape { height: 100%; width: 100%; max-width: 700px; background-position: left 50%; background-repeat: no-repeat; background-size: cover; top: 0px; bottom: 0px; position: absolute; mask: url(../assets/device-shape-mask.svg) center 50% no-repeat; -webkit-mask: url(../assets/device-shape-mask.svg) center 50% no-repeat; mask-size: 700px; -webkit-mask-size: 700px; } .content-panel.left .side-image.device-shape { right: 200px; } .content-panel.right .side-image.device-shape { left: 200px; } .content-panel .side-image.device-shape-3 { height: 100%; width: 100%; max-width: 50%; background-position: left top; background-repeat: no-repeat; background-size: cover; top: -40px; bottom: 0px; position: absolute; mask: url(../assets/side-shape-mask-2.svg) center top no-repeat; -webkit-mask: url(../assets/side-shape-mask-2.svg) center top no-repeat; mask-size: 700px; -webkit-mask-size: 700px; } .content-panel.left .side-image.device-shape-3 { right: 0px; } .content-panel.right .side-image.device-shape-3 { left: 0px; } .content-panel .side-image.device-shape-4 { height: 90%; width: 100%; max-width: 50%; background-position: left 50%; background-repeat: no-repeat; background-size: cover; bottom: 0px; position: absolute; mask: url(../assets/side-shape-mask-3.svg) center bottom no-repeat; -webkit-mask: url(../assets/side-shape-mask-3.svg) center bottom no-repeat; mask-size: contain; -webkit-mask-size: contain; } .content-panel.left .side-image.device-shape-4 { right: 0px; } .content-panel.right .side-image.device-shape-4 { left: 0px; } .content-panel .side-image.device-shape-2 { height: 600px; width: 100%; max-width: 600px; background-position: left 50%; background-repeat: no-repeat; background-size: cover; top: -40px; position: absolute; mask: url(../assets/side-shape-mask-5.svg) center bottom no-repeat; -webkit-mask: url(../assets/side-shape-mask-5.svg) center bottom no-repeat; mask-size: 562px; -webkit-mask-size: 562px; } .content-panel.left .side-image.device-shape-2 { right: 200px; } .content-panel.right .side-image.device-shape-2 { left: 200px; } .content-panel .side-image.device-shape-5 { height: 600px; width: 100%; max-width: 600px; background-position: left 50%; background-repeat: no-repeat; background-size: cover; bottom: -40px; position: absolute; mask: url(../assets/side-shape-mask-4.svg) center bottom no-repeat; -webkit-mask: url(../assets/side-shape-mask-4.svg) center bottom no-repeat; mask-size: 562px; -webkit-mask-size: 562px; } .content-panel.left .side-image.device-shape-5 { right: 200px; } .content-panel.right .side-image.device-shape-5 { left: 200px; } .content-panel .side-image.va-mask { background: url(../assets/va-mask-bg.svg) top center no-repeat; height: 120%; width: 60%; max-width: 100%; min-width: 1000px; bottom: -200px; position: absolute; } .content-panel.left .side-image.va-mask { right: -60px; } .content-panel.right .side-image.va-mask { left: -60px; } .content-panel .side-image.va-mask.bottom { bottom: -700px; } .content-panel .side-image.va-cutoff-mask { background: url(../assets/va-mask-bg.svg) 50% center no-repeat; height: 100%; width: 60%; max-width: 100%; min-width: 800px; top: 50%; transform: translateY(-50%); position: absolute; } .content-panel.left .side-image.va-cutoff-mask { right: -340px; } .content-panel.right .side-image.va-cutoff-mask { left: -340px; } .content-panel .bottom-text { bottom: 0px; position: absolute; } .content-panel.left .side-image { float: right; } .content-panel .side-image.outside { height: auto; top: 50%; transform: translateY(-50%); position: absolute; } .content-panel .side-image.outside.wide { max-width: 600px; } .content-panel.left .side-image.outside { right: -130px; } .content-panel.right .side-image.outside { left: -130px; } .content-panel.center .text-content.contained { max-width: 800px; margin: auto; } .content-panel.center .text-content * + .line-link { margin-top: 40px; } .content-panel .figure-item { border-left: 1px #7f7f7f solid; } .content-panel .swiper-slide:first-child .figure-item { border-left: 0px; } .content-panel .figure-item h4 { font-weight: 600; margin: 0px; } .content-panel .figure-item h5 { font-size: 16px; line-height: 20px; font-weight: 600; margin: 0px; } .content-panel .row.logos .col { max-width: 240px; margin-bottom: 26px; } .content-panel .row.logos.animate .col { top: 80px; opacity: 0; visibility: hidden; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.4s; } .content-panel .row.logos.animate .col:nth-child(2) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(2) { transition-delay: 0.5s; } .content-panel .row.logos.animate .col:nth-child(3) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(3) { transition-delay: 0.6s; } .content-panel .row.logos.animate .col:nth-child(4) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(4) { transition-delay: 0.7s; } .content-panel .row.logos.animate .col:nth-child(5) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(5) { transition-delay: 0.8s; } .content-panel .row.logos.animate .col:nth-child(6) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(6) { transition-delay: 0.9s; } .content-panel .row.logos.animate .col:nth-child(7) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(7) { transition-delay: 1.0s; } .content-panel .row.logos.animate .col:nth-child(8) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(8) { transition-delay: 1.1s; } .content-panel .row.logos.animate .col:nth-child(9) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(9) { transition-delay: 1.2s; } .content-panel .row.logos.animate .col:nth-child(10) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(10) { transition-delay: 1.3s; } .content-panel .row.logos.animate .col:nth-child(11) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(11) { transition-delay: 1.4s; } .content-panel .row.logos.animate .col:nth-child(12) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(12) { transition-delay: 1.5s; } .content-panel .row.logos.animate .col:nth-child(13) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(13) { transition-delay: 1.6s; } .content-panel .row.logos.animate .col:nth-child(14) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(14) { transition-delay: 1.7s; } .content-panel .row.logos.animate .col:nth-child(15) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(15) { transition-delay: 1.8s; } .content-panel .row.logos.animate .col:nth-child(16) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(16) { transition-delay: 1.9s; } .content-panel .row.logos.animate .col:nth-child(17) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(17) { transition-delay: 2.0s; } .content-panel .row.logos.animate .col:nth-child(18) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(18) { transition-delay: 2.1s; } .content-panel .row.logos.animate .col:nth-child(19) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(19) { transition-delay: 2.2s; } .content-panel .row.logos.animate .col:nth-child(20) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(20) { transition-delay: 2.3s; } .content-panel .row.logos.animate .col:nth-child(21) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(21) { transition-delay: 2.4s; } .content-panel .row.logos.animate .col:nth-child(22) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(22) { transition-delay: 2.5s; } .content-panel .row.logos.animate .col:nth-child(23) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(23) { transition-delay: 2.6s; } .content-panel .row.logos.animate .col:nth-child(24) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(24) { transition-delay: 2.7s; } .content-panel .row.logos.animate .col:nth-child(25) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(25) { transition-delay: 2.8s; } .content-panel .row.logos.animate .col:nth-child(26) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(26) { transition-delay: 2.9s; } .content-panel .row.logos.animate .col:nth-child(27) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(27) { transition-delay: 3.0s; } .content-panel .row.logos.animate .col:nth-child(28) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(28) { transition-delay: 3.1s; } .content-panel .row.logos.animate .col:nth-child(29) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(29) { transition-delay: 3.2s; } .content-panel .row.logos.animate .col:nth-child(30) { transition-delay: 0.1s; } .content-panel .row.logos.animate.visible .col:nth-child(30) { transition-delay: 3.3s; } .content-panel .logo-features .logo-item { min-height: 100px; } .content-panel .logo-features.grey .logo-item img { filter: grayscale(100%); } .content-panel .logo-features .logo-item img { max-width: 70%; max-height: 82px; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; } @media screen and (min-width: 991px) { .content-panel .logo-features.small .logo-item img { max-height: 50px; } } .content-panel .contact-side-details { width: 100%; max-width: 250px; float: none; } .content-panel .contact-side-details .border-line { border-top: 1px #cccccc solid; margin-top: 20px; padding-bottom: 20px; } .content-panel .contact-side-details .social-icons { height: 40px; margin-top: 10px; margin-bottom: 22px; } .content-panel .contact-side-details h5 { color: #303e47; margin-bottom: 3px; } .content-panel .contact-side-details h6 { color: #666666; font-size: 18px; line-height: 24px; font-weight: 400; margin-bottom: 4px; } .content-panel .contact-side-details p { color: #666666; margin-bottom: 23px; margin-bottom: 6px; } .content-panel .contact-side-details p.small { font-size: 16px; line-height: 22px; margin-bottom: 0px; } .content-panel .contact-side-details .side-item { min-height: 120px; margin-bottom: 40px; } .content-panel .col.border-side { } .content-panel .col.border-side .contact-side-details { border-right: 1px #ccc solid; max-width: 100%; padding-right: 15px; } .content-panel .col.border-side + .col { padding-left: 20px; } .content-panel .col.border-side .contact-side-details .side-item:last-child { min-height: 0px; margin: auto; } .content-panel .accordion { background: none; border-radius: 0px; margin-bottom: 20px; } .content-panel .accordion .accordion-header { margin-bottom: 0px; } .content-panel .accordion .accordion-item { background: none; border: 0px; border-top: 1px #7f7f7f solid; border-radius: 0px; } .content-panel .accordion .accordion-item .accordion-header { background: none; font-size: 22px; line-height: 26px; } .content-panel .accordion .accordion-item .accordion-header button { background: none; color: #333333; font-size: 24px; line-height: 28px; font-weight: 500; box-shadow: none; padding-left: 0px; padding-right: 0px; } .content-panel .accordion .accordion-item .accordion-header button:hover { color: #d10a11; } .content-panel .accordion .accordion-item .accordion-header .accordion-button::after { font-size: 32px; margin-top: -6px; background: none!important; font-weight: 300; font-family: "Font Awesome 5 Pro"; content: "\f054"; transform: none!important; } .content-panel .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { background: none!important; font-weight: 300; font-family: "Font Awesome 5 Pro"; content: "\f077"; transform: none!important; } .content-panel .accordion .accordion-item:last-child { border-bottom: 1px #7f7f7f solid; } .content-panel .accordion .accordion-item .accordion-body { font-size: 20px; line-height: 26px; padding: 0px 0px 20px 0px; text-align: left; } .content-panel .accordion .accordion-item .accordion-body p { font-size: 20px; line-height: 26px; } .content-panel .accordion .accordion-item .accordion-body *:last-child { margin-bottom: 0px; } .content-panel .accordion .accordion-item ul li:first-child { border-bottom: 0px; } .content-panel.center .accordion { max-width: 800px; margin: auto; } .content-panel .container.offset-above { margin-top: -100px; } .content-panel.articles-slider-panel { padding-left: 20px; padding-right: 20px; } .content-panel.success-slider-panel { padding-left: 20px; padding-right: 20px; } .content-panel .row.features .col { margin-bottom: 30px; } .content-panel .row.features.animate .col { top: 80px; opacity: 0; visibility: hidden; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .content-panel .row.features.animate .col:nth-child(2) { transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col:nth-child(2) { transition-delay: 0.3s; } .content-panel .row.features.animate .col:nth-child(3) { transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col:nth-child(3) { transition-delay: 0.5s; } .content-panel .row.features.animate .col:nth-child(4) { transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col:nth-child(4) { transition-delay: 0.7s; } .content-panel .row.features.animate .col:nth-child(5) { transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col:nth-child(5) { transition-delay: 0.9s; } .content-panel .row.features.animate .col:nth-child(6) { transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col:nth-child(6) { transition-delay: 1.1s; } .content-panel .row.features.animate .col:nth-child(7) { transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col:nth-child(7) { transition-delay: 1.3s; } .content-panel .row.features.animate .col:nth-child(8) { transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col:nth-child(8) { transition-delay: 1.5s; } .content-panel.animate .text-content * { position: relative; top: 80px; opacity: 0; visibility: hidden; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s;; } .content-panel.animate.visible .text-content * { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .content-panel.animate .text-content *:nth-child(2) { transition-delay: 0.1s; } .content-panel.animate.visible .text-content *:nth-child(2) { transition-delay: 0.3s; } .content-panel.animate .text-content *:nth-child(3) { transition-delay: 0.1s; } .content-panel.animate.visible .text-content *:nth-child(3) { transition-delay: 0.5s; } .content-panel.animate .text-content *:nth-child(4) { transition-delay: 0.1s; } .content-panel.animate.visible .text-content *:nth-child(4) { transition-delay: 0.7s; } .content-panel .info-panel { background: #faf2d1; padding: 40px; text-align: center; border-radius: 10px; } .content-panel .info-panel .paragraph-container { max-width: 775px; } .content-panel .info-panel .btn { margin-top: 10px; margin-left: auto!important; margin-right: auto!important; } .content-panel .tab-content.articles { margin-top: 40px; } .content-panel .articles .col { margin-bottom: 30px; } .content-panel .articles .article-feature-box { min-height: 400px; } .content-panel .nav-tabs-mobile { display: none; } .content-panel .nav-tabs-mobile .dropdown-item { padding: 0px; } .content-panel .nav-tabs-mobile .dropdown-item a { padding: 6px 15px; } .content-panel .nav-tabs-mobile .dropdown-item a.active { background: #d10a11; color: #ffffff; } .content-panel .nav-tabs-mobile .dropdown-item a:active { background: #d10a11; color: #ffffff; } .content-panel .nav-tabs-mobile .dropdown-item a:focus { background: #d10a11; color: #ffffff; } .content-panel .nav-tabs.articles { border-bottom: 1px #cccccc solid; } .content-panel .nav-tabs.articles .nav-item { margin-right: 40px; } .content-panel .nav-tabs.articles .nav-item .nav-link { background: none; color: #2d2d2d; padding: 15px 0px; border: 0px; } .content-panel .nav-tabs.articles .nav-item .nav-link.active { font-weight: 600; border-bottom: 3px #d10a11 solid; } .icon-feature-box { background: #ffffff; padding: 25px; border: 1px #999999 solid; border-radius: 0px; height: 100%; min-height: 220px; text-align: left; position: relative; transition: 0.2s; transition-timing-function: ease-in; } .icon-feature-box .icon-circle { background: #303e47; width: 65px; height: 65px; border-radius: 50%; margin-bottom: 20px; text-align: center; position: relative; } .icon-feature-box .icon-circle i { color: #ffffff; font-size: 35px; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; } .icon-feature-box img { width: 70px; max-height: 60px; transition: 0.2s; transition-timing-function: ease-in; } .icon-feature-box h5 { margin-bottom: 14px; transition: 0.2s; transition-timing-function: ease-in; } .icon-feature-box h6 { color: #d10a11; font-size: 18px; line-height: 24px; } .icon-feature-box h5 i { color: #d10a11; font-size: 40px; right: 50px; bottom: -5px; position: absolute; transition: 0.2s; transition-timing-function: ease-in; } .icon-feature-box p { font-size: 16px; line-height: 22px; font-weight: 500; margin-bottom: 12px; transition: 0.2s; transition-timing-function: ease-in; } .icon-feature-box p strong { font-size: 17px; font-weight: 600; } .icon-feature-box *:last-child { margin-bottom: 0px; } .icon-feature-box .content { width: 100%; bottom: 25px; position: absolute; } a .icon-feature-box:hover { background: #303e47; border-color: #303e47; transition: 0.2s; transition-timing-function: ease-in; } a .icon-feature-box:hover .icon-circle { background: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } a .icon-feature-box:hover .icon-circle i { color: #303e47; transition: 0.2s; transition-timing-function: ease-in; } a .icon-feature-box:hover img { filter: brightness(0) invert(1); transition: 0.2s; transition-timing-function: ease-in; } a .icon-feature-box:hover h5 { color: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } a .icon-feature-box:hover p { color: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } a .icon-feature-box:hover h6 { color: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } a .icon-feature-box:hover h5 i { color: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } .logo-holder-box { background: #ffffff; height: 216px; width: 216px; border: 1px #cccccc solid; margin: auto; position: relative; transition: 0.5s; transition-timing-function: ease-in; } .logo-holder-box:hover { border-color: #d10a11; transition: 0.1s; transition-timing-function: ease-in; } .logo-holder-box img { max-width: 80%; max-height: 70px; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; position: absolute; } .form-side-box { background: #ebeae1; border-radius: 5px; padding: 5px 30px; width: 90%; max-width: 440px; float: right; } .form-side-box h4 { color: #333333; font-weight: 700; margin-bottom: 10px; } .form-side-box p { color: #333333; } .form-side-box .error-message { font-size: 20px; line-height: 26px; font-weight: 400 !important; margin-top: 15px; } .form-side-box .formeo-row-wrap:first-child { margin: 0px!important; } .form-side-box .formeo-row-wrap:last-child { margin: 0px!important; } .form-side-box .f-field-group { margin-bottom: 15px; } .form-side-box .f-field-group:last-child { margin: 0px; } .form-side-box .form-control { border: 1px #ffffff solid; box-shadow: none; font-size: 16px; } .form-side-box input.form-control { height: 40px; } .form-side-box textarea.form-control { height: 115px; } .form-side-box label { display: none!important; } .form-side-box .btn { width: 100%; padding: 14px 22px; margin-top: 10px; } .form-details-side-box { background: #ebeae1; border-radius: 5px; padding: 35px; width: 90%; position: relative; } .form-details-side-box p { font-size: 15px; line-height: 21px; } .form-details-side-box .error-message { font-size: 20px; line-height: 26px; font-weight: 400 !important; } .form-details-side-box .form-control { border: 1px #ffffff solid; box-shadow: none; font-size: 17px; height: 38px; } .form-details-side-box textarea.form-control { height: 115px; } .form-details-side-box .btn { width: 100%; padding: 14px 22px; margin-top: 10px; } .form-details-side-box .error-message { margin: 0px; } .spotlight-feature-box { background: #ffffff; border: 1px #ccc solid; padding: 40px 40px 70px 40px; position: relative; } .spotlight-feature-box .feature-content { max-width: 500px; width: 80%; position: relative; z-index: 1; } .spotlight-feature-box .feature-content h2 { margin-bottom: 20px; } .spotlight-feature-box .feature-content h6 { color: #d10a11; } .spotlight-feature-box .feature-content .link { color: #d10a11; font-weight: 600; margin: 0px; } .spotlight-feature-box .side-image { height: 100%; width: 100%; max-width: 580px; top: 0px; right: 0px; position: absolute; background-position: center 50%; background-repeat: no-repeat; background-size: cover; mask: url(../assets/hero-feature-box-mask.svg) center 50% no-repeat; -webkit-mask: url(../assets/hero-feature-box-mask.svg) center 50% no-repeat; } .spotlight-feature-box:hover { border-color: #d10a11; } .success-feature-box { background: #ffffff; min-height: 460px; padding: 0px; position: relative; } .success-feature-box .background { height: 200px; width: 100%; background-position: 50% center; background-size: 600px; background-repeat: no-repeat; transition: 0.3s; transition-timing-function: ease; } .success-feature-box:hover .background { background-size: 650px; transition: 0.3s; transition-timing-function: ease; } .success-feature-box .feature-content { padding: 30px 25px; } .success-feature-box .feature-content h6.date { color: #d10a11; font-size: 16px; line-height: 22px; font-weight: 400; margin-bottom: 8px; } .success-feature-box .feature-content h6 { color: #666666; } .success-feature-box .feature-content h5 { color: #d10a11; max-height: 200px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 100%; margin-bottom: 25px; } .success-feature-box .feature-content .link { margin: 0px; bottom: 30px; position: absolute; } .success-feature-box.border { border: 1px #cccccc solid!important; } .swiper.success.animate .success-feature-box { position: relative; top: 80px; opacity: 0; visibility: hidden; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.success.animate.visible .success-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.success.animate .swiper-slide:nth-child(2) .success-feature-box { transition-delay: 0.1s; } .swiper.success.animate.visible .swiper-slide:nth-child(2) .success-feature-box { transition-delay: 0.3s; } .swiper.success.animate .swiper-slide:nth-child(3) .success-feature-box { transition-delay: 0.1s; } .swiper.success.animate.visible .swiper-slide:nth-child(3) .success-feature-box { transition-delay: 0.5s; } .swiper.success.animate .swiper-slide:nth-child(4) .success-feature-box { transition-delay: 0.1s; } .swiper.success.animate.visible .swiper-slide:nth-child(4) .success-feature-box { transition-delay: 0.7s; } .article-feature-box { background: #ffffff; min-height: 365px; padding: 5px; border: 1px #ccc solid; position: relative; } .article-feature-box .background { height: 150px; width: 100%; background-size: 370px; background-repeat: no-repeat; background-position: 50% center; transition: 0.3s; transition-timing-function: ease; } .article-feature-box:hover .background { background-size: 420px; transition: 0.3s; transition-timing-function: ease; } .article-feature-box .feature-content { padding: 25px 20px; } .article-feature-box .feature-content h6.date { color: #d10a11; font-size: 16px; line-height: 22px; font-weight: 400; margin-bottom: 8px; } .article-feature-box .feature-content h6 { color: #666666; } .article-feature-box .feature-content h5 { color: #2d2d2d; font-size: 22px; line-height: 28px; max-height: 200px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 100%; margin-bottom: 25px; } .article-feature-box .feature-content .link { color: #d10a11; font-size: 16px; line-height: 22px; margin: 0px; bottom: 30px; position: absolute; } .swiper.article.animate .article-feature-box { position: relative; top: 80px; opacity: 0; visibility: hidden; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.article.animate.visible .article-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.article.animate .swiper-slide:nth-child(2) .article-feature-box { transition-delay: 0.1s; } .swiper.article.animate.visible .swiper-slide:nth-child(2) .article-feature-box { transition-delay: 0.3s; } .swiper.article.animate .swiper-slide:nth-child(3) .article-feature-box { transition-delay: 0.1s; } .swiper.article.animate.visible .swiper-slide:nth-child(3) .article-feature-box { transition-delay: 0.5s; } .swiper.article.animate .swiper-slide:nth-child(4) .article-feature-box { transition-delay: 0.1s; } .swiper.article.animate.visible .swiper-slide:nth-child(4) .article-feature-box { transition-delay: 0.7s; } .bio-box-feature.flip { height: 100%; min-height: 477px; padding: 0px; border: none; background-color: transparent; perspective: 1000px; position: relative; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .bio-box-feature.flip .flip-card-inner { position: relative; width: 100%; height: 100%; padding: 0px; text-align: left; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .bio-box-feature.flip:hover .flip-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .bio-box-feature.flip .flip-card-front, .flip-card-back { background: #ffffff; position: absolute; width: 100%; height: 100%; padding: 30px; border: 1px #cccccc solid; border-radius: 0px; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .bio-box-feature.flip .flip-card-front { padding: 5px; } .bio-box-feature.flip .flip-card-front .bio-image { background-image: url('/assets/Inno-MainHeader-SeniorMan.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; width: 100%; height: 385px; } .bio-box-feature.flip .top-content { padding: 0px 0px 0px 0px; margin-bottom: 20px; } .bio-box-feature.flip .bottom-content { padding: 15px; } .bio-box-feature.flip .center-content { max-height: 350px; overflow: auto; margin-right: -30px; padding-right: 30px; } .bio-box-feature.flip h5 { color: #d10a11; font-size: 22px; line-height: 28px; margin-bottom: 5px; } .bio-box-feature.flip h6 { color: #666666; font-size: 13px; line-height: 19px; margin: 0px; } .bio-box-feature.flip i { color: #d10a11; font-size: 35px; right: 20px; bottom: 20px; position: absolute; } .bio-box-feature.flip .profile-image { background-size: cover; width: 60px; height: 60px; border-radius: 50%; top: 26px; right: 20px; position: absolute; } .bio-box-feature:hover { cursor: pointer; } .bio-box-feature.flip:hover { background-color: transparent; } .bio-box-feature.flip:hover .flip-card-front { } /* Style the back side */ .bio-box-feature.flip .flip-card-back { background: #303e47; transform: rotateY(180deg); } .bio-box-feature.flip .flip-card-back h5 { color: #ffffff; } .bio-box-feature.flip .flip-card-back h6 { color: #ffffff; } .bio-box-feature.flip .flip-card-back p { color: #cccccc; font-size: 16px; line-height: 22px; margin: 0px 0px 10px 0px; } .bio-box-feature.flip .center { width: 80%; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; } /** * Internal Page Panel * ========================================================================== */ .internal-page-panel { padding: 55px 20px; overflow: hidden; position: relative; } .internal-page-panel .article-sub-title { margin-bottom: 30px; } .internal-page-panel .article-top p { margin-top: 5px; } .internal-page-panel .article-top p a { color: #d10a11; } .internal-page-panel .featured-image { height: 250px; width: 100%; background-position: 50% center; background-size: cover; } .internal-page-panel .article-content { margin-top: 45px; } .internal-page-panel .article-content .text-content { color: #666666; font-size: 18px; line-height: 24px; width: 100%; max-width: 90%; } .internal-page-panel .article-content .text-content .article-title { color: #303e47; margin-bottom: 25px; } .internal-page-panel .article-content .text-content h4 { margin-top: 30px; margin-bottom: 15px; } .internal-page-panel .article-content .text-content p { color: #666666; font-size: 18px; line-height: 24px; margin-bottom: 18px; } .internal-page-panel .article-content .text-content table.table th { border-bottom: 2px #d10a11 solid; box-shadow: 0px; } .internal-page-panel .article-side-details { width: 100%; max-width: 250px; float: right; } .internal-page-panel .article-side-details .border-line { border-top: 1px #cccccc solid; padding-bottom: 20px; } .internal-page-panel .article-side-details .social-icons { height: 40px; margin-top: 10px; margin-bottom: 22px; } .internal-page-panel .article-side-details h5 { color: #303e47; margin-bottom: 20px; } .internal-page-panel .article-side-details h6 { color: #666666; font-size: 18px; line-height: 24px; font-weight: 400; margin-bottom: 3px; } /** * Video Slider Panel * ========================================================================== */ /* .content-panel.animate-head { } .content-panel.animate-head .text-content h2 { opacity: 0; visibility: hidden; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.2s; } .content-panel.animate-head .text-content h4 { opacity: 0; visibility: hidden; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.6s; } .content-panel.animate-head.visible .text-content h2 { opacity: 1; visibility: visible; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.2s; } .content-panel.animate-head.visible .text-content h4 { opacity: 1; visibility: visible; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.6s; } */ .video-slider-panel { position: relative; } .video-slider-panel .swiper-slide { padding: 0px 30px; min-height: 600px; } .video-slider-panel .swiper-slide .video-bg { width: 100%; height: 100%; top: 0px; left: 0px; right: 0px; position: absolute; margin: auto; } .video-slider-panel .swiper-slide .video-bg video { width: 100%; min-width: 1600px; top: -160px; left: 0px; right: 0px; margin: auto; position: absolute; } .video-slider-panel .swiper-slide .video-bg .overlay { background: #000000; opacity: 0.6; width: 100%; height: 100%; top: 0px; left: 0px; right: 0px; position: absolute; margin: auto; z-index: 1; } .video-slider-panel .swiper-slide .text-content { width: 90%; max-width: 600px; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; z-index: 2; } .video-slider-panel .swiper-slide .text-content h2 { color: #d10a11; opacity: 0; visibility: hidden; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.2s; } .video-slider-panel .swiper-slide .text-content ul { list-style: none; padding: 0px; margin: 0px; opacity: 0; visibility: hidden; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.6s; } .video-slider-panel .swiper-slide .text-content ul li { color: #ffffff; padding: 10px 0px; border-bottom: 1px #7f7f7f solid; } .video-slider-panel .swiper-slide .text-content ul li:last-child { border: 0px; } .video-slider-panel .swiper-slide.swiper-slide-active .text-content h2 { opacity: 1; visibility: visible; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.2s; } .video-slider-panel .swiper-slide.swiper-slide-active .text-content ul { opacity: 1; visibility: visible; transition: 0.5s; transition-timing-function: ease; transition-delay: 0.6s; } .video-slider-panel .swiper-pagination { bottom: 40px; position: absolute; z-index: 2; } .video-slider-panel .swiper-pagination .swiper-pagination-bullet { background: #ffffff; opacity: 0.7; width: 15px; height: 15px; } .video-slider-panel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } @media screen and (min-width: 1500px) { .video-slider-panel .swiper-slide .text-content h2 { font-size: 46px; line-height: 54px; } .video-slider-panel .swiper-slide .text-content ul li { font-size: 22px; line-height: 28px; } } .video-slider-panel .slider-nav-container { max-width: 1400px; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; z-index: 1;} .video-slider-panel .gallery-arrow { width: 48px; height: 48px; font-size: 31px; bottom: auto; } .video-slider-panel .gallery-arrow.prev { top: 50%; transform: translateY(-50%); left: 30px; position: absolute; z-index: 1; } .video-slider-panel .gallery-arrow.next { top: 50%; transform: translateY(-50%); left: auto; right: 30px; position: absolute; z-index: 1; } /** * Image holder Panel * ========================================================================== */ .image-holder-panel { height: 470px; padding-top: 10px; } /** * Footer * ========================================================================== */ footer { } footer .footer-top { background: #303e47; padding: 55px 20px 55px 20px; position: relative; } footer .footer-top .text-content { width: 100%; max-width: 350px; } footer .footer-top .text-content h4 { margin-bottom: 14px; } footer .footer-top .text-content h5 { font-weight: 300; margin-bottom: 25px; } footer .footer-top .text-content .social-icons { margin-top: 88px; } footer .footer-top h6 { color: #999999; font-size: 18px; line-height: 24px; } footer .footer-top h1 { color: #999999; font-size: 18px; line-height: 24px; } footer .footer-top .right { padding-left: 60px; } footer .footer-top .links h5 { color: #d10a11; font-size: 21px; line-height: 27px; margin-bottom: 12px; } footer .footer-top .links h5 a { color: #d10a11; } footer .footer-top .links h5 a:hover { color: #d10a11; } footer .footer-top .links ul { list-style: none; padding: 0px; margin: 0px; } footer .footer-top .links ul li { color: #cccccc; font-size: 16px; line-height: 22px; margin-bottom: 10px; } footer .footer-top .links ul li a { color: #cccccc; } footer .footer-top .links ul li a:hover { color: #ffffff; } footer .footer-top .bottom-text { margin-top: 35px; } footer .footer-bottom { background: #303e47; border-top: 2px #4f5b62 solid; padding: 25px 20px 20px 20px; position: relative; } footer .footer-bottom .logo { float: left; width: 190px; margin-top: 14px; margin-right: 35px; } footer .footer-bottom p { color: #999999; font-size: 13px; line-height: 20px; display: inline-block; margin: 15px 0px 0px 0px; } footer .footer-bottom p a { color: #cccccc; } footer .footer-bottom p a:hover { color: #ffffff; } footer .footer-bottom p br.mobile { display: none; } footer .footer-bottom .logos { text-align: right; float: right; } footer .footer-bottom .logos img { height: 50px; margin-left: 10px; } /** * Modals * ========================================================================== */ .modal-backdrop { z-index: 1250; } .modal { z-index: 1255; } .partner-modal .modal-dialog { --bs-modal-width: 900px; } .partner-modal .modal-content { position: relative; } .partner-modal .close { width: 36px; height: 36px; background: none; border: 1px #999999 solid; border-radius: 50%; padding: 0px; opacity: 1; right: 25px; top: 25px; position: absolute; } .partner-modal .close i { color: #666666; font-size: 20px; line-height: 28px; } .partner-modal .close:hover { background: #d10a11; border-color: #d10a11; } .partner-modal .close:hover i { color: #ffffff; } .partner-modal .modal-body { padding: 50px 70px 50px 50px; } .partner-modal .modal-body h5 { color: #d10a11; } .partner-modal .modal-body h6 { font-size: 17px; line-height: 23px; margin-bottom: 20px; } .partner-modal .modal-body ul { list-style: none; padding: 0px; } .partner-modal .modal-body ul li { font-size: 14px; line-height: 20px; padding: 8px 0px; border-bottom: 1px #ccc solid; } .partner-modal .modal-body p { font-size: 14px; line-height: 20px; } .partner-modal .modal-body p strong { font-weight: 600; } .partner-modal .modal-body p.no-margin { margin: 0px; } .partner-modal .modal-body .logo-box { background: #ffffff; height: 216px; width: 216px; border: 1px #cccccc solid; margin: auto; position: relative; } .partner-modal .modal-body .logo-box img { max-width: 80%; max-height: 70px; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; position: absolute; } .partner-modal .modal-body img.accred { max-width: 150px; margin: 25px auto auto auto; } .partner-modal .modal-body .left { text-align: center; } @media screen and (max-width: 991px) { .partner-modal .modal-body { padding: 30px 30px 50px 30px; } .partner-modal .modal-body .left { text-align: left; margin-bottom: 30px; } .partner-modal .modal-body h6 { font-size: 15px; line-height: 21px; } .partner-modal .modal-body .logo-box { height: 120px; width: 120px; margin: 0px; display: inline-block; } .partner-modal .modal-body .logo-box img { max-width: 80%; max-height: 50px; } .partner-modal .modal-body img.accred { max-width: 100px; margin: 12px auto auto 20px; display: inline-block; vertical-align: top; } } /** * Gallery Arrow * ========================================================================== */ .gallery-arrow { background: none; width: 38px; height: 38px; font-size: 22px; color: #e8e8e8; border: 1px #e8e8e8 solid; border-radius: 50%; top: auto; bottom: -65px; text-align: center; position: absolute; } .gallery-arrow.prev { left: calc(var(--bs-gutter-x) * .5); } .gallery-arrow.next { left: 62px; } .gallery-arrow::after { display: none; } .gallery-arrow:hover { color: #ffffff; border-color: #ffffff; } .gallery-arrow.dark { color: #666666; border-color: #999999; } .gallery-arrow.dark:hover { color: #d10a11; border-color: #d10a11; } /** * Social Icons * ========================================================================== */ .social-icons { margin: 0px 0px 0px 0px; padding: 0px; list-style: none; } .social-icons li { float: left; width: 40px; height: 40px; margin-right: 12px; border: 0px; } .social-icons li a { background: none; border: 1px #ffffff solid; border-radius: 50%; height: 40px; width: 40px; font-size: 20px; position: relative; display: block; text-align: center; } .social-icons li a:hover { background: #ffffff; } .social-icons li a i { color: #ffffff; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; } .social-icons li a:hover i { color: #333333; } .social-icons.vertical { width: 50px; text-align: center; position: relative; } .social-icons.vertical ul { list-style: none; padding: 0px; margin: 0px;} .social-icons.vertical li { display: block; float: none; margin: 12px auto; } .social-icons.vertical li a { background: none; border: 1px #333333 solid; } .social-icons.vertical li a:hover { background: #333333; } .social-icons.vertical li a i { color: #333333 } .social-icons.vertical li a:hover i { color: #ffffff; } .social-icons.dark li a { background: none; border: 1px #303e47 solid; } .social-icons.dark li a:hover { background: #303e47; } .social-icons.dark li a i { color: #303e47 } .social-icons.dark li a:hover i { color: #ffffff; } /** * Dark Theme * ========================================================================== */ .dark-theme h1 { color: #ffffff; } .dark-theme h2 { color: #ffffff; } .dark-theme h3 { color: #ffffff; } .dark-theme h4 { color: #ffffff; } .dark-theme h5 { color: #ffffff; } .dark-theme h6 { color: #ffffff; } .dark-theme p { color: #cccccc; } .dark-theme li { color: #cccccc; } .dark-theme .accordion .accordion-item .accordion-header button { color: #ffffff; } /** * Resolutions * ========================================================================== */ @media screen and (max-width: 1850px) { .internal-header-panel .side-mask { width: 36%; } } @media screen and (max-width: 1800px) { .content-panel.left .side-image.device-shape { right: 100px; } .content-panel.right .side-image.device-shape { left: 100px; } .content-panel.left .side-image.device-shape-2 { right: 100px; } .content-panel.right .side-image.device-shape-2 { left: 100px; } .content-panel.left .side-image.device-shape-5 { right: 100px; } .content-panel.right .side-image.device-shape-5 { left: 100px; } } @media screen and (max-width: 1750px) { h1 { font-size: 39px; line-height: 45px; } h2 { font-size: 39px; line-height: 45px; } h3 { font-size: 34px; line-height: 40px; } h4 { font-size: 28px; line-height: 34px; } h5 { font-size: 22px; line-height: 28px; } .h1 { font-size: 39px; line-height: 45px; } .h2 { font-size: 39px; line-height: 45px; } .h3 { font-size: 34px; line-height: 40px; } .h4 { font-size: 28px; line-height: 34px; } .h5 { font-size: 22px; line-height: 28px; } .icon-feature-box h5 { font-size: 22px; line-height: 28px; } footer .footer-top .bottom-text { margin-top: 30px; } } @media screen and (max-width: 1600px) { .content-panel.left .side-image.va-mask { right: -160px; } .content-panel.right .side-image.va-mask { left: -160px; } .content-panel.left .side-image.device-shape { right: 0px; } .content-panel.right .side-image.device-shape { left: 0px; } } @media screen and (max-width: 1500px) { h1 { font-size: 36px; line-height: 42px; } h2 { font-size: 36px; line-height: 42px; } h3 { font-size: 32px; line-height: 38px; } h4 { font-size: 26px; line-height: 32px; } h5 { font-size: 21px; line-height: 27px; } .h1 { font-size: 36px; line-height: 42px; } .h2 { font-size: 36px; line-height: 42px; } .h3 { font-size: 32px; line-height: 38px; } .h4 { font-size: 26px; line-height: 32px; } .h5 { font-size: 21px; line-height: 27px; } .content-panel.right .side-image.device-shape { left: -60px; } .content-panel.left .side-image.device-shape-2 { right: 0px; } .content-panel.right .side-image.device-shape-2 { left: 0px; } .content-panel.left .side-image.device-shape-5 { right: 0px; } .content-panel.right .side-image.device-shape-5 { left: 0px; } .internal-header-panel .side-mask { width: 34%; } } @media screen and (max-width: 1400px) { .content-panel .row.logos .col { max-width: unset; } .logo-holder-box { height: 250px; width: 250px; } } @media screen and (max-width: 1350px) { .content-panel.left .side-image.device-shape { right: -160px; } .content-panel.right .side-image.device-shape { left: -160px; } .content-panel.left .side-image.va-mask { right: -240px; } .internal-header-panel .side-mask { width: 32%; } } @media screen and (max-width: 1260px) { .internal-header-panel .side-mask { width: 30%; } } @media screen and (max-width: 1200px) { h1 { font-size: 33px; line-height: 40px; } h2 { font-size: 33px; line-height: 40px; } h3 { font-size: 30px; line-height: 36px; } h4 { font-size: 24px; line-height: 30px; } h5 { font-size: 20px; line-height: 26px; } .h1 { font-size: 33px; line-height: 40px; } .h2 { font-size: 33px; line-height: 40px; } .h3 { font-size: 30px; line-height: 36px; } .h4 { font-size: 24px; line-height: 30px; } .h5 { font-size: 20px; line-height: 26px; } .header .logo { margin-right: 0px; } .header .nav { display: none; } .header .buttons { margin-top: 6px; } .header .buttons .btn { display: none; } .header .buttons .icon-circle { width: 36px; height: 36px; margin-top: 0px; margin-left: 12px; margin-right: 0px; } .header .buttons .icon-circle.user i { font-size: 28px; } .header .buttons .icon-circle.nav-i { display: inline-block; } .header .buttons .icon-circle.nav-i i { font-size: 20px; top: 6px; } .header .buttons .search { margin-top: 4px; } .header .buttons .search i { font-size: 27px; } .header.scrolled .buttons { margin-top: 8px; } .hero-feature-box .side-image { right: -120px; } .spotlight-feature-box .side-image { right: -120px; } .content-panel.left .side-image.va-mask { min-width: 650px; right: -120px; bottom: -300px; } .content-panel.left .side-image.va-cutoff-mask { right: -400px; } .content-panel.right .side-image.va-cutoff-mask { left: -400px; } .content-panel.left .side-image.device-shape { right: -190px; } .content-panel.right .side-image.device-shape { left: -190px; } .content-panel.left .side-image.device-shape-2 { right: -100px; } .content-panel.right .side-image.device-shape-2 { left: -100px; } .content-panel.left .side-image.device-shape-5 { right: -100px; } .content-panel.right .side-image.device-shape-5 { left: -100px; } .form-details-side-box { width: 100%; margin-bottom: 20px; } .article-feature-box .feature-content h5 { font-size: 20px; line-height: 26px; } footer .social-icons li { margin-left: 6px; margin-right: 6px; } footer .footer-top .text-content { width: 100%; max-width: 350px; margin: auto; text-align: center; } footer .footer-top .text-content .social-icons { width: 156px; height: 40px; margin-top: 36px; margin-left: auto; margin-bottom: 30px; margin-right: auto; } footer .footer-top .links { text-align: center; padding-top: 20px; } footer .footer-top h6 { text-align: center; } footer .footer-top h1 { text-align: center; } footer .footer-top .right { padding-left: calc(var(--bs-gutter-x) * .5); } footer .footer-top .bottom-text { margin-top: 30px; } footer .footer-bottom p { font-size: 12px; line-height: 18px; } footer .footer-bottom .logos img { margin-bottom: 15px; } } @media screen and (max-width: 1120px) { .solution-feature-box .feature-content { padding: 20px 15px; } footer .footer-bottom { text-align: center; } footer .footer-bottom .logo { float: none; margin: auto auto 15px auto; } footer .footer-bottom .logos { text-align: center; float: none; margin-top: 20px; } } @media screen and (max-width: 1050px) { .hero-feature-box .side-image { right: -160px; } .spotlight-feature-box .side-image { right: -160px; } } @media screen and (max-width: 991px) { h1 { font-size: 30px; line-height: 38px; } h2 { font-size: 30px; line-height: 38px; } h3 { font-size: 28px; line-height: 35px; } h6 { font-size: 18px; line-height: 24px; } .h1 { font-size: 30px; line-height: 38px; } .h2 { font-size: 30px; line-height: 38px; } .h3 { font-size: 28px; line-height: 35px; } p { font-size: 16px; line-height: 22px; } li { font-size: 16px; line-height: 22px; } .hero-panel .text-content { text-align: center; padding-top: 20px; } .hero-panel .swiper { margin-top: 60px; } .hero-feature-box { padding: 40px 40px 0px 40px; } .hero-feature-box .feature-content { max-width: 500px; width: 100%; text-align: center; margin: auto auto 40px auto; } .hero-feature-box .side-image { height: 100%; width: 100%; max-width: 450px; min-height: 250px; margin: auto; right: auto; position: relative; mask-position: 50% center; -webkit-mask-position: 50% center; } .spotlight-feature-box { padding: 40px 40px 0px 40px; } .spotlight-feature-box .feature-content { max-width: 500px; width: 100%; text-align: center; margin: auto auto 40px auto; } .spotlight-feature-box .side-image { height: 100%; width: 100%; max-width: 450px; min-height: 250px; margin: auto; right: auto; position: relative; mask-position: 50% center; -webkit-mask-position: 50% center; } .internal-header-panel { text-align: center; } .internal-header-panel .side-mask { display: none; } .image-holder-panel { height: auto; padding-top: 10px; } .content-panel { padding: 55px 0px; } .content-panel .text-content { text-align: center; padding-left: 20px; padding-right: 20px; } .content-panel .bottom-text { margin-top: 30px; bottom: auto; position: relative; } .content-panel .contact-side-details { width: 100%; max-width: 100%; float: none; text-align: center; margin-top: 40px; border: 0px!important; padding: 0px!important; } .content-panel .contact-side-details .side-item { min-height: auto; margin-bottom: 40px; } .content-panel .col.border-side + .col { padding-left: calc(var(--bs-gutter-x) * .5); } .content-panel .container.offset-above { margin-top: 40px; } .content-panel.left .side-image { float: none; margin: 40px auto auto auto; } .content-panel .side-image.va-mask { background-position: bottom center; left: 0px!important; right: 0px!important; top: auto; bottom: -60px!important; margin: auto; } .content-panel .side-image.va-cutoff-mask { display: none; } .content-panel .side-image.offset-height.bottom img { position: relative; } .content-panel .side-image.device-shape { background-size: cover; top: 80px; left: auto!important; right: auto!important; margin: -40px auto auto auto; position: relative; max-width: 100%; min-height: 300px; -webkit-mask-size: cover; } .content-panel .side-image.device-shape-2 { display: none; height: 500px; max-width: 500px; mask-size: 462px; -webkit-mask-size: 462px; bottom: 0px!important; left: auto!important; right: auto!important; margin-top: 20px!important; margin-bottom: -55px!important; margin-left: auto!important; margin-right: auto!important; position: relative; } .content-panel .side-image.device-shape-5 { height: 500px; max-width: 500px; mask-size: 462px; -webkit-mask-size: 462px; bottom: 0px!important; left: auto!important; right: auto!important; margin-top: 20px!important; margin-bottom: -55px!important; margin-left: auto!important; margin-right: auto!important; position: relative; } .content-panel .side-image.va-mask.bottom { display: none; } .content-panel.vertical-center { padding: 80px 0px; min-height: auto!important; } .content-panel.vertical-center .col { min-height: auto!important; } .content-panel.vertical-center .text-content { text-align: center; position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; max-width: 620px; margin: auto; } .content-panel.vertical-center .side-image.full-height { margin-top: 0px; float: none; bottom: -80px; text-align: center; } .content-panel .side-image.full-height img { width: auto; max-height: 300px; margin: auto; position: relative; } .content-panel .logo-features .logo-item { min-height: 80px; } .content-panel .logo-features .logo-item img { max-width: 80%; max-height: 62px; } .internal-page-panel .article-side-details { max-width: 100%; float: none; margin-top: 30px; } .internal-page-panel .article-content .text-content { font-size: 16px; line-height: 22px; max-width: 100%; } .internal-page-panel .article-content .text-content p { font-size: 16px; line-height: 22px; } .form-side-box { float: none; margin: 40px auto auto auto; } .form-side-box .formeo-row { display: block!important; } .form-side-box .formeo-row .formeo-column { padding: 0px!important; width: 100% !important; } .form-side-box .formeo-row .formeo-column + .formeo-column { margin-top: 22px; } .form-side-box .error-message { font-size: 16px; line-height: 22px; } .form-details-side-box { width: 100%; padding: 30px; } .form-details-side-box .formeo-row { display: block!important; } .form-details-side-box .formeo-row .formeo-column { padding: 0px!important; width: 100% !important; } .form-details-side-box .formeo-row .formeo-column + .formeo-column { margin-top: 22px; } .form-details-side-box .error-message { font-size: 16px; line-height: 22px; } .bio-box-feature.flip:hover .flip-card-inner { transform: none; } .bio-box-feature.flip.active .flip-card-inner { transform: rotateY(180deg); } .animate .solution-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .animate.visible .solution-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .content-panel .row.features.animate .col { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .content-panel .row.features.animate.visible .col { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .content-panel.animate .text-content * { position: relative; top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s;; } .content-panel.animate.visible .text-content * { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.success.animate .success-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.success.animate.visible .success-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.article.animate .article-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .swiper.article.animate.visible .article-feature-box { top: 0px; opacity: 1; visibility: visible; transition: 0.3s; transition-timing-function: ease; transition-delay: 0.1s; } .video-slider-panel .swiper-slide { padding: 0px 30px; min-height: 500px; } .video-slider-panel .swiper-slide .text-content { margin-top: -80px; } .video-slider-panel .slider-nav-container { top: auto; transform: none; top: auto; transform: none; bottom: 180px; } .video-slider-panel .gallery-arrow.prev { right: 90px; transform: none; } .video-slider-panel .gallery-arrow.next { left: 90px; transform: none; } .gallery-arrow.prev { left: -55px; right: 0px; margin: auto; } .gallery-arrow.next { left: 0px; right: -55px; margin: auto; } } @media screen and (max-width: 767px) { h1 { font-size: 28px; line-height: 36px; } h2 { font-size: 28px; line-height: 36px; } h3 { font-size: 26px; line-height: 32px; } h4 { font-size: 23px; line-height: 29px; } .h1 { font-size: 28px; line-height: 36px; } .h2 { font-size: 28px; line-height: 36px; } .h3 { font-size: 26px; line-height: 32px; } .h4 { font-size: 23px; line-height: 29px; } .internal-header-panel { padding: 110px 20px 45px 20px; } .content-panel .nav-tabs-mobile { display: block; text-align: center; } .content-panel .nav-tabs-mobile .btn.dropdown-toggle { width: 100%; max-width: 340px; margin: auto; } .content-panel .nav-tabs.articles { display: none; } .content-panel .side-image.device-shape-2 { margin-bottom: -100px!important; } .content-panel .side-image.device-shape-5 { margin-bottom: -100px!important; } .content-panel .accordion .accordion-item .accordion-header button { font-size: 21px; line-height: 25px; } .success-feature-box { max-width: 500px; margin: auto; } .article-feature-box { max-width: 350px; margin: auto; } .bio-box-feature.flip { max-width: 460px; margin: auto; } footer .footer-top h6 { font-size: 16px; line-height: 22px; } footer .footer-top h1 { font-size: 16px; line-height: 22px; } footer .footer-bottom p br.mobile { display: inline-block; } } @media screen and (max-width: 600px) { .hero-panel .text-content h1 { font-size: 24px; line-height: 32px; } .hero-panel .text-content h2 { font-size: 24px; line-height: 32px; } .hero-feature-box { padding: 30px 30px 0px 30px; } .hero-feature-box .side-image { max-width: 350px; min-height: 200px; } .spotlight-feature-box { padding: 30px 30px 0px 30px; } .spotlight-feature-box .side-image { max-width: 350px; min-height: 200px; } .form-side-box { width: 96%; } footer .footer-bottom { padding-left: 0px; padding-right: 0px; } } @media screen and (max-width: 480px) { .hero-feature-box .side-image { max-width: 300px; min-height: 160px; } .spotlight-feature-box .side-image { max-width: 300px; min-height: 160px; } } @media screen and (max-width: 400px) { .hero-feature-box { padding: 30px 25px 0px 25px; } .hero-feature-box .feature-content { min-height: 258px; } .hero-panel .text-content h1 { font-size: 22px; line-height: 30px; } .hero-panel .text-content h2 { font-size: 22px; line-height: 30px; } .hero-feature-box .side-image { max-width: 280px; min-height: 140px; } .spotlight-feature-box .side-image { max-width: 280px; min-height: 140px; } } /** * Slider * ========================================================================== */ .swiper * { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } /* Very important for having a smooth transitions. */ .swiper-free-mode > .swiper-wrapper { transition-timing-function: linear; }