@import url('https://fonts.googleapis.com/css2?family=Prosto+One&display=swap');

.banner-ferio  {position: relative;display: block;width:100%;height:100%; background: linear-gradient(0.538turn,#184a70 0%,rgba(76,230,255,1) 100%); border-radius:5px;height:450px; margin:0;z-index: 1;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24); }
.slogan-ferio {display: block;float:none;margin:1.5em 1em;}
.slogan-ferio p.zagl{color:#fff;text-align: center;font: 2.3em "Prosto One", sans-serif;text-shadow:  1px 1px 12px rgba(0, 0, 0, 0.5), 0 0 1em rgba(0, 0, 0, 0.24), 0 0 0.2em  rgba(0, 0, 0, 0.24);font-weight: 400; width: auto;  z-index: 3; margin:0;float:none;}
.slogan-ferio-osn{width: auto;  z-index: 3; margin: 0 15% 20px; background:#fff; padding:40px 20px 15px 30px;border-radius:25px;border:5px solid #fff;box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);opacity:.9}
.slogan-ferio-osn p{color:#292929;text-align: left;font: 1.1em Arial, sans-serif;font-weight: 300;text-align: left;  margin:0 0 0 35px}
.banner-logo-ferio img { width: 25%; margin:-24px 0 20px 20px;z-index: 3;float:left}
.img-ferio { position: absolute;  top:-20%;left: 0;z-index: -1;overflow: hidden;opacity:.3}
.img-ferio{-webkit-animation:img-ferio 15s linear infinite alternate both;animation:img-ferio 15s linear infinite alternate both}
@-webkit-keyframes img-ferio{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes img-ferio{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}
.img-ferio img { width: 200%;  } 
.flare-button-ferio {width: 100%;max-width: 200px;height: 45px;display: flex;justify-content: center;align-items: center;padding-top: 2px;margin: 20px auto 0;border: none;border-radius: 18px;font: 1.1em Arial, sans-serif;text-align: center;color: #fff;background: #de5652;box-shadow: 0 0 2px #000;cursor: pointer;text-decoration: none;position: relative;overflow: hidden;opacity:1}
.flare-button-ferio:hover {background: #0096ae;box-shadow: 0 0 3px #000;color: #fff;}
.flare-button-ferio:after {content: "";display: block;width: 30px;height: 200px;margin-left: 50px;background: #fff;background: linear-gradient(to bottom,rgba(255, 255, 255, 0.1) 0%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0.1) 100%);left: -40px;top: -100px;z-index: 1;transform: rotate(45deg);position: absolute;animation: movingFlare 3s ease-in-out 0.08s infinite;}
@keyframes movingFlare {0% {left: -30px;margin-left: 0px;}30% {left: 110%;margin-left: 80px;}100% {left: 110%;margin-left: 80px;}}
 
@media all and (max-width : 1000px) {
.img-ferio { display: block;top:-5%}
.slogan-ferio-osn{ margin: 0 10% 20px; padding:30px 20px 15px 30px}
.banner-logo-ferio img { margin-top:-17px}
} 
@media all and (max-width : 830px) {
.banner-logo-ferio img { margin-top:-25px}
.banner-ferio  {height:430px; }
}        
@media all and (max-width : 760px) {
.slogan-ferio-osn{ margin: 0 5% 20px}
}  
@media screen and (max-width: 700px) {
.img-ferio img { width: auto; height:600px} 
.img-ferio { display: block;top:-5%}
.slogan-ferio { margin:2em 1em;}
.banner-ferio  {height:500px; }
.slogan-ferio-osn{ margin: 0 5% 20px; padding-top:40px}
.flare-button-ferio{max-width: 300px;height: 50px;margin: 30px auto 20px;font-size: 1.5em;text-align:center}
}  
@media screen and (max-width: 630px) {
.slogan-ferio p.zagl{ font: 2em "Prosto One", sans-serif;margin:0 0 .5em}
.slogan-ferio { margin:2.2em 1em}
.banner-logo-ferio img { width: 25%; margin:-17px 0 20px 5px}
}  
@media screen and (max-width: 560px) {
.slogan-ferio p.zagl{ font: 1.8em "Prosto One", sans-serif;  margin: 0; padding:0 0 15px}
.banner-ferio  {height:520px}
.slogan-ferio-osn{ margin: 0 0 10px}
.slogan-ferio-osn p{ font: 1.1em Arial, sans-serif; margin:0}
.flare-button-ferio {max-width: 250px;height: 50px;  font-size: 1.3em}
}    
@media screen and (max-width: 470px) {
.banner-ferio  {height:550px}
.banner-logo-ferio img { width: 40%; margin:-17px auto 10px 25%;float:none}
.slogan-ferio-osn{ margin: 0 0 20px;  }
.slogan-ferio-osn p{   margin:0}
.flare-button-ferio {max-width: 250px;height: 50px;  font-size: 1.3em}
}     
@media screen and (max-width: 400px) {
.banner-logo-ferio img { width: 60%; margin:-17px auto 10px 15%}
.slogan-ferio p.zagl{ font: 1.5em "Prosto One", sans-serif;  margin: 0; padding:0 0 15px}
.banner-ferio  {height:560px}
.flare-button-ferio { font-size: 1.1em}
.slogan-ferio-osn p{ font: 1em Arial, sans-serif}
}
@media screen and (max-width: 350px) {
.banner-ferio  {height:600px}
.flare-button-ferio { font-size:1em}
}