/*--- ***  BANNER ADAPTIVE *** ---*/
.sich_ban {display:block;width:100%;position:relative;}
.sich_ban article {display:table;width:100%;max-width:1000px;background: linear-gradient(to right, rgb(46,121,211) 0%,rgb(255,216,53) 100%);margin:0 auto;}
.tilo {display:block;width:100%;height:120px;position:relative;overflow:hidden;}
.tilo i {display:block;}
.tilo s {display:block; border: 2px solid #ffc835; border-radius:50%; box-shadow:0 0 0 30px rgba(204,169,44, 0.4); background: radial-gradient(ellipse at center, rgb(252,66,53) 1%,rgb(242,85,46) 41%,rgb(237,91,37) 58%,rgb(255,216,53) 100%);}
.ban_foto {width:195px; height:162px; background: url(https://kampot.org.ua/imag/reklama/sp-sich.png) 0px 0px; position:absolute; bottom:-52px; left:50%;margin-left:-68px;animation: tillud 8s infinite;}
.ban_logo {width:137px; height:133px; background: url(https://kampot.org.ua/imag/reklama/sp-sich.png) -221px -7px; position:absolute; top:5px; left:30px;z-index:20; animation: logoanim 8s infinite;}
.ban_slova {width:217px; height:66px; background: url(https://kampot.org.ua/imag/reklama/sp-sich.png) -382px 0px; position:absolute; bottom: 9px; left:180px;z-index:21;animation: napanim 23s infinite; }
.ban_kr1 {width:200px; height:200px; position:absolute; top:-60px; right:-100px;z-index:1;opacity:.8;animation: pulse1 4.9s infinite;}
.ban_kr2 {width:300px; height:300px; position:absolute; top:-60px; right:-150px;z-index:2;opacity:.6;animation: pulse2 4.8s infinite;}
.ban_kr3 {width:400px; height:400px; position:absolute; top:-60px; right:-200px;z-index:3;opacity:.4;animation: pulse3 4.7s infinite; }
.ban_vspih {display:block;width:103px; height:91px;  background: url(https://kampot.org.ua/imag/reklama/sp-sich.png) -493px -72px;position:absolute; top:30px; left:48%;z-index:59;opacity:0;animation: animvsp 6s infinite; }
.ban_strilka {display:block;width:93px; height:61px;  background: url(https://kampot.org.ua/imag/reklama/sp-sich.png) -372px -103px;position:absolute; top:0px; right:0;z-index:58;opacity:0; }
.text-anim {margin:0;padding:0; position:absolute; display:block; width:95%; height: 110%; top:-5%; left:0; z-index:30;}
.text-anim li{position: absolute; bottom:80%; left: 0;width: 100%;text-align: right; opacity: 0; animation:textAnimation 11s linear infinite 0s;}
.text-anim li {font-family:'times new roman', times, serif; font-size:18px; color:#000;list-style:none;}
.text-anim li:nth-child(2){animation-delay: 3s;font-size:14px;color:#ffc835;}
.text-anim li:nth-child(3){animation-delay: 6s;font-size:10px;color:red;}
.text-nazv {background:#2e79d3;color:#fff;font-size:10px;padding:3px 6px 3px 6px;position:absolute; top:0px; right:0;opacity:.8;border-radius:0 0 0 4px; z-index:88;}
.blik {display:bloc;border-radius:50px;width:50px; height:50px; position:absolute; top:-100px; left:-50%;background-size: cover;background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0)); opacity:.5; animation: animblik 4s infinite;}
.tilo > a {display:block;width:98%; height:99%; position:absolute; top:0; left:0;z-index:99;cursor:pointer;}
.tilo:hover {border: 4px dashed #83b9d1;border-radius:2px}
.tilo > a:hover ~ .ban_logo {animation-play-state: paused;}
.tilo > a:hover ~ .ban_foto {display:none;}
.tilo > a:hover ~ .ban_slova {animation-play-state: paused; bottom: 29px; left:290px;transition:all .2s ease-in-out;}
.tilo > a:hover ~ .ban_strilka { top:20px; right:37%;opacity:.8;transition:all .8s ease-in-out;}
.tilo > a:hover ~ .text-nazv {background:#ffd835;color:#0b2e5e;}
/* -- ANIMATIONS --- */
@keyframes animvsp { 
    0% {opacity:0;}
	90% {opacity:0;transform: scale(1.1, 1.1);}
    97% {opacity: .8;transform: scale(1.5, 1.5);}
	99% {opacity:0; transform: scale(1, 1); }
    100% {opacity:0; }
}

@keyframes animblik {
  0% {left:-50%;width:50px; height:50px;top:-250px;}
  12% {left:0;top:20px;width:8px; height:8px;opacity:.2;top:50px;}
  25% {width:550px; height:550px;top:0px;}
  49% {left:50%;width:8px; height:8px;opacity:.2;top:50px;}
  99% {left:50%;width:8px; height:8px;opacity:0;top:50px;}
  100% {left:-180%;opacity:0;width:50px; height:50px;top:-250px;}
}
@keyframes textAnimation { 
    0% {opacity: 0;bottom:80%;}
    40% {opacity: .7;bottom:40%;}
    61% {opacity: .9; bottom:0;font-size: 25px;color:#000;}
    63% {opacity: 0;bottom:-120%;}
    66% {opacity: 0 }
    100% {opacity: 0 }
}
@keyframes pulse1 {
  0% {width:200px; height:200px; }
  70% {width:400px; height:400px;right:-200px;opacity:.1;}
  100% {width:200px; height:200px;}
}
@keyframes pulse2 {
  0% {width:300px; height:300px; }
  70% {width:600px; height:600px;right:-300px;opacity:.1;}
  100% {width:300px; height:300px;}
}
@keyframes pulse3 {
  0% {width:400px; height:400px; }
  70% {width:900px; height:900px;right:-400px;opacity:.1;}
  100% {width:400px; height:400px;}
}
@keyframes tillud {
  0% {bottom:-52px;}
  40% {bottom:-10px;}
  80% {bottom:-10px;}
  100% {bottom:-52px;}
}
@keyframes logoanim {
  0% {transform: skew(0, 5deg);}
  70% {transform: skew(0, 11deg);top:-15px; left:0px;}
  100% {transform: skew(0, 5deg);top:5px; left:30px;}
}
@keyframes napanim {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(0deg);}
  60% {transform: rotate(720deg);}
  99% {transform: rotate(720deg);}
  100% {transform: rotate(0deg);}
}
@media (max-width:1000px) {
.tilo {height:120px;}
}
@media (max-width:955px) {
.tilo > .ban_logo {display:none;}
.tilo > .ban_slova {left:5px;}
.tilo > a:hover ~ .ban_slova {left:50px; }
}
@media (max-width:620px) {
.tilo > .ban_foto {display:none;}
}
@media (max-width:460px) {
.tilo {height:220px;}
.tilo > a:hover ~ .ban_slova {bottom: 69px; left:20px;}
.tilo > a:hover ~ .ban_strilka {top:70px; right:7%;}
.tilo > a:hover ~ .text-anim {display:none;}
}
/*--- *** / BANNER ADAPTIVE *** ---*/