@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap');

body {
	background-image: url(graphics/bg.jpg);	
	margin: 0;
	padding: 0;
	font-family: 'Oswald', sans-serif;
}

.logo {
	width: 270px;
	margin: auto;
	margin-top: -130px;
	margin-bottom: 30px;
	z-index: 9;
}

.topper {
	width: 100%;
	max-height: 50px;
	background-color: #FABD03;
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
}
header {
	width: 1150px;
	margin: auto; 	
}

nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 600px;
	margin: auto;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	margin-top: -55px;
	z-index: 8;

}

nav a, .dropdown {
	color: white;
	text-decoration: none;	
	font-family: 'Oswald', sans-serif;
	padding: 15px;
	width: 58px;
	text-align: center;
}


nav a:hover, .dropdown:hover, nav .active {
	background-color: rgba(0,0,0,0.7);
	color: #FABD03;
	cursor: pointer;
}
.dropmenu {
	display: none;	
	font-size: 14px;
}

.dropmenu a {
	padding: 0px;
	text-align: center;
	width: 58px;
	margin-top: 10px;
}

 .dropdown:hover .dropmenu {
	 padding: 15px;
	 background-color: black;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		width: 58px;
		position: absolute;
		margin-left: -15px; 
 }
 
 .heroimage {
	background-color: black;
	width: 100%;
	overflow-x: hidden;
 }
 
 .mySlides  {
	z-index: 9; 
	background-color: #630;
	position: relative;
 }
 
 .heroimage img {
		opacity: 0.5; 
 }
 
 .w3-animate-fading{-webkit-animation:fading 8s infinite;animation:fading 8s infinite}@-webkit-keyframes fading{0%{opacity:0}50%{opacity:0.5}100%{opacity:0}}@keyframes fading{0%{opacity:0}50%{opacity:0.5}100%{opacity:0}}
 
 .familypicture {
		width: 500px;
		margin: auto;
		color: #FFCA0B; 
		text-align: center;
		margin-top: -350px;
		position: relative;
		z-index: 9999; 
 }
 
 .familypicture img{
		border: 5px solid #FFCA0B;
		-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
		        box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
 }

 .familypicture h1 {
		font-weight: 700;
		font-size: 35px;
		margin-bottom: 10px;
 }
 
 .aboutus {
	text-align: center;
	background-color: #F0EEEE;
	padding-top: 75px;
	padding-bottom: 100px;
	margin-top: -50px;
	font-family: oswald;
 }
 
 .aboutus h1 {
	 font-family: "Abril Text";
	 font-size: 55px;
	 margin-bottom: 10px;
 }
 
 .heading {
		margin-top: 200px;
		text-align: center;
		color: white;
		margin-bottom: 25px; 
 }
 
  .heading2 {
		margin-top: 20px;
		text-align: center;
		color: white;
		margin-bottom: 25px; 
 }
 
 .heading h1, .heading2 h1 {
	color: #FFCA0B;
	font-family: "Abril Text";
	font-size: 55px;
	margin-bottom: 10px;
 }
 
 .animallist, .shows {
		width: 1245px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: auto;
		-ms-flex-pack: distribute;
		    justify-content: space-around; 
		-ms-flex-wrap: wrap; 
		    flex-wrap: wrap;
		margin-bottom: 100px;
 }
 
 .shows {
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
 
 }
 
  .animallist a {
		background-color: white;
		width: 280px;
		margin: 5px;
		text-decoration: none;
		text-align: center;
		padding-bottom: 5px;
		color: #333;
		border-radius: 0px 0px 5px 5px; 
 }
 
  .animallist a.large{
		width: 400px;  
  }
 
 .innerflex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		width: 910px;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap; 
 }
 
  .semenembryolist, .clubcalf {
		width: 1245px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: auto;
		-ms-flex-pack: distribute;
		    justify-content: space-around; 
		margin-bottom: 10px;
 }
 
 
 .semen, .embryo, .club, .clubinfo {
		width: 45%; 
		background-color: white;
		margin: 5px;
		text-decoration: none;
		text-align: center;
		padding-bottom: 5px;
		color: #333;
		border-radius: 0px 0px 5px 5px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
 }
 
 .clubcalf {
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start; 
 }
 
 .club {
		text-align: left; 
 }
 
 .clubinfo {
	padding-top: 10px; 
 }
 
 .semen h1, .embryo h1, .club h1 {
		color: #666;
		font-size: 18px; 
		margin-top: 10px;
		font-weight: 500;
		text-align: center;
 }
 
 .description {
		width: 90%;
		margin: auto;
		padding-bottom: 10px; 
 }
 
 .embryo .pedigree, .club .pedigree {
	text-align: left;
	font-size: 15px;
	margin-left: 200px;
	margin-bottom: 10px; 
 }	
 
  .embryo .pedigree strong, .club .pedigree strong {
	  display: block;
		width: 250px;
		background-color: #FFCA26;
		color: black;
		margin-left: -200px;
		padding: 5px;
		text-align: center;
		border-radius: 0 5px 5px 0;
		text-transform: uppercase;
  }
  
   .embryo .pedigree img {
		margin-right: 50px;   
   }
   
   
   .shows a {
		width: 20%;   
		border: 3px solid white;
		border-radius: 7px;
		margin-bottom: 10px;
   }
   
   .shows a img {
		width: 100%;   
   }
   

	.video-link {
		color: #ffe792;
	}

	.video-link:hover {
		color: #ffffff;
	}

  .crsl-item, .slick-slide, .slick-current, .slick-active {
	 outline: none;
  }
  
  .contactinfo {
	  width: 75%;
	  margin: auto;
	  color: white;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-pack: distribute;
	      justify-content: space-around;
  }
  
  .info {
		text-align: center;  
  }
  
  .info a {
		color:   #FFCA26;
  }
  
  .contactinfo .picture {
		width: 65%;  
  }
  
  .aniversarylogo {
		width: 400px;  
  }
  
  .footer {
		width: 100%;
		background-color:  #FFCA26;
		color: black; 
		text-align: center;
		padding-top: 20px;
		padding-bottom: 20px;
  }
  
  .footer a {
		color: black;  
  }
  
  .innersire {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		margin-top: 200px;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
  }
  
  .innersire .picture {
		width: 45%;  
  }
  
  .mobileopen {
		display: none;  
  }
  
  .innersire .animalinfo {
		width: 40%;
		background-color: black;
		padding: 25px;
		border-radius: 20px;
		margin-right: 25px;  
		color: white;
  }
  
  .animalinfo h1 {
	  font-family: Abril "Abril Text";
		font-weight: 700;
		font-size: 35px;
		margin-bottom: 10px;  
		color: #FFCA0B;
  }
  
  .basics {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;  
  		-ms-flex-pack: distribute;  
  		    justify-content: space-around;
  }
  
  .basics div {
	width: 35%;  
  }
  
   .picture2 {
	width: 30%;  
  }	
  
  .basics hr {
		background-color:   #FFCA0B;
		border: none;
		outline: none;
		height: 1px;
		width: 100%;
  }
  
  .basics .pedigree {
	margin-left: 25px;  
  }	
  
  .basics .pedigree strong {
		color:    #FFCA0B;
		margin-left: -25px;  
  }
  
  button {
		padding: 15px;
		background-color:    #FFCA0B;
		border: none; outline: none;
		border-radius: 9px;  
  }
  
    button:hover {
		cursor: pointer;
		background-color: #f4cf42;	
	}

.container {
	width: 40%;
	margin-top:5%;
	position:relative;
	margin-left:auto;
	margin-right: auto;
}

.img-width {
	width:100%;
	height:auto;
	display: flex;
	justify-content:center;
	align-items: center;
}