.o-sliderContainer * {
box-sizing: border-box
}
.o-sliderContainer a {
color: #fff;
font-size: 14px;
letter-spacing: 0.125em;
text-decoration: none;
text-transform: uppercase
}
.o-sliderContainer  h1 {
text-transform: uppercase;
font-size: 2.5rem
}
.o-sliderContainer  .pre {
display: inline-block;
padding: 20px;
background: #f1f1f1;
box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.1);
width: 100%
}
.loaderWrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 123333333
}
.ball-scale-multiple {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.a-container {
width: 1170px;
margin: 20px auto
}
.a-1_2 {
width: 48%;
display: inline-block;
margin: 0 1%
}
.o-sliderContainer {
overflow: hidden;
position: relative;
width: 100%;
min-height: 200px;
background: #fff;
float: left;
margin: 30px 0;
height: auto
}
.o-sliderContainer.hasShadow {
box-shadow: 0 39px 22px -29px rgba(0, 0, 0, 0.2)
}
.o-sliderContainer:hover .o-slider-next {
right: 0
}
.o-sliderContainer:hover .o-slider-prev {
left: 0
}
.o-slider--item {
height: auto;
width: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
float: left;
transition: all 0.2s cubic-bezier(0.7, 0.18, 0.53, 0.75);
opacity: 0.6;
transform: scale(1, 1);
transform-origin: center center;
z-index: 99
}
.o-slider--item::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(70%, transparent));
background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
background: -o-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
background: -ms-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
background: linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
z-index: 0
}
.a-sliderBg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 10.01%;
}
.a-sliderBg:nth-child(1) {
left: 10%; }
.a-sliderBg:nth-child(2) {
left: 20%; }
.a-sliderBg:nth-child(3) {
left: 30%; }
.a-sliderBg:nth-child(4) {
left: 40%; }
.a-sliderBg:nth-child(5) {
left: 50%; }
.a-sliderBg:nth-child(6) {
left: 60%; }
.a-sliderBg:nth-child(7) {
left: 70%; }
.a-sliderBg:nth-child(8) {
left: 80%; }
.a-sliderBg:nth-child(9) {
left: 90%; }
.o-slider--item.isActive .a-sliderBg {
transform: translateY(-100%); }
.o-slider--item.isActive .a-sliderBg:nth-child(even) {
transform: translateY(100%); }
.o-slider--item.isActive {
opacity: 1;
transform: scale(1, 1);
padding: 0 40px
}
.o-slider--item.isMoving {
opacity: 0.7;
transform: scale(1, 1);
z-index: 100
}
.o-slider {
width: auto;
position: relative;
display: none
}
.o-slider.isVisible {
display: table; }
.o-slider.isDraggable {
cursor: move
}
.o-slider-textWrap {
left: 3%;
bottom: 45px;
height: auto;
position: absolute;
text-align: left;
padding: 0 0 20px 0;
width: 96%;
transition: all 0.4s;
opacity: 1;
overflow: visible;
perspective: 1000px;
z-index: 2
}
.isActive .o-slider-textWrap::after {
width: 100%;
left: 0
}
.isActive .o-slider-paragraph {
opacity: 1;
transition-delay: 0.6s
}
.isActive .o-slider-title {
opacity: 1;
transition-delay: 0.2s;
}
.isActive .o-slider-subTitle {
opacity: 1;
transition-delay: 0.6s
}
.isActive .o-slider-textWrap::after {
width: 100%;
left: 0; }
.isActive .o-slider-paragraph {
opacity: 1;
transform: perspective(0) rotateY(0) translate(0, 0);
transform-origin: 0 0;
transition-delay: 0.6s; }
.isActive .o-slider-title {
opacity: 1;
transform: perspective(0) rotateY(0) translate(0, 0);
transform-origin: 0 0;
transition-delay: 0.2s;
}
.isActive .o-slider-subTitle {
opacity: 1;
transform: perspective(0) rotateY(0) translate(0, 0);
transform-origin: 0 0;
transition-delay: 0.6s;
}
.isActive .o-slider-title::after {
width: 100%;
opacity: 1; transition-delay: 0.4s; }
.isActive .o-slider-subTitle::after {
width: 100%;
opacity: 1; transition-delay: 0.8s; }
.isActive .o-slider-paragraph::after {
width: 100%;
opacity: 1; transition-delay: 0.6s; }
.o-slider-title {
width: auto;
margin: 0 0 5px 0;
height: auto;
color: #fff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
font-size: 1.4rem;
display: inline-block;
padding: 10px 50px 10px 10px;
transition: all 0.4s;
transform-origin: 0 0;
transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
opacity: 0;
position: relative;
z-index: 1;
}
.o-slider-subTitle {
width: auto;
margin: 0 0 5px 0;
height: auto;
color: #fff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
font-size: 1.4rem;
display: inline-block;
padding: 10px 50px 10px 10px;
transition: all 0.4s;
transform-origin: 0 0;
transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
opacity: 0;
position: relative;
z-index: 1;
font-size: 1.2rem; }
.o-slider-paragraph {
width: auto;
margin: 0 0 5px 0;
height: auto;
color: #fff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
font-size: 1.4rem;
display: inline-block;
padding: 10px 50px 10px 10px;
transition: all 0.4s;
transform-origin: 0 0;
transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
opacity: 0;
position: relative;
z-index: 1;
font-size: 0.8rem;
max-width: 100%;
display: none; }
@media screen and (min-width: 768px) {
.o-slider-textWrap {
left: 6%;
width: 90%
}
.o-slider-title {
font-size: 25px;
}
.o-slider-subTitle {
font-size: 20px;
}
.o-slider-paragraph { font-size: 13px;
display: inline-table;
}
}
@media screen and (min-width: 1024px) {
.o-slider-pagination {
bottom: 6%
}
.o-slider-textWrap {
left: 70px;
width: 80%;
bottom: 50px
}
.o-slider-title {
font-size: 30px;
}
.o-slider-subTitle {
font-size: 22px;
}
.o-slider-paragraph { font-size: 16px;
}
}
.o-slider-paragraph::after {
content: "";
bottom: 0;
left: 0;
height: 100%;
width: 0;
z-index: -1;
position: absolute;
background: rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
transition: all 0.4s;
opacity: 0; }
.o-slider-title::after {
content: "";
bottom: 0;
left: 0;
height: 100%;
width: 0;
z-index: -1;
position: absolute;
background: rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
transition: all 0.4s;
opacity: 0; }
.o-slider-subTitle::after {
content: "";
bottom: 0;
left: 0;
height: 100%;
width: 0;
z-index: -1;
position: absolute;
background: rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
transition: all 0.4s;
opacity: 0; }
.know-more-btn {
transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
background-color: #03a9f4;
color: #FFF;
padding: 16px 32px ;
border-radius: 3px;
position: relative;
transition-delay: 1.2s;
opacity: 0;
text-decoration: none;
margin:0 0 5px 0;
display: inline-block;
top:1px;
cursor:pointer;
}
.isActive .know-more-btn {
margin-left: 0px;
opacity: 1;
}
.a-divider {
display: block;
width: 100%;
height: 1px;
margin: 2px 0
}
.o-slider-controls {
display: none
}
.o-slider-controls.isVisible {
display: block
}
.o-slider-pagination {
bottom: 2%;
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 1444000;
margin: 0;
padding: 0
}
.o-slider-pagination>li {
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 2px 0 rgba(0, 0, 0, 0.4) inset;
display: inline-block;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 20px;
width: 20px;
margin-left: 6px;
margin-right: 6px;
transition: all 250ms;
cursor: pointer;
background-clip: padding-box;
z-index: 100
}
.o-slider-pagination>li.isActive,
.o-slider-pagination>li:hover {
background-color: rgba(255, 255, 255, 0.9);
transform: scale(1.3, 1.3)
}
.o-slider--preview {
position: absolute;
top: -70px;
right: auto;
bottom: auto;
left: -65px;
opacity: 0;
width: 140px;
height: 60px;
background-size: cover;
background-position: center center;
transition: all 250ms;
z-index: -1;
border: 3px solid #000;
transform: scale(0.2, 0.2);
transform-origin: center bottom;
display: none
}
.o-slider--preview::before {
content: "";
position: absolute;
top: auto;
right: auto;
bottom: -13px;
left: 50%;
margin: 0 0 0 -5px;
height: 0;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000
}
.o-slider--preview.isActive,
.o-slider-pagination li:hover .o-slider--preview {
opacity: 1;
position: absolute;
top: -76px;
right: auto;
bottom: auto;
left: -65px;
transform: scale(1, 1)
}
@media screen and (min-width: 768px) {
.o-slider--preview {
display: block
}
}
.o-slider-arrows {
margin: 0;
list-style: none;
display: block
}
.o-slider-next,
.o-slider-prev {
position: absolute;
top: 0;
left: -100px;
margin: -12px 0 0;
width: auto;
z-index: 1200122;
padding: 0;
margin: 0;
height: 100%;
list-style: none;
cursor: pointer;
text-align: center;
padding: 10px 25px;
display: inline-block;
vertical-align: middle;
line-height: 100%;
transition: all 0.4s
}
.o-slider-next i,
.o-slider-prev i {
position: absolute;
top: 50%;
left: 0;
margin: 0;
transform: translate(0, -50%);
text-align: center;
width: 100%;
font-size: 3.5rem;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
line-height: 1;
color: #fff
}
.o-slider-next {
left: auto;
right: -100px
}
.isDisabled {
opacity: 0.1;
cursor: auto
}
@media screen and (max-width: 1280px) {
.a-container {
width: 970px
}
}
@media screen and (max-width: 1024px) {
.o-slider-next i, .o-slider-prev i{
font-size:2.5rem;
}
.o-slider-prev i, .o-slider-prev i{
font-size:2.5rem;
}
.o-sliderContainer  h1 {
font-size: 1.8rem
}
.o-slider-arrows { }
.o-sliderContainer {
height: 450px;
width: 100%;
margin: 0 0 50px 0
}
.o-slider--item {
height: 450px
}
}
@media screen and (max-width: 768px) {
.o-sliderContainer  h1 {
font-size: 1.8rem
}
.o-slider-next i, .o-slider-prev i{
font-size:2.5rem;
}
.o-slider-prev i, .o-slider-prev i{
font-size:2.5rem;
}
.a-container {
width: 90%;
margin: 20px auto
}
.a-1_2 {
width: 100%;
display: block;
margin: 0
}
.o-slider-arrows { }
.o-sliderContainer {
height: 350px
}
.o-slider--item {
height: 350px
}
.o-slider-panel img {
left: -15%;
width: 130%
}
}
@media screen and (max-width: 480px) {
.o-slider-textWrap{left:11%}
.o-slider--item {
height: 270px
}
.o-slider--item img {
left: -20%;
width: 140%
}
.o-sliderContainer {
height: 270px
}
.know-more-btn { padding:9px 18px;}
..o-slider-title{font-size:1.0rem;font-size:13px;}
}
.slider-pagination>li:hover {
background-color: rgba(255, 255, 255, 0.9);
transform: scale(1.3, 1.3)
}
.loaderWrap {
background: url(//libreriagumo.com/wp-content/plugins/full-width-responsive-slider-wp/images/img-loader.gif) 50% 50% no-repeat
}
.o-sliderContainer, .o-sliderContainer *{
box-sizing:border-box !important;
}