html {
	box-sizing: border-box;
  }
  *, *:before, *:after{
	box-sizing: inherit;
  }


@import url(https://fonts.googleapis.com/css?family=Bigelow+Rules|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Rock+Salt|Slackey|Trade+Winds|Vibes&display=swap);
footer {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	margin: 6% 0 0 0;
	padding: 3% 3% 2% 3%;
	border-top: .02em solid #8EBEDA
}


img.catworld {
	margin: 0%;
	padding: 0%;
	width: 100%;
}
body {
	background-color: #081226;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	flex-direction: column;
	margin: 0;
  }
div.singlecolumn#columnpage {
	display: block;
	width: 100%;
	margin: auto;
	padding: 0.02em 1em 1.5em 1em;
}
div#banner-message {
	letter-spacing: .05em;
}

div#breed_data {
	display: block;
	width: 100%;
	object-fit: contain;
	color: #FFFFFF;
	font-family: Roboto, sans-serif;
	letter-spacing: .05em;
	padding-top: 1em;
}
img#breed_image {
	display: block;
	margin: auto;
	object-fit: contain;
}
table#breed_data_table {
	margin: auto;
	width: 95%;
}
td:first-child {
	padding-right: 2em;
	font-weight: 500;
	text-transform: uppercase;
	vertical-align: text-top;
	padding-top: 0.07em;
}
td:last-child {
	font-weight: 300;
	text-align: justify;
	padding-top: 0.07em;
}

select.breed_select {
	display: block;
	margin: auto;
	background-color: #8EBEDA;
	color: #081226;
	font-family: Roboto, sans-serif;
	font-weight: 500;
}


p {
	  color: #FFFFFF;
	  font-family: Roboto, sans-serif;
	  text-align: justify;
  }

h1 {
	  color:#8EBEDA;
	  font-family: orator-std, monospace;
	  text-align: left;
  }
h2 {
	color: #8EBEDA;
	font-family: orator-std, monospace;
	text-align: center;
}
h3 {
	color: #8EBEDA;
	font-family: orator-std, monospace;
	text-align: center;
	border-bottom: 0.04em solid #8EBEDA;
}
a {
	color: #FFFFFF;
	font-family: Roboto, sans-serif;
	text-decoration: underline;
}
a:visited {
	color: #8EBEDA;
	font-family: Roboto, sans-serif;
	text-decoration: underline;
	text-decoration-style: double;
}
a:hover {
	color: #8EBEDA;
	font-family: Roboto, sans-serif;
	text-decoration: underline;
	text-decoration-style: double;
}
a:active {
	color: #8EBEDA;
	font-family: Roboto, sans-serif;
	text-decoration: underline;
	text-decoration-style: double;
}


a#quoteButton {
	font-family: Roboto, sans-serif;
	color: #081226;
	font-weight: 500;
	background-color: #8EBEDA;
	margin-top: 5%;
	text-decoration: none;
}
a#quoteButton:visited {
	font-family: Roboto, sans-serif;
	color: #081226;
	font-weight: 500;
	background-color: #8EBEDA;
	margin-top: 5%;
	text-decoration: none;
}
a#quoteButton:hover {
	font-family: Roboto, sans-serif;
	color: #8EBEDA;
	font-weight: 500;
	background-color: #081226;
	margin-top: 5%;
	border: 0.03em solid #8EBEDA;
	text-decoration: none;
}
a#quoteButton:active {
	font-family: Roboto, sans-serif;
	color: #8EBEDA;
	font-weight: 500;
	background-color: #081226;
	margin-top: 5%;
	border: 0.03em solid #8EBEDA;
	text-decoration: none;
}

img#image {
	width: 100%;
	object-fit: contain;
}
div#id {
	visibility: hidden;
}
div#url {
	visibility: hidden;
}











@media screen and (max-width: 900px) { 


	   ul.navbar {
		list-style-type: none;
		margin: 0;
		padding: 0;
		background-color: #8EBEDA;
		overflow: hidden;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		justify-content: center;
		border-bottom: 0.2em solid #8EBEDA;
		border-top: 0.2em solid #8EBEDA;
	  }
	li a.navlink {
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		color: #081226;
		padding: 3%;
		width: 5em;
		justify-content: center;
		align-items: center;
		font-family: Roboto, sans-serif;
		text-decoration: none;
		font-weight: 500;
		font-size: 1.2em;
		background-color: #8EBEDA;
		width: 100%;
	}
	li a.navlink:hover {
		background-color: #081226;
		color: #8EBEDA;
	}


	   div.bodycontent#thecontent {
		display: block;
		width: 100%;
		margin: auto;
		padding: 0.02em 1em 1.5em 1em;
	}
	h1 {
		font-size: 2em;
		padding-left: 1%;
	}
	h2 {
		font-size: 1.6em;
	}
	h3 {
		font-size: 1.6em;
	}
	p {
		padding-left: 1%;
		font-size: 0.9em;
		line-height: 1.5em;
	}
	a {
		font-size: 0.9em;
	}

	a#quoteButton {
		font-size: 0.9em;
		padding: 2%;
	}

	div#breed_data {
		line-height: 1.5em;
	}
	img#breed_image {
		width: 70%;
	}
	select.breed_select {
		width: 40%;
		font-size: 0.9em;
	}
	td:first-child {
		font-size: 0.9em;
	}
	td:last-child {
		font-size: 0.9em;
	}
	div#buttonContainer {
		text-align: center;
	}



	
}

@media screen and (min-width: 901px) {


	   ul.navbar {
		list-style-type: none;
		margin: 0;
		padding: 0;
		background-color: #8EBEDA;
		overflow: hidden;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		align-items: center;
		background-image: url(../images/pawprints.png);
			background-position: center;
			background-repeat: repeat-x;
			background-size: 15vw;
		
	  }
	li a.navlink {
		display: flex;
		display: -webkit-flex;
		flex-wrap: nowrap;
		color: #081226;
		padding: 15%;
		width: 5em;
		justify-content: center;
		font-family: Roboto, sans-serif;
		text-decoration: none;
		font-weight: 500;
		font-size: 1.3em;
		background-color: #8EBEDA;
	}
	li a.navlink:hover {
		background-color: #081226;
		color: #8EBEDA;
	}

	   div.bodycontent#thecontent {
		margin: auto;
		display: grid;
		grid-template-columns: 30% 30% 30%;
		justify-content: space-evenly;
		align-content: center;

	}

	div.columnone#firstcolumn {
		grid-column: 1 / span 1;
		grid-row: 1;
		margin-top: 4em;
	}
	div.columntwo#secondcolumn {
		grid-column: 2 / span 1;
		grid-row: 1;
	}
	div.columnthree#thirdcolumn {
		grid-column: 3 / span 1;
		grid-row: 1;
		margin-top: 4em;
	}

	h1 {
		font-size: 3em;
		padding-left: 3%;
	}
	h2 {
		font-size: 2.5em;
	}
	h3 {
		font-size: 2.5em;
	}
	p {
		padding-left: 1%;
		font-size: 1.1em;
		line-height: 2em;
	}
	a {
		font-size: 1.1em;
	}
	a#quoteButton {
		font-size: 1.1em;
		padding: 4% 3% 4% 3%;
	}

	div#breed_data {
		line-height: 2em;
	}
	img#breed_image {
		width: 40%;
	}
	table#breed_data_table {
		width: 70%;
	}
	select.breed_select {
		width: 20%;
		font-size: 1.1em;
	}
	td:first-child {
		font-size: 1.1em;
	}
	td:last-child {
		font-size: 1.1em;
	}
	div#buttonContainer {
		text-align: right;
	}





}