/******************************************************************
Theme Name: Name
Theme URI: http://www.959designs.com
Description: Custom theme built by 959Designs
Author: Steve Stillwell
Author URI: http://www.959Designs.com
Version: 1.3
Tags: flexble-width, responsive, flat design
********************************************************************/
/* CSS Document */
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border-style: none; }

body {
  line-height: 1; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: normal; }

ol, ul {
  list-style: none; }

blockquote {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {
  text-decoration: line-through; }

img {
  border: 0;
  border-style: none;
  /*max-width: 100%; max-height: 100%*/ }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a {
  text-decoration: none; }

/*
Site Name:  (mixins)
Author: Steve Stillwell (959 Designs)

Stylesheet: Mixins & Constants Stylesheet
******************************************************************/
/*
*********************/
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*
TOOLS
*********************/
/*
COLORS 
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/*********************
TYPOGRAPHY
*********************/
/*	@font-face {
    	font-family: 'Font Name';
    	src: url('library/fonts/font-name.eot');
    	src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
    	font-weight: normal;
    	font-style: normal;
	}
*/
/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
  font-style: italic; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

span.bold {
  font-weight: 700; }

span.boldital {
  font-weight: 700;
  font-style: italic; }

span.ital {
  font-style: italic; }

/*********************
TRANISTION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdue it.
*********************/
/* @include cssgradient(#dfdfdf,#f8f8f8); */
/*
Font Mixins
*********************/
/*
Prefixes Mixins
*********************/
/*
Vertical Align Anything
*********************/
/*
Other CSS3 Mixins
*********************/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }

  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }

  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); } }

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg); }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg); }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg); }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); } }

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }

  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }

  70% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px); }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); } }

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

/* animation sets */
/* move from / to  */
.pt-page-moveToLeft {
  -webkit-animation: moveToLeft .6s ease both;
  animation: moveToLeft .6s ease both; }

.pt-page-moveFromLeft {
  -webkit-animation: moveFromLeft .6s ease both;
  animation: moveFromLeft .6s ease both; }

.pt-page-moveToRight {
  -webkit-animation: moveToRight .6s ease both;
  animation: moveToRight .6s ease both; }

.pt-page-moveFromRight {
  -webkit-animation: moveFromRight .6s ease both;
  animation: moveFromRight .6s ease both; }

.pt-page-moveToTop {
  -webkit-animation: moveToTop .6s ease both;
  animation: moveToTop .6s ease both; }

.pt-page-moveFromTop {
  -webkit-animation: moveFromTop .6s ease both;
  animation: moveFromTop .6s ease both; }

.pt-page-moveToBottom {
  -webkit-animation: moveToBottom .6s ease both;
  animation: moveToBottom .6s ease both; }

.pt-page-moveFromBottom {
  -webkit-animation: moveFromBottom .6s ease both;
  animation: moveFromBottom .6s ease both; }

/* fade */
.pt-page-fade {
  -webkit-animation: fade .7s ease both;
  animation: fade .7s ease both; }

/* move from / to and fade */
.pt-page-moveToLeftFade {
  -webkit-animation: moveToLeftFade .7s ease both;
  animation: moveToLeftFade .7s ease both; }

.pt-page-moveFromLeftFade {
  -webkit-animation: moveFromLeftFade .7s ease both;
  animation: moveFromLeftFade .7s ease both; }

.pt-page-moveToRightFade {
  -webkit-animation: moveToRightFade .7s ease both;
  animation: moveToRightFade .7s ease both; }

.pt-page-moveFromRightFade {
  -webkit-animation: moveFromRightFade .7s ease both;
  animation: moveFromRightFade .7s ease both; }

.pt-page-moveToTopFade {
  -webkit-animation: moveToTopFade .7s ease both;
  animation: moveToTopFade .7s ease both; }

.pt-page-moveFromTopFade {
  -webkit-animation: moveFromTopFade .7s ease both;
  animation: moveFromTopFade .7s ease both; }

.pt-page-moveToBottomFade {
  -webkit-animation: moveToBottomFade .7s ease both;
  animation: moveToBottomFade .7s ease both; }

.pt-page-moveFromBottomFade {
  -webkit-animation: moveFromBottomFade .7s ease both;
  animation: moveFromBottomFade .7s ease both; }

/* move to with different easing */
.pt-page-moveToLeftEasing {
  -webkit-animation: moveToLeft .7s ease-in-out both;
  animation: moveToLeft .7s ease-in-out both; }

.pt-page-moveToRightEasing {
  -webkit-animation: moveToRight .7s ease-in-out both;
  animation: moveToRight .7s ease-in-out both; }

.pt-page-moveToTopEasing {
  -webkit-animation: moveToTop .7s ease-in-out both;
  animation: moveToTop .7s ease-in-out both; }

.pt-page-moveToBottomEasing {
  -webkit-animation: moveToBottom .7s ease-in-out both;
  animation: moveToBottom .7s ease-in-out both; }

/********************************* keyframes **************************************/
/* move from / to  */
@-webkit-keyframes moveToLeft {
  to {
    -webkit-transform: translateX(-100%); } }

@keyframes moveToLeft {
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@-webkit-keyframes moveFromLeft {
  from {
    -webkit-transform: translateX(-100%); } }

@keyframes moveFromLeft {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@-webkit-keyframes moveToRight {
  to {
    -webkit-transform: translateX(100%); } }

@keyframes moveToRight {
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@-webkit-keyframes moveFromRight {
  from {
    -webkit-transform: translateX(100%); } }

@keyframes moveFromRight {
  from {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@-webkit-keyframes moveToTop {
  to {
    -webkit-transform: translateY(-100%); } }

@keyframes moveToTop {
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@-webkit-keyframes moveFromTop {
  from {
    -webkit-transform: translateY(-100%); } }

@keyframes moveFromTop {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@-webkit-keyframes moveToBottom {
  to {
    -webkit-transform: translateY(100%); } }

@keyframes moveToBottom {
  to {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

@-webkit-keyframes moveFromBottom {
  from {
    -webkit-transform: translateY(100%); } }

@keyframes moveFromBottom {
  from {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

/* fade */
@-webkit-keyframes fade {
  to {
    opacity: 0.3; } }

@keyframes fade {
  to {
    opacity: 0.3; } }

/* move from / to and fade */
@-webkit-keyframes moveToLeftFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(-100%); } }

@keyframes moveToLeftFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@-webkit-keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(-100%); } }

@keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@-webkit-keyframes moveToRightFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(100%); } }

@keyframes moveToRightFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@-webkit-keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(100%); } }

@keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@-webkit-keyframes moveToTopFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateY(-100%); } }

@keyframes moveToTopFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@-webkit-keyframes moveFromTopFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateY(-100%); } }

@keyframes moveFromTopFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@-webkit-keyframes moveToBottomFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateY(100%); } }

@keyframes moveToBottomFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

@-webkit-keyframes moveFromBottomFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateY(100%); } }

@keyframes moveFromBottomFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

/* scale and fade */
.pt-page-scaleDown {
  -webkit-animation: scaleDown .7s ease both;
  animation: scaleDown .7s ease both; }

.pt-page-scaleUp {
  -webkit-animation: scaleUp .7s ease both;
  animation: scaleUp .7s ease both; }

.pt-page-scaleUpDown {
  -webkit-animation: scaleUpDown .5s ease both;
  animation: scaleUpDown .5s ease both; }

.pt-page-scaleDownUp {
  -webkit-animation: scaleDownUp .5s ease both;
  animation: scaleDownUp .5s ease both; }

.pt-page-scaleDownCenter {
  -webkit-animation: scaleDownCenter .4s ease-in both;
  animation: scaleDownCenter .4s ease-in both; }

.pt-page-scaleUpCenter {
  -webkit-animation: scaleUpCenter .4s ease-out both;
  animation: scaleUpCenter .4s ease-out both; }

/********************************* keyframes **************************************/
/* scale and fade */
@-webkit-keyframes scaleDown {
  to {
    opacity: 0;
    -webkit-transform: scale(0.8); } }

@keyframes scaleDown {
  to {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); } }

@-webkit-keyframes scaleUp {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8); } }

@keyframes scaleUp {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); } }

@-webkit-keyframes scaleUpDown {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2); } }

@keyframes scaleUpDown {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }

@-webkit-keyframes scaleDownUp {
  to {
    opacity: 0;
    -webkit-transform: scale(1.2); } }

@keyframes scaleDownUp {
  to {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }

@-webkit-keyframes scaleDownCenter {
  to {
    opacity: 0;
    -webkit-transform: scale(0.7); } }

@keyframes scaleDownCenter {
  to {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7); } }

@-webkit-keyframes scaleUpCenter {
  from {
    opacity: 0;
    -webkit-transform: scale(0.7); } }

@keyframes scaleUpCenter {
  from {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7); } }

/* rotate sides first and scale */
.pt-page-rotateRightSideFirst {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateRightSideFirst .8s both ease-in;
  animation: rotateRightSideFirst .8s both ease-in; }

.pt-page-rotateLeftSideFirst {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateLeftSideFirst .8s both ease-in;
  animation: rotateLeftSideFirst .8s both ease-in; }

.pt-page-rotateTopSideFirst {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateTopSideFirst .8s both ease-in;
  animation: rotateTopSideFirst .8s both ease-in; }

.pt-page-rotateBottomSideFirst {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateBottomSideFirst .8s both ease-in;
  animation: rotateBottomSideFirst .8s both ease-in; }

/* flip */
.pt-page-flipOutRight {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipOutRight .5s both ease-in;
  animation: flipOutRight .5s both ease-in; }

.pt-page-flipInLeft {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipInLeft .5s both ease-out;
  animation: flipInLeft .5s both ease-out; }

.pt-page-flipOutLeft {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipOutLeft .5s both ease-in;
  animation: flipOutLeft .5s both ease-in; }

.pt-page-flipInRight {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipInRight .5s both ease-out;
  animation: flipInRight .5s both ease-out; }

.pt-page-flipOutTop {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipOutTop .5s both ease-in;
  animation: flipOutTop .5s both ease-in; }

.pt-page-flipInBottom {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipInBottom .5s both ease-out;
  animation: flipInBottom .5s both ease-out; }

.pt-page-flipOutBottom {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipOutBottom .5s both ease-in;
  animation: flipOutBottom .5s both ease-in; }

.pt-page-flipInTop {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: flipInTop .5s both ease-out;
  animation: flipInTop .5s both ease-out; }

/* rotate fall */
.pt-page-rotateFall {
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-animation: rotateFall 1s both ease-in;
  animation: rotateFall 1s both ease-in; }

/* rotate newspaper */
.pt-page-rotateOutNewspaper {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: rotateOutNewspaper .5s both ease-in;
  animation: rotateOutNewspaper .5s both ease-in; }

.pt-page-rotateInNewspaper {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: rotateInNewspaper .5s both ease-out;
  animation: rotateInNewspaper .5s both ease-out; }

/* push */
.pt-page-rotatePushLeft {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotatePushLeft .8s both ease;
  animation: rotatePushLeft .8s both ease; }

.pt-page-rotatePushRight {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotatePushRight .8s both ease;
  animation: rotatePushRight .8s both ease; }

.pt-page-rotatePushTop {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotatePushTop .8s both ease;
  animation: rotatePushTop .8s both ease; }

.pt-page-rotatePushBottom {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotatePushBottom .8s both ease;
  animation: rotatePushBottom .8s both ease; }

/* pull */
.pt-page-rotatePullRight {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotatePullRight .5s both ease;
  animation: rotatePullRight .5s both ease; }

.pt-page-rotatePullLeft {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotatePullLeft .5s both ease;
  animation: rotatePullLeft .5s both ease; }

.pt-page-rotatePullTop {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotatePullTop .5s both ease;
  animation: rotatePullTop .5s both ease; }

.pt-page-rotatePullBottom {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotatePullBottom .5s both ease;
  animation: rotatePullBottom .5s both ease; }

/* fold */
.pt-page-rotateFoldRight {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateFoldRight .7s both ease;
  animation: rotateFoldRight .7s both ease; }

.pt-page-rotateFoldLeft {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateFoldLeft .7s both ease;
  animation: rotateFoldLeft .7s both ease; }

.pt-page-rotateFoldTop {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateFoldTop .7s both ease;
  animation: rotateFoldTop .7s both ease; }

.pt-page-rotateFoldBottom {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateFoldBottom .7s both ease;
  animation: rotateFoldBottom .7s both ease; }

/* unfold */
.pt-page-rotateUnfoldLeft {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateUnfoldLeft .7s both ease;
  animation: rotateUnfoldLeft .7s both ease; }

.pt-page-rotateUnfoldRight {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateUnfoldRight .7s both ease;
  animation: rotateUnfoldRight .7s both ease; }

.pt-page-rotateUnfoldTop {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateUnfoldTop .7s both ease;
  animation: rotateUnfoldTop .7s both ease; }

.pt-page-rotateUnfoldBottom {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateUnfoldBottom .7s both ease;
  animation: rotateUnfoldBottom .7s both ease; }

/* room walls */
.pt-page-rotateRoomLeftOut {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateRoomLeftOut .8s both ease;
  animation: rotateRoomLeftOut .8s both ease; }

.pt-page-rotateRoomLeftIn {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateRoomLeftIn .8s both ease;
  animation: rotateRoomLeftIn .8s both ease; }

.pt-page-rotateRoomRightOut {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateRoomRightOut .8s both ease;
  animation: rotateRoomRightOut .8s both ease; }

.pt-page-rotateRoomRightIn {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateRoomRightIn .8s both ease;
  animation: rotateRoomRightIn .8s both ease; }

.pt-page-rotateRoomTopOut {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateRoomTopOut .8s both ease;
  animation: rotateRoomTopOut .8s both ease; }

.pt-page-rotateRoomTopIn {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateRoomTopIn .8s both ease;
  animation: rotateRoomTopIn .8s both ease; }

.pt-page-rotateRoomBottomOut {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateRoomBottomOut .8s both ease;
  animation: rotateRoomBottomOut .8s both ease; }

.pt-page-rotateRoomBottomIn {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateRoomBottomIn .8s both ease;
  animation: rotateRoomBottomIn .8s both ease; }

/* cube */
.pt-page-rotateCubeLeftOut {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateCubeLeftOut .6s both ease-in;
  animation: rotateCubeLeftOut .6s both ease-in; }

.pt-page-rotateCubeLeftIn {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateCubeLeftIn .6s both ease-in;
  animation: rotateCubeLeftIn .6s both ease-in; }

.pt-page-rotateCubeRightOut {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateCubeRightOut .6s both ease-in;
  animation: rotateCubeRightOut .6s both ease-in; }

.pt-page-rotateCubeRightIn {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateCubeRightIn .6s both ease-in;
  animation: rotateCubeRightIn .6s both ease-in; }

.pt-page-rotateCubeTopOut {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateCubeTopOut .6s both ease-in;
  animation: rotateCubeTopOut .6s both ease-in; }

.pt-page-rotateCubeTopIn {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateCubeTopIn .6s both ease-in;
  animation: rotateCubeTopIn .6s both ease-in; }

.pt-page-rotateCubeBottomOut {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateCubeBottomOut .6s both ease-in;
  animation: rotateCubeBottomOut .6s both ease-in; }

.pt-page-rotateCubeBottomIn {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateCubeBottomIn .6s both ease-in;
  animation: rotateCubeBottomIn .6s both ease-in; }

/* carousel */
.pt-page-rotateCarouselLeftOut {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateCarouselLeftOut .8s both ease;
  animation: rotateCarouselLeftOut .8s both ease; }

.pt-page-rotateCarouselLeftIn {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateCarouselLeftIn .8s both ease;
  animation: rotateCarouselLeftIn .8s both ease; }

.pt-page-rotateCarouselRightOut {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-animation: rotateCarouselRightOut .8s both ease;
  animation: rotateCarouselRightOut .8s both ease; }

.pt-page-rotateCarouselRightIn {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: rotateCarouselRightIn .8s both ease;
  animation: rotateCarouselRightIn .8s both ease; }

.pt-page-rotateCarouselTopOut {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateCarouselTopOut .8s both ease;
  animation: rotateCarouselTopOut .8s both ease; }

.pt-page-rotateCarouselTopIn {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateCarouselTopIn .8s both ease;
  animation: rotateCarouselTopIn .8s both ease; }

.pt-page-rotateCarouselBottomOut {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: rotateCarouselBottomOut .8s both ease;
  animation: rotateCarouselBottomOut .8s both ease; }

.pt-page-rotateCarouselBottomIn {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateCarouselBottomIn .8s both ease;
  animation: rotateCarouselBottomIn .8s both ease; }

/* sides */
.pt-page-rotateSidesOut {
  -webkit-transform-origin: -50% 50%;
  transform-origin: -50% 50%;
  -webkit-animation: rotateSidesOut .5s both ease-in;
  animation: rotateSidesOut .5s both ease-in; }

.pt-page-rotateSidesIn {
  -webkit-transform-origin: 150% 50%;
  transform-origin: 150% 50%;
  -webkit-animation: rotateSidesIn .5s both ease-out;
  animation: rotateSidesIn .5s both ease-out; }

/* slide */
.pt-page-rotateSlideOut {
  -webkit-animation: rotateSlideOut 1s both ease;
  animation: rotateSlideOut 1s both ease; }

.pt-page-rotateSlideIn {
  -webkit-animation: rotateSlideIn 1s both ease;
  animation: rotateSlideIn 1s both ease; }

/********************************* keyframes **************************************/
/* rotate sides first and scale */
@-webkit-keyframes rotateRightSideFirst {
  40% {
    -webkit-transform: rotateY(15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

@keyframes rotateRightSideFirst {
  40% {
    -webkit-transform: rotateY(15deg);
    transform: rotateY(15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

@-webkit-keyframes rotateLeftSideFirst {
  40% {
    -webkit-transform: rotateY(-15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

@keyframes rotateLeftSideFirst {
  40% {
    -webkit-transform: rotateY(-15deg);
    transform: rotateY(-15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

@-webkit-keyframes rotateTopSideFirst {
  40% {
    -webkit-transform: rotateX(15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

@keyframes rotateTopSideFirst {
  40% {
    -webkit-transform: rotateX(15deg);
    transform: rotateX(15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

@-webkit-keyframes rotateBottomSideFirst {
  40% {
    -webkit-transform: rotateX(-15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

@keyframes rotateBottomSideFirst {
  40% {
    -webkit-transform: rotateX(-15deg);
    transform: rotateX(-15deg);
    opacity: .8;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0; } }

/* flip */
@-webkit-keyframes flipOutRight {
  to {
    -webkit-transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2; } }

@keyframes flipOutRight {
  to {
    -webkit-transform: translateZ(-1000px) rotateY(90deg);
    transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2; } }

@-webkit-keyframes flipInLeft {
  from {
    -webkit-transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2; } }

@keyframes flipInLeft {
  from {
    -webkit-transform: translateZ(-1000px) rotateY(-90deg);
    transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2; } }

@-webkit-keyframes flipOutLeft {
  to {
    -webkit-transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2; } }

@keyframes flipOutLeft {
  to {
    -webkit-transform: translateZ(-1000px) rotateY(-90deg);
    transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2; } }

@-webkit-keyframes flipInRight {
  from {
    -webkit-transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2; } }

@keyframes flipInRight {
  from {
    -webkit-transform: translateZ(-1000px) rotateY(90deg);
    transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2; } }

@-webkit-keyframes flipOutTop {
  to {
    -webkit-transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2; } }

@keyframes flipOutTop {
  to {
    -webkit-transform: translateZ(-1000px) rotateX(90deg);
    transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2; } }

@-webkit-keyframes flipInBottom {
  from {
    -webkit-transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2; } }

@keyframes flipInBottom {
  from {
    -webkit-transform: translateZ(-1000px) rotateX(-90deg);
    transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2; } }

@-webkit-keyframes flipOutBottom {
  to {
    -webkit-transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2; } }

@keyframes flipOutBottom {
  to {
    -webkit-transform: translateZ(-1000px) rotateX(-90deg);
    transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2; } }

@-webkit-keyframes flipInTop {
  from {
    -webkit-transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2; } }

@keyframes flipInTop {
  from {
    -webkit-transform: translateZ(-1000px) rotateX(90deg);
    transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2; } }

/* fall */
@-webkit-keyframes rotateFall {
  0% {
    -webkit-transform: rotateZ(0deg); }

  20% {
    -webkit-transform: rotateZ(10deg);
    -webkit-animation-timing-function: ease-out; }

  40% {
    -webkit-transform: rotateZ(17deg); }

  60% {
    -webkit-transform: rotateZ(16deg); }

  100% {
    -webkit-transform: translateY(100%) rotateZ(17deg); } }

@keyframes rotateFall {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg); }

  20% {
    -webkit-transform: rotateZ(10deg);
    transform: rotateZ(10deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  40% {
    -webkit-transform: rotateZ(17deg);
    transform: rotateZ(17deg); }

  60% {
    -webkit-transform: rotateZ(16deg);
    transform: rotateZ(16deg); }

  100% {
    -webkit-transform: translateY(100%) rotateZ(17deg);
    transform: translateY(100%) rotateZ(17deg); } }

/* newspaper */
@-webkit-keyframes rotateOutNewspaper {
  to {
    -webkit-transform: translateZ(-3000px) rotateZ(360deg);
    opacity: 0; } }

@keyframes rotateOutNewspaper {
  to {
    -webkit-transform: translateZ(-3000px) rotateZ(360deg);
    transform: translateZ(-3000px) rotateZ(360deg);
    opacity: 0; } }

@-webkit-keyframes rotateInNewspaper {
  from {
    -webkit-transform: translateZ(-3000px) rotateZ(-360deg);
    opacity: 0; } }

@keyframes rotateInNewspaper {
  from {
    -webkit-transform: translateZ(-3000px) rotateZ(-360deg);
    transform: translateZ(-3000px) rotateZ(-360deg);
    opacity: 0; } }

/* push */
@-webkit-keyframes rotatePushLeft {
  to {
    opacity: 0;
    -webkit-transform: rotateY(90deg); } }

@keyframes rotatePushLeft {
  to {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg); } }

@-webkit-keyframes rotatePushRight {
  to {
    opacity: 0;
    -webkit-transform: rotateY(-90deg); } }

@keyframes rotatePushRight {
  to {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg); } }

@-webkit-keyframes rotatePushTop {
  to {
    opacity: 0;
    -webkit-transform: rotateX(-90deg); } }

@keyframes rotatePushTop {
  to {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg); } }

@-webkit-keyframes rotatePushBottom {
  to {
    opacity: 0;
    -webkit-transform: rotateX(90deg); } }

@keyframes rotatePushBottom {
  to {
    opacity: 0;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg); } }

/* pull */
@-webkit-keyframes rotatePullRight {
  from {
    opacity: 0;
    -webkit-transform: rotateY(-90deg); } }

@keyframes rotatePullRight {
  from {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg); } }

@-webkit-keyframes rotatePullLeft {
  from {
    opacity: 0;
    -webkit-transform: rotateY(90deg); } }

@keyframes rotatePullLeft {
  from {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg); } }

@-webkit-keyframes rotatePullTop {
  from {
    opacity: 0;
    -webkit-transform: rotateX(-90deg); } }

@keyframes rotatePullTop {
  from {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg); } }

@-webkit-keyframes rotatePullBottom {
  from {
    opacity: 0;
    -webkit-transform: rotateX(90deg); } }

@keyframes rotatePullBottom {
  from {
    opacity: 0;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg); } }

/* fold */
@-webkit-keyframes rotateFoldRight {
  to {
    opacity: 0;
    -webkit-transform: translateX(100%) rotateY(90deg); } }

@keyframes rotateFoldRight {
  to {
    opacity: 0;
    -webkit-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg); } }

@-webkit-keyframes rotateFoldLeft {
  to {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotateY(-90deg); } }

@keyframes rotateFoldLeft {
  to {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotateY(-90deg);
    transform: translateX(-100%) rotateY(-90deg); } }

@-webkit-keyframes rotateFoldTop {
  to {
    opacity: 0;
    -webkit-transform: translateY(-100%) rotateX(90deg); } }

@keyframes rotateFoldTop {
  to {
    opacity: 0;
    -webkit-transform: translateY(-100%) rotateX(90deg);
    transform: translateY(-100%) rotateX(90deg); } }

@-webkit-keyframes rotateFoldBottom {
  to {
    opacity: 0;
    -webkit-transform: translateY(100%) rotateX(-90deg); } }

@keyframes rotateFoldBottom {
  to {
    opacity: 0;
    -webkit-transform: translateY(100%) rotateX(-90deg);
    transform: translateY(100%) rotateX(-90deg); } }

/* unfold */
@-webkit-keyframes rotateUnfoldLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotateY(-90deg); } }

@keyframes rotateUnfoldLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotateY(-90deg);
    transform: translateX(-100%) rotateY(-90deg); } }

@-webkit-keyframes rotateUnfoldRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(100%) rotateY(90deg); } }

@keyframes rotateUnfoldRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg); } }

@-webkit-keyframes rotateUnfoldTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100%) rotateX(90deg); } }

@keyframes rotateUnfoldTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100%) rotateX(90deg);
    transform: translateY(-100%) rotateX(90deg); } }

@-webkit-keyframes rotateUnfoldBottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%) rotateX(-90deg); } }

@keyframes rotateUnfoldBottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%) rotateX(-90deg);
    transform: translateY(100%) rotateX(-90deg); } }

/* room walls */
@-webkit-keyframes rotateRoomLeftOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(90deg); } }

@keyframes rotateRoomLeftOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(90deg);
    transform: translateX(-100%) rotateY(90deg); } }

@-webkit-keyframes rotateRoomLeftIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(-90deg); } }

@keyframes rotateRoomLeftIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(-90deg);
    transform: translateX(100%) rotateY(-90deg); } }

@-webkit-keyframes rotateRoomRightOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(-90deg); } }

@keyframes rotateRoomRightOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(-90deg);
    transform: translateX(100%) rotateY(-90deg); } }

@-webkit-keyframes rotateRoomRightIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(90deg); } }

@keyframes rotateRoomRightIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(90deg);
    transform: translateX(-100%) rotateY(90deg); } }

@-webkit-keyframes rotateRoomTopOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(-90deg); } }

@keyframes rotateRoomTopOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(-90deg);
    transform: translateY(-100%) rotateX(-90deg); } }

@-webkit-keyframes rotateRoomTopIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(90deg); } }

@keyframes rotateRoomTopIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(90deg);
    transform: translateY(100%) rotateX(90deg); } }

@-webkit-keyframes rotateRoomBottomOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(90deg); } }

@keyframes rotateRoomBottomOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(90deg);
    transform: translateY(100%) rotateX(90deg); } }

@-webkit-keyframes rotateRoomBottomIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(-90deg); } }

@keyframes rotateRoomBottomIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(-90deg);
    transform: translateY(-100%) rotateX(-90deg); } }

/* cube */
@-webkit-keyframes rotateCubeLeftOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(-90deg); } }

@keyframes rotateCubeLeftOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
    transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(-90deg);
    transform: translateX(-100%) rotateY(-90deg); } }

@-webkit-keyframes rotateCubeLeftIn {
  0% {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } }

@keyframes rotateCubeLeftIn {
  0% {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);
    transform: translateX(50%) translateZ(-200px) rotateY(45deg); } }

@-webkit-keyframes rotateCubeRightOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(90deg); } }

@keyframes rotateCubeRightOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);
    transform: translateX(50%) translateZ(-200px) rotateY(45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg); } }

@-webkit-keyframes rotateCubeRightIn {
  0% {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(-90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } }

@keyframes rotateCubeRightIn {
  0% {
    opacity: .3;
    -webkit-transform: translateX(-100%) rotateY(-90deg);
    transform: translateX(-100%) rotateY(-90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
    transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } }

@-webkit-keyframes rotateCubeTopOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(90deg); } }

@keyframes rotateCubeTopOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(90deg);
    transform: translateY(-100%) rotateX(90deg); } }

@-webkit-keyframes rotateCubeTopIn {
  0% {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(-90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } }

@keyframes rotateCubeTopIn {
  0% {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(-90deg);
    transform: translateY(100%) rotateX(-90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } }

@-webkit-keyframes rotateCubeBottomOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(-90deg); } }

@keyframes rotateCubeBottomOut {
  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }

  100% {
    opacity: .3;
    -webkit-transform: translateY(100%) rotateX(-90deg);
    transform: translateY(100%) rotateX(-90deg); } }

@-webkit-keyframes rotateCubeBottomIn {
  0% {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } }

@keyframes rotateCubeBottomIn {
  0% {
    opacity: .3;
    -webkit-transform: translateY(-100%) rotateX(90deg);
    transform: translateY(-100%) rotateX(90deg); }

  50% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } }

/* carousel */
@-webkit-keyframes rotateCarouselLeftOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(-150%) scale(0.4) rotateY(-65deg); } }

@keyframes rotateCarouselLeftOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(-150%) scale(0.4) rotateY(-65deg);
    transform: translateX(-150%) scale(0.4) rotateY(-65deg); } }

@-webkit-keyframes rotateCarouselLeftIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(200%) scale(0.4) rotateY(65deg); } }

@keyframes rotateCarouselLeftIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(200%) scale(0.4) rotateY(65deg);
    transform: translateX(200%) scale(0.4) rotateY(65deg); } }

@-webkit-keyframes rotateCarouselRightOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(200%) scale(0.4) rotateY(65deg); } }

@keyframes rotateCarouselRightOut {
  to {
    opacity: .3;
    -webkit-transform: translateX(200%) scale(0.4) rotateY(65deg);
    transform: translateX(200%) scale(0.4) rotateY(65deg); } }

@-webkit-keyframes rotateCarouselRightIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(-200%) scale(0.4) rotateY(-65deg); } }

@keyframes rotateCarouselRightIn {
  from {
    opacity: .3;
    -webkit-transform: translateX(-200%) scale(0.4) rotateY(-65deg);
    transform: translateX(-200%) scale(0.4) rotateY(-65deg); } }

@-webkit-keyframes rotateCarouselTopOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(-200%) scale(0.4) rotateX(65deg); } }

@keyframes rotateCarouselTopOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(-200%) scale(0.4) rotateX(65deg);
    transform: translateY(-200%) scale(0.4) rotateX(65deg); } }

@-webkit-keyframes rotateCarouselTopIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(200%) scale(0.4) rotateX(-65deg); } }

@keyframes rotateCarouselTopIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(200%) scale(0.4) rotateX(-65deg);
    transform: translateY(200%) scale(0.4) rotateX(-65deg); } }

@-webkit-keyframes rotateCarouselBottomOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(200%) scale(0.4) rotateX(-65deg); } }

@keyframes rotateCarouselBottomOut {
  to {
    opacity: .3;
    -webkit-transform: translateY(200%) scale(0.4) rotateX(-65deg);
    transform: translateY(200%) scale(0.4) rotateX(-65deg); } }

@-webkit-keyframes rotateCarouselBottomIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(-200%) scale(0.4) rotateX(65deg); } }

@keyframes rotateCarouselBottomIn {
  from {
    opacity: .3;
    -webkit-transform: translateY(-200%) scale(0.4) rotateX(65deg);
    transform: translateY(-200%) scale(0.4) rotateX(65deg); } }

/* sides */
@-webkit-keyframes rotateSidesOut {
  to {
    opacity: 0;
    -webkit-transform: translateZ(-500px) rotateY(90deg); } }

@keyframes rotateSidesOut {
  to {
    opacity: 0;
    -webkit-transform: translateZ(-500px) rotateY(90deg);
    transform: translateZ(-500px) rotateY(90deg); } }

@-webkit-keyframes rotateSidesIn {
  from {
    opacity: 0;
    -webkit-transform: translateZ(-500px) rotateY(-90deg); } }

@keyframes rotateSidesIn {
  from {
    opacity: 0;
    -webkit-transform: translateZ(-500px) rotateY(-90deg);
    transform: translateZ(-500px) rotateY(-90deg); } }

/* slide */
@-webkit-keyframes rotateSlideOut {
  25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px); }

  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%); }

  100% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%); } }

@keyframes rotateSlideOut {
  25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
    transform: translateZ(-500px); }

  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
    transform: translateZ(-500px) translateX(-200%); }

  100% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
    transform: translateZ(-500px) translateX(-200%); } }

@-webkit-keyframes rotateSlideIn {
  0%, 25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(200%); }

  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px); }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0) translateX(0); } }

@keyframes rotateSlideIn {
  0%, 25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(200%);
    transform: translateZ(-500px) translateX(200%); }

  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
    transform: translateZ(-500px); }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0); } }

/* animation delay classes */
.pt-page-delay100 {
  -webkit-animation-delay: .1s;
  animation-delay: .1s; }

.pt-page-delay180 {
  -webkit-animation-delay: .180s;
  animation-delay: .180s; }

.pt-page-delay200 {
  -webkit-animation-delay: .2s;
  animation-delay: .2s; }

.pt-page-delay300 {
  -webkit-animation-delay: .3s;
  animation-delay: .3s; }

.pt-page-delay400 {
  -webkit-animation-delay: .4s;
  animation-delay: .4s; }

.pt-page-delay500 {
  -webkit-animation-delay: .5s;
  animation-delay: .5s; }

.pt-page-delay700 {
  -webkit-animation-delay: .7s;
  animation-delay: .7s; }

.pt-page-delay1000 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s; }

/* General styles for the modal */
/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
button {
  border: none;
  background: #fff;
  color: #ccc;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  margin: 3px 2px;
  outline: none;
  xborder: 1px solid #efefef; }

button:hover {
  xbackground: #A5281B; }

.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden; }

.md-perspective body {
  background: #222;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px; }

.container {
  min-height: 100%; }

.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

.md-show {
  visibility: visible; }

.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(185, 179, 179, 0.8);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible; }

/* Content styles */
.md-content {
  color: #fff;
  background: #e74c3c;
  position: relative;
  border-radius: 3px;
  margin: 0 auto; }

.md-content h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
  font-size: 2.4em;
  font-weight: 300;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0 0; }

.md-content > div {
  padding: 15px 40px 30px;
  margin: 0;
  font-weight: 300;
  font-size: 1.15em; }

.md-content > div p {
  margin: 0;
  padding: 10px 0; }

.md-content > div ul {
  margin: 0;
  padding: 0 0 30px 20px; }

.md-content > div ul li {
  padding: 5px 0; }

.md-content button {
  display: block;
  margin: 0 auto;
  font-size: 0.8em; }

/* Individual modal styles with animations/transitions */
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-1 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

/* Effect 2: Slide from the right */
.md-effect-2 .md-content {
  -webkit-transform: translateX(20%);
  -moz-transform: translateX(20%);
  -ms-transform: translateX(20%);
  transform: translateX(20%);
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); }

.md-show.md-effect-2 .md-content {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
  -webkit-transform: translateY(20%);
  -moz-transform: translateY(20%);
  -ms-transform: translateY(20%);
  transform: translateY(20%);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-3 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

/* Effect 4: Newspaper */
.md-effect-4 .md-content {
  -webkit-transform: scale(0) rotate(720deg);
  -moz-transform: scale(0) rotate(720deg);
  -ms-transform: scale(0) rotate(720deg);
  transform: scale(0) rotate(720deg);
  opacity: 0; }

.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s; }

.md-show.md-effect-4 .md-content {
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  opacity: 1; }

/* Effect 5: fall */
.md-effect-5.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-5 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(600px) rotateX(20deg);
  -moz-transform: translateZ(600px) rotateX(20deg);
  -ms-transform: translateZ(600px) rotateX(20deg);
  transform: translateZ(600px) rotateX(20deg);
  opacity: 0; }

.md-show.md-effect-5 .md-content {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform: translateZ(0px) rotateX(0deg);
  -moz-transform: translateZ(0px) rotateX(0deg);
  -ms-transform: translateZ(0px) rotateX(0deg);
  transform: translateZ(0px) rotateX(0deg);
  opacity: 1; }

/* Effect 6: side fall */
.md-effect-6.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-6 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
  -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
  -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
  transform: translate(30%) translateZ(600px) rotate(10deg);
  opacity: 0; }

.md-show.md-effect-6 .md-content {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
  -moz-transform: translate(0%) translateZ(0) rotate(0deg);
  -ms-transform: translate(0%) translateZ(0) rotate(0deg);
  transform: translate(0%) translateZ(0) rotate(0deg);
  opacity: 1; }

/* Effect 7:  slide and stick to top */
.md-effect-7 {
  top: 0;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

.md-effect-7 .md-content {
  -webkit-transform: translateY(-200%);
  -moz-transform: translateY(-200%);
  -ms-transform: translateY(-200%);
  transform: translateY(-200%);
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  opacity: 0; }

.md-show.md-effect-7 .md-content {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  border-radius: 0 0 3px 3px;
  opacity: 1; }

/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-8 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(-70deg);
  -moz-transform: rotateY(-70deg);
  -ms-transform: rotateY(-70deg);
  transform: rotateY(-70deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0; }

.md-show.md-effect-8 .md-content {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  opacity: 1; }

/* Effect 9: 3D flip vertical */
.md-effect-9.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-9 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-70deg);
  -moz-transform: rotateX(-70deg);
  -ms-transform: rotateX(-70deg);
  transform: rotateX(-70deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0; }

.md-show.md-effect-9 .md-content {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1; }

/* Effect 10: 3D sign */
.md-effect-10.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-10 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-60deg);
  -moz-transform: rotateX(-60deg);
  -ms-transform: rotateX(-60deg);
  transform: rotateX(-60deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-10 .md-content {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1; }

/* Effect 11: Super scaled */
.md-effect-11 .md-content {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-11 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

/* Effect 12:  Just me */
.md-effect-12 .md-content {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-12 ~ .md-overlay {
  background: #e74c3c; }

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
  background: transparent; }

.md-show.md-effect-12 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

/* Effect 13: 3D slit */
.md-effect-13.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-13 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-3000px) rotateY(90deg);
  -moz-transform: translateZ(-3000px) rotateY(90deg);
  -ms-transform: translateZ(-3000px) rotateY(90deg);
  transform: translateZ(-3000px) rotateY(90deg);
  opacity: 0; }

.md-show.md-effect-13 .md-content {
  -webkit-animation: slit .7s forwards ease-out;
  -moz-animation: slit .7s forwards ease-out;
  animation: slit .7s forwards ease-out; }

@-webkit-keyframes slit {
  50% {
    -webkit-transform: translateZ(-250px) rotateY(89deg);
    opacity: .5;
    -webkit-animation-timing-function: ease-out; }

  100% {
    -webkit-transform: translateZ(0) rotateY(0deg);
    opacity: 1; } }

@-moz-keyframes slit {
  50% {
    -moz-transform: translateZ(-250px) rotateY(89deg);
    opacity: .5;
    -moz-animation-timing-function: ease-out; }

  100% {
    -moz-transform: translateZ(0) rotateY(0deg);
    opacity: 1; } }

@keyframes slit {
  50% {
    transform: translateZ(-250px) rotateY(89deg);
    opacity: 1;
    animation-timing-function: ease-in; }

  100% {
    transform: translateZ(0) rotateY(0deg);
    opacity: 1; } }

/* Effect 14:  3D Rotate from bottom */
.md-effect-14.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-14 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateY(100%) rotateX(90deg);
  -moz-transform: translateY(100%) rotateX(90deg);
  -ms-transform: translateY(100%) rotateX(90deg);
  transform: translateY(100%) rotateX(90deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  transform-origin: 0 100%;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

.md-show.md-effect-14 .md-content {
  -webkit-transform: translateY(0%) rotateX(0deg);
  -moz-transform: translateY(0%) rotateX(0deg);
  -ms-transform: translateY(0%) rotateX(0deg);
  transform: translateY(0%) rotateX(0deg);
  opacity: 1; }

/* Effect 15:  3D Rotate in from left */
.md-effect-15.md-modal {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px; }

.md-effect-15 .md-content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  transform-origin: 0 100%;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-15 .md-content {
  -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
  -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
  -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
  transform: translateZ(0px) translateX(0%) rotateY(0deg);
  opacity: 1; }

/* Effect 16:  Blur */
.md-show.md-effect-16 ~ .md-overlay {
  background: rgba(180, 46, 32, 0.5); }

.md-show.md-effect-16 ~ .container {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px); }

.md-effect-16 .md-content {
  -webkit-transform: translateY(-5%);
  -moz-transform: translateY(-5%);
  -ms-transform: translateY(-5%);
  transform: translateY(-5%);
  opacity: 0; }

.md-show.md-effect-16 ~ .container,
.md-effect-16 .md-content {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-16 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

/* Effect 17:  Slide in from bottom with perspective on container */
.md-show.md-effect-17 ~ .container {
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s; }

.md-show.md-effect-17 ~ .container,
.md-show.md-effect-17 ~ .md-overlay {
  -webkit-transform: rotateX(-2deg);
  -moz-transform: rotateX(-2deg);
  -ms-transform: rotateX(-2deg);
  transform: rotateX(-2deg);
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.md-effect-17 .md-content {
  opacity: 0;
  -webkit-transform: translateY(200%);
  -moz-transform: translateY(200%);
  -ms-transform: translateY(200%);
  transform: translateY(200%); }

.md-show.md-effect-17 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  -webkit-transition: all 0.3s 0.2s;
  -moz-transition: all 0.3s 0.2s;
  transition: all 0.3s 0.2s; }

/* Effect 18:  Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
  height: 100%;
  overflow: hidden; }

.md-show.md-effect-18 ~ .md-overlay {
  background: rgba(143, 27, 15, 0.8);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s; }

.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: 0% 50%;
  -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  animation: rotateRightSideFirst 0.5s forwards ease-in; }

@-webkit-keyframes rotateRightSideFirst {
  50% {
    -webkit-transform: translateZ(-50px) rotateY(5deg);
    -webkit-animation-timing-function: ease-out; }

  100% {
    -webkit-transform: translateZ(-200px); } }

@-moz-keyframes rotateRightSideFirst {
  50% {
    -moz-transform: translateZ(-50px) rotateY(5deg);
    -moz-animation-timing-function: ease-out; }

  100% {
    -moz-transform: translateZ(-200px); } }

@keyframes rotateRightSideFirst {
  50% {
    transform: translateZ(-50px) rotateY(5deg);
    animation-timing-function: ease-out; }

  100% {
    transform: translateZ(-200px); } }

.md-effect-18 .md-content {
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -ms-transform: translateX(200%);
  transform: translateX(200%);
  opacity: 0; }

.md-show.md-effect-18 .md-content {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s; }

/* Effect 19:  Slip in from the top with perspective on container */
.md-show.md-effect-19 ~ .container {
  height: 100%;
  overflow: hidden; }

.md-show.md-effect-19 ~ .md-overlay {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s; }

.md-show.md-effect-19 ~ .container,
.md-show.md-effect-19 ~ .md-overlay {
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: OpenTop 0.5s forwards ease-in;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: 50% 100%;
  -moz-animation: OpenTop 0.5s forwards ease-in;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  animation: OpenTop 0.5s forwards ease-in; }

@-webkit-keyframes OpenTop {
  50% {
    -webkit-transform: rotateX(10deg);
    -webkit-animation-timing-function: ease-out; } }

@-moz-keyframes OpenTop {
  50% {
    -moz-transform: rotateX(10deg);
    -moz-animation-timing-function: ease-out; } }

@keyframes OpenTop {
  50% {
    transform: rotateX(10deg);
    animation-timing-function: ease-out; } }

.md-effect-19 .md-content {
  -webkit-transform: translateY(-200%);
  -moz-transform: translateY(-200%);
  -ms-transform: translateY(-200%);
  transform: translateY(-200%);
  opacity: 0; }

.md-show.md-effect-19 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s; }

@media screen and (max-width: 32em) {
  body {
    font-size: 75%; } }
/*
Navigation, Nav buttons and Menu Styles
******************************************************************/
/* Hamburglar
------------------------------------------------------------------------------------------*/
.top-logo {
  width: 250px;
  float: left;
  margin: 3px 40px 0 20px; }

nav {
  width: 100%; }

.main-nav {
  position: fixed;
  background-color: white;
  overflow: hidden;
  xborder-bottom: 1px solid #e1e8ed;
  border-bottom: 2px solid #fafafa;
  z-index: 959; }

.mobile-nav a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif; }

.main-nav ul {
  float: right;
  margin-right: 20px; }

.main-nav li {
  text-transform: uppercase;
  font: 0.8em "Montserrat", serif;
  color: black;
  font-weight: 400;
  display: inline;
  line-height: 60px;
  padding-left: 25px; }
  .main-nav li a {
    color: #262626; }
    .main-nav li a:hover {
      color: #858776; }

.mobile-nav {
  position: fixed;
  width: 100%;
  background-color: white;
  overflow: hidden;
  border-bottom: 1px solid #e1e8ed;
  z-index: 959;
  display: none; }

.mobile-nav a {
  color: #f4a261;
  font-size: 1em;
  text-decoration: none; }

.mobile-nav ul {
  width: 100%;
  margin-top: 40px;
  display: none;
  margin-right: 0; }

.mobile-nav li {
  border-bottom: 1px solid #e1e8ed;
  padding: 10px;
  width: 100%;
  background-color: white; }

.mobile-nav li:last-of-type {
  border-bottom: none; }

.mobile-nav li a {
  font: 1.5em "Montserrat", serif;
  letter-spacing: .05em;
  color: #264653;
  text-decoration: none;
  display: block; }

.mobile-nav li a:hover {
  color: black; }

.burger {
  margin-right: 2px; }

.mobile-menu-button {
  float: right;
  height: 38px;
  padding: 0 15px;
  border: 1px solid #f4a261;
  opacity: 1;
  color: #f4a261;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 35px;
  white-space: nowrap;
  border-radius: 3px;
  xbackground: rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
  margin: 10px 40px; }

.menu-button:focus {
  outline: 0; }

.menu-button .burger {
  font-size: 12px;
  margin-right: 6px; }

/**Onpage Nav Buttons **/
/* Top button */
.btn {
  border-radius: 4px;
  border: 2px solid white;
  color: white;
  display: inline-block;
  margin: 0 .25em;
  overflow: hidden;
  padding: 10px 60px 10px 16px;
  position: relative;
  text-decoration: none;
  line-height: 1; }
  .btn .btn-content {
    font-size: 1em;
    line-height: 1.2;
    padding: 0 20px;
    position: relative;
    right: 0;
    transition: right 300ms ease;
    display: block;
    text-align: left; }
  .btn .icon {
    border-left: 1px solid white;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transition: all 300ms ease;
    transform: translateY(-50%);
    width: 58px;
    height: 70%; }
    .btn .icon i {
      position: relative;
      top: 50%;
      transform: translateY(-50%); }
  .btn:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: white;
    opacity: 0;
    transition: opacity 300ms ease;
    border: 2px solid #f4a261; }
  .btn:hover {
    border: 2px solid #f4a261; }
    .btn:hover .btn-content {
      right: 100%; }
    .btn:hover .icon {
      border-left: 0;
      font-size: 1.5em;
      width: 100%;
      color: #f4a261;
      top: 45%; }
    .btn:hover:after {
      opacity: .2;
      background-color: #f4a261;
      border: 2px solid #f4a261; }
  .btn.btn-alt-color {
    border-color: #f4a261;
    color: #f4a261; }
    .btn.btn-alt-color .icon {
      border-left-color: #f4a261; }
    .btn.btn-alt-color:after {
      background-color: #f4a261; }

/* Blog button */
.blog-btn {
  border-radius: 4px;
  border: 2px solid #f4a261;
  color: #f4a261;
  display: inline-block;
  margin: 0 .25em;
  overflow: hidden;
  padding: 10px 60px 10px 16px;
  position: relative;
  text-decoration: none;
  line-height: 1; }
  .blog-btn .blog-btn-content {
    font-size: 1em;
    line-height: 1.2;
    padding: 0 20px;
    position: relative;
    right: 0;
    transition: right 300ms ease;
    display: block;
    text-align: left; }
  .blog-btn .icon {
    border-left: 1px solid #f4a261;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transition: all 300ms ease;
    transform: translateY(-50%);
    width: 58px;
    height: 70%; }
    .blog-btn .icon i {
      position: relative;
      top: 50%;
      transform: translateY(-50%); }
  .blog-btn:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #f4a261;
    opacity: 0;
    transition: opacity 300ms ease;
    border: 2px solid white; }
  .blog-btn:hover {
    border: 2px solid #264653; }
    .blog-btn:hover .blog-btn-content {
      right: 100%; }
    .blog-btn:hover .icon {
      border-left: 0;
      font-size: 1.5em;
      width: 100%;
      color: #264653;
      top: 45%; }
    .blog-btn:hover:after {
      opacity: .2;
      background-color: #264653;
      border: 2px solid #264653; }
  .blog-btn.btn-alt-color {
    border-color: #264653;
    color: #264653; }
    .blog-btn.btn-alt-color .icon {
      border-left-color: #264653; }
    .blog-btn.btn-alt-color:after {
      background-color: #264653; }

/* FONTS
------------------------------------------------------------------------------------------*/
/* Color Specific Classes 
------------------------------------------------------------------------------------------*/
.font-white {
  color: white; }

/* Font Alignment Classes 
------------------------------------------------------------------------------------------*/
.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

/* Background Color Classes 
------------------------------------------------------------------------------------------*/
/* Font Weight Classes 
------------------------------------------------------------------------------------------*/
.text-bold {
  font-weight: 900; }

/* SECTION Headers
------------------------------------------------------------------------------------------*/
section h1 {
  font: 2em "Lato", sans-serif; }

section h2 {
  font: 1.8em "Lato", sans-serif; }

section h3 {
  font: 1.5em "Lato", sans-serif; }

section h4 {
  font: 1.2em "Lato", sans-serif; }

section h5 {
  font: 1em "Lato", sans-serif; }

section h6 {
  font: 0.8em "Lato", sans-serif; }

.text-wrap p {
  font: 1em "Lato", sans-serif;
  padding-top: 30px;
  line-height: 1.5;
  text-align: justify;
  min-height: 300px; }

.copy-text {
  font: 0.9em "novecento_sanslight", sans-serif;
  text-align: left;
  line-height: 75px;
  padding-left: 20px;
  color: white; }

/* Social 
------------------------------------------------------------------------------------------*/
.social-header {
  font-size: 1em;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px !important;
  margin: 5px 5px 0 0;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -transition: all 0.5s ease;
  transition: all 0.5s ease; }

.social-nav-item {
  font-size: 1em;
  color: #cccccc;
  background-color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px !important;
  margin: 5px 5px 0 0;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -transition: all 0.5s ease;
  transition: all 0.5s ease; }

.social-footer {
  font-size: 1em;
  background-color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px !important;
  margin: 5px 5px 0 0;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -transition: all 0.5s ease;
  transition: all 0.5s ease; }

/* Buttons, Tags, and Misc
------------------------------------------------------------------------------------------*/
.button-wrap a {
  font: 1.5em "novecento_sansbook", sans-serif;
  color: white;
  padding: 5px;
  border: 1px solid white; }

#green-button:hover {
  color: white;
  background-color: white;
  border: 1px solid #262626; }

#brown-button:hover {
  color: white;
  background-color: white;
  border: 1px solid #262626; }

#blue-button:hover {
  color: white;
  background-color: white;
  border: 1px solid #262626; }

/* Map
------------------------------------------------------------------------------------------*/
/* Directions
------------------------------------------------------------------------------------------*/
.map {
  background-color: #fefefe;
  overflow: hidden;
  min-height: 600px;
  padding: 0;
  margin-top: 50px;
  border-top: 1px solid #e1e8ed; }

#map_container {
  position: relative;
  min-height: 600px; }

#map {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
  border-bottom: 1px solid #ccc; }

#directions {
  width: 300px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #cecece;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-align: center;
  color: #626262;
  position: absolute;
  left: 50%;
  top: 125px;
  margin-left: -496px;
  z-index: 5;
  overflow: hidden; }

#directions.active {
  -webkit-animation: directions_expand 1s 0 linear;
  -moz-animation: directions_expand 1s 0 linear;
  -ms-animation: directions_expand 1s 0 linear;
  -o-animation: directions_expand 1s 0 linear;
  animation: directions_expand 1s 0 linear;
  overflow-y: auto !important;
  overflow-x: hidden;
  max-height: 100%;
  width: 350px;
  text-align: left;
  padding: 0;
  height: 350px; }

.directions li {
  display: none; }

.directions .directions_start {
  background: url(/images/flag.png) no-repeat center left;
  height: 60px;
  line-height: 22px;
  padding: 16px 31px 0 60px;
  font-weight: 900; }

.directions .directions_start.single {
  height: 75px;
  line-height: 75px;
  padding: 0 10px 0 60px; }

.directions .directions_stats {
  text-align: center;
  background: rgba(199, 234, 251, 0.3);
  color: #4a3f46;
  height: 40px;
  line-height: 40px; }

.directions .directions_list div {
  padding: 20px 0; }

.directions .directions_list div.alt {
  background: rgba(217, 217, 217, 0.3); }

.directions .directions_list div div {
  line-height: 1.3em;
  padding: 0; }

.directions .directions_list div span {
  display: block;
  float: left; }

.directions .directions_list div span.step {
  font-size: 1.25em;
  text-align: center;
  width: 50px;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70); }

.directions .directions_list div span.instructions {
  width: 175px;
  font-size: .875em;
  line-height: 1.3em; }

.directions .directions_list div span.distance {
  float: right;
  width: 60px;
  color: #2f392e;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70); }

.group:before, .group:after {
  content: " ";
  display: table; }

.group:after {
  width: 100%;
  clear: both; }

.group {
  zoom: 1; }

.bus {
  display: block;
  margin: 0 auto; }

.directionstext {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  padding: 10px;
  text-shadow: 2px 2px 0 #efefef;
  text-decoration: none;
  text-align: center; }

#directions input {
  padding: 11px 10px;
  font-size: 1.4em;
  text-align: center;
  color: #626262;
  background: #fff;
  border: 1px solid #cecece;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 90%;
  margin: 5%; }

#directions .button {
  display: table;
  margin: 0 auto;
  font-size: 100%;
  height: 47px;
  line-height: 46.875px;
  padding: 0 30px;
  position: relative;
  text-align: center;
  border: 1px solid #64735c;
  color: #fff;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
  width: 90%;
  text-decoration: none;
  margin-bottom: 20px; }

.cards {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 15px;
  padding: 1.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.card {
  width: 28%;
  min-width: 300px;
  flex-basis: 28%;
  position: relative;
  margin: 1%;
  padding-bottom: 30px;
  background: #fefff9;
  color: #363636;
  text-decoration: none;
  border: 1px solid #264653;
  xbox-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 0;
  xborder-radius: 4px; }

span {
  display: block; }

.card-summary {
  padding: 0% 3.5% 5% 3.5%;
  font: 0.9em "Lato", sans-serif;
  color: #264653; }

.card-header {
  position: relative;
  height: 300px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  xbackground-color: #fafafa;
  xbackground-color: rgba(255, 255, 255, 0.15);
  xbackground-blend-mode: overlay;
  xborder-radius: 4px 4px 0 0; }
  .card-header:hover, .card-header:focus {
    background-color: rgba(255, 255, 255, 0); }

.card-title {
  xbackground: #264653;
  padding: 3.5% 0 2.5% 0;
  color: #264653;
  text-transform: uppercase;
  xposition: absolute;
  xbottom: 0;
  width: 100%;
  border-top: 1px solid #264653; }
  .card-title h3 {
    font: 1.2em "Raleway", sans-serif;
    line-height: 1.2;
    padding: 0 3.5%;
    margin: 0; }

.card-meta {
  xmax-height: 0;
  overflow: hidden;
  color: #f4a261;
  font: 0.7em "Raleway", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  bottom: 5%;
  padding: 0 5%; }

.card .card-meta {
  xmax-height: 0;
  overflow: hidden;
  color: #f4a261;
  font-size: .78em;
  text-transform: uppercase;
  position: absolute;
  bottom: 2%;
  padding: 3% 5% 0 3.5%; }

.card:hover, .card:focus {
  xbackground: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px; }

* {
  -moz-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -moz-transform;
  -o-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -o-transform;
  -webkit-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -webkit-transform;
  transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear; }

/* Grid Classes
------------------------------------------------------------------------------------------*/
.row {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5px; }

/* Structure
------------------------------------------------------------------------------------------*/
html {
  -webkit-font-smoothing: antialiased !important;
  xscroll-behavior: smooth; }

body {
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

a {
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

a:hover {
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

.wrapper {
  height: 100vh;
  width: 100%; }

header {
  width: 100%;
  height: 50px;
  padding-top: 100px; }

footer {
  xheight: 30px;
  width: 100%;
  xbackground-color: #c2c3ba;
  position: absolute;
  bottom: 0; }

/* Section 1 - CTA
------------------------------------------------------------------------------------------*/
.one {
  xmax-width: 1600px;
  min-height: calc(75vh - 60px);
  padding-top: 60px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: url("../images/background/phila.jpg") no-repeat;
  xbackground-size: cover;
  background-position: center -150px; }

.one-pt {
  min-height: calc(100vh - 60px);
  padding-top: 60px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: url("../images/background/desktop.jpg") no-repeat;
  background-size: cover; }

.home-body-top {
  xmin-height: 100vh; }
  .home-body-top h1 {
    font: 3.8em "Oswald", sans-serif;
    font-weight: 800;
    text-align: center;
    color: white;
    padding-top: 200px;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #f4a261; }

.home-body-top h5 {
  font: 1.8em "Lato", sans-serif;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px #f4a261; }

.home-logo {
  margin: 0 auto;
  max-width: 500px;
  display: block; }

.title-logo {
  margin: 0 auto;
  height: 4em;
  display: inline; }

/* Section 2 - About 959
------------------------------------------------------------------------------------------*/
.two {
  xmin-height: calc(100vh - 60px);
  xbackground: url("../images/background/bwnotepad.jpg") no-repeat;
  xbackground-position-y: 350px; }

.two-pt {
  min-height: calc(100vh - 60px);
  background: url("../images/background/bwnotepad.jpg") no-repeat;
  background-position-y: 350px; }

.about {
  margin: 50px auto;
  display: block;
  text-align: center; }

x.about h2 {
  font: 2em "Raleway", sans-serif;
  color: #262626;
  font-weight: 800;
  display: inline;
  padding: 20px 100px 20px 100px;
  border-bottom: 1px solid #e1e8ed; }

.about h2 {
  font: 2.5em "Raleway", sans-serif;
  color: #f4a261;
  font-weight: 200;
  display: inline;
  xpadding: 20px 100px 0px 100px;
  xborder-bottom: 1px solid #f4a261; }

.about h2:after {
  content: "";
  display: block;
  height: 1px;
  width: 100px;
  background-color: #f4a261;
  margin: 15px auto 35px; }

.about p {
  font: 1.2em "Lato", sans-serif;
  color: #264653;
  font-weight: 400;
  text-align: left;
  line-height: 1.8;
  max-width: 75%;
  padding: 0px 20px;
  margin: 0 auto; }

.services-button {
  margin-top: 250px;
  text-align: center; }

.services-button a {
  font: 1.6em "Raleway", sans-serif;
  font-weight: 800;
  color: white;
  padding: 5px 10px;
  border: 2px solid white; }

.services-button a:hover {
  color: #262626;
  border: 2px solid #262626; }

.two-break {
  xmin-height: calc(40vh - 60px);
  height: 350px;
  background: url("../images/background/bwnotepad1.jpg") no-repeat;
  background-attachment: fixed;
  background-position: center;
  xopacity: .5;
  margin-bottom: 50px;
  box-shadow: 0px 1px 10px 1px inset #ccc; }

/* Section 3 - Services
------------------------------------------------------------------------------------------*/
.three {
  min-height: calc(100vh - 60px); }

.three-pt {
  min-height: calc(100vh - 60px); }

.services {
  margin: 0 auto;
  display: block;
  text-align: center;
  padding-top: 60px; }

x.services h2 {
  font: 2em "Raleway", sans-serif;
  color: #262626;
  font-weight: 800;
  display: inline;
  padding: 20px 100px 20px 100px;
  border-bottom: 1px solid #e1e8ed; }

.services h2 {
  font: 2.5em "Raleway", sans-serif;
  color: #f4a261;
  font-weight: 200;
  display: inline;
  xpadding: 20px 100px 0px 100px;
  xborder-bottom: 1px solid #f4a261; }

.services h2:after {
  content: "";
  display: block;
  height: 1px;
  width: 100px;
  background-color: #f4a261;
  margin: 15px auto 35px; }

.services p {
  font: 1.2em "Lato", sans-serif;
  color: #264653;
  font-weight: 400;
  text-align: left;
  line-height: 1.8;
  max-width: 75%;
  padding: 0px 20px;
  margin: 0 auto; }

.box-wrap {
  max-width: 1400px;
  display: block;
  margin: 50px auto;
  overflow: hidden; }

.service-box {
  width: 33%;
  float: left;
  margin-bottom: 100px; }

.fa-serv {
  color: #f4a261;
  line-height: 50px;
  text-align: center;
  display: block !important; }

.service-box h3 {
  font: 1.4em "Raleway", sans-serif;
  color: #f4a261;
  font-weight: 600;
  text-align: center;
  padding: 20px 0; }

.service-box h3:after {
  content: "";
  display: block;
  height: 1px;
  width: 100px;
  background-color: #f4a261;
  margin: 15px auto 5px; }

.service-box p {
  font: 1em "Lato", sans-serif;
  line-height: 1.5;
  color: #264653;
  font-weight: 400;
  text-align: center;
  padding: 0 40px; }

.serv-icon {
  height: 100px;
  width: 100px;
  display: inherit;
  margin: 0 auto; }

/* Section 4 - Strategy
------------------------------------------------------------------------------------------*/
.four {
  min-height: calc(100vh - 60px); }

.four-pt {
  min-height: calc(100vh - 60px); }

.strategy {
  margin: 0 auto;
  display: block;
  text-align: center;
  padding-top: 100px; }

x.strategy h2 {
  font: 2em "Raleway", sans-serif;
  color: #262626;
  font-weight: 800;
  display: inline;
  padding: 20px 100px 20px 100px;
  border-bottom: 1px solid #e1e8ed; }

.strategy h2 {
  font: 2.5em "Raleway", sans-serif;
  color: #f4a261;
  font-weight: 200;
  display: inline;
  xpadding: 20px 100px 0px 100px;
  xborder-bottom: 1px solid #f4a261; }

.strategy h2:after {
  content: "";
  display: block;
  height: 1px;
  width: 100px;
  background-color: #f4a261;
  margin: 15px auto 35px; }

.strategy p {
  font: 1.2em "Lato", sans-serif;
  color: #264653;
  font-weight: 400;
  text-align: center;
  max-width: 75%;
  padding: 40px 20px;
  margin: 0 auto; }

.strat-row {
  height: 50px;
  border-top: 1px solid #e1e8ed;
  border-bottom: 1px solid #e1e8ed;
  margin-bottom: 5px; }

.strat1 {
  height: 48px;
  background-color: #c2c3ba;
  width: 15%;
  display: inline-block; }

.strat2 {
  height: 48px;
  background-color: #c2c3ba;
  width: 25%;
  display: inline-block; }

.strat3 {
  height: 48px;
  background-color: #c2c3ba;
  width: 35%;
  display: inline-block; }

.strat4 {
  height: 48px;
  background-color: #c2c3ba;
  width: 45%;
  display: inline-block; }

.strat5 {
  height: 48px;
  background-color: #c2c3ba;
  width: 55%;
  display: inline-block; }

.strat6 {
  height: 48px;
  background-color: #c2c3ba;
  width: 65%;
  display: inline-block; }

.strat7 {
  height: 48px;
  background-color: #c2c3ba;
  width: 75%;
  display: inline-block; }

.strat8 {
  height: 48px;
  background-color: #c2c3ba;
  width: 85%;
  display: inline-block; }

.strat9 {
  height: 48px;
  background-color: #c2c3ba;
  width: 95%;
  display: inline-block; }

.strat10 {
  height: 48px;
  background-color: #c2c3ba;
  width: 100%;
  display: inline-block; }

.strat-row h3 {
  font: 1.2em "Lato", sans-serif;
  color: #262626;
  display: inline;
  line-height: 50px;
  vertical-align: top;
  padding-left: 10px;
  font-weight: 900; }

.strat8 h4 {
  font: 1.2em "Lato", sans-serif;
  color: white;
  line-height: 50px;
  text-align: right;
  vertical-align: top;
  padding-right: 10px;
  font-weight: 900; }

.strat9 h4 {
  font: 1.2em "Lato", sans-serif;
  color: white;
  line-height: 50px;
  text-align: right;
  vertical-align: top;
  padding-right: 10px;
  font-weight: 900; }

.strat10 h4 {
  font: 1.2em "Lato", sans-serif;
  color: white;
  line-height: 50px;
  text-align: right;
  vertical-align: top;
  padding-right: 10px;
  font-weight: 900; }

.strat-row h4 {
  font: 1.2em "Lato", sans-serif;
  color: white;
  line-height: 50px;
  text-align: right;
  vertical-align: top;
  padding-right: 10px;
  font-weight: 900; }

/* Section 5 - Recent Work
------------------------------------------------------------------------------------------*/
.five {
  min-height: calc(100vh - 60px);
  background-color: #fafafa; }

.five-pt {
  min-height: calc(100vh - 60px); }

.work {
  margin: 0 auto;
  display: block;
  text-align: center;
  padding-top: 60px; }

.work h2 {
  font: 2.5em "Raleway", sans-serif;
  color: #f4a261;
  font-weight: 200;
  display: inline;
  xpadding: 20px 100px 0px 100px;
  xborder-bottom: 1px solid #f4a261; }

.work h2:after {
  content: "";
  display: block;
  height: 1px;
  width: 100px;
  background-color: #f4a261;
  margin: 15px auto 35px; }

.work p {
  font: 1.2em "Lato", sans-serif;
  color: #264653;
  font-weight: 400;
  text-align: center;
  max-width: 75%;
  padding: 0 20px;
  margin: 0 auto; }

.work-wrap {
  max-width: 1200px; }

.work-logo {
  display: inline-block;
  width: 250px;
  margin: 75px 50px; }

.work-logo-med {
  display: inline-block;
  width: 300px;
  margin: 0 50px; }

x.work-logo:hover {
  display: inline-block;
  width: 275px;
  margin: 0 50px; }

.vbf:hover {
  width: 275px; }

.showcase {
  min-height: calc(100vh - 60px);
  padding-top: 60px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background-color: #fafafa; }

.sc-image {
  width: 50%;
  margin: 0px auto;
  display: block; }

/* Blog
------------------------------------------------------------------------------------------*/
.note-book {
  min-height: calc(30vh - 60px);
  background: url("../images/background/bwnotepad1.jpg") no-repeat;
  background-position: center;
  margin-bottom: 50px; }

.note-book h1 {
  font: 5em "Oswald", sans-serif;
  font-weight: 800;
  text-align: center;
  color: #f4a261;
  padding-top: 100px;
  letter-spacing: -1px;
  text-transform: uppercase; }

.blog-logo {
  display: inline;
  height: 100px;
  transform: translateY(20px);
  padding: 0 10px; }

.goto-blog-logo {
  display: inline;
  height: 30px;
  transform: translateY(5px);
  padding: 0 5px;
  fill: #f4a261; }

.inline {
  display: inline; }

.blog-space {
  margin: 0 auto;
  display: block;
  text-align: center;
  xpadding-top: 100px; }

.blog-space h2 {
  font: 1.6em "Raleway", sans-serif;
  color: #264653;
  font-weight: 600;
  text-align: left;
  max-width: 75%;
  line-height: 1.6;
  padding: 0 20px;
  margin: 0 auto; }

.blog-space p {
  font: 1.2em "Lato", sans-serif;
  color: #264653;
  font-weight: 400;
  text-align: left;
  max-width: 75%;
  line-height: 1.6;
  padding: 0 20px 30px;
  margin: 0 auto; }

/* Animated Buttons
------------------------------------------------------------------------------------------*/
/* Nav buttons moved to nav.scss */
.learn-about-button {
  margin-top: 50px;
  text-align: center; }

.learn-about-button a {
  font: 1.6em "Raleway", sans-serif;
  font-weight: 800; }

.read-blog-button {
  margin-top: 50px;
  text-align: center;
  transform: translateY(150px); }

.read-blog-button a {
  font: 1.6em "Raleway", sans-serif;
  font-weight: 800; }

/* Section 6 - Contact
------------------------------------------------------------------------------------------*/
.six {
  min-height: calc(100vh - 60px); }

.six-pt {
  min-height: calc(100vh - 60px); }

.contact {
  margin: 0 auto;
  display: block;
  text-align: center;
  padding-top: 100px; }

.contact h2 {
  font: 2.5em "Raleway", sans-serif;
  color: #f4a261;
  font-weight: 200;
  display: inline;
  xpadding: 20px 100px 20px 100px;
  xborder-bottom: 1px solid #e1e8ed; }

.contact h2:after {
  content: "";
  display: block;
  height: 1px;
  width: 100px;
  background-color: #f4a261;
  margin: 15px auto 35px; }

.contact p {
  font: 1.2em "Lato", sans-serif;
  color: #264653;
  font-weight: 400;
  text-align: center;
  max-width: 75%;
  padding: 40px 20px;
  margin: 0 auto; }

.fa-contact {
  color: #f4a261;
  line-height: 100px;
  text-align: center;
  display: inline-block !important;
  margin: 0 50px; }
  .fa-contact:hover {
    color: #262626; }

.contact-icon {
  color: #f4a261;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .contact-icon:hover {
    color: #262626; }

/* Fonts, Styles & Colors
------------------------------------------------------------------------------------------*/
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1.2em; }

h5 {
  font-size: 1em; }

h6 {
  font-size: .75em; }

p {
  font-size: .9em; }

.opensans {
  font-family: "Open Sans", sans-serif; }

.nova {
  font-family: "novecento_normal"; }



.black {
  color: #262626; }

.white {
  color: white; }

.lt-gold {
  color: #c2c3ba; }

.dk-gold {
  color: #858776; }

/* Logo
------------------------------------------------------------------------------------------*/
.logo-box {
  margin: auto;
  position: absolute;
  height: 226px;
  width: 226px;
  top: 0;
  right: 18px;
  bottom: 18px;
  left: 0;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px; }

.logo {
  border: 15px solid #e1e1e1;
  border-radius: 50%;
  box-shadow: 0px 0px 1px #e1e8ed;
  background-color: #e1e1e1; }

.bg-logo {
  background: url("../images/nfn-logo.svg") no-repeat;
  width: 350px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center; }

.svg {
  height: 75px; }

/* Footer
------------------------------------------------------------------------------------------*/
/* Page Elements
------------------------------------------------------------------------------------------*/
/* Stuff
------------------------------------------------------------------------------------------*/
.stuff {
  padding-top: 100px; }

.stuff-img {
  width: 400px;
  float: left;
  margin: 20px; }

.stuff-img-ok {
  float: left;
  margin: 20px; }

/* WP Specific
------------------------------------------------------------------------------------------*/
/* Alignment Classes
------------------------------------------------------------------------------------------*/
.left {
  float: left !important; }

.right {
  float: right !important; }

/* Color & Font Classes
------------------------------------------------------------------------------------------*/
.bold {
  font-weight: 700; }

.hidden {
  visibility: hidden; }

/* Page Transitions
------------------------------------------------------------------------------------------*/
html, body {
  height: 100%; }

.pt-perspective {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px; }

.pt-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.pt-page-current,
.no-js .pt-page {
  visibility: visible;
  z-index: 1; }

.no-js body {
  overflow: auto; }

.pt-page-ontop {
  z-index: 999; }

/* Text Styles, Colors, Backgrounds */
.pt-page-1 {
  background: #0ac2d2; }

.pt-page-2 {
  background: #7bb7fa; }

.pt-page-3 {
  background: #60d7a9; }

.pt-page-4 {
  background: #fdc162; }

.pt-page-5 {
  background: #fd6a62; }

.pt-page-6 {
  background: #f68dbb; }

/* Triggers (menu and button) */
.pt-triggers {
  position: absolute;
  xwidth: 300px;
  z-index: 999999;
  xtop: 12%;
  left: 50%;
  xmargin-top: 130px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

.no-js .pt-triggers {
  xdisplay: none; }

.pt-triggers .dl-menuwrapper button,
.pt-touch-button {
  border: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 10px 0 20px;
  padding: 0px 20px;
  line-height: 50px;
  height: 50px;
  letter-spacing: 1px;
  width: 100%;
  cursor: pointer;
  display: block;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.pt-touch-button {
  background: #fff;
  color: #aaa; }

.pt-triggers .dl-menuwrapper button {
  margin-bottom: 0; }

.pt-touch-button:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }

.touch .pt-triggers .dl-menuwrapper {
  display: none; }

.pt-message {
  display: none;
  position: absolute;
  z-index: 99999;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #da475c;
  color: #fff;
  text-align: center; }

.pt-message p {
  margin: 0;
  line-height: 60px;
  font-size: 26px; }

.no-cssanimations .pt-message {
  display: block; }

@media screen and (max-width: 47.4375em) {
  .pt-page h1 {
    font-size: 3em; }

  .pt-triggers .dl-menuwrapper {
    display: none; } }
@media screen and (max-height: 45.9em) {
  .pt-triggers .dl-menuwrapper li a {
    padding-top: 2px;
    padding-bottom: 2px; }

  .pt-triggers .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after {
    line-height: 24px; } }
@media screen and (max-height: 38em) {
  .pt-triggers .dl-menuwrapper {
    display: none; } }
/* Make Over Temp
------------------------------------------------------------------------------------------*/
body {
  position: inherit; }

.temp-wrapper {
  width: 100%; }

.holder {
  margin: 25% auto;
  background: url(../images/nfn-logo.svg) no-repeat;
  height: 300px;
  max-width: 600px;
  border-bottom: none; }

.compname {
  font-family: "Open Sans", arial;
  font-size: 34px;
  font-weight: 700;
  color: #da2e2f;
  padding: 75px 0 0 210px; }

.makeover {
  font-family: "Open Sans", arial;
  font-size: 24px;
  font-weight: 300;
  color: #ccc;
  padding-left: 250px;
  line-height: 6; }

.temp-footer {
  width: 100%;
  position: absolute;
  bottom: 0; }

.contact {
  max-width: 800px;
  margin: 0 auto; }

.contactp {
  font-family: "Open Sans", arial;
  font-size: 22px;
  font-weight: 400;
  color: #666;
  text-align: center;
  padding: 0;
  margin: 0; }

.address {
  font-family: "Open Sans", arial;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  text-align: center;
  padding: 0;
  margin-bottom: 5px; }

.contactp a {
  color: #666;
  text-decoration: none; }

.contactp a:hover {
  color: #111; }

.entericon {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 25px;
  border: none; }

.viewsite {
  font-family: "Open Sans", arial;
  font-size: 10px;
  font-weight: 400;
  color: #666;
  padding-left: 40px; }

.work-box {
  width: 80%;
  margin: 0 auto;
  margin-top: 200px; }

.work-box li {
  font-family: "Open Sans", arial;
  font-size: 22px;
  font-weight: 400;
  padding-top: 10px;
  text-align: center;
  color: #666; }
  .work-box li a {
    color: #666; }
    .work-box li a:hover {
      color: black; }

/* Media Queries
------------------------------------------------------------------------------------------*/
@media screen and (max-width: 820px) {
  .home-body-top h1 {
    font-size: 2em; }

  .mobile-nav {
    display: block; }

  .main-nav {
    display: none; }

  .about p, .services p, .strategy p, .work p, .contact p {
    max-width: 98%;
    font: 1.3em "Lato", sans-serif;
    line-height: 1.5; }

  .one {
    background-position: 55% 0; }

  .service-box {
    width: 98%;
    margin: 1%; }

  .service-box p {
    padding-bottom: 50px;
    font: 1.3em "Lato", sans-serif;
    line-height: 1.5; } }
@media screen and (max-width: 700px) {
  .one {
    min-height: calc(60vh - 60px);
    background-position: 0;
    background-size: cover; }

  .home-body-top h1 {
    padding-top: 100px;
    font-size: 2.3em; }

  .home-body-top h5 {
    font-size: 1.8em; }

  .holder {
    margin: 50% auto; }

  .makeover {
    font-size: 16px;
    padding-left: 200px; }

  .contactp {
    font-size: 12px; }

  .about h2, .services h2, .strategy h2, .work h2, .contact h2 {
    max-width: 98%;
    font: 1.8em "Raleway", sans-serif, sans-serif;
    font-weight: 800;
    xpadding: 5px 40px 20px 40px; }

  .about, .services, .strategy, .work, .contact {
    xpadding-top: 60px; }

  .services-button {
    margin-top: 110px; }

  .strat1 {
    height: 48px;
    background-color: #c2c3ba;
    width: 55%;
    display: inline-block; }

  .strat2 {
    height: 48px;
    background-color: #c2c3ba;
    width: 60%;
    display: inline-block; }

  .strat3 {
    height: 48px;
    background-color: #c2c3ba;
    width: 65%;
    display: inline-block; }

  .strat4 {
    height: 48px;
    background-color: #c2c3ba;
    width: 70%;
    display: inline-block; }

  .strat5 {
    height: 48px;
    background-color: #c2c3ba;
    width: 75%;
    display: inline-block; }

  .strat6 {
    height: 48px;
    background-color: #c2c3ba;
    width: 80%;
    display: inline-block; }

  .strat7 {
    height: 48px;
    background-color: #c2c3ba;
    width: 85%;
    display: inline-block; }

  .strat8 {
    height: 48px;
    background-color: #c2c3ba;
    width: 90%;
    display: inline-block; }

  .strat9 {
    height: 48px;
    background-color: #c2c3ba;
    width: 95%;
    display: inline-block; }

  .strat10 {
    height: 48px;
    background-color: #c2c3ba;
    width: 100%;
    display: inline-block; }

  .work-logo {
    display: inline-block;
    width: 250px;
    margin: 0 auto; }

  .two-break {
    background-attachment: local; } }
@media screen and (max-width: 600px) {
  .top-logo {
    margin: 3px 30px 0 10px; }

  .mobile-menu-button {
    margin: 10px 10px 0 0; }

  .home-body-top {
    xpadding-top: 100px; }

  .two {
    background-size: cover; } }
@media screen and (max-width: 420px) {
  .top-logo {
    width: 240px; } }