@charset "UTF-8";
/*
 * ARK Dog Walking
 * Section 1: Varela Round, self-hosted (was Google Fonts).
 * Section 2: Bootstrap 3.3.1 defaults the original design relied on, restated on top of
 *            Bootstrap 5.3.8 so the layout renders as before.
 * Section 3: the original Croogo theme stylesheet (Live/webroot/css/style.css).
 *            Changes: a.selected is now li.current-menu-item > a; .shadow is .ark-shadow
 *            (Bootstrap 5 has a .shadow utility).
 * Section 4: WordPress output (gallery, Gravity Forms) styled to match the Croogo markup.
 */

/* 1. Font
-------------------------------------------------- */
@font-face {
	font-family: 'Varela Round';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/varela-round-latin-ext-400-normal.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Varela Round';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/varela-round-latin-400-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Bootstrap 3 parity
-------------------------------------------------- */
html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body { line-height: 1.42857143; color: #333; }
a { text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: inherit; line-height: 1.1; }
p { margin: 0 0 10px; }
ul, ol { padding-left: 0; margin-top: 0; margin-bottom: 10px; }
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
b, strong { font-weight: 700; }
hr { height: 0; box-sizing: content-box; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; color: inherit; opacity: 1; }
blockquote { padding: 10px 20px; border-left: 5px solid #eee; }
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child { margin-bottom: 0; }
address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; }
label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
th { text-align: left; }
dl { margin-top: 0; margin-bottom: 20px; }

.img-responsive { display: block; max-width: 100%; height: auto; }
.clearfix::before { content: " "; display: table; }

/* Container: Bootstrap 3 widths (the theme caps them at 950px below). */
.container { width: auto; max-width: none; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }
.container::before, .container::after { content: " "; display: table; }
.container::after { clear: both; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* Grid: 30px gutters; .b3col is a Bootstrap 3 column used outside a .row. */
.row { --bs-gutter-x: 30px; }
.b3col { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.ark-bleed { margin-left: -15px; margin-right: -15px; }
.ark-bleed::before, .ark-bleed::after { content: " "; display: table; }
.ark-bleed::after { clear: both; }

/* Tables (.table) */
.table { width: 100%; max-width: 100%; margin-bottom: 20px; color: inherit; border-color: #ddd; }
.table > :not(caption) > * > * { padding: 8px; line-height: 1.42857143; vertical-align: top; color: inherit; background-color: transparent; border-top: 1px solid #ddd; border-bottom-width: 0; box-shadow: none; }

/* Navigation bar */
.ark-navbar { position: relative; z-index: 1000; min-height: 50px; }
.ark-navbar::before, .ark-navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after { content: " "; display: table; }
.ark-navbar::after, .navbar-header::after, .navbar-collapse::after { clear: both; }
.navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.navbar-collapse.show { overflow-y: auto; }
.navbar-default .navbar-collapse { border-color: #e7e7e7; }
.navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; }
.navbar-toggle:focus { outline: 0; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
.navbar-default .navbar-toggle { border-color: #ddd; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ddd; }
.navbar-default .navbar-toggle .icon-bar { background-color: #888; }
.nav { display: block; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav::before, .nav::after { content: " "; display: table; }
.nav::after { clear: both; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; }
.nav-justified { width: 100%; }
.nav-justified > li { float: none; }
.nav-justified > li > a { margin-bottom: 5px; text-align: center; }
@media (min-width: 768px) {
	.navbar-header { float: left; }
	.navbar-collapse { width: auto; border-top: 0; box-shadow: none; }
	.navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; visibility: visible !important; }
	.navbar-collapse.show { overflow-y: visible; }
	.ark-navbar .navbar-collapse { padding-right: 0; padding-left: 0; }
	.navbar-toggle { display: none; }
	.nav-justified > li { display: table-cell; width: 1%; }
	.nav-justified > li > a { margin-bottom: 0; }
}

/* 3. Original theme stylesheet
-------------------------------------------------- */
* {
	margin:0;padding:0;
} 

html, body {
	height: 100%;
}

html {
	overflow-y:scroll;
}

body {
	font-size:10px;
	font-family: 'Varela Round', sans-serif;
	background:#d7d7d7;
}

#wrap {
	-moz-box-shadow: 0px 0px 10px #333;
	-webkit-box-shadow: 0px 0px 10px #333;
	box-shadow: 0px 0px 10px #333;
}

.container {
	max-width:950px;
	background:#fff;
}

.header {
	padding:20px;
}

.content {
	padding:30px 0;
}

.footer {
	background:#f17a28;
	padding:30px;
	color:#FFF;
	font-size:1.3em;
}

.footer ul li {
	list-style:none;
}

.footer ul li a {
	color:#FFF;
}

/******** Font Formatting ********/

h1, h2, h3, h4, h5, h6 {
	font-weight:400;
	color:#883213;
	font-size:3em;
	margin:0;
	padding:0;
	margin-bottom:15px;
}

h1.title {
	font-size:1.6em;
	margin-bottom:30px;
}

b, strong {
	color:#883213;
}

.header span {
	color:#883213;
	font-size:2em;
}

a {
	color:#f90;
}

.header h1 {
	color:#f17a28;
	font-size:5.6em;
}

.node-body p {
	text-align:justify;
}

.node-body p, .node-excerpt, .contact-body, #contact address, .node-body table {
	font-size:1.4em;
	font-weight:200;
}

#contact address {
	margin-top:15px;
}

.node-body ul, .node-body ol, .node-body blockquote {
	margin-left:25px;
	font-size:1.4em;
}

.node-10 ul li {
	margin-bottom:15px;
}

.node-4 .node-body {
	color:#F00;
}

.node-11 img {
	margin-bottom:30px;
}

blockquote {
	font-size:1em;
	margin:20px 20px 60px 20px;
}

.block {
	font-size:1.4em;
}

.block ul li {
	list-style:none;
	background:url(../img/green-tick.png) no-repeat;
	padding-left:20px;
	margin-bottom:5px;
	color:#883213;
}

.error-message {
	color:#F00;
	font-size:1.1em;
}

label {
	font-size:1.3em;
	font-weight:200;
}


.navbar-default {
	background:none;
	border:none;
	margin-bottom:0;
	background:#f17a28;
}

#node-10 ul li {
	margin-bottom:30px;
}


.navbar-default .nav-justified > li > a {
	border-left:1px solid #FFF;
	padding-top:0;
	padding-bottom:0;
	margin-top:15px;
}

.navbar-default .nav-justified > li:first-child > a {
	border-left:0;
}

.navbar-default .nav-justified > li > a,
.navbar-default .nav-justified > li > a:hover,
.navbar-default .nav-justified > li > a:focus {
  color: #fff;
  background-color: transparent;
  text-decoration:none;
  font-size:1.3em;
}


.navbar-default .nav-justified > li.current-menu-item > a, .navbar-default .nav-justified > li > a:hover {
	text-decoration:underline;
}

.submit input {
	padding:5px 10px;
	font-size:1.2em;
}


#slideshow {
    position:relative;
	min-height:210px;
}

.h_iframe        {margin-top:50px;position:relative; padding-top: 180%; margin-bottom:50px;}
.mYiframe        {margin-top:50px;position:relative; padding-top: 50%; margin-bottom:50px;}
.h_iframe iframe, .mYiframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

@media (min-width: 768px) {
  #slideshow {
	  height:317px;
}
}

@media (min-width: 992px) {
  #slideshow {
	  height:400px;
}
}

@media (min-width: 1200px) {
  #slideshow {
	  height:401px;
}
}

@media (max-width: 769px) {
	.navbar-default .nav-justified > li > a {
	border-left:0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight:400;
	color:#883213;
	font-size:1.8em;
	margin:0;
	padding:0;
	margin-bottom:15px;
}

.header h1 {
	font-size:2.2em;
}

.header {
	text-align:center;
}

.header img {
	max-width:200px;
	margin:auto;
}

.header span {
	font-size:2em;
}

}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

.ark-shadow {
	background:url(../img/shadow.jpg) top center;
	display:block;
	height:13px;
	width:100%;
}

.block-profiles {
	border-top:1px solid #883213;
	margin-top:30px;
	padding-top:30px;
}

.block-profiles h3 {
	font-size:1.3em;
	font-weight:800;
}

.block-profiles h4 {
	font-size:1em;
	font-weight:800;
}

.block-profiles .node-body p {
	font-size:1em;
}

.profile {
	border-bottom:1px solid #883213;
	margin-bottom:30px;
	padding-bottom:10px;
}

.profile img {
	margin-bottom:5px;
}

.social img {
	max-width:30px;
}

/******** Messages ********/

#authMessage .message, div .message {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    color: #c09853;
    color: #b94a48;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    background-color: #f2dede;
    border: 1px solid #fbeed5;
    border-color: #eed3d7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#authMessage .error, div .error {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    color: #c09853;
    color: #b94a48;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    background-color: #f2dede;
    border: 1px solid #fbeed5;
    border-color: #eed3d7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#authMessage .success, div .success {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    color: #c09853;
    color: #468847;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    background-color: #dff0d8;
    border: 1px solid #fbeed5;
    border-color: #d6e9c6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/* 4. WordPress output
-------------------------------------------------- */

/* Gallery: same grid as the Croogo gallery (four per row from 992px, one per row below). */
.gallery { margin-left: -15px; margin-right: -15px; }
.gallery::before, .gallery::after { content: " "; display: table; }
.gallery::after { clear: both; }
.gallery br { display: none; }
.gallery-item, .gallery-icon { margin: 0; }
.gallery-item { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.gallery-icon img { display: block; max-width: 100%; height: auto; }
@media (min-width: 992px) { .gallery-item { float: left; width: 25%; } }

/* Gravity Forms contact form, matching the Croogo form (Bootstrap 3 form controls). */
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.contact-form .gform_validation_container, .contact-form .gfield--type-honeypot, .contact-form .gform_hidden, .contact-form .gfield_visibility_hidden, .contact-form .gfield_required { display: none !important; }
.contact-form .gform_fields { margin: 0; padding: 0; list-style: none; border: 0; }
.contact-form .gfield { margin-bottom: 15px; }
.contact-form .gfield--type-html { margin-bottom: 0; }
.contact-form .gfield_label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-size: 1.3em; font-weight: 200; }
.contact-form .gfield input[type=text], .contact-form .gfield input[type=email], .contact-form .gfield input[type=tel], .contact-form .gfield textarea { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
.contact-form .gfield textarea { height: 134px; }
.contact-form .gfield input:focus, .contact-form .gfield textarea:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); }
.contact-form .gform_footer input[type=submit] { padding: 5px 10px; font-size: 1.2em; }
.contact-form .validation_message, .contact-form .gfield_description.validation_message { color: #F00; font-size: 1.1em; }
.contact-form .gform_validation_errors { padding: 8px 35px 8px 14px; margin-bottom: 20px; color: #b94a48; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #f2dede; border: 1px solid #eed3d7; border-radius: 4px; font-size: 1.4em; }
.contact-form .gform_validation_errors h2 { font-size: 1em; color: inherit; margin: 0; }

/* WordPress wraps text inside a blockquote in <p>; keep the Croogo look. */
.node-body blockquote p { font-size: inherit; font-weight: inherit; text-align: inherit; }

/* Flat HTML contact form: Bootstrap 3 form controls, as on the Croogo site. */
.form-group { margin-bottom: 15px; }
.form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
.form-control:focus { color: #555; background-color: #fff; border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); }
textarea.form-control { height: auto; }