@import url(https://fonts.googleapis.com/css?family=Rokkitt:700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);

.bcbCountdown {
    box-sizing:border-box;
    width: 325px;
    height: 96px;
    display:block;
    position: relative;
    top:-10px;
    background-color:white;
    border:3px solid black;
    padding-left:96px;
    text-align: center;
    font-family: Rokkitt, serif;
    color:black!important;
    text-decoration: none!important;
    white-space: nowrap;
    font-weight: bold;
    text-transform: uppercase;
}

.bcbCountdown .title, .bcbCountdown .subtitle {
     height:.75em;
    line-height: .75em;   
    text-align: center;
}

.bcbCountdown .title {
    font-size:35px;
    margin-top:2px;
}
.bcbCountdown .subtitle {
    font-size:15px;
    font-weight: 900;
}

.bcbCountdown .timeLeft {
    font-size:35px;
    line-height:40px;
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: 600;
    margin-top:-3px;
    text-align: center;
}
.bcbCountdown .timeLeft span, .bcbCountdown .timeLeft:hover span:hover {
    width:1.2em;
    display: inline-block;
    opacity:1;
    transition:opacity .2s ease-in-out;
}
.bcbCountdown .timeLeft:hover span {
    opacity: .4;
}

.bcbCountdown::before {
    content:'';
    display: inline-block;
    box-sizing:border-box;
    width:96px;
    height:96px;
    position:absolute;
    border:3px solid black;
    background-color:black;
    background-image:url("img/steven.jpg");
    background-size:cover;
    background-position:center;
    left:-3px;
    top:-3px;
}
.bcbCountdown::after, .bcbCountdown .timeLeft:hover:after, .bcbCountdown .timeLeft:hover span:hover:after {
    content:"Rebecca Don't Hurt 'Em";
    font-family: serif;
    color:white!important;
    background-color:black;
    box-sizing:border-box;
    height:20px;
    width: 229px;
    border:3px solid black;
    position: absolute;
    bottom:-3px;
    right:-3px;
    overflow:visible;
    font-size:14px;
    line-height: 14px;
    font-weight: normal;
    text-align: center;
}

.bcbCountdown .timeLeft:hover:after {
    content:'';
    z-index: 1;   
}
.bcbCountdown .timeLeft:hover span:hover:after { 
    content:attr(data-label);
    z-index: 2;
}

.bcbCountdown a.info {
    opacity:0;
    position: absolute;
    left:0;
    top:0;
    color:cornflowerblue;
    font-size:20px;
    text-decoration: none;
    text-align: center;
    border-radius: 1em;
    width:1em;
    height:1em;
    background-color:white;
    transition:opacity .2s ease-in-out;
}

.bcbCountdown:hover a.info{
    opacity:1;
}

.bcbCountdown.theme1::before { background-image: url("img/gregrose.gif"); }
.bcbCountdown.theme1::after { content:"Thanks For Fixing My Van" }

.bcbCountdown.theme2::before { background-image: url("img/amethyst.gif"); }
.bcbCountdown.theme2::after { content:"(Breathing Intensifies)" }

.bcbCountdown.theme3::before { background-image: url("img/pearl.gif"); }
.bcbCountdown.theme3::after { content:"Aw Jeez, Here We Go Again" }

.bcbCountdown.theme4::before { background-image: url("img/garnet.gif"); }
.bcbCountdown.theme4::after { content:"Brace Yourselves" }

.bcbCountdown.theme5::before { background-image: url("img/malachite.gif"); }
.bcbCountdown.theme5::after { content:"Let The Water Hold Me Down"; letter-spacing: -.03em; }

.bcbCountdown.theme6::before { background-image: url("img/peridot.gif"); }
.bcbCountdown.theme6::after { content:"Singing While Crying" }

.bcbCountdown.theme7::before { background-image: url("img/lapis.gif"); }
.bcbCountdown.theme7::after { content:"And Prom's Tomorrow!" }

.bcbCountdown.theme8::before { background-image: url("img/jasper.gif"); }
.bcbCountdown.theme8::after { content:"Fresh Pain Awaits" }

.bcbCountdown.theme9::before { background-image: url("img/ruby.gif"); }
.bcbCountdown.theme9::after { content:"Try To Control Yourself" }

.bcbCountdown.theme10::before { background-image: url("img/sapphire.gif"); }
.bcbCountdown.theme10::after { content:"You Know, A Kids Show!" }

.bcbCountdown.theme11::before { background-image: url("img/rebecca.jpg"); }
.bcbCountdown.theme11::after { content:"Crying is Really Funny" }

.peridot-egg {
    width:401px;
    height:374px;
    position: absolute;
    bottom:100%;
    margin-bottom:-50px;
    left:25%;
    background-image: url("https://i.imgur.com/mN9KVNe.png");
    background-size: cover;
    background-position: 0 0;
    font-size:374px;
}
.peridot-peek {
    width:167px;
    height:100px;
    position: absolute;
    bottom:100%;
    margin-bottom:1px;
    left:25%;
    background-image: url("https://i.imgur.com/wvghkvg.png");
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
}

#nav-bar.egg {
    position: relative;
}
#nav-bar.egg.fixed {
    position: fixed;    
}

#nav-bar.fixed .peridot-egg {
    display:none;   
}