/* Styles for the template-animals.php pages */
/* Background Image */
div#backgroundimage { position: fixed; top: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1!important; overflow: hidden; }
div#backgroundimage img#bgimg { position: fixed; top: 0; left: 50%; transform: translateX(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1!important; 	overflow: hidden; }
header#animals-page-header { margin-top:220px; width:100%; height:530px; display:block; position:relative; z-index:2; }
div#return-box { margin-left:40px; padding:0; height:69px; line-height:69px; background-color:rgba(242,103,0,.8); display:inline-block; }
div#return-box:hover { background-color:rgba(242,103,0,1); }
div#return-box a.return-link { text-transform:uppercase; padding:0 20px 0 80px; background-image:url('images/buttons/back-arrow.png'); background-position:20px 50%; background-repeat:no-repeat; height:69px; width:100%; display:block; vertical-align:middle; font-size:300%; color:#fff; text-decoration:none; font-weight:400;  }
div#animals-content-wrapper { width:100%; position:relative; z-index:2; margin:0 auto 100px auto; }
section#animals-main { width:72%; display:inline-block; max-width:1344px; background-color:rgba(0,118,163,.8); box-sizing:border-box; padding:40px; }
section#animals-main h2.page-title { font-size:200%; text-transform:uppercase; }
section#animals-main h2.page-title span.science { font-weight:300; font-family:'Open Sans', sans-serif; font-size:60%; font-style:italic; }
section#animals-main p { font-size:150%; padding:5px 0; margin:5px 0; }
section#animals-main p a { color:#ecfb85; text-decoration:none; }
section#animals-main p a:hover { color:#f26700; }
div.content-container { margin:10px 0 30px 0; display:block; width:100%; position:relative; }
div.vitals-column { width:33%; float:left; display:inline-block; font-size:75%; }
div.vitals-column div.stat { width:100%; max-width:330px; display:table; height:94px; }
div.stat div.name { display:table-cell; vertical-align:middle; }
div.stat div.name p span { line-height:135%; }
div.stat div.icon { display:table-cell; vertical-align:middle; padding-right:10px; width:88px; }
div.stat div.icon img { display:block; margin:0 auto; }
section#animals-sidebar { width:24%; display:inline-block; max-width:375px; border-top-left-radius:35px; border-width:3px; border-color:#0076a3; border-style:solid; float:right; background-color:rgba(255,255,255,.8); overflow:hidden; margin-right:20px; padding-bottom:20px; }
section#animals-sidebar div#sidebar-title { font-size:150%; font-weight:400; text-transform:uppercase; height:66px; line-height:66px; background-color:rgba(0,118,163,1); padding-left:20px; }
section#animals-sidebar div#sidebar-image { width:100%; height:auto; }
section#animals-sidebar div#sidebar-image img { width:100%; height:auto; }
section#animals-sidebar div#sidebar-content { color:#000; padding:20px 10px; box-sizing:border-box; width:100%; font-size:120%; line-height:130%; }
section#animals-sidebar div#sidebar-content p { margin-bottom:15px; }
div.credits { padding-top:20px; }
div.credits h3 { font-family:'Open Sans', sans-serif; font-weight:bold; font-size:125%; padding-bottom:10px; }
div.credits-column { width:50%; float:left; display:inline-block; font-size:115%; padding:3px 5px; box-sizing:border-box; }
div.credits-column a { color:#fff; }
div.credits-column a:hover { color:#ecfb85; }


div.keeper-questions { background-color:#7accc8; position:relative; max-width:922px; width:100%; height:auto; display:block; margin:0 auto; }
div.kq-title { width:299px; height:119px; background-image:url('images/titles/keeperquestion.jpg'); background-repeat:no-repeat; background-position:0 0; display:table-cell; }
div.kq-title img { display:block; }
div.kq-question { display:table-cell; padding:10px; box-sizing:border-box; vertical-align:top; }
div.kq-question div.question { color:#440e62; font-size:150%; font-weight:400; }
div.kq-question div.answers { padding-top:15px; width:100%; }
div.kq-question div.answers table { width:100%; }
div.kq-question div.answers table tr { width:100%; }
div.kq-question div.answers table tr td { max-width:50%; }
div.kq-question div.answer { padding:0 20px 10px 20px; background-image:url('images/buttons/keeper-question-selection.jpg'); background-repeat:no-repeat; background-position:0 0; font-size:125%; line-height:125%; box-sizing:border-box; max-width:300px; }
div.kq-question div.answer:hover { cursor:pointer; }
div.kq-question div.answer.right { background-image:url('images/buttons/keeper-question-answer.jpg'); }
div.kq-question div.answer.wrong { background-image:url('images/buttons/keeper-question-wrong.jpg'); }


/* jcarousel styles */
.jcarousel-wrapper { margin: 20px auto; position: relative; width: 80%; height: 200px; padding:20px 0; }
.jcarousel-wrapper p { font-size:150%; margin-bottom:20px; font-weight:400; }

/** Carousel **/
.jcarousel { position: relative; overflow: hidden; }
.jcarousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; }
.jcarousel li { float: left; width: auto; height: 200px; margin-right: 13px; }
.jcarousel img { width:100%; height:auto; min-height:200px; object-fit:cover; object-position:50% 25%; }
.jcarousel .loading { text-align: center; line-height: 90px; /* Fake vertical aligning */ }

/** Carousel Controls **/
.jcarousel-control-prev,.jcarousel-control-next { position: absolute; top: 125px; width: 30px; height: 30px; text-align: center; background: #4E443C; color: #fff; text-decoration: none; text-shadow: 0 0 1px #000; font: 24px/27px Arial, sans-serif; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 2px #999; -moz-box-shadow: 0 0 2px #999; box-shadow: 0 0 2px #999; cursor:pointer; }
.jcarousel-control-prev { left: -50px; } 
.jcarousel-control-next { right: -50px; }
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span { display: block; }
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive { opacity: .5; cursor: default; }


@media only screen and (max-width:1700px) {
	.jcarousel-wrapper { width:628px; height:auto; }
}
@media only screen and (max-width:1280px) {
}
@media only screen and (max-width:1024px) {
	section#animals-main { width:100%; }
	section#animals-sidebar { width:100%; margin:50px auto; float:none; display:block; }
	div.vitals-column { width:50%; }
}
@media only screen and (max-width:768px) {
  /* For general iPad layouts */
	.jcarousel-control-prev { left: -35px; } 
	.jcarousel-control-next { right: -35px; }
	.jcarousel-wrapper { width:314px; }
	.jcarousel li { width:240px; height:162px; }
	.jcarousel img { width:100%; height:auto; min-height:162px; }
	div#return-box a.return-link { font-size:200%; }
	div.vitals-column { width:100%; }
}
@media only screen and (max-width:415px) {
	header#animals-page-header { height:200px; }
	div#return-box { display:none; }
	.jcarousel-wrapper { width:254px; margin-left:10px; }
}