@charset "utf-8";
/* CSS Document */

/* ALL INITIAL SETTINGS ARE FOR MOBILE LAYOUT - MEDIA QUERIES FURTHER DOWN HANDLE DESKTOP */


h1, h2, h3, h4, h5 {
    margin-bottom: 5px;
    color: #660591; /*PURPLE*/
}

.main-hero {
	background-image: url(../img/design/public-breederscheme-hero-base.jpg);
}
.updateMessageContent {
	display: none;
}
.pageContent {
	display:grid;
	grid-area: pageContent;
	gap: 0;
	grid-template-columns: 12fr;
	grid-template-areas:
		'twocol'
		'wiggle'
		'onecol'
		'fourweeks'
		'rewards'
		'giftcard'
		'twocolbullets'
		'support'
		'payout';
	margin-top: 30px;
}

	.pageContent .ctaButton {
		background-color: #660591;
		margin: 10px auto 0;
		text-align: center;
		padding: 12px 30px ;
		border-radius: 3px;
	}
	.pageContent .ctaButton a {
		color: #FFF;
		font-size: 20px;
		line-height: 22px;
	}
	.pageContent .ctaButton a:hover {
		text-decoration: underline;
	}

	.pageContent .twocol {
		display:grid;
		gap:20px;
		grid-area: twocol;
		grid-template-columns: 12fr;
		grid-template-areas:
			'leftcol'
			'rightcol';
	}
		.pageContent .twocol h1 {
			text-align: center;
			padding: 0 15px;
			margin-bottom: 10px;
		}
		.pageContent .twocol p {
			margin: 5px 15px;
		}
			.pageContent .twocol .twocol-left {
				display:grid;
				grid-area: leftcol;
			}
			.pageContent .twocol .twocol-right {
				display:grid;
				grid-area: rightcol;
				justify-content: center;
			}
				.pageContent .twocol .twocol-right .videoframe {
					width: 315px;
					height: 170px;
				}

	.pageContent .wiggle {
		display:grid;
		gap: 20px;
		grid-area: wiggle;
		grid-template-columns: 12fr;
		margin: 0;
	}	
		.pageContent .wiggle-mobile {
			margin: 30px auto;
		}

	.pageContent .onecol {
		display:grid;
		gap: 20px;
		grid-area: onecol;
		grid-template-columns: 12fr;
	}
		.pageContent .onecol h2 {
			text-align: center;
			margin: 40px 15px 30px;
		}

	.pageContent .fourweeks {
		display:grid;
		gap:30px;
		grid-area: fourweeks;
		grid-template-columns: 12fr;
		grid-template-areas:
			'fourweeksleftcol'
			'fourweeksrightcol';
	}
		.pageContent .fourweeks h2 {
			text-align: center;
			padding: 0 15px;
			margin-bottom: 10PX;
		}
		.pageContent .fourweeks p {
			margin: 5px 15px 15px;
		}

			.pageContent .fourweeks .fourweeks-left {
				display:grid;
				grid-area: fourweeksleftcol;
			}
			.pageContent .fourweeks .fourweeks-right {
				display:grid;
				grid-area: fourweeksrightcol;
				justify-content: center;
			}
			.pageContent .fourweeks .fourweeks-right .table-wrapper {
				background-color: #FFF;
				border-radius: 7px;
				padding: 10px 15px;
			}
			.pageContent .fourweeks .fourweeks-right tbody {
				font-size: 11px;					
			}
			.pageContent .fourweeks .fourweeks-right td.tableTitle {
				font-size: 18px;
				padding-bottom: 10px;
				font-weight: bold;
			}

	.pageContent .rewards {
		display:grid;
		gap: 20px;
		grid-area: rewards;
		grid-template-columns: 12fr;
		grid-template-areas:
			'rewardsContent';
	}
		.pageContent .rewards h3 {
			text-align: center;
			margin: 45px 15px;
		}
		.pageContent .rewards .rewardsContent {
			display:grid;
			grid-area: rewardsContent;
		}

	.pageContent .giftcard {
		display:grid;
		grid-area: giftcard;
		grid-template-columns: 12fr;
		justify-items: center;
		grid-template-areas:
			'bonusvouchers'
			'headerimages'
			'bonuscopy';
	}

		.pageContent .giftcard img.cards {
			width: 50%;
		}
		.pageContent .giftcard .headerimages h2 {
			text-align: center;
			font-size: 28px;
		}
		.pageContent .giftcard p {
			text-align: center;
		}
		.pageContent .giftcard .headerimages .imgleft,
		.pageContent .giftcard .headerimages .imgright {
			width: 32px;
			height: 47px;
		}
			.pageContent .giftcard .bonusvouchers {
				display:grid;
				grid-area: bonusvouchers;
				justify-items: center;
			}
			.pageContent .giftcard .headerimages {
				display:grid;
				grid-area: headerimages;
				grid-template-columns: 1fr 4fr 1fr;
				grid-template-areas:
					'headerimageleft headingtext headerimageright';
				justify-items: center;
			}
				.pageContent .giftcard .headerimages .headerimageleft {
					display:grid;
					grid-area: headerimageleft;
				}
				.pageContent .giftcard .headerimages .headingtext {
					display:grid;
					grid-area: headingtext;
					margin-top: 20px;
				}
				.pageContent .giftcard .headerimages .headerimageright {
					display:grid;
					grid-area: headerimageright;
				}
			.pageContent .giftcard .bonuscopy {
				display:grid;
				grid-area: bonuscopy;
			}
	.pageContent .curve {
		background-image: url(../img/design/rewards-curve-mobile.png);
		background-position: top 50%;
		background-repeat: no-repeat;
		background-size: 100%;
	}


	.pageContent .twocolbullets {
		display:grid;
		gap: 0;
		grid-area: twocolbullets;
		grid-template-columns: 12fr;
		grid-template-areas:
			'twocolbulletsleftcol'
			'twocolbulletsrightcol';
	}
		.pageContent .twocolbullets p {
			margin: 0 15px 15px;
		}
		.pageContent .twocolbullets ul {
			margin: 12px 15px 0 44px ; 
			list-style: none;
		}

		.pageContent .twocolbullets li {
			padding: 0; 
			position: relative;
			font-size: 18px;
			font-weight: 600;
			list-style-type: none;
			margin: 0 0 10px 0;
		}

		.pageContent .twocolbullets li:before {
			content: "";
			position: absolute;
			left: -30px;
			width: 17px;
			height: 17px;
			margin-top: 3px;
			background: url(../img/design/breeder-latestnews-arrow-icon-mobile.png) no-repeat;
			background-size: 16px 16px;
		}
			.pageContent .twocolbullets .twocolbullets-left {
				display:grid;
				grid-area: twocolbulletsleftcol;
			}
			.pageContent .twocolbullets .twocolbullets-right {
				display:grid;
				grid-area: twocolbulletsrightcol;
			}

	.pageContent .support {
		display:grid;
		gap:20px;
		grid-area: support;
		grid-template-columns: 12fr;
		grid-template-areas:
			'supportleftcol'
			'supportrightcol';
		margin-top: 30px;
	}
		.pageContent .support h2 {
			text-align: center;
			padding: 0 15px;
		}
		.pageContent .support p {
			margin: 5px 15px;
		}

			.pageContent .support .support-left {
				display:grid;
				grid-area: supportleftcol;
			}
			.pageContent .support .support-right {
				display:grid;
				grid-area: supportrightcol;
				justify-content: center;
			}

	.pageContent .payout {
		display:grid;
		gap: 10px;
		grid-area: payout;
		justify-items: center;
		margin-top: 30px;
	}
		.pageContent .payout h2 {
			text-align: center;
		}

	.login .loginpanel .login-heading h2 {
		color: #0055a4;
	}


/*BASE LAYOUT*/
.wrapper {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-template-areas:
		'header'
		'nav'
		'hero'
		'pageContent'
		'footer'
		'login';
}


/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

	.main-hero {
		background-image: url(../img/design/public-breederscheme-hero-small.jpg);
	}

	.pageContent .twocol .twocol-right .videoframe {
		width: 525px;
		height: 295px;
	}
	.pageContent .fourweeks {
		display:grid;
		gap:30px;
		grid-area: fourweeks;
		grid-template-columns: 1fr 10fr 1fr;
		grid-template-areas:
			'fourweeksleftcol fourweeksleftcol fourweeksleftcol'
			'. fourweeksrightcol .';
	}
	.pageContent .fourweeks .fourweeks-right {
		display:grid;
		grid-area: fourweeksrightcol;
		justify-content: none;
	}
	.pageContent .fourweeks .fourweeks-right tbody {
		font-size: 14px;
	}
	.pageContent .fourweeks .fourweeks-right td.tableTitle {
		font-size: 20px;
		padding-bottom: 10px;
	}

	.pageContent .rewards {
		grid-template-columns: 1fr 12fr 1fr;
		grid-template-areas:
			'. rewardsContent .';
	}
	.pageContent .giftcard img.cards {
		width: 75%;
	}
	
	.txtsmallprint {
		font-size: 11px;
	}

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 

	.main-hero {
		background-image: url(../img/design/public-breederscheme-hero-medium.jpg);
	} 
	.pageContent .twocol .twocol-right .videoframe {
		width: 710px;
		height: 400px;
	}
	.pageContent .fourweeks .fourweeks-right tbody {
		font-size: 19px;
	}
	.pageContent .fourweeks .fourweeks-right tr {
		height: 27px;
	}
	.pageContent .fourweeks .fourweeks-right td.tableTitle {
		font-size: 24px;
		padding-bottom: 10px;
	}
	.pageContent .giftcard img.cards {
		width: 100%;
	}


	.pageContent .twocolbullets {
		display:grid;
		gap: 0;
		grid-area: twocolbullets;
		grid-template-columns: 6fr 6fr;
		grid-template-areas:
			'twocolbulletsleftcol twocolbulletsrightcol';
	}
			.pageContent .twocolbullets .twocolbullets-left {
				display:grid;
				grid-area: twocolbulletsleftcol;
				align-content: start;
			}
			.pageContent .twocolbullets .twocolbullets-right {
				display:grid;
				grid-area: twocolbulletsrightcol;
				align-content: start;
			}
	
	.pageContent .support {
		display:grid;
		gap:20px;
		grid-area: support;
		grid-template-columns: 6fr 6fr;
		grid-template-areas:
			'supportleftcol supportrightcol';
		margin-top: 40px;
	}
		.pageContent .support h2 {
			text-align: left;
			padding: 0 15px;
			margin-bottom: 10PX;
		}

			.pageContent .support .support-left {
				display:grid;
				grid-area: supportleftcol;
				justify-content: start;
				align-content: center;
			}
				.pageContent .support .support-left .ctaButton {
					margin: 10px auto 0 15px ;
				}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 

	.main-hero {	
		background-image: url(../img/design/public-breederscheme-hero-desktop.jpg);
	}

	
	.pageContent {
		display:grid;
		grid-area: pageContent;
		gap: 0;
		grid-template-columns: 3fr 12fr 3fr;
		grid-template-areas:
			'. twocol .'
			'. wiggle .'
			'onecol onecol onecol'
			'fourweeks fourweeks fourweeks'
			'rewards rewards rewards'
			'giftcard giftcard giftcard'
			'. twocolbullets .'
			'. support .'
			'. payout .';
		margin-top: 30px;
	}
		.pageContent .twocol {
			display:grid;
			gap: 20px;
			grid-area: twocol;
			grid-template-columns: 4fr 8fr;
			grid-template-areas:
				'leftcol rightcol';
		}
			.pageContent .twocol h1 {
				text-align: left;
				padding: 0;
				margin-bottom: 10px;
				font-size: 20px; 
				line-height: 22px;
			}
			.pageContent .twocol p {
				font-size: 14px;
				line-height: 18px;
				margin: 0 0 5px;
			}
			.pageContent .twocol .twocol-left {
				display:grid;
				grid-area: leftcol;
				align-content: center;
			}
			.pageContent .twocol .twocol-right .videoframe {
				width: 420px;
				height: 235px;
			}

		.pageContent .wiggle {
			justify-items: center;
		}
			.pageContent .wiggle-desktop,
			.pageContent .wiggle-monitor {
				margin: 30px auto;
			}
		.pageContent .fourweeks {
			display:grid;
			gap: 40px;
			grid-area: fourweeks;
			grid-template-columns: 3fr 4fr 8fr 3fr;
			grid-template-areas:
				'. fourweeksleftcol fourweeksrightcol .';
		}
			.pageContent .fourweeks p {
				font-size: 14px;
				line-height: 18px;
				margin: 0 0 15px;
			}
				.pageContent .fourweeks .fourweeks-left {
					align-content: center;
				}
				.pageContent .fourweeks .fourweeks-right {
					display: grid;
					gap: 0;
					grid-area: fourweeksrightcol;
				}
					.pageContent .fourweeks .fourweeks-right .table-wrapper {
						background-color: #FFF;
						border-radius: 7px;
						padding: 5px 0;
					}
					.pageContent .fourweeks .fourweeks-right table {
						margin: 15px 15px 0;
					}
					.pageContent .fourweeks .fourweeks-right tbody {
						font-size: 13px;
					}
					.pageContent .fourweeks .fourweeks-right tr {
						height: 30px;
					}
					.pageContent .fourweeks .fourweeks-right td.tableTitle {
						font-size: 16px;
						padding-bottom: 10px;
					}

		.pageContent .rewards {
			display:grid;
			gap: 20px;
			grid-area: rewards;
			grid-template-columns: 3fr 12fr 3fr;
			grid-template-areas:
				'. rewardsContent .';
		}
		.pageContent .rewards .rewardsContent {
			display:grid;
			grid-area: rewardsContent;
		}			
		.pageContent .giftcard img.cards {
			width: 50%;
		}
		.pageContent .giftcard .bonuscopy {
			display:grid;
			grid-area: bonuscopy;
			padding: 0 28%;
		}
		.pageContent .twocolbullets p {
			margin: 0 15px 30px;
		}
		.pageContent .twocolbullets .twocolbullets-right {
			justify-content: start;
		}
	
	.pageContent .curve {
		background-image: url(../img/design/rewards-curve-desktop.png);
		background-position: top 50%;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	
	.wrapper {
	justify-content: center;
	grid-template-columns: 3fr repeat(12, 1fr) 3fr;
	grid-template-areas:
		'. header header header header header header header header header header header header .'
		'nav nav nav nav nav nav nav nav nav nav nav nav nav nav'
		'hero hero hero hero hero hero hero hero hero hero hero hero hero hero'
		'pageContent pageContent pageContent pageContent pageContent pageContent pageContent pageContent pageContent pageContent pageContent pageContent pageContent pageContent'
		'. footer footer footer footer footer footer footer footer footer footer footer footer .'
		'login login login login login login login login login login login login login login'
	}

}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
		.pageContent .twocol {
			display:grid;
			gap: 40px;
			grid-area: twocol;
			grid-template-columns: 6fr 6fr;
			grid-template-areas:
				'leftcol rightcol';
		}
			.pageContent .twocol .twocol-left {
				display:grid;
				grid-area: leftcol;
				align-content: center;
				padding-left: 0;
			}
			.pageContent .twocol .twocol-right {
				display:grid;
				grid-area: rightcol;
				justify-content: left;
			}
				.pageContent .twocol .twocol-right .videoframe {
					width: 420px;
					height: 235px;
				}
		.pageContent .fourweeks {
			display:grid;
			gap: 40px;
			grid-area: fourweeks;
			grid-template-columns: 3fr 5fr 7fr 3fr;
			grid-template-areas:
				'. fourweeksleftcol fourweeksrightcol .';
		}

		.pageContent .giftcard .bonuscopy {
			display:grid;
			grid-area: bonuscopy;
			padding: 0 33%;
		}
}

/*XX-Large devices (larger desktops, 1500px and up)*/
@media (min-width: 1500px) { 
		.pageContent .twocol .twocol-left {
			display:grid;
			grid-area: leftcol;
			padding-left: 10%;
		}
		.pageContent .fourweeks {
			display:grid;
			gap: 40px;
			grid-area: fourweeks;
			grid-template-columns: 3fr 6fr 6fr 3fr;
			grid-template-areas:
				'. fourweeksleftcol fourweeksrightcol .';
		}
			.pageContent .fourweeks .fourweeks-right {
				justify-content: none;
			}
				.pageContent .fourweeks .fourweeks-right .table-wrapper {
					padding: 5px 0;
				}
				.pageContent .fourweeks .fourweeks-right tr {
					height: 15px;
				}
	
}

/*XXX-Large devices (larger desktops, 1900px and up)*/
@media (min-width: 1900px) { 
			.pageContent .twocol .twocol-left {
				display:grid;
				grid-area: leftcol;
				padding-left: 30%;
			}
		.pageContent .fourweeks {
			display:grid;
			gap: 40px;
			grid-area: fourweeks;
			grid-template-columns: 5fr 4fr 4fr 5fr;
			grid-template-areas:
				'. fourweeksleftcol fourweeksrightcol .';
		}
		.pageContent .rewards h3 {
			text-align: center;
			margin: 45px 165px;
		}
	
}