.header,
.body,
.footer {
    box-sizing: border-box;
}

/* __________________________________ HEADER __________________________________ */
.header {
    top: 0;
    margin: 0;
    padding-top: @page-margin-top;
    width: 100%;
    height: @header-height;
    text-align: left;

    &:after {
        content: @header-text;
    }
}
/* __________________________________ MAIN SECTION __________________________________ */
.body {
    height: @page-height - @header-height - @footer-height;
    width: @page-width;
    margin-bottom: @page-margin-bottom;
    padding-top: @page-margin-top;
    padding-bottom: @page-margin-bottom;
		// background: red;
    position: absolute;
}

.recipient {
    -webkit-flow-from: myStory;
            flow-from: myStory;
}

#my-story {
    -webkit-flow-into: myStory;
            flow-into: myStory;
}
/* __________________________________ FOOTER __________________________________ */
.footer {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: @footer-height;
    text-align: center;

    // &:after {
    //     content: @footer-text;
    // }
}

/* mirrored pages */


.facing .paper {
/*    &:nth-child(odd) .header {
        text-align: right;
    }*/

    &:nth-child(even) .header,
    &:nth-child(even) .body,
    &:nth-child(even) .footer, {
        padding-left: @page-margin-inside;
        padding-right: @page-margin-outside;
    }

    &:nth-child(even) .footer {
        padding-left: 0pt;
        padding-right: 20pt;
        text-align: right;
        margin-bottom: 30pt
    }
    &:nth-child(even) .inside {
        
background: linear-gradient(#FFEE25, #CDDB3E, #7DBE66, #6EB86D, #F08F34, #E96732, #6C80BF, #E86031, #6AC3CB, #FFEE25);
width: 8mm;
height: 220mm;
position: absolute;
display: inline-block;
left: -5mm;
z-index: 1000;
top: -5mm;
    }
        &:nth-child(even)[data-master="m-empty"] .inside {
        
background: linear-gradient(#FFEE25, #CDDB3E, #7DBE66, #6EB86D, #F08F34, #E96732, #6C80BF, #E86031, #6AC3CB, #FFEE25);
width: 8mm;
height: 220mm;
position: absolute;
display: inline-block;
left: 7mm;
z-index: 1000;
top: 7mm;
    }
    &:nth-child(odd) .header,
    &:nth-child(odd) .body,
    &:nth-child(odd) .footer {
        padding-left: @page-margin-outside;
        padding-right: @page-margin-inside;
    }
     &:nth-child(odd) .footer {
        
        padding-left: 20pt;
        padding-right: 0;
        text-align: left;
        margin-bottom: 30pt
    }
    &:nth-child(odd) .inside {
        
    background: linear-gradient(#FFEE25, #CDDB3E, #7DBE66, #6EB86D, #F08F34, #E96732, #6C80BF, #E86031, #6AC3CB, #FFEE25);
width: 8mm;
height: 220mm;
position: absolute;
display: inline-block;
margin-left: 145mm;
top: -5mm;
    }

}
.normal .paper {
     &:nth-child(even) .inside {
        
    background: linear-gradient(#FFEE25, #CDDB3E, #7DBE66, #6EB86D, #F08F34, #E96732, #6C80BF, #E86031, #6AC3CB, #FFEE25);
width: 8mm;
height: 220mm;
position: absolute;
display: inline-block;
margin-left: 145mm;
top: -5mm;
    }
    &:nth-child(odd) .inside {
        
background: linear-gradient(#FFEE25, #CDDB3E, #7DBE66, #6EB86D, #F08F34, #E96732, #6C80BF, #E86031, #6AC3CB, #FFEE25);
width: 8mm;
height: 220mm;
position: absolute;
display: inline-block;
left: -5mm;
z-index: 1000;
top: -5mm;
    }
        &:nth-child(odd)[data-master="m-empty"] .inside {
        
background: linear-gradient(#FFEE25, #CDDB3E, #7DBE66, #6EB86D, #F08F34, #E96732, #6C80BF, #E86031, #6AC3CB, #FFEE25);
width: 8mm;
height: 220mm;
position: absolute;
display: inline-block;
left: 7mm;
z-index: 1000;
top: 7mm;
    }

}
.paper {
/*    &:nth-child(odd) .header {
        text-align: right;
    }*/

    &:nth-child(odd) .header,
    &:nth-child(odd) .body,
    &:nth-child(odd) .footer, {
        padding-left: @page-margin-inside;
        padding-right: @page-margin-outside;
    }

    &:nth-child(odd) .footer {
        padding-left: 0pt;
        padding-right: 20pt;
        text-align: right;
        margin-bottom: 30pt
    }
       
    &:nth-child(even) .header,
    &:nth-child(even) .body,
    &:nth-child(even) .footer {
        padding-left: @page-margin-outside;
        padding-right: @page-margin-inside;
    }
     &:nth-child(even) .footer {
        
        padding-left: 20pt;
        padding-right: 0;
        text-align: left;
        margin-bottom: 30pt
    }

}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Avoids headings to be cut or to be orphans.
     * But it doesn't seem to work
     * if the element after has a page-break-inside avoid. It tries its best! */
    -webkit-region-break-inside: avoid;
                   break-inside: avoid;
    -webkit-region-break-after: avoid;
                   break-after: avoid;
}

/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
 * HERE NO PARAGRAPH WILL BE CUT,
 * BUT YOU MIGHT WANT TO DEACTIVATE THIS */
p {
    /*-webkit-region-break-inside: avoid;*/
    /*               break-inside: avoid;*/
}