@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');

:root {
    --header: rgba(225, 230, 225, .35);
    --text: rgba(250, 250, 250, 1);
    --text2: rgba(255, 250, 250, .85);
    --menu: rgba(192, 192, 192, 1);
    --menu_hover: rgba(255, 250, 250, 1);
    --blue: rgba(47, 64, 117, 1);
    --dark: rgba(73, 57, 59, 1);
	--light: rgba(255, 255, 255, 1);
    --visited: rgba(83, 0, 0, 1);
    --sales: rgba(33, 32, 32, 1);
    --links: rgba(128, 0, 0, 1);
	--reg_link: rgba(241, 228, 21, 1);
	--reg_visited: rgba(94, 128, 234, 1);
    --toggle: rgba(115, 147, 126, 1);
    --footer: rgba(221, 225, 223, .25);
	--linkvisited: rgba(154, 163, 159, 1);
	--bulltop: rgba(2, 60, 35, .85);
	--bullbottom: rgba(0, 0, 0, .85);
	--red: rgba(251, 0, 0, 1);
}

body {
    background: url(/images/bkgn.jpg);
	background-size: cover;
	background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    font-family: 'Acme', serif;
    text-align: center;
}

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

/*containers
============*/
.container {
	width: 95%;
	margin: 0 auto;
    padding-top: 8em;
	display: grid;
	gap: 1.25em;
}

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

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

.container-pictures {
	width: 95%;
	margin: 0 auto;
	padding-top: 2em;
	display: grid;
}

/*typography
============*/
h1 {
    font-size: 1.25rem;
    color: var(--text2);
}

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

h3 {
    font-size: 1.5rem;
    color: var(--text2);
}

nav a:link {
    color: var(--links);
}

nav a:visited {
    color: var(--visited);
}

.container a:link {
	color: var(--text2);
}

.container a:visited {
	color: var(--linkvisited);
}

.bull-page a:link,
.showrite a:link {
	color: var(--reg_link);
	text-decoration: none;
}

.bull-page a:visited,
.showrite a:visited {
	color: var(--reg_visited);
}

.pedigree {
	text-transform: uppercase;
}

.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;
}

.info {
	font-size: .75rem;
	font-weight: 700;
}

.red {
	font-weight: 700;
	color: var(--red);
}

.bull-letter {
	font-weight: 700;
	color: var(--text);
}

/*pictures
============*/
.photo {
	filter: drop-shadow(.35em .35em .35em);
	padding: 1em;
	color: var(--dark);
}

.photo_light {
	filter: drop-shadow(.35em .35em .35em);
	padding: 1em;
	color: var(--light);
}

/*header & nav
============*/
header {
    background: var(--header);
    font-family: 'Acme', serif;
    text-align: center;
    position: absolute;
    margin-top: auto;
    z-index: 999;
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    justify-items: center;
}

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

nav {
    margin: 0;
    padding: 0;
    grid-row: 2;
}

.logo {
    margin: 0;
    padding: 0 1em;
    grid-row: 1;
}

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(--menu);
	text-transform: uppercase;
	font-size: .95em;
	top: -5px;
}

nav a {
	display:block;
	padding: .85em 1.2em;	
	color: var(--text);
	font-size: .95em;
	text-decoration:none;
	text-transform: uppercase;
}


nav ul li ul li:hover { 
    background: var(--menu_hover);
	font-size: .95em; 
}

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

nav ul ul {
	display: none;
	position: absolute; 
	top: 47px; 
}
	
nav ul li:hover > ul {
	display: inherit;
}
	
nav ul ul li {
	width: 9.75em;
	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;
	}

	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: .5em 1.2em;	
		color: #FFF;
		font-size: .9em;
		text-decoration:none;
		border:none;
	}

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

	[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(--toggle);
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding: .5em 1.2em;	
		color:#FFF;
		font-size: .9em; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: var(--toggle); 
	}

	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) {
	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 li {
		top: -8px;
	}

	nav ul ul {
		top: 64px;
	}

	nav ul ul li {
		width: 11em;
	}

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

/*home
============*/
.welcome,
.welcome2 {
	background: var(--blue);
	padding: 3em;
    margin-top: 1em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .75em;
}

.picture1 {
    background: var(--dark);
	padding: 3em;
    margin-top: 1em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .75em;
}

.picture2,
.picture4 {
    background: linear-gradient(var(--menu), var(--sales));
	padding: 3em;
    margin-top: 1em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .75em;
}

.picture3 {
    background: linear-gradient(var(--menu), var(--blue));
	padding: 3em;
    margin-top: 1em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .75em;
}

.catalog {
	background: var(--blue);
	padding-left: 2em;
	padding-right: 2em;
	padding-top: .5em;
	padding-bottom: .5em;
	margin: auto;
	align-content: center;
	-moz-box-shadow: 9px 9px 5px #000;
	-webkit-box-shadow: 15px 15px 5px #000;
	box-shadow:15px 15px 5px #000
}

.sales4,
.sales,
.sales1,
.sales2 {
	background: linear-gradient(var(--menu), var(--blue));
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: .5em;
	margin: auto;
	align-content: center;
	-moz-box-shadow: 9px 9px 5px #000;
	-webkit-box-shadow: 15px 15px 5px #000;
	box-shadow:15px 15px 5px #000
}

.sales3 {
	background: var(--sales);
	padding-left: 2em;
	padding-right: 2em;
	padding-top: .5em;
	padding-bottom: .5em;
	margin-top: 1em;
	position: relative;
}

.welcome,
.welcome2,
.sales,
.sales1,
.sales4,
.picture1,
.picture2,
.picture3 {
	margin: auto;
}

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

.bull-page {
	color: var(--text);
}

.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;
}

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

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

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

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

.bull-letter {
	background: var(--dark);
}



/*other pages
============*/
.info1 {
	background: linear-gradient(var(--menu), var(--blue));
	padding: 3em;
    margin-top: 1em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .75em;
}

.info2 {
	background: linear-gradient(var(--menu), var(--bulltop));
	padding: 3em;
	margin-top: 1em;
	outline: 2px solid #FFF;
	outline-offset: -2.5em;
	color: #FFF;
	position: relative;
	font-size: .75em;
}


/*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;
}


/*media query
============*/
@media screen and (min-width:800px) {
	.container,
	.container-bull-list {
		padding-top: 15em;
		grid-template-columns: auto;
		grid-template-rows: auto;
		gap: 1.5em;
	}

	.catalog {
		grid-column: 1/3;
		grid-row: 1/2;
	}
	
	.sales4 {
		grid-column: 1/3;
		grid-row: 3/4;
	}
	
	.pics {
		grid-template-columns: auto;
		grid-template-rows: auto;
		gap: 1.5em;
	}
	.image1 {
		grid-column: 1/2;
	}

	.image2 {
		grid-column: 2/3;
	}
	
	.sales {
		grid-column: 1/2;
		grid-row: 4/5;
	}

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

	.sales2 {
		grid-column: 1/3;
		grid-row: 5/6;
	}

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

	.welcome {
		grid-column: 1/3;
		grid-row: 7/8;
		font-size: 1.2em;
	}

	.picture4 {
		grid-column: 1/3;
		grid-row: 8/9;
		font-size: 1.2em;
	}
	
	.picture1 {
		grid-column: 2/3;
		grid-row: 9/10;
		font-size: 1.2em;
	}

	.picture2 {
		grid-column: 1/2;
		grid-row: 9/10;
		font-size: 1.2em;
	}

	.picture3 {
		grid-column: 1/3;
		grid-row: 10/11;
		font-size: 1.2em;
	}

	.welcome2 {
		grid-column: 1/2;
		grid-row: 5/6;
		font-size: 1.25em;
	}

	.bull {
		padding-top: 16em;
	}

	.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;
	}

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

	.info1,
	.info2 {
		font-size: 1em;
	}

	.info1 h1,
	.info2 h1 {
		font-size: 1.75em;
	}

	.info1_crystalyx {
		font-size: 1.5em;
	}

	.info2_crystalyx {
		font-size: 1.35em;
	}

	.showrite {
		gap: 1.5em;
	}
	
	.logo_showrite {
		grid-column: 1/4;
	}
	
	.info1_showrite {
		grid-column: 1/4;
		font-size: 1.5em;
	}
	
	.pic_cattle {
		grid-row: 3;
		grid-column: 1/2;
	}
	
	.pic_goat {
		grid-row: 3;
		grid-column: 2/3;
	}
	
	.pic_lamb {
		grid-row: 3;
		grid-column: 3/4;
	}
	
	.pic_pig {
		grid-row: 4;
		grid-column: 1/2;
	}
	
	.pic_poultry {
		grid-row: 4;
		grid-column: 2/3;
	}
	
	.pic_rabbit {
		grid-row: 4;
		grid-column: 3/4;
	}
}

@media screen and (min-width:1200px) {
	.container,
	.bull,
	.container-bull-list {
		width: 85%;
		padding-top: 17em;
	}

	.info1,
	.info2 {
		font-size: 1.5em;
	}

	.info1 h1,
	.info2 h1 {
		font-size: 2em;
	}

	.info1_crystalyx {
		font-size: 2em;
	}

	.info2_crystalyx {
		font-size: 1.5em;
	}

	.logo_showrite {
		grid-column: 1/7;
	}
	
	.info1_showrite {
		grid-column: 1/7;
		font-size: 2em;
	}
	
	.pic_cattle {
		grid-row: 3;
		grid-column: 1/2;
	}
	
	.pic_goat {
		grid-row: 3;
		grid-column: 2/3;
	}
	
	.pic_lamb {
		grid-row: 3;
		grid-column: 3/4;
	}
	
	.pic_pig {
		grid-row: 3;
		grid-column: 4/5;
	}
	
	.pic_poultry {
		grid-row: 3;
		grid-column: 5/6;
	}
	
	.pic_rabbit {
		grid-row: 3;
		grid-column: 6/7;
	}

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

@media screen and (min-width:1500px) {
	.container,
	.bull,
	.container-bull-list {
		width: 65%;
		padding-top: 19em;
	}
}

@media screen and (min-width:1900px) {
	.container,
	.bull,
	.container-bull-list {
		width: 55%;
		padding-top: 20em;
	}
}

@media screen and (min-width:2900px) {
	.container,
	.bull,
	.container-bull-list {
		width: 45%;
		padding-top: 20em;
	}
}

@media screen and (max-width: 800px) {
	.video {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}

	.video iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
}