.example > .article > a{
    padding: 0;
}
.example > .article {
    width: 100%;
    padding: 0;
    margin: 0;
    position: static;
}
.content {
    overflow: auto;
    padding: 0;
    border-radius: 15px;
}
.shadowed {
    box-shadow: -5px 5px 10px #888888;
}
.iconButton {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 2em;
    margin-top: 25px;
    border-radius: 10px;
}
.iconButton > a {
    width: 100%;
    height: 100%;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
.iconButton i {
    float: right;
    font-size: 2em;
}
#explain p {
    max-width: 5em;
    margin: 0 auto;
}
/* Shapes */
.circle {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    max-width: 1.5em;
    font-size: 7em;
    margin: 0 auto;
    padding: 15px;
}
#description, #welcome {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.screen {
    /*min-height: 35em;*/
}
#welcome .text {
    padding: 1em;
    padding-right: 5em;
}
.padded-underline {
    padding-bottom: 0.2em;
    display: inline-block;
    border-bottom: 3px solid;
}

.grazer {
    margin-bottom: 0.1em;
}
.grazer > .logo > img {
    width: 100%;
    max-width: 200px;
}

/*
*   Added since the update to bootstrap 4
*/
.content > h1 {
    justify-content: center;
    display: flex;
    width: 100%
}

h1 > p,
h1 > span,
h1 > p > span {
    font-size: inherit;
}

#pre-bite {
    position: relative;
}

#pre-bite > img {
    position: absolute;
    height: 100%;
}

#pre-bite > img,
#bite > img {
    height: 74px;
}

#bite-container > div {
    position: static;
}
#bite-container > div > h1 {
    position: absolute;
}