@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-guide-to-dog-breeding-hero-base.jpg);
}
.updateMessageContent {
	display: none;
}
.pageContent {
	display:grid;
	grid-area: pageContent;
	gap: 0;
	grid-template-columns: 12fr;
	grid-template-areas:
		'intro'
		'onecol'
		'onecoltwo'
		'faqs'
		'everypet';
	margin-top: 30px;
}

	.pageContent .intro {
		display:grid;
		gap: 0;
		grid-area: intro;
		grid-template-columns: 12fr;
	}
		.pageContent .intro h1 {
			text-align: center;
			margin: 0;
		}
		.pageContent .intro h2 {
			text-align: center;
		}
		.pageContent .intro p {
			text-align: center;
		}
		.pageContent .intro .joinButton {
			background-color: #660591;
			margin: 20px auto;
			text-align: center;
			padding: 14px 18px;
			border-radius: 3px;
		}
		.pageContent .intro .joinButton a {
			color: #FFF;
			font-size: 20px;
			padding: 10px 0;
		}
			.pageContent .intro .joinButton a:hover {
				text-decoration: underline;
			}

	.pageContent .onecol {
		display:grid;
		gap: 0;
		grid-area: onecol;
		grid-template-columns: 12fr;
		margin-top: 20px;
		padding-bottom: 15px;
	}
		.pageContent .onecol h1 {
			text-align: center;
		}
		.pageContent .onecol h2 {
			text-align: center;
			margin: 20px 0 0;
		}
		.pageContent .onecol p {
			text-align: center;
		}

		.pageContent .onecol ul {
			margin: 12px 15px 0 44px ; 
			list-style: none;
		}

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

			.pageContent .onecol 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 .onecol .joinButton {
			background-color: #660591;
			margin: 20px auto;
			text-align: center;
			padding: 14px 18px;
			border-radius: 3px;
		}
		.pageContent .onecol .joinButton a {
			color: #FFF;
			font-size: 20px;
			padding: 10px 0;
		}
			.pageContent .onecol .joinButton a:hover {
				text-decoration: underline;
			}

	.pageContent .onecoltwo {
		display:grid;
		gap: 0;
		grid-area: onecoltwo;
		grid-template-columns: 12fr;
		margin-top: 20px;
	}
		.pageContent .onecoltwo h1 {
			text-align: center;
		}
		.pageContent .onecoltwo h2 {
			text-align: center;
			margin: 20px 0 0;
		}
		.pageContent .onecoltwo p {
			text-align: center;
		}

		.pageContent .onecoltwo ol {
			margin: 12px 15px 0 44px ; 
		}

		.pageContent .onecoltwo .joinButton {
			background-color: #660591;
			margin: 20px auto;
			text-align: center;
			padding: 14px 18px;
			border-radius: 3px;
		}
		.pageContent .onecoltwo .joinButton a {
			color: #FFF;
			font-size: 20px;
			padding: 10px 0;
		}
			.pageContent .onecoltwo .joinButton a:hover {
				text-decoration: underline;
			}

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

	.pageContent .faqs {
		display:grid;
		gap: 0;
		grid-area: faqs;
		grid-template-columns: 12fr;
		margin-top: 20px;
	}
		.pageContent .faqs h2 {
			text-align: center;
			font-size: 30px;
			line-height: 36px;
			font-weight: 300;
			padding: 20px 15px 0 15px;
			margin-top: 20px;
			rotate: -2deg;
		}
			.pageContent .faqs h2 span {
				line-height: 44px;
				background-color: #660591;;
				color: #FFF;
				padding-left: 20px;
				padding-right: 24px;
				padding-top: 8px;
				padding-bottom: 8px;
				display: inline;
				-webkit-box-decoration-break: clone;
				box-decoration-break: clone;
			}

		.pageContent .faqs h3 {
			margin: 30px 0 15px 0;
		}
		.pageContent .faqs p {
			margin: 5px 15px 15px;
		}

		.pageContent .faqs ul {
			margin: 0 15px 0 44px ; 
			/*list-style: none;*/
		}

		.pageContent .faqs li {
			padding: 0; 
			position: relative;
			margin: 0 0 10px 0;
		}

		.pageContent .faqs .joinButton {
			background-color: #660591;
			margin: 20px auto;
			text-align: center;
			padding: 14px 18px;
			border-radius: 3px;
		}
		.pageContent .faqs .joinButton a {
			color: #FFF;
			font-size: 20px;
			padding: 10px 0;
		}
			.pageContent .faqs .joinButton a:hover {
				text-decoration: underline;
			}

	.pageContent .everypet {
		display: grid;
		grid-area: everypet;
		gap: 0;
		grid-template-columns: 1fr 12fr 1fr;
		grid-template-areas:
			'everyPetIcon everyPetIcon everyPetIcon'
			'. everyPetContent .'
			'everyPetJoin everyPetJoin everyPetJoin';
		background-image: url(../img/design/every-pet-curve-mobile.png);
		background-position: top 50%;
		background-repeat: no-repeat;
		background-size: 100%;
		justify-items: center;
		padding: 0 10px;
	}
		.pageContent .everypet p {
			text-align: center;
		}
			.everypet .everypet-mobile, .everypet .everypet-desktop {
				grid-area: everyPetIcon;
			}
			.everypet .everypet-content {
				grid-area: everyPetContent;
				justify-self: center;
			}
			.everypet .everypet-content h2 {
				line-height: 32px;
			} 
			.everypet .everypet-content h2, 
			.everypet .everypet-content p {
				text-align: center;
			} 
			.everypet .everypet-join {
				grid-area: everyPetJoin;
				justify-self: center;
			}
			.everypet .everypet-join .joinButton {
				background-color: #660591;
				margin: 20px auto;
				text-align: center;
				padding: 14px 18px;
				border-radius: 3px;
			}
			.everypet .everypet-join .joinButton a {
				color: #FFF;
				font-size: 20px;
				padding: 10px 0;
			}
				.everypet .everypet-join .joinButton a:hover {
					text-decoration: underline;
				}


	.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-guide-to-dog-breeding-hero-small.jpg);
	}

}

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

	.main-hero {
		background-image: url(../img/design/public-guide-to-dog-breeding-hero-medium.jpg);
	} 

}

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

	.main-hero {	
		background-image: url(../img/design/public-guide-to-dog-breeding-hero-desktop.jpg);
	}

	.pageContent {
		display:grid;
		grid-area: pageContent;
		gap: 0;
		grid-template-columns: 3fr 12fr 3fr;
		grid-template-areas:
			'. intro .'
			'onecol onecol onecol'
			'. onecoltwo .'
			'faqs faqs faqs'
			'everypet everypet everypet';
		margin-top: 30px;
	}			
	
	.pageContent .onecol h1 {
		text-align: center;
		margin: 5px 90px;
	}
	.pageContent .onecol h2 {
		text-align: center;
		margin: 30px 290px 15px;
	}
	.pageContent .onecol p {
		text-align: center;
		margin: 5px 60px;
	}
	.pageContent .onecol ul {
		text-align: center;
		margin: 5px 200px;
	}
	.pageContent .onecol li {
		text-align: left;
		margin: 5px 100px;
	}	
	.pageContent .onecoltwo h2 {
		text-align: center;
		margin: 20px 0 15px;
	}
	.pageContent .onecoltwo p {
		text-align: center;
		margin: 5px 100px;
	}
	.pageContent .onecoltwo ol {
		margin: 5px 130px;
	}
	.pageContent .wiggle {
		justify-items: center;
	}
		.pageContent .wiggle-desktop,
		.pageContent .wiggle-monitor {
			margin: 20px auto;
		}
	.pageContent .faqs h3 {
		text-align: left;
		margin:  30px 160px 0;
	}
	.pageContent .faqs p {
		text-align: left;
		margin: 5px 160px;
	}
	.pageContent .faqs ul {
		text-align: left;
		margin: 5px 160px;
	}
	.pageContent .faqs li {
		text-align: left;
		margin: 5px 20px;
	}
	.pageContent .everypet h2 {
		text-align: center;
		margin: 5px 290px;
	}
	.pageContent .everypet p, .everypet .everypet-content p {
		text-align: center;
		margin: 5px 130px;
	}

	
	.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 .onecol h2 {
		text-align: center;
		margin: 30px 290px 15px;
	}
	.pageContent .onecol ul {
		text-align: center;
		margin: 5px 300px;
	}
	.pageContent .everypet p, .everypet .everypet-content p {
		text-align: center;
		margin: 5px 220px;
	}
		.everypet .everypet-desktop {
			margin-top: 20px;
		}
}

/*XX-Large devices (larger desktops, 1500px and up)*/
@media (min-width: 1500px) { 
	
	.pageContent .intro h1 {
		text-align: center;
		margin:  15px 290px;
	}
	.pageContent .intro p {
		text-align: center;
		margin: 5px 150px;
	}
	.pageContent .onecol h2 {
		text-align: center;
		margin: 30px 290px 15px;
	}
	.pageContent .onecol p {
		text-align: center;
		margin: 5px 150px;
	}	
	.pageContent .onecoltwo h2 {
		text-align: center;
		margin: 5px 290px;
	}
	.pageContent .onecoltwo p {
		text-align: center;
		margin: 5px 150px;
	}	
	.pageContent .onecoltwo ol {
		text-align: center;
		margin: 5px 150px;
	}
	.pageContent .onecoltwo li {
		text-align: left;
		margin: 5px 150px;
	}
	.pageContent .faqs h2 {
		text-align: center;
		margin: 5px 290px;
	}
	.pageContent .faqs h3 {
		text-align: center;
		margin: 30px 290px 5px ;
	}
	.pageContent .faqs p {
		text-align: center;
		margin: 5px 250px;
	}
	.pageContent .faqs ul {
		text-align: center;
		margin: 5px 350px;
	}
	.pageContent .faqs li {
		text-align: left;
		margin: 5px 150px;
	}
	.pageContent .everypet h2 {
		text-align: center;
		margin: 5px 290px;
	}
	.pageContent .everypet p, .everypet .everypet-content p {
		text-align: center;
		margin: 5px 350px;
	}
		
}

/*XXX-Large devices (larger desktops, 1900px and up)*/
@media (min-width: 1900px) { 
	
	.pageContent .intro h1 {
		text-align: center;
		margin: 5px 390px;
	}
	.pageContent .intro p {
		text-align: center;
		margin: 5px 250px;
	}	
	.pageContent .onecol h2 {
		text-align: center;
		margin: 30px 390px 5px;
	}
	.pageContent .onecol p {
		text-align: center;
		margin: 5px 250px;
	}	
	.pageContent .onecoltwo h2 {
		text-align: center;
		margin: 5px 390px;
	}
	.pageContent .onecoltwo p {
		text-align: center;
		margin: 5px 250px;
	}
	.pageContent .onecoltwo ul {
		text-align: center;
		margin: 5px 450px;
	}
	.pageContent .onecoltwo li {
		text-align: left;
		margin: 5px 250px;
	}
	.pageContent .faqs h2 {
		text-align: center;
		margin: 5px 390px;
	}
	.pageContent .faqs p {
		text-align: center;
		margin: 5px 450px;
	}
	.pageContent .faqs ul {
		text-align: center;
		margin: 5px 450px;
	}
	.pageContent .faqs li {
		text-align: left;
		margin: 5px 250px;
	}
	.pageContent .everypet h2 {
		text-align: center;
		margin: 5px 390px;
	}
	.pageContent .everypet p {
		text-align: center;
		margin: 5px 450px;
	}
		.everypet .everypet-desktop {
			margin-top: 50px;
		}
			
}