@charset "UTF-8";
/* CSS Document */

.card{
    box-shadow: 0 25px 45px rgba(0,0,0,0.30), 0 15px 15px rgba(0,0,0,0.22);
    max-width: 800px;
    margin: auto; 
    position: relative;
    display:flex;
}

.black_container{
   height: inherit;
   background: #333;   
/*    display: inline-block; */
   vertical-align: top;
   padding: 3%; 
   font-family: 'Nunito', sans-serif;
}

.content_container{
    /* display: inline-block; */
    padding: 3%;
    flex-grow:100;
    /* position: absolute;
    top:0;
    bottom: 0; */
}

.small_bar{
    padding:3px;
    width: 30px;
    margin: 0 auto; 
    background: #e4e4e4;
    margin-top: 35px; 
}

.name{
    color:#fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin:30px auto 5px auto;
    text-align: center;
    font-weight: 800;
}

.designation{
    font-size: 10px;
    margin: 0 auto;
}

.qrcode_container{
/*     float: right; */
}

.qr_container{
    overflow: auto;
    width: 100%;
}

.qr_text{
    display: inline-block;
    list-style-type: none;
}

.qr_text>li{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #9a9a9a;
}

.bars{
    display: inline-block;
    position: relative;
    top: 10px;
}

.bars .small_bar{
    width: 15px;
    background: #777;
}

.bar{
    position: absolute;
    top: -80px;
}

.qr_code{
    display: inline-block;
    height: inherit;
    border: 1px solid #e4e4e4;
    padding: 5px;
}

.button{    
    width: 150px;
    letter-spacing: 1;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background: #333;
    padding: 5px 10px;
}