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


body {font-size:16px;font-family: "Century Gothic", Arial;line-height:150%;color:#4F4F4F;}
html {-webkit-text-size-adjust: 100%; }
#mcard-container {width: 92%; border: 1px #ccc solid;border-radius: 12px;-webkit-box-shadow: 3px 3px 5px 0px rgba(137, 139, 137, 0.75);
    -moz-box-shadow:3px 3px 5px 0px rgba(137, 139, 137, 0.75);
    box-shadow:3px 3px 5px 0px rgba(137, 139, 137, 0.75);
    background: rgb(254, 255, 247);
    background: -moz-linear-gradient(120deg, rgb(255, 255, 255) 33%, rgb(204, 204, 204) 100%);
    background: -webkit-linear-gradient(120deg, rgb(255, 255, 255) 33%, rgb(204, 204, 204) 100%);
    background: -o-linear-gradient(120deg, rgb(255, 255, 255) 33%, rgb(204, 204, 204) 100%);
    background: -ms-linear-gradient(120deg, rgb(255, 255, 255) 33%, rgb(204, 204, 204) 100%);
    background: linear-gradient(210deg, rgb(255, 255, 255) 33%, rgb(204, 204, 204) 100%);
    padding: 3%; overflow: hidden;}
.mcard-menu {float: left;width:10%;}
#mcard-logo{background-size:auto 80px;background-image:url(/images/mobile/v3/logoMbLg.png);background-repeat:no-repeat;background-position:94% top;width: 96%;float: right;height: 80px;}
#mcard-member {width: 96%;padding: 2%; text-align: left;margin-bottom:3%;float: left;}
.title {font-size: 1.2em; margin-bottom: 5%;}
#mcard-member .member-number span:after {content:"Member Number:";font-weight: bold;margin-right: 10px;}
#mcard-member .category span:after {content:"Category:";font-weight: bold;margin-right: 10px;}
#mcard-member .join-date span:after {content:"Member Since:";font-weight: bold;margin-right: 10px;}
.update-details a {font-size:.6em; background:#ccc; text-decoration: none; border-radius: 4px; display: block;border:#555;float:right;padding:1%; line-height: 140%;color:#777;margin-top: 3%; float: right; clear: both;}
.update-details a:hover {color: #ccc; background:#fff;}
#mcard-barcode-container {background: #fff; width:88%; padding: 4%; margin: 0 auto;border-radius: 12px; z-index: 300; overflow: hidden;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(137, 139, 137, 0.75);
    -moz-box-shadow:3px 3px 5px 0px rgba(137, 139, 137, 0.75);
    box-shadow:3px 3px 5px 0px rgba(137, 139, 137, 0.75);}
.qrcode {float: right; width: 55%;text-align: right; }
.profile-pic {float: left;width: 45%;}
.profile-pic-img { margin-top:10px; }

#mcard-footer-container {width: 92%;border-bottom-left-radius: 12px;border-bottom-right-radius:12px; overflow:hidden;padding: 3%; text-align: center;}

.perTitle {font-size: 1.3em; margin-bottom: 3%;}
.clubNameTitle {font-size: .6em; color:#6F6F6F; text-transform: uppercase;}


@media (min-width : 550px) and (max-width : 768px) {
    #mcard-logo {margin-bottom: 2%;float: left; width:54%;background: url(/images/mobile/v3/logoMbLg.png) no-repeat top left;background-size:auto 80px; }
    .title {margin-bottom: 6%; font-size: 1.4em;}
    #mcard-member {margin-bottom: 5%; width: 59%; float: left;}
    #mcard-barcode-container {width: 32%; float: right; margin-top: -21%; padding: 2%;}
    .qrcode {width: 100%; text-align: center;}
    .profile-pic {margin: 0 0 8% 0;width: 100%; text-align: center;}
    #mcard-container {
        background: rgb(255, 255, 255);
        background: -moz-linear-gradient(30deg, rgb(255, 255, 255) 34%, rgb(225, 223, 214) 76%);
        background: -webkit-linear-gradient(30deg, rgb(255, 255, 255) 34%, rgb(225, 223, 214) 76%);
        background: -o-linear-gradient(30deg, rgb(255, 255, 255) 34%, rgb(225, 223, 214) 76%);
        background: -ms-linear-gradient(30deg, rgb(255, 255, 255) 34%, rgb(225, 223, 214) 76%);
        background: linear-gradient(120deg, rgb(255, 255, 255) 34%, rgb(225, 223, 214) 76%);
    }
}

@media (max-width: 400px) {
    .profile-pic, .qrcode {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
    }
}