/*****************************
	Layout
*****************************/

.site-content {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.site-content > :first-child {
	flex-grow: 1;
}

.header-inner {
    color: #fff;
    padding: 40px 0;

    background: linear-gradient(90deg, #45c5ff, #03a9f4, #16a3f2);
    background-size: 200% 200%;

    -webkit-animation: AnimationName 10s ease-in infinite;
    -moz-animation: AnimationName 10s ease-in infinite;
    animation: AnimationName 10s ease-in infinite;
}

.header-inner.header-inner-big {
    padding: 100px 0;
}


/* Section Title */
.section-title {
    margin-bottom: 40px;

    h2 {
        margin-bottom: 0px;
    }

    .title {
        padding-bottom: 15px;
        margin-bottom: 0;
        position: relative;
        text-transform: capitalize;
        letter-spacing: -0.5px;

        &:before {
            position: absolute;
            content: "";
            height: 3px;
            width: 40px;
            background: $primary;
            bottom: 0;
            left: 0;
        }
    }

    p {
        margin-top: 30px;
        margin-bottom: 0px;
    }
}

.section-title.center {
    text-align: center;

    .title {
        &:before {
            left: 50%;
            margin-left: -20px;
        }
    }
}

.section-title-02 {
    margin-bottom: 40px;

    h2 {
        margin-bottom: 0px;
    }

    .title {
        margin-bottom: 0px;
    }

    p {
        margin-top: 20px;
        margin-bottom: 0px;
    }
}

.list-style {
    li {
        display: flex;
        margin-bottom: 15px;
        align-items: flex-start;

        i {
            margin-top: 3px;
        }
    }
}

.list-style-2 {
    li {
        margin-bottom: 5px;
    }
}


/* Category style */
.category-style {
    display: flex;
    flex-wrap: wrap;
}

.category-item {

    transition: all 0.3s ease-in-out;
    position: relative;
    cursor: pointer;
    border-right: 1px solid $gray-1;
    padding: 30px 0;
    color: $gray-3;

    &:hover {
        text-decoration: none;
        box-shadow: 0px 10px 25px -6px rgba($black, 0.15) !important;
    }

    &:nth-child(4n+0) {
        border-right: 0;
    }

    &:nth-child(1n+5) {
        border-top: 1px solid $gray-1;
    }

    .category-name {
        font-size: 16px;

        @include media-breakpoint-down(sm) {
            font-size: 12px;

            span {
                font-size: 12px;
            }
        }
    }
}

.category-icon {
    width: 50px;
    height: 50px;
    display: inline-block;


    i {
        font-size: 50px;
        line-height: 50px;
        color: $primary;
    }
}


/* category-style-03 */
.category-style-03 {
    .category-item {
        padding: 40px 20px;

        .category-icon {
            width: 100px;
            height: 100px;
            text-align: center;
            background: $white;
            line-height: 100px;
            border-radius: 100%;
            border: 1px solid $border-color;
            transition: all 0.3s ease-in-out;

            i {
                font-size: 40px;
                line-height: inherit;
                color: $primary;
                transition: all 0.3s ease-in-out;
            }
        }

        &:hover {
            text-decoration: none;

            .category-icon {
                box-shadow: -1px 4px 10px 1px rgba($blue, 0.1) !important;
                border: 1px solid $primary;
                background: $primary;
                text-decoration: none !important;

                i {
                    color: $white;
                }
            }
        }
    }
}


/* index-slider */
.owl-carousel {
    .item {
        .category-item {
            max-width: 100%;
            flex: 0 0 100%;
        }
    }
}

.slider-category {
    margin-top: -80px;
    box-shadow: 0px 0px 24px 4px rgba(0, 25, 53, 0.04);
}

/* browse-jobs */
.browse-job {
    border-bottom: 1px solid $border-color;
    align-items: center;
}

/* category home 02 */
.category-style-02 {
    ul {
        li {
            margin-bottom: 15px;

            &:last-child {
                margin-bottom: 0px;
            }

            a {
                display: flex;
                align-items: center;
            }
        }
    }
}

.category-style-02 {
    ul {
        li {
            .category-title {
                font-size: 14px;
                margin-bottom: 0;
                transition: all 0.3s ease-in-out;
            }

            &:hover {
                .category-title {
                    color: $primary;
                }
            }
        }
    }
}

.category-style-02 {
    ul {
        li {
            .category-count {
                background: $gray-1;
                padding: 4px 0px;
                border-radius: $border-radius;
                color: $gray-3;
                margin-left: auto;
                transition: all 0.3s ease-in-out;
                width: 65px;
                text-align: center;
                flex: 0 65px;
            }

            &:hover {
                a {
                    .category-count {
                        background: $primary;
                        color: $white;
                    }
                }
            }
        }
    }
}

/* job-found */
.job-found {
    display: flex;
    align-items: center;

    span {
        background: $primary;
        padding: 5px 10px;
        border-radius: $border-radius;
        color: $white;
        font-size: 14px;
    }
}


/* popup-icon */
.popup-icon {
    position: relative;
    display: block;

    i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
        transition: all 0.3s ease-in-out;
        padding-left: 1px;

        &:hover {
            color: $white;
        }
    }
}

.forgot-pass {
    p {
        margin-top: 7px;
        margin-bottom: 5px;
    }
}


/* index slider */

.video-img .popup-icon {
    position: initial;
}


/* iframe */
iframe {
    width: 100%;
    border: 0;
}

/* newsletter */

.newsletter {
    position: relative;
}


/* job-grid-map */
.si-content-wrapper {
    padding: 0;
}

.custom-window.open {
    .si-frame {
        box-shadow: 0 4px 16px rgba(black, 0.1);
        padding: 10px;
        overflow: visible;
    }
}

.map-canvas {
    width: 100%;
    height: 100%;
}

.custom-window {
    top: 30px;
    width: 280px;
    -webkit-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;

    .si-content {
        overflow: visible;
        background-color: $white;
        position: relative;
    }
}

.custom-window.active {
    top: 0;
    opacity: 1;
    visibility: visible;
}


.job-grid-map {
    position: relative;
    max-height: inherit;
    padding: 100px 12px 12px 12px;
    overflow: auto;
    z-index: 2;
}

.si-pointer-bg-top {
    box-shadow: 0 8px 16px rgba(black, 0.1);
}

.job-grid-map-img {
    position: absolute;
    top: 15px;
    right: 0;
    left: 10px;
    width: 76px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    z-index: 1;
}

.job-grid-map-title {
    margin-top: 12px;
}

.job-grid-map-price {
    span {
        font-size: 13px;
    }
}

.job-grid-map-content {
    p {
        margin: 0;
    }

    * {
        + {
            p {
                margin-top: 1em;
            }

        }

    }

}

.custom-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    width: 24px;
    padding: 0 6px;
    height: 24px;
    -webkit-transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: 0;
    background-color: $gray-8;
    color: $white;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;

    &:hover {
        background-color: $primary;
    }

    &:focus {
        background-color: $primary;
    }

    &:active {
        background-color: $primary;
    }

}


/* our-clients */
.our-clients {
    .owl-carousel {

        .item {

            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100px;
            flex-direction: column;

            img {
                padding: 10px;
                display: inline-block;
                background: #ffffff;
                max-height: 70px;
                max-width: 100%;
                width: auto;
            }
        }

    }

    .owl-carousel .owl-dots {
        margin-top: 0;
        margin-bottom: 0px;
    }

}

/* Table */
.table-striped tbody tr:nth-of-type(odd) {
    background: #ffffff;
}

.table-striped tbody tr:nth-of-type(even) {
    background: #fafcfc;
}


/* mfp-close */
.mfp-image-holder .mfp-close {
    color: $white;
    right: -15px;
    text-align: right;
    padding-right: 6px;
    background-color: $primary;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    line-height: 30px;
    top: 25px;
    position: absolute;
}