article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden] {
  display: none; }

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

a:focus {
  outline: thin dotted; }

a:active, a:hover {
  outline: 0; }

h1 {
  font-size: 2em; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: 700; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: \201C \201D \2018 \2019; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0; }

button, input {
  line-height: normal; }

button, html input[type=button],
input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], input[disabled] {
  cursor: default; }

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0; }

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  vertical-align: top; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body, figure {
  margin: 0; }

legend, button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

*, *:before, *:after {
  box-sizing: border-box; }

body,
html {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', 'Helvetica', sans-serif; }

a {
  text-decoration: none;
  color: #888; }
  a:visited {
    color: #888; }
  a:hover {
    color: #444; }

header {
  text-align: center;
  padding: 60px 0;
  font-weight: 900; }
  header h1 {
    font-size: 60px;
    color: #222222;
    margin: 0 auto; }
  header p {
    font-weight: 300;
    color: #aaa;
    margin-top: 0; }

.image1 {
  background: url(../images/img1.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image1:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image2 {
  background: url(../images/img2.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image2:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image3 {
  background: url(../images/img3.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image3:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image4 {
  background: url(../images/img4.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image4:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image5 {
  background: url(../images/img5.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image5:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image6 {
  background: url(../images/img6.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image6:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image7 {
  background: url(../images/img7.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image7:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image8 {
  background: url(../images/img8.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image8:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image9 {
  background: url(../images/img9.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image9:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image10 {
  background: url(../images/img10.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image10:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image11 {
  background: url(../images/img11.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image11:before {
    content: '';
    display: block;
    padding-top: 100%; }

.image12 {
  background: url(../images/img12.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover; }
  .image12:before {
    content: '';
    display: block;
    padding-top: 100%; }

.imagePanel {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  display: none;
  background: url("images/img1.jpg") center;
  background-size: cover; }

.imagePanel.animated {
  -webkit-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out; }

.imagePanel.full {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important; }

.button {
  opacity: 0;
  position: absolute;
  width: 15%;
  height: 400px;
  z-index: 200;
  color: white;
  -webkit-transition: opacity 0.5s ease-in-out;
          transition: opacity 0.5s ease-in-out; }

.button.delay {
  display: block !important;
  opacity: 1 !important; }

.fa {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); }

.closeButton {
  opacity: 0;
  width: 75px;
  height: 75px;
  z-index: 20;
  top: 20px;
  right: 0;
  cursor: pointer;
  text-align: center; }
  .closeButton .fa {
    position: relative;
    top: -webkit-calc(50% - 16px);
    top: calc(50% - 16px); }

.backButton {
  top: 30%;
  left: 0;
  text-align: center;
  cursor: pointer;
  padding-top: 10%; }
  .backButton .fa {
    padding-right: 20%; }

.nextButton {
  top: 30%;
  right: 0;
  text-align: center;
  cursor: pointer;
  padding-top: 10%; }
  .nextButton .fa {
    padding-left: 20%; }

.bottomContainer {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 120px;
  z-index: 20;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  padding-top: 10px; }

.toggleCaption {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  cursor: pointer;
  background-color: #222;
  border-radius: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
  .toggleCaption .fa {
    font-size: 24px;
    position: relative;
    top: -webkit-calc(50% - 12px);
    top: calc(50% - 12px);
    left: -webkit-calc(50% - 10px);
    left: calc(50% - 10px); }

.container {
  width: 100%;
  padding: 0 33.3%; }

figcaption {
  position: absolute;
  width: 33%;
  z-index: 300;
  bottom: 120px;
  background-color: #222; }
  figcaption #caption {
    display: none;
    padding: 2% 5%; }
    figcaption #caption #captionTitle {
      font-family: 'Open Sans','helvetica',sans-serif;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.5em;
      text-decoration: none;
      color: white;
      margin-bottom: 5px; }
    figcaption #caption #captionBody {
      font-family: 'Open Sans','helvetica',sans-serif;
      font-size: 14px;
      font-weight: 300;
      line-height: 1.5em;
      text-decoration: none;
      color: white;
      margin-top: 5px;
      margin-bottom: 16px; }