@charset "utf-8";


/* ----------------------------------
Mustard navbar background #FF6314 #c2490c 105378 9F5F05 DCB227 B28400
------------------------------------- */

header.header-appear nav.header-orange, header.sticky nav.navbar-fixed-top.header-orange, header.sticky nav.navbar-scroll-fixed-top.header-orange {background-color: #B28400;}


/* ----------------------------------
make top dropdown menu wider
------------------------------------- */
.simple-dropdown .dropdown-menu {min-width: 230px;}


/* ----------------------------------
positioning close X on animials page
------------------------------------- */

.mfp-close.apage,.mfp-close.apage:active {opacity: 1; background-color:transparent; color: #fff; right: 5px; top: 5px;}

/* ----------------------------------
Alternative headlines
------------------------------------- */

/* heading */
h1, h2, h3, h4, h5, h6 {margin:0 0 25px; padding:0; letter-spacing: 0; font-weight: 400;}
h1 {font-size:70px; line-height:70px;}                          /* Top photo headline all pages  */
h2 {font-size:55px; line-height:60px;}
h3 {font-size:16px; line-height:26px; margin-bottom:0px;}       /* sponsor history / share / subheads in text */
h4 {font-size:40px; line-height:46px;}
h5 {font-size:32px; line-height:40px;}
h6 {font-size:25px; line-height:30px;}                          /* section head on all pages */


@media (min-width: 1000px) {
	h1 {font-size:60px; line-height:60px;}
}

@media (max-width: 999px) {
	h1 {font-size:55px; line-height:60px;}
}

@media (max-width: 620px) {
	h1 {font-size:40px; line-height:46px;}
}

/* ----------------------------------
Pagination
------------------------------------- */

.pagination a { padding: 0 16px; line-height: 36px; }

/* ----------------------------------
Mustard very light variation for section backgrounds and other colours 073c59
------------------------------------- */

.bg-light-gray {background-color:#fffbf1;}
.bg-blueish {background-color:#042f46;}
.bg-greenish {background-color:#549b24;}
.bg-redish {background-color:#590606;}
.background-orange {background-color: #B28400;}
.bg-hascolour {background-color: #B28400;}
.bg-blackish {background-color: #000000;}

.text-redish {color:#590606;}

/* ----------------------------------
Most links in text set to navbar colour
------------------------------------- */

a, a:active, a:focus {text-decoration: none; }
a:hover, a:active{color:  #B28400; text-decoration: none;}
.social-icon-style-8 a:hover { color: #B28400;}

/* ----------------------------------
icon size for social media buttons in footer
------------------------------------- */
.small-icon a {font-size: 24px; width: 40px; height:40px;line-height: 44px;}


/* ----------------------------------
The newsletter subscription link and button, a text in p same as navbar
------------------------------------- */

p a, p a:active, p a:focus, .subscribe a, .subscribe a:active, .subscribe a:focus { color:inherit; text-decoration: none; border-bottom: 3px solid #B28400; }
.subscribe a:hover, .subscribe a:active{border-bottom: 3px solid #B28400; color: #B28400; text-decoration: none;  }
.btn.text-deep-pink {color:#B28400;}
.subscribebutton:hover {color: #B28400; text-decoration: none;}
.subscribebutton {border: 1px solid #B28400;}

/* ----------------------------------
contact page phones no underline
------------------------------------- */

p a, p a:active, p a:focus, .contactphone a, .contactphone a:active, .contactphone a:focus { color:inherit; text-decoration: none; border-bottom: 0px solid #B28400; }
.contactphone a:hover, .contactphone a:active{border-bottom: 3px solid #B28400; color: #B28400; text-decoration: none;  }

/* ----------------------------------
Box top of animals page informing about adoption/sponsor status
------------------------------------- */
.boxtext p a, .boxtext p a:active, .boxtext p a:focus { color:#fff; text-decoration: none; border-bottom: 3px solid #fff; }

/* ----------------------------------
Set swiper button for frontpage animals section to navbar colour
Correct swiper button placement by 1px
------------------------------------- */

.swiper-button-prev.swiper-prev-style4, .swiper-button-next.swiper-next-style4 {background: #B28400;}
.navigation-area {height: 81px; }



/* ----------------------------------
Alternative styling for photos in text
------------------------------------- */
.wp-caption2 { background: #ffffff; padding:17px; text-align: center; border: 0px solid rgba(0,0,0,.1); max-width: 50%; }
.wp-caption2 figcaption {padding: 18px 25px 0 25px;}
.wp-caption2 img {width: 100%}
.wp-caption2.alignnone { margin: 5px 30px 40px 0;}
.wp-caption2.alignleft {margin: 5px 40px 30px 0; }
.wp-caption2.alignright { margin: 5px 0 40px 30px; }
.wp-caption2 p.wp-caption2-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

/* ----------------------------------
Moves the logo slightly up
------------------------------------- */

header a.logo img {margin-bottom:6px;}

/* ----------------------------------
decreases logo size on small screens
------------------------------------- */

@media (min-width: 1301px) {
	header a.logo img {min-height:40px;}
}

@media (max-width: 1300px) {
	header a.logo img {max-height:40px;}
}

@media (max-width: 1200px) {
	header a.logo img {max-height:28px;}
}

@media (max-width: 990px) {
	header a.logo img {max-height:40px;}
}

@media (max-width: 420px) {
	header a.logo img {max-height:32px;}
}

@media (max-width: 360px) {
	header a.logo img {max-height:28px;}
}

/* ----------------------------------
paypal, amazon button
------------------------------------- */

.donation-logo  {max-width:110px; height:auto;}
.donation-logo-paypal {max-width:140px; height:auto; border: 0px; margin-left:-14px;}


/* ----------------------------------
Footer logo
------------------------------------- */

.footer-logo {max-height: 34px;}

/* ----------------------------------
supporter logo on front page
------------------------------------- */

.supporter img {margin-bottom:20px;}


/* ----------------------------------
popup modal
------------------------------------- */

.modal {padding-top:100px;}
.modal a, .modal a:active, .modal a:focus { text-decoration: none; border-bottom: 3px solid #ff214f; }
.modal a:hover, .modal a:active{border-bottom: 3px solid #0e5116; color: #0e5116; text-decoration: none;  }

@media (min-width: 768px) {
	.modal-dialog {
	max-width: 50%;
	}
}

/* ----------------------------------
The download/links list
Creates a gap between icon and text in download/link lists
------------------------------------- */

.downloadandlinks {line-height:28px; }
.downloadandlinks a {border-bottom: 0px solid #B28400; text-decoration: none; margin-bottom: 3px;}
.downloadandlinks a:hover {border-bottom: 3px solid #B28400; color: #B28400; text-decoration: none;  }
.ti-file, .ti-email, .ti-world, .ti-video-camera, .ti-mobile, .ti-heart {font-size: 20px; padding-right:10px; }
.ti-file {position:relative; top: 2px;}
.ti-video-camera {position:relative; top: 3px;}
.ti-heart, .ti-world, .ti-mobile {position:relative; top: 3px;}
.ti-email {position:relative; top: 4px;}
.ti-heart {color: red;}

/* ----------------------------------
News page categories list
re-adds border line under last line
------------------------------------- */

.list-style-6 li:last-child {border-bottom: 1px solid rgba(0, 0, 0, 0.1);}


/* ----------------------------------
donate form success message
------------------------------------- */

#success-donate { clear: both; margin: 0 0 0 0; text-align: center; border: 0px solid #1a940a; color: #1a940a;  padding: 0 0 0 0; display: none; font-size: 18px}


/* ----------------------------------
menu donate button background
------------------------------------- */

.donate{
	background: #cf2e50;
	padding-right: 20px;
	}

.donatetext{
	color: #fff;
	}	

/* ----------------------------------
News page categories list
creates additional font size
for categories list
------------------------------------- */

.text-smallmedium {font-size:15px; line-height:22px;}
.text-medium2 {font-size:17px; line-height:28px}

/* ----------------------------------
News page categories list
creates colour on the 'active' link
------------------------------------- */

.categories .active a {background-color: #B28400; padding:5px;}
.categories .active a { color: #ffffff; }


/* ----------------------------------
Dropcap backgrorund colour
------------------------------------- */
.bg-dropcap {background-color:#B28400;}



/* ----------------------------------
remove border on newsletter page liste
------------------------------------- */
.list-style-5 li { position: relative; padding: 0 0 10px 22px; margin: 0 0 10px 40px; border-bottom: 0px;}


/* ----------------------------------
center share buttons
1st: most pages
2nd: animals pages
------------------------------------- */

#addtoany-center { display: flex; justify-content: center; }
#my_centered_buttons { display: flex; justify-content: center; }

/* ----------------------------------
buttons on animal page
------------------------------------- */

.btn.btn-sponsor{color:#fff;background-color:#549b24;border-color:#549b24}
.btn.btn-sponsor:hover{color:#fff;background-color:#65ba2c;border-color:#65ba2c}

.btn.btn-adopt{color:#fff;background-color:#105378;border-color:#105378}
.btn.btn-adopt:hover{color:#fff;background-color:#24719b;border-color:#24719b}

.btn.btn-foster{color:#fff;background-color:#b31f34;border-color:#b31f34}
.btn.btn-foster:hover{color:#fff;background-color:#cf344a;border-color:#cf344a}

/* ----------------------------------
contact form buttons / continue reading buttons
------------------------------------- */

.btn.btn-hascolour {background:#B28400; border-color: #B28400; color: #fff}
.btn.btn-hascolour:hover, .btn.btn-hascolour:focus {background: transparent; color: #000}


/* ----------------------------------
additional margins and paddings
------------------------------------- */


.margin-1px-top {margin-top:1px}
.margin-2px-top {margin-top:2px}
.margin-3px-top {margin-top:3px}
.margin-4px-top {margin-top:4px}

.margin-1px-bottom {margin-bottom:1px}
.margin-2px-bottom {margin-bottom:2px}
.margin-3px-bottom {margin-bottom:3px}
.margin-4px-bottom {margin-bottom:4px}

.padding-1px-left {padding-left:1px;}
.padding-2px-left {padding-left:2px;}
.padding-3px-left {padding-left:3px;}
.padding-4px-left {padding-left:4px;}
.padding-6px-left {padding-left:6px;}
.padding-7px-left {padding-left:7px;}
.padding-8px-left {padding-left:8px;}
.padding-9px-left {padding-left:9px;}

.padding-1px-right {padding-right:1px;}
.padding-2px-right {padding-right:2px;}
.padding-3px-right {padding-right:3px;}
.padding-4px-right {padding-right:4px;}
.padding-6px-right {padding-right:6px;}
.padding-7px-right {padding-right:7px;}
.padding-8px-right {padding-right:8px;}
.padding-9px-right {padding-right:9px;}


/* ----------------------------------
galleries; removed excessive fade
------------------------------------- */

/* hover option 2 */
.hover-option2 .grid-item figcaption {height: 100%}
.hover-option2 .grid-item .portfolio-hover-main {transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; display: table; height: 100%; top: 0; width: 100%;}
.hover-option2 .grid-item .portfolio-hover-content {bottom:-15px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}
.hover-option2 .grid-item:hover .portfolio-hover-content {bottom:0;}
.hover-option2 .separator-line-horrizontal-medium-light2 {opacity:.5}
.hover-option2 .grid-item figure:hover img { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); opacity: 0.80; transform: scale(1.0, 1.0); -webkit-transform: scale(1.0, 1.0); -moz-transform: scale(1.0, 1.0); -ms-transform: scale(1.0, 1.0); -o-transform: scale(1.0, 1.0); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}
.container .hover-option2 .grid-item figcaption {padding: 30px;}


/* ----------------------------------
portfolio on animals page
block the same in style.css
------------------------------------- */

/* hover option 6 */
.hover-option6 .grid-item figcaption {height: 100%; position: relative; opacity: 1; padding:35px 10px; background: #fff}
.hover-option6 .grid-item .portfolio-hover-main {transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; display: table; height: 100%; top: 0; width: 100%;}
.hover-option6 .grid-item .portfolio-icon {transition: all 0.3s ease 0s; position: absolute; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 55%; left:0; right: 0; opacity: 0}
.hover-option6 .grid-item figure:hover .portfolio-icon {opacity: 1; top: 50%; }
.hover-option6 .grid-item .portfolio-icon a {border-radius: 50%; border:2px solid transparent; background: #fff; margin: 0 7px; height: 46px; width: 46px; display: inline-block; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.hover-option6 .grid-item .portfolio-icon i.fa-link {font-size:20px; position: relative; top: 11px}
.hover-option6 .grid-item .portfolio-icon i.fa-search {font-size:16px; position: relative; top: 10px}
.hover-option6 .grid-item .portfolio-icon a:hover, .hover-option6 .grid-item .portfolio-icon a:hover i {background: transparent; color: #fff;  }
.hover-option6 .grid-item .portfolio-icon a:hover {background: ; border:2px solid #000; color: #fff; transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1);}
.hover-option6 .grid-item figure:hover img {border:0px solid #000; opacity: .75; transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1);}
.hover-option6 .grid-item figure:hover .portfolio-img {transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}
.container .hover-option6 .grid-item figcaption {padding: 25px 10px;}


/* ----------------------------------
portfolio on volunteer page
remove excessive fade
block the same in style.css
------------------------------------- */

.blog-post-style3 .grid-item .blog-post:hover .blog-post-images .blog-hover-icon {opacity: 0.4}

/* ----------------------------------
sponsor, adopt, foster icons
------------------------------------- */

.boxicon img {
	max-height:75px;
	}


/* ----------------------------------
animals remembrance button
------------------------------------- */

.animals-archive, .animals-archive:focus { color: #fff; background: #590606; line-height: 28px; display: none; height: 30px; width: 30px; padding: 0; position: fixed; right: 10px; text-align: center; text-decoration: none; top: 91%; z-index: 10006; border-radius: 100%;}
.animals-archive:hover {background: #000; opacity: .8; color: #fff; border-color: #ff214f}
.animals-archive i {line-height: 30px;  position: relative;}

	
/* ----------------------------------
ribbons for donations
size and placement
------------------------------------- */
.ribbon {
	width: 150px;
	height: 150px;
	overflow: hidden;
	position: absolute;
}
.ribbon::before,
.ribbon::after {
	position: absolute;
	z-index: -1;
	content: '';
	display: block;
	border: 5px solid #2980b9;
}
.ribbon span {
	position: absolute;
	display: block;
	width: 270px;
	padding: 5px 0;
	background-color: #FF9A30;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color: #fff;
	font: 700 14px/1 'Montserrat', sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
}

.ribbon span.red {
	position: absolute;
	display: block;
	width: 270px;
	padding: 5px 0;
	background-color: #cf344a;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color: #fff;
	font: 700 11px/1 'Montserrat', sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
}

/* top left*/
.ribbon-top-left {
	top: -10px;
	left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
	border-top-color: transparent;
	border-left-color: transparent;
}
.ribbon-top-left::before {
	top: 0;
	right: 0;
}
.ribbon-top-left::after {
	bottom: 0;
	left: 0;
}
.ribbon-top-left span {
	right: -25px;
	top: 30px;
	transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
	top: -10px;
	right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
	border-top-color: transparent;
	border-right-color: transparent;
}
.ribbon-top-right::before {
	top: 0;
	left: 0;
}
.ribbon-top-right::after {
	bottom: 0;
	right: 0;
}
.ribbon-top-right span {
	left: -25px;
	top: 30px;
	transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
	bottom: -10px;
	left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
	border-bottom-color: transparent;
	border-left-color: transparent;
}
.ribbon-bottom-left::before {
	bottom: 0;
	right: 0;
}
.ribbon-bottom-left::after {
	top: 0;
	left: 0;
}
.ribbon-bottom-left span {
	right: -25px;
	bottom: 30px;
	transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
	bottom: -10px;
	right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
	border-bottom-color: transparent;
	border-right-color: transparent;
}
.ribbon-bottom-right::before {
	bottom: 0;
	left: 0;
}
.ribbon-bottom-right::after {
	top: 0;
	right: 0;
}
.ribbon-bottom-right span {
	left: -25px;
	bottom: 30px;
	transform: rotate(-225deg);
}



/* ----------------------------------
ribbons for
adoptions 	background-color: #105378;
sponsor background-color: #549b24;
foster 	background-color: #b31f34;
release	background-color: #b31f34;

------------------------------------- */

.ribbon2 {
	width: 170px;
	height: 170px;
	overflow: hidden;
	position: absolute;
}
.ribbon2::before,
.ribbon2::after {
	position: absolute;
	z-index: -1;
	content: '';
	display: block;
	border: 5px solid #2980b9;
}
.ribbon2 span {
	width: 290px;
	position: absolute;
	display: block;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color: #fff;
	font: 700 14px/1 'Montserrat', sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
}

.ribbon2-sponsored span {
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #549b24;
}

.ribbon2-adopted span {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #105378;
}

.ribbon2-fostered span {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #b31f34;
}

.ribbon2-released span {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #000000;
}

/* top left*/
.ribbon2-top-left {
	top: 0px;
	left: 0px;
}
.ribbon2-top-left::before,
.ribbon2-top-left::after {
	border-top-color: transparent;
	border-left-color: transparent;
}
.ribbon2-top-left::before {
	top: 0;
	right: 0;
}
.ribbon2-top-left::after {
	bottom: 0;
	left: 0;
}
.ribbon2-top-left span {
	right: -25px;
	top: 30px;
	transform: rotate(-45deg);
}