.display-content-vertical {
    display: flex;
    flex-direction: column;
}

.display-content-horizontal {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}

.hobby {
    width: 190px;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.hobbies-content {
    margin-top: 30px;
}

.hobbies-content:last-child {
    height: 90%;
}

.hobby-description {
    align-content: center;
    justify-content: center;
    margin-top: 30px;
}

.hobby-circle {
    margin: 40px;
    opacity: 1;
    animation-fill-mode: backwards;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -ms-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    cursor: pointer;
}

.hobby .tooltip {
    position: relative;
    align-self: center;
    margin-left: 40px;
    margin-right: 40px;
    width: 150px;
    animation: none;
}

.hobby .hidden {
    visibility: hidden;
    opacity: 0;
}

.hobby .fadeInTooltip,
.hobby-info {
    -webkit-animation: fadein .2s ease-in-out;
    -moz-animation: fadein .2s ease-in-out;
    -ms-animation: fadein .2s ease-in-out;
    -o-animation: fadein .2s ease-in-out;
    animation: fadein .2s ease-in-out;
}

.hobby-info {
    margin: 10px;
    align-content: center;
    text-align: left;
    align-self: center;
    visibility: collapse;
    display: none;
    max-width: calc(calc(150px + 40px) * 4 - calc(2 * 40px));
    text-align: justify;
    margin-bottom: 50px;
}

.motorcycle {
    -webkit-animation: fadein .4s ease-in-out;
    -moz-animation: fadein .4s ease-in-out;
    -ms-animation: fadein .4s ease-in-out;
    -o-animation: fadein .4s ease-in-out;
    animation: fadein .4s ease-in-out;
    background-image: url(../images/motorcycling.jpg);
    background-size: 182%;
    background-position: -80px 0px;
}

.climbing {
    -webkit-animation: fadein .4s ease-in-out .1s backwards;
    -moz-animation: fadein .4s ease-in-out .1s backwards;
    -ms-animation: fadein .4s ease-in-out .1s backwards;
    -o-animation: fadein .4s ease-in-out .1s backwards;
    animation: fadein .4s ease-in-out .1s backwards;
    background-image: url(../images/climbing.jpg);
    background-size: 120%;
}

.bicycle {
    -webkit-animation: fadein .4s ease-in-out .2s backwards;
    -moz-animation: fadein .4s ease-in-out .2s backwards;
    -ms-animation: fadein .4s ease-in-out .2s backwards;
    -o-animation: fadein .4s ease-in-out .2s backwards;
    animation: fadein .4s ease-in-out .2s backwards;
    background-image: url(../images/cycling.jpg);
    background-size: 200%;
    background-position-x: -60px;
}

.hiking {
    -webkit-animation: fadein .4s ease-in-out .3s backwards;
    -moz-animation: fadein .4s ease-in-out .3s backwards;
    -ms-animation: fadein .4s ease-in-out .3s backwards;
    -o-animation: fadein .4s ease-in-out .3s backwards;
    animation: fadein .4s ease-in-out .3s backwards;
    background-image: url(../images/hiking.jpg);
    background-size: 130%;
    background-position-y: -50px;
    image-orientation: 90deg;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@-ms-keyframes fadein {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}