.letop{
  height: 200px;
}

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: flex-end;
  justify-content: center; /* Optional, to align inner items 
                              horizontally inside the column */
}

/**
 *  Do NOT include this part into your stylesheet.
 *  "flex: 1" or "flex-grow: 1" is added to make the inner div
 *  - Which is also a flex-item - take up all the horizontal space
 *  available space inside the flex container (.col-* elements)
 */
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
  /* flex: 1; */
  flex-grow: 1;
}

.swatch{
    display: flex;
  flex-direction: column;
  align-items: stretch;
}

.prodcol{
  display:flex; flex-direction: column;
  justify-content: space-between; 
  height: 100%; 
}

.prodcol div:nth-child(1){
  height: 273px;
  flex:0;
}

.prodcol div:nth-child(2){
  flex:1;
  height:158px;
}

.prodcol div:nth-child(3){
  flex:0;
}

footer{
  background-color: black;
  height: 47px;
  color: white;
  text-align: center;
  margin-top: 200px;
  padding-top: 12px;
}

@media (max-width: 991px) {
    img.mcelogo{
    width:50%; 
    padding-top: none;
  }

  img.mmlogo{
   height: 84%;
  }

  img.pluploadlogo{
    width:38%;
  }
}

@media (min-width: 889px) {
    img.mcelogo{
    width:90%; 
    padding-top: 17%;
  }

  img.mmlogo{
   height: 84%;
  }

  img.pluploadlogo{
    width:72%;
  }
}