html {
    box-sizing: border-box;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}

::-moz-selection { background: rgba(0,0,0,.2); }
::selection { background: rgba(0,0,0,.2); }

#emojis {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: ;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.emoji {
    display: block;
    margin: 10px;
    background: #efefef;
    font-size: calc(2vw + 2vh + 1vmin);
    position: relative;
    /*transition: all .10s;*/
    cursor: pointer;

    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    transition: box-shadow .15s;
}

.emoji:hover {
    /*-ms-transform: scale(1.2); *//* IE 9 */
    /*-webkit-transform: scale(1.2); *//* Safari */
    /*transform: scale(1.2);*/
    /*background: #ffffff;*/
    /*border: 5px solid #efefef;*/
    /*padding: 0 55px;*/
    margin: 0;
    box-shadow: 0 0 5px rgba(0,0,0,.1)
}

.emoji .unified {
    display: block;
    padding: 0 30px;
    overflow: hidden;
    transition: background .25s, color .25s;
}

.emoji:hover .unified {
    background: #ffffff;
    border: 5px solid #efefef;
    padding: 5px 35px;
}

#string,
#searchEmojis {
    padding: 10px;
    color: #666;
    font-size: 45px;
    width: 100%;
    letter-spacing: 10px;
    position: relative;
    border: 15px solid rgba(0,0,0,.2);
    box-shadow: 0 0 0 15px rgba(255,255,255,.5);
    transition: all .15s, border .3s;
    opacity: 0;
}

#string:hover,
#searchEmojis:hover {
    border-color: rgba(0,0,0,.3);
}

#string:focus,
#searchEmojis:focus {
    border-color: rgba(0,0,0,.5);
    outline: none;
}

#string {
    max-width: 100%;
    height: 250px;
    resize: none;
    max-height: 250px;
    margin-top: 400px;
}

    #string.visible {
        margin-top: 0;
    }

#toggleView #string.visible {
    opacity: 1;
}

#string:focus {
}

#toggleView #searchEmojis {
    margin-top: -400px;
    margin-bottom: 0;
    opacity: 0;
    transition: all 2s;
}

#toggleView #searchEmojis.visible {
    opacity: 1;
    margin-top: 0;
    margin-bottom: 30px;
}


.hiddenEmoji {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
}

.copied {
    background: rgba(52,226,22,.8) !important;
    color: #fff;
}

#hello {
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    z-index: 1000;
    border: 10px solid rgba(0,0,0,.2);
    transition: all .25s;
    opacity: 1;
    cursor: pointer
}

#hello.visible {
    opacity: 0;
}

#toggleView {
    display: none;
    position: fixed;
    width: 800px;
    height: 430px;
    bottom: 40px;
    left: 50%;
    margin-left: -400px;
    max-width: 80%;
    max-height: 60%;
    z-index: 1000;
}

    #toggleView.visible {
        display: block;
    }

        #toggleView p,
        #hello p {
            margin: 0;
            background: rgba(255,255,255,.9);
            padding: 5px 20px;
            position: relative;
            top: -20px;
            font-weight: bold;
            font-family: Arial, Helevtica, sans-serif;
            color: #999;
            cursor: pointer;
        }

            #hello p {
                top: 0;
            }

        #toggleView p strong,
        #hello p strong {
            color: #23ED31
        }

    #toggleView p span,
    #hello p span {
        float:right;
    }


#string.visible,
#searchEmojis.visible,
#toggleView.visible p {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

#searchEmojis.visible {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translasearchEmojiste3d(0, 5px, 0);
    }

    to {
        -webkit-transform: none;
        transform: none;
    }
}

#string.visible,
#toggleView.visible p {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}