/*
    2.Reset
        2.2. Default base

 */

// Color
.f-red {
    color: #ff0000;
}

// Typography
.f-10 {
    font-size: 10px;
}

.f-15 {
    font-size: 15px;
}

.f-20 {
    font-size: 20px;
}

// border
.bd-7 {
    border: 2px solid #f0f0f0;
    @include border-radius(10px);
    &.v2 {
        border: 1px solid #f0f0f0;
    }
}

.bd-999 {
    border: 2px solid #f0f0f0;
    @include border-radius(999px);
}

.pd-bd {
    border: 1px solid #f0f0f0;
    @include border-radius(10px);
    padding: 30px;
}

.item-pd {
    border: 2px solid #f0f0f0;
    @include border-radius(10px);
    padding: 25px 25px 32px 25px;
    &:hover {
        @include box-shawdow-pd;
    }
}

.image-bd {
    @include border-radius(10px);
    overflow: hidden;
    z-index: 1;
    position: relative;
    img {
        @include border-radius(10px);
    }
}
.bd-half{
    border-radius:10px 10px 0 0;
    overflow: hidden;
}

/*Padding Around the Block*/

.space-padding-0 {
    padding: 0;
}

.space-padding-10 {
    padding: 10px;
}

.space-padding-20 {
    padding: 20px;
}

.space-padding-30 {
    padding: 30px;
}

.space-padding-40 {
    padding: 40px;
}

.space-padding-50 {
    padding: 50px;
}



/*Padding Top & Bottom*/

.space-padding-tb-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.space-padding-tb-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.space-padding-tb-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.space-padding-tb-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.space-padding-tb-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.space-padding-tb-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.space-padding-tb-70 {
    padding-top: 70px;
    padding-bottom: 70px;
}

.space-padding-tb-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.space-padding-tb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.space-padding-tb-130 {
    padding-top: 130px;
    padding-bottom: 130px;
}

.margin-0 {
    margin: 0px;
}



/*Margin Bottom*/

.space-5 {
    margin-bottom: 5px;
}

.space-10 {
    margin-bottom: 10px;
}

.space-15 {
    margin-bottom: 15px;
}

.space-20 {
    margin-bottom: 20px;
}

.space-25 {
    margin-bottom: 25px;
}

.space-30 {
    margin-bottom: 30px;
}

.space-35 {
    margin-bottom: 35px;
}

.space-40 {
    margin-bottom: 40px;
}

.space-45 {
    margin-bottom: 45px;
}

.space-50 {
    margin-bottom: 50px;
}

.space-55 {
    margin-bottom: 55px;
}

.space-60 {
    margin-bottom: 60px;
}

.space-65 {
    margin-bottom: 65px;
}

.space-70 {
    margin-bottom: 70px;
}

.space-75 {
    margin-bottom: 75px;
}

.space-80 {
    margin-bottom: 80px;
}

.space-85 {
    margin-bottom: 85px;
}

.space-90 {
    margin-bottom: 90px;
}

.space-95 {
    margin-bottom: 95px;
}

.space-100 {
    margin-bottom: 100px;
}

.space-32 {
    margin-bottom: 32px;
}

// row
.engoc-equal-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


/*Margin top*/

.space-margin-top-0 {
    margin-top: 0px;
}

.space-margin-top-85 {
    margin-top: 85px;
}

.space-margin-top-50 {
    margin-top: 50px;
    @media(max-width: $screen-xs-max) {
        margin-top: 0px;
    }
}

// margin left right
.mg-l10 {
    margin-left: 10px;
}

//hover images
@media(min-width:$screen-md) {
    .hover-images {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        img {
            @include transition2;
        }
        &:hover {
            img {
                @include scale(1.05);
            }
        }
    }
}

// hover image background
.effect_img:hover {
    background-color: #000;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

// hover banner
.effect_img {
    position: relative;
    overflow: hidden;
    &:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;

        -webkit-transition: all 0.6s ease-in-out;
        transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
        -ms-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
    }
    &:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;

        -webkit-transition: all 0.6s ease-in-out;
        transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
        -ms-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
    }
    @media(min-width:$screen-md) {
        &:hover:before {
            right: 50%;
            left: 50%;
            width: 0;
            background: rgba(255, 255, 255, 0.5);
        }
        &:hover:after {
            height: 0;
            top: 50%;
            bottom: 50%;
            background: rgba(255, 255, 255, 0.5);
        }
    }
}

.effect_img2 {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    &:before {
        border-bottom: 50px solid rgba(255, 255, 255, 0.4);
        border-top: 50px solid rgba(255, 255, 255, 0.4);
        content: "";
        height: 100%;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        position: absolute;
        top: 0;
        transform: rotate(45deg) scaleY(0);
        -o-transform: rotate(45deg) scaleY(0);
        -webkit-transform: rotate(45deg) scaleY(0);
        -moz-transform: rotate(45deg) scaleY(0);
        -ms-transform: rotate(45deg) scaleY(0);
        -webkit-transition: opacity .35s ease 0s, transform .35s ease 0s;
        transition: opacity .35s ease 0s, transform .35s ease 0s;
        transform-origin: 50% 50% 0;
        width: 100%;
    }
    @media(min-width:$screen-md) {
        &:hover:before {
            opacity: 1;
            filter: alpha(opacity=100);
            transform: rotate(45deg) scaleY(4);
            -o-transform: rotate(45deg) scaleY(4);
            -webkit-transform: rotate(45deg) scaleY(4);
            -moz-transform: rotate(45deg) scaleY(4);
            -ms-transform: rotate(45deg) scaleY(4);
        }
    }
}
.effect-img3{
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}
.plus-zoom{
    &:hover{
        &:before{
            right: 50%;
            left: 50%;
            background-color: rgba(255,255,255,0.5);
        }
        &:after{
                top: 50%;
                bottom: 50%;
                background-color: rgba(255,255,255,0.5);
        }
    }
    &::before, &::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        z-index: 1;
    }
}
//Padding container
@media(min-width:1600px) {
    .container-240 {
        width: 1430px;
    }
}

.container-msr {
    padding-left: 114px;
    width: 100%;
}

.container-50 {
    @include padding(50px);
    width: 100%;
}

.container-42 {
    @include padding(42px);
    width: 100%;
}

.container-40 {
    @include padding(40px);
    width: 100%;
}

.container-hf {
    padding-left: 40px;
    padding-right: 37px;
    width: 100%;
}

.container-fullwidth {
    width: 100%;
    @include padding(0px);
}

// Container
.container {
    @media(max-width: 1500px) {
        width:100%;
        @include padding(40px);
    }
}

.container {
    @media(max-width: 1024px) {
        width:100%;
        @include padding(15px);
    }
}

//Grid
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15,
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: $screen-sm-min) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: $screen-md-min) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: $screen-lg-min) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width:$screen-sm-min) {

    /* Column clear fix */
    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1),
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-15:nth-child(5n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1) {
        clear: none;
    }
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1) {
        clear: left;
    }
}




/*  Medium Desktop  */

@media (min-width:$screen-md-min) {

    /* Column clear fix */
    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1) {
        clear: none;
    }
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-15:nth-child(5n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1) {
        clear: left;
    }
}




/*  Large Desktop  */

@media (min-width:$screen-lg-min) {

    /* Column clear fix */
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1) {
        clear: none;
    }
    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1) {
        clear: left;
    }
}

.e-gradient {
    background: #54f0ff;
    background-image: -webkit-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: -moz-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: -ms-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: -o-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: linear-gradient(122deg, #c26af5, #54f0ff);
}

.e-pink-gradient {
    background: #ec1dff;
    background-image: -webkit-linear-gradient(122deg, #ec1dff, #f79bdc);
    background-image: -moz-linear-gradient(122deg, #ec1dff, #f79bdc);
    background-image: -ms-linear-gradient(122deg, #ec1dff, #f79bdc);
    background-image: -o-linear-gradient(122deg, #ec1dff, #f79bdc);
    background-image: linear-gradient(122deg, #ec1dff, #f79bdc);
    &:hover {
        color: #fff;
        box-shadow: 0px 2px 20px 2px rgba(236, 29, 255, 0.68)
    }
}

.e-yl-gradient {
    background: #ca9171;
    background-image: -webkit-linear-gradient(122deg, #ca9171, #f8ccb3);
    background-image: -moz-linear-gradient(122deg, #ca9171, #f8ccb3);
    background-image: -ms-linear-gradient(122deg, #ca9171, #f8ccb3);
    background-image: -o-linear-gradient(122deg, #ca9171, #f8ccb3);
    background-image: linear-gradient(122deg, #ca9171, #f8ccb3);
    &:hover {
        color: #fff;
        box-shadow: 0px 2px 20px 2px rgba(202, 145, 112, 0.68)
    }
}

.e-red-gradient {
    background: #ff4065;
    background-image: -webkit-linear-gradient(122deg, #ff4065, #ffdce9);
    background-image: -moz-linear-gradient(122deg, #ff4065, #ffdce9);
    background-image: -ms-linear-gradient(122deg, #ff4065, #ffdce9);
    background-image: -o-linear-gradient(122deg, #ff4065, #ffdce9);
    background-image: linear-gradient(122deg, #ff4065, #ffdce9);
    &:hover {
        color: #fff;
        box-shadow: 0px 2px 20px 2px rgba(255, 64, 100, 0.68)
    }
}

.e-orange-gradient {
    background: #fa4168;
    background-image: -webkit-linear-gradient(122deg, #fa4168, #f7cfba);
    background-image: -moz-linear-gradient(122deg, #fa4168, #f7cfba);
    background-image: -ms-linear-gradient(122deg, #fa4168, #f7cfba);
    background-image: -o-linear-gradient(122deg, #fa4168, #f7cfba);
    background-image: linear-gradient(122deg, #fa4168, #f7cfba);
    &:hover {
        color: #fff;
        box-shadow: 0px 2px 20px 2px rgba(255, 64, 100, 0.68)
    }
}
// button
.btn-gradient {
    color: #fff;
    font-weight: 500;
    background: #54f0ff;
    background-image: -webkit-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: -moz-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: -ms-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: -o-linear-gradient(122deg, #c26af5, #54f0ff);
    background-image: linear-gradient(122deg, #c26af5, #54f0ff);
    @include transition2;
    &:hover {
        color: #fff;
        box-shadow: 0px 2px 20px 2px rgba(194, 106, 245, 0.68)
    }
}

// ribbon header
.h-ribbon {
    width: 40px;
    height: 17px;
    line-height: 18px;
    @include border-radius(20px);
    @include tracking(200);
    font-size: 8px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    display: inline-block;
    &.v3 {
        width: 31px;
        height: 13px;
        line-height: 13px;
        font-size: 7px;
        &.e-green {
            &:before {
                content: none;
            }
        }
    }
    &.e-green {
        background: #42e9a8;
        &:before {
            content: ' ';
            transform: rotate(225deg);
            position: absolute;
            width: 0;
            height: 0;
            left: 8px;
            border: 4px solid;
            top: 12px;
            border-color: #42e9a8 transparent transparent #42e9a8;
        }
    }
    &.e-skyblue {
        background: #55d1e3;
        &:before {
            content: ' ';
            transform: rotate(225deg);
            position: absolute;
            width: 0;
            height: 0;
            left: 8px;
            border: 4px solid;
            top: 12px;
            border-color: #55d1e3 transparent transparent #55d1e3;
        }
    }
    &.e-red {
        background: #ff5050;
        &.v2 {
            &:before {
                content: ' ';
                transform: rotate(225deg);
                position: absolute;
                width: 0;
                height: 0;
                left: 8px;
                border: 4px solid;
                top: 12px;
                border-color: #ff5050 transparent transparent #ff5050;
            }
        }
    }
    &.h-pos {
        position: absolute;
        top: 0;
        right: 0;
        &.v2 {
            right: 50px;
            top:-8px;
        }
        &.v3 {
            margin-left: 5px;
            top: -10px;
            position: relative;
        }
        &.v4{
            top:-5px;
            right:22px;
        }
    }
}

// icon menu
.icon-mobile {
    margin: 0;
    padding: 0;
    border: 0;
    height: 30px;
    width: 30px;
    margin-right: -10px;
    margin-top: 0px;
    background: transparent;
}

.e-icon-menu {
    .navbar-toggler-bar {
        display: block;
        width: 25px;
        height: 2px;
        margin-bottom: 5px;
        background: #d7d7d7;
        @include transition2;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.e-icon-menu.active .navbar-toggler-bar:first-child {
    position: relative;
    top: 6px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.e-icon-menu.active .navbar-toggler-bar:nth-child(2) {
    opacity: 0;
}

.e-icon-menu.active .navbar-toggler-bar:nth-child(3) {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: relative;
    bottom: 8px;
}

.scroll_top {
    display: inline-block;
    bottom: 65px;
    position: fixed;
    right: 15px;
    width: 44px;
    height: 44px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    z-index: 1003;
    i {
        line-height: 44px;
    }
}

section.all-s {
    background: #fff;
}

.wrappage.v2 {
    @media(min-width: 1681px) {
        width: 1522px;
        margin: 0 auto;
    }
}

.h3-bg {
    background: url("../img/h3-bg.jpg") no-repeat center center;
    background-size: cover;
}

//  fix tab pane when using slick slider
.tab-content>.tab-pane {display: block;visibility: hidden;}
.tab-content>.tab-pane.active {visibility: visible;}
.tab-content{position: relative;}
.tab-pane:not(:first-child){position: absolute;width: 100%;height: 100%;top: 0;left: 0;}