/****** SHARED STYLES START ******/
.buttoncontainer > ::after, .buttoncontainer > ::before {box-sizing: border-box;}
/****** SHARED STYLES END ******/



/****** GRIDS START ******/
.buttoncontainer { 
  margin: 0 auto;
  top: 0px;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
  text-align: center;
  background: url('../images/bkg-subs-deep.gif');
}

.subscribecontainer { 
  margin: 0 auto;
  top: 0px;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
  text-align: center;
}

.column {
  --columns: 12; /* number of columns in the grid system */
  --width: var(--width-mobile, 0); /* width of the element */
  padding: 0px;
  margin: 9px 1px 2px 1px;
  flex-basis: calc(var(--width) / var(--columns) * 94%);
}
.column-home {
  --columns: 3; /* number of columns in the grid system */
  --width: var(--width-mobile, 0); /* width of the element */
  padding: 0px;
  margin: 9px 1px 2px 1px;
  flex-basis: calc(var(--width) / var(--columns) * 94%);
}
.column-subscribe {
  --columns: 12; /* number of columns in the grid system */
  --width: var(--width-mobile, 0); /* width of the element */
  padding: 0px;
  margin: 9px 1px 2px 1px;
  flex-basis: calc(var(--width) / var(--columns) * 94%);
}
.buttona img, .buttonb img, .buttonc img, .buttond img, .buttone img, .buttonf img {
	  width:152px;
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
	  width:100%;
	  max-width:25px;
}
  .buttonsubscribe img {
	  width:100%;
	  max-width:210px;
	  padding: 0px;
}
.card__overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity:0;
    z-index:-1;
	transition:opacity .3s ease-in-out;
}

.card__title{
	font-family: Tw Cen MT, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
    /*font-size: 3.0vw; font size changes with viewport size */
	font-weight:bold;
	color:#FFF;
	font-size: 26px; 
	padding-top: 3px;
}

.card__description{
	font-family: Tw Cen MT, Helvetica, Arial, sans-serif;
	color:#FFF;
	font-size: 12px;
	font-weight:100;
	padding: 0px 6px 2px 6px;	
}

.card__subdescription{
	font-family: Tw Cen MT, Helvetica, Arial, sans-serif;
	color:#FFF;
	font-size: 12px;
	font-weight:100;
	padding: 0px 6px 2px 6px;
}

.card__subtext{
	font-family: Tw Cen MT, Helvetica, Arial, sans-serif;
	font-weight:100;
	color:#FFF;
	font-size: 16px;
	padding: 1px 14px 2px 14px;
}

.buttonhomea,.buttonhomeb,.buttonhomec,.buttonsubscribe {
  position:relative;
}

.buttonhomea:hover .card__overlay{
  opacity:1;
  z-index:1;
}
.buttonhomeb:hover .card__overlay{
  opacity:1;
  z-index:1;
}
.buttonhomec:hover .card__overlay{
  opacity:1;
  z-index:1;
}
.buttonsubscribe:hover .card__overlay{
  opacity:1;
  z-index:1;
}

/****** GRIDS END ******/

/****** VIEWPORTS START ******/	
@media (min-width: 150px) {
  .column {
    --width-mobile: var(--width-mobile);
    --width: var(--width-mobile);
	margin: 9px 1px 0px 1px;
}
  .column-subscribe {
    --width-mobile: var(--width-mobile);
    --width: var(--width-mobile);
    margin: 9px 1px 0px 1px;
}
  .buttona img, .buttonb img, .buttonc img, .buttond img, .buttone img, .buttonf img {
	  width:100%;
	  max-width:152px;
}
  .buttonhomea img, .buttonhomeb img, .buttonhomec img {
	  width:100%;
	  max-width:25px;
}
  .buttonsubscribe img {
	  width:100%;
	  max-width:210px;
	  padding: 0px;
}
.card__overlay{
  opacity:1;
  z-index:1;
}
  .card__title{
	font-size: 26px; 
	padding-top: 3px;
}
  .card__description{
	font-size: 12px;
	font-weight:100;
	padding: 0px 6px 2px 6px;	
}
  .card__subdescription{
	font-size: 12px;
	font-weight:100;
	padding: 0px 6px 2px 6px;
}
  .card__subtext{
	display:none;
}
  #subcontainer{
	background-color:#c8102e;
	-webkit-background-image:linear-gradient(140deg,#c8102e,#850101);
	-moz-background-image:linear-gradient(140deg,#c8102e,#850101);
	-ms-background-image:linear-gradient(140deg,#c8102e,#850101);
	-o-background-image:linear-gradient(140deg,#c8102e,#850101);
	background-image:linear-gradient(140deg,#c8102e,#850101);	  
  }
}

@media (min-width: 350px) {
  .column {
	  margin: 9px 1px 0px 1px;
}
  .column-subscribe {
	  margin: 9px 1px 0px 1px;
}
  .buttona img, .buttonb img, .buttonc img, .buttond img, .buttone img, .buttonf img {
	  width:100%;
	  max-width:152px;
}
  .buttonhomea img, .buttonhomeb img, .buttonhomec img, .buttonsubscribe img {
	  width:100%;
	  max-width:25px;
}
  .buttonsubscribe img {
	  width:100%;
	  max-width:210px;
	  padding: 0px;
}
  .card__title{
	font-size: 30px; 
	padding-top: 4px;
}
  .card__description{
	font-size: 14px;
	font-weight:100;
	padding: 0px 6px 2px 6px;	
}
  .card__subdescription{
	font-size: 14px;
	font-weight:100;
	padding: 0px 6px 2px 6px;
}
  .card__subtext{
	display:none;
}
  #subcontainer{
	background-color:#c8102e;
	-webkit-background-image:linear-gradient(140deg,#c8102e,#850101);
	-moz-background-image:linear-gradient(140deg,#c8102e,#850101);
	-ms-background-image:linear-gradient(140deg,#c8102e,#850101);
	-o-background-image:linear-gradient(140deg,#c8102e,#850101);
	background-image:linear-gradient(140deg,#c8102e,#850101);	  
  }
}

@media (min-width: 540px) {
  .column {
    --width-tablet: var(--width-mobile);
    --width: var(--width-tablet);
	margin: 9px 1px 2px 1px;
}
  .column-subscribe {
  margin: 9px 1px 2px 1px;
  flex-basis: 97%;
  --width-tabletp: var(--width-tablet);
  --width: var(--width-tabletp);
}
  .buttonhomea img, .buttonhomeb img, .buttonhomec img, .buttonsubscribe img {
	  width:100%;
	  max-width:157px;
	  padding-bottom: 8px;
}
  .buttonsubscribe img {
	  width:100%;
	  max-width:370px;
	  padding: 11px;
}
.card__overlay{
  opacity:0;
}
  .card__title{
	font-size: 30px; 
	padding-top: 10px;
}
  .card__description{
	font-size: 18px;
	font-weight:bold;
	padding: 18px 8px 2px 8px;	
}
  .card__subdescription{
	font-size: 18px;
	font-weight:bold;
	padding: 8px 14px 2px 14px;
}
  .card__subtext{
	display:block;
	font-size: 14px;
	padding: 1px 12px 2px 14px;
}
}

@media (min-width: 650px) {
  .column {
    --width-tablet: var(--width-mobile);
    --width: var(--width-tablet);
  }
  .buttona img, .buttonb img, .buttonc img, .buttond img, .buttone img, .buttonf img {
	  width:100%;
	  max-width:152px;
}
  .buttonhomea img, .buttonhomeb img, .buttonhomec img, .buttonsubscribe img {
	  width:100%;
	  max-width:180px;
	  padding-bottom: 10px;
}
  .buttonsubscribe img {
	  width:100%;
	  max-width:400px;
	  padding: 11px;
}
  .card__title{
	font-size: 34px; 
	padding-top: 14px;
}
  .card__description{
	font-size: 22px;
	padding: 22px 12px 2px 12px;	
}
  .card__subdescription{
	font-size: 22px;
	padding: 8px 14px 2px 14px;
}
  .card__subtext{
	font-size: 14px;
	padding: 1px 12px 2px 14px;
}
}

@media (min-width: 900px) {
  .column {
    --width-desktop: var(--width-tablet);
    --width: var(--width-desktop);
  }
  .buttona img, .buttonb img, .buttonc img, .buttond img, .buttone img, .buttonf img {
	  width:100%;
	  max-width:152px;
}
  .buttonhomea img, .buttonhomeb img, .buttonhomec img, {
	  width:100%;
	  max-width:220px;
	  padding-bottom: 14px;
}
  .buttonsubscribe img {
	  width:100%;
	  max-width:450px;
	  padding: 11px;
}
  .card__title{
	font-size: 38px; 
	padding-top: 14px;
}
  .card__description{
	font-size: 24px;
	padding: 26px 12px 2px 12px;	
}
  .card__subdescription{
	font-size: 24px;
	padding: 8px 14px 2px 14px;
}
  .card__subtext{
	font-size: 16px;
	padding: 1px 12px 2px 14px;
}
}

/****** VIEWPORTS START ******/	

/****** SECTIONS START ******/	
.buttonhomea {
  --width-mobile: 12;
  --width-tabletp: 4;
  --width-tablet: 4;
  --width-desktop: 4;
  height: 100%;
}
.buttonhomeb {
  --width-mobile: 12;
  --width-tabletp: 4;
  --width-tablet: 4;
  --width-desktop: 4;
  height: 100%;
}
.buttonhomec {
  --width-mobile: 12;
  --width-tabletp: 4;
   --width-tablet: 4;
  --width-desktop: 4;
  height: 100%;
}
.buttonsubscribe {
  --width-mobile: 12;
  --width-tabletp: 12;
   --width-tablet: 12;
  --width-desktop: 12;
  height: 100%;
}
.buttona {
  --width-mobile: 6;
  --width-tabletp: 6;
  --width-tablet: 4;
  --width-desktop: 2;
  height: 100%;
}
.buttonb {
  --width-mobile: 6;
  --width-tabletp: 6;
  --width-tablet: 4;
  --width-desktop: 2;
  height: 100%;
}
.buttonc {
  --width-mobile: 6;
  --width-tabletp: 6;
   --width-tablet: 4;
  --width-desktop: 2;
  height: 100%;
}
.buttond {
  --width-mobile: 6;
  --width-tabletp: 6;
  --width-tablet: 4;
  --width-desktop: 2;
  height: 100%;
}
.buttone {
  --width-mobile: 6;
  --width-tabletp: 6;
  --width-tablet: 4;
  --width-desktop: 2;
  height: 100%;
}
.buttonf {
  --width-mobile: 6;
  --width-tabletp: 6;
  --width-tablet: 4;
  --width-desktop: 2;
  height: 100%;
}
/****** SECTIONS END ******/