/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

.productcontainer
  {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  justify-items: center;
  -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-columns: 100px 300px 100px minmax(350px, 450px);
  grid-template-columns: 100px 300px 100px minmax(350px, 450px);
      grid-template-areas:
  "mentitle . womentitle ."
  "thumbnail1 mainimage thumbnail4 productdesc"
  "thumbnail2 mainimage thumbnail5 productdesc"
  "thumbnail3 mainimage thumbnail6 productdesc"
  " .         productsize   .      productdesc"
  ".          productsize  .       productorder";
  }

@media (max-width: 650px)
{
.productcontainer
  {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  justify-items: center;
  -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-columns: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
      grid-template-areas:
  "mainimage mainimage mainimage"
  "mentitle mentitle mentitle"
  "thumbnail1 thumbnail2 thumbnail3"
  "womentitle womentitle womentitle"
  "thumbnail4 thumbnail5 thumbnail6"
  "productorder productorder productorder"
  "productdesc  productdesc  productdesc"
  "productsize productsize productsize";
  }
}

@media (max-width: 850px) and (min-width:650px)
{
.productcontainer
  {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -ms-flex-line-pack:center;
      align-content:center;
  justify-items: center;
  -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-columns: 125px 300px 125px;
  grid-template-columns: 125px 300px 125px;
      grid-template-areas:
  "mentitle . womentitle"
  "thumbnail1 mainimage thumbnail4"
  "thumbnail2 mainimage thumbnail5"
  "thumbnail3 mainimage thumbnail6"
  ". productorder ."
  "productdesc  productdesc  productdesc"
  "productsize productsize productsize";
  }
}

.mainimage
{
-ms-grid-row: 2;
-ms-grid-row-span: 3;
-ms-grid-column: 2;
grid-area: mainimage;
-ms-grid-row-align: center;
    align-self: center;
-ms-grid-column-align: center;
    justify-self: center;
padding: 20px; 
}

.mentitle { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: mentitle; }
.womentitle { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: womentitle;}

.shirttitle
{
-ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
text-align: center;
padding-top: 30px;
}

.thumbnails 
{
text-align: center;
-ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
-ms-grid-column-align: center;
    justify-self: center;
padding-top: 10px;
}
 
.thumbnail1 { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: thumbnail1;}
.thumbnail2 { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: thumbnail2;}
.thumbnail3 { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: thumbnail3;}
.thumbnail4 { -ms-grid-row: 2; -ms-grid-column: 3; grid-area: thumbnail4;}
.thumbnail5 { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: thumbnail5;}
.thumbnail6 { -ms-grid-row: 4; -ms-grid-column: 3; grid-area: thumbnail6;}
 
.productdesc  { -ms-grid-row: 2; -ms-grid-row-span: 4; -ms-grid-column: 4; grid-area: productdesc; margin-right: 10px;}
.productorder { -ms-grid-row: 6; -ms-grid-column: 4; grid-area: productorder; }
.productsize  { -ms-grid-row: 5; -ms-grid-row-span: 2; -ms-grid-column: 2; grid-area: productsize; }
@media (max-width: 650px)
  {
.mainimage
  {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
.mentitle
  {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
.womentitle
  {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
.thumbnail1
  {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
.thumbnail2
  {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
.thumbnail3
  {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
.thumbnail4
  {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
.thumbnail5
  {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
  }
.thumbnail6
  {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
.productdesc
  {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
.productorder
  {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
.productsize
  {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
}
@media (max-width: 850px) and (min-width:650px)
  {
.mainimage
  {
    -ms-grid-row: 2;
    -ms-grid-row-span: 3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
.mentitle
  {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
.womentitle
  {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
.thumbnail1
  {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
.thumbnail2
  {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
.thumbnail3
  {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
  }
.thumbnail4
  {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }
.thumbnail5
  {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
.thumbnail6
  {
    -ms-grid-row: 4;
    -ms-grid-column: 3;
  }
.productdesc
  {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
.productorder
  {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
.productsize
  {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
}

.productsubtitle
{
font-family: 'Lato', serif;				font-size: 14pt;   color: #933b68;   letter-spacing: normal;
margin: auto;  margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px;   border-top: 0px;   border-left: 0px;   border-right: 0px;   border-style: dotted;   border-color: #481214;
}

.productpara
{
font-family: 'Poppins', sans-serif;		 font-size: 10pt;	 text-align:left;  letter-spacing: normal; 
font-weight: thin;
margin: auto; 
padding-left: 2em;		padding-right: 2em; 
vertical-align:middle;
}

.productlist
{
  display: -ms-grid;
  display: grid;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  justify-items: center;
  -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  margin-top: 50px;
}

.eachproduct:nth-child(odd)  { -ms-grid-column: 1; grid-column: 1;  }
.eachproduct:nth-child(even) { -ms-grid-column: 2; grid-column: 2;  }