.toolslide {
position: absolute;
overflow: hidden;
pointer-events: none;
z-index: 10;
}
.toolslide.ts-left {
left: 0px;
top: 0px;
}
.toolslide.ts-right {
right: 0px;
top: 0px;
}
.toolslide.ts-top {
top: 0px;
left: 0px;
}
.toolslide.ts-bottom {
bottom: 0px;
left: 0px;
}
.ts-embed-container {
transition: margin 0.5s ease;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
}
.toolslide .ts-container {
height: 100%;
width: 100%;
position: absolute;
pointer-events: all;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.toolslide.ts-left .ts-container {
left: 0;
}
.toolslide.ts-right .ts-container {
right: 0;
}
.toolslide.ts-top .ts-container {
top: 0;
}
.toolslide.ts-bottom .ts-container {
bottom: 0;
}
.toolslide .ts-nav-container {
position: absolute;
}
.toolslide.ts-left .ts-nav-container {
left: 100%;
top: 15%;
margin-left: -1px;
}
.toolslide.ts-right .ts-nav-container {
right: 100%;
top: 15%;
margin-right: -1px;
}
.toolslide.ts-top .ts-nav-container {
top: 100%;
left: 15%;
margin-top: -1px;
}
.toolslide.ts-bottom .ts-nav-container {
bottom: 100%;
left: 15%;
margin-bottom: -1px;
}
.toolslide .ts-nav-item {
box-sizing: border-box;
background-color: #fff;
color: #2f353f;
cursor: pointer;
border: 1px solid #2f353f;
display: inline-block;
} .toolslide.ts-left .ts-nav-item, .toolslide.ts-right .ts-nav-item {
margin: 5px 0px;
}
.toolslide.ts-top .ts-nav-item, .toolslide.ts-bottom .ts-nav-item {
margin: 0px 5px;
}
.toolslide .ts-content-container {
background-color: #2f353f;
height: 100%;
width: 100%;
}
.toolslide .ts-content-item {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
visibility: hidden;
}
.toolslide .ts-content-item.active {
opacity: 1;
visibility: visible;
}
.toolslide.ts-left.open .ts-container,
.toolslide.ts-left .ts-content-item.active.slide,
.toolslide.ts-left .ts-content-item.active.slidefade {
transform: initial;
-webkit-transform: initial;
-moz-transform: initial;
-o-transform: initial;
-ms-transform: initial;
}
.toolslide.ts-left.closed .ts-container,
.toolslide.ts-left .ts-content-item.slide,
.toolslide.ts-left .ts-content-item.slidefade {
transform: translate(-100%,0);
-webkit-transform: translate(-100%,0);
-moz-transform: translate(-100%,0);
-o-transform: translate(-100%,0);
-ms-transform: translate(-100%,0);
}
.toolslide.ts-right.open .ts-container,
.toolslide.ts-right .ts-content-item.active.slide,
.toolslide.ts-right .ts-content-item.active.slidefade {
transform: initial;
-webkit-transform: initial;
-moz-transform: initial;
-o-transform: initial;
-ms-transform: initial;
}
.toolslide.ts-right.closed .ts-container,
.toolslide.ts-right .ts-content-item.slide,
.toolslide.ts-right .ts-content-item.slidefade {
transform: translate(100%,0);
-webkit-transform: translate(100%,0);
-moz-transform: translate(100%,0);
-o-transform: translate(100%,0);
-ms-transform: translate(100%,0);
}
.toolslide.ts-top.open .ts-container,
.toolslide.ts-top .ts-content-item.active.slide,
.toolslide.ts-top .ts-content-item.active.slidefade {
transform: initial;
-webkit-transform: initial;
-moz-transform: initial;
-o-transform: initial;
-ms-transform: initial;
}
.toolslide.ts-top.closed .ts-container,
.toolslide.ts-top .ts-content-item.slide,
.toolslide.ts-top .ts-content-item.slidefade {
transform: translate(0,-100%);
-webkit-transform: translate(0,-100%);
-moz-transform: translate(0,-100%);
-o-transform: translate(0,-100%);
-ms-transform: translate(0,-100%);
}
.toolslide.ts-bottom.open .ts-container,
.toolslide.ts-bottom .ts-content-item.active.slide,
.toolslide.ts-bottom .ts-content-item.active.slidefade {
transform: initial;
-webkit-transform: initial;
-moz-transform: initial;
-o-transform: initial;
-ms-transform: initial;
}
.toolslide.ts-bottom.closed .ts-container,
.toolslide.ts-bottom .ts-content-item.slide,
.toolslide.ts-bottom .ts-content-item.slidefade {
transform: translate(0,100%);
-webkit-transform: translate(0,100%);
-moz-transform: translate(0,100%);
-o-transform: translate(0,100%);
-ms-transform: translate(0,100%);
}