html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

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

/*! HiDPI v2.0.1 | MIT License | git.io/hidpi */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.h0 {
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
  font-weight: 100;
  font-size: 3.6rem; }
  @media only screen and (min-width: 720px) {
    .h0 {
      font-size: 6.4rem; } }

h1 {
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  font-weight: 300;
  font-size: 2.8rem; }
  @media only screen and (min-width: 720px) {
    h1 {
      font-size: 4.8rem;
      font-weight: 100; } }

h2 {
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
  font-weight: 100;
  font-size: 3.6rem; }
  @media only screen and (min-width: 720px) {
    h2 {
      font-size: 3.6rem; } }

h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1.34;
  letter-spacing: 0.2px; }
  @media only screen and (min-width: 720px) {
    h3 {
      font-size: 2.4rem; } }

h4 {
  font-family: "Roboto", sans-serif;
  line-height: 1.44;
  font-weight: 500;
  letter-spacing: 0.4px;
  font-size: 1.4rem; }
  @media only screen and (min-width: 960px) {
    h4 {
      font-size: 1.4rem; } }

h5 {
  font-family: "Roboto", sans-serif;
  line-height: 1.3;
  font-weight: 500;
  font-size: 1.0rem;
  letter-spacing: 0.3px; }

p {
  font-family: "Roboto", sans-serif;
  color: #000;
  line-height: 1.44;
  font-weight: 500;
  letter-spacing: 0.4px;
  font-size: 1.8rem; }

a {
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  line-height: 1.44;
  font-weight: 500;
  letter-spacing: 0.4px;
  font-size: 1.8rem; }

a:hover {
  color: #F5A623; }

html {
  font-size: 62.5%; }

body {
  margin: 0;
  padding: 0; }

input, button {
  border: none; }

button:focus {
  outline: 0; }

#icon-logo {
  width: 200px;
  height: 200px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 30px;
  background-image: url("img/icon logo.png");
  background-repeat: no-repeat; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
    #icon-logo {
      background-image: url("img/icon logo@2x.png");
      background-size: 200px 200px; } }
  @media only screen and (min-width: 720px) {
    #icon-logo {
      top: 0; } }

header {
  width: 100%; }
  @media only screen and (min-width: 720px) {
    header {
      height: 92px; } }
  header #header-links {
    background-color: red;
    width: 100%;
    margin: auto; }
    @media only screen and (min-width: 720px) {
      header #header-links {
        width: 100%; } }
  header #header-links a {
    color: #000;
    opacity: 0.5;
    float: right;
    margin-right: 24px;
    margin-top: 32px;
    margin-left: 0; }
    @media only screen and (min-width: 720px) {
      header #header-links a {
        float: right;
        margin-right: 32px;
        margin-top: 36px;
        margin-left: 0; } }
  header #header-links a:hover {
    color: #000;
    opacity: 0.8; }
  header #header-links a:first-child {
    margin-right: 50px;
    margin-left: 0; }

.container {
  margin: auto;
  width: 90%; }
  @media only screen and (min-width: 960px) {
    .container {
      width: 960px; } }

.column-3 {
  width: 300px;
  margin: auto;
  padding-top: 60px;
  max-width: 400px; }
  @media only screen and (min-width: 960px) {
    .column-3 {
      float: left;
      margin-left: 30px;
      padding-top: 0px;
      width: 300px;
      height: 200px; } }

@media only screen and (min-width: 960px) {
  .first-child {
    margin-left: 0; } }

.play-video-icon {
  margin: auto;
  width: 90px;
  height: 90px;
  background-image: url("img/play video.png");
  background-repeat: no-repeat; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
    .play-video-icon {
      background-image: url("img/play video@2x.png");
      background-size: 90px 90px; } }

.play-video-icon:hover {
  opacity: 0.8; }

.video-block {
  width: 300px;
  height: 200px;
  background-image: url("img/demo video image.png");
  background-repeat: no-repeat; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
    .video-block {
      background-image: url("img/demo video image@2x.png");
      background-size: 300px 200px; } }
  .video-block .play-video-icon {
    position: relative;
    top: 54px; }
  .video-block .download-example-files {
    margin-top: 124px;
    text-align: center; }

.video-block:hover {
  cursor: pointer; }

.button {
  cursor: pointer;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: yellow;
  border-radius: 8px;
  float: left;
  border: 1px solid rgba(0, 0, 0, 0.4);
  margin-left: 12px;
  transition: all 0.3s; }
  @media only screen and (min-width: 960px) {
    .button {
      padding-left: 20px;
      padding-right: 20px;
      margin-left: 20px; } }

.button:hover {
  opacity: 0.9; }

.welcome-section {
  background: #EBEBEB;
  padding-bottom: 36px; }
  @media only screen and (min-width: 720px) {
    .welcome-section {
      padding-bottom: 100px; } }
  .welcome-section h1 {
    text-align: center;
    opacity: 0.5;
    width: 90%;
    margin: auto; }
    @media only screen and (min-width: 720px) {
      .welcome-section h1 {
        width: 100%; } }
  .welcome-section .plugin-title {
    opacity: 1;
    padding-top: 235px; }
    @media only screen and (min-width: 720px) {
      .welcome-section .plugin-title {
        padding-top: 114px; } }
  .welcome-section .welcome-buttons {
    display: block;
    margin: auto;
    width: calc(312px - 4*12px);
    margin-top: 32px; }
    @media only screen and (min-width: 960px) {
      .welcome-section .welcome-buttons {
        width: 312px; } }
    .welcome-section .welcome-buttons .welcome-button-download {
      background-image: linear-gradient(-180deg, #5FE2FE 0%, #2DBFFF 100%);
      border: 1px solid #0091C9;
      border-radius: 5px;
      box-shadow: 0px 10px 48px 0px rgba(0, 0, 0, 0.24); }
    .welcome-section .welcome-buttons .welcome-button-download:hover {
      box-shadow: 0px 20px 58px 0px rgba(0, 0, 0, 0.34); }
    .welcome-section .welcome-buttons .welcome-button-share {
      background-image: linear-gradient(-180deg, #B2B2B2 0%, #878787 100%);
      border: 1px solid #6F6F6F;
      border-radius: 5px;
      box-shadow: 0px 10px 48px 0px rgba(0, 0, 0, 0.24); }
    .welcome-section .welcome-buttons .welcome-button-share:hover {
      box-shadow: 0px 20px 58px 0px rgba(0, 0, 0, 0.34); }
    .welcome-section .welcome-buttons p {
      text-align: center;
      color: white; }
  .welcome-section .welcome-video {
    width: 100%;
    margin: auto; }
    @media only screen and (min-width: 720px) {
      .welcome-section .welcome-video {
        width: 960px;
        height: 288px; } }
    .welcome-section .welcome-video .video-block {
      width: 300px;
      height: 188px;
      margin: auto;
      margin-top: 140px;
      box-shadow: 0px 7px 31px 0px rgba(0, 0, 0, 0.36);
      background-image: url("img/welcome video.png");
      background-repeat: no-repeat; }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .welcome-section .welcome-video .video-block {
          background-image: url("img/welcome video@2x.png");
          background-size: 460px 288px; } }
      @media only screen and (min-width: 720px) {
        .welcome-section .welcome-video .video-block {
          width: 460px;
          height: 288px; } }
      .welcome-section .welcome-video .video-block .play-video-icon {
        top: 30px; }
        @media only screen and (min-width: 720px) {
          .welcome-section .welcome-video .video-block .play-video-icon {
            top: 80px; } }
      .welcome-section .welcome-video .video-block h3 {
        color: #FFF;
        margin: auto;
        text-align: center;
        position: relative;
        top: 48px; }
        @media only screen and (min-width: 720px) {
          .welcome-section .welcome-video .video-block h3 {
            top: 124px; } }

@keyframes plugin-mode-change {
  0% {
    opacity: 0; }
  49% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 1; } }
    .welcome-section .welcome-video .welcome-plugin {
      height: 0;
      position: relative;
      top: -288px;
      left: 600px;
      display: none;
      width: 320px;
      height: 200px; }
      @media only screen and (min-width: 720px) {
        .welcome-section .welcome-video .welcome-plugin {
          display: block; } }
      .welcome-section .welcome-video .welcome-plugin .welcome-plugin-preview-image-import-states {
        width: 235px;
        height: 112px;
        position: relative;
        left: 40px;
        top: 36px;
        box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        background-image: url("img/welcome plugin.png");
        background-repeat: no-repeat; }
        @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
          .welcome-section .welcome-video .welcome-plugin .welcome-plugin-preview-image-import-states {
            background-image: url("img/welcome plugin@2x.png");
            background-size: 235px 112px; } }
        .welcome-section .welcome-video .welcome-plugin .welcome-plugin-preview-image-import-states .welcome-plugin-preview-image-export-prototype {
          width: 235px;
          height: 112px;
          position: relative;
          background-image: url("img/welcome plugin 2.png");
          background-repeat: no-repeat;
          animation-name: plugin-mode-change;
          animation-duration: 4s;
          animation-iteration-count: infinite;
          animation-timing-function: ease-in-out; }
          @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
            .welcome-section .welcome-video .welcome-plugin .welcome-plugin-preview-image-import-states .welcome-plugin-preview-image-export-prototype {
              background-image: url("img/welcome plugin 2@2x.png");
              background-size: 235px 112px; } }
  .welcome-section .welcome-share-buttons {
    padding-top: 16px;
    width: 300px;
    margin: auto;
    margin-bottom: 32px; }
    @media only screen and (min-width: 720px) {
      .welcome-section .welcome-share-buttons {
        width: 460px;
        margin: auto; } }
    .welcome-section .welcome-share-buttons #product-hunt-button {
      float: right;
      width: 72px;
      height: 28px;
      padding-right: 8px;
      background-image: url("img/product hunt icon.png");
      background-repeat: no-repeat; }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .welcome-section .welcome-share-buttons #product-hunt-button {
          background-image: url("img/product hunt icon@2x.png");
          background-size: 72px 28px; } }
    .welcome-section .welcome-share-buttons #product-hunt-button:hover {
      opacity: 0.9; }
    .welcome-section .welcome-share-buttons #twitter-button {
      float: right;
      padding-right: 8px; }
    .welcome-section .welcome-share-buttons #facebook-button {
      float: right;
      padding-right: 8px; }

.import-states-section {
  background: #181818;
  padding-bottom: 40px; }
  @media only screen and (min-width: 960px) {
    .import-states-section {
      padding-bottom: 120px; } }
  .import-states-section .import-states-left {
    width: 100%;
    margin: auto; }
    @media only screen and (min-width: 960px) {
      .import-states-section .import-states-left {
        float: left;
        width: 420px; } }
    .import-states-section .import-states-left h1 {
      margin: 0;
      padding-top: 40px;
      color: white;
      text-align: left;
      width: 100%;
      max-width: 400px; }
      @media only screen and (min-width: 720px) {
        .import-states-section .import-states-left h1 {
          padding-top: 100px;
          width: 100%;
          max-width: 100%;
          margin: auto;
          text-align: left; } }
    .import-states-section .import-states-left h3 {
      margin: auto;
      color: rgba(255, 255, 255, 0.6);
      text-align: left; }
      @media only screen and (min-width: 720px) {
        .import-states-section .import-states-left h3 {
          width: 100%;
          margin-top: 10px;
          text-align: left; } }
      .import-states-section .import-states-left h3 a {
        color: #30bcfc;
        opacity: 1;
        font-weight: 300;
        font-size: 1.8rem;
        line-height: 1.34;
        letter-spacing: 0.2px; }
        @media only screen and (min-width: 720px) {
          .import-states-section .import-states-left h3 a {
            font-size: 2.4rem; } }
      .import-states-section .import-states-left h3 a:hover {
        color: #19a3e3; }
    .import-states-section .import-states-left .import-states-buttons {
      display: block;
      width: 330px;
      margin-top: 32px; }
      .import-states-section .import-states-left .import-states-buttons .import-states-button-watch {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 5px; }
      .import-states-section .import-states-left .import-states-buttons .import-states-button-watch:hover {
        opacity: 0.7;
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2); }
      .import-states-section .import-states-left .import-states-buttons .import-states-button-read {
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 5px; }
      .import-states-section .import-states-left .import-states-buttons .import-states-button-read:hover {
        opacity: 0.7;
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2); }
      .import-states-section .import-states-left .import-states-buttons p {
        text-align: center;
        color: white; }
      .import-states-section .import-states-left .import-states-buttons div:first-child {
        margin-left: 0; }
    .import-states-section .import-states-left .video-block {
      margin-top: 114px;
      background-image: url("img/import states video.png");
      background-repeat: no-repeat; }
      @media only screen and (min-width: 720px) {
        .import-states-section .import-states-left .video-block {
          margin-top: 144px; } }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .import-states-section .import-states-left .video-block {
          background-image: url("img/import states video@2x.png");
          background-size: 300px 200px; } }
      .import-states-section .import-states-left .video-block .download-example-files {
        color: rgba(255, 255, 255, 0.1); }
      .import-states-section .import-states-left .video-block a {
        color: rgba(255, 255, 255, 0.3); }
      .import-states-section .import-states-left .video-block a:first-child {
        color: rgba(255, 255, 255, 0.45); }
      .import-states-section .import-states-left .video-block a:hover {
        color: #32C3FF; }
      .import-states-section .import-states-left .video-block a:first-child:hover {
        color: #F5A623; }
  .import-states-section .import-states-right {
    width: 460px;
    display: none;
    margin-top: 100px;
    margin-bottom: 120px;
    background-image: url("img/import states.png");
    background-repeat: no-repeat; }
    @media only screen and (min-width: 960px) {
      .import-states-section .import-states-right {
        float: right;
        width: 460px;
        height: 560px;
        display: block; } }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
      .import-states-section .import-states-right {
        background-image: url("img/import states@2x.png");
        background-size: 460px 560px; } }

@keyframes example {
  0% {
    -ms-transform: scale(1, 1) translate(0, 0);
    /* IE 9 */
    -webkit-transform: scale(1, 1) translate(0, 0);
    /* Safari */
    transform: scale(1, 1) translate(0, 0);
    border-radius: 16px; }
  20% {
    -ms-transform: scale(1, 1) translate(0, 0);
    /* IE 9 */
    -webkit-transform: scale(1, 1) translate(0, 0);
    /* Safari */
    transform: scale(1, 1) translate(0, 0);
    border-radius: 16px; }
  66% {
    -ms-transform: scale(0.28, 0.28) translate(-154px, -136px);
    /* IE 9 */
    -webkit-transform: scale(0.28, 0.28) translate(-154px, -136px);
    /* Safari */
    transform: scale(0.28, 0.28) translate(-154px, -136px);
    border-radius: 32px; }
  100% {
    -ms-transform: scale(0.28, 0.28) translate(-154px, -136px);
    /* IE 9 */
    -webkit-transform: scale(0.28, 0.28) translate(-154px, -136px);
    /* Safari */
    transform: scale(0.28, 0.28) translate(-154px, -136px);
    border-radius: 32px; } }
    .import-states-section .import-states-right .import-states-move {
      position: relative;
      width: 121px;
      height: 121px;
      left: 312px;
      top: 266px;
      border-radius: 32px;
      background-color: #007DFF;
      animation-name: example;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: cubic-bezier(0.56, 0.88, 0.85, 0.17); }
  .import-states-section .import-states-features {
    clear: both;
    padding-top: 40px;
    padding-bottom: 60px; }
    @media only screen and (min-width: 960px) {
      .import-states-section .import-states-features {
        height: 300px;
        padding-top: 0px;
        padding-bottom: 0px; } }
    .import-states-section .import-states-features .column-3 p {
      color: white; }
    .import-states-section .import-states-features .column-3 p:nth-child(2) {
      opacity: 0.4;
      padding-top: 6px; }
    .import-states-section .import-states-features .column-3 div {
      width: 300px;
      height: 200px;
      background: black;
      margin-top: 20px; }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .import-states-section .import-states-features .column-3 div {
          background-size: 300px 200px; } }
    .import-states-section .import-states-features .column-3 .import-states-feature-1 {
      background-image: url("img/import states feature 1.png"); }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .import-states-section .import-states-features .column-3 .import-states-feature-1 {
          background-image: url("img/import states feature 1@2x.png"); } }
    .import-states-section .import-states-features .column-3 .import-states-feature-2 {
      background-image: url("img/import states feature 2.png"); }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .import-states-section .import-states-features .column-3 .import-states-feature-2 {
          background-image: url("img/import states feature 2@2x.png"); } }
    .import-states-section .import-states-features .column-3 .import-states-feature-3 {
      background-image: url("img/import states feature 3.png"); }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .import-states-section .import-states-features .column-3 .import-states-feature-3 {
          background-image: url("img/import states feature 3@2x.png"); } }
    .import-states-section .import-states-features .column-3:nth-child(2) p:nth-child(2) {
      width: 280px; }

.export-prototype-section {
  padding-bottom: 40px; }
  @media only screen and (min-width: 960px) {
    .export-prototype-section {
      padding-bottom: 140px; } }
  .export-prototype-section .export-prototype-left {
    width: 100%; }
    @media only screen and (min-width: 960px) {
      .export-prototype-section .export-prototype-left {
        width: 580px; } }
    .export-prototype-section .export-prototype-left h1 {
      margin-top: 40px; }
      @media only screen and (min-width: 960px) {
        .export-prototype-section .export-prototype-left h1 {
          margin-top: 100px; } }
    .export-prototype-section .export-prototype-left h3 {
      margin-top: 10px;
      color: #666; }
      .export-prototype-section .export-prototype-left h3 a {
        color: #30bcfc;
        font-weight: 300;
        font-size: 1.8rem;
        line-height: 1.34;
        letter-spacing: 0.2px; }
        @media only screen and (min-width: 720px) {
          .export-prototype-section .export-prototype-left h3 a {
            font-size: 2.4rem; } }
      .export-prototype-section .export-prototype-left h3 a:hover {
        color: #19a3e3; }
  .export-prototype-section .export-prototype-media {
    background: red;
    width: 100%; }
    .export-prototype-section .export-prototype-media .export-prototype-video-left {
      float: left; }
      .export-prototype-section .export-prototype-media .export-prototype-video-left .export-prototype-buttons {
        background-color: red;
        margin-top: 32px;
        width: 100%; }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .export-prototype-buttons .export-prototype-button-watch {
          background: rgba(0, 0, 0, 0.02);
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 5px; }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .export-prototype-buttons .export-prototype-button-watch:hover {
          box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.05); }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .export-prototype-buttons .export-prototype-button-read {
          background: none;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 5px; }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .export-prototype-buttons .export-prototype-button-read:hover {
          box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.05); }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .export-prototype-buttons div:first-child {
          margin-left: 0; }
      .export-prototype-section .export-prototype-media .export-prototype-video-left .video-block {
        margin-top: 132px;
        background-image: url("img/export prototype video.png");
        background-repeat: no-repeat; }
        @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
          .export-prototype-section .export-prototype-media .export-prototype-video-left .video-block {
            background-image: url("img/export prototype video@2x.png");
            background-size: 300px 200px; } }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .video-block .download-example-files {
          color: rgba(0, 0, 0, 0.1); }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .video-block a {
          color: rgba(0, 0, 0, 0.3); }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .video-block a:first-child {
          color: rgba(0, 0, 0, 0.45); }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .video-block a:hover {
          color: #32C3FF; }
        .export-prototype-section .export-prototype-media .export-prototype-video-left .video-block a:first-child:hover {
          color: #F5A623; }
    .export-prototype-section .export-prototype-media .export-prototype-video-right {
      float: right;
      margin-top: 43px;
      height: 320px;
      width: 540px;
      display: none;
      background-image: url("img/export prototype image.png");
      background-repeat: no-repeat; }
      @media only screen and (min-width: 960px) {
        .export-prototype-section .export-prototype-media .export-prototype-video-right {
          display: block; } }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .export-prototype-section .export-prototype-media .export-prototype-video-right {
          background-image: url("img/export prototype image@2x.png");
          background-size: 540px 320px; } }

@keyframes export-prototype-animation {
  0% {
    height: 30px;
    top: 106px; }
  20% {
    height: 30px;
    top: 106px; }
  41% {
    height: 80px;
    top: 142px; }
  60% {
    height: 80px;
    top: 142px; }
  76% {
    height: 30px;
    top: 228px; }
  100% {
    height: 30px;
    top: 228px; } }
      .export-prototype-section .export-prototype-media .export-prototype-video-right .export-prototype-animation-item {
        width: 93px;
        height: 30px;
        position: relative;
        left: 396px;
        border-radius: 3px;
        background: #F5A623;
        animation-name: export-prototype-animation;
        animation-duration: 3.2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(0.4, 0.18, 0.45, 0.17); }
  .export-prototype-section .export-prototype-how {
    clear: both;
    padding-top: 60px;
    padding-bottom: 20px;
    width: 100%; }
    @media only screen and (min-width: 960px) {
      .export-prototype-section .export-prototype-how {
        width: 630px;
        padding-top: 140px;
        padding-bottom: 60px; } }
    .export-prototype-section .export-prototype-how h3 {
      color: #666;
      padding-top: 10px; }
      @media only screen and (min-width: 960px) {
        .export-prototype-section .export-prototype-how h3 {
          width: 400px; } }
  .export-prototype-section .export-prototype-features {
    margin-bottom: 40px; }
    @media only screen and (min-width: 960px) {
      .export-prototype-section .export-prototype-features {
        height: 300px;
        margin-bottom: 140px; } }
    .export-prototype-section .export-prototype-features .column-3 p:nth-child(2) {
      opacity: 0.6;
      padding-top: 6px; }
    .export-prototype-section .export-prototype-features .column-3 div {
      width: 300px;
      height: 200px;
      margin-top: 20px;
      background-repeat: no-repeat; }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .export-prototype-section .export-prototype-features .column-3 div {
          background-size: 300px 200px; } }
    .export-prototype-section .export-prototype-features .export-prototype-feature-1 {
      background-image: url("img/export prototype feature 1.png"); }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .export-prototype-section .export-prototype-features .export-prototype-feature-1 {
          background-image: url("img/export prototype feature 1@2x.png"); } }
    .export-prototype-section .export-prototype-features .export-prototype-feature-2 {
      background-image: url("img/export prototype feature 2.png"); }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .export-prototype-section .export-prototype-features .export-prototype-feature-2 {
          background-image: url("img/export prototype feature 2@2x.png"); } }
    .export-prototype-section .export-prototype-features .export-prototype-feature-3 {
      background-image: url("img/export prototype feature 3.png"); }
      @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
        .export-prototype-section .export-prototype-features .export-prototype-feature-3 {
          background-image: url("img/export prototype feature 3@2x.png"); } }
  .export-prototype-section .export-prototype-reimport-left {
    float: left;
    width: 300px;
    padding-top: 40px; }
    .export-prototype-section .export-prototype-reimport-left .export-prototype-new {
      color: #32C3FF; }
    .export-prototype-section .export-prototype-reimport-left .export-prototype-reimport-title {
      padding-top: 16px; }
    .export-prototype-section .export-prototype-reimport-left .export-prototype-reimport-text {
      padding-top: 6px;
      opacity: 0.4; }
    .export-prototype-section .export-prototype-reimport-left .export-prototype-reimport-block {
      margin-top: 28px;
      width: 172px;
      border-radius: 16px;
      background: #EEE;
      padding-left: 20px;
      padding-top: 16px;
      border: 1px solid rgba(0, 0, 0, 0.08); }
      .export-prototype-section .export-prototype-reimport-left .export-prototype-reimport-block p {
        opacity: 0.9;
        font-size: 16px; }
      .export-prototype-section .export-prototype-reimport-left .export-prototype-reimport-block .export-prototype-reimport-small-description {
        font-size: 13px;
        padding-top: 2px;
        padding-bottom: 16px;
        color: #999;
        opacity: 1; }
  .export-prototype-section .export-prototype-reimport-right {
    display: none;
    float: left;
    width: 280px;
    height: 180px;
    background-image: url("img/reimport.png");
    background-repeat: no-repeat; }
    @media only screen and (min-width: 960px) {
      .export-prototype-section .export-prototype-reimport-right {
        display: block;
        float: right;
        width: 630px;
        height: 400px; } }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) {
      .export-prototype-section .export-prototype-reimport-right {
        background-image: url("img/reimport@2x.png");
        background-size: 280px 180px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (min-width: 960px), only screen and (min-resolution: 124.8dpi) and (min-width: 960px), only screen and (min-resolution: 1.3dppx) and (min-width: 960px) {
    .export-prototype-section .export-prototype-reimport-right {
      background-size: 630px 400px; } }
  .export-prototype-section .export-prototype-reimport-clear {
    clear: both; }

.pro-section {
  padding-bottom: 40px;
  background: #EBEBEB;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); }
  @media only screen and (min-width: 960px) {
    .pro-section {
      padding-bottom: 100px; } }
  .pro-section .pro-left {
    float: left;
    width: 100%; }
    @media only screen and (min-width: 960px) {
      .pro-section .pro-left {
        width: 630px; } }
    .pro-section .pro-left h1 {
      padding-top: 40px; }
      @media only screen and (min-width: 960px) {
        .pro-section .pro-left h1 {
          padding-top: 100px; } }
    .pro-section .pro-left h3 {
      padding-top: 7px;
      color: #666; }
    .pro-section .pro-left .pro-features-item {
      opacity: 0.4; }
    .pro-section .pro-left .pro-features-free {
      float: left;
      width: 240px;
      padding-top: 64px; }
      .pro-section .pro-left .pro-features-free a {
        margin-left: 0;
        margin-top: 30px;
        background: rgba(0, 0, 0, 0.02);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 5px; }
      .pro-section .pro-left .pro-features-free a:hover {
        box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.16); }
    .pro-section .pro-left .pro-features-pro {
      float: left;
      width: 240px;
      padding-top: 64px; }
      .pro-section .pro-left .pro-features-pro a {
        margin-left: 0;
        margin-top: 30px;
        background: rgba(0, 0, 0, 0.02);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 5px; }
      .pro-section .pro-left .pro-features-pro a:hover {
        box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.16); }
  .pro-section .pro-right {
    float: right;
    width: 300px; }
  .pro-section .pro-clear {
    clear: both; }

footer {
  background: #EBEBEB;
  padding-top: 64px;
  padding-bottom: 72px; }
  footer .container {
    width: 90%;
    margin: auto; }
    @media only screen and (min-width: 960px) {
      footer .container {
        width: 960px; } }
    footer .container p {
      width: 80%; }
      @media only screen and (min-width: 960px) {
        footer .container p {
          width: 460px; } }
    footer .container p:first-child {
      margin-bottom: 24px;
      opacity: 0.6; }
    footer .container a {
      color: #32C3FF; }

#tutorial-video-container, #import-states-video-container, #export-prototype-video-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  display: none;
  background-color: rgba(0, 0, 0, 0.5); }

#tutorial-video {
  width: 90%;
  height: 90%;
  margin: auto;
  margin-top: 4%; }

#tutorial-video iframe {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }