/* 
CREATED BY: PETER MARTIN;
FOR: JOIN AND RENEW PAGES, SALESFORCE, LIBERAL DEMOCRATS;
LIVE FOR: JOIN PAGES ONLY;
DATE CREATED: JANUARY 26 2016;
LAST UPDATED: 1141
UPDATED FOR NEW STYLE: April 2017 - by Greg Foster

THIS FILE RESKINS THE JOIN AND RENEW PAGES */

/*  =========== THE BASICS=========== */
    * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
    .clearfix, .clearfix:after {content: ""; display: block; clear: both;}
    html, body, button, input, select, textarea, {font-family: 'Open Sans', Arial, sans-serif; color: #151721;}
    strong, .strong, .breadcrumbs .active, b {font-family: 'Open Sans', Arial, sans-serif;}
    h1, h2, h3, h4, h5, h6 {font-family: 'Open Sans', Arial, sans-serif; font-weight: 900; color: #151721;}
    p {margin: 0;}
    h1 {}
    h2 {}
    h3 {}
    a {color: #FAA61A; text-decoration: none; outline: none;}
    a:hover {color: #FBBE58; text-decoration: underline;}
    hr {display: block; height: 1px; border: 0; border-top: 1px solid #eeeeee; margin: 1em 0; padding: 0;}
    img {max-width: 100%; height: auto; vertical-align: middle; border: none;}
    body {background: #ffffff; margin: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', Arial, sans-serif;}
    .main-container {background-image: url(https://c.eu8.visual.force.com/resource/1534969403000/federalbg); background-color: transparent; background-size: cover; background-repeat: no-repeat;}
    .width-container {background-color: transparent; padding: 50px 0 20px 0;}
    #content {width: 50%; margin-left: auto; margin-right: auto; max-width: 1440px; background-color: transparent;}
    @media screen and (min-width: 768px) and (max-width: 1024px) {
    #content {width: 80%; margin-left: auto; margin-right: auto; max-width: 1440px; background-color: transparent;}
    }
    @media screen and (max-width: 767px) {
        #content {width: 100%; margin-left: auto; margin-right: auto; max-width: 1440px; background-color: transparent;}
        .main-container {background-size: contain;}
        .width-container {padding: 120px 0 20px 0;}
    }
    .content-inner {padding: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #fff; border: 3px solid #fff;}
	/* Edited out as background images removed from this version, but preserved for future reference - GF
    Pulled in by utm_content to customise the page
    federal = undefined/default.
    .federal {background-image: url('federal.jpg'); background-size: 1200px; background-repeat: no-repeat;} 
    .scotland {background-image: url('scotland.jpg'); background-size: 1200px; background-repeat: no-repeat;} .wales {background-image: url(https://placeholdit.imgix.net/~text?txtsize=850&txt=Wales&w=1200&h=1000); background-size: 1200px; background-repeat: no-repeat;}
    .europe {background-image: url(https://placeholdit.imgix.net/~text?txtsize=850&txt=Europe&w=1200&h=1000); background-size: 1200px; background-repeat: no-repeat;}
    end utm_content values.	*/
    #content p {margin: 0 0 5px;}
    #content td {vertical-align: text-top}
    h1, #content .row h1, #content .intro-text h1 {font-size: 2em; margin: 0; font-weight: bold; color: #151721;}
    #content .intro-text h1#white-h1 {color: #151721;}
    h2, #content .row h2, #content .intro-text h2 {font-size: 1.5em;}
    h3, #content .row h3 {font-size: 1.17em;}
    h4, #content .row h4 {font-size: 1.2em; text-transform: none; margin: 0% 1%;}
    p,#content .row p {margin: 0; font-size: 1em;}
    .row {background-color: #ffffff}
	h1.header {padding-top: 20px;}
	.header {margin-top: 10px; margin-bottom: 10px;}
	.form-wrap {margin-top: 20px;}
	.terms-row {margin-top: 10px; margin-bottom: 10px;}
	input:required:valid {border: 3px solid #21aa50;}
	input:focus:required:valid {border: 3px solid #21aa50;}
	textarea:required:valid {border: 3px solid #21aa50;}
	textarea:focus:required:valid {border: 3px solid #21aa50;}
	/*  =========== END THE BASICS=========== */
/*  =========== LABELS=========== */

    .label-block {display: block !important;}
    .label-inline {display: inline-block !important;}
    .label-terms {font-size: 1em;}
    #country-label {font-size: 0.9em;}
/*  =========== END LABELS=========== */
/*  =========== TOOLTIPS=========== */

    span.info-query {height: 15px; width: 15px; background-color: #FAA61A; border-radius: 25%; text-align: center; display: inline-block; font-size: 14px; line-height: 14px; margin-left: 0 0 0 10px;}
    span.info-query-answer {display: none; border: 1px solid #151721; background-color: #ffffff; margin: 0 0 0 5px; padding: 2px 8px; line-height: 15px;}
    span.info-query:hover + span.info-query-answer {display: inline-block;}
/*  =========== END TOOLTIPS=========== */

/*  =========== PROGRESS BAR=========== */

    div.progress-report {background-color: #FAA61A; margin-top: 10px; margin-bottom: 10px; padding-bottom: 5px;}
    ul.progress-stage {list-style-type: none; width: 100%; margin: 0 auto; padding: 0; text-align: center; white-space: nowrap;}
    li.progress-step-active {float: left; width: 50%; background-color: #FAA61A; padding: 5px;}
    li.progress-step-complete {float: left; width: 50%; background-color: #21aa50; padding: 5px;}
    li.progress-step-failure {float: left; width: 50%; background-color: #D33F49; padding: 5px;}
    li.progress-step {float: left; width: 50%; background-color: #151721; padding: 5px;}
    span.progress-step-no {display: inline-block; font-size: 1.1em;	font-weight: bold; color: #ffffff; margin-left: 10px;}
	li.progress-step-active span.progress-step-no {color: #151721;}
    span.progress-step-desc {display: inline-block; font-size: 1.1em; color: #ffffff; margin-left: 10px; height: 20px;} 
	li.progress-step-active span.progress-step-desc {color: #151721;}

/*  =========== END PROGRESS BAR=========== */

/* ========== STAGE SPECIFIC CSS */
    /*  =========== STEP 1/2=========== */
        #thePage:theForm:theBlock:otherAmountRequired, #thePage:theForm:theBlock:pay-method-other-label {display: none; /*hidden until requested*/}
    /*  =========== STEP 3=========== */
        div#gender-assign.col100 {display: none; /*hidden until requested*/}
        .diversity-info {text-align: center; background-color: #FAA61A; padding: 1%;}
        .diversity-info * {color: #151721;}
        .diversity-info a {display: block; width: 220px; background-color: #0066CC; padding: 10px 25px; margin: 0 auto; border-radius: 3px;}
        .card {float: left; margin: 0 auto;}
        .card-grid {width: 96%; margin: 1% 2% 0 2%;}
    /*  =========== PAYMENT-METHODS SETUP=========== */
        #payment-options-row, div[id='RenewMembershipPage:theForm:theBlock:amountSelectBlock'] {display: none; /*hidden until requested*/}
        table.payment-method table {width: 100%;}
        table.payment-method tbody tr td {float: left;}
        table.payment-method tbody tr td label {font-size: 1.1em; font-weight: normal; border: 1px solid #FAA61A; border-radius: 3px; padding: 10px; width: 100%; text-align: center; float: left;}
        table.payment-method > label {background-color: #FAA61A; border: 1px solid #151721;}
        table.payment-method tbody tr td label[for='thePage:theForm:theBlock:optmt:1'], table.payment-method tbody tr td label[for='RenewMembershipPage:theForm:theBlock:optmt:1'] {background-color: none;}
        table.payment-method tbody tr td input[type="radio"]:hover {background-color: #FAA61A; border-color: #151721;}
        table.payment-method tbody tr td input[type="radio"]:checked+label {background-color: #FAA61A; border-color: #151721;}
        table.payment-method tbody tr td input[type="radio"]:checked+label[for='thePage:theForm:theBlock:optmt:1'] {background-color: none !important;}
        .payment-method tbody tr {float: left; margin-right: 1%;}
        input.pay-method-other {width: 25%;}
        .pay-method-desc {font-size: 1.1em; font-weight: 900; display: block;}
        .pay-method-info {font-size: 1em; display: block;}
        img.pay-method-img {float: left; margin-right: 10px;}
        .cc-payment label {font-size: 1em; background-color: #ffffff; border: 1px solid #FAA61A; padding: 10px 15px; text-align: center; float: left; margin-right: 20px; margin-bottom: 0;}
        #content input.cc-payment-amt#cc-payment-amt_other {margin: 0 !important;}
        #parsley-id-multiple-thePagetheFormtheBlockamount {display: none;}
/*  =========== END PAYMENT-METHODS SETUP=========== */

/*  =========== HEADER =========== */
    .disclaimer {padding: 45px; text-align: center; background-color: #ffffff; font-size: 0.8em;}
    .disclaimer div#dd-logo {background-image: url('direct_debit_logo.jpg'); width: 150px; height: 53px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 150px 53px; margin: 5px auto;}
    .hidden-row {padding: 40px 0; float: left; background-color: none;}
/*  =========== FOOTER=========== */
    .footer-container {clear: both;}
    .footer-logo {width: 140px;	height: 70px;}
    .footer > .row > .col50 > p {color: #ffffff;}
    .footer > .row {background-color: #151721;}
    div.footer {background-color: #151721; padding: 20px; color: #fff;}
    header div.logo {background-image: url('sf_ld_fed_libby.png'); height: 45px; width: 60px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 60px 45px; margin: 05px auto;}
    div.footer div.logo {width: 133.5px; height: 68.5px; background-image: url('sf_ld_fed_sprite-light.png'); background-repeat: no-repeat; background-position: 0px 0px; background-size: 133.5px auto;}
    .link-privacy {color: #ffffff;}
/*  =========== END FOOTER=========== */
/*  =========== FORMS=========== */
    form {padding: 0; margin: 0;}
    label, input, button, select, textarea {font-family: 'Open Sans', Arial, sans-serif, font-size: 1em; line-height: 1.2em; font-weight: normal;}
    input:focus::-webkit-input-placeholder {color:transparent;}
    input:focus:-moz-placeholder {color:transparent;} /* FF 4-18 */
    input:focus::-moz-placeholder {color:transparent;} /* FF 19+ */
    input:focus:-ms-input-placeholder {color:transparent;} /* IE 10+ */
    label {display: block; margin-bottom: 5px;}
    select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {height: 42px; border-radius: 5px; margin-bottom: 10px; max-width: 100%; background-color: #ffffff;}
    textarea {min-height: 42px; height: 70px; width: 100%}
    .input_checkbox input {margin-right: 5px !important; float: left; width: auto;}
    select, textarea, input {display: inline-block; padding: 4px 6px; line-height: 20px; color: #151721; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; vertical-align: middle;}
    textarea, input {background-color: #ffffff; border: 1px solid #151721; -webkit-appearance: none;}
    textarea:focus, input:focus {border-color: #151721; outline: 0; outline: thin dotted \9;}
    input[type="radio"], input[type="checkbox"] {line-height: normal; margin: 0 0 0 15px;}
    input[type="checkbox"] {-webkit-appearance: checkbox; -ms-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); padding: 10px; margin-right: 10px;}
    input[type="radio"] {-webkit-appearance: none; display: none;}
    input[type="submit"] {-webkit-appearance: none}
    .radio input[type="radio"], .checkbox input[type="checkbox"] {float: left; margin: 3px 0 0 -20px}
    .radio-inline input[type="radio"], .radio-inline input[type="checkbox"], .checkbox-inline input[type="radio"], .checkbox-inline input[type="checkbox"] {display: none}
    .radio-inline input[type="radio"]:checked+label, .radio-inline input[type="checkbox"]:checked+label, .checkbox-inline input[type="radio"]:checked+label, .checkbox-inline input[type="checkbox"]:checked+label {background-color: #FAA61A; color: #151721;}
    .radio-inline label.radio, .radio-inline label.checkbox, .checkbox-inline label.radio, .checkbox-inline label.checkbox {background-color: #fff; color: #151721; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; display: inline-block; width: 80px; padding: 15px 5px; font-family: 'Open Sans', Arial, sans-serif; font-weight: bold; font-size: 19px; text-align: center; margin: 5px 5px 10px 0; cursor: pointer; outline: none;}
    .radio-inline label.radio .option_label, .radio-inline label.checkbox .option_label, .checkbox-inline label.radio .option_label, .checkbox-inline label.checkbox .option_label {display: block;}
    .radio-inline label.checkbox, .checkbox-inline label.checkbox {padding: 5px; height: 30px; font-size: 16px; margin: 5px 5px 0 0;}
    .radio-inline.checkbox-inline, .checkbox-inline.checkbox-inline {vertical-align: middle;}
    .radio-inline.checkbox-inline li, .checkbox-inline.checkbox-inline li {width: 100%; vertical-align: middle;}
    .radio-inline.checkbox-inline li label, .checkbox-inline.checkbox-inline li label {width: 100%;}
    .controls> .radio:first-child, .controls> .checkbox:first-child {padding-top: 5px;}
    .checkbox, .radio {margin-left: 20px}
    .form_wrap {padding: 20px 25px; background-color: #ffffff; border-left: 2px solid #151721; border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;}
    .form_submit {font-size: 12px;}
    .form_submitting img {margin-right: 6px;}
    fieldset {border: 0; margin: 0; padding: 0;}
    textarea {resize: vertical;}
    .form .text {width: 100%;}
    .aware-theme.v2-theme .form-errors {display: block; padding: 0;}
    .aware-theme.v2-theme .form-errors> * {margin: 10px}
    .aware-theme.v2-theme .form-errors ul, .aware-theme.v2-theme .form-errors li {padding: 5px; list-style: none}
/*  =========== END FORMS=========== */

/*  =========== ERRORS =========== */
    div.errorMsg {background-color: #d33549; color: #ffffff; padding: 5px 10px; border-radius: 5px;}
    form input.error {border-color: #d33f49; outline: 0; margin-bottom: 3px;}
    .error-message {font-size: 0.8em; color: #d33549; margin-bottom: 10px; display: inline-block;}
    .warning, #errorExplanation {background-color: #d33f49; color: white; padding: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; margin: 0 0 15px 0; font-size: 13px; line-height: 17px;}
    .warning h2, #errorExplanation h2 {font-size: 20px; line-height: 24px}
    .submit-button {display: block; background-color: #FAA61A; font-weight: bold; font-size: 1.2em; color: #151721; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 10px 25px; margin: 2% auto; min-height: 50px; font-size: 1.4em; border: none;}
    .submit-button:hover {background-color: #21aa50; color: #fff;}
    .submit-button a, .success-button a {color: #21aa50;}
/*  =========== END ERRORS=========== */   
 
/*  =========== TABLES=========== */
    table {width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0}
    .table {width: 100%; margin-bottom: 20px;}
/*  =========== END TABLES=========== */

 /* ======= Benefits popout ====== */
.benefits {height: 0; width: 100%; z-index: 1; left: 0; top: 0; background-color: #ffffff; overflow-x: hidden; transition: 1.5s;}
 
 /* ======= Terms and Conditions Popout ======= */
.overlay {height: 100%; width: 0; position: fixed; z-index: 1; left: 0; top: 0; background-color: #ffffff; overflow-x: hidden; transition: 0.5s;}
.overlay-r {height: 100%; width: 0; position: fixed; z-index: 1; right: 0; top: 0; background-color: #ffffff; overflow-x: hidden; transition: 0.5s;}
.overlay-content {position: relative; top: 5%; width: 80%; margin-top: 30px; margin-bottom: 30px; margin-left: auto; margin-right: auto; text-align: left; font-family: 'Open Sans', arial, sans-serif;}
.overlay-content h3 {margin-top: 20px; margin-bottom: 20px;}
.overlay-content p {margin-top: 5px; margin-bottom: 5px;}
.overlay-content h2 {margin-top: 20px; margin-bottom: 20px;}
.overlay-content a {color: #faa61a;}
.overlay a:hover, .overlay a:focus {color: #faa61a;}
.overlay .closebtn {position: absolute; top: 45px; right: 5%; font-size: 60px;}
.overlay-r a:hover, .overlay a:focus {color: #faa61a;}
.overlay-r .closebtn {position: absolute; top: 45px; right: 5%; font-size: 60px;}
@media screen and (max-height: 450px) {
	.overlay a {font-size: 20px}
	.overlay .closebtn {font-size: 40px; top: 15px; right: 35px; z-index: 3;}
        .overlay-r a {font-size: 20px}
    .overlay-r .closebtn {font-size: 40px; top: 15px; right: 35px; z-index: 3;}
}
.tcs {color:#faa61a}
.tcs:hover, .tcs:focus {text-decoration: underline}
.privacy:hover, .tcs:focus {text-decoration: underline}
.pop-out:hover, .tcs:focus {text-decoration: underline}

 /* ======= Flexbox for membership cards at Stage 3 ======= */

.flexbox__container {padding: 2% 0; display: inline-flex; width: 100%; height: auto; flex-direction: row; align-items: flex-start; flex-flow: row wrap; justify-content: center;}
.flexbox__fifth {width: 20%; padding: 0.5%}
.flexbox__third {width: 33%; padding: 0.5%;}
    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .flexbox__third {width: 50%; padding: 0.5%;}
    }
    @media screen and (max-width: 767px) {
    .flexbox__third {width: 100%; padding: 0.5%;}
    }

.success_wrapper {position:relative; width: 100%; height: 100%;}
.success_wrapper img {width:100%; vertical-align:top;}
.success_wrapper:after {content:'\A'; position:absolute; width: 100%; height: 100%; top:0; left:0; background: rgba(33,170,80,0.8); opacity:0; transition: all 0.75s; -webkit-transition: all 0.75s; z-index: 10;}
.success_wrapper:hover:after {opacity: 0.75;}

.success_wrapper p.success_wrapper-t {display: none; position: absolute; top: 45%; color: white; z-index: 100; opacity: 1; text-align: center; font-size: 1.25em; font-weight: 400; width: 100%; margin: 0 auto; padding: 0 10%;}
.success_wrapper:hover p.success_wrapper-t {display: inline;}

.success_wrapper:active:after {content:'\A'; position:absolute; width: 100%; height: 100%; top:0; left:0; background: rgba(33,170,80,0.8); opacity:0; transition: all 0.75s; -webkit-transition: all 0.75s; z-index: 10;}
.success_wrapper:active p.success_wrapper-t {display: inline;}
.success_wrapper:active:after {opacity: 0.75;}

.wrapper-active:after {opacity: 0.75;}
.wrapper-active .success_wrapper-t {display: inline !important;}

.hidden {display: none;}
p.loading_gif {text-align: center; margin: 0px 0px 40px 0px;}

.success {font-weight: 700; color: #21aa50;}
.errorMsg {font-weight: 700; color: #d33459;}

/* ====== Experimental show/hide of other box ====== */

.displayed {display: inline-block !important;}