html { margin: 0; padding: 0; width: 100%; height: 100%; background: #222; background-image: url('images/loading.gif'); background-position: center center; background-repeat: no-repeat; }
body { margin: 0; padding: 0; opacity: 0; color: white; font-family: 'Source Sans Pro', sans-serif; font-size: 15pt; letter-spacing: -0.025em; line-height: 1.75em; font-weight: 300; transition: all 0.8s; -webkit-transition: all 0.8s; }
body.loaded { opacity: 1; }
body.loaded #text>div { opacity: 1; }
body.loaded nav li { -webkit-animation: nav-icons 0.5s ease-in-out 1.5s backwards; animation: nav-icons 0.5s ease-in-out 1.5s backwards; }
body.loaded nav li:nth-child(2) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }
body.loaded nav li:nth-child(3) { -webkit-animation-delay: 2.0s; animation-delay: 2.0s; }
body.loaded nav li:nth-child(4) { -webkit-animation-delay: 2.25s; animation-delay: 2.25s; }
body.loaded nav li:nth-child(5) { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }
/*body.hinge #text { -webkit-animation: flipOutX 1s ease-in-out 0s forwards; -webkit-backface-visibility: visible !important; animation: flipOutX 1s ease-in-out 0s forwards; backface-visibility: visible !important; }*/
body.hinge #text { -webkit-animation: zoomOut 0.5s ease-in 0s forwards; animation: zoomOut 0.5s ease-in 0s forwards; }
body.hinge #bgImages:after { -webkit-transition: background-color 3s ease-out 0s; transition: background-color 3s ease-out 0s; background-color: transparent; }
#bgImages,
#bgImages:after { position: fixed; top: 0; bottom: 0; right: 0; left: 0; }
#bgImages:after { content: ''; background: rgba(0,0,0,0.4) url('images/pattern.png') repeat top left; z-index: 5; }
#bgImages div { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background-size: cover; background-color: transparent; opacity: 0; }
#bgImages div:last-child { opacity: 1; }
#bgImages div.grow { -webkit-animation: growing 9s ease-in-out 2s forwards; -webkit-animation-iteration-count: 1; animation: growing 9s ease-in-out 2s forwards;  animation-iteration-count: 1; }
#text { z-index: 30; position: fixed; left: 0; right: 0; bottom: 0; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#text>div { background-color: rgba(0,0,0,0.6); padding: 20px 30px; opacity: 0; border-radius: 0px; text-align: center; -webkit-transition: all 1s ease 1.1s; transition: all 1s ease 1.1s; }
h1 { font-size: 9.2em; font-weight: 900; letter-spacing: -0.02em; line-height: 1; margin: 0; margin-bottom: 45px; padding: 0; }
nav ul { margin: 0; padding: 0; }
nav li { display: inline-block; color: #fff; margin-right: 10px; margin-bottom: 10px; }
nav li:last-child { margin-right: 0; }
nav a { color: #fff; display: block; border-radius: 100%; padding: 1.1em; line-height: 1; border: 1px solid white; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; }
nav a:hover { background-color: rgba(255,255,255,0.3); -webkit-transform: scale(1.1); transform: scale(1.1); }
nav a i { width: 40px; height: 40px; }

@media screen and (min-width: 1px) and (max-width: 580px) {
	h1 { font-size: 6em; }
	nav li { zoom: 0.7; }
}
@media screen and (min-width: 1px) and (max-width: 380px) {
	h1 { font-size: 4em; margin-bottom: 25px; }
	nav li { zoom: 0.5; }
}
@media screen and (min-height: 1px) and (max-height: 300px) {
	h1 { font-size: 4em; margin-bottom: 25px; }
	nav li { zoom: 0.5; }
}

@-webkit-keyframes growing { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.1); } }
@keyframes growing { from { transform: scale(1); } to { transform: scale(1.1); } }

@-webkit-keyframes nav-icons { 0% { -webkit-transform: translate3d(0,1em,0); opacity: 0; } 100% { -webkit-transform: translate3d(0,0,0); opacity: 1; } }
@keyframes nav-icons { 0% { transform: translate3d(0,1em,0); opacity: 0; } 100% { transform: translate3d(0,0,0); opacity: 1; } }

@-webkit-keyframes hinge {
  0% { -webkit-transform-origin: 10% 10%; -webkit-animation-timing-function: ease-in-out; }
  20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: 10% 10%; -webkit-animation-timing-function: ease-in-out; }
  40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: 10% 10%; -webkit-animation-timing-function: ease-in-out; opacity: 1; }
  100% { -webkit-transform: translate3d(0, 700px, 0); opacity: 0; }
}
@keyframes hinge {
  0% { transform-origin: 10% 10%; animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: 10% 10%; animation-timing-function: ease-in-out; }
  40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: 10% 10%; animation-timing-function: ease-in-out; opacity: 1; }
  100% { transform: translate3d(0, 700px, 0); opacity: 0; }
}

@-webkit-keyframes flipOutX {
  0% { -webkit-transform: perspective(400px); }
  30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
}
@keyframes flipOutX {
  0% { transform: perspective(400px); }
  30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  100% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
}


@-webkit-keyframes zoomOut {
  0% { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(5.3, 5.3, 5.3); }
  100% { opacity: 0; }
}
@keyframes zoomOut {
  0% { opacity: 1; }
  50% { opacity: 0; transform: scale3d(5.3, 5.3, 5.3); }
  100% { opacity: 0; }
}