/* FONT ICONS */
@font-face {
      font-family: 'viva';
      src: url('./ico/viva.eot?22455973');
      src: url('./ico/viva.eot?22455973#iefix') format('embedded-opentype'),
           url('./ico/viva.woff?22455973') format('woff'),
           url('./ico/viva.ttf?22455973') format('truetype'),
           url('./ico/viva.svg?22455973#viva') format('svg');
      font-weight: normal;
      font-style: normal;
}
html, body{margin:0;padding:0;scroll-behavior:smooth;}
body {font-family:sans-serif;background:url('./img/apt-bg2.png');}
a, a:visited {color:#1F8729;}
h1 {font-size:18pt;}
h2 {margin:.3em;font-size:16pt;text-align:center;}
header{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:stretch;box-shadow:0 1px 4px rgba(0,0,0,.2);backdrop-filter:blur(8px);
  margin: 0;
  background: linear-gradient(to bottom, #e6f7ff, #d5f0ff);
  background-image:
    linear-gradient(
      130deg,
      transparent 0%,
      rgba(255, 255, 255, 0.90) 1%,
      transparent 2.5%,
      rgba(200, 245, 245, 0.50) 4%,
      transparent 6.5%,
      rgba(255, 255, 255, 0.82) 8%,
      transparent 10.5%,
      rgba(220, 250, 250, 0.45) 12%,
      transparent 15%,
      rgba(255, 255, 255, 0.75) 16.5%,
      transparent 19%,
      rgba(200, 245, 245, 0.38) 21%,
      transparent 25%,
      rgba(255, 255, 255, 0.65) 27%,
      transparent 32%,
      rgba(255, 255, 255, 0.90) 36%,
      transparent 41%,
      rgba(200, 245, 245, 0.50) 48%,
      transparent 54%,
      rgba(255, 255, 255, 0.82) 60%,
      transparent 66%,
      rgba(220, 250, 250, 0.45) 72%,
      transparent 80%,
      rgba(255, 255, 255, 0.75) 88%,
      transparent 96%
    );
  background-attachment: fixed;
  background-size: 100%;
}
header div{display:inline-block;}
#logo{width:140px;padding:0;text-align:center;}
#i1{margin:10px 0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));transition:transform .3s linear;transform-style:preserve-3d;}
#logo:hover #i1{transform:rotate3d(0,1,0,90deg);}
#i2{position:absolute;margin:0;top:10px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));transition:all .3s linear;transition-delay:.3s;transform-style:preserve-3d;transform:rotate3d(0,1,0,-90deg);opacity:.05;}
#logo:hover #i2{transform:rotate3d(0,1,0,0deg);opacity:1;transition-delay:.3s;}
#viva-qnav{text-align:center;flex:1;}
#viva-qnav a{display:inline-block;margin-top:24px;padding:.5em;font-weight:bold;color:#fff;text-decoration:none;background:#5a5;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:all .3s linear;}
#viva-qnav a:hover{background:#1a1;}
#viva-qnav a:first-child{border-radius:.4em 0 0 .4em;margin-right:.1em;}
#viva-qnav a:last-child{border-radius:0 .4em .4em 0;}
#socials{width:7em;}
#socials a {display:inline-block;margin:26px 5px 5px 5px;font-family:viva;text-decoration:none;text-align:center;vertical-align:center;color:#fff;padding:.5em 0; width:2.5em;box-shadow:inset 0 0 7em rgba(255,255,255,.01),0 .1em .2em rgba(0,0,0,.3);border-radius:.3em;}
#socials a:hover, #socials a:active {box-shadow: inset 0 0 7em rgba(255,255,255,.3),0 .1em .2em rgba(0,0,0,.3);}
#vk{background: #646FE5;}
#ok{background: #FF6A00;}
section{margin:2em;}
#note{padding:1em;background:#fec;border-radius:1em;box-shadow:0 0 .2em rgba(0,0,0,.3);text-align:center;outline:2px solid transparent;transition:outline .2s linear;}
#note:hover{outline:2px solid #d11;}
#note a, #promo a{color:#1a1;font-weight:bold;}
#note a:hover, #note a:active, #promo a:hover, #promo a:active{text-decoration:underline !important;}
#promo{padding:1em;background:#ffe;border-radius:1em;border:3px solid #1d1;box-shadow:0 0 .2em rgba(0,0,0,.3);text-align:center;transition:all .3s linear;}
#promo:hover{transform:scale(1.02);border:3px solid #1e1;box-shadow:0 0 .4em rgba(0,0,0,.4);}
#promo a{color:#1a1;font-weight:bold;}
#promo p{font-size:14pt;}
#about{padding:1em;background:#fff;box-shadow:0 0 .4em rgba(0,0,0,.3);border-radius:.5rem;}
#other{display:inline-block;padding:.8em 1.2em;color:#fff;font-weight:bold;text-decoration:none;text-transform:uppercase;text-shadow:0 1px 2px #333;background:#95C122;border-radius:.5em;box-shadow:inset 0 .2em .1em rgba(255,255,255,.2),inset 0 -.2em .1em rgba(0,0,0,.2),0 .2em .2em rgba(0,0,0,.3);transition:all .3s ease;}
#other:hover, #other:active{background:#ad5;color:#333;text-shadow:none;box-shadow:inset 0 .1em .1em rgba(255,255,255,.2),inset 0 -.1em .1em rgba(0,0,0,.2),0 .1em .15em rgba(0,0,0,.3);}
#other:before{content:' + ';}
#facts{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;margin-top:1em;}
.fcard{text-align:center;font-size:13pt;font-weight:bold;color:#555;}
.fcard svg{color:#75AF5F;}
.stats{font-size:1.2;color:#75AF5F;}
#addr{text-align:center;}
.vcard {margin: .3em 0 .3em .3em;padding:0;width:46%;display:inline-block;font-size:12.5pt;text-align:left;vertical-align:top;background:url('./img/bg-map-f.png') no-repeat #fff;background-position:right bottom;box-shadow:0 .08em .25em rgba(0,0,0,.2);border-radius:.5rem;overflow:hidden;}
.ico:before {font-family:viva;color:#1F8729;}
.addr:before {content:'\e801\a0';}
.wt:before {content:'\e802\a0';}
.tel:before {content:'\e800\a0';}
.vcard a{text-decoration:none;}
.vcard p{margin:1em;}
.card-shine{height:5px;background:#f82;transform:scaleX(0);transform-origin:center;transition:transform .4s ease-in-out;}
.vcard:hover .card-shine{transform:scaleX(1);}
#map iframe{border-radius:.5rem;box-shadow:0 0 .4em rgba(0,0,0,.3);}
footer {margin:1.5em 0 0 0;padding:1em;background:#333;}
footer p {margin:.5em 0 0 0;color:#ccc;text-align:center;display:block;}
#top{position:fixed;display:block;bottom:15px;right:15px;font-size:25pt;text-decoration:none;}
@media (max-width: 800px) {
      .vcard{width:90%;}
      section{margin:2em 1em;}
      #socials{width:4em;}
      #socials a{display:block;margin:.8em;}
}