.page {
    background: #eee;
}
body {
/*    background-color: #00AEEF;*/
    overflow: hidden;
    user-select: none;
}
#navigation {
/*    background: palevioletred;*/
    margin: 0 auto;
    width: 100%;
    height: 3rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#navigation.on-mobile {
    height: 4rem;
}
#navigation .charm-closer {
    right: 12rem;
    color: white;
}
#bottom-charm .charm-closer {
    color: white;
    font-size: 2.5rem;
    right: 1.2rem;
}
/*
#right-charm.ng-hide-remove,
#left-charm.ng-hide-remove,
.genre-container.ng-hide-remove {
    animation: jello-in .6s;
}
#right-charm.ng-hide-add,
#left-charm.ng-hide-add,
.genre-container.ng-hide-add {
    animation: scale-out-center .2s cubic-bezier(0.895, 0.03, 0.685, 0.22) both;
}
*/
#right-charm.ng-hide-remove {
    animation: bounce-in-right .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.genre-container.ng-hide-remove {
    animation: bounce-in-right .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
#right-charm.ng-hide-add,
.genre-container.ng-hide-add {
    animation: slide-out-right .2s ease-in-out both;
}
#left-charm.ng-hide-remove {
    animation: bounce-in-left .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
#left-charm.ng-hide-add {
    animation: slide-out-left .2s ease-in-out both;
}
#left-charm .v-menu li.result-container:hover {
    background: transparent;
}
#left-charm .v-menu li.left-charm-button-wrap:hover,
#left-charm .v-menu li.left-charm-heading:hover {
    background: inherit;
}
#left-charm .v-menu li.result-container:hover > a,
#left-charm .v-menu li.left-charm-heading:hover > a {
    pointer-events: none;
    color: #727272;
}
#left-charm .v-menu li.result-container:hover .icon,
#left-charm .v-menu li.left-charm-heading:hover .icon {
    color: #262626;
}
#right-charm,
#left-charm {
    top: 3rem !important;
    min-width: 240px;
    width: 18%;
    z-index: 1049;
    padding: .325rem;
    background-color: transparent;
    border: 1px solid white;
}
#right-charm {
    border-top-left-radius: 18px;
}
#left-charm {
    border-top-right-radius: 18px;
}
#right-charm.on-mobile,
#left-charm.on-mobile {
    top: 0 !important;
    width: 60%;
}
#right-charm ul,
#left-charm ul {
    width: 100%;
    height: 80vh;
}
#right-charm ul.v-menu,
#left-charm ul.v-menu {
    max-width: none;
    background-color: inherit;
}
#right-charm .v-menu {
    overflow: auto;
}
#right-charm .v-menu li.mode-control {
    padding-left: 20px;
}
#right-charm .v-menu li a img {
    left: 114px;
    top: 23px;
    margin-right: 0;
    max-height: 2rem;
}
#right-charm li {
    font-family: "hindsemibold","Segoe UI", "Open Sans";
}
#right-charm a {
    font-size: 1.2rem;
    padding: 8% 20px;
    color: white;
}
#right-charm li p {
    font-size: 1.2rem;
    margin-top: 13px;
}
.orient-image {
    position: absolute;
    height: 2.5rem;
    width: 2.5rem;
    top: 10px;
    left: 9rem;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.orient-image.landscape {
    background-image: url(/img/landscape_desktop.png);
}
.on-mobile .orient-image.landscape {
    background-image: url(/img/landscape_mobile.png);
}
.orient-image.square {
    background-image: url(/img/square_desktop.png);
}
.on-mobile .orient-image.square {
    background-image: url(/img/square_mobile.png);
}
.orient-image.vertical {
    background-image: url(/img/vertical_desktop.png);
}
.on-mobile .orient-image.vertical {
    background-image: url(/img/vertical_mobile.png);
}
.orient-image.portrait {
    background-image: url(/img/portrait_desktop.png);
}
.on-mobile .orient-image.portrait {
    background-image: url(/img/portrait_mobile.png);
}
.mode-control .input-control.radio .check:before {
    background-color: mediumblue;
}
.mode-control label {
    width: 50%;
}
.mode-control .mif-question {
    position: absolute;
    font-size: 25px;
    left: 166px;
    top: -5px;
    width: 2rem;
    cursor: pointer;
    user-select: none;
}
.mode-control .input-control.checkbox .caption {
    margin-left: 0.5rem;
}
.orientation .mif-display, .orientation .mif-mobile {
    font-size: 1.5rem;
}
.authors {
    margin-bottom: 10%;
}
#right-charm .v-menu li label:hover > span.caption {
  color: #ffffff;
}
#left-charm ul {
    float: right;
}
#left-charm .charm-closer {
    display: none;
}
#right-charm .charm-closer {
    display: none;
}
#business .left-charm-button-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
}
.left-charm-button-wrap .image-button {
    width: 100%;
    height: 1.7rem;
    background-color: yellow;
    color: gray;
}
.on-mobile .left-charm-button-wrap .image-button {
    height: 2.5rem;
    font-size: 1.2rem;
}
.left-charm-button-wrap .image-button:disabled {
    background-color: #eaeaea;
    color: #bebebe;
    cursor: default;
    border-color: transparent;
}
.left-charm-button-wrap .image-button .icon {
    padding: 0.3rem;
    font-size: 0.8rem;
}
#navigation .v-menu {
    margin-top: 2rem;
}
#navigation .v-menu li a {
    font-size: 1rem;
}
.nav-element-left,
.nav-element-right {
    width: 34.5%;
    height: 100%;
    position: relative;
}
.nav-element-wrap {
    height: 100%;
    position: relative;
/*    user-select: none;*/
    cursor: pointer;
}
.nav-element-wrap a {
    font-size: 40px;
    color: white;
    z-index: 2;
}
.on-mobile .nav-element-wrap a {
    font-size: 32px;
}
.nav-element-wrap .icon {
    vertical-align: baseline;
}
.nav-element-wrap .icon.on-mobile {
    background-color: rgba(169, 169, 169, 0.69);
    border-radius: 6px;
}
.logo-container {
    width: 188px;
    background-image: url(/img/explosion-min.png);
    background-size: 74px;
    background-position: 111px -17px;
    background-repeat: no-repeat;
    height: 65px;
}
.on-mobile .logo-container {
    top: 0;
    z-index: 2;
/*    right: -23px;*/
    background-size: 62px;
    background-position: 101px -11px;
}
.logo-font {
    font-family: bangersregular;
}
.logo-text-1 {
    position: absolute;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    font-size: 33px;
    left: 11px;
    top: 20px;
    margin: 0 !important;
    color: yellow;
    font-family: 'fira_sansbold';
    margin: 0 !important;
}
.on-mobile .logo-text-1 {
    font-size: 25px;
    left: 27px;
}
.logo-text-2 {
    position: absolute;
    color: red;
    top: 19px;
    transform: rotate(-4deg);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    font-size: 41px;
    left: 70px;
    margin: 0 !important;
    font-family: bangersregular;
    margin: 0 !important;
}
.on-mobile .logo-text-2 {
    font-size: 33px;
}
/*
#view {
    margin-top: 3rem;
}
*/

#homepage {
    height: 100%;
    min-height: 100%;
}
.site-background {
/*    background-color: #00AEEF;*/
/*    background-color: #4600ef;*/
/*    background-color: #0396ff;*/
}
.homepage-video {
    opacity: .2;
}
.logo-wrap {
    margin-top: 3rem;
}
.logo-wrap h1 {
    text-align: center;
    font-size: 8rem;
    font-family: 'erica_oneregular';
/*    text-shadow: 3px 2px 3px rgba(255, 255, 255, 1);*/
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 
        0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.dialog.images,
.dialog.edit {
/*    top: 0 !important;*/
    top: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    color: white;
    padding-top: 2rem;
    z-index: 1051;
}
.dialog.images {
    background-color: royalblue;
}
.dialog.edit {
    background-color: darkblue;
    background-image: url(/backgrounds/generic/2117670-1366x768-[DesktopNexus.com].jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.dialog.edit.on-mobile {
    padding-top: 0;
}
.dialog.edit.ng-enter {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.dialog.edit.ng-enter {
  opacity:0;
}
.dialog.edit.on-mobile {
    top: 0 !important;
/*    background-color: orangered;*/
}
.dialog.edit.ng-enter.ng-enter-active {
  opacity:1;
}
.dialog .image-wrapper {
    width: 100%;
    margin: auto;
    border: 1px solid white;
    height: 18rem;
}
.search-overlay-contain {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
}
.search-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    opacity: 0.5;
}
.search-overlay-contain .preloader-cycle {
    height: 100%;
    width: 100%;
    position: absolute;
}
.loading-text-wrapper {
    top: 56%;
}
.loading-text {
    padding: 2px 5px;
    border-radius: 8px;
}
#webImage.dialog {
    z-index: 1055;
    padding: 1.25rem 0;
}
#webImage.ng-enter,
#edit.ng-enter {
    animation: growIn .3s cubic-bezier(0.895, 0.03, 0.685, 0.22) both;
}
#webImage.ng-leave,
#edit.ng-leave,
.ng-leave.screenshot-result {
    animation: scale-out-center .2s cubic-bezier(0.895, 0.03, 0.685, 0.22) both;
}
#body .dialog-overlay {
/*    z-index: 1051;*/
    opacity: 0.8;
}
.vid-container {
/*    top: 1rem;*/
    width: 55%;
/*    max-width: 845px;*/
    user-select: none;
    position: relative;
    overflow: visible;
    -webkit-transition: z-index .3s linear;
    transition: z-index .3s linear;
}
.vid-container.hide-controls {
    z-index: 10000;
}
.ng-hide-remove.vid-container {
    animation: slide-in-bottom 0.2s ease both;
}
.ng-hide-add.vid-container {
    animation: slide-out-bottom 0.2s ease both;
}
.duration-close-button-wrap {
    position: absolute;
    right: -1px;
    top: 1%;
    cursor: pointer;
    user-select: none;
    z-index: 2;
}
.get-started-close-button-wrap {
    position: absolute;
    top: calc(-1.75rem - 8px);
    right: -8px;
    background-color: gainsboro;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    z-index: -1;
}
.get-started-close-button-wrap .mif-cross {
    top: -.6rem;
}
.recorder-status-wrap {
    top: 2.5%;
    text-shadow: -1px 0 0 #FFF;
    z-index: 2;
}
.recorder-close-button-wrap {
    position: absolute;
    right: 13%;
    top: 2.5%;
    cursor: pointer;
    user-select: none;
    z-index: 3;
}
#recorder {
}
.record-controls-wrap {
    bottom: 5%;
    z-index: 2;
    min-width: 270px;
}
#main-genre-container #bottom-charm {
    background-color: #00AEEF;
}
#main-genre-container {
    width: 100%;
    max-height: 45%;
    overflow: hidden;
    user-select: none;
}
#main-genre-container.ng-hide-remove {
    animation: bounce-in-bottom .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
#video-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 10px solid gainsboro;
    height: 100%;
/*    background-color: darkgray;*/
}
.canvas-background {
    background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%);
}
.dropzone {
    position: absolute;
    height: 100%;
    width: 100%;
}
.perspective .mif-loop2 {
    font-size: 2.5rem;
}
.perspective .mif-camera {
    font-size: 1.5rem;
}
.record-video-container {
    z-index: 1050;
    background-color: gainsboro;
}
.record-video-container.ng-enter {
    animation: growIn .3s cubic-bezier(0.895, 0.03, 0.685, 0.22) both;
}
.record-video-container.ng-leave {
    animation: scale-out-center .2s cubic-bezier(0.895, 0.03, 0.685, 0.22) both;
}
.video {
    position: relative;
    width: 100%;
    text-align: center;
    background-color: black;
/*
    border: 10px solid gainsboro;
    background-color: white;
*/
}
.video-controls-container {
    position: relative;
    width: 100%;
    height: 6%;
    min-height: 35px;
}
.video-controls-container.on-mobile {
    position: absolute;
    bottom: 6rem;
    opacity: .6;
    height: auto;
    z-index: 2 !important;
}
.video-controls {
    height: 100%;
    flex: 0 1 75%;
    margin: 0 auto;
    position: relative;
    border-left: 8px solid gainsboro;
    border-right: 8px solid gainsboro;
}
.on-mobile .video-controls {
    flex: 0 1 90%;
    border: none;
}
.video-controls-mask {
    height: 100%;
    width: 80%;
    position: absolute;
    z-index: 2;
    right: 0;
}
.register-choices-wrapper .video-controls-mask {
    background: lightgray;
    width: 100%;
    opacity: 0.7;
}
.mobile-play-container {
    flex: 0 1 22%;
}
.everything-else-container {
    flex: 0 1 78%;
}
.everything-else-container button,
.on-mobile .logo-button button,
.on-mobile .screenshot-button button {
    height: 2.4rem;
    width: 2.4rem;
}
.homepage-function-container {
    left: 0;
    top: 0;
    z-index: 3;
    border: 1px solid gainsboro;
    padding: 10px;
    background-color: snow;
}
.homepage-function-wrap {
    background: lightgray;
    padding: .5rem;
    border-radius: 6px;
    margin: 5px;
    z-index: 2;
}
.homepage-function-wrap button {
    height: 1.3rem;
    width: 12rem;
    border-radius: 8px;
}
.function-close-button-container {
    position: absolute;
    top: 33%;
    right: -2rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: snow;
}
.function-close-button-wrap {
    position: absolute;
    right: .5rem;
    bottom: 1rem;
    cursor: pointer;
    user-select: none;
    z-index: 2;
}
.instruct {
    position: relative;
    width: 100%;
    font-size: 1.2rem;
}
.play-button-container,
.render-button-container {
    position: relative;
}
.video-controls #icon-wrap {
    position: absolute;
    top: -147%;
    height: 4rem;
    z-index: 1055;
}
.video-controls i {
    height: 75%;
    width: 100%;
    font-size: 3rem;
    color: orange;
}
.video-controls .button {
    height: inherit;
    margin: 0;
    background-color: #f5f4f4;
    padding: 0;
    flex: 16%;
}
.play-button:before {
    font: normal normal normal 1.2em/1 metro;
    content: "\ea1c";
}
.play-button.playing:before {
    font: normal normal normal 1.2em/1 metro;
    content: "\ea1e";
    color: white;
}
.playing {
    background-color: #02D602 !important;
}
.on-mobile .cycle-button.large-button {
    border: 1px solid #f5f4f4;
    height: 3.25rem;
    width: 3.25rem;
}
.on-mobile .play-button {
    background-color: #02D602;
}
.on-mobile .play-button:not(.disabled) {
    color: white;
}
.on-mobile .play-button.playing {
    background-color: red !important;
}
.on-mobile .cycle-button.play-button.disabled {
    background-color: #f5f4f4;
    color: #262626;
    cursor: default;
    border-color: transparent;
}
.my-disable {
    opacity: .5;
    background-color: gray;
}
.on-mobile .video-controls button,
.on-mobile .video-controls button .mif-previous,
.on-mobile .video-controls button .mif-next {
    font-size: 1.3rem;
}
.controls-icon-container {
    height: inherit;
    flex: 16%;
}
.record-button {
    width: 1rem;
    height: 1rem;
    background-color: red;
    border-radius: 50%;
}
.video-controls button .mif-previous,
.video-controls button .mif-next {
    font-size: 1rem;
}
#hidden-canvas {
    display: none;
}
#main-canvas,
#edit-canvas {
    cursor: pointer;
    user-select: none;
    box-shadow: 1px 1px 15px 1px #ffffff;
}
#video-canvas {
    height: 100%;
    width: 100%;
}
.content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1051;
}
.content {
    position: absolute;
    overflow: hidden;
    padding: 0 1rem;
    background-color: transparent;
    line-height: 1.1;
    width: 100%;
    height: 100%;
    cursor: pointer;
/*    word-break: break-all;*/
    text-align: center;
    z-index: 3;
}
.video-background {
    height: 100%;
    max-height: 100%;
}
.video-animation-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
}
.video-poster {
    position: absolute;
    top: 0;
/*
    height: 100%;
    width: 100%;
*/
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}
.image {
    position: relative;
    min-width: 288px;
    float: left;
}
.string-text {
    padding: 3px 10px;
    margin: 5px 0;
    max-width: 100%;
    word-wrap: break-word;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    line-height: 1;
    min-height: 44px;
    font-size: 22px;
    border: 1px solid white;
    border-radius: 6px;
    background-color: transparent;
    user-select: none;
}
.string-text.selected {
    background-size: contain !important;
}
.string-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .5rem;
    font-size: 1.2rem;
    text-align: left;
}
.string-text:hover {
    background-color: #59cde2 !important;
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}
.selected {
    background-color: #59cde2 !important;
/*    background-image: none !important;*/
    color: white !important;
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}
.string-edit {
    position: absolute;
    width: 309.59px;
    height: 174.15px;
    min-height: 174.15px;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    z-index: 3;
}
.result-container {
/*    margin-top: 1rem;*/
}
.result-heading,
.social-heading {
    margin-bottom: 1rem;
}
.result-heading p,
.result-heading h3,
.social-heading h3 {
    margin: 0;
}
.result-wrapper {
    min-height: 50%;
}
.result-col {
    width: 100%;
}
.result-col button {
    width: 100%;
    min-height: 2.1rem;
}
.result {
    min-height: 8rem;
    position: relative;
}
.social-container {
    margin-top: 1rem;
}
.social-button-container {
    border: 1px solid gainsboro;
}
.social-button-container button span {
    font-size: 1rem;
}
#homepage .get-started .helper {
    position: absolute;
    top: 0;
    right: -7%;
    height: 100%;
    border: none;
}
.video-title-container .input-control.text {
    width: 100%;
}
#right-charm .video-title-container .helper-button {
    right: 3rem;
}
.video-title-container form {
    width: 100%;
}
.tag-container .input-control.textarea {
    width: 100%;
}
.tag-container textarea {
    height: 5rem;
    width: 100%;
}

.i-dont-know {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.i-dont-know .accordion > .frame > .content {
    position: relative;
    background-color: #1ba1e2;
    z-index: 1;
}
.bin {
    margin: auto;
    position: absolute;
    top: 5rem;
    z-index: 3;
}
.on-mobile .edit-view-container .bin {
    top: 0;
    padding: 0 5px;
}
.bin.effects {
    display: none;
    margin-top: 0;
}
.effects .edit-button-container {
    margin-top: 0;
}
.selected-button {
    background-color: #00ccff !important;
    color: #ffffff !important;
}
.slide-container {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
#webImage .zoom-in {
    transform: scale(1);
}
.net-search-container {
    position: absolute;
    top: 57%;
    right: 0;
    left: 0;
    transition: transform .1s;
    transform: scale(.7);
    transform-origin: center 417px;
}
.net-search-container .mif-warning {
    top: 14px;
}
.help-image {
    height: 1.8rem;
}
.mode-control .help-image {
    padding-left: 8px;
    height: 23px;
}
.header-container {
/*    flex: 0 1 30%;*/
}
.net-search-wrap {
/*    flex: 0 1 70%;*/
    min-width: 351px;
    max-width: 800px;
}
.net-search-wrap .input-control.text {
    width: 100%;
}
.net-search-wrap .input-control > .button.helper-button {
    right: 52px;
}
.arrow-wrapper {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 20%;
}
.arrow-container {
    width: 6rem;
}
.genre-container {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 3rem !important;
    min-width: 240px;
    width: 18%;
    z-index: 6;
    padding: .325rem;
    background-color: transparent;
    border: 1px solid white;
    border-top-left-radius: 18px;
}
.genre-container.on-mobile {
    top: 0 !important;
    z-index: 4;
}
.genre-heading-wrap {
    position: relative;
    color: dimgray;
    margin-bottom: 3px;
    cursor: pointer;
    user-select: none;
    height: 50px;
    background-color: white;
}
.genre-heading-wrap h4 {
    font-family: 'fira_sansbold';
}
#left-charm .genre-heading-wrap {
    border-top-right-radius: 13px;
}
#right-charm .genre-heading-wrap,
.genre-container .genre-heading-wrap {
    border-top-left-radius: 13px;
}
.genre-close-button-wrap {
    position: absolute;
    top: 15%;
    color: red;
}
#left-charm .genre-close-button-wrap {
    right: 2%;
}
#right-charm .genre-close-button-wrap,
.genre-container .genre-close-button-wrap {
    left: 2%;
}
.genre-close-button-wrap h3 {
    height: 31px;
}
.genre-container span {
    position: absolute;
    left: 2%;
    font-size: 1.5rem;
    color: yellow;
}
.genre-select-container {
    padding-top: 1%;
    width: 99%;
    height: 93%;
    overflow-y: auto;
}
.genre-select-container button {
    background-color: white;
    text-shadow: none;
    flex: 1 1 8.3%;
    min-height: 44px;
    font-family: inherit;
    font-size: 1.2rem;
    background-color: transparent;
    color: white;
    font-weight: bold;
    border-radius: 6px;
}
.genre-select-container button:hover {
    background-color: #59cde2;
    border-color: white;
}
/*
.genre-container.on-mobile .genre-select-container button {
    min-height: 5.125rem;
    font-size: 2.75rem;
}
*/
.ng-hide-remove.genre-select-container {
    animation: scale-in-ver-top .5s ease;
}
.ng-hide-add.genre-select-container {
    animation: scale-out-ver-top .5s ease;
}
.genre-arrow-wrapper span,
.arrow-wrapper span {
    font-size: 6rem;
    cursor: pointer;
    color: white;
}
.genre-arrow-wrapper span {
    color: lightslategray;
}
.genre-edit-icon {
    z-index: 2;
    right: 0;
    top: 0%;
    width: 19%;
    height: 100%;
}
.slide-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    width: inherit;
    -webkit-transition: .2s ease;
            transition-property: .2s ease;
    background-color: white;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.cycle-button.big-button,
.cycle-button.huge-button {
    line-height: 1;
}
.cycle-button.huge-button {
    font-size: 2rem;
    width: 4.125rem;
    height: 4.125rem;
}
.toolbar.justify .toolbar-button,
.toolbar.bullets .toolbar-button {
/*    background-color: #00ccff;*/
}
.toolbar.bullets .bullet.toolbar-button {
    width: 2.5rem;
}
.bin .toolbar-section:before,
.pin-visual-container .toolbar-section:before {
    display: none;
}
.timeslice-wrap {
    height: 140px;
}
.toolbar .toolbar-button.photo-button {
    height: 60px;
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
    margin: 1px;
}
.toolbar .toolbar-button.timeslice-button {
    height: 80px;
    min-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    margin: 1px;
}
.picked-slice {
    height: 140px;
    min-width: 140px;
    margin: 1px;
    left: 39%;
    z-index: 3;
}
.timeslice-controls {
    width: 10rem;
    height: 2rem;
    margin: .8rem;
    border-radius: .3rem;
}
.timeslice-controls i {
    font-size: 2rem;
    color: #00ccff;
    cursor: pointer;
    user-select: none;
}
.on-mobile .bin .toolbar .toolbar-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .2rem;
    flex: 0 1 16%;
    height: 3rem;
}
.bin .toolbar.team-color-button-wrap .toolbar-button {
    width: 33%;
}
.on-mobile .bin .toolbar.team-color-button-wrap .toolbar-button {
    flex: 1 1 16%;
}
.bin .toolbar .toolbar-button.selected-outline,
.image-mode .toolbar .toolbar-button.selected-outline {
    border: 3px solid white;
}
.pin-video-container .black.toolbar-button.selected-outline {
    border: 3px dotted yellow;
}
.bin .toolbar .white.toolbar-button.selected-outline,
.image-mode .toolbar .white.toolbar-button.selected-outline,
.pin-video-container .toolbar-button.selected-outline {
    border: 3px solid gray;
    color: #262626;
}
.bin .toolbar .more.toolbar-button:focus {
    border: none;
    color: #262626;
}
.bin .slider-wrap {
    width: 100%;
    height: 3rem;
    align-items: center;
} 
.slider-directions {
    width: 3rem;
    background-color: gray;
    border-radius: 4px;
    padding: 1px;
    margin: 6px;
}
.slider-value {
    background-color: red;
    border-radius: 4px;
    border: none;
    width: 3.5rem;
    font-size: 0.875rem;
    line-height: 1.1;
    padding: 6px;
}
.slider-value::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}
.opacity-slider-wrap .slider-directions {
    position: absolute;
    right: -33px;
/*    top: 5px;*/
    background-color: inherit;
}
.on-mobile .opacity-slider-wrap .slider-directions {
    position: relative;
    top: -17%;
    right: -75%;
    width: auto;
    background-color: inherit;
    margin: 0;
}
.slider-directions img {
    margin: auto;
}
#slider .slider-backside {
    border: 1px solid white;
}
#slider .complete {
    border: 1px solid white;
}
.bin .toolbar.slider-container {
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 67%;
            flex: 0 1 67%;
}
.bin .slider {
    z-index: 2;
}
.bin .marker,
.pin-video-container .marker,
.opacity-slider-container .marker {
    border: 1px solid white;
    top: 47%;
    width: 3rem;
}
.on-mobile .opacity-slider-container .marker {
    width: 1.1rem;
    height: 3rem;
}
.on-left {
    left: 0;
}
.on-right {
    right: 0;
}
.purple {
    background-color: blueviolet !important;
}
.red {
    background-color: red !important;
}
.blue {
    background-color: blue !important;
}
.my-blue {
    background-color: #00AEEF !important;
}
.green {
    background-color: green !important;
}
.my-green {
    background-color: #00ff00 !important;
}
.go-green {
    background-color: #02D602;
}
.orange {
    background-color: orange !important;
}
.brown {
    background-color: chocolate !important;
}
.lightseagreen {
    background-color: lightseagreen !important;
}
.whiteSmoke {
    background-color: whiteSmoke !important;
}
.yellow {
    background-color: yellow !important;
}
.yellow-muted {
    background-color: '#ffff00' !important;
}
.gold {
    background-color: gold !important;
}
.transparent {
    background-image: url('/images/transparent.jpg');
    background-size: cover;
}
.transparent-overlay {
    background-color: rgba(255, 255, 255, 0);
}
.toolbar-button.transparent,
.toolbar-button.more {
/*    word-wrap: break-word;*/
    line-height: 1;
}
.toolbar-button.transparent.active,
.toolbar-button.more.active {
    color: #262626;
}
.undo-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.undo-button-container {
    width: 46%;
    margin: 0 10px 0 0;
}
.on-mobile .undo-button-container {
    width: 100%;
    height: 40%;
    top: 47%;
    margin: 0;
}
.undo-button-container button {
    background-color: yellow;
    color: gray;
    flex: 1 1 20%;
}
.on-mobile .undo-button-container button {
    font-size: 1.2rem;
    padding: 0;
    flex: 0 1 20%;
    max-width: 4rem;
}
.undo-button-container button.undo {
    float: right;
}
.edit-button-container .undo-button-container span {
    font-size: 1rem;
}
.opacity-slider-wrap {
    width: 100%;
    max-width: 700px;
}
.on-mobile .opacity-slider-wrap {
    height: 100vh;
    position: absolute;
    top: 10px;
    z-index: 4;
}
.opacity-slider-wrap .slider-wrap {
/*    margin-left: 1rem;*/
}
.on-mobile .opacity-slider-wrap .slider-wrap {
    margin-left: auto;
    height: 100%;
    width: 100%;
}
.opacity-slider-container {
    width: 50%;
    z-index: 2;
}
.on-mobile .opacity-slider-container {
    width: 1.5rem;
    height: 37%;
    top: 5%;
}
.on-mobile .opacity-slider-container .slider.vertical {
    height: 100%;
    width: inherit;
}
.slider-directions .mif-brightness {
    font-size: 1.2rem;
}
.on-mobile .opacity-wrap {
    height: 90%;
}
.options-wrap {
    max-width: 310px;
    margin: auto;
}
.bin .tag.animate {
    margin: 10px 0 5px 0;
    font-size: .875rem;
    line-height: 1;
}
.bin .toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}
.bin .toolbar-section {
    padding: 0;
}
.on-mobile .bin .toolbar-section {
    display: flex;
    justify-content: center;
    width: 100%;
}
.bin .more .toolbar-section {
    width: 100%;
}
.on-mobile .bin .more .toolbar-section {
    flex-flow: row wrap;
}
.bin .toolbar-section.sizes {
    margin-top: -4px;
}
.bin .toolbar-section.duration {
    margin-bottom: 4px;
}
.bin .transitions .toolbar-button,
.animations .toolbar-button {
    line-height: 1;
    overflow: hidden;
    user-select: none;
}
.none {
    line-height: 2;
}
.edit-content-container {
    overflow: hidden;
    background-color: darkgray;
    width: 320px;
    margin: 0 auto;
    position: relative;
    min-height: 180px;
    height: 180px;
}
.info-wrapper {
/*    height: 3rem;*/
    margin: 0 3rem;
}
.pixabay-wrapper {
    transition: transform .1s;
    transform: scale(.7);
    transform-origin: center top;
}
.image-search-wrap,
.pixabay-info-wrap {
    height: 100%;
/*    width: 100%*/
}
.image-search-wrap form{
    margin-right: 1rem;
}
.pixabay-info-wrap {
    margin-bottom: .5rem;
}
.pixabay-info-wrap a {
    pointer-events: none;
}
.pixabay-mobile-logo {
    height: 100%;
    display: none;
/*
    min-width: 48px;
    padding-right: 1px;
*/
}
.pixabay-desktop-logo {
    height: 100%;
/*    display: none;*/
}
.pixabay-logo-container {
    width: 100%;
    height: 90%;
    max-height: 2.3rem;
}
.pixabay-image-wrapper {
    height: 100%;
    width: 100%;
    border: 1px solid gainsboro;
}
.webvideo-controls-container {
    width: 99%;
}
.webvideo-reset {
    font-size: 1rem;
}
.image-search-wrap form .input-control.text {
    width: 100%;
}
.on-mobile .image-search-wrap .input-control {
    font-size: 1.5rem;
/*    margin-bottom: 1rem;*/
}
.search-params-wrap {
    margin-bottom: .5rem;
}
.search-params-wrap .input-control.select {
    width: 7rem;
}
.on-mobile .search-params-wrap .input-control.select {
    width: 100%;
    padding: 0 .2rem 0 0;
/*    margin-bottom: 1rem;*/
}
.on-mobile .search-params-wrap .input-control.select select {
    padding: 0 0 0 .2rem;
}
.get-started-form-wrapper {
    width: 100%;
    max-width: 600px;
    border: 8px solid gainsboro;
    background-color: white;
    margin: 0;
    position: relative;
}  
.get-started {
    width: 100%;
    position: relative;
}
.get-started.on-mobile {
    position: absolute;
/*
    top: 15%;
    left: 10px;
*/
    width: calc(100% - 20px);
    z-index: 4;
}
/*
.ng-hide-remove.get-started.on-mobile {
    animation: bounce-in-top .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
    animation: scale-in-center-get-started .2s cubic-bezier(0.895, 0.03, 0.685, 0.22) both;
}
.ng-hide-add.get-started.on-mobile {
    animation: slide-out-top .5s ease-in both;
    animation: scale-out-center-get-started .3s cubic-bezier(0.895, 0.03, 0.685, 0.22) both;
}
*/
.get-started textarea {
    font-size: 1.5rem;
    line-height: 1.5;
    resize: none;
    overflow-y: auto !important;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    padding-left: 1rem;
    padding-right: .5rem;
}
.get-started.rename-wrap textarea {
    padding-right: 19px;
}
.on-mobile .get-started.rename-wrap textarea {
    padding-right: 6px;
    padding-left: 17px;
}
.get-started.on-mobile textarea {
    height: 100%;
    min-height: 4rem;
}
#add-many .get-started.rename-wrap textarea {
    padding-left: .5rem;
    padding-right: 1.9rem;
}
.on-mobile #add-many .get-started.rename-wrap textarea {
    padding-left: 19px;
    padding-right: 0;
}
.get-started .input-control.textarea {
    width: 86%;
    margin: auto;
}
.on-mobile.get-started .input-control.textarea {
    width: 100%;
    height: 100%;
    padding-bottom: .5rem;
}
.image-mode .input-control.textarea {
    width: 100%;
}
.get-started .input-control.text {
    width: 100%;
    margin: 0;
    min-height: 2.75rem;
    height: 2.75rem;
}
.get-started .input-control input {
    color: gray;
    font-size: 1.2rem;
    border-color: white;
}
.get-started button {
    height: 100%;
    margin: 0;
    right: 0;
}
.get-started.on-mobile button {
/*    height: 3rem;*/
    width: 43%;
    font-size: 1.5rem;
    position: relative;
    margin: inherit;
}
.get-started-image-mode-wrap {
    height: calc(2.75rem + 16px);
    width: 100%;
    margin: 0;
    border: 8px solid gainsboro;
    background-color: white;
}
.get-started .overlay {
    z-index: 0;
}
.get-started .overlay.ng-enter {
    animation: fadeIn .3s linear;
}
.get-started .overlay.ng-leave {
    animation: fadeOut .3s linear;
}
.input-err-message {
    position: absolute;
    background-color: red;
    color: white;
    right: 0;
    top: 0;
    width: 100%;
    height: 3rem;
    border: 1px solid white;
    z-index: 2;
}
.on-mobile .rename-wrap .input-err-message {
    top: -57px;
    color: white;
    background-color: red;
}
.input-err-message p {
    color: inherit;
    font-size: 1.5rem;
    animation: fadeInOutFast 1s linear 10;
}
.confirm-container {
    height: auto;
    min-height: 100%;
    width: 100%;
    z-index: 3;
    padding: 1rem;
    border: 2px solid white;
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}
.on-mobile .confirm-container {
    top: 0;
}
.little-image-container {
    cursor: pointer;
    user-select: none;
}
.little-image {
    width: 10%;
    height: 100%;
    position: relative;
}
.cursor {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: gray;
    opacity: .5;
}
.cursor-pointer {
    cursor: pointer;
    user-select: none;
}
.cursor-auto {
    cursor: auto !important;
}
.no-pointer {
    pointer-events: none;
}
.mode-button-container {
    position: absolute;
    left: -15%;
    height: inherit;
    width: 10%;
}
.emoji-container {
    height: 1.5rem;
    margin-left: .2rem;
    width: 1.5rem;
}
.emoji-container img {
    height: 100%;
}
.emoji-container-edit {
    margin: 0 .5rem;
}
.emoji-container-edit img {
    height: 100%;
}
.emoji-container-video {
    height: 100%;
    margin: 0 1rem;
}
.emoji-container-video img {
    height: 100%;
}
.rename-wrap {
/*    flex: 70%;*/
    padding: .625rem 0;
}
.rename-wrap form {
    margin: 0;
}
.get-started.rename-wrap form {
    width: 86%;
    margin: auto;
}
.on-mobile .get-started.rename-wrap form {
    width: 100%;
}
.image-mode .get-started.rename-wrap form {
    width: 96%;
}
.rename-wrap .input-control.text {
    display: block;
    margin: auto;
    width: 81%;
    font-size: 1rem;
}
#homepage .rename-wrap .helper {
    right: -4%;
}
.rename-wrap button.success {
    position: absolute !important;
    right: -17%;
    top: 0;
    height: 100%;
}
.on-mobile .rename-wrap .helper {
    right: auto;
    left: 0;
    padding: 0;
}
.edit-button-container .rename-wrap span {
    font-size: 0.8rem;
}
.edit-button-container .row {
    padding: .625rem 0;
}
.new-font-container {
    width: 100%;
}
.new-font-container button {
    border-radius: 1rem;
    height: 1.8rem;
    background-color: #00ccff;
    color: white;
    font-weight: bold;
/*    width: 10rem;*/
}
.new-font-container button span {
    font-size: 1rem;
}
.new-font-container select {
    height: 2rem;
    margin: .15625rem 1rem;
    width: 36%;
    font-size: 1rem;
}
#business {
}
.genre-button-container {
    width: 100%;
    margin: 1rem 0 0;
    background-color: gainsboro;
}
.all-genre-container {
    width: 95%;
    margin: auto;
}
.genre-button-container button {
    padding: .3rem 0;
    line-height: 1;
    width: 8rem;
    max-width: 43%;
    height: 2.5rem;
    border-radius: .8rem;
}
.genre-arrow-wrapper {
    width: 10%;
}
.genre-slide-container {
    width: 80%;
    overflow: hidden;
}
.genre-buttons.ng-hide-add,
.genre-buttons.ng-hide-remove {
    transition: all .3s cubic-bezier(0.550, 0.085, 0.680, 0.530);
}
.genre-buttons.left.ng-hide-add,
.genre-buttons.left.ng-hide-remove {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
.genre-buttons.left.ng-hide-add.ng-hide-add-active,
.genre-buttons.left.ng-hide-remove.ng-hide-remove-active{
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
}
.genre-buttons.right.ng-hide-add,
.genre-buttons.right.ng-hide-remove {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
}
.genre-buttons.right.ng-hide-add.ng-hide-add-active,
.genre-buttons.right.ng-hide-remove.ng-hide-remove-active{
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
/*
.genre-buttons.left.ng-hide-remove {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
}
.genre-buttons.left.ng-hide-remove.ng-hide-remove-active {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
*/
.genre-button-container button .check,
.all-genre-container button .check {
    position: absolute;
    top: 0;
    right: .2rem;
    font-size: 1rem;
}
.genre-button-container button:hover {
    background-color: #59cde2;
}
.all-genre-container button {
    padding: .3rem 0;
    line-height: 1;
    max-width: 48%;
    height: 4rem;
    min-width: 13rem;
}
.genre-buttons {
    width: 100%;
}
.all-genre-container button:hover {
    background-color: #59cde2;
}
.mine {
    font-size: 1.2rem;
}
.action {
    font-family: 'faster_oneregular';
    font-size: 1.5rem;
    padding: 0;
    background-color: black;
    color: yellow;
}
.comedy {
    font-family: 'komika_glazeregular';
    font-size: 1.3rem;
    background-color: #3000ff;
    color: white;
}
.horror {
    font-family: 'solsticeofsufferingregular';
    font-size: 1.3rem;
    background-color: red;
    color: black;
}
.sports {
    font-family: 'middle_earth_nfregular';
    font-size: 2.3rem;
    background-color: navy;
    color: gold;
    line-height: 0.8 !important;
}
.sci-fi {
    font-family: 'lazenby_computersmooth';
    font-size: 1.3rem;
    background-color: black;
    color: white;
}
.romance {
    font-family: 'mervale_scriptregular';
    font-size: 1.5rem;
    text-transform: capitalize;
    background-color: deeppink;
    color: white;
}
.whimsical {
    font-family: 'toonymedium';
    font-size: 2.1rem;
    border: 1px solid darkgray;
/*    padding: 0 .5rem !important;*/
}
.uptown {
    font-family: 'metro_retro_nfregular';
    font-size: 1.2rem;
    background-color: mediumpurple;
    border: 1px solid darkgray;
    color: white;
}
.informative {
    font-family: 'kingthings_trypewriter_2Rg';
    font-size: 1.4rem;
    letter-spacing: -.1rem;
    border: 1px solid darkgray;
}
.western {
    font-family: 'durango_western_erodedregular';
    font-size: 1.2rem;
    background-color: chocolate;
    color: white;
}
.medievel {
    font-family: 'english_towneregular';
    font-size: 2rem;
    background-color: darkslategray;
    color: white;
    line-height: 0.8 !important;
}
.seventies {
    font-family: 'chicleregular';
    font-size: 1.8rem;
    text-shadow: #000 2px 2px 0px;
    -webkit-font-smoothing: antialiased;
    background-color: orange;
    color: white;
}
.more-genres {
    border: 1px solid gray;
}  
#error-dialog.dialog.alert {
    z-index: 1057;
}
#body .dialog-overlay.bg-yellow {
    z-index: 1056;
}
#edit video {
    z-index: 2;
}
#body .edit-content-container video {
    height: 100%;
}
.more {
    position: absolute;
    top: 0;
    max-width: 34rem;
/*    min-height: 578px;*/
    min-width: 100%;
    z-index: 2;
/*    background-color: white;*/
    color: #ffffff;
}
.more .input-control {
    margin: .325rem 0;
    width: 9.3rem;
}
.more .input-control.select select {
    padding-right: 0;
}
.close-row {
    height: 3rem;
    background-color: gainsboro;
    width: 100%;
}
.on-mobile .close-row {
    height: 4rem;
}
#edit .close-row {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.close-row .toolbar-button {
    position: absolute;
    left: 10px;
    top: 0;
    border: none;
    background-color: inherit;
}
.close-row .pagination {
    flex: 1 1 45%;
    margin-left: 3rem;
}
.close-row .input-control.select {
    font-size: 1rem;
    width: auto;
}
.on-mobile .close-row .input-control.select {
    height: 3rem;
}
.close-row select {
    padding: 0 2px;
}
.bigger-but {
    padding: 4%;
}
.animations .toolbar .bigger-but .toolbar-button.bigb {
    height: 3.65rem;
    width: 3.9rem;
    flex: 0 1 25%;
    margin: 0;
}
.colors .toolbar .bigger-but .toolbar-button.biggerb {
    height: 6.58rem;
    width: 6.58rem;
    line-height: 1;
    min-width: 92px;
}
.on-mobile .colors .toolbar .bigger-but .toolbar-button.biggerb {
    min-width: 120px;
    flex: 1 1 33%;
    height: 7.58rem;
    font-size: 1.2rem;
    transition: transform .1s;
}
.input-control {
    margin: .125rem 0;
}

.edit-button-container {
    position: relative;
    margin-top: .5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0;
    max-height: 0px;
}
.edit-button-container .slider.vertical {
    min-height: 68px;
}
/*#slider_input_size,*/
/*#slider_input_horiz,*/
/*#slider_input_vert,*/
/*#slider_input_rot,*/
#slider_input_vid,
#slider_input_opacity,
/*#slider_input_pic_posX,*/
/*#slider_input_pic_posY,*/
/*#slider_input_pic_size,*/
/*#slider_input_back_size,*/
/*#slider_input_vid_size,*/
/*#slider_input_vid_posX,*/
/*#slider_input_vid_posY,*/
#slider_input_vid_start {
/*#slider_input_pic_bright,*/
/*#slider_input_pic_opacity,*/
/*#slider_input_pic_hue,*/
/*#slider_input_pic_contrast,*/
/*#slider_input_pic_saturate {*/

    display: none;
}
.edit-button-container .slider .slider-backside {
    background: white;
}
.edit-button-container .input-control.file {
    height: 2rem;
    font-size: 1rem;
    border-radius: 2rem;
/*    margin-top: .5rem;*/
}
.red-button {
    background: red !important;
    border-color: red !important;
    color: white !important;
}
.yellow-button {
    background: yellow !important;
    border-color: yellow !important;
    color: gray !important;
}
.darkblue-button {
    background: darkblue !important;
    border-color: darkblue !important;
    color: white;
}
.use-all-button-wrap button.warning,
.use-all-button-wrap button.primary,
.use-all-button-wrap button.red-button,
.use-all-button-wrap button.yellow-button,
.use-all-button-wrap button.darkblue-button {
    border-radius: 1rem;
    height: 2.2rem;
    margin: 4% 0;
    font-size: 1.4em;
}
.use-all-button-wrap.multipack button {
    margin: 2% 0;
}
.faq-button-wrap {
    right: -4rem;
}
.edit-button-container .input-control.file {
    margin: .15625rem 0;
}
.edit-button-container .input-control.file button {
    right: 1.2rem;
}
.edit-button-container span {
    font-size: 1.5rem;
}
.edit-button-container .undo-button-container span {
    font-size: 1rem;
}
.edit-button-contain .input-control input {
    background: transparent;
    border: none;
}
.edit-icon-container {
    position: absolute;
    right: 0;
    top: 2.8rem;
    font-size: 1.2rem;
}
.button:disabled,
.button.disabled {
    background-color: #eaeaea !important;
    color: #bebebe !important;
    cursor: default !important;
    pointer-events: none;
    border-color: transparent !important;
}
/*
.on-mobile #animation-container {
    position: relative;
    top: -30px;
}
*/
.animation-wrap {
    margin: 0 5px;
}
.animation-wrap.on-desktop {
/*    background-color: gray;*/
/*
    position: absolute;
    top: 6.2rem;
*/
}
.vid-container .media-indicator {
    left: 20px;
    top: 15px;
    z-index: 2;
    height: 2.125rem;
    width: 2.125rem;
}
.vid-container .media-indicator {
    opacity: .6;
}
.vid-container .media-indicator img {
    height: auto;
}
.on-mobile .vid-container .media-indicator {
    left: 19px;
    top: 70px;
}
.string-text .media-indicator {
    left: -1px;
    top: -5px;
}
.string-text .media-indicator img {
    height: 1.2rem;
}
.screenshot-button {
    right: 20px;
    bottom: 1%;
    opacity: .7;
    z-index: 2;
}
/*
.on-mobile .screenshot-button {
    right: 16px;
    top: 70px;
    height: 3rem;
    width: 3rem;
}
*/
.logo-button {
    left: 20px;
    bottom: 1%;
    opacity: .7;
    z-index: 2;
}
/*
.on-mobile .logo-button {
    left: 16px;
    top: 70px;
    height: 3rem;
    width: 3rem;
}
*/
.logo-select-wrap {
    min-height: 50%;
}
.screenshot-result {
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1050;
    background-color: darkturquoise;
    animation: growIn .2s cubic-bezier(0.895, 0.03, 0.685, 0.22) .2s both;
}
.screenshot-result .arrows {
    left: 2%;
}
.screenshot-result .error-container button {
    min-width: 200px;
}
.ask-wrap {
    height: 70%;
}
.ask-wrap .input-control.file {
    flex: 1 1 40%;
    height: 20%;
    max-height: 150px;
    width: 86%;
    margin: 10px;
    background-color: transparent;
}
.ask-wrap .input-file-wrapper {
    background-color: transparent;
    border: none;
}
.screenshot-result .error-container .ask-wrap button,
.screenshot-result .ask-wrap a {
    flex: 1 1 40%;
    height: 20%;
    max-height: 150px;
    width: 86%;
    margin: 10px;
    background-color: transparent;
    border: 1px solid white;
}
.screenshot-result .error-container .ask-wrap .input-control button {
    height: 100%;
    margin: 0;
    width: 100%;
}
.screenshot-result .error-container .ask-wrap button:hover,
.screenshot-result .ask-wrap a:hover {
    background-color: #48a1b1 !important;
    color: white !important;
}
.screenshot-image {
    height: 100%;
    width: 80%;
}
.screenshot-image img {
    border: 1px solid gainsboro;
    height: inherit;
}
.screenshot-result a {
/*    width: 25%;*/
    min-width: 120px;
    padding: .53125rem;
/*
    margin: 1rem;
    margin-bottom: 0;
*/
}
.screenshot-result .tile.wide-tile {
    height: 103px;
}
#quality .tile.wide-tile {
    height: 100%;
}
.screenshot-result .element-selected:before,
#quality .element-selected:before {
    color: black !important;
}
.screenshot-info {
    min-height: 8rem;
    min-width: 250px;
    background-color: ivory;
    border: 1px solid gainsboro;
    border-radius: 8px;
    opacity: .8;
    bottom: 20px;
}
.on-mobile .screenshot-info {
    min-height: 12rem;
}
#logo-draggable-container {
    border: 2px solid gainsboro;
    overflow: hidden;
}
.logo-draggable {
    z-index: 1;
}
.media-indicator-underline {
    left: 0;
    bottom: 18%;
    width: 100%;
    height: 8px;
    background-color: lawngreen;
}
/*
.edit-view-container {
    max-width: 1400px;
}
*/
.accordion-section-container .animation-wrap {
    flex: 1 1 70%;
}
.animation {
    z-index: 3;
    height: 100vh;
/*    top: 5rem;*/
}
.on-mobile .animation {
    top: 0;
    padding: 0;
}
.use-all-button-wrap {
    padding: 0 .25rem;
/*    max-width: 230px;*/
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}
.use-all-button-wrap .input-control input {
    background-color: transparent;
    border: none;
    color: #1ba1e2;
}
.accordion-wrapper {
    margin: 1rem 0;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: calc(100vh - 3rem - 225px);
/*    min-height: calc(100vh - 4rem - 225px);*/
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.accordion-wrapper .accordion > .frame > .heading {
    color: darkgrey;
    text-align: center;
    font-size: inherit;
}
.accordion-wrapper .accordion > .frame > .heading .icon {
    font-size: 2rem;
}
.accordion-section-container {
    width: 100%;
/*    min-height: 33%;*/
    border-bottom: 1px solid gainsboro;
}
.accordion-section-container.gary {
    height: calc(100vh - 9rem);
    overflow-y: auto;
    position: absolute;
    top: 3rem;
    background-color: white;
    border: 1px solid gainsboro;
}
.on-mobile .accordion-section-container.gary {
    height: calc(100vh - 8rem);
    top: 4rem;
}
.accordion-section-container.anim {
    border: none;
    min-height: inherit;
}
#vid-container .accordion-section-container,
#right-charm .accordion-section-container {
    z-index: 2;
    border: 1px solid white;
    border-radius: 14px;
    background-color: lightslategray;
}
#vid-container .accordion-section-container {
    width: auto;
    min-height: 0;
    bottom: 10rem;
    left: 2rem;
    padding: .5rem 1rem 1rem;
}
.on-mobile #vid-container .accordion-section-container {
    bottom: 14rem;
}
#vid-container .accordion-section-container.duration-container {
    width: 18rem;
}
#right-charm .accordion-section-container {
    left: 0;
    right: 0;
    top: 0;
    padding: 1rem 0;
}
#vid-container .accordion-section-container.ng-enter,
#right-charm .accordion-section-container.ng-enter {
    animation: fadeIn .3s linear;
}
#vid-container .accordion-section-container.ng-leave,
#right-charm .accordion-section-container.ng-leave {
    animation: fadeOut .3s linear;
}
#vid-container .toolbar-section:before,
#right-charm .toolbar-section:before {
    display: none;
}
#right-charm .toolbar-button.low {
    font-size: .7rem;
}
#right-charm .toolbar-button.med {
    font-size: 1.3rem;
}
#right-charm .toolbar-button.high {
    font-size: 2rem;
}
.on-mobile ::-webkit-scrollbar {
    width: 0 !important;
}
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: yellow; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}
.edit .close-button,
#webImage .close-button {
    z-index: 5;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
    outline: none;
    cursor: pointer;
    top: 2%;
    right: 1%;
    user-select: none;
}
.edit.on-mobile .close-button {
    top: 1%;
}
.edit .close-button span,
#webImage .close-button span {
    color: yellow;
}
.team-button-container {
    height: 100%;
}
.notify-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(241,239,239,.92);
    z-index: 1056;
}
.notify-content-container {
    height: 100%;
}
.notify-content-wrap {
    font-family: monospace, sans-serif;
    max-width: 34rem;
    min-width: 45%;
    min-height: 15rem;
    max-height: 90vh;
    background-color: white;
    border-radius: 3px;
    border: 2px solid red;
    animation: growIn .2s cubic-bezier(0.895, 0.03, 0.685, 0.22) .2s both;
    box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
}
.notify-content {
    width: 100%;
    min-height: 24rem;
}
.ng-leave.notify-overlay,
.ng-leave.notify-content {
    animation: fadeOut .2s linear;
}
.notify-content h2,
.notify-content h3 {
    font-family: 'fira_sansbold';
}
.notify-content .button {
    min-width: 30%;
}
.notify-content.what-frame .button {
    width: 16rem;
    margin: 10px;
}
.notify-content.free-logo .button {
    width: 200px;
    margin: 10px;
}
.notify-content .toolbar-section {
    width: 100%;
}
.notify-content .close-button {
    color: red;
    margin: .5rem;
    cursor: pointer;
    user-select: none;
}
.notify-content .bin {
    top: 0;
}
.on-mobile .overflow-container {
    max-height: 90vh;
    overflow-y: auto;
}
.genre-explain ul {
    padding-left: 20px;
}
.genre-explain li {
    font-family: "hindsemibold","Segoe UI", "Open Sans";
    font-size: 20px;
    line-height: 1.2;
}
.facebookVideo .tile-large.fb2 {
    height: 410px;
    flex: 0 1 400px;
}
.facebookVideo {
    height: 98vh;
    overflow-y: auto;
}
.facebookVideo img {
    height: 62%;
}
.web .input-control.file,
.web .button-contain {
    margin: 1rem;
    width: 13rem;
}
.batchInputWrap.web .input-control.file {
    width: 86%;
}
.web .input-control input {
    background: transparent;
    border: none;
}
.web .input-control.file button {
    height: 2.3rem;
}
.web button {
    width: 13rem;
    font-size: 1.5rem;
    border-radius: .5rem;
}
.batchInputWrap.web .input-control.file button {
    height: 3rem;
    width: 100%;
}
.notify-text-wrap {
    margin-bottom: 2rem;
    padding: 1rem;
}
.team-grid {
    overflow-x: hidden;
    overflow-y:auto;
    max-height:70vh;
    height: 700px;
}
.team-grid .row {
    height: 6rem;
}
.team-select {
    flex: 1 1 33%;
    min-width: 92px;
}
.notify-overlay .colors .toolbar .toolbar-button.team-select {
    flex: 1 1 16%;
    height: 100%;
    min-width: 6rem;
    max-height: 6rem;
}
.tester {
    margin-top: 6rem;
}
.ng-enter.show-user,
.ng-enter.show-frame-rate {
    animation: bounce-in-bottom .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
/*.ng-enter.show-render,*/
.ng-enter.show-share {
    animation: slide-in-bottom .3s ease-in both;
}
.ng-leave.show-user,
.ng-leave.show-frame-rate,
.ng-leave.show-share {
    animation: bounce-out-bottom .75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.ng-leave.show-render {
    animation: slide-out-bottom .3s ease-in both;
}
.ng-enter.show-social {
    animation: slide-in-left .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ng-leave.show-social {
    animation: slide-out-left .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.show-render,
.show-user,
.show-share,
.show-social {
    position: absolute;
    top: 0;
    height: 100vh;
    background-color: white;
    z-index: 1056;
}
.show-frame-rate {
    position: absolute;
    top: 0;
    height: 100vh;
    background-color: white;
    z-index: 1050;
}
.show-user .render,
.show-frame-rate .render {
    height: 100%;
}
.cell-show .mif-mobile,
.cell-show .mif-display {
    font-size: 5.5rem;
}
.input-control-container {
    display: flex;
    align-items: center;
    width: 3rem;
}
.cell-img-wrap {
    height: 5.5rem;
    width: 4rem;
    position: relative;
}
.cell-img-wrap img {
    height: 100%;
    width: 100%;
}
.color-fill-16x9 {
    width: 2rem;
    height: 1.4rem;
    background-color: lightsalmon;
    top: 23%;
    right: 25%;
}
.color-fill-16x9-monitor {
    height: 2.9rem;
    background-color: lightsalmon;
    top: 6.5%;
    width: 4.9rem;
    left: 6%;
}
.color-fill-2x3 {
    width: 2rem;
    height: 3.2rem;
    background-color: lightgreen;
    top: 11.7%;
    right: 25%;
}
.color-fill-2x3-monitor {
    height: 2.75rem;
    background-color: lightgreen;
    top: 7.8%;
    width: 4.2rem;
    left: 12%;
}
.color-fill-1x1 {
    width: 2rem;
    height: 2.05rem;
    background-color: lightblue;
    top: 18%;
    right: 25%;
}
.color-fill-1x1-monitor {
    height: 2.7rem;
    background-color: lightblue;
    top: 8.2%;
    width: 3.3rem;
    left: 19%;
}
.color-fill-9x16 {
    width: 2rem;
    height: 4rem;
    background-color: yellow;
    top: 7%;
    right: 25%;
}
.color-fill-9x16-monitor {
    height: 2.7rem;
    background-color: yellow;
    top: 8%;
    width: 1.5rem;
    left: 36%;
}
.exit {
    position: absolute;
    right: 2%;
    top: 2%;
    cursor: pointer;
    user-select: none;
    z-index: 2;
}
.o-wrap {
    margin: .5rem 0;
}
.save-wrapper {
    max-width: 33rem;
}
.save-wrapper h2 {
    margin: 1rem 0;
}
#preview .save-button-wrapper,
#select-video .save-button-wrapper,
#un-rendered-video .save-button-wrapper,
#save .save-button-wrapper,
#save-options .save-button-wrapper,
#title .save-button-wrapper,
#update .save-button-wrapper,
#save-new .save-button-wrapper,
#select-audio .save-button-wrapper {
    margin-bottom: 50px;
}
#preview.on-mobile .save-button-wrapper {
/*    margin-bottom: 88px;*/
};
.save-button-wrapper a {
    margin: 1rem 0;
    box-shadow: 1px 1px 15px 1px #ffffff;
    line-height: 1.6rem;
}
.render .exit-button .warning {
    flex: 0 1 100%;
}
.direction-wrap {
    position: relative;
    height: 3rem;
    background-color: white;
    z-index: 4;
}
.show-frame-rate .direction-wrap {
    height: 3rem;
    padding: 0 1%;
    width: 100vw;
    position: absolute;
}
.show-render .direction-wrap,
.show-share .direction-wrap {
    height: 3rem;
    margin: 0 1%;
    z-index: 7;
    background-color: transparent;
}
.render .arrow-wrap,
.show-frame-rate .arrow-wrap,
.show-render .arrow-wrap,
.show-share .arrow-wrap {
    height: 3rem;
    width: 4rem;
    cursor: pointer;
    user-select: none;
    z-index: 6;
}
.render .arrow-wrap.right,
.show-frame-rate .arrow-wrap.right,
.show-render .arrow-wrap.right,
.show-share .arrow-wrap.right {
    position: absolute;
    right: 3rem;
}
.arrows {
    width: 13rem;
    height: 3rem;
}
.share-close-button {
    right: 2%;
    top: 6%;
    display: flex;
    height: 3rem;
    width: 3rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 2rem;
}
.show-render .share-close-button,
.show-share .share-close-button {
    position: relative;
}
.ng-hide#register,
.ng-hide#orientation,
.ng-hide#help {
    animation: lightSpeedOut .5s ease;
}
.ng-hide#preview,
.ng-hide#share-options,
.ng-hide#save,
.ng-hide#title,
.ng-hide#quality,
.ng-hide#select-video,
.ng-hide#select-audio,
.ng-hide.google-sign-in,
.ng-hide.google-permission,
.ng-hide#login-view,
.ng-hide#reminder-choose,
.ng-hide#shareAgain,
.ng-hide#upload-options,
.ng-hide#template-options,
.ng-hide#save-options,
.ng-leave#update {
    animation: slide-out-right .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ng-hide-remove#register,
.ng-hide-remove#orientation,
.ng-hide-remove#help {
    animation: lightSpeedIn .5s ease;
}
.ng-hide-remove#preview,
.ng-hide-remove#share-options,
.ng-hide-remove#save,
.ng-hide-remove#save-options,
.ng-hide-remove#quality,
.ng-hide-remove#title,
.ng-hide-remove#select-video,
.ng-hide-remove#select-audio,
.ng-hide-remove.google-sign-in,
.ng-hide-remove.google-permission,
.ng-hide-remove#login-view,
.ng-hide-remove#shareAgain,
.ng-hide-remove#reminder-choose,
.ng-hide-remove#upload-options,
.ng-hide-remove#template-options,
.ng-enter#upload-options,
.ng-enter#update { /*this one is for twitter only*/
    animation: slide-in-right .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ng-enter#google,
.ng-enter#facebook,
.ng-enter#linkedin,
.ng-enter#save-new,
.ng-enter#twitter,
.ng-enter#instagram,
.ng-hide-remove#frame-rate,
.ng-enter#pinterest,
.ng-hide-remove#reminder-youtube,
.ng-hide-remove#reminder-savedVideo,
.ng-hide-remove#templates {
    animation: slide-in-left .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ng-leave#google,
.ng-leave#facebook,
.ng-leave#linkedin,
.ng-leave#twitter,
.ng-leave#instagram,
.ng-leave#pinterest,
.ng-hide#frame-rate,
.ng-leave#save-new,
.ng-hide#reminder-youtube,
.ng-hide#reminder-savedVideo,
.ng-hide#templates {
    animation: slide-out-left .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.insta-container {
    width: 95vw;
    height: 100%;
    position: absolute;
    top: 2rem;
    overflow-y: auto;
}
.insta-image-container {
    flex: 1 1 40%;
    margin: 0 1rem 1rem 1rem;
}
.on-mobile.insta-image-container {
    padding: 1rem 0;
    border: 1px solid gainsboro;
}
.insta-image-container .toolbar-section {
    height: 303px;
}
.insta-image-container .input-control {
    height: 70px;
    width: 34px;
}
.insta-image-wrapper {
    min-height: 303px;
    margin: 0 1rem;
}
.insta-right-container {
    flex: 0 1 40%;
    max-height: 75%;
    z-index: 2;
    background-color: #f3f3f3;
    min-width: 280px;
}
.insta-image-preview-container {
    height: 303px;
    width: 200px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.insta-left-container {
/*    flex: 1 1 60%;*/
}
.group-container {
    min-height: 25%;
    max-height: 75%;
    width: 80%;
    overflow: auto;
}
.group-image-container {
    height: 3rem;
    width: 3rem;
    border-right: 2px solid white;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.group {
    margin: .5rem 0;
    position: relative;
    height: 3rem;
    cursor: pointer;
}
.group button {
    border-radius: 5px;
    margin-right: 1rem;
}
/*
.group button.ng-hide-remove {
    animation: fadeIn .5s linear;
}
.group button.ng-hide {
    animation: fadeOut .5s linear;
}
*/
.group .image-container {
    width: 2rem;
}
.group-text {
    width: 80%;
}
.change-container {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: white;
    z-index: 2;
    padding-top: 3.5rem;
    border: 1px solid gainsboro;
    border-radius: 8px;
}
.ng-enter.change-container {
    animation: fadeIn .3s linear;
}
.ng-leave.change-container {
    animation: fadeOut .3s linear;
}
.change-wrapper {
    width: 95%;
}
.change-container textarea {
    font-size: 18px;
    height: 132px;
    width: 100%;
    resize: none;
    color: gray;
    background-color: aliceblue;
    margin-bottom: 1rem;
    overflow: hidden;
}
.pin-visual-container {
    margin-bottom: 1rem;
}
.pin-visual-container .toolbar button {
    height: 26px;
    width: 26px;
    min-width: 0;
    padding: 0;
}
.pin-video-container {
    margin: 0 1rem;
    min-height: 269px;
    width: 280px;
}
.pin-video-container .mif-pencil {
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
}
.pin-video-container .toolbar {
    margin-bottom: .5rem;
}
.pin-video-container .toolbar:before {
    display: none;
}
.pin-video-container .toolbar-section {
    padding-left: 0;
}
.pin-video-container video {
    border: 1px solid gainsboro;
}
.pin-video-container .slider-container {
    min-width: 280px;
    width: 280px;
    margin: .5rem 0;
    flex: 0;
    z-index: 1;
}
.render .pin-video-container .primary {
    flex: none;
    width: 100%;
}
.pin-visual-container .caption {
    padding: 0 .5rem;
}
.pin-figures .pin-play-button {
    padding: 1rem;
    background-image: url(/img/pin-play-button.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.pin-video-container .pin-play-button {
    margin: 0 .5rem;
}
.pin-tits {
    max-width: 190px;
}
.fb-logout-container {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 4;
    background-color: white;
}
.fb-login-container {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 3;
    background-color: white;
}
.fb-page-select {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    background-color: white;
}
.fb-page-name {
    width: 75%;
    margin-left: 1rem;
}
.fb-login-button {
    background-color: #3b5998;
    width: 74%;
    max-width: 310px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.fb-login-button.download-achor,
.fb-regular-button.download-achor {
    line-height: 1.7;
}
.fb-regular-button {
    background-color: #7ad61d;
    color: #ffffff;
    width: 74%;
    max-width: 310px;
}
.share-with-container {
    position: absolute;
    background-color: white;
    height: 110%;
    min-width: 22rem;
}
.share-with-wrapper {
    margin: 0 5rem;
    height: 10rem;
    width: 56%;
    min-width: 200px;
}
.later {
    background-image: url(/img/Wink.png);
    background-position: center center;
    background-repeat: no-repeat;
}
#facebook .share-with-wrapper .input-control {
    height: auto;
}
.fb-page-select .share-with-wrapper {
    overflow-y: auto;
};
.share-with-wrapper img {
/*    margin-left: 1rem;*/
}
.share-with-container .exit-button button {
    flex: 100%;
    transition: all 0.3s linear;
}
.sharing-choices-wrapper {
    height: 19rem;
    min-width: 22rem;
    justify-content: space-around;
}
.register-choices-wrapper {
    height: 8rem;
    width: 90%;
    margin: auto;
    margin-top: 1rem;
}
.sharing-choices-wrapper .image-button,
.render .warning,
.render .success,
.render .primary,
.render .danger {
    height: 3.125rem;
    font-size: 1.3rem;
    color: white;
    border-radius: 4px;
}
.register-input-container .image-button {
    height: 2.125rem;
    width: 49%;
    font-size: 1rem;
    color: white;
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.register-input-container #delete-account .image-button {
    width: 97%;
    padding: 0 0 0 2.75rem;
}
.render .warning,
.render .success,
.render .primary {
    flex: 0 1 48%;
}
.render .lighten.primary {
    flex-basis: inherit;
}
.register-input-container .image-button.paypal {
    color: white;
    background-color: #009cde;
}
.register-input-container .image-button.facebook,
.sharing-choices-wrapper .image-button.facebook {
    background-color: #8b9dc3;
}
.register-input-container .image-button.linkedin,
.sharing-choices-wrapper .image-button.linkedin {
    background-color: black;
}
.register-input-container .image-button.youtube,
.sharing-choices-wrapper .image-button.youtube {
    background-color: #282828;
}
.register-input-container .image-button.twitter,
.sharing-choices-wrapper .image-button.twitter {
    background-color: #657786;
}
.register-input-container .image-button.google-plus,
.sharing-choices-wrapper .image-button.google-plus {
    background-color: white;
    color: #dd4b39;
    border: 2px solid #dd4b39;
}
.register-input-container .image-button.pinterest,
.sharing-choices-wrapper .image-button.pinterest {
    border: 2px solid #bd081c;
    background-color: white;
    color: #bd081c;
}
.register-input-container .image-button .icon,
.sharing-choices-wrapper .image-button .icon {
    width: 3.125rem;
    color: white;
    font-size: 1.5rem;
    border-radius: 4px 0 0 4px;
}
.register-input-container .image-button .icon.mif-pinterest,
.register-input-container .image-button .icon.mif-google-plus,
.sharing-choices-wrapper .image-button .icon.mif-pinterest,
.sharing-choices-wrapper .image-button .icon.mif-google-plus {
    border-radius: 2px 0 0 2px;
}
.register-input-container .mif-facebook,
.sharing-choices-wrapper .mif-facebook {
    background-color: #3b5998;
    color: white;
}
.register-input-container .mif-google-plus,
.sharing-choices-wrapper .mif-google-plus {
    background-color: #dd4b39;
    color: white;
}
.register-input-container .mif-twitter,
.sharing-choices-wrapper .mif-twitter {
    background-color: #1da1f2;
    color: white;
}
.register-input-container .mif-youtube,
.sharing-choices-wrapper .mif-youtube {
    background-color: #ff0000;
}
.register-input-container .mif-paypal {
    background-color: #003087;
}
.register-input-container .mif-linkedin,
.sharing-choices-wrapper .mif-linkedin {
    background-color: #0077b5;
    color: white;
}
.register-input-container .mif-pinterest,
.sharing-choices-wrapper .mif-pinterest {
    background-color: #bd081c;
}
#title .input-control input,
#title .input-control textarea,
#update .input-control input,
#update .input-control textarea,
#save-new .input-control input,
#save-new .input-control textarea,
#save-new .input-control input,
#save-new .input-control textarea,
#upload-options .input-control input,
#upload-options .input-control textarea {
    font-size: 1.3rem;
    color: lightslategray;
    border-radius: 4px;
}
#title .input-control.text,
#title .input-control.textarea,
#update .input-control.text,
#update .input-control.textarea,
#save-new .input-control.text,
#save-new .input-control.textarea,
#upload-options .input-control.textarea {
    height: auto;
    width: 100%;
}
#title .input-control textarea,
#save-new .input-control textarea,
#upload-options .input-control textarea {
    height: 3.125rem;
    min-height: 3.125rem;
}
#update .input-control textarea {
    height: 4rem;
    min-height: 4rem;
    max-width: 86%;
    overflow-y: hidden;
    line-height: 1.2;
    resize: none;
}
#save-new .input-control textarea {
    max-width: 100%;
    max-height: 100px;
}
#upload-options .input-control textarea {
    max-width: 100%;
}
.tweet-button-container {
    height: 100%;
    width: 100%;
}
.tweet-button-container button {
    width: 310px;
}
.sharing-choices-wrapper .tweet-button-container button.r1 {
    background-color: #1DA1F2;
    top: -82px;
}
.tweet-button-container button.r2 {
    top: -78px;
    height: 55px;
}
#twitter-button {
    width: 310px;
    height: 55px;
    margin: 10px;
}
#twitter-button iframe.twitter-share-button {
    -webkit-transform: scale(4,1.8);
        -ms-transform: scale(4,1.8);
            transform: scale(4,1.8);
}
#upload-options button.twitter {
    font-size: 27px;
    top: -82px;
    height: 55px;
    pointer-events: none;
}
#upload-options button.twitter span {
    position: absolute;
    top: 14px;
    left: 94px;
    font-size: 27px;
    background-color: inherit !important;
}   
#title .video-title-container .helper-button,
#update .video-title-container .helper-button,
#save-new .video-title-container .helper-button {
    height: 2.8rem;
    font-size: 1.3rem;
    right: 4.5rem;
}
#title .tag-container textarea,
#update .tag-container textarea,
#save-new .tag-container textarea {
    flex: 0 1 88%;
    font-size: 1rem;
    color: lightslategray;
}
.title-wrapper {
    max-width: 45rem;
}
#open-animation,
#preload {
    top: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 7;
    background-color: #00AEEF;
}
#save, #share-options, #title, #update, #save-new, #preview, #render-error, #select-video, #select-audio, #google, #facebook, #twitter,
#instagram, #linkedin, #pinterest, #template-options, #save-options {
    top: 3rem;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: white;
}
#preview {
    top: 0;
}
#render-error {
    z-index: 10;
}
#render-error .image-container {
    height: 128px;
}
#preview {
    z-index: 6;
}
#preview video {
/*    border: 2px solid gainsboro;*/
}
#preview .save-button-wrapper {
    height: calc( 3.125rem + 50px );
    max-width: 573px;
    width: 100%;
/*
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
*/
}
#preview .save-button-wrapper a.ng-hide {
    animation: fadeOut .3s linear both;
}
#preview .save-button-wrapper a.ng-hide-remove {
    animation: fadeIn .3s linear both;
}
/*these un-hide the video controls that are hidden by metro.js*/
#preview video::-webkit-media-controls {
    display: flex !important;
}
video::-webkit-media-controls-enclosure {
    display: flex !important;
}
.ng-enter.preview-vid-container {
    animation: scale-in-center .5s linear;
}
.ng-leave.preview-vid-container {
    animation: scale-out-center .5s linear;
}
.on-mobile .preview-vid-container {
    position: absolute;
}
#select-video,
#template-options {
    z-index: 7;
}
#select-audio {
    z-index: 5;
}
.mix-audio-container {
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: white;
}
.mix-suspended-container {
    height: 100%;
    width: 100%;
    z-index: 3;
    background-color: white;
}
/*
.mix-audio-container .input-control.file {
    width: 65%;
    max-width: 350px;
    margin: 20px;
}
*/
.que-wrap {
    left: -15%;
    top: -5px;
}
.reset-wrap {
    right: -12%;
    top: 4px;
}
.mix-video-container {
    margin-bottom: 10px 0;
    max-width: 500px;
    height: 27%;
}
#mix-demo-video {
    height: 100%;
    max-width: 65%;
}
.mix-slider-container {
    width: 35%;
    max-width: 200px;
}
.mix-slider-wrap {
/*    width: 50px;*/
}
.mix-slider-wrap .slider.vertical .complete,
.mix-slider-wrap .slider-vertical .slider-backside {
    bottom: -4px;
}
.mix-slider-wrap .slider.vertical .marker {
    width: 2rem;
    height: 1.5rem;
    left: 23%;
}
.use-ours-container {
    width: 600px;
    top: 0;
    background-color: navajowhite;
    z-index: 3;
    max-width: 95%;
    border: 1px solid gainsboro;
    border-radius: 6px;
    height: 95%;
}
.use-ours-container .close-row {
    top: 0;
    z-index: 2;
}
.use-ours-container .toolbar-button {
    height: 2rem;
    width: 2rem;
}
.video-file-input {
    flex: 0 1 48%;
    width: 100%;
    height: 3.125rem;
    font-size: 1.3rem;
    color: white;
    background-color: #fa6800;
    border-radius: 4px;
    margin: 1rem 0;
    padding-bottom: .2125rem;
    box-shadow: 1px 1px 15px 1px #ffffff;
}
.initial-select-container {
    width: 65%;
    max-width: 350px;
    padding-left: 5px;
    border: 1px #d9d9d9 solid;
    height: 2.125rem;
}
.isb-wrap {
    height: 2.5rem;
    width: 100%;
}
.isb {
    width: 33% !important;
    max-width: 175px;
    height: 100%;
    font-size: 1.3rem;
    border-radius: 4px;
}
.i-wrapper {
    width: 46px;
}
.input-control-to-button.input-control {
    margin: 0;
}
.input-control-to-button {
    width: 100%;
    font-size: 1.3rem;
    padding-bottom: .2125rem;
    min-height: 0;
    height: 100%;
}
.input-control-to-button.input-control.file input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: pointer;
}
.input-control-to-button .input-file-wrapper {
    display: none;
}
    
.initial-select-container button {
    top: 0;
    margin: 0;
    right: 0;
}
.beds-container {
    top: 3rem;
    height: 80%;
    overflow-x: hidden;
}
.beds-wrap {
    border: 1px solid gainsboro;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}
.beds-play-status-container {
    height: 1.8rem;
    width: 1.8rem;
}
#save, #save-options {
    z-index: 4;
}
#google, #facebook, #twitter, #instagram, #linkedin, #pinterest {
    z-index: 3;
}
#google-video {
    height: 26rem;
    min-width: 22rem;
}
#google-video span.youtube-icon {
    background-color: red;
    width: 3.125rem;
}
.google-error {
    z-index: 4;
}
.youtube-icon {
    background-image: url(/img/youtube_social_square_red.png);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: red !important;
}

#google .share-with-container {
    height: 26rem;
}
#facebook .share-with-container,
#linkedin .share-with-container,
#instagram .share-with-container,
#twitter .share-with-container {
    height: 21rem;
}
.bunch-o-shit {
    max-width: 550px;
    margin: 20px;
}
.status-container {
    width: 100%;
}
.user-wrapper {
    width: 86%;
    line-height: 1.2;
}
.google-container {
/*
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: white;
*/
}
#orientation,
#frame-rate {
    position: relative;
    width: 100%;
}
#quality {
    top: 3rem;
    height: 90%;
    width: 100%;
}
#frame-rate h1,
#quality h1 {
    margin: 0;
    margin-bottom: 1rem;
    max-width: 80%;
}
#frame-rate .tile h2,
#quality .tile h2,
#template-options h2 {
    font-size: 5rem;
    padding-left: 1rem;
}
#template-options h4 {
    font-size: 3rem;
}
#quality .tile h2,
#template-options h2 {
    color: #f0a30a;
}
#quality .selected h2,
#template-options .selected h2 {
    color: white;
}
#frame-rate .tile h5,
#quality .tile h5,
#template-options .tile h5 {
    margin-left: -4px;
}
#frame-rate ul,
#quality ul {
    padding-left: 35px;
}
#quality .tile-wrapper {
    height: 70%;
}
#quality .tile-wrapper .o-wrap {
    height: 35%;
}

#frame-rate .tile,
#template-options .tile {
    border: 3px solid;
    height: 120px;
    width: 320px;
    user-select: none;
}
#instructions .tile {
    border: 3px solid;
    height: 120px;
    user-select: none;
}
#frame-rate .button,
#template-options .button {
    line-height: 1.5;
    font-weight: bold;
    flex: 1 1 50%;
}
#quality .button {
    line-height: 1.5;
    font-weight: bold;
    width: 250px;
    margin: 10px;
}
.param-head {
    min-width: 27%;
}
#help {
    height: 100%;
    overflow-y: auto;
}
#help .mif-thumbs-up,
#help .mif-thumbs-down {
    font-size: 1rem;
}
.help-container {
    margin-top: 2.65rem;
    color: cadetblue;
}
.sizing-container {
    background-color: ghostwhite;
    padding: 10px;
    margin: 10px;
    border: 1px solid gainsboro;
}
#title, #update, #save-new {
    z-index: 3;
}
#share-options {
    z-index: 2;
    top: 6rem;
}
#register {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url(/images/simplify_3-min.jpeg);
    background-position: 13% 40%;
    background-size: cover;
    background-repeat: no-repeat;
}
.pick-plan {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100vw;
    z-index: 3;
}
.pick-plan h1 {
    font-size: 3rem;
}
.pick-plan .tile {
    background: aliceblue;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
    border-radius: 2rem;
    position: relative;
}
.pick-plan .tile:hover {
    outline: none;
/*    border: 1px solid darkgray;*/
}
.pick-plan ul {
    height: 17%;
    background-color: white;
    z-index: 2;
}
.pick-plan .tile button {
    height: 30px;
    border-radius: 30px;
    width: 86px;
}
.pick-plan .frame-images {
    width: 78%;
    margin: auto;
    position: absolute;
    bottom: 5%;
    right: 0;
    left: 0;
}
.pick-plan .save-button-wrapper button {
    font-size: 1.2rem;
    height: 2.5rem;
    border-radius: 2rem;
    width: 248px;
}
.ng-leave#preload {
    animation: slide-out-right .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#preload .preload-template-wrap {
    height: 26.3rem;
    width: 30.3rem;
    color: #444;
    line-height: 1.5em;
    margin: auto;
    max-width: 100%;
    position: relative;
    border: 5px solid #000;
    background: #fff;
    z-index: 1001;
}
#digging-preload,
#producing-preload,
#verifying-preload,
#updating-preload,
#demo-preload {
    height: 100%;
    margin: auto;
    position: relative;
    width: 100%;
}
.preload-inner {
    margin: auto; 
    position: relative; 
    padding: 20px 20px 20px 20px; 
    height: inherit;
}
#producing-preload h2,
.preload-inner h2 {
    text-align: center;
    font-family: 'air_americanaregular';
}
#digging-preload img,
#producing-preload img,
#verifying-preload img,
#updating-preload img,
#transferring-preload img {
    height: 61%; 
    display: block; 
    margin: auto;
}
.render-complete {
    width: 100%;
    min-height: 1.5rem;
    font-family: sans-serif;
}
.cloud-mask-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 40%;
            flex: 0 1 40%;
    position: relative;
    pointer-events: none;
}
.cloud-1 {
    animation: crawl-cloud-1 36s linear both 2;
    flex: 0 1 40%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80%;
/*    transform: translateX(10%);*/
    background-image: url(/images/cloud.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 4;
}
.cloud-2 {
    animation: crawl-cloud-2 30s linear both 2;
    flex: 0 1 20%;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    height: 50%;
/*    transform: translateX(10%);*/
    background-image: url(/images/cloud_2.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 4;
}
.plane {
    animation: crawl-cloud-1 25s linear both 2;
    flex: 0 1 30%;
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    height: 25%;
/*    transform: translateX(10%);*/
    background-image: url(/images/plane.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}
.register-input-container {
/*
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40%;
            flex: 1 1 40%;
    min-height: 388px;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 1rem;
*/
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.register-input-container h3 {
    font-family: 'fira_sansbold';
    margin-bottom: 0.5rem;
}
.register-input {
    width: 100%;
    height: 100%;
    position: relative;
}
.register-input .fb-login-container {
    height: inherit;
    width: 100%;
    position: absolute;
    z-index: 3;
    background-color: aliceblue;
    top: 0;
    border-radius: 2rem;
}
.register-input .ng-enter.fb-login-container {
    animation: scale-in-ver-bottom 0.5s ease both;
}
.register-input .ng-leave.fb-login-container {
    animation: scale-out-ver-bottom 0.5s ease both;
}
/*
.register-input .ng-hide-remove.fb-login-container {
    animation: scale-in-ver-bottom 0.5s ease both;
}
*/
.register-input .ng-hide.fb-login-container {
    animation: scale-out-ver-bottom 0.5s ease both;
}
.register-input .fb-login-container button {
    font-size: 1.1rem;
}
.register-input .fb-login-container
.register-input .input-control.modern .helper-button {
    background-color: inherit;
    font-size: 1.2rem;
    right: 7%;
}
.input-container {
    position: relative;
    width: 90%;
    max-width: 500px;
    background: aliceblue;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.12);
    border: 1px solid darkgray;
    border-radius: 2rem;
    padding-bottom: 1rem;
/*
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
*/
}
.login .input-container {
    width: inherit;
    max-width: 500px;
    height: 100%;
}
.user {
}
.ng-leave.user {
    animation: slide-out-bottom 0.5s ease both;
}
.ng-enter.user {
    animation: slide-in-bottom 0.5s ease;
}
.input-container.user {
    position: absolute;
    width: 95%;
    min-height: 350px;
    max-width: 530px;
    z-index: 2;
}
.input-container form {
    width: 100%;
}
.input-container .input-control.modern {
    width: 90%;
    margin: 0;
    height: 5rem;
}
.input-container .input-control.modern.password {
    margin-left: 0;
}
.input-container .edit-more-container .input-control {
    margin: 6px 0;
}
.register-button-container {
    width: 100%;
    padding: .5rem;
}
.user .register-button-container button,
.confirm-container button {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 30%;
    flex: 0 1 30%;
}
.get-started .confirm-container button {
/*    height: 2.125rem;*/
}
.monitor-stand {
    width: 90%;
    height: 3%;
    background-color: lightgray;
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
}
.register-input-container .google-signin-button {
    height: 22%;
    width: 50%;
    max-width: 252px;
    background-image: url(/img/google-signin.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none;
    cursor: pointer;
}
.register-input-container .paypal-signin-button {
    height: 17%;
    width: 50%;
    max-width: 252px;
    background-image: url('https://www.paypalobjects.com/webstatic/en_US/developer/docs/lipp/loginwithpaypalbutton.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none;
    cursor: pointer;
}
.register-input-container .linkedIn-signin-button {
    height: 15%;
    width: 49%;
    max-width: 252px;
    background-image: url(/img/linkedIn-Sign-in-Large-Default-retina.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none;
    cursor: pointer;
}
#linkedin .linkedIn-signin-button {
    height: 15.5%;
    width: 74%;
    max-width: 310px;
    margin: 10px;
    background-image: url(/img/linkedIn-Sign-in-Large-Default-retina.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none;
    cursor: pointer;
}
.error-message {
    background-color: yellow;
}
.all-good {
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
}
.device-type {
    position: absolute;
    display: block;
    right: 10%;
    top: 40%;
    font-size: 1.5rem;
}
.input-control.modern input {
    color: gray;
    font-size: 1.5rem;
    top: 3rem;
}
.pay {
    z-index: 2;
}
.paypal-container {
    width: 57%;
    margin: auto;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
}
paypal-button {
/*    width: 100%;*/
}
.paypal-message {
    font-family: 'Open Sans Light';
    padding: 0 5%;
}
.purchase-table {
/*    height: 10rem;*/
    min-width: 80%;
    border: 1px solid gainsboro;
    margin-bottom: 1rem;
    border-radius: 1rem;
    background-color: ghostwhite;
}
.begin {
/*    height: 108%;*/
}
.login {
    position: absolute;
    width: 100%;
}
.login-button-container {
    width: 90%;
}
.login-button-container button {
    margin: .5rem 0;
    font-size: 1rem;
    border-radius: 6px;
    transition: background-color 0.3s linear;
}
.credentials {
    width: 70%;
    top: inherit;
    max-width: 375px;
    min-height: 323px;
}
.credentials .login-button-container {
    top: 60%;
}
.credentials .login-button-container button {
    width: 40%;
}
.credentials form {
    top: 22%;
}
.close-button-container {
    right: 2%;
    height: 10%;
    width: 18%;
    z-index: 3;
    user-select: none;
    cursor: pointer;
    background-image: url(/images/Sun.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.closer {
    height: 40%;
    width: 100%;
    z-index: 4;
    position: absolute;
    top: 30%;
    background-image: url(/images/Close.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.error-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 101;
}
.ng-leave.error-container {
    animation: scale-out-ver-bottom 0.5s ease;
}
.ng-hide-remove.error-container {
    animation: scale-in-ver-bottom 0.5s ease;
}
.ng-hide-add.error-container {
    animation: scale-out-ver-bottom 0.5s ease;
}
.error-container .input-container {
    top: 0;
    box-shadow: none;
    border: none;
    height: 100%;
    width: 100%;
    padding: 0;
    max-width: none;
}
.error-message-container {
    width: 80%;
    min-height: 50%;
    max-height: 80%;
    border: 1px solid gainsboro;
    border-radius: 1rem;
    background-color: ghostwhite;
}
#pay-message button {
    width: 40%;
    margin: 0.625rem;
    font-size: 1rem;
    border-radius: 6px;
}
.have-it {
    font-size: 1.1rem;
}
.user-label {
    position: absolute;
    display: block;
    z-index: 1;
    color: #fa6800;
    font-size: 1.3rem;
    opacity: 1;
    left: 0;
    transition: all 0.3s linear;
}
.input-container .input-control.modern input:focus ~ .informer {
    bottom: -1.25rem;
}
.input-control.modern .placeholder {
    top: 2.2rem;
}
.user-purchase-table {
    border: 1px solid gainsboro;
    margin-bottom: 2%;
    background-color: ghostwhite;
    width: 90%;
}
.user-purchase-table-expanded {
    margin-bottom: 7%;
    background-color: ghostwhite;
    width: 100%;
    overflow-y: auto;
    max-height: 320px;
}
.user-purchase-table .table th, .user-purchase-table .table td {
    padding: 1% 3%;
    font-size: 90%;
}
.user-purchase-table td button {
    font-size: 120%;
    line-height: 1;
}
.user-purchase-table td {
    max-width: 145px;
}
.heading-wrap {
    width: 90%;
}
.more-button {
    line-height: 1;
    font-size: 120%;
    margin: 2%;
    width: 80px;
    border-radius: 5px;
}
.sign-out {
    left: 24px;
}
.headline-wrap button {
    position: absolute;
    right: 6%;
    line-height: 1;
    font-size: 120%;
    border-radius: 5px;
}
.color-container {
    width: 95%;
    position: relative;
    border-bottom: 1px solid gainsboro;
    border-top: 1px solid gainsboro;
    margin: 2% 0;
}
.purch {
    background-color: cornsilk;
}
.devi {
    background-color: bisque;
}
.person {
    background-color: lightcyan;
}
.item-name {
    width: 32%;
}
.width-90 {
    width: 90%;
}
.width-86 {
    width: 86%;
}
.width-100 {
    width: 100%;
}
.width-50 {
    width: 50%;
}
.height-100 {
    height: 100%;
}
.height-50 {
    height: 50%;
}
.height-35 {
    height: 35%;
}
.height-86 {
    height: 86%;
}
.zindex-1100 {
    z-index: 1100;
}
.margin-auto {
    margin: auto;
}
.bg-azure {
    background-color: azure !important;
}
.bg-ghostwhite {
    background-color: ghostwhite !important;
}
.rotate-270 {
    transform: rotate(270deg);
}
.large-button-text {
    font-size: 1.2rem !important;
}
.edit-more-container {
    position: relative;
    height: inherit;
    width: 100%;
    z-index: 2;
    background-color: aliceblue;
    border-radius: 2rem;
    padding: 1rem;
}
.edit-more-container .replace-form {
    width: 70%;
    margin: auto;
}
.ng-enter.edit-more-container,
.ng-enter.pay,
.ng-enter.login,
.ng-enter.pick-plan,
.ng-enter.error-container {
    animation: slide-in-bottom 0.5s ease;
}
.ng-leave.edit-more-container,
.ng-leave.pick-plan,
.ng-leave.pay,
.ng-leave.login {
    animation: slide-out-bottom 0.5s ease;
}
.ng-hide-add#preload {
    animation: slide-out-bottom 0.5s ease;
}
/*
.ng-hide-remove#preload {
    animation: slide-in-bottom 0.5s ease;
}
*/
.forgot-wrap {
    cursor: pointer;
    user-select: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.image-container img.password-emoji {
    height: 30px;
    width: 30px;
    margin-left: 10px;
}
.image-container.challenge {
    height: 120px;
    width: 80%;
    margin: auto;
}
.reset .input-control.modern input {
    font-size: 1.75rem;
    padding-bottom: .5rem;
}
.image-add-wrap {
    height: 85%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
}
.image-add-container {
    height: 1px;
}
.image-add-container .image-container {
    height: 29%;
    flex: 0 1 33.33%;
    max-width: 33.33%;
    min-height: 110px;
/*
    height: 29%;
    flex: 1 1 33.33%;
    min-height: 110px;
    min-width: 150px;
*/
}
#add-many .register-button-wrap button {
    width: 40%;
    height: 60%;
    font-size: 20px;
}
.vid-container .register-button-container .button.primary {
    background: #00AEEF;
}
.upper-vid-container {
    height: 100%;
}
.register-button-wrap {
    background-color: ghostwhite;
    height: 15%;
}
.image-mode {
    z-index: 1050;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    margin-top: 0;
}
.ng-enter.image-mode,
.ng-hide-remove.google-error {
    animation: bounce-in-bottom .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.ng-leave.image-mode,
.ng-hide-add.google-error {
    animation: bounce-out-bottom .75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.image-mode .register-input {
    z-index: 4;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.image-mode .ng-hide-remove.register-input {
    animation: slide-in-bottom .5s ease;
}
.image-mode .ng-hide-add.register-input {
    animation: slide-out-bottom .5s ease;
}
.image-mode .credentials {
    min-height: 253px;
}
#homepage .image-mode .rename-wrap .helper {
    right: 3%;
    padding: 0;
}
.image-mode .input-control input {
    padding-right: 13% !imporant;
}
.image-mode .toolbar-section {
    padding: 0;
}
.text-area-2 button {
    width: 46%;
}
.add-image-wrap {
    height: 100%;
    z-index: 1;
}
.add-image-wrap h3 {
    color: gainsboro;
    font-size: calc(100vh * .028);
    margin: 0 0 5px 0;
    text-align: center;
}
.add-image-wrap .mif-image,
.add-image-wrap .mif-film {
    color: gainsboro;
}
.add-image-wrap .mif-file {
    font-size: 2rem;
    margin-bottom: 7px;
}
.add-image-wrap.input-control,
.video-file-input.input-control {
    margin: 0;
}
.add-image-wrap.input-control.file,
.video-file-input.input-control.file {
    width: inherit;
}
.add-image-wrap.input-control.file input[type=file],
.video-file-input.input-control.file input[type=file] {
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.video-file-input.input-control.file input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
}
.add-image-wrap .input-file-wrapper,
.video-file-input .input-file-wrapper {
    display: none;
}
#tempDiv .input-file-wrapper {
    opacity: 0;
}
.add-image-click {
    height: 100%;
    width: 100%;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    top: 0;
}
.image-alter-wrap {
    height: 100%;
}
.type-wrap,
.edit-wrap {
    position: absolute;
    top: .5rem;
    left: .5rem;
    background-color: floralwhite;
    width: 1.8rem;
    cursor: pointer;
    user-select: none;
/*    border-bottom-right-radius: 8px;*/
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 4px;
    font-size: 1.5rem;
    z-index: 3;
}
.add-text-wrap {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    background-color: floralwhite;
    cursor: pointer;
    user-select: none;
/*    border-top-right-radius: 8px;*/
    height: 1.5rem;
    width: 1.8rem;
    border-radius: 4px;
    z-index: 2;
}
.add-text-wrap h3 {
    line-height: 1;
}
.remove-wrap {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background-color: floralwhite;
    cursor: pointer;
    user-select: none;
/*    border-bottom-left-radius: 8px;*/
    height: 1.5rem;
    width: 1.8rem;
    border-radius: 4px;
    font-size: 1.2rem;
}
.remove-frame-wrap {
    position: absolute;
    top: .4rem;
    right: .4rem;
    background-color: floralwhite;
    cursor: pointer;
    user-select: none;
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 4px;
/*    font-size: calc(100vh * .04);*/
    font-size: 1.5rem;
    z-index: 3;
}
.remove-frame-wrap .mif-cancel {
    color: gainsboro;
}
.element-name {
    position: absolute;
    top: 36%;
}
.drag-wrap {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    background-color: floralwhite;
    cursor: pointer;
    user-select: none;
/*    border-top-left-radius: 8px;*/
    height: 1.5rem;
    width: 1.8rem;
    font-size: 1.2rem;
    text-shadow: none;
    border-radius: 4px;
    z-index: 2;
}
.text-mask {
    position: absolute;
    background-color: white;
    z-index: 3;
    opacity: .8;
    height: 100%;
    width: 100%;
}
.image-add-container .element-selected:after,
.image-add-container .element-selected:before {
    content: none;
}
.help-message-container {
    width: 80%;
    height: 100%;
    border: 1px solid ghostwhite;
    border-radius: 1rem;
    background-color: ghostwhite;
    margin: auto;
}
.help-icon-container {
    position: absolute;
    right: 3%;
    top: 3%;
    cursor: pointer;
    user-select: none;
}
.function-container {
    margin-top: 1rem;
    border-radius: 8px;
    border: 1px solid white;
}
.on-mobile.function-container {
    flex-direction: column;
    position: absolute;
    border: none;
    left: 100%;
    top: 0;
    margin: 0;
    max-width: 25%;
    height: 100%;
}
.duration-display-container {
    top: 0;
    left: 0;
    width: 4rem;
    height: 3rem;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    opacity: .6;
}
.duration-display {
    border-radius: 3px;
    background-color: gray;
    color: white;
    width: 3rem;
    height: 1.5rem;
}
.image-select-container {
    width: 4rem;
    height: 3rem;;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    opacity: .6;
}
.image-display {
    border-radius: 3px;
    background-color: red;
    color: white;
    width: 43px;
    height: 29px;
}
.image-display span {
    font-size: 1.5rem;
}
.genre-icon-container {
    width: 4rem;
    z-index: 2;
    cursor: pointer;
    user-select: none;
/*    opacity: .6;*/
    margin: 7px 0;
}
.on-mobile .genre-icon-container {
    width: 100%;
    margin: 0;
}
.genre-icon-container .image-container {
    border-radius: 3px;
/*    background-color: red;*/
    color: white;
    width: 46px;
    height: 34px;
    padding: 2px;
}
.genre-icon-container img {
    height: 90%;
    width: 70%;
}
.genre-icon-container,
.image-select-container,
.duration-display-container,
.show-input-container,
.get-started.on-mobile,
.everything-else-container,
.video-controls-container.on-mobile {
    -webkit-transition: opacity .3s .5s linear;
    transition: opacity .3s .5s linear;
}
.hide-controls .genre-icon-container,
.hide-controls .image-select-container,
.hide-controls .orient-display-container,
.hide-controls .show-input-container,
.hide-controls .get-started,
.hide-controls .everything-else-container,
.hide-controls.on-mobile.video-controls-container,
.hide-controls .video .media-indicator,
.hide-controls .screenshot-button,
.hide-controls .logo-button,
.hide-controls .duration-display-container,
.hide-controls #video-wrapper .logo-container {
    opacity: 0;
    -webkit-transition: opacity .3s 0s linear;
    transition: opacity .3s 0s linear;
}

/*
.genre-icon-container.draggable {
    cursor: move;
    cursor: url(/img/openhand.cur) !important;
    cursor: -webkit-grab !important;
    cursor:    -moz-grab !important;
    cursor:         grab !important;
}
.genre-icon-container.draggable:hover {
    cursor: pointer !important;
}
.genre-icon-container.draggable:active {
    cursor: url(/img/closedhand.cur) !important;
    cursor: -webkit-grabbing !important;
    cursor:    -moz-grabbing !important;
    cursor:         grabbing !important;
}
*/
.hide-icon-text .genre-icon-container p {
    display: none;
}
.show-input-container {
    top: 8%;
    left: 0%;
    width: 4rem;
    height: 3rem;;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    opacity: .6;
}
.show-input {
    border-radius: 3px;
    background-color: red;
    color: white;
    width: 43px;
    height: 29px;
}
.show-input span {
    font-size: 1.3rem;
    padding: .2rem;
}
#edit h4 {
    font-size: 1.5rem;
}
#edit .m-menu {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#edit.on-mobile .m-menu {
    top: 0;
}
#edit .m-menu-container {
    height: calc(100vh - 9rem);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: transparent;
    text-shadow: 1px 1px 2px #737373;
    border: 1px solid gainsboro;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#edit .m-menu li.disabled:hover {
    background-color: inherit;
    cursor: default;
    border: 0;
}
#edit .m-menu li.disabled  {
    position: relative;
    cursor: inherit;
}
#edit .m-menu li.disabled a {
    opacity: .1;
}
#edit .bin .m-menu > li > a.dropdown-toggle, .m-menu .m-menu-item > a.dropdown-toggle {
/*    padding: 1rem 1.125rem 1rem 1.125rem;*/
    padding: 1.2rem .4rem;
}
#edit .bin .m-menu .dropdown-toggle:before {
    display: none;
}
.disable-this {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}
#edit .m-menu a {
    font-size: 1rem;
    font-weight: bold;
    color: gray;
}
.link-replace-text {
    font-size: 1rem;
    font-weight: bold;
    padding: 1.2rem .4rem;
    color: #bebebe !important;
}
.opacity-slider-container a {
/*    padding: .5rem 1.625rem .5rem 1.125rem;*/
}
.dark {
    background-color: rgba(0, 0, 0, .4) !important;
}
.super-dark {
    background-color: rgba(0, 0, 0, .8) !important;
}

    


/*help menus*/
#messages {
    width: 100%;
    height: 100%;
    position: relative;
}
.message-container {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: white;
}
#messages .message-container {
    background-color: white;
}
#instructionsFrame1 {
    z-index: 3;
}
#instructionsFrame2 {
    z-index: 2;
}
#instructionsFrame3 {
    z-index: 1;
}
#instructionsframe3 .but-wrapper {
    bottom: auto;
}
.content-wrapper.ng-enter,
.content-wrapper.ng-hide-remove {
    animation: bounce-in-bottom .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.content-wrapper.ng-leave,
.content-wrapper.ng-hide-add,
#instructionsFrame1.ng-hide-add,
#instructionsFrame2.ng-hide-add {
    animation: bounce-out-bottom .75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.first-play-message.ng-hide-remove,
.next-mobile.ng-hide-remove {
    animation: fadeIn .5s ease-in;
}
.first-play-message.ng-hide-add,
.next-mobile.ng-hide-add {
    animation: fadeOut .5s ease-out;
}
.first-play-message {
    height: 100%;
    background-color: white;
    transition: background-color 0.3s ease;
}
.first-play-message p {
    color: gray;
    font-size: 1rem;
    line-height: 1.5;
}
.mobile-topline {
    position: absolute;
    top: 0;
}
.mob-container {
/*    height: 100%;*/
}
.mob-container .icon.mif-menu {
    font-size: 2rem;
    padding-bottom: .2rem;
}
.mob-container .icon.mif-arrow-up {
    position: absolute;
    right: -26%;
}
.first-play-message .icon-wrap {
    position: relative;
    width: 100%;
    height: 4rem;
}
.first-play-message .icon-wrap i {
    position: relative;
    font-size: 3rem;
    color: orange;
}
.box1 {
    position: relative;
    height: 100%;
    width: 100%;
}
.text-wrap {
    max-width: 350px;
}
.box2 {
    position: relative;
    height: 100%;
    width: 100%;
}
.first-play-message .box2 .desktop i {
    top: -54%;
    right: -57.5%;
}
.first-play-message .box2 .mobile i {
    top: -100%;
    left: 25.5%;
}
.box4 {
    position: relative;
    height: 100%;
    width: 100%;
}
.box5 {
    position: relative;
    height: 100%;
    width: 100%;
}
.first-play-message .icon-wrap {
    width: 100%;
}
.first-play-message .box5 .desktop i {
    position: absolute;
    top: -68%;
    left: 6%;
}
.first-play-message .box5 .mobile i {
    position: absolute;
    font-size: 4rem;
    color: lightgray;
    top: 50%;
    left: 41%;
}
.box6 {
    height: 100%;
}
.box6 .logo-font {
    position: relative;
    top: 0.1rem;
    line-height: .5;
}
.image-contain {
    position: relative;
}
.mobile .pointer-container {
    position: absolute;
    top: 192%;
    left: 45%;
}
.desktop .pointer-container {
    position: absolute;
    top: 37%;
    left: 8%;
}
.box6 .image-contain {
/*    height: 90%;*/
    width: 612px;
}
.box4 .image-contain {
    height: 60%;
}
.box2 .image-contain {
    height: 60%;
}
.box6 img {
/*    height: 100%;*/
}
.box4 button {
    vertical-align: text-bottom;
}
.next-mobile {
    height: 100%;
}
.box7 {
    position: relative;
    height: 75%;
}
.box7 img {
    height: 100%;
}
.box2 i, .box3 i, .box4 i, .box5 i {
    margin-top: 1rem;
}
.first-play-message .box4 .icon-wrap i {
    top: -77%;
    right: -83%;
}
.but-wrapper {
/*    height: 12%;*/
    z-index: 2;
}
.but-wrapper button {
    font-size: 1.5rem;
    min-width: 8rem;
    margin: 2% 0;
    border-radius: .5rem;
    line-height: 1;
    letter-spacing: .2rem;
/*
    -webkit-box-shadow: 1px 3px 34px 12px #ffffff; 
    box-shadow: 1px 3px 34px 12px #ffffff;
*/
}
#instructions .but-wrapper button {
    -webkit-box-shadow: none; 
    box-shadow: none;
    margin: 2% 2%;
}
#instructions .o-wrap button {
    width: 10rem;
    height: 3rem;
    font-size: 1rem;
    margin: 2% 0;
    border-radius: .5rem;
    line-height: 1;
    font-weight: bold;
    letter-spacing: .2rem;
}
.neg-margin {
    margin-right: -0.2rem;
}
.fira-sans-bold-big {
    font-family: 'fira_sansbold';
    font-size: 4rem;
}
.luckiest-guy-font-big {
    font-family: 'luckiest_guyregular';
    font-size: 4rem;
    letter-spacing: .1rem;
}
.supple {
    color: gray;
    margin: auto;
}
.splash {
    background-color: white;
/*    border: 8px solid yellow;*/
}
.dang-down {
    position: relative;
    top: .1rem;
    line-height: .5;
}
.margin-left-1rem {
    margin-left: 1rem;
}
.select-box {
    z-index: 2;
    cursor: pointer;
    position: absolute;
    top: 1px;
    right: 1px;
    height: 2rem;
    width: 2rem;
    border: 2px solid #4390df;
    background-color: white;
}
.select-box .icon {
    font-size: 1.7rem;
}
.linkedin-signin-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 101%;
    width: 100%;
    z-index: 3;
    background-color: white;
}
/*contact page*/
#contact {
/*
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-flow: column; -ms-flex-direction: column; flex-flow: column;
*/
    padding-bottom: 4rem;
    margin-bottom: 0;
    overflow-y: auto;
}
#contact .explain-popup-container {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    z-index: 1031;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
#contact .explain-popup {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    border: 1px solid #7b858e;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    -webkit-flex: 0 1 90%; -ms-flex: 0 1 90%; flex: 0 1 90%;
    -webkit-flex-flow: row wrap; -ms-flex-direction: row; -ms-flex-wrap: wrap; flex-flow: row wrap;
    z-index: 4;
    background: white;
    max-width: 30rem;
    overflow-x: hidden;
    font-family: Helvetica, sans-serif;
    margin: auto;
    position: relative;
}
#contact .explain-popup-header {
    height: 2rem;
    background-color: red;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
}
#contact .explain-body {
    width: 100%;
    padding: 1rem 3rem 2rem 3rem;
    max-height: 42rem;
    overflow: auto;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-flow: column; -ms-flex-direction: column; flex-flow: column;
    -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%;
}
#contact .explain-body h5 {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-flow: row nowrap; -ms-flex-direction: row; -ms-flex-wrap: none; flex-flow: row nowrap;
    -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
    -ms-flex-align: center; -webkit-align-items: center; align-items: center;
    margin-bottom: 0;
}
#contact .explain-body img {
    height: 3rem;
    width: 3rem;
    margin-left: 2rem;
}
#contact .explain-popup-header .global-close-icon {
    position: absolute;
    right: 1.5rem;
    top: 0.5rem;
    height: 1rem;
    width: 1rem;
    cursor: pointer;
}
#contact .alert .explain-popup-header {
    height: 2rem;
    background-color: red;
    width: 100%;
}
#contact .message-text-error {
    color: red;
}
#contact .message-text-success {
    color: rgb(9, 230, 27);
}
#contact .message-text-optional {
    color: blue;
}
#contact .hero-contact {
    background: url(../images/connect_1-min.jpg);
    background-size: cover;
    background-position: 0 24%;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 13rem;
    margin: 0;
    width: 100%;
}
#contact .hero-contact .logo {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex: 0 1 80%; -ms-flex: 0 1 80%; flex: 0 1 80%;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    margin-top: 2%;
    text-shadow: 10px 5px 15px 7px rgba(100,100,100,.5);
}
#contact .main-contact {
    margin: 0 auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-flow: row wrap; -ms-flex-direction: row; -ms-flex-wrap: wrap; flex-flow: row wrap;
    max-width: 80%;
    padding: 0;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
}
#contact .main-contact .sidebar {
    margin-top: 2rem;
    min-width: 314px;
    color: #8a9298;
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: bold;
    background-color: #fff;
    -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%;
}
#contact .hero-inner_container {
    height: inherit;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    max-width: 55%;
    margin: 0 auto;
    -webkit-flex-flow: row nowrap; -ms-flex-direction: row; -ms-flex-wrap: none; flex-flow: row nowrap;
    -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
}
#contact .hero-text {
    -webkit-flex: 0 1 20%; -ms-flex: 0 1 20%; flex: 0 1 20%;
    margin: 0 auto;
    margin-top: 15rem;
    margin-right: 3rem;
    min-width: 10rem;
    bottom: 0;
    background-color: #fff;
    border-radius: 1.5em 1.5em 0 0;
    padding: .5rem;
}
#contact .hero-text h3 {
    text-align: center;
    color: #00afd8;
}
#contact .logo h1 {
    color: #fff;
    font-weight: bold;
    line-height: initial;
    letter-spacing: .2rem;
    text-align: center;
    width: 100%;
    text-shadow: rgb(3, 3, 3) 5px 7px 7px;
}
#contact .sidebar h3 {
    color: #00afd8;
    font-size: 2.2em;
}
#contact .article-container {
    margin-top: 2rem;
    position: relative;
    min-width: 300px;
    background-color: #ffffff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #8a9298;
    font-size: 1.1em;
    -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-flow: column; -ms-flex-direction: column; flex-flow: column;
}
#contact #submit-button {
    margin-top: 24px;
    background-color: #00afd8;
    color: #fff;
    font-size: 1.1em;
    line-height: 1;
    font-weight: bold;
    padding: 10px 0;
}
#contact input-control.text .btn-clr {
    top: -20px;
}
#contact .button-block {
    -webkit-align-self: center; -ms-flex-align: center; align-self: center;
    padding-top: 15px;
}
#contact .explain-popup .button-block {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
}
#contact .button-block button {
    border-radius: 2rem;
    background-color: #00afd8;
    color: white;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.3rem;
}
#contact .button-block button i {
    -webkit-transition: left 200ms ease-in-out;
    -moz-transition: left 200ms ease-in-out;
    -ms-transition: left 200ms ease-in-out;
    -o-transition: left 200ms ease-in-out;
    transition: left 200ms ease-in-out;
}
#contact .button-block button i {
    position: relative;
    left: 0;
    width: 25px;
    color: white;
}
#contact .button-block button:hover > i {
    left: 10px;
}
#contact label {
    color: #00afd8;
    cursor: default;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
}
#contact .input-control {
    width: 100%;
}
#contact .input-control.text input,
#contact .input-control.textarea textarea {
    color: gray;
    font-family: sans-serif;
    font-size: initial;
}
#contact .input-control.textarea textarea {
    max-height: 13rem !important;
    width: 100% !important;
}
#faq, #my-genre {
    padding-bottom: 4rem;
    margin-bottom: 0;
    overflow-y: auto;
}
#my-genre {
    overflow-x: hidden;
}
#my-genre .exit {
    top: .35rem;
    z-index: 4;
}
#my-genre .close-row .toolbar-button {
    right: 0;
    left: auto;
}
#my-genre .accordion-section-container {
    border: 1px solid gainsboro;
    min-height: 0;
}
#my-genre .toolbar-section {
    padding-left: 0;
    margin: 0;
    width: 100%;
}
#my-genre .toolbar-section:before {
    display: none;
}
#my-genre .more {
    max-width: none;
}
/*
#my-genre .toolbar .toolbar-button {
    min-width: 5%;
}
*/
#my-genre .pagination {
    flex: none;
    margin-left: 0;
}
#my-genre .bigb {
    min-width: 120px;
    flex: 1 1 20%;
    height: 7.65rem;
    font-size: 1.2rem;
    transition: transform .1s;
}
#my-genre .fonts .bigb {
    font-size: 2.5rem;
}
#my-genre .more .input-control {
    width: 175px; 
    font-size: 20px;
}
#my-genre .cycle-button {
    bottom: 0;
    left: 0;
    margin: 0;
/*    font-size: 80%;*/
    width: 1.8rem;
    height: 1.8rem;
    min-width: 0;
    padding-top: 0;
}
.genre-heading-container {
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    z-index: 3;
}
.on-mobile.genre-heading-container {
    width: 100%;
}
.genre-picks-container {
    min-width: 350px;
    max-width: 550px;
    height: 186px;
    z-index: 3;
    border: 2px solid gray;
}
.on-mobile .genre-picks-container {
    top: 45px;
}
.picks {
    flex: 1 1 60%;
}
.genre-params-container {
    top: 316px;
}
.on-mobile .genre-params-container {
    top: 273px;
}
.lookit {
    height: 100%;
    flex: 1 1 30%;
    max-width: 200px;
    background-color: red;
    border: 1px solid gainsboro;
    color: white;
    font-size: 31px;
    overflow: hidden;
}
.combo-button-container button {
    flex: 1 1 10%;
}
.on-mobile .combo-button-container {
    margin-top: 5px;
}
.choices-wrap {
    height: auto;
    flex: 1 1 36%;
}
.choices-wrap-2 {
    height: auto;
    flex: 1 1 70%;
}
.choices {
    flex: 1 1 33%;
    max-width: 120px;
    height: 50px;
    margin: 5px;
    border: 2px solid gray;
    font-size: 15px;
    user-select: none;
    transition: transform .1s;
}
.choices-2 {
    flex: 1 1 33%;
    max-width: 120px;
    height: 50px;
    margin: 5px;
    border: 2px solid gray;
    font-size: 15px;
    user-select: none;
    transition: transform .1s;
    min-width: 100px;
}
.delete-this {
    top: -11px;
    right: -9px;
    cursor: pointer;
    user-select: none;
    height: 20px;
    width: 20px;
    background-image: url(/images/Cancel.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.choice-message {
    position: fixed;
    left: 0;
    right: 0;
    top: 30%;
    z-index: 4;
}
.mes-wrap {
    width: 50%;
    min-width: 400px;
    min-height: 200px;
    background-color: blue;
    color: white;
    padding: 10px;
    -webkit-box-shadow: 1px 3px 34px 12px #ffffff; 
    box-shadow: 1px 3px 34px 12px #ffffff;
    cursor: pointer;
    user-select: none;
}
.mes-wrap p {
    width: 86%;
    text-align: left;
    font-size: 1.1rem;
}
.ugh {
}
.wahoo.ng-enter {
    -webkit-animation: open-view 0.3s linear both;
	        animation: open-view 0.3s linear both;
}
.wahoo.ng-leave {
    -webkit-animation: close-view 0.3s linear both;
	        animation: close-view 0.3s linear both;
}
.fav-number-container {
    padding: 1px;
    bottom: 0;
    border-top: 1px solid white;
    border-right: 1px solid white;
}
.picked {
    border: 2px solid #59cde2;
    -webkit-box-shadow:inset 0px 0px 0px 2px #fff;
    -moz-box-shadow:inset 0px 0px 0px 2px #fff;
    box-shadow:inset 0px 0px 0px 2px #fff;
    transform: scale(1.5);
    z-index: 2;
}
.toolbar.justify .picked.toolbar-button,
.toolbar.bullets .picked.toolbar-button, 
.toolbar-section.duration .picked.toolbar-button,
.animations .picked-smaller.toolbar-button,
.animation-wrap .picked.toolbar-button {
    background-color: #00ccff;
    color: white;
}
.picked-bigger {
    border: 2px solid #59cde2;
    -webkit-box-shadow:inset 0px 0px 0px 2px #fff;
    -moz-box-shadow:inset 0px 0px 0px 2px #fff;
    box-shadow:inset 0px 0px 0px 2px #fff;
    transform: scale(1.7);
    z-index: 2;
}
.picked-smaller {
    border: 2px solid #59cde2;
    -webkit-box-shadow:inset 0px 0px 0px 2px #fff;
    -moz-box-shadow:inset 0px 0px 0px 2px #fff;
    box-shadow:inset 0px 0px 0px 2px #fff;
    transform: scale(1.15);
    z-index: 2;
}
.on-mobile .picked:not(.bigb):not(.choices-2):not(.toolbar-button) {
    transform: scale(1.6);
}
.on-mobile .picked.bigb,
.on-mobile .picked.choices-2,
.on-mobile .picked.toolbar-button {
    transform: scale(1.3);
}
.selected-anim-button {
    width: auto;
    height: 1.4rem;
    line-height: 100%;
    font-size: .6rem;
}
/*
.on-mobile .picked-bigger {
    transform: scale(2.1);
}
*/

/*terms and conditions*/
#terms {
    padding-bottom: 4rem;
    margin-bottom: 0;
    overflow-y: auto;
}
#terms .hero-terms {
    background: url("/images/terms_board-min.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 13rem;
}
#terms .main-terms {
    max-width: 80%;
    padding: 0 3rem;
    margin: 0 auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#terms .main-terms .sidebar {
    float: left;
    width: 33%;
    margin-top: 60px;
    color: #8a9298;
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: bold;
    background-color: #fff;
}
#terms .main-terms .sidebar ul {
    background-color: #fff;
    padding: 0;
    margin: 0;
}
#terms .main-terms .sidebar li {
    margin: 1em 0;
    border-bottom: none;
    box-shadow: none;
    height: 1.5rem;
}
#terms a {
    padding: 0;
    cursor: pointer;
    background-color: #fff;
}
#terms a:hover, #terms a:visited {
    text-decoration: none;
    color: #00afd8;
    -moz-transition-property: color;
    -ms-transition-property: color;
    -o-transition-property: color;
    -webkit-transition-property: color;
    transition-property: color;
    -moz-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -moz-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
#terms article.article-container {
    width: 66%;
    margin-top: -9rem;
    position: relative;
    float: left;
    background-color: #ffffff;
    border-radius: 4rem 0 0 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1rem 2.5rem 1rem 2.5rem;
    color: #8a9298;
    font-size: 1.1em;
}
#terms article.article-container h1 {
    font-size: 2.5rem;
    color: #00afd8;
    padding-bottom: 0.5em;
    line-height: 1.1;
    letter-spacing: -.1rem;
}
#terms .selected-term {
    color: #00afd8 !important;
    background-color: white;
}
.overflow-y {
    overflow-y: auto;
}
.overflow-x {
    overflow-x: auto;
}
.overflow-visible {
    overflow: visible;
}
#authors #orientation {
    top: 0;
    bottom: auto;
}
.logo-wrapper {
    width: 95px;
    height: 17px;
    left: 0;
    background-color: white;
    background-image: url(/images/pixabay_logo.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: -2px -2px 5px 5px #ffffff;
}
.thanks-container {
    border: 1px solid gainsboro;
    padding: 10px;
    height: 200px;
    flex: 1 1 348px;
    max-width: 400px;
    box-shadow: 0 10px 6px -6px #777;
}
#save-template .thanks-container {
    height: 250px;
}
.thanks-image-container {
    height: 100px;
}
#save-template .thanks-image-container {
    height: 80%;
}
.thanks-user-image-container {
    height: 80px;
    width: 80px;
}
.thanks-user-container {
    background-color: azure;
    z-index: 2;
}
#save-template .thanks-user-container {
    height: 59%;
    bottom: 4%;
}
.thanks-user-container h5 {
    line-height: 1.5;
}
.thanks-user-container button {
    border-radius: 5px;
}
#save-template .thanks-user-container button {
    width: 30%;
}
.head {
    width: 30%;
}
.template-image-container {
    width: 250px;
    height: 147px;
}
.template-wrapper {
    padding-bottom: 20px;
}
#save-template .isb {
    width: auto !important;
    max-width: inherit;
    height: 2rem;
    line-height: 1.3;
    padding: 0 1rem !important;
}
.give-love-image {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    user-select: none;
}



/*****************************************  animations  *****************************************************/
/*.ng-enter {
    -webkit-animation: slide-in-right .1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right .1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}*/
.neon-blue {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 90px #0ff, 0 0 100px #0ff, 0 0 150px #0ff;
/*    background-image: url('/backgrounds/misc/3px-tile.png');*/
/*    background-color: #010a00;*/
}
.neon-red {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px red, 0 0 80px red, 0 0 90px red, 0 0 100px red, 0 0 150px red;
}
.neonRed {
    text-shadow: 0px 0px 7px red;
}
.neonBlue {
    text-shadow: 0px 0px 7px #0ff;
}
.team {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
}
.text-effects .team,
.text-effects .neonRed,
.text-effects .neonBlue {
    font-size: 2rem;
}
.fade-in {
    -webkit-animation: fadeIn 2s 0s 2;
            animation: fadeIn 2s 0s 2;
}
.fade-out {
    -webkit-animation: fadeOut 2s 0s 2;
            animation: fadeOut 2s 0s 2;
}
.fade-in-out {
    -webkit-animation: fadeInOutSlow 3s 0s 2;
            animation: fadeInOutSlow 3s 0s 2;
}
.fly-in {
    -webkit-animation: lightSpeedIn 0.5s 3 ease 0s 2;
    -moz-animation: lightSpeedIn 0.5s ease 0s 2;
    -o-animation: lightSpeedIn 0.5s ease 0s 2;
    animation: lightSpeedIn 0.5s ease 0s 2;
    line-height: 2;
}
.fly-out {
    -webkit-animation: lightSpeedOut 0.7s ease 0s 2;
    -moz-animation: lightSpeedOut 0.7s ease 0s 2;
    -o-animation: lightSpeedOut 0.7s ease 0s 2;
    animation: lightSpeedOut 0.7s ease 0s 2;
}
.grow {
    -webkit-animation: grow 1s ease 0s 2;
    -moz-animation: grow 1s ease 0s 2;
    -o-animation: grow 1s ease 0s 2;
    animation: grow 1s ease 0s 2;
    line-height: 2;
}
.swell {
    -webkit-animation: grow 1s ease 0s 2;
    -moz-animation: grow 1s ease 0s 2;
    -o-animation: grow 1s ease 0s 2;
    animation: grow 1s ease 0s 2;
    line-height: 2;
}
.attention {
    -webkit-animation: attention 1s ease 0s 60;
    -moz-animation: attention 1s ease 0s 60;
    -o-animation: attention 1s ease 0s 60;
    animation: attention 1s ease 0s 60;
    line-height: 2;
}
.explodeOut {
    -webkit-animation: explodeOut 2s ease 0s 2;
    -moz-animation: explodeOut 2s ease 0s 2;
    -o-animation: explodeOut 2s ease 0s 2;
    animation: explodeOut 2s ease 0s 2;
}
.explodeIn {
    -webkit-animation: explodeIn 2s ease 0s 2;
    -moz-animation: explodeIn 2s ease 0s 2;
    -o-animation: explodeIn 2s ease 0s 2;
    animation: explodeIn 2s ease 0s 2;
}
.camera-flash {
    -webkit-animation: explodeOut .3s ease;
    animation: explodeOut .3s ease;
}
.crawl {
    -webkit-animation: crawl 1s linear 0s 2;
    -moz-animation: crawl 1s linear 0s 2;
    -o-animation: crawl 1s linear 0s 2;
    animation: crawl 1s linear 0s 2;
    line-height: 2.3;
}
.growIn {
    -webkit-animation: growIn 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 2;
    -moz-animation: growIn 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 2;
    -o-animation: growIn 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 2;
    animation: growIn 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 2;
    line-height: 2;
}
.chunksIn {
    -webkit-animation: chunksInDemo 3s linear 0s 2;
            animation: chunksInDemo 3s linear 0s 2;
}
.chunksOut {
    -webkit-animation: chunksOutDemo 2s linear 0s 2;
            animation: chunksOutDemo 2s linear 0s 2;
}
.fly-in-demo {
    -webkit-animation: lightSpeedInDemo 2s ease 0s 2;
    -moz-animation: lightSpeedInDemo 2s ease 0s 2;
    -o-animation: lightSpeedInDemo 2s ease 0s 2;
    animation: lightSpeedInDemo 2s ease 0s 2;
    line-height: 2;
}
.fly-out-demo {
    -webkit-animation: lightSpeedOutDemo 1.8s ease 0s 2;
    -moz-animation: lightSpeedOutDemo 1.8s ease 0s 2;
    -o-animation: lightSpeedOutDemo 1.8s ease 0s 2;
    animation: lightSpeedOutDemo 1.8s ease 0s 2;
}
.lightSpeedIn {
    -webkit-animation: lightSpeedIn 1s ease both 0s 2;
	        animation: lightSpeedIn 1s ease both 0s 2;
}
.lightSpeedout {
    -webkit-animation: lightSpeedOut 1s ease both 0s 2;
	        animation: lightSpeedOut 1s ease both 0s 2;
}
.zoomInSlideRight {
    -webkit-animation: zoomInSlideRight 3s linear both 0s 2;
	        animation: zoomInSlideRight 3s linear both 0s 2;
}
.zoomInSlideleft {
    -webkit-animation: zoomInSlideLeft 3s linear both 0s 2;
	        animation: zoomInSlideLeft 3s linear both 0s 2;
}
.fadeInOutFast {
    -webkit-animation: fadeInOutFast 1s linear both 0s 2;
	        animation: fadeInOutFast 1s linear both 0s 2;
}
.curl-in-fwd-tl {
    animation: curl-in-fwd-tl 1s ease 0s 2 both;
}
.curl-in-fwd-tr {
    animation: curl-in-fwd-tr 1s ease 0s 2 both;
}
.flipper {
	-webkit-animation: flipper 2s cubic-bezier(0.68, -0.55, 0.26, 1.55) both 0s 2;
	        animation: flipper 2s cubic-bezier(0.68, -0.55, 0.26, 1.55) both 0s 2;
}
.flip-2-ver-right-1 {
	-webkit-animation: flip-2-ver-right-1 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
	        animation: flip-2-ver-right-1 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
}
.shakey {
	-webkit-animation: shakey 1s steps(1) 0s 2;
	        animation: shakey 1s steps(1) 0s 2;
}
.flip-2-ver-left-1 {
	-webkit-animation: flip-2-ver-left-1 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
	        animation: flip-2-ver-left-1 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
}
.puff-in-center {
	-webkit-animation: puff-in-center 2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both 0s 2;
	        animation: puff-in-center 2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both 0s 2;
}
.scale-in-center {
	-webkit-animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.scale-in-center-get-started {
    -webkit-animation: scale-in-center .3s linear;
	        animation: scale-in-center .3s linear;
}
.scale-in-center-steps {
	-webkit-animation: scale-in-center 2s steps(4, end) both 0s 2;
	        animation: scale-in-center 2s steps(4, end) both 0s 2;
}
.scale-out-center {
	-webkit-animation: scale-out-center 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
	        animation: scale-out-center 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
}
.scale-out-center-get-started {
	-webkit-animation: scale-out-center .3s linear;
	        animation: scale-out-center .3s linear;
}
.scale-out-center-steps {
	-webkit-animation: scale-out-center 2s steps(4, end) both 0s 2;
	        animation: scale-out-center 2s steps(4, end) both 0s 2;
}
.puff-in-center {
	-webkit-animation: puff-in-center 2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both 0s 2;
	        animation: puff-in-center 2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both 0s 2;
}
.slide-in-elliptic-top-bck {
	-webkit-animation: slide-in-elliptic-top-bck 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 2;
	        animation: slide-in-elliptic-top-bck 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 2;
}
.swirl-in-fwd {
	-webkit-animation: swirl-in-fwd 1s ease-out both 0s 2;
	        animation: swirl-in-fwd 1s ease-out both 0s 2;
}
.swirl-out-bck {
	-webkit-animation: swirl-out-bck 1s ease-out both 0s 2;
	        animation: swirl-out-bck 1s ease-out both 0s 2;
}
.text-blur-out {
	-webkit-animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
	        animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
}
.tracking-in-contract-bck-top {
	-webkit-animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 0s 2;
	        animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 0s 2;
}
.blink-1 {
	-webkit-animation: blink-1 2s cubic-bezier(0.680, -0.550, 0.265, 1.550) 2;
	        animation: blink-1 2s cubic-bezier(0.680, -0.550, 0.265, 1.550) 2;
}
.tracking-in-contract {
	-webkit-animation: tracking-in-contract 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 0s 2;
	        animation: tracking-in-contract 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 0s 2;
}
.tracking-out-expand {
	-webkit-animation: tracking-out-expand 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: tracking-out-expand 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.tracking-out-expand-fwd-top {
	-webkit-animation: tracking-out-expand-fwd-top 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
	        animation: tracking-out-expand-fwd-top 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
}
.focus-in-contract-bck {
	-webkit-animation: focus-in-contract-bck 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: focus-in-contract-bck 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.text-focus-in {
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
}
.focus-in-expand-fwd {
	-webkit-animation: focus-in-expand-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: focus-in-expand-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.focus-in-contract {
	-webkit-animation: focus-in-contract 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: focus-in-contract 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.text-shadow-pop-br {
	-webkit-animation: text-shadow-pop-br 2s both 0s 2;
	        animation: text-shadow-pop-br 2s both 0s 2;
}
.text-pop-up-top {
	-webkit-animation: text-pop-up-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: text-pop-up-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.vibrate-1 {
	-webkit-animation: vibrate-1 0.3s linear both 0s 2;
	        animation: vibrate-1 0.3s linear both 0s 2;
}
.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
}
.shake-left {
	-webkit-animation: shake-left 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
	        animation: shake-left 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
}
.shake-lr {
	-webkit-animation: shake-lr 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
	        animation: shake-lr 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both 0s 2;
}
.shake-lr-played {
	-webkit-animation: shake-lr-played 0.5s linear both 0s;
	        animation: shake-lr-played 0.5s linear both 0s;
}
.shake-lr-help-with {
	-webkit-animation: shake-lr-played 0.5s linear both 0s infinite;
	        animation: shake-lr-played 0.5s linear both 0s infinite;
}
.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both 0s 2;
	        animation: jello-horizontal 0.9s both 0s 2;
}
.jello-in {
/*	-webkit-animation: jello-in 0.6s;*/
	        animation: jello-in 0.6s;
}
.wobble-hor-top {
	-webkit-animation: wobble-hor-top 0.8s both 0s 2;
	        animation: wobble-hor-top 0.8s both 0s 2;
}
.slit-out-vertical {
	-webkit-animation: slit-out-vertical 2s ease-in both 0s 2;
	        animation: slit-out-vertical 2s ease-in both 0s 2;
}
.slit-out-horizontal {
	-webkit-animation: slit-out-horizontal 2s ease-in both 0s 2;
	        animation: slit-out-horizontal 2s ease-in both 0s 2;
}
.slide-in-left {
	-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.slide-out-left {
	-webkit-animation: slide-out-left 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
	        animation: slide-out-left 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
}
.slide-in-left-half {
	-webkit-animation: slide-in-left-half 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left-half 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-out-left-half {
	-webkit-animation: slide-out-left-half 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-left-half 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.slide-in-right {
	-webkit-animation: slide-in-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.slide-out-right {
	-webkit-animation: slide-out-right 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
	        animation: slide-out-right 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
}
.slide-in-right-half {
	-webkit-animation: slide-in-right-half 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right-half 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-out-right-half {
	-webkit-animation: slide-out-right-half 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-right-half 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.bounce-in-bck {
	-webkit-animation: bounce-in-bck 1.1s both 0s 2;
	        animation: bounce-in-bck 1.1s both 0s 2;
}
.roll-out-left {
	-webkit-animation: roll-out-left 2s ease-in both 0s 2;
	        animation: roll-out-left 2s ease-in both 0s 2;
}
.roll-out-right {
	-webkit-animation: roll-out-right 2s ease-in both 0s 2;
	        animation: roll-out-right 2s ease-in both 0s 2;
}
.scale-in-ver-bottom {
	-webkit-animation: scale-in-ver-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: scale-in-ver-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.scale-in-ver-top {
	-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.scale-out-ver-top {
	-webkit-animation: scale-out-ver-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-ver-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.open-view {
    -webkit-animation: open-view 0.2s linear both;
	        animation: open-view 0.2s linear both;
}
.close-view {
    -webkit-animation: close-view 0.2s linear both;
	        animation: close-view 0.2s linear both;
}
.scale-out-ver-bottom {
	-webkit-animation: scale-out-ver-bottom 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
	        animation: scale-out-ver-bottom 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s 2;
}
.slide-in-top {
	-webkit-animation: slide-in-top 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-top 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.slide-in-bottom {
	-webkit-animation: slide-in-top 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-top 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.slide-in-fwd-tl {
	-webkit-animation: slide-in-fwd-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-fwd-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.bounce-in-top {
	-webkit-animation: bounce-in-top 2s both 0s 2;
	        animation: bounce-in-top 2s both 0s 2;
}
.bounce-in-top-selected {
	-webkit-animation: bounce-in-top 1s both;
	        animation: bounce-in-top 1s both;
}
.roll-in-left {
	-webkit-animation: roll-in-left 2s ease-out both 0s 2;
	        animation: roll-in-left 2s ease-out both 0s 2;
}
.roll-in-right {
	-webkit-animation: roll-in-right 2s ease-out both 0s 2;
	        animation: roll-in-right 2s ease-out both 0s 2;
}
.punt-in-left {
    -webkit-animation: punt-in-left 1s linear both 0s 2;
	        animation: punt-in-left 1s linear both 0s 2;
}
.flicker-in-1 {
	-webkit-animation: flicker-in-1 1s linear both 0s 2;
	        animation: flicker-in-1 1s linear both 0s 2;
}
.slide-out-elliptic-top-bck {
	-webkit-animation: slide-out-elliptic-top-bck 2s ease-in both 0s 2;
	        animation: slide-out-elliptic-top-bck 2s ease-in both 0s 2;
}
.bounce-out-top {
	-webkit-animation: bounce-out-top 2s both 0s 2;
	        animation: bounce-out-top 2s both 0s 2;
}
.puff-out-center {
	-webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both 0s 2;
	        animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both 0s 2;
}
.flicker-out-1 {
	-webkit-animation: flicker-out-1 2s linear both 0s 2;
	        animation: flicker-out-1 2s linear both 0s 2;
}
.fadeInBack {
    -webkit-animation: fadeInBack 3s linear both 0s 2;
	        animation: fadeInBack 3s linear both 0s 2;
}
.blurFadeIn {
    -webkit-animation: blurFadeIn 3s linear both 0s 2;
	        animation: blurFadeIn 3s linear both 0s 2;
}
.fadeInFast {
    -webkit-animation: fadeInFast .5s linear both 0s 2;
	        animation: fadeInFast .5s linear both 0s 2;
}
.fadeInOut {
    -webkit-animation: fadeInOut 3s linear both 0s 2;
	        animation: fadeInOut 3s linear both 0s 2;
}
.fadeInOutFast {
    -webkit-animation: fadeInOutFast 1s linear both 0s 2;
	        animation: fadeInOutFast 1s linear both 0s 2;
}
.fadeInOutSlow {
    -webkit-animation: fadeInOutSlow 4s linear both 0s 2;
	        animation: fadeInOutSlow 4s linear both 0s 2;
}
.fadeIn {
    -webkit-animation: fadeIn 3s linear both 0s 2;
	        animation: fadeIn 3s linear both 0s 2;
}
.fadeOut {
    -webkit-animation: fadeOut 3s linear both 0s 2;
	        animation: fadeOut 3s linear both 0s 2;
}
.fadeOutFast {
    -webkit-animation: fadeOutFast 1s linear both 0s 2;
	        animation: fadeOutFast 1s linear both 0s 2;
}
.text-flicker-red {
    -webkit-animation: text-flicker-red 3s linear both 0s 2;
	        animation: text-flicker-red 3s linear both 0s 2;
}
.slide-in-fwd-tr {
	-webkit-animation: slide-in-fwd-tr 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-fwd-tr 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.slide-in-fwd-bl {
	-webkit-animation: slide-in-fwd-bl 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-fwd-bl 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.slide-in-fwd-top {
	-webkit-animation: slide-in-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
	        animation: slide-in-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0s 2;
}
.spin-in-left {
	-webkit-animation: spin-in-left 1.5s ease-in both 0s 2;
	        animation: spin-in-left 1.5s ease-in both 0s 2;
}
.spin-in-right {
	-webkit-animation: spin-in-right 1.5s ease-in both 0s 2;
	        animation: spin-in-right 1.5s ease-in both 0s 2;
}
.slight-up {
    -webkit-animation: slight-up 2s ease-out both 0s 2;
	        animation: slight-up 2s 1s ease-out both 0s 2;
}
.slight-down {
    -webkit-animation: slight-down 2s ease-out both 0s 2;
	        animation: slight-down 2s 1s ease-out both 0s 2;
}
.grow-flip {
    -webkit-animation: grow-flip 2s ease-out both 0s 2;
	        animation: grow-flip 2s ease-out both 0s 2;
}

.bounce-in-left {
	-webkit-animation: bounce-in-left 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
	        animation: bounce-in-left 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
}
.bounce-in-right {
	-webkit-animation: bounce-in-right 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
	        animation: bounce-in-right 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
}
.bounce-in-bottom {
	-webkit-animation: bounce-in-bottom 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
	        animation: bounce-in-bottom 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
}
.bounce-out-bottom {
	-webkit-animation: bounce-out-bottom 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
	        animation: bounce-out-bottom 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0s 2;
}
.zoomOut {
    -webkit-animation: zoomOut 3s linear both 0s 2;
	        animation: zoomOut 3s linear both 0s 2;
}
.zoomIn {
    -webkit-animation: zoomIn 3s linear both 0s 2;
	        animation: zoomIn 3s linear both 0s 2;
}
.zoom-in-erie {
    -webkit-animation: zoom-in-erie 2s linear both 0s 2;
	        animation: zoom-in-erie 2s linear both 0s 2;
}
.zoom-out-erie {
    -webkit-animation: zoom-out-erie 2s linear both 0s 2;
	        animation: zoom-out-erie 2s linear both 0s 2;
}
.outline-blink {
    -webkit-animation: outline-blink 2s 30;
            animation: outline-blink 2s 30;
}
.background-blink {
    -webkit-animation: background-blink 2s 30;
            animation: background-blink 2s 30;
}
/*spin animation is in preload.css*/
.spin {
  -webkit-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
}
.unauthorized {
    z-index: 10000;
    background: #fff;
    opacity: 1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.unauth-container {
    height: 10em;
    max-height: 10em;
}
.unauth-container img {
    height: 100%;
}
.unauthorized img {
    height: 100%;
}
.unauth-button {
    padding-top: 15px;
}
.unauth-button button {
    border-radius: 10px;
    width: 8rem;
    background-color: #00afd8;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.3rem;
    line-height: 1;
}
    
    


@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -o-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -o-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
  }
}

@-webkit-keyframes lightSpeedInDemo {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -o-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  15% {
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  20% {
    -webkit-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -o-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  25% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
  }
    
  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
  }
}

/* light speed out */
@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(150%, 0, 0) skewX(30deg);
    -moz-transform: translate3d(150%, 0, 0) skewX(30deg);
    -ms-transform: translate3d(150%, 0, 0) skewX(30deg);
    -o-transform: translate3d(150%, 0, 0) skewX(30deg);
    transform: translate3d(150%, 0, 0) skewX(30deg);
    opacity: 1;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(150%, 0, 0) skewX(30deg);
    -moz-transform: translate3d(150%, 0, 0) skewX(30deg);
    -ms-transform: translate3d(150%, 0, 0) skewX(30deg);
    -o-transform: translate3d(150%, 0, 0) skewX(30deg);
    transform: translate3d(150%, 0, 0) skewX(30deg);
    opacity: 1;
  }
}
@-webkit-keyframes lightSpeedOutDemo {
  0% {
    opacity: 1;
  }

  25% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
    -o-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 1;
  }
    26% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        -moz-transform: translate3d(100%, 0, 0) skewX(30deg);
        -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
        -o-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }

  55% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-tranform: none;
    transform: none;
      opacity: 0;
  }
  55.09% {
      opacity: 1;
  }
    
  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

@keyframes lightSpeedOutDemo {
  0% {
    opacity: 1;
  }

  25% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
    -o-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 1;
  }
    26% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        -moz-transform: translate3d(100%, 0, 0) skewX(30deg);
        -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
        -o-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }

  55% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-tranform: none;
    transform: none;
      opacity: 0;
  }
  55.09% {
      opacity: 1;
  }
    
  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
@keyframes flyInFromLeft {
   from {
    -webkit-transform: translate3d(-150%, 0, 0);
    -moz-transform: translate3d(-150%, 0, 0);
    -ms-transform: translate3d(-150%, 0, 0);
    -o-transform: translate3d(-150%, 0, 0);
    transform: translate3d(-150%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  } 
}
@keyframes lightSpeedInLeft {
   0% { 
      transform: translateX(150%) skewX(-30deg); 
      opacity: 0; 
   } 
   60% { 
      transform: translateX(-20%) skewX(30deg); 
      opacity: 1; 
   } 
   80% { 
      transform: translateX(0%) skewX(-15deg); 
      opacity: 1; 
   } 
   100% { 
      transform: translateX(0%) skewX(0deg); 
      opacity: 1; 
   } 
}
@keyframes punt-in-left {
    0% { transform: translateX(-35%) translateY(0%) rotate(0deg); }
    25% { transform: translateX(-35%) translateY(0%) skewX(30deg) rotate(0deg); }
    28% { transform: translateX(-35%) translateY(0%) skewX(0deg) rotate(0deg); }
    37% { transform: translateX(-22%) translateY(-45%) skewX(0deg) rotate(-180deg); }
    50% { transform: translateX(0%) translateY(-50%) skewX(0deg) rotate(-360deg); }
    75% { transform: translateX(22%) translateY(-45%) skewX(0deg) rotate(-540deg); }
    100% { transform: translateX(50%) translateY(0%) skewX(0deg) rotate(-720deg); }
}
@keyframes whirlpool {
    0% { transform: rotate(0deg) translateX(100%) translateY(0%); }
    50% { transform: rotate(-900deg) translateX(50%) translateY(50%); }
    100% { transform: rotate(-1800deg) translateX(0%) translateY(0%); }
}
@keyframes appear {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes grow {
    0% {transform: scale3d(1,1,1)}
    50% {transform: scale3d(1.5,1.5,1.5)}
    100% {transform: scale3d(1,1,1)}
}
@keyframes growIn {
    0% {transform: scale3d(0,0,0)}
    50% {transform: scale3d(1.1,1.1,1,1)}
    100% {transform: scale3d(1.0,1.0,1.0)}
}
@keyframes attention {
    0% {transform: scale3d(1,1,1)}
    50% {transform: scale3d(1.3,1.3,1.3); background-color: limegreen}
    100% {transform: scale3d(1,1,1)}
}
@keyframes explodeOut {
    0% {transform: scale3d(1,1,1); opacity: 1;}
    100% {transform: scale3d(5,5,5); opacity: 0; text-shadow: 0px 0px 0px}
}
@keyframes explodeIn {
    0% {transform: scale3d(5,5,5)}
    100% {transform: scale3d(1,1,1)}
}
@keyframes zoomIn {
    0% {transform: scale3d(0.8,0.8,0.8)}
    100% {tranform: scale3d(1,1,1)}
}
@keyframes zoom-in-erie {
    0% {transform: scale3d(0.8,0.8,0.8); opacity: 0}
    100% {tranform: scale3d(1,1,1); opacity: 1}
}
@keyframes zoomOut {
    0% {tranform: scale3d(1,1,1)}
    100% {transform: scale3d(0.8,0.8,0.8)}
}
@keyframes zoom-out-erie {
    0% {tranform: scale3d(1,1,1); opacity: 1}
    100% {transform: scale3d(0.8,0.8,0.8); opacity: 0}
}
@keyframes zoomInSlideLeft {
    0% {transform: scale3d(0.8,0.8,0.8) translateX(0)}
    100% {transform: scale3d(1,1,1) translateX(-30px)}
}
@keyframes zoomInSlideRight {
    0% {transform: scale3d(0.8,0.8,0.8) translateX(0)}
    100% {transform: scale3d(1,1,1) translateX(30px)}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeInFast {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeOutFast {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeInOutSlow {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fadeInOutFast {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes crawl {
   from {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  } 
}
@keyframes crawl-cloud-1 {
   from {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  } 
}
@keyframes crawl-cloud-2 {
   from {
    -webkit-transform: translate3d(-75%, 0, 0);
    -moz-transform: translate3d(-75%, 0, 0);
    -ms-transform: translate3d(-75%, 0, 0);
    -o-transform: translate3d(-75%, 0, 0);
    transform: translate3d(-75%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(75%, 0, 0);
    -moz-transform: translate3d(75%, 0, 0);
    -ms-transform: translate3d(75%, 0, 0);
    -o-transform: translate3d(75%, 0, 0);
    transform: translate3d(100%, 0, 0);
  } 
}
@keyframes chunksIn {
    0% {opacity: 0; transform: scale3d(0, 0, 0);}
    1% {opacity: 1; transform: scale3d(.2, .2, .2);}
    32% {opacity: 1; transform: scale3d(.2, .2, .2);}
    32.1% {opacity: 0; transform: scale3d(.2, .2, .2);}
    34.9% {opacity: 0; transform: scale3d(.2, .2, .2);}
    35% {opacity: 1; transform: scale3d(1, 1, 1);}
    66% {transform: scale3d(1, 1, 1);}
    67% {transform: scale3d(.7, .7, .7);}
    68% {transform: scale3d(.6, .6, .6);}
    72% {transform: scale3d(.6, .6, .6);}
    73% {transform: scale3d(4, 4, 4);}
    100% {transform: scale3d(4, 4, 4);}
}
@keyframes chunksOut {
    0% {opacity: 0; transform: scale3d(0, 0, 0);}
    1% {opacity: 1; transform: scale3d(.2, .2, .2);}
    32% {opacity: 1; transform: scale3d(.2, .2, .2);}
    32.1% {opacity: 0; transform: scale3d(.2, .2, .2);}
    34.9% {opacity: 0; transform: scale3d(.2, .2, .2);}
    35% {opacity: 1; transform: scale3d(1, 1, 1);}
    66% {transform: scale3d(1, 1, 1);}
    67% {transform: scale3d(.7, .7, .7);}
    68% {transform: scale3d(.6, .6, .6);}
    72% {transform: scale3d(.6, .6, .6);}
    73% {transform: scale3d(4, 4, 4);}
    100% {transform: scale3d(4, 4, 4);}
}

@keyframes chunksInDemo {
    0% {opacity: 0; transform: scale3d(0, 0, 0);}
    .5% {opacity: 1; transform: scale3d(.2, .2, .2);}
    16% {opacity: 1; transform: scale3d(.2, .2, .2);}
    16.1% {opacity: 0; transform: scale3d(.2, .2, .2);}
    16.9% {opacity: 0; transform: scale3d(.2, .2, .2);}
    17% {opacity: 1; transform: scale3d(1, 1, 1);}
    33% {transform: scale3d(1, 1, 1);}
    33.5% {transform: scale3d(.7, .7, .7);}
    34% {transform: scale3d(.6, .6, .6);}
    36% {transform: scale3d(.6, .6, .6);}
    36.5% {transform: scale3d(4, 4, 4);}
    50% {transform: scale3d(4, 4, 4);}
    100% {transform: scale3d(4, 4, 4);}
}
@keyframes chunksOutDemo {
    0% {transform: scale3d(4, 4, 4);}
    16% {transform: scale3d(4, 4, 4);}
    16.1% {transform: scale3d(.6, .6, .6);}
    33% {opacity: 1; transform: scale3d(.6, .6, .6);}
    33.5% {opacity: 0; transform: scale3d(.6, .6, .6);}
    36% {opacity: 0; transform: scale3d(.2, .2, .2);}
    36.5% {opacity: 1; transform: scale3d(.2, .2, .2);}
    50% {transform: scale3d(.2, .2, .2);}
    100% {transform: scale3d(.2, .2, .2);}
}

/*
    0% {opacity: 0; transform: scale3d(0, 0, 0);}
    .5% {opacity: 1; transform: scale3d(.2, .2, .2);}
    16% {opacity: 1; transform: scale3d(.2, .2, .2);}
    16.1% {opacity: 0; transform: scale3d(.2, .2, .2);}
    16.9% {opacity: 0; transform: scale3d(.2, .2, .2);}
    17% {opacity: 1; transform: scale3d(1, 1, 1);}
    33% {transform: scale3d(1, 1, 1);}
    33.5% {transform: scale3d(.7, .7, .7);}
    34% {transform: scale3d(.6, .6, .6);}
    36% {transform: scale3d(.6, .6, .6);}
    36.5% {transform: scale3d(4, 4, 4);}
    50% {transform: scale3d(4, 4, 4);}
    100% {transform: scale3d(4, 4, 4);}
}
*/


@keyframes text-flicker-red {
    0% {
        opacity:0.1;
        text-shadow: 0px 0px 29px red;
    }
  
    2% {
        opacity:.5;
        text-shadow: 0px 0px 29px red;
    }
    8% {
        opacity:0.1;
        text-shadow: 0px 0px 29px red;
    }
    9% {
        opacity:.6;
        text-shadow: 0px 0px 29px red;
    }
    12% {
        opacity:0.1;
        text-shadow: 0px 0px 29px red;
    }
    20% {
        opacity:.3;
        text-shadow: 0px 0px 29px red;
    }
    25% {
        opacity:0.1;
        text-shadow: 0px 0px 29px red;
    }
    30% {
        opacity:0;
        text-shadow: 0px 0px 29px red;
    }
    40% {
        opacity:.1;
        text-shadow: 0px 0px 29px red;
    }
    41% {
        opacity:1;
        text-shadow: 0px 0px 29px red;
    }
    42% {
        opacity:0;
        text-shadow: 0px 0px 29px red;
    }
    50% {
        opacity:0;
        text-shadow: 0px 0px 29px red;
    }
    70% {
        opacity:0.6;
        text-shadow: 0px 0px 29px red;
    }
  
    72% {
        opacity:0.2;
        text-shadow:0px 0px 29px red;
    }
    77% {
        opacity:0;
        text-shadow: 0px 0px 29px red;
    }
    100% {
        opacity:1;
        text-shadow: 0px 0px 29px red;
    }
}

@-webkit-keyframes blurFadeInOut{
	0%{
		opacity: 0;
		-webkit-filter: blur(12px);
            filter: blur(12px);
		-webkit-transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		-webkit-filter: blur(0px);
            filter: blur(0px);
		-webkit-transform: scale(1);
	}
	100%{
		opacity: 0;
		-webkit-filter: blur(12px);
            filter: blur(12px);
		-webkit-transform: scale(0);
	}
}
@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		-webkit-filter: blur(12px);
            filter: blur(12px);
		-webkit-transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		-webkit-filter: blur(0px);
            filter: blur(0px);
		-webkit-transform: scale(1);
	}
	100%{
		opacity: 0;
		-webkit-filter: blur(12px);
            filter: blur(12px);
		-webkit-transform: scale(0);
	}
}
@-webkit-keyframes blurFadeIn{
    0% {
        -webkit-transform: scale(2);
            transform: scale(2);
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
            transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
@keyframes blurFadeIn{
	0% {
        -webkit-transform: scale(2);
            transform: scale(2);
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
            transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInBack{
	0%{
		opacity: 0;
		-webkit-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-webkit-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-webkit-transform: scale(5);
	}
}
@keyframes fadeInBack{
	0%{
		opacity: 0;
		-webkit-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-webkit-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-webkit-transform: scale(5);
	}
}
@-webkit-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}
@keyframes fadeInRotate{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}
/**/
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  50% { transform:translate(-15%, 10%) }
}
@-moz-keyframes fadeInBack{
	0%{
		opacity: 0;
		-moz-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-moz-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-moz-transform: scale(5);
	}
}
@-moz-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-moz-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-moz-transform: scale(1) rotate(0deg);
	}
}
@keyframes fadeInBack{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	50%{
		opacity: 0.4;
		transform: scale(2);
	}
	100%{
		opacity: 0.2;
		transform: scale(5);
	}
}
@keyframes fadeInRotate{
	0%{
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}
@keyframes shakey {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-1.25%, -2.5%) }
  20% { transform:translate(-3.75%, 1.25%) }
  30% { transform:translate(1.75%, -6.25%) }
  40% { transform:translate(-1.25%, 6.25%) }
  50% { transform:translate(-3.75%, 2.5%) }
  60% { transform:translate(3.75%, 0%) }
  70% { transform:translate(0%, 3.75%) }
  80% { transform:translate(.75%, 8.75%) }
  90% { transform:translate(-2.5%, 2.5%) }
}
@-webkit-keyframes shakey {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-1.25%, -2.5%) }
  20% { transform:translate(-3.75%, 1.25%) }
  30% { transform:translate(1.75%, -6.25%) }
  40% { transform:translate(-1.25%, 6.25%) }
  50% { transform:translate(-3.75%, 2.5%) }
  60% { transform:translate(3.75%, 0%) }
  70% { transform:translate(0%, 3.75%) }
  80% { transform:translate(.75%, 8.75%) }
  90% { transform:translate(-2.5%, 2.5%) }
}
@-webkit-keyframes flipper{
  from{transform: rotateX(90deg); transform-origin: 50% 70%;}
  to{transform: rotateX(0deg); transform-origin: 50% 70%;}
}
@keyframes flipper{
  from{transform: rotateX(90deg); transform-origin: 50% 70%;}
  to{transform: rotateX(0deg); transform-origin: 50% 70%;}
}
@-webkit-keyframes curl-in-fwd-tl {
   0% {
       -webkit-transform: translateX(-75%) translateY(-200%) rotateZ(90deg);
       transform: translateX(-75%) translateY(-200%) rotateZ(90deg);
   }
    100% {
        -webkit-transform: translateX(0) translateY(0) rotateZ(0);
        transform: translateX(0) translateY(0) rotateZ(0);
    }
}
@keyframes curl-in-fwd-tl {
    0% {
        -webkit-transform: translateX(-75%) translateY(-200%) rotateZ(90deg);
       transform: translateX(-75%) translateY(-200%) rotateZ(90deg);
   }
    100% {
        -webkit-transform: translateX(0) translateY(0) rotateZ(0);
        transform: translateX(0) translateY(0) rotateZ(0);
    }
}
@-webkit-keyframes curl-in-fwd-tr {
   0% {
       -webkit-transform: translateX(75%) translateY(-200%) rotateZ(-90deg);
       transform: translateX(75%) translateY(-200%) rotateZ(-90deg);
   }
    100% {
        -webkit-transform: translateX(0) translateY(0) rotateZ(0);
        transform: translateX(0) translateY(0) rotateZ(0);
    }
}
@keyframes curl-in-fwd-tr {
    0% {
       -webkit-transform: translateX(75%) translateY(-200%) rotateZ(-90deg);
        tranform: translateX(75%) translateY(-200%) rotateZ(-90deg);
   }
    100% {
        -webkit-transform: translateX(0) translateY(0) rotateZ(0);
        transform: translateX(0) translateY(0) rotateZ(0);
    }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 10:40:16
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-scale-2-ver-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-2-ver-right-1 {

  0% {
    -webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
            transform: translateX(100%) rotateY(-180deg) scale(1);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
  50% {
    -webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
            transform: translateX(50%) rotateY(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
}
@keyframes flip-scale-2-ver-right {
  0% {
    -webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
            transform: translateX(100%) rotateY(-180deg) scale(1);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
  50% {
    -webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
            transform: translateX(50%) rotateY(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:9:37
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/**
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/**
* ----------------------------------------
 * animation slide-out-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:11:23
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-fwd-tl
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-tl {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px) translateX(-1000px);
            transform: translateZ(-1400px) translateY(-800px) translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-tl {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px) translateX(-1000px);
            transform: translateZ(-1400px) translateY(-800px) translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:12:19
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:13:14
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-12-6 5:43:55
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-right
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
            transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
            transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:14:39
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * @animation flicker-in-1
 * ----------------------------------------
 */
@-webkit-keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:15:56
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swirl-out-bck
 * ----------------------------------------
 */
@-webkit-keyframes swirl-out-bck {
  0% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
}
@keyframes swirl-out-bck {
  0% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:17:6
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-elliptic-top-bck
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
}
@keyframes slide-out-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:17:35
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-out-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  5% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  15% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  25% {
    -webkit-transform: translateY(-38px);
            transform: translateY(-38px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  52% {
    -webkit-transform: translateY(-75px);
            transform: translateY(-75px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  70% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  85% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-800px);
            transform: translateY(-800px);
    opacity: 0;
  }
}
@keyframes bounce-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  5% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  15% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  25% {
    -webkit-transform: translateY(-38px);
            transform: translateY(-38px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  52% {
    -webkit-transform: translateY(-75px);
            transform: translateY(-75px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  70% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  85% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-800px);
            transform: translateY(-800px);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:18:34
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
@-webkit-keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
    opacity: 0;
  }
}
@keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:19:7
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flicker-out-1
 * ----------------------------------------
 */
@-webkit-keyframes flicker-out-1 {
  0% {
    opacity: 1;
  }
  13.9% {
    opacity: 1;
  }
  14% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  14.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  15% {
    opacity: 1;
  }
  22.9% {
    opacity: 1;
  }
  23% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  24.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  25% {
    opacity: 1;
  }
  34.9% {
    opacity: 1;
  }
  35% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  39.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  40% {
    opacity: 1;
  }
  42.9% {
    opacity: 1;
  }
  43% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  44.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  54.9% {
    opacity: 1;
  }
  55% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.5% {
    opacity: 1;
  }
  69.9% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.9% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.8% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.9% {
    opacity: 1;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  90% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flicker-out-1 {
  0% {
    opacity: 1;
  }
  13.9% {
    opacity: 1;
  }
  14% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  14.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  15% {
    opacity: 1;
  }
  22.9% {
    opacity: 1;
  }
  23% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  24.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  25% {
    opacity: 1;
  }
  34.9% {
    opacity: 1;
  }
  35% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  39.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  40% {
    opacity: 1;
  }
  42.9% {
    opacity: 1;
  }
  43% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  44.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  54.9% {
    opacity: 1;
  }
  55% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.5% {
    opacity: 1;
  }
  69.9% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.9% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.8% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.9% {
    opacity: 1;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  90% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  100% {
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:19:45
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:20:31
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-out-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-out-expand {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    opacity: 0;
  }
}
@keyframes tracking-out-expand {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:21:24
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-out-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes tracking-out-expand-fwd {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    opacity: 0;
  }
}
@keyframes tracking-out-expand-fwd {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:21:54
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-out-expand-fwd-top
 * ----------------------------------------
 */
@-webkit-keyframes tracking-out-expand-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px) translateY(-200px);
            transform: translateZ(300px) translateY(-200px);
    opacity: 0;
  }
}
@keyframes tracking-out-expand-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px) translateY(-200px);
            transform: translateZ(300px) translateY(-200px);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:22:29
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
            transform: translateZ(12px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
            transform: translateZ(12px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:23:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:23:32
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-800px);
            transform: translateZ(-800px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-800px);
            transform: translateZ(-800px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:24:5
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-contract
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:33:27
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-shadow-pop-br
 * ----------------------------------------
 */
@-webkit-keyframes text-shadow-pop-br {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: 1px 1px #555555, 2px 2px #555555, 3px 3px #555555, 4px 4px #555555, 5px 5px #555555, 6px 6px #555555, 
        7px 7px #555555, 8px 8px #555555, 9px 9px #555555, 10px 10px #555555, 11px 11px #555555, 12px 12px #555555;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}
@keyframes text-shadow-pop-br {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: 1px 1px #555555, 2px 2px #555555, 3px 3px #555555, 4px 4px #555555, 5px 5px #555555, 6px 6px #555555, 
        7px 7px #555555, 8px 8px #555555, 9px 9px #555555, 10px 10px #555555, 11px 11px #555555, 12px 12px #555555;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:34:33
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 
        0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 
        0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:35:33
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:38:20
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:38:58
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-left
 * ----------------------------------------
 */
@-webkit-keyframes shake-left {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-left {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:39:24
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-lr
 * ----------------------------------------
 */
@-webkit-keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}
@keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}
/**
 * ----------------------------------------
 * animation shake-lr-played
 * ----------------------------------------
 */
@-webkit-keyframes shake-lr-played {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
  }
  80% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  90% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
}
@keyframes shake-lr-played {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
  }
  80% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  90% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:39:49
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -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(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -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(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes jello-in {
  0% {
    -webkit-transform: matrix(1.5, 0, 0, .5, 0, 100);
            transform: matrix(1.5, 0, 0, .5, 0, 100);
  }
  17% {
    -webkit-transform: matrix(.8, 0, 0, 1.2, 0, -100);
            transform: matrix(.8, 0, 0, 1.2, 0, -100);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  35% {
    -webkit-transform: matrix(1.5, 0, 0, 0.5, 0, -100);
            transform: matrix(1.5, 0, 0, 0.5, 0, -100);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  70% {
    -webkit-transform: matrix(.8, 0, 0, 1, 0, 0);
            transform: matrix(.8, 0, 0, 1, 0, 0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  80% {
    -webkit-transform: matrix(1.1, 0, 0, 0.9, 0, 100);
            transform: matrix(1.1, 0, 0, 0.9, 0, 100);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;    
  }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
/*@keyframes jello-in {
  0% {
    -webkit-transform: matrix(1.5, 0, 0, .5, 0, 100);
            transform: matrix(1.5, 0, 0, .5, 0, 100);
  }
  17% {
    -webkit-transform: matrix(.8, 0, 0, 1.2, 0, -100);
            transform: matrix(.8, 0, 0, 1.2, 0, -100);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  35% {
    -webkit-transform: matrix(1.5, 0, 0, 0.5, 0, -100);
            transform: matrix(1.5, 0, 0, 0.5, 0, -100);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  70% {
    -webkit-transform: matrix(.8, 0, 0, 1, 0, 0);
            transform: matrix(.8, 0, 0, 1, 0, 0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  80% {
    -webkit-transform: matrix(1.1, 0, 0, 0.9, 0, 100);
            transform: matrix(1.1, 0, 0, 0.9, 0, 100);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;    
  }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0);
  }
}*/
@keyframes jello-in {
  0% {
    -webkit-transform: matrix(1, 0, 0, .2, 0, 0);
            transform: matrix(1, 0, 0, .2, 0, 0);
            transform-origin: bottom;
  }
  50% {
    -webkit-transform: matrix(.5, 0, 0, 1.5, 0, 0);
            transform: matrix(.5, 0, 0, 1.5, 0, 0);
            transform-origin: bottom;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  60% {
    -webkit-transform: matrix(1.5, 0, 0, 0.5, 0, -200);
            transform: matrix(1.5, 0, 0, 0.5, 0, -200);
            transform-origin: center;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  75% {
    -webkit-transform: matrix(.8, 0, 0, 1, 0, -100);
            transform: matrix(.8, 0, 0, 1, 0, -100);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  90% {
    -webkit-transform: matrix(1.3, 0, 0, 0.5, 0, -50);
            transform: matrix(1.3, 0, 0, 0.5, 0, -50);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;    
  }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-4 11:40:35
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-top
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-top {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(6deg);
            transform: translateX(-30px) rotate(6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(-6deg);
            transform: translateX(15px) rotate(-6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(3.6deg);
            transform: translateX(-15px) rotate(3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(-2.4deg);
            transform: translateX(9px) rotate(-2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(1.2deg);
            transform: translateX(-6px) rotate(1.2deg);
  }
}
@keyframes wobble-hor-top {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(6deg);
            transform: translateX(-30px) rotate(6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(-6deg);
            transform: translateX(15px) rotate(-6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(3.6deg);
            transform: translateX(-15px) rotate(3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(-2.4deg);
            transform: translateX(9px) rotate(-2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(1.2deg);
            transform: translateX(-6px) rotate(1.2deg);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:6:1
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slit-out-vertical
 * ----------------------------------------
 */
@-webkit-keyframes slit-out-vertical {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes slit-out-vertical {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:7:34
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slit-out-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes slit-out-horizontal {
  0% {
    -webkit-transform: translateZ(0) rotateX(0);
            transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
            transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
            transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes slit-out-horizontal {
  0% {
    -webkit-transform: translateZ(0) rotateX(0);
            transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
            transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
            transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:9:2
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
/*    opacity: 0;*/
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
/*    opacity: 0;*/
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-12-18 2:2:22
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
/*    opacity: 0;*/
  }
}
@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
/*    opacity: 0;*/
  }
}
@-webkit-keyframes slide-in-left-half {
  0% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
/*    opacity: 0;*/
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
}
@keyframes slide-in-left-half {
  0% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
/*    opacity: 0;*/
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
}
@-webkit-keyframes slide-out-left-half {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
/*    opacity: 0;*/
  }
}
@keyframes slide-out-left-half {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
/*    opacity: 0;*/
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:9:46
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
/*    opacity: 0;*/
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
/*    opacity: 0;*/
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-12-18 2:3:36
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
/*    opacity: 0;*/
  }
}
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
/*    opacity: 1;*/
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
/*    opacity: 0;*/
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:10:54
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-bck
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-bck {
  0% {
    -webkit-transform: scale(7);
            transform: scale(7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(1.24);
            transform: scale(1.24);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-bck {
  0% {
    -webkit-transform: scale(7);
            transform: scale(7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(1.24);
            transform: scale(1.24);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:13:17
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-out-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-out-left {
  0% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px) rotate(-540deg);
            transform: translateX(-1000px) rotate(-540deg);
    opacity: 0;
  }
}
@keyframes roll-out-left {
  0% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px) rotate(-540deg);
            transform: translateX(-1000px) rotate(-540deg);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:13:48
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-out-right
 * ----------------------------------------
 */
@-webkit-keyframes roll-out-right {
  0% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px) rotate(540deg);
            transform: translateX(1000px) rotate(540deg);
    opacity: 0;
  }
}
@keyframes roll-out-right {
  0% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px) rotate(540deg);
            transform: translateX(1000px) rotate(540deg);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:17:41
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-ver-bottom
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-9 15:18:26
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-out-ver-bottom
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-ver-bottom {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-out-ver-bottom {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:1:40
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-ver-left-1
 * ----------------------------------------
 */
@-webkit-keyframes flip-2-ver-left-1 {
  0% {
    -webkit-transform: translateX(100%) rotateY(-180deg);
            transform: translateX(100%) rotateY(-180deg);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0);
            transform: translateX(0) rotateY(0);
    -webkit-transform-origin: -100% 0%;
            transform-origin: -100% 0%;
  }
}
@keyframes flip-2-ver-left-1 {
  0% {
    -webkit-transform: translateX(100%) rotateY(-180deg);
            transform: translateX(100%) rotateY(-180deg);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0);
            transform: translateX(0) rotateY(0);
    -webkit-transform-origin: -100% 0%;
            transform-origin: -100% 0%;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:15:29
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:20:28
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:21:25
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center-steps {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center-steps {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:23:18
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-out-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:24:7
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-out-center-steps
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-center-steps {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center-steps {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:27:10
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-bck
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(6.5);
            transform: translateY(-600px) rotateX(30deg) scale(6.5);
    -webkit-transform-origin: 50% 200%;
            transform-origin: 50% 200%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
            transform-origin: 50% -500px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(6.5);
            transform: translateY(-600px) rotateX(30deg) scale(6.5);
    -webkit-transform-origin: 50% 200%;
            transform-origin: 50% 200%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
            transform-origin: 50% -500px;
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:29:12
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swirl-in-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:30:44
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-blur-out
 * ----------------------------------------
 */
@-webkit-keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 2:34:58
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck-top
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract-bck-top {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px) translateY(-300px);
            transform: translateZ(400px) translateY(-300px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes tracking-in-contract-bck-top {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px) translateY(-300px);
            transform: translateZ(400px) translateY(-300px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-10 5:17:45
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-12 7:46:25
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-ver-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
    max-height: 0px;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
    max-height: 500px;
  }
}
@keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
    max-height: 0px;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
    max-height: 500px;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-10-12 7:52:17
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-out-ver-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-ver-top {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transition: max-height(1000px);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            transition: max-height(1000px);
    opacity: 1;
    max-height: 1000px;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transition: max-height(0px);
            transition: max-height(0px);
    opacity: 1;
    max-height: 0px;
  }
}
@keyframes scale-out-ver-top {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transition: max-height(1000px);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    max-height: 1000px;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transition: max-height(0px);
            transition: max-height(0px);
    opacity: 1;
    max-height: 0px;
  }
}


@-webkit-keyframes open-view {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
    max-height: 0px;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0;
    max-height: 1000px;
  }
}
@keyframes open-view {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0;
    max-height: 0px;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
    max-height: 1000px;
  }
}

@-webkit-keyframes close-view {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
    max-height: 1000px;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0;
    max-height: 0px;
  }
}
@keyframes close-view {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    max-height: 1000px;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0;
    max-height: 0px;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2017-12-5 21:56:55
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-fwd-tr
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-tr {
  0% {
    -webkit-transform: translateZ(-140px) translateY(-80px) translateX(100px);
            transform: translateZ(-140px) translateY(-80px) translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-tr {
  0% {
    -webkit-transform: translateZ(-140px) translateY(-80px) translateX(100px);
            transform: translateZ(-140px) translateY(-80px) translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2017-12-5 22:2:22
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-fwd-bl
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-bl {
  0% {
    -webkit-transform: translateZ(-140px) translateY(80px) translateX(-100px);
            transform: translateZ(-140px) translateY(80px) translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-bl {
  0% {
    -webkit-transform: translateZ(-140px) translateY(80px) translateX(-100px);
            transform: translateZ(-140px) translateY(80px) translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-12-5 22:4:54
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-fwd-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-140px) translateY(-80px);
            transform: translateZ(-140px) translateY(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-140px) translateY(-80px);
            transform: translateZ(-140px) translateY(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-12-5 22:34:17
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
@-webkit-keyframes spin-in-left {
  0% {
    -webkit-transform: translateX(-80px) rotate(-540deg);
            transform: translateX(-80px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes spin-in-left {
  0% {
    -webkit-transform: translateX(-80px) rotate(-540deg);
            transform: translateX(-80px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-12-5 22:35:16
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-right
 * ----------------------------------------
 */
@-webkit-keyframes spin-in-right {
  0% {
    -webkit-transform: translateX(80px) rotate(540deg);
            transform: translateX(80px) rotate(540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes spin-in-right {
  0% {
    -webkit-transform: translateX(80px) rotate(540deg);
            transform: translateX(80px) rotate(540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}





@-webkit-keyframes slight-up {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
     -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
}
@keyframes slight-up {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
     -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
}

@-webkit-keyframes slight-down {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
     -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
}
@keyframes slight-down {
  0% {
    -webkit-transform: translateY(0);(0)
            transform: translateY(0);
  }
  100% {
     -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
}

@-webkit-keyframes grow-flip {
    0% {
        -webkit-transform: translateZ(0) scale(1) rotateY(0);
        transform: translateZ(0) scale(1) rotateY(0);
    }
    25% {
        -webkit-transform: translateZ(500px) scale(5);
        transform: translateZ(500px) scale(5);
    }
    49.9% {
        -webkit-transform: translateZ(0) scale(1) rotateY(0);
        transform: translateZ(0) scale(1) rotateY(0);
    }
    50% {
        -webkit-transform: translateZ(0) scale(1) rotateY(180deg);
        transform: translateZ(0) scale(1) rotateY(180deg);
    }
    75% {
        -webkit-transform: translateZ(500px) scale(5) rotateY(180deg);
        transform: translateZ(500px) scale(5) rotateY(180deg);
    }
    100% {
        -webkit-transform: translateZ(0) scale(1) rotateY(180deg);
        transform: translateZ(0) scale(1) rotateY(180deg);
    }
}
@keyframes grow-flip {
    0% {
        -webkit-transform: translateZ(0) scale(1) rotateY(0);
        transform: translateZ(0) scale(1) rotateY(0);
    }
    25% {
        -webkit-transform: translateZ(500px) scale(5);
        transform: translateZ(500px) scale(5);
    }
    49.9% {
        -webkit-transform: translateZ(0) scale(1) rotateY(0);
        transform: translateZ(0) scale(1) rotateY(0);
    }
    50% {
        -webkit-transform: translateZ(0) scale(1) rotateY(180deg);
        transform: translateZ(0) scale(1) rotateY(180deg);
    }
    75% {
        -webkit-transform: translateZ(500px) scale(5) rotateY(180deg);
        transform: translateZ(500px) scale(5) rotateY(180deg);
    }
    100% {
        -webkit-transform: translateZ(0) scale(1) rotateY(180deg);
        transform: translateZ(0) scale(1) rotateY(180deg);
    }
}

@-webkit-keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2017-12-6 1:39:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-bottom {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes bounce-in-bottom {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes bounce-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 1;
  }
}
@keyframes bounce-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes outline-blink {
  0% {
    border: 8px solid #02D602;
  }
    
  50% {
    border: 8px solid  #02D602;
  }
    
  50.001% {
    border: 8px solid gainsboro;
  }
      
  100% {
    border: 8px solid gainsboro;
  }
}
@keyframes background-blink {
  0% {
    background-color: inherit;
  }
    
  50% {
    background-color: inherit;
  }
    
  50.001% {
    background-color: yellow;
  }
      
  100% {
    background-color: yellow;
  }
}
/*
@-webkit-keyframes homepage-background {
    0%{background-position:92% 0%}
    50%{background-position:9% 100%}
    100%{background-position:92% 0%}
}
@-moz-keyframes homepage-background {
    0%{background-position:92% 0%}
    50%{background-position:9% 100%}
    100%{background-position:92% 0%}
}
*/
@keyframes homepage-background { 
    0%{background-position:92% 0%}
    50%{background-position:9% 100%}
    100%{background-position:92% 0%}
}