*,::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(1 25 58 / 56%);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:.4;filter:grayscale(1)}
#background video{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 .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-right:1px dashed #bbb}
#card .content .top .single img{filter: invert(0%) sepia(18%) saturate(408%) hue-rotate(238deg) brightness(90%) contrast(81%);height:37px;transition:all .3s}
#card .content .top .single h1{color:#181818;margin:0;padding:0;transition:all .3s;font-size:14px;margin-left:16px;font-weight:600}
#card .content .top .single:nth-child(2){border-top:1px dashed #bbb}
#card .content .top .single:last-child{border-top:1px dashed #bbb}
#card .content .top .single:hover{opacity:.89;transform:scale(.89);transition:all .3s;background:#01193a;border:unset}
#card .content .top .single:hover img{filter:invert(14%) sepia(83%) saturate(3947%) hue-rotate(348deg) brightness(104%) contrast(97%)}
#card .content .top .single:hover h1{color:#fff;transition:all .3s}
#card .content .mid{display:flex;flex-wrap:wrap;width:100%;flex:1 0 45%}
#card .content .mid .single{display:flex;padding:19px;flex:1 0 48%;width:100%;align-items:center;justify-content:flex-start;transition:all .3s;background:#fff}
#card .content .mid .single img{filter: invert(0%) sepia(18%) saturate(408%) hue-rotate(238deg) brightness(90%) contrast(81%);height:37px;transition:all .3s}
#card .content .mid .single h1{color:#181818;margin:0;padding:0;font-size:14px;margin-left:16px;font-weight:600;transition:all .3s}
#card .content .mid .single:nth-child(1){justify-content: center;}

#card .content .mid .single:nth-child(2){border-left:1px dashed #bbb;justify-content: center;}

#card .content .mid .single:nth-child(3){border-top:1px dashed #bbb}

#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:#01193a;border:unset}
#card .content .mid .single:hover img{filter:invert(14%) sepia(83%) saturate(3947%) hue-rotate(348deg) brightness(104%) contrast(97%)}
#card .content .mid .single:hover h1{color:#fff;transition:all .3s}
#card .content .bank{display:flex;flex-wrap:wrap;width:100%;flex:1 0 45%;background:#fff;padding:20px 37px;border-top:1px dashed #bbb;transition:all .3s;cursor:pointer;border-bottom:1px dashed #bbb}
#card .content .bank img{filter: invert(0%) sepia(18%) saturate(408%) hue-rotate(238deg) brightness(90%) contrast(81%);height:50px;transition:all .3s;border-top:1px}
#card .content .bank .text{display:flex;flex-direction:column}
#card .content .bank .text h1{color:#181818;margin:0;padding:0;font-size:17px;margin-left:16px;font-weight:400;transition:all .3s}
#card .content .bank .text p{color:#181818;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:#01193a}
#card .content .bank:hover img{filter:invert(14%) sepia(83%) saturate(3947%) hue-rotate(348deg) brightness(104%) contrast(97%)}
#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;border-top: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:#01193a;border-right:unset}
#card .content .social .single:hover img{filter:invert(14%) sepia(83%) saturate(3947%) hue-rotate(348deg) brightness(104%) contrast(97%)}
@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)}
}