/*****************************
WRAPPER
*****************************/
#spa19-wrapper {
    position: relative;
    width: 100%;
    min-height: 700px;
    margin: 15px 0 30px;
    float: left;
}
#spa19-wrapper * {
    box-sizing: border-box;
}
#spa19-wrapper > div {
    float: left;
}
#spa19-wrapper img {
    width: 100%;
}
#spa19-wrapper h1,
#spa19-wrapper h2 {
    font-family: "Nobel-WGL Reg", Arial, Sans serif;
	font-variant: normal;
}
#spa19-wrapper h2 {
    margin: 0 0 10px;
	font-size: 28px!important;
}
#spa19-wrapper p {
    font-size: 16px!important;
}

/*****************************
SPA TYPOGRAPHY
*****************************/
.text-muted-spa {
    color: #AAA;
}

/*****************************
HEADER
*****************************/
#spa19-header {
    position: relative;
    width: 100%;
    margin: 20px 0 0;
}
#spa19-header .c5 {
    padding: 0 0 0 15px;
}
#spa19-header h1 {
    margin: 0 0 10px;
    padding: 10px 0 0;
    color: #E83754;
    border-top: 4px solid #E83754;
    font-weight: 900;
}

/*****************************
CONTENT
*****************************/
#spa19-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

/*****************************
BUTTON [DEFAULT CTA]
*****************************/
.spa-cta-button {
    width: 200px;
    margin: 20px auto 0;
    padding: 12px;
    float: none;
    background: #E83754;
    color: #FFF;
    font-size: 16px;
    text-align: center;
    transition: 0.5s ease all;
}
.spa-cta-button:hover,
.spa-cta-button:focus {
    background: #2A2A2A;
    transition: 0.5s ease all;
}

/*****************************
BUTTON [EXTENDED - LARGE]
*****************************/
.large-cta-button {
	width: 100%;
	margin: 0;
	padding: 15px;
	font-size: 20px;
	float: right;
}

/*****************************
ALIGNMENTS
*****************************/
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}

/*****************************
LOADING
*****************************/
.late-load {
    display: none;
}

/*****************************
ERROR MESSAGES
*****************************/
.errorCodeSPA {
    margin: 0 0 10px;
    font-size: 75px;
}
.errorMessageSPA {
    font-size: 20px;
}

/*****************************
MODAL
*****************************/
.modalSPA {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(42, 42, 42, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 100;
}
.modalSPA.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modalSPA .modal-content {
    position: absolute;
    width: 98%;
	height: 98%;
    top: 50%;
    left: 50%;
    background-color: #FFF;
    transform: translate(-50%, -50%);
	overflow: hidden;
}
.modalSPA .modal-header {
    padding: 20px;
    background: #E83754;
    color: #FFF;
}
.modalSPA .modal-header h2,
.modalSPA .modal-content h2 {
    margin: 0!important;
}
.modalSPA .modal-close {
    width: 40px;
    margin-top: -5px;
    float: right;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    color: #FFF;
    transition: 0.5s ease all;
}
.modalSPA .modal-close:hover,
.modalSPA .modal-close:focus {
    color: #2A2A2A;
    transition: 0.5s ease all;
}
.modalSPA .modal-body {
	height: calc(100% - 74px);
    padding: 20px;
	overflow: auto;
}
.modalSPA .modal-body h2 {
	margin-bottom: 10px!important;
}
@media only screen and (min-width: 1025px) {
    .modalSPA .modal-content {
        width: 80%;
		height: 80%;
    }
}

/*****************************
MODULES
*****************************/

/* LONG BLOCK */
.long-block {
	height: auto;
 	margin: 20px 0 0;
	padding: 10px;
	background: #F0F0F0;
    color: #000;
    text-align: center;
	border: 1px solid #DDD;
}
@media only screen and (min-width: 1025px) {
	.long-block {
		height: 95px;
	}
}
.long-block .c6 {
    text-align: center;
}
.long-block .c5 {
	text-align: center;
}
.long-block .c7 {
	text-align: center;
}
.long-block h2 {
    margin: 0!important;
}
@media only screen and (min-width: 1025px) {
	.long-block .c5 {
		text-align: left;
	}
	.long-block .c7 {
		text-align: right;
	}
	.long-block h2 {
		margin: 19px 0 0 20px!important;
	}
}

.long-block h2 {
    font-size: 28px!important;
}
.long-block p {
    font-size: 18px;
}
.long-block p {
	font-family: "Nobel-WGL Reg", Arial, Sans serif;
	font-variant: normal;
}
.long-block .c12:first-of-type {
	padding: 5px;
	background: #E83754;
	color: #FFF;
}
@media only screen and (min-width: 1025px) {
    .long-block .c6 {
        text-align: left;
    }
}

/* COUNTDOWN BLOCK */
#countdown-block {
}
#countdown-timer {
	margin: 0!important;
}
#countdown-timer .c7 {
	margin: 0;
}
.countdown-timer {
    text-transform: none;
}
.countdown-databox {
    width: calc(25% - 7.5px);
    margin: 0 5px;
    padding: 10px;
    float: right;
    font-size: 30px!important;
    text-align: center;
    border-radius: 2px;
	font-weight: normal;
	background: #E0E0E0;
}
.countdown-databox:first-of-type {
    margin-right: 0!important;
}
.countdown-databox:last-of-type {
    margin-left: 0!important;
}
.countdown-databox span {
    width: 100%;
    display: block;
    font-size: 15px;
}

/* RAISED BLOCK */
#raised-block {
	margin: 0;
}

/* DONATION BLOCKS */
.donation-blocks {
    margin: 20px 0 40px;
    display: none;
}
/*
.donation-blocks-hero-tag {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    padding: 25px 0 0;
    border-radius: 120px;
    background: #F0F0F0;
    text-align: center;
    z-index: 3;
}
.donation-blocks-content {
	position: relative;
    width: 90%;
	height: 215px;
    margin: -50px auto 0;
    border: 1px solid #DDD;
    padding: 55px 20px 20px;
    text-align: center;
    z-index: 2;
}
.donation-blocks-content #other_amount_gbp {
	position: absolute;
	top: 84px;
	left: 30px;
	font-size: 30px;
	color: #AAA;
}
*/
.donation-blocks-hero-tag {
    position: relative;
    width: 120px;
    height: 120px;   
    margin: -75px auto 20px;
	padding: 20px 18px;
    border-radius: 120px;
    background: #E0E0E0;
    text-align: center;
    z-index: 3;
}
.donation-blocks-content {
	position: relative;
    width: 100%;
	height: 190px;
    margin: 0 auto!important;
	background: #F0F0F0;
    border: 0px solid #DDD;
    padding: 25px 20px 20px;
    text-align: center;
    z-index: 2;
}
@media only screen and (min-width: 1025px) {
	.donation-blocks-content {
		width: 90%;
		margin: 0 auto;
	}
	.donation-blocks:first-of-type {
		margin-left: 13px;
	}
}
.donation-blocks-content #other_amount_gbp {
	position: absolute;
	top: 54px;
	left: 30px;
	font-size: 30px;
	color: #AAA;
}
.donation-blocks .spa-cta-button {
    width: 100%!important;
	height: 112px;
	font-family: "Nobel-WGL Reg", Arial, Sans serif;
	font-variant: normal;
	font-size: 30px;
}
.donation-blocks:last-child input[type="number"] {
	width: 100%;
	margin: 20px 0 0;
	padding: 10px 10px 10px 40px;
	font-size: 25px;
}
.donation-blocks:last-child .spa-cta-button {
	height: 50px;
	margin-top: 10px;
	font-size: 22px;
}

/* DONATION FULL */
.donation-full {
	width: 100%;
	margin: 20px 0 0;
	float: left;
}
.donation-full-header {
	position: relative;
	width: 100%;
	padding: 20px;
	background: #F0F0F0;
	color: #000;
	border-top: 4px solid #E83754;
	display: none;
}
.donation-full-header h2 {
	margin: 0!important;
}
.donation-full-content {
	padding: 10px 0 20px;
}
.donation-full-content .donationValue {
	text-align: center;
}
.donationFullWrap {
}
.donationValue {
	margin: 85px 0 0;
	padding: 10px;
	background: #F0F0F0;
	border: 1px solid #DDD;
}
.donation-full-content .c4:last-of-type {
	margin-right: 0; 
}
@media only screen and (min-width: 1025px) {
	.donationValue {
		margin: 65px 0 0;
	}
}
.donationValue .fa {
	margin-top: 5px;
}
.donationValue .fa-graduation-cap {
	margin-top: 9px;
}
.donationValue .spa-cta-button {
	width: 100%;
	margin: 0;
	padding: 18px;
	font-size: 20px;
	font-family: "Nobel-WGL Reg", Arial, Sans serif;
	font-variant: normal;
	border-radius: 3px;
}
.donationValue .spa-cta-button .fa {
	position: absolute;
	top: 25px;
	left: 30px;
}
.donationValue .spa-cta-button.xl-button {
	padding: 22px;
	font-size: 30px;
}
.donationValue input[type="number"] {
	width: 100%;
	margin: 0 0 5px;
	padding: 10px 10px 10px 40px;
	font-size: 25px;
	border: 1px solid #E83754;
}
.donationValue #other_amount_gbp {
	position: absolute;
	top: 169px;
	left: 20px;
	font-size: 30px;
	color: #AAA;
}
@media only screen and (min-width: 1025px) {
    .donationValue #other_amount_gbp {
		top: 149px;
	}
}

/* CAMPAIGN DETAILS */
#campaign-details {
    margin: 20px 0 0;
    background: #F0F0F0;
    color: #000;
    text-align: left;
	border: 1px solid #DDD;
	border-top: 4px solid #E83754;
}
#campaign-details .columns {
	padding: 20px;
}
#campaign-details h2 {
	margin: 0 0 20px;
	font-size: 28px!important;
}
#campaign-details hr {
	margin: 2em 0;
}
#campaign-details li {
	padding: 0 0 10px;
}
#campaign-details li:last-of-type {
	padding: 0;
}
#campaign-details .large-block-header {
	padding: 20px;
}
#campaign-details .large-block-header h2 {
	margin: 0;
	color: #000;
}
#campaign-details .c8 {
	padding: 0 20px 20px;
}
@media only screen and (min-width: 1025px) {
    #campaign-details .c8 {
		padding: 20px;
	}
}

/*****************************
MAKE A DIFFERENCE
*****************************/
.make-a-difference-wrap {
	margin: 20px 0;
}
.make-a-difference-wrap .c8 {
	margin-right: 0;
}
.make-a-difference-wrap #other_amount_gbp {
	top: unset;
	bottom: 82px;
}
.make-a-difference-wrap .donationValue {
	position: relative;
	margin: 0;
	padding: 0 10px 10px;
	float: left;
	border-top: 0px;
}
.make-a-difference-block {
	width: 100%;
	margin-bottom: 0!important;
	padding: 20px;
	background: #F0F0F0;
	border-width: 1px 1px 0;
	border-style: solid;
	border-color: #DDD;
}

/*****************************
CONTACT DETAILS
*****************************/
.donate-contact-details {
	width: 100%;
	margin: 16px 0 0;
	padding: 20px;
	background: #F0F0F0;
	border: 1px solid #DDD;
}
.donate-contact-details a {
	font-weight: 900;
}
/*****************************
FORMS
*****************************/
.formSPA {}
.formSPA label {
    margin: 15px 0 2px;
}
.formSPA label:first-of-type {
    margin: 0 0 2px;
}

.formSPA input[type="text"],
.formSPA input[type="password"],
.formSPA input[type="tel"],
.formSPA input[type="email"],
.formSPA input[type="number"],
.formSPA input[type="date"] {
    width: 100%;
    height: 50px;
	padding: 0 10px;
    font-size: 25px;
	background: #FFF;
}

/*****************************
FORMS - GIFT AID
*****************************/
#donate-gift-aid {
	width: 100%;
	margin: 20px 0;
	float: left;
	background: #FFF;
	border: 1px solid #DDD;
}
#donate-gift-aid-header {
	padding: 10px;
}
#donate-gift-aid-header h2 {
	margin: 0;
}
#donate-gift-aid-body {
}
#donate-gift-aid-body img {
	width: 125px;
	margin: 15px auto 0;
}
@media only screen and (min-width: 1025px) {
    #donate-gift-aid-body img {
		width: 80%;
	}
}
#donate-gift-aid-body h2 {
	margin-bottom: 15px!important;
}
#donate-gift-aid-body p {
	font-size: 13px!important;
}
#donate-gift-aid-body p:last-of-type {
	margin: 0;
}
#gift-aid-select {
	padding: 20px;
}
#donate-gift-aid-body input[type="checkbox"] {
	float: left;
}
#giftaid-claim-label {
	margin: -3px 0 0 10px;
	float: left;
	clear: none;
}
#gift-aid-details {
	width: 100%;
	background: #F0F0F0;
	border-top: 1px solid #DDD;
	padding: 20px;
	float: left;
}
#gift-aid-address {
	display: none;
}
.address-form {
	width: 100%;
	margin: 0 0 25px;
	float: left;
}
.address-form label:first-of-type {}
.address-form label:last-of-type {}
.address-form button {}
@media only screen and (min-width: 1025px) {
   .address-form label:first-of-type {
		width: 50%;
		float: left;
		clear: none;
	}
	.address-form label:last-of-type {
		width: 25%;
		margin: 0 0 0 10px;
		float: left;
		clear: none;
	}
	.address-form button {
		width: 22%;
		margin: 17px 0 0;
		padding: 14px;
	}
}

/*****************************
KEEP PLAYING VIDEO
*****************************/
#keepPlayingVideo,
.keepPlayingVideo {
	position: relative;
	width: 100%;
	padding-bottom: 56%;
}
#keepPlayingVideo iframe,
.keepPlayingVideo iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/*****************************
STRIPE INTEGRATION
*****************************/
#card-payment-label {
	margin: 30px 0 0;
}
#secure-payment-message {
	float: right;
	color: green;
}
.card-wrapper {
	margin: 5px 0 20px;
	padding: 20px;
	background: #F9F9F9;
	border: 1px solid #DDD;
}