@font-face {
	font-family: 'MINISerif-Bold';
	src: url('../fonts/MINISerif-Bold.svg#MINISerif-Bold') format('svg'),
         url('../fonts/MINISerif-Bold.ttf') format('truetype'),
         url('../fonts/MINISerif-Bold.woff') format('woff'),
         url('../fonts/MINISerif-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'MINITypeHeadline-Regular';
  src: url('../fonts/MINITypeHeadline-Regular.svg#MINITypeHeadline-Regular') format('svg'),
       url('../fonts/MINITypeHeadline-Regular.ttf') format('truetype'),
       url('../fonts/MINITypeHeadline-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.collapsed,
.form-input,
.modal-head,
.circle-button,

* {
	box-sizing : border-box;
}

:root {
	--header-height : 3em;
}

a {
	font-weight     : bold;
	color           : inherit;
	text-decoration : none;
}

hr {
	height        : 20px;
	height        : 50px;
	width         : 90%;
	margin        : -50px auto 10px;
	margin-top    : 0;

	border        : none;
	border-bottom : 1px solid #1f1209;
	box-shadow    : 0 20px 20px -20px #333;
}
hr.new1 {
	height        : 20px;
	height        : 50px;
	width         : 90%;
	margin        : -50px auto 10px;
	border        : none;
	border-bottom : 1px solid #1f1209;
	box-shadow    : 0 20px 20px -20px #333;
}
hr.white {border:none;
	height        : 20px;
	height        : 50px;
	width         : 90%;
	margin        : -50px auto 10px;
	margin-top    : 0;

	border-bottom : 1px solid white;
	box-shadow    : 0 20px 20px -20px #333;
}

car-color{
	margin     : 0;
	font-style : italic;
}

car-year{
	margin      : 0;

	font-size   : 1.5em;
	font-weight : 400;
}

car-location{
	margin      : 0;

	font-size   : 1.5em
	font-style  : italic;
	font-weight : 400;
}

[data-role='page'] {
	position         : fixed;
	top              : 0;
	left             : 0;

	height           : 100%;
	width            : 100%;

	background-color : #FFC414 ;
	font-family      : MINITypeHeadline,Times,Times New Roman,Georgia,serif;
}

.ui-mobile .ui-page-active {
	display        : flex;
	flex-direction : column;
}

[data-role='header']{
	position         : relative;
	z-index          : 2;

	background-color : black;
	color            : white;
	border-width     : 0;
	box-shadow       : 0 0 10px rgba(0,0,0,0.15);
}

[data-role='footer'] {
	position         : relative;
	z-index          : 2;
	height           : auto;
	background-color : black;
	color            : white;
	border-width     : 0;
	flex             : none;
	border-top: 5px solid #fec314;
	box-shadow: -1px -8px 15px -3px rgba(0,0,0,0.75);

}

[data-role='main'] {
	position : relative;
	z-index  : 1;

	overflow : auto;

	flex     : 1 1 auto;
	
}

.map-header {
	position         : relative;
	z-index          : 2;

	height           : var(--header-height);
	padding-bottom   : 3.1em;

	background-color : black;
	color            : white;
	border-width     : 0;
	box-shadow       : 0 0 10px rgba(0,0,0,0.15);

	flex             : none;
}

.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;
}

ul.nav {
	margin-top      : 0;
	margin-bottom   : 0;
	padding-left    : 0;

	list-style-type : none;
}

[data-role='header'] h1.ui-title {
	position    : absolute;
	top         : 0;
	left        : 0;

	width       : 100%;
	margin      : 0;
	padding     : 0;

	line-height : var(--header-height);
}

[data-role='header'] .nav {
	position : absolute;
	top      : 0;
	left     : 0;

	height   : 100%;
	width    : 100%;
}

.nav a {
	display         : block;

	padding         : 0 calc((1/3) * var(--header-height));

	font-weight     : bold;
	color           : inherit;
	line-height     : var(--header-height);
	text-decoration : none;
}

.form-input {
	width         : 100%;
	padding       : 0.2em 0.5em;

	font          : inherit;
	border-width  : 0;
	border-bottom : 1px solid #000;
	background-color: transparent;
	appearance:none;
	outline: 0;
}

.form-input:focus {
	border-color : white;
	appearance:none;

}

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

.ui-mobile .form-label {
	margin     : 0;
	padding    : 0.2em 1em;

	font-size  : 0.8em;
	color      : black;
	text-align : center;
}

.form-button {
	background-color   : #ffc414;
	outline            : 0;

	-webkit-appearance : none;
}

.form-button:active {
	width            : 100%;
	padding          : 0.2em 0.5em;

	background-color : black;
	font             : inherit;
	color            : white;
	border-color     : #ffc414;
	border-width     : 0;
	border-width     : 2px;
	border-radius    : 0.2em;
}

.form-button {
	width            : 100%;
	padding          : 0.2em 0.5em;

	background-color : #ffc414;
	font             : inherit;
	border-color     : black;
	border-width     : 0;
	border-width     : 2px;
	border-radius    : 0.2em;
}

.card {
	margin-top       : 1em;
	margin-bottom    : 1em;
	padding          : 1em;

	background-color : white;
	border-radius    : 0.5em;
	box-shadow       : 0 3px 3px rgba(0,0,0,0.1);
}

.card :first-child {
	margin-top : 0;
}

.card :last-child {
	margin-bottom : 0;
}

.card-brother {
	margin-top       : 5em;
	margin-bottom    : 5em;
	padding          : 2.4em;

	background-color : white;
}

.card-cousin {
	padding          : 2.4em;

	background-color : white;

	
}

.card-friend {
	width            : 50%;

	background-color : black;

	
}

.card-sister {
	margin           : 0 auto;
	margin-top       : 0.5em;
	margin-bottom    : 5em;
	padding          : 0.4em;

	background-color : white;
	color            : black;
	text-align       : center;
	border           : 3px white;
}
.card-sister2 {
	margin           : 0 auto;
	padding          : 0.4em;

	background-color : white;
	color            : black;
	text-align       : center;
	border           : 3px white;
}
.btn2 {
  border: none; /* Remove borders */
  color: black; /* White text */
  cursor: pointer; /* Mouse pointer on hover */
	position         : absolute;
	right            : 20px;
	bottom           : 130px;
	z-index          : 9999999;

	height           : 50px;
	width            : 50px!important;

	background-color : #FFC414;
	border-radius    : 5px;
}



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

	border-radius : 50%;
}

.login-logo2 {
	max-height    : 30vh;
	max-width     : 60vw;
	margin-top    : 10vh;

	border-radius : 50%;
}
.login-logo3 {
	max-height    : 30vh;
	max-width     : 60vw;
	margin-top    : 15vh;

	border-radius : 50%;
}
.login-logo4 {
	max-height    : 30vh;
	max-width     : 60vw;
	border-radius : 50%;
}
.login-logo5 {
    max-height    : 30vh;
	max-width     : 60vw;
	margin-top    : 6vh;

	border-radius : 50%;
}
.signup-link a {
	display    : block;

	padding    : 1em;

	font-size  : 0.8em;
	color      : #888;
	text-align : center;
}

.modal {
	position        : absolute;
	display         : flex;
	top             : 0;
	left            : 0;
	z-index         : 63;

	height          : 100%;
	width           : 100%;

	opacity         : 0;

	transition      : all 300ms;

	pointer-events  : none;
	align-items     : center;
	justify-content : center;

}

.modal-back {
	position         : absolute;
	top              : 0;
	left             : 0;

	height           : 100%;
	width            : 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-foot {
	padding          : 0.2em 0.5em;
	background-color : #eee;
}

.modal-body {
	padding          : 2.5em;
	background-color : white;
}

.modal.active {
	opacity        : 1;
	pointer-events : initial;
}

.active .modal-content {
	transform : translateY(0);
}

.circle-button {
	display          : flex;
	vertical-align   : top;

	height           : 2rem;
	width            : 2rem;
	margin           : 0;
	padding          : 0;

	background-color : white;
	font-size        : 1.5em;
	line-height      : 2rem;
	border-width     : 0;
	border-radius    : 50%;
	outline          : 0;

	align-items      : center;
	justify-content  : center;
}

.search-box {
	box-shadow : 3px 3px 10px rgba(0,0,0,0.2);
}

.search-box {
	position         : relative;

	padding          : 0 1rem 0 2.5rem;

	background-color : white;
	font-size        : 1em;
	line-height      : 2rem;
	border-radius    : 2rem;
}

.search-box input {
	width            : 100%;

	background-color : transparent;
	font             : inherit;
	border-width     : 0;
	outline          : 0;
}

.search-box::before {
	content   : '🔍';

	position  : absolute;
	top       : 50%;
	left      : 0.5em;

	transform : translateY(-50%);
}

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

.modal-drawer {
	position         : absolute;
	top              : 0;
	left             : 0;

	height           : 100%;
	width            : calc(100% - 8em);

	background-color : #FFC414;

	transition       : all 0.3s;
	transform        : translateX(-100%);
}

.modal.active .modal-drawer {
	transform : translateX(0);
}

.animal-icon img {
	vertical-align : middle;
	width          : 50px;
}

.animal-name {
	padding : 0 1em;
}

.list-button {
	padding : 0 1em;
}

.profile-image img {
	height          : 50vw;
	width           : 100%;

	object-fit      : cover;
	object-position : center;
}

.media-image {
	vertical-align : text-bottom;
	max-width      : 100%;

}

.map {
	position : absolute;
	top      : 0;
	left     : 0;

	height   : 100%;
	width    : 100%;
}

.animal-profile-bottom {
	position : relative;
}

.hotdog {
	display          : flex;

	padding          : 0 1em;

	background-color : #fff;
	border-radius    : 2em;

}

.hotdog>input {
	display          : block;

	width            : 100%;

	background-color : transparent;
	font             : inherit;
	line-height      : 2.5;
	border-width     : 0;
	outline          : 0;
	color            : black;
}



.bottom-white-border {
	border-bottom: 1px solid white;
	padding: 1em 0;
}

.car-list-box{

	display: block;
    background-color: #000000;
    padding: 30px;
    padding-top: 2em;
    box-shadow: 0 0px 7px 4px #e4af10;
    height: auto;
    color: white;
    margin: 0 auto;
    margin-bottom: 2em;
    width: 90%;
    border-radius: 15px;
}

.searchbox {
	padding:1.9em 1em;
	position: relative;
	height: var(--header-height);
	background-color: black;
	z-index: 2;

}


.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: transparent;
    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%);
    padding-top: 1.5em;

}


[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-image: url("../img/addmini.png");
}

/* 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;
}



.noclick {
	pointer-events:none;
}