/****** 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;
  text-align: center;
  background: url('../images/bkg-subs.gif');
}
.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%);
}
.buttona img, .buttonb img, .buttonc img, .buttond img, .buttone img, .buttonf img {
	  width:152px;
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
	  width:157px;
	  /*max-width:100%; */
}

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

/****** VIEWPORTS START ******/	
@media (min-width: 320px) {
  .column {
    --width-mobile: var(--width-mobile);
    --width: var(--width-mobile);
  }
  .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:157px;
}
}

@media (min-width: 350px) {
    .column {
    --width-mobile: var(--width-mobile);
    --width: var(--width-mobile);
  }
  .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:157px;
}
}

@media (min-width: 512px) {
    .column {
    --width-tabletp: var(--width-tablet);
    --width: var(--width-tabletp);
  }
  .buttonhomea img, .buttonhomeb img, .buttonhomec img {
	  width:100%;
	  max-width:157px;
}
}

@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 {
	  width:100%;
	  max-width:315px;
}
}

@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:315px;
}
}

/****** 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%;
}
.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 ******/