.whitepage {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 1.5em;
    -webkit-transition: 1s;
    transition: 1s;
    padding: 2em;
}

.home .whitepage {
    background-color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

.home .whitepage:hover {
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
}

@media (max-width: 680px) {
    .home .whitepage {
        background-color: rgba(255, 255, 255, 1);
        opacity: 1;
    }
}

.whitepage.thin {
    padding: 0.5em 1em 0.2em;
    margin-top: 0.5em;
    /* no shrink */
    width: 100%;
    height: auto;
    overflow: hidden;
}

.whitepage.thin.shrink {
    width: 0;
    height: 0;
    padding: 0;
}

.topright .whitepage h1,
.topright .whitepage h1 a {
    color: black;
    font-family: 'Allura', serif;
    font-size: 3rem;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

.topright .whitepage h1 a {
    color: black;
}

ul.icons {
    list-style-type: none;
    text-align: center;
    padding: 0;
    margin: 0;
    -webkit-transition: 2s;
    transition: 2s;
    /* non shrink */
    width: 100%;
    max-height: 32px;
    overflow: hidden;
}

ul.icons.shrink {
    width: 0;
    height: 0;
}

ul.icons li {
    display: inline-flex;
    margin: 0 3px 22px;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;

    -webkit-transition: transform .5s ease;
    transition: transform .5s ease;
}
li img.arrow.still {
    transform: none;
}

li img.arrow.up {
    /* transform: rotate(0deg); */
    animation-name: rotate0;
    -webkit-animation-name: rotate0;

    animation-duration: .3s;
    -webkit-animation-duration: .3s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
}

li img.arrow.down {
    transform: rotate(90deg);
    animation-name: rotate90;
    -webkit-animation-name: rotate90;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
}

@keyframes rotate90 {
    0% { transform: rotate(0deg);}
    15% { transform: rotate(-15deg);}
    100% { transform: rotate(90deg);}
}

@-webkit-keyframes rotate90 {
    0% { -webkit-transform: rotate(0deg);}
    15% { -webkit-transform: rotate(-15deg);}
    100% { -webkit-transform: rotate(90deg);}
}

@keyframes rotate0 {
    0% { transform: rotate(90deg);}
    100% { transform: rotate(0deg);}
}

@-webkit-keyframes rotate0 {
    0% { -webkit-transform: rotate(90deg);}
    100% { -webkit-transform: rotate(0deg);}
}

/* icons with svg images */
ul.icons li.button {
    background-color: grey;
    border-radius: 32px;
    width: 32px;
    height: 32px;
}

ul.icons li.button img {
    margin: 7px 0 0 7px;
}

.whitepage section {
    font-family: 'Source Sans Pro Light', sans-serif;
    font-size: 20px;
    margin-top: 1em;
    display: none;
}

@media (max-width: 1020px) {
    .whitepage section {
        font-size: 18px;
    }
}

.whitepage section pre {
        font-size: 11px;
        margin: 0 0 0 -2em;
}

@media (max-width: 1020px) {
    .whitepage section pre {
        font-size: 12px;
        margin: 0;
    }
}

@media (max-width: 400px) {
    .whitepage section pre {
        font-size: 10px;
        margin: 0 0 0 -2em;
    }
}

.whitepage section pre span {
    font-weight: bold;
}

.hatch {
    animation-name: hatch;
    -webkit-animation-name: hatch;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;

    visibility: visible !important;
}

@keyframes hatch {
    0% { transform: rotate(0deg) scaleY(0.6); }
    20% { transform: rotate(-2deg) scaleY(1.05); }
    35% { transform: rotate(2deg) scaleY(1); }
    50% { transform: rotate(-2deg); }
    65% { transform: rotate(1deg); }
    80% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    }
    65% {
        -webkit-transform: rotate(1deg);
    }
    80% {
        -webkit-transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}