@page {
    size: A4 portrait; margin:5mm;
}

@media print and (color) {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.print+.print {
    page-break-before: always;
}

.print:last-child {
    page-break-after: auto;
}

div.page {
    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
}

body > *:last-child {
    page-break-after: auto;
}

.header,
.back-to-home {
    display: none;
}

html {
    height: auto;
    margin: 0;
    padding: 0;
    width: 100em;
    overflow: hidden;
    font-family: "Lato";
    page-break-after: avoid;
    page-break-before: avoid;
}

body {
    overflow: hidden;
    height: 99%;
    visibility: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    page-break-after: avoid;
    page-break-before: avoid;
}

#content,
#site-content {
    overflow: hidden;
    display: inline;
    line-height: 1.2em;
    height: 100vh;
}

div {
    overflow: visible;
    display: inline;
}

img {
    display: block;
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
    margin: 0.1em auto;
    width: 100%;
    height: auto;
}

p {page-break-inside: avoid;}

h1 {
    page-break-before: always;
}

h1, h2, h3, h4, h5 {
    page-break-after: avoid;
    margin: 1em auto;
    font-size: 1.5em;
}


/* Printing Breaks */

button.admin-button,
.share-bar,
.vote-buttons,
.source,
center strong,
.similar-breaks,
.right-col,
#endOfListicle,
.next-button-wrapper,
.fb-comments,
body.plugin,
._56q9,
.question-breadcrumbs,
.paging,
.admin,
.step-points,
.summary,
.earned-points-text,
button.next,
button.previous,
button.next-button,
.text-button-wrapper,
.chance-to-win-notice,
.back-link,
.link-at-bottom a,
video,
.drag-drop-game .fa-angle-double-right,
.drag-drop-game .fa-angle-double-left,
.show-answers-button,
.link-at-bottom a,
.card.draggable,
.card.draggable {
    display: none !important;
}

.break-map {
    overflow: hidden;
}

.page {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.break-detail {
    height: auto;
    visibility: visible;
    overflow: visible;
}

.break-detail .right col {
    display: none;
}

.break-detail .similar-breaks {
    display: none;
}

.step-footer .legal-text {
    display: block;
    top: 2em;
    position: relative;
    font-weight: 300;
    text-align: left;
    color: #aaa;
}

.footerHtml {
    width: 70%;
    display: block;
    text-align: center;
    margin-top: 2em;
}

.footerHtml p {
    position: relative;
    top: 10em;
}

.footerHtml p img {
    display: inline-block;
    max-width: 33%;
    text-align: center;
    margin: 0 auto;
}

.footerHtml p a img {
    max-width: 10%;
}

h1.headline {
    font-size: 2.5em;
    font-weight: 900;
    line-height: 1em;
    padding: 0.5em;
    margin: 0.5em 30% 1em 0;
    text-wrap: normal;
    overflow-wrap: normal;
    display: block;
    height: auto;
    overflow: visible;
    width: 65%;
    text-align: center;
}

h1.organic-headline {
    text-align: left;
    padding-left: 0;
    width: 70%;
}

.title {
    width: 67.5%;
    text-align: center;
    display: block;
    font-size: 1.4em;
    padding: 1em 0;
    overflow: visible;
}

.author {
    width: 100%;
    display: block;
    margin-bottom: 2em;
}

.author img {
    width: 7%;
    margin-right: 2em;
    margin-bottom: 2em;
    display: block;
    float: left;
}

.author a {
    text-decoration: none;
}

.author .name {
    position: relative;
    top: 1.4em;
    display: block;
    font-size: 1.5em;
}

.author .date {
    position: relative;
    top: 2em;
    clear: right;
    display: block;
    font-size: 1.5em;
}

.author + div {
    clear: both;
    display: block;
}

.break-detail .question-step img {
    width: 67.5%;
    height: 100%;
    margin: 1em auto;
    display: block;
    float: left;
}

.break-detail .listicle-step {
    overflow: visible;
    display: block;
    width: 65%;
    clear: both;
}

.break-detail .instagram-embed img {
    width: 100%;
    height: auto;
    margin-bottom: 0.5em;
    overflow: visible;
}

.listicle-section-container h2 {
    font-size: 2em;
    line-height: 1em;
}

.break-detail .instagram-embed p {
    font-size: 1.4em;
    margin: 1em 0;
    text-align: left;
    font-weight: 300;
    line-height: 1.2em;
}

.break-detail .instagram-embed p strong {
    font-weight: bold;
}

.break-detail .instagram-embed p a {
    color: #fff;
}

.break-detail .instagram-embed p span > a,
.break-detail .instagram-embed p span strong a {
    color: #000;
}

.break-detail .instagram-embed p a img {
    display: block;
}

.image img {
    margin-top: 1em;
}

div.result {
    text-align: center;
    font-size: 2em;
    background-color: #fff;
    margin-bottom: 0.5em;
}

.bottom .description {
    display: block;
    margin-top: 1em;
    line-height: 1.2em;
    font-size: 1em;
    margin-bottom: 0;
    padding-bottom: 0;
    width: 65%;
    text-align: left;
}

.poll-step .chart {
    width: 65%;
    display: block;
    clear: both;
    margin-top: 2em;
    font-size: 1.5em;
}

.poll-step .chart-container .title {
    text-align: left;
    font-size: 2.5em;
}

.poll-step .bar-container {
    display: block;
    overflow: hidden;
    width: 60%;
}

.poll-step .bar-container .bar {
    position: relative;
    height: 3em;
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
    display: block;
}

.poll-step .poll-result-content {
    display: block;
    width: 100%;
    text-align: left;
    clear: both;
}

.poll-step .answered-image img {
    width: 20%;
    display: block;
    margin-right: 2em;
}

.poll-step .answered-text {
    width: 65%;
    display: block;
    margin: 2em;
    font-size: 1.8em;
    line-height: 1.2em;
}


.multi-page {
    width: 60% !important;
}

.drag-drop-game .game-result-text {
    text-align: center;
    display: block;
    font-size: 2.5em;
    padding: 1em 0;
    overflow: visible;
    top: 2em;
    position: relative;
}

.drag-drop-game .legacy-drag-drop .slots {
    position: relative;
    top: 7em;
    float: left;
}

.drag-drop-game .slot {
    display: inline-block;
    width: 13.2em !important;
    margin: 0.5em !important;
    float: left;
}

.drag-drop-game picture {
    width: 10em;
}

.drag-drop-game .slot img {
    width: 100%;
    float: left;
    bottom: 1em;
    position: relative;
    margin: 0;
    display: inline-block;
}

.drag-drop-game .slot .score i {
    font-size: 2em;
    bottom: 2em;
    left: 0.5em;
    position: relative;
}

.drag-drop-game .legacy-drag-drop .cards,
.drag-drop-game picture source,
.drag-drop-game .description img {
    display: none !important;
}

.drag-drop-game .description {
    display: block;
    font-size: 1.8em;
    text-align: left;
    line-height: 1.5em;
}

.control-bar {
    clear: both;
}

.legal-text {
    width: 65%;
    display: block;
}

.bar-container .percentage {
    margin: 0 0.5em;
}

.complete-step picture img {
    width: 67.5%;
    height: auto;
    margin-top: 5em;
    float: left;
}

.complete-step h4 {
    font-size: 1.6em;
}

.memory-match-step {
    width: 70%;
    display: block;
    text-align: center;
}

.memory-match-step h4 {
    text-align: center;
    font-size: 2em;
}

.memory-match-step .memory-match-card-container {
    width: calc(25% - 0.5em);
    margin: 0.2em;
    float: left;
    display: inline-block;
}

.memory-match-step .memory-match-card-container img {
    width: 100% !important;
    height: 100% !important;
}

.memory-match-step .memory-game-result-text {
    text-align: center;
    font-size: 2em;
    top: 1em;
    position: relative;
}

.mlib-step ~ .step-footer {
    position: relative;
    top: 30em;
}

.mlib-step .question-text {
    font-size: 3em;
    margin-bottom: 2em;
}

.mlib-step canvas {
    margin-top: 2em !important;
    width: 67em !important;
    height: auto !important;
    float: left;
}

.spot-the-difference-step .average-time,
.spot-the-difference-step .summary-text {
    text-align: center;
    display: block;
    width: 70%;
    font-size: 2.5em;
}