/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* HTML5 display definitions */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }
/* Base */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
/* Links */
a:focus { outline: none; }
a:active, a:hover { outline: 0; }
/* Typography */
h1 { font-size: 2em; margin: 0.67em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* Embedded content */
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0;  padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }

/* ==|== Styles ===============================================================
   Author: Nathan Gordon
   ========================================================================== */

@font-face {
    font-family: 'nuit-blanche';
    src:url('../font/nuit-blanche.eot');
    src:url('../font/nuit-blanche.eot?#iefix') format('embedded-opentype'),
        url('../font/nuit-blanche.woff') format('woff'),
        url('../font/nuit-blanche.ttf') format('truetype'),
        url('../font/nuit-blanche.svg#nuit-blanche') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icomoon{
    font-family: 'nuit-blanche';
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

/*
font-family: 'HelveticaNeueW01-Thin';
font-family: 'HelveticaNeueW01-45Ligh';
font-family: 'HelveticaNeueW01-55Roma';
font-family: 'HelveticaNeueW01-65Medi';
font-family: 'HelveticaNeueW01-75Bold';
*/


body { font-family: 'HelveticaNeueW01-Thin'; font-weight: normal; font-size: 6px; background: #000; color: #fff; cursor: none; }

h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: normal; }

.display { width: 1024px; height: 576px; background: #000; } /* 0.533% of original */
.display .block { overflow: hidden; position: relative; width: 16.666%; height: 16.666%; float: left; outline: 1px solid #222; 
  -webkit-transition: background 0.5s ease-in-out;
     -moz-transition: background 0.5s ease-in-out;
       -o-transition: background 0.5s ease-in-out;
          transition: background 0.5s ease-in-out;
}

.display .block canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.display .block .elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.display .block.feature { background: #042574; }
.display .block.secondary .tweet-hashtag,
.display .block.secondary .tweet-timestamp,
.display .block.secondary .info-block { opacity: 0.5 }


/*Modules*/
.tweet-hashtag { font-family: 'HelveticaNeueW01-65Medi'; position: absolute; top: 13%; left: 7.8%; font-size: 2.33em; line-height: 1em; }
.tweet-hashtag span { font-size: 1.6em; margin-right: 0.3em; position: relative; top: 3px;}
.tweet-timestamp { font-family: 'HelveticaNeueW01-55Roma'; position: absolute; top: 13%; right: 7.8%; text-align: right; font-size: 2em; line-height: 1em; }

.info-block {  }
.info-block .icon { line-height: 1.7em; font-size: 9em; position: absolute; left: 8%; top: 0; }
.info-block .first-line { font-family: 'HelveticaNeueW01-75Bold'; font-size: 3.3em; font-weight: normal; text-align: right; position: absolute; bottom:  50%; right: 8%;}
.info-block .second-line-time { font-family: 'HelveticaNeueW01-45Ligh'; font-size: 2.833em; text-align: right; position: absolute; top: 50%; right: 8%; opacity: 0.7;}
.info-block .second-line,
.info-block .third-line { font-family: 'HelveticaNeueW01-45Ligh'; font-size: 2em; text-align: right; position: absolute; top: 50%; right: 8%; opacity: 0.7;}
.info-block .third-line { top: 66%;}
.info-block .corner { font-family: 'HelveticaNeueW01-45Ligh'; font-size: 1.2em; position: absolute; top: 6%; left: 5%; opacity: 0.7;}

.address-block { margin-top: 10%; }
.address-block p { font-family: 'HelveticaNeueW01-Thin'; text-align: center; font-size: 1.833em; line-height: 1.4em; padding: 0 10%;}
.address-block .roman { font-family: 'HelveticaNeueW01-55Roma'; }

.image-hashtag { font-family: 'HelveticaNeueW01-45Ligh'; position: absolute; top: 0; left: 0; font-size: 1.5em; line-height: 2.6em; }
.image-hashtag span { font-size: 1.7em; position: relative; top: 2px; margin-left: 0.4em; }
.image-hashtag img { height: 1.2em; width: 1.2em; margin-left: 0.5em; position: relative; top: 0.1em; }

.image-tag { font-family: 'HelveticaNeueW01-Thin'; font-size: 1.5em; line-height: 2.6em; position: absolute; bottom: 0; right: 0; }
.image-tag span { font-family: 'HelveticaNeueW01-55Roma'; background: #042574; margin-right: 0.5em; padding: 0 0.4em;}

.image-telerama { position: absolute; left: 3%; top: 8%; width: 35%; }

.half-image-tag { font-family: 'HelveticaNeueW01-Thin'; font-size: 1em; line-height: 3em; position: absolute; bottom: 0; right: 0; }
.half-image-tag span { font-family: 'HelveticaNeueW01-55Roma'; background: #042574; margin-right: 0.6em; padding: 0 0.4em;}
.half-image-tag.tag1 { right: 50%; }
.half-image-tag.tag1 span {  }

.title-pin { position: absolute; top: 12%; right: 7%; width: 12%; }

.title-instagram { position: absolute; top: 12%; right: 7%; font-size: 3.5em; text-align: right; }

.credit-subtitle { font-family: 'HelveticaNeueW01-Thin'; font-size: 1.5em; position: absolute; bottom: 23%; right: 6%; text-align: right; opacity: 0.7;}
.credit-title { font-family: 'HelveticaNeueW01-45Ligh'; font-size: 2em; position: absolute; bottom: 6%; right: 6%; text-align: right; }
.credits-slide { position: absolute; width: 60%; top: 10%; left: 7%; opacity: 0; 
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;
}
.credits-slide.active { opacity: 1; }

.image-legende { position: absolute; bottom: 9%; right: 6%; text-align: right; font-size: 1.2em; line-height: 1.2em; }
.image-legende.metropole { bottom: 5%; right: 5%;}
.image-legende span { display: block; }
.image-legende .copyright { opacity: 0.7; }

.main-image-timestamp { position: absolute; bottom: 11%; right: 6%; text-align: right; font-size: 2em; }