@font-face{
    font-family:DerailedExtraBold;
    src:url("../../fonts/derailed-extrabold-webfont.woff") format('woff');
    font-weight:400;
}

/*@font-face{
    font-family:DerailedRegular;
    src:url("../../fonts/derailed-regular-webfont.woff") format('woff');
    font-weight:normal;
}*/

@font-face{
    font-family:Conspiracy;
    src:url("another-typewriter.woff") format('woff');
    font-weight:normal;
}

body{
    margin:0;
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
}

h2{
    font-size:2.5rem;
    font-family:DerailedExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight:400;
    color:#4a4a4a;
}

p.intro{
    color:#4c4c4c;
    line-height:1.2;
    margin:10px 0;
}

/*#temp_container{
    width:80%;
    margin:5rem auto;
}*/

#cabinet{
    background-color:#E3E3E3;
    background-image:url("images/background-cabinet.jpg");
    /*background-repeat:no-repeat;*/
    background-size:100%;
    width:100%;
    height:600px;
    margin:3rem 0;
}

#cabinet_background{
    padding-bottom:5rem;
    transition:background-color .2s linear;
}

#cabinet_background.darken{
    background-color:rgba(0,0,0,.9);
}

.drawer{
    float:left;
    display:block;
    width:20%;
    height:80px;
    position:relative;
    cursor:pointer;
    transition:background-color .2s linear;
    color:#000000;
    text-decoration:none;
}

.drawer.mask{
    background-color:rgba(0,0,0,.8);
}

.drawer.opened{
    background-color:transparent;
    /*outline:2px solid yellow;
    outline-offset:-2px;*/
    box-shadow:inset 10px 10px 10px 10px rgba(0,0,0,.6);
}

.drawer>img{
    width:100%;
    position:absolute;
    display:none;
}

.drawer.opened>img{
    display:block;
    animation:drawer-reveal-contents .2s 1;
    animation-fill-mode:forwards;
}

@keyframes drawer-reveal-contents{
    0%{
        top:-100%;
        opacity:0;
    }
    100%{
        top:-130%;
        opacity:1;
    }
}

.drawer>span{
    display:block;
    /*outline:1px solid blue;*/
    margin:15% 25%;
    text-align:center;
    font-family:Conspiracy;
    text-transform:uppercase;
    font-size:1.3vw;
}

.drawer.higher>span{
    margin:11% 25%;
}

.drawer.extra_height{
    padding-bottom:5px;
}

.drawer>.description{
    color:#FFFFFF;
    position:absolute;
    top:100%;
    z-index:100;
    text-align:center;
    width:120%;
    left:-10%;
    display:none;
}

.drawer>.description>h3{
    font-family:DerailedExtraBold;
    font-weight:normal;
    margin:.5rem 0 0 0;
}

body.touch_device .drawer>.description>h3::after{
    content:" >";
}

.drawer>.description>p{
    margin:0;
}

.drawer.left_align>.description,
.drawer.right_align>.description{
    left:0;
    width:100%;
}

.drawer.opened>.description{
    display:block;
    animation:drawer-show-description .2s 1;
    animation-fill-mode:forwards;
}

@keyframes drawer-show-description{
    0%{
        top:50%;
        opacity:0;
    }
    100%{
        top:100%;
        opacity:1;
    }
}

#accessible_text_version{
    display:none;
}