@font-face {
  font-family: "block-regular";
  src: url("../fonts/block-berthold-regular-webfont.ttf") format("truetype");
}

@font-face {
  font-family: "block-condensed";
  src: url("../fonts/block-berthold-extra-condensed-webfont.ttf") format("truetype");
}


/* MAIN */
#main {
    height: 100%;
    display: flex;
    flex-direction: column;
}

header {
    color:#8338ec;
    padding-bottom: 5px;
    width: 100%;
    background-color: #FFF;
}
#tags {
    /*-webkit-flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow-x: scroll;
    overflow-y: none;
    -webkit-overflow-scrolling: touch;*/
    padding-top: 2em;
    padding-bottom: 2em;
}

#tag-content{
    white-space: normal;
    /*display: flex;*/
}

footer {
    background: #eee;
    color: #999;
    width: 100%;
    border-top: 1px solid #Ccc;  
}

/* HEADER */
.title {
    font-size: 64px;
    margin-bottom: 0px;
    font-family: 'block-regular', Fallback, sans-serif;
    /*text-shadow: 0 1px 0 rgba(0,0,0,.5);*/ 
}



.tagline {
    font-size: 16px;
    color:#999;
    margin-bottom: 0px;
    font-style: italic;
    font-family: serif;
    
}
.big {
   font-size: 20px;
}

.tag {
    color:#FFF;
    font-size: 4rem;
    font-family: 'block-condensed', sans-serif;
    margin-left: 0.25rem;  
    margin-right: 0.25rem;
    /*border: solid 1px black;*/
    border-radius: 4px;
}
/* PLAYER */
.bubble {
    padding: 5;    
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.bubble .close {
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}


#bubble-toolbar {
    width: 100%;
    height: 5rem;
    line-height: 5rem;
}
#bubble-toolbar a{
    color:rgba(255,255,255,.66);
    font-size: 2rem;
}
#bubble-toolbar a:hover{
    font-size: 3rem;
}
.replique-tag {
    color: #FFF;
    font-size: 4rem;
    font-family: 'block-condensed', Fallback, sans-serif;
        
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.citation {
    font-size: 2rem;
    font-style: italic;
    font-family: serif;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    color: #fff;
}
.citation:before{
    content: '“';
}
.citation:after {
    content: '”';
}

#title {
    display: flex;
    justify-content: center;
}

#btnAudio {
    width:64px;
    height: 64px;
    color:rgba(255,255,255,.66);
}

#random {
    width: 6rem;
    height: 6rem;
    font-size: 6rem;
    color: #3a86ff;
    margin-left: calc(50% - 3rem);
    margin-right: calc(50% - 3rem);
}

.btnIcon {
    font-size: 64px;
    width:64px;
    height: 64px;
}

/* Footer */

footer .btn {
    color:#999;
    background: none;
}
footer .btn:hover {
    color:#666;
}

/* #a0c5e4 */
/* Override Bootstrap */
.btn {
    color: #fff;
    border: none;
    background-color: #ccc;
}
a:hover {
    color: rgba(120,120,120,.5);
}
.media:first-child {
    margin-top: 15px;
}
*:focus {
    outline: 0;
    text-decoration: none;
}
/* Fix for aligning FB and TW btns */
.fb_iframe_widget span 
{
    vertical-align: baseline !important;
}

#twitter_player {
    height: 320px;
}

#player {
    margin-bottom: 0.5rem;
}

#twitter_player .bubble {
    height: 100%;
}

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) {
    .tag {
        font-size: 6rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .replique-tag {
        font-size: 6rem;
    }
    
    
    .bubble .close {
        font-size: 5rem;
    }
}