/* ----------------------------------------- */
/* View slug: portfolio-slider-with-thumbnails - start */
/* ----------------------------------------- */
#main-slider .item img {
width: 100%;
height: auto;
}
/* ----------------------------------------- */
/* View slug: portfolio-slider-with-thumbnails - end */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* View slug: portfolio-slider-with-thumbnails-carousel - start */
/* ----------------------------------------- */
.thumbcarousel {
position: relative;
margin: 12px 0 0;
padding: 0;
}
.thumbcarousel .item {
text-align: center;
}
.thumbcarousel .item .thumb {
border: 4px solid #eee;
width: 18%;
margin: 0;
display: inline-block;
vertical-align: middle;
cursor: pointer;
max-width: 98px;
}
@media only screen and (max-width: 850px) {
.thumbcarousel .item .thumb {
width: 15%;
}
}
.thumbcarousel .item .thumb:hover {
border-color: #f05a28;
}
.carousel-control.right, .carousel-control.left {
background-color: rgba(0, 0, 0, 0);
background-image: none;
}
.carousel-control {
color: #0284b8;
text-shadow: none;
font-size: 24px;
width: 20px;
height: 24px;
line-height: 24px;
top: 20%;
}
@media only screen and (max-width: 576px) {
.carousel-control {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
}
}
@media only screen and (min-width: 577px) and (max-width: 768px) {
.carousel-control {
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
}
}
.carousel-control:hover, .carousel-control:focus, .carousel-control:active {
color: #333;
}
/* ----------------------------------------- */
/* View slug: portfolio-slider-with-thumbnails-carousel - end */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* Content Template: portfolio-single-slide - start */
/* ----------------------------------------- */
.slide {
position: relative;
}
.slide-inner-box {
position: absolute;
width: 47%;
right: 30px;
top: 30px;
background: #fff;
padding: 30px;
}
@media only screen and (max-width: 420px) {
.slide-inner-box h2+p {
display: none;
}
}
@media only screen and (max-width: 576px) {
.slide-inner-box {
width: 88%;
right: 20px;
top: 20px;
padding: 25px;
}
.slide-inner-box p {
max-height: 25px;
overflow: hidden;
margin-bottom: 1em;
}
}
@media only screen and (min-width: 577px) and (max-width: 1100px) {
.slide-inner-box p {
max-height: 100px;
overflow: hidden;
margin-bottom: 1em;
}
}
@media only screen and (min-width: 768px) and (max-width: 850px) {
.slide-inner-box p {
max-height: 25px;
overflow: hidden;
margin-bottom: 1em;
}
}
.slide-inner-box h2::after {
background: #f05a28;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 0;
width: 90px;
}
.slide-inner-box h2 {
font-size: 20px;
line-height: 28px;
}
/* ----------------------------------------- */
/* Content Template: portfolio-single-slide - end */
/* ----------------------------------------- */
Toolset modules
A Toolset training site Toolset website | Buy Toolset