@font-face {
    font-family: Muller;
    src: url(../f/MullerRegular.ttf);
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerRegularItalic.ttf);
    font-style: italic;
    font-weight: normal;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerMedium.ttf);
    font-style: normal;
    font-weight: 600;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerMediumItalic.ttf);
    font-style: italic;
    font-weight: 600;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerBold.ttf);
    font-style: normal;
    font-weight: bold;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerBoldItalic.ttf);
    font-style: italic;
    font-weight: bold;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerExtraBold.ttf);
    font-style: normal;
    font-weight: 800;
}
@font-face {
    font-family: MullerExtra;
    src: url(../f/MullerExtraBold.ttf);
    font-style: normal;
    font-weight: 800;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerExtraBoldItalic.ttf);
    font-style: italic;
    font-weight: 800;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerHeavy.ttf);
    font-style: normal;
    font-weight: 900;
}
@font-face {
    font-family: Muller;
    src: url(../f/MullerHeavyItalic.ttf);
    font-style: italic;
    font-weight: 900;
}

@font-face {
    font-family: MullerBlack;
    src: url(../f/MullerBlack.ttf);
    font-style: normal;
}
@font-face {
    font-family: MullerBlack;
    src: url(../f/MullerBlackItalic.ttf);
    font-style: italic;
}

@font-face {
    font-family: Muller;
    src: url(../f/MullerLight.ttf);
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: Muller;
    src: url(../f/MullerLightItalic.ttf);
    font-style: italic;
    font-weight: 200;
}

.pt-1 {
    padding-top: 1em;
}
.pt-2 {
    padding-top: 2em;
}
.pt-3 {
    padding-top: 3em;
}
.pt-4 {
    padding-top: 4em;
}
.pt-5 {
    padding-top: 5em;
}
.pt-6 {
    padding-top: 6em;
}
.pt-7 {
    padding-top: 7em;
}
.pt-8 {
    padding-top: 8em;
}
.pt-9 {
    padding-top: 9em;
}
.pt-10 {
    padding-top: 10em;
}
.pb-1 {
    padding-bottom: 1em;
}
.pb-2 {
    padding-bottom: 2em;
}
.pb-3 {
    padding-bottom: 3em;
}
.pb-4 {
    padding-bottom: 4em;
}
.pb-5 {
    padding-bottom: 5em;
}
.pb-6 {
    padding-bottom: 6em;
}
.pb-7 {
    padding-bottom: 7em;
}
.pb-8 {
    padding-bottom: 8em;
}
.pb-9 {
    padding-bottom: 9em;
}
.pb-10 {
    padding-bottom: 10em;
}
.pl-1 {
    padding-left: 1em;
}
.pl-2 {
    padding-left: 2em;
}
.pl-3 {
    padding-left: 3em;
}
.pl-4 {
    padding-left: 4em;
}
.pl-5 {
    padding-left: 5em;
}
.pl-6 {
    padding-left: 6em;
}
.pl-7 {
    padding-left: 7em;
}
.pl-8 {
    padding-left: 8em;
}
.pl-9 {
    padding-left: 9em;
}
.pl-10 {
    padding-left: 10em;
}
.pr-1 {
    padding-right: 1em;
}
.pr-2 {
    padding-right: 2em;
}
.pr-3 {
    padding-right: 3em;
}
.pr-4 {
    padding-right: 4em;
}
.pr-5 {
    padding-right: 5em;
}
.pr-6 {
    padding-right: 6em;
}
.pr-7 {
    padding-right: 7em;
}
.pr-8 {
    padding-right: 8em;
}
.pr-9 {
    padding-right: 9em;
}
.pr-10 {
    padding-right: 10em;
}
.mt-1 {
    margin-top: 1em;
}
.mt-2 {
    margin-top: 2em;
}
.mt-3 {
    margin-top: 3em;
}
.mt-4 {
    margin-top: 4em;
}
.mt-5 {
    margin-top: 5em;
}
.mt-6 {
    margin-top: 6em;
}
.mt-7 {
    margin-top: 7em;
}
.mt-8 {
    margin-top: 8em;
}
.mt-9 {
    margin-top: 9em;
}
.mt-10 {
    margin-top: 10em;
}
.mb-1 {
    margin-bottom: 1em;
}
.mb-2 {
    margin-bottom: 2em;
}
.mb-3 {
    margin-bottom: 3em;
}
.mb-4 {
    margin-bottom: 4em;
}
.mb-5 {
    margin-bottom: 5em;
}
.mb-6 {
    margin-bottom: 6em;
}
.mb-7 {
    margin-bottom: 7em;
}
.mb-8 {
    margin-bottom: 8em;
}
.mb-9 {
    margin-bottom: 9em;
}
.mb-10 {
    margin-bottom: 10em;
}
.ml-1 {
    margin-left: 1em;
}
.ml-2 {
    margin-left: 2em;
}
.ml-3 {
    margin-left: 3em;
}
.ml-4 {
    margin-left: 4em;
}
.ml-5 {
    margin-left: 5em;
}
.ml-6 {
    margin-left: 6em;
}
.ml-7 {
    margin-left: 7em;
}
.ml-8 {
    margin-left: 8em;
}
.ml-9 {
    margin-left: 9em;
}
.ml-10 {
    margin-left: 10em;
}
.mr-1 {
    margin-right: 1em;
}
.mr-2 {
    margin-right: 2em;
}
.mr-3 {
    margin-right: 3em;
}
.mr-4 {
    margin-right: 4em;
}
.mr-5 {
    margin-right: 5em;
}
.mr-6 {
    margin-right: 6em;
}
.mr-7 {
    margin-right: 7em;
}
.mr-8 {
    margin-right: 8em;
}
.mr-9 {
    margin-right: 9em;
}
.mr-10 {
    margin-right: 10em;
}

#menuToggle
{
    display: inline-block;
    -webkit-user-select: none;
    user-select: none;
}

#toggleButton {
    background-color: #ff2c2d;
    padding: 2em 1.58em;
    border-radius: 3em;
    line-height: 2.84em;
    position: relative;
    z-index: 30;
    width: 6em;
    height: 6em;

}

#toggleButton input
{
    display: block;
    width: 2.84em;
    height: 2em;
    position: absolute;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 32; /* and place it over the hamburger */

    -webkit-touch-callout: none;
    margin-top: 0;
}

/*
 * Just a quick hamburger
 */
#toggleButton span
{
    display: block;
    width: 2.84em;
    height: 0.4em;
    margin-bottom: 0.4em;
    position: relative;

    background: #fff;
    border-radius: 0.2em;

    z-index: 31;

    transform-origin: 0.2em 0;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
}

#toggleButton span:first-child
{
    transform-origin: 0 0;
}

#toggleButton span:nth-last-child(2)
{
    transform-origin: 0 100%;
}

#toggleButton span:nth-last-child
{
    margin-bottom: 0;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
    opacity: 1;
    transform: rotate(45deg) translate(0.3em, -0.3em);
    background: #fff;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
    opacity: 0;
    transform: rotate(0deg);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(1)
{
    transform: rotate(-45deg)  translate(0.1em, 0.1em);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    z-index: 20;
}

#menu ul li
{
    padding: 0.3em 5em;
}

#menu ul li a,
#menu ul li button {
    color: #fff;
    background: none;
    font-size: 2.4em;
}

#menu ul li.user
{
    color: #f3f3f3;
    background: none;
    font-size: 2em;
    padding: 0.5em 3em;
    text-align: right;
}

#menu ul li a:hover,
#menu ul li button:hover
{
    color: #ff2c2d;
    text-decoration: none;
}

#menu ul {
    padding-top: 15%;
    position: fixed;
    left: -50em;
    top: 0;
    height: 100%;
    min-width: 50em;
    background-color: #303030;
    overflow-y: auto;
}

a {
    color: #ff2c2d;
}

a:hover {
    color: #ff2c2d;
}

form label, .has-error .help-block {
    font-size: 1.6em;
}

.overflow {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.clickable { cursor: pointer; }

.text-upper {
    text-transform: uppercase;
}