/*GENERAL STYLES*/
html {font-size: 62.5%;}
body {font-size: 1.8rem; font-family: "Noto Sans", sans-serif; color: #272626;}
.carousel-item {height: 600px; }
.first {background: url(home/124896.jpg); background-position: bottom; background-size;   }
.second {background: url(home/124896.jpg); background-position: right; }
.third {background: url(home/124896.jpg); background-position: top;}
.carousel-caption {top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; opacity: 0;}
.col {text-align: left;}
.col:last-child {text-align: center;}
.title {font-size: 3rem; margin-top: 0;}
.carousel-indicators {margin-top: -200px; z-index: 100;}
.carousel-indicators:hover {
	cursor: pointer;	
}

/*FIRST SLIDE*/
.third .carousel-caption  {display: flex; flex-wrap: nowrap;}
.third .moreinfo { width: 200px; height: 400px; margin: -100px; position: relative; margin-top: 300px; z-index: 120;}
.third .moreinfo:hover  {cursor: pointer;}
.third .greencircle { background-image: url(headergraphics/greencircle.png); background-size: contain; background-repeat: no-repeat; text-align: center; width: 500px; height: 500px; color: white; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.third .herdsires {width: 700px;}
.third .greencircle h1 {
	text-transform: uppercase;
	font-size: 50px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.third .greencircle h3 {
	font-style:italic;
	font-size: 20px;	
}

.first .greencircle a {
	color: #033;
	background-color: #C39D2D;
	padding: 10px;
	margin: 10px;	
	border-radius: 20px;
	border: 2px solid transparent;
	transition: background-color 0.3s;
}

.first .greencircle a:hover {
	text-decoration: none;
	background-color: #eac75e;
}


/*SECOND SLIDE*/
.second .carousel-caption  {display: flex; flex-wrap: nowrap;} 
.second .moreinfo { width: 200px; height: 400px; margin: -100px; position: relative; margin-top: 300px; z-index: 120;}
.second .greencircle { background-image: url(headergraphics/greencircle.png); background-size: contain; background-repeat: no-repeat; text-align: center; width: 500px; height: 500px; color: white; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.second .greencircle h1 {
	text-transform: uppercase;
	font-size: 50px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.second .greencircle h3 {
	font-style:italic;
	font-size: 20px;	
}

.second .females {
	width: 700px;	
}


/*THIRD SLIDE*/
.first .carousel-caption  {display: flex; flex-wrap: nowrap;} 
.first .moreinfo { width: 200px; height: 400px; margin: -100px; position: relative; margin-top: 400px; z-index: 120;}
.first .greencircle { background-image: url(headergraphics/greencircle.png); background-size: contain; background-repeat: no-repeat; text-align: center; width: 500px; height: 500px; color: white; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.first .greencircle h1 {
	text-transform: uppercase;
	font-size: 50px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.first .greencircle h3 {
	font-style:italic;
	font-size: 20px;	
}

.first .females {
	width: 800px;	
}



/*MSG*/
.msg {display: none; position: fixed; top: 5px; left: 50%; transform: translateX(-50%); padding: 7px; border: 5px solid #fff000; text-align: center; color: #fff; background: rgba(0, 0, 0, .85);}

/*JS DISABLED*/
.no-js .carousel-inner > .carousel-item {display: block;}
.no-js .carousel-caption, .no-js .second .info, .no-js .second .source {opacity: 1;}
.no-js .second .info {transform: none;}
.no-js .second .source {visibility: visible;}
.no-js .carousel-indicators {display: none;}
.no-js .msg {display: block;}

/*SOME BASIC STYLES FOR SMALL SCREENS*/
@media screen and (max-width: 767px) {
  body {font-size: 1.6rem;}
  .container {width: 100%;}