/* layouts */

  /* header */

    /* fade in */
    header.fadein, #header_tickets.fadein {
       -webkit-animation: headerFadeIn 0.5s linear 1 forwards;
       animation: headerFadeIn 0.5s linear 1 forwards; 
       opacity: 0;
    }

      @keyframes headerFadeIn {
        100% { opacity: 1; } 
      }

    /* fade out */
    header.fadeout, #header_tickets.fadeout {
       -webkit-animation: headerFadeOut 0.2s linear 1 forwards;
       animation: headerFadeOut 0.2s linear 1 forwards; 
       opacity: 1;
    }

      @keyframes headerFadeOut {
        100% { opacity: 0; } 
      }  

  /* slide left */
  .layout.slideLeftIn {
      position: absolute;
      width: 100%;
      height: 100%;
      transform:translateX(100%);
      animation: layoutSlideLeftIn 0.4s forwards;
      animation-timing-function: ease-out;
  }

    @keyframes layoutSlideLeftIn {
        100% { transform:translateX(50%); }
    }


    .layout.slideLeftOut {
        position: absolute;
        width: 100%;
        height: 100%;
        transform:translateX(0%);
        animation: layoutSlideLeftOut 0.4s forwards;
        animation-delay: 0.1s;
        animation-timing-function: ease-in-out;
    }

      @keyframes layoutSlideLeftOut {
          100% { transform:translateX(-50%);}
      } 


  /* slide right */
  .layout.slideRightIn {
      position: absolute;
      width: 100%;
      height: 100%;
      transform:translateX(-50%);
      animation: layoutSlideRightIn 0.4s forwards;
      animation-timing-function: ease-in;
  }

    @keyframes layoutSlideRightIn {
        100% { transform:translateX(0%); }
    }

    .layout.slideRightPosition {
        position: absolute;
        width: 100%;
        height: 100%;
        transform:translateX(50%);
    }


    .layout.slideRightOut {
        position: absolute;
        width: 100%;
        height: 100%;
        transform:translateX(50%);
        animation: layoutSlideRightOut 0.4s forwards;
        animation-delay: 0.1s;
        animation-timing-function: ease-in-out;
    }

      @keyframes layoutSlideRightOut {
          100% { transform:translateX(100%);}
      } 


/* content */

  /* slide bottom */
  .layout.slideContentBottom {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: layoutSlideContentBottom 0.4s forwards;
      animation-timing-function: ease-out;
  }

    @keyframes layoutSlideContentBottom {
        from { transform:translateY(100%); }
        to { transform:translateY(0%); }
    }

  /* slide top */
  .layout.slideContentTop {
      position: absolute;
      width: 100%;
      height: 100%;      
      animation: layoutSlideContentTop 0.4s forwards;
      animation-timing-function: ease-out;
  }

    @keyframes layoutSlideContentTop {
        from { transform:translateY(-100%); }
        to { transform:translateY(0%); }
    }


  /* slide top */
  .layout.slideContentRight {
      position: absolute;
      top:0px;
      width: 100%;
      height: 100%;      
      animation: layoutSlideContentRight 0.4s forwards;
      animation-timing-function: ease-out;
  }

    @keyframes layoutSlideContentRight {
        from { transform:translateX(100%); }
        to { transform:translateX(0%); }
    }