@font-face {
  font-family: der-mueller;
  src: url("roboto/Roboto-Thin.ttf");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: der-mueller;
  src: url("roboto/Roboto-Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: der-mueller;
  src: url("roboto/Roboto-Regular.ttf");
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: der-mueller;
  src: url("roboto/Roboto-Light.ttf");
  font-weight: medium;
  font-style: italic;
}

@font-face {
  font-family: der-mueller;
  src: url("roboto/Roboto-Medium.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: der-mueller;
  src: url("roboto/Roboto-Medium.ttf");
  font-weight: bold;
  font-style: italic;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: der-mueller;
  background-color: #222;
}

.square-photos {
  float:left;
  background-color: #e2e2e2;
  position: relative;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  width: 100%;
  padding-bottom: 100%;
}

@media (min-width: 768px) {
  .square-photos {
    width: 50%;
    padding-bottom: 50%;
  }
}

@media (min-width: 1200px) {
  .square-photos {
    width: 33.33333333333333333333333333%;
    padding-bottom: 33.33333333333333333333333333%;
  }
}

/* shadow */
.square-photos > div {
  z-index: 80;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 3em;
}

@media (min-width: 768px) {
  .square-photos > div:hover{
    opacity: 1;
    background:rgba(0,0,0,0.7);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
  }
}

@media (max-width: 767px) {
   .square-photos > div {
      opacity: 1;
      background:rgba(0,0,0,0.2);
      font-size: 2.7em;
   }
}

/* text-wrapper */
.square-photos > div > div {
  color: #e2e2e2;
  width: 100%;
  height: 100%;
  line-height: 100%;
  position: absolute;
  text-align: center;
  font-weight: 300;
  -webkit-text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  -moz-text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  display: table;
}

.square-photos > div > div > div {
  display: table-cell;
  vertical-align: middle;
}