﻿:root {
	/* Desktop Styles*/
	--bulb-size: 10rem;
	--bulb-topper-width: 2.6rem;
	--bulb-topper-hoop-height: 2.4rem;
	--bulb-topper-hoop-offset: -1.2rem;
	--bulb-topper-base-height: 1.6rem;
	--bulb-topper-base-offset: -0.5rem;
	--bulb-choose-button-padding: .5rem;
	--bulb-choose-button-font-size: .7rem;
	--bulb-header-font-size: 1.5rem;
	--bulb-font-size: .7rem;
	
}

@media(max-width: 960px) {
	:root {
		/* Mobile Styles */
		--bulb-size: 7rem;
		--bulb-topper-width: 2rem;
		--bulb-topper-hoop-height: 1.6rem;
		--bulb-topper-hoop-offset: -.8rem;
		--bulb-topper-base-height: 1.3rem;
		--bulb-topper-base-offset: -.5rem;
		--bulb-choose-button-padding: .3rem;
		--bulb-choose-button-font-size: .5rem;
		--bulb-header-font-size: 1.1rem;
		--bulb-font-size: .6rem;

	}
}

.filters-container {
	display: flex;
	justify-content: center;
}

	.filters-container > div {
		margin: 0 .5rem;
	}

	.filters-container label {
		display: block;
	}

	.filters-container .dropdown {
		/* Override existing margin so that labels and dropdowns are aligned */
		margin-left: 0;
	}

.ornament {
	font-size: 1rem;
}

.children-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.at-selection-outer {
	box-sizing: border-box;
	font-family: BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #fff;
	text-align: center;
	margin-bottom: 3rem;
}

	.at-selection-outer .child-info-header {

		font-size: 2.5rem;
	}
	.at-selection-outer .child-info-wrapper {
		font-size: 0.9rem;
	}

	

.at-selection-action-buttons {
text-align: center;
}

.wish-list-paper {
	background-color: antiquewhite;
	padding: 3rem;
	padding-top: 1rem;
	padding-left: 3rem;
	padding-bottom: 5rem;
	padding-right: 5rem;
	max-width: 17rem;
	margin: auto;
	margin-bottom: 5rem;
	background-image: url(https://cdn.faithchapel.cc/images/shared/textured-paper-med-transparent.png);
	box-shadow: 2px 6px 4px 7px #e7ded2;
}

	


	.wish-list-paper h2 {
		font-size: 2rem;
		margin-top: 2rem;
		text-align: center;
	}

	.wish-list-paper ul {
		text-align: left;
	}

	.wish-list-paper li {
		border-bottom: 2px solid black;
		line-height: 1rem;
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
	}
.wish-list-paper-ornament {
	position: relative;
	bottom: 2.5rem;
	right: -12rem;
	height: 0;
}

@media(max-width: 600px) {
	.wish-list-paper {
		font-size: 0.8rem;
		padding-left: 2rem;
		padding-right: 2rem;
		padding-bottom: 2rem;
	}

		.wish-list-paper h2 {
			font-size: 6vw;
		}

			.wish-list-paper h2 i {
				padding: 0;
				margin-top: 0.7rem;
			}
	.wish-list-paper-ornament {
		height: unset;
		position: unset;
		margin: 1rem auto;
	}
}
	

	.select-wish-list {
		color: black;
	}

	.child-cell {
		background-color: black;
		border-radius: 100%;
		overflow: hidden;
		height: 10rem;
		width: 10rem;
		color: #FFF;
		display: flex;
		flex-direction: column;
		margin: .5rem;
	}

		.child-cell.active .notes, .child-cell:hover .notes {
			display: initial;
		}

		.child-cell.active .attributes, .child-cell:hover .attributes {
			display: none;
		}

	.notes {
		display: none;
	}

	.attributes {
		text-align: center;
	}

	.child-content {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 1rem;
	}

	/*.choose-child-button {
	text-align: center;
	padding-top: .3rem;
	padding-bottom: .5rem;
	background-color: red;
	font-size: var(--bulb-font-size);
	cursor: pointer;
}*/

	.child-info-wrapper {
		text-align: center;
		margin-top: 3rem;
		font-size: var(--bulb-font-size);
	}

		.child-info-wrapper > div {
			margin-bottom: .5rem;
		}

		.child-info-wrapper .child-info-header {
			font-size: var(--bulb-header-font-size);
		}

	.child-info-header.wish-list {
		text-decoration: underline;
	}

	/* ------------------------------------- Flip Container Styles ------------------------------------- */

	.flip-container, .flip-container-front, .flip-container-back {
		width: var(--bulb-size);
		height: calc( var(--bulb-size) + var(--bulb-topper-hoop-height) + var(--bulb-topper-hoop-offset) + var(--bulb-topper-base-height) + var(--bulb-topper-base-offset) );
		user-select: none;
		cursor: pointer;
	}

	.flip-container {
		margin: 1rem .5rem;
	}

	.flip-container-front, .flip-container-back {
		box-sizing: border-box;
		font-family: BlinkMacSystemFont, "Segoe UI", sans-serif;
		color: #fff;
		text-align: center;
	}

	.flip-container {
		position: relative;
		perspective: 55rem;
	}

.flip-container-front, .flip-container-back {
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 0;
	-webkit-transform: translate3d(0,0,0);
	overflow: hidden;
	transition: transform .6s ease, opacity .6s ease;
	opacity: 1;
}

	.flip-container-back {
		transform: rotateY(180deg);
		opacity: 0;
	}

	.flip-container:hover .flip-container-front {
		transform: rotateY(-180deg);
		opacity: 0;
	}

	.flip-container:hover .flip-container-back {
		transform: rotateY(0deg);
		opacity: 1;
	}