/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

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

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

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

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

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

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

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

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

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

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

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

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

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

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

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

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}


@charset "UTF-8";
/* import */
@font-face {
  font-family: 'FutureCity';
  src: url("../fonts/FutureCity/futurecity-bold-webfont.eot");
  src: url("../fonts/FutureCity/futurecity-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/FutureCity/futurecity-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'FutureCity';
  src: url("../fonts/FutureCity/futurecity-semibold-webfont.eot");
  src: url("../fonts/FutureCity/futurecity-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/FutureCity/futurecity-semibold-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'FutureCity';
  src: url("../fonts/FutureCity/futurecity-regular-webfont.eot");
  src: url("../fonts/FutureCity/futurecity-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/FutureCity/futurecity-regular-webfont.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}




body {
  font-family: 'open-sans';
  background: #e7e5e5;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  
}

.container {
   margin:0 auto;
   display: block;
   background-color: #fff;
   position: relative;
   padding: 0;
   top: 0;
   max-width: 1400px;
}

.whitebg {
   background-color: #fff;
}

.hide {
   display: none;
}

#nav {
   height: 80px; 
   position: fixed;
   background: transparent;
   left: 0;
   top: 0;
   z-index: 9999;
   width: 100%;
}

.nav-container {
   display: block;
   overflow: hidden;
   height: 80px;
   max-width: 1400px;
   margin: 0 auto;
   background-color: #fff;
   border-bottom: 1px solid #e4e4e4;
   width: 100%;
   position: relative;
}


table td {
    margin-right: 75px;
    text-align: center;
    padding: 0;
    margin: 0;
    padding-bottom: 35px;
}

.dashed {
    border-top: 1px dashed #fff;
    width: 100%;
    font-family: Arial;
    font-style: normal;
    margin-top: 15px;
    margin-bottom: 15px; 
}

.dashed-box div {
	width: 100%;
	border-bottom: 1px dashed #6f277f;
	font-size: 17px;
	padding-bottom: 15px;
	padding-top: 10px;
	color: #6f277f;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}

table {
    margin-bottom: 30px;
}

.wayofworking {
    height: 1380px;
}

.white-text p, .white-text h1, .white-text h2, .white-text .quote, .white-text h3, .white-text {
    color:  #fff;
}

.redhex {
   background: url(/images/hackathon/hexagon-red.png) no-repeat;
   color: #fff;
   width: 97px;
   height: 90px;
   display: block;
   text-align: center;
   font-size: 50px;
   font-family: 'FutureCity';
   font-weight: 100;
   padding-top: 23px;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
}

.count {
   color: #fff;
   font-size: 50px;
   font-family: 'FutureCity';
   font-weight: 100;
   z-index: 999;
   width: 97px;
   text-align: center;
   position: absolute;
   left: 0;
   top: 0;
   margin-top: 25px;
   
}

.carousel-wrap {
   margin: 0 auto;
   display: block;
   position: relative;
   width: 960px;
   clear: both;
   margin-bottom: 40px;
   margin-top: 0px;
}

.margin60 {
   margin-bottom: 60px;
}

.margin40 {
   margin-bottom: 40px;
}


.carousel, .carousel-no-page {
   position: relative;
   width: 100%;
   float: left;
   margin: 0;
   padding: 0;
}

.carousel li, .carousel-no-page li {
   margin: 0; 
   padding: 0;
   border-right: none;
}

.content, .content-wide, .btn-wrap {
   width: 960px;
   position: relative;
   z-index: 9;
   text-align: left;
   margin: 0 auto;
   float: none;
   display: block;
   overflow: hidden;
}

.btn-wrap {
   width: 680px;
}

.content-wide {
   width: 960px;
   padding: 0;
}

.tab {
   float: left;
   display: inline;
   margin-right: 37px;
   font-size: 18px;
   padding: 20px 15px 20px 15px;
   background-color: #f2f2f2;
   border: 1px solid #f2f2f2;
   font-weight: 100;
   color: #000;
   border-radius: 5px;
   margin-bottom: 40px;
   width: 180px;
   text-align: center;
   font-family: 'FutureCity';
}


.active-tab, .tab:hover {
   color: #e20b4e;
   border: 1px solid #e20b4e;
   background-color: #fff;
}

.content-inner {
   padding: 60px 0px 60px 0px;
   float: left;
   display: block; 
   width: 100%;
   text-align: left;
   margin: 0;
}

section {
   position: relative;
   margin: 0;
   padding: 0;
   float: left;
   display: block;
   clear: both;
   max-width: 1400px;
   width: 100%;
   background-color: #f6f6f6;
}


/*
.linked-maps, .community-mapping, .future-makers-fb, .engage-the-city {
	
}
*/


.people-make, .whatis, .future-city, .engage-bg, .engage-intro, .dashboard-one, .dashboard-three, .wayofoworking, .whatisopendata, .our-platform, .myglasgow_header, .engage-the-city, .social-transport, .the-hardware, .active-travel, .safe-routes, .intelligent-lighting, .energy-header, .glasgow-energy, .insulation, .demandside, .renewables, .future-makers-fb, .linked-maps, .improving-services, .snook-header, .community-mapping, .mapping, .data-centre, .open-data, .intro-panel, .dashboards-bg, .credits, .reports {
    background-image: url(/images/share_your_story.jpg);
    overflow: hidden;
	background-position: top;
	transition: all 0.4s ease-in-out 0s;
	background-attachment: scroll !important;
	background-repeat: no-repeat !important;
	position: relative;
	display: block;
	clear: both;
	margin: 0 auto;
	padding: 0;

}

.people-make {
	height: 1000px;
}

.intro-panel {
	margin-top: 80px !important;
	max-height: 600px !important;
}

.open-data {
	height: 500px;
	background: url(/images/FallbackImages/hero-open-data-fallback.jpg);
	background-size: 100% auto !important;
}


.hex {
     background: url(/images/whitehex.png) no-repeat 50% 25% #6f277f;
     color: #fff;
     font-size: 50px;
     font-family: 'FutureCity';
     font-weight: 100;
     height: 170px;
     padding-top: 55px;
     display: block;
     text-align: center;
}

#purple .third {
     background-color: #6f277f;
     padding-top: 0px;
     height: 220px;
     color: #fff;
     text-align: center;
     margin-bottom: 40px;
     position: relative;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
}

.third .label {
      bottom: 0;
      margin-bottom: 20px;
      left:0;
      text-align: center;
      width: 100%;
      position: absolute;
}

.intro-panel {
	  background-image: url(/images/FUT-01-Homepage-Hero-Fallback.jpg);
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
}

.whatis {
    background-image: url(/images/day-in-life-bg.jpg);
    background-size: 1400px 942px;
    height: 942px;
}

.myglasgow_header {
    background-image: url(/images/myglasgow_header.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.data-centre {
    background-image: url(/images/FUT-01-Ops-Centre.jpg);
    background-size: 1400px 600px;
}

.gris {
    background-color: #f2f2f2;
}

.wayofworking {
    background-image: url(/images/hackathon/wayofworking.jpg);
    background-size: 1400px 1448px; 
    height: 1448px;
}

.open-data {
	background-image: url(/images/FallbackImages/hero-open-data-fallback.jpg);
	height: 700px;
}

.future-city {
    background-image: url(/images/what-is-a-futurecity-bg.jpg);
    background-size: 1400px 975px;
    height: 975px;  
}

.mapping {
    background-image: url(/images/tech-spec-background.jpg);
    background-size: 1400px 453px;
    height: 453px;
}

.engage-bg {
    background-image: url(/images/FallbackImages/hero-hacking-the-future-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.our-platform {
    background: url(/images/data/dataplatform.jpg) no-repeat #6f277f bottom left;
    background-size: 1400px 1847px;
    height: 1847px;
}

.dashboard-one  {
     background-image: url(/images/intro-background-asset.jpg);
    background-size: 1400px 1370px;
    height: 1370px;
}

.dashboard-three  {
    background-image: url(/images/justthestart.jpg);
    background-size: 1400px 1140px;
    height: 1140px;
}

.whatisopendata {
    background-image: url(/images/data-globe.jpg);
    background-size: 1400px 551px;
    height: 551px;
}

.engage-the-city {
    background-image: url(/images/FallbackImages/hero-engaging-the-city-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.social-transport {
    background-image: url(/images/FallbackImages/hero-social-transport-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.community-mapping {
    background-image: url(/images/FallbackImages/hero-community-mapping-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.linked-maps {
    background-image: url(/images/linkedmap_header.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.linked-data {
	background: url(/images/ipad.jpg) no-repeat 90% 50%;
}

.the-hardware {
    background-image: url(/images/transport_hardware.jpg);
    background-size: 1400px 859px;
    height: 859px;
}

.active-travel {
    background-image: url(/images/FallbackImages/hero-active-travel-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.improving-services {
    background-image: url(/images/improving_services.jpg);
    background-size: 1400px 1097px;
    height: 1097px;
}

.safe-routes {
    background-image: url(/images/school_routes.jpg);
    background-size: 1400px 814px;
    height: 814px;
}

.intelligent-lighting {
    background-image: url(/images/streetlighting_header.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.riverside-walkway {
    background-image: url(/images/riverside_walkway.jpg);
    background-size: 1400px 756px;
    height: 756px;
}

.energy-header {
    background-image: url(/images/FallbackImages/hero-energy-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.gordon-street {
    background-image: url(/images/Gordon-Street.jpg);
    background-size: 1400px 808px;
    height: 808px;
}

.merchant-city {
    background-image: url(/images/merchant_city.jpg);
    background-size: 1400px 807px;
    height: 807px;
}

.glasgow-energy {
    background-image: url(/images/glasgowcityenergy.jpg);
    background-size: 1400px 1336px;
    height: 1336px;
    z-index: 99;
    position: relative;
}

.future-makers-fb {
    background-image: url(/images/FallbackImages/hero-future-makers-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}

.snook-header {
    background-image: url(/images/FallbackImages/hero-citizen-engagement-fallback.jpg);
    background-size: 1400px 600px;
    height: 600px;
}


.insulation {
    background-image: url(/images/insulation.jpg);
    background-size: 1400px 1229px;
    height: 1229px;
}


.renewables {
    background-image: url(/images/Renewables-Mapping.jpg);
    background-size: 1400px 1549px;
    height: 1549px;
}


.demand-side {
    background-image: url(/images/demandside.jpg);
    background-size: 1400px 1323px;
    height: 1323px;
}

.credits {
	height: 500px;
	background: url(/images/FUT-03-Credits-Page.jpg);
	background-size: 100% auto !important;
}

.reports {
	height: 500px;
	background: url(/images/FUT-03-Reports-Page-v2.jpg);
	background-size: 100% auto !important;
}

.shadow {
    background: url(/images/bottom-shadow.png) repeat-x bottom;
}

.wrap-two-sections {
    position: relative;
    display: block;
    clear: both;
}

.plug {
    background: url(/images/plug.png) no-repeat 70% 100% #f2f2f2;
    width: 300px;
    height: 490px;
    position: absolute;
    z-index: 9;
    left: 55%;
    bottom: 0px;
    margin-bottom: -890px;
}

.black {
    background-color: #000;
}

.image-placeholder {
    width: 100%;
    height: 540px;
    background-color: #44b7b0;
    margin-bottom: 20px;
}

.initiative h2 {
   margin-bottom: 10px;
}

.dashboards-bg {
	background: url(/images/FallbackImages/hero-dashboards-fallback.jpg) no-repeat;
	background-size: 100% 100%;
}

.my-glasgow {
	background: url(/images/FallbackImages/hero-my-glasgow-fallback.jpg) no-repeat;
	background-size: 100% 100%;

}


.third {
    width: 290px;
    margin-right: 40px;
    float: left;
    display: inline;
    padding-top: 225px;
    height: 50px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.dashes .third {
     padding-top: 0px;
     background-color: #fff;
     height: 275px;
}

.dashes .third img {
     display: block;
     margin-top: 20px;
     margin-bottom: 20px;
     padding-left: 60px;
}

.bottom20 {
    margin-bottom: 20px;
}

.wrapboxes {
     margin-top: 10px;
     clear: both;
     display: block;
     float: left;
     width: 100%;
     text-align: center;
}

.behaviour {
     margin-bottom: 0px;
}

.wrapboxes .title p {
     width: 80%;
     margin: 0 auto;
}

.half ul {
     margin: 0;
     padding: 0;
     list-style: circle;
     border: none; 
}

.half ul li {
     float: left;
     display: block;
     font-size: 17px;
     font-family: "open-sans";
     border: none;
     padding: 0;
     margin: 0;
     clear: both;
     padding-left: 10px;
     margin-bottom: 7px;
}

.twothirds {
    width: 622px;
    float: left;
    display: inline;
    margin-right: 40px;
    height: 10px;
    margin-bottom: 40px;
    padding-top: 15px;
    background-color: #fff;
    height: 260px;
}

.weather {
    background: url(/images/dashboards/weegit-1.png) no-repeat 50% 30%  #fff; 
}

.health {
    background: url(/images/dashboards/weegit-2.png) no-repeat 50% 30%  #fff; 
}

.travel {
    background: url(/images/dashboards/weegit-3.png) no-repeat 50% 30%   #fff; 
}

.leisure {
    background: url(/images/dashboards/weegit-4.png) no-repeat 50% 30%  #fff; 
}

.community {
    background: url(/images/dashboards/weegit-5.png) no-repeat 50% 30%  #fff; 
}

.atravel {
    background: url(/images/data/icon-active-travel.png) no-repeat 50% 30%  #6f277f; 
}

.demographics {
    background: url(/images/data/icon-demographics.png) no-repeat 50% 30%  #6f277f; 
}

.economy {
    background: url(/images/data/icon-economy.png) no-repeat 50% 30%  #6f277f; 
}


.energy {
    background: url(/images/data/icon-energy.png) no-repeat 50% 30%  #6f277f; 
}

.environment {
    background: url(/images/data/icon-environment.png) no-repeat 50% 30%  #6f277f; 
}

.education {
    background: url(/images/data/icon-education.png) no-repeat 50% 30%  #6f277f; 
}


.geography {
    background: url(/images/data/icon-geography.png) no-repeat 50% 30%  #6f277f; 
}

.healthcare {
    background: url(/images/data/icon-health.png) no-repeat 50% 30%  #6f277f; 
}

.living {
    background: url(/images/data/icon-living.png) no-repeat 50% 30%  #6f277f; 
}

.public-safety {
    background: url(/images/data/icon-public-safety.png) no-repeat 50% 30%  #6f277f; 
}

.tourism {
    background: url(/images/data/icon-tourism.png) no-repeat 50% 30%  #6f277f; 
}

.transportation {
    background: url(/images/data/icon-transportation.png) no-repeat 50% 30%  #6f277f; 
}


.energy-efficiency {
    background: url(/images/icon-energy-efficiency.png) no-repeat 50% 10% ;
}

.ops-centre {
    background: url(/images/icon-ops-centre.png) no-repeat 50% 10% ;
}

.noise-detection {
    background: url(/images/icon-noise-detection.png) no-repeat 50% 10% ;
}

.movement-detection {
    background: url(/images/icon-movement-detection.png) no-repeat 50% 10% ;
}

.air-pollution {
    background: url(/images/icon-air-pollution.png) no-repeat 50% 10% ;
}


.wifi {
    background: url(/images/icon-wifi-service.png) no-repeat 50% 10% ;
}

.open-mapping {
   background: url(/images/Community-Mapping-Icons/analogue-mapping.png) no-repeat 50% 10%;
}

.open-source {
   background: url(/images/Community-Mapping-Icons/open-source-mapping.png) no-repeat 50% 10%;
}

.pres-map {
   background: url(/images/Community-Mapping-Icons/presentation-mapping.png) no-repeat 50% 10%;
}

.prop-map {
   background: url(/images/Community-Mapping-Icons/proprietary-mapping.png) no-repeat 50% 10%;
}

.map-app {
   background: url(/images/Community-Mapping-Icons/mapping-apps.png) no-repeat 50% 10%;
}

.analogue {
   background: url(/images/Community-Mapping-Icons/analogue-mapping.png) no-repeat 50% 10%;
}

.cctv {
   background: url(/images/cctv.png) no-repeat 50% 5%;
}

.traffic {
   background: url(/images/traffic.png) no-repeat 50% 5%;
}

.emergency {
   background: url(/images/emergency.png) no-repeat 50% 5%;
}

.police {
   background: url(/images/police.png) no-repeat 50% 5%;
}

.comm {
   background: url(/images/community.png) no-repeat 50% 5%;
}

.security {
   background: url(/images/security.png) no-repeat 50% 5%;
}

.left {
   float: left;
   display: inline;
}


.intelligent-wrap .third {
    height: 360px;
    margin-bottom: 40px;
    padding-top: 0px;
}

.intelligent-wrap .third img {
    width: 180px;
}


.intelligent-wrap strong {
    color: #00a0df;
    font-size: 17px;
    font-family: "open-sans";
    display: block;
}

.hr {
    height: 1px;
    background-color: #cfcfcf;
    width: 290px;
    margin: 0 auto;
    margin-top: 45px;
    margin-bottom: 35px;
}

.notoppad {
    margin-top: 0px;
}


.engage-one {
    background: url(/images/hackathon/intro.jpg);
    background-size: 1400px 1278px;
    height: 400px;
}

.hackers {
    background: url(/images/hackers.jpg);
    background-size: 1400px 890px;
    height: 890px;
}


.banner-area video {
	position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    margin-left: 0px;
    overflow: hidden;
    width: 100% !important;
    max-width: 1400px;
    display: block;
}

.redbg {
    background-color: #e20b4e;
}

.red {
    color: #e20b4e;
}



.placeholder {
     color: #fff;
     border-top: 1px solid #fff;
     border-bottom: 1px solid #fff;
     padding: 90px 0px 90px 0px;
     margin: 60px 0px 60px 0px;
}


.btn, .white-btn, .purple-btn {
   font-size: 18px;
   font-family: 'FutureCity';
   font-weight: 700;
   border: 1px solid #000;
   border-radius: 5px;
   padding: 20px;
   float: left;
   display: block;
   width: 320px;
   text-align: center;
   margin-bottom: 20px;
   -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

.white-btn, .purple-btn {
   background-color: #fff;
   width: auto;
   margin-right: 20px;
   color: #6f277f;
   font-weight: 300;
   border: none;
   margin: 10px 20px 40px 0px;
}

.purple-btn {
	background-color: #6f277f;
	color: #fff;
	width: 250px;
}

.btn:hover {
   background-color: #000;
   color: #fff;
   -o-transition: background .1s ease-in;
  -ms-transition: background .1s ease-in;
  -moz-transition:background .1s ease-in;
  -webkit-transition: background .1s ease-in;
  /* ...and now override with proper CSS property */
  transition: background .1s ease-in;
}

.center .btn {
   float: none;
   margin: 0 auto;
}

.hackit {
   margin-left: 50px;
}

#data-pages .btn {
   float: left;
   margin-right: 40px;
   width: 310px;
}

#data-pages .btn.last {
   width: 210px;
}


#dashboards .btn {
   width: 330px;
}

.white-text .btn {
   border: 1px solid #fff;
   color: #fff;
}

.logo {
   width: 42px;
   height: 40px;
   background-size: 42px 40px;
   text-indent: -9999px;
   text-align: center;
   float: left;
}



#turquoise .logo {
   background: url(/images/nav/logo-turquoise-retina.png) no-repeat 50% 0%;	
   background-image: url(/images/SVGs/logo-turquoise.svg), none;
}



#pink .logo {
   background: url(/images/nav/logo-magenta-retina.png) no-repeat 50% 0%;
   background-image: url(/images/SVGs/logo-magenta.svg), none;
}

#orange .logo {
   background: url(/images/nav/logo-orange-retina.png) no-repeat 50% 0%;
   background-image: url(/images/SVGs/logo-orange.svg),none;
}

#purple .logo {
   background: url(/images/nav/logo-purple-retina.png) no-repeat 50% 0%;
   background-image: url(/images/SVGs/logo-purple.svg),none;
}

#blue .logo {
   background: url(/images/nav/logo-blue-retina.png) no-repeat 50% 0%;
   background-image: url(/images/SVGs/logo-blue.svg),none;
}

#red .logo  {
   background: url(/images/nav/logo-red-retina.png) no-repeat 50% 0%;
   background-image: url(/images/SVGs/logo-red.svg),none;
}

#nav-out h2 {
   margin-top: 15px;
}


#turquoise #nav-out h2, #turquoise #nav-out li a:hover {
    color: #44b7b0 !important;
}

#orange #nav-out h2, #orange #nav-out li a:hover  {
     color: #ff5b35  !important; 
}

#blue #nav-out h2, #blue #nav-out li a:hover  {
    color: #00A1DF  !important;
}

#pink #nav-out h2, #pink #nav-out li a:hover  {
    color: #e3007e  !important;
}

#purple #nav-out h2, #purple #nav-out li a:hover  {
    color: #6F277F  !important;
}

#red #nav-out h2, #red #nav-out li a:hover  {
    color: #E20B4E  !important;
}

.nav-item{
     width: 40px;
     height: 41px;
     background-position: center center !important;
     padding: 0 !important;
     background-repeat: no-repeat;
     margin-top: 0px;
     float: left;
     display: block;
     background-size: 40px 41px;
        display: inline-block;


}



.ops {
      background: url(/images/nav/ops-centre-grey-retina.png); 
      background-image: url(/images/SVGs/ops-centre-grey.svg),none;
      background-repeat: no-repeat;
}

.data {
	  background: url(/images/nav/data-grey-retina.png); 
      background-image: url(/images/SVGs/data-grey.svg), none; 
      background-repeat: no-repeat;
}

.demo  {
     background: url(/images/nav/demonstrator-grey-retina.png); 
     background-image: url(/images/SVGs/demonstrator-grey.svg), none; 
     background-repeat: no-repeat;
}

.engagement {
	 background: url(/images/nav/engagement-grey.png); 
     background-image: url(/images/SVGs/engagement-grey.svg), none ; 
     background-repeat: no-repeat;

}



#pink .ops:hover, .ops-preloaded-pink {
	 background: url(/images/nav/ops-centre-magenta-retina.png); 
     background-image: url(/images/SVGs/ops-centre-magenta.svg), none;  
     background-repeat: no-repeat;
}

#red .ops:hover, .ops-preloaded-red {
	background: url(/images/nav/ops-centre-red-retina.png);
     background-image: url(/images/SVGs/ops-centre-red.svg),none;  
     background-repeat: no-repeat;
}

#blue .ops:hover, .ops-preloaded-blue {
	background: url(/images/nav/ops-centre-blue-retina.png);
     background-image: url(/images/SVGs/ops-centre-blue.svg),none; 
     background-repeat: no-repeat; 
}

#orange .ops:hover, .ops-preloaded-orange {
	background: url(/images/nav/ops-centre-orange-retina.png);
     background-image: url(/images/SVGs/ops-centre-orange.svg),none; 
     background-repeat: no-repeat; 
}

#turquoise .ops:hover, .ops-preloaded-turquoise {
	background: url(/images/nav/ops-centre-turquoise-retina.png);
     background-image: url(/images/SVGs/ops-centre-turquoise.svg),none;
     background-repeat: no-repeat;  
}

#purple .ops:hover, .ops-preloaded-purple {
	background: url(/images/nav/ops-centre-purple-retina.png);
     background-image: url(/images/SVGs/ops-centre-purple.svg),none;
     background-repeat: no-repeat;  
}


#pink .data:hover, .data-preloaded-pink {
	 background: url(/images/nav/data-magenta-retina.png);
     background-image: url(/images/SVGs/data-magenta.svg),none; 
     background-repeat: no-repeat; 
}

#red .data:hover, .data-preloaded-red {
	background: url(/images/nav/data-red-retina.png);
     background-image: url(/images/SVGs/data-red.svg),none;  
     background-repeat: no-repeat;
}

#blue .data:hover, .data-preloaded-blue  {
	background: url(/images/nav/data-blue-retina.png);
     background-image: url(/images/SVGs/data-blue.svg),none;
     background-repeat: no-repeat;  
}

#orange .data:hover, .data-preloaded-orange  {
	 background: url(/images/nav/data-orange-retina.png);
     background-image: url(/images/SVGs/data-orange.svg),none; 
     background-repeat: no-repeat; 
}

#turquoise .data:hover, .data-preloaded-turquoise  {
	 background: url(/images/nav/data-turquoise-retina.png);
     background-image: url(/images/SVGs/data-turquoise.svg),none; 
     background-repeat: no-repeat; 
}

#purple .data:hover, .data-preloaded-purple  {
	 background: url(/images/nav/data-purple-retina.png);
     background-image: url(/images/SVGs/data-purple.svg),none; 
     background-repeat: no-repeat; 
}


#pink .demo:hover, .demo-preloaded-pink  {
	 background: url(/images/nav/demonstrator-magenta-retina.png);
     background-image: url(/images/SVGs/demonstrator-magenta.svg),none; 
     background-repeat: no-repeat; 
}

#red .demo:hover, .demo-preloaded-red {
	  background: url(/images/nav/demonstrator-red-retina.png);
      background-image: url(/images/SVGs/demonstrator-red.svg),none; 
      background-repeat: no-repeat;
}

#blue .demo:hover, .demo-preloaded-blue {
	 background: url(/images/nav/demonstrator-blue-retina.png);
     background-image: url(/images/SVGs/demonstrator-blue.svg),none; 
     background-repeat: no-repeat; 
}

#orange .demo:hover, .demo-preloaded-orange {
	 background: url(/images/nav/demonstrator-orange-retina.png);
     background-image: url(/images/SVGs/demonstrator-orange.svg),none;  
     background-repeat: no-repeat;
}

#turquoise .demo:hover, .demo-preloaded-turquoise {
	 background: url(/images/nav/demonstrator-turquoise-retina.png);
     background-image: url(/images/SVGs/demonstrator-turquoise.svg),none;
     background-repeat: no-repeat;  
}

#purple .demo:hover, .demo-preloaded-purple {
	 background: url(/images/nav/demonstrator-purple-retina.png);
     background-image: url(/images/SVGs/demonstrator-purple.svg),none; 
     background-repeat: no-repeat; 
}

.preloaders {
     visibility: hidden;
}


#pink .engagement:hover, .engage-preloaded-pink {
	 background: url(/images/nav/engagement-magenta.png);
     background-image: url(/images/SVGs/engagement-magenta.svg),none;
     background-repeat: no-repeat;  
}

#red .engagement:hover, .engage-preloaded-red {
	 background: url(/images/nav/engagement-red.png);
     background-image: url(/images/SVGs/engagement-red.svg),none;
     background-repeat: no-repeat;  
}

#blue .engagement:hover, .engage-preloaded-blue {
	 background: url(/images/nav/engagement-blue.png);
     background-image: url(/images/SVGs/engagement-blue.svg),none; 
     background-repeat: no-repeat; 
}

#orange .engagement:hover, .engage-preloaded-orange {
	 background: url(/images/nav/engagement-orange.png);
     background-image: url(/images/SVGs/engagement-orange.svg),none;
     background-repeat: no-repeat;  
}

#turquoise .engagement:hover, .engage-preloaded-turquoise {
	 background: url(/images/nav/engagement-turquoise.png);
     background-image: url(/images/SVGs/engagement-turquoise.svg),none; 
     background-repeat: no-repeat; 
}

#purple .engagement:hover, .engage-preloaded-purple {
	 background: url(/images/nav/engagement-purple.png);
     background-image: url(/images/SVGs/engagement-purple.svg),none;  
     background-repeat: no-repeat;
}


.myglasgow .label {
   color: #fff;
   margin-bottom: 30px;
}

.fifth {
   float: left;
   display: inline;
   margin-right: 25px;
}

.open-maps .fifth {
   padding-top: 200px;
   width: 167px;
}

.open-maps strong {
   display: block;
   color: #44b7b0;
   font-size: 15px;
}



.wrap {
    overflow-y: auto;
    width: 100%;
    float: left;
    display: block;
    padding: 0px;
}

.fixed {
    width: 600px;
}

.right {
    float: right;
}

.behaviour strong {
    display: block;
}

.behaviour .third {
    padding-top: 20px;
    margin-bottom: 80px;
    height: 170px;
    text-align: left;
}


.cycling-app {
    background: url(/images/cyclingapp.jpg) no-repeat 75% 140%;  
    height: 812px;
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 400px;
    height: 800px;
    margin-right: -450px;
}

.app-bg {
    background: url(/gifs/mapsicons/map-flyover-slow-loop_med.gif) no-repeat;
    position: absolute;
    width: 300px;
    height: 490px;
    left: 0;
    top: 0;
    z-index: 9;
    margin-top: 150px;
    margin-left: 87px;
    display: block;
}

.myglasgowapp img {
    z-index: 999;
    position: relative;
}

.walk-wrap {
    height: 700px;
}

.walking-app {
    background: url(/images/walkingapp.jpg) no-repeat 21% 100%;  
    height: 713px;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 430px;
    margin-left: -480px;

}

.sustrans {
    background: url(/images/walkonomics.jpg) no-repeat 85% 60% !important;  
    height: 710px !important;
}


ul {
    list-style: none;
    margin: 0;
    padding: 0; 
}

li {
     display: block;
     float: left;
     padding: 10px 22px 17px 21px;
     border-right: 1px solid #e5e5e5;
        -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;    
}



.top-nav li:hover {
     
}

.top-nav li {
      padding: 20px;
      margin-top: 0;
}

.top-nav li a {
	  text-indent: -9999px;
}


.engage h3 {
   color: #e20b4e;
}

.intro-panel h1, .intro-panel p, .intro-panel a {
   color: #fff;
}

.bullet li {
      background: url(/images/bullet.gif) no-repeat 0% 50% ;
      padding-left: 30px;
}

footer {
   width: 100%;
   padding: 40px 0px 40px 0px;
   display: block;
   font-size: 12px;
   text-align: center;
   clear: both;
   border-top: 1px solid #e5e5e5;
}

.text {
   position: absolute;
   z-index: 9;
   top: 0;
   left: 0;
   right: 0;
   padding-top: 150px;
   text-align: center;
   margin: 0 auto;
   width: 790px;
}

.text p {
   width: 80%;
   margin: 0 auto;
   text-align: center;
   margin-bottom: 20px;
   font-size: 19px;
}

.text a {
   margin-top: 25px;
   font-size: 19px;
}

.text strong {
	color: #fff;
}

.clear {
    clear: both;
    margin-top: 40px;
}

.app {
    background: url(/images/iphone5.gif) no-repeat 43% 0%;
    height: 605px;
}

.app img {
    padding-left: 100px;
    padding-top: 80px;
}


a {
    text-decoration: none;
    color: #000;
}

.inner {
     padding: 20px;
}

h1 {
    font-family: 'FutureCity';
    font-weight: 100;
    font-size: 60px;
    color: #000;
    margin: 0;
    margin-bottom: 30px;
    margin-top: 100px;
}

h2 {
     font-size: 40px;
     font-weight: 100;
     color: #000;
     margin: 0;
     font-family: 'FutureCity';
     margin-bottom: 35px;
}

.nomargin {
	margin-bottom: 0px;
}

h3 {
     color: #00c5b3;
     text-transform: uppercase;
     font-size: 18px;
     font-weight: 700;
     font-family: 'FutureCity';
     margin-top: 0px;
}

h4 {
     color: #FFFFFF;
     text-transform: uppercase;
     font-size: 17px;
     font-weight: 700;
     font-family: 'FutureCity';
     margin-top: 40px;
     margin-bottom: 0px;
}

h5 {
     font-size: 30px;
     font-weight: 100;
     color: #000;
     margin: 0;
     font-family: 'FutureCity';
     margin-bottom: 30px;

}

.bg {
     width: 100%;
     height: auto;
     z-index: 1;
     position: relative;
     display: block;
}

.col {
     width: 46%;
     margin-right: 40px;
     float: left;
}

.col.last {
     width: 47%;
}

.col p {
	 text-align: left;
}

.bg img {
     min-width: 100%;
     width: 100%;
     position: absolute;
     display: block;
     overflow: hidden;
}

#video_code {
     float: left;
}

.purple-txt {
     color: #6F277F;
}

.blue-txt {
     color: #00A1DF;
}

.red-txt {
	 color: #E20B4E;
}

#nav-out {
     position: relative;
     background-color: #fff;
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     height: auto;
     z-index: 99;
     top: 0;
     overflow: hidden;
     margin-top: 60px;
     display: none;
   
}

#wrapper {
     padding: 30px 0px 30px 0px;
     background-color: #fff; 
     float: left; 
     display:block; 
     width: 100%; 
     overflow:auto;
}

#nav-out #wrapper, #nav-out #wrapper li {
	 overflow: hidden;
}

.nav-abs {
     position: fixed !important;
     z-index: 99999 !important;
     top: 0;
     background-color: transparent !important;
     margin-top: 81px !important;
     display: block !important;
     border-bottom: 1px solid #eee;
     left: 0;
     right: 0;
     margin: 0 auto;
}

.pad35 {
     display: block;
     clear: both;
     margin-bottom: 35px;
     overflow: auto;
}

#nav-out p {
     font-size: 14px;
     line-height: 19px;
}

#nav-out ul {
      list-style: none;
      margin: 0;
      padding: 0;
      margin-left: 30px;
}

#nav-out li {
      border-right: none;
      float: left;
      width: auto;
      display: inline;
      margin: 0;
      padding: 0;
      position: relative;
      margin-right: 20px;
}

#nav-out h2 {
      margin-bottom: 12px;
      font-weight: 100;
      font-size: 30px;
      margin-top: 0px;
      margin-left: 30px;
}

#nav-out li a {
      padding: 0px;
      float: left;
      display: block;
      font-size: 17px;
      font-weight: 500;
      font-family: 'open-sans';
      
}

#nav-out li a:hover {
	   background-color: #fff;
	   color: #44b7b0;
}

#nav-out li a span {
      position: absolute;
      top: 50%;
      left: 0;
      margin-left: 122px;
      margin-top: -10px;
}

#nav-out li img {
      width: 92px;
      height: 52px;
      margin-right: 10px;
      background-color: #00c5b3;
}

.overlay {
     width: 100%;
     height: 100%;
     opacity: 0;
     background: #000;
     position: absolute;
     z-index: 2;
}

.top-link {
     font-size: 14px;
     font-family: 'FutureCity';
     font-weight: 700;
     background-color: #fff;
	 z-index: 9999;
	 float: right;
	 margin-top: 10px;
	 margin-right: 30px;
}

.half {
     width: 48%;
     float: left;
     display: inline;
     margin-right: 30px;
}

.dc .half {
     height: 200px;
     padding-top: 210px;
     margin-bottom: 20px;
}


p {
    font-family: 'open-sans';
    font-size: 17px;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
    line-height: 26px;
    font-weight: 300;
}

.dc p {
    font-size: 17px;
}

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

#table {
    width: 670px;
    margin: 0 auto;
}

.quote {
     font-size: 40px;
     font-family: 'FutureCity';
     font-weight: 100;
     padding: 0px 0px 0px 0px;
     margin-bottom: 35px;
     margin-top: 0px;
     text-align: left;
     width: 50%;
}

.big-text {
     font-size: 36px;
     font-family: 'FutureCity';
     font-weight: 100;
     margin-bottom: 30px;

}

.cycling-app img {
	padding-top: 405px; 
	padding-left: 85px;
}

.walking-app img {
	padding-top: 255px; 
	padding-left: 103px;
}



.inline {
     display: inline;
     float: left;
}

.white {
     background-color: #fff;
}


.stories {
      list-style: none;
      width: 100%;
      float: left;
      margin-top: 20px;
}


.green {
	 background-color: #00c5b3;
}

.green-txt {
     color: #00c5b3;
}

.pink-txt {
     color: #e2007d;
}

.report ul {
	width: 90%;
	margin: 60px 0px 0px 0px;
	padding: 0;
	box-sizing: border-box;
}

.report li {
	margin-bottom: 10px;
	width: 90%;
	border-radius: 5px;
	background-image: url(/images/list_arrow.png);
	background-repeat: no-repeat;
	background-position: 98% 50%;
	float: left;
	height: 50px;
	display: block;
}

.report .pink li {
	background-color: #e6007e;
}

.report .purple li {
	background-color: #6e298d;
}

.report .green li {
	background-color: #35bdb2;
}

.report li a {
	color: #fff;
	font-size: 24px;
	font-weight: 100;
	font-family: 'FutureCity';
	height: 57px;
	float: left;
	display: block;
	padding-left: 90px;
	vertical-align: center;
	padding-top: 15px;
	width: 100%;
	box-sizing: border-box;
}

.open-ico {
	background: url(/images/open-ico.png) no-repeat left center;
	background-position: 1% 0%;
}

.active-ico {
	background: url(/images/active-ico.png) no-repeat left center;
	background-position: 1% 0%;
}

.intelligent-ico {
	background: url(/images/intelligent-ico.png) no-repeat left center;
	background-position: 1% 0%;
}

.energy-ico {
	background: url(/images/energy-ico.png?23423) no-repeat left center;
	background-position: 1% 3%;
}

.integrated-ico {
	background: url(/images/integrated-ico.png) no-repeat left center;
	background-position: 1% 0%;
}

.ops-ico {
	background: url(/images/ops-ico.png) no-repeat left center;
	background-position: 2% 0%;
}

.stories li, .home-stories li {
     width: 450px;
     float: left;
     display: inline !important;
     margin-right: 40px;  
     background-color: #00c5b3;
     color: #fff;
     height: 225px;
     padding: 0;
     margin-bottom: 40px;
     position: relative;
     -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    border-radius: 5px;
    text-align: center;
}

.home-stories li {
	 padding: 20px 0px 20px 0px !important;
	 height: 40px;
	 margin-bottom: 30px !important;
}

.howto {
	     margin-top: 180px;
     }

.engage li {
     background-color: #e20b4e;
}

.stories li a, .home-stories li a {
	 color: #fff;
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 margin-bottom: 30px;
	 font-size: 24px;
	 line-height: 30px;
	 font-family: 'FutureCity';
	 width: 100%;
	 text-align: center;	 
}

.home-stories li:hover {
     background: #989898;
}

.data-puffs a {
	  padding: 40% 0% 0% 0%;
}

.data-puffs li:hover {
     background-color: #989898;
}

.stories .puff-ops {
     background: url(/images/operations.png) no-repeat center 30% #00c5b3;
}

.stories .puff-data {
     background: url(/images/open_data.png) no-repeat center 30% #00c5b3;
}

.stories .puff-demo {
     background: url(/images/demonstrators.png) no-repeat center 30% #00c5b3;
}

.stories .puff-engage {
     background: url(/images/engagement.png) no-repeat center 30% #00c5b3;
}

.engage .transport {
     background: url(/images/hackathon/nav-icons-transport.png) no-repeat center 30% #e20b4e;
}

.engage .health {
     background: url(/images/hackathon/nav-icons-health.png) no-repeat center 30% #e20b4e;
}
.engage .energy {
     background: url(/images/hackathon/nav-icons-energy.png) no-repeat center 30% #e20b4e;
}
.engage .public {
     background: url(/images/hackathon/nav-icons-public-safety.png) no-repeat center 30% #e20b4e;
}

.data-puffs .dashboards {
      background: url(/images/data/nav-icons-dashboards.png) no-repeat center 30% #6f277f;
}

.data-puffs .maps {
      background: url(/images/data/nav-icons-open-maps.png) no-repeat center 30% #6f277f;
}

.data-puffs .glasgow {
      background: url(/images/data/nav-icons-my-glasgow.png) no-repeat center 30% #6f277f;
}

.data-puffs .hackathons {
      background: url(/images/data/nav-icons-hackathons.png) no-repeat center 30% #6f277f;
}

.myglasgow .language {
      background: url(/images/language.png) no-repeat center 30% #6f277f;
}

.myglasgow .maps {
      background: url(/images/maps.png) no-repeat center 30% #6f277f;
}

.myglasgow .clicks {
      background: url(/images/clicks.png) no-repeat center 30% #6f277f;
}

.myglasgow .tiles {
      background: url(/images/tiles.png) no-repeat center 30% #6f277f;
      background-size: 127px 127px;
}

.myglasgow .graphics {
      background: url(/images/graphics.png) no-repeat center 30% #6f277f;
}

.myglasgow .keeping-it-simple {
      background: url(/images/keepingitsimple.png) no-repeat center 30% #6f277f;
}

.sensor {
       height: 20px;
       padding-top: 330px;
}

.sensor h3 {
	color: #00a0df;
}

.sensor1 {
       background: url(/images/sensor1.png) no-repeat center top transparent;
       margin-left: 80px;
       margin-right: 150px;
}

.sensor2 {
       background: url(/images/sensor2.png) no-repeat center top transparent;
 	   margin-top: 47px;
 	   padding-top: 283px;
}

.receiver {
       background: url(/images/sensor1.png) no-repeat center top transparent;
}



.myglasgow .third {
      padding-bottom: 30px;
}

.myglasgowapp {
     background: url(/images/myglasgow_app.jpg) no-repeat bottom center;
     background-size: 424px 620px;
     height: 620px;
     position: relative;
}


.hover-text {
     display: block;
     font-size: 18px;
     line-height: 22px;
     font-family: 'open-sans';
     font-weight: normal;
     text-align: center;
     width: 80%;
     margin: 0 auto;
     margin-top: 40px;
}

.il {
     display: inline;
     float: left;
}

.l1, .l2, .number {
      font-size: 26px;
      color: #6f277f;
      font-family: 'FutureCity';
      font-weight: 100;
}

.l1 {
      margin-right: 0px;
      padding-top: 0px;
      display: block;
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
}

.number-wrap {
      margin: 0 auto;
      width: 280px;
      margin-bottom: 20px;
}

.width60 {
	   width: 60%;
	   padding-left: 20%;
	   padding-right: 20%;	
}

.l2 {
      margin-left: 0px;
      padding-top: 0px;
      display: block;
      width: 100%;
      text-align: center;
      clear: both;
      float: left;
      margin-top: 0px;
}

.number {
      font-size: 100px;
      font-weight: 100;
      background-color: #eee;
      padding: 15px 0px 15px 0px;
      margin-right: 5px;
      text-align: center;
      border-radius: 3px;
      width: 85px;
}

.counter {
     width: 470px;
     margin: 0 auto;
     margin-top: 90px;
     margin-bottom: 60px;
     display: block;
     overflow: hidden;
}

.last {
     margin-right: 0px !important;
}

.video-holder, .video_code, .video-holder-vimeo {
     width: 960px;
     height: 540px;
     position: relative;
     margin: 0 auto;
     display: block;
     float: left;
     clear: both;
     overflow: hidden;
     margin-bottom: 60px;
     margin-top: 0px;
     z-index: 99;
}

.video_code {
     height: 480px;
}

.video-holder  img, .video-holder-vimeo img {
     width: 100%;
}

.video-holder .color-overlay, .video-holder-vimeo .color-overlay {
     background-color: #00c5b3;
     opacity: 1;
     width: 100%;
     height: 100%;
     position: absolute;
     z-index: 9;
     left: 0;
     top: 0;
}

.video-holder .play, .video-holder-vimeo .play {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -35px;
     margin-top: -35px;
     background: url(/images/videoplay.png) no-repeat;
     width: 74px;
     height: 73px;
     z-index: 99;
}

.snook-boxes .third {
     text-align: left;
     color: #e40b84;
     margin-top: 0px !important;
     padding-top: 20px;
     height: auto;
}

.snook-boxes .dashed {
     border-top: 2px dashed #e40b84;
}


.vision .fourth {
     float: left;
     display: inline;
     margin-right: 30px;
     width: 210px;
     padding-top: 237px;
     height: 0px;
     margin-bottom: 40px;
}

.vision {
     margin-bottom: 80px;
}

.vision span {   
     padding: 10px 20px 0px 20px;
     float: left;
     text-align: center;
}

.pink {
     color: #e2007d;
     font-weight: 500;
}

.content p ul {
	display: block;
	float: left;
	margin-bottom: 30px;
}

.content p ul li, .bullets li {
    display: block;
    float: left;
    clear: both;	
    border: none;
}

.content p li:before, .bullets li:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}



.invis {
      opacity: 0;
}

.vision-one {
     background: url(/images/vision-ico-1.jpg) no-repeat center center;
}

.vision-two {
     background: url(/images/vision-ico-2.jpg) no-repeat center center;
}

.vision-three {
     background: url(/images/vision-ico-3.jpg) no-repeat center center;
}

.vision-four {
     background: url(/images/vision-ico-4.jpg) no-repeat center center;
}

#data1, #data2, #data3 {
	height: 360px !important;
}

#data1 {
	background: url(/images/data-box1.png) no-repeat top left;
}

#data1 p, #data2 p, #data3 p {
	padding-top: 130px !important;
	text-align: center;
}

#data2 {
	background: url(/images/data-box2.png) no-repeat top left;
}

#data3 {
	background: url(/images/data-box3.png) no-repeat top left;
}

.mobile-only {
	 display: none;
}

.feedback-loop {
	margin-left: 70px; 
	margin-top: -20px;
}

@media screen and ( max-width : 998px) {



.text {
   padding-top: 120px;

}



}

@media screen and ( max-width : 1100px) {
	
	
.nav-abs {
     position: fixed !important;
     z-index: 99999 !important;
     top: 0;
     background-color: transparent !important;
     margin-top: 81px !important;
     display: block !important;
     left: 0%;
     border-bottom: 1px solid #eee;
     margin-left: 0px !important;
    
}

}



@media screen and ( max-width : 980px) {
	
	
.nav-abs {
     position: fixed !important;
     z-index: 99999 !important;
     top: 0;
     background-color: transparent !important;
     margin-top: 81px !important;
     display: block !important;
     left: 0%;
     border-bottom: 1px solid #eee;
     margin-left: 0px !important;
    
}

.banner-area {
	width: 100% !important;
}

.banner-area video {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    margin-left: 0px;
    overflow: hidden;
    width: 100% !important;
    min-height: 460px !important;

}

 .vision .fourth {
     margin-right: 20px;
	}


.intro-panel, .future-city, .linked-maps {
    min-height: 420px;
}

.intro-panel {
	margin-top: 80px;
}

.fifth {
   float: left;
   display: inline;
   margin-right: 20px;
}



video img {
	width: 100% !important;
}



.content, .content-wide, .btn-wrap {
   width: 920px;
   position: relative;
   z-index: 9;
   text-align: left;
   margin: 0 auto;
   float: none;
   display: block;
   overflow: hidden;
}


.content-wide {
   width: 920px;
   padding: 0;
}

.stories li {
     width: 435px;
}

.intelligent-wrap .third {
    height: 340px;
    margin-bottom: 40px;
    padding-top: 0px;
}

.third {
    width: 280px;
}

.increasing-use {
	   margin-left: 20px; 
	   margin-top: -55px;
    }

.nav-abs {
	position: fixed !important;
	z-index: 99999 !important;
	top: 0;
	background-color: transparent !important;
	margin-top: 81px !important;
	display: block !important;
	left: 0;
	border-bottom: 1px solid #eee;
	margin-left: 0px !important;

}

.carousel-wrap {
	margin: 0 auto;
	display: block;
	position: relative;
	height: auto;
	width: 920px;
	margin-bottom: 20px !important;
}

.bx-wrapper .bx-prev {
	left: 0;
	margin-left: 10px !important;
	width: 73px;
	height: 71px;
	display: block;
	position: absolute;
	background: url(/images/carousel_prev.png) no-repeat;
}

.bx-wrapper .bx-next {
	right: 0;
	margin-right: 10px !important;
	width: 73px;
	height: 71px;
	display: block;
	position: absolute;
	background: url(/images/carousel_next.png) no-repeat;
}

.twothirds {
    width: 600px;
    overflow: hidden;
}

.ipad-fix {
	width: 70%;
}



.app img {
    padding-left: 91px;
    padding-top: 80px;
}

.sustrans {
    background: url(/images/walkonomics.jpg) no-repeat 90% 100%;  
    height: 730px;
}	

.tab {
   width: 170px;
}




}


@media screen and (min-width :630px) and ( max-width : 960px) {
	
	
		.our-platform {
			height: auto !important;
			padding-bottom: 240px;
			background-size: 100% auto !important;
	    }
	    
	    .linked-data {
		background: url(/images/ipad.jpg) no-repeat 80% 20% !important;
		background-size: 50% auto !important;
	}
	
	.banner-area video {
		display: none;
	}
	    
	   

	
	
}



@media screen and ( max-width : 630px) {


     .report ul {
	     width: 100%; 
	     margin-top: 30px;
     }
     
     .report li a {
	    font-size: 18px;
	} 


     .half, .video-holder, .first-holder, .video-holder-vimeo, .video_code, iframe, .btn-wrap, .text, .twothirds, .fourth, .fifth, section, .col, .quote, nav, .nav-container {
       width: 100% !important;
       margin-right: 0px;
       margin-left: 0px;
       padding: 0;
       float: left;
       min-height: 0 !important;
       box-sizing: border-box; 
     }
     
     .carousel-wrap {
	    width: 100%;    
     }
     
     .third {
	     width: 100% !important;
       margin-right: 0px;
       margin-left: 0px;
       float: left;
       min-height: 0 !important;
       box-sizing: border-box; 
     }
     
     
     
     .video-holder, .video_code, .video-holder-vimeo {
	    height: auto !important;
	    margin: 0 !important;
	    background: none !important;
     }
     
     .video-holder-vimeo img {
	    display: inline;
	    margin: 0;
	    padding: 0; 
     }
     
    
     
     .carousel-wrap {
	     margin-bottom: 10px !important;
     }
   
    
    
    
    
	.tab {
	   float: left;
	   display: inline;
	   margin-right: 7px;
	   font-size: 18px;
	   padding: 20px 12px 20px 12px;
	   background-color: #f2f2f2;
	   border: 1px solid #f2f2f2;
	   font-weight: 100;
	   color: #000;
	   border-radius: 5px;
	   margin-bottom: 10px;
	   width: 13%;
	   text-align: center;
	   font-family: 'FutureCity';
	}
	
	.text-left {
		text-align: left;
	}

     
     .mobile-only {
	    display: inline;
     }
     
     br {
	     margin: 0;
	     padding: 0;
     }
     
     .credit br {
	     margin-bottom: 10px;
     }
     
     .credit h2 {
	     display: none;
     }
     
     .credit p {
	     margin-bottom: 0px;
     }
     
     .bottom-link {
	     position: absolute;
	     right: 0;
	     bottom: 0;
	     margin-right: 10px;
	     margin-bottom: 40px;
	     width: 37%;
     }
     
     .bottom-link img {
	     
	     float: right;
     }
     
     
     footer {
	     text-align: left;
	     margin-left: 0px;
	     position: relative;
	     box-sizing: border-box; 
	     font-size: 9px;
	     padding-left: 20px;
     }
     
     
     
     section, .video-holder, .video-holder-vimeo {
       background-size: auto !important;
       background-attachment: fixed;
       background-position: center center !important;
     }

     
     .intro-panel {
       background: url(/images/mobile/FUT-01-Homepage-Hero-Fallback-Mobile.jpg) no-repeat center center !important;
       background-size: 100% 100% !important;
       height: 375px !important;
     }
     
     .content-inner {
	   padding: 20px; 
	   width: 100%;
	   box-sizing: border-box; 
     }
     
     .cycling-app {
	    background: url("/images/cyclingapp.jpg") #FFF no-repeat  top center;
	    position: relative;
	    left: 0;
	    right: 0;
	    margin: 0;
	    background-size: 90% 100%;
	    width: 100%;
	    margin-top: 30px;
	    height: 500px;
    }
     
     .cycling-app img, .walking-app img {
	 	padding-top: 155px; 
	 	text-align: center;
	 	padding-left: 20%;
	 	width: 65% !important;
	 }
	 
	  .walking-app img { 
	    padding-top: 285px; 
	  }
	 
	 .walk-wrap {
       height: 1520px !important;
     }
	 
	 
	.walking-app {
	    background: url(/images/walkingapp.jpg) no-repeat center bottom !important;  
	    height: 650px !important;
	    background-size: 94% auto !important;
	    display: block;
	    position: relative;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    margin-left: 0px;
	
	}
	
	.sustrans {
	    background: url(/images/walkonomics.jpg) no-repeat center bottom; 
	    background-size: 90% auto !important; 
	    background-position: center bottom !important;
	    height: 1200px !important;
		padding-bottom: 0px;
	   
	}
     
     
   
     
     p li, .bullets li {
	     border-right: 0px;
     }
     
    
     
     .top-nav li {
	     width: 20% !important;
	     padding: 15px 0px 15px 0px;
	     text-align: center;
	     box-sizing: border-box;
     }
     
     .top-nav li a {
	     background-position: center center !important;
	     text-align: center;
	     
     }
     
     .logo {
	   width: 52px;
	   height: 51px;
	   background-size: 52px 50px;
	   text-indent: -9999px;
	   text-align: center;
	   float: none;
	   display: inline-block;
	   background-position: center center !important;
	}
	
	.nav-item{
	     width: 50px;
	     height: 51px;
	     background-position: center center !important;
	     padding: 0 !important;
	     background-repeat: no-repeat;
	     margin-top: 0px;
	     float: none;
	     display: block;
	     background-size: 50px 51px;
	     display: inline-block;
    }
      
     .desktop-only, .top-link {
       display: none !important;
       width: 0px;
     }
     
     h1 {
	    font-family: 'FutureCity';
	    font-weight: 100;
	    font-size: 35px;
	    line-height: 38px;
	    color: #000;
	    margin: 0;
	    margin-bottom: 10px;
	    margin-top: 40px;
    }
    
  
   
    
    .text a {
        font-size: 15px;
    }
    
    .text {
     position: relative;
     z-index: 9;
     padding: 130px 7px 0px 7px;
   }

	.container {
	   margin:0 auto;
	   max-width: 100%;
	   width: 100%;
	   float: left;
	}
	
	.nav-abs {
		position: fixed !important;
		z-index: 99999 !important;
		top: 0;
		background-color: transparent !important;
		margin-top: 81px !important;
		display: block !important;
		left: 0;
		border-bottom: 1px solid #eee;
		margin-left: 0px !important;
    
	}
	
	.engage-the-city {
      background: url(/images/mobile/engage-change-banner.jpg) no-repeat center center !important;
      height: auto;
      width: 100%;
      background-size:auto !important;
    }


    img {
       width: 100%;
    }

    .content, .content-wide, .btn-wrap {
	   width: 100% !important;
	   text-align: center;
	   margin: 0 auto;
	   float: none;
	   display: block;
	   overflow: hidden;
    }
    
    .counter {
	     width: 100%;
	     margin: 0;
	     margin-top: 30px;
	     margin-bottom: 30px;
	     display: block;
	     overflow: hidden;
	     float: left;
    }
    
    .dc .half {
     height: 400px;
     padding-top: 210px;
     margin-bottom: 20px;
    }
    
    .dc .comm {
	    height: 440px;
    }
    
    .intro-bg video, .open-data video, .data-centre video, .my-glasgow video, .dashboards-bg video, .energy-header video, .snook-header video, .intelligent-lighting video, .social-transport video, .active-travel video {
       display: none;
    }
    
    .intro-bg  {
       background: url(/images/homepage/hero-fallback.jpg) no-repeat;
       background-size: cover !important;
    }
    
    .future-makers-fb {
	    background: url(/images/mobile/engage-future-banner.jpg) no-repeat center center !important;  
	    background-size: auto !important;
    }
    
    .energy-header {
	  background: url(/images/mobile/demonstrator-energy-banner.jpg) no-repeat center center !important;  
    }
    
    .dashboards-bg  {
       background: url(/images/mobile/dashboards-banner.jpg) no-repeat center center !important;
       background-size: 100% 100% !important;
       height: 310px !important;
    }
    
    .increasing-use {
	   margin-left: 0px; 
	   margin-top: -55px;
    }
    
    .open-data {
	    background: url(/images/mobile/data-banner.jpg) no-repeat center center !important;
	 
     }
     
     .my-glasgow {
	     background: url(/images/mobile/data-myglasgow-banner.jpg) no-repeat center center !important; 
	   
     }
     
     .social-transport {
	     background: url(/images/mobile/demo-transport-banner.jpg) no-repeat center center !important;
	  
     }
     
     .dashboard-three {
	     background: url(/images/mobile/dashboards-create.jpg) no-repeat center bottom !important; 
	     height: auto; 
	     padding-bottom: 320px;
	     background-size: 100% auto !important;
     }
     
     .the-hardware {
	     background: url(/images/mobile/demo-social-hardware.jpg) no-repeat center bottom !important; 
	     height: 510px; 
	     background-size: 150% 100% !important;
     }
     
     .active-travel {
	     background: url(/images/mobile/demonstrator-banner.jpg) no-repeat center bottom !important; 
	     height: auto; 

     }

    
    .future-city {
	    background: url(/images/mobile/homepage-one.jpg) bottom center no-repeat !important; 
	    height: auto; 
	    background-size: 100% auto !important;
    }
    
    .people-make {
	    background: url(/images/mobile/homepage-two.jpg) bottom center no-repeat !important; 
	    height: auto !important; 
	    padding-bottom: 220px;
	    background-size: 100% auto !important;
    }
    
    .snook-header {
	    background: url(/images/mobile/engage-snook-banner.jpg) bottom center no-repeat !important; 
	    height: auto; 

    }
    
    .whatis {
	    background: url(/images/mobile/homepage-three.jpg) bottom center no-repeat #f6f6f6 !important; 
	    height: auto; 
	    background-size: 100% 100% !important;
    }
    
    .hackit {
        margin-left: 0px;
    }
    
    .myglasgowapp {
       background: url(/images/mobile/data-myglasgow-app.jpg) no-repeat bottom center;
       background-size: contain;
       height: 380px;
       position: relative;
    }   
    
    .myglasgowapp img, .myglasgowapp .app-bg {
	    display: none;
    }

    .feedback-loop {
		margin-left: 0px; 
		margin-top: -10px;
	}
	
	h2 {
     font-size: 35px;
     font-weight: 100;
     color: #000;
     margin: 0;
     font-family: 'FutureCity';
     margin-bottom: 20px;
    }
	

	
	.dashboard-one {
		background: url(/images/mobile/dashboards-intro.jpg) #f6f6f6 bottom center no-repeat !important;
		height: auto; 
		padding-bottom: 260px;
		background-size: 100% auto !important;
	}
	
	.data-centre {
		background: url(/images/FallbackImages/hero-Operations-Centre-fb.jpg) bottom center no-repeat !important;
		height: 375px !important; 
		background-size: 130% 100% !important;
	
	}
	
	.linked-maps {
		background: url(/images/mobile/data-linked-banner.jpg) no-repeat center center !important; 
		background-size: 130% 100% !important;
        height: 375px;
		
	}
	
	.linked-data {
		background: url(/images/ipad.jpg) no-repeat center bottom !important;
		padding-bottom: 180px;
		background-size: 90% auto !important;
		margin-bottom: 40px;
	}
	
	.intelligent-lighting {
		background: url(/images/mobile/demo-streetlights-banner.jpg) no-repeat center bottom !important;
		background-size: 120% 100% !important;
	}
	
	.riverside-walkway {
		background: url(/images/mobile/demo-lighting-riversidewalkway.jpg)  #000 no-repeat center bottom !important;
		padding-bottom: 200px;
		height: auto !important;
		background-size: 100% auto !important;
	}
	
	.community-mapping {
		background: url(/images/mobile/engage-community-banner.jpg)  #000 no-repeat center bottom !important;
	}
	
	.our-platform {
		height: auto !important;
		padding-bottom: 240px;
		background: url(/images/mobile/data-platform.jpg)  #6f277f no-repeat center bottom !important;
		background-size: 100% auto !important;
	}
	
	.gordon-street {
		background: url(/images/Gordon-Street.jpg)  #000 no-repeat center bottom !important;
		padding-bottom: 380px;
		height: auto !important;
		background-size: 100% auto !important;
	}
	
	.improving-services {
		background: url(/images/mobile/data-improving-services.jpg)  #000 no-repeat center bottom !important;
		
	}
	
	.glasgow-energy {
		background: url(/images/mobile/demonstator-glasgow-energy.jpg) #165161 no-repeat left bottom !important;
		height: auto !important;
		padding-bottom: 200px;
		background-size: 100% auto !important;
	}
	
	.merchant-city {
		background: url(/images/mobile/demo-lighting-merchantcity.jpg)  #000 no-repeat center bottom !important;
		padding-bottom: 320px;
		height: auto !important;
		background-size: 100% auto !important;
	}
	
	
	.stories {
		margin-top: 0px;
	}
	
	.stories li, .home-stories li {
		width: 100%;
	}
	
	.carousel-no-page {
		clear: both;
		float: left;
		display: block;
	}
	
	.carousel img, .carousel-no-page, .carousel-no-page img {
		width: 100% !important;
		min-height: 250px !important;
		height: auto !important;
		display: block;
		float: left;
	}
	
	.bx-wrapper img {
      max-width: 100%;
      display: block;

    }
	
	.dashes .third {
     padding-top: 0px;
     background-color: #fff;
     height: auto;
     padding-bottom: 20px;
	}
	
	.dashes .twothirds {
	  height: auto;
	  padding: 20px 0px 20px 0;
	}
	
	.ipad-fix {
	  width: 100%;
    }
	
	.dashes .third img {
	     display: block;
	     width: auto !important;
	     height: auto !important;
	    
	     margin: 0 auto;
	      margin-top: 20px;
	     margin-bottom: 20px;
	     padding-left: 0px !important;
	}
	
	.btn {
      width: 80% !important;
   }
   
   .bx-next, .bx-prev {
	   display: none !important;
   }
   
   .plug {
	    background: url(/images/plug.png) no-repeat 70% 100% #f2f2f2;
	    background-position: center bottom !important;
	    width: 300px;
	    height: 450px;
	    position: absolute;
	    z-index: 9;
	    left: 0%;
	    margin-top: 0px;
   }
  
   .mobile-wrap {
	    height: 850px !important;
	    display: block; 
	    position: relative;
	    background-color: #f2f2f2;
   }
   
   .vision .fourth {
     float: left;
     display: inline;
     margin-right: 30px;
     width: 210px;
     padding-top: 237px;
     height: 0px;
     margin-bottom: 80px;
	}


    #nav-out ul li {
	    width: 100%;
    }

	.bx-wrapper .bx-pager {
	
	    margin-bottom: -33px !important;
	    margin-right: 43px !important;
	
	}
	
	#tab-content .bx-wrapper .bx-pager, .bx-pager {
		display: none;
	}
	
	.fifth img {
		width: 70% !important;
		margin-bottom: 20px;
	}
	
	.future-makers .fifth img {
		width: 50% !important;
	}
	
	.howto {
		margin-top: 0px;
	}
	
	h5 {
		clear: both;
	}
	
	.safe-routes {
    	background: url(/images/mobile/demonstrator-school.jpg) no-repeat center bottom !important;
    	padding-bottom: 400px;
    }
	
	.engage-bg {
		background: url(/images/mobile/engage-hack-banner.jpg) no-repeat center center !important;
	}
	
	.hackers {
		background: url(/images/mobile/engage-hack-transport.jpg) no-repeat center center !important;
		height: auto !important;
	}
	
	.wayofworking {
		background: url(/images/mobile/engage-hack-newway.jpg) no-repeat center bottom !important;
		height: auto !important;
		padding-bottom: 300px;
	}
    
    #table {
	    width: 100% !important;
	    margin: 0 !important;
	    padding: 0 !important;
    }
    
    #table tr {
	    width: 47% !important;
	    margin: 0 !important;
	    padding: 0 !important;
	    display: inline;
	    float: left;
	    text-align: center;
	}
    
    .phoneimage img , .phoneoverlay img {
	    width: 80% !important;
    }
    
     .phoneoverlay {
	     margin-top: 40px;
     }
    
    .phoneoverlay img {
	     width: 70% !important;
	    margin-left: -40px;  
	    margin-top: 20px;  
	}
    
    #table td {
	    width: 100% !important;
	    padding: 20px;
	    box-sizing: border-box;
	    display: block;
	    float: left;
	    clear: both;
	    text-align: center !important;
    }
    
    .behaviour .third {
	    padding-top: 20px;
	    margin-bottom: 20px;
	    height: auto;
	    text-align: left;
	}
    
    .right {
	    float: none;
	    text-align: center;
	    display: inline-block;
    }
    
    .insulation {
        background: url(/images/mobile/demonstrator-insulation.jpg) no-repeat #f2f2f2 left bottom !important;
        height: auto;
        padding-bottom: 400px;
   }
   
   .app-bg {
	    background: url(/gifs/mapsicons/map-flyover-slow-loop_med.gif?234234) no-repeat !important;
	    position: absolute;
	    background-size: 100% auto !important;
	    width: 300px;
	    height: 490px;
	    left: 0;
	    top: 0;
	    z-index: 9;
	    margin-top: 200px;
	    margin-left: 87px;
	    display: block;
   }
   
   
	#data1, #data2, #data3 {
		height: 320px !important;
		background-size: 100% auto;
	}
	
	#data1 p, #data2 p, #data3 p {
	padding-top: 130px;
	text-align: center;
    }
    
    .whatisopendata {
	    background-size: 150% auto !important;
	    background-color: #fff;
	    background-position: center bottom !important;
	    height: 550px;
    }


	.renewables {
	    background: url(/images/mobile/Renewables-Mapping.jpg) no-repeat #000 left bottom !important;
	    background-size: 100% auto !important;
	    height: auto;
	    padding-bottom: 400px;
	}
	
	
	.demand-side {
	    background: url(/images/mobile/demonstrator-renewables.jpg) no-repeat #000 left bottom !important;
	    background-size: auto;
	    height: auto;
	    padding-bottom: 340px;
	}
	
	.white-btn {
		width: 100%;
		box-sizing: border-box;
	}
	
	.shadow {
		background: none;
	}
	
	.pad {
		padding: 0px 20px 0px 20px;
		text-align: left;
	}
	
	
	.margin60 {
	   margin-bottom: 30px !important;
	}


}



@media screen and ( max-width : 460px) { 
	
	#data1 p, #data2 p, #data3 p {
	padding-top: 150px !important;
	text-align: center;
    }

	
	.text {
		padding-top: 100px;
	}
	
	.linked-data {
		padding-bottom: 140px;

	}
	
}



@media screen and ( max-width : 320px) { 
	
	#data1 p, #data2 p, #data3 p {
	padding-top: 140px !important;
	text-align: center;
    }
    
    .text {
		padding-top: 80px;
	}


	
}

/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
	min-height: 490px;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {


	left: 0;
	background: #fff;
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-controls-auto {
	position: absolute;
	width: 100%;
	text-align: center;
}

.bx-wrapper .bx-pager {
	position: absolute;
	bottom: 0;
	margin-bottom: 33px;
	margin-right: 33px;
	width: 100%;
	right: 0;
	text-align: center;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: 1em;
	font-family: Arial;
	font-weight: bold;
	color: #000;
	padding-top: 50px;
	float: right;
	width: auto;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
		float: left;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #d5d5d5;
	text-indent: -9999px;
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	border-radius: 18px;

}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 0;
	margin-left: -90px;
	width: 73px;
	height: 71px;
	display: block;
	position: absolute;
	background: url(/images/carousel_prev.png) no-repeat;
}

.bx-wrapper .bx-next {
	right: 0;
	margin-right: -90px;
	width: 73px;
	height: 71px;
	display: block;
	position: absolute;
	background: url(/images/carousel_next.png) no-repeat;
}



.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -35px;
	outline: 0;
	width: 73px;
	height: 71px;
	text-indent: -9999px;
	z-index: 99;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: auto;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}





@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

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

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}

@-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: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

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

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

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

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

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

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

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

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

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

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

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

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

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

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

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

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

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 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: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

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

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

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

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

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

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

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

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

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

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
          animation-name: bounceOut;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

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

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

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

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

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }

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

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }

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

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

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

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

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

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

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

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

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

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

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

.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: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.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;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

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

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

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

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

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

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

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

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

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

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

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

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

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

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

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

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

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

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

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

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

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

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

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

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

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

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

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

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

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

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

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

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

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

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

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

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

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

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

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

.flipOutX {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

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

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

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

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

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

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

.flipOutY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
          animation-name: flipOutY;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

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

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

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

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

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    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% {
    opacity: 1;
  }

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

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

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) 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;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    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: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    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: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    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: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    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: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

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

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

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

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

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

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

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

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

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

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

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

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

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

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

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

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

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

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

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

@-webkit-keyframes hinge {
  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: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

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

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

@keyframes hinge {
  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: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

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

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    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: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

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

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

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

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

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

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

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

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

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

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
            transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
            transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

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

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
            transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
            transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

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

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    visibility: visible;
  }

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

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    visibility: visible;
  }

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

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

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    visibility: visible;
  }

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

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    visibility: visible;
  }

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

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

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }

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

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }

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

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

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }

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

@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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