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

body, html {
  font-size: 100%;
  padding: 0;
  margin: 0; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

html {
  background: #f2f2f2; }

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 200;
  color: #FFF; }

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

a:hover {
  color: #000; }

li {
  list-style: none; }

.aboutContainer {
  background: #fff;
  color: #2b2b2b;
  position: relative; }
  .aboutContainer .who-what-why {
    background: #211d42;
    padding: 2em; }
    .aboutContainer .who-what-why .who-what-why-content {
      width: 33.3%;
      padding: 0 1em;
      float: left; }
      .aboutContainer .who-what-why .who-what-why-content h2 {
        color: #3aa3a7;
        font-size: 1.8em;
        font-weight: 200;
        padding: 0;
        margin-bottom: .25em; }
      .aboutContainer .who-what-why .who-what-why-content p {
        width: 80%;
        color: #fff;
        font-size: 1em;
        font-weight: 300;
        line-height: 30px; }
  .aboutContainer .team-wrapper {
    padding: 2em; }
  .aboutContainer .team-member {
    width: 25%;
    height: auto;
    color: #2b2b2b;
    float: left;
    margin: 0;
    padding: 1em; }
    .aboutContainer .team-member:last-of-type {
      margin-right: 0; }
  .aboutContainer .team-member-img {
    background: red;
    background-size: cover;
    width: 100%;
    height: 400px; }
    .aboutContainer .team-member-img.kawise {
      background: url(../images/Team/KawiseMack.jpg) center center no-repeat;
      background-size: cover; }
    .aboutContainer .team-member-img.sean {
      background: url(../images/Team/SeanMcAdams.jpg) center center no-repeat;
      background-size: cover; }
    .aboutContainer .team-member-img.romaine {
      background: url(../images/Team/RomaineSimon.jpg) center center no-repeat;
      background-size: cover; }
    .aboutContainer .team-member-img.cristina {
      background: url(../images/Team/cris-headshot.jpg) center center no-repeat;
      background-size: cover; }
  .aboutContainer .team-member-name {
    font-weight: 700;
    font-size: 1.25em;
    margin: 1em 0; }
  .aboutContainer .team-member-bio {
    font-size: 1em;
    line-height: 2;
    margin: 0;
    padding: 0; }
  .aboutContainer .our-approach {
    width: 100%;
    background: #211d42;
    padding: 2em; }
    .aboutContainer .our-approach h2 {
      color: #3aa3a7;
      font-size: 1.8em;
      font-weight: 200;
      padding: 0;
      margin-bottom: .25em;
      text-align: center; }
    .aboutContainer .our-approach p {
      width: 50%;
      color: #fff;
      font-size: 1em;
      font-weight: 300;
      line-height: 30px;
      text-align: center;
      margin: 0 auto; }

@media screen and (max-width: 55em) {
  .aboutContainer .wrapper {
    padding: .5em; }
  .aboutContainer .who-what-why {
    background: #211d42;
    padding: 1em; }
    .aboutContainer .who-what-why .who-what-why-content {
      width: 100%;
      margin-bottom: 2em; }
      .aboutContainer .who-what-why .who-what-why-content h2 {
        margin-bottom: .25em; }
      .aboutContainer .who-what-why .who-what-why-content p {
        width: 100%;
        padding: 0;
        margin-top: 1em; }
  .aboutContainer .team-member {
    width: 33.3%;
    margin: 0;
    padding: 2.5%; }
  .aboutContainer .team-member-img {
    height: 250px; }
  .aboutContainer .team-member-name {
    margin: .5em 0; }
  .aboutContainer .team-member-bio {
    font-size: 16px;
    line-height: 1.7; }
  .aboutContainer .our-approach {
    padding: 2em; }
    .aboutContainer .our-approach h2 {
      text-align: left;
      margin-top: 0; }
    .aboutContainer .our-approach p {
      width: 100%;
      text-align: left;
      padding: 1em 0 0; } }

@media screen and (max-width: 32.25em) {
  .aboutContainer .team-wrapper {
    padding: 1em; }
  .aboutContainer .team-member {
    width: 50%;
    margin: 0;
    padding: 2.5% 2.5% 0; }
  .aboutContainer .team-member-img {
    height: 250px; } }

@media screen and (max-width: 24em) {
  .aboutContainer .team-member {
    width: 100%;
    margin: 0;
    padding: 5% 5% 0; }
  .aboutContainer .team-member-img {
    height: 300px; } }

.form-container {
  background: #fff;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05);
  padding: 1em;
  position: relative; }

.form {
  color: #a8aac5;
  width: 80%;
  margin: 2em auto; }

.form-item {
  width: 49%;
  float: left;
  margin: 0 .5%; }
  .form-item.textarea {
    width: 99%; }

.form-lable {
  display: block;
  font-size: 0.85rem;
  font-weight: bold; }

.form-input, textarea {
  width: 100%;
  height: 3rem;
  color: #2b2b2b;
  font-weight: bold;
  border: 1px solid #ccc;
  padding: 1.6rem 1rem;
  margin: 1rem 0 1.5rem; }
  .form-input:focus, textarea:focus {
    border: 1px solid #000;
    box-shadow: none;
    outline: none; }

textarea {
  padding: 1rem;
  min-height: 200px; }

@media screen and (max-width: 55em) {
  .wrapper {
    padding: 1.5em; }
  .form {
    width: 100%;
    margin: 0 auto; }
  .form-item {
    width: 48%;
    margin: 0 1%; } }

@media screen and (max-width: 32.25em) {
  .form-item {
    width: 100%;
    margin: 0; } }

.contentWrapper {
  background: transparent;
  width: 100%;
  padding: 0 1.875em;
  margin: -139px auto 0; }

.contentWrapper p {
  margin: 0;
  padding: 1em 0;
  font-size: 1.8em;
  line-height: 1.5; }

@media screen and (max-width: 55em) {
  .contentWrapper {
    padding: 0 1em; }
    .contentWrapper p {
      padding: 2em 5%;
      font-size: 1.4em; } }

@media screen and (max-width: 32.25em) {
  .contentWrapper {
    padding: 3.6rem 0 0; } }

.cta {
  background: red;
  width: 100%;
  height: 550px;
  margin-bottom: 1.5em;
  position: relative; }
  .cta:last-of-type {
    margin-bottom: 0; }
  .cta .title, .cta .content {
    width: 100%;
    text-align: center;
    margin: 0 auto; }
  .cta .title {
    color: #fff;
    font-size: 2.125em;
    line-height: 1.3;
    font-weight: 300; }
  .cta .content {
    font-size: 1.125em;
    line-height: 2;
    width: 50%; }
  .cta .content-mobile {
    width: 100%;
    background: #3ba3a8;
    display: none;
    line-height: 2;
    padding: 2.5em 1.5em; }
    .cta .content-mobile h1, .cta .content-mobile h2 {
      line-height: 1.25;
      text-transform: uppercase; }
    .cta .content-mobile h1 {
      font-size: 24px;
      margin: 0 0 .25em; }
    .cta .content-mobile h2 {
      font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 300;
      margin: 0 0 1em; }
    .cta .content-mobile p {
      font-size: 1em;
      line-height: 2;
      padding: 0;
      margin: 0; }
    .cta .content-mobile .btn {
      background: transparent;
      border: 1px solid #fff;
      color: #fff; }
      .cta .content-mobile .btn:hover {
        background: #fff;
        color: #000; }
  .cta.home, .cta.projects, .cta.services, .cta.about, .cta.contact {
    background: transparent;
    position: relative;
    display: table;
    margin-bottom: 0; }
    .cta.home .left-area, .cta.projects .left-area, .cta.services .left-area, .cta.about .left-area, .cta.contact .left-area {
      background: #3ba3a8;
      display: table-cell;
      width: 20%;
      height: 550px; }
    .cta.home .cta-img, .cta.projects .cta-img, .cta.services .cta-img, .cta.about .cta-img, .cta.contact .cta-img {
      background: url("../images/cta/home-img.jpg") center center no-repeat;
      background-size: cover;
      display: table-cell;
      width: 80%;
      height: 100%; }
    .cta.home .content, .cta.projects .content, .cta.services .content, .cta.about .content, .cta.contact .content {
      width: 50%;
      text-align: left;
      position: absolute;
      top: 150px;
      left: 30px;
      z-index: 800; }
      .cta.home .content h1, .cta.home .content h2, .cta.projects .content h1, .cta.projects .content h2, .cta.services .content h1, .cta.services .content h2, .cta.about .content h1, .cta.about .content h2, .cta.contact .content h1, .cta.contact .content h2 {
        font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 300;
        font-size: 45px;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        line-height: normal; }
      .cta.home .content h1, .cta.projects .content h1, .cta.services .content h1, .cta.about .content h1, .cta.contact .content h1 {
        color: #000; }
      .cta.home .content h2, .cta.projects .content h2, .cta.services .content h2, .cta.about .content h2, .cta.contact .content h2 {
        color: #fff; }
      .cta.home .content .btn, .cta.projects .content .btn, .cta.services .content .btn, .cta.about .content .btn, .cta.contact .content .btn {
        background: transparent;
        border: 1px solid #fff;
        color: #fff;
        margin: 2em auto 0; }
        .cta.home .content .btn:hover, .cta.projects .content .btn:hover, .cta.services .content .btn:hover, .cta.about .content .btn:hover, .cta.contact .content .btn:hover {
          background: #fff;
          color: #000; }
  .cta.projects .content, .cta.services .content, .cta.about .content, .cta.contact .content {
    top: 170px; }
    .cta.projects .content p, .cta.services .content p, .cta.about .content p, .cta.contact .content p {
      width: 72%;
      color: #fff;
      font-size: 1.125em;
      line-height: 2;
      padding-top: .5em; }
  .cta.services .cta-img {
    background: url("../images/cta/services-img.jpg") center center no-repeat;
    background-size: cover;
    display: table-cell;
    width: 80%;
    height: 550px; }
  .cta.about .cta-img {
    background: url("../images/cta/about-img.jpg") center center no-repeat;
    background-size: cover;
    display: table-cell;
    width: 80%;
    height: 550px; }
  .cta.contact .cta-img {
    background: url("../images/cta/contact-img.jpg") center center no-repeat;
    background-size: cover;
    display: table-cell;
    width: 80%;
    height: 550px; }
  .cta.sencondary {
    background: #211d42;
    height: auto;
    padding: 2em 0; }
    .cta.sencondary .title {
      font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 1.8em;
      text-transform: uppercase; }
    .cta.sencondary .actions {
      text-align: center; }
      .cta.sencondary .actions .btn {
        background: transparent;
        border: 1px solid #fff;
        color: #fff;
        margin: 1.25em auto 0; }
        .cta.sencondary .actions .btn:hover {
          background: #fff;
          color: #000; }
  .cta.tertiary {
    background: transparent;
    height: auto; }
    .cta.tertiary .wrapper {
      padding: 0; }
    .cta.tertiary .recent-projects {
      padding: 0;
      margin: 0;
      list-style: none;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      justify-content: space-around; }
      .cta.tertiary .recent-projects .projects {
        color: #2b2b2b;
        width: 32%;
        height: auto;
        margin-right: 1em; }
        .cta.tertiary .recent-projects .projects:last-of-type {
          margin-right: 0; }
        .cta.tertiary .recent-projects .projects .project-img {
          background: #000;
          width: 100%;
          height: 300px; }
          .cta.tertiary .recent-projects .projects .project-img.one {
            background: url("../images/projects/project-1.jpg") center center no-repeat;
            background-size: cover; }
          .cta.tertiary .recent-projects .projects .project-img.two {
            background: url("../images/projects/project-2.jpg") center center no-repeat;
            background-size: cover; }
          .cta.tertiary .recent-projects .projects .project-img.three {
            background: url("../images/projects/project-1.jpg") center center no-repeat;
            background-size: cover; }
        .cta.tertiary .recent-projects .projects .project-title, .cta.tertiary .recent-projects .projects .project-service {
          padding: 0;
          margin: 0; }
        .cta.tertiary .recent-projects .projects .project-title {
          font-weight: 700;
          font-size: 1.25em;
          margin-top: .5em; }
        .cta.tertiary .recent-projects .projects .project-service {
          font-size: 1em; }

@media all and (max-width: 55em) {
  .cta.home, .cta.projects, .cta.services, .cta.about, .cta.contact {
    height: auto;
    margin-bottom: 1em; }
    .cta.home .left-area, .cta.projects .left-area, .cta.services .left-area, .cta.about .left-area, .cta.contact .left-area {
      display: none; }
    .cta.home .cta-img, .cta.projects .cta-img, .cta.services .cta-img, .cta.about .cta-img, .cta.contact .cta-img {
      width: 100%;
      height: 400px; }
    .cta.home .content, .cta.projects .content, .cta.services .content, .cta.about .content, .cta.contact .content {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      width: 80%;
      top: 103px;
      left: 30px;
      padding: 1em; }
      .cta.home .content h1, .cta.home .content h2, .cta.projects .content h1, .cta.projects .content h2, .cta.services .content h1, .cta.services .content h2, .cta.about .content h1, .cta.about .content h2, .cta.contact .content h1, .cta.contact .content h2 {
        font-size: 30px; }
      .cta.home .content h1, .cta.projects .content h1, .cta.services .content h1, .cta.about .content h1, .cta.contact .content h1 {
        color: #3ba3a8; }
      .cta.home .content p, .cta.projects .content p, .cta.services .content p, .cta.about .content p, .cta.contact .content p {
        line-height: 1.5;
        padding: 0;
        margin-top: .5em; }
  .cta.sencondary {
    padding: 1.5em 2.5em;
    margin-bottom: 1em; }
    .cta.sencondary .content {
      width: 100%;
      padding: 1em 0; }
  .cta.tertiary .recent-projects .projects {
    margin-right: 0; }
    .cta.tertiary .recent-projects .projects .project-img {
      height: 200px; }
    .cta.tertiary .recent-projects .projects .project-title {
      font-size: 1.15em; } }

@media all and (max-width: 32.25em) {
  .cta.home, .cta.projects, .cta.services, .cta.about, .cta.contact {
    min-height: 400px;
    margin-bottom: 0;
    display: block; }
    .cta.home .left-area, .cta.projects .left-area, .cta.services .left-area, .cta.about .left-area, .cta.contact .left-area {
      display: none; }
    .cta.home .cta-img, .cta.projects .cta-img, .cta.services .cta-img, .cta.about .cta-img, .cta.contact .cta-img {
      height: 300px;
      display: block;
      position: relative;
      background-position: -440px center; }
    .cta.home .content, .cta.projects .content, .cta.services .content, .cta.about .content, .cta.contact .content {
      display: none; }
    .cta.home .content-mobile, .cta.projects .content-mobile, .cta.services .content-mobile, .cta.about .content-mobile, .cta.contact .content-mobile {
      display: block; }
  .cta.home .content {
    top: 40px; }
  .cta.sencondary {
    padding: 1.5em;
    margin-bottom: 1em; }
    .cta.sencondary .wrapper {
      padding: 1.5em; }
    .cta.sencondary .title, .cta.sencondary .content, .cta.sencondary .actions {
      text-align: left; }
    .cta.sencondary .title {
      font-size: 24px; }
    .cta.sencondary .content {
      width: 100%;
      font-size: 16px;
      padding: 1em 0; }
  .cta.tertiary {
    padding: 0 1rem 0; }
    .cta.tertiary .recent-projects .projects {
      width: 100%;
      margin: 0 0 1em 0; }
      .cta.tertiary .recent-projects .projects .project-img {
        height: 200px; }
      .cta.tertiary .recent-projects .projects .project-title {
        font-size: 1.15em; } }

@media all and (max-width: 24em) {
  .cta.home, .cta.projects, .cta.services, .cta.about, .cta.contact {
    min-height: 400px;
    margin-bottom: 0;
    display: block; }
    .cta.home .content, .cta.projects .content, .cta.services .content, .cta.about .content, .cta.contact .content {
      display: none; }
    .cta.home .content-mobile, .cta.projects .content-mobile, .cta.services .content-mobile, .cta.about .content-mobile, .cta.contact .content-mobile {
      display: block; }
    .cta.home .cta-img, .cta.projects .cta-img, .cta.services .cta-img, .cta.about .cta-img, .cta.contact .cta-img {
      height: 300px;
      display: block;
      position: relative; }
  .cta.sencondary {
    padding: 1.5em; }
    .cta.sencondary .title {
      font-size: 24px; }
    .cta.sencondary .content {
      font-size: 16px; } }

.page {
  position: relative;
  margin-top: 15em; }

.page > header, section > div {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 2.875em 1.875em 1.875em; }

.page > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0 0 0.6em 0;
  float: left;
  font-weight: 400; }

.page > header > span {
  display: block;
  position: relative;
  z-index: 9999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em; }

.page > header > span span:after {
  width: 30px;
  height: 30px;
  left: -12px;
  font-size: 50%;
  top: -8px;
  font-size: 75%;
  position: relative; }

.page > header > span span:hover:before {
  content: attr(data-content);
  text-transform: none;
  text-indent: 0;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 110%;
  padding: 0.8em 1em;
  line-height: 1.2;
  text-align: left;
  left: auto;
  margin-left: 4px;
  position: absolute;
  color: #fff;
  background: #47a3da; }

.page > header nav {
  float: right;
  text-align: center; }

.page > header nav a {
  display: inline-block;
  position: relative;
  text-align: left;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  margin: 0 0.1em;
  border: 4px solid #47a3da; }

.page > header nav a > span {
  display: none; }

.page > header nav a:hover:before {
  content: attr(data-info);
  color: #47a3da;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  pointer-events: none; }

.page > header nav a:hover {
  background: #47a3da; }

.bp-icon:after {
  font-family: 'bpicons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  color: #47a3da;
  -webkit-font-smoothing: antialiased; }

.page > header nav .bp-icon:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 2;
  text-indent: 0; }

.page > header nav a:hover:after {
  color: #fff; }

.bp-icon-next:after {
  content: "\e000"; }

.bp-icon-drop:after {
  content: "\e001"; }

.bp-icon-archive:after {
  content: "\e002"; }

.bp-icon-about:after {
  content: "\e003"; }

.bp-icon-prev:after {
  content: "\e004"; }

@media screen and (max-width: 55em) {
  .page {
    margin-top: 8.71em; }
  .page > header h1,
  .page > header nav {
    float: none; }
  .page > header > span,
  .page > header h1 {
    text-align: center; }
  .page > header nav {
    margin: 0 auto; }
  .page > header > span {
    text-indent: 30px; } }

.project-list {
  padding: 15rem 4rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 5vw));
  grid-column-gap: 10vw;
  grid-row-gap: 25vh;
  max-width: 1300px; }
  .project-list .project-item {
    height: 45vh;
    position: relative;
    text-decoration: none;
    color: var(--color-link);
    outline: none; }
    .project-list .project-item:last-of-type {
      margin-right: 0; }
    .project-list .project-item .project-img-wrapper {
      overflow: hidden; }
      .project-list .project-item .project-img-wrapper .project-img {
        background: url("../images/projects/project-1.jpg");
        width: 100%;
        height: 100%;
        background-size: cover;
        transform: matrix(1.2, 0, 0, 1.2, 0, 0); }
        .project-list .project-item .project-img-wrapper .project-img.one {
          background: url("../images/projects/project-1.jpg") center center no-repeat;
          background-size: 100%; }
        .project-list .project-item .project-img-wrapper .project-img.two {
          background: url("../images/projects/project-2.jpg") center center no-repeat;
          background-size: 100%; }
        .project-list .project-item .project-img-wrapper .project-img.three {
          background: url("../images/projects/project-1.jpg") center center no-repeat;
          background-size: 100%; }
        .project-list .project-item .project-img-wrapper .project-img.project-img-scaled {
          transform: scale3d(1.2, 1.2, 1); }
    .project-list .project-item .project-title, .project-list .project-item .project-service {
      padding: 0;
      margin: 0; }
    .project-list .project-item .project-title {
      font-weight: 700;
      font-size: 1.25em;
      margin-top: .5em; }
    .project-list .project-item .project-service {
      font-size: 1em; }

.servicesContainer {
  background: #fff;
  color: #2b2b2b;
  padding: 2rem;
  position: relative; }
  .servicesContainer .services {
    border-bottom: 1px solid #ccc;
    padding-bottom: 1em;
    margin-bottom: 1em; }
    .servicesContainer .services:last-of-type {
      border-bottom: none; }
  .servicesContainer .service-title, .servicesContainer .service-content {
    float: left; }
  .servicesContainer .service-title {
    width: 40%; }
    .servicesContainer .service-title h1 {
      font-weight: 300;
      font-size: 1.25em;
      margin-top: 1em; }
  .servicesContainer .service-content {
    width: 60%; }
    .servicesContainer .service-content .service-description {
      font-size: 1em; }
    .servicesContainer .service-content .service-list {
      font-size: .95em;
      margin-left: 0;
      padding-left: 1em; }
      .servicesContainer .service-content .service-list li {
        width: 33.33%;
        list-style-type: circle;
        float: left;
        margin-bottom: 1em; }

@media screen and (max-width: 55em) {
  .servicesContainer .services {
    margin-bottom: 1.5em; }
  .servicesContainer .service-title, .servicesContainer .service-content {
    float: none; }
  .servicesContainer .service-title {
    width: 100%; }
    .servicesContainer .service-title h1 {
      margin-top: 0; }
  .servicesContainer .service-content {
    width: 100%; }
    .servicesContainer .service-content .service-description {
      font-size: 1em;
      padding: 1.5em 0; }
    .servicesContainer .service-content .service-list {
      padding-left: 1em; }
      .servicesContainer .service-content .service-list li {
        width: 33.33%;
        list-style-type: circle;
        float: left;
        margin-bottom: 1em; } }

@media screen and (max-width: 32.25em) {
  .servicesContainer .wrapper {
    padding: 1.5em; }
  .servicesContainer .service-content {
    width: 100%; }
    .servicesContainer .service-content .service-description {
      font-size: 1em;
      padding: 1.5em 0; }
    .servicesContainer .service-content .service-list {
      padding-left: 1em;
      margin-top: .5em; }
      .servicesContainer .service-content .service-list li {
        width: 50%;
        border-bottom: 1px solid #f5f5f5;
        list-style-type: circle;
        float: left;
        margin-bottom: 1em;
        padding-bottom: 1em; }
        .servicesContainer .service-content .service-list li:last-of-type {
          border-bottom: 0;
          padding-bottom: 0;
          margin-bottom: 0; } }

@media screen and (max-width: 24em) {
  .servicesContainer .service-content .service-list li {
    width: 100%; } }

.wrapper {
  max-width: 2560px;
  margin: 0 auto;
  padding: 0 0 1em; }

/* Example Media Queries */
@media screen and (max-width: 55em) {
  .wrapper {
    width: 100%;
    padding: 0; } }

.btn {
  border: none;
  border-radius: 4px;
  color: #000;
  position: relative;
  height: 36px;
  margin: 0;
  min-width: 64px;
  padding: 0 16px;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  will-change: box-shadow;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle; }
  .btn:focus {
    outline: 0; }

.btn-submit {
  color: #fff;
  background: #3ba3a8; }
  .btn-submit:hover {
    background: #2d7c7c; }

.header {
  background-color: rgba(242, 242, 242, 0.99);
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s; }
  .header .wrapper {
    padding: 0 1.875em; }

.header h1,
.header nav {
  display: inline-block;
  position: relative; }

.header h1,
.header nav a {
  line-height: 100px; }

.header h1 {
  text-transform: uppercase;
  color: #333;
  letter-spacing: 4px;
  font-size: 1.25em;
  margin: 0;
  float: left; }
  .header h1 .studios {
    color: #333; }

.header nav {
  float: right; }

.header nav a {
  color: #2b2b2b;
  font-weight: 500;
  margin: 0 0 0 20px;
  font-size: 1em; }

.header nav a:hover {
  color: #3ba3a8; }

.header nav a.active {
  color: #3ba3a8; }

/* Transitions and class for reduced height */
.header h1,
.header nav a {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.header.header-shrink {
  height: 70px; }

.header.header-shrink h1,
.header.header-shrink nav a {
  line-height: 70px; }

.header.header-shrink h1 {
  font-size: 1em; }

.mobileNav {
  display: none;
  background-color: rgba(242, 242, 242, 0.99);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  z-index: 10001; }
  .mobileNav .logo {
    text-transform: uppercase;
    color: #333;
    font-size: 1.25em;
    font-weight: bold;
    letter-spacing: 1px;
    float: left;
    padding: 10px 20px;
    margin: .4em 0 0; }
  .mobileNav ul {
    margin: 0;
    padding: 0 20px;
    list-style: none;
    overflow: hidden;
    background-color: rgba(242, 242, 242, 0.99); }
  .mobileNav li {
    padding: 20px 0;
    border-bottom: 1px solid #ccc; }
    .mobileNav li:last-of-type {
      border-bottom: 0; }
    .mobileNav li a {
      color: #2b2b2b;
      font-weight: 500;
      font-size: 1em;
      display: block;
      border-right: 1px solid #f4f4f4;
      text-decoration: none; }
      .mobileNav li a:hover {
        color: #3ba3a8; }
  .mobileNav .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out; }

/* Mobile Nav Menu Icon */
.menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none; }
  .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px; }
    .menu-icon .navicon:before, .menu-icon .navicon:after {
      background: #333;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%; }
    .menu-icon .navicon:before {
      top: 5px; }
    .menu-icon .navicon:after {
      top: -5px; }

/* menu btn */
.menu-btn {
  display: none; }
  .menu-btn:checked ~ .menu {
    max-height: 480px; }
  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent; }
    .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg); }
    .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg); }

.mobileNav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.mobileNav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0; }

@media screen and (max-width: 55em) {
  .header {
    display: none; }
  .mobileNav {
    display: block; } }

.page-footer {
  background: #1b1b1c;
  color: #fff;
  margin-top: 2em; }
  .page-footer .wrapper {
    padding: 0 1.875em; }

.copyright, .footer-links-container, .privacyPolicy {
  float: left; }

.copyright {
  width: 20%;
  opacity: .2;
  font-size: 1rem;
  font-weight: 500; }

.footer-links-container {
  width: 60%; }
  .footer-links-container .footer-links {
    width: 50%;
    margin: 1em auto;
    display: block; }
  .footer-links-container .links {
    width: 20%;
    float: left; }
    .footer-links-container .links a {
      font-size: 1em; }
      .footer-links-container .links a:hover {
        cursor: pointer;
        color: #3ba3a8; }

.privacyPolicy {
  width: 20%;
  padding: 1em 0;
  text-align: right; }
  .privacyPolicy a {
    width: 100%;
    opacity: .2; }
    .privacyPolicy a:hover {
      cursor: pointer;
      color: #3ba3a8;
      opacity: .99; }

@media screen and (max-width: 1024px) {
  .page-footer .wrapper {
    padding: 1.875em; }
  .copyright {
    width: 100%;
    padding: 0;
    margin: 0 0 1em 0; }
  .footer-links-container {
    width: 100%; }
    .footer-links-container .footer-links {
      width: 100%;
      margin: 1em 0 0;
      padding-left: 0; }
    .footer-links-container .links {
      width: 18%;
      border-bottom: 1px solid #ccc;
      border-color: rgba(255, 255, 255, 0.1);
      padding-bottom: .5em;
      margin: 0 2% 1em 0; }
  .privacyPolicy {
    width: 100%;
    padding: 1em 0;
    text-align: left;
    padding: 1em 0 0; } }

@media screen and (max-width: 55em) {
  .page-footer .wrapper {
    padding: 1.875em; }
  .copyright {
    width: 100%;
    padding: 0;
    margin: 0 0 1em 0; }
  .footer-links-container {
    width: 100%; }
    .footer-links-container .footer-links {
      width: 100%;
      margin: 1em 0 0;
      padding-left: 0; }
    .footer-links-container .links {
      width: 18%;
      border-bottom: 1px solid #ccc;
      border-color: rgba(255, 255, 255, 0.1);
      padding-bottom: .5em;
      margin: 0 2% 1em 0; }
  .privacyPolicy {
    width: 100%;
    padding: 1em 0;
    text-align: left;
    padding: 1em 0 0; } }

@media screen and (max-width: 32.25em) {
  .page-footer {
    margin-top: 0; }
    .page-footer .wrapper {
      padding: 1.875em; }
  .copyright {
    width: 100%;
    padding: 0;
    margin: 0 0 1em 0; }
  .footer-links-container {
    width: 100%; }
    .footer-links-container .footer-links {
      width: 100%;
      margin: 1em 0 0;
      padding-left: 0; }
    .footer-links-container .links {
      width: 45%;
      border-bottom: 1px solid #ccc;
      border-color: rgba(255, 255, 255, 0.1);
      padding-bottom: .25em;
      margin: 0 10% 1em 0; }
      .footer-links-container .links:nth-child(even) {
        margin-right: 0; }
  .privacyPolicy {
    width: 100%;
    padding: 1em 0;
    text-align: left;
    padding: 1em 0 0; } }




/*animations*/

/******************
* Bounce in right *
*******************/


.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 
.slow{
     -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
.slower{
     -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
.slowest{
     -webkit-animation-duration: 3s; 
    animation-duration: 3s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

/* Added by Andy Meetan */
.delay-250 {
    -webkit-animation-delay:0.25s;
    -moz-animation-delay:0.25s;
    -o-animation-delay:0.25s;
    animation-delay:0.25s;
}
.delay-500 {
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
}
.delay-750 {
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
    -o-animation-delay:0.75s;
    animation-delay:0.75s;
}
.delay-1000 {
    -webkit-animation-delay:1.0s;
    -moz-animation-delay:1.0s;
    -o-animation-delay:1.0s;
    animation-delay:1.0s;
}
.delay-1250 {
    -webkit-animation-delay:1.25s;
    -moz-animation-delay:1.25s;
    -o-animation-delay:1.25s;
    animation-delay:1.25s;
}
.delay-1500 {
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
    -o-animation-delay:1.5s;
    animation-delay:1.5s;
}
.delay-1750 {
    -webkit-animation-delay:1.75s;
    -moz-animation-delay:1.75s;
    -o-animation-delay:1.75s;
    animation-delay:1.75s;
}
.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}
.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}
.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}
.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}
.delay-3000 {
    -webkit-animation-delay:3.0s;
    -moz-animation-delay:3.0s;
    -o-animation-delay:3.0s;
    animation-delay:3.0s;
}
.delay-3500 {
    -webkit-animation-delay:3.5s;
    -moz-animation-delay:3.5s;
    -o-animation-delay:3.5s;
    animation-delay:3.5s;
}

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
    opacity:0;
    -webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
    opacity:0;
    -webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}

.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn{
    opacity:0;
}

.lightSpeedInRight, .lightSpeedInLeft{
    opacity:0;
    -webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.3); 
    } 

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

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

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

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

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

    70% { 
        transform: scale(.9); 
    } 

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

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

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateX(400px); 
    } 
    60% { 
        
        -webkit-transform: translateX(-30px); 
    } 
    80% { 
        -webkit-transform: translateX(10px); 
    } 
    100% {
    opacity: 1;
     
        -webkit-transform: translateX(0); 
    } 
} 

@keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        
        transform: translateX(400px); 
    } 
    60% { 
        
        transform: translateX(-30px); 
    } 
    80% { 
        transform: translateX(10px); 
    } 
    100% {
    opacity: 1;
     
        transform: translateX(0); 
    } 
} 


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

/******************
* Bounce in left *
*******************/

@-webkit-keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateX(-400px); 
    } 
    60% { 
       
        -webkit-transform: translateX(30px); 
    } 
    80% { 
        -webkit-transform: translateX(-10px); 
    } 
    100% {
        opacity: 1;
         
        -webkit-transform: translateX(0); 
    } 
} 

@keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        
        transform: translateX(-400px); 
    } 
    60% { 
       
        transform: translateX(30px); 
    } 
    80% { 
        transform: translateX(-10px); 
    } 
    100% {
        opacity: 1;
         
        transform: translateX(0); 
    } 
} 

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

/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateY(400px); 
    } 
    60% { 
       
        -webkit-transform: translateY(-30px); 
    } 
    80% { 
        -webkit-transform: translateY(10px); 
    } 
    100% {
        opacity: 1;
         
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        
        transform: translateY(400px); 
    } 
    60% { 
       
        transform: translateY(-30px); 
    } 
    80% { 
        transform: translateY(10px); 
    } 
    100% {
        opacity: 1;
         
        transform: translateY(0); 
    } 
} 

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


/******************
* Bounce in down *
*******************/

@-webkit-keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateY(-400px); 
    } 
    60% { 
       
        -webkit-transform: translateY(30px); 
    } 
    80% { 
        -webkit-transform: translateY(-10px); 
    } 
    100% {
        opacity: 1;
         
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        
        transform: translateY(-400px); 
    } 
    60% { 
       
        transform: translateY(30px); 
    } 
    80% { 
        transform: translateY(-10px); 
    } 
    100% {
        opacity: 1;
         
        transform: translateY(0); 
    } 
} 

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


/**********
* Fade In *
**********/ 
@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
}
.fadeIn{
    opacity:0;
}
.fadeIn.go { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}

/**********
* Grow in *
***********/

@-webkit-keyframes growIn { 
    0% { 
        -webkit-transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        -webkit-transform: scale(1.2); 
        
    } 
    100% { 
        -webkit-transform: scale(1); 
        opacity:1;
    } 
} 
@keyframes growIn { 
    0% { 
        transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        transform: scale(1.2); 
        
    } 
    100% { 
        transform: scale(1); 
        opacity:1;
    } 
} 
.growIn { 

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn.go{
    -webkit-animation-name: growIn; 
    animation-name: growIn; 
}

/********
* Shake *
********/
@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {transform: translateX(10px);} 
} 
.shake.go { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
}

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp { 
    0%, 100% {-webkit-transform: translateY(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);} 
} 
@keyframes shakeUp { 
    0%, 100% {transform: translateY(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);} 
    20%, 40%, 60%, 80% {transform: translateY(10px);} 
} 
.shakeUp.go { 
    -webkit-animation-name: shakeUp; 
    animation-name: shakeUp; 
}

/*************
* FadeInLeft *
*************/

@-webkit-keyframes fadeInLeft { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInLeft { 
    0% { 
        opacity: 0; 
        transform: translateX(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 
.fadeInLeft{ 
    opacity: 0; 
    -webkit-transform: translateX(-400px); 
    transform: translateX(-400px);
}
.fadeInLeft.go { 
    -webkit-animation-name: fadeInLeft; 
    animation-name: fadeInLeft; 
}


/*************
* FadeInRight *
*************/

@-webkit-keyframes fadeInRight { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInRight { 
    0% { 
        opacity: 0; 
        transform: translateX(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 
.fadeInRight{ 
    opacity: 0; 
    -webkit-transform: translateX(400px); 
    transform: translateX(400px);
}
.fadeInRight.go { 
    -webkit-animation-name: fadeInRight; 
    animation-name: fadeInRight; 
}

/*************
* FadeInUp *
*************/

@-webkit-keyframes fadeInUp { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 
@keyframes fadeInUp { 
    0% { 
        opacity: 0; 
        transform: translateY(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeInUp{ 
    opacity: 0; 
    -webkit-transform: translateY(400px); 
    transform: translateY(400px);
}
.fadeInUp.go { 
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
}

/*************
* FadeInDown *
*************/

@-webkit-keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 
@keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeInDown{ 
    opacity: 0; 
    -webkit-transform: translateY(-400px); 
    transform: translateY(-400px);
}
.fadeInDown.go { 
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn { 
    0% { 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(-200deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateIn { 
    0% { 
        transform-origin: center center; 
        transform: rotate(-200deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: center center; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateIn.go { 
    -webkit-animation-name: rotateIn; 
    animation-name: rotateIn; 
}

/*****************
* rotateInUpLeft *
*****************/

@-webkit-keyframes rotateInUpLeft { 
    0% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateInUpLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateInUpLeft.go { 
    -webkit-animation-name: rotateInUpLeft; 
    animation-name: rotateInUpLeft; 
}

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft { 
    0% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(-90deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateInDownLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(-90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateInDownLeft.go { 
    -webkit-animation-name: rotateInDownLeft; 
    animation-name: rotateInDownLeft; 
}

/******************
* rotateInUpRight *
*******************/

@-webkit-keyframes rotateInUpRight { 
    0% { 
        -webkit-transform-origin: right bottom; 
        -webkit-transform: rotate(-90deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: right bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateInUpRight { 
    0% { 
        transform-origin: right bottom; 
        transform: rotate(-90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: right bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateInUpRight.go { 
    -webkit-animation-name: rotateInUpRight; 
    animation-name: rotateInUpRight; 
}

/********************
* rotateInDownRight *
********************/

@-webkit-keyframes rotateInDownRight { 
    0% { 
        -webkit-transform-origin: right bottom; 
        -webkit-transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: right bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateInDownRight { 
    0% { 
        transform-origin: right bottom; 
        transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: right bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateInDownRight.go { 
    -webkit-animation-name: rotateInDownRight; 
    animation-name: rotateInDownRight; 
}

/*********
* rollIn *
**********/

@-webkit-keyframes rollIn { 
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 
} 
@keyframes rollIn { 
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 
} 
.rollIn.go { 
    -webkit-animation-name: rollIn; 
    animation-name: rollIn; 
}

/*********
* wiggle *
**********/

@-webkit-keyframes wiggle { 
    0% { -webkit-transform: skewX(9deg); } 
    10% { -webkit-transform: skewX(-8deg); } 
    20% { -webkit-transform: skewX(7deg); } 
    30% { -webkit-transform: skewX(-6deg); } 
    40% { -webkit-transform: skewX(5deg); } 
    50% { -webkit-transform: skewX(-4deg); } 
    60% { -webkit-transform: skewX(3deg); } 
    70% { -webkit-transform: skewX(-2deg); } 
    80% { -webkit-transform: skewX(1deg); } 
    90% { -webkit-transform: skewX(0deg); } 
    100% { -webkit-transform: skewX(0deg); } 
} 
@keyframes wiggle { 
    0% { transform: skewX(9deg); } 
    10% { transform: skewX(-8deg); } 
    20% { transform: skewX(7deg); } 
    30% { transform: skewX(-6deg); } 
    40% { transform: skewX(5deg); } 
    50% { transform: skewX(-4deg); } 
    60% { transform: skewX(3deg); } 
    70% { transform: skewX(-2deg); } 
    80% { transform: skewX(1deg); } 
    90% { transform: skewX(0deg); } 
    100% { transform: skewX(0deg); } 
} 
.wiggle.go { 
    -webkit-animation-name: wiggle; 
    animation-name: wiggle; 
    -webkit-animation-timing-function: ease-in; 
    animation-timing-function: ease-in; 
} 

/********
* swing *
*********/

@-webkit-keyframes swing { 
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 
    20% { -webkit-transform: rotate(15deg); } 
    40% { -webkit-transform: rotate(-10deg); } 
    60% { -webkit-transform: rotate(5deg); } 
    80% { -webkit-transform: rotate(-5deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 
@keyframes swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(5deg); } 
    80% { transform: rotate(-5deg); } 
    100% { transform: rotate(0deg); } 
} 
.swing.go { 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-name: swing; 
    animation-name: swing; 
}

/*******
* tada *
********/

@-webkit-keyframes tada { 
    0% {-webkit-transform: scale(1);} 
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 
    100% {-webkit-transform: scale(1) rotate(0);} 
} 
@keyframes tada { 
    0% {transform: scale(1);} 
    10%, 20% {transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 
    100% {transform: scale(1) rotate(0);} 
} 
.tada.go { 
    -webkit-animation-name: tada; 
    animation-name: tada; 
}

/*********
* wobble *
**********/

@-webkit-keyframes wobble { 
  0% { -webkit-transform: translateX(0%); } 
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 
  30% { -webkit-transform: translateX(20%) rotate(3deg); } 
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 
  60% { -webkit-transform: translateX(10%) rotate(2deg); } 
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 
  100% { -webkit-transform: translateX(0%); } 
} 
@keyframes wobble { 
  0% { transform: translateX(0%); } 
  15% { transform: translateX(-25%) rotate(-5deg); } 
  30% { transform: translateX(20%) rotate(3deg); } 
  45% { transform: translateX(-15%) rotate(-3deg); } 
  60% { transform: translateX(10%) rotate(2deg); } 
  75% { transform: translateX(-5%) rotate(-1deg); } 
  100% { transform: translateX(0%); } 
} 
.wobble.go { 
    -webkit-animation-name: wobble; 
    animation-name: wobble; 
}

/********
* pulse *
*********/

@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse.go { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
}

/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight { 
   0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 
    60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 
    80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 
} 
@keyframes lightSpeedInRight { 
    0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 
    60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 
    80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; } 
} 
.lightSpeedInRight.go { 
    -webkit-animation-name: lightSpeedInRight; 
    animation-name: lightSpeedInRight; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
} 

/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft { 
   0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; } 
    60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; } 
    80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; } 
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 
} 
@keyframes lightSpeedInLeft { 
    0% { transform: translateX(-100%) skewX(30deg); opacity: 0; } 
    60% { transform: translateX(20%) skewX(-30deg); opacity: 1; } 
    80% { transform: translateX(0%) skewX(15deg); opacity: 1; } 
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; } 
} 
.lightSpeedInLeft.go { 
    -webkit-animation-name: lightSpeedInLeft; 
    animation-name: lightSpeedInLeft; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
} 


/*******
* Flip *
*******/
@-webkit-keyframes flip { 
    0% { 
        -webkit-transform: perspective(400px) rotateY(0); 
        -webkit-animation-timing-function: ease-out; 
    } 
    40% { 
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); 
        -webkit-animation-timing-function: ease-out; 
    } 
    50% { 
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    } 
    80% { 
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); 
        -webkit-animation-timing-function: ease-in; 
    } 
    100% { 
        -webkit-transform: perspective(400px) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    } 
}
@keyframes flip { 
    0% { 
        transform: perspective(400px) rotateY(0); 
        animation-timing-function: ease-out; 
    } 
    40% { 
        transform: perspective(400px) translateZ(150px) rotateY(170deg); 
        animation-timing-function: ease-out; 
    } 
    50% { 
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 
        animation-timing-function: ease-in; 
    } 
    80% { 
        transform: perspective(400px) rotateY(360deg) scale(.95); 
        animation-timing-function: ease-in; 
    } 
    100% { 
        transform: perspective(400px) scale(1); 
        animation-timing-function: ease-in; 
    } 
} 
.flip.go { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flip; 
    backface-visibility: visible !important; 
    animation-name: flip; 
}

/**********
* flipInX *
**********/
@-webkit-keyframes flipInX { 
    0% { 
        -webkit-transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        -webkit-transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        -webkit-transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
} 
@keyframes flipInX { 
    0% { 
        transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
} 
.flipInX.go { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInX; 
    backface-visibility: visible !important; 
    animation-name: flipInX; 
}

/**********
* flipInY *
**********/

@-webkit-keyframes flipInY { 
    0% { 
        -webkit-transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
    40% { 
        -webkit-transform: perspective(400px) rotateY(-10deg); 
    } 
    70% { 
        -webkit-transform: perspective(400px) rotateY(10deg); 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
} 
@keyframes flipInY { 
    0% { 
        transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
    40% { 
        transform: perspective(400px) rotateY(-10deg); 
    } 
    70% { 
        transform: perspective(400px) rotateY(10deg); 
    } 
    100% { 
        transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
} 
.flipInY.go { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInY; 
    backface-visibility: visible !important; 
    animation-name: flipInY; 
}

/*****************
* Out animations *
*****************/


/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut { 
    0% { 
        -webkit-transform: scale(1); 
    } 
    25% { 
        -webkit-transform: scale(.95); 
    } 
    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.1); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: scale(.3); 
    } 
} 
@keyframes bounceOut { 
    0% { 
        transform: scale(1); 
    } 
    25% { 
        transform: scale(.95); 
    } 
    50% { 
        opacity: 1; 
        transform: scale(1.1); 
    } 
    100% { 
        opacity: 0; 
        transform: scale(.3); 
    } 
} 
.bounceOut.goAway { 
    -webkit-animation-name: bounceOut; 
    animation-name: bounceOut; 
}

/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp { 
    0% { 
        -webkit-transform: translateY(0); 
    } 
    20% { 
        opacity: 1; 
        -webkit-transform: translateY(20px); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(-2000px); 
    } 
} 
@keyframes bounceOutUp { 
    0% { 
        transform: translateY(0); 
    } 
    20% { 
        opacity: 1; 
        transform: translateY(20px); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(-2000px); 
    } 
} 
.bounceOutUp.goAway { 
    -webkit-animation-name: bounceOutUp; 
    animation-name: bounceOutUp; 
}

/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown { 
    0% { 
        -webkit-transform: translateY(0); 
    } 
    20% { 
        opacity: 1; 
        -webkit-transform: translateY(-20px); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(2000px); 
    } 
} 
@keyframes bounceOutDown { 
    0% { 
        transform: translateY(0); 
    } 
    20% { 
        opacity: 1; 
        transform: translateY(-20px); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(2000px); 
    } 
} 
.bounceOutDown.goAway { 
    -webkit-animation-name: bounceOutDown; 
    animation-name: bounceOutDown; 
}


/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft { 
    0% { 
        -webkit-transform: translateX(0); 
    } 
    20% { 
        opacity: 1; 
        -webkit-transform: translateX(20px); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateX(-2000px); 
    } 
} 
@keyframes bounceOutLeft { 
    0% { 
        transform: translateX(0); 
    } 
    20% { 
        opacity: 1; 
        transform: translateX(20px); 
    } 
    100% { 
        opacity: 0; 
        transform: translateX(-2000px); 
    } 
} 
.bounceOutLeft.goAway { 
    -webkit-animation-name: bounceOutLeft; 
    animation-name: bounceOutLeft; 
}

/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight { 
    0% { 
        -webkit-transform: translateX(0); 
    } 
    20% { 
        opacity: 1; 
        -webkit-transform: translateX(-20px); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateX(2000px); 
    } 
} 
@keyframes bounceOutRight { 
    0% { 
        transform: translateX(0); 
    } 
    20% { 
        opacity: 1; 
        transform: translateX(-20px); 
    } 
    100% { 
        opacity: 0; 
        transform: translateX(2000px); 
    } 
} 
.bounceOutRight.goAway { 
    -webkit-animation-name: bounceOutRight; 
    animation-name: bounceOutRight; 
}

/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut { 
    0% {opacity: 1;} 
    100% {opacity: 0;} 
} 
@keyframes fadeOut { 
    0% {opacity: 1;} 
    100% {opacity: 0;} 
} 
.fadeOut.goAway { 
    -webkit-animation-name: fadeOut; 
    animation-name: fadeOut; 
}

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(-2000px); 
    } 
} 
@keyframes fadeOutUp { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(-2000px); 
    } 
} 
.fadeOutUp.goAway { 
    -webkit-animation-name: fadeOutUp; 
    animation-name: fadeOutUp; 
}

/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(2000px); 
    } 
} 
@keyframes fadeOutDown { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(2000px); 
    } 
} 
.fadeOutDown.goAway { 
    -webkit-animation-name: fadeOutDown; 
    animation-name: fadeOutDown; 
}

/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateX(-2000px); 
    } 
} 
@keyframes fadeOutLeft { 
    0% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateX(-2000px); 
    } 
} 
.fadeOutLeft.goAway { 
    -webkit-animation-name: fadeOutLeft; 
    animation-name: fadeOutLeft; 
}

/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateX(2000px); 
    } 
} 
@keyframes fadeOutRight { 
    0% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateX(2000px); 
    } 
} 
.fadeOutRight.goAway { 
    -webkit-animation-name: fadeOutRight; 
    animation-name: fadeOutRight; 
}
/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX { 
    0% { 
        -webkit-transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
} 
@keyframes flipOutX { 
    0% { 
        transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
    100% { 
        transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
} 
.flipOutX.goAway { 
    -webkit-animation-name: flipOutX; 
    -webkit-backface-visibility: visible !important; 
    animation-name: flipOutX; 
    backface-visibility: visible !important; 
}

/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY { 
    0% { 
        -webkit-transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
} 
@keyframes flipOutY { 
    0% { 
        transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
    100% { 
        transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
} 
.flipOutY { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipOutY; 
    backface-visibility: visible !important; 
    animation-name: flipOutY; 
}

/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight { 
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 
    100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 
} 
@keyframes lightSpeedOutRight { 
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 
    100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 
} 
.lightSpeedOutRight.goAway { 
    -webkit-animation-name: lightSpeedOutRight; 
    animation-name: lightSpeedOutRight; 
    -webkit-animation-timing-function: ease-in; 
    animation-timing-function: ease-in; 
} 


/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft { 
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 
    100% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; } 
} 
@keyframes lightSpeedOutLeft { 
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 
    100% { transform: translateX(-100%) skewX(30deg); opacity: 0; } 
} 
.lightSpeedOutLeft.goAway { 
    -webkit-animation-name: lightSpeedOutLeft; 
    animation-name: lightSpeedOutLeft; 
    -webkit-animation-timing-function: ease-in; 
    animation-timing-function: ease-in; 

} 

/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut { 
    0% { 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(200deg); 
        opacity: 0; 
    } 
} 
@keyframes rotateOut { 
    0% { 
        transform-origin: center center; 
        transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        transform-origin: center center; 
        transform: rotate(200deg); 
        opacity: 0; 
    } 
} 
.rotateOut.goAway { 
    -webkit-animation-name: rotateOut; 
    animation-name: rotateOut; 
}


/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft { 
    0% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(-90deg); 
        opacity: 0; 
    } 
} 
@keyframes rotateOutUpLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        -transform-origin: left bottom; 
        -transform: rotate(-90deg); 
        opacity: 0; 
    } 
} 
.rotateOutUpLeft.goAway { 
    -webkit-animation-name: rotateOutUpLeft; 
    animation-name: rotateOutUpLeft; 
}

/************
* rotateOutDownLeft *
*************/

@-webkit-keyframes rotateOutDownLeft { 
    0% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(90deg); 
        opacity: 0; 
    } 
} 
@keyframes rotateOutDownLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        transform-origin: left bottom; 
        transform: rotate(90deg); 
        opacity: 0; 
    } 
} 
.rotateOutDownLeft.goAway { 
    -webkit-animation-name: rotateOutDownLeft; 
    animation-name: rotateOutDownLeft; 
}
/************
* rotateOutUpRight *
*************/

@-webkit-keyframes rotateOutUpRight { 
    0% { 
        -webkit-transform-origin: right bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        -webkit-transform-origin: right bottom; 
        -webkit-transform: rotate(90deg); 
        opacity: 0; 
    } 
} 
@keyframes rotateOutUpRight { 
    0% { 
        transform-origin: right bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
    100% { 
        transform-origin: right bottom; 
        transform: rotate(90deg); 
        opacity: 0; 
    } 
} 
.rotateOutUpRight.goAway { 
    -webkit-animation-name: rotateOutUpRight; 
    animation-name: rotateOutUpRight; 
}

/************
* rollOut *
*************/
@-webkit-keyframes rollOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateX(0px) rotate(0deg); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateX(100%) rotate(120deg); 
    } 
} 
@keyframes rollOut { 
    0% { 
        opacity: 1; 
        transform: translateX(0px) rotate(0deg); 
    } 
    100% { 
        opacity: 0; 
        transform: translateX(100%) rotate(120deg); 
    } 
} 
.rollOut.goAway { 
    -webkit-animation-name: rollOut; 
    animation-name: rollOut; 
}
/*****************
* Short Animations
*******************/

/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeInUpShort { 
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeInUpShort{
    opacity: 0; 
    -webkit-transform: translateY(20px); 
    transform: translateY(20px); 
}
.fadeInUpShort.go { 
    -webkit-animation-name: fadeInUpShort; 
    animation-name: fadeInUpShort; 
}

/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeInDownShort { 
    0% { 
        opacity: 0; 
        transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeInDownShort{
    opacity: 0; 
    -webkit-transform: translateY(-20px); 
    transform: translateY(-20px); 
}
.fadeInDownShort.go { 
    -webkit-animation-name: fadeInDownShort; 
    animation-name: fadeInDownShort; 
}

/*********************
* fadeInRightShort 
*********************/
@-webkit-keyframes fadeInRightShort { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInRightShort { 
    0% { 
        opacity: 0; 
        transform: translateX(20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 
.fadeInRightShort { 
    opacity: 0; 
    -webkit-transform: translateX(20px);  
    transform: translateX(20px); 
}
.fadeInRightShort.go { 
    -webkit-animation-name: fadeInRightShort; 
    animation-name: fadeInRightShort; 
}

/*********************
* fadeInLeftShort 
*********************/
@-webkit-keyframes fadeInLeftShort { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInLeftShort { 
    0% { 
        opacity: 0; 
        transform: translateX(-20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 
.fadeInLeftShort { 
    opacity: 0; 
    -webkit-transform: translateX(-20px);  
    transform: translateX(-20px); 
}
.fadeInLeftShort.go { 
    -webkit-animation-name: fadeInLeftShort; 
    animation-name: fadeInLeftShort; 
}