File: /home/thehunarfound/public_html/hunar-canada/wp-content/plugins/rselements/assets/css/rsaddons.less
@bodyFont: 'Open Sans', sans-serif;
@titleFont: 'Montserrat', sans-serif;;
@transition: all 0.4s ease 0s;
@primaryColor: #030749;
@secondaryColor: #9051c6;
@whiteColor: #ffffff;
@titleColor: #0a0a0a;
@menuColor: #202427;
@btnColor: #f8560c;
@linkColor: #3324af;
@hoverColor: #9051c6;
@globalColor: #444;
@bodyColor: #4a4a4a;
@formBg: #0e1254;
/*--------------------------------------------------------------
Heading css
--------------------------------------------------------------*/
.rs-heading,
.rs-dual-heading{
.title-inner{
.sub-text{
margin: 0 0 10px;
display: block;
color: @primaryColor;
font-size: 18px;
font-weight: 600;
line-height: 26px;
font-family: @titleFont;
&.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{
.sub-text{
display: inline-block;
}
}
&.style2{
position: relative;
padding-bottom: 15px;
&:after{
content: "";
position: absolute;
border: 0;
width: 100px;
height: 3px;
background: @primaryColor;
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;
background: @primaryColor;
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: @primaryColor;
z-index: 9;
margin-left: 0;
right: 0;
top: 12px;
}
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%;
}
}
}
}
}
&.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;
}
}
}
.rs-animated-heading{
.title-inner{
.title,
.title .cd-headline{
color:@titleColor;
line-height: 52px;
}
.title{
margin-bottom: 10px;
&.title-upper{
text-transform: uppercase;
}
.cd-headline{
font-weight: 700;
margin-left: 10px;
color: @secondaryColor;
p{
margin-bottom: 0;
}
}
}
}
.cd-words-wrapper{
text-align: center;
}
}
.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;
}
//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{
color: @bodyColor;
&: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;
}
}
}
}
}
}
/** Counter up CSS ----------------------
----------------------------------------*/
.counter-top-area{
position: relative;
padding: 0 !important;
.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;
}
}
}
}
/* 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;
font-family: @bodyFont;
.services-title {
position: relative;
.title {
font-size: 24px;
margin: 0 0 10px;
color: @titleColor;
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 {
color: @bodyColor;
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;
}
&: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 {
.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-part {
display: inline-flex;
}
}
}
/* 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;
&:hover {
color: @hoverColor;
}
}
}
}
.number-txt {
color: @bodyColor;
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;
padding: 40px 25px 20px;
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);
}
.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: 15px;
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: 15px;
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: 15px;
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;
}
/* -----------------------
Team Member
--------------------------*/
.rs-addon-slider {
margin: 0;
.team-item {
padding: 0 15px;
}
.slick-dots {
line-height: 10px;
bottom: -15px;
li {
display: inline-block;
width: unset;
height: unset;
margin: 0 5px;
button {
width: 10px;
height: 10px;
display: inline-block;
font-size: unset;
line-height: unset;
padding: unset;
border-radius: 50%;
border: 1px solid @primaryColor;
&:before {
display: none;
}
&:hover {
background: @primaryColor;
}
}
&.slick-active {
button {
background: @primaryColor;
}
}
}
}
.slick-next,
.slick-prev {
width: 42px;
height: 42px;
line-height: 42px;
background: @primaryColor;
border-radius: 50%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: 0.6s ease all;
z-index: 9;
opacity: 0.75;
visibility: hidden;
&:before {
line-height: 42px;
color: #fff;
}
&:hover {
opacity: 1;
}
}
.slick-prev {
left: 30px;
}
.slick-next {
right: 30px;
}
&:hover {
.slick-prev,
.slick-next {
opacity: 1;
visibility: visible;
}
.slick-prev {
left: -45px;
}
.slick-next {
right: -45px;
}
}
}
// Slider Style 1
.team-grid-style1,
.team-slider-style1 {
.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;
.social-icons1{
position: absolute;
right: -50px;
bottom: 0;
width: 50px;
background: @primaryColor;
padding: 12px 0;
opacity: 0;
visibility: hidden;
transition: @transition;
a{
padding: 0;
background: transparent;
i{
background: transparent;
}
&:hover{
i{
color: @btnColor;
background: transparent;
}
}
}
}
}
:hover{
.image-wrap{
.social-icons1{
right: 0;
width: 50px;
opacity: 1;
visibility: visible;
}
}
}
.team-content{
text-align: center;
margin: 0;
padding: 20px 20px 25px;
box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1);
background: @primaryColor;
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: #ffffff;
&:hover{
color: #c4c4c4;
}
}
}
span.team-title{
text-transform: uppercase;
font-family: @titleFont;
font-size: 14px;
color: #ffffff;
}
}
.social-icons{
display: none;
}
}
}
.team-slider-style1{
.team-item {
.team-content {
margin: 0;
}
}
}
// 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: @primaryColor;
border-radius: 3px 3px 0 0;
padding: 8px 0 14px;
margin-top: -35px;
position: absolute;
bottom: -50%;
left: 50%;
transform: translateX(-50%);
width: 230px;
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;
&:hover{
color: @btnColor;
}
}
}
.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-family: @titleFont;
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;
}
}
}
//Slider Styel3
.team-grid-style3,
.team-slider-style3{
.team-item{
padding: 25px;
position: relative;
&:after{
position: absolute;
content: '';
width: 0;
height: 0;
border-top: 200px solid @secondaryColor;
border-right: 200px solid transparent;
left: 0px;
top: -10px;
}
&:before{
position: absolute;
content: '';
width: 0;
height: 0;
border-bottom: 200px solid @secondaryColor;
border-left: 200px solid transparent;
right: 0px;
bottom: -10px;
}
img{
position: relative;
z-index: 99;
}
.team-inner-wrap{
position: relative;
&:before{
position: absolute;
content: '';
width: 100%;
height: 100%;
background: @secondaryColor;
opacity: 0.8;
left: 0;
top: 0;
z-index: 100;
opacity: 0;
transition: @transition;
}
}
.team-content{
position: absolute;
display: block;
left: 50%;
width: 100%;
top: 30%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 110;
color: #fff;
padding: 15px;
opacity: 0;
transition: @transition;
.team-name{
margin-bottom: 0;
font-size: 20px;
a{
color: #fff;
}
}
.team-title{
color: #fff;
position: relative;
padding-bottom: 8px;
margin-bottom: 10px;
font-size: 14px;
display: block;
}
.social-icons{
a{
color: #fff;
margin-right: 12px;
font-size: 16px;
&:last-child{
margin-right: 0;
}
&:hover{
opacity: 0.8;
}
}
}
}
&:hover{
.team-content{
opacity: 1;
width: 100%;
top: 50%;
}
.team-inner-wrap:before{
opacity: 0.8;
}
}
}
}
.team-grid-style3 .team-img:after{
top: 0;
}
.team-grid-style3 .team-img:before{
bottom: 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;
&:hover{
color: @btnColor;
}
}
}
.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;
&:hover{
color: @btnColor;
}
}
}
}
}
&: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;
border-radius: 5px;
.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;
}
}
.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;
&:hover{
color: @btnColor;
}
}
}
}
&: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;
&:hover {
color: @btnColor;
}
}
}
.team-title {
color: #fff;
}
&:before{
background: #222;
}
}
.social-icons {
bottom: 25px !important;
opacity: 1;
transform: translateX(-50%) scale(1);
}
}
}
}
}
// Slider Style 6
.team-grid-style6{
.team-item {
overflow: visible;
.image-wrap{
text-align: center;
img{
border-radius: 50%;
}
}
.social-icons {
text-align: center;
margin-top: 10px;
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: 20px 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: 14px;
color: #666;
}
}
}
}
//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;
}
}
}
}
/** Blog Style CSS --------------
-----------------------------------*/
.rs-blog-grid {
.blog-item {
overflow: visible;
margin-bottom: 30px;
.image-wrap{
position: relative;
img{
transition: all 0.5s ease 0s;
}
.author-avatar{
position: absolute;
bottom: -16px;
left: 30px;
img{
border-radius: 50%;
}
}
.cat_list{
position: absolute;
z-index: 111;
top: 20px;
left: 20px;
z-index: 10;
ul{
margin: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
display: block;
padding: 4px 10px;
border-radius: 3px;
color: #ffffff;
background: @primaryColor;
transition: 0.4s;
&:hover{
opacity: 0.85;
}
}
}
}
}
}
&.blog_meta_style2{
.image-wrap{
position: relative;
.blog-meta{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: @primaryColor;
color: #fff;
padding: 8px 14px 7px;
border-radius: 5px 5px 0 0;
}
}
}
.blog-content{
margin: 0;
padding: 20px 30px 5px;
box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1);
background: #fff;
position: unset;
opacity: 1;
h3.blog-name{
font-weight: 600;
font-size: 20px;
margin-bottom: 15px;
line-height: 1.4;
a{
text-decoration: none;
color: @titleColor;
}
}
.blog-meta{
margin-bottom: 6px;
.admin{
margin-left: 12px;
}
}
p{
margin: 0 0 15px;
}
&:hover{
h3.blog-name {
a{
color: @primaryColor;
}
}
}
.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;
}
i {
margin-left: 10px;
transition: 0.4s
}
}
&.icon-before {
span {
float: right;
}
i {
margin-right: 10px;
}
}
}
}
}
&.transparent{
.blog-inner-wrap{
position: relative;
overflow: hidden;
.image-wrap{
position: relative;
img{
transition: all 0.8s ease 0s;
}
&:before{
opacity: .85;
background: transparent;
background: linear-gradient(transparent, #333333), linear-gradient(transparent, #333333);
background: -moz-linear-gradient(transparent, #333333), -moz-linear-gradient(transparent, #333333);
background: -o-linear-gradient(transparent, #333333), -o-linear-gradient(transparent, #333333);
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;
bottom: 0;
width: 100%;
z-index: 1;
background: transparent;
}
&: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);
}
}
}
}
}
&:hover{
.image-wrap{
.pointer-events img{
filter: grayscale(100%);
}
}
}
}
.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;
color: @bodyColor;
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;
}
}
}
/** Pricing Table CSS --------------
-----------------------------------*/
.elementor-widget-rsprice{
.elementor-widget-container{
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0.2rem 2.8rem rgba(36,36,36,.1);
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
overflow: hidden;
padding: 3em 4em;
.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-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;
i{
margin-right:10px;
min-width: 15px;
font-size: 16px;
}
}
}
}
.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;
}
.rs-pricing-icon{
position: relative;
i {
position: relative;
transition: @transition;
text-align: center;
}
}
}
}
/** Portfolio CSS ---------------------
--------------------------------------*/
.portfolio-filter{
margin-bottom: 20px;
span{
color: #333;
padding: 10px;
cursor: pointer;
display: inline-block;
&.active{
color:@primaryColor;
}
&:hover{
color: @primaryColor;
}
}
}
/*// Portfolio Style1*/
.rs-portfolio-style1 {
.portfolio-item {
position: relative;
overflow: hidden;
.portfolio-content {
position: absolute;
width: 100%;
height: 100%;
top: 30%;
left: 0;
text-align: center;
z-index: 10;
padding: 25px;
opacity: 0;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
border-radius: 5px;
&: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;
border-radius: 5px;
}
.vertical-middle{
position: relative;
z-index: 9;
}
.p-category {
color: #fff;
margin-bottom: 0;
a {
color: #fff;
&:hover {
color: rgba(255, 255, 255, 0.7);
}
}
}
.vertical-middle {
display: table;
height: 100%;
width: 100%;
}
.vertical-middle-cell {
display: table-cell;
vertical-align: middle;
}
}
.portfolio-img img {
width: 100%;
border-radius: 5px;
}
.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: 15px;
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;
&: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: -100px;
right: 25px;
text-align: right;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: @primaryColor;
border-radius: 50%;
i{
color: #ffffff;
}
i,
i:before{
font-size: 15px;
}
}
.p-title{
font-size: 20px;
font-weight: 600;
span{
font-size: 16px;
font-weight: 400;
padding-bottom: 5px;
display: block;
}
bottom: -100px;
left: 25px;
span,
a{
color: #ffffff;
}
a:hover{
color: @primaryColor;
}
}
}
&:hover{
.portfolio-content .p-title{
bottom: 20px;
}
.portfolio-content .p-icon,
.portfolio-content .p-title{
opacity: 1;
visibility: visible;
}
&:before{
opacity: 0.9;
visibility: visible;
}
.portfolio-content .p-icon{
top: 20px;
}
}
}
}
.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: 0;
z-index: 10;
border-radius: 5px;
}
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;
a {
color: @secondaryColor;
}
h4 {
margin-bottom: 0;
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: @primaryColor;
}
}
}
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);
}
}
.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{
position: relative;
.portfolio-content{
.p-icon{
transition: all .4s ease 0s;
top: -100px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: @primaryColor;
border-radius: 50%;
position: absolute;
z-index: 11;
margin: 0;
top: 20px;
right: 25px;
a{
color: #ffffff;
&:hover{
opacity: 0.8;
}
}
}
.p-title{
position: absolute;
bottom: 40px;
right: 40px;
left: 40px;
z-index: 99;
}
}
}
/* Button CSS -----------------
-----------------------------*/
.rs-btn{
a{
display: inline-block;
color: #fff;
padding: 10px 40px;
font-size: 25px;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
background-color: @primaryColor;
border-radius: 10px;
&:hover{
background:@secondaryColor;
color: #fff;
}
}
}
/*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{
.item-content{
&.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;
}
}
p{
padding: 40px 40px 40px 40px;
background-color: @primaryColor;
border-radius: 0px 0px 0px 0px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
margin-bottom: 28px;
color: #fff;
}
}
.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;
}
}
}
.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;
}
}
}
}
.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%;
}
}
}
}
.testimonial-information{
padding-top: 15px;
}
}
/*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: 1px solid #ddd;
border-radius: 5px;
background-color: #6094da;
.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{
flex: 1 1 0;
a{
background: #f1f1f1;
padding: 10px;
display: flex;
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;
overflow: hidden;
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;
}
}
}
}
}
}
.tab-pane.active {
animation: slide-down 2s ease-out;
}
&.no_item_menu{
ul{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
&.left{
text-align: left;
}
&.center{
text-align: center;
}
&.right{
text-align: right;
}
}
@keyframes slide-down {
0% { opacity: 0; transform: translateY(50%); }
50% { opacity: 1; transform: translateY(0); }
}
}
.rsaddon_pro_box{
&.default {
.pointer-events{
pointer-events: none;
}
}
}
// Popstyle One
.rspopup_style1{
max-width: 900px;
margin: 0 auto;
background: #ffffff;
padding: 40px;
position: relative;
.rsteam_content{
padding-left: 15px;
.title{
margin: 0 0 10px;
}
}
.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;
}
.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{
color: @bodyColor;
&: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;
}
}
}
}
.rsaddon_pro_box{
.portfolio-item .portfolio-content .p-category a{
pointer-events: none;
}
}
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;
}
.skillbar-title,
.skill-bar-percent{
position: absolute;
}
.skillbar-title{
color: #212121;
font-size: 20px;
font-weight: 600;
}
.skill-bar-percent {
font-size: 15px;
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: -35px;
}
.skill-bar-percent {
right: 0;
top: -30px;
}
}
}
&.style2{
.skillbar{
.skillbar-title{
left: 0;
padding: 2px 20px 0;
top: 0;
width: 160px;
background: #83b614;
}
.skill-bar-percent {
right: 10px;
top: 0;
}
}
}
}
//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%;
&.yes{
.veritcal {
animation-name: veritcal;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes veritcal {
0% { transform: translateY(0); }
50% { transform: translateY(100px); }
100% { transform: translateY(0); }
}
.horizontal {
animation-name: horizontal;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes horizontal {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.horizontal {
animation-name: horizontal;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
}
.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);
}
}
}
}
/*Image Hover Effect*/
.rs-image-hover-effect {
overflow: hidden;
position: relative;
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 5px;
transition: @transition;
}
.image-part {
overflow: hidden;
border-radius: 5px;
img {
border-radius: 5px;
transition: @transition;
}
}
.image-content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
padding: 20px;
transition: @transition;
z-index: 2;
.title-part {
.prefix-part {
.title-prefix {
text-align: left;
color: @titleColor;
margin-bottom: 0;
}
}
.image-title-part {
.image-title {
margin-bottom: 10px;
a {
color: @titleColor;
}
}
}
}
.description-part {
.description-text {
text-align: left;
color: @bodyColor;
margin-bottom: 10px;
}
}
.button-part {
.image-btn {
display: inline-block;
color: @whiteColor;
background: @primaryColor;
font-size: 15px;
line-height: 1;
padding: 10px 25px;
border-radius: 5px;
transition: @transition;
&.icon-before {
span {
float: right;
}
i {
position: absolute;
transition: @transition;
}
}
&.icon-after {
span {
float: left;
}
i {
margin-left: 10px;
transition: @transition;
}
}
&:hover {
background: @secondaryColor;
i {
margin-left: 10px;
}
}
}
}
}
&:hover {
.image-overlay {
background-color: rgba(0,0,0,0.65);
}
.image-part {
img {
transform: scale(1.15);
}
}
.image-content {
.title-part {
.prefix-part {
.title-prefix {
color: @whiteColor;
}
}
.image-title-part {
.image-title {
a {
color: @whiteColor;
}
}
}
}
.description-part {
.description-text {
color: @whiteColor;
}
}
}
}
}
/*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{
ul,li{
list-style: none;
margin:0;
}
li{
margin-bottom: 7px;
&:last-child{
margin-bottom:0px;
}
i{
margin-right: 10px;
color:@secondaryColor;
}
}
}
/*------------------------------
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;
}
}
/*------------------------------
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;
}
}