.homepage-image-owl{
height: auto; width: auto;
} .homepage-image-project{
height: 206.5px; width: auto; overflow: auto;
}
/* Carousel Right Caption */ .carousel-caption.right-caption {
top: 0; margin-top: 47px; right:0; left:0;
} /* CUSTOMIZE THE CAROUSEL ————————————————– */
/* Carousel base class */ .carousel {
height: 500px; margin-bottom: 5px;
} /* Since positioning the image, we need to help out the caption */ .carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */ .carousel .item {
height: 500px; background-color: #777;
} .carousel-inner > .item > img {
position: absolute; top: 0; left: 0; min-width: 100%; height: 500px;
} a.carousel-control{
border-radius: 50px; border: solid 1px white; height: 50px; width: 50px; vertical-align: middle; margin-top: auto; margin-bottom: auto;
}
a.carousel-control span.glyphicon-menu-left {
top: 12px; left: -5px;
} a.carousel-control span.glyphicon-menu-right {
top: 12px; right: 2px;
}
.row.activity-holder.center-block {
height: auto;
}
.activity-holder .activity-block {
border: #fff 3px solid; background: transparent !important;
} .activity-block {
margin-top: 0px !important; background: transparent !important;
}
.activity-holder p {
height:99px;
}
.activity-holder .activity-block {
border:0 !important; background: transparent;
} .activity-block {
border: 0 !important; background: transparent; margin-top: 70px;
}
.activity-holder p {
height: auto;
}
.carousel-inner > .item > div.slider-img {
position: absolute; top: 0; left: 0; min-width: 100%; height: 500px;
}
//Caption divs for home page content on slider .carousel-caption.top-caption {
top: 0; margin-top: 47px;
}
.carousel-caption.right-caption {
top: 0; margin-top: 47px; right:-100px;
}
/* Left and Right Carousel Control Styles*/ a.left.carousel-control {
display: none;
} a.right.carousel-control{
display: none;
}
/* Responsive CSS for Homepage */
@include media-breakpoint-only(xs) {
.hero-banner { padding-top: 0px; min-height: auto; } .hero-banner h1 { font-size: 20pt; } .hero-banner p.sub-tag { width: 90%; margin-top: 10px; margin-bottom: 20px; } .activity-container { margin-top: 0px; padding-top: 0px; } .activity-block img { width: auto; } .activity-holder .col-md-3 { border-bottom: 1px solid #ccc; padding-bottom: 10px; padding-top: 10px; }
}
.hero-banner {
padding-top: 0px; min-height: auto;
}
.hero-banner h1 {
font-size: 20pt;
}
.hero-banner p.sub-tag {
width: 90%; margin-top: 10px; margin-bottom: 20px;
}
.activity-container {
margin-top: 0px; padding-top: 0px;
}
.activity-block img {
width: auto;
}
.activity-holder .col-md-3 {
border-bottom: 1px solid #ccc; padding-bottom: 10px; padding-top: 10px;
}
.owl-dots {
margin-bottom: 20px;
} .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
background-color: $primary !important; transition: all 1s ease;
}
.activity-container {
/*margin-top: 50px; padding-bottom: 30px;*/ border-top: 1px solid #efefef;
}
.activity-block img {
width: 100%; margin-bottom: 10px;
}
.activity-holder .activity-block {
border: #fff 3px solid; background: #fff;
}
.home-project .activity-block img { height: 205px; width: auto; }
.activity-block {
border: #fff 3px solid; background: #fff; margin-top: 70px;
} .activity-block a{
color: black; text-decoration: none; transition: all 1s ease;
} .activity-block a:hover{
text-decoration: none; color: $primary; transition: all 1s ease;
}
.activity-block .item {
display:none;
}
.owl-text{
min-height:100px;
} .activity-holder p {
height: 99px;
} @include media-breakpoint-up(sm) {
.row .activity-holder{ height:529.44px; }
} @include media-breakpoint-down(sm) {
.row .activity-holder{ height:auto; } .activity-holder p { height: auto; } .owl-text{ min-height:auto; } .activity-block { margin-top: 70px; }
}
.activity-holder a.btn-primary:hover {
background-color: rgb(25, 148, 123); color: #fff; border-color: rgb(25, 148, 123);
}
.owl-prev {
background-color: #cccccc !important; transition: all 200ms linear;
} .owl-next {
background-color: #cccccc !important; transition: all 200ms linear;
} .owl-prev:hover {
background-color: #545454 !important;
} .owl-next:hover {
background-color: #545454 !important;
}
.carousel-inner > .item > div.slider-img {
position: absolute; top: 0; left: 0; min-width: 100%; height: 500px;
}
/* Caption divs for home page content on slider */ .carousel-caption.top-caption {
top: 0; margin-top: 47px;
}
.carousel-caption.right-caption {
top: 0; margin-top: 47px; right:-100px;
}
// Make sure the owl-dots are displayed correctly. button.owl-dot {
background: transparent; border: none; outline: none;
}