@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One');
@import url('https://fonts.googleapis.com/css?family=Rochester');
@import url('https://fonts.googleapis.com/css?family=Petit+Formal+Script');
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:800');
body {
	padding: 0;
	margin: 0;	
	background-image: url(images/1624.jpg);
	font-family:  'Alegreya Sans SC', sans-serif;
	
}
.fadeInLeft {
	animation-delay: 0.7s;	
}
.wrapper {
	width: 75%;
	margin: auto;	
}

header {
	background-color: white ;
	padding: 1em;	
	text-align: center;
	border-radius: 15px 15px 0 0;
}

.wrapper {
	box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
	border-radius: 15px;
}

.logo {
	display: inline-block;
	width: 10vw;	
}

.navigation {
	display: inline-block;
	vertical-align: top;
	color: #3d1d1c;
	text-align: center;	
}

#name {
	border-top: 4px solid #3d1d1c;	
	border-bottom: 4px solid #3d1d1c;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.8vw;	
	padding: .5vw;
	font-weight: 700;
	
}

nav {
	margin-top: -1vw;	
}

.button2 {
	font-size: 0.9vw;
  display: inline-block;
  margin : 0 auto;
  margin-top : 10px;
  width : 18%;
  height : 2.9vw;
  background: #720000;
  overflow : hidden;
  text-align : center;
  cursor : pointer;

}


.button2:hover {
	background-color: #A40000;
}
.navigation a {
	color: white;	
	text-decoration: none;
}

.body {
	text-align: left;
	background-color: white;	
	padding: 5vw;
	color: #3d1d1c;
	border-radius: 0 0 15px 15px;
}

.body2{
	text-align: left;
	background-color: white;	
	padding: 5vw;
	margin-top: -5vw;
	color: #3d1d1c;
	border-radius: 0 0 15px 15px;
}

#banner {
	text-align: center;
	color: white;
	background-image: url(images/homepage/banner2.jpg);
	background-position: center;
	padding: 3vw;
	font-size: 4vw;
	background-size: cover;
	overflow: hidden;
	font-weight: 100;
	font-family:  'Alegreya Sans SC', sans-serif;
	font-weight: 700;
	text-shadow: 3px 3px 3px black;
	height: 500px;
}

h1 {
	font-size: 3vw;
}
footer {
	text-align: center;
	color: white;	
}

footer a{
	text-decoration: underline;
	color: white;	
}

footer a:hover{
	text-decoration: none;
}

.button3 {
	margin: auto;
	width: 30%;
	font-size: 1vw;
	font-family: 'Alegreya Sans SC', sans-serif;
	padding: 1vw;
	text-align: center;
	border-radius: 6px;
	background-color: #720000;
}

.button3:hover {
	background-color: #A40000;
}

div.wrap {
	display: inline-block;
	width: 25%;
	position: relative;
	border: 4px solid #FFF;
	margin: 5px 3px;
	-webkit-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	-moz-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
}

div.wrap2 {
	display: inline-block;
	width: 25%;
	position: relative;
	border: 4px solid #FFF;
	margin: 5px 3px;
	-webkit-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	-moz-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
}

div.description {
	position:absolute;
	bottom:0;
	width: 98%;
	background:rgba(0,0,0,0.5);
	-webkit-background:rgba(0,0,0,0.5);
	-moz-background:rgba(0,0,0,0.5);
	font-size: 13px;
	font-weight:400;
	color:#FFF;
	padding:2px;
	text-align:center;
	text-transform:uppercase;
	transition: background ease 0.5s;
}
div.wrap:hover {
	-webkit-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.8);
	-moz-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.8);
	box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.8);
}
.description2 {
	position: relative;
	bottom:0;
	width: 99%;
	margin-left: 1vw;
	margin-top: -5vw;
	background: #3d1d1c;
	font-size: 13px;
	font-weight:400;
	color:#FFF;
	padding:2px;
	text-align:center;
	text-transform:uppercase;
	transition: background ease 0.5s;
}

div.description3 {
	position:absolute;
	bottom:0;
	width: 98%;
	background:rgba(0,0,0,0.5);
	-webkit-background:rgba(0,0,0,0.5);
	-moz-background:rgba(0,0,0,0.5);
	font-size: 13px;
	font-weight:400;
	color:#FFF;
	padding:2px;
	text-align:center;
	text-transform:uppercase;
	transition: background ease 0.5s;
}

div.description_content {
	padding:10px;
	margin:0;
}

.description_content2 {
	padding:10px;
	margin:0;
}

.wrap a{
		color: white;
		text-decoration: none;
}

.wrap a:hover ~ .description {
	background: #3d1d1c;	
}

.description:hover{
	background: #3d1d1c;	
}

#gallery {
	display: inline-block;
	width: 25%;	
	margin: 1vw;
	border: white 5px solid;
-webkit-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	-moz-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
}


#gallery:hover {
	-webkit-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.8);
	-moz-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.8);
	box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.8);
	cursor: pointer;
}

#contact {
	display: inline-block;
	width: 30%;	
	vertical-align: top;
}

#herdsirecolumn {
	padding: 1vw;
	font-size: 1.2vw;
	width: 40%;
	display: inline-block;
	text-align: left;
	vertical-align: top;	
}
#border {
	border: white 5px solid;
	-webkit-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	-moz-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
}
#pedigree {
	border: white 5px solid;
	-webkit-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	-moz-box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	box-shadow: 4px 6px 13px 0px rgba(0,0,0,0.63);
	width: 20%;
}
.backbutton {
	background-color: #3d1d1c;	
	display: inline-block;
	vertical-align: top;
	padding: 1vw;
	text-align: center;
}
.backbutton a{
		color: white;
		text-decoration: none;
}

.backbutton:hover {
	background-color: #770202; 	
}

.hvr-icon-back {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-left: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-back::before {
  content: "◄ ";
  position: absolute;
  left: 1em;
  padding: 0 1px;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;

}
.hvr-icon-back:hover:before, .hvr-icon-back:focus:before, .hvr-icon-back:active:before {
  -webkit-transform: translateX(-4px);
  transform: translateX(-4px);
}

.hvr-icon-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-forward:before {
  content: "►";
  position: absolute;
  right: 1em;
  padding: 0 1px;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}
#mobile {
	display: none;	
}

@media only screen and (max-width: 50em) { 

	.wrapper {
		width: 90%;	
	}
	
	.logo {
		display: block;
		width: 50%;
		margin: auto;	
	}
	.navigation {
		width: 100%;	
	}
	.button2 {
		font-size: 3vw;	
		width: 20vw;
		height: 10vw;
	}
	
	#name {
		font-size: 5vw;	
	}
	.description2 {
		margin-top: -2vw;
	}
	div.wrap, #gallery, #contact { 
	width: 60%;
	}
	
	h1 {
		font-size: 7vw;	
	}
	
	#banner {
		height: 50vw;	
		font-size: 7vw;
	}
	
	.button3 {
		margin-top: -6vw;
		font-size: 3vw;	
		padding: 3vw;
	}
	
	#herdsirecolumn {
		margin-bottom: 4vw;
		width: 80%;
		font-size: 3vw;
		text-align: center;	
	}
	
	
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  nav {
		display: none;	
	}
	
	#mobile {
	display: block;	
}
	  
	  .wrapper {
		width: 90%;	
	}
	
	.logo {
		display: block;
		width: 50%;
		margin: auto;	
	}
	.navigation {
		width: 100%;	
	}
	.button2 {
		font-size: 3vw;	
		width: 20vw;
		height: 10vw;
	}
	
	#name {
		font-size: 5vw;	
	}
	.description2 {
		margin-top: -2vw;
	}
	div.wrap, #gallery, #contact { 
	width: 60%;
	}
	
	h1 {
		font-size: 7vw;	
	}
	
	#banner {
		height: 50vw;	
		color: white;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size: 7.5vw;
	}
	
	.button3 {
		margin-top: -5vw;
		font-size: 3vw;	
		padding: 3vw;
	}
	
	#herdsirecolumn {
		margin-bottom: 4vw;
		width: 80%;
		font-size: 3vw;
		text-align: center;	
	}
	#contact {
		font-size: 5vw;
	
  }
  
  /* MOBILE!! */
	
	
	.sidenav {
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0;
    left: 0;
    background-color: #3d1d1c; 
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s
}


/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: grey;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.opener {
	font-size: 3vw;	
}
.opener:hover {
	cursor: pointer;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

@media screen and (max-width: 1000px) {
	.tile  {
		width: 80%;	
	}
}
}