/* Lite Checkout */ @supports (-webkit-appearance: none) { .selector:not(*:root), .litecheckout .litecheckout__field--selectbox .litecheckout__input { padding-top: 10px !important; padding-left: 6px !important; } } /* End of Lite Checkout */ .select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px;}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap;}.select2-container .select2-search--inline{float:left;}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none;}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051;}.select2-results{display:block;}.select2-results__options{list-style:none;margin:0;padding:0;}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-results__option[aria-selected]{cursor:pointer;}.select2-container--open .select2-dropdown{left:0;}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}.select2-search--dropdown{display:block;padding:4px;}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box;}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none;}.select2-search--dropdown.select2-search--hide{display:none;}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0);}.select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px;}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0;}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left;}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto;}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default;}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none;}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%;}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left;}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333;}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder{float:right;}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto;}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto;}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0;}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default;}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none;}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0;}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--default .select2-results__option[role=group]{padding:0;}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999;}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd;}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em;}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white;}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic .select2-selection--single{background-color:#f6f6f6;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%);background-image:-o-linear-gradient(top, #ffffff 50%, #eeeeee 100%);background-image:linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px;}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);background-image:linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0;}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left;}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto;}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb;}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none;}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px;}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%);background-image:-o-linear-gradient(top, #ffffff 0%, #eeeeee 50%);background-image:linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%);background-image:-o-linear-gradient(top, #eeeeee 50%, #ffffff 100%);background-image:linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none;}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto;}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto;}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb;}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0;}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;}.select2-container--classic .select2-dropdown{background-color:white;border:1px solid transparent;}.select2-container--classic .select2-dropdown--above{border-bottom:none;}.select2-container--classic .select2-dropdown--below{border-top:none;}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--classic .select2-results__option[role=group]{padding:0;}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey;}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:white;}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb;} /** * EasyZoom core styles */ .easyzoom { position: relative; /* 'Shrink-wrap' the element */ display: inline-block; *display: inline; *zoom: 1; } .easyzoom img { vertical-align: bottom; } .easyzoom.is-loading img { cursor: progress; } .easyzoom.is-ready img { cursor: crosshair; } .easyzoom.is-error img { cursor: not-allowed; } .easyzoom-notice { position: absolute; top: 50%; left: 50%; z-index: 150; width: 10em; margin: -1em 0 0 -5em; line-height: 2em; text-align: center; background: #FFF; box-shadow: 0 0 10px #888; } .easyzoom-flyout { position:absolute; z-index: 100; overflow: hidden; background: #FFF; } /** * EasyZoom layout variations */ .easyzoom--overlay .easyzoom-flyout { top: 0; left: 0; width: 100%; height: 100%; } .easyzoom--adjacent .easyzoom-flyout { top: 0; left: 100%; width: 100%; height: 100%; margin-left: 20px; } .klaro { font-family: inherit; font-family: var(--font-family, inherit); font-size: 14px; font-size: var(--font-size, 14px); } .klaro button { font-family: inherit; font-family: var(--font-family, inherit); font-size: 14px; font-size: var(--font-size, 14px); } .klaro.cm-as-context-notice { height: 100%; padding-bottom: 12px; padding-top: 12px; } .klaro .cookie-modal, .klaro .context-notice, .klaro .cookie-notice { /* The switch - the box around the slider */ } .klaro .cookie-modal .cm-switch-container, .klaro .context-notice .cm-switch-container, .klaro .cookie-notice .cm-switch-container { border-bottom-style: solid; border-bottom-style: var(--border-style, solid); border-bottom-width: 1px; border-bottom-width: var(--border-width, 1px); border-bottom-color: #c8c8c8; border-bottom-color: var(--light2, #c8c8c8); display: block; position: relative; padding: 10px; padding-left: 66px; line-height: 20px; vertical-align: middle; min-height: 40px; } .klaro .cookie-modal .cm-switch-container:last-child, .klaro .context-notice .cm-switch-container:last-child, .klaro .cookie-notice .cm-switch-container:last-child { border-bottom: 0; } .klaro .cookie-modal .cm-switch-container:first-child, .klaro .context-notice .cm-switch-container:first-child, .klaro .cookie-notice .cm-switch-container:first-child { margin-top: 0; } .klaro .cookie-modal .cm-switch-container p, .klaro .context-notice .cm-switch-container p, .klaro .cookie-notice .cm-switch-container p { margin-top: 0; } .klaro .cookie-modal .cm-switch, .klaro .context-notice .cm-switch, .klaro .cookie-notice .cm-switch { position: relative; display: inline-block; width: 50px; height: 30px; } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: #0388cc; background-color: var(--green1, #0388cc); } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before { background-color: #eee; } .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider { background-color: #0388cc; background-color: var(--green1, #0388cc); opacity: 0.6; } .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before, .klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before { -ms-transform: translateX(10px); transform: translateX(10px); } .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider, .klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider { background-color: #0388cc; background-color: var(--green2, #0388cc); opacity: 0.8; } .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider::before, .klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider::before { -ms-transform: translateX(10px); transform: translateX(10px); } .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider { background-color: #0388cc; background-color: var(--green2, #0388cc); opacity: 0.8; cursor: not-allowed; } .klaro .cookie-modal .slider, .klaro .context-notice .slider, .klaro .cookie-notice .slider { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 5px 0 rgba(0, 0, 0, 0.19); } .klaro .cookie-modal .cm-list-input, .klaro .context-notice .cm-list-input, .klaro .cookie-notice .cm-list-input { position: absolute; top: 0; left: 0; opacity: 0; width: 50px; height: 30px; } .klaro .cookie-modal .cm-list-title, .klaro .context-notice .cm-list-title, .klaro .cookie-notice .cm-list-title { font-size: 0.9em; font-weight: 600; } .klaro .cookie-modal .cm-list-description, .klaro .context-notice .cm-list-description, .klaro .cookie-notice .cm-list-description { color: #666; font-size: 0.9em; padding-top: 4px; } .klaro .cookie-modal .cm-list-label, .klaro .context-notice .cm-list-label, .klaro .cookie-notice .cm-list-label { /* The slider */ /* Rounded sliders */ } .klaro .cookie-modal .cm-list-label .cm-switch, .klaro .context-notice .cm-list-label .cm-switch, .klaro .cookie-notice .cm-list-label .cm-switch { position: absolute; left: 0; } .klaro .cookie-modal .cm-list-label .slider, .klaro .context-notice .cm-list-label .slider, .klaro .cookie-notice .cm-list-label .slider { background-color: #f2f2f2; background-color: var(--white2, #f2f2f2); position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: 0.4s; width: 50px; display: inline-block; } .klaro .cookie-modal .cm-list-label .slider::before, .klaro .context-notice .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-label .slider::before { background-color: #ddd; position: absolute; content: ''; height: 20px; width: 20px; left: 5px; bottom: 5px; transition: 0.4s; } .klaro .cookie-modal .cm-list-label .slider.round, .klaro .context-notice .cm-list-label .slider.round, .klaro .cookie-notice .cm-list-label .slider.round { border-radius: 30px; } .klaro .cookie-modal .cm-list-label .slider.round::before, .klaro .context-notice .cm-list-label .slider.round::before, .klaro .cookie-notice .cm-list-label .slider.round::before { border-radius: 50%; } .klaro .cookie-modal .cm-list-label input:checked + .slider::before, .klaro .context-notice .cm-list-label input:checked + .slider::before, .klaro .cookie-notice .cm-list-label input:checked + .slider::before { -ms-transform: translateX(20px); transform: translateX(20px); } .klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider, .klaro .context-notice .cm-list-input:focus + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:focus + .cm-list-label .slider { box-shadow: 0 4px 6px 0 rgba(125, 125, 125, 0.2), 5px 5px 10px 0 rgba(125, 125, 125, 0.19); } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before { -ms-transform: translateX(20px); transform: translateX(20px); } .klaro .cookie-modal .slider, .klaro .context-notice .slider, .klaro .cookie-notice .slider { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); } .klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a { color: #0388cc; color: var(--green1, #0388cc); text-decoration: none; } .klaro .cookie-modal p, .klaro .cookie-modal strong, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li, .klaro .context-notice p, .klaro .context-notice strong, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice strong, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li { color: #333; } .klaro .cookie-modal p, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li, .klaro .context-notice p, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li { display: block; text-align: left; margin: 0; padding: 0; margin-top: 0.7em; } .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal h3, .klaro .cookie-modal h4, .klaro .cookie-modal h5, .klaro .cookie-modal h6, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice h3, .klaro .context-notice h4, .klaro .context-notice h5, .klaro .context-notice h6, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice h3, .klaro .cookie-notice h4, .klaro .cookie-notice h5, .klaro .cookie-notice h6 { font-family: inherit; font-family: var(--title-font-family, inherit); } .klaro .cookie-modal .cm-link, .klaro .context-notice .cm-link, .klaro .cookie-notice .cm-link { margin-right: 0.5em; vertical-align: middle; } .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn { color: #fff; color: var(--button-text-color, #fff); background-color: #5c5c5c; background-color: var(--dark2, #5c5c5c); border-radius: 4px; border-radius: var(--border-radius, 4px); padding: 6px 10px; margin-right: 0.5em; border-style: none; padding: 0.4em; font-size: 1em; cursor: pointer; } .klaro .cookie-modal .cm-btn:disabled, .klaro .context-notice .cm-btn:disabled, .klaro .cookie-notice .cm-btn:disabled { opacity: 0.5; } .klaro .cookie-modal .cm-btn.cm-btn-close, .klaro .context-notice .cm-btn.cm-btn-close, .klaro .cookie-notice .cm-btn.cm-btn-close { background-color: #c8c8c8; background-color: var(--light2, #c8c8c8); } .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success { background-color: #0388cc; background-color: var(--green1, #0388cc); } .klaro .cookie-modal .cm-btn.cm-btn-success-var, .klaro .context-notice .cm-btn.cm-btn-success-var, .klaro .cookie-notice .cm-btn.cm-btn-success-var { background-color: #0388cc; background-color: var(--green2, #0388cc); } .klaro .cookie-modal .cm-btn.cm-btn-info, .klaro .context-notice .cm-btn.cm-btn-info, .klaro .cookie-notice .cm-btn.cm-btn-info { background-color: #2581c4; background-color: var(--blue1, #2581c4); } .klaro .context-notice { border-radius: 4px; border-radius: var(--border-radius, 4px); border-style: solid; border-style: var(--border-style, solid); border-width: 1px; border-width: var(--border-width, 1px); border-color: #c8c8c8; border-color: var(--light2, #c8c8c8); background-color: #fafafa; background-color: var(--light1, #fafafa); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; padding: 12px; height: 100%; } .klaro .context-notice.cm-dark p { color: #555; } .klaro .context-notice.cm-dark p a { color: #459cdc; color: var(--blue2, #459cdc); } .klaro .context-notice p { color: #333; color: var(--dark1, #333); flex-grow: 0; text-align: center; padding-top: 0; margin-top: 0; } .klaro .context-notice p a { color: #0388cc; color: var(--green2, #0388cc); } .klaro .context-notice p.cm-buttons { margin-top: 12px; } .klaro .cookie-modal { width: 100%; height: 100%; position: fixed; overflow: hidden; left: 0; top: 0; z-index: 1000; } .klaro .cookie-modal.cm-embedded { position: relative; height: inherit; width: inherit; left: inherit; right: inherit; z-index: 0; } .klaro .cookie-modal.cm-embedded .cm-modal.cm-klaro { position: relative; -ms-transform: none; transform: none; } .klaro .cookie-modal .cm-bg { background: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; position: fixed; top: 0; left: 0; } .klaro .cookie-modal .cm-modal.cm-klaro { background-color: #fff; color: #333; z-index: 1001; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); width: 100%; max-height: 98%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); position: fixed; overflow: auto; } @media (min-width: 660px) { .klaro .cookie-modal .cm-modal.cm-klaro { border-radius: 4px; border-radius: var(--border-radius, 4px); position: relative; margin: 0 auto; max-width: 640px; height: auto; width: auto; } } .klaro .cookie-modal .cm-modal .hide { border-style: none; background: none; cursor: pointer; position: absolute; top: 20px; right: 20px; z-index: 1; } .klaro .cookie-modal .cm-modal .hide svg { stroke: #222; } .klaro .cookie-modal .cm-modal .cm-footer { border-top-color: #ccc; border-top-width: 1px; border-top-width: var(--border-width, 1px); border-top-style: solid; border-top-style: var(--border-style, solid); padding: 1em; } .klaro .cookie-modal .cm-modal .cm-footer-buttons { display: flex; flex-flow: row; justify-content: space-between; } .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by { display: none; font-size: 0.8em; padding-top: 4px; text-align: right; padding-right: 8px; } .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: #5c5c5c; color: var(--dark2, #5c5c5c); } .klaro .cookie-modal .cm-modal .cm-header { border-bottom-width: 1px; border-bottom-width: var(--border-width, 1px); border-bottom-style: solid; border-bottom-style: var(--border-style, solid); border-bottom-color: #ccc; padding: 1em; padding-right: 24px; } .klaro .cookie-modal .cm-modal .cm-header h1 { margin: 0; font-size: 2em; display: block; } .klaro .cookie-modal .cm-modal .cm-header h1.title { padding-right: 20px; } .klaro .cookie-modal .cm-modal .cm-body { padding: 1em; } .klaro .cookie-modal .cm-modal .cm-body ul { display: block; } .klaro .cookie-modal .cm-modal .cm-body span { display: inline-block; width: auto; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes { padding: 0; margin: 0; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret { color: #888; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content { margin-left: -40px; display: none; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content.expanded, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content.expanded { margin-top: 10px; display: block; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose { position: relative; line-height: 20px; vertical-align: middle; padding-left: 60px; min-height: 40px; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service:first-child, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose:first-child, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service:first-child, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:first-child { margin-top: 0; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p { margin-top: 0; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes { color: #a0a0a0; color: var(--light3, #a0a0a0); font-size: 0.8em; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service.cm-toggle-all, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose.cm-toggle-all, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service.cm-toggle-all, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all { border-top-width: 1px; border-top-width: var(--border-width, 1px); border-top-style: solid; border-top-style: var(--border-style, solid); border-top-color: #ccc; padding-top: 1em; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-list-title, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-list-title, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-list-title, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-list-title { font-weight: 600; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required { color: #5c5c5c; color: var(--dark2, #5c5c5c); padding-left: 0.2em; font-size: 0.8em; } .klaro .cookie-notice:not(.cookie-modal-notice) { background-color: #fff; z-index: 999; position: fixed; width: 100%; bottom: 0; right: 0; } @media (min-width: 1024px) { .klaro .cookie-notice:not(.cookie-modal-notice) { border-radius: 4px; border-radius: var(--border-radius, 4px); position: fixed; position: var(--notice-position, fixed); right: 20px; right: var(--notice-right, 20px); left: auto; left: var(--notice-left, auto); bottom: 20px; bottom: var(--notice-bottom, 20px); top: auto; top: var(--notice-top, auto); max-width: 400px; max-width: var(--notice-max-width, 400px); box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); } } @media (max-width: 1023px) { .klaro .cookie-notice:not(.cookie-modal-notice) { border-style: none; border-radius: 0; } } .klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded { position: relative; height: inherit; width: inherit; left: inherit; right: inherit; bottom: inherit; z-index: 0; } .klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded .cn-body { padding-top: 0.5em; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { margin-bottom: 0; margin-right: 0; bottom: 0; padding: 1em; padding-top: 0; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p { margin-bottom: 0.5em; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes { text-decoration: underline; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more { display: inline-block; flex-grow: 1; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display: inline-block; margin-top: -0.5em; } @media (max-width: 384px) { .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { width: 100%; } } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { margin-top: 0.5em; } @media (max-width: 384px) { .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { width: calc(50% - 0.5em); } } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { margin-top: -0.5em; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: right; align-items: baseline; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a, .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div { margin-top: 0.5em; } .klaro .cookie-modal-notice { background-color: #fff; color: #fafafa; color: var(--light1, #fafafa); z-index: 1001; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); width: 100%; max-height: 98%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); position: fixed; overflow: auto; padding: 1em; padding-top: 0.2em; } @media (min-width: 400px) { .klaro .cookie-modal-notice { border-radius: 4px; border-radius: var(--border-radius, 4px); position: relative; margin: 0 auto; max-width: 400px; height: auto; width: auto; } } .klaro .cookie-modal-notice .cn-ok { display: flex; flex-flow: row; justify-content: space-between; align-items: center; margin-top: 1em; } .klaro .cookie-notice-hidden { display: none !important; } /* .desktoplogo { background: rgb(22, 6, 170)!important; } */ @charset "UTF-8"; /*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev * * Copyright (c) 2022 Animate.css */ :root { --animate-duration: 1.5s; --animate-delay: 0.3s; --animate-repeat: 1; } .animate__animated { -webkit-animation-duration: 1.5s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: calc(1 * 2); animation-iteration-count: calc(1 * 2); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); animation-iteration-count: calc(var(--animate-repeat) * 2); } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: calc(1 * 3); animation-iteration-count: calc(1 * 3); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3); } .animate__animated.animate__delay-1 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2 { -webkit-animation-delay: calc(0.3s * 2); animation-delay: calc(0.3s * 2); -webkit-animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2); } .animate__animated.animate__delay-3 { -webkit-animation-delay: calc(0.3s * 3); animation-delay: calc(0.3s * 3); -webkit-animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3); } .animate__animated.animate__delay-4 { -webkit-animation-delay: calc(0.3s * 4); animation-delay: calc(0.3s * 4); -webkit-animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4); } .animate__animated.animate__delay-5 { -webkit-animation-delay: calc(0.3s * 5); animation-delay: calc(0.3s * 5); -webkit-animation-delay: calc(var(--animate-delay) * 5); animation-delay: calc(var(--animate-delay) * 5); } .animate__animated.animate__delay-6 { -webkit-animation-delay: calc(0.3s * 6); animation-delay: calc(0.3s * 6); -webkit-animation-delay: calc(var(--animate-delay) * 6); animation-delay: calc(var(--animate-delay) * 6); } .animate__animated.animate__delay-7 { -webkit-animation-delay: calc(0.3s * 7); animation-delay: calc(0.3s * 7); -webkit-animation-delay: calc(var(--animate-delay) * 7); animation-delay: calc(var(--animate-delay) * 7); } .animate__animated.animate__faster { -webkit-animation-duration: calc(1s / 2); animation-duration: calc(1s / 2); -webkit-animation-duration: calc(var(--animate-duration) / 2); animation-duration: calc(var(--animate-duration) / 2); } .animate__animated.animate__fast { -webkit-animation-duration: calc(1s * 0.8); animation-duration: calc(1s * 0.8); -webkit-animation-duration: calc(var(--animate-duration) * 0.8); animation-duration: calc(var(--animate-duration) * 0.8); } .animate__animated.animate__slow { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); } .animate__animated.animate__slower { -webkit-animation-duration: calc(1s * 3); animation-duration: calc(1s * 3); -webkit-animation-duration: calc(var(--animate-duration) * 3); animation-duration: calc(var(--animate-duration) * 3); } @media print, (prefers-reduced-motion: reduce) { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*='Out'] { opacity: 0; } } /* Attention seekers */ @-webkit-keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: calc(1s * 1.3); animation-duration: calc(1s * 1.3); -webkit-animation-duration: calc(var(--animate-duration) * 1.3); animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } /* Back entrances */ @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } /* Back exits */ @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } /* Bouncing entrances */ @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__bounceIn { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /* Bouncing exits */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .animate__bounceOut { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /* Fading entrances */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } /* Fading exits */ @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } /* Flippers */ @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .animate__flipOutX { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .animate__flipOutY { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } /* Lightspeed */ @-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* Rotating entrances */ @-webkit-keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Rotating exits */ @-webkit-keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Specials */ @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* Zooming entrances */ @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } /* Zooming exits */ @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /* Sliding entrances */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } /* Sliding exits */ @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @charset "UTF-8";/*! * Bootstrap v5.3.3 (https://getbootstrap.com/) * Copyright 2011-2024 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:calc(1.625rem + 4.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-size:calc(1.525rem + 3.3vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-size:calc(1.375rem + 1.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:var(--bs-secondary-color)}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb), 0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb), 0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb), 0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(var(--bs-border-width) * 2) solid currentcolor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 var(--bs-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(2n){--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-active{--bs-table-color-state:var(--bs-table-active-color);--bs-table-bg-state:var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#a6b5cc;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#b5b6b7;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#a7b9b1;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#a6c3ca;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#ccc2a4;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#c6acae;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#c6c7c8;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#4d5154;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + var(--bs-border-width));padding-bottom:calc(.375rem + var(--bs-border-width));margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + var(--bs-border-width));padding-bottom:calc(.5rem + var(--bs-border-width));font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + var(--bs-border-width));padding-bottom:calc(.25rem + var(--bs-border-width));font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:var(--bs-secondary-color)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-clip:padding-box;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::-moz-placeholder{color:var(--bs-secondary-color);opacity:1}.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:var(--bs-secondary-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:var(--bs-body-color);background-color:transparent;border:solid transparent;border-width:var(--bs-border-width) 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));padding:.25rem .5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));padding:.5rem 1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}textarea.form-control-sm{min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}textarea.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-control-color{width:3rem;height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0!important;border-radius:var(--bs-border-radius)}.form-control-color::-webkit-color-swatch{border:0!important;border-radius:var(--bs-border-radius)}.form-control-color.form-control-sm{height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}.form-control-color.form-control-lg{height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:var(--bs-secondary-bg)}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-reverse{padding-right:1.5em;padding-left:0;text-align:right}.form-check-reverse .form-check-input{float:right;margin-right:-1.5em;margin-left:0}.form-check-input{--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");width:2em;margin-left:-2.5em;background-image:var(--bs-form-switch-bg);background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-switch.form-check-reverse{padding-right:2.5em;padding-left:0}.form-switch.form-check-reverse .form-check-input{margin-right:-2.5em;margin-left:0}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}.form-range{width:100%;height:1.5rem;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;-webkit-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;-moz-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:var(--bs-secondary-color)}.form-range:disabled::-moz-range-thumb{background-color:var(--bs-secondary-color)}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:calc(3.5rem + calc(var(--bs-border-width) * 2));min-height:calc(3.5rem + calc(var(--bs-border-width) * 2));line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;z-index:2;height:100%;padding:1rem .75rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:var(--bs-border-width) solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:1rem .75rem}.form-floating>.form-control-plaintext::-moz-placeholder,.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control-plaintext::placeholder,.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control-plaintext:not(:-moz-placeholder-shown),.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown),.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:-webkit-autofill,.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control-plaintext~label,.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:not(:-moz-placeholder-shown)~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius)}.form-floating>.form-control-plaintext~label::after,.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-select~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius)}.form-floating>.form-control:-webkit-autofill~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control-plaintext~label{border-width:var(--bs-border-width) 0}.form-floating>.form-control:disabled~label,.form-floating>:disabled~label{color:#6c757d}.form-floating>.form-control:disabled~label::after,.form-floating>:disabled~label::after{background-color:var(--bs-secondary-bg)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-floating,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(var(--bs-border-width) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-valid-color)}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-success);border-radius:var(--bs-border-radius)}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:var(--bs-form-valid-border-color)}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-control-color.is-valid,.was-validated .form-control-color:valid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:var(--bs-form-valid-border-color)}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:var(--bs-form-valid-color)}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:var(--bs-form-valid-color)}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-control:not(:focus):valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.was-validated .input-group>.form-select:not(:focus):valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-invalid-color)}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-danger);border-radius:var(--bs-border-radius)}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:var(--bs-form-invalid-border-color)}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-control-color.is-invalid,.was-validated .form-control-color:invalid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:var(--bs-form-invalid-border-color)}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:var(--bs-form-invalid-color)}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:var(--bs-form-invalid-color)}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-control:not(:focus):invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.was-validated .input-group>.form-select:not(:focus):invalid{z-index:4}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg);border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked:focus-visible+.btn{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-color:#fff;--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-color:#fff;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info{--bs-btn-color:#000;--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-color:#000;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6c757d;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-color:#000;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0dcaf0;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:0 0 0 #000;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-group-lg>.btn,.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}.btn-group-sm>.btn,.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);--bs-dropdown-inner-border-radius:calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:var(--bs-box-shadow);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-link-hover-color:var(--bs-body-color);--bs-dropdown-link-hover-bg:var(--bs-tertiary-bg);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:var(--bs-tertiary-color);--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--bs-dropdown-item-border-radius,0)}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:var(--bs-border-radius)}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:calc(var(--bs-border-width) * -1)}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:calc(var(--bs-border-width) * -1)}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn~.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.nav-tabs{--bs-nav-tabs-border-width:var(--bs-border-width);--bs-nav-tabs-border-color:var(--bs-border-color);--bs-nav-tabs-border-radius:var(--bs-border-radius);--bs-nav-tabs-link-hover-border-color:var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);--bs-nav-tabs-link-active-color:var(--bs-emphasis-color);--bs-nav-tabs-link-active-bg:var(--bs-body-bg);--bs-nav-tabs-link-active-border-color:var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.nav-tabs .nav-link{margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width));border:var(--bs-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--bs-nav-tabs-border-radius);border-top-right-radius:var(--bs-nav-tabs-border-radius)}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{isolation:isolate;border-color:var(--bs-nav-tabs-link-hover-border-color)}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:var(--bs-nav-tabs-link-active-color);background-color:var(--bs-nav-tabs-link-active-bg);border-color:var(--bs-nav-tabs-link-active-border-color)}.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--bs-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}.nav-pills{--bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#0d6efd}.nav-pills .nav-link{border-radius:var(--bs-nav-pills-border-radius)}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}.nav-underline{--bs-nav-underline-gap:1rem;--bs-nav-underline-border-width:0.125rem;--bs-nav-underline-link-active-color:var(--bs-emphasis-color);gap:var(--bs-nav-underline-gap)}.nav-underline .nav-link{padding-right:0;padding-left:0;border-bottom:var(--bs-nav-underline-border-width) solid transparent}.nav-underline .nav-link:focus,.nav-underline .nav-link:hover{border-bottom-color:currentcolor}.nav-underline .nav-link.active,.nav-underline .show>.nav-link{font-weight:700;color:var(--bs-nav-underline-link-active-color);border-bottom-color:currentcolor}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-navbar-color)}.navbar-text a,.navbar-text a:focus,.navbar-text a:hover{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:var(--bs-navbar-toggler-icon-bg);background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-sm .offcanvas .offcanvas-header{display:none}.navbar-expand-sm .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-md .offcanvas .offcanvas-header{display:none}.navbar-expand-md .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xl .offcanvas .offcanvas-header{display:none}.navbar-expand-xl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xxl .offcanvas .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand .offcanvas .offcanvas-header{display:none}.navbar-expand .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-dark,.navbar[data-bs-theme=dark]{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-subtitle{margin-top:calc(-.5 * var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));margin-left:calc(-.5 * var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-left:calc(-.5 * var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion{--bs-accordion-color:var(--bs-body-color);--bs-accordion-bg:var(--bs-body-bg);--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:var(--bs-border-width);--bs-accordion-border-radius:var(--bs-border-radius);--bs-accordion-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:var(--bs-body-color);--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:var(--bs-primary-text-emphasis);--bs-accordion-active-bg:var(--bs-primary-bg-subtle)}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.accordion-flush>.accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush>.accordion-item:first-child{border-top:0}.accordion-flush>.accordion-item:last-child{border-bottom:0}.accordion-flush>.accordion-item>.accordion-header .accordion-button,.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed{border-radius:0}.accordion-flush>.accordion-item>.accordion-collapse{border-radius:0}[data-bs-theme=dark] .accordion-button::after{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:var(--bs-secondary-color);--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:var(--bs-body-bg);--bs-pagination-border-width:var(--bs-border-width);--bs-pagination-border-color:var(--bs-border-color);--bs-pagination-border-radius:var(--bs-border-radius);--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:var(--bs-tertiary-bg);--bs-pagination-hover-border-color:var(--bs-border-color);--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:var(--bs-secondary-bg);--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:var(--bs-secondary-color);--bs-pagination-disabled-bg:var(--bs-secondary-bg);--bs-pagination-disabled-border-color:var(--bs-border-color);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.active>.page-link,.page-link.active{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(var(--bs-border-width) * -1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x:1.5rem;--bs-pagination-padding-y:0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius:var(--bs-border-radius-lg)}.pagination-sm{--bs-pagination-padding-x:0.5rem;--bs-pagination-padding-y:0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius:var(--bs-border-radius-sm)}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-heading{color:inherit}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{--bs-alert-color:var(--bs-primary-text-emphasis);--bs-alert-bg:var(--bs-primary-bg-subtle);--bs-alert-border-color:var(--bs-primary-border-subtle);--bs-alert-link-color:var(--bs-primary-text-emphasis)}.alert-secondary{--bs-alert-color:var(--bs-secondary-text-emphasis);--bs-alert-bg:var(--bs-secondary-bg-subtle);--bs-alert-border-color:var(--bs-secondary-border-subtle);--bs-alert-link-color:var(--bs-secondary-text-emphasis)}.alert-success{--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-border-color:var(--bs-success-border-subtle);--bs-alert-link-color:var(--bs-success-text-emphasis)}.alert-info{--bs-alert-color:var(--bs-info-text-emphasis);--bs-alert-bg:var(--bs-info-bg-subtle);--bs-alert-border-color:var(--bs-info-border-subtle);--bs-alert-link-color:var(--bs-info-text-emphasis)}.alert-warning{--bs-alert-color:var(--bs-warning-text-emphasis);--bs-alert-bg:var(--bs-warning-bg-subtle);--bs-alert-border-color:var(--bs-warning-border-subtle);--bs-alert-link-color:var(--bs-warning-text-emphasis)}.alert-danger{--bs-alert-color:var(--bs-danger-text-emphasis);--bs-alert-bg:var(--bs-danger-bg-subtle);--bs-alert-border-color:var(--bs-danger-border-subtle);--bs-alert-link-color:var(--bs-danger-text-emphasis)}.alert-light{--bs-alert-color:var(--bs-light-text-emphasis);--bs-alert-bg:var(--bs-light-bg-subtle);--bs-alert-border-color:var(--bs-light-border-subtle);--bs-alert-link-color:var(--bs-light-text-emphasis)}.alert-dark{--bs-alert-color:var(--bs-dark-text-emphasis);--bs-alert-bg:var(--bs-dark-bg-subtle);--bs-alert-border-color:var(--bs-dark-border-subtle);--bs-alert-link-color:var(--bs-dark-text-emphasis)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress,.progress-stacked{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);--bs-progress-box-shadow:var(--bs-box-shadow-inset);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--bs-progress-bar-color);text-align:center;white-space:nowrap;background-color:var(--bs-progress-bar-bg);transition:var(--bs-progress-bar-transition)}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:var(--bs-progress-height) var(--bs-progress-height)}.progress-stacked>.progress{overflow:visible}.progress-stacked>.progress>.progress-bar{width:100%}.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{animation:none}}.list-group{--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}.list-group-item-action:active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{--bs-list-group-color:var(--bs-primary-text-emphasis);--bs-list-group-bg:var(--bs-primary-bg-subtle);--bs-list-group-border-color:var(--bs-primary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-primary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-primary-border-subtle);--bs-list-group-active-color:var(--bs-primary-bg-subtle);--bs-list-group-active-bg:var(--bs-primary-text-emphasis);--bs-list-group-active-border-color:var(--bs-primary-text-emphasis)}.list-group-item-secondary{--bs-list-group-color:var(--bs-secondary-text-emphasis);--bs-list-group-bg:var(--bs-secondary-bg-subtle);--bs-list-group-border-color:var(--bs-secondary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-secondary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-secondary-border-subtle);--bs-list-group-active-color:var(--bs-secondary-bg-subtle);--bs-list-group-active-bg:var(--bs-secondary-text-emphasis);--bs-list-group-active-border-color:var(--bs-secondary-text-emphasis)}.list-group-item-success{--bs-list-group-color:var(--bs-success-text-emphasis);--bs-list-group-bg:var(--bs-success-bg-subtle);--bs-list-group-border-color:var(--bs-success-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-success-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-success-border-subtle);--bs-list-group-active-color:var(--bs-success-bg-subtle);--bs-list-group-active-bg:var(--bs-success-text-emphasis);--bs-list-group-active-border-color:var(--bs-success-text-emphasis)}.list-group-item-info{--bs-list-group-color:var(--bs-info-text-emphasis);--bs-list-group-bg:var(--bs-info-bg-subtle);--bs-list-group-border-color:var(--bs-info-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-info-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-info-border-subtle);--bs-list-group-active-color:var(--bs-info-bg-subtle);--bs-list-group-active-bg:var(--bs-info-text-emphasis);--bs-list-group-active-border-color:var(--bs-info-text-emphasis)}.list-group-item-warning{--bs-list-group-color:var(--bs-warning-text-emphasis);--bs-list-group-bg:var(--bs-warning-bg-subtle);--bs-list-group-border-color:var(--bs-warning-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-warning-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-warning-border-subtle);--bs-list-group-active-color:var(--bs-warning-bg-subtle);--bs-list-group-active-bg:var(--bs-warning-text-emphasis);--bs-list-group-active-border-color:var(--bs-warning-text-emphasis)}.list-group-item-danger{--bs-list-group-color:var(--bs-danger-text-emphasis);--bs-list-group-bg:var(--bs-danger-bg-subtle);--bs-list-group-border-color:var(--bs-danger-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-danger-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-danger-border-subtle);--bs-list-group-active-color:var(--bs-danger-bg-subtle);--bs-list-group-active-bg:var(--bs-danger-text-emphasis);--bs-list-group-active-border-color:var(--bs-danger-text-emphasis)}.list-group-item-light{--bs-list-group-color:var(--bs-light-text-emphasis);--bs-list-group-bg:var(--bs-light-bg-subtle);--bs-list-group-border-color:var(--bs-light-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-light-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-light-border-subtle);--bs-list-group-active-color:var(--bs-light-bg-subtle);--bs-list-group-active-bg:var(--bs-light-text-emphasis);--bs-list-group-active-border-color:var(--bs-light-text-emphasis)}.list-group-item-dark{--bs-list-group-color:var(--bs-dark-text-emphasis);--bs-list-group-bg:var(--bs-dark-bg-subtle);--bs-list-group-border-color:var(--bs-dark-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-dark-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-dark-border-subtle);--bs-list-group-active-color:var(--bs-dark-bg-subtle);--bs-list-group-active-bg:var(--bs-dark-text-emphasis);--bs-list-group-active-border-color:var(--bs-dark-text-emphasis)}.btn-close{--bs-btn-close-color:#000;--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");--bs-btn-close-opacity:0.5;--bs-btn-close-hover-opacity:0.75;--bs-btn-close-focus-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-btn-close-focus-opacity:1;--bs-btn-close-disabled-opacity:0.25;--bs-btn-close-white-filter:invert(1) grayscale(100%) brightness(200%);box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:var(--bs-btn-close-color);background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat;border:0;border-radius:.375rem;opacity:var(--bs-btn-close-opacity)}.btn-close:hover{color:var(--bs-btn-close-color);text-decoration:none;opacity:var(--bs-btn-close-hover-opacity)}.btn-close:focus{outline:0;box-shadow:var(--bs-btn-close-focus-shadow);opacity:var(--bs-btn-close-focus-opacity)}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--bs-btn-close-disabled-opacity)}.btn-close-white{filter:var(--bs-btn-close-white-filter)}[data-bs-theme=dark] .btn-close{filter:var(--bs-btn-close-white-filter)}.toast{--bs-toast-zindex:1090;--bs-toast-padding-x:0.75rem;--bs-toast-padding-y:0.5rem;--bs-toast-spacing:1.5rem;--bs-toast-max-width:350px;--bs-toast-font-size:0.875rem;--bs-toast-color: ;--bs-toast-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-border-width:var(--bs-border-width);--bs-toast-border-color:var(--bs-border-color-translucent);--bs-toast-border-radius:var(--bs-border-radius);--bs-toast-box-shadow:var(--bs-box-shadow);--bs-toast-header-color:var(--bs-secondary-color);--bs-toast-header-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-header-border-color:var(--bs-border-color-translucent);width:var(--bs-toast-max-width);max-width:100%;font-size:var(--bs-toast-font-size);color:var(--bs-toast-color);pointer-events:auto;background-color:var(--bs-toast-bg);background-clip:padding-box;border:var(--bs-toast-border-width) solid var(--bs-toast-border-color);box-shadow:var(--bs-toast-box-shadow);border-radius:var(--bs-toast-border-radius)}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{--bs-toast-zindex:1090;position:absolute;z-index:var(--bs-toast-zindex);width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:var(--bs-toast-spacing)}.toast-header{display:flex;align-items:center;padding:var(--bs-toast-padding-y) var(--bs-toast-padding-x);color:var(--bs-toast-header-color);background-color:var(--bs-toast-header-bg);background-clip:padding-box;border-bottom:var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);border-top-left-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));border-top-right-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))}.toast-header .btn-close{margin-right:calc(-.5 * var(--bs-toast-padding-x));margin-left:var(--bs-toast-padding-x)}.toast-body{padding:var(--bs-toast-padding-x);word-wrap:break-word}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color: ;--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-box-shadow:var(--bs-box-shadow-sm);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin:calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:var(--bs-box-shadow)}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--bs-modal-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{--bs-modal-width:800px}}@media (min-width:1200px){.modal-xl{--bs-modal-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:var(--bs-body-bg);--bs-tooltip-bg:var(--bs-emphasis-color);--bs-tooltip-border-radius:var(--bs-border-radius);--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.875rem;--bs-popover-bg:var(--bs-body-bg);--bs-popover-border-width:var(--bs-border-width);--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:var(--bs-border-radius-lg);--bs-popover-inner-border-radius:calc(var(--bs-border-radius-lg) - var(--bs-border-width));--bs-popover-box-shadow:var(--bs-box-shadow);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:1rem;--bs-popover-header-color:inherit;--bs-popover-header-bg:var(--bs-secondary-bg);--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:var(--bs-body-color);--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::after,.bs-popover-top>.popover-arrow::before{border-width:var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-top-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:var(--bs-popover-border-width);border-top-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::after,.bs-popover-end>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-right-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:var(--bs-popover-border-width);border-right-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::before{border-width:0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-bottom-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:var(--bs-popover-border-width);border-bottom-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:var(--bs-popover-arrow-width);margin-left:calc(-.5 * var(--bs-popover-arrow-width));content:"";border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-header-bg)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::after,.bs-popover-start>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-left-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:var(--bs-popover-border-width);border-left-color:var(--bs-popover-bg)}.popover-header{padding:var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);margin-bottom:0;font-size:var(--bs-popover-header-font-size);color:var(--bs-popover-header-color);background-color:var(--bs-popover-header-bg);border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-top-left-radius:var(--bs-popover-inner-border-radius);border-top-right-radius:var(--bs-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);color:var(--bs-popover-body-color)}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-next-icon,.carousel-dark .carousel-control-prev-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}[data-bs-theme=dark] .carousel .carousel-control-next-icon,[data-bs-theme=dark] .carousel .carousel-control-prev-icon,[data-bs-theme=dark].carousel .carousel-control-next-icon,[data-bs-theme=dark].carousel .carousel-control-prev-icon{filter:invert(1) grayscale(100)}[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-caption,[data-bs-theme=dark].carousel .carousel-caption{color:#000}.spinner-border,.spinner-grow{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.offcanvas,.offcanvas-lg,.offcanvas-md,.offcanvas-sm,.offcanvas-xl,.offcanvas-xxl{--bs-offcanvas-zindex:1045;--bs-offcanvas-width:400px;--bs-offcanvas-height:30vh;--bs-offcanvas-padding-x:1rem;--bs-offcanvas-padding-y:1rem;--bs-offcanvas-color:var(--bs-body-color);--bs-offcanvas-bg:var(--bs-body-bg);--bs-offcanvas-border-width:var(--bs-border-width);--bs-offcanvas-border-color:var(--bs-border-color-translucent);--bs-offcanvas-box-shadow:var(--bs-box-shadow-sm);--bs-offcanvas-transition:transform 0.3s ease-in-out;--bs-offcanvas-title-line-height:1.5}@media (max-width:575.98px){.offcanvas-sm{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:575.98px) and (prefers-reduced-motion:reduce){.offcanvas-sm{transition:none}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-sm.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-sm.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-sm.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-sm.show:not(.hiding),.offcanvas-sm.showing{transform:none}.offcanvas-sm.hiding,.offcanvas-sm.show,.offcanvas-sm.showing{visibility:visible}}@media (min-width:576px){.offcanvas-sm{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-sm .offcanvas-header{display:none}.offcanvas-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:767.98px){.offcanvas-md{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.offcanvas-md{transition:none}}@media (max-width:767.98px){.offcanvas-md.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-md.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-md.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-md.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-md.show:not(.hiding),.offcanvas-md.showing{transform:none}.offcanvas-md.hiding,.offcanvas-md.show,.offcanvas-md.showing{visibility:visible}}@media (min-width:768px){.offcanvas-md{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-md .offcanvas-header{display:none}.offcanvas-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:991.98px){.offcanvas-lg{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:991.98px) and (prefers-reduced-motion:reduce){.offcanvas-lg{transition:none}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-lg.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-lg.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-lg.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-lg.show:not(.hiding),.offcanvas-lg.showing{transform:none}.offcanvas-lg.hiding,.offcanvas-lg.show,.offcanvas-lg.showing{visibility:visible}}@media (min-width:992px){.offcanvas-lg{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-lg .offcanvas-header{display:none}.offcanvas-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1199.98px){.offcanvas-xl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1199.98px) and (prefers-reduced-motion:reduce){.offcanvas-xl{transition:none}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xl.show:not(.hiding),.offcanvas-xl.showing{transform:none}.offcanvas-xl.hiding,.offcanvas-xl.show,.offcanvas-xl.showing{visibility:visible}}@media (min-width:1200px){.offcanvas-xl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xl .offcanvas-header{display:none}.offcanvas-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1399.98px){.offcanvas-xxl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1399.98px) and (prefers-reduced-motion:reduce){.offcanvas-xxl{transition:none}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xxl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xxl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xxl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xxl.show:not(.hiding),.offcanvas-xxl.showing{transform:none}.offcanvas-xxl.hiding,.offcanvas-xxl.show,.offcanvas-xxl.showing{visibility:visible}}@media (min-width:1400px){.offcanvas-xxl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xxl .offcanvas-header{display:none}.offcanvas-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}.offcanvas.hiding,.offcanvas.show,.offcanvas.showing{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-header .btn-close{padding:calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);margin:calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{animation:placeholder-glow 2s ease-in-out infinite}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.text-bg-primary{color:#fff!important;background-color:RGBA(var(--bs-primary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-secondary{color:#fff!important;background-color:RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-success{color:#fff!important;background-color:RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1))!important}.text-bg-info{color:#000!important;background-color:RGBA(var(--bs-info-rgb),var(--bs-bg-opacity,1))!important}.text-bg-warning{color:#000!important;background-color:RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important}.text-bg-danger{color:#fff!important;background-color:RGBA(var(--bs-danger-rgb),var(--bs-bg-opacity,1))!important}.text-bg-light{color:#000!important;background-color:RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1))!important}.text-bg-dark{color:#fff!important;background-color:RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1))!important}.link-primary{color:RGBA(var(--bs-primary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important}.link-primary:focus,.link-primary:hover{color:RGBA(10,88,202,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important}.link-secondary{color:RGBA(var(--bs-secondary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important}.link-secondary:focus,.link-secondary:hover{color:RGBA(86,94,100,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important}.link-success{color:RGBA(var(--bs-success-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important}.link-success:focus,.link-success:hover{color:RGBA(20,108,67,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important}.link-info{color:RGBA(var(--bs-info-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important}.link-info:focus,.link-info:hover{color:RGBA(61,213,243,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important}.link-warning{color:RGBA(var(--bs-warning-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important}.link-warning:focus,.link-warning:hover{color:RGBA(255,205,57,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important}.link-danger{color:RGBA(var(--bs-danger-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important}.link-danger:focus,.link-danger:hover{color:RGBA(176,42,55,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important}.link-light{color:RGBA(var(--bs-light-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important}.link-light:focus,.link-light:hover{color:RGBA(249,250,251,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important}.link-dark{color:RGBA(var(--bs-dark-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important}.link-dark:focus,.link-dark:hover{color:RGBA(26,30,33,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important}.link-body-emphasis{color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-body-emphasis:focus,.link-body-emphasis:hover{color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,.75))!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important}.focus-ring:focus{outline:0;box-shadow:var(--bs-focus-ring-x,0) var(--bs-focus-ring-y,0) var(--bs-focus-ring-blur,0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:.375rem;align-items:center;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-underline-offset:0.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:.2s ease-in-out transform}@media (prefers-reduced-motion:reduce){.icon-link>.bi{transition:none}}.icon-link-hover:focus-visible>.bi,.icon-link-hover:hover>.bi{transform:var(--bs-icon-link-transform,translate3d(.25em,0,0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){position:absolute!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.object-fit-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-none{-o-object-fit:none!important;object-fit:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.overflow-x-auto{overflow-x:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.overflow-x-visible{overflow-x:visible!important}.overflow-x-scroll{overflow-x:scroll!important}.overflow-y-auto{overflow-y:auto!important}.overflow-y-hidden{overflow-y:hidden!important}.overflow-y-visible{overflow-y:visible!important}.overflow-y-scroll{overflow-y:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:var(--bs-box-shadow)!important}.shadow-sm{box-shadow:var(--bs-box-shadow-sm)!important}.shadow-lg{box-shadow:var(--bs-box-shadow-lg)!important}.shadow-none{box-shadow:none!important}.focus-ring-primary{--bs-focus-ring-color:rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-secondary{--bs-focus-ring-color:rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-success{--bs-focus-ring-color:rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity))}.focus-ring-info{--bs-focus-ring-color:rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity))}.focus-ring-warning{--bs-focus-ring-color:rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity))}.focus-ring-danger{--bs-focus-ring-color:rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity))}.focus-ring-light{--bs-focus-ring-color:rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))}.focus-ring-dark{--bs-focus-ring-color:rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-top{border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top-0{border-top:0!important}.border-end{border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-start-0{border-left:0!important}.border-primary{--bs-border-opacity:1;border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important}.border-secondary{--bs-border-opacity:1;border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))!important}.border-success{--bs-border-opacity:1;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important}.border-info{--bs-border-opacity:1;border-color:rgba(var(--bs-info-rgb),var(--bs-border-opacity))!important}.border-warning{--bs-border-opacity:1;border-color:rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important}.border-danger{--bs-border-opacity:1;border-color:rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important}.border-light{--bs-border-opacity:1;border-color:rgba(var(--bs-light-rgb),var(--bs-border-opacity))!important}.border-dark{--bs-border-opacity:1;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity))!important}.border-black{--bs-border-opacity:1;border-color:rgba(var(--bs-black-rgb),var(--bs-border-opacity))!important}.border-white{--bs-border-opacity:1;border-color:rgba(var(--bs-white-rgb),var(--bs-border-opacity))!important}.border-primary-subtle{border-color:var(--bs-primary-border-subtle)!important}.border-secondary-subtle{border-color:var(--bs-secondary-border-subtle)!important}.border-success-subtle{border-color:var(--bs-success-border-subtle)!important}.border-info-subtle{border-color:var(--bs-info-border-subtle)!important}.border-warning-subtle{border-color:var(--bs-warning-border-subtle)!important}.border-danger-subtle{border-color:var(--bs-danger-border-subtle)!important}.border-light-subtle{border-color:var(--bs-light-border-subtle)!important}.border-dark-subtle{border-color:var(--bs-dark-border-subtle)!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.border-opacity-10{--bs-border-opacity:0.1}.border-opacity-25{--bs-border-opacity:0.25}.border-opacity-50{--bs-border-opacity:0.5}.border-opacity-75{--bs-border-opacity:0.75}.border-opacity-100{--bs-border-opacity:1}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.row-gap-0{row-gap:0!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}.row-gap-4{row-gap:1.5rem!important}.row-gap-5{row-gap:3rem!important}.column-gap-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.font-monospace{font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-lighter{font-weight:lighter!important}.fw-light{font-weight:300!important}.fw-normal{font-weight:400!important}.fw-medium{font-weight:500!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(var(--bs-body-color-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:var(--bs-secondary-color)!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-body-secondary{--bs-text-opacity:1;color:var(--bs-secondary-color)!important}.text-body-tertiary{--bs-text-opacity:1;color:var(--bs-tertiary-color)!important}.text-body-emphasis{--bs-text-opacity:1;color:var(--bs-emphasis-color)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.text-primary-emphasis{color:var(--bs-primary-text-emphasis)!important}.text-secondary-emphasis{color:var(--bs-secondary-text-emphasis)!important}.text-success-emphasis{color:var(--bs-success-text-emphasis)!important}.text-info-emphasis{color:var(--bs-info-text-emphasis)!important}.text-warning-emphasis{color:var(--bs-warning-text-emphasis)!important}.text-danger-emphasis{color:var(--bs-danger-text-emphasis)!important}.text-light-emphasis{color:var(--bs-light-text-emphasis)!important}.text-dark-emphasis{color:var(--bs-dark-text-emphasis)!important}.link-opacity-10{--bs-link-opacity:0.1}.link-opacity-10-hover:hover{--bs-link-opacity:0.1}.link-opacity-25{--bs-link-opacity:0.25}.link-opacity-25-hover:hover{--bs-link-opacity:0.25}.link-opacity-50{--bs-link-opacity:0.5}.link-opacity-50-hover:hover{--bs-link-opacity:0.5}.link-opacity-75{--bs-link-opacity:0.75}.link-opacity-75-hover:hover{--bs-link-opacity:0.75}.link-opacity-100{--bs-link-opacity:1}.link-opacity-100-hover:hover{--bs-link-opacity:1}.link-offset-1{text-underline-offset:0.125em!important}.link-offset-1-hover:hover{text-underline-offset:0.125em!important}.link-offset-2{text-underline-offset:0.25em!important}.link-offset-2-hover:hover{text-underline-offset:0.25em!important}.link-offset-3{text-underline-offset:0.375em!important}.link-offset-3-hover:hover{text-underline-offset:0.375em!important}.link-underline-primary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-secondary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-success{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important}.link-underline-info{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important}.link-underline-warning{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important}.link-underline-danger{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important}.link-underline-light{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important}.link-underline-dark{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important}.link-underline{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-underline-opacity-0{--bs-link-underline-opacity:0}.link-underline-opacity-0-hover:hover{--bs-link-underline-opacity:0}.link-underline-opacity-10{--bs-link-underline-opacity:0.1}.link-underline-opacity-10-hover:hover{--bs-link-underline-opacity:0.1}.link-underline-opacity-25{--bs-link-underline-opacity:0.25}.link-underline-opacity-25-hover:hover{--bs-link-underline-opacity:0.25}.link-underline-opacity-50{--bs-link-underline-opacity:0.5}.link-underline-opacity-50-hover:hover{--bs-link-underline-opacity:0.5}.link-underline-opacity-75{--bs-link-underline-opacity:0.75}.link-underline-opacity-75-hover:hover{--bs-link-underline-opacity:0.75}.link-underline-opacity-100{--bs-link-underline-opacity:1}.link-underline-opacity-100-hover:hover{--bs-link-underline-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-body-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-bg-rgb),var(--bs-bg-opacity))!important}.bg-body-tertiary{--bs-bg-opacity:1;background-color:rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-primary-subtle{background-color:var(--bs-primary-bg-subtle)!important}.bg-secondary-subtle{background-color:var(--bs-secondary-bg-subtle)!important}.bg-success-subtle{background-color:var(--bs-success-bg-subtle)!important}.bg-info-subtle{background-color:var(--bs-info-bg-subtle)!important}.bg-warning-subtle{background-color:var(--bs-warning-bg-subtle)!important}.bg-danger-subtle{background-color:var(--bs-danger-bg-subtle)!important}.bg-light-subtle{background-color:var(--bs-light-bg-subtle)!important}.bg-dark-subtle{background-color:var(--bs-dark-bg-subtle)!important}.bg-gradient{background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:var(--bs-border-radius)!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:var(--bs-border-radius-sm)!important}.rounded-2{border-radius:var(--bs-border-radius)!important}.rounded-3{border-radius:var(--bs-border-radius-lg)!important}.rounded-4{border-radius:var(--bs-border-radius-xl)!important}.rounded-5{border-radius:var(--bs-border-radius-xxl)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:var(--bs-border-radius-pill)!important}.rounded-top{border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-0{border-top-left-radius:0!important;border-top-right-radius:0!important}.rounded-top-1{border-top-left-radius:var(--bs-border-radius-sm)!important;border-top-right-radius:var(--bs-border-radius-sm)!important}.rounded-top-2{border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-3{border-top-left-radius:var(--bs-border-radius-lg)!important;border-top-right-radius:var(--bs-border-radius-lg)!important}.rounded-top-4{border-top-left-radius:var(--bs-border-radius-xl)!important;border-top-right-radius:var(--bs-border-radius-xl)!important}.rounded-top-5{border-top-left-radius:var(--bs-border-radius-xxl)!important;border-top-right-radius:var(--bs-border-radius-xxl)!important}.rounded-top-circle{border-top-left-radius:50%!important;border-top-right-radius:50%!important}.rounded-top-pill{border-top-left-radius:var(--bs-border-radius-pill)!important;border-top-right-radius:var(--bs-border-radius-pill)!important}.rounded-end{border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-0{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.rounded-end-1{border-top-right-radius:var(--bs-border-radius-sm)!important;border-bottom-right-radius:var(--bs-border-radius-sm)!important}.rounded-end-2{border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-3{border-top-right-radius:var(--bs-border-radius-lg)!important;border-bottom-right-radius:var(--bs-border-radius-lg)!important}.rounded-end-4{border-top-right-radius:var(--bs-border-radius-xl)!important;border-bottom-right-radius:var(--bs-border-radius-xl)!important}.rounded-end-5{border-top-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-right-radius:var(--bs-border-radius-xxl)!important}.rounded-end-circle{border-top-right-radius:50%!important;border-bottom-right-radius:50%!important}.rounded-end-pill{border-top-right-radius:var(--bs-border-radius-pill)!important;border-bottom-right-radius:var(--bs-border-radius-pill)!important}.rounded-bottom{border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-0{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.rounded-bottom-1{border-bottom-right-radius:var(--bs-border-radius-sm)!important;border-bottom-left-radius:var(--bs-border-radius-sm)!important}.rounded-bottom-2{border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-3{border-bottom-right-radius:var(--bs-border-radius-lg)!important;border-bottom-left-radius:var(--bs-border-radius-lg)!important}.rounded-bottom-4{border-bottom-right-radius:var(--bs-border-radius-xl)!important;border-bottom-left-radius:var(--bs-border-radius-xl)!important}.rounded-bottom-5{border-bottom-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-left-radius:var(--bs-border-radius-xxl)!important}.rounded-bottom-circle{border-bottom-right-radius:50%!important;border-bottom-left-radius:50%!important}.rounded-bottom-pill{border-bottom-right-radius:var(--bs-border-radius-pill)!important;border-bottom-left-radius:var(--bs-border-radius-pill)!important}.rounded-start{border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-0{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.rounded-start-1{border-bottom-left-radius:var(--bs-border-radius-sm)!important;border-top-left-radius:var(--bs-border-radius-sm)!important}.rounded-start-2{border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-3{border-bottom-left-radius:var(--bs-border-radius-lg)!important;border-top-left-radius:var(--bs-border-radius-lg)!important}.rounded-start-4{border-bottom-left-radius:var(--bs-border-radius-xl)!important;border-top-left-radius:var(--bs-border-radius-xl)!important}.rounded-start-5{border-bottom-left-radius:var(--bs-border-radius-xxl)!important;border-top-left-radius:var(--bs-border-radius-xxl)!important}.rounded-start-circle{border-bottom-left-radius:50%!important;border-top-left-radius:50%!important}.rounded-start-pill{border-bottom-left-radius:var(--bs-border-radius-pill)!important;border-top-left-radius:var(--bs-border-radius-pill)!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.z-n1{z-index:-1!important}.z-0{z-index:0!important}.z-1{z-index:1!important}.z-2{z-index:2!important}.z-3{z-index:3!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.object-fit-sm-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-sm-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-sm-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-sm-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-sm-none{-o-object-fit:none!important;object-fit:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.row-gap-sm-0{row-gap:0!important}.row-gap-sm-1{row-gap:.25rem!important}.row-gap-sm-2{row-gap:.5rem!important}.row-gap-sm-3{row-gap:1rem!important}.row-gap-sm-4{row-gap:1.5rem!important}.row-gap-sm-5{row-gap:3rem!important}.column-gap-sm-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-sm-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-sm-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-sm-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-sm-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-sm-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.object-fit-md-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-md-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-md-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-md-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-md-none{-o-object-fit:none!important;object-fit:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.row-gap-md-0{row-gap:0!important}.row-gap-md-1{row-gap:.25rem!important}.row-gap-md-2{row-gap:.5rem!important}.row-gap-md-3{row-gap:1rem!important}.row-gap-md-4{row-gap:1.5rem!important}.row-gap-md-5{row-gap:3rem!important}.column-gap-md-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-md-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-md-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-md-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-md-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-md-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.object-fit-lg-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-lg-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-lg-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-lg-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-lg-none{-o-object-fit:none!important;object-fit:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.row-gap-lg-0{row-gap:0!important}.row-gap-lg-1{row-gap:.25rem!important}.row-gap-lg-2{row-gap:.5rem!important}.row-gap-lg-3{row-gap:1rem!important}.row-gap-lg-4{row-gap:1.5rem!important}.row-gap-lg-5{row-gap:3rem!important}.column-gap-lg-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-lg-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-lg-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-lg-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-lg-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-lg-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.object-fit-xl-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-xl-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-xl-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-xl-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-xl-none{-o-object-fit:none!important;object-fit:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.row-gap-xl-0{row-gap:0!important}.row-gap-xl-1{row-gap:.25rem!important}.row-gap-xl-2{row-gap:.5rem!important}.row-gap-xl-3{row-gap:1rem!important}.row-gap-xl-4{row-gap:1.5rem!important}.row-gap-xl-5{row-gap:3rem!important}.column-gap-xl-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-xl-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-xl-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-xl-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-xl-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-xl-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.object-fit-xxl-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-xxl-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-xxl-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-xxl-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-xxl-none{-o-object-fit:none!important;object-fit:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.row-gap-xxl-0{row-gap:0!important}.row-gap-xxl-1{row-gap:.25rem!important}.row-gap-xxl-2{row-gap:.5rem!important}.row-gap-xxl-3{row-gap:1rem!important}.row-gap-xxl-4{row-gap:1.5rem!important}.row-gap-xxl-5{row-gap:3rem!important}.column-gap-xxl-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-xxl-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-xxl-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-xxl-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-xxl-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-xxl-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}} /*# sourceMappingURL=bootstrap.min.css.map */ @font-face { font-family: "flaticon"; src: url("/fonts/flaticon.woff2?2b4592e822a4defd83a97d56065a8d51") format("woff2"), url("/fonts/flaticon.woff?2b4592e822a4defd83a97d56065a8d51") format("woff"), url("/fonts/flaticon.eot?2b4592e822a4defd83a97d56065a8d51#iefix") format("embedded-opentype"), url("/fonts/flaticon.ttf?2b4592e822a4defd83a97d56065a8d51") format("truetype"), url("/fonts/flaticonx.svg?2b4592e822a4defd83a97d56065a8d51#flaticon_pintex") format("svg") } span[class^="flaticon-"]:before, span[class*=" flaticon-"]:before { font-family: flaticon!important; font-style: normal; font-weight: normal!important; font-variant: normal; text-transform: none; font-size: 20px; line-height: 1!important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .flaticon-facebook:before { content: "\f101"; } .flaticon-twitter:before { content: "\f102"; } .flaticon-whatsapp:before { content: "\f103"; } .flaticon-skype:before { content: "\f104"; } .flaticon-dribbble:before { content: "\f105"; } .flaticon-messenger:before { content: "\f106"; } .flaticon-twitter-1:before { content: "\f107"; } .flaticon-youtube:before { content: "\f108"; } .flaticon-instagram:before { content: "\f109"; } .flaticon-pinterest-logo:before { content: "\f10a"; } .flaticon-vimeo:before { content: "\f10b"; } .flaticon-linkedin:before { content: "\f10c"; } .flaticon-line:before { content: "\f10d"; } .flaticon-kakao-talk:before { content: "\f10e"; } .flaticon-telegram:before { content: "\f10f"; } .flaticon-snapchat:before { content: "\f110"; } .flaticon-instagram-1:before { content: "\f111"; } .flaticon-behance:before { content: "\f112"; } .flaticon-github:before { content: "\f113"; } .flaticon-slack:before { content: "\f114"; } .flaticon-stack-overflow:before { content: "\f115"; } .flaticon-codepen:before { content: "\f116"; } .flaticon-git:before { content: "\f117"; } .flaticon-open-source:before { content: "\f118"; } .flaticon-dropbox:before { content: "\f119"; } .flaticon-google-drive:before { content: "\f11a"; } .flaticon-slack-1:before { content: "\f11b"; } .flaticon-apple-black-logo:before { content: "\f11c"; } .flaticon-windows-platform-logo:before { content: "\f11d"; } .flaticon-android-logo:before { content: "\f11e"; } .flaticon-google-play:before { content: "\f11f"; } .flaticon-css-3:before { content: "\f120"; } .flaticon-html-5:before { content: "\f121"; } .flaticon-wordpress:before { content: "\f122"; } .flaticon-linux-platform:before { content: "\f123"; } .flaticon-python:before { content: "\f124"; } .flaticon-js:before { content: "\f125"; } .flaticon-css:before { content: "\f126"; } .flaticon-sketch:before { content: "\f127"; } .flaticon-chrome:before { content: "\f128"; } .flaticon-paypal:before { content: "\f129"; } .flaticon-swift:before { content: "\f12a"; } .flaticon-creative-cloud:before { content: "\f12b"; } .flaticon-adobe:before { content: "\f12c"; } .flaticon-star:before { content: "\f12d"; } .flaticon-half-star-shape:before { content: "\f12e"; } .flaticon-star-half-empty:before { content: "\f12f"; } .flaticon-star-1:before { content: "\f130"; } .flaticon-magnifying-glass:before { content: "\f131"; } .flaticon-reply-arrow:before { content: "\f132"; } .flaticon-visibility:before { content: "\f133"; } .flaticon-invisible:before { content: "\f134"; } .flaticon-circle:before { content: "\f135"; } .flaticon-ring:before { content: "\f136"; } .flaticon-heart:before { content: "\f137"; } .flaticon-play:before { content: "\f138"; } .flaticon-play-button:before { content: "\f139"; } .flaticon-email:before { content: "\f13a"; } .flaticon-phone-call:before { content: "\f13b"; } .flaticon-location-pin:before { content: "\f13c"; } .flaticon-padlock:before { content: "\f13d"; } .flaticon-send:before { content: "\f13e"; } .flaticon-diskette:before { content: "\f13f"; } .flaticon-bookmark:before { content: "\f140"; } .flaticon-grid:before { content: "\f141"; } .flaticon-ellipsis:before { content: "\f142"; } .flaticon-quote:before { content: "\f143"; } .flaticon-double-quotes:before { content: "\f144"; } .flaticon-check:before { content: "\f145"; } .flaticon-plus:before { content: "\f146"; } .flaticon-minus:before { content: "\f147"; } .flaticon-minus-1:before { content: "\f148"; } .flaticon-cancel:before { content: "\f149"; } .flaticon-sort-arrows-couple-pointing-up-and-down:before { content: "\f14a"; } .flaticon-caret-arrow-up:before { content: "\f14b"; } .flaticon-sort-down:before { content: "\f14c"; } .flaticon-next:before { content: "\f14d"; } .flaticon-up-arrow:before { content: "\f14e"; } .flaticon-down-arrow:before { content: "\f14f"; } .flaticon-right-arrow:before { content: "\f150"; } .flaticon-up-arrow-1:before { content: "\f151"; } .flaticon-down-arrow-1:before { content: "\f152"; } .flaticon-forward:before { content: "\f153"; } .flaticon-upload:before { content: "\f154"; } .flaticon-download-file:before { content: "\f155"; } .flaticon-moon:before { content: "\f156"; } .flaticon-sun:before { content: "\f157"; } .flaticon-dice:before { content: "\f158"; } .flaticon-trim:before { content: "\f159"; } .flaticon-resolution:before { content: "\f15a"; } .flaticon-mission-statement:before { content: "\f15b"; } .flaticon-income:before { content: "\f15c"; } .flaticon-pattern:before { content: "\f15d"; } .flaticon-spyware:before { content: "\f15e"; } .flaticon-network:before { content: "\f15f"; } .flaticon-drop-down-menu:before { content: "\f160"; } .flaticon-flow-chart:before { content: "\f161"; } .flaticon-school-supplies:before { content: "\f162"; } .flaticon-open-enrollment:before { content: "\f163"; } .flaticon-paid-search:before { content: "\f164"; } .flaticon-process:before { content: "\f165"; } .flaticon-flow-chart-1:before { content: "\f166"; } .flaticon-layer:before { content: "\f167"; } .flaticon-pie-chart:before { content: "\f168"; } .flaticon-wallet:before { content: "\f169"; } .flaticon-server:before { content: "\f16a"; } .flaticon-transfer:before { content: "\f16b"; } .flaticon-interface:before { content: "\f16c"; } .flaticon-shopping-cart:before { content: "\f16d"; } .flaticon-calendar:before { content: "\f16e"; } .flaticon-translate:before { content: "\f16f"; } .flaticon-browser:before { content: "\f170"; } .flaticon-maintenance:before { content: "\f171"; } .flaticon-email-1:before { content: "\f172"; } .flaticon-firewall:before { content: "\f173"; } .flaticon-hosting:before { content: "\f174"; } .flaticon-pie-chart-1:before { content: "\f175"; } .flaticon-increase:before { content: "\f176"; } .flaticon-group:before { content: "\f177"; } .flaticon-chat:before { content: "\f178"; } .flaticon-puzzle:before { content: "\f179"; } .flaticon-radar:before { content: "\f17a"; } .flaticon-trophy:before { content: "\f17b"; } .flaticon-target:before { content: "\f17c"; } .flaticon-home:before { content: "\f17d"; } .flaticon-playlist:before { content: "\f17e"; } .flaticon-hashtag:before { content: "\f17f"; } .flaticon-email-2:before { content: "\f180"; } .flaticon-alter:before { content: "\f181"; } .flaticon-memphis:before { content: "\f182"; } .flaticon-time:before { content: "\f183"; } .flaticon-validated:before { content: "\f184"; } .flaticon-shopping-cart-1:before { content: "\f185"; } .flaticon-start-here:before { content: "\f186"; } .flaticon-shopping-cart-2:before { content: "\f187"; } .flaticon-search:before { content: "\f188"; } .flaticon-vip:before { content: "\f189"; } .flaticon-goal:before { content: "\f18a"; } .flaticon-chat-1:before { content: "\f18b"; } .flaticon-piggy-bank:before { content: "\f18c"; } .flaticon-workflow:before { content: "\f18d"; } .flaticon-excel:before { content: "\f18e"; } .flaticon-key-value-database:before { content: "\f18f"; } .flaticon-time-1:before { content: "\f190"; } .flaticon-browser-1:before { content: "\f191"; } .flaticon-usb:before { content: "\f192"; } .flaticon-reorder:before { content: "\f193"; } .flaticon-prioritize:before { content: "\f194"; } .flaticon-algorithm:before { content: "\f195"; } .flaticon-chronometer:before { content: "\f196"; } .flaticon-calendar-1:before { content: "\f197"; } .flaticon-telescope:before { content: "\f198"; } .flaticon-global:before { content: "\f199"; } .flaticon-chat-2:before { content: "\f19a"; } .flaticon-security:before { content: "\f19b"; } .flaticon-tools:before { content: "\f19c"; } .flaticon-analytics:before { content: "\f19d"; } .flaticon-comment:before { content: "\f19e"; } .flaticon-calendar-2:before { content: "\f19f"; } .flaticon-qr-code:before { content: "\f1a0"; } .flaticon-layers:before { content: "\f1a1"; } .flaticon-maximize:before { content: "\f1a2"; } .flaticon-maximize-1:before { content: "\f1a3"; } .flaticon-click:before { content: "\f1a4"; } .flaticon-color-palette:before { content: "\f1a5"; } .flaticon-browser-2:before { content: "\f1a6"; } .flaticon-search-engine:before { content: "\f1a7"; } .flaticon-note:before { content: "\f1a8"; } .flaticon-calculator:before { content: "\f1a9"; } .flaticon-folder:before { content: "\f1aa"; } .flaticon-suit:before { content: "\f1ab"; } .flaticon-scalability:before { content: "\f1ac"; } .flaticon-api:before { content: "\f1ad"; } .flaticon-screenplay:before { content: "\f1ae"; } .flaticon-insult:before { content: "\f1af"; } .flaticon-device:before { content: "\f1b0"; } .flaticon-creative-process:before { content: "\f1b1"; } .flaticon-read:before { content: "\f1b2"; } .flaticon-shield:before { content: "\f1b3"; } .flaticon-interface-1:before { content: "\f1b4"; } .flaticon-computer-mouse:before { content: "\f1b5"; } .flaticon-innovation:before { content: "\f1b6"; } .flaticon-engineering:before { content: "\f1b7"; } .flaticon-avatar:before { content: "\f1b8"; } .flaticon-version:before { content: "\f1b9"; } .flaticon-graphics:before { content: "\f1ba"; } .flaticon-goal-1:before { content: "\f1bb"; } .flaticon-podium:before { content: "\f1bc"; } .flaticon-networking:before { content: "\f1bd"; } .flaticon-fast-food:before { content: "\f1be"; } .flaticon-data-center:before { content: "\f1bf"; } .flaticon-pie-chart-2:before { content: "\f1c0"; } .flaticon-analytics-1:before { content: "\f1c1"; } .flaticon-price-label:before { content: "\f1c2"; } .flaticon-around-the-world:before { content: "\f1c3"; } .flaticon-connection:before { content: "\f1c4"; } .flaticon-heartbeat:before { content: "\f1c5"; } .flaticon-pension:before { content: "\f1c6"; } .flaticon-pin:before { content: "\f1c7"; } .flaticon-smartphone:before { content: "\f1c8"; } .flaticon-video-message:before { content: "\f1c9"; } .flaticon-data:before { content: "\f1ca"; } .flaticon-folder-1:before { content: "\f1cb"; } .flaticon-folder-2:before { content: "\f1cc"; } .flaticon-abstract-shape:before { content: "\f1cd"; } .flaticon-voip:before { content: "\f1ce"; } .flaticon-audio-message:before { content: "\f1cf"; } .flaticon-smartphone-1:before { content: "\f1d0"; } .flaticon-live-streaming:before { content: "\f1d1"; } .flaticon-connections:before { content: "\f1d2"; } .flaticon-credit-card:before { content: "\f1d3"; } .flaticon-credit-card-1:before { content: "\f1d4"; } .flaticon-ai:before { content: "\f1d5"; } .flaticon-chat-3:before { content: "\f1d6"; } .flaticon-youtube-1:before { content: "\f1d7"; } .flaticon-voice:before { content: "\f1d8"; } .flaticon-fingerprint-scan:before { content: "\f1d9"; } .flaticon-binary-code:before { content: "\f1da"; } .flaticon-data-cleaning:before { content: "\f1db"; } .flaticon-folder-3:before { content: "\f1dc"; } .flaticon-union:before { content: "\f1dd"; } .flaticon-orientation:before { content: "\f1de"; } .flaticon-typography:before { content: "\f1df"; } .flaticon-push-pin:before { content: "\f1e0"; } .flaticon-reorder-1:before { content: "\f1e1"; } .flaticon-currency-exchange:before { content: "\f1e2"; } .flaticon-money:before { content: "\f1e3"; } .flaticon-transaction:before { content: "\f1e4"; } .flaticon-email-3:before { content: "\f1e5"; } .flaticon-search-engine-1:before { content: "\f1e6"; } .flaticon-schedule:before { content: "\f1e7"; } .flaticon-cube:before { content: "\f1e8"; } .flaticon-keyboard:before { content: "\f1e9"; } .flaticon-message:before { content: "\f1ea"; } .flaticon-geolocalization:before { content: "\f1eb"; } .flaticon-scale:before { content: "\f1ec"; } .flaticon-top-border:before { content: "\f1ed"; } .flaticon-combine:before { content: "\f1ee"; } .flaticon-donation:before { content: "\f1ef"; } .flaticon-money-1:before { content: "\f1f0"; } .flaticon-computer:before { content: "\f1f1"; } .flaticon-video:before { content: "\f1f2"; } .flaticon-success:before { content: "\f1f3"; } .flaticon-envelope:before { content: "\f1f4"; } /* * Plugin: Web Slide Navigation System * Demo Link: https://uxwing.com/webslide/ * Author: UXWing * License: http://codecanyon.net/licenses/standard */ /*------------------------------------------*/ /* Desktop Base CSS --------------------------------------------*/ .wsmenu html, .wsmenu body, .wsmenu iframe, .wsmenu h1, .wsmenu h2, .wsmenu h3, .wsmenu h4, .wsmenu h5, .wsmenu h6 { -webkit-font-smoothing: subpixel-antialiased; font-smoothing: antialiased; font-smooth: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; font-smoothing: subpixel-antialiased; font-smooth: subpixel-antialiased; } .wsmenu .cl { clear: both; } .wsmenu img { border: 0 none; max-width: 100%; } .wsmenu a:focus { outline: none; } .wsmenu:before, .wsmenu:after { content: ""; display: table; } .wsmenu:after { clear: both; } /*------------------------------------------*/ /* Desktop Main Menu CSS --------------------------------------------*/ .wsmenucontainer { background-size: cover; overflow: hidden; background-attachment: fixed; background-position: 50% 0; background-repeat: no-repeat; } .wsmainfull { width: 100%; height: auto; background-color: #fff!important; z-index: 999; -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .wsmainwp { margin: 0 auto; max-width: 1140px; padding: 0 15px; position: relative; } /* Header Logo */ .desktoplogo { padding: 0; margin: 0; float: left; line-height: 70px; } .desktoplogo img { vertical-align: middle; } /* Navigation Menu */ .wsmenu { padding: 0; float: right; display: block; } .wsmenu > .wsmenu-list { text-align: left; margin: 0 auto 0 auto; width: 100%; display: block; padding: 0; } .wsmenu > .wsmenu-list > li { text-align: center; display: block; padding: 0; margin: 0; float: left; } .wsmenu > .wsmenu-list > li > a { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; padding: 10px 32px 10px 18px; line-height: 50px; text-decoration: none; position: relative; } .wsmenu > .wsmenu-list > li > a.last-link { padding: 10px 0px 10px 0; } .wsmenu > .wsmenu-list > li > a.callusbtn { font-size: 15px; } .wsmenu > .wsmenu-list > li > a.callusbtn i { font-size: 13px; margin-top: 1px; margin-right: 1px; } .wsmenu > .wsmenu-list > li a.menuhomeicon { padding-left: 29px; padding-right: 29px; } .wsmenu > .wsmenu-list > li > a i { display: inline-block; font-size: 16px; line-height: inherit; margin-right: 12px; vertical-align: top; } .wsmenu > .wsmenu-list > li > a.menuhomeicon i { margin-right: 0px; font-size: 15px; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 15px; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 33px; width: 0; } /* Desktop Search Bar */ .wsmenu > .wsmenu-list > li.rightmenu { float: right; } .wsmenu > .wsmenu-list > li.rightmenu a { padding: 0px 30px 0px 20px; border-right: none; } .wsmenu > .wsmenu-list > li.rightmenu a i { font-size: 15px; } .wsmenu > .wsmenu-list > li.rightmenu { float: right; } .wsmenu > .wsmenu-list > li.rightmenu:before, .wsmenu-list > li.rightmenu:after { content: ""; display: table; } .wsmenu > .wsmenu-list > li.rightmenu:after { clear: both; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch { float: right; width: 210px; height: 39px; position: relative; margin: 16px 0px 0px 0px; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch .searchicon { -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch input { width: 100%; position: relative; float: right; top: 0; right: 0; bottom: 0; width: 100%; border: 0; padding: 0; margin: 0; text-indent: 15px; height: 39px; z-index: 2; outline: none; color: #333; background-color: #efefef; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; font-size: 12px; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch input::placeholder { color: #a9a9a9; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch input:focus { color: #333; width: 220px; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch input:focus~.btnstyle i { color: #000; opacity: 1; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch input:focus~.searchicon { opacity: 1; z-index: 3; color: #FFFFFF; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch .btnstyle { top: 0px; position: absolute; right: 0; bottom: 0; width: 40px; line-height: 30px; z-index: 1; cursor: pointer; opacity: 0.3; color: #333; z-index: 1000; background-color: transparent; border: solid 0px; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch .btnstyle i { line-height: 37px; margin: 0; padding: 0; text-align: center; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch .btnstyle:hover i { opacity: 1; } .wsmenu > .wsmenu-list > li.rightmenu { zoom: 1; } /*------------------------------------------*/ /* Desktop Drop Down Menu CSS --------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { position: absolute; top: 70px; z-index: 1000; margin: 0px; padding: 12px; min-width: 200px; background-color: #fff; border: solid 1px #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wsmenu > .wsmenu-list > li > ul.sub-menu.last-sub-menu { min-width: 160px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li { position: relative; margin: 0px; padding: 0px; display: block; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-image: none; border-right: 0 none; text-align: left; display: block; padding: 9px; text-transform: none; color: #888; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; border-right: 0px solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu.last-sub-menu > li > a { padding: 11px 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { padding: 9px 9px 9px 10px; } .wsmenu > .wsmenu-list > li > ul.sub-menu.last-sub-menu > li > a:hover { padding: 11px 0 11px 8px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a > i { position: absolute; top: 12px; right: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 200px; position: absolute; left: 100%; top: 0; margin: 0; padding: 0 15px; list-style: none; background-color: #fff; border: solid 1px #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { position: relative; margin: 0px; padding: 0px; display: block; border-bottom: 1px dashed #c0c0c0; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li:last-child { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { position: relative; background-image: none; border-right: 0 none; text-align: left; display: block; padding: 9px; text-transform: none; color: #888; font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; border-right: 0px solid; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { padding: 8px 15px 8px 23px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a > i { position: absolute; top: 12px; right: 12px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu { min-width: 200px; position: absolute; left: 100%; top: 0; margin: 0px; list-style: none; padding: 0px; background-color: #fff; border: solid 1px #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li { position: relative; margin: 0px; padding: 0px; display: block; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { background-image: none; border-right: 0 none; text-align: left; display: block; padding: 9px; text-transform: none; color: #888; font-size: 16px; font-family: 'Roboto', sans-serif; line-height: 22px; font-weight: 400; letter-spacing: normal; border-right: 0px solid; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { padding: 9px 9px 9px 20px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a > i { margin-left: 9px; } /*------------------------------------------*/ /* Desktop Mega Menus CSS --------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { width: 100%; left: 0px; position: absolute; top: 70px; color: #000; z-index: 1000; margin: 0px; text-align: left; padding: 20px 30px; border: solid 1px #eee; background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { padding: 20px 20px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .carousel-control-next { opacity: 0.8; } .wsmenu > .wsmenu-list > li > .wsmegamenu .carousel-control-prev { opacity: 0.8; } .wsmenu > .wsmenu-list > li > .wsmegamenu .carousel-caption { bottom: 0px; background-color: rgba(0, 0, 0, 0.7); font-size: 13px; height: 31px; left: 0; padding: 7px 0; right: 0; width: 100%; } .wsmenu > .wsmenu-list > li > .wsmegamenu .wsmwnutxt { width: 100%; color: #888; font-size: 16px; font-weight: 400; text-align: justify; margin-top: 0; } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { display: block; text-align: center; text-align: left; border-bottom: 1px dashed #c0c0c0; } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li.title, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li:last-child { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a { line-height: 22px; border-right: none; text-align: left; padding: 13px 0px; background: #fff; background-image: none; border-right: 0 none; display: block; background-color: #fff; color: #888; font-size: 16px; font-weight: 400; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu .mrgtop { margin-top: 15px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .show-grid div { padding-bottom: 10px; padding-top: 10px; background-color: #dbdbdb; border: 1px solid #e7e7e7; color: #6a6a6a; margin: 2px 0px; font-size: 13px; } /*= Desktop Half Menu CSS =*/ .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 40%; right: auto; left: auto; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu.ext-halfmenu { width: 50%; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfdiv { width: 35%; right: auto; left: auto; } /*= Desktop HTML Form Menu CSS =*/ .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form { width: 100%; display: block; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form input[type="text"] { width: 100%; border: 1px solid #e2e2e2; color: #000; font-size: 13px; padding: 8px 5px; margin-bottom: 8px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form textarea { width: 100%; border: 1px solid #e2e2e2; color: #000; font-size: 13px; padding: 8px 5px; margin-bottom: 8px; min-height: 122px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form input[type="submit"] { width: 25%; display: block; height: 32px; float: right; border: none; margin-right: 15px; cursor: pointer; background-color: #e1e1e1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form input[type="button"] { width: 25%; display: block; height: 32px; float: right; border: none; cursor: pointer; background-color: #e1e1e1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .carousel-inner .item img { width: 100%; } .wsmenu > .wsmenu-list > li > .wsmegamenu .carousel-caption { bottom: 0px; background-color: rgba(0, 0, 0, 0.7); font-size: 13px; height: 31px; left: 0; padding: 7px 0; right: 0; width: 100%; } .wsmenu > .wsmenu-list > li > .wsmegamenu .typography-text { padding: 0px 0px; font-size: 14px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .typography-text ul { padding: 0px 0px; margin: 0px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .typography-text p { text-align: justify; line-height: 24px; color: #656565; } .wsmenu > .wsmenu-list > li > .wsmegamenu .typography-text ul li { display: block; padding: 2px 0px; line-height: 22px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .typography-text ul li a { color: #656565; } /*------------------------------------------*/ /* Desktop Extra CSS --------------------------------------------*/ .wsmobileheader { display: none; } .overlapblackbg { opacity: 0; visibility: hidden; } .wsmenu .wsmenu-click { display: none; } .wsmenu .wsmenu-click02 { display: none; } .hometext { display: none; } /*============================================================================== Start Mobile CSS ===============================================================================*/ /* ================== Mobile Menu Change Brake Point ================== */ @media only screen and (max-width: 991px) { /* ================== Mobile Base CSS ================== */ html { overflow: hidden; height: 100%; -webkit-overflow-scrolling: touch; } body { height: 100%; overflow-y: auto; overflow-x: hidden; } body.wsactive { overflow: hidden; } /* ================== Mobile Main Menu CSS ================== */ .desktoplogo { display: none; } .wsmainfull { height: 0; } .wsmenu { width: 100%; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; right: 0; overflow-y: hidden; padding: 0; top: 0; visibility: hidden; position: fixed; margin: 0px; } .wsmenu > .wsmenu-list { height: auto; min-height: 100%; width: 350px; background: #fff; padding-bottom: 0; margin-right: -350px; display: block; text-align: center; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .wsmenu > .wsmenu-list > li { width: 100%; display: block; float: none; border-right: none; background-color: transparent; position: relative; white-space: inherit; clear: right; } @supports (-webkit-overflow-scrolling: touch) { .wsmenu > .wsmenu-list > li:last-child { padding-bottom: 110px; } } .wsmenu > .wsmenu-list > li > a { padding: 12px 32px 12px 17px; font-size: 15px; text-align: left; border-right: solid 0px; line-height: 25px; border-bottom: 1px solid; border-bottom-color: rgba(0, 0, 0, 0.13); position: static; } .wsmenu > .wsmenu-list > li a.menuhomeicon { padding-left: 17px; padding-right: 17px; border-top: solid 1px rgba(0, 0, 0, 0.13); } .wsmenu > .wsmenu-list > li > a.menuhomeicon i { margin-right: 2px; font-size: 13px; } .wsmenu > .wsmenu-list > li > a > i { font-size: 14px; color: #bfbfbf; } .wsmenu > .wsmenu-list > li >a .wsarrow:after { display: none; } .wsmenu > .wsmenu-list > li:hover > a { background-color: rgba(0, 0, 0, .03); text-decoration: none; } .wsmenu > .wsmenu-list > li > a > .hometext { display: inline-block; } /* ================== Mobile Slide Down Links CSS ================== */ .wsmenu > .wsmenu-list > li > ul.sub-menu { display: none; position: relative; top: 0px; background-color: #fff; border: none; padding: 0px; opacity: 1; visibility: visible; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: inherit; -moz-transition: inherit; transition: inherit; -webkit-transform-style: flat; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { line-height: 20px; font-size: 13px; padding: 10px 0px 10px 16px; color: #383838; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li span + a { padding-right: 30px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a > i { display: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: #e7e7e7; text-decoration: underline; } .wsmenu > .wsmenu-list > li > ul.sub-menu li:hover > a { background-color: #e7e7e7; color: #666666; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { width: 100%; position: static; left: 100%; top: 0; display: none; margin: 0px; padding: 0px; border: solid 0px; transform: none; opacity: 1; visibility: visible; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: inherit; -moz-transition: inherit; transition: inherit; -webkit-transform-style: flat; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { margin: 0px 0px 0px 0px; padding: 0px; position: relative; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { line-height: 20px; font-size: 13px; padding: 10px 0px 10px 26px; color: #383838; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li span + a { padding-right: 30px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a > i { display: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background-color: #e7e7e7; color: #666666; text-decoration: underline; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a.active { color: #000; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li:hover > a { color: #000; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu { width: 100%; position: static; left: 100%; top: 0; display: none; margin: 0px; padding: 0px; border: solid 0px; transform: none; opacity: 1; visibility: visible; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: inherit; -moz-transition: inherit; transition: inherit; -webkit-transform-style: flat; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li { margin: 0px 0px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li >a { line-height: 20px; font-size: 13px; padding: 10px 0px 10px 34px; color: #383838; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li span+a { padding-right: 30px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a >i { display: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li >a:hover { background-color: #e7e7e7; color: #666666; text-decoration: underline; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li >a.active { color: #000; } /* ================== Mobile Mega Menus CSS ================== */ .wsmenu > .wsmenu-list > li > .wsmegamenu { color: #666666; display: none; position: relative; top: 0px; padding: 10px 0px; border: solid 0px; transform: none; opacity: 1; visibility: visible; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: inherit; -moz-transition: inherit; transition: inherit; border-bottom: 1px solid rgba(0, 0, 0, 0.13); -webkit-transform-style: flat; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 100%; margin: 0px; padding: 5px 0px 10px 0px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .title { color: #666666; font-size: 15px; padding: 10px 8px 10px 0px; } .wsmenu > .wsmenu-list > li > .wsmegamenu> ul { width: 100%; margin: 0px; padding: 0px; font-size: 15px; } .wsmenu > .wsmenu-list > li > .wsmegamenu> ul > li > a { padding: 9px 14px; line-height: normal; font-size: 13px; background-color: #e7e7e7; color: #666666; } .wsmenu > .wsmenu-list > li > .wsmegamenu> ul> li >a:hover { background-color: #000000; } .wsmenu > .wsmenu-list > li > .wsmegamenu ul li.title { line-height: 26px; color: #666666; margin: 0px; font-size: 15px; padding: 7px 0px; background-color: transparent; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfdiv { width: 100%; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form { padding: 5px 0px 62px 0px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .show-grid div { margin: 0px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form input[type="button"] { width: 46%; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form input[type="submit"] { width: 46%; } .wsmenu > .wsmenu-list > li > .wsmegamenu .menu_form textarea { min-height: 100px; } /* ================== Mobile Header CSS ================== */ .wsmobileheader { width: 100%; display: block; position: fixed; top: 0; right: 0; z-index: 10002; height: 54px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; box-shadow: 0 0 1px rgba(0, 0, 0, .3); } .wsactive .wsmobileheader { margin-right: 240px; margin-right: 300px; margin-right: 350px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .wsmobileheader .smllogo { display: inline-block; margin-top: 12px; padding-left: 18px; } /* Mobile Search Bar*/ .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch { width: 86%; margin: 7% 7%; padding: 0px; } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch input { border-radius: 50px } .wsmenu > .wsmenu-list > li.rightmenu > .topmenusearch input:focus { width: 100%; } .callusbtn { color: #a9a9a9; font-size: 18px; position: absolute; right: 5px; top: 0px; transition: all 0.4s ease-in-out 0s; z-index: 102; padding: 12px 14px; } .callusbtn i { vertical-align: top; margin-top: 4px; } .callusbtn:hover i { color: #a9a9a9; } /* Mobile Toggle Menu icon (X ICON) */ .wsanimated-arrow { position: absolute; right: 0; top: 0; z-index: 102; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .wsanimated-arrow { cursor: pointer; padding: 16px 35px 16px 0px; margin: 7px 0 0 15px; } .wsanimated-arrow span, .wsanimated-arrow span:before, .wsanimated-arrow span:after { cursor: pointer; height: 3px; width: 22px; background: #a9a9a9; position: absolute; display: block; content: ''; } .wsanimated-arrow span:before { top: -7px; width: 26px; } .wsanimated-arrow span:after { bottom: -7px; width: 20px; } .wsanimated-arrow span, .wsanimated-arrow span:before, .wsanimated-arrow span:after { transition: all 500ms ease-in-out; } .wsactive .wsanimated-arrow span:after { width: 23px; } .wsactive .wsanimated-arrow span { background-color: transparent; } .wsactive .wsanimated-arrow span:before, .wsactive .wsanimated-arrow.active span:after { top: 7px; } .wsactive .wsanimated-arrow span:before { transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); bottom: 0px; } .wsactive .wsanimated-arrow span:after { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } /* ================== Mobile Overlay/Drawer CSS ================== */ .overlapblackbg { left: 0; width: calc(100% - 350px); height: 100vh; min-height: 100%; position: fixed; top: 0; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.45); cursor: pointer; } .wsactive .wsmenu .overlapblackbg { opacity: 1; visibility: visible; -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; -ms-transition: opacity 1.5s ease-in-out; -o-transition: opacity 1.5s ease-in-out; z-index: 8888!important; } .wsmenucontainer { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .wsactive .wsmenucontainer { margin-right: 300px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .wsactive .wsmenu { overflow-y: scroll; -webkit-overflow-scrolling: touch; visibility: visible; z-index: 1000; top: 0; } .wsactive .wsmenu > .wsmenu-list { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; margin-right: 0; } /* ================== Mobile Sub Menu Expander Arrows ================== */ .wsmenu > .wsmenu-list > li > .wsmenu-click { height: 49px; position: absolute; top: 0; right: 0; display: block; cursor: pointer; width: 100%; } .wsmenu > .wsmenu-list > li .wsmenu-click.ws-activearrow > i { transform: rotate(-45deg); margin-top: 23px; } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { display: block; height: 8px; width: 8px; float: right; transform: rotate(-225deg); margin: 18px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > .wsmenu-click > i:before { content: ""; width: 100%; height: 100%; border-width: 1.5px 1.5px 0 0; border-style: solid; border-color: rgba(0, 0, 0, 0.40); transition: 0.2s ease; display: block; transform-origin: 100% 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02 { height: 41px; position: absolute; top: 0; right: 0; display: block; cursor: pointer; width: 100%; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02>i { display: block; height: 8px; width: 8px; float: right; transform: rotate(-225deg); margin: 14px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02 > i:before { content: ""; width: 100%; height: 100%; border-width: 1.5px 1.5px 0 0; border-style: solid; border-color: rgba(0, 0, 0, 0.40); transition: 0.2s ease; display: block; transform-origin: 100% 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02>i.wsmenu-rotate { transform: rotate(-45deg); margin-top: 19px; } /*End Media Query*/ } /* Extra @Media Query*/ @media only screen and (min-width: 992px) and (max-width:1162px) { .desktoplogo { margin-left: 12px; } .wsmenu > .wsmenu-list > li > a { padding-left: 16px; padding-right: 16px; } .wsmenu > .wsmenu-list > li a.menuhomeicon { padding-left: 22px; padding-right: 22px; } } .wsmenu > .wsmenu-list > li > ul.sub-menu { opacity: 0; visibility: hidden; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.3s, opacity 0.3s; -ms-transition: -ms-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); } .wsmenu > .wsmenu-list > li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { opacity: 0; visibility: hidden; transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li:hover > ul.sub-menu { opacity: 1; visibility: visible; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.4s, opacity 0.4s; -ms-transition: -ms-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu { opacity: 0; visibility: hidden; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.4s, opacity 0.4s; -ms-transition: -ms-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); } .wsmenu > .wsmenu-list > li > .wsmegamenu { opacity: 0; visibility: hidden; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.3s, opacity 0.3s; -ms-transition: -ms-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); } .wsmenu > .wsmenu-list > li:hover > .wsmegamenu { opacity: 1; visibility: visible; transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); } /** * Lunar version 1.0 The MIT License (MIT) Copyright (c) 2011-2019 vivekvasani955@gmail.com Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .modal .modal-dialog.modal-full-width { width: 100% !important; max-width: 100% !important; margin: 0 !important; left: 0 !important; right: 0 !important; } .modal .modal-content { border: 0; border-radius: 3px; } .modal.fade.modal-top-left .modal-dialog { width: 100%; position: absolute; top: 0; } @media (min-width: 576px) { .modal.fade.modal-top-left .modal-dialog { left: 1.75rem; margin: 1.75rem auto; } } @media (max-width: 767.98px) { .modal.fade.modal-top-left .modal-dialog { width: calc(100% - (0.5rem*2)); } } .modal.fade.modal-top-right .modal-dialog { width: 100%; position: absolute; top: 0; } @media (min-width: 576px) { .modal.fade.modal-top-right .modal-dialog { right: 1.75rem; margin: 1.75rem auto; } } @media (max-width: 767.98px) { .modal.fade.modal-top-right .modal-dialog { width: calc(100% - (0.5rem*2)); } } .modal.fade.modal-bottom-right .modal-dialog { width: 100%; position: absolute; bottom: 0; } @media (min-width: 576px) { .modal.fade.modal-bottom-right .modal-dialog { right: 1.75rem; margin: 1.75rem auto; } } @media (max-width: 767.98px) { .modal.fade.modal-bottom-right .modal-dialog { width: calc(100% - (0.5rem*2)); } } .modal.fade.modal-bottom-left .modal-dialog { width: 100%; position: absolute; bottom: 0; } @media (min-width: 576px) { .modal.fade.modal-bottom-left .modal-dialog { left: 1.75rem; margin: 1.75rem auto; } } @media (max-width: 767.98px) { .modal.fade.modal-bottom-left .modal-dialog { width: calc(100% - (0.5rem*2)); } } .modal.fade.modal-bottom-center .modal-dialog { position: absolute; bottom: 0; right: 0; left: 0; } @media (min-width: 576px) { .modal.fade.modal-bottom-center .modal-dialog { margin: 1.75rem auto; } } @media (max-width: 767.98px) { .modal.fade.modal-bottom-center .modal-dialog { width: calc(100% - (0.5rem*2)); } } .modal .close { position: absolute; z-index: 1; right: 10px !important; top: 10px !important; height: 2.5rem; width: 2.5rem; background: rgba(193, 193, 193, 0.3) !important; border-radius: 50%; font-size: 1.8rem; padding: 0; } .modal .close:focus { outline: 0; } .modal .close span { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,1.3c-0.4-0.4-1-0.4-1.4,0L8,6.6L2.7,1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.6,8l-5.3,5.3 c-0.4,0.4-0.4,1,0,1.4C1.5,14.9,1.7,15,2,15s0.5-0.1,0.7-0.3L8,9.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L9.4,8l5.3-5.3C15.1,2.3,15.1,1.7,14.7,1.3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; color: transparent; text-shadow: none; background-position: center; } .modal .close.light span { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,1.3c-0.4-0.4-1-0.4-1.4,0L8,6.6L2.7,1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.6,8l-5.3,5.3 c-0.4,0.4-0.4,1,0,1.4C1.5,14.9,1.7,15,2,15s0.5-0.1,0.7-0.3L8,9.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L9.4,8l5.3-5.3C15.1,2.3,15.1,1.7,14.7,1.3z'/%3E%3C/svg%3E"); } .modal .close.size-sm { transform: scale(0.5); right: 0.5rem; top: 0.5rem; } .modal .close.close-pinned { top: -19px; right: -19px; } .modal[data-popup=true] { position: relative; top: unset; left: unset; right: unset; bottom: unset; width: unset; height: unset; } .modal[data-popup=true].fade.modal-top-left .modal-dialog, .modal[data-popup=true].fade.modal-top-right .modal-dialog, .modal[data-popup=true].fade.modal-bottom-right .modal-dialog, .modal[data-popup=true].fade.modal-bottom-left .modal-dialog, .modal[data-popup=true].fade.modal-bottom-center .modal-dialog { position: fixed; } .modal[data-popup=true].fade .modal-content { box-shadow: 0 20px 60px -2px rgba(18, 21, 35, 0.19); } .body-scrollable { overflow: unset; padding-right: unset !important; } .body-scrollable .modal-backdrop { display: none; } .modal-backdrop { background: #2d343a; } /*Bigger CTA Style Button*/ .btn-cta { text-transform: uppercase; letter-spacing: 1px; padding: 15px 20px; font-size: 0.8rem; font-weight: 600; } /*Alert styles*/ .event-type { border: 3px solid #e0e6ed; height: 80px; width: 80px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; transition: all ease 0.2s; transition-delay: 0.3s; } .event-type .event-indicator { transition: all cubic-bezier(0, 0.89, 0.44, 1) 0.2s; transform: scale(0); opacity: 0; transition-delay: 0.5s; } .show .event-type .event-indicator { transform: scale(1); opacity: 1; } .show .event-type { border-color: #e0e6ed; background-color: #e0e6ed; } .show .event-type.success { border-color: #00CC99; background-color: #00CC99; } .show .event-type.error { border-color: #f2545b; background-color: #f2545b; } .show .event-type.warning { border-color: #f7bc06; background-color: #f7bc06; } .show .event-type.info { border-color: #19b5fe; background-color: #19b5fe; } /*==================================*/ /* Additional Utilities */ /*==================================*/ /*Bigger CTA Style Button*/ .btn-cta { text-transform: uppercase; letter-spacing: 1px; padding: 15px 20px; font-size: 0.8rem; font-weight: 600; } /*Overlay for images*/ .modal .overlay { background-color: rgba(0, 0, 0, 0.35); } .modal .overlay-light { background-color: rgba(0, 0, 0, 0.15); } /*Negative margins for creating pull effect */ .modal .pull-up-lg { margin-top: -70px; } .modal .pull-up-sm { /*margin-top: -35px;*/ } .modal .border-thick { border-width: 0.3rem !important; } .bg-img { background-size: cover; background-position: center; background-repeat: no-repeat; } .pointer-events-none { pointer-events: none; } /*Height utilities*/ .m-h-10 { min-height: 10vh; } .m-h-20 { min-height: 20vh; } .m-h-30 { min-height: 30vh; } .m-h-40 { min-height: 40vh; } .m-h-50 { min-height: 50vh; } .m-h-60 { min-height: 60vh; } .m-h-70 { min-height: 70vh; } .m-h-80 { min-height: 80vh; } .m-h-90 { min-height: 90vh; } .m-h-100 { min-height: 100vh; } .bg-rhino { background-color: #28304e !important; } .btn-cstm-light { color: #212841; background-color: #fff; border-color: #fff; } .btn-cstm-light:hover { color: #212841; background-color: #ececec; border-color: #e6e6e6; } .btn-cstm-light:focus, .btn-cstm-light.focus { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); } .btn-cstm-light.disabled, .btn-cstm-light:disabled { color: #212841; background-color: #fff; border-color: #fff; } .btn-cstm-light:not(:disabled):not(.disabled):active, .btn-cstm-light:not(:disabled):not(.disabled).active, .show > .btn-cstm-light.dropdown-toggle { color: #212841; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-cstm-light:not(:disabled):not(.disabled):active:focus, .btn-cstm-light:not(:disabled):not(.disabled).active:focus, .show > .btn-cstm-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); } .btn-cstm-dark { color: #FFFFFF; background-color: #28304e; border-color: #28304e; } .btn-cstm-dark:hover { color: #FFFFFF; background-color: #1b2035; border-color: #171b2c; } .btn-cstm-dark:focus, .btn-cstm-dark.focus { box-shadow: 0 0 0 0.2rem rgba(40, 48, 78, 0.5); } .btn-cstm-dark.disabled, .btn-cstm-dark:disabled { color: #FFFFFF; background-color: #28304e; border-color: #28304e; } .btn-cstm-dark:not(:disabled):not(.disabled):active, .btn-cstm-dark:not(:disabled):not(.disabled).active, .show > .btn-cstm-dark.dropdown-toggle { color: #FFFFFF; background-color: #171b2c; border-color: #121624; } .btn-cstm-danger { color: #FFFFFF; background-color: #f2545b; border-color: #f2545b; } .btn-cstm-danger:hover { color: #FFFFFF; background-color: #ef3039; border-color: #ee252e; } .btn-cstm-danger:focus, .btn-cstm-danger.focus { box-shadow: 0 0 0 0.2rem rgba(242, 84, 91, 0.5); } .btn-cstm-danger.disabled, .btn-cstm-danger:disabled { color: #FFFFFF; background-color: #f2545b; border-color: #f2545b; } .btn-cstm-danger:not(:disabled):not(.disabled):active, .btn-cstm-danger:not(:disabled):not(.disabled).active, .show > .btn-cstm-danger.dropdown-toggle { color: #FFFFFF; background-color: #ee252e; border-color: #ed1922; } .btn-cstm-danger:not(:disabled):not(.disabled):active:focus, .btn-cstm-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-cstm-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(242, 84, 91, 0.5); } .btn-cstm-success { color: #FFFFFF; background-color: #00CC99; border-color: #00CC99; } .btn-cstm-success:hover { color: #FFFFFF; background-color: #00a67c; border-color: #009973; } .btn-cstm-success:focus, .btn-cstm-success.focus { box-shadow: 0 0 0 0.2rem rgba(0, 204, 153, 0.5); } .btn-cstm-success.disabled, .btn-cstm-success:disabled { color: #FFFFFF; background-color: #00CC99; border-color: #00CC99; } .btn-cstm-success:not(:disabled):not(.disabled):active, .btn-cstm-success:not(:disabled):not(.disabled).active, .show > .btn-cstm-success.dropdown-toggle { color: #FFFFFF; background-color: #009973; border-color: #008c69; } .btn-cstm-success:not(:disabled):not(.disabled):active:focus, .btn-cstm-success:not(:disabled):not(.disabled).active:focus, .show > .btn-cstm-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 204, 153, 0.5); } .btn-cstm-secondary { color: #FFFFFF; background-color: #95AAC9; border-color: #95AAC9; } .btn-cstm-secondary:hover { color: #FFFFFF; background-color: #7c96bc; border-color: #738fb8; } .btn-cstm-secondary:focus, .btn-cstm-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(149, 170, 201, 0.5); } .btn-cstm-secondary.disabled, .btn-cstm-secondary:disabled { color: #FFFFFF; background-color: #95AAC9; border-color: #95AAC9; } .btn-cstm-secondary:not(:disabled):not(.disabled):active, .btn-cstm-secondary:not(:disabled):not(.disabled).active, .show > .btn-cstm-secondary.dropdown-toggle { color: #FFFFFF; background-color: #738fb8; border-color: #6b88b3; } .btn-cstm-secondary:not(:disabled):not(.disabled):active:focus, .btn-cstm-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-cstm-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(149, 170, 201, 0.5); } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; /*cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out;*/ } .mfp-zoom { cursor: pointer; /* cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; */ } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} /* Template Name: Pintex - Mobile App & Software Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Pintex - Mobile App Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: https://www.jthemes.com/ Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App */ /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ :root { --alice-blue: #f1f3ff; --black: #353f4f; --blue: #0083ff; --coal: #111b21; --disable: #b5b5b5; --form-control: #fafafd; --gray: #545465; --green: #0fbc49; --header-color: #120036; --indigo: #7b5dd6; --ink: #1d222f; --lavender: #f8f5fd; --light-blue: #edf8fd; --light-gray: #90a0b2; --lilac: #beaedb; --magnolia: #f9f7fd; --metal: #2c3840; --noice: #f8f9fa; --orchid: #ce67c9; --pink: #fc5a8d; --purple: #9370db; --silver: #ccc; --sky-blue: #04aaff; --smoke: #e7e7e7; --snow: #f5f6f6; --violet-red: #c73e9b; --white: #fff; --white-smoke: #f4f4f9; --yellow: #ffbf15; --tra-black: rgba(5, 5, 5, .05); --tra-gray: rgba(96, 96, 96, .13); --tra-indigo: rgba(128, 96, 225, .13); --tra-ink: rgba(1, 1, 1, .1); --tra-purple: rgba(102, 51, 255, .13); --tra-white: rgba(255, 255, 255, .2); --tra-violet-red: rgba(237, 230, 244, .84); --tra-white-smoke: rgba(244, 244, 249, .13); } html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--gray); line-height: 1.6666; font-weight: 400; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block--shadow { -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } .img-block .block--shadow { -webkit-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); -moz-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); } /*------------------------------------------*/ /* BORDER SETTINGS /*------------------------------------------*/ .block--border { border: 1px solid var(--silver); } .block--border.border--light, .block--border.block--shadow { border: 1px solid var(--smoke); } .x-border { border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); } .x-border.border--light { border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); } .t-border { border-top: 1px solid var(--silver); } .t-border.border--light { border-top: 1px solid var(--smoke); } .b-border { border-bottom: 1px solid var(--silver); } .b-border.border--light { border-bottom: 1px solid var(--smoke); } /*------------------------------------------*/ /* BORDER RADIUS SETTING /*------------------------------------------*/ .r-0 { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .r-02 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .r-04 { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .r-06 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .r-08 { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .r-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .r-12 { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } .r-14 { -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; } .r-16 { -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .r-18 { -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; } .r-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .r-22 { -webkit-border-radius: 22px; -moz-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; } .r-24 { -webkit-border-radius: 24px; -moz-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; } .r-26 { -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; border-radius: 26px; } .r-28 { -webkit-border-radius: 28px; -moz-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; } .r-30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } .r-32 { -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; border-radius: 32px; } .r-34 { -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; } .r-36 { -webkit-border-radius: 36px; -moz-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; } .r-100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .py-90 { padding-top: 90px; padding-bottom: 90px; } .py-100 { padding-top: 100px; padding-bottom: 100px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .px-15 { padding-left: 15x; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-20 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .mt-0 { margin-top: 0!important; } .mt-15 { margin-top: 15x; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-0 { margin-bottom: 0!important; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--aliceblue { background-color: var(--alice-blue); } .bg--black { background-color: var(--black); } .bg--blue { background-color: var(--blue); } .bg--coal { background-color: var(--coal); } .bg--indigo { background-color: var(--indigo); } .bg--lavender { background-color: var(--lavender); } .bg--lightblue { background-color: var(--light-blue); } .bg--lilac { background-color: var(--lilac); } .bg--magnolia { background-color: var(--magnolia); } .bg--noice { background-color: var(--noice); } .bg--orchid { background-color: var(--orchid); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--red { background-color: var(--red); } .bg--skyblue { background-color: var(--sky-blue); } .bg--snow { background-color: var(--snow); } .bg--violet-red { background-color: var(--violet-red); } .bg--white { background-color: var(--white); } .bg--whitesmoke { background-color: var(--white-smoke); } .bg--yellow { background-color: var(--yellow); } /*------------------------------------------*/ /* TRANSPARENT BACKGROUND COLORS /*------------------------------------------*/ .bg--tra-indigo { background-color: var(--tra-indigo); } .bg--tra-purple { background-color: var(--tra-purple); } .bg--tra-violet-red { background-color: var(--tra-violet-red); } /*------------------------------------------*/ /* GRADIENT COLOR BACKGROUND /*------------------------------------------*/ .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%); } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .shape--01:after, .shape--02:after { position: absolute; content: ''; width: 100%; height: 55%; left: 0; z-index: -1; } .shape--01:after { top: 0; } .shape--02:after { top: 45%; } .shape--whitesmoke:after { background-color: var(--white-smoke); } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06, .bg--07 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../images/bg-01.jpg); } .bg--02 { background-image: url(../images/bg-02.jpg); } .bg--03 { background-image: url(../images/bg-03.jpg); } .bg--04 { background-image: url(../images/bg-04.jpg); } .bg--05 { background-image: url(../images/bg-05.jpg); } .bg--06 { background-image: url(../images/bg-06.jpg); } .bg--07 { background-image: url(../images/bg-07.jpg); } /*------------------------------------------*/ /* BACKGROUND PATTERN /*------------------------------------------*/ .pattern--01, .pattern--02, .pattern--03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .pattern--01 { background-image: url(../images/pattern-01.png); } .pattern--02 { background-image: url(../images/pattern-02.png); } .pattern--03 { background-image: url(../images/pattern-03.png); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ hr.divider { width: 100%; height: 1px; background-color: transparent; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%); opacity: .4; border: none; margin: 0; } /*------------------------------------------*/ /* WAVE SHAPE BOTTOM /*------------------------------------------*/ .wave-shape-bottom { position: absolute; bottom: 0; left: 0; width: 100%; } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h6, h5, h4, h3, h2, h1 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-weight: 700; letter-spacing: 0; margin-bottom: 0; } /*------------------------------------------*/ /* HEADER SIZE /*------------------------------------------*/ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.25rem; } /* 20px */ h6.h6-xl { font-size: 1.3125rem; } /* 21px */ h5 { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h5.h5-xl { font-size: 1.75rem; } /* 28px */ h4 { font-size: 1.875rem; } /* 30px */ h4.h4-md { font-size: 2rem; } /* 32px */ h4.h4-lg { font-size: 2.125rem; } /* 34px */ h4.h4-xl { font-size: 2.25rem; } /* 36px */ h3 { font-size: 2.375rem; } /* 38px */ h3.h3-md { font-size: 2.5rem; } /* 40px */ h3.h3-lg { font-size: 2.6255rem; } /* 42px */ h3.h3-xl { font-size: 2.75rem; } /* 44px */ h2 { font-size: 2.875rem; } /* 46px */ h2.h2-md { font-size: 3rem; } /* 48px */ h2.h2-lg { font-size: 3.125rem; } /* 50px */ h2.h2-xl { font-size: 3.25rem; } /* 52px */ h2.h2-title { font-size: 3.375rem; } /* 54px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 0.9375rem; } /* 15px */ p { font-size: 1rem; } /* 16px */ p.p-md { font-size: 1.0625rem; } /* 17px */ p.p-lg { font-size: 1.125rem; } /* 18px */ p.p-xl { font-size: 1.1875rem; } /* 19px */ /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: var(--header-color); text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: var(--header-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a.tra-link { font-size: 1rem; line-height: 1; font-weight: 600; } a.tra-link span { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.75rem; line-height: 0.7rem!important; top: 1.5px; left: 1px; } a.tra-link:hover span { color: var(--black)!important; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ol.digit-list p, ul.simple-list.long-list p { margin-bottom: 8px; } .content-section ul.simple-list.long-list p { margin-bottom: 5px; } /*------------------------------------------*/ /* DIGIT LIST /*------------------------------------------*/ ol.digit-list { padding: 0; margin-left: 15px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { font-size: 1rem; line-height: 1; font-weight: 600; background-color: transparent; padding: 0.9rem 1.8rem; border: 2px solid transparent; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .btn.btn-sm { font-size: 0.975rem; padding: 0.7rem 1.5rem; } .btn.btn-md { font-size: 1rem; padding: 0.9425rem 1.75rem; } .btn.btn-lg { font-size: 1.05rem; padding: 1.1rem 1.8rem; } .btn.ico-20.ico-left, .btn.ico-20.ico-right { padding: 0.9rem 1.55rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.1rem; letter-spacing: -0.35px; padding: 0.9rem 1.35rem; } .btn.ico-30.ico-left, .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Buttons Group /*------------------------------------------*/ .text-center .btns-group { display: inline-block; } .btns-group .btn:first-child { margin-right: 15px; } .btns-group .btn.ico-30.ico-left { padding: 0.37rem 0.5rem; } .btns-group .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Button Icon /*------------------------------------------*/ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1rem; line-height: 0.7rem!important; top: 4px; } .btn.ico-25 [class*="flaticon-"]:before, .btn.ico-25 [class*="flaticon-"]:after { position: relative; font-size: 1.275rem; line-height: 1rem!important; top: 1px; } .btn.ico-25.ios-btn [class*="flaticon-"]:before, .btn.ico-25.ios-btn [class*="flaticon-"]:after { top: 0; } .ico-25-txt { position: relative; top: -3px; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { position: relative; top: 0; right: 4px; } .btn.ico-30.ico-right span { position: relative; top: 0; left: 4px; } .btn.ico-30.ico-left span.ico-30-txt, .btn.ico-30.ico-right span.ico-30-txt { position: relative; top: -10px; right: 0; } .btn.ico-30.ico-right span.ico-30-txt { left: 0; } /*------------------------------------------*/ /* Button Text /*------------------------------------------*/ p.btn-txt { margin: 15px 0 0 0; } p.btn-txt span { font-weight: 700; } .btn-rating p.btn-txt { margin: 0; } .star-rating small, .star-rating span.rating-txt { font-size: 0.9375rem; } p.btns-group-txt { margin: 14px 0 0 0; } .btn-rating { margin-top: 10px; } .text-center p.btns-group-txt { margin-top: 20px; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding-left: 5px; } .text-center p.btn-txt.ico-15, .text-center p.btns-group-txt.ico-15 { padding-left: 0; } p.btn-txt span, p.btns-group-txt span { position: relative; top: 0.5px; right: 2px; } p.btns-group-txt span.txt-data { display: block; top: 0; right: 0; } p.btns-group-txt span.txt-data a { margin-left: 4px; text-decoration: underline; } p.btns-group-txt span.txt-data a:hover { text-decoration: none; } .hero-section .color--white p.btns-group-txt span.txt-data a:hover { color: var(--white)!important; } .btn-txt.ico-15 [class*="flaticon-"]:before, .btn-txt.ico-15 [class*="flaticon-"]:after, .btns-group-txt.ico-15 [class*="flaticon-"]:before, .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .star-rating.ico-10 [class*="flaticon-"]:before, .star-rating.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; top: 1px; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; } .p-sm.btn-txt.ico-20 [class*="flaticon-"]:before, .p-sm.btn-txt.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.875rem; top: 1px; } .os-version-ext { margin-top: 16px; } .os-version-ext .star-rating small { font-size: 0.9rem; margin-left: 6px; } span.os-version { display: block; font-size: 0.9rem; line-height: 1; margin-top: 5px; } /*------------------------------------------*/ /* TRANPARENT BUTTON /*------------------------------------------*/ .btn--transparent { color: var(--black)!important; background-color: transparent!important; border-color: transparent!important; } .btn--transparent.color--white { color: var(--white)!important; } .btn--transparent:hover { background-color: transparent!important; border-color: transparent!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover, .color--white .hover--white:hover { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .white-scroll .scroll .hover--tra-white:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } .white-scroll .scroll .hover--white:hover { color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover, .white-scroll .scroll .hover--black:hover { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .btn--tra-black, .hover--tra-black:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* TRA GRAY BUTTON /*------------------------------------------*/ .btn--tra-gray, .hover--tra-gray:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* BLUE BUTTON /*------------------------------------------*/ .btn--blue, .hover--blue:hover, .color--white .hover--blue:hover, .white-scroll .scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /*------------------------------------------*/ /* GREEN BUTTON /*------------------------------------------*/ .btn--green, .hover--green:hover, .color--white .hover--green:hover, .white-scroll .scroll .hover--green:hover { color: var(--white)!important;border-color: var(--green)!important; background-color: var(--green)!important; } .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /*------------------------------------------*/ /* INDIGO BUTTON /*------------------------------------------*/ .btn--indigo, .hover--indigo:hover, .color--white .hover--indigo:hover, .white-scroll .scroll .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .btn--tra-indigo, .hover--tra-indigo:hover, .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /*------------------------------------------*/ /* ORCHID BUTTON /*------------------------------------------*/ .btn--orchid, .hover--orchid:hover, .color--white .hover--orchid:hover, .white-scroll .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .btn--tra-orchid, .hover--tra-orchid:hover, .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /*------------------------------------------*/ /* PINK BUTTON /*------------------------------------------*/ .btn--pink, .hover--pink:hover, .color--white .hover--pink:hover, .white-scroll .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /*------------------------------------------*/ /* PURPLE BUTTON /*------------------------------------------*/ .btn--purple, .hover--purple:hover, .color--white .hover--purple:hover, .white-scroll .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /*------------------------------------------*/ /* RED BUTTON /*------------------------------------------*/ .btn--red, .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover { color: var(--white)!important;border-color: var(--red)!important; background-color: var(--red)!important; } .btn--tra-red, .hover--tra-red:hover, .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /*------------------------------------------*/ /* SKY BLUE BUTTON /*------------------------------------------*/ .btn--skyblue, .hover--skyblue:hover, .color--white .hover--skyblue:hover, .white-scroll .scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /*------------------------------------------*/ /* VIOLET RED BUTTON /*------------------------------------------*/ .btn--violet-red, .hover--violet-red:hover, .color--white .hover--violet-red:hover, .white-scroll .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .btn--tra-violet-red, .hover--tra-violet-red:hover, .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /*------------------------------------------*/ /* YELLOW BUTTON /*------------------------------------------*/ .btn--yellow, .hover--yellow:hover, .color--white .hover--yellow:hover, .white-scroll .scroll .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: var(--white); -webkit-box-shadow: none; box-shadow: none; } .btn--transparent:focus { background-color: transparent; border-color: transparent; } .btn--tra-black:focus, .btn--transparent:focus, .btn.btn--tra-gray:focus { color: var(--black); -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BADGE ICONS /*------------------------------------------*/ .stores-badge { display: inline-block; } .store { display: inline-block; text-align: center; margin-right: 12px; } .store:last-child { margin-right: 0; } .store img { width: auto; max-width: inherit; } .badge-img-xs .store img { max-height: 2.5rem; } .badge-img-sm .store img { max-height: 2.625rem; } .badge-img-md .store img { max-height: 2.875rem; } .badge-img-lg .store img { max-height: 3rem; } .badge-img-xl .store img { max-height: 3.25rem; } /*------------------------------------------*/ /* WATCH VIDEO LINK /*------------------------------------------*/ .watch-video { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; margin-top: 25px; } .btns-group .watch-video { display: inline-block; margin-top: 0!important; top: 22px; } /*------------------------------------------*/ /* Link Icon /*------------------------------------------*/ .watch-video-link { position: relative; text-align: center; float: left; width: 2.85rem; height: 2.85rem; color: var(--white); border: none; margin-right: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .watch-video-link:before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; bottom: -3px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .watch-video-link:hover:before { opacity: .75; left: -8px; right: -8px; top: -8px; bottom: -8px; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { font-size: 2rem; line-height: 2.85rem!important; margin-left: 5px; } /*------------------------------------------*/ /* Link Text /*------------------------------------------*/ .watch-video-txt { overflow: hidden; flex: 1; max-width: 100%; text-align: left!important; } p.video-txt-lg { font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 5px; } p.video-txt-sm { font-size: 0.925rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: var(--white); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn-xl { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .video-btn-lg { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-sm { width: 4.375rem; height: 4.375rem; margin-top: -2.1875rem; margin-left: -2.1875rem; } .video-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-sm [class^="flaticon-"]:after { font-size: 3.5rem; line-height: 4.375rem!important; margin-left: 5px; } .video-btn:hover .video-block-wrapper { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-lg:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } .video-btn.video-btn-md:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .video-btn.video-btn-sm:hover:before { opacity: .75; left: -0.75rem; right: -0.75rem; top: -0.75rem; bottom: -0.75rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } /* 12px */ .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } /* 15px */ .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } /* 20px */ .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } /* 25px */ .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } /* 30px */ .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } /* 35px */ .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } /* 40px */ .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } /* 45px */ .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } /* 50px */ .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } /* 55px */ .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } /* 60px */ .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } /* 65px */ .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } /* 70px */ .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } /* 75px */ .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } /* 80px */ .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } /* 85px */ .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } /* 90px */ .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } /* 95px */ .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } /* 100px */ .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } /* 105px */ .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } /* 110px */ .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } /* 115px */ .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } /* 120px */ .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /* 125px */ /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-55 .shape-ico svg { width: 125px; height: 125px; top: -42px; left: calc(50% - 66px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -48px; left: calc(50% - 75px); } .shape-ico.color--blue path { fill: #f4f9fc; } .shape-ico.color--indigo path { fill: #f6f4fd; } .shape-ico.color--orchid path { fill: rgba(218, 112, 214, .1); } .shape-ico.color--pink path { fill: rgba(252, 234, 239, .7); } .shape-ico.color--purple path { fill: #f6f4fd; } .shape-ico.color--skyblue path { fill: rgba(4, 170, 255, .09); } .shape-ico.color--violet-red path { fill: rgba(199, 62, 155, .08); } /*------------------------------------------*/ /* PNG ICONS SETTINGS /*------------------------------------------*/ .img-20 img { width: 20px; height: 20px; } .img-25 img { width: 25px; height: 25px; } .img-30 img { width: 30px; height: 30px; } .img-35 img { width: 35px; height: 35px; } .img-40 img { width: 40px; height: 40px; } .img-45 img { width: 45px; height: 45px; } .img-50 img { width: 50px; height: 50px; } .img-55 img { width: 55px; height: 55px; } .img-60 img { width: 60px; height: 60px; } .img-65 img { width: 65px; height: 65px; } .img-70 img { width: 70px; height: 70px; } .img-75 img { width: 75px; height: 75px; } .img-80 img { width: 80px; height: 80px; } .img-85 img { width: 85px; height: 85px; } .img-90 img { width: 90px; height: 90px; } .img-95 img { width: 95px; height: 95px; } .img-100 img { width: 100px; height: 100px; } .img-105 img { width: 105px; height: 105px; } .img-110 img { width: 110px; height: 110px; } .img-115 img { width: 115px; height: 115px; } .img-120 img { width: 120px; height: 120px; } .img-125 img { width: 125px; height: 125px; } .img-130 img { width: 130px; height: 130px; } .img-135 img { width: 135px; height: 135px; } .img-140 img { width: 140px; height: 140px; } .img-145 img { width: 145px; height: 145px; } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .5); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* SECTION ID /*------------------------------------------*/ .section-id { display: block; font-size: 0.85rem; line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 32px; } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title p { margin-top: 22px; margin-bottom: 0; } .section-title .btns-group { margin-top: 35px; } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages, .text-center .advantages { margin-top: 15px; } .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; } .advantages-links-divider { position: relative; top: 1px; transform: rotate(-90deg); } .advantages li p { display: inline-block; float: left; margin-bottom: 0; } .advantages.ico-15 li p span { position: relative; top: 2px; right: -1px; } .advantages.ico-15 [class*="flaticon-"]:before, .advantages.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .advantages li p a { font-weight: 400; text-decoration: underline; } .advantages li p a:hover { text-decoration: underline; } .white--color .advantages li p a:hover { color: var(--white); } /*------------------------------------------*/ /* COMPATABILITY /*------------------------------------------*/ .compatibility { display: inline-block; padding: 3px 20px; margin-top: 15px; margin-bottom: 0; } .compatibility span { position: relative; top: -1.5px; right: 2px; } .compatibility.ico-10 [class*="flaticon-"]:before, .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; } /*------------------------------------------*/ /* TOOLS LIST / PAYMENT METHODS /*------------------------------------------*/ .tools-list, .payment-methods { margin-top: 25px; } .tools-list p, .payment-methods p { font-weight: 400; margin-bottom: 12px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-right: 6px; } /*------------------------------------------*/ /* Payment Icons /*------------------------------------------*/ .payment-icons li { display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; padding-right: 5px; } .payment-icons li:last-child { padding-right: 0; } .payment-icons img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: var(--gray); border-left: 3px solid var(--green); font-style: italic; padding-left: 20px; margin-bottom: 16px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* Quote Author /*------------------------------------------*/ .quote-author { position: relative; display: inline-block; padding: 0 0 0 15px; text-align: left; top: 16px; } .quote-author h6 { margin-bottom: 1px; } .quote-author span { font-size: 0.95rem; } /*------------------------------------------*/ /* USER AVATARS /*------------------------------------------*/ .txt-block .users { margin-top: 22px; } .users img { width: auto; max-width: inherit; max-height: 50px; } .users p { font-size: 0.935rem; position: relative; top: 13px; left: 10px; display: inline-block; line-height: 1.4; margin-bottom: 0; } .users p span { display: block; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--white, .color--white a, .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white); } .color--black, .color--black a, .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); } .color--header, .color--header a, .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); } .color--gray, .color--gray a, .color--gray :is(h1, h2, h3, h4, h5, h6) { color: var(--gray); } .color--lightgray, .color--lightgray a, .color--lightgray :is(h1, h2, h3, h4, h5, h6) { color: var(--light-gray); } .color--blue, .color--blue a, .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); } .color--green, .color--green a, .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); } .color--indigo, .color--indigo a, .color--indigo :is(h1, h2, h3, h4, h5, h6) { color: var(--indigo); } .color--lilac, .color--lilac a, .color--lilac :is(h1, h2, h3, h4, h5, h6) { color: var(--lilac); } .color--orchid, .color--orchid a, .color--orchid :is(h1, h2, h3, h4, h5, h6) { color: var(--orchid); } .color--pink, .color--pink a, .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); } .color--purple, .color--purple a, .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); } .color--red, .color--red a, .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); } .color--skyblue, .color--skyblue a, .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); } .color--violet-red, .color--violet-red a, .color--violet-red :is(h1, h2, h3, h4, h5, h6) { color: var(--violet-red); } .color--yellow, .color--yellow a, .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-upcase { text-transform: uppercase } .w-200 { font-weight: 200; } .w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .w-800 { font-weight: 800; } .w-900 { font-weight: 900; } /*------------------------------------------*/ /* TEXT HIGHLIGHT /*------------------------------------------*/ .highlight { background: linear-gradient(to right, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1875)); } /* ========================================================================== 03. PRELOADER SPINNER ========================================================================== */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: #f5f5f5; } #loader { display: block; position: relative; top: 50%; transform: translateY(-50%); } .cssload-spinner { position: absolute; width: 68px; height: 68px; left: 50%; margin-left: -34px; margin-top: -34px; } .cssload-spinner:after, .cssload-spinner:before { position: absolute; content: ""; border: 4px solid var(--blue); width: 64px; height: 64px; } .theme--blue .cssload-spinner:after, .theme--blue .cssload-spinner:before { border-color: var(--blue); } .theme--green .cssload-spinner:after, .theme--green .cssload-spinner:before { border-color: var(--geen); } .theme--indigo .cssload-spinner:after, .theme--indigo .cssload-spinner:before { border-color: var(--indigo); } .theme--orchid .cssload-spinner:after, .theme--orchid .cssload-spinner:before { border-color: var(--orchid); } .theme--pink .cssload-spinner:after, .theme--pink .cssload-spinner:before { border-color: var(--pink); } .theme--purple .cssload-spinner:after, .theme--purple .cssload-spinner:before { border-color: var(--purple); } .theme--red .cssload-spinner:after, .theme--red .cssload-spinner:before { border-color: var(--purple); } .theme--skyblue .cssload-spinner:after, .theme--skyblue .cssload-spinner:before { border-color: var(--sky-blue); } .theme--violet-red .cssload-spinner:after, .theme--violet-red .cssload-spinner:before { border-color: var(--violet-red); } .cssload-spinner:after { animation: cssload-spinner1 2.5s linear infinite; -o-animation: cssload-spinner1 2.5s linear infinite; -ms-animation: cssload-spinner1 2.5s linear infinite; -webkit-animation: cssload-spinner1 2.5s linear infinite; -moz-animation: cssload-spinner1 2.5s linear infinite; } .cssload-spinner:before { width: 88px; height: 88px; margin-left: -13.5px; margin-top: -13.5px; animation: cssload-spinner2 2.5s linear infinite; -o-animation: cssload-spinner2 2.5s linear infinite; -ms-animation: cssload-spinner2 2.5s linear infinite; -webkit-animation: cssload-spinner2 2.5s linear infinite; -moz-animation: cssload-spinner2 2.5s linear infinite; } @keyframes cssload-spinner1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes cssload-spinner1 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-spinner1 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-spinner1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-spinner1 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes cssload-spinner2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-o-keyframes cssload-spinner2 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } } @-ms-keyframes cssload-spinner2 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); } } @-webkit-keyframes cssload-spinner2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes cssload-spinner2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: var(--white)!important; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .dark-menu .wsmainfull { padding: 6px 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; display: block; font-size: 1rem; line-height: 50px; font-weight: 600; letter-spacing: 0; text-decoration: none; margin: 0 7px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 35px; width: 0; } /*------------------------------------------*/ /* HEADER LINK INFO /*------------------------------------------*/ span.sm-info { position: relative; display: inline-block; text-align: center; width: 20px; height: 20px; color: var(--white); font-size: 0.65rem; line-height: 19px; font-weight: 700; margin-left: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; } .nav-blue .sm-info { background-color: var(--blue); } .nav-green .sm-info { background-color: var(--green); } .nav-indigo .sm-info { background-color: var(--indigo); } .nav-orchid .sm-info { background-color: var(--orchid); } .nav-pink .sm-info { background-color: var(--pink); } .nav-purple .sm-info { background-color: var(--purple); } .nav-red .sm-info { background-color: var(--red); } .nav-skyblue .sm-info { background-color: var(--sky-blue); } .nav-violet-red .sm-info { background-color: var(--violet-red); } /*------------------------------------------*/ /* HEADER BUTTONS /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 1rem; line-height: 30px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 14px; padding: 6px 28px 8px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 4px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 25px; } .wsmenu > .wsmenu-list > li a.store.header-store { line-height: 1; margin-top: 13px; margin-left: 10px; margin-bottom: 0; padding: 0; } /*------------------------------------------*/ /* LANGUAGE SELECT /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { width: auto; min-width: 115px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.875rem; padding: 8px 11px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 8px 11px; } /*------------------------------------------*/ /* HEADER STORE BADGES /*------------------------------------------*/ .store.header-store img { max-height: 44px; } /*------------------------------------------*/ /* HEADER SOCIAL LINKS /*------------------------------------------*/ .header-socials { margin: 0; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .header-socials a { display: block; margin-left: 15px; } .navbar-light .header-socials a { color: #ddd; } .navbar-light .header-socials a:hover { color: var(--silver); } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-20 [class*="flaticon-"]:after { line-height: 70px!important; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 200px; top: 62px; padding: 12px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* HEADER SUBMENU SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 210px; position: absolute; left: 102%; top: 0; margin: 0; padding: 10px; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { position: absolute; top: 12px; right: 12px; } .sub-menu.ico-10 [class*="flaticon-"]:before, .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 62px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 33%; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--tra-white-smoke); color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 74%!important; left: 25%; padding: 20px 10px; } .wsmegamenu.w-75 .col-lg-3 { padding: 0 6px; } /*------------------------------------------*/ /* SUBMENU TITLE /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu .title, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title { color: var(--light-gray); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 15px 13px; } /*------------------------------------------*/ /* DARK HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--metal)!important; border: solid 1px var(--metal)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } .dark-menu .title, .black-scroll .scroll .title, .dark-menu .icons-menu-txt span, .black-scroll .scroll .icons-menu-txt span { color: var(--white)!important; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--smoke); } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: var(--ink); } .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--blue); } .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--green); } .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--indigo); } .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--orchid); } .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--pink); } .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--purple); } .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--red); } .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--sky-blue); } .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--violet-red); } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR WHITE SCROLL /*------------------------------------------*/ .tra-menu.white-scroll .wsmainfull.scroll, .white-menu.white-scroll .wsmainfull.scroll, .tra-menu.border-header.white-scroll .wsmainfull.scroll { padding: 0; border: none; background-color: rgba(255, 255, 255, .7)!important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--ink)!important; } /*------------------------------------------*/ /* NAVBAR BLACK SCROLL /*------------------------------------------*/ .tra-menu.black-scroll .wsmainfull.scroll, .dark-menu.black-scroll .wsmainfull.scroll { padding: 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: var(--silver)!important; } /*------------------------------------------*/ /* WHITE SCROLL BUTTONS /*------------------------------------------*/ .white-scroll .scroll .btn--tra-white { color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK SCROLL BUTTONS /*------------------------------------------*/ .black-scroll .scroll .btn--tra-black { color: var(--white)!important; border-color: var(--white)!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark .logo-white, .navbar-light .logo-black, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-dark.black-scroll .scroll .logo-black { display: none; } .tra-menu.navbar-light .scroll .logo-black, .tra-menu.navbar-dark.black-scroll .scroll .logo-white { display: block; } /* ========================================================================== 05. HERO ========================================================================== */ .hero-section .container { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO DIGITS /*------------------------------------------*/ .hero-digits { padding-right: 20px; } #hd-1-1, #hd-1-2 { display: inline-block; float: left; padding-right: 20px; } #hd-1-1 { width: 48%; } #hd-1-2 { width: 48%; } .hero-digits h2.statistic-number { font-size: 3.35rem; line-height: 1; letter-spacing: -1.5px; margin-bottom: 10px; } .hero-digits h2.statistic-number small { font-size: 2.25rem; margin-left: 5px; } .hero-digits .block-txt p.p-sm { margin-bottom: 0; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ #hero-1 { position: relative; z-index: 3; background-image: url(../images/hero-1.jpg); padding-top: 150px; margin-bottom: 80px; } .hero-1-txt { margin-top: -15px; } .hero-1-txt h2 { font-size: 3.45rem; font-weight: 600; } .hero-1-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-1-txt .os-version-ext { margin-top: 22px; } .hero-1-img { text-align: center; padding: 0 20px; margin-bottom: -80px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ #hero-2 { background-image: url(../images/hero-2.jpg); padding-top: 180px; padding-bottom: 130px; } .hero-2-txt h2 { font-size: 3.75rem; } .hero-2-txt p.p-xl { padding: 0 8%; margin-top: 22px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ #hero-3 { overflow: hidden; background-image: url(../images/hero-3.jpg); padding-top: 175px; } .theme--dark #hero-3 { background-image: url(../images/hero-3d.jpg); } .hero-3-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 70px; margin-bottom: 60px; } .hero-3-txt h2 { font-size: 3.75rem; } .hero-3-txt p.p-xl { font-size: 1.25rem; margin-top: 20px; margin-bottom: 32px; } .hero-3-txt .btn-txt { margin-top: 25px; } .hero-3-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ #hero-4 { overflow: hidden; background-image: url(../images/hero-4.jpg); padding-top: 170px; } .theme--dark #hero-4 { background-image: url(../images/hero-4d.jpg); } .hero-4-txt h2 { font-size: 3.5rem; } .hero-4-txt p.p-xl { padding: 0 2%; margin-top: 30px; margin-bottom: 30px; } .hero-4-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ #hero-5 { position: relative; z-index: 3; background-image: url(../images/hero-5.jpg); padding-top: 150px; margin-bottom: 60px; } #hero-5 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-5 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-5-txt { margin-top: -15px; padding-left: 5px; } .hero-5-txt h2 { font-size: 3.45rem; line-height: 1.3; font-weight: 600; } .hero-5-txt p.p-xl { padding-right: 2%; margin-top: 25px; margin-bottom: 35px; } .hero-5-img { text-align: center; padding-right: 30px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ #hero-6 { background-image: url(../images/hero-6.jpg); padding-top: 170px; } .theme--dark #hero-6 { background-image: url(../images/bg-dark.jpg); } #hero-6:after { position: absolute; content: ''; z-index: -1; width: 100%; height: 10%; bottom: 0; left: 0; background-color: var(--white); } .theme--dark #hero-6:after { background-color: var(--dark-theme-bg); } .hero-6-txt h2 { font-size: 3.65rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 25px; margin-bottom: 30px; } .hero-6-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-7 /*------------------------------------------*/ #hero-7 { overflow: hidden; position: relative; background-image: url(../images/hero-7.jpg); padding-top: 140px; padding-bottom: 40px; } #hero-7 .wave-shape-bottom { z-index: 6; } #hero-7 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-7 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-7-txt { margin-top: -30px; } .hero-7-txt h2 { font-size: 3.65rem; font-weight: 600; margin-bottom: 40px; } .hero-7-txt .os-version-ext { margin-top: 22px; } .hero-7-img { text-align: center; margin-bottom: -30%; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-8 { position: relative; background-image: url(../images/hero-8.jpg); padding-top: 160px; margin-bottom: 30px; } #hero-8 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-8 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-8-txt { margin-top: -30px; } .hero-8-txt h2 { font-size: 3.65rem; font-weight: 600; } .hero-8-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-8-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-8-img { position: relative; text-align: center; margin: 0 -100% -30px 0; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ #hero-9 { position: relative; background-image: url(../images/hero-9.jpg); padding-top: 170px; } .theme--dark #hero-9 { background-image: url(../images/hero-9d.jpg); } .hero-9-txt { margin-top: -30px; } .hero-9-txt h2 { font-size: 4rem; } .hero-9-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-9-img { text-align: center; padding-left: 15px; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ #hero-10 { background-image: url(../images/hero-10.jpg); padding-top: 170px; } .theme--dark #hero-10 { background-image: url(../images/hero-10d.jpg); } .hero-10-txt h2 { font-size: 3.5rem; } .hero-10-txt p.p-lg { padding: 0 2%; margin-top: 25px; margin-bottom: 35px; } .hero-10-txt p.btn-txt { margin-top: 40px; } #hero-10 .quick-form { margin: 35px 7% 0; } .hero-10-img { margin-top: 65px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ #hero-11 { background-image: linear-gradient(180deg, rgba(233, 224, 242, .8) 50%, rgba(233, 224, 242, .05) 100%); padding-top: 170px; } .theme--dark #hero-11 { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .hero-11-txt h2 { font-size: 3.35rem; } .hero-11-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } .hero-11-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-11-img { text-align: center; padding-left: 25px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ #hero-12 { overflow: hidden; background-image: url(../images/hero-12.jpg); padding-top: 180px; } .theme--dark #hero-12 { background-image: url(../images/hero-12d.jpg); } .hero-12-txt h2 { font-size: 3.65rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-12-txt .advantages { margin-top: 20px; } .hero-12-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-13 /*------------------------------------------*/ #hero-13 { background-image: url(../images/hero-13.jpg); padding-top: 90px; padding-bottom: 15px; margin-bottom: 60px; } #hero-13 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-13 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-13-txt { margin-top: -25px; } .hero-13-txt h2 { font-size: 3.25rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 25px; margin-bottom: 30px; } .hero-13-txt .quick-form { margin-top: 35px; margin-right: 4%; } .hero-13-img { text-align: center; padding-right: 35px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-14 /*------------------------------------------*/ #hero-14 { background-image: url(../images/hero-14.jpg); padding-top: 170px; padding-bottom: 130px; } .hero-14-txt h2 { font-size: 4.35rem; } .hero-14-txt p.p-xl { padding: 0 3%; margin-top: 30px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-15 /*------------------------------------------*/ #hero-15 { background-image: url(../images/hero-15.jpg); padding-top: 150px; margin-bottom: 100px; } .hero-15-txt { margin-top: -25px; padding-left: 20px; } .hero-15-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 105px; margin-bottom: 30px; } .hero-15-txt h2 { font-size: 3.25rem; } .hero-15-txt p.p-lg { padding-right: 2%; margin-top: 25px; margin-bottom: 25px; } .hero-15-img { text-align: center; padding-right: 20px; margin-bottom: -100px; } /*------------------------------------------*/ /* HERO-16 /*------------------------------------------*/ #hero-16 { overflow: hidden; padding-top: 180px; } .hero-16-txt h2 { font-size: 3.75rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-16-img { padding: 80px 60px 0; margin-top: 70px; } .hero-16-img img { margin-bottom: -30px; } /*------------------------------------------*/ /* HERO-17 /*------------------------------------------*/ #hero-17 { background-image: url(../images/hero-17.jpg); padding-top: 80px; } .theme--dark #hero-17 { background-image: url(../images/hero-17d.jpg); } .hero-17-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 90px; margin-bottom: 35px; } .hero-17-txt h2 { font-size: 4rem; letter-spacing: -0.5px; } .hero-17-txt p.p-md { margin-top: 20px; margin-bottom: 30px; } .hero-17-img { margin: 0 -30px 0 15px; } /*------------------------------------------*/ /* HERO-18 /*------------------------------------------*/ #hero-18 { background-image: url(../images/hero-18.jpg); padding-top: 100px; } .theme--dark #hero-18 { background-image: url(../images/hero-18d.jpg); } .hero-18-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 115px; margin-bottom: 35px; } .hero-18-txt h2 { font-size: 3.35rem; } .hero-18-txt p.p-xl { padding: 0 5%; margin-top: 35px; margin-bottom: 35px; } .hero-18-img { text-align: center; margin-top: 30px; } /*------------------------------------------*/ /* HERO QUICK FORM /*------------------------------------------*/ .hero-section .quick-form .input-group { border: none; } /*------------------------------------------*/ /* Hero Quick Form Input /*------------------------------------------*/ .hero-section .quick-form .form-control { height: 64px; background-color: var(--white); border: 2px solid var(--silver); color: #666; font-size: 1.125rem; font-weight: 400; padding: 0 20px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .hero-section .quick-form.form--shadow .form-control { border-color: transparent; -webkit-box-shadow: 0 5px 10px var(--tra-black); -moz-box-shadow: 0 5px 10px var(--tra-black); box-shadow: 0 5px 10px var(--tra-black); } .hero-section .quick-form.form-stroke .form-control { border-color: var(--black); } .hero-section .quick-form.form-half .form-control { height: 58px; font-size: 1.0625rem; } /*------------------------------------------*/ /* Hero Quick Form Placeholder /*------------------------------------------*/ .hero-section .quick-form .form-control::-moz-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Hero Quick Form Focus /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { background-color: var(--white); border-color: var(--black); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Hero Quick Form Button /*------------------------------------------*/ .hero-section .quick-form .btn { height: 64px; font-size: 1.0625rem; padding: 12px 45px; margin-left: 15px; } .hero-section .quick-form.form-half .btn { height: 58px; font-size: 1rem; padding: 13px 40px; margin-left: 12px; } /*------------------------------------------*/ /* Hero Quick Form Message /*------------------------------------------*/ .hero-section .quick-form-msg { width: 100%!important; display: block; margin: 20px 0 15px 5px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -15px 0; } .hero-section .quick-form-msg .loading { color: #3eb1ff; font-size: 1.05rem; line-height: 1; font-weight: 500; } .hero-section .text-center .quick-form-msg .loading { font-size: 1.125rem; } /* ========================================================================== 06. ABOUT ========================================================================== */ .about-1 { background-image: url(../images/about-1.jpg); margin-bottom: 80px; } .theme--dark .about-1 { background-image: url(../images/about-1d.jpg); } .about-2-title { margin-bottom: 25px; } .about-4-title { padding-right: 4%; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-1-txt h2 { font-size: 3.65rem; margin-bottom: 20px; } .about-1-txt h4 { line-height: 1.44; font-weight: 400; padding-right: 2%; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .about-1-img { margin-top: 60px; margin-bottom: -80px; } .about-3 .img-block.left-column { margin-right: 40px; } .about-3 .img-block.right-column { margin-left: 40px; } /* ========================================================================== 07. CAREERS ========================================================================== */ .jobs-category { padding: 0 50px 18px; margin-bottom: 30px; border: 1.5px solid transparent; } .jobs-category h4 { line-height: 1; padding-top: 40px; margin-bottom: 14px; } .career-item { position: relative; padding: 22px 0; } /*------------------------------------------*/ /* OPEN ROLE DESCRIPTION /*------------------------------------------*/ .position-data { margin-top: 3px; } .position-data li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .rb-divider { position: relative; top: 1.25px; transform: rotate(-90deg); margin-left: 2px; } .position-data.ico-15 [class*="flaticon-"]:before, .position-data.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .position-data li p { display: inline-block; float: left; margin-bottom: 0; } /*------------------------------------------*/ /* OPEN ROLE LINK /*------------------------------------------*/ .position-link { color: var(--header-color); position: absolute; top: 26px; right: 5px; transform: rotate(-45deg); } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* MORE CAREERS BUTTON /*------------------------------------------*/ .more-careers { text-align: center; margin-top: 60px; } .more-careers-holder { display: inline-block; margin: 0 auto; } .more-careers-txt { text-align: left!important; display: inline-block; float: left; } .more-careers-txt p { position: relative; top: 6px; margin-bottom: 0; } .more-careers-btn { display: inline-block; margin-left: 20px; } .more-careers-btn .btn { font-size: 0.875rem; padding: 0.6rem 1.35rem; } /* ========================================================================== 08. JOB POSITION =========================================================================== */ .job-position-title { padding-top: 170px; padding-bottom: 100px; margin-bottom: 30px; } .jb-txt { position: relative; } .jb-txt h2 { padding-right: 20%; } .job-position-title .position-data { margin-top: 20px; } .job-position-title .rb-divider { top: 3.5px; } .job-position-title .btn { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; padding: 0.7rem 1.4rem; } /*------------------------------------------*/ /* JOB POSITION TYPOGRAPHY /*------------------------------------------*/ .position-info h5 { margin-top: 60px; margin-bottom: 30px; } .position-info p span { color: var(--header-color); font-weight: 600; } .position-info .btn { margin-top: 35px; } /* ========================================================================== 09. FEATURES ========================================================================== */ .fbox-5-wrapper { padding: 90px 55px; } .features-2 .section-title p.p-xl { font-size: 1.25rem; margin-top: 0; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 40px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3 { margin-bottom: 50px; } /*------------------------------------------*/ /* FEATURE BOX /*------------------------------------------*/ .fbox-3 { border: 1px solid var(--silver); padding: 40px 20px 30px; } .fbox-3.bg--white { border: 1px solid transparent; padding: 40px 20px 30px; } .fbox-4 { padding: 60px; border: 1px solid transparent; } .fbox-4.fb-5, .fbox-4.fb-6 { padding: 70px 65px; } .ico-title .fbox-4.fb-5, .ico-title .fbox-4.fb-6 { padding: 45px 50px 35px; } .fbox-4.fb-7, .fbox-4.fb-8 { position: relative; overflow: hidden; padding: 70px 50px 0; } .ico-title .fbox-4.fb-7, .ico-title .fbox-4.fb-8 { padding: 45px 50px 0; } .fbox-4-txt { padding-left: 60px; } .fbox-4-txt h2, .fbox-4-txt h3 { margin-bottom: 20px; } .fbox-4-txt h3.h3-lg { font-size: 2.5625rem; } .fbox-4-txt .btn { margin-top: 25px; } .fbox-5 { padding: 80px 53px 70px; border: 1.5px solid transparent; } /*------------------------------------------*/ /* FEATURE BOX VECTOR ICON /*------------------------------------------*/ .fbox-ico, .fbox-ico.ico-rounded { margin-bottom: 15px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 20px; } .fbox-ico[class*="img-"], .fbox-ico.ico-rounded-md, .fbox-ico.ico-rounded-lg { margin-bottom: 20px; } /*------------------------------------------*/ /* FEATURE BOX IMAGE /*------------------------------------------*/ .fbox-img img { width: auto; max-width: inherit; } .fbox-img.h-175 img { max-height: 175px; } .fbox-img.h-180 img { max-height: 180px; } .fbox-6 .fbox-img { margin-bottom: 35px; } /*------------------------------------------*/ /* FBOX-4 IMAGE /*------------------------------------------*/ .fbox-4.fb-1 .fbox-4-img { margin: 40px 5% 0; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 45px 0 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 5% 40px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 40px 5% 0; } /*------------------------------------------*/ /* FBOX-5 IMAGE /*------------------------------------------*/ .fbox-5-img img { width: auto; max-width: inherit; max-height: 255px; margin-bottom: 25px; } /*------------------------------------------*/ /* FBOX-7 IMAGE /*------------------------------------------*/ .fbox-7 .fbox-img { -webkit-border-radius: 12px 12px 0 0; -moz-border-radius: 12px 12px 0 0; -o-border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; } .fbox-7 .fbox-img.h-175 { padding-top: 40px; margin: 0 8px 60px; } .fbox-7 .fbox-img.h-180 { padding-top: 42px; margin: 0 5px 60px; } .fbox-7 .fbox-img img { margin-bottom: -25px; } /*------------------------------------------*/ /* FBOX-2 /*------------------------------------------*/ .fbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .fbox-ico-wrap { position: relative; margin-right: 30px; } .fbox-2 .fbox-ico { margin-top: 2px; } .fbox-2 .fbox-txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* FBOX TYPOGRAPHY /*------------------------------------------*/ .fbox-2 h5, .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 20px; margin-bottom: 12px; } .fbox-4 h5 { margin-bottom: 16px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 24px; } .fbox-5 h5 { margin-bottom: 16px; } .fbox-3 p, .fbox-5 p, .fbox-wrapper p, .fbox-4 p.mb-0 { margin-bottom: 0; } .fbox-4 p { margin-bottom: 14px; } /*------------------------------------------*/ /* FEATURES DOWNLOAD BUTTON /*------------------------------------------*/ .features-2-download { margin-top: 80px; } .features-2-download p.p-sm { font-size: 0.9rem; margin-top: 20px; margin-bottom: 0; } /* ========================================================================== 10. CONTENT ========================================================================== */ .ct-07 { overflow: hidden; } .ct-08 { margin-bottom: 80px; } .ct-09 { margin-top: 80px; } .ct-06 .section-overlay { margin-bottom: 100px; } .bc-03 .section-title { margin-bottom: 50px; } .bc-04 { margin: 30px 0; } /*------------------------------------------*/ /* CONTENT BOX WRAPPER /*------------------------------------------*/ .bc-01-wrapper, .bc-02-wrapper { border: 1px solid transparent; } .bc-04-wrapper { border: 2.5px solid #d2d2eb; padding-left: 60px; } .bc-01 .section-overlay { padding: 80px 65px; } .bc-02 .section-overlay { padding: 65px 60px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 60px; } .bc-02.pt-30.bc-02-top { margin-top: 70px; } .bc-03 .section-overlay { padding: 80px 70px 0; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .txt-box { margin-bottom: 25px; } .bc-01 .txt-box { margin-bottom: 30px; } .txt-box:last-child, .bc-01 .txt-box:last-child { margin-bottom: 0; } .ct-07 .txt-block { margin-top: -30px; } .ct-08 .txt-block { margin-top: -30px; } .bc-01 .txt-block.left-column { padding-right: 20px; } .bc-01 .txt-block.right-column { padding-left: 20px; } .bc-04 .txt-block { padding-right: 30px; } /*------------------------------------------*/ /* CONTENT BOX /*------------------------------------------*/ .cbox-1, .cbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-4-wrapper { margin-top: 20px; } .cbox-5 { display: inline-block; width: 390px; min-width: 390px; padding: 18px 24px 16px 24px; } .cbox-5.cb-1 { margin: 12px 0 25px; } /*------------------------------------------*/ /* CONTENT BOX ICON /*------------------------------------------*/ .cbox-1 .ico-wrap { position: relative; margin-right: 1.625rem; } .cbox-1-ico { text-align: center; position: relative; width: 2.25rem; height: 2.25rem; font-size: 1.125rem; line-height: 2rem; font-weight: 600; border: 3px solid transparent; border-radius: 100%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .cbox-1-line { position: absolute; bottom: 14px; left: 50%; width: 2px; background-color: var(--smoke); height: calc(100% - 70px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .cbox-1:hover .cbox-1-ico { background-color: transparent; } .cbox-1:hover .cbox-1-ico.bg--black { color: var(--black); border-color: var(--black); } .cbox-1:hover .cbox-1-ico.bg--blue { color: var(--blue); border-color: var(--blue); } .cbox-1:hover .cbox-1-ico.bg--green { color: var(--green); border-color: var(--green); } .cbox-1:hover .cbox-1-ico.bg--indigo { color: var(--indigo); border-color: var(--indigo); } .cbox-1:hover .cbox-1-ico.bg--orchid { color: var(--orchid); border-color: var(--orchid); } .cbox-1:hover .cbox-1-ico.bg--pink { color: var(--pink); border-color: var(--pink); } .cbox-1:hover .cbox-1-ico.bg--purple { color: var(--purple); border-color: var(--purple); } .cbox-1:hover .cbox-1-ico.bg--red { color: var(--red); border-color: var(--red); } .cbox-1:hover .cbox-1-ico.bg--skyblue { color: var(--sky-blue); border-color: var(--sky-blue); } .cbox-1:hover .cbox-1-ico.bg--violet-red { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* CBOX #2 /*------------------------------------------*/ .cbox-2 .ico-wrap { position: relative; text-align: center; margin-top: 0; margin-right: 1.25rem; } .cbox-2 .cbox-2-ico { position: relative; top: 5px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3rem; } /*------------------------------------------*/ /* CBOX #5 /*------------------------------------------*/ .cbox-5-ico { display: inline-block!important; float: left; text-align: center; } /*------------------------------------------*/ /* CBOX #6 /*------------------------------------------*/ .cbox-6-wrapper { position: relative; } .cbox-6 { border: 1px solid var(--snow); padding: 40px; margin: 0 12%; z-index: 1; } .cbox-6 hr { margin-top: 35px; margin-bottom: 25px; } /*------------------------------------------*/ /* CBOX #6 TITLE /*------------------------------------------*/ .cbox-6-title p.p-md { line-height: 1; } .cbox-6 .statistic-number sup { font-size: 3rem; top: -10px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 15px; } .cbox-6-title p.p-md.ico-10 span { font-weight: 600; } /*------------------------------------------*/ /* CBOX #6 TEXT /*------------------------------------------*/ .cbox-6-txt h5 { margin-bottom: 10px; } /*------------------------------------------*/ /* CBOX #6 DATA /*------------------------------------------*/ .cbox-6-data { padding: 18px 25px; } .cbox-6-data h4 { letter-spacing: -0.5px; } .cbox-6-data p { margin: 0; } /*------------------------------------------*/ /* CBOX #6 SHAPE /*------------------------------------------*/ .cb-shape-1 { position: absolute; right: 30px; top: -35px; z-index: -1; } .cb-shape-2 { position: absolute; left: 30px; bottom: -25px; z-index: -1; } .cb-shape-1 img, .cb-shape-2 img { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------*/ /* CBOX #7 /*------------------------------------------*/ .cbox-7 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-7-txt { overflow: hidden; flex: 1; max-width: 100%; padding-left: 14px; } .cbox-7-ico { background-image: linear-gradient(0deg, #d4dbff 0%, #fff 100%); width: 28px; height: 28px; margin-top: 2px; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 26px; } .cbox-7-txt p { margin-bottom: 14px; } /*------------------------------------------*/ /* CONTENT BOX TEXT /*------------------------------------------*/ .cbox-1-txt, .cbox-2-txt { overflow: hidden; flex: 1; max-width: 100%; } .cbox-1-txt { margin-bottom: 30px; } .cbox-2-txt { margin-bottom: 40px; } .two-txt .cbox-2-txt { margin-bottom: 25px; } .cbox-1:last-child .cbox-1-txt, .cbox-2:last-child .cbox-2-txt { margin-bottom: 0; } .cbox-3-txt { margin-bottom: 40px; } .cbox-3:last-child .cbox-3-txt { margin-bottom: 0; } .cbox-5-txt { display: inline-block!important; padding-left: 18px; } /*------------------------------------------*/ /* CONTENT BOX TITLE /*------------------------------------------*/ .cbox-title { margin-bottom: 18px; } .cbox-title span { float: left; line-height: 1!important; margin-right: 20px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.35rem; } .cbox-title h5 { line-height: 2.1875rem!important; margin-bottom: 0!important; } .box-title { margin-bottom: 14px; } .box-title span { position: relative; top: 10px; right: 4px; } .box-title h6 { display: inline-block; margin-bottom: 0; } /*------------------------------------------*/ /* CONTENT BOX TYPOGRAPHY /*------------------------------------------*/ .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 15px!important; } .cbox-5-txt h6 { margin-bottom: 2px; } .bc-02 .txt-block h5 { margin-bottom: 25px; } .cbox-1-txt p, .cbox-2-txt p, .cbox-3-txt p, .cbox-5-txt p, .cbox-4 p { margin-bottom: 0; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h3, .txt-block h2 { margin-bottom: 25px; } .txt-block h5 { margin-bottom: 20px; } h5.h5-title { margin: 20px 0; } .txt-block-tra-link { margin-top: 20px; } .txt-block .btn { margin-top: 30px; } .txt-block .btn.btn--transparent { margin-top: 0; } .txt-block .stores-badge { margin-top: 30px; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion-1 .accordion-item { background-color: transparent; padding: 22px 0 26px; border: none; border-bottom: 1.5px solid var(--smoke); border-radius: 0 0; } .txt-block .accordion-thumb { margin: 0; padding: 0; cursor: pointer; position: relative; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 1px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .txt-block .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } .txt-block .accordion-1 .accordion-panel { color: var(--gray); margin: 0; padding: 0 0 0 5px; display: none; } .txt-block .accordion-1 .accordion-thumb h5 { color: var(--header-color); line-height: 1; padding-left: 5px; margin-bottom: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 24px; } /*------------------------------------------*/ /* TEXT BLOCK TABS /*------------------------------------------*/ #tabs-1 .tab-content { display: none; } #tabs-1 .tab-content.current { display: inherit; } .tabs-1 li { cursor: pointer; background-color: transparent; border: none; margin-bottom: 8px; padding: 25px 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tabs-1 li:last-child { margin-bottom: 0; } .tab-link h5, .tab-link p { color: #858585; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tab-link p { margin: 10px 0 0; } /*------------------------------------------*/ /* TAB LINK HOVER /*------------------------------------------*/ .tabs-1 li:hover { background-color: #f9f9f9; } /*------------------------------------------*/ /* TAB LINK CURRENT /*------------------------------------------*/ #tabs-1 .tabs-1 li.current, #tabs-1 .tabs-1 li.current:hover { background-color: #f3f3f5; } #tabs-1 .tabs-1 li.current { cursor: auto; } #tabs-1 .tabs-1 li:hover h5, #tabs-1 .tabs-1 li.current h5 { color: var(--header-color); } #tabs-1 .tabs-1 li:hover p, #tabs-1 .tabs-1 li.current p { color: var(--gray); } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 25px; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 25px; } .ct-03 .img-block img { max-width: none; display: inline-block; margin-left: 30px; } .ct-04 .img-block img { max-width: none; margin-left: -100%; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -100px; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -80px; } .ct-09 .img-block { margin-top: -80px; } .img-block-txt, .img-block-btn { text-align: center; margin-top: 45px; } .img-block-hidden .video-btn { top: calc(50% - 30px); } .bc-3-img .video-btn { top: calc(50% - 70px); } .bc-2-img.right-column { margin-left: 20px; } .bc-2-img.left-column { margin-right: 20px; } .bc-3-img { margin-bottom: -200px; } .bc-4-img { transform: rotate(3deg); margin: -20px 0; } /* ========================================================================== 11. STATISTIC =========================================================================== */ .statistic-1-wrapper .statistic-block-digit { width: 36%; display: inline-block!important; float: left; } .statistic-1-wrapper .statistic-block-txt { width: 64%; display: inline-block!important; padding-left: 16px; } #sb-3-1, #sb-3-2 { width: 48%; display: inline-block; float: left; } .statistic-4-wrapper .statistic-block { padding: 10px 40px; } #sb-4-1, #sb-4-2 { border-right: 1px solid var(--tra-smoke); } /*------------------------------------------*/ /* STATISTIC BLOCK ICON /*------------------------------------------*/ .statistic-ico { margin-bottom: 15px; } .statistic-block .txt-block-rating { margin-bottom: -3px; } /*------------------------------------------*/ /* STATISTIC BLOCK NUMBER /*------------------------------------------*/ h3.statistic-number, h2.statistic-number { line-height: 1; font-weight: 700; letter-spacing: -1px; margin-bottom: 0; } #sb-2-2 h2.statistic-number { letter-spacing: -2px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 15px; } /*------------------------------------------*/ /* STATISTIC BLOCK TYPOGRAPHY /*------------------------------------------*/ .statistic-2-wrapper h2 { margin-bottom: 15px; } .statistic-2-wrapper .txt-block h4, .statistic-2-wrapper .txt-block h3 { line-height: 1.35; } .statistic-4-wrapper h5 { margin-top: 25px; margin-bottom: 15px; } .statistic-1-wrapper p { position: relative; line-height: 1.35; top: 4px; margin-bottom: 0; } .txt-block-stat p, .statistic-block-txt p, .statistic-2-wrapper p, .statistic-4-wrapper p { margin-bottom: 0; } /* ========================================================================== 12. RATING =========================================================================== */ .rating-1-wrapper.text-center { padding: 0 16%; } .rating-2-wrapper.text-center { padding: 0 13%; } .rating-title { text-align: center; } .rating-title h6, .rating-title h5 { margin-bottom: 0; } /*------------------------------------------*/ /* RATING BOX LOGO /*------------------------------------------*/ .rbox-1-img { margin-bottom: 15px; } .rbox-1-img img { width: auto; max-width: inherit; max-height: 35px; } .rbox-2-img img { width: auto; max-width: inherit; max-height: 80px; } #rb-2-2 .rbox-2-img img { max-height: 145px; } /*------------------------------------------*/ /* RATING BOX TYPOGRAPHY /*------------------------------------------*/ .rbox-1 .star-rating { display: inline-block; font-size: 1rem; line-height: 15px; font-weight: 500; vertical-align: inherit; background-color: var(--white); padding: 5px 18px; } .rbox-1 .star-rating span { position: relative; color: #ffb30c; top: -1px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 0.9rem; } .rbox-1 .star-rating { font-size: 0.86rem; line-height: 1; } .rbox-2 p { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; font-weight: 500; margin-top: 15px; margin-bottom: 0; } .rbox-2 p span { font-weight: 700; } /* ========================================================================== 13. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper { padding: 0 10px; } .reviews-3-wrapper:after { position: absolute; content: ''; z-index: -1; width: 86%; height: 85%; top: 8%; left: 7%; background-color: var(--white-smoke); } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { position: relative; border: 1.5px solid transparent; padding: 35px; margin: 0 12px 30px; } .review-1.no-title { padding: 50px 35px 35px; } .review-2 { padding: 0 30px; margin-bottom: 30px; } .review-3 { position: relative; padding: 45px 40px 35px; } #rw-3-1, #rw-3-2 { margin-bottom: 20px; } .review-item { position: relative; width: 33.33%; padding: 0 12px; margin-bottom: 24px; } .review-4 { position: relative; padding: 35px 28px; border: 1px solid transparent; } /*------------------------------------------*/ /* TESTIMONIAL ICON /*------------------------------------------*/ .review-ico.ico-45 { position: absolute; top: 15px; right: 25px; opacity: .12; } .review-ico.ico-60 { position: absolute; top: 15px; left: 25px; opacity: .12; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-1-txt h6.h6-md, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg, .review-4-txt h6.h6-lg { line-height: 1.4; padding-right: 5%; margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.225rem; line-height: 1.4; padding-right: 5%; margin-bottom: 12px; } .review-1.text-center h6.h6-md, .review-1.text-center h6.h6-lg { padding-right: 0; } .review-2-txt h6.h6-lg { margin-bottom: 14px; } .review-1-txt p, .review-2-txt p, .review-3-txt p, .review-4-txt p { margin-bottom: 15px; } .review-4-txt p.mb-0 { margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-rating.ico-10 { margin-bottom: 5px; } .review-author .review-rating.ico-10 { margin-bottom: 2px; } .review-rating.ico-15 { margin-bottom: 8px; } .review-rating.ico-15.mb-15 { margin-bottom: 12px; } .review-rating.ico-10 [class*="flaticon-"]:before, .review-rating.ico-10 [class*="flaticon-"]:after { font-size: 0.935rem; } .review-rating.ico-15 [class*="flaticon-"]:before, .review-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /*------------------------------------------*/ /* TESTIMONIAL DATA /*------------------------------------------*/ .author-data { margin-top: 20px; } .author-data.mt-25 { margin-top: 25px; } .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } /*------------------------------------------*/ /* TESTIMONIAL AVATAR /*------------------------------------------*/ .review-avatar { margin: 0 auto; float: left; } .review-avatar img { width: 46px; height: 46px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-3 .review-avatar img { width: 54px; height: 54px; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .author-data .review-author { position: relative; display: inline-block; text-align: left; padding: 0 0 0 14px; } .review-author.mt-15 { margin-top: 16px; } .review-3 .review-author { margin-top: 5px; } .review-author h6 { font-size: 0.975rem; line-height: 1; margin-bottom: 9px; } .review-author.mt-15 h6 { margin-bottom: 0; } .review-author h6 span { color: var(--gray); font-size: 0.95rem; font-weight: 400; } .review-author p { font-size: 0.925rem; line-height: 1; font-weight: 300; margin-bottom: 0; } .review-author p a { font-weight: 400; } /*------------------------------------------*/ /* TESTIMONIAL BUTTON /*------------------------------------------*/ .reviews-btn { text-align: center; margin-top: 65px; } /*------------------------------------------*/ /* TESTIMONIAL CAROUSEL DOTS /*------------------------------------------*/ .reviews-section button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { margin: 0 7px; } .owl-dots button:focus { outline: none; text-decoration: none; } /* ========================================================================== 14. TEAM =========================================================================== */ .team-member { margin-bottom: 50px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; overflow: hidden; text-align: center; margin-bottom: 30px; } /*------------------------------------------*/ /* PHOTO HOVER ZOOM /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: .45; -moz-opacity: .45; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data { padding-left: 8px; } .team-member-data h6 { margin-bottom: 8px; } .team-member-data p { font-size: 0.975rem; line-height: 1; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } /* ========================================================================== 15. PRICING =========================================================================== */ .pricing-3-wrapper { padding: 0 4%; } .p-table { border: 1.5px solid transparent; margin-bottom: 40px; } .p-table.theme--border { border: 3px solid var(--theme-color); } .p-table.gray--border { border: 3px solid var(--tra-black); } .p-table.blue--border { border: 3px solid var(--blue); } .p-table.green--border { border: 3px solid var(--green); } .p-table.indigo--border { border: 3px solid var(--indigo); } .p-table.orchid--border { border: 3px solid var(--orchid); } .p-table.pink--border { border: 3px solid var(--pink); } .p-table.purple--border { border: 3px solid var(--purple); } .p-table.red--border { border: 3px solid var(--red); } .p-table.skyblue--border { border: 3px solid var(--sky-blue); } .p-table.violet-red--border { border: 3px solid var(--violet-red); } .pricing-1-table { padding: 45px 35px; } .pricing-2-table, .pricing-3-table { padding: 30px 40px; } .pricing-2-table.bg--white, .pricing-3-table.bg--white { border: 1px solid #ddd; -webkit-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); -moz-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); } #pt-3-1 { margin: 0 10px 40px 50px; } #pt-3-2 { margin: 0 50px 40px 10px; } /*------------------------------------------*/ /* TABLE HEADER /*------------------------------------------*/ .pricing-table-header { position: relative; } .pricing-table-header h5 { margin-bottom: 30px; } /*------------------------------------------*/ /* PRICING TABLE DISCOUNT /*------------------------------------------*/ .pricing-discount { position: absolute; top: -2px; right: -5px; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.915rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* PRICE /*------------------------------------------*/ .price span { color: var(--header-color); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -2px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.5rem; } /*------------------------------------------*/ /* DOLLAR SIGN /*------------------------------------------*/ .price sup { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-size: 2.05rem; font-weight: 600; top: -5px; right: 2px; letter-spacing: -1px; } /*------------------------------------------*/ /* Validity /*------------------------------------------*/ .price sup.validity { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 400; top: -2px; left: 0; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.65rem; } /*------------------------------------------*/ /* Text /*------------------------------------------*/ .price p { margin-top: 20px; margin-bottom: 20px; } .pricing-section .btn-txt a { text-decoration: underline; } /*------------------------------------------*/ /* PRICING FEATURES /*------------------------------------------*/ .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 20px; } .pricing-features li { padding: 11px 8px; } .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 9px 8px; } .pricing-features li p { line-height: 1; font-weight: 400; margin-bottom: 0; } .pricing-features li p span { position: relative; top: -2px; right: 5px; } .pricing-features.ico-10 li p span { top: 0; right: 4px; } .pricing-features.ico--blue span { color: var(--blue); } .pricing-features.ico--green span { color: var(--green); } .pricing-features.ico--indigo span { color: var(--indigo); } .pricing-features.ico--orchid span { color: var(--orchid); } .pricing-features.ico--pink span { color: var(--pink); } .pricing-features.ico--purple span { color: var(--purple); } .pricing-features.ico--red span { color: var(--red); } .pricing-features.ico--skyblue span { color: var(--sky-blue); } .pricing-features.ico--violet-red span { color: var(--violet-red); } .pricing-features.ico-5 [class*="flaticon-"]:before, .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; } .pricing-features li.disabled-option p, .pricing-features li.disabled-option span { color: var(--disable)!important; } /*------------------------------------------*/ /* PRICING TABLE BUTTON /*------------------------------------------*/ .pt-btn { display: block; width: 100%; margin-top: 25px; } .p-table p.btn-txt { margin: 14px 0 0 0; } /*------------------------------------------*/ /* PRICING TOGGLE BUTTON /*------------------------------------------*/ .ext-toggle-btn { text-align: center; } .toggle-btn.inn-toggle-btn { position: absolute; } /*------------------------------------------*/ /* TOGGLE BUTTON TYPOGRAPHY /*------------------------------------------*/ .toggler-txt { font-size: 1.15rem; font-weight: 500; line-height: 36px; } .toggle-btn p { margin-top: 12px; letter-spacing: -0.25px; margin-bottom: 0; } /*------------------------------------------*/ /* TOGGLE BUTTON SWITCHER /*------------------------------------------*/ .switch-wrap { position: relative; display: inline-block; vertical-align: middle; min-width: 60px; height: 36px; margin: 0 8px; } .switcher { display: block; cursor: pointer; color: var(--white); font-size: 0.925rem; font-weight: 500; height: 36px; padding: 0 20px 0 40px; position: relative; border-radius: 36px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .theme--blue .switcher { background-color: var(--blue); } .theme--green .switcher { background-color: var(--green); } .theme--indigo .switcher { background-color: var(--indigo);} .theme--orchid .switcher { background-color: var(--orchid); } .theme--pink .switcher { background-color: var(--pink); } .theme--purple .switcher { background-color: var(--purple); } .theme--red .switcher { background-color: var(--red); } .theme--skyblue .switcher { background-color: var(--sky-blue); } .theme--violet-red .switcher { background-color: var(--violet-red); } .switcher .show-annual, .switcher .show-monthly { line-height: 36px; } .switcher .show-monthly { display: block; } .switcher .show-annual { display: none; } .switcher:before { position: absolute; left: 5px; bottom: 4px; content: " "; background-color: var(--white); width: 28px; height: 28px; border-radius: 50%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .switch-wrap input { display: none; } .switch-wrap input:checked + .switcher { padding: 0 40px 0 20px; } .switch-wrap input:checked + .switcher:before { left: auto; right: 4px; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .switch-wrap input:checked + .switcher .show-annual { display: block; } .switch-wrap input:checked + .switcher .show-monthly { display: none; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice { text-align: center; margin-top: 20px; } .pricing-notice p { padding: 0 5%; margin-bottom: 0; } .pricing-notice p span { font-weight: 600; } /*------------------------------------------*/ /* COMPARE PRICING TABLE /*------------------------------------------*/ .table>:not(caption)>*>* { padding: 17px 0; border: none!important; background-color: transparent!important; } .comp-table .pricing-header { max-width: 700px; } .comp-table .table thead tr, .comp-table .table tbody tr { border-bottom: 1px solid var(--silver)!important; } .comp-table .table tbody tr.table-last-tr { border-bottom: none!important; } .comp-table .table-responsive thead th { font-size: 1.0625rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody th { font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody td { position: relative; font-size: 0.95rem; line-height: inherit; top: 1px; } .comp-table .table-responsive tbody td span { position: relative; top: 1px; } .table>:not(caption)>*>* { color: var(--header-color); } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .comp-table .disabled-option { color: var(--light-gray); } .comp-table .color--blue { color: var(--blue); } .comp-table .color--green { color: var(--green); } .comp-table .color--indigo { color: var(--indigo); } .comp-table .color--orchid { color: var(--orchid); } .comp-table .color--purple { color: var(--purple); } .comp-table .color--red { color: var(--red); } .comp-table .color--sky { color: var(--sky); } .comp-table .color--skyblue { color: var(--sky-blue); } .comp-table .color--violet-red { color: var(--violet-red); } /*------------------------------------------*/ /* PRICING COMPARE PAYMENT /*------------------------------------------*/ .comp-table-payment h6 { margin-bottom: 16px; } .comp-table-payment p { margin-bottom: 0; } /* ========================================================================== 16. INTEGRATIONS =========================================================================== */ .int-1-wrapper { padding: 80px 70px; } .int-2-wrapper { padding: 0 3%; } .integrations-3 { margin-bottom: -22px; } /*------------------------------------------*/ /* FILTER BUTTONS /*------------------------------------------*/ .filter-btns button { background-color: transparent; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1.0625rem; line-height: 1; font-weight: 600; margin: 0 14px; padding: 0.5rem 0.1rem; border: none; cursor: pointer; border-bottom: 3px solid transparent; outline: 0px none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* Filter Button Active /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--blue); cursor: default; border-color: var(--blue); outline: 0px none; } .theme--blue .filter-btns button.is-checked { color: var(--blue); border-color: var(--blue); } .theme--green .filter-btns button.is-checked { color: var(--green); border-color: var(--green); } .theme--indigo .filter-btns button.is-checked { color: var(--indigo); border-color: var(--indigo); } .theme--orchid .filter-btns button.is-checked { color: var(--orchid); border-color: var(--orchid); } .theme--pink .filter-btns button.is-checked { color: var(--pink); border-color: var(--pink); } .theme--purple .filter-btns button.is-checked { color: var(--purple); border-color: var(--purple); } .theme--red .filter-btns button.is-checked { color: var(--red); border-color: var(--red); } .theme--skyblue .filter-btns button.is-checked { color: var(--sky-blue); border-color: var(--sky-blue); } .theme--violet-red .filter-btns button.is-checked { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* FILTER ITEM /*------------------------------------------*/ .integrations-3 .filter-item { position: relative; width: 33.33%; padding: 0 10px; margin-bottom: 22px; } /*------------------------------------------*/ /* INTEGRATION TOOL /*------------------------------------------*/ .int_tool-1 { display: block; margin-bottom: 40px; } .int_tool-2 { text-align: center; vertical-align: center; background-color: var(--white); border: 1px solid var(--silver); padding: 25px 20px; margin-bottom: 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .int_tool-3 { background-color: var(--white); padding: 20px 26px 22px; border: 1px solid var(--silver); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* INTEGRATION TOOL LOGO /*------------------------------------------*/ .int_tool-1 .tool_logo { border: 1.5px solid transparent; padding: 35px 25px; margin-bottom: 30px; } .int_tool-1 img { width: 65px; height: 65px; } .int_tool-2 img { width: 60px; height: 60px; } .int_tool-3 img { width: 40px; height: 40px; } /*------------------------------------------*/ /* INTEGRATION TOOL TEXT /*------------------------------------------*/ .tool_txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* INTEGRATION TOOL TYPOGRAPHY /*------------------------------------------*/ .tool_txt h6 { font-size: 1.1875rem; margin-top: 2px; } .tool_logo h6 { position: relative; display: inline-block; line-height: 40px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { line-height: 1; margin-bottom: 0; } .int_tool-2 h6 { font-size: 0.925rem; line-height: 1; margin-top: 18px; } .tool_txt p { margin-top: 3px; margin-bottom: 0; } .tool_description p { font-size: 0.95rem; margin-top: 14px; margin-bottom: 0; } /*------------------------------------------*/ /* INTEGRATION TOOL HOVER /*------------------------------------------*/ .int_tool-2:hover, .int_tool-3:hover { border-color: transparent; -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } /*------------------------------------------*/ /* INTEGRATION MORE BUTTON /*------------------------------------------*/ .integrations-1 .more-btn { margin-top: 15px; } /* ========================================================================== 17. MORE APPS =========================================================================== */ .apps-1-wrapper { padding: 0 5%; } .app-box { display: block; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 50px; } /*------------------------------------------*/ /* MORE APPS TYPOGRAPHY /*------------------------------------------*/ .app-box h6, .app-box h5 { line-height: 1; margin-top: 30px; margin-bottom: 12px; } .app-box p.app-cat { color: var(--gray); line-height: 1; margin-bottom: 0; } .app-logo-img { padding: 0 10%; } /* ========================================================================== 18. BRANDS =========================================================================== */ /*------------------------------------------*/ /* BRANDS SECTION TITLE /*------------------------------------------*/ .brands-title { text-align: center; } .brands-title h6, .brands-title h5 { margin-bottom: 50px; } .brands-title p { margin-bottom: 55px; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brand-logo { overflow: hidden; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .brands-carousel-5 .brand-logo { padding: 0 25px; } .brands-carousel-6 .brand-logo { padding: 0 16px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0 5px; } .brands-section .more-btn { text-align: center; margin-top: 35px; } .brands-section .owl-dots { display: none; } /* ========================================================================== 19.CHANGELOG =========================================================================== */ .version-release { margin-bottom: 80px; } .version-release:last-child { margin-bottom: 0; } .release-data { padding-bottom: 30px; border-bottom: 1px dashed var(--silver); margin-bottom: 30px; } span.version-data { display: block; color: var(--header-color); font-size: 1.5rem; line-height: 1; font-weight: 600; margin-bottom: 15px; } span.release-date { display: block; color: var(--gray); font-size: 0.975rem; line-height: 1; margin-bottom: 0; } span.release-date span { color: var(--header-color); font-weight: 500; } .release-highlights h6 { margin-bottom: 16px; } .release-highlights .simple-list p { margin-bottom: 2px; } .release-highlights p b { color: var(--header-color); } .release-preview { margin-bottom: 30px; } /* ========================================================================== 20.DOWNLOAD =========================================================================== */ .download-item { display: block; text-align: center; padding: 45px 40px 35px; border: 1.5px solid transparent; } .download-item img { width: auto; max-width: inherit; max-height: 64px; margin-bottom: 25px; } .download-item h6 { line-height: 1; } .download-item p { font-size: 0.975rem; margin: 6px 0 0; } /* ========================================================================== 21. FAQS =========================================================================== */ /*------------------------------------------*/ /* FAQs-3 TITLE /*------------------------------------------*/ .faq-3-title { margin-top: 20px; } .faq-3-title p { font-size: 1.0725rem; padding-right: 3%; margin-top: 18px; margin-bottom: 28px; } /*------------------------------------------*/ /* FAQs QUESTION /*------------------------------------------*/ .faqs-2 .question { margin-bottom: 30px; } .faqs-2-questions .left-column { padding-right: 15px; } .faqs-2-questions .right-column { padding-left: 15px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .faqs-1-questions h4 { margin-top: 80px; margin-bottom: 25px; } .faqs-2 .question h6, .faqs-2 .question h5 { line-height: 1.5; padding-right: 5%; margin-bottom: 15px; } .faqs-3-question h5 { line-height: 1.5; margin-bottom: 20px; } .faqs-1 .accordion-item p, .faqs-3 .accordion-item p { color: var(--gray); } /*------------------------------------------*/ /* FAQS ACCORDION /*------------------------------------------*/ .faqs-section .accordion-item { background-color: transparent!important; border: none; border-bottom: 1px solid var(--silver); } .faqs-3.faqs-section .accordion-item { border-bottom: 1px solid var(--silver); } .faqs-section .accordion-item.acc-last-item, .faqs-3.faqs-section .accordion-item.acc-last-item { border-bottom: none; } /*------------------------------------------*/ /* Question /*------------------------------------------*/ .faqs-section .accordion-thumb { margin: 0; padding: 25px 0; cursor: pointer; position: relative; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 22px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .faqs-section .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } /*------------------------------------------*/ /* Answer /*------------------------------------------*/ .faqs-section .accordion-panel { margin: 0; padding: 0 0 15px 0; display: none; } .faqs-section .accordion-thumb h5 { line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* MORE QUESTIONS BUTTON /*------------------------------------------*/ .more-questions { text-align: center; margin-top: 80px; } .faqs-2 .more-questions { margin-top: 50px; } .more-questions-holder { display: inline-block; margin: 0 auto; } .more-questions-txt { text-align: left!important; display: inline-block; float: left; } .more-questions-txt h6 { margin-bottom: 3px; } .more-questions-txt p { margin-bottom: 0; } .more-questions-btn { display: inline-block; margin-left: 30px; } /* ========================================================================== 22. BANNER =========================================================================== */ .banner-1-wrapper { overflow: hidden; padding: 90px 75px 95px; } .banner-2-wrapper { position: relative; overflow: hidden; text-align: center; } .banner-2-wrapper .banner-overlay { padding: 85px 70px 95px; } .banner-4-wrapper { overflow: hidden; padding: 55px 60px; border: 1.5px solid transparent; } .banner-5 { overflow: hidden; padding-top: 50px; } .banner-5-wrapper .banner-overlay { padding: 0 75px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-section .section-id { font-weight: 600; padding-top: 10px; margin-bottom: 30px; } .banner-2-txt h2 { padding: 0 4%; } .banner-4-txt h4.h4-md { line-height: 1.35; padding-right: 3%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { padding-right: 10%; margin: 22px 0 28px; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 2%; margin: 20px 0 28px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 22px; margin-bottom: 0; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } /*------------------------------------------*/ /* BANNER BUTTON /*------------------------------------------*/ .banner-4-btn { position: relative; display: inline-block; margin: 0 auto; top: 10px; } .banner-4-btn p { margin: 12px 0 0; } .banner-section p.btn-txt { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER IMAGE /*------------------------------------------*/ .banner-5-img.right-column { margin-top: -40px; padding-left: 25px; } .banner-5-img.left-column { margin-top: -40px; padding-right: 25px; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .banner-qr-code { position: absolute; bottom: 0; right: 55px; max-width: 110px; text-align: center; background: var(--white); padding: 14px 10px 10px; border-radius: 12px 12px 0 0; } .banner-qr-code img { padding: 0 4%; } .banner-qr-code p { font-size: 0.8rem; line-height: 1.35; margin: 10px 0 0; } /* ========================================================================== 23. BLOG =========================================================================== */ .blog-1 .blog-post { margin-bottom: 40px; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { overflow: hidden; text-align: center; } /*------------------------------------------*/ /* BLOG POST TEXT /*------------------------------------------*/ .blog-post-txt { margin-top: 35px; padding-left: 5px; padding-right: 5px; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .post-tag { display: block; font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; } .blog-post-txt h6, .blog-post-txt h5 { line-height: 1.35; margin-bottom: 10px; } .blog-post-txt h4 { line-height: 1.35; margin-bottom: 20px; } .blog-post-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* BLOG POST META /*------------------------------------------*/ .blog-post-meta { margin-top: 18px; margin-bottom: 0; } .wide-post .blog-post-meta { margin-top: 25px; margin-bottom: 0; } .post-meta-list li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .post-meta-list p { line-height: 1; margin-bottom: 0; } .meta-list-divider { position: relative; top: 0px; transform: rotate(-90deg); padding: 0 1px; } /* ========================================================================== 24. BLOG LISTING =========================================================================== */ #blog-page .blog-post { margin-bottom: 60px; } /*------------------------------------------*/ /* WIDE BLOG POSTS /*------------------------------------------*/ #blog-page .blog-post.wide-post { margin-bottom: 60px; } .wide-post .blog-post-img { margin-right: 15px; } .wide-post .blog-post-txt { margin-top: 0; margin-left: 15px; } /*------------------------------------------*/ /* BLOG POSTS CATEGORY /*------------------------------------------*/ .posts-category { margin-top: 40px; margin-bottom: 50px; } .posts-category h4 { line-height: 1; margin-bottom: 0; } .posts-category span { position: relative; top: 1px; } /* ========================================================================== 25. SINGLE BLOG POST =========================================================================== */ .blog-post-preview { padding: 0 3%; margin-bottom: 50px; } /*------------------------------------------*/ /* Single Post Title /*------------------------------------------*/ .single-post-title { padding: 0 10% 0 8%; margin-bottom: 50px; } .single-post-title .blog-post-meta { margin-bottom: 25px; } .single-post-title h2 { margin-bottom: 25px; } /*------------------------------------------*/ /* Single Post Text /*------------------------------------------*/ .single-post-txt { padding: 0 8%; } .single-post-txt h6 { margin-bottom: 16px; } .single-post-txt h5.h5-xl { margin-top: 60px; margin-bottom: 25px; } .single-post-txt h5 { margin-top: 30px; margin-bottom: 25px; } .single-post-txt p span { color: var(--black); font-weight: 600; } .single-post-txt p a { color: var(--theme-color); font-weight: 600; text-decoration: underline; } .single-post-txt p a:hover { color: var(--black); } /*------------------------------------------*/ /* Single Post Image /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 60px; margin-bottom: 60px; } /*------------------------------------------*/ /* POST DATA /*------------------------------------------*/ .post-data { margin: 60px 5% 0; padding: 60px 3% 100px; } /*------------------------------------------*/ /* POST AUTHOR /*------------------------------------------*/ .post-author-avatar { margin: 0 auto; float: left; margin-right: 20px; } .post-author-avatar img { width: 70px; height: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .post-author-txt { position: relative; top: 8px; } .post-author-txt p { line-height: 1; margin-top: 8px; margin-bottom: 0; } .post-author-txt p a { color: var(--black); font-weight: 500; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-list p { margin-bottom: 12px; } .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.4rem; } .share-social-icons a.share-ico span { color: var(--gray); opacity: .6; margin-left: 10px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .share-social-icons a.share-ico:hover span { opacity: 1; } /* ========================================================================== 26. NEWSLETTER =========================================================================== */ .newsletter-1 .newsletter-overlay, .newsletter-4 .newsletter-overlay { padding: 70px 0; } .newsletter-2 .newsletter-overlay { padding: 80px 0 70px; } .newsletter-3 .container { padding-left: 0; padding-right: 0; } .newsletter-3 .newsletter-overlay { padding: 60px 50px; } /*------------------------------------------*/ /* NEWSLETTER TYPOGRAPHY /*------------------------------------------*/ .newsletter-txt h2 { margin-bottom: 35px; } .newsletter-txt h4, .newsletter-txt h3, .newsletter-txt p.p-sm { margin-bottom: 0; } .newsletter-txt a { font-weight: 500; text-decoration: underline; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 10%; } /*------------------------------------------*/ /* NEWSLETTER FORM /*------------------------------------------*/ .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 30px; padding-left: 10%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 40px; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--silver); font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-right: 12px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .newsletter-2.newsletter-section .form-control { border: none; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { background-color: var(--white); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: var(--light-gray); } .newsletter-section .form-control:-ms-input-placeholder { color: var(--light-gray); } .newsletter-section .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { display: block; width: 100%!important; height: 58px; font-size: 0.925rem; padding: 0.7rem 1.3rem; } .newsletter-2.newsletter-section .btn { font-size: 0.975rem; padding: 0.7rem 1.5rem; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #3eb1ff; font-size: 0.9rem; font-weight: 400; line-height: 1; margin-top: 15px; margin-left: 5px; } .newsletter-section .text-center .form-notification { margin-left: 0; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 27. CONTACTS =========================================================================== */ .contacts-1 .contact-form p { color: var(--header-color); font-size: 0.95rem; line-height: 1; font-weight: 600; margin-bottom: 16px; padding-left: 8px; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.835rem; font-weight: 300; line-height: 1.6; padding-left: 0; margin-top: 35px; margin-bottom: 10px; } .contact-form-notice p a { color: var(--header-color); font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* CONTACT FORM INPUT /*------------------------------------------*/ .contact-form .form-control, .contact-form .form-select { height: 64px; background-color: #fdfdfe; border: 1.5px solid #d5d5d5; box-shadow: 0 0 0 0; color: #3a4a56; font-size: 1rem; font-weight: 400; padding: 0 20px; margin-bottom: 35px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .contact-form .form-select { display: inline-block; width: 100%; color: var(--gray); box-shadow: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: var(--gray); } .contact-form .form-control:-ms-input-placeholder { color: var(--gray); } .contact-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0px none; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 28. FOOTER =========================================================================== */ .footer { padding-bottom: 40px; } .footer-data-logo, .footer-data-socials { margin-bottom: 65px; } .footer-info, .footer-links { margin-bottom: 40px; } .footer-1 .fl-2, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 10%; } .footer-1 .fl-3, .footer-1 .fl-5, .footer-1 .footer-contacts { margin-bottom: 30px; } .footer-1 .fl-4 { margin-bottom: 30px; } /*------------------------------------------*/ /* FOOTER LINKS MOBILE /*------------------------------------------*/ .footer h6.m-title { display: none; position: relative; } .footer h6.m-title:after { font-family: Flaticon; font-weight: 300; content: "\f14f"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer h6.m-title.expanded:after { content: "\f14e"; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ img.footer-logo { width: auto; max-width: inherit; max-height: 32px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 35px; margin-bottom: 0; } .footer-copyright-logo { position: relative; display: inline-block; float: left; top: -4px; } .footer-copyright-logo img.footer-logo { max-height: 28px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .footer-qr-code { max-width: 100px; text-align: center; background: var(--snow); padding: 9px; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h6 { font-size: 1.0815rem; line-height: 1; margin-bottom: 26px; } .footer .footer-links h6.h6-lg { margin-bottom: 14px; } .footer a { color: var(--gray); } .footer.bg--black a { color: var(--snow); } .footer-contacts p { margin-bottom: 4px; } .footer-phone { margin-top: 12px; margin-bottom: 4px; } .footer .footer-links h6.h6-lg a { text-decoration: underline; } .footer.color--white a, .footer.color--white li a { color: var(--snow); } .footer.color--white a:hover, .footer.color--white li a:hover { color: var(--white)!important; } /*------------------------------------------*/ /* FOOTER MAIL LINK /*------------------------------------------*/ .footer-mail-link { margin: 10px 0 0 3px; } .footer-mail-link a { font-size: 1rem; font-weight: 400; } .footer-mail-link span { position: relative; top: 5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; } /*------------------------------------------*/ /* FOOTER INFO /*------------------------------------------*/ .footer-info-socials { margin-top: 5px; } .footer-info-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-info-socials li { padding-right: 14px; } .footer-2 .footer-info-socials li { padding-right: 10px; } .footer-info-socials li span { position: relative; opacity: .8; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; } .footer-info-socials li:hover span { opacity: 1; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .foo-links li { width: auto!important; display: block!important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .foo-links.ico-10 li span { position: relative; top: 1.5px; right: 4px; } .foo-links li p { font-weight: 400; margin-bottom: 10px; } .foo-links li:last-child p { margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER SOCIAL /*------------------------------------------*/ .footer-socials { margin: 0; display: inline-block; } .footer-socials li { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .footer-socials a { display: block; margin-right: 14px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 15px; } .footer-socials li span { opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-socials li span:hover { opacity: 1; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* FOOTER STORE BAGES /*------------------------------------------*/ .footer .store { float: none; margin-right: 0; margin-bottom: 15px; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form { margin-bottom: 20px; } .footer .newsletter-form { margin-top: 25px; } .footer-form .newsletter-form .input-group { background-color: var(--form-control); border: 1.5px solid var(--smoke); padding: 9px 2px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-form .form-control { height: 32px; background-color: transparent; border: none; color: var(--gray); font-size: 1rem; font-weight: 400; padding: 0 10px; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { background-color: var(--white)!important; } .footer-form .form-control:focus { border: none; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: var(--gray); } .footer-form .form-control:-ms-input-placeholder { color: var(--gray); } .footer-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { height: 32px; padding: 0 10px; border: none!important; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; } .footer-form .btn:hover { color: var(--black)!important; } .footer-form .btn:focus { border: none!important; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #1680fb; font-size: 0.85rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } .footer-form .form-notification.error { color: #fc2f4b; } .footer-form .form-notification.valid { color: #48af4b; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 40px; } .footer hr.footer-top-hr { margin-top: 0; margin-bottom: 100px; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .footer-copyright.copyright-logo p { display: inline-block; line-height: 28px; margin-left: 15px; } /*------------------------------------------*/ /* BOTTOM FOOTER SECONDARY LINK /*------------------------------------------*/ .bottom-secondary-link p { margin-bottom: 0; } .bottom-secondary-link p span { position: relative; top: 1.5px; padding: 0 2px; } .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .footer-data-socials li, .bottom-footer-list li, .bottom-footer-socials li, .bottom-footer-payment li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-data-socials li { padding-left: 11px; } .bottom-foo-socials li, .bottom-footer-socials li { padding-left: 12px; } .footer-data-socials p { position: relative; line-height: 1; top: 9px; margin-bottom: 0; } .footer-list-divider { position: relative; top: -0.5px; transform: rotate(-90deg); margin-left: 4px; } .bottom-footer-list.ico-15 [class*="flaticon-"]:before, .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .bottom-footer-list li p { display: inline-block; float: left; margin-bottom: 0; } .footer-data-socials li span, .bottom-footer-socials li span { position: relative; top: 4px; opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-data-socials li span:hover, .bottom-footer-socials li span:hover { opacity: 1; } .bottom-foo-socials li span { position: relative; top: 1px; right: 1px; opacity: .8; } .bottom-footer-payment li span { line-height: 1!important; position: relative; top: 4px; opacity: .8; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.2125rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } /* ========================================================================== 29. INNER PAGE WRAPPER =========================================================================== */ .inner-page-hero { padding-top: 190px; } .page-hero-section { position: relative; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; padding-top: 180px; padding-bottom: 100px; } /*------------------------------------------*/ /* INNER PAGE TITLE /*------------------------------------------*/ .inner-page-title { margin-bottom: 80px; } .inner-page-title h3, .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1; margin-top: 25px; margin-bottom: 0; } .inner-page-title p span { color: var(--black); font-weight: 600; } .page-hero-section p { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 30. PAGE PAGINATION =========================================================================== */ .page-link { color: var(--gray); font-size: 1.1rem; font-weight: 500; padding: 2px 14px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .page-item:last-child .page-link { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .page-item.disabled .page-link { color: var(--gray); background-color: transparent; border-color: transparent; } .page-link:hover { color: var(--gray); background-color: transparent; border-color: var(--gray); } .page-link:focus { color: var(--gray); background-color: transparent; border-color: transparent; box-shadow: 0 0; } .page-item.active .page-link { color: var(--white)!important; } .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); } .theme--indigo .page-item.active .page-link { background-color: var(--indigo); border-color: var(--indigo); } .theme--orchid .page-item.active .page-link { background-color: var(--orchid); border-color: var(--orchid); } .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); } .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); } .theme--red .page-item.active .page-link { background-color: var(--red); border-color: var(--red); } .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); } .theme--violet-red .page-item.active .page-link { background-color: var(--violet-red); border-color: var(--violet-red); } /* ========================================================================== 31. TERMS, PRIVACY, COOKIES PAGES =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .txt-block.legal-info h5 { margin: 50px 0 25px; } .txt-block.legal-info h6 { margin: 25px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 4px; } .legal-info p span { color: var(--black); font-weight: 700; } .legal-info a { font-weight: 700; text-decoration: underline; } .legal-info a:hover { color: var(--black); } /* ========================================================================== 32. SIGN-IN / SIGN-UP PAGE =========================================================================== */ .register-page { position: relative; width: 100%; min-height: 100vh; z-index: 3; background: url(../images/register-page.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .theme--dark .register-page { background: url(../images/register-page-dark.jpg); } /*------------------------------------------*/ /* REGISTER PAGE LOGO /*------------------------------------------*/ .register-page-logo { position: fixed; padding-top: 30px; } .register-page-logo img { width: auto; max-width: inherit; max-height: 28px; } /*------------------------------------------*/ /* REGISTER PAGE FORM /*------------------------------------------*/ .register-page-form { margin: 0 3%; padding: 140px 20px; } .reset-page-wrapper { padding: 180px 20px 140px; } /*------------------------------------------*/ /* REGISTER PAGE TITLE /*------------------------------------------*/ .register-form-title { text-align: center; margin-bottom: 30px; } .register-form-title p { font-size: 1.05rem; margin-top: 8px; margin-bottom: 0; } /*------------------------------------------*/ /* RESET PASSWORD PAGE TITLE /*------------------------------------------*/ .reset-form-title { text-align: center; margin-bottom: 22px; } .reset-form-title p.p-sm { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* REGISTER PAGE TYPOGRAPHY /*------------------------------------------*/ .reset-password-link p { position: relative; font-size: 0.85rem; line-height: 1; margin-bottom: 30px; } .reset-password-link p a { text-decoration: underline; } .form-data span { display: block; font-size: 0.825rem; margin-bottom: 0; } .reset-password-form .form-data p { margin-top: 22px; margin-bottom: 12px; } .form-data p a, .form-data span a { color: var(--header-color); font-weight: 500; text-decoration: underline; } .register-page-form p.create-account { font-size: 0.9rem; line-height: 1; margin-top: 24px; margin-bottom: 0; } .register-page-form p.create-account a { font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* REGISTER PAGE SEPARATOR LINE /*------------------------------------------*/ .separator-line { display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 500; margin: 25px 0; } .separator-line::before, .separator-line::after { content: ""; border-top: 1.5px solid rgba(5, 5, 5, .18); margin: 0 15px 0 0; flex: 1 0 20px; } .separator-line::after { margin: 0 0 0 15px; } /*------------------------------------------*/ /* REGISTER PAGE FORM INPUT /*------------------------------------------*/ .reset-page-wrapper .form-control, .register-page-form .form-control { height: 56px; background-color: var(--white); border: 1.5px solid #d2d2d2; color: var(--black); font-size: 0.935rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .register-page-form .form-control::-moz-placeholder { color: var(--gray); } .register-page-form .form-control:-ms-input-placeholder { color: var(--gray); } .register-page-form .form-control::-webkit-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* REGISTER PAGE FORM BUTTON /*------------------------------------------*/ #login .register-page-form .btn.submit, #signup .register-page-form .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; margin-top: 0; } #signup .register-page-form .btn.submit { margin-top: 25px; } .reset-page-wrapper .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; } .register-page-form .btn-google { width: 100%; color: var(--header-color); font-size: 0.975rem; padding: 0.75rem 1.6rem; background-color: var(--white); border: 1px solid var(--silver); } .btn-google img { position: relative; width: 25px; height: 25px; top: 0; right: 5px; } .btn-google span { position: relative; top: 1px; } .register-page-form .btn-google:hover { border: 1px solid var(--header-color); } /*------------------------------------------*/ /* REGISTER PAGE FORM MESSAGE /*------------------------------------------*/ .reset-form-msg { text-align: center; width: 100%!important; display: block; } .reset-password-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .reset-password-form .error { position: relative; color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; top: -10px; margin-bottom: 12px; padding-left: 10px; } /*------------------------------------------*/ /* FORM HIDE PASSWORD /*------------------------------------------*/ .wrap-input { position: relative; } .btn-show-pass { color: var(--light-gray); align-items: center; position: absolute; height: 100%; top: 15px; right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-show-pass.ico-20 [class^="flaticon-"]:before, .btn-show-pass.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } .btn-show-pass:hover { color: var(--theme-color); } .eye-pass.flaticon-invisible { color: var(--gray); } /* ========================================================================== 33. MODAL ========================================================================== */ .modal-body { padding: 0!important; } .modal-dialog.modal-xl { width: 760px; } .modal .modal-content { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .modal-body-content { padding: 60px 35px 35px; } .modal-body-content h4 { margin-bottom: 15px; } .modal-body-content p { margin-bottom: 0; } .modal .bg-img { background: url(../images/modal.jpg); background-repeat: no-repeat; background-position: left center; background-size: cover; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .btn-close { position: absolute; z-index: 1; right: 20px!important; top: 20px!important; height: 1.5rem; width: 1.5rem; background: rgba(14, 14, 14, .11)!important; border-radius: 50%; padding: 0; opacity: .9; z-index: 9999; } .modal .btn-close span { position: relative; line-height: 24px!important; top: -2px; } .modal .btn-close.ico-10 [class^="flaticon-"]:before, .modal .btn-close.ico-10 [class^="flaticon-"]:after { font-size: 0.6rem; } .modal .btn-close:focus { outline: none!important; box-shadow: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW NEWSLETTER FORM /*------------------------------------------*/ .modal-body .newsletter-form { margin-top: 25px; } .modal .newsletter-form .form-control { text-align: center; height: 58px; background-color: #f3f4f5; border: 1.5px solid transparent; font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-bottom: 20px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Form Input Focus /*------------------------------------------*/ .modal .newsletter-form .form-control:focus { outline: 0; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Form Input Placeholder /*------------------------------------------*/ .modal .newsletter-form .form-control::-moz-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Form Button /*------------------------------------------*/ .modal .input-group-btn { display: block; width: 100%!important; } .modal .newsletter-form .btn { display: block; width: 100%!important; height: 58px; font-size: 0.975rem; margin: 0; } /*------------------------------------------*/ /* Form Notification /*------------------------------------------*/ .modal .form-notification { text-align: center; color: #1680fb; font-size: 0.85rem; font-weight: 400; line-height: 1; margin-top: 12px; } .modal .form-notification.valid, .modal .form-notification.error { color: #fc2f4b; } .modal .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 34. COOKIES =========================================================================== */ #cookies { position: fixed; width: 90%; bottom: 25px; left: 5%; z-index: 200; padding: 25px; border: 1px solid #ddd; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); -moz-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); } #cookies p { color: #353f4f; font-size: 0.875rem; line-height: 1.5; margin: 0; } #cookies-ok { position: absolute; right: 52px; bottom: 18px; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 500; background-color: #353f4f!important; border: 2px solid #353f4f!important; padding: 6px 20px; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } #cookies-ok:hover { color: #353f4f!important; background-color: transparent!important; border-color: #353f4f!important; } #cookies-info { color: #353f4f!important; font-weight: 500; text-decoration: underline; margin-left: 10px; } .theme--blue #cookies-info:hover { color: var(--blue)!important; } .theme--green #cookies-info:hover { color: var(--green)!important; } .theme--indigo #cookies-info:hover { color: var(--indigo)!important; } .theme--orchid #cookies-info:hover { color: var(--orchid)!important; } .theme--pink #cookies-info:hover { color: var(--pink)!important; } .theme--purple #cookies-info:hover { color: var(--purple)!important; } .theme--red #cookies-info:hover { color: var(--red)!important; } .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; } .theme--violet-red #cookies-info:hover { color: var(--violet-red)!important; } #cookies-close { position: absolute; right: 25px; top: 20px; height: 12px; width: 12px; } #cookies-close svg { width: 11px; height: 11px; } /* ========================================================================== 35. COLOR SCHEME ========================================================================== */ :root { --theme-color: #ce67c9; --theme-color-secondary: #ce67c9; } .bg--theme { background-color: var(--theme-color); } .bg--theme-2 { background-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* BUTTON /*------------------------------------------*/ .btn--theme, .hover--theme:hover, .theme--dark .btn--theme, .theme--dark .hover--theme:hover, .color--white .hover--theme:hover, .scroll .hover--theme:hover, .theme--dark .color--white .hover--theme:hover, .theme--dark .scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme, .theme--dark .btn--tra-theme, .theme--dark .hover--tra-theme:hover, .theme--dark .color--white .btn--tra-theme { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } .btn--theme-2, .hover--theme-2:hover, .theme--dark .btn--theme-2, .theme--dark .hover--theme-2:hover, .color--white .hover--theme-2:hover, .scroll .hover--theme-2:hover, .theme--dark .color--white .hover--theme-2:hover, .theme--dark .scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .btn--tra-theme-2, .hover--tra-theme-2:hover, .color--white .btn--tra-theme-2, .theme--dark .btn--tra-theme-2, .theme--dark .hover--tra-theme-2:hover, .theme--dark .color--white .btn--tra-theme-2 { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } /*------------------------------------------*/ /* COLOR /*------------------------------------------*/ .color--theme, .color--theme a, .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); } .color--theme-2, .color--theme-2 a, .color--theme-2 :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico.color--theme path, .shape-ico.color--theme-2 path { fill: rgba(218, 112, 214, .1); } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .loading--theme .cssload-spinner:after, .loading--theme .cssload-spinner:before { border-color: var(--theme-color); } /*------------------------------------------*/ /* HEADER & NAVIGATION /*------------------------------------------*/ .nav-theme .sm-info { background-color: var(--theme-color); } .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .cbox-1:hover .cbox-1-ico.bg--theme { color: var(--theme-color); border-color: var(--theme-color); } .cbox-1:hover .cbox-1-ico.bg--theme-2 { color: var(--theme-color-secondary); border-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .p-table.theme--border { border: 3px solid var(--theme-color); } .pricing-features.ico--theme span { color: var(--theme-color); } .pricing-features.ico--theme-2 span { color: var(--theme-color-secondary); } .switcher { background-color: var(--theme-color); } .comp-table .color--theme { color: var(--theme-color); } .comp-table .color--theme-2 { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .newsletter-section .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { border-color: var(--theme-color)!important; } .footer-form .btn { color: var(--theme-color); } /*------------------------------------------*/ /* PAGINATION /*------------------------------------------*/ .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .reset-password-link p a:hover, .reset-password-form .form-data p a:hover { color: var(--theme-color); } .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { border-color: var(--theme-color); } .modal .newsletter-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* COOKIES /*------------------------------------------*/ #cookies-ok { background-color: var(--theme-color)!important; border: 2px solid var(--theme-color)!important; } #cookies-info:hover { color: var(--theme-color)!important; } /*------------------------------------------*/ /* DARK MODE /*------------------------------------------*/ .theme--dark .shape-ico.color--theme path, .theme--dark .shape-ico.color--theme-2 path { fill: rgba(43, 48, 64, .5); } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { border-color: var(--theme-color)!important; } /* ========================================================================== 36. DARK MODE ========================================================================== */ body.theme--dark { --dark-theme-bg: #13161f; --black: #f9f9f9; --gray: #c8c8c8; --ink: #101219; --form-control: #191c28; --header-color: #fff; --header-link: #dee1ea; --silver: rgba(43, 48, 64, 1); --smoke: rgba(43, 48, 64, .7); --white-smoke: #191c28; } body.theme--dark { background-color: var(--dark-theme-bg); color: var(--gray); } .theme--dark .bg--white, .theme--dark .bg--coal, .theme--dark .bg--lavender, .theme--dark .bg--magnolia, .theme--dark .bg--aliceblue, .theme--dark .bg--tra-violet-red { background-color: var(--white-smoke); } .theme--dark .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .theme--dark .bg--03 { background-image: url(../images/bg-03d.jpg); } .theme--dark .bg--05 { background-image: url(../images/bg-05d.jpg); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ .theme--dark hr.divider, .theme--dark .footer hr { background-image: linear-gradient(90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); } .theme--dark hr.divider.divider-light { background-color: #fff; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%); opacity: 1; } /*------------------------------------------*/ /* TYPOGRAPHY /*------------------------------------------*/ .theme--dark a { color: var(--gray); } .theme--dark a:hover, .theme--dark a.tra-link:hover span { color: var(--white); } /*------------------------------------------*/ /* BUTTONS /*------------------------------------------*/ .theme--dark .btn--transparent { color: var(--white)!important; } /* WHITE BUTTON */ .theme--dark .btn--white, .theme--dark .hover--white:hover, .theme--dark .color--white .hover--white:hover { color: #333!important; background-color: var(--white)!important; border-color: var(--white)!important; } /* BLACK BUTTON */ .theme--dark .btn--black, .theme--dark .hover--black:hover, .theme--dark .color--white .hover--black:hover { color: var(--ink)!important; border-color: var(--black)!important; background-color: var(--black)!important; } .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .color--white .btn--tra-black { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /* BLUE BUTTON */ .theme--dark .btn--blue, .theme--dark .hover--blue:hover, .theme--dark .color--white .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .btn--tra-blue, .theme--dark .hover--tra-blue:hover, .theme--dark .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /* GREEN BUTTON */ .theme--dark .btn--green, .theme--dark .hover--green:hover, .theme--dark .color--white .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .btn--tra-green, .theme--dark .hover--tra-green:hover, .theme--dark .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /* INDIGO BUTTON */ .theme--dark .btn--indigo, .theme--dark .hover--indigo:hover, .theme--dark .color--white .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .btn--tra-indigo, .theme--dark .hover--tra-indigo:hover, .theme--dark .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /* ORCHID BUTTON */ .theme--dark .btn--orchid, .theme--dark .hover--orchid:hover, .theme--dark .color--white .hover--orchid:hover, .theme--dark .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .btn--tra-orchid, .theme--dark .hover--tra-orchid:hover, .theme--dark .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /* PINK BUTTON */ .theme--dark .btn--pink, .theme--dark .hover--pink:hover, .theme--dark .color--white .hover--pink:hover, .theme--dark .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .btn--tra-pink, .theme--dark .hover--tra-pink:hover, .theme--dark .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /* PURPLE BUTTON */ .theme--dark .btn--purple, .theme--dark .hover--purple:hover, .theme--dark .color--white .hover--purple:hover, .theme--dark .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .btn--tra-purple, .theme--dark .hover--tra-purple:hover, .theme--dark .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /* RED BUTTON */ .theme--dark .btn--red, .theme--dark .hover--red:hover, .theme--dark .color--white .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .btn--tra-red, .theme--dark .hover--tra-red:hover, .theme--dark .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /* SKYBLUE BUTTON */ .theme--dark .btn--skyblue, .theme--dark .hover--skyblue:hover, .theme--dark .color--white .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .btn--tra-skyblue, .theme--dark .hover--tra-skyblue:hover, .theme--dark .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /* VIOLET RED BUTTON */ .theme--dark .btn--violet-red, .theme--dark .hover--violet-red:hover, .theme--dark .color--white .hover--violet-red:hover, .theme--dark .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .btn--tra-violet-red, .theme--dark .hover--tra-violet-red:hover, .theme--dark .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /* YELLOW BUTTON */ .theme--dark .btn--yellow, .theme--dark .hover--yellow:hover, .theme--dark .color--white .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .theme--dark .shape-ico.color--blue path, .theme--dark .shape-ico.color--indigo path, .theme--dark .shape-ico.color--skyblue path, .theme--dark .shape-ico.color--lilac path, .theme--dark .shape-ico.color--orchid path, .theme--dark .shape-ico.color--pink path, .theme--dark .shape-ico.color--purple path, .theme--dark .shape-ico.color--violet-red path { fill: rgba(43, 48, 64, .5); } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .theme--dark .dark-menu .wsmainfull, .theme--dark .white-menu .wsmainfull { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a { color: var(--header-link); } .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover { color: #eee!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover { color: var(--white)!important; } /*------------------------------------------*/ /* HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--white-smoke)!important; border: solid 1px var(--smoke)!important; -webkit-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); -moz-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); box-shadow: 0 2px 3px rgba(1, 1, 1, .1); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before, .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before { background-color: var(--ink); border-left: solid var(--ink); border-top: solid 1px var(--ink); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); background-color: transparent!important; } .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .theme--dark .tra-menu .wsmainfull.scroll, .theme--dark .white-menu .wsmainfull.scroll, .theme--dark .dark-menu.dark-scroll .wsmainfull.scroll { background-color: var(--ink)!important; padding: 0; -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-link); } .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(44, 49, 66, .72)!important; color: var(--white); } .theme--dark .navbar-light .scroll .btn.btn--tra-white { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .wsmainfull .hover--black:hover { color: var(--white)!important; border-color: #353f4f!important; background-color: #353f4f!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--black:hover { color: var(--ink)!important; border-color: var(--white)!important; background-color: var(--white)!important; } .theme--dark .navbar-light .scroll .wsmenu > .wsmenu-list > li > a.btn.hover--black:hover { color: var(--ink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--indigo:hover { color: var(--white)!important; border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .white-scroll .wsmainfull .hover--tra-white:hover, .theme--dark .white-scroll .wsmainfull.scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-white { display: block; } .theme--dark .navbar-dark .logo-white { display: none; } /*------------------------------------------*/ /* CAREERS /*------------------------------------------*/ .theme--dark .jobs-category { background-color: #181b27; border-color: var(--silver); } /*------------------------------------------*/ /* FEATURES /*------------------------------------------*/ .theme--dark .fbox-5.bg--white { background-color: #181a27; border-color: var(--silver); } .theme--dark .fbox-3.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .theme--dark .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } .theme--dark .bc-04-wrapper { border-color: var(--silver); } /*------------------------------------------*/ /* TEAM /*------------------------------------------*/ .theme--dark .team-member { background-color: var(--white-smoke); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .theme--dark .p-table { border-color: var(--silver); } .theme--dark .pricing-discount h6 { color: #353f4f; } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .theme--dark .int_tool-1 .tool_logo.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* RATING /*------------------------------------------*/ .theme--dark .rbox-1 .star-rating { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .rbox-3 p span { color: #fff; } /*------------------------------------------*/ /* REVIEWS /*------------------------------------------*/ .theme--dark .reviews-3-wrapper:after { background-color: #181a27; } .theme--dark .review-1 { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .owl-theme .owl-dots .owl-dot span { background: #3a3a3a; } .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: var(--white); } /*------------------------------------------*/ /* DOWNLOAD /*------------------------------------------*/ .theme--dark .download-item { border-color: var(--silver); } /*------------------------------------------*/ /* FAQs /*------------------------------------------*/ .theme--dark .accordion-panel { color: var(--gray); } .theme--dark .faqs-section .accordion-item .accordion-thumb:after, .theme--dark .faqs-section .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } /*------------------------------------------*/ /* BANNER /*------------------------------------------*/ .theme--dark .os-link { border-color: var(--silver); } .theme--dark .os-qr-code { background-color: #fff; } .theme--dark .os-logo img { filter: invert(100%); opacity: .4; } .theme--dark .banner-qr-code p { color: var(--ink); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .theme--dark .newsletter-section .form-control::-moz-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: var(--gray); } .theme--dark .newsletter-1.newsletter-section .form-control, .theme--dark .newsletter-3.newsletter-section .form-control { background-color: var(--white-smoke); } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { background-color: var(--dark-theme-bg); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .theme--dark .contact-form .form-control, .theme--dark .contact-form .form-select { background-color: var(--white-smoke); border: 1.5px solid var(--silver); } .theme--dark .contact-form .form-control:focus, .theme--dark .contact-form .form-select:focus { background-color: var(--dark-theme-bg); border: 1.5px solid var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .theme--dark .footer-form .newsletter-form .input-group:focus-within { background-color: var(--dark-theme-bg)!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* INNER PAGE WRAPPER /*------------------------------------------*/ .theme--dark .inner-page-title p span { color: var(--white); } /*------------------------------------------*/ /* TERMS, PRIVACY, COOKIES PAGES /*------------------------------------------*/ .theme--dark .legal-info a, .theme--dark .legal-info p span { color: rgba(255, 255, 255, .86); } .theme--dark .legal-info a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .modal-body-content h4 { color: #313435; } .theme--dark .modal-body-content p { color: #6c757d; } .theme--dark .newsletter-form .hover--black:hover { color: #fff!important; border-color: #353f4f!important; background-color: #353f4f!important; } /*------------------------------------------*/ /* SIGN-IN / SIGN-UP PAGE /*------------------------------------------*/ .theme--dark .separator-line::before, .theme--dark .separator-line::after { border-top: 1.5px solid rgba(255, 255, 255, .18); } .theme--dark .reset-page-wrapper .form-control, .theme--dark .register-page-form .form-control { background-color: #2c3344; border: 1px solid #2c3344; } .theme--dark .reset-page-wrapper .form-control:focus, .theme--dark .register-page-form .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--theme-color); } .theme--dark .register-page-form .btn-google { color: var(--header-color); background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .register-page-form .btn-google:hover { border-color: var(--header-color); } /* Template Name: Pintex - Mobile App & Software Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Pintex - Mobile App Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: https://www.jthemes.com/ Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App */ /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ :root { --alice-blue: #f1f3ff; --black: #353f4f; --blue: #0083ff; --coal: #111b21; --disable: #b5b5b5; --form-control: #fafafd; --gray: #545465; --green: #0fbc49; --header-color: #120036; --indigo: #7b5dd6; --ink: #1d222f; --lavender: #f8f5fd; --light-blue: #edf8fd; --light-gray: #90a0b2; --lilac: #beaedb; --magnolia: #f9f7fd; --metal: #2c3840; --noice: #f8f9fa; --orchid: #ce67c9; --pink: #fc5a8d; --purple: #9370db; --silver: #ccc; --sky-blue: #04aaff; --smoke: #e7e7e7; --snow: #f5f6f6; --violet-red: #c73e9b; --white: #fff; --white-smoke: #f4f4f9; --yellow: #ffbf15; --tra-black: rgba(5, 5, 5, .05); --tra-gray: rgba(96, 96, 96, .13); --tra-indigo: rgba(128, 96, 225, .13); --tra-ink: rgba(1, 1, 1, .1); --tra-purple: rgba(102, 51, 255, .13); --tra-white: rgba(255, 255, 255, .2); --tra-violet-red: rgba(237, 230, 244, .84); --tra-white-smoke: rgba(244, 244, 249, .13); } html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--gray); line-height: 1.6666; font-weight: 400; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block--shadow { -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } .img-block .block--shadow { -webkit-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); -moz-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); } /*------------------------------------------*/ /* BORDER SETTINGS /*------------------------------------------*/ .block--border { border: 1px solid var(--silver); } .block--border.border--light, .block--border.block--shadow { border: 1px solid var(--smoke); } .x-border { border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); } .x-border.border--light { border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); } .t-border { border-top: 1px solid var(--silver); } .t-border.border--light { border-top: 1px solid var(--smoke); } .b-border { border-bottom: 1px solid var(--silver); } .b-border.border--light { border-bottom: 1px solid var(--smoke); } /*------------------------------------------*/ /* BORDER RADIUS SETTING /*------------------------------------------*/ .r-0 { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .r-02 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .r-04 { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .r-06 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .r-08 { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .r-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .r-12 { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } .r-14 { -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; } .r-16 { -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .r-18 { -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; } .r-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .r-22 { -webkit-border-radius: 22px; -moz-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; } .r-24 { -webkit-border-radius: 24px; -moz-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; } .r-26 { -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; border-radius: 26px; } .r-28 { -webkit-border-radius: 28px; -moz-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; } .r-30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } .r-32 { -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; border-radius: 32px; } .r-34 { -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; } .r-36 { -webkit-border-radius: 36px; -moz-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; } .r-100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .py-90 { padding-top: 90px; padding-bottom: 90px; } .py-100 { padding-top: 100px; padding-bottom: 100px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .px-15 { padding-left: 15x; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-20 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .mt-0 { margin-top: 0!important; } .mt-15 { margin-top: 15x; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-0 { margin-bottom: 0!important; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--aliceblue { background-color: var(--alice-blue); } .bg--black { background-color: var(--black); } .bg--blue { background-color: var(--blue); } .bg--coal { background-color: var(--coal); } .bg--indigo { background-color: var(--indigo); } .bg--lavender { background-color: var(--lavender); } .bg--lightblue { background-color: var(--light-blue); } .bg--lilac { background-color: var(--lilac); } .bg--magnolia { background-color: var(--magnolia); } .bg--noice { background-color: var(--noice); } .bg--orchid { background-color: var(--orchid); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--red { background-color: var(--red); } .bg--skyblue { background-color: var(--sky-blue); } .bg--snow { background-color: var(--snow); } .bg--violet-red { background-color: var(--violet-red); } .bg--white { background-color: var(--white); } .bg--whitesmoke { background-color: var(--white-smoke); } .bg--yellow { background-color: var(--yellow); } /*------------------------------------------*/ /* TRANSPARENT BACKGROUND COLORS /*------------------------------------------*/ .bg--tra-indigo { background-color: var(--tra-indigo); } .bg--tra-purple { background-color: var(--tra-purple); } .bg--tra-violet-red { background-color: var(--tra-violet-red); } /*------------------------------------------*/ /* GRADIENT COLOR BACKGROUND /*------------------------------------------*/ .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%); } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .shape--01:after, .shape--02:after { position: absolute; content: ''; width: 100%; height: 55%; left: 0; z-index: -1; } .shape--01:after { top: 0; } .shape--02:after { top: 45%; } .shape--whitesmoke:after { background-color: var(--white-smoke); } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06, .bg--07 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../images/bg-01.jpg); } .bg--02 { background-image: url(../images/bg-02.jpg); } .bg--03 { background-image: url(../images/bg-03.jpg); } .bg--04 { background-image: url(../images/bg-04.jpg); } .bg--05 { background-image: url(../images/bg-05.jpg); } .bg--06 { background-image: url(../images/bg-06.jpg); } .bg--07 { background-image: url(../images/bg-07.jpg); } /*------------------------------------------*/ /* BACKGROUND PATTERN /*------------------------------------------*/ .pattern--01, .pattern--02, .pattern--03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .pattern--01 { background-image: url(../images/pattern-01.png); } .pattern--02 { background-image: url(../images/pattern-02.png); } .pattern--03 { background-image: url(../images/pattern-03.png); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ hr.divider { width: 100%; height: 1px; background-color: transparent; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%); opacity: .4; border: none; margin: 0; } /*------------------------------------------*/ /* WAVE SHAPE BOTTOM /*------------------------------------------*/ .wave-shape-bottom { position: absolute; bottom: 0; left: 0; width: 100%; } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h6, h5, h4, h3, h2, h1 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-weight: 700; letter-spacing: 0; margin-bottom: 0; } /*------------------------------------------*/ /* HEADER SIZE /*------------------------------------------*/ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.25rem; } /* 20px */ h6.h6-xl { font-size: 1.3125rem; } /* 21px */ h5 { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h5.h5-xl { font-size: 1.75rem; } /* 28px */ h4 { font-size: 1.875rem; } /* 30px */ h4.h4-md { font-size: 2rem; } /* 32px */ h4.h4-lg { font-size: 2.125rem; } /* 34px */ h4.h4-xl { font-size: 2.25rem; } /* 36px */ h3 { font-size: 2.375rem; } /* 38px */ h3.h3-md { font-size: 2.5rem; } /* 40px */ h3.h3-lg { font-size: 2.6255rem; } /* 42px */ h3.h3-xl { font-size: 2.75rem; } /* 44px */ h2 { font-size: 2.875rem; } /* 46px */ h2.h2-md { font-size: 3rem; } /* 48px */ h2.h2-lg { font-size: 3.125rem; } /* 50px */ h2.h2-xl { font-size: 3.25rem; } /* 52px */ h2.h2-title { font-size: 3.375rem; } /* 54px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 0.9375rem; } /* 15px */ p { font-size: 1rem; } /* 16px */ p.p-md { font-size: 1.0625rem; } /* 17px */ p.p-lg { font-size: 1.125rem; } /* 18px */ p.p-xl { font-size: 1.1875rem; } /* 19px */ /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: var(--header-color); text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: var(--header-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a.tra-link { font-size: 1rem; line-height: 1; font-weight: 600; } a.tra-link span { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.75rem; line-height: 0.7rem!important; top: 1.5px; left: 1px; } a.tra-link:hover span { color: var(--black)!important; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ol.digit-list p, ul.simple-list.long-list p { margin-bottom: 8px; } .content-section ul.simple-list.long-list p { margin-bottom: 5px; } /*------------------------------------------*/ /* DIGIT LIST /*------------------------------------------*/ ol.digit-list { padding: 0; margin-left: 15px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { font-size: 1rem; line-height: 1; font-weight: 600; background-color: transparent; padding: 0.9rem 1.8rem; border: 2px solid transparent; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .btn.btn-sm { font-size: 0.975rem; padding: 0.7rem 1.5rem; } .btn.btn-md { font-size: 1rem; padding: 0.9425rem 1.75rem; } .btn.btn-lg { font-size: 1.05rem; padding: 1.1rem 1.8rem; } .btn.ico-20.ico-left, .btn.ico-20.ico-right { padding: 0.9rem 1.55rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.1rem; letter-spacing: -0.35px; padding: 0.9rem 1.35rem; } .btn.ico-30.ico-left, .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Buttons Group /*------------------------------------------*/ .text-center .btns-group { display: inline-block; } .btns-group .btn:first-child { margin-right: 15px; } .btns-group .btn.ico-30.ico-left { padding: 0.37rem 0.5rem; } .btns-group .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Button Icon /*------------------------------------------*/ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1rem; line-height: 0.7rem!important; top: 4px; } .btn.ico-25 [class*="flaticon-"]:before, .btn.ico-25 [class*="flaticon-"]:after { position: relative; font-size: 1.275rem; line-height: 1rem!important; top: 1px; } .btn.ico-25.ios-btn [class*="flaticon-"]:before, .btn.ico-25.ios-btn [class*="flaticon-"]:after { top: 0; } .ico-25-txt { position: relative; top: -3px; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { position: relative; top: 0; right: 4px; } .btn.ico-30.ico-right span { position: relative; top: 0; left: 4px; } .btn.ico-30.ico-left span.ico-30-txt, .btn.ico-30.ico-right span.ico-30-txt { position: relative; top: -10px; right: 0; } .btn.ico-30.ico-right span.ico-30-txt { left: 0; } /*------------------------------------------*/ /* Button Text /*------------------------------------------*/ p.btn-txt { margin: 15px 0 0 0; } p.btn-txt span { font-weight: 700; } .btn-rating p.btn-txt { margin: 0; } .star-rating small, .star-rating span.rating-txt { font-size: 0.9375rem; } p.btns-group-txt { margin: 14px 0 0 0; } .btn-rating { margin-top: 10px; } .text-center p.btns-group-txt { margin-top: 20px; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding-left: 5px; } .text-center p.btn-txt.ico-15, .text-center p.btns-group-txt.ico-15 { padding-left: 0; } p.btn-txt span, p.btns-group-txt span { position: relative; top: 0.5px; right: 2px; } p.btns-group-txt span.txt-data { display: block; top: 0; right: 0; } p.btns-group-txt span.txt-data a { margin-left: 4px; text-decoration: underline; } p.btns-group-txt span.txt-data a:hover { text-decoration: none; } .hero-section .color--white p.btns-group-txt span.txt-data a:hover { color: var(--white)!important; } .btn-txt.ico-15 [class*="flaticon-"]:before, .btn-txt.ico-15 [class*="flaticon-"]:after, .btns-group-txt.ico-15 [class*="flaticon-"]:before, .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .star-rating.ico-10 [class*="flaticon-"]:before, .star-rating.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; top: 1px; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; } .p-sm.btn-txt.ico-20 [class*="flaticon-"]:before, .p-sm.btn-txt.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.875rem; top: 1px; } .os-version-ext { margin-top: 16px; } .os-version-ext .star-rating small { font-size: 0.9rem; margin-left: 6px; } span.os-version { display: block; font-size: 0.9rem; line-height: 1; margin-top: 5px; } /*------------------------------------------*/ /* TRANPARENT BUTTON /*------------------------------------------*/ .btn--transparent { color: var(--black)!important; background-color: transparent!important; border-color: transparent!important; } .btn--transparent.color--white { color: var(--white)!important; } .btn--transparent:hover { background-color: transparent!important; border-color: transparent!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover, .color--white .hover--white:hover { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .white-scroll .scroll .hover--tra-white:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } .white-scroll .scroll .hover--white:hover { color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover, .white-scroll .scroll .hover--black:hover { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .btn--tra-black, .hover--tra-black:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* TRA GRAY BUTTON /*------------------------------------------*/ .btn--tra-gray, .hover--tra-gray:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* BLUE BUTTON /*------------------------------------------*/ .btn--blue, .hover--blue:hover, .color--white .hover--blue:hover, .white-scroll .scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /*------------------------------------------*/ /* GREEN BUTTON /*------------------------------------------*/ .btn--green, .hover--green:hover, .color--white .hover--green:hover, .white-scroll .scroll .hover--green:hover { color: var(--white)!important;border-color: var(--green)!important; background-color: var(--green)!important; } .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /*------------------------------------------*/ /* INDIGO BUTTON /*------------------------------------------*/ .btn--indigo, .hover--indigo:hover, .color--white .hover--indigo:hover, .white-scroll .scroll .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .btn--tra-indigo, .hover--tra-indigo:hover, .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /*------------------------------------------*/ /* ORCHID BUTTON /*------------------------------------------*/ .btn--orchid, .hover--orchid:hover, .color--white .hover--orchid:hover, .white-scroll .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .btn--tra-orchid, .hover--tra-orchid:hover, .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /*------------------------------------------*/ /* PINK BUTTON /*------------------------------------------*/ .btn--pink, .hover--pink:hover, .color--white .hover--pink:hover, .white-scroll .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /*------------------------------------------*/ /* PURPLE BUTTON /*------------------------------------------*/ .btn--purple, .hover--purple:hover, .color--white .hover--purple:hover, .white-scroll .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /*------------------------------------------*/ /* RED BUTTON /*------------------------------------------*/ .btn--red, .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover { color: var(--white)!important;border-color: var(--red)!important; background-color: var(--red)!important; } .btn--tra-red, .hover--tra-red:hover, .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /*------------------------------------------*/ /* SKY BLUE BUTTON /*------------------------------------------*/ .btn--skyblue, .hover--skyblue:hover, .color--white .hover--skyblue:hover, .white-scroll .scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /*------------------------------------------*/ /* VIOLET RED BUTTON /*------------------------------------------*/ .btn--violet-red, .hover--violet-red:hover, .color--white .hover--violet-red:hover, .white-scroll .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .btn--tra-violet-red, .hover--tra-violet-red:hover, .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /*------------------------------------------*/ /* YELLOW BUTTON /*------------------------------------------*/ .btn--yellow, .hover--yellow:hover, .color--white .hover--yellow:hover, .white-scroll .scroll .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: var(--white); -webkit-box-shadow: none; box-shadow: none; } .btn--transparent:focus { background-color: transparent; border-color: transparent; } .btn--tra-black:focus, .btn--transparent:focus, .btn.btn--tra-gray:focus { color: var(--black); -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BADGE ICONS /*------------------------------------------*/ .stores-badge { display: inline-block; } .store { display: inline-block; text-align: center; margin-right: 12px; } .store:last-child { margin-right: 0; } .store img { width: auto; max-width: inherit; } .badge-img-xs .store img { max-height: 2.5rem; } .badge-img-sm .store img { max-height: 2.625rem; } .badge-img-md .store img { max-height: 2.875rem; } .badge-img-lg .store img { max-height: 3rem; } .badge-img-xl .store img { max-height: 3.25rem; } /*------------------------------------------*/ /* WATCH VIDEO LINK /*------------------------------------------*/ .watch-video { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; margin-top: 25px; } .btns-group .watch-video { display: inline-block; margin-top: 0!important; top: 22px; } /*------------------------------------------*/ /* Link Icon /*------------------------------------------*/ .watch-video-link { position: relative; text-align: center; float: left; width: 2.85rem; height: 2.85rem; color: var(--white); border: none; margin-right: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .watch-video-link:before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; bottom: -3px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .watch-video-link:hover:before { opacity: .75; left: -8px; right: -8px; top: -8px; bottom: -8px; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { font-size: 2rem; line-height: 2.85rem!important; margin-left: 5px; } /*------------------------------------------*/ /* Link Text /*------------------------------------------*/ .watch-video-txt { overflow: hidden; flex: 1; max-width: 100%; text-align: left!important; } p.video-txt-lg { font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 5px; } p.video-txt-sm { font-size: 0.925rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: var(--white); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn-xl { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .video-btn-lg { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-sm { width: 4.375rem; height: 4.375rem; margin-top: -2.1875rem; margin-left: -2.1875rem; } .video-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-sm [class^="flaticon-"]:after { font-size: 3.5rem; line-height: 4.375rem!important; margin-left: 5px; } .video-btn:hover .video-block-wrapper { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-lg:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } .video-btn.video-btn-md:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .video-btn.video-btn-sm:hover:before { opacity: .75; left: -0.75rem; right: -0.75rem; top: -0.75rem; bottom: -0.75rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } /* 12px */ .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } /* 15px */ .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } /* 20px */ .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } /* 25px */ .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } /* 30px */ .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } /* 35px */ .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } /* 40px */ .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } /* 45px */ .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } /* 50px */ .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } /* 55px */ .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } /* 60px */ .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } /* 65px */ .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } /* 70px */ .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } /* 75px */ .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } /* 80px */ .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } /* 85px */ .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } /* 90px */ .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } /* 95px */ .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } /* 100px */ .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } /* 105px */ .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } /* 110px */ .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } /* 115px */ .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } /* 120px */ .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /* 125px */ /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-55 .shape-ico svg { width: 125px; height: 125px; top: -42px; left: calc(50% - 66px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -48px; left: calc(50% - 75px); } .shape-ico.color--blue path { fill: #f4f9fc; } .shape-ico.color--indigo path { fill: #f6f4fd; } .shape-ico.color--orchid path { fill: rgba(218, 112, 214, .1); } .shape-ico.color--pink path { fill: rgba(252, 234, 239, .7); } .shape-ico.color--purple path { fill: #f6f4fd; } .shape-ico.color--skyblue path { fill: rgba(4, 170, 255, .09); } .shape-ico.color--violet-red path { fill: rgba(199, 62, 155, .08); } /*------------------------------------------*/ /* PNG ICONS SETTINGS /*------------------------------------------*/ .img-20 img { width: 20px; height: 20px; } .img-25 img { width: 25px; height: 25px; } .img-30 img { width: 30px; height: 30px; } .img-35 img { width: 35px; height: 35px; } .img-40 img { width: 40px; height: 40px; } .img-45 img { width: 45px; height: 45px; } .img-50 img { width: 50px; height: 50px; } .img-55 img { width: 55px; height: 55px; } .img-60 img { width: 60px; height: 60px; } .img-65 img { width: 65px; height: 65px; } .img-70 img { width: 70px; height: 70px; } .img-75 img { width: 75px; height: 75px; } .img-80 img { width: 80px; height: 80px; } .img-85 img { width: 85px; height: 85px; } .img-90 img { width: 90px; height: 90px; } .img-95 img { width: 95px; height: 95px; } .img-100 img { width: 100px; height: 100px; } .img-105 img { width: 105px; height: 105px; } .img-110 img { width: 110px; height: 110px; } .img-115 img { width: 115px; height: 115px; } .img-120 img { width: 120px; height: 120px; } .img-125 img { width: 125px; height: 125px; } .img-130 img { width: 130px; height: 130px; } .img-135 img { width: 135px; height: 135px; } .img-140 img { width: 140px; height: 140px; } .img-145 img { width: 145px; height: 145px; } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .5); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* SECTION ID /*------------------------------------------*/ .section-id { display: block; font-size: 0.85rem; line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 32px; } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title p { margin-top: 22px; margin-bottom: 0; } .section-title .btns-group { margin-top: 35px; } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages, .text-center .advantages { margin-top: 15px; } .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; } .advantages-links-divider { position: relative; top: 1px; transform: rotate(-90deg); } .advantages li p { display: inline-block; float: left; margin-bottom: 0; } .advantages.ico-15 li p span { position: relative; top: 2px; right: -1px; } .advantages.ico-15 [class*="flaticon-"]:before, .advantages.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .advantages li p a { font-weight: 400; text-decoration: underline; } .advantages li p a:hover { text-decoration: underline; } .white--color .advantages li p a:hover { color: var(--white); } /*------------------------------------------*/ /* COMPATABILITY /*------------------------------------------*/ .compatibility { display: inline-block; padding: 3px 20px; margin-top: 15px; margin-bottom: 0; } .compatibility span { position: relative; top: -1.5px; right: 2px; } .compatibility.ico-10 [class*="flaticon-"]:before, .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; } /*------------------------------------------*/ /* TOOLS LIST / PAYMENT METHODS /*------------------------------------------*/ .tools-list, .payment-methods { margin-top: 25px; } .tools-list p, .payment-methods p { font-weight: 400; margin-bottom: 12px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-right: 6px; } /*------------------------------------------*/ /* Payment Icons /*------------------------------------------*/ .payment-icons li { display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; padding-right: 5px; } .payment-icons li:last-child { padding-right: 0; } .payment-icons img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: var(--gray); border-left: 3px solid var(--green); font-style: italic; padding-left: 20px; margin-bottom: 16px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* Quote Author /*------------------------------------------*/ .quote-author { position: relative; display: inline-block; padding: 0 0 0 15px; text-align: left; top: 16px; } .quote-author h6 { margin-bottom: 1px; } .quote-author span { font-size: 0.95rem; } /*------------------------------------------*/ /* USER AVATARS /*------------------------------------------*/ .txt-block .users { margin-top: 22px; } .users img { width: auto; max-width: inherit; max-height: 50px; } .users p { font-size: 0.935rem; position: relative; top: 13px; left: 10px; display: inline-block; line-height: 1.4; margin-bottom: 0; } .users p span { display: block; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--white, .color--white a, .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white); } .color--black, .color--black a, .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); } .color--header, .color--header a, .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); } .color--gray, .color--gray a, .color--gray :is(h1, h2, h3, h4, h5, h6) { color: var(--gray); } .color--lightgray, .color--lightgray a, .color--lightgray :is(h1, h2, h3, h4, h5, h6) { color: var(--light-gray); } .color--blue, .color--blue a, .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); } .color--green, .color--green a, .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); } .color--indigo, .color--indigo a, .color--indigo :is(h1, h2, h3, h4, h5, h6) { color: var(--indigo); } .color--lilac, .color--lilac a, .color--lilac :is(h1, h2, h3, h4, h5, h6) { color: var(--lilac); } .color--orchid, .color--orchid a, .color--orchid :is(h1, h2, h3, h4, h5, h6) { color: var(--orchid); } .color--pink, .color--pink a, .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); } .color--purple, .color--purple a, .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); } .color--red, .color--red a, .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); } .color--skyblue, .color--skyblue a, .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); } .color--violet-red, .color--violet-red a, .color--violet-red :is(h1, h2, h3, h4, h5, h6) { color: var(--violet-red); } .color--yellow, .color--yellow a, .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-upcase { text-transform: uppercase } .w-200 { font-weight: 200; } .w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .w-800 { font-weight: 800; } .w-900 { font-weight: 900; } /*------------------------------------------*/ /* TEXT HIGHLIGHT /*------------------------------------------*/ .highlight { background: linear-gradient(to right, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1875)); } /* ========================================================================== 03. PRELOADER SPINNER ========================================================================== */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: #f5f5f5; } #loader { display: block; position: relative; top: 50%; transform: translateY(-50%); } .cssload-spinner { position: absolute; width: 68px; height: 68px; left: 50%; margin-left: -34px; margin-top: -34px; } .cssload-spinner:after, .cssload-spinner:before { position: absolute; content: ""; border: 4px solid var(--blue); width: 64px; height: 64px; } .theme--blue .cssload-spinner:after, .theme--blue .cssload-spinner:before { border-color: var(--blue); } .theme--green .cssload-spinner:after, .theme--green .cssload-spinner:before { border-color: var(--green); } .theme--indigo .cssload-spinner:after, .theme--indigo .cssload-spinner:before { border-color: var(--indigo); } .theme--orchid .cssload-spinner:after, .theme--orchid .cssload-spinner:before { border-color: var(--orchid); } .theme--pink .cssload-spinner:after, .theme--pink .cssload-spinner:before { border-color: var(--pink); } .theme--purple .cssload-spinner:after, .theme--purple .cssload-spinner:before { border-color: var(--purple); } .theme--red .cssload-spinner:after, .theme--red .cssload-spinner:before { border-color: var(--purple); } .theme--skyblue .cssload-spinner:after, .theme--skyblue .cssload-spinner:before { border-color: var(--sky-blue); } .theme--violet-red .cssload-spinner:after, .theme--violet-red .cssload-spinner:before { border-color: var(--violet-red); } .cssload-spinner:after { animation: cssload-spinner1 2.5s linear infinite; -o-animation: cssload-spinner1 2.5s linear infinite; -ms-animation: cssload-spinner1 2.5s linear infinite; -webkit-animation: cssload-spinner1 2.5s linear infinite; -moz-animation: cssload-spinner1 2.5s linear infinite; } .cssload-spinner:before { width: 88px; height: 88px; margin-left: -13.5px; margin-top: -13.5px; animation: cssload-spinner2 2.5s linear infinite; -o-animation: cssload-spinner2 2.5s linear infinite; -ms-animation: cssload-spinner2 2.5s linear infinite; -webkit-animation: cssload-spinner2 2.5s linear infinite; -moz-animation: cssload-spinner2 2.5s linear infinite; } @keyframes cssload-spinner1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes cssload-spinner1 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-spinner1 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-spinner1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-spinner1 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes cssload-spinner2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-o-keyframes cssload-spinner2 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } } @-ms-keyframes cssload-spinner2 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); } } @-webkit-keyframes cssload-spinner2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes cssload-spinner2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: var(--white)!important; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .dark-menu .wsmainfull { padding: 6px 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; display: block; font-size: 1rem; line-height: 50px; font-weight: 600; letter-spacing: 0; text-decoration: none; margin: 0 7px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 35px; width: 0; } /*------------------------------------------*/ /* HEADER LINK INFO /*------------------------------------------*/ span.sm-info { position: relative; display: inline-block; text-align: center; width: 20px; height: 20px; color: var(--white); font-size: 0.65rem; line-height: 19px; font-weight: 700; margin-left: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; } .nav-blue .sm-info { background-color: var(--blue); } .nav-green .sm-info { background-color: var(--green); } .nav-indigo .sm-info { background-color: var(--indigo); } .nav-orchid .sm-info { background-color: var(--orchid); } .nav-pink .sm-info { background-color: var(--pink); } .nav-purple .sm-info { background-color: var(--purple); } .nav-red .sm-info { background-color: var(--red); } .nav-skyblue .sm-info { background-color: var(--sky-blue); } .nav-violet-red .sm-info { background-color: var(--violet-red); } /*------------------------------------------*/ /* HEADER BUTTONS /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 1rem; line-height: 30px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 14px; padding: 6px 28px 8px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 4px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 25px; } .wsmenu > .wsmenu-list > li a.store.header-store { line-height: 1; margin-top: 13px; margin-left: 10px; margin-bottom: 0; padding: 0; } /*------------------------------------------*/ /* LANGUAGE SELECT /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { width: auto; min-width: 115px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.875rem; padding: 8px 11px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 8px 11px; } /*------------------------------------------*/ /* HEADER STORE BADGES /*------------------------------------------*/ .store.header-store img { max-height: 44px; } /*------------------------------------------*/ /* HEADER SOCIAL LINKS /*------------------------------------------*/ .header-socials { margin: 0; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .header-socials a { display: block; margin-left: 15px; } .navbar-light .header-socials a { color: #ddd; } .navbar-light .header-socials a:hover { color: var(--silver); } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-20 [class*="flaticon-"]:after { line-height: 70px!important; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 200px; top: 62px; padding: 12px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* HEADER SUBMENU SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 210px; position: absolute; left: 102%; top: 0; margin: 0; padding: 10px; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { position: absolute; top: 12px; right: 12px; } .sub-menu.ico-10 [class*="flaticon-"]:before, .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 62px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 33%; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--tra-white-smoke); color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 74%!important; left: 25%; padding: 20px 10px; } .wsmegamenu.w-75 .col-lg-3 { padding: 0 6px; } /*------------------------------------------*/ /* SUBMENU TITLE /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu .title, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title { color: var(--light-gray); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 15px 13px; } /*------------------------------------------*/ /* DARK HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--metal)!important; border: solid 1px var(--metal)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } .dark-menu .title, .black-scroll .scroll .title, .dark-menu .icons-menu-txt span, .black-scroll .scroll .icons-menu-txt span { color: var(--white)!important; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--smoke); } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: var(--ink); } .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--blue); } .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--green); } .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--indigo); } .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--orchid); } .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--pink); } .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--purple); } .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--red); } .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--sky-blue); } .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--violet-red); } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR WHITE SCROLL /*------------------------------------------*/ .tra-menu.white-scroll .wsmainfull.scroll, .white-menu.white-scroll .wsmainfull.scroll, .tra-menu.border-header.white-scroll .wsmainfull.scroll { padding: 0; border: none; background-color: rgba(255, 255, 255, .7)!important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--ink)!important; } /*------------------------------------------*/ /* NAVBAR BLACK SCROLL /*------------------------------------------*/ .tra-menu.black-scroll .wsmainfull.scroll, .dark-menu.black-scroll .wsmainfull.scroll { padding: 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: var(--silver)!important; } /*------------------------------------------*/ /* WHITE SCROLL BUTTONS /*------------------------------------------*/ .white-scroll .scroll .btn--tra-white { color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK SCROLL BUTTONS /*------------------------------------------*/ .black-scroll .scroll .btn--tra-black { color: var(--white)!important; border-color: var(--white)!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark .logo-white, .navbar-light .logo-black, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-dark.black-scroll .scroll .logo-black { display: none; } .tra-menu.navbar-light .scroll .logo-black, .tra-menu.navbar-dark.black-scroll .scroll .logo-white { display: block; } /* ========================================================================== 05. HERO ========================================================================== */ .hero-section .container { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO DIGITS /*------------------------------------------*/ .hero-digits { padding-right: 20px; } #hd-1-1, #hd-1-2 { display: inline-block; float: left; padding-right: 20px; } #hd-1-1 { width: 48%; } #hd-1-2 { width: 48%; } .hero-digits h2.statistic-number { font-size: 3.35rem; line-height: 1; letter-spacing: -1.5px; margin-bottom: 10px; } .hero-digits h2.statistic-number small { font-size: 2.25rem; margin-left: 5px; } .hero-digits .block-txt p.p-sm { margin-bottom: 0; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ #hero-1 { position: relative; z-index: 3; background-image: url(../images/hero-1.jpg); padding-top: 150px; margin-bottom: 80px; } .hero-1-txt { margin-top: -15px; } .hero-1-txt h2 { font-size: 3.45rem; font-weight: 600; } .hero-1-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-1-txt .os-version-ext { margin-top: 22px; } .hero-1-img { text-align: center; padding: 0 20px; margin-bottom: -80px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ #hero-2 { background-image: url(../images/hero-2.jpg); padding-top: 180px; padding-bottom: 130px; } .hero-2-txt h2 { font-size: 3.75rem; } .hero-2-txt p.p-xl { padding: 0 8%; margin-top: 22px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ #hero-3 { overflow: hidden; background-image: url(../images/hero-3.jpg); padding-top: 175px; } .theme--dark #hero-3 { background-image: url(../images/hero-3d.jpg); } .hero-3-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 70px; margin-bottom: 60px; } .hero-3-txt h2 { font-size: 3.75rem; } .hero-3-txt p.p-xl { font-size: 1.25rem; margin-top: 20px; margin-bottom: 32px; } .hero-3-txt .btn-txt { margin-top: 25px; } .hero-3-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ #hero-4 { overflow: hidden; background-image: url(../images/hero-4.jpg); padding-top: 170px; } .theme--dark #hero-4 { background-image: url(../images/hero-4d.jpg); } .hero-4-txt h2 { font-size: 3.5rem; } .hero-4-txt p.p-xl { padding: 0 2%; margin-top: 30px; margin-bottom: 30px; } .hero-4-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ #hero-5 { position: relative; z-index: 3; background-image: url(../images/hero-5.jpg); padding-top: 150px; margin-bottom: 60px; } #hero-5 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-5 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-5-txt { margin-top: -15px; padding-left: 5px; } .hero-5-txt h2 { font-size: 3.45rem; line-height: 1.3; font-weight: 600; } .hero-5-txt p.p-xl { padding-right: 2%; margin-top: 25px; margin-bottom: 35px; } .hero-5-img { text-align: center; padding-right: 30px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ #hero-6 { background-image: url(../images/hero-6.jpg); padding-top: 170px; } .theme--dark #hero-6 { background-image: url(../images/bg-dark.jpg); } #hero-6:after { position: absolute; content: ''; z-index: -1; width: 100%; height: 10%; bottom: 0; left: 0; background-color: var(--white); } .theme--dark #hero-6:after { background-color: var(--dark-theme-bg); } .hero-6-txt h2 { font-size: 3.65rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 25px; margin-bottom: 30px; } .hero-6-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-7 /*------------------------------------------*/ #hero-7 { overflow: hidden; position: relative; background-image: url(../images/hero-7.jpg); padding-top: 140px; padding-bottom: 40px; } #hero-7 .wave-shape-bottom { z-index: 6; } #hero-7 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-7 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-7-txt { margin-top: -30px; } .hero-7-txt h2 { font-size: 3.65rem; font-weight: 600; margin-bottom: 40px; } .hero-7-txt .os-version-ext { margin-top: 22px; } .hero-7-img { text-align: center; margin-bottom: -30%; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-8 { position: relative; background-image: url(../images/hero-8.jpg); padding-top: 160px; margin-bottom: 30px; } #hero-8 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-8 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-8-txt { margin-top: -30px; } .hero-8-txt h2 { font-size: 3.65rem; font-weight: 600; } .hero-8-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-8-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-8-img { position: relative; text-align: center; margin: 0 -100% -30px 0; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ #hero-9 { position: relative; background-image: url(../images/hero-9.jpg); padding-top: 170px; } .theme--dark #hero-9 { background-image: url(../images/hero-9d.jpg); } .hero-9-txt { margin-top: -30px; } .hero-9-txt h2 { font-size: 4rem; } .hero-9-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-9-img { text-align: center; padding-left: 15px; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ #hero-10 { background-image: url(../images/hero-10.jpg); padding-top: 170px; } .theme--dark #hero-10 { background-image: url(../images/hero-10d.jpg); } .hero-10-txt h2 { font-size: 3.5rem; } .hero-10-txt p.p-lg { padding: 0 2%; margin-top: 25px; margin-bottom: 35px; } .hero-10-txt p.btn-txt { margin-top: 40px; } #hero-10 .quick-form { margin: 35px 7% 0; } .hero-10-img { margin-top: 65px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ #hero-11 { background-image: linear-gradient(180deg, rgba(233, 224, 242, .8) 50%, rgba(233, 224, 242, .05) 100%); padding-top: 170px; } .theme--dark #hero-11 { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .hero-11-txt h2 { font-size: 3.35rem; } .hero-11-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } .hero-11-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-11-img { text-align: center; padding-left: 25px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ #hero-12 { overflow: hidden; background-image: url(../images/hero-12.jpg); padding-top: 180px; } .theme--dark #hero-12 { background-image: url(../images/hero-12d.jpg); } .hero-12-txt h2 { font-size: 3.65rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-12-txt .advantages { margin-top: 20px; } .hero-12-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-13 /*------------------------------------------*/ #hero-13 { background-image: url(../images/hero-13.jpg); padding-top: 90px; padding-bottom: 15px; margin-bottom: 60px; } #hero-13 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-13 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-13-txt { margin-top: -25px; } .hero-13-txt h2 { font-size: 3.25rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 25px; margin-bottom: 30px; } .hero-13-txt .quick-form { margin-top: 35px; margin-right: 4%; } .hero-13-img { text-align: center; padding-right: 35px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-14 /*------------------------------------------*/ #hero-14 { background-image: url(../images/hero-14.jpg); padding-top: 170px; padding-bottom: 130px; } .hero-14-txt h2 { font-size: 4.35rem; } .hero-14-txt p.p-xl { padding: 0 3%; margin-top: 30px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-15 /*------------------------------------------*/ #hero-15 { background-image: url(../images/hero-15.jpg); padding-top: 150px; margin-bottom: 100px; } .hero-15-txt { margin-top: -25px; padding-left: 20px; } .hero-15-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 105px; margin-bottom: 30px; } .hero-15-txt h2 { font-size: 3.25rem; } .hero-15-txt p.p-lg { padding-right: 2%; margin-top: 25px; margin-bottom: 25px; } .hero-15-img { text-align: center; padding-right: 20px; margin-bottom: -100px; } /*------------------------------------------*/ /* HERO-16 /*------------------------------------------*/ #hero-16 { overflow: hidden; padding-top: 180px; } .hero-16-txt h2 { font-size: 3.75rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-16-img { padding: 80px 60px 0; margin-top: 70px; } .hero-16-img img { margin-bottom: -30px; } /*------------------------------------------*/ /* HERO-17 /*------------------------------------------*/ #hero-17 { background-image: url(../images/hero-17.jpg); padding-top: 80px; } .theme--dark #hero-17 { background-image: url(../images/hero-17d.jpg); } .hero-17-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 90px; margin-bottom: 35px; } .hero-17-txt h2 { font-size: 4rem; letter-spacing: -0.5px; } .hero-17-txt p.p-md { margin-top: 20px; margin-bottom: 30px; } .hero-17-img { margin: 0 -30px 0 15px; } /*------------------------------------------*/ /* HERO-18 /*------------------------------------------*/ #hero-18 { background-image: url(../images/hero-18.jpg); padding-top: 100px; } .theme--dark #hero-18 { background-image: url(../images/hero-18d.jpg); } .hero-18-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 115px; margin-bottom: 35px; } .hero-18-txt h2 { font-size: 3.35rem; } .hero-18-txt p.p-xl { padding: 0 5%; margin-top: 35px; margin-bottom: 35px; } .hero-18-img { text-align: center; margin-top: 30px; } /*------------------------------------------*/ /* HERO QUICK FORM /*------------------------------------------*/ .hero-section .quick-form .input-group { border: none; } /*------------------------------------------*/ /* Hero Quick Form Input /*------------------------------------------*/ .hero-section .quick-form .form-control { height: 64px; background-color: var(--white); border: 2px solid var(--silver); color: #666; font-size: 1.125rem; font-weight: 400; padding: 0 20px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .hero-section .quick-form.form--shadow .form-control { border-color: transparent; -webkit-box-shadow: 0 5px 10px var(--tra-black); -moz-box-shadow: 0 5px 10px var(--tra-black); box-shadow: 0 5px 10px var(--tra-black); } .hero-section .quick-form.form-stroke .form-control { border-color: var(--black); } .hero-section .quick-form.form-half .form-control { height: 58px; font-size: 1.0625rem; } /*------------------------------------------*/ /* Hero Quick Form Placeholder /*------------------------------------------*/ .hero-section .quick-form .form-control::-moz-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Hero Quick Form Focus /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { background-color: var(--white); border-color: var(--black); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Hero Quick Form Button /*------------------------------------------*/ .hero-section .quick-form .btn { height: 64px; font-size: 1.0625rem; padding: 12px 45px; margin-left: 15px; } .hero-section .quick-form.form-half .btn { height: 58px; font-size: 1rem; padding: 13px 40px; margin-left: 12px; } /*------------------------------------------*/ /* Hero Quick Form Message /*------------------------------------------*/ .hero-section .quick-form-msg { width: 100%!important; display: block; margin: 20px 0 15px 5px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -15px 0; } .hero-section .quick-form-msg .loading { color: #3eb1ff; font-size: 1.05rem; line-height: 1; font-weight: 500; } .hero-section .text-center .quick-form-msg .loading { font-size: 1.125rem; } /* ========================================================================== 06. ABOUT ========================================================================== */ .about-1 { background-image: url(../images/about-1.jpg); margin-bottom: 80px; } .theme--dark .about-1 { background-image: url(../images/about-1d.jpg); } .about-2-title { margin-bottom: 25px; } .about-4-title { padding-right: 4%; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-1-txt h2 { font-size: 3.65rem; margin-bottom: 20px; } .about-1-txt h4 { line-height: 1.44; font-weight: 400; padding-right: 2%; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .about-1-img { margin-top: 60px; margin-bottom: -80px; } .about-3 .img-block.left-column { margin-right: 40px; } .about-3 .img-block.right-column { margin-left: 40px; } /* ========================================================================== 07. CAREERS ========================================================================== */ .jobs-category { padding: 0 50px 18px; margin-bottom: 30px; border: 1.5px solid transparent; } .jobs-category h4 { line-height: 1; padding-top: 40px; margin-bottom: 14px; } .career-item { position: relative; padding: 22px 0; } /*------------------------------------------*/ /* OPEN ROLE DESCRIPTION /*------------------------------------------*/ .position-data { margin-top: 3px; } .position-data li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .rb-divider { position: relative; top: 1.25px; transform: rotate(-90deg); margin-left: 2px; } .position-data.ico-15 [class*="flaticon-"]:before, .position-data.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .position-data li p { display: inline-block; float: left; margin-bottom: 0; } /*------------------------------------------*/ /* OPEN ROLE LINK /*------------------------------------------*/ .position-link { color: var(--header-color); position: absolute; top: 26px; right: 5px; transform: rotate(-45deg); } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* MORE CAREERS BUTTON /*------------------------------------------*/ .more-careers { text-align: center; margin-top: 60px; } .more-careers-holder { display: inline-block; margin: 0 auto; } .more-careers-txt { text-align: left!important; display: inline-block; float: left; } .more-careers-txt p { position: relative; top: 6px; margin-bottom: 0; } .more-careers-btn { display: inline-block; margin-left: 20px; } .more-careers-btn .btn { font-size: 0.875rem; padding: 0.6rem 1.35rem; } /* ========================================================================== 08. JOB POSITION =========================================================================== */ .job-position-title { padding-top: 170px; padding-bottom: 100px; margin-bottom: 30px; } .jb-txt { position: relative; } .jb-txt h2 { padding-right: 20%; } .job-position-title .position-data { margin-top: 20px; } .job-position-title .rb-divider { top: 3.5px; } .job-position-title .btn { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; padding: 0.7rem 1.4rem; } /*------------------------------------------*/ /* JOB POSITION TYPOGRAPHY /*------------------------------------------*/ .position-info h5 { margin-top: 60px; margin-bottom: 30px; } .position-info p span { color: var(--header-color); font-weight: 600; } .position-info .btn { margin-top: 35px; } /* ========================================================================== 09. FEATURES ========================================================================== */ .fbox-5-wrapper { padding: 90px 55px; } .features-2 .section-title p.p-xl { font-size: 1.25rem; margin-top: 0; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 40px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3 { margin-bottom: 50px; } /*------------------------------------------*/ /* FEATURE BOX /*------------------------------------------*/ .fbox-3 { border: 1px solid var(--silver); padding: 40px 20px 30px; } .fbox-3.bg--white { border: 1px solid transparent; padding: 40px 20px 30px; } .fbox-4 { padding: 60px; border: 1px solid transparent; } .fbox-4.fb-5, .fbox-4.fb-6 { padding: 70px 65px; } .ico-title .fbox-4.fb-5, .ico-title .fbox-4.fb-6 { padding: 45px 50px 35px; } .fbox-4.fb-7, .fbox-4.fb-8 { position: relative; overflow: hidden; padding: 70px 50px 0; } .ico-title .fbox-4.fb-7, .ico-title .fbox-4.fb-8 { padding: 45px 50px 0; } .fbox-4-txt { padding-left: 60px; } .fbox-4-txt h2, .fbox-4-txt h3 { margin-bottom: 20px; } .fbox-4-txt h3.h3-lg { font-size: 2.5625rem; } .fbox-4-txt .btn { margin-top: 25px; } .fbox-5 { padding: 80px 53px 70px; border: 1.5px solid transparent; } /*------------------------------------------*/ /* FEATURE BOX VECTOR ICON /*------------------------------------------*/ .fbox-ico, .fbox-ico.ico-rounded { margin-bottom: 15px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 20px; } .fbox-ico[class*="img-"], .fbox-ico.ico-rounded-md, .fbox-ico.ico-rounded-lg { margin-bottom: 20px; } /*------------------------------------------*/ /* FEATURE BOX IMAGE /*------------------------------------------*/ .fbox-img img { width: auto; max-width: inherit; } .fbox-img.h-175 img { max-height: 175px; } .fbox-img.h-180 img { max-height: 180px; } .fbox-6 .fbox-img { margin-bottom: 35px; } /*------------------------------------------*/ /* FBOX-4 IMAGE /*------------------------------------------*/ .fbox-4.fb-1 .fbox-4-img { margin: 40px 5% 0; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 45px 0 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 5% 40px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 40px 5% 0; } /*------------------------------------------*/ /* FBOX-5 IMAGE /*------------------------------------------*/ .fbox-5-img img { width: auto; max-width: inherit; max-height: 255px; margin-bottom: 25px; } /*------------------------------------------*/ /* FBOX-7 IMAGE /*------------------------------------------*/ .fbox-7 .fbox-img { -webkit-border-radius: 12px 12px 0 0; -moz-border-radius: 12px 12px 0 0; -o-border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; } .fbox-7 .fbox-img.h-175 { padding-top: 40px; margin: 0 8px 60px; } .fbox-7 .fbox-img.h-180 { padding-top: 42px; margin: 0 5px 60px; } .fbox-7 .fbox-img img { margin-bottom: -25px; } /*------------------------------------------*/ /* FBOX-2 /*------------------------------------------*/ .fbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .fbox-ico-wrap { position: relative; margin-right: 30px; } .fbox-2 .fbox-ico { margin-top: 2px; } .fbox-2 .fbox-txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* FBOX TYPOGRAPHY /*------------------------------------------*/ .fbox-2 h5, .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 20px; margin-bottom: 12px; } .fbox-4 h5 { margin-bottom: 16px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 24px; } .fbox-5 h5 { margin-bottom: 16px; } .fbox-3 p, .fbox-5 p, .fbox-wrapper p, .fbox-4 p.mb-0 { margin-bottom: 0; } .fbox-4 p { margin-bottom: 14px; } /*------------------------------------------*/ /* FEATURES DOWNLOAD BUTTON /*------------------------------------------*/ .features-2-download { margin-top: 80px; } .features-2-download p.p-sm { font-size: 0.9rem; margin-top: 20px; margin-bottom: 0; } /* ========================================================================== 10. CONTENT ========================================================================== */ .ct-07 { overflow: hidden; } .ct-08 { margin-bottom: 80px; } .ct-09 { margin-top: 80px; } .ct-06 .section-overlay { margin-bottom: 100px; } .bc-03 .section-title { margin-bottom: 50px; } .bc-04 { margin: 30px 0; } /*------------------------------------------*/ /* CONTENT BOX WRAPPER /*------------------------------------------*/ .bc-01-wrapper, .bc-02-wrapper { border: 1px solid transparent; } .bc-04-wrapper { border: 2.5px solid #d2d2eb; padding-left: 60px; } .bc-01 .section-overlay { padding: 80px 65px; } .bc-02 .section-overlay { padding: 65px 60px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 60px; } .bc-02.pt-30.bc-02-top { margin-top: 70px; } .bc-03 .section-overlay { padding: 80px 70px 0; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .txt-box { margin-bottom: 25px; } .bc-01 .txt-box { margin-bottom: 30px; } .txt-box:last-child, .bc-01 .txt-box:last-child { margin-bottom: 0; } .ct-07 .txt-block { margin-top: -30px; } .ct-08 .txt-block { margin-top: -30px; } .bc-01 .txt-block.left-column { padding-right: 20px; } .bc-01 .txt-block.right-column { padding-left: 20px; } .bc-04 .txt-block { padding-right: 30px; } /*------------------------------------------*/ /* CONTENT BOX /*------------------------------------------*/ .cbox-1, .cbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-4-wrapper { margin-top: 20px; } .cbox-5 { display: inline-block; width: 390px; min-width: 390px; padding: 18px 24px 16px 24px; } .cbox-5.cb-1 { margin: 12px 0 25px; } /*------------------------------------------*/ /* CONTENT BOX ICON /*------------------------------------------*/ .cbox-1 .ico-wrap { position: relative; margin-right: 1.625rem; } .cbox-1-ico { text-align: center; position: relative; width: 2.25rem; height: 2.25rem; font-size: 1.125rem; line-height: 2rem; font-weight: 600; border: 3px solid transparent; border-radius: 100%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .cbox-1-line { position: absolute; bottom: 14px; left: 50%; width: 2px; background-color: var(--smoke); height: calc(100% - 70px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .cbox-1:hover .cbox-1-ico { background-color: transparent; } .cbox-1:hover .cbox-1-ico.bg--black { color: var(--black); border-color: var(--black); } .cbox-1:hover .cbox-1-ico.bg--blue { color: var(--blue); border-color: var(--blue); } .cbox-1:hover .cbox-1-ico.bg--green { color: var(--green); border-color: var(--green); } .cbox-1:hover .cbox-1-ico.bg--indigo { color: var(--indigo); border-color: var(--indigo); } .cbox-1:hover .cbox-1-ico.bg--orchid { color: var(--orchid); border-color: var(--orchid); } .cbox-1:hover .cbox-1-ico.bg--pink { color: var(--pink); border-color: var(--pink); } .cbox-1:hover .cbox-1-ico.bg--purple { color: var(--purple); border-color: var(--purple); } .cbox-1:hover .cbox-1-ico.bg--red { color: var(--red); border-color: var(--red); } .cbox-1:hover .cbox-1-ico.bg--skyblue { color: var(--sky-blue); border-color: var(--sky-blue); } .cbox-1:hover .cbox-1-ico.bg--violet-red { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* CBOX #2 /*------------------------------------------*/ .cbox-2 .ico-wrap { position: relative; text-align: center; margin-top: 0; margin-right: 1.25rem; } .cbox-2 .cbox-2-ico { position: relative; top: 5px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3rem; } /*------------------------------------------*/ /* CBOX #5 /*------------------------------------------*/ .cbox-5-ico { display: inline-block!important; float: left; text-align: center; } /*------------------------------------------*/ /* CBOX #6 /*------------------------------------------*/ .cbox-6-wrapper { position: relative; } .cbox-6 { border: 1px solid var(--snow); padding: 40px; margin: 0 12%; z-index: 1; } .cbox-6 hr { margin-top: 35px; margin-bottom: 25px; } /*------------------------------------------*/ /* CBOX #6 TITLE /*------------------------------------------*/ .cbox-6-title p.p-md { line-height: 1; } .cbox-6 .statistic-number sup { font-size: 3rem; top: -10px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 15px; } .cbox-6-title p.p-md.ico-10 span { font-weight: 600; } /*------------------------------------------*/ /* CBOX #6 TEXT /*------------------------------------------*/ .cbox-6-txt h5 { margin-bottom: 10px; } /*------------------------------------------*/ /* CBOX #6 DATA /*------------------------------------------*/ .cbox-6-data { padding: 18px 25px; } .cbox-6-data h4 { letter-spacing: -0.5px; } .cbox-6-data p { margin: 0; } /*------------------------------------------*/ /* CBOX #6 SHAPE /*------------------------------------------*/ .cb-shape-1 { position: absolute; right: 30px; top: -35px; z-index: -1; } .cb-shape-2 { position: absolute; left: 30px; bottom: -25px; z-index: -1; } .cb-shape-1 img, .cb-shape-2 img { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------*/ /* CBOX #7 /*------------------------------------------*/ .cbox-7 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-7-txt { overflow: hidden; flex: 1; max-width: 100%; padding-left: 14px; } .cbox-7-ico { background-image: linear-gradient(0deg, #d4dbff 0%, #fff 100%); width: 28px; height: 28px; margin-top: 2px; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 26px; } .cbox-7-txt p { margin-bottom: 14px; } /*------------------------------------------*/ /* CONTENT BOX TEXT /*------------------------------------------*/ .cbox-1-txt, .cbox-2-txt { overflow: hidden; flex: 1; max-width: 100%; } .cbox-1-txt { margin-bottom: 30px; } .cbox-2-txt { margin-bottom: 40px; } .two-txt .cbox-2-txt { margin-bottom: 25px; } .cbox-1:last-child .cbox-1-txt, .cbox-2:last-child .cbox-2-txt { margin-bottom: 0; } .cbox-3-txt { margin-bottom: 40px; } .cbox-3:last-child .cbox-3-txt { margin-bottom: 0; } .cbox-5-txt { display: inline-block!important; padding-left: 18px; } /*------------------------------------------*/ /* CONTENT BOX TITLE /*------------------------------------------*/ .cbox-title { margin-bottom: 18px; } .cbox-title span { float: left; line-height: 1!important; margin-right: 20px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.35rem; } .cbox-title h5 { line-height: 2.1875rem!important; margin-bottom: 0!important; } .box-title { margin-bottom: 14px; } .box-title span { position: relative; top: 10px; right: 4px; } .box-title h6 { display: inline-block; margin-bottom: 0; } /*------------------------------------------*/ /* CONTENT BOX TYPOGRAPHY /*------------------------------------------*/ .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 15px!important; } .cbox-5-txt h6 { margin-bottom: 2px; } .bc-02 .txt-block h5 { margin-bottom: 25px; } .cbox-1-txt p, .cbox-2-txt p, .cbox-3-txt p, .cbox-5-txt p, .cbox-4 p { margin-bottom: 0; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h3, .txt-block h2 { margin-bottom: 25px; } .txt-block h5 { margin-bottom: 20px; } h5.h5-title { margin: 20px 0; } .txt-block-tra-link { margin-top: 20px; } .txt-block .btn { margin-top: 30px; } .txt-block .btn.btn--transparent { margin-top: 0; } .txt-block .stores-badge { margin-top: 30px; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion-1 .accordion-item { background-color: transparent; padding: 22px 0 26px; border: none; border-bottom: 1.5px solid var(--smoke); border-radius: 0 0; } .txt-block .accordion-thumb { margin: 0; padding: 0; cursor: pointer; position: relative; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 1px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .txt-block .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } .txt-block .accordion-1 .accordion-panel { color: var(--gray); margin: 0; padding: 0 0 0 5px; display: none; } .txt-block .accordion-1 .accordion-thumb h5 { color: var(--header-color); line-height: 1; padding-left: 5px; margin-bottom: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 24px; } /*------------------------------------------*/ /* TEXT BLOCK TABS /*------------------------------------------*/ #tabs-1 .tab-content { display: none; } #tabs-1 .tab-content.current { display: inherit; } .tabs-1 li { cursor: pointer; background-color: transparent; border: none; margin-bottom: 8px; padding: 25px 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tabs-1 li:last-child { margin-bottom: 0; } .tab-link h5, .tab-link p { color: #858585; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tab-link p { margin: 10px 0 0; } /*------------------------------------------*/ /* TAB LINK HOVER /*------------------------------------------*/ .tabs-1 li:hover { background-color: #f9f9f9; } /*------------------------------------------*/ /* TAB LINK CURRENT /*------------------------------------------*/ #tabs-1 .tabs-1 li.current, #tabs-1 .tabs-1 li.current:hover { background-color: #f3f3f5; } #tabs-1 .tabs-1 li.current { cursor: auto; } #tabs-1 .tabs-1 li:hover h5, #tabs-1 .tabs-1 li.current h5 { color: var(--header-color); } #tabs-1 .tabs-1 li:hover p, #tabs-1 .tabs-1 li.current p { color: var(--gray); } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 25px; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 25px; } .ct-03 .img-block img { max-width: none; display: inline-block; margin-left: 30px; } .ct-04 .img-block img { max-width: none; margin-left: -100%; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -100px; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -80px; } .ct-09 .img-block { margin-top: -80px; } .img-block-txt, .img-block-btn { text-align: center; margin-top: 45px; } .img-block-hidden .video-btn { top: calc(50% - 30px); } .bc-3-img .video-btn { top: calc(50% - 70px); } .bc-2-img.right-column { margin-left: 20px; } .bc-2-img.left-column { margin-right: 20px; } .bc-3-img { margin-bottom: -200px; } .bc-4-img { transform: rotate(3deg); margin: -20px 0; } /* ========================================================================== 11. STATISTIC =========================================================================== */ .statistic-1-wrapper .statistic-block-digit { width: 36%; display: inline-block!important; float: left; } .statistic-1-wrapper .statistic-block-txt { width: 64%; display: inline-block!important; padding-left: 16px; } #sb-3-1, #sb-3-2 { width: 48%; display: inline-block; float: left; } .statistic-4-wrapper .statistic-block { padding: 10px 40px; } #sb-4-1, #sb-4-2 { border-right: 1px solid var(--tra-smoke); } /*------------------------------------------*/ /* STATISTIC BLOCK ICON /*------------------------------------------*/ .statistic-ico { margin-bottom: 15px; } .statistic-block .txt-block-rating { margin-bottom: -3px; } /*------------------------------------------*/ /* STATISTIC BLOCK NUMBER /*------------------------------------------*/ h3.statistic-number, h2.statistic-number { line-height: 1; font-weight: 700; letter-spacing: -1px; margin-bottom: 0; } #sb-2-2 h2.statistic-number { letter-spacing: -2px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 15px; } /*------------------------------------------*/ /* STATISTIC BLOCK TYPOGRAPHY /*------------------------------------------*/ .statistic-2-wrapper h2 { margin-bottom: 15px; } .statistic-2-wrapper .txt-block h4, .statistic-2-wrapper .txt-block h3 { line-height: 1.35; } .statistic-4-wrapper h5 { margin-top: 25px; margin-bottom: 15px; } .statistic-1-wrapper p { position: relative; line-height: 1.35; top: 4px; margin-bottom: 0; } .txt-block-stat p, .statistic-block-txt p, .statistic-2-wrapper p, .statistic-4-wrapper p { margin-bottom: 0; } /* ========================================================================== 12. RATING =========================================================================== */ .rating-1-wrapper.text-center { padding: 0 16%; } .rating-2-wrapper.text-center { padding: 0 13%; } .rating-title { text-align: center; } .rating-title h6, .rating-title h5 { margin-bottom: 0; } /*------------------------------------------*/ /* RATING BOX LOGO /*------------------------------------------*/ .rbox-1-img { margin-bottom: 15px; } .rbox-1-img img { width: auto; max-width: inherit; max-height: 35px; } .rbox-2-img img { width: auto; max-width: inherit; max-height: 80px; } #rb-2-2 .rbox-2-img img { max-height: 145px; } /*------------------------------------------*/ /* RATING BOX TYPOGRAPHY /*------------------------------------------*/ .rbox-1 .star-rating { display: inline-block; font-size: 1rem; line-height: 15px; font-weight: 500; vertical-align: inherit; background-color: var(--white); padding: 5px 18px; } .rbox-1 .star-rating span { position: relative; color: #ffb30c; top: -1px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 0.9rem; } .rbox-1 .star-rating { font-size: 0.86rem; line-height: 1; } .rbox-2 p { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; font-weight: 500; margin-top: 15px; margin-bottom: 0; } .rbox-2 p span { font-weight: 700; } /* ========================================================================== 13. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper { padding: 0 10px; } .reviews-3-wrapper:after { position: absolute; content: ''; z-index: -1; width: 86%; height: 85%; top: 8%; left: 7%; background-color: var(--white-smoke); } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { position: relative; border: 1.5px solid transparent; padding: 35px; margin: 0 12px 30px; } .review-1.no-title { padding: 50px 35px 35px; } .review-2 { padding: 0 30px; margin-bottom: 30px; } .review-3 { position: relative; padding: 45px 40px 35px; } #rw-3-1, #rw-3-2 { margin-bottom: 20px; } .review-item { position: relative; width: 33.33%; padding: 0 12px; margin-bottom: 24px; } .review-4 { position: relative; padding: 35px 28px; border: 1px solid transparent; } /*------------------------------------------*/ /* TESTIMONIAL ICON /*------------------------------------------*/ .review-ico.ico-45 { position: absolute; top: 15px; right: 25px; opacity: .12; } .review-ico.ico-60 { position: absolute; top: 15px; left: 25px; opacity: .12; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-1-txt h6.h6-md, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg, .review-4-txt h6.h6-lg { line-height: 1.4; padding-right: 5%; margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.225rem; line-height: 1.4; padding-right: 5%; margin-bottom: 12px; } .review-1.text-center h6.h6-md, .review-1.text-center h6.h6-lg { padding-right: 0; } .review-2-txt h6.h6-lg { margin-bottom: 14px; } .review-1-txt p, .review-2-txt p, .review-3-txt p, .review-4-txt p { margin-bottom: 15px; } .review-4-txt p.mb-0 { margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-rating.ico-10 { margin-bottom: 5px; } .review-author .review-rating.ico-10 { margin-bottom: 2px; } .review-rating.ico-15 { margin-bottom: 8px; } .review-rating.ico-15.mb-15 { margin-bottom: 12px; } .review-rating.ico-10 [class*="flaticon-"]:before, .review-rating.ico-10 [class*="flaticon-"]:after { font-size: 0.935rem; } .review-rating.ico-15 [class*="flaticon-"]:before, .review-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /*------------------------------------------*/ /* TESTIMONIAL DATA /*------------------------------------------*/ .author-data { margin-top: 20px; } .author-data.mt-25 { margin-top: 25px; } .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } /*------------------------------------------*/ /* TESTIMONIAL AVATAR /*------------------------------------------*/ .review-avatar { margin: 0 auto; float: left; } .review-avatar img { width: 46px; height: 46px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-3 .review-avatar img { width: 54px; height: 54px; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .author-data .review-author { position: relative; display: inline-block; text-align: left; padding: 0 0 0 14px; } .review-author.mt-15 { margin-top: 16px; } .review-3 .review-author { margin-top: 5px; } .review-author h6 { font-size: 0.975rem; line-height: 1; margin-bottom: 9px; } .review-author.mt-15 h6 { margin-bottom: 0; } .review-author h6 span { color: var(--gray); font-size: 0.95rem; font-weight: 400; } .review-author p { font-size: 0.925rem; line-height: 1; font-weight: 300; margin-bottom: 0; } .review-author p a { font-weight: 400; } /*------------------------------------------*/ /* TESTIMONIAL BUTTON /*------------------------------------------*/ .reviews-btn { text-align: center; margin-top: 65px; } /*------------------------------------------*/ /* TESTIMONIAL CAROUSEL DOTS /*------------------------------------------*/ .reviews-section button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { margin: 0 7px; } .owl-dots button:focus { outline: none; text-decoration: none; } /* ========================================================================== 14. TEAM =========================================================================== */ .team-member { margin-bottom: 50px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; overflow: hidden; text-align: center; margin-bottom: 30px; } /*------------------------------------------*/ /* PHOTO HOVER ZOOM /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: .45; -moz-opacity: .45; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data { padding-left: 8px; } .team-member-data h6 { margin-bottom: 8px; } .team-member-data p { font-size: 0.975rem; line-height: 1; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } /* ========================================================================== 15. PRICING =========================================================================== */ .pricing-3-wrapper { padding: 0 4%; } .p-table { border: 1.5px solid transparent; margin-bottom: 40px; } .p-table.theme--border { border: 3px solid var(--theme-color); } .p-table.gray--border { border: 3px solid var(--tra-black); } .p-table.blue--border { border: 3px solid var(--blue); } .p-table.green--border { border: 3px solid var(--green); } .p-table.indigo--border { border: 3px solid var(--indigo); } .p-table.orchid--border { border: 3px solid var(--orchid); } .p-table.pink--border { border: 3px solid var(--pink); } .p-table.purple--border { border: 3px solid var(--purple); } .p-table.red--border { border: 3px solid var(--red); } .p-table.skyblue--border { border: 3px solid var(--sky-blue); } .p-table.violet-red--border { border: 3px solid var(--violet-red); } .pricing-1-table { padding: 45px 35px; } .pricing-2-table, .pricing-3-table { padding: 30px 40px; } .pricing-2-table.bg--white, .pricing-3-table.bg--white { border: 1px solid #ddd; -webkit-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); -moz-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); } #pt-3-1 { margin: 0 10px 40px 50px; } #pt-3-2 { margin: 0 50px 40px 10px; } /*------------------------------------------*/ /* TABLE HEADER /*------------------------------------------*/ .pricing-table-header { position: relative; } .pricing-table-header h5 { margin-bottom: 30px; } /*------------------------------------------*/ /* PRICING TABLE DISCOUNT /*------------------------------------------*/ .pricing-discount { position: absolute; top: -2px; right: -5px; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.915rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* PRICE /*------------------------------------------*/ .price span { color: var(--header-color); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -2px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.5rem; } /*------------------------------------------*/ /* DOLLAR SIGN /*------------------------------------------*/ .price sup { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-size: 2.05rem; font-weight: 600; top: -5px; right: 2px; letter-spacing: -1px; } /*------------------------------------------*/ /* Validity /*------------------------------------------*/ .price sup.validity { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 400; top: -2px; left: 0; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.65rem; } /*------------------------------------------*/ /* Text /*------------------------------------------*/ .price p { margin-top: 20px; margin-bottom: 20px; } .pricing-section .btn-txt a { text-decoration: underline; } /*------------------------------------------*/ /* PRICING FEATURES /*------------------------------------------*/ .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 20px; } .pricing-features li { padding: 11px 8px; } .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 9px 8px; } .pricing-features li p { line-height: 1; font-weight: 400; margin-bottom: 0; } .pricing-features li p span { position: relative; top: -2px; right: 5px; } .pricing-features.ico-10 li p span { top: 0; right: 4px; } .pricing-features.ico--blue span { color: var(--blue); } .pricing-features.ico--green span { color: var(--green); } .pricing-features.ico--indigo span { color: var(--indigo); } .pricing-features.ico--orchid span { color: var(--orchid); } .pricing-features.ico--pink span { color: var(--pink); } .pricing-features.ico--purple span { color: var(--purple); } .pricing-features.ico--red span { color: var(--red); } .pricing-features.ico--skyblue span { color: var(--sky-blue); } .pricing-features.ico--violet-red span { color: var(--violet-red); } .pricing-features.ico-5 [class*="flaticon-"]:before, .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; } .pricing-features li.disabled-option p, .pricing-features li.disabled-option span { color: var(--disable)!important; } /*------------------------------------------*/ /* PRICING TABLE BUTTON /*------------------------------------------*/ .pt-btn { display: block; width: 100%; margin-top: 25px; } .p-table p.btn-txt { margin: 14px 0 0 0; } /*------------------------------------------*/ /* PRICING TOGGLE BUTTON /*------------------------------------------*/ .ext-toggle-btn { text-align: center; } .toggle-btn.inn-toggle-btn { position: absolute; } /*------------------------------------------*/ /* TOGGLE BUTTON TYPOGRAPHY /*------------------------------------------*/ .toggler-txt { font-size: 1.15rem; font-weight: 500; line-height: 36px; } .toggle-btn p { margin-top: 12px; letter-spacing: -0.25px; margin-bottom: 0; } /*------------------------------------------*/ /* TOGGLE BUTTON SWITCHER /*------------------------------------------*/ .switch-wrap { position: relative; display: inline-block; vertical-align: middle; min-width: 60px; height: 36px; margin: 0 8px; } .switcher { display: block; cursor: pointer; color: var(--white); font-size: 0.925rem; font-weight: 500; height: 36px; padding: 0 20px 0 40px; position: relative; border-radius: 36px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .theme--blue .switcher { background-color: var(--blue); } .theme--green .switcher { background-color: var(--green); } .theme--indigo .switcher { background-color: var(--indigo);} .theme--orchid .switcher { background-color: var(--orchid); } .theme--pink .switcher { background-color: var(--pink); } .theme--purple .switcher { background-color: var(--purple); } .theme--red .switcher { background-color: var(--red); } .theme--skyblue .switcher { background-color: var(--sky-blue); } .theme--violet-red .switcher { background-color: var(--violet-red); } .switcher .show-annual, .switcher .show-monthly { line-height: 36px; } .switcher .show-monthly { display: block; } .switcher .show-annual { display: none; } .switcher:before { position: absolute; left: 5px; bottom: 4px; content: " "; background-color: var(--white); width: 28px; height: 28px; border-radius: 50%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .switch-wrap input { display: none; } .switch-wrap input:checked + .switcher { padding: 0 40px 0 20px; } .switch-wrap input:checked + .switcher:before { left: auto; right: 4px; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .switch-wrap input:checked + .switcher .show-annual { display: block; } .switch-wrap input:checked + .switcher .show-monthly { display: none; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice { text-align: center; margin-top: 20px; } .pricing-notice p { padding: 0 5%; margin-bottom: 0; } .pricing-notice p span { font-weight: 600; } /*------------------------------------------*/ /* COMPARE PRICING TABLE /*------------------------------------------*/ .table>:not(caption)>*>* { padding: 17px 0; border: none!important; background-color: transparent!important; } .comp-table .pricing-header { max-width: 700px; } .comp-table .table thead tr, .comp-table .table tbody tr { border-bottom: 1px solid var(--silver)!important; } .comp-table .table tbody tr.table-last-tr { border-bottom: none!important; } .comp-table .table-responsive thead th { font-size: 1.0625rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody th { font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody td { position: relative; font-size: 0.95rem; line-height: inherit; top: 1px; } .comp-table .table-responsive tbody td span { position: relative; top: 1px; } .table>:not(caption)>*>* { color: var(--header-color); } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .comp-table .disabled-option { color: var(--light-gray); } .comp-table .color--blue { color: var(--blue); } .comp-table .color--green { color: var(--green); } .comp-table .color--indigo { color: var(--indigo); } .comp-table .color--orchid { color: var(--orchid); } .comp-table .color--purple { color: var(--purple); } .comp-table .color--red { color: var(--red); } .comp-table .color--sky { color: var(--sky); } .comp-table .color--skyblue { color: var(--sky-blue); } .comp-table .color--violet-red { color: var(--violet-red); } /*------------------------------------------*/ /* PRICING COMPARE PAYMENT /*------------------------------------------*/ .comp-table-payment h6 { margin-bottom: 16px; } .comp-table-payment p { margin-bottom: 0; } /* ========================================================================== 16. INTEGRATIONS =========================================================================== */ .int-1-wrapper { padding: 80px 70px; } .int-2-wrapper { padding: 0 3%; } .integrations-3 { margin-bottom: -22px; } /*------------------------------------------*/ /* FILTER BUTTONS /*------------------------------------------*/ .filter-btns button { background-color: transparent; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1.0625rem; line-height: 1; font-weight: 600; margin: 0 14px; padding: 0.5rem 0.1rem; border: none; cursor: pointer; border-bottom: 3px solid transparent; outline: 0px none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* Filter Button Active /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--blue); cursor: default; border-color: var(--blue); outline: 0px none; } .theme--blue .filter-btns button.is-checked { color: var(--blue); border-color: var(--blue); } .theme--green .filter-btns button.is-checked { color: var(--green); border-color: var(--green); } .theme--indigo .filter-btns button.is-checked { color: var(--indigo); border-color: var(--indigo); } .theme--orchid .filter-btns button.is-checked { color: var(--orchid); border-color: var(--orchid); } .theme--pink .filter-btns button.is-checked { color: var(--pink); border-color: var(--pink); } .theme--purple .filter-btns button.is-checked { color: var(--purple); border-color: var(--purple); } .theme--red .filter-btns button.is-checked { color: var(--red); border-color: var(--red); } .theme--skyblue .filter-btns button.is-checked { color: var(--sky-blue); border-color: var(--sky-blue); } .theme--violet-red .filter-btns button.is-checked { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* FILTER ITEM /*------------------------------------------*/ .integrations-3 .filter-item { position: relative; width: 33.33%; padding: 0 10px; margin-bottom: 22px; } /*------------------------------------------*/ /* INTEGRATION TOOL /*------------------------------------------*/ .int_tool-1 { display: block; margin-bottom: 40px; } .int_tool-2 { text-align: center; vertical-align: center; background-color: var(--white); border: 1px solid var(--silver); padding: 25px 20px; margin-bottom: 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .int_tool-3 { background-color: var(--white); padding: 20px 26px 22px; border: 1px solid var(--silver); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* INTEGRATION TOOL LOGO /*------------------------------------------*/ .int_tool-1 .tool_logo { border: 1.5px solid transparent; padding: 35px 25px; margin-bottom: 30px; } .int_tool-1 img { width: 65px; height: 65px; } .int_tool-2 img { width: 60px; height: 60px; } .int_tool-3 img { width: 40px; height: 40px; } /*------------------------------------------*/ /* INTEGRATION TOOL TEXT /*------------------------------------------*/ .tool_txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* INTEGRATION TOOL TYPOGRAPHY /*------------------------------------------*/ .tool_txt h6 { font-size: 1.1875rem; margin-top: 2px; } .tool_logo h6 { position: relative; display: inline-block; line-height: 40px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { line-height: 1; margin-bottom: 0; } .int_tool-2 h6 { font-size: 0.925rem; line-height: 1; margin-top: 18px; } .tool_txt p { margin-top: 3px; margin-bottom: 0; } .tool_description p { font-size: 0.95rem; margin-top: 14px; margin-bottom: 0; } /*------------------------------------------*/ /* INTEGRATION TOOL HOVER /*------------------------------------------*/ .int_tool-2:hover, .int_tool-3:hover { border-color: transparent; -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } /*------------------------------------------*/ /* INTEGRATION MORE BUTTON /*------------------------------------------*/ .integrations-1 .more-btn { margin-top: 15px; } /* ========================================================================== 17. MORE APPS =========================================================================== */ .apps-1-wrapper { padding: 0 5%; } .app-box { display: block; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 50px; } /*------------------------------------------*/ /* MORE APPS TYPOGRAPHY /*------------------------------------------*/ .app-box h6, .app-box h5 { line-height: 1; margin-top: 30px; margin-bottom: 12px; } .app-box p.app-cat { color: var(--gray); line-height: 1; margin-bottom: 0; } .app-logo-img { padding: 0 10%; } /* ========================================================================== 18. BRANDS =========================================================================== */ /*------------------------------------------*/ /* BRANDS SECTION TITLE /*------------------------------------------*/ .brands-title { text-align: center; } .brands-title h6, .brands-title h5 { margin-bottom: 50px; } .brands-title p { margin-bottom: 55px; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brand-logo { overflow: hidden; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .brands-carousel-5 .brand-logo { padding: 0 25px; } .brands-carousel-6 .brand-logo { padding: 0 16px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0 5px; } .brands-section .more-btn { text-align: center; margin-top: 35px; } .brands-section .owl-dots { display: none; } /* ========================================================================== 19.CHANGELOG =========================================================================== */ .version-release { margin-bottom: 80px; } .version-release:last-child { margin-bottom: 0; } .release-data { padding-bottom: 30px; border-bottom: 1px dashed var(--silver); margin-bottom: 30px; } span.version-data { display: block; color: var(--header-color); font-size: 1.5rem; line-height: 1; font-weight: 600; margin-bottom: 15px; } span.release-date { display: block; color: var(--gray); font-size: 0.975rem; line-height: 1; margin-bottom: 0; } span.release-date span { color: var(--header-color); font-weight: 500; } .release-highlights h6 { margin-bottom: 16px; } .release-highlights .simple-list p { margin-bottom: 2px; } .release-highlights p b { color: var(--header-color); } .release-preview { margin-bottom: 30px; } /* ========================================================================== 20.DOWNLOAD =========================================================================== */ .download-item { display: block; text-align: center; padding: 45px 40px 35px; border: 1.5px solid transparent; } .download-item img { width: auto; max-width: inherit; max-height: 64px; margin-bottom: 25px; } .download-item h6 { line-height: 1; } .download-item p { font-size: 0.975rem; margin: 6px 0 0; } /* ========================================================================== 21. FAQS =========================================================================== */ /*------------------------------------------*/ /* FAQs-3 TITLE /*------------------------------------------*/ .faq-3-title { margin-top: 20px; } .faq-3-title p { font-size: 1.0725rem; padding-right: 3%; margin-top: 18px; margin-bottom: 28px; } /*------------------------------------------*/ /* FAQs QUESTION /*------------------------------------------*/ .faqs-2 .question { margin-bottom: 30px; } .faqs-2-questions .left-column { padding-right: 15px; } .faqs-2-questions .right-column { padding-left: 15px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .faqs-1-questions h4 { margin-top: 80px; margin-bottom: 25px; } .faqs-2 .question h6, .faqs-2 .question h5 { line-height: 1.5; padding-right: 5%; margin-bottom: 15px; } .faqs-3-question h5 { line-height: 1.5; margin-bottom: 20px; } .faqs-1 .accordion-item p, .faqs-3 .accordion-item p { color: var(--gray); } /*------------------------------------------*/ /* FAQS ACCORDION /*------------------------------------------*/ .faqs-section .accordion-item { background-color: transparent!important; border: none; border-bottom: 1px solid var(--silver); } .faqs-3.faqs-section .accordion-item { border-bottom: 1px solid var(--silver); } .faqs-section .accordion-item.acc-last-item, .faqs-3.faqs-section .accordion-item.acc-last-item { border-bottom: none; } /*------------------------------------------*/ /* Question /*------------------------------------------*/ .faqs-section .accordion-thumb { margin: 0; padding: 25px 0; cursor: pointer; position: relative; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 22px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .faqs-section .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } /*------------------------------------------*/ /* Answer /*------------------------------------------*/ .faqs-section .accordion-panel { margin: 0; padding: 0 0 15px 0; display: none; } .faqs-section .accordion-thumb h5 { line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* MORE QUESTIONS BUTTON /*------------------------------------------*/ .more-questions { text-align: center; margin-top: 80px; } .faqs-2 .more-questions { margin-top: 50px; } .more-questions-holder { display: inline-block; margin: 0 auto; } .more-questions-txt { text-align: left!important; display: inline-block; float: left; } .more-questions-txt h6 { margin-bottom: 3px; } .more-questions-txt p { margin-bottom: 0; } .more-questions-btn { display: inline-block; margin-left: 30px; } /* ========================================================================== 22. BANNER =========================================================================== */ .banner-1-wrapper { overflow: hidden; padding: 90px 75px 95px; } .banner-2-wrapper { position: relative; overflow: hidden; text-align: center; } .banner-2-wrapper .banner-overlay { padding: 85px 70px 95px; } .banner-4-wrapper { overflow: hidden; padding: 55px 60px; border: 1.5px solid transparent; } .banner-5 { overflow: hidden; padding-top: 50px; } .banner-5-wrapper .banner-overlay { padding: 0 75px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-section .section-id { font-weight: 600; padding-top: 10px; margin-bottom: 30px; } .banner-2-txt h2 { padding: 0 4%; } .banner-4-txt h4.h4-md { line-height: 1.35; padding-right: 3%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { padding-right: 10%; margin: 22px 0 28px; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 2%; margin: 20px 0 28px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 22px; margin-bottom: 0; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } /*------------------------------------------*/ /* BANNER BUTTON /*------------------------------------------*/ .banner-4-btn { position: relative; display: inline-block; margin: 0 auto; top: 10px; } .banner-4-btn p { margin: 12px 0 0; } .banner-section p.btn-txt { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER IMAGE /*------------------------------------------*/ .banner-5-img.right-column { margin-top: -40px; padding-left: 25px; } .banner-5-img.left-column { margin-top: -40px; padding-right: 25px; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .banner-qr-code { position: absolute; bottom: 0; right: 55px; max-width: 110px; text-align: center; background: var(--white); padding: 14px 10px 10px; border-radius: 12px 12px 0 0; } .banner-qr-code img { padding: 0 4%; } .banner-qr-code p { font-size: 0.8rem; line-height: 1.35; margin: 10px 0 0; } /* ========================================================================== 23. BLOG =========================================================================== */ .blog-1 .blog-post { margin-bottom: 40px; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { overflow: hidden; text-align: center; } /*------------------------------------------*/ /* BLOG POST TEXT /*------------------------------------------*/ .blog-post-txt { margin-top: 35px; padding-left: 5px; padding-right: 5px; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .post-tag { display: block; font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; } .blog-post-txt h6, .blog-post-txt h5 { line-height: 1.35; margin-bottom: 10px; } .blog-post-txt h4 { line-height: 1.35; margin-bottom: 20px; } .blog-post-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* BLOG POST META /*------------------------------------------*/ .blog-post-meta { margin-top: 18px; margin-bottom: 0; } .wide-post .blog-post-meta { margin-top: 25px; margin-bottom: 0; } .post-meta-list li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .post-meta-list p { line-height: 1; margin-bottom: 0; } .meta-list-divider { position: relative; top: 0px; transform: rotate(-90deg); padding: 0 1px; } /* ========================================================================== 24. BLOG LISTING =========================================================================== */ #blog-page .blog-post { margin-bottom: 60px; } /*------------------------------------------*/ /* WIDE BLOG POSTS /*------------------------------------------*/ #blog-page .blog-post.wide-post { margin-bottom: 60px; } .wide-post .blog-post-img { margin-right: 15px; } .wide-post .blog-post-txt { margin-top: 0; margin-left: 15px; } /*------------------------------------------*/ /* BLOG POSTS CATEGORY /*------------------------------------------*/ .posts-category { margin-top: 40px; margin-bottom: 50px; } .posts-category h4 { line-height: 1; margin-bottom: 0; } .posts-category span { position: relative; top: 1px; } /* ========================================================================== 25. SINGLE BLOG POST =========================================================================== */ .blog-post-preview { padding: 0 3%; margin-bottom: 50px; } /*------------------------------------------*/ /* Single Post Title /*------------------------------------------*/ .single-post-title { padding: 0 10% 0 8%; margin-bottom: 50px; } .single-post-title .blog-post-meta { margin-bottom: 25px; } .single-post-title h2 { margin-bottom: 25px; } /*------------------------------------------*/ /* Single Post Text /*------------------------------------------*/ .single-post-txt { padding: 0 8%; } .single-post-txt h6 { margin-bottom: 16px; } .single-post-txt h5.h5-xl { margin-top: 60px; margin-bottom: 25px; } .single-post-txt h5 { margin-top: 30px; margin-bottom: 25px; } .single-post-txt p span { color: var(--black); font-weight: 600; } .single-post-txt p a { color: var(--theme-color); font-weight: 600; text-decoration: underline; } .single-post-txt p a:hover { color: var(--black); } /*------------------------------------------*/ /* Single Post Image /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 60px; margin-bottom: 60px; } /*------------------------------------------*/ /* POST DATA /*------------------------------------------*/ .post-data { margin: 60px 5% 0; padding: 60px 3% 100px; } /*------------------------------------------*/ /* POST AUTHOR /*------------------------------------------*/ .post-author-avatar { margin: 0 auto; float: left; margin-right: 20px; } .post-author-avatar img { width: 70px; height: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .post-author-txt { position: relative; top: 8px; } .post-author-txt p { line-height: 1; margin-top: 8px; margin-bottom: 0; } .post-author-txt p a { color: var(--black); font-weight: 500; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-list p { margin-bottom: 12px; } .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.4rem; } .share-social-icons a.share-ico span { color: var(--gray); opacity: .6; margin-left: 10px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .share-social-icons a.share-ico:hover span { opacity: 1; } /* ========================================================================== 26. NEWSLETTER =========================================================================== */ .newsletter-1 .newsletter-overlay, .newsletter-4 .newsletter-overlay { padding: 70px 0; } .newsletter-2 .newsletter-overlay { padding: 80px 0 70px; } .newsletter-3 .container { padding-left: 0; padding-right: 0; } .newsletter-3 .newsletter-overlay { padding: 60px 50px; } /*------------------------------------------*/ /* NEWSLETTER TYPOGRAPHY /*------------------------------------------*/ .newsletter-txt h2 { margin-bottom: 35px; } .newsletter-txt h4, .newsletter-txt h3, .newsletter-txt p.p-sm { margin-bottom: 0; } .newsletter-txt a { font-weight: 500; text-decoration: underline; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 10%; } /*------------------------------------------*/ /* NEWSLETTER FORM /*------------------------------------------*/ .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 30px; padding-left: 10%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 40px; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--silver); font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-right: 12px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .newsletter-2.newsletter-section .form-control { border: none; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { background-color: var(--white); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: var(--light-gray); } .newsletter-section .form-control:-ms-input-placeholder { color: var(--light-gray); } .newsletter-section .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { display: block; width: 100%!important; height: 58px; font-size: 0.925rem; padding: 0.7rem 1.3rem; } .newsletter-2.newsletter-section .btn { font-size: 0.975rem; padding: 0.7rem 1.5rem; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #3eb1ff; font-size: 0.9rem; font-weight: 400; line-height: 1; margin-top: 15px; margin-left: 5px; } .newsletter-section .text-center .form-notification { margin-left: 0; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 27. CONTACTS =========================================================================== */ .contacts-1 .contact-form p { color: var(--header-color); font-size: 0.95rem; line-height: 1; font-weight: 600; margin-bottom: 16px; padding-left: 8px; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.835rem; font-weight: 300; line-height: 1.6; padding-left: 0; margin-top: 35px; margin-bottom: 10px; } .contact-form-notice p a { color: var(--header-color); font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* CONTACT FORM INPUT /*------------------------------------------*/ .contact-form .form-control, .contact-form .form-select { height: 64px; background-color: #fdfdfe; border: 1.5px solid #d5d5d5; box-shadow: 0 0 0 0; color: #3a4a56; font-size: 1rem; font-weight: 400; padding: 0 20px; margin-bottom: 35px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .contact-form .form-select { display: inline-block; width: 100%; color: var(--gray); box-shadow: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: var(--gray); } .contact-form .form-control:-ms-input-placeholder { color: var(--gray); } .contact-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0px none; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 28. FOOTER =========================================================================== */ .footer { padding-bottom: 40px; } .footer-data-logo, .footer-data-socials { margin-bottom: 65px; } .footer-info, .footer-links { margin-bottom: 40px; } .footer-1 .fl-2, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 10%; } .footer-1 .fl-3, .footer-1 .fl-5, .footer-1 .footer-contacts { margin-bottom: 30px; } .footer-1 .fl-4 { margin-bottom: 30px; } /*------------------------------------------*/ /* FOOTER LINKS MOBILE /*------------------------------------------*/ .footer h6.m-title { display: none; position: relative; } .footer h6.m-title:after { font-family: Flaticon; font-weight: 300; content: "\f14f"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer h6.m-title.expanded:after { content: "\f14e"; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ img.footer-logo { width: auto; max-width: inherit; max-height: 32px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 35px; margin-bottom: 0; } .footer-copyright-logo { position: relative; display: inline-block; float: left; top: -4px; } .footer-copyright-logo img.footer-logo { max-height: 28px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .footer-qr-code { max-width: 100px; text-align: center; background: var(--snow); padding: 9px; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h6 { font-size: 1.0815rem; line-height: 1; margin-bottom: 26px; } .footer .footer-links h6.h6-lg { margin-bottom: 14px; } .footer a { color: var(--gray); } .footer.bg--black a { color: var(--snow); } .footer-contacts p { margin-bottom: 4px; } .footer-phone { margin-top: 12px; margin-bottom: 4px; } .footer .footer-links h6.h6-lg a { text-decoration: underline; } .footer.color--white a, .footer.color--white li a { color: var(--snow); } .footer.color--white a:hover, .footer.color--white li a:hover { color: var(--white)!important; } /*------------------------------------------*/ /* FOOTER MAIL LINK /*------------------------------------------*/ .footer-mail-link { margin: 10px 0 0 3px; } .footer-mail-link a { font-size: 1rem; font-weight: 400; } .footer-mail-link span { position: relative; top: 5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; } /*------------------------------------------*/ /* FOOTER INFO /*------------------------------------------*/ .footer-info-socials { margin-top: 5px; } .footer-info-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-info-socials li { padding-right: 14px; } .footer-2 .footer-info-socials li { padding-right: 10px; } .footer-info-socials li span { position: relative; opacity: .8; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; } .footer-info-socials li:hover span { opacity: 1; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .foo-links li { width: auto!important; display: block!important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .foo-links.ico-10 li span { position: relative; top: 1.5px; right: 4px; } .foo-links li p { font-weight: 400; margin-bottom: 10px; } .foo-links li:last-child p { margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER SOCIAL /*------------------------------------------*/ .footer-socials { margin: 0; display: inline-block; } .footer-socials li { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .footer-socials a { display: block; margin-right: 14px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 15px; } .footer-socials li span { opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-socials li span:hover { opacity: 1; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* FOOTER STORE BAGES /*------------------------------------------*/ .footer .store { float: none; margin-right: 0; margin-bottom: 15px; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form { margin-bottom: 20px; } .footer .newsletter-form { margin-top: 25px; } .footer-form .newsletter-form .input-group { background-color: var(--form-control); border: 1.5px solid var(--smoke); padding: 9px 2px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-form .form-control { height: 32px; background-color: transparent; border: none; color: var(--gray); font-size: 1rem; font-weight: 400; padding: 0 10px; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { background-color: var(--white)!important; } .footer-form .form-control:focus { border: none; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: var(--gray); } .footer-form .form-control:-ms-input-placeholder { color: var(--gray); } .footer-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { height: 32px; padding: 0 10px; border: none!important; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; } .footer-form .btn:hover { color: var(--black)!important; } .footer-form .btn:focus { border: none!important; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #1680fb; font-size: 0.85rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } .footer-form .form-notification.error { color: #fc2f4b; } .footer-form .form-notification.valid { color: #48af4b; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 40px; } .footer hr.footer-top-hr { margin-top: 0; margin-bottom: 100px; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .footer-copyright.copyright-logo p { display: inline-block; line-height: 28px; margin-left: 15px; } /*------------------------------------------*/ /* BOTTOM FOOTER SECONDARY LINK /*------------------------------------------*/ .bottom-secondary-link p { margin-bottom: 0; } .bottom-secondary-link p span { position: relative; top: 1.5px; padding: 0 2px; } .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .footer-data-socials li, .bottom-footer-list li, .bottom-footer-socials li, .bottom-footer-payment li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-data-socials li { padding-left: 11px; } .bottom-foo-socials li, .bottom-footer-socials li { padding-left: 12px; } .footer-data-socials p { position: relative; line-height: 1; top: 9px; margin-bottom: 0; } .footer-list-divider { position: relative; top: -0.5px; transform: rotate(-90deg); margin-left: 4px; } .bottom-footer-list.ico-15 [class*="flaticon-"]:before, .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .bottom-footer-list li p { display: inline-block; float: left; margin-bottom: 0; } .footer-data-socials li span, .bottom-footer-socials li span { position: relative; top: 4px; opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-data-socials li span:hover, .bottom-footer-socials li span:hover { opacity: 1; } .bottom-foo-socials li span { position: relative; top: 1px; right: 1px; opacity: .8; } .bottom-footer-payment li span { line-height: 1!important; position: relative; top: 4px; opacity: .8; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.2125rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } /* ========================================================================== 29. INNER PAGE WRAPPER =========================================================================== */ .inner-page-hero { padding-top: 190px; } .page-hero-section { position: relative; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; padding-top: 180px; padding-bottom: 100px; } /*------------------------------------------*/ /* INNER PAGE TITLE /*------------------------------------------*/ .inner-page-title { margin-bottom: 80px; } .inner-page-title h3, .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1; margin-top: 25px; margin-bottom: 0; } .inner-page-title p span { color: var(--black); font-weight: 600; } .page-hero-section p { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 30. PAGE PAGINATION =========================================================================== */ .page-link { color: var(--gray); font-size: 1.1rem; font-weight: 500; padding: 2px 14px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .page-item:last-child .page-link { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .page-item.disabled .page-link { color: var(--gray); background-color: transparent; border-color: transparent; } .page-link:hover { color: var(--gray); background-color: transparent; border-color: var(--gray); } .page-link:focus { color: var(--gray); background-color: transparent; border-color: transparent; box-shadow: 0 0; } .page-item.active .page-link { color: var(--white)!important; } .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); } .theme--indigo .page-item.active .page-link { background-color: var(--indigo); border-color: var(--indigo); } .theme--orchid .page-item.active .page-link { background-color: var(--orchid); border-color: var(--orchid); } .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); } .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); } .theme--red .page-item.active .page-link { background-color: var(--red); border-color: var(--red); } .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); } .theme--violet-red .page-item.active .page-link { background-color: var(--violet-red); border-color: var(--violet-red); } /* ========================================================================== 31. TERMS, PRIVACY, COOKIES PAGES =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .txt-block.legal-info h5 { margin: 50px 0 25px; } .txt-block.legal-info h6 { margin: 25px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 4px; } .legal-info p span { color: var(--black); font-weight: 700; } .legal-info a { font-weight: 700; text-decoration: underline; } .legal-info a:hover { color: var(--black); } /* ========================================================================== 32. SIGN-IN / SIGN-UP PAGE =========================================================================== */ .register-page { position: relative; width: 100%; min-height: 100vh; z-index: 3; background: url(../images/register-page.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .theme--dark .register-page { background: url(../images/register-page-dark.jpg); } /*------------------------------------------*/ /* REGISTER PAGE LOGO /*------------------------------------------*/ .register-page-logo { position: fixed; padding-top: 30px; } .register-page-logo img { width: auto; max-width: inherit; max-height: 28px; } /*------------------------------------------*/ /* REGISTER PAGE FORM /*------------------------------------------*/ .register-page-form { margin: 0 3%; padding: 140px 20px; } .reset-page-wrapper { padding: 180px 20px 140px; } /*------------------------------------------*/ /* REGISTER PAGE TITLE /*------------------------------------------*/ .register-form-title { text-align: center; margin-bottom: 30px; } .register-form-title p { font-size: 1.05rem; margin-top: 8px; margin-bottom: 0; } /*------------------------------------------*/ /* RESET PASSWORD PAGE TITLE /*------------------------------------------*/ .reset-form-title { text-align: center; margin-bottom: 22px; } .reset-form-title p.p-sm { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* REGISTER PAGE TYPOGRAPHY /*------------------------------------------*/ .reset-password-link p { position: relative; font-size: 0.85rem; line-height: 1; margin-bottom: 30px; } .reset-password-link p a { text-decoration: underline; } .form-data span { display: block; font-size: 0.825rem; margin-bottom: 0; } .reset-password-form .form-data p { margin-top: 22px; margin-bottom: 12px; } .form-data p a, .form-data span a { color: var(--header-color); font-weight: 500; text-decoration: underline; } .register-page-form p.create-account { font-size: 0.9rem; line-height: 1; margin-top: 24px; margin-bottom: 0; } .register-page-form p.create-account a { font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* REGISTER PAGE SEPARATOR LINE /*------------------------------------------*/ .separator-line { display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 500; margin: 25px 0; } .separator-line::before, .separator-line::after { content: ""; border-top: 1.5px solid rgba(5, 5, 5, .18); margin: 0 15px 0 0; flex: 1 0 20px; } .separator-line::after { margin: 0 0 0 15px; } /*------------------------------------------*/ /* REGISTER PAGE FORM INPUT /*------------------------------------------*/ .reset-page-wrapper .form-control, .register-page-form .form-control { height: 56px; background-color: var(--white); border: 1.5px solid #d2d2d2; color: var(--black); font-size: 0.935rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .register-page-form .form-control::-moz-placeholder { color: var(--gray); } .register-page-form .form-control:-ms-input-placeholder { color: var(--gray); } .register-page-form .form-control::-webkit-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* REGISTER PAGE FORM BUTTON /*------------------------------------------*/ #login .register-page-form .btn.submit, #signup .register-page-form .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; margin-top: 0; } #signup .register-page-form .btn.submit { margin-top: 25px; } .reset-page-wrapper .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; } .register-page-form .btn-google { width: 100%; color: var(--header-color); font-size: 0.975rem; padding: 0.75rem 1.6rem; background-color: var(--white); border: 1px solid var(--silver); } .btn-google img { position: relative; width: 25px; height: 25px; top: 0; right: 5px; } .btn-google span { position: relative; top: 1px; } .register-page-form .btn-google:hover { border: 1px solid var(--header-color); } /*------------------------------------------*/ /* REGISTER PAGE FORM MESSAGE /*------------------------------------------*/ .reset-form-msg { text-align: center; width: 100%!important; display: block; } .reset-password-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .reset-password-form .error { position: relative; color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; top: -10px; margin-bottom: 12px; padding-left: 10px; } /*------------------------------------------*/ /* FORM HIDE PASSWORD /*------------------------------------------*/ .wrap-input { position: relative; } .btn-show-pass { color: var(--light-gray); align-items: center; position: absolute; height: 100%; top: 15px; right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-show-pass.ico-20 [class^="flaticon-"]:before, .btn-show-pass.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } .btn-show-pass:hover { color: var(--theme-color); } .eye-pass.flaticon-invisible { color: var(--gray); } /* ========================================================================== 33. MODAL ========================================================================== */ .modal-body { padding: 0!important; } .modal-dialog.modal-xl { width: 760px; } .modal .modal-content { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .modal-body-content { padding: 60px 35px 35px; } .modal-body-content h4 { margin-bottom: 15px; } .modal-body-content p { margin-bottom: 0; } .modal .bg-img { background: url(../images/modal.jpg); background-repeat: no-repeat; background-position: left center; background-size: cover; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .btn-close { position: absolute; z-index: 1; right: 20px!important; top: 20px!important; height: 1.5rem; width: 1.5rem; background: rgba(14, 14, 14, .11)!important; border-radius: 50%; padding: 0; opacity: .9; z-index: 9999; } .modal .btn-close span { position: relative; line-height: 24px!important; top: -2px; } .modal .btn-close.ico-10 [class^="flaticon-"]:before, .modal .btn-close.ico-10 [class^="flaticon-"]:after { font-size: 0.6rem; } .modal .btn-close:focus { outline: none!important; box-shadow: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW NEWSLETTER FORM /*------------------------------------------*/ .modal-body .newsletter-form { margin-top: 25px; } .modal .newsletter-form .form-control { text-align: center; height: 58px; background-color: #f3f4f5; border: 1.5px solid transparent; font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-bottom: 20px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Form Input Focus /*------------------------------------------*/ .modal .newsletter-form .form-control:focus { outline: 0; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Form Input Placeholder /*------------------------------------------*/ .modal .newsletter-form .form-control::-moz-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Form Button /*------------------------------------------*/ .modal .input-group-btn { display: block; width: 100%!important; } .modal .newsletter-form .btn { display: block; width: 100%!important; height: 58px; font-size: 0.975rem; margin: 0; } /*------------------------------------------*/ /* Form Notification /*------------------------------------------*/ .modal .form-notification { text-align: center; color: #1680fb; font-size: 0.85rem; font-weight: 400; line-height: 1; margin-top: 12px; } .modal .form-notification.valid, .modal .form-notification.error { color: #fc2f4b; } .modal .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 34. COOKIES =========================================================================== */ #cookies { position: fixed; width: 90%; bottom: 25px; left: 5%; z-index: 200; padding: 25px; border: 1px solid #ddd; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); -moz-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); } #cookies p { color: #353f4f; font-size: 0.875rem; line-height: 1.5; margin: 0; } #cookies-ok { position: absolute; right: 52px; bottom: 18px; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 500; background-color: #353f4f!important; border: 2px solid #353f4f!important; padding: 6px 20px; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } #cookies-ok:hover { color: #353f4f!important; background-color: transparent!important; border-color: #353f4f!important; } #cookies-info { color: #353f4f!important; font-weight: 500; text-decoration: underline; margin-left: 10px; } .theme--blue #cookies-info:hover { color: var(--blue)!important; } .theme--green #cookies-info:hover { color: var(--green)!important; } .theme--indigo #cookies-info:hover { color: var(--indigo)!important; } .theme--orchid #cookies-info:hover { color: var(--orchid)!important; } .theme--pink #cookies-info:hover { color: var(--pink)!important; } .theme--purple #cookies-info:hover { color: var(--purple)!important; } .theme--red #cookies-info:hover { color: var(--red)!important; } .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; } .theme--violet-red #cookies-info:hover { color: var(--violet-red)!important; } #cookies-close { position: absolute; right: 25px; top: 20px; height: 12px; width: 12px; } #cookies-close svg { width: 11px; height: 11px; } /* ========================================================================== 35. COLOR SCHEME ========================================================================== */ :root { --theme-color: #7b5dd6; --theme-color-secondary: #ce67c9; } .bg--theme { background-color: var(--theme-color); } .bg--theme-2 { background-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* BUTTON /*------------------------------------------*/ .btn--theme, .hover--theme:hover, .theme--dark .btn--theme, .theme--dark .hover--theme:hover, .color--white .hover--theme:hover, .scroll .hover--theme:hover, .theme--dark .color--white .hover--theme:hover, .theme--dark .scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme, .theme--dark .btn--tra-theme, .theme--dark .hover--tra-theme:hover, .theme--dark .color--white .btn--tra-theme { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } .btn--theme-2, .hover--theme-2:hover, .theme--dark .btn--theme-2, .theme--dark .hover--theme-2:hover, .color--white .hover--theme-2:hover, .scroll .hover--theme-2:hover, .theme--dark .color--white .hover--theme-2:hover, .theme--dark .scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .btn--tra-theme-2, .hover--tra-theme-2:hover, .color--white .btn--tra-theme-2, .theme--dark .btn--tra-theme-2, .theme--dark .hover--tra-theme-2:hover, .theme--dark .color--white .btn--tra-theme-2 { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } /*------------------------------------------*/ /* COLOR /*------------------------------------------*/ .color--theme, .color--theme a, .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); } .color--theme-2, .color--theme-2 a, .color--theme-2 :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico.color--theme path, .shape-ico.color--theme-2 path { fill: #f6f4fd; } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .loading--theme .cssload-spinner:after, .loading--theme .cssload-spinner:before { border-color: var(--theme-color); } /*------------------------------------------*/ /* HEADER & NAVIGATION /*------------------------------------------*/ .nav-theme .sm-info { background-color: var(--theme-color); } .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .cbox-1:hover .cbox-1-ico.bg--theme { color: var(--theme-color); border-color: var(--theme-color); } .cbox-1:hover .cbox-1-ico.bg--theme-2 { color: var(--theme-color-secondary); border-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .p-table.theme--border { border: 3px solid var(--theme-color); } .pricing-features.ico--theme span { color: var(--theme-color); } .pricing-features.ico--theme-2 span { color: var(--theme-color-secondary); } .switcher { background-color: var(--theme-color); } .comp-table .color--theme { color: var(--theme-color); } .comp-table .color--theme-2 { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .newsletter-section .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { border-color: var(--theme-color)!important; } .footer-form .btn { color: var(--theme-color); } /*------------------------------------------*/ /* PAGINATION /*------------------------------------------*/ .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .reset-password-link p a:hover, .reset-password-form .form-data p a:hover { color: var(--theme-color); } .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { border-color: var(--theme-color); } .modal .newsletter-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* COOKIES /*------------------------------------------*/ #cookies-ok { background-color: var(--theme-color)!important; border: 2px solid var(--theme-color)!important; } #cookies-info:hover { color: var(--theme-color)!important; } /*------------------------------------------*/ /* DARK MODE /*------------------------------------------*/ .theme--dark .shape-ico.color--theme path, .theme--dark .shape-ico.color--theme-2 path { fill: rgba(43, 48, 64, .5); } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { border-color: var(--theme-color)!important; } /* ========================================================================== 36. DARK MODE ========================================================================== */ body.theme--dark { --dark-theme-bg: #13161f; --black: #f9f9f9; --gray: #c8c8c8; --ink: #101219; --form-control: #191c28; --header-color: #fff; --header-link: #dee1ea; --silver: rgba(43, 48, 64, 1); --smoke: rgba(43, 48, 64, .7); --white-smoke: #191c28; } body.theme--dark { background-color: var(--dark-theme-bg); color: var(--gray); } .theme--dark .bg--white, .theme--dark .bg--coal, .theme--dark .bg--lavender, .theme--dark .bg--magnolia, .theme--dark .bg--aliceblue, .theme--dark .bg--tra-violet-red { background-color: var(--white-smoke); } .theme--dark .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .theme--dark .bg--03 { background-image: url(../images/bg-03d.jpg); } .theme--dark .bg--05 { background-image: url(../images/bg-05d.jpg); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ .theme--dark hr.divider, .theme--dark .footer hr { background-image: linear-gradient(90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); } .theme--dark hr.divider.divider-light { background-color: #fff; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%); opacity: 1; } /*------------------------------------------*/ /* TYPOGRAPHY /*------------------------------------------*/ .theme--dark a { color: var(--gray); } .theme--dark a:hover, .theme--dark a.tra-link:hover span { color: var(--white); } /*------------------------------------------*/ /* BUTTONS /*------------------------------------------*/ .theme--dark .btn--transparent { color: var(--white)!important; } /* WHITE BUTTON */ .theme--dark .btn--white, .theme--dark .hover--white:hover, .theme--dark .color--white .hover--white:hover { color: #333!important; background-color: var(--white)!important; border-color: var(--white)!important; } /* BLACK BUTTON */ .theme--dark .btn--black, .theme--dark .hover--black:hover, .theme--dark .color--white .hover--black:hover { color: var(--ink)!important; border-color: var(--black)!important; background-color: var(--black)!important; } .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .color--white .btn--tra-black { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /* BLUE BUTTON */ .theme--dark .btn--blue, .theme--dark .hover--blue:hover, .theme--dark .color--white .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .btn--tra-blue, .theme--dark .hover--tra-blue:hover, .theme--dark .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /* GREEN BUTTON */ .theme--dark .btn--green, .theme--dark .hover--green:hover, .theme--dark .color--white .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .btn--tra-green, .theme--dark .hover--tra-green:hover, .theme--dark .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /* INDIGO BUTTON */ .theme--dark .btn--indigo, .theme--dark .hover--indigo:hover, .theme--dark .color--white .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .btn--tra-indigo, .theme--dark .hover--tra-indigo:hover, .theme--dark .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /* ORCHID BUTTON */ .theme--dark .btn--orchid, .theme--dark .hover--orchid:hover, .theme--dark .color--white .hover--orchid:hover, .theme--dark .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .btn--tra-orchid, .theme--dark .hover--tra-orchid:hover, .theme--dark .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /* PINK BUTTON */ .theme--dark .btn--pink, .theme--dark .hover--pink:hover, .theme--dark .color--white .hover--pink:hover, .theme--dark .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .btn--tra-pink, .theme--dark .hover--tra-pink:hover, .theme--dark .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /* PURPLE BUTTON */ .theme--dark .btn--purple, .theme--dark .hover--purple:hover, .theme--dark .color--white .hover--purple:hover, .theme--dark .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .btn--tra-purple, .theme--dark .hover--tra-purple:hover, .theme--dark .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /* RED BUTTON */ .theme--dark .btn--red, .theme--dark .hover--red:hover, .theme--dark .color--white .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .btn--tra-red, .theme--dark .hover--tra-red:hover, .theme--dark .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /* SKYBLUE BUTTON */ .theme--dark .btn--skyblue, .theme--dark .hover--skyblue:hover, .theme--dark .color--white .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .btn--tra-skyblue, .theme--dark .hover--tra-skyblue:hover, .theme--dark .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /* VIOLET RED BUTTON */ .theme--dark .btn--violet-red, .theme--dark .hover--violet-red:hover, .theme--dark .color--white .hover--violet-red:hover, .theme--dark .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .btn--tra-violet-red, .theme--dark .hover--tra-violet-red:hover, .theme--dark .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /* YELLOW BUTTON */ .theme--dark .btn--yellow, .theme--dark .hover--yellow:hover, .theme--dark .color--white .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .theme--dark .shape-ico.color--blue path, .theme--dark .shape-ico.color--indigo path, .theme--dark .shape-ico.color--skyblue path, .theme--dark .shape-ico.color--lilac path, .theme--dark .shape-ico.color--orchid path, .theme--dark .shape-ico.color--pink path, .theme--dark .shape-ico.color--purple path, .theme--dark .shape-ico.color--violet-red path { fill: rgba(43, 48, 64, .5); } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .theme--dark .dark-menu .wsmainfull, .theme--dark .white-menu .wsmainfull { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a { color: var(--header-link); } .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover { color: #eee!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover { color: var(--white)!important; } /*------------------------------------------*/ /* HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--white-smoke)!important; border: solid 1px var(--smoke)!important; -webkit-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); -moz-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); box-shadow: 0 2px 3px rgba(1, 1, 1, .1); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before, .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before { background-color: var(--ink); border-left: solid var(--ink); border-top: solid 1px var(--ink); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); background-color: transparent!important; } .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .theme--dark .tra-menu .wsmainfull.scroll, .theme--dark .white-menu .wsmainfull.scroll, .theme--dark .dark-menu.dark-scroll .wsmainfull.scroll { background-color: var(--ink)!important; padding: 0; -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-link); } .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(44, 49, 66, .72)!important; color: var(--white); } .theme--dark .navbar-light .scroll .btn.btn--tra-white { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .wsmainfull .hover--black:hover { color: var(--white)!important; border-color: #353f4f!important; background-color: #353f4f!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--black:hover { color: var(--ink)!important; border-color: var(--white)!important; background-color: var(--white)!important; } .theme--dark .navbar-light .scroll .wsmenu > .wsmenu-list > li > a.btn.hover--black:hover { color: var(--ink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--indigo:hover { color: var(--white)!important; border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .white-scroll .wsmainfull .hover--tra-white:hover, .theme--dark .white-scroll .wsmainfull.scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-white { display: block; } .theme--dark .navbar-dark .logo-white { display: none; } /*------------------------------------------*/ /* CAREERS /*------------------------------------------*/ .theme--dark .jobs-category { background-color: #181b27; border-color: var(--silver); } /*------------------------------------------*/ /* FEATURES /*------------------------------------------*/ .theme--dark .fbox-5.bg--white { background-color: #181a27; border-color: var(--silver); } .theme--dark .fbox-3.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .theme--dark .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } .theme--dark .bc-04-wrapper { border-color: var(--silver); } /*------------------------------------------*/ /* TEAM /*------------------------------------------*/ .theme--dark .team-member { background-color: var(--white-smoke); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .theme--dark .p-table { border-color: var(--silver); } .theme--dark .pricing-discount h6 { color: #353f4f; } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .theme--dark .int_tool-1 .tool_logo.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* RATING /*------------------------------------------*/ .theme--dark .rbox-1 .star-rating { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .rbox-3 p span { color: #fff; } /*------------------------------------------*/ /* REVIEWS /*------------------------------------------*/ .theme--dark .reviews-3-wrapper:after { background-color: #181a27; } .theme--dark .review-1 { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .owl-theme .owl-dots .owl-dot span { background: #3a3a3a; } .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: var(--white); } /*------------------------------------------*/ /* DOWNLOAD /*------------------------------------------*/ .theme--dark .download-item { border-color: var(--silver); } /*------------------------------------------*/ /* FAQs /*------------------------------------------*/ .theme--dark .accordion-panel { color: var(--gray); } .theme--dark .faqs-section .accordion-item .accordion-thumb:after, .theme--dark .faqs-section .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } /*------------------------------------------*/ /* BANNER /*------------------------------------------*/ .theme--dark .os-link { border-color: var(--silver); } .theme--dark .os-qr-code { background-color: #fff; } .theme--dark .os-logo img { filter: invert(100%); opacity: .4; } .theme--dark .banner-qr-code p { color: var(--ink); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .theme--dark .newsletter-section .form-control::-moz-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: var(--gray); } .theme--dark .newsletter-1.newsletter-section .form-control, .theme--dark .newsletter-3.newsletter-section .form-control { background-color: var(--white-smoke); } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { background-color: var(--dark-theme-bg); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .theme--dark .contact-form .form-control, .theme--dark .contact-form .form-select { background-color: var(--white-smoke); border: 1.5px solid var(--silver); } .theme--dark .contact-form .form-control:focus, .theme--dark .contact-form .form-select:focus { background-color: var(--dark-theme-bg); border: 1.5px solid var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .theme--dark .footer-form .newsletter-form .input-group:focus-within { background-color: var(--dark-theme-bg)!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* INNER PAGE WRAPPER /*------------------------------------------*/ .theme--dark .inner-page-title p span { color: var(--white); } /*------------------------------------------*/ /* TERMS, PRIVACY, COOKIES PAGES /*------------------------------------------*/ .theme--dark .legal-info a, .theme--dark .legal-info p span { color: rgba(255, 255, 255, .86); } .theme--dark .legal-info a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .modal-body-content h4 { color: #313435; } .theme--dark .modal-body-content p { color: #6c757d; } .theme--dark .newsletter-form .hover--black:hover { color: #fff!important; border-color: #353f4f!important; background-color: #353f4f!important; } /*------------------------------------------*/ /* SIGN-IN / SIGN-UP PAGE /*------------------------------------------*/ .theme--dark .separator-line::before, .theme--dark .separator-line::after { border-top: 1.5px solid rgba(255, 255, 255, .18); } .theme--dark .reset-page-wrapper .form-control, .theme--dark .register-page-form .form-control { background-color: #2c3344; border: 1px solid #2c3344; } .theme--dark .reset-page-wrapper .form-control:focus, .theme--dark .register-page-form .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--theme-color); } .theme--dark .register-page-form .btn-google { color: var(--header-color); background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .register-page-form .btn-google:hover { border-color: var(--header-color); } /* Template Name: Pintex - Mobile App & Software Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Pintex - Mobile App Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: https://www.jthemes.com/ Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App */ /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ :root { --alice-blue: #f1f3ff; --black: #353f4f; --blue: #0083ff; --coal: #111b21; --disable: #b5b5b5; --form-control: #fafafd; --gray: #545465; --green: #0fbc49; --header-color: #120036; --indigo: #7b5dd6; --ink: #1d222f; --lavender: #f8f5fd; --light-blue: #edf8fd; --light-gray: #90a0b2; --lilac: #beaedb; --magnolia: #f9f7fd; --metal: #2c3840; --noice: #f8f9fa; --orchid: #ce67c9; --pink: #fc5a8d; --purple: #9370db; --silver: #ccc; --sky-blue: #04aaff; --smoke: #e7e7e7; --snow: #f5f6f6; --violet-red: #c73e9b; --white: #fff; --white-smoke: #f4f4f9; --yellow: #ffbf15; --tra-black: rgba(5, 5, 5, .05); --tra-gray: rgba(96, 96, 96, .13); --tra-indigo: rgba(128, 96, 225, .13); --tra-ink: rgba(1, 1, 1, .1); --tra-purple: rgba(102, 51, 255, .13); --tra-white: rgba(255, 255, 255, .2); --tra-violet-red: rgba(237, 230, 244, .84); --tra-white-smoke: rgba(244, 244, 249, .13); } html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--gray); line-height: 1.6666; font-weight: 400; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block--shadow { -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } .img-block .block--shadow { -webkit-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); -moz-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); } /*------------------------------------------*/ /* BORDER SETTINGS /*------------------------------------------*/ .block--border { border: 1px solid var(--silver); } .block--border.border--light, .block--border.block--shadow { border: 1px solid var(--smoke); } .x-border { border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); } .x-border.border--light { border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); } .t-border { border-top: 1px solid var(--silver); } .t-border.border--light { border-top: 1px solid var(--smoke); } .b-border { border-bottom: 1px solid var(--silver); } .b-border.border--light { border-bottom: 1px solid var(--smoke); } /*------------------------------------------*/ /* BORDER RADIUS SETTING /*------------------------------------------*/ .r-0 { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .r-02 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .r-04 { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .r-06 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .r-08 { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .r-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .r-12 { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } .r-14 { -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; } .r-16 { -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .r-18 { -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; } .r-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .r-22 { -webkit-border-radius: 22px; -moz-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; } .r-24 { -webkit-border-radius: 24px; -moz-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; } .r-26 { -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; border-radius: 26px; } .r-28 { -webkit-border-radius: 28px; -moz-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; } .r-30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } .r-32 { -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; border-radius: 32px; } .r-34 { -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; } .r-36 { -webkit-border-radius: 36px; -moz-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; } .r-100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .py-90 { padding-top: 90px; padding-bottom: 90px; } .py-100 { padding-top: 100px; padding-bottom: 100px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .px-15 { padding-left: 15x; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-20 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .mt-0 { margin-top: 0!important; } .mt-15 { margin-top: 15x; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-0 { margin-bottom: 0!important; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--aliceblue { background-color: var(--alice-blue); } .bg--black { background-color: var(--black); } .bg--blue { background-color: var(--blue); } .bg--coal { background-color: var(--coal); } .bg--indigo { background-color: var(--indigo); } .bg--lavender { background-color: var(--lavender); } .bg--lightblue { background-color: var(--light-blue); } .bg--lilac { background-color: var(--lilac); } .bg--magnolia { background-color: var(--magnolia); } .bg--noice { background-color: var(--noice); } .bg--orchid { background-color: var(--orchid); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--red { background-color: var(--red); } .bg--skyblue { background-color: var(--sky-blue); } .bg--snow { background-color: var(--snow); } .bg--violet-red { background-color: var(--violet-red); } .bg--white { background-color: var(--white); } .bg--whitesmoke { background-color: var(--white-smoke); } .bg--yellow { background-color: var(--yellow); } /*------------------------------------------*/ /* TRANSPARENT BACKGROUND COLORS /*------------------------------------------*/ .bg--tra-indigo { background-color: var(--tra-indigo); } .bg--tra-purple { background-color: var(--tra-purple); } .bg--tra-violet-red { background-color: var(--tra-violet-red); } /*------------------------------------------*/ /* GRADIENT COLOR BACKGROUND /*------------------------------------------*/ .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%); } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .shape--01:after, .shape--02:after { position: absolute; content: ''; width: 100%; height: 55%; left: 0; z-index: -1; } .shape--01:after { top: 0; } .shape--02:after { top: 45%; } .shape--whitesmoke:after { background-color: var(--white-smoke); } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06, .bg--07 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../images/bg-01.jpg); } .bg--02 { background-image: url(../images/bg-02.jpg); } .bg--03 { background-image: url(../images/bg-03.jpg); } .bg--04 { background-image: url(../images/bg-04.jpg); } .bg--05 { background-image: url(../images/bg-05.jpg); } .bg--06 { background-image: url(../images/bg-06.jpg); } .bg--07 { background-image: url(../images/bg-07.jpg); } /*------------------------------------------*/ /* BACKGROUND PATTERN /*------------------------------------------*/ .pattern--01, .pattern--02, .pattern--03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .pattern--01 { background-image: url(../images/pattern-01.png); } .pattern--02 { background-image: url(../images/pattern-02.png); } .pattern--03 { background-image: url(../images/pattern-03.png); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ hr.divider { width: 100%; height: 1px; background-color: transparent; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%); opacity: .4; border: none; margin: 0; } /*------------------------------------------*/ /* WAVE SHAPE BOTTOM /*------------------------------------------*/ .wave-shape-bottom { position: absolute; bottom: 0; left: 0; width: 100%; } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h6, h5, h4, h3, h2, h1 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-weight: 700; letter-spacing: 0; margin-bottom: 0; } /*------------------------------------------*/ /* HEADER SIZE /*------------------------------------------*/ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.25rem; } /* 20px */ h6.h6-xl { font-size: 1.3125rem; } /* 21px */ h5 { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h5.h5-xl { font-size: 1.75rem; } /* 28px */ h4 { font-size: 1.875rem; } /* 30px */ h4.h4-md { font-size: 2rem; } /* 32px */ h4.h4-lg { font-size: 2.125rem; } /* 34px */ h4.h4-xl { font-size: 2.25rem; } /* 36px */ h3 { font-size: 2.375rem; } /* 38px */ h3.h3-md { font-size: 2.5rem; } /* 40px */ h3.h3-lg { font-size: 2.6255rem; } /* 42px */ h3.h3-xl { font-size: 2.75rem; } /* 44px */ h2 { font-size: 2.875rem; } /* 46px */ h2.h2-md { font-size: 3rem; } /* 48px */ h2.h2-lg { font-size: 3.125rem; } /* 50px */ h2.h2-xl { font-size: 3.25rem; } /* 52px */ h2.h2-title { font-size: 3.375rem; } /* 54px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 0.9375rem; } /* 15px */ p { font-size: 1rem; } /* 16px */ p.p-md { font-size: 1.0625rem; } /* 17px */ p.p-lg { font-size: 1.125rem; } /* 18px */ p.p-xl { font-size: 1.1875rem; } /* 19px */ /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: var(--header-color); text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: var(--header-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a.tra-link { font-size: 1rem; line-height: 1; font-weight: 600; } a.tra-link span { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.75rem; line-height: 0.7rem!important; top: 1.5px; left: 1px; } a.tra-link:hover span { color: var(--black)!important; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ol.digit-list p, ul.simple-list.long-list p { margin-bottom: 8px; } .content-section ul.simple-list.long-list p { margin-bottom: 5px; } /*------------------------------------------*/ /* DIGIT LIST /*------------------------------------------*/ ol.digit-list { padding: 0; margin-left: 15px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { font-size: 1rem; line-height: 1; font-weight: 600; background-color: transparent; padding: 0.9rem 1.8rem; border: 2px solid transparent; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .btn.btn-sm { font-size: 0.975rem; padding: 0.7rem 1.5rem; } .btn.btn-md { font-size: 1rem; padding: 0.9425rem 1.75rem; } .btn.btn-lg { font-size: 1.05rem; padding: 1.1rem 1.8rem; } .btn.ico-20.ico-left, .btn.ico-20.ico-right { padding: 0.9rem 1.55rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.1rem; letter-spacing: -0.35px; padding: 0.9rem 1.35rem; } .btn.ico-30.ico-left, .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Buttons Group /*------------------------------------------*/ .text-center .btns-group { display: inline-block; } .btns-group .btn:first-child { margin-right: 15px; } .btns-group .btn.ico-30.ico-left { padding: 0.37rem 0.5rem; } .btns-group .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Button Icon /*------------------------------------------*/ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1rem; line-height: 0.7rem!important; top: 4px; } .btn.ico-25 [class*="flaticon-"]:before, .btn.ico-25 [class*="flaticon-"]:after { position: relative; font-size: 1.275rem; line-height: 1rem!important; top: 1px; } .btn.ico-25.ios-btn [class*="flaticon-"]:before, .btn.ico-25.ios-btn [class*="flaticon-"]:after { top: 0; } .ico-25-txt { position: relative; top: -3px; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { position: relative; top: 0; right: 4px; } .btn.ico-30.ico-right span { position: relative; top: 0; left: 4px; } .btn.ico-30.ico-left span.ico-30-txt, .btn.ico-30.ico-right span.ico-30-txt { position: relative; top: -10px; right: 0; } .btn.ico-30.ico-right span.ico-30-txt { left: 0; } /*------------------------------------------*/ /* Button Text /*------------------------------------------*/ p.btn-txt { margin: 15px 0 0 0; } p.btn-txt span { font-weight: 700; } .btn-rating p.btn-txt { margin: 0; } .star-rating small, .star-rating span.rating-txt { font-size: 0.9375rem; } p.btns-group-txt { margin: 14px 0 0 0; } .btn-rating { margin-top: 10px; } .text-center p.btns-group-txt { margin-top: 20px; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding-left: 5px; } .text-center p.btn-txt.ico-15, .text-center p.btns-group-txt.ico-15 { padding-left: 0; } p.btn-txt span, p.btns-group-txt span { position: relative; top: 0.5px; right: 2px; } p.btns-group-txt span.txt-data { display: block; top: 0; right: 0; } p.btns-group-txt span.txt-data a { margin-left: 4px; text-decoration: underline; } p.btns-group-txt span.txt-data a:hover { text-decoration: none; } .hero-section .color--white p.btns-group-txt span.txt-data a:hover { color: var(--white)!important; } .btn-txt.ico-15 [class*="flaticon-"]:before, .btn-txt.ico-15 [class*="flaticon-"]:after, .btns-group-txt.ico-15 [class*="flaticon-"]:before, .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .star-rating.ico-10 [class*="flaticon-"]:before, .star-rating.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; top: 1px; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; } .p-sm.btn-txt.ico-20 [class*="flaticon-"]:before, .p-sm.btn-txt.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.875rem; top: 1px; } .os-version-ext { margin-top: 16px; } .os-version-ext .star-rating small { font-size: 0.9rem; margin-left: 6px; } span.os-version { display: block; font-size: 0.9rem; line-height: 1; margin-top: 5px; } /*------------------------------------------*/ /* TRANPARENT BUTTON /*------------------------------------------*/ .btn--transparent { color: var(--black)!important; background-color: transparent!important; border-color: transparent!important; } .btn--transparent.color--white { color: var(--white)!important; } .btn--transparent:hover { background-color: transparent!important; border-color: transparent!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover, .color--white .hover--white:hover { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .white-scroll .scroll .hover--tra-white:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } .white-scroll .scroll .hover--white:hover { color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover, .white-scroll .scroll .hover--black:hover { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .btn--tra-black, .hover--tra-black:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* TRA GRAY BUTTON /*------------------------------------------*/ .btn--tra-gray, .hover--tra-gray:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* BLUE BUTTON /*------------------------------------------*/ .btn--blue, .hover--blue:hover, .color--white .hover--blue:hover, .white-scroll .scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /*------------------------------------------*/ /* GREEN BUTTON /*------------------------------------------*/ .btn--green, .hover--green:hover, .color--white .hover--green:hover, .white-scroll .scroll .hover--green:hover { color: var(--white)!important;border-color: var(--green)!important; background-color: var(--green)!important; } .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /*------------------------------------------*/ /* INDIGO BUTTON /*------------------------------------------*/ .btn--indigo, .hover--indigo:hover, .color--white .hover--indigo:hover, .white-scroll .scroll .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .btn--tra-indigo, .hover--tra-indigo:hover, .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /*------------------------------------------*/ /* ORCHID BUTTON /*------------------------------------------*/ .btn--orchid, .hover--orchid:hover, .color--white .hover--orchid:hover, .white-scroll .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .btn--tra-orchid, .hover--tra-orchid:hover, .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /*------------------------------------------*/ /* PINK BUTTON /*------------------------------------------*/ .btn--pink, .hover--pink:hover, .color--white .hover--pink:hover, .white-scroll .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /*------------------------------------------*/ /* PURPLE BUTTON /*------------------------------------------*/ .btn--purple, .hover--purple:hover, .color--white .hover--purple:hover, .white-scroll .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /*------------------------------------------*/ /* RED BUTTON /*------------------------------------------*/ .btn--red, .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover { color: var(--white)!important;border-color: var(--red)!important; background-color: var(--red)!important; } .btn--tra-red, .hover--tra-red:hover, .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /*------------------------------------------*/ /* SKY BLUE BUTTON /*------------------------------------------*/ .btn--skyblue, .hover--skyblue:hover, .color--white .hover--skyblue:hover, .white-scroll .scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /*------------------------------------------*/ /* VIOLET RED BUTTON /*------------------------------------------*/ .btn--violet-red, .hover--violet-red:hover, .color--white .hover--violet-red:hover, .white-scroll .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .btn--tra-violet-red, .hover--tra-violet-red:hover, .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /*------------------------------------------*/ /* YELLOW BUTTON /*------------------------------------------*/ .btn--yellow, .hover--yellow:hover, .color--white .hover--yellow:hover, .white-scroll .scroll .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: var(--white); -webkit-box-shadow: none; box-shadow: none; } .btn--transparent:focus { background-color: transparent; border-color: transparent; } .btn--tra-black:focus, .btn--transparent:focus, .btn.btn--tra-gray:focus { color: var(--black); -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BADGE ICONS /*------------------------------------------*/ .stores-badge { display: inline-block; } .store { display: inline-block; text-align: center; margin-right: 12px; } .store:last-child { margin-right: 0; } .store img { width: auto; max-width: inherit; } .badge-img-xs .store img { max-height: 2.5rem; } .badge-img-sm .store img { max-height: 2.625rem; } .badge-img-md .store img { max-height: 2.875rem; } .badge-img-lg .store img { max-height: 3rem; } .badge-img-xl .store img { max-height: 3.25rem; } /*------------------------------------------*/ /* WATCH VIDEO LINK /*------------------------------------------*/ .watch-video { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; margin-top: 25px; } .btns-group .watch-video { display: inline-block; margin-top: 0!important; top: 22px; } /*------------------------------------------*/ /* Link Icon /*------------------------------------------*/ .watch-video-link { position: relative; text-align: center; float: left; width: 2.85rem; height: 2.85rem; color: var(--white); border: none; margin-right: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .watch-video-link:before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; bottom: -3px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .watch-video-link:hover:before { opacity: .75; left: -8px; right: -8px; top: -8px; bottom: -8px; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { font-size: 2rem; line-height: 2.85rem!important; margin-left: 5px; } /*------------------------------------------*/ /* Link Text /*------------------------------------------*/ .watch-video-txt { overflow: hidden; flex: 1; max-width: 100%; text-align: left!important; } p.video-txt-lg { font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 5px; } p.video-txt-sm { font-size: 0.925rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: var(--white); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn-xl { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .video-btn-lg { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-sm { width: 4.375rem; height: 4.375rem; margin-top: -2.1875rem; margin-left: -2.1875rem; } .video-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-sm [class^="flaticon-"]:after { font-size: 3.5rem; line-height: 4.375rem!important; margin-left: 5px; } .video-btn:hover .video-block-wrapper { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-lg:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } .video-btn.video-btn-md:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .video-btn.video-btn-sm:hover:before { opacity: .75; left: -0.75rem; right: -0.75rem; top: -0.75rem; bottom: -0.75rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } /* 12px */ .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } /* 15px */ .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } /* 20px */ .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } /* 25px */ .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } /* 30px */ .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } /* 35px */ .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } /* 40px */ .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } /* 45px */ .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } /* 50px */ .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } /* 55px */ .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } /* 60px */ .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } /* 65px */ .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } /* 70px */ .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } /* 75px */ .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } /* 80px */ .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } /* 85px */ .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } /* 90px */ .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } /* 95px */ .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } /* 100px */ .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } /* 105px */ .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } /* 110px */ .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } /* 115px */ .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } /* 120px */ .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /* 125px */ /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-55 .shape-ico svg { width: 125px; height: 125px; top: -42px; left: calc(50% - 66px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -48px; left: calc(50% - 75px); } .shape-ico.color--blue path { fill: #f4f9fc; } .shape-ico.color--indigo path { fill: #f6f4fd; } .shape-ico.color--orchid path { fill: rgba(218, 112, 214, .1); } .shape-ico.color--pink path { fill: rgba(252, 234, 239, .7); } .shape-ico.color--purple path { fill: #f6f4fd; } .shape-ico.color--skyblue path { fill: rgba(4, 170, 255, .09); } .shape-ico.color--violet-red path { fill: rgba(199, 62, 155, .08); } /*------------------------------------------*/ /* PNG ICONS SETTINGS /*------------------------------------------*/ .img-20 img { width: 20px; height: 20px; } .img-25 img { width: 25px; height: 25px; } .img-30 img { width: 30px; height: 30px; } .img-35 img { width: 35px; height: 35px; } .img-40 img { width: 40px; height: 40px; } .img-45 img { width: 45px; height: 45px; } .img-50 img { width: 50px; height: 50px; } .img-55 img { width: 55px; height: 55px; } .img-60 img { width: 60px; height: 60px; } .img-65 img { width: 65px; height: 65px; } .img-70 img { width: 70px; height: 70px; } .img-75 img { width: 75px; height: 75px; } .img-80 img { width: 80px; height: 80px; } .img-85 img { width: 85px; height: 85px; } .img-90 img { width: 90px; height: 90px; } .img-95 img { width: 95px; height: 95px; } .img-100 img { width: 100px; height: 100px; } .img-105 img { width: 105px; height: 105px; } .img-110 img { width: 110px; height: 110px; } .img-115 img { width: 115px; height: 115px; } .img-120 img { width: 120px; height: 120px; } .img-125 img { width: 125px; height: 125px; } .img-130 img { width: 130px; height: 130px; } .img-135 img { width: 135px; height: 135px; } .img-140 img { width: 140px; height: 140px; } .img-145 img { width: 145px; height: 145px; } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .5); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* SECTION ID /*------------------------------------------*/ .section-id { display: block; font-size: 0.85rem; line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 32px; } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title p { margin-top: 22px; margin-bottom: 0; } .section-title .btns-group { margin-top: 35px; } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages, .text-center .advantages { margin-top: 15px; } .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; } .advantages-links-divider { position: relative; top: 1px; transform: rotate(-90deg); } .advantages li p { display: inline-block; float: left; margin-bottom: 0; } .advantages.ico-15 li p span { position: relative; top: 2px; right: -1px; } .advantages.ico-15 [class*="flaticon-"]:before, .advantages.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .advantages li p a { font-weight: 400; text-decoration: underline; } .advantages li p a:hover { text-decoration: underline; } .white--color .advantages li p a:hover { color: var(--white); } /*------------------------------------------*/ /* COMPATABILITY /*------------------------------------------*/ .compatibility { display: inline-block; padding: 3px 20px; margin-top: 15px; margin-bottom: 0; } .compatibility span { position: relative; top: -1.5px; right: 2px; } .compatibility.ico-10 [class*="flaticon-"]:before, .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; } /*------------------------------------------*/ /* TOOLS LIST / PAYMENT METHODS /*------------------------------------------*/ .tools-list, .payment-methods { margin-top: 25px; } .tools-list p, .payment-methods p { font-weight: 400; margin-bottom: 12px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-right: 6px; } /*------------------------------------------*/ /* Payment Icons /*------------------------------------------*/ .payment-icons li { display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; padding-right: 5px; } .payment-icons li:last-child { padding-right: 0; } .payment-icons img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: var(--gray); border-left: 3px solid var(--green); font-style: italic; padding-left: 20px; margin-bottom: 16px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* Quote Author /*------------------------------------------*/ .quote-author { position: relative; display: inline-block; padding: 0 0 0 15px; text-align: left; top: 16px; } .quote-author h6 { margin-bottom: 1px; } .quote-author span { font-size: 0.95rem; } /*------------------------------------------*/ /* USER AVATARS /*------------------------------------------*/ .txt-block .users { margin-top: 22px; } .users img { width: auto; max-width: inherit; max-height: 50px; } .users p { font-size: 0.935rem; position: relative; top: 13px; left: 10px; display: inline-block; line-height: 1.4; margin-bottom: 0; } .users p span { display: block; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--white, .color--white a, .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white); } .color--black, .color--black a, .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); } .color--header, .color--header a, .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); } .color--gray, .color--gray a, .color--gray :is(h1, h2, h3, h4, h5, h6) { color: var(--gray); } .color--lightgray, .color--lightgray a, .color--lightgray :is(h1, h2, h3, h4, h5, h6) { color: var(--light-gray); } .color--blue, .color--blue a, .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); } .color--green, .color--green a, .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); } .color--indigo, .color--indigo a, .color--indigo :is(h1, h2, h3, h4, h5, h6) { color: var(--indigo); } .color--lilac, .color--lilac a, .color--lilac :is(h1, h2, h3, h4, h5, h6) { color: var(--lilac); } .color--orchid, .color--orchid a, .color--orchid :is(h1, h2, h3, h4, h5, h6) { color: var(--orchid); } .color--pink, .color--pink a, .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); } .color--purple, .color--purple a, .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); } .color--red, .color--red a, .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); } .color--skyblue, .color--skyblue a, .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); } .color--violet-red, .color--violet-red a, .color--violet-red :is(h1, h2, h3, h4, h5, h6) { color: var(--violet-red); } .color--yellow, .color--yellow a, .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-upcase { text-transform: uppercase } .w-200 { font-weight: 200; } .w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .w-800 { font-weight: 800; } .w-900 { font-weight: 900; } /*------------------------------------------*/ /* TEXT HIGHLIGHT /*------------------------------------------*/ .highlight { background: linear-gradient(to right, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1875)); } /* ========================================================================== 03. PRELOADER SPINNER ========================================================================== */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: #f5f5f5; } #loader { display: block; position: relative; top: 50%; transform: translateY(-50%); } .cssload-spinner { position: absolute; width: 68px; height: 68px; left: 50%; margin-left: -34px; margin-top: -34px; } .cssload-spinner:after, .cssload-spinner:before { position: absolute; content: ""; border: 4px solid var(--blue); width: 64px; height: 64px; } .theme--blue .cssload-spinner:after, .theme--blue .cssload-spinner:before { border-color: var(--blue); } .theme--green .cssload-spinner:after, .theme--green .cssload-spinner:before { border-color: var(--green); } .theme--indigo .cssload-spinner:after, .theme--indigo .cssload-spinner:before { border-color: var(--indigo); } .theme--orchid .cssload-spinner:after, .theme--orchid .cssload-spinner:before { border-color: var(--orchid); } .theme--pink .cssload-spinner:after, .theme--pink .cssload-spinner:before { border-color: var(--pink); } .theme--purple .cssload-spinner:after, .theme--purple .cssload-spinner:before { border-color: var(--purple); } .theme--red .cssload-spinner:after, .theme--red .cssload-spinner:before { border-color: var(--purple); } .theme--skyblue .cssload-spinner:after, .theme--skyblue .cssload-spinner:before { border-color: var(--sky-blue); } .theme--violet-red .cssload-spinner:after, .theme--violet-red .cssload-spinner:before { border-color: var(--violet-red); } .cssload-spinner:after { animation: cssload-spinner1 2.5s linear infinite; -o-animation: cssload-spinner1 2.5s linear infinite; -ms-animation: cssload-spinner1 2.5s linear infinite; -webkit-animation: cssload-spinner1 2.5s linear infinite; -moz-animation: cssload-spinner1 2.5s linear infinite; } .cssload-spinner:before { width: 88px; height: 88px; margin-left: -13.5px; margin-top: -13.5px; animation: cssload-spinner2 2.5s linear infinite; -o-animation: cssload-spinner2 2.5s linear infinite; -ms-animation: cssload-spinner2 2.5s linear infinite; -webkit-animation: cssload-spinner2 2.5s linear infinite; -moz-animation: cssload-spinner2 2.5s linear infinite; } @keyframes cssload-spinner1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes cssload-spinner1 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-spinner1 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-spinner1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-spinner1 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes cssload-spinner2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-o-keyframes cssload-spinner2 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } } @-ms-keyframes cssload-spinner2 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); } } @-webkit-keyframes cssload-spinner2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes cssload-spinner2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: var(--white)!important; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .dark-menu .wsmainfull { padding: 6px 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; display: block; font-size: 1rem; line-height: 50px; font-weight: 600; letter-spacing: 0; text-decoration: none; margin: 0 7px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 35px; width: 0; } /*------------------------------------------*/ /* HEADER LINK INFO /*------------------------------------------*/ span.sm-info { position: relative; display: inline-block; text-align: center; width: 20px; height: 20px; color: var(--white); font-size: 0.65rem; line-height: 19px; font-weight: 700; margin-left: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; } .nav-blue .sm-info { background-color: var(--blue); } .nav-green .sm-info { background-color: var(--green); } .nav-indigo .sm-info { background-color: var(--indigo); } .nav-orchid .sm-info { background-color: var(--orchid); } .nav-pink .sm-info { background-color: var(--pink); } .nav-purple .sm-info { background-color: var(--purple); } .nav-red .sm-info { background-color: var(--red); } .nav-skyblue .sm-info { background-color: var(--sky-blue); } .nav-violet-red .sm-info { background-color: var(--violet-red); } /*------------------------------------------*/ /* HEADER BUTTONS /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 1rem; line-height: 30px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 14px; padding: 6px 28px 8px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 4px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 25px; } .wsmenu > .wsmenu-list > li a.store.header-store { line-height: 1; margin-top: 13px; margin-left: 10px; margin-bottom: 0; padding: 0; } /*------------------------------------------*/ /* LANGUAGE SELECT /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { width: auto; min-width: 115px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.875rem; padding: 8px 11px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 8px 11px; } /*------------------------------------------*/ /* HEADER STORE BADGES /*------------------------------------------*/ .store.header-store img { max-height: 44px; } /*------------------------------------------*/ /* HEADER SOCIAL LINKS /*------------------------------------------*/ .header-socials { margin: 0; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .header-socials a { display: block; margin-left: 15px; } .navbar-light .header-socials a { color: #ddd; } .navbar-light .header-socials a:hover { color: var(--silver); } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-20 [class*="flaticon-"]:after { line-height: 70px!important; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 200px; top: 62px; padding: 12px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* HEADER SUBMENU SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 210px; position: absolute; left: 102%; top: 0; margin: 0; padding: 10px; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { position: absolute; top: 12px; right: 12px; } .sub-menu.ico-10 [class*="flaticon-"]:before, .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 62px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 33%; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--tra-white-smoke); color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 74%!important; left: 25%; padding: 20px 10px; } .wsmegamenu.w-75 .col-lg-3 { padding: 0 6px; } /*------------------------------------------*/ /* SUBMENU TITLE /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu .title, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title { color: var(--light-gray); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 15px 13px; } /*------------------------------------------*/ /* DARK HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--metal)!important; border: solid 1px var(--metal)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } .dark-menu .title, .black-scroll .scroll .title, .dark-menu .icons-menu-txt span, .black-scroll .scroll .icons-menu-txt span { color: var(--white)!important; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--smoke); } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: var(--ink); } .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--blue); } .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--green); } .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--indigo); } .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--orchid); } .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--pink); } .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--purple); } .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--red); } .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--sky-blue); } .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--violet-red); } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR WHITE SCROLL /*------------------------------------------*/ .tra-menu.white-scroll .wsmainfull.scroll, .white-menu.white-scroll .wsmainfull.scroll, .tra-menu.border-header.white-scroll .wsmainfull.scroll { padding: 0; border: none; background-color: rgba(255, 255, 255, .7)!important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--ink)!important; } /*------------------------------------------*/ /* NAVBAR BLACK SCROLL /*------------------------------------------*/ .tra-menu.black-scroll .wsmainfull.scroll, .dark-menu.black-scroll .wsmainfull.scroll { padding: 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: var(--silver)!important; } /*------------------------------------------*/ /* WHITE SCROLL BUTTONS /*------------------------------------------*/ .white-scroll .scroll .btn--tra-white { color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK SCROLL BUTTONS /*------------------------------------------*/ .black-scroll .scroll .btn--tra-black { color: var(--white)!important; border-color: var(--white)!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark .logo-white, .navbar-light .logo-black, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-dark.black-scroll .scroll .logo-black { display: none; } .tra-menu.navbar-light .scroll .logo-black, .tra-menu.navbar-dark.black-scroll .scroll .logo-white { display: block; } /* ========================================================================== 05. HERO ========================================================================== */ .hero-section .container { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO DIGITS /*------------------------------------------*/ .hero-digits { padding-right: 20px; } #hd-1-1, #hd-1-2 { display: inline-block; float: left; padding-right: 20px; } #hd-1-1 { width: 48%; } #hd-1-2 { width: 48%; } .hero-digits h2.statistic-number { font-size: 3.35rem; line-height: 1; letter-spacing: -1.5px; margin-bottom: 10px; } .hero-digits h2.statistic-number small { font-size: 2.25rem; margin-left: 5px; } .hero-digits .block-txt p.p-sm { margin-bottom: 0; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ #hero-1 { position: relative; z-index: 3; background-image: url(../images/hero-1.jpg); padding-top: 150px; margin-bottom: 80px; } .hero-1-txt { margin-top: -15px; } .hero-1-txt h2 { font-size: 3.45rem; font-weight: 600; } .hero-1-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-1-txt .os-version-ext { margin-top: 22px; } .hero-1-img { text-align: center; padding: 0 20px; margin-bottom: -80px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ #hero-2 { background-image: url(../images/hero-2.jpg); padding-top: 180px; padding-bottom: 130px; } .hero-2-txt h2 { font-size: 3.75rem; } .hero-2-txt p.p-xl { padding: 0 8%; margin-top: 22px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ #hero-3 { overflow: hidden; background-image: url(../images/hero-3.jpg); padding-top: 175px; } .theme--dark #hero-3 { background-image: url(../images/hero-3d.jpg); } .hero-3-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 70px; margin-bottom: 60px; } .hero-3-txt h2 { font-size: 3.75rem; } .hero-3-txt p.p-xl { font-size: 1.25rem; margin-top: 20px; margin-bottom: 32px; } .hero-3-txt .btn-txt { margin-top: 25px; } .hero-3-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ #hero-4 { overflow: hidden; background-image: url(../images/hero-4.jpg); padding-top: 170px; } .theme--dark #hero-4 { background-image: url(../images/hero-4d.jpg); } .hero-4-txt h2 { font-size: 3.5rem; } .hero-4-txt p.p-xl { padding: 0 2%; margin-top: 30px; margin-bottom: 30px; } .hero-4-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ #hero-5 { position: relative; z-index: 3; background-image: url(../images/hero-5.jpg); padding-top: 150px; margin-bottom: 60px; } #hero-5 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-5 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-5-txt { margin-top: -15px; padding-left: 5px; } .hero-5-txt h2 { font-size: 3.45rem; line-height: 1.3; font-weight: 600; } .hero-5-txt p.p-xl { padding-right: 2%; margin-top: 25px; margin-bottom: 35px; } .hero-5-img { text-align: center; padding-right: 30px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ #hero-6 { background-image: url(../images/hero-6.jpg); padding-top: 170px; } .theme--dark #hero-6 { background-image: url(../images/bg-dark.jpg); } #hero-6:after { position: absolute; content: ''; z-index: -1; width: 100%; height: 10%; bottom: 0; left: 0; background-color: var(--white); } .theme--dark #hero-6:after { background-color: var(--dark-theme-bg); } .hero-6-txt h2 { font-size: 3.65rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 25px; margin-bottom: 30px; } .hero-6-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-7 /*------------------------------------------*/ #hero-7 { overflow: hidden; position: relative; background-image: url(../images/hero-7.jpg); padding-top: 140px; padding-bottom: 40px; } #hero-7 .wave-shape-bottom { z-index: 6; } #hero-7 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-7 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-7-txt { margin-top: -30px; } .hero-7-txt h2 { font-size: 3.65rem; font-weight: 600; margin-bottom: 40px; } .hero-7-txt .os-version-ext { margin-top: 22px; } .hero-7-img { text-align: center; margin-bottom: -30%; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-8 { position: relative; background-image: url(../images/hero-8.jpg); padding-top: 160px; margin-bottom: 30px; } #hero-8 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-8 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-8-txt { margin-top: -30px; } .hero-8-txt h2 { font-size: 3.65rem; font-weight: 600; } .hero-8-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-8-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-8-img { position: relative; text-align: center; margin: 0 -100% -30px 0; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ #hero-9 { position: relative; background-image: url(../images/hero-9.jpg); padding-top: 170px; } .theme--dark #hero-9 { background-image: url(../images/hero-9d.jpg); } .hero-9-txt { margin-top: -30px; } .hero-9-txt h2 { font-size: 4rem; } .hero-9-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-9-img { text-align: center; padding-left: 15px; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ #hero-10 { background-image: url(../images/hero-10.jpg); padding-top: 170px; } .theme--dark #hero-10 { background-image: url(../images/hero-10d.jpg); } .hero-10-txt h2 { font-size: 3.5rem; } .hero-10-txt p.p-lg { padding: 0 2%; margin-top: 25px; margin-bottom: 35px; } .hero-10-txt p.btn-txt { margin-top: 40px; } #hero-10 .quick-form { margin: 35px 7% 0; } .hero-10-img { margin-top: 65px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ #hero-11 { background-image: linear-gradient(180deg, rgba(233, 224, 242, .8) 50%, rgba(233, 224, 242, .05) 100%); padding-top: 170px; } .theme--dark #hero-11 { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .hero-11-txt h2 { font-size: 3.35rem; } .hero-11-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } .hero-11-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-11-img { text-align: center; padding-left: 25px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ #hero-12 { overflow: hidden; background-image: url(../images/hero-12.jpg); padding-top: 180px; } .theme--dark #hero-12 { background-image: url(../images/hero-12d.jpg); } .hero-12-txt h2 { font-size: 3.65rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-12-txt .advantages { margin-top: 20px; } .hero-12-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-13 /*------------------------------------------*/ #hero-13 { background-image: url(../images/hero-13.jpg); padding-top: 90px; padding-bottom: 15px; margin-bottom: 60px; } #hero-13 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-13 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-13-txt { margin-top: -25px; } .hero-13-txt h2 { font-size: 3.25rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 25px; margin-bottom: 30px; } .hero-13-txt .quick-form { margin-top: 35px; margin-right: 4%; } .hero-13-img { text-align: center; padding-right: 35px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-14 /*------------------------------------------*/ #hero-14 { background-image: url(../images/hero-14.jpg); padding-top: 170px; padding-bottom: 130px; } .hero-14-txt h2 { font-size: 4.35rem; } .hero-14-txt p.p-xl { padding: 0 3%; margin-top: 30px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-15 /*------------------------------------------*/ #hero-15 { background-image: url(../images/hero-15.jpg); padding-top: 150px; margin-bottom: 100px; } .hero-15-txt { margin-top: -25px; padding-left: 20px; } .hero-15-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 105px; margin-bottom: 30px; } .hero-15-txt h2 { font-size: 3.25rem; } .hero-15-txt p.p-lg { padding-right: 2%; margin-top: 25px; margin-bottom: 25px; } .hero-15-img { text-align: center; padding-right: 20px; margin-bottom: -100px; } /*------------------------------------------*/ /* HERO-16 /*------------------------------------------*/ #hero-16 { overflow: hidden; padding-top: 180px; } .hero-16-txt h2 { font-size: 3.75rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-16-img { padding: 80px 60px 0; margin-top: 70px; } .hero-16-img img { margin-bottom: -30px; } /*------------------------------------------*/ /* HERO-17 /*------------------------------------------*/ #hero-17 { background-image: url(../images/hero-17.jpg); padding-top: 80px; } .theme--dark #hero-17 { background-image: url(../images/hero-17d.jpg); } .hero-17-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 90px; margin-bottom: 35px; } .hero-17-txt h2 { font-size: 4rem; letter-spacing: -0.5px; } .hero-17-txt p.p-md { margin-top: 20px; margin-bottom: 30px; } .hero-17-img { margin: 0 -30px 0 15px; } /*------------------------------------------*/ /* HERO-18 /*------------------------------------------*/ #hero-18 { background-image: url(../images/hero-18.jpg); padding-top: 100px; } .theme--dark #hero-18 { background-image: url(../images/hero-18d.jpg); } .hero-18-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 115px; margin-bottom: 35px; } .hero-18-txt h2 { font-size: 3.35rem; } .hero-18-txt p.p-xl { padding: 0 5%; margin-top: 35px; margin-bottom: 35px; } .hero-18-img { text-align: center; margin-top: 30px; } /*------------------------------------------*/ /* HERO QUICK FORM /*------------------------------------------*/ .hero-section .quick-form .input-group { border: none; } /*------------------------------------------*/ /* Hero Quick Form Input /*------------------------------------------*/ .hero-section .quick-form .form-control { height: 64px; background-color: var(--white); border: 2px solid var(--silver); color: #666; font-size: 1.125rem; font-weight: 400; padding: 0 20px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .hero-section .quick-form.form--shadow .form-control { border-color: transparent; -webkit-box-shadow: 0 5px 10px var(--tra-black); -moz-box-shadow: 0 5px 10px var(--tra-black); box-shadow: 0 5px 10px var(--tra-black); } .hero-section .quick-form.form-stroke .form-control { border-color: var(--black); } .hero-section .quick-form.form-half .form-control { height: 58px; font-size: 1.0625rem; } /*------------------------------------------*/ /* Hero Quick Form Placeholder /*------------------------------------------*/ .hero-section .quick-form .form-control::-moz-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Hero Quick Form Focus /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { background-color: var(--white); border-color: var(--black); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Hero Quick Form Button /*------------------------------------------*/ .hero-section .quick-form .btn { height: 64px; font-size: 1.0625rem; padding: 12px 45px; margin-left: 15px; } .hero-section .quick-form.form-half .btn { height: 58px; font-size: 1rem; padding: 13px 40px; margin-left: 12px; } /*------------------------------------------*/ /* Hero Quick Form Message /*------------------------------------------*/ .hero-section .quick-form-msg { width: 100%!important; display: block; margin: 20px 0 15px 5px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -15px 0; } .hero-section .quick-form-msg .loading { color: #3eb1ff; font-size: 1.05rem; line-height: 1; font-weight: 500; } .hero-section .text-center .quick-form-msg .loading { font-size: 1.125rem; } /* ========================================================================== 06. ABOUT ========================================================================== */ .about-1 { background-image: url(../images/about-1.jpg); margin-bottom: 80px; } .theme--dark .about-1 { background-image: url(../images/about-1d.jpg); } .about-2-title { margin-bottom: 25px; } .about-4-title { padding-right: 4%; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-1-txt h2 { font-size: 3.65rem; margin-bottom: 20px; } .about-1-txt h4 { line-height: 1.44; font-weight: 400; padding-right: 2%; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .about-1-img { margin-top: 60px; margin-bottom: -80px; } .about-3 .img-block.left-column { margin-right: 40px; } .about-3 .img-block.right-column { margin-left: 40px; } /* ========================================================================== 07. CAREERS ========================================================================== */ .jobs-category { padding: 0 50px 18px; margin-bottom: 30px; border: 1.5px solid transparent; } .jobs-category h4 { line-height: 1; padding-top: 40px; margin-bottom: 14px; } .career-item { position: relative; padding: 22px 0; } /*------------------------------------------*/ /* OPEN ROLE DESCRIPTION /*------------------------------------------*/ .position-data { margin-top: 3px; } .position-data li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .rb-divider { position: relative; top: 1.25px; transform: rotate(-90deg); margin-left: 2px; } .position-data.ico-15 [class*="flaticon-"]:before, .position-data.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .position-data li p { display: inline-block; float: left; margin-bottom: 0; } /*------------------------------------------*/ /* OPEN ROLE LINK /*------------------------------------------*/ .position-link { color: var(--header-color); position: absolute; top: 26px; right: 5px; transform: rotate(-45deg); } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* MORE CAREERS BUTTON /*------------------------------------------*/ .more-careers { text-align: center; margin-top: 60px; } .more-careers-holder { display: inline-block; margin: 0 auto; } .more-careers-txt { text-align: left!important; display: inline-block; float: left; } .more-careers-txt p { position: relative; top: 6px; margin-bottom: 0; } .more-careers-btn { display: inline-block; margin-left: 20px; } .more-careers-btn .btn { font-size: 0.875rem; padding: 0.6rem 1.35rem; } /* ========================================================================== 08. JOB POSITION =========================================================================== */ .job-position-title { padding-top: 170px; padding-bottom: 100px; margin-bottom: 30px; } .jb-txt { position: relative; } .jb-txt h2 { padding-right: 20%; } .job-position-title .position-data { margin-top: 20px; } .job-position-title .rb-divider { top: 3.5px; } .job-position-title .btn { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; padding: 0.7rem 1.4rem; } /*------------------------------------------*/ /* JOB POSITION TYPOGRAPHY /*------------------------------------------*/ .position-info h5 { margin-top: 60px; margin-bottom: 30px; } .position-info p span { color: var(--header-color); font-weight: 600; } .position-info .btn { margin-top: 35px; } /* ========================================================================== 09. FEATURES ========================================================================== */ .fbox-5-wrapper { padding: 90px 55px; } .features-2 .section-title p.p-xl { font-size: 1.25rem; margin-top: 0; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 40px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3 { margin-bottom: 50px; } /*------------------------------------------*/ /* FEATURE BOX /*------------------------------------------*/ .fbox-3 { border: 1px solid var(--silver); padding: 40px 20px 30px; } .fbox-3.bg--white { border: 1px solid transparent; padding: 40px 20px 30px; } .fbox-4 { padding: 60px; border: 1px solid transparent; } .fbox-4.fb-5, .fbox-4.fb-6 { padding: 70px 65px; } .ico-title .fbox-4.fb-5, .ico-title .fbox-4.fb-6 { padding: 45px 50px 35px; } .fbox-4.fb-7, .fbox-4.fb-8 { position: relative; overflow: hidden; padding: 70px 50px 0; } .ico-title .fbox-4.fb-7, .ico-title .fbox-4.fb-8 { padding: 45px 50px 0; } .fbox-4-txt { padding-left: 60px; } .fbox-4-txt h2, .fbox-4-txt h3 { margin-bottom: 20px; } .fbox-4-txt h3.h3-lg { font-size: 2.5625rem; } .fbox-4-txt .btn { margin-top: 25px; } .fbox-5 { padding: 80px 53px 70px; border: 1.5px solid transparent; } /*------------------------------------------*/ /* FEATURE BOX VECTOR ICON /*------------------------------------------*/ .fbox-ico, .fbox-ico.ico-rounded { margin-bottom: 15px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 20px; } .fbox-ico[class*="img-"], .fbox-ico.ico-rounded-md, .fbox-ico.ico-rounded-lg { margin-bottom: 20px; } /*------------------------------------------*/ /* FEATURE BOX IMAGE /*------------------------------------------*/ .fbox-img img { width: auto; max-width: inherit; } .fbox-img.h-175 img { max-height: 175px; } .fbox-img.h-180 img { max-height: 180px; } .fbox-6 .fbox-img { margin-bottom: 35px; } /*------------------------------------------*/ /* FBOX-4 IMAGE /*------------------------------------------*/ .fbox-4.fb-1 .fbox-4-img { margin: 40px 5% 0; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 45px 0 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 5% 40px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 40px 5% 0; } /*------------------------------------------*/ /* FBOX-5 IMAGE /*------------------------------------------*/ .fbox-5-img img { width: auto; max-width: inherit; max-height: 255px; margin-bottom: 25px; } /*------------------------------------------*/ /* FBOX-7 IMAGE /*------------------------------------------*/ .fbox-7 .fbox-img { -webkit-border-radius: 12px 12px 0 0; -moz-border-radius: 12px 12px 0 0; -o-border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; } .fbox-7 .fbox-img.h-175 { padding-top: 40px; margin: 0 8px 60px; } .fbox-7 .fbox-img.h-180 { padding-top: 42px; margin: 0 5px 60px; } .fbox-7 .fbox-img img { margin-bottom: -25px; } /*------------------------------------------*/ /* FBOX-2 /*------------------------------------------*/ .fbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .fbox-ico-wrap { position: relative; margin-right: 30px; } .fbox-2 .fbox-ico { margin-top: 2px; } .fbox-2 .fbox-txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* FBOX TYPOGRAPHY /*------------------------------------------*/ .fbox-2 h5, .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 20px; margin-bottom: 12px; } .fbox-4 h5 { margin-bottom: 16px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 24px; } .fbox-5 h5 { margin-bottom: 16px; } .fbox-3 p, .fbox-5 p, .fbox-wrapper p, .fbox-4 p.mb-0 { margin-bottom: 0; } .fbox-4 p { margin-bottom: 14px; } /*------------------------------------------*/ /* FEATURES DOWNLOAD BUTTON /*------------------------------------------*/ .features-2-download { margin-top: 80px; } .features-2-download p.p-sm { font-size: 0.9rem; margin-top: 20px; margin-bottom: 0; } /* ========================================================================== 10. CONTENT ========================================================================== */ .ct-07 { overflow: hidden; } .ct-08 { margin-bottom: 80px; } .ct-09 { margin-top: 80px; } .ct-06 .section-overlay { margin-bottom: 100px; } .bc-03 .section-title { margin-bottom: 50px; } .bc-04 { margin: 30px 0; } /*------------------------------------------*/ /* CONTENT BOX WRAPPER /*------------------------------------------*/ .bc-01-wrapper, .bc-02-wrapper { border: 1px solid transparent; } .bc-04-wrapper { border: 2.5px solid #d2d2eb; padding-left: 60px; } .bc-01 .section-overlay { padding: 80px 65px; } .bc-02 .section-overlay { padding: 65px 60px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 60px; } .bc-02.pt-30.bc-02-top { margin-top: 70px; } .bc-03 .section-overlay { padding: 80px 70px 0; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .txt-box { margin-bottom: 25px; } .bc-01 .txt-box { margin-bottom: 30px; } .txt-box:last-child, .bc-01 .txt-box:last-child { margin-bottom: 0; } .ct-07 .txt-block { margin-top: -30px; } .ct-08 .txt-block { margin-top: -30px; } .bc-01 .txt-block.left-column { padding-right: 20px; } .bc-01 .txt-block.right-column { padding-left: 20px; } .bc-04 .txt-block { padding-right: 30px; } /*------------------------------------------*/ /* CONTENT BOX /*------------------------------------------*/ .cbox-1, .cbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-4-wrapper { margin-top: 20px; } .cbox-5 { display: inline-block; width: 390px; min-width: 390px; padding: 18px 24px 16px 24px; } .cbox-5.cb-1 { margin: 12px 0 25px; } /*------------------------------------------*/ /* CONTENT BOX ICON /*------------------------------------------*/ .cbox-1 .ico-wrap { position: relative; margin-right: 1.625rem; } .cbox-1-ico { text-align: center; position: relative; width: 2.25rem; height: 2.25rem; font-size: 1.125rem; line-height: 2rem; font-weight: 600; border: 3px solid transparent; border-radius: 100%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .cbox-1-line { position: absolute; bottom: 14px; left: 50%; width: 2px; background-color: var(--smoke); height: calc(100% - 70px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .cbox-1:hover .cbox-1-ico { background-color: transparent; } .cbox-1:hover .cbox-1-ico.bg--black { color: var(--black); border-color: var(--black); } .cbox-1:hover .cbox-1-ico.bg--blue { color: var(--blue); border-color: var(--blue); } .cbox-1:hover .cbox-1-ico.bg--green { color: var(--green); border-color: var(--green); } .cbox-1:hover .cbox-1-ico.bg--indigo { color: var(--indigo); border-color: var(--indigo); } .cbox-1:hover .cbox-1-ico.bg--orchid { color: var(--orchid); border-color: var(--orchid); } .cbox-1:hover .cbox-1-ico.bg--pink { color: var(--pink); border-color: var(--pink); } .cbox-1:hover .cbox-1-ico.bg--purple { color: var(--purple); border-color: var(--purple); } .cbox-1:hover .cbox-1-ico.bg--red { color: var(--red); border-color: var(--red); } .cbox-1:hover .cbox-1-ico.bg--skyblue { color: var(--sky-blue); border-color: var(--sky-blue); } .cbox-1:hover .cbox-1-ico.bg--violet-red { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* CBOX #2 /*------------------------------------------*/ .cbox-2 .ico-wrap { position: relative; text-align: center; margin-top: 0; margin-right: 1.25rem; } .cbox-2 .cbox-2-ico { position: relative; top: 5px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3rem; } /*------------------------------------------*/ /* CBOX #5 /*------------------------------------------*/ .cbox-5-ico { display: inline-block!important; float: left; text-align: center; } /*------------------------------------------*/ /* CBOX #6 /*------------------------------------------*/ .cbox-6-wrapper { position: relative; } .cbox-6 { border: 1px solid var(--snow); padding: 40px; margin: 0 12%; z-index: 1; } .cbox-6 hr { margin-top: 35px; margin-bottom: 25px; } /*------------------------------------------*/ /* CBOX #6 TITLE /*------------------------------------------*/ .cbox-6-title p.p-md { line-height: 1; } .cbox-6 .statistic-number sup { font-size: 3rem; top: -10px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 15px; } .cbox-6-title p.p-md.ico-10 span { font-weight: 600; } /*------------------------------------------*/ /* CBOX #6 TEXT /*------------------------------------------*/ .cbox-6-txt h5 { margin-bottom: 10px; } /*------------------------------------------*/ /* CBOX #6 DATA /*------------------------------------------*/ .cbox-6-data { padding: 18px 25px; } .cbox-6-data h4 { letter-spacing: -0.5px; } .cbox-6-data p { margin: 0; } /*------------------------------------------*/ /* CBOX #6 SHAPE /*------------------------------------------*/ .cb-shape-1 { position: absolute; right: 30px; top: -35px; z-index: -1; } .cb-shape-2 { position: absolute; left: 30px; bottom: -25px; z-index: -1; } .cb-shape-1 img, .cb-shape-2 img { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------*/ /* CBOX #7 /*------------------------------------------*/ .cbox-7 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-7-txt { overflow: hidden; flex: 1; max-width: 100%; padding-left: 14px; } .cbox-7-ico { background-image: linear-gradient(0deg, #d4dbff 0%, #fff 100%); width: 28px; height: 28px; margin-top: 2px; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 26px; } .cbox-7-txt p { margin-bottom: 14px; } /*------------------------------------------*/ /* CONTENT BOX TEXT /*------------------------------------------*/ .cbox-1-txt, .cbox-2-txt { overflow: hidden; flex: 1; max-width: 100%; } .cbox-1-txt { margin-bottom: 30px; } .cbox-2-txt { margin-bottom: 40px; } .two-txt .cbox-2-txt { margin-bottom: 25px; } .cbox-1:last-child .cbox-1-txt, .cbox-2:last-child .cbox-2-txt { margin-bottom: 0; } .cbox-3-txt { margin-bottom: 40px; } .cbox-3:last-child .cbox-3-txt { margin-bottom: 0; } .cbox-5-txt { display: inline-block!important; padding-left: 18px; } /*------------------------------------------*/ /* CONTENT BOX TITLE /*------------------------------------------*/ .cbox-title { margin-bottom: 18px; } .cbox-title span { float: left; line-height: 1!important; margin-right: 20px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.35rem; } .cbox-title h5 { line-height: 2.1875rem!important; margin-bottom: 0!important; } .box-title { margin-bottom: 14px; } .box-title span { position: relative; top: 10px; right: 4px; } .box-title h6 { display: inline-block; margin-bottom: 0; } /*------------------------------------------*/ /* CONTENT BOX TYPOGRAPHY /*------------------------------------------*/ .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 15px!important; } .cbox-5-txt h6 { margin-bottom: 2px; } .bc-02 .txt-block h5 { margin-bottom: 25px; } .cbox-1-txt p, .cbox-2-txt p, .cbox-3-txt p, .cbox-5-txt p, .cbox-4 p { margin-bottom: 0; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h3, .txt-block h2 { margin-bottom: 25px; } .txt-block h5 { margin-bottom: 20px; } h5.h5-title { margin: 20px 0; } .txt-block-tra-link { margin-top: 20px; } .txt-block .btn { margin-top: 30px; } .txt-block .btn.btn--transparent { margin-top: 0; } .txt-block .stores-badge { margin-top: 30px; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion-1 .accordion-item { background-color: transparent; padding: 22px 0 26px; border: none; border-bottom: 1.5px solid var(--smoke); border-radius: 0 0; } .txt-block .accordion-thumb { margin: 0; padding: 0; cursor: pointer; position: relative; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 1px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .txt-block .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } .txt-block .accordion-1 .accordion-panel { color: var(--gray); margin: 0; padding: 0 0 0 5px; display: none; } .txt-block .accordion-1 .accordion-thumb h5 { color: var(--header-color); line-height: 1; padding-left: 5px; margin-bottom: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 24px; } /*------------------------------------------*/ /* TEXT BLOCK TABS /*------------------------------------------*/ #tabs-1 .tab-content { display: none; } #tabs-1 .tab-content.current { display: inherit; } .tabs-1 li { cursor: pointer; background-color: transparent; border: none; margin-bottom: 8px; padding: 25px 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tabs-1 li:last-child { margin-bottom: 0; } .tab-link h5, .tab-link p { color: #858585; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tab-link p { margin: 10px 0 0; } /*------------------------------------------*/ /* TAB LINK HOVER /*------------------------------------------*/ .tabs-1 li:hover { background-color: #f9f9f9; } /*------------------------------------------*/ /* TAB LINK CURRENT /*------------------------------------------*/ #tabs-1 .tabs-1 li.current, #tabs-1 .tabs-1 li.current:hover { background-color: #f3f3f5; } #tabs-1 .tabs-1 li.current { cursor: auto; } #tabs-1 .tabs-1 li:hover h5, #tabs-1 .tabs-1 li.current h5 { color: var(--header-color); } #tabs-1 .tabs-1 li:hover p, #tabs-1 .tabs-1 li.current p { color: var(--gray); } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 25px; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 25px; } .ct-03 .img-block img { max-width: none; display: inline-block; margin-left: 30px; } .ct-04 .img-block img { max-width: none; margin-left: -100%; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -100px; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -80px; } .ct-09 .img-block { margin-top: -80px; } .img-block-txt, .img-block-btn { text-align: center; margin-top: 45px; } .img-block-hidden .video-btn { top: calc(50% - 30px); } .bc-3-img .video-btn { top: calc(50% - 70px); } .bc-2-img.right-column { margin-left: 20px; } .bc-2-img.left-column { margin-right: 20px; } .bc-3-img { margin-bottom: -200px; } .bc-4-img { transform: rotate(3deg); margin: -20px 0; } /* ========================================================================== 11. STATISTIC =========================================================================== */ .statistic-1-wrapper .statistic-block-digit { width: 36%; display: inline-block!important; float: left; } .statistic-1-wrapper .statistic-block-txt { width: 64%; display: inline-block!important; padding-left: 16px; } #sb-3-1, #sb-3-2 { width: 48%; display: inline-block; float: left; } .statistic-4-wrapper .statistic-block { padding: 10px 40px; } #sb-4-1, #sb-4-2 { border-right: 1px solid var(--tra-smoke); } /*------------------------------------------*/ /* STATISTIC BLOCK ICON /*------------------------------------------*/ .statistic-ico { margin-bottom: 15px; } .statistic-block .txt-block-rating { margin-bottom: -3px; } /*------------------------------------------*/ /* STATISTIC BLOCK NUMBER /*------------------------------------------*/ h3.statistic-number, h2.statistic-number { line-height: 1; font-weight: 700; letter-spacing: -1px; margin-bottom: 0; } #sb-2-2 h2.statistic-number { letter-spacing: -2px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 15px; } /*------------------------------------------*/ /* STATISTIC BLOCK TYPOGRAPHY /*------------------------------------------*/ .statistic-2-wrapper h2 { margin-bottom: 15px; } .statistic-2-wrapper .txt-block h4, .statistic-2-wrapper .txt-block h3 { line-height: 1.35; } .statistic-4-wrapper h5 { margin-top: 25px; margin-bottom: 15px; } .statistic-1-wrapper p { position: relative; line-height: 1.35; top: 4px; margin-bottom: 0; } .txt-block-stat p, .statistic-block-txt p, .statistic-2-wrapper p, .statistic-4-wrapper p { margin-bottom: 0; } /* ========================================================================== 12. RATING =========================================================================== */ .rating-1-wrapper.text-center { padding: 0 16%; } .rating-2-wrapper.text-center { padding: 0 13%; } .rating-title { text-align: center; } .rating-title h6, .rating-title h5 { margin-bottom: 0; } /*------------------------------------------*/ /* RATING BOX LOGO /*------------------------------------------*/ .rbox-1-img { margin-bottom: 15px; } .rbox-1-img img { width: auto; max-width: inherit; max-height: 35px; } .rbox-2-img img { width: auto; max-width: inherit; max-height: 80px; } #rb-2-2 .rbox-2-img img { max-height: 145px; } /*------------------------------------------*/ /* RATING BOX TYPOGRAPHY /*------------------------------------------*/ .rbox-1 .star-rating { display: inline-block; font-size: 1rem; line-height: 15px; font-weight: 500; vertical-align: inherit; background-color: var(--white); padding: 5px 18px; } .rbox-1 .star-rating span { position: relative; color: #ffb30c; top: -1px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 0.9rem; } .rbox-1 .star-rating { font-size: 0.86rem; line-height: 1; } .rbox-2 p { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; font-weight: 500; margin-top: 15px; margin-bottom: 0; } .rbox-2 p span { font-weight: 700; } /* ========================================================================== 13. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper { padding: 0 10px; } .reviews-3-wrapper:after { position: absolute; content: ''; z-index: -1; width: 86%; height: 85%; top: 8%; left: 7%; background-color: var(--white-smoke); } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { position: relative; border: 1.5px solid transparent; padding: 35px; margin: 0 12px 30px; } .review-1.no-title { padding: 50px 35px 35px; } .review-2 { padding: 0 30px; margin-bottom: 30px; } .review-3 { position: relative; padding: 45px 40px 35px; } #rw-3-1, #rw-3-2 { margin-bottom: 20px; } .review-item { position: relative; width: 33.33%; padding: 0 12px; margin-bottom: 24px; } .review-4 { position: relative; padding: 35px 28px; border: 1px solid transparent; } /*------------------------------------------*/ /* TESTIMONIAL ICON /*------------------------------------------*/ .review-ico.ico-45 { position: absolute; top: 15px; right: 25px; opacity: .12; } .review-ico.ico-60 { position: absolute; top: 15px; left: 25px; opacity: .12; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-1-txt h6.h6-md, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg, .review-4-txt h6.h6-lg { line-height: 1.4; padding-right: 5%; margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.225rem; line-height: 1.4; padding-right: 5%; margin-bottom: 12px; } .review-1.text-center h6.h6-md, .review-1.text-center h6.h6-lg { padding-right: 0; } .review-2-txt h6.h6-lg { margin-bottom: 14px; } .review-1-txt p, .review-2-txt p, .review-3-txt p, .review-4-txt p { margin-bottom: 15px; } .review-4-txt p.mb-0 { margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-rating.ico-10 { margin-bottom: 5px; } .review-author .review-rating.ico-10 { margin-bottom: 2px; } .review-rating.ico-15 { margin-bottom: 8px; } .review-rating.ico-15.mb-15 { margin-bottom: 12px; } .review-rating.ico-10 [class*="flaticon-"]:before, .review-rating.ico-10 [class*="flaticon-"]:after { font-size: 0.935rem; } .review-rating.ico-15 [class*="flaticon-"]:before, .review-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /*------------------------------------------*/ /* TESTIMONIAL DATA /*------------------------------------------*/ .author-data { margin-top: 20px; } .author-data.mt-25 { margin-top: 25px; } .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } /*------------------------------------------*/ /* TESTIMONIAL AVATAR /*------------------------------------------*/ .review-avatar { margin: 0 auto; float: left; } .review-avatar img { width: 46px; height: 46px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-3 .review-avatar img { width: 54px; height: 54px; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .author-data .review-author { position: relative; display: inline-block; text-align: left; padding: 0 0 0 14px; } .review-author.mt-15 { margin-top: 16px; } .review-3 .review-author { margin-top: 5px; } .review-author h6 { font-size: 0.975rem; line-height: 1; margin-bottom: 9px; } .review-author.mt-15 h6 { margin-bottom: 0; } .review-author h6 span { color: var(--gray); font-size: 0.95rem; font-weight: 400; } .review-author p { font-size: 0.925rem; line-height: 1; font-weight: 300; margin-bottom: 0; } .review-author p a { font-weight: 400; } /*------------------------------------------*/ /* TESTIMONIAL BUTTON /*------------------------------------------*/ .reviews-btn { text-align: center; margin-top: 65px; } /*------------------------------------------*/ /* TESTIMONIAL CAROUSEL DOTS /*------------------------------------------*/ .reviews-section button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { margin: 0 7px; } .owl-dots button:focus { outline: none; text-decoration: none; } /* ========================================================================== 14. TEAM =========================================================================== */ .team-member { margin-bottom: 50px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; overflow: hidden; text-align: center; margin-bottom: 30px; } /*------------------------------------------*/ /* PHOTO HOVER ZOOM /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: .45; -moz-opacity: .45; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data { padding-left: 8px; } .team-member-data h6 { margin-bottom: 8px; } .team-member-data p { font-size: 0.975rem; line-height: 1; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } /* ========================================================================== 15. PRICING =========================================================================== */ .pricing-3-wrapper { padding: 0 4%; } .p-table { border: 1.5px solid transparent; margin-bottom: 40px; } .p-table.theme--border { border: 3px solid var(--theme-color); } .p-table.gray--border { border: 3px solid var(--tra-black); } .p-table.blue--border { border: 3px solid var(--blue); } .p-table.green--border { border: 3px solid var(--green); } .p-table.indigo--border { border: 3px solid var(--indigo); } .p-table.orchid--border { border: 3px solid var(--orchid); } .p-table.pink--border { border: 3px solid var(--pink); } .p-table.purple--border { border: 3px solid var(--purple); } .p-table.red--border { border: 3px solid var(--red); } .p-table.skyblue--border { border: 3px solid var(--sky-blue); } .p-table.violet-red--border { border: 3px solid var(--violet-red); } .pricing-1-table { padding: 45px 35px; } .pricing-2-table, .pricing-3-table { padding: 30px 40px; } .pricing-2-table.bg--white, .pricing-3-table.bg--white { border: 1px solid #ddd; -webkit-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); -moz-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); } #pt-3-1 { margin: 0 10px 40px 50px; } #pt-3-2 { margin: 0 50px 40px 10px; } /*------------------------------------------*/ /* TABLE HEADER /*------------------------------------------*/ .pricing-table-header { position: relative; } .pricing-table-header h5 { margin-bottom: 30px; } /*------------------------------------------*/ /* PRICING TABLE DISCOUNT /*------------------------------------------*/ .pricing-discount { position: absolute; top: -2px; right: -5px; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.915rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* PRICE /*------------------------------------------*/ .price span { color: var(--header-color); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -2px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.5rem; } /*------------------------------------------*/ /* DOLLAR SIGN /*------------------------------------------*/ .price sup { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-size: 2.05rem; font-weight: 600; top: -5px; right: 2px; letter-spacing: -1px; } /*------------------------------------------*/ /* Validity /*------------------------------------------*/ .price sup.validity { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 400; top: -2px; left: 0; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.65rem; } /*------------------------------------------*/ /* Text /*------------------------------------------*/ .price p { margin-top: 20px; margin-bottom: 20px; } .pricing-section .btn-txt a { text-decoration: underline; } /*------------------------------------------*/ /* PRICING FEATURES /*------------------------------------------*/ .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 20px; } .pricing-features li { padding: 11px 8px; } .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 9px 8px; } .pricing-features li p { line-height: 1; font-weight: 400; margin-bottom: 0; } .pricing-features li p span { position: relative; top: -2px; right: 5px; } .pricing-features.ico-10 li p span { top: 0; right: 4px; } .pricing-features.ico--blue span { color: var(--blue); } .pricing-features.ico--green span { color: var(--green); } .pricing-features.ico--indigo span { color: var(--indigo); } .pricing-features.ico--orchid span { color: var(--orchid); } .pricing-features.ico--pink span { color: var(--pink); } .pricing-features.ico--purple span { color: var(--purple); } .pricing-features.ico--red span { color: var(--red); } .pricing-features.ico--skyblue span { color: var(--sky-blue); } .pricing-features.ico--violet-red span { color: var(--violet-red); } .pricing-features.ico-5 [class*="flaticon-"]:before, .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; } .pricing-features li.disabled-option p, .pricing-features li.disabled-option span { color: var(--disable)!important; } /*------------------------------------------*/ /* PRICING TABLE BUTTON /*------------------------------------------*/ .pt-btn { display: block; width: 100%; margin-top: 25px; } .p-table p.btn-txt { margin: 14px 0 0 0; } /*------------------------------------------*/ /* PRICING TOGGLE BUTTON /*------------------------------------------*/ .ext-toggle-btn { text-align: center; } .toggle-btn.inn-toggle-btn { position: absolute; } /*------------------------------------------*/ /* TOGGLE BUTTON TYPOGRAPHY /*------------------------------------------*/ .toggler-txt { font-size: 1.15rem; font-weight: 500; line-height: 36px; } .toggle-btn p { margin-top: 12px; letter-spacing: -0.25px; margin-bottom: 0; } /*------------------------------------------*/ /* TOGGLE BUTTON SWITCHER /*------------------------------------------*/ .switch-wrap { position: relative; display: inline-block; vertical-align: middle; min-width: 60px; height: 36px; margin: 0 8px; } .switcher { display: block; cursor: pointer; color: var(--white); font-size: 0.925rem; font-weight: 500; height: 36px; padding: 0 20px 0 40px; position: relative; border-radius: 36px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .theme--blue .switcher { background-color: var(--blue); } .theme--green .switcher { background-color: var(--green); } .theme--indigo .switcher { background-color: var(--indigo);} .theme--orchid .switcher { background-color: var(--orchid); } .theme--pink .switcher { background-color: var(--pink); } .theme--purple .switcher { background-color: var(--purple); } .theme--red .switcher { background-color: var(--red); } .theme--skyblue .switcher { background-color: var(--sky-blue); } .theme--violet-red .switcher { background-color: var(--violet-red); } .switcher .show-annual, .switcher .show-monthly { line-height: 36px; } .switcher .show-monthly { display: block; } .switcher .show-annual { display: none; } .switcher:before { position: absolute; left: 5px; bottom: 4px; content: " "; background-color: var(--white); width: 28px; height: 28px; border-radius: 50%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .switch-wrap input { display: none; } .switch-wrap input:checked + .switcher { padding: 0 40px 0 20px; } .switch-wrap input:checked + .switcher:before { left: auto; right: 4px; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .switch-wrap input:checked + .switcher .show-annual { display: block; } .switch-wrap input:checked + .switcher .show-monthly { display: none; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice { text-align: center; margin-top: 20px; } .pricing-notice p { padding: 0 5%; margin-bottom: 0; } .pricing-notice p span { font-weight: 600; } /*------------------------------------------*/ /* COMPARE PRICING TABLE /*------------------------------------------*/ .table>:not(caption)>*>* { padding: 17px 0; border: none!important; background-color: transparent!important; } .comp-table .pricing-header { max-width: 700px; } .comp-table .table thead tr, .comp-table .table tbody tr { border-bottom: 1px solid var(--silver)!important; } .comp-table .table tbody tr.table-last-tr { border-bottom: none!important; } .comp-table .table-responsive thead th { font-size: 1.0625rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody th { font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody td { position: relative; font-size: 0.95rem; line-height: inherit; top: 1px; } .comp-table .table-responsive tbody td span { position: relative; top: 1px; } .table>:not(caption)>*>* { color: var(--header-color); } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .comp-table .disabled-option { color: var(--light-gray); } .comp-table .color--blue { color: var(--blue); } .comp-table .color--green { color: var(--green); } .comp-table .color--indigo { color: var(--indigo); } .comp-table .color--orchid { color: var(--orchid); } .comp-table .color--purple { color: var(--purple); } .comp-table .color--red { color: var(--red); } .comp-table .color--sky { color: var(--sky); } .comp-table .color--skyblue { color: var(--sky-blue); } .comp-table .color--violet-red { color: var(--violet-red); } /*------------------------------------------*/ /* PRICING COMPARE PAYMENT /*------------------------------------------*/ .comp-table-payment h6 { margin-bottom: 16px; } .comp-table-payment p { margin-bottom: 0; } /* ========================================================================== 16. INTEGRATIONS =========================================================================== */ .int-1-wrapper { padding: 80px 70px; } .int-2-wrapper { padding: 0 3%; } .integrations-3 { margin-bottom: -22px; } /*------------------------------------------*/ /* FILTER BUTTONS /*------------------------------------------*/ .filter-btns button { background-color: transparent; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1.0625rem; line-height: 1; font-weight: 600; margin: 0 14px; padding: 0.5rem 0.1rem; border: none; cursor: pointer; border-bottom: 3px solid transparent; outline: 0px none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* Filter Button Active /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--blue); cursor: default; border-color: var(--blue); outline: 0px none; } .theme--blue .filter-btns button.is-checked { color: var(--blue); border-color: var(--blue); } .theme--green .filter-btns button.is-checked { color: var(--green); border-color: var(--green); } .theme--indigo .filter-btns button.is-checked { color: var(--indigo); border-color: var(--indigo); } .theme--orchid .filter-btns button.is-checked { color: var(--orchid); border-color: var(--orchid); } .theme--pink .filter-btns button.is-checked { color: var(--pink); border-color: var(--pink); } .theme--purple .filter-btns button.is-checked { color: var(--purple); border-color: var(--purple); } .theme--red .filter-btns button.is-checked { color: var(--red); border-color: var(--red); } .theme--skyblue .filter-btns button.is-checked { color: var(--sky-blue); border-color: var(--sky-blue); } .theme--violet-red .filter-btns button.is-checked { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* FILTER ITEM /*------------------------------------------*/ .integrations-3 .filter-item { position: relative; width: 33.33%; padding: 0 10px; margin-bottom: 22px; } /*------------------------------------------*/ /* INTEGRATION TOOL /*------------------------------------------*/ .int_tool-1 { display: block; margin-bottom: 40px; } .int_tool-2 { text-align: center; vertical-align: center; background-color: var(--white); border: 1px solid var(--silver); padding: 25px 20px; margin-bottom: 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .int_tool-3 { background-color: var(--white); padding: 20px 26px 22px; border: 1px solid var(--silver); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* INTEGRATION TOOL LOGO /*------------------------------------------*/ .int_tool-1 .tool_logo { border: 1.5px solid transparent; padding: 35px 25px; margin-bottom: 30px; } .int_tool-1 img { width: 65px; height: 65px; } .int_tool-2 img { width: 60px; height: 60px; } .int_tool-3 img { width: 40px; height: 40px; } /*------------------------------------------*/ /* INTEGRATION TOOL TEXT /*------------------------------------------*/ .tool_txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* INTEGRATION TOOL TYPOGRAPHY /*------------------------------------------*/ .tool_txt h6 { font-size: 1.1875rem; margin-top: 2px; } .tool_logo h6 { position: relative; display: inline-block; line-height: 40px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { line-height: 1; margin-bottom: 0; } .int_tool-2 h6 { font-size: 0.925rem; line-height: 1; margin-top: 18px; } .tool_txt p { margin-top: 3px; margin-bottom: 0; } .tool_description p { font-size: 0.95rem; margin-top: 14px; margin-bottom: 0; } /*------------------------------------------*/ /* INTEGRATION TOOL HOVER /*------------------------------------------*/ .int_tool-2:hover, .int_tool-3:hover { border-color: transparent; -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } /*------------------------------------------*/ /* INTEGRATION MORE BUTTON /*------------------------------------------*/ .integrations-1 .more-btn { margin-top: 15px; } /* ========================================================================== 17. MORE APPS =========================================================================== */ .apps-1-wrapper { padding: 0 5%; } .app-box { display: block; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 50px; } /*------------------------------------------*/ /* MORE APPS TYPOGRAPHY /*------------------------------------------*/ .app-box h6, .app-box h5 { line-height: 1; margin-top: 30px; margin-bottom: 12px; } .app-box p.app-cat { color: var(--gray); line-height: 1; margin-bottom: 0; } .app-logo-img { padding: 0 10%; } /* ========================================================================== 18. BRANDS =========================================================================== */ /*------------------------------------------*/ /* BRANDS SECTION TITLE /*------------------------------------------*/ .brands-title { text-align: center; } .brands-title h6, .brands-title h5 { margin-bottom: 50px; } .brands-title p { margin-bottom: 55px; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brand-logo { overflow: hidden; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .brands-carousel-5 .brand-logo { padding: 0 25px; } .brands-carousel-6 .brand-logo { padding: 0 16px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0 5px; } .brands-section .more-btn { text-align: center; margin-top: 35px; } .brands-section .owl-dots { display: none; } /* ========================================================================== 19.CHANGELOG =========================================================================== */ .version-release { margin-bottom: 80px; } .version-release:last-child { margin-bottom: 0; } .release-data { padding-bottom: 30px; border-bottom: 1px dashed var(--silver); margin-bottom: 30px; } span.version-data { display: block; color: var(--header-color); font-size: 1.5rem; line-height: 1; font-weight: 600; margin-bottom: 15px; } span.release-date { display: block; color: var(--gray); font-size: 0.975rem; line-height: 1; margin-bottom: 0; } span.release-date span { color: var(--header-color); font-weight: 500; } .release-highlights h6 { margin-bottom: 16px; } .release-highlights .simple-list p { margin-bottom: 2px; } .release-highlights p b { color: var(--header-color); } .release-preview { margin-bottom: 30px; } /* ========================================================================== 20.DOWNLOAD =========================================================================== */ .download-item { display: block; text-align: center; padding: 45px 40px 35px; border: 1.5px solid transparent; } .download-item img { width: auto; max-width: inherit; max-height: 64px; margin-bottom: 25px; } .download-item h6 { line-height: 1; } .download-item p { font-size: 0.975rem; margin: 6px 0 0; } /* ========================================================================== 21. FAQS =========================================================================== */ /*------------------------------------------*/ /* FAQs-3 TITLE /*------------------------------------------*/ .faq-3-title { margin-top: 20px; } .faq-3-title p { font-size: 1.0725rem; padding-right: 3%; margin-top: 18px; margin-bottom: 28px; } /*------------------------------------------*/ /* FAQs QUESTION /*------------------------------------------*/ .faqs-2 .question { margin-bottom: 30px; } .faqs-2-questions .left-column { padding-right: 15px; } .faqs-2-questions .right-column { padding-left: 15px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .faqs-1-questions h4 { margin-top: 80px; margin-bottom: 25px; } .faqs-2 .question h6, .faqs-2 .question h5 { line-height: 1.5; padding-right: 5%; margin-bottom: 15px; } .faqs-3-question h5 { line-height: 1.5; margin-bottom: 20px; } .faqs-1 .accordion-item p, .faqs-3 .accordion-item p { color: var(--gray); } /*------------------------------------------*/ /* FAQS ACCORDION /*------------------------------------------*/ .faqs-section .accordion-item { background-color: transparent!important; border: none; border-bottom: 1px solid var(--silver); } .faqs-3.faqs-section .accordion-item { border-bottom: 1px solid var(--silver); } .faqs-section .accordion-item.acc-last-item, .faqs-3.faqs-section .accordion-item.acc-last-item { border-bottom: none; } /*------------------------------------------*/ /* Question /*------------------------------------------*/ .faqs-section .accordion-thumb { margin: 0; padding: 25px 0; cursor: pointer; position: relative; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 22px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .faqs-section .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } /*------------------------------------------*/ /* Answer /*------------------------------------------*/ .faqs-section .accordion-panel { margin: 0; padding: 0 0 15px 0; display: none; } .faqs-section .accordion-thumb h5 { line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* MORE QUESTIONS BUTTON /*------------------------------------------*/ .more-questions { text-align: center; margin-top: 80px; } .faqs-2 .more-questions { margin-top: 50px; } .more-questions-holder { display: inline-block; margin: 0 auto; } .more-questions-txt { text-align: left!important; display: inline-block; float: left; } .more-questions-txt h6 { margin-bottom: 3px; } .more-questions-txt p { margin-bottom: 0; } .more-questions-btn { display: inline-block; margin-left: 30px; } /* ========================================================================== 22. BANNER =========================================================================== */ .banner-1-wrapper { overflow: hidden; padding: 90px 75px 95px; } .banner-2-wrapper { position: relative; overflow: hidden; text-align: center; } .banner-2-wrapper .banner-overlay { padding: 85px 70px 95px; } .banner-4-wrapper { overflow: hidden; padding: 55px 60px; border: 1.5px solid transparent; } .banner-5 { overflow: hidden; padding-top: 50px; } .banner-5-wrapper .banner-overlay { padding: 0 75px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-section .section-id { font-weight: 600; padding-top: 10px; margin-bottom: 30px; } .banner-2-txt h2 { padding: 0 4%; } .banner-4-txt h4.h4-md { line-height: 1.35; padding-right: 3%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { padding-right: 10%; margin: 22px 0 28px; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 2%; margin: 20px 0 28px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 22px; margin-bottom: 0; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } /*------------------------------------------*/ /* BANNER BUTTON /*------------------------------------------*/ .banner-4-btn { position: relative; display: inline-block; margin: 0 auto; top: 10px; } .banner-4-btn p { margin: 12px 0 0; } .banner-section p.btn-txt { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER IMAGE /*------------------------------------------*/ .banner-5-img.right-column { margin-top: -40px; padding-left: 25px; } .banner-5-img.left-column { margin-top: -40px; padding-right: 25px; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .banner-qr-code { position: absolute; bottom: 0; right: 55px; max-width: 110px; text-align: center; background: var(--white); padding: 14px 10px 10px; border-radius: 12px 12px 0 0; } .banner-qr-code img { padding: 0 4%; } .banner-qr-code p { font-size: 0.8rem; line-height: 1.35; margin: 10px 0 0; } /* ========================================================================== 23. BLOG =========================================================================== */ .blog-1 .blog-post { margin-bottom: 40px; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { overflow: hidden; text-align: center; } /*------------------------------------------*/ /* BLOG POST TEXT /*------------------------------------------*/ .blog-post-txt { margin-top: 35px; padding-left: 5px; padding-right: 5px; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .post-tag { display: block; font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; } .blog-post-txt h6, .blog-post-txt h5 { line-height: 1.35; margin-bottom: 10px; } .blog-post-txt h4 { line-height: 1.35; margin-bottom: 20px; } .blog-post-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* BLOG POST META /*------------------------------------------*/ .blog-post-meta { margin-top: 18px; margin-bottom: 0; } .wide-post .blog-post-meta { margin-top: 25px; margin-bottom: 0; } .post-meta-list li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .post-meta-list p { line-height: 1; margin-bottom: 0; } .meta-list-divider { position: relative; top: 0px; transform: rotate(-90deg); padding: 0 1px; } /* ========================================================================== 24. BLOG LISTING =========================================================================== */ #blog-page .blog-post { margin-bottom: 60px; } /*------------------------------------------*/ /* WIDE BLOG POSTS /*------------------------------------------*/ #blog-page .blog-post.wide-post { margin-bottom: 60px; } .wide-post .blog-post-img { margin-right: 15px; } .wide-post .blog-post-txt { margin-top: 0; margin-left: 15px; } /*------------------------------------------*/ /* BLOG POSTS CATEGORY /*------------------------------------------*/ .posts-category { margin-top: 40px; margin-bottom: 50px; } .posts-category h4 { line-height: 1; margin-bottom: 0; } .posts-category span { position: relative; top: 1px; } /* ========================================================================== 25. SINGLE BLOG POST =========================================================================== */ .blog-post-preview { padding: 0 3%; margin-bottom: 50px; } /*------------------------------------------*/ /* Single Post Title /*------------------------------------------*/ .single-post-title { padding: 0 10% 0 8%; margin-bottom: 50px; } .single-post-title .blog-post-meta { margin-bottom: 25px; } .single-post-title h2 { margin-bottom: 25px; } /*------------------------------------------*/ /* Single Post Text /*------------------------------------------*/ .single-post-txt { padding: 0 8%; } .single-post-txt h6 { margin-bottom: 16px; } .single-post-txt h5.h5-xl { margin-top: 60px; margin-bottom: 25px; } .single-post-txt h5 { margin-top: 30px; margin-bottom: 25px; } .single-post-txt p span { color: var(--black); font-weight: 600; } .single-post-txt p a { color: var(--theme-color); font-weight: 600; text-decoration: underline; } .single-post-txt p a:hover { color: var(--black); } /*------------------------------------------*/ /* Single Post Image /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 60px; margin-bottom: 60px; } /*------------------------------------------*/ /* POST DATA /*------------------------------------------*/ .post-data { margin: 60px 5% 0; padding: 60px 3% 100px; } /*------------------------------------------*/ /* POST AUTHOR /*------------------------------------------*/ .post-author-avatar { margin: 0 auto; float: left; margin-right: 20px; } .post-author-avatar img { width: 70px; height: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .post-author-txt { position: relative; top: 8px; } .post-author-txt p { line-height: 1; margin-top: 8px; margin-bottom: 0; } .post-author-txt p a { color: var(--black); font-weight: 500; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-list p { margin-bottom: 12px; } .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.4rem; } .share-social-icons a.share-ico span { color: var(--gray); opacity: .6; margin-left: 10px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .share-social-icons a.share-ico:hover span { opacity: 1; } /* ========================================================================== 26. NEWSLETTER =========================================================================== */ .newsletter-1 .newsletter-overlay, .newsletter-4 .newsletter-overlay { padding: 70px 0; } .newsletter-2 .newsletter-overlay { padding: 80px 0 70px; } .newsletter-3 .container { padding-left: 0; padding-right: 0; } .newsletter-3 .newsletter-overlay { padding: 60px 50px; } /*------------------------------------------*/ /* NEWSLETTER TYPOGRAPHY /*------------------------------------------*/ .newsletter-txt h2 { margin-bottom: 35px; } .newsletter-txt h4, .newsletter-txt h3, .newsletter-txt p.p-sm { margin-bottom: 0; } .newsletter-txt a { font-weight: 500; text-decoration: underline; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 10%; } /*------------------------------------------*/ /* NEWSLETTER FORM /*------------------------------------------*/ .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 30px; padding-left: 10%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 40px; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--silver); font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-right: 12px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .newsletter-2.newsletter-section .form-control { border: none; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { background-color: var(--white); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: var(--light-gray); } .newsletter-section .form-control:-ms-input-placeholder { color: var(--light-gray); } .newsletter-section .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { display: block; width: 100%!important; height: 58px; font-size: 0.925rem; padding: 0.7rem 1.3rem; } .newsletter-2.newsletter-section .btn { font-size: 0.975rem; padding: 0.7rem 1.5rem; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #3eb1ff; font-size: 0.9rem; font-weight: 400; line-height: 1; margin-top: 15px; margin-left: 5px; } .newsletter-section .text-center .form-notification { margin-left: 0; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 27. CONTACTS =========================================================================== */ .contacts-1 .contact-form p { color: var(--header-color); font-size: 0.95rem; line-height: 1; font-weight: 600; margin-bottom: 16px; padding-left: 8px; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.835rem; font-weight: 300; line-height: 1.6; padding-left: 0; margin-top: 35px; margin-bottom: 10px; } .contact-form-notice p a { color: var(--header-color); font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* CONTACT FORM INPUT /*------------------------------------------*/ .contact-form .form-control, .contact-form .form-select { height: 64px; background-color: #fdfdfe; border: 1.5px solid #d5d5d5; box-shadow: 0 0 0 0; color: #3a4a56; font-size: 1rem; font-weight: 400; padding: 0 20px; margin-bottom: 35px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .contact-form .form-select { display: inline-block; width: 100%; color: var(--gray); box-shadow: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: var(--gray); } .contact-form .form-control:-ms-input-placeholder { color: var(--gray); } .contact-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0px none; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 28. FOOTER =========================================================================== */ .footer { padding-bottom: 40px; } .footer-data-logo, .footer-data-socials { margin-bottom: 65px; } .footer-info, .footer-links { margin-bottom: 40px; } .footer-1 .fl-2, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 10%; } .footer-1 .fl-3, .footer-1 .fl-5, .footer-1 .footer-contacts { margin-bottom: 30px; } .footer-1 .fl-4 { margin-bottom: 30px; } /*------------------------------------------*/ /* FOOTER LINKS MOBILE /*------------------------------------------*/ .footer h6.m-title { display: none; position: relative; } .footer h6.m-title:after { font-family: Flaticon; font-weight: 300; content: "\f14f"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer h6.m-title.expanded:after { content: "\f14e"; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ img.footer-logo { width: auto; max-width: inherit; max-height: 32px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 35px; margin-bottom: 0; } .footer-copyright-logo { position: relative; display: inline-block; float: left; top: -4px; } .footer-copyright-logo img.footer-logo { max-height: 28px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .footer-qr-code { max-width: 100px; text-align: center; background: var(--snow); padding: 9px; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h6 { font-size: 1.0815rem; line-height: 1; margin-bottom: 26px; } .footer .footer-links h6.h6-lg { margin-bottom: 14px; } .footer a { color: var(--gray); } .footer.bg--black a { color: var(--snow); } .footer-contacts p { margin-bottom: 4px; } .footer-phone { margin-top: 12px; margin-bottom: 4px; } .footer .footer-links h6.h6-lg a { text-decoration: underline; } .footer.color--white a, .footer.color--white li a { color: var(--snow); } .footer.color--white a:hover, .footer.color--white li a:hover { color: var(--white)!important; } /*------------------------------------------*/ /* FOOTER MAIL LINK /*------------------------------------------*/ .footer-mail-link { margin: 10px 0 0 3px; } .footer-mail-link a { font-size: 1rem; font-weight: 400; } .footer-mail-link span { position: relative; top: 5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; } /*------------------------------------------*/ /* FOOTER INFO /*------------------------------------------*/ .footer-info-socials { margin-top: 5px; } .footer-info-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-info-socials li { padding-right: 14px; } .footer-2 .footer-info-socials li { padding-right: 10px; } .footer-info-socials li span { position: relative; opacity: .8; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; } .footer-info-socials li:hover span { opacity: 1; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .foo-links li { width: auto!important; display: block!important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .foo-links.ico-10 li span { position: relative; top: 1.5px; right: 4px; } .foo-links li p { font-weight: 400; margin-bottom: 10px; } .foo-links li:last-child p { margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER SOCIAL /*------------------------------------------*/ .footer-socials { margin: 0; display: inline-block; } .footer-socials li { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .footer-socials a { display: block; margin-right: 14px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 15px; } .footer-socials li span { opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-socials li span:hover { opacity: 1; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* FOOTER STORE BAGES /*------------------------------------------*/ .footer .store { float: none; margin-right: 0; margin-bottom: 15px; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form { margin-bottom: 20px; } .footer .newsletter-form { margin-top: 25px; } .footer-form .newsletter-form .input-group { background-color: var(--form-control); border: 1.5px solid var(--smoke); padding: 9px 2px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-form .form-control { height: 32px; background-color: transparent; border: none; color: var(--gray); font-size: 1rem; font-weight: 400; padding: 0 10px; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { background-color: var(--white)!important; } .footer-form .form-control:focus { border: none; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: var(--gray); } .footer-form .form-control:-ms-input-placeholder { color: var(--gray); } .footer-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { height: 32px; padding: 0 10px; border: none!important; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; } .footer-form .btn:hover { color: var(--black)!important; } .footer-form .btn:focus { border: none!important; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #1680fb; font-size: 0.85rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } .footer-form .form-notification.error { color: #fc2f4b; } .footer-form .form-notification.valid { color: #48af4b; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 40px; } .footer hr.footer-top-hr { margin-top: 0; margin-bottom: 100px; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .footer-copyright.copyright-logo p { display: inline-block; line-height: 28px; margin-left: 15px; } /*------------------------------------------*/ /* BOTTOM FOOTER SECONDARY LINK /*------------------------------------------*/ .bottom-secondary-link p { margin-bottom: 0; } .bottom-secondary-link p span { position: relative; top: 1.5px; padding: 0 2px; } .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .footer-data-socials li, .bottom-footer-list li, .bottom-footer-socials li, .bottom-footer-payment li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-data-socials li { padding-left: 11px; } .bottom-foo-socials li, .bottom-footer-socials li { padding-left: 12px; } .footer-data-socials p { position: relative; line-height: 1; top: 9px; margin-bottom: 0; } .footer-list-divider { position: relative; top: -0.5px; transform: rotate(-90deg); margin-left: 4px; } .bottom-footer-list.ico-15 [class*="flaticon-"]:before, .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .bottom-footer-list li p { display: inline-block; float: left; margin-bottom: 0; } .footer-data-socials li span, .bottom-footer-socials li span { position: relative; top: 4px; opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-data-socials li span:hover, .bottom-footer-socials li span:hover { opacity: 1; } .bottom-foo-socials li span { position: relative; top: 1px; right: 1px; opacity: .8; } .bottom-footer-payment li span { line-height: 1!important; position: relative; top: 4px; opacity: .8; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.2125rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } /* ========================================================================== 29. INNER PAGE WRAPPER =========================================================================== */ .inner-page-hero { padding-top: 190px; } .page-hero-section { position: relative; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; padding-top: 180px; padding-bottom: 100px; } /*------------------------------------------*/ /* INNER PAGE TITLE /*------------------------------------------*/ .inner-page-title { margin-bottom: 80px; } .inner-page-title h3, .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1; margin-top: 25px; margin-bottom: 0; } .inner-page-title p span { color: var(--black); font-weight: 600; } .page-hero-section p { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 30. PAGE PAGINATION =========================================================================== */ .page-link { color: var(--gray); font-size: 1.1rem; font-weight: 500; padding: 2px 14px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .page-item:last-child .page-link { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .page-item.disabled .page-link { color: var(--gray); background-color: transparent; border-color: transparent; } .page-link:hover { color: var(--gray); background-color: transparent; border-color: var(--gray); } .page-link:focus { color: var(--gray); background-color: transparent; border-color: transparent; box-shadow: 0 0; } .page-item.active .page-link { color: var(--white)!important; } .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); } .theme--indigo .page-item.active .page-link { background-color: var(--indigo); border-color: var(--indigo); } .theme--orchid .page-item.active .page-link { background-color: var(--orchid); border-color: var(--orchid); } .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); } .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); } .theme--red .page-item.active .page-link { background-color: var(--red); border-color: var(--red); } .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); } .theme--violet-red .page-item.active .page-link { background-color: var(--violet-red); border-color: var(--violet-red); } /* ========================================================================== 31. TERMS, PRIVACY, COOKIES PAGES =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .txt-block.legal-info h5 { margin: 50px 0 25px; } .txt-block.legal-info h6 { margin: 25px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 4px; } .legal-info p span { color: var(--black); font-weight: 700; } .legal-info a { font-weight: 700; text-decoration: underline; } .legal-info a:hover { color: var(--black); } /* ========================================================================== 32. SIGN-IN / SIGN-UP PAGE =========================================================================== */ .register-page { position: relative; width: 100%; min-height: 100vh; z-index: 3; background: url(../images/register-page.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .theme--dark .register-page { background: url(../images/register-page-dark.jpg); } /*------------------------------------------*/ /* REGISTER PAGE LOGO /*------------------------------------------*/ .register-page-logo { position: fixed; padding-top: 30px; } .register-page-logo img { width: auto; max-width: inherit; max-height: 28px; } /*------------------------------------------*/ /* REGISTER PAGE FORM /*------------------------------------------*/ .register-page-form { margin: 0 3%; padding: 140px 20px; } .reset-page-wrapper { padding: 180px 20px 140px; } /*------------------------------------------*/ /* REGISTER PAGE TITLE /*------------------------------------------*/ .register-form-title { text-align: center; margin-bottom: 30px; } .register-form-title p { font-size: 1.05rem; margin-top: 8px; margin-bottom: 0; } /*------------------------------------------*/ /* RESET PASSWORD PAGE TITLE /*------------------------------------------*/ .reset-form-title { text-align: center; margin-bottom: 22px; } .reset-form-title p.p-sm { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* REGISTER PAGE TYPOGRAPHY /*------------------------------------------*/ .reset-password-link p { position: relative; font-size: 0.85rem; line-height: 1; margin-bottom: 30px; } .reset-password-link p a { text-decoration: underline; } .form-data span { display: block; font-size: 0.825rem; margin-bottom: 0; } .reset-password-form .form-data p { margin-top: 22px; margin-bottom: 12px; } .form-data p a, .form-data span a { color: var(--header-color); font-weight: 500; text-decoration: underline; } .register-page-form p.create-account { font-size: 0.9rem; line-height: 1; margin-top: 24px; margin-bottom: 0; } .register-page-form p.create-account a { font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* REGISTER PAGE SEPARATOR LINE /*------------------------------------------*/ .separator-line { display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 500; margin: 25px 0; } .separator-line::before, .separator-line::after { content: ""; border-top: 1.5px solid rgba(5, 5, 5, .18); margin: 0 15px 0 0; flex: 1 0 20px; } .separator-line::after { margin: 0 0 0 15px; } /*------------------------------------------*/ /* REGISTER PAGE FORM INPUT /*------------------------------------------*/ .reset-page-wrapper .form-control, .register-page-form .form-control { height: 56px; background-color: var(--white); border: 1.5px solid #d2d2d2; color: var(--black); font-size: 0.935rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .register-page-form .form-control::-moz-placeholder { color: var(--gray); } .register-page-form .form-control:-ms-input-placeholder { color: var(--gray); } .register-page-form .form-control::-webkit-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* REGISTER PAGE FORM BUTTON /*------------------------------------------*/ #login .register-page-form .btn.submit, #signup .register-page-form .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; margin-top: 0; } #signup .register-page-form .btn.submit { margin-top: 25px; } .reset-page-wrapper .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; } .register-page-form .btn-google { width: 100%; color: var(--header-color); font-size: 0.975rem; padding: 0.75rem 1.6rem; background-color: var(--white); border: 1px solid var(--silver); } .btn-google img { position: relative; width: 25px; height: 25px; top: 0; right: 5px; } .btn-google span { position: relative; top: 1px; } .register-page-form .btn-google:hover { border: 1px solid var(--header-color); } /*------------------------------------------*/ /* REGISTER PAGE FORM MESSAGE /*------------------------------------------*/ .reset-form-msg { text-align: center; width: 100%!important; display: block; } .reset-password-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .reset-password-form .error { position: relative; color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; top: -10px; margin-bottom: 12px; padding-left: 10px; } /*------------------------------------------*/ /* FORM HIDE PASSWORD /*------------------------------------------*/ .wrap-input { position: relative; } .btn-show-pass { color: var(--light-gray); align-items: center; position: absolute; height: 100%; top: 15px; right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-show-pass.ico-20 [class^="flaticon-"]:before, .btn-show-pass.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } .btn-show-pass:hover { color: var(--theme-color); } .eye-pass.flaticon-invisible { color: var(--gray); } /* ========================================================================== 33. MODAL ========================================================================== */ .modal-body { padding: 0!important; } .modal-dialog.modal-xl { width: 760px; } .modal .modal-content { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .modal-body-content { padding: 60px 35px 35px; } .modal-body-content h4 { margin-bottom: 15px; } .modal-body-content p { margin-bottom: 0; } .modal .bg-img { background: url(../images/modal.jpg); background-repeat: no-repeat; background-position: left center; background-size: cover; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .btn-close { position: absolute; z-index: 1; right: 20px!important; top: 20px!important; height: 1.5rem; width: 1.5rem; background: rgba(14, 14, 14, .11)!important; border-radius: 50%; padding: 0; opacity: .9; z-index: 9999; } .modal .btn-close span { position: relative; line-height: 24px!important; top: -2px; } .modal .btn-close.ico-10 [class^="flaticon-"]:before, .modal .btn-close.ico-10 [class^="flaticon-"]:after { font-size: 0.6rem; } .modal .btn-close:focus { outline: none!important; box-shadow: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW NEWSLETTER FORM /*------------------------------------------*/ .modal-body .newsletter-form { margin-top: 25px; } .modal .newsletter-form .form-control { text-align: center; height: 58px; background-color: #f3f4f5; border: 1.5px solid transparent; font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-bottom: 20px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Form Input Focus /*------------------------------------------*/ .modal .newsletter-form .form-control:focus { outline: 0; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Form Input Placeholder /*------------------------------------------*/ .modal .newsletter-form .form-control::-moz-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Form Button /*------------------------------------------*/ .modal .input-group-btn { display: block; width: 100%!important; } .modal .newsletter-form .btn { display: block; width: 100%!important; height: 58px; font-size: 0.975rem; margin: 0; } /*------------------------------------------*/ /* Form Notification /*------------------------------------------*/ .modal .form-notification { text-align: center; color: #1680fb; font-size: 0.85rem; font-weight: 400; line-height: 1; margin-top: 12px; } .modal .form-notification.valid, .modal .form-notification.error { color: #fc2f4b; } .modal .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 34. COOKIES =========================================================================== */ #cookies { position: fixed; width: 90%; bottom: 25px; left: 5%; z-index: 200; padding: 25px; border: 1px solid #ddd; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); -moz-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); } #cookies p { color: #353f4f; font-size: 0.875rem; line-height: 1.5; margin: 0; } #cookies-ok { position: absolute; right: 52px; bottom: 18px; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 500; background-color: #353f4f!important; border: 2px solid #353f4f!important; padding: 6px 20px; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } #cookies-ok:hover { color: #353f4f!important; background-color: transparent!important; border-color: #353f4f!important; } #cookies-info { color: #353f4f!important; font-weight: 500; text-decoration: underline; margin-left: 10px; } .theme--blue #cookies-info:hover { color: var(--blue)!important; } .theme--green #cookies-info:hover { color: var(--green)!important; } .theme--indigo #cookies-info:hover { color: var(--indigo)!important; } .theme--orchid #cookies-info:hover { color: var(--orchid)!important; } .theme--pink #cookies-info:hover { color: var(--pink)!important; } .theme--purple #cookies-info:hover { color: var(--purple)!important; } .theme--red #cookies-info:hover { color: var(--red)!important; } .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; } .theme--violet-red #cookies-info:hover { color: var(--violet-red)!important; } #cookies-close { position: absolute; right: 25px; top: 20px; height: 12px; width: 12px; } #cookies-close svg { width: 11px; height: 11px; } /* ========================================================================== 35. COLOR SCHEME ========================================================================== */ :root { --theme-color: #0083ff; --theme-color-secondary: #0083ff; } .bg--theme { background-color: var(--theme-color); } .bg--theme-2 { background-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* BUTTON /*------------------------------------------*/ .btn--theme, .hover--theme:hover, .theme--dark .btn--theme, .theme--dark .hover--theme:hover, .color--white .hover--theme:hover, .scroll .hover--theme:hover, .theme--dark .color--white .hover--theme:hover, .theme--dark .scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme, .theme--dark .btn--tra-theme, .theme--dark .hover--tra-theme:hover, .theme--dark .color--white .btn--tra-theme { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } .btn--theme-2, .hover--theme-2:hover, .theme--dark .btn--theme-2, .theme--dark .hover--theme-2:hover, .color--white .hover--theme-2:hover, .scroll .hover--theme-2:hover, .theme--dark .color--white .hover--theme-2:hover, .theme--dark .scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .btn--tra-theme-2, .hover--tra-theme-2:hover, .color--white .btn--tra-theme-2, .theme--dark .btn--tra-theme-2, .theme--dark .hover--tra-theme-2:hover, .theme--dark .color--white .btn--tra-theme-2 { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } /*------------------------------------------*/ /* COLOR /*------------------------------------------*/ .color--theme, .color--theme a, .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); } .color--theme-2, .color--theme-2 a, .color--theme-2 :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico.color--theme path, .shape-ico.color--theme-2 path { fill: #f4f9fc; } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .loading--theme .cssload-spinner:after, .loading--theme .cssload-spinner:before { border-color: var(--theme-color); } /*------------------------------------------*/ /* HEADER & NAVIGATION /*------------------------------------------*/ .nav-theme .sm-info { background-color: var(--theme-color); } .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .cbox-1:hover .cbox-1-ico.bg--theme { color: var(--theme-color); border-color: var(--theme-color); } .cbox-1:hover .cbox-1-ico.bg--theme-2 { color: var(--theme-color-secondary); border-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .p-table.theme--border { border: 3px solid var(--theme-color); } .pricing-features.ico--theme span { color: var(--theme-color); } .pricing-features.ico--theme-2 span { color: var(--theme-color-secondary); } .switcher { background-color: var(--theme-color); } .comp-table .color--theme { color: var(--theme-color); } .comp-table .color--theme-2 { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .newsletter-section .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { border-color: var(--theme-color)!important; } .footer-form .btn { color: var(--theme-color); } /*------------------------------------------*/ /* PAGINATION /*------------------------------------------*/ .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .reset-password-link p a:hover, .reset-password-form .form-data p a:hover { color: var(--theme-color); } .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { border-color: var(--theme-color); } .modal .newsletter-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* COOKIES /*------------------------------------------*/ #cookies-ok { background-color: var(--theme-color)!important; border: 2px solid var(--theme-color)!important; } #cookies-info:hover { color: var(--theme-color)!important; } /*------------------------------------------*/ /* DARK MODE /*------------------------------------------*/ .theme--dark .shape-ico.color--theme path, .theme--dark .shape-ico.color--theme-2 path { fill: rgba(43, 48, 64, .5); } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { border-color: var(--theme-color)!important; } /* ========================================================================== 36. DARK MODE ========================================================================== */ body.theme--dark { --dark-theme-bg: #13161f; --black: #f9f9f9; --gray: #c8c8c8; --ink: #101219; --form-control: #191c28; --header-color: #fff; --header-link: #dee1ea; --silver: rgba(43, 48, 64, 1); --smoke: rgba(43, 48, 64, .7); --white-smoke: #191c28; } body.theme--dark { background-color: var(--dark-theme-bg); color: var(--gray); } .theme--dark .bg--white, .theme--dark .bg--coal, .theme--dark .bg--lavender, .theme--dark .bg--magnolia, .theme--dark .bg--aliceblue, .theme--dark .bg--tra-violet-red { background-color: var(--white-smoke); } .theme--dark .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .theme--dark .bg--03 { background-image: url(../images/bg-03d.jpg); } .theme--dark .bg--05 { background-image: url(../images/bg-05d.jpg); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ .theme--dark hr.divider, .theme--dark .footer hr { background-image: linear-gradient(90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); } .theme--dark hr.divider.divider-light { background-color: #fff; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%); opacity: 1; } /*------------------------------------------*/ /* TYPOGRAPHY /*------------------------------------------*/ .theme--dark a { color: var(--gray); } .theme--dark a:hover, .theme--dark a.tra-link:hover span { color: var(--white); } /*------------------------------------------*/ /* BUTTONS /*------------------------------------------*/ .theme--dark .btn--transparent { color: var(--white)!important; } /* WHITE BUTTON */ .theme--dark .btn--white, .theme--dark .hover--white:hover, .theme--dark .color--white .hover--white:hover { color: #333!important; background-color: var(--white)!important; border-color: var(--white)!important; } /* BLACK BUTTON */ .theme--dark .btn--black, .theme--dark .hover--black:hover, .theme--dark .color--white .hover--black:hover { color: var(--ink)!important; border-color: var(--black)!important; background-color: var(--black)!important; } .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .color--white .btn--tra-black { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /* BLUE BUTTON */ .theme--dark .btn--blue, .theme--dark .hover--blue:hover, .theme--dark .color--white .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .btn--tra-blue, .theme--dark .hover--tra-blue:hover, .theme--dark .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /* GREEN BUTTON */ .theme--dark .btn--green, .theme--dark .hover--green:hover, .theme--dark .color--white .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .btn--tra-green, .theme--dark .hover--tra-green:hover, .theme--dark .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /* INDIGO BUTTON */ .theme--dark .btn--indigo, .theme--dark .hover--indigo:hover, .theme--dark .color--white .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .btn--tra-indigo, .theme--dark .hover--tra-indigo:hover, .theme--dark .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /* ORCHID BUTTON */ .theme--dark .btn--orchid, .theme--dark .hover--orchid:hover, .theme--dark .color--white .hover--orchid:hover, .theme--dark .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .btn--tra-orchid, .theme--dark .hover--tra-orchid:hover, .theme--dark .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /* PINK BUTTON */ .theme--dark .btn--pink, .theme--dark .hover--pink:hover, .theme--dark .color--white .hover--pink:hover, .theme--dark .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .btn--tra-pink, .theme--dark .hover--tra-pink:hover, .theme--dark .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /* PURPLE BUTTON */ .theme--dark .btn--purple, .theme--dark .hover--purple:hover, .theme--dark .color--white .hover--purple:hover, .theme--dark .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .btn--tra-purple, .theme--dark .hover--tra-purple:hover, .theme--dark .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /* RED BUTTON */ .theme--dark .btn--red, .theme--dark .hover--red:hover, .theme--dark .color--white .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .btn--tra-red, .theme--dark .hover--tra-red:hover, .theme--dark .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /* SKYBLUE BUTTON */ .theme--dark .btn--skyblue, .theme--dark .hover--skyblue:hover, .theme--dark .color--white .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .btn--tra-skyblue, .theme--dark .hover--tra-skyblue:hover, .theme--dark .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /* VIOLET RED BUTTON */ .theme--dark .btn--violet-red, .theme--dark .hover--violet-red:hover, .theme--dark .color--white .hover--violet-red:hover, .theme--dark .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .btn--tra-violet-red, .theme--dark .hover--tra-violet-red:hover, .theme--dark .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /* YELLOW BUTTON */ .theme--dark .btn--yellow, .theme--dark .hover--yellow:hover, .theme--dark .color--white .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .theme--dark .shape-ico.color--blue path, .theme--dark .shape-ico.color--indigo path, .theme--dark .shape-ico.color--skyblue path, .theme--dark .shape-ico.color--lilac path, .theme--dark .shape-ico.color--orchid path, .theme--dark .shape-ico.color--pink path, .theme--dark .shape-ico.color--purple path, .theme--dark .shape-ico.color--violet-red path { fill: rgba(43, 48, 64, .5); } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .theme--dark .dark-menu .wsmainfull, .theme--dark .white-menu .wsmainfull { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a { color: var(--header-link); } .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover { color: #eee!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover { color: var(--white)!important; } /*------------------------------------------*/ /* HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--white-smoke)!important; border: solid 1px var(--smoke)!important; -webkit-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); -moz-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); box-shadow: 0 2px 3px rgba(1, 1, 1, .1); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before, .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before { background-color: var(--ink); border-left: solid var(--ink); border-top: solid 1px var(--ink); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); background-color: transparent!important; } .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .theme--dark .tra-menu .wsmainfull.scroll, .theme--dark .white-menu .wsmainfull.scroll, .theme--dark .dark-menu.dark-scroll .wsmainfull.scroll { background-color: var(--ink)!important; padding: 0; -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-link); } .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(44, 49, 66, .72)!important; color: var(--white); } .theme--dark .navbar-light .scroll .btn.btn--tra-white { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .wsmainfull .hover--black:hover { color: var(--white)!important; border-color: #353f4f!important; background-color: #353f4f!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--black:hover { color: var(--ink)!important; border-color: var(--white)!important; background-color: var(--white)!important; } .theme--dark .navbar-light .scroll .wsmenu > .wsmenu-list > li > a.btn.hover--black:hover { color: var(--ink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--indigo:hover { color: var(--white)!important; border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .white-scroll .wsmainfull .hover--tra-white:hover, .theme--dark .white-scroll .wsmainfull.scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-white { display: block; } .theme--dark .navbar-dark .logo-white { display: none; } /*------------------------------------------*/ /* CAREERS /*------------------------------------------*/ .theme--dark .jobs-category { background-color: #181b27; border-color: var(--silver); } /*------------------------------------------*/ /* FEATURES /*------------------------------------------*/ .theme--dark .fbox-5.bg--white { background-color: #181a27; border-color: var(--silver); } .theme--dark .fbox-3.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .theme--dark .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } .theme--dark .bc-04-wrapper { border-color: var(--silver); } /*------------------------------------------*/ /* TEAM /*------------------------------------------*/ .theme--dark .team-member { background-color: var(--white-smoke); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .theme--dark .p-table { border-color: var(--silver); } .theme--dark .pricing-discount h6 { color: #353f4f; } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .theme--dark .int_tool-1 .tool_logo.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* RATING /*------------------------------------------*/ .theme--dark .rbox-1 .star-rating { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .rbox-3 p span { color: #fff; } /*------------------------------------------*/ /* REVIEWS /*------------------------------------------*/ .theme--dark .reviews-3-wrapper:after { background-color: #181a27; } .theme--dark .review-1 { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .owl-theme .owl-dots .owl-dot span { background: #3a3a3a; } .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: var(--white); } /*------------------------------------------*/ /* DOWNLOAD /*------------------------------------------*/ .theme--dark .download-item { border-color: var(--silver); } /*------------------------------------------*/ /* FAQs /*------------------------------------------*/ .theme--dark .accordion-panel { color: var(--gray); } .theme--dark .faqs-section .accordion-item .accordion-thumb:after, .theme--dark .faqs-section .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } /*------------------------------------------*/ /* BANNER /*------------------------------------------*/ .theme--dark .os-link { border-color: var(--silver); } .theme--dark .os-qr-code { background-color: #fff; } .theme--dark .os-logo img { filter: invert(100%); opacity: .4; } .theme--dark .banner-qr-code p { color: var(--ink); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .theme--dark .newsletter-section .form-control::-moz-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: var(--gray); } .theme--dark .newsletter-1.newsletter-section .form-control, .theme--dark .newsletter-3.newsletter-section .form-control { background-color: var(--white-smoke); } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { background-color: var(--dark-theme-bg); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .theme--dark .contact-form .form-control, .theme--dark .contact-form .form-select { background-color: var(--white-smoke); border: 1.5px solid var(--silver); } .theme--dark .contact-form .form-control:focus, .theme--dark .contact-form .form-select:focus { background-color: var(--dark-theme-bg); border: 1.5px solid var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .theme--dark .footer-form .newsletter-form .input-group:focus-within { background-color: var(--dark-theme-bg)!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* INNER PAGE WRAPPER /*------------------------------------------*/ .theme--dark .inner-page-title p span { color: var(--white); } /*------------------------------------------*/ /* TERMS, PRIVACY, COOKIES PAGES /*------------------------------------------*/ .theme--dark .legal-info a, .theme--dark .legal-info p span { color: rgba(255, 255, 255, .86); } .theme--dark .legal-info a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .modal-body-content h4 { color: #313435; } .theme--dark .modal-body-content p { color: #6c757d; } .theme--dark .newsletter-form .hover--black:hover { color: #fff!important; border-color: #353f4f!important; background-color: #353f4f!important; } /*------------------------------------------*/ /* SIGN-IN / SIGN-UP PAGE /*------------------------------------------*/ .theme--dark .separator-line::before, .theme--dark .separator-line::after { border-top: 1.5px solid rgba(255, 255, 255, .18); } .theme--dark .reset-page-wrapper .form-control, .theme--dark .register-page-form .form-control { background-color: #2c3344; border: 1px solid #2c3344; } .theme--dark .reset-page-wrapper .form-control:focus, .theme--dark .register-page-form .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--theme-color); } .theme--dark .register-page-form .btn-google { color: var(--header-color); background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .register-page-form .btn-google:hover { border-color: var(--header-color); } /* Template Name: Pintex - Mobile App & Software Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Pintex - Mobile App Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: https://www.jthemes.com/ Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App */ /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ :root { --alice-blue: #f1f3ff; --black: #353f4f; --blue: #0083ff; --coal: #111b21; --disable: #b5b5b5; --form-control: #fafafd; --gray: #545465; --green: #0fbc49; --header-color: #120036; --indigo: #7b5dd6; --ink: #1d222f; --lavender: #f8f5fd; --light-blue: #edf8fd; --light-gray: #90a0b2; --lilac: #beaedb; --magnolia: #f9f7fd; --metal: #2c3840; --noice: #f8f9fa; --orchid: #ce67c9; --pink: #fc5a8d; --purple: #9370db; --silver: #ccc; --sky-blue: #04aaff; --smoke: #e7e7e7; --snow: #f5f6f6; --violet-red: #c73e9b; --white: #fff; --white-smoke: #f4f4f9; --yellow: #ffbf15; --tra-black: rgba(5, 5, 5, .05); --tra-gray: rgba(96, 96, 96, .13); --tra-indigo: rgba(128, 96, 225, .13); --tra-ink: rgba(1, 1, 1, .1); --tra-purple: rgba(102, 51, 255, .13); --tra-white: rgba(255, 255, 255, .2); --tra-violet-red: rgba(237, 230, 244, .84); --tra-white-smoke: rgba(244, 244, 249, .13); } html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--gray); line-height: 1.6666; font-weight: 400; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block--shadow { -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } .img-block .block--shadow { -webkit-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); -moz-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); } /*------------------------------------------*/ /* BORDER SETTINGS /*------------------------------------------*/ .block--border { border: 1px solid var(--silver); } .block--border.border--light, .block--border.block--shadow { border: 1px solid var(--smoke); } .x-border { border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); } .x-border.border--light { border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); } .t-border { border-top: 1px solid var(--silver); } .t-border.border--light { border-top: 1px solid var(--smoke); } .b-border { border-bottom: 1px solid var(--silver); } .b-border.border--light { border-bottom: 1px solid var(--smoke); } /*------------------------------------------*/ /* BORDER RADIUS SETTING /*------------------------------------------*/ .r-0 { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .r-02 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .r-04 { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .r-06 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .r-08 { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .r-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .r-12 { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } .r-14 { -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; } .r-16 { -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .r-18 { -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; } .r-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .r-22 { -webkit-border-radius: 22px; -moz-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; } .r-24 { -webkit-border-radius: 24px; -moz-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; } .r-26 { -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; border-radius: 26px; } .r-28 { -webkit-border-radius: 28px; -moz-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; } .r-30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } .r-32 { -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; border-radius: 32px; } .r-34 { -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; } .r-36 { -webkit-border-radius: 36px; -moz-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; } .r-100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .py-90 { padding-top: 90px; padding-bottom: 90px; } .py-100 { padding-top: 100px; padding-bottom: 100px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .px-15 { padding-left: 15x; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-20 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .mt-0 { margin-top: 0!important; } .mt-15 { margin-top: 15x; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-0 { margin-bottom: 0!important; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--aliceblue { background-color: var(--alice-blue); } .bg--black { background-color: var(--black); } .bg--blue { background-color: var(--blue); } .bg--coal { background-color: var(--coal); } .bg--indigo { background-color: var(--indigo); } .bg--lavender { background-color: var(--lavender); } .bg--lightblue { background-color: var(--light-blue); } .bg--lilac { background-color: var(--lilac); } .bg--magnolia { background-color: var(--magnolia); } .bg--noice { background-color: var(--noice); } .bg--orchid { background-color: var(--orchid); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--red { background-color: var(--red); } .bg--skyblue { background-color: var(--sky-blue); } .bg--snow { background-color: var(--snow); } .bg--violet-red { background-color: var(--violet-red); } .bg--white { background-color: var(--white); } .bg--whitesmoke { background-color: var(--white-smoke); } .bg--yellow { background-color: var(--yellow); } /*------------------------------------------*/ /* TRANSPARENT BACKGROUND COLORS /*------------------------------------------*/ .bg--tra-indigo { background-color: var(--tra-indigo); } .bg--tra-purple { background-color: var(--tra-purple); } .bg--tra-violet-red { background-color: var(--tra-violet-red); } /*------------------------------------------*/ /* GRADIENT COLOR BACKGROUND /*------------------------------------------*/ .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%); } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .shape--01:after, .shape--02:after { position: absolute; content: ''; width: 100%; height: 55%; left: 0; z-index: -1; } .shape--01:after { top: 0; } .shape--02:after { top: 45%; } .shape--whitesmoke:after { background-color: var(--white-smoke); } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06, .bg--07 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../images/bg-01.jpg); } .bg--02 { background-image: url(../images/bg-02.jpg); } .bg--03 { background-image: url(../images/bg-03.jpg); } .bg--04 { background-image: url(../images/bg-04.jpg); } .bg--05 { background-image: url(../images/bg-05.jpg); } .bg--06 { background-image: url(../images/bg-06.jpg); } .bg--07 { background-image: url(../images/bg-07.jpg); } /*------------------------------------------*/ /* BACKGROUND PATTERN /*------------------------------------------*/ .pattern--01, .pattern--02, .pattern--03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .pattern--01 { background-image: url(../images/pattern-01.png); } .pattern--02 { background-image: url(../images/pattern-02.png); } .pattern--03 { background-image: url(../images/pattern-03.png); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ hr.divider { width: 100%; height: 1px; background-color: transparent; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%); opacity: .4; border: none; margin: 0; } /*------------------------------------------*/ /* WAVE SHAPE BOTTOM /*------------------------------------------*/ .wave-shape-bottom { position: absolute; bottom: 0; left: 0; width: 100%; } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h6, h5, h4, h3, h2, h1 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-weight: 700; letter-spacing: 0; margin-bottom: 0; } /*------------------------------------------*/ /* HEADER SIZE /*------------------------------------------*/ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.25rem; } /* 20px */ h6.h6-xl { font-size: 1.3125rem; } /* 21px */ h5 { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h5.h5-xl { font-size: 1.75rem; } /* 28px */ h4 { font-size: 1.875rem; } /* 30px */ h4.h4-md { font-size: 2rem; } /* 32px */ h4.h4-lg { font-size: 2.125rem; } /* 34px */ h4.h4-xl { font-size: 2.25rem; } /* 36px */ h3 { font-size: 2.375rem; } /* 38px */ h3.h3-md { font-size: 2.5rem; } /* 40px */ h3.h3-lg { font-size: 2.6255rem; } /* 42px */ h3.h3-xl { font-size: 2.75rem; } /* 44px */ h2 { font-size: 2.875rem; } /* 46px */ h2.h2-md { font-size: 3rem; } /* 48px */ h2.h2-lg { font-size: 3.125rem; } /* 50px */ h2.h2-xl { font-size: 3.25rem; } /* 52px */ h2.h2-title { font-size: 3.375rem; } /* 54px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 0.9375rem; } /* 15px */ p { font-size: 1rem; } /* 16px */ p.p-md { font-size: 1.0625rem; } /* 17px */ p.p-lg { font-size: 1.125rem; } /* 18px */ p.p-xl { font-size: 1.1875rem; } /* 19px */ /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: var(--header-color); text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: var(--header-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a.tra-link { font-size: 1rem; line-height: 1; font-weight: 600; } a.tra-link span { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.75rem; line-height: 0.7rem!important; top: 1.5px; left: 1px; } a.tra-link:hover span { color: var(--black)!important; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ol.digit-list p, ul.simple-list.long-list p { margin-bottom: 8px; } .content-section ul.simple-list.long-list p { margin-bottom: 5px; } /*------------------------------------------*/ /* DIGIT LIST /*------------------------------------------*/ ol.digit-list { padding: 0; margin-left: 15px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { font-size: 1rem; line-height: 1; font-weight: 600; background-color: transparent; padding: 0.9rem 1.8rem; border: 2px solid transparent; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .btn.btn-sm { font-size: 0.975rem; padding: 0.7rem 1.5rem; } .btn.btn-md { font-size: 1rem; padding: 0.9425rem 1.75rem; } .btn.btn-lg { font-size: 1.05rem; padding: 1.1rem 1.8rem; } .btn.ico-20.ico-left, .btn.ico-20.ico-right { padding: 0.9rem 1.55rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.1rem; letter-spacing: -0.35px; padding: 0.9rem 1.35rem; } .btn.ico-30.ico-left, .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Buttons Group /*------------------------------------------*/ .text-center .btns-group { display: inline-block; } .btns-group .btn:first-child { margin-right: 15px; } .btns-group .btn.ico-30.ico-left { padding: 0.37rem 0.5rem; } .btns-group .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Button Icon /*------------------------------------------*/ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1rem; line-height: 0.7rem!important; top: 4px; } .btn.ico-25 [class*="flaticon-"]:before, .btn.ico-25 [class*="flaticon-"]:after { position: relative; font-size: 1.275rem; line-height: 1rem!important; top: 1px; } .btn.ico-25.ios-btn [class*="flaticon-"]:before, .btn.ico-25.ios-btn [class*="flaticon-"]:after { top: 0; } .ico-25-txt { position: relative; top: -3px; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { position: relative; top: 0; right: 4px; } .btn.ico-30.ico-right span { position: relative; top: 0; left: 4px; } .btn.ico-30.ico-left span.ico-30-txt, .btn.ico-30.ico-right span.ico-30-txt { position: relative; top: -10px; right: 0; } .btn.ico-30.ico-right span.ico-30-txt { left: 0; } /*------------------------------------------*/ /* Button Text /*------------------------------------------*/ p.btn-txt { margin: 15px 0 0 0; } p.btn-txt span { font-weight: 700; } .btn-rating p.btn-txt { margin: 0; } .star-rating small, .star-rating span.rating-txt { font-size: 0.9375rem; } p.btns-group-txt { margin: 14px 0 0 0; } .btn-rating { margin-top: 10px; } .text-center p.btns-group-txt { margin-top: 20px; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding-left: 5px; } .text-center p.btn-txt.ico-15, .text-center p.btns-group-txt.ico-15 { padding-left: 0; } p.btn-txt span, p.btns-group-txt span { position: relative; top: 0.5px; right: 2px; } p.btns-group-txt span.txt-data { display: block; top: 0; right: 0; } p.btns-group-txt span.txt-data a { margin-left: 4px; text-decoration: underline; } p.btns-group-txt span.txt-data a:hover { text-decoration: none; } .hero-section .color--white p.btns-group-txt span.txt-data a:hover { color: var(--white)!important; } .btn-txt.ico-15 [class*="flaticon-"]:before, .btn-txt.ico-15 [class*="flaticon-"]:after, .btns-group-txt.ico-15 [class*="flaticon-"]:before, .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .star-rating.ico-10 [class*="flaticon-"]:before, .star-rating.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; top: 1px; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; } .p-sm.btn-txt.ico-20 [class*="flaticon-"]:before, .p-sm.btn-txt.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.875rem; top: 1px; } .os-version-ext { margin-top: 16px; } .os-version-ext .star-rating small { font-size: 0.9rem; margin-left: 6px; } span.os-version { display: block; font-size: 0.9rem; line-height: 1; margin-top: 5px; } /*------------------------------------------*/ /* TRANPARENT BUTTON /*------------------------------------------*/ .btn--transparent { color: var(--black)!important; background-color: transparent!important; border-color: transparent!important; } .btn--transparent.color--white { color: var(--white)!important; } .btn--transparent:hover { background-color: transparent!important; border-color: transparent!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover, .color--white .hover--white:hover { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .white-scroll .scroll .hover--tra-white:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } .white-scroll .scroll .hover--white:hover { color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover, .white-scroll .scroll .hover--black:hover { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .btn--tra-black, .hover--tra-black:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* TRA GRAY BUTTON /*------------------------------------------*/ .btn--tra-gray, .hover--tra-gray:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* BLUE BUTTON /*------------------------------------------*/ .btn--blue, .hover--blue:hover, .color--white .hover--blue:hover, .white-scroll .scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /*------------------------------------------*/ /* GREEN BUTTON /*------------------------------------------*/ .btn--green, .hover--green:hover, .color--white .hover--green:hover, .white-scroll .scroll .hover--green:hover { color: var(--white)!important;border-color: var(--green)!important; background-color: var(--green)!important; } .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /*------------------------------------------*/ /* INDIGO BUTTON /*------------------------------------------*/ .btn--indigo, .hover--indigo:hover, .color--white .hover--indigo:hover, .white-scroll .scroll .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .btn--tra-indigo, .hover--tra-indigo:hover, .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /*------------------------------------------*/ /* ORCHID BUTTON /*------------------------------------------*/ .btn--orchid, .hover--orchid:hover, .color--white .hover--orchid:hover, .white-scroll .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .btn--tra-orchid, .hover--tra-orchid:hover, .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /*------------------------------------------*/ /* PINK BUTTON /*------------------------------------------*/ .btn--pink, .hover--pink:hover, .color--white .hover--pink:hover, .white-scroll .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /*------------------------------------------*/ /* PURPLE BUTTON /*------------------------------------------*/ .btn--purple, .hover--purple:hover, .color--white .hover--purple:hover, .white-scroll .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /*------------------------------------------*/ /* RED BUTTON /*------------------------------------------*/ .btn--red, .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover { color: var(--white)!important;border-color: var(--red)!important; background-color: var(--red)!important; } .btn--tra-red, .hover--tra-red:hover, .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /*------------------------------------------*/ /* SKY BLUE BUTTON /*------------------------------------------*/ .btn--skyblue, .hover--skyblue:hover, .color--white .hover--skyblue:hover, .white-scroll .scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /*------------------------------------------*/ /* VIOLET RED BUTTON /*------------------------------------------*/ .btn--violet-red, .hover--violet-red:hover, .color--white .hover--violet-red:hover, .white-scroll .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .btn--tra-violet-red, .hover--tra-violet-red:hover, .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /*------------------------------------------*/ /* YELLOW BUTTON /*------------------------------------------*/ .btn--yellow, .hover--yellow:hover, .color--white .hover--yellow:hover, .white-scroll .scroll .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: var(--white); -webkit-box-shadow: none; box-shadow: none; } .btn--transparent:focus { background-color: transparent; border-color: transparent; } .btn--tra-black:focus, .btn--transparent:focus, .btn.btn--tra-gray:focus { color: var(--black); -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BADGE ICONS /*------------------------------------------*/ .stores-badge { display: inline-block; } .store { display: inline-block; text-align: center; margin-right: 12px; } .store:last-child { margin-right: 0; } .store img { width: auto; max-width: inherit; } .badge-img-xs .store img { max-height: 2.5rem; } .badge-img-sm .store img { max-height: 2.625rem; } .badge-img-md .store img { max-height: 2.875rem; } .badge-img-lg .store img { max-height: 3rem; } .badge-img-xl .store img { max-height: 3.25rem; } /*------------------------------------------*/ /* WATCH VIDEO LINK /*------------------------------------------*/ .watch-video { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; margin-top: 25px; } .btns-group .watch-video { display: inline-block; margin-top: 0!important; top: 22px; } /*------------------------------------------*/ /* Link Icon /*------------------------------------------*/ .watch-video-link { position: relative; text-align: center; float: left; width: 2.85rem; height: 2.85rem; color: var(--white); border: none; margin-right: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .watch-video-link:before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; bottom: -3px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .watch-video-link:hover:before { opacity: .75; left: -8px; right: -8px; top: -8px; bottom: -8px; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { font-size: 2rem; line-height: 2.85rem!important; margin-left: 5px; } /*------------------------------------------*/ /* Link Text /*------------------------------------------*/ .watch-video-txt { overflow: hidden; flex: 1; max-width: 100%; text-align: left!important; } p.video-txt-lg { font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 5px; } p.video-txt-sm { font-size: 0.925rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: var(--white); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn-xl { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .video-btn-lg { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-sm { width: 4.375rem; height: 4.375rem; margin-top: -2.1875rem; margin-left: -2.1875rem; } .video-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-sm [class^="flaticon-"]:after { font-size: 3.5rem; line-height: 4.375rem!important; margin-left: 5px; } .video-btn:hover .video-block-wrapper { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-lg:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } .video-btn.video-btn-md:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .video-btn.video-btn-sm:hover:before { opacity: .75; left: -0.75rem; right: -0.75rem; top: -0.75rem; bottom: -0.75rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } /* 12px */ .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } /* 15px */ .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } /* 20px */ .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } /* 25px */ .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } /* 30px */ .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } /* 35px */ .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } /* 40px */ .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } /* 45px */ .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } /* 50px */ .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } /* 55px */ .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } /* 60px */ .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } /* 65px */ .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } /* 70px */ .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } /* 75px */ .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } /* 80px */ .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } /* 85px */ .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } /* 90px */ .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } /* 95px */ .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } /* 100px */ .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } /* 105px */ .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } /* 110px */ .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } /* 115px */ .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } /* 120px */ .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /* 125px */ /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-55 .shape-ico svg { width: 125px; height: 125px; top: -42px; left: calc(50% - 66px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -48px; left: calc(50% - 75px); } .shape-ico.color--blue path { fill: #f4f9fc; } .shape-ico.color--indigo path { fill: #f6f4fd; } .shape-ico.color--orchid path { fill: rgba(218, 112, 214, .1); } .shape-ico.color--pink path { fill: rgba(252, 234, 239, .7); } .shape-ico.color--purple path { fill: #f6f4fd; } .shape-ico.color--skyblue path { fill: rgba(4, 170, 255, .09); } .shape-ico.color--violet-red path { fill: rgba(199, 62, 155, .08); } /*------------------------------------------*/ /* PNG ICONS SETTINGS /*------------------------------------------*/ .img-20 img { width: 20px; height: 20px; } .img-25 img { width: 25px; height: 25px; } .img-30 img { width: 30px; height: 30px; } .img-35 img { width: 35px; height: 35px; } .img-40 img { width: 40px; height: 40px; } .img-45 img { width: 45px; height: 45px; } .img-50 img { width: 50px; height: 50px; } .img-55 img { width: 55px; height: 55px; } .img-60 img { width: 60px; height: 60px; } .img-65 img { width: 65px; height: 65px; } .img-70 img { width: 70px; height: 70px; } .img-75 img { width: 75px; height: 75px; } .img-80 img { width: 80px; height: 80px; } .img-85 img { width: 85px; height: 85px; } .img-90 img { width: 90px; height: 90px; } .img-95 img { width: 95px; height: 95px; } .img-100 img { width: 100px; height: 100px; } .img-105 img { width: 105px; height: 105px; } .img-110 img { width: 110px; height: 110px; } .img-115 img { width: 115px; height: 115px; } .img-120 img { width: 120px; height: 120px; } .img-125 img { width: 125px; height: 125px; } .img-130 img { width: 130px; height: 130px; } .img-135 img { width: 135px; height: 135px; } .img-140 img { width: 140px; height: 140px; } .img-145 img { width: 145px; height: 145px; } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .5); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* SECTION ID /*------------------------------------------*/ .section-id { display: block; font-size: 0.85rem; line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 32px; } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title p { margin-top: 22px; margin-bottom: 0; } .section-title .btns-group { margin-top: 35px; } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages, .text-center .advantages { margin-top: 15px; } .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; } .advantages-links-divider { position: relative; top: 1px; transform: rotate(-90deg); } .advantages li p { display: inline-block; float: left; margin-bottom: 0; } .advantages.ico-15 li p span { position: relative; top: 2px; right: -1px; } .advantages.ico-15 [class*="flaticon-"]:before, .advantages.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .advantages li p a { font-weight: 400; text-decoration: underline; } .advantages li p a:hover { text-decoration: underline; } .white--color .advantages li p a:hover { color: var(--white); } /*------------------------------------------*/ /* COMPATABILITY /*------------------------------------------*/ .compatibility { display: inline-block; padding: 3px 20px; margin-top: 15px; margin-bottom: 0; } .compatibility span { position: relative; top: -1.5px; right: 2px; } .compatibility.ico-10 [class*="flaticon-"]:before, .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; } /*------------------------------------------*/ /* TOOLS LIST / PAYMENT METHODS /*------------------------------------------*/ .tools-list, .payment-methods { margin-top: 25px; } .tools-list p, .payment-methods p { font-weight: 400; margin-bottom: 12px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-right: 6px; } /*------------------------------------------*/ /* Payment Icons /*------------------------------------------*/ .payment-icons li { display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; padding-right: 5px; } .payment-icons li:last-child { padding-right: 0; } .payment-icons img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: var(--gray); border-left: 3px solid var(--green); font-style: italic; padding-left: 20px; margin-bottom: 16px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* Quote Author /*------------------------------------------*/ .quote-author { position: relative; display: inline-block; padding: 0 0 0 15px; text-align: left; top: 16px; } .quote-author h6 { margin-bottom: 1px; } .quote-author span { font-size: 0.95rem; } /*------------------------------------------*/ /* USER AVATARS /*------------------------------------------*/ .txt-block .users { margin-top: 22px; } .users img { width: auto; max-width: inherit; max-height: 50px; } .users p { font-size: 0.935rem; position: relative; top: 13px; left: 10px; display: inline-block; line-height: 1.4; margin-bottom: 0; } .users p span { display: block; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--white, .color--white a, .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white); } .color--black, .color--black a, .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); } .color--header, .color--header a, .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); } .color--gray, .color--gray a, .color--gray :is(h1, h2, h3, h4, h5, h6) { color: var(--gray); } .color--lightgray, .color--lightgray a, .color--lightgray :is(h1, h2, h3, h4, h5, h6) { color: var(--light-gray); } .color--blue, .color--blue a, .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); } .color--green, .color--green a, .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); } .color--indigo, .color--indigo a, .color--indigo :is(h1, h2, h3, h4, h5, h6) { color: var(--indigo); } .color--lilac, .color--lilac a, .color--lilac :is(h1, h2, h3, h4, h5, h6) { color: var(--lilac); } .color--orchid, .color--orchid a, .color--orchid :is(h1, h2, h3, h4, h5, h6) { color: var(--orchid); } .color--pink, .color--pink a, .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); } .color--purple, .color--purple a, .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); } .color--red, .color--red a, .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); } .color--skyblue, .color--skyblue a, .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); } .color--violet-red, .color--violet-red a, .color--violet-red :is(h1, h2, h3, h4, h5, h6) { color: var(--violet-red); } .color--yellow, .color--yellow a, .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-upcase { text-transform: uppercase } .w-200 { font-weight: 200; } .w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .w-800 { font-weight: 800; } .w-900 { font-weight: 900; } /*------------------------------------------*/ /* TEXT HIGHLIGHT /*------------------------------------------*/ .highlight { background: linear-gradient(to right, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1875)); } /* ========================================================================== 03. PRELOADER SPINNER ========================================================================== */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: #f5f5f5; } #loader { display: block; position: relative; top: 50%; transform: translateY(-50%); } .cssload-spinner { position: absolute; width: 68px; height: 68px; left: 50%; margin-left: -34px; margin-top: -34px; } .cssload-spinner:after, .cssload-spinner:before { position: absolute; content: ""; border: 4px solid var(--blue); width: 64px; height: 64px; } .theme--blue .cssload-spinner:after, .theme--blue .cssload-spinner:before { border-color: var(--blue); } .theme--green .cssload-spinner:after, .theme--green .cssload-spinner:before { border-color: var(--green); } .theme--indigo .cssload-spinner:after, .theme--indigo .cssload-spinner:before { border-color: var(--indigo); } .theme--orchid .cssload-spinner:after, .theme--orchid .cssload-spinner:before { border-color: var(--orchid); } .theme--pink .cssload-spinner:after, .theme--pink .cssload-spinner:before { border-color: var(--pink); } .theme--purple .cssload-spinner:after, .theme--purple .cssload-spinner:before { border-color: var(--purple); } .theme--red .cssload-spinner:after, .theme--red .cssload-spinner:before { border-color: var(--purple); } .theme--skyblue .cssload-spinner:after, .theme--skyblue .cssload-spinner:before { border-color: var(--sky-blue); } .theme--violet-red .cssload-spinner:after, .theme--violet-red .cssload-spinner:before { border-color: var(--violet-red); } .cssload-spinner:after { animation: cssload-spinner1 2.5s linear infinite; -o-animation: cssload-spinner1 2.5s linear infinite; -ms-animation: cssload-spinner1 2.5s linear infinite; -webkit-animation: cssload-spinner1 2.5s linear infinite; -moz-animation: cssload-spinner1 2.5s linear infinite; } .cssload-spinner:before { width: 88px; height: 88px; margin-left: -13.5px; margin-top: -13.5px; animation: cssload-spinner2 2.5s linear infinite; -o-animation: cssload-spinner2 2.5s linear infinite; -ms-animation: cssload-spinner2 2.5s linear infinite; -webkit-animation: cssload-spinner2 2.5s linear infinite; -moz-animation: cssload-spinner2 2.5s linear infinite; } @keyframes cssload-spinner1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes cssload-spinner1 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-spinner1 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-spinner1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-spinner1 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes cssload-spinner2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-o-keyframes cssload-spinner2 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } } @-ms-keyframes cssload-spinner2 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); } } @-webkit-keyframes cssload-spinner2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes cssload-spinner2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: var(--white)!important; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .dark-menu .wsmainfull { padding: 6px 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; display: block; font-size: 1rem; line-height: 50px; font-weight: 600; letter-spacing: 0; text-decoration: none; margin: 0 7px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 35px; width: 0; } /*------------------------------------------*/ /* HEADER LINK INFO /*------------------------------------------*/ span.sm-info { position: relative; display: inline-block; text-align: center; width: 20px; height: 20px; color: var(--white); font-size: 0.65rem; line-height: 19px; font-weight: 700; margin-left: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; } .nav-blue .sm-info { background-color: var(--blue); } .nav-green .sm-info { background-color: var(--green); } .nav-indigo .sm-info { background-color: var(--indigo); } .nav-orchid .sm-info { background-color: var(--orchid); } .nav-pink .sm-info { background-color: var(--pink); } .nav-purple .sm-info { background-color: var(--purple); } .nav-red .sm-info { background-color: var(--red); } .nav-skyblue .sm-info { background-color: var(--sky-blue); } .nav-violet-red .sm-info { background-color: var(--violet-red); } /*------------------------------------------*/ /* HEADER BUTTONS /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 1rem; line-height: 30px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 14px; padding: 6px 28px 8px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 4px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 25px; } .wsmenu > .wsmenu-list > li a.store.header-store { line-height: 1; margin-top: 13px; margin-left: 10px; margin-bottom: 0; padding: 0; } /*------------------------------------------*/ /* LANGUAGE SELECT /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { width: auto; min-width: 115px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.875rem; padding: 8px 11px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 8px 11px; } /*------------------------------------------*/ /* HEADER STORE BADGES /*------------------------------------------*/ .store.header-store img { max-height: 44px; } /*------------------------------------------*/ /* HEADER SOCIAL LINKS /*------------------------------------------*/ .header-socials { margin: 0; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .header-socials a { display: block; margin-left: 15px; } .navbar-light .header-socials a { color: #ddd; } .navbar-light .header-socials a:hover { color: var(--silver); } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-20 [class*="flaticon-"]:after { line-height: 70px!important; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 200px; top: 62px; padding: 12px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* HEADER SUBMENU SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 210px; position: absolute; left: 102%; top: 0; margin: 0; padding: 10px; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { position: absolute; top: 12px; right: 12px; } .sub-menu.ico-10 [class*="flaticon-"]:before, .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 62px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 33%; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--tra-white-smoke); color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 74%!important; left: 25%; padding: 20px 10px; } .wsmegamenu.w-75 .col-lg-3 { padding: 0 6px; } /*------------------------------------------*/ /* SUBMENU TITLE /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu .title, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title { color: var(--light-gray); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 15px 13px; } /*------------------------------------------*/ /* DARK HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--metal)!important; border: solid 1px var(--metal)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } .dark-menu .title, .black-scroll .scroll .title, .dark-menu .icons-menu-txt span, .black-scroll .scroll .icons-menu-txt span { color: var(--white)!important; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--smoke); } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: var(--ink); } .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--blue); } .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--green); } .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--indigo); } .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--orchid); } .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--pink); } .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--purple); } .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--red); } .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--sky-blue); } .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--violet-red); } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR WHITE SCROLL /*------------------------------------------*/ .tra-menu.white-scroll .wsmainfull.scroll, .white-menu.white-scroll .wsmainfull.scroll, .tra-menu.border-header.white-scroll .wsmainfull.scroll { padding: 0; border: none; background-color: rgba(255, 255, 255, .7)!important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--ink)!important; } /*------------------------------------------*/ /* NAVBAR BLACK SCROLL /*------------------------------------------*/ .tra-menu.black-scroll .wsmainfull.scroll, .dark-menu.black-scroll .wsmainfull.scroll { padding: 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: var(--silver)!important; } /*------------------------------------------*/ /* WHITE SCROLL BUTTONS /*------------------------------------------*/ .white-scroll .scroll .btn--tra-white { color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK SCROLL BUTTONS /*------------------------------------------*/ .black-scroll .scroll .btn--tra-black { color: var(--white)!important; border-color: var(--white)!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark .logo-white, .navbar-light .logo-black, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-dark.black-scroll .scroll .logo-black { display: none; } .tra-menu.navbar-light .scroll .logo-black, .tra-menu.navbar-dark.black-scroll .scroll .logo-white { display: block; } /* ========================================================================== 05. HERO ========================================================================== */ .hero-section .container { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO DIGITS /*------------------------------------------*/ .hero-digits { padding-right: 20px; } #hd-1-1, #hd-1-2 { display: inline-block; float: left; padding-right: 20px; } #hd-1-1 { width: 48%; } #hd-1-2 { width: 48%; } .hero-digits h2.statistic-number { font-size: 3.35rem; line-height: 1; letter-spacing: -1.5px; margin-bottom: 10px; } .hero-digits h2.statistic-number small { font-size: 2.25rem; margin-left: 5px; } .hero-digits .block-txt p.p-sm { margin-bottom: 0; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ #hero-1 { position: relative; z-index: 3; background-image: url(../images/hero-1.jpg); padding-top: 150px; margin-bottom: 80px; } .hero-1-txt { margin-top: -15px; } .hero-1-txt h2 { font-size: 3.45rem; font-weight: 600; } .hero-1-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-1-txt .os-version-ext { margin-top: 22px; } .hero-1-img { text-align: center; padding: 0 20px; margin-bottom: -80px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ #hero-2 { background-image: url(../images/hero-2.jpg); padding-top: 180px; padding-bottom: 130px; } .hero-2-txt h2 { font-size: 3.75rem; } .hero-2-txt p.p-xl { padding: 0 8%; margin-top: 22px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ #hero-3 { overflow: hidden; background-image: url(../images/hero-3.jpg); padding-top: 175px; } .theme--dark #hero-3 { background-image: url(../images/hero-3d.jpg); } .hero-3-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 70px; margin-bottom: 60px; } .hero-3-txt h2 { font-size: 3.75rem; } .hero-3-txt p.p-xl { font-size: 1.25rem; margin-top: 20px; margin-bottom: 32px; } .hero-3-txt .btn-txt { margin-top: 25px; } .hero-3-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ #hero-4 { overflow: hidden; background-image: url(../images/hero-4.jpg); padding-top: 170px; } .theme--dark #hero-4 { background-image: url(../images/hero-4d.jpg); } .hero-4-txt h2 { font-size: 3.5rem; } .hero-4-txt p.p-xl { padding: 0 2%; margin-top: 30px; margin-bottom: 30px; } .hero-4-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ #hero-5 { position: relative; z-index: 3; background-image: url(../images/hero-5.jpg); padding-top: 150px; margin-bottom: 60px; } #hero-5 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-5 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-5-txt { margin-top: -15px; padding-left: 5px; } .hero-5-txt h2 { font-size: 3.45rem; line-height: 1.3; font-weight: 600; } .hero-5-txt p.p-xl { padding-right: 2%; margin-top: 25px; margin-bottom: 35px; } .hero-5-img { text-align: center; padding-right: 30px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ #hero-6 { background-image: url(../images/hero-6.jpg); padding-top: 170px; } .theme--dark #hero-6 { background-image: url(../images/bg-dark.jpg); } #hero-6:after { position: absolute; content: ''; z-index: -1; width: 100%; height: 10%; bottom: 0; left: 0; background-color: var(--white); } .theme--dark #hero-6:after { background-color: var(--dark-theme-bg); } .hero-6-txt h2 { font-size: 3.65rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 25px; margin-bottom: 30px; } .hero-6-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-7 /*------------------------------------------*/ #hero-7 { overflow: hidden; position: relative; background-image: url(../images/hero-7.jpg); padding-top: 140px; padding-bottom: 40px; } #hero-7 .wave-shape-bottom { z-index: 6; } #hero-7 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-7 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-7-txt { margin-top: -30px; } .hero-7-txt h2 { font-size: 3.65rem; font-weight: 600; margin-bottom: 40px; } .hero-7-txt .os-version-ext { margin-top: 22px; } .hero-7-img { text-align: center; margin-bottom: -30%; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-8 { position: relative; background-image: url(../images/hero-8.jpg); padding-top: 160px; margin-bottom: 30px; } #hero-8 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-8 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-8-txt { margin-top: -30px; } .hero-8-txt h2 { font-size: 3.65rem; font-weight: 600; } .hero-8-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-8-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-8-img { position: relative; text-align: center; margin: 0 -100% -30px 0; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ #hero-9 { position: relative; background-image: url(../images/hero-9.jpg); padding-top: 170px; } .theme--dark #hero-9 { background-image: url(../images/hero-9d.jpg); } .hero-9-txt { margin-top: -30px; } .hero-9-txt h2 { font-size: 4rem; } .hero-9-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-9-img { text-align: center; padding-left: 15px; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ #hero-10 { background-image: url(../images/hero-10.jpg); padding-top: 170px; } .theme--dark #hero-10 { background-image: url(../images/hero-10d.jpg); } .hero-10-txt h2 { font-size: 3.5rem; } .hero-10-txt p.p-lg { padding: 0 2%; margin-top: 25px; margin-bottom: 35px; } .hero-10-txt p.btn-txt { margin-top: 40px; } #hero-10 .quick-form { margin: 35px 7% 0; } .hero-10-img { margin-top: 65px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ #hero-11 { background-image: linear-gradient(180deg, rgba(233, 224, 242, .8) 50%, rgba(233, 224, 242, .05) 100%); padding-top: 170px; } .theme--dark #hero-11 { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .hero-11-txt h2 { font-size: 3.35rem; } .hero-11-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } .hero-11-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-11-img { text-align: center; padding-left: 25px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ #hero-12 { overflow: hidden; background-image: url(../images/hero-12.jpg); padding-top: 180px; } .theme--dark #hero-12 { background-image: url(../images/hero-12d.jpg); } .hero-12-txt h2 { font-size: 3.65rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-12-txt .advantages { margin-top: 20px; } .hero-12-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-13 /*------------------------------------------*/ #hero-13 { background-image: url(../images/hero-13.jpg); padding-top: 90px; padding-bottom: 15px; margin-bottom: 60px; } #hero-13 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-13 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-13-txt { margin-top: -25px; } .hero-13-txt h2 { font-size: 3.25rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 25px; margin-bottom: 30px; } .hero-13-txt .quick-form { margin-top: 35px; margin-right: 4%; } .hero-13-img { text-align: center; padding-right: 35px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-14 /*------------------------------------------*/ #hero-14 { background-image: url(../images/hero-14.jpg); padding-top: 170px; padding-bottom: 130px; } .hero-14-txt h2 { font-size: 4.35rem; } .hero-14-txt p.p-xl { padding: 0 3%; margin-top: 30px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-15 /*------------------------------------------*/ #hero-15 { background-image: url(../images/hero-15.jpg); padding-top: 150px; margin-bottom: 100px; } .hero-15-txt { margin-top: -25px; padding-left: 20px; } .hero-15-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 105px; margin-bottom: 30px; } .hero-15-txt h2 { font-size: 3.25rem; } .hero-15-txt p.p-lg { padding-right: 2%; margin-top: 25px; margin-bottom: 25px; } .hero-15-img { text-align: center; padding-right: 20px; margin-bottom: -100px; } /*------------------------------------------*/ /* HERO-16 /*------------------------------------------*/ #hero-16 { overflow: hidden; padding-top: 180px; } .hero-16-txt h2 { font-size: 3.75rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-16-img { padding: 80px 60px 0; margin-top: 70px; } .hero-16-img img { margin-bottom: -30px; } /*------------------------------------------*/ /* HERO-17 /*------------------------------------------*/ #hero-17 { background-image: url(../images/hero-17.jpg); padding-top: 80px; } .theme--dark #hero-17 { background-image: url(../images/hero-17d.jpg); } .hero-17-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 90px; margin-bottom: 35px; } .hero-17-txt h2 { font-size: 4rem; letter-spacing: -0.5px; } .hero-17-txt p.p-md { margin-top: 20px; margin-bottom: 30px; } .hero-17-img { margin: 0 -30px 0 15px; } /*------------------------------------------*/ /* HERO-18 /*------------------------------------------*/ #hero-18 { background-image: url(../images/hero-18.jpg); padding-top: 100px; } .theme--dark #hero-18 { background-image: url(../images/hero-18d.jpg); } .hero-18-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 115px; margin-bottom: 35px; } .hero-18-txt h2 { font-size: 3.35rem; } .hero-18-txt p.p-xl { padding: 0 5%; margin-top: 35px; margin-bottom: 35px; } .hero-18-img { text-align: center; margin-top: 30px; } /*------------------------------------------*/ /* HERO QUICK FORM /*------------------------------------------*/ .hero-section .quick-form .input-group { border: none; } /*------------------------------------------*/ /* Hero Quick Form Input /*------------------------------------------*/ .hero-section .quick-form .form-control { height: 64px; background-color: var(--white); border: 2px solid var(--silver); color: #666; font-size: 1.125rem; font-weight: 400; padding: 0 20px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .hero-section .quick-form.form--shadow .form-control { border-color: transparent; -webkit-box-shadow: 0 5px 10px var(--tra-black); -moz-box-shadow: 0 5px 10px var(--tra-black); box-shadow: 0 5px 10px var(--tra-black); } .hero-section .quick-form.form-stroke .form-control { border-color: var(--black); } .hero-section .quick-form.form-half .form-control { height: 58px; font-size: 1.0625rem; } /*------------------------------------------*/ /* Hero Quick Form Placeholder /*------------------------------------------*/ .hero-section .quick-form .form-control::-moz-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Hero Quick Form Focus /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { background-color: var(--white); border-color: var(--black); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Hero Quick Form Button /*------------------------------------------*/ .hero-section .quick-form .btn { height: 64px; font-size: 1.0625rem; padding: 12px 45px; margin-left: 15px; } .hero-section .quick-form.form-half .btn { height: 58px; font-size: 1rem; padding: 13px 40px; margin-left: 12px; } /*------------------------------------------*/ /* Hero Quick Form Message /*------------------------------------------*/ .hero-section .quick-form-msg { width: 100%!important; display: block; margin: 20px 0 15px 5px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -15px 0; } .hero-section .quick-form-msg .loading { color: #3eb1ff; font-size: 1.05rem; line-height: 1; font-weight: 500; } .hero-section .text-center .quick-form-msg .loading { font-size: 1.125rem; } /* ========================================================================== 06. ABOUT ========================================================================== */ .about-1 { background-image: url(../images/about-1.jpg); margin-bottom: 80px; } .theme--dark .about-1 { background-image: url(../images/about-1d.jpg); } .about-2-title { margin-bottom: 25px; } .about-4-title { padding-right: 4%; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-1-txt h2 { font-size: 3.65rem; margin-bottom: 20px; } .about-1-txt h4 { line-height: 1.44; font-weight: 400; padding-right: 2%; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .about-1-img { margin-top: 60px; margin-bottom: -80px; } .about-3 .img-block.left-column { margin-right: 40px; } .about-3 .img-block.right-column { margin-left: 40px; } /* ========================================================================== 07. CAREERS ========================================================================== */ .jobs-category { padding: 0 50px 18px; margin-bottom: 30px; border: 1.5px solid transparent; } .jobs-category h4 { line-height: 1; padding-top: 40px; margin-bottom: 14px; } .career-item { position: relative; padding: 22px 0; } /*------------------------------------------*/ /* OPEN ROLE DESCRIPTION /*------------------------------------------*/ .position-data { margin-top: 3px; } .position-data li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .rb-divider { position: relative; top: 1.25px; transform: rotate(-90deg); margin-left: 2px; } .position-data.ico-15 [class*="flaticon-"]:before, .position-data.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .position-data li p { display: inline-block; float: left; margin-bottom: 0; } /*------------------------------------------*/ /* OPEN ROLE LINK /*------------------------------------------*/ .position-link { color: var(--header-color); position: absolute; top: 26px; right: 5px; transform: rotate(-45deg); } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* MORE CAREERS BUTTON /*------------------------------------------*/ .more-careers { text-align: center; margin-top: 60px; } .more-careers-holder { display: inline-block; margin: 0 auto; } .more-careers-txt { text-align: left!important; display: inline-block; float: left; } .more-careers-txt p { position: relative; top: 6px; margin-bottom: 0; } .more-careers-btn { display: inline-block; margin-left: 20px; } .more-careers-btn .btn { font-size: 0.875rem; padding: 0.6rem 1.35rem; } /* ========================================================================== 08. JOB POSITION =========================================================================== */ .job-position-title { padding-top: 170px; padding-bottom: 100px; margin-bottom: 30px; } .jb-txt { position: relative; } .jb-txt h2 { padding-right: 20%; } .job-position-title .position-data { margin-top: 20px; } .job-position-title .rb-divider { top: 3.5px; } .job-position-title .btn { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; padding: 0.7rem 1.4rem; } /*------------------------------------------*/ /* JOB POSITION TYPOGRAPHY /*------------------------------------------*/ .position-info h5 { margin-top: 60px; margin-bottom: 30px; } .position-info p span { color: var(--header-color); font-weight: 600; } .position-info .btn { margin-top: 35px; } /* ========================================================================== 09. FEATURES ========================================================================== */ .fbox-5-wrapper { padding: 90px 55px; } .features-2 .section-title p.p-xl { font-size: 1.25rem; margin-top: 0; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 40px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3 { margin-bottom: 50px; } /*------------------------------------------*/ /* FEATURE BOX /*------------------------------------------*/ .fbox-3 { border: 1px solid var(--silver); padding: 40px 20px 30px; } .fbox-3.bg--white { border: 1px solid transparent; padding: 40px 20px 30px; } .fbox-4 { padding: 60px; border: 1px solid transparent; } .fbox-4.fb-5, .fbox-4.fb-6 { padding: 70px 65px; } .ico-title .fbox-4.fb-5, .ico-title .fbox-4.fb-6 { padding: 45px 50px 35px; } .fbox-4.fb-7, .fbox-4.fb-8 { position: relative; overflow: hidden; padding: 70px 50px 0; } .ico-title .fbox-4.fb-7, .ico-title .fbox-4.fb-8 { padding: 45px 50px 0; } .fbox-4-txt { padding-left: 60px; } .fbox-4-txt h2, .fbox-4-txt h3 { margin-bottom: 20px; } .fbox-4-txt h3.h3-lg { font-size: 2.5625rem; } .fbox-4-txt .btn { margin-top: 25px; } .fbox-5 { padding: 80px 53px 70px; border: 1.5px solid transparent; } /*------------------------------------------*/ /* FEATURE BOX VECTOR ICON /*------------------------------------------*/ .fbox-ico, .fbox-ico.ico-rounded { margin-bottom: 15px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 20px; } .fbox-ico[class*="img-"], .fbox-ico.ico-rounded-md, .fbox-ico.ico-rounded-lg { margin-bottom: 20px; } /*------------------------------------------*/ /* FEATURE BOX IMAGE /*------------------------------------------*/ .fbox-img img { width: auto; max-width: inherit; } .fbox-img.h-175 img { max-height: 175px; } .fbox-img.h-180 img { max-height: 180px; } .fbox-6 .fbox-img { margin-bottom: 35px; } /*------------------------------------------*/ /* FBOX-4 IMAGE /*------------------------------------------*/ .fbox-4.fb-1 .fbox-4-img { margin: 40px 5% 0; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 45px 0 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 5% 40px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 40px 5% 0; } /*------------------------------------------*/ /* FBOX-5 IMAGE /*------------------------------------------*/ .fbox-5-img img { width: auto; max-width: inherit; max-height: 255px; margin-bottom: 25px; } /*------------------------------------------*/ /* FBOX-7 IMAGE /*------------------------------------------*/ .fbox-7 .fbox-img { -webkit-border-radius: 12px 12px 0 0; -moz-border-radius: 12px 12px 0 0; -o-border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; } .fbox-7 .fbox-img.h-175 { padding-top: 40px; margin: 0 8px 60px; } .fbox-7 .fbox-img.h-180 { padding-top: 42px; margin: 0 5px 60px; } .fbox-7 .fbox-img img { margin-bottom: -25px; } /*------------------------------------------*/ /* FBOX-2 /*------------------------------------------*/ .fbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .fbox-ico-wrap { position: relative; margin-right: 30px; } .fbox-2 .fbox-ico { margin-top: 2px; } .fbox-2 .fbox-txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* FBOX TYPOGRAPHY /*------------------------------------------*/ .fbox-2 h5, .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 20px; margin-bottom: 12px; } .fbox-4 h5 { margin-bottom: 16px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 24px; } .fbox-5 h5 { margin-bottom: 16px; } .fbox-3 p, .fbox-5 p, .fbox-wrapper p, .fbox-4 p.mb-0 { margin-bottom: 0; } .fbox-4 p { margin-bottom: 14px; } /*------------------------------------------*/ /* FEATURES DOWNLOAD BUTTON /*------------------------------------------*/ .features-2-download { margin-top: 80px; } .features-2-download p.p-sm { font-size: 0.9rem; margin-top: 20px; margin-bottom: 0; } /* ========================================================================== 10. CONTENT ========================================================================== */ .ct-07 { overflow: hidden; } .ct-08 { margin-bottom: 80px; } .ct-09 { margin-top: 80px; } .ct-06 .section-overlay { margin-bottom: 100px; } .bc-03 .section-title { margin-bottom: 50px; } .bc-04 { margin: 30px 0; } /*------------------------------------------*/ /* CONTENT BOX WRAPPER /*------------------------------------------*/ .bc-01-wrapper, .bc-02-wrapper { border: 1px solid transparent; } .bc-04-wrapper { border: 2.5px solid #d2d2eb; padding-left: 60px; } .bc-01 .section-overlay { padding: 80px 65px; } .bc-02 .section-overlay { padding: 65px 60px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 60px; } .bc-02.pt-30.bc-02-top { margin-top: 70px; } .bc-03 .section-overlay { padding: 80px 70px 0; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .txt-box { margin-bottom: 25px; } .bc-01 .txt-box { margin-bottom: 30px; } .txt-box:last-child, .bc-01 .txt-box:last-child { margin-bottom: 0; } .ct-07 .txt-block { margin-top: -30px; } .ct-08 .txt-block { margin-top: -30px; } .bc-01 .txt-block.left-column { padding-right: 20px; } .bc-01 .txt-block.right-column { padding-left: 20px; } .bc-04 .txt-block { padding-right: 30px; } /*------------------------------------------*/ /* CONTENT BOX /*------------------------------------------*/ .cbox-1, .cbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-4-wrapper { margin-top: 20px; } .cbox-5 { display: inline-block; width: 390px; min-width: 390px; padding: 18px 24px 16px 24px; } .cbox-5.cb-1 { margin: 12px 0 25px; } /*------------------------------------------*/ /* CONTENT BOX ICON /*------------------------------------------*/ .cbox-1 .ico-wrap { position: relative; margin-right: 1.625rem; } .cbox-1-ico { text-align: center; position: relative; width: 2.25rem; height: 2.25rem; font-size: 1.125rem; line-height: 2rem; font-weight: 600; border: 3px solid transparent; border-radius: 100%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .cbox-1-line { position: absolute; bottom: 14px; left: 50%; width: 2px; background-color: var(--smoke); height: calc(100% - 70px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .cbox-1:hover .cbox-1-ico { background-color: transparent; } .cbox-1:hover .cbox-1-ico.bg--black { color: var(--black); border-color: var(--black); } .cbox-1:hover .cbox-1-ico.bg--blue { color: var(--blue); border-color: var(--blue); } .cbox-1:hover .cbox-1-ico.bg--green { color: var(--green); border-color: var(--green); } .cbox-1:hover .cbox-1-ico.bg--indigo { color: var(--indigo); border-color: var(--indigo); } .cbox-1:hover .cbox-1-ico.bg--orchid { color: var(--orchid); border-color: var(--orchid); } .cbox-1:hover .cbox-1-ico.bg--pink { color: var(--pink); border-color: var(--pink); } .cbox-1:hover .cbox-1-ico.bg--purple { color: var(--purple); border-color: var(--purple); } .cbox-1:hover .cbox-1-ico.bg--red { color: var(--red); border-color: var(--red); } .cbox-1:hover .cbox-1-ico.bg--skyblue { color: var(--sky-blue); border-color: var(--sky-blue); } .cbox-1:hover .cbox-1-ico.bg--violet-red { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* CBOX #2 /*------------------------------------------*/ .cbox-2 .ico-wrap { position: relative; text-align: center; margin-top: 0; margin-right: 1.25rem; } .cbox-2 .cbox-2-ico { position: relative; top: 5px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3rem; } /*------------------------------------------*/ /* CBOX #5 /*------------------------------------------*/ .cbox-5-ico { display: inline-block!important; float: left; text-align: center; } /*------------------------------------------*/ /* CBOX #6 /*------------------------------------------*/ .cbox-6-wrapper { position: relative; } .cbox-6 { border: 1px solid var(--snow); padding: 40px; margin: 0 12%; z-index: 1; } .cbox-6 hr { margin-top: 35px; margin-bottom: 25px; } /*------------------------------------------*/ /* CBOX #6 TITLE /*------------------------------------------*/ .cbox-6-title p.p-md { line-height: 1; } .cbox-6 .statistic-number sup { font-size: 3rem; top: -10px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 15px; } .cbox-6-title p.p-md.ico-10 span { font-weight: 600; } /*------------------------------------------*/ /* CBOX #6 TEXT /*------------------------------------------*/ .cbox-6-txt h5 { margin-bottom: 10px; } /*------------------------------------------*/ /* CBOX #6 DATA /*------------------------------------------*/ .cbox-6-data { padding: 18px 25px; } .cbox-6-data h4 { letter-spacing: -0.5px; } .cbox-6-data p { margin: 0; } /*------------------------------------------*/ /* CBOX #6 SHAPE /*------------------------------------------*/ .cb-shape-1 { position: absolute; right: 30px; top: -35px; z-index: -1; } .cb-shape-2 { position: absolute; left: 30px; bottom: -25px; z-index: -1; } .cb-shape-1 img, .cb-shape-2 img { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------*/ /* CBOX #7 /*------------------------------------------*/ .cbox-7 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-7-txt { overflow: hidden; flex: 1; max-width: 100%; padding-left: 14px; } .cbox-7-ico { background-image: linear-gradient(0deg, #d4dbff 0%, #fff 100%); width: 28px; height: 28px; margin-top: 2px; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 26px; } .cbox-7-txt p { margin-bottom: 14px; } /*------------------------------------------*/ /* CONTENT BOX TEXT /*------------------------------------------*/ .cbox-1-txt, .cbox-2-txt { overflow: hidden; flex: 1; max-width: 100%; } .cbox-1-txt { margin-bottom: 30px; } .cbox-2-txt { margin-bottom: 40px; } .two-txt .cbox-2-txt { margin-bottom: 25px; } .cbox-1:last-child .cbox-1-txt, .cbox-2:last-child .cbox-2-txt { margin-bottom: 0; } .cbox-3-txt { margin-bottom: 40px; } .cbox-3:last-child .cbox-3-txt { margin-bottom: 0; } .cbox-5-txt { display: inline-block!important; padding-left: 18px; } /*------------------------------------------*/ /* CONTENT BOX TITLE /*------------------------------------------*/ .cbox-title { margin-bottom: 18px; } .cbox-title span { float: left; line-height: 1!important; margin-right: 20px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.35rem; } .cbox-title h5 { line-height: 2.1875rem!important; margin-bottom: 0!important; } .box-title { margin-bottom: 14px; } .box-title span { position: relative; top: 10px; right: 4px; } .box-title h6 { display: inline-block; margin-bottom: 0; } /*------------------------------------------*/ /* CONTENT BOX TYPOGRAPHY /*------------------------------------------*/ .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 15px!important; } .cbox-5-txt h6 { margin-bottom: 2px; } .bc-02 .txt-block h5 { margin-bottom: 25px; } .cbox-1-txt p, .cbox-2-txt p, .cbox-3-txt p, .cbox-5-txt p, .cbox-4 p { margin-bottom: 0; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h3, .txt-block h2 { margin-bottom: 25px; } .txt-block h5 { margin-bottom: 20px; } h5.h5-title { margin: 20px 0; } .txt-block-tra-link { margin-top: 20px; } .txt-block .btn { margin-top: 30px; } .txt-block .btn.btn--transparent { margin-top: 0; } .txt-block .stores-badge { margin-top: 30px; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion-1 .accordion-item { background-color: transparent; padding: 22px 0 26px; border: none; border-bottom: 1.5px solid var(--smoke); border-radius: 0 0; } .txt-block .accordion-thumb { margin: 0; padding: 0; cursor: pointer; position: relative; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 1px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .txt-block .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } .txt-block .accordion-1 .accordion-panel { color: var(--gray); margin: 0; padding: 0 0 0 5px; display: none; } .txt-block .accordion-1 .accordion-thumb h5 { color: var(--header-color); line-height: 1; padding-left: 5px; margin-bottom: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 24px; } /*------------------------------------------*/ /* TEXT BLOCK TABS /*------------------------------------------*/ #tabs-1 .tab-content { display: none; } #tabs-1 .tab-content.current { display: inherit; } .tabs-1 li { cursor: pointer; background-color: transparent; border: none; margin-bottom: 8px; padding: 25px 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tabs-1 li:last-child { margin-bottom: 0; } .tab-link h5, .tab-link p { color: #858585; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tab-link p { margin: 10px 0 0; } /*------------------------------------------*/ /* TAB LINK HOVER /*------------------------------------------*/ .tabs-1 li:hover { background-color: #f9f9f9; } /*------------------------------------------*/ /* TAB LINK CURRENT /*------------------------------------------*/ #tabs-1 .tabs-1 li.current, #tabs-1 .tabs-1 li.current:hover { background-color: #f3f3f5; } #tabs-1 .tabs-1 li.current { cursor: auto; } #tabs-1 .tabs-1 li:hover h5, #tabs-1 .tabs-1 li.current h5 { color: var(--header-color); } #tabs-1 .tabs-1 li:hover p, #tabs-1 .tabs-1 li.current p { color: var(--gray); } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 25px; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 25px; } .ct-03 .img-block img { max-width: none; display: inline-block; margin-left: 30px; } .ct-04 .img-block img { max-width: none; margin-left: -100%; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -100px; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -80px; } .ct-09 .img-block { margin-top: -80px; } .img-block-txt, .img-block-btn { text-align: center; margin-top: 45px; } .img-block-hidden .video-btn { top: calc(50% - 30px); } .bc-3-img .video-btn { top: calc(50% - 70px); } .bc-2-img.right-column { margin-left: 20px; } .bc-2-img.left-column { margin-right: 20px; } .bc-3-img { margin-bottom: -200px; } .bc-4-img { transform: rotate(3deg); margin: -20px 0; } /* ========================================================================== 11. STATISTIC =========================================================================== */ .statistic-1-wrapper .statistic-block-digit { width: 36%; display: inline-block!important; float: left; } .statistic-1-wrapper .statistic-block-txt { width: 64%; display: inline-block!important; padding-left: 16px; } #sb-3-1, #sb-3-2 { width: 48%; display: inline-block; float: left; } .statistic-4-wrapper .statistic-block { padding: 10px 40px; } #sb-4-1, #sb-4-2 { border-right: 1px solid var(--tra-smoke); } /*------------------------------------------*/ /* STATISTIC BLOCK ICON /*------------------------------------------*/ .statistic-ico { margin-bottom: 15px; } .statistic-block .txt-block-rating { margin-bottom: -3px; } /*------------------------------------------*/ /* STATISTIC BLOCK NUMBER /*------------------------------------------*/ h3.statistic-number, h2.statistic-number { line-height: 1; font-weight: 700; letter-spacing: -1px; margin-bottom: 0; } #sb-2-2 h2.statistic-number { letter-spacing: -2px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 15px; } /*------------------------------------------*/ /* STATISTIC BLOCK TYPOGRAPHY /*------------------------------------------*/ .statistic-2-wrapper h2 { margin-bottom: 15px; } .statistic-2-wrapper .txt-block h4, .statistic-2-wrapper .txt-block h3 { line-height: 1.35; } .statistic-4-wrapper h5 { margin-top: 25px; margin-bottom: 15px; } .statistic-1-wrapper p { position: relative; line-height: 1.35; top: 4px; margin-bottom: 0; } .txt-block-stat p, .statistic-block-txt p, .statistic-2-wrapper p, .statistic-4-wrapper p { margin-bottom: 0; } /* ========================================================================== 12. RATING =========================================================================== */ .rating-1-wrapper.text-center { padding: 0 16%; } .rating-2-wrapper.text-center { padding: 0 13%; } .rating-title { text-align: center; } .rating-title h6, .rating-title h5 { margin-bottom: 0; } /*------------------------------------------*/ /* RATING BOX LOGO /*------------------------------------------*/ .rbox-1-img { margin-bottom: 15px; } .rbox-1-img img { width: auto; max-width: inherit; max-height: 35px; } .rbox-2-img img { width: auto; max-width: inherit; max-height: 80px; } #rb-2-2 .rbox-2-img img { max-height: 145px; } /*------------------------------------------*/ /* RATING BOX TYPOGRAPHY /*------------------------------------------*/ .rbox-1 .star-rating { display: inline-block; font-size: 1rem; line-height: 15px; font-weight: 500; vertical-align: inherit; background-color: var(--white); padding: 5px 18px; } .rbox-1 .star-rating span { position: relative; color: #ffb30c; top: -1px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 0.9rem; } .rbox-1 .star-rating { font-size: 0.86rem; line-height: 1; } .rbox-2 p { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; font-weight: 500; margin-top: 15px; margin-bottom: 0; } .rbox-2 p span { font-weight: 700; } /* ========================================================================== 13. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper { padding: 0 10px; } .reviews-3-wrapper:after { position: absolute; content: ''; z-index: -1; width: 86%; height: 85%; top: 8%; left: 7%; background-color: var(--white-smoke); } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { position: relative; border: 1.5px solid transparent; padding: 35px; margin: 0 12px 30px; } .review-1.no-title { padding: 50px 35px 35px; } .review-2 { padding: 0 30px; margin-bottom: 30px; } .review-3 { position: relative; padding: 45px 40px 35px; } #rw-3-1, #rw-3-2 { margin-bottom: 20px; } .review-item { position: relative; width: 33.33%; padding: 0 12px; margin-bottom: 24px; } .review-4 { position: relative; padding: 35px 28px; border: 1px solid transparent; } /*------------------------------------------*/ /* TESTIMONIAL ICON /*------------------------------------------*/ .review-ico.ico-45 { position: absolute; top: 15px; right: 25px; opacity: .12; } .review-ico.ico-60 { position: absolute; top: 15px; left: 25px; opacity: .12; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-1-txt h6.h6-md, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg, .review-4-txt h6.h6-lg { line-height: 1.4; padding-right: 5%; margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.225rem; line-height: 1.4; padding-right: 5%; margin-bottom: 12px; } .review-1.text-center h6.h6-md, .review-1.text-center h6.h6-lg { padding-right: 0; } .review-2-txt h6.h6-lg { margin-bottom: 14px; } .review-1-txt p, .review-2-txt p, .review-3-txt p, .review-4-txt p { margin-bottom: 15px; } .review-4-txt p.mb-0 { margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-rating.ico-10 { margin-bottom: 5px; } .review-author .review-rating.ico-10 { margin-bottom: 2px; } .review-rating.ico-15 { margin-bottom: 8px; } .review-rating.ico-15.mb-15 { margin-bottom: 12px; } .review-rating.ico-10 [class*="flaticon-"]:before, .review-rating.ico-10 [class*="flaticon-"]:after { font-size: 0.935rem; } .review-rating.ico-15 [class*="flaticon-"]:before, .review-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /*------------------------------------------*/ /* TESTIMONIAL DATA /*------------------------------------------*/ .author-data { margin-top: 20px; } .author-data.mt-25 { margin-top: 25px; } .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } /*------------------------------------------*/ /* TESTIMONIAL AVATAR /*------------------------------------------*/ .review-avatar { margin: 0 auto; float: left; } .review-avatar img { width: 46px; height: 46px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-3 .review-avatar img { width: 54px; height: 54px; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .author-data .review-author { position: relative; display: inline-block; text-align: left; padding: 0 0 0 14px; } .review-author.mt-15 { margin-top: 16px; } .review-3 .review-author { margin-top: 5px; } .review-author h6 { font-size: 0.975rem; line-height: 1; margin-bottom: 9px; } .review-author.mt-15 h6 { margin-bottom: 0; } .review-author h6 span { color: var(--gray); font-size: 0.95rem; font-weight: 400; } .review-author p { font-size: 0.925rem; line-height: 1; font-weight: 300; margin-bottom: 0; } .review-author p a { font-weight: 400; } /*------------------------------------------*/ /* TESTIMONIAL BUTTON /*------------------------------------------*/ .reviews-btn { text-align: center; margin-top: 65px; } /*------------------------------------------*/ /* TESTIMONIAL CAROUSEL DOTS /*------------------------------------------*/ .reviews-section button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { margin: 0 7px; } .owl-dots button:focus { outline: none; text-decoration: none; } /* ========================================================================== 14. TEAM =========================================================================== */ .team-member { margin-bottom: 50px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; overflow: hidden; text-align: center; margin-bottom: 30px; } /*------------------------------------------*/ /* PHOTO HOVER ZOOM /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: .45; -moz-opacity: .45; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data { padding-left: 8px; } .team-member-data h6 { margin-bottom: 8px; } .team-member-data p { font-size: 0.975rem; line-height: 1; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } /* ========================================================================== 15. PRICING =========================================================================== */ .pricing-3-wrapper { padding: 0 4%; } .p-table { border: 1.5px solid transparent; margin-bottom: 40px; } .p-table.theme--border { border: 3px solid var(--theme-color); } .p-table.gray--border { border: 3px solid var(--tra-black); } .p-table.blue--border { border: 3px solid var(--blue); } .p-table.green--border { border: 3px solid var(--green); } .p-table.indigo--border { border: 3px solid var(--indigo); } .p-table.orchid--border { border: 3px solid var(--orchid); } .p-table.pink--border { border: 3px solid var(--pink); } .p-table.purple--border { border: 3px solid var(--purple); } .p-table.red--border { border: 3px solid var(--red); } .p-table.skyblue--border { border: 3px solid var(--sky-blue); } .p-table.violet-red--border { border: 3px solid var(--violet-red); } .pricing-1-table { padding: 45px 35px; } .pricing-2-table, .pricing-3-table { padding: 30px 40px; } .pricing-2-table.bg--white, .pricing-3-table.bg--white { border: 1px solid #ddd; -webkit-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); -moz-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); } #pt-3-1 { margin: 0 10px 40px 50px; } #pt-3-2 { margin: 0 50px 40px 10px; } /*------------------------------------------*/ /* TABLE HEADER /*------------------------------------------*/ .pricing-table-header { position: relative; } .pricing-table-header h5 { margin-bottom: 30px; } /*------------------------------------------*/ /* PRICING TABLE DISCOUNT /*------------------------------------------*/ .pricing-discount { position: absolute; top: -2px; right: -5px; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.915rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* PRICE /*------------------------------------------*/ .price span { color: var(--header-color); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -2px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.5rem; } /*------------------------------------------*/ /* DOLLAR SIGN /*------------------------------------------*/ .price sup { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-size: 2.05rem; font-weight: 600; top: -5px; right: 2px; letter-spacing: -1px; } /*------------------------------------------*/ /* Validity /*------------------------------------------*/ .price sup.validity { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 400; top: -2px; left: 0; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.65rem; } /*------------------------------------------*/ /* Text /*------------------------------------------*/ .price p { margin-top: 20px; margin-bottom: 20px; } .pricing-section .btn-txt a { text-decoration: underline; } /*------------------------------------------*/ /* PRICING FEATURES /*------------------------------------------*/ .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 20px; } .pricing-features li { padding: 11px 8px; } .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 9px 8px; } .pricing-features li p { line-height: 1; font-weight: 400; margin-bottom: 0; } .pricing-features li p span { position: relative; top: -2px; right: 5px; } .pricing-features.ico-10 li p span { top: 0; right: 4px; } .pricing-features.ico--blue span { color: var(--blue); } .pricing-features.ico--green span { color: var(--green); } .pricing-features.ico--indigo span { color: var(--indigo); } .pricing-features.ico--orchid span { color: var(--orchid); } .pricing-features.ico--pink span { color: var(--pink); } .pricing-features.ico--purple span { color: var(--purple); } .pricing-features.ico--red span { color: var(--red); } .pricing-features.ico--skyblue span { color: var(--sky-blue); } .pricing-features.ico--violet-red span { color: var(--violet-red); } .pricing-features.ico-5 [class*="flaticon-"]:before, .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; } .pricing-features li.disabled-option p, .pricing-features li.disabled-option span { color: var(--disable)!important; } /*------------------------------------------*/ /* PRICING TABLE BUTTON /*------------------------------------------*/ .pt-btn { display: block; width: 100%; margin-top: 25px; } .p-table p.btn-txt { margin: 14px 0 0 0; } /*------------------------------------------*/ /* PRICING TOGGLE BUTTON /*------------------------------------------*/ .ext-toggle-btn { text-align: center; } .toggle-btn.inn-toggle-btn { position: absolute; } /*------------------------------------------*/ /* TOGGLE BUTTON TYPOGRAPHY /*------------------------------------------*/ .toggler-txt { font-size: 1.15rem; font-weight: 500; line-height: 36px; } .toggle-btn p { margin-top: 12px; letter-spacing: -0.25px; margin-bottom: 0; } /*------------------------------------------*/ /* TOGGLE BUTTON SWITCHER /*------------------------------------------*/ .switch-wrap { position: relative; display: inline-block; vertical-align: middle; min-width: 60px; height: 36px; margin: 0 8px; } .switcher { display: block; cursor: pointer; color: var(--white); font-size: 0.925rem; font-weight: 500; height: 36px; padding: 0 20px 0 40px; position: relative; border-radius: 36px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .theme--blue .switcher { background-color: var(--blue); } .theme--green .switcher { background-color: var(--green); } .theme--indigo .switcher { background-color: var(--indigo);} .theme--orchid .switcher { background-color: var(--orchid); } .theme--pink .switcher { background-color: var(--pink); } .theme--purple .switcher { background-color: var(--purple); } .theme--red .switcher { background-color: var(--red); } .theme--skyblue .switcher { background-color: var(--sky-blue); } .theme--violet-red .switcher { background-color: var(--violet-red); } .switcher .show-annual, .switcher .show-monthly { line-height: 36px; } .switcher .show-monthly { display: block; } .switcher .show-annual { display: none; } .switcher:before { position: absolute; left: 5px; bottom: 4px; content: " "; background-color: var(--white); width: 28px; height: 28px; border-radius: 50%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .switch-wrap input { display: none; } .switch-wrap input:checked + .switcher { padding: 0 40px 0 20px; } .switch-wrap input:checked + .switcher:before { left: auto; right: 4px; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .switch-wrap input:checked + .switcher .show-annual { display: block; } .switch-wrap input:checked + .switcher .show-monthly { display: none; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice { text-align: center; margin-top: 20px; } .pricing-notice p { padding: 0 5%; margin-bottom: 0; } .pricing-notice p span { font-weight: 600; } /*------------------------------------------*/ /* COMPARE PRICING TABLE /*------------------------------------------*/ .table>:not(caption)>*>* { padding: 17px 0; border: none!important; background-color: transparent!important; } .comp-table .pricing-header { max-width: 700px; } .comp-table .table thead tr, .comp-table .table tbody tr { border-bottom: 1px solid var(--silver)!important; } .comp-table .table tbody tr.table-last-tr { border-bottom: none!important; } .comp-table .table-responsive thead th { font-size: 1.0625rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody th { font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody td { position: relative; font-size: 0.95rem; line-height: inherit; top: 1px; } .comp-table .table-responsive tbody td span { position: relative; top: 1px; } .table>:not(caption)>*>* { color: var(--header-color); } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .comp-table .disabled-option { color: var(--light-gray); } .comp-table .color--blue { color: var(--blue); } .comp-table .color--green { color: var(--green); } .comp-table .color--indigo { color: var(--indigo); } .comp-table .color--orchid { color: var(--orchid); } .comp-table .color--purple { color: var(--purple); } .comp-table .color--red { color: var(--red); } .comp-table .color--sky { color: var(--sky); } .comp-table .color--skyblue { color: var(--sky-blue); } .comp-table .color--violet-red { color: var(--violet-red); } /*------------------------------------------*/ /* PRICING COMPARE PAYMENT /*------------------------------------------*/ .comp-table-payment h6 { margin-bottom: 16px; } .comp-table-payment p { margin-bottom: 0; } /* ========================================================================== 16. INTEGRATIONS =========================================================================== */ .int-1-wrapper { padding: 80px 70px; } .int-2-wrapper { padding: 0 3%; } .integrations-3 { margin-bottom: -22px; } /*------------------------------------------*/ /* FILTER BUTTONS /*------------------------------------------*/ .filter-btns button { background-color: transparent; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1.0625rem; line-height: 1; font-weight: 600; margin: 0 14px; padding: 0.5rem 0.1rem; border: none; cursor: pointer; border-bottom: 3px solid transparent; outline: 0px none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* Filter Button Active /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--blue); cursor: default; border-color: var(--blue); outline: 0px none; } .theme--blue .filter-btns button.is-checked { color: var(--blue); border-color: var(--blue); } .theme--green .filter-btns button.is-checked { color: var(--green); border-color: var(--green); } .theme--indigo .filter-btns button.is-checked { color: var(--indigo); border-color: var(--indigo); } .theme--orchid .filter-btns button.is-checked { color: var(--orchid); border-color: var(--orchid); } .theme--pink .filter-btns button.is-checked { color: var(--pink); border-color: var(--pink); } .theme--purple .filter-btns button.is-checked { color: var(--purple); border-color: var(--purple); } .theme--red .filter-btns button.is-checked { color: var(--red); border-color: var(--red); } .theme--skyblue .filter-btns button.is-checked { color: var(--sky-blue); border-color: var(--sky-blue); } .theme--violet-red .filter-btns button.is-checked { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* FILTER ITEM /*------------------------------------------*/ .integrations-3 .filter-item { position: relative; width: 33.33%; padding: 0 10px; margin-bottom: 22px; } /*------------------------------------------*/ /* INTEGRATION TOOL /*------------------------------------------*/ .int_tool-1 { display: block; margin-bottom: 40px; } .int_tool-2 { text-align: center; vertical-align: center; background-color: var(--white); border: 1px solid var(--silver); padding: 25px 20px; margin-bottom: 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .int_tool-3 { background-color: var(--white); padding: 20px 26px 22px; border: 1px solid var(--silver); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* INTEGRATION TOOL LOGO /*------------------------------------------*/ .int_tool-1 .tool_logo { border: 1.5px solid transparent; padding: 35px 25px; margin-bottom: 30px; } .int_tool-1 img { width: 65px; height: 65px; } .int_tool-2 img { width: 60px; height: 60px; } .int_tool-3 img { width: 40px; height: 40px; } /*------------------------------------------*/ /* INTEGRATION TOOL TEXT /*------------------------------------------*/ .tool_txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* INTEGRATION TOOL TYPOGRAPHY /*------------------------------------------*/ .tool_txt h6 { font-size: 1.1875rem; margin-top: 2px; } .tool_logo h6 { position: relative; display: inline-block; line-height: 40px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { line-height: 1; margin-bottom: 0; } .int_tool-2 h6 { font-size: 0.925rem; line-height: 1; margin-top: 18px; } .tool_txt p { margin-top: 3px; margin-bottom: 0; } .tool_description p { font-size: 0.95rem; margin-top: 14px; margin-bottom: 0; } /*------------------------------------------*/ /* INTEGRATION TOOL HOVER /*------------------------------------------*/ .int_tool-2:hover, .int_tool-3:hover { border-color: transparent; -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } /*------------------------------------------*/ /* INTEGRATION MORE BUTTON /*------------------------------------------*/ .integrations-1 .more-btn { margin-top: 15px; } /* ========================================================================== 17. MORE APPS =========================================================================== */ .apps-1-wrapper { padding: 0 5%; } .app-box { display: block; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 50px; } /*------------------------------------------*/ /* MORE APPS TYPOGRAPHY /*------------------------------------------*/ .app-box h6, .app-box h5 { line-height: 1; margin-top: 30px; margin-bottom: 12px; } .app-box p.app-cat { color: var(--gray); line-height: 1; margin-bottom: 0; } .app-logo-img { padding: 0 10%; } /* ========================================================================== 18. BRANDS =========================================================================== */ /*------------------------------------------*/ /* BRANDS SECTION TITLE /*------------------------------------------*/ .brands-title { text-align: center; } .brands-title h6, .brands-title h5 { margin-bottom: 50px; } .brands-title p { margin-bottom: 55px; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brand-logo { overflow: hidden; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .brands-carousel-5 .brand-logo { padding: 0 25px; } .brands-carousel-6 .brand-logo { padding: 0 16px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0 5px; } .brands-section .more-btn { text-align: center; margin-top: 35px; } .brands-section .owl-dots { display: none; } /* ========================================================================== 19.CHANGELOG =========================================================================== */ .version-release { margin-bottom: 80px; } .version-release:last-child { margin-bottom: 0; } .release-data { padding-bottom: 30px; border-bottom: 1px dashed var(--silver); margin-bottom: 30px; } span.version-data { display: block; color: var(--header-color); font-size: 1.5rem; line-height: 1; font-weight: 600; margin-bottom: 15px; } span.release-date { display: block; color: var(--gray); font-size: 0.975rem; line-height: 1; margin-bottom: 0; } span.release-date span { color: var(--header-color); font-weight: 500; } .release-highlights h6 { margin-bottom: 16px; } .release-highlights .simple-list p { margin-bottom: 2px; } .release-highlights p b { color: var(--header-color); } .release-preview { margin-bottom: 30px; } /* ========================================================================== 20.DOWNLOAD =========================================================================== */ .download-item { display: block; text-align: center; padding: 45px 40px 35px; border: 1.5px solid transparent; } .download-item img { width: auto; max-width: inherit; max-height: 64px; margin-bottom: 25px; } .download-item h6 { line-height: 1; } .download-item p { font-size: 0.975rem; margin: 6px 0 0; } /* ========================================================================== 21. FAQS =========================================================================== */ /*------------------------------------------*/ /* FAQs-3 TITLE /*------------------------------------------*/ .faq-3-title { margin-top: 20px; } .faq-3-title p { font-size: 1.0725rem; padding-right: 3%; margin-top: 18px; margin-bottom: 28px; } /*------------------------------------------*/ /* FAQs QUESTION /*------------------------------------------*/ .faqs-2 .question { margin-bottom: 30px; } .faqs-2-questions .left-column { padding-right: 15px; } .faqs-2-questions .right-column { padding-left: 15px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .faqs-1-questions h4 { margin-top: 80px; margin-bottom: 25px; } .faqs-2 .question h6, .faqs-2 .question h5 { line-height: 1.5; padding-right: 5%; margin-bottom: 15px; } .faqs-3-question h5 { line-height: 1.5; margin-bottom: 20px; } .faqs-1 .accordion-item p, .faqs-3 .accordion-item p { color: var(--gray); } /*------------------------------------------*/ /* FAQS ACCORDION /*------------------------------------------*/ .faqs-section .accordion-item { background-color: transparent!important; border: none; border-bottom: 1px solid var(--silver); } .faqs-3.faqs-section .accordion-item { border-bottom: 1px solid var(--silver); } .faqs-section .accordion-item.acc-last-item, .faqs-3.faqs-section .accordion-item.acc-last-item { border-bottom: none; } /*------------------------------------------*/ /* Question /*------------------------------------------*/ .faqs-section .accordion-thumb { margin: 0; padding: 25px 0; cursor: pointer; position: relative; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 22px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .faqs-section .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } /*------------------------------------------*/ /* Answer /*------------------------------------------*/ .faqs-section .accordion-panel { margin: 0; padding: 0 0 15px 0; display: none; } .faqs-section .accordion-thumb h5 { line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* MORE QUESTIONS BUTTON /*------------------------------------------*/ .more-questions { text-align: center; margin-top: 80px; } .faqs-2 .more-questions { margin-top: 50px; } .more-questions-holder { display: inline-block; margin: 0 auto; } .more-questions-txt { text-align: left!important; display: inline-block; float: left; } .more-questions-txt h6 { margin-bottom: 3px; } .more-questions-txt p { margin-bottom: 0; } .more-questions-btn { display: inline-block; margin-left: 30px; } /* ========================================================================== 22. BANNER =========================================================================== */ .banner-1-wrapper { overflow: hidden; padding: 90px 75px 95px; } .banner-2-wrapper { position: relative; overflow: hidden; text-align: center; } .banner-2-wrapper .banner-overlay { padding: 85px 70px 95px; } .banner-4-wrapper { overflow: hidden; padding: 55px 60px; border: 1.5px solid transparent; } .banner-5 { overflow: hidden; padding-top: 50px; } .banner-5-wrapper .banner-overlay { padding: 0 75px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-section .section-id { font-weight: 600; padding-top: 10px; margin-bottom: 30px; } .banner-2-txt h2 { padding: 0 4%; } .banner-4-txt h4.h4-md { line-height: 1.35; padding-right: 3%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { padding-right: 10%; margin: 22px 0 28px; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 2%; margin: 20px 0 28px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 22px; margin-bottom: 0; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } /*------------------------------------------*/ /* BANNER BUTTON /*------------------------------------------*/ .banner-4-btn { position: relative; display: inline-block; margin: 0 auto; top: 10px; } .banner-4-btn p { margin: 12px 0 0; } .banner-section p.btn-txt { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER IMAGE /*------------------------------------------*/ .banner-5-img.right-column { margin-top: -40px; padding-left: 25px; } .banner-5-img.left-column { margin-top: -40px; padding-right: 25px; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .banner-qr-code { position: absolute; bottom: 0; right: 55px; max-width: 110px; text-align: center; background: var(--white); padding: 14px 10px 10px; border-radius: 12px 12px 0 0; } .banner-qr-code img { padding: 0 4%; } .banner-qr-code p { font-size: 0.8rem; line-height: 1.35; margin: 10px 0 0; } /* ========================================================================== 23. BLOG =========================================================================== */ .blog-1 .blog-post { margin-bottom: 40px; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { overflow: hidden; text-align: center; } /*------------------------------------------*/ /* BLOG POST TEXT /*------------------------------------------*/ .blog-post-txt { margin-top: 35px; padding-left: 5px; padding-right: 5px; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .post-tag { display: block; font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; } .blog-post-txt h6, .blog-post-txt h5 { line-height: 1.35; margin-bottom: 10px; } .blog-post-txt h4 { line-height: 1.35; margin-bottom: 20px; } .blog-post-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* BLOG POST META /*------------------------------------------*/ .blog-post-meta { margin-top: 18px; margin-bottom: 0; } .wide-post .blog-post-meta { margin-top: 25px; margin-bottom: 0; } .post-meta-list li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .post-meta-list p { line-height: 1; margin-bottom: 0; } .meta-list-divider { position: relative; top: 0px; transform: rotate(-90deg); padding: 0 1px; } /* ========================================================================== 24. BLOG LISTING =========================================================================== */ #blog-page .blog-post { margin-bottom: 60px; } /*------------------------------------------*/ /* WIDE BLOG POSTS /*------------------------------------------*/ #blog-page .blog-post.wide-post { margin-bottom: 60px; } .wide-post .blog-post-img { margin-right: 15px; } .wide-post .blog-post-txt { margin-top: 0; margin-left: 15px; } /*------------------------------------------*/ /* BLOG POSTS CATEGORY /*------------------------------------------*/ .posts-category { margin-top: 40px; margin-bottom: 50px; } .posts-category h4 { line-height: 1; margin-bottom: 0; } .posts-category span { position: relative; top: 1px; } /* ========================================================================== 25. SINGLE BLOG POST =========================================================================== */ .blog-post-preview { padding: 0 3%; margin-bottom: 50px; } /*------------------------------------------*/ /* Single Post Title /*------------------------------------------*/ .single-post-title { padding: 0 10% 0 8%; margin-bottom: 50px; } .single-post-title .blog-post-meta { margin-bottom: 25px; } .single-post-title h2 { margin-bottom: 25px; } /*------------------------------------------*/ /* Single Post Text /*------------------------------------------*/ .single-post-txt { padding: 0 8%; } .single-post-txt h6 { margin-bottom: 16px; } .single-post-txt h5.h5-xl { margin-top: 60px; margin-bottom: 25px; } .single-post-txt h5 { margin-top: 30px; margin-bottom: 25px; } .single-post-txt p span { color: var(--black); font-weight: 600; } .single-post-txt p a { color: var(--theme-color); font-weight: 600; text-decoration: underline; } .single-post-txt p a:hover { color: var(--black); } /*------------------------------------------*/ /* Single Post Image /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 60px; margin-bottom: 60px; } /*------------------------------------------*/ /* POST DATA /*------------------------------------------*/ .post-data { margin: 60px 5% 0; padding: 60px 3% 100px; } /*------------------------------------------*/ /* POST AUTHOR /*------------------------------------------*/ .post-author-avatar { margin: 0 auto; float: left; margin-right: 20px; } .post-author-avatar img { width: 70px; height: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .post-author-txt { position: relative; top: 8px; } .post-author-txt p { line-height: 1; margin-top: 8px; margin-bottom: 0; } .post-author-txt p a { color: var(--black); font-weight: 500; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-list p { margin-bottom: 12px; } .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.4rem; } .share-social-icons a.share-ico span { color: var(--gray); opacity: .6; margin-left: 10px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .share-social-icons a.share-ico:hover span { opacity: 1; } /* ========================================================================== 26. NEWSLETTER =========================================================================== */ .newsletter-1 .newsletter-overlay, .newsletter-4 .newsletter-overlay { padding: 70px 0; } .newsletter-2 .newsletter-overlay { padding: 80px 0 70px; } .newsletter-3 .container { padding-left: 0; padding-right: 0; } .newsletter-3 .newsletter-overlay { padding: 60px 50px; } /*------------------------------------------*/ /* NEWSLETTER TYPOGRAPHY /*------------------------------------------*/ .newsletter-txt h2 { margin-bottom: 35px; } .newsletter-txt h4, .newsletter-txt h3, .newsletter-txt p.p-sm { margin-bottom: 0; } .newsletter-txt a { font-weight: 500; text-decoration: underline; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 10%; } /*------------------------------------------*/ /* NEWSLETTER FORM /*------------------------------------------*/ .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 30px; padding-left: 10%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 40px; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--silver); font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-right: 12px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .newsletter-2.newsletter-section .form-control { border: none; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { background-color: var(--white); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: var(--light-gray); } .newsletter-section .form-control:-ms-input-placeholder { color: var(--light-gray); } .newsletter-section .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { display: block; width: 100%!important; height: 58px; font-size: 0.925rem; padding: 0.7rem 1.3rem; } .newsletter-2.newsletter-section .btn { font-size: 0.975rem; padding: 0.7rem 1.5rem; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #3eb1ff; font-size: 0.9rem; font-weight: 400; line-height: 1; margin-top: 15px; margin-left: 5px; } .newsletter-section .text-center .form-notification { margin-left: 0; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 27. CONTACTS =========================================================================== */ .contacts-1 .contact-form p { color: var(--header-color); font-size: 0.95rem; line-height: 1; font-weight: 600; margin-bottom: 16px; padding-left: 8px; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.835rem; font-weight: 300; line-height: 1.6; padding-left: 0; margin-top: 35px; margin-bottom: 10px; } .contact-form-notice p a { color: var(--header-color); font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* CONTACT FORM INPUT /*------------------------------------------*/ .contact-form .form-control, .contact-form .form-select { height: 64px; background-color: #fdfdfe; border: 1.5px solid #d5d5d5; box-shadow: 0 0 0 0; color: #3a4a56; font-size: 1rem; font-weight: 400; padding: 0 20px; margin-bottom: 35px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .contact-form .form-select { display: inline-block; width: 100%; color: var(--gray); box-shadow: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: var(--gray); } .contact-form .form-control:-ms-input-placeholder { color: var(--gray); } .contact-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0px none; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 28. FOOTER =========================================================================== */ .footer { padding-bottom: 40px; } .footer-data-logo, .footer-data-socials { margin-bottom: 65px; } .footer-info, .footer-links { margin-bottom: 40px; } .footer-1 .fl-2, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 10%; } .footer-1 .fl-3, .footer-1 .fl-5, .footer-1 .footer-contacts { margin-bottom: 30px; } .footer-1 .fl-4 { margin-bottom: 30px; } /*------------------------------------------*/ /* FOOTER LINKS MOBILE /*------------------------------------------*/ .footer h6.m-title { display: none; position: relative; } .footer h6.m-title:after { font-family: Flaticon; font-weight: 300; content: "\f14f"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer h6.m-title.expanded:after { content: "\f14e"; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ img.footer-logo { width: auto; max-width: inherit; max-height: 32px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 35px; margin-bottom: 0; } .footer-copyright-logo { position: relative; display: inline-block; float: left; top: -4px; } .footer-copyright-logo img.footer-logo { max-height: 28px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .footer-qr-code { max-width: 100px; text-align: center; background: var(--snow); padding: 9px; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h6 { font-size: 1.0815rem; line-height: 1; margin-bottom: 26px; } .footer .footer-links h6.h6-lg { margin-bottom: 14px; } .footer a { color: var(--gray); } .footer.bg--black a { color: var(--snow); } .footer-contacts p { margin-bottom: 4px; } .footer-phone { margin-top: 12px; margin-bottom: 4px; } .footer .footer-links h6.h6-lg a { text-decoration: underline; } .footer.color--white a, .footer.color--white li a { color: var(--snow); } .footer.color--white a:hover, .footer.color--white li a:hover { color: var(--white)!important; } /*------------------------------------------*/ /* FOOTER MAIL LINK /*------------------------------------------*/ .footer-mail-link { margin: 10px 0 0 3px; } .footer-mail-link a { font-size: 1rem; font-weight: 400; } .footer-mail-link span { position: relative; top: 5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; } /*------------------------------------------*/ /* FOOTER INFO /*------------------------------------------*/ .footer-info-socials { margin-top: 5px; } .footer-info-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-info-socials li { padding-right: 14px; } .footer-2 .footer-info-socials li { padding-right: 10px; } .footer-info-socials li span { position: relative; opacity: .8; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; } .footer-info-socials li:hover span { opacity: 1; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .foo-links li { width: auto!important; display: block!important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .foo-links.ico-10 li span { position: relative; top: 1.5px; right: 4px; } .foo-links li p { font-weight: 400; margin-bottom: 10px; } .foo-links li:last-child p { margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER SOCIAL /*------------------------------------------*/ .footer-socials { margin: 0; display: inline-block; } .footer-socials li { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .footer-socials a { display: block; margin-right: 14px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 15px; } .footer-socials li span { opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-socials li span:hover { opacity: 1; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* FOOTER STORE BAGES /*------------------------------------------*/ .footer .store { float: none; margin-right: 0; margin-bottom: 15px; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form { margin-bottom: 20px; } .footer .newsletter-form { margin-top: 25px; } .footer-form .newsletter-form .input-group { background-color: var(--form-control); border: 1.5px solid var(--smoke); padding: 9px 2px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-form .form-control { height: 32px; background-color: transparent; border: none; color: var(--gray); font-size: 1rem; font-weight: 400; padding: 0 10px; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { background-color: var(--white)!important; } .footer-form .form-control:focus { border: none; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: var(--gray); } .footer-form .form-control:-ms-input-placeholder { color: var(--gray); } .footer-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { height: 32px; padding: 0 10px; border: none!important; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; } .footer-form .btn:hover { color: var(--black)!important; } .footer-form .btn:focus { border: none!important; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #1680fb; font-size: 0.85rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } .footer-form .form-notification.error { color: #fc2f4b; } .footer-form .form-notification.valid { color: #48af4b; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 40px; } .footer hr.footer-top-hr { margin-top: 0; margin-bottom: 100px; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .footer-copyright.copyright-logo p { display: inline-block; line-height: 28px; margin-left: 15px; } /*------------------------------------------*/ /* BOTTOM FOOTER SECONDARY LINK /*------------------------------------------*/ .bottom-secondary-link p { margin-bottom: 0; } .bottom-secondary-link p span { position: relative; top: 1.5px; padding: 0 2px; } .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .footer-data-socials li, .bottom-footer-list li, .bottom-footer-socials li, .bottom-footer-payment li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-data-socials li { padding-left: 11px; } .bottom-foo-socials li, .bottom-footer-socials li { padding-left: 12px; } .footer-data-socials p { position: relative; line-height: 1; top: 9px; margin-bottom: 0; } .footer-list-divider { position: relative; top: -0.5px; transform: rotate(-90deg); margin-left: 4px; } .bottom-footer-list.ico-15 [class*="flaticon-"]:before, .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .bottom-footer-list li p { display: inline-block; float: left; margin-bottom: 0; } .footer-data-socials li span, .bottom-footer-socials li span { position: relative; top: 4px; opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-data-socials li span:hover, .bottom-footer-socials li span:hover { opacity: 1; } .bottom-foo-socials li span { position: relative; top: 1px; right: 1px; opacity: .8; } .bottom-footer-payment li span { line-height: 1!important; position: relative; top: 4px; opacity: .8; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.2125rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } /* ========================================================================== 29. INNER PAGE WRAPPER =========================================================================== */ .inner-page-hero { padding-top: 190px; } .page-hero-section { position: relative; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; padding-top: 180px; padding-bottom: 100px; } /*------------------------------------------*/ /* INNER PAGE TITLE /*------------------------------------------*/ .inner-page-title { margin-bottom: 80px; } .inner-page-title h3, .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1; margin-top: 25px; margin-bottom: 0; } .inner-page-title p span { color: var(--black); font-weight: 600; } .page-hero-section p { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 30. PAGE PAGINATION =========================================================================== */ .page-link { color: var(--gray); font-size: 1.1rem; font-weight: 500; padding: 2px 14px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .page-item:last-child .page-link { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .page-item.disabled .page-link { color: var(--gray); background-color: transparent; border-color: transparent; } .page-link:hover { color: var(--gray); background-color: transparent; border-color: var(--gray); } .page-link:focus { color: var(--gray); background-color: transparent; border-color: transparent; box-shadow: 0 0; } .page-item.active .page-link { color: var(--white)!important; } .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); } .theme--indigo .page-item.active .page-link { background-color: var(--indigo); border-color: var(--indigo); } .theme--orchid .page-item.active .page-link { background-color: var(--orchid); border-color: var(--orchid); } .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); } .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); } .theme--red .page-item.active .page-link { background-color: var(--red); border-color: var(--red); } .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); } .theme--violet-red .page-item.active .page-link { background-color: var(--violet-red); border-color: var(--violet-red); } /* ========================================================================== 31. TERMS, PRIVACY, COOKIES PAGES =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .txt-block.legal-info h5 { margin: 50px 0 25px; } .txt-block.legal-info h6 { margin: 25px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 4px; } .legal-info p span { color: var(--black); font-weight: 700; } .legal-info a { font-weight: 700; text-decoration: underline; } .legal-info a:hover { color: var(--black); } /* ========================================================================== 32. SIGN-IN / SIGN-UP PAGE =========================================================================== */ .register-page { position: relative; width: 100%; min-height: 100vh; z-index: 3; background: url(../images/register-page.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .theme--dark .register-page { background: url(../images/register-page-dark.jpg); } /*------------------------------------------*/ /* REGISTER PAGE LOGO /*------------------------------------------*/ .register-page-logo { position: fixed; padding-top: 30px; } .register-page-logo img { width: auto; max-width: inherit; max-height: 28px; } /*------------------------------------------*/ /* REGISTER PAGE FORM /*------------------------------------------*/ .register-page-form { margin: 0 3%; padding: 140px 20px; } .reset-page-wrapper { padding: 180px 20px 140px; } /*------------------------------------------*/ /* REGISTER PAGE TITLE /*------------------------------------------*/ .register-form-title { text-align: center; margin-bottom: 30px; } .register-form-title p { font-size: 1.05rem; margin-top: 8px; margin-bottom: 0; } /*------------------------------------------*/ /* RESET PASSWORD PAGE TITLE /*------------------------------------------*/ .reset-form-title { text-align: center; margin-bottom: 22px; } .reset-form-title p.p-sm { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* REGISTER PAGE TYPOGRAPHY /*------------------------------------------*/ .reset-password-link p { position: relative; font-size: 0.85rem; line-height: 1; margin-bottom: 30px; } .reset-password-link p a { text-decoration: underline; } .form-data span { display: block; font-size: 0.825rem; margin-bottom: 0; } .reset-password-form .form-data p { margin-top: 22px; margin-bottom: 12px; } .form-data p a, .form-data span a { color: var(--header-color); font-weight: 500; text-decoration: underline; } .register-page-form p.create-account { font-size: 0.9rem; line-height: 1; margin-top: 24px; margin-bottom: 0; } .register-page-form p.create-account a { font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* REGISTER PAGE SEPARATOR LINE /*------------------------------------------*/ .separator-line { display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 500; margin: 25px 0; } .separator-line::before, .separator-line::after { content: ""; border-top: 1.5px solid rgba(5, 5, 5, .18); margin: 0 15px 0 0; flex: 1 0 20px; } .separator-line::after { margin: 0 0 0 15px; } /*------------------------------------------*/ /* REGISTER PAGE FORM INPUT /*------------------------------------------*/ .reset-page-wrapper .form-control, .register-page-form .form-control { height: 56px; background-color: var(--white); border: 1.5px solid #d2d2d2; color: var(--black); font-size: 0.935rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .register-page-form .form-control::-moz-placeholder { color: var(--gray); } .register-page-form .form-control:-ms-input-placeholder { color: var(--gray); } .register-page-form .form-control::-webkit-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* REGISTER PAGE FORM BUTTON /*------------------------------------------*/ #login .register-page-form .btn.submit, #signup .register-page-form .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; margin-top: 0; } #signup .register-page-form .btn.submit { margin-top: 25px; } .reset-page-wrapper .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; } .register-page-form .btn-google { width: 100%; color: var(--header-color); font-size: 0.975rem; padding: 0.75rem 1.6rem; background-color: var(--white); border: 1px solid var(--silver); } .btn-google img { position: relative; width: 25px; height: 25px; top: 0; right: 5px; } .btn-google span { position: relative; top: 1px; } .register-page-form .btn-google:hover { border: 1px solid var(--header-color); } /*------------------------------------------*/ /* REGISTER PAGE FORM MESSAGE /*------------------------------------------*/ .reset-form-msg { text-align: center; width: 100%!important; display: block; } .reset-password-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .reset-password-form .error { position: relative; color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; top: -10px; margin-bottom: 12px; padding-left: 10px; } /*------------------------------------------*/ /* FORM HIDE PASSWORD /*------------------------------------------*/ .wrap-input { position: relative; } .btn-show-pass { color: var(--light-gray); align-items: center; position: absolute; height: 100%; top: 15px; right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-show-pass.ico-20 [class^="flaticon-"]:before, .btn-show-pass.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } .btn-show-pass:hover { color: var(--theme-color); } .eye-pass.flaticon-invisible { color: var(--gray); } /* ========================================================================== 33. MODAL ========================================================================== */ .modal-body { padding: 0!important; } .modal-dialog.modal-xl { width: 760px; } .modal .modal-content { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .modal-body-content { padding: 60px 35px 35px; } .modal-body-content h4 { margin-bottom: 15px; } .modal-body-content p { margin-bottom: 0; } .modal .bg-img { background: url(../images/modal.jpg); background-repeat: no-repeat; background-position: left center; background-size: cover; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .btn-close { position: absolute; z-index: 1; right: 20px!important; top: 20px!important; height: 1.5rem; width: 1.5rem; background: rgba(14, 14, 14, .11)!important; border-radius: 50%; padding: 0; opacity: .9; z-index: 9999; } .modal .btn-close span { position: relative; line-height: 24px!important; top: -2px; } .modal .btn-close.ico-10 [class^="flaticon-"]:before, .modal .btn-close.ico-10 [class^="flaticon-"]:after { font-size: 0.6rem; } .modal .btn-close:focus { outline: none!important; box-shadow: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW NEWSLETTER FORM /*------------------------------------------*/ .modal-body .newsletter-form { margin-top: 25px; } .modal .newsletter-form .form-control { text-align: center; height: 58px; background-color: #f3f4f5; border: 1.5px solid transparent; font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-bottom: 20px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Form Input Focus /*------------------------------------------*/ .modal .newsletter-form .form-control:focus { outline: 0; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Form Input Placeholder /*------------------------------------------*/ .modal .newsletter-form .form-control::-moz-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Form Button /*------------------------------------------*/ .modal .input-group-btn { display: block; width: 100%!important; } .modal .newsletter-form .btn { display: block; width: 100%!important; height: 58px; font-size: 0.975rem; margin: 0; } /*------------------------------------------*/ /* Form Notification /*------------------------------------------*/ .modal .form-notification { text-align: center; color: #1680fb; font-size: 0.85rem; font-weight: 400; line-height: 1; margin-top: 12px; } .modal .form-notification.valid, .modal .form-notification.error { color: #fc2f4b; } .modal .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 34. COOKIES =========================================================================== */ #cookies { position: fixed; width: 90%; bottom: 25px; left: 5%; z-index: 200; padding: 25px; border: 1px solid #ddd; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); -moz-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); } #cookies p { color: #353f4f; font-size: 0.875rem; line-height: 1.5; margin: 0; } #cookies-ok { position: absolute; right: 52px; bottom: 18px; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 500; background-color: #353f4f!important; border: 2px solid #353f4f!important; padding: 6px 20px; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } #cookies-ok:hover { color: #353f4f!important; background-color: transparent!important; border-color: #353f4f!important; } #cookies-info { color: #353f4f!important; font-weight: 500; text-decoration: underline; margin-left: 10px; } .theme--blue #cookies-info:hover { color: var(--blue)!important; } .theme--green #cookies-info:hover { color: var(--green)!important; } .theme--indigo #cookies-info:hover { color: var(--indigo)!important; } .theme--orchid #cookies-info:hover { color: var(--orchid)!important; } .theme--pink #cookies-info:hover { color: var(--pink)!important; } .theme--purple #cookies-info:hover { color: var(--purple)!important; } .theme--red #cookies-info:hover { color: var(--red)!important; } .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; } .theme--violet-red #cookies-info:hover { color: var(--violet-red)!important; } #cookies-close { position: absolute; right: 25px; top: 20px; height: 12px; width: 12px; } #cookies-close svg { width: 11px; height: 11px; } /* ========================================================================== 35. COLOR SCHEME ========================================================================== */ :root { --theme-color: #fc5a8d; --theme-color-secondary: #fc5a8d; } .bg--theme { background-color: var(--theme-color); } .bg--theme-2 { background-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* BUTTON /*------------------------------------------*/ .btn--theme, .hover--theme:hover, .theme--dark .btn--theme, .theme--dark .hover--theme:hover, .color--white .hover--theme:hover, .scroll .hover--theme:hover, .theme--dark .color--white .hover--theme:hover, .theme--dark .scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme, .theme--dark .btn--tra-theme, .theme--dark .hover--tra-theme:hover, .theme--dark .color--white .btn--tra-theme { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } .btn--theme-2, .hover--theme-2:hover, .theme--dark .btn--theme-2, .theme--dark .hover--theme-2:hover, .color--white .hover--theme-2:hover, .scroll .hover--theme-2:hover, .theme--dark .color--white .hover--theme-2:hover, .theme--dark .scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .btn--tra-theme-2, .hover--tra-theme-2:hover, .color--white .btn--tra-theme-2, .theme--dark .btn--tra-theme-2, .theme--dark .hover--tra-theme-2:hover, .theme--dark .color--white .btn--tra-theme-2 { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } /*------------------------------------------*/ /* COLOR /*------------------------------------------*/ .color--theme, .color--theme a, .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); } .color--theme-2, .color--theme-2 a, .color--theme-2 :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico.color--theme path, .shape-ico.color--theme-2 path { fill: #f6f4fd; } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .loading--theme .cssload-spinner:after, .loading--theme .cssload-spinner:before { border-color: var(--theme-color); } /*------------------------------------------*/ /* HEADER & NAVIGATION /*------------------------------------------*/ .nav-theme .sm-info { background-color: var(--theme-color); } .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .cbox-1:hover .cbox-1-ico.bg--theme { color: var(--theme-color); border-color: var(--theme-color); } .cbox-1:hover .cbox-1-ico.bg--theme-2 { color: var(--theme-color-secondary); border-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .p-table.theme--border { border: 3px solid var(--theme-color); } .pricing-features.ico--theme span { color: var(--theme-color); } .pricing-features.ico--theme-2 span { color: var(--theme-color-secondary); } .switcher { background-color: var(--theme-color); } .comp-table .color--theme { color: var(--theme-color); } .comp-table .color--theme-2 { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .newsletter-section .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { border-color: var(--theme-color)!important; } .footer-form .btn { color: var(--theme-color); } /*------------------------------------------*/ /* PAGINATION /*------------------------------------------*/ .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .reset-password-link p a:hover, .reset-password-form .form-data p a:hover { color: var(--theme-color); } .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { border-color: var(--theme-color); } .modal .newsletter-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* COOKIES /*------------------------------------------*/ #cookies-ok { background-color: var(--theme-color)!important; border: 2px solid var(--theme-color)!important; } #cookies-info:hover { color: var(--theme-color)!important; } /*------------------------------------------*/ /* DARK MODE /*------------------------------------------*/ .theme--dark .shape-ico.color--theme path, .theme--dark .shape-ico.color--theme-2 path { fill: rgba(43, 48, 64, .5); } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { border-color: var(--theme-color)!important; } /* ========================================================================== 36. DARK MODE ========================================================================== */ body.theme--dark { --dark-theme-bg: #13161f; --black: #f9f9f9; --gray: #c8c8c8; --ink: #101219; --form-control: #191c28; --header-color: #fff; --header-link: #dee1ea; --silver: rgba(43, 48, 64, 1); --smoke: rgba(43, 48, 64, .7); --white-smoke: #191c28; } body.theme--dark { background-color: var(--dark-theme-bg); color: var(--gray); } .theme--dark .bg--white, .theme--dark .bg--coal, .theme--dark .bg--lavender, .theme--dark .bg--magnolia, .theme--dark .bg--aliceblue, .theme--dark .bg--tra-violet-red { background-color: var(--white-smoke); } .theme--dark .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .theme--dark .bg--03 { background-image: url(../images/bg-03d.jpg); } .theme--dark .bg--05 { background-image: url(../images/bg-05d.jpg); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ .theme--dark hr.divider, .theme--dark .footer hr { background-image: linear-gradient(90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); } .theme--dark hr.divider.divider-light { background-color: #fff; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%); opacity: 1; } /*------------------------------------------*/ /* TYPOGRAPHY /*------------------------------------------*/ .theme--dark a { color: var(--gray); } .theme--dark a:hover, .theme--dark a.tra-link:hover span { color: var(--white); } /*------------------------------------------*/ /* BUTTONS /*------------------------------------------*/ .theme--dark .btn--transparent { color: var(--white)!important; } /* WHITE BUTTON */ .theme--dark .btn--white, .theme--dark .hover--white:hover, .theme--dark .color--white .hover--white:hover { color: #333!important; background-color: var(--white)!important; border-color: var(--white)!important; } /* BLACK BUTTON */ .theme--dark .btn--black, .theme--dark .hover--black:hover, .theme--dark .color--white .hover--black:hover { color: var(--ink)!important; border-color: var(--black)!important; background-color: var(--black)!important; } .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .color--white .btn--tra-black { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /* BLUE BUTTON */ .theme--dark .btn--blue, .theme--dark .hover--blue:hover, .theme--dark .color--white .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .btn--tra-blue, .theme--dark .hover--tra-blue:hover, .theme--dark .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /* GREEN BUTTON */ .theme--dark .btn--green, .theme--dark .hover--green:hover, .theme--dark .color--white .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .btn--tra-green, .theme--dark .hover--tra-green:hover, .theme--dark .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /* INDIGO BUTTON */ .theme--dark .btn--indigo, .theme--dark .hover--indigo:hover, .theme--dark .color--white .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .btn--tra-indigo, .theme--dark .hover--tra-indigo:hover, .theme--dark .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /* ORCHID BUTTON */ .theme--dark .btn--orchid, .theme--dark .hover--orchid:hover, .theme--dark .color--white .hover--orchid:hover, .theme--dark .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .btn--tra-orchid, .theme--dark .hover--tra-orchid:hover, .theme--dark .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /* PINK BUTTON */ .theme--dark .btn--pink, .theme--dark .hover--pink:hover, .theme--dark .color--white .hover--pink:hover, .theme--dark .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .btn--tra-pink, .theme--dark .hover--tra-pink:hover, .theme--dark .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /* PURPLE BUTTON */ .theme--dark .btn--purple, .theme--dark .hover--purple:hover, .theme--dark .color--white .hover--purple:hover, .theme--dark .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .btn--tra-purple, .theme--dark .hover--tra-purple:hover, .theme--dark .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /* RED BUTTON */ .theme--dark .btn--red, .theme--dark .hover--red:hover, .theme--dark .color--white .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .btn--tra-red, .theme--dark .hover--tra-red:hover, .theme--dark .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /* SKYBLUE BUTTON */ .theme--dark .btn--skyblue, .theme--dark .hover--skyblue:hover, .theme--dark .color--white .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .btn--tra-skyblue, .theme--dark .hover--tra-skyblue:hover, .theme--dark .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /* VIOLET RED BUTTON */ .theme--dark .btn--violet-red, .theme--dark .hover--violet-red:hover, .theme--dark .color--white .hover--violet-red:hover, .theme--dark .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .btn--tra-violet-red, .theme--dark .hover--tra-violet-red:hover, .theme--dark .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /* YELLOW BUTTON */ .theme--dark .btn--yellow, .theme--dark .hover--yellow:hover, .theme--dark .color--white .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .theme--dark .shape-ico.color--blue path, .theme--dark .shape-ico.color--indigo path, .theme--dark .shape-ico.color--skyblue path, .theme--dark .shape-ico.color--lilac path, .theme--dark .shape-ico.color--orchid path, .theme--dark .shape-ico.color--pink path, .theme--dark .shape-ico.color--purple path, .theme--dark .shape-ico.color--violet-red path { fill: rgba(43, 48, 64, .5); } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .theme--dark .dark-menu .wsmainfull, .theme--dark .white-menu .wsmainfull { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a { color: var(--header-link); } .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover { color: #eee!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover { color: var(--white)!important; } /*------------------------------------------*/ /* HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--white-smoke)!important; border: solid 1px var(--smoke)!important; -webkit-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); -moz-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); box-shadow: 0 2px 3px rgba(1, 1, 1, .1); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before, .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before { background-color: var(--ink); border-left: solid var(--ink); border-top: solid 1px var(--ink); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); background-color: transparent!important; } .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .theme--dark .tra-menu .wsmainfull.scroll, .theme--dark .white-menu .wsmainfull.scroll, .theme--dark .dark-menu.dark-scroll .wsmainfull.scroll { background-color: var(--ink)!important; padding: 0; -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-link); } .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(44, 49, 66, .72)!important; color: var(--white); } .theme--dark .navbar-light .scroll .btn.btn--tra-white { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .wsmainfull .hover--black:hover { color: var(--white)!important; border-color: #353f4f!important; background-color: #353f4f!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--black:hover { color: var(--ink)!important; border-color: var(--white)!important; background-color: var(--white)!important; } .theme--dark .navbar-light .scroll .wsmenu > .wsmenu-list > li > a.btn.hover--black:hover { color: var(--ink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--indigo:hover { color: var(--white)!important; border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .white-scroll .wsmainfull .hover--tra-white:hover, .theme--dark .white-scroll .wsmainfull.scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-white { display: block; } .theme--dark .navbar-dark .logo-white { display: none; } /*------------------------------------------*/ /* CAREERS /*------------------------------------------*/ .theme--dark .jobs-category { background-color: #181b27; border-color: var(--silver); } /*------------------------------------------*/ /* FEATURES /*------------------------------------------*/ .theme--dark .fbox-5.bg--white { background-color: #181a27; border-color: var(--silver); } .theme--dark .fbox-3.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .theme--dark .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } .theme--dark .bc-04-wrapper { border-color: var(--silver); } /*------------------------------------------*/ /* TEAM /*------------------------------------------*/ .theme--dark .team-member { background-color: var(--white-smoke); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .theme--dark .p-table { border-color: var(--silver); } .theme--dark .pricing-discount h6 { color: #353f4f; } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .theme--dark .int_tool-1 .tool_logo.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* RATING /*------------------------------------------*/ .theme--dark .rbox-1 .star-rating { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .rbox-3 p span { color: #fff; } /*------------------------------------------*/ /* REVIEWS /*------------------------------------------*/ .theme--dark .reviews-3-wrapper:after { background-color: #181a27; } .theme--dark .review-1 { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .owl-theme .owl-dots .owl-dot span { background: #3a3a3a; } .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: var(--white); } /*------------------------------------------*/ /* DOWNLOAD /*------------------------------------------*/ .theme--dark .download-item { border-color: var(--silver); } /*------------------------------------------*/ /* FAQs /*------------------------------------------*/ .theme--dark .accordion-panel { color: var(--gray); } .theme--dark .faqs-section .accordion-item .accordion-thumb:after, .theme--dark .faqs-section .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } /*------------------------------------------*/ /* BANNER /*------------------------------------------*/ .theme--dark .os-link { border-color: var(--silver); } .theme--dark .os-qr-code { background-color: #fff; } .theme--dark .os-logo img { filter: invert(100%); opacity: .4; } .theme--dark .banner-qr-code p { color: var(--ink); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .theme--dark .newsletter-section .form-control::-moz-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: var(--gray); } .theme--dark .newsletter-1.newsletter-section .form-control, .theme--dark .newsletter-3.newsletter-section .form-control { background-color: var(--white-smoke); } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { background-color: var(--dark-theme-bg); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .theme--dark .contact-form .form-control, .theme--dark .contact-form .form-select { background-color: var(--white-smoke); border: 1.5px solid var(--silver); } .theme--dark .contact-form .form-control:focus, .theme--dark .contact-form .form-select:focus { background-color: var(--dark-theme-bg); border: 1.5px solid var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .theme--dark .footer-form .newsletter-form .input-group:focus-within { background-color: var(--dark-theme-bg)!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* INNER PAGE WRAPPER /*------------------------------------------*/ .theme--dark .inner-page-title p span { color: var(--white); } /*------------------------------------------*/ /* TERMS, PRIVACY, COOKIES PAGES /*------------------------------------------*/ .theme--dark .legal-info a, .theme--dark .legal-info p span { color: rgba(255, 255, 255, .86); } .theme--dark .legal-info a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .modal-body-content h4 { color: #313435; } .theme--dark .modal-body-content p { color: #6c757d; } .theme--dark .newsletter-form .hover--black:hover { color: #fff!important; border-color: #353f4f!important; background-color: #353f4f!important; } /*------------------------------------------*/ /* SIGN-IN / SIGN-UP PAGE /*------------------------------------------*/ .theme--dark .separator-line::before, .theme--dark .separator-line::after { border-top: 1.5px solid rgba(255, 255, 255, .18); } .theme--dark .reset-page-wrapper .form-control, .theme--dark .register-page-form .form-control { background-color: #2c3344; border: 1px solid #2c3344; } .theme--dark .reset-page-wrapper .form-control:focus, .theme--dark .register-page-form .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--theme-color); } .theme--dark .register-page-form .btn-google { color: var(--header-color); background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .register-page-form .btn-google:hover { border-color: var(--header-color); } /* Template Name: Pintex - Mobile App & Software Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Pintex - Mobile App Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: https://www.jthemes.com/ Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App */ /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ :root { --alice-blue: #f1f3ff; --black: #353f4f; --blue: #0083ff; --coal: #111b21; --disable: #b5b5b5; --form-control: #fafafd; --gray: #545465; --green: #0fbc49; --header-color: #120036; --indigo: #7b5dd6; --ink: #1d222f; --lavender: #f8f5fd; --light-blue: #edf8fd; --light-gray: #90a0b2; --lilac: #beaedb; --magnolia: #f9f7fd; --metal: #2c3840; --noice: #f8f9fa; --orchid: #ce67c9; --pink: #fc5a8d; --purple: #9370db; --silver: #ccc; --sky-blue: #04aaff; --smoke: #e7e7e7; --snow: #f5f6f6; --violet-red: #c73e9b; --white: #fff; --white-smoke: #f4f4f9; --yellow: #ffbf15; --tra-black: rgba(5, 5, 5, .05); --tra-gray: rgba(96, 96, 96, .13); --tra-indigo: rgba(128, 96, 225, .13); --tra-ink: rgba(1, 1, 1, .1); --tra-purple: rgba(102, 51, 255, .13); --tra-white: rgba(255, 255, 255, .2); --tra-violet-red: rgba(237, 230, 244, .84); --tra-white-smoke: rgba(244, 244, 249, .13); } html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--gray); line-height: 1.6666; font-weight: 400; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block--shadow { -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } .img-block .block--shadow { -webkit-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); -moz-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); } /*------------------------------------------*/ /* BORDER SETTINGS /*------------------------------------------*/ .block--border { border: 1px solid var(--silver); } .block--border.border--light, .block--border.block--shadow { border: 1px solid var(--smoke); } .x-border { border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); } .x-border.border--light { border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); } .t-border { border-top: 1px solid var(--silver); } .t-border.border--light { border-top: 1px solid var(--smoke); } .b-border { border-bottom: 1px solid var(--silver); } .b-border.border--light { border-bottom: 1px solid var(--smoke); } /*------------------------------------------*/ /* BORDER RADIUS SETTING /*------------------------------------------*/ .r-0 { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .r-02 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .r-04 { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .r-06 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .r-08 { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .r-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .r-12 { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } .r-14 { -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; } .r-16 { -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .r-18 { -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; } .r-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .r-22 { -webkit-border-radius: 22px; -moz-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; } .r-24 { -webkit-border-radius: 24px; -moz-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; } .r-26 { -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; border-radius: 26px; } .r-28 { -webkit-border-radius: 28px; -moz-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; } .r-30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } .r-32 { -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; border-radius: 32px; } .r-34 { -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; } .r-36 { -webkit-border-radius: 36px; -moz-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; } .r-100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .py-90 { padding-top: 90px; padding-bottom: 90px; } .py-100 { padding-top: 100px; padding-bottom: 100px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .px-15 { padding-left: 15x; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-20 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .mt-0 { margin-top: 0!important; } .mt-15 { margin-top: 15x; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-0 { margin-bottom: 0!important; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--aliceblue { background-color: var(--alice-blue); } .bg--black { background-color: var(--black); } .bg--blue { background-color: var(--blue); } .bg--coal { background-color: var(--coal); } .bg--indigo { background-color: var(--indigo); } .bg--lavender { background-color: var(--lavender); } .bg--lightblue { background-color: var(--light-blue); } .bg--lilac { background-color: var(--lilac); } .bg--magnolia { background-color: var(--magnolia); } .bg--noice { background-color: var(--noice); } .bg--orchid { background-color: var(--orchid); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--red { background-color: var(--red); } .bg--skyblue { background-color: var(--sky-blue); } .bg--snow { background-color: var(--snow); } .bg--violet-red { background-color: var(--violet-red); } .bg--white { background-color: var(--white); } .bg--whitesmoke { background-color: var(--white-smoke); } .bg--yellow { background-color: var(--yellow); } /*------------------------------------------*/ /* TRANSPARENT BACKGROUND COLORS /*------------------------------------------*/ .bg--tra-indigo { background-color: var(--tra-indigo); } .bg--tra-purple { background-color: var(--tra-purple); } .bg--tra-violet-red { background-color: var(--tra-violet-red); } /*------------------------------------------*/ /* GRADIENT COLOR BACKGROUND /*------------------------------------------*/ .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%); } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .shape--01:after, .shape--02:after { position: absolute; content: ''; width: 100%; height: 55%; left: 0; z-index: -1; } .shape--01:after { top: 0; } .shape--02:after { top: 45%; } .shape--whitesmoke:after { background-color: var(--white-smoke); } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06, .bg--07 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../images/bg-01.jpg); } .bg--02 { background-image: url(../images/bg-02.jpg); } .bg--03 { background-image: url(../images/bg-03.jpg); } .bg--04 { background-image: url(../images/bg-04.jpg); } .bg--05 { background-image: url(../images/bg-05.jpg); } .bg--06 { background-image: url(../images/bg-06.jpg); } .bg--07 { background-image: url(../images/bg-07.jpg); } /*------------------------------------------*/ /* BACKGROUND PATTERN /*------------------------------------------*/ .pattern--01, .pattern--02, .pattern--03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .pattern--01 { background-image: url(../images/pattern-01.png); } .pattern--02 { background-image: url(../images/pattern-02.png); } .pattern--03 { background-image: url(../images/pattern-03.png); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ hr.divider { width: 100%; height: 1px; background-color: transparent; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%); opacity: .4; border: none; margin: 0; } /*------------------------------------------*/ /* WAVE SHAPE BOTTOM /*------------------------------------------*/ .wave-shape-bottom { position: absolute; bottom: 0; left: 0; width: 100%; } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h6, h5, h4, h3, h2, h1 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-weight: 700; letter-spacing: 0; margin-bottom: 0; } /*------------------------------------------*/ /* HEADER SIZE /*------------------------------------------*/ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.25rem; } /* 20px */ h6.h6-xl { font-size: 1.3125rem; } /* 21px */ h5 { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h5.h5-xl { font-size: 1.75rem; } /* 28px */ h4 { font-size: 1.875rem; } /* 30px */ h4.h4-md { font-size: 2rem; } /* 32px */ h4.h4-lg { font-size: 2.125rem; } /* 34px */ h4.h4-xl { font-size: 2.25rem; } /* 36px */ h3 { font-size: 2.375rem; } /* 38px */ h3.h3-md { font-size: 2.5rem; } /* 40px */ h3.h3-lg { font-size: 2.6255rem; } /* 42px */ h3.h3-xl { font-size: 2.75rem; } /* 44px */ h2 { font-size: 2.875rem; } /* 46px */ h2.h2-md { font-size: 3rem; } /* 48px */ h2.h2-lg { font-size: 3.125rem; } /* 50px */ h2.h2-xl { font-size: 3.25rem; } /* 52px */ h2.h2-title { font-size: 3.375rem; } /* 54px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 0.9375rem; } /* 15px */ p { font-size: 1rem; } /* 16px */ p.p-md { font-size: 1.0625rem; } /* 17px */ p.p-lg { font-size: 1.125rem; } /* 18px */ p.p-xl { font-size: 1.1875rem; } /* 19px */ /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: var(--header-color); text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: var(--header-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a.tra-link { font-size: 1rem; line-height: 1; font-weight: 600; } a.tra-link span { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.75rem; line-height: 0.7rem!important; top: 1.5px; left: 1px; } a.tra-link:hover span { color: var(--black)!important; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ol.digit-list p, ul.simple-list.long-list p { margin-bottom: 8px; } .content-section ul.simple-list.long-list p { margin-bottom: 5px; } /*------------------------------------------*/ /* DIGIT LIST /*------------------------------------------*/ ol.digit-list { padding: 0; margin-left: 15px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { font-size: 1rem; line-height: 1; font-weight: 600; background-color: transparent; padding: 0.9rem 1.8rem; border: 2px solid transparent; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .btn.btn-sm { font-size: 0.975rem; padding: 0.7rem 1.5rem; } .btn.btn-md { font-size: 1rem; padding: 0.9425rem 1.75rem; } .btn.btn-lg { font-size: 1.05rem; padding: 1.1rem 1.8rem; } .btn.ico-20.ico-left, .btn.ico-20.ico-right { padding: 0.9rem 1.55rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.1rem; letter-spacing: -0.35px; padding: 0.9rem 1.35rem; } .btn.ico-30.ico-left, .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Buttons Group /*------------------------------------------*/ .text-center .btns-group { display: inline-block; } .btns-group .btn:first-child { margin-right: 15px; } .btns-group .btn.ico-30.ico-left { padding: 0.37rem 0.5rem; } .btns-group .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Button Icon /*------------------------------------------*/ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1rem; line-height: 0.7rem!important; top: 4px; } .btn.ico-25 [class*="flaticon-"]:before, .btn.ico-25 [class*="flaticon-"]:after { position: relative; font-size: 1.275rem; line-height: 1rem!important; top: 1px; } .btn.ico-25.ios-btn [class*="flaticon-"]:before, .btn.ico-25.ios-btn [class*="flaticon-"]:after { top: 0; } .ico-25-txt { position: relative; top: -3px; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { position: relative; top: 0; right: 4px; } .btn.ico-30.ico-right span { position: relative; top: 0; left: 4px; } .btn.ico-30.ico-left span.ico-30-txt, .btn.ico-30.ico-right span.ico-30-txt { position: relative; top: -10px; right: 0; } .btn.ico-30.ico-right span.ico-30-txt { left: 0; } /*------------------------------------------*/ /* Button Text /*------------------------------------------*/ p.btn-txt { margin: 15px 0 0 0; } p.btn-txt span { font-weight: 700; } .btn-rating p.btn-txt { margin: 0; } .star-rating small, .star-rating span.rating-txt { font-size: 0.9375rem; } p.btns-group-txt { margin: 14px 0 0 0; } .btn-rating { margin-top: 10px; } .text-center p.btns-group-txt { margin-top: 20px; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding-left: 5px; } .text-center p.btn-txt.ico-15, .text-center p.btns-group-txt.ico-15 { padding-left: 0; } p.btn-txt span, p.btns-group-txt span { position: relative; top: 0.5px; right: 2px; } p.btns-group-txt span.txt-data { display: block; top: 0; right: 0; } p.btns-group-txt span.txt-data a { margin-left: 4px; text-decoration: underline; } p.btns-group-txt span.txt-data a:hover { text-decoration: none; } .hero-section .color--white p.btns-group-txt span.txt-data a:hover { color: var(--white)!important; } .btn-txt.ico-15 [class*="flaticon-"]:before, .btn-txt.ico-15 [class*="flaticon-"]:after, .btns-group-txt.ico-15 [class*="flaticon-"]:before, .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .star-rating.ico-10 [class*="flaticon-"]:before, .star-rating.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; top: 1px; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; } .p-sm.btn-txt.ico-20 [class*="flaticon-"]:before, .p-sm.btn-txt.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.875rem; top: 1px; } .os-version-ext { margin-top: 16px; } .os-version-ext .star-rating small { font-size: 0.9rem; margin-left: 6px; } span.os-version { display: block; font-size: 0.9rem; line-height: 1; margin-top: 5px; } /*------------------------------------------*/ /* TRANPARENT BUTTON /*------------------------------------------*/ .btn--transparent { color: var(--black)!important; background-color: transparent!important; border-color: transparent!important; } .btn--transparent.color--white { color: var(--white)!important; } .btn--transparent:hover { background-color: transparent!important; border-color: transparent!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover, .color--white .hover--white:hover { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .white-scroll .scroll .hover--tra-white:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } .white-scroll .scroll .hover--white:hover { color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover, .white-scroll .scroll .hover--black:hover { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .btn--tra-black, .hover--tra-black:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* TRA GRAY BUTTON /*------------------------------------------*/ .btn--tra-gray, .hover--tra-gray:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* BLUE BUTTON /*------------------------------------------*/ .btn--blue, .hover--blue:hover, .color--white .hover--blue:hover, .white-scroll .scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /*------------------------------------------*/ /* GREEN BUTTON /*------------------------------------------*/ .btn--green, .hover--green:hover, .color--white .hover--green:hover, .white-scroll .scroll .hover--green:hover { color: var(--white)!important;border-color: var(--green)!important; background-color: var(--green)!important; } .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /*------------------------------------------*/ /* INDIGO BUTTON /*------------------------------------------*/ .btn--indigo, .hover--indigo:hover, .color--white .hover--indigo:hover, .white-scroll .scroll .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .btn--tra-indigo, .hover--tra-indigo:hover, .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /*------------------------------------------*/ /* ORCHID BUTTON /*------------------------------------------*/ .btn--orchid, .hover--orchid:hover, .color--white .hover--orchid:hover, .white-scroll .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .btn--tra-orchid, .hover--tra-orchid:hover, .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /*------------------------------------------*/ /* PINK BUTTON /*------------------------------------------*/ .btn--pink, .hover--pink:hover, .color--white .hover--pink:hover, .white-scroll .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /*------------------------------------------*/ /* PURPLE BUTTON /*------------------------------------------*/ .btn--purple, .hover--purple:hover, .color--white .hover--purple:hover, .white-scroll .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /*------------------------------------------*/ /* RED BUTTON /*------------------------------------------*/ .btn--red, .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover { color: var(--white)!important;border-color: var(--red)!important; background-color: var(--red)!important; } .btn--tra-red, .hover--tra-red:hover, .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /*------------------------------------------*/ /* SKY BLUE BUTTON /*------------------------------------------*/ .btn--skyblue, .hover--skyblue:hover, .color--white .hover--skyblue:hover, .white-scroll .scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /*------------------------------------------*/ /* VIOLET RED BUTTON /*------------------------------------------*/ .btn--violet-red, .hover--violet-red:hover, .color--white .hover--violet-red:hover, .white-scroll .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .btn--tra-violet-red, .hover--tra-violet-red:hover, .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /*------------------------------------------*/ /* YELLOW BUTTON /*------------------------------------------*/ .btn--yellow, .hover--yellow:hover, .color--white .hover--yellow:hover, .white-scroll .scroll .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: var(--white); -webkit-box-shadow: none; box-shadow: none; } .btn--transparent:focus { background-color: transparent; border-color: transparent; } .btn--tra-black:focus, .btn--transparent:focus, .btn.btn--tra-gray:focus { color: var(--black); -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BADGE ICONS /*------------------------------------------*/ .stores-badge { display: inline-block; } .store { display: inline-block; text-align: center; margin-right: 12px; } .store:last-child { margin-right: 0; } .store img { width: auto; max-width: inherit; } .badge-img-xs .store img { max-height: 2.5rem; } .badge-img-sm .store img { max-height: 2.625rem; } .badge-img-md .store img { max-height: 2.875rem; } .badge-img-lg .store img { max-height: 3rem; } .badge-img-xl .store img { max-height: 3.25rem; } /*------------------------------------------*/ /* WATCH VIDEO LINK /*------------------------------------------*/ .watch-video { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; margin-top: 25px; } .btns-group .watch-video { display: inline-block; margin-top: 0!important; top: 22px; } /*------------------------------------------*/ /* Link Icon /*------------------------------------------*/ .watch-video-link { position: relative; text-align: center; float: left; width: 2.85rem; height: 2.85rem; color: var(--white); border: none; margin-right: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .watch-video-link:before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; bottom: -3px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .watch-video-link:hover:before { opacity: .75; left: -8px; right: -8px; top: -8px; bottom: -8px; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { font-size: 2rem; line-height: 2.85rem!important; margin-left: 5px; } /*------------------------------------------*/ /* Link Text /*------------------------------------------*/ .watch-video-txt { overflow: hidden; flex: 1; max-width: 100%; text-align: left!important; } p.video-txt-lg { font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 5px; } p.video-txt-sm { font-size: 0.925rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: var(--white); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn-xl { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .video-btn-lg { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-sm { width: 4.375rem; height: 4.375rem; margin-top: -2.1875rem; margin-left: -2.1875rem; } .video-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-sm [class^="flaticon-"]:after { font-size: 3.5rem; line-height: 4.375rem!important; margin-left: 5px; } .video-btn:hover .video-block-wrapper { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-lg:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } .video-btn.video-btn-md:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .video-btn.video-btn-sm:hover:before { opacity: .75; left: -0.75rem; right: -0.75rem; top: -0.75rem; bottom: -0.75rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } /* 12px */ .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } /* 15px */ .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } /* 20px */ .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } /* 25px */ .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } /* 30px */ .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } /* 35px */ .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } /* 40px */ .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } /* 45px */ .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } /* 50px */ .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } /* 55px */ .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } /* 60px */ .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } /* 65px */ .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } /* 70px */ .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } /* 75px */ .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } /* 80px */ .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } /* 85px */ .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } /* 90px */ .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } /* 95px */ .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } /* 100px */ .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } /* 105px */ .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } /* 110px */ .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } /* 115px */ .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } /* 120px */ .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /* 125px */ /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-55 .shape-ico svg { width: 125px; height: 125px; top: -42px; left: calc(50% - 66px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -48px; left: calc(50% - 75px); } .shape-ico.color--blue path { fill: #f4f9fc; } .shape-ico.color--indigo path { fill: #f6f4fd; } .shape-ico.color--orchid path { fill: rgba(218, 112, 214, .1); } .shape-ico.color--pink path { fill: rgba(252, 234, 239, .7); } .shape-ico.color--purple path { fill: #f6f4fd; } .shape-ico.color--skyblue path { fill: rgba(4, 170, 255, .09); } .shape-ico.color--violet-red path { fill: rgba(199, 62, 155, .08); } /*------------------------------------------*/ /* PNG ICONS SETTINGS /*------------------------------------------*/ .img-20 img { width: 20px; height: 20px; } .img-25 img { width: 25px; height: 25px; } .img-30 img { width: 30px; height: 30px; } .img-35 img { width: 35px; height: 35px; } .img-40 img { width: 40px; height: 40px; } .img-45 img { width: 45px; height: 45px; } .img-50 img { width: 50px; height: 50px; } .img-55 img { width: 55px; height: 55px; } .img-60 img { width: 60px; height: 60px; } .img-65 img { width: 65px; height: 65px; } .img-70 img { width: 70px; height: 70px; } .img-75 img { width: 75px; height: 75px; } .img-80 img { width: 80px; height: 80px; } .img-85 img { width: 85px; height: 85px; } .img-90 img { width: 90px; height: 90px; } .img-95 img { width: 95px; height: 95px; } .img-100 img { width: 100px; height: 100px; } .img-105 img { width: 105px; height: 105px; } .img-110 img { width: 110px; height: 110px; } .img-115 img { width: 115px; height: 115px; } .img-120 img { width: 120px; height: 120px; } .img-125 img { width: 125px; height: 125px; } .img-130 img { width: 130px; height: 130px; } .img-135 img { width: 135px; height: 135px; } .img-140 img { width: 140px; height: 140px; } .img-145 img { width: 145px; height: 145px; } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .5); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* SECTION ID /*------------------------------------------*/ .section-id { display: block; font-size: 0.85rem; line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 32px; } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title p { margin-top: 22px; margin-bottom: 0; } .section-title .btns-group { margin-top: 35px; } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages, .text-center .advantages { margin-top: 15px; } .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; } .advantages-links-divider { position: relative; top: 1px; transform: rotate(-90deg); } .advantages li p { display: inline-block; float: left; margin-bottom: 0; } .advantages.ico-15 li p span { position: relative; top: 2px; right: -1px; } .advantages.ico-15 [class*="flaticon-"]:before, .advantages.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .advantages li p a { font-weight: 400; text-decoration: underline; } .advantages li p a:hover { text-decoration: underline; } .white--color .advantages li p a:hover { color: var(--white); } /*------------------------------------------*/ /* COMPATABILITY /*------------------------------------------*/ .compatibility { display: inline-block; padding: 3px 20px; margin-top: 15px; margin-bottom: 0; } .compatibility span { position: relative; top: -1.5px; right: 2px; } .compatibility.ico-10 [class*="flaticon-"]:before, .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; } /*------------------------------------------*/ /* TOOLS LIST / PAYMENT METHODS /*------------------------------------------*/ .tools-list, .payment-methods { margin-top: 25px; } .tools-list p, .payment-methods p { font-weight: 400; margin-bottom: 12px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-right: 6px; } /*------------------------------------------*/ /* Payment Icons /*------------------------------------------*/ .payment-icons li { display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; padding-right: 5px; } .payment-icons li:last-child { padding-right: 0; } .payment-icons img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: var(--gray); border-left: 3px solid var(--green); font-style: italic; padding-left: 20px; margin-bottom: 16px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* Quote Author /*------------------------------------------*/ .quote-author { position: relative; display: inline-block; padding: 0 0 0 15px; text-align: left; top: 16px; } .quote-author h6 { margin-bottom: 1px; } .quote-author span { font-size: 0.95rem; } /*------------------------------------------*/ /* USER AVATARS /*------------------------------------------*/ .txt-block .users { margin-top: 22px; } .users img { width: auto; max-width: inherit; max-height: 50px; } .users p { font-size: 0.935rem; position: relative; top: 13px; left: 10px; display: inline-block; line-height: 1.4; margin-bottom: 0; } .users p span { display: block; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--white, .color--white a, .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white); } .color--black, .color--black a, .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); } .color--header, .color--header a, .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); } .color--gray, .color--gray a, .color--gray :is(h1, h2, h3, h4, h5, h6) { color: var(--gray); } .color--lightgray, .color--lightgray a, .color--lightgray :is(h1, h2, h3, h4, h5, h6) { color: var(--light-gray); } .color--blue, .color--blue a, .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); } .color--green, .color--green a, .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); } .color--indigo, .color--indigo a, .color--indigo :is(h1, h2, h3, h4, h5, h6) { color: var(--indigo); } .color--lilac, .color--lilac a, .color--lilac :is(h1, h2, h3, h4, h5, h6) { color: var(--lilac); } .color--orchid, .color--orchid a, .color--orchid :is(h1, h2, h3, h4, h5, h6) { color: var(--orchid); } .color--pink, .color--pink a, .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); } .color--purple, .color--purple a, .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); } .color--red, .color--red a, .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); } .color--skyblue, .color--skyblue a, .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); } .color--violet-red, .color--violet-red a, .color--violet-red :is(h1, h2, h3, h4, h5, h6) { color: var(--violet-red); } .color--yellow, .color--yellow a, .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-upcase { text-transform: uppercase } .w-200 { font-weight: 200; } .w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .w-800 { font-weight: 800; } .w-900 { font-weight: 900; } /*------------------------------------------*/ /* TEXT HIGHLIGHT /*------------------------------------------*/ .highlight { background: linear-gradient(to right, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1875)); } /* ========================================================================== 03. PRELOADER SPINNER ========================================================================== */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: #f5f5f5; } #loader { display: block; position: relative; top: 50%; transform: translateY(-50%); } .cssload-spinner { position: absolute; width: 68px; height: 68px; left: 50%; margin-left: -34px; margin-top: -34px; } .cssload-spinner:after, .cssload-spinner:before { position: absolute; content: ""; border: 4px solid var(--blue); width: 64px; height: 64px; } .theme--blue .cssload-spinner:after, .theme--blue .cssload-spinner:before { border-color: var(--blue); } .theme--green .cssload-spinner:after, .theme--green .cssload-spinner:before { border-color: var(--green); } .theme--indigo .cssload-spinner:after, .theme--indigo .cssload-spinner:before { border-color: var(--indigo); } .theme--orchid .cssload-spinner:after, .theme--orchid .cssload-spinner:before { border-color: var(--orchid); } .theme--pink .cssload-spinner:after, .theme--pink .cssload-spinner:before { border-color: var(--pink); } .theme--purple .cssload-spinner:after, .theme--purple .cssload-spinner:before { border-color: var(--purple); } .theme--red .cssload-spinner:after, .theme--red .cssload-spinner:before { border-color: var(--purple); } .theme--skyblue .cssload-spinner:after, .theme--skyblue .cssload-spinner:before { border-color: var(--sky-blue); } .theme--violet-red .cssload-spinner:after, .theme--violet-red .cssload-spinner:before { border-color: var(--violet-red); } .cssload-spinner:after { animation: cssload-spinner1 2.5s linear infinite; -o-animation: cssload-spinner1 2.5s linear infinite; -ms-animation: cssload-spinner1 2.5s linear infinite; -webkit-animation: cssload-spinner1 2.5s linear infinite; -moz-animation: cssload-spinner1 2.5s linear infinite; } .cssload-spinner:before { width: 88px; height: 88px; margin-left: -13.5px; margin-top: -13.5px; animation: cssload-spinner2 2.5s linear infinite; -o-animation: cssload-spinner2 2.5s linear infinite; -ms-animation: cssload-spinner2 2.5s linear infinite; -webkit-animation: cssload-spinner2 2.5s linear infinite; -moz-animation: cssload-spinner2 2.5s linear infinite; } @keyframes cssload-spinner1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes cssload-spinner1 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-spinner1 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-spinner1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-spinner1 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes cssload-spinner2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-o-keyframes cssload-spinner2 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } } @-ms-keyframes cssload-spinner2 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); } } @-webkit-keyframes cssload-spinner2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes cssload-spinner2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: var(--white)!important; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .dark-menu .wsmainfull { padding: 6px 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; display: block; font-size: 1rem; line-height: 50px; font-weight: 600; letter-spacing: 0; text-decoration: none; margin: 0 7px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 35px; width: 0; } /*------------------------------------------*/ /* HEADER LINK INFO /*------------------------------------------*/ span.sm-info { position: relative; display: inline-block; text-align: center; width: 20px; height: 20px; color: var(--white); font-size: 0.65rem; line-height: 19px; font-weight: 700; margin-left: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; } .nav-blue .sm-info { background-color: var(--blue); } .nav-green .sm-info { background-color: var(--green); } .nav-indigo .sm-info { background-color: var(--indigo); } .nav-orchid .sm-info { background-color: var(--orchid); } .nav-pink .sm-info { background-color: var(--pink); } .nav-purple .sm-info { background-color: var(--purple); } .nav-red .sm-info { background-color: var(--red); } .nav-skyblue .sm-info { background-color: var(--sky-blue); } .nav-violet-red .sm-info { background-color: var(--violet-red); } /*------------------------------------------*/ /* HEADER BUTTONS /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 1rem; line-height: 30px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 14px; padding: 6px 28px 8px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 4px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 25px; } .wsmenu > .wsmenu-list > li a.store.header-store { line-height: 1; margin-top: 13px; margin-left: 10px; margin-bottom: 0; padding: 0; } /*------------------------------------------*/ /* LANGUAGE SELECT /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { width: auto; min-width: 115px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.875rem; padding: 8px 11px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 8px 11px; } /*------------------------------------------*/ /* HEADER STORE BADGES /*------------------------------------------*/ .store.header-store img { max-height: 44px; } /*------------------------------------------*/ /* HEADER SOCIAL LINKS /*------------------------------------------*/ .header-socials { margin: 0; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .header-socials a { display: block; margin-left: 15px; } .navbar-light .header-socials a { color: #ddd; } .navbar-light .header-socials a:hover { color: var(--silver); } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-20 [class*="flaticon-"]:after { line-height: 70px!important; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 200px; top: 62px; padding: 12px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* HEADER SUBMENU SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 210px; position: absolute; left: 102%; top: 0; margin: 0; padding: 10px; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { position: absolute; top: 12px; right: 12px; } .sub-menu.ico-10 [class*="flaticon-"]:before, .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 62px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 33%; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--tra-white-smoke); color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 74%!important; left: 25%; padding: 20px 10px; } .wsmegamenu.w-75 .col-lg-3 { padding: 0 6px; } /*------------------------------------------*/ /* SUBMENU TITLE /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu .title, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title { color: var(--light-gray); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 15px 13px; } /*------------------------------------------*/ /* DARK HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--metal)!important; border: solid 1px var(--metal)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } .dark-menu .title, .black-scroll .scroll .title, .dark-menu .icons-menu-txt span, .black-scroll .scroll .icons-menu-txt span { color: var(--white)!important; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--smoke); } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: var(--ink); } .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--blue); } .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--green); } .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--indigo); } .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--orchid); } .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--pink); } .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--purple); } .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--red); } .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--sky-blue); } .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--violet-red); } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR WHITE SCROLL /*------------------------------------------*/ .tra-menu.white-scroll .wsmainfull.scroll, .white-menu.white-scroll .wsmainfull.scroll, .tra-menu.border-header.white-scroll .wsmainfull.scroll { padding: 0; border: none; background-color: rgba(255, 255, 255, .7)!important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--ink)!important; } /*------------------------------------------*/ /* NAVBAR BLACK SCROLL /*------------------------------------------*/ .tra-menu.black-scroll .wsmainfull.scroll, .dark-menu.black-scroll .wsmainfull.scroll { padding: 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: var(--silver)!important; } /*------------------------------------------*/ /* WHITE SCROLL BUTTONS /*------------------------------------------*/ .white-scroll .scroll .btn--tra-white { color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK SCROLL BUTTONS /*------------------------------------------*/ .black-scroll .scroll .btn--tra-black { color: var(--white)!important; border-color: var(--white)!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark .logo-white, .navbar-light .logo-black, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-dark.black-scroll .scroll .logo-black { display: none; } .tra-menu.navbar-light .scroll .logo-black, .tra-menu.navbar-dark.black-scroll .scroll .logo-white { display: block; } /* ========================================================================== 05. HERO ========================================================================== */ .hero-section .container { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO DIGITS /*------------------------------------------*/ .hero-digits { padding-right: 20px; } #hd-1-1, #hd-1-2 { display: inline-block; float: left; padding-right: 20px; } #hd-1-1 { width: 48%; } #hd-1-2 { width: 48%; } .hero-digits h2.statistic-number { font-size: 3.35rem; line-height: 1; letter-spacing: -1.5px; margin-bottom: 10px; } .hero-digits h2.statistic-number small { font-size: 2.25rem; margin-left: 5px; } .hero-digits .block-txt p.p-sm { margin-bottom: 0; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ #hero-1 { position: relative; z-index: 3; background-image: url(../images/hero-1.jpg); padding-top: 150px; margin-bottom: 80px; } .hero-1-txt { margin-top: -15px; } .hero-1-txt h2 { font-size: 3.45rem; font-weight: 600; } .hero-1-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-1-txt .os-version-ext { margin-top: 22px; } .hero-1-img { text-align: center; padding: 0 20px; margin-bottom: -80px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ #hero-2 { background-image: url(../images/hero-2.jpg); padding-top: 180px; padding-bottom: 130px; } .hero-2-txt h2 { font-size: 3.75rem; } .hero-2-txt p.p-xl { padding: 0 8%; margin-top: 22px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ #hero-3 { overflow: hidden; background-image: url(../images/hero-3.jpg); padding-top: 175px; } .theme--dark #hero-3 { background-image: url(../images/hero-3d.jpg); } .hero-3-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 70px; margin-bottom: 60px; } .hero-3-txt h2 { font-size: 3.75rem; } .hero-3-txt p.p-xl { font-size: 1.25rem; margin-top: 20px; margin-bottom: 32px; } .hero-3-txt .btn-txt { margin-top: 25px; } .hero-3-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ #hero-4 { overflow: hidden; background-image: url(../images/hero-4.jpg); padding-top: 170px; } .theme--dark #hero-4 { background-image: url(../images/hero-4d.jpg); } .hero-4-txt h2 { font-size: 3.5rem; } .hero-4-txt p.p-xl { padding: 0 2%; margin-top: 30px; margin-bottom: 30px; } .hero-4-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ #hero-5 { position: relative; z-index: 3; background-image: url(../images/hero-5.jpg); padding-top: 150px; margin-bottom: 60px; } #hero-5 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-5 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-5-txt { margin-top: -15px; padding-left: 5px; } .hero-5-txt h2 { font-size: 3.45rem; line-height: 1.3; font-weight: 600; } .hero-5-txt p.p-xl { padding-right: 2%; margin-top: 25px; margin-bottom: 35px; } .hero-5-img { text-align: center; padding-right: 30px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ #hero-6 { background-image: url(../images/hero-6.jpg); padding-top: 170px; } .theme--dark #hero-6 { background-image: url(../images/bg-dark.jpg); } #hero-6:after { position: absolute; content: ''; z-index: -1; width: 100%; height: 10%; bottom: 0; left: 0; background-color: var(--white); } .theme--dark #hero-6:after { background-color: var(--dark-theme-bg); } .hero-6-txt h2 { font-size: 3.65rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 25px; margin-bottom: 30px; } .hero-6-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-7 /*------------------------------------------*/ #hero-7 { overflow: hidden; position: relative; background-image: url(../images/hero-7.jpg); padding-top: 140px; padding-bottom: 40px; } #hero-7 .wave-shape-bottom { z-index: 6; } #hero-7 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-7 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-7-txt { margin-top: -30px; } .hero-7-txt h2 { font-size: 3.65rem; font-weight: 600; margin-bottom: 40px; } .hero-7-txt .os-version-ext { margin-top: 22px; } .hero-7-img { text-align: center; margin-bottom: -30%; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-8 { position: relative; background-image: url(../images/hero-8.jpg); padding-top: 160px; margin-bottom: 30px; } #hero-8 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-8 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-8-txt { margin-top: -30px; } .hero-8-txt h2 { font-size: 3.65rem; font-weight: 600; } .hero-8-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-8-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-8-img { position: relative; text-align: center; margin: 0 -100% -30px 0; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ #hero-9 { position: relative; background-image: url(../images/hero-9.jpg); padding-top: 170px; } .theme--dark #hero-9 { background-image: url(../images/hero-9d.jpg); } .hero-9-txt { margin-top: -30px; } .hero-9-txt h2 { font-size: 4rem; } .hero-9-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-9-img { text-align: center; padding-left: 15px; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ #hero-10 { background-image: url(../images/hero-10.jpg); padding-top: 170px; } .theme--dark #hero-10 { background-image: url(../images/hero-10d.jpg); } .hero-10-txt h2 { font-size: 3.5rem; } .hero-10-txt p.p-lg { padding: 0 2%; margin-top: 25px; margin-bottom: 35px; } .hero-10-txt p.btn-txt { margin-top: 40px; } #hero-10 .quick-form { margin: 35px 7% 0; } .hero-10-img { margin-top: 65px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ #hero-11 { background-image: linear-gradient(180deg, rgba(233, 224, 242, .8) 50%, rgba(233, 224, 242, .05) 100%); padding-top: 170px; } .theme--dark #hero-11 { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .hero-11-txt h2 { font-size: 3.35rem; } .hero-11-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } .hero-11-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-11-img { text-align: center; padding-left: 25px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ #hero-12 { overflow: hidden; background-image: url(../images/hero-12.jpg); padding-top: 180px; } .theme--dark #hero-12 { background-image: url(../images/hero-12d.jpg); } .hero-12-txt h2 { font-size: 3.65rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-12-txt .advantages { margin-top: 20px; } .hero-12-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-13 /*------------------------------------------*/ #hero-13 { background-image: url(../images/hero-13.jpg); padding-top: 90px; padding-bottom: 15px; margin-bottom: 60px; } #hero-13 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-13 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-13-txt { margin-top: -25px; } .hero-13-txt h2 { font-size: 3.25rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 25px; margin-bottom: 30px; } .hero-13-txt .quick-form { margin-top: 35px; margin-right: 4%; } .hero-13-img { text-align: center; padding-right: 35px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-14 /*------------------------------------------*/ #hero-14 { background-image: url(../images/hero-14.jpg); padding-top: 170px; padding-bottom: 130px; } .hero-14-txt h2 { font-size: 4.35rem; } .hero-14-txt p.p-xl { padding: 0 3%; margin-top: 30px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-15 /*------------------------------------------*/ #hero-15 { background-image: url(../images/hero-15.jpg); padding-top: 150px; margin-bottom: 100px; } .hero-15-txt { margin-top: -25px; padding-left: 20px; } .hero-15-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 105px; margin-bottom: 30px; } .hero-15-txt h2 { font-size: 3.25rem; } .hero-15-txt p.p-lg { padding-right: 2%; margin-top: 25px; margin-bottom: 25px; } .hero-15-img { text-align: center; padding-right: 20px; margin-bottom: -100px; } /*------------------------------------------*/ /* HERO-16 /*------------------------------------------*/ #hero-16 { overflow: hidden; padding-top: 180px; } .hero-16-txt h2 { font-size: 3.75rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-16-img { padding: 80px 60px 0; margin-top: 70px; } .hero-16-img img { margin-bottom: -30px; } /*------------------------------------------*/ /* HERO-17 /*------------------------------------------*/ #hero-17 { background-image: url(../images/hero-17.jpg); padding-top: 80px; } .theme--dark #hero-17 { background-image: url(../images/hero-17d.jpg); } .hero-17-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 90px; margin-bottom: 35px; } .hero-17-txt h2 { font-size: 4rem; letter-spacing: -0.5px; } .hero-17-txt p.p-md { margin-top: 20px; margin-bottom: 30px; } .hero-17-img { margin: 0 -30px 0 15px; } /*------------------------------------------*/ /* HERO-18 /*------------------------------------------*/ #hero-18 { background-image: url(../images/hero-18.jpg); padding-top: 100px; } .theme--dark #hero-18 { background-image: url(../images/hero-18d.jpg); } .hero-18-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 115px; margin-bottom: 35px; } .hero-18-txt h2 { font-size: 3.35rem; } .hero-18-txt p.p-xl { padding: 0 5%; margin-top: 35px; margin-bottom: 35px; } .hero-18-img { text-align: center; margin-top: 30px; } /*------------------------------------------*/ /* HERO QUICK FORM /*------------------------------------------*/ .hero-section .quick-form .input-group { border: none; } /*------------------------------------------*/ /* Hero Quick Form Input /*------------------------------------------*/ .hero-section .quick-form .form-control { height: 64px; background-color: var(--white); border: 2px solid var(--silver); color: #666; font-size: 1.125rem; font-weight: 400; padding: 0 20px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .hero-section .quick-form.form--shadow .form-control { border-color: transparent; -webkit-box-shadow: 0 5px 10px var(--tra-black); -moz-box-shadow: 0 5px 10px var(--tra-black); box-shadow: 0 5px 10px var(--tra-black); } .hero-section .quick-form.form-stroke .form-control { border-color: var(--black); } .hero-section .quick-form.form-half .form-control { height: 58px; font-size: 1.0625rem; } /*------------------------------------------*/ /* Hero Quick Form Placeholder /*------------------------------------------*/ .hero-section .quick-form .form-control::-moz-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Hero Quick Form Focus /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { background-color: var(--white); border-color: var(--black); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Hero Quick Form Button /*------------------------------------------*/ .hero-section .quick-form .btn { height: 64px; font-size: 1.0625rem; padding: 12px 45px; margin-left: 15px; } .hero-section .quick-form.form-half .btn { height: 58px; font-size: 1rem; padding: 13px 40px; margin-left: 12px; } /*------------------------------------------*/ /* Hero Quick Form Message /*------------------------------------------*/ .hero-section .quick-form-msg { width: 100%!important; display: block; margin: 20px 0 15px 5px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -15px 0; } .hero-section .quick-form-msg .loading { color: #3eb1ff; font-size: 1.05rem; line-height: 1; font-weight: 500; } .hero-section .text-center .quick-form-msg .loading { font-size: 1.125rem; } /* ========================================================================== 06. ABOUT ========================================================================== */ .about-1 { background-image: url(../images/about-1.jpg); margin-bottom: 80px; } .theme--dark .about-1 { background-image: url(../images/about-1d.jpg); } .about-2-title { margin-bottom: 25px; } .about-4-title { padding-right: 4%; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-1-txt h2 { font-size: 3.65rem; margin-bottom: 20px; } .about-1-txt h4 { line-height: 1.44; font-weight: 400; padding-right: 2%; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .about-1-img { margin-top: 60px; margin-bottom: -80px; } .about-3 .img-block.left-column { margin-right: 40px; } .about-3 .img-block.right-column { margin-left: 40px; } /* ========================================================================== 07. CAREERS ========================================================================== */ .jobs-category { padding: 0 50px 18px; margin-bottom: 30px; border: 1.5px solid transparent; } .jobs-category h4 { line-height: 1; padding-top: 40px; margin-bottom: 14px; } .career-item { position: relative; padding: 22px 0; } /*------------------------------------------*/ /* OPEN ROLE DESCRIPTION /*------------------------------------------*/ .position-data { margin-top: 3px; } .position-data li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .rb-divider { position: relative; top: 1.25px; transform: rotate(-90deg); margin-left: 2px; } .position-data.ico-15 [class*="flaticon-"]:before, .position-data.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .position-data li p { display: inline-block; float: left; margin-bottom: 0; } /*------------------------------------------*/ /* OPEN ROLE LINK /*------------------------------------------*/ .position-link { color: var(--header-color); position: absolute; top: 26px; right: 5px; transform: rotate(-45deg); } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* MORE CAREERS BUTTON /*------------------------------------------*/ .more-careers { text-align: center; margin-top: 60px; } .more-careers-holder { display: inline-block; margin: 0 auto; } .more-careers-txt { text-align: left!important; display: inline-block; float: left; } .more-careers-txt p { position: relative; top: 6px; margin-bottom: 0; } .more-careers-btn { display: inline-block; margin-left: 20px; } .more-careers-btn .btn { font-size: 0.875rem; padding: 0.6rem 1.35rem; } /* ========================================================================== 08. JOB POSITION =========================================================================== */ .job-position-title { padding-top: 170px; padding-bottom: 100px; margin-bottom: 30px; } .jb-txt { position: relative; } .jb-txt h2 { padding-right: 20%; } .job-position-title .position-data { margin-top: 20px; } .job-position-title .rb-divider { top: 3.5px; } .job-position-title .btn { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; padding: 0.7rem 1.4rem; } /*------------------------------------------*/ /* JOB POSITION TYPOGRAPHY /*------------------------------------------*/ .position-info h5 { margin-top: 60px; margin-bottom: 30px; } .position-info p span { color: var(--header-color); font-weight: 600; } .position-info .btn { margin-top: 35px; } /* ========================================================================== 09. FEATURES ========================================================================== */ .fbox-5-wrapper { padding: 90px 55px; } .features-2 .section-title p.p-xl { font-size: 1.25rem; margin-top: 0; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 40px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3 { margin-bottom: 50px; } /*------------------------------------------*/ /* FEATURE BOX /*------------------------------------------*/ .fbox-3 { border: 1px solid var(--silver); padding: 40px 20px 30px; } .fbox-3.bg--white { border: 1px solid transparent; padding: 40px 20px 30px; } .fbox-4 { padding: 60px; border: 1px solid transparent; } .fbox-4.fb-5, .fbox-4.fb-6 { padding: 70px 65px; } .ico-title .fbox-4.fb-5, .ico-title .fbox-4.fb-6 { padding: 45px 50px 35px; } .fbox-4.fb-7, .fbox-4.fb-8 { position: relative; overflow: hidden; padding: 70px 50px 0; } .ico-title .fbox-4.fb-7, .ico-title .fbox-4.fb-8 { padding: 45px 50px 0; } .fbox-4-txt { padding-left: 60px; } .fbox-4-txt h2, .fbox-4-txt h3 { margin-bottom: 20px; } .fbox-4-txt h3.h3-lg { font-size: 2.5625rem; } .fbox-4-txt .btn { margin-top: 25px; } .fbox-5 { padding: 80px 53px 70px; border: 1.5px solid transparent; } /*------------------------------------------*/ /* FEATURE BOX VECTOR ICON /*------------------------------------------*/ .fbox-ico, .fbox-ico.ico-rounded { margin-bottom: 15px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 20px; } .fbox-ico[class*="img-"], .fbox-ico.ico-rounded-md, .fbox-ico.ico-rounded-lg { margin-bottom: 20px; } /*------------------------------------------*/ /* FEATURE BOX IMAGE /*------------------------------------------*/ .fbox-img img { width: auto; max-width: inherit; } .fbox-img.h-175 img { max-height: 175px; } .fbox-img.h-180 img { max-height: 180px; } .fbox-6 .fbox-img { margin-bottom: 35px; } /*------------------------------------------*/ /* FBOX-4 IMAGE /*------------------------------------------*/ .fbox-4.fb-1 .fbox-4-img { margin: 40px 5% 0; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 45px 0 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 5% 40px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 40px 5% 0; } /*------------------------------------------*/ /* FBOX-5 IMAGE /*------------------------------------------*/ .fbox-5-img img { width: auto; max-width: inherit; max-height: 255px; margin-bottom: 25px; } /*------------------------------------------*/ /* FBOX-7 IMAGE /*------------------------------------------*/ .fbox-7 .fbox-img { -webkit-border-radius: 12px 12px 0 0; -moz-border-radius: 12px 12px 0 0; -o-border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; } .fbox-7 .fbox-img.h-175 { padding-top: 40px; margin: 0 8px 60px; } .fbox-7 .fbox-img.h-180 { padding-top: 42px; margin: 0 5px 60px; } .fbox-7 .fbox-img img { margin-bottom: -25px; } /*------------------------------------------*/ /* FBOX-2 /*------------------------------------------*/ .fbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .fbox-ico-wrap { position: relative; margin-right: 30px; } .fbox-2 .fbox-ico { margin-top: 2px; } .fbox-2 .fbox-txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* FBOX TYPOGRAPHY /*------------------------------------------*/ .fbox-2 h5, .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 20px; margin-bottom: 12px; } .fbox-4 h5 { margin-bottom: 16px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 24px; } .fbox-5 h5 { margin-bottom: 16px; } .fbox-3 p, .fbox-5 p, .fbox-wrapper p, .fbox-4 p.mb-0 { margin-bottom: 0; } .fbox-4 p { margin-bottom: 14px; } /*------------------------------------------*/ /* FEATURES DOWNLOAD BUTTON /*------------------------------------------*/ .features-2-download { margin-top: 80px; } .features-2-download p.p-sm { font-size: 0.9rem; margin-top: 20px; margin-bottom: 0; } /* ========================================================================== 10. CONTENT ========================================================================== */ .ct-07 { overflow: hidden; } .ct-08 { margin-bottom: 80px; } .ct-09 { margin-top: 80px; } .ct-06 .section-overlay { margin-bottom: 100px; } .bc-03 .section-title { margin-bottom: 50px; } .bc-04 { margin: 30px 0; } /*------------------------------------------*/ /* CONTENT BOX WRAPPER /*------------------------------------------*/ .bc-01-wrapper, .bc-02-wrapper { border: 1px solid transparent; } .bc-04-wrapper { border: 2.5px solid #d2d2eb; padding-left: 60px; } .bc-01 .section-overlay { padding: 80px 65px; } .bc-02 .section-overlay { padding: 65px 60px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 60px; } .bc-02.pt-30.bc-02-top { margin-top: 70px; } .bc-03 .section-overlay { padding: 80px 70px 0; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .txt-box { margin-bottom: 25px; } .bc-01 .txt-box { margin-bottom: 30px; } .txt-box:last-child, .bc-01 .txt-box:last-child { margin-bottom: 0; } .ct-07 .txt-block { margin-top: -30px; } .ct-08 .txt-block { margin-top: -30px; } .bc-01 .txt-block.left-column { padding-right: 20px; } .bc-01 .txt-block.right-column { padding-left: 20px; } .bc-04 .txt-block { padding-right: 30px; } /*------------------------------------------*/ /* CONTENT BOX /*------------------------------------------*/ .cbox-1, .cbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-4-wrapper { margin-top: 20px; } .cbox-5 { display: inline-block; width: 390px; min-width: 390px; padding: 18px 24px 16px 24px; } .cbox-5.cb-1 { margin: 12px 0 25px; } /*------------------------------------------*/ /* CONTENT BOX ICON /*------------------------------------------*/ .cbox-1 .ico-wrap { position: relative; margin-right: 1.625rem; } .cbox-1-ico { text-align: center; position: relative; width: 2.25rem; height: 2.25rem; font-size: 1.125rem; line-height: 2rem; font-weight: 600; border: 3px solid transparent; border-radius: 100%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .cbox-1-line { position: absolute; bottom: 14px; left: 50%; width: 2px; background-color: var(--smoke); height: calc(100% - 70px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .cbox-1:hover .cbox-1-ico { background-color: transparent; } .cbox-1:hover .cbox-1-ico.bg--black { color: var(--black); border-color: var(--black); } .cbox-1:hover .cbox-1-ico.bg--blue { color: var(--blue); border-color: var(--blue); } .cbox-1:hover .cbox-1-ico.bg--green { color: var(--green); border-color: var(--green); } .cbox-1:hover .cbox-1-ico.bg--indigo { color: var(--indigo); border-color: var(--indigo); } .cbox-1:hover .cbox-1-ico.bg--orchid { color: var(--orchid); border-color: var(--orchid); } .cbox-1:hover .cbox-1-ico.bg--pink { color: var(--pink); border-color: var(--pink); } .cbox-1:hover .cbox-1-ico.bg--purple { color: var(--purple); border-color: var(--purple); } .cbox-1:hover .cbox-1-ico.bg--red { color: var(--red); border-color: var(--red); } .cbox-1:hover .cbox-1-ico.bg--skyblue { color: var(--sky-blue); border-color: var(--sky-blue); } .cbox-1:hover .cbox-1-ico.bg--violet-red { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* CBOX #2 /*------------------------------------------*/ .cbox-2 .ico-wrap { position: relative; text-align: center; margin-top: 0; margin-right: 1.25rem; } .cbox-2 .cbox-2-ico { position: relative; top: 5px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3rem; } /*------------------------------------------*/ /* CBOX #5 /*------------------------------------------*/ .cbox-5-ico { display: inline-block!important; float: left; text-align: center; } /*------------------------------------------*/ /* CBOX #6 /*------------------------------------------*/ .cbox-6-wrapper { position: relative; } .cbox-6 { border: 1px solid var(--snow); padding: 40px; margin: 0 12%; z-index: 1; } .cbox-6 hr { margin-top: 35px; margin-bottom: 25px; } /*------------------------------------------*/ /* CBOX #6 TITLE /*------------------------------------------*/ .cbox-6-title p.p-md { line-height: 1; } .cbox-6 .statistic-number sup { font-size: 3rem; top: -10px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 15px; } .cbox-6-title p.p-md.ico-10 span { font-weight: 600; } /*------------------------------------------*/ /* CBOX #6 TEXT /*------------------------------------------*/ .cbox-6-txt h5 { margin-bottom: 10px; } /*------------------------------------------*/ /* CBOX #6 DATA /*------------------------------------------*/ .cbox-6-data { padding: 18px 25px; } .cbox-6-data h4 { letter-spacing: -0.5px; } .cbox-6-data p { margin: 0; } /*------------------------------------------*/ /* CBOX #6 SHAPE /*------------------------------------------*/ .cb-shape-1 { position: absolute; right: 30px; top: -35px; z-index: -1; } .cb-shape-2 { position: absolute; left: 30px; bottom: -25px; z-index: -1; } .cb-shape-1 img, .cb-shape-2 img { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------*/ /* CBOX #7 /*------------------------------------------*/ .cbox-7 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-7-txt { overflow: hidden; flex: 1; max-width: 100%; padding-left: 14px; } .cbox-7-ico { background-image: linear-gradient(0deg, #d4dbff 0%, #fff 100%); width: 28px; height: 28px; margin-top: 2px; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 26px; } .cbox-7-txt p { margin-bottom: 14px; } /*------------------------------------------*/ /* CONTENT BOX TEXT /*------------------------------------------*/ .cbox-1-txt, .cbox-2-txt { overflow: hidden; flex: 1; max-width: 100%; } .cbox-1-txt { margin-bottom: 30px; } .cbox-2-txt { margin-bottom: 40px; } .two-txt .cbox-2-txt { margin-bottom: 25px; } .cbox-1:last-child .cbox-1-txt, .cbox-2:last-child .cbox-2-txt { margin-bottom: 0; } .cbox-3-txt { margin-bottom: 40px; } .cbox-3:last-child .cbox-3-txt { margin-bottom: 0; } .cbox-5-txt { display: inline-block!important; padding-left: 18px; } /*------------------------------------------*/ /* CONTENT BOX TITLE /*------------------------------------------*/ .cbox-title { margin-bottom: 18px; } .cbox-title span { float: left; line-height: 1!important; margin-right: 20px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.35rem; } .cbox-title h5 { line-height: 2.1875rem!important; margin-bottom: 0!important; } .box-title { margin-bottom: 14px; } .box-title span { position: relative; top: 10px; right: 4px; } .box-title h6 { display: inline-block; margin-bottom: 0; } /*------------------------------------------*/ /* CONTENT BOX TYPOGRAPHY /*------------------------------------------*/ .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 15px!important; } .cbox-5-txt h6 { margin-bottom: 2px; } .bc-02 .txt-block h5 { margin-bottom: 25px; } .cbox-1-txt p, .cbox-2-txt p, .cbox-3-txt p, .cbox-5-txt p, .cbox-4 p { margin-bottom: 0; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h3, .txt-block h2 { margin-bottom: 25px; } .txt-block h5 { margin-bottom: 20px; } h5.h5-title { margin: 20px 0; } .txt-block-tra-link { margin-top: 20px; } .txt-block .btn { margin-top: 30px; } .txt-block .btn.btn--transparent { margin-top: 0; } .txt-block .stores-badge { margin-top: 30px; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion-1 .accordion-item { background-color: transparent; padding: 22px 0 26px; border: none; border-bottom: 1.5px solid var(--smoke); border-radius: 0 0; } .txt-block .accordion-thumb { margin: 0; padding: 0; cursor: pointer; position: relative; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 1px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .txt-block .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } .txt-block .accordion-1 .accordion-panel { color: var(--gray); margin: 0; padding: 0 0 0 5px; display: none; } .txt-block .accordion-1 .accordion-thumb h5 { color: var(--header-color); line-height: 1; padding-left: 5px; margin-bottom: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 24px; } /*------------------------------------------*/ /* TEXT BLOCK TABS /*------------------------------------------*/ #tabs-1 .tab-content { display: none; } #tabs-1 .tab-content.current { display: inherit; } .tabs-1 li { cursor: pointer; background-color: transparent; border: none; margin-bottom: 8px; padding: 25px 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tabs-1 li:last-child { margin-bottom: 0; } .tab-link h5, .tab-link p { color: #858585; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tab-link p { margin: 10px 0 0; } /*------------------------------------------*/ /* TAB LINK HOVER /*------------------------------------------*/ .tabs-1 li:hover { background-color: #f9f9f9; } /*------------------------------------------*/ /* TAB LINK CURRENT /*------------------------------------------*/ #tabs-1 .tabs-1 li.current, #tabs-1 .tabs-1 li.current:hover { background-color: #f3f3f5; } #tabs-1 .tabs-1 li.current { cursor: auto; } #tabs-1 .tabs-1 li:hover h5, #tabs-1 .tabs-1 li.current h5 { color: var(--header-color); } #tabs-1 .tabs-1 li:hover p, #tabs-1 .tabs-1 li.current p { color: var(--gray); } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 25px; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 25px; } .ct-03 .img-block img { max-width: none; display: inline-block; margin-left: 30px; } .ct-04 .img-block img { max-width: none; margin-left: -100%; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -100px; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -80px; } .ct-09 .img-block { margin-top: -80px; } .img-block-txt, .img-block-btn { text-align: center; margin-top: 45px; } .img-block-hidden .video-btn { top: calc(50% - 30px); } .bc-3-img .video-btn { top: calc(50% - 70px); } .bc-2-img.right-column { margin-left: 20px; } .bc-2-img.left-column { margin-right: 20px; } .bc-3-img { margin-bottom: -200px; } .bc-4-img { transform: rotate(3deg); margin: -20px 0; } /* ========================================================================== 11. STATISTIC =========================================================================== */ .statistic-1-wrapper .statistic-block-digit { width: 36%; display: inline-block!important; float: left; } .statistic-1-wrapper .statistic-block-txt { width: 64%; display: inline-block!important; padding-left: 16px; } #sb-3-1, #sb-3-2 { width: 48%; display: inline-block; float: left; } .statistic-4-wrapper .statistic-block { padding: 10px 40px; } #sb-4-1, #sb-4-2 { border-right: 1px solid var(--tra-smoke); } /*------------------------------------------*/ /* STATISTIC BLOCK ICON /*------------------------------------------*/ .statistic-ico { margin-bottom: 15px; } .statistic-block .txt-block-rating { margin-bottom: -3px; } /*------------------------------------------*/ /* STATISTIC BLOCK NUMBER /*------------------------------------------*/ h3.statistic-number, h2.statistic-number { line-height: 1; font-weight: 700; letter-spacing: -1px; margin-bottom: 0; } #sb-2-2 h2.statistic-number { letter-spacing: -2px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 15px; } /*------------------------------------------*/ /* STATISTIC BLOCK TYPOGRAPHY /*------------------------------------------*/ .statistic-2-wrapper h2 { margin-bottom: 15px; } .statistic-2-wrapper .txt-block h4, .statistic-2-wrapper .txt-block h3 { line-height: 1.35; } .statistic-4-wrapper h5 { margin-top: 25px; margin-bottom: 15px; } .statistic-1-wrapper p { position: relative; line-height: 1.35; top: 4px; margin-bottom: 0; } .txt-block-stat p, .statistic-block-txt p, .statistic-2-wrapper p, .statistic-4-wrapper p { margin-bottom: 0; } /* ========================================================================== 12. RATING =========================================================================== */ .rating-1-wrapper.text-center { padding: 0 16%; } .rating-2-wrapper.text-center { padding: 0 13%; } .rating-title { text-align: center; } .rating-title h6, .rating-title h5 { margin-bottom: 0; } /*------------------------------------------*/ /* RATING BOX LOGO /*------------------------------------------*/ .rbox-1-img { margin-bottom: 15px; } .rbox-1-img img { width: auto; max-width: inherit; max-height: 35px; } .rbox-2-img img { width: auto; max-width: inherit; max-height: 80px; } #rb-2-2 .rbox-2-img img { max-height: 145px; } /*------------------------------------------*/ /* RATING BOX TYPOGRAPHY /*------------------------------------------*/ .rbox-1 .star-rating { display: inline-block; font-size: 1rem; line-height: 15px; font-weight: 500; vertical-align: inherit; background-color: var(--white); padding: 5px 18px; } .rbox-1 .star-rating span { position: relative; color: #ffb30c; top: -1px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 0.9rem; } .rbox-1 .star-rating { font-size: 0.86rem; line-height: 1; } .rbox-2 p { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; font-weight: 500; margin-top: 15px; margin-bottom: 0; } .rbox-2 p span { font-weight: 700; } /* ========================================================================== 13. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper { padding: 0 10px; } .reviews-3-wrapper:after { position: absolute; content: ''; z-index: -1; width: 86%; height: 85%; top: 8%; left: 7%; background-color: var(--white-smoke); } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { position: relative; border: 1.5px solid transparent; padding: 35px; margin: 0 12px 30px; } .review-1.no-title { padding: 50px 35px 35px; } .review-2 { padding: 0 30px; margin-bottom: 30px; } .review-3 { position: relative; padding: 45px 40px 35px; } #rw-3-1, #rw-3-2 { margin-bottom: 20px; } .review-item { position: relative; width: 33.33%; padding: 0 12px; margin-bottom: 24px; } .review-4 { position: relative; padding: 35px 28px; border: 1px solid transparent; } /*------------------------------------------*/ /* TESTIMONIAL ICON /*------------------------------------------*/ .review-ico.ico-45 { position: absolute; top: 15px; right: 25px; opacity: .12; } .review-ico.ico-60 { position: absolute; top: 15px; left: 25px; opacity: .12; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-1-txt h6.h6-md, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg, .review-4-txt h6.h6-lg { line-height: 1.4; padding-right: 5%; margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.225rem; line-height: 1.4; padding-right: 5%; margin-bottom: 12px; } .review-1.text-center h6.h6-md, .review-1.text-center h6.h6-lg { padding-right: 0; } .review-2-txt h6.h6-lg { margin-bottom: 14px; } .review-1-txt p, .review-2-txt p, .review-3-txt p, .review-4-txt p { margin-bottom: 15px; } .review-4-txt p.mb-0 { margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-rating.ico-10 { margin-bottom: 5px; } .review-author .review-rating.ico-10 { margin-bottom: 2px; } .review-rating.ico-15 { margin-bottom: 8px; } .review-rating.ico-15.mb-15 { margin-bottom: 12px; } .review-rating.ico-10 [class*="flaticon-"]:before, .review-rating.ico-10 [class*="flaticon-"]:after { font-size: 0.935rem; } .review-rating.ico-15 [class*="flaticon-"]:before, .review-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /*------------------------------------------*/ /* TESTIMONIAL DATA /*------------------------------------------*/ .author-data { margin-top: 20px; } .author-data.mt-25 { margin-top: 25px; } .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } /*------------------------------------------*/ /* TESTIMONIAL AVATAR /*------------------------------------------*/ .review-avatar { margin: 0 auto; float: left; } .review-avatar img { width: 46px; height: 46px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-3 .review-avatar img { width: 54px; height: 54px; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .author-data .review-author { position: relative; display: inline-block; text-align: left; padding: 0 0 0 14px; } .review-author.mt-15 { margin-top: 16px; } .review-3 .review-author { margin-top: 5px; } .review-author h6 { font-size: 0.975rem; line-height: 1; margin-bottom: 9px; } .review-author.mt-15 h6 { margin-bottom: 0; } .review-author h6 span { color: var(--gray); font-size: 0.95rem; font-weight: 400; } .review-author p { font-size: 0.925rem; line-height: 1; font-weight: 300; margin-bottom: 0; } .review-author p a { font-weight: 400; } /*------------------------------------------*/ /* TESTIMONIAL BUTTON /*------------------------------------------*/ .reviews-btn { text-align: center; margin-top: 65px; } /*------------------------------------------*/ /* TESTIMONIAL CAROUSEL DOTS /*------------------------------------------*/ .reviews-section button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { margin: 0 7px; } .owl-dots button:focus { outline: none; text-decoration: none; } /* ========================================================================== 14. TEAM =========================================================================== */ .team-member { margin-bottom: 50px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; overflow: hidden; text-align: center; margin-bottom: 30px; } /*------------------------------------------*/ /* PHOTO HOVER ZOOM /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: .45; -moz-opacity: .45; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data { padding-left: 8px; } .team-member-data h6 { margin-bottom: 8px; } .team-member-data p { font-size: 0.975rem; line-height: 1; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } /* ========================================================================== 15. PRICING =========================================================================== */ .pricing-3-wrapper { padding: 0 4%; } .p-table { border: 1.5px solid transparent; margin-bottom: 40px; } .p-table.theme--border { border: 3px solid var(--theme-color); } .p-table.gray--border { border: 3px solid var(--tra-black); } .p-table.blue--border { border: 3px solid var(--blue); } .p-table.green--border { border: 3px solid var(--green); } .p-table.indigo--border { border: 3px solid var(--indigo); } .p-table.orchid--border { border: 3px solid var(--orchid); } .p-table.pink--border { border: 3px solid var(--pink); } .p-table.purple--border { border: 3px solid var(--purple); } .p-table.red--border { border: 3px solid var(--red); } .p-table.skyblue--border { border: 3px solid var(--sky-blue); } .p-table.violet-red--border { border: 3px solid var(--violet-red); } .pricing-1-table { padding: 45px 35px; } .pricing-2-table, .pricing-3-table { padding: 30px 40px; } .pricing-2-table.bg--white, .pricing-3-table.bg--white { border: 1px solid #ddd; -webkit-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); -moz-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); } #pt-3-1 { margin: 0 10px 40px 50px; } #pt-3-2 { margin: 0 50px 40px 10px; } /*------------------------------------------*/ /* TABLE HEADER /*------------------------------------------*/ .pricing-table-header { position: relative; } .pricing-table-header h5 { margin-bottom: 30px; } /*------------------------------------------*/ /* PRICING TABLE DISCOUNT /*------------------------------------------*/ .pricing-discount { position: absolute; top: -2px; right: -5px; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.915rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* PRICE /*------------------------------------------*/ .price span { color: var(--header-color); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -2px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.5rem; } /*------------------------------------------*/ /* DOLLAR SIGN /*------------------------------------------*/ .price sup { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-size: 2.05rem; font-weight: 600; top: -5px; right: 2px; letter-spacing: -1px; } /*------------------------------------------*/ /* Validity /*------------------------------------------*/ .price sup.validity { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 400; top: -2px; left: 0; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.65rem; } /*------------------------------------------*/ /* Text /*------------------------------------------*/ .price p { margin-top: 20px; margin-bottom: 20px; } .pricing-section .btn-txt a { text-decoration: underline; } /*------------------------------------------*/ /* PRICING FEATURES /*------------------------------------------*/ .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 20px; } .pricing-features li { padding: 11px 8px; } .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 9px 8px; } .pricing-features li p { line-height: 1; font-weight: 400; margin-bottom: 0; } .pricing-features li p span { position: relative; top: -2px; right: 5px; } .pricing-features.ico-10 li p span { top: 0; right: 4px; } .pricing-features.ico--blue span { color: var(--blue); } .pricing-features.ico--green span { color: var(--green); } .pricing-features.ico--indigo span { color: var(--indigo); } .pricing-features.ico--orchid span { color: var(--orchid); } .pricing-features.ico--pink span { color: var(--pink); } .pricing-features.ico--purple span { color: var(--purple); } .pricing-features.ico--red span { color: var(--red); } .pricing-features.ico--skyblue span { color: var(--sky-blue); } .pricing-features.ico--violet-red span { color: var(--violet-red); } .pricing-features.ico-5 [class*="flaticon-"]:before, .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; } .pricing-features li.disabled-option p, .pricing-features li.disabled-option span { color: var(--disable)!important; } /*------------------------------------------*/ /* PRICING TABLE BUTTON /*------------------------------------------*/ .pt-btn { display: block; width: 100%; margin-top: 25px; } .p-table p.btn-txt { margin: 14px 0 0 0; } /*------------------------------------------*/ /* PRICING TOGGLE BUTTON /*------------------------------------------*/ .ext-toggle-btn { text-align: center; } .toggle-btn.inn-toggle-btn { position: absolute; } /*------------------------------------------*/ /* TOGGLE BUTTON TYPOGRAPHY /*------------------------------------------*/ .toggler-txt { font-size: 1.15rem; font-weight: 500; line-height: 36px; } .toggle-btn p { margin-top: 12px; letter-spacing: -0.25px; margin-bottom: 0; } /*------------------------------------------*/ /* TOGGLE BUTTON SWITCHER /*------------------------------------------*/ .switch-wrap { position: relative; display: inline-block; vertical-align: middle; min-width: 60px; height: 36px; margin: 0 8px; } .switcher { display: block; cursor: pointer; color: var(--white); font-size: 0.925rem; font-weight: 500; height: 36px; padding: 0 20px 0 40px; position: relative; border-radius: 36px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .theme--blue .switcher { background-color: var(--blue); } .theme--green .switcher { background-color: var(--green); } .theme--indigo .switcher { background-color: var(--indigo);} .theme--orchid .switcher { background-color: var(--orchid); } .theme--pink .switcher { background-color: var(--pink); } .theme--purple .switcher { background-color: var(--purple); } .theme--red .switcher { background-color: var(--red); } .theme--skyblue .switcher { background-color: var(--sky-blue); } .theme--violet-red .switcher { background-color: var(--violet-red); } .switcher .show-annual, .switcher .show-monthly { line-height: 36px; } .switcher .show-monthly { display: block; } .switcher .show-annual { display: none; } .switcher:before { position: absolute; left: 5px; bottom: 4px; content: " "; background-color: var(--white); width: 28px; height: 28px; border-radius: 50%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .switch-wrap input { display: none; } .switch-wrap input:checked + .switcher { padding: 0 40px 0 20px; } .switch-wrap input:checked + .switcher:before { left: auto; right: 4px; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .switch-wrap input:checked + .switcher .show-annual { display: block; } .switch-wrap input:checked + .switcher .show-monthly { display: none; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice { text-align: center; margin-top: 20px; } .pricing-notice p { padding: 0 5%; margin-bottom: 0; } .pricing-notice p span { font-weight: 600; } /*------------------------------------------*/ /* COMPARE PRICING TABLE /*------------------------------------------*/ .table>:not(caption)>*>* { padding: 17px 0; border: none!important; background-color: transparent!important; } .comp-table .pricing-header { max-width: 700px; } .comp-table .table thead tr, .comp-table .table tbody tr { border-bottom: 1px solid var(--silver)!important; } .comp-table .table tbody tr.table-last-tr { border-bottom: none!important; } .comp-table .table-responsive thead th { font-size: 1.0625rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody th { font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody td { position: relative; font-size: 0.95rem; line-height: inherit; top: 1px; } .comp-table .table-responsive tbody td span { position: relative; top: 1px; } .table>:not(caption)>*>* { color: var(--header-color); } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .comp-table .disabled-option { color: var(--light-gray); } .comp-table .color--blue { color: var(--blue); } .comp-table .color--green { color: var(--green); } .comp-table .color--indigo { color: var(--indigo); } .comp-table .color--orchid { color: var(--orchid); } .comp-table .color--purple { color: var(--purple); } .comp-table .color--red { color: var(--red); } .comp-table .color--sky { color: var(--sky); } .comp-table .color--skyblue { color: var(--sky-blue); } .comp-table .color--violet-red { color: var(--violet-red); } /*------------------------------------------*/ /* PRICING COMPARE PAYMENT /*------------------------------------------*/ .comp-table-payment h6 { margin-bottom: 16px; } .comp-table-payment p { margin-bottom: 0; } /* ========================================================================== 16. INTEGRATIONS =========================================================================== */ .int-1-wrapper { padding: 80px 70px; } .int-2-wrapper { padding: 0 3%; } .integrations-3 { margin-bottom: -22px; } /*------------------------------------------*/ /* FILTER BUTTONS /*------------------------------------------*/ .filter-btns button { background-color: transparent; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1.0625rem; line-height: 1; font-weight: 600; margin: 0 14px; padding: 0.5rem 0.1rem; border: none; cursor: pointer; border-bottom: 3px solid transparent; outline: 0px none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* Filter Button Active /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--blue); cursor: default; border-color: var(--blue); outline: 0px none; } .theme--blue .filter-btns button.is-checked { color: var(--blue); border-color: var(--blue); } .theme--green .filter-btns button.is-checked { color: var(--green); border-color: var(--green); } .theme--indigo .filter-btns button.is-checked { color: var(--indigo); border-color: var(--indigo); } .theme--orchid .filter-btns button.is-checked { color: var(--orchid); border-color: var(--orchid); } .theme--pink .filter-btns button.is-checked { color: var(--pink); border-color: var(--pink); } .theme--purple .filter-btns button.is-checked { color: var(--purple); border-color: var(--purple); } .theme--red .filter-btns button.is-checked { color: var(--red); border-color: var(--red); } .theme--skyblue .filter-btns button.is-checked { color: var(--sky-blue); border-color: var(--sky-blue); } .theme--violet-red .filter-btns button.is-checked { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* FILTER ITEM /*------------------------------------------*/ .integrations-3 .filter-item { position: relative; width: 33.33%; padding: 0 10px; margin-bottom: 22px; } /*------------------------------------------*/ /* INTEGRATION TOOL /*------------------------------------------*/ .int_tool-1 { display: block; margin-bottom: 40px; } .int_tool-2 { text-align: center; vertical-align: center; background-color: var(--white); border: 1px solid var(--silver); padding: 25px 20px; margin-bottom: 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .int_tool-3 { background-color: var(--white); padding: 20px 26px 22px; border: 1px solid var(--silver); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* INTEGRATION TOOL LOGO /*------------------------------------------*/ .int_tool-1 .tool_logo { border: 1.5px solid transparent; padding: 35px 25px; margin-bottom: 30px; } .int_tool-1 img { width: 65px; height: 65px; } .int_tool-2 img { width: 60px; height: 60px; } .int_tool-3 img { width: 40px; height: 40px; } /*------------------------------------------*/ /* INTEGRATION TOOL TEXT /*------------------------------------------*/ .tool_txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* INTEGRATION TOOL TYPOGRAPHY /*------------------------------------------*/ .tool_txt h6 { font-size: 1.1875rem; margin-top: 2px; } .tool_logo h6 { position: relative; display: inline-block; line-height: 40px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { line-height: 1; margin-bottom: 0; } .int_tool-2 h6 { font-size: 0.925rem; line-height: 1; margin-top: 18px; } .tool_txt p { margin-top: 3px; margin-bottom: 0; } .tool_description p { font-size: 0.95rem; margin-top: 14px; margin-bottom: 0; } /*------------------------------------------*/ /* INTEGRATION TOOL HOVER /*------------------------------------------*/ .int_tool-2:hover, .int_tool-3:hover { border-color: transparent; -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } /*------------------------------------------*/ /* INTEGRATION MORE BUTTON /*------------------------------------------*/ .integrations-1 .more-btn { margin-top: 15px; } /* ========================================================================== 17. MORE APPS =========================================================================== */ .apps-1-wrapper { padding: 0 5%; } .app-box { display: block; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 50px; } /*------------------------------------------*/ /* MORE APPS TYPOGRAPHY /*------------------------------------------*/ .app-box h6, .app-box h5 { line-height: 1; margin-top: 30px; margin-bottom: 12px; } .app-box p.app-cat { color: var(--gray); line-height: 1; margin-bottom: 0; } .app-logo-img { padding: 0 10%; } /* ========================================================================== 18. BRANDS =========================================================================== */ /*------------------------------------------*/ /* BRANDS SECTION TITLE /*------------------------------------------*/ .brands-title { text-align: center; } .brands-title h6, .brands-title h5 { margin-bottom: 50px; } .brands-title p { margin-bottom: 55px; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brand-logo { overflow: hidden; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .brands-carousel-5 .brand-logo { padding: 0 25px; } .brands-carousel-6 .brand-logo { padding: 0 16px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0 5px; } .brands-section .more-btn { text-align: center; margin-top: 35px; } .brands-section .owl-dots { display: none; } /* ========================================================================== 19.CHANGELOG =========================================================================== */ .version-release { margin-bottom: 80px; } .version-release:last-child { margin-bottom: 0; } .release-data { padding-bottom: 30px; border-bottom: 1px dashed var(--silver); margin-bottom: 30px; } span.version-data { display: block; color: var(--header-color); font-size: 1.5rem; line-height: 1; font-weight: 600; margin-bottom: 15px; } span.release-date { display: block; color: var(--gray); font-size: 0.975rem; line-height: 1; margin-bottom: 0; } span.release-date span { color: var(--header-color); font-weight: 500; } .release-highlights h6 { margin-bottom: 16px; } .release-highlights .simple-list p { margin-bottom: 2px; } .release-highlights p b { color: var(--header-color); } .release-preview { margin-bottom: 30px; } /* ========================================================================== 20.DOWNLOAD =========================================================================== */ .download-item { display: block; text-align: center; padding: 45px 40px 35px; border: 1.5px solid transparent; } .download-item img { width: auto; max-width: inherit; max-height: 64px; margin-bottom: 25px; } .download-item h6 { line-height: 1; } .download-item p { font-size: 0.975rem; margin: 6px 0 0; } /* ========================================================================== 21. FAQS =========================================================================== */ /*------------------------------------------*/ /* FAQs-3 TITLE /*------------------------------------------*/ .faq-3-title { margin-top: 20px; } .faq-3-title p { font-size: 1.0725rem; padding-right: 3%; margin-top: 18px; margin-bottom: 28px; } /*------------------------------------------*/ /* FAQs QUESTION /*------------------------------------------*/ .faqs-2 .question { margin-bottom: 30px; } .faqs-2-questions .left-column { padding-right: 15px; } .faqs-2-questions .right-column { padding-left: 15px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .faqs-1-questions h4 { margin-top: 80px; margin-bottom: 25px; } .faqs-2 .question h6, .faqs-2 .question h5 { line-height: 1.5; padding-right: 5%; margin-bottom: 15px; } .faqs-3-question h5 { line-height: 1.5; margin-bottom: 20px; } .faqs-1 .accordion-item p, .faqs-3 .accordion-item p { color: var(--gray); } /*------------------------------------------*/ /* FAQS ACCORDION /*------------------------------------------*/ .faqs-section .accordion-item { background-color: transparent!important; border: none; border-bottom: 1px solid var(--silver); } .faqs-3.faqs-section .accordion-item { border-bottom: 1px solid var(--silver); } .faqs-section .accordion-item.acc-last-item, .faqs-3.faqs-section .accordion-item.acc-last-item { border-bottom: none; } /*------------------------------------------*/ /* Question /*------------------------------------------*/ .faqs-section .accordion-thumb { margin: 0; padding: 25px 0; cursor: pointer; position: relative; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 22px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .faqs-section .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } /*------------------------------------------*/ /* Answer /*------------------------------------------*/ .faqs-section .accordion-panel { margin: 0; padding: 0 0 15px 0; display: none; } .faqs-section .accordion-thumb h5 { line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* MORE QUESTIONS BUTTON /*------------------------------------------*/ .more-questions { text-align: center; margin-top: 80px; } .faqs-2 .more-questions { margin-top: 50px; } .more-questions-holder { display: inline-block; margin: 0 auto; } .more-questions-txt { text-align: left!important; display: inline-block; float: left; } .more-questions-txt h6 { margin-bottom: 3px; } .more-questions-txt p { margin-bottom: 0; } .more-questions-btn { display: inline-block; margin-left: 30px; } /* ========================================================================== 22. BANNER =========================================================================== */ .banner-1-wrapper { overflow: hidden; padding: 90px 75px 95px; } .banner-2-wrapper { position: relative; overflow: hidden; text-align: center; } .banner-2-wrapper .banner-overlay { padding: 85px 70px 95px; } .banner-4-wrapper { overflow: hidden; padding: 55px 60px; border: 1.5px solid transparent; } .banner-5 { overflow: hidden; padding-top: 50px; } .banner-5-wrapper .banner-overlay { padding: 0 75px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-section .section-id { font-weight: 600; padding-top: 10px; margin-bottom: 30px; } .banner-2-txt h2 { padding: 0 4%; } .banner-4-txt h4.h4-md { line-height: 1.35; padding-right: 3%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { padding-right: 10%; margin: 22px 0 28px; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 2%; margin: 20px 0 28px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 22px; margin-bottom: 0; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } /*------------------------------------------*/ /* BANNER BUTTON /*------------------------------------------*/ .banner-4-btn { position: relative; display: inline-block; margin: 0 auto; top: 10px; } .banner-4-btn p { margin: 12px 0 0; } .banner-section p.btn-txt { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER IMAGE /*------------------------------------------*/ .banner-5-img.right-column { margin-top: -40px; padding-left: 25px; } .banner-5-img.left-column { margin-top: -40px; padding-right: 25px; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .banner-qr-code { position: absolute; bottom: 0; right: 55px; max-width: 110px; text-align: center; background: var(--white); padding: 14px 10px 10px; border-radius: 12px 12px 0 0; } .banner-qr-code img { padding: 0 4%; } .banner-qr-code p { font-size: 0.8rem; line-height: 1.35; margin: 10px 0 0; } /* ========================================================================== 23. BLOG =========================================================================== */ .blog-1 .blog-post { margin-bottom: 40px; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { overflow: hidden; text-align: center; } /*------------------------------------------*/ /* BLOG POST TEXT /*------------------------------------------*/ .blog-post-txt { margin-top: 35px; padding-left: 5px; padding-right: 5px; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .post-tag { display: block; font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; } .blog-post-txt h6, .blog-post-txt h5 { line-height: 1.35; margin-bottom: 10px; } .blog-post-txt h4 { line-height: 1.35; margin-bottom: 20px; } .blog-post-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* BLOG POST META /*------------------------------------------*/ .blog-post-meta { margin-top: 18px; margin-bottom: 0; } .wide-post .blog-post-meta { margin-top: 25px; margin-bottom: 0; } .post-meta-list li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .post-meta-list p { line-height: 1; margin-bottom: 0; } .meta-list-divider { position: relative; top: 0px; transform: rotate(-90deg); padding: 0 1px; } /* ========================================================================== 24. BLOG LISTING =========================================================================== */ #blog-page .blog-post { margin-bottom: 60px; } /*------------------------------------------*/ /* WIDE BLOG POSTS /*------------------------------------------*/ #blog-page .blog-post.wide-post { margin-bottom: 60px; } .wide-post .blog-post-img { margin-right: 15px; } .wide-post .blog-post-txt { margin-top: 0; margin-left: 15px; } /*------------------------------------------*/ /* BLOG POSTS CATEGORY /*------------------------------------------*/ .posts-category { margin-top: 40px; margin-bottom: 50px; } .posts-category h4 { line-height: 1; margin-bottom: 0; } .posts-category span { position: relative; top: 1px; } /* ========================================================================== 25. SINGLE BLOG POST =========================================================================== */ .blog-post-preview { padding: 0 3%; margin-bottom: 50px; } /*------------------------------------------*/ /* Single Post Title /*------------------------------------------*/ .single-post-title { padding: 0 10% 0 8%; margin-bottom: 50px; } .single-post-title .blog-post-meta { margin-bottom: 25px; } .single-post-title h2 { margin-bottom: 25px; } /*------------------------------------------*/ /* Single Post Text /*------------------------------------------*/ .single-post-txt { padding: 0 8%; } .single-post-txt h6 { margin-bottom: 16px; } .single-post-txt h5.h5-xl { margin-top: 60px; margin-bottom: 25px; } .single-post-txt h5 { margin-top: 30px; margin-bottom: 25px; } .single-post-txt p span { color: var(--black); font-weight: 600; } .single-post-txt p a { color: var(--theme-color); font-weight: 600; text-decoration: underline; } .single-post-txt p a:hover { color: var(--black); } /*------------------------------------------*/ /* Single Post Image /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 60px; margin-bottom: 60px; } /*------------------------------------------*/ /* POST DATA /*------------------------------------------*/ .post-data { margin: 60px 5% 0; padding: 60px 3% 100px; } /*------------------------------------------*/ /* POST AUTHOR /*------------------------------------------*/ .post-author-avatar { margin: 0 auto; float: left; margin-right: 20px; } .post-author-avatar img { width: 70px; height: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .post-author-txt { position: relative; top: 8px; } .post-author-txt p { line-height: 1; margin-top: 8px; margin-bottom: 0; } .post-author-txt p a { color: var(--black); font-weight: 500; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-list p { margin-bottom: 12px; } .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.4rem; } .share-social-icons a.share-ico span { color: var(--gray); opacity: .6; margin-left: 10px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .share-social-icons a.share-ico:hover span { opacity: 1; } /* ========================================================================== 26. NEWSLETTER =========================================================================== */ .newsletter-1 .newsletter-overlay, .newsletter-4 .newsletter-overlay { padding: 70px 0; } .newsletter-2 .newsletter-overlay { padding: 80px 0 70px; } .newsletter-3 .container { padding-left: 0; padding-right: 0; } .newsletter-3 .newsletter-overlay { padding: 60px 50px; } /*------------------------------------------*/ /* NEWSLETTER TYPOGRAPHY /*------------------------------------------*/ .newsletter-txt h2 { margin-bottom: 35px; } .newsletter-txt h4, .newsletter-txt h3, .newsletter-txt p.p-sm { margin-bottom: 0; } .newsletter-txt a { font-weight: 500; text-decoration: underline; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 10%; } /*------------------------------------------*/ /* NEWSLETTER FORM /*------------------------------------------*/ .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 30px; padding-left: 10%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 40px; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--silver); font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-right: 12px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .newsletter-2.newsletter-section .form-control { border: none; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { background-color: var(--white); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: var(--light-gray); } .newsletter-section .form-control:-ms-input-placeholder { color: var(--light-gray); } .newsletter-section .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { display: block; width: 100%!important; height: 58px; font-size: 0.925rem; padding: 0.7rem 1.3rem; } .newsletter-2.newsletter-section .btn { font-size: 0.975rem; padding: 0.7rem 1.5rem; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #3eb1ff; font-size: 0.9rem; font-weight: 400; line-height: 1; margin-top: 15px; margin-left: 5px; } .newsletter-section .text-center .form-notification { margin-left: 0; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 27. CONTACTS =========================================================================== */ .contacts-1 .contact-form p { color: var(--header-color); font-size: 0.95rem; line-height: 1; font-weight: 600; margin-bottom: 16px; padding-left: 8px; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.835rem; font-weight: 300; line-height: 1.6; padding-left: 0; margin-top: 35px; margin-bottom: 10px; } .contact-form-notice p a { color: var(--header-color); font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* CONTACT FORM INPUT /*------------------------------------------*/ .contact-form .form-control, .contact-form .form-select { height: 64px; background-color: #fdfdfe; border: 1.5px solid #d5d5d5; box-shadow: 0 0 0 0; color: #3a4a56; font-size: 1rem; font-weight: 400; padding: 0 20px; margin-bottom: 35px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .contact-form .form-select { display: inline-block; width: 100%; color: var(--gray); box-shadow: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: var(--gray); } .contact-form .form-control:-ms-input-placeholder { color: var(--gray); } .contact-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0px none; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 28. FOOTER =========================================================================== */ .footer { padding-bottom: 40px; } .footer-data-logo, .footer-data-socials { margin-bottom: 65px; } .footer-info, .footer-links { margin-bottom: 40px; } .footer-1 .fl-2, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 10%; } .footer-1 .fl-3, .footer-1 .fl-5, .footer-1 .footer-contacts { margin-bottom: 30px; } .footer-1 .fl-4 { margin-bottom: 30px; } /*------------------------------------------*/ /* FOOTER LINKS MOBILE /*------------------------------------------*/ .footer h6.m-title { display: none; position: relative; } .footer h6.m-title:after { font-family: Flaticon; font-weight: 300; content: "\f14f"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer h6.m-title.expanded:after { content: "\f14e"; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ img.footer-logo { width: auto; max-width: inherit; max-height: 32px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 35px; margin-bottom: 0; } .footer-copyright-logo { position: relative; display: inline-block; float: left; top: -4px; } .footer-copyright-logo img.footer-logo { max-height: 28px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .footer-qr-code { max-width: 100px; text-align: center; background: var(--snow); padding: 9px; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h6 { font-size: 1.0815rem; line-height: 1; margin-bottom: 26px; } .footer .footer-links h6.h6-lg { margin-bottom: 14px; } .footer a { color: var(--gray); } .footer.bg--black a { color: var(--snow); } .footer-contacts p { margin-bottom: 4px; } .footer-phone { margin-top: 12px; margin-bottom: 4px; } .footer .footer-links h6.h6-lg a { text-decoration: underline; } .footer.color--white a, .footer.color--white li a { color: var(--snow); } .footer.color--white a:hover, .footer.color--white li a:hover { color: var(--white)!important; } /*------------------------------------------*/ /* FOOTER MAIL LINK /*------------------------------------------*/ .footer-mail-link { margin: 10px 0 0 3px; } .footer-mail-link a { font-size: 1rem; font-weight: 400; } .footer-mail-link span { position: relative; top: 5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; } /*------------------------------------------*/ /* FOOTER INFO /*------------------------------------------*/ .footer-info-socials { margin-top: 5px; } .footer-info-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-info-socials li { padding-right: 14px; } .footer-2 .footer-info-socials li { padding-right: 10px; } .footer-info-socials li span { position: relative; opacity: .8; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; } .footer-info-socials li:hover span { opacity: 1; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .foo-links li { width: auto!important; display: block!important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .foo-links.ico-10 li span { position: relative; top: 1.5px; right: 4px; } .foo-links li p { font-weight: 400; margin-bottom: 10px; } .foo-links li:last-child p { margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER SOCIAL /*------------------------------------------*/ .footer-socials { margin: 0; display: inline-block; } .footer-socials li { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .footer-socials a { display: block; margin-right: 14px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 15px; } .footer-socials li span { opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-socials li span:hover { opacity: 1; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* FOOTER STORE BAGES /*------------------------------------------*/ .footer .store { float: none; margin-right: 0; margin-bottom: 15px; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form { margin-bottom: 20px; } .footer .newsletter-form { margin-top: 25px; } .footer-form .newsletter-form .input-group { background-color: var(--form-control); border: 1.5px solid var(--smoke); padding: 9px 2px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-form .form-control { height: 32px; background-color: transparent; border: none; color: var(--gray); font-size: 1rem; font-weight: 400; padding: 0 10px; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { background-color: var(--white)!important; } .footer-form .form-control:focus { border: none; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: var(--gray); } .footer-form .form-control:-ms-input-placeholder { color: var(--gray); } .footer-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { height: 32px; padding: 0 10px; border: none!important; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; } .footer-form .btn:hover { color: var(--black)!important; } .footer-form .btn:focus { border: none!important; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #1680fb; font-size: 0.85rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } .footer-form .form-notification.error { color: #fc2f4b; } .footer-form .form-notification.valid { color: #48af4b; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 40px; } .footer hr.footer-top-hr { margin-top: 0; margin-bottom: 100px; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .footer-copyright.copyright-logo p { display: inline-block; line-height: 28px; margin-left: 15px; } /*------------------------------------------*/ /* BOTTOM FOOTER SECONDARY LINK /*------------------------------------------*/ .bottom-secondary-link p { margin-bottom: 0; } .bottom-secondary-link p span { position: relative; top: 1.5px; padding: 0 2px; } .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .footer-data-socials li, .bottom-footer-list li, .bottom-footer-socials li, .bottom-footer-payment li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-data-socials li { padding-left: 11px; } .bottom-foo-socials li, .bottom-footer-socials li { padding-left: 12px; } .footer-data-socials p { position: relative; line-height: 1; top: 9px; margin-bottom: 0; } .footer-list-divider { position: relative; top: -0.5px; transform: rotate(-90deg); margin-left: 4px; } .bottom-footer-list.ico-15 [class*="flaticon-"]:before, .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .bottom-footer-list li p { display: inline-block; float: left; margin-bottom: 0; } .footer-data-socials li span, .bottom-footer-socials li span { position: relative; top: 4px; opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-data-socials li span:hover, .bottom-footer-socials li span:hover { opacity: 1; } .bottom-foo-socials li span { position: relative; top: 1px; right: 1px; opacity: .8; } .bottom-footer-payment li span { line-height: 1!important; position: relative; top: 4px; opacity: .8; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.2125rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } /* ========================================================================== 29. INNER PAGE WRAPPER =========================================================================== */ .inner-page-hero { padding-top: 190px; } .page-hero-section { position: relative; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; padding-top: 180px; padding-bottom: 100px; } /*------------------------------------------*/ /* INNER PAGE TITLE /*------------------------------------------*/ .inner-page-title { margin-bottom: 80px; } .inner-page-title h3, .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1; margin-top: 25px; margin-bottom: 0; } .inner-page-title p span { color: var(--black); font-weight: 600; } .page-hero-section p { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 30. PAGE PAGINATION =========================================================================== */ .page-link { color: var(--gray); font-size: 1.1rem; font-weight: 500; padding: 2px 14px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .page-item:last-child .page-link { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .page-item.disabled .page-link { color: var(--gray); background-color: transparent; border-color: transparent; } .page-link:hover { color: var(--gray); background-color: transparent; border-color: var(--gray); } .page-link:focus { color: var(--gray); background-color: transparent; border-color: transparent; box-shadow: 0 0; } .page-item.active .page-link { color: var(--white)!important; } .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); } .theme--indigo .page-item.active .page-link { background-color: var(--indigo); border-color: var(--indigo); } .theme--orchid .page-item.active .page-link { background-color: var(--orchid); border-color: var(--orchid); } .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); } .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); } .theme--red .page-item.active .page-link { background-color: var(--red); border-color: var(--red); } .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); } .theme--violet-red .page-item.active .page-link { background-color: var(--violet-red); border-color: var(--violet-red); } /* ========================================================================== 31. TERMS, PRIVACY, COOKIES PAGES =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .txt-block.legal-info h5 { margin: 50px 0 25px; } .txt-block.legal-info h6 { margin: 25px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 4px; } .legal-info p span { color: var(--black); font-weight: 700; } .legal-info a { font-weight: 700; text-decoration: underline; } .legal-info a:hover { color: var(--black); } /* ========================================================================== 32. SIGN-IN / SIGN-UP PAGE =========================================================================== */ .register-page { position: relative; width: 100%; min-height: 100vh; z-index: 3; background: url(../images/register-page.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .theme--dark .register-page { background: url(../images/register-page-dark.jpg); } /*------------------------------------------*/ /* REGISTER PAGE LOGO /*------------------------------------------*/ .register-page-logo { position: fixed; padding-top: 30px; } .register-page-logo img { width: auto; max-width: inherit; max-height: 28px; } /*------------------------------------------*/ /* REGISTER PAGE FORM /*------------------------------------------*/ .register-page-form { margin: 0 3%; padding: 140px 20px; } .reset-page-wrapper { padding: 180px 20px 140px; } /*------------------------------------------*/ /* REGISTER PAGE TITLE /*------------------------------------------*/ .register-form-title { text-align: center; margin-bottom: 30px; } .register-form-title p { font-size: 1.05rem; margin-top: 8px; margin-bottom: 0; } /*------------------------------------------*/ /* RESET PASSWORD PAGE TITLE /*------------------------------------------*/ .reset-form-title { text-align: center; margin-bottom: 22px; } .reset-form-title p.p-sm { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* REGISTER PAGE TYPOGRAPHY /*------------------------------------------*/ .reset-password-link p { position: relative; font-size: 0.85rem; line-height: 1; margin-bottom: 30px; } .reset-password-link p a { text-decoration: underline; } .form-data span { display: block; font-size: 0.825rem; margin-bottom: 0; } .reset-password-form .form-data p { margin-top: 22px; margin-bottom: 12px; } .form-data p a, .form-data span a { color: var(--header-color); font-weight: 500; text-decoration: underline; } .register-page-form p.create-account { font-size: 0.9rem; line-height: 1; margin-top: 24px; margin-bottom: 0; } .register-page-form p.create-account a { font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* REGISTER PAGE SEPARATOR LINE /*------------------------------------------*/ .separator-line { display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 500; margin: 25px 0; } .separator-line::before, .separator-line::after { content: ""; border-top: 1.5px solid rgba(5, 5, 5, .18); margin: 0 15px 0 0; flex: 1 0 20px; } .separator-line::after { margin: 0 0 0 15px; } /*------------------------------------------*/ /* REGISTER PAGE FORM INPUT /*------------------------------------------*/ .reset-page-wrapper .form-control, .register-page-form .form-control { height: 56px; background-color: var(--white); border: 1.5px solid #d2d2d2; color: var(--black); font-size: 0.935rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .register-page-form .form-control::-moz-placeholder { color: var(--gray); } .register-page-form .form-control:-ms-input-placeholder { color: var(--gray); } .register-page-form .form-control::-webkit-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* REGISTER PAGE FORM BUTTON /*------------------------------------------*/ #login .register-page-form .btn.submit, #signup .register-page-form .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; margin-top: 0; } #signup .register-page-form .btn.submit { margin-top: 25px; } .reset-page-wrapper .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; } .register-page-form .btn-google { width: 100%; color: var(--header-color); font-size: 0.975rem; padding: 0.75rem 1.6rem; background-color: var(--white); border: 1px solid var(--silver); } .btn-google img { position: relative; width: 25px; height: 25px; top: 0; right: 5px; } .btn-google span { position: relative; top: 1px; } .register-page-form .btn-google:hover { border: 1px solid var(--header-color); } /*------------------------------------------*/ /* REGISTER PAGE FORM MESSAGE /*------------------------------------------*/ .reset-form-msg { text-align: center; width: 100%!important; display: block; } .reset-password-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .reset-password-form .error { position: relative; color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; top: -10px; margin-bottom: 12px; padding-left: 10px; } /*------------------------------------------*/ /* FORM HIDE PASSWORD /*------------------------------------------*/ .wrap-input { position: relative; } .btn-show-pass { color: var(--light-gray); align-items: center; position: absolute; height: 100%; top: 15px; right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-show-pass.ico-20 [class^="flaticon-"]:before, .btn-show-pass.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } .btn-show-pass:hover { color: var(--theme-color); } .eye-pass.flaticon-invisible { color: var(--gray); } /* ========================================================================== 33. MODAL ========================================================================== */ .modal-body { padding: 0!important; } .modal-dialog.modal-xl { width: 760px; } .modal .modal-content { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .modal-body-content { padding: 60px 35px 35px; } .modal-body-content h4 { margin-bottom: 15px; } .modal-body-content p { margin-bottom: 0; } .modal .bg-img { background: url(../images/modal.jpg); background-repeat: no-repeat; background-position: left center; background-size: cover; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .btn-close { position: absolute; z-index: 1; right: 20px!important; top: 20px!important; height: 1.5rem; width: 1.5rem; background: rgba(14, 14, 14, .11)!important; border-radius: 50%; padding: 0; opacity: .9; z-index: 9999; } .modal .btn-close span { position: relative; line-height: 24px!important; top: -2px; } .modal .btn-close.ico-10 [class^="flaticon-"]:before, .modal .btn-close.ico-10 [class^="flaticon-"]:after { font-size: 0.6rem; } .modal .btn-close:focus { outline: none!important; box-shadow: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW NEWSLETTER FORM /*------------------------------------------*/ .modal-body .newsletter-form { margin-top: 25px; } .modal .newsletter-form .form-control { text-align: center; height: 58px; background-color: #f3f4f5; border: 1.5px solid transparent; font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-bottom: 20px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Form Input Focus /*------------------------------------------*/ .modal .newsletter-form .form-control:focus { outline: 0; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Form Input Placeholder /*------------------------------------------*/ .modal .newsletter-form .form-control::-moz-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Form Button /*------------------------------------------*/ .modal .input-group-btn { display: block; width: 100%!important; } .modal .newsletter-form .btn { display: block; width: 100%!important; height: 58px; font-size: 0.975rem; margin: 0; } /*------------------------------------------*/ /* Form Notification /*------------------------------------------*/ .modal .form-notification { text-align: center; color: #1680fb; font-size: 0.85rem; font-weight: 400; line-height: 1; margin-top: 12px; } .modal .form-notification.valid, .modal .form-notification.error { color: #fc2f4b; } .modal .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 34. COOKIES =========================================================================== */ #cookies { position: fixed; width: 90%; bottom: 25px; left: 5%; z-index: 200; padding: 25px; border: 1px solid #ddd; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); -moz-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); } #cookies p { color: #353f4f; font-size: 0.875rem; line-height: 1.5; margin: 0; } #cookies-ok { position: absolute; right: 52px; bottom: 18px; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 500; background-color: #353f4f!important; border: 2px solid #353f4f!important; padding: 6px 20px; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } #cookies-ok:hover { color: #353f4f!important; background-color: transparent!important; border-color: #353f4f!important; } #cookies-info { color: #353f4f!important; font-weight: 500; text-decoration: underline; margin-left: 10px; } .theme--blue #cookies-info:hover { color: var(--blue)!important; } .theme--green #cookies-info:hover { color: var(--green)!important; } .theme--indigo #cookies-info:hover { color: var(--indigo)!important; } .theme--orchid #cookies-info:hover { color: var(--orchid)!important; } .theme--pink #cookies-info:hover { color: var(--pink)!important; } .theme--purple #cookies-info:hover { color: var(--purple)!important; } .theme--red #cookies-info:hover { color: var(--red)!important; } .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; } .theme--violet-red #cookies-info:hover { color: var(--violet-red)!important; } #cookies-close { position: absolute; right: 25px; top: 20px; height: 12px; width: 12px; } #cookies-close svg { width: 11px; height: 11px; } /* ========================================================================== 35. COLOR SCHEME ========================================================================== */ :root { --theme-color: #9370db; --theme-color-secondary: #ce67c9; } .bg--theme { background-color: var(--theme-color); } .bg--theme-2 { background-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* BUTTON /*------------------------------------------*/ .btn--theme, .hover--theme:hover, .theme--dark .btn--theme, .theme--dark .hover--theme:hover, .color--white .hover--theme:hover, .scroll .hover--theme:hover, .theme--dark .color--white .hover--theme:hover, .theme--dark .scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme, .theme--dark .btn--tra-theme, .theme--dark .hover--tra-theme:hover, .theme--dark .color--white .btn--tra-theme { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } .btn--theme-2, .hover--theme-2:hover, .theme--dark .btn--theme-2, .theme--dark .hover--theme-2:hover, .color--white .hover--theme-2:hover, .scroll .hover--theme-2:hover, .theme--dark .color--white .hover--theme-2:hover, .theme--dark .scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .btn--tra-theme-2, .hover--tra-theme-2:hover, .color--white .btn--tra-theme-2, .theme--dark .btn--tra-theme-2, .theme--dark .hover--tra-theme-2:hover, .theme--dark .color--white .btn--tra-theme-2 { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } /*------------------------------------------*/ /* COLOR /*------------------------------------------*/ .color--theme, .color--theme a, .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); } .color--theme-2, .color--theme-2 a, .color--theme-2 :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico.color--theme path, .shape-ico.color--theme-2 path { fill: #f6f4fd; } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .loading--theme .cssload-spinner:after, .loading--theme .cssload-spinner:before { border-color: var(--theme-color); } /*------------------------------------------*/ /* HEADER & NAVIGATION /*------------------------------------------*/ .nav-theme .sm-info { background-color: var(--theme-color); } .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .cbox-1:hover .cbox-1-ico.bg--theme { color: var(--theme-color); border-color: var(--theme-color); } .cbox-1:hover .cbox-1-ico.bg--theme-2 { color: var(--theme-color-secondary); border-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .p-table.theme--border { border: 3px solid var(--theme-color); } .pricing-features.ico--theme span { color: var(--theme-color); } .pricing-features.ico--theme-2 span { color: var(--theme-color-secondary); } .switcher { background-color: var(--theme-color); } .comp-table .color--theme { color: var(--theme-color); } .comp-table .color--theme-2 { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .newsletter-section .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { border-color: var(--theme-color)!important; } .footer-form .btn { color: var(--theme-color); } /*------------------------------------------*/ /* PAGINATION /*------------------------------------------*/ .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .reset-password-link p a:hover, .reset-password-form .form-data p a:hover { color: var(--theme-color); } .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { border-color: var(--theme-color); } .modal .newsletter-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* COOKIES /*------------------------------------------*/ #cookies-ok { background-color: var(--theme-color)!important; border: 2px solid var(--theme-color)!important; } #cookies-info:hover { color: var(--theme-color)!important; } /*------------------------------------------*/ /* DARK MODE /*------------------------------------------*/ .theme--dark .shape-ico.color--theme path, .theme--dark .shape-ico.color--theme-2 path { fill: rgba(43, 48, 64, .5); } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { border-color: var(--theme-color)!important; } /* ========================================================================== 36. DARK MODE ========================================================================== */ body.theme--dark { --dark-theme-bg: #13161f; --black: #f9f9f9; --gray: #c8c8c8; --ink: #101219; --form-control: #191c28; --header-color: #fff; --header-link: #dee1ea; --silver: rgba(43, 48, 64, 1); --smoke: rgba(43, 48, 64, .7); --white-smoke: #191c28; } body.theme--dark { background-color: var(--dark-theme-bg); color: var(--gray); } .theme--dark .bg--white, .theme--dark .bg--coal, .theme--dark .bg--lavender, .theme--dark .bg--magnolia, .theme--dark .bg--aliceblue, .theme--dark .bg--tra-violet-red { background-color: var(--white-smoke); } .theme--dark .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .theme--dark .bg--03 { background-image: url(../images/bg-03d.jpg); } .theme--dark .bg--05 { background-image: url(../images/bg-05d.jpg); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ .theme--dark hr.divider, .theme--dark .footer hr { background-image: linear-gradient(90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); } .theme--dark hr.divider.divider-light { background-color: #fff; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%); opacity: 1; } /*------------------------------------------*/ /* TYPOGRAPHY /*------------------------------------------*/ .theme--dark a { color: var(--gray); } .theme--dark a:hover, .theme--dark a.tra-link:hover span { color: var(--white); } /*------------------------------------------*/ /* BUTTONS /*------------------------------------------*/ .theme--dark .btn--transparent { color: var(--white)!important; } /* WHITE BUTTON */ .theme--dark .btn--white, .theme--dark .hover--white:hover, .theme--dark .color--white .hover--white:hover { color: #333!important; background-color: var(--white)!important; border-color: var(--white)!important; } /* BLACK BUTTON */ .theme--dark .btn--black, .theme--dark .hover--black:hover, .theme--dark .color--white .hover--black:hover { color: var(--ink)!important; border-color: var(--black)!important; background-color: var(--black)!important; } .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .color--white .btn--tra-black { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /* BLUE BUTTON */ .theme--dark .btn--blue, .theme--dark .hover--blue:hover, .theme--dark .color--white .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .btn--tra-blue, .theme--dark .hover--tra-blue:hover, .theme--dark .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /* GREEN BUTTON */ .theme--dark .btn--green, .theme--dark .hover--green:hover, .theme--dark .color--white .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .btn--tra-green, .theme--dark .hover--tra-green:hover, .theme--dark .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /* INDIGO BUTTON */ .theme--dark .btn--indigo, .theme--dark .hover--indigo:hover, .theme--dark .color--white .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .btn--tra-indigo, .theme--dark .hover--tra-indigo:hover, .theme--dark .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /* ORCHID BUTTON */ .theme--dark .btn--orchid, .theme--dark .hover--orchid:hover, .theme--dark .color--white .hover--orchid:hover, .theme--dark .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .btn--tra-orchid, .theme--dark .hover--tra-orchid:hover, .theme--dark .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /* PINK BUTTON */ .theme--dark .btn--pink, .theme--dark .hover--pink:hover, .theme--dark .color--white .hover--pink:hover, .theme--dark .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .btn--tra-pink, .theme--dark .hover--tra-pink:hover, .theme--dark .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /* PURPLE BUTTON */ .theme--dark .btn--purple, .theme--dark .hover--purple:hover, .theme--dark .color--white .hover--purple:hover, .theme--dark .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .btn--tra-purple, .theme--dark .hover--tra-purple:hover, .theme--dark .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /* RED BUTTON */ .theme--dark .btn--red, .theme--dark .hover--red:hover, .theme--dark .color--white .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .btn--tra-red, .theme--dark .hover--tra-red:hover, .theme--dark .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /* SKYBLUE BUTTON */ .theme--dark .btn--skyblue, .theme--dark .hover--skyblue:hover, .theme--dark .color--white .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .btn--tra-skyblue, .theme--dark .hover--tra-skyblue:hover, .theme--dark .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /* VIOLET RED BUTTON */ .theme--dark .btn--violet-red, .theme--dark .hover--violet-red:hover, .theme--dark .color--white .hover--violet-red:hover, .theme--dark .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .btn--tra-violet-red, .theme--dark .hover--tra-violet-red:hover, .theme--dark .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /* YELLOW BUTTON */ .theme--dark .btn--yellow, .theme--dark .hover--yellow:hover, .theme--dark .color--white .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .theme--dark .shape-ico.color--blue path, .theme--dark .shape-ico.color--indigo path, .theme--dark .shape-ico.color--skyblue path, .theme--dark .shape-ico.color--lilac path, .theme--dark .shape-ico.color--orchid path, .theme--dark .shape-ico.color--pink path, .theme--dark .shape-ico.color--purple path, .theme--dark .shape-ico.color--violet-red path { fill: rgba(43, 48, 64, .5); } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .theme--dark .dark-menu .wsmainfull, .theme--dark .white-menu .wsmainfull { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a { color: var(--header-link); } .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover { color: #eee!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover { color: var(--white)!important; } /*------------------------------------------*/ /* HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--white-smoke)!important; border: solid 1px var(--smoke)!important; -webkit-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); -moz-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); box-shadow: 0 2px 3px rgba(1, 1, 1, .1); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before, .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before { background-color: var(--ink); border-left: solid var(--ink); border-top: solid 1px var(--ink); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); background-color: transparent!important; } .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .theme--dark .tra-menu .wsmainfull.scroll, .theme--dark .white-menu .wsmainfull.scroll, .theme--dark .dark-menu.dark-scroll .wsmainfull.scroll { background-color: var(--ink)!important; padding: 0; -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-link); } .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(44, 49, 66, .72)!important; color: var(--white); } .theme--dark .navbar-light .scroll .btn.btn--tra-white { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .wsmainfull .hover--black:hover { color: var(--white)!important; border-color: #353f4f!important; background-color: #353f4f!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--black:hover { color: var(--ink)!important; border-color: var(--white)!important; background-color: var(--white)!important; } .theme--dark .navbar-light .scroll .wsmenu > .wsmenu-list > li > a.btn.hover--black:hover { color: var(--ink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--indigo:hover { color: var(--white)!important; border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .white-scroll .wsmainfull .hover--tra-white:hover, .theme--dark .white-scroll .wsmainfull.scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-white { display: block; } .theme--dark .navbar-dark .logo-white { display: none; } /*------------------------------------------*/ /* CAREERS /*------------------------------------------*/ .theme--dark .jobs-category { background-color: #181b27; border-color: var(--silver); } /*------------------------------------------*/ /* FEATURES /*------------------------------------------*/ .theme--dark .fbox-5.bg--white { background-color: #181a27; border-color: var(--silver); } .theme--dark .fbox-3.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .theme--dark .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } .theme--dark .bc-04-wrapper { border-color: var(--silver); } /*------------------------------------------*/ /* TEAM /*------------------------------------------*/ .theme--dark .team-member { background-color: var(--white-smoke); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .theme--dark .p-table { border-color: var(--silver); } .theme--dark .pricing-discount h6 { color: #353f4f; } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .theme--dark .int_tool-1 .tool_logo.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* RATING /*------------------------------------------*/ .theme--dark .rbox-1 .star-rating { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .rbox-3 p span { color: #fff; } /*------------------------------------------*/ /* REVIEWS /*------------------------------------------*/ .theme--dark .reviews-3-wrapper:after { background-color: #181a27; } .theme--dark .review-1 { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .owl-theme .owl-dots .owl-dot span { background: #3a3a3a; } .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: var(--white); } /*------------------------------------------*/ /* DOWNLOAD /*------------------------------------------*/ .theme--dark .download-item { border-color: var(--silver); } /*------------------------------------------*/ /* FAQs /*------------------------------------------*/ .theme--dark .accordion-panel { color: var(--gray); } .theme--dark .faqs-section .accordion-item .accordion-thumb:after, .theme--dark .faqs-section .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } /*------------------------------------------*/ /* BANNER /*------------------------------------------*/ .theme--dark .os-link { border-color: var(--silver); } .theme--dark .os-qr-code { background-color: #fff; } .theme--dark .os-logo img { filter: invert(100%); opacity: .4; } .theme--dark .banner-qr-code p { color: var(--ink); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .theme--dark .newsletter-section .form-control::-moz-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: var(--gray); } .theme--dark .newsletter-1.newsletter-section .form-control, .theme--dark .newsletter-3.newsletter-section .form-control { background-color: var(--white-smoke); } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { background-color: var(--dark-theme-bg); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .theme--dark .contact-form .form-control, .theme--dark .contact-form .form-select { background-color: var(--white-smoke); border: 1.5px solid var(--silver); } .theme--dark .contact-form .form-control:focus, .theme--dark .contact-form .form-select:focus { background-color: var(--dark-theme-bg); border: 1.5px solid var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .theme--dark .footer-form .newsletter-form .input-group:focus-within { background-color: var(--dark-theme-bg)!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* INNER PAGE WRAPPER /*------------------------------------------*/ .theme--dark .inner-page-title p span { color: var(--white); } /*------------------------------------------*/ /* TERMS, PRIVACY, COOKIES PAGES /*------------------------------------------*/ .theme--dark .legal-info a, .theme--dark .legal-info p span { color: rgba(255, 255, 255, .86); } .theme--dark .legal-info a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .modal-body-content h4 { color: #313435; } .theme--dark .modal-body-content p { color: #6c757d; } .theme--dark .newsletter-form .hover--black:hover { color: #fff!important; border-color: #353f4f!important; background-color: #353f4f!important; } /*------------------------------------------*/ /* SIGN-IN / SIGN-UP PAGE /*------------------------------------------*/ .theme--dark .separator-line::before, .theme--dark .separator-line::after { border-top: 1.5px solid rgba(255, 255, 255, .18); } .theme--dark .reset-page-wrapper .form-control, .theme--dark .register-page-form .form-control { background-color: #2c3344; border: 1px solid #2c3344; } .theme--dark .reset-page-wrapper .form-control:focus, .theme--dark .register-page-form .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--theme-color); } .theme--dark .register-page-form .btn-google { color: var(--header-color); background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .register-page-form .btn-google:hover { border-color: var(--header-color); } .desktoplogo { /* background: rgb(180, 246, 0)!important; */ } /* Template Name: Pintex - Mobile App & Software Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Pintex - Mobile App Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: https://www.jthemes.com/ Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App */ :root { /* --theme-color: #c73e9b; --theme-color-secondary: #c73e9b; */ --theme-color: #0c65ff; --theme-color-secondary: #0c65ff; /* --theme-color: #12eb4c; --theme-color-secondary: #12eb4c; */ /* --theme-color: rgb(127, 138, 247);; --theme-color-secondary: rgb(127, 138, 247);; */ */ } /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ :root { --alice-blue: #f1f3ff; --black: #353f4f; --blue: #0083ff; --coal: #111b21; --disable: #b5b5b5; --form-control: #fafafd; --gray: #545465; --green: #0fbc49; --header-color: #120036; --indigo: #7b5dd6; --ink: #1d222f; --lavender: #f8f5fd; --light-blue: #edf8fd; --light-gray: #90a0b2; --lilac: #beaedb; --magnolia: #f9f7fd; --metal: #2c3840; --noice: #f8f9fa; --orchid: #ce67c9; --pink: #fc5a8d; --purple: #9370db; --silver: #ccc; --sky-blue: #04aaff; --smoke: #e7e7e7; --snow: #f5f6f6; --violet-red: #c73e9b; --white: #fff; --white-smoke: #f4f4f9; --yellow: #ffbf15; --tra-black: rgba(5, 5, 5, .05); --tra-gray: rgba(96, 96, 96, .13); --tra-indigo: rgba(128, 96, 225, .13); --tra-ink: rgba(1, 1, 1, .1); --tra-purple: rgba(102, 51, 255, .13); --tra-white: rgba(255, 255, 255, .2); --tra-violet-red: rgba(237, 230, 244, .84); --tra-white-smoke: rgba(244, 244, 249, .13); } html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--gray); line-height: 1.6666; font-weight: 400; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block--shadow { -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } .img-block .block--shadow { -webkit-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); -moz-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); } /*------------------------------------------*/ /* BORDER SETTINGS /*------------------------------------------*/ .block--border { border: 1px solid var(--silver); } .block--border.border--light, .block--border.block--shadow { border: 1px solid var(--smoke); } .x-border { border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); } .x-border.border--light { border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); } .t-border { border-top: 1px solid var(--silver); } .t-border.border--light { border-top: 1px solid var(--smoke); } .b-border { border-bottom: 1px solid var(--silver); } .b-border.border--light { border-bottom: 1px solid var(--smoke); } /*------------------------------------------*/ /* BORDER RADIUS SETTING /*------------------------------------------*/ .r-0 { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .r-02 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .r-04 { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .r-06 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .r-08 { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .r-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .r-12 { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } .r-14 { -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; } .r-16 { -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .r-18 { -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; } .r-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .r-22 { -webkit-border-radius: 22px; -moz-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; } .r-24 { -webkit-border-radius: 24px; -moz-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; } .r-26 { -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; border-radius: 26px; } .r-28 { -webkit-border-radius: 28px; -moz-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; } .r-30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } .r-32 { -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; border-radius: 32px; } .r-34 { -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; } .r-36 { -webkit-border-radius: 36px; -moz-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; } .r-100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .py-90 { padding-top: 90px; padding-bottom: 90px; } .py-100 { padding-top: 100px; padding-bottom: 100px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .px-15 { padding-left: 15x; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-20 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .mt-0 { margin-top: 0!important; } .mt-15 { margin-top: 15x; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-0 { margin-bottom: 0!important; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--aliceblue { background-color: var(--alice-blue); } .bg--black { background-color: var(--black); } .bg--blue { background-color: var(--blue); } .bg--coal { background-color: var(--coal); } .bg--indigo { background-color: var(--indigo); } .bg--lavender { background-color: var(--lavender); } .bg--lightblue { background-color: var(--light-blue); } .bg--lilac { background-color: var(--lilac); } .bg--magnolia { background-color: var(--magnolia); } .bg--noice { background-color: var(--noice); } .bg--orchid { background-color: var(--orchid); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--red { background-color: var(--red); } .bg--skyblue { background-color: var(--sky-blue); } .bg--snow { background-color: var(--snow); } .bg--violet-red { background-color: var(--violet-red); } .bg--white { background-color: var(--white); } .bg--whitesmoke { background-color: var(--white-smoke); } .bg--yellow { background-color: var(--yellow); } /*------------------------------------------*/ /* TRANSPARENT BACKGROUND COLORS /*------------------------------------------*/ .bg--tra-indigo { background-color: var(--tra-indigo); } .bg--tra-purple { background-color: var(--tra-purple); } .bg--tra-violet-red { background-color: var(--tra-violet-red); } /*------------------------------------------*/ /* GRADIENT COLOR BACKGROUND /*------------------------------------------*/ .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%); } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .shape--01:after, .shape--02:after { position: absolute; content: ''; width: 100%; height: 55%; left: 0; z-index: -1; } .shape--01:after { top: 0; } .shape--02:after { top: 45%; } .shape--whitesmoke:after { background-color: var(--white-smoke); } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06, .bg--07 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../../../../images/bg-01.jpg); } .bg--02 { background-image: url(../../../../images/bg-02.jpg); } .bg--03 { background-image: url(../../../../images/bg-03.jpg); } .bg--04 { background-image: url(../../../../images/bg-04.jpg); } .bg--05 { background-image: url(../../../../images/bg-05.jpg); } .bg--06 { background-image: url(../../../../images/bg-06.jpg); } .bg--07 { background-image: url(../../../../images/bg-07.jpg); } /*------------------------------------------*/ /* BACKGROUND PATTERN /*------------------------------------------*/ .pattern--01, .pattern--02, .pattern--03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .pattern--01 { background-image: url(../images/pattern-01.png); } .pattern--02 { background-image: url(../images/pattern-02.png); } .pattern--03 { background-image: url(../images/pattern-03.png); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ hr.divider { width: 100%; height: 1px; background-color: transparent; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%); opacity: .4; border: none; margin: 0; } /*------------------------------------------*/ /* WAVE SHAPE BOTTOM /*------------------------------------------*/ .wave-shape-bottom { position: absolute; bottom: 0; left: 0; width: 100%; } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h6, h5, h4, h3, h2, h1 { font-family: 'Plus Jakarta Sans', sans-serif!important; color: var(--header-color); font-weight: 700!important; letter-spacing: 0; margin-bottom: 0; } /*------------------------------------------*/ /* HEADER SIZE /*------------------------------------------*/ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.25rem; } /* 20px */ h6.h6-xl { font-size: 1.3125rem; } /* 21px */ h5 { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h5.h5-xl { font-size: 1.75rem; } /* 28px */ h4 { font-size: 1.875rem; } /* 30px */ h4.h4-md { font-size: 2rem; } /* 32px */ h4.h4-lg { font-size: 2.125rem; } /* 34px */ h4.h4-xl { font-size: 2.25rem; } /* 36px */ h3 { font-size: 2.375rem; } /* 38px */ h3.h3-md { font-size: 2.5rem; } /* 40px */ h3.h3-lg { font-size: 2.6255rem; } /* 42px */ h3.h3-xl { font-size: 2.75rem; } /* 44px */ h2 { font-size: 2.875rem; } /* 46px */ h2.h2-md { font-size: 3rem; } /* 48px */ h2.h2-lg { font-size: 3.125rem; } /* 50px */ h2.h2-xl { font-size: 3.25rem; } /* 52px */ h2.h2-title { font-size: 3.375rem; } /* 54px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 0.9375rem; } /* 15px */ p { font-size: 1rem; } /* 16px */ p.p-md { font-size: 1.0625rem; } /* 17px */ p.p-lg { font-size: 1.125rem; } /* 18px */ p.p-xl { font-size: 1.1875rem; } /* 19px */ /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: var(--header-color); text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: var(--header-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a.tra-link { font-size: 1rem; line-height: 1; font-weight: 600; } a.tra-link span { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.75rem; line-height: 0.7rem!important; top: 1.5px; left: 1px; } a.tra-link:hover span { color: var(--black)!important; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ol.digit-list p, ul.simple-list.long-list p { margin-bottom: 8px; } .content-section ul.simple-list.long-list p { margin-bottom: 5px; } /*------------------------------------------*/ /* DIGIT LIST /*------------------------------------------*/ ol.digit-list { padding: 0; margin-left: 15px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { font-size: 1rem; line-height: 1; font-weight: 600; background-color: transparent; padding: 0.9rem 1.8rem; border: 2px solid transparent; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .btn.btn-sm { font-size: 0.975rem; padding: 0.7rem 1.5rem; } .btn.btn-md { font-size: 1rem; padding: 0.9425rem 1.75rem; } .btn.btn-lg { font-size: 1.05rem; padding: 1.1rem 1.8rem; } .btn.ico-20.ico-left, .btn.ico-20.ico-right { padding: 0.9rem 1.55rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.1rem; letter-spacing: -0.35px; padding: 0.9rem 1.35rem; } .btn.ico-30.ico-left, .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Buttons Group /*------------------------------------------*/ .text-center .btns-group { display: inline-block; } .btns-group .btn:first-child { margin-right: 15px; } .btns-group .btn.ico-30.ico-left { padding: 0.37rem 0.5rem; } .btns-group .btn.ico-30.ico-right { padding: 0.37rem 0; } /*------------------------------------------*/ /* Button Icon /*------------------------------------------*/ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1rem; line-height: 0.7rem!important; top: 4px; } .btn.ico-25 [class*="flaticon-"]:before, .btn.ico-25 [class*="flaticon-"]:after { position: relative; font-size: 1.275rem; line-height: 1rem!important; top: 1px; } .btn.ico-25.ios-btn [class*="flaticon-"]:before, .btn.ico-25.ios-btn [class*="flaticon-"]:after { top: 0; } .ico-25-txt { position: relative; top: -3px; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { position: relative; top: 0; right: 4px; } .btn.ico-30.ico-right span { position: relative; top: 0; left: 4px; } .btn.ico-30.ico-left span.ico-30-txt, .btn.ico-30.ico-right span.ico-30-txt { position: relative; top: -10px; right: 0; } .btn.ico-30.ico-right span.ico-30-txt { left: 0; } /*------------------------------------------*/ /* Button Text /*------------------------------------------*/ p.btn-txt { margin: 15px 0 0 0; } p.btn-txt span { font-weight: 700; } .btn-rating p.btn-txt { margin: 0; } .star-rating small, .star-rating span.rating-txt { font-size: 0.9375rem; } p.btns-group-txt { margin: 14px 0 0 0; } .btn-rating { margin-top: 10px; } .text-center p.btns-group-txt { margin-top: 20px; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding-left: 5px; } .text-center p.btn-txt.ico-15, .text-center p.btns-group-txt.ico-15 { padding-left: 0; } p.btn-txt span, p.btns-group-txt span { position: relative; top: 0.5px; right: 2px; } p.btns-group-txt span.txt-data { display: block; top: 0; right: 0; } p.btns-group-txt span.txt-data a { margin-left: 4px; text-decoration: underline; } p.btns-group-txt span.txt-data a:hover { text-decoration: none; } .hero-section .color--white p.btns-group-txt span.txt-data a:hover { color: var(--white)!important; } .btn-txt.ico-15 [class*="flaticon-"]:before, .btn-txt.ico-15 [class*="flaticon-"]:after, .btns-group-txt.ico-15 [class*="flaticon-"]:before, .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .star-rating.ico-10 [class*="flaticon-"]:before, .star-rating.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; top: 1px; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; } .p-sm.btn-txt.ico-20 [class*="flaticon-"]:before, .p-sm.btn-txt.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.875rem; top: 1px; } .os-version-ext { margin-top: 16px; } .os-version-ext .star-rating small { font-size: 0.9rem; margin-left: 6px; color:#fff; } span.os-version { display: block; font-size: 0.9rem; line-height: 1; margin-top: 5px; color:#fff; } /*------------------------------------------*/ /* TRANPARENT BUTTON /*------------------------------------------*/ .btn--transparent { color: var(--black)!important; background-color: transparent!important; border-color: transparent!important; } .btn--transparent.color--white { color: var(--white)!important; } .btn--transparent:hover { background-color: transparent!important; border-color: transparent!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover, .color--white .hover--white:hover { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .white-scroll .scroll .hover--tra-white:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } .white-scroll .scroll .hover--white:hover { color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover, .white-scroll .scroll .hover--black:hover { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .btn--tra-black, .hover--tra-black:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* TRA GRAY BUTTON /*------------------------------------------*/ .btn--tra-gray, .hover--tra-gray:hover { color: var(--black)!important; background-color: transparent!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* BLUE BUTTON /*------------------------------------------*/ .btn--blue, .hover--blue:hover, .color--white .hover--blue:hover, .white-scroll .scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /*------------------------------------------*/ /* GREEN BUTTON /*------------------------------------------*/ .btn--green, .hover--green:hover, .color--white .hover--green:hover, .white-scroll .scroll .hover--green:hover { color: var(--white)!important;border-color: var(--green)!important; background-color: var(--green)!important; } .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /*------------------------------------------*/ /* INDIGO BUTTON /*------------------------------------------*/ .btn--indigo, .hover--indigo:hover, .color--white .hover--indigo:hover, .white-scroll .scroll .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .btn--tra-indigo, .hover--tra-indigo:hover, .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /*------------------------------------------*/ /* ORCHID BUTTON /*------------------------------------------*/ .btn--orchid, .hover--orchid:hover, .color--white .hover--orchid:hover, .white-scroll .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .btn--tra-orchid, .hover--tra-orchid:hover, .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /*------------------------------------------*/ /* PINK BUTTON /*------------------------------------------*/ .btn--pink, .hover--pink:hover, .color--white .hover--pink:hover, .white-scroll .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /*------------------------------------------*/ /* PURPLE BUTTON /*------------------------------------------*/ .btn--purple, .hover--purple:hover, .color--white .hover--purple:hover, .white-scroll .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /*------------------------------------------*/ /* RED BUTTON /*------------------------------------------*/ .btn--red, .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover { color: var(--white)!important;border-color: var(--red)!important; background-color: var(--red)!important; } .btn--tra-red, .hover--tra-red:hover, .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /*------------------------------------------*/ /* SKY BLUE BUTTON /*------------------------------------------*/ .btn--skyblue, .hover--skyblue:hover, .color--white .hover--skyblue:hover, .white-scroll .scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /*------------------------------------------*/ /* VIOLET RED BUTTON /*------------------------------------------*/ .btn--violet-red, .hover--violet-red:hover, .color--white .hover--violet-red:hover, .white-scroll .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .btn--tra-violet-red, .hover--tra-violet-red:hover, .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /*------------------------------------------*/ /* YELLOW BUTTON /*------------------------------------------*/ .btn--yellow, .hover--yellow:hover, .color--white .hover--yellow:hover, .white-scroll .scroll .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: var(--white); -webkit-box-shadow: none; box-shadow: none; } .btn--transparent:focus { background-color: transparent; border-color: transparent; } .btn--tra-black:focus, .btn--transparent:focus, .btn.btn--tra-gray:focus { color: var(--black); -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* STORE BADGE ICONS /*------------------------------------------*/ .stores-badge { display: inline-block; } .store { display: inline-block; text-align: center; margin-right: 12px; } .store:last-child { margin-right: 0; } .store img { width: auto; max-width: inherit; } .badge-img-xs .store img { max-height: 2.5rem; } .badge-img-sm .store img { max-height: 2.625rem; } .badge-img-md .store img { max-height: 2.875rem; } .badge-img-lg .store img { max-height: 3rem; } .badge-img-xl .store img { max-height: 3.25rem; } /*------------------------------------------*/ /* WATCH VIDEO LINK /*------------------------------------------*/ .watch-video { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; margin-top: 25px; } .btns-group .watch-video { display: inline-block; margin-top: 0!important; top: 22px; } /*------------------------------------------*/ /* Link Icon /*------------------------------------------*/ .watch-video-link { position: relative; text-align: center; float: left; width: 2.85rem; height: 2.85rem; color: var(--white); border: none; margin-right: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .watch-video-link:before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; bottom: -3px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .watch-video-link:hover:before { opacity: .75; left: -8px; right: -8px; top: -8px; bottom: -8px; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { font-size: 2rem; line-height: 2.85rem!important; margin-left: 5px; } /*------------------------------------------*/ /* Link Text /*------------------------------------------*/ .watch-video-txt { overflow: hidden; flex: 1; max-width: 100%; text-align: left!important; } p.video-txt-lg { font-size: 1rem; line-height: 1; font-weight: 400; margin-bottom: 5px; } p.video-txt-sm { font-size: 0.925rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: var(--white); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn-xl { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .video-btn-lg { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-sm { width: 4.375rem; height: 4.375rem; margin-top: -2.1875rem; margin-left: -2.1875rem; } .video-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-sm [class^="flaticon-"]:after { font-size: 3.5rem; line-height: 4.375rem!important; margin-left: 5px; } .video-btn:hover .video-block-wrapper { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-xl:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-lg:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } .video-btn.video-btn-md:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .video-btn.video-btn-sm:hover:before { opacity: .75; left: -0.75rem; right: -0.75rem; top: -0.75rem; bottom: -0.75rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } /* 12px */ .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } /* 15px */ .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } /* 20px */ .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } /* 25px */ .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } /* 30px */ .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } /* 35px */ .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } /* 40px */ .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } /* 45px */ .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } /* 50px */ .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } /* 55px */ .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } /* 60px */ .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } /* 65px */ .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } /* 70px */ .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } /* 75px */ .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } /* 80px */ .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } /* 85px */ .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } /* 90px */ .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } /* 95px */ .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } /* 100px */ .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } /* 105px */ .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } /* 110px */ .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } /* 115px */ .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } /* 120px */ .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /* 125px */ /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-55 .shape-ico svg { width: 125px; height: 125px; top: -42px; left: calc(50% - 66px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -48px; left: calc(50% - 75px); } .shape-ico.color--blue path { fill: #f4f9fc; } .shape-ico.color--indigo path { fill: #f6f4fd; } .shape-ico.color--orchid path { fill: rgba(218, 112, 214, .1); } .shape-ico.color--pink path { fill: rgba(252, 234, 239, .7); } .shape-ico.color--purple path { fill: #f6f4fd; } .shape-ico.color--skyblue path { fill: rgba(4, 170, 255, .09); } .shape-ico.color--violet-red path { fill: rgba(199, 62, 155, .08); } /*------------------------------------------*/ /* PNG ICONS SETTINGS /*------------------------------------------*/ .img-20 img { width: 20px; height: 20px; } .img-25 img { width: 25px; height: 25px; } .img-30 img { width: 30px; height: 30px; } .img-35 img { width: 35px; height: 35px; } .img-40 img { width: 40px; height: 40px; } .img-45 img { width: 45px; height: 45px; } .img-50 img { width: 50px; height: 50px; } .img-55 img { width: 55px; height: 55px; } .img-60 img { width: 60px; height: 60px; } .img-65 img { width: 65px; height: 65px; } .img-70 img { width: 70px; height: 70px; } .img-75 img { width: 75px; height: 75px; } .img-80 img { width: 80px; height: 80px; } .img-85 img { width: 85px; height: 85px; } .img-90 img { width: 90px; height: 90px; } .img-95 img { width: 95px; height: 95px; } .img-100 img { width: 100px; height: 100px; } .img-105 img { width: 105px; height: 105px; } .img-110 img { width: 110px; height: 110px; } .img-115 img { width: 115px; height: 115px; } .img-120 img { width: 120px; height: 120px; } .img-125 img { width: 125px; height: 125px; } .img-130 img { width: 130px; height: 130px; } .img-135 img { width: 135px; height: 135px; } .img-140 img { width: 140px; height: 140px; } .img-145 img { width: 145px; height: 145px; } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .5); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* SECTION ID /*------------------------------------------*/ .section-id { display: block; font-size: 0.85rem; line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 32px; } /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title p { margin-top: 22px; margin-bottom: 0; } .section-title .btns-group { margin-top: 35px; } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages, .text-center .advantages { margin-top: 15px; } .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; } .advantages-links-divider { position: relative; top: 1px; transform: rotate(-90deg); } .advantages li p { display: inline-block; float: left; margin-bottom: 0; } .advantages.ico-15 li p span { position: relative; top: 2px; right: -1px; } .advantages.ico-15 [class*="flaticon-"]:before, .advantages.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .advantages li p a { font-weight: 400; text-decoration: underline; } .advantages li p a:hover { text-decoration: underline; } .white--color .advantages li p a:hover { color: var(--white); } /*------------------------------------------*/ /* COMPATABILITY /*------------------------------------------*/ .compatibility { display: inline-block; padding: 3px 20px; margin-top: 15px; margin-bottom: 0; } .compatibility span { position: relative; top: -1.5px; right: 2px; } .compatibility.ico-10 [class*="flaticon-"]:before, .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; } /*------------------------------------------*/ /* TOOLS LIST / PAYMENT METHODS /*------------------------------------------*/ .tools-list, .payment-methods { margin-top: 25px; } .tools-list p, .payment-methods p { font-weight: 400; margin-bottom: 12px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-right: 6px; } /*------------------------------------------*/ /* Payment Icons /*------------------------------------------*/ .payment-icons li { display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; padding-right: 5px; } .payment-icons li:last-child { padding-right: 0; } .payment-icons img { width: auto; max-width: inherit; max-height: 32px; } /*------------------------------------------*/ /* QUOTE /*------------------------------------------*/ .quote p { color: var(--gray); border-left: 3px solid var(--green); font-style: italic; padding-left: 20px; margin-bottom: 16px; } /*------------------------------------------*/ /* Quote Avatar /*------------------------------------------*/ .quote-avatar { display: inline-block; margin: 0 auto; } .quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* Quote Author /*------------------------------------------*/ .quote-author { position: relative; display: inline-block; padding: 0 0 0 15px; text-align: left; top: 16px; } .quote-author h6 { margin-bottom: 1px; } .quote-author span { font-size: 0.95rem; } /*------------------------------------------*/ /* USER AVATARS /*------------------------------------------*/ .txt-block .users { margin-top: 22px; } .users img { width: auto; max-width: inherit; max-height: 50px; } .users p { font-size: 0.935rem; position: relative; top: 13px; left: 10px; display: inline-block; line-height: 1.4; margin-bottom: 0; } .users p span { display: block; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--white, .color--white a, .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white); } .color--black, .color--black a, .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); } .color--header, .color--header a, .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); } .color--gray, .color--gray a, .color--gray :is(h1, h2, h3, h4, h5, h6) { color: var(--gray); } .color--lightgray, .color--lightgray a, .color--lightgray :is(h1, h2, h3, h4, h5, h6) { color: var(--light-gray); } .color--blue, .color--blue a, .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); } .color--green, .color--green a, .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); } .color--indigo, .color--indigo a, .color--indigo :is(h1, h2, h3, h4, h5, h6) { color: var(--indigo); } .color--lilac, .color--lilac a, .color--lilac :is(h1, h2, h3, h4, h5, h6) { color: var(--lilac); } .color--orchid, .color--orchid a, .color--orchid :is(h1, h2, h3, h4, h5, h6) { color: var(--orchid); } .color--pink, .color--pink a, .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); } .color--purple, .color--purple a, .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); } .color--red, .color--red a, .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); } .color--skyblue, .color--skyblue a, .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); } .color--violet-red, .color--violet-red a, .color--violet-red :is(h1, h2, h3, h4, h5, h6) { color: var(--violet-red); } .color--yellow, .color--yellow a, .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-upcase { text-transform: uppercase } .w-200 { font-weight: 200; } .w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .w-800 { font-weight: 800; } .w-900 { font-weight: 900; } /*------------------------------------------*/ /* TEXT HIGHLIGHT /*------------------------------------------*/ .highlight { background: linear-gradient(to right, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1875)); } /* ========================================================================== 03. PRELOADER SPINNER ========================================================================== */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: #f5f5f5; } #loader { display: block; position: relative; top: 50%; transform: translateY(-50%); } .cssload-spinner { position: absolute; width: 68px; height: 68px; left: 50%; margin-left: -34px; margin-top: -34px; } .cssload-spinner:after, .cssload-spinner:before { position: absolute; content: ""; border: 4px solid var(--blue); width: 64px; height: 64px; } .theme--blue .cssload-spinner:after, .theme--blue .cssload-spinner:before { border-color: var(--blue); } .theme--green .cssload-spinner:after, .theme--green .cssload-spinner:before { border-color: var(--green); } .theme--indigo .cssload-spinner:after, .theme--indigo .cssload-spinner:before { border-color: var(--indigo); } .theme--orchid .cssload-spinner:after, .theme--orchid .cssload-spinner:before { border-color: var(--orchid); } .theme--pink .cssload-spinner:after, .theme--pink .cssload-spinner:before { border-color: var(--pink); } .theme--purple .cssload-spinner:after, .theme--purple .cssload-spinner:before { border-color: var(--purple); } .theme--red .cssload-spinner:after, .theme--red .cssload-spinner:before { border-color: var(--purple); } .theme--skyblue .cssload-spinner:after, .theme--skyblue .cssload-spinner:before { border-color: var(--sky-blue); } .theme--violet-red .cssload-spinner:after, .theme--violet-red .cssload-spinner:before { border-color: var(--violet-red); } .cssload-spinner:after { animation: cssload-spinner1 2.5s linear infinite; -o-animation: cssload-spinner1 2.5s linear infinite; -ms-animation: cssload-spinner1 2.5s linear infinite; -webkit-animation: cssload-spinner1 2.5s linear infinite; -moz-animation: cssload-spinner1 2.5s linear infinite; } .cssload-spinner:before { width: 88px; height: 88px; margin-left: -13.5px; margin-top: -13.5px; animation: cssload-spinner2 2.5s linear infinite; -o-animation: cssload-spinner2 2.5s linear infinite; -ms-animation: cssload-spinner2 2.5s linear infinite; -webkit-animation: cssload-spinner2 2.5s linear infinite; -moz-animation: cssload-spinner2 2.5s linear infinite; } @keyframes cssload-spinner1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes cssload-spinner1 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-spinner1 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-spinner1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-spinner1 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes cssload-spinner2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-o-keyframes cssload-spinner2 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(-360deg); } } @-ms-keyframes cssload-spinner2 { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); } } @-webkit-keyframes cssload-spinner2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes cssload-spinner2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo img { width: auto; max-width: inherit; max-height: 42px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: var(--white)!important; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .dark-menu .wsmainfull { padding: 6px 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif!important; display: block; font-size: 1rem; line-height: 50px; font-weight: 600; letter-spacing: 0; text-decoration: none; margin: 0 7px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 35px; width: 0; } /*------------------------------------------*/ /* HEADER LINK INFO /*------------------------------------------*/ span.sm-info { position: relative; display: inline-block; text-align: center; width: 20px; height: 20px; color: var(--white); font-size: 0.65rem; line-height: 19px; font-weight: 700; margin-left: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; } .nav-blue .sm-info { background-color: var(--blue); } .nav-green .sm-info { background-color: var(--green); } .nav-indigo .sm-info { background-color: var(--indigo); } .nav-orchid .sm-info { background-color: var(--orchid); } .nav-pink .sm-info { background-color: var(--pink); } .nav-purple .sm-info { background-color: var(--purple); } .nav-red .sm-info { background-color: var(--red); } .nav-skyblue .sm-info { background-color: var(--sky-blue); } .nav-violet-red .sm-info { background-color: var(--violet-red); } /*------------------------------------------*/ /* HEADER BUTTONS /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 1rem; line-height: 30px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 14px; padding: 6px 28px 8px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 4px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 25px; } .wsmenu > .wsmenu-list > li a.store.header-store { line-height: 1; margin-top: 13px; margin-left: 10px; margin-bottom: 0; padding: 0; } /*------------------------------------------*/ /* LANGUAGE SELECT /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { width: auto; min-width: 115px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.875rem; padding: 8px 11px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 8px 11px; } /*------------------------------------------*/ /* HEADER STORE BADGES /*------------------------------------------*/ .store.header-store img { max-height: 44px; } /*------------------------------------------*/ /* HEADER SOCIAL LINKS /*------------------------------------------*/ .header-socials { margin: 0; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .header-socials a { display: block; margin-left: 15px; } .navbar-light .header-socials a { color: #ddd; } .navbar-light .header-socials a:hover { color: var(--silver); } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-20 [class*="flaticon-"]:after { line-height: 70px!important; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 200px; top: 62px; padding: 12px 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif!important; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* HEADER SUBMENU SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { min-width: 210px; position: absolute; left: 102%; top: 0; margin: 0; padding: 10px; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li { border-bottom: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { background-color: var(--tra-white-smoke); font-family: 'Plus Jakarta Sans', sans-serif!important; color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { position: absolute; top: 12px; right: 12px; } .sub-menu.ico-10 [class*="flaticon-"]:before, .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 62px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 33%; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-family: 'Plus Jakarta Sans', sans-serif!important; background-color: var(--tra-white-smoke); color: var(--black); font-size: 1rem; font-weight: 600; padding: 11px 14px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; transition: all 0.3s ease-in-out; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: var(--white-smoke); padding: 11px 14px; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 74%!important; left: 25%; padding: 20px 10px; } .wsmegamenu.w-75 .col-lg-3 { padding: 0 6px; } /*------------------------------------------*/ /* SUBMENU TITLE /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu .title, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title { color: var(--light-gray); font-family: 'Plus Jakarta Sans', sans-serif!important; font-size: 0.875rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 15px 13px; } /*------------------------------------------*/ /* DARK HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--metal)!important; border: solid 1px var(--metal)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } .dark-menu .title, .black-scroll .scroll .title, .dark-menu .icons-menu-txt span, .black-scroll .scroll .icons-menu-txt span { color: var(--white)!important; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--smoke); } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: var(--ink); } .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--blue); } .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--green); } .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--indigo); } .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--orchid); } .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--pink); } .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--purple); } .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--red); } .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--sky-blue); } .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--violet-red); } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR WHITE SCROLL /*------------------------------------------*/ .tra-menu.white-scroll .wsmainfull.scroll, .white-menu.white-scroll .wsmainfull.scroll, .tra-menu.border-header.white-scroll .wsmainfull.scroll { padding: 0; border: none; background-color: rgba(255, 255, 255, .7)!important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-box-shadow: 0 2px 3px var(--tra-gray); -moz-box-shadow: 0 2px 3px var(--tra-gray); box-shadow: 0 2px 3px var(--tra-gray); } .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--black); } .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--ink)!important; } /*------------------------------------------*/ /* NAVBAR BLACK SCROLL /*------------------------------------------*/ .tra-menu.black-scroll .wsmainfull.scroll, .dark-menu.black-scroll .wsmainfull.scroll { padding: 0; background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: var(--silver)!important; } /*------------------------------------------*/ /* WHITE SCROLL BUTTONS /*------------------------------------------*/ .white-scroll .scroll .btn--tra-white { color: var(--black)!important; border-color: var(--black)!important; } /*------------------------------------------*/ /* BLACK SCROLL BUTTONS /*------------------------------------------*/ .black-scroll .scroll .btn--tra-black { color: var(--white)!important; border-color: var(--white)!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-dark .logo-white, .navbar-light .logo-black, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-dark.black-scroll .scroll .logo-black { display: none; } .tra-menu.navbar-light .scroll .logo-black, .tra-menu.navbar-dark.black-scroll .scroll .logo-white { display: block; } /* ========================================================================== 05. HERO ========================================================================== */ .hero-section .container { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO DIGITS /*------------------------------------------*/ .hero-digits { padding-right: 20px; } #hd-1-1, #hd-1-2 { display: inline-block; float: left; padding-right: 20px; } #hd-1-1 { width: 48%; } #hd-1-2 { width: 48%; } .hero-digits h2.statistic-number { font-size: 3.35rem; line-height: 1; letter-spacing: -1.5px; margin-bottom: 10px; } .hero-digits h2.statistic-number small { font-size: 2.25rem; margin-left: 5px; } .hero-digits .block-txt p.p-sm { margin-bottom: 0; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ #hero-1 { position: relative; z-index: 3; background-image: url(../images/hero-1.jpg); padding-top: 150px; margin-bottom: 80px; } .hero-1-txt { margin-top: -15px; } .hero-1-txt h2 { font-size: 3.45rem; font-weight: 600; } .hero-1-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-1-txt .os-version-ext { margin-top: 22px; } .hero-1-img { text-align: center; padding: 0 20px; margin-bottom: -80px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ #hero-2 { background-image: url(../images/hero-2.jpg); padding-top: 180px; padding-bottom: 130px; } .hero-2-txt h2 { font-size: 3.75rem; } .hero-2-txt p.p-xl { padding: 0 8%; margin-top: 22px; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ #hero-3 { overflow: hidden; background-image: url(../images/hero-3.jpg); padding-top: 175px; } .theme--dark #hero-3 { background-image: url(../images/hero-3d.jpg); } .hero-3-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 70px; margin-bottom: 60px; } .hero-3-txt h2 { font-size: 3.75rem; } .hero-3-txt p.p-xl { font-size: 1.25rem; margin-top: 20px; margin-bottom: 32px; } .hero-3-txt .btn-txt { margin-top: 25px; } .hero-3-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ #hero-4 { overflow: hidden; background-image: url(../images/hero-4.jpg); padding-top: 170px; } .theme--dark #hero-4 { background-image: url(../images/hero-4d.jpg); } .hero-4-txt h2 { font-size: 3.5rem; } .hero-4-txt p.p-xl { padding: 0 2%; margin-top: 30px; margin-bottom: 30px; } .hero-4-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ #hero-5 { position: relative; z-index: 3; background-image: url(../images/hero-5.jpg); padding-top: 150px; margin-bottom: 60px; } #hero-5 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-5 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-5-txt { margin-top: -15px; padding-left: 5px; } .hero-5-txt h2 { font-size: 3.45rem; line-height: 1.3; font-weight: 600; } .hero-5-txt p.p-xl { padding-right: 2%; margin-top: 25px; margin-bottom: 35px; } .hero-5-img { text-align: center; padding-right: 30px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ #hero-6 { background-image: url(../images/hero-6.jpg); padding-top: 170px; } .theme--dark #hero-6 { background-image: url(../images/bg-dark.jpg); } #hero-6:after { position: absolute; content: ''; z-index: -1; width: 100%; height: 10%; bottom: 0; left: 0; background-color: var(--white); } .theme--dark #hero-6:after { background-color: var(--dark-theme-bg); } .hero-6-txt h2 { font-size: 3.65rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 25px; margin-bottom: 30px; } .hero-6-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-7 /*------------------------------------------*/ #hero-7 { overflow: hidden; position: relative; background-image: url(../images/hero-7.jpg); padding-top: 140px; padding-bottom: 40px; } #hero-7 .wave-shape-bottom { z-index: 6; } #hero-7 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-7 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-7-txt { margin-top: -30px; } .hero-7-txt h2 { font-size: 3.65rem; font-weight: 600; margin-bottom: 40px; } .hero-7-txt .os-version-ext { margin-top: 22px; } .hero-7-img { text-align: center; margin-bottom: -30%; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-8 { position: relative; background-image: url(../images/hero-8.jpg); padding-top: 160px; margin-bottom: 30px; } #hero-8 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-8 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-8-txt { margin-top: -30px; } .hero-8-txt h2 { font-size: 3.65rem; font-weight: 600; } .hero-8-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-8-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-8-img { position: relative; text-align: center; margin: 0 -100% -30px 0; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ #hero-9 { position: relative; background-image: url(../images/hero-9.jpg); padding-top: 170px; } .theme--dark #hero-9 { background-image: url(../images/hero-9d.jpg); } .hero-9-txt { margin-top: -30px; } .hero-9-txt h2 { font-size: 4rem; } .hero-9-txt p.p-lg { margin-top: 25px; margin-bottom: 35px; } .hero-9-img { text-align: center; padding-left: 15px; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ #hero-10 { background-image: url(../images/hero-10.jpg); padding-top: 170px; } .theme--dark #hero-10 { background-image: url(../images/hero-10d.jpg); } .hero-10-txt h2 { font-size: 3.5rem; } .hero-10-txt p.p-lg { padding: 0 2%; margin-top: 25px; margin-bottom: 35px; } .hero-10-txt p.btn-txt { margin-top: 40px; } #hero-10 .quick-form { margin: 35px 7% 0; } .hero-10-img { margin-top: 65px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ #hero-11 { background-image: linear-gradient(180deg, rgba(233, 224, 242, .8) 50%, rgba(233, 224, 242, .05) 100%); padding-top: 170px; } .theme--dark #hero-11 { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .hero-11-txt h2 { font-size: 3.35rem; } .hero-11-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } .hero-11-txt .quick-form { margin-top: 35px; margin-right: 3%; } .hero-11-img { text-align: center; padding-left: 25px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ #hero-12 { overflow: hidden; background-image: url(../images/hero-12.jpg); padding-top: 180px; } .theme--dark #hero-12 { background-image: url(../images/hero-12d.jpg); } .hero-12-txt h2 { font-size: 3.65rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-12-txt .advantages { margin-top: 20px; } .hero-12-img { margin-top: 60px; } /*------------------------------------------*/ /* HERO-13 /*------------------------------------------*/ #hero-13 { background-image: url(../images/hero-13.jpg); padding-top: 90px; padding-bottom: 15px; margin-bottom: 60px; } #hero-13 .wave-shape-bottom path { fill: var(--white); } .theme--dark #hero-13 .wave-shape-bottom path { fill: var(--dark-theme-bg); } .hero-13-txt { margin-top: -25px; } .hero-13-txt h2 { font-size: 3.25rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 25px; margin-bottom: 30px; } .hero-13-txt .quick-form { margin-top: 35px; margin-right: 4%; } .hero-13-img { text-align: center; padding-right: 35px; margin-bottom: -60px; } /*------------------------------------------*/ /* HERO-14 /*------------------------------------------*/ #hero-14 { background-image: url('../../../../images/hero-14.jpg')!important; padding-top: 170px; padding-bottom: 130px; } .hero-14-txt h2 { font-size: 4.35rem; } .hero-14-txt p.p-xl { padding: 0 3%; margin-top: 30px; margin-bottom: 30px; color:#fff; } /*------------------------------------------*/ /* HERO-15 /*------------------------------------------*/ #hero-15 { background-image: url(../images/hero-15.jpg); padding-top: 150px; margin-bottom: 100px; } .hero-15-txt { margin-top: -25px; padding-left: 20px; } .hero-15-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 105px; margin-bottom: 30px; } .hero-15-txt h2 { font-size: 3.25rem; } .hero-15-txt p.p-lg { padding-right: 2%; margin-top: 25px; margin-bottom: 25px; } .hero-15-img { text-align: center; padding-right: 20px; margin-bottom: -100px; } /*------------------------------------------*/ /* HERO-16 /*------------------------------------------*/ #hero-16 { overflow: hidden; padding-top: 180px; } .hero-16-txt h2 { font-size: 3.75rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 24px; margin-bottom: 28px; padding: 0 5%; } .hero-16-img { padding: 80px 60px 0; margin-top: 70px; } .hero-16-img img { margin-bottom: -30px; } /*------------------------------------------*/ /* HERO-17 /*------------------------------------------*/ #hero-17 { background-image: url(../images/hero-17.jpg); padding-top: 80px; } .theme--dark #hero-17 { background-image: url(../images/hero-17d.jpg); } .hero-17-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 90px; margin-bottom: 35px; } .hero-17-txt h2 { font-size: 4rem; letter-spacing: -0.5px; } .hero-17-txt p.p-md { margin-top: 20px; margin-bottom: 30px; } .hero-17-img { margin: 0 -30px 0 15px; } /*------------------------------------------*/ /* HERO-18 /*------------------------------------------*/ #hero-18 { background-image: url(../images/hero-18.jpg); padding-top: 100px; } .theme--dark #hero-18 { background-image: url(../images/hero-18d.jpg); } .hero-18-txt .hero-app-logo img { width: auto; max-width: inherit; max-height: 115px; margin-bottom: 35px; } .hero-18-txt h2 { font-size: 3.35rem; } .hero-18-txt p.p-xl { padding: 0 5%; margin-top: 35px; margin-bottom: 35px; } .hero-18-img { text-align: center; margin-top: 30px; } /*------------------------------------------*/ /* HERO QUICK FORM /*------------------------------------------*/ .hero-section .quick-form .input-group { border: none; } /*------------------------------------------*/ /* Hero Quick Form Input /*------------------------------------------*/ .hero-section .quick-form .form-control { height: 64px; background-color: var(--white); border: 2px solid var(--silver); color: #666; font-size: 1.125rem; font-weight: 400; padding: 0 20px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .hero-section .quick-form.form--shadow .form-control { border-color: transparent; -webkit-box-shadow: 0 5px 10px var(--tra-black); -moz-box-shadow: 0 5px 10px var(--tra-black); box-shadow: 0 5px 10px var(--tra-black); } .hero-section .quick-form.form-stroke .form-control { border-color: var(--black); } .hero-section .quick-form.form-half .form-control { height: 58px; font-size: 1.0625rem; } /*------------------------------------------*/ /* Hero Quick Form Placeholder /*------------------------------------------*/ .hero-section .quick-form .form-control::-moz-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Hero Quick Form Focus /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { background-color: var(--white); border-color: var(--black); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Hero Quick Form Button /*------------------------------------------*/ .hero-section .quick-form .btn { height: 64px; font-size: 1.0625rem; padding: 12px 45px; margin-left: 15px; } .hero-section .quick-form.form-half .btn { height: 58px; font-size: 1rem; padding: 13px 40px; margin-left: 12px; } /*------------------------------------------*/ /* Hero Quick Form Message /*------------------------------------------*/ .hero-section .quick-form-msg { width: 100%!important; display: block; margin: 20px 0 15px 5px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -15px 0; } .hero-section .quick-form-msg .loading { color: #3eb1ff; font-size: 1.05rem; line-height: 1; font-weight: 500; } .hero-section .text-center .quick-form-msg .loading { font-size: 1.125rem; } /* ========================================================================== 06. ABOUT ========================================================================== */ .about-1 { background-image: url(../images/about-1.jpg); margin-bottom: 80px; } .theme--dark .about-1 { background-image: url(../images/about-1d.jpg); } .about-2-title { margin-bottom: 25px; } .about-4-title { padding-right: 4%; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-1-txt h2 { font-size: 3.65rem; margin-bottom: 20px; } .about-1-txt h4 { line-height: 1.44; font-weight: 400; padding-right: 2%; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .about-1-img { margin-top: 60px; margin-bottom: -80px; } .about-3 .img-block.left-column { margin-right: 40px; } .about-3 .img-block.right-column { margin-left: 40px; } /* ========================================================================== 07. CAREERS ========================================================================== */ .jobs-category { padding: 0 50px 18px; margin-bottom: 30px; border: 1.5px solid transparent; } .jobs-category h4 { line-height: 1; padding-top: 40px; margin-bottom: 14px; } .career-item { position: relative; padding: 22px 0; } /*------------------------------------------*/ /* OPEN ROLE DESCRIPTION /*------------------------------------------*/ .position-data { margin-top: 3px; } .position-data li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .rb-divider { position: relative; top: 1.25px; transform: rotate(-90deg); margin-left: 2px; } .position-data.ico-15 [class*="flaticon-"]:before, .position-data.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .position-data li p { display: inline-block; float: left; margin-bottom: 0; } /*------------------------------------------*/ /* OPEN ROLE LINK /*------------------------------------------*/ .position-link { color: var(--header-color); position: absolute; top: 26px; right: 5px; transform: rotate(-45deg); } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* MORE CAREERS BUTTON /*------------------------------------------*/ .more-careers { text-align: center; margin-top: 60px; } .more-careers-holder { display: inline-block; margin: 0 auto; } .more-careers-txt { text-align: left!important; display: inline-block; float: left; } .more-careers-txt p { position: relative; top: 6px; margin-bottom: 0; } .more-careers-btn { display: inline-block; margin-left: 20px; } .more-careers-btn .btn { font-size: 0.875rem; padding: 0.6rem 1.35rem; } /* ========================================================================== 08. JOB POSITION =========================================================================== */ .job-position-title { padding-top: 170px; padding-bottom: 100px; margin-bottom: 30px; } .jb-txt { position: relative; } .jb-txt h2 { padding-right: 20%; } .job-position-title .position-data { margin-top: 20px; } .job-position-title .rb-divider { top: 3.5px; } .job-position-title .btn { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; padding: 0.7rem 1.4rem; } /*------------------------------------------*/ /* JOB POSITION TYPOGRAPHY /*------------------------------------------*/ .position-info h5 { margin-top: 60px; margin-bottom: 30px; } .position-info p span { color: var(--header-color); font-weight: 600; } .position-info .btn { margin-top: 35px; } /* ========================================================================== 09. FEATURES ========================================================================== */ .fbox-5-wrapper { padding: 90px 55px; } .features-2 .section-title p.p-xl { font-size: 1.25rem; margin-top: 0; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 40px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3 { margin-bottom: 50px; } /*------------------------------------------*/ /* FEATURE BOX /*------------------------------------------*/ .fbox-3 { border: 1px solid var(--silver); padding: 40px 20px 30px; } .fbox-3.bg--white { border: 1px solid transparent; padding: 40px 20px 30px; } .fbox-4 { padding: 60px; border: 1px solid transparent; } .fbox-4.fb-5, .fbox-4.fb-6 { padding: 70px 65px; } .ico-title .fbox-4.fb-5, .ico-title .fbox-4.fb-6 { padding: 45px 50px 35px; } .fbox-4.fb-7, .fbox-4.fb-8 { position: relative; overflow: hidden; padding: 70px 50px 0; } .ico-title .fbox-4.fb-7, .ico-title .fbox-4.fb-8 { padding: 45px 50px 0; } .fbox-4-txt { padding-left: 60px; } .fbox-4-txt h2, .fbox-4-txt h3 { margin-bottom: 20px; } .fbox-4-txt h3.h3-lg { font-size: 2.5625rem; } .fbox-4-txt .btn { margin-top: 25px; } .fbox-5 { padding: 80px 53px 70px; border: 1.5px solid transparent; } /*------------------------------------------*/ /* FEATURE BOX VECTOR ICON /*------------------------------------------*/ .fbox-ico, .fbox-ico.ico-rounded { margin-bottom: 15px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 20px; } .fbox-ico[class*="img-"], .fbox-ico.ico-rounded-md, .fbox-ico.ico-rounded-lg { margin-bottom: 20px; } /*------------------------------------------*/ /* FEATURE BOX IMAGE /*------------------------------------------*/ .fbox-img img { width: auto; max-width: inherit; } .fbox-img.h-175 img { max-height: 175px; } .fbox-img.h-180 img { max-height: 180px; } .fbox-6 .fbox-img { margin-bottom: 35px; } /*------------------------------------------*/ /* FBOX-4 IMAGE /*------------------------------------------*/ .fbox-4.fb-1 .fbox-4-img { margin: 40px 5% 0; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 45px 0 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 5% 40px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 40px 5% 0; } /*------------------------------------------*/ /* FBOX-5 IMAGE /*------------------------------------------*/ .fbox-5-img img { width: auto; max-width: inherit; max-height: 255px; margin-bottom: 25px; } /*------------------------------------------*/ /* FBOX-7 IMAGE /*------------------------------------------*/ .fbox-7 .fbox-img { -webkit-border-radius: 12px 12px 0 0; -moz-border-radius: 12px 12px 0 0; -o-border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; } .fbox-7 .fbox-img.h-175 { padding-top: 40px; margin: 0 8px 60px; } .fbox-7 .fbox-img.h-180 { padding-top: 42px; margin: 0 5px 60px; } .fbox-7 .fbox-img img { margin-bottom: -25px; } /*------------------------------------------*/ /* FBOX-2 /*------------------------------------------*/ .fbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .fbox-ico-wrap { position: relative; margin-right: 30px; } .fbox-2 .fbox-ico { margin-top: 2px; } .fbox-2 .fbox-txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* FBOX TYPOGRAPHY /*------------------------------------------*/ .fbox-2 h5, .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 20px; margin-bottom: 12px; } .fbox-4 h5 { margin-bottom: 16px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 24px; } .fbox-5 h5 { margin-bottom: 16px; } .fbox-3 p, .fbox-5 p, .fbox-wrapper p, .fbox-4 p.mb-0 { margin-bottom: 0; } .fbox-4 p { margin-bottom: 14px; } /*------------------------------------------*/ /* FEATURES DOWNLOAD BUTTON /*------------------------------------------*/ .features-2-download { margin-top: 80px; } .features-2-download p.p-sm { font-size: 0.9rem; margin-top: 20px; margin-bottom: 0; } /* ========================================================================== 10. CONTENT ========================================================================== */ .ct-07 { overflow: hidden; } .ct-08 { margin-bottom: 80px; } .ct-09 { margin-top: 80px; } .ct-06 .section-overlay { margin-bottom: 100px; } .bc-03 .section-title { margin-bottom: 50px; } .bc-04 { margin: 30px 0; } /*------------------------------------------*/ /* CONTENT BOX WRAPPER /*------------------------------------------*/ .bc-01-wrapper, .bc-02-wrapper { border: 1px solid transparent; } .bc-04-wrapper { border: 2.5px solid #d2d2eb; padding-left: 60px; } .bc-01 .section-overlay { padding: 80px 65px; } .bc-02 .section-overlay { padding: 65px 60px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 60px; } .bc-02.pt-30.bc-02-top { margin-top: 70px; } .bc-03 .section-overlay { padding: 80px 70px 0; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .txt-box { margin-bottom: 25px; } .bc-01 .txt-box { margin-bottom: 30px; } .txt-box:last-child, .bc-01 .txt-box:last-child { margin-bottom: 0; } .ct-07 .txt-block { margin-top: -30px; } .ct-08 .txt-block { margin-top: -30px; } .bc-01 .txt-block.left-column { padding-right: 20px; } .bc-01 .txt-block.right-column { padding-left: 20px; } .bc-04 .txt-block { padding-right: 30px; } /*------------------------------------------*/ /* CONTENT BOX /*------------------------------------------*/ .cbox-1, .cbox-2 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-4-wrapper { margin-top: 20px; } .cbox-5 { display: inline-block; width: 390px; min-width: 390px; padding: 18px 24px 16px 24px; } .cbox-5.cb-1 { margin: 12px 0 25px; } /*------------------------------------------*/ /* CONTENT BOX ICON /*------------------------------------------*/ .cbox-1 .ico-wrap { position: relative; margin-right: 1.625rem; } .cbox-1-ico { text-align: center; position: relative; width: 2.25rem; height: 2.25rem; font-size: 1.125rem; line-height: 2rem; font-weight: 600; border: 3px solid transparent; border-radius: 100%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .cbox-1-line { position: absolute; bottom: 14px; left: 50%; width: 2px; background-color: var(--smoke); height: calc(100% - 70px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .cbox-1:hover .cbox-1-ico { background-color: transparent; } .cbox-1:hover .cbox-1-ico.bg--black { color: var(--black); border-color: var(--black); } .cbox-1:hover .cbox-1-ico.bg--blue { color: var(--blue); border-color: var(--blue); } .cbox-1:hover .cbox-1-ico.bg--green { color: var(--green); border-color: var(--green); } .cbox-1:hover .cbox-1-ico.bg--indigo { color: var(--indigo); border-color: var(--indigo); } .cbox-1:hover .cbox-1-ico.bg--orchid { color: var(--orchid); border-color: var(--orchid); } .cbox-1:hover .cbox-1-ico.bg--pink { color: var(--pink); border-color: var(--pink); } .cbox-1:hover .cbox-1-ico.bg--purple { color: var(--purple); border-color: var(--purple); } .cbox-1:hover .cbox-1-ico.bg--red { color: var(--red); border-color: var(--red); } .cbox-1:hover .cbox-1-ico.bg--skyblue { color: var(--sky-blue); border-color: var(--sky-blue); } .cbox-1:hover .cbox-1-ico.bg--violet-red { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* CBOX #2 /*------------------------------------------*/ .cbox-2 .ico-wrap { position: relative; text-align: center; margin-top: 0; margin-right: 1.25rem; } .cbox-2 .cbox-2-ico { position: relative; top: 5px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3rem; } /*------------------------------------------*/ /* CBOX #5 /*------------------------------------------*/ .cbox-5-ico { display: inline-block!important; float: left; text-align: center; } /*------------------------------------------*/ /* CBOX #6 /*------------------------------------------*/ .cbox-6-wrapper { position: relative; } .cbox-6 { border: 1px solid var(--snow); padding: 40px; margin: 0 12%; z-index: 1; } .cbox-6 hr { margin-top: 35px; margin-bottom: 25px; } /*------------------------------------------*/ /* CBOX #6 TITLE /*------------------------------------------*/ .cbox-6-title p.p-md { line-height: 1; } .cbox-6 .statistic-number sup { font-size: 3rem; top: -10px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 15px; } .cbox-6-title p.p-md.ico-10 span { font-weight: 600; } /*------------------------------------------*/ /* CBOX #6 TEXT /*------------------------------------------*/ .cbox-6-txt h5 { margin-bottom: 10px; } /*------------------------------------------*/ /* CBOX #6 DATA /*------------------------------------------*/ .cbox-6-data { padding: 18px 25px; } .cbox-6-data h4 { letter-spacing: -0.5px; } .cbox-6-data p { margin: 0; } /*------------------------------------------*/ /* CBOX #6 SHAPE /*------------------------------------------*/ .cb-shape-1 { position: absolute; right: 30px; top: -35px; z-index: -1; } .cb-shape-2 { position: absolute; left: 30px; bottom: -25px; z-index: -1; } .cb-shape-1 img, .cb-shape-2 img { width: 100%; height: 100%; object-fit: cover; } /*------------------------------------------*/ /* CBOX #7 /*------------------------------------------*/ .cbox-7 { display: flex; position: relative; flex-flow: row wrap; align-items: stretch!important; justify-content: flex-start; } .cbox-7-txt { overflow: hidden; flex: 1; max-width: 100%; padding-left: 14px; } .cbox-7-ico { background-image: linear-gradient(0deg, #d4dbff 0%, #fff 100%); width: 28px; height: 28px; margin-top: 2px; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 26px; } .cbox-7-txt p { margin-bottom: 14px; } /*------------------------------------------*/ /* CONTENT BOX TEXT /*------------------------------------------*/ .cbox-1-txt, .cbox-2-txt { overflow: hidden; flex: 1; max-width: 100%; } .cbox-1-txt { margin-bottom: 30px; } .cbox-2-txt { margin-bottom: 40px; } .two-txt .cbox-2-txt { margin-bottom: 25px; } .cbox-1:last-child .cbox-1-txt, .cbox-2:last-child .cbox-2-txt { margin-bottom: 0; } .cbox-3-txt { margin-bottom: 40px; } .cbox-3:last-child .cbox-3-txt { margin-bottom: 0; } .cbox-5-txt { display: inline-block!important; padding-left: 18px; } /*------------------------------------------*/ /* CONTENT BOX TITLE /*------------------------------------------*/ .cbox-title { margin-bottom: 18px; } .cbox-title span { float: left; line-height: 1!important; margin-right: 20px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.35rem; } .cbox-title h5 { line-height: 2.1875rem!important; margin-bottom: 0!important; } .box-title { margin-bottom: 14px; } .box-title span { position: relative; top: 10px; right: 4px; } .box-title h6 { display: inline-block; margin-bottom: 0; } /*------------------------------------------*/ /* CONTENT BOX TYPOGRAPHY /*------------------------------------------*/ .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 15px!important; } .cbox-5-txt h6 { margin-bottom: 2px; } .bc-02 .txt-block h5 { margin-bottom: 25px; } .cbox-1-txt p, .cbox-2-txt p, .cbox-3-txt p, .cbox-5-txt p, .cbox-4 p { margin-bottom: 0; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h3, .txt-block h2 { margin-bottom: 25px; } .txt-block h5 { margin-bottom: 20px; } h5.h5-title { margin: 20px 0; } .txt-block-tra-link { margin-top: 20px; } .txt-block .btn { margin-top: 30px; } .txt-block .btn.btn--transparent { margin-top: 0; } .txt-block .stores-badge { margin-top: 30px; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion-1 .accordion-item { background-color: transparent; padding: 22px 0 26px; border: none; border-bottom: 1.5px solid var(--smoke); border-radius: 0 0; } .txt-block .accordion-thumb { margin: 0; padding: 0; cursor: pointer; position: relative; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 1px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .txt-block .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } .txt-block .accordion-1 .accordion-panel { color: var(--gray); margin: 0; padding: 0 0 0 5px; display: none; } .txt-block .accordion-1 .accordion-thumb h5 { color: var(--header-color); line-height: 1; padding-left: 5px; margin-bottom: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 24px; } /*------------------------------------------*/ /* TEXT BLOCK TABS /*------------------------------------------*/ #tabs-1 .tab-content { display: none; } #tabs-1 .tab-content.current { display: inherit; } .tabs-1 li { cursor: pointer; background-color: transparent; border: none; margin-bottom: 8px; padding: 25px 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tabs-1 li:last-child { margin-bottom: 0; } .tab-link h5, .tab-link p { color: #858585; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .tab-link p { margin: 10px 0 0; } /*------------------------------------------*/ /* TAB LINK HOVER /*------------------------------------------*/ .tabs-1 li:hover { background-color: #f9f9f9; } /*------------------------------------------*/ /* TAB LINK CURRENT /*------------------------------------------*/ #tabs-1 .tabs-1 li.current, #tabs-1 .tabs-1 li.current:hover { background-color: #f3f3f5; } #tabs-1 .tabs-1 li.current { cursor: auto; } #tabs-1 .tabs-1 li:hover h5, #tabs-1 .tabs-1 li.current h5 { color: var(--header-color); } #tabs-1 .tabs-1 li:hover p, #tabs-1 .tabs-1 li.current p { color: var(--gray); } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 25px; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 25px; } .ct-03 .img-block img { max-width: none; display: inline-block; margin-left: 30px; } .ct-04 .img-block img { max-width: none; margin-left: -100%; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -100px; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -80px; } .ct-09 .img-block { margin-top: -80px; } .img-block-txt, .img-block-btn { text-align: center; margin-top: 45px; } .img-block-hidden .video-btn { top: calc(50% - 30px); } .bc-3-img .video-btn { top: calc(50% - 70px); } .bc-2-img.right-column { margin-left: 20px; } .bc-2-img.left-column { margin-right: 20px; } .bc-3-img { margin-bottom: -200px; } .bc-4-img { transform: rotate(3deg); margin: -20px 0; } /* ========================================================================== 11. STATISTIC =========================================================================== */ .statistic-1-wrapper .statistic-block-digit { width: 36%; display: inline-block!important; float: left; } .statistic-1-wrapper .statistic-block-txt { width: 64%; display: inline-block!important; padding-left: 16px; } #sb-3-1, #sb-3-2 { width: 48%; display: inline-block; float: left; } .statistic-4-wrapper .statistic-block { padding: 10px 40px; } #sb-4-1, #sb-4-2 { border-right: 1px solid var(--tra-smoke); } /*------------------------------------------*/ /* STATISTIC BLOCK ICON /*------------------------------------------*/ .statistic-ico { margin-bottom: 15px; } .statistic-block .txt-block-rating { margin-bottom: -3px; } /*------------------------------------------*/ /* STATISTIC BLOCK NUMBER /*------------------------------------------*/ h3.statistic-number, h2.statistic-number { line-height: 1; font-weight: 700; letter-spacing: -1px; margin-bottom: 0; } #sb-2-2 h2.statistic-number { letter-spacing: -2px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 15px; } /*------------------------------------------*/ /* STATISTIC BLOCK TYPOGRAPHY /*------------------------------------------*/ .statistic-2-wrapper h2 { margin-bottom: 15px; } .statistic-2-wrapper .txt-block h4, .statistic-2-wrapper .txt-block h3 { line-height: 1.35; } .statistic-4-wrapper h5 { margin-top: 25px; margin-bottom: 15px; } .statistic-1-wrapper p { position: relative; line-height: 1.35; top: 4px; margin-bottom: 0; } .txt-block-stat p, .statistic-block-txt p, .statistic-2-wrapper p, .statistic-4-wrapper p { margin-bottom: 0; } /* ========================================================================== 12. RATING =========================================================================== */ .rating-1-wrapper.text-center { padding: 0 16%; } .rating-2-wrapper.text-center { padding: 0 13%; } .rating-title { text-align: center; } .rating-title h6, .rating-title h5 { margin-bottom: 0; } /*------------------------------------------*/ /* RATING BOX LOGO /*------------------------------------------*/ .rbox-1-img { margin-bottom: 15px; } .rbox-1-img img { width: auto; max-width: inherit; max-height: 35px; } .rbox-2-img img { width: auto; max-width: inherit; max-height: 80px; } #rb-2-2 .rbox-2-img img { max-height: 145px; } /*------------------------------------------*/ /* RATING BOX TYPOGRAPHY /*------------------------------------------*/ .rbox-1 .star-rating { display: inline-block; font-size: 1rem; line-height: 15px; font-weight: 500; vertical-align: inherit; background-color: var(--white); padding: 5px 18px; } .rbox-1 .star-rating span { position: relative; color: #ffb30c; top: -1px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 0.9rem; } .rbox-1 .star-rating { font-size: 0.86rem; line-height: 1; } .rbox-2 p { font-family: 'Plus Jakarta Sans', sans-serif!important; line-height: 1; font-weight: 500; margin-top: 15px; margin-bottom: 0; } .rbox-2 p span { font-weight: 700; } /* ========================================================================== 13. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper { padding: 0 10px; } .reviews-3-wrapper:after { position: absolute; content: ''; z-index: -1; width: 86%; height: 85%; top: 8%; left: 7%; background-color: var(--white-smoke); } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { position: relative; border: 1.5px solid transparent; padding: 35px; margin: 0 12px 30px; } .review-1.no-title { padding: 50px 35px 35px; } .review-2 { padding: 0 30px; margin-bottom: 30px; } .review-3 { position: relative; padding: 45px 40px 35px; } #rw-3-1, #rw-3-2 { margin-bottom: 20px; } .review-item { position: relative; width: 33.33%; padding: 0 12px; margin-bottom: 24px; } .review-4 { position: relative; padding: 35px 28px; border: 1px solid transparent; } /*------------------------------------------*/ /* TESTIMONIAL ICON /*------------------------------------------*/ .review-ico.ico-45 { position: absolute; top: 15px; right: 25px; opacity: .12; } .review-ico.ico-60 { position: absolute; top: 15px; left: 25px; opacity: .12; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-1-txt h6.h6-md, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg, .review-4-txt h6.h6-lg { line-height: 1.4; padding-right: 5%; margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.225rem; line-height: 1.4; padding-right: 5%; margin-bottom: 12px; } .review-1.text-center h6.h6-md, .review-1.text-center h6.h6-lg { padding-right: 0; } .review-2-txt h6.h6-lg { margin-bottom: 14px; } .review-1-txt p, .review-2-txt p, .review-3-txt p, .review-4-txt p { margin-bottom: 15px; } .review-4-txt p.mb-0 { margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-rating.ico-10 { margin-bottom: 5px; } .review-author .review-rating.ico-10 { margin-bottom: 2px; } .review-rating.ico-15 { margin-bottom: 8px; } .review-rating.ico-15.mb-15 { margin-bottom: 12px; } .review-rating.ico-10 [class*="flaticon-"]:before, .review-rating.ico-10 [class*="flaticon-"]:after { font-size: 0.935rem; } .review-rating.ico-15 [class*="flaticon-"]:before, .review-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /*------------------------------------------*/ /* TESTIMONIAL DATA /*------------------------------------------*/ .author-data { margin-top: 20px; } .author-data.mt-25 { margin-top: 25px; } .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } /*------------------------------------------*/ /* TESTIMONIAL AVATAR /*------------------------------------------*/ .review-avatar { margin: 0 auto; float: left; } .review-avatar img { width: 46px; height: 46px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-3 .review-avatar img { width: 54px; height: 54px; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .author-data .review-author { position: relative; display: inline-block; text-align: left; padding: 0 0 0 14px; } .review-author.mt-15 { margin-top: 16px; } .review-3 .review-author { margin-top: 5px; } .review-author h6 { font-size: 0.975rem; line-height: 1; margin-bottom: 9px; } .review-author.mt-15 h6 { margin-bottom: 0; } .review-author h6 span { color: var(--gray); font-size: 0.95rem; font-weight: 400; } .review-author p { font-size: 0.925rem; line-height: 1; font-weight: 300; margin-bottom: 0; } .review-author p a { font-weight: 400; } /*------------------------------------------*/ /* TESTIMONIAL BUTTON /*------------------------------------------*/ .reviews-btn { text-align: center; margin-top: 65px; } /*------------------------------------------*/ /* TESTIMONIAL CAROUSEL DOTS /*------------------------------------------*/ .reviews-section button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { margin: 0 7px; } .owl-dots button:focus { outline: none; text-decoration: none; } /* ========================================================================== 14. TEAM =========================================================================== */ .team-member { margin-bottom: 50px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; overflow: hidden; text-align: center; margin-bottom: 30px; } /*------------------------------------------*/ /* PHOTO HOVER ZOOM /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: .45; -moz-opacity: .45; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data { padding-left: 8px; } .team-member-data h6 { margin-bottom: 8px; } .team-member-data p { font-size: 0.975rem; line-height: 1; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } /* ========================================================================== 15. PRICING =========================================================================== */ .pricing-3-wrapper { padding: 0 4%; } .p-table { border: 1.5px solid transparent; margin-bottom: 40px; } .p-table.theme--border { border: 3px solid var(--theme-color); } .p-table.gray--border { border: 3px solid var(--tra-black); } .p-table.blue--border { border: 3px solid var(--blue); } .p-table.green--border { border: 3px solid var(--green); } .p-table.indigo--border { border: 3px solid var(--indigo); } .p-table.orchid--border { border: 3px solid var(--orchid); } .p-table.pink--border { border: 3px solid var(--pink); } .p-table.purple--border { border: 3px solid var(--purple); } .p-table.red--border { border: 3px solid var(--red); } .p-table.skyblue--border { border: 3px solid var(--sky-blue); } .p-table.violet-red--border { border: 3px solid var(--violet-red); } .pricing-1-table { padding: 45px 35px; } .pricing-2-table, .pricing-3-table { padding: 30px 40px; } .pricing-2-table.bg--white, .pricing-3-table.bg--white { border: 1px solid #ddd; -webkit-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); -moz-box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); box-shadow: 4px 8px 20px 0 rgba(20, 20, 20, .05); } #pt-3-1 { margin: 0 10px 40px 50px; } #pt-3-2 { margin: 0 50px 40px 10px; } /*------------------------------------------*/ /* TABLE HEADER /*------------------------------------------*/ .pricing-table-header { position: relative; } .pricing-table-header h5 { margin-bottom: 30px; } /*------------------------------------------*/ /* PRICING TABLE DISCOUNT /*------------------------------------------*/ .pricing-discount { position: absolute; top: -2px; right: -5px; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.915rem; line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* PRICE /*------------------------------------------*/ .price span { color: var(--header-color); font-family: 'Plus Jakarta Sans', sans-serif!important; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -2px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.5rem; } /*------------------------------------------*/ /* DOLLAR SIGN /*------------------------------------------*/ .price sup { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--header-color); font-size: 2.05rem; font-weight: 600; top: -5px; right: 2px; letter-spacing: -1px; } /*------------------------------------------*/ /* Validity /*------------------------------------------*/ .price sup.validity { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 400; top: -2px; left: 0; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.65rem; } /*------------------------------------------*/ /* Text /*------------------------------------------*/ .price p { margin-top: 20px; margin-bottom: 20px; } .pricing-section .btn-txt a { text-decoration: underline; } /*------------------------------------------*/ /* PRICING FEATURES /*------------------------------------------*/ .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 20px; } .pricing-features li { padding: 11px 8px; } .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 9px 8px; } .pricing-features li p { line-height: 1; font-weight: 400; margin-bottom: 0; } .pricing-features li p span { position: relative; top: -2px; right: 5px; } .pricing-features.ico-10 li p span { top: 0; right: 4px; } .pricing-features.ico--blue span { color: var(--blue); } .pricing-features.ico--green span { color: var(--green); } .pricing-features.ico--indigo span { color: var(--indigo); } .pricing-features.ico--orchid span { color: var(--orchid); } .pricing-features.ico--pink span { color: var(--pink); } .pricing-features.ico--purple span { color: var(--purple); } .pricing-features.ico--red span { color: var(--red); } .pricing-features.ico--skyblue span { color: var(--sky-blue); } .pricing-features.ico--violet-red span { color: var(--violet-red); } .pricing-features.ico-5 [class*="flaticon-"]:before, .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; } .pricing-features li.disabled-option p, .pricing-features li.disabled-option span { color: var(--disable)!important; } /*------------------------------------------*/ /* PRICING TABLE BUTTON /*------------------------------------------*/ .pt-btn { display: block; width: 100%; margin-top: 25px; } .p-table p.btn-txt { margin: 14px 0 0 0; } /*------------------------------------------*/ /* PRICING TOGGLE BUTTON /*------------------------------------------*/ .ext-toggle-btn { text-align: center; } .toggle-btn.inn-toggle-btn { position: absolute; } /*------------------------------------------*/ /* TOGGLE BUTTON TYPOGRAPHY /*------------------------------------------*/ .toggler-txt { font-size: 1.15rem; font-weight: 500; line-height: 36px; } .toggle-btn p { margin-top: 12px; letter-spacing: -0.25px; margin-bottom: 0; } /*------------------------------------------*/ /* TOGGLE BUTTON SWITCHER /*------------------------------------------*/ .switch-wrap { position: relative; display: inline-block; vertical-align: middle; min-width: 60px; height: 36px; margin: 0 8px; } .switcher { display: block; cursor: pointer; color: var(--white); font-size: 0.925rem; font-weight: 500; height: 36px; padding: 0 20px 0 40px; position: relative; border-radius: 36px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .theme--blue .switcher { background-color: var(--blue); } .theme--green .switcher { background-color: var(--green); } .theme--indigo .switcher { background-color: var(--indigo);} .theme--orchid .switcher { background-color: var(--orchid); } .theme--pink .switcher { background-color: var(--pink); } .theme--purple .switcher { background-color: var(--purple); } .theme--red .switcher { background-color: var(--red); } .theme--skyblue .switcher { background-color: var(--sky-blue); } .theme--violet-red .switcher { background-color: var(--violet-red); } .switcher .show-annual, .switcher .show-monthly { line-height: 36px; } .switcher .show-monthly { display: block; } .switcher .show-annual { display: none; } .switcher:before { position: absolute; left: 5px; bottom: 4px; content: " "; background-color: var(--white); width: 28px; height: 28px; border-radius: 50%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .switch-wrap input { display: none; } .switch-wrap input:checked + .switcher { padding: 0 40px 0 20px; } .switch-wrap input:checked + .switcher:before { left: auto; right: 4px; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .switch-wrap input:checked + .switcher .show-annual { display: block; } .switch-wrap input:checked + .switcher .show-monthly { display: none; } /*------------------------------------------*/ /* PRICING NOTICE TEXT /*------------------------------------------*/ .pricing-notice { text-align: center; margin-top: 20px; } .pricing-notice p { padding: 0 5%; margin-bottom: 0; } .pricing-notice p span { font-weight: 600; } /*------------------------------------------*/ /* COMPARE PRICING TABLE /*------------------------------------------*/ .table>:not(caption)>*>* { padding: 17px 0; border: none!important; background-color: transparent!important; } .comp-table .pricing-header { max-width: 700px; } .comp-table .table thead tr, .comp-table .table tbody tr { border-bottom: 1px solid var(--silver)!important; } .comp-table .table tbody tr.table-last-tr { border-bottom: none!important; } .comp-table .table-responsive thead th { font-size: 1.0625rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody th { font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .comp-table .table-responsive tbody td { position: relative; font-size: 0.95rem; line-height: inherit; top: 1px; } .comp-table .table-responsive tbody td span { position: relative; top: 1px; } .table>:not(caption)>*>* { color: var(--header-color); } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .comp-table .disabled-option { color: var(--light-gray); } .comp-table .color--blue { color: var(--blue); } .comp-table .color--green { color: var(--green); } .comp-table .color--indigo { color: var(--indigo); } .comp-table .color--orchid { color: var(--orchid); } .comp-table .color--purple { color: var(--purple); } .comp-table .color--red { color: var(--red); } .comp-table .color--sky { color: var(--sky); } .comp-table .color--skyblue { color: var(--sky-blue); } .comp-table .color--violet-red { color: var(--violet-red); } /*------------------------------------------*/ /* PRICING COMPARE PAYMENT /*------------------------------------------*/ .comp-table-payment h6 { margin-bottom: 16px; } .comp-table-payment p { margin-bottom: 0; } /* ========================================================================== 16. INTEGRATIONS =========================================================================== */ .int-1-wrapper { padding: 80px 70px; } .int-2-wrapper { padding: 0 3%; } .integrations-3 { margin-bottom: -22px; } /*------------------------------------------*/ /* FILTER BUTTONS /*------------------------------------------*/ .filter-btns button { background-color: transparent; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--black); font-size: 1.0625rem; line-height: 1; font-weight: 600; margin: 0 14px; padding: 0.5rem 0.1rem; border: none; cursor: pointer; border-bottom: 3px solid transparent; outline: 0px none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* Filter Button Active /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--blue); cursor: default; border-color: var(--blue); outline: 0px none; } .theme--blue .filter-btns button.is-checked { color: var(--blue); border-color: var(--blue); } .theme--green .filter-btns button.is-checked { color: var(--green); border-color: var(--green); } .theme--indigo .filter-btns button.is-checked { color: var(--indigo); border-color: var(--indigo); } .theme--orchid .filter-btns button.is-checked { color: var(--orchid); border-color: var(--orchid); } .theme--pink .filter-btns button.is-checked { color: var(--pink); border-color: var(--pink); } .theme--purple .filter-btns button.is-checked { color: var(--purple); border-color: var(--purple); } .theme--red .filter-btns button.is-checked { color: var(--red); border-color: var(--red); } .theme--skyblue .filter-btns button.is-checked { color: var(--sky-blue); border-color: var(--sky-blue); } .theme--violet-red .filter-btns button.is-checked { color: var(--violet-red); border-color: var(--violet-red); } /*------------------------------------------*/ /* FILTER ITEM /*------------------------------------------*/ .integrations-3 .filter-item { position: relative; width: 33.33%; padding: 0 10px; margin-bottom: 22px; } /*------------------------------------------*/ /* INTEGRATION TOOL /*------------------------------------------*/ .int_tool-1 { display: block; margin-bottom: 40px; } .int_tool-2 { text-align: center; vertical-align: center; background-color: var(--white); border: 1px solid var(--silver); padding: 25px 20px; margin-bottom: 30px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .int_tool-3 { background-color: var(--white); padding: 20px 26px 22px; border: 1px solid var(--silver); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* INTEGRATION TOOL LOGO /*------------------------------------------*/ .int_tool-1 .tool_logo { border: 1.5px solid transparent; padding: 35px 25px; margin-bottom: 30px; } .int_tool-1 img { width: 65px; height: 65px; } .int_tool-2 img { width: 60px; height: 60px; } .int_tool-3 img { width: 40px; height: 40px; } /*------------------------------------------*/ /* INTEGRATION TOOL TEXT /*------------------------------------------*/ .tool_txt { overflow: hidden; flex: 1; max-width: 100%; } /*------------------------------------------*/ /* INTEGRATION TOOL TYPOGRAPHY /*------------------------------------------*/ .tool_txt h6 { font-size: 1.1875rem; margin-top: 2px; } .tool_logo h6 { position: relative; display: inline-block; line-height: 40px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { line-height: 1; margin-bottom: 0; } .int_tool-2 h6 { font-size: 0.925rem; line-height: 1; margin-top: 18px; } .tool_txt p { margin-top: 3px; margin-bottom: 0; } .tool_description p { font-size: 0.95rem; margin-top: 14px; margin-bottom: 0; } /*------------------------------------------*/ /* INTEGRATION TOOL HOVER /*------------------------------------------*/ .int_tool-2:hover, .int_tool-3:hover { border-color: transparent; -webkit-box-shadow: 0 4px 12px 0 var(--tra-black); -moz-box-shadow: 0 4px 12px 0 var(--tra-black); box-shadow: 0 4px 12px 0 var(--tra-black); } /*------------------------------------------*/ /* INTEGRATION MORE BUTTON /*------------------------------------------*/ .integrations-1 .more-btn { margin-top: 15px; } /* ========================================================================== 17. MORE APPS =========================================================================== */ .apps-1-wrapper { padding: 0 5%; } .app-box { display: block; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 50px; } /*------------------------------------------*/ /* MORE APPS TYPOGRAPHY /*------------------------------------------*/ .app-box h6, .app-box h5 { line-height: 1; margin-top: 30px; margin-bottom: 12px; } .app-box p.app-cat { color: var(--gray); line-height: 1; margin-bottom: 0; } .app-logo-img { padding: 0 10%; } /* ========================================================================== 18. BRANDS =========================================================================== */ /*------------------------------------------*/ /* BRANDS SECTION TITLE /*------------------------------------------*/ .brands-title { text-align: center; } .brands-title h6, .brands-title h5 { margin-bottom: 50px; } .brands-title p { margin-bottom: 55px; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brand-logo { overflow: hidden; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .brands-carousel-5 .brand-logo { padding: 0 25px; } .brands-carousel-6 .brand-logo { padding: 0 16px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0 5px; } .brands-section .more-btn { text-align: center; margin-top: 35px; } .brands-section .owl-dots { display: none; } /* ========================================================================== 19.CHANGELOG =========================================================================== */ .version-release { margin-bottom: 80px; } .version-release:last-child { margin-bottom: 0; } .release-data { padding-bottom: 30px; border-bottom: 1px dashed var(--silver); margin-bottom: 30px; } span.version-data { display: block; color: var(--header-color); font-size: 1.5rem; line-height: 1; font-weight: 600; margin-bottom: 15px; } span.release-date { display: block; color: var(--gray); font-size: 0.975rem; line-height: 1; margin-bottom: 0; } span.release-date span { color: var(--header-color); font-weight: 500; } .release-highlights h6 { margin-bottom: 16px; } .release-highlights .simple-list p { margin-bottom: 2px; } .release-highlights p b { color: var(--header-color); } .release-preview { margin-bottom: 30px; } /* ========================================================================== 20.DOWNLOAD =========================================================================== */ .download-item { display: block; text-align: center; padding: 45px 40px 35px; border: 1.5px solid transparent; } .download-item img { width: auto; max-width: inherit; max-height: 64px; margin-bottom: 25px; } .download-item h6 { line-height: 1; } .download-item p { font-size: 0.975rem; margin: 6px 0 0; } /* ========================================================================== 21. FAQS =========================================================================== */ /*------------------------------------------*/ /* FAQs-3 TITLE /*------------------------------------------*/ .faq-3-title { margin-top: 20px; } .faq-3-title p { font-size: 1.0725rem; padding-right: 3%; margin-top: 18px; margin-bottom: 28px; } /*------------------------------------------*/ /* FAQs QUESTION /*------------------------------------------*/ .faqs-2 .question { margin-bottom: 30px; } .faqs-2-questions .left-column { padding-right: 15px; } .faqs-2-questions .right-column { padding-left: 15px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .faqs-1-questions h4 { margin-top: 80px; margin-bottom: 25px; } .faqs-2 .question h6, .faqs-2 .question h5 { line-height: 1.5; padding-right: 5%; margin-bottom: 15px; } .faqs-3-question h5 { line-height: 1.5; margin-bottom: 20px; } .faqs-1 .accordion-item p, .faqs-3 .accordion-item p { color: var(--gray); } /*------------------------------------------*/ /* FAQS ACCORDION /*------------------------------------------*/ .faqs-section .accordion-item { background-color: transparent!important; border: none; border-bottom: 1px solid var(--silver); } .faqs-3.faqs-section .accordion-item { border-bottom: 1px solid var(--silver); } .faqs-section .accordion-item.acc-last-item, .faqs-3.faqs-section .accordion-item.acc-last-item { border-bottom: none; } /*------------------------------------------*/ /* Question /*------------------------------------------*/ .faqs-section .accordion-thumb { margin: 0; padding: 25px 0; cursor: pointer; position: relative; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { font-family: Flaticon; font-weight: 300; content: "\f146"; position: absolute; top: 22px; right: 0; text-align: center; background-color: var(--white-smoke); width: 34px; height: 34px; color: var(--header-color); font-size: 0.75rem; line-height: 34px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .faqs-section .accordion-item.is-active .accordion-thumb:after { transform: rotate(45deg); } /*------------------------------------------*/ /* Answer /*------------------------------------------*/ .faqs-section .accordion-panel { margin: 0; padding: 0 0 15px 0; display: none; } .faqs-section .accordion-thumb h5 { line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* MORE QUESTIONS BUTTON /*------------------------------------------*/ .more-questions { text-align: center; margin-top: 80px; } .faqs-2 .more-questions { margin-top: 50px; } .more-questions-holder { display: inline-block; margin: 0 auto; } .more-questions-txt { text-align: left!important; display: inline-block; float: left; } .more-questions-txt h6 { margin-bottom: 3px; } .more-questions-txt p { margin-bottom: 0; } .more-questions-btn { display: inline-block; margin-left: 30px; } /* ========================================================================== 22. BANNER =========================================================================== */ .banner-1-wrapper { overflow: hidden; padding: 90px 75px 95px; } .banner-2-wrapper { position: relative; overflow: hidden; text-align: center; } .banner-2-wrapper .banner-overlay { padding: 85px 70px 95px; } .banner-4-wrapper { overflow: hidden; padding: 55px 60px; border: 1.5px solid transparent; } .banner-5 { overflow: hidden; padding-top: 50px; } .banner-5-wrapper .banner-overlay { padding: 0 75px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-section .section-id { font-weight: 600; padding-top: 10px; margin-bottom: 30px; } .banner-2-txt h2 { padding: 0 4%; } .banner-4-txt h4.h4-md { line-height: 1.35; padding-right: 3%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { padding-right: 10%; margin: 22px 0 28px; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 2%; margin: 20px 0 28px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 22px; margin-bottom: 0; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 25px; margin-bottom: 30px; } /*------------------------------------------*/ /* BANNER BUTTON /*------------------------------------------*/ .banner-4-btn { position: relative; display: inline-block; margin: 0 auto; top: 10px; } .banner-4-btn p { margin: 12px 0 0; } .banner-section p.btn-txt { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER IMAGE /*------------------------------------------*/ .banner-5-img.right-column { margin-top: -40px; padding-left: 25px; } .banner-5-img.left-column { margin-top: -40px; padding-right: 25px; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .banner-qr-code { position: absolute; bottom: 0; right: 55px; max-width: 110px; text-align: center; background: var(--white); padding: 14px 10px 10px; border-radius: 12px 12px 0 0; } .banner-qr-code img { padding: 0 4%; } .banner-qr-code p { font-size: 0.8rem; line-height: 1.35; margin: 10px 0 0; } /* ========================================================================== 23. BLOG =========================================================================== */ .blog-1 .blog-post { margin-bottom: 40px; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { overflow: hidden; text-align: center; } /*------------------------------------------*/ /* BLOG POST TEXT /*------------------------------------------*/ .blog-post-txt { margin-top: 35px; padding-left: 5px; padding-right: 5px; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .post-tag { display: block; font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; } .blog-post-txt h6, .blog-post-txt h5 { line-height: 1.35; margin-bottom: 10px; } .blog-post-txt h4 { line-height: 1.35; margin-bottom: 20px; } .blog-post-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* BLOG POST META /*------------------------------------------*/ .blog-post-meta { margin-top: 18px; margin-bottom: 0; } .wide-post .blog-post-meta { margin-top: 25px; margin-bottom: 0; } .post-meta-list li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .post-meta-list p { line-height: 1; margin-bottom: 0; } .meta-list-divider { position: relative; top: 0px; transform: rotate(-90deg); padding: 0 1px; } /* ========================================================================== 24. BLOG LISTING =========================================================================== */ #blog-page .blog-post { margin-bottom: 60px; } /*------------------------------------------*/ /* WIDE BLOG POSTS /*------------------------------------------*/ #blog-page .blog-post.wide-post { margin-bottom: 60px; } .wide-post .blog-post-img { margin-right: 15px; } .wide-post .blog-post-txt { margin-top: 0; margin-left: 15px; } /*------------------------------------------*/ /* BLOG POSTS CATEGORY /*------------------------------------------*/ .posts-category { margin-top: 40px; margin-bottom: 50px; } .posts-category h4 { line-height: 1; margin-bottom: 0; } .posts-category span { position: relative; top: 1px; } /* ========================================================================== 25. SINGLE BLOG POST =========================================================================== */ .blog-post-preview { padding: 0 3%; margin-bottom: 50px; } /*------------------------------------------*/ /* Single Post Title /*------------------------------------------*/ .single-post-title { padding: 0 10% 0 8%; margin-bottom: 50px; } .single-post-title .blog-post-meta { margin-bottom: 25px; } .single-post-title h2 { margin-bottom: 25px; } /*------------------------------------------*/ /* Single Post Text /*------------------------------------------*/ .single-post-txt { padding: 0 8%; } .single-post-txt h6 { margin-bottom: 16px; } .single-post-txt h5.h5-xl { margin-top: 60px; margin-bottom: 25px; } .single-post-txt h5 { margin-top: 30px; margin-bottom: 25px; } .single-post-txt p span { color: var(--black); font-weight: 600; } .single-post-txt p a { color: var(--theme-color); font-weight: 600; text-decoration: underline; } .single-post-txt p a:hover { color: var(--black); } /*------------------------------------------*/ /* Single Post Image /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 60px; margin-bottom: 60px; } /*------------------------------------------*/ /* POST DATA /*------------------------------------------*/ .post-data { margin: 60px 5% 0; padding: 60px 3% 100px; } /*------------------------------------------*/ /* POST AUTHOR /*------------------------------------------*/ .post-author-avatar { margin: 0 auto; float: left; margin-right: 20px; } .post-author-avatar img { width: 70px; height: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .post-author-txt { position: relative; top: 8px; } .post-author-txt p { line-height: 1; margin-top: 8px; margin-bottom: 0; } .post-author-txt p a { color: var(--black); font-weight: 500; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-list p { margin-bottom: 12px; } .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.4rem; } .share-social-icons a.share-ico span { color: var(--gray); opacity: .6; margin-left: 10px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .share-social-icons a.share-ico:hover span { opacity: 1; } /* ========================================================================== 26. NEWSLETTER =========================================================================== */ .newsletter-1 .newsletter-overlay, .newsletter-4 .newsletter-overlay { padding: 70px 0; } .newsletter-2 .newsletter-overlay { padding: 80px 0 70px; } .newsletter-3 .container { padding-left: 0; padding-right: 0; } .newsletter-3 .newsletter-overlay { padding: 60px 50px; } /*------------------------------------------*/ /* NEWSLETTER TYPOGRAPHY /*------------------------------------------*/ .newsletter-txt h2 { margin-bottom: 35px; } .newsletter-txt h4, .newsletter-txt h3, .newsletter-txt p.p-sm { margin-bottom: 0; } .newsletter-txt a { font-weight: 500; text-decoration: underline; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 10%; } /*------------------------------------------*/ /* NEWSLETTER FORM /*------------------------------------------*/ .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 30px; padding-left: 10%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 40px; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 58px; background-color: var(--white); border: 1.5px solid var(--silver); font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-right: 12px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .newsletter-2.newsletter-section .form-control { border: none; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { background-color: var(--white); outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: var(--light-gray); } .newsletter-section .form-control:-ms-input-placeholder { color: var(--light-gray); } .newsletter-section .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { display: block; width: 100%!important; height: 58px; font-size: 0.925rem; padding: 0.7rem 1.3rem; } .newsletter-2.newsletter-section .btn { font-size: 0.975rem; padding: 0.7rem 1.5rem; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #3eb1ff; font-size: 0.9rem; font-weight: 400; line-height: 1; margin-top: 15px; margin-left: 5px; } .newsletter-section .text-center .form-notification { margin-left: 0; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 27. CONTACTS =========================================================================== */ .contacts-1 .contact-form p { color: var(--header-color); font-size: 0.95rem; line-height: 1; font-weight: 600; margin-bottom: 16px; padding-left: 8px; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.835rem; font-weight: 300; line-height: 1.6; padding-left: 0; margin-top: 35px; margin-bottom: 10px; } .contact-form-notice p a { color: var(--header-color); font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* CONTACT FORM INPUT /*------------------------------------------*/ .contact-form .form-control, .contact-form .form-select { height: 64px; background-color: #fdfdfe; border: 1.5px solid #d5d5d5; box-shadow: 0 0 0 0; color: #3a4a56; font-size: 1rem; font-weight: 400; padding: 0 20px; margin-bottom: 35px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .contact-form .form-select { display: inline-block; width: 100%; color: var(--gray); box-shadow: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: var(--gray); } .contact-form .form-control:-ms-input-placeholder { color: var(--gray); } .contact-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0px none; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 28. FOOTER =========================================================================== */ .footer { padding-bottom: 40px; } .footer-data-logo, .footer-data-socials { margin-bottom: 65px; } .footer-info, .footer-links { margin-bottom: 40px; } .footer-1 .fl-2, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 10%; } .footer-1 .fl-3, .footer-1 .fl-5, .footer-1 .footer-contacts { margin-bottom: 30px; } .footer-1 .fl-4 { margin-bottom: 30px; } /*------------------------------------------*/ /* FOOTER LINKS MOBILE /*------------------------------------------*/ .footer h6.m-title { display: none; position: relative; } .footer h6.m-title:after { font-family: Flaticon; font-weight: 300; content: "\f14f"; position: absolute; font-size: 0.9rem; top: 5px; right: 5px; } .footer h6.m-title.expanded:after { content: "\f14e"; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ img.footer-logo { width: auto; max-width: inherit; max-height: 32px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 35px; margin-bottom: 0; } .footer-copyright-logo { position: relative; display: inline-block; float: left; top: -4px; } .footer-copyright-logo img.footer-logo { max-height: 28px; margin-bottom: 0; } /*------------------------------------------*/ /* BANNER QR CODE /*------------------------------------------*/ .footer-qr-code { max-width: 100px; text-align: center; background: var(--snow); padding: 9px; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h6 { font-size: 1.0815rem; line-height: 1; margin-bottom: 26px; } .footer .footer-links h6.h6-lg { margin-bottom: 14px; } .footer a { color: var(--gray); } .footer.bg--black a { color: var(--snow); } .footer-contacts p { margin-bottom: 4px; } .footer-phone { margin-top: 12px; margin-bottom: 4px; } .footer .footer-links h6.h6-lg a { text-decoration: underline; } .footer.color--white a, .footer.color--white li a { color: var(--snow); } .footer.color--white a:hover, .footer.color--white li a:hover { color: var(--white)!important; } /*------------------------------------------*/ /* FOOTER MAIL LINK /*------------------------------------------*/ .footer-mail-link { margin: 10px 0 0 3px; } .footer-mail-link a { font-size: 1rem; font-weight: 400; } .footer-mail-link span { position: relative; top: 5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; } /*------------------------------------------*/ /* FOOTER INFO /*------------------------------------------*/ .footer-info-socials { margin-top: 5px; } .footer-info-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-info-socials li { padding-right: 14px; } .footer-2 .footer-info-socials li { padding-right: 10px; } .footer-info-socials li span { position: relative; opacity: .8; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; } .footer-info-socials li:hover span { opacity: 1; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .foo-links li { width: auto!important; display: block!important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .foo-links.ico-10 li span { position: relative; top: 1.5px; right: 4px; } .foo-links li p { font-weight: 400; margin-bottom: 10px; } .foo-links li:last-child p { margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER SOCIAL /*------------------------------------------*/ .footer-socials { margin: 0; display: inline-block; } .footer-socials li { float: left; width: auto!important; display: inline-block!important; vertical-align: top; clear: none!important; margin: 0; } .footer-socials a { display: block; margin-right: 14px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 15px; } .footer-socials li span { opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-socials li span:hover { opacity: 1; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; } /*------------------------------------------*/ /* FOOTER STORE BAGES /*------------------------------------------*/ .footer .store { float: none; margin-right: 0; margin-bottom: 15px; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form { margin-bottom: 20px; } .footer .newsletter-form { margin-top: 25px; } .footer-form .newsletter-form .input-group { background-color: var(--form-control); border: 1.5px solid var(--smoke); padding: 9px 2px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-form .form-control { height: 32px; background-color: transparent; border: none; color: var(--gray); font-size: 1rem; font-weight: 400; padding: 0 10px; box-shadow: none; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { background-color: var(--white)!important; } .footer-form .form-control:focus { border: none; border-right: none; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: var(--gray); } .footer-form .form-control:-ms-input-placeholder { color: var(--gray); } .footer-form .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { height: 32px; padding: 0 10px; border: none!important; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; } .footer-form .btn:hover { color: var(--black)!important; } .footer-form .btn:focus { border: none!important; outline: 0; box-shadow: none; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #1680fb; font-size: 0.85rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } .footer-form .form-notification.error { color: #fc2f4b; } .footer-form .form-notification.valid { color: #48af4b; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 40px; } .footer hr.footer-top-hr { margin-top: 0; margin-bottom: 100px; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .footer-copyright.copyright-logo p { display: inline-block; line-height: 28px; margin-left: 15px; } /*------------------------------------------*/ /* BOTTOM FOOTER SECONDARY LINK /*------------------------------------------*/ .bottom-secondary-link p { margin-bottom: 0; } .bottom-secondary-link p span { position: relative; top: 1.5px; padding: 0 2px; } .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .footer-data-socials li, .bottom-footer-list li, .bottom-footer-socials li, .bottom-footer-payment li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .footer-data-socials li { padding-left: 11px; } .bottom-foo-socials li, .bottom-footer-socials li { padding-left: 12px; } .footer-data-socials p { position: relative; line-height: 1; top: 9px; margin-bottom: 0; } .footer-list-divider { position: relative; top: -0.5px; transform: rotate(-90deg); margin-left: 4px; } .bottom-footer-list.ico-15 [class*="flaticon-"]:before, .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .bottom-footer-list li p { display: inline-block; float: left; margin-bottom: 0; } .footer-data-socials li span, .bottom-footer-socials li span { position: relative; top: 4px; opacity: .7; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .footer-data-socials li span:hover, .bottom-footer-socials li span:hover { opacity: 1; } .bottom-foo-socials li span { position: relative; top: 1px; right: 1px; opacity: .8; } .bottom-footer-payment li span { line-height: 1!important; position: relative; top: 4px; opacity: .8; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.2125rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } /* ========================================================================== 29. INNER PAGE WRAPPER =========================================================================== */ .inner-page-hero { padding-top: 190px; } .page-hero-section { position: relative; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; padding-top: 180px; padding-bottom: 100px; } /*------------------------------------------*/ /* INNER PAGE TITLE /*------------------------------------------*/ .inner-page-title { margin-bottom: 80px; } .inner-page-title h3, .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1; margin-top: 25px; margin-bottom: 0; } .inner-page-title p span { color: var(--black); font-weight: 600; } .page-hero-section p { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 30. PAGE PAGINATION =========================================================================== */ .page-link { color: var(--gray); font-size: 1.1rem; font-weight: 500; padding: 2px 14px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .page-item:last-child .page-link { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .page-item.disabled .page-link { color: var(--gray); background-color: transparent; border-color: transparent; } .page-link:hover { color: var(--gray); background-color: transparent; border-color: var(--gray); } .page-link:focus { color: var(--gray); background-color: transparent; border-color: transparent; box-shadow: 0 0; } .page-item.active .page-link { color: var(--white)!important; } .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); } .theme--indigo .page-item.active .page-link { background-color: var(--indigo); border-color: var(--indigo); } .theme--orchid .page-item.active .page-link { background-color: var(--orchid); border-color: var(--orchid); } .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); } .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); } .theme--red .page-item.active .page-link { background-color: var(--red); border-color: var(--red); } .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); } .theme--violet-red .page-item.active .page-link { background-color: var(--violet-red); border-color: var(--violet-red); } /* ========================================================================== 31. TERMS, PRIVACY, COOKIES PAGES =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .txt-block.legal-info h5 { margin: 50px 0 25px; } .txt-block.legal-info h6 { margin: 25px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 4px; } .legal-info p span { color: var(--black); font-weight: 700; } .legal-info a { font-weight: 700; text-decoration: underline; } .legal-info a:hover { color: var(--black); } /* ========================================================================== 32. SIGN-IN / SIGN-UP PAGE =========================================================================== */ .register-page { position: relative; width: 100%; min-height: 100vh; z-index: 3; background: url(../images/register-page.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .theme--dark .register-page { background: url(../images/register-page-dark.jpg); } /*------------------------------------------*/ /* REGISTER PAGE LOGO /*------------------------------------------*/ .register-page-logo { position: fixed; padding-top: 30px; } .register-page-logo img { width: auto; max-width: inherit; max-height: 28px; } /*------------------------------------------*/ /* REGISTER PAGE FORM /*------------------------------------------*/ .register-page-form { margin: 0 3%; padding: 140px 20px; } .reset-page-wrapper { padding: 180px 20px 140px; } /*------------------------------------------*/ /* REGISTER PAGE TITLE /*------------------------------------------*/ .register-form-title { text-align: center; margin-bottom: 30px; } .register-form-title p { font-size: 1.05rem; margin-top: 8px; margin-bottom: 0; } /*------------------------------------------*/ /* RESET PASSWORD PAGE TITLE /*------------------------------------------*/ .reset-form-title { text-align: center; margin-bottom: 22px; } .reset-form-title p.p-sm { margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* REGISTER PAGE TYPOGRAPHY /*------------------------------------------*/ .reset-password-link p { position: relative; font-size: 0.85rem; line-height: 1; margin-bottom: 30px; } .reset-password-link p a { text-decoration: underline; } .form-data span { display: block; font-size: 0.825rem; margin-bottom: 0; } .reset-password-form .form-data p { margin-top: 22px; margin-bottom: 12px; } .form-data p a, .form-data span a { color: var(--header-color); font-weight: 500; text-decoration: underline; } .register-page-form p.create-account { font-size: 0.9rem; line-height: 1; margin-top: 24px; margin-bottom: 0; } .register-page-form p.create-account a { font-weight: 600; text-decoration: underline; } /*------------------------------------------*/ /* REGISTER PAGE SEPARATOR LINE /*------------------------------------------*/ .separator-line { display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 500; margin: 25px 0; } .separator-line::before, .separator-line::after { content: ""; border-top: 1.5px solid rgba(5, 5, 5, .18); margin: 0 15px 0 0; flex: 1 0 20px; } .separator-line::after { margin: 0 0 0 15px; } /*------------------------------------------*/ /* REGISTER PAGE FORM INPUT /*------------------------------------------*/ .reset-page-wrapper .form-control, .register-page-form .form-control { height: 56px; background-color: var(--white); border: 1.5px solid #d2d2d2; color: var(--black); font-size: 0.935rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .register-page-form .form-control::-moz-placeholder { color: var(--gray); } .register-page-form .form-control:-ms-input-placeholder { color: var(--gray); } .register-page-form .form-control::-webkit-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* REGISTER PAGE FORM BUTTON /*------------------------------------------*/ #login .register-page-form .btn.submit, #signup .register-page-form .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; margin-top: 0; } #signup .register-page-form .btn.submit { margin-top: 25px; } .reset-page-wrapper .btn.submit { width: 100%; height: 54px; font-size: 0.95rem; } .register-page-form .btn-google { width: 100%; color: var(--header-color); font-size: 0.975rem; padding: 0.75rem 1.6rem; background-color: var(--white); border: 1px solid var(--silver); } .btn-google img { position: relative; width: 25px; height: 25px; top: 0; right: 5px; } .btn-google span { position: relative; top: 1px; } .register-page-form .btn-google:hover { border: 1px solid var(--header-color); } /*------------------------------------------*/ /* REGISTER PAGE FORM MESSAGE /*------------------------------------------*/ .reset-form-msg { text-align: center; width: 100%!important; display: block; } .reset-password-form .loading { color: #00b2e4; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .reset-password-form .error { position: relative; color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; top: -10px; margin-bottom: 12px; padding-left: 10px; } /*------------------------------------------*/ /* FORM HIDE PASSWORD /*------------------------------------------*/ .wrap-input { position: relative; } .btn-show-pass { color: var(--light-gray); align-items: center; position: absolute; height: 100%; top: 15px; right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-show-pass.ico-20 [class^="flaticon-"]:before, .btn-show-pass.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } .btn-show-pass:hover { color: var(--theme-color); } .eye-pass.flaticon-invisible { color: var(--gray); } /* ========================================================================== 33. MODAL ========================================================================== */ .modal-body { padding: 0!important; } .modal-dialog.modal-xl { width: 760px; } .modal .modal-content { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .modal-body-content { padding: 60px 35px 35px; } .modal-body-content h4 { margin-bottom: 15px; } .modal-body-content p { margin-bottom: 0; } .modal .bg-img { background: url(../images/modal.jpg); background-repeat: no-repeat; background-position: left center; background-size: cover; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .btn-close { position: absolute; z-index: 1; right: 20px!important; top: 20px!important; height: 1.5rem; width: 1.5rem; background: rgba(14, 14, 14, .11)!important; border-radius: 50%; padding: 0; opacity: .9; z-index: 9999; } .modal .btn-close span { position: relative; line-height: 24px!important; top: -2px; } .modal .btn-close.ico-10 [class^="flaticon-"]:before, .modal .btn-close.ico-10 [class^="flaticon-"]:after { font-size: 0.6rem; } .modal .btn-close:focus { outline: none!important; box-shadow: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW NEWSLETTER FORM /*------------------------------------------*/ .modal-body .newsletter-form { margin-top: 25px; } .modal .newsletter-form .form-control { text-align: center; height: 58px; background-color: #f3f4f5; border: 1.5px solid transparent; font-size: 1rem; color: var(--gray); font-weight: 400; padding: 0 15px; margin-bottom: 20px; box-shadow: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /*------------------------------------------*/ /* Form Input Focus /*------------------------------------------*/ .modal .newsletter-form .form-control:focus { outline: 0; box-shadow: none; background-color: var(--white); } /*------------------------------------------*/ /* Form Input Placeholder /*------------------------------------------*/ .modal .newsletter-form .form-control::-moz-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control:-ms-input-placeholder { color: var(--light-gray); } .modal .newsletter-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } /*------------------------------------------*/ /* Form Button /*------------------------------------------*/ .modal .input-group-btn { display: block; width: 100%!important; } .modal .newsletter-form .btn { display: block; width: 100%!important; height: 58px; font-size: 0.975rem; margin: 0; } /*------------------------------------------*/ /* Form Notification /*------------------------------------------*/ .modal .form-notification { text-align: center; color: #1680fb; font-size: 0.85rem; font-weight: 400; line-height: 1; margin-top: 12px; } .modal .form-notification.valid, .modal .form-notification.error { color: #fc2f4b; } .modal .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 34. COOKIES =========================================================================== */ #cookies { position: fixed; width: 90%; bottom: 25px; left: 5%; z-index: 200; padding: 25px; border: 1px solid #ddd; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); -moz-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1); } #cookies p { color: #353f4f; font-size: 0.875rem; line-height: 1.5; margin: 0; } #cookies-ok { position: absolute; right: 52px; bottom: 18px; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 500; background-color: #353f4f!important; border: 2px solid #353f4f!important; padding: 6px 20px; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } #cookies-ok:hover { color: #353f4f!important; background-color: transparent!important; border-color: #353f4f!important; } #cookies-info { color: #353f4f!important; font-weight: 500; text-decoration: underline; margin-left: 10px; } .theme--blue #cookies-info:hover { color: var(--blue)!important; } .theme--green #cookies-info:hover { color: var(--green)!important; } .theme--indigo #cookies-info:hover { color: var(--indigo)!important; } .theme--orchid #cookies-info:hover { color: var(--orchid)!important; } .theme--pink #cookies-info:hover { color: var(--pink)!important; } .theme--purple #cookies-info:hover { color: var(--purple)!important; } .theme--red #cookies-info:hover { color: var(--red)!important; } .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; } .theme--violet-red #cookies-info:hover { color: var(--violet-red)!important; } #cookies-close { position: absolute; right: 25px; top: 20px; height: 12px; width: 12px; } #cookies-close svg { width: 11px; height: 11px; } /* ========================================================================== 35. COLOR SCHEME ========================================================================== */ .bg--theme { background-color: var(--theme-color); } .bg--theme-2 { background-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* BUTTON /*------------------------------------------*/ .btn--theme, .hover--theme:hover, .theme--dark .btn--theme, .theme--dark .hover--theme:hover, .color--white .hover--theme:hover, .scroll .hover--theme:hover, .theme--dark .color--white .hover--theme:hover, .theme--dark .scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme, .theme--dark .btn--tra-theme, .theme--dark .hover--tra-theme:hover, .theme--dark .color--white .btn--tra-theme { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } .btn--theme-2, .hover--theme-2:hover, .theme--dark .btn--theme-2, .theme--dark .hover--theme-2:hover, .color--white .hover--theme-2:hover, .scroll .hover--theme-2:hover, .theme--dark .color--white .hover--theme-2:hover, .theme--dark .scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .btn--tra-theme-2, .hover--tra-theme-2:hover, .color--white .btn--tra-theme-2, .theme--dark .btn--tra-theme-2, .theme--dark .hover--tra-theme-2:hover, .theme--dark .color--white .btn--tra-theme-2 { color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important; } /*------------------------------------------*/ /* COLOR /*------------------------------------------*/ .color--theme, .color--theme a, .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); } .color--theme-2, .color--theme-2 a, .color--theme-2 :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico.color--theme path, .shape-ico.color--theme-2 path { fill: rgba(199, 62, 155, .08); } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .loading--theme .cssload-spinner:after, .loading--theme .cssload-spinner:before { border-color: var(--theme-color); } /*------------------------------------------*/ /* HEADER & NAVIGATION /*------------------------------------------*/ .nav-theme .sm-info { background-color: var(--theme-color); } .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .quick-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .cbox-1:hover .cbox-1-ico.bg--theme { color: var(--theme-color); border-color: var(--theme-color); } .cbox-1:hover .cbox-1-ico.bg--theme-2 { color: var(--theme-color-secondary); border-color: var(--theme-color-secondary); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .p-table.theme--border { border: 3px solid var(--theme-color); } .pricing-features.ico--theme span { color: var(--theme-color); } .pricing-features.ico--theme-2 span { color: var(--theme-color-secondary); } .switcher { background-color: var(--theme-color); } .comp-table .color--theme { color: var(--theme-color); } .comp-table .color--theme-2 { color: var(--theme-color-secondary); } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .filter-btns button.is-checked { color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .newsletter-section .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .footer-form .newsletter-form .input-group:focus-within { border-color: var(--theme-color)!important; } .footer-form .btn { color: var(--theme-color); } /*------------------------------------------*/ /* PAGINATION /*------------------------------------------*/ .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .reset-password-link p a:hover, .reset-password-form .form-data p a:hover { color: var(--theme-color); } .reset-page-wrapper .form-control:focus, .register-page-form .form-control:focus { border-color: var(--theme-color); } .modal .newsletter-form .form-control:focus { border-color: var(--theme-color); } /*------------------------------------------*/ /* COOKIES /*------------------------------------------*/ #cookies-ok { background-color: var(--theme-color)!important; border: 2px solid var(--theme-color)!important; } #cookies-info:hover { color: var(--theme-color)!important; } /*------------------------------------------*/ /* DARK MODE /*------------------------------------------*/ .theme--dark .shape-ico.color--theme path, .theme--dark .shape-ico.color--theme-2 path { fill: rgba(43, 48, 64, .5); } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme:hover { color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--theme-2:hover { color: var(--white)!important; border-color: var(--theme-color-secondary)!important; background-color: var(--theme-color-secondary)!important; } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { border-color: var(--theme-color)!important; } /* ========================================================================== 36. DARK MODE ========================================================================== */ body.theme--dark { --dark-theme-bg: #13161f; --black: #f9f9f9; --gray: #c8c8c8; --ink: #101219; --form-control: #191c28; --header-color: #fff; --header-link: #dee1ea; --silver: rgba(43, 48, 64, 1); --smoke: rgba(43, 48, 64, .7); --white-smoke: #191c28; } body.theme--dark { background-color: var(--dark-theme-bg); color: var(--gray); } .theme--dark .bg--white, .theme--dark .bg--coal, .theme--dark .bg--lavender, .theme--dark .bg--magnolia, .theme--dark .bg--aliceblue, .theme--dark .bg--tra-violet-red { background-color: var(--white-smoke); } .theme--dark .gr--whitesmoke { background-image: linear-gradient(180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%); } .theme--dark .bg--03 { background-image: url(../images/bg-03d.jpg); } .theme--dark .bg--05 { background-image: url(../images/bg-05d.jpg); } /*------------------------------------------*/ /* SECTION DIVIDER /*------------------------------------------*/ .theme--dark hr.divider, .theme--dark .footer hr { background-image: linear-gradient(90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); } .theme--dark hr.divider.divider-light { background-color: #fff; background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%); opacity: 1; } /*------------------------------------------*/ /* TYPOGRAPHY /*------------------------------------------*/ .theme--dark a { color: var(--gray); } .theme--dark a:hover, .theme--dark a.tra-link:hover span { color: var(--white); } /*------------------------------------------*/ /* BUTTONS /*------------------------------------------*/ .theme--dark .btn--transparent { color: var(--white)!important; } /* WHITE BUTTON */ .theme--dark .btn--white, .theme--dark .hover--white:hover, .theme--dark .color--white .hover--white:hover { color: #333!important; background-color: var(--white)!important; border-color: var(--white)!important; } /* BLACK BUTTON */ .theme--dark .btn--black, .theme--dark .hover--black:hover, .theme--dark .color--white .hover--black:hover { color: var(--ink)!important; border-color: var(--black)!important; background-color: var(--black)!important; } .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .color--white .btn--tra-black { color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; } /* BLUE BUTTON */ .theme--dark .btn--blue, .theme--dark .hover--blue:hover, .theme--dark .color--white .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .btn--tra-blue, .theme--dark .hover--tra-blue:hover, .theme--dark .color--white .btn--tra-blue { color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; } /* GREEN BUTTON */ .theme--dark .btn--green, .theme--dark .hover--green:hover, .theme--dark .color--white .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .btn--tra-green, .theme--dark .hover--tra-green:hover, .theme--dark .color--white .btn--tra-green { color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important; } /* INDIGO BUTTON */ .theme--dark .btn--indigo, .theme--dark .hover--indigo:hover, .theme--dark .color--white .hover--indigo:hover { color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .btn--tra-indigo, .theme--dark .hover--tra-indigo:hover, .theme--dark .color--white .btn--tra-indigo { color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important; } /* ORCHID BUTTON */ .theme--dark .btn--orchid, .theme--dark .hover--orchid:hover, .theme--dark .color--white .hover--orchid:hover, .theme--dark .scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .btn--tra-orchid, .theme--dark .hover--tra-orchid:hover, .theme--dark .color--white .btn--tra-orchid { color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important; } /* PINK BUTTON */ .theme--dark .btn--pink, .theme--dark .hover--pink:hover, .theme--dark .color--white .hover--pink:hover, .theme--dark .scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .btn--tra-pink, .theme--dark .hover--tra-pink:hover, .theme--dark .color--white .btn--tra-pink { color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important; } /* PURPLE BUTTON */ .theme--dark .btn--purple, .theme--dark .hover--purple:hover, .theme--dark .color--white .hover--purple:hover, .theme--dark .scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .btn--tra-purple, .theme--dark .hover--tra-purple:hover, .theme--dark .color--white .btn--tra-purple { color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important; } /* RED BUTTON */ .theme--dark .btn--red, .theme--dark .hover--red:hover, .theme--dark .color--white .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .btn--tra-red, .theme--dark .hover--tra-red:hover, .theme--dark .color--white .btn--tra-red { color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important; } /* SKYBLUE BUTTON */ .theme--dark .btn--skyblue, .theme--dark .hover--skyblue:hover, .theme--dark .color--white .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .btn--tra-skyblue, .theme--dark .hover--tra-skyblue:hover, .theme--dark .color--white .btn--tra-skyblue { color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important; } /* VIOLET RED BUTTON */ .theme--dark .btn--violet-red, .theme--dark .hover--violet-red:hover, .theme--dark .color--white .hover--violet-red:hover, .theme--dark .scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .btn--tra-violet-red, .theme--dark .hover--tra-violet-red:hover, .theme--dark .color--white .btn--tra-violet-red { color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important; } /* YELLOW BUTTON */ .theme--dark .btn--yellow, .theme--dark .hover--yellow:hover, .theme--dark .color--white .hover--yellow:hover { color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important; } /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .theme--dark .shape-ico.color--blue path, .theme--dark .shape-ico.color--indigo path, .theme--dark .shape-ico.color--skyblue path, .theme--dark .shape-ico.color--lilac path, .theme--dark .shape-ico.color--orchid path, .theme--dark .shape-ico.color--pink path, .theme--dark .shape-ico.color--purple path, .theme--dark .shape-ico.color--violet-red path { fill: rgba(43, 48, 64, .5); } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .theme--dark .dark-menu .wsmainfull, .theme--dark .white-menu .wsmainfull { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a { color: var(--header-link); } .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover, .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover { color: #eee!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover { color: var(--white)!important; } /*------------------------------------------*/ /* HEADER SUBMENU / MEGAMENU /*------------------------------------------*/ .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: var(--white-smoke)!important; border: solid 1px var(--smoke)!important; -webkit-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); -moz-box-shadow: 0 2px 3px rgba(1, 1, 1, .1); box-shadow: 0 2px 3px rgba(1, 1, 1, .1); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before, .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before { background-color: var(--ink); border-left: solid var(--ink); border-top: solid 1px var(--ink); } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); background-color: transparent!important; } .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--header-link); } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .theme--dark .tra-menu .wsmainfull.scroll, .theme--dark .white-menu .wsmainfull.scroll, .theme--dark .dark-menu.dark-scroll .wsmainfull.scroll { background-color: var(--ink)!important; padding: 0; -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a, .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-link); } .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(44, 49, 66, .72)!important; color: var(--white); } .theme--dark .navbar-light .scroll .btn.btn--tra-white { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .wsmainfull .hover--black:hover { color: var(--white)!important; border-color: #353f4f!important; background-color: #353f4f!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--black:hover { color: var(--ink)!important; border-color: var(--white)!important; background-color: var(--white)!important; } .theme--dark .navbar-light .scroll .wsmenu > .wsmenu-list > li > a.btn.hover--black:hover { color: var(--ink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--blue:hover { color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--green:hover { color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--indigo:hover { color: var(--white)!important; border-color: var(--indigo)!important; background-color: var(--indigo)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--orchid:hover { color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--pink:hover { color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--purple:hover { color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--red:hover { color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--skyblue:hover { color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important; } .theme--dark .white-scroll .wsmainfull.scroll .hover--violet-red:hover { color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important; } .theme--dark .white-scroll .wsmainfull .hover--tra-white:hover, .theme--dark .white-scroll .wsmainfull.scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .theme--dark .navbar-dark .scroll .logo-white { display: block; } .theme--dark .navbar-dark .logo-white { display: none; } /*------------------------------------------*/ /* CAREERS /*------------------------------------------*/ .theme--dark .jobs-category { background-color: #181b27; border-color: var(--silver); } /*------------------------------------------*/ /* FEATURES /*------------------------------------------*/ .theme--dark .fbox-5.bg--white { background-color: #181a27; border-color: var(--silver); } .theme--dark .fbox-3.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ .theme--dark .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } .theme--dark .bc-04-wrapper { border-color: var(--silver); } /*------------------------------------------*/ /* TEAM /*------------------------------------------*/ .theme--dark .team-member { background-color: var(--white-smoke); } /*------------------------------------------*/ /* PRICING /*------------------------------------------*/ .theme--dark .p-table { border-color: var(--silver); } .theme--dark .pricing-discount h6 { color: #353f4f; } /*------------------------------------------*/ /* INTEGRATIONS /*------------------------------------------*/ .theme--dark .int_tool-1 .tool_logo.bg--white { background-color: #181a27; border-color: var(--silver); } /*------------------------------------------*/ /* RATING /*------------------------------------------*/ .theme--dark .rbox-1 .star-rating { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .rbox-3 p span { color: #fff; } /*------------------------------------------*/ /* REVIEWS /*------------------------------------------*/ .theme--dark .reviews-3-wrapper:after { background-color: #181a27; } .theme--dark .review-1 { background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .owl-theme .owl-dots .owl-dot span { background: #3a3a3a; } .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: var(--white); } /*------------------------------------------*/ /* DOWNLOAD /*------------------------------------------*/ .theme--dark .download-item { border-color: var(--silver); } /*------------------------------------------*/ /* FAQs /*------------------------------------------*/ .theme--dark .accordion-panel { color: var(--gray); } .theme--dark .faqs-section .accordion-item .accordion-thumb:after, .theme--dark .faqs-section .accordion-item.is-active .accordion-thumb:after { background-color: var(--smoke); color: var(--gray); } /*------------------------------------------*/ /* BANNER /*------------------------------------------*/ .theme--dark .os-link { border-color: var(--silver); } .theme--dark .os-qr-code { background-color: #fff; } .theme--dark .os-logo img { filter: invert(100%); opacity: .4; } .theme--dark .banner-qr-code p { color: var(--ink); } /*------------------------------------------*/ /* NEWSLETTER /*------------------------------------------*/ .theme--dark .newsletter-section .form-control::-moz-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: var(--gray); } .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: var(--gray); } .theme--dark .newsletter-1.newsletter-section .form-control, .theme--dark .newsletter-3.newsletter-section .form-control { background-color: var(--white-smoke); } .theme--dark .newsletter-1.newsletter-section .form-control:focus, .theme--dark .newsletter-3.newsletter-section .form-control:focus { background-color: var(--dark-theme-bg); } /*------------------------------------------*/ /* CONTACTS /*------------------------------------------*/ .theme--dark .contact-form .form-control, .theme--dark .contact-form .form-select { background-color: var(--white-smoke); border: 1.5px solid var(--silver); } .theme--dark .contact-form .form-control:focus, .theme--dark .contact-form .form-select:focus { background-color: var(--dark-theme-bg); border: 1.5px solid var(--theme-color); } /*------------------------------------------*/ /* FOOTER /*------------------------------------------*/ .theme--dark .footer-form .newsletter-form .input-group:focus-within { background-color: var(--dark-theme-bg)!important; border-color: var(--silver)!important; } /*------------------------------------------*/ /* INNER PAGE WRAPPER /*------------------------------------------*/ .theme--dark .inner-page-title p span { color: var(--white); } /*------------------------------------------*/ /* TERMS, PRIVACY, COOKIES PAGES /*------------------------------------------*/ .theme--dark .legal-info a, .theme--dark .legal-info p span { color: rgba(255, 255, 255, .86); } .theme--dark .legal-info a:hover { color: var(--theme-color); } /*------------------------------------------*/ /* MODAL /*------------------------------------------*/ .theme--dark .modal .modal-body-content h4 { color: #313435; } .theme--dark .modal-body-content p { color: #6c757d; } .theme--dark .newsletter-form .hover--black:hover { color: #fff!important; border-color: #353f4f!important; background-color: #353f4f!important; } /*------------------------------------------*/ /* SIGN-IN / SIGN-UP PAGE /*------------------------------------------*/ .theme--dark .separator-line::before, .theme--dark .separator-line::after { border-top: 1.5px solid rgba(255, 255, 255, .18); } .theme--dark .reset-page-wrapper .form-control, .theme--dark .register-page-form .form-control { background-color: #2c3344; border: 1px solid #2c3344; } .theme--dark .reset-page-wrapper .form-control:focus, .theme--dark .register-page-form .form-control:focus { background-color: var(--dark-theme-bg); border-color: var(--theme-color); } .theme--dark .register-page-form .btn-google { color: var(--header-color); background-color: var(--white-smoke); border-color: var(--silver); } .theme--dark .register-page-form .btn-google:hover { border-color: var(--header-color); } /*------------------------------------------*/ /* SEARCH FORM INPUT /*------------------------------------------*/ .search-tp-form .form-control { height: 56px; background-color:rgb(18, 18, 18); border: 1.5px solid #5e5e5e; color: var(--black); font-size: 0.935rem; line-height: 1; font-weight: 400; margin-bottom: 25px; padding: 5px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .reset-page-wrapper .form-control { text-align: center; margin-bottom: 20px; } .search-tp-form .form-control::-moz-placeholder { color: var(--gray); } .search-tp-form .form-control:-ms-input-placeholder { color: var(--gray); } .search-tp-form .form-control::-webkit-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } /*------------------------------------------*/ /* REGISTER PAGE FORM FOCUS /*------------------------------------------*/ .reset-page-wrapper .form-control:focus, .search-tp-form .form-control:focus { outline: 0px none; box-shadow: none; background-color:rgb(18, 18, 18); } /* Template Name: Pintex - Mobile App & Software Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Pintex - Mobile App Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: https://www.jthemes.com/ Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 1399px) { /* SIGN IN / SIGN UP */ .register-page-form { padding-top: 200px; padding-bottom: 220px; } .reset-page-wrapper { padding-top: 230px; padding-bottom: 260px; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 1200px) { html { font-size: 115.6%; } /*------------------------------------------*/ /* BASE /*------------------------------------------*/ /* Button */ .btn { padding: 0.8rem 1.7rem; } .btn.ico-20.ico-left, .btn.ico-20.ico-right { padding: 0.8rem 1.15rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { padding: 0.75rem 1.35rem; } .btn.ico-30.ico-left { padding: 0.286rem 0; } .btns-group .btn.ico-30.ico-left { padding: 0.286rem 0.5rem; } .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { top: 3px; } /* Watch Video Link */ .watch-video-link { width: 2.8rem; height: 2.8rem; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { font-size: 1.75rem; line-height: 2.8rem!important; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ /* Nav Link */ .wsmenu > .wsmenu-list > li > a { font-size: 0.9375rem; } /* Button */ .wsmenu > .wsmenu-list > li a.btn { font-size: 0.9rem; line-height: 28px; padding: 6px 22px 8px; margin: 12px 5px 0; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 4px 20px 6px; } /* SubMenu, HalfMenu, MegaMenu */ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-size: 0.9rem; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* FOOTER */ .footer p, .footer-form .form-control { font-size: 0.95rem; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 992px) and (max-width: 1199.95px) { /*------------------------------------------*/ /* BASE /*------------------------------------------*/ .py-60 { padding: 50px 0; } .py-70 { padding: 60px 0; } .py-80 { padding: 60px 0; } .py-90 { padding: 70px 0; } .py-100 { padding: 80px 0; } .pt-30 { padding-top: 24px; } .pt-40 { padding-top: 30px; } .pt-50 { padding-top: 40px; } .pt-60 { padding-top: 50px; } .pt-70 { padding-top: 60px; } .pt-80 { padding-top: 60px; } .pt-90 { padding-top: 70px; } .pt-100 { padding-top: 80px; } .pb-30 { padding-bottom: 24px; } .pb-40 { padding-bottom: 30px; } .pb-50 { padding-bottom: 40px; } .pb-60 { padding-bottom: 50px; } .pb-70 { padding-bottom: 60px; } .pb-80 { padding-bottom: 60px; } .pb-90 { padding-bottom: 70px; } .pb-100 { padding-bottom: 80px; } .mt-30 { margin-top: 24px; } .mt-40 { margin-top: 30px; } .mt-45 { margin-top: 35px; } .mt-50 { margin-top: 40px; } .mt-55 { margin-top: 45px; } .mt-60 { margin-top: 50px; } .mt-65 { margin-top: 55px; } .mt-70 { margin-top: 60px; } .mt-75 { margin-top: 60px; } .mt-80 { margin-top: 60px; } .mb-30 { margin-bottom: 24px; } .mb-40 { margin-bottom: 30px; } .mb-45 { margin-bottom: 35px; } .mb-50 { margin-bottom: 40px; } .mb-55 { margin-bottom: 45px; } .mb-60 { margin-bottom: 50px; } .mb-65 { margin-bottom: 55px; } .mb-70 { margin-bottom: 60px; } .mb-75 { margin-bottom: 60px; } .mb-80 { margin-bottom: 60px; } /* Headers */ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.18755rem; } /* 19px */ h6.h6-xl { font-size: 1.25rem; } /* 20px */ h5 { font-size: 1.3125rem; } /* 21px */ h5.h5-md { font-size: 1.375rem; } /* 22px */ h5.h5-lg { font-size: 1.5rem; } /* 24px */ h5.h5-xl { font-size: 1.625rem; } /* 26px */ h4 { font-size: 1.75rem; } /* 28px */ h4.h4-md { font-size: 1.875rem; } /* 30px */ h4.h4-lg { font-size: 2rem; } /* 32px */ h4.h4-xl { font-size: 2.125rem; } /* 34px */ h3 { font-size: 2.25rem; } /* 36px */ h3.h3-md { font-size: 2.3125rem; } /* 37px */ h3.h3-lg { font-size: 2.4375rem; } /* 39px */ h3.h3-xl { font-size: 2.5rem; } /* 40px */ h2 { font-size: 2.625rem; } /* 42px */ h2.h2-md { font-size: 2.75rem; } /* 44px */ h2.h2-lg { font-size: 2.875rem; } /* 46px */ h2.h2-xl { font-size: 3rem; } /* 48px */ h2.h2-title { font-size: 3.125rem; } /* 50px */ h6, h5, h4, h3, h2, h1 { line-height: 1.35; } /* Button */ .btn.btn-sm { font-size: 0.975rem; padding: 0.65rem 1.4rem; } .btn.ico-30.ico-left { padding: 0.3845rem 0; } .btns-group .btn.ico-30.ico-left, .btns-group .btn.ico-30.ico-right { padding: 0.3845rem 0.5rem; } .btn.ico-25.ico-left,.btn.ico-25.ico-right { font-size: 1.1rem; padding: 0.6785rem 0.75rem; } /* Buttons Group */ .btns-group .btn:first-child { margin-right: 12px; } /* Button Icon */ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { font-size: 1.15rem; line-height: 0.5rem!important;top: 3.5px; } .btn.ico-30.ico-left span.ico-30-txt { margin-right: 0; } .btn.ico-30.ico-right span.ico-30-txt { margin-left: 0; } .btn.ico-30.ico-left span { right: 0; } .btn.ico-left span { margin-right: 4px; } .btn.ico-right span { margin-left: 4px; } /* Button Text */ p.btn-txt, p.btns-group-txt { margin: 12px 0 0 0; } .text-center p.btns-group-txt { margin-top: 18px; } .btn-rating { margin: 10px 0 0 0; } /* Transparent Link */ a.tra-link { font-size: 1.03125rem; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { font-size: 0.785rem; line-height: 0.7rem!important; top: 2px; left: 2px; } /* OS Button */ .os-btn { width: 280px; min-width: 270px; padding: 16px 16px 14px; } .os-btn-ico { margin-right: 16px; } .os-btn-txt p { font-size: 1.0625rem; margin-top: 3px; margin-bottom: 5px; } .os-btn-txt span { font-size: 1rem; } /* Watch Video Link */ .watch-video-link { margin-right: 10px; } p.video-txt-lg { font-size: 1.125rem; } p.video-txt-sm { font-size: 1rem; } /* Vector Icon Background */ .ico-55 .shape-ico svg { width: 112px; height: 112px; top: -37px; left: calc(50% - 62px); } .ico-60 .shape-ico svg { width: 120px; height: 120px; top: -40px; left: calc(50% - 65px); } /* Vector Rounded Icons */ .ico-rounded { width: 74px; height: 74px; } .ico-rounded-md { width: 80px; height: 80px; } .ico-rounded-lg { width: 90px; height: 90px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after { font-size: 2.35rem; line-height: 74px!important; } .ico-rounded-md [class*="flaticon-"]:before, .ico-rounded-md [class*="flaticon-"]:after { font-size: 2.5rem; line-height: 80px!important; } .ico-rounded-lg [class*="flaticon-"]:before, .ico-rounded-lg [class*="flaticon-"]:after { font-size: 2.875rem; line-height: 90px!important; } /* PNG Icons */ .img-80 img { width: 70px; height: 70px; } .img-75 img { width: 65px; height: 65px; } .img-70 img, .img-65 img, .img-60 img { width: 63px; height: 63px; } /* Section ID */ .section-id { font-size: 0.9rem; margin-bottom: 25px; } /* Section Title */ .section-title.mb-70 { margin-bottom: 55px; } .section-title.mb-100 { margin-bottom: 75px; } .section-title p { margin-top: 16px; } .section-title .btns-group { margin-top: 28px; } /* Compatibility */ .compatibility { margin-top: 10px; } /* Tools List / Payments Icons */ .tools-list p, .payment-methods p { margin-bottom: 10px; } .payment-icons img { max-height: 32px; } /* Quote */ .quote-avatar img { width: 54px; height: 54px; } .quote p { margin-bottom: 8px; } .quote-author { padding: 0 0 0 10px; } .quote.pr-15, .quote.pr-40, .quote.pr-50, .quote.pr-60 { padding-right: 0; } /* Users */ .txt-block .users { margin-top: 16px; } .users img { max-height: 40px; } .users p { font-size: 0.935rem; top: 12px; left: 6px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ /* Header Logo */ .desktoplogo img { max-height: 30px; } /* Nav Link */ .wsmenu > .wsmenu-list > li > a { font-size: 0.9875rem; margin: 0 5px; padding: 10px 15px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 10px; } /* Nav Link Info */ span.sm-info { width: 18px; height: 18px; font-size: 0.725rem; line-height: 17px; margin-left: 5px; } /* Button */ .wsmenu > .wsmenu-list > li a.btn { font-size: 0.95rem; line-height: 28px; margin-top: 15px; padding: 3px 22px 5px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { padding: 3px 20px 5px; } .wsmenu > .wsmenu-list > li.lang { margin-right: 12px; } .wsmenu > .wsmenu-list > li.lang > a { padding: 10px 14px 10px 6px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu { min-width: 110px!important; padding: 8px 5px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 0.95rem; } .wsmenu > .wsmenu-list > li a.store.header-store { margin-top: 15px; margin-left: 0; } .store.header-store img { max-height: 40px; } .header-socials a { margin-left: 13px; } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; } /* SubMenu, HalfMenu, MegaMenu */ .wsmenu > .wsmenu-list > li > ul.sub-menu { min-width: 175px; padding: 6px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu {min-width: 180px; padding: 6px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 35%; padding: 6px 0; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 76%!important; left: 22%; padding: 12px 5px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { font-size: 0.95rem; padding: 9px 12px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a { font-size: 0.935rem; padding: 9px 12px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 9px 12px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { top: 9px; right: 10px; } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ /* HERO QUICK FORM */ .hero-section .quick-form .form-control, .hero-section .quick-form .btn { height: 60px; font-size: 1.1rem; } .hero-section .quick-form.form-half .form-control { height: 54px; font-size: 1.05rem; padding: 0 14px; } .hero-section .quick-form.form-half .btn { height: 54px; font-size: 1.05rem; padding: 13px 35px; margin-left: 10px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -5px 0; } /* Hero Advantages */ .hero-section .advantages { margin-top: 20px; } /* HERO DIGITS */ .hero-digits { padding-right: 10px; } .hero-digits h2.statistic-number { font-size: 3.15rem; } .hero-digits h2.statistic-number small { font-size: 2rem; } /* HERO-1 */ #hero-1 { padding-top: 140px; margin-bottom: 65px; } .hero-1-txt h2 { font-size: 3.25rem; line-height: 1.35; padding-right: 3%; } .hero-1-txt p.p-lg { margin-top: 18px; margin-bottom: 28px; } .hero-1-txt .os-version-ext { margin-top: 18px; } .hero-1-img { padding: 0 20px; margin-bottom: -65px; } /* HERO-2 */ #hero-2 { padding-top: 160px; padding-bottom: 110px; } .hero-2-txt h2 { font-size: 3.5rem; } .hero-2-txt p.p-xl { padding: 0 6%; margin-top: 15px; margin-bottom: 25px; } .hero-2-txt p.btn-txt { margin-top: 16px; } /* HERO-3 */ #hero-3 { padding-top: 150px; } .hero-3-txt h2 { font-size: 3.5rem; } .hero-3-txt p.p-xl { margin-top: 14px; margin-bottom: 28px; } .hero-3-txt .btn-txt { margin-top: 20px; } .hero-3-img { margin-top: 40px; padding: 0 3%; } /* HERO-4 */ #hero-4 { padding-top: 150px; } .hero-4-txt h2 { font-size: 3.25rem; } .hero-4-txt p.p-xl { padding: 0; margin-top: 20px; margin-bottom: 26px; } .hero-4-img { margin-top: 50px; } /* HERO-5 */ #hero-5 { padding-top: 140px; } .hero-5-txt h2 { font-size: 3.25rem; line-height: 1.35; } .hero-5-txt p.p-xl { padding-right: 0; margin-top: 18px; margin-bottom: 28px; } .hero-5-img { padding: 0 10px 0 5px; } /* HERO-6 */ #hero-6 { padding-top: 150px; } .hero-6-txt h2 { font-size: 3.15rem; } .hero-6-txt p.p-lg { padding: 0 3%; margin-top: 15px; margin-bottom: 25px; } .hero-6-img { margin-top: 50px; padding: 0 2%; } /* HERO-7 */ #hero-7 { padding-top: 130px; padding-bottom: 40px; } .hero-7-txt { margin-top: -25px; } .hero-7-txt h2 { font-size: 3.25rem; margin-bottom: 25px; } .hero-7-txt .os-version-ext { margin-top: 18px; } .hero-7-img { margin-bottom: -30%; } /* HERO-8 */ #hero-8 { padding-top: 150px; margin-bottom: 40px; } .hero-8-txt h2 { font-size: 3.35rem; padding-right: 5%; } .hero-8-txt p.p-lg { margin-top: 15px; margin-bottom: 25px; } .hero-8-txt .quick-form { margin-top: 28px; margin-right: 3%; } .hero-8-img { margin: 0 -95% -40px 0; } /* HERO-9 */ #hero-9 { padding-top: 150px; } .hero-9-txt { margin-top: -20px; } .hero-9-txt h2 { font-size: 3.65rem; } .hero-9-txt p.p-lg { margin-top: 20px; margin-bottom: 28px; } .hero-9-txt .os-version-ext { margin-top: 15px; } .hero-9-img { padding-left: 15px; } /* HERO-10 */ #hero-10 { padding-top: 150px; } .hero-10-txt h2 { font-size: 3.25rem; } .hero-10-txt p.p-lg { padding: 0; margin-top: 15px; margin-bottom: 25px; } .hero-10-txt p.btn-txt { margin-top: 25px; } #hero-10 .quick-form { margin: 25px 10% 0; } .hero-10-img { margin: 50px 15px 0; } /* HERO-11 */ #hero-11 { padding-top: 150px; } .hero-11-txt h2 { font-size: 3.15rem; } .hero-11-txt p.p-lg { margin-top: 16px; margin-bottom: 25px; } .hero-11-txt .quick-form { margin-top: 26px; margin-right: 2%; } .hero-11-img { padding-left: 16px; } /* HERO-12 */ #hero-12 { padding-top: 150px; } .hero-12-txt h2 { font-size: 3.6rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 16px; margin-bottom: 25px; } .hero-12-img { margin-top: 45px; } /* HERO-13 */ #hero-13 { padding-top: 90px; } .hero-13-txt h2 { font-size: 3.15rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 16px; margin-bottom: 25px; } .hero-13-txt .quick-form { margin-top: 30px; margin-right: 6%; } .hero-13-img { padding-right: 25px; } /* HERO-14 */ #hero-14 { padding-top: 150px; padding-bottom: 100px; } .hero-14-txt h2 { font-size: 4.15rem; line-height: 1.25; } .hero-14-txt p.p-xl { margin-top: 20px; margin-bottom: 30px; } /* HERO-15 */ #hero-15 { padding-top: 140px; margin-bottom: 90px; } .hero-15-txt .hero-app-logo img { max-height: 90px; margin-bottom: 22px; } .hero-15-txt { margin-top: -25px; padding-left: 15px; } .hero-15-txt h2 { font-size: 3.05rem; } .hero-15-txt p.p-lg { padding-right: 2%; margin-top: 16px; margin-bottom: 16px; } .hero-15-img { padding-right: 5px; margin-bottom: -90px; } /* HERO-16 */ #hero-16 { padding-top: 150px; } .hero-16-txt h2 { font-size: 3.5rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 20px; margin-bottom: 26px; padding: 0 5%; } .hero-16-img { padding: 55px 45px 0; margin-top: 50px; } /* HERO-17 */ #hero-17 { padding-top: 75px; } .hero-17-txt .hero-app-logo img { max-height: 84px; margin-bottom: 32px; } .hero-17-txt h2 { font-size: 3.8rem; line-height: 1.25; } .hero-17-txt p.p-md { margin-top: 15px; margin-bottom: 25px; } .hero-17-img { margin: 0 0 0 5px; } /* HERO-18 */ #hero-18 { padding-top: 90px; } .hero-18-txt .hero-app-logo img { max-height: 95px; margin-bottom: 30px; } .hero-18-txt h2 { font-size: 3.15rem; } .hero-18-txt p.p-xl { padding: 0 5%; margin-top: 22px; margin-bottom: 30px; } .hero-18-img { margin-top: 15px; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-1 { margin-bottom: 80px; } .about-2-title { margin-bottom: 18px; } .about-4-title { padding-right: 2%; } .about-1-txt h2 { font-size: 3.4rem; margin-bottom: 15px; } .about-1-txt h4 { padding-right: 0; } .about-1-img { margin-top: 50px; margin-bottom: -80px; } .about-3 .img-block.left-column { margin-right: 30px; } .about-3 .img-block.right-column { margin-left: 30px; } /* CAREERS */ .jobs-category { padding: 0 40px 15px; margin-bottom: 30px; } .jobs-category h4 { padding-top: 30px; margin-bottom: 10px; } .career-item { padding: 20px 0; } .position-link { top: 23px; right: 5px; } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; } .more-careers { margin-top: 55px; } .more-careers-txt p { top: 7px; } .more-careers-btn { margin-left: 15px; } .more-careers-btn .btn { font-size: 0.935rem; padding: 0.65rem 1.55rem; } /* JOB POSITION */ .job-position-title { padding-top: 150px; padding-bottom: 60px; margin-bottom: 30px; } .job-position-title .position-data { margin-top: 12px; } .jb-txt h2 { padding-right: 18%; } .job-position-title .btn { font-size: 0.95rem; padding: 0.7rem 1.5rem; } .position-info h5 { margin: 40px 0 20px; } .position-info .btn { margin-top: 25px; } /* FEATURES */ .features-4.pt-30, .features-5.pt-30 { padding-top: 24px; } .fbox-5-wrapper { padding: 55px 40px 65px; } .features-4 .section-title.mb-70 { margin-bottom: 45px; } .features-2 .section-title p.p-xl { font-size: 1.2rem; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3 { margin-bottom: 30px; } .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4 { margin-bottom: 30px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3 { margin-bottom: 35px; } .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 24px; } .fbox-3 { padding: 34px 15px 25px; } .fbox-4-txt { padding-left: 50px; } .fbox-4, .fbox-4.fb-5, .fbox-4.fb-6 { padding: 40px 30px; } .fbox-4.fb-7, .fbox-4.fb-8 { padding: 50px 35px 0; } .fbox-5 { padding: 50px 40px 45px; } .fbox-4.fb-1 .fbox-4-img { margin: 25px 14% 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 14% 25px; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 25px 0 0; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 30px 0 0; } .fbox-5-img img { max-height: 215px; margin-bottom: 25px; } .fbox-6 .fbox-img { margin-bottom: 25px; } .fbox-img.h-175 img, .fbox-img.h-180 img { max-height: 155px; } .fbox-7 .fbox-img.h-175, .fbox-7 .fbox-img.h-180 { padding-top: 26px; margin: 0 0 50px; } .fbox-ico-wrap { margin-right: 21px; } .fbox-ico-wrap .ico-50 [class*="flaticon-"]:before, .fbox-ico-wrap .ico-50 [class*="flaticon-"]:after { font-size: 2.95rem; } .fbox-ico { margin-bottom: 14px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 16px; } .fbox-ico.ico-rounded { margin-bottom: 18px; } .fbox-ico[class*="img-"], .fbox-ico.ico-rounded-md, .fbox-ico.ico-rounded-lg { margin-bottom: 21px; } .fbox-wrapper .row-cols-lg-3 .fbox-title { margin-bottom: 5px; } .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6, .rows-3 .fbox-2 h5 { margin-bottom: 10px; } .fbox-3 h6 { margin: 12px 0 8px; } .fbox-4 h5, .fbox-4-txt h2, .fbox-4-txt h3.h3-xl { margin-bottom: 14px; } .fbox-4-txt h3.h3-lg { font-size: 2.4375rem; margin-bottom: 14px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 16px; } .fbox-5 h5 { margin-bottom: 14px; } .features-2-download { margin-top: 60px; } .features-2-download p.p-sm { font-size: 0.915rem; margin-top: 20px; } /* CONTENT */ .ct-08 { margin-bottom: 60px; } .ct-09 { margin-top: 60px; } .ct-06 .section-overlay { margin-bottom: 80px; } .bc-01 .section-overlay { padding: 70px 50px; } .bc-02 .section-overlay { padding: 55px 40px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 45px 40px; } .bc-02.pt-30.bc-02-top { padding-top: 20px; margin-top: 60px; } .bc-03 .section-overlay { padding: 70px 50px 0; } .bc-03 .section-title { margin-bottom: 45px; } .bc-03 .section-title h2 { padding: 0 3%; } .ct-07 .txt-block, .ct-08 .txt-block { margin-top: 0; } .ct-09 .txt-block { margin-top: 25px; } .bc-01 .txt-block.left-column { padding-right: 10px; } .bc-01 .txt-block.right-column { padding-left: 10px; } .txt-block-stat.mt-35 { margin-top: 28px; } .bc-04 .txt-block { padding-right: 20px; } .txt-block h3, .txt-block h2, .txt-block h5 { margin-bottom: 16px; } h5.h5-title { margin: 15px 0; } .bc-02 .txt-block h5 { margin-bottom: 18px; } .txt-block .btn, .txt-block .stores-badge { margin-top: 25px; } .txt-block-tra-link { margin-top: 15px; } .cbox-1 .ico-wrap { margin-right: 1.1rem; } .cbox-1-ico { width: 2rem; height: 2rem; font-size: 1rem; line-height: 1.65rem; margin-top: 3px; } .txt-block .cbox-2 { margin-right: -15px; } .cbox-2 .ico-wrap { margin-right: 1.3rem; } .cbox-2 .cbox-2-ico { top: 4px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 2.725rem; } .cbox-1-txt { margin-bottom: 22px; } .cbox-2-txt { margin-bottom: 27px; } .cbox-3-txt { margin-bottom: 35px; } .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 10px!important; } .cbox-title { margin-bottom: 16px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.05rem; } .cbox-title span { margin-right: 15px; } .cbox-title h5 { line-height: 1.75rem!important; } .cbox-4-wrapper { margin-top: -3px; } .box-title { margin-bottom: 12px; } .box-title h6 { position: relative; top: 2px; } .cbox-5 { width: 350px; min-width: 350px; padding: 15px 20px; } .cbox-5.cb-1 { margin-top: 10px; margin-bottom: 20px; } .cbox-5-txt h6 { margin-bottom: 0; } .cbox-6 { padding: 30px; margin: 0 10%; } .cbox-6 hr { margin-top: 30px; margin-bottom: 20px; } .cbox-6 h2.statistic-number { font-size: 3.15rem; } .cbox-6 .statistic-number sup { font-size: 2.4rem; top: -8px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 10px; } .cbox-6-txt.mt-30 { margin-top: 22px; } .cbox-6-data { padding: 12px 20px; } .cbox-6-data.mt-25 { margin-top: 20px; } .cb-shape-1 { right: 3px; top: -25px; } .cb-shape-2 { left: 3px; bottom: -25px; } .cb-shape-1 img, .cb-shape-2 img { padding: 0 12%; } .cbox-7-txt { padding-left: 12px; } .cbox-7-ico { width: 25px; height: 25px; margin-top: 1px; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; } .cbox-7-ico span { line-height: 23px; } .cbox-7-txt p { margin-bottom: 12px; } .txt-block .accordion-1 .accordion-item { padding: 20px 0 25px; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.785rem; line-height: 30px; top: -0.5px; right: 5px; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 20px; } .tabs-1 li { padding: 20px; } .tab-link p { margin-top: 6px; } /* Content Image */ .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 15px; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 15px; } .ct-03 .img-block img { max-width: 170%; } .ct-04 .img-block img { max-width: 175%; margin-left: -85%; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -60px; } .ct-09 .img-block { margin-top: -60px; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -80px; } .img-block-txt, .img-block-btn { margin-top: 45px; } .bc-2-img.right-column { margin-left: 5px; } .bc-2-img.left-column { margin-right: 5px; } /* STATISTIC */ .statistic-1-wrapper .statistic-block-digit { width: 32%; } .statistic-1-wrapper .statistic-block-txt { width: 68%; padding-left: 20px; } .statistic-2-wrapper .txt-block { padding-left: 20px; padding-right: 8%; } .statistic-4-wrapper .statistic-block { padding: 10px 20px 10px 40px; } #sb-2-1 { padding-left: 5%; } .statistic-ico { margin-bottom: 10px; } .statistic-1-wrapper h2 { font-size: 2.9rem; } .statistic-2-wrapper h2, #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 14px; } .statistic-4-wrapper h5 { margin: 20px 0 10px; } .statistic-1-wrapper p { top: 1px; } /* RATING */ .rating-section .rating-1-wrapper.text-center, .rating-2-wrapper.text-center { padding: 0 12%; } .rbox-1-img img { max-height: 33px; } .rbox-2-img img { max-height: 70px; } #rb-2-2 .rbox-2-img img { max-height: 115px; } .rbox-1 .star-rating { font-size: 0.9rem; line-height: 1; } .rbox-2 p { margin-top: 12px; } /* TESTIMONIALS */ .reviews-3-wrapper:after { width: 140%; height: 84%; top: 8%; left: -20%; } .review-1 { padding: 28px 25px; margin: 0 10px 30px; } .review-1.no-title { padding: 40px 25px 28px; } .review-2 { padding: 0 22px; } .review-3 { padding: 40px 30px 25px; } #rw-3-1, #rw-3-2 { margin-bottom: 12px; } .review-item { padding: 0 10px; margin-bottom: 20px; } .review-4 { padding: 28px 20px; } .review-ico.ico-45 { top: 10px; right: 20px; } .review-ico.ico-60 { top: 10px; left: 20px; } .review-1-txt h6.h6-md, .review-3-txt h6.h6-lg { margin-bottom: 8px; } .review-2-txt h6.h6-lg { margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.25rem; margin-bottom: 8px; } .review-rating.ico-15 { margin-bottom: 5px; } .review-rating.ico-15.mb-15 { margin-bottom: 8px; } .author-data { margin-top: 15px; } .author-data.mt-25 { margin-top: 18px; } .author-data.mb-15 { margin-bottom: 10px; } .review-avatar img, .owl-item .review-avatar img { width: 40px; height: 40px; } .review-3 .review-avatar img { width: 45px; height: 45px; } .review-3 .review-author { margin-top: 2px; } .author-data .review-author { padding: 0 0 0 12px; } .review-author.mt-15 { margin-top: -2px; } .review-author h6 { font-size: 1rem; margin-top: 2px; margin-bottom: 7px; } .review-author .review-rating { margin-top: -5px; } .reviews-btn { margin-top: 55px; } /* TEAM */ .team-1 { padding-bottom: 40px; } .team-member { margin-bottom: 40px; } .team-member-photo { margin-bottom: 20px; } .team-member-data h6 { margin-bottom: 6px; } /* PRICING */ .pricing-1 .section-title.mb-70 { margin-bottom: 50px; } .pricing-1-wrapper .col { padding: 0 8px; } .pricing-3-wrapper { padding: 0 6%; } .pricing-1-table { padding: 35px 25px; } .pricing-3-table, .pricing-2-table { padding: 25px 30px; } #pt-3-1 { margin: 0 8px 40px 20px; } #pt-3-2 { margin: 0 20px 40px 8px; } .pricing-table-header h5 { margin-bottom: 20px; } .pricing-1-table .pricing-discount { top: -2px; right: 0; padding: 7px 13px; } .pricing-discount h6 { font-size: 1.05rem; } .pricing-1-table hr { margin-top: 20px; } /* Price */ .price span { font-size: 2.85rem; letter-spacing: -1.5px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.5rem; } .price sup { font-size: 2rem; top: -4px; right: 2px; } .pricing-2-table .price sup, .pricing-3-table .price sup { top: -3px; } .price sup.validity { font-size: 1.45rem; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.5rem; left: 4px; top: -2px; } .price p { margin-top: 15px; margin-bottom: 15px; } .pricing-features.mt-25 { margin-top: 10px; } .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 15px; } .pt-btn { margin-top: 20px; } /* Pricing Notice */ .pricing-notice { margin-top: 12px; } .col-lg-10 .pricing-notice p { padding: 0 4%; } .pricing-notice .btn.mt-25 { margin-top: 20px; } /* Pricing Toggle Button */ .pricing-1 .section-title p { margin-top: 10px; } .toggle-btn.mt-40 { margin-top: 25px; } .toggler-txt { font-size: 1.1rem; line-height: 34px; } .switch-wrap { min-width: 53px; height: 34px; margin: 0 6px; } .switcher { font-size: 0.9rem; height: 34px; padding: 0 10px 0 30px; border-radius: 34px; } .switcher .show-annual, .switcher .show-monthly { line-height: 34px; } .switcher:before { left: 4px; bottom: 4px; width: 26px; height: 26px; } .switch-wrap input:checked + .switcher { padding: 0 30px 0 10px; } /* Pricing Compare */ .table>:not(caption)>*>* { padding: 15px 0; } .comp-table .table-responsive.mb-50 { margin-bottom: 30px; } .comp-table .table-responsive thead th { font-size: 1.0625rem; } .comp-table .table-responsive tbody th { font-size: 1rem; } .comp-table .table-responsive tbody td { font-size: 1rem; top: 1px; } .comp-table .table-responsive tbody td span { top: 2px; } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.775rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 1rem; } .comp-table-payment h6 { margin-bottom: 12px; } .comp-table-payment p { font-size: 0.965rem; } /* INTEGRATIONS */ .integrations-2.pt-100.pb-70 { padding-bottom: 64px; } .integrations-3 { margin-bottom: -20px; } .int-2-wrapper .col { padding: 0 8px; } .integrations-3 .filter-item { margin-bottom: 20px; } .integrations-1 .section-title h2 { padding: 0 5%; } .int-1-wrapper { padding: 80px 60px; } .int-2-wrapper { padding: 0; } .int_tool-1 { margin-bottom: 24px; } .int_tool-2 { padding: 22px 20px; margin-bottom: 16px; } .int_tool-3 { padding: 15px 20px; } .int_tool-1 .tool_logo { padding: 30px 20px; margin-bottom: 25px; } .int_tool-1 img, .int_tool-2 img { width: 55px; height: 55px; } .int_tool-3 img { width: 36px; height: 36px; } .tool_txt h6 { font-size: 1.1875rem; margin-top: 0; } .tool_logo h6 { line-height: 36px; top: 3px; margin-left: 10px; } .int_tool-2 h6 { font-size: 1.125rem; margin-top: 18px; } .tool_txt p { margin-top: 0; } .tool_description p { font-size: 0.925rem; margin-top: 12px; } .integrations-section .more-btn.mt-30, .integrations-1 .more-btn { margin-top: 20px; } /* MORE APPS */ .apps-1-wrapper { padding: 0 3%; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 40px; } .app-box h6, .app-box h5 { margin-top: 20px; margin-bottom: 8px; } .apps-1-wrapper .app-logo-img { padding: 0 7%; } /* BRANDS */ .brands-2-wrapper { padding: 0 10px; } .brands-title h6 { margin-bottom: 40px; } .brands-title h5 { margin-bottom: 45px; } .brands-title p { padding: 0 10%; margin-bottom: 30px; } .brands-carousel-5 .brand-logo, .brands-carousel-6 .brand-logo { padding: 0 14px; } .brands-section .more-btn { margin-top: 25px; } /* CHANGELOG */ .version-release { margin-bottom: 50px; } .release-data { padding-bottom: 25px; margin-bottom: 25px; } span.version-data { font-size: 1.6rem; margin-bottom: 12px; } span.release-date { font-size: 1rem; } .release-highlights h6 { margin-bottom: 15px; } /* DOWNLOAD */ .download-item { padding: 35px 40px 30px; } .download-item img { max-height: 58px; margin-bottom: 20px; } .download-item h6 { font-size: 1.3125rem; } .download-item p { font-size: 1.05rem; margin-top: 5px; } /* FAQs */ .faqs-1 .section-title { margin-bottom: 40px; } .faqs-2 .section-title { margin-bottom: 50px; } .faq-3-title { margin-top: 5px; } .faq-3-title p { font-size: 1.05rem; margin-top: 12px; margin-bottom: 22px; } .faqs-2-questions .left-column { padding-right: 0; } .faqs-2-questions .right-column { padding-left: 0; } .faqs-2 .question { margin-bottom: 25px; } .faqs-1-questions h4 { margin-top: 60px; margin-bottom: 20px; } .faqs-2 .question h6, .faqs-2 .question h5 { margin-bottom: 12px; } .faqs-section .accordion-thumb { padding: 20px 0; } .faqs-section .accordion-panel { padding: 0 0 5px 0; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.785rem; line-height: 30px; top: 19px; } .more-questions { margin-top: 60px; } .faqs-2 .more-questions { margin-top: 40px; } /* BANNER */ .banner-1-wrapper { padding: 80px 65px 92px; } .banner-2-wrapper .banner-overlay { padding: 60px 65px 70px; } .banner-4-wrapper { padding: 45px 50px; } .banner-5-wrapper .banner-overlay { padding: 0 60px; } .banner-1-txt { padding-right: 5%; } .banner-section .section-id { margin-bottom: 25px; } .banner-2-txt h2, .banner-3-txt h2 { padding: 0 2%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { margin: 14px 0 20px; padding-right: 0; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0; margin: 16px 0 25px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 18px; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 12px; margin-bottom: 20px; } .banner-3-txt .btn.mt-25, .banner-3-txt .btn.mt-35 { margin-top: 25px; } .banner-4-btn { top: 8px; } .banner-4-btn p { margin: 10px 0 0; } .banner-section p.btn-txt { margin-top: 15px; } .banner-5-img.right-column { padding-left: 15px; } .banner-5-img.left-column { padding-right: 15px; } .banner-qr-code { right: 45px; max-width: 100px; padding: 10px 8px 8px; } .banner-1 .banner-qr-code { right: 55px; } /* NEWSLETTER */ .newsletter-1 .newsletter-overlay { padding: 60px 0; } .newsletter-2 .newsletter-overlay, .newsletter-4 .newsletter-overlay { padding: 65px 0; } .newsletter-3 .newsletter-overlay { padding: 40px 45px; } .newsletter-1 .newsletter-txt, .newsletter-3 .newsletter-txt { padding-right: 8%; } .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 25px; padding-left: 8%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 30px; } .newsletter-section .form-control { height: 52px; } .newsletter-section .btn { height: 52px; font-size: 0.925rem; padding: 0.7rem 1.4rem; } /* BLOG */ .blog-1 .blog-post { margin-bottom: 30px; } .blog-post-txt { margin-top: 30px; } .blog-1 .blog-post-meta { margin-top: 15px; } .wide-post .blog-post-meta { margin-top: 20px; } .meta-list-divider { padding: 0 1px; } .post-tag { font-size: 0.815rem; margin-bottom: 15px; } .blog-post-txt h6, .blog-post-txt h5 { margin-bottom: 12px; } .blog-post-txt h4 { margin-bottom: 15px; } /* BLOG LISTING */ #blog-page.pb-40 { padding-bottom: 40px; } #blog-page .blog-post { margin-bottom: 40px; } #blog-page .blog-post.wide-post { margin-bottom: 35px; } .wide-post .blog-post-img { margin-right: 10px; } .wide-post .blog-post-txt { margin-left: 0; } .posts-category { margin-top: 40px; margin-bottom: 40px; } /* SINGLE BLOG POST */ .blog-post-preview { padding: 0; margin-bottom: 40px; } .single-post-title { padding: 0 13% 0 3%; margin-bottom: 40px; } .single-post-title h2 { margin-bottom: 20px; } .single-post-txt { padding: 0 3%; } .single-post-txt h5.h5-xl { margin-top: 45px; margin-bottom: 20px; } .single-post-txt h5 { margin-top: 22px; margin-bottom: 18px; } .post-inner-img { margin-top: 45px; margin-bottom: 45px; } .post-data { margin: 60px 1% 0; padding: 60px 2% 80px; } .post-author-avatar { margin-right: 15px; } .post-author-avatar img { width: 65px; height: 65px; } .post-author-txt { top: 6px; } /* CONTACTS */ .contacts-1 .contact-form .contact-form-notice p { font-size: 0.9rem; line-height: 1.65; margin-top: 30px; } .contact-form .form-control, .contact-form .form-select { height: 54px; margin-bottom: 30px; } .contact-form textarea { min-height: 190px; } /* FOOTER */ .footer { padding-bottom: 35px; } .footer-data-logo, .footer-data-socials { margin-bottom: 55px; } .footer-1 .fl-3, .footer-1 .footer-contacts { margin-bottom: 25px; } img.footer-logo { max-height: 30px; margin-bottom: 20px; } .footer-data-logo img.footer-logo { max-height: 32px; margin-bottom: 0; } .footer-qr-code { max-width: 100px; padding: 8px; } .footer-copyright-logo { top: -3px; } .footer-copyright-logo img.footer-logo { max-height: 26px; } .footer h6 { margin-bottom: 20px; } .footer-phone { margin-top: 10px; } .footer-mail-link span { top: 4px; right: 5px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 14px; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } .footer-form .form-control, .footer-form .btn { height: 28px; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 24px!important; } .footer hr { margin-top: 10px; margin-bottom: 35px; } .footer-data-socials p { top: 7.5px; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.315rem; } .footer-copyright.copyright-logo p { line-height: 26px; margin-left: 12px; } /* INNER PAGE WRAPPER */ .inner-page-hero { padding-top: 160px; } .inner-page-title { margin-bottom: 50px; } .inner-page-title p { margin-top: 18px; } /* TERMS, PRIVACY, COOKIES */ .txt-block.legal-info h5 { margin: 40px 0 20px; } .txt-block.legal-info h6 { margin: 20px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 2px; } /* SIGN IN / SIGN UP */ .register-page-logo { padding-top: 26px; } .register-page-logo img { max-height: 26px; } .register-page-form { padding: 115px 0; } .reset-page-wrapper { margin: 0 3%; padding: 140px 0 120px; } .register-form-title { margin-bottom: 20px; } .register-form-title p { font-size: 1.0625rem; margin-top: 5px; } .reset-form-title { margin-bottom: 18px; } .reset-form-title p.p-sm { font-size: 0.925rem; margin-top: 12px; } .reset-password-link p { font-size: 0.935rem; margin-bottom: 25px; } .form-data span { font-size: 0.915rem; } .reset-password-form .form-data p { font-size: 1rem; margin-bottom: 10px; } .register-page-form p.create-account { font-size: 1rem; } .separator-line { font-size: 0.95rem; margin: 22px 0; } .reset-page-wrapper .form-control, .register-page-form .form-control { height: 50px; font-size: 1rem; padding: 0 15px; margin-bottom: 22px; } .reset-page-wrapper .form-control { margin-bottom: 18px; } #login .register-page-form .btn.submit { height: 50px; font-size: 1rem; margin-top: 0; } #signup .register-page-form .btn.submit { height: 50px; font-size: 1rem; margin-top: 25px; } .reset-page-wrapper .btn.submit { height: 50px; font-size: 1rem; } .register-page-form .btn-google { font-size: 1rem; } .btn-google img { width: 23px; height: 23px; top: 0; } /* COOKIES */ #cookies { width: 98%; left: 1%; bottom: 20px; padding: 22px; } #cookies p { font-size: 0.9rem; } #cookies-ok { font-size: 0.85rem; right: 45px; bottom: 14px; } #cookies-close { right: 20px; top: 19px; } #cookies-close svg { width: 10px; height: 10px; } /* MODAL */ .modal-dialog.modal-xl { width: 660px; } .modal-body-content { padding: 50px 30px 30px; } .modal-body-content h4 { margin-bottom: 12px; } .modal-body .newsletter-form { margin-top: 20px; } .modal .newsletter-form .form-control { height: 52px; font-size: 0.975rem; margin-bottom: 16px; } .modal .newsletter-form .btn { height: 52px; font-size: 0.975rem; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 991.98px) { html { font-size: 85%; } .wow { animation-name: none!important; visibility: visible!important; } #stlChanger .chBut .switch:after { font-size: 2.4rem; } /*------------------------------------------*/ /* BASE /*------------------------------------------*/ .py-40 { padding: 30px 0; } .py-50 { padding: 35px 0; } .py-60 { padding: 40px 0; } .py-70 { padding: 50px 0; } .py-80 { padding: 50px 0; } .py-90 { padding: 60px 0; } .py-100 { padding: 70px 0; } .pt-30 { padding-top: 24px; } .pt-40 { padding-top: 30px; } .pt-50 { padding-top: 35px; } .pt-60 { padding-top: 40px; } .pt-70 { padding-top: 50px; } .pt-80 { padding-top: 50px; } .pt-90 { padding-top: 60px; } .pt-100 { padding-top: 70px; } .pb-30 { padding-bottom: 24px; } .pb-40 { padding-bottom: 30px; } .pb-50 { padding-bottom: 35px; } .pb-60 { padding-bottom: 40px; } .pb-70 { padding-bottom: 50px; } .pb-80 { padding-bottom: 50px; } .pb-90 { padding-bottom: 60px; } .pb-100 { padding-bottom: 70px; } .mt-30 { margin-top: 24px; } .mt-40 { margin-top: 30px; } .mt-45 { margin-top: 30px; } .mt-50 { margin-top: 35px; } .mt-55 { margin-top: 35px; } .mt-60 { margin-top: 40px; } .mt-65 { margin-top: 45px; } .mt-70 { margin-top: 50px; } .mt-75 { margin-top: 50px; } .mt-80 { margin-top: 50px; } .mb-30 { margin-bottom: 24px; } .mb-40 { margin-bottom: 30px; } .mb-45 { margin-bottom: 30px; } .mb-50 { margin-bottom: 35px; } .mb-55 { margin-bottom: 35px; } .mb-60 { margin-bottom: 40px; } .mb-65 { margin-bottom: 45px; } .mb-70 { margin-bottom: 50px; } .mb-75 { margin-bottom: 50px; } .mb-80 { margin-bottom: 50px; } /* Background Shape */ .bg--shape:after { width: 650px; height: 650px; top: 19%; left: 18%; } /* Headers */ h6 { font-size: 1rem; } /* 13.6px */ h6.h6-md { font-size: 1.066176rem; } /* 14.5px */ h6.h6-lg, h6.h6-xl { font-size: 1.397058rem; } /* 19px */ h5 { font-size: 1.397058rem; } /* 19px */ h5.h5-md, h5.h5-lg, h5.h5-xl { font-size: 1.470588rem; } /* 20px */ h4, h4.h4-md, h4.h4-lg { font-size: 1.764705rem; } /* 24px */ h4.h4-xl { font-size: 1.91176rem; } /* 26px */ h3, h3.h3-md, h3.h3-lg, h3.h3-xl { font-size: 1.91176rem; } /* 26px */ h2 { font-size: 2.0588rem; } /* 28px */ h2.h2-md, h2.h2-lg { font-size: 2.20588rem; } /* 30px */ h2.h2-xl, h2.h2-title { font-size: 2.5rem; } /* 34px */ h6, h5, h4, h3, h2, h1 { line-height: 1.35; } /* Paragraphs */ p.p-sm { font-size: 1rem; } p.p-md, p.p-lg { font-size: 1.066176rem; } ol.digit-list p { margin-bottom: 5px; } /* Button */ .btn.btn-sm { font-size: 0.975rem; padding: 0.65rem 1.35rem; } .btn.ico-30.ico-left { padding: 0.3665rem 0; } .btns-group .btn.ico-30.ico-left, .btns-group .btn.ico-30.ico-right { padding: 0.31175rem 0.5rem; } .btn.ico-25.ico-left,.btn.ico-25.ico-right { font-size: 1.1rem; padding: 0.66625rem 0.85rem; } /* Buttons Group */ .btns-group .btn:first-child { margin-right: 10px; } /* Button Icon */ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { font-size: 1rem; line-height: 0.65rem!important; top: 3px; } .btn.ico-30 [class*="flaticon-"]:before, .btn.ico-30 [class*="flaticon-"]:after { font-size: 2rem; } .btn.ico-30.ico-left span.ico-30-txt { font-size: 1.125rem; top: -8px; margin-right: 0; } .btn.ico-30.ico-right span.ico-30-txt { font-size: 1.125rem; top: -8px; margin-left: 0; } .btn.ico-30.ico-left span { right: 0; } .btn.ico-left span { margin-right: 4px; } .btn.ico-right span { margin-left: 4px; } /* Button Text */ p.btn-txt, .btn-rating { margin: 10px 0 0 0; } p.btns-group-txt { margin: 12px 0 0 0; } .text-center p.btns-group-txt { margin-top: 15px; } .star-rating span.rating-txt { font-size: 1rem; } .os-version-ext { margin-top: 12px; } /* Transparent Link */ a.tra-link { font-size: 1.03675rem; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { font-size: 0.785rem; line-height: 0.7rem!important; top: 2px; left: 2px; } /* OS Button */ .os-btn { width: 240px; min-width: 240px; padding: 14px 15px 12px; } .os-btn-ico { margin-right: 14px; } .os-btn-txt p { font-size: 1.0625rem; margin-top: 3px; margin-bottom: 5px; } .os-btn-txt span { font-size: 1rem; } .d-inline-block.btn-os-last { margin-left: 12px; } .d-block.btn-os-last { margin-top: 10px; } /* Store Badges*/ .badge-img-xs .store img, .badge-img-sm .store img { max-height: 2.95rem; } .badge-img-md .store img, .badge-img-lg .store img { max-height: 3.1rem; } .store { margin-right: 10px; } /* Watch Video Link */ .watch-video { margin-top: 18px; } .watch-video-link { margin-right: 10px; } .watch-video-link span[class^="flaticon-"]:before, .watch-video-link span[class^="flaticon-"]:after { margin-left: 3px; } p.video-txt-lg { font-size: 1.1rem; } p.video-txt-sm { font-size: 1rem; } /* Video Popup Icon */ .video-btn-xl { width: 7rem; height: 7rem; margin-top: -3.5rem; margin-left: -3.5rem; } .video-btn-lg { width: 6.5rem; height: 6.5rem; margin-top: -3.125rem;; margin-left: -3.125rem;; } .video-btn-md { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-sm { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 5.5rem; line-height: 7rem!important; margin-left: 8px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-sm [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } /* Vector Icon Background */ .ico-55 .shape-ico svg { width: 96px; height: 96px; top: -33px; left: calc(50% - 53px); } .ico-60 .shape-ico svg { width: 110px; height: 110px; top: -40px; left: calc(50% - 58px); } /* Vector Rounded Icons */ .ico-rounded, .ico-rounded-md { width: 70px; height: 70px; } .ico-rounded-lg { width: 80px; height: 80px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded-md [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after,.ico-rounded-md [class*="flaticon-"]:after { font-size: 2.5rem; line-height: 70px!important; } .ico-rounded-lg [class*="flaticon-"]:before, .ico-rounded-lg [class*="flaticon-"]:after { font-size: 2.875rem; line-height: 80px!important; } /* PNG Icons */ .img-80 img { width: 62px; height: 62px; } .img-75 img { width: 57px; height: 57px; } .img-70 img, .img-65 img, .img-60 img { width: 55px; height: 55px; } /* Section ID */ .section-id { font-size: 0.9rem; margin-bottom: 20px; } /* Section Title */ .bc-04 .section-title.mb-70 { margin-bottom: 45px; } .section-title.mb-100 { margin-bottom: 60px; } .section-title p { margin-top: 10px; } .section-title .btns-group { margin-top: 20px; } /* Advantages */ .advantages, .text-center .advantages { margin-top: 10px; } /* Compatibility */ .compatibility { margin-top: 5px; } /* Tools List / Payments Icons */ .tools-list p, .payment-methods p { margin-bottom: 10px; } .payment-icons img { max-height: 26px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { font-size: 2rem; line-height: 2rem!important; margin-right: 4px; } /* Quote */ .quote-avatar img { width: 40px; height: 40px; } .quote p { font-size: 1.05rem; padding-left: 14px; margin-top: 10px; margin-bottom: 6px; } .quote-author { top: 12px; padding: 0 0 0 10px; } .quote.pr-15, .quote.pr-40, .quote.pr-50, .quote.pr-60 { padding-right: 0; } /* Users */ .txt-block .users { margin-top: 12px; } .users img { max-height: 36px; } .users p { font-size: 0.975rem; top: 11px; left: 7px; } .txt-block .users p { top: 10px; left: 4px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .headtoppart { display: none; } .wsmobileheader .smllogo { display: block; margin-top: 25px; padding-left: 22px; } .smllogo img { width: auto; max-width: inherit; max-height: 40px; } .wsmobileheader { height: 80px; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } .tra-menu .wsmobileheader, .white-menu .wsmobileheader { background-color: var(--white); } .dark-menu .wsmobileheader, .black-scroll .wsmobileheader { background-color: var(--ink); } .tra-menu.border-header .wsmainfull { border: none; } .theme--dark .tra-menu .wsmobileheader, .theme--dark .white-menu .wsmobileheader { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /* Mobile Header Burger Menu */ .wsanimated-arrow { padding: 14px 22px 14px 0px; margin: 24px 28px 0 0; } .wsanimated-arrow span:before { top: -8px; width: 26px; } .wsanimated-arrow span:after { bottom: -8px; width: 20px; } .dark-menu .wsanimated-arrow span, .dark-menu .wsanimated-arrow span:before, .dark-menu .wsanimated-arrow span:after, .black-scroll .wsanimated-arrow span, .black-scroll .wsanimated-arrow span:before, .black-scroll .wsanimated-arrow span:after { background: var(--white); } .theme--dark .wsanimated-arrow span, .theme--dark .wsanimated-arrow span:before, .theme--dark .wsanimated-arrow span:after { background: #b1b7cd; } .wsactive .wsanimated-arrow span:before, .wsactive .wsanimated-arrow.active span:after { width: 28px; top: 0; } .wsactive .wsanimated-arrow span:after { width: 28px; top: 0; } .wsactive .wsanimated-arrow span { background: transparent; } .wsmenu > .wsmenu-list > li > .wsmenu-click { height: 64px; } /* Dark Header Settings */ .dark-menu .wsmenu > .wsmenu-list, .black-scroll .wsmenu > .wsmenu-list { background-color: #1d222f!important; } .dark-menu .wsmenu > .wsmenu-list > li > a, .black-scroll .wsmenu > .wsmenu-list > li > a { border-bottom-color: var(--tra-white); } .dark-menu .wsmenu > .wsmenu-list > li > .wsmenu-click > i:before, .black-scroll .wsmenu > .wsmenu-list > li > .wsmenu-click > i:before { border-color: rgba(255, 255, 255, .85); } /* Nav Link */ .wsmenu > .wsmenu-list > li > a { font-size: 1.25rem; line-height: 46px; padding: 5px 32px 4px 20px; margin: 0; } .tra-menu .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--gray); } .black-scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 10px; width: 10px; margin: 21px 18px 0px 0px; } .wsmenu > .wsmenu-list > li .wsmenu-click.ws-activearrow > i { transform: rotate(-45deg); margin-top: 25px; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a { color: var(--white)!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn--white, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn--tra-white { color: #1d222f!important; } /* Nav Link Info */ span.sm-info { width: 22px; height: 22px; font-size: 0.95rem; line-height: 20px; top: -1px; } /* SubMenu / HalfMenu / MegaMenu */ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: 100%!important; min-width: 100%!important; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 100%!important; padding: 10px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 100%!important; left: 0; padding: 12px 10px; } .wsmenu > .wsmenu-list > li.mobile-last-link > ul.sub-menu { border-bottom: none!important; } .wsmegamenu.w-75 .col-lg-3, .wsmegamenu.halfmenu .col-lg-6 { padding: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { top: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; box-shadow: 0 0; border-bottom: 1px solid #ddd; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu { opacity: 1!important; visibility: visible!important; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);-o-transform: rotateX(0deg);transform: rotateX(0deg); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { border-bottom: 1px solid var(--tra-white)!important; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0;box-shadow: 0 0; } .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: #1d222f!important; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { width: 100%!important; min-width: 100%!important; box-shadow: 0 0; border: none; position: static; left: 0; top: 0; margin: 0; padding: 5px 0 0 0; } /* Sub Menu / Half Menu / Mega Menu Links */ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--gray); font-size: 1.2rem; padding: 15px 14px; } /* Black Scroll */ .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--black)!important; } /* Sub Menu / Half Menu / Mega Menu Links Hover */ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 15px 14px; text-decoration: none; } /* Black Scroll */ .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } .wsmenu > .wsmenu-list > li > .wsmegamenu ul li.title { font-size: 1.2rem; padding: 0 14px; margin-bottom: 10px; } .dark-menu .title, .black-scroll .title { color: #b1b7cd!important; } /* Button */ .wsmenu > .wsmenu-list > li a.btn { font-size: 1.25rem; line-height: 44px; border-width: 2px; padding: 5px 22px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .wsmenu > .wsmenu-list > li a.btn.ico-20 [class*="flaticon-"]:before, .wsmenu > .wsmenu-list > li a.btn.ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; line-height: 0.75rem!important; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 1.2rem; padding: 12px 14px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 12px 14px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { display: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02 > i { height: 10px; width: 10px; transform: rotate(-225deg); margin: 17px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02>i.wsmenu-rotate { margin-top: 22px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { line-height: 44px; padding: 5px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 0; } /* Header Store Badges */ .wsmenu > .wsmenu-list > li a.store.header-store { margin: 5px 0 0 12px; display: block; float: none; border-bottom: none; } .store.header-store img { max-height: 46px; } /* Header Social Links */ .wsmenu > .wsmenu-list > li.header-socials { display: block; } .header-socials a { margin-left: 20px; margin-right: 5px; } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.65rem; } /* Navbar Transparent Buttons */ .white-scroll .btn--tra-white, .white-scroll .btn--tra-black { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .theme--dark .white-scroll .btn--white, .theme--dark .white-scroll .btn--tra-white { background-color: var(--white)!important; border-color: var(--white)!important; } .black-scroll .btn--tra-white, .black-scroll .btn--tra-black { color: var(--ink)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .white-scroll .btn--tra-gray, .black-scroll .btn--tra-gray { color: var(--black)!important; background-color: var(--smoke)!important; border-color: var(--smoke)!important; } /* Navbar Buttons Hover */ .white-scroll .hover--white:hover, .white-scroll .hover--tra-white:hover { color: var(--black)!important; border-color: var(--black)!important; background-color: transparent!important; } .theme--dark .white-scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .navbar-dark .hover--tra-black:hover, .theme--dark .navbar-dark .scroll .hover--tra-black:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list { background-color: #1d222f!important; } .theme--dark .wsmenu > .wsmenu-list > li > .wsmenu-click > i:before { border-color: var(--white); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section { margin-top: 80px; } /* HERO QUICK FORM */ .hero-section .quick-form .form-control, .hero-section .quick-form .btn { height: 48px; font-size: 1.125rem; } .hero-section .quick-form.form-half .form-control { height: 48px; font-size: 1.0625rem; padding: 0 12px; } .hero-section .quick-form .btn { height: 48px; font-size: 1rem; padding: 13px 40px; margin-left: 6px; } .hero-section .quick-form.form-half .btn { height: 48px; font-size: 1.05rem; padding: 13px 22px; margin-left: 6px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -5px 0; } /* Hero Advantages */ .hero-section .advantages { margin-top: 14px; } /* HERO DIGITS */ .hero-digits { padding-right: 0 } #hd-1-1, #hd-1-2 { padding-right: 10px; } .hero-digits h2.statistic-number { font-size: 2.85rem; } .hero-digits h2.statistic-number small { font-size: 2rem; } /* HERO-1 */ #hero-1 { padding-top: 80px; margin-bottom: 50px; } .hero-1-txt { margin-top: -15px; margin-right: -14px; } .hero-1-txt h2 { font-size: 3rem; padding-right: 3%; } .hero-1-txt p.p-lg { font-size: 1.05rem; margin-top: 15px; margin-bottom: 22px; } .hero-1-txt .os-version-ext { margin-top: 18px; } .hero-1-img { padding: 0 0 0 10px; margin-bottom: -50px; } /* HERO-2 */ #hero-2 { padding-top: 75px; padding-bottom: 85px; } .hero-2-txt h2 { font-size: 3.5rem; } .hero-2-txt p.p-xl { padding: 0; margin-top: 15px; margin-bottom: 24px; } .hero-2-txt p.btn-txt { margin-top: 16px; } /* HERO-3 */ #hero-3 { padding-top: 80px; } .hero-3-txt h2 { font-size: 3.25rem; } .hero-3-txt p.p-xl { font-size: 1.3rem; margin-top: 15px; margin-bottom: 25px; } .hero-3-txt .btn-txt { margin-top: 20px; } .hero-3-img { margin-top: 40px; } /* HERO-4 */ #hero-4 { padding-top: 80px; } .hero-4-txt h2 { font-size: 3.25rem; } .hero-4-txt p.p-xl { padding: 0; margin-top: 18px; margin-bottom: 24px; } .hero-4-img { margin-top: 40px; } /* HERO-5 */ #hero-5 { padding-top: 80px; margin-bottom: 50px; } .hero-5-txt { margin: -15px -10px 0; } .hero-5-txt h2 { font-size: 3rem; } .hero-5-txt p.p-xl { font-size: 1.125rem; padding-right: 0; margin-top: 14px; margin-bottom: 20px; } .hero-5-img { padding: 0 12px 0 0; margin: 0 0 -50px -25px; } /* HERO-6 */ #hero-6 { padding-top: 80px; } #hero-6:after { height: 11%; } .hero-6-txt h2 { font-size: 3rem; } .hero-6-txt p.p-lg { padding: 0; margin-top: 16px; margin-bottom: 22px; } .hero-6-img { margin-top: 40px; padding: 0; } /* HERO-7 */ #hero-7 { padding-top: 70px; padding-bottom: 40px; } .hero-7-txt { margin-top: -25px; } .hero-7-txt h2 { font-size: 3rem; margin-bottom: 25px; } .hero-7-txt .os-version-ext { margin-top: 18px; } .hero-7-img { margin-bottom: -30%; } /* HERO-8 */ #hero-8 { padding-top: 70px; padding-bottom: 10px; margin-bottom: 35px; } .hero-8-txt { margin-top: -20px; } .hero-8-txt h2 { font-size: 3rem; padding-right: 3%; } .hero-8-txt p.p-lg { margin-top: 15px; margin-bottom: 22px; } .hero-8-txt .quick-form { margin-top: 15px; margin-right: 2%; } .hero-8-img { margin: 0 -100% -35px 5px; } /* HERO-9 */ #hero-9 { padding-top: 80px; } .hero-9-txt { margin-top: 0; } .hero-9-txt h2 { font-size: 3rem; } .hero-9-txt p.p-lg { padding-right: 10%; margin-top: 14px; margin-bottom: 22px; } .hero-9-txt .os-version-ext { margin-top: 16px; } .hero-9-img { padding-left: 0; } /* HERO-10 */ #hero-10 { padding-top: 80px; } .hero-10-txt h2 { font-size: 3rem; padding: 0 6%; } .hero-10-txt p.p-lg { padding: 0 3%; margin-top: 14px; margin-bottom: 22px; } .hero-10-txt p.btn-txt { margin-top: 25px; } #hero-10 .quick-form { margin: 22px 10% 0; } .hero-10-img { margin-top: 45px; } /* HERO-11 */ #hero-11 { padding-top: 80px; } .hero-11-txt h2 { font-size: 2.75rem; } .hero-11-txt p.p-lg { margin-top: 14px; margin-bottom: 20px; } .hero-11-txt .quick-form { margin-top: 12px; margin-right: 2%; } .hero-11-img { padding-left: 0; } /* HERO-12 */ #hero-12 { padding-top: 80px; } .hero-12-txt h2 { font-size: 3.35rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { margin-top: 16px; margin-bottom: 22px; } .hero-12-img { margin-top: 40px; } /* HERO-13 */ #hero-13 { padding-top: 80px; margin-bottom: 50px } .hero-13-txt { margin-top: -25px; } .hero-13-txt h2 { font-size: 2.65rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 14px; margin-bottom: 20px; } .hero-13-txt .quick-form { margin-top: 12px; margin-right: 2%; } .hero-13-img { padding-right: 0; margin-bottom: -50px } /* HERO-14 */ #hero-14 { padding: 80px 0 90px; } .hero-14-txt h2 { font-size: 3.75rem; } .hero-14-txt p.p-xl { padding: 0; margin-top: 16px; margin-bottom: 22px; } /* HERO-15 */ #hero-15 { padding-top: 80px; margin-bottom: 70px; } .hero-15-txt .hero-app-logo img { max-height: 76px; margin-bottom: 20px; } .hero-15-txt { margin-top: -25px; padding-left: 5px; } .hero-15-txt h2 { font-size: 2.75rem; } .hero-15-txt p.p-lg { padding-right: 0; margin-top: 15px; margin-bottom: 12px; } .hero-15-img { padding-right: 0; margin-left: -20px; margin-bottom: -70px; } /* HERO-16 */ #hero-16 { padding-top: 80px; } .hero-16-txt h2 { font-size: 3.125rem; padding: 0 4%; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 12px; margin-bottom: 22px; padding: 0 5%; } .hero-16-img { padding: 40px 30px 0; margin-top: 40px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .hero-16-img img { margin-bottom: -15px; } /* HERO-17 */ #hero-17 { padding-top: 70px; } .hero-17-txt .hero-app-logo img { max-height: 70px; margin-bottom: 20px; } .hero-17-txt h2 { font-size: 3.3rem; line-height: 1.3; } .hero-17-txt p.p-md { margin-top: 12px; margin-bottom: 20px; } .hero-17-img { margin: 0 -20px 0 -30px; } /* HERO-18 */ #hero-18 { padding-top: 80px; } .hero-18-txt .hero-app-logo img { max-height: 90px; margin-bottom: 25px; } .hero-18-txt h2 { font-size: 3rem; } .hero-18-txt p.p-xl { padding: 0; margin-top: 15px; margin-bottom: 20px; } .hero-18-img { margin-top: 15px; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-1 { margin-bottom: 70px; } .about-2-title { margin-bottom: 15px; } .about-4-title { padding-right: 2%; } .about-1-txt h2 { font-size: 3.25rem; margin-bottom: 10px; } .about-1-txt h4 { padding-right: 0; } .about-1-img { margin-top: 40px; margin-bottom: -70px; } .about-3 .img-block.left-column { margin-right: 5px; } .about-3 .img-block.right-column { margin-left: 5px; } /* CAREERS */ .jobs-category { padding: 0 30px 10px; margin-bottom: 30px; } .jobs-category h4 { padding-top: 25px; margin-bottom: 8px; } .career-item { padding: 15px 0; } .position-link { top: 20px; right: 5px; } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } .more-careers { margin-top: 45px; } .more-careers-txt p { font-size: 1.0625rem; top: 7px; } .more-careers-btn { margin-left: 15px; } .more-careers-btn .btn { font-size: 0.975rem; padding: 0.7rem 1.6rem; } /* JOB POSITION */ .job-position-title { padding: 60px 0 50px; margin: 80px 0 20px; } .job-position-title .position-data { margin-top: 10px; } .job-position-title .position-data p.p-xl { font-size: 1.3rem; } .job-position-title .btn { font-size: 1rem; padding: 0.75rem 1.6rem; margin-bottom: 5px; } .position-info h5 { margin: 35px 0 15px; } .position-info .btn { margin-top: 20px; } /* FEATURES */ .features-4.pt-30, .features-5.pt-30 { padding-top: 22px; } .features-4 .section-title.mb-70 { margin-bottom: 40px; } .features-2 .section-title p.p-xl { font-size: 1.2rem; } .fbox-5-wrapper { padding: 45px 30px 55px; } .features-1 .col { padding: 0 9px; } .features-5 .col { padding: 0 6px; } .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-2 .fb-5, .rows-2 .fb-6, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .row-cols-md-2 .fb-1, .row-cols-md-2 .fb-2 { margin-bottom: 30px; } .features-1 .row-cols-md-2 .fb-1, .features-1 .row-cols-md-2 .fb-2 { margin-bottom: 40px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3, .fbox-wrapper.left-align .rows-2 .fb-4 { margin-bottom: 35px; } .fbox-wrapper.left-align .rows-2 .fb-5, .fbox-wrapper.left-align .rows-2 .fb-6 { margin-bottom: 0; } .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fb-5, .rows-4 .fb-6, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6, .fbox-3.fb-1, .fbox-3.fb-2 { margin-bottom: 24px; } .fbox-wrapper.left-align .fbox-1 { text-align: center; padding: 0 5%; } .fbox-3 { padding: 36px 40px 27px; } .fbox-4-txt { padding-left: 35px; } .fbox-4, .fbox-4.fb-5, .fbox-4.fb-6 { padding: 25px 18px; } .fbox-4.fb-7, .fbox-4.fb-8 { padding: 40px 20px 0; } .fbox-4.fb-1 .fbox-4-img { margin: 20px 10% 0; } .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 10% 20px; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img, .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 22px 0 0; } .fbox-5 { padding: 40px 30px 35px; } .fbox-5-img img { max-height: 160px; margin-bottom: 20px; } .fbox-6 .fbox-img { margin-bottom: 20px; } .fbox-img.h-175 img, .fbox-img.h-180 img { max-height: 125px; } .fbox-7 .fbox-img.h-175 img, .fbox-7 .fbox-img.h-180 img { max-height: 120px; } .fbox-7 .fbox-img.h-175, .fbox-7 .fbox-img.h-180 { padding-top: 20px; margin: 0 0 45px; } .fbox-ico-wrap { margin-right: 16px; } .fbox-wrapper .row-cols-md-2 .ico-50 [class*="flaticon-"]:before, .fbox-wrapper .row-cols-md-2 .ico-50 [class*="flaticon-"]:after { font-size: 3.65rem; } .fbox-wrapper .row-cols-md-2 .fbox-2 .ico-50 [class*="flaticon-"]:before, .fbox-wrapper .row-cols-md-2 .fbox-2 .ico-50 [class*="flaticon-"]:after { font-size: 3.4rem; } .fbox-ico { margin-bottom: 14px; } .fbox-1 .fbox-ico.ico-60 { margin-bottom: 15px; } .fbox-5 .fbox-ico { margin-bottom: 18px; } .fbox-ico[class*="img-"] { margin-bottom: 20px; } .rows-3 .fbox-2 h5, .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6 { margin-bottom: 10px; } .fbox-3 h6 { margin: 12px 0 8px; } .fbox-4-txt h2, .fbox-4-txt h3.h3-xl, .fbox-4 h5, .fbox-5 h5 { margin-bottom: 12px; } .fbox-4-txt h3.h3-lg { font-size: 1.91176rem; margin-bottom: 12px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 16px; } .features-2-download { margin-top: 40px; } .features-2-download p.p-sm { font-size: 0.95rem; margin-top: 15px; } /* CONTENT */ .ct-08 { margin-bottom: 50px; } .ct-09 { margin-top: 50px; } .bc-04 { margin: 25px 0; } .ct-06 .section-overlay { margin-bottom: 80px; } .bc-01 .section-overlay { padding: 60px 35px; } .bc-02 .section-overlay, .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 40px 30px; } .bc-02.pt-30.bc-02-top { padding-top: 20px; margin-top: 50px; } .bc-03 .section-overlay { padding: 60px 40px 0; } .bc-04-wrapper { padding-left: 30px; } .ct-05 .section-title.mb-70 { margin-bottom: 40px; } .bc-03 .section-title { margin-bottom: 35px; } .bc-03 .section-title h2 { padding: 0 3%; } .bc-03 .section-title p { padding: 0; } .txt-box, .bc-1-wrapper .txt-box { margin-bottom: 15px; } .ct-09 .txt-block { margin-top: 25px; } .bc-01 .txt-block.left-column { padding-right: 5px; } .bc-01 .txt-block.right-column { padding-left: 5px; } .bc-04 .txt-block { padding-right: 0; margin-right: -5px; } .txt-block h3, .txt-block h2, .txt-block h5, .bc-02 .txt-block h5 { margin-bottom: 12px; } h5.h5-title { margin: 12px 0; } ul.simple-list li:not(:last-child) p { margin-bottom: 8px; } .txt-block-stat.mt-30 { margin-top: 18px; } .txt-block-stat.mt-35 { margin-top: 20px; } .txt-block .btn { margin-top: 18px; } .txt-block-tra-link { margin-top: 14px; } .txt-block .stores-badge { margin-top: 20px; } .cbox-1 .ico-wrap { margin-right: 1rem; } .cbox-1-ico { width: 1.9rem; height: 1.9rem; font-size: 1rem; line-height: 1.5rem; margin-top: 2px; } .cbox-2 .ico-wrap { margin-right: 1.25rem; } .cbox-2 .cbox-2-ico { top: 4px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 2.75rem; } .cbox-1-txt { margin-bottom: 16px!important; } .cbox-2-txt { margin-bottom: 20px!important; } .cbox-3-txt { margin-bottom: 22px; } .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 10px!important; } .cbox-title { margin-bottom: 12px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.05rem; } .cbox-title span { margin-right: 12px; } .cbox-title h5 { line-height: 1.75rem!important; } .cbox-4-wrapper { margin-top: -3px; } .box-title { margin-bottom: 10px; } .box-title span { top: 5px; right: 4px; } .cbox-5 { width: 280px; min-width: 280px; padding: 13px 20px; } .cbox-5.cb-1 { margin: 8px 0 20px; } .cbox-5-txt { padding-left: 13px; } .cbox-5-txt h6 { margin-bottom: 0; } .cbox-6 { padding: 30px 22px; margin: 0 5%; } .cbox-6 hr { margin-top: 25px; margin-bottom: 15px; } .cbox-6 h2.statistic-number { font-size: 2.9rem; } .cbox-6 .statistic-number sup { font-size: 2.15rem; top: -8px; right: 0; margin-right: 5px; } .cbox-6-title p.p-md.ico-10 { margin-top: 10px; } .cbox-6-txt.mt-30 { margin-top: 18px; } .cbox-6-data { padding: 9px 15px; } .cbox-6-data.mt-25 { margin-top: 18px; } .cb-shape-1 { right: -50px; top: -20px; } .cb-shape-2 { left: -5px; bottom: -30px; } .cb-shape-1 img, .cb-shape-2 img { width: 60%; height: 60%; } .cbox-7-txt { padding-left: 8px; } .cbox-7-ico { width: 20px; height: 20px; margin-top: 1px; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.775rem; } .cbox-7-ico span { line-height: 18px; } .cbox-7-txt p { margin-bottom: 12px; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.85rem; line-height: 30px; top: -4px; } .tabs-1 li { margin-bottom: 6px; padding: 16px 18px; } .tab-link p { margin-top: 6px; } /* Content Image */ .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 0; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 0; } .ct-03 .img-block img { max-width: 215%; margin-left: 15px; } .ct-04 .img-block img { max-width: 215%; margin-left: -125%; } .ct-07 .img-block, .ct-08 .img-block { margin-bottom: -50px; } .ct-09 .img-block { margin-top: -50px; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -80px; } .img-block-txt, .img-block-btn { margin-top: 40px; } .bc-3-img .video-btn { top: calc(50% - 60px); } .bc-2-img.left-column { margin-right: 0; } .bc-2-img.right-column { margin-left: 0; } .bc-3-img { margin-bottom: -150px; } .bc-4-img { margin: -15px 0; padding-left: 10px; } /* STATISTIC */ .statistic-2-wrapper .txt-block { padding-left: 15px; padding-right: 4%; } #sb-2-1 { padding-left: 10%; } .statistic-1 .statistic-block { display: block!important; text-align: center; } .statistic-1-wrapper .statistic-block-digit { width: 100%; display: block!important; float: none; margin-bottom: 12px; } .statistic-1-wrapper .statistic-block-txt { width: 100%; display: inline-block!important; padding: 0 8%; } .statistic-4-wrapper .statistic-block { padding: 10px 0 10px 15px; } .statistic-ico { margin-bottom: 10px; } .statistic-1 h2.statistic-number { font-size: 2.9rem; line-height: 1; letter-spacing: -1px; } .statistic-2-wrapper h2 { margin-bottom: 13px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { font-size: 2.45rem; letter-spacing: 0; margin-bottom: 12px; } .statistic-4-wrapper h5 { margin: 16px 0 12px; } .statistic-1-wrapper p { line-height: 1.5; top: 0; } /* RATING */ .rating-section .rating-1-wrapper.text-center { padding: 0; } .rating-section .rating-2-wrapper.text-center { padding: 0 5%; } .rbox-1 .star-rating { font-size: 1rem; } .rbox-1 .star-rating span { top: -1.5px; } .rbox-2 p { margin-top: 12px; } .rbox-1-img { margin-bottom: 12px; } .rbox-1-img img { max-height: 28px; } .rbox-2-img img { max-height: 65px; } #rb-2-2 .rbox-2-img img { max-height: 110px; } /* TESTIMONIALS */ .reviews-3-wrapper { padding: 0; } .reviews-3-wrapper:after { width: 140%; height: 85%; top: 8%; left: -20%; } .review-1 { padding: 25px 20px 28px; margin: 0 10px 30px; } .review-1.no-title { padding: 35px 20px 25px; } .review-2 { padding: 0 20px; } .review-3 { padding: 35px 20px 25px; } #rw-3-1, #rw-3-2 { margin-bottom: 12px; } .review-item { width: 50%; margin-bottom: 24px; } .review-4 { padding: 28px 20px; } .review-ico.ico-45 { top: 10px; right: 20px; } .review-ico.ico-60 { top: 10px; left: 13px; } .review-1-txt h6.h6-md, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg { margin-bottom: 8px; padding-right: 0; } .review-2-txt h6.h6-lg { margin-bottom: 10px; } .review-1-txt h6.h6-lg { font-size: 1.25rem; margin-bottom: 8px; padding-right: 0 } .review-rating.ico-15 { margin-bottom: 5px; } .review-rating.ico-15.mb-15 { margin-bottom: 8px; } .author-data { margin-top: 10px; } .author-data.mt-25 { margin-top: 15px; } .author-data.mb-15 { margin-bottom: 10px; } .review-avatar img, .owl-item .review-avatar img { width: 40px; height: 40px; } .review-2 .review-avatar img { width: 44px; height: 44px; } .review-3 .review-avatar img { width: 42px; height: 42px; } .review-3 .review-author { margin-top: 2px; } .author-data .review-author { padding: 0 0 0 12px; } .review-author.mt-15 { margin-top: -3px; } .review-author h6 { font-size: 1.1rem; margin-top: 4px; margin-bottom: 7px; } .review-author .review-rating { margin-top: -5px; } .reviews-btn { margin-top: 45px; } /* TEAM */ .team-1 { padding-bottom: 40px; } .team-member { margin-bottom: 40px; } .team-member-photo { margin-bottom: 16px; } .team-member-data h6 { margin-bottom: 5px; } .team-member-data p { font-size: 1.05rem; } /* PRICING */ .pricing-1 .section-title.mb-70 { margin-bottom: 40px; } .pricing-1 .container, .pricing-2 .container, .pricing-1-wrapper .col, .pricing-2-wrapper .col { padding: 0 5px; } .pricing-3-wrapper { padding: 0 8%; } .pricing-1-table { padding: 28px 22px; } .pricing-2-table { padding: 20px; } .pricing-3-table { padding: 20px 30px; } #pt-3-1 { margin: 0 5px 40px 35px; } #pt-3-2 { margin: 0 35px 40px 5px; } .pricing-table-header h5 { margin-bottom: 18px; } .pricing-discount { top: 2px; right: -3px; padding: 5px 9px; } .pricing-discount h6 { font-size: 0.935rem; } /* Price */ .price span { font-size: 2.45rem; letter-spacing: -1.5px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.45rem; } .price sup { font-size: 2.125rem; top: -2px; } .pricing-2-table .price sup, .pricing-3-table .price sup { font-size: 1.85rem; top: -3px; } .price sup.validity { font-size: 1.2rem; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.45rem; } .price p { font-size: 0.9075rem; margin-top: 14px; margin-bottom: 14px; } .pricing-table-header p.p-md { font-size: 0.9rem; } .pricing-features.mt-25, .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { margin-top: 15px; } .pricing-features li, .pricing-3-table .pricing-features li { padding: 8px 0; } .pricing-2-table .pricing-features li { padding-top: 8px; padding-bottom: 8px; } .pricing-1-table .pricing-features li span { display: none; } .pricing-features p.p-md { font-size: 0.935rem; line-height: 1.5; } .pt-btn { font-size: 0.95rem; padding: 0.785rem 0.5rem; margin-top: 15px; } .p-table p.btn-txt { font-size: 0.875rem; margin-top: 10px; } /* Pricing Notice */ .pricing-notice { margin-top: 0; } .col-md-10 .pricing-notice p { padding: 0; } .pricing-notice .btn.mt-25 { margin-top: 20px; } /* Pricing Toggle Button */ .pricing-1 .section-title p { margin-top: 10px; } .toggle-btn.mt-40 { margin-top: 16px; } .toggler-txt { font-size: 1.125rem; line-height: 28px; } .switch-wrap { min-width: 46px; height: 28px; margin: 0 6px; } .switcher { font-size: 0.85rem; height: 28px; padding: 0 10px 0 30px; border-radius: 32px; } .switcher .show-annual, .switcher .show-monthly { line-height: 28px; } .switcher:before { left: 3px; bottom: 3px; width: 22px; height: 22px; } .switch-wrap input:checked + .switcher { padding: 0 30px 0 10px; } /* Pricing Compare */ .table-responsive.mb-50 { margin-bottom: 30px; } .table>:not(caption)>*>* { padding: 12px 0x; } .comp-table .table-responsive thead th { font-size: 1.1rem; } .comp-table .table-responsive tbody th { font-size: 1.0625rem; } .comp-table .table-responsive tbody td { font-size: 1.0625rem; top: 1px; } .comp-table .table-responsive tbody td span { top: 1px; } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.715rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.925rem; } .comp-table-payment .col { padding: 0 10px; } .comp-table-payment h6 { font-size: 1.15rem; margin-bottom: 14px; } .payment-icons li { padding-right: 2px; } .comp-table-payment .payment-icons { margin-top: 18px; } .comp-table-payment .payment-icons img { width: auto; max-width: inherit; max-height: 22px; } /* INTEGRATIONS */ .integrations-2.pt-100.pb-70 { padding-bottom: 46px; } .int-1-wrapper { padding: 60px; } .int-2-wrapper { padding: 0; } .filter-btns button { font-size: 1.15rem; margin: 0 12px; } .integrations-3 .filter-item { width: 50%; padding: 0 10px; margin-bottom: 20px; } .int_tool-1 { margin-bottom: 30px; } .int_tool-2 { padding: 30px 20px; margin-bottom: 24px; } .int_tool-3 { padding: 16px 22px; } .int_tool-1 .tool_logo { padding: 40px 30px; margin-bottom: 25px; } .int_tool-1 img { width: 60px; height: 60px; } .int_tool-2 img { width: 55px; height: 55px; } .int_tool-3 img { width: 36px; height: 36px; } .tool_txt { overflow: visible; flex: none; max-width: auto; } .tool_txt h6 { font-size: 1.35rem; margin-top: 0; } .tool_logo h6 { line-height: 36px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { font-size: 1.35rem; } .int_tool-2 h6 { font-size: 1.25rem; margin-top: 20px; } .tool_txt p { font-size: 1.15rem; margin-top: 0; } .tool_description p { font-size: 1rem; margin-top: 12px; } .integrations-section .more-btn.mt-30 { margin-top: 22px; } .integrations-1 .more-btn { margin-top: 16px; } /* MORE APPS */ .apps-1-wrapper { padding: 0; } .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 { margin-bottom: 30px; } .app-box h6, .app-box h5 { margin-top: 20px; margin-bottom: 8px; } .apps-1-wrapper .app-logo-img { padding: 0 5%; } /* BRANDS */ .brands-2-wrapper .col { padding: 0 10px; } .brands-title h6 { margin-bottom: 30px; } .brands-title h5 { margin-bottom: 40px; } .brands-title p { padding: 0 10%; margin-bottom: 25px; } .brands-carousel-5 .brand-logo, .brands-carousel-6 .brand-logo { padding: 0 10px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0; } .brands-section .more-btn { margin-top: 25px; } /* CHANGELOG */ .version-release { margin-bottom: 50px; } .release-data { padding-bottom: 20px; margin-bottom: 17px; } span.version-data { margin-bottom: 12px; } span.release-date { font-size: 1.1rem; } .release-highlights h6 { margin-bottom: 12px; } .release-highlights ul.simple-list li:not(:last-child) p { margin-bottom: 5px; } .release-preview { margin-bottom: 20px; } /* DOWNLOAD */ .download-item { padding: 25px 25px 20px; } .download-item img { max-height: 47px; margin-bottom: 20px; } .download-item h6 { font-size: 1.375rem; } .download-item p { font-size: 1.05rem; margin-top: 5px; } /* FAQs */ .faqs-1 .section-title { padding: 0 3%; margin-bottom: 30px; } .faqs-2 .section-title { padding: 0 3%; margin-bottom: 40px; } .faq-3-title { margin-top: 5px; } .faq-3-title p { font-size: 1.0625rem; margin-top: 12px; margin-bottom: 20px; } .faqs-2 .question { margin-bottom: 20px; } .faqs-2-questions .left-column { padding-right: 0; } .faqs-2-questions .right-column { padding-left: 0; } .faqs-1-questions h4 { margin-top: 50px; margin-bottom: 20px; } .faqs-2 .question h6, .faqs-2 .question h5 { padding-right: 0; margin-bottom: 10px; } .faqs-section .accordion-thumb { padding: 18px 0 22px; } .faqs-section .accordion-panel { padding: 0 0 5px 0; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.85rem; line-height: 30px; top: 17px; } .more-questions { margin-top: 45px; } .faqs-2 .more-questions { margin-top: 30px; } .more-questions-btn { margin-top: 5px; } /* BANNER */ .banner-1-wrapper { padding: 65px 50px 70px; } .banner-2-wrapper .banner-overlay { padding: 45px 50px 55px; } .banner-3 .banner-overlay.pt-80.pb-90 { padding: 45px 0 55px; } .banner-4-wrapper { padding: 35px 40px; } .banner-5 { padding-top: 35px; } .banner-5-wrapper .banner-overlay { padding: 0 40px; } .banner-section .section-id { margin-bottom: 18px; } .banner-1-txt h4, .banner-4-txt h4 { font-size: 1.85rem; } .banner-1-txt h2 { padding-right: 3%; } .banner-2-txt h2, .banner-3-txt h2 { padding: 0 5%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { margin: 12px 0 18px; padding-right: 0 } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 4%; margin: 12px 0 18px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 15px; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 12px; margin-bottom: 20px; } .banner-3-txt .btn.mt-25, .banner-3-txt .btn.mt-35 { margin-top: 20px; } .banner-4-btn { top: 8px; } .banner-4-btn p { margin: 10px 0 0!important; } .banner-section p.btn-txt { margin-top: 15px; } .banner-5-img.right-column { margin-top: -35px; padding-left: 5px; } .banner-5-img.left-column { margin-top: -35px; padding-right: 5px; } .banner-qr-code { right: 32px; max-width: 85px; padding: 10px 8px 8px; } .banner-1 .banner-qr-code { right: 40px; } /* NEWSLETTER */ .newsletter-1 .newsletter-overlay { text-align: center; padding: 50px 18% 40px; } .newsletter-2 .newsletter-overlay { padding: 55px 0 45px; } .newsletter-3 .newsletter-overlay { text-align: center; padding: 45px 14% 35px; } .newsletter-4 .newsletter-overlay { padding: 60px 0 50px; } .newsletter-txt h4, .newsletter-txt h3 { font-size: 2.0588rem; padding: 0 5%; margin-bottom: 22px; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { padding: 0 14%; } .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 0; padding: 0 5%; } .newsletter-2 .newsletter-form, .newsletter-4 .newsletter-form { padding: 0 6%; margin-top: 25px; } .newsletter-section .form-control { height: 50px; font-size: 1.125rem; margin-right: 8px; } .newsletter-section .btn { height: 50px; font-size: 1.0625rem; padding: 0.7rem 1.45rem; } .newsletter-2.newsletter-section .btn, .newsletter-4.newsletter-section .btn { font-size: 1.0625rem; } /* BLOG */ .blog-1 .blog-post { margin-bottom: 30px; } #bp-1-3 { display: none; } .blog-post-txt { margin-top: 25px; } .blog-post-meta, .wide-post .blog-post-meta { margin-top: 16px; } .meta-list-divider { padding: 0 1px; } .post-tag { font-size: 0.815rem; margin-bottom: 12px; } .blog-post-txt h4, .blog-post-txt h6, .blog-post-txt h5 { margin-bottom: 12px; } /* BLOG LISTING */ #blog-page.pb-40 { padding-bottom: 30px; } #blog-page .blog-post { margin-bottom: 40px; } #blog-page .blog-post.wide-post { margin-bottom: 35px; } .wide-post .blog-post-img { margin-right: 5px; } .wide-post .blog-post-txt { margin-left: 0; } .posts-category { margin-top: 30px; margin-bottom: 30px; } /* SINGLE BLOG POST */ .blog-post-preview { padding: 0; margin-bottom: 35px; } .single-post-title { padding: 0; margin-bottom: 35px; } .single-post-title .blog-post-meta { margin-bottom: 18px; } .single-post-title h2 { margin-bottom: 16px; } .single-post-txt { padding: 0; } .single-post-txt h6 { margin-bottom: 10px; } .single-post-txt h5.h5-xl { font-size: 1.575rem; margin-top: 30px; margin-bottom: 16px; } .single-post-txt h5 { margin-top: 17px; margin-bottom: 16px; } .post-inner-img { margin-top: 35px; margin-bottom: 35px; } .post-data { margin: 45px 0 0; padding: 45px 0 70px; } .post-author-avatar { margin-right: 15px; } .post-author-avatar img { width: 55px; height: 55px; } .post-author-txt { top: 4px; } .post-share-list p { margin-bottom: 10px; } /* CONTACTS */ .contacts-1.pb-40 { padding-bottom: 20px; } .contacts-1 .contact-form p { font-size: 1.05rem; margin-bottom: 14px; padding-left: 10px; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.95rem; margin-top: 25px; } .contact-form .form-control, .contact-form .form-select { height: 50px; font-size: 1.05rem; padding: 0 15px; margin-bottom: 26px; } .contact-form textarea { min-height: 160px; } .contact-form textarea.form-control { padding: 15px; } /* FOOTER */ .footer { padding-bottom: 25px; } .footer-data-logo, .footer-data-socials { margin-bottom: 50px; } .footer-1 .fl-3, .footer-1 .fl-5, .footer-1 .footer-contacts { margin-bottom: 20px; } img.footer-logo { max-height: 28px; margin-bottom: 16px; } .footer-data-logo img.footer-logo { max-height: 30px; margin-bottom: 0; } .footer-qr-code { max-width: 90px; padding: 8px; } .footer-copyright-logo { top: -3px; } .footer-copyright-logo img.footer-logo { max-height: 25px; } .footer h6 { font-size: 1.21323rem; margin-bottom: 16px; } /* 16.5px */ .footer-phone { margin-top: 10px; } .footer-mail-link { margin: 0 0 0 6px; } .footer-mail-link span { top: 4px; right: 5px; } .footer .foo-links li p { margin-bottom: 8px; } .footer hr { margin: 5px 0 25px; } .footer-socials.ico-20 a, .footer-socials.ico-25 a { margin-right: 11px; } .footer-socials.ico-20 li:last-child a, .footer-socials.ico-25 li:last-child a { margin-right: 0; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.325rem; } .footer-form .form-control, .footer-form .btn { height: 20px; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 10px!important; } .footer-data-socials li { padding-left: 9px; } .footer-data-socials p { top: 7.5px; } .footer-copyright.copyright-logo p { line-height: 25px; margin-left: 12px; } /* INNER PAGE WRAPPER */ .inner-page-hero { margin-top: 80px; padding-top: 60px; } .page-hero-section-overlay { margin-top: 80px; padding-top: 60px; } .inner-page-title { margin-bottom: 40px; } .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { margin-top: 15px; } .page-hero-section h2 { line-height: 1.25; margin-bottom: 20px; } /* TERMS, PRIVACY, COOKIES */ .txt-block.legal-info h5 { margin: 30px 0 15px; } .txt-block.legal-info h6 { margin: 15px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 2px; } /* SIGN IN / SIGN UP */ .register-page-logo { padding-top: 26px; } .register-page-logo img { max-height: 24px; } .register-page-form { margin: 0 8%; padding: 110px 0; } .reset-page-wrapper { margin: 0 8%; padding: 150px 0 115px; } .register-form-title { margin-bottom: 20px; } .register-form-title h4 { font-size: 1.95rem; } .register-form-title p { font-size: 1.15rem; margin-top: 5px; } .reset-form-title { margin-bottom: 18px; } .reset-form-title h5 { font-size: 1.8em; } .reset-form-title p.p-sm { font-size: 1.0625rem; margin-top: 12px; } .reset-password-link p { font-size: 1.0625rem; margin-bottom: 25px; } .form-data span { font-size: 1rem; } .register-page-form p.create-account { font-size: 1.125rem; } .separator-line { font-size: 1.0625rem; margin: 20px 0; } .reset-page-wrapper .form-control, .register-page-form .form-control { height: 48px; font-size: 1.0625rem; padding: 0 15px; margin-bottom: 20px; } .reset-page-wrapper .form-control { margin-bottom: 18px; } #login .register-page-form .btn.submit { height: 48px; font-size: 1.0625rem; margin-top: 0; } #signup .register-page-form .btn.submit { height: 48px; font-size: 1.0625rem; margin-top: 22px; } .reset-page-wrapper .btn.submit { height: 48px; font-size: 1.0625rem; } .register-page-form .btn-google { font-size: 1.125rem; padding: 0.9rem 1.6rem; } .btn-google img { width: 22px; height: 22px; right: 4px; } /* COOKIES */ #cookies { width: 98%; left: 1%; bottom: 14px; padding: 20px; } #cookies p { font-size: 0.9rem; } #cookies-ok { font-size: 0.85rem; padding: 4px 14px; right: 40px; bottom: 15px; } #cookies-info { margin-left: 7px; } #cookies-close { top: 16px; right: 16px; } #cookies-close svg { width: 9px; height: 9px; } /* MODAL */ .modal-dialog.modal-xl { max-width: 550px!important; } .modal-body-content { padding: 40px 25px 30px; } .modal-body-content h4 { margin-bottom: 12px; } .modal-body .newsletter-form { margin-top: 18px; } .modal .newsletter-form .form-control { height: 52px; font-size: 1.1rem; margin-bottom: 16px; } .modal .newsletter-form .btn { height: 50px; font-size: 1.05rem; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (max-width: 767px) { /*------------------------------------------*/ /* BASE /*------------------------------------------*/ .animate__animated { -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; opacity: 1; } .wow { animation-name: none!important; visibility: visible!important; } .block--shadow { -webkit-box-shadow: 0 3px 4px 0 var(--tra-black); -moz-box-shadow: 0 3px 4px 0 var(--tra-black); box-shadow: 0 3px 4px 0 var(--tra-black); } .py-40 { padding: 30px 0; } .py-50 { padding: 35px 0; } .py-60 { padding: 40px 0; } .py-70 { padding: 50px 0; } .py-80 { padding: 50px 0; } .py-90 { padding: 60px 0; } .py-100 { padding: 70px 0; } .pt-40 { padding-top: 30px; } .pt-50 { padding-top: 35px; } .pt-60 { padding-top: 40px; } .pt-70 { padding-top: 50px; } .pt-80 { padding-top: 50px; } .pt-90 { padding-top: 60px; } .pt-100 { padding-top: 70px; } .pb-40 { padding-bottom: 30px; } .pb-50 { padding-bottom: 35px; } .pb-60 { padding-bottom: 40px; } .pb-70 { padding-bottom: 50px; } .pb-80 { padding-bottom: 50px; } .pb-90 { padding-bottom: 60px; } .pb-100 { padding-bottom: 70px; } .mt-30 { margin-top: 24px; } .mt-40 { margin-top: 30px; } .mt-45 { margin-top: 30px; } .mt-50 { margin-top: 35px; } .mt-55 { margin-top: 35px; } .mt-60 { margin-top: 40px; } .mt-65 { margin-top: 45px; } .mt-70 { margin-top: 50px; } .mt-75 { margin-top: 50px; } .mt-80 { margin-top: 50px; } .mb-30 { margin-bottom: 24px; } .mb-40 { margin-bottom: 30px; } .mb-45 { margin-bottom: 30px; } .mb-50 { margin-bottom: 35px; } .mb-55 { margin-bottom: 35px; } .mb-60 { margin-bottom: 40px; } .mb-65 { margin-bottom: 45px; } .mb-70 { margin-bottom: 50px; } .mb-75 { margin-bottom: 50px; } .mb-80 { margin-bottom: 50px; } .ts-0 { padding-top: 80px; } p.p-sm { font-size: 1rem; } /* Button Text */ p.btn-txt { margin: 12px 0 0 0; } p.btns-group-txt { margin: 12px 0 0 0; } .text-center p.btns-group-txt { margin-top: 16px; } /* Quote */ .quote-avatar img { width: 54px; height: 54px; } .quote p { padding-left: 14px; margin-top: 15px; } .quote-author { padding: 0 0 0 10px; } .quote.pr-15, .quote.pr-40, .quote.pr-50, .quote.pr-60 { padding-right: 0; } /* Users */ .txt-block .users { margin-top: 14px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .headtoppart { display: none; } .wsmobileheader .smllogo { display: block; margin-top: 25px; padding-left: 22px; } .smllogo img { width: auto; max-width: inherit; max-height: 30px; } .wsmobileheader { height: 80px; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } .tra-menu .wsmobileheader, .white-menu .wsmobileheader { background-color: var(--white); } .dark-menu .wsmobileheader, .black-scroll .wsmobileheader { background-color: var(--ink); } .tra-menu.border-header .wsmainfull { border: none; } .theme--dark .tra-menu .wsmobileheader, .theme--dark .white-menu .wsmobileheader { background-color: var(--ink)!important; -webkit-box-shadow: 0 2px 3px var(--tra-ink); -moz-box-shadow: 0 2px 3px var(--tra-ink); box-shadow: 0 2px 3px var(--tra-ink); } /* Mobile Header Burger Menu */ .wsanimated-arrow { padding: 14px 22px 14px 0px; margin: 24px 28px 0 0; } .wsanimated-arrow span:before { top: -8px; width: 26px; } .wsanimated-arrow span:after { bottom: -8px; width: 20px; } .dark-menu .wsanimated-arrow span, .dark-menu .wsanimated-arrow span:before, .dark-menu .wsanimated-arrow span:after, .black-scroll .wsanimated-arrow span, .black-scroll .wsanimated-arrow span:before, .black-scroll .wsanimated-arrow span:after { background: var(--white); } .theme--dark .wsanimated-arrow span, .theme--dark .wsanimated-arrow span:before, .theme--dark .wsanimated-arrow span:after { background: #b1b7cd; } .wsactive .wsanimated-arrow span:before, .wsactive .wsanimated-arrow.active span:after { width: 28px; top: 0; } .wsactive .wsanimated-arrow span:after { width: 28px; top: 0; } .wsactive .wsanimated-arrow span { background: transparent; } .wsmenu > .wsmenu-list > li > .wsmenu-click { height: 64px; } .wsmenu > .wsmenu-list > li.mobile-last-link > a { border-bottom: none; } /* Dark Header Settings */ .dark-menu .wsmenu > .wsmenu-list, .black-scroll .wsmenu > .wsmenu-list { background-color: #1d222f!important; } .dark-menu .wsmenu > .wsmenu-list > li > a, .black-scroll .wsmenu > .wsmenu-list > li > a { border-bottom-color: var(--tra-white); } .dark-menu .wsmenu > .wsmenu-list > li > .wsmenu-click > i:before, .black-scroll .wsmenu > .wsmenu-list > li > .wsmenu-click > i:before { border-color: rgba(255, 255, 255, .85); } /* Nav Link */ .wsmenu > .wsmenu-list > li > a { font-size: 1.125rem; line-height: 46px; padding: 5px 32px 4px 20px; margin: 0; } .tra-menu .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--gray); } .black-scroll .wsmenu > .wsmenu-list > li > a.h-link { color: var(--white); } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 10px; width: 10px; margin: 21px 18px 0px 0px; } .wsmenu > .wsmenu-list > li .wsmenu-click.ws-activearrow > i { transform: rotate(-45deg); margin-top: 25px; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a, .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a { color: var(--white)!important; } .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn--white, .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn--tra-white { color: #1d222f!important; } /* SubMenu / HalfMenu / MegaMenu */ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: 100%!important; min-width: 100%!important; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 100%!important; padding: 10px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { width: 100%!important; left: 0; padding: 12px 10px; } .wsmenu > .wsmenu-list > li.mobile-last-link > ul.sub-menu { border-bottom: none!important; } .wsmegamenu.w-75 .col-lg-3, .wsmegamenu.halfmenu .col-lg-6 { padding: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { top: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; box-shadow: 0 0; border-bottom: 1px solid #ddd; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu { opacity: 1!important; visibility: visible!important; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);-o-transform: rotateX(0deg);transform: rotateX(0deg); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { border-bottom: 1px solid var(--tra-white)!important; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0;box-shadow: 0 0; } .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: #1d222f!important; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu { width: 100%!important; min-width: 100%!important; box-shadow: 0 0; border: none; position: static; left: 0; top: 0; margin: 0; padding: 5px 0 0 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span { display: none; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02 > i { height: 9px; width: 9px; transform: rotate(-225deg); margin: 17px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02>i.wsmenu-rotate { margin-top: 22px; } /* Sub Menu / Half Menu / Mega Menu Links */ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: var(--gray); font-size: 1.0625rem; padding: 15px 14px; } /* Black Scroll */ .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ddd; background-color: rgba(255, 255, 255, 0)!important; } .navbar-light .wsmenu-list > li > a.h-link:hover { color: var(--black)!important; } /* Sub Menu / Half Menu / Mega Menu Links Hover */ .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 15px 14px; text-decoration: none; } /* Black Scroll */ .black-scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .black-scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: rgba(255, 255, 255, .05)!important; } /* Button */ .wsmenu > .wsmenu-list > li a.btn { font-size: 1.125rem; line-height: 44px; border-width: 2px; padding: 5px 22px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .wsmenu > .wsmenu-list > li a.btn.ico-20 [class*="flaticon-"]:before, .wsmenu > .wsmenu-list > li a.btn.ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; line-height: 0.75rem!important; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a { font-size: 1.0625rem; padding: 12px 14px; } .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover { padding: 12px 14px; } .wsmenu > .wsmenu-list > li a.btn.reg-btn { line-height: 44px; padding: 5px 22px; } .wsmenu > .wsmenu-list > li.reg-fst-link > a, .wsmenu > .wsmenu-list > li a.btn.fst-btn-link { margin-left: 0; } /* Header Store Badges */ .wsmenu > .wsmenu-list > li a.store.header-store { margin: 5px 0 0 12px; display: block; float: none; border-bottom: none; } .store.header-store img { max-height: 46px; } /* Header Social Links */ .wsmenu > .wsmenu-list > li.header-socials { display: block; } .header-socials a { margin-left: 20px; margin-right: 5px; } .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.45rem; } /* Navbar Transparent Buttons */ .white-scroll .btn--tra-white, .white-scroll .btn--tra-black { color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; } .theme--dark .white-scroll .btn--white, .theme--dark .white-scroll .btn--tra-white { background-color: var(--white)!important; border-color: var(--white)!important; } .black-scroll .btn--tra-white, .black-scroll .btn--tra-black { color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; } .white-scroll .btn--tra-gray, .black-scroll .btn--tra-gray { color: var(--black)!important; background-color: var(--smoke)!important; border-color: var(--smoke)!important; } /* Navbar Buttons Hover */ .white-scroll .hover--white:hover, .white-scroll .hover--tra-white:hover { color: var(--black)!important; border-color: var(--black)!important; background-color: transparent!important; } .theme--dark .white-scroll .hover--tra-white:hover { color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important; } .theme--dark .navbar-dark .hover--tra-black:hover, .theme--dark .navbar-dark .scroll .hover--tra-black:hover { color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; } .theme--dark .wsmenu > .wsmenu-list { background-color: #1d222f!important; } .theme--dark .wsmenu > .wsmenu-list > li > .wsmenu-click > i:before { border-color: var(--white); } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section { margin-top: 80px; } /* HERO QUICK FORM */ .hero-section .quick-form .form-control { text-align: center; margin-bottom: 15px; } .hero-section .quick-form .input-group-btn { display: block; width: 100%!important; } .hero-section .quick-form .btn { display: block; width: 100%!important; margin-left: 0; } .hero-section .quick-form.form-half .btn { margin-left: 0; } /* HERO DIGITS */ .hero-digits { display: inline-block; margin: 0 auto; padding-right: 0; } #hd-1-1, #hd-1-2 { width: 50%; padding: 0 10px; } /* HERO-1 */ #hero-1 { padding-top: 80px; } .hero-1-txt { text-align: center; margin-top: 0; } .hero-1-img { padding: 0; margin-top: 40px; } /* HERO-2 */ #hero-2 { padding-top: 75px; padding-bottom: 85px; } .hero-2-txt p.p-xl { padding: 0; } /* HERO-3 */ #hero-3 { padding-top: 80px; } /* HERO-4 */ #hero-4 { padding-top: 80px; } .hero-4-img { margin-top: 40px; } /* HERO-5 */ #hero-5 { padding-top: 80px; } .hero-5-txt { text-align: center; } .hero-5-txt p.p-xl { padding: 0; } .hero-5-img { padding: 0; margin-top: 40px; } /* HERO-6 */ #hero-6 { padding-top: 80px; } .hero-6-txt p.p-lg { padding: 0; } .hero-6-img { margin-top: 40px; padding: 0; } /* HERO-7 */ #hero-7 { padding-top: 80px; padding-bottom: 0; } .hero-7-txt { text-align: center; margin-top: 0; margin-bottom: 40px; } /* HERO-8 */ #hero-8 { text-align: center; padding-top: 80px; margin-bottom: 50px; } .hero-8-txt { margin-top: 0; } .hero-8-img { margin: 40px 0 -50px 0; } /* HERO-9 */ #hero-9 { padding-top: 80px; } .hero-9-txt { margin-top: 0; margin-top: 0; text-align: center; } .hero-9-img { padding-left: 0; margin-top: 40px; } /* HERO-10 */ #hero-10 { padding-top: 80px; } .hero-10-txt p.p-lg { padding: 0; } .hero-10-img { margin-top: 40px; } /* HERO-11 */ #hero-11 { padding-top: 80px; text-align: center; } .hero-11-img { padding-left: 0; margin-top: 40px; } .hero-11-txt .quick-form { margin-top: 25px; margin-right: 0; } /* HERO-12 */ #hero-12, #hero-13 { padding-top: 80px; } /* HERO-13 */ #hero-13 { text-align: center; padding-top: 80px; padding-bottom: 0; } .hero-13-txt { margin-top: 0; } .hero-13-txt .quick-form { margin-top: 25px; margin-right: 0; } .hero-13-img { padding-right: 0; margin-top: 40px; } /* HERO-14 */ #hero-14 { padding-top: 80px; padding-bottom: 95px; } .hero-14-txt p.p-xl { padding: 0; } /* HERO-15 */ #hero-15 { text-align: center; padding-top: 80px; margin-bottom: 70px; } .hero-15-txt { margin-top: 0; padding-left: 0; } .hero-15-txt p.p-lg { padding-right: 0; } .hero-15-img { padding-right: 0; margin: 45px 0 -70px; } /* HERO-16 */ #hero-16 { padding-top: 80px; } .hero-16-img img { margin-bottom: -20px; } /* HERO-17 */ #hero-17 { text-align: center; padding-top: 80px; } .hero-17-txt { margin: 0; } .hero-17-img { margin: 50px 0 0; } /* HERO-18 */ #hero-18 { padding-top: 80px; } .hero-18-txt p.p-xl { padding: 0; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-4-title { padding: 0; margin-bottom: 15px; } #a2-1 { margin-bottom: 16px; } .about-1 { margin-bottom: 60px; } .about-1-txt h4 { padding-right: 0; } .about-1-img { margin-top: 40px; margin-bottom: -60px; } .about-3 .img-block.left-column { margin-right: 0; margin-bottom: 40px; } .about-3 .img-block.right-column { margin-left: 0; margin-bottom: 40px; } /* CAREERS */ .more-careers { margin-top: 40px; } .more-careers-txt { text-align: center!important; display: block; float: none; } .more-careers-btn { display: block; margin: 20px 0 0; } .more-careers-btn .btn { font-size: 1rem; padding: 0.7rem 1.75rem; } /* JOB POSITION */ .job-position-title { padding: 60px 0; margin: 80px 0 20px; } .job-position-title .position-data { margin-top: 10px; } .jb-txt h2 { padding-right: 0; } .job-position-title .btn { position: relative; bottom: 0; margin: 15px 0 0; } .position-info h5 { margin: 40px 0 25px; } .position-info .btn { margin-top: 20px!important; } /* FEATURES */ .features-4.pt-30, .features-5.pt-30 { padding-top: 0; margin-top: 40px; } .fb-1, .fb-2, .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-2 .fb-4, .rows-2 .fb-5, .row-cols-md-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-3 .fb-5, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fb-5, .rows-4 .fb-6, .fbox-4.fb-1, .fbox-4.fb-3, .fbox-4.fb-5, .fbox-4.fb-7, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 {margin-bottom: 40px;} .features-2 .rows-4 .fb-7 { margin-bottom: 40px; } .fbox-5.fb-2 { margin-bottom: 0; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3, .fbox-wrapper.left-align .rows-2 .fb-4, .fbox-wrapper.left-align .rows-2 .fb-5 { margin-bottom: 40px; } .rows-2 .fb-7 { margin-top: 40px; margin-bottom: 40px; } .fbox-4-txt { text-align: center; padding-top: 60px; padding-left: 0; margin-bottom: 40px; } .fbox-4.fb-2, .fbox-4.fb-4, .fbox-4.fb-6 { margin-bottom: 0; } .fbox-4.fb-1, .fbox-4.fb-5, .fbox-4.fb-6 { display: block; } .fbox-1 { text-align: center; } .fbox-2 { text-align: center; display: block; } .fbox-ico-wrap { display: block; margin-right: 0; } .fbox-2 .fbox-ico { margin-top: 0; } .shape-ico span { top: 0; padding-top: 14px; line-height: 1.35; } .fbox-4-img img { -webkit-border-radius: 0 0 16px 16px; -moz-border-radius: 0 0 16px 16px; -o-border-radius: 0 0 16px 16px; border-radius: 0 0 16px 16px; } .features-2-download { margin-top: 50px; } .features-2-download p.p-sm { font-size: 1rem; margin-top: 15px; } /* CONTENT */ .ct-08 { margin-bottom: 0; padding-bottom: 70px; } .ct-09 { margin-top: 0; padding-top: 70px; } .ct-06 .section-overlay { margin-bottom: 80px; } .bc-04 { margin: 0; } .bc-01 .container, .bc-03 .container { max-width: 100%; } .bc-01-wrapper, .bc-03-wrapper { margin: 0 -15px; border-radius: 0 0!important; } .bc-04-wrapper { padding-left: 0; } .ct-07 .txt-block, .ct-08 .txt-block, .ct-09 .txt-block { margin-top: 0; } .bc-01 .txt-block.left-column, .bc-04 .txt-block { padding-right: 0; } .bc-01 .txt-block.right-column { padding-left: 0; } .cbox-2 { display: block; text-align: center; } .cbox-2 .ico-wrap { margin-right: 0; margin-bottom: 10px; } .cbox-2 .cbox-2-ico { top: 0; } .cbox-4 p.p-sm { font-size: 1rem; } .cbox-6-wrapper { margin-bottom: 70px; } .cbox-6 { margin: 0; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { width: 32px; height: 32px; font-size: 0.815rem; line-height: 32px; top: -2px; } /* Content Image */ .ct-01 .img-block.right-column, .ct-02 .img-block.right-column, .ct-07 .img-block.right-column, .ct-08 .img-block.right-column, .ct-09 .img-block.right-column { margin-left: 0; } .ct-01 .img-block.left-column, .ct-02 .img-block.left-column, .ct-07 .img-block.left-column, .ct-08 .img-block.left-column, .ct-09 .img-block.left-column { margin-right: 0; } .ct-01 .img-block, .ct-02 .img-block, .ct-07 .img-block, .ct-08 .img-block, .ct-09 .img-block { margin: 0 0 35px; } .ct-03 .img-block img, .ct-04 .img-block img { max-width: 100%; margin: 0 0 35px; } .ct-07 .img-block, .ct-08 .img-block, .bc-01 .img-block { margin-bottom: 35px; } .ct-09 .img-block { margin-top: 0; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -80px; } .img-block-txt, .img-block-btn { margin-top: 45px; } .bc-2-img.right-column, .bc-2-img.left-column { margin: 0 0 35px; } .bc-3-img { margin-bottom: -60px; } .bc-3-img .video-btn { top: calc(50% - 25px); } .bc-4-img { transform: rotate(0deg); margin: 0 0 40px; } /* STATISTIC */ .statistic-block-txt { padding: 0; } .statistic-2-wrapper, .statistic-6-wrapper { text-align: center; } .statistic-4-wrapper { padding: 0 10%; } .statistic-1 .statistic-block { display: block!important; text-align: center; } .statistic-1-wrapper .statistic-block-digit { width: 100%; display: block!important; float: none; margin-bottom: 15px; } .statistic-1-wrapper .statistic-block-txt { width: 100%; display: inline-block!important; padding-left: 0; } .statistic-4-wrapper .statistic-block { text-align: center; padding: 0; } .statistic-2-wrapper .txt-block { margin-bottom: 30px; } #sb-1-1, #sb-1-2 { margin-bottom: 40px; } #sb-4-1, #sb-4-2 { border-right: none; border-bottom: 1px solid rgba(230, 230, 230, .2); padding-bottom: 40px; margin-bottom: 40px; } .statistic-1-wrapper p { line-height: 1.5; top: 0; } /* RATING */ .rating-section .rating-1-wrapper.text-center, .rating-section .rating-2-wrapper.text-center { padding: 0; } #rb-1-1, #rb-1-2, #rb-2-1, #rb-2-2 { margin-bottom: 30px; } /* TESTIMONIALS */ .reviews-3-wrapper { padding: 0; } .review-1 { margin: 0 5px 30px; } .review-2 { text-align: center; padding: 0 10px; } #rw-3-1, #rw-3-2, #rw-3-3 { margin-bottom: 30px; } .review-item { width: 100%; padding: 0; margin-bottom: 30px; } .review-4 { text-align: center; } .review-1-txt h6.h6-md, .review-3-txt h6.h6-lg { font-size: 1.1875rem; margin-bottom: 8px; padding-right: 0; } .review-1-txt h6.h6-lg, .review-2-txt h6.h6-lg, .review-3-txt h6.h6-lg { font-size: 1.25rem; margin-bottom: 8px; padding-right: 0; } .review-rating.ico-15, .review-rating.ico-15.mb-15 { margin-bottom: 5px; } .author-data { margin-top: 10px; } .author-data.mt-25 { margin-top: 13px; } .author-data.mb-15 { margin-bottom: 10px; } .review-author .review-rating { margin-top: -5px; } .review-3 .review-author { margin-top: 0; } /* TEAM */ #team-1 { padding-bottom: 30px; } .team-member { margin-bottom: 40px; } /* PRICING */ .pricing-3-wrapper { padding: 0; } #pt-3-1, #pt-3-2 { margin: 0 0 40px 0; } .pricing-table-header h5 { margin-bottom: 15px; } .price p { margin-top: 15px; margin-bottom: 15px; } .pricing-features.mt-25 { margin-top: 20px; } /* Pricing Notice */ .pricing-notice { margin-top: 0; } .pricing-notice .btn.mt-25 { margin-top: 20px; } /* Pricing Toggle Button */ .pricing-1 .section-title p { margin-top: 12px; } .toggle-btn.mt-40 { margin-top: 20px; } .toggler-txt { font-size: 1.15rem; line-height: 32px; } .switch-wrap { min-width: 52px; height: 32px; margin: 0 6px; } .switcher { font-size: 0.85rem; height: 32px; padding: 0 10px 0 30px; border-radius: 32px; } .switcher .show-annual, .switcher .show-monthly { line-height: 32px; } .switcher:before { left: 4px; bottom: 4px; width: 24px; height: 24px; } .switch-wrap input:checked + .switcher { padding: 0 30px 0 10px; } .comp-table-payment .payment-icons { margin-top: 18px; } /* INTEGRATIONS */ .integrations-3 { margin-bottom: -20px; } .int-1-wrapper { padding: 60px 40px 70px; } .int-2-wrapper { padding: 0; } .filter-btns { text-align: center; margin-bottom: 24px; } .filter-btns button { width: 100%; background-color: #f4f6f8; border: 1px solid #eee; font-size: 1.135rem; padding: 0.9rem 0.1rem; margin: 0 0 10px; border-radius: 6px; } .theme--dark .filter-btns button { color: var(--white); background-color: var(--white-smoke); border-color: var(--border-dark); } .filter-btns button.is-checked { color: var(--white); background-color: var(--theme-color); } .integrations-3 .filter-item { width: 100%; padding: 0; margin-bottom: 20px; } .tool_description p { font-size: 1rem; } .integrations-section .more-btn.mt-30 { margin-top: 20px; } /* MORE APPS */ .apps-1-wrapper { padding: 0; } .ab-1, .ab-2, .ab-3, .rows-2 .ab-5, .rows-2 .ab-6 { margin-bottom: 40px; } /* CHANGELOG */ .version-release { margin-bottom: 40px; } .release-data { padding-bottom: 30px; margin-bottom: 25px; } .release-preview { margin-bottom: 20px; } /* DOWNLOAD */ #di-1, #di-2 { margin-bottom: 30px; } .download-item p { font-size: 1.05rem; margin-top: 5px; } /* FAQs */ .faqs-1 .section-title { margin-bottom: 25px; } .faqs-2 .section-title { margin-bottom: 40px; } .faq-3-title { margin-top: 0; margin-bottom: 25px; } .faq-3-title p { padding-right: 0; } .faqs-2 .question { margin-bottom: 25px; } .faqs-2-questions .left-column { padding-right: 0; } .faqs-2-questions .right-column { padding-left: 0; } .faqs-1-questions h4 { margin-top: 45px; margin-bottom: 20px; } .faqs-2 .question h6, .faqs-2 .question h5 { padding-right: 0; margin-bottom: 10px; } .faqs-section .accordion-thumb { padding: 18px 0 22px; } .faqs-section .accordion-thumb h5 { line-height: 1.5; padding-right: 10%; } .faqs-section .accordion-panel { padding: 0 0 8px 0; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 32px; height: 32px; font-size: 0.815rem; line-height: 32px; top: 17px; } .more-questions, .faqs-1 .more-questions { text-align: center; margin-top: 35px; } .faqs-2 .more-questions { margin-top: 25px; } .more-questions-txt { display: block; text-align: center!important; float: none; } .more-questions h6 { margin-bottom: 8px; } .more-questions-btn { margin: 15px 0 0; } /* BANNER */ .banner-2 .container, .banner-5 .container { max-width: 100%; } .banner-5 { padding-top: 0; text-align: center; } .banner-1-wrapper { text-align: center; padding: 60px 50px 75px; background-position: center left; } .banner-2-wrapper, .banner-5-wrapper { margin: 0 -15px; border-radius: 0 0!important; } .banner-5-wrapper .banner-overlay { overflow: hidden; border-radius: 0 0!important; } .banner-4-txt { text-align: center!important; margin-bottom: 14px; } .banner-5-txt { margin-top: 0; } .banner-section .text-end { text-align: center!important; } .banner-section .section-id { margin-bottom: 18px; } .banner-1-txt h4 br { display: none; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { padding-right: 0; } .banner-4-btn p { margin: 10px 0 0!important; } .banner-section p.btn-txt { margin-top: 15px; } .banner-5-img.right-column, .banner-5-img.left-column { margin: 40px 0 -15%; padding: 0; } .banner-qr-code { display: none; } /* NEWSLETTER */ .newsletter-1 .newsletter-overlay, .newsletter-3 .newsletter-overlay { text-align: center; } .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { margin-top: 0; padding-left: 0; } .newsletter-section .form-control { text-align: center; margin-right: 0; margin-bottom: 15px; } .newsletter-section .input-group-btn { display: block; width: 100%!important; } .newsletter-section .btn { display: block; width: 100%!important; margin: 0; } /* BLOG */ .blog-post-txt { padding-left: 0; padding-right: 0; } .blog-post-txt p.p-sm { font-size: 1rem; } /* BLOG LISTING */ .wide-post .blog-post-img { margin-right: 0; margin-bottom: 35px; } .wide-post .blog-post-txt { margin-left: 0; } .posts-category { margin: 10px 0 40px; } .posts-category.ico-20 [class*="flaticon-"]:before, .posts-category.ico-20 [class*="flaticon-"]:after { font-size: 1.125rem; } /* SINGLE BLOG POST */ .blog-post-preview, .single-post-title { padding: 0; margin-bottom: 35px; } .single-post-txt { padding: 0; } .post-data { margin: 45px 0 0; padding: 45px 0 70px; } .post-share-list.text-end { text-align: left!important; margin-top: 15px; } .share-social-icons a.share-ico span { margin-left: 0; margin-right: 14px; } /* CONTACTS */ .contact-form textarea { min-height: 190px; } /* FOOTER */ .footer { padding-bottom: 40px; } .footer-data-logo { margin-bottom: 25px; } .footer-data-socials.text-end { text-align: left!important; margin-bottom: 45px; } .footer-qr-code { display: none; } .footer.ft-2-rows .footer-links { margin-bottom: 0; } .footer-1 .footer-form { margin-top: 35px; } .footer-1 .footer-contacts { margin-top: -10px; } .footer-3 .footer-connect { margin-bottom: 40px; } .footer-stores-badge.text-end, .bottom-footer .bottom-footer-socials.text-end, .footer-links.text-end, .bottom-footer .bottom-secondary-link.text-end, .bottom-footer .bottom-footer-list.text-end { text-align: left!important; } .footer-links { margin-bottom: 30px; } .fl-1, .fl-2, .fl-3, .fl-4 { border-bottom: 2px solid #ddd; margin-bottom: 20px; padding-bottom: 20px; } .theme--dark .fl-1, .theme--dark .fl-2, .theme--dark .fl-3, .theme--dark .fl-4 { border-bottom: 2px solid var(--silver); } .footer-1 .fl-2, .footer-1 .fl-3, .footer-1 .fl-4 { padding-left: 0; } .footer-1 .fl-3 { margin-bottom: 20px; } .footer-1 .fl-5 { border-bottom: 2px solid #ddd; margin-bottom: 20px; padding-bottom: 20px; } .theme--dark .footer-1 .fl-5 { border-bottom: 2px solid var(--silver); } .footer-2 .fl-3, .footer-3 .fl-3 { margin-bottom: 0; } .footer-2 img.footer-logo { margin-bottom: 15px; } .footer-3 img.footer-logo { margin-bottom: 10px; } .footer-copyright-logo { display: block; float: none; top: 0; margin-bottom: 12px; } .footer-copyright-logo img.footer-logo { max-height: 30px; } .footer h6.m-title { display: block; margin-bottom: 0!important; } .footer h6.d-title { display: none!important; } .foo-links { display: none; padding-top: 20px; } .footer-phone { margin-top: 10px; } .footer hr { display: none; } .bottom-footer-socials { margin-top: 16px; } .bottom-secondary-link, .bottom-footer-list { margin-top: 5px; } .bottom-footer-list.bottom-foo-socials { margin-top: 6px; } .bottom-footer-socials li { padding-left: 0; padding-right: 14px; } .footer-data-socials li { padding-left: 0; padding-right: 12px; } .bottom-foo-socials li { padding-left: 0; padding-right: 9px; } .footer-info-socials a, .bottom-footer-socials a { padding-top: 15px; } .footer-socials li span, .bottom-foo-socials li span, .footer-info-socials li span, .bottom-footer-socials li span { top: 0; padding-top: 14px; line-height: 1.2; } .footer-copyright.copyright-logo p { line-height: auto; margin-left: 0; } /* INNER PAGE WRAPPER */ .inner-page-hero, .page-hero-section-overlay { padding-top: 60px; margin-top: 80px; } .page-hero-section-overlay .txt-block { margin: 0 0 40px; } .inner-page-title { margin-bottom: 50px; } .inner-page-title p { line-height: 1.6666; margin-top: 15px; margin-bottom: 0; } /* TERMS, PRIVACY, COOKIES */ .txt-block.legal-info h5 { margin: 30px 0 15px; } .txt-block.legal-info h6 { margin: 15px 0; } .txt-block.legal-info h6 span, .txt-block.legal-info h5 span { margin-right: 2px; } /* SIGN IN / SIGN UP */ .register-page-logo { position: relative; text-align: center; padding-top: 70px; } .register-page-logo img { max-height: 30px; } .register-page-form { padding: 30px 0 90px; } .reset-page-wrapper { padding: 35px 0 110px; } .register-page-form .form-control, .reset-page-wrapper .form-control { padding: 0 15px; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 480px) and (max-width: 767.98px) { /*------------------------------------------*/ /* BASE /*------------------------------------------*/ .bg--fixed { width: auto; } .bg--scroll { width: auto; background-attachment: scroll!important; } /* Background Shape */ .bg--shape:after { width: 1300px; height: 1300px; top: 12%; left: -10%; } /* Headers */ h6, h6.h6-md, h6.h6-lg, h6.h6-xl { font-size: 1.375rem; } /* 22px; */ h5, h5.h5-md { font-size: 1.5625rem; } /* 25px */ h5.h5-lg, h5.h5-xl { font-size: 1.6875rem; } /* 27px */ h4, h4.h4-md, h4.h4-lg, h4.h4-xl { font-size: 1.8125rem; } /* 29px */ h3, h3.h3-md, h3.h3-lg, h3.h3-xl { font-size: 1.9375rem; } /* 31px */ h2, h2.h2-md, h2.h2-lg { font-size: 2.125rem; } /* 34px */ h2.h2-xl, h2.h2-title { font-size: 2.375rem; } /* 38px */ h6, h5, h4, h3, h2, h1 { line-height: 1.4; } /* Paragraphs */ p.p-sm, p { font-size: 1rem; } p.p-md, p.p-lg, p.p-xl { font-size: 1.0625rem; } /* Button */ .btn.btn-sm, .btn, .btn.btn-md, .btn.ico-20.ico-left, .btn.ico-20.ico-right { font-size: 1.1rem; padding: 0.9125rem 1.45rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.125rem; padding: 0.85rem 1.45rem; } .btns-group .btn.ico-30.ico-left, .btns-group .btn.ico-30.ico-right { padding: 0.3845rem 0.5rem; } /* Button Icon */ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { font-size: 1.225rem; line-height: 0.45rem!important;top: 4px; } .btn.ico-30 [class*="flaticon-"]:before, .btn.ico-30 [class*="flaticon-"]:after { font-size: 2.3rem; } .btn.ico-30.ico-left span.ico-30-txt { font-size: 1.225rem; top: -11px; margin-right: 0; } .btn.ico-30.ico-right span.ico-30-txt { font-size: 1.225rem; top: -11px; margin-left: 0; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { right: 0; } /* Button Text */ p.btn-txt, p.btns-group-txt, .btn-rating { margin: 12px 0 0 0; } .text-center p.btns-group-txt { margin-top: 18px; } .star-rating span.rating-txt { font-size: 1.1rem; } .os-version-ext { margin-top: 12px; } .os-version-ext .star-rating small { font-size: 1rem; } span.os-version { font-size: 1rem; line-height: 1.5; margin-top: 3px; } /* Transparent Link */ a.tra-link { font-size: 1.03125rem; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { font-size: 0.785rem; line-height: 0.7rem!important; top: 1px; left: 2px; } /* OS Button */ .os-btn { width: 300px; min-width: 300px; padding: 14px 15px 12px; } .os-btn-ico { margin-right: 14px; } .os-btn-txt p { font-size: 1.1rem; margin-top: 3px; margin-bottom: 7px; } .os-btn-txt span { font-size: 1rem; } .d-inline-block.btn-os-last { margin-top: 12px; margin-left: 0; } .d-block.btn-os-last { margin-top: 12px; } /* Store Badge */ .store { margin-right: 5px; } .badge-img-xs .store img, .badge-img-sm .store img, .badge-img-md .store img, .badge-img-lg .store img { max-height: 3.175rem; } /* Watch Link */ .watch-video { margin-top: 22px; } p.video-txt-lg { font-size: 1.125rem; } p.video-txt-sm { font-size: 1.0625rem; } /* Vector Icon Background */ .ico-55 .shape-ico svg, .ico-60 .shape-ico svg { width: 130px; height: 130px; top: -42px; left: calc(50% - 70px); } /* Vector Rounded Icons */ .ico-rounded, .ico-rounded-md, .ico-rounded-lg { width: 94px; height: 94px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after, .ico-rounded-md [class*="flaticon-"]:before, .ico-rounded-md [class*="flaticon-"]:after, .ico-rounded-lg [class*="flaticon-"]:before, .ico-rounded-lg [class*="flaticon-"]:after { font-size: 3rem; line-height: 94px!important; } /* Section ID */ .section-id { font-size: 0.9rem; margin-bottom: 22px; } /* Section Title */ .section-title.mb-70 {margin-bottom: 35px; } .section-title.mb-100 { margin-bottom: 55px; } .section-title p { margin-top: 15px; } .section-title .btns-group { margin-top: 20px; } /* Advantages */ .advantages, .text-center .advantages { margin-top: 12px; } /* Compatibility */ .compatibility { margin-top: 5px; } /* Tools List / Payments Icons */ .tools-list p, .payment-methods p { margin-bottom: 15px; } .payment-icons img { max-height: 32px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { font-size: 2.125rem; line-height: 2.5rem!important; margin-right: 5px; } /* Quote */ .quote p { font-size: 1.1rem; margin-bottom: 6px; } .quote-author h6 { font-size: 1.2rem; } .quote-author span { font-size: 1.0625rem; } /* Users */ .txt-block .users { margin-top: 15px; } .users img { max-height: 44px; } .users p { font-size: 0.975rem; top: 12px; left: 5px; text-align: left!important; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ /* Header Logo */ .wsmobileheader .smllogo { display: block; margin-top: 25px; padding-left: 18px; } .smllogo img { width: auto; max-width: inherit; max-height: 30px; } .wsmenu > .wsmenu-list { width: 345px; margin-right: -345px; } .wsactive .wsmobileheader { margin-right: 345px; } .overlapblackbg { width: calc(100% - 345px); } .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 18px 0 0; } /* Nav Link Info */ span.sm-info { width: 22px; height: 22px; font-size: 0.8rem; line-height: 20px; top: -1px; margin-left: 8px; } .wsmenu > .wsmenu-list > li > a { padding: 5px 32px 4px 20px; margin: 0; } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 8px; width: 8px; margin: 24px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { top: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { padding: 6px 10px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 14px 10px; } /* Header Store Badges */ .store.header-store img { max-height: 46px; } /* Header Social Links */ .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-25 [class*="flaticon-"]:after { line-height: 52px!important; } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .hero-app-logo img { max-height: 98px; margin-bottom: 25px; } /* HERO QUICK FORM */ .hero-section .quick-form .form-control, .hero-section .quick-form .btn { font-size: 1.175rem; height: 60px; } .hero-section .quick-form.form-half .form-control { margin-bottom: 22px; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -5px 0; } /* Hero Advantages */ .hero-section .text-center .advantages { margin-top: 16px; } .hero-section .os-version-ext { margin-top: 18px; } .hero-section .users p { margin-left: 8px; } /* HERO DIGITS */ .hero-digits h2.statistic-number { font-size: 3.125rem; } .hero-digits h2.statistic-number small { font-size: 2.35rem; margin-left: 3px; } /* HERO-1 */ #hero-1 { margin-bottom: 70px; } .hero-1-txt h2 { font-size: 2.65rem; } .hero-1-txt p.p-lg { padding: 0 4%; margin-top: 18px; margin-bottom: 25px; } .hero-1-img { padding: 0 5%; margin-top: 45px; margin-bottom: -70px; } /* HERO-2 */ .hero-2-txt h2 { font-size: 2.75rem; } .hero-2-txt p.p-xl { margin-top: 18px; margin-bottom: 26px; } .hero-2-txt p.btn-txt { margin-top: 16px; } /* HERO-3 */ .hero-3-txt h2 { font-size: 2.65rem; } .hero-3-txt p.p-xl { font-size: 1.135rem; margin-top: 12px; margin-bottom: 25px; } .hero-3-txt .btn-txt { margin-top: 18px; } .hero-3-img { margin: 40px -3% 0; } /* HERO-4 */ .hero-4-txt h2 { font-size: 2.65rem; padding: 0 3%; } .hero-4-txt p.p-xl { margin-top: 16px; margin-bottom: 25px; } .hero-4-img { margin: 45px -25px 0; } /* HERO-5 */ #hero-5 { margin-bottom: 70px; } .hero-5-txt h2 { font-size: 2.5rem; } .hero-5-txt p.p-xl { font-size: 1.125rem; margin-top: 20px; margin-bottom: 25px; } .hero-5-img { padding: 0 2%; margin-top: 50px; margin-bottom: -70px; } /* HERO-6 */ #hero-6:after { height: 8%; } .hero-6-txt h2 { font-size: 2.55rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 15px; margin-bottom: 25px; } /* HERO-7 */ .hero-7-txt h2 { font-size: 2.65rem; margin-bottom: 25px; } .hero-7-img { margin: 0 3% -40%; } /* HERO-8 */ .hero-8-txt h2 { font-size: 2.65rem; } .hero-8-txt p.p-lg { margin-top: 15px; margin-bottom: 25px; } .hero-8-txt .quick-form { margin: 30px 4% 0; } /* HERO-9 */ #hero-9 { padding-top: 70px; } .hero-9-txt h2 { font-size: 2.65rem; } .hero-9-txt p.p-lg { padding: 0 5%; margin-top: 15px; margin-bottom: 25px; } .hero-9-img { padding: 0 3%; } /* HERO-10 */ .hero-10-txt h2 { font-size: 2.65rem; } .hero-10-txt p.p-lg { margin-top: 16px; margin-bottom: 25px; } .hero-10-txt p.btn-txt { margin-top: 25px; } #hero-10 .quick-form { margin: 25px 2% 0; } /* HERO-11 */ .hero-11-txt h2 { font-size: 2.4rem; } .hero-11-txt p.p-lg { margin-top: 15px; margin-bottom: 22px; } .hero-11-txt .quick-form { margin: 30px 4% 0; } /* HERO-12 */ .hero-12-txt h2 { font-size: 2.65rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { padding: 0; margin-top: 15px; margin-bottom: 25px; } .hero-12-img { margin-top: 40px; } /* HERO-13 */ #hero-13 { margin-bottom: 70px; } .hero-13-txt h2 { font-size: 2.65rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 12px; margin-bottom: 25px; } .hero-13-txt .quick-form { margin: 30px 4% 0; } .hero-13-img { margin: 45px 0 -70px; } /* HERO-14 */ .hero-14-txt { padding: 0 5%; } .hero-14-txt h2 { font-size: 3rem; } .hero-14-txt p.p-xl { margin-top: 18px; margin-bottom: 25px; } /* HERO-15 */ .hero-15-txt { padding: 0 5%; } .hero-15-txt h2 { font-size: 3rem; padding: 0 2%; } .hero-15-txt p.p-lg { margin-top: 16px; margin-bottom: 16px; } /* HERO-16 */ .hero-16-txt h2 { font-size: 2.75rem; padding: 0 5%; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 12px; margin-bottom: 22px; padding: 0; } .hero-16-img { padding: 35px 22px 0; margin-top: 35px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } /* HERO-17 */ .hero-17-txt { padding: 0 6%; } .hero-17-txt h2 { font-size: 3.2rem; line-height: 1.3; padding: 0 6%; } .hero-17-txt p.p-md { margin-top: 14px; margin-bottom: 25px; } /* HERO-18 */ .hero-18-txt h2 { font-size: 2.35rem; } .hero-18-txt p.p-xl { padding: 0 3%; margin-top: 18px; margin-bottom: 20px; } .hero-18-img { margin-top: 15px; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-2-title { margin-bottom: 14px; } .about-1-txt h2 { font-size: 2.75rem; margin-bottom: 12px; } .about-1-txt h4 { font-size: 1.4rem; } .about-section .accordion-1 { margin-top: -18px; } /* CAREERS */ .jobs-category { padding: 0 25px 10px; margin-bottom: 30px; } .jobs-category h4 { font-size: 1.725rem; padding-top: 25px; margin-bottom: 10px; } .career-item { padding: 15px 0; } .position-description h5 { font-size: 1.45rem; } .position-link { top: 20px; right: 0; } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } /* JOB POSITION */ .job-position-title { margin-bottom: 30px; } .job-position-title .position-data p.p-xl { font-size: 1.25rem; } .job-position-title .btn { font-size: 1rem; padding: 0.75rem 1.85rem; } .position-info h5 { margin-top: 30px; margin-bottom: 15px; } .position-info .btn { margin-top: 20px!important; } /* FEATURES */ .fbox-5-wrapper .section-title { margin-bottom: 35px; } .features-2 .section-title p.p-xl { font-size: 1.175rem; } .fbox-5-wrapper .section-title p { padding: 0 5%; } .fbox-5-wrapper { padding: 50px 30px 55px; } .fbox-3 { padding: 45px 50px 40px; } .fbox-4-txt { padding: 50px 5% 0; } .fbox-4.fb-1 { display: flex; flex-wrap: wrap; } .fbox-4, .fbox-4.fb-5, .fbox-4.fb-6 { padding: 40px; } .fbox-4.fb-7, .fbox-4.fb-8 { padding: 50px 40px 0; } .fbox-4.fb-1 .fbox-4-img, .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 14% 25px; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 0 0 30px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 32px 0 0; } .fbox-5 { padding: 45px; } .fbox-5-img img { max-height: 200px; margin-bottom: 20px; } .fbox-6 .fbox-img { margin-bottom: 25px; } .fbox-img.h-175 img, .fbox-img.h-180 img { max-height: 200px; } .fbox-7 .fbox-img.h-175, .fbox-7 .fbox-img.h-180 { padding-top: 35px; margin: 0 12% 45px; } .fbox-ico { margin-bottom: 20px; } .fbox-2 .fbox-ico-wrap.ico-55 { margin-bottom: 16px; } .fbox-ico[class*="img-"] { margin-bottom: 20px; } .fbox-wrapper .ico-50 [class*="flaticon-"]:before, .fbox-wrapper .ico-50 [class*="flaticon-"]:after, .fbox-wrapper .ico-55 [class*="flaticon-"]:before, .fbox-wrapper .ico-55 [class*="flaticon-"]:after, .fbox-wrapper .ico-60 [class*="flaticon-"]:before, .fbox-wrapper .ico-60 [class*="flaticon-"]:after { font-size: 4rem; } .fbox-ico-wrap .ico-40 [class*="flaticon-"]:before, .fbox-ico-wrap .ico-40 [class*="flaticon-"]:after { font-size: 2.85rem; } .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6, .fbox-2 h5, .fbox-4 h5 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 12px; margin-bottom: 10px!important; } .fbox-4-txt h2 { margin: 0 4%; margin-bottom: 12px; } .fbox-4-txt h3.h3-xl { margin-bottom: 12px; } .fbox-4-txt h3.h3-lg { margin: 0 2%; font-size: 1.9375rem; margin-bottom: 12px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5, .fbox-5 h5 { margin-bottom: 14px; } .fbox-4-txt p { margin: 0 2%; } /* CONTENT */ .ct-07, .ct-08, .ct-09 { padding: 70px 0; } .bc-04-wrapper { padding: 25px 25px 50px; } .ct-06 .section-overlay { margin-bottom: 50px; } .bc-01 .section-overlay { padding: 70px 35px; } .bc-02 .section-overlay, .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 50px 35px; } .bc-02.pt-30.bc-02-top { padding-top: 20px; margin-top: 50px; } .bc-03 .section-overlay { padding: 70px 30px 0; } .ct-05 .section-title, .ct-06 .section-title { margin-bottom: 45px; } .bc-03 .section-title { margin-bottom: 35px; } .bc-03-wrapper .section-title h2 { font-size: 2.375rem; padding: 0 3%; } .bc-03 .section-title p { padding: 0 3%; } .txt-box, .bc-01 .txt-box { margin-bottom: 20px; } .txt-block-stat.mt-35 { margin-top: 25px; } .bc-04 .txt-block { padding: 0 18px; } .txt-block h3, .txt-block h2, .txt-block h5, .bc-02 .txt-block h5 { margin-bottom: 15px; } h5.h5-title { margin: 15px 0; } .txt-block .btn, .txt-block .stores-badge { margin-top: 24px; } .txt-block-tra-link { margin-top: 18px; } .cbox-1-ico { width: 2rem; height: 2rem; line-height: 1.65rem; margin-top: 4px; } .cbox-2 .cbox-2-ico { margin-bottom: 14px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3.25rem; } .cbox-title { margin-bottom: 20px; } .cbox-title span { margin-right: 22px; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 2.5rem; } .cbox-title.ico-30 h5 { line-height: 2.5rem!important; } .cbox-1-txt { margin-bottom: 25px; } .cbox-2-txt { margin-bottom: 30px; } .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 13px!important; } .cbox-2-txt p { padding: 0 2%; } .cbox-4-wrapper { margin-top: 0; } .box-title { margin-bottom: 12px; } .cbox-4.cb-2 { margin-top: 18px; } .box-title span { top: 10px; left: 3px; right: 0; } .box-title h6 { position: relative; top: 2px; left: 8px; } .cbox-5 { width: 400px; min-width: 400px; padding: 14px 20px; } .cbox-5.cb-1 { margin: 10px 0 25px; } .cbox-5-ico span { position: relative; top: 3px; } .cbox-5-txt { padding-left: 14px; } .cbox-5-txt h6 { font-size: 1.25rem; margin-bottom: 0; } .cbox-6 { padding: 30px; } .cbox-6 hr { margin-top: 30px; margin-bottom: 20px; } .cbox-6 h2.statistic-number { font-size: 3rem; } .cbox-6 .statistic-number sup { font-size: 2.5rem; top: -5px; right: 0; margin-right: 5px; } .cbox-6-txt.mt-30 { margin-top: 25px; } .cbox-6-data { padding: 14px 20px; } .cbox-6-data.mt-25 { margin-top: 20px; } .cb-shape-1 { right: -55px; top: -25px; } .cb-shape-2 { left: -20px; bottom: -20px; } .cb-shape-1 img, .cb-shape-2 img { width: 75%; height: 75%; } .cbox-7-ico { margin-top: 1px; } .cbox-7-ico { width: 26px; height: 26px; margin-top: 1px; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .cbox-7-ico span { line-height: 24px; } .cbox-7-txt p { margin-bottom: 15px; } .txt-block .accordion-1 .accordion-item { padding: 22px 0 27px; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.8rem; line-height: 30px; top: -0.5px; right: 5px; } .txt-block .accordion-1 .accordion-thumb h5 { font-size: 1.65rem; padding-left: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 18px; } .txt-block .accordion-1 .accordion-panel { padding: 0; } .tabs-1 li { padding: 22px 24px; } .tab-link p { margin-top: 6px; } /* Content Images */ .img-block-hidden, .ct-06 .img-block { margin-bottom: -50px; } .img-block-txt, .img-block-btn { margin-top: 40px; } .bc-3-img { margin-bottom: -100px; } .bc-3-img .video-btn { top: calc(50% - 30px); } /* STATISTIC */ .statistic-2.py-80 { padding: 70px 0; } .statistic-2-wrapper .txt-block { padding: 0 10%; } .statistic-ico { margin-bottom: 12px; } h3.statistic-number { font-size: 2.7rem; letter-spacing: -1px; } h2.statistic-number { font-size: 2.75rem; letter-spacing: -1px; } .statistic-2-wrapper h2, #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { margin-bottom: 12px; } .statistic-4-wrapper h5 { margin: 20px 0 12px; } /* RATING */ #rb-2-2 { margin-bottom: 25px; } .rating-title h5 { font-size: 1.1875rem; } .rbox-2-img img { max-height: 70px; } #rb-2-2 .rbox-2-img img { max-height: 135px; } .rbox-1 .star-rating { font-size: 1rem; line-height: 1; } .rbox-2 p { margin-top: 15px; } .rbox-1 .star-rating span { top: -1.5px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /* TESTIMONIALS */ .reviews-3-wrapper:after { width: 140%; height: 92%; top: 4%; left: -20%; } .review-1 { padding: 22px 24px 27px; } .review-1.no-title { padding: 37px 24px 27px; } .review-2 { padding: 0; } .review-3 { padding: 37px 30px 25px; } .review-4 { padding: 30px 25px; } .review-ico.ico-45 { top: 10px; right: 16px; } .review-ico.ico-60 { top: 10px; left: 20px; } .review-2 .review-avatar { margin: 18px auto 11px; float: none; } .review-avatar img, .owl-item .review-avatar img, .review-3 .review-avatar img { width: 46px; height: 46px; } .reviews-2 .owl-carousel .owl-item img { display: inline-block; } .review-2 .review-avatar img { width: 52px; height: 52px; } .author-data .review-author { padding: 0 0 0 12px; } .review-4-txt .author-data { display: inline-block; margin-top: 3px; } .review-4-txt .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } .review-2 .author-data .review-author { text-align: center; padding: 0; } .review-author.mt-15 { margin-top: -2px; } .review-author h6 { font-size: 1.1rem; margin-top: 3px; margin-bottom: 7px; } .review-author h6 span, .review-author p { font-size: 1rem; } .reviews-btn { margin-top: 45px; } /* TEAM */ .team-1 { padding-bottom: 30px; } .team-member-photo { margin-bottom: 25px; } .team-member-data h6 { margin-bottom: 8px; } .team-member-data p { font-size: 1.075rem; } /* PRICING */ .pricing-1-table, .pricing-2-table, .pricing-3-table { padding: 40px 35px; } .pricing-table-header h5 { font-size: 1.6875rem!important; } .pricing-1-table .pricing-table-header h5 { margin-bottom: 20px; } .p-table p.btn-txt { margin: 12px 0 0 0; } .pricing-discount { top: 0; } .pricing-discount h6 { font-size: 1.1rem; } /* Price */ .price span { font-size: 2.875rem; letter-spacing: -1.5px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.75rem; } .price sup { font-size: 2.15rem; top: -4px; } .pricing-2-table .price sup, .pricing-3-table .price sup { font-size: 2.15rem; top: -4px; right: 2px; } .price sup.validity { font-size: 1.4375rem; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.75rem; } /* Pricing Features */ .pricing-features.mt-25 { margin-top: 18px; } .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { text-align: center; margin-top: 14px; } .pricing-features li, .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 10px 8px; } /* Pricing Notice */ .pricing-notice.mb-40 { margin-bottom: 30px; } .col-lg-9 .pricing-notice p, .col-lg-10 .pricing-notice p { padding: 0; } /* Pricing Compare */ .table-responsive.mb-50 { margin-bottom: 35px; } .table>:not(caption)>*>* { padding-top: 10px; padding-bottom: 10px; } .comp-table .table-responsive thead th { font-size: 0.975rem; } .comp-table .table-responsive tbody th { font-size: 0.925rem; } .comp-table .table-responsive tbody td { font-size: 0.925rem; top: 0; } .comp-table .table-responsive tbody td span { top: 1px; } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.725rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.875rem; } #pbox-1, #pbox-2 { margin-bottom: 30px; } .pricing-section .txt-box-last, .pricing-section .pm-last { margin-bottom: 40px; } .comp-table-payment h6 { margin-bottom: 13px; } /* INTEGRATIONS */ .integrations-2.pt-100.pb-70 { padding-bottom: 50px; } .integrations-1 .container { max-width: 100%; } .int-1-wrapper { padding: 70px 6%; margin: 0 -15px; border-radius: 0 0!important; } .int-2-wrapper .col { padding: 0 8px; } .integrations-3 .filter-content { margin: 0 -10px; } .filter-btns { margin-bottom: 30px; } .filter-btns button { margin-bottom: 13px; } .integrations-3 .filter-item { width: 50%; padding: 0 10px; } .int_tool-1 { margin-bottom: 30px; } .int_tool-2 { padding: 30px; margin-bottom: 20px; } .int_tool-3 { padding: 22px 18px; } .int_tool-1 .tool_logo { padding: 40px 30px; margin-bottom: 20px; } .int_tool-1 img, .int_tool-2 img { width: 55px; height: 55px; } .int_tool-3 img { width: 44px; height: 44px; } .tool_txt { overflow: visible; flex: none; max-width: auto; } .tool_txt h6 { font-size: 1.15rem; line-height: 1.3; margin-top: 1px; } .tool_logo h6 { font-size: 1.3rem; line-height: 44px; top: 3px; margin-left: 10px; } .int_tool-1 h6 { font-size: 1.2rem; } .int_tool-2 h6 { font-size: 1.15rem; margin-top: 20px; } .tool_txt p { font-size: 0.95rem; margin-top: 3px; } .tool_description p { font-size: 1rem; margin-top: 13px; } .integrations-section .more-btn.mt-30 { margin-top: 24px; } .integrations-1 .more-btn { margin-top: 18px; } /* MORE APPS */ .ab-1, .ab-2, .ab-3, .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4, .rows-2 .ab-5, .rows-2 .ab-6 { margin-bottom: 40px; } .statistic-2-wrapper .txt-block { margin-bottom: 35px; } .app-box h6, .app-box h5 { margin-top: 24px; margin-bottom: 10px; } .app-logo-img { padding: 0 5%; } /* BRANDS */ #brand-2-1, #brand-2-2, #brand-2-3 { margin-bottom: 35px; } .brands-title h6 { font-size: 1rem; margin-bottom: 35px; } .brands-title h5 { font-size: 1.4rem; margin-bottom: 35px; } .brands-title p { padding: 0; margin-bottom: 30px; } .brands-carousel-5 .brand-logo, .brands-carousel-6 .brand-logo { padding: 0 15px; } .brands-2-wrapper .row-cols-md-6 .brand-logo { padding: 0 8px; } .brands-section .more-btn { margin-top: 35px; } /* CHANGELOG */ span.version-data { font-size: 1.375rem; line-height: 1.35; margin-bottom: 10px; } span.release-date { font-size: 1.05rem; } .release-highlights h6 { font-size: 1.2rem; margin-bottom: 15px; } /* FAQs */ .faq-3-title p { font-size: 1.1rem; margin-top: 15px; margin-bottom: 20px; } .faqs-2 .question h6, .faqs-2 .question h5 { font-size: 1.25rem; margin-bottom: 12px; } .faqs-section .accordion-thumb h5 { font-size: 1.25rem; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.785rem; line-height: 30px; top: 19px; right: 0; } .more-questions h6.h6-lg { font-size: 1.25rem; } /* BANNER */ .banner-2-wrapper .banner-overlay { padding: 55px 50px 65px; } .banner-3 .banner-overlay.pt-80.pb-90 { padding: 55px 0 65px; } .banner-4-wrapper { padding: 50px 10%; } .banner-5-wrapper .banner-overlay { padding: 60px 50px 0; } .banner-4-txt { margin-bottom: 10px; } .banner-1-txt h2 { padding: 0 4%; } .banner-5-txt h2 { padding: 0 8%; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { margin: 12px 0 20px; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0; margin: 12px 0 22px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { margin-top: 14px; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 14px; margin-bottom: 24px; } .banner-3-txt .btn.mt-25, .banner-3-txt .btn.mt-35 { margin-top: 22px; } .banner-2-txt p.btn-txt, .banner-5-txt p.btn-txt { font-size: 0.95rem; } .banner-5-img.right-column, .banner-5-img.left-column { margin: 40px 0 -25%; } /* NEWSLETTER */ .newsletter-1 .newsletter-overlay { padding: 50px 0 40px; } .newsletter-2 .newsletter-overlay { padding: 60px 0 50px; } .newsletter-3 .newsletter-overlay { padding: 45px 3% 35px; } .newsletter-4 .newsletter-overlay { padding-top: 60px; padding-bottom: 60px; } .newsletter-txt h4, .newsletter-txt h3 { font-size: 2rem; padding: 0 5%; margin-bottom: 25px; } .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { padding: 0 6%; } .newsletter-2 .newsletter-form { padding: 0 10%; margin-top: 30px; } .newsletter-4 .newsletter-form { padding: 0 7%; margin-top: 30px; } .newsletter-section .form-control, .newsletter-section .btn { height: 54px; font-size: 1.0625rem; } .newsletter-2.newsletter-section .btn, .newsletter-4.newsletter-section .btn { font-size: 1.0625rem; } /* BLOG */ .blog-1.pb-60 { padding-bottom: 30px; } .blog-1 .blog-post { margin-bottom: 40px; } .blog-post-txt { padding: 0 15px; margin-top: 35px; } .blog-post-meta, .wide-post .blog-post-meta { margin-top: 20px; } .post-tag { font-size: 0.85rem; margin-bottom: 18px; } .blog-post-txt h4, .blog-post-txt h6, .blog-post-txt h5 { margin-bottom: 14px; } /* BLOG LISTING */ #blog-page.pb-40 { padding-bottom: 30px; } #blog-page .blog-post { margin-bottom: 40px; } #blog-page .blog-post.wide-post { margin-bottom: 40px; } .wide-post .blog-post-img { margin-bottom: 35px; } /* SINGLE BLOG POST */ .blog-post-preview, .single-post-title { margin-bottom: 30px; } .single-post-title .blog-post-meta { margin-bottom: 10px; } .single-post-title h2 { margin-bottom: 14px; } .single-post-txt h6 { font-size: 1.1875rem; margin-bottom: 10px; } .single-post-txt h5.h5-xl { font-size: 1.5rem; margin-top: 26px; margin-bottom: 14px; } .single-post-txt h5 { margin-top: 15px; margin-bottom: 14px; } .post-inner-img { margin-top: 30px; margin-bottom: 30px; } .post-data { margin: 40px 0 0; padding: 40px 0 70px; } .post-author-avatar { margin-right: 16px; } .post-author-avatar img { width: 60px; height: 60px; } .post-author-txt { top: 4px; } .post-author-txt p { margin-top: 5px; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.525rem; } .share-social-icons a.share-ico span { margin-right: 10px; } /* CONTACTS */ .contacts-1 .contact-form .contact-form-notice p { font-size: 0.925rem; margin-top: 30px; } .contact-form .form-control, .contact-form .form-select { height: 54px; font-size: 1.0625rem; margin-bottom: 30px; } .contact-form .form-btn .btn { font-size: 1.05rem; padding: 0.9rem 1.8rem; } /* FOOTER */ .footer-1 .footer-form { margin-top: 40px; } .footer-3 .footer-connect { margin-top: 5px; margin-bottom: 30px; } img.footer-logo { max-height: 30px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 33px; margin-bottom: 0; } .footer-2 img.footer-logo { margin-bottom: 5px; } .footer-copyright-logo img.footer-logo { max-height: 28px; } .footer h6 { font-size: 1.25rem; margin-bottom: 20px; } /* 20px */ .footer .footer-links h6.h6-lg { font-size: 1.25rem; margin-bottom: 18px; } .footer h6.m-title:after { font-size: 1.125rem; top: 3px; } .footer-mail-link { margin: 0 0 0 6px; } .footer-mail-link a { font-size: 1.09375rem; } /* 17.5px */ .footer-mail-link span { top: 4px; right: 4px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.275rem; } .footer-info-socials li { padding-right: 13px; } .footer-info-socials.ico-20 [class*="flaticon-"]:before, .footer-info-socials.ico-20 [class*="flaticon-"]:after, .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3975rem; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.435rem; } .footer-1 .footer-form { margin-bottom: 0; } .footer-form .form-control { font-size: 1.125rem; height: 40px; } .footer-form .btn { height: 40px; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { font-size: 1.0625rem; line-height: 26px!important; } .footer-1 .bottom-footer { margin-top: 22px; } .footer-copyright p { font-size: 1rem; } .footer-list-divider { top: -1px; } .bottom-secondary-link p span { top: 1.5px; padding: 0 2px; } .footer-info-copyright p span { top: 2px; padding: 0 2px; } .footer-info-copyright.ico-15 [class*="flaticon-"]:before, .footer-info-copyright.ico-15 [class*="flaticon-"]:after { font-size: 0.815rem; } .bottom-foo-socials li { margin-right: 7px; } .bottom-foo-socials li span { top: 2.5px; right: 3px; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.55rem; } .bottom-foo-socials.ico-10 [class*="flaticon-"]:before, .bottom-foo-socials.ico-10 [class*="flaticon-"]:after { font-size: 1.125rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.375rem; } .footer-stores-badge { margin-bottom: 25px; } .footer-stores-badge .store { margin-right: 10px; } .footer .badge-img-xs .store img { max-height: 2.75rem; } /* INNER PAGE WRAPPER */ .inner-page-title { margin-bottom: 40px; } .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { margin-top: 10px; } /* SIGN IN / SIGN UP */ .register-page-form { margin: 0 6%; } .reset-page-wrapper { margin: 0 10%; padding-top: 140px; } .register-form-title { margin-bottom: 25px; } .register-form-title h4, .reset-form-title h5 { font-size: 1.825rem; } .register-form-title p { font-size: 1.15rem; margin-top: 5px; } .reset-form-title { margin-bottom: 20px; } .reset-form-title p.p-sm { font-size: 1.0625rem; margin-top: 12px; } .reset-password-link p { font-size: 1rem; margin-bottom: 30px; } .form-data span { font-size: 0.975rem; } .reset-password-form .form-data p { font-size: 1.125rem; margin: 25px 0 12px; } .register-page-form p.create-account { font-size: 1.125rem; margin-top: 30px; } .separator-line { font-size: 1.0625rem; margin: 25px 0; } .reset-page-wrapper .form-control, .register-page-form .form-control { height: 52px; font-size: 1.0625rem; margin-bottom: 24px; } #login .register-page-form .btn.submit { height: 52px; font-size: 1.0625rem; margin-top: 0; } #signup .register-page-form .btn.submit { height: 52px; font-size: 1.0625rem; margin-top: 25px; } .reset-page-wrapper .btn.submit { height: 52px; font-size: 1.0625rem; } .register-page-form .btn-google { font-size: 1.1rem; padding: 0.9rem 1.6rem; } .btn-google img { width: 22px; height: 22px; right: 4px; } /* COOKIES */ #cookies { width: 92%; left: 4%; bottom: 16px; padding: 20px 20px 45px; } #cookies p { font-size: 0.925rem; padding-right: 4%; } #cookies-ok { right: 20px; bottom: 15px; font-size: 0.9rem; padding: 5px 20px; } #cookies-info { margin-left: 7px; } #cookies-close { right: 12px; top: 4px; } #cookies-close svg { width: 11px; height: 11px; } /* MODAL */ .modal-dialog.modal-xl { width: 360px; } .modal-body-content { padding: 35px 15px 14px; } .modal-body-content h4 { font-size: 1.9375rem; margin-bottom: 12px; } .modal-body .newsletter-form { margin-top: 18px; } .modal .newsletter-form .form-control { height: 54px; font-size: 1.0625rem; margin-bottom: 16px; } .modal .newsletter-form .btn { height: 54px; font-size: 1.0625rem; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 414px) and (max-width: 479.98px) { /*------------------------------------------*/ /* BASE /*------------------------------------------*/ #stlChanger { display: none; } .division { padding-left: 10px; padding-right: 10px; } .bg--fixed { width: auto; } .bg--scroll { width: auto; background-attachment: scroll!important; } /* Headers */ h6, h6.h6-md, h6.h6-lg, h6.h6-xl { font-size: 1.25rem; } /* 20px; */ h5, h5.h5-md, h5.h5-lg { font-size: 1.375rem; } /* 22px; */ h5.h5-xl, h4, h4.h4-md, h4.h4-lg, h4.h4-xl { font-size: 1.5rem; } /* 24px; */ h3, h3.h3-md, h3.h3-lg, h3.h3-xl, h2, h2.h2-md, h2.h2-lg { font-size: 1.625rem; } /* 26px; */ h2.h2-xl, h2.h2-title { font-size: 1.875rem; } /* 30px; */ h6, h5, h4, h3, h2, h1 { line-height: 1.4; } /* Paragraphs */ p.p-sm, p { font-size: 1rem; } p.p-md, p.p-lg, p.p-xl { font-size: 1.0625rem; } ol.digit-list p { margin-bottom: 5px; } /* Button */ .btn.btn-sm, .btn, .btn.btn-md, .btn.ico-20.ico-left, .btn.ico-20.ico-right { font-size: 1.1rem; padding: 0.9125rem 1.45rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.125rem; padding: 0.85rem 1.45rem; } .btns-group .btn.ico-30.ico-left, .btns-group .btn.ico-30.ico-right { padding: 0.68165rem 0.5rem 0; } /* Buttons Group */ .btns-group .btn:first-child { margin: 0 0 15px; } .btns-group .btn--transparent { margin-top: -10px; } /* Button Icon */ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { font-size: 1.225rem; line-height: 0.45rem!important;top: 4px; } .btn.ico-30 [class*="flaticon-"]:before, .btn.ico-30 [class*="flaticon-"]:after { font-size: 2.3rem; } .btn.ico-30.ico-left span.ico-30-txt { font-size: 1.225rem; top: -11px; margin-right: 0; } .btn.ico-30.ico-right span.ico-30-txt { font-size: 1.225rem; top: -11px; margin-left: 0; } .btn.ico-left span { margin-right: 8px; } .btn.ico-right span { margin-left: 8px; } .btn.ico-30.ico-left span { right: 0; } /* Button Text */ p.btn-txt, p.btns-group-txt, .btn-rating { margin: 12px 0 0 0; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding: 0; } .text-center .btns-group { display: block; } .btn-rating p.p-sm { font-size: 1rem; } .star-rating small, .star-rating span.rating-txt { font-size: 1.1rem; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1.115rem; top: 2px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1.115rem; top: 2px; } .os-version-ext { margin-top: 12px; } .os-version-ext .star-rating small { font-size: 1rem; } span.os-version { font-size: 1rem; line-height: 1.5; margin-top: 3px; } /* Transparent Link */ a.tra-link { font-size: 1.03125rem; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { font-size: 0.785rem; line-height: 0.7rem!important; top: 1px; left: 2px; } /* OS Button */ .os-btn { width: 100%; min-width: 280px; padding: 14px 20 10px; } .btn-os.d-inline-block { display: block!important; } .os-btn-ico { margin-right: 20px; } .os-btn-txt p { font-size: 1.15rem; margin-top: 1px; margin-bottom: 7px; } .os-btn-txt span { font-size: 1rem; } .d-inline-block.btn-os-last { margin-top: 12px; margin-left: 0; } .d-block.btn-os-last { margin-top: 12px; } /* Store Badge */ .store { margin-right: 5px; } .badge-img-xs .store img, .badge-img-sm .store img, .badge-img-md .store img, .badge-img-lg .store img, .badge-img-xl .store img { max-height: 3.175rem; } /* Watch Video Link */ .watch-video { margin-top: 20px; } .watch-video-link { margin-right: 10px; } p.video-txt-lg { font-size: 1.125rem; } p.video-txt-sm { font-size: 1.0625rem; } /* Video Popup Icon */ .video-btn-xl { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-lg { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after, .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } /* Vector Icon Background */ .ico-55 .shape-ico svg, .ico-60 .shape-ico svg { width: 125px; height: 125px; top: -45px; left: calc(50% - 65px); } /* Vector Rounded Icons */ .ico-rounded, .ico-rounded-md, .ico-rounded-lg { width: 94px; height: 94px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after, .ico-rounded-md [class*="flaticon-"]:before, .ico-rounded-md [class*="flaticon-"]:after, .ico-rounded-lg [class*="flaticon-"]:before, .ico-rounded-lg [class*="flaticon-"]:after { font-size: 3rem; line-height: 94px!important; } /* PNG Icons */ .img-80 img { width: 75px; height: 75px; } .img-75 img { width: 70px; height: 70px; } .img-70 img, .img-65 img, .img-60 img { width: 65px; height: 65px; } /* Section ID */ .section-id { font-size: 0.85rem; margin-bottom: 22px; } /* Section Title */ .section-title.mb-70 { margin-bottom: 35px; } .section-title.mb-100 { margin-bottom: 50px; } .section-title h2 { padding: 0 3px; } .section-title p { margin-top: 15px; } .ws-wrapper .section-title p, .features-10 .section-title p { padding: 0 2%; } .section-title .btns-group { padding: 0 2%; margin-top: 10px; } .section-title .btns-group .btn { width: 100%; margin: 15px 0 0; } /* Advantages */ .advantages, .text-center .advantages { margin-top: 12px; } /* Compatibility */ .compatibility { margin-top: 5px; } /* Tools List / Payments Icons */ .tools-list p, .payment-methods p { margin-bottom: 12px; } .tools-list span { padding-right: 1px; } .payment-icons img { max-height: 30px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { font-size: 2.125rem; line-height: 2.125rem!important; margin-right: 4px; } /* Quote */ .quote-avatar img { width: 50px; height: 50px; } .quote p { margin-bottom: 5px; } .quote-author h6 { font-size: 1.1rem; } .quote-author span { font-size: 1.0625rem; } /* Users */ .txt-block .users { margin-top: 14px; } .users img { max-height: 48px; } .txt-block .users img { max-height: 44px; } .users p { display: block; font-size: 0.975rem; margin-top: 15px; top: 0; left: 0; } .txt-block .users p { display: inline-block; font-size: 0.925rem; margin-top: 0; top: 10px; left: 4px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ /* Header Logo */ .wsmobileheader .smllogo { display: block; margin-top: 25px; padding-left: 16px; } .smllogo img { width: auto; max-width: inherit; max-height: 30px; } .wsmenu > .wsmenu-list { width: 325px; margin-right: -325px; } .wsactive .wsmobileheader { margin-right: 325px; } .overlapblackbg { width: calc(100% - 325px); } .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 16px 0 0; } /* Nav Link Info */ span.sm-info { width: 22px; height: 22px; font-size: 0.8rem; line-height: 20px; top: -1px; margin-left: 8px; } .wsmenu > .wsmenu-list > li > a { padding: 5px 32px 4px 20px; margin: 0; } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 8px; width: 8px; margin: 24px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { top: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { padding: 6px 10px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 13px 10px; } /* Header Store Badges */ .store.header-store img { max-height: 45px; } /* Header Social Links */ .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-25 [class*="flaticon-"]:after { line-height: 52px!important; } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .hero-app-logo img { max-height: 98px; margin-bottom: 24px; } .hero-section .btns-group { display: block; } .hero-section .btns-group .btn { display: block; padding: 1rem 1.5rem; margin: 0 10%; } .hero-section .btns-group .btn:first-child { margin-bottom: 15px; } .hero-section .store { display: block; margin: 15px 0 0; } .hero-section .os-version-ext { margin-top: 18px; } .hero-section .users p { margin-top: 22px; } /* Hero Advantages */ .hero-section .text-center .advantages { margin-top: 18px; } .hero-section .advantages li { display: block!important; margin-top: 4px; } .hero-section .advantages li p { display: block; float: none; } .hero-section li.advantages-links-divider { display: none!important; } /* HERO QUICK FORM */ .hero-section .quick-form .form-control, .hero-section .quick-form .btn { height: 54px; font-size: 1.1rem; } .hero-section .quick-form.form-half .form-control { height: 54px; font-size: 1.1rem; padding: 0 14px; margin-bottom: 20px; } .hero-section .quick-form.form-half .btn { height: 54px; font-size: 1.1rem; } .hero-section .text-center .quick-form-msg { margin: 20px 0 0 0; } /* HERO DIGITS */ #hd-1-1, #hd-1-2 { width: 100%; padding: 0; } #hd-1-1 { margin-bottom: 20px; } .hero-digits h2.statistic-number { font-size: 2.85rem; } .hero-digits h2.statistic-number small { font-size: 2.15rem; margin-left: 3px; } /* HERO-1 */ #hero-1 { padding-top: 70px; margin-bottom: 60px; } .hero-1-txt h2 { font-size: 2.2em; padding: 0 2%; } .hero-1-txt p.p-lg { padding: 0 2%; margin-top: 15px; margin-bottom: 5px; } .hero-1-img { margin-top: 40px; margin-bottom: -60px; } /* HERO-2 */ .hero-2-txt h2 { font-size: 2.25rem; } .hero-2-txt p.p-xl { margin-top: 15px; margin-bottom: 5px; } .hero-2-txt p.btn-txt { font-size: 0.975rem; } /* HERO-3 */ #hero-3 { padding-top: 70px; } .hero-3-txt h2 { font-size: 2.2rem; } .hero-3-txt p.p-xl { font-size: 1.175rem; margin-top: 15px; margin-bottom: 5px; } .hero-3-txt .btn-txt { font-size: 0.95rem; margin-top: 20px; } .hero-3-img { margin: 35px -16% 0; } /* HERO-4 */ #hero-4 { padding-top: 70px; } .hero-4-txt h2 { font-size: 2.25rem; } .hero-4-txt p.p-xl { padding: 0; margin-top: 15px; margin-bottom: 25px; } .hero-4-img { margin: 35px -10px 0; } /* HERO-5 */ #hero-5 { padding-top: 70px; margin-bottom: 60px; } .hero-5-txt h2 { font-size: 2.15em; } .hero-5-txt p.p-xl { margin-top: 15px; margin-bottom: 5px; } .hero-5-img { margin-top: 45px; margin-bottom: -60px; } /* HERO-6 */ #hero-6 { padding-top: 70px; } #hero-6:after { height: 7%; } .hero-6-txt h2 { font-size: 2.15rem; } .hero-6-txt p.p-lg { padding: 0 4%; margin-top: 15px; margin-bottom: 25px; } /* HERO-7 */ .hero-7-txt h2 { font-size: 2.25rem; margin-bottom: 10px; } .hero-7-txt .os-version-ext span { font-size: 0.95rem; } .hero-7-img { margin: 0 0 -35%; } /* HERO-8 */ #hero-8 { margin-bottom: 45px; } .hero-8-txt h2 { font-size: 2.25rem; padding: 0 5%; } .hero-8-txt p.p-lg { margin-top: 15px; margin-bottom: 25px; } .hero-8-txt .quick-form { margin: 24px 4% 0; } .hero-8-img { margin: 35px 0 -45px 0; } /* HERO-9 */ #hero-9 { padding-top: 70px; } .hero-9-txt h2 { font-size: 2.25rem; } .hero-9-txt p.p-lg { padding: 0 3%; margin-top: 12px; margin-bottom: 5px; } .hero-9-img { margin-top: 35px; } /* HERO-10 */ .hero-10-txt h2 { font-size: 2.25rem; } .hero-10-txt p.p-lg { padding: 0 3%; margin-top: 15px; margin-bottom: 25px; } .hero-10-txt p.btn-txt { margin-top: 20px; } #hero-10 .quick-form { margin: 24px 4% 0; } /* HERO-11 */ .hero-11-txt h2 { font-size: 2.25rem; } .hero-11-txt p.p-lg { margin-top: 12px; margin-bottom: 5px; } .hero-11-txt .quick-form { margin: 24px 4% 0; } .hero-11-img { margin-top: 35px; } /* HERO-12 */ .hero-12-txt h2 { font-size: 2rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { padding: 0; margin-top: 14px; margin-bottom: 23px; } .hero-12-img { margin-top: 40px; } /* HERO-13 */ #hero-13 { margin-bottom: 60px; } .hero-13-txt h2 { font-size: 2.05rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { padding: 0 2%; margin-top: 10px; margin-bottom: 5px; } .hero-13-txt .quick-form { margin: 24px 4% 0; } .hero-13-img { margin: 40px 0 -60px; } /* HERO-14 */ #hero-14 { padding-top: 80px; padding-bottom: 90px; } .hero-14-txt h2 { font-size: 2.5rem; } .hero-14-txt p.p-xl { margin-top: 15px; margin-bottom: 10px; } /* HERO-15 */ .hero-15-txt h2 { font-size: 2.5rem; } .hero-15-txt p.p-lg { margin-top: 16px; margin-bottom: 25px; } .hero-15-img { margin: 40px 0 -70px; } /* HERO-16 */ .hero-16-txt h2 { font-size: 2.15rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 12px; margin-bottom: 22px; padding: 0; } .hero-16-img { padding: 28px 15px 0; margin-top: 35px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .hero-16-img img { margin-bottom: -10px; } /* HERO-17 */ .hero-17-txt h2 { font-size: 2.55rem; line-height: 1.3; padding: 0 7%; } .hero-17-txt p.p-md { margin-top: 14px; margin-bottom: 5px; } .hero-17-img { margin-top: 40px; } /* HERO-18 */ .hero-18-txt h2 { font-size: 2rem; } .hero-18-txt p.p-xl { margin-top: 14px; margin-bottom: 20px; } .hero-18-img { margin-top: 10px; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-1 { margin-bottom: 35px; } .about-2-title { margin-bottom: 12px; } #a2-1 { margin-bottom: 16px; } .about-1-txt h2 { font-size: 2.25rem; margin-bottom: 12px; } .about-1-txt h4 { font-size: 1.25rem; } .about-1-img { margin-top: 35px; margin-bottom: -35px; } .about-3 .img-block.left-column, .about-3 .img-block.right-column { margin-bottom: 35px; } .about-section .accordion-1 { margin-top: -18px; } /* CAREERS */ .jobs-category { padding: 0 20px 6px; margin-bottom: 20px; } .jobs-category h4 { font-size: 1.6rem; padding-top: 20px; margin-bottom: 5px; } .career-item { padding: 14px 0; } .position-description h5 { font-size: 1.325rem; padding-right: 10%; } .position-link { top: 17px; right: 0; } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1rem; } .more-careers { margin-top: 30px; } .more-careers-txt p span { display: block; } /* JOB POSITION */ .job-position-title { padding: 50px 15px 55px; margin: 80px -15px 25px; } .job-position-title .position-data { margin-top: 10px; } .job-position-title .position-data p.p-xl { font-size: 1.25rem; } .job-position-title .btn { font-size: 0.95rem; padding: 0.7rem 1.85rem; } .position-info h5 { margin-top: 25px; margin-bottom: 14px; } .position-info .btn { margin-top: 16px!important; } /* FEATURES */ .features-4.pt-30, .features-5.pt-30 { margin-top: 40px; } .fbox-5-wrapper .section-title { margin-bottom: 30px; } .features-2 .section-title p.p-xl { font-size: 1.15rem; } .fbox-5-wrapper { padding: 40px 24px 50px; } .fb-1, .fb-2, .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-2 .fb-4, .rows-2 .fb-5, .row-cols-md-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-3 .fb-5, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fb-5, .rows-4 .fb-6, .fbox-4.fb-1, .fbox-4.fb-3, .fbox-4.fb-5, .fbox-4.fb-7, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 35px; } .features-2 .rows-4 .fb-7 { margin-bottom: 35px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3, .fbox-wrapper.left-align .rows-2 .fb-4, .fbox-wrapper.left-align .rows-2 .fb-5 { margin-bottom: 40px; } .rows-2 .fb-7 { margin-top: 35px; margin-bottom: 35px; } .fbox-3 { padding: 45px 55px 35px; } .fbox-4-txt { padding: 45px 7% 0; margin-bottom: 40px; } .fbox-4.fb-1 { display: flex; flex-wrap: wrap; } .fbox-4, .fbox-4.fb-5, .fbox-4.fb-6 { padding: 40px 25px 35px; } .fbox-4.fb-7, .fbox-4.fb-8 { padding: 45px 25px 0; } .fbox-4.fb-1 .fbox-4-img, .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 8% 20px; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 0 0 20px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 25px 0 0; } .fbox-5 { padding: 45px 35px; } .fbox-5-img img { max-height: 190px; margin-bottom: 20px; } .fbox-6 .fbox-img { margin-bottom: 25px; } .fbox-img.h-175 img, .fbox-img.h-180 img { max-height: 180px; } .fbox-7 .fbox-img.h-175, .fbox-7 .fbox-img.h-180 { padding-top: 30px; margin: 0 20px 50px; } .fbox-ico, .fbox-ico.ico-rounded, .fbox-1 .fbox-ico.ico-60 { margin-bottom: 15px; } .fbox-2 .fbox-ico-wrap.ico-55 { margin-bottom: 14px; } .fbox-ico[class*="img-"] { margin-bottom: 16px; } .fbox-wrapper .ico-50 [class*="flaticon-"]:before, .fbox-wrapper .ico-50 [class*="flaticon-"]:after, .fbox-wrapper .ico-55 [class*="flaticon-"]:before, .fbox-wrapper .ico-55 [class*="flaticon-"]:after, .fbox-wrapper .ico-60 [class*="flaticon-"]:before, .fbox-wrapper .ico-60 [class*="flaticon-"]:after { font-size: 3.7rem; } .fbox-ico-wrap .ico-40 [class*="flaticon-"]:before, .fbox-ico-wrap .ico-40 [class*="flaticon-"]:after { font-size: 3.15rem; } .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6, .fbox-2 h5, .fbox-4 h5 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 14px; margin-bottom: 10px!important; } .fbox-4-txt h2 { margin: 0 4%; margin-bottom: 12px; } .fbox-4-txt h3.h3-xl { margin-bottom: 12px; } .fbox-4-txt h3.h3-lg { margin: 0 2%; font-size: 1.625rem; margin-bottom: 12px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5, .fbox-5 h5 { margin-bottom: 14px; } .fbox-1 p, .rows-2.row-cols-lg-4 .fbox-1 p { padding: 0 5%; } .rows-2 .fbox-1 p { padding: 0; } .features-2-download { margin-top: 45px; } .features-2-download p.p-sm { font-size: 0.9rem; margin-top: 15px; } /* CONTENT */ .ct-07, .ct-08, .ct-09 { padding: 70px 0; } .bc-02 .container { max-width: 100%; } .bc-02.pt-30 .container, .bc-02.pb-30 .container { max-width: auto; } .bc-02-wrapper { margin: 0 -15px; border-radius: 0 0!important; } .bc-02.pt-30 .bc-02-wrapper, .bc-02.pb-30 .bc-02-wrapper { margin: 0; border-radius: 12px!important; } .bc-02.pt-30.ws-wrapper, .bc-02.pb-30.ws-wrapper { padding-top: 35px; } .bc-02.pt-30.bc-02-top { padding-top: 20px; margin-top: 50px; } .bc-04-wrapper { padding: 14px 14px 40px; } .ct-05.pt-100, .ct-06 .section-overlay { margin-bottom: 40px; } .bc-01 .section-overlay, .bc-02 .section-overlay { padding: 70px 30px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 35px 20px; } .bc-03 .section-overlay { padding: 70px 28px 0; } .bc-03 .section-title { margin-bottom: 25px; } .bc-03-wrapper .section-title h2 { font-size: 1.875rem; } .ct-06 .section-title p { font-size: 1.03125rem; } .bc-03 .section-title p { margin-top: 14px; } .ct-05 .section-title p { font-size: 1.03125rem; } .txt-box, .bc-01 .txt-box { margin-bottom: 20px; } .txt-block-stat.mt-30, .txt-block-stat.mt-35 { margin-top: 20px; } .bc-04 .txt-block { padding: 0 12px; } .txt-block h3, .txt-block h2, .txt-block h5, .bc-02 .txt-block h5 { margin-bottom: 14px; } h5.h5-title { margin: 14px 0; } .txt-block .btn, .txt-block .stores-badge { margin-top: 22px; } .txt-block-tra-link { margin-top: 16px; } .cbox-1 .ico-wrap { margin-right: 1rem; } .cbox-1-ico { width: 1.9rem; height: 1.9rem; font-size: 1.0625rem; line-height: 1.5rem; margin-top: 5px; } .cbox-2 .cbox-2-ico { margin-bottom: 12px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3.25rem; } .cbox-3 { text-align: center; } .cbox-title { margin-bottom: 10px; } .cbox-title span {display: block; float: none; line-height: 1!important; margin: 0 0 14px 0; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 3.25rem; } .cbox-1-txt { margin-bottom: 20px; } .cbox-2-txt, .cbox-3-txt { margin-bottom: 30px; } .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 12px!important; } .cbox-2-txt p { padding: 0 4%; } .cbox-4-wrapper { margin-top: 0; } .box-title { margin-bottom: 14px; } .cbox-4.cb-2 { margin-top: 18px; } .box-title span { top: 10px; left: 3px; right: 0; } .box-title h6 { position: relative; top: 2px; left: 8px; } .cbox-5 { width: 340px; min-width: 340px; padding: 13px 20px; } .cbox-5.cb-1 { margin: 8px 0 20px; } .cbox-5-ico span { position: relative; top: 5px; } .cbox-5-txt { padding-left: 13px; } .cbox-5-txt h6 { font-size: 1.1875rem; margin-bottom: 0; } .cbox-6-wrapper { margin-bottom: 55px; } .cbox-6 { padding: 25px 24px; } .cbox-6 hr { margin-top: 25px; margin-bottom: 15px; } .cbox-6 h2.statistic-number { font-size: 2.45rem; } .cbox-6 .statistic-number sup { font-size: 2rem; top: -5px; right: 0; margin-right: 5px; } .cbox-6-txt.mt-30 { margin-top: 20px; } .cbox-6-data { padding: 11px 17px; } .cbox-6-data.mt-25 { margin-top: 15px; } .cb-shape-1 { right: -75px; top: -20px; } .cb-shape-2 { left: -20px; bottom: -20px; } .cb-shape-1 img, .cb-shape-2 img { width: 50%; height: 50%; } .cbox-7-txt { padding-left: 12px; } .cbox-7-ico { margin-top: 1px; } .cbox-7-ico { width: 24px; height: 24px; margin-top: 1px; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.735rem; } .cbox-7-ico span { line-height: 22px; } .cbox-7-txt p { margin-bottom: 14px; } .txt-block .accordion-1 .accordion-item { padding: 22px 0 27px; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.785rem; line-height: 30px; top: -1px; right: 0; } .txt-block .accordion-1 .accordion-thumb h5 { font-size: 1.5rem; padding-left: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 18px; } .txt-block .accordion-1 .accordion-panel { padding: 0; } .tabs-1 li { padding: 18px 25px; } .tab-link p { margin-top: 6px; } /* Content Images */ .bc-4-img { margin-bottom: 30px; } .content-section .container.hidd { overflow: visible!important; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -40px; } .img-block-txt { margin-top: 35px; } .img-block-btn { padding: 0 2%; margin-top: 35px; } .img-block-btn .btn { width: 100%; } /* STATISTIC */ .statistic-2.py-80 { padding: 70px 0; } .statistic-4-wrapper { padding: 0 8%; } #sb-1-1, #sb-1-2, #sb-2-1 { margin-bottom: 35px; } #sb-3-2 { padding-left: 4%; } .statistic-4-wrapper .statistic-block { padding: 0; } #sb-4-1, #sb-4-2 { padding: 0 5% 35px; margin-bottom: 35px; } h3.statistic-number { font-size: 2.65rem; line-height: 1; letter-spacing: -1px; } h2.statistic-number { font-size: 2.85rem; line-height: 1; letter-spacing: -1px; } .statistic-2-wrapper h2 { margin-bottom: 12px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { font-size: 2.4rem; letter-spacing: -0.5px; margin-bottom: 12px; } .statistic-2 .txt-block h3 { padding: 0 6%; } .statistic-4-wrapper h5 { margin-top: 20px; margin-bottom: 12px; } #sb-2-1 br { display: none; } #sb-2-2 { clear: both; } #sb-2-2 .txt-block-rating { display: inline-block; } #sb-2-2 p { display: inline-block; margin-left: 5px; } /* RATING */ #rb-2-1 { margin-bottom: 25px; } #rb-2-2 { margin-bottom: 20px; } .rating-title { padding: 0 10%; } .rating-title h5 { font-size: 1.125rem; } .rbox-1-img { margin-bottom: 18px; } .rbox-1-img img { max-height: 32px; } .rbox-2-img img { max-height: 70px; } #rb-2-2 .rbox-2-img img { max-height: 125px; } .rbox-2 p { margin-top: 15px; } .rbox-1 .star-rating { padding: 5px 16px; font-size: 1rem; line-height: 1; } .rbox-1 .star-rating span { top: -2px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /* TESTIMONIALS */ .reviews-3-wrapper:after { width: 140%; height: 94%; top: 3%; left: -20%; } .review-1 { padding: 22px 24px 27px; } .review-1.no-title { padding: 37px 24px 27px; } .review-2 { padding: 0; } .review-3 { padding: 37px 28px 25px; } .review-item { margin-bottom: 25px; } .review-4 { padding: 30px 25px; } .review-ico.ico-45 { top: 10px; right: 16px; } .review-ico.ico-60 { top: 10px; left: 20px; } .review-2 .review-avatar { margin: 17px auto 10px; float: none; } .review-avatar img, .owl-item .review-avatar img, .review-3 .review-avatar img { width: 46px; height: 46px; } .reviews-2 .owl-carousel .owl-item img { display: inline-block; } .review-2 .review-avatar img { width: 52px; height: 52px; } .author-data .review-author { padding: 0 0 0 12px; } .review-4-txt .author-data { display: inline-block; margin-top: 3px; } .review-4-txt .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } .review-2 .author-data .review-author { text-align: center; padding: 0; } .review-author.mt-15 { margin-top: -2px; } .review-author h6 { font-size: 1.1rem; margin-top: 3px; margin-bottom: 7px; } .review-author h6 span, .review-author p { font-size: 1rem; } .reviews-btn { margin-top: 40px; } /* TEAM */ .team-1 { padding-bottom: 30px; } .team-member-photo { margin-bottom: 25px; } .team-member-data h6 { font-size: 1.4375rem; margin-bottom: 6px; } .team-member-data p { font-size: 1.125rem; } /* PRICING */ .pricing-1-table { padding: 35px; } .pricing-2-table, .pricing-3-table { padding: 27px 30px; } .pricing-table-header h5 { font-size: 1.5625rem!important; } .pricing-1-table .pricing-table-header h5 { margin-bottom: 20px; } .p-table p.btn-txt { margin: 12px 0 0 0; } .pricing-discount { top: 0; right: 0; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.975rem; } .price span, .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.75rem; } .price sup { font-size: 2rem; top: -5px; } .pricing-2-table .price sup, .pricing-3-table .price sup { font-size: 2rem; top: -4px; } .price sup.validity { font-size: 1.3125rem; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.6rem; } /* Pricing Features */ .pricing-features.mt-25 { margin-top: 20px; } .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { text-align: center; margin-top: 14px; } .pricing-features li, .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 10px 8px; } .pt-btn { margin-top: 22px; } /* Pricing Notice */ .pricing-notice.mb-40 { margin-bottom: 30px; } .col-lg-9 .pricing-notice p, .col-lg-10 .pricing-notice p { padding: 0; } /* Pricing Compare */ .table-responsive.mb-50 { margin-bottom: 30px; } .table>:not(caption)>*>* { padding: 10px 0 9px; } .comp-table .table-responsive thead th { font-size: 0.9375rem; } .comp-table .table-responsive tbody th { font-size: 0.915rem; line-height: 1.25; } .comp-table .table-responsive tbody td { font-size: 0.9rem; top: 0; line-height: 1.25; } .comp-table .table-responsive tbody td span { top: 3px; } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.675rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.835rem; } .pbox { padding: 0; } #pbox-1, #pbox-2 { margin-bottom: 30px; } .pricing-section .txt-box-last, .pricing-section .pm-last { margin-bottom: 40px; } .comp-table-payment h6 { margin-bottom: 15px; } /* INTEGRATIONS */ .integrations-2.pt-100.pb-70 { padding-bottom: 50px; } .int-2-wrapper .col { padding: 0 10px; } .integrations-1 .container { max-width: 100%; } .int-1-wrapper { padding: 70px 22px; margin: 0 -15px; border-radius: 0 0!important; } .integrations-1 .section-title h2 { padding: 0 6%; } .filter-btns button { font-size: 1.1rem; } .int_tool-1 { margin-bottom: 30px; } .int_tool-2 { padding: 26px 14px; margin-bottom: 20px; } .int_tool-3 { padding: 18px 26px; } .int_tool-1 .tool_logo { padding: 35px 25px; margin-bottom: 20px; } .int_tool-1 img, .int_tool-2 img { width: 55px; height: 55px; } .tool_txt h6 { font-size: 1.225rem; line-height: 1; margin-top: 2px; } .tool_logo h6 { font-size: 1.225rem; } .int_tool-2 h6 { font-size: 1.1875rem; margin-top: 18px; } .tool_txt p { font-size: 1.0625rem; margin-top: 5px; } .integrations-section .more-btn.mt-30 { margin-top: 22px; } .integrations-1 .more-btn { margin-top: 18px; } /* MORE APPS */ .ab-1, .ab-2, .ab-3, .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4, .rows-2 .ab-5, .rows-2 .ab-6 { margin-bottom: 35px; } .statistic-2-wrapper .txt-block { margin-bottom: 35px; } .app-box h6, .app-box h5 { margin-top: 22px; margin-bottom: 10px; } .app-logo-img { padding: 0 7%; } /* BRANDS */ .brands-2-wrapper { padding: 0 12px; } .brands-2-wrapper .col { padding: 0; } .brands-title h6 { font-size: 1rem; line-height: 1.55; margin-bottom: 25px; } .brands-title h5 { font-size: 1.325rem; margin-bottom: 35px; } .brands-title p { padding: 0 8%; margin-bottom: 25px; } #brand-2-1, #brand-2-2, #brand-2-3 { margin-bottom: 35px; } .brands-carousel-5 .brand-logo, .brands-carousel-6 .brand-logo, #brands-2 .brand-logo { padding: 0 10px; } .brands-section .more-btn { margin-top: 35px; } /* CHANGELOG */ .release-data { padding-bottom: 25px; margin-bottom: 22px; } span.version-data { font-size: 1.3rem; line-height: 1.4; margin-bottom: 12px; } span.release-date { font-size: 1.05rem; } .release-highlights h6 { font-size: 1.175rem; margin-bottom: 15px; } .release-preview { margin-bottom: 18px; } /* DOWNLOAD */ #di-3 { margin-bottom: 30px; } .download-item { margin-right: 5%; margin-left: 5%; } .download-item h6 { font-size: 1.5rem; } .download-item p { font-size: 1.125rem; } /* FAQs */ .faqs-1 .section-title { margin-bottom: 25px; } .faqs-2 .section-title { margin-bottom: 35px; } .faq-3-title p { font-size: 1.05rem; margin-top: 15px; margin-bottom: 20px; } .faqs-2 .question h6, .faqs-2 .question h5 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 12px; } .faqs-section .accordion-thumb h5, .faqs-section .accordion-thumb h6 { font-size: 1.25rem; line-height: 1.5; padding-right: 12%; } .faqs-section .accordion-thumb { padding: 15px 0 20px; } .faqs-section .accordion-panel { padding: 0 0 10px 0; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.785rem; line-height: 30px; top: 16px; right: 0; } .faqs-2 .more-questions { margin-top: 15px; } .more-questions h6 { font-size: 1.325rem; padding: 0 5%; margin-bottom: 10px; } .more-questions p { font-size: 1.1rem; padding: 0 6%; } .more-questions-btn { display: block; margin: 14px 0 0; } /* BANNER */ .banner-1 .container { max-width: 100%; } .banner-1-wrapper { padding: 65px 25px 70px; margin: 0 -15px; border-radius: 0 0!important; } .banner-2-wrapper .banner-overlay { padding: 60px 35px 70px; } .banner-3 .banner-overlay.pt-80.pb-90 { padding: 55px 0 65px; } .banner-4-wrapper { padding: 45px 5%; } .banner-5-wrapper .banner-overlay { padding: 60px 30px 0; } .banner-4-txt { margin-bottom: 10px; } .banner-1-txt h2 { font-size: 2rem!important; padding: 0 10%; } .banner-2-txt h2, .banner-4-txt h4 { font-size: 1.825rem!important; } .banner-5-txt h2 { font-size: 1.9rem!important; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { margin: 12px 0 4px; padding: 0 6%; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 4%; margin: 15px 0 22px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { padding: 0 8%; margin-top: 14px; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { padding: 0 3%; margin-top: 14px; margin-bottom: 22px; } .banner-1-txt .store { display: block; margin: 15px 0 0; } .banner-1-txt .btn { margin-top: 18px; } .banner-2-txt .btn, .banner-5-txt .btn { width: auto; } .banner-3-txt .btn.mt-25 { width: auto; margin-top: 18px; } .banner-3-txt .btn.mt-35 { width: auto; margin-top: 24px; } .banner-section .store { display: block; margin-right: 0; } .banner-section .store.store-btn-2 { margin-top: 15px; } .banner-section p.btn-txt { padding: 0; margin-top: 14px; margin-bottom: 0!important; } .banner-2-txt p.btn-txt, .banner-5-txt p.btn-txt { font-size: 0.95rem; } .banner-5-img.right-column, .banner-5-img.left-column { margin: 35px 0 -20%; } /* NEWSLETTER */ .newsletter-2 .container { max-width: 100%; } .newsletter-1 .newsletter-overlay { padding: 50px 0 40px; } .newsletter-2 .newsletter-overlay { padding: 65px 35px; margin: 0 -15px; border-radius: 0 0!important; } .newsletter-3 .newsletter-overlay { margin: 0 2%; padding: 45px 4% 35px; } .newsletter-4 .newsletter-overlay { padding: 65px 0 55px; } .newsletter-txt h4, .newsletter-txt h3 { font-size: 1.75rem; padding: 0; margin-bottom: 25px; } .newsletter-3 .newsletter-txt h4 { font-size: 1.65rem; } .newsletter-2 .newsletter-txt p { font-size: 0.95rem; padding: 0 2%; margin-bottom: 0; } .newsletter-4 .newsletter-txt p { font-size: 0.95rem; padding: 0 4%; margin-bottom: 0; } .newsletter-1 .newsletter-form { padding: 0 2%; } .newsletter-2 .newsletter-form { padding: 0 2%; margin-top: 30px; } .newsletter-3 .newsletter-form { padding: 0 4%; } .newsletter-4 .newsletter-form { padding: 0 7%; margin-top: 30px; } .newsletter-section .form-control, .newsletter-section .btn { height: 54px; font-size: 1.0625rem; } .newsletter-2.newsletter-section .btn, .newsletter-4.newsletter-section .btn { font-size: 1.0625rem; } /* BLOG */ .blog-1.pb-60 { padding-bottom: 35px; } .blog-1 .blog-post { margin-bottom: 35px; } .blog-post-txt { padding: 0 10px; margin-top: 35px; } .blog-post-meta, .wide-post .blog-post-meta { margin-top: 18px; } .post-tag { font-size: 0.85rem; margin-bottom: 18px; } .blog-post-txt h4, .blog-post-txt h6, .blog-post-txt h5 { margin-bottom: 16px; } /* BLOG LISTING */ #blog-page.pb-40 { padding-bottom: 35px; } #blog-page .blog-post { margin-bottom: 35px; } #blog-page .blog-post.wide-post { margin-bottom: 15px; } .wide-post .blog-post-img { margin-bottom: 35px; } .posts-category { margin-top: 30px; margin-bottom: 30px; } /* SINGLE BLOG POST */ .blog-post-preview, .single-post-title { margin-bottom: 25px; } .single-post-title .blog-post-meta { margin-bottom: 10px; } .single-post-title h2 { margin-bottom: 14px; } .single-post-txt h6 { font-size: 1.1875rem; margin-bottom: 10px; } .single-post-txt h5.h5-xl { font-size: 1.5rem; margin-top: 26px; margin-bottom: 14px; } .single-post-txt h5 { margin-top: 15px; margin-bottom: 14px; } .post-inner-img { margin-top: 25px; margin-bottom: 25px; } .post-data { margin: 40px 0 0; padding: 40px 0 70px; } .post-author-avatar { margin-right: 16px; } .post-author-avatar img { width: 60px; height: 60px; } .post-author-txt { top: 4px; } .post-author-txt p { margin-top: 5px; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.525rem; } .share-social-icons a.share-ico span { margin-right: 10px; } /* CONTACTS */ .contacts-1.pb-40 { padding-bottom: 20px; } .contacts-1 .contact-form p { font-size: 1rem; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.935rem; margin-top: 25px; } .contact-form .form-control, .contact-form .form-select { height: 50px; font-size: 1.0625rem; padding: 0 15px;margin-bottom: 26px; } .contact-form textarea { min-height: 150px; } .contact-form textarea.form-control { padding: 15px; } .contact-form .form-btn .btn { font-size: 1.1rem; padding: 0.925rem 1.8rem; } .contact-form-msg { margin-top: 15px; } /* FOOTER */ .footer { padding-bottom: 30px; } .footer-data-logo { margin-bottom: 20px; } .footer-data-socials.text-end { margin-bottom: 40px; } .footer-1 .footer-contacts { margin-top: -5px; } .footer-info { margin-bottom: 35px; } .footer-links { margin-bottom: 25px; } .footer-3 .footer-connect { margin-top: 5px; margin-bottom: 25px; } .footer-form { margin-bottom: 10px; } .fl-1, .fl-2, .fl-3, .fl-4, .footer-1 .fl-5 { border-bottom: 1px solid #ddd; margin-bottom: 16px; padding-bottom: 17px; } .footer-1 .fl-3 { margin-bottom: 17px; } img.footer-logo { max-height: 30px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 32px; margin-bottom: 0; } .footer-2 img.footer-logo { margin-bottom: 5px; } .footer-copyright-logo img.footer-logo { max-height: 28px; } .footer h6 { font-size: 1.1875rem; margin-bottom: 20px; } /* 19px */ .footer .footer-links h6.h6-lg { font-size: 1.275rem; margin-bottom: 18px; } .footer-mail-link { margin: 0 0 0 6px; } .footer-mail-link a { font-size: 1.09375rem; } /* 17.5px */ .footer-mail-link span { top: 4.5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.275rem; } .footer-info-socials li { padding-right: 13px; } .footer-info-socials.ico-20 [class*="flaticon-"]:before, .footer-info-socials.ico-20 [class*="flaticon-"]:after, .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3975rem; } .footer-socials a { margin-right: 13px; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.435rem; } .footer-1 .footer-form { margin-bottom: 0; } .footer-form .form-control { font-size: 1.1rem; height: 38px; } .footer-form .btn { height: 40px; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { font-size: 1rem; line-height: 28px!important; } .footer-1 .bottom-footer { margin-top: 20px; } .footer-copyright p, .bottom-footer-list p.p-sm, .bottom-secondary-link p.p-sm { font-size: 1rem; } .footer-list-divider { top: -1px; } .bottom-secondary-link p span { top: 1.5px; padding: 0 2px; } .footer-info-copyright p span { top: 2px; padding: 0 2px; } .footer-info-copyright.ico-15 [class*="flaticon-"]:before, .footer-info-copyright.ico-15 [class*="flaticon-"]:after { font-size: 0.815rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.375rem; } .footer-stores-badge { margin-bottom: 20px; } .footer-stores-badge .store { margin-right: 10px; } .footer .badge-img-xs .store img { max-height: 2.75rem; } .bottom-foo-socials { margin-left: 6px; } .bottom-foo-socials li { margin-right: 6px; } .footer-data-socials li { padding-right: 8px; } .bottom-foo-socials li span { top: 2.5px; right: 3px; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.5rem; } .bottom-foo-socials.ico-10 [class*="flaticon-"]:before, .bottom-foo-socials.ico-10 [class*="flaticon-"]:after { font-size: 1.125rem; } .bottom-footer p.p-sm { margin-bottom: 0; } /* INNER PAGE WRAPPER */ .inner-page-title { margin-bottom: 40px; } .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1.6666; margin-top: 10px; } /* PAGE PAGINATION */ .page-link { font-size: 0.95rem; padding: 2px 10px; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.75rem; } /* TERMS, PRIVACY, COOKIES */ .txt-block.legal-info h5 { margin: 35px 0 15px; } .txt-block.legal-info h6 { margin: 15px 0; } /* SIGN IN / SIGN UP */ .register-page-logo { padding-top: 70px; } .register-page-logo img { max-height: 28px; } .register-page-form { padding: 30px 5px 70px; } .reset-page-wrapper { margin: 0 2%; padding-top: 125px; padding-bottom: 70px; } .register-form-title { margin-bottom: 25px; } .register-form-title h4, .reset-form-title h5 { font-size: 1.65rem; } .register-form-title p { font-size: 1.125rem; margin-top: 5px; } .reset-form-title { margin-bottom: 20px; } .reset-form-title p.p-sm { font-size: 1rem; margin-top: 12px; } .reset-password-link p { font-size: 0.975rem; margin-bottom: 30px; } .form-data span { font-size: 0.9625rem; } .register-page-form p.create-account { font-size: 1.0625rem; margin-top: 25px; } .reset-password-form .form-data p { font-size: 1.1rem; margin: 22px 0 10px; } .separator-line { font-size: 1rem; margin: 22px 0; } .reset-page-wrapper .form-control, .register-page-form .form-control { height: 52px; font-size: 1.0625rem; margin-bottom: 22px; } #login .register-page-form .btn.submit { height: 52px; font-size: 1.0625rem; margin-top: 0; } #signup .register-page-form .btn.submit { height: 52px; font-size: 1.0625rem; margin-top: 25px; } .reset-page-wrapper .btn.submit { height: 52px; font-size: 1.0625rem; } .register-page-form .btn-google { font-size: 1.0625rem; padding: 0.9rem 1.6rem; } .btn-google img { width: 22px; height: 22px; right: 4px; } /* COOKIES */ #cookies { width: 96%; left: 2%; bottom: 12px; padding: 15px 40px 65px 20px; } #cookies p { font-size: 0.9rem; } #cookies-ok { right: 5%; bottom: 15px; font-size: 0.85rem; padding: 5px 20px; } #cookies-info { margin-left: 7px; } #cookies-close { right: 14px; top: 4px; } #cookies-close svg { width: 12px; height: 12px; } /* MODAL */ .modal-dialog.modal-xl { width: 350px; margin: auto auto; } .modal-body-content { padding: 34px 12px 15px; } .modal .btn-close { right: 16px!important; top: 16px!important; } .modal-body-content h4 { font-size: 1.625rem; margin-bottom: 12px; } .modal-body .newsletter-form { margin-top: 18px; } .modal .newsletter-form .form-control { height: 54px; font-size: 1.0625rem; margin-bottom: 16px; } .modal .newsletter-form .btn { height: 54px; font-size: 1.0625rem; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 390px) and (max-width: 413.98px) { /*------------------------------------------*/ /* BASE /*------------------------------------------*/ #stlChanger { display: none; } .division { padding-left: 8px; padding-right: 8px; } .bg--fixed { width: auto; } .bg--scroll { width: auto; background-attachment: scroll!important; } /* Headers */ h6, h6.h6-md, h6.h6-lg, h6.h6-xl { font-size: 1.25rem; } /* 20px; */ h5, h5.h5-md, h5.h5-lg { font-size: 1.375rem; } /* 22px; */ h5.h5-xl, h4, h4.h4-md, h4.h4-lg, h4.h4-xl { font-size: 1.5rem; } /* 24px; */ h3, h3.h3-md, h3.h3-lg, h3.h3-xl, h2, h2.h2-md, h2.h2-lg { font-size: 1.625rem; } /* 26px; */ h2.h2-xl, h2.h2-title { font-size: 1.875rem; } /* 30px; */ h6, h5, h4, h3, h2, h1 { line-height: 1.4; } /* Paragraphs */ p.p-sm, p { font-size: 1rem; } p.p-md, p.p-lg, p.p-xl { font-size: 1.0625rem; } ol.digit-list p { margin-bottom: 5px; } /* Button */ .btn.btn-sm, .btn, .btn.btn-md, .btn.ico-20.ico-left, .btn.ico-20.ico-right { font-size: 1.1rem; padding: 0.9125rem 1.75rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.125rem; padding: 0.85rem 1.45rem; } .btns-group .btn.ico-30.ico-left, .btns-group .btn.ico-30.ico-right { padding: 0.61915rem 0.5rem 0; } /* Buttons Group */ .btns-group .btn:first-child { margin: 0 0 15px; } .btns-group .btn--transparent { margin-top: -7px; } /* Button Icon */ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { font-size: 1.225rem; line-height: 0.45rem!important;top: 4px; } .btn.ico-30 [class*="flaticon-"]:before, .btn.ico-30 [class*="flaticon-"]:after { font-size: 2.3rem; } .btn.ico-30.ico-left span.ico-30-txt { font-size: 1.225rem; top: -11px; margin-right: 0; } .btn.ico-30.ico-right span.ico-30-txt { font-size: 1.225rem; top: -11px; margin-left: 0; } .btn.ico-left span { margin-right: 7px; } .btn.ico-right span { margin-left: 7px; } .btn.ico-30.ico-left span { right: 0; } /* Button Text */ p.btn-txt, p.btns-group-txt, .btn-rating { text-align: center; margin: 12px 0 0 0; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding: 0; } .text-center .btns-group { display: block; } .btn-rating p.p-sm { font-size: 1rem; } .star-rating small, .star-rating span.rating-txt { font-size: 1.1rem; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1.115rem; top: 2px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1.115rem; top: 2px; } .os-version-ext { margin-top: 12px; } .os-version-ext .star-rating small { font-size: 1rem; } span.os-version { font-size: 1rem; line-height: 1.5; margin-top: 3px; } /* Transparent Link */ a.tra-link { font-size: 1.03125rem; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { font-size: 0.785rem; line-height: 0.7rem!important; top: 1px; left: 2px; } /* OS Button */ .os-btn { width: 100%; min-width: 280px; padding: 14px 20 10px; } .btn-os.d-inline-block { display: block!important; } .os-btn-ico { margin-right: 20px; } .os-btn-txt p { font-size: 1.15rem; margin-top: 1px; margin-bottom: 7px; } .os-btn-txt span { font-size: 1rem; } .d-inline-block.btn-os-last { margin-top: 12px; margin-left: 0; } .d-block.btn-os-last { margin-top: 12px; } /* Store Badge */ .store { margin-right: 4px; } .badge-img-xs .store img, .badge-img-sm .store img, .badge-img-md .store img, .badge-img-lg .store img, .badge-img-xl .store img { max-height: 3.15rem; } /* Watch Video Link */ .watch-video { margin-top: 20px; } .watch-video-link { margin-right: 10px; } p.video-txt-lg { font-size: 1.125rem; } p.video-txt-sm { font-size: 1.0625rem; } /* Video Popup Icon */ .video-btn-xl { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-lg { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after, .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } /* Vector Icon Background */ .ico-55 .shape-ico svg, .ico-60 .shape-ico svg { width: 125px; height: 125px; top: -45px; left: calc(50% - 65px); } /* Vector Rounded Icons */ .ico-rounded, .ico-rounded-md, .ico-rounded-lg { width: 94px; height: 94px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after, .ico-rounded-md [class*="flaticon-"]:before, .ico-rounded-md [class*="flaticon-"]:after, .ico-rounded-lg [class*="flaticon-"]:before, .ico-rounded-lg [class*="flaticon-"]:after { font-size: 3rem; line-height: 94px!important; } /* PNG Icons */ .img-80 img { width: 70px; height: 70px; } .img-75 img { width: 65px; height: 65px; } .img-70 img, .img-65 img, .img-60 img { width: 60px; height: 60px; } /* Section ID */ .section-id { font-size: 0.85rem; margin-bottom: 22px; } /* Section Title */ .section-title.mb-70 {margin-bottom: 35px; } .section-title.mb-100 { margin-bottom: 45px; } .section-title p { margin-top: 15px; } .section-title .btns-group { padding: 0 2%; margin-top: 10px; } .section-title .btns-group .btn { width: 100%; margin: 15px 0 0; } /* Advantages */ .advantages, .text-center .advantages { margin-top: 12px; } /* Compatibility */ .compatibility { margin-top: 5px; } /* Tools List / Payments Icons */ .tools-list p, .payment-methods p { margin-bottom: 12px; } .tools-list span { padding-right: 1px; } .payment-icons img { max-height: 30px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { font-size: 2.125rem; line-height: 2.125rem!important; margin-right: 4px; } /* Quote */ .quote-avatar img { width: 50px; height: 50px; } .quote p { margin-bottom: 4px; } .quote-author h6 { font-size: 1.2rem; } .quote-author span { font-size: 1.0625rem; } /* Users */ .txt-block .users { margin-top: 14px; } .users img { max-height: 48px; } .txt-block .users img { max-height: 42px; } .users p { font-size: 0.975rem; margin-top: 15px; top: 0; left: 0; } .txt-block .users p { font-size: 0.915rem; margin-top: 0; top: 10px; left: 4px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ /* Header Logo */ .wsmobileheader .smllogo { display: block; margin-top: 25px; padding-left: 16px; } .smllogo img { width: auto; max-width: inherit; max-height: 30px; } .wsmenu > .wsmenu-list { width: 325px; margin-right: -325px; } .wsactive .wsmobileheader { margin-right: 325px; } .overlapblackbg { width: calc(100% - 325px); } .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 16px 0 0; } /* Nav Link Info */ span.sm-info { width: 22px; height: 22px; font-size: 0.8rem; line-height: 20px; top: -1px; margin-left: 8px; } .wsmenu > .wsmenu-list > li > a { padding: 5px 32px 4px 20px; margin: 0; } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 8px; width: 8px; margin: 24px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { top: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { padding: 6px 10px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 13px 10px; } /* Header Store Badges */ .store.header-store img { max-height: 45px; } /* Header Social Links */ .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-25 [class*="flaticon-"]:after { line-height: 52px!important; } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .hero-app-logo img { max-height: 96px; margin-bottom: 24px; } .hero-section .btns-group { display: block; } .hero-section .btns-group .btn { display: block; padding: 1rem 1.5rem; margin: 0 10%; } .hero-section .btns-group .btn:first-child { margin-bottom: 15px; } .hero-section .store { display: block; margin: 15px 0 0; } .hero-section .os-version-ext { margin-top: 18px; } .hero-section .users p { margin-top: 20px; } /* Hero Advantages */ .hero-section .text-center .advantages { margin-top: 17px; } .hero-section .advantages li { display: block!important; margin-top: 4px; } .hero-section .advantages li p { display: block; float: none; } .hero-section li.advantages-links-divider { display: none!important; } /* HERO QUICK FORM */ .hero-section .quick-form .form-control, .hero-section .quick-form .btn { height: 52px; font-size: 1.0625rem; } .hero-section .quick-form.form-half .form-control { height: 52px; font-size: 1.0625rem; padding: 0 14px; margin-bottom: 20px; } .hero-section .quick-form.form-half .btn { height: 52px; font-size: 1.0625rem; } .hero-section .text-center .quick-form-msg { margin: 20px 0 0 0; } /* HERO DIGITS */ #hd-1-1, #hd-1-2 { width: 100%; padding: 0; } #hd-1-1 { margin-bottom: 20px; } .hero-digits h2.statistic-number { font-size: 2.85rem; } .hero-digits h2.statistic-number small { font-size: 2.15rem; margin-left: 3px; } /* HERO-1 */ #hero-1 { padding-top: 70px; margin-bottom: 60px; } .hero-1-txt h2 { font-size: 2.175em; } .hero-1-txt p.p-lg { margin-top: 15px; margin-bottom: 5px; } .os-version-ext small, .os-version-ext .os-version { font-size: 0.95rem; } .hero-1-img { padding: 0 1%; margin-top: 35px; margin-bottom: -60px; } /* HERO-2 */ .hero-2-txt h2 { font-size: 2.175rem; } .hero-2-txt p.p-xl { margin-top: 14px; margin-bottom: 5px; } .hero-2-txt p.btn-txt { font-size: 0.975rem; } /* HERO-3 */ #hero-3 { padding-top: 70px; } .hero-3-txt h2 { font-size: 2.175rem; } .hero-3-txt p.p-xl { font-size: 1.2rem; margin-top: 15px; margin-bottom: 5px; } .hero-3-txt .btn-txt { font-size: 0.935rem; margin-top: 18px; } .hero-3-img { margin: 35px -15% 0; } /* HERO-4 */ #hero-4 { padding-top: 70px; } .hero-4-txt h2 { font-size: 2.15rem; } .hero-4-txt p.p-xl { padding: 0; margin-top: 15px; margin-bottom: 24px; } .hero-4-img { margin: 35px -10px 0; } /* HERO-5 */ #hero-5 { padding-top: 70px; margin-bottom: 55px; } .hero-5-txt h2 { font-size: 2.15em; } .hero-5-txt p.p-xl { margin-top: 15px; margin-bottom: 5px; } .hero-5-img { margin-top: 40px; margin-bottom: -55px; } /* HERO-6 */ #hero-6 { padding-top: 70px; } #hero-6:after { height: 7%; } .hero-6-txt h2 { font-size: 2rem; } .hero-6-txt p.p-lg { padding: 0 2%; margin-top: 12px; margin-bottom: 24px; } .hero-6-img { margin-top: 35px; } /* HERO-7 */ .hero-7-txt h2 { font-size: 2.15rem; margin-bottom: 10px; } .hero-7-txt .os-version-ext span { font-size: 0.9rem; } .hero-7-img { margin: 0 0 -40%; } /* HERO-8 */ #hero-8 { margin-bottom: 45px; } .hero-8-txt h2 { font-size: 2.15rem; padding: 0 5%; } .hero-8-txt p.p-lg { margin-top: 12px; margin-bottom: 20px; } .hero-8-txt .quick-form { margin: 24px 4% 0; } .hero-8-img { margin: 35px 0 -45px 0; } /* HERO-9 */ #hero-9 { padding-top: 70px; } .hero-9-txt h2 { font-size: 2.125rem; } .hero-9-txt p.p-lg { margin-top: 12px; margin-bottom: 5px; } .hero-9-img { margin-top: 35px; } /* HERO-10 */ .hero-10-txt h2 { font-size: 2.125rem; } .hero-10-txt p.p-lg { padding: 0; margin-top: 15px; margin-bottom: 5px; } .hero-10-txt p.btn-txt { margin-top: 20px; } #hero-10 .quick-form { margin: 24px 4% 0; } /* HERO-11 */ .hero-11-txt h2 { font-size: 2.15rem; } .hero-11-txt p.p-lg { margin-top: 12px; margin-bottom: 5px; } .hero-11-txt .quick-form { margin: 24px 4% 0; } .hero-11-img { margin-top: 35px; } /* HERO-12 */ .hero-12-txt h2 { font-size: 1.9rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { padding: 0; margin-top: 14px; margin-bottom: 22px; } .hero-12-img { margin-top: 35px; } /* HERO-13 */ #hero-13 { margin-bottom: 60px; } .hero-13-txt h2 { font-size: 2rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 12px; margin-bottom: 5px; } .hero-13-txt .quick-form { margin: 24px 4% 0; } .hero-13-img { margin: 35px 0 -60px; } /* HERO-14 */ #hero-14 { padding-top: 80px; padding-bottom: 90px; } .hero-14-txt h2 { font-size: 2.4rem; } .hero-14-txt p.p-xl { margin-top: 15px; margin-bottom: 10px; } /* HERO-15 */ .hero-15-txt h2 { font-size: 2.4rem; } .hero-15-txt p.p-lg { margin-top: 16px; margin-bottom: 25px; } .hero-15-img { margin: 40px 0 -70px; } /* HERO-16 */ .hero-16-txt h2 { font-size: 2.05rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 12px; margin-bottom: 22px; padding: 0; } .hero-16-img { padding: 28px 15px 0; margin-top: 35px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .hero-16-img img { margin-bottom: -10px; } /* HERO-17 */ .hero-17-txt { padding: 0 4%; } .hero-17-txt h2 { font-size: 2.6rem; line-height: 1.3; } .hero-17-txt p.p-md { margin-top: 14px; margin-bottom: 5px; } .hero-17-img { margin-top: 40px; } /* HERO-18 */ .hero-18-txt h2 { font-size: 2rem; } .hero-18-txt p.p-xl { margin-top: 14px; margin-bottom: 20px; } .hero-18-img { margin-top: 10px; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-1 { margin-bottom: 35px; } .about-2-title { margin-bottom: 12px; } #a2-1 { margin-bottom: 16px; } .about-1-txt h2 { font-size: 2.15rem; margin-bottom: 12px; } .about-1-txt h4 { font-size: 1.1875rem; } .about-1-img { margin-top: 35px; margin-bottom: -35px; } .about-3 .img-block.left-column, .about-3 .img-block.right-column { margin-bottom: 35px; } .about-section .accordion-1 { margin-top: -18px; } /* CAREERS */ .jobs-category { padding: 0 20px 6px; margin-bottom: 20px; } .jobs-category h4 { font-size: 1.6rem; padding-top: 20px; margin-bottom: 5px; } .career-item { padding: 14px 0; } .position-description h5 { font-size: 1.3rem; padding-right: 10%; } .position-link { top: 17px; right: 0; } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1rem; } .more-careers { margin-top: 30px; } .more-careers-txt p span { display: block; } /* JOB POSITION */ .job-position-title { padding: 50px 15px 55px; margin: 80px -15px 25px; } .job-position-title .position-data { margin-top: 10px; } .job-position-title .position-data p.p-xl { font-size: 1.2rem; } .job-position-title .btn { font-size: 0.95rem; padding: 0.7rem 1.85rem; } .position-info h5 { margin-top: 25px; margin-bottom: 14px; } .position-info .btn { margin-top: 16px!important; } /* FEATURES */ .features-4.pt-30, .features-5.pt-30 { margin-top: 35px; } .fbox-5-wrapper { padding: 40px 22px 50px; } .fbox-5-wrapper .section-title { margin-bottom: 30px; } .features-2 .section-title p.p-xl { font-size: 1.1rem; } .fb-1, .fb-2, .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-2 .fb-4, .rows-2 .fb-5, .row-cols-md-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-3 .fb-5, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fb-5, .rows-4 .fb-6, .fbox-4.fb-1, .fbox-4.fb-3, .fbox-4.fb-5, .fbox-4.fb-7, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6, .features-2 .rows-4 .fb-7 { margin-bottom: 35px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3, .fbox-wrapper.left-align .rows-2 .fb-4, .fbox-wrapper.left-align .rows-2 .fb-5 { margin-bottom: 35px; } .rows-2 .fb-7 { margin-top: 35px; margin-bottom: 35px; } .fbox-3 { padding: 45px 35px 35px; } .fbox-4-txt { padding: 40px 5% 0; margin-bottom: 35px; } .fbox-4.fb-1 { display: flex; flex-wrap: wrap; } .fbox-4, .fbox-4.fb-5, .fbox-4.fb-6 { padding: 30px 25px 25px; } .fbox-4.fb-7, .fbox-4.fb-8 { padding: 40px 25px 0; } .fbox-4.fb-1 .fbox-4-img, .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 7% 20px; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 0 0 20px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 25px 0 0; } .fbox-5 { padding: 45px 25px; } .fbox-5-img img { max-height: 185px; margin-bottom: 18px; } .fbox-6 .fbox-img { margin-bottom: 25px; } .fbox-img.h-175 img, .fbox-img.h-180 img { max-height: 170px; } .fbox-7 .fbox-img.h-175, .fbox-7 .fbox-img.h-180 { padding-top: 26px; margin: 0 18px 45px; } .fbox-ico, .fbox-1 .fbox-ico.ico-60 { margin-bottom: 15px; } .fbox-2 .fbox-ico-wrap.ico-55 { margin-bottom: 14px; } .fbox-ico[class*="img-"] { margin-bottom: 16px; } .fbox-wrapper .ico-50 [class*="flaticon-"]:before, .fbox-wrapper .ico-50 [class*="flaticon-"]:after, .fbox-wrapper .ico-55 [class*="flaticon-"]:before, .fbox-wrapper .ico-55 [class*="flaticon-"]:after, .fbox-wrapper .ico-60 [class*="flaticon-"]:before, .fbox-wrapper .ico-60 [class*="flaticon-"]:after { font-size: 3.7rem; } .fbox-ico-wrap .ico-40 [class*="flaticon-"]:before, .fbox-ico-wrap .ico-40 [class*="flaticon-"]:after { font-size: 3.15rem; } .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6, .fbox-2 h5, .fbox-4 h5 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 14px; margin-bottom: 10px!important; } .fbox-4-txt h2 { margin: 0 3%; margin-bottom: 12px; } .fbox-4-txt h3.h3-xl, .fbox-5 h5 { margin-bottom: 12px; } .fbox-4-txt h3.h3-lg { margin: 0 2%; font-size: 1.625rem; margin-bottom: 12px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 14px; } .fbox-1 p { padding: 0 2%; } .rows-2 .fbox-1 p { padding: 0; } .features-2-download { margin-top: 45px; } .features-2-download p.p-sm { font-size: 0.925rem; padding: 0 5%; margin-top: 18px; } .features-2-download p.p-sm br { display: none; } /* CONTENT */ .ct-07, .ct-08, .ct-09 { padding: 70px 0; } .bc-02 .container { max-width: 100%; } .bc-02.pt-30 .container, .bc-02.pb-30 .container { max-width: auto; } .bc-02-wrapper { margin: 0 -15px; border-radius: 0 0!important; } .bc-02.pt-30 .bc-02-wrapper, .bc-02.pb-30 .bc-02-wrapper { margin: 0; border-radius: 12px!important; } .bc-02.pt-30.ws-wrapper, .bc-02.pb-30.ws-wrapper { padding-top: 35px; } .bc-02.pt-30.bc-02-top { padding-top: 20px; margin-top: 50px; } .bc-04-wrapper { padding: 12px 12px 35px; } .ct-05.pt-100, .ct-06 .section-overlay { margin-bottom: 40px; } .bc-01 .section-overlay, .bc-02 .section-overlay { padding: 70px 22px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 35px 22px; } .bc-03 .section-overlay { padding: 70px 22px 0; } .bc-03 .section-title { margin-bottom: 25px; } .bc-03-wrapper .section-title h2 { font-size: 1.875rem; } .bc-03 .section-title p { margin-top: 15px; } .txt-box, .bc-01 .txt-box { margin-bottom: 20px; } .txt-block-stat.mt-30, .txt-block-stat.mt-35 { margin-top: 20px; } .bc-04 .txt-block { padding: 0 10px; } .txt-block h3, .txt-block h2, .txt-block h5, .bc-02 .txt-block h5 { margin-bottom: 14px; } h5.h5-title { margin: 14px 0; } .bc-02 .txt-block h5 { padding-right: 5px; } .txt-block .btn, .txt-block .stores-badge { margin-top: 20px; } .txt-block-tra-link { margin-top: 16px; } .cbox-1 .ico-wrap { margin-right: 1rem; } .cbox-1-ico { width: 1.85rem; height: 1.85rem; font-size: 1rem; line-height: 1.45rem; margin-top: 5px; } .cbox-2 .cbox-2-ico { margin-bottom: 10px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3.25rem; } .cbox-3 { text-align: center; } .cbox-title { margin-bottom: 10px; } .cbox-title span {display: block; float: none; line-height: 1!important; margin: 0 0 14px 0; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 3.25rem; } .cbox-1-txt { margin-bottom: 20px; } .cbox-2-txt, .cbox-3-txt { margin-bottom: 30px; } .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 12px!important; } .cbox-2-txt p { padding: 0 3%; } .cbox-4-wrapper { margin-top: 0; } .box-title { margin-bottom: 14px; } .cbox-4.cb-2 { margin-top: 18px; } .box-title span { top: 10px; left: 3px; right: 0; } .box-title h6 { position: relative; top: 2px; left: 8px; } .cbox-5 { width: 340px; min-width: 340px; padding: 13px 20px; } .cbox-5.cb-1 { margin: 8px 0 20px; } .cbox-5-ico span { position: relative; top: 5px; } .cbox-5-txt { padding-left: 13px; } .cbox-5-txt h6 { font-size: 1.1875rem; margin-bottom: 0; } .cbox-6-wrapper { margin-bottom: 55px; } .cbox-6 { padding: 25px 24px; } .cbox-6 hr { margin-top: 25px; margin-bottom: 15px; } .cbox-6 h2.statistic-number { font-size: 2.45rem; } .cbox-6 .statistic-number sup { font-size: 2rem; top: -5px; right: 0; margin-right: 5px; } .cbox-6-txt.mt-30 { margin-top: 20px; } .cbox-6-data { padding: 11px 17px; } .cbox-6-data.mt-25 { margin-top: 15px; } .cb-shape-1 { right: -75px; top: -20px; } .cb-shape-2 { left: -20px; bottom: -20px; } .cb-shape-1 img, .cb-shape-2 img { width: 50%; height: 50%; } .cbox-7-txt { padding-left: 12px; } .cbox-7-ico { margin-top: 1px; } .cbox-7-ico { width: 24px; height: 24px; margin-top: 1px; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.735rem; } .cbox-7-ico span { line-height: 22px; } .cbox-7-txt p { margin-bottom: 14px; } .txt-block .accordion-1 .accordion-item { padding: 22px 0 27px; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.785rem; line-height: 30px; top: -3px; right: 0; } .txt-block .accordion-1 .accordion-thumb h5 { font-size: 1.35rem; padding-left: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 18px; } .txt-block .accordion-1 .accordion-panel { padding: 0; } .tabs-1 li { padding: 18px 22px; } .tab-link p { margin-top: 6px; } /* Content Images */ .bc-4-img { margin-bottom: 30px; } .content-section .container.hidd { overflow: visible!important; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -40px; } .img-block-txt { margin-top: 35px; } .img-block-btn { padding: 0 2%; margin-top: 35px; } .img-block-btn .btn { width: 100%; } /* STATISTIC */ .statistic-2.py-80 { padding: 70px 0; } .statistic-4-wrapper { padding: 0 8%; } .statistic-2-wrapper .txt-block { margin-bottom: 35px; } #sb-1-1, #sb-1-2, #sb-2-1 { margin-bottom: 35px; } #sb-3-2 { padding-left: 4%; } .statistic-4-wrapper .statistic-block { padding: 0; } #sb-4-1, #sb-4-2 { padding: 0 5% 35px; margin-bottom: 35px; } h3.statistic-number { font-size: 2.45rem; line-height: 1; letter-spacing: -1px; } h2.statistic-number { font-size: 2.75rem; line-height: 1; letter-spacing: -1px; } .statistic-2-wrapper h2 { margin-bottom: 12px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { font-size: 2.25rem; letter-spacing: -0.5px; margin-bottom: 12px; } .statistic-2 .txt-block h3 { padding: 0 3%; } .statistic-4-wrapper h5 { margin-top: 20px; margin-bottom: 12px; } #sb-2-1 br { display: none; } #sb-2-2 { clear: both; } #sb-2-2 .txt-block-rating { display: inline-block; } #sb-2-2 p { display: inline-block; margin-left: 5px; } /* RATING */ #rb-2-1 { margin-bottom: 25px; } #rb-2-2 { margin-bottom: 20px; } .rating-title { padding: 0 10%; } .rating-title h5 { font-size: 1.125rem; } .rbox-1-img { margin-bottom: 18px; } .rbox-1-img img { max-height: 32px; } .rbox-2-img img { max-height: 70px; } #rb-2-2 .rbox-2-img img { max-height: 125px; } .rbox-2 p { margin-top: 15px; } .rbox-1 .star-rating { padding: 5px 16px; font-size: 1rem; line-height: 1; } .rbox-1 .star-rating span { top: -2px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /* TESTIMONIALS */ .reviews-3-wrapper:after { width: 140%; height: 94%; top: 3%; left: -20%; } .review-1 { padding: 22px 24px 27px; } .review-1.no-title { padding: 37px 24px 27px; } .review-2 { padding: 0; } .review-3 { padding: 35px 28px 25px; } #rw-3-1, #rw-3-2, #rw-3-3 { margin-bottom: 25px; } .review-item { margin-bottom: 25px; } .review-4 { padding: 30px 25px; } .review-ico.ico-45 { top: 10px; right: 16px; } .review-ico.ico-60 { top: 10px; left: 18px; } .review-2 .review-avatar { margin: 16px auto 9px; float: none; } .review-avatar img, .owl-item .review-avatar img, .review-3 .review-avatar img { width: 46px; height: 46px; } .reviews-2 .owl-carousel .owl-item img { display: inline-block; } .review-2 .review-avatar img { width: 52px; height: 52px; } .author-data .review-author { padding: 0 0 0 12px; } .review-4-txt .author-data { display: inline-block; margin-top: 3px; } .review-4-txt .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } .review-2 .author-data .review-author { text-align: center; padding: 0; } .review-author.mt-15 { margin-top: -2px; } .review-author h6 { font-size: 1.1rem; margin-top: 3px; margin-bottom: 7px; } .review-author h6 span, .review-author p { font-size: 1rem; } .reviews-btn { margin-top: 40px; } /* TEAM */ .team-1 { padding-bottom: 30px; } .team-member-photo { margin-bottom: 25px; } .team-member-data h6 { font-size: 1.375rem; } .team-member-data p { font-size: 1.0625rem; } /* PRICING */ .pricing-1-table { padding: 30px; } .pricing-2-table, .pricing-3-table { padding: 27px 30px; } .pricing-table-header h5 { font-size: 1.5625rem!important; } .pricing-1-table .pricing-table-header h5 { margin-bottom: 20px; } .p-table p.btn-txt { margin: 12px 0 0 0; } .pricing-discount { top: 0; right: 0; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.975rem; } /* Price */ .price span, .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.75rem; } .price sup { font-size: 2rem; top: -5px; } .pricing-2-table .price sup, .pricing-3-table .price sup { font-size: 2rem; top: -4px; } .price sup.validity { font-size: 1.3125rem; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.6rem; } /* Pricing Features */ .pricing-features.mt-25 { margin-top: 20px; } .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { text-align: center; margin-top: 12px; } .pricing-features li, .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 10px 8px; } .pt-btn { margin-top: 20px; } /* Pricing Notice */ .pricing-notice.mb-40 { margin-bottom: 30px; } .col-lg-9 .pricing-notice p, .col-lg-10 .pricing-notice p { padding: 0 ; } /* Pricing Compare */ .table-responsive.mb-50 { margin-bottom: 30px; } .table>:not(caption)>*>* { padding: 11px 0 9px; } .comp-table .table-responsive thead th { font-size: 0.9375rem; } .comp-table .table-responsive tbody th { font-size: 0.915rem; line-height: 1.25; } .comp-table .table-responsive tbody td { font-size: 0.9rem; top: 0; line-height: 1.25; } .comp-table .table-responsive tbody td span { top: 3px; } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.675rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.835rem; } .pbox { padding: 0; } #pbox-1, #pbox-2 { margin-bottom: 30px; } .pricing-section .txt-box-last, .pricing-section .pm-last { margin-bottom: 40px; } .comp-table-payment h6 { margin-bottom: 15px; } /* INTEGRATIONS */ .integrations-2.pt-100.pb-70 { padding-bottom: 50px; } .int-2-wrapper .col { padding: 0 10px; } .integrations-1 .container { max-width: 100%; } .int-1-wrapper { padding: 70px 22px; margin: 0 -15px; border-radius: 0 0!important; } .integrations-1 .section-title h2 { padding: 0 2%; } .filter-btns button { font-size: 1.1rem; } .int_tool-1 { margin-bottom: 30px; } .int_tool-2 { padding: 26px 14px; margin-bottom: 20px; } .int_tool-3 { padding: 18px 26px; } .int_tool-1 .tool_logo { padding: 35px 25px; margin-bottom: 20px; } .int_tool-1 img, .int_tool-2 img { width: 55px; height: 55px; } .tool_txt h6 { font-size: 1.225rem; line-height: 1; margin-top: 2px; } .tool_logo h6 { font-size: 1.225rem; } .int_tool-2 h6 { font-size: 1.1875rem; margin-top: 18px; } .tool_txt p { font-size: 1.0625rem; margin-top: 5px; } .integrations-section .more-btn.mt-30 { margin-top: 22px; } .integrations-1 .more-btn { margin-top: 18px; } /* MORE APPS */ .ab-1, .ab-2, .ab-3, .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4, .rows-2 .ab-5, .rows-2 .ab-6 { margin-bottom: 35px; } .app-box h6, .app-box h5 { margin-top: 22px; margin-bottom: 10px; } .app-logo-img { padding: 0 7%; } /* BRANDS */ .brands-2-wrapper { padding: 0 12px; } .brands-2-wrapper .col { padding: 0; } .brands-title h6 { font-size: 1rem; line-height: 1.55; padding: 0; margin-bottom: 25px; } .brands-title h5 { font-size: 1.325rem; margin-bottom: 30px; } .brands-title p { padding: 0 5%; margin-bottom: 25px; } #brand-2-1, #brand-2-2, #brand-2-3 { margin-bottom: 35px; } .brands-carousel-5 .brand-logo, .brands-carousel-6 .brand-logo, #brands-2 .brand-logo { padding: 0 10px; } .brands-section .more-btn { margin-top: 35px; } /* CHANGELOG */ .release-data { padding-bottom: 25px; margin-bottom: 22px; } span.version-data { font-size: 1.3rem; line-height: 1.4; margin-bottom: 12px; } span.release-date { font-size: 1.05rem; } .release-highlights h6 { font-size: 1.175rem; margin-bottom: 15px; } .release-preview { margin-bottom: 18px; } /* DOWNLOAD */ #di-3 { margin-bottom: 30px; } .download-item { margin-right: 3%; margin-left: 3%; } .download-item h6 { font-size: 1.5rem; } .download-item p { font-size: 1.125rem; } /* FAQs */ .faqs-1 .section-title { margin-bottom: 25px; } .faqs-2 .section-title { margin-bottom: 35px; } .faq-3-title p { font-size: 1.05rem; margin-top: 15px; margin-bottom: 20px; } .faqs-2 .question h6, .faqs-2 .question h5 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 12px; } .faqs-section .accordion-thumb h5, .faqs-section .accordion-thumb h6 { font-size: 1.25rem; line-height: 1.5; padding-right: 12%; } .faqs-section .accordion-thumb { padding: 15px 0 20px; } .faqs-section .accordion-panel { padding: 0 0 10px 0; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.785rem; line-height: 30px; top: 16px; right: 0; } .faqs-2 .more-questions { margin-top: 15px; } .more-questions h6 { font-size: 1.325rem; padding: 0 4%; margin-bottom: 12px; } .more-questions p { font-size: 1.1rem; padding: 0 6%; } .more-questions-btn { display: block; margin: 14px 0 0; } /* BANNER */ .banner-1 .container { max-width: 100%; } .banner-1-wrapper { padding: 65px 20px 70px; margin: 0 -15px; border-radius: 0 0!important; } .banner-2-wrapper .banner-overlay { padding: 60px 30px 70px; } .banner-3 .banner-overlay.pt-80.pb-90 { paddingp: 55px 0 65px; } .banner-4-wrapper { padding: 45px 11%; } .banner-5-wrapper .banner-overlay { padding: 60px 25px 0; } .banner-4-txt { margin-bottom: 12px; } .banner-1-txt h2 { font-size: 1.95rem!important; padding: 0 4%; } .banner-2-txt h2 { font-size: 1.75rem!important; } .banner-4-txt h4 { font-size: 1.65rem!important; } .banner-5-txt h2 { font-size: 1.8rem!important; } .banner-1-txt p.p-md, .banner-1-txt p.p-lg { margin: 14px 0 2px; padding: 0 5%; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0; margin: 15px 0 22px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { padding: 0 5%; margin-top: 14px; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 14px; margin-bottom: 22px; } .banner-1-txt .store { display: block; margin: 15px 0 0; } .banner-1-txt .btn { margin-top: 18px; } .banner-1-txt .os-version-ext .star-rating small { display: block; margin-left: 0; } .banner-2-txt .btn, .banner-5-txt .btn { width: auto; } .banner-3-txt .btn.mt-25 { width: auto; margin-top: 18px; } .banner-3-txt .btn.mt-35 { width: auto; margin-top: 24px; } .banner-section .store { display: block; margin-right: 0; } .banner-section .store.store-btn-2 { margin-top: 15px; } .banner-section p.btn-txt { padding: 0; margin-top: 14px; margin-bottom: 0!important; } .banner-2-txt p.btn-txt, .banner-5-txt p.btn-txt { font-size: 0.95rem; } .banner-5-img.right-column, .banner-5-img.left-column { margin: 35px 0 -20%; } /* NEWSLETTER */ .newsletter-2 .container { max-width: 100%; } .newsletter-1 .newsletter-overlay { padding: 50px 0 40px; } .newsletter-2 .newsletter-overlay { padding: 65px 30px; margin: 0 -15px; border-radius: 0 0!important; } .newsletter-3 .newsletter-overlay { margin: 0 2%; padding: 45px 4% 30px; } .newsletter-4 .newsletter-overlay { padding: 65px 0; } .newsletter-txt h4, .newsletter-txt h3 { font-size: 1.7rem; padding: 0; margin-bottom: 25px; } .newsletter-3 .newsletter-txt h4 { font-size: 1.6rem; } .newsletter-2 .newsletter-txt p { font-size: 0.95rem; padding: 0; margin-bottom: 0; } .newsletter-4 .newsletter-txt p { font-size: 0.95rem; padding: 0 3%; margin-bottom: 0; } .newsletter-1 .newsletter-form { padding: 0 3%; } .newsletter-2 .newsletter-form { padding: 0 2%; margin-top: 30px; } .newsletter-3 .newsletter-form { padding: 0 3%; } .newsletter-4 .newsletter-form { padding: 0 6%; margin-top: 30px; } .newsletter-section .form-control, .newsletter-section .btn { height: 54px; font-size: 1.0625rem; } .newsletter-2.newsletter-section .btn, .newsletter-4.newsletter-section .btn { font-size: 1.0625rem; } /* BLOG */ .blog-1.pb-60 { padding-bottom: 35px; } .blog-1 .blog-post { margin-bottom: 35px; } .blog-post-txt { padding: 0 15px; margin-top: 32px; } .blog-post-meta, .wide-post .blog-post-meta { margin-top: 18px; } .post-tag { font-size: 0.85rem; margin-bottom: 18px; } .blog-post-txt h4, .blog-post-txt h6, .blog-post-txt h5 { margin-bottom: 16px; } /* BLOG LISTING */ #blog-page.pb-40 { padding-bottom: 35px; } #blog-page .blog-post { margin-bottom: 35px; } #blog-page .blog-post.wide-post { margin-bottom: 15px; } .wide-post .blog-post-img { margin-bottom: 35px; } .posts-category { margin-top: 30px; margin-bottom: 30px; } /* SINGLE BLOG POST */ .blog-post-preview, .single-post-title { margin-bottom: 25px; } .single-post-title .blog-post-meta { margin-bottom: 10px; } .single-post-title h2 { margin-bottom: 14px; } .single-post-txt h6 { font-size: 1.1875rem; margin-bottom: 10px; } .single-post-txt h5.h5-xl { font-size: 1.5rem; margin-top: 26px; margin-bottom: 14px; } .single-post-txt h5 { margin-top: 15px; margin-bottom: 14px; } .post-inner-img { margin-top: 25px; margin-bottom: 25px; } .post-data { margin: 40px 0 0; padding: 40px 0 70px; } .post-author-avatar { margin-right: 16px; } .post-author-avatar img { width: 60px; height: 60px; } .post-author-txt { top: 4px; } .post-author-txt p { margin-top: 5px; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.525rem; } .share-social-icons a.share-ico span { margin-right: 10px; } /* CONTACTS */ .contacts-1.pb-40 { padding-bottom: 20px; } .contacts-1 .section-title p { padding: 0 2%; } .contacts-1 .contact-form p { font-size: 1rem; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.935rem; margin-top: 25px; } .contact-form .form-control, .contact-form .form-select { height: 50px; font-size: 1.0625rem; padding: 0 15px;margin-bottom: 26px; } .contact-form textarea { min-height: 150px; } .contact-form textarea.form-control { padding: 15px; } .contact-form .form-btn .btn { font-size: 1.0625rem; padding: 0.95rem 1.8rem; } .contact-form-msg { margin-top: 15px; } /* FOOTER */ .footer { padding-bottom: 30px; } .footer-data-logo { margin-bottom: 20px; } .footer-data-socials.text-end { margin-bottom: 40px; } .footer-1 .footer-contacts { margin-top: -5px; } .footer-info { margin-bottom: 35px; } .footer-links { margin-bottom: 25px; } .footer-3 .footer-connect { margin-top: 5px; margin-bottom: 25px; } .footer-form { margin-bottom: 10px; } .footer-1 .footer-form { margin-top: 35px; } .fl-1, .fl-2, .fl-3, .fl-4, .footer-1 .fl-5 { border-bottom: 1px solid #ddd; margin-bottom: 15px; padding-bottom: 16px; } .footer-1 .fl-3 { margin-bottom: 16px; } img.footer-logo { max-height: 30px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 32px; margin-bottom: 0; } .footer-2 img.footer-logo { margin-bottom: 5px; } .footer-copyright-logo img.footer-logo { max-height: 28px; } .footer h6 { font-size: 1.1875rem; margin-bottom: 20px; } /* 19px */ .footer .footer-links h6.h6-lg { font-size: 1.275rem; margin-bottom: 18px; } .footer-mail-link { margin: 0 0 0 6px; } .footer-mail-link a { font-size: 1.09375rem; } /* 17.5px */ .footer-mail-link span { top: 4.5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.275rem; } .footer-stores-badge { margin-bottom: 20px; } .footer-stores-badge .store { margin-right: 10px; } .footer .badge-img-xs .store img { max-height: 2.75rem; } .footer-info-socials li { padding-right: 13px; } .footer-info-socials.ico-20 [class*="flaticon-"]:before, .footer-info-socials.ico-20 [class*="flaticon-"]:after, .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3975rem; } .footer-socials a { margin-right: 13px; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.435rem; } .footer-1 .footer-form { margin-bottom: 0; } .footer-form .form-control { font-size: 1.1rem; height: 38px; } .footer-form .btn { height: 40px; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { font-size: 1rem; line-height: 28px!important; } .footer-1 .bottom-footer { margin-top: 20px; } .footer-copyright p, .bottom-footer-list p.p-sm, .bottom-secondary-link p.p-sm { font-size: 1rem; } .footer-list-divider { top: -1px; } .bottom-secondary-link p span { top: 1.5px; padding: 0 2px; } .footer-info-copyright p span { top: 2px; padding: 0 2px; } .bottom-foo-socials { margin-left: 6px; } .bottom-foo-socials li { margin-right: 6px; } .footer-data-socials li { padding-right: 8px; } .bottom-foo-socials li span { top: 2.5px; right: 3px; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.5rem; } .bottom-foo-socials.ico-10 [class*="flaticon-"]:before, .bottom-foo-socials.ico-10 [class*="flaticon-"]:after { font-size: 1.125rem; } .footer-info-copyright.ico-15 [class*="flaticon-"]:before, .footer-info-copyright.ico-15 [class*="flaticon-"]:after { font-size: 0.815rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.375rem; } .bottom-footer p.p-sm { margin-bottom: 0; } /* INNER PAGE WRAPPER */ .inner-page-title { margin-bottom: 40px; } .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1.6666; margin-top: 10px; } /* PAGE PAGINATION */ .page-link { font-size: 0.95rem; padding: 2px 10px; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.75rem; } /* TERMS, PRIVACY, COOKIES */ .txt-block.legal-info h5 { margin-top: 30px; margin-bottom: 15px; } .txt-block.legal-info h6 { margin-top: 15px; margin-bottom: 15px; } /* SIGN IN / SIGN UP */ .register-page-logo { padding-top: 70px; } .register-page-logo img { max-height: 28px; } .register-page-form { padding: 30px 0 70px; } .reset-page-wrapper { margin: 0; padding: 120px 0 70px; } .register-form-title { margin-bottom: 25px; } .register-form-title h4, .reset-form-title h5 { font-size: 1.65rem; } .register-form-title p { font-size: 1.125rem; margin-top: 5px; } .reset-form-title { margin-bottom: 17px; } .reset-form-title p.p-sm { font-size: 1.0625rem; margin-top: 10px; } .reset-password-link p { font-size: 0.975rem; margin-bottom: 30px; } .form-data span { font-size: 0.925rem; } .register-page-form p.create-account { font-size: 1.0625rem; margin-top: 25px; } .reset-password-form .form-data p { font-size: 1.1rem; margin: 22px 0 10px; } .separator-line { font-size: 1rem; margin: 20px 0; } .reset-page-wrapper .form-control, .register-page-form .form-control { height: 52px; font-size: 1.0625rem; margin-bottom: 22px; } #login .register-page-form .btn.submit { height: 52px; font-size: 1.0625rem; margin-top: 0; } #signup .register-page-form .btn.submit { height: 52px; font-size: 1.0625rem; margin-top: 25px; } .reset-page-wrapper .btn.submit { height: 52px; font-size: 1.0625rem; } .register-page-form .btn-google { font-size: 1.05rem; padding: 0.9rem 1.6rem; } .btn-google img { width: 22px; height: 22px; right: 4px; } /* COOKIES */ #cookies { width: 94%; left: 3%; bottom: 12px; padding: 15px 55px 42px 22px; } #cookies p { font-size: 0.9rem; } #cookies-ok { right: 5%; bottom: 15px; font-size: 0.85rem; padding: 4px 20px; } #cookies-info { margin-left: 0; } #cookies-close { right: 13px; top: 4px; } #cookies-close svg { width: 11px; height: 11px; } /* MODAL */ .modal-dialog.modal-xl { width: 340px; margin: auto auto; } .modal-body-content { padding: 32px 12px 15px; } .modal .btn-close { right: 16px!important; top: 16px!important; } .modal-body-content h4 { font-size: 1.625rem; margin-bottom: 12px; } .modal-body .newsletter-form { margin-top: 18px; } .modal .newsletter-form .form-control { height: 52px; font-size: 1.0625rem; margin-bottom: 16px; } .modal .newsletter-form .btn { height: 52px; font-size: 1.0625rem; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (min-width: 321px) and (max-width: 389.98px) { html { font-size: 93.75%; } /*------------------------------------------*/ /* BASE /*------------------------------------------*/ #stlChanger { display: none; } .ts-0 { padding-top: 80px; } .division { padding-left: 5px; padding-right: 5px; } .bg--fixed { width: auto; } .bg--scroll { width: auto; background-attachment: scroll!important; } /* Headers */ h6, h6.h6-md, h6.h6-lg, h6.h6-xl { font-size: 1.33334rem; } /* 20px */ h5, h5.h5-md, h5.h5-lg, h5.h5-xl, h4, h4.h4-md, h4.h4-lg, h4.h4-xl { font-size: 1.46667rem; } /* 22px */ h3, h3.h3-md, h3.h3-lg, h3.h3-xl, h2, h2.h2-md, h2.h2-lg { font-size: 1.6rem; } /* 24px */ h2.h2-xl, h2.h2-title { font-size: 1.86667rem; } /* 28px */ h6, h5, h4, h3, h2, h1 { line-height: 1.4; } /* Paragraphs */ p.p-sm, p { font-size: 1rem; } p.p-md, p.p-lg, p.p-xl { font-size: 1.0625rem; } ol.digit-list p { margin-bottom: 5px; } /* Button */ .btn.btn-sm, .btn, .btn.btn-md, .btn.ico-20.ico-left, .btn.ico-20.ico-right { font-size: 1.1rem; padding: 0.925rem 1.45rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.125rem; padding: 0.75rem 0.9rem; } .btns-group .btn.ico-30.ico-left, .btns-group .btn.ico-30.ico-right { padding: 0.61095rem 0.5rem 0; } /* Buttons Group */ .btns-group .btn:first-child { margin: 0 0 15px; } .btns-group .btn--transparent { margin-top: -6px; } /* Button Icon */ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { font-size: 1.225rem; line-height: 0.5rem!important;top: 4px; } .btn.ico-30 [class*="flaticon-"]:before, .btn.ico-30 [class*="flaticon-"]:after { font-size: 2.3rem; } .btn.ico-30.ico-left span.ico-30-txt { font-size: 1.2rem; top: -10px; margin-right: 0; } .btn.ico-30.ico-right span.ico-30-txt { font-size: 1.2rem; top: -10px; margin-left: 0; } .btn.ico-left span { margin-right: 8px; } .btn.ico-right span { margin-left: 8px; } .btn.ico-30.ico-left span { right: 0; } /* Button Text */ p.btn-txt, p.btns-group-txt, .btn-rating { text-align: center; margin: 12px 0 0 0; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding: 0; } .text-center .btns-group { display: block; } p.p-sm.btns-group-txt, .btn-rating p.p-sm { font-size: 1rem; } .text-center p.btns-group-txt { margin-top: 18px; } .star-rating small, .star-rating span.rating-txt { font-size: 1.1rem; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1.1275rem; top: 2px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1.135rem; top: 2px; } .os-version-ext { margin-top: 12px; } .os-version-ext .star-rating small { font-size: 1rem; } span.os-version { font-size: 1rem; line-height: 1.5; margin-top: 3px; } /* Transparent Link */ a.tra-link { font-size: 1.034rem; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { font-size: 0.785rem; line-height: 0.7rem!important; top: 1px; left: 2px; } /* OS Button */ .os-btn { width: 100%; min-width: 270px; padding: 14px 20 10px; } .btn-os.d-inline-block { display: block!important; } .os-btn-ico { margin-right: 20px; } .os-btn-txt p { font-size: 1.15rem; margin-top: 1px; margin-bottom: 7px; } .os-btn-txt span { font-size: 1rem; } .d-inline-block.btn-os-last { margin-top: 12px; margin-left: 0; } .d-block.btn-os-last { margin-top: 12px; } /* Store Badge */ .store { margin-right: 3px; } .badge-img-xs .store img, .badge-img-sm .store img, .badge-img-md .store img, .badge-img-lg .store img, .badge-img-xl .store img { max-height: 3.15rem; } /* Watch Video Link */ .watch-video { margin-top: 18px; } .watch-video-link { margin-right: 10px; } p.video-txt-lg { font-size: 1.0625rem; } p.video-txt-sm { font-size: 1rem; } /* Video Popup Icon */ .video-btn-xl { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-lg { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after, .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } /* Vector Icon Background */ .ico-55 .shape-ico svg, .ico-60 .shape-ico svg { width: 120px; height: 120px; top: -45px; left: calc(50% - 62px); } /* Vector Rounded Icons */ .ico-rounded, .ico-rounded-md, .ico-rounded-lg { width: 94px; height: 94px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after, .ico-rounded-md [class*="flaticon-"]:before, .ico-rounded-md [class*="flaticon-"]:after, .ico-rounded-lg [class*="flaticon-"]:before, .ico-rounded-lg [class*="flaticon-"]:after { font-size: 3rem; line-height: 94px!important; } /* PNG Icons */ .img-80 img { width: 70px; height: 70px; } .img-75 img { width: 65px; height: 65px; } .img-70 img, .img-65 img, .img-60 img { width: 60px; height: 60px; } /* Section ID */ .section-id { font-size: 0.85rem; margin-bottom: 20px; } /* Section Title */ .section-title.mb-70 {margin-bottom: 35px; } .section-title.mb-100 { margin-bottom: 40px; } .section-title p { margin-top: 15px; } .section-title .btns-group { padding: 0 2%; margin-top: 8px; } .section-title .btns-group .btn { width: 100%; margin: 12px 0 0; } /* Advantages */ .advantages, .text-center .advantages { margin-top: 10px; } /* Compatibility */ .compatibility { margin-top: 5px; } /* Tools List / Payments Icons */ .tools-list p, .payment-methods p { margin-bottom: 12px; } .tools-list span { padding-right: 1px; } .payment-icons img { max-height: 30px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { font-size: 2.125rem;line-height: 2.125rem!important; margin-right: 4px; } /* Quote */ .quote-avatar img { width: 50px; height: 50px; } .quote p { margin-bottom: 4px; } .quote-author h6 { font-size: 1.2rem; } .quote-author span { font-size: 1.0625rem; } /* Users */ .txt-block .users { margin-top: 12px; } .users img { max-height: 44px; } .txt-block .users img { max-height: 40px; } .users p { font-size: 0.975rem; margin-top: 15px; top: 0; left: 0; } .txt-block .users p { font-size: 0.9rem; margin-top: 0; top: 10px; left: 4px; } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .cssload-spinner { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; } .cssload-spinner:after, .cssload-spinner:before { width: 46px; height: 46px; } .cssload-spinner:before { width: 68px; height: 68px; margin-left: -11px; margin-top: -11px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ /* Header Logo */ .wsmobileheader .smllogo { display: block; margin-top: 25px; padding-left: 16px; } .smllogo img { width: auto; max-width: inherit; max-height: 30px; } .wsmenu > .wsmenu-list { width: 290px; margin-right: -290px; } .wsactive .wsmobileheader { margin-right: 290px; } .overlapblackbg { width: calc(100% - 290px); } .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 16px 0 0; } /* Nav Link Info */ span.sm-info { width: 22px; height: 22px; font-size: 0.8rem; line-height: 20px; top: -1px; margin-left: 8px; } .wsmenu > .wsmenu-list > li > a { padding: 5px 32px 4px 20px; margin: 0; } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 8px; width: 8px; margin: 24px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { top: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { padding: 6px 10px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 13px 10px; } /* Header Store Badges */ .store.header-store img { max-height: 44px; } /* Header Social Links */ .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-25 [class*="flaticon-"]:after { line-height: 52px!important; } .wsmenu > .wsmenu-list > li > .wsmegamenu ul li.title { margin-top: 12px; } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .hero-app-logo img { max-height: 90px; margin-bottom: 22px; } .hero-section .btns-group { display: block; } .hero-section .btns-group .btn { display: block; padding: 1rem 1.5rem; margin: 0 10%; } .hero-section .btns-group .btn:first-child { margin-bottom: 15px; } .hero-section .store { display: block; margin: 15px 0 0; } .hero-section .os-version-ext { margin-top: 18px; } .hero-section .users p { margin-top: 20px; } /* Hero Advantages */ .hero-section .text-center .advantages { margin-top: 17px; } .hero-section .advantages li { display: block!important; margin-top: 3px; } .hero-section .advantages li p { display: block; float: none; } .hero-section li.advantages-links-divider { display: none!important; } /* HERO QUICK FORM */ .hero-section .quick-form .form-control, .hero-section .quick-form .btn { height: 52px; font-size: 1.0625rem; } .hero-section .quick-form.form-half .form-control { height: 52px; font-size: 1.0625rem; padding: 0 14px; margin-bottom: 20px; } .hero-section .quick-form.form-half .btn { height: 52px; font-size: 1.0625rem; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -10px 0; } /* HERO DIGITS */ #hd-1-1, #hd-1-2 { width: 100%; padding: 0; } #hd-1-1 { margin-bottom: 20px; } .hero-digits h2.statistic-number { font-size: 2.75rem; } .hero-digits h2.statistic-number small { font-size: 2rem; margin-left: 3px; } /* HERO-1 */ #hero-1 { padding-top: 70px; margin-bottom: 50px; } .hero-1-txt h2 { font-size: 2.175em; } .hero-1-txt p.p-lg { margin-top: 15px; margin-bottom: 5px; } .os-version-ext small, .os-version-ext .os-version { font-size: 0.95rem; } .hero-1-img { padding: 0 1%; margin-top: 40px; margin-bottom: -50px; } /* HERO-2 */ .hero-2-txt h2 { font-size: 2.125rem; } .hero-2-txt p.p-xl { margin-top: 14px; margin-bottom: 5px; } .hero-2-txt p.btn-txt { font-size: 0.975rem; } /* HERO-3 */ #hero-3 { padding-top: 70px; } .hero-3-txt h2 { font-size: 2.175rem; } .hero-3-txt p.p-xl { font-size: 1.2rem; margin-top: 15px; margin-bottom: 5px; } .hero-3-txt .btn-txt { font-size: 0.935rem; margin-top: 18px; } .hero-3-img { margin: 35px -13% 0; } /* HERO-4 */ #hero-4 { padding-top: 70px; } .hero-4-txt h2 { font-size: 2.175rem; } .hero-4-txt p.p-xl { margin-top: 15px; margin-bottom: 22px; } .hero-4-img { margin: 35px -5px 0; } /* HERO-5 */ #hero-5 { padding-top: 70px; margin-bottom: 60px; } .hero-5-txt h2 { font-size: 2.05em; } .hero-5-txt p.p-xl { margin-top: 15px; margin-bottom: 5px; } .hero-5-img { margin-top: 35px; margin-bottom: -60px; } /* HERO-6 */ #hero-6 { padding-top: 70px; } #hero-6:after { height: 7%; } .hero-6-txt h2 { font-size: 2rem; } .hero-6-txt p.p-lg { padding: 0; margin-top: 12px; margin-bottom: 22px; } .hero-6-img { margin-top: 35px; } /* HERO-7 */ .hero-7-txt { margin-bottom: 35px; } .hero-7-txt h2 { font-size: 2.175rem; margin-bottom: 5px; } .hero-7-txt .os-version-ext span { font-size: 0.9rem; } .hero-7-img { margin: 0 0 -40%; } /* HERO-8 */ #hero-8 { margin-bottom: 45px; } .hero-8-txt h2 { font-size: 2.15rem; padding: 0 5%; } .hero-8-txt p.p-lg { margin-top: 12px; margin-bottom: 20px; } .hero-8-txt .quick-form { margin: 24px 4% 0; } .hero-8-img { margin: 35px 0 -45px 0; } /* HERO-9 */ #hero-9 { padding-top: 70px; } .hero-9-txt h2 { font-size: 2.125rem; } .hero-9-txt p.p-lg { margin-top: 12px; margin-bottom: 5px; } .hero-9-img { margin-top: 35px; } /* HERO-10 */ .hero-10-txt h2 { font-size: 2.175rem; padding: 0 2%; } .hero-10-txt p.p-lg { padding: 0; margin-top: 14px; margin-bottom: 22px; } .hero-10-txt p.btn-txt { margin-top: 25px; } #hero-10 .quick-form { margin: 24px 4% 0; } .hero-10-img { margin-top: 35px; } /* HERO-11 */ .hero-11-txt h2 { font-size: 2.15rem; } .hero-11-txt p.p-lg { margin-top: 12px; margin-bottom: 5px; } .hero-11-txt .quick-form { margin: 24px 4% 0; } .hero-11-img { margin-top: 35px; } /* HERO-12 */ .hero-12-txt h2 { font-size: 1.9rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { padding: 0; margin-top: 12px; margin-bottom: 20px; } .hero-12-img { margin-top: 30px; } /* HERO-13 */ #hero-13 { margin-bottom: 60px; } .hero-13-txt h2 { font-size: 2rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 12px; margin-bottom: 5px; } .hero-13-txt .quick-form { margin: 24px 4% 0; } .hero-13-img { margin: 35px 0 -60px; } /* HERO-14 */ #hero-14 { padding-top: 80px; padding-bottom: 90px; } .hero-14-txt h2 { font-size: 2.3rem; } .hero-14-txt p.p-xl { margin-top: 12px; margin-bottom: 5px; } /* HERO-15 */ .hero-15-txt h2 { font-size: 2.4rem; } .hero-15-txt p.p-lg { margin-top: 14px; margin-bottom: 24px; } .hero-15-img { margin: 35px 0 -70px; } /* HERO-16 */ .hero-16-txt h2 { font-size: 2rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 12px; margin-bottom: 20px; padding: 0; } .hero-16-img { padding: 28px 15px 0; margin-top: 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .hero-16-img img { margin-bottom: -10px; } /* HERO-17 */ .hero-17-txt { padding: 0 4%; } .hero-17-txt h2 { font-size: 2.6rem; line-height: 1.3; } .hero-17-txt p.p-md { margin-top: 14px; margin-bottom: 5px; } .hero-17-img { margin-top: 35px; } /* HERO-18 */ .hero-18-txt h2 { font-size: 2rem; } .hero-18-txt p.p-xl { margin-top: 14px; margin-bottom: 20px; } .hero-18-img { margin-top: 10px; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-1 { margin-bottom: 30px; } .about-2-title { margin-bottom: 12px; } #a2-1 { margin-bottom: 15px; } .about-1-txt h2 { font-size: 2.15rem; margin-bottom: 12px; } .about-1-txt h4 { font-size: 1.18rem; } .about-1-img { margin-top: 35px; margin-bottom: -30px; } .about-3 .img-block.left-column, .about-3 .img-block.right-column { margin-bottom: 35px; } .about-section .accordion-1 { margin-top: -18px; } /* CAREERS */ .jobs-category { padding: 0 20px 6px; margin-bottom: 20px; } .jobs-category h4 { font-size: 1.65rem; padding-top: 20px; margin-bottom: 5px; } .career-item { padding: 14px 0; } .position-description h5 { font-size: 1.3rem; padding-right: 10%; } .position-link { top: 17px; right: 0; } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.05rem; } .more-careers { margin-top: 25px; } .more-careers-txt p span { display: block; } /* JOB POSITION */ .job-position-title { padding: 50px 15px 55px; margin: 80px -15px 25px; } .job-position-title .position-data { margin-top: 5px; } .job-position-title .position-data p.p-xl { font-size: 1.2rem; } .job-position-title .btn { font-size: 0.95rem; padding: 0.7rem 1.85rem; margin-top: 10px; } .position-info h5 { margin-top: 25px; margin-bottom: 14px; } .position-info .btn { margin-top: 16px!important; } /* FEATURES */ .features-4.pt-30, .features-5.pt-30 { margin-top: 35px; } .fbox-5-wrapper { padding: 38px 22px 44px; } .fbox-5-wrapper .section-title { margin-bottom: 30px; } .features-2 .section-title p.p-xl { font-size: 1.1rem; } .fb-1, .fb-2, .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-2 .fb-4, .rows-2 .fb-5, .row-cols-md-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-3 .fb-5, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fb-5, .rows-4 .fb-6, .fbox-4.fb-1, .fbox-4.fb-3, .fbox-4.fb-5, .fbox-4.fb-7, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 35px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3, .fbox-wrapper.left-align .rows-2 .fb-4, .fbox-wrapper.left-align .rows-2 .fb-5 { margin-bottom: 35px; } .rows-2 .fb-7 { margin-top: 35px; margin-bottom: 35px; } .fbox-3 { padding: 45px 40px 35px; } .fbox-4-txt { padding: 40px 5% 0; margin-bottom: 35px; } .fbox-4.fb-1 { display: flex; flex-wrap: wrap; } .fbox-4, .fbox-4.fb-5, .fbox-4.fb-6 { padding: 25px 20px; } .fbox-4.fb-7, .fbox-4.fb-8 { padding: 40px 20px 0; } .fbox-4.fb-1 .fbox-4-img, .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 8% 20px; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 0 0 20px; } .fbox-4.fb-7 .fbox-4-img, .fbox-4.fb-8 .fbox-4-img { margin: 25px 0 0; } .fbox-5 { padding: 35px 20px; } .fbox-5-img img { max-height: 160px; margin-bottom: 18px; } .fbox-6 .fbox-img { margin-bottom: 20px; } .fbox-img.h-175 img, .fbox-img.h-180 img { max-height: 165px; } .fbox-7 .fbox-img.h-175, .fbox-7 .fbox-img.h-180 { padding-top: 26px; margin: 0 18px 45px; } .fbox-ico, .fbox-1 .fbox-ico.ico-60 { margin-bottom: 15px; } .fbox-2 .fbox-ico-wrap.ico-55 { margin-bottom: 14px; } .fbox-ico[class*="img-"] { margin-bottom: 16px; } .fbox-wrapper .ico-50 [class*="flaticon-"]:before, .fbox-wrapper .ico-50 [class*="flaticon-"]:after, .fbox-wrapper .ico-55 [class*="flaticon-"]:before, .fbox-wrapper .ico-55 [class*="flaticon-"]:after, .fbox-wrapper .ico-60 [class*="flaticon-"]:before, .fbox-wrapper .ico-60 [class*="flaticon-"]:after { font-size: 3.65rem; } .fbox-ico-wrap .ico-40 [class*="flaticon-"]:before, .fbox-ico-wrap .ico-40 [class*="flaticon-"]:after { font-size: 3.1rem; } .fbox-wrapper .row-cols-md-2 h6,.fbox-wrapper .row-cols-md-3 h6, .fbox-2 h5, .fbox-4 h5 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 14px; margin-bottom: 10px!important; } .fbox-4-txt h2 { margin: 0 3%; margin-bottom: 12px; } .fbox-4-txt h3.h3-xl, .fbox-5 h5 { margin-bottom: 12px; } .fbox-4-txt h3.h3-lg { margin: 0 2%; font-size: 1.6rem; margin-bottom: 12px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 14px; } .fbox-1 p { padding: 0 2%; } .rows-2 .fbox-1 p { padding: 0; } .features-2-download { margin-top: 45px; } .features-2-download p.p-sm { font-size: 0.95rem; padding: 0 5%; margin-top: 18px; } .features-2-download p.p-sm br { display: none; } /* CONTENT */ .ct-07, .ct-08, .ct-09 { padding: 70px 0; } .bc-02 .container { max-width: 100%; } .bc-02.pt-30 .container, .bc-02.pb-30 .container { max-width: auto; } .bc-02-wrapper { margin: 0 -15px; border-radius: 0 0!important; } .bc-02.pt-30 .bc-02-wrapper, .bc-02.pb-30 .bc-02-wrapper { margin: 0; border-radius: 12px!important; } .bc-02.pt-30.ws-wrapper, .bc-02.pb-30.ws-wrapper { padding-top: 35px; } .bc-02.pt-30.bc-02-top { padding-top: 20px; margin-top: 50px; } .bc-04-wrapper { padding: 10px 10px 35px; } .ct-05 .section-title, .ct-06 .section-title, .bc-03-wrapper .section-title { margin-bottom: 30px; } .bc-03-wrapper .section-title { margin-bottom: 25px; } .bc-03-wrapper .section-title h2 { font-size: 1.86667rem; } .bc-03 .section-title p { margin-top: 12px; } .ct-05.pt-100, .ct-06 .section-overlay { margin-bottom: 40px; } .bc-01 .section-overlay, .bc-02 .section-overlay { padding: 70px 20px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 35px 18px; } .bc-03 .section-overlay { padding: 70px 20px 0; } .txt-box, .bc-1-wrapper .txt-box { margin-bottom: 15px; } .txt-block-stat.mt-30, .txt-block-stat.mt-35 { margin-top: 18px; } .bc-04 .txt-block { padding: 0 8px; } .txt-block h3, .txt-block h2, .txt-block h5, .bc-02 .txt-block h5 { margin-bottom: 14px; } h5.h5-title { margin: 14px 0; } .txt-block .btn, .txt-block .stores-badge { margin-top: 20px; } .txt-block .btns-group .btn.btn--transparent, .txt-block-tra-link { margin-top: 16px; } .cbox-1 .ico-wrap { margin-right: 0.9rem; } .cbox-1-ico { width: 1.55rem; height: 1.55rem; font-size: 0.95rem; line-height: 1.2rem; margin-top: 5px; } .cbox-2 .cbox-2-ico { margin-bottom: 12px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-3-ico span[class*="flaticon-"]:after { font-size: 3.25rem; } .cbox-3 { text-align: center; } .cbox-title { margin-bottom: 10px; } .cbox-title span {display: block; float: none; line-height: 1!important; margin: 0 0 14px 0; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 3rem; } .cbox-1-txt { margin-bottom: 20px; } .cbox-2-txt { margin-bottom: 30px; } .cbox-3-txt { margin-bottom: 30px; } .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 12px!important; } .cbox-2-txt p { padding: 0 2%; } .cbox-4-wrapper { margin-top: 0; } .box-title { margin-bottom: 14px; } .cbox-4.cb-2 { margin-top: 15px; } .box-title span { top: 10px; left: 3px; right: 0; } .box-title h6 { position: relative; top: 2px; left: 8px; } .cbox-5 { width: 320px; min-width: 320px; padding: 12px 17px; } .cbox-5.cb-1 { margin: 8px 0 20px; } .cbox-5-ico span { position: relative; top: 3px; } .cbox-5-txt { padding-left: 11px; } .cbox-5-txt h6 { font-size: 1.26667rem; margin-bottom: 0; } .cbox-6-wrapper { margin-bottom: 55px; } .cbox-6 { padding: 25px 24px; } .cbox-6 hr { margin-top: 25px; margin-bottom: 15px; } .cbox-6 h2.statistic-number { font-size: 2.65rem; } .cbox-6 .statistic-number sup { font-size: 2.15rem; top: -5px; right: 0; margin-right: 5px; } .cbox-6-txt.mt-30 { margin-top: 20px; } .cbox-6-data { padding: 11px 17px; } .cbox-6-data.mt-25 { margin-top: 15px; } .cb-shape-1 { right: -75px; top: -20px; } .cb-shape-2 { left: -20px; bottom: -20px; } .cb-shape-1 img, .cb-shape-2 img { width: 50%; height: 50%; } .cbox-7-txt { padding-left: 10px; } .cbox-7-ico { margin-top: 1px; } .cbox-7-ico { width: 22px; height: 22px; margin-top: 1px; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 20px; } .cbox-7-txt p { margin-bottom: 10px; } .txt-block .accordion-1 .accordion-item { padding: 18px 0 23px; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.8rem; line-height: 30px; top: -3px; right: 0; } .txt-block .accordion-1 .accordion-thumb h5 { padding-left: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 18px; } .txt-block .accordion-1 .accordion-panel { padding: 0; } .tabs-1 li { padding: 16px 20px; } .tab-link p { margin-top: 6px; } /* Content Images */ .bc-4-img { margin-bottom: 30px; } .content-section .container.hidd { overflow: visible!important; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -40px; } .img-block-txt { margin-top: 30px; } .img-block-btn { padding: 0 2%; margin-top: 30px; } .img-block-btn .btn { width: 100%; } /* STATISTIC */ .statistic-2.py-80 { padding: 70px 0; } .statistic-4-wrapper { padding: 0 6%; } .statistic-2-wrapper .txt-block { margin-bottom: 35px; } #sb-1-1, #sb-1-2, #sb-2-1 { margin-bottom: 35px; } #sb-3-2 { padding-left: 4%; } #sb-4-1, #sb-4-2 { padding-bottom: 35px; margin-bottom: 35px; } h3.statistic-number { font-size: 2.6rem; line-height: 1; letter-spacing: -1px; } h2.statistic-number { font-size: 2.75rem; line-height: 1; letter-spacing: -1px; } .statistic-2-wrapper h2 { margin-bottom: 12px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { font-size: 2.25rem; letter-spacing: -0.5px; margin-bottom: 12px; } .statistic-2 .txt-block h3 { padding: 0 3%; } .statistic-4-wrapper h5 { margin: 20px 0 12px; } #sb-2-1 br { display: none; } #sb-2-2 { clear: both; } #sb-2-2 .txt-block-rating { display: inline-block; } #sb-2-2 p { display: inline-block; margin-left: 5px; } /* RATING */ #rb-2-1 { margin-bottom: 25px; } #rb-2-2 { margin-bottom: 20px; } .rating-title { padding: 0 10%; } .rating-title h5 { font-size: 1.125rem; } .rbox-1-img { margin-bottom: 14px; } .rbox-1-img img { max-height: 32px; } .rbox-2-img img { max-height: 70px; } #rb-2-2 .rbox-2-img img { max-height: 120px; } .rbox-2 p { font-size: 1.1rem; margin-top: 15px; } .rbox-1 .star-rating { padding: 5px 16px; font-size: 1rem; line-height: 1; } .rbox-1 .star-rating span { top: -2px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /* TESTIMONIALS */ .reviews-3-wrapper:after { width: 140%; height: 94%; top: 3%; left: -20%; } .review-1 { padding: 22px 22px 27px; } .review-1.no-title { padding: 37px 22px 27px; } .review-2 { padding: 0; } .review-3 { padding: 35px 25px 25px; } #rw-3-1, #rw-3-2, #rw-3-3 { margin-bottom: 25px; } .review-item { margin-bottom: 25px; } .review-4 { padding: 30px 25px; } .review-ico.ico-45 { top: 10px; right: 16px; } .review-ico.ico-60 { top: 10px; left: 16px; } .review-2 .review-avatar { margin: 16px auto 9px; float: none; } .review-avatar img, .owl-item .review-avatar img, .review-3 .review-avatar img { width: 45px; height: 45px; } .reviews-2 .owl-carousel .owl-item img { display: inline-block; } .review-2 .review-avatar img { width: 50px; height: 50px; } .author-data .review-author { padding: 0 0 0 12px; } .review-4-txt .author-data { display: inline-block; margin-top: 3px; } .review-4-txt .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } .review-2 .author-data .review-author { text-align: center; padding: 0; } .review-author.mt-15 { margin-top: -2px; } .review-author h6 { font-size: 1.1rem; margin-top: 3px; margin-bottom: 7px; } .review-author h6 span, .review-author p { font-size: 1rem; } .reviews-btn { margin-top: 40px; } /* TEAM */ .team-1 { padding-bottom: 30px; } .team-member-photo { margin-bottom: 25px; } .team-member-data h6 { font-size: 1.4666rem; } .team-member-data p { font-size: 1.1rem; } /* PRICING */ .pricing-1-table { padding: 30px; } .pricing-2-table, .pricing-3-table { padding: 25px 28px; } .pricing-table-header h5 { font-size: 1.47435rem!important; } .pricing-1-table .pricing-table-header h5 { margin-bottom: 20px; } .p-table p.btn-txt { margin: 10px 0 0 0; } .pricing-discount { top: 0; right: 0; padding: 7px 13px; } .pricing-discount h6 { font-size: 0.975rem; } /* Price */ .price span { font-size: 2.564102rem; letter-spacing: -1.5px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.564102rem; } .price sup { font-size: 1.9230769rem; top: -4px; } .pricing-2-table .price sup, .pricing-3-table .price sup { font-size: 1.9230769rem; top: -4px; right: 2px; } .price sup.validity { font-size: 1.282051rem; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.5rem; } .pt-btn { margin-top: 20px; } /* Pricing Features */ .pricing-features.mt-25 { margin-top: 15px; } .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { text-align: center; margin-top: 12px; } .pricing-features li, .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 10px 8px; } /* Pricing Notice */ .pricing-notice.mb-40 { margin-bottom: 30px; } .col-lg-9 .pricing-notice p, .col-lg-10 .pricing-notice p { padding: 0; } /* Pricing Compare */ .table-responsive.mb-50 { margin-bottom: 30px; } .comp-table-rouded { padding: 10px 10px 0; } .table>:not(caption)>*>* { padding: 9px 0; } .comp-table .table-responsive thead th { font-size: 0.9rem; } .comp-table .table-responsive tbody th { font-size: 0.815rem; line-height: 1.25; } .comp-table .table-responsive tbody td { font-size: 0.85rem; top: 0; line-height: 1.25; } .comp-table .table-responsive tbody td span { top: 3px; } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.675rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.835rem; } .pbox { padding: 0; } #pbox-1, #pbox-2 { margin-bottom: 25px; } .pricing-section .txt-box-las, .pricing-section .pm-lastt { margin-bottom: 40px; } .comp-table-payment h6 { margin-bottom: 12px; } /* INTEGRATIONS */ .integrations-2.pt-100.pb-70 { padding-bottom: 50px; } .int-2-wrapper .col { padding: 0 10px; } .integrations-1 .container { max-width: 100%; } .int-1-wrapper { padding: 70px 22px; margin: 0 -15px; border-radius: 0 0!important; } .integrations-1 .section-title h2 { padding: 0 2%; } .filter-btns button { font-size: 1.125rem; } .int_tool-1 { margin-bottom: 30px; } .int_tool-2 { padding: 26px 14px; margin-bottom: 20px; } .int_tool-3 { padding: 16px 26px 18px; } .int_tool-1 .tool_logo { padding: 35px 25px; margin-bottom: 20px; } .int_tool-1 img, .int_tool-2 img { width: 55px; height: 55px; } .tool_txt h6 { font-size: 1.325rem; line-height: 1; margin-top: 2px; } .tool_logo h6 { font-size: 1.325rem; } .int_tool-2 h6 { font-size: 1.25rem; margin-top: 18px; } .tool_txt p { font-size: 1.0625rem; margin-top: 5px; } .integrations-section .more-btn.mt-30 { margin-top: 22px; } .integrations-1 .more-btn { margin-top: 18px; } /* MORE APPS */ .ab-1, .ab-2, .ab-3, .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4, .rows-2 .ab-5, .rows-2 .ab-6 { margin-bottom: 35px; } .app-box h6, .app-box h5 { margin-top: 22px; margin-bottom: 10px; } .app-logo-img { padding: 0 5%; } /* BRANDS */ .brands-2-wrapper { padding: 0 11.7px; } .brands-2-wrapper .col { padding: 0; } .brands-title h6 { font-size: 1rem; line-height: 1.55; margin-bottom: 25px; } .brands-title h5 { font-size: 1.325rem; margin-bottom: 30px; } .brands-title p { padding: 0 5%; margin-bottom: 25px; } #brand-2-1, #brand-2-2, #brand-2-3 { margin-bottom: 35px; } .brands-carousel-5 .brand-logo, .brands-carousel-6 .brand-logo, #brands-2 .brand-logo { padding: 0 8px; } .brands-section .more-btn { margin-top: 30px; } /* CHANGELOG */ .release-data { padding-bottom: 25px; margin-bottom: 22px; } span.version-data { font-size: 1.4rem; line-height: 1.4; margin-bottom: 12px; } span.release-date { font-size: 1.05rem; } .release-highlights h6 { font-size: 1.275rem; margin-bottom: 15px; } .release-preview { margin-bottom: 18px; } /* DOWNLOAD */ #di-3 { margin-bottom: 30px; } .download-item { margin-right: 1%; margin-left: 1%; } .download-item h6 { font-size: 1.5rem; } .download-item p { font-size: 1.125rem; } /* FAQs */ .faqs-1 .section-title { margin-bottom: 25px; } .faqs-2 .section-title { margin-bottom: 35px; } .faq-3-title { margin-bottom: 20px; } .faq-3-title p { font-size: 1.05rem; margin-top: 12px; margin-bottom: 18px; } .faqs-2 .question h6, .faqs-2 .question h5 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 12px; } .faqs-section .accordion-thumb h5, .faqs-section .accordion-thumb h6 { font-size: 1.25rem; line-height: 1.5; padding-right: 12%; } .faqs-section .accordion-thumb { padding: 15px 0 20px; } .faqs-section .accordion-panel { padding: 0 0 10px 0; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.8rem; line-height: 30px; top: 15px; right: 0; } .faqs-2 .more-questions { margin-top: 15px; } .more-questions h6 { font-size: 1.325rem; padding: 0 4%; margin-bottom: 12px; } .more-questions p { font-size: 1.0625rem; padding: 0 5%; } .more-questions-btn { display: block; margin: 14px 0 0; } /* BANNER */ .banner-1 .container { max-width: 100%; } .banner-1-wrapper { padding: 65px 18px 70px; margin: 0 -15px; border-radius: 0 0!important; } .banner-2-wrapper .banner-overlay { padding: 55px 20px 65px; } .banner-4-wrapper { padding: 50px 8%; } .banner-5-wrapper .banner-overlay { padding: 60px 25px 0; } .banner-4-txt { margin-bottom: 8px; } .banner-1-txt h2 { font-size: 1.85rem; padding: 0 6%; } .banner-2-txt h2, .banner-4-txt h4, .banner-5-txt h2 { font-size: 1.73334rem; } /* 26px; */ .banner-1-txt p.p-md, .banner-1-txt p.p-lg { margin: 12px 0 3px; padding: 0 5%; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 4%; margin: 15px 0 20px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { padding: 0 5%; margin-top: 14px; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 14px; margin-bottom: 18px; } .banner-1-txt .store { display: block; margin: 15px 0 0; } .banner-1-txt .btn { margin-top: 15px; } .banner-1-txt .os-version-ext .star-rating small { display: block; margin-left: 0; } .banner-2-txt .btn, .banner-5-txt .btn { width: auto; } .banner-3-txt .btn.mt-25 { width: auto; margin-top: 18px; } .banner-3-txt .btn.mt-35 { width: auto; margin-top: 24px; } .banner-section .store { display: block; margin-right: 0; } .banner-section .store.store-btn-2 { margin-top: 15px; } .banner-section p.btn-txt { padding: 0; margin-top: 14px; margin-bottom: 0!important; } .banner-2-txt p.btn-txt, .banner-5-txt p.btn-txt { font-size: 0.95rem; } .banner-5-img.right-column, .banner-5-img.left-column { margin: 35px 0 -20%; } /* NEWSLETTER */ .newsletter-2 .container { max-width: 100%; } .newsletter-1 .newsletter-overlay { padding: 50px 0 40px; } .newsletter-2 .newsletter-overlay { padding: 65px 25px; margin: 0 -15px; border-radius: 0 0!important; } .newsletter-3 .newsletter-overlay { margin: 0 2%; padding: 40px 4% 25px; } .newsletter-4 .newsletter-overlay { padding: 65px 0; } .newsletter-txt h4, .newsletter-txt h3 { font-size: 1.6666rem; padding: 0; margin-bottom: 25px; } .newsletter-3 .newsletter-txt h4 { font-size: 1.55rem; margin-bottom: 20px; } .newsletter-2 .newsletter-txt p { font-size: 0.95rem; padding: 0 4%; margin-bottom: 0; } .newsletter-4 .newsletter-txt p { font-size: 0.95rem; padding: 0 6%; margin-bottom: 0; } .newsletter-1 .newsletter-form { padding: 0 3%; } .newsletter-2 .newsletter-form { padding: 0 3%; margin-top: 30px; } .newsletter-3 .newsletter-form { padding: 0 3%; } .newsletter-4 .newsletter-form { padding: 0 6%; margin-top: 30px; } .newsletter-section .form-control, .newsletter-section .btn { height: 52px; font-size: 1.0625rem; } .newsletter-2.newsletter-section .btn, .newsletter-4.newsletter-section .btn { font-size: 1.0625rem; } /* BLOG */ .blog-1.pb-60 { padding-bottom: 35px; } .blog-1 .blog-post { margin-bottom: 35px; } .blog-post-txt { padding: 0 15px; margin-top: 30px; } .blog-post-meta, .wide-post .blog-post-meta { margin-top: 16px; } .post-tag { font-size: 0.85rem; margin-bottom: 16px; } .blog-post-txt h4, .blog-post-txt h6, .blog-post-txt h5 { margin-bottom: 14px; } /* BLOG LISTING */ #blog-page.pb-40 { padding-bottom: 35px; } #blog-page .blog-post { margin-bottom: 35px; } #blog-page .blog-post.wide-post { margin-bottom: 15px; } .wide-post .blog-post-img { margin-bottom: 35px; } .posts-category { margin-top: 30px; margin-bottom: 30px; } /* SINGLE BLOG POST */ .blog-post-preview, .single-post-title { margin-bottom: 25px; } .single-post-title .blog-post-meta { margin-bottom: 10px; } .single-post-title h2 { margin-bottom: 14px; } .single-post-txt h6 { font-size: 1.25rem; margin-bottom: 10px; } .single-post-txt h5.h5-xl { font-size: 1.5rem; margin-top: 26px; margin-bottom: 14px; } .single-post-txt h5 { margin-top: 15px; margin-bottom: 14px; } .post-inner-img { margin-top: 25px; margin-bottom: 25px; } .post-data { margin: 40px 0 0; padding: 40px 0 70px; } .post-author-avatar { margin-right: 16px; } .post-author-avatar img { width: 55px; height: 55px; } .post-author-txt { top: 2px; } .post-author-txt p { margin-top: 5px; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.525rem; } .share-social-icons a.share-ico span { margin-right: 10px; } /* CONTACTS */ .contacts-1.pb-40 { padding-bottom: 20px; } .contacts-1 .section-title p { padding: 0 2%; } .contacts-1 .contact-form p { font-size: 1rem; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.975rem; margin-top: 25px; } .contact-form .form-control, .contact-form .form-select { height: 50px; font-size: 1.0625rem; padding: 0 15px;margin-bottom: 26px; } .contact-form textarea { min-height: 150px; } .contact-form textarea.form-control { padding: 15px; } .contact-form .form-btn .btn { font-size: 1.1rem; padding: 0.95rem 1.8rem; } .contact-form-msg { margin-top: 15px; } /* FOOTER */ .footer { padding-bottom: 30px; } .footer-data-logo { margin-bottom: 20px; } .footer-data-socials.text-end { margin-bottom: 40px; } .footer-info { margin-bottom: 35px; } .footer-1 .footer-contacts { margin-top: -5px; } .footer-links { margin-bottom: 25px; } .footer-3 .footer-connect { margin-top: 5px; margin-bottom: 25px; } .footer-form { margin-bottom: 10px; } .footer-1 .footer-form { margin-top: 35px; } .fl-1, .fl-2, .fl-3, .fl-4, .footer-1 .fl-5 { border-bottom: 1px solid #ddd; margin-bottom: 15px; padding-bottom: 16px; } .footer-1 .fl-3 { margin-bottom: 16px; } img.footer-logo { max-height: 30px; margin-bottom: 25px; } .footer-data-logo img.footer-logo { max-height: 32px; margin-bottom: 0; } .footer-2 img.footer-logo { margin-bottom: 0; } .footer-copyright-logo img.footer-logo { max-height: 28px; } .footer h6 { font-size: 1.2rem; margin-bottom: 20px; } /* 18px */ .footer .footer-links h6.h6-lg { font-size: 1.275rem; margin-bottom: 18px; } .footer-mail-link { margin: 0 0 0 8px; } .footer-mail-link a { font-size: 1.1rem; } /* 16.5px */ .footer-mail-link span { top: 4.5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.275rem; } .footer-stores-badge { margin-bottom: 20px; } .footer-stores-badge .store { margin-right: 10px; } .footer .badge-img-xs .store img { max-height: 2.75rem; } .footer-info-socials li { padding-right: 13px; } .footer-info-socials.ico-20 [class*="flaticon-"]:before, .footer-info-socials.ico-20 [class*="flaticon-"]:after, .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.45rem; } .footer-socials a { margin-right: 13px; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.5rem; } .footer-1 .footer-form { margin-bottom: 0; } .footer-form .form-control { font-size: 1.0625rem; } .footer-form .form-control, .footer-form .btn { height: 36px; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { font-size: 1.0625rem; line-height: 26px!important; } .footer-1 .bottom-footer { margin-top: 20px; } .footer-copyright p, .bottom-footer-list p.p-sm, .bottom-secondary-link p.p-sm { font-size: 1rem; } .footer-list-divider { top: 0; } .bottom-secondary-link p span { top: 1.5px; padding: 0 2px; } .footer-info-copyright p span { top: 2px; padding: 0 2px; } .bottom-foo-socials { margin-left: 6px; } .bottom-foo-socials li { margin-right: 6px; } .footer-data-socials li { padding-right: 8px; } .bottom-foo-socials li span { top: 2.5px; right: 3px; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.5rem; } .bottom-foo-socials.ico-10 [class*="flaticon-"]:before, .bottom-foo-socials.ico-10 [class*="flaticon-"]:after { font-size: 1.125rem; } .footer-info-copyright.ico-15 [class*="flaticon-"]:before, .footer-info-copyright.ico-15 [class*="flaticon-"]:after { font-size: 0.815rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.375rem; } /* INNER PAGE WRAPPER */ .inner-page-title { margin-bottom: 40px; } .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1.6666; margin-top: 12px; } /* PAGE PAGINATION */ .page-link { font-size: 0.95rem; padding: 2px 10px; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.75rem; } /* TERMS, PRIVACY, COOKIES */ .txt-block.legal-info h5 { margin: 30px 0 15px; } .txt-block.legal-info h6 { margin: 15px 0; } /* SIGN IN / SIGN UP */ .register-page-logo { padding-top: 70px; } .register-page-logo img { max-height: 26px; } .register-page-form { padding: 30px 0 70px; } .reset-page-wrapper { margin: 0; padding: 115px 0 70px; } .register-form-title { margin-bottom: 25px; } .register-form-title h4, .reset-form-title h5 { font-size: 1.75rem; } .register-form-title p { font-size: 1.125rem; margin-top: 5px; } .reset-form-title { margin-bottom: 17px; } .reset-form-title p.p-sm { font-size: 1rem; margin-top: 10px; } .reset-password-link p { font-size: 0.975rem; margin-bottom: 28px; } .form-data span { font-size: 0.925rem; } .register-page-form p.create-account { font-size: 1.0625rem; margin-top: 25px; } .reset-password-form .form-data p { font-size: 1.1rem; margin: 22px 0 10px; } .separator-line { font-size: 1rem; margin: 20px 0; } .reset-page-wrapper .form-control, .register-page-form .form-control { height: 50px; font-size: 1.0625rem; margin-bottom: 22px; } #login .register-page-form .btn.submit { height: 50px; font-size: 1.0625rem; margin-top: 0; } #signup .register-page-form .btn.submit { height: 50px; font-size: 1.0625rem; margin-top: 25px; } .reset-page-wrapper .btn.submit { height: 50px; font-size: 1.0625rem; } .register-page-form .btn-google { font-size: 1.05rem; padding: 0.9rem 1.6rem; } .btn-google img { width: 22px; height: 22px; right: 4px; } /* COOKIES */ #cookies { width: 94%; left: 3%; bottom: 12px; padding: 15px 45px 44px 20px; } #cookies p { font-size: 0.925rem; } #cookies-ok { right: 5%; bottom: 16px; font-size: 0.85rem; padding: 5px 20px; } #cookies-info { margin-left: 0; } #cookies-close { right: 14px; top: 4px; } #cookies-close svg { width: 11px; height: 11px; } /* MODAL */ .modal-dialog.modal-xl { width: 320px; margin: auto auto; } .modal-body-content { padding: 30px 10px 14px; } .modal .btn-close { right: 15px!important; top: 15px!important; } .modal-body-content h4 { font-size: 1.6rem; margin-bottom: 10px; } .modal-body .newsletter-form { margin-top: 15px; } .modal .newsletter-form .form-control { height: 52px; font-size: 1.0625rem; margin-bottom: 16px; } .modal .newsletter-form .btn { height: 52px; font-size: 1.0625rem; } } /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */ @media (max-width: 320.98px) { html { font-size: 87.5%; } /*------------------------------------------*/ /* BASE /*------------------------------------------*/ #stlChanger { display: none; } .division { padding-left: 0; padding-right: 0; } .ts-0 { padding-top: 80px; } .bg--fixed { width: auto; } .bg--scroll { width: auto; background-attachment: scroll!important; } /* Background Shape */ .bg--shape:after { width: 1100px; height: 1100px; top: 12%; left: -10%; } .py-40 { padding: 30px 0; } .py-50 { padding: 35px 0; } .py-60 { padding: 40px 0; } .py-70 { padding: 40px 0; } .py-80 { padding: 40px 0; } .py-90 { padding: 50px 0; } .py-100 { padding: 60px 0; } .pt-40 { padding-top: 30px; } .pt-50 { padding-top: 35px; } .pt-60 { padding-top: 40px; } .pt-70 { padding-top: 40px; } .pt-80 { padding-top: 40px; } .pt-90 { padding-top: 50px; } .pt-100 { padding-top: 60px; } .pb-40 { padding-bottom: 30px; } .pb-50 { padding-bottom: 35px; } .pb-60 { padding-bottom: 40px; } .pb-70 { padding-bottom: 40px; } .pb-80 { padding-bottom: 40px; } .pb-90 { padding-bottom: 50px; } .pb-100 { padding-bottom: 60px; } .mt-30 { margin-top: 24px; } .mt-40 { margin-top: 30px; } .mt-45 { margin-top: 30px; } .mt-50 { margin-top: 35px; } .mt-55 { margin-top: 35px; } .mt-60 { margin-top: 40px; } .mt-65 { margin-top: 40px; } .mt-70 { margin-top: 40px; } .mt-75 { margin-top: 40px; } .mt-80 { margin-top: 40px; } .mb-30 { margin-bottom: 24px; } .mb-40 { margin-bottom: 30px; } .mb-45 { margin-bottom: 30px; } .mb-50 { margin-bottom: 35px; } .mb-55 { margin-bottom: 35px; } .mb-60 { margin-bottom: 40px; } .mb-65 { margin-bottom: 40px; } .mb-70 { margin-bottom: 40px; } .mb-75 { margin-bottom: 40px; } .mb-80 { margin-bottom: 40px; } /* Headers */ h6, h6.h6-md, h6.h6-lg, h6.h6-xl { font-size: 1.35714rem; } /* 19px */ h5, h5.h5-md, h5.h5-lg, h5.h5-xl, h4, h4.h4-md, h4.h4-lg, h4.h4-xl { font-size: 1.42857rem; } /* 20px */ h3, h3.h3-md, h3.h3-lg, h3.h3-xl, h2, h2.h2-md, h2.h2-lg { font-size: 1.57143rem; } /* 22px */ h2.h2-xl, h2.h2-title { font-size: 1.75rem; } /* 24.5px */ h6, h5, h4, h3, h2, h1 { line-height: 1.4; } /* Paragraphs */ p.p-sm, p { font-size: 1rem; } p.p-md, p.p-lg, p.p-xl { font-size: 1.0625rem; } ol.digit-list p { margin-bottom: 5px; } /* Button */ .btn.btn-sm, .btn, .btn.btn-md, .btn.ico-20.ico-left, .btn.ico-20.ico-right { font-size: 1.1rem; padding: 1rem 1.45rem; } .btn.ico-25.ico-left, .btn.ico-25.ico-right { font-size: 1.15rem; padding: 0.75rem 0.9rem; } .btns-group .btn.ico-30.ico-left, .btns-group .btn.ico-30.ico-right { padding: 0.391175rem 0.5rem 0; } /* Buttons Group */ .btns-group .btn:first-child { margin: 0 0 12px; } .btns-group .btn--transparent { margin-top: -5px; } /* Button Text */ p.btn-txt, p.btns-group-txt, .btn-rating { text-align: center; margin: 10px 0 0 0; } p.btn-txt.ico-15, p.btns-group-txt.ico-15 { padding: 0; } .text-center .btns-group { display: block; } .text-center p.btns-group-txt { margin-top: 18px; } .btn-rating p.p-sm { font-size: 1rem; } .star-rating small, .star-rating span.rating-txt { font-size: 1.1rem; } .star-rating.ico-15 [class*="flaticon-"]:before, .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1.125rem; top: 2px; } .star-rating.ico-20 [class*="flaticon-"]:before, .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 1.125rem; top: 2px; } .os-version-ext { margin-top: 12px; } .os-version-ext .star-rating small { font-size: 1rem; } span.os-version { font-size: 1rem; line-height: 1.5; margin-top: 3px; } /* Button Icon */ .btn.ico-20 [class*="flaticon-"]:before, .btn.ico-20 [class*="flaticon-"]:after { font-size: 1.15rem; line-height: 0.45rem!important; top: 3px; } .btn.ico-30 [class*="flaticon-"]:before, .btn.ico-30 [class*="flaticon-"]:after { font-size: 2.25rem; } .btn.ico-30.ico-left span.ico-30-txt { font-size: 1.2rem; top: -10px; margin-right: 0; } .btn.ico-30.ico-right span.ico-30-txt { font-size: 1.2rem; top: -10px; margin-left: 0; } .btn.ico-left span { margin-right: 5px; } .btn.ico-right span { margin-left: 5px; } .btn.ico-30.ico-left span { right: 0; } .ico-25-txt { top: -2px; } .btn.ico-25.ico-left span { margin-right: 5px; margin-left: 0; } /* Transparent Link */ a.tra-link { font-size: 1.035rem; } .tra-link.ico-20 [class*="flaticon-"]:before, .tra-link.ico-20 [class*="flaticon-"]:after { font-size: 0.785rem; line-height: 0.7rem!important; top: 1px; left: 2px; } /* OS Button */ .os-btn { width: 100%; min-width: 250px; padding: 14px 20px 10px; } .btn-os.d-inline-block { display: block!important; } .os-btn-ico { margin-right: 20px; } .os-btn-txt p { font-size: 1.15rem; margin-top: 1px; margin-bottom: 7px; } .os-btn-txt span { font-size: 1rem; } .d-inline-block.btn-os-last { margin-top: 12px; margin-left: 0; } .d-block.btn-os-last { margin-top: 12px; } /* Store Badges */ .store { margin-right: 0; } .store-btn-2 { margin-top: 10px; } .badge-img-xs .store img, .badge-img-sm .store img, .badge-img-md .store img, .badge-img-lg .store img, .badge-img-xl .store img { max-height: 3.35rem; } /* Watch Video Link */ .watch-video { margin-top: 18px; } .watch-video-link { margin-right: 8px; } p.video-txt-lg { font-size: 1.0625rem; } p.video-txt-sm { font-size: 1rem; } /* Video Popup Icon */ .video-btn-xl { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-btn-lg { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .video-btn.video-btn-xl [class^="flaticon-"]:before, .video-btn.video-btn-xl [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after, .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } /* Vector Icon Background */ .ico-55 .shape-ico svg, .ico-60 .shape-ico svg { width: 110px; height: 110px; top: -40px; left: calc(50% - 57px); } /* Vector Rounded Icons */ .ico-rounded, .ico-rounded-md, .ico-rounded-lg { width: 88px; height: 88px; } .ico-rounded [class*="flaticon-"]:before, .ico-rounded [class*="flaticon-"]:after, .ico-rounded-md [class*="flaticon-"]:before, .ico-rounded-md [class*="flaticon-"]:after, .ico-rounded-lg [class*="flaticon-"]:before, .ico-rounded-lg [class*="flaticon-"]:after { font-size: 2.85rem; line-height: 88px!important; } /* PNG Icons */ .img-80 img { width: 70px; height: 70px; } .img-75 img { width: 65px; height: 65px; } .img-70 img, .img-65 img, .img-60 img { width: 60px; height: 60px; } /* Section ID */ .section-id { font-size: 0.85rem; margin-bottom: 20px; } /* Section Title */ .section-title.mb-70 { margin-bottom: 30px; } .section-title.mb-100 { margin-bottom: 40px; } .section-title p { font-size: 1.025rem; margin-top: 12px; } .section-title .btns-group { padding: 0 4%; margin-top: 8px; } .section-title .btns-group .btn { width: 100%; margin: 12px 0 0; } /* Advantages */ .advantages, .text-center .advantages { margin-top: 10px; } /* Compatibility */ .compatibility { margin-top: 5px; } /* Tools List / Payments Icons */ .tools-list p, .payment-methods p { margin-bottom: 12px; } .tools-list span { padding-right: 1px; } .payment-icons img { max-height: 26px; } .tools-list.ico-35 [class*="flaticon-"]:before, .tools-list.ico-35 [class*="flaticon-"]:after { font-size: 2rem; line-height: 2rem!important; margin-right: 3px; } /* Quote */ .quote-avatar img { width: 50px; height: 50px; } .quote p { margin-bottom: 6px; } .quote-author h6 { font-size: 1.2rem; } .quote-author span { font-size: 1.0625rem; } /* Users */ .txt-block .users { margin-top: 10px; } .users img { max-height: 42px; } .txt-block .users img { max-height: 35px; } .users p { font-size: 0.975rem; margin-top: 15px; top: 0; left: 0; } .txt-block .users p { font-size: 0.9rem; margin-top: 0; top: 10px; left: 3px; } /*------------------------------------------*/ /* PRELOADER SPINNER /*------------------------------------------*/ .cssload-spinner { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; } .cssload-spinner:after, .cssload-spinner:before { width: 46px; height: 46px; } .cssload-spinner:before { width: 68px; height: 68px; margin-left: -11px; margin-top: -11px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ /* Header Logo */ .wsmobileheader .smllogo { display: block; margin-top: 26px; padding-left: 15px; } .smllogo img { width: auto; max-width: inherit; max-height: 28px; } .wsmenu > .wsmenu-list { width: 250px; margin-right: -250px; } .wsactive .wsmobileheader { margin-right: 250px; } .overlapblackbg { width: calc(100% - 250px); } .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 15px 0 0; } /* Nav Link Info */ span.sm-info { width: 20px; height: 20px; font-size: 0.785rem; line-height: 18px; top: -1px; margin-left: 5px; } .wsmenu > .wsmenu-list > li > a { padding: 5px 32px 4px 20px; margin: 0; } .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 8px; width: 8px; margin: 24px 18px 0px 0px; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { top: 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 { padding: 6px 10px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { padding: 13px 9px; } /* Header Store Badges */ .store.header-store img { max-height: 42px; } /* Header Social Links */ .header-socials.ico-20 [class*="flaticon-"]:before, .header-socials.ico-25 [class*="flaticon-"]:after { line-height: 52px!important; } .wsmenu > .wsmenu-list > li > .wsmegamenu ul li.title { margin-top: 12px; } /*------------------------------------------*/ /* HERO /*------------------------------------------*/ .hero-section .hero-app-logo img { max-height: 84px; margin-bottom: 20px; } .hero-section .btns-group { display: block; } .hero-section .btns-group .btn { display: block; padding: 1rem 1.5rem; margin: 0 10%; } .hero-section .btns-group .btn:first-child { margin-bottom: 12px; } .hero-section .store { display: block; margin: 15px 0 0; } .hero-section .os-version-ext { margin-top: 16px; } .hero-section .users p { margin-top: 18px; } /* Hero Advantages */ .hero-section .text-center .advantages { margin-top: 15px; } .hero-section .advantages li { display: block!important; margin-top: 3px; } .hero-section .advantages li p { display: block; float: none; } .hero-section li.advantages-links-divider { display: none!important; } /* HERO QUICK FORM */ .hero-section .quick-form .form-control, .hero-section .quick-form .btn { height: 48px; font-size: 1.1rem; } .hero-section .quick-form.form-half .form-control { height: 48px; font-size: 1.1rem; padding: 0 14px; margin-bottom: 18px; } .hero-section .quick-form.form-half .btn { height: 48px; font-size: 1.1rem; } .hero-section .text-center .quick-form-msg { margin: 20px 0 -10px 0; } /* HERO DIGITS */ #hd-1-1, #hd-1-2 { width: 100%; padding: 0; } #hd-1-1 { margin-bottom: 20px; } .hero-digits h2.statistic-number { font-size: 2.75rem; } .hero-digits h2.statistic-number small { font-size: 2rem; margin-left: 3px; } /* HERO-1 */ #hero-1 { padding-top: 70px; margin-bottom: 50px; } .hero-1-txt h2 { font-size: 2.125em; } .hero-1-txt p.p-lg { margin-top: 13px; margin-bottom: 5px; } .os-version-ext small, .os-version-ext .os-version { font-size: 0.915rem; } .hero-1-img { padding: 0 2%; margin-top: 35px; margin-bottom: -50px; } /* HERO-2 */ #hero-2 { padding-top: 70px; padding-bottom: 80px; } .hero-2-txt h2 { font-size: 2rem; } .hero-2-txt p.p-xl { margin-top: 14px; margin-bottom: 5px; } .hero-2-txt p.btn-txt { font-size: 0.95rem; } /* HERO-3 */ #hero-3 { padding-top: 70px; } .hero-3-txt h2 { font-size: 2.125rem; } .hero-3-txt p.p-xl { font-size: 1.2rem; margin-top: 15px; margin-bottom: 5px; } .hero-3-txt .btn-txt { font-size: 0.915rem; margin-top: 18px; } .hero-3-img { margin: 35px -12% 0; } /* HERO-4 */ #hero-4 { padding-top: 70px; } .hero-4-txt h2 { font-size: 2.125rem; } .hero-4-txt p.p-xl { padding: 0; margin-top: 15px; margin-bottom: 22px; } .hero-4-img { margin-top: 30px; } /* HERO-5 */ #hero-5 { padding-top: 70px; margin-bottom: 55px; } .hero-5-txt h2 { font-size: 2em; } .hero-5-txt p.p-xl { margin-top: 13px; margin-bottom: 5px; } .hero-5-img { margin-top: 35px; margin-bottom: -55px; } /* HERO-6 */ #hero-6 { padding-top: 70px; } #hero-6:after { height: 7%; } .hero-6-txt h2 { font-size: 1.85rem; } .hero-6-txt p.p-lg { padding: 0; margin-top: 12px; margin-bottom: 22px; } .hero-6-img { margin-top: 30px; } /* HERO-7 */ #hero-7 { padding-top: 70px; } .hero-7-txt { margin-bottom: 35px; } .hero-7-txt h2 { font-size: 2.1rem; margin-bottom: 5px; } .hero-7-txt .os-version-ext span { font-size: 0.9rem; } .hero-7-img { margin: 0 0 -40%; } /* HERO-8 */ #hero-8 { padding-top: 70px; margin-bottom: 40px; } .hero-8-txt h2 { font-size: 2.125rem; padding: 0 5%; } .hero-8-txt p.p-lg { margin-top: 12px; margin-bottom: 20px; } .hero-8-txt .quick-form { margin: 22px 4% 0; } .hero-8-img { margin: 30px 0 -40px 0; } /* HERO-9 */ #hero-9 { padding-top: 70px; } .hero-9-txt h2 { font-size: 2rem; } .hero-9-txt p.p-lg { margin-top: 12px; margin-bottom: 5px; } .hero-9-img { margin-top: 35px; } /* HERO-10 */ .hero-10-txt h2 { font-size: 2.125rem; padding: 0 2%; } .hero-10-txt p.p-lg { padding: 0; margin-top: 14px; margin-bottom: 22px; } .hero-10-txt p.btn-txt { margin-top: 25px; } #hero-10 .quick-form { margin: 22px 4% 0; } .hero-10-img { margin-top: 30px; } /* HERO-11 */ .hero-11-txt h2 { font-size: 2.15rem; } .hero-11-txt p.p-lg { margin-top: 12px; margin-bottom: 5px; } .hero-11-txt .quick-form { margin: 22px 4% 0; } .hero-11-img { margin-top: 35px; } /* HERO-12 */ #hero-12 { padding-top: 70px; } .hero-12-txt h2 { font-size: 1.85rem; } .hero-12-txt p.p-lg, .hero-12-txt p.p-xl { padding: 0; margin-top: 12px; margin-bottom: 20px; } .hero-12-img { margin-top: 30px; } /* HERO-13 */ #hero-13 { padding-top: 65px; margin-bottom: 55px; } .hero-13-txt h2 { font-size: 1.95rem; } .hero-13-txt p.p-lg, .hero-13-txt p.p-xl { margin-top: 12px; margin-bottom: 5px; } .hero-13-txt .quick-form { margin: 22px 4% 0; } .hero-13-img { margin: 30px 0 -55px; } /* HERO-14 */ #hero-14 { padding-top: 70px; padding-bottom: 80px; } .hero-14-txt h2 { font-size: 2.3rem; } .hero-14-txt p.p-xl { margin-top: 12px; margin-bottom: 5px; } /* HERO-15 */ .hero-15-txt h2 { font-size: 2.35rem; } .hero-15-txt p.p-lg { margin-top: 12px; margin-bottom: 22px; } .hero-15-img { margin: 30px 0 -70px; } /* HERO-16 */ .hero-16-txt h2 { font-size: 1.95rem; } .hero-16-txt p.p-lg, .hero-16-txt p.p-xl { margin-top: 12px; margin-bottom: 20px; padding: 0; } .hero-16-img { padding: 28px 15px 0; margin-top: 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .hero-16-img img { margin-bottom: -10px; } /* HERO-17 */ .hero-17-txt { padding: 0 3%; } .hero-17-txt h2 { font-size: 2.6rem; line-height: 1.3; } .hero-17-txt p.p-md { margin-top: 14px; margin-bottom: 5px; } .hero-17-img { margin-top: 35px; } /* HERO-18 */ .hero-18-txt h2 { font-size: 1.95rem; } .hero-18-txt p.p-xl { margin-top: 14px; margin-bottom: 20px; } .hero-18-img { margin-top: 10px; } /*------------------------------------------*/ /* CONTENT /*------------------------------------------*/ /* ABOUT */ .about-1 { margin-bottom: 30px; } .about-2-title { margin-bottom: 12px; } #a2-1 { margin-bottom: 14px; } .about-1-txt h2 { font-size: 2rem; margin-bottom: 12px; } .about-1-txt h4 { font-size: 1.15rem; } .about-1-img { margin-top: 30px; margin-bottom: -30px; } .about-3 .img-block.left-column, .about-3 .img-block.right-column { margin-bottom: 35px; } .about-section .accordion-1 { margin-top: -18px; } /* CAREERS */ .jobs-category { padding: 0 20px 7px; margin-bottom: 20px; } .jobs-category h4 { font-size: 1.65rem; padding-top: 20px; margin-bottom: 6px; } .career-item { padding: 13px 0; } .position-description h5 { font-size: 1.3rem; padding-right: 10%; } .position-link { top: 15px; right: 0; } .position-link.ico-25 [class*="flaticon-"]:before, .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.05rem; } .more-careers { margin-top: 25px; } .more-careers-txt p span { display: block; } /* JOB POSITION */ .job-position-title { padding: 40px 15px 45px; margin: 80px -15px 15px; } .job-position-title .position-data { margin-top: 5px; } .job-position-title .position-data p.p-xl { font-size: 1.2rem; } .job-position-title .btn { font-size: 0.95rem; padding: 0.7rem 1.85rem; margin-top: 10px; } .position-info h5 { margin-top: 25px; margin-bottom: 12px; } .position-info .btn { margin-top: 15px!important; } /* FEATURES */ .features-4.pt-30, .features-5.pt-30 { margin-top: 30px; } .fbox-5-wrapper { padding: 35px 15px 42px; } .fbox-5-wrapper .section-title { margin-bottom: 25px; } .features-2 .section-title p.p-xl { font-size: 1.0625rem; } .fb-1, .fb-2, .rows-2 .fb-1, .rows-2 .fb-2, .rows-2 .fb-3, .rows-2 .fb-4, .rows-2 .fb-5, .row-cols-md-2 .fb-3, .rows-3 .fb-1, .rows-3 .fb-2, .rows-3 .fb-3, .rows-3 .fb-4, .rows-3 .fb-5, .rows-4 .fb-1, .rows-4 .fb-2, .rows-4 .fb-3, .rows-4 .fb-4, .rows-4 .fb-5, .rows-4 .fb-6, .fbox-4.fb-1, .fbox-4.fb-3, .fbox-4.fb-5, .fbox-4.fb-7, .rows-4 .fbox-2.fb-1, .rows-4 .fbox-2.fb-2, .rows-4 .fbox-2.fb-3, .rows-4 .fbox-2.fb-4, .rows-4 .fbox-2.fb-5, .rows-4 .fbox-2.fb-6 { margin-bottom: 30px; } .fbox-wrapper.left-align .rows-2 .fb-1, .fbox-wrapper.left-align .rows-2 .fb-2, .fbox-wrapper.left-align .rows-2 .fb-3, .fbox-wrapper.left-align .rows-2 .fb-4, .fbox-wrapper.left-align .rows-2 .fb-5 { margin-bottom: 35px; } .rows-2 .fb-7 { margin-top: 30px; margin-bottom: 30px; } .fbox-3 { padding: 40px 35px 28px; } .fbox-4-txt { padding: 36px 6% 0; margin-bottom: 30px; } .fbox-4.fb-1 { display: flex; flex-wrap: wrap; } .fbox-4, .fbox-4.fb-5, .fbox-4.fb-6 { padding: 25px 18px 20px; } .fbox-4.fb-7, .fbox-4.fb-8 { padding: 36px 20px 0; } .fbox-4.fb-1 .fbox-4-img, .fbox-4.fb-2 .fbox-4-img, .fbox-4.fb-3 .fbox-4-img, .fbox-4.fb-4 .fbox-4-img { margin: 0 7% 20px; } .fbox-4.fb-5 .fbox-4-img, .fbox-4.fb-6 .fbox-4-img { margin: 0 0 20px; } .fbox-5 { padding: 35px 20px; } .fbox-5-img img { max-height: 155px; margin-bottom: 15px; } .fbox-5 .fbox-img { margin-bottom: 20px; } .fbox-img.h-175 img, .fbox-img.h-180 img { max-height: 150px; } .fbox-7 .fbox-img.h-175, .fbox-7 .fbox-img.h-180 { padding-top: 25px; margin: 0 18px 45px; } .fbox-ico, .fbox-1 .fbox-ico.ico-60 { margin-bottom: 15px; } .fbox-ico[class*="img-"] { margin-bottom: 16px; } .fbox-2 .fbox-ico-wrap.ico-55 { margin-bottom: 13px; } .fbox-wrapper .ico-50 [class*="flaticon-"]:before, .fbox-wrapper .ico-50 [class*="flaticon-"]:after, .fbox-wrapper .ico-55 [class*="flaticon-"]:before, .fbox-wrapper .ico-55 [class*="flaticon-"]:after, .fbox-wrapper .ico-60 [class*="flaticon-"]:before, .fbox-wrapper .ico-60 [class*="flaticon-"]:after { font-size: 3.6rem; } .fbox-ico-wrap .ico-40 [class*="flaticon-"]:before, .fbox-ico-wrap .ico-40 [class*="flaticon-"]:after { font-size: 3rem; } .fbox-wrapper .row-cols-md-2 h6, .fbox-wrapper .row-cols-md-3 h6, .fbox-2 h5, .fbox-4 h5 { margin-bottom: 12px; } .fbox-3 h6 { margin-top: 14px; margin-bottom: 10px!important; } .fbox-4-txt h2 { padding: 0 3%; margin-bottom: 12px; } .fbox-4-txt h3.h3-xl, .fbox-5 h5 { margin-bottom: 10px; } .fbox-4-txt h3.h3-lg { font-size: 1.57143rem; margin-bottom: 12px; } .fbox-4.fb-5 h5, .fbox-4.fb-6 h5 { margin-bottom: 14px; } .fbox-1 p { padding: 0 2%; } .rows-2 .fbox-1 p { padding: 0; } .features-2-download { margin-top: 40px; } .features-2-download p.p-sm { font-size: 0.95rem; margin-top: 16px; } .features-2-download p.p-sm br { display: none; } /* CONTENT */ .ct-07, .ct-08, .ct-09 { padding: 60px 0; } .bc-02 .container { max-width: 100%; } .bc-02.pt-30 .container, .bc-02.pb-30 .container { max-width: auto; } .bc-02-wrapper { margin: 0 -15px; border-radius: 0 0!important; } .bc-02.pt-30 .bc-02-wrapper, .bc-02.pb-30 .bc-02-wrapper { margin: 0; border-radius: 12px!important; } .bc-02.pt-30.ws-wrapper, .bc-02.pb-30.ws-wrapper { padding-top: 30px; } .bc-02.pt-30.bc-02-top { padding-top: 20px; margin-top: 40px; } .bc-04-wrapper { padding: 10px 10px 35px; } .ct-05.pt-100, .ct-06 .section-overlay { margin-bottom: 30px; } .bc-01 .section-overlay, .bc-02 .section-overlay { padding: 60px 20px; } .bc-02.pt-30 .section-overlay, .bc-02.pb-30 .section-overlay { padding: 30px 18px; } .bc-03 .section-overlay { padding: 60px 17px 0; } .ct-05 .section-title, .ct-06 .section-title { margin-bottom: 30px; } .bc-03-wrapper .section-title { margin-bottom: 20px; } .bc-03-wrapper .section-title h2 { font-size: 1.75rem; } .bc-03 .section-title p { margin-top: 10px; padding: 0; } .ct-05 .section-title p { font-size: 1rem; } .txt-box, .bc-01 .txt-box { margin-bottom: 15px; } .txt-block-stat.mt-30, .txt-block-stat.mt-35 { margin-top: 18px; } .bc-04 .txt-block { padding: 0 10px; } .txt-block h3, .txt-block h2, .txt-block h5, .bc-02 .txt-block h5 { margin-bottom: 12px; } h5.h5-title { margin: 12px 0; } .txt-block .btn, .txt-block .stores-badge { margin-top: 20px; } .txt-block-tra-link { margin-top: 16px; } .cbox-1 .ico-wrap { margin-right: 0.7rem; } .cbox-1-ico { width: 1.4rem; height: 1.4rem; font-size: 0.85rem; line-height: 1.1rem; margin-top: 6px; } .cbox-2 .cbox-2-ico { margin-bottom: 10px; } .cbox-2-ico span[class*="flaticon-"]:before, .cbox-2-ico span[class*="flaticon-"]:after { font-size: 3.25rem; } .cbox-3 { text-align: center; } .cbox-title { margin-bottom: 10px; } .cbox-title span {display: block; float: none; line-height: 1!important; margin: 0 0 12px 0; } .cbox-title span[class*="flaticon-"]:before, .cbox-title span[class*="flaticon-"]:after { font-size: 3rem; } .cbox-1-txt { margin-bottom: 20px; } .cbox-2-txt { margin-bottom: 30px; } .cbox-3-txt { margin-bottom: 25px; } .cbox-1-txt h5, .cbox-2-txt h5 { margin-bottom: 10px!important; } .cbox-2-txt p { padding: 0 1%; } .cbox-4-wrapper { margin-top: 0; } .box-title { margin-bottom: 14px; } .cbox-4.cb-2 { margin-top: 18px; } .box-title span { top: 10px; left: 3px; right: 0; } .box-title h6 { position: relative; top: 2px; left: 8px; } .cbox-5 { width: 100%; min-width: auto; padding: 13px 16px; } .cbox-5.cb-1 { margin: 6px 0 20px; } .cbox-5-ico span { position: relative; top: 3px; } .cbox-5-txt { padding-left: 11px; } .cbox-5-txt h6 { font-size: 1.28571rem; margin-bottom: 0; } .cbox-6-wrapper { margin-bottom: 55px; } .cbox-6 { padding: 25px 20px; } .cbox-6 hr { margin-top: 25px; margin-bottom: 15px; } .cbox-6 h2.statistic-number { font-size: 2.65rem; } .cbox-6 .statistic-number sup { font-size: 2.15rem; top: -5px; right: 0; margin-right: 5px; } .cbox-6-txt.mt-30 { margin-top: 20px; } .cbox-6-data { padding: 11px 17px; } .cbox-6-data.mt-25 { margin-top: 15px; } .cb-shape-1 { right: -70px; top: -18px; } .cb-shape-2 { left: -20px; bottom: -20px; } .cb-shape-1 img, .cb-shape-2 img { width: 50%; height: 50%; } .cbox-7-txt { padding-left: 10px; } .cbox-7-ico { margin-top: 1px; } .cbox-7-ico { width: 22px; height: 22px; margin-top: 1px; } .cbox-7-ico.ico-15 [class*="flaticon-"]:before, .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; } .cbox-7-ico span { line-height: 20px; } .cbox-7-txt p { margin-bottom: 10px; } .txt-block .accordion-1 .accordion-item { padding: 18px 0 23px; } .txt-block .accordion-1 .accordion-item .accordion-thumb:after, .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.825rem; line-height: 30px; top: -4px; right: 0; } .txt-block .accordion-1 .accordion-thumb h5 { padding-left: 0; } .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 { margin-bottom: 18px; } .txt-block .accordion-1 .accordion-panel { padding: 0; } .tabs-1 li { padding: 16px; } .tab-link p { margin-top: 6px; } /* Content Images */ .ct-01 .img-block, .ct-02 .img-block, .ct-07 .img-block, .ct-08 .img-block, .ct-09 .img-block, .ct-03 .img-block img, .ct-04 .img-block img, .bc-01 .img-block, .bc-2-img.right-column, .bc-2-img.left-column { margin: 0 0 30px; } .bc-4-img { margin-bottom: 30px; } .content-section .container.hidd { overflow: visible!important; } .img-block-hidden, .ct-06 .img-block { margin-bottom: -30px; } .img-block-txt { margin-top: 30px; } .img-block-btn { padding: 0 4%; margin-top: 30px; } .img-block-btn .btn { width: 100%; } /* STATISTIC */ .statistic-2.py-80 { padding: 60px 0; } .statistic-4-wrapper { padding: 0 5%; } #sb-1-1, #sb-1-2, #sb-2-1 { margin-bottom: 30px; } #sb-3-2 { padding-left: 4%; } #sb-4-1, #sb-4-2 { padding-bottom: 30px; margin-bottom: 30px; } h3.statistic-number { font-size: 2.6rem; line-height: 1; letter-spacing: -1px; margin-bottom: 12px; } h2.statistic-number { font-size: 2.75rem; line-height: 1; letter-spacing: -1px; margin-bottom: 12px; } .statistic-2-wrapper h2 { margin-bottom: 12px; } #sb-3-1 h2.statistic-number, #sb-3-2 h2.statistic-number { font-size: 2.35rem; letter-spacing: -0.5px; margin-bottom: 12px; } .statistic-2 .txt-block h3 { padding: 0 1%; } .statistic-4-wrapper h5 { margin: 20px 0 12px; } #sb-2-1 br { display: none; } #sb-2-2 { clear: both; } #sb-2-2 .txt-block-rating { display: inline-block; } #sb-2-2 p { display: inline-block; margin-left: 5px; } /* RATING */ #rb-2-1 { margin-bottom: 25px; } #rb-2-2 { margin-bottom: 20px; } .rating-title { padding: 0 8%; } .rating-title h5 { font-size: 1.125rem; } .rbox-1-img { margin-bottom: 14px; } .rbox-1-img img { max-height: 32px; } .rbox-2-img img { max-height: 65px; } #rb-2-2 .rbox-2-img img { max-height: 120px; } .rbox-2 p { font-size: 1.1rem; margin-top: 12px; } .rbox-1 .star-rating { padding: 5px 16px; font-size: 1rem; line-height: 1; } .rbox-1 .star-rating span { top: -2px; } .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; } /* TESTIMONIALS */ .reviews-3-wrapper:after { width: 140%; height: 94%; top: 3%; left: -20%; } .review-1 { padding: 20px 18px 25px; } .review-1.no-title { padding: 35px 18px 25px; } .review-2 { padding: 0; } .review-3 { padding: 35px 20px 25px; } #rw-3-1, #rw-3-2, #rw-3-3 { margin-bottom: 25px; } .review-item { margin-bottom: 25px; } .review-4 { padding: 30px 20px; } .review-ico.ico-45 { top: 10px; right: 16px; } .review-ico.ico-60 { top: 10px; left: 13px; } .review-2 .review-avatar { margin: 16px auto 9px; float: none; } .review-avatar img, .owl-item .review-avatar img, .review-3 .review-avatar img { width: 42px; height: 42px; } .reviews-2 .owl-carousel .owl-item img { display: inline-block; } .review-2 .review-avatar img { width: 48px; height: 48px; } .author-data .review-author { padding: 0 0 0 12px; } .review-4-txt .author-data { display: inline-block; margin-top: 0; } .review-4-txt .author-data.mb-15 { margin-top: 0; margin-bottom: 12px; } .review-2 .author-data .review-author { text-align: center; padding: 0; } .review-author.mt-15 { margin-top: -2px; } .review-author h6 { font-size: 1.1rem; margin-top: 2px; margin-bottom: 7px; } .review-author h6 span, .review-author p { font-size: 1rem; } .reviews-btn { margin-top: 35px; } /* TEAM */ .team-1 { padding-bottom: 30px; } .team-member { margin-bottom: 30px; } .team-member-photo { margin-bottom: 22px; } .team-member-data h6 { font-size: 1.5rem; } .team-member-data p { font-size: 1.1rem; } /* PRICING */ .p-table, #pt-3-1, #pt-3-2 { margin-bottom: 30px; } .pricing-1-table { padding: 28px 30px; } .pricing-2-table, .pricing-3-table { padding: 25px; } .pricing-table-header h5 { font-size: 1.4285714rem!important; } .pricing-1-table .pricing-table-header h5 { margin-bottom: 18px; } .p-table p.btn-txt { margin: 10px 0 0 0; } .pricing-discount { top: 0; right: 0; padding: 7px 13px; } .pricing-discount h6 { font-size: 1rem; } .pricing-1-table hr { margin-top: 20px; } /* Price */ .price span { font-size: 2.85rem; letter-spacing: -1.5px; } .pricing-2-table .price span, .pricing-3-table .price span { font-size: 2.85rem; } .price sup, .pricing-2-table .price sup, .pricing-3-table .price sup { font-size: 2.4rem; top: -2px; } .price sup.validity { font-size: 1.285714rem; } .pricing-2-table .price sup.validity, .pricing-3-table .price sup.validity { font-size: 1.6rem; } .pt-btn { margin-top: 18px; } /* Pricing Features */ .pricing-features.mt-25 { margin-top: 15px; } .pricing-2-table .pricing-features, .pricing-3-table .pricing-features { text-align: center; margin-top: 12px; } .pricing-features li, .pricing-2-table .pricing-features li, .pricing-3-table .pricing-features li { padding: 9px 8px; } /* Pricing Notice */ .pricing-notice.mb-40 { margin-bottom: 20px; } .col-lg-9 .pricing-notice p, .col-lg-10 .pricing-notice p { padding: 0; } /* Pricing Compare */ .table-responsive.mb-50 { margin-bottom: 30px; } .comp-table-rouded { padding: 10px 10px 0; } .table>:not(caption)>*>* { padding: 9px 0; } .comp-table .table-responsive thead th { font-size: 0.9rem; } .comp-table .table-responsive tbody th { font-size: 0.815rem; line-height: 1.25; } .comp-table .table-responsive tbody td { font-size: 0.85rem; top: 0; line-height: 1.25; } .comp-table .table-responsive tbody td span { top: 3px; } .table-responsive .ico-15 [class*="flaticon-"]:before, .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.675rem; } .table-responsive .ico-20 [class*="flaticon-"]:before, .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.835rem; } #pbox-1, #pbox-2 { margin-bottom: 25px; } .pricing-section .txt-box-last, .pricing-section .pm-last { margin-bottom: 40px; } .comp-table-payment h6 { margin-bottom: 12px; } /* INTEGRATIONS */ .integrations-2.pt-100.pb-70 { padding-bottom: 44px; } .integrations-3 { margin-bottom: -16px; } .int-2-wrapper .col { padding: 0 8px; } .integrations-1 .container { max-width: 100%; } .int-1-wrapper { padding: 60px 20px; margin: 0 -15px; border-radius: 0 0!important; } .integrations-1 .section-title h2 { padding: 0 1%; } .filter-btns button { font-size: 1.15rem; } .integrations-3 .filter-item { margin-bottom: 16px; } .int_tool-1 { margin-bottom: 30px; } .int_tool-2 { padding: 26px 14px; margin-bottom: 16px; } .int_tool-3 { padding: 16px 26px 18px; } .int_tool-1 .tool_logo { padding: 30px 25px; margin-bottom: 20px; } .int_tool-1 img, .int_tool-2 img { width: 50px; height: 50px; } .tool_txt h6 { font-size: 1.325rem; line-height: 1; margin-top: 1px; } .tool_logo h6 { font-size: 1.325rem; } .int_tool-2 h6 { font-size: 1.25rem; margin-top: 18px; } .tool_txt p { font-size: 1.0625rem; margin-top: 5px; } .tool_description p { margin-top: 8px; } .integrations-section .more-btn.mt-30 { margin-top: 22px; } .integrations-1 .more-btn { margin-top: 18px; } /* MORE APPS */ .ab-1, .ab-2, .ab-3, .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4, .rows-2 .ab-5, .rows-2 .ab-6 { margin-bottom: 30px; } .app-box h6, .app-box h5 { margin-top: 20px; margin-bottom: 10px; } .app-logo-img { padding: 0 4%; } /* BRANDS */ .brands-2-wrapper { padding: 0 10.5px; } .brands-2-wrapper .col { padding: 0; } .brands-title h6 { font-size: 1rem; line-height: 1.55; margin-bottom: 25px; } .brands-title h5 { font-size: 1.25rem; margin-bottom: 25px; } .brands-title p { padding: 0 5%; margin-bottom: 20px; } #brand-2-1, #brand-2-2, #brand-2-3 { margin-bottom: 30px; } .brands-carousel-5 .brand-logo, .brands-carousel-6 .brand-logo, #brands-2 .brand-logo { padding: 0 8px; } .brands-section .more-btn { margin-top: 25px; } /* CHANGELOG */ .release-data { padding-bottom: 25px; margin-bottom: 22px; } span.version-data { font-size: 1.4rem; line-height: 1.35; margin-bottom: 10px; } span.release-date { font-size: 1.1rem; } .release-highlights h6 { font-size: 1.25rem; margin-bottom: 15px; } .release-preview { margin-bottom: 18px; } /* DOWNLOAD */ #di-3 { margin-bottom: 30px; } .download-item h6 { font-size: 1.6rem; } .download-item p { font-size: 1.15rem; } /* FAQs */ .faqs-1 .section-title { margin-bottom: 25px; } .faqs-2 .section-title { margin-bottom: 35px; } .faq-3-title { margin-bottom: 20px; } .faq-3-title p { font-size: 1.05rem; margin-top: 12px; margin-bottom: 18px; } .faqs-2 .question { margin-bottom: 15px; } .faqs-2 .question h6, .faqs-2 .question h5 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 14px; } .faqs-section .accordion-thumb h5, .faqs-section .accordion-thumb h6 { font-size: 1.25rem; line-height: 1.5; padding-right: 12%;} .faqs-section .accordion-thumb { padding: 15px 0 20px; } .faqs-section .accordion-panel { padding: 0 0 10px 0; } .faqs-section .accordion-item .accordion-thumb:after, .faqs-section .accordion-item.is-active .accordion-thumb:after { width: 30px; height: 30px; font-size: 0.8rem; line-height: 30px; top: 15px; right: 0; } .more-questions h6 { font-size: 1.45rem; padding: 0 3%; margin-bottom: 12px; } .more-questions p { font-size: 1.1rem; padding: 0 5%; } .more-questions-btn { display: block; margin: 12px 0 0; } /* BANNER */ .banner-1 .container { max-width: 100%; } .banner-1-wrapper { padding: 55px 18px 60px; margin: 0 -15px; border-radius: 0 0!important; } .banner-2-wrapper .banner-overlay { padding: 55px 15px 65px; } .banner-3 .banner-overlay.pt-80.pb-90 { padding: 50px 0 60px; } .banner-4-wrapper { padding: 50px 8%; } .banner-5-wrapper .banner-overlay { padding: 50px 20px 0; } .banner-4-txt { margin-bottom: 6px; } .banner-1-txt h2 { font-size: 1.85rem; padding: 0 5%; } .banner-2-txt h2, .banner-5-txt h2 { font-size: 1.75rem; } /* 24.5px */ .banner-4-txt h4 { font-size: 1.57143rem; } /* 22px; */ .banner-1-txt p.p-md, .banner-1-txt p.p-lg { margin: 12px 0 3px; padding: 0 2%; } .banner-2-txt p.p-lg, .banner-2-txt p.p-xl { padding: 0 3%; margin: 15px 0 20px; } .banner-3-txt p.p-lg, .banner-3-txt p.p-xl { padding: 0 3%; margin-top: 14px; } .banner-5-txt p.p-md, .banner-5-txt p.p-lg { margin-top: 14px; margin-bottom: 18px; } .banner-1-txt .store { display: block; margin: 15px 0 0; } .banner-1-txt .btn { margin-top: 15px; } .banner-1-txt .os-version-ext .star-rating small { display: block; margin-left: 0; } .banner-2-txt .btn, .banner-5-txt .btn { width: auto; } .banner-3-txt .btn.mt-25 { width: auto; margin-top: 18px; } .banner-3-txt .btn.mt-35 { width: auto; margin-top: 20px; } .banner-section p.btn-txt { padding: 0; margin-top: 14px; margin-bottom: 0!important; } .banner-2-txt p.btn-txt, .banner-5-txt p.btn-txt { font-size: 0.95rem; } .banner-5-img.right-column, .banner-5-img.left-column { margin: 30px 0 -20%; } /* NEWSLETTER */ .newsletter-2 .container { max-width: 100%; } .newsletter-1 .newsletter-overlay { padding: 50px 0 40px; } .newsletter-2 .newsletter-overlay { padding: 55px 18px; margin: 0 -15px; border-radius: 0 0!important; } .newsletter-3 .newsletter-overlay { margin: 0 2%; padding: 35px 4% 20px; } .newsletter-4 .newsletter-overlay { padding: 55px 0; } .newsletter-txt h4, .newsletter-txt h3 { font-size: 1.6rem; padding: 0; margin-bottom: 22px; } .newsletter-3 .newsletter-txt h4 { font-size: 1.525rem; margin-bottom: 20px; } .newsletter-2 .newsletter-txt p, .newsletter-4 .newsletter-txt p { font-size: 0.95rem; padding: 0 4%; margin-bottom: 0; } .newsletter-1 .newsletter-form, .newsletter-3 .newsletter-form { padding: 0 2%; } .newsletter-2 .newsletter-form { padding: 0 3%; margin-top: 25px; } .newsletter-4 .newsletter-form { padding: 0 5%; margin-top: 25px; } .newsletter-section .form-control, .newsletter-section .btn { height: 48px; font-size: 1.0625rem; } .newsletter-2.newsletter-section .btn, .newsletter-4.newsletter-section .btn { font-size: 1.0625rem; } /* BLOG */ .blog-1.pb-60 { padding-bottom: 25px; } .blog-1 .blog-post { margin-bottom: 35px; } .blog-post-txt { padding: 0 15px; margin-top: 30px; } .blog-post-meta, .wide-post .blog-post-meta { margin-top: 15px; } .post-tag { font-size: 0.825rem; margin-bottom: 14px; } .blog-post-txt h4, .blog-post-txt h6, .blog-post-txt h5 { margin-bottom: 14px; } /* BLOG LISTING */ #blog-page.pb-40 { padding-bottom: 25px; } #blog-page .blog-post { margin-bottom: 35px; } #blog-page .blog-post.wide-post { margin-bottom: 15px; } .wide-post .blog-post-img { margin-bottom: 30px; } .posts-category { margin-top: 30px; margin-bottom: 30px; } /* SINGLE BLOG POST */ .blog-post-preview, .single-post-title { margin-bottom: 25px; } .single-post-title .blog-post-meta { margin-bottom: 10px; } .single-post-title h2 { margin-bottom: 14px; } .single-post-txt h6 { font-size: 1.25rem; margin-bottom: 10px; } .single-post-txt h5.h5-xl { font-size: 1.5rem; margin-top: 26px; margin-bottom: 14px; } .single-post-txt h5 { margin-top: 15px; margin-bottom: 14px; } .post-inner-img { margin-top: 25px; margin-bottom: 25px; } .post-data { margin: 40px 0 0; padding: 40px 0 60px; } .post-author-avatar { margin-right: 15px; } .post-author-avatar img { width: 50px; height: 50px; } .post-author-txt { top: 0; } .post-author-txt p { margin-top: 5px; } .share-social-icons.ico-25 [class*="flaticon-"]:before, .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.525rem; } .share-social-icons a.share-ico span { margin-right: 10px; } /* CONTACTS */ .contacts-1.pb-40 { padding-bottom: 20px; } .contacts-1 .section-title p { padding: 0 2%; } .contacts-1 .contact-form p { font-size: 1rem; } .contacts-1 .contact-form .contact-form-notice p { font-size: 0.975rem; margin-top: 25px; } .contact-form .form-control, .contact-form .form-select { height: 50px; font-size: 1.0625rem; padding: 0 15px;margin-bottom: 26px;} .contact-form textarea { min-height: 140px; } .contact-form textarea.form-control { padding: 15px; } .contact-form .form-btn .btn { font-size: 1.125rem; padding: 0.95rem 1.8rem; } .contact-form-msg { margin-top: 15px; } /* FOOTER */ .footer { padding-bottom: 30px; } .footer-data-logo { margin-bottom: 20px; } .footer-data-socials.text-end { margin-bottom: 40px; } .footer-info { margin-bottom: 30px; } .footer-1 .footer-contacts { margin-top: -5px; } .footer-links { margin-bottom: 20px; } .footer-3 .footer-connect { margin-top: 10px; margin-bottom: 20px; } .footer-form { margin-bottom: 10px; } .footer-1 .footer-form { margin-top: 35px; } .fl-1, .fl-2, .fl-3, .fl-4, .footer-1 .fl-5 { border-bottom: 1px solid #ddd; margin-bottom: 15px; padding-bottom: 16px; } .footer-1 .fl-3 { margin-bottom: 16px; } img.footer-logo { max-height: 28px; margin-bottom: 24px; } .footer-data-logo img.footer-logo { max-height: 30px; margin-bottom: 0; } .footer-2 img.footer-logo { margin-bottom: 0; } .footer-copyright-logo img.footer-logo { max-height: 26px; } .footer h6 { font-size: 1.21428rem; margin-bottom: 20px; } /* 17px */ .footer .footer-links h6.h6-lg { font-size: 1.275rem; margin-bottom: 18px; } .footer-mail-link { margin: 0 0 0 6px; } .footer-mail-link a { font-size: 1.10714rem; } /* 15.5px */ .footer-mail-link span { top: 4.5px; right: 5px; } .footer-mail-link.ico-20 [class*="flaticon-"]:before, .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.275rem; } .foo-links.ico-10 li span { top: 1px; right: 3px; } .footer-stores-badge { margin-top: 5px; margin-bottom: 30px; } .footer-stores-badge .store { display: block!important; text-align: left; margin-bottom: 15px; margin-right: 0; } .footer .badge-img-xs .store img { max-height: 2.85rem; } .footer-info-socials li { padding-right: 13px; } .footer-info-socials.ico-20 [class*="flaticon-"]:before, .footer-info-socials.ico-20 [class*="flaticon-"]:after, .footer-info-socials.ico-25 [class*="flaticon-"]:before, .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.45rem; } .footer-socials a { margin-right: 13px; } .footer-socials.ico-25 [class*="flaticon-"]:before, .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.5rem; } .footer-1 .footer-form { margin-bottom: 0; } .footer-form .form-control { font-size: 1.0625rem; } .footer-form .form-control, .footer-form .btn { height: 34px; } .footer-form .ico-15 [class*="flaticon-"]:before, .footer-form .ico-15 [class*="flaticon-"]:after { font-size: 1.0625rem; line-height: 22px!important; } .footer-1 .bottom-footer { margin-top: 20px; } .footer-copyright p, .bottom-footer-list p.p-sm, .bottom-secondary-link p.p-sm { font-size: 1rem; } .footer-list-divider { top: 0; } .bottom-secondary-link p span { top: 1.5px; padding: 0 2px; } .footer-info-copyright p span { top: 2px; padding: 0 2px; } .footer-info-copyright.ico-15 [class*="flaticon-"]:before, .footer-info-copyright.ico-15 [class*="flaticon-"]:after { font-size: 0.815rem; } .bottom-foo-socials { margin-left: 6px; } .bottom-foo-socials li { margin-right: 6px; } .footer-data-socials li { padding-right: 8px; } .bottom-foo-socials li span { top: 2.5px; right: 3px; } .footer-data-socials.ico-25 [class*="flaticon-"]:before, .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.55rem; } .bottom-foo-socials.ico-10 [class*="flaticon-"]:before, .bottom-foo-socials.ico-10 [class*="flaticon-"]:after { font-size: 1.125rem; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.375rem; } /* INNER PAGE WRAPPER */ .inner-page-hero, .page-hero-section-overlay { padding-top: 60px; } .inner-page-title { margin-bottom: 40px; } .inner-page-title h2 { margin-bottom: 0; } .inner-page-title p { line-height: 1.6666; margin-top: 12px; } /* PAGE PAGINATION */ .page-link { font-size: 0.95rem; padding: 2px 10px; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.75rem; } /* SIGN IN / SIGN UP */ .register-page-logo { padding-top: 70px; } .register-page-logo img { max-height: 26px; } .register-page-form { padding: 30px 5px 70px; } .reset-page-wrapper { margin: 0 3%; padding: 110px 0 70px; } .register-form-title { margin-bottom: 20px; } .register-form-title h4, .reset-form-title h5 { font-size: 1.65rem; } .register-form-title p { font-size: 1.125rem; margin-top: 5px; } .reset-form-title { margin-bottom: 16px; } .reset-form-title p.p-sm { font-size: 1.0625rem; margin-top: 10px; } .reset-password-link p { font-size: 1rem; margin-bottom: 27px; } .form-data span { font-size: 0.875rem; } .register-page-form p.create-account { font-size: 1.0625rem; margin-top: 25px; } .reset-password-form .form-data p { font-size: 1.15rem; margin: 22px 0 10px; } .separator-line { font-size: 1rem; margin: 20px 0; } .reset-page-wrapper .form-control, .register-page-form .form-control { height: 48px; font-size: 1.0625rem; margin-bottom: 22px; } #login .register-page-form .btn.submit { height: 48px; font-size: 1.0625rem; margin-top: 0; } #signup .register-page-form .btn.submit { height: 48px; font-size: 1.0625rem; margin-top: 25px; } .reset-page-wrapper .btn.submit { height: 48px; font-size: 1.0625rem; } .register-page-form .btn-google { font-size: 1.05rem; padding: 0.9rem 1.6rem; } .btn-google img { width: 22px; height: 22px; right: 4px; } /* COOKIES */ #cookies { width: 94%; left: 3%; bottom: 12px; padding: 14px 40px 44px 16px; } #cookies p { font-size: 0.95rem; } #cookies-ok { right: 5%; bottom: 15px; font-size: 0.9rem; padding: 5px 18px; } #cookies-info { margin-left: 7px; } #cookies-close { right: 14px; top: 5px; } #cookies-close svg { width: 11px; height: 11px; } /* MODAL */ .modal-dialog.modal-xl { width: 290px; margin: auto auto; } .modal-body-content { padding: 25px 5px 15px; } .modal .btn-close { right: 15px!important; top: 15px!important; } .modal-body-content h4 { font-size: 1.57143rem; margin-bottom: 10px; } .modal-body .newsletter-form { margin-top: 15px; } .modal .newsletter-form .form-control { height: 48px; font-size: 1.0625rem; margin-bottom: 16px; } .modal .newsletter-form .btn { height: 48px; font-size: 1.0625rem; } } @font-face{ font-family:'Material Icons'; font-style:normal; font-weight:400; src:url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2') } .material-icons{ user-select:none; -webkit-user-select:none; cursor:pointer; font-family:'Material Icons'; font-weight:400; font-style:normal; font-size:24px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased } #lbt-headertop,#lbt-thumbnails{ color:#fff; list-style:none; margin:0; padding:0; transition:.3s } .lb-thumbnail-wrapper,.lt-thumbnail-wrapper{ background:rgb(33 37 44 / 88%); left:0; overflow:hidden; right:0 } .lbr-ToFixed{ overflow-y:hidden } #lbt-loading{ width:100px; height:100px; margin:20px; display:inline-block; z-index:9; top:calc(50% - 50px); transform:translate(0,-50%); position:fixed } #lbt-lightbox_imgs{ position:fixed; left:0; top:0; height:100%; width:100%; background:rgba(31,35,42,.8); z-index:9999 } #lbt-lightbox_imgs img.image{ box-shadow:0 0 5px #00; width:100% } #lbt-lightbox_imgs #lbt_lightbox-wrapper{ position:relative; margin:0 auto; max-width:calc(100% - 500px); max-height:calc(100% - 160px); z-index:100 } #lbt-lightbox-media>*{ max-height:calc(100% - 225px); top:calc(50% - 50px); transform:translate(-50%,-50%); position:fixed; object-fit:cover; max-width:70vw } #lbt-lightbox-media>.lbt-iframe-video{ width:100%; aspect-ratio:16/9 } #lbt-headertop{ display:flex; width:100%; height:60px; position:relative; float:left; align-items:center; justify-content:center; overflow:hidden } #lbt-thumbnails{ display:flex; height:100px; position:-webkit-sticky; position:sticky; align-items:center; justify-content:center } #lbt-thumbnails li{ justify-content:flex-start } .lb-thumbnail-wrapper{ position:absolute; bottom:0 } .lt-thumbnail-wrapper{ position:absolute; top:0 } ul li img.lbr-thumb{ width:60px; height:60px; object-fit:cover; cursor:pointer; opacity:.9; transition:opacity .2s; border:6px solid #515e66; margin-right:7px } ul li img.lbr-thumb:hover{ border:6px solid #81868a; opacity:1 } ul li img.lbr-thumb.active{ border:6px solid #cacaca; opacity:1 } #lbt-name_lightbox{ position:absolute; font-size:16px; font-family:"Segoe UI"; color:#cacaca; left:60px; top:10px; cursor:pointer } #lbt-date_lightbox{ position:absolute; font-size:13px; font-family:"Segoe UI"; color:#838383; left:60px; bottom:10px; cursor:pointer } #lbt_next,#lbt_previous{ margin-top:0; font-size:40pt; background:#262a31; border-radius:50%; z-index:1; color:#fff; top:50%; cursor:pointer } #lbt-profile_lightbox{ position:absolute; left:0; height:calc(100% - 15px); cursor:pointer; padding:5px } #lbt-profile_lightbox img{ height:100%; border-radius:50% } #lbt-chat_lightbox{ position:absolute; right:320px; cursor:pointer } #lbt-star_lightbox{ position:absolute; right:270px; cursor:pointer } #lbt-smile_lightbox{ position:absolute; right:220px; cursor:pointer } #lbt-forward_lightbox{ position:absolute; right:170px; cursor:pointer } #lbt-download_lightbox{ position:absolute; right:120px; cursor:pointer } #lbt-dot_lightbox{ position:absolute; right:70px; cursor:pointer } #lbt-close_lightbox{ position:absolute; right:20px; cursor:pointer } .lbt-image-wrapper{ position:relative; z-index:1; display:flex; justify-content:center; align-items:center; left:0 } #lbt_videoplayer .lbt_btn_play,#lbt_videoplayer .lbt_loadingVideo,.caption_text{ left:50%; transform:translate(-50%,-50%) } #lbt-lightbox-caption{ font-family:Helvetica,Sans-Serif; font-weight:400; line-height:20px; margin-top:15px; max-height:57px; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; position:fixed; bottom:90px; width:70vw; text-align:center; overflow:hidden; color:#c8c8c9; display:block; display:-webkit-box; text-shadow:#262a31 1px 0 10px } #lbt_next,#lbt_previous,#lbt_videoplayer #captions.active,#lbt_videoplayer #settings.active{ display:block } .hi-lightbox-thumbnail-active{ height:55px; border-bottom:5px solid #fff } #lbt_next{ position:absolute; right:10px; width:37px; padding-left:25px } #lbt_previous{ position:absolute; left:0; width:40px; padding-left:20px } video::cue{ opacity:0 } .caption_text{ position:absolute; bottom:10%; width:90%; max-width:90%; text-align:center; user-select:none; transition:bottom .3s } #lbt_videoplayer{ overflow:hidden } #lbt_videoplayer .lbt_btn_play{ position:absolute; top:50%; width:20%; height:20%; z-index:1; stroke:#1c9dea; fill:#eff7fe; display:none } #lbt_videoplayer .lbt_btn_play:hover{ stroke:#4d5961; fill:#e6f7f2; cursor:pointer } #lbt_videoplayer .lbt_loadingVideo{ position:absolute; top:50%; width:60px; height:60px; border:4px solid #fff; border-bottom-color:transparent; border-radius:50%; z-index:1; animation:.6s linear infinite animate; display:none } #lbt_videoplayer .lbt_videoTime,#lbt_videoplayer .thumbnail{ left:calc(var(--x) + 11px); transform:translateX(-50%); position:absolute; display:none } .lbt_vPlayPause{ cursor:pointer } @keyframes animate{ 0%{ transform:translate(-50%,-50%) rotate(0) } 100%{ transform:translate(-50%,-50%) rotate(360deg) } } #lbt_videoplayer .thumbnail{ bottom:80px; width:165px; height:90px; background:#fff; border:2px solid #fff; border-radius:3px } #lbt_videoplayer #lbt_vsrc{ position:relative; width:100%; height:100%; outline:0 } #lbt_videoplayer .lbt_videoTime{ bottom:50px; min-width:60px; text-align:center; white-space:nowrap; padding:5px 10px; color:#1c9dea; text-shadow:-1px -1px 0 #fff,0 -1px 0 #fff,1px -1px 0 #fff,-1px 0 0 #fff,1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff; font-size:14px; font-weight:400; z-index:1 } #lbt_videoplayer .lbt_videoControls{ position:absolute; bottom:0; left:0; height:50px; width:100%; background:rgb(0 0 0 / 29%); box-shadow:0 0 40px 10px rgb(0 0 0 / 25%); z-index:3; transform:translateY(180%); transition:.3s } #lbt_videoplayer .lbt_videoControls.active{ transform:translateY(0) } #lbt_videoplayer .lbt_videoControls .video_progress-line{ width:100%; height:5px; margin:auto; background:#f0f0f063; cursor:pointer; position:relative } .lbt_videoControls .video_progress-line .video_progress-bar{ position:relative; width:0%; background:#1c9dea; height:inherit; border-radius:inherit; cursor:pointer } .lbt_videoControls .video_progress-line .video_progress-bar::before{ content:""; position:absolute; width:14px; height:14px; border-radius:50%; right:-15px; top:50%; transform:translateY(-50%); background:#eff7fe; border:3px solid #1c9dea } .lbt_videoControls .video_progress-line .video_buffer-bar{ position:absolute; top:0; right:0; width:100%; height:inherit } .lbt_videoControls .lbt_videoControls-list{ display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap; width:97%; height:46px; margin:0 auto } .lbt_videoControls .lbt_videoControls-list .lbt_videoControls-left,.lbt_videoControls .lbt_videoControls-list .lbt_videoControls-right{ display:flex; justify-content:center; align-items:center } .lbt_videoControls .lbt_videoControls-left .timer{ display:inline-block; font-size:14px; white-space:nowrap; color:#fff; margin-left:5px; text-align:center } .lbt_videoControls .icon{ display:inline-flex; justify-content:center; align-items:center; text-align:center; color:#fff; margin-left:8px; margin-right:5px } .lbt_videoControls .icon .material-icons{ font-size:26px; color:#fff; cursor:pointer } .lbt_videoControls .icon .material-icons.lbt_fastRewind:active{ transition:.2s; transform:rotate(-45deg) } .lbt_videoControls .icon .material-icons.lbt_fastForward:active{ transition:.2s; transform:rotate(45deg) } .lbt_videoControls .icon .lbt_videoVolumeRange{ -webkit-appearance:none; appearance:none; width:0; height:3px; background:#fff; color:#fff; cursor:pointer; outline:0; border:none; transition:.4s } .lbt_videoControls .icon .lbt_videoVolumeRange::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; border:none; outline:0; background:#fff; color:#fff; opacity:0; transition:.3s } .lbt_videoControls .icon:hover .lbt_videoVolumeRange{ display:inline-block; width:60px } .lbt_videoControls .icon:hover .lbt_videoVolumeRange::-webkit-slider-thumb{ opacity:1; pointer-events:auto; transition:.5s } .lbt_videoControls-right .icon .lbt_videoAutoPlay{ width:30px; height:10px; border-radius:20px; position:relative; margin-right:8px!important; background:#b6b6b6 } .lbt_videoControls-right .icon .lbt_videoAutoPlay::before{ content:"\e034"; position:absolute; left:-5px; top:50%; transform:translateY(-50%); width:17px; height:17px; line-height:17px; font-size:14px; background:#727272; display:flex; justify-content:center; align-items:center; cursor:pointer; border-radius:50%; font-family:"Material Icons" } .lbt_videoControls-right .icon .lbt_videoAutoPlay.active::before{ content:"\e037"; left:15px; font-family:"Material Icons" } .lbt_videoControls-right .icon .material-icons.settingsBtn{ font-size:24px; transition:.3s } .lbt_videoControls-right .icon .settingsBtn.active{ transform:rotate(45deg) } #lbt_videoplayer #captions,#lbt_videoplayer #settings{ right:25px; position:absolute; bottom:62px; background:rgb(28 28 28 / 90%); width:200px; max-height:250px; height:auto; color:#fff; overflow-y:auto; z-index:20; display:none; border-radius:5px } #lbt_videoplayer #captions .caption span,#lbt_videoplayer #settings>div>span{ font-size:14px; font-weight:300; padding:15px 30px; border-bottom:1px solid #535353; display:flex; justify-content:space-between; align-items:center; white-space:nowrap } #lbt_videoplayer #settings>div .icon{ font-size:14px; margin:0 5px; cursor:pointer } #lbt_videoplayer #settings>div ul li span{ pointer-events:none } #lbt_videoplayer #captions .caption ul,#lbt_videoplayer #settings>div ul{ position:relative } #lbt_videoplayer #captions .caption ul li,#lbt_videoplayer #settings>div ul li{ position:relative; width:100%; cursor:pointer; text-align:left; padding:12px 33px; display:flex; justify-content:space-between; align-items:center; font-size:14px } #lbt_videoplayer #captions .caption ul li:hover,#lbt_videoplayer #settings>div ul li:hover{ background:rgba(28,28,28,.9) } #lbt_videoplayer #captions .caption ul li.active::before,#lbt_videoplayer #settings>div ul li.active::before{ content:"\e876"; font-family:"Material Icons"; position:absolute; left:7px; top:50%; transform:translateY(-50%); padding-right:10px; font-size:18px } #lbt_videoplayer #captions::-webkit-scrollbar,#lbt_videoplayer #settings::-webkit-scrollbar{ width:8px; background:0 0 } #lbt_videoplayer #captions::-webkit-scrollbar-thumb,#lbt_videoplayer #settings::-webkit-scrollbar-thumb{ height:20px; border:2px solid transparent; background:rgba(83,83,83,.9); border-radius:20px } @media (max-width:430px){ .container{ width:100%; display:flex; justify-content:center; align-items:center } .lbt_videoControls .icon{ margin-left:5px; margin-right:5px; font-size:24px } .lbt_fastForward,.lbt_videoAutoPlay,.lbt_videoPip,.lbt_videoVolume,.lbt_videoVolumeRange{ display:none } } h1, h2, h3, h4, h5, h6 { color: #ffffff!important; } /* .faqs-section { background: #343434; } */ /* .hero-14-txt h2{ color: #fff!important; } */ .amber{ color: orangered!important; } .green { color: rgb(30, 255, 0)!important; } .footer, .tygh-footer { background: #11141c!important; } #hero-14 { padding-top: 250px !important; padding-bottom: 200px !important; } .color--white .h2-xl,.color--white .p-lg{ color: #fff!important; } .tygh-content > div { padding-bottom: 0px!important; } .footer-copyright { background-color: #ffffff00!important; } .footer-copyright-logo { top: 0px!important; } .footer-copyright-logo img.footer-logo { max-height: 35px!important; } hr { border: 0; border-bottom: 1px solid #4f4f4f!important; } .container-fluid { padding-right: 0px!important; padding-left: 0px!important; } .tygh-header > div { padding-top:0px!important; } .tygh-content { border-top:0px!important; } .toolprice-full-width-content .container-fluid{ max-width: 100%; } .smllogo{ height: 50px!important; } a.btn.r-10.btn--theme.hover--tra-white.last-link.btn-black { color: black !important; } .breadcrumbs-grid{ margin-top:140px; } .toolprice-supplier-link-btn{ font-size: 0.8rem; padding-top:10px; padding-bottom:10px; padding-top:10px; padding-top:10px; } .news-subcribe-container{ border-top: 1px solid #0c65ff; border-bottom: 1px solid #0c65ff; background: #0040af; padding: 10px; } h4.ty-footer-form-block__title{ color:white!important; } .btn-tra-white{ border:2px solid white; } /* .top-deal-title{ color:white!important; } */ .top-deal-product-container{ display: flex; justify-content: space-between; flex-direction: row; width:100%; } .top-deal-product-image-container{ width:30%; } .top-deal-product-price-container{ padding:10px; width:70%; display: flex; flex-direction: column; } .top-deal-product-price-wrapper{ display: flex; justify-content: end; } .header-wrapper{ border-bottom: 1px solid; } .flaticon-play-button{ color:white!important; } /*------------------------------------------*/ /* search POPUP ICON /*------------------------------------------*/ .flaticon-magnifying-glass{ color:white!important; } .flaticon-magnifying-glass::before{ font-size: 3rem!important; } .search-preview { position: relative; text-align: center; } .search-btn { position: absolute!important; bottom: -5%; right: 0%; display: inline-block; text-align: center; color: var(--white); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; cursor: pointer; } .search-btn-xl { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .search-btn-lg { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .search-btn-md { width: 5rem; height: 5rem; margin-top: -2.5rem; margin-left: -2.5rem; } .search-btn-sm { width: 4.375rem; height: 4.375rem; margin-top: -2.1875rem; margin-left: -2.1875rem; } .search-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .search-btn.search-btn-xl [class^="flaticon-"]:before, .search-btn.search-btn-xl [class^="flaticon-"]:after { font-size: 5rem; line-height: 6.25rem!important; margin-left: 4px; } .search-btn.search-btn-lg [class^="flaticon-"]:before, .search-btn.search-btn-lg [class^="flaticon-"]:after { font-size: 4.5rem; line-height: 5.625rem!important; margin-left: 8px; } .search-btn.search-btn-md [class^="flaticon-"]:before, .search-btn.search-btn-md [class^="flaticon-"]:after { font-size: 4.35rem; line-height: 5rem!important; margin-left: 8px; } .search-btn.search-btn-sm [class^="flaticon-"]:before, .search-btn.search-btn-sm [class^="flaticon-"]:after { font-size: 3.5rem; line-height: 4.375rem!important; margin-left: 5px; } .search-btn:hover .search-block-wrapper { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .search-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: var(--tra-white); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .search-btn.search-btn-xl:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .search-btn.search-btn-lg:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } .search-btn.search-btn-md:hover:before { opacity: .75; left: -1rem; right: -1rem; top: -1rem; bottom: -1rem; } .search-btn.search-btn-sm:hover:before { opacity: .75; left: -0.75rem; right: -0.75rem; top: -0.75rem; bottom: -0.75rem; }#LESS# @import "styles.less"; @import "tygh/responsive.less"; @import "addons/stripe/styles.less"; @import "addons/paypal_checkout/styles.less"; @import "addons/tags/styles.less"; @import "addons/rss_feed/styles.less"; @import "addons/newsletters/styles.less"; @import "addons/geo_maps/styles.less"; @import "addons/vendor_communication/styles.less"; @import "addons/gift_certificates/styles.less"; @import "addons/gift_certificates/responsive.less"; @import "addons/store_locator/styles.less"; @import "addons/recaptcha/styles.less"; @import "addons/product_variations/styles.less"; @import "addons/product_bundles/styles.less"; @import "addons/blog/styles.less"; @import "addons/blog/responsive.less"; @import "addons/reward_points/styles.less"; @import "addons/call_requests/styles.less"; @import "addons/form_builder/styles.less"; @import "addons/form_builder/responsive.less"; @import "addons/banners/styles.less"; @import "addons/wishlist/styles.less"; @import "addons/wishlist/responsive.less"; @import "addons/image_zoom/styles.less"; @import "addons/hybrid_auth/styles.less"; @import "addons/price_per_unit/styles.less"; @import "addons/gdpr/styles.less"; @import "addons/tool_price/styles.less"; @import "addons/ecl_live_search_free/styles.less"; @import "addons/ecl_live_search_free/default_theme.less"; :root { --image-zoom-animation-time: 200ms; }