﻿#animals-container,
#animal-details {
	max-width: 1344px; width: 100%;
 	box-sizing: border-box;
  	margin-right: auto; margin-left: auto;
  	padding-left: 20px; padding-right: 20px;
}

#animals {
	flex-wrap: wrap;
}


.animal--single { margin-bottom: 50px; }

.animal--single_image div {
	min-height: 300px;
	width: 100%;
	background-size: cover; background-position: top; background-repeat: no-repeat;
	border-top-left-radius: 10px; border-top-right-radius: 10px;
}



.animal--single_content {
	margin-top: 20px;
}
.animal--single_content h3 { margin-bottom: 0.75rem; }
.animal--single_content h3 a { text-decoration: none; }

.animal--single_content span,
.animal--single_content-detail span { line-height: 1.5; }

.animal--single_content-detail {
	padding-left: 20px;
}




/*
 * PAGINATION
 */

.paging {
	display: flex; flex-wrap: wrap; justify-content: center;
	line-height: 1.5;
	margin: 40px 0;
}

.paging .simple-pagination-page-number,
.paging .simple-pagination-fpnl {
	margin: 0 5px;	
}

.paging .simple-pagination-page-number a,
.paging .simple-pagination-fpnl a { 
	color: #1E1E1E; text-decoration: none;
}

.paging .simple-pagination-page-number .simple-pagination-navigation-disabled {
	color: #327DB3; font-weight: bold;
	border-bottom: 1px solid #327DB3;
}

.paging .simple-pagination-fpnl .simple-pagination-navigation-disabled {
	color: #989898;
}




/*
 * FILTER
 */

#filters-container {
	display: flex; 
	align-items: center; justify-content: center;
	width: 100%;
}


.species-wrap { margin-right: 20px; }

.species-wrap a {
	display: inline-block;
	background: #f1f1f1; padding: 10px 20px; 
	text-transform: uppercase; text-decoration: none;
}

.species-wrap a.current {
	background: #327DB3; color: white;
}


@media (max-width: 48em) {
	#filters-container {
		flex-direction: column;
	}
	#site-filter-container {
		margin-top: 20px;
	}
}	




/*#animals {
}

#animals .animal {
width:50%;
color: #434343;
margin-bottom: 25px;
padding: 0;
float:left;
}

#animals .animal .gutter {
margin: 15px;
background: #efefef;
border: 1px solid #eee;
}
		
#animals .animal h2 {
color: #77336d;
}
		
#animals .animal h4 {
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
color: #434343;
}
		
#animals .animal p {
font-size: 14px;
}

.age-label, .sex-label, .breed-label, .site-label {font-weight:600;}
	
#animals .animal .image {
width: 100%;
height: 250px;
background-size: cover;
background-position-x: 40%;
margin: 0 auto;
}
		
#animals-detail .animal .image img,
#animals .animal .image img {
width: 50%;
height: auto;
min-height: 150px;
}
			
#animals-detail .animal .gutter {
background: transparent;
border: none;
}

#animals-detail .animal .image {
width: 100%;
margin-right: 15px;
}
			
#animals .animal .content {
padding: 15px;
width: 100%;
position: relative;

}
		
#animals .animal .content .name {
font-size: 18px;
font-weight: bold;
color: #77336d;
text-transform: uppercase; 
margin: 15px 0;
}
			
#animals .animal .content .name a {
text-decoration:none;
}
				
#animals .animal .content .name a:hover {
text-decoration:underline;
}
			
#animals .animal .content .specs {
padding: 15px;
background: #f7f7f7;
border: 2px solid #dedede;
			
}

#animal-details .main-image
{
	width: 55%;
	padding-bottom: 2%;
}	

.internal #animals p.back {
font-weight: bold;
}

#animals-container .paging {
font-size: 70%;
}


#animals-container .paging div {
float:left;
}

#animals-container .paging div:first-child a{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}


#animals-container .paging div:last-child a {
border-right: 1px solid #ddd;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

#animals-container .paging div a
{
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #40BAE9;
  outline:0;
}


#animals-container .paging .simple-pagination-page-numbers a h1
{
padding: 2rem;
color: #216ed9;
text-align: center;
}



#animals-container .paging div a:hover {
background-color: #eee;
}

#animals-container .paging div.simple-pagination-fpnl a.simple-pagination-navigation-disabled
{
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}

#animals-container .paging .simple-pagination-page-number a.simple-pagination-navigation-disabled
{
z-index: 2;
color: #fff;
cursor: default;
background-color: #40BAE9;
border-color: #40BAE9;
}*/