@charset "UTF-8";
/*
 * Handcrafted with ❤ by demodern | digital design studio | www.demodern.de

   /\ \                              /\ \
   \_\ \     __    ___ ___     ___   \_\ \     __  _ __   ___
   /'_` \  /'__`\/' __` __`\  / __`\ /'_` \  /'__`\`'__\' _ `\
  /\ \_\ \/\  __//\ \/\ \/\ \/\ \_\ \ \_\ \/\  __/ \ \//\ \/\ \
  \ \___,_\ \____\ \_\ \_\ \_\ \____/ \___,_\ \____\ \_\ \_\ \_\
   \/__,_ /\/____/\/_/\/_/\/_/\/___/ \/__,_ /\/____/\/_/ \/_/\/_/
*/
@font-face {
  font-family: 'Rockwell W01 Light';
  src: url("../fonts/693134/8a120ae1-7a5b-484b-a170-f67812b59652.eot?#iefix");
  src: url("../fonts/693134/8a120ae1-7a5b-484b-a170-f67812b59652.eot?#iefix") format("eot"), url("../fonts/693134/7658dda6-217a-406c-bcb8-7551f88e2c49.woff") format("woff"), url("../fonts/693134/ec796902-2e28-46d0-8bbd-071b83705a39.ttf") format("truetype"), url("../fonts/693134/66d3bbb2-4ca8-48e9-b707-f53f776ec476.svg#66d3bbb2-4ca8-48e9-b707-f53f776ec476") format("svg");
}
@font-face {
  font-family: 'Rockwell W01';
  src: url("../fonts/693140/73e6c08f-deb5-4d6f-827b-597a84046aa4.eot?#iefix");
  src: url("../fonts/693140/73e6c08f-deb5-4d6f-827b-597a84046aa4.eot?#iefix") format("eot"), url("../fonts/693140/de4b0540-9702-4662-8f3a-228419485257.woff") format("woff"), url("../fonts/693140/bc34c4cd-af2c-400d-b4d0-726e2d89f690.ttf") format("truetype"), url("../fonts/693140/59c05ddc-99f9-44db-82ce-cb7f503b5110.svg#59c05ddc-99f9-44db-82ce-cb7f503b5110") format("svg");
}
@font-face {
  font-family: 'Rockwell W01 Bold';
  src: url("../fonts/693125/864373f8-943b-449d-a730-462eb66d7058.eot?#iefix");
  src: url("../fonts/693125/864373f8-943b-449d-a730-462eb66d7058.eot?#iefix") format("eot"), url("../fonts/693125/49ff3af5-13b2-4add-8470-4cdac3cf650e.woff") format("woff"), url("../fonts/693125/7d69578b-ab0e-4986-af19-428861ada4e4.ttf") format("truetype"), url("../fonts/693125/2848532f-bf3e-4430-aae1-bc0d1367eb84.svg#2848532f-bf3e-4430-aae1-bc0d1367eb84") format("svg");
}
/* Dropdown control */
.selectBox-dropdown {
  min-width: 140px;
  position: relative;
  border: solid 1px #68605f;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
  text-align: left;
  color: #68605f;
  outline: none;
  vertical-align: middle;
  background: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.selectBox-dropdown:hover,
.selectBox-dropdown:hover .selectBox-arrow {
  border-color: #b3a4a1;
  color: #b3a4a1;
}

.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow {
  border-color: #b3a4a1;
  background-color: #68605f;
  color: #f6f4f4;
}

.selectBox-dropdown.error,
.selectBox-dropdown.error:hover,
.selectBox-dropdown.error:focus {
  border-color: #e86f56;
  color: #e86f56;
  text-transform: none;
}

.selectBox-dropdown.error:hover {
  background-color: #ffffff;
  color: #e86f56;
}

.selectBox-dropdown.error:focus {
  background-color: #f6f4f4;
  color: #e86f56;
}

.selectBox-dropdown.valid,
.selectBox-dropdown.valid:hover,
.selectBox-dropdown.valid:focus {
  border-color: #688816;
  color: #688816;
  text-transform: none;
}

.selectBox-dropdown.valid .selectBox-arrow {
  background-color: #688816;
  border-left: solid 1px #688816;
}

.selectBox-dropdown.valid:hover {
  background-color: #f6f4f4;
  color: #688816;
}

.selectBox-dropdown.valid:focus {
  background-color: #f6f4f4;
  color: #688816;
}

.selectBox-dropdown.selectBox-menuShowing {
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.selectBox-dropdown .selectBox-label {
  padding: 7px 15px 1px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.selectBox-dropdown.selectBox-menuShowing .selectBox-label {
  color: #f6f4f4;
}

.selectBox-dropdown.error .selectBox-label {
  color: #e86f56;
}

.selectBox-dropdown.valid .selectBox-label {
  color: #688816;
}

.selectBox-dropdown .selectBox-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 23px;
  height: 100%;
  color: #ffffff;
  background: #68605f url("../images/interface/select-arrow.png") 50% 50% no-repeat;
  border-left: solid 1px #68605f;
}

/* Dropdown menu */
.selectBox-dropdown-menu {
  position: absolute;
  z-index: 99999;
  max-height: 200px;
  min-height: 1em;
  border: solid 1px #BBB;
  /* should be the same border width as .selectBox-dropdown */
  background: #ffffff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Inline control */
.selectBox-inline {
  min-width: 150px;
  outline: none;
  border: solid 1px #BBB;
  background: #FFF;
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  overflow: auto;
}

.selectBox-inline:focus {
  border-color: #666;
}

/* Options */
.selectBox-options,
.selectBox-options li,
.selectBox-options li a {
  list-style: none;
  display: block;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  text-align: left;
  color: #68605f;
}

.selectBox-options li a {
  font-size: 12px;
  line-height: 24px;
  text-decoration: none;
  text-align: left;
  color: #68605f;
  padding: 4px 15px;
  white-space: nowrap;
  overflow: hidden;
}

.selectBox-options li:first-child {
  display: none;
}

.selectBox-options li.selectBox-hover a {
  background-color: #f6f4f4;
}

.selectBox-options li.selectBox-disabled a {
  color: #68605f;
  background-color: transparent;
}

.selectBox-options li.selectBox-selected a {
  background-color: #b3a4a1;
  color: #ffffff;
}

.selectBox-options .selectBox-optgroup {
  color: #68605f;
  background: #ffffff;
  font-weight: bold;
  line-height: 1.5;
  padding: 4px 15px;
  white-space: nowrap;
}

/* Disabled state */
.selectBox.selectBox-disabled {
  color: #68605f !important;
}

.selectBox-dropdown.selectBox-disabled .selectBox-arrow {
  opacity: .5;
  filter: alpha(opacity=50);
  border-color: #68605f;
}

.selectBox-inline.selectBox-disabled {
  color: #68605f !important;
}

.selectBox-inline.selectBox-disabled .selectBox-options a {
  background-color: transparent !important;
}

/* HTML5 ✰ Boilerplate
 * ==|== normalize ==========================================================
 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}

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

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

[hidden] {
  display: none;
}

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

#pftp, #select, #introContainer {
  margin: 0;
  font-size: 13px;
  line-height: 1.231;
}

/*body, button, input, select, textarea { font-family: sans-serif; color: #222; }*/
::-moz-selection {
  background: #77bbc9;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #77bbc9;
  color: #fff;
  text-shadow: none;
}

a {
  color: #00e;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: #06e;
}

a:focus {
  outline: thin dotted;
}

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

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

b, strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

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

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

q {
  quotes: none;
}

q:before, q:after {
  content: "";
  content: none;
}

small {
  font-size: 85%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 40px;
}

dd {
  margin: 0 0 0 40px;
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

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

figure {
  margin: 0;
}

form {
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

label {
  cursor: pointer;
}

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
}

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

button, input {
  line-height: normal;
  *overflow: visible;
}

table button, table input {
  *overflow: auto;
}

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

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

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

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

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

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

input:invalid, textarea:invalid {
  background-color: #f0dddd;
}

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

td {
  vertical-align: top;
}

/*
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}
*/
#pftp {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  /*::selection {
    background: transparent;
  }

  ::-moz-selection {
    background: transparent;
  }*/
}
#pftp h1, #pftp h2 {
  font-family: "Rockwell W01", "Times New Roman", Helvetica, Arial, sans-serif;
}
#pftp h1, #pftp h2, #pftp h3 {
  font-weight: normal;
}
#pftp h4, #pftp h5, #pftp h6 {
  font-weight: bold;
}
#pftp h1 {
  font-size: 36px;
}
#pftp h2 {
  font-size: 24px;
}
#pftp h3 {
  font-size: 20px;
}
#pftp h4 {
  font-size: 14px;
}
#pftp h5 {
  font-size: 14px;
}
#pftp h6 {
  font-size: 12px;
}
#pftp a img {
  border: 0 none;
}

.pftpCircle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.circle-shadow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.error {
  color: #cc0000;
}

.relief {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
  -ms-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}

.dirty {
  background: url("../images/interface/bg_transp_corporate.png");
}

html, body {
  margin: 0;
  padding: 0;
}

#pftp {
  background: #222;
  color: #aaa;
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#pftp h1 {
  font-size: 24px;
  font-size: 2.4rem;
  margin: 0 0 12px;
  margin: 0 0 1.2rem;
}
#pftp a {
  outline: 0 none;
}
#pftp #treeworld_teaser {
  position: fixed;
  height: 154px;
  width: 174px;
  position: absolute;
  top: -40px;
  right: -200px;
  z-index: 1000;
}
#pftp #treeworld_teaser a {
  display: block;
  height: 100%;
  width: 100%;
}
#pftp .message {
  display: none;
  position: absolute;
  width: 400px;
  height: 200px;
  margin: 0px;
  background-color: #FFF;
  top: 150px;
  left: 50%;
  margin-left: -200px;
  opacity: 0;
  color: #7a7a7a;
  background: #FFF url("../images/interface/bg_redirect.png") no-repeat bottom right;
  border-radius: 4px;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  -moz-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  -ms-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  -o-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
}
#pftp .message .info-close {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: #68605f url("../images/interface/info_close.png") -2px -1px no-repeat;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
}
#pftp .message .info-close:hover {
  background: #C2C2C2 url("../images/interface/info_close.png") -2px -1px no-repeat;
}
#pftp .message h2 {
  font-family: "Rockwell W01","Times New Roman",Helvetica,Arial,sans-serif;
  font-size: 24px;
  line-height: 1.1em;
  margin: 20px 0;
}
#pftp .message span.desc {
  display: block;
  font-size: 12px;
  line-height: 1.2em;
  padding: 10px 20px 3px;
}

#pftp-bg {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: -570px;
  left: 0;
  z-index: 500;
  font-weight: bold;
  background-color: #000;
  display: none;
  opacity: 0;
}

#pftp,
.relative,
.interface {
  margin: 0 auto;
  position: relative;
}

/*Prevent Selecting*/
.preventSelect, #scroller .tree-spot, #scroller .tree-spot a, #scroller .tree-spot img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.blur {
  /*-webkit-transition: all 1.3s ease-in-out;
  -moz-transition: all 1.3s ease-in-out;
  -o-transition: all 1.3s ease-in-out;
  -ms-transition: all 1.3s ease-in-out;
  transition: all 1.3s ease-in-out;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);*/
}

#pftp {
  height: 570px;
}

.fixed {
  width: 1248px;
}

.fluid {
  width: 100%;
}

.interface {
  margin-left: 30px;
  margin-right: 32px;
  width: auto;
  /*width: 1180px;*/
}

.portal {
  height: 570px;
  position: relative;
}

.no-user-select, #parallax, #direction .nav, #select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#parallax {
  z-index: 100;
  /*cursor: pointer;*/
}

.grab, #scroller {
  cursor: url("../images/openhand.cur") 8 8, move;
}

.grabbing, #scroller.down {
  cursor: url("../images/closedhand.cur") 8 8, move;
}

#scroller {
  background: #6daac5;
  /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhNWI4NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iIzZkYWFjNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2UzZjFmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
   background: -moz-linear-gradient(top,  #2a5b85 0%, #6daac5 12%, #e3f1f7 51%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a5b85), color-stop(12%,#6daac5), color-stop(51%,#e3f1f7));
   background: -webkit-linear-gradient(top,  #2a5b85 0%,#6daac5 12%,#e3f1f7 51%);
   background: -o-linear-gradient(top,  #2a5b85 0%,#6daac5 12%,#e3f1f7 51%);
   background: -ms-linear-gradient(top,  #2a5b85 0%,#6daac5 12%,#e3f1f7 51%);
   background: linear-gradient(to bottom,  #2a5b85 0%,#6daac5 12%,#e3f1f7 51%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5b85', endColorstr='#e3f1f7',GradientType=0 );*/
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
  position: relative;
  overflow: hidden;
  top: 0;
}
#scroller .panes,
#scroller .theme {
  height: auto;
}
#scroller .panes {
  pointer-events: none;
}
#scroller .theme {
  float: left;
}

#scroller #field2_hotspots {
  /*
  .tree-spot img{
    width:78%;
  }
  .plug{
    width:74px;
  }*/
}
#scroller #field2_hotspots .tree-spot {
  -webkit-transform: scale(0.78);
  -moz-transform: scale(0.78);
  -ms-transform: scale(0.78);
  -o-transform: scale(0.78);
  transform: scale(0.78);
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  transform-origin: bottom center;
}
#scroller .tree-spot {
  position: relative;
  z-index: 10000;
  margin-top: 0px;
}
#scroller .tree-spot a {
  display: block;
  height: 100%;
  width: 100%;
}
#scroller .tree-spot img {
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 5px;
}
#scroller .tree-spot:hover .plug {
  background: url("../images/interface/plug_state2_over.png") no-repeat;
}
#scroller .unpaid {
  pointer-events: none;
}
#scroller .unpaid:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 59px;
  width: 102px;
  height: 30px;
  background: url("../images/interface/bg_drop_zone_unpaid.png") 50% 100% no-repeat;
}
#scroller .unpaid.hover_active {
  background: url("../images/interface/bg_drop_zone_rollover.png") 50% 100% no-repeat;
}
#scroller .paid:before,
#scroller .reserved:before,
#scroller .dropped:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 59px;
  width: 102px;
  height: 30px;
  background: url("../images/interface/bg_drop_zone_paid.png") 50% 100% no-repeat;
}
#scroller .stack-1 {
  width: 220px;
  height: 280px;
}
#scroller .stack-1 img {
  width: 220px;
  height: 280px;
}
#scroller .stack-1:before {
  left: 59px;
}
#scroller .stack-2 {
  width: 172px;
  height: 218px;
}
#scroller .stack-2 img {
  width: 172px;
  height: 218px;
}
#scroller .stack-2:before {
  left: 35px;
}
#scroller .paid,
#scroller .dropped,
#scroller .reserved {
  position: relative;
}
#scroller .paid .plug,
#scroller .dropped .plug,
#scroller .reserved .plug {
  background: url("../images/interface/plug_state2.png") no-repeat;
  display: inline-block;
  width: 95px;
  height: 26px;
  position: absolute;
  left: 64px;
  top: 255px;
  z-index: 10;
}
#scroller .stack-2 .plug {
  left: 36px;
}
#scroller .hot-spot {
  position: relative;
  z-index: 6000;
}
#scroller .hot-spot a {
  background: #ccc;
  text-align: center;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0.5;
}
#scroller .hot-spot a:hover {
  opacity: 0.3;
  background: red;
}
#scroller .corporate-spot {
  position: relative;
  z-index: 6000;
}
#scroller .corporate-spot a {
  text-align: center;
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}
#scroller .corporate-spot span.title {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #5e4e46;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  top: 28px;
  left: 55px;
  cursor: pointer;
}
#scroller .corporate-spot span.logo {
  position: absolute;
  display: inline-block;
  top: 48px;
  left: 92px;
  height: 55px;
  width: 55px;
  cursor: pointer;
}
#scroller .corporate-spot button.readon {
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  border-radius: 24px;
  background: #688816;
  color: #ffffff;
  position: absolute;
  border: none;
  top: 108px;
  left: 77px;
  outline: none;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  width: 83px;
  padding: 5px 10px;
}
#scroller .corporate-spot .readon:hover {
  background: #aac17b;
  color: #ffffff;
}
#scroller .corporate-spot .readon:active {
  background: #3a5824;
  color: #ffffff;
}
#scroller .stack-2 {
  z-index: 6000;
}
#scroller .stack-1 {
  z-index: 8000;
}
#scroller .bring-up {
  z-index: 8000;
}
#scroller .bring-down {
  z-index: 7000;
}

#scroller .panes,
#scroller .panes_hotspots,
#scroller .hot-spot,
#scroller .corporate-spot,
#scroller .tree-spot {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
  position: absolute;
}

#scroller .panes .theme {
  /*float: left;*/
  position: absolute;
  pointer-events: none;
}

#scroller .panes_hotspots .theme {
  position: absolute;
}

#scroller .pane {
  float: left;
  overflow: hidden;
  position: relative;
  width: 1024px;
  height: 620px;
  pointer-events: none;
}

#clouds {
  position: absolute;
  top: -20px;
  z-index: 1000;
}

#clouds_hotspots {
  position: absolute;
  z-index: 1001;
  height: 0px;
}

#mountains {
  position: absolute;
  top: 0px;
  z-index: 2000;
}

#mountains_hotspots {
  position: absolute;
  z-index: 2001;
  height: 0px;
}

#field2 {
  z-index: 3000;
  position: absolute;
  bottom: 0px;
}

#field2_hotspots {
  position: absolute;
  z-index: 3001;
  top: -100px;
  height: 0px;
}

#field1 {
  z-index: 5000;
  position: absolute;
  bottom: 0px;
  top: 120px;
}

#field1_hotspots {
  position: absolute;
  z-index: 5001;
  height: 0px;
  top: -120px;
}

/* log for development (remove for production) */
#log {
  position: fixed;
  width: 100%;
  top: 640px;
  z-index: 250000;
  left: 0px;
}

#log textarea {
  font-family: Courier, sans-serif;
  font-size: 12px;
  position: absolute;
  top: 0px;
  left: 10px;
  width: 300px;
  height: 100px;
  z-index: 9000000;
}

.idleAnimation {
  z-Index: 10;
}

#portrait_ipad {
  position: absolute;
  z-index: 999999;
  display: none;
  overflow: hidden;
}

/* navigation controls */
#direction {
  top: 0;
  z-index: 2000;
  position: absolute;
}
#direction .nav {
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-decoration: none;
  text-indent: -999px;
  width: 60px;
  height: 100px;
  top: 240px;
  cursor: pointer;
}
#direction #left {
  background: url("../images/interface/bg_nav_left.png") no-repeat;
  background-position: left center;
  left: -5px;
}
#direction #left #navCircleLeft {
  height: 75px;
  width: 80px;
  border: 1px solid #686075;
  border-radius: 50%;
  background: url("../images/interface/nav_arrow_left.png") no-repeat 49px 50% #68605f;
  margin: 0 0 0 -45px;
}
#direction #right {
  background: url("../images/interface/bg_nav_right.png") no-repeat;
  background-position: right center;
  right: 0px;
}
#direction #right #navCircleRight {
  height: 75px;
  width: 80px;
  border: 1px solid #686075;
  border-radius: 50%;
  background: url("../images/interface/nav_arrow_right.png") no-repeat 12px 50% #68605f;
  margin: 0 0 0 13px;
}

/* button controls */
#buttons {
  top: 475px;
  z-index: 190000;
  position: absolute;
  /*
    #fullscreen {
      right: -2px;
      background-position: 0 -144px;
    }

    #fullscreen:hover {
      background-color: $burnt-orange;
      background-position: -72px -144px;
    }

    #fullscreen.active {
      background-position: 0 -216px;
    }

    #fullscreen.active:hover {
      background-color: $burnt-orange;
      background-position: -72px -216px;
    }
  */
}
#buttons .controls,
#buttons .share {
  background: #68605f url("../images/interface/bg_icons_buttons.png") no-repeat;
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  text-indent: -999px;
}
#buttons .controls {
  position: absolute;
  width: 65px;
  height: 65px;
  margin: 5px 0 0 5px;
}
#buttons .share {
  width: 48px;
  height: 48px;
}
#buttons #share {
  left: -2px;
  background-position: -4px -3px;
  z-index: 10;
}
#buttons #share:hover,
#buttons #share.active {
  background-color: #e86f56;
  background-position: -4px -3px;
}
#buttons #overview {
  right: -2px;
  background-position: -5px -73px;
}
#buttons #overview:hover,
#buttons #overview.active {
  background-color: #e86f56;
}
#buttons #sharethis {
  position: relative;
  left: -46px;
}
#buttons #sharethis .share {
  position: absolute;
}
#buttons #sharethis a {
  width: 100%;
  height: 100%;
  display: block;
}
#buttons #facebook,
#buttons #twitter,
#buttons #email {
  background: #68605f url("../images/interface/bg_icons_buttons_social.png") no-repeat;
  left: 59px;
  top: 9px;
}
#buttons #facebook,
#buttons #twitter,
#buttons #email {
  left: 59px;
  top: 9px;
}
#buttons #facebook {
  background-position: -1px -1px;
}
#buttons #twitter {
  background-position: -1px -50px;
}
#buttons #email {
  background-position: -1px -100px;
}
#buttons #facebook:hover {
  background-color: #3a589b;
}
#buttons #twitter:hover {
  background-color: #00C0F7;
}
#buttons #email:hover {
  background-color: #488ccb;
}

/* tree select */
#select {
  width: 100%;
  height: 0;
  min-height: 58px;
  position: absolute;
  top: 0;
  margin-top: 512px;
  z-index: 5000;
  pointer-events: none;
  /*.target {
    background: url('../images/test/target.png') no-repeat 50% 50%;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 272px;
    left: 350px;
    z-index: 500;
  }*/
  /** tree rotation **/
}
#select .inset {
  margin: 0 auto;
  position: relative;
  width: 780px;
  height: 58px;
}
#select .mask {
  overflow: hidden;
}
#select .controls {
  background: transparent;
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -999px;
}
#select #toggle {
  position: absolute;
  top: 34px;
  left: 375px;
  z-index: 2000;
  pointer-events: auto;
  /*.active {
    background-position: 0 -20px;
  }*/
}
#select #toggle button {
  background: url(../images/interface/menu_arrow.png) no-repeat 5px center;
  width: 30px;
  height: 20px;
}
#select #cirque {
  background: #e86f56;
  width: 600px;
  height: 600px;
  position: absolute;
  top: 6px;
  left: 90px;
  z-index: 300;
  pointer-events: auto;
}
#select #wheel {
  background: url("../images/interface/_de/bg_wheel.png") no-repeat;
  cursor: pointer;
  width: 600px;
  height: 600px;
  text-align: center;
  overflow: hidden;
  text-indent: -9999px;
}
#select .selection {
  width: 780px;
  height: 780px;
  position: relative;
  z-index: 100;
}
#select .selection .trees {
  pointer-events: auto;
  width: 72px;
  height: 72px;
  background: #f6f6f6;
  position: absolute;
}
#select .selection .trees .drag img {
  pointer-events: auto;
  cursor: pointer;
  height: 62px;
  margin: 3px 11px 0;
}
#select .selection .trees .dragging {
  cursor: move;
  position: relative;
  margin-left: -28px;
  margin-top: -64px;
  width: 132px;
  height: 168px;
}
#select .selection .trees .dragging img {
  width: 132px;
  height: 168px;
  margin: 0;
}
#select .selection .trees .dragging .plug {
  background: url("../images/interface/plug_state1.png") no-repeat;
  position: absolute;
  left: 35px;
  bottom: -25px;
  width: 62px;
  height: 40px;
}
#select #drag-component, #select #replace-component {
  position: relative;
  top: -58px;
}
#select #drag-component .inset.increase, #select #replace-component .inset.increase {
  margin-top: -129px;
  padding-top: 25px;
}
#select #tree-select {
  z-index: 200;
  /*.trees {
    */
  /*left: 354px;
top: 276px;*/
               /*
  left: 139px;
  top: -2px;
  &.drag-start {
    border: 5px solid $burnt-orange;
  }
  &:first-child {
    left: 139px;
    top: -2px;
  }
  &:nth-child(2) {
    left: 209px;
    top: -45px;
  }
  &:nth-child(3) {
    left: 289px;
    top: -70px;
  }
  &:nth-child(4) {
    left: 372px;
    top: -78px;
  }
  &:nth-child(5) {
    left: 455px;
    top: -62px;
  }
  &:nth-child(6) {
    left: 532px;
    top: -28px;
  }
}*/
}
#select #tree-select ul {
  position: absolute;
  top: 120px;
}
#select #tree-select.active ul {
  top: 0 !important;
}
#select #replace-component {
  position: relative;
  top: -116px;
}
#select #replace-select {
  z-index: 100;
}
#select #replace-select .trees {
  left: 354px;
  top: 276px;
  /*left: 139px;
  top: -2px;*/
}
#select #replace-select .trees.drag-start {
  border: 5px solid #e86f56;
}
#select #replace-select .trees:first-child {
  left: 139px;
  top: -2px;
}
#select #replace-select .trees:nth-child(2) {
  left: 209px;
  top: -45px;
}
#select #replace-select .trees:nth-child(3) {
  left: 289px;
  top: -70px;
}
#select #replace-select .trees:nth-child(4) {
  left: 372px;
  top: -78px;
}
#select #replace-select .trees:nth-child(5) {
  left: 455px;
  top: -62px;
}
#select #replace-select .trees:nth-child(6) {
  left: 532px;
  top: -28px;
}
#select #tree-select {
  z-index: 100;
}
#select #tree-select .trees {
  left: 354px;
  top: 276px;
  /*left: 139px;
  top: -2px;*/
}
#select #tree-select .trees.drag-start {
  border: 5px solid #e86f56;
}
#select #tree-select .trees:first-child {
  left: 139px;
  top: -2px;
}
#select #tree-select .trees:nth-child(2) {
  left: 209px;
  top: -45px;
}
#select #tree-select .trees:nth-child(3) {
  left: 289px;
  top: -70px;
}
#select #tree-select .trees:nth-child(4) {
  left: 372px;
  top: -78px;
}
#select #tree-select .trees:nth-child(5) {
  left: 455px;
  top: -62px;
}
#select #tree-select .trees:nth-child(6) {
  left: 532px;
  top: -28px;
}
#select #tree-select .trees .dragging,
#select #replace-select .trees .dragging {
  -webkit-transform: rotate(0deg) !important;
  margin: 0 !important;
}
#select #tree-select .trees:first-child .drag,
#select #replace-select .trees:first-child .drag {
  -webkit-transform: rotate(-37deg);
  margin: -2px 0px 0 -3px;
}
#select #tree-select .trees:nth-child(2) .drag,
#select #replace-select .trees:nth-child(2) .drag {
  -webkit-transform: rotate(-26deg);
  margin: -4px 0 0 -3px;
}
#select #tree-select .trees:nth-child(3) .drag,
#select #replace-select .trees:nth-child(3) .drag {
  -webkit-transform: rotate(-12deg);
  margin: -4px 0 0 -2px;
}
#select #tree-select .trees:nth-child(4) .drag,
#select #replace-select .trees:nth-child(4) .drag {
  -webkit-transform: rotate(2deg);
  margin: -2px 0 0 0;
}
#select #tree-select .trees:nth-child(5) .drag,
#select #replace-select .trees:nth-child(5) .drag {
  -webkit-transform: rotate(19deg);
  margin: 0 0 0 1px;
}
#select #tree-select .trees:nth-child(6) .drag,
#select #replace-select .trees:nth-child(6) .drag {
  -webkit-transform: rotate(30deg);
  margin: 0 0 0 4px;
}
#select .increase {
  margin-top: -104px;
  height: 162px;
}
#select .increase .target {
  top: 356px;
}
#select .increase #toggle {
  top: 138px;
}
#select .increase #cirque {
  top: 106px;
}
#select .increase #tree-select .trees:first-child,
#select .increase #replace-select .trees:first-child {
  top: 78px;
}
#select .increase #tree-select .trees:nth-child(2),
#select .increase #replace-select .trees:nth-child(2) {
  top: 35px;
}
#select .increase #tree-select .trees:nth-child(3),
#select .increase #replace-select .trees:nth-child(3) {
  top: 11px;
}
#select .increase #tree-select .trees:nth-child(4),
#select .increase #replace-select .trees:nth-child(4) {
  top: 4px;
}
#select .increase #tree-select .trees:nth-child(5),
#select .increase #replace-select .trees:nth-child(5) {
  top: 20px;
}
#select .increase #tree-select .trees:nth-child(6),
#select .increase #replace-select .trees:nth-child(6) {
  top: 54px;
}
#select .decrease {
  margin-top: 0;
}
#select #control {
  left: 606px;
  top: 95px;
  position: absolute;
  z-index: 400;
  background: #e86f56;
  width: 50px;
  height: 50px;
  pointer-events: auto;
}
#select #refresh {
  background: url("../images/interface/tree_refresh.png") no-repeat 50% 50%;
  width: 50px;
  height: 50px;
  pointer-events: auto;
  left: 0;
}

/* overview map */
#map {
  background: url("../images/interface/bg_stipple_dark.png");
  border-top: 1px solid #423d3c;
  box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4), inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4), inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4), inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4);
  height: 49px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
#map #themes {
  clear: both;
  height: 40px;
  margin-top: 4px;
  position: relative;
  /*overflow: hidden;*/
}
#map #themes .load {
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -999px;
  width: 18px;
  height: 30px;
  top: 5px;
}
#map #themes #prev {
  background: url('../images/interface/nav_small_arrow_left.png?1421685669') no-repeat 0 8px;
  left: 56px;
  z-index: 100;
}
#map #themes #next {
  background: url('../images/interface/nav_small_arrow_right.png?1421685669') no-repeat 5px center;
  right: 51px;
  z-index: 100;
}
#map #themes .flatButton {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  border-radius: 20px;
  padding: 3px 14px;
  font-weight: 400;
  font-size: 12px;
  outline: none;
  font-family: 'Open Sans Bold', sans-serif;
}
#map #themes #navBegin {
  top: 5px;
  left: -23px;
  position: absolute;
}
#map #themes #navBegin:hover {
  background-color: #ccc;
}
#map #themes #navToday {
  position: absolute;
  right: -27px;
  top: 5px;
}
#map #themes #navToday:hover {
  background-color: #ccc;
}
#map #themes #indicator {
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  border-radius: 18px;
  border: 3px solid #e86f56;
  display: inline-block;
  height: 24px;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 100;
}
#map #themes #viewfinder {
  height: 0px;
  margin: -30px 50px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}
#map #themes #viewfinder .dropzones {
  min-width: 298px;
  width: 298px;
}
#map #themes #viewfinder .corporate {
  min-width: 114px;
  width: 114px;
}
#map #themes #viewfinder .first {
  -moz-border-radius-topleft: 15px;
  -webkit-border-top-left-radius: 15px;
  border-top-left-radius: 15px;
  -moz-border-radius-bottomleft: 15px;
  -webkit-border-bottom-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
#map #themes #viewfinder .last {
  -moz-border-radius-topright: 15px;
  -webkit-border-top-right-radius: 15px;
  border-top-right-radius: 15px;
  -moz-border-radius-bottomright: 15px;
  -webkit-border-bottom-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
#map #themes .world {
  background: url('../images/interface/map_clouds.jpg?1421685669') repeat-x;
  overflow: hidden;
  margin: 0 70px;
  padding: 0;
  position: relative;
  top: 5px;
  height: 30px;
  border-radius: 15px;
}
#map #themes .world ul {
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
}
#map #themes .world ul li {
  display: inline-block;
  float: left;
  margin-right: 0;
  padding: 0;
  height: 30px;
}
#map #themes .world ul li:first-of-type a {
  -moz-border-radius-topleft: 15px;
  -webkit-border-top-left-radius: 15px;
  border-top-left-radius: 15px;
  -moz-border-radius-bottomleft: 15px;
  -webkit-border-bottom-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
#map #themes .world ul li:last-of-type a {
  -moz-border-radius-topright: 15px;
  -webkit-border-top-right-radius: 15px;
  border-top-right-radius: 15px;
  -moz-border-radius-bottomright: 15px;
  -webkit-border-bottom-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
#map #themes .world ul li a {
  display: inline-block;
  height: 30px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  min-width: 20px;
}
#map #themes .world ul li.dropzones.panels-1,
#map #themes .world ul li.corporate.panels-1 {
  width: 51px;
}
#map #themes .world ul li.dropzones.panels-2,
#map #themes .world ul li.corporate.panels-2 {
  width: 102px;
}
#map #themes .world ul li.dropzones.panels-3,
#map #themes .world ul li.corporate.panels-3 {
  width: 153px;
}
#map #themes .world ul li.dropzones.panels-4,
#map #themes .world ul li.corporate.panels-4 {
  width: 204px;
}
#map #themes .world ul li.dropzones.panels-5,
#map #themes .world ul li.corporate.panels-5 {
  width: 255px;
}
#map #themes .world ul li.dropzones.panels-6,
#map #themes .world ul li.corporate.panels-6 {
  width: 306px;
}
#map #themes .world ul li.dropzones a,
#map #themes .world ul li.corporate a {
  min-width: 100% !important;
  width: 100% !important;
}
#map #themes .world ul li.dropzones {
  min-width: 306px;
  width: 306px;
}
#map #themes .world ul li.dropzones a {
  min-width: 306px;
  width: 306px;
}
#map #themes .world ul li.corporate {
  /*min-width: 124px;
  width: 124px;*/
  /*min-width: 308px;
  width: 308px;*/
  min-width: 102px;
  width: 102px;
}
#map #themes .world ul li.corporate a {
  /*min-width: 308px;
  width: 308px;*/
  min-width: 102px;
  width: 102px;
}

/* cloak for preload */
#spinner {
  background: url("../images/interface/bg_cloak.png");
}

#cloak {
  background: #c1dff4 url("../images/preload/ajax-loader.gif") center center no-repeat;
}

#cloak,
#spinner {
  margin: 0;
  width: 100%;
  height: 620px;
  position: absolute;
  z-index: 210000;
  top: 0;
  left: 0;
  pointer-events: none;
}
#cloak .loading,
#spinner .loading {
  background: url("../images/sprites/preload.png") 0 0 no-repeat;
  display: block;
  width: 72px;
  height: 115px;
  position: relative;
  margin: 240px auto 0;
  text-align: center;
  -webkit-animation: walk 1s steps(12) infinite;
  -moz-animation: walk 1s steps(12) infinite;
  -ms-animation: walk 1s steps(12) infinite;
  animation: walk 1s steps(12) infinite;
}
#cloak .loading strong,
#spinner .loading strong {
  color: #ffffff;
  display: inline-block;
  font-family: "Rockwell W01", "Times New Roman", Helvetica, Arial, sans-serif;
  font-size: 24px;
  text-align: center;
  margin: 63px 0 0 2px;
}

@-webkit-keyframes walk {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -900px 0;
  }
}
@-moz-keyframes walk {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -900px 0;
  }
}
@-o-keyframes walk {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -900px 0;
  }
}
@keyframes walk {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -900px 0;
  }
}
#btnSkipIntro {
  background: url("../images/intro/introUeberspringen.png") 0 0 no-repeat;
  width: 255px;
  height: 54px;
}

/* payment login screen */
#payment {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #fff;
  margin: 0 auto;
  width: 690px;
  height: 360px;
  overflow: none;
  position: relative;
  top: 100px;
  padding: 50px 0 0;
  opacity: 1;
  text-align: left;
  /**Animation of the little progress Birdie **/
}
#payment .payment_container {
  position: absolute;
  width: 690px;
  height: 360px;
  overflow: hidden;
}
#payment form {
  width: 6900px;
  position: absolute;
}
#payment .payment--header {
  width: 100%;
  height: 60px;
  background: url("../images/interface/bg_payment_header.jpg");
  position: absolute;
  top: 0;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px;
  border-radius: 5px 5px 0px 0px;
}
#payment .payment--header .headline {
  color: #3a5824;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.35);
  line-height: 20px;
  margin-top: 24px;
  font-size: 24px !important;
  font-family: "Rockwell W01","Times New Roman",Helvetica,Arial,sans-serif;
  color: #68605f;
  font-weight: 400;
  text-align: center;
}
#payment .payment__notice {
  margin: 25px 0 0 20px;
}
#payment .payment__notice .payment__notice__icon {
  width: 75px;
  height: 55px;
  background: url("../images/interface/payment_notice_icon.png");
  float: left;
}
#payment .payment__notice .payment__notice__text {
  width: 68%;
  display: inline-block;
  font-size: 12px;
  line-height: 1.5em;
  margin: 0 0 0 10px;
}
#payment #continue {
  float: left;
  font-size: 13px;
}
#payment #step0_coupon {
  float: right;
  margin-right: 15px;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  padding-right: 25px;
  background-image: none;
}
#payment .close {
  background: url("../images/interface/bg_close.png") no-repeat;
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  text-indent: -999px;
  position: absolute;
  z-index: 205;
  width: 26px;
  height: 26px;
  top: 15px;
  right: 15px;
}
#payment #payment-bird {
  width: 79px;
  height: 80px;
  position: absolute;
  z-index: 99;
}
#payment #payment-bird .sprite {
  width: inherit;
  height: inherit;
}
#payment .hide {
  display: none;
}
#payment .flydown .sprite,
#payment .flyup .sprite {
  background: url("../images/sprites/birdie.png") 0 0 no-repeat;
}
#payment .flap0 .sprite,
#payment .flap1 .sprite,
#payment .flap2 .sprite,
#payment .flap3 .sprite,
#payment .flap4 .sprite,
#payment .flap5 .sprite {
  background: url("../images/sprites/birdie.png") 0 -80px no-repeat;
}
#payment .flydown,
#payment .flap0,
#payment .flap1 {
  left: 119px;
  top: -81px;
}
#payment .flap2 {
  left: 232px;
  top: -82px;
}
#payment .flap3 {
  left: 326px;
  top: -81px;
}
#payment .flap4 {
  left: 418px;
  top: -81px;
}
#payment .flap5,
#payment .flyup {
  left: 499px;
  top: -81px;
}
#payment .mask {
  clip: rect(0px, 470px, 7px, 0px);
}
#payment #steps_bg {
  background: url("../images/interface/payment_state_bg.png") no-repeat 0 0;
  height: 89px;
  z-index: 90;
  position: absolute;
  width: 100%;
  top: -37px;
}
#payment #steps {
  position: absolute;
  top: -37px;
  width: 100%;
  height: 89px;
  z-index: 101;
  background: url("../images/interface/payment_state.png") no-repeat 0 0;
}
#payment #steps .rollup li {
  text-indent: -10000px;
}
#payment #steps .rollup li [data-rel="step1"] {
  margin-left: 120px;
}
#payment #steps ul {
  margin: 0;
  padding: 0;
}
#payment #steps li {
  display: inline-block;
  width: 85px;
  height: 47px;
  font-size: 11px;
  margin-right: 5px;
  position: relative;
  vertical-align: top;
  pointer-events: none;
  overflow: hidden;
}
#payment #steps li strong {
  display: block;
  line-height: 14px;
  word-wrap: normal;
  hyphens: auto;
  width: 80px;
  margin-left: 5px;
  margin-top: 11px;
  text-align: center;
}
#payment #steps .active {
  background-position: 0 -47px;
  color: #fff;
}
#payment #customer {
  height: 100%;
}
#payment #step1 .title,
#payment #step2 .title,
#payment #step2b .title,
#payment #step3 .title,
#payment #step4 .title,
#payment #step5 .title,
#payment #step6 .title {
  font-size: 14px;
}
#payment #step1, #payment #step2 {
  height: 100%;
}
#payment #step2 #receipt {
  height: 333px;
}
#payment #step2 #receipt .controls {
  text-align: center;
}
#payment #step2b #couponLayer {
  height: 340px;
}
#payment #step2b #couponLayer .inner {
  width: 458px;
}
#payment #step2b .controls {
  text-align: center;
}
#payment #step2b .controls .prev {
  margin-left: 40px;
}
#payment #step2b .couponError {
  display: none;
}
#payment #step2c .couponLayer2, #payment #step5b .couponLayer2 {
  height: 370px;
}
#payment #step2c .couponLayer2 .inner, #payment #step5b .couponLayer2 .inner {
  width: 550px;
}
#payment #step2c .couponLayer2 .inner p, #payment #step5b .couponLayer2 .inner p {
  font-weight: 200;
  font-size: 12px;
}
#payment #step2c .img_preview, #payment #step5b .img_preview {
  background: url("../images/interface/coupon_preview.jpg") no-repeat 0 0;
  width: 553px;
  height: 180px;
}
#payment #step2c .img_preview_plantedby, #payment #step5b .img_preview_plantedby {
  position: absolute;
  top: 110px;
  left: 198px;
  font-family: "Rockwell W01","Times New Roman",Helvetica,Arial,sans-serif;
  font-size: 12px;
  line-height: 1.1em;
}
#payment #step2c .img_preview_name, #payment #step5b .img_preview_name {
  position: absolute;
  top: 131px;
  left: 198px;
  font-family: "Rockwell W01","Times New Roman",Helvetica,Arial,sans-serif;
  font-size: 24px;
  line-height: 1em;
  width: 190px;
  text-align: left;
}
#payment #step2c .img_preview_plantedbyName, #payment #step5b .img_preview_plantedbyName {
  position: absolute;
  top: 190px;
  left: 198px;
  font-size: 12px;
  line-height: 1.2em;
  width: 180px;
  text-align: left;
}
#payment #step2c .controls, #payment #step5b .controls {
  text-align: center;
}
#payment #step2c .controls .prev, #payment #step5b .controls .prev {
  margin-left: 40px;
}
#payment #step2c .couponError, #payment #step5b .couponError {
  display: none;
}
#payment #step2c label, #payment #step5b label {
  display: inline-block;
  float: left;
  font-size: 14px;
  width: 550px;
  text-align: right;
  margin-top: 15px;
  font-weight: 600;
  font-family: 'Open Sans Bold',sans-serif;
  margin-right: 30px;
  position: relative;
}
#payment #step2c label:before, #payment #step5b label:before {
  top: 1px;
  display: none;
}
#payment #step2c label:hover:before, #payment #step5b label:hover:before {
  background: #E7E7E7;
}
#payment #step2c label .checked-state, #payment #step5b label .checked-state {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: -1px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#payment #step2c label input, #payment #step5b label input {
  margin: 0 6px 0 18px;
  font-size: 16px;
}
#payment #step2c label input[type="checkbox"], #payment #step5b label input[type="checkbox"] {
  display: inline-block;
}
#payment #step2c label input[type="checkbox"]:checked + label, #payment #step5b label input[type="checkbox"]:checked + label {
  color: #688816;
}
#payment #step2c label input[type="checkbox"]:checked + label + .checked-state, #payment #step5b label input[type="checkbox"]:checked + label + .checked-state {
  background-color: #688816;
  border: 1px solid #688816;
}
#payment #step2c label input:focus, #payment #step5b label input:focus {
  outline: 0px none transparent;
}
#payment fieldset {
  border: 0 none;
  margin: 0;
  float: left;
  width: 690px;
}
#payment fieldset legend {
  display: block;
  position: absolute;
  clip: rect(0px 0px 0px 0px);
}
#payment fieldset div.error {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #e86f56;
  color: #ffffff;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 2px 5px 2px;
}
#payment fieldset .radio .error {
  text-align: center;
  padding: 10px;
}
#payment fieldset .fields {
  margin: 0;
  padding: 0;
  width: 560px;
}
#payment fieldset .fields label {
  color: #68605f;
  font-size: 11px;
  display: block;
  padding: 0 0 4px;
}
#payment fieldset .fields input:focus,
#payment fieldset .fields select:focus,
#payment fieldset .fields textarea:focus,
#payment fieldset .fields button:focus {
  outline: none;
}
#payment fieldset .fields select {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #68605f;
  background: #ffffff;
  color: #68605f;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 24px;
  padding: 8px 15px;
  width: 140px;
  height: 35px;
}
#payment fieldset .fields input[type="text"],
#payment fieldset .fields input[type="email"],
#payment fieldset .fields input[type="number"] {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #68605f;
  background: #ffffff;
  color: #68605f;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 8px 15px;
  width: 100%;
}
#payment fieldset .fields input[type="text"].small,
#payment fieldset .fields input[type="email"].small,
#payment fieldset .fields input[type="number"].small {
  width: 177px;
}
#payment fieldset .fields select:hover,
#payment fieldset .fields input[type="text"]:hover,
#payment fieldset .fields input[type="email"]:hover,
#payment fieldset .fields input[type="number"]:hover {
  border-color: #b3a4a1;
  color: #b3a4a1;
}
#payment fieldset .fields select:focus,
#payment fieldset .fields input[type="text"]:focus,
#payment fieldset .fields input[type="email"]:focus,
#payment fieldset .fields input[type="number"]:focus {
  border-color: #b3a4a1;
  background: #f6f4f4;
  color: #68605f;
}
#payment fieldset .fields select.error,
#payment fieldset .fields input[type="text"].error,
#payment fieldset .fields input[type="email"].error,
#payment fieldset .fields input[type="number"].error,
#payment fieldset .fields input[type="text"].error:hover,
#payment fieldset .fields input[type="email"].error:hover,
#payment fieldset .fields input[type="number"].error:hover,
#payment fieldset .fields input[type="text"].error:focus,
#payment fieldset .fields input[type="email"].error:focus,
#payment fieldset .fields input[type="number"].error:focus {
  border-color: #e86f56;
  color: #e86f56;
  text-transform: none;
}
#payment fieldset .fields select.valid,
#payment fieldset .fields input[type="text"].valid,
#payment fieldset .fields input[type="email"].valid,
#payment fieldset .fields input[type="number"].valid,
#payment fieldset .fields input[type="text"].valid:hover,
#payment fieldset .fields input[type="email"].valid:hover,
#payment fieldset .fields input[type="number"].valid:hover,
#payment fieldset .fields input[type="text"].valid:focus,
#payment fieldset .fields input[type="email"].valid:focus,
#payment fieldset .fields input[type="number"].valid:focus {
  border-color: #688816;
  color: #688816;
  text-transform: none;
}
#payment fieldset .fields div.error {
  position: absolute;
  top: -8px;
  right: -8px;
}
#payment fieldset .fields li {
  float: left;
  position: relative;
  margin-bottom: 10px;
  list-style-type: none;
}
#payment fieldset .fields .full {
  width: 460px;
}
#payment fieldset .fields .full input {
  width: 430px;
}
#payment fieldset .fields #couponFirstName, #payment fieldset .fields #couponLastName {
  width: 95%;
}
#payment fieldset .fields .third {
  clear: none;
  float: left;
  width: 125px;
}
#payment fieldset .fields .third.margin-right {
  margin-right: 31px;
}
#payment fieldset .fields .half {
  clear: none;
  float: left;
  width: 225px;
}
#payment fieldset .fields .half.margin-right {
  margin-right: 10px;
}
#payment fieldset .fields .half input {
  width: 193px;
}
#payment fieldset .fields .float-right {
  float: right;
  margin-right: 0;
}
#payment fieldset .fields .clear {
  clear: both;
}
#payment fieldset .fields .country {
  position: relative;
  z-index: 10;
}
#payment fieldset label.checkbox {
  color: #688816;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  padding-top: 10px;
  position: relative;
  z-index: 10;
}
#payment fieldset label.checkbox input {
  margin-right: 5px;
}
#payment .hide {
  display: none;
  position: relative;
  clip: rect(0px 0px 0px 0px);
}
#payment #receipt {
  width: 560px;
  margin: 0 auto;
}
#payment #receipt .title {
  margin-top: 27px;
  margin-bottom: 18px;
}
#payment #receipt .fields input[type=text].small {
  width: 160px;
  margin-left: 10px;
}
#payment #receipt .fields input[type=text].big {
  width: 525px;
}
#payment .payment__method {
  width: 460px;
  margin-top: 35px;
  position: relative;
}
#payment .via {
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  border-radius: 24px;
  background: #688816;
  border: 2px solid #688816;
  color: #fff;
  font-family: "Open Sans",Helvetica,Arial,sans-serif;
  outline: 0 none;
  font-size: 14px;
  font-weight: 700;
  min-width: 120px;
  padding: 11px 60px 11px 25px;
  display: inline-block;
  cursor: pointer;
}
#payment .via:hover {
  border-color: #aac17b;
  color: #ffffff;
}
#payment .via a {
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  color: #fff;
  margin: 0 0 0 -15px;
}
#payment .via.via-paypal {
  background: #688816 url("../images/interface/payment_paypal_icon.png") 86% 15px no-repeat;
}
#payment .via.via-paypal:hover {
  background: #aac17b url("../images/interface/payment_paypal_icon.png") 86% 15px no-repeat;
}
#payment .via.via-creditcard {
  background: #688816 url("../images/interface/payment_credit_icon.png") 91% 9px no-repeat;
  padding-right: 27px;
  margin-right: 25px;
}
#payment .via.via-creditcard:hover {
  background: #aac17b url("../images/interface/payment_credit_icon.png") 91% 9px no-repeat;
}
#payment .via.disabled {
  background: #888888 url("../images/interface/payment_credit_icon.png") 91% 9px no-repeat;
  border: 2px solid #7C7C7C;
}
#payment .via.disabled:hover {
  background: #888888 url("../images/interface/payment_credit_icon.png") 91% 9px no-repeat;
}
#payment .payment__method__tooltip {
  width: 280px;
  height: auto;
  font-size: 13px;
  position: absolute;
  top: 0;
  padding: 10px;
  display: none;
  -webkit-box-shadow: 0px 2px 3px 0px rgba(82, 82, 82, 0.1);
  box-shadow: 0px 2px 3px 0px rgba(82, 82, 82, 0.1);
}
#payment .payment__method__tooltip.credit {
  top: 51px;
  left: -60px;
}
#payment .payment__method__tooltip.paypal {
  top: 51px;
  right: -39px;
}
#payment .arrow_box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #ffffff;
  border: 1px solid #e6ddd2;
}
#payment .arrow_box:after, #payment .arrow_box:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
#payment .arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}
#payment .arrow_box:before {
  border-color: rgba(230, 221, 210, 0);
  border-bottom-color: #e6ddd2;
  border-width: 11px;
  margin-left: -11px;
}
#payment .component {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #68605f;
  height: 100%;
  position: relative;
}
#payment .component .left {
  float: left;
  width: 270px;
  min-height: 300px;
}
#payment .component .right {
  float: right;
  width: 420px;
  min-height: 300px;
}
#payment .component .left .title,
#payment .component .right .title {
  padding-top: 20px;
  padding-right: 3px;
  padding-left: 0px;
}
#payment .component .details, #payment .component .details .left,
#payment .component .details .right {
  min-height: 100px;
  padding-bottom: 1px;
}
#payment .component .details .right .list {
  padding: 10px;
}
#payment .component .details .right .list li {
  font-size: 12px;
  font-weight: bold;
  padding: 0 0 3px;
}
#payment .component .details .right .list li strong {
  width: 130px;
}
#payment .component .details, #payment .component .details .left,
#payment .component .details .right {
  border-bottom: 1px solid #e6ddd2;
}
#payment .component .form, #payment .component .form .left,
#payment .component .form .right {
  min-height: 200px;
}
#payment .component .form .right .fields {
  padding-top: 10px;
}
#payment .component ul {
  margin: 0;
  padding: 0;
}
#payment .component button {
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  border-radius: 24px;
  background: #ffffff;
  border: 2px solid #68605f;
  color: #68605f;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  outline: 0 none;
  font-size: 14px;
  font-weight: bold;
  min-width: 120px;
  padding: 8px 30px;
}
#payment .component .options {
  padding: 50px 0;
}
#payment .component .options button {
  font-size: 16px;
  margin: 0 5px;
  padding: 11px 50px 11px 25px;
  min-width: 140px;
}
#payment .component .next {
  background: #68605f;
  border-color: #68605f;
  color: #ffffff;
}
#payment .component .next:hover {
  background: #b3a4a1;
  border-color: #b3a4a1;
  color: #ffffff;
}
#payment .component .next:active {
  background: #58483e;
  border-color: #58483e;
  color: #ffffff;
}
#payment .component .prev {
  background: url("../images/interface/payment_btn_arrow_back.png") no-repeat 0px 50%;
  font-size: 14px;
  border: 0;
  color: #68605f;
  position: absolute;
  left: 0;
  padding: 11px 25px 11px 11px !important;
}
#payment .component .prev:hover {
  background: url("../images/interface/payment_btn_arrow_back.png") no-repeat 0px 50%;
  color: #68605f;
}
#payment .component .prev:active {
  background: transparent;
  border-color: #3a5824;
  color: #3a5824;
}
#payment .component .white {
  background: transparent;
  border-color: #688816;
  color: #688816;
}
#payment .component .white:hover {
  background: transparent;
  border-color: #aac17b;
  color: #aac17b;
}
#payment .component .white:active {
  background: transparent;
  border-color: #3a5824;
  color: #3a5824;
}
#payment .component .green {
  background: #688816 url("../images/interface/payment_btn_arrow.png") no-repeat 90% 50%;
  border-color: #688816;
  color: #ffffff;
}
#payment .component .green:hover {
  background: #aac17b url("../images/interface/payment_btn_arrow.png") no-repeat 90% 50%;
  border-color: #aac17b;
  color: #ffffff;
}
#payment .component .green:active {
  background: #3a5824;
  border-color: #3a5824;
  color: #ffffff;
}
#payment .component .controls {
  padding: 20px 0;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
#payment .component .controls.coupon {
  border-top: 1px solid #ccc;
}
#payment .component .controls.coupon .inner {
  width: 470px;
}
#payment .component .controls.coupon h2 {
  margin: 0px;
  padding: 0px;
  text-align: left;
  margin-left: 30px;
  font-size: 18px;
  margin-bottom: 11px;
}
#payment .component .controls.coupon .couponError {
  float: left;
  line-height: 38px;
  margin-left: 20px;
  font-size: 12px;
}
#payment .component .controls.coupon input {
  font-size: 15px;
  padding: 7px 11px;
  float: left;
  margin-left: 30px;
  width: 180px;
}
#payment .component .controls.coupon button {
  padding: 5px 10px 5px 0px;
  min-width: 100px;
  float: right;
  margin-right: 30px;
}
#payment .component .controls .float-left {
  float: left;
  margin-left: 20px;
}
#payment .component .controls .float-right {
  float: right;
  margin-right: 20px;
}
#payment .component a.didactic {
  background: url("../images/interface/bg_arrow_right.png") no-repeat 100% 50%;
  color: #688816;
  display: inline-block;
  font-weight: bold;
  padding-right: 24px;
  text-decoration: none;
}
#payment .component a.didactic:hover {
  text-decoration: underline;
}
#payment .component #wish {
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  padding-top: 40px;
  display: none;
}
#payment .component .inner {
  margin: 0 auto;
  padding-top: 20px;
  position: relative;
  width: 360px;
}
#payment .component .age p {
  line-height: 20px;
  margin: 0 0 16px;
  text-align: center;
}
#payment .component #tabs {
  margin: 0 auto;
  position: relative;
  width: 510px;
}
#payment .component #tabs label {
  background: #ffffff url("../images/interface/bg_payment_methods.png") no-repeat;
  border-style: solid;
  border-color: #688816;
  border-width: 2px 1px 2px 2px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  color: #688816;
  display: block;
  float: left;
  width: 252px;
  height: 32px;
  font-size: 12px;
  padding: 60px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#payment .component #tabs label input {
  position: absolute;
  left: -300px;
}
#payment .component #tabs label .notice {
  background: #aac17b;
  color: #ffffff;
  display: inline-block;
  width: 120px;
  height: 40px;
  position: absolute;
  top: 3px;
  right: -35px;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}
#payment .component #tabs label .notice em {
  display: inline-block;
  font-size: 11px;
  font-style: normal;
  letter-spacing: normal;
  margin: 6px 0 0;
  width: 52px;
}
#payment .component #tabs label.transfer {
  background-position: -252px 0;
  border-width: 2px 2px 2px 1px;
  -moz-border-radius-topleft: 0px;
  -webkit-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#payment .component #tabs label.inactive {
  background: #eaefde url("../images/interface/bg_payment_methods.png") no-repeat 0 -184px;
  border-color: #aac17b;
  color: #aac17b;
  cursor: default;
}
#payment .component #tabs label.transfer.inactive {
  background-position: -252px -184px;
  color: #aac17b;
}
#payment .component #tabs label.hover {
  background: #688816 url("../images/interface/bg_payment_methods.png") no-repeat 0 -92px;
  border-color: #3a5824 #688816 #688816;
  color: #ffffff;
}
#payment .component #tabs label.transfer.hover {
  background-position: -252px -92px;
}
#payment .component #tabs label.active {
  background: #3a5824 url("../images/interface/bg_payment_methods.png") no-repeat 0 -92px;
  border-color: #21390b #3a5824 #3a5824;
  color: #ffffff;
}
#payment .component #tabs label.transfer.active {
  background-position: -252px -92px;
}
#payment .component #includes {
  clear: both;
  margin: 0 auto;
  padding: 10px 0;
  position: relative;
  width: 510px;
}
#payment .component #includes p {
  font-size: 12px;
  line-height: 22px;
  margin-left: 4px;
}
#payment .component #includes ul {
  background: url("../images/interface/includes.png") no-repeat;
  margin-left: 4px;
  width: 242px;
  height: 23px;
  overflow: hidden;
  text-indent: -999px;
}
#payment #amount {
  background: url("../images/interface/bg_amount.png") no-repeat 100% 100%;
}
#payment #amount .title {
  margin-top: 10px;
}
#payment #amount .title.font-size {
  font-size: 15px;
}
#payment #amount .donation-cert {
  float: left;
  margin-top: 6px;
  width: 460px;
}
#payment #amount .donation-cert .title {
  margin-bottom: 14px;
}
#payment #amount .controls {
  text-align: center;
}
#payment #question {
  background: url("../images/interface/bg_question.png") no-repeat 45% 50%;
}
#payment #question .options {
  background: url("../images/interface/bg_people.png") no-repeat 50% 0%;
  height: 145px;
  padding-bottom: 40px;
  position: relative;
}
#payment #question .options button {
  position: absolute;
  bottom: 0;
  z-index: 10;
}
#payment #question .options #over-18 {
  left: 10px;
}
#payment #question .options #under-18 {
  right: 10px;
}
#payment #redirect {
  background: url("../images/interface/bg_redirect.png") no-repeat 100% 100%;
}
#payment #redirect .age p {
  line-height: 1.66em;
}
#payment #redirect .age .title {
  line-height: normal;
}
#payment #method {
  background: url("../images/interface/bg_method.png") no-repeat 100% 100%;
}
#payment #method .title {
  padding-top: 20px;
}
#payment #method .sub-title {
  text-align: center;
  margin-top: 10px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
#payment #method .don_amount {
  color: #688816;
}
#payment #method .donate-debit {
  text-align: center;
  font-size: 12px;
  margin-top: 33px;
  cursor: pointer;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: bold;
  padding: 11px 25px 11px 25px;
}
#payment #method .donate-debit-cont {
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
}
#payment #method .donate-debit-cont a {
  text-decoration: none;
  color: #68605f;
  font-weight: bold;
}
#payment #method .options .prev {
  position: relative;
  left: 50px;
}
#payment #entry {
  height: 350px;
}
#payment #entry .title {
  font-size: 17px;
  margin-top: 12px;
  margin-bottom: 43px;
}
#payment #entry .spend {
  color: #688816;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0 12px;
}
#payment #entry .options {
  text-align: center;
}
#payment #entry .options .prev {
  left: 50px;
}
#payment .tree {
  background: url("../images/interface/bg_tree.png") no-repeat 50% 0%;
  height: 238px;
  margin: 35px 0 0 22px;
  text-align: center;
  position: relative;
}
#payment .tree img {
  height: 80%;
}
#payment .tree:before {
  content: '';
  position: absolute;
  left: 95px;
  bottom: 48px;
  width: 66px;
  height: 18px;
  background: url("../images/interface/bg_tree_plug.png") 50% 100% no-repeat;
}
#payment #request {
  background: url("../images/interface/bg_request.png") no-repeat -5% 40%;
}
#payment #request .title {
  padding: 40px 20px 20px;
}
#payment #receiptFirstName, #payment #receiptPlace {
  width: 172px !important;
}
#payment #step1 .inner {
  width: 460px;
}
#payment #step1 .radio {
  margin-top: 20px;
  margin-left: 207px;
}
#payment #step1 .radio label {
  display: inline-block;
  float: left;
  font-size: 14px;
  width: 20px;
  text-align: right;
  margin-top: 15px;
  font-weight: 600;
  font-family: 'Open Sans Bold',sans-serif;
  margin-right: 30px;
}
#payment #step1 .radio label:before {
  top: 1px;
  display: none;
}
#payment #step1 .radio label:hover:before {
  background: #E7E7E7;
}
#payment #step1 .radio label .checked-state {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: -1px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#payment #step1 .radio label input {
  margin: 0 6px 0 18px;
  font-size: 16px;
}
#payment #step1 .radio label input[type="radio"]:checked + .radio-sum {
  color: #688816;
}
#payment #step1 .radio label input[type="radio"]:checked + .radio-sum + .checked-state {
  background-color: #688816;
  border: 1px solid #688816;
}
#payment #step1 .radio label input:focus {
  outline: 0px none transparent;
}
#payment #step1 .radio label:nth-child(2) input {
  margin: 0 6px 0 28px;
}
#payment #step1 .other {
  clear: both;
  padding-top: 0px;
  margin-top: 7px;
  position: relative;
  text-align: center;
  float: left;
}
#payment #step1 .other:before {
  color: #b3a4a1;
  content: "EUR";
  color: #b3a4a1;
  position: absolute;
  top: 9px;
  left: 17px;
  z-index: 5;
  font-size: 16px;
  font-weight: 500;
}
#payment #step1 .other:after {
  content: "€";
  color: #b3a4a1;
  position: absolute;
  top: 9px;
  right: 15px;
  z-index: 5;
  font-size: 16px;
}
#payment #step1 .other div.error {
  position: absolute;
  top: -8px;
  right: -8px;
}
#payment #step1 .other label {
  display: none;
}
#payment #step1 .other input {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #68605f;
  background: #ffffff;
  color: #68605f;
  font-size: 14px;
  padding: 8px 10px;
  width: 148px;
  outline: 0;
  text-align: center;
  position: relative;
  font-weight: 600;
}
#payment #step1 .other input.error,
#payment #step1 .other input.error:hover,
#payment #step1 .other input.error:focus {
  border-color: #e86f56;
  color: #e86f56;
  text-transform: none;
}
#payment #step1 .other input:hover {
  border-color: #b3a4a1;
  color: #b3a4a1;
}
#payment #step1 .other input:focus {
  border-color: #b3a4a1;
  background: #f6f4f4;
  color: #68605f;
}
#payment #step1 .other .value {
  color: #68605f;
  font-family: "Rockwell W01", "Times New Roman", Helvetica, Arial, sans-serif;
  font-size: 21px;
  position: absolute;
  top: 33px;
  right: 0;
}
#payment #step1 .other .hover,
#payment #step1 .other .focus {
  color: #b3a4a1;
}
#payment #step1 .other p {
  font-size: 12px;
  margin: 8px 0 0;
}
#payment #step3 {
  height: 100%;
}
#payment #step3 .inner {
  width: 460px;
}
#payment #step4 .inner {
  width: 460px;
}
#payment #step5 {
  height: 100%;
}
#payment #step5 li {
  list-style-type: none;
}
#payment #step5 .inner {
  width: 581px;
}
#payment #step6 {
  height: 100%;
}
#payment #step6 .inner {
  width: 540px;
}
#payment .company {
  display: none;
}
#payment #overview {
  font-size: 13px;
}
#payment #overview .options {
  text-align: center;
}
#payment #overview .options .prev {
  left: 50px;
}
#payment #overview .details, #payment #overview .component .details .left, #payment .component .details #overview .left,
#payment #overview .component .details .right,
#payment .component .details #overview .right {
  border: 0 !important;
  margin-top: 30px;
}
#payment #overview .left {
  width: 280px;
  margin-right: 20px;
  border: 0 !important;
  text-align: left;
}
#payment #overview .right {
  width: 240px;
  border: 0 !important;
  text-align: left;
}
#payment #overview .ov-title {
  margin-bottom: 8px;
  display: inline-block;
}
#payment #overview .font-size-16 {
  font-size: 16px;
  margin-bottom: 30px;
}
#payment #overview ul {
  margin-bottom: 30px;
}
#payment #overview ul li {
  margin-bottom: 5px;
}
#payment #overview .change {
  text-decoration: none;
  color: #688816;
  font-size: 11px;
  margin-left: 4px;
}
#payment #overview .change:hover {
  text-decoration: underline;
}
#payment #thankyou {
  background: #FFF url("../images/interface/bg_redirect.png") no-repeat bottom right;
}
#payment #thankyou p {
  margin-bottom: 13px;
}
#payment #thankyou .title {
  margin-top: 20px;
}
#payment #thankyou .your_donationcertificate, #payment #thankyou .your_donationcertificate:link, #payment #thankyou .your_donationcertificate:visited, #payment #thankyou .show_donation a, #payment #thankyou .show_donation a:link, #payment #thankyou .show_donation a:visited {
  color: #688816;
}
#payment #thankyou .show_donation, #payment #thankyou .certificate_mail {
  font-weight: 200;
  font-size: 10px;
}
#payment #thankyou .sub-title {
  font-size: 14px;
  margin-top: 20px;
  text-align: center;
}
#payment #thankyou .options {
  text-align: center;
}
#payment #thankyou .options #see-tree {
  background: #688816;
  padding: 11px 25px;
}
#payment #thankyou .error, #payment #thankyou .cancel {
  display: none;
}
#payment #end {
  margin-top: -25px;
}
#payment #end .title {
  padding: 0 20px;
  padding-left: 0px;
  padding-right: 0px;
}
#payment #end .controls {
  padding: 0;
  position: relative;
  left: auto;
  bottom: auto;
  text-align: center;
}
#payment .treeinfo {
  width: 180px;
  font-size: 12px;
  font-weight: bold;
  margin: 0 0 0 75px;
}
#payment #sharing {
  height: 94px;
  position: relative;
  margin-top: 10px;
  text-align: center;
}
#payment #sharing button {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background: url("../images/interface/bg_social_tree_share.png") no-repeat;
  border: 0 none;
  min-width: 94px;
  width: 94px;
  height: 94px;
  overflow: hidden;
  text-indent: -999px;
  position: relative;
}
#payment #sharing .fb-deepLink {
  background-position: 0 0;
}
#payment #sharing .fb-deepLink:hover {
  background-position: -94px 0;
}
#payment #sharing .tw-deepLink {
  background-position: 0 -94px;
}
#payment #sharing .tw-deepLink:hover {
  background-position: -94px -94px;
}
#payment #sharing .em-deepLink {
  background-position: 0 -188px;
  top: -10px;
  left: -13px;
}
#payment #sharing .em-deepLink:hover {
  background-position: -94px -188px;
}
#payment .norton {
  text-align: center;
}
#payment .norton a {
  background: url("../images/interface/norton-secured.png") no-repeat;
  display: inline-block;
  width: 100px;
  height: 59px;
  overflow: hidden;
  text-indent: -999px;
}
#payment .title {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  text-align: center;
  line-height: 1.3em;
}
#payment .pay-now {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 20px;
  margin: 50px 0 16px;
  font-weight: normal;
  padding: 0 26px;
  text-align: left;
  line-height: 1.4em;
}
#payment #redirect {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9) url("../images/preload/payment-loader.gif") center center no-repeat;
  position: absolute;
  top: 10px;
  left: 0;
  text-align: center;
  padding-top: 80px;
}

/* corporate popup screen */
#corporate {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: white;
  margin: 0 auto;
  width: 770px;
  min-height: 384px;
  overflow: none;
  position: relative;
  top: 90px;
  padding: 0;
}
#corporate .close {
  background: transparent url("../images/interface/bg_close.png") no-repeat;
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  text-indent: -999px;
  z-index: 100;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 7px;
  right: 8px;
}
#corporate .component {
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #68605f;
  min-height: 384px;
  position: relative;
}
#corporate .component .left {
  float: left;
  width: 512px;
  min-height: 384px;
  position: relative;
}
#corporate .component .left #slides {
  pointer-events: none;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 0;
  margin: 0;
  height: 384px;
  width: 512px;
  overflow: hidden;
  position: relative;
}
#corporate .component .left #slides ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 384px;
  overflow: hidden;
}
#corporate .component .left #slides ul li {
  width: 512px;
  list-style: none;
  float: left;
  position: relative;
  display: block;
}
#corporate .component .left ul.mininav {
  pointer-events: none;
  width: 100%;
  bottom: 7px;
  height: 10px;
  display: block;
  position: absolute;
  text-align: center;
  padding: 0;
}
#corporate .component .left ul.mininav li {
  width: 11px;
  height: 11px;
  margin: 0 1px;
  position: relative;
  display: inline-block;
  background: url("../images/corporate/slider_btn.png");
}
#corporate .component .left ul.mininav li.active,
#corporate .component .left ul.mininav li:hover {
  background: url("../images/corporate/slider_btn.png");
  background-position: 0 13px;
}
#corporate .component .right {
  pointer-events: none;
  float: right;
  width: 257px;
  min-height: 384px;
}
#corporate .component .right h1 {
  font-family: "Rockwell W01", "Times New Roman", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: normal;
  margin: 0 10px 10px;
  text-align: left;
  line-height: 1.3em;
  padding: 0 3px 0 16px;
}
#corporate .component .right p {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.7em;
  padding: 0 25px;
}
#corporate .component .right p a {
  pointer-events: auto;
  color: #688816;
  font-weight: bold;
  display: block;
  text-decoration: none;
}
#corporate .component .img {
  background: url("../images/corporate/corporate_sign.png");
  height: 114px;
  width: 223px;
}
#corporate .component .img .logo {
  height: 35px;
  width: 60px;
  top: 29px;
  left: 96px;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
}
#corporate .component .arrow {
  position: absolute;
  top: 170px;
  background: url("../images/corporate/arrow.png");
}
#corporate .component .arrow button {
  background: url("../images/corporate/arrow.png");
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  overflow: hidden;
  display: inline-block;
  text-indent: -999px;
  position: absolute;
  width: 45px;
  min-width: 45px;
  height: 45px;
  margin: 0px;
}
#corporate .component .arrow #prev-pic {
  float: left;
  left: -24px;
  position: absolute;
}
#corporate .component .arrow #next-pic {
  float: right;
  position: absolute;
  left: 487px;
  background-position: 50px 0;
}
#corporate #sharing {
  position: absolute;
  bottom: 35px;
}
#corporate #sharing button {
  pointer-events: auto;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background: url("../images/corporate/social_share.png") no-repeat;
  border: 0 none;
  width: 30px;
  min-width: 30px;
  height: 30px;
  overflow: hidden;
  outline: 0 none;
  text-indent: -999px;
  position: absolute;
  margin: 0px;
}
#corporate #sharing .fb-deepLink {
  background-position: 0 0;
  left: 154px;
  top: -8px;
}
#corporate #sharing .fb-deepLink:hover {
  background-position: 0 -30px;
}
#corporate #sharing .tw-deepLink {
  background-position: -30px 0;
  left: 184px;
  top: -8px;
}
#corporate #sharing .tw-deepLink:hover {
  background-position: -30px -30px;
}
#corporate #sharing .em-deepLink {
  background-position: -60px 0;
  left: 214px;
  top: -8px;
}
#corporate #sharing .em-deepLink:hover {
  background-position: -60px -30px;
}

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

.transall {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}

/*.blur {
  @include blur (2px);
}*/
/* animate in stuff */
.fadeIn {
  -webkit-animation: fadeIn 1s both;
  -moz-animation: fadeIn 1s both;
  -ms-animation: fadeIn 1s both;
  animation: fadeIn 1s both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeInUp {
  -webkit-animation: fadeInUp 1s both;
  -moz-animation: fadeInUp 1s both;
  -ms-animation: fadeInUp 1s both;
  animation: fadeInUp 1s both;
}

@-webkit-keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}
@-moz-keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}
@-o-keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}
.fadeOut {
  -webkit-animation: fadeOut 1s both;
  -moz-animation: fadeOut 1s both;
  -ms-animation: fadeOut 1s both;
  animation: fadeOut 1s both;
  opacity: 1;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOutDown {
  -webkit-animation: fadeOutDown 1s both;
  -moz-animation: fadeOutDown 1s both;
  -ms-animation: fadeOutDown 1s both;
  animation: fadeOutDown 1s both;
  opacity: 1;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* interface transitions */
#viewfinder .indicar {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
}

.shift {
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -ms-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
}

.hot-spots .close:hover,
#payment .close:hover,
#corporate .close:hover,
#buttons #share:hover,
#buttons #overview:hover,
#corporate .component .arrow #next-pic:hover,
#corporate .component .arrow #prev-pic:hover {
  -webkit-animation: btnpulseBig 0.5s ease-out;
  -moz-animation: btnpulseBig 0.5s ease-out;
  -ms-animation: btnpulseBig 0.5s ease-out;
  animation: btnpulseBig 0.5s ease-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

@-webkit-keyframes btnpulseBig {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes btnpulseBig {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes btnpulseBig {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes btnpulseBig {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.component .green:hover,
.component .next:hover,
.component .white:hover,
.component .prev:hover {
  -webkit-animation: btnpulseSmall 0.8s ease-out;
  -moz-animation: btnpulseSmall 0.8s ease-out;
  -ms-animation: btnpulseSmall 0.8s ease-out;
  animation: btnpulseSmall 0.8s ease-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

@-webkit-keyframes btnpulseSmall {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes btnpulseSmall {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes btnpulseSmall {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes btnpulseSmall {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
/*
#select #tree-select .trees:hover img,
#select #replace-select .trees:hover img,
#direction #left:hover,
#direction #right:hover {
  @include animation (btnpulseB 0.8s ease-out);
  @include transform(scale(1));
}
@include keyframes (btnpulseB) {
  0% {
 	@include transform(scale(1));
  }
  30% {
 	@include transform(scale(1.2));
 }
  100% {
  @include transform(scale(1));
  }
}*/
/*#select #toggle .inactive {
  @include animation (pulsing 1.5s infinite);
  @include transform(translateY(0px));
}
@include keyframes (pulsing) {
  0%, 20%, 50%, 80%, 100% {
  @include transform(translateY(0px));
  }
  40% {
	@include transform(translateY(-3px));
  }
  60% {
  @include transform(translateY(-2px));
  }
}*/
#right.pulse {
  -webkit-animation: pulseright 1.5s infinite 1.5s;
  -moz-animation: pulseright 1.5s infinite 1.5s;
  -ms-animation: pulseright 1.5s infinite 1.5s;
  animation: pulseright 1.5s infinite 1.5s;
}

@-webkit-keyframes pulseright {
  0%, 20%, 50%, 80% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  60% {
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
@-moz-keyframes pulseright {
  0%, 20%, 50%, 80% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  60% {
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
@-o-keyframes pulseright {
  0%, 20%, 50%, 80% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  60% {
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
@keyframes pulseright {
  0%, 20%, 50%, 80% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  60% {
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
#left.pulse {
  -webkit-animation: pulseleft 1.5s infinite 1.5s;
  -moz-animation: pulseleft 1.5s infinite 1.5s;
  -ms-animation: pulseleft 1.5s infinite 1.5s;
  animation: pulseleft 1.5s infinite 1.5s;
}

@-webkit-keyframes pulseleft {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    transform: translateX(6px);
  }
  60% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
@-moz-keyframes pulseleft {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    transform: translateX(6px);
  }
  60% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
@-o-keyframes pulseleft {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    transform: translateX(6px);
  }
  60% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
@keyframes pulseleft {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
  40% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    transform: translateX(6px);
  }
  60% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
  }
}
.rotate360 {
  -webkit-transform: all 1s ease;
  -moz-transform: all 1s ease;
  -ms-transform: all 1s ease;
  transform: all 1s ease;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.raise50 {
  -webkit-animation: raise50 0.5s ease-out;
  -moz-animation: raise50 0.5s ease-out;
  -ms-animation: raise50 0.5s ease-out;
  animation: raise50 0.5s ease-out;
  -webkit-transform: translate(0, -50px);
  -moz-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

@-webkit-keyframes raise50 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0px, -50px);
    -moz-transform: translate(0px, -50px);
    -ms-transform: translate(0px, -50px);
    transform: translate(0px, -50px);
  }
}
@-moz-keyframes raise50 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0px, -50px);
    -moz-transform: translate(0px, -50px);
    -ms-transform: translate(0px, -50px);
    transform: translate(0px, -50px);
  }
}
@-o-keyframes raise50 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0px, -50px);
    -moz-transform: translate(0px, -50px);
    -ms-transform: translate(0px, -50px);
    transform: translate(0px, -50px);
  }
}
@keyframes raise50 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0px, -50px);
    -moz-transform: translate(0px, -50px);
    -ms-transform: translate(0px, -50px);
    transform: translate(0px, -50px);
  }
}
.lower50 {
  -webkit-animation: lower50 0.5s ease-out;
  -moz-animation: lower50 0.5s ease-out;
  -ms-animation: lower50 0.5s ease-out;
  animation: lower50 0.5s ease-out;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

@-webkit-keyframes lower50 {
  0% {
    -webkit-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-moz-keyframes lower50 {
  0% {
    -webkit-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-o-keyframes lower50 {
  0% {
    -webkit-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@keyframes lower50 {
  0% {
    -webkit-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
/**
 * Big wheel spinner thing
 */
.slideUp {
  -webkit-animation: slideUp 0.5s linear;
  -moz-animation: slideUp 0.5s linear;
  -ms-animation: slideUp 0.5s linear;
  animation: slideUp 0.5s linear;
  -webkit-transform: translate(0, -23px);
  -moz-transform: translate(0, -23px);
  -ms-transform: translate(0, -23px);
  transform: translate(0, -23px);
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  100% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
}
@-moz-keyframes slideUp {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  100% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
}
@-o-keyframes slideUp {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  100% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  100% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
}
.slideDown {
  -webkit-animation: slideDown 0.5s linear;
  -moz-animation: slideDown 0.5s linear;
  -ms-animation: slideDown 0.5s linear;
  animation: slideDown 0.5s linear;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes slideDown {
  0% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes slideDown {
  0% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes slideDown {
  0% {
    -webkit-transform: translate(0, -23px);
    -moz-transform: translate(0, -23px);
    -ms-transform: translate(0, -23px);
    transform: translate(0, -23px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.rotateRight90 {
  -webkit-animation: rotateRight90 0.5s ease-in-out;
  -moz-animation: rotateRight90 0.5s ease-in-out;
  -ms-animation: rotateRight90 0.5s ease-in-out;
  animation: rotateRight90 0.5s ease-in-out;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

@-webkit-keyframes rotateRight90 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(97deg);
    -moz-transform: rotate(97deg);
    -ms-transform: rotate(97deg);
    transform: rotate(97deg);
  }
  60% {
    -webkit-transform: rotate(87deg);
    -moz-transform: rotate(87deg);
    -ms-transform: rotate(87deg);
    transform: rotate(87deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-moz-keyframes rotateRight90 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(97deg);
    -moz-transform: rotate(97deg);
    -ms-transform: rotate(97deg);
    transform: rotate(97deg);
  }
  60% {
    -webkit-transform: rotate(87deg);
    -moz-transform: rotate(87deg);
    -ms-transform: rotate(87deg);
    transform: rotate(87deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-o-keyframes rotateRight90 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(97deg);
    -moz-transform: rotate(97deg);
    -ms-transform: rotate(97deg);
    transform: rotate(97deg);
  }
  60% {
    -webkit-transform: rotate(87deg);
    -moz-transform: rotate(87deg);
    -ms-transform: rotate(87deg);
    transform: rotate(87deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes rotateRight90 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(97deg);
    -moz-transform: rotate(97deg);
    -ms-transform: rotate(97deg);
    transform: rotate(97deg);
  }
  60% {
    -webkit-transform: rotate(87deg);
    -moz-transform: rotate(87deg);
    -ms-transform: rotate(87deg);
    transform: rotate(87deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
.rotateLeft90 {
  -webkit-animation: rotateLeft90 0.5s ease-in-out;
  -moz-animation: rotateLeft90 0.5s ease-in-out;
  -ms-animation: rotateLeft90 0.5s ease-in-out;
  animation: rotateLeft90 0.5s ease-in-out;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

@-webkit-keyframes rotateLeft90 {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  60% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes rotateLeft90 {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  60% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes rotateLeft90 {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  60% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotateLeft90 {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  60% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
#rotateRight270 {
  -webkit-animation: rotateRight270 0.75s linear;
  -moz-animation: rotateRight270 0.75s linear;
  -ms-animation: rotateRight270 0.75s linear;
  animation: rotateRight270 0.75s linear;
  -webkit-transform: rotate(270deg) translate(0, 0);
  -moz-transform: rotate(270deg) translate(0, 0);
  -ms-transform: rotate(270deg) translate(0, 0);
  transform: rotate(270deg) translate(0, 0);
}

@-webkit-keyframes rotateRight270 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-moz-keyframes rotateRight270 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-o-keyframes rotateRight270 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@keyframes rotateRight270 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
#control {
  -webkit-transform: translate(-241px, 189px);
  -moz-transform: translate(-241px, 189px);
  -ms-transform: translate(-241px, 189px);
  transform: translate(-241px, 189px);
}

#control.expanded {
  -webkit-animation: expandControl 0.3s ease-out;
  -moz-animation: expandControl 0.3s ease-out;
  -ms-animation: expandControl 0.3s ease-out;
  animation: expandControl 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

@-webkit-keyframes expandControl {
  0% {
    -webkit-transform: translate(-241px, 189px);
    -moz-transform: translate(-241px, 189px);
    -ms-transform: translate(-241px, 189px);
    transform: translate(-241px, 189px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandControl {
  0% {
    -webkit-transform: translate(-241px, 189px);
    -moz-transform: translate(-241px, 189px);
    -ms-transform: translate(-241px, 189px);
    transform: translate(-241px, 189px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes expandControl {
  0% {
    -webkit-transform: translate(-241px, 189px);
    -moz-transform: translate(-241px, 189px);
    -ms-transform: translate(-241px, 189px);
    transform: translate(-241px, 189px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes expandControl {
  0% {
    -webkit-transform: translate(-241px, 189px);
    -moz-transform: translate(-241px, 189px);
    -ms-transform: translate(-241px, 189px);
    transform: translate(-241px, 189px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
#control.contracted {
  -webkit-animation: contractControl 0.3s ease-in;
  -moz-animation: contractControl 0.3s ease-in;
  -ms-animation: contractControl 0.3s ease-in;
  animation: contractControl 0.3s ease-in;
  -webkit-transform: translate(-241px, 267px);
  -moz-transform: translate(-241px, 267px);
  -ms-transform: translate(-241px, 267px);
  transform: translate(-241px, 267px);
}

@-webkit-keyframes contractControl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-241px, 267px);
    -moz-transform: translate(-241px, 267px);
    -ms-transform: translate(-241px, 267px);
    transform: translate(-241px, 267px);
  }
}
@-moz-keyframes contractControl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-241px, 267px);
    -moz-transform: translate(-241px, 267px);
    -ms-transform: translate(-241px, 267px);
    transform: translate(-241px, 267px);
  }
}
@-o-keyframes contractControl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-241px, 267px);
    -moz-transform: translate(-241px, 267px);
    -ms-transform: translate(-241px, 267px);
    transform: translate(-241px, 267px);
  }
}
@keyframes contractControl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-241px, 267px);
    -moz-transform: translate(-241px, 267px);
    -ms-transform: translate(-241px, 267px);
    transform: translate(-241px, 267px);
  }
}
#tree-select,
#tree-select.reset {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

#tree-select.rotateRight270Tree {
  -webkit-animation: rotateRight270Tree 0.8s ease-in both;
  -moz-animation: rotateRight270Tree 0.8s ease-in both;
  -ms-animation: rotateRight270Tree 0.8s ease-in both;
  animation: rotateRight270Tree 0.8s ease-in both;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

@-webkit-keyframes rotateRight270Tree {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-moz-keyframes rotateRight270Tree {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-o-keyframes rotateRight270Tree {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@keyframes rotateRight270Tree {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
#tree-select.rotateRight0Tree {
  -webkit-animation: rotateRight0Tree 0.8s ease-in both;
  -moz-animation: rotateRight0Tree 0.8s ease-in both;
  -ms-animation: rotateRight0Tree 0.8s ease-in both;
  animation: rotateRight0Tree 0.8s ease-in both;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

@-webkit-keyframes rotateRight0Tree {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes rotateRight0Tree {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes rotateRight0Tree {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotateRight0Tree {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
#replace-select,
#replace-select.reset {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#replace-select.rotateRight0Replace {
  -webkit-animation: rotateRight0Replace 0.8s ease-in both;
  -moz-animation: rotateRight0Replace 0.8s ease-in both;
  -ms-animation: rotateRight0Replace 0.8s ease-in both;
  animation: rotateRight0Replace 0.8s ease-in both;
  -webkit-transform: rotate(0deg) translate(0, 0);
  -moz-transform: rotate(0deg) translate(0, 0);
  -ms-transform: rotate(0deg) translate(0, 0);
  transform: rotate(0deg) translate(0, 0);
}

@-webkit-keyframes rotateRight0Replace {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes rotateRight0Replace {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes rotateRight0Replace {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotateRight0Replace {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  50%, 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
#replace-select.rotateRight270Replace {
  -webkit-animation: rotateRight270Replace 0.8s ease-in both;
  -moz-animation: rotateRight270Replace 0.8s ease-in both;
  -ms-animation: rotateRight270Replace 0.8s ease-in both;
  animation: rotateRight270Replace 0.8s ease-in both;
  -webkit-transform: rotate(270deg) translate(0, 0);
  -moz-transform: rotate(270deg) translate(0, 0);
  -ms-transform: rotate(270deg) translate(0, 0);
  transform: rotate(270deg) translate(0, 0);
}

@-webkit-keyframes rotateRight270Replace {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-moz-keyframes rotateRight270Replace {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-o-keyframes rotateRight270Replace {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@keyframes rotateRight270Replace {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50%, 100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
/* trees expand and contract menu */
/*.trees:first-child {
  @include transform(translate(214px, 278px));
}

.contracted .trees:first-child {
  @include animation(contractTree1 0.3s ease-in);
  @include transform(translate(214px, 278px));
}
@include keyframes (contractTree1) {
  0% {
  @include transform(translate(0, 0));
  }
  100% {
  @include transform(translate(241px, 267px));
  }
}

.expanded .trees:first-child {
  @include animation(expandTree1 0.3s ease-out);
  @include transform(translate(0, 0));
}
@include keyframes (expandTree1) {
  0% {
  @include transform(translate(214px, 278px));
  }
  100% {
  @include transform(translate(0, 0));
  }
}

.trees:nth-child(2) {
  @include transform(translate(144px, 322px));
}

.contracted .trees:nth-child(2) {
  @include animation(contractTree2 0.3s ease-in);
  @include transform(translate(144px, 322px));
}
@include keyframes (contractTree2) {
  0% {
  @include transform(translate(0, 0));
  }
  100% {
  @include transform(translate(144px, 322px));
  }
}

.expanded .trees:nth-child(2) {
  @include animation(expandTree2 0.3s ease-out);
  @include transform(translate(0, 0));
}
@include keyframes (expandTree2) {
  0% {
  @include transform(translate(144px, 322px));
  }
  100% {
  @include transform(translate(0, 0));
  }
}

.trees:nth-child(3) {
  @include transform(translate(66px, 347px));
}

.contracted .trees:nth-child(3) {
  @include animation(contractTree3 0.3s ease-in);
  @include transform(translate(66px, 347px));
}
@include keyframes (contractTree3) {
  0% {
  @include transform(translate(0, 0));
  }
  100% {
  @include transform(translate(66px, 347px));
  }
}

.expanded .trees:nth-child(3) {
  @include animation(expandTree3 0.3s ease-out);
  @include transform(translate(0, 0));
}
@include keyframes (expandTree3) {
  0% {
  @include transform(translate(66px, 347px));
  }
  100% {
  @include transform(translate(0, 0));
  }
}

.trees:nth-child(4) {
  @include transform (translate(-18px, 354px));
}

.contracted .trees:nth-child(4) {
  @include animation(contractTree4 0.3s ease-in);
  @include transform(translate(-18px, 354px));
}
@include keyframes (contractTree4) {
  0% {
  @include transform(translate(0, 0));
  }
  100% {
  @include transform(translate(-18px, 354px));
  }
}

.expanded .trees:nth-child(4) {
  @include animation(expandTree4 0.3s ease-out);
  @include transform(translate(0, 0));
}
 @include keyframes (expandTree4) {
  0% {
  @include transform(translate(-18px, 354px));
  }
  100% {
  @include transform(translate(0, 0));
  }
}

.trees:nth-child(5) {
  @include transform(translate(-100px, 338px));
}

.contracted .trees:nth-child(5) {
  @include animation(contractTree5 0.3s ease-in);
  @include transform(translate(-100px, 338px));
}
@include keyframes (contractTree5) {
  0% {
  @include transform(translate(0, 0));
  }
  100% {
  @include transform(translate(-100px, 338px));
  }
}

.expanded .trees:nth-child(5) {
  @include animation(expandTree5 0.3s ease-out);
  @include transform(translate(0, 0));
}
@include keyframes (expandTree5) {
  0% {
  @include transform(translate(-100px, 338px));
  }
  100% {
  @include transform(translate(0, 0));
  }
}

.trees:nth-child(6) {
  @include transform(translate(-178px, 303px));
}

.contracted .trees:nth-child(6) {
  @include animation(contractTree6 0.3s ease-in);
  @include transform(translate(-178px, 303px));
}
@include keyframes (contractTree6) {
  0% {
  @include transform(translate(0, 0));
  }
  100% {
  @include transform(translate(-178px, 303px));
  }
}

.expanded .trees:nth-child(6) {
  @include animation(expandTree5 0.3s ease-out);
  @include transform(translate(0, 0));
}
@include keyframes (expandTree6) {
  0% {
  @include transform(translate(-178px, 303px));
  }
  100% {
  @include transform(translate(0, 0));
  }
}*/
.lower280 {
  -webkit-animation: lower280 1s linear;
  -moz-animation: lower280 1s linear;
  -ms-animation: lower280 1s linear;
  animation: lower280 1s linear;
  -webkit-transform: translate(0, 280px);
  -moz-transform: translate(0, 280px);
  -ms-transform: translate(0, 280px);
  transform: translate(0, 280px);
}

@-webkit-keyframes lower280 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
}
@-moz-keyframes lower280 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
}
@-o-keyframes lower280 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
}
@keyframes lower280 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
}
.raise280 {
  -webkit-animation: raise280 1s linear;
  -moz-animation: raise280 1s linear;
  -ms-animation: raise280 1s linear;
  animation: raise280 1s linear;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

@-webkit-keyframes raise280 {
  0% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes raise280 {
  0% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes raise280 {
  0% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes raise280 {
  0% {
    -webkit-transform: translate(0, 280px);
    -moz-transform: translate(0, 280px);
    -ms-transform: translate(0, 280px);
    transform: translate(0, 280px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.navFadeOut {
  -webkit-animation: navFadeOut 0.5s ease-out both;
  -moz-animation: navFadeOut 0.5s ease-out both;
  -ms-animation: navFadeOut 0.5s ease-out both;
  animation: navFadeOut 0.5s ease-out both;
  opacity: 0;
}

@-webkit-keyframes navFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@-moz-keyframes navFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@-o-keyframes navFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@keyframes navFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
.navFadeIn {
  -webkit-animation: navFadeIn 0.5s ease-in both;
  -moz-animation: navFadeIn 0.5s ease-in both;
  -ms-animation: navFadeIn 0.5s ease-in both;
  animation: navFadeIn 0.5s ease-in both;
  opacity: 1;
}

@-webkit-keyframes navFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@-moz-keyframes navFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@-o-keyframes navFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@keyframes navFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
.treeFadeOut {
  -webkit-animation: treeFadeOut 0.5s ease-out both;
  -moz-animation: treeFadeOut 0.5s ease-out both;
  -ms-animation: treeFadeOut 0.5s ease-out both;
  animation: treeFadeOut 0.5s ease-out both;
  opacity: 0;
}

@-webkit-keyframes treeFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@-moz-keyframes treeFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@-o-keyframes treeFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@keyframes treeFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
.treeFadeIn {
  -webkit-animation: treeFadeIn 0.5s ease-in both;
  -moz-animation: treeFadeIn 0.5s ease-in both;
  -ms-animation: treeFadeIn 0.5s ease-in both;
  animation: treeFadeIn 0.5s ease-in both;
  opacity: 1;
}

@-webkit-keyframes treeFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@-moz-keyframes treeFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@-o-keyframes treeFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@keyframes treeFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
.cFadeOut {
  -webkit-animation: cFadeOut 0.5s ease-out both;
  -moz-animation: cFadeOut 0.5s ease-out both;
  -ms-animation: cFadeOut 0.5s ease-out both;
  animation: cFadeOut 0.5s ease-out both;
  opacity: 0;
}

@-webkit-keyframes cFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@-moz-keyframes cFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@-o-keyframes cFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@keyframes cFadeOut {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
.cFadeIn {
  -webkit-animation: cFadeIn 0.2s ease-in both;
  -moz-animation: cFadeIn 0.2s ease-in both;
  -ms-animation: cFadeIn 0.2s ease-in both;
  animation: cFadeIn 0.2s ease-in both;
  opacity: 1;
}

@-webkit-keyframes cFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@-moz-keyframes cFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@-o-keyframes cFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@keyframes cFadeIn {
  0% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
#social {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 5001;
  font-weight: bold;
  display: none;
  opacity: 0;
  background-color: rgba(1, 1, 1, 0.5);
  /*pointer-events: none;*/
}
#social .visible {
  display: block;
  opacity: 1;
}
#social .info-box {
  opacity: 0;
  color: #7a7a7a;
  width: 207px;
  min-height: 242px;
  position: absolute;
  background: #FFF url("../images/interface/bg_redirect.png") no-repeat bottom right;
  border-radius: 4px;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  -moz-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  -ms-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  -o-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8));
}
#social .info-box .header {
  min-height: 159px;
  padding: 0 15px 0 15px;
}
#social .info-box .header .detail {
  padding: 15px 0;
}
#social .info-box .footer {
  height: 92px;
  padding: 0 0 0 0;
}
#social .info-box .footer .detail {
  padding: 0 13px 14px;
}
#social .info-box .footer .sharing p {
  pointer-events: none;
  display: block;
  font-size: 12px;
  line-height: 1.2em;
}
#social .info-box .footer .sharing button.share {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background: url("../images/interface/bg_share_icons.png") no-repeat;
  border: 0 none;
  min-width: 75px;
  width: 75px;
  height: 75px;
  overflow: hidden;
  text-indent: -999px;
  position: absolute;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  outline: none;
}
#social .info-box .footer .fb-share {
  background-position: 0 0;
  left: 5px;
}
#social .info-box .footer .fb-share:hover {
  background-position: -75px 0 !important;
}
#social .info-box .footer .tw-share {
  background-position: 0 -75px !important;
  left: 67px;
}
#social .info-box .footer .tw-share:hover {
  background-position: -75px -75px !important;
}
#social .info-box .footer .em-share {
  background-position: 0 -150px !important;
  left: 134px;
}
#social .info-box .footer .em-share:hover {
  background-position: -75px -150px !important;
}
#social .info-box.pos-left:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -19px;
  width: 20px;
  height: 35px;
  background: url("../images/interface/info_panel_arrow.png");
  margin: -18px 0 0 0;
}
#social .info-box.pos-right:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -19px;
  width: 20px;
  height: 35px;
  background: url("../images/interface/info_panel_arrow.png");
  margin: -18px 0 0 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#social .info {
  pointer-events: none;
}
#social .info span {
  display: block;
  font-size: 12px;
  line-height: 1.1em;
}
#social .info .title {
  font-size: 24px;
  line-height: 1.1em;
}
#social .info .description {
  padding-top: 8px;
}
#social .planted {
  pointer-events: none;
}
#social .planted span {
  display: block;
  font-size: 12px;
  line-height: 1.1em;
}
#social .planted .name {
  font-family: "Rockwell W01", "Times New Roman", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.1em;
  margin: 5px 0;
}
#social .designed {
  pointer-events: none;
}
#social .designed span {
  display: block;
  font-size: 12px;
  line-height: 1.2em;
  padding: 20px 0 3px;
}
#social .designed .name {
  padding-top: 0;
}
#social .info-close {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: #68605f url("../images/interface/info_close.png") -2px -1px no-repeat;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
}
#social .info-close:hover {
  background: #C2C2C2 url("../images/interface/info_close.png") -2px -1px no-repeat;
}
#social .hot-spots {
  min-height: 50px;
}
#social .hot-spots .header {
  min-height: 50px;
}
#social .hot-spots .footer {
  height: 5px;
}
#social .hot-spots .arrow {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 20px;
  height: 40px;
}
#social .hot-spots #close {
  background: #68605f url("../images/interface/bg_close.png") no-repeat;
  background-size: 16px;
  border: 0 none;
  cursor: pointer;
  outline: 0 none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  text-indent: -999px;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 10px;
}
#social .hot-spots.pos-right .header {
  background: url("../images/interface/bg_hot_spots_right_up.png");
}
#social .hot-spots.pos-right #close {
  right: 10px;
}
#social .hot-spots.pos-right .arrow {
  left: -2px;
  background: url("../images/interface/bg_hot_spots_right_arrow.png");
}
#social .hot-spots.pos-left .header {
  background: url("../images/interface/bg_hot_spots_left_up.png");
}
#social .hot-spots.pos-left #close {
  right: 26px;
}
#social .hot-spots.pos-left .arrow {
  right: 0px;
  background: url("../images/interface/bg_hot_spots_left_arrow.png") no-repeat;
}

.de #select #wheel {
  background-image: url("../images/interface/_de/bg_wheel.png");
}
.de #treeworld_teaser {
  background: transparent url("../images/interface/_de/teaser_donate.png") no-repeat top left;
}
.de #payment #steps li strong {
  margin-top: 17px;
}
.de #payment #steps li:first-child strong {
  margin-top: 17px;
}
.de #payment #steps li:nth-child(2) strong {
  margin-top: 17px;
}
.de #payment #steps li:nth-child(3) strong {
  margin-top: 12px;
}
.de #payment #steps li:nth-child(4) strong {
  margin-top: 17px;
}
.de #payment #steps li:nth-child(5) strong {
  margin-top: 12px;
}

.en #select #wheel {
  background-image: url("../images/interface/_en/bg_wheel.png");
}
.en #treeworld_teaser {
  background: transparent url("../images/interface/_en/teaser_donate.png") no-repeat top left;
}
.en #payment #steps li strong {
  margin-top: 17px;
}
.en #payment #steps li:first-child strong {
  margin-top: 17px;
}
.en #payment #steps li:nth-child(2) strong {
  margin-top: 12px;
}
.en #payment #steps li:nth-child(3) strong {
  margin-top: 12px;
}
.en #payment #steps li:nth-child(4) strong {
  margin-top: 17px;
}
.en #payment #steps li:nth-child(5) strong {
  margin-top: 12px;
}

.es #select #wheel {
  background-image: url("../images/interface/_es/bg_wheel.png");
}
.es #treeworld_teaser {
  background: transparent url("../images/interface/_es/teaser_donate.png") no-repeat top left;
}

@media all and (min-width: 768px) and (max-width: 1024px) {
  #header,
  #pftp,
  .fixed {
    margin: 0 auto;
    position: relative;
    width: 1024px;
  }

  #header {
    overflow: hidden;
  }

  .interface {
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
  }
}
.flydown {
  -webkit-animation: flydown 1.2s ease-out;
  -moz-animation: flydown 1.2s ease-out;
  -ms-animation: flydown 1.2s ease-out;
  animation: flydown 1.2s ease-out;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
.flydown .sprite {
  background: url("../images/sprites/birdie.png") 0 0 no-repeat;
  -webkit-animation: flying 1.2s steps(10) 1;
  -moz-animation: flying 1.2s steps(10) 1;
  -ms-animation: flying 1.2s steps(10) 1;
  animation: flying 1.2s steps(10) 1;
}

@-webkit-keyframes flydown {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes flydown {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes flydown {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes flydown {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.flyup {
  -webkit-animation: flyup 1.2s ease-out;
  -moz-animation: flyup 1.2s ease-out;
  -ms-animation: flyup 1.2s ease-out;
  animation: flyup 1.2s ease-out;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
.flyup .sprite {
  background: url("../images/sprites/birdie.png") 0 0 no-repeat;
  -webkit-animation: flying 1.2s steps(10) 1;
  -moz-animation: flying 1.2s steps(10) 1;
  -ms-animation: flying 1.2s steps(10) 1;
  animation: flying 1.2s steps(10) 1;
}

@-webkit-keyframes flyup {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes flyup {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes flyup {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes flyup {
  0% {
    -webkit-transform: translate(-140px, -140px);
    -moz-transform: translate(-140px, -140px);
    -ms-transform: translate(-140px, -140px);
    transform: translate(-140px, -140px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes flying {
  0% {
    background-position: 0 0;
  }
  33.33% {
    background-position: -790px 0;
  }
  33.34% {
    background-position: 0 0;
  }
  66.66% {
    background-position: -790px 0;
  }
  66.67% {
    background-position: 0 0;
  }
  100% {
    background-position: -790px 0;
  }
}
@-moz-keyframes flying {
  0% {
    background-position: 0 0;
  }
  33.33% {
    background-position: -790px 0;
  }
  33.34% {
    background-position: 0 0;
  }
  66.66% {
    background-position: -790px 0;
  }
  66.67% {
    background-position: 0 0;
  }
  100% {
    background-position: -790px 0;
  }
}
@-o-keyframes flying {
  0% {
    background-position: 0 0;
  }
  33.33% {
    background-position: -790px 0;
  }
  33.34% {
    background-position: 0 0;
  }
  66.66% {
    background-position: -790px 0;
  }
  66.67% {
    background-position: 0 0;
  }
  100% {
    background-position: -790px 0;
  }
}
@keyframes flying {
  0% {
    background-position: 0 0;
  }
  33.33% {
    background-position: -790px 0;
  }
  33.34% {
    background-position: 0 0;
  }
  66.66% {
    background-position: -790px 0;
  }
  66.67% {
    background-position: 0 0;
  }
  100% {
    background-position: -790px 0;
  }
}
@-webkit-keyframes flapping {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-moz-keyframes flapping {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-o-keyframes flapping {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@keyframes flapping {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
.flap1 {
  -webkit-animation: flap1 1s ease-out;
  -moz-animation: flap1 1s ease-out;
  -ms-animation: flap1 1s ease-out;
  animation: flap1 1s ease-out;
  -webkit-transform: translate(94px, 0);
  -moz-transform: translate(94px, 0);
  -ms-transform: translate(94px, 0);
  transform: translate(94px, 0);
}
.flap1 .sprite {
  background: url("../images/sprites/birdie.png") 0 -80px no-repeat;
  -webkit-animation: flapping1 1s steps(20) 1;
  -moz-animation: flapping1 1s steps(20) 1;
  -ms-animation: flapping1 1s steps(20) 1;
  animation: flapping1 1s steps(20) 1;
}

@-webkit-keyframes flap1 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-moz-keyframes flap1 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-o-keyframes flap1 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@keyframes flap1 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-webkit-keyframes flapping1 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-moz-keyframes flapping1 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-o-keyframes flapping1 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@keyframes flapping1 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
.flap2 {
  -webkit-animation: flap2 1s ease-out;
  -moz-animation: flap2 1s ease-out;
  -ms-animation: flap2 1s ease-out;
  animation: flap2 1s ease-out;
  -webkit-transform: translate(94px, 0);
  -moz-transform: translate(94px, 0);
  -ms-transform: translate(94px, 0);
  transform: translate(94px, 0);
}
.flap2 .sprite {
  background: url("../images/sprites/birdie.png") 0 -80px no-repeat;
  -webkit-animation: flapping2 1s steps(20) 1;
  -moz-animation: flapping2 1s steps(20) 1;
  -ms-animation: flapping2 1s steps(20) 1;
  animation: flapping2 1s steps(20) 1;
}

@-webkit-keyframes flap2 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-moz-keyframes flap2 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-o-keyframes flap2 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@keyframes flap2 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-webkit-keyframes flapping2 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-moz-keyframes flapping2 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-o-keyframes flapping2 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@keyframes flapping2 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
.flap3 {
  -webkit-animation: flap3 1s ease-out;
  -moz-animation: flap3 1s ease-out;
  -ms-animation: flap3 1s ease-out;
  animation: flap3 1s ease-out;
  -webkit-transform: translate(94px, 0);
  -moz-transform: translate(94px, 0);
  -ms-transform: translate(94px, 0);
  transform: translate(94px, 0);
}
.flap3 .sprite {
  background: url("../images/sprites/birdie.png") 0 -80px no-repeat;
  -webkit-animation: flapping3 1s steps(20) 1;
  -moz-animation: flapping3 1s steps(20) 1;
  -ms-animation: flapping3 1s steps(20) 1;
  animation: flapping3 1s steps(20) 1;
}

@-webkit-keyframes flap3 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-moz-keyframes flap3 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-o-keyframes flap3 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@keyframes flap3 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-webkit-keyframes flapping3 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-moz-keyframes flapping3 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-o-keyframes flapping3 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@keyframes flapping3 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
.flap4 {
  -webkit-animation: flap4 1s ease-out;
  -moz-animation: flap4 1s ease-out;
  -ms-animation: flap4 1s ease-out;
  animation: flap4 1s ease-out;
  -webkit-transform: translate(94px, 0);
  -moz-transform: translate(94px, 0);
  -ms-transform: translate(94px, 0);
  transform: translate(94px, 0);
}
.flap4 .sprite {
  background: url("../images/sprites/birdie.png") 0 -80px no-repeat;
  -webkit-animation: flapping4 1s steps(20) 1;
  -moz-animation: flapping4 1s steps(20) 1;
  -ms-animation: flapping4 1s steps(20) 1;
  animation: flapping4 1s steps(20) 1;
}

@-webkit-keyframes flap4 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-moz-keyframes flap4 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-o-keyframes flap4 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@keyframes flap4 {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(94px, 0);
    -moz-transform: translate(94px, 0);
    -ms-transform: translate(94px, 0);
    transform: translate(94px, 0);
  }
}
@-webkit-keyframes flapping4 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-moz-keyframes flapping4 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@-o-keyframes flapping4 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
@keyframes flapping4 {
  0% {
    background-position: 0 -80px;
  }
  100% {
    background-position: -1580px -80px;
  }
}
.flyup {
  -webkit-animation: flyup 1.2s ease-in;
  -moz-animation: flyup 1.2s ease-in;
  -ms-animation: flyup 1.2s ease-in;
  animation: flyup 1.2s ease-in;
  -webkit-transform: translate(140px, -140px);
  -moz-transform: translate(140px, -140px);
  -ms-transform: translate(140px, -140px);
  transform: translate(140px, -140px);
}
.flyup .sprite {
  background: url("../images/sprites/birdie.png") 0 0 no-repeat;
  -webkit-animation: flying 1.2s steps(10) 1;
  -moz-animation: flying 1.2s steps(10) 1;
  -ms-animation: flying 1.2s steps(10) 1;
  animation: flying 1.2s steps(10) 1;
}

@-webkit-keyframes flyup {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(140px, -140px);
    -moz-transform: translate(140px, -140px);
    -ms-transform: translate(140px, -140px);
    transform: translate(140px, -140px);
  }
}
@-moz-keyframes flyup {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(140px, -140px);
    -moz-transform: translate(140px, -140px);
    -ms-transform: translate(140px, -140px);
    transform: translate(140px, -140px);
  }
}
@-o-keyframes flyup {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(140px, -140px);
    -moz-transform: translate(140px, -140px);
    -ms-transform: translate(140px, -140px);
    transform: translate(140px, -140px);
  }
}
@keyframes flyup {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(140px, -140px);
    -moz-transform: translate(140px, -140px);
    -ms-transform: translate(140px, -140px);
    transform: translate(140px, -140px);
  }
}
#introContainer {
  width: 100%;
  overflow: hidden;
  height: 570px;
}

#intro {
  background-color: #c1dff4;
  position: relative;
  /*width: 1280px;*/
  width: 2048px;
  height: 620px;
  overflow: hidden;
  margin-top: -50px;
  background: #2a5b85;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhNWI4NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iIzZkYWFjNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2UzZjFmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(top, #2a5b85 0%, #6daac5 12%, #e3f1f7 51%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a5b85), color-stop(12%, #6daac5), color-stop(51%, #e3f1f7));
  background: -webkit-linear-gradient(top, #2a5b85 0%, #6daac5 12%, #e3f1f7 51%);
  background: -o-linear-gradient(top, #2a5b85 0%, #6daac5 12%, #e3f1f7 51%);
  background: -ms-linear-gradient(top, #2a5b85 0%, #6daac5 12%, #e3f1f7 51%);
  background: linear-gradient(to bottom, #2a5b85 0%, #6daac5 12%, #e3f1f7 51%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5b85', endColorstr='#e3f1f7',GradientType=0 );
}
#intro * {
  -webkit-transform: translateZ(0);
  -o-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
}
#intro #drag-component {
  z-index: -10;
}
#intro #landscapeLayer {
  pointer-events: none;
}
#intro #btnSkipIntro {
  position: absolute;
  z-index: 10000;
  bottom: 15px;
  cursor: pointer;
}
#intro #btnMuteIntro {
  position: absolute;
  z-index: 10000;
  bottom: 17px;
  cursor: pointer;
  background: url("../images/intro/btn_mute.png") 0 0 no-repeat;
  width: 64px;
  height: 64px;
}
#intro #kineticStage {
  position: absolute;
  top: 100px;
  left: 400px;
}
#intro .introSprites {
  position: absolute;
}
#intro .introLayer {
  position: absolute;
}
#intro #treeList {
  position: absolute;
  top: 110px;
  left: 980px;
}
#intro .treeIcon {
  top: 10px;
  position: absolute;
  left: 10px;
}
#intro .treeMenuBg:nth-child(4) .treeIcon {
  top: 10px;
  left: 18px;
}
#intro .treeMenuBg:nth-child(5) .treeIcon {
  top: -10px;
  left: 12px;
}
#intro .treeMenuBg:nth-child(6) .treeIcon {
  left: 14px;
}
#intro #control {
  left: 257px;
  top: 0px;
}
#intro #select .mask {
  overflow: visible !important;
}
#intro .losGehts {
  cursor: pointer;
}
#intro .treeSpotActive {
  width: 100px;
  height: 11px;
  background: url(../images/intro/treespot_state2.png) no-repeat 0 0;
}

body.de .introSprites {
  background-image: url(../../../assets/images/intro/sprites_de.png);
  background-repeat: no-repeat;
}

body.en .introSprites {
  background-image: url(../../../assets/images/intro/sprites_en.png);
  background-repeat: no-repeat;
}

.balloon {
  width: 81px;
  height: 99px;
  background-position: 0 0;
}

.co2_01 {
  width: 44px;
  height: 47px;
  background-position: -1963px -34px;
}

.co2_02 {
  width: 33px;
  height: 33px;
  background-position: -1963px 0;
}

.cursor {
  width: 53px;
  height: 64px;
  background-position: -1551px 0;
}

.cursor_drag {
  width: 50px;
  height: 44px;
  background-position: -733px -181px;
}

.cursor_drop {
  width: 50px;
  height: 57px;
  background-position: -1963px -188px;
}

.drop {
  width: 100px;
  height: 11px;
  background-position: -1020px 0;
}

.drop_active {
  width: 90px;
  height: 24px;
  background-position: -158px -107px;
}

.felix {
  width: 156px;
  height: 172px;
  background-position: -116px -191px;
}

.felix_zwinker_01 {
  width: 60px;
  height: 18px;
  background-position: -1997px 0;
}

.felix_zwinker_02 {
  width: 60px;
  height: 18px;
  background-position: -158px -132px;
}

.felix_zwinker_03 {
  width: 60px;
  height: 18px;
  background-position: -1578px -257px;
}

.menu_tree_01 {
  width: 49px;
  height: 48px;
  background-position: -1963px -82px;
}

.menu_tree_02 {
  width: 37px;
  height: 49px;
  background-position: -1894px -341px;
}

.menu_tree_03 {
  width: 42px;
  height: 56px;
  background-position: -1963px -131px;
}

.menu_tree_04 {
  width: 34px;
  height: 51px;
  background-position: -249px -107px;
}

.menu_tree_05 {
  width: 42px;
  height: 70px;
  background-position: -1551px -65px;
}

.menu_tree_06 {
  width: 49px;
  height: 54px;
  background-position: -1020px -12px;
}

.menu_tree_circle {
  width: 73px;
  height: 73px;
  background-position: -1970px -246px;
}

.mountains {
  width: 2048px;
  height: 535px;
  background-position: 0 -846px;
}

.panel_01 {
  width: 2048px;
  height: 450px;
  background-position: 0 -395px;
}

.panel_02 {
  width: 2048px;
  height: 540px;
  background-position: 0 -1382px;
}

.parachute {
  width: 403px;
  height: 303px;
  background-position: -2049px -287px;
}

.parachute_02 {
  width: 403px;
  height: 303px;
  background-position: -2049px -729px;
}

.parachute_03 {
  width: 403px;
  height: 303px;
  background-position: -2049px -1171px;
}

.parachute_04 {
  width: 403px;
  height: 303px;
  background-position: -2049px -1613px;
}

.plug_dragging {
  width: 70px;
  height: 45px;
  background-position: -1070px -12px;
}

.sprechblase_01 {
  width: 387px;
  height: 137px;
  background-position: -2049px -1033px;
}

.sprechblase_02 {
  width: 393px;
  height: 137px;
  background-position: -2049px -591px;
}

.sprechblase_03 {
  width: 341px;
  height: 137px;
  background-position: -1236px -257px;
}

.sprechblase_04 {
  width: 375px;
  height: 137px;
  background-position: -2049px -1475px;
}

.sprechblase_05 {
  width: 502px;
  height: 137px;
  background-position: -733px -257px;
}

.sprechblase_06 {
  width: 409px;
  height: 137px;
  background-position: -1141px 0;
}

.sprechblase_07 {
  width: 386px;
  height: 106px;
  background-position: -82px 0;
}

.tree_01 {
  width: 113px;
  height: 180px;
  background-position: -733px 0;
}

.tree_02 {
  width: 83px;
  height: 185px;
  background-position: -2345px 0;
}

.tree_03 {
  width: 115px;
  height: 184px;
  background-position: 0 -191px;
}

.tree_04 {
  width: 172px;
  height: 239px;
  background-position: -847px 0;
}

.truck {
  width: 75px;
  height: 80px;
  background-position: -1894px -260px;
}

.wolke_grafisch {
  width: 269px;
  height: 107px;
  background-position: -2058px 0;
}

.wolke_grafisch_02 {
  width: 315px;
  height: 112px;
  background-position: -1578px -276px;
}

.wolke_illustration {
  width: 619px;
  height: 118px;
  background-position: -1020px -138px;
}

.wolke_illustration_2 {
  width: 157px;
  height: 83px;
  background-position: 0 -107px;
}

.wolke_stick {
  width: 300px;
  height: 178px;
  background-position: -2044px -108px;
}

.wolke_stick_02 {
  width: 190px;
  height: 126px;
  background-position: -469px 0;
}

.wolke_watte {
  width: 322px;
  height: 259px;
  background-position: -1640px 0;
}

.wolke_watte_02 {
  width: 448px;
  height: 260px;
  background-position: -284px -127px;
}

.zeppelin {
  width: 105px;
  height: 60px;
  background-position: -1020px -67px;
}

body.de .parachuteSprite, body.en .parachuteSprite, body .parachuteSprite {
  background: url(../../../assets/images/intro/_sprites/parachuteSprite.png) no-repeat;
  width: 403px;
  height: 303px;
  background-position: 0px 0px;
}
body.de .felixSprite, body.en .felixSprite, body .felixSprite {
  background: url(../../../assets/images/intro/_sprites/felix_landing_sprite_02.png) no-repeat;
  width: 155px;
  height: 172px;
  background-position: 0px 0px;
}
body.de .squirrelSprite, body.en .squirrelSprite, body .squirrelSprite {
  background: url(../../../assets/images/intro/_sprites/eich_sprite.png) no-repeat;
  width: 349px;
  height: 200px;
  background-position: 0px 0px;
}
body.de .squirrelSpriteIdle, body.en .squirrelSpriteIdle, body .squirrelSpriteIdle {
  background: url(../../../assets/images/intro/_sprites/eich_sprite_idle.png) no-repeat;
  width: 349px;
  height: 200px;
  background-position: 0px 0px;
}
body.de .rocketSprite, body.en .rocketSprite, body .rocketSprite {
  background: url(../../../assets/images/intro/_sprites/rocket_sprite.png) no-repeat;
  width: 75px;
  height: 175px;
  background-position: 0px 0px;
}
body.de .felixBlink, body.en .felixBlink, body .felixBlink {
  background: url(../../../assets/images/intro/_sprites/felix_zwinker.png) no-repeat;
  width: 60px;
  height: 18px;
  background-position: 0px 0px;
}
body.de .bird3Sprite, body.en .bird3Sprite, body .bird3Sprite {
  background: url(../../../assets/images/intro/_sprites/bird3_sprite.png) no-repeat;
  width: 75px;
  height: 80px;
  background-position: 0px 0px;
}
body.de .planeSprite, body.en .planeSprite, body .planeSprite {
  background: url(../../../assets/images/intro/_sprites/plane_sprite.png) no-repeat;
  width: 185px;
  height: 63px;
  background-position: 0px 0px;
}
body.de .bird2Sprite, body.en .bird2Sprite, body .bird2Sprite {
  background: url(../../../assets/images/intro/_sprites/bird2_sprite.png) no-repeat;
  width: 60px;
  height: 60px;
  background-position: 0px 0px;
}
body.de .windmillSprite, body.en .windmillSprite, body .windmillSprite {
  background: url(../../../assets/images/sprites/windmill.png) no-repeat;
  width: 120px;
  height: 120px;
  background-position: 0px 0px;
}
body.de .bird1Sprite, body.en .bird1Sprite, body .bird1Sprite {
  background: url(../../../assets/images/intro/_sprites/bird1_sprite.png) no-repeat;
  width: 100px;
  height: 60px;
  background-position: 0px 0px;
}
body.de .mountainsClean, body.en .mountainsClean, body .mountainsClean {
  background: url(../../../assets/images/intro/_src/felder/mountains_without_snow.png) no-repeat;
  width: 1378px;
  height: 535px;
  background-position: 0px 0px;
}