/*

(c) John-Lee Langford
www.mr.langford.co
www.johnleelangford.com

*/

/* Reset default values */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark,
audio, video, li, ul {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    color: #fff;
    font-family: 'Slabo 13px', serif;
}

a {
    text-decoration: none;
}

img {
    border:none;
}

/* Typography */

h1 {
    font-size: 200%;
}

h2 {
    font-size: 190%;
    margin: 10px 0 0 10px;
    padding: 0;
}

h3 {
    font-size: 140%;
    margin: 10px 0 0 10px;
    padding: 0;
}

.box-text p {
    font-size: 100%;
    margin: 10px 0 0 10px;
    padding: 0;
}

.launch {
    width: 90%;
    margin-top: 20px !important;
    border-radius: 10px;
    border: 1px #fff solid;
    text-align: center;
}

.launch a {
    display: block;
    padding: 10px 0 10px 0 !important;
}

.launch a:hover {
    background-color: #0df;
    border-radius: 10px;
}

/* layout */

header, footer {
    width: calc(100% - 40px);
    height: 40px;
    padding-top: 10px;
    margin: auto;
    overflow: hidden;
}

footer {
    text-align: right;
    color: #999;
}

#wrap {
     background-color: #000;
     width: 100%;
     height: 100vh;
 }

#inner {
    width: calc(100% - 40px);
    height: calc(100vh - 100px);
    margin: auto;
    overflow: hidden;
}

/* Boxes */

.box-half, .box-quarter, .box-eighth, .box-sixteenth {
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.box-half {
    width: calc(50% - 5px);
    height: calc(100% - 5px);
}

.box-quarter {
    width: calc(50% - 5px);
    height: calc(50% - 5px);
}

.box-eighth {
    width: calc(25% - 5px);
    height: calc(50% - 5px);
    background-color: #f00;
}

.box-sixteenth {
    width: calc(25% - 5px);
    height: calc(25% - 5px);
    background-color: #00f;
}

.box-text {
    background-image: url("../img/bg.png");
    position: absolute;
    margin-left: 10px;
}

.box-half .box-text, .box-quarter .box-text {
    width: 60%;
    height: 150px;
    top: calc(100% - 160px);
}

.box-eighth .box-text, .box-sixteenth .box-text {
    width: 90%;
    height: 100px;
    top: calc(100% - 110px);
}

.box-text p {
    opacity: 0;
}

/* Content */

.weggo {
    background-image: url("../img/home-weggo.jpg");
}

.binarybingo {
    background-image: url("../img/home-binarybingo.jpg");
}
.denarybingo {
    background-image: url("../img/home-denarybingo.jpg");
}
.diskdefrag {
    background-image: url("../img/home-diskdefrag.jpg");
}

.empty {
    background-image: url("../img/home-empty.jpg");
}