*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
html{
    height:100%;
}
body{
    margin:0;
    /*font-family:'Consolas', 'Monaco', monospace;*/
    font-family:'Roboto', sans-serif;
    font-size:16px;
    line-height:1.44;
    background:#E9E8EB;
    color:#333;

    min-height:100%;
    display:flex;
    flex-direction:column;
}

button{ font-family:'Roboto', sans-serif; }
hr{ margin:20px auto; border:0; border-top:2px solid #434550; }
/*hr{ margin:20px auto; border:0; background-image:url('../images/diag-lines.svg'); height:10px; width:100%; }*/


h1,h2,h3,h4,h5,h6{ font-family:inherit; line-height:1.1; color:inherit; }
h1,h2,h3{ margin-top:20px; margin-bottom:10px; }
h4,h5,h6{ margin-top:10px; margin-bottom:10px; }
h1{ font-size:36px; }
h2{ font-size:30px; }
h3{ font-size:24px; }
h4{ font-size:18px; }
h5{ font-size:14px; }
h6{ font-size:12px; }
p{ margin:0 0 10px; }

input, textarea, select{ font-family:inherit; }


/* FontAwesome Subset
-------------------------------- */

@font-face {
    font-family: 'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?83330187');
    src:url('../fonts/fontawesome-webfont.eot?83330187#iefix') format('embedded-opentype'),
        url('../fonts/fontawesome-webfont.woff?83330187') format('woff'),
        url('../fonts/fontawesome-webfont.ttf?83330187') format('truetype'),
        url('../fonts/fontawesome-webfont.svg?83330187#fontawesome-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fa{
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.fa-fw{
    width:1.28571429em;
    text-align:center
}
.fa-lock:before{ content:'\e800'; }
.fa-unlock:before{ content:'\e801'; }
.fa-unlock-alt:before{ content:'\f13e'; }
.fa-caret-down:before{ content:'\e802'; }
.fa-caret-up:before{ content:'\e803'; }
.fa-caret-left:before{ content:'\e804'; }
.fa-caret-right:before{ content:'\e805'; }
.fa-chevron-down:before{ content:'\e806'; }
.fa-chevron-left:before{ content:'\e807'; }
.fa-chevron-right:before{ content:'\e808'; }
.fa-chevron-up:before{ content:'\e809'; }
.fa-arrow-down:before{ content:'\e80a'; }
.fa-arrow-left:before{ content:'\e80b'; }
.fa-arrow-right:before{ content:'\e80c'; }
.fa-arrow-up:before{ content:'\e80d'; }
.fa-key:before{ content:'\e80e'; }
.fa-arrows:before{ content:'\f047'; }
.fa-bars:before{ content:'\f0c9'; }
.fa-angle-left:before{ content:'\f104'; }
.fa-angle-right:before{ content:'\f105'; }
.fa-angle-up:before{ content:'\f106'; }
.fa-angle-down:before{ content:'\f107'; }
.fa-long-arrow-down:before{ content:'\f175'; }
.fa-long-arrow-up:before{ content:'\f176'; }
.fa-long-arrow-left:before{ content:'\f177'; }
.fa-long-arrow-right:before{ content:'\f178'; }



.puzzle{ flex:1; }

.container{ width:320px; margin:auto; }
#surface{ width:320px; height:320px; }
@media (min-width:700px){
    .container{ width:600px; }
    #surface{ width:600px; height:600px; }
}

.form-control{
    display:block;
    border:1px solid transparent;
    background-color:#434550;
    color:#EEE;
    font-size:16px;
    width:320px;
    padding:4px 6px;
    text-shadow:none;
    resize:none;
}
.form-control:focus{ outline:0; }

.input-group{
    position:relative;
    display:table;
    border-collapse:separate;
}
.input-group .form-control, .input-group-btn{ display:table-cell; }
.input-group .form-control{
    position:relative;
    float:left;
    width:100%;
}


.input-group-btn{
    position:relative;
    width:1%;
    vertical-align:middle;
    font-size:0;
    white-space:nowrap;
}

#key-input-container button{
    border:0;
    background-color:#3c3e48;
    border:1px solid transparent;
    box-shadow:none;
    color:#b6b8bb;
    padding:4px 6px;
    cursor:pointer;
    font-size:16px;
}
#key-input-container button:hover{
    background-color:#D46556;
    color:#FFF;
}
#key-input{ text-transform:uppercase; }
::-webkit-input-placeholder{ text-transform:none; }
:-moz-placeholder{ text-transform:none; }
::-moz-placeholder{ text-transform:none; }
:-ms-input-placeholder{ text-transform:none; }



a{ text-decoration:none; }
.btn {
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    padding: 10px 20px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
}
.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
}
.btn-1 {
    border: 3px solid #333;
    color: #333;
}
.btn-1:hover,
.btn-1:active {
    color: #FFF;
    border: 3px solid #D46556;
    background: #D46556;
}



#key-input-container{
    /*position:fixed;
    bottom:0;*/
    background:#232530;
    color:#FFF;
    width:100%;
    padding:15px 0;
    border-top:#D46556 solid 4px;
}
#key-input-container form{
    position:relative;
    width:300px;
    margin:auto;
}




input[type=range]{
    -webkit-appearance:none;
    width:100%;
    background:transparent;
    margin:30px 0;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    background-color:#E9E8EB;
    border:2px solid #D46556;
    height:20px;
    width:20px;
    border-radius:20px;
    cursor:pointer;
    margin-top:-9px;
    box-shadow:2px 0px #E9E8EB, -2px 0px #E9E8EB;
}
input[type=range]:focus{ outline:none; }
input[type=range]::-ms-track{
    width:100%;
    cursor:pointer;
    background:transparent;
    border-color:transparent;
    color:transparent;
}
input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:2px;
    cursor:pointer;
    background:#666;
    border-color:transparent;
    color:transparent;
    border-radius:2px;
}


#access-denied, #incorrect, #finish, #page-404{
    text-align:center;
}


/* Puzzle 0
-------------------------------- */

#puzzle0 .key-container{
    padding:20px;
    background-color:#D46556;
    cursor:pointer;
}
#puzzle0 .key-container h3{ margin:0; }
#puzzle0 h3.hidden{ color:#D46556; }
#puzzle0 h3.visible{ color:#FFF; }



/* Puzzle 1
-------------------------------- */

#puzzle1 .char-container{
    width:280px;
    margin:auto;
}
#puzzle1 .char-col{
    overflow:hidden;
    width:70px;
    height:128px;
    position:relative;
    float:left;
}

#puzzle1 .char-col h1{
    font-family:'Roboto Mono', monospace;
    font-size:128px;
    line-height:1;
    margin:0;
    position:absolute;
    top:0;
    left:0;
    margin-left:70px;
}
#puzzle1 .c{
    color:#D46556;
}


/* Puzzle 2
-------------------------------- */

#puzzle2 .wrapper{
    width:300px;
    height:300px;
    position:relative;
}
#puzzle2 .wrapper img{
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:300px;
}
#puzzle2 #slider{
    position:relative;
    z-index:10;
}
@media (min-width:700px){
    #puzzle2 .wrapper{
        width:600px;
        height:600px;
    }
    #puzzle2 .wrapper img{
        width:600px;
        height:600px;
    }
}


/* Puzzle 3
-------------------------------- */

#puzzle3 .row{
    width:290px;
    margin:20px auto;
}
#puzzle3 .toggle{
    display:inline-block;
}
#puzzle3 .checkbox{
    display:none;
}
#puzzle3 .bg{
    display:block;
    position:relative;
    width:54px;
    height:74px;
    font-size:24px;
    border:3px solid #333;
    background:#333;
    color:#EFEFEF;
    text-align:center;
}
#puzzle3 .cover{
    width:48px;
    height:34px;
    background:#E4E4E4;
    position:absolute;
    top:0px;
    transition:top .2s;
    text-align:center;
    color:#CACACA;
    font-size:16px;
    padding-top:6px;
}
#puzzle3 .checkbox:checked ~ .bg .cover{
    top:34px;
}


/* I think all of the following can be deleted
-------------------------------- */

#puzzle3 .p3-text{
    font-size:32px;
    font-family:'Consolas', 'Monaco', monospace;
    letter-spacing:20.8px;
}

@media (min-width:700px){
    #puzzle3 .p3-text{
        letter-spacing:19.7px;
    }
}

#puzzle4 .radio-group{
    width:30px;
    display:inline-block;
    margin:0 3px;
    /*float:right;*/
}
#puzzle4 input[type=radio]{
    cursor:pointer;
    width:30px;
    height:30px;
    display:block;
    margin:0px;
}

#puzzle4 *{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#puzzle4 .radio{
    position:relative;
}
#puzzle4 .radio:before, #puzzle4 .radio:after{
    content:'';
    position:absolute;
}
#puzzle4 .radio:before{
    height:100%;
    width:100%;
    background-color:#D9D8DB;
}
#puzzle4 .radio:checked:before{
    background-color:#D9D8DB;
}
#puzzle4 .radio:after{
    height:100%;
    width:100%;
}
#puzzle4 .radio:checked:after{
    background-color:#E9E8EB;
    -webkit-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
}


#puzzle4-2 .row{ margin-left:-4px; margin-right:-4px; padding:4px 0; }
#puzzle4-2 .ninth{
    float:left;
    width:11.11%;
    padding:0 4px;
}
#puzzle4-2 .ninth:after{
    clear:both;
}
#puzzle4-2 .ninth input{
    width:100%;
    background:rgba(0,0,0,0.1);
}


#puzzle5 .encrypted{
    font-size:18px;
    font-family:'Consolas', 'Monaco', monospace;
    /*letter-spacing:20.8px;*/
}
#puzzle5 li{ display:inline; }

/* End of deleted stuff ^^
-------------------------------- */


/* Puzzle 4
-------------------------------- */

#puzzle4 .text-block{
    display:inline-block;
    padding:15px 0 15px 15px;
    border:6px solid #333;
    position:relative;
    margin:10px 0 10px 56px;
}
#puzzle4 .handle{
    position:absolute;
    top:-6px;
    left:-42px;
    padding:10px 8px;
    background:#333;
    color:#DDD;
    cursor:pointer;
}
#puzzle4 .two .handle{ top:44px; }
#puzzle4 .three .handle{ top:94px; }

#puzzle4 .text-block p{
    font-size:18px;
    font-family:'Consolas', 'Monaco', monospace;
    letter-spacing:15px;
    margin-bottom:0;
}


/* Puzzle 5
-------------------------------- */

#puzzle5 .wrapper{
    width:300px;
    margin:auto;
    position:relative;
}
#puzzle5 .text-block.one{
    width:284px;
    padding:10px;
    margin:auto;
}
#puzzle5 .text-block.one .row div{
    display:inline-block;
    width:24px;
    height:24px;
    text-align:center;
    vertical-align:middle;
}
#puzzle5 .text-block.two{
    width:260px;
    padding:10px;
    margin:auto;
    border:6px solid rgba(0,0,0,0.5);
    text-align:center;
    position:absolute;
    left:-4px;
    top:-6px;
}
#puzzle5 .text-block.two .row div{
    display:inline-block;
    margin:1px 4px;
    width:16px;
    height:22px;
    text-align:center;
    vertical-align:middle;
}
#puzzle5 .text-block.two .row div.c{
    background-color:rgba(212,101,86,0.5);
}
#puzzle5 .text-block.two .handle{
    position:absolute;
    top:-6px;
    left:-42px;
    padding:10px 10px;
    background:rgba(0,0,0,0.5);
    color:#DDD;
    cursor:pointer;
}
#puzzle5 .hot-cold-container{
    width:100px;
    text-align:center;
    margin:20px auto;
}
#puzzle5 .status-dot{
    display:inline-block;
    margin:5px;
    width:10px;
    height:10px;
    border-radius:10px;
    background-color:#333333;
    vertical-align:middle;
}


/* Puzzle 6
-------------------------------- */

#puzzle6 .char-container{
    float:left;
    margin:0 2px;
}
#puzzle6 .char-wrapper{
    width:34px;
    height:40px;
    overflow:hidden;
    position:relative;
}
#puzzle6 .items{
    position:relative;
    top:0px;
    transition:top ease-in-out .15s;
    background:#333;
    color:#FEFEFE;
}
#puzzle6 .item{
    width:34px;
    height:40px;
    font-size:28px;
    text-align:center;
}
#puzzle6 .up, #puzzle6 .down{
    /*background:#333; color:#FEFEFE;*/
    text-align:center;
}
#puzzle6 .wrapper{
    width:305px;
    margin:auto;
}


/* Puzzle 7
-------------------------------- */

#puzzle7 .wrapper{
    width:320px;
    margin:auto;
}
#puzzle7 .wrapper img{
    float:left;
    cursor:pointer;
}


/* Puzzle 8
-------------------------------- */

#puzzle8 .wrapper{
    width:300px;
    height:100px;
    margin:auto;
    overflow:hidden;
    position:relative;
}
#puzzle8 .wrapper .line-container{
    position:absolute;
    right:0;
    top:0;
}


/* Puzzle 9
-------------------------------- */

#puzzle9 .layers{
    position:relative;
    font-family:'Roboto Mono', 'Consolas', 'Monaco', monospace;
    overflow:hidden;
    width:288px;
    margin:auto;
}
#puzzle9 .layer-0{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:600px;
}
#puzzle9 .layer-1{
    width:600px;
}
#puzzle9 .row{
    font-size:40px;
}
#puzzle9 .row span{
    background:#333;
    color:#FFF;
    width:36px;
    display:inline-block;
    text-align:center;
}
#puzzle9 .row span:empty{
    background:transparent;
}
#puzzle9 span.c{
    background-color:#D46556;
}


/* Puzzle 10
-------------------------------- */

#puzzle10 .layers{
    position:relative;
    font-family:'Roboto Mono', 'Consolas', 'Monaco', monospace;
    overflow:hidden;
}
#puzzle10 .layer-1{
    width:288px;
    margin:auto;
}
#puzzle10 .row{
    font-size:40px;
}
#puzzle10 .row .s{
    background:#333;
    color:#FFF;
    width:36px;
    display:inline-block;
    text-align:center;
}
#puzzle10 .row .w{
    background:transparent;
    width:36px;
    display:inline-block;
    position:relative;
    vertical-align:top;
    overflow:hidden;
    height:57px;
}
#puzzle10 .row .w .h{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:180px;
}
#puzzle10 .row .w .h span{
    background:#333;
    color:#FFF;
    width:36px;
    display:inline-block;
    text-align:center;
}
#puzzle10 .row .w .v{
    position:absolute;
    z-index:-2;
    top:0;
    left:0;
    height:285px;
}
#puzzle10 .row .w .v span{
    background:#333;
    color:#FFF;
    width:36px;
    display:block;
    text-align:center;
}
#puzzle10 span.c{
    background-color:#D46556 !important;
}