/* VARIABLES */

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




/* 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;
        background-image: url(/img/trames/vagues1-black.svg);
    }

    #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;
    }
    .trame {
        display: none;
    }
    .paper:nth-child(odd) section.header:after {
        background-image: url(/img/trames/cercle-vagues2-black.svg);
    }
    .paper:nth-child(even) section.header:before {
        background-image: url(/img/trames/cercle-vagues2-black.svg);
    }
}

.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-color: transparent !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 !important;
    }
    .trame {
        display: none;
    }
}




/* 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;

    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;
}




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;
    margin-bottom: 0;
}

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 {
    text-align: center;
}
figure.cuivre footer {
    color: @copper;
}

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

.column50 {     float: left;    width: 50%; }

.height0 { height: 1px; padding: 0 !important; }




/* - - - - - - - - - - - - - - - - - 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";
    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;
    margin-left: 10px;
    position: relative;
    top: -1px;
}

.paper:nth-child(odd) section.header:before {
    content: "Informations pratiques";
    font-size: @small;
    font-family: "UmeVertical";
    color: @copper;
    margin-right: 10px;
    position: relative;
    top: 3px;
}
.paper:nth-child(odd) section.header:after {
    content: counter(page-counter);
    font-family: "UmeVertical";
    -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,
#page-21,
#page-27,
#page-33 {
    .header { display: none; }
}
.paper:nth-child(3) { 
    section.header:before {
    content: "Édito";
    }
}
.paper:nth-child(5), 
.paper:nth-child(7),
.paper:nth-child(9),
.paper:nth-child(11){
    section.header:before {
    content: "Juste avant la nuit";
    }
}
.paper:nth-child(13),
.paper:nth-child(15) {
    section.header:before {
    content: "Festival Noël au Théâtre";
    }
}
.paper:nth-child(17),
.paper:nth-child(19),
.paper:nth-child(21) {
    section.header:before {
    content: "Cataclop enzovoorts";
    }
}
.paper:nth-child(23),
.paper:nth-child(25),
.paper:nth-child(27) {
    section.header:before {
    content: "Fractal";
    }
}

.paper:nth-child(29),
.paper:nth-child(31),
.paper:nth-child(33) {
    section.header:before {
    content: "Side effects";
    }
}

.paper:nth-child(35),
.paper:nth-child(37) { 
    section.header:before {
    content: "Revolt";
    }
}
.paper:nth-child(39),
.paper:nth-child(41) { 
    section.header:before {
    content: "Nos Balsatoiles";
    }
}
.paper:nth-child(43) {
    section.header:before {
    content: "Extras";
    }
}

.paper:nth-child(49) { 
    section.header:before {
    content: "Calendrier";
    }
}
.paper:nth-child(51) { 
    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 5px 0.4em 5px;
        background-color: white;
    }

    dd {
        text-align: center;
        vertical-align: top;
        padding: 0.4em 0px 2px 0;
        margin-top: 1px;
        margin-left: 0;
    }

    dd + dt {
        margin-top: 0;
    }

    dt:after { 
        content: " ";
        display: block;
        clear: both;
    }
}
.region-break + .bible {
    margin-top: 0;
}

.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: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
        color: @copper !important;
       -webkit-margin-start: 0px;
        }

    }


#extras {
    h1 {
        margin-bottom: @line-height * 3;
    }
    h4 {
        text-align: center;
        margin-bottom: @line-height;
        margin-top: 0;
    }
}


/*       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: 0em;
        }

    .prix {
        border: 1px solid @copper;
        -webkit-border-radius: 80px;
        -webkit-transform: rotate(0deg);
        padding: 0.8em 0.25em 0.4em;
        width: 36px;
        height: 26px;
        margin: auto;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .arrow {
        margin-top: -40px;
        margin-left: 142px;
        font-size: 12px !important;
    }

    .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;
    }
    
}