@charset "UTF-8";

/**
 * Theme Name: Parallax Basic
 * Version: 1.0.0
 * Theme URL: http://sequencejs.com/themes/parallax-basic/
 *
 * A basic parallax theme with background and text that move at different speeds
 * to create a depth of field.
 *
 * This theme is powered by Sequence.js - The
 * responsive CSS animation framework for creating unique sliders,
 * presentations, banners, and other step-based applications.
 *
 * Author: Ian Lunn
 * Author URL: http://ianlunn.co.uk/
 *
 * Theme License: http://sequencejs.com/licenses/#free-theme
 * Sequence.js Licenses: http://sequencejs.com/licenses/
 *
 * Copyright © 2015 Ian Lunn Design Limited unless otherwise stated.
 */

body,
html,
.seq {
  /* Uncomment to make the theme full-screen */
  /* height: 100% !important; */
  /* max-height: 100% !important; */
}

.seq {
  position: relative;
  /* Dimensions */
  height: 400px;
  width: 100%;
  max-width: 100%;
  /* Hide anything that goes beyond the boundaries of the Sequence container */
  overflow: hidden;
  /* Center the Sequence container on the page */
  margin: 0 auto;
  padding: 0;
  /* Some basic styles */
  font-family: 'Droid Sans', sans-serif;
  -webkit-text-size-adjust: 100%;
  color: white;
  background: #e4e4e4;
}

.seq button {
  /* Reset styles on buttons */
  cursor: pointer;
  margin: 0;
  border: none;
  background-color: transparent;
}

.seq .seq-screen,
.seq .seq-canvas,
.seq .seq-canvas > * {
  /* Reset the canvas and steps for more browser consistency */
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seq .seq-screen {
  /* Override Sequence setting height: 100% on the screen so it can be moved
   * up from the bottom to make space for the navigation
   */
  height: auto !important;
  top: 0;
  /* Make room at the bottom for the navigation (navigation height + navigation bottom) */
  bottom: 3em;
}

.seq .seq-valign {
  font-size: 0;
}

.seq .seq-valign:before,
.seq .seq-valign > * {
  display: inline-block;
  vertical-align: middle;
}

.seq .seq-valign > * {
  font-size: 16px;
}

.seq .seq-valign:before {
  content: "";
  height: 100%;
}

.seq .seq-preloader {
  background: #e4e4e4;
}

.seq .seq-preload-circle {
  /* Change the color of the preload indicator */
  fill: #006E94;
}

.seq .seq-content {
  width: 100%;
  text-align: center;
}

.seq .seq-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Make the background twice as wide as necessary so it can be moved */
  width: 200%;
  height: 100%;
  /* Dark Sharp Edges background: http://subtlepatterns.com/dark-sharp-edges/ */
  background: url("../images/fon22.svg");
  background-size: contain;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}

.seq .seq-nav {
  /* Pagination and next/prev buttons */
  position: absolute;
  z-index: 10;
  bottom: 1em;
  height: 2em;
  padding: 0;
  width: 100%;
  border: none;
  text-align: center;
  color: white;
}

.seq .seq-nav > *,
.seq .seq-nav li {
  /* Place navigation side-by-side */
  list-style: none;
  display: inline-block;
  vertical-align: middle;
}

.seq .seq-pagination {
  height: 100%;
  margin: 0;
  padding: 0;
}

.seq .seq-pagination a {
  display: block;
  height: 100%;
  padding: 0 .75em;
  line-height: 2;
  text-decoration: none;
  color: white;
  /* Animate the color of pagination links */
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
}

.seq .seq-pagination .seq-current a {
  background: white;
  color: black;
}

.seq .seq-pagination > *,
.seq .seq-prev,
.seq .seq-next {
  margin: 0 .375em;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1em;
  font-family: 'Droid Sans', sans-serif;
  /* Animate the color of pagination links */
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
}

.seq .seq-pagination > *:hover,
.seq .seq-pagination > *:hover a,
.seq .seq-prev:hover,
.seq .seq-prev:hover a,
.seq .seq-next:hover,
.seq .seq-next:hover a {
  background-color: white;
  color: black;
}

.seq .seq-prev {
  margin-left: 0;
  text-align: left;
}

.seq .seq-next {
  margin-right: 0;
  text-align: right;
}

.seq .seq-prev-arrow,
.seq .seq-next-arrow {
  position: relative;
  padding: 0 .5em;
  top: -1px;
  font-family: 'Cabin', sans-serif;
  -moz-osx-font-smoothing: grayscale;
}

.seq .seq-button {
  display: inline-block;
  margin: 0 auto;
  margin-top: 1em;
  padding: .875em 1em;
  border-top: white solid 1px;
  color: white;
  font-family: 'Droid Sans', sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

.seq .seq-button .seq-next-arrow {
  display: inline-block;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}

.seq .seq-button:hover .seq-next-arrow {
  -webkit-transform: translateX(6px);
  -ms-transform: translateX(6px);
  transform: translateX(6px);
}

.seq .seq-title {
  font-size: 1.6em;
  margin: .4em 0;
  padding: 0 15%;
  text-transform: uppercase;
  line-height: 1.3;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25);
}

.seq .seq-title a,
.seq .seq-title a:hover {
  color: #fff;
  text-decoration: none;
}  

.seq p {
  margin-bottom: .75em;
  padding: 0 1em;
  font-size: 1.06666667em;
  font-family: 'Cabin', sans-serif;
  font-weight: 400;
  text-transform: none;
  text-shadow: none;
  line-height: 140%;
}

.seq .seq-description {
  font-size: .9375em;
}

.seq .seq-title,
.seq .seq-description {
  /* Starting positions */
  display: block;
  -webkit-transform: translateX(100%) translateZ(0);
  -ms-transform: translateX(100%) translateZ(0);
  transform: translateX(100%) translateZ(0);
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

.seq .seq-in {
  /* Animate in positions */
}

.seq .seq-in .seq-title {
  -webkit-transform: translateX(0) translateZ(0);
  -ms-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0);
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

.seq .seq-in .seq-description {
  -webkit-transform: translateX(0) translateZ(0);
  -ms-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0);
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.seq .seq-out {
  /* Animate out positions */
}

.seq .seq-out .seq-title,
.seq .seq-out .seq-description {
  -webkit-transform: translateX(-100%) translateZ(0);
  -ms-transform: translateX(-100%) translateZ(0);
  transform: translateX(-100%) translateZ(0);
}

.seq.seq-step2 {
  /* When on the 2nd step, move the background by 5% */
}

.seq.seq-step2 .seq-bg {
  -webkit-transform: translateX(-5%) translateZ(0);
  -ms-transform: translateX(-5%) translateZ(0);
  transform: translateX(-5%) translateZ(0);
}

.seq.seq-step3 {
  /* When on the 3rd step, move the background by 10% */
}

.seq.seq-step3 .seq-bg {
  -webkit-transform: translateX(-10%) translateZ(0);
  -ms-transform: translateX(-10%) translateZ(0);
  transform: translateX(-10%) translateZ(0);
}

@media only screen and (min-width: 375px) {
  .seq .seq-title {
    font-size: 2em;
  }

  .seq p {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 480px) {
  .seq .seq-title {
    font-size: 2.375em;
  }

  .seq p {
    font-size: 1.4em;
  }
}

@media only screen and (min-width: 640px) {
  .seq {
    /* Make the container 16:9 but no bigger than 90% of the screen height */
    position: relative;
    height: auto;
    height: 100%;
    max-height: 20vh;
    min-height: 360px;
  }

  .seq:before {
    /* Make an element a certain aspect ratio */
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
  }

  .seq .seq-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  .seq p {
    padding: 0 8em;
  }
}

@media only screen and (min-width: 1024px) {
  .seq .seq-title {
    font-size: 2em;
    /* Increase the 3d effect on text */
    /*text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);*/
  }

  .seq p {
    font-size: 1.6em;
    padding: 0 4em;
  }

  .seq .seq-button {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 1600px) {
  .seq .seq-title {
    font-size: 2em;
  }

  .seq p {
    font-size: 1.5em;
  }
}

/*# sourceMappingURL=sequence-theme.parallax-basic.css.map */