TIF_E41201027/public/Frontend/assets/scss/_testimonial.scss

166 lines
3.9 KiB
SCSS

.testimonial-area{
background-size: cover;
background-repeat: no-repeat;
.testimonial-caption{
.testimonial-top-cap{
& img{
margin-bottom: 50px;
width: auto;
display: inline-block;
@media #{$md}{
margin-bottom: 30px;
}
@media #{$xs}{
margin-bottom: 30px;
}
}
& p{
color: #282828;
font-weight: 300;
line-height: 1.6;
font-size: 24px;
font-style: italic;
// font-size
@media #{$lg}{
font-size: 18px;
line-height: 1.6;
font-size: 16px;
}
// margin
@media #{$md}{
margin-bottom: 25px;
font-size: 16px;
line-height: 1.7;
padding: 0 ;
font-size: 17px;
}
@media #{$xs}{
margin-bottom: 25px;
font-size: 16px;
line-height: 1.7;
padding: 0 5px;
font-size: 18px;
}
}
}
.testimonial-founder{
.founder-img{
& img{
margin-bottom:30px;
display: inline-block;
}
& span{
color: #3f4451;
font-size:20px;
font-weight: 600;
line-height: 1;
display: block;
font-family: $font_3;
margin-bottom: 10px;
}
p{
font-size: 14px;
font-weight: 300;
}
}
}
}
/* slick-dots button*/
.dot-style .slick-dots {
text-align: center;
bottom: -58px;
left: 0;
right: 0;
position: absolute;
}
.dot-style .slick-dots li {
display: inline-block;
}
.dot-style .slick-dots button {
text-indent: -100000px;
height: 9px;
width: 9px;
border: 0;
padding: 0;
margin:0 4px;
cursor: pointer;
border-radius:50%;
background:#c0c0c0;
}
.dot-style .slick-dots .slick-active button{
background: #ff4357;
background:#ff4357;
height: 12px;
width: 12px;
position: relative;
top: -1px;
}
/* End slick-dots button*/
}
/* Homepage1 Testimonial */
.h1-testimonial-active{
button.slick-arrow {
position: absolute;
top: 50%;
left: -133px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: 0;
padding: 0;
z-index: 2;
height: 45px;
width: 45px;
line-height: 15px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
@include transition(.3s);
color: #fff;
// Hide btn
opacity: 0;
visibility: hidden;
background: $theme-color;
@media #{$sm}{
left: -45px;
}
@media #{$sm}{
left: -45px;
}
}
button.slick-next {
left: auto;
right: -133px;
@media #{$sm}{
right: -45px;
}
}
&:hover button.slick-prev {
left: -120px;
@media #{$sm}{
left: -35px;
}
}
&:hover button.slick-next {
right: -120px;
@media #{$sm}{
right: -37px;
}
}
&:hover button {
// Show btn
opacity: 1;
visibility: visible;
}
}
.t-bg{
background: #021a47;
}
.slick-initialized .slick-slide {
outline: 0;
}