/* app-media.css */

/*=============================*/
/* PAGE HEADER                 */
/* WIDTH <= 528px : 33ems      */
@media (max-width: 45.5em) {
  .clsPGHDRGRID {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    padding: .5em 1em;
    padding-bottom: .5em;
  }
  .clsPGHDRPIXCONT {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    xwidth: 16em;
    margin-left: .5em;
    justify-self: center;
    align-self: center;
  }
  .clsPGHDRPIX {
    width: 100%;
    height: auto;
    xborder: solid red 1px;
  }
  .clsPGHDRINTRO {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    border: solid black 1px;
    padding: .3em .5em;
    background: #fffff0;
    border-radius: .5em;
    text-align: center;
  }

}

/*=========================================================*/
/* TURN65 SECTION                                          */
/* SET THE TURN65 SECTION GRID AND IT'S CONTENT FOR MOBILE */
/* WIDTH: <= 528px : 33ems                                 */
/*=========================================================*/
@media (max-width: 33em) {
  .clsTURN65GRID {
    display: grid;
    grid-template-columns: 1fr;
    background: #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;
    xjustify-self: center;
    text-align: center;
  }
  .clsTURN65PIX {
    width: 100%;
    height: auto;
    align-self: center;
  }
  .clsTURN65INTRO {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    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;
  }
  .clsTURN65DIVIDER {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .clsTURN65DESC {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
  .clsTURN65CONTACT {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    text-align: center;
  }
  .clsTURN65EMAIL {
    background: #fffff0;
    padding: .2em .3em;
    font-size: .65em;
  }
}

/*=========================================================*/
/* STEPS123 INTRO SECTION                                  */
/* WIDTH: <= 528px : 33ems                                 */
/*=========================================================*/
@media (max-width: 33em) {

  .cls123INTROGRID {
    display: grid;
    grid-template-columns: 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;
    width: 7em; 
    justify-self: center;
    align-self: center;
  }

  .cls123INTROPIX {
    width: 100%;
    height: auto;
  }

  .cls123INTROTEXT {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    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 FOOTER SECTION  */
@media (max-width: 33em) {
  .cls123FTRGRID {
    display: grid;
    grid-template-columns: 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;
    width: 6em;
    justify-self: center;
    align-self: center;
  }

  .cls123FTRPIX {
    width: 100%;
    height: auto;
    justify-self: center;
    align-self: center;
  }

  .cls123FTRTEXT {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    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 {
    font-size: .8em;
  }
}

/*=========================================================*/
/* RADIO SECTION                                           */
/* SET THE RADIO SECTION GRID AND IT'S CONTENT FOR MOBILE  */
/* WIDTH: <= 528px : 33ems                                 */
/*=========================================================*/
@media (max-width: 33em) {
  .clsRADIOGRID {
    display: grid;
    grid-template-columns: 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 / 1;
    grid-row: 1 / 2;
    justify-self: center;
    xborder: solid red 1px;
  }

  .clsRADIOPIX {
    width: 100%;
    height: auto;
    justify-self: center;
    xborder: solid green 1px;
  }

  .clsRADIOINTRO {
    grid-column: 1 / 1;
    grid-row: 2 / 3;
    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: 3 / 4;
    width: 100%;
    xborder: solid black 1px;
  }

  .clsRADIODESC {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    font-size: 1.2em;
    xcolor: red;
  }

  .clsRADIOSAMPLES {
    grid-column: 1 / 4;
    grid-row: 5 / 6;
    border: solid black 3px;
    border-radius: .8em;
    xtext-align: center;
    justify-self: center;
    margin: 0 .5em;
    padding: 0 1em;
    background-color: azure;
    color: black;
  }

  .clsAUDIO {
    width: 100%;
    font-size: .5em;
  }
}

/*=========================================================*/
/* MAGICIAN SECTION                                        */
/*  SET THE MAGICIAN SECTION GRID AND IT'S CONTENT FOR     */
/*  WIDTH: <= 528px : 33ems                                */
/*=========================================================*/
@media (max-width: 33em) {
  .clsMAGICCONTEMAILTXT {
    font-size: .7em;
  }
}

/*========================================================*/
/*  BENNY GRID                                            */
/*  WIDTH: <= 528px : 33ems                               */
/*========================================================*/
@media (max-width: 33em) {
  .clsBENNYGRID {
    display: grid;
    border: solid black 2px;
    xbackground-color: #b9e5ed;
    xbackground-color: #cce0ee;
    xbackground-color: #dbc3d5;
    background-color: #cce0ee;
    margin: 0 0.5em;
    padding: 0.5em;
    grid-template-columns: 1fr 1fr;
  }

  .clsBENNYITEM {
    font-size: 1em;
    font-weight: bold;
    border: solid #777777 2px;
    text-align: center;
    width: 100%;
    height: auto;
    padding: .5em 0;
  }

  .clsBENNYSTEPSFLEX {
    height: auto;
    font-weight: normal;
    gap: 2em;
  }

  .clsBENNYSTEPSITEM {
    font-size: 1em;
  }
}

/*========================================================*/
/* BENNY GRID                                             */
/* WIDTH > = 1200px : 75ems                               */
/*========================================================*/
@media (min-width: 75em) {
  .clsBENNYGRID {
    display: grid;
    border: solid black 2px;
    xbackground-color: #b9e5ed;
    xbackground-color: #cce0ee;
    xbackground-color: #dbc3d5;
    background-color: #cce0ee;
    margin: 0 0.5em;
    padding: 0.5em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .clsBENNYITEM {
    font-size: 1em;
    font-weight: bold;
    border: solid #777777 2px;
    text-align: center;
    width: 100%;
    height: auto;
    padding: .5em 0;
  }

  .clsBENNYSTEPSFLEX {
    height: auto;
    font-weight: normal;
    gap: 9em;
  }

  .clsBENNYSTEPSITEM {
    font-size: 1.2em;
    grid-gap: 2em;
  }
}

/*========================================================*/
/* MAIN PAGE CONTACT BOX                                  */
/* SET THE MAIN PAGE CONTACT BOX TO AN OPTIMUM, STABLE,   */
/* AND CENTERED SIZE WHEN THE WIDTH OF THE VIEWPORT IS    */
/* 560px [35em] OR GREATER.                               */
/*========================================================*/
@media (min-width: 33em) {
  .clsMAGICCONTGRID {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: solid black 1px;
    border-radius: .8em;
    box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
    background-color: #e6eff6;
    background: linear-gradient(to bottom, white 0%, #E2E6F0 50%, #c0c8de 100%);
    margin: .5em .5em;
    margin: auto auto;
    padding: .5em .5em;
    width: 527px;
  }

  .clsMAGICCONTHDR {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    font-size: 1em;
    text-align: center;
    margin-left: 1em;
  }

  .clsMAGICCONTIMGCONT {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-left: 4em;
  }

  .clsMAGICCONTIMG {
    width: 60%;
    height: auto;
    justify-content: center;
    text-align: center;
  }

  .clsMAGICCONTTEL {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    font-size: 1em;
    text-align: center;
  }

  .clsMAGICCONTEMAIL {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    text-align: center;
    font-size: .875em;
  }
}


@media (min-width: 35em) {
  .clsMPCONTACTGRID {
    display: grid;
    grid-template-columns: 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;
    margin: auto auto;
    padding: .5em .5em;
    width: 527px;
  }
}

/***************************************/
/* NEW MAIN PAGE CONTACT GRID */
@media (max-width: 35em) {
  .clsMPCONTACTGRID {
    display: grid;
    grid-template-columns: 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 / 2;
    grid-row: 1 / 2;
    text-align: 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;
  }
  .clsMPCONTACTTEL {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    font-size: 1.2em;
    justify-self: center;
    align-self: center;
  }
  .clsMPCONTACTEMAILLBL {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    justify-self: center;
    align-self: center;
  }
  .clsMPCONTACTEMAIL {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    justify-self: center;
    align-self: center;
  }
  .clsMPCONTACTLICTITLE {
    grid-column: 1 / 2;
    grid-row: 6 / 7;
    justify-self: center;
  }
  .clsMPCONTACTLIC {
    grid-column: 1 / 3;
    grid-row: 7 / 8;
    justify-self: center;
  }
}

/*========================================================*/
/* TITLE GRID                                             */
/* WIDTH > = 560px : 35ems                                */
/*========================================================*/
@media (min-width: 35em) {
  .clsTITLE > h1 {
    font-size: 2.25rem;
    color: navy;
  }
}

/*========================================================*/
/* BENNY TITLE                                            */
/* WIDTH > = 640px : 40ems                                */
/*========================================================*/
@media (min-width: 40em) {
  .clsBENNYTITLE {
    font-size: 1.3em;
    text-align: left;
    margin-left: .85em;
    font-weight: bold;
  }
}

/*========================================================*/
/* MAIN                                                   */
/* WIDTH > = 560px : 35ems                                */
/*========================================================*/
@media (min-width: 35em) {
  main {
    padding: 2em 1em;
  }
}

/*========================================================*/
/* #form1                                                 */
/* WIDTH > = 1280px : 80ems                               */
/*========================================================*/
@media (min-width: 80em) {
  #form1 {
    width: 1275px;
    margin-left: auto;
    margin-right: auto;
    border: double navy 5px;
    background-image: url("../images/parchmentblue.jpg");
  }

  body {
    background-image: url("../images/parchment.jpg");
  }

  .clsIMG--GROW {
    width: 582px;
    height: auto;
  }
}

/*========================================================*/
/* FAQ - EMAIL ADDRS IN ANSWER BOXES                      */
/*                                                        */
/* BROWSER MINIMUM WIDTH - FIREFOX                        */
/* <= 454px ( <= 28.375em)                                */
/* PAD TO: <= 465px ( <= 29.0625em)                       */
/*========================================================*/
@media (max-width: 29.0625em) {
  .clsFAQ28EMAIL {
    font-size: .9em;
  }
}

/*=======================================================*/
/*  FAQ - EMAIL ADDRS IN ANSWER BOXES                    */
/*                                                       */
/*  PHONE WIDTHS                                         */
/*  <= 414px ( <= 25.875em)                              */
/*=======================================================*/
@media (max-width: 25.875em) {

  .clsFAQ28EMAIL {
    font-size: .7em;
  }
}

/*=======================================================*/
/*  FAQ - INTRO TEXT AND IMAGE                           */
/*=======================================================*/
@media (max-width: 33em) {
  .clsFAQ2INTROGRID {
    display: grid;
    grid-template-columns: 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;
    xwidth: 16em;
    align-self: center;
    text-align: center;
  }

  .clsFAQ2PIX {
    width: 100%;
    height: auto;
  }

  .clsFAQ2INTROTEXT {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: center;
    margin: 0 0;
    padding: .3em .5em;
    font-size: 1em;
    text-align: center;
    background-color: ivory;
    color: navy;
    border: solid black 1px;
    border-radius: .8em;
  }
}

/*====================================================*/
/*  FAQ - EMAIL ADDRS IN QUESTION 3 ANSWER            */
/*====================================================*/
/*  >= 501px  */
@media (min-width: 501px) {
  .clsFAQ23EMAIL {
    font-size: 1em;
    Xborder: solid gray 1px;
  }
}
/*  0-500px  - BROWSER CHRO,E/EDGE MIN */
@media (max-width: 500px) {
  .clsFAQ23EMAIL {
    font-size: 1em;
    Xborder: dashed brown 1px;
  }
}
/* 0-499px  - BROWSER FF MIN  */
@media (max-width: 499px) {
  .clsFAQ23EMAIL {
    font-size: .78em;
    Xborder: solid purple 2px;
  }
}
/*  0-414px  - IPHONE+  */
@media (max-width: 414px) {
  .clsFAQ23EMAIL {
    font-size: .78em;
    Xborder: solid cyan 1px;
  }
}
/*  0-375px  - IPHONE   
*/ @media (max-width: 375px) {
  .clsFAQ23EMAIL {
    font-size: .65em;
    Xborder: solid blue 1px;
  }
}
/*  0-360px  - GALAXY/ANDRIOD  */
@media (max-width: 360px) {
  .clsFAQ23EMAIL {
    font-size: .65em;
    Xborder: solid red 1px;
  }
}