File: /home/randratticinsulationservices/public_html/scss/_slider.scss
/* Main Slider area css
============================================================================================ */
.main_slider_area{
.rev_slider{
.tp-revslider-mainul{
li{
.slotholder{
position: relative;
&:before{
content: "";
background: rgba(0, 0, 0, .4);
position: absolute;
z-index: 8;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
}
.tp-bgimg{
z-index: 5 !important;
}
}
.slider_text_box{
.first_text{
color: #fff;
font-family: $open;
}
.secand_text{
color: $baseColor;
text-transform: uppercase;
font-weight: bold !important;
font-family: $pt;
}
}
.slider_text_box2{
.first_text{
color: $baseColor;
text-transform: uppercase;
font-weight: bold !important;
font-family: $pt;
}
.secand_text{
color: #fff;
font-family: $open;
}
}
}
}
.tp-bullets{
z-index: 20 !important;
.tp-bullet{
width: 70px;
height: 3px;
background: #fff;
@include transition;
&:hover, &.selected{
width: 110px;
background: $baseColor;
}
}
}
}
}
/* End Main Slider area css
============================================================================================ */
/* Quoto Slider area css
============================================================================================ */
.quoto_slider_area{
background: url(../img/quoto-slider-bg.jpg) no-repeat scroll center center;
background-size: cover;
position: relative;
z-index: 3;
padding: 80px 0px;
&:before{
content: "";
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -1;
background: rgba(0, 0, 0, .5);
}
.quoto_slider_inner{
position: relative;
.quoto_slider{
max-width: 710px;
margin: auto;
.item{
text-align: center;
i{
font-size: 50px;
color: #2f2f2f;
padding-bottom: 17px;
}
h4{
font-size: 30px;
font-family: $open;
line-height: 30px;
color: #fefefe;
font-weight: normal;
max-width: 470px;
margin: auto;
span{
color: $baseColor;
}
}
p{
font-size: 18px;
color: #ededed;
font-family: $open;
line-height: 26px;
padding: 16px 0px 16px 0px;
}
h3{
text-align: right;
font-size: 18px;
color: #ededed;
font-family: $open;
}
}
}
.owl-prev, .owl-next{
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
height: 45px;
width: 30px;
text-align: center;
line-height: 40px;
border: 1px solid #fff;
font-size: 25px;
@include transition;
cursor: pointer;
&:hover{
border-color: $baseColor;
background: $baseColor;
}
}
.owl-prev{
left: 0px;
}
.owl-next{
right: 0px;
}
}
}
/* End Quoto Slider area css
============================================================================================ */
/* Project Single Slider area css
============================================================================================ */
.project_single_slider{
.flexslider{
border: none;
margin-bottom: 0px;
ul{
li{
}
}
}
#carousel{
padding: 0px 55px;
position: relative;
margin-top: 33px;
ul{
li{
position: relative;
&.flex-active-slide{
position: relative;
@include transition;
&:before{
content: "";
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
border: 4px solid $baseColor;
z-index: 2;
}
&:after{
content: "";
background: rgba(0, 0, 0, .6);
position: absolute;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
top: 0px;
opacity: 0;
}
}
&:after{
content: "";
background: rgba(0, 0, 0, .6);
position: absolute;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
top: 0px;
@include transition;
}
}
}
.custom-navigation{
.flex-prev{
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
font-size: 60px;
color: $baseColor;
}
.flex-next{
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
font-size: 60px;
color: $baseColor;
}
.flex-disabled{
color: #6a6a6a;
}
}
}
}
/* End Project Single Slider area css
============================================================================================ */