/* E X P O R T*/


.export-cuivre {
    .lo-res { outline: none; }
p, h1, h2, h3, h4, h5, h6, dl, ul, .date, blockquote, .hichem, .hichem + footer, .production, .vert, .drawings, .spectacle-infos {
visibility: hidden;
}
#toc {
visibility: visible;
color: transparent;

dd:before {
color: black;
}
}
.cuivre {
visibility: visible !important;
color: black !important;
}
.header {
color: transparent;
}
dl.bible {
visibility: visible;
color: transparent;
}
#tarifs {
color: white;
}
.pass span {
border-color: black;
}
.paper:nth-child(even) section.header:before,
.paper:nth-child(odd) section.header:after {
    color: transparent;
}

.paper:nth-child(even) section.header:after,
.paper:nth-child(odd) section.header:before {
color: black;
}
dt, dd {
outline-color: white !important;
}
}

.export-vert {
        //.lo-res { outline: none; }
    color: black;
    border-color: black !important;
    outline-color: black;
    article#colophon dd,
    .bible,
    .paper:nth-child(even) section.header:before,
    .paper:nth-child(odd) section.header:after {
        background: none;
    }

    .cuivre {
        visibility: hidden;
    }
    .prix {
        -webkit-transform: none !important;
        border: 0 !important;
    }
    
.pass span {
border-color: transparent;
}
.paper:nth-child(even) section.header:before,
.paper:nth-child(odd) section.header:after {
    color: black;
}

.paper:nth-child(even) section.header:after,
.paper:nth-child(odd) section.header:before {
color: transparent;
}
#toc dd:before {
color: transparent;
}
}



/* VARIABLES */

//@color:  black;
@color:  #0a3e2c;
@copper: #8B634B;
@font-size: 10pt;
@line-height: 12.5pt;
@small: 0.7em;

/* F O N T E S */
@font-face {
    font-family: "Mincho";
    src: url("/fonts/UmeLoop/UmeLoopMincho12.otf");
}

@font-face {
    font-family: "Gothic16";
    src: url("/fonts/UmeLoop/UmeLoopGothic16.otf");
}
@font-face {
    font-family: "Gothic12";
    src: url("/fonts/UmeLoop/UmeLoopGothic12.otf");
}

@font-face {
    font-family: "UmeVertical";
    src: url("/fonts/UmeLoop/UmeLoopVertical12.otf");
}
@font-face {
    font-family: "UmePlume";
    src: url("/fonts/UmePlumePGothic-200.otf");
}
@font-face {
    font-family: "UmeRings";
    src: url("/fonts/Ume-P-Gothic_Rings.ttf");
}
@font-face {
    font-family: "UmeShadow";
    src: url("/fonts/Ume-P-Gothic-Shadow.otf");
}




/* STYLES COMMUNS */

body {
font-family: "Gothic12";
font-weight: 300;
font-size: @font-size;
line-height:@line-height;
texte-transform: uppercase;
color: @color;
}

.body {
width:100%;
height: 100%;
padding-top: 7mm;
padding-bottom: 12mm;
}

.page {
    z-index: 2;
}


.header {
font-size: 1em;
font-weight: 200;
padding-top: @line-height;
//position: absolute;
}

.footer {
    font-size: @small;
    font-weight: 300;
    height: 0;
    display: none;
}



.paper {
    position: relative;
    background: white;
}

section.trame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}


#page-13 section.trame,
#page-14 section.trame {
    width: 120%;
 img {
float: left;
}
}


div.fullpage {
    position: relative;
    
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}

.preview {
    z-index: 1000;
}


.paper:nth-child(even) {
    clear: both;
}


.spread #pages { width: 2000mm; }



article {
    clear: both;
    -webkit-region-break-before: always;
    max-width: 298px;
}

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

h1{
font-family: Gothic16;
font-weight: normal;
font-size: 2.2em;
line-height: 1.25em;
padding:0px;
//-webkit-region-break-before: always;
text-align: center;
margin-top: 0;
margin-bottom: 1em;
text-transform: uppercase;
}

h2{
font-family: "Gothic16";
font-weight: normal;
font-size: 1.5em;
line-height: 1.1em;
text-align: center;
margin-bottom: @line-height / 2;
margin-top: @line-height;
clear: both;
}

h3{
font-size: @font-size;
padding-bottom: @line-height / 2;
margin-bottom: @line-height / 2;
text-transform: uppercase;
border-bottom: 1px solid @color;
text-align: center;
clear: both;
}
h4 {
    text-transform: uppercase;
}

h5 { 
    //text-align: center;
    margin-bottom: 0.5em;
    font-family: UmeVertical;
    
    em {
        text-transform: uppercase;
        font-style: normal;
    }
}

address {
    white-space: pre;
}

p {
    margin: 0;
}

p + p {
    //margin-top: 1em;
    text-indent: @line-height *2;
}

blockquote {
    margin: @line-height 0;
    font-family: Mincho;
    //font-size: 1.01em;

    p {
        margin-bottom:0px;
    }
    p+p {
        margin-top:0px;
        text-indent: @line-height *2;
    }
}

ul {
    padding-left: @line-height;
    
    li {
        margin: 0;
        list-style-type: none;
        text-indent: -12px;
    }
    li:before {
        content: "– ";
    }
}


b, strong {
text-decoration: underline;
font-weight: normal;
}

em {
    font-style: italic;
}

sup {
    font-size: 0.7em;
    vertical-align: 0.5em;
    line-height: 0;
}

.small,
footer {
    font-size: @small;
    line-height: 1.2em;
}

footer {
    font-family: Mincho;
    margin-top: 5px;
}

figure footer {
    text-align: center;
}

.spreadit { position: relative; }
.spreaded {     position: absolute; }
.spreaded--centered { text-align: center; }

.column50 {     float: left;    width: 50%; }
.column65 {     float: left;    width: 65%; }
.column35 {     float: left;    width: 35%; }

.height0 { height: 0; }




/* - - - - - - - - - - - - - - - - - T I T R E S     C O U R A N T S - - - - - - - - - - - - - - - - -*/

.paper:nth-child(even) section.header:before {
content: counter(page-counter);
font-family: "UmeVertical";
//border: 1px solid @color;
background-image: url(/img/trames/cercle-vagues2.svg);
background-size: 100%;
-webkit-border-radius: 20px;
padding: 4px 5px 6px 5px;
width: 1em;
height: 1em;
display: inline-block;
text-align: center;
}
.paper:nth-child(even) section.header:after {
content: "Balsamine 2015–2016";
font-size: @small;
font-family: "UmeVertical";
color: @copper;
}

.paper:nth-child(odd) section.header:before {
content: "Informations pratiques";
font-size: @small;
font-family: "UmeVertical";
color: @copper;
}
.paper:nth-child(odd) section.header:after {
content: counter(page-counter);
font-family: "UmeVertical";
//border: 1px solid @color;
-webkit-border-radius: 20px;
background-image: url(/img/trames/cercle-vagues2.svg);
background-size: 100%;
padding: 4px 5px 6px 5px;
width: 1em;
height: 1em;
display: inline-block;
text-align: center;
position: absolute;
}




#page-1,
#page-2 {
.header { display: none; }
}
.paper:nth-child(3) { 
section.header:before {
content: "Édito";
}
}
.paper:nth-child(5) { 
section.header:before {
content: "Tribune ouverte";
}
}
.paper:nth-child(7),
.paper:nth-child(9),
.paper:nth-child(11),
.paper:nth-child(13),
.paper:nth-child(15),
.paper:nth-child(17),
.paper:nth-child(19),
.paper:nth-child(21) { 
section.header:before {
content: "Wijckaert, une bombe";
}
}
.paper:nth-child(23),
.paper:nth-child(25),
.paper:nth-child(27),
.paper:nth-child(29) { 
section.header:before {
content: "Whispers";
}
}
.paper:nth-child(31),
.paper:nth-child(33),
.paper:nth-child(35){ 
section.header:before {
content: "Nevermore";
}
}


.paper:nth-child(37) { 
section.header:before {
content: "Nos Balsatoiles";
}
}

.paper:nth-child(45) { 
section.header:before {
content: "Calendrier";
}
}
.paper:nth-child(47) { 
section.header:before {
content: "Colophon";
}
}


/* - - - - - - - - - - - - - - - - - S P E C T A C L E S - - - - - - - - - - - - - - - - -*/

.hichem {
    float: left;
    margin-right: 1em;
    height: 190mm;
    
& + footer {
    float: left;
font-family: "UmeVertical";
font-size:10pt;
text-align: left;

.parties {
text-decoration: underline;
position: absolute;
right: 0;
bottom: 0;
width: 180px;
}

}
}


article.spectacle {
-webkit-region-break-before: always;
position: relative;
text-align:left;
display: block;

.artist {
font-family: UmeVertical;
text-align: center;
margin-top: 0;
}

h1 {
margin-bottom: @line-height / 2;
}

div {
display: block;
padding-bottom: 0.3em;
padding-top: 0.3em;
}



.spectacle-infos {
margin: 0 auto;
text-align: center;
width: 100%;

.type {
}

.date {
border-top: 1px solid @color;
}
}
h3 + .spectacle-infos { margin-top: -1em; }
} /* fin article .spectacle */



dl.dates {
    dt, dd { display: inline; margin: 0; float: none; }
    dt:after { content: " : "; }
    dd:after {
        content: " ";
        display: block;
    }
}

.bible {
    
background-image: url(/img/trames/vagues1.svg);
background-size: 100%;

/*dt {
     text-transform:uppercase;
float: left;
//padding: 2px;
padding: 2px 5px 0.4em 5px;
background-color: white;
clear: both;
}
dd {
min-height: 1.25em;
    text-align: center;
    vertical-align: top;
//padding: 2px;
    padding: 0.4em 0px 2px 0px;
    margin-left: 0;
}
*/
dt {
     text-transform:uppercase;
    float: left;
    padding: 2px 5px 0.4em 5px;
    //outline: 1px solid @color;
background-color: white;


}
dd {
text-align: center;
vertical-align: top;
padding: 0.4em 0px 2px 0;
//outline: 1px solid @color;
margin-top: 1px;
margin-left: 0;
//background-color: white;

}
dd + dt {
margin-top: 0;
}
dt:after { 
content: " ";
display: block;
clear: both;
}
}

.production {
    font-family: UmeVertical;
}





/*  - - - - - - - - - - - - - - - - - S P É C I F I Q UE    À    C H A Q U  E    S P E C T A C L E  - - - - - - - - - - - - - - - - -*/

#page-titre {
    p { 
        border-bottom: 1px solid @color; 
        text-align: center;
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
}

#toc {
    text-align: center;
    text-indent: -40px;
    dt {
        text-transform : uppercase;
        margin-top : 1em;
        text-indent: 0px;
        }
dd:before {
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
   -webkit-margin-start: 0px;
    }
    }

#lexique ul {
    font-family: Mincho;
    padding-left: 10px;
    font-size: 0.8em;
    line-height: 1.25em;
}

#tribune ul {
    li {
    text-indent: 0px;
margin-bottom: 1em;
border-top : 1px solid @color;
padding-top: 2px;
}
    li:before {
        content: "";
    }
span {
outline: 1px solid @color;
padding: 3px 3px 1px 3px;
margin: 0px 3px 3px 0px;
}
p + p {
    text-indent: -3px;
}
}


figure.martine {
        width: 100px;
        min-height: 120px;
        float: left;
        margin: 0;
        padding: 0.5em;
        box-sizing: border-box;
}

#aventures {
    h3 {
border-bottom: 3px solid @color;
    }
}

.drawings{
    max-width: 130px;
    }



/* RABAT */

.paper#page-13,
.paper#page-14 {
    width: 321mm;
}

.paper#page-14 .page {
    width: 290mm !important;
}

.paper#page-14 .header {
//margin-left: 198mm;
margin-left: 748px;
}

#plan-caserne {
    max-width: 100%;
    //-webkit-transform: rotate(180deg);
}
#plan-caserne-acces {
    color: @copper;
position: absolute; 
bottom: 35.5mm; 
right: -146mm; 
width: 21mm; 
height: 20mm;
padding: 1em;
text-align: center;
//text-indent: -17px;
//border: 1px solid black;
border-radius: 100%;
}



ul#lexique-wijckaertien {
    //font-size: 1.25em;
    /*display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-around;
*/
    
    li:before {
        content: "«";
    }
    li:after {
        content: "»";
    }
    
    li {
        margin: 1em;
        line-height: 2em;
    }
    li:nth-of-type(odd){
        text-align: center;
    }
    li:nth-of-type(3n){
        text-align: right;
    }
    
}




/*       I N F O S     P R A T I Q U E S     */

#infos-pratiques {
-webkit-region-break-before: always;
font-family: UmeVertical;
font-size: 8pt;
line-height: 1.3em;
}


dl.infos-pass {
text-transform : uppercase;
font-size: 7pt;
font-family: UmeVertical;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: row;
-webkit-align-content: stretch;
width: 80%;
margin: 0 auto;

dt {
-webkit-flex-grow: 0;
margin-top: 2em;
margin-bottom: 1em;
}
dd {
text-align: center;
vertical-align: top;
-webkit-flex-grow: 2;
height: 1em;
border-bottom: 1px solid @color;
-webkit-align-self: flex-end;
-webkit-flex-basis: 110px;
}
}

.pass {
font-family: "Gothic16";
font-weight: normal;
font-size: 1.5em;
line-height: 1.3em;
text-align: center;
margin-bottom: @line-height / 2;
margin-top: @line-height;
clear: both;
    span {
    padding-bottom: 1px;
              border-bottom: 1px solid @color;
     }
.notes{
font-size:@small;
line-height:1.3em;
text-indent:-10px;
margin-bottom: 1em;
margin-top:3px;
}
    }

#tarifs {
    font-size: 9pt;
    line-height: 1.3em;

.tarif {
width: 50%;
float: left;

div {
text-align: center;
margin-bottom: 0.5em;
}
.prix {
border: 1px solid @copper;
-webkit-border-radius: 20px;
-webkit-transform: rotate(0deg);
padding: 0.7em 0.25em 0.35em;
width: 2.5em;
height: 2em;
margin: auto;
margin-top: 1em;
margin-bottom: 1em;
}
.arrow {
margin-top: -40px;
margin-left: 142px;
}
.notes{
font-size:@small;
line-height:1.3em;
width: 100%;
clear: both;
}
}
}

#bar {
img {
width: 90%;
margin: 0 auto;
display: block;
margin-top: 1em;
}
}

#map {
    margin-top: 4em;
}

#map img {
    //margin-top: 1em;
}

#logos {
    -webkit-region-break-before: always;
    
    div.fullpage img {
        top: -10em;
    }
}


#equipe {
    dl {
    background: none !important;
    }
dt {
text-transform:uppercase;
float: left;
padding: 2px 5px 0.4em 5px;
outline: 1px solid @color;
}
dd {
text-align: center;
vertical-align: top;
padding: 0.4em 0px 2px 0px;
outline: 1px solid @color;
margin-top: 1px;
    background: none;
}
dd + dt {
margin-top: 1px;
}
}


#calendrier, 
.entete {
h2 {
font-size: 1em;
font-family: UmeVertical;
clear: none;
}
dt {
     text-transform:uppercase;
    float: left;
    padding: 2px 5px 0.4em 5px;
    outline: 1px solid @color;
//background-image: url(/img/trames/vagues1.gif);
//background-size: 200%;
}
dd {
text-align: center;
vertical-align: top;
padding: 0.4em 0px 2px 0;
outline: 1px solid @color;
margin-top: 1px;
margin-left: 0;
//background-color: white;
}
.vignette + dd,
.vignette + dd + dd,
.vignette + dd + dt,
.vignette + dd + dt +dd,
.vignette + dd + dt +dd +dd,
.vignette + dd + dd +dt +dd {
margin-left: 62px;
}
dd + dt {
margin-top: 1px;
}
.date {
border-top: 0 !important;
}
.spectacle-infos {
text-align: center;
}
.titre{
font-size: @line-height;
text-transform: uppercase;
}

.spectacle + .spectacle {
margin-top: 4em;
-webkit-region-break-inside: avoid;
}
#noel{
margin-bottom: 35px;
}
#cataclop{
margin-bottom: 45px;
}
#fractal{
margin-bottom: 30px;
}
#revolt{
margin-bottom: 25px;
}
#colonie{
margin-bottom: 15px;
}
#eden{
margin-bottom: 30px;
}
#pollutions{
margin-bottom: 50px;
}
#kunsten{
.titre{
margin-bottom: 1em;
}
}

}

.vignette {
    //outline: none;
    width: 1.25cm;
    padding: 0.5em !important;
    margin-bottom: 2em;
}



/* COLOPHON */
article#colophon {
    dd {
background-image: url(/img/trames/vagues1.svg);
background-size: 100%;
        outline: none;
        margin-top: 0 !important;
    }
    dt { 
        background-color: white; 
        outline: none;
        margin-top: 0 !important;
    }
    
}
/* Here you can put your specific typography, layout styles. */