.bs-slider {
overflow : hidden;
max-height : 698px;
position : relative;
background : #000000;
max-width : 1440px;
margin : auto;
}
.bs-slider .bs-slider-overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : rgb(255, 255, 255, 0.10);
}
.bs-slider > .carousel-inner > .item > img, .bs-slider > .carousel-inner > .item > a > img {
margin : auto;
width : 100% !important ;
}
.fade {
opacity : 1;
}
.fade .item {
top : 0;
z-index : 1;
opacity : 0;
width : 100%;
position : absolute;
left : 0 !important ;
display : block !important ;
transition : opacity 1s ease-in-out;
}
.fade .item:first-child {
top : auto;
position : relative;
}
.fade .item.active {
opacity : 1;
z-index : 2;
transition : opacity 1s ease-in-out;
}
.control-round .carousel-control {
top : 47%;
opacity : 0;
width : 45px;
height : 45px;
z-index : 100;
color : #ffffff;
display : block;
font-size : 24px;
cursor : pointer;
overflow : hidden;
line-height : 43px;
text-shadow : none;
position : absolute;
font-weight : normal;
background : transparent;
border-radius : 100px;
}
.control-round:hover .carousel-control {
opacity : 1;
}
.control-round .carousel-control.left {
left : 1%;
}
.control-round .carousel-control.right {
right : 1%;
}
.control-round .carousel-control.left:hover, .control-round .carousel-control.right:hover {
color : #fdfdfd;
background : rgb(0, 0, 0, 0.5);
border : transparent 0;
}
.control-round .carousel-control.left > span:nth-child(1) {
left : 45%;
}
.control-round .carousel-control.right > span:nth-child(1) {
right : 45%;
}
.indicators-line > .carousel-indicators {
right : 45%;
bottom : 3%;
left : auto;
width : 90%;
height : 20px;
font-size : 0;
overflow-x : auto;
text-align : right;
overflow-y : hidden;
padding-left : 10px;
padding-right : 10px;
padding-top : 1px;
white-space : nowrap;
}
.indicators-line > .carousel-indicators li:last-child {
margin-right : 0;
}
.indicators-line > .carousel-indicators .active {
margin : 1px 5px 1px 1px;
box-shadow : 0 0 0 2px #fff;
background-color : transparent;
position : relative;
transition : box-shadow 0.3s ease;
transition : background-color 0.3s ease;
}
.indicators-line > .carousel-indicators .active:before {
transform : scale(0.5);
background-color : #fff;
content : "";
position : absolute;
left : -1px;
top : -1px;
width : 15px;
height : 15px;
border-radius : 50%;
transition : background-color 0.3s ease;
}
.slide_style_left {
text-align : left !important ;
}
.slide_style_right {
text-align : right !important ;
}
.slide_style_center {
text-align : center !important ;
}
.slide-text {
left : 0;
top : 25%;
right : 0;
margin : auto;
padding : 10px;
position : absolute;
text-align : left;
padding : 10px 85px;
}
.slide-text > h1 {
padding : 0;
color : #ffffff;
font-size : 70px;
font-style : normal;
line-height : 84px;
margin-bottom : 30px;
letter-spacing : 1px;
display : inline-block;
animation-delay : 0.7s;
}
.slide-text > p {
padding : 0;
color : #ffffff;
font-size : 20px;
line-height : 24px;
font-weight : 300;
margin-bottom : 40px;
letter-spacing : 1px;
animation-delay : 1.1s;
}
.slide-text > a.btn-default {
color : #000;
font-weight : 400;
font-size : 13px;
line-height : 15px;
margin-right : 10px;
text-align : center;
padding : 17px 30px;
white-space : nowrap;
letter-spacing : 1px;
display : inline-block;
border : none;
text-transform : uppercase;
animation-delay : 2s;
transition : background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a.btn-primary {
color : #ffffff;
cursor : pointer;
font-weight : 400;
font-size : 13px;
line-height : 15px;
margin-left : 10px;
text-align : center;
padding : 17px 30px;
white-space : nowrap;
letter-spacing : 1px;
background : #00bfff;
display : inline-block;
text-decoration : none;
text-transform : uppercase;
border : none;
animation-delay : 2s;
transition : background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a:hover, .slide-text > a:active {
color : #ffffff;
background : #222222;
transition : background 0.5s ease-in-out, color 0.5s ease-in-out;
}
@media (max-width: 991px) {
.slide-text h1 {
font-size : 40px;
line-height : 50px;
margin-bottom : 20px;
}
.slide-text > p {
font-size : 18px;
}
}
@media (max-width: 768px) {
.slide-text {
padding : 10px 50px;
}
.slide-text h1 {
font-size : 30px;
line-height : 40px;
margin-bottom : 10px;
}
.slide-text > p {
font-size : 14px;
line-height : 20px;
margin-bottom : 20px;
}
.control-round .carousel-control {
display : none;
}
}
@media (max-width: 480px) {
.slide-text {
padding : 10px 30px;
}
.slide-text h1 {
font-size : 20px;
line-height : 25px;
margin-bottom : 5px;
}
.slide-text > p {
font-size : 12px;
line-height : 18px;
margin-bottom : 10px;
}
.slide-text > a.btn-default, .slide-text > a.btn-primary {
font-size : 10px;
line-height : 10px;
margin-right : 10px;
text-align : center;
padding : 10px 15px;
}
.indicators-line > .carousel-indicators {
display : none;
}
}