@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);


/*
 * The MIT License (MIT)
 *
 * Copyright © 2013-2019 Florian Barras <https://barras.io> (florian@barras.io)
 */

/* ATTRIBUTES *************************************************************************************/

.center {
    margin: auto;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hidden {
    display: none;
}

.spin {
}

@media only screen and (min-device-width: 768px) {
    .spin {
        -moz-animation-name: spin;
        -moz-animation-duration: 4000ms;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;

        -ms-animation-name: spin;
        -ms-animation-duration: 4000ms;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;

        -webkit-animation-name: spin;
        -webkit-animation-duration: 4000ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;

        animation-name: spin;
        animation-duration: 4000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0deg);
        }
        to {
            -moz-transform: rotate(360deg);
        }
    }

    @-ms-keyframes spin {
        from {
            -ms-transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}


/* COLORS *****************************************************************************************/

.blue {
    color: blue!important;
}

.cyan {
    color: cyan!important;
}

.green {
    color: green!important;
}

.lightgreen {
    color: lightgreen!important;
}

.magenta {
    color: magenta!important;
}

.orange {
    color: orange!important;
}

.pink {
    color: pink!important;
}

.red {
    color: red!important;
}

.yellow {
    color: yellow!important;
}


/* ELEMENTS ***************************************************************************************/

a, a:active, a:hover, a:link, a:visited {
    z-index: 10;
}

button, .button {
    z-index: 10;

    display: inline-block;
    margin: 1em;

    color: lightgrey;

    font-size: 2em;

    cursor: pointer;
}

label, .label {
    z-index: 10;

    display: inline-block;
    width: 2em;
    height: 2em;
    margin: 0;

    font-size: 2em;

    cursor: pointer;
}

select, .select {
    z-index: 10;

    display: inline-block;
    border-width: 1px;
    border-radius: 0.5em;

    font-size: 1em;

    cursor: pointer;
}