.bp-element-our-team {
    .our-team {
        margin-right: -15px;
        margin-left: -15px;
        .item {
            margin-bottom: 30px;
            padding-left: 15px;
            padding-right: 15px;
            .item-inner {
                transition: all 0.2s ease-in-out 0s;
            }
            .avatar-contact img {
                width: 100%;
                max-width: 100%;
            }
            .information {
                text-align: center;
                padding: 32px 0;
                .name {
                    font-size: 20px;
                    font-weight: 500;
                    line-height: 1.2em;
                    letter-spacing: 0.6px;
                    text-transform: uppercase;
                    margin-bottom: 3px;
                }
                .job {
                    font-size: 20px;
                    line-height: 1.2em;
                    letter-spacing: 0.6px;
                }
            }
            .contact {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 17px;
                a {
                    font-size: 16px;
                    padding: 3px 10px;
                    display: inline-block;
                    line-height: 1.4em;
                    color: #8e8e8e;
                }
            }
        }
    }
    &.layout-1 {
        .our-team {
            .item {
                &:hover {
                    .information {
                        .contact {
                            a {
                                color: #ffffff;
                            }
                        }
                        .name {
                            a {
                                color: #ffffff;
                            }
                        }
                        .job {
                            color: #ffffff;
                        }
                    }
                    .item-inner {
                        box-shadow: 0 15px 14px 0 rgba(0,0,0,.2);
                    }
                }
            }
        }
    }

    // style layout -2
    &.layout-2 {
        .item {
            .item-inner {
                .avatar-contact {
                    position: relative;
                    &:before{
                        content: '';
                        position: absolute;
                        background: #e9f7fe;
                        width: 100%;
                        height: 89%;
                        z-index: -1;
                        bottom: 0;
                    }
                    .contact {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        visibility: hidden;
                        opacity: 0;
                        transition: all .5s;
                        &>a {
                            font-size: 16px;
                            color: #fff;
                            width: 38px;
                            height: 38px;
                            line-height: 35px;
                            text-align: center;
                            border-radius: 50%;
                            margin-right: 12px;
                            display: inline-block;
                            position: relative;
                            overflow: hidden;
                            background: #43ddbc;
                            background: linear-gradient(to left,#24d7b2,#25c0d9);
                            background: linear-gradient(to left,#24d7b2,#25c0d9);
                            background: linear-gradient(to left,#24d7b2,#25c0d9);
                            background: linear-gradient(to left,#24d7b2,#25c0d9);
                            transition: all 0.3s;
                        }
                    }
                    .avatar {
                        img {
                            width: auto;
                            margin: auto;
                        }
                    }
                }
                .information {
                    .name {
                        a {
                            font-size: 18px;
                            font-weight: 400;
                            color: #1d1d1d;
                            line-height: 24px;
                        }
                    }
                    .job {
                        font-size: 16px;
                        line-height: 24px;
                        font-weight: 300;
                        color: #26aef7;
                    }
                    .description {
                        margin-top: 20px;
                        font-size: 16px;
                        font-weight: 300;
                        font-family: inherit;
                        color: #7c7c7c;
                    }
                }
                &:hover {
                    .avatar-contact {
                        .contact {
                            bottom: 25px;
                            visibility: visible;
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    // style layout-3
    &.layout-3 {
        .item {
            .item-inner {
                .avatar-contact {
                    position: relative;
                    border-radius: 50%;
                    overflow: hidden;
                    width: 281px;
                    max-width: 100%;
                    max-height: max-content;
                    margin: auto;
                    box-shadow: 9.6px 11.5px 14px 0 rgba(0,0,0,.1);
                    transition: all .3s;
                    &:before{
                        visibility: hidden;
                        content: '';
                        position: absolute;
                        background: #f95259;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        bottom: 0;
                        opacity: 0;
                        transition: all .5s;
                    }
                    .contact {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        visibility: hidden;
                        opacity: 0;
                        transition: all .5s;
                        z-index: 2;
                        &>a {
                            font-size: 16px;
                            color: #fff;
                            z-index: 2;
                        }
                    }
                    .avatar {
                        img {
                            width: auto;
                            margin: auto;
                        }
                    }
                    &:hover {
                        box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.08);
                    }
                }
                .information {
                    .name {
                        a {
                            font-size: 18px;
                            font-weight: 500;
                            color: #1d1d1d;
                            line-height: 24px;
                        }
                    }
                    .job {
                        font-size: 16px;
                        line-height: 24px;
                        font-weight: 300;
                        color: #f95259;
                    }
                    .description {
                        margin-top: 20px;
                        font-size: 16px;
                        font-weight: 300;
                        font-family: inherit;
                        color: #7c7c7c;
                    }
                }
                &:hover {
                    .avatar-contact {
                        .contact {
                            bottom: 25px;
                            visibility: visible;
                            opacity: 1;
                        }
                        &:before {
                            visibility: visible;
                            opacity: 0.3;
                        }
                    }
                }
            }
        }
    }
    .owl-theme {
        img {
            -webkit-transform-style: unset;
        }
        .owl-nav {
            position: absolute;
            content: '';
            display: block;
            width: 100%;
            top: 50%;
            .owl-next, .owl-prev {
                font-size: 50px;
                background: transparent;
                position: absolute;
                transition: 0.3s;
                margin: 0;
            }
            .owl-next {
                right: -35px;
            }
            .owl-prev {
                left: -35px;
            }
            &.disabled {
                display: none !important;
            }
        }
    }

    &.layout-4 {
        .our-team {
            .item {
              cursor: default;
                margin-bottom: 80px;
                &:nth-last-child(1),
                &:nth-last-child(2),
                &:nth-last-child(3) {
                    margin-bottom: 0;
                }

              .item-inner {
                  .avatar-contact {
                      img {
                          cursor: -webkit-grabbing;
                      }
                  }

                  .information {
                      padding: 34px 30px 32px;
                      border-bottom: solid 1px rgba(204,204,204,.5);
                      border-left: solid 1px rgba(204,204,204,.5);
                      border-right: solid 1px rgba(204,204,204,.5);
                      transition: all .5s;
                      text-align: center;
                      .name {
                          font-size: 20px;
                          font-weight: 600;
                          font-style: normal;
                          letter-spacing: 0.6px;
                          margin-bottom: 5px;
                      }
                      .job {
                          font-size: 16px;
                          font-weight: normal;
                          color: #e9003f;
                          transition: all .3s;
                      }
                      .contact {
                        a {
                            font-size: 16px;
                            font-weight: normal;
                            font-style: normal;
                            letter-spacing: normal;
                            color: #8e8e8e;
                        }
                      }
                  }

                  &:hover {

                      box-shadow: 5.7px 8.2px 20px 0 rgba(0, 0, 0, 0.1);
                      .information {
                          background-color: #e9003f;
                          border-color: #e9003f;
                          * {
                              color: #fff;
                          }
                      }
                  }
              }
            }
        }
    }

    &.layout-5 {
        .wrap-element {
            .author-item {
                text-align: center;
                margin-bottom: 10px;

                .pic-author {
                    overflow: hidden;
                    position: relative;

                    .overlay-author {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: rgba(0, 0, 0, .2);
                        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .8));
                        background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .8));
                        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .8));
                        background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .8));
                        opacity: 0;
                        transition: all .3s;

                        &::before {
                            content: '\f386';
                            font-family: Ionicons;
                            font-size: 40px;
                            line-height: 1;
                            color: #fff;
                            transform: scale(0);
                            transition: all .3s;
                        }
                    }

                    img {
                        width: 100%;
                    }

                    &:hover {
                        .overlay-author {
                            opacity: 1;

                            &::before {
                                transform: scale(1);
                            }
                        }
                    }
                }

                .text-author {
                    padding: 24px 0;

                    .name-author {
                        font-weight: 500;
                        font-size: 18px;
                        line-height: 1.333333;
                        color: #111111;
                        word-break: break-word;
                        margin-bottom: 4px;

                        a {
                            color: #111111;

                            &:hover {
                                color: #e40914;
                            }
                        }
                    }

                    .info-author {
                        font-weight: 300;
                        font-size: 14px;
                        line-height: 1.5;
                        color: #6e6e6e;
                        word-break: break-word;
                    }
                }
            }
        }
    }

    &.kindergarten-layout-slider-1 {
        .wrap-element {
            .slide-teacher {
                position: relative;

                .slide-slick {
                    overflow: hidden;

                    .slick-list {
                        margin-right: -20px;
                        margin-left: -20px;
                    }

                    .item-slick {
                        padding: 0 20px 0 20px;
                    }
                }

                .wrap-arrow-slick {
                    pointer-events: none;
                    position: absolute;
                    z-index: 1;
                    width: 100%;

                    height: 100%;
                    top: 0;
                    left: 0;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;

                    .arow-slick {
                        pointer-events: auto;
                        cursor: pointer;
                        font-size: 30px;
                        line-height: 1;
                        color: #fff;
                        display: flex;
                        margin-top: -74px;
                        justify-content: center;
                        align-items: center;
                        width: 55px;
                        height: 55px;
                        border-radius: 50%;
                        background: rgba(17, 17, 17, .4);
                        transition: all .2s;

                        &.next-slick {
                            margin-right: -23px;
                        }

                        &.prev-slick {
                            margin-left: -23px;
                        }

                        &:hover {
                            background: #ff5f2e;
                        }

                        &.slick-arrow.slick-hidden {
                            display: none;
                        }

                        &[aria-disabled="true"] {
                            visibility: hidden;
                        }
                    }
                }
            }

            .teacher-item {
                .teacher-media {
                    width: 100%;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-bottom: 22px;
                    position: relative;

                    img {
                        width: 100%;
                        border-radius: 50%;
                    }

                    .socials {
                        width: calc(100% - 16px);
                        height: calc(100% - 16px);
                        position: absolute;
                        top: 8px;
                        left: 8px;
                        border-radius: 50%;
                        background: rgba(255, 102, 130, .3);
                        padding: 31px 34px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: flex-end;
                        transition: all .3s;
                        opacity: 0;

                        .social-item {
                            font-size: 14px;
                            line-height: 1;
                            width: 36px;
                            height: 36px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            z-index: 0;
                            margin: 6px;
                            transition: all .3s;
                            transform: scale(0);

                            .icon-background {
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                z-index: -1;
                                top: 0;
                                left: 0;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                .flower {
                                    width: 21px;
                                    height: 21px;
                                    border-radius: 50%;
                                    position: relative;
                                    background-color: #fff;

                                    .petal {
                                        height: 36px;
                                        width: 10px;
                                        position: absolute;
                                        top: calc(50% - 18px);
                                        left: calc(50% - 5px);
                                        background-color: inherit;
                                        border-radius: 5px;

                                        &:nth-child(2) {
                                            transform: rotateZ(36deg);
                                        }

                                        &:nth-child(3) {
                                            transform: rotateZ(72deg);
                                        }

                                        &:nth-child(4) {
                                            transform: rotateZ(108deg);
                                        }

                                        &:nth-child(5) {
                                            transform: rotateZ(144deg);
                                        }
                                    }
                                }

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            img {
                                max-width: 100%;
                            }

                            &:hover {
                                color: #fff !important;

                                .icon-background {
                                    .flower {
                                        background-color: #ff5f2e;
                                    }
                                }
                            }
                        }
                    }

                    &:hover {
                        .socials {
                            opacity: 1;

                            .social-item {
                                transform: scale(1);
                            }
                        }
                    }
                }

                .teacher-text {
                    text-align: center;

                    .name {
                        font-family: Sniglet;
                        font-weight: 400;
                        font-size: 22px;
                        line-height: 1.3;
                        color: #56509f;
                        word-break: break-word;
                        margin: 0;

                        a {
                            color: #56509f;

                            &:hover {
                                color: #ff5f2e;
                            }
                        }
                    }

                    .info {
                        font-weight: 300;
                        font-size: 16px;
                        line-height: 1.5;
                        color: #797979;
                        word-break: break-word;
                    }
                }
            }
        }
    }

    &.kindergarten-layout-slider-2 {
        .wrap-element {
            .slide-teacher {
                position: relative;

                .slide-slick {

                    .slick-list {
                        margin-right: -20px;
                        margin-left: -20px;
                    }

                    .item-slick {
                        padding: 0 20px 30px 20px;
                    }
                }
                .wrap-arrow-slick {
                    pointer-events: none;
                    position: absolute;
                    z-index: 1;
                    width: 100%;
                    height: 82%;
                    top: 0;
                    left: 0;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;

                    .arow-slick {
                        pointer-events: auto;
                        cursor: pointer;
                        font-size: 30px;
                        line-height: 1;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 56px;
                        height: 55px;
                        border-radius: 50%;
                        background: rgba(17, 17, 17, .4);
                        transition: all .2s;

                        &.next-slick {
                            margin-right: -27px;
                        }

                        &.prev-slick {
                            margin-left: -27px;
                        }

                        &:hover {
                            background: #ff5562;
                        }

                        &.slick-arrow.slick-hidden {
                            display: none;
                        }

                        &[aria-disabled="true"] {
                            visibility: hidden;
                        }
                    }
                }
            }

            .teacher-item {
                box-shadow: 13px 15px 15px 0px rgba(105, 105, 105, 0.08);

                &.color-1 {
                    background-color: #ff5562;
                }

                &.color-2 {
                    background-color: #64cadb;
                }

                &.color-3 {
                    background-color: #7cc576;
                }

                &.color-4 {
                    background-color: #ffa0d3;
                }

                &.color-5 {
                    background-color: #a864a8;
                }

                .teacher-media {
                    width: 100%;
                    position: relative;

                    img {
                        width: 100%;
                    }

                    .socials {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: transparent;
                        background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
                        background: -o-linear-gradient(bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
                        background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
                        background: linear-gradient(bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
                        padding: 0px 20px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: flex-end;
                        align-content: flex-end;
                        transition: all .3s;
                        opacity: 0;
                        pointer-events: none;

                        .social-item {
                            pointer-events: auto;
                            font-size: 14px;
                            line-height: 1;
                            width: 35px;
                            height: 35px;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: #fff;
                            margin: 29px 6px -17px 6px;
                            transition: all .3s;
                            transform: scale(0);

                            &:hover {
                                background: #ff5562;
                                color: #fff !important;
                            }
                        }
                    }
                }

                .teacher-text {
                    text-align: center;
                    padding: 35px 20px;
                    .name {
                        font-weight: 700;
                        font-size: 18px;
                        margin: 0;
                        line-height: 1.5;
                        color: #fff;
                        word-break: break-word;

                        a {
                            color: #fff;
                            transition: all .2s;
                            &:hover {
                                color: #282828;
                            }
                        }
                    }

                    .info {
                        font-weight: 300;
                        font-size: 16px;
                        line-height: 1.5;
                        color: #fff;
                        word-break: break-word;
                    }
                }

                &:hover {
                    .teacher-media {
                        .socials {
                            opacity: 1;

                            .social-item {
                                transform: scale(1);
                            }
                        }
                    }
                }
            }
        }
    }

    &.kindergarten-layout-slider-3 {
        .wrap-element {
            .slide-teacher {
                position: relative;

                .slide-slick {
                    overflow: hidden;

                    .slick-list {
                        margin-right: -20px;
                        margin-left: -20px;
                    }

                    .item-slick {
                        padding: 0 20px;
                    }
                }

                .wrap-dot-slick {
                    padding-top: 34px;

                    .dots-slick {
                        text-align: center;
                        line-height: 1;

                        li {
                            display: inline-block;
                            cursor: pointer;
                            padding: 4px;

                            span {
                                display: block;
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                background: #ccc;
                            }

                            &.slick-active,
                            &:hover {
                                span {
                                    background: #f96a9a;
                                }
                            }
                        }
                    }
                }
            }

            .teacher-item {
                max-width: 300px;
                margin-right: auto;
                margin-left: auto;
                text-align: center;

                .teacher-image {
                    display: block;
                    width: 170px;
                    height: 170px;
                    border-radius: 50%;
                    background: #fff;
                    padding: 10px;
                    border: 2px dashed #f96a9a;
                    margin: 0px auto 24px auto;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }

                .teacher-text {
                    margin-bottom: 22px;

                    .title {
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 1.5;
                        color: rgba(3, 59, 98, .5);
                        word-break: break-word;
                        margin-bottom: 5px;

                        .name {
                            font-size: 18px;
                            color: #033b62;
                            text-transform: uppercase;
                            transition: all .2s;

                            &:hover {
                                color: #f96a9a;
                            }
                        }

                        .info {
                            color: #f96a9a;
                        }
                    }

                    .description {
                        font-weight: 300;
                        font-size: 16px;
                        line-height: 1.5;
                        color: #666;
                        word-break: break-word;
                    }
                }

                .teacher-social {
                    .social-item {
                        font-size: 14px;
                        line-height: 1;
                        color: #fff;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        width: 42px;
                        height: 42px;
                        border-radius: 50%;
                        margin: 2px;
                        position: relative;
                        transition: all .2s;

                        &::before {
                            content: '';
                            display: block;
                            width: 34px;
                            height: 34px;
                            border-radius: 50%;
                            border: 1px dotted #fff;
                            position: absolute;
                            top: 4px;
                            left: 4px;
                        }


                        &:nth-child(1),
                        &:nth-child(5),
                        &:nth-child(9),
                        &:nth-child(13),
                        &:nth-child(17),
                        &:nth-child(21) {
                            background: #2aaae2;

                            &:hover {
                                background: darken(#2aaae2, 10%);
                            }
                        }

                        &:nth-child(2),
                        &:nth-child(6),
                        &:nth-child(10),
                        &:nth-child(14),
                        &:nth-child(18),
                        &:nth-child(22) {
                            background: #f86a9a;

                            &:hover {
                                background: darken(#f86a9a, 10%);
                            }
                        }

                        &:nth-child(3),
                        &:nth-child(7),
                        &:nth-child(11),
                        &:nth-child(15),
                        &:nth-child(19),
                        &:nth-child(23) {
                            background: #43cd66;

                            &:hover {
                                background: darken(#43cd66, 10%);
                            }
                        }

                        &:nth-child(4),
                        &:nth-child(8),
                        &:nth-child(12),
                        &:nth-child(16),
                        &:nth-child(20),
                        &:nth-child(24) {
                            background: #f9b001;

                            &:hover {
                                background: darken(#f9b001, 10%);
                            }
                        }
                    }
                }
            }
        }
    }

    &.marketing-layout-1 {
        .wrap-element {
            [class*="col-"] {
                padding-bottom: 50px;
            }
            .item-team {
                .image-team {
                    border-radius: 5px;
                    overflow: hidden;
                    position: relative;
                    z-index: 0;
                    margin-bottom: 31px;
                    img {
                        width: 100%;
                        border-radius: inherit;
                    }
                    .overlay-image {
                        display: block;
                        border-radius: inherit;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        background: linear-gradient(left, #ab7ee4, #124ee8);
                        background: -webkit-linear-gradient(left, #ab7ee4, #124ee8);
                        background: -o-linear-gradient(left, #ab7ee4, #124ee8);
                        background: -moz-linear-gradient(left, #ab7ee4, #124ee8);
                        transition: all .2s;
                        opacity: 0;
                    }
                    .social-team {
                        text-align: center;
                        position: absolute;
                        z-index: 2;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 100%;
                        max-width: 100%;
                        max-height: 100%;
                        .item-social {
                            font-size: 18px;
                            color: #fff;
                            margin: 0 13px;
                            transition: all .2s;
                            display: inline-block;
                            transform: scale(0);
                            &:hover {
                                color: #ffbc42;
                            }
                        }
                    }
                    &:hover {
                        .overlay-image {
                            opacity: .6;
                        }
                        .social-team .item-social {
                            transform: scale(1);
                        }
                    }
                }
                .text-team {
                    text-align: center;
                    .name-team {
                        font-weight: 500;
                        font-size: 20px;
                        line-height: 1.7;
                        color: #2a2a2a;
                        word-break: break-word;
                        padding-top: 0;
                        margin-bottom: 2px;
                        a {
                            color: inherit;
                            transition: all .2s;
                            &:hover {
                                color: #ffbc42;
                            }
                        }
                    }
                    .info-team {
                        font-weight: 300;
                        font-size: 16px;
                        line-height: 1.75;
                        color: #828282;
                        word-break: break-word;
                    }
                }
            }
        }
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .bp-element-our-team{
        &.kindergarten-layout-slider-3 {
            .wrap-element {
                .teacher-item {
                    .teacher-text {
                        .title {
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            color: inherit;
                            max-height: 24px;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
}