/** * Boostrap Core Framework Overrides * ========================================================================== */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap'); .container { max-width: 1170px; width: 100%; } .no-pad { padding: 0px; margin: 0px; } body { font-family: 'Poppins', sans-serif; } a { text-decoration: none; } label { font-size: 14px; } .passstrength { border: 1px solid #999; width: 100%; height: 12px; margin-top: 10px; border-radius: 20px; overflow: clip; } .passstrength .bar { height: 10px; } .passstrength .bar.medium { width: 75%; background-color: orange; } .passstrength .bar.bad { width: 25%; background-color: red; } .passstrength .bar.strong { width: 100%; background-color: green; } .passstrength .bar.normal { width: 50%; background-color: yellow;} .togglePassword i { font-size: 22px; line-height: 38px; cursor: pointer; position: relative; top: -40px; right: 0px; height: 40px; width: 50px; pointer-events: initial; z-index: 500; float: right;} .btn { font-size: 16px; line-height: 16px; font-weight: 600; border-radius: 30px; padding: 11px 24px 10px 24px; text-transform: uppercase; box-shadow: none; transition-timing-function: ease-in; transition: 0.2s; font-family: 'Poppins', sans-serif; } .btn:hover { text-transform: uppercase; transition-timing-function: ease-in; transition: 0.2s; } .btn-green { background: #96ca50; color: #ffffff; border-color: #96ca50; } .btn-green:hover { background: #8bbb4a; border-color: #8bbb4a; color: #ffffff; } .btn-green:focus { color: #ffffff; background: #8bbb4a; } .btn-blue-keyline { background: #fff; color: #31aabd; border-color: #31aabd; float: right; margin-left: 15px; } .btn-blue-keyline:hover:hover { background: #31aabd; border-color: #31aabd; color: #fff; } .btn-blue-keyline:hover:focus { color: #fff; background: #27aae2; } .btn-green-keyline { background: #fff; color: #96ca50; border-color: #96ca50; margin-right: 15px; } .btn-green-keyline:hover:hover { background: #8bbb4a; border-color: #8bbb4a; color: #fff; } .btn-green-keyline:hover:focus { color: #fff; background: #8bbb4a; } .btn-grey-keyline { background: #fff; color: #666666; border-color: #666666; float: left; margin-left: 15px; } .btn-grey-keyline:hover:hover { background: #666666; border-color: #666666; color: #fff; } .btn-grey-keyline:hover:focus { color: #fff; background: #1b8a93; } a { text-decoration: none; } a:link { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; } /** * Error Panel * ========================================================================== */ .error-panel { background:none; padding: 0px 0px; margin-bottom: 0px; } .error-panel .container { padding: 0px; } .error-panel h2 { color: #cc3333!important; font-size: 15px!important; margin: 0px!important; } .success-panel { background: #33cc66; padding: 8px 15px; margin-bottom: 15px; } .success-panel .container { padding: 0px; } .success-panel h2 { color: #fff!important; font-size: 15px!important; margin: 0px!important; } /** * Modals * ========================================================================== */ .modal { font-family: 'Poppins', sans-serif; overflow-y: auto;} .modal-dialog { z-index: 1200; margin: 30px auto 30px auto; width: 100%; max-width: 670px; } /* .modal-backdrop { display: none!important; } */ /* .modal .modal-backdrop { display: block!important; } */ /* .modal-backdrop.in { opacity: .7; } */ .modal-content { border-radius: 10px; box-shadow: none; border: 3px #96ca50 solid; } .modal-body .close { color: #cccccc; border: 1px #cccccc solid; font-size: 32px; border-radius: 50%; line-height: 15px; padding: 8px 6px; margin: 0px 0px 0px 15px; opacity: 1; text-shadow: none; position: absolute; top: 20px; right: 18px; z-index: 1; } .modal-body .close:hover { background: #cccccc; border-color: #cccccc; color: #ffffff; } #help .modal-body { padding: 40px 55px 35px 42px; } #help .modal-body h3 { color: #96ca50; font-size: 26px; line-height: 34px; font-weight: 600; padding-right: 100px; margin-bottom: 40px; } #help .modal-body p { color: #666; font-size: 20px; line-height: 30px; } #help .modal-body p a { color: #666; font-weight: 600; } #help .modal-body p a:hover { color: #96ca50; } #help .modal-body .close { right: 15px; } .generic-modal .modal-body { padding: 40px 55px 35px 42px; } .generic-modal .modal-body h3 { color: #96ca50; font-size: 26px; line-height: 34px; font-weight: 600; padding-right: 100px; margin-bottom: 40px; } .generic-modal .modal-body p { color: #666; font-size: 20px; line-height: 30px; } .generic-modal .modal-body p a { color: #666; font-weight: 600; } .generic-modal .modal-body p a:hover { color: #96ca50; } .generic-modal .modal-body p a.green { color: #96ca50; } .generic-modal .modal-body p a.green:hover { color: #666; } .generic-modal .modal-body .close { right: 15px; } .generic-modal .buttons { margin-top: 20px; } .generic-modal .buttons .btn { margin-right: 10px; } /** * Mobile Navigation * ========================================================================== */ #mobile-nav { background: #fff; z-index: 300; position: fixed; top: 0; right: 0; width: 400px; height: 100%; margin-right: -400px; overflow-y: auto; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease0s;-ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; padding: 0px 40px 0px 40px; } #mobile-nav.active { right: 400px; width: 400px; box-shadow: 5px 5px 5px 5px #8d8d8d; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease0s; transition: all 0.4s ease 0s; } #mobile-nav .top-icons { min-height: 50px; width: 100%; margin-top: 30px; } #mobile-nav .top-icons #menu-close { background: none; list-style: none; float: right; height: 45px; width: 45px; padding: 8px 0px 0px 0px; border: 1px solid #96ca50; border-radius: 50%; text-align: center; } #mobile-nav .top-icons #menu-close:hover { background: #96ca50; border: 1px solid #96ca50; } #mobile-nav .top-icons #menu-close i { color: #96ca50; font-size: 28px; } #mobile-nav .top-icons #menu-close:hover i { color: #fff; } #mobile-nav .big-links { margin-top: 5px; width: 100%; } #mobile-nav .big-links p { font-weight: 400; margin: 0px 0px 8px 0px; } #mobile-nav .big-links p a { font-size: 25px; color: #333; } #mobile-nav .big-links p a:hover { color: #96ca50; } #mobile-nav .medium-links { margin-top: 45px; width: 100%; } #mobile-nav .medium-links p { font-weight: 400; line-height: 23px; margin-bottom: 5px; } #mobile-nav .medium-links p a { font-size: 19px; color: #96ca50; } #mobile-nav .medium-links p a:hover { color: #8fbf4e; } #mobile-nav .contact-details { margin-top: 45px; width: 100%; } #mobile-nav .contact-details p { color: #999; font-size: 19px; margin: 0px 0px 5px 0px; } #mobile-nav .contact-details h2 { color: #96ca50; font-size: 30px; margin: 0px; } #mobile-nav .contact-details h2 a { color: #96ca50; } /** * Login Mobile Menu * ========================================================================== */ .menu-modal { visibility: hidden; opacity: 0; background: #ffffff; height: 100vh; width: 100%; top: -180vh; overflow: scroll; position: fixed; z-index: 500000; transition-timing-function: ease-in; transition: 1.2s; } .menu-modal.active { visibility: visible; opacity: 1; top: 0vh; transition-timing-function: ease-in; transition: 1.2s; } .menu-modal .top-header { background: #96ca50; padding: 20px; } .menu-modal .top-header img { width: 150px; } .menu-modal .menu-content { padding: 0px; } .menu-modal .accordion-item { background-color: #fff; border: 1px solid rgba(0,0,0,.125); } .menu-modal .menu-content .accordion-item .accordion-header { border-radius: 0px; line-height: 30px; margin-bottom: 0px; } .menu-modal .menu-content .accordion-item .accordion-button { background: #003366; color: #ffffff; font-size: 20px; font-weight: 500; border: none; border-radius: 0px; box-shadow: none; padding: 1rem 1.25rem; } .menu-modal .menu-content .accordion-item .accordion-button.collapsed { background: #ffffff; color: #003366; font-weight: 500; } .menu-modal .menu-content .accordion-item .accordion-collapse { border: none; border-top: 0px; border-radius: 0px; } .menu-modal .menu-content .accordion-item .accordion-collapse .accordion-body p { font-size: 18px; line-height: 26px; margin-bottom: 0px; } .menu-modal .menu-content .accordion-button::after { background: none; width: 27px; height: 27px; font-size: 36px; font-weight: 500; content: "+"; transform: none; transition: none; text-align: right; } .menu-modal .menu-content .accordion-item:hover .accordion-button::after { color: #96ca50; } .menu-modal .menu-content .accordion-button:not(.collapsed)::after { color: #ffffff; background: none; width: 27px; height: 27px; font-size: 41px; font-weight: 500; content: "-"; transform: none; transition: none; text-align: center; } .menu-modal .menu-content .accordion-item:hover .accordion-button:not(.collapsed)::after { color: #ffffff; } .menu-modal .menu-content .accordion-item.link .accordion-button { background: #ffffff; color: #003366; font-weight: 500; } .menu-modal .menu-content .accordion-item.link .accordion-button a { color: #2e4960; width: 100%; } .menu-modal .menu-content .accordion-item.link .accordion-button a:hover { color: #96ca50; } .menu-modal .menu-content .accordion-item.link .accordion-button:hover { color: #96ca50; } .menu-modal .menu-content .accordion-item.link .accordion-button::after { display: none; } .menu-modal .menu-close { background: none; height: 42px; width: 42px; border-radius: 50%; color: #ffffff; border: 2px #ffffff solid; margin-top: 1px; text-align: center; float: right; position: relative; transition-timing-function: ease-in; transition: 0.2s; } .menu-modal .menu-close:hover { color: #003366; background: none; border-color: #003366; cursor: pointer; } .menu-modal .menu-close .icon { background: #ffffff; mask: url('../img/xmark-regular.svg') 50% center no-repeat; -webkit-mask: url('../img/xmark-regular.svg') 50% center no-repeat; height: 23px; width: 38px; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal .menu-close:hover .icon { background: #003366; transition: 0.2s; transition-timing-function: ease-in; } /** * Login Main Header/Navigation * ========================================================================== */ header .header { background: none; padding: 15px 15px; position: fixed; top: 0px; width: 100%; margin: auto; z-index: 1000; transition: 0.2s; transition-timing-function: ease-in; } header .header .container { max-width: 1840px; padding: 0px 12px; } header .header .col { font-size: 0px; } header .header img { display: none; width: 210px; margin-top: 16px; float: left; transition: 0.2s; transition-timing-function: ease-in; } header .header.customer-theme .d-customer img { display: block; } header .header.business-theme .d-business img { display: block; } header .header h5 { font-size: 30px; line-height: 36px; font-weight: 700; float: right; margin-top: 5px; margin-left: 50px; } header .header h5 a { color: #003366; } header .header .navigation { margin-top: 30px; margin-bottom: 0px; list-style: none; float: right; transition: 0.2s; transition-timing-function: ease-in; } header .header .navigation li { font-size: 22px; font-weight: 400; display: inline-block; margin-left: 55px; } header .header .navigation li a { color: #ffffff; padding-bottom: 15px; } header .header .navigation li a:hover { color: #003366; } header .header .navigation .nav-item { font-size: 22px; font-weight: 400; display: inline-block; margin-left: 30px; } header .header .navigation .nav-item a { color: #ffffff; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 15px 30px; transition: 0.2s; transition-timing-function: ease-in; } header .header .navigation .nav-item a:hover { color: #003366; transition: 0.2s; transition-timing-function: ease-in; } header .header .navigation .nav-item.dropdown:hover a { color: #003366; background: #fff!important; } header .header .nav-elements { margin-top: 22px; margin-left: 60px; float: right; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .user-icon { color: #ffffff; border: 2px #ffffff solid; border-radius: 50%; height: 45px; width: 45px; text-align: center; overflow: hidden; float: left; cursor: pointer; position: relative; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .user-icon:hover { border-color: #003366; } header .header .nav-elements .user-icon .icon { background: #ffffff; mask: url('../img/user-light.svg') 50% center no-repeat; -webkit-mask: url('../img/user-light.svg') 50% center no-repeat; width: 41px; height: 33px; position: absolute; position: absolute; top: 10px; left: 0px; right: 0px; margin: auto; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .user-icon:hover .icon { background: #003366; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .site-icon { color: #ffffff; border: 2px #ffffff solid; border-radius: 50%; height: 45px; width: 45px; text-align: center; overflow: hidden; float: left; cursor: pointer; position: relative; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .site-icon:hover { border-color: #003366; } header .header .nav-elements .site-icon .icon { background: #ffffff; mask: url('../img/globe-light.svg') 50% center no-repeat; -webkit-mask: url('../img/globe-light.svg') 50% center no-repeat; width: 25px; height: 25px; position: absolute; top: 9px; left: 0px; right: 0px; margin: auto; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .site-icon:hover .icon { background: #003366; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .nav-icon { display: none; color: #ffffff; border: 2px #ffffff solid; border-radius: 50%; height: 45px; width: 45px; padding-top: 5px; margin-left: 12px; text-align: center; float: right; cursor: pointer; position: relative; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .nav-icon:hover { border-color: #003366; } header .header .nav-elements .nav-icon .icon { background: #ffffff; mask: url('../img/bars-regular.svg') 50% center no-repeat; -webkit-mask: url('../img/bars-regular.svg') 50% center no-repeat; height: 23px; width: 19px; position: absolute; top: 10px; left: 0px; right: 0px; margin: auto; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .nav-icon:hover .icon { background: #003366; transition: 0.2s; transition-timing-function: ease-in; } header .header .nav-elements .btn { margin-left: 15px; } header .header .navigation .dropdown-content { opacity: 0; visibility: hidden; position: absolute; right: 0; background-color: #fff; border-radius: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; width: 100%; padding: 10px 12px 10px 12px; z-index: 20; box-shadow: 0px 3px 3px 0px rgba(61, 61, 61, 0.35); top: 47px; left: 0px; min-width: 150px; transition: 0.2s; transition-timing-function: ease-in; } header .header .navigation .dropdown-content ul { width: 100%; list-style: none; padding: 0px; margin: 0px; float: none; } header .header .navigation .dropdown-content li { margin: 0px; background: none; float: none; height: auto; text-align: center; width: 100%; } header .header .navigation .dropdown-content li.no-border { border-bottom: none; } header .header .navigation .dropdown-content li a { background: none!important; height: auto; font-weight: 400; white-space: normal; margin: 0px; border-bottom: none; display: block; transition: none; } header .header .navigation .dropdown-content li a:link { font-size: 15px; line-height: 21px; background: none; padding: 6px 0px; color: #333333!important; border: none!important; } header .header .navigation .dropdown-content li a:visited { background: none; color: #333333!important; border: none!important; } header .header .navigation .dropdown-content li a:hover { background: none; color: #96ca50!important; border: none!important; transition: none; } header .header .navigation .dropdown-content li a:active { background: none; color: #96ca50!important; border: none!important; } header .header .navigation .dropdown-content li:last-child { border: 0px; margin-bottom: 0px; } header .header .navigation .dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transition: 0.2s; transition-timing-function: ease-in; } header .header .navigation .nav-item:first-child .dropdown-content { border-top-left-radius: 0px; border-top-right-radius: 5px; } header .header.external { background: #96ca50; padding: 10px 15px 20px 15px; transition: 0.2s; transition-timing-function: ease-in; } header .header.external img { width: 160px; margin-top: 12px; transition: 0.2s; transition-timing-function: ease-in; } header .header.external .navigation { margin-top: 19px; transition: 0.2s; transition-timing-function: ease-in; } header .header.external .nav-elements { margin-top: 14px; transition: 0.2s; transition-timing-function: ease-in; } header .header.scrolled { background: #96ca50; padding: 10px 15px 20px 15px; box-shadow: rgba(0,0,0,.117647) 0 1px 3px; transition: 0.2s; transition-timing-function: ease-in; } header .header.scrolled img { width: 160px; margin-top: 12px; transition: 0.2s; transition-timing-function: ease-in; } header .header.scrolled .navigation { margin-top: 19px; transition: 0.2s; transition-timing-function: ease-in; } header .header.scrolled .nav-elements { margin-top: 14px; transition: 0.2s; transition-timing-function: ease-in; } /** * Login * ========================================================================== */ .login-background { background: #ffffff url(../img/login-background-v2.jpg) top center no-repeat; padding-bottom: 60px; } .login-background .main-logo { margin: 30px auto 30px auto; } .login-panel { background: #ffffff; margin: auto; max-width: 392px; border: 3px #0d0248 solid; border-radius: 15px; overflow: hidden; margin-bottom: 110px; } .login-panel.margin-top { margin-top: 180px; } .login-panel .top { padding: 30px 30px 50px 30px; } .login-panel .top h2 { color: #0d0248; font-size: 34px; line-height: 40px; font-weight: 600; padding: 0px; margin: 0px 0px 12px 0px; } .login-panel .top h5 { color: #777777; font-size: 18px; line-height: 24px; font-weight: 500; margin: 0px 0px 28px 0px; } .login-panel .top label { color: #0d0248; font-size: 18px; font-weight: 600; } .login-panel .top .form-control { background: none; height: 40px; color: #999999; font-size: 14px; line-height: 18px; font-weight: 400; padding: 8px 6px; border: 2px solid #999; border-radius: 5px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.0); font-family: 'Open Sans', sans-serif; } .login-panel .top .form-control::placeholder { color: #999999; } .login-panel .top .form-control.error { border-bottom: 1px #db414b solid; box-shadow: none; } .login-panel .top .form-control.error::placeholder { color: #db414b; } .login-panel .top .btn-login { background: #96ca50; color: #fff!important; border-color: #96ca50; font-size: 20px; line-height: 22px; font-weight: 600; border-radius: 25px; width: 100%; box-shadow: none; padding: 12px 5px; margin-top: 5px; } .login-panel .top .btn-login:hover { background: #83b047!important; border-color: #83b047; color: #fff!important; } .login-panel .top .btn-register { background: #0d0248; color: #96ca50!important; border: #0d0248 2px solid; font-size: 20px; line-height: 22px; font-weight: 600; border-radius: 25px; width: 100%; box-shadow: none; padding: 12px 30px; margin-top: 15px; } .login-panel .top .btn-register:hover { background: #96ca50!important; border-color: #96ca50; color: #fff!important; } .login-panel .top p { color: #999999; font-size: 18px; line-height: 20px; padding: 0px; margin: 40px 0px 0px 0px; } .login-panel .top p a { color: #999999; } .login-panel .top p a:hover { color: #96ca50; } .login-panel .top p span { padding: 0px 5px; } .login-panel .bottom { background: #0d0248; padding: 30px 30px 50px 30px; } .login-panel .bottom h2 { color: #ffffff; font-size: 34px; line-height: 40px; font-weight: 600; padding: 0px; margin: 0px 0px 12px 0px; } .login-panel .bottom h5 { color: #ffffff; font-size: 17px; line-height: 23px; font-weight: 500; margin: 0px 0px 28px 0px; } .login-panel .bottom .btn-register { background: none; color: #96ca50!important; border: #96ca50 2px solid; font-size: 20px; line-height: 22px; font-weight: 600; border-radius: 25px; width: 100%; box-shadow: none; padding: 12px 30px; margin-top: 5px; } .login-panel .bottom .btn-register:hover { background: #96ca50!important; border-color: #96ca50; color: #fff!important; } .login-panel .field-error { border-color: #cc0000!important; } .login-panel .is-invalid { border-color: #cc0000!important; } .login-panel .invalid-feedback { color: #cc0000; padding-top: 5px; display: block; } /** * External * ========================================================================== */ .external-header { background: #ffffff url(../img/external-header-background.jpg) bottom center no-repeat; height: 190px; padding: 30px 0px 60px 0px; } .external-header .container { max-width: 900px; } .external-header .main-logo { width: 230px; float: left; margin: 0px; } .external-header .nav-right { margin-top: 2px; float: right; } .external-header h5 { color: #fff; font-size: 20px; font-weight: 600; margin: 13px 15px 0px 0px; float: right; } .external-header h5 a { color: #fff; } .external-header h5 a:hover { color: #0d0248; } .external-header .circle-toggle { background: none; list-style: none; float: right; text-align: center; padding: 10px 0px 0px 0px; border: 2px solid #fff; border-radius: 50%; height: 48px; width: 48px; } .external-header .circle-toggle:hover { background: #fff; border: 2px solid #fff; } .external-header .circle-toggle i { color: #fff; font-size: 26px; } .external-header .circle-toggle:hover i { color: #0d0248; } .external-header.center { background: #ffffff url(../img/center-external-header-background.jpg) bottom center no-repeat; height: auto; padding: 30px 0px 260px 0px; } .external-header.center .main-logo { float: none; margin: auto auto 45px auto; } .external-header.center .content-area { width: 100%; max-width: 500px; margin: auto; } .external-header.center .content-area .text-big { color: #0d0248!important; font-size: 24px; display: block; margin-bottom: 15px; } .external-header.center .content-area p { color: #0d0248!important; font-size: 16px; line-height: 22px; } .external-internal-panel { background: #ffffff; padding: 60px 0px 150px 0px; } .external-internal-panel .container { max-width: 900px; } .external-internal-panel h2 { color: #0d0248; font-size: 40px; line-height: 46px; font-weight: 600; margin: 0px 0px 16px 0px; text-align: center; } .external-internal-panel h3 { color: #96ca50; font-size: 28px; line-height: 34px; font-weight: 600; margin: 22px 0px 14px 0px; } .external-internal-panel h4 { color: #0d0248; font-size: 22px; } .external-internal-panel p { color: #666; font-size: 18px; line-height: 26px; margin-bottom: 25px } .external-internal-panel p.margin-bottom { margin-bottom: 8px; } .external-internal-panel p + ul { margin-top: -10px; } .external-internal-panel ol { padding-left: 18px; margin: 0px; } .external-internal-panel li { color: #666; font-size: 18px; line-height: 26px; margin-bottom: 5px; } .external-internal-panel .checkbox label { padding-left: 25px; } .external-internal-panel .checkbox label::before { width: 34px; height: 34px; border: 1px solid #96ca50; } .external-internal-panel .checkbox label::after { width: 34px; height: 34px; font-size: 24px; padding-left: 5px; padding-top: 0px; } .external-internal-panel .checkbox label span { font-size: 17px; top: 3px; position: relative; } .external-internal-panel .checkbox label span a { position: relative; z-index: 2; } .external-internal-panel .checkbox label span.red { font-size: auto; top: 0px; position: relative; } .external-internal-panel .checkbox input[type="checkbox"] { height: 34px; width: 34px; width: 100%; } .external-internal-panel .form-group label span.red { color: #cc0000; } .external-internal-panel .help-icon-small { position: absolute; top: -2px; } .external-internal-panel .help-icon-small .icon { height: 25px; width: 25px; background: url('../img/help-icon.png') top center no-repeat; background-size: 25px!important; margin-left: 8px; } .external-internal-panel.video { background: none; margin-top: -280px; padding: 60px 0px 100px 0px; } .external-internal-panel.video .resp-container { position: relative; overflow: hidden; padding-top: 56.25%; } .external-internal-panel.video .resp-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px #090447 solid; border-radius: 20px; } .external-internal-panel.video .content-container { width: 100%; max-width: 700px; margin: auto; } .external-internal-panel.video .content-area { margin-top: 40px; } .external-internal-panel.video .content-area .text-big { color: #0d0248!important; font-size: 24px; display: block; margin-bottom: 15px; background: none!important; } .external-internal-panel.video .content-area p { margin-bottom: 20px; } .external-internal-panel.video .content-area ul { margin-bottom: 20px; } .external-internal-panel.video .benefits-area { margin-top: 40px; } .external-internal-panel.video .benefits-area img { margin: auto auto 20px auto; } .external-internal-panel.video .benefits-area h3 { color: #0d0248; margin-top: 0px; margin-bottom: 25px; } .external-internal-panel.video .benefits-area h4 { color: #96ca50; font-size: 24px; line-height: 30px; font-weight: 600; margin-bottom: 10px; } .external-internal-panel.video .benefits-area p { font-size: 16px; line-height: 22px; } .external-internal-panel.video .benefits-area .button { margin-top: 20px; } .external-internal-panel.video .benefits-area .button .btn { font-size: 17px; line-height: 17px; padding: 11px 34px 10px 34px; } header + .external-internal-panel { padding-top: 150px; } header + .internal-panel { padding-top: 150px; } /** * Website Footer * ========================================================================== */ footer { background: #2a282e; } footer .footer { background: #2a282e; padding: 85px 15px 125px 15px; } footer .footer .container { max-width: 1640px; } footer .footer h2 { font-weight: 600; } footer .footer h3 { font-weight: 600; } footer .footer h4 { font-weight: 600; } footer .footer h5 { font-weight: 600; } footer .footer h6 { font-weight: 600; } footer .footer h5 { font-size: 30px; line-height: 36px; font-weight: 600; margin: 0px; } footer .footer a { color: #96ca50; text-decoration: none; } footer .footer a:hover { color: #a1da54; text-decoration: none; } footer .footer .left-content { padding-right: 150px; } footer .footer .left-content h5 { color: #96ca50; margin-bottom: 30px; } footer .footer .left-content p { color: #ffffff; font-size: 17px; line-height: 26px; } footer .footer .left-content h6 { color: #ffffff; font-size: 17px; font-weight: 200; margin-top: 60px; margin-bottom: 40px; } footer .footer .left-content h6 a { color: #ffffff; font-weight: 400; padding: 0px 10px; display: inline-block; } footer .footer .left-content h6 a:first-child { padding-left: 0px; } footer .footer .left-content h6 a:last-child { padding-right: 0px; } footer .footer .left-content h6 a:hover { color: #96ca50; } footer .footer .left-content iframe { height: 162px; vertical-align: top; display: inline-block; border: 0px; } footer .footer .left-content .logos { font-size: 0px; margin-top: -4px; vertical-align: top; display: inline-block; } footer .footer .left-content .logos .logo-holder { background: #ffffff; border: 2px #96ca50 solid; height: 77px; width: 100px; margin: 4px; display: inline-block; position: relative; } footer .footer .left-content .logos .logo-holder img { width: 80%; height: auto; position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); margin: auto; } footer .footer .right { padding-left: 100px; border-left: 1px #666666 solid; } footer .footer .right .col.buttons { padding: 0px; } footer .footer .right .button-feature { width: 100%; max-width: 350px; margin-bottom: 30px; } footer .footer .right .button-feature.bottom { margin-bottom: 80px; } footer .footer .right .button-feature h5 { color: #96ca50; } footer .footer .right .button-feature .icon { color: #96ca50; height: 60px; width: 60px; border: 2px #96ca50 solid; border-radius: 5px; margin-top: 6px; margin-right: 90px; float: right; text-align: center; position: relative; transition: 0.2s; transition-timing-function: ease-in; } footer .footer .right .button-feature:hover .icon { background: #96ca50; color: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } footer .footer .right .button-feature .icon .chevron { background: #96ca50; height: 28px; width: 100%; mask: url('../img/chevron-right-solid.svg') 50% center no-repeat; -webkit-mask: url('../img/chevron-right-solid.svg') 50% center no-repeat; position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); margin: auto; transition: 0.2s; transition-timing-function: ease-in; } footer .footer .right .button-feature:hover .icon .chevron { background: #ffffff; } footer .footer .right .col.text { padding: 0px; } footer .footer .right h6 { color: #96ca50; font-size: 22px; line-height: 28px; margin-bottom: 5px; } footer .footer .right h4 { color: #ffffff; font-size: 36px; line-height: 42px; margin-bottom: 35px; } footer .footer .right p { color: #ffffff; font-size: 20px; line-height: 30px; } /** * Footer * ========================================================================== .footer .left { width: 25%; float: left; text-align: right; padding-right: 40px; } .footer .image { width: 100%; height: 54px; } .footer .image img { float: right; } .footer .left h3 { color: #999999; font-size: 20px; font-weight: 400; margin: 88px 0px 5px 0px; } .footer .left h2 { color: #96ca50; font-size: 32px; line-height: 34px; margin: 0px; } .footer .left h2 a { color: #96ca50; } .footer .right { width: 75%; border-left: 1px #ccc solid; float: left; padding-left: 40px; } .footer .right h4 { color: #333333; font-size: 17px; line-height: 30px; font-weight: 400; margin: 0px 0px 20px 0px; } .footer .right h5 { color: #999999; font-size: 16px; line-height: 24px; font-weight: 400; margin: 0px 0px 20px 0px; } .footer .right ul { list-style: none; padding: 0px; margin: 0px; } .footer .right ul li { font-size: 18px; line-height: 24px; font-weight: 500; margin: 0px; float: left; } .footer .right ul li a { color: #96ca50; margin-right: 30px; } .footer .right ul li:last-child a{ margin: 0px; } */ /* Footer External */ .footer.external { padding: 35px 0px 35px 0px; border-top: 3px #97ca51 solid; } .footer.external .container { max-width: 900px; } .footer.external .image { margin-bottom: 30px; } .footer.external .image img { float: none; } .footer.external .right { width: 100%; float: none; padding: 0px; border: none; } /** * Media Queries * ========================================================================== */ @media screen and (max-width: 1730px) { header .header .navigation .nav-item { margin-left: 15px; } } @media screen and (max-width: 1600px) { header .header .navigation .nav-item { margin-left: 0px; } header .header .nav-elements { margin-left: 40px; } footer .footer .left-content { padding-right: 100px; } } @media screen and (max-width: 1550px) { header .header .nav-elements { margin-left: 25px; } header .header h5 { margin-left: 30px; } } @media screen and (max-width: 1520px) { footer .footer .left-content h6 { font-size: 15px; } footer .footer .left-content h6 a { padding: 0px 4px; } } @media screen and (max-width: 1500px) { header .header img { width: 170px; margin-top: 19px; } header .header .navigation .nav-item { font-size: 20px; margin-left: 0px; } header .header .navigation .dropdown-content { top: 44px; min-width: 130px; } header .header .navigation .dropdown-content li a:link { font-size: 14px; line-height: 20px; } } @media screen and (max-width: 1440px) { footer .footer .left-content { padding-right: 100px; } footer .footer .right { padding-left: 70px; } footer .footer p { font-size: 20px; line-height: 28px; } } @media screen and (max-width: 1400px) { header .header .navigation .nav-item { font-size: 18px; margin-left: 5px; } header .header .navigation .dropdown-content { top: 41px; } header .header .navigation .nav-item a { padding: 15px 20px; } } @media screen and (max-width: 1300px) { footer .footer .right { padding-left: 50px; } footer .footer .left-content { padding-right: 70px; } } @media screen and (max-width: 1250px) { header .header h5 { font-size: 24px; line-height: 32px; } footer .footer .left-content h6 { font-size: 14px; } } @media screen and (max-width: 1200px) { header .header { padding: 15px 0px; } header .header.scrolled { padding: 15px 0px; } header .header.external { padding: 5px 0px 15px 0px; } header .header .navigation { display: none; } header .header h5 { display: none; } header .header .nav-elements .nav-icon { display: block; } footer .footer { padding: 85px 15px 75px 15px; } footer .footer .left { text-align: center; max-width: 700px; margin: auto; } footer .footer .left-content { padding-right: 0px; } footer .footer .left-content h6 a { padding: 0px 4px; } footer .footer .right { max-width: 680px; padding-top: 70px; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); margin: auto; border: none; } footer .footer .right .row { margin: 0px; } footer .footer .right .buttons { margin-top: 5px; } footer .footer .right .button-feature.bottom { margin-bottom: 0px; } } @media screen and (max-width: 1150px) { .footer .left { width: 100%; float: none; text-align: left; padding-right: 0px; } .footer .image img { float: none; } .footer .left h3 { margin: 30px 0px 5px 0px; } .footer .left h2 { margin-bottom: 30px; } .footer .right { width: 100%; border-left: none; float: none; padding-left: 0px; } .footer .right ul li { font-size: 17px; } } @media screen and (max-width: 850px) { #mobile-nav { width: 370px; margin-right: -370px; } #mobile-nav.active { right: 370px; width: 370px; } .login-panel { margin-bottom: 60px; } .login-panel .top h5 { font-size: 17px; line-height: 24px; } .login-panel .bottom h5 { font-size: 16px; line-height: 23px; } .login-panel .top .btn-login { font-size: 18px; line-height: 18px; } .external-header { height: 160px; } .external-header .main-logo { width: 200px; } .external-internal-panel h2 { font-size: 32px; line-height: 38px; } .external-internal-panel p { font-size: 16px; line-height: 24px; } .external-internal-panel li { font-size: 16px; line-height: 24px; } .footer { text-align: center; } .footer .left { text-align: center; } .footer .left h2 a { color: #96ca50; } .footer .image img { margin: auto; } .footer .right ul li { margin: 0px 0px 5px 0px; float: none; } .footer .right ul li a { margin: 0px; } .footer .right h5 a { color: #999; } } @media screen and (max-width: 767px) { header .header.scrolled { padding: 5px 0px 15px 0px; } header .header.external { padding: 5px 0px 15px 0px; } header .header img { width: 180px; margin-top: 20px; } footer .footer .left-content .logos { margin-top: 25px; display: block; } footer .footer .right .button-feature { width: 100%; max-width: 260px; margin-left: auto; margin-right: auto; } footer .footer .right .button-feature .icon { margin-right: 0px; } footer .footer .right .col.text { text-align: center; margin-top: 50px; } } @media screen and (max-width: 650px) { .external-header { height: 150px; } .external-internal-panel h2 { font-size: 30px; line-height: 36px; } } @media screen and (max-width: 540px) { .external-header { height: 140px; } } @media screen and (max-width: 500px) { .external-header { height: 125px; } .external-header .main-logo { width: 180px; } }