@charset "utf-8";

/* Mobile Layout: 480px and below. */

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	background-color: #748BA7;
}
figure {
	margin: 0px;
}
img {
	max-width: 100%;
}
img.shadow {
	box-shadow: 7px 7px 7px #333;
}
img.blockimage {
	display: block;
	margin-bottom: 10px;
}
img.marginbottom {
	margin-bottom: 7px;
}
img.centered {
	display: block;
	margin: 0 auto;
}
.dn {
	display: none;
}
.gridContainer {
	max-width: 1000px;
	margin: 0 auto;
}
a, a:visited {
	color: #ffe7c4;
	text-decoration: none;
}
a:hover, .feature h2 a:hover {
	color: #ffef18;
}
#sitename a, #sitename a:visited {
	color: inherit;
}
.feature h2 a {
	color: #ffe7c4;
}
#headercontainer {
	display: grid;
}
#sitenamecontainer, #servicecontainer, #strapcontainer {
    background-color: #2B4A6F;
    color: #ffe7c4;
	padding-left: 20px;
}
#strapcontainer {
	padding-bottom: 10px;
}
#siteimagecontainer {
    grid-area: 2 / 1 / 3 / 2;
    background-image: url(/images/normandale-sign.jpg);
    background-size: cover;
    background-position: bottom right;
    height: 150px;
	position: relative;
}
#news {
	margin-top: 5px;
}
#innerleft, #innerright {
	margin-bottom: 7px;
}
.two-col-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 7px;
}
div.newscontent {
	background-color: #822472;
	color: #FFE7C4;
	padding: 22px;
	font-size: 1.2em;
}
.newscontent h2 {
	font-weight: normal;
}
div.featurecontainer, div.infocontainer {
	display: grid;
}
div.feature {
	background-color: #4B688B;
	color: #FFE7C4;
	margin-top: 5px;
	padding: 10px;
	line-height: 1.6em;
}
.feature h2, .feature h3 {
	font-weight: normal;
}
.feature p {
	margin-bottom: 15px;
}
.feature.promotion {
	background-color: #1d1d40;
	padding-left: 20px;
}
.feature.promotion p {
	font-size: 14px;
}
.feature.promotion p.centered {
	text-align: center;
}
.feature.promotion a {
	text-decoration: underline;
}
.featuretext {
	margin: 20px 0px;
}
.featuretext a {
	color: #d89417;
}
.featuretext a:hover {
	color: #FFEB4D;
}
.featuretext ul {
	overflow: auto;
}
.featuretext strong {
	color: gold;
}
.featuregrid {
	display: grid;
	grid-template-columns: 100%;
}
.featureimages {
	margin: 0px 10px 10px 0px;
}
.featureimages img {
	margin-bottom: 5px;
}
.info h2 {
	font-weight: normal;
}
.readmore {
	margin: 5px 0px;
}
div.info {
	background-color: #256F5B;
	color: #ffe7c4;
	margin-top: 5px;
	padding: 10px;
}
#sticky-footer {
	position: sticky;
    bottom: 0px;
    clear: both;
    width: 100%;
    background-color: #000;
    padding: 5px 10px;
    box-sizing: border-box;
	text-align: center;
	border-top: 1px solid #fff;
    color: #fff;
	line-height: 2em;
}
div.footer {
	background-color: #393276;
	color: #ffe7c4;
	margin-top: 5px;
	padding: 10px;
}
div.footerimages {
	display: flex;
	justify-content: space-around;
}
.copyright {
	margin-top: 5px;
    text-align: center;
}
.textright {
	text-align: right;
}
.footerleft img {
	margin-right: 5px;
	max-width: 31%;
}
#sitename {
	font-size: 2.0em;
	font-weight: normal;
	margin: 3px 0px 0px 0px;
}
#sitesubname {
	font-size: 1.5em;
	font-weight: normal;
	margin: 0px;
}
#location {
	font-weight: normal;
	margin-top: 5px;
	padding-left: 2px;
}
ul.services {
	padding: 2px;
	list-style: none;
}
.pagetitlearea {
	background-color: #256F5B;
	color: #ffe7c4;
	padding: 20px;
}
h1.pagetitle {
	font-size: 20px;
	font-weight: normal;
	margin: 0px;
}
.pageinfo {
	font-size: 15px;
	margin-top: 10px;
}
.info ul li {
	margin: 22px 0px;
	font-size: 16px;
}
#menuList {
    list-style-type: none;
	display: none;
	flex-wrap: wrap;
	gap: 3px;
	padding: 0px;
	margin: 0px;
}
#menuList li {
	flex: 1 0 31%;
}
#menuList li a, #menu-toggle {
	background-color: #393276;
	display: block;
	font-size: 18px;
	padding: 10px;
	text-align: center;
}
#menu-toggle {
	position: absolute;
	bottom: 3px;
	left: 10px;
	color: #ffe7c4;
	cursor: pointer;
}
#menu-toggle label {
	cursor: pointer;
}
#menu-toggle-check {
	display: none;
}
#menu-toggle-check:checked + ul {
	display: flex;
}
.btsmenu a {
	background-color: #393276;
	display: inline-block;
	font-size: 18px;
	padding: 10px;
	margin-right: 10px;
	margin-bottom: 4px;
}
#feedbackcontainer {
    display: flex;
    flex-wrap: wrap;
}
div.feedback {
	background-color: #274467;
	color: #ffe7c4;
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
div.feedback img {
    max-width: 50%;
    margin-right: 5px;
}
#contactform label {
	display: block;
	padding: 5px 0px;
}
#contactform textarea {
	width: 97%;
	height: 200px;
	margin-bottom: 10px;
}
.formlabel {
	display: block;
	width: 97%;
}
.formtext {
	width: 97%;
}
#messageprompt {
	margin: 8px 0px 4px 0px;
}
#messagethanks {
	margin-bottom: 20px;
}
p.inline-heading {
	color: #FFCA00;
}
.topthinborder {
	border-top: 1px solid;
}
.topmargin {
	margin-top: 10px;
}
.ytp-title-channel {
	display: none;
}
.flexinnercontainer {
	display: flex;
	flex-wrap: wrap;
	margin-right: -8px;
}
.flexcontainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.flexfeature {
	flex-basis: 45%;
	flex-grow: 1;
	margin-right: 8px;
}
.fleximages {
	display: flex;
	flex-direction: row;
	padding: 0px 20px;
	justify-content: space-between;
}
.image-flex-gallery, .image-text-flex {
	display: flex;
	gap: 10px;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.grid-3col {
	display: grid;
	grid-template-columns: 1fr;
}
.grid-3col > div:nth-child(2) {
	padding: 0px 15px;
}
table#kennel_times {
	width: 100%;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

body {
	font-size: 14px;
}
#sitename {
	font-size: 2.3em;
}
#sitesubname {
	font-size: 1.7em;
}
.headerleftcontent {
	font-size: inherit;
}
#headerright {
	background-position-y: 50%;
}
.formtext {
	width: 95%;
}
div.featurecontainer, div.infocontainer {
	grid-template-columns: 49.5% 49.5%;
	justify-content: space-between;
}
figcaption {
    position: relative;
    top: -30px;
    left: 20px;
}
#innerheader img {
	display: block;
	margin-right: 30px;
	max-width: 50%;
}
p.para1 {
	margin-top: 0px;
}
div.feedback {
    flex-basis: 34%;
	flex-grow: 1;
}
div.withimage {
	flex-basis: 58%;
}
.image-text-flex {
	flex-wrap: nowrap;
	align-items: flex-start;
}
}

/* Desktop Layout: 769px to a max of 948px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

body {
	font-size: 14px;
}
#headercontainer {
	grid-template-columns: 60% 1fr;
}
#siteimagecontainer {
    grid-area: 1 / 2 / 4 / 2;
	height: auto;
}
#menuContainer {
    grid-area: 4 / 1 / 4 / 3;
}
#menuList {
	display: flex;
}
#menu-toggle {
	display: none;
}
#sitename {
	font-size: 3em;
}
#sitesubname {
	font-size: 2em;
}
#menuList li {
	flex: 1 0 32%;
}
div.featurecontainer {
	grid-template-columns: repeat(4,24%);
}
.flexcontainer {
	flex-wrap: nowrap;
	justify-content: space-between;
}
.flexcontainer > p.flex45, .flexcontainer > div.flex45 {
	flex: 1 0 45%;
	padding: 0px 10px;
}
.flexcontainer > p.flex33, .flexcontainer > div.flex33 {
	flex: 1 0 33%;
	padding: 0px 10px;
}
.flexwrap {
	flex-wrap: wrap;
}
.fleximages {
	display: block;
	padding: 0px;
}
.fleximages img {
	margin-bottom: 5px;
}
.grid-3col {
	display: grid;
	grid-template-columns: 20% 1fr 20%;
}
#sticky-footer {
	justify-content: space-between;
}
.featuregrid {
	display: grid;
	grid-template-columns: 35% 65%;
}
table#kennel_times {
	width: 60%;
}
}

@media only screen and (min-width: 769px) {

#menuList li {
	flex: 1 0 16%;
}

}

/* Wide desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1000px) {

#menuList li {
	flex: 1 0 10%;
}

}