/*
	flex-panel.css
	
	04-23-2022	-	Create css file for use with itinerary_family_xxx panels
*/
:root {
	--flex-panel-dark-blue: rgb(10,33,69);
	--flex-panel-text-soft: rgb(203,238,247);
}
.main-panel {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	max-width:100%;
	margin-bottom: 0.75rem;
	background-color:transparent;
}
.main-panel::after {
	content: "";
	display: table;
	clear: both;
}
.flex-panel {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	max-width:100%;
	margin-bottom: 0.75rem;
	background-color:transparent;
}
.flex-panel-title {
	flex: 1 1 auto;
	background-repeat:no-repeat;
	width:100%;
	background-size:3.12rem 3.12rem;
}
.flex-panel-title, .flex-panel-item h1 {
	padding:0.375rem 0.37rem 0.375rem 0.37rem;
	opacity: 0.85;
	color:white;
	text-align:center;
	font-size:240%;
	text-shadow: 3px 3px 8px var(--flex-panel-dark-blue);
}
.flex-panel-title h1, h2 {
	-webkit-animation: flex-tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	animation: flex-tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
.flex-panel-title, .flex-panel-item h2 {
	padding:0.375rem 0.37rem 0.375rem 0.37rem;
	opacity: 0.7;
	color:white;
	text-align:center;
	font-size:150%;
	text-shadow: 3px 3px 8px var(--flex-panel-dark-blue);
}
.flex-panel-title, .flex-panel-item h3 {
	padding:0.375rem 0.37rem 0.375rem 0.37rem;
	opacity: 1;
	color:var(--flex-panel-text-soft);
	text-align:center;
	font-size:110%;
}
.flex-panel-item {
	flex: 1 1 auto;
	background-repeat:no-repeat;
	width:100%;
	background-size:3.12rem 3.12rem;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-3 8:15:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes flex-tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flex-tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
