/*
 * Donations widget
 * This is the payment widget for both the /donate page and the donation panel on checkout
 */

body.node-type-product-donation article form,
#edit-checkout-donate {
	background-color: #f2eff6;
	padding: 30px 80px 30px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
}

body.node-type-product-donation article form:before {
	content: "By giving a monthly or single gift to Cycling UK you will be helping to change lives through cycling";
	display: block;
	text-align: center;
	margin: 0 auto;
	max-width: 550px;
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 24px;
	margin-bottom: 30px;
}

body.node-type-product-donation form #edit-line-item-fields {
	display: inline-block;
	width: 826px;
}

body.node-type-product-donation form #edit-line-item-fields > div,
body.node-type-product-donation form #edit-line-item-fields > fieldset {
	display: inline-flex;
	vertical-align: top;
	margin-bottom: 0;
}

body.node-type-product-donation form #edit-line-item-fields > div > div {
	width: 100%;
}

body.node-type-product-donation form button {
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: 53px;
}

body.node-type-product-donation form #edit-line-item-fields > fieldset .form-item-line-item-fields-field-payment-option-und {
	margin-bottom: 15px;
}

#edit-checkout-donate .panel-title {
	display: block;
	max-width: 450px;
	text-align: center;
	margin: 0 auto;
	font-size: 20px;
	line-height: 26px;
}

#donate-text h2:after,
#donate-text h3:after,
body.node-type-product-donation article form > div:before,
#edit-checkout-donate .panel-title:after {
	display: block;
	content: "";
	width: 140px;
	height: 5px;
	background-color: #f6b331;
	border-radius: 2.5px;
	-webkit-border-radius: 2.5px;
	-moz-border-radius: 2.5px;
	position: relative;
	margin: 20px auto 20px auto;
}

body.node-type-product-donation article form > div:before {
	margin-bottom: 30px;
}

body.node-type-product-donation fieldset.group-payment-option,
#edit-checkout-donate .panel-body {
	padding: 0;
	background-color: #f2eff6;
}

body.node-type-product-donation fieldset.group-payment-option .panel-body {
	padding: 0;
}

#edit-checkout-donate-commerce-donate-amount,
fieldset .group-payment-option,
#edit-line-item-fields-commerce-donate-amount {
	display: inline-flex;
	width: 50%;
	vertical-align: top;
	background-color: #f2eff6;
}

@media only screen and (max-width : 767px) {
	#edit-checkout-donate-commerce-donate-amount,
	fieldset .group-payment-option,
	#edit-line-item-fields-commerce-donate-amount {
		display: block;
		width: 100%;
		vertical-align: inherit;
	}
}

@media only screen and (max-width : 991px) {
	body.node-type-product-donation form button {
		display: block;
		vertical-align: inherit;
		margin: 0 auto;
	}
}

@media only screen and (min-width : 992px) and (max-width : 1199px) {
	body.node-type-product-donation form #edit-line-item-fields {
		width: 632px;
	}
}

@media only screen and (min-width : 768px) and (max-width : 991px) {
	body.node-type-product-donation article form {
		padding: 30px 40px;
	}
	body.node-type-product-donation form #edit-line-item-fields {
		width: 100%;
	}
}

@media only screen and (max-width : 767px) {
	body.node-type-product-donation article form {
		padding: 30px 40px;
	}
	body.node-type-product-donation form #edit-line-item-fields {
		width: 100%;
	}
	body.node-type-product-donation form #edit-line-item-fields > div,
	body.node-type-product-donation form #edit-line-item-fields > fieldset {
		display: block;
		margin-bottom: 20px;
	}
}

body.node-type-product-donation #edit-line-item-fields-commerce-donate-amount-und-select > div,
#edit-checkout-donate-commerce-donate-amount-und-select > div,
.form-item-checkout-donate-commerce-donate-amount-und-other {
	display: inline-block;
	width: 50%;
}

@media only screen and (min-width : 500px) and (max-width : 767px) {
	#edit-checkout-donate-field-payment-option-und > div {
		display: inline-block;
		width: 50%;
	}
}

.form-item-checkout-donate-commerce-donate-amount-und-other input {
	display: inline-block;
}

body.node-type-product-donation .form-item-line-item-fields-commerce-donate-amount-und-select.form-group > label,
body.node-type-product-donation fieldset.group-payment-option > div > div > div > label,
#edit-checkout-donate-commerce-donate-amount > div > div > div > label,
#edit-checkout-donate-field-payment-option > div > label {
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 24px;
	margin-bottom: 15px;
}



/*
 * Donation page layout
 */

.node-type-product-donation h1,
#donate-text h2,
#donate-text h3 {
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 400;
	text-align: center;
}

.node-type-product-donation h1 {
	font-size: 56px;
	line-height: 56px;
	margin-top: 45px;
	margin-bottom: 45px;
}

#donate-text h2 {
	font-size: 22px;
	line-height: 24px;
	max-width: 600px;
	margin: 0 auto;
	padding-bottom: 30px;
}

#donate-text h3 {
	font-size: 32px;
	line-height: 32px;
	color: #009fda;
	padding-bottom: 10px;
}

#donate-text .paragraph {
	text-align: center;
	margin-bottom: 40px;
}

#donate-text .paragraph-1 {
	padding-left: 80px;
	padding-right: 40px;
}

#donate-text .paragraph-2 {
	padding-left: 40px;
	padding-right: 80px;
}

@media only screen and (max-width : 767px) {
	#donate-text .paragraph-1,
	#donate-text .paragraph-2 {
		padding: 0 20px;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
}

#donate-text .reason {
	text-align: center;
	padding-left: 40px;
	padding-right: 40px;
	margin-bottom: 40px;
}

#donate-text .reason .image {
	margin-bottom: 20px;
}
#donate-text .reason .image-title.outer-wrapper {
	display: table;
	margin-bottom: 20px;
	min-height: 48px;
	height: 48px;
	width: 100%;
}

#donate-text .reason .image-title .inner-wrapper {
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 24px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#donate-text .reason .yellow-line {
	width: 140px;
	height: 2px;
	background-color: #f6b331;
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	position: relative;
	margin: 20px auto 20px auto;
}

#donate-text .reason .image-description {
	font-size: 16px;
	line-height: 22px;
}

@media only screen and (max-width : 767px) {
	#donate-text .reason .image-description {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}