[data-sal] {
position:relative;
opacity:0;
-webkit-transition:opacity 1500ms cubic-bezier(0, 0, .1, .97), transform 1500ms cubic-bezier(0, 0, .1, .97);
-moz-transition:opacity 1500ms cubic-bezier(0, 0, .1, .97), transform 1500ms cubic-bezier(0, 0, .1, .97);
-ms-transition:opacity 1500ms cubic-bezier(0, 0, .1, .97), transform 1500ms cubic-bezier(0, 0, .1, .97);
-o-transition:opacity 1500ms cubic-bezier(0, 0, .1, .97), transform 1500ms cubic-bezier(0, 0, .1, .97);
transition:opacity 1500ms cubic-bezier(0, 0, .1, .97), transform 1500ms cubic-bezier(0, 0, .1, .97);
}
.salOut {
opacity:0;
-webkit-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
-moz-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
-ms-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
-o-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
}
[data-sal="slide-up"] {
transform:translateY(20vh);
}
[data-sal="slide-up-left"] {
transform:translateY(20vh) translateX(-20vw);
}
[data-sal="slide-left"] {
transform:translateX(-20vw);
}
[data-sal="slide-up-right"] {
transform:translateY(20vh) translateX(20vw);
}
[data-sal="slide-right"] {
transform:translateX(20vw);
}
.salIn[data-sal] {
opacity:1;
transform:translateY(0) translateX(0);
}
.salOut {
opacity:0;
-webkit-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
-moz-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
-ms-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
-o-transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
transition:opacity 10ms cubic-bezier(0, 0, .1, .97), transform 10ms cubic-bezier(0, 0, .1, .97);
}
.slidePointer_holder {
position:absolute;
top:-20vh;
left:0;
width:100%;
bottom:-20vh;
opacity:0;
pointer-events:none;
}
.slidePointer {
position:absolute;
top:0;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
width:1px;
}