.ba-hero {
position: relative;
width: calc(100vw - 8px);
margin-left: -50vw;
left: 50%;
}
@media only screen and (max-width: 768px) {
.ba-hero {
width: 100vw;
}
}
.ba-hero .copy {
position: absolute;
z-index: 99;
top: 50%;
left: 0;
width: 60%;
-webkit-transform: translate(0px, -70%);
transform: translate(0px, -70%);
padding-left: 10%;
}
@media only screen and (max-width: 1400px) {
.ba-hero .copy {
padding: 5%;
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.ba-hero .copy {
position: relative;
top: 0px;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
padding: 15px;
}
}
.ba-hero .copy h1 {
font-size: 51px;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 460px) {
.ba-hero .copy h1 {
font-size: 38px;
}
}
.ba-hero .copy h2 {
font-size: 31px;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 460px) {
.ba-hero .copy h2 {
font-size: 38px;
}
}
.ba-hero .copy p {
font-size: 21px;
}
.ba-hero .copy .buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media only screen and (max-width: 460px) {
.ba-hero .copy .buttons {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.ba-hero .copy .buttons .btn-hero {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 15px;
margin: 15px 15px 15px 0;
}
@media only screen and (max-width: 460px) {
.ba-hero .copy .buttons .btn-hero {
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 15px 0;
padding: 5px;
}
}
.ba-hero .copy .buttons .btn-hero svg {
margin-right: 10px;
width: 25px;
}
.ba-hero .copy .buttons .btn-hero span {
font-size: 12px;
margin-right: 10px;
}
.ba-hero .copy .buttons .btn-hero span b {
display: block;
color: #fff;
font-size: 21px;
font-family: "Signika Negative", sans-serif;
font-weight: 700;
}
.ba-hero .row {
position: relative;
z-index: 2;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.ba-hero .row .col:nth-child(1) {
width: 50%;
}
@media only screen and (max-width: 768px) {
.ba-hero .row .col:nth-child(1) {
width: 0;
}
}
.ba-hero .row .col:nth-child(2) {
width: 100%;
-ms-flex-item-align: stretch;
-ms-grid-row-align: stretch;
align-self: stretch;
}
@media only screen and (max-width: 1400px) {
.ba-hero .row .col:nth-child(2) {
width: 70%;
}
}
@media only screen and (max-width: 1200px) {
.ba-hero .row .col:nth-child(2) {
width: 50%;
}
}
@media only screen and (max-width: 998px) {
.ba-hero .row .col:nth-child(2) {
width: 50%;
}
}
@media only screen and (max-width: 768px) {
.ba-hero .row .col:nth-child(2) {
width: 100%;
}
}
.ba-hero .row .col:nth-child(2) .img {
height: 60vh;
min-height: 600px;
overflow: hidden;
position: relative;
}
@media only screen and (max-width: 768px) {
.ba-hero .row .col:nth-child(2) .img {
min-height: 400px;
height: 400px;
}
}
.ba-hero .row .col:nth-child(2) .img:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background: white;
background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%);
}
@media only screen and (max-width: 768px) {
.ba-hero .row .col:nth-child(2) .img:after {
width: 100%;
height: 30%;
background: white;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
background: linear-gradient(-180deg, white 0%, rgba(255, 255, 255, 0) 100%);
}
}
.ba-hero .row .col:nth-child(2) .img img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
height: 80vh;
min-height: 600px;
}
@media only screen and (max-width: 768px) {
.ba-hero .row .col:nth-child(2) .img img {
min-height: 400px;
height: 400px;
}
}
.ba-hero .bg-circle {
width: 40%;
position: absolute;
z-index: -1;
top: 50%;
left: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
@media only screen and (max-width: 768px) {
.ba-hero .bg-circle {
width: 100%;
}
}
.ba-hero .wave {
position: absolute;
width: 100%;
bottom: -3px;
}
.ba-hero .lines {
position: absolute;
z-index: 1;
width: 100%;
left: 0%;
bottom: -25%;
}
@media only screen and (max-width: 768px) {
.ba-hero .lines {
bottom: -100px;
}
}
@media only screen and (max-width: 460px) {
.ba-hero .lines {
bottom: -50px;
}
}
.slide-img {
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
.show {
opacity: 1;
}
.zapisy-trwaja {
padding: 5px 20px;
border-radius: 100px;
background-color: green;
color: #fff;
display: inline-block;
text-transform: uppercase;
font-size: 14px;
}