tkinter-filedialog.html

<!DOCTYPE html>

<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-HCERBDV76D"></script>
  <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());

      gtag('config', 'G-HCERBDV76D');
  </script>
  <meta name="msvalidate.01" content="B0487B46A104E90209E8A3BEA24ECA0E" />
  <meta name="yandex-verification" content="f044b3a12c7918f1" />
  <!--end-->
  <meta name="description" content="pythonread.github.io is a free interactive Python tutorial for people who want to learn Python.The Complete Python Programming Course,Learning Python for Data Analysis and Visualization,Python for Beginners."/>
  <meta name="author" content="learnPython"/>
  <meta name="keywords" content="Learn Python for free,learn python for beginners,Core Python,Web frameworks,Multiprocess architecture,Serverside templating language,python tutorials,python4"/>
  <meta property="og:type" content="website" />
  <meta property="og:description" content="This Python basics free course covers basic and advanced concepts in Python.learn about data types, variables, lists, tuples, dictionaries, decision-making statements, and loops,user-defined functions, object-oriented programming, threading, and Python scripting." />
  <meta name=”geo.region” content="US-CA" />
  <meta name=”geo.placename” content="353 Jane Stanford Way, Stanford, CA 94305, United States" />
  <meta name=”geo.position” content="37.430089898615456;-122.17332683124829"/>
  <meta name=”ICBM” content="37.430089898615456, -122.17332683124829" />
  <link href='https://pythonread.github.io/?m=1' rel='alternate'/>

  <meta content="Hexo 3.9.0" name="generator" />
  <meta charset="utf-8" />
  <title>
    tkinter filedialog - Python Tutorial
  </title>
  <link href="https://pythonread.github.io/tkinter-filedialog.html?m=1" rel="canonical" />
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <meta content="#4184f3" name="theme-color" />
  <link href="/favicon.png" rel="icon" />
  <style>
    h1,
    h2 {
      padding-bottom: .3em
    }

    nav {
      justify-content: space-between
    }

    nav,
    nav a {
      color: #fff
    }

    *,
    .menu-wrapper li {
      box-sizing: border-box
    }

    .menu-wrapper a,
    a {
      text-decoration: none
    }

    .main {
      min-height: 320px
    }

    body {
      color: #404040;
      font: 300 16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-shadow: 0 0 1px rgba(50, 50, 50, .2);
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden
    }

    h1,
    h2,
    h3 {
      position: relative;
      margin-top: 1em;
      margin-bottom: 16px;
      font-weight: 700;
      line-height: 1.4
    }

    .menu-wrapper {
      position: fixed
    }

    h1 {
      font-size: 2.25em;
      line-height: 1.2
    }

    h2 {
      font-size: 1.75em;
      line-height: 1.225;
      border-bottom: 1px solid #eee
    }

    h3 {
      line-height: 1.43
    }

    a {
      color: #0063FF
    }

    .logo a {
      font-weight: 400;
      font-size: 20px;
      line-height: 56px;
      padding: 0 15px
    }

    .nav-wrapper {
      background-color: #4184f3;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26)
    }

    nav {
      height: 56px;
      display: flex;
      align-items: stretch
    }

    .menu-wrapper {
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      background-color: transparent;
      margin: 56px 0 0;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      padding: 0;
      z-index: 10
    }

    .main,
    article {
      background: #fff
    }

    .menu-wrapper ul.menus {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%
    }

    .logo {
      z-index: 999;
      display: flex;
      align-items: center;
      height: 56px;
      padding: 0
    }

    .menu-wrapper li {
      will-change: transform, opacity;
      opacity: 0;
      transform: translateY(-100px)
    }

    .menu-wrapper li a {
      font-size: 5vw;
      font-weight: 300;
      display: inline-block;
      width: 100%
    }

    .menu-wrapper a {
      color: #fff;
      padding: 15px
    }

    .nav-toggle-icon {
      display: block;
      width: 56px;
      height: 56px
    }

    .main {
      width: 100%
    }

    .container {
      margin: 0 auto
    }

    .container.content {
      margin-top: 25px
    }

    .row {
      display: flex;
      justify-content: center;
      align-items: flex-start
    }

    .main {
      flex: 3 1 auto;
      max-width: 727.5px
    }

    article {
      padding: 15px
    }

    article img {
      max-width: 100%;
      display: block;
      margin: 10px auto;
      color: #999
    }

    @media (min-width:425px) {
      .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto
      }

      .logo {
        margin: 0
      }
    }

    @media (min-width:768px) {

      .menu-wrapper,
      .menu-wrapper li {
        margin: 0;
        opacity: 1
      }

      .logo {
        padding: 15px
      }

      .nav-toggle-icon {
        display: none
      }

      .menu-wrapper {
        position: relative;
        display: flex;
        width: auto;
        height: auto;
        padding: 0;
        visibility: visible
      }

      .menu-wrapper ul.menus {
        flex-direction: row
      }

      .menu-wrapper li {
        will-change: inherit;
        transform: none
      }

      .menu-wrapper li a {
        font-size: inherit;
        font-weight: inherit;
        height: 100%
      }
    }

    @media (min-width:992px) {
      .container {
        width: 970px
      }
    }

    strong {
      font-weight: 700
    }

    .nav-indicator {
      -webkit-animation-timing-function: cubic-bezier(.55, 0, .1, 1);
      animation-timing-function: cubic-bezier(.55, 0, .1, 1);
      background: #fff;
      bottom: 0;
      height: 2px;
      opacity: 0;
      position: absolute;
      -webkit-transform-origin: 0;
      transform-origin: 0;
      -webkit-transform: scaleX(.001);
      transform: scaleX(.001);
      width: 100px
    }

    .material-hamburger {
      width: 60px;
      height: 45px;
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
      z-index: 999;
      transform: scale(.4) !important;
      position: absolute;
      right: 0;
      top: 5.5px
    }

    .material-hamburger span {
      display: block;
      position: absolute;
      height: 4px;
      width: 100%;
      background: #fff;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0)
    }

    .material-hamburger span:nth-child(1),
    .material-hamburger span:nth-child(2) {
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center
    }

    .material-hamburger span:nth-child(1) {
      top: 0;
      transform-origin: left center
    }

    .material-hamburger span:nth-child(2) {
      top: 18px;
      transform-origin: left center
    }

    .material-hamburger span:nth-child(3) {
      top: 36px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center
    }

    .nav-toggle-icon {
      overflow: hidden
    }

    .nav-toggle-icon:before {
      content: "";
      z-index: 9;
      position: absolute;
      top: 2px;
      right: 0;
      width: 40px;
      height: 40px;
      background: #4184f3;
      border-radius: 50%;
      transform-origin: center 70%;
      transform: scale(1)
    }
  </style>
 
  <style>
    .highlight.sh::before {
      content: "Shell";
      background-color: #ECEFF1 !important;
      color: #90A4AE
    }

    .highlight::before {
      font-size: 1rem;
      color: #fff;
      display: block;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      background: #999;
      padding: 0;
      text-indent: 1em;
      background: #ccc;
      padding: 0;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      margin-top: 0
    }

    .highlight {
      margin-bottom: 1.125rem;
      position: relative
    }

    section.post-content .highlight pre,
    section.post-content pre {
      margin-top: 0
    }

    .entry .gist {
      background: #eee;
      border: 1px solid color-border;
      margin-top: 15px;
      padding: 7px 15px;
      border-radius: 2px;
      text-shadow: 0 0 1px #fff;
      line-height: 1.6;
      overflow: auto;
      color: #666
    }

    .entry .gist .gist-file {
      border: none;
      font-family: inherit;
      margin: 0;
      font-size: 0.9em
    }

    .entry .gist .gist-file .gist-data {
      background: none;
      border-bottom: none
    }

    .entry .gist .gist-file .gist-data pre {
      padding: 0 !important;
      font-family: font-mono
    }

    .entry .gist .gist-file .gist-meta {
      background: none;
      color: color-meta;
      margin-top: 5px;
      padding: 0;
      text-shadow: 0 0 1px #fff;
      font-size: 100%
    }

    .entry .gist .gist-file .gist-meta a {
      color: color-link
    }

    .entry .gist .gist-file .gist-meta a:visited {
      color: color-link
    }

    figure.highlight {
      background: #fafafa;
      text-shadow: 0 0 1px #fff;
      line-height: 1.6;
      overflow: auto;
      position: relative;
      font-size: 0.9em;
      margin: 15px -15px;
      padding: 5px 0;
      border-left: 4px solid #CBC8C8
    }

    figure.highlight figcaption {
      color: color-meta;
      margin-bottom: 5px;
      text-shadow: 0 0 1px #fff
    }

    figure.highlight figcaption a {
      position: absolute;
      right: 15px
    }

    figure.highlight pre {
      border: none;
      padding: 0;
      margin: 0
    }

    figure.highlight table {
      margin-top: 0;
      border-spacing: 0
    }

    figure.highlight .gutter {
      color: color-meta;
      padding-right: 15px;
      border-right: 1px solid color-border;
      text-align: right;
      display: none
    }

    figure.highlight .code {
      padding-left: 15px;
      border-left: 1px solid #eee;
      color: #666
    }

    figure.highlight .line {
      height: 20px
    }

    pre .comment,
    pre .diff .header,
    pre .doctype,
    pre .javadoc,
    pre .lisp .string,
    pre .pi,
    pre .template_comment {
      color: #93a1a1;
      font-style: italic
    }

    pre .addition,
    pre .css .tag,
    pre .keyword,
    pre .method,
    pre .nginx .title,
    pre .request,
    pre .status,
    pre .winutils {
      color: #859900
    }

    pre .command,
    pre .hexcolor,
    pre .number,
    pre .phpdoc,
    pre .regexp,
    pre .string,
    pre .tag .value,
    pre .tex .formula {
      color: #2aa198
    }

    pre .built_in,
    pre .chunk,
    pre .decorator,
    pre .id,
    pre .identifier,
    pre .literal,
    pre .localvars,
    pre .title,
    pre .vhdl {
      color: #268bd2
    }

    pre .attribute,
    pre .class .title,
    pre .constant,
    pre .haskell .type,
    pre .lisp .body,
    pre .parent,
    pre .smalltalk .number,
    pre .variable {
      color: #b58900
    }

    pre .attr_selector,
    pre .cdata,
    pre .clojure .title,
    pre .diff .change,
    pre .important,
    pre .preprocessor,
    pre .preprocessor .keyword,
    pre .shebang,
    pre .special,
    pre .subst,
    pre .symbol,
    pre .symbol .string {
      color: #cb4b16
    }

    pre .deletion {
      color: #dc322f
    }

    @charset"UTF-8";

    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both
    }

    .animated.infinite {
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite
    }

    .animated.hinge {
      -webkit-animation-duration: 2s;
      animation-duration: 2s
    }

    .animated.bounceIn,
    .animated.bounceOut,
    .animated.flipOutX,
    .animated.flipOutY {
      -webkit-animation-duration: 0.75s;
      animation-duration: 0.75s
    }

    @-webkit-keyframes bounce {

      20%,
      53%,
      80%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      40%,
      43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
      }

      70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
      }

      90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
      }
    }

    @keyframes bounce {

      20%,
      53%,
      80%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      40%,
      43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
      }

      70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
      }

      90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
      }
    }

    .bounce {
      -webkit-animation-name: bounce;
      animation-name: bounce;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom
    }

    @-webkit-keyframes flash {

      50%,
      from,
      to {
        opacity: 1
      }

      25%,
      75% {
        opacity: 0
      }
    }

    @keyframes flash {

      50%,
      from,
      to {
        opacity: 1
      }

      25%,
      75% {
        opacity: 0
      }
    }

    .flash {
      -webkit-animation-name: flash;
      animation-name: flash
    }

    @-webkit-keyframes pulse {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    @keyframes pulse {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse
    }

    @-webkit-keyframes rubberBand {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
      }

      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
      }

      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
      }

      65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
      }

      75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    @keyframes rubberBand {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
      }

      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
      }

      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
      }

      65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
      }

      75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    .rubberBand {
      -webkit-animation-name: rubberBand;
      animation-name: rubberBand
    }

    @-webkit-keyframes shake {

      from,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      10%,
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
      }

      20%,
      40%,
      60%,
      80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
      }
    }

    @keyframes shake {

      from,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      10%,
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
      }

      20%,
      40%,
      60%,
      80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
      }
    }

    .shake {
      -webkit-animation-name: shake;
      animation-name: shake
    }

    @-webkit-keyframes headShake {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
      }

      6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
      }

      18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
      }

      31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
      }

      43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
      }

      50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
      }
    }

    @keyframes headShake {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
      }

      6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
      }

      18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
      }

      31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
      }

      43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
      }

      50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
      }
    }

    .headShake {
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-name: headShake;
      animation-name: headShake
    }

    @-webkit-keyframes swing {
      20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
      }

      40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
      }

      60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
      }

      80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
      }

      to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
      }
    }

    @keyframes swing {
      20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
      }

      40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
      }

      60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
      }

      80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
      }

      to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
      }
    }

    .swing {
      -webkit-transform-origin: top center;
      transform-origin: top center;
      -webkit-animation-name: swing;
      animation-name: swing
    }

    @-webkit-keyframes tada {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      10%,
      20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }

      30%,
      50%,
      70%,
      90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
      }

      40%,
      60%,
      80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    @keyframes tada {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      10%,
      20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }

      30%,
      50%,
      70%,
      90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
      }

      40%,
      60%,
      80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    .tada {
      -webkit-animation-name: tada;
      animation-name: tada
    }

    @-webkit-keyframes wobble {
      from {
        -webkit-transform: none;
        transform: none
      }

      15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
      }

      30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
      }

      45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
      }

      60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
      }

      75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes wobble {
      from {
        -webkit-transform: none;
        transform: none
      }

      15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
      }

      30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
      }

      45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
      }

      60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
      }

      75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    .wobble {
      -webkit-animation-name: wobble;
      animation-name: wobble
    }

    @-webkit-keyframes jello {

      11.1%,
      from,
      to {
        -webkit-transform: none;
        transform: none
      }

      22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
      }

      33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
      }

      44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
      }

      55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
      }

      66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
      }

      77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg)
      }

      88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
      }
    }

    @keyframes jello {

      11.1%,
      from,
      to {
        -webkit-transform: none;
        transform: none
      }

      22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
      }

      33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
      }

      44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
      }

      55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
      }

      66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
      }

      77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg)
      }

      88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
      }
    }

    .jello {
      -webkit-animation-name: jello;
      animation-name: jello;
      -webkit-transform-origin: center;
      transform-origin: center
    }

    @-webkit-keyframes bounceIn {

      20%,
      40%,
      60%,
      80%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }

      20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
      }

      40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
      }

      80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
      }

      to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    @keyframes bounceIn {

      20%,
      40%,
      60%,
      80%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }

      20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
      }

      40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
      }

      80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
      }

      to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    .bounceIn {
      -webkit-animation-name: bounceIn;
      animation-name: bounceIn
    }

    @-webkit-keyframes bounceInDown {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
      }

      75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
      }

      90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes bounceInDown {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
      }

      75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
      }

      90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    .bounceInDown {
      -webkit-animation-name: bounceInDown;
      animation-name: bounceInDown
    }

    @-webkit-keyframes bounceInLeft {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
      }

      75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
      }

      90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes bounceInLeft {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
      }

      75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
      }

      90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    .bounceInLeft {
      -webkit-animation-name: bounceInLeft;
      animation-name: bounceInLeft
    }

    @-webkit-keyframes bounceInRight {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
      }

      75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
      }

      90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes bounceInRight {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
      }

      75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
      }

      90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
      }

      to {
        -webkit-transform: none;
        transform: none
      }
    }

    .bounceInRight {
      -webkit-animation-name: bounceInRight;
      animation-name: bounceInRight
    }

    @-webkit-keyframes bounceInUp {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
      }

      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
      }

      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes bounceInUp {

      60%,
      75%,
      90%,
      from,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
      }

      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
      }

      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    .bounceInUp {
      -webkit-animation-name: bounceInUp;
      animation-name: bounceInUp
    }

    @-webkit-keyframes bounceOut {
      20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
      }

      50%,
      55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
      }

      to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }
    }

    @keyframes bounceOut {
      20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
      }

      50%,
      55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
      }

      to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }
    }

    .bounceOut {
      -webkit-animation-name: bounceOut;
      animation-name: bounceOut
    }

    @-webkit-keyframes bounceOutDown {
      20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
      }

      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
      }
    }

    @keyframes bounceOutDown {
      20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
      }

      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
      }
    }

    .bounceOutDown {
      -webkit-animation-name: bounceOutDown;
      animation-name: bounceOutDown
    }

    @-webkit-keyframes bounceOutLeft {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
      }
    }

    @keyframes bounceOutLeft {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
      }
    }

    .bounceOutLeft {
      -webkit-animation-name: bounceOutLeft;
      animation-name: bounceOutLeft
    }

    @-webkit-keyframes bounceOutRight {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
      }
    }

    @keyframes bounceOutRight {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
      }
    }

    .bounceOutRight {
      -webkit-animation-name: bounceOutRight;
      animation-name: bounceOutRight
    }

    @-webkit-keyframes bounceOutUp {
      20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
      }

      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
      }
    }

    @keyframes bounceOutUp {
      20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
      }

      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
      }
    }

    .bounceOutUp {
      -webkit-animation-name: bounceOutUp;
      animation-name: bounceOutUp
    }

    @-webkit-keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn
    }

    @-webkit-keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown
    }

    @-webkit-keyframes fadeInDownBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInDownBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInDownBig {
      -webkit-animation-name: fadeInDownBig;
      animation-name: fadeInDownBig
    }

    @-webkit-keyframes fadeInLeft {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInLeft {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInLeft {
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft
    }

    @-webkit-keyframes fadeInLeftBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInLeftBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInLeftBig {
      -webkit-animation-name: fadeInLeftBig;
      animation-name: fadeInLeftBig
    }

    @-webkit-keyframes fadeInRight {
      from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInRight {
      from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight
    }

    @-webkit-keyframes fadeInRightBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInRightBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInRightBig {
      -webkit-animation-name: fadeInRightBig;
      animation-name: fadeInRightBig
    }

    @-webkit-keyframes fadeInUp {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp
    }

    @-webkit-keyframes fadeInUpBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes fadeInUpBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .fadeInUpBig {
      -webkit-animation-name: fadeInUpBig;
      animation-name: fadeInUpBig
    }

    @-webkit-keyframes fadeOut {
      from {
        opacity: 1
      }

      to {
        opacity: 0
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1
      }

      to {
        opacity: 0
      }
    }

    .fadeOut {
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut
    }

    @-webkit-keyframes fadeOutDown {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
      }
    }

    @keyframes fadeOutDown {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
      }
    }

    .fadeOutDown {
      -webkit-animation-name: fadeOutDown;
      animation-name: fadeOutDown
    }

    @-webkit-keyframes fadeOutDownBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
      }
    }

    @keyframes fadeOutDownBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
      }
    }

    .fadeOutDownBig {
      -webkit-animation-name: fadeOutDownBig;
      animation-name: fadeOutDownBig
    }

    @-webkit-keyframes fadeOutLeft {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
      }
    }

    @keyframes fadeOutLeft {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
      }
    }

    .fadeOutLeft {
      -webkit-animation-name: fadeOutLeft;
      animation-name: fadeOutLeft
    }

    @-webkit-keyframes fadeOutLeftBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
      }
    }

    @keyframes fadeOutLeftBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
      }
    }

    .fadeOutLeftBig {
      -webkit-animation-name: fadeOutLeftBig;
      animation-name: fadeOutLeftBig
    }

    @-webkit-keyframes fadeOutRight {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
      }
    }

    @keyframes fadeOutRight {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
      }
    }

    .fadeOutRight {
      -webkit-animation-name: fadeOutRight;
      animation-name: fadeOutRight
    }

    @-webkit-keyframes fadeOutRightBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
      }
    }

    @keyframes fadeOutRightBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
      }
    }

    .fadeOutRightBig {
      -webkit-animation-name: fadeOutRightBig;
      animation-name: fadeOutRightBig
    }

    @-webkit-keyframes fadeOutUp {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }
    }

    @keyframes fadeOutUp {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }
    }

    .fadeOutUp {
      -webkit-animation-name: fadeOutUp;
      animation-name: fadeOutUp
    }

    @-webkit-keyframes fadeOutUpBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
      }
    }

    @keyframes fadeOutUpBig {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
      }
    }

    .fadeOutUpBig {
      -webkit-animation-name: fadeOutUpBig;
      animation-name: fadeOutUpBig
    }

    @-webkit-keyframes flip {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }
    }

    @keyframes flip {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }
    }

    .animated.flip {
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
      -webkit-animation-name: flip;
      animation-name: flip
    }

    @-webkit-keyframes flipInX {
      from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }
    }

    @keyframes flipInX {
      from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }
    }

    .flipInX {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInX;
      animation-name: flipInX
    }

    @-webkit-keyframes flipInY {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }
    }

    @keyframes flipInY {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }
    }

    .flipInY {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInY;
      animation-name: flipInY
    }

    @-webkit-keyframes flipOutX {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }

      30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
      }

      to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
      }
    }

    @keyframes flipOutX {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }

      30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
      }

      to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
      }
    }

    .flipOutX {
      -webkit-animation-name: flipOutX;
      animation-name: flipOutX;
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important
    }

    @-webkit-keyframes flipOutY {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }

      30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
      }

      to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
      }
    }

    @keyframes flipOutY {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
      }

      30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
      }

      to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
      }
    }

    .flipOutY {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipOutY;
      animation-name: flipOutY
    }

    @-webkit-keyframes lightSpeedIn {
      from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
      }

      60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
      }

      80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
      }

      to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    @keyframes lightSpeedIn {
      from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
      }

      60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
      }

      80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
      }

      to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    .lightSpeedIn {
      -webkit-animation-name: lightSpeedIn;
      animation-name: lightSpeedIn;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    @-webkit-keyframes lightSpeedOut {
      from {
        opacity: 1
      }

      to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
      }
    }

    @keyframes lightSpeedOut {
      from {
        opacity: 1
      }

      to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
      }
    }

    .lightSpeedOut {
      -webkit-animation-name: lightSpeedOut;
      animation-name: lightSpeedOut;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    @-webkit-keyframes rotateIn {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    @keyframes rotateIn {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    .rotateIn {
      -webkit-animation-name: rotateIn;
      animation-name: rotateIn
    }

    @-webkit-keyframes rotateInDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    @keyframes rotateInDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    .rotateInDownLeft {
      -webkit-animation-name: rotateInDownLeft;
      animation-name: rotateInDownLeft
    }

    @-webkit-keyframes rotateInDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    @keyframes rotateInDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    .rotateInDownRight {
      -webkit-animation-name: rotateInDownRight;
      animation-name: rotateInDownRight
    }

    @-webkit-keyframes rotateInUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    @keyframes rotateInUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    .rotateInUpLeft {
      -webkit-animation-name: rotateInUpLeft;
      animation-name: rotateInUpLeft
    }

    @-webkit-keyframes rotateInUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    @keyframes rotateInUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
      }
    }

    .rotateInUpRight {
      -webkit-animation-name: rotateInUpRight;
      animation-name: rotateInUpRight
    }

    @-webkit-keyframes rotateOut {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
      }

      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
      }
    }

    @keyframes rotateOut {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
      }

      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
      }
    }

    .rotateOut {
      -webkit-animation-name: rotateOut;
      animation-name: rotateOut
    }

    @-webkit-keyframes rotateOutDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
      }
    }

    @keyframes rotateOutDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
      }
    }

    .rotateOutDownLeft {
      -webkit-animation-name: rotateOutDownLeft;
      animation-name: rotateOutDownLeft
    }

    @-webkit-keyframes rotateOutDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
      }
    }

    @keyframes rotateOutDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
      }
    }

    .rotateOutDownRight {
      -webkit-animation-name: rotateOutDownRight;
      animation-name: rotateOutDownRight
    }

    @-webkit-keyframes rotateOutUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
      }
    }

    @keyframes rotateOutUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
      }
    }

    .rotateOutUpLeft {
      -webkit-animation-name: rotateOutUpLeft;
      animation-name: rotateOutUpLeft
    }

    @-webkit-keyframes rotateOutUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
      }
    }

    @keyframes rotateOutUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
      }

      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
      }
    }

    .rotateOutUpRight {
      -webkit-animation-name: rotateOutUpRight;
      animation-name: rotateOutUpRight
    }

    @-webkit-keyframes hinge {
      0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
      }

      20%,
      60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
      }

      40%,
      80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
      }

      to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
      }
    }

    @keyframes hinge {
      0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
      }

      20%,
      60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
      }

      40%,
      80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
      }

      to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
      }
    }

    .hinge {
      -webkit-animation-name: hinge;
      animation-name: hinge
    }

    @-webkit-keyframes rollIn {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    @keyframes rollIn {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
      }
    }

    .rollIn {
      -webkit-animation-name: rollIn;
      animation-name: rollIn
    }

    @-webkit-keyframes rollOut {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
      }
    }

    @keyframes rollOut {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
      }
    }

    .rollOut {
      -webkit-animation-name: rollOut;
      animation-name: rollOut
    }

    @-webkit-keyframes zoomIn {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }

      50% {
        opacity: 1
      }
    }

    @keyframes zoomIn {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }

      50% {
        opacity: 1
      }
    }

    .zoomIn {
      -webkit-animation-name: zoomIn;
      animation-name: zoomIn
    }

    @-webkit-keyframes zoomInDown {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    @keyframes zoomInDown {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    .zoomInDown {
      -webkit-animation-name: zoomInDown;
      animation-name: zoomInDown
    }

    @-webkit-keyframes zoomInLeft {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    @keyframes zoomInLeft {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    .zoomInLeft {
      -webkit-animation-name: zoomInLeft;
      animation-name: zoomInLeft
    }

    @-webkit-keyframes zoomInRight {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    @keyframes zoomInRight {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    .zoomInRight {
      -webkit-animation-name: zoomInRight;
      animation-name: zoomInRight
    }

    @-webkit-keyframes zoomInUp {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    @keyframes zoomInUp {
      from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    .zoomInUp {
      -webkit-animation-name: zoomInUp;
      animation-name: zoomInUp
    }

    @-webkit-keyframes zoomOut {
      from {
        opacity: 1
      }

      50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }

      to {
        opacity: 0
      }
    }

    @keyframes zoomOut {
      from {
        opacity: 1
      }

      50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
      }

      to {
        opacity: 0
      }
    }

    .zoomOut {
      -webkit-animation-name: zoomOut;
      animation-name: zoomOut
    }

    @-webkit-keyframes zoomOutDown {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    @keyframes zoomOutDown {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    .zoomOutDown {
      -webkit-animation-name: zoomOutDown;
      animation-name: zoomOutDown
    }

    @-webkit-keyframes zoomOutLeft {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
      }
    }

    @keyframes zoomOutLeft {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
      }
    }

    .zoomOutLeft {
      -webkit-animation-name: zoomOutLeft;
      animation-name: zoomOutLeft
    }

    @-webkit-keyframes zoomOutRight {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
      }
    }

    @keyframes zoomOutRight {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
      }

      to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
      }
    }

    .zoomOutRight {
      -webkit-animation-name: zoomOutRight;
      animation-name: zoomOutRight
    }

    @-webkit-keyframes zoomOutUp {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    @keyframes zoomOutUp {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
      }

      to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
      }
    }

    .zoomOutUp {
      -webkit-animation-name: zoomOutUp;
      animation-name: zoomOutUp
    }

    @-webkit-keyframes slideInDown {
      from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes slideInDown {
      from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    .slideInDown {
      -webkit-animation-name: slideInDown;
      animation-name: slideInDown
    }

    @-webkit-keyframes slideInLeft {
      from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes slideInLeft {
      from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    .slideInLeft {
      -webkit-animation-name: slideInLeft;
      animation-name: slideInLeft
    }

    @-webkit-keyframes slideInRight {
      from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes slideInRight {
      from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    .slideInRight {
      -webkit-animation-name: slideInRight;
      animation-name: slideInRight
    }

    @-webkit-keyframes slideInUp {
      from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes slideInUp {
      from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }
    }

    .slideInUp {
      -webkit-animation-name: slideInUp;
      animation-name: slideInUp
    }

    @-webkit-keyframes slideOutDown {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
      }
    }

    @keyframes slideOutDown {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
      }
    }

    .slideOutDown {
      -webkit-animation-name: slideOutDown;
      animation-name: slideOutDown
    }

    @-webkit-keyframes slideOutLeft {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
      }
    }

    @keyframes slideOutLeft {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
      }
    }

    .slideOutLeft {
      -webkit-animation-name: slideOutLeft;
      animation-name: slideOutLeft
    }

    @-webkit-keyframes slideOutRight {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
      }
    }

    @keyframes slideOutRight {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
      }
    }

    .slideOutRight {
      -webkit-animation-name: slideOutRight;
      animation-name: slideOutRight
    }

    @-webkit-keyframes slideOutUp {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }
    }

    @keyframes slideOutUp {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      }

      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }
    }

    .slideOutUp {
      -webkit-animation-name: slideOutUp;
      animation-name: slideOutUp
    }

    .tocify {
      max-height: 90%;
      overflow: auto;
      position: fixed;
      webkit-border-radius: 6px;
      moz-border-radius: 6px;
      border-radius: 6px
    }

    .tocify li,
    .tocify ul {
      list-style: none;
      margin: 0;
      padding: 0;
      border: none;
      line-height: 30px
    }

    .tocify-header {
      text-indent: 10px
    }

    .tocify-subheader {
      text-indent: 20px;
      display: none
    }

    .tocify-subheader li {
      font-size: 12px
    }

    .tocify-subheader .tocify-subheader {
      text-indent: 30px
    }

    .tocify-subheader .tocify-subheader .tocify-subheader {
      text-indent: 40px
    }

    .nav-list .nav-header,
    .nav-list>li>a {
      margin: 0
    }

    .nav-list>li>a {
      padding: 5px
    }

    .tocify-focus {
      font-weight: bold
    }

    .material-hamburger {
      width: 60px;
      height: 45px;
      position: relative;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.5s ease-in-out;
      -moz-transition: 0.5s ease-in-out;
      -o-transition: 0.5s ease-in-out;
      transition: 0.5s ease-in-out;
      cursor: pointer;
      z-index: 999;
      transform: scale(.4) !important;
      position: absolute;
      right: 0;
      top: 5.5px
    }

    .material-hamburger span {
      display: block;
      position: absolute;
      height: 4px;
      width: 100%;
      background: #fff;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.25s ease-in-out;
      -moz-transition: 0.25s ease-in-out;
      -o-transition: 0.25s ease-in-out;
      transition: 0.25s ease-in-out
    }

    .material-hamburger span:nth-child(1) {
      top: 0;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center
    }

    .material-hamburger span:nth-child(2) {
      top: 18px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center
    }

    .material-hamburger span:nth-child(3) {
      top: 36px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center
    }

    .material-hamburger.opened span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: -3px;
      left: 8px
    }

    .material-hamburger.opened span:nth-child(2) {
      width: 0;
      opacity: 0
    }

    .material-hamburger.opened span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 39px;
      left: 8px
    }

    .nav-toggle-icon {
      overflow: hidden
    }

    .nav-toggle-icon.active {
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 9
    }

    .nav-toggle-icon.active:before {
      transform: scale(75)
    }

    @media (min-height: 737px) {
      .nav-toggle-icon.active:before {
        transform: scale(90)
      }
    }

    .nav-toggle-icon:before {
      content: "";
      z-index: 9;
      position: absolute;
      top: 2px;
      right: 0;
      width: 40px;
      height: 40px;
      background: #4184f3;
      border-radius: 50%;
      cursor: pointer;
      transform-origin: center 70%;
      transform: scale(1);
      transition: all 0.5s ease-out
    }

    .menu-wrapper.active ul.menus li {
      transform: translateY(0);
      opacity: 1
    }

    .menu-wrapper ul.menus li:nth-child(1) {
      transition-delay: 0.1s
    }

    .menu-wrapper ul.menus li:nth-child(2) {
      transition-delay: 0.15s
    }

    .menu-wrapper ul.menus li:nth-child(3) {
      transition-delay: 0.2s
    }

    .menu-wrapper ul.menus li:nth-child(4) {
      transition-delay: 0.25s
    }

    .menu-wrapper ul.menus li:nth-child(5) {
      transition-delay: 0.3s
    }

    .nav-indicator {
      -webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
      animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
      background: #fff;
      bottom: 0;
      height: 2px;
      opacity: 0;
      position: absolute;
      -webkit-transform-origin: 0;
      transform-origin: 0;
      -webkit-transform: scaleX(0.001);
      transform: scaleX(0.001);
      width: 100px
    }

    .animate-indicator {
      opacity: 1;
      transition: -webkit-transform 0.2s;
      transition: transform 0.2s
    }

    header [role="progressbar"][aria-busy="true"] {
      position: fixed;
      bottom: 0;
      left: 0;
      padding-top: 4px;
      width: 100%;
      z-index: 999;
      background-color: #159756;
      -webkit-animation: preloader-background linear 3.5s infinite;
      animation: preloader-background linear 3.5s infinite
    }

    header [role="progressbar"][aria-busy="true"]::before,
    header [role="progressbar"][aria-busy="true"]::after {
      display: block;
      position: absolute;
      top: 0;
      z-index: 2;
      width: 0;
      height: 4px;
      background: #afa;
      -webkit-animation: preloader-front linear 3.5s infinite;
      animation: preloader-front linear 3.5s infinite;
      content: ''
    }

    header [role="progressbar"][aria-busy="true"]::before {
      right: 50%
    }

    header [role="progressbar"][aria-busy="true"]::after {
      left: 50%
    }

    @-webkit-keyframes preloader-background {

      0%,
      24.9% {
        background-color: #159756
      }

      25%,
      49.9% {
        background-color: #da4733
      }

      50%,
      74.9% {
        background-color: #3b78e7
      }

      100%,
      75% {
        background-color: #fdba2c
      }
    }

    @keyframes preloader-background {

      0%,
      24.9% {
        background-color: #159756
      }

      25%,
      49.9% {
        background-color: #da4733
      }

      50%,
      74.9% {
        background-color: #3b78e7
      }

      100%,
      75% {
        background-color: #fdba2c
      }
    }

    @-webkit-keyframes preloader-front {
      0% {
        width: 0;
        background-color: #da4733
      }

      24.9% {
        width: 50%;
        background-color: #da4733
      }

      25% {
        width: 0;
        background-color: #3b78e7
      }

      49.9% {
        width: 50%;
        background-color: #3b78e7
      }

      50% {
        width: 0;
        background-color: #fdba2c
      }

      74.9% {
        width: 50%;
        background-color: #fdba2c
      }

      75% {
        width: 0;
        background-color: #159756
      }

      100% {
        width: 50%;
        background-color: #159756
      }
    }

    @keyframes preloader-front {
      0% {
        width: 0;
        background-color: #da4733
      }

      24.9% {
        width: 50%;
        background-color: #da4733
      }

      25% {
        width: 0;
        background-color: #3b78e7
      }

      49.9% {
        width: 50%;
        background-color: #3b78e7
      }

      50% {
        width: 0;
        background-color: #fdba2c
      }

      74.9% {
        width: 50%;
        background-color: #fdba2c
      }

      75% {
        width: 0;
        background-color: #159756
      }

      100% {
        width: 50%;
        background-color: #159756
      }
    }

    section.post-content pre>code {
      padding: 0;
      margin: 0;
      font-size: 100%;
      white-space: pre;
      background: transparent;
      border: 0
    }

    section.post-content .highlight pre,
    section.post-content pre {
      padding: 16px;
      overflow: auto;
      font-size: 100%;
      line-height: 1.45;
      background-color: #fafafa;
      border: 0;
      border-radius: 3px
    }

    section.post-content pre {
      word-wrap: normal
    }

    section.post-content pre code {
      display: inline;
      max-width: initial;
      padding: 0;
      margin: 0;
      overflow: initial;
      line-height: inherit;
      word-wrap: normal;
      background-color: transparent;
      border: 0
    }

    section.post-content pre code:after,
    section.post-content pre code:before {
      content: normal
    }

    section.post-content pre .token.operator {
      background: transparent
    }

    .language-css .token.string,
    .style .token.string,
    .token.entity,
    .token.operator,
    .token.url {
      background: transparent
    }

    section.post-content pre[class*="language-"] {
      border-radius: 0;
      background: #f7f7f7;
      position: relative;
      font-size: 0.9em;
      margin: 15px -15px;
      padding: 15px;
      border-left: 4px solid #CBC8C8
    }

    @media (min-width: 425px) {
      section.post-content pre[class*="language-"] {
        margin: 15px 0
      }
    }

    .m-scene .scene_element {
      -webkit-animation-duration: 0.25s;
      animation-duration: 0.25s;
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both
    }

    .m-scene .scene_element--fadein {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn
    }

    .m-scene .scene_element--fadeinup {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp
    }

    .m-scene .scene_element--fadeinright {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight
    }

    .m-scene .scene_element--delayed {
      -webkit-animation-delay: 0.25s;
      animation-delay: 0.25s
    }

    .m-scene.is-exiting .scene_element {
      -webkit-animation-direction: alternate-reverse;
      animation-direction: alternate-reverse
    }

    .m-scene.is-exiting .scene_element--delayed {
      -webkit-animation-delay: 0s;
      animation-delay: 0s
    }

    .m-scene.is-exiting .scene_element--noexiting {
      -webkit-animation-direction: alternate-reverse;
      animation-direction: alternate-reverse
    }

    @media screen and (min-width: 768px) {
      .m-scene .scene_element--fadeinright-wide {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight
      }
    }

    .waves-effect {
      position: relative;
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent
    }

    .waves-effect .waves-ripple {
      position: absolute;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      margin-top: -50px;
      margin-left: -50px;
      opacity: 0;
      background: rgba(0, 0, 0, .2);
      background: -webkit-radial-gradient(rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .5) 60%, rgba(255, 255, 255, 0) 70%);
      background: -o-radial-gradient(rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .5) 60%, rgba(255, 255, 255, 0) 70%);
      background: -moz-radial-gradient(rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .5) 60%, rgba(255, 255, 255, 0) 70%);
      background: radial-gradient(rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .5) 60%, rgba(255, 255, 255, 0) 70%);
      -webkit-transition: all 0.5s ease-out;
      -moz-transition: all 0.5s ease-out;
      -o-transition: all 0.5s ease-out;
      transition: all 0.5s ease-out;
      -webkit-transition-property: -webkit-transform, opacity;
      -moz-transition-property: -moz-transform, opacity;
      -o-transition-property: -o-transform, opacity;
      transition-property: transform, opacity;
      -webkit-transform: scale(0) translate(0, 0);
      -moz-transform: scale(0) translate(0, 0);
      -ms-transform: scale(0) translate(0, 0);
      -o-transform: scale(0) translate(0, 0);
      transform: scale(0) translate(0, 0);
      pointer-events: none
    }

    .waves-effect.waves-light .waves-ripple {
      background: rgba(255, 255, 255, .4);
      background: -webkit-radial-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 70%);
      background: -o-radial-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 70%);
      background: -moz-radial-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 70%);
      background: radial-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 70%)
    }

    .waves-effect.waves-classic .waves-ripple {
      background: rgba(0, 0, 0, .2)
    }

    .waves-effect.waves-classic.waves-light .waves-ripple {
      background: rgba(255, 255, 255, .4)
    }

    .waves-notransition {
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -o-transition: none !important;
      transition: none !important
    }

    .waves-button,
    .waves-circle {
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%)
    }

    .waves-button,
    .waves-button-input,
    .waves-button:hover,
    .waves-button:visited {
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      border: none;
      outline: 0;
      color: inherit;
      background-color: transparent;
      font-size: 1em;
      line-height: 1em;
      text-align: center;
      text-decoration: none;
      z-index: 1
    }

    .waves-button {
      padding: 0.85em 1.1em;
      border-radius: 0.2em
    }

    .waves-button-input {
      margin: 0;
      padding: 0.85em 1.1em
    }

    .waves-input-wrapper {
      border-radius: 0.2em;
      vertical-align: bottom
    }

    .waves-input-wrapper.waves-button {
      padding: 0
    }

    .waves-input-wrapper .waves-button-input {
      position: relative;
      top: 0;
      left: 0;
      z-index: 1
    }

    .waves-circle {
      text-align: center;
      width: 2.5em;
      height: 2.5em;
      line-height: 2.5em;
      border-radius: 50%
    }

    .waves-float {
      -webkit-mask-image: none;
      -webkit-box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12);
      box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12);
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms
    }

    .waves-float:active {
      -webkit-box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3);
      box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3)
    }

    .waves-block {
      display: block
    }

    b {
      font-weight: bold
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent
    }

    body {
      color: #404040;
      font: 300 18px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-shadow: 0 0 1px rgba(50, 50, 50, 0.2);
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden
    }

    body.nav-active {
      overflow: hidden
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      position: relative;
      margin-top: 1em;
      margin-bottom: 16px;
      font-weight: bold;
      line-height: 1.4
    }

    h1 {
      padding-bottom: 0.3em;
      font-size: 2.25em;
      line-height: 1.2
    }

    h2 {
      padding-bottom: 0.3em;
      font-size: 1.75em;
      line-height: 1.225;
      border-bottom: 1px solid #eee
    }

    h3 {
      line-height: 1.43
    }

    h4 {
      font-size: 1.25em
    }

    h5 {
      font-size: 1em
    }

    h6 {
      font-size: 1em;
      color: #777
    }

    .wrapper {
      max-width: 1200px;
      margin: auto
    }

    a {
      color: #0063FF;
      text-decoration: none
    }

    .fixed {
      position: fixed
    }

    .logo {}

    .logo a {
      font-weight: 400;
      font-size: 20px;
      line-height: 56px;
      padding: 0 15px
    }

    .btn {
      cursor: pointer
    }

    .nav-wrapper {
      background-color: #4184f3;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)
    }

    nav {
      color: #fff;
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: stretch
    }

    nav a {
      color: #fff
    }

    .image-caption {
      text-align: center;
      display: block;
      margin: 10px;
      color: rgba(0, 0, 0, .54);
      font-size: 0.8em
    }

    .menu-wrapper {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      background-color: transparent;
      margin: 0;
      padding: 56px 0 0;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      padding: 0;
      margin-top: 56px;
      transition: all 0.5s;
      z-index: 10
    }

    .menu-wrapper.active {
      opacity: 1;
      visibility: visible
    }

    .menu-wrapper ul.menus {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%
    }

    .logo {
      z-index: 999;
      display: flex;
      align-items: center;
      height: 56px;
      padding: 0
    }

    .menu-wrapper li {
      will-change: transform, opacity;
      opacity: 0;
      box-sizing: border-box;
      transform: translateY(-100px);
      transition: all 0.3s ease-out
    }

    .menu-wrapper li a {
      font-size: 5vw;
      font-weight: 300;
      display: inline-block;
      width: 100%;
      transition: background 0.4s ease-out
    }

    .menu-wrapper li a:hover {}

    .menu-wrapper a {
      text-decoration: none;
      color: #fff;
      padding: 15px
    }

    .nav-toggle-icon {
      display: block;
      width: 56px;
      height: 56px
    }

    .container {
      margin: 0 auto
    }

    .container.content {
      margin-top: 25px
    }

    .row {
      display: flex;
      justify-content: center;
      align-items: flex-start
    }

    .main {
      background: #fff;
      flex: 3 1 auto;
      min-height: 320px;
      max-width: 727.5px;
      width: 100%
    }

    .title-list {
      min-height: 320px
    }

    .title-list section {
      padding: 5px 0
    }

    aside {
      flex: 1 1 auto;
      min-height: 50px;
      min-width: 150px;
      max-width: 242.5px;
      padding: 15px;
      display: none
    }

    .tocify li,
    .tocify ul {
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    article {
      background: #fff;
      padding: 15px
    }

    article iframe {
      width: 100%
    }

    article img {
      max-width: 100%;
      display: block;
      margin: 10px auto;
      color: #999;
      cursor: pointer
    }

    article code,
    article tt {
      padding: 0.1em 0.2em;
      margin: 0 5px;
      background-color: rgba(0, 0, 0, .04);
      border-radius: 3px
    }

    article blockquote {
      padding: 0 15px;
      color: #777;
      border-left: 4px solid #CBC8C8;
      margin: 0 -15px
    }

    article hr {
      height: 4px;
      padding: 0;
      margin: 16px 0;
      background-color: #e7e7e7;
      border: 0 none
    }

    figure.highlight .gutter {
      padding: 0 5px
    }

    .post-header {}

    .post-header.with-cover {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      padding-bottom: 45%;
      background-color: #4184f3;
      display: block
    }

    .post-header .post-title {
      margin: 0;
      width: 100%
    }

    .post-header.with-cover {
      background-color: #4184f3
    }

    .post-header.with-cover .post-title {
      color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      padding-top: 20px;
      padding-bottom: 10px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4a000000', GradientType=0)
    }

    .post-header.with-cover .post-title span {
      color: #fff;
      padding: 0 10px
    }

    .post-header .post-title span {
      color: #404040;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-bottom: 0
    }

    .post-abstract {
      padding: 10px 0
    }

    .post-info {
      justify-content: space-between;
      align-items: center
    }

    .post-date {
      color: rgba(0, 0, 0, 0.54)
    }

    .read-more {
      float: right
    }

    ul.post-tag-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block
    }

    ul.post-tag-list li.post-tag-list-item {
      display: inline-block
    }

    ul.post-tag-list li.post-tag-list-item a {
      padding: 5px
    }

    ul.post-tag-list li.post-tag-list-item a::before {
      content: "#"
    }

    .post-abstract,
    .post-content {
      word-break: break-word
    }

    article blockquote ol,
    article blockquote ul {
      padding-left: 20px
    }

    #toc * {}

    #toc.tocify {
      border-radius: 0
    }

    .tocify li a {
      color: rgba(0, 0, 0, 0.54)
    }

    .tocify li {
      border-left: 2px solid transparent
    }

    .tocify li.tocify-focus {
      border-left: 2px solid #0063FF
    }

    .tocify li.tocify-focus a {
      color: #0063FF
    }

    .pager {
      display: flex;
      justify-content: space-between
    }

    .pager .pager-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 50%
    }

    .pager .post-nav-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .pager .post-prev {
      text-align: left;
      margin-right: auto
    }

    .pager .post-next {
      text-align: right;
      margin-left: auto
    }

    .pagination {
      display: flex;
      justify-content: center;
      height: 46px
    }

    .pagination .page-number {
      flex: 1 1 auto;
      text-align: center
    }

    .pagination .page-number,
    .pagination a {
      display: inline-block;
      height: 100%;
      padding: 10px
    }

    figure.highlight figcaption {
      margin-left: 15px;
      display: none
    }

    @media (min-width: 425px) {
      .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto
      }

      .logo {
        margin: 0
      }

      .gist,
      .highlight,
      figure.highlight,
      pre {
        margin: 15px 0
      }

      article blockquote {
        margin: 0
      }
    }

    @media (min-width: 768px) {
      .logo {
        padding: 15px
      }

      .logo.fixed {
        position: static
      }

      .container {}

      .nav-toggle-icon {
        display: none
      }

      .menu-wrapper {
        position: relative;
        display: flex;
        width: auto;
        height: auto;
        padding: 0;
        opacity: 1;
        visibility: visible;
        margin: 0;
        transition: none
      }

      .menu-wrapper ul.menus {
        flex-direction: row
      }

      .menu-wrapper li {
        will-change: inherit;
        margin: 0;
        transform: none;
        opacity: 1;
        transition: none
      }

      .menu-wrapper li a {
        font-size: inherit;
        font-weight: inherit;
        height: 100%
      }

      figure.highlight figcaption {
        display: block
      }
    }

    @media (min-width: 992px) {
      .container {
        width: 970px
      }

      aside {
        display: block
      }
    }

    .comment-section {
      padding: 15px
    }

    .footer {
      margin: 30px 15px;
      text-align: center;
      font-size: 0.8em;
      color: rgba(0, 0, 0, 0.54)
    }

    .footer p {
      margin: 0
    }

    .footer a {
      color: rgba(0, 0, 0, 0.54)
    }

    kbd {
      font-family: monospace, monospace;
      font-size: 1em;
      display: inline-block;
      padding: 3px 5px;
      font-size: 11px;
      line-height: 10px;
      color: #555;
      vertical-align: middle;
      background-color: #fcfcfc;
      border: solid 1px #ccc;
      border-bottom-color: #bbb;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #bbb
    }

    strong {
      font-weight: bold
    }

    #toc {
      position: fixed;
      top: 96px
    }

    #toc div.h2 {
      color: #404040;
      font: 300 16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-shadow: 0 0 1px rgba(50, 50, 50, 0.2);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      text-indent: 10px;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      list-style: none;
      margin: 0;
      padding: 0;
      border: none;
      line-height: 30px;
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-left: 2px solid transparent;
      cursor: pointer
    }

    #toc div.h3 {
      font: 300 16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-shadow: 0 0 1px rgba(50, 50, 50, 0.2);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      text-indent: 20px;
      list-style: none;
      line-height: 30px;
      font-size: 12px;
      white-space: nowrap;
      cursor: pointer;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
      color: rgba(0, 0, 0, 0.54);
      text-indent: 22px
    }

    #toc div.h4 {
      display: none
    }

    #toc a {
      color: rgba(0, 0, 0, 0.54)
    }

    #toc div.h2.active a {
      color: #0063FF !important
    }

    #toc div.h3.active a {
      color: #0063FF !important
    }

    #toc div.h4.active a {
      color: #0063FF !important
    }

    #toc div.h2.active {
      border-left: 2px solid #0063FF;
      font-weight: bold
    }

    #toc div.h3.active {
      border-left: 2px solid #0063FF;
      font-weight: bold
    }

    #toc div.h4.active {
      border-left: 2px solid #0063FF;
      font-weight: bold
    }
  </style>
</head>

<body>
  <header>
    <!-- cover image or sth. -->
  </header>
  <div class="m-scene" id="main">
    <div class="nav-wrapper">
      <div class="container">
        <nav>
          <div class="logo wave">
            <a href="/" id="logo">
              Python Tutorial
            </a>
          </div>
          <div class="nav-toggle-icon" id="nav-toggle-icon" onclick="mobileMenu()">
            <div class="material-hamburger">
              <span>
              </span>
              <span>
              </span>
              <span>
              </span>
            </div>
          </div>
          <div class="menu-wrapper" id="menu-wrapper">
            <div class="nav-indicator">
            </div>
            <ul class="menus">
              <li>
                <a class="wave" href="/">
                  Home
                </a>
              </li>
              <li>
                                <a class="wave" href="/projects.html">
                                    Projects
                                </a>
                            </li>
                            <li>
                                <a class="wave" href="/free-course.html" 
                                    target="_blank">
                                    Free Course
                                </a>
                            </li>
                            <li>
                                <a class="wave" href="/dsa.html" >
                                    DSA
                                </a>
                            </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div class="container content">
      <div class="scene_element scene_element--fadein">
        <div class="row">
          <div class="main">
            <article>
              <header class="post-header">
              </header>
              <h1 class="post-title">Tkinter Filedialog</h1>
              <!--
          <section class="post-info">
            <span class="post-date">2015/07/16</span>
            
            
            <span class="post-tags">
              <ul class="post-tag-list"><li class="post-tag-list-item"><a class="post-tag-list-link" href="/tags/plot-seaborn-matplotlib/">plot, seaborn, matplotlib</a></li></ul>
            </span>
            
          </section>
          -->
              <section class="post-content">
                <p>Python Tkinter (and TK) offer a set of dialogs that you can use when working with files. By using
                  these you don't have to design standard dialogs your self. Example dialogs include an open file
                  dialog, a save file dialog and many others. Besides file dialogs there are other standard dialogs, but
                  in this article we will focus on file dialogs.</p>
                <p>File dialogs help you open, save files or directories. This is the type of dialog you get when you
                  click file,open. This dialog comes out of the module, there's no need to write all the code
                  manually.</p>
                <p>Tkinter does not have a native looking file dialog, instead it has the customer tk style. You can see
                  these below.</p>
                <p>The file dialog will work on all desktop platforms.</p>
                <p><strong>Related course:</strong> <a href="/free-course.html"
                    target="_blank">Python Desktop Apps with Tkinter </a></p>
                <h2 id="file-dialogs"><a class="headerlink" href="#file-dialogs" title="file dialogs"></a>file dialogs
                </h2>
                <h3 id="tkinter-filedialog"><a class="headerlink" href="#tkinter-filedialog"
                    title="tkinter filedialog"></a>tkinter filedialog</h3>
                <p>The tkinter filedialog comes in several types. Which type you need really depends on your
                  applications needs. All of them are methods calls.</p>
                <p>You can open a single file, a directory, save as file and much more. Each dialog made with the
                  example below is a different type of dialog.</p>
                <figure class="highlight python">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br/><span class="line">2</span><br/><span class="line">3</span><br/><span class="line">4</span><br/><span class="line">5</span><br/><span class="line">6</span><br/><span class="line">7</span><br/><span class="line">8</span><br/><span class="line">9</span><br/></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">import</span> tkinter.filedialog</span><br/><span class="line">     </span><br/><span class="line">tkinter.filedialog.asksaveasfilename()</span><br/><span class="line">tkinter.filedialog.asksaveasfile()</span><br/><span class="line">tkinter.filedialog.askopenfilename()</span><br/><span class="line">tkinter.filedialog.askopenfile()</span><br/><span class="line">tkinter.filedialog.askdirectory()</span><br/><span class="line">tkinter.filedialog.askopenfilenames()</span><br/><span class="line">tkinter.filedialog.askopenfiles()</span><br/></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p><img alt="tkinter filedialog"
                    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6uXGgZcLoclMG4chpsI9eyto0RHijojOmHUFYIGA24Ilauc9pd-kE7Vs3u8AuHoXPumdgwUEXfDR5o5nNxzkWf9uPOSyJ1Ofvb7G37mL9BMUkSt_0-NKzzMjI0zT2GSVVPIMflAC624ahq9rPXNh5q8_aJ4EbrJIQtOQP-ciaHglWhwEWQP6-Cm-/s16000/tkinter_filedialog.png" />
                </p>
                <p>You can create an open file dialog which asks for a filename, and then returns the name of the
                  selected dialog.</p>
                <figure class="highlight python">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br/><span class="line">2</span><br/><span class="line">3</span><br/><span class="line">4</span><br/><span class="line">5</span><br/><span class="line">6</span><br/><span class="line">7</span><br/><span class="line">8</span><br/><span class="line">9</span><br/><span class="line">10</span><br/><span class="line">11</span><br/></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">import</span> tkinter <span class="keyword">as</span> tk</span><br/><span class="line"><span class="keyword">from</span> tkinter <span class="keyword">import</span> filedialog <span class="keyword">as</span> fd </span><br/><span class="line"></span><br/><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">callback</span><span class="params">()</span>:</span></span><br/><span class="line">    name= fd.askopenfilename() </span><br/><span class="line">    print(name)</span><br/><span class="line">    </span><br/><span class="line">errmsg = <span class="string">'Error!'</span></span><br/><span class="line">tk.Button(text=<span class="string">'Click to Open File'</span>, </span><br/><span class="line">       command=callback).pack(fill=tk.X)</span><br/><span class="line">tk.mainloop()</span><br/></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>The appearance of the dialog is different on every operating system. It will look different on
                  Windows, Mac and Linux (gnome).<br />Other file dialogs work similar to the example shown above.</p>
                
              </section>
            </article>
            <div class="pager">
              <a class="post-prev pager-item" href="/tkinter-entry.html">
                <strong class="article-nav-caption">Back</strong>
                <p class="post-nav-title">Tkinter Entry</p>
              </a>
              <a class="post-next pager-item" href="/tkinter-frame.html">
                <strong class="article-nav-caption">Next</strong>
                <p class="post-nav-title">Tkinert Frame</p>
              </a>
            </div>
            <!-- comments -->
            <div class="comment-section">
              
            </div>
          </div>
          <aside>
            <div id="toc">
            </div>
          </aside>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer">
    <p>
        <a href="/cookie-policy.html">Cookie policy</a> |
        <a href="/privacy-policy.html">Privacy policy</a> |
        <a href="/terms-of-use.html">Terms of use</a> |
        <a href="/disclaimer.html">Disclaimer</a> |
        <a href="/about-us.html">About Us</a> 

    </p>
    <p>
        © 2023 <a href="https://pythonread.github.io">https://pythonread.github.io</a>
    </p>
</footer>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () { htmlTableOfContents() }); function htmlTableOfContents(documentRef) { var documentRef = documentRef || document; var toc = documentRef.getElementById("toc"); var headings = [].slice.call(documentRef.body.querySelectorAll('h2, h3')); headings.forEach(function (heading, index) { var ref = "toc" + index; if (heading.hasAttribute("id")) { ref = heading.getAttribute("id") } else { heading.setAttribute("id", ref) } var link = documentRef.createElement("a"); link.setAttribute("href", "#" + ref); link.textContent = heading.textContent; var div = documentRef.createElement("div"); div.setAttribute("class", heading.tagName.toLowerCase()); div.appendChild(link); toc.appendChild(div) }) } try { module.exports = htmlTableOfContents } catch (e) { } function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = (elemTop >= -10) && (elemBottom <= (window.innerHeight)); return isVisible } function highlightMenu() { var headers = document.querySelectorAll("h2, h3"); for (var i = 0; i < headers.length; i += 1) { if (isScrolledIntoView(headers[i])) { var childDivs = document.getElementById('toc').getElementsByTagName('div'); var c = childDivs[i].classList; c.add("active"); for (var j = 0; j < i; j += 1) { var c = childDivs[j].classList; c.remove("active") } for (var j = i + 1; j < childDivs.length; j += 1) { var c = childDivs[j].classList; c.remove("active") } break } } } function highlightMenuLastItem() { var childDivs = document.getElementById('toc').getElementsByTagName('div'); for (var j = 0; j < childDivs.length - 1; j += 1) { var c = childDivs[j].classList; c.remove("active") } var c = childDivs[childDivs.length - 1].classList; c.add("active") } window.addEventListener("click", function (event) { highlightMenu() }); window.onscroll = function (e) { highlightMenu(); if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { highlightMenuLastItem() } }; function mobileMenu() { var classes = document.getElementById('nav-toggle-icon').classList; if (classes.contains("active")) { classes.remove("active") } else { classes.add("active") } var classes = document.getElementById('menu-wrapper').classList; if (classes.contains("active")) { classes.remove("active") } else { classes.add("active") } }
  </script>
</body>

</html>