.win8menu .tiles {
    white-space: nowrap;
}

.win8menu .slidePageInFromLeft {
    -webkit-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 .25s normal forwards;
    -o-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 .25s normal forwards;
    animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 .25s normal forwards;
}

.win8menu .openpage {
    -webkit-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
    -o-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
    animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
}

.win8menu .slidePageBackLeft {
    opacity: 1;
    left: 0;
    -webkit-animation: slidePageBackLeft .8s ease-out 1 normal forwards;
    -o-animation: slidePageBackLeft .8s ease-out 1 normal forwards;
    animation: slidePageBackLeft .8s ease-out 1 normal forwards;
}

.win8menu .slidePageLeft {
    opacity: 1;
    -webkit-transform: rotateY(0) translateZ(0);
    -ms-transform: rotateY(0) translateZ(0);
    -o-transform: rotateY(0) translateZ(0);
    transform: rotateY(0) translateZ(0);
    -webkit-animation: slidePageLeft .8s ease-out 1 normal forwards;
    -o-animation: slidePageLeft .8s ease-out 1 normal forwards;
    animation: slidePageLeft .8s ease-out 1 normal forwards;
}

.win8menu .fadeOutback {
    -webkit-animation: fadeOutBack .3s ease-out 1 normal forwards;
    -o-animation: fadeOutBack .3s ease-out 1 normal forwards;
    animation: fadeOutBack .3s ease-out 1 normal forwards;
}

.win8menu .fadeInForward-1,.fadeInForward-2,.fadeInForward-3 {
    opacity: 0;
    -webkit-transform: translateZ(-5em) scale(0.75);
    -ms-transform: translateZ(-5em) scale(0.75);
    -o-transform: translateZ(-5em) scale(0.75);
    transform: translateZ(-5em) scale(0.75);
    -webkit-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
    -o-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
    animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
}

.win8menu .fadeInForward-2 {
    -webkit-animation-delay: .55s;
    -o-animation-delay: .55s;
    animation-delay: .55s;
}

.win8menu .fadeInForward-3 {
    -webkit-animation-delay: .7s;
    -o-animation-delay: .7s;
    animation-delay: .7s;
}

.win8menu 70%,95% {
    -webkit-transform: translateZ(-5em) scale(0.6);
    -ms-transform: translateZ(-5em) scale(0.6);
    -o-transform: translateZ(-5em) scale(0.6);
    transform: translateZ(-5em) scale(0.6);
    opacity: .5;
}

.win8menu 100% {
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    left: -150%;
    -webkit-transform: translateX(0);
    opacity: 1;
}

.win8menu 10% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

.win8menu * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.win8menu .clearfix:after,.clearfix:before {
    content: " ";
    display: table;
}

.win8menu .clearfix:after {
    clear: both;
}

.win8menu .clearfix {
    zoom: 1;
}

.win8menu ul {
    list-style-type: none;
}

.win8menu .demo-wrapper {
    width: 100%;
    height: 100%;
    -webkit-perspective: 3300px;
    -ms-perspective: 3300px;
    -o-perspective: 3300px;
    perspective: 3300px;
    position: relative;
    padding: 2em .5em;
}

.win8menu .dashboard {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    line-height: 1.5;
    font-family: Lato,sans-serif;
    font-weight: 300;
    font-size: 16px;
    background-color: #eee;
}

.win8menu .col1,.col2,.col3 {
    display: inline-block;
    width: 31%!important;
    margin: .5%!important;
}

.win8menu  ::-webkit-scrollbar {
    width: 20px;
}

.win8menu  ::-webkit-scrollbar-thumb {
    background: #fff;
}

.win8menu  ::-webkit-scrollbar-track {
    background: #ddd;
}

.win8menu  .r-page {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2em;
    font-weight: 300;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: 10;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotateY(-90deg) translateZ(5em);
    -ms-transform: rotateY(-90deg) translateZ(5em);
    -o-transform: rotateY(-90deg) translateZ(5em);
    transform: rotateY(-90deg) translateZ(5em);
    padding: 10px;
}

.win8menu  .s-page {
    font-size: 2em;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: -150%;
    text-align: center;
    font-weight: 300;
    z-index: 1;
}

.win8menu  .page-content {
    overflow-y: auto;
    max-height: 100%;
    font-size: .6em;
    text-align: left;
    padding: .6em;
}

.win8menu  .r-page,.s-page {
    background-color: #fff;
    color: #000;
}

.win8menu  .page-title {
    font-weight: 100;
    font-size: 3em;
    text-align: center;
    margin: .25em 0;
}

.win8menu  .close-button {
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    position: absolute;
    top: .75em;
    right: .75em;
    cursor: pointer;
    line-height: .8em;
    text-align: center;
}

.win8menu  .tile {
    float: left;
    font-size: 1.3em;
    text-align: center;
    height: 8em;
    font-weight: 300;
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
    color: #333;
    position: relative;
    -webkit-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
    margin: 0 auto 1%;
}

.win8menu  .tile-2xbig {
    height: 16.15em;
    width: 100%;
}

.win8menu  .tile-big {
    width: 100%;
}

.win8menu  .tile img {
    width: 100%;
    height: 70%;
}

.win8menu .tile-caption {
    position: absolute;
    z-index: 1;
    background-color: #455962;
    color: #fff;
    font-size: 1em;
    text-align: left;
    padding: 1em;
}

.win8menu .caption-bottom {
    left: 0;
    bottom: 0;
    right: 0;
    height: 40%;
}

.win8menu .caption-left {
    left: -100%;
    top: 0;
    bottom: 0;
    width: 40%;
    -webkit-transition: left .3s linear;
    -o-transition: left .3s linear;
    transition: left .3s linear;
}

.win8menu .tile:hover .caption-left {
    left: 0;
}

.win8menu .tile-small {
    width: 49%;
    margin-right: 2%;
}

.win8menu .tile-small.last {
    margin-right: 0;
}

.win8menu .tile div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    padding: 0 1em;
}

.win8menu .tile div p {
    display: table-cell;
    vertical-align: middle;
}

.win8menu .tile-1 {
    background-color: #56D9C9;
    color: #fff;
}

.win8menu .tile-2 {
    background-color: #455962;
    color: #fff;
}

.win8menu .tile-5 {
    background-color: #FCC120;
    color: #fff;
}

.win8menu .tile-5:hover {
    background-color: #fff;
    color: #FCC120;
}

.win8menu .tile-6 {
    background-color: #3EC7F3;
    color: #fff;
}

.win8menu .tile-7,.tile-8 {
    background-color: transparent;
}

.win8menu .tile-10 {
    background-color: #F0514A;
    color: #fff;
}

.win8menu .tile-10:hover {
    background-color: #fff;
    color: #F0514A;
}

.win8menu .tile-10 div {
    text-align: left;
}

.win8menu .tile-3 p {
    font-size: 4em;
    margin-top: .5em;
}

.win8menu .tile-5 p,.tile-6 p {
    font-size: 2em;
}

.win8menu .tile-5 p span,.tile-6 p span {
    font-size: 1.3em;
    margin-right: .7em;
    position: relative;
    top: .15em;
}

.win8menu .tile-6 p span {
    margin-right: 1em;
}

.win8menu .slideTextUp div:nth-child(2) {
    top: 100%;
}

.win8menu .slideTextUp:hover div {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.win8menu .tile-1 p {
    font-size: 1.3em;
}

.win8menu .slideTextRight div:first-child {
    left: -100%;
}

.win8menu .slideTextRight:hover div {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

.win8menu .slideTextLeft div:nth-child(2) {
    left: 100%;
}

.win8menu .slideTextLeft:hover div {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

.win8menu .rotate3d {
    -webkit-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    overflow: visible;
}

.win8menu .faces {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0 1s;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -o-transition: 0 1s;
    transition: transform 1s;
}

.win8menu .faces div {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.win8menu .front span {
    display: inline-block;
    font-size: 4em;
    margin-top: .5em;
}

.win8menu .back p {
    padding: 2.5em 3em;
}

.win8menu .s-page p {
    font-size: 6em;
    margin-top: 2em;
    font-weight: 100;
}

.win8menu .myform {
    width: 300px;
    margin: 2em auto;
}

.win8menu input {
    display: block;
    line-height: 40px;
    width: 260px;
    height: 40px;
    float: left;
    padding: 0 10px;
}

.win8menu #unlock-button {
    background: #000;
    color: #fff;
    font-size: 1em;
    float: left;
    border: 0;
    height: 2.5em;
    width: 2.5em;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    padding: .3125em;
}

.win8menu .delete-button {
    font-size: .7em;
    float: right;
    line-height: 25px;
}

.win8menu .menu-head {
    margin-left: 2em;
}

.win8menu .menu-head-title {
    font-size: xx-large;
}

.win8menu .menu-breadcrumb-active,.menu-breadcrumb-inactive {
    display: block;
    float: left;
    margin-right: 10px;
}

.win8menu .menu-breadcrumb-active {
    cursor: pointer;
    text-decoration: underline;
}

.win8menu .menu-breadcrumb-splitter {
    display: block;
    float: left!important;
    margin-right: 6px;
    line-height: 23px;
    width: 8px;
}

.win8menu 30%,50%,70% {
    opacity: 1;
}

.win8menu .tile-2:hover,.tile-3:hover {
    background-color: #fff;
    color: #455962;
}

.win8menu .rotate3dY .front,.tile-3 {
    background-color: #ddd;
    color: #455962;
}

.win8menu .faces .back,.faces .front,.rotate3dX .front {
    background-color: #455962;
    color: #ddd;
}

.win8menu .rotate3dY .back,.rotate3dY:hover .faces:hover {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.win8menu .rotate3dX .back,.rotate3dX:hover .faces:hover {
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

@media screen and min-width64em {
    100% {
        -webkit-transform: translateZ(0) scale(1) translateX(-2em);
        -ms-transform: translateZ(0) scale(1) translateX(-2em);
        -o-transform: translateZ(0) scale(1) translateX(-2em);
        transform: translateZ(0) scale(1) translateX(-2em);
        opacity: 1;
    }

    .col1,.col2,.col3 {
        float: left;
        margin-right: .5%;
        width: 31%;
    }

    .col3 {
        margin-right: 0;
    }

    .col1 {
        margin-left: 2em;
    }

    .page-title {
        font-size: 3.5em;
    }
}

@media screen and min-width4375em {
    .col1,.col2,.col3 {
        float: left;
        margin-right: 1%;
        width: 49%;
    }

    .page-title {
        font-size: 2.5em;
    }

    .page-content {
        font-size: 1em;
    }

    .close-button {
        font-size: 2em;
    }
}