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

* {box-sizing: border-box;}

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

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

[class*="col-"] {float: left; padding: 15px;}

  /* For mobile phones: */
@media only screen and (max-width: 768px) {
  .col-0    {width: 100%;}
  .col-1    {width: 100%;}
  .col-2    {width: 100%;}
  .col-3    {width: 100%;}
  .col-4    {width: 100%;}
  .col-5    {width: 100%;}
  .col-6    {width: 100%;}
  .col-7    {width: 100%;}
  .col-8    {width: 100%;}
  .col-9    {width: 100%;}
  .col-10   {width: 100%;}
  .col-11   {width: 100%;}
  .col-12   {width: 100%;}
}

  /* For tablets: */
@media only screen and (min-width: 800px) {
  .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%;}
}

  /* For desktop: */
@media only screen and (min-width: 1000px) {
  .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%;}
}

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

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:"Helvetica Neue", Helvetica, Arial, Verdana, Geneva, 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;
                     color:#ffffff;

                     background:url(http://www.teamvolunteers.com/ResaleShop/images/Resale_Shop_Bkgrnd.png) no-repeat center center fixed; 
                     -webkit-background-size:cover;
                        -moz-background-size:cover;
                          -o-background-size:cover;
                             background-size:cover;
                     background-attachment:fixed;}

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

div                 {display: inline-block;}
div.wrapper         {position:relative;
                     min-height:100%;
                     height:auto !important;
                     height:100%;
                     width:100%;
                     background:transparent;}
div.frosted         {margin: auto;
                     padding:0.625vw;
                     font-size: 16px;
                     color: #000000;
                     background-color: rgba(255, 255, 255, .8);
                     backdrop-filter: blur(40px) saturate(180%);
                     border-radius: 10px;
                     box-shadow: 10px 10px 5px #000000;}
div.fullWidth       {width:100%;}

div.button-wrapper      {width:100%;
                         display:flex;
                         flex-direction: row;
                         justify-content: center;
                         text-align: center;
                         align-items: 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;
                         font-size: 5vw;
                         color: #ffffff;
                         text-shadow: 2px 2px 5px #000000;
                         text-align: center;}

div.centered        {position:relative;
                     width:100%;
                     height:auto;
                     text-align: center;
                     align-items: center;
                     padding:10px;
                     border:none;}
div.columns_1       {position:relative;
                     width:100%;
                     height:auto;
                     text-align: center;
                     align-items: center;
                     padding:10px;
                     border:none;}
div.columns_4       {position:relative;
                     width:100%;
                     height:auto;
                     text-align: center;
                     align-items: center;
                     padding:10px;
                     border:none;}
div.snazzy          {margin:auto;
                     border-style:none;
                     border-radius: 10px 0px 10px 0px;
                     background: rgba(255, 255, 255, 0.6);}
div.snazzy_blue     {margin:auto;
                     border-style:none;
                     border-radius: 10px 0px 10px 0px;
                     background: rgba(128, 0, 128, 0.8);}

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;}

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

h1                       {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;                     font-size: 36px;}
h1.text-left             {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 36px;}
h1.text-right            {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:right;  font-size: 36px;}
h2                       {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:center; font-size: 26px;}
h2.text-left             {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 26px;}
h2.text-center           {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:center; font-size: 26px;}
h2.quotation             {font-family: "SFBurlingtonScriptRegular",  Arial, sans-serif;letter-spacing: 0; text-align:left;   font-size: 36px;}
h2.text-right            {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:right;  font-size: 26px;}
h4                       {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:center; font-size: 20px;}
h4.text-left             {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 20px;}
h4.text-right            {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:right;  font-size: 20px;}
h6                       {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 16px;}
p                        {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 16px;}
p.text-left              {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 16px; padding:5px;}
p.text-left-indent       {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 16px; margin-left:42px; padding:5px;}
p.text-center            {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:center; font-size: 16px; padding:5px;}
p.text-right             {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:right;  font-size: 16px; padding:5px;}
p.text-left-small        {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:left;   font-size: 12px; padding:5px;}
p.text-center-small      {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:center; font-size: 12px; padding:5px;}
p.text-right-small       {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:right;  font-size: 12px; padding:5px;}

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

.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;}
.bkgrnd_black       {background:#000000;}
.bkgrnd_white       {background:#ffffff;}
.bkgrnd_gray        {background:#808080;}
.bkgrnd_red         {background:#ff0000;}
.bkgrnd_green       {background:#00ff00;}
.bkgrnd_blue        {background:#0000ff;}
.bkgrnd_yellow      {background:#ffff00;}
.bkgrnd_purple      {background:#4b0082;}
.bkgrnd_chocolate   {background:#3b2a21;}
.bkgrnd_snazzy      {background: rgba(0, 0, 0, 0.6);}
.spiffy             {text-shadow: 1px 2px 3px white;}
.spiffy_black       {text-shadow: 2px 3px 4px black;}
.black_on_white     {color: black; background-color: white;}

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

.column_2           {float: left;
                     width: 100.0%;
                     padding: 5px;
                     margin: 5px;}

.column_3           {float: left;
                     width: 33.33%;
                     padding: 5px;}

.column_4           {float: left;
                     width: 25%;
                     padding: 5px;}

.left              {text-align:left;}
.centered          {text-align:center;}
.right             {text-align:right;}
.hidden            {display: none;
                    visibility: hidden;}
.unhidden          {display: block;
                    visibility: visible;}
.visible           {display: block;
                    visibility: visible;}

.medium            {color: #ffffff; font-size: 20px; background: rgba(  0,   0,   0, 0.6); width: 100%; padding: 5px;}
.medium_white      {color: #000000; font-size: 20px; background: rgba(255, 255, 255, 0.6); 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;}

span               {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;
                    font-size: 14px;
                    font-style: normal;
                    display:block;}
span.small         {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;
                    font-size: 12px;
                    font-style: normal;}

input                {border:2px solid #ADADAD;
                     -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                          -o-border-radius: 10px;
                             border-radius: 10px;
                      font-size:16px;
                      color: black; background-color: white;
                      padding:2px;}
input.display        {border:none;
                      font-size:16px;
                      padding:2px;}
input:focus          {border:2px solid #000000;}
input [type=text]     {color: black; background-color: white;}
input [type=search]   {color: black; background-color: white;}
input [type=password] {color: black; background-color: white;}

textarea              {font-family: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;
                       text-align:left;
                       font-size: 16px;
                       color: black;
                       background-color: white;
                       line-height:125%;
                       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: white;
                       padding:2px;}
select:focus          {border:2px solid black;}
option                {color: black;
                       background-color: white;}

video               {width: 100%;
                     height: auto;
                     border:5px solid #ffffff; 
                     -webkit-border-radius: 10px 10px 10px 10px;
                        -moz-border-radius: 10px 10px 10px 10px;
                          -o-border-radius: 10px 10px 10px 10px;
                             border-radius: 10px 10px 10px 10px;
                     -webkit-box-shadow: 10px 10px 5px #000000;
                        -moz-box-shadow: 10px 10px 5px #000000;
                             box-shadow: 10px 10px 5px #000000;}

img                {width: 100%;
                    height: auto;
                    padding: 5px 5px;}
img.TEAM_Logo      {width: 25%;
                    height: auto;
                    padding: 5px 5px;}
img.banner         {width: 100%;
                    height: auto;}

.button {width:100px;
         padding: 5px;
         background: rgba(0, 0, 0, 0.6);
         border-radius:10px 10px 10px 10px;
         box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
         color: white;
         font-size: 12px;
         font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
         text-decoration: none;
         text-align:center;
         vertical-align: middle;}
.button:hover  {background: rgba(0, 0, 0, 0.6);
                color: #ccc;}
.button:active {background: rgba(0, 0, 0, 0.6);}
.button_spacer {width:100px;
                background:transparent;
                background-color: transparent;
                border: 5px solid 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: "Helvetica Neue",  Helvetica, Arial, Verdana, Geneva, sans-serif;  text-align:center; font-size: 12px;
                         vertical-align: middle;}

.button_sm              {width:100px;
                         padding: 5px; margin: 5px;
                         background: rgba(0, 0, 0, 0.6);
                         border-radius:10px 10px 10px 10px;
                         box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
                         color: white;
                         font-size: 12px;
                         font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
                         text-decoration: none;
                         text-align:center;
                         vertical-align: middle;}

.wide_button {width:150px;
              height:66px;
              padding: 5px;
              background: rgba(0, 0, 0, 0.6);
              border-radius:10px 10px 10px 10px;
              box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
              color: white;
              font-size: 12px;
              font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
              text-decoration: none;
              text-align:center;
              vertical-align: middle;}
.wide_button:hover  {background: rgba(0, 0, 0, 0.6);
                     color: #ccc;}
.wide_button:active {background: rgba(0, 0, 0, 0.6);}
.wide_button_spacer {width:150px;
                     height:66px;
                     background:transparent;
                     background-color: transparent;
                     border: 5px solid transparent;}

.big_button  {width:200px;
              height:75px;
              padding: 5px;
              background: rgba(0, 0, 0, 0.6);
              border-radius:10px 10px 10px 10px;
              box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
              color: white;
              font-size: 18px;
              font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
              text-decoration: none;
              text-align:center;
              vertical-align: middle;}
.big_button:hover  {background: rgba(0, 0, 0, 0.6);
                    color: #ccc;}
.big_button:active {background: rgba(0, 0, 0, 0.6);}
.big_button_spacer {width:200px;
                    height:75px;
                    background:transparent;
                    background-color: transparent;
                    border: 5px solid transparent;}

.rpt_button  {width:250px;
              height:66px;
              padding: 5px;
              background: rgba(0, 0, 0, 0.6);
              border-radius:10px 10px 10px 10px;
              box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
              color: white;
              font-size: 14px;
              font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
              text-decoration: none;
              text-align:center;
              vertical-align: middle;}
.rpt_button:hover  {background: rgba(0, 0, 0, 0.6);
                    color: #ccc;}
.rpt_button:active {background: rgba(0, 0, 0, 0.6);}
.rpt_button_spacer {width:250px;
                    height:66px;
                    background:transparent;
                    background-color: transparent;
                    border: 5px solid transparent;}

.rpt_button_h2  {width:250px;
                 height:66px;
                 padding: 5px;
                 background: rgba(0, 0, 0, 0.6);
                 border-radius:10px 10px 10px 10px;
                 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
                 color: white;
                 font-size: 26px;
                 font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
                 text-decoration: none;
                 text-align:center;
                 vertical-align: middle;}
.rpt_button_h2:hover  {background: rgba(0, 0, 0, 0.6);
                       color: #ccc;}
.rpt_button_h2:active {background: rgba(0, 0, 0, 0.6);}