@font-face {
    font-family: ABG;
    src        : url('https://holoread-img.geekpark.net/tlb/fonts/Akzidenz%20Grotesk%20%28R%29%20Condensed%20Medium.ttf');

}

* {
    margin                     : 0;
    padding                    : 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family: Noto Sans S Chinese, NotoSansHans, Open Sans, Hiragino Sans GB, Lantinghei SC, Microsoft YaHei, STHeiti, WenQuanYi Micro Hei, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
    overflow-x : hidden;
}

img {
    width              : 100%;
    -moz-user-select   : none;
    -o-user-select     : none;
    -khtml-user-select : none;
    -webkit-user-select: none;
    -ms-user-select    : none;
    user-select        : none;
}

.text-right {
    text-align: right !important;
}

/* s:顶部封面 */
.head {
    position  : relative;
    width     : 100%;
    height    : 56.25vw;
    background: url(https://holoread-img.geekpark.net/tlb/images/head-bg.jpg) 0 0/cover no-repeat;
}

.head img:first-child {
    position: absolute;
    width   : 80%;
    height  : auto;
    right   : 1.7%;
    top     : 35%;
}


.head img:last-child {
    display: none;
}

/* e:顶部封面 */

/* s:主要内容区 */

.main {
    position: relative;
    top     : 0;
    left    : 0;
}

.main-fixed .navs-inner {
    position: fixed;
    top     : 0;
    left    : 0;
    z-index : 999;
    width   : 100%;
    padding : 0 3vw;
}

/* e:主要内容区 */

/* s:内容区导航 */
.navs-container {
    box-sizing: border-box;
    padding   : 0 3vw;
    height    : 5vw;
    background: #000;

}

.navs-inner {
    display        : flex;
    flex           : 1;
    justify-content: space-between;
    align-items    : center;
    box-sizing     : border-box;
    height         : 5vw;
    line-height    : 5vw;
    list-style     : none;
    background     : #000;
}

.navs-inner>img {
    width : 27vw;
    height: 2vw;
}

ul.navs {
    display        : flex;
    flex           : 1;
    justify-content: space-between;
    box-sizing     : border-box;
    padding        : 0 2vw 0 12vw;
    height         : 5vw;
    line-height    : 5vw;
    list-style     : none;
    background     : #000;
}

ul.navs a {
    display        : inline-block;
    color          : #4D4D4D;
    text-decoration: none;
}

ul.navs img {
    width: 1.8vw;
}

ul.navs a:hover {
    cursor: pointer;
}

ul.navs span {
    transition: all .4s;
}

ul.navs span:first-of-type {
    font-weight: bold;
    font-size  : 2.2vw;
}

ul.navs span:last-of-type {
    font-family: ABG;
    font-size  : 2.4vw;
}

ul.navs img:first-of-type {
    display: inline-block;
}

ul.navs img:last-of-type {
    display: none;
}

ul.navs .active span:first-of-type {
    color: #C1272D;
}

ul.navs .active span:last-of-type {
    color: #F2F2F2;
}

ul.navs .active img:first-of-type {
    display: none;
}

ul.navs .active img:last-of-type {
    display: inline-block;
}

@media (min-width: 600px) {
    ul.navs a:hover span:first-of-type {
        color: #C1272D;
    }

    ul.navs a:hover span:last-of-type {
        color: #F2F2F2;
    }

    ul.navs a:hover img:first-of-type {
        display: none;
    }

    ul.navs a:hover img:last-of-type {
        display: inline-block;
    }
}


/* e:内容区导航 */

/* s:序言 PREFACE */
#preface .header-wrap {
    display        : flex;
    justify-content: center;
    align-items    : center;
    height         : 40vw;
    background     : url(https://holoread-img.geekpark.net/tlb/images/preface-head.jpg) 0 0/cover no-repeat;
}

#preface .header-inner {
    display    : flex;
    align-items: center;
    font-size  : 6.5vw;
}

#preface .header-inner * {
    margin: 0 .5vw;
}

#preface .header-inner img {
    width     : 36vw;
    margin-top: -8vw;
}


#preface .content-wrap {
    padding-bottom: 3.5vw;
    color         : #bdbdbd;
    background    : #000;
}

#preface .content-inner {
    width : 62vw;
    margin: auto;

}

#preface .content-inner .red-line {
    margin: 0;
}

#preface .content-inner p {
    margin     : 2.2vw auto;
    line-height: 1.8;
    font-size  : 1.2vw;
    text-align : justify;
}

#preface .content-inner p:nth-of-type(5) {
    color: #C1272D;
}

#preface .content-wrap .red-line {
    width     : 2.6vw;
    height    : .6vw;
    background: #C1272D;
}

/* e:序言 PREFACE */

/* s:焦点 ICON 30 */
#focus .header-wrap {
    padding   : 3.5vw 2vw 3.5vw 2vw;
    background: url(https://holoread-img.geekpark.net/tlb/images/focus-head.png) 0 0/cover no-repeat;
}

#focus .header-inner {
    display        : flex;
    justify-content: space-around;
    align-items    : center;
    margin         : auto;
}

#focus .header-left {
    width   : 60%;
    position: relative;
}

#focus .header-left img:not(:first-of-type) {
    position: absolute;
    opacity : 0;
}

#focus .header-left img {
    transition: all .2s;
}

#focus .header-left img:nth-of-type(2) {
    width: 39.7%;
    left : 29.8%;
    top  : 0%;
}

#focus .header-left img:nth-of-type(3) {
    width: 39.7%;
    left : 44.95%;
    top  : 11.2%;
}

#focus .header-left img:nth-of-type(4) {
    width: 40.7%;
    left : 59.3%;
    top  : 22%;
}

#focus .header-left img:nth-of-type(5) {
    width: 40%;
    left : 15%;
    top  : 10.8%;
}

#focus .header-left img:nth-of-type(6) {
    width: 39.8%;
    left : 30.2%;
    top  : 21.6%;
}

#focus .header-left img:nth-of-type(7) {
    width: 40%;
    left : 45.2%;
    top  : 32.8%;
}

#focus .header-left img:nth-of-type(8) {
    width: 41%;
    left : 0%;
    top  : 21.9%;
}

#focus .header-left img:nth-of-type(9) {
    width: 40%;
    left : 15.4%;
    top  : 33%;
}

#focus .header-left img:nth-of-type(10) {
    width: 40%;
    left : 30.5%;
    top  : 43.5%;
}

#focus .header-left>div {
    position : absolute;
    width    : 8vw;
    height   : 6.5vw;
    transform: rotateZ(30deg);
}

#focus .header-left>div>div {
    width    : 100%;
    height   : 100%;
    transform: skew(-30deg, -1deg);
    cursor   : pointer;
}

#focus .header-left>div:nth-of-type(1) {
    left: 42.5%;
    top : 11%;
}


#focus .header-left>div:nth-of-type(2) {
    left: 56.5%;
    top : 22%;
}

#focus .header-left>div:nth-of-type(3) {
    left: 71%;
    top : 33%;
}


#focus .header-left>div:nth-of-type(4) {
    left: 28.5%;
    top : 22%;
}

#focus .header-left>div:nth-of-type(5) {
    left: 43%;
    top : 33%;
}

#focus .header-left>div:nth-of-type(6) {
    left : 58%;
    top  : 44%;
    width: 7.4vw;
}

#focus .header-left>div:nth-of-type(7) {
    left : 15%;
    top  : 33%;
    width: 7.6vw;
}

#focus .header-left>div:nth-of-type(8) {
    left : 29.6%;
    top  : 44%;
    width: 7.6vw;
}

#focus .header-left>div:nth-of-type(9) {
    left : 43.6%;
    top  : 55%;
    width: 7.6vw;
}

@keyframes textSwitch {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.text-wrap>div {
    animation: 1s textSwitch;
}

.text-wrap>div:not(:first-of-type) {
    display: none;
}

#focus .header-right {
    display   : flex;
    position  : relative;
    box-sizing: border-box;
    width     : 38%;
    color     : #F2F2F2;
}

#focus .header-right .text-wrap {
    display        : flex;
    justify-content: center;
    align-items    : center;
    position       : absolute;
    width          : 70%;
    height         : 100%;
    left           : 15%;
    top            : 5%;
}

#focus .header-right p {
    text-align: justify;
}

#focus .header-right .text-wrap h2 {
    margin    : 2vw 0;
    text-align: center;
    font-size : 3vw;
}

#focus .header-right .text-wrap p:nth-of-type(2n+1) {
    line-height: 1.7;
    font-size  : 1.2vw;
    font-weight: bold;
}

#focus .header-right .text-wrap p:nth-of-type(2n+2) {
    line-height  : 1.7;
    margin-bottom: 2vw;
    text-align   : right;
    font-size    : 1.2vw;
}

.articles>div {
    display   : flex;
    flex-wrap : wrap;
    text-align: center;
}

.articles>div>div {
    width     : 16.66%;
    height    : 16.66vw;
    cursor    : pointer;
    transition: all .3s;
}

.articles .article-hover {
    z-index  : 99;
    transform: scale(1.1);
}

.kind {
    width     : 100%;
    height    : 100%;
    position  : relative;
    opacity   : 0;
    background: #1a1a1a !important;
    text-align: left;
    transition: all .5s;
}

.kind-white {
    background: #fefefe !important;
}

.kind-red {
    background: #C1272D !important;
}

.kind img:first-child {
    width      : 60%;
    height     : 60%;
    margin-left: 17%;
    margin-top : 23%;
}

.kind img:not(:first-child) {
    width   : 12%;
    position: absolute;
    display : none;
}

.business-history img:last-child {
    display: inline;
    left   : 27.5%;
    bottom : 27.5%;
}

.business-current img:last-child {
    display: inline;
    left   : 27.5%;
    bottom : 45.5%;
}

.business-future img:last-child {
    display: inline;
    left   : 27.5%;
    bottom : 63.5%;
}

.tech-history img:last-child {
    display: inline;
    left   : 45.5%;
    bottom : 27.5%;
}

.tech-current img:last-child {
    display: inline;
    left   : 45.5%;
    bottom : 45.5%
}

.tech-future img:last-child {
    display: inline;
    left   : 45.5%;
    bottom : 63.5%
}

.social-history img:last-child {
    display: inline;
    left   : 63.5%;
    bottom : 27.5%;
}

.social-current img:last-child {
    display: inline;
    left   : 63.5%;
    bottom : 45.5%;
}

.social-future img:last-child {
    display: inline;
    left   : 63.5%;
    bottom : 63.5%;
}

.articles .one-2,
.articles .three-5,
.articles .three-6,
.articles .four-5,
.articles .four-6,
.articles .five-6 {
    cursor: unset;
}

.article-year img {
    width: 3vw;
}

.article-year h2 {
    margin-top: 2vw;
    font      : 7.5vw ABG;
}

.article-summary {
    box-sizing : border-box;
    padding-top: 2.4vw;
}

.article-summary h2 {
    font       : 2.2vw ABG;
    font-weight: 800;
}

.article-summary p {
    width    : 84%;
    margin   : 0 auto;
    font-size: 1.2vw;
}

.article-summary-black .line,
.article-summary-red .line,
.article-summary-white .line {
    width     : 2.6vw;
    height    : 0.6vw;
    margin    : 2vw auto;
    background: #FFF;
}

.article-summary-white .line {
    background: #1a1a1a;
}

.five-6.article-image-black {
    background: #1a1a1a;
}

.five-6.article-summary-image {
    width     : 33.33%;
    background: url(https://holoread-img.geekpark.net/tlb/images/blankgrid-R2.svg) 100% 0/auto 100% no-repeat;
}

.four-6.article-image-black {
    background: #1a1a1a;
}

.four-6.article-summary-image {
    width     : 33.33%;
    background: url(https://holoread-img.geekpark.net/tlb/images/blankgrid-R2.svg) 100% 0/auto 100% no-repeat;
}

.four-5.article-image-black {
    background: #1a1a1a;
}

.four-5.article-year-summary {
    width     : 33.33%;
    background: url(https://holoread-img.geekpark.net/tlb/images/blankgrid-R3.png) 100% 0/auto 100% no-repeat;
}

.three-6.article-summary-image {
    width     : 33.33%;
    background: url(https://holoread-img.geekpark.net/tlb/images/blankgrid-R2.svg) 100% 0/auto 100% no-repeat;
}

.three-5.article-image-black {
    background: #1a1a1a;
}

.one-2.article-year {
    background: #C1272D
}

.one-2.article-image-summary {
    width     : 33.33%;
    background: url(https://holoread-img.geekpark.net/tlb/images/blankgrid-R1.png) 100% 0/auto 100% no-repeat;
}

/*  特定文章BOX属性 */
.article-year-black {
    background: #1a1a1a;
}

.article-year-black h2 {
    color: #F2F2F2;
}


.article-summary-black {
    color     : #F2F2F2;
    background: #1a1a1a;
}

.article-image-black {
    background: url() 50% 50%/cover no-repeat;
    filter    : grayscale(1);
}

.article-image-black div {
    width : 100%;
    height: 100%;
}

.article-year-red {
    background: #C1272D;
}

.article-year-red h2 {
    color: #F2F2F2;
}

.article-summary-red {
    color     : #F2F2F2;
    background: #C1272D;
}

.article-image-red {
    background: url() 50% 50%/cover no-repeat;
}

.article-image-red div {
    width         : 100%;
    height        : 100%;
    background    : rgba(170, 0, 0, 0.5);
}

.article-year-white {
    background: #FFF;
}

.article-year-white h2 {
    color: #1a1a1a;
}


.article-summary-white {
    color     : #1a1a1a;
    background: #FFF;
}

.article-image-white {
    background: url() 50% 50%/cover no-repeat;
    filter    : brightness(1.5) grayscale(1);
}

.article-image-white div {
    width     : 100%;
    height    : 100%;
    background: rgba(255, 255, 255, 0.3);

}

/* e:焦点 ICON 30 */

/* s:回顾 FLASHBACK */

.flashback {
    display        : flex;
    justify-content: space-around;
    margin         : auto;
    background     : url(https://holoread-img.geekpark.net/tlb/images/flashback-bg.svg) 0 0/100% auto no-repeat #ffffff;
}

.flashback p {
    line-height: 1.4;
    font-size  : 1vw;
    text-align : justify;
}

.flashback h2 {
    margin: -1vw 0;
}

.flashback .placeholder {
    box-sizing: border-box;
    width     : 52%;
    text-align: right;
}

.flashback .placeholder {
    background: url(https://holoread-img.geekpark.net/tlb/images/flashback-placeholder-background.svg) 100% 0/auto 100% no-repeat;
}

.flashback .summary {
    box-sizing: border-box;
    width     : 48%;
    padding   : 5vw 5vw 0 2vw;
}

.flashback .summary img {
    width         : 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter   : grayscale(100%);
    -ms-filter    : grayscale(100%);
    -o-filter     : grayscale(100%);
    filter        : grayscale(100%);
    filter        : gray;
    transition    : all .2s ease-in-out;
}

.flashback .summary>img {
    display: none;
}

.flashback .summary img:hover {
    filter: none;
}

.flashback .black-head {
    color     : #000;
    text-align: center;
    font      : 10vw ABG;
}

.flashback .red-head {
    color     : #C1272D;
    text-align: center;
    font      : 10vw ABG;
}

.prefix-1 {
    margin-right: -0.05em;
}

.prefix-1::before {
    content: '1'
}

.two-columns {
    display        : flex;
    justify-content: space-between;
}

.two-columns .vertical-line {
    width     : 4px;
    background: #000;
}

.left-panel,
.right-panel {
    width: 42%;
}

.red-line {
    margin    : 5vw auto;
    width     : 2.4vw;
    height    : 0.7vw;
    background: #C1272D;
}

.black-line {
    margin    : 5vw auto;
    width     : 2.4vw;
    height    : 0.7vw;
    background: #000;
}

.picture-box {
    margin: 1.5vw 0;
}

.year-1987 {
    margin-bottom: 3vw;
}

.year-1995 {
    margin-bottom: 1.8vw;
}

.year-1999 {
    margin-top: 2vw;
}

.year-1999 div {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.year-1999 h2 {
    margin: 0 2vw 0 1vw;
}

.year-2009 .red-line {
    margin: 2vw auto;
}

.year-2011 .red-line {
    margin: 2.4vw auto;
}

.year-2012 .red-line {
    margin: 2vw auto;
}


.year-2014 .black-line {
    margin: 2vw auto;
}

.year-2016 .black-line {
    margin: 4vw auto;
}

.year-2018 .black-line {
    margin: 2vw auto;
}

.year-2019 h2 {
    margin-top: 2vw;
}

.footer {
    display        : flex;
    justify-content: space-between;
    align-items    : baseline;
    padding        : 50px 15vw;
    background     : #C1272D;
}

.footer section h4 {
    display    : flex;
    align-items: flex-start;
}

.footer section h4 img {
    width: 2vw;
}

.footer section:first-child h2 {
    margin-bottom: -0.7vw;
    font-size    : 2.5vw;
    font-weight  : 900;
}

.footer section:first-child h2:last-child {
    color: #F2F2F2;
    font : normal 2.8vw ABG;
}

.footer section:nth-child(2) h4:first-child {
    font-size: 1.5vw;
}

.footer section:nth-child(2) h4:last-child a {
    color          : #F2F2F2;
    text-decoration: none;
    font-size      : 1.5vw;
    font-weight    : normal;
}

.footer section:nth-child(3) h4:first-child {
    font-size: 1.5vw;
}

.footer section:nth-child(3) h4:last-child a {
    color          : #F2F2F2;
    text-decoration: none;
    font-size      : 1.5vw;
    font-weight    : normal;
}

.footer section:nth-child(4) h4:first-child {
    font-size: 1.5vw;
}

.footer section:nth-child(4)>div {
    margin-top: 14px;
}

.footer section:nth-child(4)>div a {
    display         : inline-block;
    width           : 40px;
    height          : 40px;
    line-height     : 40px;
    text-align      : center;
    margin-left     : 0;
    margin-right    : 10px;
    color           : #C1272D;
    background-color: #f2f2f2;
    border-radius   : 100%;
    text-decoration : none;
    font-size       : 18px;
    transition      : all .3s;
}

.footer section:nth-child(4)>div a:hover {
    color     : #f2f2f2;
    background: #2b2b2b;
}

.copyright {
    display        : flex;
    justify-content: space-between;
    padding        : 20px 15vw;
    color          : #5b5b5b;
    background     : #000;
}

.copyright-record a {
    color          : #5b5b5b;
    text-decoration: none;
}

.copyright-record a:hover {
    color          : #f2f2f2;
    text-decoration: none;
}

/* e:回顾 FLASHBACK */

/* 移动端适配 */
@media (max-width:800px) {

    .footer {
        padding: 5vw 0;
    }

    .footer,
    .footer>section {
        display   : block;
        text-align: center;
    }

    .footer h4 {
        justify-content: center;
    }

    .footer h4 span,
    .footer h4 a {
        font-size: 14px !important;
    }

    .footer>section:first-child {
        display        : flex;
        justify-content: center;
        align-items    : baseline;
        margin-bottom  : 40px;
        line-height    : 40px;
    }

    .footer>section:first-child::after {
        content   : '';
        background: url(https://holoread-img.geekpark.net/tlb/images/star-article-black.svg) 0 0/cover;
        position  : absolute;
        width     : 20px;
        height    : 20px;
        align-self: center;
        margin-top: 40px;
    }

    .footer>section:not(:first-child) {
        margin-top: 14px;
    }

    .footer section:nth-child(4)>div {
        margin-top: 8px;
    }

    .footer>section:first-child h2 {
        display  : inline;
        font-size: 18px;
    }

    .footer>section:first-child h2:last-child {
        display    : inline;
        margin-left: 4px;
        font-size  : 22px;
    }

    .footer>section:nth-child(n+1) img {
        display: none;
    }

    .copyright {
        display  : block;
        padding  : 4vw;
        font-size: 12px;
    }

    .copyright-record a {
        display: block;
    }

    .copyright-record span {
        display: none;
    }
}

@media (max-width: 600px) {
    .head {
        height    : 126vw;
        background: url(https://holoread-img.geekpark.net/tlb/images/mobile-head-bg.jpg) 0 0/cover no-repeat;
    }

    .head img:first-child {
        display: none;
    }

    .head img:last-child {
        display : inline-block;
        position: absolute;
        width   : 90%;
        height  : auto;
        right   : 5%;
        top     : 5%;
    }

    .main-fixed .navs-inner {
        padding: 0 5vw;
    }

    .navs-container {
        height : 12vw;
        padding: 0 5vw;
    }

    .navs-container .navs-inner {
        height     : 12vw;
        line-height: 12vw;
    }

    .navs-inner>img {
        width : 42vw;
        height: auto;
    }

    ul.navs {
        height     : 12vw;
        line-height: 12vw;
        padding    : 0 0 0 5vw;
    }

    ul.navs span:last-of-type {
        font-size: 4vw;
        display  : none;
    }

    ul.navs img {
        width: 3.5vw;
    }

    ul.navs span:first-of-type {
        font-size: 4vw;
    }

    ul.navs span:last-of-type {
        font-size: 4vw;
    }

    #preface .header-inner img {
        width: 45vw;
    }

    #preface .content-wrap {
        padding-bottom: 2.2;
    }

    #preface .content-inner p {
        font-size: 3.5vw;
    }

    #preface .content-inner {
        width: 90vw;
    }

    #focus .header-wrap {
        height: auto;
    }

    #focus .header-inner {
        display: block;
    }

    #focus .header-left,
    #focus .header-right {
        width: 100%;
    }

    #focus .header-left>div {
        width : 14vw;
        height: 11.5vw;
    }

    #focus .header-left>div:nth-of-type(1) {
        left: 42.5%;
        top : 11%;
    }

    #focus .header-left>div:nth-of-type(2) {
        left: 56.5%;
        top : 22%;
    }

    #focus .header-left>div:nth-of-type(3) {
        left: 71%;
        top : 33%;
    }


    #focus .header-left>div:nth-of-type(4) {
        left: 28.5%;
        top : 22%;
    }

    #focus .header-left>div:nth-of-type(5) {
        left: 43%;
        top : 33%;
    }

    #focus .header-left>div:nth-of-type(6) {
        left : 57.5%;
        top  : 43.6%;
        width: 13vw;
    }

    #focus .header-left>div:nth-of-type(7) {
        left : 15%;
        top  : 32.6%;
        width: 13vw;
    }

    #focus .header-left>div:nth-of-type(8) {
        left : 29%;
        top  : 43.4%;
        width: 13vw;
    }

    #focus .header-left>div:nth-of-type(9) {
        left : 43.6%;
        top  : 54%;
        width: 13vw;
    }

    #focus .header-right .text-wrap h2 {
        font-size: 5vw;
    }

    #focus .header-right .text-wrap p:nth-of-type(2n+1),
    #focus .header-right .text-wrap p:nth-of-type(2n+2) {
        font-size: 3.5vw;
    }

    #focus .header-right img {
        height: 85vw;
        width : auto;
    }

    .articles>div>div {
        width : 33.33%;
        height: 33.33vw;
    }

    a.mobile-article {
        display        : flex;
        width          : 100%;
        text-align     : center;
        text-decoration: none;
    }

    a.mobile-article>div {
        width : 33.33%;
        height: 33.33vw;
    }

    a.mobile-article .year h2 {
        margin-top: 5vw;
        font      : 40px ABG;
    }

    a.mobile-article .year img {
        width     : 6vw;
        margin-top: 2vw;
    }

    a.mobile-article .summary {
        box-sizing : border-box;
        padding-top: 4vw;
        overflow   : hidden;
    }

    a.mobile-article .summary h2 {
        font       : 20px ABG;
        font-weight: 800;
    }

    a.mobile-article .summary div {
        width     : 5vw;
        height    : 1.2vw;
        margin    : 2.5vw auto;
        background: #F2F2F2;
    }

    a.mobile-article .summary p {
        width    : 85%;
        margin   : 0 auto;
        font-size: 12px;
    }

    a.mobile-article .image {
        position  : relative;
        background: url() 50% 50%/cover no-repeat;
        filter    : grayscale(1);
    }

    a.mobile-article-black {
        color     : #F2F2F2;
        background: #1a1a1a;
    }

    a.mobile-article-red {
        color     : #F2F2F2;
        background: #C1272D;
    }

    a.mobile-article-white {
        color     : #1a1a1a;
        background: #FFF;

    }

    a.mobile-article-red .image {
        filter: grayscale(1) opacity(0.4) brightness(1.1);
    }

    a.mobile-article-white .summary div {
        background: #1a1a1a;
    }

    a.mobile-article-white .image::after {
        content   : ' ';
        display   : block;
        position  : absolute;
        width     : 100%;
        height    : 100%;
        background: rgba(255, 255, 255, 0.5);
    }

    #flashback .placeholder {
        display   : none;
        background: none;
    }

    #flashback .summary {
        width  : 100%;
        padding: 5vw 5vw 0 5vw;
    }

    .flashback .summary>img {
        display: inline-block;
        width  : 66%;
        margin : 8vw 0 10vw 5vw;
        filter : none;
    }

    #flashback p {
        font-size: 3.5vw;
    }

    #flashback .red-head,
    #flashback .black-head {
        font-size: 22vw;
    }

    #flashback .left-panel,
    #flashback .right-panel {
        width: 45%;
    }

    .two-columns .vertical-line {
        width: 2px;
    }
}