* {margin: 0; padding: 0;}
body, textarea { font-family: sans-serif }
h1 { padding: .5em; color: #e8514e }
h2 { padding: .5em;  }
a { text-decoration: none }
p, form { padding: .5em 1em; }
.important { color: #c9c86b; font-size: 120% }
span.label { color: #e8514e }
img { margin:.8ex 1ex;  } /*box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(255, 255, 255, 0.19); */
img.logo { float:right }
img.arrowleft { float:left }
img.arrowright { float:right }
img.model { float:left; clear:both }
.mnemonic {  text-decoration: underline; }

span.phone, span.prj { font-weight: bold color: #e8514e; font-size: 120%}
.addr { white-space: pre; padding: 1em;  }
.button {
    margin:.3em;
    padding:0.2em 0.3em;
    border-radius:0.3em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Helvetica',sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#3369ff;
    box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}
a.button {
    cursor: pointer;
    display:inline-block;
    font-size: 120%;
    padding:0.7em 0.7em;
    margin:.3em;
    border-radius:0.3em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Helvetica',sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#3369ff;
    box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
    text-align:center;
    position:relative;
}
a.button:hover{
 box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}

/* Big buttons on high-res phones */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) { 

    a.button {
        font-size: 180%;
    }
}

/* -------------- Front (and other) page --------------- #e7fbeb*/
body#index, body#start, body#finish {background: black; color: lightgrey; font-size:120% }
body#index { max-width: 53em; margin: auto }
body#start { max-width: 53em; margin: auto }
a.play { display:inline-block; font-size: 150%; clear:left; padding: .5em; }
/* a.consent { display:none; clear:left; padding: .8em; } dont think i need this because i removed the button */
a.play, a.consent { color: white /*#e7fbeb*/ }

/* -------------- Trial page --------------- */
/* Main image, fit to screen */
body#trial { background: black; color: #e0e0e0; }

#trial .imgbox {width: 900px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);  } /*width was 500px*/
.holder { width: 900px; height: 169px; } /*height changed from 500 px*/ /*width was 500px*/
#trial img.sample {position: absolute; width: 127px; height: 169px; margin: auto;  /*height changed from 500 px*/
                 transition:opacity .5s ease-in, transform .5s ease-in; }
#trial img.sample2 {position: absolute; left: 127; width: 127px; height: 169px; margin: auto;/*New to hold more leaves - added left*/
                 transition:opacity .5s ease-in, transform .5s ease-in; }
#trial img.sample3 {position: absolute; left: 254; width: 127px; height: 169px; margin: auto;/*New to hold more leaves - added left*/  
                 transition:opacity .5s ease-in, transform .5s ease-in; }
#trial img.sample4 {position: absolute; left: 386; width: 127px; height: 169px; margin: auto;/*New to hold more leaves - added left*/
                 transition:opacity .5s ease-in, transform .5s ease-in; }
#trial img.sample5 {position: absolute; left: 518; width: 127px; height: 169px; margin: auto;/*New to hold more leaves - added left*/
                 transition:opacity .5s ease-in, transform .5s ease-in; }
#trial img.sample6 {position: absolute; left: 645; width: 127px; height: 169px; margin: auto;/*New to hold more leaves - added left*/
                 transition:opacity .5s ease-in, transform .5s ease-in; }
#trial img.sample7 {position: absolute; left: 772; width: 127px; height: 169px; margin: auto;/*New to hold more leaves - added left*/
                 transition:opacity .5s ease-in, transform .5s ease-in; }
.Left { transform: translate(-90%, 30%) scale(.2, .2); opacity: 0; }
.Right { transform: translate(90%, -10%) scale(.2, .2); opacity: 0; }
.escape { transform: translate(20%, -100%) scale(.2, .2); opacity: 0; }
.loading { transform: scale(.2, .2); opacity: 0; }

#trial .controlpanel { width: 900px; margin: 0; margin-left: auto; margin-right: auto; background: #88888880; text-align: center} /*width was 500px*/
#trial .button {     width: 9em; }
/* Timer */
.timer {
    display:inline-block;
    font-size: 120%;
    font-family:'Helvetica',sans-serif;
    font-weight:bold;
    text-align:center;
    width: 5em; 
    padding:0.35em 1.0em;
    margin:.3em;
    border-radius:0.2em;
    box-sizing: border-box;
    background: #ff693320;
    text-align:center;
    position:relative;
}

/*
#start .imgbox {width: 500px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);  }
.holder { width: 500px; height: 400px; } /*height changed to 500 px

#start img.sample {position: absolute; width: 500px; height: 400px; margin: auto; } /*height changed to 500 px

#start .controlpanel { width: 500px; margin: 0; margin-left: auto; margin-right: auto; background: #88888880; text-align: center}
*/

/* -------------- Finish page --------------- */

body#finish { max-width: 35em; margin: auto }
.thanks { display: inline-block; margin: 1ex 1em; border: 1px solid #e7fbeb; border-radius:.5em; background: #ffff8820 }