// // Images // //

.presentation-circle {

@extend %equal;
overflow: visible;

> figure {
        @extend %boxed;
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        z-index: 10;

        &::before {
                @include translate(-50%, -50%);
                @include prefix(animation, pulse 3s infinite, webkit moz o);
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: $border-width solid rgba($canalplus, .1);
                z-index: -1;
                animation-timing-function: cubic-bezier(0.1, 0.2, 0.3,1);
        }
}

&.with-delay {
        > figure {
                &::before {
                        animation-delay: 1s;
                }
        }
}

}

@-webkit-keyframes pulse {

0% { 
      width: 100%; 
      height: 100%;
      opacity: 0;
}
50% {
      opacity: 1;
}
100% { 
      width: 125%;
      height: 125%;
      opacity: 0;
}

} @-moz-keyframes pulse {

0% { 
        width: 100%; 
        height: 100%;
        opacity: 0;
}
50% {
        opacity: 1;
}
100% { 
        width: 125%;
        height: 125%;
        opacity: 0;
}

} @-o-keyframes pulse {

0% { 
        width: 100%; 
        height: 100%;
        opacity: 0;
}
50% {
        opacity: 1;
}
100% { 
        width: 125%;
        height: 125%;
        opacity: 0;
}

} @keyframes pulse {

0% { 
        width: 100%; 
        height: 100%;
        opacity: 0;
}
50% {
        opacity: 1;
}
100% { 
        width: 125%;
        height: 125%;
        opacity: 0;
}

}

// // Presentation // .presentation-container {

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

}

.presentation {

position: relative;
z-index: 0;

img {
        position: absolute;
        // max-width: 100%;
        // max-height: calc(100% + 12.5rem);
        max-width: initial;
        max-height: initial;
}

.top-0 { top: 0; }
.top-25 { top: 25%; }
.top-50 { top: 50%; }
.top-75 { top: 75%; }

.bottom-0 { bottom: 0; }
.bottom-25 { bottom: 25%; }
.bottom-50 { bottom: 50%; }
.bottom-75 { bottom: 75%; }

.left-0 { left: 0; }
.left-25 { left: 25%; }
.left-50 { left: 50%; }
.left-75 { left: 75%; }

.right-0 { right: 0; }
.right-25 { right: 25%; }
.right-50 { right: 50%; }
.right-75 { right: 75%; }

.vertical-align {
        top: 50%;
        @include translate(0,-50%); 
}

.horizontal-align {
        left: 50%;
        @include translate(-50%,0);
}

}

@include media-breakpoint-down(md) {

.presentation-responsive {
        height: 40vh!important;

        img {
                top: 0!important;
                left: 0!important;
                @include translate(0,0);
        }

        img.vertical-align,
        img.horizontal-align {
                @include translate(0,0);
        }
}

}