body {
	background-color: #7a97d8;
	margin: 0;
	background-position: center;
	font-family: 'Arial', sans-serif;
}

header {
    width: 100%;
	background-color: white;
	margin: 0px;
}

#new {
    border: 5px solid #f88e1f
}

.headerBox {
	width: 100%;
	background: white;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	border-bottom: 1px solid black;
}

.links {
	text-align: center;
	margin-top: 5px;
	margin-left: 25px;
	margin-right: 25px;
}

.links a {
	font-size: 20px;
	text-decoration: none;
	color: white;
}

.donate {
	background-color: #a9d03a;
	margin: 10px;
	padding: 10px 15px;
	border-radius: 15px;
	width: 150px;
	border: 1px solid black;
}

.volunteer {
	background-color: #f88e1f;
	margin: 10px;
	padding: 10px 15px;
	border-radius: 15px;
	width: 150px;
	border: 1px solid black;
}

.facebook {
	background-color: #1529AE;
	margin: 10px;
	padding: 10px 15px;
	border-radius: 15px;
	width: 150px;
	border: 1px solid black;
}

.centernav {
	display: inline-block;
	position: relative;
	font-size: 17px;
	font-weight: bold;
	margin-left: 410px;
	margin-top: 80px;
}

.centernav a {
	margin-top: 400px;
	text-decoration: none;
}

.centernav a li {
    display: inline;
	color: black;
	text-align: center;
	text-decoration: none;
	padding: 15px 18.7px;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}

.centernav a li:hover {
    background-color:#cfcfcf;
    transition: background-color .5s;
}

.dropdown {
    display: none;
}

.allContent {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.indexImage {
    height: 100%;
    border: 1px solid black;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
}

.textBlobFull {
    background-color: white;
    border: 1px black solid;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.pTitle {
    margin: 20px 20px 0px 20px;
    color: black;
    font-size: 20px;
    font-style: bold;
    text-align: center;
}

.pPara {
    margin: 20px;
    color: black;
    font-size: 15px;
    line-height: 2;
}

li {
    font-size: 15px;
    line-height: 2;
}

.staff tr td img {
    margin-left: 25px;
    width: 200px;
    object-fit: cover;
    height: 250px;
}

.pets tr td img {
    width: 200px;
    object-fit: cover;
    height: 250px;
}

.lapfoot {
    display: flex;
}

.phonefoot {
    display: none;
}

@media screen and (max-width: 1470px) {
    
    body {margin:0px;}
    header {padding:0px; margin:0px;}

    /*navbar - all list items visble
    .centernav {width:100%; margin:200px 0 -200px 0; padding:0px; background:white;}
    .centernav a {padding:15px 0px; margin:0px; text-decoration:none;}
    .centernav a li {margin:-1px 0px; padding:15px 150px; border:1px solid black; display:block; text-align:center; font-size:15px;}*/

    /*navbar*******************************************/
    
    /*swapsies*/
    .centernav {display:none;}
    .dropdown {
        display: inline-block;
        position: relative;
        width: 100%;
        margin: 200px 0px -220px 0px;
        padding: 0px;
    }    
    
    /*hide checkbox*/
    .dropdown input {
        position: absolute;
        left: -100%;
    }

    /*format menu button*/
    .dropdown label {
        display: inline-block;
        width: 100%;
        margin: 0px;
        padding: 15px 0px;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
        background: white;
        border: 1px solid black;
        cursor: pointer;
    }
    .dropdown label:hover {
        background: #cfcfcf
    }

    /*format dropdown list*/
    .dropdown ul {
        position: absolute;
        display: block;
        z-index: 999;
        width: 100%;
        left: -110%;
        border: 1px solid black;
        background: white;
        padding: 0px;
        margin: -1px 0px;
        list-style: none;
    }
    .dropdown ul a {
        display: block;
        padding: 15px;
        margin: -1px;
        border: 1px solid black;
        text-decoration: none;
    }
    .dropdown ul a:hover {
        background: #cfcfcf
    }

    /*bring dropdown into frame*/
    .dropdown input:checked ~ ul{
        left: 0;
    }

    /*hide dropdown*/
    .dropdown a.close {
        display: none;
    }

    /*end navbar***************************************/

    /*content*/
    .allContent {width:100%;}
    .pTitle {font-size:20px;}
    .pPara {font-size:15px;}
    .phoneHide {display:none;}

}

@media screen and (max-width: 500px) {

    /*content*/
    .phoneHideLil {display: none;}
    .lapfoot {display: none;}
    .phonefoot {display: flex;}
    .links a {font-size: 12px;}
    .donate {width: 80px;}
    .volunteer {width: 80px;}
    .facebook {width: 80px;}

}