html,
body {
  height: 100%;
  background: black;
}

h1 {
  color: gold;
  text-align: center;
  font-size: 5vw;
  font-family: 'Jura', sans-serif;
  text-shadow:2px 2px 4px white;
}

h2 {
  font-style: bold;
  font-size: 3vw;
  background-color: rgba(0, 0, 0, 0.5);
}


h3 {
  color: gold;
  text-align: center;
  font-size: 3vw;
  font-family: 'Jura', sans-serif;
  text-shadow:2px 2px 4px white;
}

a {
  text-shadow: none;
  color: white;
  text-decoration: none;
}

.l-table {
  background: black;
  display: table;
  height: 100%;
  width: 100%;
}

.l-table-cell {
  display: table-cell;
  vertical-align: middle;
  border: 2px solid black;
}

.squarebox {
  background: gold;
  margin: auto;
}

.square-img {
   width: 100%;
}

.thumb {
  margin: .2% .1% 0.1% .2%;
  float: left;
  display: table-cell; 
  width: 33%;
  height: 33%;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain; /* you change this to "contain" if you don't want the images to be cropped */
  color:#fff;
  background: transparent;
  background-image: url('img/pentagold.jpg');
}

.square {
    float:left;
    position: relative;
    width: 33%;
    padding-bottom : 33%; /* = width for a 1:1 aspect ratio */
    margin:.15%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.s-content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;
    color: white;
    text-align: center;
}

.s-table {
    display:table;
    width:100%;
    height:100%;
}

.s-table-cell{
    display:table-cell;
    vertical-align:middle;
    background-image: url('');
}


.bg-img {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    color:#fff;
    background-image: url('img/pentagold.jpg');
}

@media (orientation: landscape) {
  .squarebox {
    width: 90vh;
    height: 90vh;
  }

}
@media screen and (orientation: portrait) {
  .squarebox {
    width: 90vw;
    height: 90vw;
  }
}


span.dino { display: none;}