/* ----------------- mobile ------------------- */

@media screen and (max-aspect-ratio: 13/9),
screen and (max-width: 900px) {
	:root {
		--header-height: 100px;
		--header-padding: 25px;
	}

	.home .featured,
	.home-page {
		display: none;
	}

	.home .menu {
		margin-top: 20px;
	}

	.home .menu,
	.home .menu button {
		width: 100vw !important;
	}

	.home .menu button {
		font-size: 20px !important;
		font-weight: bold !important;
		padding: 5px !important;
		padding-left: 20px !important;
		margin-bottom: 5px !important;
	}

	.filter-panel {
		position: absolute;
		top: 95px;
	}

	.site-logo,
	.site-logo img {
		/*max-height: 40px;*/
		height: 60px;
		max-width: unset;
	}

	.site-header {
		min-height: var(--header-height);
		position: relative;
	}

	.videos {
		margin-top: 0;
	}

	.sightings-list {
		margin-top: 110px;
		transform: translateX(-5px);
	}

	.home {
		margin-top: calc(var(--header-height) + var(--header-padding));
	}

	/* .sightings-list .sighting-panel {
		transform: translateX(2px);
	} */
	.sighting-label {
		min-height: 170px;
	}

	.sighting-panel .sighting-tags {
		padding-right: 15px;
	}


	.page-name {
		display: none;
	}

	.about-page {
		width: 90vw;
		padding-top: 10px;
		padding-left: 20px;
		text-align: left;
	}

	.about-page h1 {
		font-size: 18px;
	}

	.about-page span {
		font-size: 12px;
	}

	.about-page .social-icon img {
		padding-top: 20px;
	}

	.videos {
		left: 0;
		padding-left: 5vw;
	}

	.videos,
	.videos .video iframe {
		width: 90vw;
	}

	.explore-menu {
		width: 100vw !important;
		height: calc(100% - var(--header-height) - 25px) !important;
	}

	.explore-menu .sighting-family,
	.explore-menu .sighting-family img {
		height: 60px !important;
		width: 100vw !important;
	}

	.explore-menu .sighting-family span {
		padding-left: 10px !important;
		font-size: 24px !important;
		font-weight: normal !important;
	}

	.explore-menu .sighting-family span.sci-name {
		font-size: 14px !important;
		margin-bottom: 2px !important;
	}

	.explore-menu .sighting-family span.count {
		right: 30px !important;
	}

	.explore-menu .sighting-family:hover img {
		transform: none !important;
	}

	.filter-panel {
		width: 100vw;
		height: 122px;
		background-color: #111b26;
		padding-bottom: 10px;
	}

	.sortby,
	.filter {
		float: none;
	}

	.filter input {
		width: 95vw;
		transform: translateX(5px);
	}

	.filter input,
	.filter button {
		margin-bottom: 5px;
	}

	.right-pane-button-container {
		display: none;
	}

	.map-menu {
		margin-top: 10px;
		margin-left: 30px;
		margin-right: 10px;
	}



	.stories {
		left: 0 !important;
		width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 0 !important;
		margin-top: 40px !important;
		float: none !important;
		position: static !important;
		box-sizing: border-box;
	}



	.stories iframe.youtube {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
	}

	.stories .image-container {
		width: 100%;
		display: block;
		margin-bottom: 20px;
	}

	.stories h1 {
		font-size: 1.8em;
	}
}



/* ----------------- ipad ------------------- */

@media (pointer:coarse) and (min-aspect-ratio: 13/9) {
	.sightings-list .sighting-panel {
		transform: translateX(10px);
	}

	:root {
		--preview-image-margin-top: 100px;
		--preview-image-margin-bottom: 200px;
	}
}

@media screen and (max-aspect-ratio: 4/3) {
	:root {
		--preview-image-margin-top: 100px;
		--preview-image-margin-bottom: 200px;
	}
}