/* Cards & Panels */
/* Partners with js_cards_and_panels.js */	
div.card_container {
	width:100%;
	height:250px;
	background-color:white;
	border:1px solid var(--color-light);
	border-radius:var(--radius-tight);
		padding:var(--margin-m);
	padding-top:calc(var(--margin-l) + var(--margin-m));
	transition: transform 0.4s ease;
	position: relative;
	z-index: 1;
}

	div.card_container div.top {
		width:100%;
		z-index:3000;
		position:absolute;
		top:0px;
		left:0px;
		border-radius:var(--radius-tight) var(--radius-tight) 0px 0px;
		background-color:rgb(255,255,255,.9);
		height:var(--margin-l);
		border-bottom:1px solid var(--color-light);
	}
	
	div.card_container div.top p {
		position:relative;
		left:var(--margin-m);
		line-height:var(--margin-l);
		font-weight:500;
	}
	
	
	div.card,
	div.more_card {
		transform:scale(100%);
		height:180px;
		width:100px;
		background-color:white;
		box-shadow:var(--shadow);
		border-radius:var(--radius-tight);
		display:inline-block;
		margin-right:10px;
		position:relative;
		cursor:pointer;
		transition: transform 0.5s ease, filter 1s ease;
		overflow:hidden;
	}
	
	div.more_card {
		box-shadow:none;
		cursor:auto;
	}
		div.card::before,
		div.more_card::before {
			content:"";
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			filter:grayscale(60%);
			background-size:100% 100%;
			background-position:top left;
			transition: transform 2s ease, filter 1s ease
		}
		
		div.age_card::before {
			background-image:url('/images/card_age.jpg');
		}
		
		div.ethnicity_card::before {
			background-image:url('/images/card_ethnicity.jpg');
		}
		
		div.gender_card::before {
			background-image:url('/images/card_gender.jpg');
		}
		
		div.location_card::before {
			background-image:url('/images/card_location.jpg');
		}
		
		div.occupation_card::before {
			background-image:url('/images/card_occupation.jpg');
		}
		
		div.hobbies_card::before {
			background-image:url('/images/card_hobbies.jpg');
		}
		
		div.more_card::before {
			background-image:url('/images/card_more.jpg');
			filter:grayscale(100%) brightness(110%) contrast(80%);
		}
			
		div.card p.card_text,
		div.more_card p.card_text {
			position:absolute;
			top:90px;
			width:100px;
			height:110px;
			background-color:rgb(255,255,255,.9);
			font-size:12px;
			font-weight:400;
			line-height:16px;
			color:var(--color-very-dark);
			padding:var(--margin-s);
			padding-top:var(--margin-l);
			z-index:1000;
			word-wrap:inherit;
			text-align:center;
			overflow:hidden;
			transition:1s;
		}
	
		div.card:hover {
			transform: scale(1.10);
			}
			
		div.card:hover::before {
			transform: scale(1.04);
			filter:grayscale(0%);
			}
			
			div.card:hover p.card_text {
				top:150px;
			}
		
		div.card h3,
		div.more_card h3 {
			font-family:var(--font-body);
			font-weight:500;
			text-align:center;
			position:absolute;
			height:20px;
			line-height:20px;
			width:100%;
			top:80px;
			font-size:16px;
			z-index:1100;
			transition:1s;
		}
			
			div.card:hover h3 {
				top:138px;
			}

		
div.panel {
	position: fixed;
	overflow-y:scroll;
	padding:40px 0px 150px 0px;
	top: 0px;
	left: 0;
	width: 100%;
	height: calc(100vh);
	background-color: rgb(255,255,255,.95);
	transform: translateY(-100%);
	transition: transform 0.8s ease;
	z-index: 2;
}

div.panel.open {
	transform: translateY(0px);
}


div.panel_content {
	padding:0px var(--page-margin);
	margin:0px auto;
	top:var(--header-height);
	width:100vw;
	max-width:1200px;
}

	div.panel_content > div {
		display: none;
	}
	
	div.panel_content > .active {
		display: block;
	}

button.panel_close {
	position:absolute;
	right:var(--margin-l);
	cursor: pointer;
	background-color:transparent !important;
	width:24px !important;
	height:24px !important;
	min-width:24px;
	box-shadow:none;
	color:var(--color-dark);
	z-index:10000;
	background-image:url('/images/icon_x.png');
	background-size:24px 24px;
	background-repeat:no-repeat;
}