Your IP : 216.73.216.196
@transition: all 0.4s ease 0s;
@primaryColor: #010D14;
@secondaryColor: #FFB703;
@whiteColor: #ffffff;
@titleColor: #010D14;
@formBg: #0e1254;
@hoverColor: #1273eb;
@linkColor: #1273eb;
.orange-color {
color: #f24c1a;
}
/*--------------------------------------------------------------
Heading css
--------------------------------------------------------------*/
.rs-heading,
.rs-dual-heading{
.title-inner{
.sub-text{
margin: 0 0 10px;
display: block;
font-size: 18px;
font-weight: 600;
line-height: 26px;
&.title-upper{
text-transform: uppercase;
}
}
.title{
color:@titleColor;
line-height: 40px;
margin-bottom: 15px;
margin-top: 0;
&.title-upper{
text-transform: uppercase;
}
span.watermark {
position: absolute;
font-size: 80px;
text-transform: uppercase;
font-weight: 800;
z-index: -1;
opacity: 0.05;
width: 100%;
left: 0;
color: inherit;
}
}
}
&.big{
.title-inner{
h2{
font-size: 36px;
line-height: 44px;
}
}
.description{
p{
font-size: 20px;
line-height: 32px;
}
}
}
&.style4{
.title-inner{
.title{
margin-bottom: 8px;
}
.title-img{
margin-bottom: 12px;
}
}
}
&.style5,
&.style12{
.sub-text{
display: inline-block !important;
}
}
&.style2{
position: relative;
padding-bottom: 15px;
&:after{
content: "";
position: absolute;
border: 0;
width: 66px;
height: 2px;
z-index: 9;
margin-left: 0;
left: 0;
bottom: 0;
}
&.center{
&:after{
transform: translateX(-50%);
left: 50%;
}
}
&.right{
&:after{
left:auto;
right: 0;
}
}
h2{
margin-bottom: 12px;
}
.description{
p{
margin-bottom: 12px;
}
}
&.Lite{
&:after{
background: #fff !important;
}
}
}
&.style3{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
}
.description{
position: relative;
padding-left: 80px;
&:after{
content: "";
position: absolute;
border: 0;
width: 60px;
height: 2px;
z-index: 9;
margin-left: 0;
left: 0;
top: 14px;
}
p{
margin-bottom: 12px;
}
}
&.Lite{
.description{
&:after{
background: #fff !important;
}
}
}
}
&.style1{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
}
.description{
position: relative;
padding-right: 80px;
&:after{
content: "";
position: absolute;
border: 0;
width: 60px;
height: 2px;
background: @primaryColor;
z-index: 9;
margin-left: 0;
right: 0;
top: 14px;
}
p{
margin-bottom: 12px;
}
}
&.Lite{
.description{
&:after{
background: #fff !important;
}
}
}
}
&.style8{
position: relative;
padding-bottom: 12px;
margin-bottom: 10px;
.title-inner{
padding-left: 25px;
position: relative;
display: inline-block;
.sub-text{
margin-bottom: 5px;
}
&:after{
content: "";
position: absolute;
border: 0;
width: 2px;
height: 100%;
background: @primaryColor;
z-index: 9;
margin-left: 0;
left: 0;
top: 0;
}
}
.description{
padding-left: 25px;
position: relative;
&:after{
content: "";
position: absolute;
border: 0;
width: 2px;
height: 100%;
background: @primaryColor;
z-index: 9;
margin-left: 0;
left: 0;
top: 0;
}
}
h2{
margin-bottom: 5px;
}
&.text-center{
.description{
padding-top: 15px;
padding-left: 0px;
&:after{
display: none;
}
}
}
&.Lite{
.title-inner{
&:after{
background: #fff;
}
}
.description{
&:after{
background: #fff !important;
}
}
}
}
&.style6{
.title-inner{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
}
.sub-text{
position: relative;
padding-left: 65px;
color: @secondaryColor;
&:after{
content: "";
position: absolute;
border: 0;
width: 50px;
height: 2px;
background: @primaryColor;
z-index: 9;
margin-left: 0;
left: 0;
top: 12px;
}
p{
margin-bottom: 12px;
}
}
}
&.text-center,
&.text-right{
.title-inner{
.sub-text{
display: inline-block;
}
}
}
&.text-center{
.sub-text{
position: relative;
padding-left: 0px;
padding-top: 60px;
color: @secondaryColor;
&:after{
content: '';
width: 77px;
height: 2px;
position: absolute;
left: 50%;
top: 0;
margin-top: -1px;
width: 2px;
height: 50px;
}
}
}
&.Lite{
.sub-text{
&:after{
background: #fff !important;
}
}
}
&.dark{
.sub-text{
&:after{
background: #232023 !important;
}
}
}
}
&.style4{
&.left{
.title-inner{
.sub-text{
padding-left: 43px;
&:before{
left: 0;
}
}
}
}
&.right{
.title-inner{
.sub-text{
padding-right: 43px;
&:after{
right: 0;
}
}
}
}
.title-inner{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
display: block;
}
.sub-text{
position: relative;
color: @secondaryColor;
display: inline-block;
&:before,
&:after{
content: "";
position: absolute;
border: 0;
width: 35px;
height: 2px;
background: @primaryColor;
z-index: 9;
margin-left: 0;
left: -20px;
top: 12px;
}
&:before{
left: -40px;
}
&:after{
left: auto;
right: -40px;
}
p{
margin-bottom: 12px;
}
}
}
&.Lite{
.sub-text{
&:before,
&:after{
background: #fff !important;
}
}
}
&.text-center,
&.text-right{
.title-inner{
.sub-text{
display: inline-block;
}
}
}
}
&.style7{
.title-inner{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
}
.sub-text{
position: relative;
padding-right: 65px;
display: inline-block;
color: @secondaryColor;
&:after{
content: "";
position: absolute;
border: 0;
width: 50px;
height: 2px;
background: @secondaryColor;
z-index: 9;
margin-left: 0;
right: 0;
top: 4px;
}
p{
margin-bottom: 12px;
}
}
&.Lite{
.sub-text{
&:after{
background: #fff !important;
}
}
}
&.text-center,
&.text-right{
.title-inner{
.sub-text{
display: inline-block;
}
}
}
}
}
&.style9{
.title-inner{
margin-bottom: 35px;
.title-img.top{
margin-bottom: 15px;
}
}
.title-upper{
margin-bottom: 5px;
}
.bottom-line{
.title{
margin-bottom: 8px;
position: relative;
padding-bottom: 20px;
&:after{
content: "";
position: absolute;
border: 0;
width: 80px;
height: 2px;
background: @primaryColor;
z-index: 9;
margin-left: 0;
bottom: 0;
left: 0;
}
}
}
&.text-center{
.bottom-line {
.title{
&:after{
transform: translateX(-50%);
left: 50%;
}
}
}
}
.yes_animation img{
display: none;
}
.yes_animation{
position: relative;
&:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100px;
height: 14px;
animation: waving-line 12s linear infinite;
-webkit-animation: waving-line 12s linear infinite;
}
}
}
&.style10{
&.text-center{
text-align: left !important;
.title-inner{
text-align: center;
}
}
&.text-right{
text-align: left !important;
.title-inner{
text-align: right;
}
}
.title-inner{
transform: rotate(-90deg) translatex(-50%);
display: inline-block;
transform-origin: left center 0;
.title{
white-space: nowrap;
position: relative;
top: 40px;
left: 10px;
margin-bottom: 0;
}
}
.description{
transform: rotate(-90deg);
display: inline-block;
}
}
&.style11{
text-align: right !important;
&.text-center{
text-align: right !important;
.title-inner{
text-align: center;
}
}
&.text-right{
text-align: right !important;
.title-inner{
text-align: right;
}
}
.title-inner{
transform: rotate(90deg);
display: inline-block;
}
.description{
transform: rotate(90deg);
display: inline-block;
}
}
}
.rs-animated-heading,
.rs-dual-heading{
.title{
span{
display: inline-block;
}
}
}
.slick-slide{
outline: none;
}
.rs-animated-heading{
.title-inner{
.title,
.title .cd-headline{
color:@titleColor;
line-height: 56px;
}
.title{
margin-bottom: 20px;
&.title-upper{
text-transform: uppercase;
}
.cd-headline{
font-weight: 700;
color: @secondaryColor;
p{
margin-bottom: 0;
&:last-child{
left: -20px;
}
}
}
}
}
.cd-words-wrapper{
text-align: center;
}
}
.overflow-visible > div{
overflow: visible !important;
}
.title-no-margin h4.title {
margin-bottom: 5px;
}
.title-no-margin h3.title {
margin-bottom: 3px !important;
font-size: 20px;
}
.list-style{
padding: 0;
margin: 0;
list-style: none;
li{
position: relative;
padding-left: 32px;
margin-bottom: 5px;
&:before{
content: "\f0a9";
font-family: FontAwesome;
position: absolute;
left: 0;
top: 0;
font-size: 20px;
}
}
}
.no-padding {
padding: 0 !important;
}
.app_newsletter .rs-newsletter-form{
position: relative;
input{
border-radius: 30px;
}
input[type="email"]{
width: 100%;
}
input[type="submit"]{
position: absolute;
right: 9px;
top: 7px;
font-weight: 600;
font-size: 16px;
padding: 10px 45px;
}
}
div.swiper-container.rs-pricing-slider{
ul{
margin: 0;
padding: 0;
list-style: none;
}
position: relative;
right: -150px;
padding-top: 20px;
padding-bottom: 20px;
margin-top: -88px;
margin-bottom: -88px;
padding-left: 20px;
.swiper-wrapper {
align-items: center;
.swiper-slide {
.test-it {
border-radius: 40px;
margin: 0 auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
position: relative;
z-index: -2;
background: transparent;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
.priceing-wrap {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
color: @whiteColor;
.top-part {
i {
width: 60px;
height: 60px;
border-radius: 100%;
line-height: 60px;
display: block;
margin: 0 auto 25px;
background: @secondaryColor;
font-size: 28px;
}
.title {
margin-bottom: 7px;
font-size: 22px;
color: @whiteColor;
}
.price {
font-weight: 500;
font-size: 20px;
margin-bottom: 10px;
}
}
ul.info {
li {
font-size: 13px;
}
}
.btn-part {
display: none;
.readon {
padding: 8px 33px;
}
}
}
}
}
}
.swiper-slide {
opacity: 0;
.test-it {
width: 100%;
max-width: 85% !important;
left: -85px;
height: 395px;
}
}
.swiper-slide-prev {
.test-it {
width: 140%;
max-width: 140% !important;
left: 0 !important;
z-index: 2 !important;
height: 690px !important;
.top-part {
i {
display: block !important;
}
.title {
font-size: 25px !important;
margin-bottom: 32px !important;
}
.price {
font-size: 35px !important;
color: @secondaryColor !important;
margin-bottom: 30px !important;
font-weight: 600 !important;
}
}
ul.info {
li {
font-size: 16px !important;
}
}
.btn-part {
display: block !important;
}
&:before,
&:after {
position: absolute;
content: '';
border-radius: 100%;
z-index: 0;
}
&:after {
width: 40px;
height: 40px;
left: 80px;
bottom: 80px;
background: @secondaryColor;
opacity: 0.26;
animation: move-x 2s alternate infinite;
-webkit-animation: move-x 2s alternate infinite;
}
&:before {
width: 22px;
height: 22px;
right: 80px;
top: 80px;
background: lighten(@secondaryColor, 20%);
opacity: 0.26;
animation: move-x2 5s alternate infinite;
-webkit-animation: move-x2 5s alternate infinite;
}
}
}
.swiper-slide-active {
.test-it {
width: 120%;
max-width: 120% !important;
left: 0 !important;
z-index: 1 !important;
height: 520px !important;
}
}
.swiper-slide-next {
.test-it {
.top-part {
i {
display: block !important;
}
}
width: 100%;
max-width: 100% !important;
left: -45px !important;
z-index: -1 !important;
height: 450px !important;
}
}
.swiper-slide-next,
.swiper-slide-prev,
.swiper-slide-active {
opacity: 1;
}
.swiper-next,
.swiper-prev {
width: 40px;
height: 40px;
line-height: 40px;
background: @whiteColor;
border-radius: 100%;
position: absolute;
bottom: 20px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
cursor: pointer;
text-align: center;
transition: @transition;
z-index: 3;
&:after {
font-family: Flaticon;
color: @secondaryColor;
transition: @transition;
}
&:hover {
background: @secondaryColor;
&:after {
color: @whiteColor;
}
}
}
.swiper-next {
left: 52%;
&:after {
content: "\f111";
}
}
.swiper-prev {
left: 59%;
&:after {
content: "\f110";
}
}
.pattern {
position: absolute;
left: 80px;
top: 80px;
pointer-events: none;
}
}
//contact box
.rs-contact-box{
text-align: left;
.address-item{
display: flex;
position: relative;
align-items: center;
margin-bottom: 30px;
&:last-child{
margin-bottom: 0 !important;
}
.address-icon{
display: inline-block;
position: relative;
background: @secondaryColor;
height: 70px;
width: 70px;
line-height: 70px;
border-radius: 100%;
text-align: center;
&:after{
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 70px;
height: 70px;
background: @secondaryColor;
border-radius: 50%;
opacity: 0;
visibility: hidden;
}
&:before{
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 70px;
height: 70px;
background: @secondaryColor;
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
opacity: 0;
visibility: hidden;
}
&:hover {
border-color: rgba(255,255,255,0.7);
}
i{
text-align: center;
color: #fff;
border-radius: 100%;
font-size: 30px;
position: relative;
line-height: 70px;
z-index: 9;
width: 100%;
vertical-align: middle;
margin-left: 0;
height: auto;
}
}
&:last-child{
.address-icon{
&:after{
display: none;
}
}
}
.address-text{
.contact-title{
margin-bottom: 1px;
font-weight: 500;
font-size: 20px;
margin-top: 6px;
}
a{
&:hover{
color: @primaryColor;
}
}
}
&:hover{
.address-icon{
&:after,
&:before{
opacity: 1;
visibility: visible;
}
}
}
&.vertical{
display: block;
text-align: center;
.address-text{
span.label{
display: block;
font-weight: 500;
font-size: 20px;
margin-top: 15px;
}
}
}
&.horizontal{
.address-icon{
margin-right: 20px;
}
.address-text > div{
display: flex;
align-items: center;
}
}
}
}
/** video css --------------------------
--------------------------------------*/
@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
.rs-video{
position: relative;
background-repeat: no-repeat !important;
background-size: cover !important;
padding: 100px 20px;
&.center{
.overly-border{
margin: 0 auto;
}
}
&.left{
.overly-border{
margin-left: 0;
margin-right: auto;
}
}
&.right{
.overly-border{
margin-left: auto;
margin-right: 0;
}
}
&.style1{
.video-desc{
top: 60px;
}
}
.video-desc{
z-index: 1;
font-size: 20px;
position: relative;
span{
display: block;
font-size: 22px;
font-weight: 400;
}
}
.overly-border{
border: 1px solid @primaryColor;
border-radius: 50%;
position: absolute;
width: 100px;
height: 100px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-content {
z-index: 10;
h4 {
margin-top: 40px;
margin-bottom: 0;
font-size: 30px;
color: #fff;
text-transform: uppercase;
}
}
&:hover{
.popup-videos{
animation-duration: 0.8s;
}
}
.popup-videos{
position: absolute;
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
line-height: 90px;
padding: 0;
margin: 0 auto;
left: 50%;
top: 50%;
z-index: 9;
text-align: center;
background: @primaryColor;
&:after{
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
transition: all 200ms;
}
&:before{
background: @primaryColor;
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
}
i {
text-indent: 5px;
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
font-size: 30px;
color: @primaryColor;
position: relative;
&:before{
color: #fff;
}
}
&:hover {
border-color: rgba(255,255,255,0.7);
}
span{
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 27px solid #fff;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
}
}
&:hover {
.overly-border {
&:before, &:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
}
&.style2{
.rs-icon-inner{
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 60px;
.rs-icon-btn{
margin-right: 0;
a{
display: block;
background: #ffffff;
color: @primaryColor;
padding: 8px 34px;
border-radius: 30px;
transition: 0.4s;
font-size: 16px;
position: relative;
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
z-index: 1;
overflow: hidden;
border: 3px solid #ffffff;
&:before{
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 0px;
height: 100%;
z-index: -1;
content: '';
background: @primaryColor;
border-radius: 30px;
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
&:hover{
background: @primaryColor;
color: #ffffff;
opacity: 0.9;
&:before{
left: 0%;
right: auto;
width: 100%;
}
}
}
}
.icon-area{
position: relative;
display: none;
left: -60px;
.overly-border{
width: 60px;
height: 60px;
}
.popup-videos{
width: 50px;
height: 50px;
line-height: 56px;
i{
font-size: 24px;
}
}
}
}
}
&.style3 {
.overly-border {
width: unset;
height: unset;
line-height: unset;
border: none;
top: 50%;
border-radius: 0;
.icon-area {
.popup-videos {
&.icon-type {
.fa {
text-indent: unset;
&.fa-play {
text-indent: 8px;
}
}
}
&.image-type {
width: 76px;
height: 76px;
line-height: 70px;
background: transparent;
img {
width: 100%;
height: auto;
}
&:after,
&:before {
display: none;
}
}
}
}
}
}
}
/** Counter up CSS ----------------------
----------------------------------------*/
.counter-top-area{
position: relative;
padding: 0;
.rs-counter-list{
.counter-icon{
display: inline-block;
i{
font-size: 50px;
color:#dcdcdc;
line-height: 60px;
transition: all 0.3s ease 0s;
}
}
.count-text{
.rs-counter{
font-size: 50px;
color: @primaryColor;
line-height: 60px;
display: inline-block;
transition: all 0.3s ease 0s;
}
.title{
font-size: 18px;
color: #666;
line-height: 18px;
transition: all 0.3s ease 0s;
}
}
}
&.style1{
text-align: center;
.count-number span{
padding: 10px 0px 10px 0px;
}
}
&.style2{
.rs-counter-list{
display: flex;
align-items: center;
.counter-icon{
display: inline-block;
padding-right: 15px;
}
}
}
&.style3{
.count-text{
display: flex;
align-items: flex-end;
.title{
position: relative;
bottom: 8px;
}
}
}
&.style4 {
padding: 20px 0 20px 20px;
position: relative;
.rs-counter-list {
position: relative;
z-index: 1;
}
&:after {
position: absolute;
content: '';
left: 0;
top: 0;
bottom: 0;
width: 70px;
background: @secondaryColor;
}
}
}
.counter-top-area.style2 .rs-counter-list .counter-icon{
position: relative;
&:after{
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 100%;
border: 1px solid #fee4cc;
bottom: 4px;
left: 4px;
}
}
/* Services CSS ----------------------
----------------------------------------*/
.elementor-widget-container{
&:hover{
.rs-addon-services.services-style2::before{
transform: scaleY(1);
}
}
}
.rs-addon-services {
text-align: center;
.services-part {
position: relative;
.services-icon {
display: inline-block;
padding: 5px;
font-size: 50px;
line-height: 50px;
color: @primaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
&:before{
margin: 0;
}
}
img {
max-width: unset;
width: 50px;
height: 50px;
}
&.grayscale {
img {
filter: gray;
-webkit-filter: grayscale(1);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.3s ease 0s;
&:hover {
filter: none;
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}
}
}
&:hover {
color: @secondaryColor;
}
&:after {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 90px;
height: 90px;
background: @primaryColor;
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
opacity: 0;
transition: all 0.3s ease 0s;
visibility: hidden;
}
}
.services-text {
padding: 10px 0 0;
position: relative;
.services-title {
position: relative;
.title {
margin: 0 0 10px;
a {
color: @titleColor;
&:hover {
color: @hoverColor;
}
}
&:before {
content: "01.";
font-size: 50px;
font-weight: bold;
color: @primaryColor;
position: absolute;
transition: all .3s ease 0s;
top: 0;
left: 0;
z-index: 9;
}
}
}
.services-txt {
margin: 0;
transition: 0.4s;
}
.services-btn-part {
margin: 15px 0 0;
.services-btn {
position: relative;
display: inline-block;
color: @secondaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
display: inline-block;
}
&:hover {
color: @primaryColor;
}
&.icon-after {
span {
float: left;
}
i {
margin-left: 10px;
}
}
&.icon-before {
span {
float: right;
}
i {
margin-right: 10px;
}
}
.border-right{
position: absolute;
width: 30px;
height: 1px;
background: @secondaryColor;
top: 50%;
transform: translateY(-50%);
right: 0px;
transition: 0.4s;
opacity: 0;
}
&:hover{
.border-right{
right: -40px;
opacity: 1;
}
}
}
}
}
&:after {
content: "";
width: 0;
height: 4px;
background: @primaryColor;
position: absolute;
transition: all .3s ease 0s;
bottom: 0;
left: 50%;
z-index: 9;
transform: translateX(-50%);
}
&:hover {
.services-icon {
color: @secondaryColor;
&:after {
opacity: 1;
visibility: visible;
}
}
.services-text {
.services-title {
.title {
color: @primaryColor;
transition: 0.4s;
a {
color: @primaryColor;
}
}
}
}
&:after {
width: 100%;
}
}
}
&.services-style2 {
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: @primaryColor;
transform: scaleY(0);
transition: all .3s ease 0s;
}
.services-part {
background: 0 0;
padding: 30px 0;
text-align: left;
position: relative;
z-index: 1;
&:hover{
.services-icon, .services-title .title, .services-txt{
color:#fff;
}
}
}
&:hover {
&:before {
transform: scaleY(1);
}
}
}
&.services-style3 {
position: relative;
.services-part {
border-bottom-width: 4px;
transition: all .3s ease 0s;
position: relative;
.services-icon {
width: 90px;
margin: 0 auto;
position: absolute;
left: 50%;
top: -45px;
transform: translateX(-50%);
color: #fff;
background: @primaryColor;
box-shadow: 0px 3px 36px rgba(0,0,0,.04);
transition: all .3s ease 0s;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 100%;
i {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
img {
width: 45px;
height: 45px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
}
&:hover {
.services-icon {
top: -35px;
}
}
.services-text{
padding: 90px 30px 50px
}
}
}
&.services-style4,
&.services-style7 {
.services-part {
display: flex;
}
}
&.services-style4 {
.services-icon {
&.enable_rect_shape {
border-top-left-radius: 30% 30%;
border-top-right-radius: 70% 30%;
border-bottom-right-radius: 70% 70%;
border-bottom-left-radius: 30% 70%;
}
}
}
&.services-style7{
.image_border_shape{
text-align: center;
.services-icon {
position: relative;
top: 3px;
}
}
}
&.services-style5{
position: relative;
overflow: hidden;
&.services-style5.service_shape_{
&:before,
&:after,
.services-part:before{
display: none;
}
}
.hover-img{
transform: scale(1);
}
.services-part {
position: relative;
.services-text{
padding: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.6);
height: 100%;
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.service-inner{
position: absolute;
width: 100%;
left: 0;
top: 51%;
transform: translateY(-50%);
padding: 20px;
}
.icon_top{
background: @secondaryColor;
display: inline-block;
margin-bottom: 20px;
padding: 15px;
border-radius: 50%;
img{
max-width: 50px;
}
}
.services-titles{
display: block;
}
.services-icon {
padding: 0;
img:not(.hover-img){
width: 100%;
height: auto;
}
}
.icon_image{
i{
width: 70px;
height: 70px;
line-height: 64px;
border: 3px solid #ffffff;
border-radius: 50%;
background: @secondaryColor;
color: #ffffff;
box-shadow: 0 0 30px #a79f9f;
font-size: 30px;
margin-bottom: 10px;
text-align: center;
}
}
.normarl-text-area{
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding-left: 30px;
transition: 0.5s;
position: absolute;
width: 100%;
bottom: 0;
right: 0;
.title{
margin-bottom: 0;
}
.icon-image{
background: @secondaryColor;
padding: 15px 20px;
}
.hover-img{
margin-bottom: 0;
border-radius: 0;
max-width: 42px;
}
}
}
&:hover{
.services-part {
.services-text{
visibility: visible;
opacity: 1;
}
.services-btn-part{
bottom: -80px;
opacity: 1;
visibility: visible;
}
.normarl-text-area{
opacity: 0;
visibility: hidden;
right: -100%;
}
}
}
}
&.services-style6{
.services-part {
position: relative;
.shape-image {
animation: move-y 2s alternate infinite;
-webkit-animation: move-y 2s alternate infinite;
position: relative;
width: unset;
height: unset;
position: absolute;
top: 40px;
right: 70px;
transition: all 0.3s ease 0s;
animation: none;
opacity: 0;
visibility: hidden;
}
.services-icon {
position: relative;
&:after{
content: '';
left: 70px;
top: 20px;
border-radius: 100%;
width: 60px;
height: 60px;
position: absolute;
background: @primaryColor;
display: block !important;
animation: none;
opacity: 1;
visibility: visible;
z-index: 2;
}
img{
position: relative;
z-index: 3;
}
&:before{
position: absolute;
content: '';
right: -30px;
top: -15px;
width: 60px;
height: 60px;
border: 1px dashed @primaryColor;
border-radius: 100%;
z-index: 1;
transition: all 0.3s ease 0s;
animation: spine 10s linear infinite;
-webkit-animation: spine 10s linear infinite;
}
&.icon_size_small{
&:after{
width: 40px;
height: 40px;
left: 55px;
}
&:before{
width: 40px;
height: 40px;
right: -25px;
top: -5px;
}
}
&.icon_size_big{
&:after{
width: 100px;
height: 100px;
left: 30px;
top: 30px;
}
&:before{
width: 112px;
height: 112px;
right: -15px;
top: -32px;
}
}
&.border-style-solid{
&:before{
border-style: solid;
}
}
}
}
&:hover{
.services-part {
.shape-image {
animation: move-y 2s alternate infinite;
-webkit-animation: move-y 2s alternate infinite;
}
.services-icon {
&:before{
opacity: 0;
transform: scale(0.85);
}
}
}
}
}
&.services-style8{
.services-icon{
border-radius: 2px;
margin-left: 11px;
margin-top: 11px;
transition: 0.4s;
}
&:hover{
.services-icon{
background-image: inherit !important;
}
}
}
&.services-style9{
.services-part {
.services-icon {
&.image {
overflow: hidden;
img {
width: 100%;
height: auto;
transition: all 0.5s;
}
}
}
.services-text {
.services-btn-part {
margin-top: 20px;
a.services-btn {
color: #102b3e;
span {
text-decoration: underline;
}
i {
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
opacity: 0;
visibility: hidden;
transition: all ease .3s;
}
&:hover {
color: #f2541b;
i {
-webkit-transform: translateX(10px) !important;
transform: translateX(10px) !important;
opacity: 1;
visibility: visible;
color: #f2541b;
}
}
}
}
}
&:hover {
.services-icon {
&.image {
img {
transform: scale(1.03);
}
}
}
}
}
}
&.services-style10 {
position: relative;
border-top: 3px solid #e1e1e1;
transition: @transition;
.serial_number {
z-index: 2;
position: relative;
display: inline-block;
margin-top: -35px;
position: relative;
top: -16px;
}
&.short-border,
&.long-border {
.services-text{
&:after{
position: absolute;
content: '';
left: 50%;
top: -20px;
height: 50%;
border: 1px dashed #e1e1e1;
z-index: -1;
}
}
}
&.long-border {
.services-text{
padding-top: 120px;
&:after {
height: 120px;
}
}
}
&.short-border {
.services-text{
padding-top: 60px;
&:after {
height: 60px;
}
}
}
}
&.services-style11{
overflow: hidden;
.serial_number{
-webkit-text-fill-color: white;
-webkit-text-stroke: 2px #FFF2F1;
transition: 0.4s;
}
.hover-shape-image{
position: absolute;
right: -100px;
bottom: -100px;
opacity: 0;
visibility: hidden;
transition: 0.4s;
}
.top_left{
top: -100px;
left: -100px;
right: auto;
bottom: auto;
}
.bottom_left{
top: auto;
right: auto;
left: -100px;
bottom: -100px;
}
&.rs_hover_shape_disable{
position: relative;
.services-part{
position: relative;
z-index: 9;
}
&:after{
position: absolute;
bottom: 0;
right: 0;
content: "";
opacity: 0;
visibility: hidden;
width: 0;
height: 0;
transition: 0.4s;
background-image: linear-gradient(140deg, #FD644F 15%, #F28E26 100%);
}
&:hover{
&:after{
width: 100%;
height: 100%;
opacity: 1;
visibility: visible;
}
}
&:before{
position: absolute;
content: "";
transition: 0.4s;
width: 0;
height: 0;
border-bottom: 100px solid #FDF7F4;
border-left: 100px solid transparent;
bottom: 0;
right: 0;
}
}
&:hover{
.hover-shape-image{
bottom: 0;
right: 0;
opacity: 1;
visibility: visible;
}
.top_left{
top: 0;
left: 0;
}
.bottom_left{
left: 0;
bottom: 0;
}
.serial_number{
-webkit-text-fill-color: transparent;
}
}
}
&.services-style1{
.services-icon{
.hover-img{
transform: scale(1);
position: absolute;
right: -25px;
top: -20px;
opacity: 0.07;
}
img.main-img{
width: unset;
height: unset;
max-width: 100%;
transform: scale(1);
transition: 0.4s;
}
}
.rs-button-style2{
position: absolute;
right: 50px;
bottom: 46px;
i{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
background: #f8e6e6;
text-align: center;
color: #032e42;
&:hover{
background: linear-gradient(to bottom right, #003b40, #FFB703);
color: #fff;
}
}
}
.services-part {
overflow: hidden;
.services-text{
.service-inner.button_inner{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
}
.services-btn-part{
margin: 0;
}
}
}
&:hover{
img.main-img{
transform: scale(1.1);
}
}
}
&.rs-shape_image-hover{
overflow: hidden;
}
}
.wave-wrap {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
.wave-inner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
&.waveone {
animation: move_wave 25s linear infinite;
background-size: 50% 132px;
background-image: url(assets/images/shape/waveone.png);
}
&.wavetwo {
animation: move_wave 30s linear infinite;
background-size: 50% 132px;
background-image: url(assets/images/shape/wavetwo.png);
}
}
&.bgone {
z-index: 2;
opacity: 0.60;
}
&.bgtwo {
z-index: 1;
opacity: 0.70;
}
}
}
.rs-amimation-shape{
height: 300px;
}
.rs-apps-screenshots{
.slick-list.draggable{
padding: 100px 0 !important;
}
.grid-item{
position: relative;
img{
box-shadow: 0 0 10px rgba(0,0,0,0.08);
border-radius: 30px;
}
&.slick-center{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
z-index: 3;
img{
box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
}
}
}
.hover_effect > .elementor-column-gap-default .elementor-widget-container .rs-addon-services{
transition: 0.3s;
}
.hover_effect > .elementor-column-gap-default .elementor-widget-container:hover .services-part .shape-image,
.hover_effect > .elementor-column-gap-default:not(:hover) .elementor-widget-container .box_shadow_enable .services-part .shape-image{
opacity: 1;
visibility: visible;
}
.hover_effect > .elementor-column-gap-default .elementor-widget-container .rs-addon-services:hover,
.hover_effect > .elementor-column-gap-default:not(:hover) .elementor-widget-container .box_shadow_enable{
box-shadow: 3px 7px 25px 0px rgba(0, 0, 0, 0.05);
}
.rs-animation-shape-image{
position: relative;
.pattern{
position: absolute;
top: 0;
left: -200px;
}
.middle-image{
position: relative;
z-index: 1;
}
.shape{
position: absolute;
bottom: 0px;
right: 0px;
}
}
/* Number CSS ----------------------
----------------------------------------*/
.rs-addon-number {
.number-part {
position: relative;
text-align: center;
.number-icon {
display: inline-block;
padding: 5px;
font-size: 50px;
color: @primaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
}
img {
max-width: unset;
width: 50px;
height: 50px;
}
&.grayscale {
img {
filter: gray;
-webkit-filter: grayscale(1);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.3s ease 0s;
&:hover {
filter: none;
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}
}
}
&:hover {
color: @secondaryColor;
}
&:after {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 90px;
height: 90px;
background: @primaryColor;
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
opacity: 0;
transition: all 0.3s ease 0s;
visibility: hidden;
}
}
.number-text {
position: relative;
.number-area{
display: inline-block;
width: 50px;
line-height: 50px;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
text-align: center;
&:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: rotate(45deg);
transition: all 0.3s ease 0s;
}
}
.number-prefix{
display: block;
font-size: 50px;
font-weight: 700;
line-height: 1.4;
color: @titleColor;
}
.number-title {
position: relative;
.title {
font-size: 24px;
margin: 0 0 10px;
color: @titleColor;
a {
color: @titleColor;
}
}
}
.number-txt {
margin: 0;
}
.number-btn-part {
margin: 15px 0 0;
.number-btn {
position: relative;
display: inline-block;
color: @secondaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
}
&:hover {
color: @primaryColor;
}
&.icon-after {
span {
float: left;
}
i {
margin-left: 10px;
}
}
&.icon-before {
span {
float: right;
}
i {
margin-right: 10px;
}
}
}
}
}
&:after {
content: "";
width: 0;
height: 4px;
background: @primaryColor;
position: absolute;
transition: all .3s ease 0s;
bottom: 0;
left: 50%;
z-index: 9;
transform: translateX(-50%);
}
&:hover {
.number-icon {
color: @secondaryColor;
&:after {
opacity: 1;
visibility: visible;
}
}
.number-text {
.number-title {
.title {
color: @primaryColor;
a {
color: @primaryColor;
}
}
}
}
&:after {
width: 100%;
}
}
}
&.number-style2 {
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: @primaryColor;
transform: scaleY(0);
transition: all .3s ease 0s;
}
.number-part {
background: 0 0;
text-align: left;
position: relative;
z-index: 1;
}
&:hover {
&:before {
transform: scaleY(1);
}
}
}
&.number-style3 {
.number-part {
border-bottom-width: 4px;
transition: all .3s ease 0s;
position: relative;
.number-icon {
width: 90px;
margin: 0 auto;
position: absolute;
left: 50%;
top: -45px;
transform: translateX(-50%);
background: #fff;
box-shadow: 0px 3px 36px rgba(0,0,0,.04);
transition: all .3s ease 0s;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 100%;
i {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
img {
width: 45px;
height: 45px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
}
&:hover {
.number-icon {
top: -35px;
}
}
}
}
&.number-style4 {
.number-part {
display: inline-flex;
}
}
}
/* Icon Box CSS ----------------------
----------------------------------------*/
.rs-iconbox-area {
.box-inner {
position: relative;
transition: 0.4s;
overflow: hidden;
.rs-badge{
position: absolute;
background: @primaryColor;
padding: 3px 8px 0;
color: #ffffff;
top: 5px;
left: 5px;
z-index: 1;
transform: rotate(0deg);
}
.icon-area {
display: inline-block;
color: @primaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
font-size: 50px;
}
}
.text-area {
padding: 10px 0 0;
position: relative;
.iconbox-title {
position: relative;
.title {
font-size: 20px;
margin: 0;
color: @titleColor;
font-weight: 500;
line-height: 1.5;
a {
text-decoration: none !important;
color: @titleColor;
&:hover {
color: @hoverColor;
}
}
&:before {
content: "01.";
font-size: 50px;
font-weight: bold;
color: @primaryColor;
position: absolute;
transition: all .3s ease 0s;
top: 0;
left: 0;
z-index: 9;
}
}
}
.services-txt{
font-size: 16px;
margin: 0;
}
}
.services-btn-part {
margin: 15px 0 0;
.services-btn {
position: relative;
display: inline-block;
color: @secondaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
}
&:hover {
color: @primaryColor;
}
&.icon-after {
span {
float: left;
}
i {
margin-left: 10px;
transition: 0.4s;
}
}
&.icon-before {
span {
float: right;
}
i {
margin-right: 10px;
}
}
}
}
}
}
/* RS Static Products ----------------------
----------------------------------------*/
.rs-static-products {
.box-inner {
position: relative;
padding: 40px 25px 30px;
box-shadow: 0 0 38px 0 rgba(0,0,0,.12);
transition: 0.4s;
overflow: hidden;
&:hover{
box-shadow: 0 8px 38px 0 rgba(0,0,0,.20);
}
.text-area {
padding: 30px 0 0;
position: relative;
.product-title {
position: relative;
.title {
font-size: 20px;
margin: 0 0 10px;
color: @titleColor;
font-weight: 500;
line-height: 1.5;
a {
color: @titleColor;
&:hover {
color: @hoverColor;
}
}
}
}
.product-des{
font-size: 16px;
margin: 0;
}
}
.rs-product-button {
margin: 15px 0 0;
.product-button {
position: relative;
display: inline-block;
color: @secondaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
}
&:hover {
color: @primaryColor;
}
&.icon-after {
span {
float: left;
}
i {
margin-left: 10px;
transition: 0.4s
}
}
&.icon-before {
span {
float: right;
}
i {
margin-right: 10px;
}
}
}
}
}
}
/* Tooltip CSS ----------------------
----------------------------------------*/
.rs-tooltip-area {
.box-inner {
position: relative;
padding: 50px 15px 40px;
box-shadow: 0 0 38px 0 rgba(0,0,0,.12);
transition: 0.4s;
cursor: pointer;
.rs-tooltip{
position: absolute;
width: max-content;
background-color: #000;
color: #ffffff;
border-radius: 3px;
padding: 2px 10px;
opacity: 0;
visibility: hidden;
z-index: 10;
max-width: 270px;
text-decoration: none;
&:before{
content: "";
position: absolute;
border-width: 5px;
border-style: solid;
margin-top: 0;
top: 100%;
left: calc(50% - 5px);
}
&.bottom,
&.top{
left: 50%;
transform: translateX(-50%);
}
&.top{
bottom: 110%;
margin-bottom: 10px;
&:before{
border-color: #000 transparent transparent transparent;
}
}
&.left,
&.right{
top: 50%;
transform: translateY(-50%);
}
&.right{
left: 110%;
margin-left: 10px;
&:before{
left: auto;
right: 100%;
top: 50%;
border-color: transparent #000 transparent transparent;
transform: translateY(-50%);
}
}
&.left{
left: auto;
right: 110%;
top: 50%;
transform: translateY(-50%);
margin-right: 10px;
&:before{
right: auto;
left: 100%;
top: 50%;
border-color: transparent transparent transparent #000;
transform: translateY(-50%);
}
}
&.bottom{
bottom: auto;
top: 110%;
margin-top: 10px;
&:before{
top: auto;
bottom: 100%;
left: 50%;
border-color: transparent transparent #000 transparent;
transform: translateX(-50%);
}
}
}
.icon-area {
display: inline-block;
color: @primaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
font-size: 50px;
}
}
.text-area {
padding: 10px 0 0;
position: relative;
.iconbox-title {
position: relative;
.title {
font-size: 20px;
margin: 0;
color: @titleColor;
font-weight: 500;
line-height: 1.5;
a {
text-decoration: none !important;
color: @titleColor;
&:hover {
color: @hoverColor;
}
}
}
}
.rs-tooltip-text{
font-size: 16px;
margin: 0;
}
}
&:hover{
box-shadow: 0 8px 38px 0 rgba(0,0,0,.20);
.rs-tooltip{
opacity: 1;
visibility: visible;
&.top{
bottom: 100%;
}
&.right{
left: 100%;
}
&.bottom{
top: 100%;
}
&.left{
right: 100%;
}
}
}
}
}
/* ------------------------------------
Gallery CSS
---------------------------------------*/
.rs-galleys{
.file-list-image,
.galley-img{
position: relative;
margin-bottom: 30px;
overflow: hidden;
.p-zoom,
.zoom-icon{
position: absolute;
top: 45%;
left: 50%;
z-index: 1;
transform:translate(-50%, -50%);
opacity: 1;
visibility: hidden;
background: transparent !important;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
transition: all 0.3s ease-in-out;
i{
&:before{
font-size: 22px;
}
}
&:hover{
opacity: 0.8 !important;
}
}
.gallery-titles{
position: absolute;
left: 43.5%;
top: 110%;
margin: 0;
color: #fff;
transition: all .8s ease;
opacity: 0;
visibility: hidden;
z-index: 1;
text-align: center;
font-size: 20px;
line-height: 28px!important;
}
&:before{
content: "";
position: absolute;
background: #000;
top: 0;
left: 0;
z-index: 1;
width: 0%;
height: 100%;
opacity: 0.6;
transition: all 0.3s ease-in-out;
}
&.right{
&:before{
left: auto;
right: 0;
}
}
&.top{
&:before{
top: 0;
width: 100%;
height: 0;
}
}
&.bottom{
&:before{
top: auto;
bottom: 0;
width: 100%;
height: 0;
}
}
&:hover{
&:before{
width: 100%;
}
&.bottom,
&.top{
&:before{
height: 100%;
}
}
.p-zoom,
.zoom-icon{
visibility: visible;
opacity: 1;
color: #fff;
}
.gallery-titles{
top: 55%;
opacity: 1;
visibility: visible;
}
&.style2{
&:before{
top: 20px;
left: 20px;
width: 90% !important;
height: 85% !important;
}
}
}
}
.no-gutters{
.file-list-image{
margin-bottom: 0;
}
}
}
.mfp-close{
opacity: 0.9;
}
#rs-agency-since{
max-width: 280px;
}
/* -----------------------
Team Member
--------------------------*/
.rs-testimonial-nav-style2,
.rs-addon-slider,
.team-slider-default,
.rs-testimonial-dots-style2 {
margin: 0;
.team-item {
padding: 0 15px;
}
.slick-dots {
line-height: 10px;
bottom: -60px;
z-index: 3;
li {
display: inline-block;
width: unset;
height: unset;
margin: 0 5px;
button {
width: 14px;
height: 8px;
display: inline-block;
font-size: unset;
line-height: unset;
padding: unset;
background: @secondaryColor;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
&:before {
display: none;
}
&:hover {
background: @secondaryColor;
opacity: 1;
width: 50px;
}
}
&.slick-active {
button {
width: 40px;
background: @secondaryColor;
opacity: 1;
}
}
}
}
.slick-next,
.slick-prev {
width: 50px;
height: 50px;
line-height: 65px;
background: @secondaryColor;
position: absolute;
border-radius: 0;
top: 35%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: 0.6s ease all;
z-index: 9;
&:before {
line-height: 40px;
color: @titleColor;
font-family: flaticon !important;
opacity: 1;
}
&:hover {
opacity: 1;
background: @titleColor;
&:before {
color: #fff;
}
}
}
.slick-prev {
left: 30px;
&:before{
content: "\f111";
}
}
.slick-next {
right: 30px;
&:before{
content: "\f110";
}
}
&:hover {
.slick-prev,
.slick-next {
opacity: 1;
visibility: visible;
}
}
}
.team-slider-default{
.slick-next,
.slick-prev {
top: auto;
transform: translateY(0);
bottom: 0;
}
.slick-prev {
left: 30px;
}
.slick-next {
right: 0;
}
}
.rs-testimonial-nav-style2 .slick-dots{
bottom: -115px;
}
.rsaddon-unique-slider .rs-testimonial-dots-style2{
.slick-arrow{
opacity: 1;
visibility: visible;
}
.slick-prev{
left: -30px;
}
.slick-next{
right: -30px;
}
}
// Slider Style 1
.team-grid-style1,
.team-slider-style1 {
.team-content,
.team-inner-wrap{
border-radius: 0 0 5px 5px;
}
.team-item {
overflow: visible;
.social-icons1 {
text-align: center;
margin-top: 14px;
a{
i{
color: #fff;
font-size: 15px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
border-radius: 50%;
margin: 0;
}
}
}
.image-wrap{
position: relative;
overflow: hidden;
img{
border-radius: 5px 5px 0 0;
}
.social-icons1{
position: absolute;
right: 0;
bottom: -180px;
width: 50px;
background: #013aa8;
padding: 12px 0;
opacity: 1;
visibility: visible;
transition: @transition;
a{
padding: 0;
background: transparent;
i{
background: transparent;
}
&:hover{
i{
color: #EB003D;
background: transparent;
}
}
}
}
}
:hover{
.image-wrap{
.social-icons1{
right: 0;
width: 50px;
opacity: 1;
visibility: visible;
}
}
}
.team-content{
text-align: left;
margin: 0;
padding: 20px 35px 17px;
box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1);
background: @primaryColor;
margin-bottom: 30px;
position: unset;
opacity: 1;
position: relative;
h3.team-name{
font-weight: 600;
font-size: 20px;
margin-bottom: 0px;
text-transform: capitalize;
a{ text-decoration: none;
color: #ffffff;
&:hover{
color: #c4c4c4;
}
}
}
span.team-title{
font-size: 15px;
color: #ffffff;
font-weight: 600;
}
}
.social-icons{
display: none;
}
}
}
.team-slider-style1{
.team-item {
.team-content {
margin: 0;
}
}
}
.team-grid-style1,
.team-slider-style1{
.team-content{
display: flex;
align-items: center;
.plus_team{
.social-icons1{
position: absolute;
right: 0;
bottom:100%;
width: 50px;
background: @primaryColor;
padding: 12px 0;
opacity: 0;
visibility: hidden;
transition: @transition;
z-index: -1;
transform: scaleY(0);
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
a{
padding: 0;
background: transparent;
i{
background: transparent;
}
&:hover{
i{
color: #EB003D;
background: transparent;
}
}
}
}
&:hover{
.social-icons1{
visibility: visible;
opacity: 1;
z-index: 2;
transform: scaleY(1);
}
}
}
.plus_team i.fi-rr-share{
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
right: 35px;
font-weight: 700;
font-size: 18px;
cursor: pointer;
transition: 500ms ease;
background: #EB003D;
color: #fff;
width: 45px;
height: 45px;
border-radius: 45px;
line-height: 50px;
text-align: center;
&:hover{
}
}
}
}
// Slider Style 2
.team-grid-style2,
.team-slider-style2 {
.team-inner-wrap {
position: relative;
margin-bottom: 35px;
overflow: hidden;
a{
text-decoration: none;
}
.team-img-sec{
position: relative;
}
.wrap-text{
box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1);
padding: 0 40px 12px;
background: #fff;
.team-desc{
margin-bottom: 0;
}
}
.team-content {
width: 100%;
transition: all 0.5s ease 0s;
position: relative;
padding-bottom: 0;
z-index: 1;
margin-bottom: 0;
background: #010d14;
border-radius: 3px 3px 0 0;
padding: 8px 0 14px;
margin-top: -35px;
position: absolute;
bottom: -50%;
left: 50%;
transform: translateX(-50%);
width: 250px;
transition: 0.4s;
text-align: center;
.team-name {
margin-top: 0 !important;
line-height: 28px !important;
a{
text-decoration: none;
position: relative;
margin-bottom: 0;
font-size: 20px;
text-transform: capitalize;
z-index: 111;
}
}
.social-icons {
a {
i {
height: 25px;
width: 25px;
}
}
}
.social-icons,
.team-name{
color: #ffffff;
a {
text-decoration: none;
color: #ffffff;
}
}
.team-title{
color: #ffffff;
font-weight: 500;
line-height: 1.4;
display: block;
margin: 10px 0 5px;
}
.social-icons{
padding-top: 2px;
a{
padding: 0 3px;
}
}
.nolink{
pointer-events: none;
}
.cat-doctor{
font-size: 14px;
a{ text-decoration: none;
color: #ffffff;
text-transform: uppercase;
}
}
.team-name{
margin: 18px 0 0;
font-weight: 500;
}
.team-title {
color: #eee;
font-size: 13px;
font-weight: 400;
padding: 0;
display: block;
text-transform: uppercase;
a{
color: #eee;
pointer-events: none;
}
}
}
&:hover{
.team-content {
bottom: 0;
}
.team-img-sec{
&:before{
height:100%;
}
}
}
}
}
.icon-button{
a{
background: @primaryColor;
color: #fff;
padding: 3px 17px;
display: inline-block;
font-size: 20px;
margin-bottom: 25px;
border-radius: 18px;
&:hover{
color: #fff;
background: @secondaryColor;
}
i{
&:before{
font-size: inherit;
}
}
}
}
.blogfull{
.icon-button{
a{
margin-bottom: 0px;
}
}
}
.rs-blog-grid .blog-item .blog_style_4.blog-content .blog-btn-part .blog-btn{
display: flex;
align-items: center;
}
.team-grid-style3,
.team-slider-style3{
.team-item{
.team-img-sec{
position: relative;
&:before{
background: rgba(0, 0, 0, 0.7);
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
content: "";
z-index: 10;
opacity: 0;
visibility: hidden;
transition: 0.4s;
border-radius: 5px;
}
}
img{
position: relative;
z-index: 1;
border-radius: 5px;
}
.team-content{
display: block;
z-index: 11;
color: #fff;
padding: 15px;
transition: @transition;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
text-align: center;
.author-text{
position: absolute;
left: 0;
top: 42%;
transition: 0.4s;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
.team-title,
.team-name a{
color: #fff;
}
.team-title,
.team-name{
position: relative;
opacity: 0;
transition: all .45s cubic-bezier(.23,.88,.34,.99);
}
.team-name{
margin-bottom: 0;
font-size: 20px;
padding: 0 10px;
display: block;
top: -10px;
}
.team-title{
font-size: 14px;
padding: 3px 10px;
opacity: 0;
top: -15px;
}
.social-icons{
left: 0;
top: 60%;
transform: translateY(-50%);
text-align: center;
width: 100%;
position: absolute;
opacity: 0;
visibility: hidden;
transition: 0.4s;
margin :0;
padding: 0;
list-style: none;
li{
display: inline-block;
position: relative;
transition: 0.4s;
margin: 0 8px;
}
.facebook{
bottom: -20px;
}
.google{
bottom: -20px;
}
.twitter{
bottom: -15px;
}
a{
color: @secondaryColor;
font-size: 16px;
display: block;
i{
width: 30px;
height: 30px;
border-radius: 30px;
background: #fff;
line-height: 30px;
}
&:hover{
opacity: 0.8;
}
}
}
}
&:hover{
.team-img-sec{
&:before{
opacity: 1;
visibility: visible;
}
}
.team-content{
.author-text,
.social-icons{
opacity: 1;
visibility: visible;
}
.team-title,
.team-name{
opacity: 1;
visibility: visible;
top: 0;
transition-delay: .33s;
}
.social-icons{
li{
bottom: 0;
}
}
}
}
}
}
.team-grid-style3 .team-img:after{
top: 0;
}
.team-grid-style3 .team-img:before{
bottom: 0;
}
.team-grid-style4,
.team-slider-style4 {
.owl-stage-outer {
overflow-y: visible;
}
.team-item {
margin-bottom: 125px;
position: relative;
overflow: visible;
&:before {
display: none;
}
.team-content {
color: #f8560c;
background: #fff;
padding: 20px;
text-align: center;
z-index: 9;
position: absolute;
z-index: 1;
opacity: 1;
width: unset;
height: unset;
display: inline-block;
top: unset;
bottom: -85px;
padding: 20px 20px 25px;
-webkit-box-shadow: 10px 17px 38px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 17px 38px 0 rgba(0, 0, 0, 0.1);
box-shadow: 10px 17px 38px 0 rgba(0, 0, 0, 0.1);
left: 50%;
max-width: 310px;
transform: translateX(-50%);
width: 95%;
.team-name {
display: block;
font-size: 22px;
margin-bottom: 0px;
text-transform: capitalize;
font-weight: 600;
a {
color: @primaryColor;
}
}
.team-title {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
padding-top: 5px;
display: block;
font-family: 'Poppins', sans-serif;
color: #0a0a0a;
}
.team-desc {
font-size: 14px;
margin-bottom: 0;
color: #777;
position: relative;
z-index: 1;
max-height: 0;
opacity: 0;
line-height: 24px;
-webkit-transition: all 0.6s, max-height 0.5s;
-o-transition: all 0.6s, max-height 0.5s;
-moz-transition: all 0.6s, max-height 0.5s;
transition: all 0.6s, max-height 0.5s;
overflow: hidden;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
&:before {
content: '';
position: absolute;
z-index: 1;
background: @primaryColor;
top: 0;
left: 50%;
width: 50px;
height: 2px;
margin-left: -25px;
}
}
.social-icons {
text-align: center;
margin-top: 12px;
a {
display: inline-block;
i {
color: @primaryColor;
font-size: 15px;
width: 35px;
height: 35px;
line-height: 35px;
background: transparent;
text-align: center;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
border-radius: 50%;
margin: 0;
}
}
}
}
&:before {
background: transparent;
}
&:hover {
.team-content {
opacity: 1;
top: unset;
.team-desc {
position: relative;
max-height: 400px;
opacity: 1;
text-align: center;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.4s, max-height 1.5s;
-o-transition: all 0.4s, max-height 1.5s;
-moz-transition: all 0.4s, max-height 1.5s;
transition: all 0.4s, max-height 1.5s;
padding-top: 18px;
margin-top: 8px;
}
}
}
}
}
.team-grid-style5,
.team-slider-style5 {
.team-inner-wrap {
position: relative;
overflow: hidden;
padding-bottom: 100px;
background: #fff;
.image-wrap {
img {
-webkit-transition: all .7s;
transition: all .7s;
}
}
.team-content {
height: 100px;
width: 100%;
top: unset;
bottom: 0;
opacity: 1;
position: absolute;
padding: 15px 20px;
color: #444;
text-align: center;
overflow: hidden;
background: #fff;
-webkit-transition: .3s all ease;
-moz-transition: .3s all ease;
transition: .3s all ease;
.member-desc {
margin: 10px 0;
.team-name {
font-size: 20px;
font-weight: 700;
line-height: 30px;
margin: 0;
text-transform: uppercase;
a {
color: #222;
&:hover{
opacity: 0.8;
}
}
}
.team-title {
font-size: 15px;
text-transform: capitalize;
color: #222;
float: none;
text-align: center;
font-weight: 400;
}
}
.team-desc{
display: none;
}
.social-icons {
bottom: -100px !important;
transition: all .3s ease 0s;
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
z-index: 100;
left: 50%;
opacity: 0;
transform: translateX(-50%) scale(.5);
-webkit-transition: .4s all ease;
transition: .4s all ease;
a {
display: block;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0;
border: none;
text-align: center;
color: #fff;
display: inline-block;
transition: all .3s ease 0s;
background: 0 0 !important;
margin-right: 8px;
i {
transition: all .3s ease 0s;
}
}
}
&:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3px;
background: @primaryColor;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
transition: .4s all ease;
left: 0;
}
&:hover {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3px;
background: @primaryColor;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
transition: .4s all ease;
left: 0;
}
}
&:hover {
.image-wrap {
img {
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
.team-content {
opacity: 1;
width: 100%;
visibility: visible;
transform: translate(0,0);
top: unset;
bottom: 0;
height: 140px;
background: #222;
&:before{
background: #222;
}
.member-desc {
.team-name {
a {
color: #fff;
}
}
.team-title {
color: #fff;
}
&:before{
background: #222;
}
}
.social-icons {
bottom: 25px !important;
opacity: 1;
transform: translateX(-50%) scale(1);
}
}
}
}
}
.team-slider-style6{
img{
border-radius: 5px 5px 0 0;
}
.team-content{
text-align: center;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
padding: 20px 15px;
.team-name{
margin-bottom: 2px;
font-size: 20px;
font-weight: 700;
a{
color: @titleColor;
&:hover{
color: @linkColor;
}
}
}
.team-title{
font-size: 16px;
font-weight: 400;
}
}
}
/*-----------------------------------------------
08. App Screenshots Section Css
-----------------------------------------------*/
.rs-appscreenshot {
.swiper-container {
max-width: 1325px;
margin: 0 45px 0 auto;
padding: 30px 20px 80px 0;
position: relative;
.intro {
font-size: 134px;
font-weight: 600;
color: @primaryColor;
opacity: 0.06;
position: absolute;
right: 18px;
top: 25px;
text-transform: uppercase;
line-height: 1;
}
.swiper-wrapper {
align-items: center;
cursor: grab;
.swiper-slide {
img {
border-radius: 30px;
max-width: 260px;
height: auto;
margin: 0 auto;
box-shadow: 0 0 44px 0 rgba(0,0,0,0.1);
}
}
&:active,
&:focus {
cursor: grabbing;
}
}
.swiper-slide-active {
margin-right: 70px !important;
img {
width: 100%;
max-width: 100% !important;
}
}
.swiper-pagination {
bottom: 40px;
.swiper-pagination-bullet {
margin: 0 7px;
height: 8px;
transition: @transition;
&.swiper-pagination-bullet-active {
width: 20px;
border-radius: 5px;
cursor: not-allowed;
background: @secondaryColor;
}
}
}
}
.pattern {
position: absolute;
left: 60px;
top: 50%;
transform: translateY(-50%);
}
.circle-shape {
width: 137px;
height: 137px;
border-radius: 100%;
background: #ffa1a1;
position: absolute;
top: 40px;
left: 450px;
}
}
/*// Slider Style 6*/
.team-grid-style6,
.team-slider-style7{
.team-item {
overflow: visible;
.image-wrap{
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
img{
border-radius: 50%;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
}
.image-inner{
overflow: hidden;
border-radius: 50%;
}
.social-icons {
text-align: center;
margin-top: 0;
a {
display: inline-block;
i {
color: #4a4a4a;
width: 35px;
height: 35px;
line-height: 35px;
background: transparent;
text-align: center;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
border-radius: 50%;
margin: 0;
}
}
}
.team-content{
text-align: center;
margin: 0;
padding: 25px 20px 25px;
margin-bottom: 30px;
position: unset;
opacity: 1;
h3.team-name{
font-weight: 600;
font-size: 20px;
margin-bottom: 0px;
text-transform: capitalize;
a{ text-decoration: none;
color: @titleColor;
&:hover{
color: @secondaryColor;
}
}
}
span.team-title{
font-size: 15px;
color: #666;
}
}
&:hover{
.image-wrap img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
}
}
.team-slider-style7 .rs-addon-slider .slick-dots{
bottom: 0;
}
.rs-testimonial .rs-addon-slider .slick-dots{
bottom: -25px;
}
//single team member
.rselements-single-member{
.single-member-title{
h2{
margin-bottom: 7px;
}
span{
font-size: 18px;
}
}
.contact-info{
ul{
list-style: none;
margin:20px 0;
li{
i{
margin-right: 7px;
}
}
}
}
.team-elements-social{
margin:0;
list-style: none;
display: flex;
li{
list-style: none;
margin-right: 10px;
}
}
}
.rselements-porfolio-details{
.project-img{
padding-bottom: 30px;
}
.ps-informations{
background: #f9f9f9;
padding: 40px;
ul{
list-style: none;
margin:0;
}
li{
margin-bottom: 10px;
span{
font-weight: bold;
min-width: 150px;
display: inline-block;
}
}
}
}
#rs-header.header-style7 .toolbar-area .toolbar-contact{
position: relative;
z-index: 10;
}
/** Blog Style CSS --------------
-----------------------------------*/
.rs-blog-grid {
.blog-item {
overflow: visible;
margin-bottom: 30px;
outline: none;
.blog-inner-wrap {
box-shadow: 0 6px 25px rgba(12,89,219,.14);
padding: 15px;
transition: 0.3s;
background-color: #ffffff;
}
.image-wrap{
position: relative;
overflow: hidden;
img{
transition: all 0.5s ease 0s;
transform: scale(1);
}
.author-avatar{
position: absolute;
bottom: -16px;
left: 30px;
img{
border-radius: 50%;
}
}
.cat_list{
position: absolute;
z-index: 11;
bottom: 20px;
right: 20px;
z-index: 10;
ul{
margin: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
border-radius: 30px;
color: #ffffff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03228f+0,03228f+0,03228f+26,4e95ed+100,2989d8+100,207cca+100,0b70e1+100 */
background: #03228f; /* Old browsers */
background: -moz-linear-gradient(left, #03228f 0%, #03228f 0%, #03228f 26%, #4e95ed 100%, #2989d8 100%, #207cca 100%, #0b70e1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #03228f 0%,#03228f 0%,#03228f 26%,#4e95ed 100%,#2989d8 100%,#207cca 100%,#0b70e1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #03228f 0%,#03228f 0%,#03228f 26%,#4e95ed 100%,#2989d8 100%,#207cca 100%,#0b70e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03228f', endColorstr='#0b70e1',GradientType=1 ); /* IE6-9 */
transition: 0.4s;
font-size: 14px;
font-weight: 500;
padding: 6px 20px;
display: block;
&:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03228f+0,03228f+0,03228f+26,4e95ed+100,2989d8+100,207cca+100,0b70e1+100 */
background: #03228f; /* Old browsers */
background: -moz-linear-gradient(right, #03228f 0%, #03228f 0%, #03228f 26%, #4e95ed 100%, #2989d8 100%, #207cca 100%, #0b70e1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(right, #03228f 0%,#03228f 0%,#03228f 26%,#4e95ed 100%,#2989d8 100%,#207cca 100%,#0b70e1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to left, #03228f 0%,#03228f 0%,#03228f 26%,#4e95ed 100%,#2989d8 100%,#207cca 100%,#0b70e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03228f', endColorstr='#0b70e1',GradientType=1 ); /* IE6-9 */
}
}
}
}
}
}
&.blog_meta_style2{
.image-wrap{
position: relative;
.blog-meta{
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
background: @primaryColor;
color: #fff;
padding: 8px 14px 7px;
border-radius: 5px;
}
}
}
.blog-content{
margin: 0;
padding: 20px 15px 15px;
background: #fff;
position: unset;
opacity: 1;
h3.blog-name{
font-weight: 600;
font-size: 20px;
margin-bottom: 8px;
line-height: 1.4;
a{
text-decoration: none;
color: @titleColor;
}
}
.blog-meta{
margin-bottom: 18px;
}
p{
margin: 0 0 18px;
}
.blog-btn-part {
margin: 15px 0 0;
.blog-btn {
position: relative;
display: inline-block;
color: @primaryColor;
transition: all ease .3s;
i {
transition: all ease .3s;
}
&:hover {
color: @primaryColor;
}
&.icon-after {
span {
float: left;
}
}
.btn-txt{
position: relative;
z-index: 3;
}
&.icon-before {
span {
float: right;
}
i {
margin-right: 10px;
}
}
&:after{
position: absolute;
content: "";
width: 30px;
height: 30px;
border-radius: 30px;
right: 9%;
top: 9px;
transition: 0.4s;
z-index: 1;
}
&:hover{
&:after{
right:70%;
}
}
}
}
.btn_borer_yes{
a{
position: relative;
&:after{
content: "";
position: absolute;
left: 0;
bottom: -4px;
height: 2px;
width: 40px;
background-image: linear-gradient(90deg, #E85E5E 0%, #f2295b 100%);
transition: 0.4s;
}
}
&:hover{
a{
position: relative;
&:after{
width: 100%;
}
}
}
}
}
&.transparent{
.blog-inner-wrap{
position: relative;
overflow: hidden;
box-shadow: none;
.image-wrap{
position: relative;
img{
transition: all 0.8s ease 0s;
}
&:before{
opacity: 1;
background: #f5feff;
content: "";
height: 100%;
bottom: 0;
left: 0;
right: 0;
position: absolute;
width: 100%;
z-index: 1;
transition: all 0.7s ease 0s;
}
}
.blog-content{
margin-bottom: 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 10;
background: transparent;
color: #fff;
.blog-meta{
display: block;
margin-bottom: 15px;
li{
margin: 0;
}
.blog_month,
.blog_day{
display: block;
margin: 0;
}
.blog_day{
font-size: 24px;
font-weight: 700;
line-height: 15px;
}
.blog_month{
font-weight: 500;
font-size: 14px;
padding-top: 5px;
}
.date{
margin-bottom: 15px;
}
}
}
&:hover{
.image-wrap {
img{
-webkit-transform: scale3d(1.1, 1.1, 1.1);
-moz-transform: scale3d(1.1, 1.1, 1.1);
-ms-transform: scale3d(1.1, 1.1, 1.1);
-o-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
}
}
}
}
&.transparent_2{
.blog-inner-wrap{
.blog-footer{
}
position: relative;
overflow: hidden;
.image-wrap{
position: relative;
img{
transition: all 0.8s ease 0s;
}
}
.blog-content{
margin-bottom: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 25px;
width: 86%;
z-index: 1;
background: transparent;
border-radius: 5px;
}
&:hover{
transform: translateY(0px);
.image-wrap {
img{
filter: grayscale(0);
-webkit-transform: scale(1.1, 1.1, 1.1);
-moz-transform: scale(1.1, 1.1, 1.1);
-ms-transform: scale(1.1, 1.1, 1.1);
-o-transform: scale(1.1, 1.1, 1.1);
transform: scale(1.1, 1.1, 1.1);
}
}
}
}
}
&.blog_style_2.slick-slide{
position: relative;
.blog-content{
position: relative;
h3.blog-name{
line-height: 1.4 !important;
margin-bottom: 20px;
}
.blog-btn-part2{
margin-bottom: 0;
a{
opacity: 1;
box-shadow: none;
overflow: hidden;
position: relative;
padding: 9px 25px;
background: #FFB703;
display: inline-block;
.custom-blog-btn{
box-shadow: none;
opacity: 1;
color: #fff;
position: relative;
z-index: 2;
i{
margin-left: 7px;
position: relative;
top: 2px;
}
}
}
}
}
.blog-meta{
position: absolute;
top: -46px;
left: 0;
width: 100%;
background: #ffbf66;
text-align: center;
justify-content: center;
padding: 10px 0 4px;
margin: 0;
.date{
font-size: 15px;
font-weight: 400;
}
}
.blog-inner-wrap:hover{
transform: inherit;
}
&:hover{
&:after{
border-color: @secondaryColor;
}
&:before{
background: @secondaryColor;
}
.blog-inner-wrap:before{
width: 100%;
}
}
}
&.blog_style_4{
.image-wrap .date{
display: none
}
.btm-rs .blog-footer .blog-meta{
width: 100%;
}
}
&:hover{
.image-wrap{
img{
transform: scale(1.1);
}
}
}
}
.rs-pagination-area {
padding-top: 0px;
clear: both;
text-align: center;
margin-top: 20px;
.pagination{
padding: 0;
margin: 0;
}
.nav-links {
display: inline-block;
border: 1px solid #f9f9f9;
padding: 11px 0px;
border-radius: 3px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
background: #fff;
span.current{
padding: 2px 20px 0 21px;
line-height: 23px;
background: transparent;
font-size: 18px;
text-decoration: none;
transition: @transition;
text-align: center;
background: transparent;
color: @primaryColor;
display: inline-block;
vertical-align: top;
border-right: 1px solid #E6E6E6;
}
> * {
border-radius: 0px;
margin-left: 0px;
margin-right: 0px;
}
a {
padding: 2px 20px 0 14px;
line-height: 23px;
font-size: 18px;
text-decoration: none;
transition: @transition;
text-align: center;
background: transparent;
opacity: .96;
display: inline-block;
vertical-align: top;
border-right: 1px solid #E6E6E6;
}
span.current,
a:hover{
color: @primaryColor;
}
a.next.page-numbers{
background: none !important;
border-right: 0;
}
}
}
.rs-addon-slider{
.blog-item{
padding: 0 15px;
&.blog_style_3{
}
}
}
&.rsaddon-unique-slider{
.default{
.image-wrap{
.date{
display: inline-block;
background: #FCA719;
padding: 12px 20px 8px;
color: #fff;
position: absolute;
right: 26px;
bottom: 24px;
border-radius: 0 10px 0 10px;
i:before{
font-size: 15px;
position: relative;
top: 1px;
margin-right: 2px;
}
}
.date_style2{
text-align: center;
transform: inherit;
left: 0;
padding: 18px 32px 8px;
background: #ffd100;
.blog_day{
display: block;
font-size: 34px;
line-height: 1;
}
}
}
}
}
}
.wpcf7 input[type="file"] {
cursor: pointer;
margin-bottom: 30px;
}
.rsaddon-unique-slider{
.rs-addon-slider {
.slick-list{
padding-top: 50px;
}
}
}
.team-slider-default{
.team-item{
padding: 0;
}
display: flex;
align-items: center;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.slider-for{
-webkit-box-flex: 0;
-ms-flex: 0 0 64.8%;
flex: 0 0 64.8%;
max-width: 64.8%;
}
.rs-slide-nav{
-webkit-box-flex: 0;
-ms-flex: 0 0 35.2%;
flex: 0 0 35.2%;
max-width: 35.2%;
padding-left:30px;
margin-top: -50px;
}
.team-content{
padding-top: 16px;
.team-name{
margin-bottom: 0;
}
}
div img{
border-radius: 4px;
}
.image-list{
img{
margin-bottom: 30px;
cursor: pointer;
}
}
}
.rs-services-slider {
.rs-service-slider{
.service-title {
.title {
transition: all 0.3s;
}
}
.read__more{
margin-bottom: 0;
a{
opacity: 1;
box-shadow: none;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 47px;
padding: 0 30px;
transition: all 0.85s;
.custom-blog-btn{
transform: translateX(-10px);
display: inline-block;
box-shadow: none;
opacity: 1;
color: #0a0a0a;
transition: all 0.85s;
i{
margin-left: 7px;
position: relative;
&:before{
margin: 0;
}
}
}
&:before{
transition: all 0.85s;
content: "";
width: 50px;
height: 100%;
background: #b90a0a;
position: absolute;
top: 0;
left: 0;
}
&:hover{
.custom-blog-btn{
transform: translateX(0px);
mix-blend-mode: normal;
color: #fff;
}
&:before{
width: 100%;
}
}
}
}
}
&.services-style3 {
.rs-service-slider{
.service-img {
a {
display: flex;
align-items: center;
justify-content: center;
}
}
.read__more{
a{
padding: 16px 35px;
line-height: normal;
transition: all 0.3s;
.custom-blog-btn {
transform: unset;
transition: all 0.3s;
i {
margin-left: 2px;
transition: all 0.3s;
&:before {
font-size: 14px;
transition: all 0.3s;
}
}
}
&:before{
display: none;
}
&:hover {
.custom-blog-btn {
i {
margin-left: 7px;
}
}
}
}
}
}
}
}
/** Pricing Table CSS --------------
-----------------------------------*/
.elementor-widget-rsprice{
.elementor-widget-container{
border-radius: 10px;
box-shadow: 0 0.2rem 2.8rem rgba(36,36,36,.1);
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
overflow: hidden;
.rs-pricing-table-badge {
position: absolute;
top: 0;
padding: 10px 10px;
background-color: @primaryColor;
color: #fff;
line-height: 1;
z-index: 1;
}
.rs-pricing-table-title{
padding-top: 10px;
margin-bottom: 20px;
color: @titleColor;
font-weight: 400;
font-size: 24px;
line-height: 30px;
}
.rs-pricing-table-price{
margin-bottom: 30px;
.rs-pricing-table-price-tag {
margin-bottom: .5rem;
color: #242424;
font-weight: 700;
font-size: 60px;
line-height: normal;
.rs-pricing-table-currency {
font-size: 24px;
}
.rs-pricing-table-price-text{
font-weight: 700;
}
}
.rs-pricing-table-period {
color: #8c8c8c;
font-size: 16px;
display: block;
}
&.display-inline2{
.rs-pricing-table-price-tag {
line-height: 0.66;
display: flex;
justify-content: center;
}
.rs-pricing-table-period {
display: flex;
align-items: flex-end;
}
}
&.display-inline {
.rs-pricing-table-period {
position: relative;
padding-left: 20px;
display: inline-block;
&:before {
position: absolute;
content: "";
height: 20px;
width: 2px;
position: absolute;
left: 0;
transform: rotate(20deg) translateY(-50%);
top: 50%;
background: #f2f2f2;
}
}
}
}
.rs-pricing-table-body{
margin-bottom: 35px;
.rs-pricing-table-features-title {
margin-top: 0;
margin-bottom: 10px;
font-weight: 700;
font-size: 16px;
}
.rs-pricing-table-features-list{
margin: 0;
padding: 0;
list-style: none;
li{
margin-bottom: 8px;
font-size: 16px;
&:last-child{
border: none !important;
}
i{
margin-right:10px;
min-width: 15px;
font-size: 16px;
}
}
&.right_position{
li{
overflow: hidden;
i{
float: right;
margin-right: 0;
}
}
}
}
}
.rs-pricing-table-btn{
display: inline-block;
padding: 10px 20px;
border-radius: 40px;
background-color: @primaryColor;
color: #fff;
text-decoration: none;
font-size: 16px;
-webkit-transition: all .3s;
transition: all .3s;
position: relative;
}
.rs-pricing-icon{
position: relative;
i {
position: relative;
transition: @transition;
text-align: center;
}
}
}
}
/** Portfolio CSS ---------------------
--------------------------------------*/
.portfolio-filter{
margin-bottom: 20px;
button {
padding: 5px 20px;
border-radius: 3px;
display: inline-block;
border-radius: 3px !important;
font-weight: 500;
&.active {
box-shadow: 0 0 30px #eee;
color: #ff5421;
&:hover {
color: #ff5421;
}
}
&:hover {
color: @titleColor;
}
+ button {
margin-left: 20px;
}
}
}
// Portfolio Style1
.rs-portfolio-style1 {
.portfolio-item {
position: relative;
overflow: hidden;
.portfolio-content {
position: absolute;
width: 100%;
height: 100%;
top: 30%;
left: 0;
z-index: 10;
padding: 25px;
opacity: 0;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease 0s;
}
.p-category {
color: #fff;
margin-bottom: 0;
margin-top: 8px;
a {
color: #fff;
&:hover {
color: rgba(255, 255, 255, 0.7);
}
}
}
.content-details{
position: absolute;
width: 100%;
left: 30px;
bottom: 25px;
z-index: 1;
}
}
.portfolio-img img {
width: 100%;
}
.p-link {
transition: all 0.3s ease 0s;
display: inline-block;
font-size: 19px;
width: 52px;
line-height: 54px;
height: 52px;
text-align: center;
border-radius: 50%;
background: #fff;
i {
margin-left: 2px;
}
&:hover {
background-color: @primaryColor;
color: #fff;
}
}
.p-title {
font-size: 20px;
line-height: normal;
margin-top: 15px;
color: #fff;
margin-bottom: 0;
a {
color: #fff;
&:hover {
color: rgba(255, 255, 255, 0.7);
}
}
}
.p-desc {
font-size: 16px;
color: rgba(255,255,255,0.7);
margin-bottom: 0;
margin-top: 10px;
}
&:hover {
.portfolio-content {
opacity: 1;
top: 0;
&:before{
opacity: 1;
}
}
}
}
}
.rs-portfolio-style2{
.portfolio-item{
position: relative;
overflow: hidden;
z-index: 1;
margin-bottom: 30px;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: @secondaryColor;
opacity: 0;
visibility: hidden;
transition: @transition;
}
.portfolio-content{
.p-icon,
.p-title{
position: absolute;
z-index: 11;
margin: 0;
}
.p-icon{
visibility: hidden;
transition: @transition;
}
.p-icon{
top: 25px;
right: 0px;
text-align: right;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: @primaryColor;
border-radius: 50%;
transition: all ease 800ms;
-moz-transition: all ease 800ms;
-webkit-transition: all ease 800ms;
opacity: 0;
visibility: hidden;
color: #ffffff;
i,
i:before{
font-size: 15px;
}
}
.p-title{
font-size: 20px;
font-weight: 600;
bottom: 0px;
left: 40px;
padding-right: 10px;
transition: all ease 700ms;
-moz-transition: all ease 700ms;
-webkit-transition: all ease 700ms;
opacity: 0;
visibility: hidden;
.p-category{
display: block;
line-height: 1.4;
}
span{
font-size: 16px;
font-weight: 400;
}
span,
a{
color: #ffffff;
}
a:hover{
color: @primaryColor;
}
}
}
&:hover{
.portfolio-content .p-title{
bottom: 35px;
}
.portfolio-content .p-icon,
.portfolio-content .p-title{
opacity: 1;
visibility: visible;
}
&:before{
opacity: 1;
visibility: visible;
}
.portfolio-content .p-icon{
right: 25px;
}
}
}
}
.elementor-image-gallery{
.gallery-item .gallery-icon a{
position: relative;
display: block;
overflow: hidden;
&:after{
content: "";
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
height: 100%;
background: #010d14;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
&:before{
content: "+";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: 0.4s;
color: #fff;
z-index: 2;
font-size: 50px;
font-weight: 200;
}
&:hover{
&:after{
opacity: 0.75;
visibility: visible;
bottom: 0;
}
&:before{
visibility: visible;
opacity: 1;
}
}
}
}
.rs-portfolio-style3 {
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 0;
.portfolio-img {
position: relative;
z-index: 1;
overflow: hidden;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
transition: all 0.4s ease 0s;
opacity: 1;
z-index: 10;
}
img {
width: 100%;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease;
border-radius: 0px;
}
.p-link {
display: none !important;
top: 20px;
right: 20px;
display: inline-block;
font-size: 32px;
color: #ffffff;
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
opacity: 0;
z-index: 10;
i {
margin-left: 2px;
display: none;
}
}
}
.portfolio-content {
position: relative;
padding: 15px 20px;
opacity: 1;
z-index: 1;
bottom: 0;
left: 0;
right: 0;
text-align: left;
width: 100%;
border: 1px solid #ebebeb;
border-top: 0;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
transition: all .3s ease 0s;
}
.portfolio-inner{
position: absolute;
bottom: 24px;
width: 100%;
}
a {
color: @secondaryColor;
}
h4 {
margin-top: 6px;
font-size: 20px;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
font-weight: 500 !important;
line-height: 30px !important;
a {
&:hover {
color: @secondaryColor;
}
}
}
p {
margin-bottom: 0;
color: @secondaryColor;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
}
}
&:hover {
.portfolio-content {
opacity: 1;
h3 {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
p {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
&:before{
opacity: 1;
}
}
.portfolio-img {
&:before {
opacity: 1;
}
img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.p-link {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
}
}
}
.rs-portfolio-style4{
.rs-portfolio4{
padding-bottom: 80px !important;
.portfolio-item{
overflow: visible;
.portfolio-img{
overflow: hidden;
img{
border-radius: 0;
}
}
.portfolio-inner{
background: #fff;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
position: absolute;
bottom: -60px;
padding: 34px 30px 26px;
transition: all 0.5s ease-in-out;
z-index: 10;
left: 30px;
right: 30px;
border-radius: 0;
.p-title{
top: 0;
transition: all 0.8s ease-in-out;
left: 0;
z-index: 11;
width: 100%;
margin-bottom: 0;
font-size: 20px;
font-weight: 800;
line-height: 30px;
text-transform: capitalize;
position: relative;
font-size: 22px;
max-width: 220px;
a{
color: #032e42;
}
}
.p-category{
top: 0;
bottom: 0;
left: 0;
position: relative;
transition: all 0.8s ease-in-out;
margin-bottom: 8px;
text-transform: uppercase;
color: #666666;
}
.p-icon{
position: absolute;
right: 30px;
bottom: 30px;
z-index: 11;
i{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
background: #f8e6e6;
text-align: center;
color: #032e42;
transition: 0.4s;
&:before{
margin: 0;
}
&:hover{
background: linear-gradient(to bottom right, #003b40, #FFB703);
color: #fff;
}
}
}
}
&:hover{
.portfolio-inner{
bottom: -50px;
}
}
}
}
}
.rs-portfolio-style5{
.rs-portfolio4{
.portfolio-item{
overflow: visible;
.portfolio-img{
overflow: hidden;
}
.portfolio-inner{
background: #fff;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
position: absolute;
bottom: -60px;
left: 0;
transition: all 0.5s ease-in-out;
z-index: 10;
text-align: center;
width: 100%;
.p-title{
top: 12px;
text-align: center;
transition: all 0.8s ease-in-out;
left: 0;
z-index: 11;
width: 100%;
padding: 0 20px;
margin-bottom: 0;
font-size: 20px;
font-weight: 700;
line-height: 30px;
text-transform: capitalize;
position: relative;
font-size: 20px;
font-weight: 600;
a,
a:hover{
color: @titleColor;
}
}
.p-category{
top: 0;
bottom: 0;
left: 0;
text-align: center;
position: relative;
transition: all 0.8s ease-in-out;
opacity: 0;
margin-bottom: 0;
}
}
&:hover{
.portfolio-inner{
bottom: -50px;
.p-title{
top: 0;
}
.p-category{
opacity: 1;
}
}
}
}
}
}
.rs-portfolio-slider{
&.slider-style-5{
.rs-portfolio4 {
.portfolio-item{
.portfolio-inner{
bottom: -200px;
padding: 30px 0;
opacity: 0;
visibility: hidden;
max-width: 370px;
left: 50%;
transform: translateX(-50%);
.p-title{
top: 0;
margin-bottom: 5px;
}
.p-category{
opacity: 1;
}
}
img{
transform: scale(1);
opacity: 0.20;
}
}
&.slick-current{
.portfolio-item{
img{
opacity: 1;
}
}
.portfolio-inner{
bottom: 0;
opacity: 1;
visibility: visible;
}
}
}
.rs-addon-sliders .slick-next,
.rs-addon-sliders .slick-prev {
position: absolute;
-webkit-transform: inherit;
transform: inherit;
transition: 0.6s ease all;
z-index: 2;
opacity: 1;
visibility: visible;
&:before{
font-family: Flaticon;
font-size: 24px;
color: #111111;
margin-left: 0;
opacity: 1;
transition: 0.3s;
}
&:hover{
&:before{
color: @secondaryColor;
}
}
}
.rs-addon-sliders .slick-prev{
left: 24%;
&:before{
content: "\f111";
}
}
.rs-addon-sliders .slick-next{
right: 24%;
&:before{
content: "\f110";
}
}
.rs-addon-sliders .slick-dots {
bottom: -35px;
}
}
&.slider-style-6{
.portfolio-item {
> img{
transition: 0.8s;
}
.portfolio-content{
position: static;
opacity: 1;
visibility: visible;
text-align: center;
padding: 0;
.p-title{
text-align: left;
padding-top: 24px;
i{
position: relative;
transition: 0.4s;
left: 0;
}
&:hover{
i{
left: 10px;
}
}
.p-category{
display: block;
}
.p-category a{
font-size: 16px;
}
}
&:before{
display: none;
}
}
}
}
}
i.custom-icon,
.p-icon i{
font-style: normal;
}
body i.custom-icon{
font-size: 28px;
display: inline-block;
}
body .rs-portfolio-style2 .portfolio-item .portfolio-content .p-icon i.custom-icon,
body .rs-portfolio-style2 .portfolio-item .portfolio-content .p-icon i.custom-icon:before{
font-size: 28px;
}
/* Button CSS -----------------
-----------------------------*/
.rs-view-btn{
a{
color: @titleColor;
position: relative;
outline: none;
font-weight: 600;
&:hover{
color:@titleColor;
}
}
.rs-btn.rs-btnblack .rs_btn__text span::before,
.rs-btn.rs-btnblack .rs_btn__text span::after {
content: '';
position: absolute;
height: 0;
width: 2px;
background-color: #333;
-webkit-transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
}
.rs-btn.rs-btnblack .rs_btn__text span::after {
right: 0;
top: 0;
-webkit-transition: height 0.15s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: height 0.15s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack:hover::before, a:hover
.rs-btn.rs-btnblack::before {
width: 0;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.rs-btn.rs-btnblack::before {
content: '';
position: absolute;
top: 50%;
right: -2.4em;
height: 1px;
width: 3em;
background-color: #333;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.rs-btn.rs-btnblack .rs_btn__text::before {
top: 0;
left: 0;
-webkit-transition: width 0.15s 0.45s cubic-bezier(0.4, 0, 0.2, 1);
transition: width 0.15s 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack .rs_btn__text::before, .rs-btn.rs-btnblack .rs_btn__text::after {
content: '';
position: absolute;
height: 2px;
width: 0;
background-color: #333;
}
.rs-btn.rs-btnblack .rs_btn__text span::before {
left: 0;
bottom: 0;
-webkit-transition: height 0.15s 0 cubic-bezier(0.4, 0, 0.2, 1);
transition: height 0.15s 0 cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack .rs_btn__text::after {
bottom: 0;
right: 0;
-webkit-transition: width 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: width 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack:hover .rs_btn__text::before,
a:hover
.rs-btn.rs-btnblack .rs_btn__text::before {
width: 100%;
max-width: 100%;
-webkit-transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack:hover .rs_btn__text::after,
a:hover
.rs-btn.rs-btnblack .rs_btn__text::after {
width: 100%;
-webkit-transition: width 0.15s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: width 0.15s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack:hover .rs_btn__text span::before,
a:hover
.rs-btn.rs-btnblack .rs_btn__text span::before {
left: 0;
height: 100%;
-webkit-transition: height 0.15s 0.45s cubic-bezier(0.4, 0, 0.2, 1);
transition: height 0.15s 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack:hover .rs_btn__text span::after,
a:hover
.rs-btn.rs-btnblack .rs_btn__text span::after {
right: 0;
height: 100%;
-webkit-transition: height 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: height 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-btn.rs-btnblack .rs_btn__text {
position: relative;
padding: 14px 32px;
line-height: 1.5;
display: inline-block;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.rs-btn.rs-btnblack:hover .rs_btn__text,
a:hover
.rs-btn.rs-btnblack .rs_btn__text {
-webkit-transform: translateX(2.15em);
transform: translateX(2.15em);
-webkit-transition: width 1s ease, -webkit-transform 0.5s ease;
transition: width 1s ease, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, width 1s ease;
transition: transform 0.5s ease, width 1s ease, -webkit-transform 0.5s ease;
}
}
.rs-btn{
&.style5{
.rs_button{
position: relative;
&:before{
position: absolute;
content: "";
transition: 0.4s;
width: 30px;
height: 30px;
border-radius: 30px;
right: 15%;
top: 13px;
transition: 0.4s;
z-index: 3;
background: #930606;
}
span{
position: relative;
z-index: 9;
}
&:hover{
&:before{
right: 65%;
}
}
}
}
}
.rs_button_style5{
position: relative;
&:before{
position: absolute;
content: "";
transition: 0.4s;
width: 30px;
height: 30px;
border-radius: 30px;
right: 15%;
top: 14px;
transition: 0.4s;
z-index: 30;
background: #930606;
}
span{
position: relative;
z-index: 31;
}
&:hover{
&:before{
right: 65%;
}
}
}
/*Logo CSS-----------------
--------------------------*/
.rs-logo-grid{
.rs-grid-figure{
.logo-img {
overflow: hidden;
}
.logo-title {
overflow: hidden;
.title {
margin: 0;
}
}
.logo-desc {
overflow: hidden;
.description {
margin: 0;
}
}
}
}
/*CTA CSS-----------------
--------------------------*/
.rs-cta {
width: 100%;
display: inline-flex;
align-items: center;
.cta-content {
float: left;
width: 80%;
text-align: left;
order: unset;
.cta-title {
h3.title {
margin: 0 0 10px;
}
}
.cta-text {
.desc {
margin: 0;
}
}
}
.rs-btn {
width: 20%;
float: right;
text-align: right;
order: unset;
.readon {
line-height: 1;
color: #fff;
background-color: @primaryColor;
padding: 15px 35px;
font-size: 17px;
border-radius: 0;
&:hover{
background:@secondaryColor;
}
i {
margin: 0;
transform: translateX(5px);
transition: all ease .3s;
}
}
}
}
/*---------Testimonial CSS---------
-----------------------------------*/
.rs-testimonial{
p{
margin: 0 0 15px;
position: relative;
}
.image-wrap{
img{
height: 65px;
width: 65px;
border-radius: 50%;
position:relative;
}
}
.testimonial-item{
position: relative;
&.center{
.image-wrap img{
margin: auto;
}
}
.item-content{
span img{
z-index: 9;
}
&.bubble{
position: relative;
&:after{
top: 100%;
left: 15%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: @primaryColor;
border-width: 12px;
margin-left: -30px;
z-index: 1;
}
span i{
z-index: 1;
}
}
}
.testimonial-information{
padding-left: 15px;
position: relative;
.ratings{
img{
width: 100px;
}
}
.testimonial-name{
color: #000000;
font-size: 20px;
font-weight: 500;
}
.testimonial-title{
color:#878787;
}
}
.testimonial-content{
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
&.inline_yes{
.testimonial-content{
display: flex;
justify-content: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
.testimonial-information{
padding: 0 0 0 25px;
text-align: left;
.testimonial-title{
padding-bottom: 10px;
display: block;
}
}
}
&.left{
.testimonial-content{
justify-content: flex-start;
}
}
}
&.inline_no{
.testimonial-content{
display: block;
.image-wrap{
position: relative;
}
.testimonial-information{
padding-left: 0;
}
}
}
}
.rs-addon-slider {
&.sliders-restimon3 {
.testimonial-items {
.inrs {
display: flex;
align-items: center;
vertical-align: middle;
border-radius: 3px;
background: @whiteColor;
box-shadow: 0 0 25px rgba(0,0,0,0.06);
margin: 40px 40px 20px 100px;
padding: 50px 30px 45px 50px;
.testimonial-contents {
.image-wrap {
img {
height: 320px;
max-width: 320px;
width: 320px;
margin-left: -150px;
margin-top: -24px;
}
}
}
.item-content {
padding-left: 45px;
.testimonial-informations {
margin-top: 4px;
}
}
}
}
.slick-next,
.slick-prev {
border: none;
background: linear-gradient(90deg, #03228f 10%, #0e73e4 100%);
width: 65px;
&:before {
color: #fff;
line-height: 52px;
opacity: 1;
}
&:hover {
background: linear-gradient(0deg, #03228f 10%, #0e73e4 100%);
&:before {
color: #fff;
opacity: 1;
}
}
}
.slick-prev {
left: -11%;
}
.slick-next {
right: -7%;
}
}
}
}
.rs-testimonial--right{
.testimonial-content{
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.rs-testimonial{
.item-content{
&.bubble{
position: relative;
&:after{
left: 94% !important;
z-index: 1;
}
span i{
z-index: 1;
}
}
}
}
.testimonial-information{
padding-right: 15px;
}
}
.rs-testimonial--center{
.testimonial-content{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.rs-testimonial{
.item-content{
&.bubble{
position: relative;
&:after{
left: 55%;
z-index: 1;
}
span i{
z-index: 1;
}
}
}
}
.testimonial-information{
padding-top: 15px;
}
}
// .rs-testimonial-nav-style2 {
// margin: -16px auto 0;
// max-width: 410px;
// .slick-track{
// padding: 38px 0 30px;
// display: flex;
// align-items: center;
// justify-content: center;
// }
// .item {
// text-align: center;
// transition: 0.4s;
// .testimonial-name,
// .testimonial-title{
// display: none;
// }
// img{
// margin: 0 auto;
// width: 70px;
// height: 70px;
// border-radius: 50%;
// cursor: pointer;
// transition: 0.4s;
// }
// .ball-pattern{
// opacity: 0;
// visibility: hidden;
// }
// &.slick-center{
// .ball-pattern{
// opacity: 1;
// visibility: visible;
// position: absolute;
// left: 36px;
// top: 0;
// width: 100px;
// height: 100px;
// border-radius: 100%;
// z-index: -1;
// &:after,
// &:before {
// position: absolute;
// content: '';
// border-radius: 100%;
// }
// &:after {
// left: 0;
// bottom: -10px;
// width: 41px;
// height: 41px;
// background: @secondaryColor;
// }
// &:before {
// right: 0;
// top: -5px;
// width: 27px;
// height: 27px;
// background: @primaryColor;
// }
// }
// .testimonial-name,
// .testimonial-title{
// display: block;
// }
// }
// &.slick-current+{
// .testimonial-name,
// .testimonial-title{
// display: block;
// }
// img{
// transform: scale(1.2);
// position: relative;
// z-index: 9;
// }
// }
// }
// .item{
// position: relative;
// top: 18px;
// &.slick-center{
// top: 0;
// }
// }
// }
.rs-testimonial-nav-style2 {
max-width: 210px;
margin: 0 auto;
.item {
text-align: center;
padding-top: 10px;
.testimonial-name,
.testimonial-title{
display: none;
}
img{
margin: 0 auto;
width: 70px;
height: 70px;
border-radius: 50%;
cursor: pointer;
transition: 0.4s;
}
&.slick-center{
.testimonial-name,
.testimonial-title{
display: block;
}
img{
transform:scale(1.2);
}
.author-inner{
min-width: 180px;
padding-top: 20px;
margin-left: -55px;
}
}
}
}
.slider-gap-15 .slick-list{
padding-top: 10px;
}
.rs-testimonial-dots-style2{
.slick-slide{
opacity: 0;
.ratings{
position: relative;
z-index: 1;
img{
margin: 0 auto;
max-width: 120px;
}
}
&.slick-active{
opacity: 1;
}
&.slick-center{
opacity: 1;
visibility: visible;
z-index: 9;
}
}
}
/*Flip Box*/
.rs-flip-box {
.rs-flip-box-inner {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.rs-flip-box-wrap {
position: relative;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000px;
perspective: 1000px;
}
.front-part,
.back-part {
top: 0;
right: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-align: center;
height: 300px;
background-color: transparent;
background-position: center;
background-clip: padding-box;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transition: -webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275);
transition: -webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275);
transition: transform .6s cubic-bezier(.2, .85, .4, 1.275);
transition: transform .6s cubic-bezier(.2, .85, .4, 1.275),
-webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275);
&:before {
position: absolute;
top: 0;
left: 0;
z-index: -9;
width: 100%;
height: 100%;
background-color: transparent;
content: "";
}
}
.front-part {
position: relative;
bottom: 0;
z-index: 10;
padding: 30px;
border-radius: 5px;
.front-content-part {
.front-icon-part {
margin-bottom: 10px;
span {
display: inline-block;
text-align: center;
color: @whiteColor;
font-size: 30px;
line-height: 1;
img {
width: 60px;
height: 60px;
}
}
}
.front-title-part {
margin-bottom: 10px;
.front-title {
margin: 0;
font-weight: bold;
font-size: 20px;
line-height: 1.5;
color: @whiteColor;
}
}
.front-desc-part {
.front-desc {
margin-bottom: 0;
font-size: 16px;
color: @whiteColor;
}
}
.front-btn-part {
.front-btn {
display: inline-block;
line-height: 1;
i {
transition: @transition;
}
}
}
}
}
.back-part {
position: absolute;
z-index: -1;
padding: 30px;
border-radius: 5px;
background-color: #562dd4;
.back-content-part {
.back-icon-part {
display: inline-block;
margin-bottom: 20px;
text-align: center;
.back-img {
display: inline-block;
}
span {
display: inline-block;
text-align: center;
img {
width: 60px;
height: 60px;
}
}
}
.back-title-part {
margin-bottom: 10px;
.back-title {
margin: 0;
font-weight: bold;
font-size: 20px;
line-height: 1.5;
}
}
.back-desc-part {
.back-desc {
margin-bottom: 0;
font-size: 16px;
}
}
.back-btn-part {
.back-btn {
display: inline-block;
line-height: 1;
padding: 10px 25px;
color: @titleColor;
background: @whiteColor;
i {
transition: @transition;
}
&.icon-after {
span {
float: left;
}
i {
margin-left: 10px;
}
}
&.icon-before {
span {
float: right;
}
i {
margin-right: 10px;
}
}
&:hover {
background: #1f1c51;
color: @whiteColor;
}
}
}
}
}
.front-content-part,
.back-content-part {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
transition: all .9s ease 0s;
}
&.rs-flip-right {
.front-part {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.back-part {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.back-content-part {
right: 15px;
}
&:hover {
.back-part {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.front-part {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.back-content-part {
right: 0;
}
}
}
&.rs-flip-left {
.front-part {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.back-part {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.back-content-part {
left: 15px;
}
&:hover {
.front-part {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.back-part {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.back-content-part {
left: 0;
}
}
}
&.rs-flip-up {
.front-part {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
.back-part {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.back-content-part {
top: 15px;
}
&:hover {
.front-part {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.back-part {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
.back-content-part {
top: 0;
}
}
}
&.rs-flip-down {
.front-part {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
.back-part {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.back-content-part {
bottom: 15px;
}
&:hover {
.front-part {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.back-part {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
.back-content-part {
bottom: 0;
}
}
}
&:hover {
.back-part {
z-index: 1;
}
.front-part {
z-index: -1;
}
}
}
&:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: " ";
font-size: 0;
}
}
/******* RS Tab CSS **********
-----------------------------*/
.rstab-main{
ul.nav{
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
&.bubble{
li{
a.active{
position: relative;
&:after{
top: 100%;
left: 15%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: @primaryColor;
border-width: 12px;
margin-left: -30px;
}
}
}
}
li{
a{
background: #f1f1f1;
padding: 10px;
display: inline-block;
align-items: center;
justify-content: center;
position: relative;
top: 1px;
&.active{
background:@primaryColor;
color: #fff;
}
}
&:first-child{
margin-left: 0 !important;
}
&:last-child{
margin-right: 0 !important;
}
a:hover{
background:@primaryColor;
}
}
&.icon_top{
li{
a,
a img,
a i,{
display: block;
}
}
}
}
.tab-content{
background: #f9f9f9;
padding: 10px;
p{
&:last-child{
margin: 0;
}
}
}
&.vertical{
display: flex;
ul.nav{
margin: 0 20px 0 0;
display: block;
&.bubble{
li{
a.active{
position: relative;
&:after{
top: 100%;
left: auto;
right: -24px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: @primaryColor;
border-width: 12px;
margin-left: -30px;
}
}
}
}
}
}
&.vertical_2{
display: flex;
align-items: center;
ul.nav{
display: block;
width: 33.333333%;
order: 2;
&.bubble{
li{
a.active{
position: relative;
&:after{
top: 100%;
left: auto;
right: -24px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: @primaryColor;
border-width: 12px;
margin-left: -30px;
}
}
}
}
li{
a{
display: block;
p{
-webkit-transition: all 0.5s, max-height 0.5s;
-o-transition: all 0.5s, max-height 0.5s;
-moz-transition: all 0.5s, max-height 1.5s;
transition: all 0.5s, max-height 0.5s;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
opacity: 0;
height: 0;
margin: 0;
font-size: 16px;
line-height: 26px;
font-weight: 400;
}
&.active{
P{
padding-top: 4px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
visibility: visible;
height: auto;
}
}
}
}
}
.tab-content{
order: 1;
padding: 0;
width: 66.666667%;
box-shadow: none;
.tab-image {
flex: 0 0 100%;
position: relative;
img {
width: 100%;
padding: 0;
border-radius: 3px;
}
.rs-videos {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.animate-border {
a {
display: inline-block;
text-align: center;
position: relative;
transition: @transition;
width: 70px;
height: 70px;
background: @primaryColor;
border-color: @primaryColor;
color: #fff;
border-radius: 50%;
i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
&.fa-play {
padding-left: 3px;
}
}
&:after,
&:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: transparent;
display: block;
border: 1px solid @primaryColor;
border-radius: 50%;
animation: pulse-border 1300ms ease-out infinite;
transition: @transition;
}
&:after {
width: 85%;
height: 85%;
}
&:before {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
.tab-pane.active {
animation: slide-down 2s ease-out;
}
&.no_item_menu{
ul.nav{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
&.left{
text-align: left;
}
&.center{
text-align: center;
}
&.right{
text-align: right;
}
}
}
.rsaddon_pro_box{
&.default {
.pointer-events{
pointer-events: none;
}
}
}
// Popstyle One
.rspopup_style1{
max-width: 950px;
margin:60px auto 60px;
background: #ffffff;
padding: 40px;
position: relative;
border-radius: 4px;
.rsteam_content{
padding-left: 15px;
.title{
margin: 0 0 30px;
}
}
.team-name{
margin: 0 0 10px;
color: #333;
}
.team-heading{
border-bottom: 1px solid #eee;
}
.team-des,
.team-heading{
padding-bottom: 15px;
margin-bottom: 15px;
}
.team-des{
margin-bottom: 0;
img{
margin-bottom: 25px;
}
}
.social-icons1{
a{
width: 35px;
height: 35px;
line-height: 40px;
background: @primaryColor;
color: #ffffff;
text-align: center;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
&:hover{
opacity: 0.9;
}
&:last-child{
margin-right: 0;
margin-left: 4px;
}
}
}
.contact-info{
margin-bottom: 15px;
border-top: 1px solid #eee;
ul{
margin: 0;
padding: 0;
list-style: none;
li{
display: block;
border-bottom: 1px solid #eee;
padding: 5px 0;
a{
&:hover{
color: @primaryColor;
}
}
}
}
}
.project-info{
margin: 14px 0 0;
padding: 0;
list-style: none;
li{
display: block;
padding: 2px 0;
span{
font-weight: 700;
margin-right: 8px;
width: 146px;
display: inline-block;
}
}
}
}
body .rspopup_style1{
.mfp-close{
color: #ffffff;
right: 10px;
top: 10px;
border-radius: 50%;
background: #ff0000;
transition: 0.3s;
}
}
//RS Progress Bar
.rs-skill-bar{
.skillbar{
background: #eeeeee;
display: inline-block;
height: 16px;
position: relative;
width: 100%;
.skillbar-bar{
background: @hoverColor;
height: 16px;
width: 0;
margin-bottom: 0;
overflow: visible !important;
}
.skillbar-title,
.skill-bar-percent{
position: absolute;
}
.skillbar-title{
color: #212121;
font-size: 20px;
font-weight: 600;
}
.skill-bar-percent {
font-size: 16px;
font-weight: 700;
color: @titleColor;
}
}
&.animation,
&.striped{
.skillbar .skillbar-bar{
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 1rem 1rem;
}
}
&.animation{
.skillbar .skillbar-bar{
-webkit-animation: rs-progress-pie-stripes 1s linear infinite;
animation: rs-progress-pie-stripes 1s linear infinite;
}
}
&.style1{
.skillbar{
.skillbar-title{
top: -25px;
}
.skill-bar-percent {
right: 0;
top: -25px;
}
}
}
&.style2{
.skillbar{
.skillbar-title{
left: 0;
padding: 2px 20px 0;
top: 0;
width: 160px;
background: #83b614;
}
.skill-bar-percent {
right: 10px;
top: 0;
}
}
}
&.style3{
.skillbar{
.skillbar-title{
top: -25px;
}
.skillbar-bar {
position: relative;
.skill-bar-percent {
right: 0;
top: -25px;
}
}
}
}
}
//RS Accordion CSS
.rs_accordion {
.card{
border: none;
border-radius: 0;
}
.card-header{
padding: 0;
border: none;
.rs-tab-title{
display: flex;
position: relative;
padding: 10px 20px 6px 20px;
line-height: 1.8;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1)
}
span{
margin-left: auto;
width: 30px;
text-align: center;
height: 100%;
border: 1px solid #ddd;
height: 30px;
line-height: 30px;
border-radius: 30px;
position: relative;
top: -2px;
&.active{
display: none;
}
}
&.active{
span{
&.normal{
display: none;
}
&.active{
display: block;
}
}
}
&.left_icon{
span{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
left: 20px;
}
}
}
.card-body{
border: 1px solid #eee;
}
}
//Pricing Menu CSS//
.rs-price-table-menu{
ul{
margin: 0;
}
ul,li{
list-style: none;
}
.rs-pricing-table-body{
h3.rs-pricing-menu-features-title{
margin-bottom: 0px;
}
.full-menu-item{
.price-menu{
display: flex;
flex-wrap:wrap;
.rs-pricing-menu-image{
margin-right: 10px;
flex-grow:0;
width: 80px;
}
.rs-pricing-table-feature-text{
display: flex;
justify-content: space-between;
margin-bottom: 5px;
width: 100%;
span.rs-price-title-connector{
border-bottom: 1px dashed #ccc;
height: 1px;
flex-grow: 1;
align-self: center;
margin: 0 20px;
}
span{
align-self:center;
}
}
.menu-price{
display: inline-table;
align-self:center;
}
}
}
}
}
.elementor-invisible.elementor-widget-rs-timecounter{
visibility: visible;
}
.wpcf7 label{
display:block;
}
//dual heading CSS
.rs-dual-heading{
.second_title{
color: @secondaryColor
}
}
//rs faq settings css
.rs-faq-main{
.rs-faq-title{
background: #f7f7f7;
padding: 15px 20px;
margin-bottom: 0;
span{
padding-right: 10px;
}
}
.rs-faq-content{
padding:30px 20px 50px;
}
}
.rs-image{
position: relative;
width: 100%;
height: 100%;
img {
position: relative;
z-index: 1;
}
&.yes{
.veritcal {
animation-name: veritcal;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
&.short {
animation-name: veritcal-short;
&.reverse-enable {
animation-name: veritcal-short-reverse;
}
}
&.reverse-enable {
animation-name: veritcal-reverse;
}
}
@keyframes veritcal {
0% { transform: translateY(0); }
50% { transform: translateY(100px); }
100% { transform: translateY(0); }
}
@keyframes veritcal-reverse {
0% { transform: translateY(0); }
50% { transform: translateY(-100px); }
100% { transform: translateY(0); }
}
@keyframes veritcal-short {
0% { transform: translateY(0); }
50% { transform: translateY(30px); }
100% { transform: translateY(0); }
}
@keyframes veritcal-short-reverse {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}
.veritcal2 {
animation: veritcal2 3s alternate infinite;
-webkit-animation: move-y 3s alternate infinite;
}
@keyframes veritcal2 {
0% { transform: translateY(0); }
50% { transform: translateY(50px); }
100% { transform: translateY(0); }
}
@keyframes veritcal2 {
from {
-webkit-transform: translate3d(0,-10px,0);
}
to {
-webkit-transform: translate3d(0,10px,0);
}
}
@-webkit-keyframes move-y {
from {
-webkit-transform: translate3d(0,-10px,0);
}
to {
-webkit-transform: translate3d(0,10px,0);
}
}
.horizontal {
animation-name: horizontal;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
&.short {
animation-name: horizontal-short;
&.reverse-enable {
animation-name: horizontal-short-reverse;
}
}
&.reverse-enable {
animation-name: horizontal-reverse;
}
}
@keyframes horizontal {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
@keyframes horizontal-reverse {
0% { transform: translateX(0); }
50% { transform: translateX(-100px); }
100% { transform: translateX(0); }
}
@keyframes horizontal-short {
0% { transform: translateX(0); }
50% { transform: translateX(30px); }
100% { transform: translateX(0); }
}
@keyframes horizontal-short-reverse {
0% { transform: translateX(0); }
50% { transform: translateX(-30px); }
100% { transform: translateX(0); }
}
.horizontal2 {
animation: x-anim2 2s alternate infinite;
-webkit-animation: x-anim2 2s alternate infinite;
}
@keyframes horizontal2 {
from {
transform: translateX(-20px);
-webkit-transform: translateX(-20px);
}
from {
transform: translateX(20px);
-webkit-transform: translateX(20px);
}
}
@-webkit-keyframes horizontal2 {
from {
transform: translateX(-20px);
-webkit-transform: translateX(-20px);
}
from {
transform: translateX(20px);
-webkit-transform: translateX(20px);
}
}
.rotated_style{
-webkit-animation: rotated_style 5s linear infinite;
animation: rotated_style 5s linear infinite;
}
@keyframes rotated_style{
0% {
-webkit-transform: translate(0) rotate(0deg);
transform: translate(0) rotate(0deg);
}
25% {
-webkit-transform: translate(-10px, 10px) rotate(10deg);
transform: translate(-10px, 10px) rotate(10deg);
}
50% {
-webkit-transform: translate(5px, -5px) rotate(25deg);
transform: translate(5px, -5px) rotate(25deg);
}
75% {
-webkit-transform: translate(15px, -5px) rotate(15deg);
transform: translate(15px, -5px) rotate(15deg);
}
to {
-webkit-transform: translate(0) rotate(0deg);
transform: translate(0) rotate(0deg);
}
}
@keyframes rotate-anim-reverse {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(-359deg);
-webkit-transform: rotate(-359deg);
}
}
@keyframes rotate-anim-short {
0% {
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
}
@keyframes rotate-anim-short-reverse {
0% {
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
50% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
}
}
.spin_style{
animation: spine 30s infinite linear;
-webkit-animation: spine 30s infinite linear;
&.reverse-enable {
animation-name: spine-reverse;
}
}
@keyframes spin_style{
@keyframes spine {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
}
}
@-webkit-keyframes spine {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
}
}
}
@keyframes spine-reverse {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(-359deg);
-webkit-transform: rotate(-359deg);
}
}
@-webkit-keyframes spine-reverse {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(-359deg);
-webkit-transform: rotate(-359deg);
}
}
.scale_style{
animation: scale 1s alternate infinite;
-webkit-animation: scale 1s alternate infinite;
}
@keyframes scale {
from {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
to {
transform: scale(1.08);
-webkit-transform: scale(1.08);
}
}
@-webkit-keyframes scale {
from {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
to {
transform: scale(1.08);
-webkit-transform: scale(1.08);
}
}
.move_leftright{
animation-duration: 5s;
-webkit-animation-duration: 5s;
animation-name: head-move;
-webkit-animation-name: head-move;
animation-duration: 4s;
-webkit-animation-duration: 4s;
animation-direction: linear;
-webkit-animation-direction: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes head-move {
0% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(5px, 0, 0) rotate(4deg);
-webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
}
50% {
transform: translate3d(0, 0, 0) rotate(-2deg);
-webkit-transform: translate3d(0, 0, 0) rotate(-2deg);
}
75% {
transform: translate3d(5px, 0, 0) rotate(4deg);
-webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
}
100% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes head-move {
0% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(5px, 0, 0) rotate(4deg);
-webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
}
50% {
transform: translate3d(0, 0, 0) rotate(-2deg);
-webkit-transform: translate3d(0, 0, 0) rotate(-2deg);
}
75% {
transform: translate3d(5px, 0, 0) rotate(4deg);
-webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
}
100% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
}
.pop-wrap {
position: absolute;
width: 750px;
height: 750px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
.pop {
position: absolute;
content: '';
border-radius: 100%;
width: 100%;
height: 100%;
opacity: 0.01;
background-clip: padding-box;
-webkit-animation: pop 6s ease-in-out infinite;
animation: pop 6s ease-in-out infinite;
background: #6d5afe;
&:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
&:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
}
}
/* Pop Animation */
@keyframes pop {
0% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
}
}
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
opacity: 0;
}
50% {
opacity: 0.09;
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
}
}
}
div.rs-testimonial-grid.rs-testimonial2 .slick-arrow{
width: 45px;
height: 45px;
line-height: 45px;
&:before{
line-height: 39px;
}
}
.rs-testimonial-grid{
&.rs_dots_center-align{
.slick-dots{
bottom: auto;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: -20px;
li{
display: block;
button{
width: 6px;
height: 6px;
border-radius: 2px !important;
margin: 3px 0;
}
&.slick-active{
button{
height: 15px;
}
}
}
}
}
}
.rs-footer .footer-top {
.mc4wp-form-fields {
.technology{
input{
width: 100%;
border-radius: 5px !important;
}
input[type="email"]{
border: 1px solid #f0f0f0;
}
input[type="submit"]{
font-size: 16px;
position: static;
font-family: inherit;
margin-top: 20px;
}
}
}
}
/*Image Hover Effect*/
.rs-image-hover-effect {
overflow: hidden;
position: relative;
.image-overlay {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 5px 5px 0 0;
transition: 0.6s;
}
.image-part {
overflow: hidden;
border-radius: 5px;
img {
border-radius: 0 5px 5px 0;
transition: @transition;
}
}
.image-content {
color: #555;
padding: 45px 20px 18px;
transition: @transition;
z-index: 2;
position: relative;
.icon-image{
margin-bottom: 25px;
}
.title-part {
.title-prefix {
color: #333;
margin-bottom: 8px;
font-weight: 600;
font-size: 22px;
transition: 0.3s;
&:hover{
opacity: 0.8;
}
}
}
.description-part {
.description-text {
margin-bottom: 30px;
}
}
.button-part {
.image-btn {
display: inline-block;
color: @whiteColor;
background: @primaryColor;
font-size: 16px;
line-height: 1;
padding: 10px 25px;
border-radius: 5px;
transition: @transition;
&.icon-before {
span {
float: right;
}
i {
position: absolute;
}
}
&.icon-after {
span {
float: left;
}
i {
margin-left: 10px;
}
}
&:hover {
background: @secondaryColor;
i {
margin-left: 10px;
}
}
}
}
}
.hover_content{
position: absolute;
z-index: 11;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition: all 0.7s ease 0s;
padding: 40px 20px 40px;
}
&:hover{
.image-overlay {
bottom: 0;
}
.normal_content{
opacity: 0;
visibility: hidden;
}
.hover_content{
opacity: 1;
visibility: visible;
}
}
}
/*-----------------------------------------------
15. Working Process Section Css
-----------------------------------------------*/
/* Wave Animation */
.wave-wrap {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
.wave-inner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat !important;
background-position: 0 bottom !important;
transform-origin: center bottom !important;
&.waveone,
&.wavetwo {
animation: move_wave 30s linear infinite;
background-size: 50% 132px !important;
}
}
&.bgone {
z-index: 2;
opacity: 0.60;
}
&.bgtwo {
z-index: 1;
opacity: 0.70;
}
}
}
.rs-working-process {
display: flex;
justify-content: space-between;
.process-wrap {
&:nth-child(even){
margin-top: 70px;
}
text-align: center;
position: relative;
.number {
font-size: 110px;
font-weight: 700;
position: absolute;
color: @titleColor;
opacity: 0.05;
right: -70px;
top: -25px;
line-height: 1;
&.one {
right: 21px;
}
&.four {
right: -10px;
}
}
.icon-part {
width: 150px;
height: 150px;
line-height: 150px;
overflow: hidden;
position: relative;
margin: 0 auto;
border-radius: 50%;
background: @whiteColor;
box-shadow: 0 0 28px 0px rgba(0, 0, 0, 0.05);
img {
max-width: 60px;
margin-top: -30px;
}
.wave-wrap {
.wave-inner {
width: 300%;
.wave {
&.waveone {
animation: move_wave 20s linear infinite;
background-size: 50% 58px !important;
}
&.wavetwo {
animation: move_wave 15s linear infinite;
background-size: 50% 66px !important;
}
}
}
}
}
.line {
height: 100px;
position: relative;
&:after {
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
content: '';
border: 1px dashed @primaryColor;
}
}
.title {
font-size: 20px;
line-height: 30px;
margin: 0;
}
.mark-img {
position: absolute;
content: '';
transform: rotate(10deg);
right: -145px;
top: 30%;
&.down {
top: 26%;
transform: rotate(-11deg);
right: -121px;
}
}
}
.shape {
img {
position: absolute;
right: 0;
top: -210px;
z-index: -1;
}
}
}
/*RS Image Hover Effect Animation*/
.rs-image-hover-effect {
[class^='rs-image-fade'] .image-content,
[class*=' rs-image-fade'] .image-content {
opacity: 0;
}
[class^='rs-image-fade']:hover .image-content,
[class*=' rs-image-fade']:hover .image-content {
opacity: 1;
}
[class^='rs-image-fade']:hover .image-part img,
[class^='rs-image-fade']:hover .image-content,
[class*=' rs-image-fade']:hover .image-part img,
[class*=' rs-image-fade']:hover .image-content {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/* rs-image-fade-in-up
----------------------------- */
.rs-image-fade-in-up .image-content {
-webkit-transform: translate(0, 15%);
-moz-transform: translate(0, 15%);
-ms-transform: translate(0, 15%);
-o-transform: translate(0, 15%);
transform: translate(0, 15%);
}
/* rs-image-fade-in-down
----------------------------- */
.rs-image-fade-in-down .image-content {
-webkit-transform: translate(0, -15%);
-moz-transform: translate(0, -15%);
-ms-transform: translate(0, -15%);
-o-transform: translate(0, -15%);
transform: translate(0, -15%);
}
/* rs-image-fade-in-left
----------------------------- */
.rs-image-fade-in-left .image-content {
-webkit-transform: translate(-15%, 0);
-moz-transform: translate(-15%, 0);
-ms-transform: translate(-15%, 0);
-o-transform: translate(-15%, 0);
transform: translate(-15%, 0);
}
/* rs-image-fade-in-right
----------------------------- */
.rs-image-fade-in-right .image-content {
-webkit-transform: translate(15%, 0);
-moz-transform: translate(15%, 0);
-ms-transform: translate(15%, 0);
-o-transform: translate(15%, 0);
transform: translate(15%, 0);
}
/* rs-image-push-*
----------------------------- */
[class^='rs-image-push-']:hover .image-content,
[class*=' rs-image-push-']:hover .image-content {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/* rs-image-push-up
----------------------------- */
.rs-image-push-up .image-content {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.rs-image-push-up:hover .image-part img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
/* rs-image-push-down
----------------------------- */
.rs-image-push-down .image-content {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.rs-image-push-down:hover .image-part img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
/* rs-image-push-left
----------------------------- */
.rs-image-push-left .image-content {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.rs-image-push-left:hover .image-part img {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
/* rs-image-push--right
----------------------------- */
.rs-image-push-right .image-content {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.rs-image-push-right:hover .image-part img {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
/* rs-image-slide-*
----------------------------- */
[class^='rs-image-slide-']:hover .image-content,
[class*=' rs-image-slide-']:hover .image-content {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/* rs-image-slide-up
----------------------------- */
.rs-image-slide-up .image-content {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
/* rs-image-slide-down
----------------------------- */
.rs-image-slide-down .image-content {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
/* rs-image-slide-left
----------------------------- */
.rs-image-slide-left .image-content {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
/* rs-image-slide-right
----------------------------- */
.rs-image-slide-right .image-content {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
/* rs-image-reveal-*
----------------------------- */
[class^='rs-image-reveal-']:before, [class*=' rs-image-reveal-']:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
}
[class^='rs-image-reveal-'] .image-content, [class*=' rs-image-reveal-'] .image-content {
opacity: 0;
}
[class^='rs-image-reveal-']:hover:before, [class*=' rs-image-reveal-']:hover:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
[class^='rs-image-reveal-']:hover .image-content, [class*=' rs-image-reveal-']:hover .image-content {
opacity: 1;
-webkit-transition-delay: 0.21s;
-moz-transition-delay: 0.21s;
transition-delay: 0.21s;
}
/* rs-image-reveal-up
----------------------------- */
.rs-image-reveal-up:before {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
/* rs-image-reveal-down
----------------------------- */
.rs-image-reveal-down:before {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
/* rs-image-reveal-left
----------------------------- */
.rs-image-reveal-left:before {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
/* rs-image-reveal-right
----------------------------- */
.rs-image-reveal-right:before {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
/* rs-image-hinge-*
----------------------------- */
[class^='rs-image-hinge-'], [class*=' rs-image-hinge-'] {
-webkit-perspective: 50em;
-moz-perspective: 50em;
perspective: 50em;
}
[class^='rs-image-hinge-'] .image-content, [class*=' rs-image-hinge-'] .image-content {
opacity: 0;
z-index: 1;
}
[class^='rs-image-hinge-']:hover img, [class*=' rs-image-hinge-']:hover img {
opacity: 0;
}
[class^='rs-image-hinge-']:hover .image-content, [class*=' rs-image-hinge-']:hover .image-content {
opacity: 1;
-webkit-transition-delay: 0.21s;
-moz-transition-delay: 0.21s;
transition-delay: 0.21s;
}
/* rs-image-hinge-up
----------------------------- */
.rs-image-hinge-up img {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.rs-image-hinge-up .image-content {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.rs-image-hinge-up:hover .image-part img {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.rs-image-hinge-up:hover .image-content {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
/* rs-image-hinge-down
----------------------------- */
.rs-image-hinge-down img {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.rs-image-hinge-down .image-content {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% -50%;
-moz-transform-origin: 50% -50%;
-ms-transform-origin: 50% -50%;
-o-transform-origin: 50% -50%;
transform-origin: 50% -50%;
}
.rs-image-hinge-down:hover .image-part img {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
opacity: 0;
}
.rs-image-hinge-down:hover .image-content {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
/* rs-image-hinge-left
----------------------------- */
.rs-image-hinge-left img {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.rs-image-hinge-left .image-content {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.rs-image-hinge-left:hover .image-part img {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.rs-image-hinge-left:hover .image-content {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
/* rs-image-hinge-right
----------------------------- */
.rs-image-hinge-right img {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.rs-image-hinge-right .image-content {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.rs-image-hinge-right:hover .image-part img {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.rs-image-hinge-right:hover .image-content {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
/* rs-image-flip-*
----------------------------- */
[class^='rs-image-flip-'], [class*=' rs-image-flip-'] {
-webkit-perspective: 50em;
-moz-perspective: 50em;
perspective: 50em;
}
[class^='rs-image-flip-'] img, [class*=' rs-image-flip-'] img {
backface-visibility: hidden;
}
[class^='rs-image-flip-'] .image-content, [class*=' rs-image-flip-'] .image-content {
opacity: 0;
}
[class^='rs-image-flip-']:hover .image-part img, [class*=' rs-image-flip-']:hover .image-part img {
opacity: 0;
}
[class^='rs-image-flip-']:hover .image-content, [class*=' rs-image-flip-']:hover .image-content {
opacity: 1;
-webkit-transition-delay: 0.14s;
-moz-transition-delay: 0.14s;
transition-delay: 0.14s;
}
/* rs-image-flip-horiz
----------------------------- */
.rs-image-flip-horiz .image-content {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.rs-image-flip-horiz:hover img {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.rs-image-flip-horiz:hover .image-content {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/* rs-image-flip-vert
----------------------------- */
.rs-image-flip-vert .image-content {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.rs-image-flip-vert:hover .image-part img {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.rs-image-flip-vert:hover .image-content {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* rs-image-flip-diag-1
----------------------------- */
.rs-image-flip-diag-1 .image-content {
-webkit-transform: rotate3d(1, -1, 0, 100deg);
-moz-transform: rotate3d(1, -1, 0, 100deg);
-ms-transform: rotate3d(1, -1, 0, 100deg);
-o-transform: rotate3d(1, -1, 0, 100deg);
transform: rotate3d(1, -1, 0, 100deg);
}
.rs-image-flip-diag-1:hover .image-part img {
-webkit-transform: rotate3d(-1, 1, 0, 100deg);
-moz-transform: rotate3d(-1, 1, 0, 100deg);
-ms-transform: rotate3d(-1, 1, 0, 100deg);
-o-transform: rotate3d(-1, 1, 0, 100deg);
transform: rotate3d(-1, 1, 0, 100deg);
}
.rs-image-flip-diag-1:hover .image-content {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
-moz-transform: rotate3d(0, 0, 0, 0deg);
-ms-transform: rotate3d(0, 0, 0, 0deg);
-o-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
/* rs-image-flip-diag-2
----------------------------- */
.rs-image-flip-diag-2 .image-content {
-webkit-transform: rotate3d(1, 1, 0, 100deg);
-moz-transform: rotate3d(1, 1, 0, 100deg);
-ms-transform: rotate3d(1, 1, 0, 100deg);
-o-transform: rotate3d(1, 1, 0, 100deg);
transform: rotate3d(1, 1, 0, 100deg);
}
.rs-image-flip-diag-2:hover .image-part img {
-webkit-transform: rotate3d(-1, -1, 0, 100deg);
-moz-transform: rotate3d(-1, -1, 0, 100deg);
-ms-transform: rotate3d(-1, -1, 0, 100deg);
-o-transform: rotate3d(-1, -1, 0, 100deg);
transform: rotate3d(-1, -1, 0, 100deg);
}
.rs-image-flip-diag-2:hover .image-content {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
-moz-transform: rotate3d(0, 0, 0, 0deg);
-ms-transform: rotate3d(0, 0, 0, 0deg);
-o-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
/* rs-image-shutter-out-*
----------------------------- */
[class^='rs-image-shutter-out-']:before, [class*=' rs-image-shutter-out-']:before {
position: absolute;
content: '';
-webkit-transition-delay: 0.105s;
-moz-transition-delay: 0.105s;
transition-delay: 0.105s;
}
[class^='rs-image-shutter-out-'] .image-content, [class*=' rs-image-shutter-out-'] .image-content {
opacity: 0;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
[class^='rs-image-shutter-out-']:hover:before, [class*=' rs-image-shutter-out-']:hover:before {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
[class^='rs-image-shutter-out-']:hover .image-content, [class*=' rs-image-shutter-out-']:hover .image-content {
opacity: 1;
-webkit-transition-delay: 0.105s;
-moz-transition-delay: 0.105s;
transition-delay: 0.105s;
}
/* rs-image-shutter-out-horiz
----------------------------- */
.rs-image-shutter-out-horiz:before {
left: 50%;
right: 50%;
top: 0;
bottom: 0;
}
.rs-image-shutter-out-horiz:hover:before {
left: 0;
right: 0;
}
/* rs-image-shutter-out-vert
----------------------------- */
.rs-image-shutter-out-vert:before {
top: 50%;
bottom: 50%;
left: 0;
right: 0;
}
.rs-image-shutter-out-vert:hover:before {
top: 0;
bottom: 0;
}
/* rs-image-shutter-out-diag-1
----------------------------- */
.rs-image-shutter-out-diag-1:before {
top: 50%;
bottom: 50%;
left: -35%;
right: -35%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.rs-image-shutter-out-diag-1:hover:before {
top: -35%;
bottom: -35%;
}
/* rs-image-shutter-out-diag-2
----------------------------- */
.rs-image-shutter-out-diag-2:before {
top: 50%;
bottom: 50%;
left: -35%;
right: -35%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.rs-image-shutter-out-diag-2:hover:before {
top: -35%;
bottom: -35%;
}
/* rs-image-shutter-in-*
----------------------------- */
[class^='rs-image-shutter-in-']:after, [class^='rs-image-shutter-in-']:before, [class*=' rs-image-shutter-in-']:after, [class*=' rs-image-shutter-in-']:before {
position: absolute;
content: '';
}
[class^='rs-image-shutter-in-']:after, [class*=' rs-image-shutter-in-']:after {
top: 0;
left: 0;
}
[class^='rs-image-shutter-in-']:before, [class*=' rs-image-shutter-in-']:before {
right: 0;
bottom: 0;
}
[class^='rs-image-shutter-in-'] .image-content, [class*=' rs-image-shutter-in-'] .image-content {
opacity: 0;
z-index: 1;
}
[class^='rs-image-shutter-in-']:hover .image-content, [class*=' rs-image-shutter-in-']:hover .image-content {
opacity: 1;
-webkit-transition-delay: 0.21s;
-moz-transition-delay: 0.21s;
transition-delay: 0.21s;
}
/* rs-image-shutter-in-horiz
----------------------------- */
.rs-image-shutter-in-horiz:after, .rs-image-shutter-in-horiz:before {
width: 0;
height: 100%;
}
.rs-image-shutter-in-horiz:hover:after, .rs-image-shutter-in-horiz:hover:before {
width: 50%;
}
/* rs-image-shutter-in-vert
----------------------------- */
.rs-image-shutter-in-vert:after, .rs-image-shutter-in-vert:before {
height: 0;
width: 100%;
}
.rs-image-shutter-in-vert:hover:after, .rs-image-shutter-in-vert:hover:before {
height: 50%;
}
/* rs-image-shutter-in-out-horiz
----------------------------- */
.rs-image-shutter-in-out-horiz:after, .rs-image-shutter-in-out-horiz:before {
width: 0;
height: 100%;
opacity: 0.75;
}
.rs-image-shutter-in-out-horiz:hover:after, .rs-image-shutter-in-out-horiz:hover:before {
width: 100%;
}
/* rs-image-shutter-in-out-vert
----------------------------- */
.rs-image-shutter-in-out-vert:after, .rs-image-shutter-in-out-vert:before {
height: 0;
width: 100%;
opacity: 0.75;
}
.rs-image-shutter-in-out-vert:hover:after, .rs-image-shutter-in-out-vert:hover:before {
height: 100%;
}
/* rs-image-shutter-in-out-diag-1
----------------------------- */
.rs-image-shutter-in-out-diag-1:after, .rs-image-shutter-in-out-diag-1:before {
width: 200%;
height: 200%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
opacity: 0.75;
}
.rs-image-shutter-in-out-diag-1:after {
-webkit-transform: skew(-45deg) translateX(-150%);
-moz-transform: skew(-45deg) translateX(-150%);
-ms-transform: skew(-45deg) translateX(-150%);
-o-transform: skew(-45deg) translateX(-150%);
transform: skew(-45deg) translateX(-150%);
}
.rs-image-shutter-in-out-diag-1:before {
-webkit-transform: skew(-45deg) translateX(150%);
-moz-transform: skew(-45deg) translateX(150%);
-ms-transform: skew(-45deg) translateX(150%);
-o-transform: skew(-45deg) translateX(150%);
transform: skew(-45deg) translateX(150%);
}
.rs-image-shutter-in-out-diag-1:hover:after {
-webkit-transform: skew(-45deg) translateX(-50%);
-moz-transform: skew(-45deg) translateX(-50%);
-ms-transform: skew(-45deg) translateX(-50%);
-o-transform: skew(-45deg) translateX(-50%);
transform: skew(-45deg) translateX(-50%);
}
.rs-image-shutter-in-out-diag-1:hover:before {
-webkit-transform: skew(-45deg) translateX(50%);
-moz-transform: skew(-45deg) translateX(50%);
-ms-transform: skew(-45deg) translateX(50%);
-o-transform: skew(-45deg) translateX(50%);
transform: skew(-45deg) translateX(50%);
}
/* rs-image-shutter-in-out-diag-2
----------------------------- */
.rs-image-shutter-in-out-diag-2:after, .rs-image-shutter-in-out-diag-2:before {
width: 200%;
height: 200%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
opacity: 0.75;
}
.rs-image-shutter-in-out-diag-2:after {
-webkit-transform: skew(45deg) translateX(-100%);
-moz-transform: skew(45deg) translateX(-100%);
-ms-transform: skew(45deg) translateX(-100%);
-o-transform: skew(45deg) translateX(-100%);
transform: skew(45deg) translateX(-100%);
}
.rs-image-shutter-in-out-diag-2:before {
-webkit-transform: skew(45deg) translateX(100%);
-moz-transform: skew(45deg) translateX(100%);
-ms-transform: skew(45deg) translateX(100%);
-o-transform: skew(45deg) translateX(100%);
transform: skew(45deg) translateX(100%);
}
.rs-image-shutter-in-out-diag-2:hover:after {
-webkit-transform: skew(45deg) translateX(0%);
-moz-transform: skew(45deg) translateX(0%);
-ms-transform: skew(45deg) translateX(0%);
-o-transform: skew(45deg) translateX(0%);
transform: skew(45deg) translateX(0%);
}
.rs-image-shutter-in-out-diag-2:hover:before {
-webkit-transform: skew(45deg) translateX(0%);
-moz-transform: skew(45deg) translateX(0%);
-ms-transform: skew(45deg) translateX(0%);
-o-transform: skew(45deg) translateX(0%);
transform: skew(45deg) translateX(0%);
}
/* rs-image-fold*
----------------------------- */
[class^='rs-image-fold'], [class*=' rs-image-fold'] {
-webkit-perspective: 50em;
-moz-perspective: 50em;
perspective: 50em;
}
[class^='rs-image-fold'] img, [class*=' rs-image-fold'] img {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
[class^='rs-image-fold'] .image-content, [class*=' rs-image-fold'] .image-content {
z-index: 1;
opacity: 0;
}
[class^='rs-image-fold']:hover .image-part img, [class*=' rs-image-fold']:hover .image-part img {
opacity: 0;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
[class^='rs-image-fold']:hover .image-content, [class*=' rs-image-fold']:hover .image-content {
-webkit-transform: rotateX(0) translate3d(0, 0%, 0) scale(1);
-moz-transform: rotateX(0) translate3d(0, 0%, 0) scale(1);
-ms-transform: rotateX(0) translate3d(0, 0%, 0) scale(1);
-o-transform: rotateX(0) translate3d(0, 0%, 0) scale(1);
transform: rotateX(0) translate3d(0, 0%, 0) scale(1);
opacity: 1;
-webkit-transition-delay: 0.21s;
-moz-transition-delay: 0.21s;
transition-delay: 0.21s;
}
/* rs-image-fold-up
----------------------------- */
.rs-image-fold-up .image-part img {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.rs-image-fold-up .image-content {
-webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
-moz-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
-ms-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
-o-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.rs-image-fold-up:hover .image-part img {
-webkit-transform: rotateX(90deg) scale(0.6) translateY(50%);
-moz-transform: rotateX(90deg) scale(0.6) translateY(50%);
-ms-transform: rotateX(90deg) scale(0.6) translateY(50%);
-o-transform: rotateX(90deg) scale(0.6) translateY(50%);
transform: rotateX(90deg) scale(0.6) translateY(50%);
}
/* rs-image-fold-down
----------------------------- */
.rs-image-fold-down .image-part img {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.rs-image-fold-down .image-content {
-webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
-moz-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
-ms-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
-o-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.rs-image-fold-down:hover .image-part img {
-webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
-moz-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
-ms-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
-o-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
transform: rotateX(-90deg) scale(0.6) translateY(-50%);
}
/* rs-image-fold-left
----------------------------- */
.rs-image-fold-left .image-part img {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.rs-image-fold-left .image-content {
-webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
-moz-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
-ms-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
-o-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.rs-image-fold-left:hover .image-part img {
-webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%);
-moz-transform: rotateY(-90deg) scale(0.6) translateX(50%);
-ms-transform: rotateY(-90deg) scale(0.6) translateX(50%);
-o-transform: rotateY(-90deg) scale(0.6) translateX(50%);
transform: rotateY(-90deg) scale(0.6) translateX(50%);
}
/* rs-image-fold-right
----------------------------- */
.rs-image-fold-right .image-part img {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.rs-image-fold-right .image-content {
-webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
-moz-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
-ms-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
-o-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.rs-image-fold-right:hover .image-part img {
-webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%);
-moz-transform: rotateY(90deg) scale(0.6) translateX(-50%);
-ms-transform: rotateY(90deg) scale(0.6) translateX(-50%);
-o-transform: rotateY(90deg) scale(0.6) translateX(-50%);
transform: rotateY(90deg) scale(0.6) translateX(-50%);
}
/* rs-image-zoom-in
----------------------------- */
.rs-image-zoom-in .image-content {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.rs-image-zoom-in:hover .image-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* rs-image-zoom-out*
----------------------------- */
[class^='rs-image-zoom-out'] .image-content, [class*=' rs-image-zoom-out'] .image-content {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
}
[class^='rs-image-zoom-out']:hover .image-content, [class^='rs-image-zoom-out'].hover .image-content, [class*=' rs-image-zoom-out']:hover .image-content, [class*=' rs-image-zoom-out'].hover .image-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition-delay: 0.35s;
-moz-transition-delay: 0.35s;
transition-delay: 0.35s;
}
/* rs-image-zoom-out
----------------------------- */
.rs-image-zoom-out:hover .image-part img {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
/* rs-image-zoom-out-up
----------------------------- */
.rs-image-zoom-out-up:hover .image-part img, .rs-image-zoom-out-up.hover .image-part img {
-webkit-animation: rs-image-zoom-out-up 0.4025s linear;
-moz-animation: rs-image-zoom-out-up 0.4025s linear;
animation: rs-image-zoom-out-up 0.4025s linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes rs-image-zoom-out-up {
50% {
-webkit-transform: scale(0.8) translateY(0%);
-moz-transform: scale(0.8) translateY(0%);
-ms-transform: scale(0.8) translateY(0%);
-o-transform: scale(0.8) translateY(0%);
transform: scale(0.8) translateY(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateY(-150%);
-moz-transform: scale(0.8) translateY(-150%);
-ms-transform: scale(0.8) translateY(-150%);
-o-transform: scale(0.8) translateY(-150%);
transform: scale(0.8) translateY(-150%);
opacity: 0.5;
}
}
@keyframes rs-image-zoom-out-up {
50% {
-webkit-transform: scale(0.8) translateY(0%);
-moz-transform: scale(0.8) translateY(0%);
-ms-transform: scale(0.8) translateY(0%);
-o-transform: scale(0.8) translateY(0%);
transform: scale(0.8) translateY(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateY(-150%);
-moz-transform: scale(0.8) translateY(-150%);
-ms-transform: scale(0.8) translateY(-150%);
-o-transform: scale(0.8) translateY(-150%);
transform: scale(0.8) translateY(-150%);
opacity: 0.5;
}
}
/* rs-image-zoom-out-down
----------------------------- */
.rs-image-zoom-out-down:hover .image-part img, .rs-image-zoom-out-down.hover .image-part img {
-webkit-animation: rs-image-zoom-out-down 0.4025s linear;
-moz-animation: rs-image-zoom-out-down 0.4025s linear;
animation: rs-image-zoom-out-down 0.4025s linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes rs-image-zoom-out-down {
50% {
-webkit-transform: scale(0.8) translateY(0%);
-moz-transform: scale(0.8) translateY(0%);
-ms-transform: scale(0.8) translateY(0%);
-o-transform: scale(0.8) translateY(0%);
transform: scale(0.8) translateY(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateY(150%);
-moz-transform: scale(0.8) translateY(150%);
-ms-transform: scale(0.8) translateY(150%);
-o-transform: scale(0.8) translateY(150%);
transform: scale(0.8) translateY(150%);
opacity: 0.5;
}
}
@keyframes rs-image-zoom-out-down {
50% {
-webkit-transform: scale(0.8) translateY(0%);
-moz-transform: scale(0.8) translateY(0%);
-ms-transform: scale(0.8) translateY(0%);
-o-transform: scale(0.8) translateY(0%);
transform: scale(0.8) translateY(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateY(150%);
-moz-transform: scale(0.8) translateY(150%);
-ms-transform: scale(0.8) translateY(150%);
-o-transform: scale(0.8) translateY(150%);
transform: scale(0.8) translateY(150%);
opacity: 0.5;
}
}
/* rs-image-zoom-out-left
----------------------------- */
.rs-image-zoom-out-left:hover .image-part img, .rs-image-zoom-out-left.hover .image-part img {
-webkit-animation: rs-image-zoom-out-left 0.4025s linear;
-moz-animation: rs-image-zoom-out-left 0.4025s linear;
animation: rs-image-zoom-out-left 0.4025s linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes rs-image-zoom-out-left {
50% {
-webkit-transform: scale(0.8) translateX(0%);
-moz-transform: scale(0.8) translateX(0%);
-ms-transform: scale(0.8) translateX(0%);
-o-transform: scale(0.8) translateX(0%);
transform: scale(0.8) translateX(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateX(-150%);
-moz-transform: scale(0.8) translateX(-150%);
-ms-transform: scale(0.8) translateX(-150%);
-o-transform: scale(0.8) translateX(-150%);
transform: scale(0.8) translateX(-150%);
opacity: 0.5;
}
}
@keyframes rs-image-zoom-out-left {
50% {
-webkit-transform: scale(0.8) translateX(0%);
-moz-transform: scale(0.8) translateX(0%);
-ms-transform: scale(0.8) translateX(0%);
-o-transform: scale(0.8) translateX(0%);
transform: scale(0.8) translateX(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateX(-150%);
-moz-transform: scale(0.8) translateX(-150%);
-ms-transform: scale(0.8) translateX(-150%);
-o-transform: scale(0.8) translateX(-150%);
transform: scale(0.8) translateX(-150%);
opacity: 0.5;
}
}
/* rs-image-zoom-out-right
----------------------------- */
.rs-image-zoom-out-right:hover .image-part img, .rs-image-zoom-out-right.hover .image-part img {
-webkit-animation: rs-image-zoom-out-right 0.4025s linear;
-moz-animation: rs-image-zoom-out-right 0.4025s linear;
animation: rs-image-zoom-out-right 0.4025s linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes rs-image-zoom-out-right {
50% {
-webkit-transform: scale(0.8) translateX(0%);
-moz-transform: scale(0.8) translateX(0%);
-ms-transform: scale(0.8) translateX(0%);
-o-transform: scale(0.8) translateX(0%);
transform: scale(0.8) translateX(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateX(150%);
-moz-transform: scale(0.8) translateX(150%);
-ms-transform: scale(0.8) translateX(150%);
-o-transform: scale(0.8) translateX(150%);
transform: scale(0.8) translateX(150%);
opacity: 0.5;
}
}
@keyframes rs-image-zoom-out-right {
50% {
-webkit-transform: scale(0.8) translateX(0%);
-moz-transform: scale(0.8) translateX(0%);
-ms-transform: scale(0.8) translateX(0%);
-o-transform: scale(0.8) translateX(0%);
transform: scale(0.8) translateX(0%);
opacity: 0.5;
}
100% {
-webkit-transform: scale(0.8) translateX(150%);
-moz-transform: scale(0.8) translateX(150%);
-ms-transform: scale(0.8) translateX(150%);
-o-transform: scale(0.8) translateX(150%);
transform: scale(0.8) translateX(150%);
opacity: 0.5;
}
}
/* rs-image-zoom-out-flip-horiz
----------------------------- */
.rs-image-zoom-out-flip-horiz {
-webkit-perspective: 50em;
-moz-perspective: 50em;
perspective: 50em;
}
.rs-image-zoom-out-flip-horiz .image-content {
opacity: 0;
-webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5);
-moz-transform: rotateX(90deg) translateY(-100%) scale(0.5);
-ms-transform: rotateX(90deg) translateY(-100%) scale(0.5);
-o-transform: rotateX(90deg) translateY(-100%) scale(0.5);
transform: rotateX(90deg) translateY(-100%) scale(0.5);
}
.rs-image-zoom-out-flip-horiz:hover .image-part img, .rs-image-zoom-out-flip-horiz.hover .image-part img {
-webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5);
-moz-transform: rotateX(-100deg) translateY(50%) scale(0.5);
-ms-transform: rotateX(-100deg) translateY(50%) scale(0.5);
-o-transform: rotateX(-100deg) translateY(50%) scale(0.5);
transform: rotateX(-100deg) translateY(50%) scale(0.5);
opacity: 0;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
.rs-image-zoom-out-flip-horiz:hover .image-content, .rs-image-zoom-out-flip-horiz.hover .image-content {
-webkit-transform: rotateX(0) translateY(0%) scale(1);
-moz-transform: rotateX(0) translateY(0%) scale(1);
-ms-transform: rotateX(0) translateY(0%) scale(1);
-o-transform: rotateX(0) translateY(0%) scale(1);
transform: rotateX(0) translateY(0%) scale(1);
opacity: 1;
-webkit-transition-delay: 0.35s;
-moz-transition-delay: 0.35s;
transition-delay: 0.35s;
}
/* rs-image-zoom-out-flip-vert
----------------------------- */
.rs-image-zoom-out-flip-vert {
-webkit-perspective: 50em;
-moz-perspective: 50em;
perspective: 50em;
}
.rs-image-zoom-out-flip-vert .image-content {
opacity: 0;
-webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
-moz-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
-ms-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
-o-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
transform: rotateY(90deg) translate(50%, 0) scale(0.5);
}
.rs-image-zoom-out-flip-vert:hover .image-part img, .rs-image-zoom-out-flip-vert.hover .image-part img {
-webkit-transform: rotateY(-100deg) translateX(50%) scale(0.5);
-moz-transform: rotateY(-100deg) translateX(50%) scale(0.5);
-ms-transform: rotateY(-100deg) translateX(50%) scale(0.5);
-o-transform: rotateY(-100deg) translateX(50%) scale(0.5);
transform: rotateY(-100deg) translateX(50%) scale(0.5);
opacity: 0;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
.rs-image-zoom-out-flip-vert:hover .image-content, .rs-image-zoom-out-flip-vert.hover .image-content {
-webkit-transform: rotateY(0) translate(0, 0) scale(1);
-moz-transform: rotateY(0) translate(0, 0) scale(1);
-ms-transform: rotateY(0) translate(0, 0) scale(1);
-o-transform: rotateY(0) translate(0, 0) scale(1);
transform: rotateY(0) translate(0, 0) scale(1);
opacity: 1;
-webkit-transition-delay: 0.35s;
-moz-transition-delay: 0.35s;
transition-delay: 0.35s;
}
/* rs-image-blur
----------------------------- */
.rs-image-blur .image-content {
opacity: 0;
}
.rs-image-blur:hover .image-part img {
-webkit-filter: blur(30px);
filter: blur(30px);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
}
.rs-image-blur:hover .image-content {
opacity: 1;
-webkit-transition-delay: 0.21s;
-moz-transition-delay: 0.21s;
transition-delay: 0.21s;
}
/*Image Moving Part CSS*/
.rs-image-move-left .image-part img,
.rs-image-move-right .image-part img,
.rs-image-move-top .image-part img,
.rs-image-move-bottom .image-part img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.rs-image-move-left .image-part img,
.rs-image-move-right:hover .image-part img {
-webkit-transform-origin: left;
transform-origin: left;
}
.rs-image-move-right .image-part img,
.rs-image-move-left:hover .image-part img {
-webkit-transform-origin: right;
transform-origin: right;
}
.rs-image-move-top .image-part img,
.rs-image-move-bottom:hover .image-part img {
-webkit-transform-origin: top;
transform-origin: top;
}
.rs-image-move-bottom .image-part img,
.rs-image-move-top:hover .image-part img {
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
/*Long Image Top to Bottom CSS*/
.rs-image-top-down .image-part {
max-height: 400px;
transition: 3s;
}
.rs-image-top-down:hover .image-part {
padding-top: 400px;
}
.rs-image-top-down .image-part img{
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
vertical-align: bottom;
transition: 3s;
}
.rs-image-top-down:hover .image-part img{
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
/*End RS Image Hover Effect Animation*/
}
//Buisness hour css
.rs-business-hour{
.rs-business-schedule{
display: flex;
justify-content:space-between;
padding: 8px;
}
}
// //Moble Layout
// @media only screen and (max-width: 1024px){
// .rstab-main.no_item_menu ul,
// .rstab-main.vertical,
// .rstab-main ul.nav{
// display: block !important;
// }
// .rstab-main ul.nav li {
// margin-right: 0 !important;
// margin-left: 0 !important;
// }
// .rstab-main.vertical ul.nav{
// margin-right: 0;
// }
// .rstab-main.vertical ul.nav.bubble li a.active:after{
// display: none;
// }
// }
/* -----------------------
Features List CSS
--------------------------*/
.rs-features-list-content{
.feature-title{
margin-bottom: 16px;
}
.desc{
margin-bottom: 20px;
}
ul,li{
list-style: none;
margin:0;
}
li{
margin-bottom: 7px;
display: flex;
align-items: center;
&:last-child{
margin-bottom:0px;
}
i{
margin-right: 10px;
color:@secondaryColor;
}
img{
width: 16px;
margin-right: 12px;
}
}
&.left-image{
display: flex;
align-items: center;
.feature-image{
margin-right: 20px;
}
}
&.border-enable{
.feature-image {
position: relative;
&:before,
&:after{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 40px;
top: -55px;
transform: translateX(-50%);
background: #00163f;
}
&:after{
top: auto;
bottom: -55px;
}
img{
padding: 10px;
border: 2px solid #00163f;
}
}
}
}
/*------------------------------
Pie progress bar
-----------------------------*/
.rs-pie-content{
text-align: center;
.rspie-title-center {
display: inline-block;
position: relative;
text-align: center;
}
.rspie-value {
display: block;
position: absolute;
font-size: 14px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.number{
text-align: center;
display: block;
padding: 10px 0 0;
font-size: 20px;
}
}
/*-----------------------------
RS DataTable CSS
-------------------------------*/
.elementor-widget-RS-Table{
.dataTables_filter{
margin-bottom: 7px;
input{
margin: 0 0 0 10px;
outline: 0;
-webkit-appearance: none;
tap-highlight-color: rgba(255,255,255,0);
line-height: 1.21428571em;
padding: .67857143em 1em;
font-size: 1em;
background: #fff;
border: 1px solid rgba(34,36,38,.15);
color: rgba(0,0,0,.87);
border-radius: .28571429rem;
-webkit-box-shadow: 0 0 0 0 transparent inset;
box-shadow: 0 0 0 0 transparent inset;
}
}
.rsdatatable-select{
select{
margin:0 10px;
height: auto;
padding:8px 18px;
border-radius: 5px;
}
}
table.dataTable thead th,
table.dataTable thead td{
border-bottom: 0;
}
.dataTables_paginate{
background: #fff;
font-weight: 400;
border: 1px solid rgba(34,36,38,.15);
-webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
border-radius: .28571429rem;
min-height: 2.85714286em;
padding-top: 0 !important;
margin-top: 10px;
a.paginate_button{
background: none !important;
box-shadow:none !important;
border:none !important;
&.current{
box-shadow: none !important;
background: rgba(0,0,0,.05) !important
}
&:hover{
background: rgba(0,0,0,.05) !important;
color: #333 !important;
}
}
}
table.dataTable.no-footer{
border:0;
}
table.dataTable{
border-collapse: collapse;
}
}
.request-a-services{
.your-address,
.your-phone,
.submit-btn,
.your-name,
.Services{
position: relative;
&:before{
content: "\f107";
position: absolute;
right: 20px;
top: -4px;
color: #7a7a7a;
font-size: 17px;
font-family: uicons-regular-rounded;
}
}
.Services{
&:before{
content: "\f107";
font-size: 20px;
font-family: FontAwesome;
top: 12px;
}
}
.your-name{
&:before{
content: "\f2e1";
}
}
.your-phone{
&:before{
content: "\f241";
}
}
.your-address{
&:before{
content: "\f215";
}
}
.submit-btn{
&:before{
content: "\f121";
z-index: 11;
background: none;
color: #fff;
font-size: 24px;
right: 18%;
top: 12px;
}
}
select{
-webkit-appearance: none;
}
}
/*------------------------------
RS Timecounter
-----------------------------*/
.rs-timecounter{
.time_circles{
position: relative;
width: 100%;
height: 100%;
canvas{
opacity: 0;
}
div{
position: absolute;
padding-right: 0;
text-align: center;
margin-top: -10px;
span{
line-height: 1.2;
font-size: 55px;
}
h4{
margin: 0;
}
}
}
&.circle_border_on{
.time_circles{
canvas{
opacity: 1;
}
}
}
&.separator{
.time_circles{
> div{
&:after{
content: ":";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 30px;
}
&:last-child{
&:after{
display: none;
}
}
}
}
}
&.background_style{
.time_circles{
> div{
span{
background: transparent;
}
span,
h4{
position: relative;
z-index: 1;
}
padding: 20px 0 35px;
&:after{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.08);
width: 90%;
height: 100%;
}
}
}
}
&.number_border{
.time_circles{
> div{
span{
border: 4px solid #4a4a4a ;
padding: 0 15px;
}
h4{
margin-top: 30px;
}
span,
h4{
position: relative;
z-index: 1;
}
}
}
}
}
/*Dual Button CSS-----------
---------------------------*/
.rselement-dual-btn,
.rselement-dual-btn-connector {
display: inline-block;
}
.rselement-dual-btn-wrapper {
position: relative;
text-align: center;
font-weight: 400;
}
.rselement-dual-btn {
padding: 1.2rem 3rem;
max-width: 100%;
color: #fff;
text-decoration: none;
font-size: 14px;
}
.rselement-dual-btn--left {
background-color: #fe4d8b;
}
.rselement-dual-btn--left:hover,
.rselement-dual-btn--left:focus {
background-color: #d00d51;
color: #fff;
}
.rselement-dual-btn--right {
background-color: #3023ae;
}
.rselement-dual-btn--right:hover,
.rselement-dual-btn--right:focus {
background-color: #2e1cde;
color: #fff;
}
.rselement-dual-btn-connector {
position: absolute !important;
z-index: 9;
overflow: hidden;
width: 30px;
height: 30px;
border-radius: 100%;
background-color: #fff;
box-shadow: 0 0 0 5px rgba(255, 255, 255, .3);
color: #27374c;
text-transform: uppercase;
font-size: 12px;
line-height: 30px;
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.rselement-dual-btn-icon > svg {
width: 1em;
height: auto;
}
.rselement-dual-btn-icon > i {
font-size: 1em;
}
.rselement-dual-btn-icon--before {
margin-right: 5px;
}
.rselement-dual-btn-icon--after {
margin-left: 5px;
}
.elementor-widget-rs-dual-button > .elementor-widget-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.elementor-widget-rs-dual-button {
.rselement-dual-btn--left {
border-radius: 0;
}
.rselement-dual-btn--right {
border-radius: 0;
}
.rselement-dual-btn-connector {
top: 50%;
right: 0;
}
}
/*woocommerce product list*/
.elementor-widget-rs-product-list,
.elementor-widget-rs-product-slider,
.elementor-widget-rs-productlist{
.product-img{
position: relative;
span{
position: absolute;
right: 10px;
top: 10px;
background: #fff;
border-radius: 50%;
color: #ff0000;
font-weight: bold;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
&.overlay{
position: relative;
.product-btn{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 2s ease;
a{
padding:10px 20px;
background:#000;
color: #fff;
font-size: 14px;
&:hover{
background:#333;
}
}
}
}
}
.product-item{
.overlay{
&:before{
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
top:0;
left: 0;
opacity: 0;
z-index: 1;
transition: all 2s ease;
position: absolute;
}
}
&:hover{
.overlay{
position: relative;
.product-btn{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
z-index: 9;
text-align: center;
a{
padding:10px 20px;
background:#000;
color: #fff;
font-size: 14px;
display: inline-block;
margin-bottom: 10px;
&:hover{
background:#333;
}
}
}
&:before{
opacity: 1;
}
}
}
}
}
.rselements-product-list{
text-align: center;
padding: 30px 15px;
margin-bottom: 30px;
h4{
margin: 0 0 10px;
font-size: 20px;
a{
color: #333;
&:hover{
color:#111;
}
}
}
.product-price{
font-size: 16px;
}
.product-btn{
margin-top: 25px;
a{
padding:10px 20px;
background:#000;
color: #fff;
font-size: 14px;
&:hover{
background:#333;
}
}
}
}
.elementor-widget-rs-productlist{
.product-item{
padding-bottom: 35px;
}
.rselements-product-list{
text-align: unset;
}
}
/*------------------------
----Instagram CSS---------
-------------------------*/
/*instagram CSS */
.pp-instagram-feed-carousel{
.swiper-button-prev,
.swiper-button-next
{
background: none !important
}
}
.pp-instafeed-grid{
.pp-feed-item{
float: left;
position: relative;
.pp-overlay-container {
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
-webkit-transition: all 0.25s linear 0s;
transition: all 0.25s linear 0s;
opacity: 0;
span{
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin: 0 5px;
}
.pp-if-icon{
margin-right: 5px;
}
}
&:hover{
.pp-overlay-container{
opacity: 1;
}
}
}
}
.pp-instagram-feed-gray{
.pp-feed-item{
img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: filter 0.25s linear 0s;
transition: filter 0.25s linear 0s;
}
&:hover{
img{
-webkit-filter: none;
filter: none;
}
}
}
}
.pp-instagram-feed-hover-gray{
.pp-feed-item{
img{
-webkit-filter: none;
filter: none;
}
&:hover{
img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: filter 0.25s linear 0s;
transition: filter 0.25s linear 0s;
}
}
}
}
.pp-instagram-feed-title-wrap {
background: #fff;
position: absolute;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
.pp-instagram-feed-title{
padding: 10px 20px;
display: block;
}
}
/*-----------------------------
----RS Pricelist CSS ----------
------------------------------*/
.rs-price-list{
list-style:none;
padding:0;
margin:0;
.rs-width-expand{
flex: 1;
min-width: 1px;
}
.rs-grid{
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.rs-flex-middle{
align-items: center;
}
.rs-flex-inline{
padding-left: 40px;
span{
display: inline-block;
}
}
}
.rs-price-list li:not(:last-child) {
margin-bottom: 20px;
}
.rs-logo-grid {
.logo-grid-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
border-right: 1px solid rgba(0, 0, 0, 0.04);
&.pre-last{
border-right: 0;
}
&.pre-last-row {
border-bottom: 0;
}
}
}
.rs-price-list .rs-price-list-image{max-width:50%;padding-right:25px}
.rs-price-list .rs-price-list-image img{width:100%}
.rs-price-list .rs-price-list-price{font-size:16px;font-weight:700}
.rs-price-list .rs-price-list-header{font-size:14px;max-width:100%}
.rs-price-list .rs-price-list-title{color:#444444}
.rs-price-list .rs-price-list-description{font-size:12px}
.rs-price-list .rs-grid.rs-has-image{margin-left:0}
.rs-price-list .rs-price-list-image,.rs-price-list .rs-price-list-separator{display:none}
.rs-price-list li{padding:0;margin:0}
.rs-price-list li:not(:last-child){margin-bottom:10px}
.rs-price-list .rs-price-list-item>div[onclick]{cursor:pointer}
@media (min-width:768px){
.rs-price-list .rs-price-list-header{font-size:19px;font-weight:600}
.rs-price-list .rs-price-list-title{max-width:80%}
.rs-price-list .rs-price-list-separator{margin-left:10px;border-bottom-style:dotted;border-bottom-width:1px;height:0;color:#cccccc}
.rs-price-list .rs-price-list-description{font-size:14px;margin:0;color:#999999}
.rs-price-list .rs-price-list-description{font-size:14px}
.rs-price-list .rs-price-list-image,.rs-price-list .rs-price-list-separator{display:inline-block}
}
/*box hover animation for any addon*/
div.rs-animation-yes:hover{
.elementor-animation-bounce-in{
transform: scale(1.2);
transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36);
}
.elementor-animation-grow{
transform: scale(1.1);
}
.elementor-animation-shrink{
transform: scale(0.9);
}
.elementor-animation-pulse{
animation-name: elementor-animation-pulse;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.elementor-animation-pulse-grow {
animation-name: elementor-animation-pulse-grow;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.elementor-animation-pulse-shrink{
animation-name: elementor-animation-pulse-shrink;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.elementor-animation-push{
animation-name: elementor-animation-push;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.elementor-animation-pop{
animation-name: elementor-animation-pop;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.elementor-animation-bounce-in {
transform: scale(1.2);
transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36);
}
.elementor-animation-bounce-out{
transform: scale(0.8);
transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36);
}
.elementor-animation-rotate{
transform: rotate(4deg);
}
.elementor-animation-grow-rotate {
transform: scale(1.1) rotate(4deg);
}
.elementor-animation-float{
transform: translateY(-8px);
}
.elementor-animation-sink{
transform: translateY(8px);
}
.elementor-animation-bob{
animation-name: elementor-animation-bob-float,elementor-animation-bob;
animation-duration: .3s,1.5s;
animation-delay: 0s,.3s;
animation-timing-function: ease-out,ease-in-out;
animation-iteration-count: 1,infinite;
animation-fill-mode: forwards;
animation-direction: normal,alternate;
}
.elementor-animation-hang{
animation-name: elementor-animation-hang-sink,elementor-animation-hang;
animation-duration: .3s,1.5s;
animation-delay: 0s,.3s;
animation-timing-function: ease-out,ease-in-out;
animation-iteration-count: 1,infinite;
animation-fill-mode: forwards;
animation-direction: normal,alternate;
}
.elementor-animation-skew{
transform: skew(-10deg);
}
.elementor-animation-skew-forward{
transform: skew(-10deg);
}
.elementor-animation-skew-backward{
transform: skew(10deg);
}
.elementor-animation-wobble-vertical{
animation-name: elementor-animation-wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.elementor-animation-wobble-horizontal{
animation-name: elementor-animation-wobble-horizontal;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.elementor-animation-wobble-to-bottom-right{
animation-name: elementor-animation-wobble-to-bottom-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.elementor-animation-wobble-to-top-right{
animation-name: elementor-animation-wobble-to-top-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.elementor-animation-wobble-top{
animation-name: elementor-animation-wobble-top;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.elementor-animation-wobble-bottom{
animation-name: elementor-animation-wobble-bottom;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.elementor-animation-wobble-skew {
animation-name: elementor-animation-wobble-skew;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.elementor-animation-buzz{
animation-name: elementor-animation-buzz;
animation-duration: .15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.elementor-animation-buzz-out {
animation-name: elementor-animation-buzz-out;
animation-duration: .75s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
}
.rs-testimonial4{
.image-wrap{
margin-bottom: 15px;
}
.testimonial-contents{
flex: 0 0 30%;
max-width: 30%;
}
.ratings{
margin-top: 10px;
img{
max-width: 75px;
}
}
}
.center .btm-rs .blog-footer .blog-meta{
justify-content: center;
}
/* Waving Line Animation */
@keyframes waving-line{
0% {
background-position: 0 0;
}
100% {
background-position: -200px 0;
}
}
@-webkit-keyframes waving-line {
0% {
background-position: 0 0;
}
100% {
background-position: -200px 0;
}
}
/* Move Animation */
.move-y {
animation: move-y 2s alternate infinite;
-webkit-animation: move-y 2s alternate infinite;
}
@keyframes move-y {
from {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
}
}
@-webkit-keyframes move-y {
from {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
}
}
/* Dancing Move */
.dance {
animation: dance 4s both;
-webkit-animation: dance 4s both;
animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
@keyframes dance {
0% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(15px, -15px, 0);
-webkit-transform: translate3d(15px, -15px, 0);
}
100% {
transform: translate3d(0, -15px, 15px);
-webkit-transform: translate3d(0, -15px, 15px);
}
}
@-webkit-keyframes dance {
0% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(15px, -15px, 0);
-webkit-transform: translate3d(15px, -15px, 0);
}
100% {
transform: translate3d(0, -15px, 15px);
-webkit-transform: translate3d(0, -15px, 15px);
}
}
.scale2 {
animation: scale2 2s alternate infinite;
-webkit-animation: scale2 2s alternate infinite;
}
@keyframes scale2 {
from {
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
to {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-webkit-keyframes scale2 {
from {
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
to {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.dance2 {
animation: dance2 4s both;
-webkit-animation: dance2 4s both;
animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
@keyframes dance2 {
0% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-15px, 15px, 0);
-webkit-transform: translate3d(-15px, 15px, 0);
}
100% {
transform: translate3d(0, 15px, -15px);
-webkit-transform: translate3d(0, 15px, -15px);
}
}
@-webkit-keyframes dance2 {
0% {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-15px, 15px, 0);
-webkit-transform: translate3d(-15px, 15px, 0);
}
100% {
transform: translate3d(0, 15px, -15px);
-webkit-transform: translate3d(0, 15px, -15px);
}
}
/* Wave Animation */
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1);
-webkit-transform: translateX(0) translateZ(0) scaleY(1);
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-25%) translateZ(0) scaleY(1);
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
}
}
@-webkit-keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1);
-webkit-transform: translateX(0) translateZ(0) scaleY(1);
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-25%) translateZ(0) scaleY(1);
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
}
}
/* Wave Animation 2 */
@keyframes move_wave2 {
0% {
transform: translateX(0) translateZ(0) scaleY(1);
-webkit-transform: translateX(0) translateZ(0) scaleY(1);
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-25%) translateZ(0) scaleY(1);
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
}
}
@-webkit-keyframes move_wave2 {
0% {
transform: translateX(0) translateZ(0) scaleY(1);
-webkit-transform: translateX(0) translateZ(0) scaleY(1);
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-25%) translateZ(0) scaleY(1);
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1);
-webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
}
}