@charset "utf-8";

:root {
	--color1: #24206f; /* Midnight Blue */
	--color2: #DCE2AA; /* Pale Goldenrod */
	--color3: #B4D2BA; /* Ash Grey */
	--color4: #b57f50; /* Deer */
	--color5: #4b543b; /* Rifle Green */
}
img {
    max-width: 100%;
    height: auto;
	box-sizing: border-box;
}
blockquote {
    margin: auto;
	background-color: var(--color3);
	font-style: italic;
	font-weight: 600;
	font-color: var(--color5);
	padding: 10px;
    width: 100%;
}
h1, .h1 {
  font-size: 1.75rem;
}
h2, .h2 {
  font-size: 1.5rem;
}
h3, .h3 {
  font-size: 1.3rem;
}
h4, .h4 {
  font-size: 1.2rem;
}
h5, .h5 {
  font-size: 1.1rem;
}
h6, .h6 {
  font-size: 1rem;
}
/*----------------- Header Stuff  --------------------*/
.wrapper-lg {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 1080px) 1fr;
}
.filler-left {
    background: linear-gradient(to left, var(--color1), white);
}
.filler-right {
    background: linear-gradient(to right, var(--color1), white);
}
.header {
    background-color: var(--color1);
	border-color: var(--color1);
	border-style: solid;
	border-width: 4px 4px 0 4px;
}
.header-logo {
    display: grid;
    background-image: url(../images/header-logo-340.png);
    background-repeat: no-repeat;
    background-position: bottom center;
	height: 30px;
}
.header-logo div {
    align-self: end;
	padding: 4px;
}
.social-media {
    display: grid;
    grid-template-columns: 150px 1fr 52px 52px 52px 52px 52px;
    align-self: end;
    visibility: collapse;
    height: 0px;
}
.content {
    padding: 0px;
	border-color: var(--color1);
	border-style: solid;
	border-width: 0 4px 0 4px;
	background-color: var(--color2);
}
.footercontent {
    padding: 0px;
	border-color: var(--color1);
	border-style: solid;
	border-width: 0 4px 0 4px;
	background-color: var(--color1);
}
.carousel-item img {
	width: 100%;
	box-sizing: border-box;
}

/*--------------- Misc. CSS Formatting -------------------*/
.smallright {
	font-size: .75rem;
	text-align: right;
	margin: 0px;
	padding: 0px;
}
.story {
	background-color: #FFFFFF;
	padding: 5px;
	margin: 5px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.photoright, .photoleft {
	width: 100%;
	background-color:var(--color3);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
}
.photoplainright {
	margin: 15px;
	min-width: 35%;
	max-width: 280px;
	float: right;
	clear: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
}
.photoplainright img {
	width: 100%;
	box-sizing: border-box;
}
.photoplainleft {
	margin: 15px;
	min-width: 35%;
	max-width: 280px;
	float: left;
	clear: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
}
.photoplainleft img {
	width: 100%;
	box-sizing: border-box;
}
.divsec {
	clear: both;
	margin: 5px;
}
.bu {
	font-weight: bold;
	text-decoration: underline;
}
.bi {
	font-style: italic;
	font-weight: bold;
}
.biu {
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
}
.boxright, .boxleft {
	width: 100%;
	background-color:var(--color3);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
}
.boxright img, .boxleft img {
	width: 100%
	box-sizing: border-box;
}
.boxright p, .boxleft p {
	text-align: center;
}
.submenu {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	min-width: 280px;
	max-width: 80%;
	text-align: center;
	line-height: 1.8
}
.submenu a {
	text-decoration: none;
	background-color: var(--color3);
	padding: 1px 2px 1px 2px;
	border: thin solid var(--color4);
}
.box400 {
	padding: 5px;
	margin: 5px;
	height: auto;
	min-width: 260px;
	max-width: 400px;
	border: 2px dotted var(--color1);
	background: linear-gradient(to bottom, var(--color2), white);
}
.featuredphoto {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: thin solid var(--color1);
}
.featuredphoto img {
	width: 100%;
	box-sizing: border-box;
}

/* -------------------- Two Columns ----------------------- */
.first-column {
    width: 100%;
	box-sizing: border-box;
    padding-bottom: 10px;
    float: none;
}
.second-column {
	width: 100%;
    padding-bottom: 10px;
    float: none;
	clear: right;
}

/* ---------------------- Dividers ------------------------- */
.subtitledivider {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color3);
	padding: 20px;
	margin-bottom: 15px;
	clear: both;
}
.subtitledivider h2 {
	font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font: bold;	
	color: var(--color1);
}
.notedivider {
	font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: var(--color5);
	background-color: white;
	padding: 15px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	clear: both;
	font-weight: bold;
	font-style: italic;
	text-align: center;
}

/* ---------- For Featured Items on Front Page ----------- */


.featurecontainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34ch, 1fr));
    grid-gap: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.featureitem {
    padding: 10px;
    justify-content: flex-start;
    text-align: left;
	background-color: white;
}
.featureitem img {
	width: 100%;
    border-radius: 10px;
    border: thin solid var(--color1);
}
.featureitem h2 {
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font: bold;	
	color: var(--color1);
}
.dividingbanner {
	width: 100%;
	box-sizing: border-box;
	height: 100px;
	background-repeat: no-repeat;
    background-position: bottom center;
}

/* ------------- For Generic Double Column  --------------- */

.dblcolcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42ch, 1fr));
    grid-gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.dblcolitem {
    padding: 10px;
    justify-content: flex-start;
    text-align: left;
	background-color: var(--color3);
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.dblcolitem h2 {
    font: bold;	
	color: var(--color1);
}
.dblcolitem img {
	width: 100%;
	box-sizing: border-box;
}

/* ------------- For Showing Inventory Listings ------------- */

.invcontainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(28ch, 1fr));
	grid-gap: 10px;
}
.invitem {
    background-color: #FFFFFF;
    padding: 10px;
    justify-content: flex-start;
    text-align: left;
}
.invitem h2 {
	font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font: bold;	
}
.invitem img {
	width: 100%;
	box-sizing: border-box;
    border-radius: 10px;
    border: thin solid var(--color1);
}
.invitem h3 {
	text-align: center;
	font: bold;	
	font-size: 1.3em;
}
.invcategory {
    background-color: #FFFFFF;
    padding: 10px;
    justify-content: flex-start;
	display: grid;
	grid-template-columns: 5fr 2fr;
}

/* ------------- Individual Inventory Listing ------------- */

.inv-photo { 
	grid-area: g-photo;
}
.inv-info1 { 
	grid-area: g-info1;
	background-color: #FFFFFF;
	padding: 5px;
}
.inv-info2 { 
	grid-area: g-info2;
	background-color: #FFFFFF;
	padding: 5px;
}
.inv-desc { 
	grid-area: g-desc;
	background-color: #FFFFFF;
	padding: 5px;
}
.inv-l { 
	grid-area: g-l;
}
.inv-r { 
	grid-area: g-r;
}
.wrapper-inv {
    display: grid;
	grid-template-areas: 
		"g-l g-photo g-photo g-r"
		"g-l g-info1 g-info2 g-r"
		"g-l g-desc g-desc g-r";
	grid-template-columns: 1fr minmax(250px, 600px) 1fr 1fr;
	grid-gap: 0px;
	padding: 0px;
	background-color: var(--color2);
}


/* ------------- For Showing Progeny Listings ------------- */

.progenycontainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
	grid-gap: 0px;
	justify-content: center;
	background-color:var(--color2);
	padding: 5px;
}
.progenycontainer div {
    background-color: #FFFFFF;
    padding: 8px;
	margin: 5px;
    justify-content: flex-start;
    text-align: center;
	background-color: white;
}
.progenycontainer img {
	width: 100%;
	box-sizing: border-box;
    border-radius: 10px;
    border: thin solid var(--color1);
}

/* ------------- For Displaying Pedigrees ------------------- */

.pedbox {
	background-color: #FFFFFF;
	padding: 10px;
	margin: 10px;
}
.ped2ndgen {
	vertical-align: middle;
	font-size: 1.5rem;
}
.ped2ndgen:hover {
	text-decoration: none;
	font-size: 1.8rem;
}
.ped3rdgen {
	vertical-align: middle;
	font-size: 1.25rem;
}
.ped4thgen {
	vertical-align: middle;
	font-size: 1rem;
}
.ped5thgen {
	vertical-align: middle;
	font-size: .75rem;
	visibility: collapse;
    height: 0px;
	width: 0px;
}

/* ------------------- Media Queries ------------------------ */

/* Small Devices Only */		
@media only screen and (max-width: 399px) {
.header-logo {
    background-image: url(../images/header-logo-400.png);
}
}
/* Tablets and Small Desktops*/
@media only screen and (min-width: 520px) {
.header {
    background-image: url("../images/header-background-1080.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    text-align: center;
}
.header-logo {
    background-image: url(../images/header-logo-700x280.png);
	height: 272px;
}
.social-media {
    visibility: visible;
    height: auto
}
.photoright {
	float: right;
	min-width: 30%;
	max-width: 280px;
	margin: 5px;
	padding: 5px;
    border: thin solid var(--color1);
}
.photoleft {
	float: left;
	min-width: 30%;
	max-width: 280px;
	margin: 5px;
	padding: 5px;
    border: thin solid var(--color1);
}
.boxright {
	min-width: 280px;
	max-width: 40%;
	float: right;
	margin: 5px;
	padding: 5px;
	border: thin solid var(--color1);
}
.boxleft {
	min-width: 280px;
	max-width: 40%;
	float: left;
	margin: 5px;
	padding: 5px;
	border: thin solid var(--color1);
}
.content {
	padding: 20px;
}
.wrapper-inv {
	grid-gap: 5px;
	padding: 5px;
}
.inv-photo {
	padding: 5px;
	background-color: var(--color5);
}
}

/* Desktops and Small Desktops*/		
@media only screen and (min-width: 700px) {
h1, .h1 {
  font-size: 2.5rem;
}
h2, .h2 {
  font-size: 2rem;
}
h3, .h3 {
  font-size: 1.6rem;
}
h4, .h4 {
  font-size: 1.2rem;
}
h5, .h5 {
  font-size: 1rem;
}
h6, .h6 {
  font-size: .8rem;
}
.header-logo {
    background-image: url(../images/header-logo-800x280.png);
}
.carousel-item img {
	width: 90%;
}
.wrapper-inv {
	grid-template-areas: 
		"g-l g-photo g-info1 g-r"
		"g-l g-photo g-info2 g-r"
		"g-l g-desc g-desc g-r";
	grid-template-columns: 1fr minmax(320px, 560px) minmax(140px, 180px) 1fr;
	grid-gap: 10px;
	padding: 10px;
}
.ped5thgen {
	vertical-align: middle;
	font-size: .75rem;
	visibility: visible;
    height: auto;
	width: auto;
}
.subtitledivider {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}	
.first-column {
    width: 66%;
    padding: 10px;
    float: left;
}
.second-column {
    width: 33%;
    padding: 10px;
    float: right;
	clear: right;
}
}
/* Medium Desktops*/		
@media only screen and (min-width: 820px) {
.header-logo {
    background-image: url(../images/header-logo-920x280.png);
}
.carousel-item img {
	width: 85%;
}
.featuredphoto {
	width: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
}    blockquote {
    width: 80%;
}
}

/* Larger Desktops*/		
@media only screen and (min-width: 930px) {
.header-logo {
    background-image: url(../images/header-logo-1080x280.png);
}
	.carousel-item img {
	width: 80%;
}
.featuredphoto {
	width: 60%;
}
}