/* CSS Stylesheet by Joel Eisner */
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, 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, ul, li,
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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* General */
html {
    -webkit-font-smoothing:antialiased;
}
body {
    font-family:'Open Sans', sans-serif;
    color:#3b3b3b;
    background-color:#272727;
}
/* Landing Slide */
.slide {
    width:100%;
    background:url(../img/bg.jpg) fixed center center no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-color:#272727;
}
.slide img.logo {
    display:none;
    width:30px;
    margin:15px;
    opacity:0.5;
}
.slide .content {
    position:absolute;
    display:none;
    width:270px;
    padding:0 10px;
    top:50%;
    left:50%;
}
.slide .content h1 {
    font-size:48px;
    font-weight:600;
    line-height:48px;
    color:#fff;
}
.slide .content h3 {
    font-size:24px;
    font-weight:300;
    line-height:24px;
    margin-top:15px;
    color:#3498db;
}
.slide .scroll-cue {
    position:absolute;
    display:none;
    width:150px;
    left:50%;
    bottom:0;
    margin-left:-75px;
    margin-bottom:15px;
    text-align:center;
    font-weight:300;
    color:#fff;
    opacity:0.5;
}
/* Main Content */
.main-content {
    display:none;
    width:100%;
}
.main-content .container {
    max-width:930px;
    padding:30px 15px;
    margin:0 auto;
}
.main-content h1 {
    font-size:48px;
    font-weight:600;
    line-height:48px;
}
.main-content h2 {
    font-size:20px;
    font-weight:400;
}
.main-content h4 {
    font-size:12px;
    font-weight:400;
    color:#3b3b3b;
}
.main-content p {
    font-size:16px;
    font-weight:400;
    line-height:24px;
    margin-top:15px;
}
a.btn-large {
    display:inline-block;
    padding:15px;
    text-decoration:none;
    margin-top:30px;
    transition:background-color 0.5s;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
a.btn-large.blue:hover {
    background-color:#2980b9;
}
a.btn-large.white {
    color:#3498db;
}
a.btn-large.white:hover {
    background-color:#eeeeee;
    color:#2980b9;
}
.white {
    background-color:#fff;
    color:#3b3b3b;
}
.blue {
    background-color:#3498db;
    color:#fff;
}
.slate {
    background-color:#272727;
    color:#fff;
}
.margin-btm-full {
    margin-bottom:30px;
}
.margin-btm-half {
    margin-bottom:15px;
}
.margin-top-full {
    margin-top:30px;
}
.margin-top-half {
    margin-top:15px;
}
/* Lightbox */
a.photolink {
    display:inline-block;
    margin:0 15px;
}
a.photolink img {
    width:150px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border:2px solid #fff;
    -webkit-filter: grayscale(1);
    filter:grayscale(1);
    transition:all 0.5s;
}
a.photolink img:hover {
    -webkit-filter: grayscale(0);
    filter:grayscale(0);
}
.photoset a.photolink:first-child {
    margin-left:0;
}
.photoset a.photolink:last-child {
    margin-right:0;
}
/* Link Slices */
.link-slice {
    display:none;
    width:100%;
    padding:40px 0 80px 0;
}
.link-slice .caption {
    width:600px;
    margin:0 auto;
    text-align:center;
    color:#fff;
}
.link-slice .caption>h1 {
    font-size:48px;
    font-weight:600;
    line-height:48px;
}
.link-slice .caption>h2 {
    font-size:24px;
    font-weight:300;
    margin-bottom:40px;
}
.link-slice .caption>img {
    max-width:100%;
    margin-bottom:20px;
}
.link-slice .caption>p {
    margin-bottom:40px;
}
.link-slice .caption>p>span {
    box-sizing:border-box;
    font-size:12px;
    font-weight:600;
    color:#fff;
    background-color:rgba(0,0,0,0.25);
    padding:10px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin:5px;
}
.link-slice .caption>a.link-button {
    box-sizing:border-box;
    display:inline-block;
    padding:20px;
    font-weight:600;
    text-decoration:none;
    color:#303030;
    background-color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    transition:all 0.25s;
}
.link-slice.indigo .caption>a.link-button:hover {
    background-color:#16a085;
    color:#fff;
}
.link-slice.navy .caption>a.link-button:hover {
    background-color:#e85324;
    color:#fff;
}
.link-slice.red .caption>a.link-button:hover {
    background-color:#303030;
    color:#fff;
}
.link-slice.ubersicht-binary-clock .caption>a.link-button:hover {
	color:#2196F3;
	-webkit-box-shadow: 0px 10px 20px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 10px 20px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 10px 20px 5px rgba(0,0,0,0.4);
}
.link-slice.indigo {
    background-color:#1abc9c;
}
.link-slice.navy {
    background-color:rgb(43,47,59);
}
.link-slice.red {
    background-color:rgb(231, 76, 60);
}
.link-slice.ubersicht-binary-clock {
	background:url(../img/link-slices/bg/uber-binary.png) no-repeat top left;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	color:#fff;
}
/* Media Queries */
@media screen and (max-width: 600px) {
    .link-slice .caption {
        width:300px;
    }
    .link-slice .caption>p>span {
        display:inline-block;
    }
}
@media screen and (max-width: 552px) {
    .main-content .container {
        padding:45px 30px;
    }
    a.btn-large {
        display:block;
        text-align:center;
    }
}
@media screen and (max-width: 432px) {
    a.photolink {
        display:block;
        margin:15px auto;
        text-align:center;
    }
    .photoset a.photolink:first-child {
        margin-top:0;
    }
    .photoset a.photolink:last-child {
        margin-bottom:0;
    }
}