#breadCrumb {display:none !important;}
#content {padding:0;width:100%;}

.block {
	color: #000;
	border-top: 5px solid #FC0;
}

.flex {
	display: flex;
}
.center {
	align-items:center;
}

.text {
	flex:1 1 65%;
	padding-bottom:1rem;
	min-width:350px;
}
.image {
	flex:0 1 auto;
}

.border {
	border:1px solid #666;
}

.space {
	margin:1rem;
}

.panels
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	text-align: center;
}

.panel {
	margin:1rem;
}

a.button {
	background:#FC0;
	padding:.8rem 1rem;
	display:block;
	width:fit-content;
	transition:.1s ease all;
	margin:0 auto;
	font-size:2rem;
	line-height:2rem;
}
a.button:hover {
	background:#666;
	color:#FFF !important;
}

#content h3, .block h4 {
	font-size: clamp(2rem,3vw,3rem) !important;
	font-weight: 300 !important;
	padding: 1rem !important;
}

.block h4 {
	color: #FFF !important;
	background:#639 !important;
}

h4 {
	padding-left:1rem !important;
	font-size: clamp(1.5rem,2vw,2rem) !important;
}

h5 {
	padding-left:1rem !important;
	font-size: clamp(1.2rem,1.6vw,1.6rem) !important;
}

.text p {
	padding:1rem !important;
}

.text p, .text li {
	font-size: clamp(1rem,1.1vw,1.5rem) !important;
	margin-bottom:0 !important;
}

.text ul {
	padding-bottom:1rem !important;
}

.galleryRow {
	display:flex;
	gap:1rem;
	justify-content:space-evenly;
	align-items:center;
	margin:0 1rem 2rem 1rem;
	flex-wrap:wrap;
}

.galleryRow img {
	max-height:150px;
}

.galleryRow a {
	display:flex;
	flex-direction:column;
	align-items:center;
}

.galleryRow a p {
	text-align:center;
	color:#000 !important;
	font-weight:bold;
	text-transform:uppercase;
	font-size:1.1rem !important;;
}

.photoGallery {
	gap:1rem;
	margin:0 1rem 1rem 1rem;
}
.photoGallery a {
	border:1px solid #666;
}

figure img {
	border:10px solid white;
	box-shadow: 2px 2px 5px 0px #000;
}

figure.right img {
	margin:1rem 2rem 1rem 1rem;
	transform: rotate(3deg);
}

figure.left img {
	margin:1rem 1rem 1rem 2rem;
	transform: rotate(-3deg);
}

ul.columns {
	column-width:300px;
	column-gap:2rem;
}
ul.columns>li {
	list-style-type:none !important;
	margin-bottom:.5rem !important;
}

img.right_image {
	float:right;
	margin:0 1rem 1rem 1rem;
	border:1px solid #666;
	max-width:40%;
}

@media only screen and (max-width: 900px) {
	#doghouse .text {order:1;}
	#doghouse .image {order:2;}
	.flex {flex-direction:column;}
	
	.flex figure {order:2;}
}

@media only screen and (max-width: 700px) {
	.galleryRow img {max-width:350px;}
	.galleryRow a {margin-bottom:1rem;}
	
	img.right_image {
		margin:1rem !important;
		float:none;
		max-width:94%;
	}
	
}

/* Stuff for the top menu bar */
nav.mascot_nav {
	display:flex;
	width:100%;
	margin:0 !important;
	font-family: 'Open Sans', sans-serif;
	font-size:1.2em;
	background:#639;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	flex-wrap:wrap;
	border-top:5px solid #FC0;
}
nav.mascot_nav > a {padding:1em;color:#EEE !important;transition: all 0.3s ease;}  
nav.mascot_nav > a.title {font-weight:bold;}  
nav.mascot_nav > a:hover {background:#FC0; color:#639 !important;}
nav.mascot_nav > a.icon { display:none; }
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the mascot_nav (.icon) */
@media screen and (max-width: 813px) {
  nav.mascot_nav a:not(:first-child) {display: none;}
  nav.mascot_nav a.icon {
    order:2;
    display: block;
  }
  nav.mascot_nav {
	justify-content:space-between;
	flex-wrap:nowrap;
  }
}

/* The "responsive" class is added to the mascot_nav with JavaScript when the user clicks on the icon. This class makes the mascot_nav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 813px) {
  nav.mascot_nav.responsive {position: relative;flex-direction:column;}
  
  nav.mascot_nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.mascot_nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}