.content {
  padding: 10px 10px;
  margin: 0 0 0 20px;

}

/* --------------------------- Gallery Image Effects --------------------- */

* {box-sizing: border-box;}

.boxmain {
  position: relative;
  width: 50%;
  max-width: 175px;
  float: left; 
  margin: 15px 15px 15px 0;
}

.thumby {
  display: block;
  width: 100%;
  height: auto;
  border-style: dotted;
}

div.boxmain a {
  color: #AE2448;
}

div.boxmain a:hover {
  color: #996666;
}

.thumby:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

.thumb-over {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  font-size: 30px;
  padding: 5px;
  text-align: center;
}

.boxmain:hover .thumb-over {
  opacity: 1;
}

/* ----------------------- Corner box code ----------------- */

/* SOURCE: https://stackoverflow.com/questions/14387690/how-can-i-show-only-corner-borders ---- */
.box-left {
  --b: 5px;   /* thickness of the border */
  --c: #AE2448;   /* color of the border */
  --w: 20px;  /* width of border */
  

  border: var(--b) solid #0000; /* space for the border */
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
  padding: 0 10px 10px 10px;
  
  height: auto; 
  
}

  
.box-right {
  --b: 5px;   /* thickness of the border */
  --c: #AE2448;   /* color of the border */
  --w: 20px;  /* width of border */
  

  border: var(--b) solid #0000; /* space for the border */
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
  padding: 0 10px;
}

.box-right h3 {
  color: #AE2448;
}