/* montserrat-100 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/montserrat-v30-latin_latin-ext-100.woff2') format('woff2');
}

/* montserrat-400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-v30-latin_latin-ext-regular.woff2') format('woff2');
}



/* montserrat-500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-v30-latin_latin-ext-500.woff2') format('woff2');
}

/* montserrat-600 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-v30-latin_latin-ext-600.woff2') format('woff2');
}

/* montserrat-700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-v30-latin_latin-ext-700.woff2') format('woff2');
}


.wr1{position:relative;max-width:1500px;margin:0 auto}

.he1{
  float:left;
  margin:20px 0 30px;
  width:10%;
  overflow:hidden;
  animation:fadeLeft .8s ease;
}

.he1 h1{
  float:left;
  z-index:10;
  width:100%;
  overflow:hidden;
}

.he1 img{
  width:100%;
  height:auto;
  transition: transform 0.3s ease;
}

.he1:hover img{
  transform:scale(1.08) rotate(-2deg);
}

.he1 span{
  display:none;
}

.sys{
  position:absolute;
  top:20px;
  right:130px;
  font-weight:500;
  margin:0;
  z-index:1;
  animation:fadeRight .8s ease;
}

.sys a:link,
.sys a:visited{
  float:right;
  background:#00599A;
  color:#fff;
  border-radius:10px;
  padding:10px 15px;
  margin:0 0 0 10px;
  box-shadow:0 8px 25px rgba(0,0,0,.15);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.sys a:hover{
  background:#0074c7;
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 14px 35px rgba(0,0,0,.25);
}

.max1{width:100%;background-color:#f8f8f8}
#introBox1{position:relative;width:100%;padding:50px 0;overflow:hidden;animation: fadeInEffect 1s ease-out forwards;}
#introBox1 picture{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
#introBox1 picture img{width:100%;height:100%;object-fit:cover}

/* ANIMATED OVERLAY */

#introBox1 .overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}

#introBox1 .overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      275deg,
      rgba(0,140,209,.92) 0%,
      rgba(0,92,71,.72) 40%,
      rgba(76,175,80,.78) 70%,
      rgba(139,195,74,.9) 100%
    );
  background-size:200% 200%;
  animation:gradientMove 10s ease infinite;
}

#introBox1 .overlay::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,.12),transparent 35%);
  animation:overlayPulse 6s ease-in-out infinite;
}

#introBox1 h2{
  float:left;
  width:80%;
  font-size:1.8em;
  font-weight:700;
  padding:50px 0 30px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  animation:fadeUp 1s ease;
}

.introBox1text{
  float:left;
  width:50%;
  padding:10px 0 40px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  animation:fadeUp 1.3s ease;
}

.introL a:link,
.introL a:visited{
  background:#00599A;
  color:#fff;
  padding:10px 20px;
  text-decoration:none;
  float:left;
  font-weight:600;
  border-radius:10px;
  margin:45px 0 80px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.introL a:hover{
  background:#fff;
  color:#000;
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.introHref1{
  animation:floaty 5s ease-in-out infinite;
}

.introHref1 a{display:flex;align-items:center;justify-content:center;background:#fff;font-size:90%;color:#000;padding:20px;margin:0;text-decoration:none;font-weight:600;border-radius:10px;z-index:3;float:right;transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;}
.introHref1 a:hover{background:#000;color:#fff;transform: translateY(-3px);}
.introHref1 a:hover svg{fill:#fff}
.introHref1 a:link,.introHref1 a:visited{float:right;text-decoration:none}
.introHref1 svg{width:20px;height:auto;fill:#000;margin-left:10px;transition: fill 0.3s ease;}
#introBOX2{padding:20px 0 150px;background-color:#f8f8f8}
.wrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:40px}
.wrapper > div{flex:0 0 calc(33.333% - 26.67px);display:flex;flex-direction:column;background:#fff;padding:0;box-sizing:border-box;border-radius:8px;box-shadow:0 2px 8px #0000000d;transition:transform .3s ease,box-shadow .3s ease;min-height:220px;animation: slideUpEffect 0.8s ease-out forwards;}
.wrapper > div:hover{transform:translateY(-8px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.wrapper a{text-decoration:none;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px;height:100%;box-sizing:border-box}
.wrapper img{max-width:100%;max-height:120px;object-fit:contain;padding:10px 0;transition: transform 0.3s ease;}
.wrapper > div:hover img{transform: scale(1.05);}
.wrapper span{margin-top:12px;font-size:1rem;font-weight:500;text-align:center}
#introBox3{position:relative;width:100%;overflow:hidden}
#introBox3 picture{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
#introBox3 picture img{width:100%;height:100%;object-fit:cover}
#introBox3 .wr1{max-width:1200px;margin:0 auto;padding:200px 0;display:flex;justify-content:flex-end;color:#fff}
#introBox3 .content{width:45%;padding-left:5%;animation: fadeInEffect 1.2s ease-out forwards;}
#introBox3 h3{font-size:2em;font-weight:700;margin-bottom:1em;color:#fff}
#introBox3 p{font-size:1em;color:#fff;line-height:1.6}
@media (max-width: 768px) {
#introBox3 .wr1{flex-direction:column;padding:100px 20px}
#introBox3 .content{width:100%;padding:0}
}
.max1bg{width:100%;background:#F9F9F9}
.max1bgpad{float:left;width:90%;text-align:center;margin:150px 5% 75px;color:#666}
.max1bgpad h3{color:#444;font-size:160%;font-weight:600;margin:0 0 50px}
.max3bg{float:left;width:100%;background:#E6E6E6;padding:60px 0}
.newsrow{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;margin:60px 0}
.news{width:21.8%;margin:1.6%;padding:0;text-align:left;background:#F9F9F9;transition: transform 0.3s ease, box-shadow 0.3s ease;animation: slideUpEffect 0.9s ease-out forwards;}
.news:hover{transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.news div{padding:5%}
.news img{width:100%;float:left;margin:0 0 20px}
.news b{font-size:110%;color:#000;width:100%;float:left;margin:5px 0}
.news span{font-size:90%;color:#000;width:100%;float:left;font-weight:400;margin:10px 0 20px}
.h2newsBoxView{color:#000;font-size:220%;margin:10px 0 40px;line-height:1.1;font-weight:500}

.newsBoxView h3{color:#000;font-size:140%;margin:10px 0 10px;line-height:1.1;font-weight:500}
.newsBoxView ul{margin:10px 0;padding:0}
.newsBoxView li{padding:0;margin:5px 0 0 20px;list-style-type:disc;list-style-position:outside}

.news em{float:left;font-size:80%;color:#666;padding:10px 0;width:100%}
#nav1{width:100%;float:left;margin:20px 0 30px;padding:0}
#nav1 li{float:left;padding:0;margin:12px 4px}
#nav1 a:link,#nav1 a:visited{color:#333;padding:10px 12px;margin:0;text-decoration:none;border:1px solid #666;transition: all 0.2s ease;}
#nav1 a:hover{color:#fff;background:#333;border-color:#333}
#nav1 .on a:link,#nav1 .on a:visited,#nav1 .on a:hover{background:#00599A;color:#fff;border:1px solid #00599A;transform: scale(1.05);}
.small{width:20%;padding:0;margin:0}
.big{max-width:100%;padding:0;margin:0}
.fotNum{width:85%;margin:0 0 180px 15%;float:left}
.fot{width:100%;float:left;margin:85px 0}
.fot div:nth-child(1){width:15%;float:left}
.fot div:nth-child(2){width:22%;float:left}
.fot div:nth-child(3){width:33%;float:left}
.fot div:nth-child(4){width:20%;float:left}
.fot div:nth-child(5){width:10%;float:left}
.fot div:nth-child(1) svg{width:30px;height:auto;margin:0 20px 0 0}
.fot div:nth-child(2) a:link,.fot div:nth-child(2) a:visited{display:block;color:#444;padding:0 0 5px;margin:0 0 10px;text-decoration:none;transition: color 0.2s ease, padding-left 0.2s ease;}
.fot div:nth-child(2) a:hover{color:#000;padding-left:5px}
.fot div:nth-child(3){color:#444;line-height:1.7}
.fot div:nth-child(4) a:link,.fot div:nth-child(4) a:visited{display:block;color:#444;padding:0 0 5px;margin:0 0 10px;text-decoration:none;transition: color 0.2s ease, padding-left 0.2s ease;}
.fot div:nth-child(4) a:hover{color:#000;padding-left:5px}
.fot div:nth-child(5){width:10%;float:right;text-align:right}
.fot div:nth-child(5) a:link,.fot div:nth-child(5) a:visited{float:right;display:flex;justify-content:center;background-color:#00599A;border-radius:50%;height:45px;width:45px;text-align:right;transition: background-color 0.3s ease, transform 0.2s ease;}
.fot div:nth-child(5) a:hover{background-color:#004070;transform: scale(1.1);}
.fot div:nth-child(5) svg{width:17px;height:auto;fill:#fff;margin: auto;}
.fotLogo svg{width:200px}
.fotRig{width:100%;float:left;margin:50px 0}
.fotRig div:nth-child(1){width:50%;float:left;color:#666}
.fotRig div:nth-child(2){width:50%;float:left;color:#666;text-align:right}
.fotRig div:nth-child(2) a:link,.fotRig div:nth-child(2) a:visited{color:#666;text-decoration:none;transition: color 0.2s ease;}
.fotRig div:nth-child(2) a:hover{color:#000}
.round{border-radius:10px}
#na2{float:left;margin:70px 0 0 4.5%}
#na2 li{float:left;font-size:90%;font-weight:500}
#na2 a:link,#na2 a:visited{float:left;color:#444;padding:12px 9px;margin:0;text-decoration:none;transition: color 0.2s ease, transform 0.2s ease;}
#na2 a:hover{color:#000;text-decoration:underline;transform: translateY(-1px);}
#na2 .on1 a:visited,#na2 .on1 a:link,#na2 .on1 a:hover{font-weight:700;color:#000;text-decoration:none}
#na2 li:nth-child(1){display:none}
.h21{color:#000;font-size:220%;margin:10px 0 40px;line-height:1.1;font-weight:500}
.h22{color:#333;font-size:180%;margin:50px 0 100px;line-height:1.1}
.h31{color:#000;font-size:150%;line-height:1.1;margin:20px 0 10px;font-weight:500;color:#444}
.h32{color:#000;font-size:110%;line-height:1.1;margin:50px 0 10px;font-weight:700;color:#00599A}
.h21 span{font-size:70%;color:#666}
.conBox1{background:#0185CA;color:#fff;padding:10px 1%;width:100%;float:left;font-size:150%;box-sizing:border-box;animation: fadeInEffect 0.8s ease-out;}
.conBox2{color:#00599A;padding:10px 1%;width:100%;float:left;font-size:130%;border:1px solid #0185CA;box-sizing:border-box;animation: fadeInEffect 0.8s ease-out;}
.conBoxL{float:left;width:49%}
.conBoxR{float:right;width:49%}
.img100{width:100%;height:auto;float:left;transition: transform 0.3s ease;}
.img100:hover{transform: scale(1.02);}
#se2{float:left;width:100%;margin:50px 0 40px}
.ul1 ul{margin:10px 0;padding:0}
.ul1 li{padding:0;margin:5px 0 0 20px;list-style-type:disc;list-style-position:outside}
#form1{width:100%;float:left;text-align:left;font-size:90%}
#form1 fieldset{border:0}
.formT label{float:left;width:28%;text-align:right;padding:8px 1% 0 0;box-sizing:border-box}
#form1 input[type=text]{background:#fff;float:left;width:72%;border:1px solid #ccc;margin:5px 0;padding:8px 1%;box-sizing:border-box;transition: border-color 0.3s ease, box-shadow 0.3s ease;}
#form1 input[type=text]:focus{border-color: #00599A;box-shadow: 0 0 5px rgba(0,89,154,0.3);outline: none;}
#form1 textarea{background:#fff;border:1px solid #ccc;padding:4px 1%;width:72%;height:200px;margin:5px 0;font-family:Arial;box-sizing:border-box;transition: border-color 0.3s ease, box-shadow 0.3s ease;}
#form1 textarea:focus{border-color: #00599A;box-shadow: 0 0 5px rgba(0,89,154,0.3);outline: none;}
#form1 a:link,#form1 a:visited{color:#666;text-decoration:underline}
#form1 a:hover{color:#000}
#form1 span:nth-child(2){width:95%;float:right}
#form1 img{padding:5px;background:#FED700}
#chkA,#chkB{float:left;width:100%;margin:5px 0;padding:8px 1% 8px 28%;box-sizing:border-box}
#chkA span,#chkB span{float:left;background:#FAFAFA;color:#fff;border:3px solid #000;padding:2px 4px;border-radius:5px;user-select:none}
#chkA div,#chkB div{float:right;width:93%}
.sub{font-size:150%;color:#fff;background:#000;margin:50px 0 8px 28%;padding:20px;cursor:pointer;transition: background 0.3s ease, transform 0.2s ease;}
.sub:hover{background:#333;transform: translateY(-2px);}
.email1 a:link,.email1 a:visited{padding:1px;text-decoration:underline}
.email1 a:hover{color:#fff;text-decoration:none}
html{height:100%;min-height:100%;font-size:1.2em;line-height:1.3}
body{font-family:'Montserrat',sans-serif;font-weight:400;font-optical-sizing:auto;font-style:normal;color:#444}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
h1{color:#000;font-size:130%;line-height:1.3;margin:0;padding:0}
h2{color:#333;font-size:120%;font-weight:1.3;margin:0;padding:0}
h3{color:#000;font-size:110%;line-height:1.3;font-weight:100;margin:0;padding:0}
h4{color:#666;font-size:100%;font-weight:1.3;margin:0;padding:0}
body,a,p,ul,li,form,fieldset,blockquote,.clear{margin:0;padding:0}
img{border:0}
ul{list-style:none}
li{background-image:none}
a:link,a:visited{color:#000;text-decoration:none}
a:hover{color:#000}
.clear{clear:both;display:block}
.cf:before,.cf:after{content:'';display:table}
.cf:after{clear:both}
.na33{display:none}
#na3{float:left;margin:10px 0 25px}
#na3 ul{margin:10px;padding:0}

/* Očiščeni Side Menu Elementi (Brez prehodov in premikov) */
.a0 a:visited,
.a0 a:link{
  display:block;
  margin:4px 0;
  font-weight:400;
  color:#444;
  padding:14px 18px;
  text-decoration:none;
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.a0 a:hover{
  background:#f4f8fc;
  color:#000;
}
.a1 a:link,
.a1 a:visited,
.a1 a:hover{
  display:block;
  margin:4px 0;
  font-weight:600;
  color:#00599A;
  padding:14px 18px;
  text-decoration:none;
  border-radius:12px;
  background:linear-gradient(90deg, rgba(0,89,154,.12), rgba(0,89,154,.03));
}
.oo1 a:visited,
.oo1 a:link{
  display:block;
  margin:2px 0;
  font-weight:400;
  color:#000;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
}
.oo1 a:hover{
  background:#f3f3f3;
  color:#000;
}
.oo2 a:link,
.oo2 a:visited,
.oo2 a:hover{
  display:block;
  margin:2px 0;
  font-weight:600;
  color:#00599A;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
    font-weight:400;
}
.aa0 a:visited,
.aa0 a:link{
  display:block;
  margin:2px 0;
  font-weight:400;
  color:#444;
  padding:10px 0 10px 12%;
  border-radius:10px;
  text-decoration:none;
}
.aa0 a:hover{
  background:#f5f5f5;
  color:#000;
}
.aa1 a:link,
.aa1 a:visited,
.aa1 a:hover{
  display:block;
  margin:2px 0;
  font-weight:600;
  color:#00599A;
  padding:10px 5% 10px 12%;
  border-radius:10px;
  text-decoration:none;
  background:linear-gradient(90deg, rgba(0,89,154,.08), transparent);
}

.fot div:nth-child(5) a:link,
.fot div:nth-child(5) a:visited{
  float:right;
  display:flex;
  justify-content:center;
  background-color:#00599A;
  border-radius:50%;
  height:45px;
  width:45px;
  transition:all .45s ease;
}

.fot div:nth-child(5) a:hover{
  transform:rotate(360deg) scale(1.08);
}

.fot div:nth-child(5) svg{
  width:17px;
  height:auto;
  fill:#fff;
}


#na2p{  position: absolute;display: none;z-index: 1000;box-shadow:0 1px 16px 1px rgba(0,0,0,0.8);background:#fff}
#na2p ul{padding:7px 0;background:#fff;margin:0;float:left}
#na2p li{display:block;margin:0;padding:2px 15px;font-size:100%}
#SideNav{height:100%;position:fixed;background:#fff;z-index:3;top:0;right:0;overflow-x:hidden;transition:.5s;z-index:4}
#SideNavClose{position:absolute;color:#000;cursor:pointer;top:8px;right:25px;z-index:1;font-size:50px;border:none;background:none;transition: transform 0.2s ease;}
#SideNavClose:hover{transform: scale(1.1);color: #333;}
#SideNavOpen{position:fixed;color:#000;cursor:pointer;top:5px;right:25px;z-index:1;font-size:50px;text-shadow:0 0 8px #fff;border:none;background:none;transition: transform 0.2s ease;}
#SideNavOpen:hover{transform: scale(1.1);}
#SideNav ul{width:400px;margin:20px auto}
.SideNavOn{width:100%;opacity:1}
.SideNavOff{width:0;opacity:0}
#SideNav li{display:block;width:100%;word-wrap:break-word}

@media screen and (max-width: 1500px) {
.wr1{width:95%}
}
@media (max-width:900px) {
#na2,#na3{display:none}
.he1{width:15%}
.wrapper > div{flex:0 0 calc(50% - 20px)}
.news{width:46%;margin:2%}
.conBoxL{float:left;width:100%;margin:0 0 20px}
.conBoxR{float:right;width:100%}
.introBox1text{width:90%}
.formT label{float:left;width:100%;text-align:left;padding:8px 1% 0 0;box-sizing:border-box}
#form1 input[type=text]{background:#fff;float:left;width:100%;border:1px solid #ccc;margin:5px 0;padding:8px 1%;box-sizing:border-box}
#form1 textarea{background:#fff;border:1px solid #ccc;padding:4px 1%;width:100%;height:200px;margin:5px 0;font-family:Arial;box-sizing:border-box}
#chkA,#chkB{float:left;width:100%;margin:5px 0;padding:8px 1% 8px 0;box-sizing:border-box}
#chkA span,#chkB span{float:left;background:#FAFAFA;color:#fff;border:3px solid #000;padding:2px 4px;border-radius:5px;user-select:none}
#chkA div,#chkB div{float:right;width:90%}
#form1 input[type=text]{background:#fff;float:left;width:100%;border:1px solid #ccc;margin:5px 0;padding:8px 1%;box-sizing:border-box}
#form1 textarea{background:#fff;border:1px solid #ccc;padding:4px 1%;width:100%;height:200px;margin:5px 0;font-family:Arial;box-sizing:border-box}
#chkA,#chkB{float:left;width:100%;margin:5px 0;padding:8px 1% 8px 0;box-sizing:border-box}
#chkA span,#chkB span{float:left;background:#FAFAFA;color:#fff;border:3px solid #000;padding:2px 4px;border-radius:5px;user-select:none}
#chkA div,#chkB div{float:right;width:90%}
.sub{font-size:150%;color:#fff;background:#000;margin:50px 0 8px;padding:20px;cursor:pointer}
}
@media screen and (max-width: 640px) {
.wrapper > div{flex:0 0 100%}
.news{width:100%;margin:10px 0}
.he1{float:left;margin:40px 0 40px;width:22%;overflow:hidden}
.he1 h1{float:left;z-index:10;width:100%;overflow:hidden}
#SideNav ul{font-size:110%}
#SideNavClose{font-size:30px;top:18px;right:25px}
.sys{position:absolute;top:30px;right:90px;font-weight:500;margin:0;z-index:1}
.sys a:link,.sys a:visited{float:none;display:block;background:#00599A;color:#fff;border-radius:10px;padding:8px 12px;margin:0 0 10px 10px;text-align:center;font-size:90%}
.sys a:hover{background:#00599A}
#introBox1 h2{float:left;width:100%;font-size:1.3em;font-weight:700;padding:3  0px 0 30px;color:#fff;text-shadow:0 2px 10px #000;box-sizing:border-box}
.conBox1{background:#0185CA;color:#fff;padding:10px 3%;width:100%;float:left;font-size:150%}
.conBox2{color:#00599A;padding:10px 3%;width:100%;float:left;font-size:130%;border:1px solid #0185CA}
.fotNum{width:100%;margin:0 0 180px;float:left;text-align:center;box-sizing:border-box}
.fot div:nth-child(1){width:100%;float:left;text-align:center;box-sizing:border-box}
.fot div:nth-child(2){width:100%;float:left;text-align:center;margin:60px 0 50px;box-sizing:border-box}
.fot div:nth-child(3){width:100%;float:left;text-align:center;margin:0 0 50px;box-sizing:border-box}
.fot div:nth-child(4){width:100%;float:left;text-align:center;box-sizing:border-box}
.fot div:nth-child(5){width:100%;float:left;box-sizing:border-box}
.fotLogo{text-align:center}
.fotLogo svg{width:350px}
.fotRig div:nth-child(1){width:100%;float:left;color:#666;text-align:center;margin:0 0 50px;box-sizing:border-box}
.fotRig div:nth-child(2){width:100%;float:left;color:#666;text-align:center;box-sizing:border-box}
.mob{display:none}
}

/* Definicije vseh Keyframes animacij */
@keyframes fadeInEffect {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUpEffect {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes overlayPulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}