/*
 * Hover.css (https://ianlunn.co.uk/)
 * Version: 1.0
 * Author: Ian Lunn @IanLunn
 * Author URL: https://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * https://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
/* Default styles for the demo buttons */
.button {
    margin: 0.4em;
    padding: 1em;
    cursor: pointer;
    background: #ececec;
    text-decoration: none;
    color: #666;
}

/* 2D TRANSITIONS */
/* Grow */
.grow {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .grow:hover {
        transform: scale(1.1);
    }

/* Shrink */
.shrink {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .shrink:hover {
        transform: scale(0.9);
    }

/* Pulse */
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(0.9);
    }
}

.pulse {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pulse:hover {
        animation-name: pulse;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

/* Pulse Grow */
@keyframes pulse-grow {
    to {
        transform: scale(1.1);
    }
}

.pulse-grow {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pulse-grow:hover {
        animation-name: pulse-grow;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

/* Pulse Shrink */
@keyframes pulse-shrink {
    to {
        transform: scale(0.9);
    }
}

.pulse-shrink {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pulse-shrink:hover {
        animation-name: pulse-shrink;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

/* Push */
@keyframes push {
    50% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

.push {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .push:hover {
        animation-name: push;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }

/* Pop */
@keyframes pop {
    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.pop {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pop:hover {
        animation-name: pop;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }

/* Rotate */
.rotate {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .rotate:hover {
        transform: rotate(4deg);
    }

/* Grow Rotate */
.grow-rotate {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .grow-rotate:hover {
        transform: scale(1.1) rotate(4deg);
    }

/* Float */
.float {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .float:hover {
        transform: translateY(-5px);
    }

/* Sink */
.sink {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .sink:hover {
        transform: translateY(5px);
    }

/* Hover */
@keyframes hover {
    50% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(-6px);
    }
}

.hover {
    display: inline-block;
    transition-duration: 0.5s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .hover:hover {
        transform: translateY(-6px);
        animation-name: hover;
        animation-duration: 1.5s;
        animation-delay: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

/* Hang */
@keyframes hang {
    50% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(6px);
    }
}

.hang {
    display: inline-block;
    transition-duration: 0.5s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .hang:hover {
        transform: translateY(6px);
        animation-name: hang;
        animation-duration: 1.5s;
        animation-delay: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

/* Skew */
.skew {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .skew:hover {
        transform: skew(-10deg);
    }

/* Skew Forward */
.skew-forward {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    transform-origin: 0 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .skew-forward:hover {
        transform: skew(-10deg);
    }

/* Wobble Vertical */
@keyframes wobble-vertical {
    16.65% {
        transform: translateY(8px);
    }

    33.3% {
        transform: translateY(-6px);
    }

    49.95% {
        transform: translateY(4px);
    }

    66.6% {
        transform: translateY(-2px);
    }

    83.25% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0);
    }
}

.wobble-vertical {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-vertical:hover {
        animation-name: wobble-vertical;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

/* Wobble Horizontal */
@keyframes wobble-horizontal {
    16.65% {
        transform: translateX(8px);
    }

    33.3% {
        transform: translateX(-6px);
    }

    49.95% {
        transform: translateX(4px);
    }

    66.6% {
        transform: translateX(-2px);
    }

    83.25% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}

.wobble-horizontal {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-horizontal:hover {
        animation-name: wobble-horizontal;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

/* Wobble Top */
@keyframes wobble-top {
    16.65% {
        transform: skew(-12deg);
    }

    33.3% {
        transform: skew(10deg);
    }

    49.95% {
        transform: skew(-6deg);
    }

    66.6% {
        transform: skew(4deg);
    }

    83.25% {
        transform: skew(-2deg);
    }

    100% {
        transform: skew(0);
    }
}

.wobble-top {
    display: inline-block;
    transform-origin: 0 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-top:hover {
        animation-name: wobble-top;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

/* Wobble Bottom */
@keyframes wobble-bottom {
    16.65% {
        transform: skew(-12deg);
    }

    33.3% {
        transform: skew(10deg);
    }

    49.95% {
        transform: skew(-6deg);
    }

    66.6% {
        transform: skew(4deg);
    }

    83.25% {
        transform: skew(-2deg);
    }

    100% {
        transform: skew(0);
    }
}

.wobble-bottom {
    display: inline-block;
    transform-origin: 100% 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-bottom:hover {
        animation-name: wobble-bottom;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: box-shadow;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
}

    .border-fade:hover {
        box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
        /* Hack to improve aliasing on mobile/tablet devices */
    }

/* Hollow */
.hollow {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: background;
    transform: translateZ(0);
    /* Hack to improve performance on mobile/tablet devices */
    box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
}

    .hollow:hover {
        background: none;
    }

/* Trim */
.trim {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .trim:before {
        content: "";
        position: absolute;
        border: white solid 4px;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        opacity: 0;
        transition-duration: 0.3s;
        transition-property: opacity;
    }

    .trim:hover:before {
        opacity: 1;
    }

/* Outline Outward */
.outline-outward {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .outline-outward:before {
        content: "";
        position: absolute;
        border: #ececec solid 4px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition-duration: 0.3s;
        transition-property: top right bottom left;
    }

    .outline-outward:hover:before {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
    }

/* Outline Inward */
.outline-inward {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .outline-inward:before {
        content: "";
        position: absolute;
        border: #ececec solid 4px;
        top: -16px;
        right: -16px;
        bottom: -16px;
        left: -16px;
        opacity: 0;
        transition-duration: 0.3s;
        transition-property: top right bottom left;
    }

    .outline-inward:hover:before {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        opacity: 1;
    }

/* Round Corners */
.round-corners {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: border-radius;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .round-corners:hover {
        border-radius: 1em;
    }

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: box-shadow;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .glow:hover {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    }

/* Box Shadow Outset */
.box-shadow-outset {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: box-shadow;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .box-shadow-outset:hover {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
    }

/* Box Shadow Inset */
.box-shadow-inset {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
}

    .box-shadow-inset:hover {
        box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
        /* Hack to improve aliasing on mobile/tablet devices */
    }

/* Float Shadow */
.float-shadow {
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .float-shadow:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        opacity: 0;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        /* W3C */
        transition-duration: 0.3s;
        transition-property: transform opacity;
    }

    .float-shadow:hover {
        transform: translateY(-5px);
        /* move the element up by 5px */
    }

        .float-shadow:hover:before {
            opacity: 1;
            transform: translateY(5px);
            /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
        }

/* Hover Shadow */
@keyframes hover {
    50% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(-6px);
    }
}

@keyframes hover-shadow {
    0% {
        transform: translateY(6px);
        opacity: 0.4;
    }

    50% {
        transform: translateY(3px);
        opacity: 1;
    }

    100% {
        transform: translateY(6px);
        opacity: 0.4;
    }
}

.hover-shadow {
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .hover-shadow:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        opacity: 0;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        /* W3C */
        transition-duration: 0.3s;
        transition-property: transform opacity;
    }

    .hover-shadow:hover {
        transform: translateY(-6px);
        animation-name: hover;
        animation-duration: 1.5s;
        animation-delay: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

        .hover-shadow:hover:before {
            opacity: 0.4;
            transform: translateY(6px);
            animation-name: hover-shadow;
            animation-duration: 1.5s;
            animation-delay: 0.3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

/* Shadow Radial */
.shadow-radial {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .shadow-radial:before, .shadow-radial:after {
        pointer-events: none;
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        box-sizing: border-box;
        background-repeat: no-repeat;
        height: 5px;
        opacity: 0;
        transition-duration: 0.3s;
        transition-property: opacity;
    }

    .shadow-radial:before {
        bottom: 100%;
        background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    }

    .shadow-radial:after {
        top: 100%;
        background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    }

    .shadow-radial:hover:before, .shadow-radial:hover:after {
        opacity: 1;
    }

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-top:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        border-style: solid;
        transition-duration: 0.3s;
        left: calc(50% - 10px);
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #ececec transparent;
        transition-property: top;
    }

    .bubble-top:hover:before {
        top: -10px;
    }

/* Bubble Right */
.bubble-right {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-right:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        border-style: solid;
        transition-duration: 0.3s;
        transition-property: right;
        top: calc(50% - 10px);
        right: 0;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #ececec;
    }

    .bubble-right:hover:before {
        right: -10px;
    }

/* Bubble Bottom */
.bubble-bottom {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-bottom:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        border-style: solid;
        transition-duration: 0.3s;
        transition-property: bottom;
        left: calc(50% - 10px);
        bottom: 0;
        border-width: 10px 10px 0 10px;
        border-color: #ececec transparent transparent transparent;
    }

    .bubble-bottom:hover:before {
        bottom: -10px;
    }

/* Bubble Left */
.bubble-left {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-left:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        border-style: solid;
        transition-duration: 0.3s;
        transition-property: left;
        top: calc(50% - 10px);
        left: 0;
        border-width: 10px 10px 10px 0;
        border-color: transparent #ececec transparent transparent;
    }

    .bubble-left:hover:before {
        left: -10px;
    }

/* Bubble Float Top */
.bubble-float-top {
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-top:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        left: calc(50% - 10px);
        top: 0;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #ececec transparent;
        transition-duration: 0.3s;
        transition-property: top;
    }

    .bubble-float-top:hover {
        transform: translateY(5px) translateZ(0);
    }

        .bubble-float-top:hover:before {
            top: -10px;
        }

/* Bubble Float Right */
.bubble-float-right {
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-right:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        top: calc(50% - 10px);
        right: 0;
        content: "";
        border-style: solid;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #ececec;
        transition-duration: 0.3s;
        transition-property: right;
    }

    .bubble-float-right:hover {
        transform: translateX(-5px);
    }

        .bubble-float-right:hover:before {
            right: -10px;
        }

/* Bubble Float Bottom */
.bubble-float-bottom {
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-bottom:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        left: calc(50% - 10px);
        bottom: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #ececec transparent transparent transparent;
        transition-duration: 0.3s;
        transition-property: bottom;
    }

    .bubble-float-bottom:hover {
        transform: translateY(-5px) translateZ(0);
    }

        .bubble-float-bottom:hover:before {
            bottom: -10px;
        }

/* Bubble Float Left */
.bubble-float-left {
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-left:before {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: "";
        top: calc(50% - 10px);
        left: 0;
        border-style: solid;
        border-width: 10px 10px 10px 0;
        border-color: transparent #ececec transparent transparent;
        transition-duration: 0.3s;
        transition-property: left;
    }

    .bubble-float-left:hover {
        transform: translateX(5px);
    }

        .bubble-float-left:hover:before {
            left: -10px;
        }

/* CURLS */
/* Curl Top Left */
.curl-top-left {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-top-left:before {
        pointer-events: none;
        position: absolute;
        content: "";
        height: 0;
        width: 0;
        top: 0;
        left: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#ffffff", endColorstr="#000000");
        /*For IE7-8-9*/
        z-index: 1000;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        transition-property: width height;
    }

    .curl-top-left:hover:before {
        width: 25px;
        height: 25px;
    }

/* Curl Top Right */
.curl-top-right {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-top-right:before {
        pointer-events: none;
        position: absolute;
        content: "";
        height: 0;
        width: 0;
        top: 0;
        right: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
        box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        transition-property: width height;
    }

    .curl-top-right:hover:before {
        width: 25px;
        height: 25px;
    }

/* Curl Bottom Right */
.curl-bottom-right {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-bottom-right:before {
        pointer-events: none;
        position: absolute;
        content: "";
        height: 0;
        width: 0;
        bottom: 0;
        right: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        transition-property: width height;
    }

    .curl-bottom-right:hover:before {
        width: 25px;
        height: 25px;
    }

/* Curl Bottom Left */
.curl-bottom-left {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-bottom-left:before {
        pointer-events: none;
        position: absolute;
        content: "";
        height: 0;
        width: 0;
        bottom: 0;
        left: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
        box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        transition-property: width height;
    }

    .curl-bottom-left:hover:before {
        width: 25px;
        height: 25px;
    }

.link {
    display: block;
    width: 100%;
    text-align: center;
}

    .link a {
        font-weight: bold;
    }

#forkongithub a {
    background: #000;
    color: #fff;
    text-decoration: none;
    font-family: arial, sans-serif;
    text-align: center;
    font-weight: bold;
    padding: 5px 40px;
    font-size: 1rem;
    line-height: 2rem;
    position: relative;
    transition: 0.5s;
}

    #forkongithub a:hover {
        background: #060;
        color: #fff;
    }

    #forkongithub a::before,
    #forkongithub a::after {
        content: "";
        width: 100%;
        display: block;
        position: absolute;
        top: 1px;
        left: 0;
        height: 1px;
        background: #fff;
    }

    #forkongithub a::after {
        bottom: 1px;
        top: auto;
    }

@media screen and (min-width: 800px) {
    #forkongithub {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        width: 200px;
        overflow: hidden;
        height: 200px;
    }

        #forkongithub a {
            width: 200px;
            position: absolute;
            top: 60px;
            right: -60px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
        }
}