@import url(https://fonts.googleapis.com/css?family=Michroma);


body, html {
    height: 255%;
    margin: 0;
    padding: 0;
    background: black;
}

.spacer {
    margin: 50vh 0 25vh 0; /* 50% of view height */
}

.mouse
{
    display: block;
    position: fixed;
    left: 0;
    right:0;
    text-align: center;
    top: 42vh;
    z-index: 2;
    color: white;
    font-family: 'Michroma', Helvetica, Arial, sans-serif; 
    font-weight: normal;
}

.peterwrapper
{
    display: block;
    position: fixed;
    text-align: center;
    bottom: 19vh;
    left: 0;
    right: 0;
    margin-left: -450px;
    z-index: 2;
    color: grey;
    font-family: 'Michroma', Helvetica, Arial, sans-serif; 
    font-weight: normal;
    font-size: 10px;
} 






.number1,
.number2,
.number3,
.number4,
.number5,
.number6,
.number7,
.number8,
.number9
{
    display: block;
    position: fixed;
    left: 0;
    right:0;
    text-align: center;
    top: 10vh;
    z-index: 2;
    padding: 0;
}

.text1, 
.text2, 
.text3, 
.text4, 
.text5, 
.text6, 
.text7, 
.text8
{
    position: fixed;
    left: 0;
    right:0;
    text-align: center;
    top: 25vh;
    color: white;
    z-index: 2;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    font-family: 'Michroma', Helvetica, Arial, sans-serif; 
    font-weight: normal;
    font-size: 18px;
    white-space:default;
    color: #fff;
    color: grey;
    letter-spacing: 0.05em;
}
.text9 {
    position: fixed;
    left: 0;
    right:0;
    text-align: center;
    top: 25vh;
    color: white;
    z-index: 2;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    font-family: 'Michroma', Helvetica, Arial, sans-serif; 
    font-weight: normal;
    font-size: 18px;
    white-space:default;
    color: #fff;
    color: grey;
    letter-spacing: 0.05em;
}

.orange {
    color: #e97c25;
}

.face {
    display: block;
    position: fixed;
    left: 0;
    right:0;
    text-align: center;
    bottom: 0;
    z-index: 1;
}

.logo {
    float: left;
    text-align: right;
}


.address {
    padding: 28px 0 0 0;
    font-family: Helvetica, Arial, sans-serif; 
    text-align: left;
    font-size: 11px;
    float: right;
}

div.right {
    float: right;
}


a:link    { color: grey  }
a:visited { color: grey  }
a:hover   { color: white  }
a:active  { color: white  }





@media (max-width: 700px) {
    /* @media (max-width: 1024px) { */

    .number1,
    .number2,
    .number3,
    .number4,
    .number5,
    .number6,
    .number7,
    .number8,
    .number9
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 2vh;
        z-index: 2;
    }

    .text1, 
    .text2, 
    .text3, 
    .text4, 
    .text5, 
    .text6, 
    .text7, 
    .text8
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 45vh;
        color: white;
        z-index: 2;
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        font-family: 'Michroma', Helvetica, Arial, sans-serif; 
        font-weight: normal;
        font-size: 18px;
        white-space:default;
        color: #fff;
        color: grey;
        letter-spacing: 0.05em;
    }

    .text9
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 35vh;
        color: white;
        z-index: 2;
        width: 100%;
        max-width: 850px;
        margin: 0 auto;

        font-family: 'Michroma', Helvetica, Arial, sans-serif; 
        font-weight: normal;
        font-size: 10px;
        white-space:default;
        color: #fff;
        color: grey;
        letter-spacing: 0.05em;
    }


    .face {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        bottom: 0;
        z-index: 1;
    } 
    .face img {
        width: 300px;
    } 

    .mouse
    {
        font-family: 'Michroma', Helvetica, Arial, sans-serif; 
        font-weight: normal;
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 45vh;
        z-index: 2;
        color: white;
    }



}




@media (min-width: 701px) and (max-width: 1024px) { */

    .number1,
    .number2,
    .number3,
    .number4,
    .number5,
    .number6,
    .number7,
    .number8,
    .number9
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 10vh;
        z-index: 2;
    }

    .text1, 
    .text2, 
    .text3, 
    .text4, 
    .text5, 
    .text6, 
    .text7, 
    .text8
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 35vh;
        color: white;
        z-index: 2;
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        font-family: 'Michroma', Helvetica, Arial, sans-serif; 
        font-weight: normal;
        font-size: 18px;
        white-space:default;
        color: #fff;
        color: grey;
        letter-spacing: 0.05em;
    }

    .text9
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 35vh;
        color: white;
        z-index: 2;
        width: 100%;
        max-width: 850px;
        margin: 0 auto;

        font-family: 'Michroma', Helvetica, Arial, sans-serif; 
        font-weight: normal;
        font-size: 10px;
        white-space:default;
        color: #fff;
        color: grey;
        letter-spacing: 0.05em;
    }


    .face {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        bottom: 0;
        z-index: 1;
    } 
    .face img {
        width: 300px;
    } 

    .mouse
    {
        font-family: 'Michroma', Helvetica, Arial, sans-serif; 
        font-weight: normal;
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 45vh;
        z-index: 2;
        color: white;
    }



}