/* ---------------------
 * Misc Configuration that can be use to any page that supporting bootstrap ver 4+.
 * This is the parent of all bootstrap file.
 */

body {
    padding-top: 54px;
    background-color: #fff !important;
}
.bg-image-full {
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/*
 * Header/Logo
 */
.hk-logo {
    width: 200px !important;
}
.hk-logo-position {
    top: 20px !important;
}
.header-gradient {
    /*
    Gradient Blue
    background-image: linear-gradient(150deg, #2d1582 0%, #19a0ff 100%);
    */
    /*
    Gradient Green
    background-image: linear-gradient(90deg, rgb(0,155,175) 10%, #cae9e7 80%);
    */
    background-image: url("/img/hp-hero-light-opacity.png");
    background-repeat: repeat-x;
    background-size: cover;
}

.header-gradient-override {
    background-image: url("/img/hp-hero-light-opacity.png") !important;
    background-position: center center;
    background-repeat: repeat-x;
    background-size: cover;
}

.header-position-relative {
    position: relative !important;
}
.bg-primary ::-moz-selection {
    color: #377dff;
    background-color: #fff;
}
.bg-primary ::selection {
    color: #377dff;
    background-color: #fff;
}
.header-position-absolute-bottom-0 {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}
.hk-number {
    font-size: 15px;
}
/*.header-top-border-line {
    border-top: 10px solid rgb(0,155,175) !important;
}*/

.alert {
    border-radius: 0px !important;
}

/*
 * Navigation
 */
.navbar {
    padding: .2rem 1rem;
    background-color: #fff;
}
.nav-link {
    color: #868686 !important;
    font-size:14px;
}
.nav-link:hover {
    color: #333 !important;
    font-size:14px;
}
.navbar-toggler {
    color: #333 !important;
    background-color: #868686 !important;
}
.navbar-panel {
    background-color: #fff !important;
    width:100% !important;
    z-index:999999999999 !important;
}
.navbar-show {
    display: block;
}
.navbar-hide {
    display: none;
}
.navbar-top-1 {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    top:0;
    left: 0;
    width: 100%;
    z-index:9999999;
}
.navbar-top-2 {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    top:0;
    left: 0;
    width: 100%;
    z-index:9999999;
    position: fixed;
}
/*.navbar-nav-bottom {
    -webkit-box-shadow: 1px 1px 1px #333;
    -moz-box-shadow:    1px 1px 1px #333;
    box-shadow:         1px 1px 1px #333;
}*/

/*
 * Avatar
 */
.avatar-circle {
    border-width: 3px;
    border-style: solid;
    border-color: #fff;
    border-radius: 50% 50% 0 50%;
    width: 135px;
    height: 135px;
}
.avatar-overview {
    border-color: #eaeaea;
}
.avatar-circle-sm {
    border-width: 3px;
    border-style: solid;
    border-color: #ced4da;
    border-radius: 50%;
    width: 70px;
}
.avatar-position {
    position: relative;
    top:10px;
    z-index: 20;
}
.avatar-position-top-right {
    position: absolute;
    left: 252px;
    top: 315px;
}

@media (max-width: 767px) {
    .avatar-position-top-right {
        left: 247px;
        top: 315px;
    }
}

/*
 * SVG
 */
.svg-clear {
    display: block;
}

/*
 * Fill Colors
 */
.g-fill-white {
    fill: #fff;
}

/*
 * Forms
 */
.formError {
    font-size:12px;
    color: #ff5e00;
}

/*
 * Shadow Button
 */
.btn-layout-sm {
    padding: 10px;
}
.btn-layout-lg {
    padding: 10px;
    font-size: 24px;
}
.btn-top-spacing-10 {
    padding-top: 10px;
}
.btn-custom-orange-lg {
    color: #fff;
    background-color: #f9a31a;
    border-color: #bf5019;
}
.btn-custom-orange-lg:hover {
    color: #fff;
    background-color: rgb(240, 91, 5);
    border-color: #bf5019;
}
.btn-custom-dark-green-lg {
    color: #fff;
    background-color: rgb(0,155,175);
    border-color: rgb(42, 130, 128);
}
.btn-custom-dark-green-lg:hover {
    color: #fff;
    background-color: rgb(3, 165, 175);
    border-color: rgb(42, 130, 128);
}

/*  Flat Button */
.btn-flat-orange {
    background-color: #FF5E00 !important;
    border: 1px solid #FF5E00 !important;
    border-radius: .15rem !important;
    color: #fff !important;
}
.btn-flat-green {
    background-color: rgb(0,155,175) !important;
    border: 1px solid rgb(0,155,175) !important;
    border-radius: .15rem !important;
    color: #fff !important;
}
.btn-flat-green:hover {
    background-color: rgb(4, 169, 191) !important;
}
.btn-flat-red {
    background-color: #f92c3f !important;
    border: 1px solid #f92c3f !important;
    color: #fff !important;
}
.btn-flat-red:hover {
    background-color: #f65968 !important;
}
.btn-flat-gray {
    background-color: #6c757d !important;
    border: 1px solid #6c757d !important;
    color: #fff !important;
}
.btn-flat-gray:hover {
    background-color: #7b848d !important;
}

/*
 * Login
 */
.login-extra-links {
    width: 70%;
}

/*
 * Modal
 */
.modal-form-spacer {
    padding-top: 15px;
}
.modal-form-title {
    color: #007bff;
}
.modal-form-label {
    color: #999;
}
.modal-social-icon {
    width: 20px;
}
.modal-form-note {
    color: #808080;
    font-size:12px;
}
.modal-file-viewer {
    padding:0px !important;
}
.modal-container-file-viewer {
    padding-left:0px !important;
    padding-right:0px !important;
}
.modal-margin {
    padding-left:5px !important;
    padding-right:5px !important;
}

/*
 * Social Networks
 */
.social-link a {
    text-decoration: none;
}
.social-networks {
    width: 20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.social-circular {
    border-radius: 10px !important;
}

/*
 * Text Customization
 */
.title-underline {
    border-bottom: 4px solid #f9a31a;
}
.title-label-spacing {
    padding-bottom: 10px;
    padding-top:5px;
    color: #5B5D62;
}
.title-dirty-white {
}
.title-light {
    color: #fff !important;
}
.title-dark {
    color: #333;
}
.title-yellow {
    color: #CCCC00;
}
.title-top-spacing-10 {
   padding-top: 5px;
}
.text-dark-green {
    color: rgb(0,155,175);
}
.text-light-green {
    color: #197B8F;
}
.text-additional-details{
    color: #ff5e00;
}
.profile-verified {
    width:20px;
}
.badge-orange {
    color: #f9a31a;
    border: 2px solid #f9a31a;
    background-color: #fff;
}
.badge-orange a {
    color: #f9a31a;
    text-decoration: none !important;
}
.alert-orange {
    background-color: #f9a31a;
    color: #fff;
}

/*
 * Footer
 */
.footer-logo {
    width: 90px;
 }
.footer-content {
    font-size: 12px;
    color: #9A9A9A;
}
.footer-layout {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.footer-copyright {
    font-size:14px !important;
    padding-bottom: 20px;
}

/*
 * Desktop View
 */
.footer-mobile {
    display:none;
}
.footer-dekstop {
    display: block;
}

/*
 * Misc
 */
.obj-hide {
     display:none;
 }
.row-spacer {
    padding-top: 1px;
}
.hr-flat {
    margin-top: 1px;
    margin-bottom: 1px;
    border-top:#5b5d62 solid 1px !important;
}
.inset-shadow {
    box-shadow: 0 3px 6px -2px rgba(0,0,0,.3) inset;
}
.section-divider {
    padding-top:15px;
}
.section-divider-dotted {
    padding-top:10px;
    border: 1px dotted #333;
    border-style: none none dotted;
    color: #fff;
    background-color: #fff;
}
.override-border-light {
    border: 0px solid !important;
    background-color: #f7f7f9 !important;
}
.elements-clickable {
    cursor: pointer;
}
.custom-title-spacer {
    padding-top:8px;
}
.custom-wrapper {
    word-wrap: break-word;
}
.custom-spacer {
    line-height: 25px !important;
}
.custom-remover {
    display: none !important;
}
.custom-client-reviews-height {
    height:126px !important;
}
.custom-col-spacer {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

/*
 * Expert Overview
 */
.mobile-expert-ratings {
    display: none;
}

/*
 * Expert Images
 */
.expert-header-background {
    width:100%;
    box-shadow:2px 2px 5px #ccc;
}
.expert-header-profile-pic-shadow {
    box-shadow: 2px 2px 2px #ccc;
}

/*
 * Expert Summary Counter
 */
.expert-text-counter {
    color: #333;
    text-shadow: 1px 2px 2px #ccc;
}
.expert-text-label {
    color: #9A9A9A;
}
.expert-profile-avatar-spacing {
    padding-top: 75px;
}
/*.expert-profile-background {
    background: url("/img/rounded_line.svg");
}*/
.expert-ratings-orange {
    font-size: 39px;
    background-color: #f9a31a;
    color: #fff;
    padding: .8em .2em .8em .2em !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    line-height: 0px !important;
}
.expert-ratings-position {
    width:80px !important;
    position:absolute;
    top:60px;
    left:330px;
}
.expert-sub-ratings {
    font-size:12px;
}

/*
 * Portfolio
 */
.hovereffect {
    width: 100%;
    height: 267px !important;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background: #ccc;
}
.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.hovereffect img {
    display: block;
    position: relative;
    max-width: none;
    width: calc(100% + 290px);
    /* -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; */
}
.hovereffect-default img {
    width: calc(100% + 34px) !important;
    left: -6px;
    top: -7px;
}
.hovereffect:hover img {
    opacity: 0.10;
    filter: alpha(opacity=40);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 14px;
    overflow: hidden;
    padding: 0.5em 0;
    background-color: transparent;
}
.hovereffect h2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #f9a31a;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}
.hovereffect:hover h2:after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.hovereffect a, .hovereffect p {
    color: #2b2b2b;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}
.hovereffect:hover a, .hovereffect:hover p {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.portfolio-item-spacer {
    padding-top: 15px;
}

/*
 * Direct Contact to Expert
 */
.u-gradient-half-primary-v1 {
    /*
    Light Green
    background-image: linear-gradient(150deg, #cae9e7 0%, #3C99AC 100%);
    */
    background-color: #f9fcfc;
    background-repeat: repeat-x;
}
.u-bg-img-hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.u-space-3 {
    padding-top: 2.125rem;
    padding-bottom: 2.125rem;
}
.u-fill-warning {
    fill: #ffc107;
}
.u-fill-warning-lighter {
    fill: #fdd14e;
}
.u-fill-warning-darker {
    fill: #efa02e;
}

.carousel-item-prev,
.carousel-item-next,
.carousel-item.active {
    display:flex;
}
.card-img-top-250 {
    max-height: 225px;
    overflow:hidden;
}
.carousel-inner>.carousel-item.next.left,
.carousel-inner>.carousel-item.prev.right {
    transition: all 1s ease;
}

/*
 * Client to Expert Testimonial
 */
.testimonial-spacing {
    height: 90px;
    line-height: 90px;
    text-align: center;
}
.testimonial-footer-background {
    background-color: #290064;
}
.testimonial-client-name {
    font-size: 14px;
}

/*
 * Contact and Send Message
 */
.default-font-size {
    font-size: 13px;
}
.custom-height {
    height: 394px;
}
.box-top-spacer {
    padding-top:15px;
}
.box-bottom-spacer {
    padding-bottom:15px;
}
.box-rounded {
    border-radius:1px;
}
.box-contact-details {
    background-color: #f9fcfc;;
}
.box-contact-message {
}
.box-image-header-left {
    width:240px;
}
.box-image-header-right {
    width:150px;
}

/*
 * Google Map
 */
#map_container{
    position: relative;
}
#map{
    height: 0;
    overflow: hidden;
    padding-bottom: 22.25%;
    padding-top: 30px;
    position: relative;
}

/*
 * Edit Mode
 */
.edit-textarea-viewer {
    border:1px solid #ccc;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    height:200px;
    overflow-y: scroll !important;
}
.edit-icon-link {
    left:95% !important;
    position:absolute;
    font-size:24px !important;
    padding-top:25px !important;
}
.edit-icon-box {
    cursor: pointer;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 5px;
    background-color: #fff !important;
    border-radius: 4px;
    text-align: center;
    border:1px solid #eae6e6;
    z-index: 0px;
}
.edit-icon-box-info {
    padding-right: 8px !important;
    cursor: default !important;
}
.edit-icon-box:hover {
    color: #999;
}
.edit-text-icon {
    z-index: 99;
}
.edit-mode-portfolio-link {
    cursor: pointer;
    font-size:24px;
    color: #CC0000;
    float:right;
    padding-right:25px;
    font-weight:bold;
}
.edit-mode-portfolio-link:hover {
    color: #ccc;
}
.edit-link {
    font-family:arial;
    font-size:18px
}
/*
Remove hovering section at the moment until the edit mode behaviour is finalize.
This code will retain here for future use.

.edit-section-expert-top-profile:hover, .edit-section-expert-summary-counter:hover,
.edit-section-expert-overview:hover, .edit-section-expert-portfolio:hover,
.edit-section-expert-information:hover {
    border:2px dashed #f5c6cb;
    opacity:0.5;
}
*/

@media (max-width: 414px) {
    /*
     *  Sample Device View (iPhone 7 Plus below)
     */
    .section-divider {
        padding-top:0px;
    }

    .avatar-middle {
        display: none !important;
    }

    .expert-rating {
        display: none !important;
    }
    .mobile-expert-ratings {
        display: block !important;
        width:70px;
    }


    .testimonial-title {
        text-align: center !important;
    }

    .navbar-nav .nav-link {
        padding-left: 10px;
    }
    .navbar-nav-top {
        border-top:solid #CCC 1px !important;
    }

    .footer-mobile {
        display: block;
    }
    .footer-desktop {
        display: none !important;
    }
}