File: /home/httpd/vhosts/rajlaw.com.tw/httpdocs/wp-content/themes/advokat/assets/css/rsaddons.less
/*--------------------------------------------------------------
Heading css
--------------------------------------------------------------*/
.rs-heading{
.title-inner{
.sub-text{
margin: 0 0 5px;
display: block;
color: @primaryColor;
font-size: 18px;
font-weight: 400;
line-height: 26px;
font-family: @titleFont;
&.title-upper{
text-transform: uppercase;
}
}
.title{
color:@secondaryColor;
line-height: 40px;
margin-bottom: 15px;
&.title-upper{
text-transform: uppercase;
}
span.watermark {
position: absolute;
font-size: 80px;
text-transform: uppercase;
font-weight: 800;
z-index: -1;
opacity: 0.05;
width: 100%;
left: 0;
color: inherit;
}
}
h2.title{
line-height: 48px !important;
}
}
&.big{
.title-inner{
h2{
font-size: 36px;
line-height: 44px;
}
}
.description{
p{
font-size: 20px;
line-height: 32px;
}
}
}
&.style4{
.title-inner{
.title{
margin-bottom: 8px;
}
.title-img{
margin-bottom: 12px;
}
}
}
&.style5{
.sub-text{
display: inline-block;
}
}
&.style2{
position: relative;
padding-bottom: 7px;
margin-bottom: 23px;
&:after{
content: "";
position: absolute;
border: 0;
width: 100px;
height: 3px;
background: @primaryColor;
z-index: 1;
margin-left: 0;
left: 0;
bottom: 0;
}
&.text-center{
&:after{
transform: translateX(-50%);
left: 50%;
}
}
h2{
margin-bottom: 12px;
}
.description{
p{
margin-bottom: 12px;
}
}
&.light{
&:after{
background: #fff !important;
}
}
}
&.style3{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
}
.description{
position: relative;
padding-left: 80px;
&:after{
content: "";
position: absolute;
border: 0;
width: 60px;
height: 2px;
background: @primaryColor;
z-index: 9;
margin-left: 0;
left: 0;
top: 14px;
}
p{
margin-bottom: 12px;
}
}
&.light{
.description{
&:after{
background: #fff !important;
}
}
}
}
&.style1{
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
}
.description{
position: relative;
padding-right: 80px;
&:after{
content: "";
position: absolute;
border: 0;
width: 60px;
height: 2px;
background: @primaryColor;
z-index: 9;
margin-left: 0;
right: 0;
top: 14px;
}
p{
margin-bottom: 12px;
}
}
&.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: @primaryColor;
z-index: 9;
margin-left: 0;
left: 0;
top: 0;
}
}
.description{
padding-left: 25px;
position: relative;
padding-top:15px;
}
h2{
margin-bottom: 0 !important;
}
&.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: 9;
margin-left: 0;
left: 0;
top: 12px;
}
p{
margin-bottom: 12px;
}
}
}
&.text-center,
&.text-right{
.title-inner{
.sub-text{
display: inline-block;
}
}
}
&.text-center{
.sub-text{
position: relative;
padding-left: 0px;
padding-top: 60px;
color: @secondaryColor;
&:after{
content: '';
width: 77px;
height: 2px;
position: absolute;
left: 50%;
top: 0;
margin-top: -1px;
width: 2px;
height: 50px;
}
}
}
&.light{
.sub-text{
&:after{
background: #fff !important;
}
}
}
&.dark{
.sub-text{
&:after{
background: #232023 !important;
}
}
}
}
&.style4{
.title-inner{
text-align: center;
position: relative;
padding-bottom: 12px;
h2{
margin-bottom: 12px;
display: block;
}
.sub-text{
position: relative;
color: @secondaryColor;
display: inline-block;
&:before,
&:after{
content: "";
position: absolute;
border: 0;
width: 30px;
height: 1px;
background: @primaryColor;
z-index: 1;
margin-left: 0;
left: -20px;
top: 12px;
}
&:before{
left: -40px;
}
&:after{
left: auto;
right: -40px;
}
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: @primaryColor;
z-index: 9;
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-inner{
margin-bottom: 15px;
.title-img.top{
margin-bottom: 15px;
}
}
.title-upper{
margin-bottom: 5px;
}
.bottom-line{
.title{
margin-bottom: 8px;
position: relative;
}
}
&.text-center{
.bottom-line {
.title{
&:after{
transform: translateX(-50%);
left: 50%;
}
}
}
}
}
&.style10{
.sub-text{
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
background: @primaryColor;
}
.title{
display: block;
}
}
&.style11{
text-align: right !important;
&.text-center{
text-align: right !important;
.title-inner{
text-align: center;
}
}
&.text-right{
text-align: right !important;
.title-inner{
text-align: right;
}
}
.title-inner{
transform: rotate(90deg);
display: inline-block;
}
.description{
transform: rotate(90deg);
display: inline-block;
}
}
}
.title-no-margin h4.title {
margin-bottom: 5px;
}
.title-no-margin h3.title {
margin-bottom: 3px !important;
font-size: 20px;
}
.list-style{
padding: 0;
margin: 0;
list-style: none;
li{
position: relative;
padding-left: 32px;
margin-bottom: 5px;
&:before{
content: "\f0a9";
font-family: FontAwesome;
position: absolute;
left: 0;
top: 0;
font-size: 20px;
}
}
}
.course-image{
position: relative;
overflow: hidden;
img{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.course-cat{
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
text-align: center;
a{
color: #fff;
background: @btnBgColor;
padding: 3px 20px;
margin-right: 6px;
font-size: 13px;
border-radius: 3px;
display: inline-block;
line-height: 25px;
&:hover{
background: @btnHoverColor;
}
}
}
}
.single-classes{
.course-image{
position: relative;
img{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
}
&:hover{
.course-image{
img{
transform: scale(1.1);
}
}
}
}
.rs-popular-classes2{
.single-classes{
position: relative;
overflow: hidden;
&:after{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(234,76,35,0.8);
transition: 0.3s;
-webkit-transition: 0.3s;
opacity: 0;
visibility: hidden;
}
.defult-title{
position: absolute;
z-index: 1;
background: rgba(234,76,35,0.80);
bottom: 0;
left: 0;
text-align: center;
display: block;
margin: 0;
padding: 19px 0;
width: 100%;
font-size: 20px;
font-weight: 600 !important;
}
h3{
a{
color: #fff;
}
}
.classes-details{
position: absolute;
width: 100%;
top: 101%;
left: 0;
text-align: center;
z-index: 11;
color: #fff;
padding: 0 12px;
transition: 0.3s;
-webkit-transition: 0.3s;
h3{
margin: 0 0 10px;
font-size: 20px;
font-weight: 600 !important;
a{
color: #fff;
}
}
a.transfarent-btn{
border: 2px solid #fff;
line-height: 48px;
height: 52px;
background: #fff;
color: @primaryColor;
padding: 0 20px;
display: block;
width: 150px;
margin: 0 auto;
&:hover{
background: @primaryColor;
color: #fff;
}
}
}
&:hover{
&:after{
opacity: 1;
visibility: visible;
}
.classes-details{
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%0);
}
.defult-title{
display: none;
}
}
}
}
.transfarent-btn{
height: 55px;
line-height: 55px;
border-radius: 30px;
text-align: center;
display: inline-block;
color:#fff;
padding: 0 50px;
position: relative;
font-weight: 600;
font-size: 15px;
z-index: 1;
&:hover{
background: @primaryColor;
color: #fff;
}
}
.transfarent-btn{
background: transparent;
&:hover{
background: @primaryColor;
}
}
/*--------------------------------------------------------------
Call to Actiobn
--------------------------------------------------------------*/
.rs-cta {
a{
height: auto;
line-height: 25px;
border-radius: 3px;
text-align: center;
display: inline-block;
color: #ffffff;
padding: 10px 30px;
position: relative;
font-weight: 500;
font-size: 16px;
z-index: 1;
box-shadow:none;
border: 2px solid;
padding-right: 50px;
}
.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: 36px;
line-height: 46px;
margin-bottom: 0px;
text-align: left;
}
.eta-subtitle{
margin-bottom: 0;
margin-top: 10px;
line-height: 1.12;
}
}
.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: 0;
margin-bottom: 7px;
}
.description{
margin-top: 18px;
}
}
.eta-subtitle{
font-weight: 600;
}
}
.style2{
text-align: center;
.title-wrap{
padding: 25px 0 40px;
}
.button-wrap{
margin-bottom: 10px;
}
}
&.text-left{
.style2{
text-align: left;
.title-wrap{
h2{
text-align: left;
}
}
}
}
&.text-right{
.style2{
text-align: right;
.title-wrap{
h2{
text-align: right;
}
}
}
}
.style2{
.title-wrap {
.eta-subtitle{
margin-top: 10px;
margin-bottom: 10px;
}
.exp-title{
text-align: center;
}
}
}
}
.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;
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;
}
}
}
}
/*--------------------------------------------------------------
services css
--------------------------------------------------------------*/
.rs-services{
.services-style-8{
border: 1px solid @primaryColor;
position: relative;
padding: 30px 10px;
margin-bottom: 30px;
text-align: center;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(51, 51, 51, 0.6);
transition: all 0.3s ease 0s;
}
.watermark{
display: block;
color: @primaryColor;
font-size: 80px;
font-weight: 700;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity: 0.2;
}
&.services-center{
.services-item{
text-align: center;
}
}
&.services-right{
.services-item{
text-align: right;
}
}
.services-desc{
.services-title{
font-size: 24px;
line-height: 30px;
margin-bottom: 10px;
padding-top: 16px;
position: relative;
z-index: 10;
}
}
&.icon-rounded{
.services-icon{
img{
border-radius: 100%;
}
}
}
&:hover{
&:before{
background: @titleColor;
}
}
}
}
.rs-services-default{
.services-wrap {
.services-item{
padding: 50px 30px 16px;
border: 1px solid #534a46;
margin-bottom: 30px;
transition: 0.3s;
.services-icon{
line-height: 60px;
width: 100%;
i:before,
i{
font-size: 40px;
}
}
h4{
margin-bottom: 0;
font-size: 16px;
text-transform: lowercase;
}
.services-title{
font-size: 24px;
margin: 0 0 10px;
}
&:hover{
background: @primaryColor;
}
}
}
&.services-center{
.services-icon{
display: block;
font-size: 40px;
float: none;
width: 100%;
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;
}
}
}
.service_box{
.rs-services-default {
.services-wrap {
.services-item {
margin-bottom: 25px;
.services-title{
}
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: 20px;
}
.services-wrap {
.services-item{
border-bottom: none;
margin: 0;
padding: 5px 0 0px;
.services-icon{
font-size: 30px;
width: 100%;
i{
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
}
.services-desc{
width:100%;
.services-title{
margin: 28px 0 10px;
}
}
&:hover{
.services-title a{
color: @hoverColor;
}
}
&:hover{
.services-icon{
background: @primaryColor;
}
}
}
}
&.services-center{
.services-item{
position: relative;
z-index: 110;
overflow: hidden;
transition: all 0.6s ease 0s;
background: #fff;
.services-icon{
background: #fff;
border: 1px solid @primaryColor;
border-radius: 100px;
cursor: pointer;
transition: all 0.6s ease 0s;
padding: 30px 0;
margin-bottom: 15px;
i{
font-size: 130px;
color: @primaryColor;
transition: all 0.6s ease 0s;
}
}
&:hover{
.services-icon{
background: @primaryColor;
i{
color: #fff;
}
}
}
}
.services-title {
margin: 0 !important;
text-transform: capitalize;
}
}
&.services-right,
&.services-left{
.services-item {
position: relative;
overflow: hidden;
transition: all 0.6s ease 0s;
.services-title {
font-size: 17px;
line-height: 24px;
}
.services-icon{
float: left;
margin-right: 15px;
width: 80px;
text-align: center;
height: 80px;
line-height: 80px;
font-size: 45px;
border: 2px solid @primaryColor;
border-radius: 50%;
transition: 0.4s;
-webkit-transition: 0.4s;
-ms-transition: 0.4s;
}
.services-desc{
position: relative;
float: left;
text-align: left;
line-height: 25px;
font-size: 14px;
width:auto;
.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;
}
}
}
.services-style-2{
border-radius: 6px;
transition: all .5s ease;
.services-wrap{
.services-item{
.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: 20px;
margin: 20px 0 15px;
line-height: normal;
color: @secondaryColor;
a{
color: @secondaryColor
}
}
}
}
}
&.services-center{
.services-icon{
text-align: center;
}
.services-title2{
text-align: center;
}
.services-desc{
text-align: center;
}
}
&.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{
display: flex;
justify-content: center;
.services-title2{
text-align: left;
margin: 0 0 10px;
}
.services-icon{
margin-top: 7px;
max-width: 70px;
}
.services-desc{
text-align: left;
width: calc(~"100% - 70px");
padding-left: 20px;
padding-right: 0;
max-width: 100%;
}
}
}
}
&.services-right{
margin-bottom: 30px;
.services-wrap{
overflow: hidden;
.services-item{
display: flex;
justify-content: center;
flex-direction: row-reverse;
.services-title2{
text-align: right;
margin: 0 0 12px;
}
.services-icon{
margin-top: 7px;
}
.services-desc{
text-align: right;
width: calc(~"100% - 60px");
padding-right: 30px;
padding-left: 0;
}
}
}
}
}
.service-inner.no-rounded{
border-radius: 0 !important;
}
.services-style-7{
&.services-center{
text-align: center;
}
}
.emergency-services{
.services-style-2 {
max-width: 650px;
margin: -100px auto 0;
&.services-left{
.services-wrap {
.services-icon{
margin-top: 10px;
}
.services-icon,
.services-desc{
width: auto;
}
.services-desc{
padding-left: 35px;
h3{
color: #fff;
font-size: 24px;
}
p{
margin: 8px 0 20px;
font-size: 25px;
}
}
}
}
}
}
/* 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;
}
}
}
}
}
.dark-bg{
.rs-services-style3 {
&.services-left{
background: #263043;
}
}
}
.rs-services-style3{
position: relative;
overflow: hidden;
padding: 50px 30px;
&.primary{
.bg-img{
&:after{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color:@primaryColor;
transition: 0.7s;
opacity: 0.8;
}
}
}
&.secondary{
.bg-img{
&:after{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color:@secondaryColor;
transition: 0.7s;
}
}
}
.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;
transition: 0.7s;
opacity: 0.8;
}
a{
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: all .7s ease;
transition: all .7s ease;
font-size: 15px;
height: 45px;
line-height: 43px;
padding: 0 35px;
color: #fff;
background: @secondaryColor;
border-color: @secondaryColor;
opacity: 0;
visibility: hidden;
z-index: 99;
box-shadow: none;
min-width: 160px;
&:hover{
opacity: .9 !important;
background: @secondaryColor;
}
&:before{
display: none;
}
}
}
.services-item{
position: relative;
z-index: 1;
.services-icon{
font-size: 44px;
width: 220px;
border-radius: 50%;
font-size: 45px;
margin: 0;
transition: all 0.3s ease 0s;
color: @primaryColor;
span{
display: inline-block;
width: 100%;
border-radius: 50%;
height: 100%;
text-align: center;
}
.service-img-icon{
width: 60px;
}
}
.services-desc{
.services-title{
margin-bottom: 10px;
}
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 !important;
}
}
}
&.services-center{
text-align: center;
.services-item{
.services-icon{
margin: 0 auto;
.service-img-icon{
width: 60px;
margin: 0 auto 20px;
}
}
}
}
&.services-right{
text-align: right;
.services-item{
.services-icon{
margin-left: auto;
margin-right: 0;
}
}
}
&.services-left{
background: @titleColor;
transition: 0.4s;
&.dark-bg{
background: #282828;
}
.services-item {
display: -ms-flexbox;
display: flex;
}
.services-icon{
margin-right: 0;
@media screen and (max-width: 767px){
margin-right: 15px;
}
position: relative;
.service-img-icon{
img{
width: 64px;
}
}
}
&:hover{
.services-icon{
&:before{
background: #ffffff;
}
i {
color: #ffffff !important;
}
}
}
}
}
.service-carousel,
.department-carousel{
.owl-stage-outer{
overflow: hidden;
}
.rs-services-style3{
max-width: 100%;
}
}
.rs-about .about-skill {
padding: 25px 30px 40px;
width: 420px;
background: #444444;
opacity: 0.9;
position: absolute;
top: 100%;
right: -100px;
overflow: hidden;
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
z-index: 10;
box-shadow: 9px 15px 15px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 9px 15px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 9px 15px 15px rgba(0, 0, 0, 0.2);
h2{
font-size: 25px !important;
margin: 0px 0 50px !important;
color: #ffffff !important;
font-weight: 600 !important;
}
&.vc_progress_bar {
.vc_single_bar {
line-height: 7px !important;
height: 7px !important;
background: #fff !important;
.vc_label{
color: #fff !important;
}
}
}
}
.service-carousel{
position: relative;
z-index: 1;
.single-postion{
position: relative;
&:before{
content: "";
width: 100%;
height: 100%;
left: 0;
top: 100%;
background: rgba(16,16,16,0.7);
z-index: 1;
position: absolute;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
}
.position-details{
.hover-text{
position: absolute;
width: 100%;
left: 0;
top: 101%;
transition: 0.4s;
-webkit-transition: 0.4s;
z-index: 1;
padding: 0 15px;
p{
color: #ccc;
margin: 0 0 8px;
}
.link{
a{
font-weight: 600;
}
i{
font-weight: 700;
color: @primaryColor;
display: inline-block;
position: relative;
padding-left:5px;
}
}
}
h4{
margin: 0 0 8px;
color: @primaryColor;
}
h4.htitle{
background: rgba(16,16,16,0.7);
color: #fff;
height: 70px;
line-height: 70px !important;
position: relative;
z-index: 11;
margin: 0;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
a{
color: #fff !important
}
}
}
&:hover{
&:before{
top: 0;
opacity: 1;
visibility: visible;
}
a:hover{
color: @primaryColor !important
}
.position-details{
h4.htitle{
display: none;
}
.hover-text{
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
}
}
}
}
.slider-services-style2{
background: transparent;
margin-bottom: 30px;
padding: 51px 30px 50px;
transition: all 0.3s ease 0s;
background-image: url(../images/test_wraper_bg.png);
background-repeat: repeat;
position: relative;
text-align: center;
&:before{
background: url(../images/practice-item-bg.png);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
width: 260px;
height: 286px;
}
.service-img{
overflow: hidden;
img{
max-width: 100%;
-webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
width: 36px;
margin: 0 auto;
}
}
.services-desc{
position: relative;
z-index: 1;
padding:0 20px;
.services-title{
margin-top: 18px;
margin-bottom: 4px;
font-size: 20px;
a{
color: @titleColor;
&:hover{
color: @primaryColor;
}
}
}
.readon{
height: 44px;
line-height: 42px;
margin-bottom: 25px;
&:hover{
padding-right: 45px;
}
}
p{
margin: 0 0 20px;
}
}
}
.service-carousel,
.department-carousel{
.owl-stage-outer{
overflow: hidden;
}
.owl-nav {
&.disabled{
display: none;
}
}
.owl-dots{
text-align: center;
margin-top: 25px;
.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;
}
}
}
.department-carousel{
.department-item{
padding: 50px 30px 35px;
text-align: center;
.department-img{
img{
transition: all 0.7s;
transform: scale(1);
max-width: 64px;
}
}
.department-desc{
.services-title{
margin: 17px 0 15px;
a{
&:hover{
opacity: 0.85;
}
}
}
p{
margin-bottom: 15px;
}
}
&:hover{
.department-img{
img{
transform: scale(0.9);
}
}
.service-readon{
padding-right: 24px;
}
}
.service-readon{
color: #fff;
padding: 6px 17px;
display: inline-block;
font-size: 20px;
margin-top: 0px;
border-radius: 18px;
margin-bottom: 20px;
position:relative;
&:after{
position: absolute;
height: 100%;
right: 0;
opacity: 1;
top: 4px;
font-size: 14px;
content: "\f133";
font-family: Flaticon;
display: inline-block;
font-weight: normal;
}
}
}
.owl-nav .owl-next {
position: absolute;
right: -20px;
top: 50%;
color: #fff;
transition: all 0.4s;
opacity: 0;
cursor: pointer;
background: @primaryColor;
width: 42px;
height: 42px;
line-height: 42px;
border-radius: 50%;
text-align: center;
transform: translateY(-50%);
i{
&:before{
font-size: 20px;
}
}
}
.owl-nav .owl-prev {
position: absolute;
left: -20px;
top: 50%;
color: #fff;
background: @primaryColor;
transition: all 0.4s;
opacity: 0;
cursor: pointer;
width: 42px;
height: 42px;
line-height: 42px;
border-radius: 50%;
text-align: center;
transform: translateY(-50%);
i{
&:before{
font-size: 20px;
}
}
}
&:hover{
.owl-nav .owl-next{
right: -40px;
opacity: 1;
}
.owl-nav .owl-prev{
left: -40px;
opacity: 1;
}
}
}
.rs-partner{
.partner-carousel{
.partner-item{
a{
img{
width: 150px;
filter: grayscale(100%);
transition: all .5s ease;
}
&:hover{
img{
filter: grayscale(0);
}
}
}
}
}
}
.rs-services-style4{
position: relative;
transition: all .5s ease;
padding: 50px 30px 20px;
margin-bottom: 0;
overflow: hidden;
background-size:cover;
.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;
font-size: 55px;
display: block;
color: #ffffff;
border-radius: 50%;
font-size: 30px;
transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
}
}
.services-desc{
transition: all .5s ease;
p{
padding: 0 50px;
}
.services-title{
font-size: 20px;
margin: 10px 0 10px;
line-height: normal;
color: @titleColor;
font-weight: 500;
a{
color: @titleColor;
}
}
}
}
&.services-center{
border-radius: 5px;
position: relative;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background: #263043;
transition: all 0.3s ease 0s;
}
.services-icon,
.services-title,
.services-desc{
position: relative;
z-index: 10;
}
.services-icon{
text-align: center;
img{
width: 60px;
}
}
.services-title2{
text-align: center;
}
.services-desc{
text-align: center;
}
.contact-phone{
a{
color: @bodyColor;
&:hover{
color: @primaryColor;
}
}
}
&:hover{
&:before{
background: #263043;
}
}
}
&.services-left{
position: relative;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background: rgba(51, 51, 51, 0.9);
transition: all 0.3s ease 0s;
}
.services-item{
.services-icon,
.services-title,
.services-desc{
position: relative;
z-index: 10;
}
.services-icon {
i{
text-align: left; }
}
.services-title{
text-align: left;
margin: 10px 0 8px;
}
.services-desc{
text-align: left;
}
}
&:hover{
&:before{
background: rgba(141, 110, 99, 0.9);
}
}
}
&.services-right{
overflow: hidden;
.services-item{
.services-icon{
margin-left: auto;
margin-right: 0;
width: 70px;
}
.services-title{
text-align: right;
margin: 0;
}
.services-desc{
text-align: right;
}
}
}
&:hover{
.bg-img{
opacity: 1;
}
}
}
.contact-item-inner{
.rs-services-style4.services-center:before {
background: #ffffff;
}
}
.rs-services-style3 .services-item:hover .services-desc .services-title a{
color: @primaryColor !important;
}
.services-style-home1{
position: relative;
transition: all .5s ease;
padding: 40px 40px 30px;
margin-bottom: 0;
overflow: hidden;
background: #263043;
.services-item{
display: flex;
.services-title{
font-size: 20px;
margin: 0 0 8px;
line-height: normal;
color: @primaryColor ;
a{
color: @primaryColor;
}
}
p{
color: @footertext;
}
&:hover{
a{
color: @primaryColor !important;
}
}
.services-icon{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0 0 0;
i{
color: @titleColor;
background-color: transparent;
font-size: 30px;
transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
text-align: center;
float: left;
margin-right: 12px;
}
}
.service-img-icon{
margin: 15px;
}
.services-desc{
transition: all .5s ease;
margin-top: 10px;
margin-left: 20px;
}
}
}
.rs-services-style5{
position: relative;
transition: all .5s ease;
padding: 0px 10px 0;
margin-bottom: 0;
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-title{
font-size: 20px;
margin: 0;
line-height: normal;
color: @titleColor;
a{
color: @titleColor;
}
}
.services-icon{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0 0 0;
i{
color: @titleColor;
background-color: transparent;
font-size: 30px;
transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
text-align: center;
float: left;
margin-right: 12px;
}
}
.services-desc{
transition: all .5s ease;
}
}
&.services-left{
margin-bottom: 15px;
.services-item{
.services-title2{
text-align: left;
margin: 0 0 10px;
}
.services-desc{
text-align: left;
padding-right: 0;
p{
margin-bottom: 15px;
}
}
}
}
&.services-right{
margin-bottom: 30px;
.services-item{
display: flex;
justify-content: center;
flex-direction: row-reverse;
.services-title2{
text-align: right;
margin: 0 0 12px;
}
.services-icon{
margin-top: 7px;
}
.services-desc{
text-align: right;
width: calc(~"100% - 70px");
padding-right: 30px;
padding-left: 0;
}
}
}
&:hover{
.bg-img{
opacity: 1;
}
}
}
.rs-services-bg-style{
position: relative;
transition: all .5s ease;
padding: 35px 30px 5px;
margin-bottom: 30px;
overflow: hidden;
border-radius: 0 0 20px 0;
background: @primaryColor;
&:before{
position: absolute;
content: "";
top: -14px;
left: -7px;
width: 100%;
height: 100%;
background: @primaryColor;
opacity: 1;
border-radius: 0 0 100px 0;
transform: rotate(4deg);
}
&:after{
position: absolute;
content: "";
top: -6px;
left: -30px;
width: 100%;
height: 100%;
background: @primaryColor;
opacity: 1;
border-radius: 0 0 84px 0;
transform: rotate(-3deg);
}
.services-item{
position: relative;
z-index: 1;
.services-title{
font-size: 20px;
margin: 0;
line-height: normal;
color: @titleColor;
a{
color: @titleColor;
}
}
.services-icon{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0 0 12px;
i{
color: @titleColor;
background-color: transparent;
font-size: 40px;
transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
text-align: center;
float: left;
margin-right: 12px;
}
}
.services-desc{
transition: all .5s ease;
}
}
}
.service-img-icon-six{
img{
max-width: 55px;
}
h3.services-title{
line-height: 28px !important;
}
}
.rs-services{
.services-style-9 {
.services-wrap{
padding: 78px 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{
width: 90px;
margin: 0 auto;
position: absolute;
left: 50%;
top: -45px;
transform: translateX(-50%);
background: #fff;
transition: all 0.3s ease 0s;
height: 90px;
line-height: 90px;
text-align: center;
background: @primaryColor;
border-radius: 100%;
img{
max-width: 45px;
}
}
.services-desc{
max-width: 245px;
margin: auto;
.services-title{
margin-bottom: 15px;
font-size: 20px;
&.title-upper{
text-transform: uppercase;
}
a{
&:hover{
color: @primaryColor;
}
}
}
p{
margin-bottom: 0;
}
}
}
&:hover{
&:after{
width: 100%;
}
.services-item{
.services-icon{
top: -35px;
}
}
}
}
&.services-center{
.services-desc{
text-align: center;
}
}
}
}
.rs-services-style6{
.services-item {
margin-bottom: 0px;
border-left: 0 !important;
padding-left: 0 !important;
overflow: hidden;
display: -ms-flexbox;
display: flex;
}
.services-icon {
font-size: 30px;
color: @primaryColor;
margin-right: 20px;
}
.services-title {
margin-bottom: 12px;
font-size: 20px;
line-height: 20px !important;
}
}
/*Counter Style*/
.counter-top-area{
background-size: 100%;
background-repeat: no-repeat;
.count-number{
span{
margin: 5px 0 6px;
display: inline-block;
font-size: 30px;
font-family: @titleFont !important;
}
h4{
font-weight: 400 !important;
}
}
&.right {
.rs-counter-list{
text-align: right;
}
}
.count-text{
h3{
}
}
.counter-icon{
img{
max-width: 90px;
}
}
&.border-style{
border: 1px solid #f7efef;
padding: 30px 20px 8px;
transition: @transition;
border-radius: 7px;
&:hover{
border-color: @primaryColor !important;
}
&.right{
text-align: right;
}
}
&.style3,
&.style1{
padding: 15px 20px 15px;
&.left{
.rs-counter-list{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
}
.count-text{
margin-left: 20px;
}
h3{
margin-bottom: 0;
}
}
}
&.style2{
.rs-counter-list{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.count-icon{
display: inline-block;
padding-right: 20px;
margin-right: 20px;
position: relative;
margin-top: 5px;
&:before{
position: absolute;
content: "";
width: 2px;
height: 60px;
background: @primaryColor;
top: 2px;
right: 0;
}
}
.counter-icon{
max-width: 90px;
margin-right: 15px;
}
.count-text{
text-align: left;
display: inline-block;
}
}
&.border-style{
padding: 20px 20px 8px;
}
&.text-center {
.count-text{
text-align: center;
}
}
&.right {
.count-text{
text-align: right;
}
}
}
&.style3{
box-shadow: none;
}
}
.style-bg{
.counter-top-area{
padding: 60px 0 30px;
.count-number h3 {
margin: 0;
}
}
}
.rs-popular-yoga-classes{
.single-service{
position: relative;
overflow: hidden;
&:before{
content: "";
width: 100%;
height: 100%;
left: 0;
top: 100%;
background: rgba(16,16,16,0.7);
z-index: 1;
position: absolute;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
}
.service-content{
.hover-text{
position: absolute;
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
max-width: 350px;
margin: 0 auto;
top: 101%;
transition: 0.4s;
-webkit-transition: 0.4s;
z-index: 1;
opacity: 0;
visibility: hidden;
padding: 0 15px;
h4{
margin: 0 0 4px;
color: #fff;
}
p{
color: #ccc;
margin: 0 0 28px;
}
.link{
display: block;
a{
display: inline-block;
border: 1px solid @primaryColor;
color: #fff;
border-radius: 30px;
padding: 6px 15px;
padding: 10px 28px;
background: transparent;
&:hover{
background: @primaryColor;
}
}
}
}
.htitle {
color: #fff;
z-index: 11;
margin: 0;
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
text-align: center;
width: 100%;
opacity: 1;
visibility: visible;
a{
color: #fff;
background: @primaryColor;
padding: 4px 20px;
border-radius: 5px 5px 0 0;
}
}
}
&:hover{
&:before{
top: 0;
opacity: 1;
visibility: visible;
}
.htitle{
opacity: 0;
visibility: hidden;
}
.service-content{
.hover-text{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
opacity: 1;
visibility: visible;
}
}
}
}
}
/* --------------------------------
Vertical Timeline CSS
-------------------------------- */
@media only screen and (min-width: 1170px) {
.cd-is-hidden {
visibility: hidden;
}
}
.cd-timeline {
overflow: hidden;
margin: 2em auto;
}
.cd-timeline__container {
position: relative;
width: 90%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
iframe{
margin-bottom: 15px;
}
}
.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{
color: #fff;
.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;
width: 40px;
height: 40px;
border-radius: 50%;
}
.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 {
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
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;
}
}
@-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: 0.25em;
padding: 1em;
border-top: 4px solid @secondaryColor;
.short-info{
background: #f3f5f4;
padding: 20px 20px 0;
h3{
color: @secondaryColor;
font-size: 20px;
line-height: 28px !important;
margin-bottom: 14px;
a{
color: @secondaryColor;
}
}
.career_thumb{
margin-bottom: 23px;
}
}
.cd_timeline_desc{
margin-left: 60px;
background: #f3f5f4;
border-radius: 0.25em;
padding: 20px;
font-size: 16px;
color: @titleColor;
opacity: 1;
border-top: 4px solid @secondaryColor;
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 h2 {
color: #fff;
}
.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: 24px;
padding: 10px;
.timeline-year{
position: relative;
top: 5px;
}
}
}
.cd-block-done{
padding-bottom: 80px;
}
.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: left;
}
.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);
}
}
/* --------------------------------
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;
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-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-size: 26px;
line-height: 36px;
margin-bottom: 5px;
}
.designation{
color: #777;
margin-bottom: 10px;
font-size: 18px;
line-height: 30px;
float: left;
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;
}
.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;
.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;
}
}
&: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: @secondaryColor;
position: relative;
&:before{
color: @secondaryColor;
}
}
&: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{
background: @primaryColor;
line-height: normal;
color: #ffffff;
transition: all 0.3s ease 0s;
border-radius: 3px;
padding: 0 20px;
height: 50px;
line-height: 50px;
position: relative;
font-weight: 400;
padding-right: 50px;
display: inline-block;
&:before{
position: absolute;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
right: 25px;
opacity: 1;
font-size: 15px;
content: "\f133";
font-family: Flaticon;
display: inline-block;
font-weight: normal;
}
&:hover{
&:before{
right: 20px;
}
color: #ffffff
}
}
.service-readon{
line-height: normal;
color: @primaryColor;;
transition: all 0.3s ease 0s;
border-radius: 3px;
padding: 0 14px;
height: 40px;
line-height: 37px;
position: relative;
font-weight: 400;
padding-right: 40px;
display: inline-block;
border: 1px solid @primaryColor;
&:before{
position: absolute;
height: 100%;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
right: 20px;
opacity: 1;
top: 2px;
font-size: 15px;
content: "\f133";
font-family: Flaticon;
display: inline-block;
font-weight: normal;
}
&:hover{
&:before{
right: 15px;
}
color: @primaryColor;
}
}
.remove-box-shadow{
.readon{
box-shadow: none;
}
}
.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;
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;
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;
text-decoration: none;
background-color: @primaryColor;
color: #fff;
border-radius: 35px;
&: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;
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-case-result-slider{
.owl-stage{
.case-item{
.casestudy-inner{
.image-wrap{
position: relative;
overflow: hidden;
&:after{
content:"";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: block;
background: rgba(0,0,0,.6);
opacity: 0;
transition: all .5s ease;
}
img{
transition: all .5s ease;
}
.case-title{
position: absolute;
bottom: -62px;
width: 100%;
text-align: center;
opacity: 0;
transition: all .5s ease;
z-index: 9;
h3{
margin: 0;
color: #fff;
padding: 15px 10px;
position: relative;
z-index: 9;
a{
color: #fff;
font-size: 22px;
&:hover{
color:@primaryColor;
}
}
span{
display: block;
line-height: 20px;
a{
font-size: 15px;
color: @primaryColor;
&:hover{
color:#fff;
}
}
}
}
}
&:hover{
.case-title{
opacity: 1;
bottom: 20px;
}
&:after{
opacity: 1;
}
img{
transform: scale(1.1);
}
}
}
}
}
}
}
.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;
}
}
}
}
/* ----------------------------------
09. Team
-------------------------------------*/
/* -----------------------
11. Team Member
--------------------------*/
.rs-team {
.team-item {
position: relative;
overflow: hidden;
.team-img img {
width: 100%;
}
.team-content {
position: absolute;
width: 100%;
height: 100%;
top: 10%;
left: 0;
text-align: center;
z-index: 10;
padding: 30px;
opacity: 0;
-webkit-transition: .3s all ease-out;
background: @primaryColor;
transition: .3s all ease-out;
h3.team-name {
a{
&:hover{
color:#fff;
}
}
}
}
i{
color: #fff;
}
.team-name {
margin-bottom:6px;
font-size: 18px;
font-weight: normal;
a{
color: #fff;
}
}
.team-title {
color: #fff;
font-weight: normal;
}
.team-desc {
color: #fff;
margin-bottom: 0;
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid;
line-height: 22px;
}
.team-social {
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
z-index: 100;
left: 50%;
opacity: 0;
transform: translateX(-50%) scale(0.5);
-webkit-transition: .4s all ease;
transition: .4s all ease;
.social-icon {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
background-color: @primaryColor;
margin-right: 6px;
border-radius: 50%;
i {
font-size: 14px;
color: #fff !important;
}
&:hover {
background: @primaryColor;
}
}
}
&:hover {
.team-content {
opacity: .9;
top: 0;
}
.team-social {
opacity: 1;
transform: translateX(-50%) scale(1);
}
}
}
&.team-slider-style1{
.team-item{
.team-inner-wrap{
.team-content1{
background: #263043;
}
.image-wrap{
&:before{
display: none;
}
.team-hover-content{
bottom: -40px;
top: auto;
transform: none;
left: 0;
right: auto;
transition: all .5s ease;
.social-icons1{
background: @primaryColor;
padding: 5px 9px;
border-radius: 5px 5px 0 0;
.social-icon{
background: none;
i{
color: #fff;
&:hover{
color:@secondaryColor;
}
}
}
}
}
&:hover{
.team-hover-content{
bottom:0;
}
}
}
}
}
.owl-item.active.center{
.team-item .team-inner-wrap .image-wrap .team-hover-content{
bottom:0;
opacity: 1;
visibility: visible;
}
}
}
.team-style5{
.owl-stage-outer{
overflow-y: visible;
}
.team-item{
overflow: visible;
margin-bottom: 60px;
&:before{
display: none;
}
.image-wrapper{
.team-img{
img{
border: 3px solid @primaryColor;
}
svg{
path{
-webkit-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
-ms-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out;
transition: all 1.5s ease-out;
}
}
.normal-text{
bottom: -25px;
width: 100%;
border-radius: 50px;
clip-path: none;
background: transparent;
left: auto;
right: -107px;
transform: rotate(-30deg);
transition: all 0.5s;
.team-name,
.subtitle{
color: @titleColor;
padding-bottom: 0;
line-height: 20px !important;
margin-bottom: 0;
}
&.slider-text{
bottom: -22px !important;
right: -35px;
max-width: 196px;
}
}
}
}
.team-content{
background: transparent !important;
&:before{
display: none;
}
.team-social{
transform: translate(0) !important;
position: static;
margin-bottom: 15px;
a{
border: 1px solid #fff;
}
}
}
&:before{
background: transparent;
}
&:hover{
.image-wrapper {
.team-img {
.normal-text{
opacity: 0;
visibility: hidden;
right: -80px;
bottom: 35px;
}
}
}
.team-img{
img{
border: 3px solid transparent !important;
}
svg{
path{
fill: @primaryColor;
}
}
}
.team-content{
.team-name{
margin-bottom: 0;
}
.team-social{
a{
background: #fff !important;
&:hover{
background: #f1f1f1 !important;
}
i{
color: @primaryColor !important;
}
}
}
}
}
&.team-rounded{
&:before{
background: transparent;
}
.team-img{
border-radius: 100%;
img{
border-radius: 100%;
}
}
.team-content{
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
}
&.team-square{
.team-img {
.normal-text{
bottom: 20px;
width: 84%;
border-radius: 0;
}
}
}
.team-social{
li{
padding: 20px;
}
&.icons-1:before {
height: 70px;
}
&.icons-1:after {
height: 70px;
}
}
}
}
.team-carousel {
.team-img {
position: relative;
.img-title-wrap {
position: absolute;
bottom: 0;
left: 0;
background: @primaryColor;
padding: 14px 20px;
width: 100%;
text-align: center;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
}
.team-item {
.team-name {
line-height: normal !important;
margin-bottom: 2px;
font-size: 17px;
}
&:hover {
.img-title-wrap {
opacity: 0;
transform: translateY(10px);
}
}
}
}
.ap_text{
margin: 0;
padding: 0;
list-style: none;
padding-top: 17px;
li{
padding-bottom: 4px;
display: block;
text-align: left;
overflow: hidden;
span{
float: right;
}
}
}
}
.team-slider{
.slick-next,
.slick-prev{
i{
&:before{
font-size: 20px;
height: 42px;
width: 42px;
background: @primaryColor;
display: block;
line-height: 42px;
color: #fff;
outline: none;
border-radius: 50%;
}
}
}
.slick-prev{
position: absolute;
left: -15px;
z-index: 99;
background: transparent !important;
height: 0;
width: 0;
padding: 0;
border: none;
top: 35%;
transform: translateY(-65%);
outline: none;
opacity: 0;
}
.slick-next{
position: absolute;
right: -15px;
z-index: 99;
background: transparent !important;
height: 0;
padding: 0;
width: 0;
border: none;
top: 35%;
transform: translateY(-65%);
outline: none;
opacity: 0;
}
&:hover{
.slick-prev{
left: 0px;
opacity: 1;
}
.slick-next{
right: 50px;
opacity: 1;
}
}
.slick-dots{
text-align: center;
margin: 0;
li{
display: inline-block;
margin-right: 10px;
button{
padding: 0;
font-size: 0;
border: none;
outline: none;
}
}
}
}
// Slider Style 1
.team-grid-style1,
.team-slider-style1,
.team-grid-style2,
.team-slider-style2,
.team-grid-style3,
.team-slider-style3{
.team-item {
overflow: visible;
.image-wrap{
position: relative;
overflow: hidden;
&:before{
content: "";
background: @primaryColor;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.team-hover-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
width: 100%;
text-align: center;
opacity: 0;
visibility: hidden;
> a{
color: #ffffff;
display: block;
margin-bottom: 52px;
margin-top: 7px;
i,
i:before{
font-size: 40px;
}
}
.social-icons1{
display: inline-block;
padding: 0 3px;
a {
width: 30px;
height: 30px;
background: #ffffff;
border-radius: 100px;
display: inline-block;
line-height: 30px;
text-align: center;
margin: 0 4px;
i{
color: @primaryColor;
transition: 0.4s;
&:hover{
color: @titleColor;
}
}
}
}
}
&:hover{
.team-hover-content,
&:before{
opacity: 0.9;
visibility: visible;
}
.team-hover-content{
opacity: 1;
}
}
}
.team-content1{
padding: 24px 25px;
background: @titleColor;
border-radius: 0 0 3px 3px;
margin-bottom: 30px;
text-align: center;
h3.team-name{
font-size: 22px;
margin-bottom: 0;
text-transform: capitalize;
a{
color: #fff;
&:hover{
color: #fff;
}
}
}
span.team-title{
color: @footertext;
display: block;
margin: 5px 0 10px;
}
}
}
}
.team-grid-style3,
.team-slider-style3{
.team-item {
.team-content1 {
text-align: center;
border: none;
background-image: url(../images/test_wraper_bg.png);
background-repeat: repeat;
padding: 30px 15px 20px;
h3.team-name{
a{
color: @titleColor;
}
}
span.team-title{
color: @bodyColor;
}
}
}
}
.rs-team.team-slider-style3{
.team-item{
.team-inner-wrap{
.image-wrap{
&:before{
display: none;
}
.team-hover-content{
position: absolute;
top: auto;
bottom: -45px;
transform: translate(0);
content: '';
width: 100%;
text-align: center;
opacity: 0;
visibility: hidden;
left: 0;
transition: all .5s ease;
.social-icons1{
background:@primaryColor;
padding: 5px 9px;
border-radius: 5px 5px 0 0;
a{
background:none;
i{
color: #fff;
}
&:hover{
i{
color: @secondaryColor;
}
}
}
}
}
&:hover{
.team-hover-content{
bottom:0;
opacity: 1;
visibility: visible;
}
}
}
}
}
}
.team-slider-style1{
.team-item {
.team-inner-wrap{
padding-bottom: 30px;
}
}
}
.team-slider-style2{
.team-item {
.team-content1{
text-align: center;
border: none;
background: @titleColor;
.team-title,
.team-name a{
color: #ffffff !important;
}
color: #ffffff;
}
}
}
// Slider Style 2
.team-grid-style2,
.team-slider-style2 {
.team-item-wrap {
position: relative;
margin-bottom: 35px;
padding: 0 7px;
.team-item{
position: relative;
overflow: hidden;
border-bottom: 2px solid @primaryColor;
}
a{
text-decoration: none;
}
.team-details{
padding: 20px 0 16px;
background: @primaryColor;
position: absolute;
width: 100%;
left: 0;
bottom: -101%;
transition: 0.4s;
-webkit-transition: 0.4s;
-ms-transition: 0.4s;
.team-name{
font-size: 22px;
margin: 0 0 2px;
}
.team-title{
font-size: 15px;
display: block;
padding-bottom: 10px;
}
.icon-social{
display: block;
text-align: center;
i{
font-size: 15px;
}
a{
color: #fff;
display: inline-block;
padding: 0 7px;
}
}
}
&:hover{
.team-details{
bottom: 0;
}
}
}
.owl-item.center{
.team-details{
bottom:0;
}
}
}
.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;
}
}
}
.blog-dark{
&.rs-blog .blog-item.style1 .blogfull{
background-color: #263043;
padding: 40px 40px 40px;
.blog-title{
a{
color: #FFF;
}
&:hover{
a{
color: @primaryColor;
}
}
}
}
&.rs-blog .blog-item.style1 .post-metas{
border-radius: 3px 3px 0 0 !important;
}
}
//Slider Styel3
.rs-team-grid{
.team-item-wrap{
margin-bottom: 60px;
}
.team-item{
margin-bottom: 30px;
}
&.team-grid-style1{
.social-icons1{
display: inline-block;
padding: 0 3px;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
opacity: 0;
visibility: hidden;
a {
width: 30px;
height: 30px;
background: #ffffff;
border-radius: 100px;
display: inline-block;
line-height: 30px;
text-align: center;
margin: 0 4px;
i{
color: @primaryColor;
transition: 0.4s;
&:hover{
color: @titleColor;
}
}
}
}
.image-wrap{
&:hover{
.social-icons1{
opacity: 1;
visibility: visible;
}
}
}
}
&.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_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: 3px;
background: @secondaryColor;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
left: 0;
}
.name {
font-size: 20px;
margin: 10px 0;
a {
color: @hoverColor;
&:hover {
color: #eee;
}
}
.designation {
font-size: 15px;
text-transform: capitalize;
color: @hoverColor;
float: none;
text-align: center;
}
}
.team-social {
bottom: -100px !important;
transition: @transition;
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: 140px;
color: #fff;
background: @secondaryColor;
.name {
a {
color: #ffffff;
}
.designation {
color: #ffffff;
}
}
}
.team_photo img {
-moz-transform: scale(1.1);
transform: scale(1.1);
}
.team-social{
bottom: 25px !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: 0px 15px 34px -5px rgba(193, 193, 193, 0.3);
-moz-box-shadow: 0px 15px 34px -5px rgba(193, 193, 193, 0.3);
box-shadow: 0px 15px 34px -5px rgba(193, 193, 193, 0.3);
font-family: @titleFont;
.designation{
font-size: 13px;
float: none;
color: @bodyColor;
margin-bottom: 0;
}
.team-text{
font-size: 14px;
margin-bottom: 0;
color: #777;
position: relative;
z-index: 1;
max-height: 0;
opacity: 0;
line-height: 24px;
-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: @primaryColor;
top: 0;
left: 50%;
width: 50px;
height: 2px;
margin-left: -25px;
}
}
.social-icons {
text-align: center;
margin-top: 12px;
a{
i{
color: #bbb;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
border-radius: 50%;
margin: 0;
}
&:hover{
i{
color: @primaryColor;
}
}
}
}
.person-name{
display: block;
font-size: 22px;
margin-bottom: 0px;
text-transform: capitalize;
a{
color: @secondaryColor;
&:hover{
color: @primaryColor;
}
}
}
.person-designation{
font-size: 12px;
color: @hoverColor;
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: 22px;
margin-bottom: 4px;
line-height: normal !important;
text-transform: capitalize;
a{
color: #fff;
&:hover{
opacity: 0.8;
color: #fff !important;
}
}
}
.designation{
font-size: 16px;
}
}
.team-title {
font-size: 14px;
font-weight: 400;
}
.team-desc {
margin-bottom: 0;
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid;
line-height: 22px;
}
.team-title,
.team-desc{
color: #ffffff;
}
&:hover {
.team-img {
img {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.designation{
float: none;
font-size: 13px;
}
}
}
}
}
//slider style4
.team-slider-style4{
.owl-stage-outer{
padding-bottom: 30px;
}
.team-item{
position: relative;
overflow: hidden;
&:before {
content: '';
position: absolute;
left: 0;
top: 100%;
transition: @transition;
width: 100%;
height: 100%;
background: @titleColor;
opacity: 0;
visibility: hidden;
z-index: 1;
}
.team-item-wrap {
position: relative;
overflow: hidden;
margin-bottom: 0;
.team-img {
position: relative;
img {
width: auto;
}
.team-content-style4 {
.subtitle,
.team-name {
background: @primaryColor;
border-radius: 0 30px 30px 0;
}
.team-name {
margin-bottom: 10px;
display: block;
padding: 13px 20px;
a{
color: #fff;
position: relative;
margin-bottom: 6px;
font-size: 22px;
z-index: 1;
}
}
.name-info{
position: absolute;
left: 0;
opacity: 1;
transition: @transition;
bottom: 50px;
width: auto;
}
.team-social-4{
position: absolute;
left: 50%;
opacity: 0;
transition: @transition;
top: 50%;
width: 100%;
text-align: center;
transform: translate(-50%, -50%);
z-index: 99;
.team-link{
font-size: 22px;
a{
color: #fff;
&:hover{
color: @primaryColor;
}
}
}
}
.designation {
padding: 8px 20px;
color: #fff;
margin-bottom: 8px;
display: block;
font-size: 15px;
background: @primaryColor;
border-radius: 0 30px 30px 0;
float: none;
}
.team-social-4{
margin-left: 10px;
margin-top: 10px;
display: block;
a{
padding: 0 3px;
i{
width: 30px;
height: 30px;
line-height: 30px;
background: #fff;
text-align: center;
border-radius: 50%;
color: @primaryColor;
transition: @transition;
}
&:hover{
i{
background: @primaryColor;
color: #fff;
}
}
}
}
}
}
}
&:hover{
&:before {
top: 0;
opacity: 0.8;
visibility: visible;
}
.team-item-wrap {
.team-img {
.team-content-style4 {
.name-info{
left: -30px;
opacity: 0;
}
.team-social-4{
opacity: 1;
left: 50%;
}
}
}
}
box-shadow: 0px 4px 12px @primaryColor;
.team-item-wrap {
position: relative;
overflow: hidden;
&:before {
border-left: 52px solid #fff;
}
.team-content {
.subtitle,
.team-name {
background: #fff;
}
.subtitle,
.team-name a{
color: @primaryColor;
}
}
}
}
}
}
//slider style5
.team-slider-style5{
.team-item{
margin-bottom: 0;
padding: 15px;
.team-item-inner{
background: #fff;
box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.07);
}
.team-info{
margin: 0;
list-style: none;
i{
color: #212121;
padding-right: 10px;
}
}
.team-item-inner{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.team-image{
max-width: 40%;
padding-right: 25px;
}
.normal-text{
max-width: 60%;
padding-left: 25px;
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 13px;
padding-bottom: 20px;
padding-right: 20px;
.team-text{
margin-bottom: 15px;
}
.team-detail-wrap{
margin-top: 1px;
max-width: 380px;
.table-background{
td, th{
padding: 10px 15px;
}
tr{
td{
&:last-child{
padding-left: 100px;
}
}
th{
&:last-child{
padding-left: 100px;
}
}
}
}
}
.person-name{
font-size: 26px;
line-height: 30px;
margin-bottom: 5px;
}
.social-icons{
display: flex;
a{
margin-right: 15px;
margin-top: 5px;
i{
color: #bbb;
font-size: 15px;
text-align: center;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
border-radius: 50%;
margin: 0;
}
&:hover{
i{
color: @primaryColor;
}
}
}
}
.appointment-bottom-area{
display: flex;
margin-top: 25px;
.app_details{
margin-right: 30px;
}
.app_btn,
.app_details{
a{
color: #fff;
background: @primaryColor;
padding: 12px 25px;
border-radius: 4px;
line-height: 44px;
height: 44px;
position: relative;
padding-right: 50px;
border: 1px solid @primaryColor;
&:after{
position: absolute;
height: 100%;
font-size: 18px;
right: 30px;
opacity: 1;
top: 0px;
content: "\f054";
font-size: 15px;
content: "\f137";
font-family: Flaticon;
display: inline-block;
transition: @transition;
font-weight: normal;
}
&:hover{
color: @primaryColor;
background: transparent;
&:after{
right: 25px;
}
}
}
}
}
}
.designation{
float: none;
color: @bodyColor;
margin-right: 15px;
}
}
}
}
#team-list-style{
.team-img{
background: #fbfbfb;
.wrap-text{
padding: 30px 20px;
}
}
.team-name{
margin-bottom: 5px;
font-size: 22px;
line-height: 30px;
a{
color: @primaryColor;
&:hover{
color: @secondaryColor;
}
}
}
.team-title{
font-size: 16px;
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: 20px;
}
}
}
}
.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
-------------------------------------*/
.rs-portfolio.col-filter{
.portfolio-content{
.portfolio-filter{
text-align: center !important;
}
}
}
.rs-case-result{
.casestudy-inner {
.case-content{
h4{
color: #ffffff;
}
.des{
color: #cccccc;
}
}
}
}
.rs-portfolio{
position: relative;
.case-result-grid{
.row{
margin-bottom: 50px;
&:last-child{
margin-bottom: 0;
}
}
}
.case-result-imge{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-color: #ddd;
}
.casestudy-inner {
.case-content{
overflow: hidden;
padding-right: 30px;
h4{
float: left;
width: 140px;
}
.des{
overflow: hidden;
color: #cccccc;
}
p{
margin-bottom: 20px;
}
.readon{
margin-top: 22px;
}
}
.container{
padding-bottom: 60px;
}
}
.team-carousel{
.owl-dots{
position: absolute;
left: 230px;
bottom: -20px;
.owl-dot{
display: inline-block;
margin-right: 16px;
margin-bottom: 0;
width: 15px;
height: 15px;
background: #ffffff;
margin-bottom: 20px;
transition: 0.3s;
border-radius: 50px;
&:hover,
&.active{
background: @primaryColor;
}
}
}
}
}
.thums-sicks{
margin: 0 8px;
position: relative;
padding-top: 72px;
outline: none;
img{
border-radius: 100%;
cursor: pointer;
}
&.slick-active.slick-center{
img{
border: 2px solid;
border-color: @primaryColor;
opacity: .5;
}
}
&.slick-active.slick-center{
position: relative;
&:after,
&:before{
content: '';
position: absolute;
display: block;
top: 0;
background: @primaryColor;
left: 50%;
transform: translateX(-50%);
}
&:before{
width: 10px;
height: 10px;
border-radius: 50%;
}
&:after{
width: 2px;
height: 72px;
}
}
}
.testimonial-style7{
.testimonials-nav{
max-width: 370px;
margin: 0 auto;
}
.content7{
max-width: 700px;
margin: 0 auto;
text-align: center;
i{
display: block;
font-size: 50px;
opacity: .5;
margin-bottom: 20px;
color: @primaryColor;
}
ul{
padding: 0;
margin: 0;
}
.cl-author-info{
padding: 0;
position: relative;
margin: 60px 0 25px;
&:after{
content: "";
top: -26px;
height: 2px;
width: 60px;
position: absolute;
background: @primaryColor;
left: 0;
right: 0;
margin: 0 auto;
}
li{
padding: 0;
margin: 0;
color: @bodyColor;
&:first-child{
font-family: @titleFont;
color:@titleColor;
}
}
}
}
.slick-arrow{
background: none !important;
border: none;
padding: 0;
outline: none;
&.slick-prev{
position: absolute;
font-size: 0;
top: 78%;
transform: translateY(-78%);
left: -35px;
&:before{
content: "\f104";
font-family: FontAwesome;
position: absolute;
font-size: 26px;
top: 50%;
color: @primaryColor;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
}
&.slick-next{
position: absolute;
font-size: 0;
top: 78%;
transform: translateY(-78%);
right: -35px;
&:before{
content: "\f105";
font-family: FontAwesome;
position: absolute;
font-size: 26px;
top: 50%;
color: @primaryColor;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
}
&:hover{
&:before{
color:#fff;
}
}
}
}
ul.ratings-secs{
list-style: none;
margin: 0;
padding: 0;
opacity: 0.6;
li{
img{
display: block;
margin: 0 auto;
height: 22px;
}
}
}
/* ----------------------------------
10. cl-testimonial style 7
-------------------------------------*/
#cl-testimonial{
.testimonial-slide7{
.slick-track{
padding-bottom: 40px;
}
.single-testimonial{
padding: 0;
background: #ffffff;
border-radius: 0;
padding: 40px 20px 20px 140px;
position: relative;
margin: 0 15px;
border-radius: 5px;
&: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: @secondaryColor;
}
}
.right-content,
.testimonial-left{
width: 100%;
float: none;
}
.testimonial-left{
img{
border: 2px solid @secondaryColor;
}
}
.right-content{
position: relative;
i{
top: 5px;
padding-right: 0;
position: absolute;
left: -18px;
}
}
.testimonial-left{
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
width: auto;
}
p{
margin: 0;
padding: 0;
}
ul.slick-dots li {
button{
padding: 2px 0;
height: 8px;
}
&.slick-active{
button{
background: @secondaryColor;
border-color: @primaryColor !important;
}
}
}
}
.testimonial-content{
p{
margin-bottom: 15px;
}
}
&.owl-carousel {
.owl-dots {
text-align: center;
margin-top: 12px;
button{
width: 12px;
height: 12px;
margin-right: 10px;
background: #ddd;
border-radius: 50%;
outline: none;
}
}
}
&.cl-testimonial1{
.testimonial-item{
padding-top: 50px;
.testimonial-content{
border: 2px solid @primaryColor;
}
}
}
}
.dark #cl-testimonial.slider3 .testimonial-content .description:after{
background: transparent;
}
.cl-author-info li:first-child {
padding-bottom: 5px !important;
font-size: 18px;
}
#cl-testimonial.style1{
.testimonial-wrap{
display: flex;
justify-content: center;
.author-image{
width: 100px;
img{
border-radius: 100%;
}
}
.testi-desc{
padding-left: 30px;
width: calc(~"100% - 100px");
margin-right: 35px;
&.no-image{
padding-left: 0;
width: 100%;
}
p{
padding-left: 0;
padding-top: 0;
margin-bottom: 15px;
}
}
}
.testimonial-content{
p{
margin-bottom: 15px;
}
.cl-author-info{
margin-left: 0;
}
}
}
#cl-testimonial.slider6{
.testimonial-item{
.single-testimonial{
display: flex;
justify-content: center;
align-items: center;
.testimonial-content{
img{
max-width: 100px;
}
}
.testimonial-content{
width: 170px;
float: none;
margin-right: 0;
img{
border-radius: 100%;
}
.cl-author-info {
li:first-child {
padding-bottom: 0px !important;
font-size: 15px;
}
}
}
.right-content{
padding-left: 15px;
width: calc(~"100% - 170px");
margin-right: 35px;
float: none;
p{
padding-left: 0;
padding-top: 0;
margin-bottom: 15px;
}
}
}
}
}
#cl-testimonial.slider3{
.testimonial-content{
.description{
position: relative;
font-size: 16px;
line-height: 26px;
color: #696969;
padding: 25px 20px;
border: 1px solid #333;
border-radius: 5px;
&:after{
content: "";
width: 20px;
height: 20px;
background: #fff;
border-style: none none solid solid;
border-width: 0 0 1px 1px;
border-color: #333;
position: absolute;
bottom: -11px;
left: 60px;
transform: skewY(-45deg);
}
}
.image{
width: 100px;
border-radius: 50%;
overflow: hidden;
margin: 20px 30px 30px 0;
display: inline-block;
float: left;
}
.testimonial-title{
display: inline-block;
text-transform: capitalize;
margin-top: 35px;
}
}
}
#cl-testimonial.testimonial-slide5{
.testimonial-content{
display: flex;
justify-content: center;
padding-left: 8px;
.author-image{
width: 140px;
.image:after{
content: "";
width: 70px;
height: 70px;
position: absolute;
z-index: -1;
bottom: 11px;
right: -6px;
background: @primaryColor;
}
.image:before{
content: "";
width: 70px;
height: 70px;
position: absolute;
z-index: -1;
top: 11px;
left: -6px;
background: @primaryColor;
}
}
.testi-desc{
padding-left: 40px;
padding-right: 30px;
width: calc(~"100% - 140px");
p{
padding: 0;
}
}
}
.owl-dots{
margin-top: 40px;
}
}
#cl-testimonial.testimonials-area.slider8{
position: relative;
.images-testimonial{
p{
margin: 0;
padding: 0 !important;
text-align: center !important;
font-size: 15px;
line-height: 28px;
max-width: 800px;
margin: 0 auto;
i{
display: block;
text-align: center;
font-size: 50px;
opacity: 0.05;
margin: 35px 0 13px;
}
}
img{
width: 120px;
margin: 0 auto 29px;
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%);
}
}
.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%);
}
}
}
p{
margin: 0 auto !important;
}
ul.author{
text-align: center;
padding: 37px 0 0 !important;
li{
font-size: 20px;
font-family: @bodyFont !important;
font-weight: 500;
&:last-child{
text-transform: capitalize;
font-size: 14px;
padding-top: 5px;
}
}
}
&.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: 00px;
}
.slick-next{
right: 0px;
}
}
}
.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: 10px;
right: -30px;
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;
border-style: solid;
border-color: @primaryColor;
line-height: 55px;
background: transparent;
}
}
.rs-btn{
&.btn-center{
text-align: center;
}
&.btn-left{
text-align: left;
}
&.btn-right{
text-align: right;
}
}
.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: #fff;
background:@secondaryColor !important;
margin: 0 20px 12px 0;
display: inline-block;
padding: 0;
transition: 0.4s;
outline: none;
-webkit-transition: 0.4s;
-ms-transition: 0.4s;
position: relative;
padding: 6px 24px;
border-radius: 30px;
border: 0;
&:hover,
&.active {
color: #fff !important;
background: @primaryColor !important;
}
}
}
.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;
}
}
.portfolio-item {
border-radius: 5px;
}
// Portfolio Style1
.rs-portfolio-style1 {
.portfolio-item {
position: relative;
overflow: hidden;
.portfolio-content {
position: absolute;
width: 100%;
height: 100%;
top: 30%;
left: 0;
text-align: center;
z-index: 10;
padding: 25px;
opacity: 0;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
border-radius: 5px;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease 0s;
border-radius: 5px;
}
.vertical-middle{
position: relative;
z-index: 9;
}
.p-category {
color: #fff;
margin-bottom: 0;
a {
color: #fff;
&:hover {
color: rgba(255, 255, 255, 0.7);
}
}
}
.vertical-middle-cell {
display: table-cell;
vertical-align: middle;
}
}
.portfolio-img img {
width: 100%;
border-radius: 5px;
}
.p-link {
transition: all 0.3s ease 0s;
display: inline-block;
font-size: 19px;
width: 52px;
line-height: 54px;
height: 52px;
text-align: center;
border-radius: 50%;
background: #fff;
i {
margin-left: 2px;
}
&:hover {
background-color: @primaryColor;
color: #fff;
}
}
.p-title {
font-size: 20px;
line-height: normal;
margin-top: 15px;
color: #fff;
margin-bottom: 0;
a {
color: #fff;
&:hover {
color: rgba(255, 255, 255, 0.7);
}
}
}
.p-desc {
font-size: 15px;
color: rgba(255,255,255,0.7);
margin-bottom: 0;
margin-top: 10px;
}
&:hover {
.portfolio-content {
opacity: 1;
top: 0;
&:before{
opacity: 1;
}
}
}
}
}
// Portfolio Style2
.rs-portfolio-style2 {
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 0;
.portfolio-img {
position: relative;
z-index: 10;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
transition: all 0.3s ease 0s;
border-radius: 5px;
}
img {
width: 100%;
}
.read_more{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #fff;
color: #fff;
border-radius: 30px;
padding: 12px 25px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: 0.3s;
&:hover{
background: @primaryColor !important;
border-color: @primaryColor !important;
}
}
}
.portfolio-content {
position: absolute;
bottom: -50px;
width: 100%;
padding: 22px 30px;
z-index: 10;
transition: all 0.3s ease;
opacity: 0;
a {
color: #fff;
}
h4 {
margin-bottom: 5px;
}
p {
margin-bottom: 0;
color: #cccccc;
}
}
&:hover {
.portfolio-content {
bottom: 0;
opacity: 1;
}
.portfolio-img {
&:before {
opacity: 1;
}
}
.read_more {
opacity: 1;
visibility: visible;
}
}
}
}
// Portfolio Style3
.rs-portfolio-style3 {
.portfolio-item {
position: relative;
overflow: hidden;
.portfolio-img {
position: relative;
z-index: 10;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: @hoverColor;
transition: all 0.3s ease 0s;
opacity: 0;
}
img {
width: 100%;
border-radius: 5px;
}
.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;
}
}
}
.portfolio-content {
position: absolute;
padding: 15px 20px;
opacity: 0;
z-index: 10;
top: 0;
width: 100%;
a {
color: #fff;
}
h3 {
margin-bottom: 5px;
font-size: 20px;
transition: 0.3s ease all;
}
p {
margin-bottom: 0;
color: #fff;
transition: 0.3s ease all;
}
}
&:hover {
.portfolio-content {
opacity: 1;
}
.portfolio-img {
&:before {
opacity: 0.7;
}
.p-link {
opacity: 1;
}
}
}
}
}
// Portfolio Style4
.rs-portfolio-style4 {
.portfolio-item {
position: relative;
overflow: hidden;
.portfolio-img {
position: relative;
z-index: 10;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: @hoverColor;
transition: all 0.4s ease 0s;
opacity: 0;
z-index: 10;
border-radius: 5px;
}
img {
width: 100%;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease;
border-radius: 5px;
}
.p-link {
display: none;
}
}
.portfolio-content {
position: absolute;
padding: 15px 20px;
opacity: 0;
z-index: 10;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
text-align: center;
width: 100%;
a {
color: #fff;
}
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;
a {
&:hover {
color: rgba(255,255,255,0.7);
}
}
}
.p-title{
margin-bottom: 15px;
}
p {
margin-bottom: 0;
color: #fff;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: 0.4s all ease;
transition: 0.4s all ease;
a {
&:hover {
color: rgba(255,255,255,0.7);
}
}
}
}
&:hover {
.portfolio-content {
opacity: 1;
h3 {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
p {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.portfolio-img {
&:before {
opacity: 0.7;
}
img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
}
}
}
}
// Portfolio Style5
.rs-portfolio-style5 {
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 0;
.portfolio-img {
position: relative;
z-index: 10;
overflow: hidden;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
transition: all 0.4s ease 0s;
opacity: 0;
z-index: 10;
border-radius: 5px;
}
img {
width: 100%;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease;
border-radius: 0px;
}
.p-link {
display: none !important;
top: 20px;
right: 20px;
display: inline-block;
font-size: 32px;
color: #ffffff;
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
opacity: 0;
z-index: 10;
i {
margin-left: 2px;
display: none;
}
}
}
.portfolio-content {
position: relative;
padding: 15px 20px;
opacity: 1;
z-index: 999;
bottom: 0;
left: 0;
right: 0;
text-align: left;
width: 100%;
border: 1px solid #ebebeb;
border-top: 0;
a {
color: @secondaryColor;
}
h4 {
margin-bottom: 0;
font-size: 20px;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
line-height: 30px !important;
a {
&:hover {
color: @primaryColor;
}
}
}
p {
margin-bottom: 0;
color: @secondaryColor;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: 0.6s all ease;
transition: 0.6s all ease;
}
}
&:hover {
.portfolio-content {
opacity: 1;
h3 {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
p {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.portfolio-img {
&:before {
opacity: 1;
}
img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.p-link {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
}
}
}
.light .rs-portfolio-style5 .portfolio-item .portfolio-content{
background: #fff;
}
.rs-portfolio .portfolio-item .portfolio-img img,
.rs-portfolio .portfolio-item .portfolio-content::before{
border-radius: 5px;
}
.rs-portfolio-agency{
.portfolio-filter {
margin-bottom: 30px;
}
}
.single-portfolios {
.project-img{
margin-bottom: 50px;
}
.ps-informations {
padding: 40px 40px 45px;
background: rgba(16, 16, 16, 0.05);
margin-top: 10px;
}
}
.ps-navigation {
margin-top: 70px;
margin-left: auto;
margin-right: auto;
width: 100%;
ul {
margin: 0 !important;
list-style: none;
.prev {
display: inline-block;
text-align: left;
}
.next {
display: inline-block;
text-align: right;
}
a {
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: @primaryColor !important;
}
}
}
}
.single-events .ps-navigation{
margin-bottom: 0;
}
/* ------------------------------------
21. Gallery Css
---------------------------------------*/
.rs-gallery {
.gallery-item{
position: relative;
overflow: hidden;
margin-bottom: 30px;
cursor: pointer;
.zoom-icon{
i{
text-align: center;
font-size: 20px;
display: inline-block;
margin: 0 8px;
color: #fff;
position: absolute;
top: 50%;
left: 48%;
transform: translate(-50%, -50%);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
-ms-transition: 0.4s;
height: 45px;
width: 45px;
line-height: 45px;
}
}
&:after{
content: "";
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0;
left: 0;
display: block;
overflow: hidden;
opacity: 0.5;
transform: scale(0);
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
-ms-transition: 0.4s;
}
&:hover{
&:after{
opacity: 0.5;
visibility: visible;
transform: scale(1);
}
.zoom-icon{
i{
opacity: 1;
visibility: visible;
}
}
}
}
&.slider_style{
.owl-carousel {
.owl-item {
img{
border-radius: 0px;
}
.gallery-item{
&:after{
content: "";
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
}
}
}
}
}
.gallery-carousel{
.gallery-item{
margin-bottom: 0;
}
}
.slick-dots{
margin-top: 20px;
}
}
.slick-dots{
margin: 0;
text-align: center;
li{
list-style: none;
display: inline-block;
margin-right: 12px;
button{
font-size: 0;
padding: 0;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 100%;
margin: 0 4px;
border: 1px solid transparent;
background: @primaryColor;
outline: none;
}
&.slick-active{
button{
background: transparent;
border: 1px solid @primaryColor;
}
}
}
}
.rs-galleys{
.galley-img{
position: relative;
margin-bottom: 30px;
overflow: hidden;
.zoom-icon{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%, -50%);
opacity: 0;
visibility: hidden;
color: #fff;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 100px;
transition: all 0.5s ease-in-out;
i{
font-size: 15px;
&:before{
font-size: 45px;
}
}
&:hover{
color:@secondaryColor;
}
}
.p-title{
font-size: 18px;
margin:0;
position: absolute;
bottom: -40px;
left: 25px;
padding: 14px 0 10px;
font-weight: 500;
margin: 0;
color: #fff;
opacity: 0;
z-index: 9;
transition: 0.3s all ease-out;
}
&:before{
position: absolute;
width: 100%;
height: 100%;
top: 101%;
left: 0;
background: @titleColor;
content: "";
transition: 0.4s;
-webkit-transition: 0.4s;
-ms-transition: 0.4s;
visibility: hidden;
opacity: 0;
}
&:hover{
&:before{
width: 100%;
opacity: 0.8;
visibility: visible;
top: 0;
}
.zoom-icon{
visibility: visible;
opacity: 1;
color: #fff !important;
}
.p-title{
opacity: 1;
bottom: 20px;
}
}
}
.gallery-space{
padding: 0;
.galley-img{
margin: 0;
}
}
&.spaceing{
.gallery-space{
padding: 0 15px;
.galley-img{
margin: 0 0 30px;
}
}
}
&.style2{
position: relative;
.gallery-desc {
max-width: 630px;
background: @primaryColor;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
padding: 70px 0;
z-index: 10;
text-align: center;
.title {
font-size: 48px;
color: #ffffff;
line-height: 50px;
margin-bottom: 0;
}
.sub-title {
font-size: 32px;
line-height: 42px;
color: @titleColor;
margin-bottom: 0;
}
}
.galley-img{
&:hover{
&:before{
top: 0;
visibility: visible;
opacity: 0.5;
}
}
}
}
}
.mfp-bg{
z-index: 99999;
opacity: 0.88;
}
.mfp-wrap{
z-index: 99999;
}
/* ------------------------------------
21. Portfolio Details
---------------------------------------*/
.rs-porfolio-details {
.ps-informations {
ul{
margin: 0;
list-style: none;
text-align: left;
}
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;
}
}
}
}
.ps-image-wrap {
margin-bottom: 50px;
}
.ps-image {
text-align: center;
margin-bottom: 10px;
}
.ps-share {
ul{
margin: 0
}
margin-top: 40px;
.share-title {
font-size: 20px;
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: @transition;
&: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;
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 @primaryColor;
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;
}
}
}
}
}
}
/*--------------------------------------------------------------
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;
}
.menu-carousel .heading-block h4 a {
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;
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;
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;
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;
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: @transition;
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: @transition;
}
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;
border-radius: 7px;
&: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: @primaryColor;
}
}
.service-content{
.p-title{
margin-bottom: 12px;
font-size: 20px;
}
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: @hoverColor;
padding: 12px 15px;
background: rgba(255,255,255,0.8);
display: inline-block;
font-size: 18px;
}
&:after,
&:before{
background: transparent;
}
}
&:hover{
.service-content{
bottom: 30px;
h3{
color: #fff;
padding:0;
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%);
}
}
}
.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;
}
.case-result-grid {
.content-inner{
background: @titleColor;
padding: 70px 50px 50px;
.rs-title{
h2{
font-size: 30px;
line-height: 40px;
}
h4{
font-size: 18px;
font-weight: 25px;
}
}
.case-content{
overflow: hidden;
h4{
color: #ffffff;
float: left;
width: 140px;
margin: 0 0 8px;
font-size: 18px;
}
.des{
overflow: hidden;
}
}
.rs-title {
h4{
color: @primaryColor;
margin: 0 0 8px;
}
a:hover{
color: @primaryColor;
}
}
}
}
.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;
}
}
/*--------------------------------------------------------------
Price Table
--------------------------------------------------------------*/
.clpricing-table .price-table.style1 .cl-pricetable-wrap .bottom .btn-table{
margin: 34px auto 0;
}
.clpricing-table .cl-pricetable-wrap .top{
background-size: cover !important;
}
.clpricing-table .cl-pricetable-wrap .top .popular{
background: @primaryColor !important;
box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.2);
}
.clpricing-table .price-table.style1 .cl-pricetable-wrap .bottom{
padding-top: 10px;
}
.clpricing-table .price-table.style4 .cl-pricetable-wrap .bottom .btn-table:hover,
.clpricing-table .price-table.style2 .cl-pricetable-wrap .top .btn-table:hover,
.clpricing-table .price-table.style1 .cl-pricetable-wrap .bottom .btn-table:hover{
background: @btnHoverColor;
color: #fff;
border-color: @btnHoverColor;
}
.clpricing-table .price-table.style15 .cl-pricetable-wrap .top .popular{
background: lighten(@primaryColor, 3%);
}
.clpricing-table .price-table.style1 .cl-pricetable-wrap .top h5,
.clpricing-table .price-table.style1 .cl-pricetable-wrap .top h3,
.clpricing-table .price-table.style1 .cl-pricetable-wrap .top h3 .dolar{
font-weight: 600 !important;
}
.clpricing-table .price-table.style1 .cl-pricetable-wrap .bottom p {
line-height: 32px;
}
/*--------------------------------------------------------------
Floating CSS
--------------------------------------------------------------*/
.floating-top{
position: relative;
z-index: 1;
}
/*--------------------------------------------------------------
Latest product slider
--------------------------------------------------------------*/
.rs-products-slider{
.product-item{
background:#fff;
text-align: center;
padding: 0px 10px 30px;
.product-title{
padding-top:15px;
margin-bottom: 15px;
font-size: 20px;
a{
color: @secondaryColor;
&:hover{
color: @primaryColor;
}
}
}
.product-img{
img{
width: auto;
margin: 0 auto;
}
}
.product-price{
font-size: 16px;
color: @bodyColor;
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: 16px;
background:@btnBgColor;
font-weight: 500;
border-radius:30px;
color: #fff;
&:hover{
background:@btnHoverColor;
}
}
}
}
}
.rs-latest-classes {
.section-title2{
margin-bottom: 25px;
}
.gridFilter {
margin-bottom: 35px;
}
.single-classes {
box-shadow: 0 3px 10px #ccc;
margin-bottom: 30px;
.classes-details{
padding: 20px 20px 24px;
}
.classes-price{
overflow: hidden;
margin-top: -67px;
position: relative;
z-index: 1;
.cat,
.price{
background: @primaryColor;
}
.cat{
float: left;
border-radius: 5px;
margin-top: 8px;
padding: 4px 15px;
a{
color: #fff !important;
}
}
.price{
float: right;
border-radius: 50%;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
}
}
.classes-img {
margin-bottom: 20px;
}
.classes-title {
font-size: 20px;
margin-bottom: 7px;
margin-top: 10px;
a {
color: @titleColor;
&:hover{
color: @primaryColor;
}
}
}
.date-meta {
font-size: 14px;
> div {
display: inline-block;
i {
font-size: 14px;
display: inline-block;
margin-right: 3px;
color: @primaryColor;
}
}
.classes-date {
margin-right: 10px;
}
}
}
}
.single-mp-event{
.events-list{
list-style: none;
li{
list-style: none;
}
}
tr.mptt-shortcode-row th{
padding:5px !important;
}
.mptt-inner-event-content{
font-size:11px !important;
}
.mptt-shortcode-wrapper{
padding: 10px 0 30px;
}
.single-instructors{
background: #f7f7f7;
padding: 30px;
ul{
margin: 0;
list-style: none;
li{
width: 31%;
display: inline-block;
text-align: center;
margin-right: 20px;
&:last-child{
margin-right: 0;
}
.thumb{
border:1px solid #f8f3f3;
padding:5px;
display: block;
}
a{
color: @titleColor;
&:hover{
color:@primaryColor;
}
}
span{
color: @bodyColor;
}
h5{
margin: 13px 0 5px;
}
}
}
h3{
padding-bottom: 20px;
}
}
.bs-sidebar{
li{
list-style: none;
}
}
#comments{
display: none;
}
.course-features-info {
margin-bottom: 30px;
background: @primaryColor;
padding: 30px 30px 30px;
color: #fff;
border-radius: 2px;
h3{
color: #fff;
position: relative;
font-size: 20px;
line-height: 26px;
padding: 0 0 15px;
&:before{
content: "";
position: absolute;
background: #fff;
height: 2px;
width: 50px;
left: 0;
bottom: 0;
display: block;
z-index: 1;
}
}
li{
display: block;
overflow: hidden;
&:first-child{
border-top: none;
}
+li{
border-top: 1px solid #db360b;
}
.label{
font-weight: 500;
}
.value{
float: right;
padding-right: 5px;
}
}
.readon.join-now{
display: block;
text-align: center;
background: #fff;
color: @primaryColor;
box-shadow: none;
border: none;
height: inherit !important;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 10px;
line-height: 30px;
margin-top: 30px;
max-width: 150px;
&:hover{
background: @titleColor;
color: #fff;
}
}
}
}
.related_trainer{
background: #f8f8f8;
padding:93px 0 60px;
}
.class-details{
p:first-child:first-letter{
font-size:55px;
font-weight: 700;
color: @primaryColor;
float: left;
padding-top: 7px;
padding-right: 15px;
padding-left: 10px;
}
ul{
padding-left: 20px;
column-count: 2;
}
}