/* ----------------- */
/* Styles for Modals */
/* ----------------- */

* { box-sizing: border-box; }


/* ----------------- */
/*   Modal Buttons   */
/* ----------------- */

img.modal-icon {
	height: 1.45em;
	width: auto;
	margin: 0 0 0.04em 0.25em;
	border: 0;
	vertical-align: middle;
}
.button-style {
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	display: block;
	font-size: 95%;
	letter-spacing: 0.4px;
	background: #dbdbdb;
	border-width: 0.25em;
	border-type: solid;
	border-color: #aaa #777 #777 #aaa;
	color: #19305c;
	padding: 0.3em 0.9em 0.23em;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0.42em;
	width: 96%;
	max-width: 411px;
	margin: 0.8em auto 0.4em;
	font-weight: 600;
	text-shadow: 1px 1px 1px #fff, -1px -1px 1px #ccc;
}
.button-style:active {
	background-color: #376795;
	color: #eee;
	border-color: #777 #aaa #aaa #777;
	text-shadow: -1px -1px 1px #888;
}
.button-style:active .modal-icon {
	opacity: 0.6;
}


/*  ----------------------------- */
/*  The Modal's Dimmed Background */
/*  ----------------------------- */

div.grayout {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 101; /* Sit on top */
	padding: 0;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
	overflow-x: hidden;
	-webkit-animation-name: backfade;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-name: backfade;
	animation-duration: 0.4s;
	animation-fill-mode: both;
	background-color: rgba(250,250,250,0.45); 
}
/* old style: rgba(0,0,0,0.35) */


/* ----------------------- */
/* --- Modal Animation --- */
/* ----------------------- */

@-webkit-keyframes animatebottom {
	from {bottom:-700px; opacity:0;} 
	to {bottom:0; opacity:1;}
}
@keyframes animatebottom {
	from {bottom:-700px; opacity:0}
	to {bottom:0; opacity:1;}
}
@-webkit-keyframes backfade {
	from {backdrop-filter: blur(0); background-color: initial;} 
	to {backdrop-filter: blur(4px); background-color: rgba(250,250,250,0.45);}
}
@keyframes backfade {
	from {backdrop-filter: blur(0); background-color: initial;} 
	to {backdrop-filter: blur(4px); background-color: rgba(250,250,250,0.45);}
}


/* --------------------- */
/* --- Modal Content --- */
/* --------------------- */

div.modal-content {
	position: relative;
	background-color: #3a475e; /* #666 */
	padding: 0 0;
	border: 0.4em solid #233b66; /* #444 */
	border-radius: 2em;
	width: 90%;
	max-width: 1000px;
/*	
max-height: calc(100vh - 7em);
height: 90%;
max-height: 90vh;
margin: 2em auto 4em;
*/
	margin: 2em auto 4em;
	box-shadow: 0.85em 1.5em 0.85em rgba(0, 0, 0, 0.4);
	-webkit-animation-name: animatebottom;
	-webkit-animation-duration: 0.4s;
	animation-name: animatebottom;
	animation-duration: 0.4s;
}
	/* old shadow: box-shadow: 1.25em 2.5em 1.2em 0 rgba(0,0,0,0.4); */
div.modal-content div.modal-header {
	position: relative;
	padding: 1.4em 1.5em 1em 2em;
	color: white;
	vertical-align: middle;
	height: 5em;
}
div.modal-content div.modal-header p.modaltitle {
	display: inline;
	font-size: 160%;
	line-height: 1;
	font-weight: 500;
}
/* --- The Header Close Button --- */
div.modal-content div.modal-header p.close {
	display: inline;
	color: #fff;
	float: right;
	margin: -0.25em 0 0;
	padding: 0;
	font-size: 2.5em;
	line-height: 1;
	font-weight: 600;
	vertical-align: top;
}
div.modal-content div.modal-header p.close:hover,
div.modal-content div.modal-header p.close:focus {
	color: #FFBF00;
	text-decoration: none;
	cursor: pointer;
}
/* --- Modal Body (main modal content) --- */
div.modal-content div.modal-body {
	position: relative;
	padding: 0.5em 1em 1em;
	background-color: #eee;
	overflow-y: scroll;
	overflow-x: hidden;
	border: 0.25em solid #42a9dc;
	border-radius: 1.2em;
	margin: 0 1em 0.66em;
	max-height: 75vh;
	scrollbar-color: #42a9dc rgba(0, 0, 0, 0.0);
}
div.modal-content div.modal-body p.charhed {
	text-align: center;
	font-size: 170%;
	margin: 0.75em 0 0.25em;
}
div.modal-content div.modal-body p.charhed2 {
	text-align: center;
	font-size: 150%;
	margin: 0.85em 0 0.25em;
}
div.modal-content div.modal-body p.chare {
	text-align: center;
	font-size: 117%;
	margin: 0.5em 0 1.25em;
}
div.modal-content div.modal-body p.chare span {
	font-weight: 600;
}
div.modal-content div.modal-footer {	/* --- not currently being used --- */
	padding: 1.2em;
	color: white;
	min-height: 3em;
}
/* --- The Footer Close Button --- */
p.closebutt {
	display: table;
	color: rgba(250,250,250,0.4);
	margin: 0 auto 0.66em;
	padding: 0;
	font-size: 83%;
	line-height: 1;
	font-weight: 500;
	vertical-align: middle;
	text-align: center;
	padding: 0.1em 0.75em;
	border: 2px solid rgba(250,250,250,0.2);
	background-color: rgba(250,250,250,0.1);
	border-radius: 3em;
}
p.closebutt:hover,
p.closebutt:focus {
	color: rgba(255, 191, 0,0.85);
	border-color: rgba(255, 191, 0,0.85);
	background-color: rgba(255,191,0,0.3);
	text-decoration: none;
	cursor: pointer;
	transition: 0.25s;
}
/*
div.modal-content div {
	border: 2px solid pink;
}*/


/* -------------------------*/
/* Organizers Modal Content */
/* -------------------------*/
div.collies {
	display: -ms-grid;
	display: grid;
	grid-gap: 1em;
	-ms-grid-columns: 1fr 1em 1fr 1em 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	width: 98%;
	padding: 0;
	margin: 0 auto 1em;
}
div.orgling {
	display: block;
	margin: 0.2em 0;
	padding: 0;
}
div.orgling p {
	margin: 0;
	line-height: 1.35;
}


/* -------------------- */
/*	Credit Modal	*/
/* -------------------- */

#CreditModal div.modal-content {
	width: 90%;
	max-width: 700px;
	min-width: 300px;
}
#CreditModal div.modal-content div.modal-body div.credit,
#CreditModal div.modal-content div.modal-body div.certif {
	width: 95%;
	margin: 0.5em auto;
}
#CreditModal div.modal-content div.modal-body div.certif p.nocred {
	font-size: 127%;
	font-weight: 600;
	text-align: center;
}
#CreditModal div.modal-content div.modal-body div.credit p.yescred {
	font-size: 118%;
	line-height: 1.2;
	font-weight: 600;
	margin-top: 0;
}

/* --------------------- */
/*	Special Modal	*/
/* ------------------- */

#specialModal div.modal-content {
	width: 90%;
	max-width: 850px;
	min-width: 350px;
}


/* ---------------------------- */
/*	Supporters Modal	*/
/* ---------------------------- */

div.tiers {
	margin: 1.25em 1em 2em;
	vertical-align: top;
	text-align: center;
	line-height: 1.5;
}
div.tiers p.supps {
	text-align: center;
	font-weight: 600;
	font-size: 115%;
	margin-top: 0;
}
div.tiers p.trblu {
	font-weight: 600;
	line-height: 1;
	margin: 1em 0 0.1em;
	color: #42a9dc;
}
div.tiers p.trADD {font-size: 115%;}
div.tiers p.trADDco {font-size: 100%; margin: 0.5em 0 0.66em; line-height: 1;}

div.tiers p.trI {font-size: 130%;}
div.tiers p.trIco {font-size: 107%; margin: 0.5em 0 0.66em; line-height: 1;}

div.tiers p.trII {font-size: 137%;}
div.tiers p.trIIco {font-size: 117%; margin: 0.5em 0 0.66em; line-height: 1;}

div.tiers p.trIII {font-size: 142%;}
div.tiers p.trIIIco {font-size: 122%; margin: 0.5em 0 0.66em; line-height: 1;}

div.tiers p.trIV {font-size: 160%;}
div.tiers p.trIVco {font-size: 130%; margin: 0.5em 0 0.66em; line-height: 1;}

div.corps {
	margin: 1.25em 1em;
	vertical-align: top;
	text-align: center;
	line-height: 1.5;
}
div.corps p.cthx { font-size: 115%; margin: 0 0 0.66em; text-align: center; }
div.corps p.cgold {
	color: #D4AF37;
	font-size: 155%;
	margin: 0.5em 0 0.25em;
	font-weight: 700;
}
div.corps p.gcorp {font-size: 118%; margin: 0.66em 0 1em; line-height: 1;}

div.corps p.csilv {
	color: #A8A8A8;
	font-size: 137%;
	margin: 1.25em 0 0.25em;
	font-weight: 700;
}
div.corps p.scorp {font-size: 114%; margin: 0.66em 0 1em; line-height: 1;}

div.corps p.cbronz {
	color: #b9722d;
	font-size: 125%;
	margin: 1.25em 0 0.25em;
	font-weight: 700;
}
div.corps p.bcorp {font-size: 110%; margin: 0.66em 0 1em; line-height: 1;}

div.corps p.casso {
	color: #666;
	font-size: 110%;
	margin: 1.25em 0 0.25em;
	font-weight: 400;
}
div.corps p.acorp {font-size: 100%; margin: 0.66em 0 1em; line-height: 1;}

div.corps p.co-mem {
	margin: 0.25em 0;
	line-height: 1.5em;
}
div.corps p.ccorp {font-size: 100%; margin: 0.66em 0 1em; line-height: 1;}





/* ---------------------------- */
/* ---------------------------- */
/* ---------------------------- */
/* BEGIN RESPONSIVE ADJUSTMENTS */
/* ---------------------------- */
/* ---------------------------- */
/* ---------------------------- */


@media screen and (max-width:769px) {
  div.modal-content {
	padding: 1.5em auto;
  }
  div.credit, div.certif {
	padding: 0.5em;
  }
  div.collies {
	grid-gap: 0;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
  }
  div.corps, div.tiers {
	width: 96%;
	margin: 0 auto;
	float: none;
  }
}


@media screen and (max-width:450px) {
  div.orgling {
	display: block;
	margin-left: 10%;
  }
}