section.owl-banner {
width: 100%;
float: left;
margin: 0;
overflow: hidden;
}
section.owl-banner .item {
position: relative;
width: 100%;
float: left;
margin: 0;
border:0;
background: #000;
opacity: 1 !important;
overflow: hidden;
transform: none !important;
}
section.owl-banner .item .img{
position: absolute;
top: -40px;
left: -100px;
right: -100px;
bottom: -40px;
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat; -moz-transition: all 8s ease; -webkit-transition: all 8s ease; -o-transition: all 8s ease; transition: all 8s ease;
transform: scale(1) translateY(4%);
}
section.owl-banner .item .container{
position: relative;
padding: 0 15px;
}
section.owl-banner .item .info{
width:80%;
position: absolute;
transform: translateY(-50%);
top: calc(50% + 70px);
left: 10%;
z-index: 9;
text-align: center;
display: flex;
flex-flow: column;
}
section.owl-banner .item.left .img{
background-position: center;
}
section.owl-banner .item.center .img{
background-position: center top;
}
section.owl-banner .item.center .info{
justify-content: center;
align-items: center;
text-align: center;
}
section.owl-banner .item.left .info{
justify-content: flex-start;
align-items: flex-start;
text-align: left;
left: 0;
width:50%;
}
section.owl-banner .item.right .info{
justify-content: flex-end;
align-items: flex-end;
text-align: right;
left: 50%;
width:50%;
}
section.owl-banner .item .info h2{
margin: 0 !important;
width: 100%;
color: #fff;
font-weight: 400;
font-size: 60px;
line-height: 1.1;
text-transform: uppercase;
text-align: inherit;
opacity: 0; -moz-transition: all 4s ease; -webkit-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease;
transition-delay: .5s;
}
section.owl-banner .item .info .btn{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
color: #fff;
font-size: 18px;
padding: 15px 40px;
border-radius: 0;
margin: 30px 0 0 0;
opacity: 0;
background: rgb(197, 58, 79); -moz-transition: background-color 0.4s ease, color 0.4s ease, transform 3s ease 1s, opacity 3s ease 1s; -webkit-transition: background-color 0.4s ease, color 0.4s ease, transform 3s ease 1s, opacity 3s ease 1s; -o-transition: background-color 0.4s ease, color 0.4s ease, transform 3s ease 1s, opacity 3s ease 1s; transition: background-color 0.4s ease, color 0.4s ease, transform 3s ease 1s, opacity 3s ease 1s;
}
section.owl-banner .item .info .btn:hover{
background: #fff;
color: rgb(197, 58, 79);
}
section.owl-banner .item.center .info .btn{
transform: translateY(-100%);
}
section.owl-banner .item.center .info h2{
transform: translateY(50%);
}
section.owl-banner .item.left .info .btn{
transform: translateX(-50%);
}
section.owl-banner .item.left .info h2{
transform: translateX(-30%);
}
section.owl-banner .item.right .info .btn{
transform: translateX(50%);
}
section.owl-banner .item.right .info h2{
transform: translateX(30%);
}
section.owl-banner .owl-item .item,
section.owl-banner .owl-item .container,
section.owl-banner{
height: calc(100vh - 105px);
min-height: 800px;
}
section.owl-banner .owl-item.active .item.center .info .btn,
section.owl-banner .owl-item.active .item.center .info h2,
section.owl-banner .owl-item.active .item.left .info .btn,
section.owl-banner .owl-item.active .item.left .info h2,
section.owl-banner .owl-item.active .item.right .info .btn,
section.owl-banner .owl-item.active .item.right .info h2{
opacity: 1;
transform: translate(0);
}
section.owl-banner .owl-item.active .item .img{ } @media(max-width: 1300px){
section.owl-banner .item .info h2{
font-size: 40px;
}
section.owl-banner .owl-item .item,
section.owl-banner .owl-item .container,
section.owl-banner{
min-height: 600px;
}
}
@media(max-width: 991px){
section.owl-banner .container{
max-width: calc(100% - 30px) !important;
}
section.owl-banner .owl-item .item,
section.owl-banner .owl-item .container,
section.owl-banner{
height: calc(100vh - 86px);
min-height: calc(100vh - 86px);
}
section.owl-banner .owl-item .container{
padding: 0 30px;
}
section.owl-banner .item .info h2{
font-size: 30px;
}
section.owl-banner .item .info .btn {
padding: 10px 40px;
margin: 20px 0 0 0;
font-size: 14px;
}
section.owl-banner .item .info {
top: calc(50% + 30px);
}
}
@media(max-width: 767px){
section.owl-banner .container{
max-width: calc(100% - 30px) !important;
}
section.owl-banner .owl-item .item,
section.owl-banner .owl-item .container,
section.owl-banner{
height: calc(100vh - 107px);
min-height: calc(100vh - 107px);
}
section.owl-banner .item .info h2 {
font-size: 26px;
}
section.owl-banner .item .info{
width: 90%;
left: 5%;
}
section.owl-banner .item.left .info{
left: 0;
width:70%;
}
section.owl-banner .item.right .info{
left: 30%;
width:70%;
}
section.owl-banner .item.center .img {
background-position: center center;
}
section.owl-banner .item .img{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-size: cover !important;
background-position: center !important; -moz-transition: all 0s ease !important; -webkit-transition: all 0s ease !important; -o-transition: all 0s ease !important; transition: all 0s ease !important;
}
section.owl-banner .owl-item.active .item .img{
transform: scale(1) translateY(0);
}
}
@media(max-width: 500px){
section.owl-banner .item .info h2 {
font-size: 22px;
}
}