body,
main,
footer
{
    font-family: 'Lato', sans-serif;

    display: -webkit-flex;
    display:    -moz-flex;
    display:     -ms-flex;
    display:      -o-flex;
    display:         flex;

    text-align: center;
}

body
{
            flex-direction: column;

    min-height: 100vh;

    -webkit-flex-direction: column;
       -moz-flex-direction: column;
        -ms-flex-direction: column;
         -o-flex-direction: column;
}

main
{
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-flex: 1;
       -moz-flex: 1;
        -ms-flex: 1;
         -o-flex: 1;
            flex: 1;
}

footer
{
            flex-direction: row;

    margin-right: 5px;

    -webkit-flex-direction: row;
       -moz-flex-direction: row;
        -ms-flex-direction: row;
         -o-flex-direction: row;
}

button
{
    font-family: 'Lato', sans-serif;
    font-size: .8rem;

    width: 100%;
    margin: 0 0 5px 5px;
    padding: 1rem 0;

    cursor: pointer;
    transition: background 250ms ease-in-out,
    transform 150ms ease;
    text-align: center;
    text-decoration: none;

    color: #fff;
    border: none;
    background: #222222;

    -webkit-appearance: none;
       -moz-appearance: none;
}


button:hover,
button:focus
{
    background: #111111;
}

button:focus
{
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active
{
    transform: scale(.99);
}

.hh {
	display: block;
	font-size: 0.8rem;
	margin-bottom: 15px;
}

.qq
{
    font-size: 2rem;
    line-height: 1.33;
    width: 90%;
    margin: 0 auto;
}


.icon {
	width: 32px;
	height: 32px;
}

button .icon {
	width: 24px;
	height: 24px;
}