/*————————————

Block Hovers

————————————*/

// // Common Styles

//

class*=“u-block-hover”

{

position: relative;
max-width: 100%;
margin: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);

&,
&::before,
&::after {
  transition: all .3s ease;
}

}

.u-block-hover–uncroped {

overflow: visible;

}

.u-block-hover–uncroped:hover {

z-index: 2;

}

.u-block-hover__img {

max-width: 100%;
vertical-align: top;

}

.u-block-hover__block {

min-height: 100%;

}

class*=“u-block-hover__additional”

{

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

}

class*=“u-block-hover__additional–v1”

{ // Z

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 15px;
opacity: 0;

}

// // Opacity // Z //

.u-block-hover:hover .u-block-hover__additional–v1 {

opacity: 1;

}

// // Box-shadow //

.u-block-hover–shadow {

&:hover,
&:hover .u-block-hover__additional-shadow {
  box-shadow: 0 0 10px $g-color-gray-dark-v4;
}

&-v2:hover,
&-v2:hover .u-block-hover__additional-shadow {
  box-shadow: 0 0 15px $g-color-gray-light-v3;
}

&-v3:hover,
&-v3:hover .u-block-hover__additional-shadow {
  box-shadow: 0 0 3px $g-color-gray-light-v3;
}

}

// // Scale //

.u-block-hover–scale:hover, .u-block-hover–scale-img:hover .u-block-hover__img {

transform: scale3d(1.1, 1.1, 1.1);

}

.u-block-hover__additional-scale {

z-index: -1;
max-width: initial;

}

.u-block-hover:hover .u-block-hover__additional-scale {

top: -20px;
right: -20px;
bottom: -20px;
left: -20px;

}

.u-block-hover–scale-down:hover, .u-block-hover–scale-down-img:hover .u-block-hover__img {

transform: scale3d(.9, .9, .9);

}

.u-block-hover__additional-scale-down {

z-index: -1;
max-width: initial;

}

.u-block-hover:hover .u-block-hover__additional-scale-down {

top: 20px;
right: 20px;
bottom: 20px;
left: 20px;

}

// // Zoom v1 //

.u-block-hover__main–zoom-v1 {

// Improvement flashing issue for Chrome browser
-webkit-transform: scale(1.01);

}

.u-block-hover:hover .u-block-hover__main–zoom-v1 {

transform: scale(1.1);

}

// temperory solution for icons (cut issue) // relative position issue with backface-visibility .u-block-hover [class*=“icon-”] {

padding: 1px;

}

// // Filters //

// Grayscale .u-block-hover__main–grayscale {

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray;
-webkit-filter: grayscale(100%);

} .u-block-hover:hover .u-block-hover__main–grayscale {

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);

}

// White .u-block-hover__main–white {

filter: brightness(0) invert(1);

}

// // Blur //

.u-block-hover__additional–blur {

opacity: 0;

.u-block-hover:hover & {

opacity: 1;
transition-delay: .11s;

} } .u-block-hover:hover .u-block-hover__main–blur {

filter: blur(30px);
transform: scale(1.2);
opacity: 0;

}

// // Overlays //

[class*=“u-block-hover-image-overlay”]::after {

content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: all .35s ease;

} .u-block-hover:hover .u-block-hover-image-overlay::after {

opacity: 1;

}

// // Fade //

.u-block-hover__additional–fade {

opacity: 0;

.u-block-hover:hover & {
  opacity: 1;
  transform: translate(0, 0);
}

// Fade up
&-up {
  transform: translate(0, 15%);
}

// Fade down
&-down {
  transform: translate(0, -15%);
}

// Fade left
&-left {
  transform: translate(-15%, 0);
}

// Fade right
&-right {
  transform: translate(15%, 0);
}

}

// // Push //

.u-block-hover:hover [class*=“u-block-hover__additional–push”] {

transform: translate(0, 0);

}

// Push up .u-block-hover:hover .u-block-hover__main–push-up {

transform: translateY(-100%);

} .u-block-hover__additional–push-up {

transform: translateY(100%);

}

// Push down .u-block-hover:hover .u-block-hover__main–push-down {

transform: translateY(100%);

} .u-block-hover__additional–push-down {

transform: translateY(-100%);

}

// Push left .u-block-hover:hover .u-block-hover__main–push-left {

transform: translateX(-100%);

} .u-block-hover__additional–push-left {

transform: translateX(100%);

}

// Push right .u-block-hover:hover .u-block-hover__main–push-right {

transform: translateX(100%);

} .u-block-hover__additional–push-right {

transform: translateX(-100%);

}

// // Slide //

.u-block-hover:hover [class*=“u-block-hover__additional–slide”], .u-block-hover:hover [class*=“u-block-hover__additional–partially-slide”] {

transform: translate(0, 0);

}

// Slide up .u-block-hover__additional–slide-up {

transform: translateY(100%);

}

// Slide up .u-block-hover__additional–slide-down {

transform: translateY(-100%);

}

// Slide left .u-block-hover__additional–slide-left {

transform: translateX(100%);

}

// Slide right .u-block-hover__additional–slide-right {

transform: translateX(-100%);

}

// Slide bottom-right .u-block-hover__additional–slide-bottom-right {

transform: translate(-100%, -100%);

}

// Slide bottom-left .u-block-hover__additional–slide-bottom-left {

transform: translate(100%, -100%);

}

// Slide top-right .u-block-hover__additional–slide-top-right {

transform: translate(-100%, 100%);

}

// Slide top-left .u-block-hover__additional–slide-top-left {

transform: translate(100%, 100%);

}

// Partially slide-up .u-block-hover__additional–partially-slide-up {

top: auto;
transform: translate3d(0, 100%, 0);
overflow: visible;

.u-block-hover__visible {
  position: absolute;
  bottom: 100%;
  margin-bottom: -1px;
  left: 0;
  right: 0;
  padding-left: inherit;
  padding-right: inherit;
  background: inherit;
}

}

// Partially slide-down .u-block-hover__additional–partially-slide-down {

bottom: auto;
transform: translate3d(0, -100%, 0);
overflow: visible;

.u-block-hover__visible {
  position: absolute;
  top: 100%;
  margin-top: -1px;
  left: 0;
  right: 0;
  padding-left: inherit;
  padding-right: inherit;
  background: inherit;
}

}

// // Cot //

.u-block-hover–cot {

perspective: 50em;

}

class*=“u-block-hover__additional–cot”

{

opacity: 0;
z-index: 1;

} .u-block-hover–cot:hover [class*=“u-block-hover__main–cot”] {

opacity: 0;

} .u-block-hover–cot:hover [class*=“u-block-hover__additional–cot”] {

opacity: 1;
transition-delay: 0.21s;

}

// Cot up .u-block-hover__main–cot-up {

transform-origin: 50% 0;

} .u-block-hover__additional–cot-up {

transform: rotateX(90deg);
transform-origin: 50% 100%;

} .u-block-hover–cot:hover .u-block-hover__main–cot-up {

transform: rotateX(-90deg);

} .u-block-hover–cot:hover .u-block-hover__additional–cot-up {

transform: rotateX(0deg);

}

// Cot down .u-block-hover__main–cot-down {

transform-origin: 50% 100%;

} .u-block-hover__additional–cot-down {

transform: rotateX(-90deg);
transform-origin: 50% -50%;

} .u-block-hover–cot:hover .u-block-hover__main–cot-down {

transform: rotateX(90deg);
opacity: 0;

} .u-block-hover–cot:hover .u-block-hover__additional–cot-down {

transform: rotateX(0deg);

}

// Cot left .u-block-hover__main–cot-left {

transform-origin: 0% 50%;

} .u-block-hover__additional–cot-left {

transform: rotateY(-90deg);
transform-origin: 100% 50%;

} .u-block-hover–cot:hover .u-block-hover__main–cot-left {

transform: rotateY(90deg);

} .u-block-hover–cot:hover .u-block-hover__additional–cot-left {

transform: rotateY(0deg);

}

// Cot right .u-block-hover__main–cot-right {

transform-origin: 100% 50%;

} .u-block-hover__additional–cot-right {

transform: rotateY(90deg);
transform-origin: 0 50%;

} .u-block-hover–cot:hover .u-block-hover__main–cot-right {

transform: rotateY(-90deg);

} .u-block-hover–cot:hover .u-block-hover__additional–cot-right {

transform: rotateY(0deg);

}

// // Flip //

.u-block-hover–flip {

perspective: 50em;

}

class*=“u-block-hover__main–flip”

{

backface-visibility: hidden;

}

class*=“u-block-hover__additional–flip”

{

opacity: 0;

} .u-block-hover–flip:hover [class*=“u-block-hover__main–flip”] {

opacity: 0;

} .u-block-hover–flip:hover [class*=“u-block-hover__additional–flip”] {

opacity: 1;
transition-delay: 0.13999999999999999s;

}

// Flip horizontal .u-block-hover__additional–flip-horiz {

transform: rotateX(90deg);
transform-origin: 0 50%;

} .u-block-hover–flip:hover .u-block-hover__main–flip-horiz {

transform: rotateX(-180deg);

} .u-block-hover–flip:hover .u-block-hover__additional–flip-horiz {

transform: rotateX(0deg);

}

// Flip vertical .u-block-hover__additional–flip-vert {

transform: rotateY(90deg);
transform-origin: 50% 0%;

} .u-block-hover–flip:hover .u-block-hover__main–flip-vert {

transform: rotateY(-180deg);

} .u-block-hover–flip:hover .u-block-hover__additional–flip-vert {

transform: rotateY(0deg);

}

// Flip diagonal-1 .u-block-hover__additional–flip-diag-1 {

transform: rotate3d(1, 1, 0, 100deg);

} .u-block-hover–flip:hover .u-block-hover__main–flip-diag-1 {

transform: rotate3d(-1, -1, 0, 100deg);

} .u-block-hover–flip:hover .u-block-hover__additional–flip-diag-1 {

transform: rotate3d(0, 0, 0, 0deg);

}

// Flip diagonal-2 .u-block-hover__additional–flip-diag-2 {

transform: rotate3d(1, -1, 0, 100deg);

} .u-block-hover–flip:hover .u-block-hover__main–flip-diag-2 {

transform: rotate3d(-1, 1, 0, 100deg);

} .u-block-hover–flip:hover .u-block-hover__additional–flip-diag-2 {

transform: rotate3d(0, 0, 0, 0deg);

}

// // Fold //

.u-block-hover–fold {

perspective: 50em;

}

class*=“u-block-hover__main–fold”

{

transform-origin: 50% 0;

}

class*=“u-block-hover__additional–fold”

{

z-index: 1;
opacity: 0;

} .u-block-hover–fold:hover [class*=“u-block-hover__main–fold”] {

opacity: 0;
transition-delay: 0;

} .u-block-hover–fold:hover [class*=“u-block-hover__additional–fold”] {

transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
opacity: 1;
transition-delay: .21s;

}

// Flip-up .u-block-hover__main–fold-up {

transform-origin: 50% 0;

} .u-block-hover__additional–fold-up {

transform: rotateX(-90deg) translate3d(0, -50%, 0) scale(.6);
transform-origin: 50% 100%;

} .u-block-hover–fold:hover .u-block-hover__main–fold-up {

transform: rotateX(90deg) scale(.6) translateY(50%);

}

// Flip-down .u-block-hover__main–fold-down {

transform-origin: 50% 100%;

} .u-block-hover__additional–fold-down {

transform: rotateX(90deg) translate3d(0, 50%, 0) scale(.6);
transform-origin: 50% 0;

} .u-block-hover–fold:hover .u-block-hover__main–fold-down {

transform: rotateX(-90deg) scale(.6) translateY(-50%);

}

// Flip-left .u-block-hover__main–fold-left {

transform-origin: 0 50%;

} .u-block-hover__additional–fold-left {

transform: rotateY(90deg) translate3d(-50%, 0, 0) scale(.6);
transform-origin: 100% 50%;

} .u-block-hover–fold:hover .u-block-hover__main–fold-left {

transform: rotateY(-90deg) scale(.6) translateX(50%);

}

// Flip-right .u-block-hover__main–fold-right {

transform-origin: 100% 50%;

} .u-block-hover__additional–fold-right {

transform: rotateY(-90deg) translate3d(50%, 0, 0) scale(.6);
transform-origin: 0 50%;

} .u-block-hover–fold:hover .u-block-hover__main–fold-right {

transform: rotateY(90deg) scale(.6) translateX(-50%);

}

// // Zoom-in //

.u-block-hover__additional–zoom-in {

opacity: 0;
transform: scale(.5);

} .u-block-hover:hover .u-block-hover__additional–zoom-in {

transform: scale(1);
opacity: 1;

}

// // Zoom-out //

.u-block-hover__additional–zoom-out {

transform: scale(.5);
transform-origin: 50% 50%;
opacity: 0;

} .u-block-hover:hover .u-block-hover__main–zoom-out {

transform: scale(.5);
opacity: 0;

} .u-block-hover:hover .u-block-hover__additional–zoom-out {

transform: scale(1);
opacity: 1;
transition-delay: .35s;

}

// // Shutter-out //

[class*=“u-block-hover–shutter-out”]::after {

content: "";
position: absolute;
transition-delay: .105s;
z-index: 1;

} .u-block-hover__additional–shutter-out {

opacity: 0;
transition-delay: 0s;
z-index: 2;

} [class*=“u-block-hover–shutter-out”]:hover::after {

transition-delay: 0s;

} [class*=“u-block-hover–shutter-out”]:hover .u-block-hover__additional–shutter-out {

opacity: 1;
transition-delay: .105s;

}

// Shutter-out horizontal .u-block-hover–shutter-out-horiz::after {

left: 50%;
right: 50%;
top: 0;
bottom: 0;

} .u-block-hover–shutter-out-horiz:hover::after {

left: 0;
right: 0;

}

// Shutter-out vertical .u-block-hover–shutter-out-vert::after {

top: 50%;
bottom: 50%;
left: 0;
right: 0;

} .u-block-hover–shutter-out-vert:hover::after {

top: 0;
bottom: 0;

}

// Shutter-out diagonal-1 .u-block-hover–shutter-out-diag-1::after {

top: 50%;
bottom: 50%;
left: -35%;
right: -35%;
transform: rotate(45deg);

} .u-block-hover–shutter-out-diag-1:hover::after {

top: -35%;
bottom: -35%;

}

// Shutter-out diagonal-2 .u-block-hover–shutter-out-diag-2::after {

top: 50%;
bottom: 50%;
left: -35%;
right: -35%;
transform: rotate(-45deg);

} .u-block-hover–shutter-out-diag-2:hover::after {

top: -35%;
bottom: -35%;

}

// // Shutter-in //

[class*=“u-block-hover–shutter-in”]::after, [class*=“u-block-hover–shutter-in”]::before {

content: "";
position: absolute;
z-index: 1;

} [class*=“u-block-hover–shutter-in”]::after {

top: 0;
left: 0;

} [class*=“u-block-hover–shutter-in”]::before {

right: 0;
bottom: 0;

} .u-block-hover__additional–shutter-in {

opacity: 0;
z-index: 2;

} [class*=“u-block-hover–shutter-in”]:hover .u-block-hover__additional–shutter-in {

opacity: 1;
transition-delay: .21s;

}

// Shutter-in horizontal .u-block-hover–shutter-in-horiz::after, .u-block-hover–shutter-in-horiz::before {

width: 0;
height: 100%;

} .u-block-hover–shutter-in-horiz:hover::after, .u-block-hover–shutter-in-horiz:hover::before {

width: 100%;

}

// Shutter-in horizontal .u-block-hover–shutter-in-vert::after, .u-block-hover–shutter-in-vert::before {

height: 0;
width: 100%;

} .u-block-hover–shutter-in-vert:hover::after, .u-block-hover–shutter-in-vert:hover::before {

height: 100%;

}

// Shutter-in diagonal-1 .u-block-hover–shutter-in-diag-1::after, .u-block-hover–shutter-in-diag-1::before {

width: 200%;
height: 200%;
transition: all .6s ease;

} .u-block-hover–shutter-in-diag-1::after {

transform: skew(-45deg) translateX(-150%);

} .u-block-hover–shutter-in-diag-1::before {

transform: skew(-45deg) translateX(150%);

} .u-block-hover–shutter-in-diag-1:hover::after {

transform: skew(-45deg) translateX(-50%);

} .u-block-hover–shutter-in-diag-1:hover::before {

transform: skew(-45deg) translateX(50%);

}

// Shutter-in diagonal-2 .u-block-hover–shutter-in-diag-2::after, .u-block-hover–shutter-in-diag-2::before {

width: 200%;
height: 200%;
transition: all .6s ease;

} .u-block-hover–shutter-in-diag-2::after {

transform: skew(45deg) translateX(-100%);

} .u-block-hover–shutter-in-diag-2::before {

transform: skew(45deg) translateX(100%);

} .u-block-hover–shutter-in-diag-2:hover::after {

transform: skew(45deg) translateX(0);

} .u-block-hover–shutter-in-diag-2:hover::before {

transform: skew(45deg) translateX(0);

}

// // Shutter-in-out //

[class*=“u-block-hover–shutter-in-out”]::after, [class*=“u-block-hover–shutter-in-out”]::before {

content: "";
position: absolute;
z-index: 1;

} [class*=“u-block-hover–shutter-in-out”]::after {

top: 0;
left: 0;

} [class*=“u-block-hover–shutter-in-out”]::before {

right: 0;
bottom: 0;

} .u-block-hover__additional–shutter-in-out {

opacity: 0;
z-index: 2;

} [class*=“u-block-hover–shutter-in-out”]:hover .u-block-hover__additional–shutter-in-out {

opacity: 1;
transition-delay: .21s;

}

// Shutter-in-out horizontal .u-block-hover–shutter-in-out-horiz::after, .u-block-hover–shutter-in-out-horiz::before {

width: 0;
height: 100%;

} .u-block-hover–shutter-in-out-horiz:hover::after, .u-block-hover–shutter-in-out-horiz:hover::before {

width: 100%;
opacity: .75;

}

// Shutter-in-out horizontal .u-block-hover–shutter-in-out-vert::after, .u-block-hover–shutter-in-out-vert::before {

height: 0;
width: 100%;

} .u-block-hover–shutter-in-out-vert:hover::after, .u-block-hover–shutter-in-out-vert:hover::before {

height: 100%;
opacity: .75;

}

// Shutter-in-out diagonal-1 .u-block-hover–shutter-in-out-diag-1::after, .u-block-hover–shutter-in-out-diag-1::before {

width: 200%;
height: 200%;
transition: all .6s ease;
opacity: .75;

} .u-block-hover–shutter-in-out-diag-1::after {

transform: skew(-45deg) translateX(-150%);

} .u-block-hover–shutter-in-out-diag-1::before {

transform: skew(-45deg) translateX(150%);

} .u-block-hover–shutter-in-out-diag-1:hover::after {

transform: skew(-45deg) translateX(-50%);

} .u-block-hover–shutter-in-out-diag-1:hover::before {

transform: skew(-45deg) translateX(50%);

}

// Shutter-in-out diagonal-2 .u-block-hover–shutter-in-out-diag-2::after, .u-block-hover–shutter-in-out-diag-2::before {

width: 200%;
height: 200%;
transition: all .6s ease;
opacity: .75;

} .u-block-hover–shutter-in-out-diag-2::after {

transform: skew(45deg) translateX(-100%);

} .u-block-hover–shutter-in-out-diag-2::before {

transform: skew(45deg) translateX(100%);

} .u-block-hover–shutter-in-out-diag-2:hover::after {

transform: skew(45deg) translateX(0);

} .u-block-hover–shutter-in-out-diag-2:hover::before {

transform: skew(45deg) translateX(0);

}

// // Strip shutter //

.u-block-hover–strip-shutter::before, .u-block-hover–strip-shutter::after, .u-block-hover__additional–strip-shutter::before, .u-block-hover__additional–strip-shutter::after {

content: "";
position: absolute;
top: 0;
width: 25%;
height: 100%;
transform: scaleY(0);
opacity: 0;

} .u-block-hover–strip-shutter::before, .u-block-hover–strip-shutter::after {

z-index: 1;

} .u-block-hover–strip-shutter::before {

left: 0;
transition-delay: 0s;

} .u-block-hover–strip-shutter::after {

left: 25%;
transition-delay: .105s;

} .u-block-hover__additional–strip-shutter {

z-index: 3;

} .u-block-hover__additional–strip-shutter::before, .u-block-hover__additional–strip-shutter::after {

z-index: -1;

} .u-block-hover__additional–strip-shutter::before {

left: 50%;
transition-delay: .21s;

} .u-block-hover__additional–strip-shutter::after {

left: 75%;
transition-delay: .35s;

} .u-block-hover–strip-shutter:hover::before, .u-block-hover–strip-shutter:hover::after, .u-block-hover–strip-shutter:hover .u-block-hover__additional–strip-shutter::before, .u-block-hover–strip-shutter:hover .u-block-hover__additional–strip-shutter::after {

transform: scale(1);
opacity: 1;

} .u-block-hover__additional–strip-shutter__inner {

opacity: 0;

} .u-block-hover–strip-shutter:hover .u-block-hover__additional–strip-shutter__inner {

opacity: 1;
transition-delay: .35s;

}

// // Tile //

.u-block-hover–tile::before, .u-block-hover–tile::after, .u-block-hover__additional–tile::before, .u-block-hover__additional–tile::after {

content: "";
position: absolute;
width: 50%;
height: 50%;
transform: scale(0);
opacity: 0;

} .u-block-hover–tile::before, .u-block-hover–tile::after {

z-index: 1;

} .u-block-hover–tile::before {

top: 0;
left: 0;
transition-delay: 0s;

} .u-block-hover–tile::after {

top: 0;
left: 50%;
transition-delay: .105s;

} .u-block-hover__additional–tile {

z-index: 3;

} .u-block-hover__additional–tile::before, .u-block-hover__additional–tile::after {

z-index: -1;

} .u-block-hover__additional–tile::before {

top: 50%;
left: 0;
transition-delay: .21s;

} .u-block-hover__additional–tile::after {

top: 50%;
left: 50%;
transition-delay: .35s;

} .u-block-hover–tile:hover::before, .u-block-hover–tile:hover::after, .u-block-hover–tile:hover .u-block-hover__additional–tile::before, .u-block-hover–tile:hover .u-block-hover__additional–tile::after {

transform: scale(1);
opacity: 1;

} .u-block-hover__additional–tile__inner {

opacity: 0;

} .u-block-hover–tile:hover .u-block-hover__additional–tile__inner {

opacity: 1;
transition-delay: .35s;

}

// // Cube //

.u-block-hover–cube {

overflow: visible;
background-color: transparent;
perspective: 50em;
transform-style: preserve-3d;

}

class*=“u-block-hover__main–cube”

{

transition-delay: .05s;

}

class*=“u-block-hover__additional–cube”

{

opacity: 0;
transition-delay: 0s;

} .u-block-hover–cube:hover [class*=“u-block-hover__main–cube”] {

opacity: 0;
transition-delay: 0s;

} .u-block-hover–cube:hover [class*=“u-block-hover__additional–cube”] {

opacity: 1;
transform: translateY(0%) rotateX(0deg);
transition-delay: .05s;

}

// Cube-up .u-block-hover__additional–cube-up {

transform: translateY(50%) rotateX(-90deg);

} .u-block-hover–cube:hover .u-block-hover__main–cube-up {

transform: translateY(-50%) rotateX(90deg);

}

// Cube-down .u-block-hover__additional–cube-down {

transform: translateY(-50%) rotateX(90deg);

} .u-block-hover–cube:hover .u-block-hover__main–cube-down {

transform: translateY(50%) rotateX(-90deg);

}

// Cube-left .u-block-hover__additional–cube-left {

transform: translateX(-50%) rotateY(-90deg);

} .u-block-hover–cube:hover .u-block-hover__main–cube-left {

transform: translateX(50%) rotateY(90deg);

}

// Cube-right .u-block-hover__additional–cube-right {

transform: translateX(50%) rotateY(90deg);

} .u-block-hover–cube:hover .u-block-hover__main–cube-right {

transform: translateX(-50%) rotateY(-90deg);

}

// // Border reveal //

.u-block-hover–border-reveal::before, .u-block-hover–border-reveal::after, .u-block-hover__additional–border-reveal::before, .u-block-hover__additional–border-reveal::after {

content: "";
position: absolute;
background-color: $g-color-white;
transform-origin: 0 0;

} .u-block-hover–border-reveal::before, .u-block-hover–border-reveal::after {

left: 5px;
right: 5px;
height: 4px;
z-index: 1;
transform: scaleX(0);

} .u-block-hover–border-reveal::before {

top: 5px;
transition-delay: .28s;

} .u-block-hover–border-reveal:hover::before {

transition-delay: 0s;

} .u-block-hover–border-reveal::after {

bottom: 5px;
transition-delay: 0s;

} .u-block-hover–border-reveal:hover::after {

transition-delay: .28s;

} .u-block-hover__additional–border-reveal {

background-color: transparent;
z-index: 3;

} .u-block-hover__additional–border-reveal__inner {

opacity: 0;

} .u-block-hover__additional–border-reveal::before, .u-block-hover__additional–border-reveal::after {

top: 5px;
bottom: 5px;
width: 4px;
z-index: -1;
transform: scaleY(0);

} .u-block-hover__additional–border-reveal::before {

left: 5px;
transition-delay: .28s;

} .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::before {

transition-delay: 0s;

} .u-block-hover__additional–border-reveal::after {

right: 5px;
transition-delay: 0s;

} .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::after {

transition-delay: .28s;

} .u-block-hover–border-reveal:hover .u-block-hover__main–border-reveal {

opacity: 0;

} .u-block-hover–border-reveal:hover::before, .u-block-hover–border-reveal:hover::after, .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::before, .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::after {

transform: scale(1);

} .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal__inner {

opacity: 1;
transition-delay: .35s;

}

// // Mover //

.u-block-hover:hover img, .u-block-hover:hover [class*=“u-block-hover__additional–mover-”] {

opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

}

img {

max-width: initial;
width: calc(100% + 60px);
transition-duration: 0.5s;
transform-origin: 50% 50%;

}

class*=“u-block-hover__additional–mover-”

{

opacity: 0;
transition-duration: 0.5s;

}

// Mover-left img.u-block-hover__main–mover-left {

transform: translate3d(-60px, 0, 0);

} .u-block-hover__additional–mover-left {

transform: translate3d(10px, 0, 0);

}

// Mover-right img.u-block-hover__main–mover-right {

transform: translate3d(-60px, 0, 0);

} .u-block-hover__additional–mover-right {

transform: translate3d(-10px, 0, 0);

}

// Mover-up img.u-block-hover__main–mover-up {

transform: translate3d(0, 20px, 0) scale3d(1.1, 1.1, 1.1);

} .u-block-hover__additional–mover-up {

transform: translate3d(0, 10px, 0);

}

// Mover-down img.u-block-hover__main–mover-down {

transform: translate3d(0, -20px, 0) scale3d(1.1, 1.1, 1.1);

} .u-block-hover__additional–mover-down {

transform: translate3d(0, -10px, 0);

}

// // Focuser //

.u-block-hover__additional–focuser-element {

top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
opacity: .3;
box-shadow: 0 0 0 31px rgba(0,0,0,.5);
transform: scale3d(1.4, 1.4, 1.4);
transition-duration: .5s;

} .u-block-hover__additional–focuser-target {

position: static;
opacity: 0;
transform: scale3d(1.4, 1.4, 1.4);
transition-duration: .5s;

} .u-block-hover:hover .u-block-hover__additional–focuser-target, .u-block-hover:hover .u-block-hover__additional–focuser-element {

opacity: 1;
transform: scale3d(1, 1, 1);
transition-duration: .3s;

}

// // Magnifier //

img {

max-width: initial;
width: calc(100% + 10px);
margin: -10px 0;

}

class*=“u-block-hover__additional–magnifier-element”

{

width: 400px;
height: 400px;
border-radius: 50%;
box-shadow: 0 0 0 4000px rgba(255,255,255,.3);
z-index: 2;
opacity: 0;
transform: scale3d(.7, .7, .7);
transform-origin: 50% 50%;

} .u-block-hover:hover [class*=“u-block-hover__additional–magnifier-element”] {

opacity: 1;
transform: scale3d(1, 1, 1);

}

class*=“u-block-hover__additional–magnifier-description”

{

max-width: 115px;
z-index: 3;
opacity: 0;

} .u-block-hover:hover [class*=“u-block-hover__additional–magnifier-description”] {

opacity: 1;
transform: translate3d(0, 0, 0);

}

// Magnifier-bottom-right .u-block-hover__additional–magnifier-element-bottom-right {

top: auto;
left: auto;
bottom: -180px;
right: -180px;

} .u-block-hover__additional–magnifier-description-bottom-right {

top: auto;
right: 30px;
bottom: 30px;
left: auto;
transform: translate3d(20px, 20px, 0);

} .u-block-hover:hover img.u-block-hover__main–magnifier-bottom-right {

transform: translate3d(-10px, -10px, 0);

}

// Magnifier-top-right .u-block-hover__additional–magnifier-element-top-right {

top: -180px;
right: -180px;
bottom: auto;
left: auto;

} .u-block-hover__additional–magnifier-description-top-right {

top: 30px;
right: 30px;
bottom: auto;
left: auto;
transform: translate3d(20px, -20px, 0);

} .u-block-hover:hover img.u-block-hover__main–magnifier-top-right {

transform: translate3d(-10px, 10px, 0);

}

// Magnifier-bottom-left img.u-block-hover__main–magnifier-bottom-left {

transform: translate3d(-10px, 0, 0);

} .u-block-hover__additional–magnifier-element-bottom-left {

top: auto;
left: -180px;
bottom: -180px;
right: auto;

} .u-block-hover__additional–magnifier-description-bottom-left {

top: auto;
right: auto;
bottom: 30px;
left: 30px;
transform: translate3d(-20px, 20px, 0);

} .u-block-hover:hover img.u-block-hover__main–magnifier-bottom-left {

transform: translate3d(0, -10px, 0);

}

// Magnifier-top-left img.u-block-hover__main–magnifier-top-left {

transform: translate3d(-10px, 0, 0);

} .u-block-hover__additional–magnifier-element-top-left {

top: -180px;
left: -180px;
bottom: auto;
right: auto;

} .u-block-hover__additional–magnifier-description-top-left {

top: 30px;
right: auto;
bottom: auto;
left: 30px;
transform: translate3d(-20px, -20px, 0);

} .u-block-hover:hover img.u-block-hover__main–magnifier-top-left {

transform: translate3d(0, 10px, 0);

}

// // Pappercuter //

class*=“u-block-hover__additional–pappercuter”

{

transform-origin: 50% 50%;

} .u-block-hover__additional–pappercuter-inner {

width: 100%;
transform: rotate3d(0, 0, 1, 5deg);

} .u-block-hover__additional–pappercuter-front, .u-block-hover__additional–pappercuter-back {

max-width: initial;
width: 120%;
top: -60px;
bottom: -60px;
left: -10%;
z-index: 2;
background-position: center;
background-size: cover;
transform: rotate3d(0, 0, 1, -5deg);

} .u-block-hover__additional–pappercuter-front {

clip: rect(0px, auto, 246px, 0px);

} .u-block-hover__additional–pappercuter-back {

top: -61px;
clip: rect(246px, auto, auto, 0px);

} .u-block-hover:hover .u-block-hover__additional–pappercuter-front {

transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, -45%, 0);

} .u-block-hover:hover .u-block-hover__additional–pappercuter-back {

transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, 45%, 0);

}

// // Slide Outside //

class*=“u-block-hover__additional–outside”

{

opacity: 0;
visibility: hidden;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0.7, -1.2, 0.8, 1.2);

} .u-block-hover:hover [class*=“u-block-hover__additional–outside”] {

opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
transition-timing-function: cubic-bezier(0.25, 1.8, 0.8, 1);

} .u-block-hover__additional–outside-down {

transform: translate3d(0, -100%, 0);

} .u-block-hover__additional–outside-up {

transform: translate3d(0, 100%, 0);

} .u-block-hover__additional–outside-left {

transform: translate3d(100%, 0, 0);

} .u-block-hover__additional–outside-right {

transform: translate3d(-100%, 0, 0);

}

// // Slide Lightspeed //

class*=“u-block-hover__additional–lightspeed”

{

visibility: hidden;
opacity: 0;
transition-duration: .7s;
transition-timing-function: cubic-bezier(0.75, -1.2, 0.8, 2);

} .u-block-hover:hover [class*=“u-block-hover__additional–lightspeed”] {

opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) skew(0deg, 0deg);
transition-timing-function: cubic-bezier(0.25, 2, 0.75, 1);

} .u-block-hover__additional–lightspeed-left {

transform-origin: 50% 0%;
transform: translate3d(150%, 0, 0) skew(-35deg, 0deg);

} .u-block-hover__additional–lightspeed-right {

transform-origin: 50% 100%;
transform: translate3d(-150%, 0, 0) skew(35deg, 0deg);

} .u-block-hover__additional–lightspeed-down {

transform-origin: 50% 50%;
transform: translate3d(0, -150%, 0) skew(0deg, -35deg);

} .u-block-hover__additional–lightspeed-up {

transform-origin: 100% 50%;
transform: translate3d(0, 150%, 0) skew(0deg, -35deg);

}

// // Rotate //

class*=“u-block-hover__additional–rotate”

{

opacity: 0;
visibility: hidden;

} .u-block-hover:hover [class*=“u-block-hover__additional–rotate”] {

opacity: 1;
visibility: visible;
transform: rotate3d(0, 0, 0, 0deg) scale3d(1, 1, 1);

} .u-block-hover__additional–rotate-in {

opacity: 1;
transition-property: transform, opacity, visibility;
transition-duration: .4s;
transform: rotate3d(0, 0, 1, 720deg) scale3d(0, 0, 0);

} .u-block-hover__additional–rotate-down-left {

transform-origin: 0 100%;
transform: rotate3d(0, 0, 1, -45deg);

} .u-block-hover__additional–rotate-down-right {

transform-origin: 100% 100%;
transform: rotate3d(0, 0, 1, 45deg);

} .u-block-hover__additional–rotate-up-left {

transform-origin: 0 100%;
transform: rotate3d(0, 0, 1, 45deg);

} .u-block-hover__additional–rotate-up-right {

transform-origin: 100% 100%;
transform: rotate3d(0, 0, 1, -45deg);

}

// // Jump //

.u-block-hover__additional–jump {

position: static;

}

.u-block-hover:hover .u-block-hover__additional–jump, .u-block-hover.u-block-hover__additional–jump:hover {

transform: translate3d(0, -10px, 0);

}

/*————————————

Dedicated Properties

————————————*/

.u-block-hover {

&:hover,
&:focus {

  /* Opacity */
  .u-block-hover__prop-opacity-1 {
    opacity: 1;
  }

  /* Colors */
  .u-block-hover__prop-color-white {
    color: #fff;
  }

  /* Background-colors */
  .u-block-hover__prop-bg-primary {
    background-color: $g-color-primary;

    &-opacity-0_9 {
      background-color: rgba($g-color-primary, .9);
    }
  }

}

}