/* CSS Document */
body {
	overflow-x:hidden;
  overflow-y:scroll;
	margin:0;
	padding:0;
		font-family:"HelveticaNeue-Light", "Helvetica_light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
a:link {
	color:inherit;
	text-decoration:none;
	font-weight:900;
}
a:visited {
	color:inherit;
}
a:hover {
	color:inherit;
	text-decoration:underline;
}
a:active {
	color:inherit;
}



.page {
    position:relative;
    display: inline-block;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:scroll;
    width:100%;
    padding:3vh 3vw;
    box-sizing:border-box;

    -webkit-box-shadow: inset 0px 0px 12VW 3px rgba(0, 0, 0, 0.31);
    -moz-box-shadow:    inset 0px 0px 12VW 3px rgba(0, 0, 0, 0.31);
    box-shadow:         inset 0px 0px 12VW 3px rgba(0, 0, 0, 0.31);
	
}
    .page > h1{
        font-family:"HelveticaNeue-Bold", "Helvetica_bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight:500;
        font-size:52px;
        margin:0;
        width:94vw;
    }
    .page > h3{
        margin:0;
        width:94vw;
    }
    .page > p{
        margin:0;
        width:94vw;
    }

    div#button-container{
        position: absolute;
        top:20px;
        right:20px;
        width:200px;
        background:black;
        color:white;
        
        border-radius: 6px;
    }
    div#button-container > div{
        background:white;
        color:black;
        margin:8px;
        padding:4px;
        cursor:pointer;
        text-align: center;
        
        border-radius: 4px;
    }
        div#button-container div#topbutton{
        }
        div#button-container div#frontbutton{
        }
        div#button-container div#bottombutton{            
        }
        
                
	
.runner-container{
    -webkit-perspective: 1000px; /* <-NB */
    margin-top: 8px;
}

/* Container box to set the sides relative to */
.runner {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    height: 38px;
    box-sizing:border-box;

    -webkit-transition: -webkit-transform .33s;
    transition: transform .33s; /* Animate the transform properties */

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; 
  
  background: rgba(0,0,0,0);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.63) 76%, rgba(0,0,0,0.63) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(0,0,0,0)), color-stop(76%, rgba(0,0,0,0.63)), color-stop(100%, rgba(0,0,0,0.63)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.63) 76%, rgba(0,0,0,0.63) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.63) 76%, rgba(0,0,0,0.63) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.63) 76%, rgba(0,0,0,0.63) 100%);
background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.63) 76%, rgba(0,0,0,0.63) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
  
}
.runner h2{
    margin:4px auto;
}
/* The two faces of the cube */
.front,.top,.bottom {
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, .8);

    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    height: 38px;
    
    box-sizing: border-box;
}

/* Position the faces */
.front {
    -webkit-transform: translateZ(16px);
    transform: translateZ(16px);
    
    background:red;
    color:white;
}

.top {
    -webkit-transform: rotateX(90deg) translateZ(54px);
    transform: rotateX(90deg) translateZ(54px);
    
    background:blue;
    color:white;
}
.bottom {
    -webkit-transform: rotateX(-90deg) translateZ(-58px);
    transform: rotateX(-90deg) translateZ(-58px);
    
    background:green;
    color:white;
}



/* Rotate the cube */
.runner.top-face {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg); 
}
.runner.bottom-face {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}

.runner h2{
	font-size:25px;
	
	text-transform:uppercase;
	text-align: left;
	padding-left:80px;
	padding-left:160px;
        
        white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}