/* ************************************************************************************************* */
/* Responsive Web Design                                                                             */
/* ************************************************************************************************* */

* {box-sizing: border-box;}

/* ************************************************************************************************* */

[class*="col-"] {float: left; padding:0.15625vw;}

span-12                 {width: 1920px height:100px; background-color: #ffffff;}


@font-face {
    font-family: CenturyGothic;
    src: url("https://svdphouston.info/font/CenturyGothic.ttf");
}
@font-face {
  font-family: CenturyGothic_bold;
  src: url("https://svdphouston.info/font/gothicb.ttf");
  font-weight: bold;
}


/* ************************************************************************************************* */

html                    {position:relative;
                         height:100%;                                                                                                                                    /* fix height to 100% for IE */
                         min-height:100%;                                                                                                                                /* fix height for other browsers */
                         padding:0;                                                                                                                                      /* remove padding */
                         margin:0;                                                                                                                                       /* remove margins */
                         border:0;                                                                                                                                       /* remove borders */
                         overflow:auto;}
body                    {font-family:CenturyGothic, sans-serif; text-align:center; font-size:16px;
                         width:100%;
                         height:100%;                                                                                                                                    /* fix height to 100% for IE */
                         min-height:100%;                                                                                                                                /* fix height for other browsers */
                         max-height:100%;                                                                                                                                /* fix height for other browsers */
                         padding:0;                                                                                                                                      /* remove padding */
                         margin:0;                                                                                                                                       /* remove margins */
                         border:0;                                                                                                                                       /* remove borders */
                         overflow:auto;

/*                         background-image: url("https://svdphouston.info/images/svdp_bkgrd.jpg");
                           background-position: center;
                           background-repeat: no-repeat;
                           background-size: cover;                                                   */
                           background-color: #00a9ce;}

/* ************************************************************************************************* */

.row                    {display: flex; flex-wrap: wrap;}
.row::after             {content: ""; clear: both; display: table;}

div                     {display: inline-block;}
div.wrapper             {position:relative;
                         min-height:100%;
                         height:auto !important;
                         height:100%;
                         width:100%;
                         background:transparent;}
div.center              {position:relative;
                         width:100%;
                         height:auto;
                         margin:auto;
                         padding:0.15625vw;
                         border:none;}
div.centered            {position:relative;
                         width:100%;
                         height:auto;
                         text-align: center;
                         align-items: center;
                         padding:0.15625vw;
                         border:none;}
div.container           {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
div.container_left      {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: left; text-align: left;}

div.grid_container_2    {display: grid; grid-template-columns: auto auto;}
div.grid_container_3    {display: grid; grid-template-columns: auto auto auto;}
div.grid_container_4    {display: grid; grid-template-columns: auto auto auto auto;}
div.grid_container_5    {display: grid; grid-template-columns: auto auto auto auto auto;}

div.button-wrapper      {width:100%;
                         padding-top:10px;
                         padding-bottom:10px;
                         display:flex;
                         justify-content: center;}
div.flex-wrapper        {width:100%;
                         padding-top:10px;
                         padding-bottom:10px;
                         display: flex;
                         flex-direction: row;
                         flex-wrap: wrap;
                         justify-content: center;}
div.flex-wrapper-left   {width:100%;
                         padding-top:10px;
                         padding-bottom:10px;
                         display: flex;
                         flex-direction: row;
                         flex-wrap: wrap;
                         justify-content: left;}

div.impressive          {position:relative;
                         width:100%;
                         height:auto;
                         align-items: center;
                         border:none;
                         color: #ffffff;
                         text-shadow: 2px 2px 5px #000000;
                         text-align: center;}
div.impressive_black    {position:relative;
                         width:100%;
                         height:auto;
                         align-items: center;
                         border:none;
                         color: #000000;
                         text-shadow: 2px 2px 5px #ffffff;
                         text-align: center;}

div.banner              {position: relative;
                         width: 100%;
                         height: auto;}
div.header              {position: relative;
                         width: 100%;
                         height: auto;}
div.footer              {position: fixed;
                         left: 0;
                         bottom: 0;
                         width: 100%;
                         height: auto;
                         background: rgba(0, 0, 0, 0.6);
                         padding: 5px;}

/* ************************************************************************************************* */

/*form                  {display: flex;
                         flex-direction: row;
                         flex-wrap: wrap;
                         justify-content: center;}*/

/* ************************************************************************************************* */

p                       {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}                                /* 16px */
p.text-left             {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}
p.text-center           {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 16px;}
p.text-right            {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 16px;}
p.text-left-small       {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 12px;}                                /* 12px */
p.text-center-small     {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;}
p.text-right-small      {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 12px;}

h1                      {font-family: CenturyGothic, sans-serif;                     font-size: 36px;}                                /* 36px  https://khaledkzy.github.io/pixel-vh-vw-converter */
h1.text-left            {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 36px;}
h1.text-right           {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 36px;}
h1.spiffy_b             {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 36px; color: #000000; text-shadow: 2px 2px 5px #ffffff;}
h1.spiffy_w             {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 36px; color: #ffffff; text-shadow: 2px 2px 5px #000000;}
h2                      {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 28px;}                                /* 28px */
h2.text-left            {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 28px;}
h2.text-center          {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 28px;}
h2.quotation            {font-family: "SFBurlingtonScriptRegular",  Arial, sans-serif;letter-spacing: 0; text-align:left;   font-size: 28px;}
h2.text-right           {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 28px;}
h3                      {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 24px;}                                /* 24px */
h3.text-left            {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 24px;}
h3.text-center          {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 24px;}
h3.quotation            {font-family: "SFBurlingtonScriptRegular",  Arial, sans-serif;letter-spacing: 0; text-align:left;   font-size: 24px;}
h3.text-right           {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 24px;}
h4                      {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px;}                                /* 20px */
h4.text-left            {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 20px;}
h4.text-right           {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 20px;}
h4.spiffy               {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px; color: #000000; text-shadow: 2px 2px 5px #ffffff;}
h4.spiffy_w             {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px; color: #ffffff; text-shadow: 2px 2px 5px #000000;}

/* ************************************************************************************************* */

.center                  {margin:auto;}
.borders                 {border: 1px solid black; border-collapse: collapse;}
table.spread             {border-collapse: separate; border-spacing: 10px; /* Apply cell spacing */}
th.text-left             {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 16px; padding: 2px  5px; margin-left:10px;}
th.text-left-indent      {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 16px; padding: 2px  5px; margin-left:42px;}
th.text-center           {font-family: CenturyGothic, sans-serif; text-align:center; vertical-align: middle; font-size: 18px; padding: 2px  5px;}
th.text-right            {font-family: CenturyGothic, sans-serif; text-align:right;  vertical-align: middle; font-size: 16px; padding: 2px  5px; margin-right:10px;}
th.text-left-small       {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 12px; padding: 2px  5px;}
th.text-left-small-33    {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 12px; padding: 2px  5px; width: 33%;}
th.text-center-small     {font-family: CenturyGothic, sans-serif; text-align:center; vertical-align: middle; font-size: 12px; padding: 2px  5px;}
th.text-right-small      {font-family: CenturyGothic, sans-serif; text-align:right;  vertical-align: middle; font-size: 12px; padding: 2px  5px;}
td.text-left-close       {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 16px; padding: 2px  5px;}
td.text-center-close     {font-family: CenturyGothic, sans-serif; text-align:center; vertical-align: middle; font-size: 16px; padding: 2px  5px;}
td.text-right-close      {font-family: CenturyGothic, sans-serif; text-align:right;  vertical-align: middle; font-size: 16px; padding: 2px  5px;}
td.text-left             {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 16px; padding: 2px  5px; margin:10px;}
td.text-left-large       {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 20px; padding: 2px  5px;}
td.text-left-form        {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 16px; padding: 2px  5px;}
td.text-left-form-top    {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: top;    font-size: 16px; padding: 2px  5px;}
td.text-left-indent      {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 16px; padding: 2px  5px; margin-left:42px;}
td.text-center           {font-family: CenturyGothic, sans-serif; text-align:center; vertical-align: middle; font-size: 16px; padding: 2px  5px; margin:10px;}
td.text-center_large     {font-family: CenturyGothic, sans-serif; text-align:center; vertical-align: middle; font-size: 20px; padding: 2px  5px; margin:10px;}
td.text-center-form      {font-family: CenturyGothic, sans-serif; text-align:center; vertical-align: middle; font-size: 16px; padding: 2px  5px;}
td.text-right            {font-family: CenturyGothic, sans-serif; text-align:right;  vertical-align: middle; font-size: 16px; padding: 2px  5px; margin:10px;}
td.text-left-small       {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 12px; padding: 2px  5px; margin:10px;}
td.text-left-small-33    {font-family: CenturyGothic, sans-serif; text-align:left;   vertical-align: middle; font-size: 12px; padding: 2px  5px; width: 33%;}
td.text-center-small     {font-family: CenturyGothic, sans-serif; text-align:center; vertical-align: middle; font-size: 12px; padding: 2px  5px; margin:10px;}
td.text-right-small      {font-family: CenturyGothic, sans-serif; text-align:right;  vertical-align: middle; font-size: 12px; padding: 2px  5px; margin:10px;}

/* ************************************************************************************************* */
/* CSS backdrop filters                                                                              */
/* ************************************************************************************************* */

.frosted {
  padding:10px;
  color: black;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(40px) saturate(180%);
  border-radius: 10px;
  box-shadow: 10px 10px 5px #000000;
}

.backdrop-filter_none {
  backdrop-filter: none;
}

.backdrop-filter_grayscale {
  backdrop-filter: grayscale(1);  
}
.backdrop-filter_brightness {
  backdrop-filter: brightness(1.5);  
}
.backdrop-filter_blur {
  backdrop-filter: blur(20px);  
}
.backdrop-filter_contrast {
  backdrop-filter: contrast(.8);  
}
.backdrop-filter_drop-shadow {
  backdrop-filter: drop-shadow(4px 4px 10px black);  
}
.backdrop-filter_invert {
  backdrop-filter: invert(.7);
}
.backdrop-filter_opacity {
  backdrop-filter: opacity(.4);
}
.backdrop-filter_sepia {
  backdrop-filter: sepia(.4);
}
.backdrop-filter_saturate {
  backdrop-filter: saturate(1.8);
}
.backdrop-filter_hue-rotate {
  backdrop-filter: hue-rotate(120deg);
}

.medium            {color: #ffffff; font-size: 20px; background: #00718a; width: 100%; padding: 5px;}
.medium_white      {color: #000000; font-size: 20px; background: #00A9CE; width: 100%; padding: 5px;}
.medium_red        {color: #ffffff; font-size: 20px; background: #ff0000; width: 100%; padding: 5px;}
.small             {color: #ffffff; font-size: 14px; background: #00718a; width: 100%; padding: 5px;}
.small_white       {color: #000000; font-size: 14px; background: #00A9CE; width: 100%; padding: 5px;}
.title             {width: 100%;}

hr.double          {border-top: 3px double;}
hr.dashed          {border-top: 1px dashed;}
hr.dotted          {border-top: 1px dotted;}

a:link             {color: black; text-decoration: none;}
a:visited          {color: black; text-decoration: none;}
a:hover            {color: black; background-color: white; text-decoration: none;}
a:active           {color: black; text-decoration: none;}
a.spiffy_w         {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px; color: #ffffff; text-shadow: 2px 2px 5px #000000;}

span               {font-family: CenturyGothic, sans-serif;
                    font-size: 14px;
                    font-style: normal;
                    display:block;
                    border-radius: 10px;}

/* ************************************************************************************************* */

ul                      {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}                                /* 16px */
ul.no-bullets           {list-style-type: none; /* Remove bullets */
                         padding: 0; /* Remove padding */
                         margin: 0; /* Remove margins */
                        }
li                      {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}                                /* 16px */
/* ************************************************************************************************* */

label                   {display: block;}

input                   {flex: 1 0 40%; /* allows space for margins */
                         border:2px solid #ADADAD;
                         border-radius: 10px;
                         font-size:16px;
                         color: black; 
                         background-color: #ffffff;
                         padding:2px;}
input.display           {border:none;
                         font-size:16px;
                         padding:2px;}
input:focus             {border:2px solid #000000;}
input [type=text]       {color: black; background-color:#ffffff;}
input [type=search]     {color: black; background-color:#ffffff;}
input [type=password]   {color: black; background-color:#ffffff;}

textarea                {vertical-align: bottom;
	                       font-family: CenturyGothic, sans-serif;
                         text-align:left;
                         font-size: 16px;
                         color: black;
                         background-color: #ffffff;
                         border:2px solid #ADADAD;
                         border-radius:10px;
                         padding: 2px;}
textarea:focus          {border:2px solid black;}

select                  {border:2px solid #ADADAD;
                         border-radius:10px;
                         font-size:16px;
                         color: black;
                         background-color: #ffffff;
                         padding:2px;}
select:focus            {border:2px solid black;}
option                  {color: black;
                         background-color: #ffffff;}

.arrow                  {background: #00778E;;
                         border-radius:10px 10px 10px 10px;
                         box-shadow: rgba(0,0,0,1) 0 1px 0;
                         text-shadow: rgba(0,0,0,.4) 0 1px 0;
                         margin:0.625vw;
                         padding:0.625vw;
                         color: #ffffff;
                         font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;
                         vertical-align: middle;}
.button_tiny            {background: #00778E;;
                         border-radius: 25%;
                         box-shadow: rgba(0,0,0,1) 0 1px 0;
                         text-align: center;
                         display: inline-block;
                         margin:0.25vw;
                         padding:0.25vw;
                         color: #ffffff;
                         font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 6px;
                         vertical-align: middle;}
.button_sm              {width:100px;
/*                       background-image: repeating-conic-gradient(#00008b 10%, #1e90ff 20%);                                                        */
                         background: #00778E;;
                         border-radius:10px 10px 10px 10px;
                         box-shadow: rgba(0,0,0,1) 0 1px 0;
                         text-shadow: rgba(0,0,0,.4) 0 1px 0;
                         margin:0.625vw;
                         padding:0.625vw;
                         color: #ffffff;
                         font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;
                         vertical-align: middle;}
.button_med             {width:150px;
/*                       background-image: repeating-conic-gradient(#00008b 10%, #1e90ff 20%);                                                        */
                         background: #00778E;;
                         border-radius:10px 10px 10px 10px;
                         box-shadow: rgba(0,0,0,1) 0 1px 0;
                         text-shadow: rgba(0,0,0,.4) 0 1px 0;
                         margin:0.625vw;
                         padding:0.625vw;
                         color: #ffffff;
                         font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;
                         vertical-align: middle;}
.button                 {width:200px;
/*                       background-image: repeating-conic-gradient(#00008b 10%, #1e90ff 20%);                                                        */
                         background: #00778E;;
                         border-radius:10px 10px 10px 10px;
                         box-shadow: rgba(0,0,0,1) 0 1px 0;
                         text-shadow: rgba(0,0,0,.4) 0 1px 0;
                         margin:0.625vw;
                         padding:0.625vw;
                         color: #ffffff;
                         font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;
                         vertical-align: middle;}
.button:hover           {color: #ccc;}
.button_spacer          {width:200px;
                         margin:0.625vw;
                         padding:0.625vw;
                         border:none;
                         background:transparent;}
.button_disabled        {width:200px;
/*                       background-image: repeating-conic-gradient(#dcdcdc 10%, #808080 20%);                                                        */
                         background-image: linear-gradient(to bottom right, #dcdcdc, #dcdcdc, #808080, #808080);
                         border-radius:10px 10px 10px 10px;
                         box-shadow: rgba(0,0,0,1) 0 1px 0;
                         text-shadow: rgba(0,0,0,.4) 0 1px 0;
                         margin:0.625vw;
                         padding:0.625vw;
                         color: #000000;
                         font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;
                         vertical-align: middle;}

img.top                 {width:100%; height:auto; vertical-align: top;    margin: auto;}
img.middle              {width:100%; height:auto; vertical-align: middle; margin: auto;}
img.bottom              {width:100%; height:auto; vertical-align: bottom; margin: auto;}

img.smLogo              {max-width:10%;  height:auto; vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000);}
img.Logo                {max-width:100%; height:auto; vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000);}
img.whiteLogo           {width:100%;     height:auto; vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000);}
img.spiffy              {width:auto;     height:auto; vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000); border-radius:10px;}
img.spiffy_half         {max-width:50%;  height:auto; vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000); border-radius:10px;}
img.under_construction  {width:100%;     height: 100px; vertical-align: middle; margin: auto;}

.clear                  {clear:both;}
.black                  {color:#000000;}
.white                  {color:#ffffff;}
.gray                   {color:#808080;}
.red                    {color:#ff0000;}
.green                  {color:#00ff00;}
.blue                   {color:#0000ff;}
.yellow                 {color:#ffff00;}
.purple                 {color:#4b0082;}
.chocolate              {color:#3b2a21;}

.left                   {text-align:left;}
.center                 {text-align:center;}
.right                  {text-align:right;}

.float_left             {float: left;}
.float_right            {float: right;}

.hidden                 {display: none;
                         visibility: hidden;}
.unhidden               {display: block;
                         visibility: visible;}
.visible                {display: block;
                         visibility: visible;}

/* ************************************************************************************************* */
/*            Media Queries go here                                                                  */
/* ************************************************************************************************* */

  /* For mobile phones: Conversion rate = 3.75* monitor*/
@media only screen and (max-width: 500px) {
  .col-0                {width: 100%; flex-direction: column;}
  .col-1                {width: 100%; flex-direction: column;}
  .col-2                {width: 100%; flex-direction: column;}
  .col-3                {width: 100%; flex-direction: column;}
  .col-4                {width: 100%; flex-direction: column;}
  .col-5                {width: 100%; flex-direction: column;}
  .col-6                {width: 100%; flex-direction: column;}
  .col-7                {width: 100%; flex-direction: column;}
  .col-8                {width: 100%; flex-direction: column;}
  .col-9                {width: 100%; flex-direction: column;}
  .col-10               {width: 100%; flex-direction: column;}
  .col-11               {width: 100%; flex-direction: column;}
  .col-12               {width: 100%; flex-direction: column;}

  div.grid_container_2  {display: grid; grid-template-columns: auto auto;}
  div.grid_container_3  {display: grid; grid-template-columns: auto auto;}
  div.grid_container_4  {display: grid; grid-template-columns: auto auto;}
  div.grid_container_5  {display: grid; grid-template-columns: auto auto;}
  .button-wrapper       {flex-direction: column; text-align: center; align-items: center;}

  p                     {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}                                /* 16px */
  p.text-left           {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}
  p.text-center         {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 16px;}
  p.text-right          {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 16px;}
  p.text-left-small     {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 12px;}                                /* 12px */
  p.text-center-small   {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;}
  p.text-right-small    {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 12px;}

  h1                    {font-family: CenturyGothic, sans-serif;                     font-size: 36px;}                                /* 36px  https://khaledkzy.github.io/pixel-vh-vw-converter */
  h1.text-left          {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 36px;}
  h1.text-right         {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 36px;}
  h2                    {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 28px;}                                /* 28px */
  h2.text-left          {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 28px;}
  h2.text-center        {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 28px;}
  h2.quotation          {font-family: "SFBurlingtonScriptRegular",  Arial, sans-serif;letter-spacing: 0; text-align:left;   font-size: 28px;}
  h2.text-right         {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 28px;}
  h4                    {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px;}                                /* 20px */
  h4.text-left          {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 20px;}
  h4.text-right         {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 20px;}
  h4.spiffy             {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px; color: #000000; text-shadow: 2px 2px 5px #ffffff;}
  h4.spiffy_white       {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px; color: #ffffff; text-shadow: 2px 2px 5px #000000;}

  img.Logo              {display: block; max-width:33%;  height:auto;     vertical-align: middle; margin: auto; padding: 2px  5px; filter: drop-shadow(10px 10px 5px #000000);}
  img.phone             {display: block; max-width:33%;  height:auto;     vertical-align: middle; margin: auto; padding: 2px  5px; filter: drop-shadow(10px 10px 5px #000000);}
  img.spiffy            {display: block; max-width:auto; max-height:15%;  vertical-align: middle; margin: auto; padding: 2px  5px; filter: drop-shadow(10px 10px 5px #000000); border-radius:10px;}
}

  /* For tablets: */
@media only screen and (min-width: 501px) and (max-width:1000px) {
  .col-t-0              {width: 1%;}
  .col-t-1              {width: 8.33%;}
  .col-t-2              {width: 16.66%;}
  .col-t-3              {width: 25%;}
  .col-t-4              {width: 33.33%;}
  .col-t-5              {width: 41.66%;}
  .col-t-6              {width: 50%;}
  .col-t-7              {width: 58.33%;}
  .col-t-8              {width: 66.66%;}
  .col-t-9              {width: 75%;}
  .col-t-10             {width: 83.33%;}
  .col-t-11             {width: 91.66%;}
  .col-t-12             {width: 100%;}

  div.grid_container_2  {display: grid; grid-template-columns: auto auto;}
  div.grid_container_3  {display: grid; grid-template-columns: auto auto;}
  div.grid_container_4  {display: grid; grid-template-columns: auto auto;}
  div.grid_container_5  {display: grid; grid-template-columns: auto auto;}
  .button-wrapper       {flex-direction: column; text-align: center; align-items: center;}

  p                     {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}                                /* 16px */
  p.text-left           {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 16px;}
  p.text-center         {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 16px;}
  p.text-right          {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 16px;}
  p.text-left-small     {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 12px;}                                /* 12px */
  p.text-center-small   {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 12px;}
  p.text-right-small    {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 12px;}

  h1                    {font-family: CenturyGothic, sans-serif;                     font-size: 36px;}                                /* 36px  https://khaledkzy.github.io/pixel-vh-vw-converter */
  h1.text-left          {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 36px;}
  h1.text-right         {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 36px;}
  h2                    {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 24px;}                                /* 28px */
  h2.text-left          {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 24px;}
  h2.text-center        {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 24px;}
  h2.quotation          {font-family: "SFBurlingtonScriptRegular",  Arial, sans-serif;letter-spacing: 0; text-align:left;   font-size: 24px;}
  h2.text-right         {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 24px;}
  h4                    {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px;}                                /* 20px */
  h4.text-left          {font-family: CenturyGothic, sans-serif;  text-align:left;   font-size: 20px;}
  h4.text-right         {font-family: CenturyGothic, sans-serif;  text-align:right;  font-size: 20px;}
  h4.spiffy             {font-family: CenturyGothic, sans-serif;  text-align:center; font-size: 20px; color: #000000; text-shadow: 2px 2px 5px #ffffff;}

  img.Logo              {display: block; max-width:75%;  height:auto;  vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000);}
  img.phone             {display: block; max-width:66%;  height:auto;     vertical-align: middle; margin: auto; padding: 2px  5px; filter: drop-shadow(10px 10px 5px #000000);}
  img.spiffy            {display: block; max-width:100%; height:auto;  vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000); border-radius:10px;}
}

  /* For desktop: */
@media only screen and (min-width: 1001px) {
  .col-d-0              {width: 1%;}
  .col-d-1              {width: 8.33%;}
  .col-d-2              {width: 16.66%;}
  .col-d-3              {width: 25%;}
  .col-d-4              {width: 33.33%;}
  .col-d-5              {width: 41.66%;}
  .col-d-6              {width: 50%;}
  .col-d-7              {width: 58.33%;}
  .col-d-8              {width: 66.66%;}
  .col-d-9              {width: 75%;}
  .col-d-10             {width: 83.33%;}
  .col-d-11             {width: 91.66%;}
  .col-d-12             {width: 100%;}

  img.Logo              {display: block; max-width:50%;  height:auto;     vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000);}
  img.phone             {display: block; max-width:66%;  height:auto;     vertical-align: middle; margin: auto; padding: 2px  5px; filter: drop-shadow(10px 10px 5px #000000);}
  img.spiffy            {display: block; max-width:auto; max-height:15%;  vertical-align: middle; margin: auto; filter: drop-shadow(10px 10px 5px #000000); border-radius:10px;}
}