// Cover // // //

.hero {

&[class*="-with-header"] {
        padding-top: ($section-padding * 2);
}

}

// // Box // .box {

@extend %equal;

> * {
        @extend %floating;
        @include border-radius();
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: end;
        align-items: flex-end;
        padding: 1.875rem;
}

b {
        display: block;
        margin-bottom: .5rem;
        line-height: 1.25;
        font-family: $headings-font-family;
        font-size: 1.5rem;
        font-weight: 400;
}

span {
        font-size: $font-size-sm;
        font-weight: 500;
        letter-spacing: $letter-spacing-lg;
        text-transform: uppercase;
        color: inherit;
}

}

%text-whiteed-box {

b {
        color: $white;
}

}

// Gradient .gradient-bg {

> * {
        position: relative;
        z-index: 40;
}

}

.gradient {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

}

.image {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;

&[class*="-overlay"] {
        &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                content: "";
                // background: rgba($canalplus, 0.25)
        }
}

&[class*="-overlay-dark"] {
        &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                content: "";
                background: rgba($canalplus, 0.4)
        }
}

&[class*="-overlay-sunny-lovely"] {
        &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                content: "";
                background-image: linear-gradient(to right, rgba(255, 126, 95, 0.01), rgba(254, 180, 123, 0.3));
        }
}
&[class*="-overlay-DeepSpace"] {
        &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                content: "";
                background: linear-gradient(to right, rgb(0, 0, 0), rgb(67, 67, 67));
        }
}
&[class*="-overlay-SunontheHorizon"] {
        &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                content: "";
                background: linear-gradient(to right, rgb(252, 234, 187), rgb(248, 181, 0));
        }
}
&[class*="-overlay-SunsetGradient"] {
        &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                content: "";
                background: linear-gradient(to right, rgba(255, 126, 95, 0.01), rgba(254, 180, 123, 0.01))
        }
}

&[class*="-gradient-vertical"] {
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

&[class*="-gradient-horizontal"] {
        -webkit-mask-image: -webkit-gradient(linear, right top, left top,
        from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
}

&[class*="-gradient-vertical-light"] {
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
}

&[class*="-gradient-horizontal-light"] {
        -webkit-mask-image: -webkit-gradient(linear, right top, left top,
        from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
}

&[class*="-cover"] {
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)));
}

&[class*="-parallax"] {
        width: 150%;
}

&[class*="-blur"] {
        margin: -20px;
        @include prefix(filter, blur(10px), webkit moz o ms);
}

}

// // Image actions //

// Zoom .image-zoom {

@include scale(1.2);
@include transition(10s);

}

.swiper-slide-active {

.image-zoom {
        @include scale(1);
}

}

// Scrolling .image-scrolling {

height: 125%;
top: -25%;

}

.caption {

position: relative;
z-index: 50;
height: 100%;

}

.caption-background {

position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 25;

.container,
.container-fluid,
.container-full {
        height: 100%;

        .row {
                height: 100%;
        }
}

}

// // Scrolling Indicator // .mouse {

position: relative;
display: inline-block;
width: 1.875rem;
height: 3.125rem;
border-radius: 10rem;
border: 2px solid $gray-300;

&::after {
        @include translate(-50%, 0);
        content: "";
        position: absolute;
        display: block;
        top: 25%;
        left: 50%;
        width: 6px;
        height: 6px;
        background: $canalplus;
        border-radius: 50%;
        -webkit-animation: mouse 2s linear infinite;
        -moz-animation: mouse 2s linear infinite;
        animation: mouse 2s linear infinite;
}

}

.text-white {

.mouse {
        border-color: $white;

        &::after {
                background: $white;
        }
}

}

@-webkit-keyframes mouse {

0% {
  opacity: 1;
  @include translate(-50%,0);
}
100% {
  opacity: 0;
  @include translate(-50%,20px);
}

}

@-moz-keyframes mouse {

0% {
  opacity: 1;
  @include translate(-50%,0);
}
100% {
  opacity: 0;
  @include translate(-50%,20px);
}

}

@keyframes mouse {

0% {
  opacity: 1;
  @include translate(-50%,0);
}
100% {
  opacity: 0;
  @include translate(-50%,20px);
}

}