/* -------------------------------------------- Columns ----------------------------------------- */
#column1 {
    position: absolute;
    top: 0;
    left: 5%;
    right: 52.5%;
    bottom: 0;
}

/*#page-1 {
    #column1 {
        position: relative;
        height: 50%;
    }
}*/

#column2 {
    position: absolute;
    top: 0;
    left: 52.5%;
    right: 5%;
    bottom: 0;
}

#page-1 {
    #column1 {
        top: 8%;
    }

    #column2 {
        top: 60%;
    }
}

#column3 {
    width: 31%;
    position: absolute;
    top:0;
    bottom: 0;
    left:64%;
}

/* -------------------------------------------- FLOWS ----------------------------------------- */

.appendix1 {
    -webkit-flow-from: appendix1Flow;
    flow-from: appendix1Flow;
    max-height: 100%;
}

.appendix4 {
    -webkit-flow-from: appendix4Flow;
    flow-from: appendix4Flow;
    max-height: 100%;
}

.appendix2 {
    -webkit-flow-from: appendix2Flow;
    flow-from: appendix2Flow;
    max-height: 100%;
}

.appendix3 {
    -webkit-flow-from: appendix3Flow;
    flow-from: appendix3Flow;
    max-height: 100%;
}


#flow-appendix1 {
    -webkit-flow-into: appendix1Flow;
    flow-into: appendix1Flow;
    display: block;
/*     padding: 30px; */
    line-height: 23px;
    border: 2px solid black;
    padding: 15px;
/*     margin: 20px 20px 10px 0px; */
/*     z-index: 1; */
/*     float: left; */
/*     height: 600px; */
/*     overflow: hidden; */
/*     width: 40%; */
/*     background: white; */
    &:hover { border: 10px solid red!important; }
}

#flow-appendix4 {
    -webkit-flow-into: appendix1Flow;
    flow-into: appendix1Flow;
    font-family: sans-serif;
    border: 2px solid black;
    padding: 15px;
/*     margin-top: 60px; */
/*     padding: 70px 30px 30px 30px; */
/*     width: 60%; */
/*     margin-left: 20%; */
}


#flow-appendix2 {
    -webkit-flow-into: appendix2Flow;
    flow-into: appendix2Flow;
    border: 2px solid black;
    padding: 15px;
    /*
    transform: skew(0deg, -10deg);
    -webkit-transform: skew(0deg, -10deg);
    -moz-transform: skew(0deg, -10deg);
    -o-transform: skew(0deg, -10deg);
    -ms-transform: skew(0deg, -10deg);
    */
}



h1 {
    font-size: 40px;
    font-family: "helvetica";
    text-align: center;
    font-style:normal;
    font-variant-caps: all-small-caps;
    line-height: 80px;
    text-transform: uppercase;
}

#flow-appendix3 {
    -webkit-flow-into: appendix3Flow;
    flow-into: appendix3Flow;
    background:white;
    border:1px dotted black;
    padding-left: 8px;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    /*
    transform: scale(0.993, 1.541);
    -webkit-transform: scale(0.993, 1.541);
    -moz-transform: scale(0.993, 1.541);
    -o-transform: scale(0.993, 1.541);
    -ms-transform: scale(0.993, 1.541);
    */
}


/* -------------------------------------------- Typographie ----------------------------------------- */

h1 {
/*     position: absolute; */
    margin-top: -90px;
    margin-bottom: 10px;
    font-size: 40px;
    text-align: center;
}

h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 15px;
}

@font-face {
    font-family: "Garamond12";
    src: url("/assets/fonts/EBGaramond12-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Garamond12";
    src: url("/assets/fonts/EBGaramond12-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Garamond8";
    src: url("/assets/fonts/EBGaramond12-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: "GaramondSC8";
    src: url("/assets/fonts/EBGaramondSC08-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GaramondSC12";
    src: url("/assets/fonts/EBGaramondSC12-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

*, p {
    font-family: 'Latin Modern Mono';
}

p {
    font-size: 14pt;
    line-height: 18pt;
}