body { margin:0; padding:0; }

#article a.photo:hover { border:none; }
#article a.video:hover { border:none; }
#article a.flickr:hover { border:none; }
#article a.extrait:hover { border:none; }
#article a.article:hover { border:none; }

#article a { text-decoration: none; }
#article a:hover { text-decoration: none; }
#article img { width:100%; border:none; margin:0; padding:0; }
#article .q { font-weight:700; }
#article { z-index:997; height:100%; left:100%; width:100%; position:relative; float:left; padding-top:15px; padding-bottom:75px; box-sizing: border-box; -webkit-column-width: 340px; -webkit-column-gap: 0px; -moz-column-width: 340px; -moz-column-gap: 0px; column-width: 340px; column-gap: 0px; }
#article p { margin:0; padding: 8px 20px 8px; font-weight:100; font-size:16px; text-align: left; font-family:'open sans'; line-height:26px; }

#bouton { float:left; font-family:'open sans'; font-size:18px; font-weight:700; text-align:center; width:170px; height:40px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#bouton a { padding:6px 0px; display:block; text-decoration:none; }
#boutonsocial { float:left; position:relative; }
#boutonsocial img { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; width:40px; margin:2px 0px 0px 0px; padding:0px; }
#citation { font-size: 23px; text-align: left; margin: 0 0 15px 0; padding: 0; line-height: 36px; font-family: bitter; font-weight: bold; }
#conteneur { position:absolute; width:100%; height:100%; top:0; left:0; }
#contenu { position:relative; background:transparent;  height: 100%; top:0; left:0; }
#couverture { background-repeat: no-repeat; background-attachment: fixed; background-position: center; left:0; top:0; position:absolute; height:100%; width:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: scroll; z-index:1001; }
#effet { height:100%; position:absolute; top:0; left:0; width:600px; }
#facebook { z-index:1099; margin:0px 28px 0px 6px; padding:0px; }
h1 { clear:both; font-size:22px; font-style:italic; text-align: left; margin: 0px 0 15px 0; padding: 0; line-height: 36px; font-family: 'open sans'; font-weight:100; }
#info-contenu { position:absolute; bottom: 40px; left: 50px; width:440px; padding: 0px; margin:auto; }
#introduction { font-style:italic; font-weight:100; font-size: 16px; text-align: left; margin: 0 0 10px 0; padding: 0; line-height: 26px; font-family: 'open sans'; }
#logo { top:30px; right:45px; width:500px; position:absolute; z-index:9999 }

#bannierebas { position: fixed; bottom: -500px; right: -500px; z-index:999; }
#bannierebas ul { text-align:center; padding:0; }
#bannierebas li { display:inline; list-style-image: none; font-family:'open sans'; margin:0px 25px 0px 25px; font-size:20px; font-weight:100; padding:0; }
#bannierebas a { text-decoration: none; }
#bannierebas a:hover { text-decoration: none; }

.article, .video, .extrait, .flickr, .photo { position: relative; display:inline-block; width:100%; }
.article:hover::before, .video:hover::before, .extrait:hover::before, .flickr:hover::before, .photo:hover::before { opacity: 1; }
.article:after, .video:after, .extrait:after, .flickr:after, .photo:after {content:" "; position:absolute; top:0; right:0; left:0; bottom:0; z-index:1; opacity:0; background:#000;}
.article:hover::after, .video:hover::after, .extrait:hover::after, .flickr:hover::after, .photo:hover::after{ opacity:0.45; }

.photo::before { background: #444; content: "Agrandir"; padding: 5px 12px; font-family: 'open sans'; font-weight:100; z-index: 99; color: #fff; border:1px solid #fff; font-size: 16px; opacity: 0; position: absolute; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.flickr::before { background: #444; content: "Visionner l'album Flickr"; padding: 5px 12px; font-family: 'open sans'; font-weight:100; z-index: 99; color: #fff; border:1px solid #fff; font-size: 16px; opacity: 0; position: absolute; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.extrait::before { background: #444; content: "Ecouter des extraits"; padding: 5px 12px; font-family: 'open sans'; font-weight:100; z-index: 99; color: #fff; border:1px solid #fff; font-size: 16px; opacity: 0; position: absolute; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video::before { background: #444; content: "Visionner la video"; padding: 5px 12px; font-family: 'open sans'; font-weight:100; z-index: 99; color: #fff; border:1px solid #fff; font-size: 16px; opacity: 0; position: absolute; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.article::before { background: #444; content: "Lire l'article"; padding: 5px 12px; font-family: 'open sans'; font-weight:100; z-index: 99; color: #fff; border:1px solid #fff; font-size: 16px; opacity: 0; position: absolute; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#pointfinal { text-align:right !important; font-size:30px !important; }
#recueil { clear:both; font-size: 22px; text-align: left; margin: 20px 0 0 0; padding: 0; line-height: 34px; font-family: 'open sans'; font-weight:100; }
#twitter { z-index:1099; padding:0px; }

#couverture_responsive { display: none; }

.audio { border:1px solid #555; background: #333; text-align: center; width: calc(100% - 40px); padding: 0px 0px 12px; margin: 5px 20px 20px; position:relative; height:95px; float:left; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.audiop { left: 0px; top: 0px; position: absolute; width: calc(100% - 40px) !important; text-align: center !important; }
.audioc { left: 10px; bottom: 10px; width: calc(100% - 20px); position: absolute; }




@media screen and (max-height: 700px) {

#article { z-index:997; height:100%; left:100%; width:100%; position:relative; float:left; padding-top:15px; padding-bottom:75px; box-sizing: border-box; -webkit-column-width: 300px; -webkit-column-gap: 0px; -moz-column-width: 300px; -moz-column-gap: 0px; column-width: 300px; column-gap: 0px; }

}


@media screen and (max-width: 800px) {

body { margin:0; padding:0; background:#000 !important; }

#article { z-index:997; position:relative; float:left; left:0; padding-top:30px; padding-bottom:20px; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; background:#000 !important; }
#article p { margin:0; padding: 8px 10px 8px; font-weight:100; font-size:16px; text-align: left; font-family:'open sans'; line-height:25px; position:relative; float:left; width: calc(100% - 20px); }
#bouton { display: none; }
#boutonsocial { float:left; position:relative; }
#boutonsocial img { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; width:40px; margin:2px 0px 0px 0px; padding:0px; }
#citation { font-size: 24px; text-align: left; margin: 20px 5px; padding: 0; line-height: 36px; font-family: bitter; font-weight: bold; position:relative; float:left; text-align:center; }
#conteneur { position:relative; float:left; width:100%; }
#contenu { position:relative; background:transparent; float:left; width:100%; }
#couverture { background-image:none !important; z-index:1001; position:relative; float:left; background-color:#000 !important; }
#effet { position:relative; float:left; width:100%; background-image:none !important; }
#facebook { z-index:1099; margin:0px 28px 0px 6px; padding:0px; }
h1 { clear:both; font-size:23px; font-style:italic; text-align: center; margin: 15pxpx 0 15px 0; padding: 0; line-height: 36px; font-family: 'open sans'; font-weight:100; }
#info-contenu { float:left;  padding: 8px 10px 8px; margin:0px; bottom:0px; left:0px; position:relative; width:auto; height:auto; }
#introduction { background:transparent !important; font-style:italic; font-weight:100; font-size: 16px; text-align: left; margin: 0 0 10px 0; padding: 0; line-height: 26px; font-family: 'open sans'; position:relative; float:left; }
#logo { display:none; }

#bannierebas { display:none; }

.photo { position: relative; display:inline-block; width:100%; }

#pointfinal { text-align:right !important; font-size:40px !important; float:right; }
#recueil { clear:both; font-size: 22px; text-align: left; margin: 20px 0 0 0; padding: 0; line-height: 34px; font-family: 'open sans'; font-weight:100; }
#twitter { z-index:1099; padding:0px; }

#couverture_responsive { float:left; width:100%; display:inline; }
#couverture_responsive img { width:100%; }

}