@charset "UTF-8";

    *, *::before, *::after {box-sizing: border-box; } 
    html {} 
    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {display: block; } 
    body {margin: 0; padding:0; font-family: 'Open Sans', sans-serif; /*font-size: 1rem;*/ font-size: 14px; font-weight: 400; line-height: 1.5; color: #4A5073; text-align: left; /*background-color: #f8f9fe;*/ background-color: #fff; } 
    [tabindex="-1"]:focus:not(:focus-visible) {outline: 0 !important; } 
    hr {box-sizing: content-box; height: 0; overflow: visible; } 
    h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 0.5rem; } 
    p {margin-top: 0; margin-bottom: 1rem; }
    .main-content { width: 100%; }
    .wrapper { width: 500px; text-align: center; margin:0 auto; 
        /*padding:100px 10px;*/ 
    }
    h2 { font-size: 38px; text-transform: uppercase; font-weight: 800; }
    .banner img { width: 60%; }
    .green-text { color:#80b03f; }
    .red-text { color:#df1400; }
    .qr-profile-row { display: flex; justify-content: center; align-items: center; }
    /*.qr-code img { width: 80px; height: auto; }*/
    .mr-15 { margin-right:15px !important; }
    .mb-15 { margin-bottom: 15px !important; }
    .profile-pic {  }
    .profile-pic img { border-radius: 100%; width: 200px; height: 200px; padding:2px; }
    .green-brdr {border:2px solid #80b03f;}
    .red-brdr {border:2px solid #f44336;}
    .pos-rel { position: relative; }
    .mark { position: absolute; top:30px; right:0; }
    .mark img { width: 35px !important; height: 35px !important; }
    .pc-list { padding:15px 0; }
    .pc-list ul { list-style: none !important; margin:0; padding:0; }
    .pc-list ul li {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 16px; }
    .pc-list ul li span { font-weight: bold; width: 50%; text-align: left; padding: 0 15px 0 22%;}
    .pc-list ul li strong { font-weight: bold; width: 50%; text-align: left; padding:0 15px; }

@media (max-width: 600px) {
    .wrapper { width: 100%; }
    h2 { font-size: 28px;}
    /*.qr-code img { width: 60px;}*/
    .banner img { width: 70%; }
    .profile-pic img { width: 200px; height: 200px;}    
    .mark { top:35px; }
    .mark img { width: 30px !important; height: 30px !important; }
    .mr-sm-10 { margin-right:10px !important; }
    .mb-sm-10 { margin-bottom: 10px !important; }
    .pc-list ul li { font-size: 14px; list-style: none;}
    .pc-list ul li span, .pc-list ul li strong { padding:0 10px; }
}

@media (max-width: 400px) { 
    .mark {top: 25px; }
    .profile-pic img { width: 175px; height: 175px;}
}