/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

body{
	background-image:url(../images/template/Mayer-website-bkgd.jpg);
	background-repeat:repeat-y;
	background-size:cover;
}

nav{display:none;}

#topShadow{
	height:30px;
	position:relative;
	top:-30px;
	margin-bottom:-30px;
	-webkit-box-shadow: 0px 60px 200px 20px rgba(0, 0, 0, 1), 0px 60px 200px 20px rgba(0, 0, 0, 1), 0px 0px 20px 20px rgba(0, 0, 0, 0.7);
	box-shadow:         0px 60px 200px 20px rgba(0, 0, 0, 1), 0px 60px 200px 20px rgba(0, 0, 0, 1), 0px 0px 20px 20px rgba(0, 0, 0, 0.7);
}

#brand{
	position: absolute;
	z-index: 10;
	left: 1px;
}

#header #nav{
	float:right;
	margin:55px 0px 20px 0;
}

#header ul li {
	/* display:inline-block; */
	float:right;
	margin-right:15px;
}

#header ul li a{
	color:#FFF;
	text-decoration:none;
	text-shadow: -2px 2px 3px rgba(0, 0, 0, 1),  -2px 2px 3px rgba(0, 0, 0, 1);
	font-size:14px;
}

#header ul li a:hover{
	color: #FC6;
}

#home .home,
#about .about,
#semenSales .semenSales,
#forSale .forSale,
#contactUs .contactUs,
#employment .employment {
	text-shadow: 0px 0px 10px #000,  0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000,  0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000;
}

#displayImages{
	position:relative;
	top:-26px;
	margin-bottom:-26px;
	height:206px;
	-webkit-box-shadow: 0px 0px 15px 8px rgba(0, 0, 0, .9);
	box-shadow:         0px 0px 15px 8px rgba(0, 0, 0, .9);
}

#displayImages div{margin:0;}
#displayImages img{float:left;}

#displayImages #whiteBar{
	position:relative;
	z-index:10px;
	float:left; 
	width:10px;
	height:206px;
	background-color:#FFF;
	margin-right:-10px;
}

#displayImages #whiteBar div{
	width:6px;
	padding:px;
	margin:3px 2px;
	height:198px;
	background-color:#FFF;
	-webkit-box-shadow: -6px 4px 5px 1px rgba(0, 0, 0, .7);
	box-shadow:         -6px 4px 5px 1px rgba(0, 0, 0, .7);
}

#main-content{
	margin:30px 20px 20px;
}

#footer{font-size:12px;}



.blackShadow{
	-webkit-box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 1);
	box-shadow:         0px 0px 15px 3px rgba(0, 0, 0, 1);
}

.animalBox{
	float: left;
	width: 220px;
	/* height: ; */
	margin-right: 15px;
	margin-top: 20px;
	color: #000000;
	font: 14px 'Patua One', 'cursive';
	line-height:25px;
}

.animalBox img{
	height:165px;
	width:220px;
    margin-top: 10px;
}

.animalBox img.blackShadow:hover{
	-webkit-box-shadow: 0px 0px 15px 3px rgba(120, 70, 0, 1);
	box-shadow:         0px 0px 15px 3px rgba(120, 70, 0, 1);
}

.animalBox a{
	text-decoration: none;
}


#footerInfo{text-transform:uppercase; margin:0 auto; text-align:center;}
#footerDesignBy{width:438px;text-align:center; margin:0 auto;}
.poweredByAJ {float:right;}
.poweredByAJ a{font-size:12px; color:#000;}
.poweredByAJ img{margin-bottom:-3px;}


.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.animalVideos .embed-responsive {
    margin-bottom: 5px;
}

.bold {
    font-weight: 700;
}

.animalVideos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		#displayImages{height:162px;}
		#displayImages #whiteBar{width:6px;height:163px;margin-right:0px;}
		#displayImages #whiteBar div{width:3px;height:155px;}
		iframe{height:151px;width:268px;}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		nav{display:block; margin-left:100px;}
		#nav{display:none;}
		#brand{width:80px;}
		#ranchName{margin-left:90px; width:300px;}
		#displayImages img{float:none;}
		#displayImages #whiteBar{
            /* float:;  */
            width:420px;height:10px;margin-right:0px; margin-top:-10px;}
		#displayImages #whiteBar div{width:410px;height:5px;}
		#displayImages{height:846px;}
		iframe{height:236px;width:420px;}
		#case img{width:100%;}
		.poweredByAJ {float:none;}	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		iframe{height:169px;width:300px;}
        #displayImages #whiteBar{
            /* float:;  */
            width:300px;height:10px;margin-right:0px; margin-top:-10px;}
		#displayImages #whiteBar div{width:290px;height:5px;}
		#ranchName{margin-left:90px; width:200px;}
		#main-content{margin:0;}
		#displayImages{height:609px;}
		#case img{width:100%;}	
		}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@media(max-width: 767px) {
    .divEpdTbl th, .divEpdTbl td {
        min-height: 60px;
	}
}
.EPDAcc {
    font-weight: normal;
}
.divEpdTbl .EPDAcc {
    padding-left: 0;
}