/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* ----------------------------- */
/* == Typo                       */
/* ----------------------------- */
@font-face {
    font-family: 'PrestigeEliteStd';
    src: url('fonts/prestigeelitestd-bd.eot');
    src: url('fonts/prestigeelitestd-bd.eot') format('embedded-opentype'),
         url('fonts/prestigeelitestd-bd.woff2') format('woff2'),
         url('fonts/prestigeelitestd-bd.woff') format('woff'),
         url('fonts/prestigeelitestd-bd.ttf') format('truetype'),
         url('fonts/prestigeelitestd-bd.svg#PrestigeEliteStdBold') format('svg');
}

@font-face {
    font-family: 'StencilStd';
    src: url('fonts/stencilstd.eot');
    src: url('fonts/stencilstd.eot') format('embedded-opentype'),
         url('fonts/stencilstd.woff2') format('woff2'),
         url('fonts/stencilstd.woff') format('woff'),
         url('fonts/stencilstd.ttf') format('truetype'),
         url('fonts/stencilstd.svg#StencilStdBold') format('svg');
}


html {
    background: #070709;
    color: #afafaf;
    font-size: 62.5%;
}

body {
	font-size: 1.4em;
	line-height: 1.5;
    font-family: Verdana, Arial, sans-serif;
}

a {
    text-decoration: none;
    color: #fff;
    
}
a:hover,
a:focus,
a:active {
    text-decoration: underline;
}

p,
.p-like,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
select,
caption,
details,
figure {
    margin-bottom: 0;
    line-height: 1.3;
}
h1,
.h1-like {
    font-size: 5em;
    font-family: "StencilStd", Impact, Verdana, Arial, sans-serif;
    color: #070709;
    text-shadow: 0 0 2px #FFFFFF;
}
h2,
.h2-like {
    font-size: 1.429em;
    line-height: 27px;
    font-family: "PrestigeEliteStd", "Courier New", monospace;
}
h3,
.h3-like {
    font-size: 1.714em;
}
h4,
.h4-like {
    font-size: 1.429em;
}
h5,
.h5-like {
    font-size: 1.286em;
}
h6,
.h6-like {
    font-size: 1.143em;
    line-height: 54px;
    font-family: "PrestigeEliteStd", "Courier New", monospace;
    margin-top: 1.571em;
    color: #F29100;
    position: relative;
    z-index: 0;
}

h6:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 50%;
    background: #6f6f6e;
    left: 0;
    bottom: 7px;
    z-index: -1;
}


strong {
    font-weight: bold;
}

em {
    font-style: italic;
}



/* ----------------------------- */
/* == Général                    */
/* ----------------------------- */
header, .main, footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1em 0;
}

p + p, ul+ p, p + ul, p + h3 {
    margin-top: 1em;
}

ol {
    list-style: inside decimal;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    background: #070709;
    border: 1px solid #565656;
    color: #fff;
    padding: 8px;
    font-family: Verdana, Arial, sans-serif;
    max-width: 100%;
    width: 30%;
}

select {
    background: #070709;
    border: 1px solid #565656;
    color: #fff;
    padding: 8px;
    margin-bottom: .5em;
    font-family: Verdana, Arial, sans-serif;
    max-width: 100%;
    width: 30%;
}

input[type="email"] {
	display: none;
}

textarea {
    width: 60%;
}

input[type="submit"] {
    background: #f29100;
    font-weight: bold;
    border: none;
    padding: 8px 30px;
    width: auto;
    cursor: pointer;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
    background: #fff;
}

img {
    max-width: 100%;
}

.content a {
    color: #f29100;
}

.mobile {
    display: none;
}


/* ----------------------------- */
/* == Intro                      */
/* ----------------------------- */
#top {
    background: url(img/the-little-factory-2021.jpg) 1em top no-repeat;
    padding-top: .3em;
}

.intro {
    position: relative;
    min-height: 380px;
    overflow: hidden;
}

.intro h1 {
    text-align: right;
    margin: 20px 0 80px;
    text-indent: -99999px;
    font-size: 0;
    line-height: 0;
    /*height: 55px;
    background: url(img/TLF.png) top right no-repeat;*/
}

.intro .presente {
    /*padding-left: 60%;*/
    padding-left: 63%;
}

.intro .info {
    /*background: #F29100;*/
    background: #575757;
    padding: .3em 1.5% .5em;
    color: #070709;
    position: relative;
    /*margin-top: 3em;
    width: 37%;*/
    width: 35%;
    float: right;
}

.intro .info h3 {
    margin-bottom: .1em;
}

.intro .info li + li {
    margin-top: .3em;
}



/* ----------------------------- */
/* == Navigation                 */
/* ----------------------------- */
nav {
    margin: 2em 0 0;
    font-family: "PrestigeEliteStd", "Courier New", monospace;
    position: relative;
    bottom: 0;
}

nav ul {
    display: table;
    width: 100%;
}

nav ul li {
    display: table-cell;
    text-align: center;
}

nav ul li a {
    color: #caba9f;
    font-size: 1.429em;
    display: block;
    background: url(img/triangle-menu.png) center bottom no-repeat;
    padding: 0 .5em 45px;
}



/* ----------------------------- */
/* == Contenu                    */
/* ----------------------------- */
.main {
    margin-top: 20px;
}

.main.lightbox {
    margin-top: 0;
}

.main .wrap {
    padding-top: 70px;
}

.main.lightbox .wrap {
    padding-top: 0;
}

#bio {
    background: url(img/bio.png) 122px top no-repeat;
}
#audio {
    background: url(img/audio.png) 131px top no-repeat;
}
#images {
    background: url(img/images.png) 141px top no-repeat;
}
#videos {
    background: url(img/videos.png) 141px top no-repeat;
}
#concerts {
    background: url(img/concerts.png) 141px top no-repeat;
    padding-top: 49px;
    margin-top: 63px;
}
.lightbox #concerts {
    background-position: 14px top;
    margin-top: 0;
}
#contacts {
    background: url(img/contacts.png) 141px top no-repeat;
    padding-top: 49px;
    margin-top: 63px;
}
#mentions {
    background: url(img/mentions.png) 14px top no-repeat;
    padding-top: 49px;
}

.main .wrap + .wrap {
    margin-top: 3em;
}

.main .wrap .inner-nav {
    float: left;
    background: #070709;
    z-index: 1;
    position: relative;
    width: 141px;
    text-align: right;
}

.main .wrap .inner-nav a {
    display: inline-block;
    width: 31px;
    height: 27px;
    text-indent: -9999px;
    line-height: 0;
    vertical-align: middle;
    background: url(img/pictos-nav.png) no-repeat;
    margin-right: .9em;
    text-align: left;
}

.main .wrap .inner-nav .next {
    background-position: top left;
}
.main .wrap .inner-nav .prev {
    background-position: top center;
}
.main .wrap .inner-nav .up {
    background-position: top right;
}

.main .wrap .inner-nav .next:hover,
.main .wrap .inner-nav .next:focus,
.main .wrap .inner-nav .next:active {
    background-position: bottom left;
}
.main .wrap .inner-nav .prev:hover,
.main .wrap .inner-nav .prev:focus,
.main .wrap .inner-nav .prev:active {
    background-position: bottom center;
}
.main .wrap .inner-nav .up:hover,
.main .wrap .inner-nav .up:focus,
.main .wrap .inner-nav .up:active {
    background-position: bottom right;
}

.main .wrap h2 {
    margin-bottom: 3.571em;
    color: #F29100;
    position: relative;
    z-index: 0;
}

.main .wrap h2:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: #6f6f6e;
    left: 0;
    bottom: 7px;
    z-index: -1;
}

.main .wrap .content {
    padding-left: 50px;
}


/* ----------------------------- */
/* == #Bio                       */
/* ----------------------------- */
#bio {
    overflow: hidden;
}

#bio ul {
    list-style: outside square;
}

#bio .content {
    overflow: hidden;
    text-align: left;
}

#bio .more {
    display: none;
    padding: 0 0 0 20px;
    background: url(img/more.png) left top no-repeat;
    margin: .8em 0 0 50px;
    float: right;
}

#bio .more.open {
    background-position: left bottom;
}


/* ----------------------------- */
/* == #Audio                     */
/* ----------------------------- */
#audio li {
    width: 90%;
}

#audio li + li {
    margin-top: 1.3em;
}

#audio li > span,
#audio li > span + div {
    display: inline-block;
    vertical-align: top;
}

#audio li > span {
    width: 33%;
}

#audio li > span + div {
    width: 15%;
    text-align: right;
}

#audio li > span + div a {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 23px;
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    margin-left: 10px;
    text-align: left;
}

#audio li > span + div a:hover,
#audio li > span + div a:active,
#audio li > span + div a:focus {
    background-position: center bottom;
}

.ecoute {
    background: url(img/icone-audio.png) center top no-repeat;
}
.dl {
    background: url(img/icone-dl.png) center top no-repeat;
}

#audio .lecteur {
    margin-top: 1em;
    display: none;
}


/* ----------------------------- */
/* == Galeries                   */
/* ----------------------------- */
.galerie .content {
    overflow: hidden;
}

.galerie img {
    border: 5px solid #fff;
    vertical-align: middle;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.galerie .content > a {
    display: inline-block;
    vertical-align: middle;
    width: 41.5%;
}

.galerie .content > a + a {
    margin-left: 14px;
}

.galerie .content > .tout {
    display: inline-block;
    vertical-align: middle;
    width: 63px;
    height: 73px;
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    background: url(img/triangle-galerie.png) center top no-repeat;
    margin-left: 12px;
}

.galerie .tout:hover,
.galerie .tout:active,
.galerie .tout:focus {
    background-position: center bottom;
}

#html5-watermark {
    display: none!important;
}


/* Vidéos */
#videos .single {
    position: relative;
}

#videos .single:after {
    content: "";
    width: 64px;
    height: 64px;
    background: url(img/video.png) center top no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -32px;
    margin-left: -32px;
}

#videos .single:hover:after {
    background-position: center bottom;
}


/* ----------------------------- */
/* == #Concerts                  */
/* ----------------------------- */
#concerts .content {
    overflow: hidden;
}

#concerts li {
    overflow: hidden;
    width: 70%;
}

#concerts li + li {
    margin-top: 1em;
}

#concerts li div {
    overflow: hidden;
}

#concerts li div span {
    width: 75%;
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: .4em;
    border-bottom: 1px solid #565656;
}

#concerts li div span + span {
    margin-left: -5px;
    padding-left: 10px;
}

#concerts li div div {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    width: 20%;
}

#concerts li div div a {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 28px;
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    margin-left: 10px;
}

#concerts li div div a:hover {
    background-position: center bottom;
}

#concerts ul + a {
    margin-top: 2em;
    display: inline-block;
    background: #f29100;
    border: none;
    padding: 8px;
    font-weight: bold;
    color: #000;
    font-size: 0.857em;
}

#concerts ul + a:hover,
#concerts ul + a:active,
#concerts ul + a:focus {
    text-decoration: none;
    background: #fff;
}

.plan {
    background: url(img/icone-map.png) center top no-repeat;
}
.ticket {
    background: url(img/icone-lien.png) center top no-repeat;
}

/* ----------------------------- */
/* == #Revuepresse                 */
/* ----------------------------- */
#revuepresse .content {
    overflow: hidden;
}

#revuepresse h2 {
    margin-bottom: 2em;
    color: #F29100;
    position: relative;
    z-index: 0;
}
#revuepresse li {
    overflow: hidden;
    width: 90%;
}

#revuepresse li + li {
    margin-top: 1em;
}

#revuepresse li div {
    overflow: hidden;
}

#revuepresse li div span {
    width: 90%;
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: .4em;
    border-bottom: 1px solid #565656;
}

#revuepresse li div span + span {
    margin-left: -5px;
    padding-left: 10px;
}

#revuepresse li div img {
    margin-top: 1em;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    width: 90%;
}

#revuepresse li div div a {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 28px;
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    margin-left: 10px;
}

#revuepresse li div div a:hover {
    background-position: center bottom;
}

#revuepresse ul + a {
    margin-top: 2em;
    display: inline-block;
    background: #f29100;
    border: none;
    padding: 8px;
    font-weight: bold;
    color: #000;
    font-size: 0.857em;
}

#revuepresse ul + a:hover,
#revuepresse ul + a:active,
#revuepresse ul + a:focus {
    text-decoration: none;
    background: #fff;
}

/* ----------------------------- */
/* == Contacts                   */
/* ----------------------------- */
#contacts form {
    margin-top: 1.2em;
}

#contacts label {
    margin-bottom: .3em;
    display: inline-block;
    color: #6f6f6e;
}

.message {
    font-size: 1.283em;
    font-family: "PrestigeEliteStd", "Courier New", monospace;
    color: #dc1505;	
}
/* ----------------------------- */
/* == Footer                     */
/* ----------------------------- */
footer {
    text-align: right;
    margin-top: 1em;
}

footer a {
    display: inline-block;
    font-size: 0.857em;
    vertical-align: middle;
}

footer .fb {
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    background: url(img/facebook.png) center top no-repeat;
    width: 100px;
    height: 32px;
}

footer .fb:hover,
footer .fb:focus,
footer .fb:active {
    background-position: center bottom;
}

footer .sc {
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    background: url(img/sc_white_36x20.png) center top no-repeat;
    width: 100px;
    height: 32px;
}

footer .sc:hover,
footer .sc:focus,
footer .sc:active {
    background-position: center bottom;
}

footer .bc {
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    background: url(https://s1.bcbits.com/img/buttons/bandcamp_36x36_black.png) center top no-repeat;
    width: 100px;
    height: 32px;
}

footer .bc:hover,
footer .bc:focus,
footer .bc:active {
    background-position: center bottom;
}





footer a + a {
    padding-left: .5em;
    border-left: 1px solid #6f6f6e;
    margin-left: .5em;
}


/* ----------------------------- */
/* ==> Responsive <==            */
/* ----------------------------- */
@media screen and (max-width: 1118px) {
    #top {background: url(img/the-little-factory-2021.jpg) left top no-repeat; background-size: contain; padding: .3em 0 1em;}
    #bio {background-position: 136px top;}
    #audio {background-position: 145px top;}
    #images, #videos, #concerts, #contacts {background-position: 155px top;}
    .lightbox #concerts {background-position: 14px top;}
    
    #bio .more {padding-right: 1em;}

    .wrap {padding-left: 1em;}
    .main .wrap .content {padding: 0 1em 0 0;}
   
    .intro {min-height: 0;}
    .intro .presente {padding: 1em 1em 1em 25%; background:none; background-color:rgba(7,7,9,0.75); -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF070709,endColorstr=#BF070709); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF070709,endColorstr=#BF070709); zoom:1;}
    .intro h1 {background-size: contain; margin: 20px 14px 80px;}
    .intro .info {position: static; padding: .3em 2% .5em; width: 46%;}
    
    #audio li, #concerts li {width: 100%;}
    
    .galerie .content > a {width: 40%;}
    .galerie .content > a + a {margin-left: 2%;}
    .galerie .content .tout {width: 63px;}
    
    textarea {width: 100%; box-sizing: border-box; -moz-box-sizing: border-box;}
    input[type="text"], input[type="email"], input[type="password"] {width: 50%;}
    
    footer {padding: 1em;}
}

@media screen and (max-width: 640px) {
    .intro .presente {padding: 1em;}
    .intro .info {width: auto; float: none; padding: .3em 1em .5em;}
    
    .galerie .content > a {width: 75%;}
    .galerie .content > a:nth-child(2) {display: none;}
    .galerie .content > a + a {margin-left: 5%;}
    
    #audio li > span {width: 60%;}
    #audio li > span + div {width: 30%;}
    
    #concerts li div span {width: 35%;}
    #concerts li div div {width: 24%;}
    
    /*** Nav ***/
    nav .mobile {display: block; line-height: 1em; font-size: 1.571em; color: #f29100; cursor: pointer; margin: 0 0 .5em; border-bottom: 1px solid #6f6f6e; border-top: 1px solid #6f6f6e; padding: .5em 1em;}
    nav .mobile span {display: block; padding: .1em 0 .1em 2em; background: url(img/triangle-menu.png) left center no-repeat; background-size: contain;}
    
    nav ul {margin: 0 1em; display: none; width: auto;}
    nav ul li {display: block; text-align: left;}
    nav ul li a {padding: 1em 0 1em 50px; background-position: left center;}
}

@media screen and (max-width: 380px) {
    .galerie .content > a {width: 70%;}
    
    #audio li > span {width: 50%;}
    #audio li > span + div {width: 40%;}
    
    #concerts li div span {width: 30%;}
    #concerts li div div {width: 30%;}
}

@media screen and (min-width: 641px) {
    nav ul {display: table!important;}
}