/*
Theme Name: Bridge
Theme URI: http://bridgelanding.qodeinteractive.com/
Description: Creative Multipurpose WordPress Theme
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, threaded-comments, translation-ready
Author: Qode Interactive
Author URI: http://qodethemes.com/
Text Domain: bridge
Version: 18.0.7
License: GNU General Public License
License URI: licence/GPL.txt#membership-card-wrapper .close-x

CSS changes can be made in files in the /css/ folder. This is a placeholder file required by WordPress, so do not delete it.

*/
/*  ============================================================ ==============================
 *  < Membership Cards:
 *  ------------------------------------------------------------ [=membership-card] */
#membership-card-wrapper .fancybox-inner{
    overflow: visible !important;
    max-width: 745px;
}
#membership-card-wrapper .fancybox-outer{
    float: left;
    width: 100%;
}
#membership-card-wrapper .fancybox-skin{
    padding: 0 !important;
}
#membership-card-container{
    display: none;
    max-width: 745px;
    width: 100%;
}
#membership-card-container .form-control, #membership-card-verify-form .form-control{
    box-sizing: border-box;
    padding: 7px 3px !important;
    width: 100% !important;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}
.membership-card-header-container{
    background-color: #43536A;
    height: 80px;
}
#membership-card-wrapper .close-x {
    position: absolute;
    right: -40px;
    top: -15px;
    font-size:13px;
    color: #ffffff;
    background-color: #ea032d;
    border-radius: 100px;
    width: 26px;
    height: 26px;
    text-align: center;
    font-weight: bold;
    line-height: 26px;
    z-index:1;
}
.right-container.active {
    background-image: url("/static-content/themes/bridge-2/images/5.gif");
    background-repeat: no-repeat;
    background-position: center;
}
/*.generate-btn {
    background-image: url("/static-content/themes/bridge-2/images/5.gif");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 8%;
}
.generate-btn.hideGif{
    background-image: none;
}*/

.membership-card-body-container.col-lg-12.clean-col {
    background-color: #fff;
    padding: 30px 15px!important;
}
.membership-card-header-container .logo{
    padding: 0 15px;
    float: left;
}
.membership-card-header-container .title {
    color: #ffffff;
    float: left;
    max-width: 265px;
    line-height: 15px;
    margin-top: 15px;
    width: auto;
    height: auto;
}
.membership-card-header-container .title .text-1{
    font-size: 18px;
    font-weight: 700;
}
.membership-card-header-container .title .text-2{
    font-size: 12px;
    font-weight: 600;
}

#membership-card-wrapper input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #43536A;
}
#membership-card-wrapper input::-moz-placeholder { /* Firefox 19+ */
  color: #43536A;
}
#membership-card-wrapper input:-ms-input-placeholder { /* IE 10+ */
  color: #43536A;
}
#membership-card-wrapper input:-moz-placeholder { /* Firefox 18- */
  color: #43536A;
}
#membership-card-wrapper button {
    background-color: #CC133D;
    font-size: 14px;
    color: #ffffff;
    border: none;
    line-height: 48px;
    font-weight: 400;
    letter-spacing: 0.5px; 
    
}
#membership-card-form .first-col,#membership-card-verify-form .first-col {
    padding-right: 0 !important;
    padding-left: 0 !important;

}
#membership-card-form .last-col,#membership-card-verify-form .last-col {
    padding-left: 15px;
    padding-right: 0px;
}
#membership-card-wrapper #capture{
    float: left;
    width: 100%;
    position: relative;
    z-index: -1;
}

#membership-card-form .ppa-membership-card-or {
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    font-size: 16px;
    width: 100%;
    text-align: center;
}

#barcode-container {
    margin-top: 5px;
}
#barcode-container #barcode {
    width: 100%;
    height: 40px;
}
#membership-card-wrapper #append-image{
    float: left;
    width: 100%;
}
#membership-card-wrapper #append-image canvas{
    max-width: 328px;
    max-height: 205px;
}

#membership-card-wrapper #append-image.afterGen {
    position: absolute;
}
#membership-card-wrapper #capture #image-container .left-details {
    width: 33.33%;
    float: left;
    height: 205px;
}
#membership-card-wrapper #capture #image-container .left-details img{
    width: 100%;
    float: left;
}
#membership-card-wrapper #capture #image-container .right-details {
    width: 56%;
    float: right;
    color: #fff;
   /* background:#f3fa23; */
    font-weight: bold;
    position: relative;
    z-index: 1;
    line-height: 2.1;
}
#membership-card-wrapper #capture #image-container .footer{
    width: 100%;
    float: left;
}
#membership-card-wrapper #capture #image-container .footer img{
    width: 100%;
    float: left;
}
#membership-card-wrapper #capture .details-container{ }
#membership-card-wrapper #capture .details-container .exp-date {
    font-weight: bold;
    font-size: 10px;
    padding-top: 5px;
}
#membership-card-wrapper #capture .details-container .fullnames{ 
    font-size: 12px;
    margin-top: 5px;
}
#membership-card-wrapper #capture .details-container .membership-no{font-size: 10px; }
#membership-card-wrapper #capture .details-container .emergency-contact{font-size: 8px;margin-top: 10px; }
#membership-card-wrapper #capture .details-container .emergency-contact-detals{font-size: 11px;}

#membership-card-wrapper #image-container {
    position: relative;
    height: 205px;
}
#membership-card-wrapper #empty-card {
    position: absolute;
    width: 100%;
    height: 205px;
}
#message-container{
    display: none;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.download-link{
    display: none;
    margin-top: 15px;
}

.download-link a {
    background-color: #A4CD39;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
    text-transform: uppercase;
}
#membership-card-wrapper .error {
   border:1px solid #CC133D;
}
#membership-card-wrapper .generate-btn{
    cursor: pointer;
}

input#verify_ppa_number, input#verify_id_number {
    box-sizing: border-box !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif !important;
    margin-bottom: 15px !important;
    
}
span.or-message {
    display: block !important;
    text-align: center;
    margin-bottom: 13px;
}
form#membership-card-verify-form .col-lg-12 {
    padding: 0;
}

@media all and (max-width: 1199px) {
	
	.membership-card-header-container .title {
		margin-top: 0px !important;
	}

	#membership-card-wrapper .close-x {
		right: -10px !important;
	}

	#membership-card-form .ppa-membership-card-or {
		padding-top: 0px;
	}

	#membership-card-wrapper #membership-card-form .last-col {
		padding-left: 0px !important;
	}

    #membership-card-container .generate-btn,
    #membership-card-verify-container .generate-btn {
		width: 100%;
    }
    
    #membership-card-gen-block {
        visibility: hidden;
    }

    #membership-card-gen-block.show-block {
        visibility: visible;
        min-height: 220px;
        padding-top: 10px;
    }

    #membership-card-wrapper #capture .details-container .exp-date {
       letter-spacing: -0.2px;
    }
    
    #membership-card-wrapper #capture .details-container .fullnames {
        font-size: 12px !important; 
        letter-spacing: -0.2px !important;
    }
    /* #membership-card-wrapper #capture .details-container .membership-no{font-size: 10px; }
    #membership-card-wrapper #capture .details-container .emergency-contact{font-size: 8px;margin-top: 10px; }
    #membership-card-wrapper #capture .details-container .emergency-contact-detals{font-size: 11px;} */

	/* #append-image,
	#capture {
		visibility: hidden;
	} */
}

@media all and (max-width: 460px) {

	.membership-card-header-container .title {
		max-width: 155px !important;
    }
    
    #membership-card-gen-block.show-block {
        padding-left: 0px;
        padding-right: 0px;        
        margin-left: -2px;
        margin-right: -2px;
    }

    .membership-card-header-container .title .text-2 {
		display: none;
	}
}

@media all and (max-width: 430px) {

	.membership-card-header-container .title {
		max-width: 200px !important;
	}

	.membership-card-header-container .title .text-1 {
		font-size: 16px !important;
	}	
}

@media all and (max-width: 360px) {    

    .membership-card-header-container .title {
		max-width: 150px !important;
	}

    .membership-card-header-container .title .text-1 {
        font-size: 14px !important;
		letter-spacing: -0.2px;
    }    
}

@media all and (max-width: 340px) {

    #membership-card-gen-block.show-block {
        margin-left: -10px;
        margin-right: -10px;
    }

    #membership-card-wrapper #capture .details-container .exp-date,
    #membership-card-wrapper #capture .details-container .fullnames {
        line-height: 16px;
        letter-spacing: -0.2px;
    }

    #membership-card-wrapper #capture .details-container .membership-no {
        line-height: 14px;
    }

    #membership-card-wrapper #capture .details-container .emergency-contact {
        margin-top: 5px !important;
    }
}