* { box-sizing: border-box; }

body {
    background-color: #000;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: #fff;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.wrap {
    width: 100%;
    text-align: center;
}

/* Logo Styles */
.logo-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.logo {
    width: 20%;
    height: 20%;
    filter: grayscale(100%) contrast(120%);
    box-shadow: 10px 15px 25px 0 rgba(0,0,0,.5);
    transition: all .5s ease;
}
.logo-wrapper .glow-wrap {
    overflow: hidden;
    position: absolute;
    width: 100%; height: 100%;
    top: 0; margin-top: -10px;
    transition: all .5s ease;
}
.logo-wrapper .glow {
    display: block;
    position: absolute;
    width: 40%; height: 200%;
    background: rgba(255,255,255,.2);
    transform: rotate(45deg) translate(-450%, 0);
    transition: all .5s ease;
}
.logo-wrapper:hover .logo { filter: grayscale(0%); margin-top: 0; }
.logo-wrapper:hover .glow { transform: rotate(45deg) translate(450%, 0); transition: all 1s ease; }
.logo-wrapper:hover .glow-wrap { margin-top: 0; }

/* Title */
h1 {
    font-size: 2em;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 40px;
}
h1 strong { color: #adafb2; }

/* Countdown Styles */
ul#countdown {
    list-style: none;
    width: 60%;
    margin: 0 auto;
    padding: 20px 0;
    border: 1px solid #adafb2;
    border-width: 1px 0;
    display: flex;
}
ul#countdown li {
    width: 25%;
    font-size: 6vw;
    font-weight: bold;
}
ul#countdown li .label {
    color: #adafb2;
    font-size: 1.5vw;
    text-transform: uppercase;
}