.hat, .hat-info {
  height: 178.5px;
  margin: 15px 0;
}
.hat-info-back {
  height: 278.5px;
  margin: 15px 0;
}
.hat {
  background: #FFF;
}

.hat-info {
  box-shadow: none;
}

.small-text {
  font-size: 1.05em;
  line-height: 1.4em;
}

.hat-info.white {
  background-color: #FFF;
  border: 2px solid #000;
}

.hat-info.red {
  background-color: #BD1E1E;
  border: 1px solid #BD1E1E;
  color: #FFF;
}

.hat-info.yellow {
  background-color: #FFD800;
  border: 1px solid #FFD800;
}

.hat-info.black {
  background-color: #000;
  border: 1px solid #000;
  color: #FFF;
}

.hat-info.green {
  background-color: #25C300;
  border: 1px solid #25C300;
}

.hat-info.blue {
  background-color: #006CFF;
  border: 1px solid #006CFF;
  color: #FFF;
}


.flip-container {
  cursor: pointer;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.flip-container .flip .back {
  transform: rotateY(0deg);
}

.flip-container .flip .front {
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 326px;
  height: 308.5px;
}

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front, .back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;


}
.stextwhite{overflow-y: scroll;   background-color: #ffffff;
  border: 1px solid #000;
  color: #000;}

.stextred{overflow-y: scroll;   background-color: #BD1E1E;
  border: 1px solid #BD1E1E;
  color: #FFF;}

  .stextyellow{overflow-y: scroll;   background-color: #FFD800;
  border: 1px solid #FFD800;}

      .stextblack{overflow-y: scroll;  background-color: #000;
  border: 1px solid #000;
  color: #FFF;}

      .stextgreen{overflow-y: scroll;   background-color: #25C300;
  border: 1px solid #25C300;}

    .stextblue{overflow-y: scroll;   background-color: #006CFF;
  border: 1px solid #006CFF;
  color: #FFF;}

.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(-180deg);

}


/* Tablet */
@media(min-width: 768px){

  .hat, .hat-info {
    height: 162px;
    margin: 15px 0;
  }

  }
.hat-info-back {
  height: 128.5px;
  margin: 15px 0;
}

  .flip-container, .front, .back {
    width: 260px;
    height: 160px;
  }

  .hat-info-back {
  height: 212.5px;
  margin: 15px 0;


}


/* Desktop */
@media(min-width:992px){

  .hat, .hat-info {
    height: 112px;
    margin: 15px 0;
  }

    }
.hat-info-back {
  height: 262px;
  margin: 15px 0;
}


  .flip-container, .front, .back {
    width: 260px;
    height: 282px;
  }

  .small-text {
    font-size: .9em;
    line-height: 1.25em;
  }

}


/* Large Desktop */
@media(min-width:1200px){

  .hat, .hat-info {
    height: 178.5px;
    margin: 15px 0;
  }

  .flip-container, .front, .back {
    width: 326px;
    height: 308.5px;
  }

  .small-text {
    font-size: 1.1em;
    line-height: 1.4em;
  }


}


/* Print */
@media print {


}