*,::after,::before{box-sizing:border-box;outline:unset}
body,html{min-height:100%;height:100%;font-family:Roboto,sans-serif;display:flex;align-items:flex-start;justify-content:center;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::after{content:'';position:absolute;bottom:0;right:0;left:0;height:100%;background: rgb(215 215 215);z-index:2;opacity:.5}
#background::before{content:'';position:absolute;bottom:0;right:0;left:0;height:100%;width:100%;background:url(slider-bg.jpg);background-size:cover;opacity:.7}
#background video{width:100%;height:100%;object-fit:cover;z-index:-1}
#background img{width:100%;height:100%;object-fit:cover;z-index:-1}
#card{max-width:500px;padding:17px}
#card .logo{width:100%;display:flex;align-items:center;justify-content:center}
#card .logo img{height:70px;margin-bottom:30px}
#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:16px;color:rgba(255,255,255,.69)}
#card .content{display:flex;flex-wrap:wrap}
#card .content .title{width:100%}
#card .content .title h1{margin:0;padding:0;font-size:20px;color:#fff;text-align:center;width:100%;margin-bottom:10px}
#card .content .top{display:flex;flex-wrap:wrap;width:100%;flex:1 0 45%}
#card .content .top .single{display:flex;padding:19px;flex:1 0 100%;width:100%;align-items:center;justify-content:flex-start;transition:all .3s;background:#fff;border-bottom: 1px dashed #bbb;}
#card .content .top .single img{filter:invert(19%) sepia(27%) saturate(3941%) hue-rotate(187deg) brightness(100%) contrast(95%);height:37px;transition:all .3s}
#card .content .top .single h1{color:#0a467a;margin:0;padding:0;font-size:17px;margin-left:16px;font-weight:400;transition:all .3s}
#card .content .top .single:last-child{border-bottom:1px dashed #bbb}
#card .content .top .single:hover{opacity:.89;transform:scale(.89);transition:all .3s;background:#5f358f}
#card .content .top .single:hover img{filter:invert(58%) sepia(58%) saturate(498%) hue-rotate(69deg) brightness(94%) contrast(89%)}
#card .content .top .single:hover h1{color:#fff;transition:all .3s}
#card .content .mid{display:flex;flex-wrap:wrap;width:100%;flex: 1 0 100%;}
#card .content .mid .single{display:flex;padding:19px;flex:1 0 20%;width:100%;align-items:center;justify-content:center;transition:all .3s;background:#fff;border-right:1px dashed #bbb}
#card .content .mid .single img{filter:invert(19%) sepia(27%) saturate(3941%) hue-rotate(187deg) brightness(100%) contrast(95%);height:37px;transition:all .3s}
#card .content .mid .single h1{color:#0a467a;margin:0;padding:0;font-size:17px;margin-left:16px;font-weight:400;transition:all .3s}
#card .content .mid .single:nth-child(4){border-right:unset}
#card .content .mid .single:last-child{/* border-top:1px dashed #bbb; */}
#card .content .mid .single:hover{opacity:.89;transform:scale(.89);transition:all .3s;background:#4484c7}
#card .content .mid .single:hover img{filter:invert(58%) sepia(58%) saturate(498%) hue-rotate(69deg) brightness(94%) contrast(89%)}
#card .content .mid .single:hover h1{color:#fff;transition:all .3s}
#card .content .bank{display:flex;flex-wrap:wrap;width:100%;flex:1 0 100%;background:#fff;padding:19px;border-top:1px dashed #bbb;transition:all .3s;cursor:pointer;border-bottom:1px dashed #bbb}
#card .content .bank img{filter:invert(19%) sepia(27%) saturate(3941%) hue-rotate(187deg) brightness(100%) contrast(95%);height:50px;transition:all .3s;border-top:1px}
#card .content .bank .text{display:flex;flex-direction:column}
#card .content .bank .text h1{color:#0a467a;margin:0;padding:0;font-size:17px;margin-left:16px;font-weight:400;transition:all .3s}
#card .content .bank .text p{color:#0a467a;margin:0;padding:0;font-size:13px;margin-left:16px;font-weight:400;transition:all .3s}
#card .content .bank:hover{opacity:.89;transform:scale(.89);transition:all .3s;background:#1a85b9}
#card .content .bank:hover img{filter:invert(58%) sepia(58%) saturate(498%) hue-rotate(69deg) brightness(94%) contrast(89%)}
#card .content .bank:hover h1{color:#fff;transition:all .3s}
#card .content .bank:hover p{color:#fff;transition:all .3s}
#card .content .social{display:flex;flex-wrap:wrap;width:100%}
#card .content .social .single{display:flex;padding:19px;flex:1 0 19%;width:100%;align-items:center;justify-content:center;transition:all .3s;background:#fff;border-right:1px dashed #bbb}
#card .content .social .single:last-child{border-right:unset}
#card .content .social .single img{filter:invert(34%) sepia(6%) saturate(1291%) hue-rotate(141deg) brightness(99%) contrast(93%);height:24px;transition:all .3s;border-top:1px}
#card .content .social .single:hover{opacity:.89;transform:scale(.89);transition:all .3s;background:#0a467a;border-right:unset}
#card .content .social .single:hover img{filter:invert(58%) sepia(58%) saturate(498%) hue-rotate(69deg) brightness(94%) contrast(89%)}
@keyframes shake{
0%{transform:translate(1px,1px) rotate(0)}
10%{transform:translate(-1px,-2px) rotate(-1deg)}
20%{transform:translate(-3px,0) rotate(1deg)}
30%{transform:translate(3px,2px) rotate(0)}
40%{transform:translate(1px,-1px) rotate(1deg)}
50%{transform:translate(-1px,2px) rotate(-1deg)}
60%{transform:translate(-3px,1px) rotate(0)}
70%{transform:translate(3px,1px) rotate(-1deg)}
80%{transform:translate(-1px,-1px) rotate(1deg)}
90%{transform:translate(1px,2px) rotate(0)}
100%{transform:translate(1px,-2px) rotate(-1deg)}
}