.col-md-offset-right-1, .col-lg-offset-right-1 {
margin-right: 8.33333333%;
}  html {
height: 100%;
}
a {
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a:hover, a:focus {
text-decoration: none;
outline: none;
color: var(--brand_color);
}
body {
line-height: 1.7;
font-size: 16px;
height: 100%;
font-family: "Roboto", sans-serif;
font-weight: 400;
color: var(--p_color);
}
:focus {
outline: none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 700;
font-family: "Roboto", sans-serif;
color: var(--secondary_color);
}
figure {
padding-top: 5px;
padding-bottom: 5px;
clear: both;
border: none;
}
figure figcaption {
color: rgba(0, 0, 0, 0.54);
line-height: 20px;
font-size: 14px;
margin-top: 10px;
text-align: center;
max-width: 728px;
margin-right: auto;
}
video {
max-width: 100%;
}
table tr td p:last-child {
margin-bottom: 0;
} .h1 {
font-size: 50px;
}
.h2 {
font-size: 44px;
}
.h3 {
font-size: 36px;
}
.h4 {
font-size: 30px;
}
.h5 {
font-size: 24px;
}
.h6 {
font-size: 18px;
}
.bold {
font-weight: 700;
}
.medium {
font-weight: 500;
}
.regular {
font-weight: 400;
}
.shortcode_info h1, .shortcode_info h2, .shortcode_info h3, .shortcode_info h4, .shortcode_info h5, .shortcode_info h6,
.blog_single_item h1, .blog_single_item h2, .blog_single_item h3, .blog_single_item h4, .blog_single_item h5, .blog_single_item h6 {
margin-bottom: 30px;
}
button:focus {
outline: none;
} .body_wrapper {
overflow: hidden;
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 1500px) {
.custom_container {
max-width: 1470px;
}
}
.sec_pad {
padding: 100px 0;
}
.pb-100 {
padding-bottom: 100px;
}
.pl-40 {
padding-left: 40px;
}
.pl-60 {
padding-left: 60px;
}
.pr-60 {
padding-right: 60px;
}
.mt-40 {
margin-top: 40px;
} ul.list-style {
margin-bottom: 2rem;
}
ul.list-style li {
margin-bottom: 0.5rem;
list-style-type: circle;
}
ul.list-style li:last-child {
margin-bottom: 0;
} .key, kbd {
line-height: 0.95rem;
border: 1px solid #ddd;
color: var(--p_color);
}
.key, kbd, p .key, p kbd {
display: inline-block;
min-width: 1em;
padding: 0.5em 0.6em 0.4em;
margin: 2px;
font-weight: 400;
font-size: 0.85rem;
font-family: "Roboto", sans-serif;
text-align: center;
text-decoration: none;
line-height: 0.6rem;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
background: #fff;
border: 1px solid #ddd;
} .section_title {
margin-bottom: 56px;
}
.section_title p {
max-width: 530px;
margin: 10px auto 0;
}
.section_title.text-left p {
max-width: inherit;
}
.section_title.title-img {
margin-bottom: 76px;
}
.section_title.title-img .title-lg {
font-size: 44px;
line-height: 1.1;
color: var(--secondary_color);
margin-bottom: 30px;
font-weight: 400;
}
.section_title.title-img .action_btn {
padding: 9px 34px;
box-shadow: none;
border: 2px solid var(--brand_color);
font-weight: 500;
}
.section_title.title-img .action_btn:hover {
background: transparent;
color: var(--brand_color);
}
.h_title {
font-size: 30px;
line-height: 40px;
margin-bottom: 0;
font-weight: 700;
position: relative;
}
@media (max-width: 440px) {
.h_title br {
display: none;
}
}
.c_head {
font-size: 20px;
line-height: 26px;
} .bg_color {
background: #fafcfd;
}
.f_bg_color {
background: #f6fbfc;
}
.local-video-container {
display: -webkit-flex;
display: flex;
position: relative;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
overflow: hidden;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-sizing: content-box;
} #back-to-top {
display: inline-block;
background-color: rgba(220, 220, 220, 0.8);
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#back-to-top::after {
content: "2";
font-family: eleganticons;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #000;
}
#back-to-top:hover {
cursor: pointer;
background-color: #333;
}
#back-to-top:hover::after {
color: #fff;
}
#back-to-top:active {
background-color: #555;
}
#back-to-top.show {
opacity: 1;
visibility: visible;
}
.search-focused .click_capture {
opacity: 1;
visibility: visible;
}
.search-focused .banner_search_form {
position: relative;
z-index: 999 !important;
}  .action_btn {
font-size: 16px;
font-weight: 400;
color: #fff;
box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
border-radius: 4px;
background: var(--brand_color);
display: inline-block;
padding: 14px 28px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.18s ease-in-out;
}
.action_btn i {
vertical-align: middle;
font-size: 18px;
padding-left: 5px;
}
.action_btn:hover {
box-shadow: none;
color: #fff;
}
.error_area .action_btn {
font-size: 16px;
}
.error_area .action_btn i {
padding-right: 5px;
}
.doc_border_btn {
border: 2px solid #79ccde;
border-radius: 4px;
color: var(--brand_color);
font-size: 14px;
font-weight: 500;
background: #f8fdfe;
display: inline-block;
padding: 6px 34px;
transition: all 0.3s linear, color 0.2s;
}
.doc_border_btn.btn-round {
border-radius: 30px;
}
@media (max-width: 420px) {
.doc_border_btn.btn-round {
font-size: 12px;
}
}
.doc_border_btn i {
margin-left: 6px;
font-size: 16px;
vertical-align: middle;
display: inline-block;
transition: all 0.2s linear, color 0s linear;
}
.doc_border_btn:hover {
box-shadow: 0 10px 20px 0 rgba(12, 118, 142, 0.2);
background: var(--brand_color);
border-color: var(--brand_color);
color: #fff;
}
.doc_border_btn:hover i {
transform: translateX(8px);
}
.download-btn {
background-image: -moz-linear-gradient(90deg, #192030 0%, #4c5977 100%);
background-image: -webkit-linear-gradient(90deg, #192030 0%, #4c5977 100%);
background-image: -ms-linear-gradient(90deg, #192030 0%, #4c5977 100%);
color: #242424;
text-align: right;
width: 300px;
height: 80px;
padding-right: 40px;
display: inline-block;
font-size: 18px;
border-radius: 5px;
position: relative;
overflow: hidden;
z-index: 2;
}
.download-btn::before {
content: "";
background-image: -moz-linear-gradient(90deg, #afbcd0 0%, #edf1ff 100%);
background-image: -webkit-linear-gradient(90deg, #afbcd0 0%, #edf1ff 100%);
background-image: -ms-linear-gradient(90deg, #afbcd0 0%, #edf1ff 100%);
position: absolute;
right: -20px;
top: 0px;
width: 225px;
height: 80px;
border-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 25px;
transform: skewX(-25deg);
z-index: -1;
}
.download-btn .btn-icon {
display: inline-block;
padding-left: 20px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.download-btn .btn-icon img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.download-btn .btn-txt {
position: absolute;
right: 45px;
top: 50%;
transform: translateY(-50%);
}
.download-btn .btn-txt .title {
font-size: 24px;
font-weight: 600;
background: -webkit-linear-gradient(-90deg, #20273a, #4e5c7a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.download-btn .btn-txt .prop span {
font-size: 14px;
color: #5b6483;
font-weight: 400;
}
.download-btn .btn-txt .prop span + span {
color: #0066fe;
}
.download-btn .ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}
.download-btn .ribbon span {
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
color: #fff;
font: 700 18px/1 "Lato", sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
}
.download-btn .ribbon::before, .download-btn .ribbon::after {
position: absolute;
z-index: -1;
content: "";
display: block;
border: 5px solid #2980b9;
}
.download-btn .ribbon.ribbon-top-right::before, .download-btn .ribbon.ribbon-top-right::after {
border-top-color: transparent;
border-right-color: transparent;
}
.download-btn .ribbon.ribbon-top-right::before {
top: 0;
left: 0;
}
.download-btn .ribbon.ribbon-top-right::after {
bottom: 0;
right: 0;
}
.download-btn .ribbon.ribbon-top-right {
top: -10px;
right: -10px;
}
.download-btn .ribbon.ribbon-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}   .header_top {
background: #192341;
color: #8c93a8;
height: 40px;
}
.header_top .menu {
display: flex;
align-items: center;
height: 40px;
}
.header_top .menu li {
margin-right: 50px;
}
.header_top .menu li:last-child {
margin-right: 0;
}
.header_top .menu li a {
color: #8c93a8;
font-size: 14px;
}
.header_top .menu li a:hover {
color: var(--brand_color);
}
.header_top .right-menu {
justify-content: flex-end;
}
.header_top .right-menu li {
position: relative;
margin-right: 0;
padding-right: 15px;
}
.header_top .right-menu li::after {
position: absolute;
content: "";
background: #5a6279;
height: 13px;
width: 1px;
margin: 0 15px;
top: 5px;
}
.header_top .right-menu li:last-child {
padding-right: 0;
padding-left: 15px;
}
.header_top .right-menu li:last-child::after {
display: none;
} .navbar {
border: 0;
border-radius: 0;
padding: 0;
width: 100%;
left: 0;
top: 0;
z-index: 20;
position: absolute;
}
.menu_one {
background: transparent;
transition: all 0.2s linear;
}
.sticky_logo img + img {
display: none;
}
.menu > .nav-item {
padding-bottom: 37px;
padding-top: 37px;
transition: all 0.3s linear;
}
.navbar-expand-lg .navbar-nav.menu {
margin-left: auto;
}
.menu > .nav-item > .nav-link {
font-size: 14px;
font-weight: 500;
color: #fff;
padding: 0;
}
.menu > .nav-item > .nav-link:after {
display: none;
}
.menu > .nav-item.submenu .dropdown-menu {
margin: 0;
border-radius: 4px;
left: -38px;
min-width: max-content;
border: 1px solid #e6eeef;
background: #fff;
padding: 20px 0;
box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1);
}
.menu > .nav-item.submenu .dropdown-menu:before {
content: "";
width: 12px;
height: 12px;
background: #fff;
position: absolute;
top: -6px;
transform: rotate(45deg);
left: 40px;
border-left: 1px solid #e6eeef;
border-top: 1px solid #e6eeef;
}
@media (min-width: 992px) {
.menu > .nav-item.submenu .dropdown-menu {
transform: translateY(20px);
transition: all 0.3s ease-in;
opacity: 0;
visibility: hidden;
display: block;
}
}
.menu > .nav-item.submenu .dropdown-menu.dropdown_menu_two .nav-item {
padding: 0 30px;
}
.menu > .nav-item.submenu .dropdown-menu.dropdown_menu_two .nav-item + .nav-item {
margin-top: 8px;
}
.menu > .nav-item.submenu .dropdown-menu.dropdown_menu_two .nav-item .nav-link {
display: flex;
align-items: center;
}
.menu > .nav-item.submenu .dropdown-menu.dropdown_menu_two .nav-item .nav-link:before {
display: none;
}
.menu > .nav-item.submenu .dropdown-menu.dropdown_menu_two .nav-item .nav-link img {
margin-right: 20px;
width: 32px;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item {
padding: 0 40px 0 30px;
transition: all 0.3s linear;
position: relative;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item + .nav-item {
margin-top: 18px;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item .nav-link {
padding: 0;
white-space: nowrap;
font: 400 14px/16px "Roboto", sans-serif;
color: #6b707f;
transition: color 0.2s linear;
position: relative;
display: inline-block;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item .nav-link:after {
display: none;
} .menu > .nav-item.submenu .dropdown-menu .nav-item .nav-link h5 {
padding-top: 9px;
margin-bottom: 0;
font-size: 16px;
text-transform: capitalize;
font-weight: 500;
transition: all 0.2s linear;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item .nav-link p {
margin-bottom: 0;
line-height: 29px;
font-size: 14px;
padding-bottom: 0;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link, .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link, .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link {
color: var(--brand_color);
}
.menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link:before, .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link:before, .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link:before {
width: 100%;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link h5, .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link h5, .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link h5 {
color: var(--brand_color);
}
.menu > .nav-item.submenu .dropdown-menu .nav-item:hover > i, .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > i, .menu > .nav-item.submenu .dropdown-menu .nav-item.active > i {
color: var(--brand_color);
}
.menu > .nav-item.submenu .dropdown-menu .nav-item > .dropdown-menu {
transition: all 0.3s ease-in;
}
.menu > .nav-item.submenu .dropdown-menu .nav-item > .dropdown-menu:before {
display: none;
}
@media (min-width: 992px) {
.menu > .nav-item.submenu .dropdown-menu .nav-item > .dropdown-menu {
position: absolute;
left: 100%;
top: -25px;
opacity: 0;
display: block;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease-in;
}
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu {
min-width: 540px;
padding: 0;
background: #4464a1;
border: 0;
max-height: 309px;
min-height: 309px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu li > div {
min-height: 309px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .nav-pills {
padding: 30px 0;
background: #fff;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
height: 100%;
margin-right: -10px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item {
padding: 0 30px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item:after {
content: "5";
position: absolute;
right: 25px;
top: -1px;
font-family: "ElegantIcons";
display: block;
color: var(--brand_color);
transition: all 0.2s linear;
opacity: 0;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item .nav-link {
font-size: 14px;
color: var(--p_color);
display: inline-block;
border-radius: 0;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item .nav-link.active {
background: transparent;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item + .nav-item {
margin-top: 12px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item:hover:after, .menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item.active:after {
opacity: 1;
right: 20px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item:hover .nav-link, .menu > .nav-item.submenu.mega_menu .dropdown-menu .tabHeader .nav-item.active .nav-link {
color: var(--brand_color);
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane {
padding: 26px 10px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane .tab_list {
width: 50%;
padding-bottom: 12px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane .tab_list.w_100 {
width: 100%;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane .tab_list li {
margin-bottom: 12px;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane .tab_list li a {
font-size: 14px;
font-weight: 400;
color: #fff;
position: relative;
font-family: "Roboto", sans-serif;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane .tab_list li a:before {
content: "";
width: 0;
height: 1px;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
transition: all 0.2s linear;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane .tab_list li a:hover:before, .menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane .tab_list li a.active:before {
width: 100%;
}
.menu > .nav-item.submenu.mega_menu .dropdown-menu .tabContent .tab-pane p {
font-size: 14px;
line-height: 30px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 0;
}
.menu > .nav-item.active > i {
color: var(--brand_color);
}
.menu > .nav-item.active .nav-link:before {
transform: scaleX(1);
opacity: 1;
background: #209ff0;
}
.menu > .nav-item:hover > i {
color: var(--brand_color);
}
.menu > .nav-item > .nav-link {
border-bottom: 1px solid transparent;
}
.menu > .nav-item.current-menu-parent > .nav-link,
.dk_menu .menu > .nav-item:hover > .nav-link {
border-bottom: 1px solid var(--brand_color)
}
.menu > .nav-item.submenu .dropdown-menu .nav-item.current-menu-ancestor > .nav-link,
.dk_menu .menu > .nav-item.current-menu-parent > .nav-link {
color: var(--brand_color)
}
.navbar:not(.dk_menu) .menu > .nav-item.current-menu-ancestor > .nav-link,
.navbar:not(.dk_menu) .menu > .nav-item.current-menu-parent > .nav-link,
.navbar:not(.dk_menu) .menu > .nav-item:hover > .nav-link {
border-bottom: 1px solid #fff;
}
.menu > .nav-item:hover .nav-link:before {
transform: scaleX(1);
opacity: 1;
background: #209ff0;
}
@media (min-width: 992px) {
.menu > .nav-item:hover .dropdown-menu {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
}
@media (min-width: 992px) and (min-width: 992px) {
.menu > .nav-item:hover .dropdown-menu > .nav-item:hover > .dropdown-menu {
transform: scaleY(1);
opacity: 1;
visibility: visible;
}
}
.menu > .nav-item + .nav-item {
margin-left: 55px;
}
.nav_btn {
font-size: 14px;
font-weight: 500;
padding: 10px 25px;
text-align: center;
border-radius: 4px;
border: 2px solid #fff;
transition: all 0.3s linear;
margin-left: 80px;
background: #fff;
color: var(--brand_color);
}
.nav_btn.round-btn {
border-radius: 50px;
background-color: rgba(16, 179, 214, 0.031);
}
.nav_btn.icon-btn {
border-color: #79ccde;
}
.nav_btn.icon-btn i {
color: #79ccde;
padding-right: 10px;
}
.nav_btn:hover {
background: var(--brand_color);
border-color: var(--brand_color);
color: #fff;
}
.nav_btn:hover i {
color: #fff;
}
.mCSB_inside > .mCSB_container {
margin-right: 0;
}  .menu_two {
box-shadow: 0 4px 10px 0 rgba(12, 118, 142, 0.06);
z-index: 10;
background: #fff;
}
.menu_two .nav_btn {
border: 2px solid #79ccde;
color: var(--brand_color);
background: #f8fdfe;
}
.menu_two .nav_btn i {
padding-right: 8px;
font-size: 12px;
}
.menu_two .nav_btn:hover {
background: var(--brand_color);
color: #fff;
border-color: var(--brand_color);
}
.menu_two .menu_toggle .hamburger span, .menu_two .menu_toggle .hamburger-cross span {
background: var(--secondary_color);
}
.menu_two + div, .menu_two + section {
margin-top: 98px;
}
.dk_menu > .nav-item > .nav-link {
color: var(--p_color);
}
.dk_menu > .nav-item > .nav-link i {
padding-right: 5px;
font-size: 14px;
}
.mobile_dropdown_icon {
display: none;
} @media (max-width: 991px) {
.display_none {
display: none;
}
}
.sticky-nav-doc .navbar-brand img + img {
display: none;
}
.sticky-nav-doc .mobile_main_menu .menu_toggle .hamburger span {
background: var(--secondary_color);
}
.mobile_main_menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
padding: 13px 0;
}
@media (min-width: 992px) {
.mobile_main_menu {
display: none;
}
}
.mobile_main_menu .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile_main_menu .menu_toggle {
margin-right: 18px;
}
.mobile_main_menu .menu_toggle .hamburger span {
width: 100%;
}
.mobile_main_menu .mobile_menu_left {
display: flex;
}
.mobile_main_menu .nav_btn {
margin: 0;
}
.mobile_main_menu.navbar_fixed {
box-shadow: 0 4px 10px 0 rgba(12, 118, 142, 0.06);
background: #fff;
transition: all 0.2s, top 0.4s linear;
}
.mobile_main_menu.navbar_fixed .nav_btn {
border-color: var(--p_color);
}
.mobile_main_menu.navbar_fixed .nav_btn:hover {
border-color: var(--brand_color);
} .sticky_menu .menu_one {
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.sticky_menu .menu_one + div, .sticky_menu .menu_one + section {
margin-top: 100px;
}
.sticky_menu .menu_one .menu > .nav-item .nav-link {
position: relative;
color: var(--p_color);
font-weight: 400;
}
.sticky_menu .menu_one .menu > .nav-item:hover > .nav-link, .sticky_menu .menu_one .menu > .nav-item.active > .nav-link {
color: var(--brand_color);
}
.menu_social {
margin-bottom: 0;
margin-left: 70px;
}
.search_form {
width: 250px;
list-style: none;
position: relative;
}
.search_form .form-control {
font-size: 14px;
font-weight: 400;
padding: 15px;
height: 45px;
margin-top: -2px;
padding-left: 20px;
background: #fafcfd;
border: 1px solid #e1e4e5;
border-radius: 4px;
box-shadow: none;
}
.search_form .form-control.placeholder {
color: #8f94a6;
}
.search_form .form-control:-moz-placeholder {
color: #8f94a6;
}
.search_form .form-control::-moz-placeholder {
color: #8f94a6;
}
.search_form .form-control::-webkit-input-placeholder {
color: #8f94a6;
}
.search_form button {
position: absolute;
top: 11px;
right: 15px;
border: 0;
padding: 0;
color: var(--secondary_color);
background: transparent;
font-size: 14px;
z-index: 3;
}
#stickyTwo .menu > .nav-item.submenu.mega_menu .dropdown-menu, .menu_two .menu > .nav-item.submenu.mega_menu .dropdown-menu {
border-top: 1px solid #e6eeef;
} .nav_btn_two {
border-color: #79ccde;
background: #f1f8fc;
}
.nav_btn_two:hover {
border-color: var(--brand_color);
}
.navbar_fixed {
position: fixed;
}
.navbar_fixed.menu_one {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
background: #fff;
transition: all 0.2s, top 0.4s linear;
margin-top: 0;
}
.navbar_fixed.menu_one .menu > .nav-item {
padding-bottom: 25px;
padding-top: 25px;
}
.navbar_fixed.menu_one .menu > .nav-item > .nav-link {
color: #6b707f;
}
.navbar_fixed.menu_one .menu > .nav-item:hover > .nav-link, .navbar_fixed.menu_one .menu > .nav-item.active > .nav-link {
color: var(--brand_color);
}
.navbar_fixed.menu_one .menu > .nav-item.submenu.mega_menu .dropdown-menu {
border-top: 1px solid #e6eeef;
}
.navbar_fixed.menu_one .nav_btn {
color: var(--brand_color);
border: 2px solid #79ccde;
}
.navbar_fixed.menu_one .nav_btn:hover {
background: var(--brand_color);
color: #fff;
border-color: var(--brand_color);
}
.navbar_fixed .sticky_logo img {
display: none;
}
.navbar_fixed .sticky_logo img + img {
display: block;
}
.navbar_fixed.menu_two {
box-shadow: 0 4px 10px 0 rgba(12, 118, 142, 0.06);
width: 100%;
background: #fff;
left: 0;
top: 0;
position: fixed;
transition: top 0.4s linear;
}
@media (min-width: 992px) {
.navbar_fixed.menu_two .menu > .nav-item {
padding-bottom: 30px;
padding-top: 30px;
}
}
.navbar_fixed.menu_two + div, .navbar_fixed.menu_two + section {
margin-top: 86px;
}
.navbar_fixed .menu_toggle .hamburger span, .navbar_fixed .menu_toggle .hamburger-cross span {
background: var(--secondary_color);
}
.navbar-toggler {
padding-right: 0;
padding-left: 0;
}
.hamburger {
height: 100%;
width: 100%;
display: block;
}
.hamburger span {
width: 0%;
height: 2px;
position: relative;
top: 0;
left: 0;
margin: 4px 0;
display: block;
background: #fff;
border-radius: 3px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.hamburger span:nth-child(1) {
transition-delay: 0s;
}
.hamburger span:nth-child(2) {
transition-delay: 0.125s;
}
.hamburger span:nth-child(3) {
transition-delay: 0.2s;
}
.menu_toggle {
width: 22px;
height: 22px;
position: relative;
cursor: pointer;
display: block;
}
.menu_toggle .hamburger {
position: absolute;
}
.menu_toggle .hamburger-cross {
position: absolute;
height: 100%;
width: 100%;
transform: rotate(45deg);
display: block;
}
.menu_toggle .hamburger-cross span {
display: block;
background: #fff;
border-radius: 3px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.menu_toggle .hamburger-cross span:nth-child(1) {
height: 100%;
width: 2px;
position: absolute;
top: 0;
left: 10px;
transition-delay: 0.3s;
}
.menu_toggle .hamburger-cross span:nth-child(2) {
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 10px;
transition-delay: 0.4s;
}
.collapsed .menu_toggle .hamburger span {
width: 100%;
}
.collapsed .menu_toggle .hamburger span:nth-child(1) {
transition-delay: 0.3s;
}
.collapsed .menu_toggle .hamburger span:nth-child(2) {
transition-delay: 0.4s;
}
.collapsed .menu_toggle .hamburger span:nth-child(3) {
transition-delay: 0.5s;
}
.collapsed .menu_toggle .hamburger-cross span:nth-child(1) {
height: 0%;
transition-delay: 0s;
}
.collapsed .menu_toggle .hamburger-cross span:nth-child(2) {
width: 0%;
transition-delay: 0.2s;
} .side_menu {
width: 300px;
height: 100vh;
max-height: 100vh;
top: 0;
position: fixed;
transform: translate3d(-300px, 0, 0);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1013;
background: var(--bs-white);
padding: 20px 0;
overflow-x: hidden;
}
.side_menu .mobile_menu_header {
display: flex;
align-items: center;
padding-left: 15px;
padding-right: 15px;
}
.side_menu .mobile_menu_header .close_nav {
font-size: 25px;
color: var(--black_800);
margin-right: 15px;
}
.side_menu .mobile_menu_header .close_nav i + i {
display: none;
}
.side_menu .doc_left_sidebarlist {
border: 0;
}
.side_menu .doc_left_sidebarlist:before {
display: none;
}
.side_menu .nav-sidebar .nav-item {
padding-right: 0;
margin-bottom: 20px;
}
.side_menu .nav-sidebar .nav-item .nav-link {
position: relative;
align-items: center;
flex-wrap: wrap;
}
.side_menu .mobile_nav_wrapper {
display: flex;
transform: translate3d(-300px, 0, 0);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.side_menu .mobile_nav_top, .side_menu .mobile_nav_bottom {
height: calc(100vh - 65px);
flex-shrink: 0;
display: block;
width: 300px;
padding: 0 15px;
}
.side_menu .mobile_nav_top {
padding-top: 30px;
}
.side_menu .mobile_nav_top .menu {
padding-left: 0;
padding-right: 0;
}
.side_menu.menu-opened .mobile_nav_wrapper {
transform: translate3d(0, 0, 0);
}
.side_menu.menu-opened .close_nav i {
display: none;
}
.side_menu.menu-opened .close_nav i + i {
display: block;
}
.click_capture {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
z-index: 99;
opacity: 0;
background: rgba(0, 0, 0, 0.4);
transition: all 0.3s linear;
}
@media (max-width: 992px) {
.menu-is-opened {
overflow: hidden;
height: 100%;
}
.menu-is-opened .click_capture {
opacity: 1;
visibility: visible;
}
.menu-is-opened .side_menu {
transform: translate3d(0, 0, 0);
}
}   .doc_banner_area_one {
height: 750px;
display: flex;
align-items: center;
background-image: linear-gradient(60deg, var(--brand_color) 0%, var(--secondary_color) 100%);
position: relative;
overflow: hidden;
}
.doc_banner_area_one .star {
z-index: -1;
}
.doc_banner_area_one .star_one {
right: 170px;
top: 50%;
animation: star 9s both infinite alternate 5s;
}
.doc_banner_area_one .star_two {
top: 33px;
right: 147px;
animation: star2 4s ease-in-out infinite alternate;
}
.doc_banner_area_one .star_three {
top: 50px;
left: 347px;
animation: star 7s ease-in-out infinite alternate;
}
.doc_banner_area_one .one {
bottom: 0;
left: 300px;
}
.doc_banner_area_one .two {
bottom: 0;
right: 320px;
}
.doc_banner_area_one .three {
bottom: 0;
left: 520px;
}
.doc_banner_area_one .four {
bottom: 0;
left: 58%;
margin-left: -20px;
}
.doc_banner_area_one .five {
bottom: 155px;
left: 74%;
transform: translateX(-50%);
}
.bl_left {
width: 150px;
height: 145px;
bottom: -7px;
left: 20px;
z-index: 1;
}
.bl_right {
width: 135px;
height: 110px;
right: 30px;
bottom: -7px;
z-index: 1;
}
.dark {
position: absolute;
width: 100%;
left: 0;
height: auto;
bottom: 0;
z-index: -1;
}
.dark_two {
position: absolute;
width: 100%;
left: 0;
height: auto;
bottom: 0;
z-index: -1;
}
.star {
top: 0;
width: 100%;
left: 0;
z-index: 0;
right: 0;
height: auto;
}
.doc_banner_text {
text-align: center;
}
.doc_banner_text h2,
.doc_banner_text p,
.doc_banner_text h6 {
color: #fff;
}
.doc_banner_text h2 {
font-size: 46px;
margin-bottom: 14px;
}
.doc_banner_text p {
font-size: 18px;
line-height: 30px;
margin-bottom: 0;
font-weight: 300;
}
.doc_banner_text h6 {
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
margin-top: 40px;
}
.doc_banner_text h6 span {
color: #e1e1e1;
margin-right: 10px;
}
.doc_banner_text h6 a {
color: #fff;
margin-right: 10px;
text-decoration: underline;
}
.doc_banner_text h6 a:last-child {
margin-right: 0;
}
.doc_banner_text .banner_search_form {
margin-top: 65px;
}
.banner_search_form {
max-width: 570px;
margin: 0 auto;
display: flex;
}
.banner_search_form .form-control {
height: 70px;
border-radius: 4px;
padding-left: 30px;
font-size: 14px;
border: 0;
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
color: var(--secondary_color);
}
.banner_search_form .form-control.placeholder {
color: #848996;
}
.banner_search_form .form-control:-moz-placeholder {
color: #848996;
}
.banner_search_form .form-control::-moz-placeholder {
color: #848996;
}
.banner_search_form .form-control::-webkit-input-placeholder {
color: #848996;
}
.banner_search_form button {
padding: 5px 25px;
font-size: 20px;
background: var(--brand_color);
color: #fff;
text-align: center;
border: 0;
border-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transition: all 0.4s linear;
}  .doc_banner_area_two {
height: 650px;
background: #daf6fc;
position: relative;
z-index: 1;
padding-top: 160px;
}
.doc_banner_area_two .table_img {
left: 200px;
bottom: -6px;
width: 250px;
}
.doc_banner_area_two .flower {
bottom: 0;
left: 80px;
}
.doc_banner_area_two .girl {
right: 130px;
bottom: 0;
}
.doc_banner_area_two .bord {
bottom: -14px;
right: 320px;
}
.b_plus,
.b_round,
.p_absolute {
position: absolute;
}
.b_plus.one {
left: 120px;
top: 120px;
}
.b_plus.two {
right: 25%;
top: 210px;
}
.b_round {
border-radius: 50%;
}
.b_round.r_one {
right: 135px;
top: 85px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #83daed;
animation: spin1 2s infinite alternate;
}
.b_round.r_two {
left: 30%;
top: 160px;
width: 8px;
height: 8px;
background: var(--brand_color);
animation: spin2 2s infinite alternate;
}
.b_round.r_three {
background: #ffa3be;
width: 16px;
height: 16px;
left: 24%;
top: 310px;
animation: spin1 2.5s infinite alternate;
}
.b_round.r_four {
background: #ffa3be;
width: 8px;
height: 8px;
right: 18%;
bottom: 380px;
animation: spin1 1s infinite alternate;
}
.doc_banner_text_two h2 {
font-size: 46px;
margin-bottom: 22px;
font-weight: 700;
}
.doc_banner_text_two p {
font-size: 18px;
line-height: 30px;
font-weight: 400;
max-width: 440px;
margin: 0 auto;
}
.doc_banner_text_two .banner_search_form {
max-width: 770px;
margin: 60px auto 0;
}
.doc_banner_text_two .banner_search_form .form-control {
margin-right: 20px;
border-radius: 4px;
box-shadow: 0 4px 10px 0 rgba(12, 118, 142, 0.06);
}
.doc_banner_text_two .banner_search_form .search_btn {
border-radius: 4px;
font-size: 18px;
font-weight: 400;
box-shadow: 0 10px 20px 0 rgba(12, 118, 142, 0.1);
background: var(--brand_color);
padding: 5px 42px;
}
.building_img {
left: 50%;
transform: translateX(-50%);
bottom: 0;
z-index: -1;
}  .docly-banner-support {
height: 945px;
background-image: linear-gradient(30deg, #feefec 0%, #f5fdff 100%);
padding: 200px 0;
position: relative;
}
@media (max-width: 991px) {
.docly-banner-support {
padding: 150px 0;
}
}
@media (max-width: 768px) {
.docly-banner-support {
padding: 100px 0;
height: 820px;
}
}
.docly-banner-support .banner-content-wrapper {
max-width: 770px;
margin: 0 auto;
position: relative;
}
@media (max-width: 991px) {
.docly-banner-support .banner-content-wrapper {
max-width: 90%;
}
}
.docly-banner-support .banner-content-wrapper .banner-title {
font-size: 44px;
font-weight: 500;
color: var(--secondary_color);
margin-bottom: 12px;
}
@media (max-width: 768px) {
.docly-banner-support .banner-content-wrapper .banner-title {
font-size: 34px;
}
}
.docly-banner-support .banner-content-wrapper p {
font-size: 18px;
color: var(--p_color);
line-height: 28px;
margin-bottom: 40px;
}
@media (max-width: 991px) {
.docly-banner-support .banner-content-wrapper p br {
display: none;
}
}
.docly-banner-support .header_search_keyword span.header-search-form__keywords-label {
color: var(--p_color);
}
.search-focused .docly-banner-support .header_search_keyword span.header-search-form__keywords-label {
color: #fff;
}
.docly-banner-support .header_search_keyword ul li a {
background-color: var(--brand_color);
border-color: var(--brand_color);
}
.docly-banner-support .banner-content-wrapper .banner_search_form {
margin: 0 auto;
width: 100%;
z-index: 2;
}
.docly-banner-support .banner_search_form .input-group {
box-shadow: 0 4px 10px 0 rgba(49, 12, 2, 0.06);
max-width: 770px;
background: #fff;
border-radius: 30px;
}
.docly-banner-support .banner-content-wrapper .banner_search_form input {
background: transparent;
border: 0;
padding: 15px 30px;
height: 60px;
}
.docly-banner-support .banner-content-wrapper .banner_search_form input::placeholder {
color: var(--p_color);
}
.docly-banner-support .banner-content-wrapper .banner_search_form button {
background: transparent;
border: 0;
padding-right: 20px;
color: var(--brand_color);
font-size: 24px;
}
.docly-banner-support .banner-content-wrapper .banner_search_form button i {
transform: rotate(-90deg);
display: inline-block;
}
.docly-banner-support .bottom-shape {
position: absolute;
width: 100%;
left: 0;
bottom: -1px;
}
.docly-banner-support .bottom-shape img {
width: 100%;
}
.people-image {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 100%;
height: 320px;
max-width: 1250px;
left: 50%;
transform: translateX(-50%);
bottom: 165px;
z-index: 1;
}
@media (max-width: 767px) {
.people-image {
height: 280px;
}
}
@media (max-width: 576px) {
.people-image {
bottom: 80px;
}
}
.people-image li {
position: absolute;
box-shadow: 0px 40px 60px 0px rgba(59, 14, 3, 0.12);
border-radius: 50%;
border: 4px solid #fff;
overflow: hidden;
}
.people-image li img {
width: 100%;
}
.people-image li:nth-child(1) {
left: 50%;
top: 15px;
transform: translateX(-50%);
border: 6px solid #fff;
height: 130px;
width: 130px;
box-shadow: 0px 50px 80px 0px rgba(59, 14, 3, 0.12);
}
.people-image li:nth-child(2) {
left: 29.4%;
top: 0;
height: 80px;
width: 80px;
}
.people-image li:nth-child(3) {
right: 26.4%;
top: -5px;
height: 70px;
width: 70px;
}
.people-image li:nth-child(4) {
left: 160px;
top: 75px;
height: 80px;
width: 80px;
}
.people-image li:nth-child(5) {
left: 26.4%;
bottom: 40px;
height: 80px;
width: 80px;
}
.people-image li:nth-child(6) {
right: 38%;
bottom: -20px;
height: 100px;
width: 100px;
}
.people-image li:nth-child(7) {
right: 85px;
bottom: 5px;
width: 90px;
height: 90px;
}
.people-image li:nth-child(8) {
left: 0;
bottom: 0;
border: 2px solid #fff;
}
.people-image li:nth-child(9) {
right: 22.3%;
bottom: 35%;
height: 50px;
width: 50px;
border: 2px solid #fff;
}
.people-image li:nth-child(10) {
right: 0;
bottom: 145px;
height: 60px;
width: 60px;
border: 2px solid #fff;
}
@media (max-width: 991px) {
.people-image li:nth-child(1) {
height: 110px;
width: 110px;
}
.people-image li:nth-child(2) {
height: 65px;
width: 65px;
}
.people-image li:nth-child(3) {
height: 60px;
width: 60px;
}
.people-image li:nth-child(4) {
height: 65px;
width: 65px;
}
.people-image li:nth-child(5) {
height: 65px;
width: 65px;
}
.people-image li:nth-child(6) {
height: 80px;
width: 80px;
}
.people-image li:nth-child(7) {
height: 70px;
width: 70px;
}
.people-image li:nth-child(8) {
left: 50px;
}
.people-image li:nth-child(9) {
right: 27%;
}
.people-image li:nth-child(10) {
right: 50px;
}
}
@media (max-width: 768px) {
.people-image li:nth-child(4) {
left: 95px;
}
}
@media (max-width: 576px) {
.people-image li:nth-child(2) {
left: 13%;
}
.people-image li:nth-child(3) {
right: 18%;
}
}
@media (max-width: 440px) {
.people-image li:nth-child(1) {
height: 100px;
width: 100px;
}
.people-image li:nth-child(4) {
left: 20px;
}
.people-image li:nth-child(5) {
left: 22.4%;
bottom: 55px;
}
.people-image li:nth-child(7) {
right: 25px;
}
.people-image li:nth-child(8) {
left: 10px;
}
.people-image li:nth-child(10) {
right: 20px;
}
}
.partical-animation {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 100%;
height: 550px;
bottom: 0;
left: 0;
}
.partical-animation li {
position: absolute;
border-radius: 50%;
}
.partical-animation li:nth-child(1) {
left: 165px;
top: 120px;
}
.partical-animation li:nth-child(2) {
left: 19%;
top: 80px;
height: 8px;
width: 8px;
background: #fd9382;
}
.partical-animation li:nth-child(3) {
left: 19%;
bottom: 30%;
height: 10px;
width: 10px;
background: #fe97f3;
}
.partical-animation li:nth-child(3) {
left: 28%;
top: 35%;
height: 35px;
width: 35px;
background: #f3d5de;
}
.partical-animation li:nth-child(4) {
left: 27%;
bottom: 30%;
height: 12px;
width: 12px;
background: #83daed;
}
.partical-animation li:nth-child(5) {
left: 33%;
bottom: 50%;
height: 10px;
width: 10px;
background: #fdc43a;
}
.partical-animation li:nth-child(6) {
left: 51%;
top: 32%;
height: 48px;
width: 48px;
background: #4edfda;
}
.partical-animation li:nth-child(7) {
right: 46%;
bottom: 27%;
height: 22px;
width: 22px;
background: #f39ab2;
}
.partical-animation li:nth-child(8) {
right: 46%;
bottom: 27%;
height: 22px;
width: 22px;
background: #f39ab2;
}
.partical-animation li:nth-child(9) {
right: 40%;
bottom: 60%;
height: 8px;
width: 8px;
background: #ffa3be;
}
.partical-animation li:nth-child(10) {
right: 22%;
bottom: 30%;
height: 28px;
width: 28px;
background: #bff8c6;
}
.partical-animation li:nth-child(11) {
right: 10%;
bottom: 55%;
height: 15px;
width: 15px;
background: #ffa3be;
}
.partical-animation li:nth-child(12) {
right: 65px;
bottom: 160px;
}  .breadcrumb_area {
background-image: linear-gradient(60deg, var(--brand_color) 0%, var(--secondary_color) 100%);
padding: 190px 0 95px;
position: relative;
}
.breadcrumb_area .one {
right: 20%;
bottom: 25px;
}
.breadcrumb_area .two {
left: 20%;
bottom: 0;
}
.breadcrumb_area .banner_search_form {
max-width: 770px;
position: relative;
z-index: 5;
}
.breadcrumb_area .banner_search_form .form-control {
height: 65px;
}
.breadcrumb_area .banner_search_form button {
background: var(--brand_color);
height: auto;
}
.breadcrumb_area .custom-select {
line-height: 65px;
z-index: 3;
}
.breadcrumb_area .custom-select:before {
width: 1px;
content: "";
position: absolute;
left: 0;
top: 15px;
bottom: 15px;
background: #e2e7e9;
z-index: 1;
}
.wave_shap_one,
.wave_shap_two {
bottom: 0;
z-index: 0;
}
.custom-select {
border-radius: 0;
font-size: 14px;
box-shadow: none;
padding: 0 80px 0 20px;
height: 100%;
border: 0;
background: #fff;
color: #6b707f;
}
.custom-select:after {
border-bottom: 2px solid #6b707f;
border-right: 2px solid #6b707f;
height: 8px;
width: 8px;
right: 28px;
margin-top: -6px;
}
.custom-select ul {
width: 100%;
padding: 10px 0;
border-radius: 4px;
}
.custom-select ul li {
font-size: 14px;
color: #6b707f;
position: relative;
min-height: 36px;
line-height: 36px;
}
.custom-select ul li:before {
content: "";
width: 2px;
height: 0;
position: absolute;
left: 0;
background: var(--brand_color);
transition: all 0.2s linear;
}
.custom-select ul li:hover, .custom-select ul li.selected {
background: #f4f9fa;
color: var(--brand_color);
font-weight: 500;
}
.custom-select ul li:hover:before, .custom-select ul li.selected:before {
height: 100%;
}  .breadcrumb_area_two {
background: #edfbfe;
padding: 150px 0 60px;
}
.breadcrumb_content {
max-width: 850px;
}
.breadcrumb_content h1 {
margin-bottom: 0;
}
.breadcrumb_content .single_post_author {
display: flex;
align-items: flex-start;
align-items: center;
padding-top: 15px;
}
.breadcrumb_content .single_post_author img {
border-radius: 50%;
width: 34px;
height: 34px;
margin-right: 20px;
}
.breadcrumb_content .single_post_author .text {
flex: 1;
}
.breadcrumb_content .single_post_author .text h4 {
font-size: 16px;
display: inline-block;
font-weight: 400;
margin-bottom: 0;
}
.breadcrumb_content .single_post_author .text .post_tag {
display: inline-block;
padding-left: 12px;
}
.breadcrumb_content .single_post_author .text .post_tag:before {
content: "";
display: inline-block;
height: 13px;
width: 1px;
background: #B7B9BE;
margin-right: 12px;
}  .breadcrumb_area_three {
background: #f8fafd;
padding: 170px 0 70px;
position: relative;
z-index: 1;
}
.breadcrumb_area_three .one {
top: 0;
left: 35px;
}
.breadcrumb_area_three .two {
left: 280px;
bottom: 55px;
}
.breadcrumb_area_three .three {
right: 178px;
bottom: 55px;
}
.breadcrumb_area_three .four {
right: 0;
bottom: 0;
}
.breadcrumb_text {
text-align: center;
max-width: 660px;
margin: 0 auto;
}
.breadcrumb_text h2 {
font-size: 50px;
line-height: 66px;
margin-bottom: 15px;
}
.breadcrumb_text h2 span {
font-weight: 700;
}
.breadcrumb_text p {
margin-bottom: 0;
}  .page_breadcrumb {
background: var(--black_50);
padding: 16px 0;
position: relative;
z-index: 1;
}
.page_breadcrumb .row {
align-items: center;
}
.page_breadcrumb .date {
color: var(--black_500);
float: right;
font-size: 14px;
}
.page_breadcrumb .date i {
padding-right: 5px;
}
.breadcrumb {
margin-bottom: 0;
background: transparent;
border-radius: 0;
padding: 0;
}
.breadcrumb .breadcrumb-item {
color: #878EA6;
font-size: 14px;
line-height: 21px;
}
.breadcrumb .breadcrumb-item a {
color: #878EA6;
}
.breadcrumb .breadcrumb-item a:hover {
color: var(--brand_color);
}
.breadcrumb .breadcrumb-item + .breadcrumb-item:before {
content: "5";
font-family: eleganticons;
color: #B7B9BE;
}
.breadcrumb .active {
color: var(--secondary_color);
}
.breadcrumb_content_two {
position: relative;
z-index: 1;
}
.breadcrumb_content_two h2 {
font-size: 50px;
color: #fff;
font-weight: 700;
}
.breadcrumb_content_two .breadcrumb {
justify-content: center;
}
.breadcrumb_content_two .breadcrumb .breadcrumb-item {
font-size: 16px;
color: #fff;
}
.breadcrumb_content_two .breadcrumb .breadcrumb-item:before {
color: #fff;
}
.breadcrumb_content_two .breadcrumb .breadcrumb-item a {
color: #fff;
}
.breadcrumb_area_four {
overflow: hidden;
}    .doc_features_area_one {
position: relative;
z-index: 1;
padding: 100px 0 140px;
}
.doc_features_area_one:before {
content: "";
width: 100%;
height: 460px;
top: 0;
left: 0;
position: absolute;
z-index: -1;
}
.doc_features_item_one {
border-radius: 6px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(4, 73, 89, 0.05);
padding: 30px;
transition: all 0.3s linear;
cursor: pointer;
}
.doc_features_item_one h3 {
font-size: 20px;
line-height: 24px;
margin-bottom: 15px;
transition: color 0.2s linear;
}
.doc_features_item_one h3:hover {
color: var(--brand_color);
}
.doc_features_item_one p {
line-height: 24px;
}
.doc_features_item_one img {
margin-right: 30px;
}
.doc_features_item_one .learn_btn {
font-size: 14px;
}
.doc_features_item_one .learn_btn i {
font-size: 20px;
margin-left: 4px;
}
.doc_features_item_one:hover {
box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.08);
}
.learn_btn {
font-size: 14px;
font-weight: 500;
color: var(--secondary_color);
padding-top: 5px;
display: inline-block;
transition: color 0.2s linear;
}
.learn_btn i {
vertical-align: middle;
display: inline-block;
font-size: 20px;
margin-left: 6px;
transition: all 0.2s linear, color 0s linear;
}
.learn_btn.c_blue {
color: var(--brand_color);
}
.learn_btn:hover {
color: var(--brand_color);
}
.learn_btn:hover i {
transform: translateX(8px);
}
.learn_btn:hover.c_blue {
color: var(--secondary_color);
}   .ycp .belah .luhur span.about {
display: none;
}
.ycp .belah .luhur {
height: 74px;
}
.ycp .belah .luhur span.tombol {
font-size: 14px;
}
.ycp .belah .luhur span.tombol.vid-next {
float: right;
margin-right: 0;
}   .doc_tag_area {
padding: 0 0 110px;
}
.doc_tag {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border: 0;
margin-bottom: 75px;
}
.doc_tag .nav-item {
margin-bottom: 0;
}
.doc_tag .nav-item .nav-link {
font-size: 14px;
font-weight: 400;
color: var(--brand_color);
border: 1px solid #79ccde;
border-radius: 4px;
background-color: rgba(16, 179, 214, 0.031);
padding: 0 20px;
line-height: 28px;
margin: 0 5px;
transition: all 0.4s linear;
}
.doc_tag .nav-item .nav-link:hover, .doc_tag .nav-item .nav-link.active {
background-color: var(--brand_color);
border-color: var(--brand_color);
color: #fff;
}
.doc_tag_title {
margin-bottom: 45px;
}
.doc_tag_title h4 {
font-size: 20px;
line-height: 26px;
margin-bottom: 20px;
}
.doc_tag_title .line {
height: 2px;
width: 100%;
background: #e1e9eb;
display: block;
}
.doc_tab_pane .row {
margin-bottom: -85px;
}
.doc_tag_item {
margin-bottom: 85px;
}
.tag_list {
margin-bottom: 32px;
}
.tag_list li {
margin-top: 15px;
}
.tag_list li a {
font-size: 16px;
color: var(--p_color);
line-height: 22px;
transition: color 0.2s linear;
display: flex;
}
.tag_list li a i {
margin-right: 15px;
}
.tag_list li a:hover {
color: var(--brand_color);
}  .documentation_tab {
border-bottom: 2px solid #e1e9eb;
}
.documentation_tab .nav-item {
margin-bottom: 0;
}
.documentation_tab .nav-item .nav-link {
border-radius: 0;
border: 0;
color: var(--p_color);
font-size: 14px;
font-weight: 500;
padding: 0 20px 10px;
position: relative;
transition: color 0.2s linear;
background: transparent;
}
.documentation_tab .nav-item .nav-link:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: -2px;
left: auto;
right: 0;
background: var(--brand_color);
transition: width 0.3s linear;
}
.documentation_tab .nav-item .nav-link.active, .documentation_tab .nav-item .nav-link:hover {
color: var(--brand_color);
}
.documentation_tab .nav-item .nav-link.active:before, .documentation_tab .nav-item .nav-link:hover:before {
width: 100%;
left: 0;
right: auto;
}
.documentation_tab_pane {
padding-top: 84px;
}
.documentation_tab_pane .row {
margin-bottom: -26px;
}
.documentation_text .round {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #0fccd0;
box-shadow: 0 20px 30px 0 rgba(24, 211, 214, 0.2);
display: block;
text-align: center;
line-height: 100px;
margin-bottom: 25px;
}
.documentation_text h4 {
font-size: 24px;
font-weight: 500;
margin-bottom: 18px;
}
.documentation_text p {
margin-bottom: 0;
}
.documentation_text .learn_btn {
padding-top: 20px;
}
.documentation_item {
padding-right: 40px;
margin-bottom: 58px;
}
.documentation_item .icon {
border-radius: 50%;
background-color: white;
box-shadow: 0 10px 30px 0 rgba(4, 73, 89, 0.12);
width: 70px;
height: 70px;
text-align: center;
line-height: 66px;
margin-right: 30px;
}
.documentation_item .media-body h5 {
font-weight: 500;
font-size: 18px;
margin-bottom: 12px;
transition: color 0.2s linear;
}
.documentation_item .media-body h5:hover {
color: var(--brand_color);
}
.documentation_item .media-body p {
margin-bottom: 0;
line-height: 24px;
}  .doc_faq_area .doc_tag {
margin-bottom: 50px;
}
.doc_faq_info .card {
border-radius: 4px;
background: #fff;
box-shadow: 0 20px 50px 0 rgba(4, 73, 89, 0.1);
border: 0;
margin-bottom: 30px;
}
.doc_faq_info .card .card-header {
padding: 0;
margin: 0;
border-radius: 0;
background: transparent;
border: 0;
}
.doc_faq_info .card .card-header h2 button {
display: block;
text-align: left;
width: 100%;
font-size: 18px;
line-height: 30px;
font-weight: 500;
color: var(--brand_color);
text-decoration: none;
padding: 19px 40px 19px 30px;
position: relative;
}
.doc_faq_info .card .card-header h2 button:focus {
box-shadow: none;
}
.doc_faq_info .card .card-header h2 button i {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
display: none;
}
.doc_faq_info .card .card-header h2 button i + i {
display: block;
}
.doc_faq_info .card .card-header h2 button.collapsed {
color: var(--secondary_color);
}
.doc_faq_info .card .card-header h2 button.collapsed i {
display: block;
}
.doc_faq_info .card .card-header h2 button.collapsed i + i {
display: none;
}
.doc_faq_info .card .card-body {
border: 0;
line-height: 24px;
padding: 0 30px 35px;
}
.doc_faq_info .card.active {
position: relative;
z-index: 1;
}  .doc_categories_guide_area {
position: relative;
z-index: 1;
}
.doc_categories_guide_area .shap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 490px;
z-index: -1;
background-size: cover;
}
.categories_guide_item {
border-radius: 6px;
background: #fff;
box-shadow: 0 50px 120px 0 rgba(4, 73, 89, 0.08);
padding: 40px 40px 50px;
margin-bottom: 30px;
}
.categories_guide_item img {
margin-bottom: 34px;
}
.categories_guide_item .doc_tag_title {
margin-bottom: 24px;
}
.categories_guide_item .doc_tag_title h4 {
margin-bottom: 0;
}
.categories_guide_item .tag_list {
margin-bottom: 42px;
margin-top: 22px;
}
.all_doc_btn {
padding: 10px 40px;
margin-top: 30px;
}  .doc_solution_area .all_doc_btn {
padding: 20px 73px;
font-size: 18px;
}
.doc_solution_area .all_doc_btn i {
font-size: 25px;
margin-left: 10px;
}
.doc_solution_item {
text-align: center;
padding: 60px;
margin-bottom: 30px;
}
.doc_solution_item img {
margin-bottom: 45px;
}
.doc_solution_item h4 {
font-size: 20px;
margin-bottom: 15px;
}
.doc_solution_item p {
margin-bottom: 20px;
}
.doc_solution_item.online_doc {
background: #fcf3da;
}
.doc_solution_item.premium_doc {
background: #daecfc;
}  .doc_fun_fact_area {
background: var(--brand_color);
padding: 105px 0;
position: relative;
z-index: 1;
}
.animated-wave {
position: absolute;
height: 200px;
width: 100%;
bottom: 0;
left: 0;
z-index: -1;
}
.doc_fact_item {
text-align: center;
}
.doc_fact_item .counter {
color: #fff;
font-size: 50px;
line-height: 60px;
font-weight: 700;
}
.doc_fact_item p {
margin-bottom: 0;
font-size: 18px;
color: #fff;
padding-top: 5px;
} .active-animation .path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash 5s ease-in-out forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.funfact-area {
padding: 115px 0 90px;
background-image: linear-gradient(45deg, #f5fdff 0%, #feefec 100%);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.funfact-area .smile {
position: absolute;
width: 200px;
height: 200px;
right: 95px;
top: -25px;
}
.funfact-boxes {
display: flex;
justify-content: space-between;
}
@media (max-width: 992px) {
.funfact-boxes {
flex-wrap: wrap;
justify-content: center;
width: calc(100% + 30px);
}
}
@media (max-width: 420px) {
.funfact-boxes {
width: calc(100% + 15px);
}
}
.funfact-boxes .funfact-box {
border-radius: 10px;
background: #fff;
box-shadow: 0px 50px 80px 0px rgba(2, 47, 57, 0.12);
min-width: 140px;
padding: 30px 25px 20px;
margin-bottom: 30px;
}
@media (max-width: 992px) {
.funfact-boxes .funfact-box {
width: calc(33.33% - 30px);
margin-right: 30px;
}
}
@media (max-width: 420px) {
.funfact-boxes .funfact-box {
width: calc(50% - 15px);
margin-right: 15px;
}
}
.funfact-boxes .funfact-box .fanfact-icon {
margin-bottom: 20px;
}
.funfact-boxes .funfact-box .fanfact-icon img {
-webkit-filter: drop-shadow(0px 20px 40px #086174);
filter: drop-shadow(0px 20px 40px #086174);
}
.funfact-boxes .funfact-box .counter {
font-size: 34px;
font-weight: 500;
color: var(--brand_color);
margin-bottom: 10px;
}
.funfact-boxes .funfact-box .title {
color: var(--p_color);
font-size: 16px;
margin: 0;
line-height: 26px;
}
.funfact-boxes .funfact-box.color-two .fanfact-icon img {
-webkit-filter: drop-shadow(0px 20px 40px #734F08);
filter: drop-shadow(0px 20px 40px #734F08);
}
.funfact-boxes .funfact-box.color-two .counter {
color: #fbb631;
}
.funfact-boxes .funfact-box.color-three .fanfact-icon img {
-webkit-filter: drop-shadow(0px 20px 40px #73083F);
filter: drop-shadow(0px 20px 40px #73083F);
}
.funfact-boxes .funfact-box.color-three .counter {
color: #fd5baf;
}
.funfact-boxes .funfact-box.color-four .fanfact-icon img {
-webkit-filter: drop-shadow(0px 20px 40px #087358);
filter: drop-shadow(0px 20px 40px #087358);
}
.funfact-boxes .funfact-box.color-four .counter {
color: #11c296;
}
.funfact-boxes .funfact-box.color-five .fanfact-icon img {
-webkit-filter: drop-shadow(0px 20px 40px #2C0873);
filter: drop-shadow(0px 20px 40px #2C0873);
}
.funfact-boxes .funfact-box.color-five .counter {
color: #9360fc;
}  .theme_doc_area .row {
margin-bottom: -30px;
}
.theme_doc_item {
box-shadow: 0 4px 8px 0 rgba(4, 73, 89, 0.05);
border-radius: 6px;
background: #fff;
padding: 30px;
margin-bottom: 30px;
transition: all 0.3s linear;
cursor: pointer;
}
.theme_doc_item img {
margin-right: 30px;
}
.theme_doc_item .c_head {
margin-bottom: 14px;
transition: color 0.2s linear;
}
.theme_doc_item .c_head:hover {
color: var(--brand_color);
}
.theme_doc_item p {
margin-bottom: 0;
}
.theme_doc_item:hover {
box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.08);
}  .doc_action_info {
border-radius: 4px;
background: #fff;
box-shadow: 0 50px 150px 0 rgba(4, 73, 89, 0.1);
padding: 88px 70px;
position: relative;
z-index: 2;
}
.doc_action_info.mt_130 {
margin-bottom: -130px;
}
.doc_action_info .media img {
margin-right: 30px;
}
.doc_action_info .media .media-body h2 {
margin-bottom: 13px;
}
.doc_action_info .media .media-body p {
margin-bottom: 0;
font-size: 18px;
}
.doc_action_info .action_btn {
box-shadow: none;
}
.doc_action_info .action_btn:hover {
box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
color: #fff;
}  .doc_action_area_three {
background: var(--secondary_color);
padding: 140px 0;
position: relative;
z-index: 1;
}
.doc_action_area_three .shadows {
left: 40%;
transform: translateX(-50%);
top: 0;
z-index: -1;
}
.doc_action_area_three .b_man {
right: 100px;
bottom: 0;
}
@media (max-width: 1400px) {
.doc_action_area_three .b_man {
right: 0;
}
}
.action_content h2 {
font-size: 36px;
line-height: 48px;
font-weight: 300;
color: #fff;
margin-bottom: 15px;
margin-top: -10px;
}
.action_content h2 span {
font-weight: 700;
}
.action_content p {
font-size: 18px;
color: #aeb5ca;
margin-bottom: 0;
}
.action_subscribe_form .form-group {
position: relative;
}
.action_subscribe_form .form-group .form-control {
height: 70px;
line-height: 70px;
}
.action_subscribe_form .form-group .form-control.placeholder {
color: #a0a1a1;
}
.action_subscribe_form .form-group .form-control:-moz-placeholder {
color: #a0a1a1;
}
.action_subscribe_form .form-group .form-control::-moz-placeholder {
color: #a0a1a1;
}
.action_subscribe_form .form-group .form-control::-webkit-input-placeholder {
color: #a0a1a1;
}
.action_subscribe_form .form-group .s_btn {
padding: 7px 29px;
transition: all 0.2s linear;
}
.action_subscribe_form .form-group .s_btn i {
vertical-align: middle;
font-size: 20px;
transition: all 0.2s linear;
display: inline-block;
}
.action_subscribe_form .form-group .s_btn:hover {
background: var(--secondary_color);
}
.action_subscribe_form .form-group .s_btn:hover i {
transform: translateX(5px);
}
.action_subscribe_form .form-check {
padding-left: 25px;
}
.action_subscribe_form .form-check input[type=checkbox] {
position: relative;
appearance: none;
outline: none;
border: none;
cursor: pointer;
outline-width: 0;
height: auto;
position: absolute;
margin: 0;
left: 0;
top: 5px;
}
.action_subscribe_form .form-check input[type=checkbox]:before,
.action_subscribe_form .form-check input[type=checkbox]:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border: 1px solid #aeb5ca;
border-radius: 2px;
}
.action_subscribe_form .form-check input[type=checkbox]:before {
width: 14px;
height: 14px;
}
.action_subscribe_form .form-check input[type=checkbox]:after {
content: "";
display: block;
width: 6px;
height: 10px;
border: solid var(--brand_color);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
left: 4px;
opacity: 0;
}
.action_subscribe_form .form-check input[type=checkbox]:checked:before {
border-color: var(--brand_color);
}
.action_subscribe_form .form-check input[type=checkbox]:checked:after {
opacity: 1;
}
.action_subscribe_form .form-check label {
position: relative;
font-size: 15px;
color: #aeb5ca;
font-weight: 500;
}  .fact_navigation_info {
border-radius: 4px;
background-color: white;
box-shadow: 0 20px 40px 0 rgba(4, 73, 89, 0.1);
padding: 40px 40px 28px;
}
.fact_navigation {
border: 0;
padding-top: 8px;
margin: 0;
}
.fact_navigation .nav-item {
display: block;
width: 100%;
padding: 12px 0;
}
.fact_navigation .nav-item .nav-link {
display: block;
padding: 0;
font-size: 16px;
font-weight: 500;
color: rgba(16, 179, 214, 0.5);
position: relative;
padding-left: 28px;
border: 0;
border-radius: 0;
transition: all 0.2s linear;
}
.fact_navigation .nav-item .nav-link:before {
content: "5";
font-family: eleganticons;
font-size: 20px;
position: absolute;
right: 0;
}
.fact_navigation .nav-item .nav-link i {
position: absolute;
left: 0;
top: 2px;
}
.fact_navigation .nav-item .nav-link.active, .fact_navigation .nav-item .nav-link:hover {
color: var(--brand_color);
}
.fact_navigation .nav-item .nav-link.active:before, .fact_navigation .nav-item .nav-link:hover:before {
color: var(--brand_color);
}
.fact_navigation .nav-item + li {
border-top: 1px solid #e6eeef;
}    .overlay_bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(9, 19, 50, 0.8);
}
.slider_nav {
.arrow {
width: 25px;
height: 2px;
background: #989dad;
transition: all 0.3s ease-in-out;
display: block;
margin-top: 12px;
&:before, &:after {
content: "";
position: absolute;
width: 15px;
height: 2px;
left: -2px;
background-color: #bdb4b4;
transition: all 0.3s ease-in-out;
}
}
.prev, .next {
height: 25px;
width: 27px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease-in-out;
cursor: pointer;
&:hover {
width: 40px;
.arrow {
width: 40px;
background: var(--brand_color);
&:before, &:after {
background: var(--brand_color);
}
}
}
}
.prev {
left: 0;
.arrow {
&:before {
top: 17px;
transform: rotate(45deg);
}
&:after {
top: 7px;
transform: rotate(-45deg);
}
}
&:hover {
left: 25px;
}
}
.next {
right: 0;
.arrow {
&:before {
transform: rotate(-45deg);
right: -1px;
left: auto;
bottom: 6px;
}
&:after {
transform: rotate(45deg);
right: -1px;
left: auto;
top: 6px;
}
}
&:hover {
right: 25px;
}
}
}
.doc_feedback_slider {
max-width: 770px;
margin: 0 auto 0 !important;
text-align: center;
}
.doc_feedback_slider .item .author_img {
border-radius: 50%;
width: 60px;
height: 60px;
overflow: hidden;
margin: 0 auto 43px;
}
.doc_feedback_slider .item p {
font-size: 18px;
color: #fff;
line-height: 30px;
margin-bottom: 38px;
}
.doc_feedback_slider .item h5 {
font-size: 20px;
font-weight: 500;
color: #fff;
}
.doc_feedback_slider .item h6 {
font-size: 16px;
color: #989dad;
font-weight: 400;
margin-bottom: 0;
}  .doc_action_area {
position: relative;
z-index: 1;
padding: 93px 0;
}
.doc_action_area .overlay_bg {
background-image: linear-gradient(180deg, rgba(4, 133, 161, 0.6) 0%, rgba(29, 39, 70, 0.6) 100%);
}
.doc_action_area .action_btn {
border: 1px solid var(--brand_color);
}
.doc_action_area .action_btn:hover {
background: transparent;
border-color: #fff;
color: #fff;
}
.action_text h2 {
color: #fff;
font-size: 40px;
font-weight: 500;
}
.action_text p {
font-size: 18px;
line-height: 28px;
color: #b4b9c8;
margin-bottom: 0;
}   @keyframes wave2 {
25% {
transform-origin: 0 100%;
}
50% {
transform: scale(1.8, 1.3);
}
75% {
transform-origin: 100% 100%;
}
100% {
transform: scale(1, 1.3);
}
}
@keyframes wave4 {
25% {
transform: scaleY(0.9);
}
75% {
transform: scaleY(1.1) scaleX(1.02);
}
}
@keyframes star {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(0.8);
opacity: 1;
}
75% {
transform: scale(1) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(1.01) rotate(-5deg);
opacity: 1;
}
}
@keyframes star2 {
0% {
transform: scale(0.3);
}
50% {
transform: scale(0.8);
}
75% {
transform: scale(1);
}
100% {
transform: scale(1.01);
}
}
@-webkit-keyframes spin {
0% {
transform: translateX(-10px) scale(0.9);
}
100% {
transform: translateX(30px) scale(1.3) translateY(10px);
}
}
@keyframes spin {
0% {
transform: translateX(-10px) scale(0.9);
}
100% {
transform: translateX(30px) scale(1.3) translateY(10px);
}
}
@-webkit-keyframes spin1 {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.5);
}
}
@keyframes spin1 {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.5);
}
}
@-webkit-keyframes spin2 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(40px);
}
}
@keyframes spin2 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(40px);
}
}
@-webkit-keyframes pulse1 {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.5);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(4.5);
border-radius: 50%;
}
}
@keyframes pulse1 {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.5);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(4.5);
border-radius: 50%;
}
}
@keyframes customUp {
0% {
transform: translateY(8px);
}
100% {
transform: translateY(0);
}
}
@keyframes clipInDown {
0% {
clip-path: polygon(-10% -10%, -10% -10%, 110% -10%, 110% -10%);
}
100% {
clip-path: polygon(-10% 110%, -10% -10%, 110% -10%, 110% 110%);
}
}
.clipInDown {
animation-name: clipInDown;
} #preloader {
background: #fff;
height: 100%;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#preloader .loading {
display: flex;
}
#preloader .ctn-preloader {
padding-left: 15px;
padding-right: 15px;
}
#preloader .spinner {
animation: spinner 3s infinite linear;
border-radius: 50%;
border: 3px solid #f1f6f8;
border-left-color: var(--brand_color);
border-top-color: var(--brand_color);
margin: 0 auto 0em auto;
position: absolute;
left: -40px;
right: -40px;
bottom: -40px;
top: -40px;
}
#preloader .spinner:before {
content: "";
width: 20px;
height: 20px;
border: 6px solid #fff;
box-shadow: 0 0 20px 0 rgba(4, 46, 56, 0.2);
background: var(--brand_color);
position: absolute;
right: 31px;
top: 41px;
border-radius: 50%;
}
@media (max-width: 576px) {
#preloader .spinner:before {
top: 18px;
}
}
#preloader .round_spinner {
border-width: 1px;
border-color: #eef3f4;
border-style: solid;
border-radius: 50%;
background-color: #fdfdfd;
box-shadow: 0 0 100px 0 rgba(4, 46, 56, 0.14);
width: 248px;
height: 248px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 40px auto 80px;
}
@media (max-width: 576px) {
#preloader .round_spinner {
width: 155px;
height: 155px;
}
}
#preloader .round_spinner h4 {
font-size: 30px;
font-weight: 400;
margin-bottom: 0;
color: var(--secondary_color);
}
#preloader .round_spinner h4 span {
font-weight: 700;
}
#preloader .head {
color: var(--secondary_color);
display: block;
font-size: 26px;
font-weight: 700;
letter-spacing: 5.2px;
text-transform: uppercase;
text-align: center;
font-family: "Roboto", sans-serif;
margin: 5% 0 1% 0;
padding: 0;
}
#preloader p {
color: var(--p_color);
display: block;
font-size: 14px;
font-weight: 400;
text-align: center;
border: none;
margin: 0;
padding: 0;
}
@keyframes spinner {
to {
transform: rotateZ(360deg);
}
} .documentation_info .slideshow {
width: auto;
height: 600px;
}
.documentation_info .slideshow .slide {
width: inherit;
height: inherit;
}
.documentation_info .slideshow .slide .item--horse {
top: 124px;
left: 78px;
}
.documentation_info .slideshow .nav {
display: none;
}
.documentation_info .slideshow .title {
color: var(--brand_color);
}
.sticky-nav-doc #documentation {
padding-top: 174px;
}
.documentation_body {
padding-top: 60px;
}
.documentation_body footer .border_bottom {
margin-top: 100px;
}
.link {
background: #f1fdf3;
padding: 14px 10px 14px 30px;
border-radius: 4px;
}
.link p {
position: relative;
margin-bottom: 0;
padding-left: 40px;
}
.link p:before {
content: "R";
position: absolute;
font-family: eleganticons;
left: 0;
top: 4px;
font-size: 24px;
color: #10d631;
}
.test_version {
padding-top: 45px;
}
.test_version p {
font-size: 16px;
}
.test_version p span {
color: var(--secondary_color);
}
.v_menu {
border-bottom: 1px solid #e8ecee;
padding-bottom: 20px;
padding-top: 5px;
margin-bottom: 20px;
}
.v_menu .nav-item {
display: inline-block;
}
.v_menu .nav-item .nav-link {
font-size: 16px;
color: var(--p_color);
transition: all 0.2s linear;
padding: 0;
border: 0;
border-radius: 0;
text-decoration: none;
}
.v_menu .nav-item .nav-link span {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--black_50);
display: inline-block;
text-align: center;
line-height: 20px;
font-size: 12px;
margin-right: 10px;
transition: all 0.2s linear;
}
.v_menu .nav-item .nav-link.active, .v_menu .nav-item .nav-link:hover {
color: var(--brand_color);
border: 0;
background: transparent;
}
.v_menu .nav-item .nav-link.active span, .v_menu .nav-item .nav-link:hover span {
background: var(--brand_color);
color: #fff;
}
.v_menu .nav-item + li {
margin-left: 50px;
}
.process_tab_shortcode .version {
background: #f8fafb;
padding: 30px;
font-size: 15px;
margin-bottom: 20px;
}
.process_tab_shortcode .version p {
margin-bottom: 20px;
}
.process_tab_shortcode .version p:last-child {
margin-bottom: 0;
}
.process_tab_shortcode .version .v_head {
padding-bottom: 24px;
}
.process_tab_shortcode .version .v_middle p {
margin-bottom: 0;
font-size: 15px;
}
.process_tab_shortcode .version .v_middle p .red {
color: #f12249;
}
.process_tab_shortcode .version .v_middle p .green {
color: #11c52f;
}
.process_tab_shortcode .version .v_footer {
padding-top: 25px;
}
.process_tab_shortcode .version .v_footer p {
margin-bottom: 0;
}
.developer {
padding: 34px 0 20px;
}
.developer p a {
color: var(--brand_color);
}
.developer .tag_list li {
margin-top: 10px;
}
.developer .tag_list li i {
padding-right: 10px;
}
.code_structure {
padding-top: 50px;
}
.code_structure .c_head {
margin-bottom: 8px;
}
.process_tab_shortcode {
position: relative;
overflow: hidden;
}
.process_tab_shortcode .previous, .process_tab_shortcode .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0;
border-radius: 0;
background: #e7f7fb;
border: 0;
color: var(--brand_color);
outline: none;
box-shadow: none;
transition: all 0.4s linear;
}
.process_tab_shortcode .previous:focus, .process_tab_shortcode .next:focus {
outline: none;
box-shadow: none;
}
.process_tab_shortcode .previous:hover, .process_tab_shortcode .next:hover {
outline: none;
box-shadow: none;
background: var(--brand_color);
color: #fff;
}
.process_tab_shortcode .next {
right: -30px;
}
.process_tab_shortcode .previous {
left: -30px;
}
.process_tab_shortcode:hover .next {
right: 0;
}
.process_tab_shortcode:hover .previous {
left: 0;
}
.question_box {
padding-top: 35px;
padding-bottom: 70px;
}
.question_box .question_text h4 {
font-size: 18px;
font-weight: 500;
margin-bottom: 18px;
}
.question_box .question_text p a {
color: var(--brand_color);
}
.question_box .question_text_two {
padding-left: 50px;
}
.question_box .signup_form {
padding-top: 10px;
padding-bottom: 20px;
}
.question_box .signup_form .input-group {
border-radius: 4px;
background-color: white;
box-shadow: 0 2px 6px 0 rgba(2, 48, 58, 0.14);
}
.question_box .signup_form .input-group .form-control {
background: transparent;
border: 0;
font-size: 16px;
color: var(--secondary_color);
box-shadow: none;
padding-left: 20px;
height: 50px;
}
.question_box .signup_form .input-group .form-control.placeholder {
color: #9c9fa9;
}
.question_box .signup_form .input-group .form-control:-moz-placeholder {
color: #9c9fa9;
}
.question_box .signup_form .input-group .form-control::-moz-placeholder {
color: #9c9fa9;
}
.question_box .signup_form .input-group .form-control::-webkit-input-placeholder {
color: #9c9fa9;
}
.question_box .signup_form .input-group button {
background: transparent;
border: 0;
font-size: 16px;
font-weight: 500;
color: var(--brand_color);
padding: 0 20px;
position: relative;
}
.question_box .signup_form .input-group button:before {
content: "";
width: 1px;
background: #e8ecee;
top: 8px;
bottom: 8px;
left: 0;
position: absolute;
}
.contact_form .form-group {
margin-bottom: 30px;
}
.contact_form .form-group .form-control, .contact_form .form-group textarea {
border: 1px solid #f4f8f8;
height: 58px;
border-radius: 4px;
background-color: white;
box-shadow: 0 4px 10px 0 rgba(4, 73, 89, 0.08);
color: #878b99;
font-weight: 400;
padding-left: 30px;
}
.contact_form .form-group .form-control.placeholder, .contact_form .form-group textarea.placeholder {
color: #878b99;
}
.contact_form .form-group .form-control:-moz-placeholder, .contact_form .form-group textarea:-moz-placeholder {
color: #878b99;
}
.contact_form .form-group .form-control::-moz-placeholder, .contact_form .form-group textarea::-moz-placeholder {
color: #878b99;
}
.contact_form .form-group .form-control::-webkit-input-placeholder,
.contact_form .form-group textarea::-webkit-input-placeholder {
color: #878b99;
}
.contact_form .form-group .form-control:focus, .contact_form .form-group textarea:focus {
box-shadow: 0 20px 30px 0 rgba(4, 73, 89, 0.1);
}
.contact_form .form-group textarea {
width: 100%;
height: 160px;
padding-top: 20px;
display: block;
}
.contact_form .form-group .action_btn {
border: 0;
padding: 15px 40px;
box-shadow: none;
font-weight: 500;
}
.contact_form .form-group .action_btn:hover {
box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
} .mobile_menu {
width: 300px;
position: fixed;
height: 100vh;
max-height: 100vh !important;
top: 0;
background: #fff;
right: -300px;
z-index: 1050;
transition: all 0.4s linear;
}
.mobile_menu .doc_left_sidebarlist {
padding-left: 20px;
}
.mobile_menu .doc_left_sidebarlist:before {
display: none;
}
.mobile_menu.open {
right: 0;
}
.mobile_menu .close_nav {
padding-top: 20px;
padding-left: 30px;
font-size: 28px;
} .sticky_menu .doc_documentation_area.body_fixed .doc_left_sidebarlist,
.sticky_menu .doc_documentation_area.body_fixed .doc_rightsidebar {
top: 100px;
}
.resource .c_head {
margin-bottom: 5px;
}
.resource .tag_list {
padding-top: 0;
}
.resource .tag_list li {
margin-top: 4px;
}
.resource .tag_list li a {
display: inline-block;
font-weight: 500;
} .typography_content .code-preview {
border: 1px solid #e5ebef;
padding: 20px;
box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.02);
position: relative;
}
.typography_content .code-preview #header-name {
margin-bottom: 0;
}
.typography_content .code-preview img {
max-width: 100%;
}
.typography_content .code-preview.video_img {
display: inline-block;
}
.typography_content .code-toolbar .snippets {
margin-bottom: 0;
}
.typography_content .code-toolbar .snippets code {
margin-bottom: 20px;
}
.typography_content .code_item {
padding-top: 15px;
}
.typography_content .code_item p a {
color: var(--brand_color);
}
.vjs-iframe-blocker {
display: none;
}
.video-js {
margin: 0 auto;
width: 100%;
max-width: 640px;
height: 360px;
}
.video-js .mfp-close {
right: -55px;
top: -10px;
} .nav_title {
font-size: 16px;
text-transform: uppercase;
color: #fff;
background: var(--secondary_color);
border-radius: 4px;
line-height: 22px;
padding: 13px 30px;
margin-bottom: 0;
}  .status-chart {
padding: 62px 0 112px;
}
.status-chart .section_title {
margin-bottom: 70px;
}
.docly-chart-wrapper {
position: relative;
}
.full-amount {
position: absolute;
height: 230px;
width: 230px;
padding: 100px 0;
text-align: center;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
font-size: 30px;
font-weight: 700;
top: 50%;
left: 50%;
z-index: 99;
transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
.full-amount {
display: none;
}
}
@media (max-width: 1200px) {
.full-amount {
height: 200px;
width: 200px;
padding: 85px 0;
}
}
@media (max-width: 1200px) {
.full-amount {
height: 150px;
width: 150px;
padding: 58px 0;
}
}
@media (max-width: 768px) {
.full-amount {
padding: 40px 0;
height: 100px;
width: 100px;
}
}
.full-amount:before {
content: "";
position: absolute;
left: 30px;
top: 30px;
background: #ffffff;
border-radius: 50%;
height: 170px;
width: 170px;
}
@media (max-width: 1200px) {
.full-amount:before {
height: 110px;
width: 110px;
left: 20px;
top: 20px;
}
}
@media (max-width: 991px) {
.full-amount:before {
height: 110px;
width: 110px;
left: 20px;
top: 20px;
}
}
@media (max-width: 768px) {
.full-amount:before {
height: 80px;
width: 80px;
left: 10px;
top: 10px;
}
}
.full-amount .total-count {
position: relative;
z-index: 22;
color: #a262f8;
font-size: 30px;
font-weight: 700;
}
@media (max-width: 768px) and (max-width: 768px) {
.full-amount .total-count {
font-size: 20px;
}
}
@media (max-width: 768px) {
.canvas {
height: 100vh;
width: 100vw;
}
}
.chart-info {
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
list-style: none;
}
@media (max-width: 1200px) {
.chart-info {
z-index: -1;
}
}
@media (max-width: 768px) {
.chart-info {
display: none;
}
}
.chart-info li {
position: absolute;
width: 370px;
}
.chart-info li .counterup {
font-size: 34px;
font-weight: 500;
color: #42dabf;
margin-bottom: 5px;
}
.chart-info li .border-image {
position: absolute;
}
.chart-info li .border-image img {
width: 100%;
}
.chart-info li .border-image svg {
position: absolute;
}
.chart-info li .border-image:before {
content: "";
height: 8px;
width: 8px;
border-radius: 50%;
background: #42dabf;
position: absolute;
left: 0px;
top: -3px;
z-index: 2;
}
.chart-info li.color-two .counterup {
color: #f9327a;
}
.chart-info li.color-two .border-image:before {
left: auto;
right: 0;
background: #fa5d96;
}
.chart-info li.color-three .counterup {
color: #35bae9;
}
.chart-info li.color-three .border-image:before {
top: 55px;
background: #35bae9;
}
.chart-info li.color-four .counterup {
color: #fcc103;
}
.chart-info li.color-four .border-image:before {
top: 55px;
left: auto;
right: 0;
background: #fcc103;
}
.chart-info li p {
max-width: 210px;
margin: 23px 0 0;
}
.chart-info li.info-left-top {
top: 0;
left: 30px;
}
.chart-info li.info-left-top svg {
max-width: 370px;
}
@media (max-width: 1200px) {
.chart-info li.info-left-top .border-image {
max-width: 292px;
}
.chart-info li.info-left-top .border-image svg {
max-width: 280px;
}
.chart-info li.info-left-top .border-image:before {
top: 4px;
}
}
@media (max-width: 991px) {
.chart-info li.info-left-top {
left: 0;
}
.chart-info li.info-left-top .border-image {
max-width: 210px;
}
.chart-info li.info-left-top .border-image svg {
max-width: 220px;
}
.chart-info li.info-left-top .border-image:before {
top: 9px;
}
}
.chart-info li.info-right-top {
right: 125px;
top: 35px;
width: 330px;
text-align: right;
}
@media (max-width: 991px) {
.chart-info li.info-right-top {
top: 20px;
}
}
.chart-info li.info-right-top p {
margin-left: auto;
}
.chart-info li.info-right-top svg {
max-width: 330px;
right: 0;
}
.chart-info li.info-right-top .border-image {
right: 0;
}
@media (max-width: 1200px) {
.chart-info li.info-right-top .border-image {
width: 230px;
}
.chart-info li.info-right-top .border-image svg {
max-width: 251px;
right: 0;
height: 40px;
}
}
@media (max-width: 992px) {
.chart-info li.info-right-top {
right: 40px;
}
.chart-info li.info-right-top .border-image {
width: 185px;
}
}
.chart-info li.info-left-bottom {
bottom: 0;
left: 0;
width: 350px;
margin-left: 75px;
}
@media (max-width: 1200px) {
.chart-info li.info-left-bottom {
margin-left: 0;
}
}
.chart-info li.info-left-bottom .border-image {
bottom: 115px;
}
@media (max-width: 1200px) {
.chart-info li.info-left-bottom .border-image {
width: 330px;
}
}
@media (max-width: 991px) {
.chart-info li.info-left-bottom {
margin-left: 0;
}
.chart-info li.info-left-bottom .border-image {
width: 240px;
overflow: hidden;
height: 80px;
bottom: 40px;
}
.chart-info li.info-left-bottom .border-image svg {
max-width: 325px;
left: -90px;
}
}
.chart-info li.info-right-bottom {
right: 50px;
bottom: -9px;
text-align: right;
}
.chart-info li.info-right-bottom p {
margin-left: auto;
}
.chart-info li.info-right-bottom .border-image {
right: 0;
bottom: 122px;
}
.chart-info li.info-right-bottom .border-image svg {
right: 0;
}
@media (max-width: 1200px) {
.chart-info li.info-right-bottom .border-image {
width: 271px;
}
.chart-info li.info-right-bottom .border-image svg {
width: 320px;
}
}
@media (max-width: 991px) {
.chart-info li.info-right-bottom .border-image {
width: 175px;
}
.chart-info li.info-right-bottom .border-image svg {
width: 230px;
}
}  .related-communities {
padding: 55px 0 50px;
}
.related-communities .section_title {
margin-bottom: 70px;
}
.dmt-4 {
margin-top: 38px;
}
.communities-boxes {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -15px;
}
@media (max-width: 992px) {
.communities-boxes {
flex-wrap: wrap;
justify-content: center;
width: calc(100% + 30px);
}
}
@media (max-width: 420px) {
.communities-boxes {
width: calc(100% + 15px);
}
}
.communities-boxes .docly-com-box {
text-align: center;
margin-bottom: 57px;
width: 20%;
flex: 0 0 205px;
}
@media (max-width: 1200px) {
.communities-boxes .docly-com-box {
flex: 0 0 165px;
}
}
@media (max-width: 991px) {
.communities-boxes .docly-com-box {
flex: 0 0 180px;
}
}
@media (max-width: 768px) {
.communities-boxes .docly-com-box {
flex: 0 0 185px;
}
}
@media (max-width: 420px) {
.communities-boxes .docly-com-box {
flex: 0 0 150px;
}
}
.communities-boxes .docly-com-box .icon-container {
border-radius: 6px;
background: #fff;
box-shadow: 0px 40px 70px 0px rgba(2, 47, 57, 0.1);
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
margin: 0 auto 34px;
}
.communities-boxes .docly-com-box .docly-com-box-content .title {
font-size: 20px;
line-height: 26px;
font-weight: 500;
color: var(--secondary_color);
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
}
.communities-boxes .docly-com-box .docly-com-box-content .title a {
color: var(--secondary_color);
}
.communities-boxes .docly-com-box .docly-com-box-content .title a:hover {
color: var(--brand_color);
}
.communities-boxes .docly-com-box .docly-com-box-content .title:hover {
color: var(--brand_color);
}
.communities-boxes .docly-com-box .docly-com-box-content .total-post {
color: var(--p_color);
font-size: 14px;
}
.more-communities {
padding: 22px 0;
border-top: 1px solid #e8ecee;
border-bottom: 1px solid #e8ecee;
}
.more-communities .collapse-btn {
text-align: center;
display: block;
color: var(--brand_color);
font-weight: 500;
}
.more-communities .collapse-btn i {
vertical-align: -1px;
}
.more-communities .collapse-btn.active i:before {
content: "K";
}
.more-communities .collapse-wrap {
margin-top: 80px;
display: none;
}  .about-journalism {
background: #fafcfd;
overflow: hidden;
position: relative;
}
.light-header {
position: absolute;
bottom: -23px;
left: 0;
width: 100%;
text-align: center;
}
@media (max-width: 768px) {
.light-header {
bottom: -10px;
}
}
.light-header .title-light {
color: #eff4f7;
font-size: 60px;
font-weight: 700;
line-height: 1;
margin: 0;
}
@media (max-width: 768px) {
.light-header .title-light {
font-size: 30px;
bottom: -10px;
}
}
.journalism-content-wrapper {
max-width: 550px;
padding: 113px 0 65px;
}
@media (max-width: 1480px) {
.journalism-content-wrapper {
padding: 83px 0 35px;
}
}
.journalism-content-wrapper .quote {
margin-left: -20px;
}
.journalism-content-wrapper .journalism-title {
font-size: 30px;
line-height: 40px;
color: var(--secondary_color);
font-weight: 700;
margin-bottom: 20px;
}
.journalism-content-wrapper p {
font-size: 20px;
color: var(--p_color);
line-height: 34px;
margin-bottom: 40px;
}
.journalism-content-wrapper .journalism-info .name {
color: var(--secondary_color);
font-size: 16px;
margin: 0;
}
.journalism-content-wrapper .journalism-info .designation {
font-size: 14px;
color: var(--p_color);
}
.journalism-feature-image {
position: relative;
margin-top: 20px;
}
@media (max-width: 992px) {
.journalism-feature-image {
margin-left: 20px;
}
}
.journalism-feature-image:before {
content: "";
position: absolute;
height: 600px;
width: 600px;
background-image: linear-gradient(45deg, #ecf9fc 0%, #feefec 100%);
border-radius: 50%;
z-index: 1;
left: 20px;
top: 85px;
}
@media (max-width: 992px) {
.journalism-feature-image:before {
left: -20px;
top: 15px;
}
}
.journalism-feature-image img {
margin-left: -27px;
position: relative;
z-index: 2;
}
@media (max-width: 1480px) {
.journalism-feature-image {
margin-top: 80px;
}
.journalism-feature-image img {
width: 500px;
}
.journalism-feature-image:before {
height: 500px;
width: 500px;
}
}
@media (max-width: 992px) {
.journalism-feature-image img {
max-width: 500px;
}
}
@media (max-width: 576px) {
.journalism-feature-image img {
max-width: 300px;
}
}
@media (max-width: 576px) {
.journalism-feature-image:before {
width: 300px;
height: 300px;
}
}
@media (max-width: 992px) {
.md-order-two {
order: 2;
}
}  .communities {
padding: 115px 0 90px;
}
.community-box {
border: 1px solid #f6f9fa;
border-radius: 10px;
background: #fff;
box-shadow: 0px 2px 3px 0px rgba(2, 47, 57, 0.14);
text-align: center;
padding: 40px 70px;
transition: all 0.3s ease-in-out;
margin-bottom: 30px;
overflow: hidden;
}
.community-box:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 100%;
background: transparent;
transition: all 0.3s ease-in-out;
}
.community-box .icon-container {
margin-bottom: 33px;
}
.community-box .community-content .com-title {
font-size: 18px;
line-height: 28px;
font-weight: 400;
color: var(--p_color);
margin-bottom: 27px;
}
.community-box .community-content .details-link {
color: #9296a3;
font-size: 16px;
font-weight: 500;
}
.community-box .community-content .details-link i {
display: inline-block;
vertical-align: -2px;
transition: all 0.3s ease-in-out;
color: #9296a3;
}
.community-box .community-content .details-link:hover {
color: #26c6da;
}
.community-box .community-content .details-link:hover i {
color: #26c6da;
margin-left: 3px;
}
.community-box:hover {
box-shadow: 0px 40px 30px 0px rgba(2, 47, 57, 0.1);
transform: translateY(-5px);
}
.community-box:hover:before {
background: var(--brand_color);
}  .community-posts-area {
padding: 110px 0 120px;
}
.community-posts-area .section_title {
margin-bottom: 73px;
}
.community-post {
border-radius: 6px;
background-color: #fff;
box-shadow: 0 2px 8px 0 rgba(2, 47, 57, 0.1);
padding: 23px 30px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
border: 1px solid transparent;
}
.community-post.forum-item {
padding: 23px 15px;
}
.community-post.forum-item .post-content p {
font-size: 14px;
line-height: 1.3;
}
@media (max-width: 667px) {
.community-post {
display: block;
}
}
@media (max-width: 420px) {
.community-post {
padding: 20px 15px;
}
}
.community-post:hover {
box-shadow: 0 24px 40px 0 rgba(2, 47, 57, 0.12);
border-color: #eef3f6;
transform: translateX(10px);
}
.community-post .post-content {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.community-post .post-content .author-avatar {
width: 40px;
margin-right: 25px;
border-radius: 50%;
overflow: hidden;
height: 40px;
}
.community-post .post-content .author-avatar.forum-icon {
border-radius: 0;
}
.community-post .post-content .author-avatar.forum-icon img {
padding: 2px;
}
.community-post .post-content .author-avatar img {
max-width: 40px;
}
@media (max-width: 667px) {
.community-post .post-content .author-avatar {
margin-right: 20px;
}
}
@media (max-width: 420px) {
.community-post .post-content .author-avatar {
margin-right: 15px;
}
}
.community-post .post-content .entry-content {
flex: 2;
}
.community-post .post-content .entry-content .post-title {
font-size: 18px;
font-weight: 500;
color: var(--secondary_color);
margin-bottom: 0;
line-height: 1.7;
}
.community-post .post-content .entry-content .post-title a {
color: var(--secondary_color);
}
.community-post .post-content .entry-content .post-title a:hover {
color: var(--brand_color);
}
.community-post .post-content .entry-content p {
margin: 0;
}
@media (max-width: 667px) {
.community-post .post-meta-wrapper {
margin-top: 15px;
margin-left: 70px;
}
}
.community-post .post-meta-wrapper .post-meta-info {
margin: 0;
padding: 0;
list-style: none;
}
.community-post .post-meta-wrapper .post-meta-info li {
display: inline-block;
}
.community-post .post-meta-wrapper .post-meta-info li:not(:last-child) {
margin-right: 50px;
}
@media (max-width: 991px) {
.community-post .post-meta-wrapper .post-meta-info li:not(:last-child) {
margin-right: 20px;
}
}
.community-post .post-meta-wrapper .post-meta-info li a {
display: block;
color: #868b99;
}
.community-post .post-meta-wrapper .post-meta-info li a i {
margin-right: 10px;
}
.community-post .post-meta-wrapper .post-meta-info li a:hover {
color: var(--brand_color);
}
.community-post.style-two {
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
position: relative;
}
.community-post.style-two:not(:last-child) {
border-bottom: 1px solid #f2f3f4;
}
.community-post.style-two .entry-content .post-title {
font-size: 16px;
}
.community-post.style-two .post-meta-wrapper .post-meta-info li:not(:last-child) {
margin-right: 30px;
}
.community-post.style-two .post-meta-wrapper .post-meta-info li i {
transition: all 0.3s ease-in-out;
}
.community-post.style-two .post-meta-wrapper .post-meta-info li:nth-child(2):hover a {
color: #b1b5c0;
}
.community-post.style-two .post-meta-wrapper .post-meta-info li:nth-child(2):hover i {
color: #f9ae44;
}
.community-post.style-two .post-content .entry-content .post-title {
display: inline-block;
margin-right: 10px;
}
.community-post.style-two .post-content .com-featured {
position: absolute;
right: 0;
top: -2px;
height: 30px;
width: 30px;
z-index: 2;
text-align: center;
color: #fff;
padding: 0 15px;
}
.community-post.style-two .post-content .com-featured i {
z-index: 22;
position: relative;
font-size: 14px;
}
.community-post.style-two .post-content .com-featured:after {
content: "";
top: 0;
position: absolute;
right: 0;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 0 solid transparent;
border-top: 30px solid #00ae69;
z-index: 1;
}
.community-post.style-two .post-content .cat-wrap {
display: inline-block;
vertical-align: 3px;
}
.community-post.style-two .meta {
margin: 0;
padding: 0;
list-style: none;
}
.community-post.style-two .meta li {
display: inline-block;
margin-right: 15px !important;
color: #838793;
font-size: 14px;
}
.community-post.style-two .meta li img {
display: inline-block;
vertical-align: -2px;
}
.community-post.style-two .meta li i,
.community-post.style-two .meta li img {
margin-right: 10px;
font-size: 14px;
}
.community-post.style-two .meta li a {
font-size: 14px;
color: #838793;
}
.community-post.style-two .meta li a:hover {
color: var(--brand_color);
}
.community-post.style-two:hover {
background: #f7f9fa;
transform: translateX(0);
box-shadow: none;
border-color: #f7f9fa;
}
.bb-radius {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
overflow: hidden;
box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.06);
}
.button-container .all_doc_btn {
margin-top: 40px;
}
@keyframes slideDown {
0% {
transform: translate3d(0, 15px, 0);
}
100% {
transform: translate3d(0, 23px, 0);
}
}
.doc_border_btn.border-light {
border-color: #cfebf1 !important;
}
.doc_border_btn.border-light svg {
margin-left: 8px;
vertical-align: 0;
transition: all 0.3s ease-in-out;
}
.doc_border_btn.border-light:hover {
border-color: var(--brand_color) !important;
}
.doc_border_btn.border-light:hover svg path {
fill: #fff;
}
.pagination-wrapper {
background: #fff;
padding: 23px 30px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
border-radius: 6px;
box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.06);
}
@media (max-width: 768px) {
.pagination-wrapper {
display: block;
text-align: center;
}
.pagination-wrapper .view-post-of {
margin-bottom: 20px;
}
}
.pagination-wrapper p {
margin: 0;
}
.pagination-wrapper .post-pagination {
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 768px) {
.pagination-wrapper .post-pagination {
margin-to: 30px;
}
}
.pagination-wrapper .post-pagination li {
display: inline-block;
}
.pagination-wrapper .post-pagination li.pegi-disable {
display: none;
}
.pagination-wrapper .post-pagination li:not(:last-child) {
margin-right: 3px;
}
.pagination-wrapper .post-pagination li a {
display: block;
color: var(--p_color);
height: 35px;
width: 35px;
text-align: center;
line-height: 35px;
background: #f2f5f6;
border-radius: 3px;
}
.pagination-wrapper .post-pagination li a:hover, .pagination-wrapper .post-pagination li a.active {
background: var(--brand_color);
color: #fff;
}   .shortcode_text .shortcode_title p {
margin-bottom: 20px;
}
.shortcode_text ul li {
margin-bottom: 6px;
}
.shortcode_text ul li a {
color: var(--p_color);
}
.shortcode_text ul li a:hover {
color: var(--brand_color);
}
.shortcode_text .c_head {
margin-top: 30px;
}
.article_list {
margin-bottom: 30px;
} .tab_shortcode {
margin-bottom: 50px;
}
.tab_shortcode .nav-tabs {
border: 0;
padding-left: 0;
list-style: none;
}
.tab_shortcode .nav-tabs .nav-item .nav-link {
font-size: 16px;
color: var(--p_color);
border-radius: 0;
padding: 9px 20px;
background: var(--black_25);
border: 0;
border-left: 1px solid var(--black_50);
position: relative;
text-decoration: none;
}
.tab_shortcode .nav-tabs .nav-item .nav-link:before {
content: "";
width: 0;
height: 2.1px;
background: var(--brand_color);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: width 0.2s linear;
}
.tab_shortcode .nav-tabs .nav-item .nav-link.active {
background: var(--bs-white);
color: var(--black_800);
}
.tab_shortcode .nav-tabs .nav-item .nav-link.active:before {
opacity: 1;
width: 100%;
}
.tab_shortcode .nav-tabs .nav-item:last-child .nav-link {
border-right: 1px solid var(--black_50);
}
.tab_shortcode .tab-content {
color: var(--p_color);
padding: 25px 30px;
border: 1px solid var(--black_50);
border-radius: 5px;
border-top-left-radius: 0;
}  .toggle_shortcode {
padding-bottom: 60px;
}
.toggle_btn {
display: block;
font-size: 16px;
font-weight: 500;
color: var(--black_900);
background: var(--black_50);
text-align: left;
border-radius: 4px;
padding: 12px 30px;
position: relative;
}
.toggle_btn:before {
content: "C";
position: absolute;
font-size: 18px;
font-family: eleganticons;
right: 30px;
transform: rotate(180deg);
transition: all 0.2s linear;
color: var(--brand_color);
}
.toggle_btn.collapsed:before {
transform: rotate(0deg);
color: var(--secondary_color);
}
.toggle_btn:focus {
color: var(--secondary_color);
}
.toggle_body {
border: 1px solid var(--black_50);
padding: 25px 30px;
border-top: 0;
border-radius: 4px;
background: var(--bs-white);
}  .doc_accordion {
border: 0;
margin-bottom: 5px;
}
.doc_accordion .card-header {
border-radius: 0;
border: 0;
background: transparent;
padding: 0;
}
.doc_accordion .card-header button {
padding: 12px 30px;
border-radius: 4px;
text-align: left;
width: 100%;
font-size: 16px;
color: var(--black_900);
font-weight: 500;
background:  var(--black_50);
text-decoration: none;
position: relative;
}
.doc_accordion .card-header button i {
position: absolute;
right: 30px;
color: var(--brand_color);
font-size: 22px;
top: 50%;
transform: translateY(-50%);
display: none;
transition: all 0.2s linear;
}
.doc_accordion .card-header button i + i {
display: block;
}
.doc_accordion .card-header button.collapsed i {
display: block;
color: var(--p_color);
}
.doc_accordion .card-header button.collapsed i + i {
display: none;
}  .message_alert {
border: 1px solid #e5e9eb;
border-radius: 4px;
background: rgba(243, 243, 243, 0.24);;
padding: 32px 40px 30px;
margin-bottom: 20px;
}
.message_alert .btn-close {
position: absolute;
right: 14px;
top: 12px;
font-size: 12px;
opacity: 1;
border: none;
}
.message_alert h5 {
font-size: 16px;
color: var(--secondary_color);
font-weight: 500;
margin-bottom: 12px;
}
.message_alert p {
margin-bottom: 0;
}
.message_alert .close {
position: absolute;
right: 14px;
top: 12px;
font-size: 24px;
opacity: 1;
}
.message_alert .close i {
margin-right: 0;
}
.alert-danger {
background: #fff3f4;
border-color: #fbadb3;
}
.alert-danger i, .alert-danger h5 {
color: #fa303e;
}
.alert-success {
background: #f1fdf3;
border-color: #94e3a1;
}
.alert-success i, .alert-success h5 {
color: #10d631;
}
.alert-warning {
background: #fefbf1;
border-color: #f2dca0;
}
.alert-warning i, .alert-warning h5 {
color: #f6ba18;
}
.alert-info {
background: #f1fbfd;
border-color: #a0e3f2;
}
.alert-info i, .alert-info h5 {
color: var(--brand_color);
}  .notice_shortcode {
padding-top: 25px;
}
.notice {
border-left: 10px solid;
padding: 30px 40px;
margin-bottom: 20px;
margin-top: 0;
}
.notice:before, .notice:after {
display: none;
}
.notice i {
font-size: 24px;
margin-right: 25px;
}
.notice h5 {
font-size: 20px;
font-weight: 500;
margin-bottom: 16px;
}
.notice p {
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
color: var(--p_color);
}
.notice p span {
padding: 1px 10px;
background: #fff;
color: #ed2937;
}
.notice-success {
background: #459e6d;
border-color: #30845e;
}
.notice-success p, .notice-success i, .notice-success h5 {
color: #fff;
}
.notice-warning {
background: #fefaed;
border-color: #f6ba18;
}
.notice-warning i {
color: #f6ba18;
padding-top: 4px;
}
.notice-danger {
background: #ffeff0;
border-color: #fa303e;
}
.notice-danger i {
color: #fa303e;
}
.explanation {
position: relative;
background: linear-gradient(90deg, var(--bs-white), #75e3fb9e);
border: 10px solid var(--bs-white);
padding: 1rem 2rem;
border-radius: 10px;
color: var(--black_700);
}
.explanation::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px solid var(--brand_color);
border-radius: 8px;
pointer-events: none;
}
.explanation::after {
font-family: "Roboto", sans-serif;
content: "Hey!";
text-transform: uppercase;
font-weight: 700;
top: -19px;
left: 1rem;
padding: 0 0.5rem;
font-size: 0.6rem;
position: absolute;
z-index: 1;
color: #000;
background: #fff;
} .lightbox_shortcode {
display: inline-block;
position: relative;
z-index: 1;
}
.lightbox_shortcode img {
background-color: #f0f2f5;
box-shadow: 0 4px 14px 0 rgba(4, 73, 89, 0.08);
max-width: 100%;
}
.img_popup {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 52px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(29, 39, 70, 0.5);
border-radius: 50%;
color: #fff;
font-size: 26px;
}
.img_popup i {
margin-left: -2px;
}
.img_popup:hover, .img_popup:focus {
background: #fff;
color: var(--secondary_color);
box-shadow: 4px 15px 34px 2px rgba(4, 73, 89, 0.2);
}
button.mfp-close {
font-size: 30px;
color: var(--p_color);
right: 10px;
top: 5px;
}
.mfp-bg {
background: #fff;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
padding: 0;
}
.mfp-with-zoom .mfp-container {
transform: scale(0);
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
transform: scale(1);
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 1;
}
.mfp-figure:after {
background-color: #eceff4;
box-shadow: 0 20px 80px 0 rgba(4, 73, 89, 0.12);
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}  .tooltipster-sidetip .tooltipster-box {
max-width: 300px;
background: #fff;
box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.05);
border: 0;
margin-top: 0;
}
.tooltipster-sidetip .tooltipster-box .tooltipster-content {
padding: 0;
background: #fff;
border-radius: 5px;
z-index: 1;
}
.tooltipster-sidetip .tooltipster-box .tooltipster-content .blog_grid_post {
margin-bottom: 0;
}
.tooltipster-sidetip .tooltipster-box .tooltipster-content .blog_grid_post img {
max-width: 100%;
}
.tooltipster-sidetip .tooltipster-box .tooltipster-content .blog_grid_post .grid_post_content {
padding: 30px 20px 10px;
box-shadow: none;
}
.tooltipster-sidetip .tooltipster-box .tooltipster-content .blog_grid_post .grid_post_content .post_tag a {
font-size: 14px;
}
.tooltipster-sidetip .tooltipster-box .tooltipster-content .blog_grid_post .grid_post_content .b_title {
font-size: 18px;
line-height: 25px;
}
.tooltipster-sidetip .tooltipster-box .tooltipster-content .blog_grid_post .grid_post_content p {
color: var(--p_color);
font-size: 14px;
line-height: 22px;
}
.tooltip_content p {
margin-bottom: 25px;
}
.tooltip_content p i {
vertical-align: middle;
}
.tooltip_content p a {
color: var(--brand_color);
}
.tooltip_content .text-decoration {
position: relative;
display: inline-block;
}
.tooltip_content .text-decoration:before {
content: "";
width: 100%;
height: 1px;
background: var(--brand_color);
position: absolute;
bottom: 5px;
left: 0;
}
.direction_steps {
display: inline-flex;
align-items: center;
}
.direction_step {
padding: 0 8px;
font-size: 13px;
border-radius: 4px;
background: rgba(127, 130, 248, 0.8);
color: #fff;
position: relative;
line-height: 20px;
}
.direction_step + .direction_step {
margin-left: 28px;
}
.direction_step + .direction_step:before {
content: "$";
font-family: eleganticons;
position: absolute;
left: -22px;
color: rgba(127, 130, 248, 0.8);
}
.tip_content {
background: #fff;
box-shadow: 0 20px 50px 0 rgba(4, 73, 89, 0.16);
max-width: 320px;
max-height: 100%;
border-radius: 6px;
text-align: left;
}
.tip_content .text {
padding: 25px;
}
.tip_content p {
font-size: 14px;
line-height: 26px;
color: var(--p_color);
}
.tip_content h6 {
font-size: 14px;
color: var(--secondary_color);
font-weight: 500;
padding-top: 10px;
margin-bottom: 0;
}
.tip_content h6 span {
display: block;
font-weight: 400;
color: var(--p_color);
font-size: 14px;
padding-top: 5px;
}
.tip_content img {
max-width: 100%;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.tip_content#tooltipTwo {
min-height: 450px;
}  .image_pointer .pointing_img {
padding-bottom: 20px;
}
.image_pointer .pointing_img img {
max-width: 100%;
box-shadow: 0 20px 50px 0 rgba(4, 73, 89, 0.1);
}
.image_pointer .pointing_img h6 {
margin-top: 35px;
}
.image_pointer .pointing_img h6 a {
color: var(--brand_color);
}
.modal-open {
padding-right: 0 !important;
}
.modal-backdrop {
background: #fff;
}
.img_modal {
background: #fff;
padding-right: 0 !important;
box-shadow: 0 4px 14px 0 rgba(4, 73, 89, 0.08);
}
.img_modal img {
box-shadow: 0 30px 80px 0 rgba(4, 73, 89, 0.12);
}
.img_modal .close {
font-size: 30px;
padding-right: 25px;
padding-top: 25px;
opacity: 1;
color: var(--p_color);
position: absolute;
right: 20px;
top: 20px;
padding: 0;
z-index: 3;
}
.img_modal.fade .pointing_img_container {
max-width: 1170px;
margin: 0rem auto;
padding: 80px 0;
height: 100%;
display: flex;
align-items: center;
transform: translate(0, 0);
}
.img_modal.fade .pointing_img_container .modal-content {
border: 0;
padding: 0;
}
.img_modal.fade .pointing_img_container .modal-content img {
max-width: 100%;
}
.img_pointing {
width: 10px;
height: 10px;
background: #a54ffe;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
.img_pointing:before, .img_pointing:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background: #a54ffe;
}
.img_pointing:before {
transform: scale(2.1);
opacity: 0.3;
}
.img_pointing:after {
transform: scale(3);
opacity: 0.2;
}
.img_pointing .dot {
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(165, 79, 254, 0.9);
animation: pulse1 3s infinite;
transform: translate(-50%, -50%);
animation-delay: 1.5s;
will-change: transform;
}
.img_pointing.one {
top: 60px;
right: 340px;
}
.img_pointing.two {
left: 175px;
top: 20px;
}
.img_pointing.three {
left: 50%;
transform: translateX(-50%);
top: 250px;
}
.img_pointing.four {
left: 30%;
transform: translateX(-50%);
top: 50%;
}
.img_pointing_content {
padding: 25px;
}
.img_pointing_content p {
font-size: 14px;
line-height: 22px;
font-family: "Roboto", sans-serif;
color: var(--p_color);
margin-bottom: 0;
}
.img_pointing_content p span {
color: var(--secondary_color);
}
.img_pointing_content p + p {
margin-top: 15px;
}
.pointing_img_two {
position: relative;
margin-bottom: 60px;
}
.pointing_img_two img {
box-shadow: 0 20px 50px 0 rgba(4, 73, 89, 0.1);
}
.pointing_img_two .img_pointing.one {
right: 130px;
}
.pointing_img_two .img_pointing.three {
left: 55%;
}
.pointing_img_two .img_pointing.four {
left: 100px;
}  .caniuse ul {
display: flex;
flex-wrap: wrap;
margin: -6px;
}
.caniuse ul .caniuse_agents_item {
text-align: center;
border-radius: 5px;
padding: 23px 30px 20px;
margin: 6px;
}
.caniuse ul .caniuse_agents_item img {
height: 40px;
display: block;
}
.caniuse ul .caniuse_agents_item span {
display: block;
font-size: 20px;
padding-top: 13px;
}
.caniuse_section + .caniuse_section {
margin-top: 55px;
}
.light_blue {
background: #ece6fc;
color: #784bfb;
}
.light_red {
background: #fce6e6;
color: #f84343;
}
.blue {
background: #e6f8fc;
color: var(--brand_color);
}
.caniuse_section_legend p {
padding-top: 25px;
}
.caniuse_section_legend .caniuse_legend_list {
padding: 15px 0 10px;
}
.caniuse_section_legend .caniuse_legend_list span {
margin-right: 20px;
}
.caniuse_section_legend .caniuse_legend_list a {
font-size: 14px;
font-weight: 500;
padding: 0 18px;
display: inline-block;
margin: 0 3px;
border-radius: 2px;
}
.caniuse_section_legend .caniuse_legend_list a.blue:hover {
background: var(--brand_color);
color: #fff;
}
.purpale_btn {
background: #fad9ea;
color: #e32a8b;
}
.purpale_btn:hover {
background: #e32a8b;
color: #fff;
}
.green_btn {
background: #cef5d4;
color: #11ca30;
}
.green_btn:hover {
background: #11ca30;
color: #fff;
}
.violate_btn {
background: #e8d9fa;
color: #9744fd;
}
.violate_btn:hover {
background: #9744fd;
color: #fff;
}  .table_shortcode thead {
background: #06a8cb;
}
.table_shortcode thead th {
padding: 20px 25px;
border: 0;
}
.table_shortcode th, .table_shortcode td {
border: 0;
font-size: 16px;
font-weight: 400;
color: #fff;
vertical-align: middle;
}
.table_shortcode th {
font-weight: 500;
}
.table_shortcode tbody tr {
background: #f0f2f5;
}
.table_shortcode tbody tr th {
background: var(--brand_color);
}
.table_shortcode tbody tr td, .table_shortcode tbody tr th {
padding: 12px 25px;
}
.table_shortcode tbody tr td {
color: var(--p_color);
}
.table_shortcode tbody tr:nth-child(odd) {
background: #fafcfd;
}
.basic_table {
padding-top: 45px;
}
.basic_table .s_title {
margin-bottom: 10px;
}
.basic_table p {
margin-bottom: 25px;
}
.basic_table_info {
width: 100%;
margin-bottom: 1rem;
background-color: transparent;
border: 1px solid #f1f2f3;
}
.basic_table_info thead th {
border: 0;
}
.basic_table_info thead th span {
color: var(--black_900);
}
.basic_table_info tbody tr td .td-content {
color: var(--black_900);
}
.basic_table_info tbody tr th, .basic_table_info tbody tr td {
border-color: #eaeff4;
}
.basic_table_info.table-hover tbody tr {
transition: all 0.3s linear;
}
.basic_table_info.table-hover tbody tr:hover {
background: var(--brand_color);
color: #fff;
}  .text-component--has-footnotes {
counter-reset: footnotes;
}
.footnotes {
border-top: 1px solid var(--color-contrast-low);
font-size: 0.875em;
}
.footnotes-link {
counter-increment: footnotes;
font-size: 0.75em;
vertical-align: super;
}
.footnotes-link::before {
content: "[" counter(footnotes) "]";
}
.footnotes-link:target, .footnotes_item:target {
outline: 2px solid var(--brand_color);
outline-offset: 2px;
}
.footnotes_item {
font-size: 14px;
}
.footnotes_item strong {
color: var(--secondary_color);
padding-bottom: 7px;
display: inline-block;
font-size: 16px;
}
.footnotes_item + .footnotes_item {
margin-top: 20px;
}  .single_list {
list-style: none;
box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.02);
border: 1px solid #e5ebef;
padding: 20px;
margin-top: 10px;
margin-bottom: 25px;
border-radius: 2px;
}
.single_list li {
font-size: 14px;
font-weight: 500;
line-height: 22px;
position: relative;
padding-left: 20px;
}
.single_list li:before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand_color);
position: absolute;
left: 0;
top: 9px;
}
.single_list li + li {
margin-top: 15px;
} .steps-panel {
box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.02);
border: 1px solid #e5ebef;
margin-top: 10px;
margin-bottom: 25px;
border-radius: 2px;
}
ul.ordered-list li::before {
content: "h";
font-family: "ElegantIcons";
font-size: 10px;
}
.ordered-list {
position: relative;
list-style: none;
padding-left: 20px;
margin: 20px 0;
list-style: none !important;
}
.steps.ordered-list::before {
content: "";
position: absolute;
left: 32px;
top: 0;
bottom: 0;
width: 1px;
background-color: #c4cdd5;
}
.ordered-list li {
font-size: 16px;
font-weight: 400;
line-height: 25px;
margin: 16px 0;
position: relative;
padding-left: 35px;
counter-increment: a;
}
.ordered-list li::before {
content: counter(a);
position: absolute;
color: #fff;
height: 32px;
width: 32px;
border-radius: 50%;
font-weight: 500;
font-size: 12px;
background-color: var(--brand_color);
text-align: center;
line-height: 23px;
top: -4px;
left: -4px;
border: 5px solid var(--bs-white);
} .changelog_inner {
padding-right: 30px;
padding-bottom: 100px;
}
.changelog_info {
padding-top: 15px;
}
.changelog_info .version_info {
margin-right: 15px;
position: relative;
height: 100%;
}
.changelog_info .c_version {
flex: 1;
background: var(--secondary_color);
text-align: center;
font-size: 14px;
font-weight: 400;
height: 26px;
line-height: 27px;
border-radius: 3px;
color: #fff;
min-width: 50px;
max-width: 60px;
display: block;
margin: 0 auto;
}
.changelog_info .changelog_date {
display: flex;
flex-direction: row-reverse;
text-align: right;
}
.changelog_info .changelog_date .c_date h6 {
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
}
.changelog_info .changelog_date .c_date p {
font-size: 14px;
margin-bottom: 0;
color: var(--p_color);
}
.changelog_info .line {
height: 106%;
width: 2px;
background: #e2e5ee;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
.changelog_info:last-child .line {
height: 100%;
}
.changelog_info:last-child .changelog_content {
padding-bottom: 0;
}
.changelog_content {
padding-bottom: 60px;
}
.changelog_content p {
display: flex;
margin-bottom: 15px;
font-size: 14px;
}
.changelog_content span {
font-weight: 400;
font-size: 10px;
color: #fff;
padding: 0 10px;
text-transform: uppercase;
min-width: 110px;
display: inline-block;
text-align: center;
line-height: 23px;
border-radius: 3px;
margin-right: 20px;
height: 22px;
flex: 0;
letter-spacing: 0.8px;
}
.changelog_content span.improve {
background: var(--brand_color);
}
.changelog_content span.new {
background: #0ed193;
}
.changelog_content span.update {
background: #ffa100;
}
.changelog_content span.fixed {
background: #ea3940;
}
.changelog_content .download-links {
border-top: 1px dotted rgba(51, 51, 51, 0.2);
}
.changelog_content .changelog_btn {
font-size: 14px;
color: var(--p_color);
font-weight: 500;
margin-top: 12px;
display: inline-block;
opacity: 0.5;
}
.changelog_content .changelog_btn i {
margin-right: 10px;
}
.changelog_content .changelog_btn:hover {
color: var(--brand_color);
}
.changelog_content .changelog_btn + .changelog_btn {
margin-left: 28px;
}
.changelog_content:hover .changelog_btn {
opacity: 1;
}
.tour_info_content p {
font-size: 14px;
margin-bottom: 0;
}
.tour_item {
padding: 70px 0;
}
.tour_item .arrow.text-right {
margin-right: -80px;
position: relative;
z-index: 1;
}
.tour_intro_item .tour_info_content {
position: relative;
}
.tour_intro_item .tour_info_content p {
margin-bottom: 55px;
}
.tour_intro_item .tour_info_content .arrow {
position: absolute;
bottom: 0;
left: -20px;
}
.tour_intro_item.flex-row-reverse .arrow {
right: -20px;
left: auto;
}
.tour_intro_item + .tour_intro_item {
margin-top: 60px;
}
.last_tour_item {
padding-bottom: 0;
}
.just_text {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.just_text p {
margin-bottom: 0;
}
.just_text + .just_text {
margin-top: 70px;
}
.answer_bottom {
align-items: flex-start;
}
.tour_preview_img {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} .cheatsheet_info + .cheatsheet_info {
margin-top: 30px;
}
.cheatsheet_accordian .card {
border: 0;
padding: 0;
overflow: visible;
margin-top: 10px;
}
.cheatsheet_accordian .card .card-header {
padding: 0;
border: 0;
background: transparent;
}
.cheatsheet_accordian .card .card-header button {
padding: 0;
font-size: 20px;
font-weight: 500;
margin-bottom: 30px;
background: transparent;
color: var(--secondary_color);
text-decoration: none;
}
.cheatsheet_accordian .card .card-header button .minus {
display: inline-block;
}
.cheatsheet_accordian .card .card-header button .pluse {
display: none;
}
.cheatsheet_accordian .card .card-header button.collapsed .pluse {
display: inline-block;
}
.cheatsheet_accordian .card .card-header button.collapsed .minus {
display: none;
}
.cheatsheet_item {
text-align: center;
box-shadow: 0 4px 8px 0 rgba(4, 73, 89, 0.05);
padding: 20px 15px 30px;
margin-bottom: 30px;
transition: all 0.3s linear;
}
.cheatsheet_item:hover {
box-shadow: 0 20px 27px 0 rgba(4, 73, 89, 0.08);
}
.cheatsheet_item .cheatsheet_num {
text-align: right;
}
.cheatsheet_item p {
margin-bottom: 0;
}
.cheatsheet_item h4 {
margin-bottom: 0;
color: var(--brand_color) !important;
}   .typography_area {
padding: 115px 0 120px;
}
.typography_area p {
line-height: 28px;
}
.heading_content .t_title {
color: var(--p_color);
margin-bottom: 0;
padding-bottom: 20px;
}
.heading_content .bold, .heading_content .medium, .heading_content .regular {
margin-bottom: 22px;
line-height: 1;
}
.typography_preview {
margin-top: 30px;
}
.typography_underline h4 {
margin-bottom: 35px;
}
.highlight_text, .typography_underline {
padding-right: 100px;
margin-top: 85px;
}
.highlight_text h5 {
margin-bottom: 30px;
}
.highlight_text span {
display: inline-block;
padding: 0 6px;
}
.highlight_text .h_black {
background: #222d39;
color: #fff;
}
.highlight_text .h_green {
background: #15e18d;
color: #fff;
}
.highlight_text .h_blue {
background: #2cabed;
color: #fff;
}
.highlight_text p .tooltips_one {
color: #4b5ffa;
}
.highlight_text p .tooltips_two {
color: #ef971a;
}
.tooltip_blue .arrow:before {
border-top-color: #4b5ffa;
}
.tooltip_blue.bs-tooltip-bottom .arrow:before {
border-bottom-color: #4b5ffa;
}
.tooltip_blue .tooltip-inner {
background: #4b5ffa;
}
.tooltip_danger.show {
opacity: 1;
}
.tooltip_danger {
opacity: 1;
}
.tooltip_danger .arrow:before {
border-top-color: #ef971a;
}
.tooltip_danger.bs-tooltip-bottom .arrow:before {
border-bottom-color: #ef971a;
}
.tooltip_danger .tooltip-inner {
background: #ef971a;
}
.dropcap_content p span {
float: left;
font-size: 54px;
margin-right: 10px;
color: #fc5bc1;
font-weight: 700;
line-height: 55px;
font-family: "Roboto", sans-serif;
}
.dropcap_content p .r_dropcap {
background: #13c5bf;
border-radius: 4px;
color: #fff;
padding: 0 6px;
font-size: 40px;
font-weight: 700;
line-height: 42px;
margin-top: 10px;
}
.typography_list h5, .dropcap_content h5 {
margin-bottom: 30px;
}
.typography_list ul li a, .typography_list ol li a {
font-size: 15px;
line-height: 34px;
color: var(--p_color);
font-weight: 400;
}
.typography_list ol {
padding-left: 15px;
}
.typography_list ol li ol {
padding-left: 30px;
}
.typography_list .unorderlist li {
position: relative;
padding-left: 14px;
}
.typography_list .unorderlist li:before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #a7acbd;
position: absolute;
left: 0;
top: 14px;
}
.typography_list .unorderlist li ul {
padding-left: 10px;
}
.blockquote_inner {
margin-top: 85px;
}
.blockquote_inner h6 {
color: var(--p_color);
margin-bottom: 0;
}
.blockquote {
background: transparent;
padding: 0 0 0 40px;
border-color: var(--secondary_color);
border-width: 2px;
margin-bottom: 55px;
}
.blockquote:before, .blockquote:after {
display: none;
}
.blockquote p {
font-size: 18px;
font-style: italic;
color: #4b505e;
line-height: 30px;
}
.blockquote_two {
background: #f9fafb;
padding: 14px 40px 26px 140px;
border: 0;
position: relative;
margin-top: 25px;
}
.blockquote_two:before, .blockquote_two:after {
display: none;
}
.blockquote_two span {
background: #d6dffa;
padding: 0 4px;
}
.blockquote_two .quote_icon {
font-size: 150px;
color: #d3d6e1;
position: absolute;
transform: rotate(180deg);
top: 18px;
background: transparent;
left: 40px;
line-height: 155px;
}
.blockquote_two h5 {
font-size: 22px;
line-height: 40px;
font-style: italic;
font-weight: 400;
color: var(--p_color);
}
.button_inner {
margin-top: 60px;
}
.button_inner h4 {
margin-bottom: 50px;
padding-top: 30px;
}
.button_inner h6 {
color: var(--p_color);
font-weight: 400;
}
.button_inner .button_inner_one {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 0 50px;
border-bottom: 1px solid #e6eeef;
}
.button_inner:last-child .button_inner_one {
border: 0;
padding-bottom: 0;
}
.btn_small {
padding: 2px 16px;
}
.btn_small_two {
padding: 8px 29px;
}
.doc_border_btn_two, .btn_small_three {
padding: 10px 47px;
}
.btn_bg {
padding: 15px 78px;
}
.btn_radious_none {
border-radius: 0;
padding: 10px 68px;
}
.btn_radious_45 {
border-radius: 45px;
padding: 5px 28px;
}
.action_btn.btn_small, .action_btn.btn_small_two, .action_btn.btn_small_three, .action_btn.btn_bg, .action_btn.btn_radious_none, .action_btn.btn_radious_45 {
box-shadow: none;
border: 2px solid var(--brand_color);
transition: all 0.3s linear;
}
.action_btn.btn_small:hover, .action_btn.btn_small_two:hover, .action_btn.btn_small_three:hover, .action_btn.btn_bg:hover, .action_btn.btn_radious_none:hover, .action_btn.btn_radious_45:hover {
background: #f8fdfe;
border-color: #79ccde;
color: var(--brand_color);
}
.icon_btn {
border: 2px solid #79ccde;
margin-left: 0;
background: #f8fdfe;
}
.icon_btn i {
padding-right: 7px;
}
.icon_btn:hover {
border-color: var(--brand_color);
}
.arrow_btn_medium {
padding: 13px 28px;
}
.arrow_btn_big {
padding: 18px 44px;
font-size: 18px;
}
.arrow_btn_big i {
font-size: 28px;
padding-left: 12px;
}
.arrow_btn_small {
padding: 15px 37px;
}
.arrow_btn_small_two {
padding: 10px 23px;
}
.dropcap_inner {
padding: 50px 0;
}   .blog_top_post {
box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.06);
border-radius: 6px;
margin: 0;
}
.blog_top_post .p_top_img {
position: relative;
padding-right: 0;
}
.blog_top_post .p_top_img .p_img {
position: absolute;
padding-right: 0;
height: 100%;
top: 0;
right: 0;
width: 100%;
background-size: cover;
}
.blog_top_post .b_top_post_content {
padding: 50px 30px 50px 50px;
}
.blog_top_post .b_top_post_content .post_tag {
padding-bottom: 15px;
}
.blog_top_post .b_top_post_content h3 {
font-size: 26px;
font-weight: 500;
line-height: 36px;
margin-bottom: 17px;
transition: color 0.2s linear;
}
.blog_top_post .b_top_post_content h3:hover {
color: var(--brand_color);
}
.blog_top_post .b_top_post_content .learn_btn {
color: var(--p_color);
}
.blog_top_post .b_top_post_content .learn_btn:hover {
color: var(--brand_color);
}
.blog_top_post .b_top_post_content p {
margin-bottom: 22px;
}
.blog_top_post .b_top_post_content .post_author {
padding-top: 45px;
}
.post_tag a {
font-size: 14px;
color: var(--p_color);
display: inline-block;
}
.post_tag a.cat-Docly {
color: #fd8d2a;
}
.post_tag a.cat-megento {
color: #f26322;
}
.post_tag a.cat-woocommerce {
color: #96588a;
}
.post_tag a.c_blue {
color: var(--brand_color);
}
.post_tag a.cat-laravel {
color: #ff2d20;
}
.post_tag a + a {
padding-left: 10px;
}
.post_tag a + a:before {
content: "";
width: 1px;
height: 13px;
background: #B7B9BE;
display: inline-block;
margin-right: 13px;
}
.post_author .round_img {
margin-right: 15px;
}
.post_author .round_img img {
height: 40px;
width: auto;
border-radius: 50%;
}
.post_author .author_text {
margin-top: 5px;
}
.post_author .author_text h4 {
font-size: 14px;
font-weight: 500;
margin-bottom: 0;
color: var(--secondary_color);
}
.post_author .author_text .date {
font-size: 13px;
font-weight: 400;
color: var(--p_color);
}  .doc_blog_grid_area {
padding-bottom: 100px;
}
.blog_grid_inner {
border-top: 1px solid #e7edf0;
}
.blog_tab .nav-item {
margin-bottom: 0;
}
.blog_tab .nav-item .nav-link {
padding: 17px 21px;
border: 0;
border-radius: 0;
font-weight: 500;
color: #858997;
font-size: 14px;
position: relative;
background: transparent;
transition: all 0.2s ease-in;
}
.blog_tab .nav-item .nav-link:before {
content: "";
width: 100%;
position: absolute;
top: 0;
height: 2px;
left: 0;
background: var(--brand_color);
transform: scale(0);
transform-origin: 50% 50%;
transition: all 0.3s ease-in;
}
.blog_tab .nav-item .nav-link.active, .blog_tab .nav-item .nav-link:hover {
background: #e9f6f9;
color: var(--brand_color);
}
.blog_tab .nav-item .nav-link.active:before, .blog_tab .nav-item .nav-link:hover:before {
transform: scale(1);
}
.blog_tab .nav-item.cat-laravel .nav-link:hover {
background: rgba(255, 45, 32, 0.2);
color: #ff2d20;
}
.blog_tab .nav-item.cat-laravel .nav-link:before {
background: #ff2d20;
}
.blog_tab .nav-item.cat-Docly .nav-link:hover {
background: rgba(253, 141, 42, 0.2);
color: #fd8d2a;
}
.blog_tab .nav-item.cat-Docly .nav-link:before {
background: #fd8d2a;
}
.blog_tab .nav-item.cat-megento .nav-link:hover {
background: rgba(242, 99, 34, 0.2);
color: #f26322;
}
.blog_tab .nav-item.cat-megento .nav-link:before {
background: #f26322;
}
.blog_tab .nav-item.cat-woocommerce .nav-link:hover {
background: rgba(150, 88, 138, 0.2);
color: #96588a;
}
.blog_tab .nav-item.cat-woocommerce .nav-link:before {
background: #96588a;
}
.blog_grid_tab {
padding-top: 60px;
margin-bottom: -40px;
}
.b_title {
font-size: 22px;
font-weight: 500;
line-height: 30px;
transition: all 0.2s linear;
}
.b_title:hover {
color: var(--brand_color);
}
.blog_grid_post {
border-radius: 4px;
background-color: white;
box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.06);
margin-bottom: 40px;
transition: all 0.3s linear;
overflow: hidden;
cursor: pointer;
}
.blog_grid_post .grid_post_content {
padding: 20px 30px 25px;
}
.blog_grid_post .grid_post_content .post_tag {
padding-bottom: 10px;
}
.blog_grid_post .grid_post_content .b_title {
margin-bottom: 18px;
}
.blog_grid_post .grid_post_content .post_author {
padding-top: 18px;
}
.blog_grid_post:hover {
box-shadow: 0 20px 24px 0 rgba(4, 73, 89, 0.1);
}
.doc_blog_grid_area_two {
padding: 100px 0 120px;
}  .blog_area {
padding: 100px 0 120px;
}
.blog_single_item .blog_single_img {
display: block;
margin-bottom: 25px;
}
.blog_single_item .blog_single_img img {
max-width: 100%;
}
.blog_single_item p {
line-height: 30px;
margin-bottom: 26px;
}
.blog_single_item p a {
color: var(--brand_color);
text-decoration: underline;
}
blockquote {
background: var(--black_25);
border-left: 4px solid var(--brand_color);
font-size: 20px;
padding: 50px 40px;
position: relative;
z-index: 0;
margin: 46px 0;
}
blockquote:before, blockquote:after {
content: "";
position: absolute;
z-index: -1;
}
blockquote:before {
background: url(//support.karaokemedia.com/wp-content/themes/docly/assets/img/blog-classic/quote_top.png) no-repeat scroll left top;
width: 132px;
height: 81px;
top: 0;
}
blockquote:after {
background: url(//support.karaokemedia.com/wp-content/themes/docly/assets/img/blog-classic/quote_bottom.png) no-repeat scroll left bottom;
width: 77px;
height: 75px;
right: 40px;
bottom: 30px;
}
blockquote .c_head {
color: var(--p_color);
font-weight: 400;
line-height: 34px;
margin-bottom: 45px;
}
blockquote .author {
font-weight: 500;
font-size: 16px;
color: var(--secondary_color);
}
.single_post_two {
padding-top: 10px;
}
.single_post_two h2 {
font-size: 30px;
font-weight: 500;
margin-bottom: 15px;
}
.single_post_two img {
margin-bottom: 25px;
max-width: 100%;
}
.single_post_two p {
margin-bottom: 28px;
}
.blog_social {
padding-top: 20px;
margin-top: 20px;
}
.blog_social h5 {
font-size: 16px;
margin-bottom: 0;
}
.blog_social .f_social_icon {
display: inline-block;
margin-top: 28px;
position: relative;
z-index: 0;
padding-top: 0;
padding-left: 24px;
padding-right: 24px;
}
.blog_social .f_social_icon:before, .blog_social .f_social_icon:after {
content: "";
width: 105%;
position: absolute;
top: 50%;
height: 1px;
background: #dde5e7;
}
.blog_social .f_social_icon:before {
left: -103%;
}
.blog_social .f_social_icon:after {
right: -103%;
}
.blog_social .f_social_icon li a {
margin-right: 0;
border: 1px solid #e5edef;
color: #989da9;
width: 44px;
height: 44px;
line-height: 44px;
}
.blog_social .f_social_icon li + li {
margin-left: 5px;
}
.blog_post_author {
background: #f3f8f9;
padding: 40px;
padding-right: 70px;
margin-top: 35px;
border-radius: 5px;
}
.blog_post_author .author_img {
width: 70px;
height: 70px;
border-radius: 50%;
margin-right: 30px;
overflow: hidden;
}
.blog_post_author .media-body h5 {
font-weight: 500;
font-size: 18px;
margin-bottom: 20px;
}
.blog_post_author .media-body p {
margin-bottom: 0;
}
.comment_inner {
padding-top: 80px;
}
.comment_box {
margin-bottom: 0;
}
.comment_box .post_comment .comment_author {
padding-top: 40px;
}
.comment_box .post_comment .comment_author .img_rounded {
border-radius: 50%;
margin-right: 25px;
}
.comment_box .post_comment .comment_author .media-body {
border-bottom: 1px solid #dde5e7;
padding-bottom: 24px;
flex: 1;
}
.comment_box .post_comment .comment_author .media-body .comment_info h3 {
font-size: 16px;
font-weight: 500;
margin-bottom: 5px;
}
.comment_box .post_comment .comment_author .media-body .comment_info .comment_date {
font-size: 14px;
font-weight: 400;
color: var(--p_color);
margin-bottom: 15px;
}
.comment_box .post_comment .comment_author .media-body .comment_reply {
font-size: 14px;
font-weight: 500;
color: var(--secondary_color);
transition: all 0.2s linear;
}
.comment_box .post_comment .comment_author .media-body .comment_reply i {
vertical-align: middle;
font-size: 18px;
position: relative;
top: -2px;
padding-right: 5px;
}
.comment_box .post_comment .comment_author .media-body .comment_reply:hover {
color: var(--brand_color);
}
.comment_box .post_comment .reply_comment {
padding-left: 80px;
}
.blog_comment_box {
padding-top: 80px;
background: var(--bs-white);
padding: 40px 40px 45px;
border-radius: 5px;
box-shadow: 0 10px 40px rgb(0 0 0 / 8%);
margin-bottom: 50px;
padding: 40px 40px 45px;
position: relative;
width: 100%;
transition: all 0.5s ease-in-out;
border: 1px solid var(--border_on_white);
}
.blog_comment_box p {
margin-bottom: 0;
}
.blog_comment_box .get_quote_form {
padding-top: 40px;
}
.blog_comment_box .get_quote_form .form-group {
margin-bottom: 12px;
}
.blog_comment_box .get_quote_form .form-group .form-control {
height: 46px;
border-radius: 4px;
border: 1px solid #e1e8ea;
font-size: 14px;
line-height: 1.4;
padding-left: 30px;
}
.blog_comment_box .get_quote_form .form-group .form-control.placeholder {
color: #6b707f;
}
.blog_comment_box .get_quote_form .form-group .form-control:-moz-placeholder {
color: #6b707f;
}
.blog_comment_box .get_quote_form .form-group .form-control::-moz-placeholder {
color: #6b707f;
}
.blog_comment_box .get_quote_form .form-group .form-control::-webkit-input-placeholder {
color: #6b707f;
}
.blog_comment_box .get_quote_form .form-group .form-control:focus {
box-shadow: 0 20px 30px 0 rgba(4, 73, 89, 0.1);
border-color: var(--brand_color);
}
.blog_comment_box .get_quote_form .form-group .form-control.message {
height: 160px;
padding-top: 22px;
}
.blog_comment_box .get_quote_form .thm_btn {
padding: 12px 35px;
box-shadow: none;
}
.blog_comment_box .get_quote_form .thm_btn:hover {
box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
} .doc_blog_classic_area blockquote {
margin-top: 0;
margin-bottom: 50px;
}
.blog_classic_item {
overflow: hidden;
margin-bottom: 50px;
transition: all 0.2s linear;
cursor: pointer;
}
.blog_classic_item .b_top_post_content {
padding: 26px 40px 30px;
}
.blog_classic_item .b_top_post_content .post_tag {
padding-bottom: 10px;
}
.blog_classic_item .b_top_post_content .p_bottom {
align-items: center;
}
.blog_classic_item .b_top_post_content .p_bottom .learn_btn {
color: var(--secondary_color);
}
.blog_classic_item .b_top_post_content .p_bottom .learn_btn:hover {
color: var(--brand_color);
}
.blog_classic_item .b_top_post_content .post_author {
padding-top: 0;
align-items: center;
}
.blog_classic_item:hover {
box-shadow: 0 20px 24px 0 rgba(4, 73, 89, 0.1);
}
.video_post {
position: relative;
z-index: 1;
}
.video_post:before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(9, 16, 50, 0.2);
position: absolute;
z-index: 0;
}
.video_icon {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: white;
box-shadow: 0 20px 40px 0 rgba(1, 16, 58, 0.14);
text-align: center;
line-height: 75px;
font-size: 30px;
position: absolute;
transition: all 0.3s linear;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video_icon:before {
content: "";
width: 100%;
height: 100%;
border: 0.2px solid #fff;
border-radius: 50%;
opacity: 0.6;
position: absolute;
left: 0;
transform: scale(1.5);
}
.video_icon i {
color: var(--brand_color);
text-shadow: 0 6px 13px rgba(12, 118, 142, 0.6);
position: relative;
}
.video_icon i:after {
width: 300%;
height: 300%;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
box-shadow: 0 1px 15px 1px rgba(255, 255, 255, 0.5);
content: "";
-webkit-animation: pulse 2s infinite;
-webkit-transform: scale(8);
-ms-transform: scale(8);
transform: scale(8);
animation: pulse 2s infinite;
}
.blog_link_post {
background: #f3f8f9;
border-left: 4px solid var(--brand_color);
padding: 45px 40px;
line-height: 34px;
position: relative;
overflow: hidden;
margin-bottom: 50px;
}
.blog_link_post:before, .blog_link_post:after {
content: "";
position: absolute;
}
.blog_link_post:before {
background: url(//support.karaokemedia.com/wp-content/themes/docly/assets/img/blog-classic/icon_01.png) no-repeat;
top: 5px;
left: 40px;
width: 42px;
height: 41px;
}
.blog_link_post:after {
background: url(//support.karaokemedia.com/wp-content/themes/docly/assets/img/blog-classic/icon_02.png) no-repeat;
bottom: -35px;
right: 30px;
width: 100px;
height: 100px;
}
.blog_link_post p {
font-size: 20px;
color: var(--p_color);
margin-bottom: 0;
transition: color 0.2s linear;
}
.blog_link_post p:hover {
color: var(--brand_color);
}
.blog_related_post {
padding-top: 80px;
}
.blog_related_post .c_head {
margin-bottom: 45px;
}
.blog_related_post .row {
margin-bottom: -40px;
}
.blog_related_post .blog_grid_post {
box-shadow: none;
}
.blog_related_post .blog_grid_post img {
border-radius: 4px;
max-width: 100%;
}
.blog_related_post .grid_post_content {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.blog_related_post .grid_post_content .post_tag {
padding-bottom: 4px;
}
.blog_related_post .grid_post_content .b_title {
font-size: 18px;
line-height: 24px;
}
.blog_related_post .grid_post_content p {
margin-bottom: 0;
} @-webkit-keyframes pulse {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(2);
}
}
@keyframes pulse {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(2);
}
} .pagination .page-numbers {
width: 36px;
height: 36px;
display: inline-flex;
border-radius: 4px;
border: 1px solid #a7e1ed;
text-align: center;
align-items: center;
justify-content: center;
font-size: 16px;
vertical-align: middle;
color: var(--brand_color);
transition: all 0.2s linear;
}
.pagination .page-numbers i {
font-size: 24px;
}
.pagination .page-numbers + .page-numbers {
margin-left: 10px;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current {
background-color: var(--brand_color);
border-color: var(--brand_color);
box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
color: #fff;
}
.pagination .page-numbers.current {
box-shadow: none;
}  .widget + .widget {
margin-top: 53px;
}
.widget > ul.list-unstyled {
margin-top: -10px;
}
.about_widget .img {
border: 1px solid #e5edef;
padding: 8px;
border-radius: 4px;
}
.about_widget .img img {
max-width: 100%;
}
.about_widget .text {
padding-top: 28px;
}
.about_widget .text h3 {
font-family: "Great Vibes", cursive;
font-size: 40px;
font-weight: 400;
margin-bottom: 12px;
}
.about_widget .text p {
margin-bottom: 0;
}
.categorie_list {
margin-bottom: 0;
}
.categorie_list li a {
font-size: 16px;
font-weight: 400;
color: var(--secondary_color);
position: relative;
padding-left: 20px;
}
.categorie_list li a:before {
content: "";
width: 6px;
height: 6px;
background: #aab0c0;
position: absolute;
left: 0;
top: 6.5px;
}
.categorie_list li a span {
padding-left: 10px;
}
.categorie_list li a:hover {
color: var(--brand_color);
}
.categorie_list li a:hover:before {
background: var(--brand_color);
}
.categorie_list li + li {
margin-top: 8px;
}
.recent_post_item {
align-items: center;
}
.recent_post_item img {
border-radius: 4px;
margin-right: 20px;
}
.recent_post_item .media-body h5 {
font-size: 16px;
line-height: 20px;
font-weight: 500;
transition: color 0.2s linear;
margin-bottom: 8px;
}
.recent_post_item .media-body h5:hover {
color: var(--brand_color);
}
.recent_post_item .media-body .entry_post_date {
font-size: 14px;
color: var(--p_color);
}
.recent_post_item + .recent_post_item {
margin-top: 20px;
}
.w_tag_list {
display: flex;
flex-wrap: wrap;
margin: -5px;
}
.w_tag_list li {
margin: 4px;
}
.w_tag_list li a {
color: var(--p_color);
padding: 2px 18px;
display: inline-block;
background: #f3f8f9;
font-size: 14px;
border-radius: 4px;
transition: all 0.2s linear;
}
.w_tag_list li a:hover {
box-shadow: 0 10px 20px 0 rgba(12, 118, 142, 0.24);
background: var(--brand_color);
color: #fff;
}
.comments_widget {
margin-bottom: 0;
}
.comments_widget li h6 {
font-size: 13px;
font-weight: 500;
color: var(--secondary_color);
margin-bottom: 12px;
}
.comments_widget li h6 i {
color: var(--p_color);
padding-right: 8px;
}
.comments_widget li .text {
display: block;
background-color: #f3f8f9;
border: 1px solid #e7edee;
border-radius: 4px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #686d7d;
padding: 8px 24px;
}
.comments_widget li + li {
margin-top: 23px;
}
.instragram_info {
margin: -5px;
display: flex;
flex-wrap: wrap;
}
.instragram_info .instragram_item {
display: block;
margin: 5px;
position: relative;
z-index: 0;
border-radius: 4px;
overflow: hidden;
transition: all 0.1s linear;
width: calc(90% / 3);
}
.instragram_info .instragram_item img {
max-width: 100%;
}
.instragram_info .instragram_item:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(29, 39, 70, 0.5);
z-index: 0;
opacity: 0;
transition: all 0.2s linear;
}
.instragram_info .instragram_item:hover:before {
opacity: 1;
}    .signup_area {
height: 100vh;
min-height: 580px;
background: #fbfcfd;
}
.signup_area .row {
height: 100%;
}
.sign_left {
width: calc(50% - 360px);
position: relative;
z-index: 1;
padding: 100px 70px 0;
}
.sign_left .top {
left: 0;
top: 0;
z-index: -1;
}
.sign_left .bottom {
bottom: 0;
right: 0;
z-index: -1;
}
.sign_left .round {
position: absolute;
width: 650px;
height: 650px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
left: -150px;
bottom: -60px;
z-index: -1;
}
.sign_left h2 {
color: #fff;
font-size: 36px;
line-height: 44px;
}
.signup_left {
background: #795fee;
}
.signup_left .middle {
top: 50%;
margin-top: -150px;
}
.sign_right {
width: calc(50% + 360px);
flex: 1;
display: flex;
align-items: center;
}
.sign_inner {
max-width: 520px;
margin: 0 auto;
}
.sign_inner h3 {
font-size: 26px;
line-height: 34px;
}
.sign_inner p {
font-size: 14px;
}
.sign_inner p a {
color: var(--secondary_color);
font-weight: 500;
}
.sign_inner .btn-google {
box-shadow: 0 4px 10px 0 rgba(4, 73, 89, 0.06);
border-radius: 6px;
border: 1px solid #e6ecee;
font-size: 14px;
color: var(--p_color);
padding: 8px 27px;
display: inline-block;
margin-top: 20px;
}
.sign_inner .btn-google img {
vertical-align: inherit;
padding-right: 8px;
}
.sign_inner .btn-google:hover {
box-shadow: none;
}
.sign_inner .divider {
border-bottom: 1px solid #e3e8ea;
position: relative;
margin-bottom: 30px;
margin-top: 36px;
}
.sign_inner .divider .or-text {
font-size: 16px;
color: var(--secondary_color);
position: absolute;
top: -14px;
padding: 0 10px;
background: #fbfcfd;
display: inline-block;
left: 50%;
margin-left: -21px;
}
.login_form .form-group {
margin-bottom: 30px;
position: relative;
}
.login_form .form-group .small_text {
color: var(--secondary_color);
margin-bottom: 5px;
}
.login_form .form-group .form-control {
border-radius: 6px;
background-color: #fbfcfd;
border: 1px solid #e3e8ea;
font-size: 14px;
color: var(--secondary_color);
font-weight: 400;
font-family: "Roboto", sans-serif;
height: 60px;
line-height: 60px;
padding: 2px 30px 0;
transition: all 0.2s linear;
}
.login_form .form-group .form-control.placeholder {
color: #878b99;
font-family: "Roboto", sans-serif;
}
.login_form .form-group .form-control:-moz-placeholder {
color: #878b99;
font-family: "Roboto", sans-serif;
}
.login_form .form-group .form-control::-moz-placeholder {
color: #878b99;
font-family: "Roboto", sans-serif;
}
.login_form .form-group .form-control::-webkit-input-placeholder {
color: #878b99;
font-family: "Roboto", sans-serif;
}
.login_form .form-group .form-control:focus {
box-shadow: 0 20px 30px 0 rgba(4, 73, 89, 0.1);
}
.login_form .form-group .check_box {
margin-top: -10px;
}
.login_form .form-group .check_box input[type=checkbox] {
position: relative;
top: 1px;
width: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: transparent;
}
.login_form .form-group .check_box input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 12px;
height: 12px;
background: #fbfcfd;
top: 0;
left: 0;
border-radius: 2px;
border: 1px solid #a6abb7;
}
.login_form .form-group .check_box input[type=checkbox]:checked:after {
content: "N";
font-family: "ElegantIcons";
display: block;
font-size: 10px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
color: var(--brand_color);
text-align: center;
line-height: 12px;
left: 0;
}
.login_form .form-group .l_text {
font-size: 16px;
color: var(--p_color);
padding-left: 20px;
margin-bottom: 0;
}
.login_form .form-group .l_text span {
color: var(--brand_color);
}
.login_form .form-group .confirm_password {
position: relative;
}
.login_form .form-group .forget_btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
font-size: 14px;
color: #a5a9b4;
}
.login_form .thm_btn {
padding: 9px 24px;
box-shadow: none;
}
.login_form .thm_btn:hover {
box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
}  .signin_left {
background: var(--brand_color);
}
.signin_left:before {
content: "";
left: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(180deg, var(--brand_color) 0%, var(--secondary_color) 100%);
position: absolute;
bottom: 0;
z-index: 0;
}
.signin_left .round {
bottom: 100px;
width: 600px;
height: 600px;
left: -50px;
}
.signin_left .middle {
bottom: 50px;
}
.signin_left .bottom {
bottom: 100px;
}    .get_info_area {
position: relative;
z-index: 1;
}
.get_info_item {
border: 1px solid #e3e8ea;
border-radius: 6px;
padding: 31px 35px;
margin-left: 0;
margin-right: 0;
}
.get_info_item .media img {
margin-right: 60px;
}
.get_info_item .media .media-body h5 {
margin-bottom: 4px;
font-size: 22px;
}
.get_info_item .media .media-body p {
margin-bottom: 0;
color: var(--p_color);
}
.get_info_item .time {
font-size: 16px;
color: var(--p_color);
}
.get_info_item .time span {
color: var(--secondary_color);
}
.get_info_item .doc_border_btn {
max-width: 190px;
width: 100%;
display: block;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
.get_info_item + .get_info_item {
margin-top: 30px;
}
.contact_info {
padding-top: 80px;
}
.contact_info .contact_form .form-group h6 {
font-size: 16px;
}
.contact_info .contact_form .form-group .box_info {
margin-left: -20px;
margin-right: -20px;
}
.contact_info .contact_form .form-group .form-check {
display: inline-block;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: var(--p_color);
padding-left: 22px;
margin: 20px 20px 15px;
}
.contact_info .contact_form .form-group .form-check input[type=checkbox] {
width: 12px;
position: absolute;
outline: none;
height: 12px;
top: 1px;
left: 0;
margin: 0;
}
.contact_info .contact_form .form-group .form-check input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 12px;
height: 12px;
border: 1px solid var(--p_color);
top: 0;
left: 0;
border-radius: 2px;
background-color: #fff;
}
.contact_info .contact_form .form-group .form-check input[type=checkbox]:after {
content: "";
display: block;
width: 5px;
height: 11px;
border: solid var(--brand_color);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: -2px;
left: 5px;
opacity: 0;
transition: all 0.2s linear;
}
.contact_info .contact_form .form-group .form-check input[type=checkbox]:checked:before {
border-color: var(--brand_color);
}
.contact_info .contact_form .form-group .form-check input[type=checkbox]:checked:after {
opacity: 1;
}
.contact_info .contact_form .form-group .form-check input[type=checkbox]:checked + label {
color: var(--brand_color);
}
.contact_info .contact_form .form-group .form-check input[type=radio] {
width: 12px;
position: absolute;
outline: none;
height: 12px;
margin: 0;
left: 0;
top: 1px;
}
.contact_info .contact_form .form-group .form-check input[type=radio]:before {
content: "";
display: block;
position: absolute;
width: 12px;
height: 12px;
border: 1px solid var(--p_color);
border-radius: 50%;
top: 0;
left: 0;
background-color: #fff;
transition: all 0.2s linear;
}
.contact_info .contact_form .form-group .form-check input[type=radio]:after {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand_color);
position: absolute;
top: 50%;
left: 50%;
margin-left: -3px;
margin-top: -3px;
transform: scale(0);
transition: all 0.2s linear;
}
.contact_info .contact_form .form-group .form-check input[type=radio]:checked:before {
border-color: var(--brand_color);
}
.contact_info .contact_form .form-group .form-check input[type=radio]:checked:after {
transform: scale(1);
}
.contact_info .contact_form .form-group .form-check input[type=radio]:checked + label {
color: var(--brand_color);
}
.contact_info .contact_form .form-group .form-control {
height: 60px;
line-height: 55px;
background: #f9fbfc;
box-shadow: none;
border-color: #d9e1e3;
padding-left: 30px;
font-weight: 400;
transition: all 0.2s linear;
border-radius: 6px;
}
.contact_info .contact_form .form-group .form-control.placeholder {
color: #878b99;
}
.contact_info .contact_form .form-group .form-control:-moz-placeholder {
color: #878b99;
}
.contact_info .contact_form .form-group .form-control::-moz-placeholder {
color: #878b99;
}
.contact_info .contact_form .form-group .form-control::-webkit-input-placeholder {
color: #878b99;
}
.contact_info .contact_form .form-group .form-control.message {
height: 200px;
padding-top: 0;
}
.contact_info .contact_form .form-group .form-control:focus {
background: #fbfcfd;
box-shadow: 0 20px 30px 0 rgba(4, 73, 89, 0.1);
}
.contact_info .contact_form .form-group:last-child {
margin-bottom: 0;
}
.contact_info .contact_fill {
padding-top: 20px;
}    .error_area {
display: flex;
position: relative;
z-index: 1;
height: 100vh;
min-height: 620px;
}
.error_dot {
position: absolute;
border-radius: 50%;
}
.error_dot.one {
width: 8px;
height: 8px;
background: var(--brand_color);
left: 325px;
top: 120px;
animation: spin2 2s infinite alternate;
}
.error_dot.two {
width: 16px;
height: 16px;
background: #f99e43;
left: 170px;
bottom: 260px;
animation: spin1 1s infinite alternate;
}
.error_dot.three {
width: 30px;
height: 30px;
background: #beebf5;
animation: spin1 2s infinite alternate;
right: 225px;
top: 370px;
}
.error_dot.four {
width: 6px;
height: 6px;
background: #ffa3be;
bottom: 148px;
right: 185px;
animation: spin2 2s infinite alternate;
}
.error_content_two {
max-width: 970px;
margin: 0 auto;
}
.error_content_two h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
}
.error_content_two p {
font-size: 18px;
color: #82879c;
}
.error_img {
padding-bottom: 55px;
position: relative;
z-index: 1;
}
.error_img .error_shap {
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
.error_img .clipInDown {
display: inline-block;
position: relative;
}
.error_img .one {
top: -50px;
}
.error_img .two {
margin: 0 12px;
top: -12px;
}
.error_img .three {
top: -58px;
}
.error_img .img_one {
animation: customUp 1.5s infinite alternate;
}
.error_img .img_two {
animation: customUp 1.8s infinite alternate;
}
.error_img .img_three {
animation: customUp 2s infinite alternate;
}
.error_search {
margin-bottom: 40px;
padding-top: 25px;
}
.error_search .form-control {
height: 60px;
border-radius: 4px;
background: #fff;
box-shadow: 0 16px 50px 0 rgba(3, 62, 75, 0.1);
font-size: 16px;
font-weight: 400;
color: var(--secondary_color);
border: 0;
padding-left: 30px;
}
.error_search .form-control.placeholder {
color: #82879c;
}
.error_search .form-control:-moz-placeholder {
color: #82879c;
}
.error_search .form-control::-moz-placeholder {
color: #82879c;
}
.error_search .form-control::-webkit-input-placeholder {
color: #82879c;
}   .footer_area {
padding-top: 100px;
position: relative;
z-index: 1;
}
.footer_area .leaf {
right: 60px;
bottom: 0;
width: 180px;
z-index: -1;
}
.footer_area .f_man {
right: 280px;
bottom: 40px;
}
.footer_area .f_man_two {
bottom: 60px;
left: 125px;
}
.footer_area .f_cloud {
bottom: 410px;
left: 150px;
}
.footer_area .f_email {
left: 75px;
bottom: 290px;
}
.footer_area .f_email_two {
bottom: 200px;
left: 250px;
}
.footer_p_top {
padding-top: 225px;
}
.footer_top .border_bottom {
margin-top: 100px;
}
.border_bottom {
width: 100%;
height: 1px;
background: #e8f0f1;
}
.f_widget .f_title {
font-size: 18px;
margin-bottom: 30px;
}
.footer_top .footer_widget:first-child .widget.f_widget {
padding-left: 0;
}
.footer_top .footer_widget .widget.subscribe_widget {
padding-right: 30px;
}
.f_widget.subscribe_widget .f_logo {
display: inline-block;
margin-bottom: 32px;
}
.f_widget.subscribe_widget h4 {
margin-bottom: 34px;
}
.f_widget.link_widget .link_list {
margin-bottom: 0;
}
.f_widget.link_widget .link_list li a {
color: var(--p_color);
font-size: 16px;
}
.f_widget.link_widget .link_list li a:hover {
color: var(--brand_color);
}
.f_widget.link_widget .link_list li + li {
margin-top: 15px;
}
.footer_subscribe_form {
position: relative;
}
.footer_subscribe_form .form-control {
border-radius: 4px;
background: #fff;
box-shadow: 0 20px 30px 0 rgba(4, 73, 89, 0.08);
height: 56px;
border: 1px solid transparent;
color: var(--secondary_color);
padding-left: 25px;
position: relative;
transition: all 0.2s linear;
}
.footer_subscribe_form .form-control.placeholder {
color: #878b99;
}
.footer_subscribe_form .form-control:-moz-placeholder {
color: #878b99;
}
.footer_subscribe_form .form-control::-moz-placeholder {
color: #878b99;
}
.footer_subscribe_form .form-control::-webkit-input-placeholder {
color: #878b99;
}
.footer_subscribe_form .form-control:focus {
outline: none;
}
.footer_subscribe_form .s_btn {
border: 0;
font-size: 16px;
font-weight: 400;
background: var(--brand_color);
border-radius: 4px;
color: #fff;
position: absolute;
top: 8px;
bottom: 8px;
right: 8px;
padding: 7px 22px;
}
.f_social_icon {
padding-top: 40px;
}
.f_social_icon li {
display: inline-block;
}
.f_social_icon li a {
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid #79ccde;
font-size: 14px;
line-height: 45px;
text-align: center;
display: block;
color: var(--brand_color);
margin-right: 6px;
}
.f_social_icon li a:hover {
background: var(--brand_color);
border-color: var(--brand_color);
box-shadow: 0 10px 20px 0 rgba(12, 118, 142, 0.2);
color: #fff;
}
.footer_bottom {
padding: 38px 0 66px;
position: relative;
z-index: 1;
}
.footer_bottom p {
margin-bottom: 0;
font-size: 16px;
color: var(--p_color);
}
.footer_bottom p a {
color: var(--brand_color);
}
.pl_30 {
padding-left: 30px;
}
.pl_70 {
padding-left: 70px;
}
.simple_footer {
padding: 30px 0;
position: relative;
z-index: 1;
background: var(--secondary_color);
overflow-x: hidden;
}
.simple_footer .row {
align-items: center;
}
.simple_footer .leaf_right {
position: absolute;
right: 170px;
bottom: 0;
z-index: -1;
}
.simple_footer p {
margin-bottom: 0;
font-size: 16px;
color: #a4a8b4;
}
.simple_footer p a {
color: var(--brand_color);
}
.simple_footer .f_social_icon {
margin-bottom: 0;
padding-top: 0;
display: flex;
justify-content: flex-end;
}
.simple_footer .f_social_icon li a {
width: 40px;
height: 40px;
line-height: 40px;
color: #8d93a4;
border-color: #8d93a4;
}
.simple_footer .f_social_icon li a:hover {
background: var(--brand_color);
border-color: var(--brand_color);
color: #fff;
}
.reset-none {
display: none!important;
}
.wp-block-heading {
color: var(--black_900) !important;
}
.eazydocs-comments-wrap .c_head {
color: var(--black_900);
}
.c_head {
color: var(--black_900);
}
.breadcrumb_area_three .breadcrumb_text .text-center {
color: var(--black_900);
}
.shortcode_title h1, h2, h3, h4, h5, h6 {
color: var(--black_900);
}
.elementor-heading-title {
color: var(--black_900) !important;
}