@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: 5vh;
    z-index: 2;
    padding: 0;
}

.text1, 
.text2, 
.text3, 
.text4, 
.text5, 
.text6, 
.text7, 
.text8
{
    position: fixed;
    left: 0;
    right:0;
    text-align: center;
    top: 18vh;
    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: 18vh;
    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: #fff;
}

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

.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: 750px) {
    /* @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: 20vh;
        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: 20px;
        white-space:default;
        color: #fff;
        color: grey;
        letter-spacing: 0.05em;
    }

    .text9
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 20vh;
        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: 20px;
        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;
        margin-bottom: 0;
    } 
    /* .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: 751px) 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: 20vh;
        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: 20px;
        white-space:default;
        color: #fff;
        color: grey;
        letter-spacing: 0.05em;
    }

    .text9
    {
        position: fixed;
        left: 0;
        right:0;
        text-align: center;
        top: 20vh;
        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: 20px;
        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;
        margin-bottom: 0;
    } 
    /* .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;
    }



}

/*  desktop max height 1080 */
@media screen and (max-height: 1080px) and (min-width: 1024px) {
    
    .face img {
        width: 750px !important;
    }
    
    .text1,
    .text2,
    .text3,
    .text4,
    .text5,
    .text6,
    .text7,
    .text8,
    .text9 {
    	font-size: 16px !important;
    	top: 22vh;
    }
    
}


/*  desktop max height 960 */
@media screen and (max-height: 960px) and (min-width: 1024px) {
    
    .face img {
        width: 500px !important;
    }
    
    .text1,
    .text2,
    .text3,
    .text4,
    .text5,
    .text6,
    .text7,
    .text8,
    .text9 {
    	font-size: 14px !important;
    	top: 24vh;
    }
    
}


/*  desktop max height 680 */
@media screen and (max-height: 680px) and (min-width: 1024px) {
    
    .face img {
        width: 450px !important;
    }
    
    .text1,
    .text2,
    .text3,
    .text4,
    .text5,
    .text6,
    .text7,
    .text8,
    .text9 {
    	font-size: 13px !important;
    	top: 25vh;
    }
    
}


/*  landscape tablet  */
@media screen and (min-width: 751px) and (max-width: 1024px) and (orientation: landscape) { 
	.face img {
        width: 300px !important;
    }
    
    .text1, 
    .text2, 
    .text3, 
    .text4, 
    .text5, 
    .text6, 
    .text7, 
    .text8,
    .text9 {
    	font-size: 16px !important;
    	top: 30vh;
    }
    
    .number1,
    .number2,
    .number3,
    .number4,
    .number5,
    .number6,
    .number7,
    .number8,
    .number9 {
    	padding-right: 5em;
    	padding-left: 5em;
    }
    
}


/*  landscape phone  */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
    
    .text1,
    .text2,
    .text3,
    .text4,
    .text5,
    .text6,
    .text7,
    .text8 {
    	font-size: 12px !important;
    	top: 30vh;
    }
    
    .text9 {
    	font-size: 10px !important;
    	top: 30vh;
    }

}


/*  portrait */
@media screen and (max-width: 750px) and (orientation: portrait) {
    .face img {
        width: 600px !important;
    }
    
}