*,::before,::after{box-sizing:border-box;outline:unset;}
html,body{min-height:100%;height:100%;font-family: 'Roboto', sans-serif;display: flex;align-items: flex-start;justify-content: center;background: #706f6f;background: rgb(74,74,74);/* background: linear-gradient(114deg, rgba(74,74,74,1) 0%, rgb(112 111 111) 100%); */width: 100%;}
a{text-decoration:none;color:unset}

.container{max-width:1200px;width:100%;display:block;margin:0 auto;}

#background{position: absolute;left: 0;top: 0;right: 0;border: 0;width: 100%;height: 100vh;z-index: -1;}
#background img{width: 100%;height: 100%;object-fit: cover;filter: blur(8px);}

#card{/* background: rgb(246 245 246 / 81%); *//* box-shadow: 0 0 9px 7px rgb(0 0 0 / 36%); */max-width: 500px;padding: 17px;}
#card .logo{width: 100%;display: flex;align-items: center;justify-content: center;}
#card .logo img{width: 76%;}
#card .info{text-align: center;padding: 15px 0;}
#card .info h1{margin: 0;padding: 0 0 15px 0;font-size: 25px;color: hsl(0deg 0% 100%);}
#card .info p{padding: 0;margin: 0;font-size: 9px;color: #cdcdcd;}
#card .shortcut{width: 100%;display: flex;flex-wrap: wrap;margin-top: 18px;}
#card .shortcut a{flex: 1;display: flex;align-items: center;justify-content: center;padding: 20px;background: #6f6f6f;color: #fff;transition: all .3s;border-radius: 6px;box-shadow: -1px 2px 4px 2px rgb(47 47 47 / 31%);}
#card .shortcut a:nth-child(2){margin:0 18px;}
#card .shortcut a:hover{opacity: 0.7;transition: all .3s;padding: 0 30px;}
#card .shortcut a i{font-size: 19px;transition: all .3s;}
#card .shortcut a:hover i{font-size: 30px;transition: all .3s;}
#card .webCat{display: flex;flex-wrap: wrap;/* margin-bottom: 18px; */}
#card .webCat a{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 16px;background: #6f6f6f;color: #fff;transition: all .3s;border-radius: 5px;box-shadow: -1px 2px 4px 2px rgb(47 47 47 / 31%);}
#card .webCat a:last-child{margin-left: 18px;background: #fff;color: #4a4a4a;animation: shake 1.5s;animation-iteration-count: infinite;}
#card .webCat a:hover{opacity: 0.7;transition: all .3s;padding: 10px;}
#card .webCat a i{font-size: 19px;transition: all .3s;}
#card .webCat a:hover i{font-size: 34px;transition: all .3s;}
#card .webCat a p{padding: 0;margin: 0;font-size: 12px;margin-top: 10px;transition: all .3s;}
#card .webCat a:hover p{font-size: 14px;transition: all .3s;}
#card .location{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;/* padding: 20px; */margin-bottom: 18px;/* background: #cc8e41; */color: #fff;transition: all .3s;}
#card .location .box{width: 100%;height: 75px;margin-top: 18px;position: relative;border-radius: 8px;}
#card .location .box img{width: 100%;height: 100%;object-fit: cover;filter: grayscale(1);border-radius: 8px;}
#card .location .box .text{position: absolute;top: 18px;left: 18px;}
#card .location .box .text h1{margin: 0;padding: 0;font-size: 18px;color: #4a4a4a;}
#card .location .box .text p{color: #4a4a4a;margin: 0;padding: 0;font-size: 13px;}
#card .inviva{width: 100%;display: flex;align-items: center;justify-content: flex-end;flex: 1;opacity: .3;}
#card .inviva img{width: 52px;}
#card .bottomBox{display: flex;flex-wrap: wrap;height: 50px;}
#card .social{display: flex;justify-content: flex-start;padding: 0;flex: 2;}
#card .social a{/* flex: 1; */align-items: center;justify-content: center;display: flex;color: #ffffff;padding: 0 15px;}
#card .social a:hover{opacity: .7;transition: all .3s;}
#card .social a i{font-size: 17px;}
#card .social a:nth-child(2) i{font-size: 20px;}
#card .social a:hover i{font-size: 30px;transition: all .3s;}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }