/* start state */
.mfp-fade .mfp-container {
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out; 
}

/* animate in */
.mfp-fade.mfp-ready .mfp-container {
	opacity: 1;
}

/* animate out */
.mfp-fade.mfp-removing .mfp-container {
	opacity: 0;
}

/* Dark overlay, start state */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.mfp-fade.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.mfp-fade.mfp-removing.mfp-bg {
	opacity: 0;
}

/* hide scrollbars with overflow auto */
.mfp-wrap::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
  background-color: transparent;
}

.mfp-wrap::-webkit-scrollbar{
  width: 0px;
  background-color: transparent;
}

.mfp-wrap::-webkit-scrollbar-thumb{
  background-color: transparent;
}



/* modal close buttons */
.mfp-close:before, .mfp-close:after {
    transform: rotate(-45deg);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    display: block;
    height: 2.3px;
    width: 25px;
    background-color: var(--color-quality-blue);
    transition: all 0.25s ease-out;
}
.mfp-close:after { transform: rotate(-135deg); }
.mfp-close:hover:before,
.mfp-close:hover:after {
    transform: rotate(0deg);
}

.mfp-content .mfp-close:before,
.mfp-content .mfp-close:after{
    background-color: var(--color-flash-white);
}

.mfp-content .mfp-close{
	font-size:0px!important;
    margin-right: 0px!important;
    margin-top: 0px;
    opacity: 1;
    right: -30px;
    top: -30px!important;
}

/* team modals */
.mfp-bg{ 
    background: rgba(0 0 0/ 100%)!important;
    backdrop-filter: blur(40px);
    opacity: .75!important;
}
body.regen-modal-active .mfp-bg{ 
   background: rgba(196, 165, 78, 0.40)!important;
   opacity: 1!important;
}
.team-modal{ 
    max-width: 900px;
    margin: 50px auto;
    padding: 10px 10px 10px 60px;
    border: none;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
}

.admin-bar .team-modal, .admin-bar .modal-content{ 
    margin-top: 70px;
    margin-bottom: 70px;
}

.team-modal .wp-block-columns{ max-width: 100%!important;}
.team-modal h2 + p{ margin-top: 5px; margin-bottom: 20px; }
.team-modal .ftrd img{ height: 700px; object-fit: cover; border-radius: 10px; }
.team-modal .ctc-button .wp-block-button__link .btn-text{ min-width: 90px;}


/* Donate Tissue */
.donate-tissue-modal, .regen-modal { 
    margin: 50px auto;
    max-width: 1400px;
}

.modal-content .wp-block-columns{ max-width: 100%!important; }

.modal-content{ 
    margin: 50px auto;
    padding: 10px 10px 10px 60px !important;
    background-size: 82%!important;
    background-position: left 100%;
    background-repeat: no-repeat;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
}
.modal-content .ftrd,
.modal-content .ftrd img{   
    height: 100%; 
    object-fit: cover; 
    border-radius: 10px;
}

.modal-content .modal-logo-ctc{ 
    padding-top: 15px;
    margin-left: -40px;
}

/* modal forms */
body .wpforms-container .wpforms-field {
    padding: 0px;
}

body .wpforms-container .wpforms-field input,
body .wpforms-container .wpforms-field textarea{
    border-radius: 17px!important;
    border: 1px solid var(--color-quality-blue)!important;
    margin-bottom: -1px;
    outline: none !important;
    box-shadow: none !important;
    height: 50px;
    background: var(--color-white)!important;
    font-family: var(--font-family-heading);
}

.modal-content .wpforms-container .wpforms-field input,
.modal-content .wpforms-container .wpforms-field textarea{
    background: var(--color-flash-white)!important;
}

.modal-content .wpforms-container .wpforms-field textarea{ margin-top: -1px; resize: none; height: 140px;}
.modal-content .main-col .wp-block-columns{ padding-bottom: 60px;}
div.wpforms-container-full button[type=submit]:focus:after{ display: none!important;}

div.wpforms-container-full .wpforms-form label.wpforms-error, div.wpforms-container-full .wpforms-form em.wpforms-error{
    margin-top: 5px!important;
    margin-bottom: 10px!important;
}

/* Newsletter Modal */
.newsletter-modal{ max-width: 900px;}
.newsletter-modal form{ padding-bottom: 100px!important; }

/* regen modal */
.regen-modal .wpforms-submit .btn-text, .regen-modal .wpforms-submit .arrow{
    background: #C4A54E;
}

.regen-modal .wpforms-container .wpforms-field input,
.regen-modal .wpforms-container .wpforms-field textarea{
    border-color: #222!important; 
    background: #FFFBF0!important;
}

.powered-by-txt{ 
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    bottom: 40px;
}

.regen-modal .wp-block-column{ position: relative;}
.wpforms-submit-container br{ display: none;}


/* Thanks Message */
div.wpforms-container-full .wpforms-confirmation-container-full, 
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message){
    background: transparent!important;
    border: none!important;
    padding: 0px!important;
    font-weight: 500;
    font-size: 20px;
}

div.wpforms-container-full .wpforms-confirmation-container-full p, 
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) p{
    color: var(--color-quality-blue) !important;
}

.regen-modal .wpforms-container-full .wpforms-confirmation-container-full p, 
.regen-modal div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) p{
    color: #222 !important;
}

/* contact modal */
.modal-content .subject-choice ul{ background: var(--color-flash-white)!important;}
.modal-content .subject-choice ul li label{ min-width: 135px; }


.modal-content .subject-choice{ display: none!important;}


/* Responsive Styles
------------------------------------------------------- */
@media only screen and (max-width: 1480px) {
    .donate-tissue-modal, .regen-modal { max-width: 90%; }
}

@media only screen and (max-width: 1180px) {
    .modal-content{  padding: 10px 10px 10px 40px!important;}
    .modal-content .modal-logo-ctc{ margin-left: 0px;}
}

@media only screen and (max-width: 991px) {
    .team-modal{ max-width: 90%; padding: 10px 10px 10px 40px;}


    .modal-content{  padding: 10px!important;background-position: left 100%;  background-size: 100% !important;}
    .modal-content .wp-block-columns.main-col{ 
       flex-direction: column-reverse;
    }

    .modal-content .ftrd, .modal-content .ftrd img{ 
        width: 100%;
        height: 500px; 
        object-fit: cover; 
        border-radius: 10px;
    }

    .modal-content.regen-modal .ftrd, .modal-content.regen-modal .ftrd img{ object-position: top; height: 1000px;}

    .newsletter-modal form{ 
        padding-bottom: 20px!important;
    }

    .modal-content .wp-block-column:nth-child(1){ 
        max-width: 95%;
        margin: auto;
        margin-top: 15px;
    }
    .modal-content .modal-logo-ctc{ padding-top: 0px; margin-bottom: 0px !important;}
    .modal-content .main-col .wp-block-columns{ padding-bottom: 20px; }

    .regen-modal .main-col .wp-block-columns .wp-block-column{ max-width: 95%;  margin: auto;}


}

@media only screen and (max-width: 860px) {
    .team-modal .wp-block-columns{ 
        flex-direction: column-reverse;
        gap: 30px
    }

    .team-modal .wp-block-columns .wp-block-column:nth-child(1){
        width: 95%;
        padding-bottom: 30px;
    }

    .team-modal{ padding: 10px;}
    .team-modal .ftrd img{width: 100%; object-fit: cover;  }

    .mfp-content .mfp-close{ right: -10px; top: -40px !important;}
}

@media only screen and (max-width: 680px) {
    .team-modal{ background-size: 200%!important; background-position: bottom;}
    .team-modal .ftrd img{ height: 400px; }
    .team-modal .wp-block-buttons{ margin-top: -30px; gap: 10px}


    .modal-content .modal-logo-ctc img{ width: 230px!important;}
    .modal-content .ftrd, .modal-content .ftrd img{ height: 400px;}
    .modal-content .main-col .wp-block-columns{ margin-top: 0px; gap: 0px; }
    .modal-content .main-col h2{ margin-bottom: 20px!important;}


    div.wpforms-container .wpforms-form .wpforms-field:not(.wpforms-field-phone):not(.wpforms-field-select-style-modern):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-layout):not(.wpforms-field-repeater){
        overflow: visible!important;
    }

    .modal-content.regen-modal .modal-logo-ctc img{ width: 150px!important; }
    .modal-content.regen-modal .ftrd, .modal-content.regen-modal .ftrd img{  height: 440px;}


    .modal-content .subject-choice ul{ gap: 0px!important;}
    .modal-content .subject-choice ul li label{ min-width: 95px;}
}