/*
             *     ,MMM8&&&.            *
                  MMMM88&&&&&    .
                 MMMM88&&&&&&&
     *           MMM88&&&&&&&&
                 MMM88&&&&&&&&
                 'MMM88&&&&&&'
                   'MMM8&&&'      *
          |\___/|
          )     (             .              '
         =\     /=
           )===(       *
          /     \
          |     |
         /       \
         \       /
  _/\_/\_/\__  _/_/\_/\_/\_/\_/\_/\_/\_/\_/\_
  |  |  |  |( (  |  |  |  |  |  |  |  |  |  |
  |  |  |  | ) ) |  |  |  |  |  |  |  |  |  |
  |  |  |  |(_(  |  |  |  |  |  |  |  |  |  |
  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
*/

body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  font-weight: normal;
  font-family: Open Sans, Sans-Serif;
  text-rendering: optimizeLegibility;
}

.preload * {
  -webkit-transition: none !important;
          transition: none !important;

  -webkit-filter: none !important;
          filter: none !important;
}

#header {
  position: absolute;
  float: left;
  margin: 3%;
  text-align: right;
  color: #BBB;
}

#title {
  margin: 0;
  padding: 0;
  font-size: 300%;
}

#author {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

#photo-use {
  position: absolute;
  float: left;
  bottom: 0;
  margin: 20% 0 0 3%;
  width: 27%;
  text-align: left;
  font-size: 80%;
  color: #666;
  text-decoration: none;
}

#photo-use-header {
  margin-bottom: 30;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
            user-select: none;
}

#photo-use-body {
  display: none;

  margin-bottom: 30;
}

#photo-use-close {
  float: right;
  font-weight: bold;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
            user-select: none;
}

#photo-use-footer {
  margin-bottom: 30;
}

#images {
  float: right;
  padding: 3% 8%;
  width: 550px;
  height: 550px;
}

.verticaltext {
  color: #f44;
  font-size: 3em;
  -webkit-transform: rotate(-90deg) translateX(177px) translateY(5px);
          transform: rotate(-90deg) translateX(177px) translateY(5px);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

#images img {
  max-width: 100%;
  height: auto;
  width: auto;

  padding-top: 3%;
  padding-bottom: 3%;

  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#images img:hover {
  -webkit-filter: blur(6px) grayscale(100%);
          filter: blur(6px) grayscale(100%);
}

/* Fancy little trick to obfuscate an email from spammers */
.obfuscateEmail:before {
  content: attr(dsite) "\0040" attr(duser);
  unicode-bidi: bidi-override;
  direction: rtl;
}

@media only screen and (max-width: 767px) {
  #images {
    padding: 16% 8%;
  }

  #photo-use {
    right: 0;
    bottom: 2%;
    left: 0;
    margin: 0;
    width: 100%;
    padding: 1%;
    font-size: 60%;
    text-align: center;
  }

  #photo-use-header {
    padding-bottom: 4px;
    margin-bottom: 0;
  }

  #photo-use-body {
    position: absolute;
    left: 3%;
    bottom: 3%;
    padding: 10px;
    width: 50%;
    text-align: left;
    background-color: white;
    border: 1.5px solid #666;
  }

  #photo-use-footer {
    margin-bottom: 0;
  }
}