/*All Pages*/
body{
	background-color: beige;
	width: 100%;
	margin: 0 auto;
	overflow: auto;
}

.header h1{
	width: 80%;
	height: 33.33%;
	margin: 0 auto;
	margin-top: 250px;
	margin-bottom: 50px;
	text-align: center;
	border: 5px ridge white;
	background-color: #5CB380;
}

.boxHeader{
	width: auto;
	background-color: #7e77ca;
	color: white;
	font-family: "bogart", serif;
	font-weight: 600;
	font-style: normal;
	padding: 12px;
	text-align: center;
	border: 5px ridge white;
}

.boxText{
	width: auto;
	background-color: white;
	color: black;
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 400;
	font-style: normal;
	padding: 12px;
	text-align: center;
	border: 2px solid #5CB380;
}

/*Nav Bar*/
.navbar{
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: auto;
	align-items: right;
	background-image:url("img/SVG/navbar.svg");
	background-repeat: no-repeat;
	background-size: 992px 100px cover;
	background-position: right top;
	margin-bottom: 200px;
}

.navbar a{
	float: right;
	text-align: right;
	display: flex;
	font-family: "bogart", serif;
	font-weight: 600;
	font-style: normal;
	vertical-align: middle;
	padding: 50px 50px;
	text-align: right;
}

.navbar a:hover{
	background-color: #7e77ca;
	color: #ffee8c;
}

.circleBorder{
	position: fixed;
	padding-right: 66.66%;
	left: 10%;
	top: 0;
	color: white;
	border-radius: 50%;
	background-color: #7e77ca;
	background-image: url(img/logo.svg);
	background-repeat: no-repeat;
	background-position: center center;
	width: 100px;
	height: 100px;
}

/*Footer*/
.foot{
	position: relative;
	bottom: 0;
	width: 100%;
	height: auto;
	margin-top: 5%;
	background-color: #ffee8c;
}

.foot ul{
	list-style-type: none;
	float: left;
	font-style: "aktiv-grotesk", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.foot li{
	width: 100%;
	padding: 5%;
}

.copyright{
	clear: both;
	margin: 0 auto;
	padding-left: 2%;
}

.socialIcons{
	position: absolute;
	right: 2%;
	bottom: 0;
}

footer img{
	width: 50px;
	height: 50px;
}

/*Home Page*/
.index{
	margin-left: 10%;
	margin-right: 10%;
}

.indexSec1{
	height: 33%;
	clear: both;
	padding-bottom: 5%;
}

.indexSec1 p{
	width: 80%;
	margin: 0 auto;
}

.indexSec2{
	height: 33%;
	width: 80%;
	margin: 0 auto;
	clear: both;
	padding-bottom: 5%;
}

.indexSec3{
	height: 33%;
	width: 80%;
	margin: 0 auto;
	clear: both;
}

.hours{
	width: 40%;
	margin: 0 auto;
	overflow: auto;
	font-size: 24px;
}

.hours table{
	margin: 0 auto;
	margin-top: 16.66%;
	margin-left: 33.33%;
}

.hours td{
	padding: 12px;
}

.photoGallery{
	float: left;
	width: 40%;
	margin: 0 auto;
	border: 2px dotted #5CB380;
}

.bigPic{
	width: 100%;
	height: 496px;
	object-fit: cover;
}

.littlePic{
	width: 33.33%;
	height: 165.33px;
	object-fit: cover;
	float:left;
}

.mediumPic2{
	width: 32%;
	object-fit: contain;
	margin-left: 1%;
	border: 2px dotted #5CB380;
}

.ourStory{
	clear: both;
	width: 65%;
	float:left;
	margin-top: 16.66%;
}

.ourStory img{
	margin-top: 66.66%;
}

/*Meet the Cats*/
.meet{
	margin-left: 10%;
	margin-right: 10%;
}

.meetSec1{
	height: 10%;
}

.meetSec2{
	height: 90%;
}

.cats{
	width: 100%;
	margin: 0 auto;
	margin-left: 16.66%;
}

.catBio{
	float: left;
	width: 32%;
	margin-right: 1%;
	margin-top: 10%;
}

.cats p{
	margin-bottom: 5%;
}

.meet img{
	height: 32%;
	width: 32%;
	margin-bottom: 5%;
	border: 5px dotted #5CB380; 
}

.meet a{
	text-align: center;
	font-family: "bogart", serif;
	font-weight: 400;
	font-style: normal;
	color: white;
	background-color: #7e77ca;
	border: 2px outset white;
	border-radius: 12px;
	padding: 12px;
}

.meet a:hover{
	background-color: #5CB380;
}

/*Menu*/
.menuSec1{
	height: 10%;
}

.menuSec2{
	height: 30%;
	padding-top: 10%;
	padding-bottom: 10%;
}

.menuSec3{
	height: 30%;
	padding-top: 10%;
	padding-bottom: 10%;
}

.menuSec4{
	height: 30%;
	padding-top: 10%;
	padding-bottom: 10%;
	margin-bottom: 10%;
}

.menu{
	margin: 0 auto;
	margin-left: 10%;
	margin-right: 10%;
	
}

.menu table{
	width: 40%;
	margin: 0 auto;
	margin-top: 10%;
}

.menu th{
	font-size: 24px;
}

.menuPhoto{
	width: 40%;
	height: 300px;
	margin-right: 10%;
}

.menuPhoto img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 5px dotted #5CB380;
	padding: 5%;
}

/*Contact Us*/
.contact{
	margin: 0 auto;
	margin-left: 10%;
	margin-right: 10%;
}

.contactSec1{
	height: 33.33%;
	margin-top: 10%;
	padding-top: 10%;
	padding-bottom: 10%;
}

.contactSec2{
	height: 33.33%;
	padding-top: 10%;
	padding-bottom: 10%;
}

.contactSec2 iframe{
	width: 65%;
}

.contactSec3{
	height: 33.33%;
	padding-top: 10%;
}

.contactBox{
	width: 32%;
	padding-right: 1%;
	margin-top: 10%;
}

.contactBox p{
	text-align: center;
}

.mediumPic1{
	width: 65%;
	max-height: 33.33%;
	object-fit: cover;
}