.card {
    border-radius: 12px;
    background: rgba(220, 220, 220, 0.1); /*#f7f7f7;*/
    overflow: hidden;
}

#contact, 
#socialmedia,
#skills,
#qr {
    background:#ffffff;
}

#contact a, 
#socialmedia a,
#skills a,
#qr a {
    color:#707070 !important;
    text-decoration: none;
}

#contact strong, #contact i.fa,
#socialmedia strong, #socialmedia i.fa,
#skills strong, #skills i.fa {
    font-size: 1.15rem;
}

#contact p,
#socialmedia p,
#skills p {
    font-size: 1.2rem;
}

#socialmedia i.social-icon {
    font-size: 1.5rem;
}

#skills .row.row i.fa {
    font-size: 0.95rem;
}
#skills .row.row p {
    font-size: 1rem;
}

.b-r {
    border-right: 1px solid rgba(133, 133, 133, 0.25) !important;
}

.card-title{
    font-size: 1.75rem !important;
    font-weight: 700;
}

.card-text{
    font-size: 1.25rem !important;
}

.profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: -100px auto 15px auto;
    border: 4px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.cover-image {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

#link {
    color: rgb(84, 84, 84);
    text-decoration: none;
}

.level-text {
    color: #999999;
    font-size: 0.75rem !important;
    font-weight: 500;
    padding-top: 6px;
}

.xti-progress {
    width:100%; 
    height:0.45rem; 
    margin: 0 auto;
    background: #cccccc !important;
}
.progress-color {
    background-color: #ce2c1d !important;
}

#link:hover {
    color: blue;
    text-decoration: none;
}


@media (max-width: 600px) {
    .b-r {
        border-right: none !important;
    }
}

@media (min-width: 600px) {
    .b-r {
        border-right: none !important;
    }
}

/*@media (min-width: 480px) {
    .b-r {
        border-right: none !important;
    }
}*/

@media (min-width: 768px){
    .b-r {
        border-right: 1px solid rgba(133, 133, 133, 0.25) !important;
    }
}