/*
Theme Name: iris
Theme URI: http://www.trekwebdesign.com.au
Author: Georgia Tang for Merewether Veterinary Hospital
Author URI: http://www.trekwebdesign.com.au
Description:  merewether-vet theme based on iris and underscores
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iris
Tags: white

This theme, like WordPress, is licensed under the GPL.
iris is based on the building blocks of Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

For support visit http://www.trekthemes.com/support/

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/

Fonts sourced through google fonts are under the SIL Open Font License (OFL)
*/

/*--------------------------------------------------------------
Contents
----------------------------------------------------------------
1.0 Reset
2.0 Typography
3.0 Elements
4.0 Forms
16.0 Plugin support
	16.1 Woocommerce
	16.2 Mailchimp
5.0 Navigation
	5.1 General Links
	5.2 Navigation for posts and pages
	5.3 Menus
		5.31 Main menu
		5.32 Main menu small screens
		5.33 Social media menu
6.0 Accessibility
7.0 Alignments
8.0 Clearings
9.0 Widgets
10.0 Content
	10.1 Posts and pages
	10.2 Asides
	10.3 Comments
12.0 Media
	12.1 Captions
	12.2 Galleries
13.0 Site Header
14.0 Site Footer
15.0 Widget areas (sidebars)
	15.1 Main widget area ('sidebar')
	15.2 Footer widget area ('sidebar-footer')
	15.3 Header widget area ('sidebar-header')

17.0 Site structure and its Media queries
18.0 site colour scheme
--------------------------------------------------------------*

/*--------------------------------------------------------------
1.0 Reset
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust:     100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
	box-sizing: border-box;
	 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;	/* Apply a natural box layout model to the document; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
	background: #fff; /* Fallback for when there is no custom background color defined. */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
/*google fonts are added using enqueue google fonts in functions.php*/

body,
button,
input,
select,
textarea {
	color: #1a1a1a;
	font-family: "Didact Gothic", "Arimo", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: 1.6em;
	font-size: 1.6rem;
	line-height: 1.5;
}

.main-navigation a {
text-transform:uppercase;
}

#dandc { /*diligence & compassion*/
font-family: "Dancing Script";
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p, ul, ol {
	margin-bottom: 1.5em;
	font-size: 1.1em;
	font-size: 1.8rem;
	font-family: "Arimo", "Droid Sans", Helvetica, Arial, sans-serif;
}

b,
strong {
	font-weight: bold;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 1.5rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}


/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

th {
	font-weight: bold;
}

/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	max-width: 100%;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid #1a4e62;
	border-radius: 3px;
	background: #1a4e62;
	color: #fff;
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	/*-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	line-height: 1.5;
	padding: 5px 1em;
	text-transform: uppercase;
	text-align: center;
}

.button:hover,
.button:focus,
.button:active,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #187583;
	color: #fff;
	border: 1px solid #187583;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	border: 1px solid #ddd;
	border-radius: 3px;
	color: #333;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
	background-color: #fcfcfc;
}

input[type="search"]:focus {
	border: 1px solid #ddd;
	background-color: #ddd;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"] {
	color:#000;
	max-width: 100%;
	padding: 6px;
	padding-right:0;
}

textarea {
	height: 150px;
	max-width: 500px;
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 3px;
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 100%;
}

label {
	padding-right: 10px;
	padding-bottom: 10px;
}

.wpcf7-form p { /*reduce space between appointment booking form items*/
margin-bottom: 1em;
}
/*--------------------------------------------------------------
4.0 Plugin support
--------------------------------------------------------------*/

/*contact form 7 colours*/

div.wpcf7-mail-sent-ok {
    border: 2px solid #187583;
}

/*--------------------------------------------------------------
5.0 Menus & Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Navigation for posts and pages
--------------------------------------------------------------*/
.site-main .comment-navigation,
.site-main .paging-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

.cat-links, 
.comments-link, 
.posted-on {  /*'posted in' and 'leave a comment' in the post footer, and 'posted on' in the post header*/
	font-family: "Dancing Script";
	font-size: 1.2em;
}

.cat-links {
	margin-right:3em;
}

.tags-links {
	margin-right: 2em;
}

.cat-links a {
	margin-left: 0.2em;
}

.byline,
.comments-link {
display: none;
}

/*--------------------------------------------------------------
5.3 Main Menu
--------------------------------------------------------------*/
/*menu that centers with drop down links that are clickable on touch screens but not accessible (can't have both)*/

.main-navigation { /*the following uses the menu centering technique from matthewjamestaylor.com*/
	clear: both;
	float: left;
	position: relative;
	width: 100%;
	margin-top:1em;
	padding: 0;
	background-color: #1a4e62;
}

.main-navigation ul {
   float:right;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   text-align:center;


}

.main-navigation li {
	float:left;
	margin:0;
	padding:0;
	position:relative;
	left:50%;
}

.main-navigation ul li:hover { 
	z-index: 100;
}

.main-navigation ul a { /*each first level link*/
	display: block;
	font-size: 1em;
	letter-spacing:0.04em;
	line-height: 2.5em;
	padding-left: 28px;
	padding-right: 28px;
	margin: 0;
	text-decoration: none;
	color: #333;
	color: #fff;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active
.main-navigation li.hover a {
	-webkit-transition: background-color 0.25s ease-in-out;
	-moz-transition: background-color 0.25s ease-in-out;
	-ms-transition: background-color 0.25s ease-in-out;
	-o-transition: background-color 0.25s ease-in-out;
	transition: background-color 0.25s ease-in-out;
	text-decoration: none;
}

.main-navigation ul ul { /*each list block of child links*/
	position: absolute;
	display: none;	
	top: 2.5em;
	right: 50%;
	width: 268px;
}

.main-navigation ul ul li {
left: 50%;
margin: 0;
clear: left;
width: 100%;
line-height: 2em;
}

.main-navigation ul ul ul { /*each list block of grandchild links*/
	position:absolute;
	display: none;
}

.main-navigation ul ul ul li { /*each list block of grandchild links*/
left: auto;
right: auto;
}

.main-navigation ul li:hover > ul /*>sign is important, it causes only the child link to appear on hover of its parent rather than both child and grandchild links*/
 {
/*set this to 50% and don't include a setting for left: to center links directly under the parent link*/
	display: block;
top: 2.5em;
}


.main-navigation ul ul a,
.main-navigation ul ul ul a {
	background-color: #1a4e62;
	font-size: 0.9em;
	line-height: 2.5em;
	width: 268px; /*keep this value same as that for .main-navigation ul ul above*/
	border-top: 1px dotted #187583;
}

.main-navigation ul ul ul a {
width: 350px;/*wider grandchild links for lengthy titles*/
}

.main-navigation ul ul li:hover > ul {
		display: block;
		left:100%;
top: 0em;
}

/*--------------------------------------------------------------
5.31 Main Menu toggle
--------------------------------------------------------------*/

.menu-toggle {
	display: none;
}

button.menu-toggle {
	background: url(nav-three-lines-black.png) no-repeat scroll;
	border: none;
	box-shadow: none;
	padding: 1.3em;
	float: right;
	max-width: 40px;
	z-index: 999;
}

button.menu-toggle:focus {
	outline: none;
}

	
/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
	margin-bottom: 0.5em;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}


/*--------------------------------------------------------------
9.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
9.1 Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.post-edit-link {
	font-weight: bold;
	margin-left: 1em;
	text-decoration: underline;
}

.attachment-post-thumbnail { /*the photo that goes next to search results and archive results if uploaded via the dashboard*/
	float: left;
	margin: 0.5em 1em 2em 0;
}

.post-navigation {
	display: none;
}

/*--------------------------------------------------------------
10.3 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
11.0 Media
--------------------------------------------------------------*/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

.wp-post-image {
	margin-top: 1em;
}

/*--------------------------------------------------------------
11.1 Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
11.2 Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
	margin-bottom: 2em;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
	font-size: 1.4em;
}

/*--------------------------------------------------------------
15.2 Header widget area ('sidebar header') for blog (news) page
--------------------------------------------------------------*/
#sidebar-header{
	max-width: 100%;
	position: relative;
	border-bottom: 1px dotted #ccc;
	margin-bottom: 0.5em;
}

#sidebar-header .widget {
    display: inline-block;/*the key to getting the widgets to line up vertically at the bottom of the header*/
	margin: 0;
	padding: 0em 2em 1.5em 0;
	z-index:100;
}

#sidebar-header label {
	padding: 0em 0.5em 0.5em;
}

#sidebar-header .search-field {
}

.widget_search h2 { /*search widget*/
padding-left: 10px;
}

#cat { /*category search dropdown widget*/
padding: 5px;
border: 1px solid #ddd;
}

/*--------------------------------------------------------------
12.0 Site header
--------------------------------------------------------------*/
.site-header {
	position: relative;
	background-color: #fff;
	z-index: 9999;
	float: left;
	overflow: hidden;
}

.site-logo {
	width: 220px;
	margin: 20px auto auto 80px;
	float: left;
}

/*--------------------------------------------------------------
Header text areas
--------------------------------------------------------------*/
#dandc {
    font-size: 2.5em;
    position: absolute;
    right: 1.5em;
    top: 50px;
}

#phone {
	float: left;
	margin-top: 4.2em;
	margin-left: 4.5em;
}

#phone h2 {
font-size: 1.4em;
color: #10526c;
color: #333;
text-align: right;
}

#phone h2 {
    color: #333;
    font-size: 1.4em;
    text-align: left;
}

#phone a {
color: #10526c;
font-size: 1.4em;
font-weight: bold;
letter-spacing: 0.02em;
}

#facebook {
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}

/*****************************************************************
14.0 headings and other styles for text within posts*/

h1.entry-title, 
h1.page-title,
.practice-news  {
	padding: 0em 0.5em 0em 0;
	letter-spacing: 0.05em;
}

.practice-news {
padding-bottom: 0.5em;
}

h1.entry-title,
.practice-news { /*the title of the page as entered in the top editing box of each page*/
	font-size: 1.8em;
}

h1.page-title { /*this is the title of search pages etc*/
	font-size: 1.6em;
	padding-bottom: 1em;
	margin-top: 0.5em;
}

.entry-content h1 {
	font-size: 1.6em;
	margin-bottom:0.4em;
}

.entry-content h2 {
	font-size: 1.5em;
	margin-bottom:0.6em;
	color: #006673;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.entry-content h3 {
	font-size: 1.4em;
	margin-bottom:0.4em;
}

.entry-content h4 {
	font-size: 1.3em;
	margin-bottom:0.4em;
}

h4.no-clear {
	clear:none;
	float: left;
}

.entry-content h5 {
	font-size: 1.2em;
	margin-bottom:0.4em;
	font-weight: bold;
}

.entry-content h6 {
	font-size: 1.1em;
	margin-bottom:0.4em;
	font-weight: bold;
}


.entry-content .no-underline { /*remove underline from a.no-underline within some pages*/
text-decoration: none;
}


p.form-allowed-tags {
	display:none;
}

.post {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 2em;
	overflow: hidden; /*added this to push the post border-bottom under the post image on search excerpts where the post content was shorter than the image*/
}

.entry-footer {
	margin-top: 1em;
}

/*--------------------------------------------------------------
15.0 Site Footer
--------------------------------------------------------------*/
.site-footer {
	clear:both;
	width:100%;
	height: 300px;
	background: url(beachfooter5.jpg) no-repeat scroll center top;
	position: relative;	
	float: left;
	overflow: hidden;
}

.site-info {
margin-top: 3.5em;
}

.site-info p {
	font-size: 1.2em;
	color: #fff;
}

.site-info a {
color: #fff;
}

.site-info a:hover {
color: #187583;
}

.footer-info-left {
text-align: right;
float: left;
width: 48%;
padding-right: 2%;
border-right: 1px solid #fff;
}

.footer-info-right {
text-align: left;
float: right;
width: 48%;
padding-left: 2%;
}

.inferior-footer { /*contains copyright and trek credit*/
position: absolute;
bottom: 0.5em;
right: 1em;
z-index: 100;
}

.trek-credit a {
text-decoration: underline;
}

/***************************************
16.1 Content - contact page
****************************************/
.opening-hours {
float: left;
max-width: 450px;
}

td {
width: 110px;
}

td.times {
width: 270px;
}

table {
font-size: 1.3em;
}

#contact-page-content .entry-content {
width: 50%;
float: left;
padding: 0;
margin: 0;
}

.contact-page-image-column {
width: 45%;
float: left;
padding: 0 1em;
}

#contact-page-image {
margin-top: -50px;
border: 1px solid #ddd;
}

#the-map {
height: 350px;
width: 100%;
border: 1px solid #ddd;
float: left;
}
/*--------------------------------------------------------------
17.0 Site structure and media queries
--------------------------------------------------------------*/
.homepage-content-area,
#primary,
#container {
width: 70%;
max-width: 1400px;
margin: 0 auto;
padding: 2em auto; /*adjust any padding border around the text content area of the homepage*/
	background-color: #fff;
}

.homepage-content-area a {
text-decoration: none;
}


@media only screen and (min-width: 1597px) { /*this image is 1920px wide - to cover widescreens like karen's*/
.site-footer {
	height: 300px;
	background: url(beachfooter5widescreen.jpg) no-repeat scroll center top;
}
}

@media only screen and (min-width: 1500px) { /*center slideshow once it cannot occupy full screen width - slideshow is 1500px width max*/
#homepage-slideshow {
width: 1900px;
margin: 0 auto;
}

.site-logo {
	width: 250px;
	margin: 20px auto auto 120px;
}

#phone {
    left: 32em;
    position: absolute;
    top: 0;
	right: auto;
}

#phone h2 {
font-size: 1.7em;
}

#dandc {
    font-size: 2.5em;
    right: 4em;
}
}

@media only screen and (max-width: 1270px) {
	.homepage-content-area,
	#primary, 
	#container {
	padding: 2em auto;
	}

}

@media only screen and (max-width: 1200px) {

body {
font-size: 1em;
font-size: 1.4rem;
}

p, ul, ol {
	font-size: 1.2em;
	font-size: 1.7rem;
}

.site-info { /*footer text*/
margin-top: 4.5em;
}
}

@media screen and (max-width: 1100px) {
.site-logo {
	width: 220px;
	margin: 20px auto auto 40px;
}
}

@media screen and (max-width: 900px) {
	.homepage-content-area,
	#primary, 
	#container {
	padding: 2em;
	}
	
#dandc {
    font-size: 2em;
    position: absolute;
    right: 1em;
	top: 70px;

}

/*.main-navigation ul a,
.main-navigation ul ul a,
.main-navigation ul ul ul a {
	height: 2em;
	line-height: 2em;
}

.main-navigation ul ul { /*each list block of child links*
	top: 2em;
}

.main-navigation ul ul a,
.main-navigation ul ul ul a {
font-size: 0.9em;
}*/

}

@media screen and (max-width: 800px) {
#facebook {
position: absolute;
top: 10px;
right: 65px;
z-index: 10000;
}

#phone {
	float: left;
	margin-top: 2em;
	margin-left: 4.5em;
}

#dandc {
    font-size: 2em;
    position: relative;
	float: left;
	right: auto;
	top: auto;
	margin: 100px auto auto -180px;
}

p, ul, ol {
	font-size: 1.5em;
	font-size: 1.5rem;
}

	.menu-toggle,
	.main-navigation.toggled .nav-menu {
		display: block;
	}

	.main-navigation {
		right: 1em;
		top: 0;
		bottom: auto;
		z-index: 9999;
		background-color: #fff;
		width: auto;
		position: absolute;
		padding: 0;
	}

	.main-navigation ul {
		clear:both;
		display: none;
		left: auto;
		right: auto;
		padding: 0;
	}

	.main-navigation ul li {
		display:block;
		clear:both;
		width:100%;
		left: auto;
		right: auto;
	}

.main-navigation ul li:hover  ul /*>sign is important, it causes only the child link to appear on hover of its parent rather than both child and grandchild links*/
 {
display: none;
}

.main-navigation ul a {
		line-height: 2.8em;
		height: 2.8em;
		font-size: 1em;
		padding: 0 10px;
		background-color: #1a4e62;
		color: #fff;
	}

	.main-navigation a:hover,
	.main-navigation a:focus,
	.main-navigation a:active {
		background-color: #fff;
		color: #07c2cc;
		-webkit-transition: color 0.25s ease-in-out;
		-moz-transition: color 0.25s ease-in-out;
		-o-transition: color 0.25s ease-in-out;
		-ms-transition: color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out;
	}
}


@media only screen and (max-width: 700px) {
.site-info p { /*footer text*/
	font-size: 1em;
}

.footer-info-left {
padding-right: 1em;
}

.footer-info-right {
padding-left: 1em;
}

.contact-page-image-column {
    float: right;
    width: 40%;
}

#contact-page-content .entry-content {
    float: left;
    margin: 0;
    padding: 0;
    width: 60%;
}

.alignleft.size-full,
.alignright.size-full {
max-width: 100%;
width: 100%;
}
}

@media only screen and (max-width: 600px) {
.contact-left-column,
.contact-right-column {
width: 100%;
padding: 0 2em;
}


.footer-info-left {
text-align: left;
float: left;
width: 47%;
padding-right: 0;
padding-left: 3%;
border-right: 1px solid #fff;
}

.footer-info-right {
text-align: left;
float: left;
width: 50%;
padding-left: 1em;
}

.site-logo {
	width: 220px;
	margin: 20px auto auto 15px;
}
}
@media only screen and (max-width: 570px) {
.site-logo {
width: 180px;
}

#phone {
	margin-top: 1.2em;
	margin-left: 4.5em;
}

#dandc {
font-size: 1.8em;
 margin: 85px auto auto -160px;
	}
	
#phone h2 {
    font-size: 1.2em;
	}
	}

@media only screen and (max-width: 530px) {

.footer-info-left {
text-align: center;
float: left;
width: 80%;
padding-right: 0;
padding-left: 0;
margin-right: 10%;
margin-left: 10%;
border-right: 0px solid #fff;
}

.footer-info-right {
text-align: left;
float: left;
width: 70%;
padding-left: 1em;
margin-top: 1em;
color: #1a1a1a!important;
}

.site-info p { /*footer text*/
	font-size: 1.1em;
}

}

@media only screen and (max-width: 500px) {
.site-logo {
width: 180px;
margin-top: 10px;
}

#phone {
	margin-top: 50px;
	margin-left: 40px;
}

#dandc {
font-size: 1.8em;
float: left;
clear: left;
width: 100%;
margin: 10px auto auto auto;
text-align: center;
	}
	
p, ul, ol {
	font-size: 1.4em;
	font-size: 1.4rem;
}

h1.entry-title {
	font-size: 1.4em;
}

h1.page-title { /*this is the title of search pages etc*/
	font-size: 1.4em;
}

.entry-content h1 {
	font-size: 1.4em;
}

.entry-content h2 {
	font-size: 1.2em;
}

.entry-content h3 {
	font-size: 1.2em;
}

.entry-content h4 {
	font-size: 1.1em;
}

	.homepage-content-area,
	#primary, 
	#container {
	padding: 1.5em;
	}

	.contact-page-image-column {
    float: left;
    width: 100%;
	clear: both;
	margin-top: 80px;
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 0;
}

#contact-page-content .entry-content {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}

.contact-details,
.opening-hours {
padding-left: 30px;
}

.alignleft .size-full,
.alignright .size-full,
.alignleft .vets-medium,
.alignright .vets-medium { /*medium size images -resizing to full width at screens under 500px stop wrapping paragraphs being too short*/
width: 100%;
}


}

@media only screen and (max-width: 450px) {
.main-navigation {
		right: 0.2em;
	}
	

#phone h2 {
    font-size: 1.1em;
}

#phone {
	margin-top: 40px;
	margin-left: 20px;
}

.site-logo {
margin-top: 10px;
width: 160px;
}

.trek-credit {
display: none;
}

#sidebar-header .widget {
    padding: 0 0.5em 1.5em 0;
}
}

@media only screen and (max-width: 400px){
.alignleft,
.alignright{ /*resizing images in content area to full screen width stop wrapping paragraphs being too short*/
width: 100%;
}
}

@media only screen and (max-width: 360px) {
#phone h2 {
    font-size: 1.1em;
}

#phone a {
    font-size: 1.15em;
}

#phone {
	margin-top: 45px;
	margin-left: 18px;
}

.site-logo {
margin: 10px 0 0 5px;
width: 150px;
}

.contact-details,
.opening-hours {
padding-left: 10px;
}

}

@media only screen and (max-width: 330px) {
#phone {
	margin-left: 10px;
}

.site-logo {
margin: 5px 0 0 5px;
}
}

/***********************************************************
18.0 Colour scheme styles
#fff= white, #000 =black,  #666=mid grey, #ccc=light grey*/
.site-header, 
h1.site-title, 
.site-title a, 
.site-description,
.main-navigation a,
a {
	color: #1a1a1a;
	text-decoration:none;
}

a:hover,
a:focus,
a:active {
	color: #187583; /*the hover color for minor links*/
}

.entry-content a {
color: #1a4e62;
text-decoration: underline;
}

.entry-content a:hover,
.entry-content a:focus {
color: #187583;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
	background-color: #187583; /*change this number to change the hover color behind the links in the main menu*/
	color:#fff;
	}


.widget-title,
.page-title,
.entry-title a,
.entry-title {
	color: #1a1a1a; /*change this number to change the color of the major headings - the site title, page title and post titles. */
}

.entry-title a:hover {
color: #187583;
}