body {
  font-family: 'philtype';
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}

.content {
  display: inline-block;
  padding:           0rem;
  margin:            0rem;
  border-radius:     0rem;
  padding-bottom:    0rem;
  margin-top:        0rem;
  margin-bottom:     0rem;
  max-width:        100vw;
}

.img-container {
    position: relative;
    float: right;
}

.flex-container {
 /*  width:         100%; */
  float:        unset; /* this overrides the float right image preference */
  display:       flex;
  flex-direction: row;
  flex-wrap:     wrap;
  background:   unset;
  border-radius:  0px;
  padding:        0px;
  margin:         0px;
}

/* Image styles */

img.toggle {
  transition: width 0.5s, position 0.5s;
  float:  right;
  margin:     0rem;
  max-width: 20%;
  width: 100px;
  cursor: zoom-in;
}

img.thumb {
  height: 100px;
  transition: width 0.5s, position 0.5s;
  cursor: zoom-in;
}

img.big {
  border-radius: 20px;
  width:        unset;
  height:       unset;
  max-width:    100vw;
  max-height:   100vh;
  transition: width 0.5s, position 0.5s;
}