@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@400;700&family=Roboto+Slab:wght@300;400;500;700&display=swap');

:root {
    --header: rgba(167, 170, 168, .55);
    --grey: rgba(73, 75, 74, .85);
    --dark: rgba(22, 22, 22, 1);
	--green: rgba(0, 102, 51, .85);
	--green1: rgba(0, 80, 32, 1);
	--maroon: rgba(139, 0, 0, 1);
	--yellow: rgba(255, 255, 0, .85);
	--links: rgba(203, 209, 206, 1);
	--footer: rgba(221, 225, 223, .5);
	--blue: rgba(109, 142, 226, 1) 	
}


body {
	background: url(/images/curr_bg.gif);
	color: #ffffff;
	margin: 0;
	padding: 0;
    font-family: 'Roboto Slab', serif;
    text-align: center;
	}

img {
    max-width: 85%;
    height: auto;
}

/*containers
============*/
.container {
	width: 95%;
	margin: 0 auto;
}

.container-bull-list {
	width: 95%;
	margin: 0 auto;
	padding-top: 1em;
}

.container-bull {
	width: 95%;
	margin: 0 auto;
	padding: 1em;
	background: linear-gradient(var(--green), var(--dark));
}


/*typography
============*/
h1 {
	font-family: 'Dancing Script', cursive;
	font-size: 1.25rem;
}

h2 {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .05rem;
}

h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #FFF;
	text-transform: uppercase;
	text-align: left;
	padding-left: 1em;
}

h4 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #FFF;
	text-transform: uppercase;
	font-family: 'Dancing Script', cursive;
}

.semen-cert {
	font-size: .75em;
}

.epds {
	color: var(--text);
}

.epd_label {
	color: black;
	font-size: .75rem;
	font-weight: 700;
}

.epd_num {
	color: var(--text);
	font-size: .75rem;
	font-weight: 700;
}

.epd_trait {
	background-color: red;
	font-size: .75rem;
	font-weight: 700;
}

.pedigree {
	text-transform: uppercase;
}

.merit {
	font-weight: 700;
	color: var(--blue);
	padding-left: .25em;
	padding-right: .25em;
}

@media screen and (min-width:1900px) {
	h1 {
		font-size: 1.45rem;
	}
	.semen-cert {
		font-size: .85em;
	}
}

@media screen and (min-width:2000px) {
	h1 {
		font-size: 1.5em;
	}
}


/*header & nav
============*/
header {
    background-image: url(/images/banner.jpg);
	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: cover; 
  	width: 100%;
	/**background: var(--header);**/
    font-family: 'Poppins', sans-serif;
    margin-top: auto;
    z-index: 999;
    display: grid;
    grid-template-columns: auto;
}

.toggle,
[id^=drop] {
	display: none;
}

nav { 
	margin:0;
	padding: 0;
    grid-column: 2/3;
}

.logo {
    margin: 0;
    padding: 0 1em;
    grid-column: 1/2;
    max-width: 85%;
}

nav:after {
	content:"";
	display:table;
	clear:both;
}

nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: var(--grey);
	}

nav a {
	display:block;
	padding: .85em 1.2em;	
	color:#FFF;
	font-size: .7em;
	text-decoration:none;
}


nav ul li ul li:hover { 
    background: var(--dark); 
}

nav a:hover { 
	background-color: var(--dark); 
}

nav ul ul {
	display: none;
	position: absolute; 
	top: 35px; 
}
	
nav ul li:hover > ul {
	display: inherit;
}
	
nav ul ul li {
	width: 6.25em;
	float: none;
	display: list-item;
	position: relative;
	z-index: 999;
}

nav ul ul ul li {
	position: relative;
	top: -2.2em;
	left: 6.25em; 
}

li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/*nav Media Queries
============ */

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

	header {
        grid-template-rows: auto;
        justify-content: center;
    }
    
    .logo {     
		text-align: center;
		grid-row: 1/2;
        grid-column: 1/3;
        margin: auto;
		max-width: 65%;
	}

	nav {
		margin: 0;
        grid-row: 2/3;
        grid-column: 1/3;
	}

	nav a  {
		font-size: .9em;
	}
	nav ul {
		float: none;
	}

	.toggle + a,
	.menu {
		display: none;
	}

	.toggle {
		display: block;
		background-color: var(--grey);
		padding: .85em 1.2em;	
		color: #FFF;
		font-size: 1.06em;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: var(--dark);
	}

	[id^=drop]:checked + ul {
		display: block;
	}

	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 2.5em;
	}

	nav ul ul ul a {
		padding: 0 5em;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: var(--dark);
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding: .85em 1.2em;	
		color:#FFF;
		font-size: 1.06em; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: var(--dark); 
	}

	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
	}
		
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

@media screen and (min-width:1200px) {
	.logo {
		max-width: 65%;
	}
	
	nav a {
		font-size: .9em;
	}

	nav ul ul {
		top: 45px;
	}

	nav ul ul li {
		width: 9em;
	}

	nav ul ul ul li {
		top: -2.85em;
		width: 9em;
		left: 9em;
	}
}

@media screen and (min-width:1900px) {
	.logo {
		padding-left: 6em;
	}
	
	nav a {
		font-size: 1.25em;
	}

	nav ul ul {
		top: 64px;
	}

	nav ul ul li {
		width: 11em;
	}

	nav ul ul ul li {
		top: -4em;
		width: 11em;
		left: 11em;
	}
}

/*picture
============*/
.picture {
	padding-top: 1.1em;
	padding-bottom: .5em;
	margin: auto;
	align-content: center;
}

.photo {
	filter: drop-shadow(.25em .25em .25em);
	padding: 1em;
	color: var(--dark);
}

/*welcome
============*/
.welcome {
	background: var(--green);
	padding: 3em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .75em;
}

/*contact
============*/
.contact {
	background: var(--maroon);
	padding: 3em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .85em;
	margin-top: 1em;
	margin-bottom: 1em;	
}

.contact a {
	color: var(--links);
	text-decoration: none;
}

.contact a:hover {
	color: var(--yellow);
	text-decoration: underline;
}

/*specials
============*/
.specials {
	background: var(--dark);
	padding: 3em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .85em;
	margin-bottom: 1em;
	margin-top: 1em;	
}

.specials p {
	text-align: left;
	font-size: .85em;
}

.specials h1 {
	color: red;
}

/*news
============*/
.news {
	background: linear-gradient(var(--green), var(--dark));
	padding: 3em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .85em;
}

.news p{
	text-align: left;
	font-size: .85em;
}

/*recent
============*/
.recent {
	background: linear-gradient(var(--dark), var(--maroon));
	padding: 3em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .85em;
}

.recent p{
	text-align: center;
	font-size: .85em;
}

/*footer
============*/
footer {
	background: var(--footer);
	font-size: .75rem;
	font-weight: 700;
	color: var(--dark);
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	justify-content: center;
	gap: 5em;
	margin-top: 3em;
	padding-bottom: 1em;
	}

footer a {
	color: inherit;
	}

.footer-nav {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	}

.footer-social {
	grid-column: 2/3;
	grid-row: 1/2;
	}

.footer-nav,
.footer-social {
	list-style: none;
	margin: .5em;
	padding: .5em;
	}

.footer-nav a {
	text-decoration: none;
}

.footer-nav a:hover {
	text-decoration: underline;
}

.social-link {
	display: inline-block;
	margin-bottom: 5px;
}

.social-icon {
	width: 75px;
}

.extra {
	font-size: .5rem;
	margin-right: .5em;
	grid-column: 1/2;
	grid-row: 2/3;
}

.extra2 {
	font-size: .5rem;
	margin-right: .5em;
	grid-column: 2/3;
	grid-row: 2/3;
}

/*bull list
============*/
.bull-letter {
	background: var(--dark);
}

.bull-list {
	background: linear-gradient(var(--green), var(--dark));
	grid-template-rows: auto;
	grid-template-columns: repeat(2, 1fr);
	display: grid;
	font-size: .85em;
	padding-left: .25em;
	padding-right: .25em;
}

.bull-list a {
	color: var(--links);
	text-decoration: none;
}

.bull-list a:hover {
	color: var(--yellow);
	text-decoration: underline;
}

/*bulls
============*/
.bull {
	padding-top: 1em;
	padding-bottom: .5em;
	margin: auto;
	align-content: center;
}

.bull-page a {
	color: var(--links);
	text-decoration: none;
}

.bull-page a:hover {
	color: var(--yellow);
	font-weight: 600;
	text-decoration: underline;
}

.pedigree {
	display: flex;
	justify-content: center;
	font-size: .75rem;
	align-content: center;
	text-align: left;
}

.epds {
	width: 100%;
	margin: 0;
	padding: 0;
}

/*shipping
============*/
.shipping {
	background: linear-gradient(var(--green), var(--dark));
	padding: 3em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .85em;
	margin-bottom: 1em;
	margin-top: 1em;	
}

/*catalogs
============*/
.catalogs {
	background: linear-gradient(var(--green), var(--dark));
	padding: .5em;
	color: #FFF;
	font-size: .85rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	align-items: center;
	font-size: .85rem;
}

.sale-catalog {
	background: var(--dark);
}

/*media query
============*/
@media screen and (min-width:700px) {
	.container {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto;
		gap: 1em;
	}

	h3 {
		font-size: 1.5rem;
	}
	
	.specials {
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.news {
		padding: 4em;
	}

	.contact {
		margin: 0;
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.recent {
		grid-column: 1/3;
		grid-row:  3/4;
	}

	.vertical-center {
		margin: 0;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%, -50%);
		left: 50%;
  		transform: translate(-50%, -50%);
	}

	.welcome {
		grid-column: 1/3;
		grid-row: 4/5;
	}

	.bull-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.bull-page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
	}

	.picture {
		grid-column: 1/2;
		align-self: flex-start;
		padding-top: 1em;
	}

	.info-pedigree {
		grid-column: 2/3;
	}

	.info-pedigree-no-pic {
		grid-column: 1/3;
	}

	.epds {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: 1fr 1fr 1fr;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.epd {
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.epd1 {
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.epd2 {
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.epd3 {
		grid-column: 3/4;
		grid-row: 2/3;
	}

	.epd_label {
		font-size: .70rem;
		font-weight: 700;
	}
	
	.epd_num {
		color: var(--text);
		font-size: .70rem;
		font-weight: 700;
	}
	
	.epd_trait {
		background-color: red;
		font-size: .70rem;
		font-weight: 700;
	}
	
	.x_photos {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		margin-top: 1em;
	}

	.x_photo {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		margin-top: 1em;
	}
}

@media screen and (min-width:1200px) {
	.container,
	.container-bull-list,
	.container-bull {
		width: 85%;
	}
	.bull-list {
		grid-template-columns: repeat(4, 1fr);
		font-size: 1em;
	}
}

@media screen and (min-width:1500px) {
	.container,
	.container-bull-list,
	.container-bull {
		width: 75%;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}

@media screen and (min-width:1900px) {
	.container,
	.container-bull-list,
	.container-bull {
		width: 65%;
	}

	.specials,
	.news,
	.contact,
	.welcome,
	.shipping {
		font-size: 1em;
	}
}

@media screen and (min-width:2000px) {
	.specials,
	.news,
	.contact,
	.welcome,
	.shipping {
		font-size: 1.35em;
	}
}