/**
 * Table of Contents:

 * 1.0 - swiper-box
 * 2.0 - swiper-slider
	* 2.1 - type-default
	* 2.2 - type-custom
	* 2.3 - type-post
	* 2.4 - type-product
	* 2.5 - grid
 * 3.0 - swiper-wrapper
 * 4.0 - swiper-slide
	* 4.1 - slide__container
	* 4.2 - slide__content
	* 4.3 - slide__sub-h
	* 4.4 - slide__h
	* 4.5 - slide__desc
	* 4.6 - slide__button
 * 5.0 - swiper-button
	* 5.1 - swiper-button-prev
	* 5.2 - swiper-button-next
 * 6.0 - swiper-scrollbar
 * 7.0 - swiper-pagination
 */


@include keyframes(fadeInUpPx) {
      from {
            opacity: 0;
            @include css3(transform, translate3d(0, 100px, 0));
      }

      to {
            opacity: 1;
            @include css3(transform, translate3d(0, 0px, 0));
      }
}

.home {
      .jumbotron {
            .swiper {

                  /* 1.0 - swiper-box */
                  &-box {
                        position: relative;
                  }


                  /* 2.0 - swiper-slider */
                  &-slider {


                        .swiper-slide {}


                        /* 2.1 - type-default */
                        &.type-default {
                              &:not(.grid) .slide {
                                    height: 750px;

                                    @include media-max(1200px) {
                                          height: 100vh;
                                    }
                              }
                        }


                        /* 2.2 - type-custom */
                        &.type-custom {
                              &:not(.grid) .slide {
                                    height: 750px;

                                    @include media-max(md) {
                                          height: 450px;
                                    }
                              }
                        }


                        /* 2.3 - type-post */
                        &.type-post {}


                        /* 2.4 - type-product */
                        &.type-product {}


                        /* 2.5 - grid */
                        &.grid .swiper {
                              &-wrapper {
                                    align-items: stretch !important;
                              }

                              &-slide {
                                    display: flex;
                                    align-items: stretch;
                                    height: auto;
                              }
                        }
                  }


                  /* 3.0 - swiper-wrapper */
                  &-wrapper {}


                  /* 4.0 - swiper-slide */
                  &-slide {
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;
                        display: flex;
                        align-items: center;

                        [class*="col-"] {
                              padding: 0;
                              -ms-flex: 0 0 100%;
                              flex: 0 0 100%;
                              max-width: 100%;
                        }


                        .slide {

                              /* 4.1 - slide__container */
                              &__container {
                                    text-align: center;
                                    display: flex;
                                    height: 100%;
                                    align-items: center;
                                    padding-right: 0;
                                    padding-left: 0;
                                    margin-right: 0;
                                    margin-left: 0;

                                    @include media-max(1200px) {
                                          flex-direction: column;
                                    }
                              }


                              /* 4.2 - slide__content */
                              &__content {
                                    text-align: center;
                                    opacity: 0;
                                    transition: $transition;
                                    height: 100%;
                                    position: relative;
                                    flex-direction: column;
                                    width: 50%;
                                    display: flex;
                                    justify-content: center;
									
									@include media-max(1200px){
											opacity: 1;
									}

                                    &:before {
                                          content: "";
                                          width: 100%;
                                          height: 100%;
                                          background: rgba(#000, 70%);
                                          @include absolute(0, 0, 0, 0);
                                          opacity: 0;
                                          transition: $transition;
										  
										  @include media-max(1200px){
												opacity: 1;
										  }

                                          @include media-max(1200px) {
                                                height: 100%;
                                                width: 100%;
                                          }
                                    }

                                    &:hover {
                                          opacity: 1;

                                          &:before {
                                                opacity: 1;
                                          }
                                    }

                                    @include media-max(1200px) {
                                          width: 100%;
                                    }

                                    @include media-min(1201px) {
                                          width: 50%;
                                    }
                              }


                              /* 4.3 - slide__sub-h */
                              &__sub-h {}


                              /* 4.4 - slide__h */
                              &__h {
                                    font-size: 55px;
                                    line-height: 70px;
                                    color: #ffffff;
                                    font-weight: 300;

                                    @include media-max(1200px) {
                                          margin-top: -50px;
										  font-size: 40px;
										  line-height: 50px;
										  padding: 0 20px;
                                    }
                              }


                              /* 4.5 - slide__desc */
                              &__desc {}


                              /* 4.6 - slide__button */
                              &__button {
                                    margin-top: 10px;
                                    border-color: #fff;
                                    background: transparent;
                                    color: #fff;
                                    position: relative;
									
									@include media-max(1200px){
										  margin-top: 5px;
									}

                                    &:before {
                                          position: absolute;
                                          content: "";
                                          top: 0;
                                          left: 0;
                                          width: 0;
                                          height: 100%;
                                          background: #fff;
                                          transition: all .35s;
                                          z-index: -1;
                                    }

                                    &:hover {
                                          color: #000000 !important;

                                          &:before {
                                                width: 100%;
                                          }
                                    }
                              }


                              &__sub-h,
                              &__h,
                              &__desc,
                              &__button-wrap {
                                    opacity: 0;
                              }
                        }

                        &-active .slide {
                              &__sub-h {
                                    @include css3(animation, (.8s .9s fadeInUpPx both));
                              }

                              &__h {
                                    @include css3(animation, (.8s .8s fadeInUpPx both));
                              }

                              &__desc {
                                    @include css3(animation, (.8s .7s fadeInUpPx both));
                              }

                              &__button-wrap {
                                    @include css3(animation, (.8s .6s fadeInUpPx both));
                              }
                        }
                  }


                  /* 5.0 - swiper-button */
                  &-box .swiper-button {


                        /* 5.1 - swiper-button-prev */
                        &-prev {}


                        /* 5.2 - swiper-button-next */
                        &-next {}

                  }


                  /* 6.0 - swiper-scrollbar */
                  &-box .swiper-scrollbar {}


                  /* 7.0 - swiper-pagination */
                  &-box .swiper-pagination {
                        font-size: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;

                        &-bullet {

                              c &-active {}
                        }
                  }
            }
      }
}

.swiper {

      /* 1.0 - swiper-box */
      &-box {
            position: relative;
      }


      /* 2.0 - swiper-slider */
      &-slider {


            /* 2.1 - type-default */
            &.type-default {
                  &:not(.grid) .slide {
                        height: 750px;

                        @include media-max(md) {
                              height: 450px;
                        }
                  }
            }


            /* 2.2 - type-custom */
            &.type-custom {
                  &:not(.grid) .slide {
                        height: 750px;

                        @include media-max(md) {
                              height: 450px;
                        }
                  }
            }


            /* 2.3 - type-post */
            &.type-post {}


            /* 2.4 - type-product */
            &.type-product {}


            /* 2.5 - grid */
            &.grid .swiper {
                  &-wrapper {
                        align-items: stretch !important;
                  }

                  &-slide {
                        display: flex;
                        align-items: stretch;
                        height: auto;
                  }
            }
      }


      /* 3.0 - swiper-wrapper */
      &-wrapper {}


      /* 4.0 - swiper-slide */
      &-slide {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;

            [class*="col-"] {
                  padding: 0;
                  -ms-flex: 0 0 100%;
                  flex: 0 0 100%;
                  max-width: 100%;
            }


            .slide {

                  /* 4.1 - slide__container */
                  &__container {}


                  /* 4.2 - slide__content */
                  &__content {}


                  /* 4.3 - slide__sub-h */
                  &__sub-h {}


                  /* 4.4 - slide__h */
                  &__h {}


                  /* 4.5 - slide__desc */
                  &__desc {}


                  /* 4.6 - slide__button */
                  &__button {}


                  &__sub-h,
                  &__h,
                  &__desc,
                  &__button-wrap {
                        opacity: 0;
                  }
            }

            &-active .slide {
                  &__sub-h {
                        @include css3(animation, (.8s .9s fadeInUpPx both));
                  }

                  &__h {
                        @include css3(animation, (.8s .8s fadeInUpPx both));
                  }

                  &__desc {
                        @include css3(animation, (.8s .7s fadeInUpPx both));
                  }

                  &__button-wrap {
                        @include css3(animation, (.8s .6s fadeInUpPx both));
                  }
            }
      }


      /* 5.0 - swiper-button */
      &-box .swiper-button {


            /* 5.1 - swiper-button-prev */
            &-prev {}


            /* 5.2 - swiper-button-next */
            &-next {}

      }


      /* 6.0 - swiper-scrollbar */
      &-box .swiper-scrollbar {}


      /* 7.0 - swiper-pagination */
      &-box .swiper-pagination {
            font-size: 0;
            left: 0;
            right: 0;
            bottom: 0;

            &-bullet {


                  &-active {}
            }
      }
}