@font-face { font-family: 'Manrope';  font-style: normal; font-weight: 100 700; src: local('Manrope'), local('Manrope Regular'), url('/assets/Manrope-VariableFont_wght.ttf') format("truetype"); font-display: swap;}

:root {
    --accent: #F59E36;
    --prime: #368082;
    --light-green: #D7ECCA;
    --grey: #414141;
    --blue: #D9F1F1;
    --white: #eeeeee;
    --black: #000000;

}
/* 
green 368082
grey 666666
Dark brown A85825
light orange F59E36*/

html { -webkit-text-size-adjust: 100%; }
main {  display: block; }
h1, .h1 { margin: 0.67em 0; font-weight:400;    color: #368082;}
h2, .h2{ margin: 1em 0 0.67em 0; font-weight:400;}
h3, .h3{ margin: 0 0 0.67em 0; font-weight:400;}
hr {  box-sizing: content-box; height: 0;  overflow: visible; } 
pre {  font-family: monospace, monospace;  font-size: 1em; }
a {  background-color: transparent; }
img { border-style: none; }
iframe {border: none;}
button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }
button, input {  overflow: visible; }
button, select {  text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend {  box-sizing: border-box;  color: inherit;  display: table;   max-width: 100%;   padding: 0;   white-space: normal; }
textarea { overflow: auto; }
[type="checkbox"],[type="radio"] {box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {  height: auto;}
[type="search"] {-webkit-appearance: textfield;  outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
.clear:after { content: " "; display: table; clear: both; }


.system-page, .system_page {padding:60px 10px; text-align:center;}
.system_page .big_letter {font-size: 5em;font-weight: normal;color: var(--accent);}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block}
.system_table {margin: auto;}
/*********************************************BASICS************************************************/

body { margin: 0;line-height: 1.5; font-family: 'Manrope', Arial, sans-serif; font-weight:300;}
.container { width:100%; max-width: 1280px; margin: auto; }
header {border-bottom: solid thin #999999;}
p { margin-top: 5px; }
a:hover { text-decoration:none; color:#CF4917;}
a { text-decoration:underline; color:#000000;}
* { box-sizing: border-box; }
ul {margin:0 0 1em 0;}


.text-center {text-align:center;}
.text-left {text-align:left;}
.text-right {text-align:right;}
.indent {margin-left:20px;}
.right {float:right;}
.center {margin:auto;}
@media only screen and (max-width: 600px) {
    body { font-size:1.1em; }
}

.system_page {padding:60px 10px;}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block}
.system_title{font-size:24px;line-height:1.25;margin:0 0 20px;text-align:center}
.system_text{margin-bottom:45px;text-align:center}
.system_subtitle{font-size:20px;text-align:center;margin:0 0 15px}
.system_table{width:50%; margin:auto;}
.system_table td{width:50%;padding:10px 5px 10px 0;text-align:left;vertical-align:top}
.system_table td:last-child{text-align:right;padding:10px 10px 0 5px}
@media only screen and (max-width: 600px) {
   .system_table{width:100%}
}


/****youtube****/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*****************************************************GRID*****************************************************/
.grid-group { display: flex; flex-wrap: wrap; align-items: center;}
.grid-group-aside { display: flex;}
.grid-group-justify {justify-content: center;}
.grid-group-top { display: flex; flex-wrap: wrap; justify-content: center;}
.grid-header-logo { margin: 10px 1% -4px 1%; width: 23%; text-align:left; }
.grid-header-right { margin: 10px 1% 0 1%; width: 73%; text-align:right; }

.grid-header-logo img{ width:100%; height:auto; }
.grid50{ margin: 10px 1% 0 1%; width: 48%;}
.grid33{ margin: 10px 1% 0 1%; width: 31%;}
.grid25{ margin: 10px 1% 0 1%; width: 23%;}
.grid75{ margin: 10px 1% 0 1%; width: 73%;}
.grid100{ margin: 10px 1% 0 1%; width: 98%;}
aside {width: 300px; margin: 0 0 0 10px;}

@media screen and (max-width: 950px) {
	.grid33, .grid25, .grid75 {width:46%; margin:10px 2%;}
}
@media screen and (max-width: 800px) {
	.footer-grid {width:46%; margin:10px 2%;}
}
@media screen and (max-width: 750px) {
	aside{  width: 96%; text-align:center;}
	.grid-group-aside { flex-wrap: wrap;}
}
@media screen and (max-width: 600px) {
    .grid-header-logo img { width:80%; height:auto; }
    
    .footer-grid, .grid33, .grid25, .grid75 {width:96%; margin:10px 2%;}
    .grid-header-logo { margin: 30px 0 0 0; width:100%;  text-align:center; }
    .grid-header-right {margin: 0; width:100%;  text-align:center;  }
    img {max-width:100%; height:auto;}
    }
@media screen and (max-width: 500px) {    
    .grid50, .grid75 {width:96%; margin:10px 2%;}
}
@media screen and (max-width: 400px) {
	.grid50, .grid33, .grid25, .grid75 {width:96%; margin:10px 2%;}
	aside{  width: 96%; text-align:center;}
	.grid-group-aside { flex-wrap: wrap;}
}
/*****************************************************NAVIGATION*****************************************************/
.nav {}
nav.main { margin: 0;}
.selected {background-color:#368082; }
.selected a { color: #ffffff!important;}
.main ul { margin: 0; padding: 0; list-style-type: none; position: relative;  /* Menu Bar Color */ }
.main ul li { display: inline-block; }
.main ul li a { text-decoration: none; display: block; padding: 15px 20px; font-size: 1em; color: #000000; /* Font Color Size Style */ }
.main ul li:hover { background: #368082;}
.main ul li a:hover {  color:#ffffff;}
.main ul ul { position: absolute; z-index:2; min-width: 200px; display: none; text-align:left; background: #666666; /* Dropdown Color */}
.main ul ul li a {color:#ffffff;}
.main ul ul li { display: block;  }
.main ul li:hover ul { display: block;}
.main ul li i { float: right; padding-left: 10px; color: #000000; /*font awesoome color*/}
.main div { font-size: 24px; padding: 0.6em; cursor: pointer; display: none; color: #ffffff;} /*mobile bar menu color*/
.mobilenav {display: block!important;}
@media(max-width: 1100px) {
.main ul li a {padding: 15px 15px; transition: padding .6s ease;}
}
@media(max-width: 990px) {
.main ul li a {padding: 15px 8px; transition: padding .6s ease;}
}
@media(max-width: 840px) {
    nav.main { margin: 0;}
    .mobilenav {width: 100%;}
.main div {display: block; color:#000000; }
.main ul { display: none; position: static; }
.main ul li { display: block; }
.main ul ul { position: static; text-align:center; }

}

/*****************************************************ACTION BUTTON *****************************************************/
.action-button, .system_button { display:inline-block; padding: 10px 20px; border-radius: 3px; background-color:var(--accent);  border: none; cursor: pointer;text-decoration: none; margin: 10px 20px 20px 20px;}
.edit-button {  display: inline-block; padding: 5px 20px;  border-radius: 3px; background-color: #dddddd;cursor: pointer; text-decoration: none; margin: 0 1% 0 1%;}
.action-button:hover, .edit-button:hover, .system_button:hover {  background-color:#000000; text-decoration:none; color:var(--accent); }
.action2-button { display:inline-block; padding: 10px 20px;  border-radius: 3px; background-color:#eeeeee;  border: none; cursor: pointer;text-decoration: none; margin: 0 20px 20px 20px;}
.action2-button:hover {  background-color:#000000; text-decoration:none; color:#eeeeee; }




/**********Photo*****************/
figure {padding: 10px; background-color:#ffffff; margin:10px;}
figcaption { background-color: white; color: black; font-style: italic; padding: 2px; text-align: center; font-size:.8em; }

/*****************************************************MAIN PAGE*****************************************************/
.text-container {margin:20px 1% 20px 1%;}
section:nth-child(even) {background-color:#eeeeee; padding: 30px 1%;}
section:nth-child(odd) { padding: 30px 1%;}
.section-content {position: relative; overflow: hidden; height: 200px;}
.section-title {position: absolute; bottom: 5%; right: 0%;  padding: 0 10px 0 10px; text-align: right; background: rgba(50,51,50,0.6);}
.section-title-sold {position: absolute; bottom: 5%; right: 0%;  padding: 0 10px 0 10px; text-align: right; background: rgba(255,0,0,0.6);}
.section-title h2, .section-title-sold h2 { margin: 5px 0; color: #ffffff; }
.res-image { width: 100%; height: 100%; object-fit: cover;}
.grid3 a:hover, .grid3 .section-content:hover {filter: grayscale(100%);}
.image-right {float:right; width:33%; height:auto; margin: 0 0 20px 2%}
.list-date {font-size: .8rem;padding: 0;margin: 0 0 0 1rem;}
@media screen and (max-width: 950px) {
    .section-title h2, .section-title-sold h2 {font-size:1.4em;}
}
@media screen and (max-width: 600px) {
   .image-right {float:none; width:96%; height:auto; margin:20px 2%}
}
.leader-image { max-width:100%; height:auto;}
/***************************************************** PET LIST *****************************************************/
#pet3, #pet2, #pet1 {display: none;}
@media screen and (max-width: 1150px) {
    .section-title h2, .section-title-sold h2 {font-size:1.4em;}
#pet4 {display:none;}
#pet3 {display:block;}
}
@media screen and (max-width: 950px) {
    .section-title h2, .section-title-sold h2 {font-size:1.4em;}
#pet3 {display:none;}
#pet2 {display:block;}
}
@media screen and (max-width: 500px) {
    .section-title h2, .section-title-sold h2 {font-size:1.4em;}
#pet2 {display:none;}
#pet1 {display:block;}
}

/*****************************************************CONTACT PAGE*****************************************************/

.mapicon { width:50px !important; margin: 0 0 20px 40px; }

/*****************************************************FOOTER*****************************************************/
footer { color: #ffffff; background-color: #368082; margin-top:20px;}
.footer-grid-group { display:flex; flex-wrap: wrap; justify-content: center;}
.footer-grid {width:21%; margin:10px 2%;}

.footer-phone {color:#ffffff!important; text-decoration:none; }
.footer-phone:hover {color:#F96700!important; font-weight:400; text-decoration:underline; }
.footer-grid ul { padding:0; margin-left:10px;}
.footer-grid li { list-style: none; padding: 0 0 5px 0;}
.footer-grid li a {color: #ffffff; text-decoration: none; padding: 14px;}
.footer-grid a:hover { color: #F96700; text-decoration:underline; }
.footer-seals img { width: auto; height: 120px; margin: 20px;}
.footer-seals { width: 100%; margin: auto; text-align: center; }
.copyright { text-align:center; font-size: .8em; padding:10px 0 30px 0; }
@media screen and (max-width: 800px) {
	.footer-grid {width:46%; margin:10px 2%;}
}
@media screen and (max-width: 600px) {
	.footer-grid {width:96%; margin:10px 2%;}
	footer {text-align: center;}
}

/*****************************************************PAGINATION*****************************************************/
.pagination { padding: 5px; margin: 10px; text-align: center; }
.pagination li { display: inline; margin: 5px; padding: 5px 10px; background-color: #FDA800; color:#333333; border-radius: 3px; }
.pagination li a { color:#333333; }
.pagination .active { padding: 5px 10px; background-color:#CF4917; }
.pagination .active a { color:#ffffff;}

/*****************************************************FORM STYLE *****************************************************/
form {max-width:800px;margin-inline: auto;}

.form-flex, .form-flex-auto, .form-flex-csz, .form-flex-small {display: flex;flex-wrap: wrap;column-gap: 1rem;}
.form-flex > div {flex: 1 1 300px;}
.form-flex-csz > div:first-of-type {flex: 1 1 auto;}
.form-flex-csz > div {flex: 1 1 80px;}
.form-flex-small > div {flex: 1 1 150px;}

fieldset {border: thin solid var(--grey);border-radius: .5em;margin-block-end: 2rem;padding-block-end: 1.5rem;}
fieldset > legend {padding: .15rem 2rem;background: var(--prime);color: var(--white);border-radius: .25rem;}
fieldset:last-of-type {margin-block-end: 0;}
fieldset p {line-height: 1.3;margin-inline: 1rem;}
fieldset hr {margin-block: 2rem 1rem;}

label, form .label { font-weight:500;display: inline-block;margin: 1rem 0 .2rem .5rem;line-height: 1;}
label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after, label:has(~ input:required):after, label:has(~ div > input:required):after, label:has(~ select:required):after, label:has(~ textarea:required):after, .required legend:after {content: ' *';color: red;}

input:not([type=submit]), select, textarea {font-family:inherit;font-size:inherit;/*background-color: var(--white);*/color:inherit;font-weight: inherit;width:100%; border: thin solid #ccc; border-left: 3px solid;transition: border-color .5s ease-out;padding: .7em; margin: 0; border-radius: 5px; -webkit-appearance: none; overflow: auto;}

.checkbox-radio-list {margin-block-start: 2.2rem;outline: 1px solid #cccccc;border: none;padding-block: 1rem 0;position: relative;column-count: 1;}
.checkbox-radio-column {display: flex;flex-wrap:wrap;margin-block-start: 2.2rem;outline: 1px solid #cccccc;border: none;padding-block: 1rem 0;position: relative;}
.checkbox-radio-columns {column-count: 2;margin-block-start: 2.2rem;border: none;padding-block: 1rem 0;position: relative;}
.checkbox-radio-list legend, .checkbox-radio-column legend, .checkbox-radio-columns legend  {background: none;color: inherit;letter-spacing: inherit;position: absolute;top: -23px;left: -27px;line-height: 1;font-size: 1rem;font-weight: 500;}
.checkbox-radio-list > div, .checkbox-radio-column > div, .checkbox-radio-columns > div {display: flex;align-items: center;gap: .5em;padding-left: 1rem;margin-block-end: 1rem;}
input[type=checkbox], input[type=radio] {background: var(--white);width: 1rem;height: 1rem;min-width: 20px;-webkit-appearance: checkbox!important; outline: thin solid white;}
.checkbox-radio-list label, .checkbox-radio-column label, .checkbox-radio-columns label {margin: 0;}
.checkbox-radio-column.error {outline-color:salmon;}

.checkbox-radio {display: flex;}
.checkbox-radio input {margin-block-start: 1rem;}

textarea {width: 100%;line-height: 1.3rem;field-sizing: content;max-height: 80vh;}


input[type=datetime-local], input[type=date], input[type=time], input[type=tel] {width:auto;}

input[type="image"] {
    width: auto;
    border: none;
    max-width: 200px;
    height: auto;
}
.form-select-columns {columns:2; margin: 5px 1% 20px 1%; }
input[type=file] { width: 98%; padding: 10px; margin: 5px 1% 20px 1%;}

.form-note {padding-left:20px; font-size: .8em; color: #ff0000; font-weight: 300;}

input:optional, select:optional, textarea:optional {border-left-color: #999;}
input:required:valid, select:required:valid, textarea:required:valid {border-left-color: palegreen;}
input:invalid, select:invalid {border-left-color: salmon;}
input:required:focus:valid, select:required:focus:valid, textarea:required:focus:valid  {border-left-color: palegreen;}
input:focus:invalid, select:focus:invalid, textarea:focus:invalid {border-left-color: salmon;}
input:focus, textarea:focus, select:focus {outline: none; border-bottom: solid 3px #368082;}

.form-section {background-color:#eeeeee; padding: 10px 0 0 10px; margin: 0 0 10px 0; }
#landlord, #work, #kids { display:none;}
.tiny-body {padding:10px 1%;}
.tox { margin: 10px 1% 30px 1%; width: 98%;}

button[type=submit], input[type=submit] { display:inline-block; padding: 10px 20px;  border-radius: 3px; background-color:var(--accent);  border: none; cursor: pointer;text-decoration: none; margin: 10px 20px 20px 20px; }
button[type=submit]:hover, input[type=submit]:hover {background-color:#953410; text-decoration:none; color:#ffffff;}
button[type=submit]:focus, input[type=submit]:focus { background-color:#953410; }

#tb-adopt-form input[type=text], #tb-adopt-form select {margin:0;border: thin solid #cccccc;}
#tb-adopt-form td {
    padding: 3px;
}
#tb-adopt-form th {
    background: var(--prime);
    color: var(--white);
    padding: 3px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
/***********************************SLIDESHOW************************************/
.slideshow-container { position: relative; margin: 0 -10px 30px -10px; height:400px; }
.mySlides { display: none; height: 400px; width: 100%;}
.mySlides .res-image { width: 80%; height: 100%; object-fit: cover; object-position: 0 0; }
.slideshow-container .prev, .slideshow-container .next {cursor: pointer; position: absolute; bottom: 50%; width: auto; padding: 0 10px; color: #111111; font-weight: 400; font-size: 30px;  transition: .6s ease; opacity: .7; border:none;}
.slideshow-container .next { right: 0px; }
.slideshow-container .prev { left: 0px; }
.slideshow-container .prev:hover, .slideshow-container .next:hover { color: #000000; background-color: #ffffff; }
.text { text-align: center; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(247,247,247,1) 35%, rgba(247,247,247,1) 100%); padding: 30px 30px 30px 16%; width: 45%; height: 100%;
    position: absolute; right: 0; top:0;}
.text-h1 {font-weight:400; font-size: 1.5em;}
.dot-selector {text-align:center; position: absolute; bottom: 0; left: 0; width:100%}
.dot { cursor: pointer;  height: 12px;  width: 12px;  background-color: #368082;  border-radius: 50%;  display: inline-block;  transition: background-color .6s ease; margin:5px 2px; }
.active { background-color: var(--accent) }
.dot:hover { background-color: #000000 }
.slideshow-container a {text-decoration:none;}
@media(max-width: 500px) {
.slideshow-container, .mySlides { height: 480px; }
.mySlides .res-image { width: 100%; height:230px; }
.text { padding: 20px 30px; margin-top: -4px; width: 100%; height: 250px; display: block; position: revert; right: 0; bottom: 0;}
.slideshow-container .prev, .slideshow-container .next { bottom: 40%; }
}
/* Horizontal Scroll Image Row */
.product-scrolling-wrapper { display: flex; z-index:1; flex-wrap: nowrap; overflow-x: auto;  -webkit-overflow-scrolling: auto; }
.product-card { flex: 0 0 auto; margin:1%; }
.product-card img {width:auto; max-height:300px;}
.product-scrolling-wrapper::-webkit-scrollbar { height:5px; }
.product-scrolling-wrapper::-webkit-scrollbar-track { background: #000000; }
.product-scrolling-wrapper::-webkit-scrollbar-thumb { background: #888; }
.product-scrolling-wrapper::-webkit-scrollbar-thumb:hover { background: #555; }


/***File-List****/
.file-list img, .file-list-board img  {float: left; width:40px; height:auto; margin: 0 10px;}
.file-list { margin: 10px 20px;}
.file-list-board { margin: 10px 1%;width:48%;}
.file-list a {font-size: 1.2em;}
.file-type {color:red; margin: 0 0 0 10px;}
.file-type-board {color:red; margin: 0 0 0 10px; font-size:.8em;}
.file-list p {margin-left:80px; font-size:.9em;}
.file-list-board p {margin-left:50px; font-size:.8em;}
@media(max-width: 600px) {
    .file-list-board { margin: 10px 1%;width:98%;}
}

/******feature-pet******/
.feature-pet {background-color: #eeeeee; text-align: center; margin: 20px; padding: 20px; border-radius: 30px;}
@media(max-width: 500px) {
.feature-pet { margin: 0; padding: 20px 0;}
}


.column-flow {columns:  3;}

.joy-image-box {text-align:center; }
.joy-image-box img { max-width:100%; max-height:350px; }
.pet-name { font-weight:bold; font-size:1.2em; color:#368082; }
.joy-box {
    margin: 5px;
    background: #eeeeee;
    padding: 10px;
    border-radius: 20px;
}
/***ACCESS***/
.access {position:relative;}
.access-menu {position:absolute; top: 0; right: 20px;}
.access-button { display:inline-block; padding: 5px 20px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; background-color:#eeeeee;  border: none; cursor: pointer;text-decoration: none; }
.access-button:hover {  background-color:#000000; text-decoration:none; color:#eeeeee; }


/*****************************************************
FORM MODAL AND BUTTON
*****************************************************/
/* Extra styles for the cancel button */
.cancelbtn { width: auto; padding: 10px 10px; background-color: #4CAF50; }
span.psw { float: right; padding-top: 16px; }
.modal { display: none; /* Hidden by default */ position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); padding: 15vh 10vw;}
.modal-container { position: relative; background-color:#eeeeee; padding:20px;}
.modal img { width: 33%; height: auto; float: left; margin-right: 20px; }
.modal-name { font-size: 1.5em; margin-bottom: 0px; color: #368082; }
/*****************************
Modal Content/Box 
******************************/
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */}
/* The Close Button (x) */
.close { position: absolute; right: 10px; top: 10px;  font-size: 1.2em; }
.close:hover, .close:focus { color: red; cursor: pointer; }
/* Add Zoom Animation */
.animate { animation: animatezoom 0.6s }

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) { 
    span.psw { display: block; float: none; }
    .cancelbtn { width: 100%;}
}

/*****STAFF LIST*****/
.staff-list { margin-left: 20px; }
.staff-position { font-size: .8em; font-style: italic; }
/*****CORPORATE SPONSOR BOX*****/
.banner-ad {    width: 300px; margin:auto; background-color: #666666; border-radius: 5px; padding:5px}
.banner-ad p { padding: 10px; margin: 0; text-align: center; color: #ffffff; text-transform: uppercase; }
.banner-ad img { width: 100%; height: auto; }


/********** BOARD PORTAL *************************************************************/
.contact {font-size:.8em; margin-left:10px;}

/********** STORE ITEMS *************************************************************/

.store-item img {width:100%; height:auto;}
.store-item-name {color: #368082; font-size:1.3em;}
.store-item select { width: auto; padding: 5px; margin: 0 0 20px 0; border: thin solid #ccc; background: #ffffff;-webkit-appearance: auto;}
.store-item input[type=submit] {margin:0;}


.page-edit {background:black;padding: 10px;}
.item-edit {background:grey;padding: 10px;}