#footer{
    width: 100%; 
    box-sizing: border-box;
    padding:20px;
    
    background: #202327;
    color:#C4C6C5;

    padding-bottom: 100px;
}

#footer .cardContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    width:300px;
    margin:0 auto;
    margin-top:20px;
}


#footer .qrcode{
    
    width:230px;
}

#footer .addressInfo{
    width:230px;
    margin-top:20px;
}

#footer .infoCard{
    width:230px;
    margin-top:20px;
}

#footer h5{
    margin-bottom: 8px;
}

#footer .info{
    width:100%;
    color:#C4C6C5;
}

#footer .link{
    color:white;
    font-weight: bold;
}

#footer hr{
    width: 96%;
    height:1px;

    opacity: 0.4;

    margin:0 auto;
    margin-top: 27px;
    margin-bottom: 25px;

    border-color:#D9D9D9;
}


@media screen and (min-width: 820px) {

    #footer .cardContainer{
        width:800px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
        align-items:flex-start;
    }

    #footer .qrcode{
        width:180px;
    }
}


@media screen and (min-width: 768px) {
    #footer{
        padding-bottom: 20px;
    }
    
}