File: /home/thehunarfound/public_html/hunar-usa/wp-content/themes/educavo/assets/css/rsaddons.less
/*--------------------------------------------------------------
Heading css
--------------------------------------------------------------*/
.rs-heading{
.title-inner{
.sub-text{
font-weight: 500;
margin: 0 0 10px;
display: block;
color: @secondaryColor;
line-height: 28px;
font-family: @bodyFont;
font-size: 16px;
letter-spacing: 1px;
&.title-upper{
text-transform: uppercase;
}
}
.title{
color: @titleColor;
font-family: @titleFont;
font-weight: 700;
position: relative;
&.title-upper{
text-transform: uppercase;
}
span.watermark {
position: absolute;
font-size: 200px;
text-transform: uppercase;
font-weight: 900;
font-family: @titleFont;
opacity: 0.05;
width: 100%;
left: 0;
color: inherit;
white-space: nowrap;
vertical-align: middle;
}
span.watermark-animate {
position: absolute;
font-size: 130px;
text-transform: uppercase;
font-weight: 900;
font-family: @titleFont;
opacity: 0.05;
width: 100%;
left: 0;
color: inherit;
white-space: nowrap;
vertical-align: middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 8s infinite;
animation: anim 8s infinite;
animation-direction: alternate-reverse;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
}
h3.title{
font-weight: 500;
}
}
&.style12{
.border-top12{
width: 50px;
margin-bottom: 20px;
display: block;
}
&.text-center{
.border-top12{
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
.title{
margin-bottom: 10px;
}
.sub-text {
font-weight: 500;
display: block;
margin-bottom:25px;
}
}
&.style1{
.title{
&:after{
content: "";
position: absolute;
border: 0;
width: 50px;
height: 4px;
background: @secondaryColor;
z-index: 1;
margin-left: 20px;
top: 14px;
}
}
}
&.style11{
.sub-text{
font-family: @titleFont;
}
.title{
span.watermark {
font-size: 180px;
opacity: 0.08;
}
span{
display: block;
font-size: 32px;
font-weight: 600;
}
}
.title-inner{
position: relative;
&:before{
content: "";
position: absolute;
top: 0;
left: 0px;
opacity: 0.5;
width: 10px;
height: 100%;
}
}
&.text-center{
.title-inner{
position: relative;
display: inline-block;
&:before{
content: "";
position: absolute;
bottom: 42px;
left: 0;
right: 0;
opacity: 0.5;
width: 50%;
height: 10px;
margin: 0 auto;
display: block;
top: auto;
}
}
}
}
&.style10{
.title-inner{
.sub-text{
position: relative;
display: inline-block;
&:before{
content: '•';
position: absolute;
top: 50%;
left: -35px;
color: transparent;
text-shadow: 10px 0 @primaryColor, -10px 0 @primaryColor;
color: @primaryColor;
font-size: .8em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
opacity: 1;
}
&:after{
content: '•';
position: absolute;
top: 50%;
right: -35px;
color: transparent;
text-shadow: 10px 0 @primaryColor, -10px 0 @primaryColor;
color: @primaryColor;
font-size: .8em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
opacity: 1;
}
}
}
}
&.big{
.title-inner{
h2{
font-size: 36px;
line-height: 44px;
}
}
.description{
p{
font-size: 20px;
line-height: 32px;
}
}
}
&.style4{
.title-inner{
.title{
margin-bottom: 0;
}
.title-img{
margin-bottom: 12px;
}
}
}
&.style2{
position: relative;
z-index: 1;
.title {
display: inline-block;
position: relative;
}
.description{
p{
margin-bottom: 12px;
}
}
.title{
&:after{
content: "";
position: absolute;
border: 0;
width: 50px;
height: 4px;
z-index: 9;
margin-left: 0;
left: 0;
bottom: 0;
}
}
&.light{
&:after{
background: #fff !important;
}
}
&.center{
.title{
&:after{
left: 0;
right: 0;
margin: 0 auto;
}
}
}
&.right{
.title{
&:after{
left: auto;
right: 0;
margin: 0;
}
}
}
}
&.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: @secondaryColor;
z-index: 1;
margin-left: 0;
left: 0;
top: 14px;
}
p{
margin-bottom: 12px;
}
}
&.light{
.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: @secondaryColor;
z-index: 1;
margin-left: 0;
left: 0;
top: 0;
}
}
.description{
padding-left: 25px;
position: relative;
&:after{
content: "";
position: absolute;
border: 0;
width: 2px;
height: 100%;
background: @secondaryColor;
z-index: 1;
margin-left: 0;
left: 0;
top: 0;
}
}
h2{
margin-bottom: 5px;
}
&.text-center{
.description{
padding-top: 15px;
padding-left: 0px;
&:after{
display: none;
}
}
}
&.light{
.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: 1;
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;
}
}
}
&.light{
.sub-text{
&:after{
background: #fff !important;
}
}
}
&.dark{
.sub-text{
&:after{
background: #232023 !important;
}
}
}
}
&.style4{
.title-inner{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
display: block;
}
.sub-text{
position: relative;
color: @primaryColor;
display: inline-block;
&:before,
&:after{
content: "";
position: absolute;
border: 0;
width: 50px;
height: 2px;
background: @primaryColor;
z-index: 1;
margin-left: 0;
left: -20px;
top: 15px;
}
&:before{
left: -55px;
}
&:after{
left: auto;
right: -55px;
}
p{
margin-bottom: 12px;
}
}
}
&.light{
.sub-text{
&:before,
&:after{
background: #fff !important;
}
}
}
&.text-center,
&.text-right{
.title-inner{
.sub-text{
display: inline-block;
}
}
}
}
&.style7{
.title-inner{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
}
.sub-text{
position: relative;
padding-right: 65px;
display: inline-block;
color: @secondaryColor;
&:after{
content: "";
position: absolute;
border: 0;
width: 50px;
height: 2px;
background: @secondaryColor;
z-index: 1;
margin-left: 0;
right: 0;
top: 12px;
}
p{
margin-bottom: 12px;
}
}
&.light{
.sub-text{
&:after{
background: #fff !important;
}
}
}
&.text-center,
&.text-right{
.title-inner{
.sub-text{
display: inline-block;
}
}
}
}
}
&.style9{
.title-img{
margin-bottom: 15px;
}
}
}
.list-angle-right,
.list-style-circle,
.list-style{
padding: 0;
margin: 0;
list-style: none;
display: block !important;
li{
position: relative;
padding-left: 32px;
margin-bottom: 5px;
&:before{
font-family: FontAwesome;
position: absolute;
left: 0;
top: -2px;
font-size: 20px;
color: @secondaryColor;
}
}
}
.list-angle-right{
li{
&:before{
content: "\f105";
}
}
}
.list-style-circle{
li{
&:before{
content: "\f00c";
}
}
}
.list-style{
li{
&:before{
content: "\f05d";
}
}
}
.history-list{
margin-bottom: 5px;
}
/*--------------------------------------------------------------
Call to Actiobn
--------------------------------------------------------------*/
.rs-cta {
.description{
margin-top: 25px;
font-size: 15px;
line-height: 28px;
font-weight: normal;
p{
&:first-child{
margin: 0;
}
&:last-child{
margin: 0;
}
}
ul{
margin: 0 0 0 18px;
}
}
.title-wrap{
.exp-title{
font-size: 35px;
line-height: 40px;
margin-bottom: 0px;
text-align: left;
}
.eta-subtitle{
margin-bottom: 0;
margin-top: 10px;
line-height: 1.4;
text-transform: uppercase;
}
}
.button-wrap{
.cta-hints{
margin-bottom: 0;
margin-top: 10px;
margin-right: 10px;
}
}
.style1{
.hidden-md{
padding-right: 40px;
}
.title-wrap{
.eta-subtitle{
margin-top: 15px;
margin-bottom: 7px;
}
.description{
margin-top: 18px;
}
}
.eta-subtitle{
text-transform: none;
}
}
.style2{
text-align: center;
.title-wrap{
padding: 25px 0 10px;
max-width: 650px;
margin: 0 auto;
}
.eta-subtitle{
font-weight: 500;
}
.button-wrap{
margin-bottom: 10px;
margin-top: 15px;
}
}
&.text-left{
.style2{
text-align: left;
.title-wrap{
h2{
text-align: left;
}
}
}
ul.stylelisting{
list-style-type: none;
li{
position: relative;
padding-left: 22px !important;
line-height: 34px;
border: none !important;
&:before{
position: absolute;
top: 0;
left: 0;
z-index: 0;
content: "\f054";
font-family: 'FontAwesome';
color: #fff;
font-size: 12px;
}
}
}
}
&.text-right{
.style2{
text-align: right;
.title-wrap{
h2{
text-align: right;
}
}
}
}
.style2{
.title-wrap {
.eta-subtitle{
margin-top: 10px;
margin-bottom: 10px;
font-family: @titleFont;
}
.exp-title{
text-align: center;
position: relative;
z-index: 1;
}
.description{
margin-top: 15px;
}
}
}
}
.rs-cta.rs-cat-style3{
padding-bottom: 37px;
.pry-btn{
height: 55px;
line-height: 52px;
border-radius: 30px;
text-align: center;
display: inline-block;
color: #ffffff;
padding: 0 50px;
margin-top: 15px;
position: relative;
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
z-index: 1;
background: @primaryColor;
border: 2px solid #ffffff;
&:hover{
border-width: 2px;
background: @primaryColor;
opacity: 0.8;
border-color: #fff;
}
}
.cta-wrap{
.title-wrap{
.button-wrap{
padding-top:20px;
}
}
}
}
.rs-cta.rs-ctabg-style3{
.description{
margin-top: 10px;
}
.pry-btn{
height: 55px;
line-height: 52px;
text-align: center;
display: inline-block;
color: #ffffff;
padding: 0 30px;
margin-top: 15px;
position: relative;
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
z-index: 1;
background: @primaryColor;
border: 2px solid #ffffff;
&:hover{
border-width: 2px;
background: @primaryColor;
opacity: 0.8;
border-color: #fff;
}
}
.cta-wrap{
.title-wrap{
.button-wrap{
padding-top:20px;
}
}
}
}
//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;
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{
font-family: @titleFont;
.contact-title{
margin-bottom: 1px;
font-weight: 500;
font-size: 20px;
margin-top: 6px;
}
.des{
color: @bodyColor;
&:hover{
color: @primaryColor;
}
}
.label{
margin-bottom: 5px;
}
}
&: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;
border: 5px solid #e5e8eb;
line-height: 57px;
}
.address-text{
span{
display: block;
}
.des{
font-weight: 700;
}
}
}
}
}
.rs-free-course-contact {
input,
textarea,
select {
width: 100%;
border-radius: 3px;
border: 1px solid @whiteColor;
color: #767676;
background: @whiteColor;
padding: 10px 18px;
}
textarea {
height: 140px;
display: inherit;
outline: none;
}
.select-option {
position: relative;
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
z-index: 11;
position: relative;
}
&:after {
content: '\f107';
font-family: FontAwesome;
color: #767676;
right: 15px;
position: absolute;
top: 16px;
font-size: 20px;
pointer-events: none;
}
}
::-webkit-input-placeholder {
color: #767676;
opacity: 1;
}
:-ms-input-placeholder {
color: #767676;
opacity: 1;
}
::placeholder {
color: #767676;
opacity: 1;
}
}
/*--------------------------------------------------------------
services css
--------------------------------------------------------------*/
.rs-services-default{
.services-wrap {
transition: all .5s ease;
.services-item{
margin-bottom: 40px;
.services-icon{
font-size: 60px;
line-height: 60px;
width: 100%;
position:relative;
i{
color: @secondaryColor;
}
&:hover{
background-position: 20px -30px;
}
}
h4{
margin-bottom: 0;
font-size: 16px;
text-transform: lowercase;
font-weight: 400 !important;
}
.services-title{
font-size: 16px;
margin: 0 0 5px;
font-weight: 600 !important;
line-height: 20px !important;
}
}
}
&.services-center{
.services-icon{
display: block;
font-size: 40px;
float: none;
top: 8px;
text-align: center;
i{
margin: 0 auto;
}
}
.services-desc{
width: 100%;
text-align: center;
}
}
&.services-right{
.services-icon{
display: block;
font-size: 40px;
float: none;
width: 100%;
text-align: right;
i{
margin: 0 auto;
margin-right: 0;
}
}
.services-desc{
width: 100%;
text-align: right;
}
}
.services-item{
&.img-left{
display: flex;
vertical-align: top;
margin-bottom: 0;
.services-icon{
float: left;
width: 150px;
&:after{
background: @secondaryColor;
width: 40px;
height: 40px;
position: absolute;
left: 36%;
top: 30px;
content: "";
display: block;
opacity: 0.1;
}
img{
padding-right: 5px;
}
}
.services-desc{
padding-left: 30px;
float: left;
padding-top: 10px
}
}
&.img-right{
.services-icon{
float: right;
width: 30%;
}
.services-desc{
padding-right: 25px;
float: left;
width: 70%;
}
}
&.img-center{
float: none;
width: inherit;
.services-icon{
margin-bottom: 20px;
}
}
}
}
.service-home{
.services-wrap{
.services-item{
.services-icon{
&:before{
content: "";
position: absolute;
top: 35px;
left: 0;
right: 0;
width: 0px;
height: 0px;
transition: all .5s ease;
border-right: 60px solid transparent;
border-top: 60px solid @primaryColor;
border-left: 60px solid @primaryColor;
border-bottom: 60px solid @primaryColor;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
opacity: .05;
transform: rotate(-90deg);
z-index: -1;
border-bottom-right-radius: 60px;
}
}
}
&:hover{
box-shadow: 0 0 50px #eee;
.services-icon{
&:before{
left:150px;
}
}
}
}
}
.middle-column-shadow{
.rs-services-default .services-wrap{
box-shadow: 0 0 150px #eee;
}
}
.service_box{
.rs-services-default {
.services-wrap {
.services-item {
margin-bottom: 25px;
.services-title{
font-weight: 400 !important;
}
p{
margin: 0;
}
.readon{
background: #ffffff;
color: @primaryColor;
border-color: #ffffff;
margin-top: 15px;
i:before{
font-size: 20px;
margin-right: 10px;
position: relative;
top: 3px;
}
a{
color: #ffffff;
}
}
}
}
}
}
.rs-services1{
.services-title {
font-size: 15px;
font-family: @titleFont;
font-weight: 600;
}
.services-wrap {
.services-item{
border-bottom: none;
margin: 0;
padding: 5px 0 32px;
.services-icon{
font-size: 30px;
width: 100%;
i{
width: 60px;
height: 60px;
line-height: 60px;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
display: block;
}
}
.services-desc{
width:100%;
.services-title{
margin: 28px 0 10px;
}
}
&:hover{
.services-title a{
color: @hoverColor;
}
}
}
}
&.services-center{
.services-item{
position: relative;
padding: 0px 20px 14px;
z-index: 110;
overflow: hidden;
transition: all 0.6s ease 0s;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
.services-title {
margin: 0 0 12px !important;
}
}
&.services-left{
.services-item {
position: relative;
z-index: 110;
overflow: hidden;
transition: all 0.6s ease 0s;
margin-bottom: 30px;
.services-title {
font-weight: 600 !important;
line-height: 24px;
}
.services-icon{
position: relative;
display: inline-block;
font-size: 36px;
top: 0;
text-align: left;
i{
width: auto;
height: auto;
}
}
.services-desc{
position: relative;
float: right;
text-align: left;
.services-title{
margin-top: 0;
}
}
}
}
&.services-right{
.services-item {
position: relative;
padding: 25px 25px 2px 10px;
z-index: 110;
overflow: hidden;
transition: all 0.6s ease 0s;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
.services-title {
font-size: 17px;
font-weight: 500 !important;
line-height: 24px;
}
.services-icon{
position: relative;
display: inline-block;
font-size: 36px;
float: left;
width: 20%;
top: 0;
text-align: center;
}
.services-desc{
position: relative;
float: right;
text-align: left;
width: 78%;
line-height: 25px;
padding-left: 50px;
font-size: 14px;
.services-title{
margin-top: 0;
}
}
}
}
&.services-right{
.services-item {
.services-icon{
float: right;
}
.services-desc{
float: left;
}
}
}
&.services-center{
.services-icon{
display: block;
font-size: 36px;
float: none;
width: 100%;
top: 8px;
text-align: center;
i{
margin: 0 auto;
}
}
.services-desc{
float: none;
width: 100%;
text-align: center;
}
}
&.services-right{
.services-icon{
display: block;
font-size: 36px;
float: none;
width: 100%;
top: 8px;
text-align: right;
i{
margin: 0 auto;
margin-right: 0;
}
}
.services-desc{
float: none;
width: 100%;
text-align: right;
}
}
}
.rs-header-title.header-right {
.title{
text-align: right;
}
}
.services-style1{
.services-btn-part{
i{
margin-left: 5px;
position: relative;
top: 2px;
font-weight: 700;
&:before{
font-size: 15px;
}
}
}
}
.services-style-2{
border-radius: 6px;
transition: all .5s ease;
.services-wrap{
.services-item{
position: relative;
transition: all .5s ease;
top: 0;
.services-icon{
img{
height: 50px;
}
}
.services-desc{
transition: all .5s ease;
color: #fff;
padding: 0 15px;
max-width: 530px;
margin: 0 auto;
p{
color: #fff;
margin-bottom: 0;
}
.services-title2{
font-size: 24px;
margin: 12px 0 6px;
line-height: normal;
font-weight: 500 !important;
color: @secondaryColor;
a{
color: @secondaryColor
}
}
}
}
}
&.services-center{
.services-icon{
text-align: center;
}
.services-title2{
text-align: center;
}
.services-desc{
text-align: center;
}
&:hover{
.services-wrap{
.services-item{
top: -10px;
}
}
}
}
&.service-active{
background: @primaryColor;
.services-wrap{
.services-item{
.services-desc{
color: #fff;
.services-title2{
color: #fff;
a{
color: #fff;
}
}
}
}
}
}
&.services-left{
margin-bottom: 30px;
.services-wrap{
overflow: hidden;
.services-item{
.services-icon{
float: left;
width: 50px;
}
.services-title2{
text-align: left;
margin: 0;
font-weight: 500;
margin-top: 7px;
}
.services-desc{
text-align: left;
float: left;
width: 80%;
padding-left: 15px;
padding-right: 0;
}
}
}
}
&.services-right{
padding: 20px;
margin-bottom: 30px;
.services-wrap{
overflow: hidden;
.services-item{
.services-icon{
float: right;
width: 50px;
}
.services-title2{
text-align: right;
margin: 0;
font-weight: 500;
}
.services-desc{
text-align: right;
float: left;
width: 80%;
padding-right: 18px;
}
}
}
}
}
.service-inner.no-rounded{
border-radius: 0 !important;
}
.services-style-7{
&.services-center{
text-align: center;
}
}
/* Service Box Border Style*/
.rs-services1.services-left.border_style{
margin-bottom: 30px;
.services-wrap {
.services-item{
background: none;
box-shadow: none;
margin: 0;
padding: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
text-align: center;
.services-icon{
width: 80px;
i{
border: 2px solid @secondaryColor;
border-radius: 50%;
line-height: 70px;
height: 80px;
width: 80px;
font-size: 40px;
cursor: pointer;
background: #ffffff;
color: #28406d;
}
}
&:hover{
.services-icon{
i{
background:@secondaryColor;
color: @primaryColor;
}
}
}
.services-desc{
width: calc(~"100% - 80px");
padding-left: 15px;
p{
margin-bottom: 0;
}
}
}
}
}
.rs-services1.services-right{
margin-bottom: 30px;
.services-wrap {
.services-item{
background: none;
box-shadow: none;
margin: 0;
padding: 0;
.services-icon{
width: 80px;
float: right;
i{
border: 2px solid @secondaryColor;
border-radius: 50%;
line-height: 70px;
height: 80px;
width: 80px;
font-size: 40px;
cursor: pointer;
background: #ffffff;
color: #28406d;
&:hover{
background:@secondaryColor;
color: @primaryColor;
}
}
}
.services-desc{
width: calc(~"100% - 80px");
padding-right: 15px;
padding-left: 0;
text-align: right;
p{
margin-bottom: 0;
}
}
}
}
}
.proces-item{
position: relative;
z-index: 1;
position: relative;
padding-bottom: 5px;
padding-right: 30px;
margin-bottom: 40px;
.number{
font-size: 48px;
font-weight: 700;
display: block;
color: @bodyColor;
margin-bottom: 20px;
transition: all 0.3s ease 0s;
line-height: 1;
}
h4{
margin: 0 0 10px;
a{
color: @titleColor;
}
}
&.active,
&:hover{
.number{
color: @primaryColor;
}
}
}
.construction-process3{
margin-top: -140px;
}
.process-inner{
-webkit-box-shadow: 1px 0 3px 0px rgba(34, 34, 34, 0.3);
-moz-box-shadow: 1px 0 3px 0px rgba(34, 34, 34, 0.3);
box-shadow: 1px 0 3px 0px rgba(34, 34, 34, 0.3);
display: table;
width: 100%;
position: relative;
z-index: 1;
background: #ffffff;
-webkit-transition: all .3s;
transition: all .3s;
margin-top: -55px;
.process-item{
padding: 42px 20px 0;
border-top: none;
display: table-cell;
vertical-align: middle;
-webkit-transition: all .3s;
transition: all .3s;
}
.title{
font-size: 20px;
line-height: 28px;
margin-bottom: 8px;
}
.number{
font-size: 60px;
color: @primaryColor;
font-weight: 600;
margin-bottom: 35px;
margin-bottom: 12px;
line-height: 60px;
}
.des{
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s;
transition: all .3s;
line-height: 22px;
}
&.active,
&:hover{
margin-top: -80px;
margin-bottom: -80px;
.process-item{
background: @primaryColor;
padding-bottom: 44px;
border-color: @primaryColor;
.des{
opacity: 1;
visibility: visible;
}
.title,
.des,
.number{
color: #ffffff;
}
}
}
}
ul.check-list{
li{
position: relative;
padding-left: 22px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 16px;
list-style: none;
&:before{
position: absolute;
top: 4px;
left: 0;
content: "\f11b";
font-family: Flaticon;
color: @primaryColor;
font-weight: 700;
font-size: 14px;
}
}
}
.rs-services-style3{
position: relative;
overflow: hidden;
max-width: 360px;
.bg-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
-webkit-transition: all .7s ease;
transition: all .7s ease;
-webkit-transform: scale(1.05);
transform: scale(1.05);
background-size: cover;
&:after{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #222;
opacity: 0.7;
transition: 0.7s;
}
a{
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: all .7s ease;
transition: all .7s ease;
font-size: 15px;
height: 40px;
line-height: 38px;
padding: 0 30px;
color: #fff;
background: @secondaryColor;
border-color: @secondaryColor;
opacity: 0;
visibility: hidden;
z-index: 99;
&:hover{
opacity: .95 !important;
background: @secondaryColor;
}
&:before{
display: none;
}
}
}
.services-item{
position: relative;
z-index: 1;
.services-icon{
font-size: 44px;
span{
display: inline-block;
}
}
.services-desc{
.services-title{
margin-bottom: 10px;
font-size: 16px;
}
p{
&:last-child{
margin-bottom: 0;
}
}
}
}
&:hover{
.bg-img{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
z-index: 9;
a{
top: 50%;
opacity: 99;
visibility: visible;
}
&:after{
opacity: 0;
}
}
}
&.services-center{
text-align: center;
}
&.services-right{
text-align: right;
}
}
.slider-services-style2{
display: block;
position: relative;
overflow: hidden;
width: 100%;
box-shadow: 0 10px 20px rgba(0,0,0,.05);
border-radius: 3px;
border: 1px solid transparent;
margin-bottom: 20px;
.service-img{
overflow: hidden;
img{
max-width: 100%;
-webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
}
}
.services-desc{
padding: 27px 27px 8px;
background: #fff;
.services-title{
margin-bottom: 15px;
font-size: 20px;
}
.readon{
height: 44px;
line-height: 42px;
margin-bottom: 25px;
&:hover{
padding-right: 45px;
}
}
}
&:hover{
.service-img{
img{
filter: grayscale(0) blur(2px);
-webkit-filter: grayscale(0) blur(2px);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
.bg-img{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
a{
top: 50%;
}
}
}
}
.service-carousel{
.owl-stage-outer{
overflow: hidden;
}
.owl-nav {
&.disabled{
display: none;
}
}
.owl-dots{
text-align: center;
margin-top: 25px;
display: none;
.owl-dot{
height: 8px;
width: 20px;
border-radius: 30px;
border: 1px solid @primaryColor;
display: inline-block;
margin-right: 10px;
cursor: pointer;
&.active{
background: @primaryColor;
cursor: inherit;
}
}
}
.rs-services-style3{
max-width: 100%;
}
}
.light-arrow{
.owl-carousel .owl-nav [class*="owl-"]{
background: #fbfbfb !important;
color: @titleColor;
&:hover{
background: #fff !important;
color: @titleColor;
}
}
}
.service-style-3{
.services-sliders4{
.inner-dis{
padding: 35px 30px 20px;
background: #fbfbfb;
text-align: center;
.services-title{
font-size: 18px;
line-height: 26px !important;
margin-bottom: 10px;
}
}
}
}
.rs-services-style4{
position: relative;
transition: all .5s ease;
padding: 50px 20px 20px;
margin-bottom: 30px;
overflow: hidden;
.bg-img{
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
transition: all .5s ease;
}
.services-item{
.services-icon{
i{
font-size: 50px;
}
}
.services-icon{
i{
color: @primaryColor;
background-color: transparent;
font-size: 55px;
display: inline-block;
width: 70px;
height: 70px;
line-height: 70px;
color: #ffffff;
background: @secondaryColor;
border-radius: 50%;
font-size: 30px;
border: 2px solid transparent;
transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
text-align: center;
}
}
.services-desc{
transition: all .5s ease;
.services-title{
font-size: 20px;
margin: 25px 0 10px !important;
line-height: normal;
font-weight: 600 !important;
color: @titleColor;
margin: 28px 0 10px;
a{
color: @titleColor;
}
}
}
}
&.services-center{
border: 1px solid #e1e1e1;
.services-icon{
text-align: center;
}
.services-title2{
text-align: center;
}
.services-desc{
text-align: center;
}
}
&.services-left{
.services-item{
.services-title{
text-align: left;
margin: 0;
font-weight: 500;
}
.services-desc{
text-align: left;
}
}
}
&.services-right{
padding: 20px;
margin-bottom: 30px;
overflow: hidden;
.services-item{
.services-icon{
float: right;
width: 50px;
}
.services-title{
text-align: right;
margin: 0;
font-weight: 500;
}
.services-desc{
text-align: right;
float: left;
width: 80%;
padding-right: 18px;
}
}
}
&:hover{
.bg-img{
opacity: 1;
}
.services-icon i{
background: @primaryColor;
color: @secondaryColor;
}
}
}
.services-style-5{
.services-wrap{
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
}
.services-desc,
.services-item{
width: 180px;
height: 180px;
border-radius: 50%;
.services-title{
padding-top: 25px;
margin: 0 auto;
text-transform: uppercase;
border-radius: 50%;
position: relative;
a{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
}
}
.services-desc > div{
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
}
.services-item{
top: 20px;
box-shadow: 0 0 0 20px rgba(225,197,13,0.4), inset 0 0 3px rgba(255,255,255,0.2);
position: relative;
margin: 0 auto;
.icon_bg{
transition: all 0.6s ease-in-out;
padding-top: 30px;
text-align: center;
img{
max-width: 120px;
}
}
.services-title{
opacity: 0;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
color: #fff;
text-transform: uppercase;
width: 100%;
height: 100%;
}
&:hover{
.icon_bg{
transform: scale(0);
opacity: 0;
}
.services-title{
transform: scale(1);
opacity: 1;
pointer-events: auto;
background: @primaryColor;
width: 100%;
height: 100%;
}
}
}
.services-icon{
position: absolute;
right: -32px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
max-width: 120px;
background-repeat: no-repeat !important;
}
}
.service-readon{
background: @primaryColor;
color: #fff;
padding: 3px 17px;
display: inline-block;
font-size: 20px;
margin-top: 30px;
border-radius: 18px;
&:hover{
color: #fff;
opacity: 0.9;
}
i{
&:before{
font-size: inherit;
}
}
}
.rs-services{
.services-style-9 {
.services-wrap{
padding: 70px 35px 45px 35px;
position: relative;
border-bottom-width: 4px;
transition: all 0.3s ease 0s;
box-shadow: 0px 3px 36px rgba(0, 0, 0, 0.04);
position: relative;
background: #fff;
border-radius: 7px;
&:after{
content: "";
width: 0;
height: 4px;
background: @primaryColor;
position: absolute;
transition: all 0.5s ease 0s;
bottom: 0;
left: 50%;
z-index: 9;
transform: translateX(-50%);
}
.services-item{
.services-icon{
transition: all 0.5s ease 0s;
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, 0.04);
transition: all 0.3s ease 0s;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 100%;
img{
max-width: 45px;
}
}
.services-desc{
margin: auto;
.services-title{
margin-bottom: 8px;
font-weight: 600 !important;
font-size: 24px;
color: @primaryColor;
&.title-upper{
text-transform: uppercase;
}
a{
color: @primaryColor;
&:hover{
color: @secondaryColor;
}
}
}
p{
margin-bottom: 0;
}
}
}
&:hover{
&:after{
width: 100%;
}
.services-item{
.services-icon{
top: -35px;
}
}
}
}
&.services-center{
.services-desc{
text-align: center;
}
}
}
.services-style-7{
&.services-left{
.services-wrap{
.services-item{
display: flex;
align-items: center;
.services-icon{
width: 60px;
padding-right: 20px;
line-height: 50px;
img{
width: 42px;
}
}
.services-desc{
width: 70%;
padding-right: 10px;
.services-title{
font-size: 18px;
line-height: 27px !important;
margin-bottom: 0;
font-weight: 600;
}
p{
margin-bottom: 0;
}
}
}
}
}
}
}
.rs-services-style6{
position: relative;
border-radius: 6px;
transition: all .5s ease;
padding: 20px;
margin-bottom: 30px;
overflow: hidden;
.bg-img{
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
transition: all .5s ease;
}
.services-item{
.services-icon{
i{
font-size: 50px;
}
}
.services-icon{
i{
color: @primaryColor;
border: 2px solid @primaryColor !important;
background-color: transparent;
font-size: 55px;
display: inline-block;
width: 135px;
height: 135px;
line-height: 135px;
color: #ffffff;
background: @primaryColor;
border-radius: 50%;
font-size: 60px;
border: 2px solid transparent;
transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
text-align: center;
}
}
.services-desc{
transition: all .5s ease;
.services-title{
font-size: 24px;
margin: 25px 0 10px !important;
line-height: normal;
font-weight: 500 !important;
color: @titleColor;
margin: 28px 0 10px;
a{
color: @titleColor;
}
}
}
}
&.services-center{
.services-icon{
text-align: center;
}
.services-title2{
text-align: center;
}
.services-desc{
text-align: center;
}
}
&.services-left{
.services-item{
.services-title{
text-align: left;
margin: 0;
font-weight: 500;
}
.services-desc{
text-align: left;
}
}
}
&.services-right{
padding: 20px;
margin-bottom: 30px;
overflow: hidden;
.services-item{
.services-icon{
float: right;
width: 50px;
}
.services-title{
text-align: right;
margin: 0;
font-weight: 500;
}
.services-desc{
text-align: right;
float: left;
width: 80%;
padding-right: 18px;
}
}
}
&:hover{
.bg-img{
opacity: 1;
}
.services-item{
.services-icon{
i{
background: transparent;
color: @primaryColor;
font-size: 50px;
}
}
}
}
}
.rstab-main{
&.vertical{
display: flex;
align-items: center;
.nav-item:last-child{
margin-bottom: 0 !important;
}
}
}
.fullwidth-services-box{
.services-style-2{
background: rgba(2,27,121, .7);
box-shadow: 0 0 20px @secondaryColor;
&:hover{
background: @secondaryColor;
}
}
}
.style-bg{
.counter-top-area{
padding: 60px 0 30px;
.count-number h3 {
margin: 0;
}
}
}
.rs-multi-rallax{
position: relative;
.rs-multi-image{
position: absolute;
}
}
.single-posts-meta{
.tag-line{
i{
color: @secondaryColor;
margin-right: 3px;
}
}
}
/* --------------------------------
Vertical Timeline CSS
-------------------------------- */
@media only screen and (min-width: 1170px) {
.cd-is-hidden {
visibility: hidden;
}
}
.cd-timeline {
overflow: hidden;
margin: 2em auto;
}
.short-info h2{
font-size: 30px;
line-height: 40px;
}
.cd-timeline__container {
position: relative;
width: 90%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
iframe{
margin-bottom: 15px;
}
}
.timeline-icon{
font-size: 30px;
width: 80px;
height: 80px;
line-height: 80px;
color: @primaryColor;
@media screen and (max-width: 767px){
font-size: 15px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
}
.cd-timeline__container::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: @secondaryColor;
}
@media only screen and (min-width: 1170px) {
.cd-timeline {
margin-top: 34px;
margin-bottom: 3em;
}
.cd-timeline__container::before {
left: 50%;
margin-left: -2px;
}
}
.cd-timeline__block {
position: relative;
margin: 80px 0;
}
.cd-timeline__content .event-shedule-info{
.speaker-name, .speaker-name a {
color: #f5f5f5;
margin-bottom: 0;
font-size: 14px;
padding-bottom: 0;
}
.event-des{
font-size: 15px;
line-height: 22px;
}
.event-title{
color: #fff !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
font-size: 24px;
a{
color: #fff !important;
}
}
p{
margin-top: 10px;
}
}
.cd-timeline__block:after {
/* clearfix */
content: "";
display: table;
clear: both;
}
.cd-timeline__block:first-child {
margin-top: 0;
}
.cd-timeline__block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline__block {
margin: 4em 0;
}
}
.cd-timeline__img {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
}
.cd-timeline__img img {
display: block;
width: 100%;
height: 100%;
position: relative;
left: 0;
top: 0;
margin-left:0;
margin-top: 0;
border-radius: 100% !important;
}
.cd-timeline__img.cd-timeline__img--picture {
background: @secondaryColor;
span{
color: #fff;
}
}
.cd-timeline__img.cd-timeline__img--movie {
background: #c03b44;
}
.cd-timeline__img.cd-timeline__img--location {
background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
.cd-timeline__img {
left: 50%;
margin-left: -40px;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.cd-timeline__img.cd-timeline__img--bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}
@media only screen and (max-width: 1199px) {
body .cd-timeline__img{
left: -18px;
}
body .cd-timeline__content{
margin-left: 80px;
}
}
@media only screen and (max-width: 767px) {
.cd-block-start .cd-timeline__img .timeline-year {
font-size: 12px;
line-height: 12px;
}
body .cd-timeline__img {
left: -10px;
width: 60px;
height: 60px;
line-height: 60px;
}
body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title {
a i{
color: @primaryColor;
}
&:hover{
a i{
color: #ffffff;
}
}
}
}
@media only screen and (max-width: 480px) {
body .cd-timeline__content .short-info {
padding: 10px;
}
body .cd-timeline__content {
margin-left: 65px;
}
body .cd-timeline__content .short-info h2,
body .cd-timeline__content .short-info h3{
font-size: 20px;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline__content {
position: relative;
margin-left: 60px;
background: #f3f5f4;
border-radius: 3px;
padding: 1em;
// border-top: 4px solid @secondaryColor;
.short-info{
background: #f7f7fc;
padding:50px;
border-radius: 4px;
h2,
h3{
color: @secondaryColor;
font-size: 24px;
line-height: 28px !important;
margin-bottom: 14px;
a{
color: @secondaryColor;
}
}
.career_thumb{
margin-bottom: 23px;
}
}
.cd_timeline_desc{
margin-left: 60px;
font-size: 20px;
font-weight: 600;
color: @titleColor;
opacity: 1;
h3{
color: @secondaryColor;
font-size: 20px;
line-height: 28px !important;
margin-bottom: 14px;
}
p{
font-size: 16px;
color: @titleColor;
}
}
}
.cd-timeline__content:after {
/* clearfix */
content: "";
display: table;
clear: both;
}
.cd-timeline__content::before {
/* triangle next to content block */
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 15px solid transparent;
border-right: 15px solid #f3f5f4;
}
.cd-timeline__content p,
.cd-timeline__read-more,
.cd-timeline__date {
font-size: 16px;
color: @titleColor;
}
.cd-timeline__read-more,
.cd-timeline__date {
display: inline-block;
}
.cd-block-start{
padding-bottom: 100px;
.cd-timeline__img{
line-height: 20px;
padding: 10px;
font-size: 15px;
.timeline-year{
position: relative;
top: 5px;
}
}
}
.cd-block-done{
padding-bottom: 80px;
text-transform: uppercase;
}
.cd-timeline__read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.cd-timeline__read-more:hover {
background-color: #bac4cb;
}
.cd-timeline__date {
float: left;
padding: .8em 0;
opacity: .7;
}
@media only screen and (min-width: 768px) {
.cd-timeline__content h2 {
font-size: 2rem;
}
.cd-timeline__content p {
font-size: 16px;
color: @titleColor;
}
.cd-timeline__read-more,
.cd-timeline__date {
font-size: 1.4rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline__content {
margin-left: 0;
padding: 0;
width: 43%;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.cd-timeline__content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: #f3f5f4;
}
.cd-timeline__read-more {
float: left;
}
.cd-timeline__date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 1.6rem;
}
.cd-timeline__block:nth-child(odd) .cd-timeline__content {
float: right;
}
.cd-timeline__block:nth-child(odd) .cd-timeline__content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: #f3f5f4;
}
.cd-timeline__block:nth-child(odd) .cd-timeline__read-more {
float: right;
}
.cd-timeline__block:nth-child(odd) .cd-timeline__date {
left: auto;
right: 133%;
text-align: right;
}
.cd-timeline__content.cd-timeline__content--bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */
.cd-timeline__block:nth-child(odd) .cd-timeline__content.cd-timeline__content--bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.timeline-alter {
.timeline-item{
position: relative;
display: table;
table-layout: fixed;
width: 100%;
padding-bottom: 25px
}
.left-part {
width: 30%;
display: table-cell;
padding-right: 25px;
min-height: 100%;
text-align: right;
vertical-align: top
}
.item-period {
margin: 2px 0 3px;
font-size: 14px;
line-height: 1.4em
}
.item-company {
display: block;
color: #aaa;
margin: 0 0 4px;
font-size: 12px;
line-height: 1.45em
}
.divider {
position: absolute;
top: 0;
left: 30%;
bottom: 0;
width: 1px;
background-color: #eee;
&:after {
content: '';
display: block;
margin-top: 12px;
width: 11px;
height: 11px;
margin-left: -5px;
border-radius: 5px;
border: 2px solid;
border-color: @secondaryColor;
background-color: #fff;
}
}
.right-part {
width: 70%;
display: table-cell;
padding-left: 25px;
padding-right: 15px;
vertical-align: top;
h4{
font-size: 16px;
margin-bottom: 5px;
}
}
.item-title {
font-size: 16px;
margin-bottom: 3px
}
}
.timeline-alter .right-part p,
.timeline-alter .right-part p>* {
font-size: .92em
}
/* --------------------------------
Horizontal Timeline CSS
-------------------------------- */
.wrap-list {
overflow-x: hidden;
}
.wrap-index {
overflow-x: hidden;
-webkit-box-sizing: unset !important;
-moz-box-sizing: unset !important;
box-sizing: unset !important;
}
.over-wrap-index{
.prev{
position: absolute;
left: -1px;
top: 61%;
transform: translateY(-50%);
font-size: 30px;
background: @secondaryColor;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
color: #fff;
&:hover{
color: @primaryColor;
}
&.disabled{
background: #f2f2f2;
cursor: default;
color: #fff !important;
}
}
.next{
position: absolute;
right: -1px;
top: 61%;
transform: translateY(-50%);
font-size: 30px;
background: @secondaryColor;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
color: #fff;
&:hover{
color: @primaryColor;
}
&.disabled{
background: #f2f2f2;
cursor: default;
color: #fff !important;
}
}
}
.over-wrap-list {
position: relative;
}
.over-wrap-list .prev,
.over-wrap-list .next {
position: absolute;
top: 50%;
margin-top: -80px;
font-size: 80px;
text-decoration: none;
color: #A09F9F;
text-shadow: 1px 1px #fff;
}
.over-wrap-list .prev.disabled,
.over-wrap-list .next.disabled {
color: #DFDFDF;
}
.over-wrap-list .prev {
left: 30px;
}
.over-wrap-list .prev:active {
left: 29px;
}
.over-wrap-list .next {
right: 30px;
}
.over-wrap-list .next:active {
right: 29px;
}
.over-wrap-index {
position: relative;
}
.over-wrap-index:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
z-index: 999;
background: url('../images/about-overlay-l.png') 0px top no-repeat;
background-size: cover;
background-position-x: right;
display: none;
}
.over-wrap-index:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 200px;
z-index: 999;
background: url('../images/about-overlay-r.png') right top no-repeat;
background-size: cover;
background-position-x: left;
display: none;
}
ul.index {
padding-left: 0;
list-style: none;
font-size: 0;
position: relative;
padding-top: 30px;
padding-bottom: 50px;
}
ul.index li {
font-size: 14px;
display: inline-block;
width: 200px;
text-align: center;
position: relative;
vertical-align: bottom;
padding-bottom: 15px;
font-weight: 700;
min-height: 40px;
}
ul.index li:after {
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid @secondaryColor;
position: absolute;
bottom: -8px;
left: 90px;
z-index: 99;
overflow: hidden;
}
.content-wrap{
display: flex;
&.col-full{
display: block;
}
.date{
margin-left: 15px;
background: transparent;
color: #777;
font-size: 100%;
}
.clear-both{
clear: both;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 13px;
display: block;
max-width: 360px;
}
.career-title{
text-transform: capitalize;
color: @secondaryColor;
font-weight: 600;
font-size: 26px;
line-height: 36px;
margin-bottom: 8px;
}
}
.col-left{
width: 45%;
padding-right: 35px;
}
.col-right{
width: 55%;
padding-left: 15px;
}
ul.index li.active:after{
background: @secondaryColor;
}
ul.index li a {
text-decoration: none;
font-size: 24px;
color: #646464;
outline: none;
}
ul.index li a:hover {
color: #7e7e7e;
}
ul.index li.active a {
font-size: 48px;
color: @secondaryColor;
}
ul.index:after {
content: "";
position: absolute;
bottom: 0px;
height: 50px;
left: 0;
right: 0;
border-top: 1px dotted @secondaryColor;
}
ul.list {
padding-left: 0;
list-style: none;
font-size: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
ul.list > li {
font-size: 14px;
display: inline-block;
padding-top: 20px;
vertical-align: top;
}
ul.list > li .image {
width: 200px;
float: left;
position: relative;
z-index: 2;
}
.over-wrap-list iframe{
display: none;
}
.over-wrap-list .show-me iframe{
display: block !important;
}
.content-wrap .post_image,
.content-wrap .content{
display: none;
}
.content-wrap .post_image img{
border-radius: 5px;
}
.over-wrap-list .show-me .content-wrap .post_image,
.over-wrap-list .show-me .content-wrap .content{
display: block !important;
}
#wrap-list{
iframe{
margin-top: 10px;
}
}
ul.list > li .image:before,
ul.list > li .image:after {
content: "";
position: absolute;
z-index: -1;
width: 50%;
height: 80%;
max-height: 60px;
-webkit-box-shadow: 0 15px 40px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 15px 40px 5px rgba(0, 0, 0, 0.5);
bottom: 20px;
}
ul.list > li .image:before {
left: 20px;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
ul.list > li .image:after {
right: 20px;
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
ul.list > li .image img {
min-width: 100%;
min-height: 150px;
display: block;
max-width: 100%;
height: auto;
border: 1px solid #C0C0C0;
padding: 7px;
background: @secondaryColor;
border-radius: 2px;
}
ul.list > li .content {
color: @bodyColor;
font-size: 16px;
line-height: 28px;
}
ul.list > li .content .title {
text-transform: capitalize;
color: @secondaryColor;
font-weight: 700;
font-size: 26px;
line-height: 36px;
margin-bottom: 5px;
}
.designation{
i{
margin-right: 10px;
}
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.one-line {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.arrow-up {
border-left-color: transparent;
border-right-color: transparent;
border-top-style: none;
}
.arrow-down {
border-left-color: transparent;
border-right-color: transparent;
border-bottom-style: none;
}
.arrow-right {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-style: none;
}
.arrow-left {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-style: none;
}
.arrow {
width: 0;
height: 0;
display: inline-block;
vertical-align: middle;
border-color: white;
border-width: 5px;
border-style: solid;
}
.arrow.up {
border-left-color: transparent;
border-right-color: transparent;
border-top-style: none;
}
.arrow.down {
border-left-color: transparent;
border-right-color: transparent;
border-bottom-style: none;
}
.arrow.right {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-style: none;
}
.arrow.left {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-style: none;
}
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.slick-slide,
.slick-slide:focus {
outline: none;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Responsive
========================================================================== */
@media only screen and (min-width: 35em) {
}
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
}
@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
/* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/* ==========================================================================
End Horizontal timeline
========================================================================== */
/*--------------------------------------------------------------
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-2{
position: relative;
z-index: 1;
.video-desc{
position: absolute;
top: 70%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
font-size: 20px;
}
.overly-border{
border: 1px solid @primaryColor;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
z-index: 0;
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
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 {
.video-circle1{
height: 415px;
width: 415px;
animation: banner-right-circle 5s linear infinite;
}
.video-circle1,
.video-circle2{
border: 1px solid @primaryColor;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: banner-right-circle 5s linear infinite;
z-index: 1;
}
.video-circle2{
height: 350px;
width: 350px;
animation: banner-right-circle2 5s linear infinite;
}
}
}
@keyframes banner-right-circle {
0% {
height: 250px;
width: 250px;
opacity: 1;
}
100% {
height: 415px;
width: 415px;
opacity: .1;
}
}
@keyframes banner-right-circle2 {
0% {
height: 150px;
width: 150px;
opacity: 1;
}
100% {
height: 405px;
width: 405px;
opacity: .1;
}
}
.readon{
cursor: pointer;
display: inline-block;
position: relative;
transition: all 0.4s;
padding: 8px 30px;
font-size: 14px;
font-weight: 500;
line-height: 26px;
color: #ffffff;
background: @btnBgColor;
text-transform: uppercase;
z-index: 1;
border: 2px solid @btnBgColor;
border-radius: 3px;
font-family: @titleFont;
&:hover {
background: @btnHoverColor;
color: @btnBgColor;
opacity: 0.99;
border-color:@secondaryColor;
}
&.white{
background: @whiteColor;
color: @primaryColor;
&:hover{
background: @titleColor !important;
color: @whiteColor;
}
}
}
.rev-custom-btn{
position: relative;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
&:before{
display: block;
position: absolute;
left: 0px;
bottom: 0px;
height: 0px;
width: 100%;
z-index: -1;
content: '';
background: @btnColor;
border-radius: 3px;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
&:hover {
background: @btnColor;
color: @whiteColor;
opacity: 0.99;
&:before{
top: 0%;
bottom: auto;
height: 100%;
}
}
}
.rs-btn2{
&.btn-center{
text-align: center;
}
&.btn-right{
text-align: right;
}
}
.blog-button a{
color: #fff;
}
/* ------------------------------------
24. Blog Pagination
---------------------------------------*/
.page-numbers{
.dots {
padding-left: 13px;
border-right: 1px solid #E6E6E6;
padding-right: 20px;
line-height: 24px;
display: inline-block;
}
}
.rs-pagination-area {
clear: both;
text-align: center;
width: 100%;
margin-bottom: 20px;
.pagination {
padding: 0;
margin: 0;
}
.nav-links {
display: inline-block;
padding: 0 5px;
height: 60px;
line-height: 60px;
box-shadow: 0px 8px 26px 0px rgba(0, 0, 0, 0.1);
span,
a{
margin: 0px 3px;
position: relative;
width: 40px;
height: 40px;
color: @titleColor;
font-size: 14px;
font-weight: 500;
line-height: 40px;
text-align: center;
border-radius: 3px;
display: inline-block;
background-color: #ffffff;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
&:hover{
color: @secondaryColor;
}
}
a{
&:after{
content: '';
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: #d6fbff;
}
}
a:hover,
span.current {
color: @secondaryColor;
}
a.next.page-numbers {
border-right: 0;
&:hover{
}
}
.next,
.prev {
position: relative;
font-size: 0;
top: -4px;
&:before{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: @titleColor;
font-family: FontAwesome;
z-index: 11;
font-size: 16px;
transition: 0.4s;
}
&:hover{
&:before{
color: @secondaryColor;
}
}
}
.prev:before {
content: "\f104";
}
.next:before {
content: "\f105";
}
}
}
.pagination-pages {
display: inline-block;
border: 1px solid #f1f1f1;
padding: 11px 30px;
border-radius: 10px;
}
.entry-footer .edit-link {
padding: 20px;
display: block;
}
.page-links {
display: block;
clear: both;
span {
padding: 3px 5px;
margin: 0 0 0 5px;
}
.current span {
color: @secondaryColor;
}
a span {
background: transparent !important;
color: #757575;
}
}
.comment-list{
.pingback,
.trackback {
list-style: none;
padding-bottom: 15px;
padding-top: 15px;
}
}
.rs-blog-details .bs-meta li.category-name a {
line-height: 22px;
}
.single #content h3,
.single #content h4 {
margin-bottom: 17px;
}
li.category-name ul.post-categories {
position: relative;
float: none !important;
padding-left: 22px !important;
}
li.category-name ul.post-categories:before {
content: "\f115";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
left: 0;
top: 7px;
color: @secondaryColor;
}
.transparent-btn{
background: #ffffff;
color: @bodyColor;
border: 1px solid;
border-color: @primaryColor;
border-radius: 3px;
padding: 0 20px;
height: 40px;
line-height: 40px;
display: inline-block;
position: relative;
font-size: 16px;
text-transform: uppercase;
font-weight: 500;
&:before{
position: absolute;
height: 100%;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
right: 50px;
opacity: 0;
top: 0px;
content: "\f054";
font-size: 15px;
font-family: fontawesome;
}
&:hover{
padding-right: 40px;
&:before{
right: 20px;
opacity: 1;
}
border-color: @primaryColor;
background: @primaryColor;
color: #ffffff;
}
}
/*--------------------------------
Latest News
----------------------------------*/
.rs-latest-news {
.news-normal-block {
padding: 0px;
transition: 0.3s;
background-size: cover !important;
.news-img {
margin-bottom: 0px;
padding: 13px 13px 8px;
img {
width: 100%;
}
}
.news-info{
padding: 50px 30px;
padding-right: 30%;
color: #fff;
a{
color: #fff;
&:hover{
color: @primaryColor;
}
}
.categories{
font-size: 16px;
margin: 0 0 16px;
}
}
.news-title {
font-size: 28px;
margin-bottom: 20px;
font-weight: 600 !important;
line-height: 38px !important;
a {
&:hover,
&:focus {
color: @primaryColor;
}
}
}
.news-desc {
p {
margin-bottom: 30px;
}
}
.news-btn {
a {
display: inline-block;
margin-left: auto;
padding: 4px 20px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
background-color: @primaryColor;
color: #fff;
border-radius: 35px;
text-transform: uppercase;
&:hover {
background-color: @hoverColor;
}
}
}
}
.news-list-block {
.news-list-item {
transition: 0.3s;
background: #fff;
&:hover {
-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.news-title {
font-size: 18px !important;
margin-bottom: 10px;
font-weight: 600 !important;
a {
color: #212121;
&:hover, &:focus {
color: @primaryColor;
}
}
}
.news-desc {
p {
margin-bottom: 0;
}
}
.categories{
font-size: 14px;
margin: 0 0 10px;
a{
color: #181818;
&:hover{
color: @primaryColor;
}
}
}
.news-content{
padding: 20px;
background: #ffffff;
}
}
}
}
.latest-news-slider {
.news-normal-block {
box-shadow: none !important;
}
.slick-arrow {
position: absolute;
z-index: 11;
bottom: 0;
right: -104px;
height: 42px;
width: 42px;
font-size: 0;
border: 0;
background-color: rgba(0,0,0,0.1);
color: @primaryColor;
cursor: pointer;
outline: 0;
border-radius: 50%;
transition: 0.3s;
top: auto;
&:after {
font-family: FontAwesome;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 22px;
color: inherit;
text-indent: 2px;
}
&.slick-prev {
left: auto;
&:after {
content: "\f104";
}
}
&.slick-next {
right: -160px;
&:after {
content: "\f105";
}
}
&:hover {
background-color: @primaryColor;
color: #fff !important;
}
}
}
.latest-news-nav {
.slick-track {
width: 100% !important;
}
.slick-slide {
width: calc(~"100% - 2px") !important;
margin-bottom: 12px;
cursor: pointer;
background-color: #fff;
border: 1px solid rgba(34, 34, 34, 0.1);
padding: 13px;
transition: 0.3s;
&.slick-current, &:hover {
background-color: @primaryColor;
-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
img {
opacity: 0.8;
}
}
}
}
.rs-latest-news{
&.style2{
.latest-news-nav {
.slick-track {
width: 100% !important;
}
.slick-slide {
width: calc(~"100% - 2px") !important;
margin-bottom: 12px;
cursor: pointer;
background-color: #fff;
border: 1px solid rgba(34, 34, 34, 0.1);
padding: 13px;
&.slick-current,
&:hover {
background: #fff;
border-color: #ccc;
-webkit-box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
img {
opacity: 0.8;
}
}
}
}
.news-list-block {
.news-list-item {
+ .news-list-item{
margin-top: 15px;
}
}
}
.slick-arrow {
bottom: -95px;
right: -10px;
&.slick-next {
right: -65px;
}
}
}
}
.rs-services3{
overflow: hidden;
padding: 0;
margin: 0;
.col-services10{
float: right;
width: 80%;
.feature-title{
padding-top: 26px;
margin: 0 0 13px;
font-size: 22px;
a{
color: @secondaryColor;
}
}
.slick-list{
padding: 0 0 0 25px;
}
}
&.services-right{
.col-services10{
float: left;
width: 80%;
.slick-list{
padding: 0 25px 0 0;
}
}
.col-services2{
float: left;
width: 20%;
}
}
.col-services2{
float: left;
width: 20%;
}
.heading-block{
text-align: center;
h4{
font-size: 16px;
margin: 15px 0;
}
}
.slick-vertical .slick-slide{
padding: 0 5px;
}
.item-thumb img{
border-radius: 0 !important;
cursor: pointer;
}
.slider-nav{
margin: 0 !important;
}
.slick-arrow{
display: block;
position: absolute;
top: 10px;
z-index: 9999;
left: 45%;
transform: translateY(-50%);
transform: rotate(90deg);
width: 42px;
height: 42px;
line-height: 42px;
background: @secondaryColor;
color: #fff;
border-radius: 50%;
transition: 0.6s ease all;
opacity: 1;
opacity: 0;
visibility: hidden;
&:after{
top:-2px;
}
&.slick-next{
bottom: 28px;
top: auto;
}
&:hover{
background: @primaryColor;
color: @secondaryColor;
}
}
.col-services2{
.slick-arrow{
opacity:1;
visibility: visible;
}
&:hover{
.slick-arrow{
opacity:1;
visibility: visible;
}
}
}
}
.rs-addon-slider .team-item {
padding: 0 15px;
}
.team-grid-style1,
.team-slider-style1 {
.team-item {
position: relative;
outline: none;
border-radius: 5px;
.content-part {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
text-align: center;
z-index: 1;
transition: 0.4s;
opacity: 0;
.name {
margin-bottom: 8px;
font-size: 22px;
a {
color: #ffffff;
&:hover {
color: @titleColor;
}
}
}
.designation {
color: #ffffff;
margin-bottom: 16px;
display: block;
width: 100%;
text-align: center;
font-size: 15px;
}
.social-links {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
li {
display: inline-block;
margin-right: 20px;
a {
display: inline-block;
color: #ffffff;
&:hover {
color: @titleColor;
}
}
&:last-child {
margin: 0;
}
}
}
}
&:after {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, 100%) scale(0.1);
background: @secondaryColor;
opacity: 0;
border-radius: 3px;
transition: 0.4s;
}
&:hover {
.content-part {
transform: translate(-50%, -50%);
opacity: 1;
}
&:after {
transform: translate(-50%, -50%) scale(1);
opacity: 0.9;
}
}
&:focus{
outline: none;
}
}
.nav-style {
position: relative;
.owl-nav {
display: block;
position: absolute;
top: -80px;
right: 0;
.owl-prev,
.owl-next {
display: inline-block;
i {
transition: 0.4s;
&:before {
font-family: Flaticon;
font-size: 22px;
}
}
&:hover {
i {
color: @secondaryColor;
}
}
}
.owl-prev {
i {
&:before {
content: "\f134";
}
}
&:after {
content: "/";
padding: 0 5px 0 5px;
position: relative;
top: -3px;
}
}
.owl-next {
i {
&:before {
content: "\f133";
}
}
}
}
}
}
// 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;
}
}
.team-title{
color: #ffffff;
font-weight: 500;
line-height: 1.4;
display: block;
margin: 10px 0 5px;
}
.social-icons{
padding-top: 2px;
a{
padding: 0 3px;
}
}
.nolink{
pointer-events: none;
}
.cat-doctor{
font-size: 14px;
a{ text-decoration: none;
color: #ffffff;
text-transform: uppercase;
}
}
.team-name{
margin: 18px 0 0;
font-weight: 500;
}
.team-title {
color: #eee;
font-size: 13px;
font-weight: 400;
padding: 0;
display: block;
text-transform: uppercase;
a{
color: #eee;
pointer-events: none;
}
}
}
&:hover{
.team-content {
bottom: 0;
}
.team-img-sec{
&:before{
height:100%;
}
}
}
}
}
.team-slider-style6{
.team-name{
font-size: 22px;
margin-bottom: 0;
}
.team-content{
padding-top: 18px;
}
.team-item{
.team-item-wrap{
overflow: hidden;
img{
border-radius: 5px;
}
}
.social-icons{
position: absolute;
top: 10px;
right: -20px;
opacity: 0;
visibility: hidden;
transition: 0.4s;
background: @secondaryColor;
padding: 5px 5px 5px 10px;
border-radius: 3px;
a{
display: block;
color: #fff;
transition: 0.4s;
}
}
&:hover{
.social-icons{
opacity: 1;
visibility: visible;
right: 10px;
}
}
}
}
.icon-button{
a{
background: @primaryColor;
color: #fff;
padding: 3px 17px;
display: inline-block;
font-size: 20px;
margin-bottom: 25px;
border-radius: 18px;
&:hover{
color: #fff;
background: @secondaryColor;
}
i{
&:before{
font-size: inherit;
}
}
}
}
.blogfull{
.icon-button{
a{
margin-bottom: 0px;
}
}
}
.rs-testimonial-slider1{
.slick-list{
padding-bottom: 25px;
}
.testi-item {
background: #f3f8f9;
max-width: 1000px;
margin: 0 0 0 auto;
position: relative;
right: -15px;
.img-part {
position: absolute;
left: -220px;
top: 50px;
img {
border-radius: 5px;
max-width: 435px;
}
}
.content-part {
padding: 100px 50px 98px 320px;
p {
font-family: @titleFont;
font-weight: 600;
color: @titleColor;
font-size: 36px;
line-height: 46px;
position: relative;
margin-bottom: 70px;
&:before {
position: absolute;
left: -30px;
top: -13px;
content: "\f10d";
}
&:after {
position: relative;
bottom: -7px;
right: -8px;
content: "\f10e";
}
&:before,
&:after {
font-family: fontawesome;
font-size: 20px;
color: @titleColor;
}
}
.name {
margin: 0;
color: @titleColor;
font-weight: 500;
font-size: 26px;
}
.designation {
}
}
}
.rs-carousel {
&.nav-style2 {
.owl-nav {
bottom: 145px;
right: 50px;
top: unset;
}
}
}
.slick-slider{
.slick-arrow{
right: 65px;
top: auto;
bottom: 74px;
}
.slick-prev{
right: 115px;
}
}
}
.rs-testimonil_style5{
.slider-nav {
.slick-current.slick-active{
display:none;
}
.slick-slide {
padding: 0 7.5px;
img{
border-radius: 3px;
}
}
}
.slider-part{
.image-wrap{
padding-left: 7.5px;
img{
border-radius: 5px;
}
}
.content-innner{
h4{
margin-bottom: 0;
}
}
}
.slick-next{
display: none !important;
}
.slick-slider .slick-arrow:before{
box-shadow: none;
content: "\f110";
}
.slick-slider .slick-arrow {
top: auto;
right: -81%;
bottom: 15px;
}
}
/*//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-style4,
.team-slider-style4 {
.owl-stage-outer {
overflow-y: visible;
}
.team-item {
margin-bottom: 125px;
position: relative;
overflow: visible;
&:before {
display: none;
}
.team-content {
color: #f8560c;
background: #fff;
padding: 20px;
text-align: center;
z-index: 9;
position: absolute;
z-index: 1;
opacity: 1;
width: unset;
height: unset;
display: inline-block;
top: unset;
bottom: -85px;
padding: 20px 20px 25px;
-webkit-box-shadow: 10px 17px 38px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 17px 38px 0 rgba(0, 0, 0, 0.1);
box-shadow: 10px 17px 38px 0 rgba(0, 0, 0, 0.1);
left: 50%;
max-width: 310px;
transform: translateX(-50%);
width: 95%;
.team-name {
display: block;
font-size: 22px;
margin-bottom: 0px;
text-transform: capitalize;
font-weight: 600;
a {
color: @primaryColor;
}
}
.team-title {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
padding-top: 5px;
display: block;
font-family: 'Poppins', sans-serif;
color: #0a0a0a;
}
.team-desc {
font-size: 14px;
margin-bottom: 0;
color: #777;
position: relative;
z-index: 1;
max-height: 0;
opacity: 0;
line-height: 24px;
-webkit-transition: all 0.6s, max-height 0.5s;
-o-transition: all 0.6s, max-height 0.5s;
-moz-transition: all 0.6s, max-height 0.5s;
transition: all 0.6s, max-height 0.5s;
overflow: hidden;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
&:before {
content: '';
position: absolute;
z-index: 1;
background: @primaryColor;
top: 0;
left: 50%;
width: 50px;
height: 2px;
margin-left: -25px;
}
}
.social-icons {
text-align: center;
margin-top: 12px;
a {
display: inline-block;
i {
color: @primaryColor;
font-size: 15px;
width: 35px;
height: 35px;
line-height: 35px;
background: transparent;
text-align: center;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
border-radius: 50%;
margin: 0;
}
}
}
}
&:before {
background: transparent;
}
&:hover {
.team-content {
opacity: 1;
top: unset;
.team-desc {
position: relative;
max-height: 400px;
opacity: 1;
text-align: center;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.4s, max-height 1.5s;
-o-transition: all 0.4s, max-height 1.5s;
-moz-transition: all 0.4s, max-height 1.5s;
transition: all 0.4s, max-height 1.5s;
padding-top: 18px;
margin-top: 8px;
}
}
}
}
}
// 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: 700;
font-size: 22px;
margin-bottom: 10px;
text-transform: capitalize;
a{ text-decoration: none;
color: @titleColor;
&:hover{
color: @secondaryColor;
}
}
}
span.team-title{
font-size: 16px;
color: #505050;
font-weight: 500;
}
}
}
}
.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: 110px;
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: 22px;
font-weight: 700;
line-height: 30px;
margin: 5px;
margin-bottom: 5px;
text-transform: capitalize;
a {
color: #222;
}
}
.team-title {
font-size: 17px;
text-transform: capitalize;
color: #222;
float: none;
text-align: center;
font-weight: 500;
}
}
.team-desc{
display: none;
}
.social-icons {
bottom: -100px !important;
transition: all .3s ease 0s;
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
z-index: 100;
left: 50%;
opacity: 0;
transform: translateX(-50%) scale(.5);
-webkit-transition: .4s all ease;
transition: .4s all ease;
a {
display: block;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0;
border: none;
text-align: center;
color: #fff;
display: inline-block;
transition: all .3s ease 0s;
background: 0 0 !important;
margin-right: 8px;
i {
transition: all .3s ease 0s;
}
}
}
&:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3px;
// background: @primaryColor;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
transition: .4s all ease;
left: 0;
}
&:hover {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3px;
// background: @primaryColor;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
transition: .4s all ease;
left: 0;
}
}
&:hover {
.image-wrap {
img {
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
.team-content {
opacity: 1;
width: 100%;
visibility: visible;
transform: translate(0,0);
top: unset;
bottom: 0;
height: 150px;
background: #222;
&:before{
background: #222;
}
.member-desc {
.team-name {
a {
color: #fff;
}
}
.team-title {
color: #fff;
}
&:before{
background: #222;
}
}
.social-icons {
bottom: 25px !important;
opacity: 1;
transform: translateX(-50%) scale(1);
}
}
}
}
}
.rs-testimonial-slider4,
.rs-testimonial-slider2,
.rs-testimonial-slider3{
.slick-slider {
margin:0 -15px;
}
.slick-slide {
margin-right:15px;
margin-left:15px;
}
}
.rs-testimonial-slider2{
.testi-item {
background-color: #f3f8f9;
background-image: url(../images/cloud-pattern.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center bottom -5px;
border-radius: 10px;
padding: 40px 45px;
.user-info {
> img {
max-width: 120px;
height: auto;
margin-bottom: 22px;
border-radius: 50%;
}
}
.desc {
font-size: 17px;
font-style: italic;
p{
margin-bottom: 10px;
}
.name {
font-size: 20px;
margin-bottom: 5px;
}
.designation {
font-size: 14px;
color: #555555;
font-weight: 500;
display: block;
width: 100%;
}
.ratings {
padding-top: 10px;
margin: 0;
list-style: none;
li {
img{
max-width: 88px;
}
}
}
}
}
}
.rs-testimonial-slider4{
.slick-slider .slick-dots {
text-align: center;
bottom: -50px;
}
.slick-list{
padding-top: 30px;
}
.testimonial-item{
.user-info{
img{
margin: auto;
max-width: 70px;
}
}
.author-info{
margin-top: -35px;
position: relative;
z-index: 9;
}
.desc{
position: relative;
background: #ffffff;
padding: 25px 25px 30px;
&:before {
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: #dbf2f7;
z-index: -1;
transform: rotate(10deg);
border-radius: 10px;
}
i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: @secondaryColor;
font-size: 80px;
opacity: 0.1;
}
}
.name{
display: block;
font-size: 18px;
font-weight: 600;
color: #031a3d;
margin: 15px 0 0;
}
}
}
.rs-testimonial-grid{
.ratings{
img{
max-width: 70px;
}
}
.testimonial-information{
.testimonial-name{
font-family: @titleFont;
font-weight: 600;
color: @titleColor;
font-size: 18px;
}
}
}
.icon-button{
a{
background: @primaryColor;
color: #fff;
padding: 3px 17px;
display: inline-block;
font-size: 20px;
border-radius: 18px;
margin-bottom: 25px;
&:hover{
color: #fff;
background: @secondaryColor;
}
i{
&:before{
font-size: inherit;
}
}
}
}
.rs-blog-grid1{
background: #ffffff;
ul{
margin: 0;
padding: 0;
list-style: none;
}
.blog-content{
.btn-btm{
border-top: 1px solid #f4f0f0;
padding-top: 20px;
.post-categories li{
position: relative;
padding-left: 22px;
&:before{
content: "\f02d";
font-family: fontawesome;
font-size: 15px;
color: @secondaryColor;
position: absolute;
left: 0px;
top: 1px;
}
}
.readon-arrow i:before{
font-size: 18px;
transition: all .8s ease;
font-weight: 700;
position: relative;
top: 2px;
right: -2px;
}
}
}
&.blog-item {
border-radius: 3px;
overflow: hidden;
border: 1px solid #dfe9eb;
margin-bottom: 30px;
.image-part {
overflow: hidden;
height: 100%;
a {
img {
transition: all 0.5s;
transform: scale(1);
height: 100%;
width: 100%;
}
}
}
.blog-content {
padding: 20px 30px;
.title {
margin-bottom: 14px;
font-size: 24px;
line-height: 1.35 !important;
a {
color: @titleColor;
&:hover {
color: @secondaryColor;
}
}
}
.blog-meta {
margin-bottom: 11px;
li {
position: relative;
margin-right: 5px;
padding-right: 15px;
display: inline-block;
i {
padding-right: 3px;
font-size: 14px;
&.fa-calendar{
padding-right: 7px;
}
&.fa-user-o{
padding-right: 7px;
}
}
a {
color: @bodyColor;
}
&:last-child {
margin: 0;
padding: 0;
}
}
}
.readon-arrow {
text-transform: uppercase;
}
}
&:hover {
.image-part {
a {
img {
transform: scale(1.07);
}
}
}
}
}
}
.btn-part i{
transition: all .8s ease;
}
.readon-arrow {
color: @titleColor;
padding-right: 22px;
position: relative;
font-weight: 500;
i{
transition: all .8s ease;
&:before{
font-size: 17px;
transition: all .8s ease;
}
}
&:hover {
color: @secondaryColor;
&:after {
right: 0;
color: @secondaryColor;
}
}
}
.rs-notice{
position: relative;
z-index: 10;
.rs_top_title {
background: @secondaryColor;
font-size: 20px;
text-transform: uppercase;
padding: 13px 25px;
font-weight: 600;
color: @whiteColor;
margin-bottom: 10px;
text-align: center;
border-radius: 4px 4px 0 0;
}
.notices-title{
color: @bodyColor;
&:hover{
color: @secondaryColor;
}
}
ul{
margin: 0;
padding: 0;
list-style: none;
li {
background: @secondaryColor;
margin-bottom: 10px;
border-radius: 3px;
color: @whiteColor;
padding: 17px 15px 17px 0;
overflow: hidden;
display: flex;
align-items: center;
.date {
text-align: center;
border-right: 1px solid @whiteColor;
margin-right: 20px;
padding: 0 22px;
line-height: 1.25;
text-transform: uppercase;
font-size: 15px;
span {
font-size: 26px;
font-weight: 700;
font-family: @titleFont;
display: block;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
.rs-events-style1{
.event-block{
&:last-child .events-short{
margin-bottom: 0 !important;
}
}
.time{
i{
margin-right: 5px;
}
}
.content-part{
.categorie{
display: flex;
align-items:center;
justify-content: space-between;
.address{
i{
font-size: 14px;
margin-right: 8px;
}
}
}
}
.events-short {
overflow: hidden;
background: #ffffff;
padding: 31.5px 30px;
border: 1px solid #dfe9eb;
border-radius: 3px;
margin-bottom: 30px;
display: flex;
align-items: center;
&.tops{
align-items: flex-start;
.date-part{
margin-top: 8px;
}
}
.date-part {
background: #f3f8f9;
min-width: 100px;
text-align: center;
padding: 11px 0 22px;
border-radius: 3px;
margin-right: 25px;
.month {
margin-bottom: 10px;
display: block;
}
.date {
font-size: 50px;
font-family: @titleFont;
color: @secondaryColor;
font-weight: 700;
line-height: 25px;
}
}
.content-part {
overflow: hidden;
.categorie {
a {
font-size: 15px;
color: @bodyColor;
&:hover {
color: @secondaryColor;
}
}
}
.title {
a {
color: @titleColor;
&:hover {
color: @secondaryColor;
}
}
}
}
}
&.rs-events-style22{
.events-short{
.date-part{
padding:0;
border-radius: 3px;
img{
border-radius: 3px;
}
}
.categorie{
display: flex;
align-items: center;
margin-top: 8px;
margin-bottom: 6px;
a{
display: inline-block;
background: @secondaryColor;
color: @whiteColor;
padding: 3px 14px;
border-radius: 3px;
margin-right: 25px;
&:hover{
color:@whiteColor;
opacity: .8;
}
}
.time{
font-size: 15px;
i{
margin-right: 8px;
&:before{
margin:0;
}
}
}
}
}
}
}
.mc4wp-form-fields .newsletter-form {
position: relative;
border-radius: 3px;
overflow: hidden;
input,
button {
outline: none;
border: none;
}
input {
background: @whiteColor;
width: 100%;
color: @bodyColor;
padding: 20px 30px;
margin-bottom: 0;
height: 64px !important;
border:none !important;
}
button {
position: absolute;
right: 0;
top: 0;
background: @primaryColor;
color: @whiteColor;
font-size: 16px;
text-transform: uppercase;
transition: 0.4s;
padding: 19px 30px;
&:hover {
background: lighten(@primaryColor, 5%);
}
}
}
.rs-newsletter{
.mc4wp-form-fields .newsletter-form {
button {
padding: 20px 40px 20px;
}
}
}
.blogfull{
box-shadow: 0 8px 6px -6px #eee;
background: #fbfbfb !important;
padding: 30px 40px !important;
.blog-title{
min-height: 50px;
}
.icon-button{
a{
margin-bottom: 0px;
}
}
}
.rsaddon-unique-slider{
.blog-item{
.blog-inner-wrap{
transition: all 500ms ease;
border-radius: 5px;
&:hover{
transform: translateY(-10px);
.custom-blog-btn{
opacity: 1;
}
}
}
.custom-blog-btn{
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25);
opacity: 0;
position: relative;
i{
&:before{
margin-left: 0 !important;
}
}
}
}
.image-wrap{
position:relative;
img{
border-radius: 2px;
}
ul.post-categories{
margin: 0;
list-style: none;
position: absolute;
bottom: 0px;
right: 0px;
opacity: 1;
transition: all 500ms ease;
background: @secondaryColor;
padding-left: 20px;
border-radius: 2px 0 0 0;
display: flex;
padding-right: 14px;
&:before{
content: "\f02d";
font-family: fontawesome;
font-size: 14px;
color: #fff;
position: absolute;
left: 14px;
top: 6px;
}
li{
a{
background: @secondaryColor;
color: #fff;
padding: 5px 0px 5px 15px;
display: inline-block;
border-radius: 0px;
}
}
}
}
.blog-content{
border-radius: 0 0 5px 5px;
.post-categories{
padding-left: 0;
margin-left: 0;
margin-bottom: 0;
li{
list-style: none;
margin-bottom: 8px;
a{
text-transform: uppercase;
font-size: 15px;
font-weight: 400;
}
}
}
.author-avatar{
img{
border-radius: 50%;
margin-right: 8px;
}
}
.blog-footer{
font-size: 15px;
font-weight: 500;
.blog-meta{
i{
margin-right: 5px;
}
date{
text-decoration: underline;
font-weight: 600;
}
}
}
.custom-blog-btn{
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25);
opacity: 0;
position: relative;
i{
&:before{
margin-left: 0 !important;
}
}
&:hover{
opacity: 1;
}
}
.blog-btn-part2{
text-align: center;
position: relative;
z-index: 10;
margin-bottom: 20px;
}
}
.blog-item.blog_meta_style2{
.blog-inner-wrap{
background: transparent;
.blog-content .blog-meta {
width: 100%;
span.date{
margin-right: 0;
}
}
}
}
}
//Slider Styel3
.team-grid-style3,
.team-slider-style3{
.team-img{
position: relative;
padding: 25px;
&: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-img-sec{
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: 0.4s;
}
.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: 30px;
opacity: 0;
transition: 0.4s;
.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;
&:after{
position: absolute;
content: '';
width: 170px;
height: 2px;
background: #f2f2f2;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
}
.team-social{
a{
color: #fff;
margin-right: 12px;
font-size: 16px;
&:last-child{
margin-right: 0;
}
&:hover{
opacity: 0.8;
}
}
}
}
&:hover{
&:before{
opacity: 0.8;
}
.team-content{
opacity: 1;
width: 100%;
top: 50%;
}
}
}
}
}
.team-grid-style3 .team-img:after{
top: 0;
}.team-grid-style3 .team-img:before{
bottom: 0;
}
.team-slider-style4{
.team-carousel{
.team-item{
margin: 20px 15px;
transition: all .5s ease;
.team-item-inner{
padding-top: 25px;
padding-bottom: 10px;
}
&:hover{
box-shadow: none;
background: @primaryColor;
border-radius: 3px;
.normal-text{
a, .designation{
color: #fff;
}
.social-icons{
a i{
color: #fff;
}
}
}
}
}
}
}
.nolink{
color: inherit;
pointer-events: none;
}
.rs-team-grid{
.team-item-wrap{
margin-bottom: 30px;
}
&.team-style4{
.team-item-inner{
padding: 0 30px;
img{
border-radius: 50%;
}
}
.normal-text{
text-align: center;
span{
display: block;
font-size: 22px;
padding-top: 20px;
padding-bottom: 4px;
font-weight: 600;
font-family: @titleFont;
}
.designation{
font-weight: 400;
text-transform: uppercase;
float: none;
font-size: 14px;
font-family: @titleFont;
color: @bodyColor;
a{
color: @bodyColor;
pointer-events: none;
}
}
}
.team-item{
.social-icons{
a{
i{
color: @bodyColor;
font-size:14px;
padding: 0 6px;
}
}
}
}
}
.team-item{
margin-bottom: 30px;
}
&.team-grid-style1{
.team-item{
box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1);
img{
opacity: 1;
transition: 0.4s;
}
&:hover{
img{
opacity: 0.7;
}
}
}
}
&.team-style4{
.team-wrapper{
position: relative;
overflow: hidden;
padding-bottom: 95px;
background: #fff;
border-radius: 5px;
.team_photo {
img {
width: 100%;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
}
.team-title{
font-weight: 400;
text-transform: capitalize;
float: none;
font-size: inherit;
color: @titleColor;
}
.team_desc {
height: 100px;
width: 100%;
bottom: 0;
position: absolute;
padding: 15px 20px;
color: @globalColor;
text-align: center;
overflow: hidden;
background: #ffffff;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
transition: 0.3s all ease;
&:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 0;
background: @primaryColor;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
left: 0;
}
.name {
font-size: 18px;
font-weight: 600;
margin: 5px 0 0;
text-transform: capitalize;
font-family: @titleFont;
a {
color: @hoverColor;
&:hover {
color: #eee;
}
}
.designation {
font-size: 15px;
text-transform: capitalize;
color: @hoverColor;
float: none;
text-align: center;
font-weight: 500;
}
}
.team-social {
bottom: -100px !important;
transition: 0.4s;
a {
font-size: 17px;
display: block;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0px;
border: none;
text-align: center;
color: #fff;
display: inline-block;
transition: all 0.3s ease 0s;
background: transparent !important;
margin-right: 8px;
&:last-child{
margin-right: 0;
}
i{
font-size: 16px;
}
}
}
}
&:hover {
.team_desc {
opacity: 1;
width: 100%;
visibility: visible;
transform: translate(0,0);
bottom: 0;
height: 130px;
color: #fff;
background: @secondaryColor;
.name {
a {
color: #ffffff;
}
.designation {
color: #ffffff;
}
}
}
.team-title{
display: block;
margin-bottom: 15px;
color: #fff;
}
.team_photo img {
-moz-transform: scale(1.1);
transform: scale(1.1);
}
.team-social{
bottom: 20px !important;
}
}
}
}
&.team-style5{
.team-item {
margin-bottom: 125px;
position: relative;
.team-img {
position: relative;
overflow: hidden;
img {
width: 100%;
transform: scale(1.15);
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
}
.normal-text{
background: #f7f7f7;
color: @hoverColor;
padding: 20px;
text-align: center;
z-index: 9;
position: absolute;
z-index: 1;
left: 40px;
bottom: -85px;
background: #fff;
width: calc(~"100% - 80px");
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);
.designation{
font-size: 14px;
font-weight: 500;
float: none;
color: @titleColor;
margin-bottom: 0;
text-transform: uppercase;
a{
color: @titleColor;
}
}
.team-text{
font-size: 14px;
margin-bottom: 0;
color: #777;
position: relative;
z-index: 1;
max-height: 0;
opacity: 0;
line-height: 24px;
padding: 0 20px;
-webkit-transition: all .6s,max-height .5s;
-o-transition: all .6s,max-height .5s;
-moz-transition: all .6s,max-height .5s;
transition: all .6s,max-height .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: @secondaryColor;
top: 0;
left: 50%;
width: 50px;
height: 2px;
margin-left: -25px;
}
}
.social-icons {
text-align: center;
margin-top: 12px;
a{
i{
color: @bodyColor;
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{
i{
background: @primaryColor;
color: #fff;
}
}
}
}
.person-name{
display: block;
font-size: 18px;
margin-bottom: 0px;
text-transform: capitalize;
font-weight: 600;
a{
color: @secondaryColor;
&:hover{
color: @primaryColor;
}
}
}
.person-designation{
font-size: 12px;
color: @hoverColor;
text-transform: uppercase;
font-weight: normal;
}
}
&:hover{
.normal-text{
.team-text{
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 .4s,max-height 1.5s;
-o-transition: all .4s,max-height 1.5s;
-moz-transition: all .4s,max-height 1.5s;
transition: all .4s,max-height 1.5s;
padding-top: 18px;
margin-top: 8px;
}
}
}
.overlay-element{
.social-icons{
margin-top: 5px;
i{
font-size: 15px;
margin: 0 5px;
}
}
}
.team-content {
padding: 10px;
h3.team-name {
font-size: 20px;
margin-bottom: 4px;
line-height: normal !important;
text-transform: capitalize;
a{
color: #fff;
&:hover{
opacity: 0.8;
color: #fff !important;
}
}
}
.designation{
font-size: 16px;
font-weight: 500;
}
}
.team-title {
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
display: block;
font-family: @titleFont;
color: @titleColor;
}
.team-desc {
margin-bottom: 0;
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid;
line-height: 22px;
}
.team-desc{
color: #ffffff;
}
&:hover {
.team-img {
img {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.designation{
float: none;
font-size: 13px;
font-weight: 500;
}
}
}
}
}
.team-grid-style1 .team-item .team-content, .team-slider-style1 .team-item .team-content,
.elementor-2333 .elementor-element.elementor-element-8fada60 .team-inner-wrap{
margin-bottom: 0 !important;
}
.clients-grids{
margin: 0;
padding:0;
list-style: none;
text-align: center;
li{
display: inline-block;
a{
display: inline-block;
padding:10px 20px;
}
}
&.cols-one{
li{
width: 100%;
}
}
&.cols-two{
li{
width: 50%;
}
}
&.cols-three{
li{
width: 33.333%;
}
}
&.cols-four{
li{
width: 25%;
}
}
&.cols-five{
li{
width: 20%;
}
}
&.cols-six{
li{
width: 16.666%;
}
}
}
#team-list-style{
.team-img{
background: #fff;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.04);
.wrap-text{
padding: 30px 20px;
}
}
.team-name{
margin-bottom: 5px;
text-transform: uppercase;
font-weight: 600 !important;
font-size: 22px;
line-height: 30px;
a{
color: @primaryColor;
&:hover{
color: @secondaryColor;
}
}
}
.team-title{
font-size: 16px;
font-weight: 500;
display: block;
margin-bottom: 10px;
}
.social-info{
overflow: hidden;
.phone{
float: left;
&:first-child{
margin-right: 18px;
}
a{
color: @bodyColor;
&:hover{
color: @primaryColor;
}
}
i{
margin-right: 6px;
position: relative;
top: 2px;
&:before{
font-size: 17px;
}
}
}
}
.team-social {
margin-top: 20px;
margin-bottom: 24px;
.social-icon{
margin-right: 13px;
}
i {
font-size: 16px;
transition: 0.4s;
color: @bodyColor;
text-align: center;
&:hover{
color: @primaryColor;
}
}
}
}
/* ----------------------------------
09. Portfolio
-------------------------------------*/
.information-sidebar{
li.widget{
background:#fff;
box-shadow: 0 6px 25px rgba(0,0,0,.07);
padding: 20px 20px 40px;
h2.widget-title{
padding: 15px 20px 30px;
border-radius: 0;
font-size: 20px;
color: @titleColor;
line-height: 26px !important;
margin: 0px !important;
text-transform: uppercase;
}
ul.fa-ul, ul{
padding-left: 0;
margin-left: 20px;
}
}
ul,li{
list-style: none;
}
.serivce-brochure{
padding: 40px 40px 50px;
border-radius: 0;
background: @primaryColor;
margin: -20px -20px -40px !important;
.title{
padding: 0px 0px 30px;
border-radius: 0;
font-size: 20px;
color: @whiteColor;
line-height: 26px !important;
margin: 0px !important;
text-transform: uppercase;
}
p{
color: #fff;
}
}
.widget_nav_menu{
ul.menu{
margin-bottom: 0;
}
li{
padding: 0;
+ li{
margin-top: 20px;
}
a{
color: @bodyColor;
font-size: 16px;
font-weight: 500;
position: relative;
padding-left: 30px;
&:hover{
color: @primaryColor;
}
&:before{
content: "\f18e";
margin-right: 20px;
position: absolute;
font-family:'FontAwesome';
left: 0;
top: 0px;
font-size: 20px;
line-height: 16px;
color: @primaryColor;
}
}
&.current-menu-item{
a{
color: @primaryColor;
}
}
&:last-child{
margin-bottom: 0;
}
}
}
.widget_contact_widget{
li{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
a{
color: @bodyColor;
}
}
li.address1{
position: relative;
i{
position: absolute;
top: 0;
display: inline-block;
}
span{
margin: -10px 0 0;
display: inline-block;
padding-left: 41px;
}
}
i{
font-size: 25px;
padding-right: 23px;
color: @primaryColor;
}
}
}
.rs-portfolio.col-filter{
.portfolio-content{
.portfolio-filter{
text-align: center !important;
}
}
}
.rs-portfolio{
.portfolio-slider {
.portfolio-item {
position: relative;
margin: 0 15px;
.categories{
position: absolute;
top: 16px;
right: 25px;
z-index: 11;
font-size: 16px;
a{
color: @primaryColor;
&:hover{
color: @primaryColor;
}
}
}
.p-title{
position: absolute;
bottom: 16px;
left: 0;
z-index: 11;
width: 100%;
padding: 0 25px;
margin-bottom: 0;
font-size: 18px;
font-weight: 600 !important;
line-height: 30px !important;
a{
color: @primaryColor;
&:hover{
color: @primaryColor;
}
}
}
}
}
&.style1{
.portfolio-item {
overflow: hidden;
position: relative;
.categories,
.p-title {
position: static;
a{
color: #fff;
position: relative;
z-index: 10;
transition: 0.4s;
&:hover{
color: @secondaryColor;
}
}
}
.portfolio-content{
position: absolute;
text-align: center;
width: 100%;
height: 100%;
top: 30%;
left: 0;
transition: 0.4s;
opacity: 0;
visibility: hidden;
}
&:hover{
.portfolio-content{
top: 0;
opacity: 1;
visibility: visible;
}
}
}
}
&.style2{
.portfolio-slider{
.portfolio-item{
.portfolio-img{
position: relative;
.portfolio-content{
position: absolute;
width: 100%;
visibility: hidden;
transition: 0.4s;
bottom: -50px;
.categories{
top: auto;
bottom: 20px;
left: 25px;
&:before{
display:none;
}
a{
color: #fff;
&:hover{
color:@secondaryColor;
}
}
}
h3.p-title{
top: auto;
bottom: 52px;
a{
color: #fff;
&:hover{
color:@primaryColor;
}
}
}
}
}
&:hover{
.portfolio-content{
opacity: 1;
visibility: visible;
bottom: 0;
}
}
}
}
}
&.style5{
.portfolio-item {
.portfolio-img-sinlge{
overflow: hidden;
img{
transition: 0.4s;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.portfolio-content{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 15px;
}
.p-title{
padding: 0;
}
.categories,
.p-title {
position: static;
}
.categories{
background: #fbfbfb;
padding: 2px 10px;
}
&:hover{
.portfolio-img-sinlge{
img{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
}
}
}
&.style6{
.portfolio-item {
.portfolio-img-sinlge{
overflow: hidden;
img{
transition: 0.4s;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.portfolio-content{
padding-top: 15px;
}
.p-title{
padding: 0;
}
.categories,
.p-title {
position: static;
}
&:hover{
.portfolio-img-sinlge{
img{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
}
}
}
&.gap_no{
.portfolio-slider {
.portfolio-item {
margin: 0;
}
}
}
}
// Vertical Slider
.rs-portfolio.vertical-slider.style4{
.portfolio-slider{
.portfolio-img{
position: relative;
height: 100vh;
overflow: hidden;
background-position: center top !important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.portfolio-item{
text-align: center;
.categories{
top: auto;
bottom: 50px;
left: 0;
right: 0;
padding: 0 25px;
color: #fff !important;
a{
color: #fff !important;
font-size: 14px;
}
}
.p-title{
bottom: 80px;
padding-top: 30px;
a{
color: #fff !important;
position: relative;
&:before{
content: "";
width: 2px;
height: 40px;
background: @secondaryColor;
text-align: center;
display: block;
margin: 0px auto;
position: relative;
top: -10px;
transition: 0.4s;
}
}
}
&:hover{
.p-title a{
color: @secondaryColor !important;
&:before{
height: 100px;
}
}
.portfolio-img{
transform: scale(1.04);
}
}
}
}
}
.rs-project-section{
&.gray-bg{
background: #f7f7fc;
padding: 90px 0 50px;
h3{
margin-bottom: 50px !important;
}
}
.project-item{
position: relative;
overflow: hidden;
z-index: 1;
.project-content{
.p-icon,
.title{
position: absolute;
z-index: 11;
margin: 0;
}
.p-icon{
visibility: hidden;
transition: 0.4s;
}
.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;
}
}
.title{
font-size: 18px;
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{
.project-content .title{
bottom: 20px;
}
.project-content .p-icon,
.project-content .title{
opacity: 1;
visibility: visible;
}
.project-content .p-icon{
top: 20px;
}
}
}
.view-project{
margin-top: 60px;
}
.nav-style .owl-controls .owl-nav{
position: absolute;
left: 17.5%;
}
}
body.single-services{
.rs-porfolio-details{
padding: 120px 0 0;
}
}
.rs-portfolio-style7{
.showcase li {
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0 0 0 0;
position: relative;
}
a .showcase-caption {
display: inline-block;
z-index: 2;
color: white;
text-shadow: 0px 0px 20px rgba(0,0,0,0.33);
padding:20px;
}
.showcase {
margin: 0 auto 0;
display: block;
}
.showcase li:nth-of-type(3n+4) {
clear: left;
}
.showcase-item {
line-height: 1;
z-index: 3;
}
.showcase-item.hover {
z-index: 1;
}
.showcase-item a {
display: block;
padding: 15px 25px 10px 0;
}
.showcase-item img {
position: fixed;
z-index: 1;
opacity: 1;
display: none;
transition: opacity .35s,transform .35s;
}
.showcase-item a h3{
position: relative;
z-index: 3;
transition: opacity .35s,transform .35s;
}
.showcase-item a p {
position: relative;
z-index: 3;
transition: opacity .35s,transform .35s;
margin: 0 !important;
}
.showcase-item a:hover + img {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: block;
}
.showcase-item a:hover {
color: white;
background: none;
}
.showcase-item h3 {
font-size: 36px;
padding: .45em .6em 15px 0;
font-weight: 600;
letter-spacing: 0px;
margin: 0;
}
}
/*responsive styles below*/
@media screen and (max-width: 1023px) {
.showcase {
margin: 0 auto
}
.showcase-item a img {
border: 0px;
}
}
/* ----------------------------------
10. cl-testimonial style 7
-------------------------------------*/
#cl-testimonial.testimonials-area.slider8 .images-testimonial .desc-text .flaticon-right-quote:before{
font-size: 50px !important;
}
#cl-testimonial{
.testimonial-slide7{
.slick-track{
padding-bottom: 40px;
}
.single-testimonial{
padding: 0;
background: rgba(11, 43, 167, 0.6) !important;
border-radius: 0;
padding: 40px 45px 46px 146px;
position: relative;
margin: 0 20px;
border-radius: 5px;
color: #fff;
&:after,
&:before{
content: '';
position: absolute;
display: block;
background: transparent;
transition: all 0.2s;
width: 0px;
height: 0px;
z-index: 100;
top: -3px;
border: none !important;
right: 0;
}
&:after{
top: auto;
bottom: 0;
border-bottom: 0 solid;
border-top: 30px solid transparent;
border-bottom-color: #fff;
}
}
.right-content,
.testimonial-left{
width: 100%;
float: none;
}
.testimonial-left{
img{
border: 2px solid #fff;
}
}
.right-content{
position: relative;
i{
top: 5px;
padding-right: 0;
position: absolute;
left: -18px;
}
}
.testimonial-left{
position: absolute;
left: 33px;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
width: auto;
border-radius:50%;
}
p{
margin: 0;
padding: 0;
}
ul.slick-dots li {
button{
padding: 2px 0;
height: 8px;
border:1px solid #fff;
}
&.slick-active{
button{
background: #fff;
border-color: #fff !important;
}
}
}
}
}
#cl-testimonial.testimonials-area.slider8{
position: relative;
.images-testimonial{
img{
display: block;
width: 90px !important;
height: 90px !important;
margin: 1em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border-radius: 99em;
border: 5px solid #eee;
box-shadow: 0 3px 70px 0 rgba(255, 255, 255, 1) !important;
}
.desc-text{
margin: 0;
padding: 80px 0px 40px !important;
text-align: center !important;
font-size: 17px;
line-height: 32px;
max-width: 620px;
margin: 0 auto;
position: relative;
i{
display: block;
text-align: center;
font-size: 50px;
opacity: 0.3;
margin: 0;
top: 10px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
img{
width: 90px;
margin: 0 auto 12px;
box-shadow: 0 20px 68px rgba(34, 34, 34, 0.4);
}
}
.testimonials-nav{
width: 230px;
top: 60px;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
.slick-list.draggable{
display: none;
}
.slick-prev,
.slick-next{
opacity: 1;
}
.slick-prev{
left: 20px;
&:after{
font-size: 18px;
content: "\f138";
font-family: Flaticon;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
position: absolute;
font-weight: normal;
color: #fff;
transform: translateX(-50%);
background: @primaryColor;
width: 50px;
}
}
.slick-next{
right: 20px;
&:after{
font-size: 18px;
content: "\f137";
font-family: Flaticon;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
position: absolute;
font-weight: normal;
color: #fff;
transform: translateX(-50%);
}
}
}
.slick-prev{
left: 20px;
&:after{
font-size: 18px;
content: '←';
font-family: 'slick';
display: inline-block;
padding-right: 3px;
vertical-align: middle;
position: absolute;
font-weight: normal;
color: #fff;
transform: translateX(-50%);
background: @primaryColor;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 45px;
}
}
.slick-next{
right: 20px;
&:after{
font-size: 18px;
font-family: 'slick';
content: '→';
display: inline-block;
padding-right: 3px;
vertical-align: middle;
position: absolute;
font-weight: normal;
color: #fff;
transform: translateX(-50%);
background: @primaryColor;
width: 50px;
height: 50px;
line-height: 45px;
border-radius: 50%;
}
}
p{
margin: 0 auto !important;
}
ul.author{
text-align: center;
padding: 0px !important;
li{
font-size: 20px;
text-transform: uppercase;
font-weight: 500;
&.titles-dsignation{
text-transform: capitalize;
font-size: 15px;
padding-top: 0;
}
}
}
&.text-left{
.images-testimonial {
padding-left: 20px;
padding-top: 45px;
p{
position: relative;
max-width: 100%;
text-align: left;
margin: 0 auto !important;
}
i{
font-size: 80px;
position: absolute;
left: -18px;
opacity: 1;
top: -30px;
z-index: -1;
}
ul.author,
p{
text-align: left !important;
}
}
.testimonials-nav{
overflow: hidden;
.slick-list{
float: right;
}
.slick-track{
width: 100% !important;
float: right;
}
.slick-slide{
width: 15px !important;
height: 6px;
border-radius: 3px;
background: @titleColor;
display: inline-block;
margin: 0 4px;
cursor: pointer;
transition: 0.3s;
&:hover,
&.slick-current{
background: @primaryColor;
}
}
}
}
&:hover{
.slick-prev{
left: 0px;
}
.slick-next{
right: 0px;
}
}
}
body .rselement-dual-btn{
font-size: 16px;
}
#cl-testimonial.cl-testimonial1 {
.testimonial-slide.slider1{
ul.cl-author-info{
li:first-child{
font-size: 16px !important;
}
}
.testimonial-item{
.testimonial-content{
padding: 60px !important;
text-align: center;
p{
text-align: center;
font-style: normal !important;
}
}
i{
display: none;
}
}
.slick-dots button{
width: 10px;
height: 10px;
padding: 2px;
background: #ccc !important;
border: none !important;
}
.slick-active button{
background: @secondaryColor !important;
border: none !important;
}
}
}
.cl-testimonial.cl-testimonial9{
.content-box{
background: #fff;
padding: 40px;
min-height: 250px;
position: relative;
p{
padding: 0 !important;
margin-bottom: 0 !important;
font-style: normal;
i{
text-align: left;
}
}
&:after{
content: "//";
position: absolute;
bottom: -17px;
text-align: center;
left: 40px;
right: auto;
display: block;
font-size: 20px;
color: @secondaryColor;
}
}
.testimonial-image{
flex:1;
padding-left: 20px;
img{
border-radius: 50%;
max-width: 90px;
}
}
.img-box{
display: flex;
flex-wrap: wrap;
margin-top: 35px;
margin-bottom: 30px;
align-content: space-around;
}
i{
display: block;
&:before{
font-size: 45px;
color: @secondaryColor;
}
}
ul.cl-author-info{
flex:1;
padding-left: 0px !important;
padding-top: 15px !important;
}
.slick-next,
.slick-prev{
display: none;
}
.slick-next::after,
.slick-prev::after{
background: rgba(0,0,0,0.4) !important;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
}
&:hover{
.slick-next,
.slick-prev{
display: block;
}
}
.slick-active button {
background: @secondaryColor !important;
}
}
body .cl-testimonial2{
.image-testimonial{
.testimonial-content{
box-shadow: none;
padding: 0;
background: transparent !important;
text-align: left !important;
font-size: 24px !important;
.quote-arrow{
.flaticon-right-quote{
transform: rotate(180deg) !important;
&:before{
font-size: 60px !important;
}
}
}
.cl-author-info{
li:nth-child(2){
font-size: 18px !important
}
}
p,ul li
{
text-align: left !important;
}
&:hover{
box-shadow: none !important;
}
li.ratings img{
margin-top: 5px;
margin-left: 0 !important;
}
}
}
.slick-dots{
text-align: left !important;
padding-left: 10px !important;
margin-top: -20px !important;
button{
width: 10px !important;
height: 10px !important;
}
}
}
/* ----------------------------------
cl-testimonial style 10 Custom By Rashid
-------------------------------------*/
.testimonial-slide10.slider9{
.slick-dots{
display: none !important;
}
.single-testimonial{
overflow: inherit;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 0;
.image-testimonial{
position: relative;
padding-bottom: 100px;
.testimonial-image{
width: 70%;
margin-right: auto;
}
.testimonial10-content-wrap{
max-width: 380px;
position: absolute;
bottom: 50px;
z-index: 99;
background: #fff;
padding: 40px;
right: 0px;
box-shadow: 0 8px 30px -6px #ccc;
.content-testimonial{
padding-bottom: 15px;
i{
position: absolute !important;
top: 60px !important;
font-size: 150px;
left: 30px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff !important;
border-radius: 50%;
padding-right: 0px !important;
z-index: -1;
opacity: 0.2;
}
}
}
}
}
}
.testimonial-transparent{
.image-testimonial{
background: transparent !important;
}
}
ul.latest_projects{
margin: 0;
padding:0;
list-style: none;
}
.testimonial-light{
#cl-testimonial{
.testimonial-slide7{
.single-testimonial{
margin: 0;
border-left: 4px solid @primaryColor;
box-shadow: none;
&:before,
&:after{
border-top-color: @primaryColor;
border-right-color: @primaryColor;
border-right: 30px solid @primaryColor;
}
&:after{
border-top: 30px solid transparent;
border-bottom-color: @primaryColor;
}
.cl-author-info{
li:first-child{
font-size: 18px;
color: @secondaryColor;
margin-bottom: 0;
padding-bottom: 0 !important;
line-height: 28px;
margin-top: 5px;
}
}
}
}
.slick-dots{
text-align: right;
bottom: -4px;
li {
button{
background: #fff !important;
border: 1px solid #ffff !important;
}
}
}
}
}
.light-button{
#cl-testimonial ul.slick-dots li button{
border: 1px solid #fff !important;
}
}
.mfp-close-btn-in {
.mfp-close {
top: 0px;
right: 0px;
text-align: right;
padding-right: 0;
display: inline-block;
text-align: center;
background: @primaryColor;
width: 44px;
border-radius: 50%;
font-size: 27px;
}
}
.rs_button{
&.btn-border{
border-width: 2px;
color: @secondaryColor;
border-style: solid;
border-color: @secondaryColor;
background: transparent;
&:hover{
background: @secondaryColor;
color: @whiteColor;
}
}
}
.rs-btn{
outline: none;
padding: 12px 35px;
border: 2px solid @secondaryColor;
border-radius: 30px;
display: inline-block;
text-transform: uppercase;
font-size: 16px;
font-weight: 500;
color: @titleColor;
background: #f3f8f9;
text-transform: uppercase;
&:hover{
background: @secondaryColor;
color: #ffffff;
}
&.btn-center{
text-align: center;
}
&.btn-left{
text-align: left;
}
&.btn-right{
text-align: right;
}
&.rs-btn-style2{
position: relative;
&:after,
&:before {
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: @whiteColor;
transition: @transition;
}
&:after {
right: 30px;
}
&:before {
left: 30px;
}
}
}
.rs-courses-categories{
.categories-item {
border: 1px solid #dfe9eb;
background: #ffffff;
overflow: hidden;
padding: 30px;
display: block;
color: @bodyColor;
border-radius: 5px;
display: flex;
align-items: center;
margin-bottom: 30px;
.icon-part {
margin-right: 25px;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 100%;
background: rgba(22, 170, 202, 0.2);
text-align: center;
transition: 0.4s;
img{
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.content-part {
.courses-title {
color: @titleColor;
margin-bottom: 5px;
font-size: 24px;
transition: 0.4s;
font-size: 20px;
}
}
&:hover {
background: @secondaryColor;
color: #ffffff;
border-color: @secondaryColor;
.icon-part {
background: #ffffff;
img{
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
}
.content-part {
.courses-title {
color: #ffffff;
}
}
}
}
.categories-item2{
text-align: center;
background: #d3fcf8;
border-radius: 10px;
padding: 50px 30px 45px;
margin-bottom: 30px;
img {
transition: 0.4s;
transform: translateY(0);
}
.title {
margin: 20px 0 5px 0;
font-size: 24px;
a {
color: @titleColor;
&:hover {
opacity: .8;
}
}
}
img.hover-img{
position: absolute;
left: -5px;
top: -20px;
display: block;
z-index: -1;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
&:hover {
img.hover-img{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
img {
transition: 0.4s;
transform: translateY(-7px);
}
}
}
}
.rs-courses{
.content-part{
.title{
font-size: 22px;
}
}
}
.rs_course_style3,
.rs_course_style5,
.rs_course_style1,
.rs_course_style4{
.courses-item {
padding: 30px;
border: 1px solid #f4f4f4;
border-radius: 5px;
transition: 0.4s;
margin-bottom: 30px;
.img-part {
margin-bottom: 38px;
overflow: hidden;
border-radius:4px;
img {
border-radius: 5px;
transition: all 500ms ease;
transform: scale(1.1);
}
}
.content-part {
.meta-part {
margin: 0 0 15px;
li {
display: inline-block;
margin-right: 10px;
span.price {
display: inline-block;
padding: 2px 10px 2px;
color: #ffffff;
font-weight: 400;
background: @secondaryColor;
border-radius: 3px;
transition: 0.4s;
text-transform: uppercase;
font-size: 14px;
}
a.categorie {
color: @bodyColor;
}
&:last-child {
margin: 0;
}
}
li.cat{
a {
color: @bodyColor;
font-size: 14px;
}
}
}
.title {
margin: 0 0 12px;
a {
color: @titleColor;
&:hover{
color: @secondaryColor;
}
}
}
.bottom-part {
overflow: hidden;
.info-meta {
float: left;
padding-top: 10px;
ul{
margin: 0;
font-size: 14px;
}
li {
display: inline-block;
margin-right: 15px;
transition: 0.4s;
.course-rating-total{
margin-left: 3px;
}
&.user {
i {
margin-right: 6px;
margin-left: 2px;
}
}
&.ratings {
i {
color: #fcb903;
}
}
&:last-child {
margin: 0;
}
}
}
.btn-part {
text-align: right;
a {
padding: 5px 13px;
background: #f9f8f8;
border: 1px solid #f2f2f2;
display: inline-block;
border-radius: 3px;
color: @titleColor;
i {
&:before {
font-size: 18px;
font-weight: 500;
margin: 0;
transition: 0.3s;
}
}
&:hover{
background: @secondaryColor;
border-color: @secondaryColor;
color: #ffffff;
i:before{
color: #ffffff;
}
}
}
}
}
}
&:hover{
.img-part {
img{
transform: scale(1.0);
}
}
}
}
}
.rs_course_style1 .courses-item{
background: #ffffff;
.content-part {
.bottom-part .btn-part a{
background: #ffffff;
}
.meta-part li span.origin-price{
margin-right: 15px;
text-decoration: line-through;
}
}
}
.archive ul.learn-press-courses .course{
margin-bottom: 0;
}
.rs_course_style3 {
.courses-item {
padding: 0 0 33px;
.img-part{
margin-bottom: 35px;
text-align: center;
}
.content-part {
padding: 0 30px;
position: relative;
.course-price span.price {
padding: 0 15px;
height: 40px;
line-height: 40px;
color: #ffffff;
font-weight: 400;
background: @secondaryColor;
border-radius: 3px;
transition: all 0.3s ease;
position: absolute;
top: -55px;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;
font-size: 14px;
}
.bottom-part .btn-part a{
border: none;
background: transparent;
padding: 1px 13px 6px 8px;
i{
padding-left: 5px;
position: relative;
top: 2px;
}
}
}
}
}
.rs_course_style5{
.courses-item {
padding: 0px;
.img-part{
margin-bottom: 0px;
text-align: center;
}
.content-part {
padding: 50px 30px 22px;
position: relative;
.meta-part{
li{
font-size: 14px;
i{
margin-right: 4px;
}
}
}
.title{
margin-bottom: 15px;
}
.course-price span.price {
padding: 9px 20px;
color: #ffffff;
font-weight: 400;
background: @secondaryColor;
border-radius: 5px;
transition: all 0.3s ease;
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;
font-size: 14px;
}
.bottom-part .btn-part a{
border: none;
background: transparent;
padding: 5px 0 0;
i{
padding-left: 5px;
position: relative;
top: 2px;
}
}
}
}
}
.rs-event-grid{
.event-item{
.time-secs{
display: flex;
align-items: center;
justify-content: space-between;
.time{
margin-left: 15px;
i:before{
color:#333 !important;
}
}
}
}
}
.rs_course_style7,
.rs_course_style6{
.courses-item {
padding: 0px;
margin-bottom: 30px;
border-radius: 0 0 4px 4px;
.img-part{
margin-bottom: 0px;
overflow: hidden;
img{
border-radius: 4px 4px 0 0;
transition: all .8s ease;
}
.course-price span.price{
padding: 3px 15px;
color: #ffffff;
font-weight: 400;
background: @secondaryColor;
border-radius: 5px;
transition: all 0.3s ease;
position: absolute;
top: 20px;
right: 38px;
text-transform: uppercase;
font-size: 14px;
}
}
.content-part {
padding: 32px 35px 35px 35px;
position: relative;
h3.title{
margin: 0 0 10px;
line-height: 30px;
a{
color: @titleColor;
&:hover{
color: @secondaryColor;
}
}
}
.course-ratings{
margin-bottom: 10px;
.course-rating-total{
margin-left: 3px;
font-size: 14px;
}
}
.meta-part{
display: flex;
justify-content: space-between;
list-style: none;
font-size: 14px;
li{
i{
margin-right: 4px;
}
&.user{
i{
margin-right: 8px;
}
}
&.price{
margin-right: 20px;
}
}
}
}
&:hover{
.img-part{
img{
transform: scale(1.1);
}
}
}
}
}
.rs_course_style6{
.courses-item {
box-shadow: 0 0 30px #eee;
.content-part {
.meta-part{
font-size: 14px;
margin: 25px 0 0;
padding: 25px 0 0;
border-top: 1px solid #f4f0f0;
}
}
}
}
.rs_course_style7{
.courses-item {
.content-part {
.meta-part{
font-size: 15px;
margin: 0 0 20px;
}
}
.avatar-image{
margin-top: 20px;
margin-bottom: 5px;
font-size: 15px;
img{
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
}
}
}
.gym_courses{
.description {
a:hover{
opacity: 0.8;
}
i{
position: relative;
top: 2.5px;
}
}
}
.rs_course_style2{
.course-wrap {
background: #c7e8f0;
position: relative;
border-radius: 5px;
text-align: center;
transition: @transition;
overflow: hidden;
padding: 30px;
margin-bottom: 30px;
.inner-part,
.front-part {
.content-part {
.title {
font-size: 22px;
}
}
}
.front-part {
z-index: 1;
position: relative;
transition: @transition;
opacity: 1;
visibility: visible;
.img-part {
margin-bottom: 21px;
}
.content-part {
.cat a {
color: @bodyColor;
font-size: 14px;
}
.title {
margin:0;
a {
color: @titleColor;
}
}
}
}
.inner-part {
z-index: 1;
position: absolute;
top: 40%;
left: 0;
width: 100%;
padding: 0 30px;
transform: translateY(-50%);
transition: @transition;
opacity: 0;
visibility: hidden;
.content-part {
.cat a {
color: @whiteColor;
font-size: 14px;
&:hover {
color: #eee;
}
}
.title {
margin: 10px 0 25px;
a {
color: @whiteColor;
&:hover {
color: #eee;
}
}
}
.course-meta {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
li {
color: @whiteColor;
display: inline;
margin-right: 15px;
&.course-user {
i {
margin-right: 6px;
}
}
&.ratings {
i {
margin-right: 3px;
color: #fcb903;
}
}
.course-rating-total{
margin-left: 3px;
}
&:last-child {
margin: 0;
}
}
}
}
}
.price-btn {
position: absolute;
bottom: 0;
padding-bottom: 50px;
left: 50%;
transform: translateX(-50%);
transition: @transition;
opacity: 0;
visibility: hidden;
a {
font-weight: 500;
background: @whiteColor;
border-radius: 3px;
color: @titleColor;
display: inline-block;
padding: 5px 5px 5px 10px;
display: flex;
align-items: center;
i {
padding-left: 5px;
&:before {
font-size: 15px;
color: @whiteColor;
width: 41px;
height: 30px;
line-height: 30px;
text-align: center;
background: @secondaryColor;
display: inline-block;
border-radius: 3px;
transition: @transition;
}
}
&:hover {
i {
&:before {
background: @titleColor;
}
}
}
}
}
&:after,
&:before {
position: absolute;
content: '';
border-radius: 50%;
transition: @transition;
z-index: 0;
background: #b5e2ec;
}
&:after {
width: 146px;
height: 146px;
left: -73px;
bottom: 70px;
}
&:before {
width: 412px;
height: 412px;
right: -133px;
top: -80px;
}
&:hover {
background: #16aaca;
.front-part {
opacity: 0;
visibility: hidden;
}
.inner-part,
.price-btn {
opacity: 1;
visibility: visible;
}
&:after,
&:before {
background: #1ca6c7;
}
}
}
.rs-pagination-area{
margin-top: 20px;
}
}
.portfolio-filter {
margin-bottom: 20px;
&.filter-center {
text-align: center;
}
&.filter-right {
text-align: right;
}
&.filter-left {
text-align: left;
}
button {
font-size: 16px;
background: transparent !important;
color: @titleColor;
margin: 0 0 30px;
display: inline-block;
padding: 0;
transition: 0.4s;
outline: none;
-webkit-transition: 0.4s;
-ms-transition: 0.4s;
position: relative;
padding: 5px 20px;
border-radius: 30px;
border: 0;
&:hover,
&.active {
color: @secondaryColor;
background: transparent !important;
}
}
}
.recent-post-widgets{
li.show-featured{
float: left;
width: 33.33%;
padding:0;
}
}
.rs-vertical-middle {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.rs-vertical-bottom {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
// Portfolio Gutter Gap
.gutter-no-gap .row {
margin: 0 !important;
[class*="col-"] {
padding: 0 !important;
margin: 0 !important;
}
}
.rs-sl-social-icons{
a{
color: #ffffff;
&:hover{
color: @secondaryColor;
}
}
}
.rs-slider {
* {
outline: none;
}
.slider-item {
background-size: cover;
background-repeat: no-repeat;
}
.slide-description {
max-width: 640px;
p {
margin-bottom: 0;
font-size: 18px;
}
}
.slide-title {
font-size: 65px;
line-height: 75px;
font-weight: 700 !important;
}
.slide-content {
max-width: 1250px;
margin: 0 auto;
padding: 150px 0;
position: relative;
.watermark{
z-index: 5;
position: absolute;
font-size: 200px;
font-weight: 900;
font-family: @titleFont;
top: 10%;
opacity: 0.1;
}
span.number{
position: absolute;
left: 0;
right: 0;
text-align: center;
top: auto;
bottom: 42px;
font-size: 20px;
font-weight: 400;
font-family: @titleFont;
color: @bodyColor;
.first{
font-size: 60px;
font-weight: 700;
color: #000;
}
}
.slide-content-wrap{
max-width: 800px;
position: relative;
z-index: 10;
}
&.center {
text-align: center;
.slide-content-wrap{
display: block;
margin: 0 auto;
}
.slide-description {
margin-left: auto;
margin-right: auto;
}
}
&.right {
text-align: right;
.slide-description {
margin-left: auto;
}
.slide-content-wrap{
display: block;
margin-left: auto;
}
}
}
.slider-button {
margin-top: 48px;
ul {
margin: 0;
list-style-type: none;
li {
display: inline-block;
+ li {
margin-left: 10px;
}
}
}
}
.slick-arrow {
width: 42px;
height: 42px;
line-height: 42px;
text-align: center;
color: @secondaryColor;
opacity: 1;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
top: auto;
bottom: 40;
&:after {
color: inherit;
top: -2px;
font-family: "Flaticon";
font-size: 25px;
}
}
.slick-prev {
right: auto;
left: 45%;
top: auto;
bottom: 40px;
z-index: 1;
&:after {
font-family: "Flaticon";
content: "\f111" !important;
color: #000;
text-indent: 4px;
}
}
.slick-next {
left: auto;
right: 45%;
top: auto;
bottom: 40px;
&:after {
font-family: "Flaticon";
content: "\f110" !important;
color: #000;
text-indent: -4px;
}
}
&:hover {
.slick-arrow {
opacity: 1;
}
}
.readons{
border: 2px solid #000;
color: #000;
padding: 14px 35px;
border-radius: 3px;
font-size: 16px;
font-weight: 500;
&:hover{
background: #000;
color: #fff;
border: 2px solid #000;
}
}
}
.recent-post-widgets{
li.show-featured{
float: left;
width: 33.33%;
.post-img{
padding:3px;
float: none;
width: auto;
display: block;
img{
width: 100%;
border-radius:3px;
}
}
}
}
.single-teams{
.details-tabs-area{
margin-right: 30px;
.team-detail-wrap{
background: #fff;
padding: 25px 50px 30px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
margin-bottom: 40px;
}
}
.title-bg-gray{
color: @titleColor;
padding-bottom: 5px;
margin-bottom: 0 !important;
}
.title-bg-gray.padding-top{
margin-bottom: 20px !important;
}
.designation-info{
display: block;
color: @primaryColor;
margin-top: 0;
padding-bottom: 15px;
}
.team-skill{
background: #F3F8F9;
padding: 20px 40px 50px !important;
}
.short-desc, .team-skill{
display: block;
margin-bottom: 50px;
}
.ps-informations{
margin-top: 50px;
padding: 40px;
text-align: left;
overflow: hidden;
background: #F3F8F9;
position: relative;
&:before {
content: "\f10b";
font-size: 150px;
position: absolute;
right: 30px;
color: #0a0a0a;
font-family: "Flaticon";
height: 100%;
top: -10px;
opacity: 0.02;
}
h4.single-title{
margin: -8px 0 0px;
font-weight: 700 !important;
font-size: 24px;
color: @primaryColor;
}
.designation-info{
font-size: 16px;
font-weight: 500;
}
ul{
margin: 0;
padding: 0;
text-align: left;
list-style: none;
li{
border: none !important;
margin: 0;
color: @bodyColor;
span{
width: auto;
color: @bodyColor;
}
&.social-icon{
border: none;
margin-top: 0;
display: inline-block;
padding-top: 0;
i{
line-height: 35px;
width: 30px;
height: 35px;
font-size: 14px;
transition: 0.4s;
}
}
&.phone,
&.email{
margin: 5px 0 0;
padding: 0;
display:block;
a{
color: @bodyColor;
&:hover{
color: @primaryColor;
}
}
i{
font-size: 16px;
color: @bodyColor;
margin-right: 6px;
position: relative;
top: 2px;
font-weight: 500;
&:before{
font-size: 16px;
}
}
}
&.phone{
margin-left: 0;
}
}
}
.social-info{
margin-top: 10px;
padding-top: 5px;
}
}
.project-desc{
margin-bottom:20px;
background: #fff;
overflow: hidden;
p{
margin-bottom: 18px;
}
.nav{
margin-left: 0;
background: #f4f7fc;
li{
width: 33.333%;
text-align: center;
}
li + li{
border-left: 1px solid #ddd;
}
.nav-link{
position: relative;
overflow: hidden;
font-weight: 600;
font-size: 20px;
padding: 15px 0;
&:before{
position: absolute;
content: "";
width: 100%;
height: 3px;
background: @primaryColor;
bottom: -5px;
left: 0;
transition: 0.4s;
}
&.active {
&:before{
bottom: 0;
}
}
}
}
}
.inner-images{
padding: 0 30px 0 0;
background: #fff;
margin-bottom: 40px;
}
.team-detail-wrap-btm.team-inner{
background: @primaryColor;
padding-bottom: 54px;
margin-top: 40px;
.siderbar-title{
color:#fff;
&:before{
background:#fff;
}
}
tbody tr{
background: none;
td{
padding: 8px 0;
color: #fff;
}
}
}
.team-inner{
padding: 40px 40px 44px;
background: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
h3{
margin-bottom: 0;
position: relative;
padding-bottom: 6px;
font-size: 20px;
text-transform: capitalize;
&:before{
content: "";
position: absolute;
background: @primaryColor;
height: 2px;
width: 50px;
left: 0;
bottom: 0;
display: block;
z-index: 1;
opacity: .5;
}
}
ul{
margin: 0;
padding: 0;
list-style: none;
li{
display: block;
border-bottom: 1px solid #eee;
padding: 13px 0;
i{
color: @primaryColor;
margin-right: 5px;
display: none;
}
&:last-child{
border-bottom: none;
padding-bottom: 0;
}
}
}
}
.doctor-awardss.team-inner{
padding-top: 25px;
}
.siderbar-title{
margin: 0 0 30px;
color: @primaryColor;
text-transform: capitalize;
}
.chevron-right-icon{
li{
float: left;
width: 50%;
margin: 4px 0;
}
}
h3.title-left-border{
margin-top: 45px;
}
.emergency-time{
padding: 40px 15px 32px;
.emergency-title{
margin: 14px 0 4px;
}
i{
color: @primaryColor;
&:before{
font-size:50px;
}
}
p{
margin-bottom: 0;
}
}
.team-skill{
padding-left: 0;
width: 100%;
overflow: hidden;
position: relative;
h3{
font-weight: 500;
margin-bottom: 20px;
}
.rs-progress {
height: 8px;
border: 1px solid @primaryColor;
border-radius: 0;
overflow: visible;
padding: 1px;
background: #fff;
margin-top: 45px;
.progress-bar {
position: relative;
text-align: left;
line-height: 4px;
border-radius: 0;
box-shadow: none;
background-color: @primaryColor;
font-size: 16px;
.pb-label {
position: absolute;
left: 0px;
top: -24px;
color: @bodyColor;
}
.pb-percent {
position: absolute;
right: -13px;
top: -30px;
padding: 8px 5px;
color: @bodyColor;
}
}
}
}
}
body .vc_progress_bar .vc_single_bar .vc_label_units{
position: absolute;
right: 0;
font-weight: 500;
}
body .vc_progress_bar .vc_single_bar{
border-radius: 0 !important;
box-shadow: none !important;
height: 8px;
line-height: 8px;
}
body .vc_progress_bar .vc_single_bar .vc_bar{
border-radius: 0 !important;
}
body .vc_progress_bar .vc_single_bar .vc_label{
font-weight: 500;
}
// Portfolio Style2
body .rs-portfolio-style2 .portfolio-item .portfolio-content .p-icon{
width: 50px;
height: 50px;
line-height: 50px;
i:before{
font-size: 18px;
}
}
.rs-portfolio-style3,
.rs-portfolio-style5,
.rs-portfolio-style4 {
.portfolio-item,
.portfolio-item img,
.portfolio-item .bg-overlay{
border-radius: 5px;
}
}
/*// Portfolio Style3*/
.rs-portfolio-style3 {
.portfolio-item,
.portfolio-item img,
.portfolio-item .bg-overlay{
border-radius: 5px;
}
.portfolio-item {
position: relative;
overflow: hidden;
z-index: 1;
.portfolio-img {
position: relative;
z-index: 1;
img {
width: 100%;
}
.p-link {
position: absolute;
bottom: 20px;
right: 20px;
display: inline-block;
font-size: 36px;
color: #ffffff;
transition: all 0.3s ease;
opacity: 0;
i {
margin-left: 2px;
}
&:hover {
opacity: 0.7 !important;
}
}
}
.p-icon{
transition: all .4s ease-in-out 0s;
bottom: -100px;
right: 25px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: @secondaryColor;
border-radius: 50%;
z-index: 7;
opacity: 0;
visibility: hidden;
position: absolute;
}
.portfolio-content {
position: absolute;
padding: 24px 30px;
opacity: 1;
z-index: 10;
top: 0;
&:before{
background: rgba(0, 0, 0, 0.4) !important;
opacity: 1;
}
.portfolio-inner{
bottom: 30px;
width: auto;
right: 40px;
left: 40px;
display: flex;
flex-wrap: wrap;
transition: all .5s ease;
.p-title{
order: 2;
flex: 0 0 100%;
}
.p-category{
flex: 0 0 100%;
}
}
a {
color: #fff;
}
.p-title {
margin-bottom: 5px;
font-size: 18px;
transition: 0.3s ease all;
line-height: 25px !important;
}
p {
margin-bottom: 0;
color: #fff;
transition: 0.3s ease all;
}
}
&:hover {
.p-icon{
bottom: 30px;
opacity: 1;
visibility: visible;
}
.portfolio-content {
opacity: 1;
.portfolio-inner{
bottom: 50px;
}
}
.portfolio-img {
&:before {
opacity: 0.7;
}
.p-link {
opacity: 1;
}
}
}
}
}
.rs-video.style1{
display: flex;
align-items: center;
transition: 0.3s;
a.popup-videos{
width: 70px;
height: 70px;
border: 5px solid;
display: inline-block;
line-height: 70px;
border-radius: 50px;
i{
position: relative;
left: 3px;
top: -2px;
}
}
.video-desc{
text-align: left;
padding-left: 15px;
position: relative;
}
&:hover{
opacity: 0.8;
}
}
.rs-video.style2{
a.popup-videos{
background: @secondaryColor;
i{
top: -1px;
left: 3px;
}
}
}
.rs-video.style2 a.popup-videos{
background-color: #FFFFFF;
border-radius: 50%;
display: inline-block;
height: 80px;
width: 80px;
line-height: 80px;
border-radius: 80%;
position: relative;
-webkit-animation: circle_ripple 0.7s linear infinite;
animation: circle_ripple 0.7s linear infinite;
}
@-webkit-keyframes circle_ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 1em rgba(255, 255, 255, 0.3), 0 0 0 3em rgba(255, 255, 255, 0.3), 0 0 0 5em rgba(255, 255, 255, 0.3);
}
100% {
box-shadow: 0 0 0 1em rgba(255, 255, 255, 0.3), 0 0 0 3em rgba(255, 255, 255, 0.3), 0 0 0 5em rgba(255, 255, 255, 0.3), 0 0 0 8em rgba(255, 255, 255, 0);
}
}
@keyframes circle_ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 1em rgba(255, 255, 255, 0.3), 0 0 0 3em rgba(255, 255, 255, 0.3), 0 0 0 5em rgba(255, 255, 255, 0.3);
}
100% {
box-shadow: 0 0 0 1em rgba(255, 255, 255, 0.3), 0 0 0 3em rgba(255, 255, 255, 0.3), 0 0 0 5em rgba(255, 255, 255, 0.3), 0 0 0 8em rgba(255, 255, 255, 0);
}
}
.rs-video{
background-size: cover !important;
.icon-area{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&.style2{
position: relative;
.icon-area{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 65px;
}
}
i{
position:relative;
}
}
/*// Portfolio Style4*/
.rs-portfolio-style4 {
.portfolio-item {
position: relative;
overflow: hidden;
.portfolio-img {
position: relative;
z-index: 1;
img {
width: 100%;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease;
border-radius: 5px;
}
.p-link {
display: none;
}
}
.portfolio-content {
position: absolute;
padding: 30px 20px 15px;
opacity: 0;
z-index: 1;
bottom: -150px;
left: 50%;
transform: translateX(-50%);
width: 86%;
z-index: 9;
background: #ffffff;
transition: 0.6s;
a {
color: @titleColor;
display: block;
}
h3 {
margin-bottom: 5px;
font-size: 20px;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.p-title{
margin-bottom: 5px;
font-size: 18px;
}
.tite-color{
&:hover {
color: @primaryColor;
}
}
p {
margin-bottom: 0;
color: #fff;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.p-category{
a{
color: @bodyColor;
}
}
}
.pt-icon-plus{
position: relative;
-webkit-transition: .5s all ease-out;
transform: translateY(20px);
transition-delay: .1s;
color: #ed4e31;
&:before{
font-family: FontAwesome;
content: "+";
position: absolute;
left: 50%;
transform: translateX(-50%);
right: 0;
bottom: -40px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
z-index: 9999;
font-size: 35px;
display: block;
cursor: pointer;
transition: 0.4s;
}
}
&:hover {
.portfolio-content {
opacity: 1;
bottom: 30px;
h3 {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
p {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.portfolio-img {
&:before {
opacity: 0.7;
}
img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
}
.pt-icon-plus:before{
bottom: -6px;
}
}
}
}
/*// Portfolio Style5*/
.rs-portfolio-style5 {
.portfolio-item {
position: relative;
overflow: hidden;
z-index: 1;
.portfolio-img {
position: relative;
z-index: 1;
img {
width: 100%;
transform: scale(1.2);
transition: 0.6s;
}
.p-link {
position: absolute;
bottom: 20px;
right: 20px;
display: inline-block;
font-size: 36px;
color: #ffffff;
transition: all 0.3s ease;
opacity: 0;
i {
margin-left: 2px;
}
&:hover {
opacity: 0.7 !important;
}
}
}
.p-icon{
transition: all .4s ease-in-out 0s;
bottom: -100px;
right: 25px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: @secondaryColor;
border-radius: 50%;
z-index: 7;
opacity: 0;
visibility: hidden;
position: absolute;
}
.portfolio-content {
position: absolute;
padding: 24px 30px;
opacity: 0;
z-index: 10;
top: 0;
visibility: hidden;
width: 100%;
height: 100%;
text-align: center;
&:before{
background: rgba(0, 0, 0, 0.4);
content: '';
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
transition: all 0.4s;
border-radius: 5px;
transform: scale(1.2);
transition: 0.6s;
}
a {
color: #fff;
}
.p-title {
margin-bottom: 5px;
font-size: 18px;
transition: 0.3s ease all;
line-height: 25px !important;
}
p {
margin-bottom: 0;
color: #fff;
transition: 0.3s ease all;
}
.portfolio-inner{
position: relative;
z-index: 11;
transform: scale(1.3);
transition: 0.5s;
}
}
&:hover {
.portfolio-content,
.portfolio-content:before{
opacity: 1;
visibility: visible;
}
.portfolio-img img,
.portfolio-content:before,
.portfolio-content .portfolio-inner{
transform: scale(1);
}
}
}
}
.rs-portfolio-style6 {
overflow: hidden;
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 0;
.portfolio-img {
position: relative;
z-index: 1;
overflow: hidden;
img {
width: 100%;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease;
border-radius: 0px;
}
}
.portfolio-content {
position: absolute;
padding: 17px 25px 15px;
opacity: 0;
visibility: hidden;
z-index: 1;
left: 0;
bottom: -100px;
bottom: -100px;
text-align: left;
width: 100%;
border-top: 0;
z-index: 11;
transition: 0.6s;
height: 100%;
.p-title{
font-size: 18px;
margin-bottom: 0;
a {
color: @primaryColor;
}
}
&:before{
background: rgba(0, 0, 0, 0.4);
content: '';
position: absolute;
bottom: -150px;
left: 0;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
transition: all 0.4s;
border-radius: 5px;
transition: 0.6s;
}
.p-category{
a {
color: @bodyColor;
}
}
h3 {
margin-bottom: 0;
font-size: 18px;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
font-weight: 600 !important;
line-height: 30px !important;
a {
&:hover {
color: @secondaryColor;
}
}
}
p {
margin-bottom: 0;
color: @secondaryColor;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
}
.portfolio-inner{
position: absolute;
bottom: -100px;
transition: 0.5s;
left: 30px;
}
}
&:hover {
.portfolio-content {
opacity: 1;
visibility: visible;
bottom: 0;
h3 {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
p {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
&:before {
opacity: 1;
bottom: 0;
visibility: visible;
}
.portfolio-inner{
bottom: 30px;
}
}
.portfolio-img {
img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
}
}
}
.portfolio-slider-data{
.slick-dots{
text-align: center;
bottom: -75px;
li{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 30px;
background: @primaryColor;
transition: 0.4s;
&:hover,
&.slick-active{
background: @secondaryColor;
}
}
}
.slick-prev,
.slick-next{
background: @secondaryColor;
width: 42px;
height: 42px;
line-height: 42px;
border-radius: 50px;
z-index: 8;
transition: 0.4s;
i{
color: #fff;
}
&:after{
display: none;
}
opacity: 0;
visibility: hidden;
}
.slick-prev{
left: -100px;
}
.slick-next{
right: -100px;
}
&:hover{
.slick-prev,
.slick-next{
opacity: 1;
visibility: visible;
}
.slick-prev{
left: -50px;
}
.slick-next{
right: -50px;
}
}
.portfolio-item,
.project-item{
.bg-overlay{
background: #000;
opacity: 0.7;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
}
.light .rs-portfolio-style5 .portfolio-item .portfolio-content{
background: #fff;
}
.rs-portfolio-agency{
.portfolio-filter {
margin-bottom: 30px;
}
}
.single-portfolios {
.rs-porfolio-details{
&.project-gallery{
margin-bottom: -30px;
}
}
.project-desc{
padding-right: 30px;
}
.project-img{
margin-bottom: 50px;
}
.ps-informations {
h3{
padding: 14px 20px;
background: @secondaryColor;
border-radius: 0;
font-size: 20px;
color: @whiteColor;
line-height: 26px !important;
margin:0 !important;
}
}
}
.wp-block-gallery.aligncenter,
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright{
display: flex !important;
}
.mfp-content{
figure{
position: relative;
.mfp-title{
position: absolute;
left: 0;
bottom: 4px;
width: auto;
right: 0;
color:#fff !important;
background:rgba(255,255,255,.05);
padding: 30px;
.gallery-title-wrap{
h3{
margin: 0;
color:#fff !important;
font-size: 25px !important;
font-weight: 600 !important;
}
}
p{
margin: 12px 0 0;
}
p:empty {
display: none;
}
}
}
}
.ps-navigation {
margin-top: 70px;
margin-left: auto;
margin-right: auto;
width: 100%;
i:before{
margin-left: 0;
}
ul {
margin: 0 !important;
list-style: none;
.prev {
display: inline-block;
text-align: left;
}
.next {
display: inline-block;
text-align: right;
word-break: break-all;
}
a {
text-transform: uppercase;
span {
display: block;
font-weight: normal;
text-transform: capitalize;
&:first-child {
margin-top: 0;
}
}
span.pagi-date {
font-size: 13px;
color: #aaa;
line-height: normal;
margin-top: 5px;
}
&:hover {
color: @secondaryColor;
}
}
}
}
.single-portfolios {
.owl-carousel .owl-nav [class*="owl-"]{
top: calc(50% - 0)
}
.ps-navigation {
margin-bottom: 0;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 100%;
ul{
li{
a{
font-size: 15px;
span{
font-size: 15px !important;
}
}
}
}
}
.owl-stage-outer{
height: auto !important;
margin-bottom: 50px;
}
}
/* ------------------------------------
21. Gallery Css
---------------------------------------*/
.rs-galleys{
.file-list-image,
.galley-img{
position: relative;
margin-bottom: 30px;
.p-zoom,
.zoom-icon{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%, -50%);
opacity: 0;
visibility: hidden;
background: transparent !important;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
transition: all 0.5s ease-in-out;
i{
&:before{
font-size: 22px;
}
}
&:hover{
color:@primaryColor;
}
}
&:before{
content: "";
position: absolute;
background: rgba(0,0,0,.3);
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0%;
height: 100%;
transition: all 0.4s ease-in-out;
}
&:hover{
&:before{
width: 100%;
}
.p-zoom,
.zoom-icon{
visibility: visible;
opacity: 1;
color: #fff !important;
}
}
}
.no-gutters{
.file-list-image{
margin-bottom: 0;
}
}
}
.mfp-close{
opacity: 0.9;
}
.rs-banner {
&.full-screen{
width: 100%;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
position: relative;
background-repeat: no-repeat;
background-position: bottom center;
}
#particles-js {
background-size: cover;
height: 100%;
position: absolute;
width: 100%;
z-index: 0;
}
.banner-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
.banner_title {
display: inline-block;
margin-bottom: 16px;
font-size: 65px;
position: relative;
z-index: 9;
color: #444;
line-height: 70px;
}
.banner-button {
margin-top: 20px;
&.btn-light {
.readon:not(.border) {
&:hover {
background: transparent;
border-color: @secondaryColor;
color: #fff;
}
}
.readon.border {
border-color: #fff;
color: #fff;
&:hover {
border-color: @primaryColor;
}
}
}
.readon{
border-color:@secondaryColor;
background:transparent;
padding: 11px 35px;
&:hover{
background:@secondaryColor !important;
color: @whiteColor !important;
}
}
}
.work-position {
h3 {
font-size: 40px;
color: #bbb;
display: inline-block;
span{
margin-right: 10px;
}
}
.cd-headline {
display: inline-block;
color: #bbb;
font-size: 40px;
line-height: 52px;
font-weight: 500;
}
}
}
.cd-words-wrapper:after{
background-color: @primaryColor;
height: 90%;
top: 10px;
width: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
display: inline-block;
margin: 0 25px 25px 0;
}
}
.arrow-btn {
width: 26px;
height: 55px;
bottom: 7%;
left: 50%;
z-index: 99;
text-align: center;
position: absolute;
border: 1px solid #999;
border-radius: 20px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
i {
color: #999;
font-size: 22px;
line-height: 80px;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite;
transition: 0.4s;
-webkit-transition: 0.4s;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
&:hover {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
}
}
&.not-full-screen{
.banner-content{
position: relative;
top: 0;
transform: translateY(0);
}
.cd-words-wrapper{
margin-left: 0;
}
.container{
padding: 0;
}
}
}
/* ------------------------------------
21. Portfolio Details
---------------------------------------*/
.rs-porfolio-details {
.ps-informations {
ul{
margin: 0;
list-style: none;
text-align: left;
padding: 25px 30px;
background: #fbfbfb;
}
ul {
li {
+ li {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid rgba(54, 54, 54, 0.05);
}
span {
width: 150px;
display: inline-block;
color: @titleColor;
font-weight: 600;
}
}
}
}
.ps-image {
text-align: center;
margin-bottom: 10px;
}
.ps-share {
ul{
margin: 0
}
margin-top: 40px;
.share-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 20px;
}
ul {
li {
display: inline-block;
margin: 0 10px 14px 0;
a {
font-size: 20px;
display: block;
width: 50px;
height: 48px;
line-height: 48px;
border: 1px solid @primaryColor;
text-align: center;
transition: 0.4s;
&:hover {
background-color: @primaryColor;
color: @secondaryColor;
}
}
}
}
}
.project-desc {
line-height: 30px;
p:last-child {
margin-bottom: 0;
}
.ps-title {
margin-bottom: 20px;
}
}
.ps-related-project {
margin-top: 50px;
.ps-related-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 30px;
}
.portfolio-item {
margin-bottom: 20px;
}
}
.portfolio-carousel {
.owl-dots {
display: none;
}
.owl-stage-outer{
height: auto !important;
}
.owl-nav{
display: none;
.owl-prev{
left: 10px !important;
min-height: 1px;
transition: all .5s ease;
}
.owl-next{
right: 10px !important;
min-height: 1px;
transition: all .5s ease;
}
}
&:hover{
.owl-nav{
display: block;
}
}
.file-list-image{
img{
border-radius: 5px;
}
}
}
&.project-gallery {
.ps-image-wrap {
margin-top: 28px;
}
.file-list-image {
margin-bottom: 30px;
position: relative;
background: #000000;
border-radius: 5px;
a{
&:hover{
i{
color: #fff;
}
}
}
img {
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
border-radius: 5px;
}
.p-zoom {
display: inline-block;
font-size: 14px;
color: #fff;
transition: all 0.3s ease 0s;
height: 46px;
line-height: 44px;
width: 46px;
border: 1px solid #ffffff;
border-radius: 50%;
text-align: center;
position: absolute;
left: 50%;
top: 60%;
opacity: 0;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
&:hover {
img {
opacity: 0.4;
}
.p-zoom {
top: 50%;
opacity: 1;
&:hover {
background: @primaryColor;
color: #ffffff;
border: 1px solid @secondaryColor;
}
}
}
}
}
}
/*--------------------------------------------------------------
Rs service slider css
--------------------------------------------------------------*/
#rs-services-slider {
padding-bottom: 30px;
.item-thumb {
width: 100%;
padding-right: 16px;
img{
border-radius: 5px;
}
}
.item-thumb .owl-dot {
width: 48%;
display: inline-block;
justify-content: center;
padding: 10px;
float: left;
cursor: pointer;
margin-left: 10px;
margin-bottom: 10px;
}
.device-lg .item-thumb .owl-dot,
.device-sm .item-thumb .owl-dot {
height: 150px;
}
.device-xs .item-thumb .owl-dot {
width: 50%;
padding: 10px;
height: 100px;
}
.feature-content{
margin-bottom: 12px;
}
.img_wrap{
position: relative;
overflow: hidden;
margin-bottom: 24px;
.feature-title{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 33px;
z-index: 9;
color: #fff;
a{
color: #fff;
&:hover{
color: @primaryColor;
}
}
}
a{
img{
width: 100%;
}
}
&:before{
content: "";
position: absolute;
background: @secondaryColor;
left: -60px;
right: 0;
bottom: -80px;
display: block;
height: 192px;
opacity: .8;
z-index: 1;
transform: rotate(-3deg);
width: 150%;
}
&:after{
content: "";
position: absolute;
background: @secondaryColor;
left: -150px;
right: 0;
bottom: -80px;
display: block;
height: 204px;
opacity: .8;
z-index: 1;
transform: rotate(-3deg);
width: 150%;
}
}
.item-thumb .owl-dot span {
position: relative;
display: block;
background-size: cover;
background-position: center center;
width: auto;
height: 100%;
-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .05);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, .05);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.item-thumb .owl-dot.active span,
.item-thumb .owl-dot:hover span {
opacity: .7;
}
.menu-carousel .heading-block h4 {
margin-bottom: 7px;
margin-top: 10px;
letter-spacing: 2px;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
}
.menu-carousel .heading-block h4 a {
font-weight: 600;
color: @titleColor;
transition: .20s;
}
.menu-carousel .heading-block h4 a:hover {
color: @primaryColor;
}
.menu-carousel .feature-content {
position: relative;
padding: 16px 0 0;
border-radius: 0 0 5px 0px;
text-align: left;
.service_details{
padding-top: 36px;
}
}
.menu-carousel .heading-block p {
margin-bottom: 0;
}
.menu-carousel .heading-block .readon {
margin-top: 20px;
}
.menu-carousel .heading-block .food-info {
color: #BBB;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
font-size: 14px;
}
.food-price {
position: absolute;
top: 40px;
right: 50px;
font-size: 20px;
letter-spacing: -1px;
font-weight: 500;
}
.menu-carousel .more-link {
margin-top: 35px;
border-bottom: 1px solid #333 !important;
}
.more-link {
font-style: normal;
border-bottom: 0;
color: #333;
margin-top: 10px;
font-size: 14px;
}
.team-title h4 {
font-size: 15px;
}
.team-title span {
font-style: normal;
margin-bottom: 15px;
color: #aaa !important;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.entry {
padding: 0;
margin: 0;
border-bottom: 0;
-webkit-box-shadow: 0 0 15px 2px rgba(0, 0, 0, .08);
-moz-box-shadow: 0 0 15px 2px rgba(0, 0, 0, .08);
box-shadow: 0 0 15px 2px rgba(0, 0, 0, .08);
}
.entry-title {
background-color: #FFF;
padding: 15px;
}
.entry-title h2 {
text-transform: none;
font-size: 17px;
font-weight: 500;
letter-spacing: 0;
}
.entry-meta {
margin: 8px 0 0;
}
.ipost .entry-meta li a {
font-size: 11px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
color: #999;
}
.entry-meta li:before {
content: '\00b7';
opacity: 1;
}
.service-button {
margin: 80px 0 80px 15px;
}
.device-sm .service-button, .device-xs .service-button {
margin: 30px 0 0;
}
.clfeatures .cl-ft-item {
border-radius: 5px;
img {
display: block;
margin: 0;
border-radius: 5px;
}
}
.item-thumb .owl-dot {
position: relative;
}
.item-thumb .owl-dot:before {
content: "";
position: absolute;
left: 10px;
top: 10px;
z-index: 99;
width: calc(~"100% - 20px");
height: calc(~"100% - 20px");
background: rgba(0, 0, 0, 0.8);
transition: all 500ms ease;
opacity: 0;
border-radius: 5px;
}
h5.overlay-feature-title {
font-size: 16px;
line-height: 140%;
font-weight: normal;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9999;
text-align: center;
width: calc(100% - 20px);
transition: all 500ms ease;
opacity: 0;
}
h5.overlay-feature-title a {
color: #fff;
pointer-events: none;
}
.item-thumb .owl-dot:hover:before,
.item-thumb .owl-dot.active:before {
opacity: 1;
}
.item-thumb{
.owl-dot{
&.service_icon_style{
float: none;
text-align: center;
background: #ffffff;
padding-top: 28px;
padding-bottom: 22px;
border-radius: 3px;
box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.02);
&:before{
display: none;
}
.tile-content{
margin-top: 10px;
font-weight: 600;
margin-bottom: 0;
font-size: 16px;
text-transform: uppercase;
a{
color: @titleColor;
}
}
&.active,
&:hover{
.tile-content{
a{
color: @hoverColor;
}
}
}
}
}
}
.item-thumb .owl-dot:hover h5.overlay-feature-title,
.item-thumb .owl-dot.active h5.overlay-feature-title{
opacity: 1;
}
@media (min-width:992px) {
#header,
#header-wrap {
z-index: 200;
background-color: transparent !important;
background-repeat: repeat-x;
background-position: center bottom;
background-size: auto 100%;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#primary-menu ul li>a {
padding-top: 32px;
padding-bottom: 10px;
}
#header.sticky-header #header-wrap {
background-color: transparent !important;
box-shadow: none;
}
.slider-caption h2 {
font-size: 76px;
}
.food-price {
font-size: 24px;
top: 50px;
right: 60px;
}
}
.services-wrap {
.services-item {
position: relative;
padding: 0px 25px 65px;
z-index: 10;
&:after {
content: '';
position: absolute;
left: 0;
z-index: -1;
height: 100%;
width: 100%;
background: #fff;
transition: 0.4s;
top: 50%;
transform: scale(1,0.9) translateY(-50%);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
opacity: 0;
}
&:hover {
.services-desc {
&:after {
background: @primaryColor;
width: 100px;
}
}
&:after {
opacity: 1;
transform: scale(1,1) translateY(-50%);
}
}
}
.services-icon {
position: relative;
display: inline-block;
font-size: 64px;
color: @primaryColor;
}
.services-title {
font-size: 20px;
margin-top: 35px;
margin-bottom: 25px;
}
.services-desc {
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
height: 2px;
width: 50px;
bottom: -45px;
background: rgba(0, 0, 0, 0.1);
transition: 0.4s;
}
p{
margin-bottom: 55px;
}
}
}
}
/*--------------------------------------------------------------
Rs service Grid css
--------------------------------------------------------------*/
.rs-service-grid{
.service-item{
position: relative;
.service-img{
position: relative;
overflow: hidden;
img{
border-radius: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.4s linear;
}
&:before{
content: "";
position: absolute;
background: @secondaryColor;
left: -73px;
right: 0;
bottom: -28px;
display: block;
height: 155px;
opacity: .8;
z-index: 1;
transform: rotate(-8deg);
width: 150%;
transition: all 0.4s ease-in-out;
}
&:after{
content: "";
position: absolute;
background: @secondaryColor;
left: -73px;
right: 0;
bottom: -28px;
display: block;
height: 136px;
opacity: .6;
z-index: 1;
transform: rotate(-8deg);
width: 150%;
transition: all 0.4s ease-in-out;
}
.p-title{
font-size: 20px;
margin:0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 28px 0;
font-weight: 500;
margin: 0;
z-index: 9;
a{
color: #fff;
opacity: 1;
}
}
}
.service-content{
display: block;
.service-excerpt{
padding-top: 0;
p{
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.4s ease-in-out;
padding: 0 25px;
}
}
}
.service-content{
position: absolute;
opacity: 0;
padding: 20px;
color: #fff;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
transition: all 0.4s ease-in-out;
z-index: 9;
&:before{
content:"";
position: absolute;
background: @secondaryColor;
left: 0;
right: 0;
bottom: 0;
display: block;
top: 0;
opacity: 0;
z-index: 0;
}
.service-button{
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.4s linear;
.readon.rs_button{
height: 50px;
line-height: 48px;
background: #fff;
border: 2px solid;
border-color: #fff;
color: @secondaryColor;
&:hover{
background:#fff;
padding-right: 55px;
border: 2px solid;
border-color: @secondaryColor;
color: @secondaryColor;
&:before{
right:35px;
color: @secondaryColor;
}
}
}
}
}
&:hover{
.service-content{
opacity: 1;
&:before{
opacity: .8;
}
}
.service-button{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
.service-img{
h3.p-title{
display: none;
}
&:before, &:after{
opacity: 0;
height: 0;
}
img{
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
}
.service-content{
.service-excerpt{
p{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
}
}
}
}
&.rs-service-style2{
.service-item{
.service-img{
&:before, &:after{
height: 90px;
transform: rotate(0deg);
bottom: 0;
z-index: 0;
}
h3.p-title{
padding: 20px 0 14px;
}
}
.service-content{
.service-excerpt{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
left: 0;
right: 0;
z-index: 99;
}
}
}
}
&.rs-service-stylestyle4{
.service-item-four{
position: relative;
overflow: hidden;
&:after{
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.9;
content: "";
position: absolute;
border-radius: 0;
z-index: 0;
transition: 0.4s;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0b2ba7+0,7db9e8+100&1+0,0+100 */
background: -moz-linear-gradient(bottom, rgba(0,0,0, 0.4) 0%, rgba(51,51,51,0.5) 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, rgba(0,0,0, 0.4) 0%,rgba(51,51,51,0.5) 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, rgba(0,0,0, 0.4) 0%,rgba(51,51,51,0.5) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000333',GradientType=0 ); /* IE6-9 */
}
&:before{
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.9;
content: "";
position: absolute;
background: transparent;
border-radius: 0;
z-index: 1;
transition: 0.4s;
}
&:hover{
&:before{
background-color: rgba(0,0,0, 0.7);
}
}
.service-content{
.p-title{
margin-bottom: 12px;
font-size: 20px;
width: 100%;
}
padding: 0 20px;
position: absolute;
left: 0;
width: 100%;
z-index: 1;
transition: 0.4s;
bottom: 15px;
p{
line-height: 22px;
opacity: 0;
visibility: hidden;
margin-bottom: 0;
height: 0;
transition: 0.4s;
color: #ffffff;
display: block;
}
h3{
color: #fff;
padding: 12px 15px 0;
display: inline-block;
font-size: 18px;
margin: 0;
}
&:after,
&:before{
background: transparent;
}
}
&:hover{
.service-content{
bottom: 15px;
h3{
color: #fff;
background: transparent;
}
p{
opacity: 1;
visibility: visible;
height: auto;
}
}
}
}
}
.show_cate_ser{
display: block;
font-size: 14px;
}
}
.box-service{
.rs-services-default{
.services-wrap{
.services-item{
padding: 25px 25px 25px 10px;
transition: all 0.6s ease 0s;
background: #fff;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
border-radius: 5px;
}
}
}
}
/* Processbar CSS */
.cdev div {
position: absolute;
height: 150px;
width: 150px;
border-radius: 50%;
}
.skillbar-wrap {
position: relative;
height: 150px;
width: 150px;
.skill-title{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding-top: 113px;
&:after{
content: '';
position: absolute;
height: 113px;
width: 1px;
border: 1px dashed @secondaryColor;
display: block;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
}
}
}
.vc_progress_bar {
margin-bottom: 0;
h2 {
font-size: 24px;
line-height: 34px;
margin-bottom: 45px;
text-transform: uppercase;
}
.vc_single_bar {
background: #eee;
margin-top: 23px;
-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
line-height: 12px;
height: 12px;
+ .vc_single_bar {
margin-top: 50px;
}
.vc_label {
font-size: 13px;
text-transform: uppercase;
color: @bodyColor !important;
text-shadow: none;
padding: 0;
position: absolute;
text-shadow: none !important;
top: -22px;
padding: 0 !important;
font-size: 13px;
}
.vc_label_units {
margin-left: 6px;
}
}
}
.cdev div span {
position: absolute;
font-family: Arial;
font-size: 25px;
line-height: 105px;
height: 70%;
width: 70%;
left: 15%;
top: 15%;
text-align: center;
border-radius: 50%;
background-color: white;
}
.cdev .background { background-color: #b3cef6; }
.cdev .rotate {
clip: rect(0 75px 150px 0);
background-color: #4b86db;
}
.cdev .left {
clip: rect(0 75px 150px 0);
opacity: 1;
background-color: #b3cef6;
}
.cdev .right {
clip: rect(0 75px 150px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
@keyframes
toggle { 0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*--------------------------------------------------------------
Floating CSS
--------------------------------------------------------------*/
.floating-top{
position: relative;
z-index: 1;
}
/*--------------------------------------------------------------
Latest product slider
--------------------------------------------------------------*/
.rs-products-slider{
.product-item{
background:#fff;
text-align: center;
padding: 0px 0px 30px;
box-shadow: 0 0 150px #eee;
h4.product-title{
padding-top:20px;
margin-bottom: 15px;
a{
color: @titleColor;
&:hover{
color: @primaryColor;
}
}
}
.product-img{
img{
width: auto;
margin: 0 auto;
}
}
.product-price{
font-size: 16px;
color: @titleColor;
ins{
background:transparent !important;
color: @primaryColor
}
}
.product-btn{
padding-top:15px;
a{
padding: 0 30px;
height: 44px;
line-height: 44px;
display: inline-block;
position: relative;
font-size: 17px;
background:@btnBgColor;
font-weight: 500;
border-radius:0;
color: #fff;
&:hover{
background:@btnHoverColor;
}
}
}
}
&.rs-products-grid{
.product-item-inner{
padding: 0 0 30px;
background: none;
text-align: center;
margin-bottom: 30px;
.product-img{
position:relative;
img{
width: 100%;
}
.product-btn{
a{
background: none;
font-size: 0;
background: #fff;
border: none;
padding: 0;
position: absolute;
bottom: 25px;
transform: translateY(-200px);
right: 10px;
transition: all 0.5s ease-in-out 0s;
padding: 0;
opacity: 0;
margin: 0;
height: 45px;
width: 45px;
line-height: 45px;
border-radius: 3px;
&:before{
color: @titleColor;
font-size: 27px;
}
&:hover{
&:before{
color: @primaryColor;
}
}
&.wc-forward{
font-size: 14px;
color: @titleColor;
padding: 0;
width: 90px;
height: 34px;
line-height: 37px;
&:hover{
background:@primaryColor;
color: #fff;
}
}
&.added{
display: none;
}
}
}
}
ins{
background:none;
}
}
.product-item {
background: none;
text-align: center;
padding:0 15px;
box-shadow: none;
h4.product-title{
margin-bottom: 5px;
}
&:hover{
.product-img{
.product-btn{
a{
transform: translateY(0);
opacity: 1;
}
}
}
}
}
}
}
.wp-block-button__link{
background: @secondaryColor !important;
}
.wp-block-button{
margin-bottom: 20px !important;
}
.is-style-outline{
color: @secondaryColor !important;
a{
background: transparent !important;
}
}
.wp-block-quote.is-large, .wp-block-quote.is-style-large{
padding: 0 40px 40px
}
/*--------------------------------------------------------------
Parter CSS
--------------------------------------------------------------*/
.partner-carousel{
.partner-item{
width: 100px;
display: block;
margin: 0 auto;
img{
opacity: 0.3;
}
&:hover{
img{
opacity: 1;
}
}
}
}
.wp-block-cover-image-text,
.wp-block-cover-text,
section.wp-block-cover-image h2,
.wp-block-cover-text a{
color: #fff !important;
}
.lp-archive-courses {
.course-left {
background: #fff;
padding: 5px 0px;
overflow: hidden;
line-height: 50px;
border-radius: 5px 0 0 5px;
padding-left: 12px;
display: flex;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
.course-icons {
margin-right: 10px;
a{
position: relative;
width: 44px;
height: 36px;
color: #616161;
font-size: 16px;
border-radius: 2px;
line-height: 36px;
text-align: center;
display: inline-block;
background-color: #fbfbfb;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
margin-right: 10px;
&.active-grid {
background: @secondaryColor;
color: #fff;
}
}
}
}
.rs-search {
position: relative;
margin-bottom: 50px;
input[type="text"] {
position: relative;
line-height: 43px;
padding: 10px 50px 10px 25px;
border: 1px solid transparent;
background: #fff;
display: block;
font-size: 14px;
width: 100%;
height: 60px;
color: #000;
border-radius: 0;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}
button {
position: absolute;
right: 0;
border: 0;
top: 0;
height: 60px;
width: 70px;
display: block;
font-size: 16px;
color: #fff;
cursor: pointer;
border-radius: 0 5px 5px 0;
line-height: 100%;
font-weight: 400;
background: @secondaryColor;
}
}
}
.learn-press-pagination{
ul.page-numbers{
display: inline-block;
padding: 0 5px 0 10px;
height: 60px;
line-height: 60px;
box-shadow: 0px 8px 26px 0px rgba(0, 0, 0, 0.1);
li{
position: relative;
display: inline-block;
padding: 0 20px 0 15px;
text-align: center;
cursor: pointer;
&:before{
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: @secondaryColor;
}
span, a{
background: transparent !important;
border:0 !important;
padding: 0;
color: #666+;
&.current{
color: @secondaryColor !important;
}
}
&:last-child{
&:before{
display:none;
}
}
}
}
}
.rs-list-view {
.lp-archive-courses{
ul.learn-press-courses .course{
width: 100%;
.courses-item{
display: flex;
align-items: center;
.content-part{
padding-left: 50px;
}
.img-part{
flex: 0 0 40%;
margin-bottom: 0;
}
}
}
.course-left{
a.active-list{
background: @secondaryColor;
color: #fff;
}
a.active-grid {
background: #fbfbfb;
color: #616161;
}
}
}
}
.rs-iconbox-area{
&.left_number{
.box-inner .text-area .iconbox-title .title::before{
display: inline-block !important;
}
}
}
.rs-ripple-inner{
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
.rs-circle-ripple {
background-color: @secondaryColor;
width: 16px;
height: 16px;
border-radius: 50%;
-webkit-animation: circleripple 0.7s linear infinite;
animation: circleripple 0.7s linear infinite;
}
.rs-parallax {
position: relative;
margin: 0;
padding: 0;
.parallax-img-1{
background-repeat: no-repeat !important;
position: absolute;
}
}
.blog_meta_style2 {
.btn-btm{
border: none !important;
padding-top: 0 !important;
}
}
.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); }
}
.veritcal_two {
animation-name: veritcal_two;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes veritcal_two {
0% { transform: translateY(100px); }
50% { transform: translateY(0); }
100% { transform: translateY(100px); }
}
.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); }
}
.rotated_style{
animation: rotate1 30s linear infinite;
-webkit-animation: rotate1 30s linear infinite;
}
@keyframes rotate1 {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate1 {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
}
}
.home15-banner{
&.yes{
.rs-image{
@keyframes veritcal_two {
0% { transform: translateY(30px); }
50% { transform: translateY(0); }
100% { transform: translateY(30px); }
}
}
}
}
.rs-woo-product-slider{
.product-img.overlay{
position: relative;
overflow: hidden;
padding: 0;
.product-btn{
position: absolute;
left: 0;
right: 0;
text-align: center;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transform: scaleY(0);
transform-origin: 0 1 0;
opacity: 0;
transition: all 0.4s ease-in-out 0s;
padding: 0;
.glyph-icon{
background: @secondaryColor;
border: none;
font-size: 30px;
padding: 0;
margin: 0;
height: 45px;
width: 45px;
line-height: 45px;
color: #fff;
display: block;
margin-left: auto;
bottom: -14px;
position: absolute;
transform: translateY(-55%);
transition: all .9s;
right: 12px;
border-radius: 5px;
&:before{
margin-left: 0;
font-size: 23px;
}
}
}
}
.product-item{
&:hover{
.product-img.overlay{
.product-btn{
opacity: 1;
transform: scaleY(1);
}
}
}
}
}
.rselements-product-list{
text-align: center;
padding: 15px;
.product-title{
margin-bottom: 10px;
}
.product-btn a{
display: inline-block;
}
}
.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--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;
}
}
.rs-testimonial-default{
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{
border-radius: 0px 0px 0px 0px;
margin-bottom: 28px;
}
}
.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;
}
}
blockquote.style1{
font-size: 18px;
font-style: normal;
margin: 0;
margin-bottom: 20px;
padding: 20px 35px;
background:#F8F8F8 !important;
&:before{
width: 6px;
display: none;
}
}