/*
Theme Name: 	Best Friends Pet Centre
Description: 	Best Friends Pet Centre Wordpress theme!
Version: 		1.0
Author: 		Nathan Stanmore
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/*@import "css/reset.css";*/
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,700|Oswald:300');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ 
	font-family: 'Alegreya Sans', sans-serif;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-family: 'Oswald', sans-serif; font-weight:300; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }


img.aligncenter {
	display: block;
	margin: 0 auto;
}

img.alignleft {
	float: left;
	margin-right: 15px;
    margin-right: 15px;
}

img.alignright {
	float: right;
	margin-left: 15px;
    margin-bottom: 15px;
}

header {
	/*position: fixed;*/
	width: 100%;
	z-index: 999;
}

header .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -15px;
}

header .navbar {
	/*background: url('img/darkbackground.png');*/
	background: none;
	margin: 0;
	border: none;
	padding: 27px 0;
}

header .navbar-default .navbar-nav>li {
	margin-right: 4px;
}

header .navbar-default .navbar-nav>li>a {
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	padding: 10px 15px;
	border-radius: 5px;
	font-family: 'Oswald';
}

header .navbar-default .navbar-nav {
    padding-left: 40px;
    margin-top: 15px;
}

header .navbar-default .navbar-nav>li>a:hover,
header .navbar-default .navbar-nav>.active>a, 
header .navbar-default .navbar-nav>.active>a:focus, 
header .navbar-default .navbar-nav>.active>a:hover {
	background: none;
	border: 1px solid #fff;
	color: #fff;
	padding: 9px 14px;
	border-radius: 0;
}

header .navbar-default .navbar-nav>li:hover ul.dropdown-menu {
	display: block !important;
}

header .navbar-default .navbar-nav>li ul.dropdown-menu {
	background: url('img/darkbackground.png');
	border: none;
    border-radius: 0;
    padding: 10px;
}

header .navbar-default .navbar-nav>li ul.dropdown-menu li a {
	color: #fff;
	border-radius: 0px;
    padding: 6px 10px;
}

header .dropdown-menu>.active>a, 
header .dropdown-menu>.active>a:focus, 
header .dropdown-menu>.active>a:hover,
header .navbar-default .navbar-nav>li ul.dropdown-menu li a:hover {
	background: #8DC63F;
}

.header-phone {
	padding: 8px 15px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Oswald';
    font-size: 15px;
    margin-top: 15px;
}

.home-top {
	position: absolute;
	width: 100%;
	z-index: 99;
	margin-top: 25px;
}

.menu-toggle {
	color: #fff !important;
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    margin-top: 35px;
    display: block;
    text-decoration: none !important;
}

.menu-toggle img {
	margin-top: -5px;
}

.banner-slider {
	text-align: center;
	color: #fff;
	overflow: hidden;
}

.banner-slider .slide:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.50);
}

.banner-slider .slide {
	/*padding: 200px 0;*/
}

.banner-slider .slide .container {
		margin-top: 17%;
}

.banner-slider .slide h3 {
	padding: 0;
	margin-top: 0;
    text-shadow: 1px 1px #000000;
    color: #FFFFFF;
    font-size: 2.6em !important;
    font-style: normal;
    font-weight: 300 !important;
    color: #8ec743;
    text-decoration: none;
}

.banner-slider .slide h2 {
	/*font-size: 5.5em !important;
    font-weight: 300 !important;
    color: #fff;
  	text-shadow: 1px 1px rgba(0, 0, 0, 0.4) !important;
  	font-family: 'Permanent Marker', cursive;*/
  	font-size: 5.5em !important;
    font-weight: 300 !important;
    color: #fff;
    font-family: 'Permanent Marker', cursive;
    margin: 50px 0;
}

.banner-slider .slide a {
	font-size: 1.6em;
    color: #fff;
    margin-top: 15px;
    border: 1px solid #8ec743;
    font-family: 'Oswald', sans-serif;
    padding: 10px 25px;
    transition: 0.5s;
    border-radius: 0;
}


.banner-slider .slide a:hover {
	/*background: #000;
	border-color: #000;*/
	background: #8ec743;
    border-color: #8ec743;
}

.banner-slider .slick-prev {
	left: 20px;
	z-index: 99;
	width: 60px;
	height: 60px;
}

.banner-slider .slick-next {
	right: 20px;
	z-index: 99;
	width: 60px;
	height: 60px;
}

.banner-slider .slick-next:before,
.banner-slider .slick-prev:before {
	font-size: 30px;
}

.services-block {
	padding-top: 60px;
    padding-bottom: 60px;
    /*background: #eef7e2;*/
}

.services-block h3 {
	text-align: center;
	color: #fff;
	background: url('img/darkbackground.png');
	padding: 25px;
	font-size: 18px;
	line-height: 1em;
	margin: 0;
}

.services-block .inner {
	padding: 25px;
	/*background: #fff;*/
	background: #eef7e2;
}

.services-block .inner img {
	margin: 0 auto 25px;
	display: block;
}

.services-block .inner .btn {
	background: #8DC63F;
    color: #fff;
    margin-top: 20px;
    padding: 8px 20px;
    transition: 0.3s;
    border-radius: 0;
}

.services-block .inner .btn:hover {
	background: #000;
}

.middle-block {
	background: #8dc73f;
	padding: 50px 0 35px;
}

.main-content {
	padding-top: 60px;
    padding-bottom: 60px;
    /*background: #eef7e2;*/
}

.main-content h2 {
	margin-top: 0;
}

.main-content p {
	color: #808080;
}

.main-content img {
	max-width: 100%;
	height: auto;
}

.nav-tabs {
	border: none !important;
}

.nav-tabs>li>a {
	background: none !important;
    border: none !important;
    border-radius: 0;
    font-family: 'Oswald';
    text-transform: uppercase;
    color: #000;
    font-size: 16px;
}

.nav-tabs>li.active>a {
	border-top: 2px solid #000 !important;
	padding-top: 8px;
}

.tab-pane {
	padding-top: 25px;
}

.tab-pane .btn {
	background: #8DC63F;
    color: #fff;
    margin-top: 20px;
    padding: 8px 20px;
    transition: 0.3s;
}

.tab-pane .btn:hover {
    background: #000;
}

.sections {
	padding: 100px 0;
}

.sections .section-inner {
	height: 220px;
	overflow: hidden;
	cursor: pointer;
}

.sections .section-inner .content {
	background: url('img/darkbackground.png');
	top: 78%;
    padding: 15px;
    height: 100%;
    color: #fff;
    transition: 0.5s;
}

.sections .section-inner .content h3 {
	font-size: 18px;
    color: #fff;
    text-align: center;
    margin-top: 0;
}

.sections .section-inner .content h3 span {
	color: #8DC63F;
}

.sections .section-inner:hover .content {
	top: 0;
}

.page-banner {
    background: url('img/banner-default.jpg') no-repeat center center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 15px;
}

.page-banner:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.50);
}

.page-banner h1 {
    color: #Fff;
    margin: 0;
}

.page-banner h2 {
    font-family: 'Permanent Marker', cursive;
    color: #fff;
    margin: 0;
}

footer .top {
	background: #8dc73f;
	color: #fff;
	padding: 60px 0;
}


footer .top h2 {
	font-size: 2.2em;
}

footer .top .btn {
	font-size: 20px;
    color: #fff;
    border: 1px solid #ffff;
    font-family: 'Oswald', sans-serif;
    padding: 8px 25px;
    transition: 0.5s;
}

footer .middle {
	background: url('img/darkbackground.png');
	color: #fff;
}

footer .middle .wrap {
	padding: 40px 0;
	background: url('img/city.png') no-repeat center bottom;
}

footer .middle h3 {
	font-size: 16px;
	margin-bottom: 15px;
}

footer .middle h3 span {
	color: #8DC63F;
}

footer .middle a {
	color: #fff !important;
	word-break: break-word;
}

footer .middle img.footer-logo {
	display: block;
    margin: 55px auto;
    max-width: 100%;
    height: auto;
}

footer .middle ul {
	padding: 0;
	list-style: none;
}

footer .middle ul li {
	margin-bottom: 5px;
}

footer .middle ul ul {
	font-size: 12px;
	padding-left: 8px;
}

footer .bottom {
	background: #eef7e2;
    padding: 20px 0;
    display: block;
    float: left;
    width: 100%;
    color: #000;
    font-size: 13px;
    font-family: 'Oswald';
}

footer .bottom a {
	color: #005030 !important;
}

.page-top {
	background: #eef7e2 url('img/paw-prints.png') no-repeat;
	padding: 12px 0;
    background-size: 100% auto;
}

.page-content {
	padding-top: 40px;
    padding-bottom: 60px;
    /*background: #eef7e2;*/
}

.page-content h1 {
	margin-bottom: 25px;	
}

.page-content img {
	max-width: 100%;
	height: auto;
}

.page-content a {
	color: #005030;
}

.page-content .page-menu {
	background: #666;
	margin-top: 20px;
}

.page-content .page-menu h3 {
	background: url(img/darkbackground.png);
	text-align: center;
	padding: 25px 15px;
    margin: 0;
    color: #fff;
    font-size: 18px;
}

.page-content .page-menu h3 span {
	color: #8DC63F;
}

.page-content .page-menu ul {
	padding: 0px;
	list-style: none;
	color: #fff;
	margin: 10px 0;
}

.page-content .page-menu ul li {

}

.page-content .page-menu ul li a {
	color: #fff;
	text-transform: uppercase;
	padding: 10px 20px;
	text-decoration: none !important;
	transition: 0.5s;
	display: block;	
}

.page-content .page-menu ul li a:hover {
	background: #fff;
	color: #333;
}

.page-content .page-menu ul ul {
	margin: 0;
}

.page-content .page-menu ul ul li a {
	font-size: 12px;
	padding: 6px 20px;
}

.page-content .page-menu .toggle-menu:after {
	content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    top: 12px;
    right: 20px;
    background: url(img/sub-menu.png) no-repeat -78px -40px;
}

.wpcf7 .form-control {
	border-radius: 0;
	/*border: none;*/
}

.wpcf7 .row {
	margin-top: 6px;
	margin-bottom: 6px;
}

.wpcf7 span.wpcf7-list-item {
	margin-left: 0;
	margin-right: 5px;
}

.wpcf7 span.req {
	color: #ff0000;
}

.wpcf7 .wpcf7-checkbox input {
	display: block;
	float: left;
	margin: 3px 5px 0 0;
}

.wpcf7 span.c5Vac .wpcf7-list-item-label,
.wpcf7 span.f3Vac .wpcf7-list-item-label,
.wpcf7 span.calendarDayAware .wpcf7-list-item-label {
	display: none;
}

.wpcf7 .btn {
	background: #8dc73f;
    color: #fff;
    margin-left: 15px;
    margin-top: 14px;
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px 25px;
    transition: 0.3s;
}

.wpcf7 .btn:hover {
	color: #fff;
	background: #000;
}

.wpcf7  .wpcf7-response-output {
	display: block;
    float: left;
    margin-top: 50px;
    width: 100%;
    padding: 15px;
    text-align: center;
}

.wpcf7 .wpcf7-display-none {
	display: none;
}

.wpcf7 label {
	font-weight: normal;
}


.wpcf7 .btn.no-margin {
	margin-left: 0;
}

.navbar-fixed-top {
    position: absolute;
}

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media(max-width: 1200px) {

	.main-content .nav-tabs>li {
		display: block;
		width: 100%;
		text-align: center;
	}


}

@media(max-width: 991px) {

	.sections .section-inner .content h3 {
		font-size: 15px;
		margin-bottom: 10px;
	}
	
}

@media(max-width: 767px) {

	.banner-slider .slide .container {
		margin-top: 50%;
	}

	.banner-slider .slide h2 {
		font-size: 3.5em !important;
	}

	.banner-slider .slick-next,
	.banner-slider .slick-prev {
		display: none !important;
	}

/*body.home header .navbar-toggle {
		display: none !important;
	}

	body.home header .navbar-default .navbar-collapse {
		display: block;
		border: none;
	}*/
	
	.navbar-default .navbar-collapse {
	    background: #8fc744;
        text-align: center;
	}
	
	.navbar-default .navbar-toggle {
	    margin-bottom: 50px;
        border-radius: 0;
        border-color: #fff;
	}
	
	.navbar-default .navbar-toggle .icon-bar {
	    background-color: #8fc744;
	}

	header .navbar-nav {
		padding: 0 20px !important;
	}
	
	.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	    background-color: #fff;
	}

	.header-phone {
		float: left !important;
		width: 100%;
	}
	
	header .navbar-default .navbar-nav>li:hover ul.dropdown-menu {
	    background: #fff;
	}

	.services-block h3 {
		margin-top: 20px;
	}

	.middle-block img {
		max-width: 100%;
		height: auto;
	}

	.main-content .nav-tabs {
		margin-top: 25px;
	}

	.sections .section-inner .content h3 {
		font-size: 18px;
	}

	.sections .section-inner {
		margin-bottom: 20px;
	}

	footer .middle,
	footer .bottom {
		text-align: center;
	}

	footer .bottom .pull-left,
	footer .bottom .pull-right {
		width: 100%;
	}

	div.wpcf7 {
		margin-bottom: 50px;
	}

	.page-content img.alignright {
		max-width: 35%;
		height: auto;
	}

}