body
* {
	box-sizing:border-box;
	font-family: 'Avenir',sans-serif;
}
:root {
	--header-height:3em;
}

a {
	color:inherit;
	text-decoration:none;
	font-weight:300;
}
p{
	color: #888;
	font-weight: 100;
	font-family: 'Avenir',sans-serif;
}


[data-role='page'] {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.ui-mobile .ui-page-active {
	display:flex;
	flex-direction:column;
}

[data-role='header'],
[data-role='footer'] {
	height:4em;
	flex:none;
	border-width:0;
	position:relative;
	z-index:2;
	background-color:white;
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
[data-role='main'] {
	flex:1 1 auto;
	position:relative;
	z-index:1;
	overflow:auto;
}




.flex-parent {
	display:flex;
}
.flex-child {
	flex:1 1 auto;
	
}
.flex-none {
	flex:none;
}
.flex-align-center {
	align-items: center;
}
.flex-justify-center {
	justify-content: center;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-vertical {
	flex-direction: column;
}



.collapsed,
ul.nav {
	list-style-type:none;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
}
[data-role='header'] h1.ui-title {
	position:absolute;
	top:12px;
	left:0;
	width:100%;
	line-height:var(--header-height);
	padding:0;
	margin:0;

}
[data-role='header'] .nav {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.nav a {
	display:block;
	line-height:var(--header-height);
	padding:9px calc((1/3) * var(--header-height));
	
	text-decoration: none;
	font-weight:100;
	color: #A8A8A8;
}
h1{
	font-weight: 300;x
}

.form-input {
    border-width: 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
    padding: 0.2em 0.5em;
    font: inherit;
}
.form-input:focus {
	border-bottom-color:#EF5151;
}

.form-control {
    margin: 0.5em 0;
}

.ui-mobile .form-label {
    color: #888;
    font-size: 0.8em;
    padding: 0.2em 1em;
    margin: 0;
}

.form-input,
.form-f {
	outline:0;
	-webkit-appearance:none;
}

/*.form-button {
    width: 100%;
    border-width: 0;
    font: inherit;
    background-color: #eee;
    padding: 0.2em 0.5em;
    border-radius: 0.2em;
}*/
.form-button {
	 font: inherit;

	width: 100%;
	margin-top: 1em;
    text-align: center;
    border: 1px solid #EF5151;
    background: #EF5151;
    color: white;
    padding: 0.7em;
    font-weight: 300;
    border-radius: 30px; 
}




.login-logo {
	max-width:60vw;
	max-height:30vh;
	margin-top:15vh;
	
}



.signup-link a {
    display: block;
    text-align: center;
    font-size: 0.8em;
    padding: 1em;
    color: #EF5151;
    font-weight: 200;
}

.signup-font{
	
	color: #EF5151;

}

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:10;
    transition:all 300ms;
    display: flex;
    opacity:0;
    pointer-events:none;
    align-items: center;
    justify-content: center;
}
.modal-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    position: relative;
    transition: all 300ms;
    transform:translateY(2em);
}

.modal-content>:first-child {
	border-radius:0.2em 0.2em 0 0;
}
.modal-content>:last-child {
	border-radius: 0 0 0.2em 0.2em;
}

.modal-head
/*.modal-foot */{
        background-color: white;
    padding: 3em 5em;
    text-align: center;
}
.modal-foot{
	background-color: white;
	padding: 1.5em;
}

.modal-body {
       background-color: white;
    padding: 1.5em 2em;
    text-align: left;
}



.modal.active {
    opacity:1;
    pointer-events:initial;
}
.active .modal-content {
    transform: translateY(0);
    width: 100%;
    padding: 2em;

}



.circle-button {
    background-color: white;
    border-width: 0;
    font-size: 1.5em;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    vertical-align: top;
}
.search-box {
        margin-top: 2em;
    /* margin-left: 2em; */
    margin-right: 2em;
    border-radius: 2rem;
    background-color: white;
    line-height: 2.3rem;
    padding: 0 1rem 0 2.5rem;
    font-size: 1em;
    position: relative;
    box-shadow: 2px 4px 12px #a5a5a5b3;
}
.search-box input {
	border-width:0;
	font:inherit;
	background-color:transparent;
	outline:0;
	width:100%;
}
.search-box::before {
	content:' search...';
	font-family:'Avenir',sans-serif;
	font-weight: thin;
	color:#787878;
	position:absolute;
	left:1.5em;
	top:50%;
	transform:translateY(-50%);
}



/*map*/
/*.add-button {
    margin-top: 140%;
    margin-bottom: 10em;
    margin-left: 6em;
    margin-right: 6em;
    text-align: center;
    border: 1px solid black;
    background: black;
    color: white;
    padding: 0.7em;
    font-weight: 600;
    border-radius: 30px;  
   
}
*/

#page-map{
	text-align: center;
}

.user-profile{
	width: 100%;
	margin-top: 4em;
	text-align: center;
}



.main-button {
	font-family:'Avenir',sans-serif;
	font: inherit;
	width: 45%;
	position: fixed;
	bottom: 100px;
	margin-left: 6.5em;
    text-align: center;
    border: 1px solid #EF5151;
    background: #EF5151;
    color: white;
    padding: 0.7em;
    font-weight: 200;
    border-radius: 30px; 
}


/*add page*/


.image-icon{
	width: 36%;
}
.image-list{
	width: 119%;
	text-align: right;
}
.image-center{
	text-align: center;
}
.animal-card{
	border: 1px solid white;
	margin: 1em;
    background: white;
    box-shadow: 2px 4px 12px #a5a5a5b3;
    border-radius: 10px;

}
b{
	font-weight: 500;
	color: black;
}
.fas{
	margin-right: 0.5em;
	color:#EF5151;
	margin-top: 0.8em;
}



/*profile*/
.profile-image{
	
    text-align: center;
  
}

.profile-image-center{
	text-align: center;
}



p.center {
    text-align: center;
    margin-top: 20em;
}






.map-header-child {
	padding:0.5em 0.2em;
}


.modal-drawer {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 8em);
    height: 100%;
    background-color: white;
    transition:all 0.3s;
    transform:translateX(-100%);
}
.modal.active .modal-drawer {
    transform:translateX(0);
}








.animal-icon img {
	    border-radius: 0.5em;
    width: 106px;
    vertical-align: middle;
}
.animal-name {
	padding:0 1em;
}
.list-button {
	padding:0 1em;
}


.margin-left{
	margin-left: 0.5em;
}

.profile-image img {
       width: 45%;
    text-align: center;
    border-radius: 19em;
    margin-top: 1em;
}

.profile-style{
	margin-top: 4em;
	text-align: center;
}




.media-image {
	max-width:100%;
	vertical-align: text-bottom;
}
.map {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.animal-profile-bottom {
	position:relative;
}


.hotdog {
    background-color: #eae3e3;
    border-radius: 2em;
    padding: 0 1em;
}
.hotdog>input {
    font: inherit;
    line-height: 2.5;
    background-color: transparent;
    border-width: 0;
    display: block;
    width: 100%;
    outline: 0;
}

.searchbox {
	padding:0.2em 1em;
	position: relative;
	height: var(--header-height);
	background-color: white;
	z-index: 2
	  
    /* margin-left: 2em; */

}


.icon {
	width:1.5em;
	height:1.5em;
	vertical-align: text-bottom;
	pointer-events: none;
}

.filterbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: white;
    transform: translateY(0);
    z-index: 1;
    transition: transform 0.3s;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.filterbox.active {
    transform: translateY(100%);
}


[data-filter] {
    font-weight: bold;
    padding: 0 0.5em;
}

.filterlist {
    height: 100%;
    display: flex;
    overflow: auto;
    align-items: center;
}


/*https://codepen.io/bronkula/pen/bvrgxQ*/
/* Create the look of a generic thumbnail */
.thumbnail {
  position:relative;
  display:inline-block;
  width:6em;
  height:6em;
  border-radius:0.6em;
  border:0.25em solid white;
  vertical-align:middle;
  box-shadow:0 0.15em 0.35em 0.1em rgba(0,0,0,0.2);
  margin:0.5em;
  
  background-position:center;
  background-size:cover;
}



/* This will hide the file input */
.imagepicker input {
  display:none;
}
.imagepicker {
  cursor:pointer;
  color:white;
  background-color:rgba(0,0,0,0.3);
}
/* This will add the floating plus symbol to the imagepicker */
.imagepicker:before {
  content:'+';
  position:absolute;
  font-size:3em;
  vertical-align:middle;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
/* This will hide the plus symbol behind the background of the imagepicker if the class "picked" is added to the element */
.imagepicker.picked:before {
  z-index:-1;
}


.dd{
font-weight: bold;


}