/* 
  app-gridstyles.css 
  Styles for all of this applicaton's flexbox and grid containers
*/

/****************************/
/* WEB PAGE HEADER */
.clsPGHDRGRID {
  display: grid;
  grid-template-columns: 34em 1fr;
  grid-gap: 1em;
  padding: .5em 1em;
}
.clsPGHDRPIXCONT {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  margin-left: .5em;
}
.clsPGHDRPIX {
  width: 100%;
  height: auto;
}
.clsPGHDRINTRO {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  border: solid black 1px;
  padding: .3em .5em;
  background: #fffff0;
  border-radius: .5em;
  align-self: center;
  align-text: center;
  font-size: 1.5em;

}
/****************************/
/* WEB PAGE HEADER */
.xclsPGHDRFLEX {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  background-color: #d5e0f3;
  border: solid black 1px;
}
.xclsPGHDRPIX {
  width: 100%;
  height: auto;
  margin: 1em 0;
  text-align: center;
}
.xclsPGHDRTEXT {
  font-size: 1.5em;
  font-weight: bold;
  width: 40%;
  text-align: center;
  margin: 1em 1em;
}
.xclsPGHDRLEFT {
  width: 2em;
}
/****************************/
/* BENEFITS SUMMARY FLEXBOX  */
.clsBENNYGRID {
  display: grid;
  border: solid black 2px;
  background-color: #cce0ee;
  background: linear-gradient(to bottom, white 0%, #E2E6F0 50%, #c0c8de 100%);
  margin: 0 0.5em;
  padding: 0.5em;
  grid-template-columns: 1fr 1fr 1fr;
}
.clsBENNYITEM {
  font-size: 1em;
  font-weight: bold;
  border: solid #777777 2px;
  text-align: center;
  xwidth: 20%;
  height: auto;
  padding: .5em 0;
}
.clsBENNYCOST {
  font-size: 1.2em;
  color: green;
}
.clsBENNYTITLE {
  font-size: 1.2em;
  text-align: center;
  font-weight: bold;
  margin: 0 .5em;
}
.clsBENNYTITLECENTERED {
  font-size: 1.2em;
  text-align: center;
  font-weight: bold;
  margin: 0 .5em;
}

/****************************/
/* BENEFIT STEPS FLEXBOX  */
.clsBENNYSTEPSFLEX {
  display: flex;
  flex-direction: row;
  gap: 2em;
  justify-content: center;
  margin: 0 .3em;
  border: solid black 1px;
  background-color: #eef7df;
  background: linear-gradient(to bottom, white 0%, #E2E6F0 50%, #c0c8de 100%);
  border-radius: .8em;
  height: auto;
  padding: 2em;
}
.clsBENNYSTEPSITEM {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  xwidth: 30%;
}

/********************************************************/
/* MAIN PAGE CONTACT GRID BOX                           */
/* STYLED FOR MOBILE DEVICE VIEWPORT WIDTHS @325-559px  */                     
/*                                                      */
/*   THESE STYLES MAY BE REMOVED AT A FUTURE TIME       */
.clsMAGICCONTGRID {
  display: grid;
  grid-template-columns: 25% 1fr;
  border: solid black 1px;
  border-radius: .8em;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
  background: linear-gradient(to bottom, white 0%, #E2E6F0 50%, #c0c8de 100%);
  margin: .5em .5em;
  padding: .5em .5em;
}
.clsMAGICCONTHDR {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  font-size: .975em;
  text-align: center;
}
.clsMAGICCONTIMGCONT {
  display: flex;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-left: .5em;
}
.clsMAGICCONTIMG {
  width: 75%;
  height: auto;
}
.clsMAGICCONTTEL {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  font-size: 1.2em;
}
.clsMAGICCONTEMAIL {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  text-align: center;
  font-size: .875em;
}
.clsMAGICCONTEMAILTXT {
  font-size: .875em;
}

/*****************************/
/* NEW MAIN PAGE CONTACT GRID */
/*****************************/
.clsMPCONTACTGRID {
  display: grid;
  grid-template-columns: 4em 1fr;
  border: solid black 1px;
  border-radius: .8em;
  background: linear-gradient(to bottom, white 0%, #E2E6F0 50%, #c0c8de 100%);
  background: linear-gradient(to bottom, white 0%, #faf9de 50%, #faf9e4 100%);
  margin: .5em .5em;
  padding: .5em .5em;
}
.clsMPCONTACTTITLE {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  align-self: center;
  font-weight: bold;
  color: black;
}
.clsMPCONTACTPIXCONT {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  width: 4em;
  justify-self: center;
  align-self: center;
}
.clsMPCONTACTPIX {
  width: 100%;
  height: auto;
  justify-self: center;
  align-self: center;
}
.clsMPCONTACTTEL {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  font-size: 1.2em;
  xjustify-self: center;
  align-self: center;
  text-align: center;
  padding-top: 1em;
}
.clsMPCONTACTEMAILLBL {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  justify-self: center;
  align-self: center;
}
.clsMPCONTACTEMAIL {
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  justify-self: center;
}
.clsMPCONTACTLICTITLE {
  grid-column: 1 / 3;
  grid-row: 6 / 7;
  justify-self: center;
}
.clsMPCONTACTLIC {
  grid-column: 1 / 3;
  grid-row: 7 / 8;
  justify-self: center;
}

/****************************/
/* MAGICIAN SECTION GRID    */
.clsMMGRID {
  display: grid;
  grid-template-columns: 5% 1fr 1fr 5%;
  grid-gap: 1em;
  background-color: #505050;
  border: solid black 2px;
  border-radius: .8em;
  margin: .5em .5em;
  padding: .5em .5em;
  color: white;
  font-size: .95em;
}
.clsMMPIXCONT {
  display: flex;
  grid-column: 3 / 3;
  grid-row: 1 / 2;
  max-width: 50%;
}
.clsMMPIX {
  width: 100%;
  height: auto;
}
.clsMMINTRO {
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  margin: 0 0;
  padding: .5em .3em;
  font-size: .95em;
  font-weight: bold;
  text-align: center;
  background-color: ivory;
  color: navy;
  border: solid black 1px;
  border-radius: .4em;
}
.clsMMDESCR {
  grid-column: 1 / 5;
  grid-row: 3 / 4;
  width: 100%;
  height: auto;
  border: solid red 2px;
}

/****************************/
/* MAGICIAN SECTION GRID    */
.clsTHEMAGICIAN {
  margin: 0 1em;
  padding: 0 1em;
  background-color: #cce0cc;
  background-color: #fffff0;
}
.clsMAGICIANMAIN {
  clear: both;
  font-size: 1.3em;
}
.clsWRAP {
  clip-path: ellipse(41% 50% at 42% 50%);
  shape-outside: ellipse(41% 50% at 42% 50%);
}
.clsCALLOUT {
  background: #3f5e9f;
  padding: .8em;
  box-shadow: 0 0em .25em rgba(0,0,0,.7);
}
.clsCALLOUT > div {
  background-color: white;
  border-radius: .8em;
  text-align: center;
  padding: 1em;
  font-size: 1.2em;
}
.clsMAGICINTROSECTION {
  background: #aebcd4;
  background-color: #405768;
  margin: 0 .5em;
  padding: .5em 1em;
  color: black;
  border: solid black 2px;
  border-radius: .5em;
  font-size: 1.2em;
  color: white;
  xfont-family: Arial;
  xfont-family: Broadway;
}
/****************************/
/* SECTION BUTTONS FLEXBOX  */
.clsBTNCONT {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: solid black 2px;
  border-radius: .5em;
  margin: .25em .3em;
  padding-left: .5em;
  background-color: transparent;
  background-color: #4a768f;
}
.clsBTNCONT--JUSTEVEN {
  justify-content: space-around;
}

/****************************/
/* RADIO SECTION  */
.clsRADIO {
  margin: 0 1em;
  margin-bottom: 2em;
}
.clsRADIOGRID {
  display: grid;
  grid-template-columns: minmax(6em, 10em) 1fr;
  background-color: #505050;
  background-color: #707070;
  background-color: #405768;
  border: solid black 2px;
  border-radius: .8em;
  margin: .5em .5em;
  padding: .5em .5em;
  color: white;
}
.clsRADIOPIXCONT {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-self: center;
}
.clsRADIOPIX {
  width: 100%;
  height: auto;
}
.clsRADIOINTRO {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  margin: 0 0;
  padding: .3em .3em;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  background-color: ivory;
  color: navy;
  border: solid black 1px;
  border-radius: .4em;
}
.clsRADIODIVIDER {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  width: 100%;
  xborder: solid black 1px;
}
.clsRADIODESC {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  font-size: 1.2em;
  xborder: solid cyan 1px;
}
.clsRADIOSAMPLES {
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  border: solid black 3px;
  border-radius: .8em;
  margin: 0 .5em;
  padding: 0 1em;
  background-color: azure;
  color: black;
}
.clsAUDIO {
  width: 100%;
  font-size: .5em;
}
#divRADIO {
  xborder: solid black 2px;
  xbackground-color: darkgray;
}
#divRADIOHDR {
  border: double black 4px;
  background-color: white;
  padding: .2em 1em;
  text-align: center;
}

/****************************/
/* 123 INTRO SECTION  */
.cls123INTROGRID {
  display: grid;
  grid-template-columns: minmax(6em, 7em) 1fr;
  background: #405768;
  border: solid black 1px;
  border-radius: .8em;
  margin: .5em .5em;
  padding: .5em .5em;
  color: white;
  font-size: 1.1em;
}
.cls123INTROPIXCONT {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-self: center;
  align-self: center;
}
.cls123INTROPIX {
  width: 100%;
  height: auto;
}
.cls123INTROTEXT {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  margin: 0 0;
  margin-left: 1em;
  padding: .5em .3em   ;
  font-size: 1em;
  text-align: center;
  background-color: ivory;
  color: navy;
  border: solid black 1px;
  border-radius: .8em;
}
/****************************/
/* 123 SECTION  */
.cls123GRID {
  display: grid;
  grid-template-columns: 1fr 8em 1fr;
  grid-gap: 1em;
  background: #aebcd4;
  border: solid black 1px;
  border-radius: .8em;
  margin: 0 .5em;
  padding: .5em .5em;
  font-size: 1.1em;
}
.cls123STEP1 {

  grid-column: 1 / 4;
  grid-row: 1 / 2;
}
.cls123STEP2 {

  grid-column: 1 / 4;
  grid-row: 2 / 3;
}
.cls123STEP3 {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}
/****************************/
/* 123 FOOTER SECTION  */
.cls123FTRGRID {
  display: grid;
  grid-template-columns: minmax(5em, 7em) 1fr;
  grid-gap: 1em;
  background: #405768;
  border: solid black 1px;
  border-radius: .8em;
  margin: .5em .5em;
  padding: .5em .5em;
  font-size: 1.1em;
}
.cls123FTRPIXCONT {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-self: center;
  align-self: center;
}
.cls123FTRPIX {
  width: 100%;
  height: auto;
}
.cls123FTRTEXT {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  margin: 0 0;
  margin-left: 1em;
  padding: .5em .3em;
  font-size: 1em;
  text-align: center;
  background-color: ivory;
  color: navy;
  border: solid black 1px;
  border-radius: .8em;
}
.cls123FTRINTRO {

}
.cls123FTRTEL {

}
.cls123FTREMAIL {

}
/***************************/
.clsFLEX3DATA {
  border: solid black 1px;
  margin: 0 1em;
  border-radius: .5em;
  padding: .5em .5em .7em .5em;
  background-color: #405768;
  color: white;
}
/****************************/
/* FAQ2 SECTION  */
.clsFAQ2 {
  margin-bottom: 3em;
}
.clsFAQ2LIST {
  margin: 0 .5em;
  padding: .5em .5em;
  border: solid black 1px;
  background: #d3cbc0;
  background: ivory;
}
.clsFAQ2Q {
  display: grid;
  grid-template-columns: 1fr 20px;
  margin: 0 1em;
}
.clsFAQ2A {
  border: solid black 1px;
  border-radius: .8em;
  margin: 0 2em;
  padding: .3em .5em;
  background: #e5e5e0;
}
.clsFAQ2INTROGRID {
  display: grid;
  grid-template-columns: 8em 1fr;
  background: #405768;
  border: solid black 1px;
  border-radius: .8em;
  margin: .5em .5em;
  padding: .5em .5em;
  color: white;
  font-size: 1.1em;
}
.clsFAQ2PIXCONT {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-self: center;
  align-self: center;
}
.clsFAQ2PIX {
  width: 100%;
  height: auto;
}
.clsFAQ2INTROTEXT {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  margin: 0 0;
  padding: .5em .3em;
  font-size: 1em;
  text-align: center;
  background-color: ivory;
  color: navy;
  border: solid black 1px;
  border-radius: .8em;
}

.clsBTN--OPENER {
  min-width: .2em;
  width: 1.5em;
  height: 1em;
}

/****************************/
/* TURN65 SECTION  */
.clsTURN65GRID {
  display: grid;
  grid-template-columns: minmax(6em, 10em) 1fr;
  background-color: #aebcd4;
  xbackground-color: #aebcd4;
  xbackground-color: #cce0ee;
  background-color: #405768;
  border: solid black 2px;
  border-radius: .8em;
  margin: .5em .5em;
  padding: .5em .5em;
  color: white;
  font-size: 1.2em;
}
.clsTURN65PIXCONT {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  xustify-self: center;
  text-align: center;
}
.clsTURN65PIX {
  width: 100%;
  height: auto;
  align-self: center;
}
.clsTURN65INTRO {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  margin: 0 0;
  padding: .5em .3em;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  background-color: ivory;
  color: navy;
  border: solid black 1px;
  border-radius: .8em;
}
.clsTURN65DIVIDER {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
.clsTURN65DESC {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}
.clsTURN65CONTACT {
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  text-align: center;
}
.clsTURN65EMAIL {
  background: #fffff0;
  padding: .2em .3em;
  font-size: .95em;
}
/****************************/
/* ??? SECTION  */