/*\
 *
 * Course layout-1
 *
\*/
.bp-element-course-collections {
    &.layout-slider {
      .item-slick {
        padding: 0 20px;
      }
      .image {
        img {
          width: 100%;
        }
      }

      .content {
        .symbol {
          width: 81px;
          height: 81px;
          border-radius: 50%;
          overflow: hidden;
          background: #fff;
          position: relative;
          z-index: 100;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: -41px auto auto auto;
        }


        .title {
          text-align: center;
          margin-top: -9px;
          margin-bottom: 2px;
          position: relative;
          z-index: 101;

          a {

            font-weight: 500;
            font-size: 18px;
            line-height: 1.444444;
            color: #1d1d2b;
            text-transform: uppercase;
            text-align: center;
            //@extend %hov-link-01;
          }
        }


        .description {

          font-weight: 300;
          font-size: 16px;
          line-height: 1.625;
          color: #7c7c7c;
          text-align: center;
        }
      }

      // arrow slick
      .slide-course {
        position: relative;
        margin-right: -20px;
        margin-left: -20px;

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

        .wrap-arrow-slick {
          position: absolute;
          width: 100%;
          left: 0;
          top: 39%;
          transform: translate(0,-50%);

          .arow-slick {
            font-size: 30px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: rgba(149, 149, 149, .8);
            cursor: pointer;
            position: absolute;
            top: -27px;
            transition: all 0.2s;
            &.prev-slick {
              left: -8px;
            }

            &.next-slick {
              right: -8px;
            }
          }
        }
      }
    }
    &.layout-slider-2 {
      .slide-category-course {
        margin-right: -20px;
        margin-left: -20px;
        position: relative;

        .slide-slick {
          width: calc(100% + 1920px);
          margin-left: -1920px;
          overflow: hidden;

          .slick-list {
            width: calc(100% - 1920px);
            margin-left: 1920px;
            overflow: visible;
          }
        }

        .item-slick {
          padding: 0 20px 30px 20px;
          opacity: .5;
          pointer-events: none;

          &.slick-active {
            opacity: 1;
            pointer-events: auto;
          }
        }

        .wrap-arrow-slick {
          position: absolute;
          width: 100%;
          left: 0;
          top: calc((100% - 30px) / 2);

          .arow-slick {
            font-size: 90px;
            color: #292929;
            line-height: 1;
            transition: all 0.2s;
            cursor: pointer;
            position: absolute;
            z-index: 100;
            top: -45px;

            &.prev-slick {
              left: -18px;
              visibility: hidden;
              opacity: 0;
            }

            &.next-slick {
              right: -18px;
            }

            &:hover {
              color: #f7c370;
            }

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

            &[aria-disabled="true"] {
              display: none !important;
            }
          }
        }

        .wrap-arrow-slick-clone {
          position: absolute;
          z-index: 1000;
          width: 1920px;
          height: calc(100% - 30px);
          top: 0;
          right: calc(100% + 20px);

          .arow-slick.next-slick {
            width: 100%;
            height: 100%;

            &:hover {
              cursor: pointer;
            }
          }
        }

        &:hover {
          .arow-slick.prev-slick {
            visibility: visible;
            opacity: 1;
          }
        }
      }

      .course-item {
        &.color-1 {
          .content {
            &::before {
              background: #4d58b1;
              background: -webkit-linear-gradient(left, #4d58b1, #5062d9);
              background: -o-linear-gradient(left, #4d58b1, #5062d9);
              background: -moz-linear-gradient(left, #4d58b1, #5062d9);
              background: linear-gradient(left, #4d58b1, #5062d9);
            }
          }
        }

        &.color-2 {
          .content {
            &::before {
              background: #f3ae7f;
              background: -webkit-linear-gradient(left, #f8c76c, #f3ae7f);
              background: -o-linear-gradient(left, #f8c76c, #f3ae7f);
              background: -moz-linear-gradient(left, #f8c76c, #f3ae7f);
              background: linear-gradient(left, #f8c76c, #f3ae7f);
            }
          }
        }

        .content {
          min-height: 200px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          border-radius: 12px;
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          box-shadow: 13px 15px 15px 0px rgba(105, 105, 105, 0.08);
          padding: 30px;

          &::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            transition: all .4s;
          }

          &:hover:before {
            opacity: .8;
          }

          .title {
            font-weight: 600;
            font-size: 18px;
            line-height: 1.333333;
            color: #fff;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 6px;
          }

          .description {
            font-weight: 300;
            font-size: 16px;
            line-height: 1.5;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
    &.layout-grid {
        .wrap-element {
            position: relative;
            &>div>div {
                padding-left: 20px;
                padding-right: 20px;
            }
            .link-view-all {
                font-weight: 400;
                font-size: 14px;
                line-height: 1.5;
                color: #ef4360;
                text-transform: uppercase;
                text-decoration: underline;
                transition: all .2s;
                position: absolute;
                right: 0;
                top: -73px;
                &:hover {
                    color: #181b1d;
                }
            }
            .course-item {
                text-align: center;
                margin-bottom: 80px;
                .course-image {
                    overflow: hidden;
                    img {
                        width: 100%;
                        transition: all .5s ease;
                    }
                    &:hover {
                        img {
                            transform: scale(1.1);
                        }
                    }
                }
                .course-text {
                .title {
                    font-family: Playfair Display;
                    font-weight: 700;
                    font-size: 20px;
                    line-height: 1.3;
                    color: #fff;
                    word-break: break-word;
                    width: calc(100% - 30px);
                    margin-right: auto;
                    margin-left: auto;
                    margin-top: -50px;
                    margin-bottom: 18px;
                    transition: all .2s;
                    position: relative;
                    z-index: 10;
                    a {
                        color: #fff;
                        display: block;
                        width: 100%;
                        height: 100%;
                        padding: 19px 7px;
                    }
                }

                .content {
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 1.625;
                    color: #777;
                    word-break: break-word;
                    max-width: 290px;
                    margin-right: auto;
                    margin-left: auto;
                }
            }
                &.color-1 {
                    .course-text {
                        .title {
                            background-color: #ef4360;
                            &:hover {
                                background-color: darken(#ef4360, 10%);
                            }
                        }
                    }
                }
                &.color-2 {
                    .course-text {
                        .title {
                            background-color: #618fb1;
                            &:hover {
                                background-color: darken(#618fb1, 10%);
                            }
                        }
                    }
                }
                &.color-3 {
                    .course-text {
                        .title {
                            background-color: #89c869;
                            &:hover {
                                background-color: darken(#89c869, 10%);
                            }
                        }
                    }
                }
                &.color-4 {
                    .course-text {
                        .title {
                            background-color: #b29e2d;
                            &:hover {
                                background-color: darken(#b29e2d, 10%);
                            }
                        }
                    }
                }
                &.color-5 {
                    .course-text {
                        .title {
                            background-color: #0eb1b2;
                            &:hover {
                                background-color: darken(#0eb1b2, 10%);
                            }
                        }
                    }
                }
                &.color-6 {
                    .course-text {
                        .title {
                            background-color: #9bc1d5;
                            &:hover {
                                background-color: darken(#9bc1d5, 10%);
                            }
                        }
                    }
                }
            }
        }
    }
    &.stocklab-layout-slider-3 {
        .item-slick {
            padding: 0 15px;
        }
        .image {
            img {
                width: 100%;
            }
        }
        .course-item{
            position: relative;

            .content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex-direction: column;
                justify-content: center;

                &:before {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;

                    -webkit-transition: all 0.3s ease 0s;
                    -moz-transition: all 0.3s ease 0s;
                    -o-transition: all 0.3s ease 0s;
                    transition: all 0.3s ease 0s;

                    opacity: 0;
                    visibility: hidden;
                    background: rgba(18, 79, 232, 1);
                    background: -moz-linear-gradient(45deg, rgba(132, 75, 237, 1) 0%, rgba(132, 75, 237, 1) 17%, rgba(4, 205, 132, 1) 87%, rgba(4, 205, 132, 1) 100%);
                    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(132, 75, 237, 1)), color-stop(17%, rgba(132, 75, 237, 1)), color-stop(87%, rgba(4, 205, 132, 1)), color-stop(100%, rgba(4, 205, 132, 1)));
                    background: -webkit-linear-gradient(45deg, rgba(132, 75, 237, 1) 0%, rgba(132, 75, 237, 1) 17%, rgba(4, 205, 132, 1) 87%, rgba(4, 205, 132, 1) 100%);
                    background: -o-linear-gradient(45deg, rgba(132, 75, 237, 1) 0%, rgba(132, 75, 237, 1) 17%, rgba(4, 205, 132, 1) 87%, rgba(4, 205, 132, 1) 100%);
                    background: -ms-linear-gradient(45deg, rgba(132, 75, 237, 1) 0%, rgba(132, 75, 237, 1) 17%, rgba(4, 205, 132, 1) 87%, rgba(4, 205, 132, 1) 100%);
                    background: linear-gradient(45deg, rgba(132, 75, 237, 1) 0%, rgba(132, 75, 237, 1) 17%, rgba(4, 205, 132, 1) 87%, rgba(4, 205, 132, 1) 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d280', endColorstr='#9143fd', GradientType=1);
                }


                .title {
                    text-align: center;
                    margin-bottom: 2px;
                    position: relative;
                    z-index: 101;
                    opacity: 0;
                    visibility: hidden;

                    -webkit-transform: translate(0, -20px);
                    -moz-transform: translate(0, -20px);
                    -ms-transform: translate(0, -20px);
                    -o-transform: translate(0, -20px);
                    transform: translate(0, -20px);

                    -webkit-transition: all 0.3s ease 0.2s;
                    -moz-transition: all 0.3s ease 0.2s;
                    -o-transition: all 0.3s ease 0.2s;
                    transition: all 0.3s ease 0.2s;

                    a {

                        font-weight: 600;
                        font-size: 20px;
                        line-height: 1.444444;
                        color: #ffffff;
                        text-align: center;
                        -webkit-transition: all 0.3s ease 0s;
                        -moz-transition: all 0.3s ease 0s;
                        -o-transition: all 0.3s ease 0s;
                        transition: all 0.3s ease 0s;
                        //@extend %hov-link-01;
                    }
                }
                .description {
                    position: relative;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 1.625;
                    color: #ffffff;
                    text-align: center;
                    opacity: 0;
                    visibility: hidden;
                    -webkit-transform: translate(0, -20px);
                    -moz-transform: translate(0, -20px);
                    -ms-transform: translate(0, -20px);
                    -o-transform: translate(0, -20px);
                    transform: translate(0, -20px);
                    -webkit-transition: all 0.3s ease 0.2s;
                    -moz-transition: all 0.3s ease 0.2s;
                    -o-transition: all 0.3s ease 0.2s;
                    transition: all 0.3s ease 0.2s;
                }
            }

            &:hover {
                .content {
                    &:before {
                        opacity: 0.6;
                        visibility: visible;
                    }

                    .title {
                        opacity: 1;
                        visibility: visible;
                        -webkit-transform: translate(0, 0);
                        -moz-transform: translate(0, 0);
                        -ms-transform: translate(0, 0);
                        -o-transform: translate(0, 0);
                        transform: translate(0, 0);
                    }

                    .description {
                        opacity: 1;
                        visibility: visible;
                        -webkit-transform: translate(0, 0);
                        -moz-transform: translate(0, 0);
                        -ms-transform: translate(0, 0);
                        -o-transform: translate(0, 0);
                        transform: translate(0, 0);
                    }
                }
            }
        }

        // arrow slick
        .slide-course {
            .slide-slick{
                padding-right: 100px;
                overflow: hidden;

                .slick-list{
                    overflow: visible;
                }
            }

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

            .wrap-arrow-slick {
                position: absolute;
                bottom:0;
                left: 0;

                .arow-slick {
                    font-size: 28px;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 43px;
                    height: 43px;
                    border-radius: 50%;
                    cursor: pointer;
                    transition: all 0.2s;
                    border: 1px solid #b7afff;
                    float: left;

                    &:after{
                        content: '';
                        display: block;
                        clear: both;
                    }

                    &.prev-slick {
                        margin-right: 9px;
                    }

                    &.next-slick {

                    }

                    &:hover{
                        background: #04ce83;
                        border-color: #04ce83;

                    }
                }
            }
        }
    }
}
@media (min-width: 1025px) and (max-width: 1400px) {
  .bp-element-course-collections {
    &.layout-slider-2 {
      .slide-category-course {
        .item-slick {
          padding-right: 10px;
          padding-left: 10px;
        }
      }
      .course-item {
        .content {
          box-shadow: 5px 10px 10px 0px rgba(105, 105, 105, 0.08);
        }
      }
    }
    &.layout-slider {
      .slide-course {
        margin-right: -10px;
        margin-left: -10px;
        .item-slick {
          padding-right: 10px;
          padding-left: 10px;
        }
        .wrap-arrow-slick {
          .arow-slick {
            top: -42px;
            &.prev-slick {
              left: -12px;
            }
            &.next-slick {
              right: -12px;
            }
          }
        }
      }
      .content {
        .symbol {
          img {
            max-width: 35px;
          }
        }
      }
    }
  }
}