.section.words{display:block;width:95%;position:relative;box-sizing: border-box;}
.section.words.open{width:100%;}
.scroll_indicator000{display:none;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;}
.scroll_indicator.visible{display:block;opacity:1;visibility:visible;}

.section.words.open .scroll_indicator{width:80px;text-align:center;position:fixed;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:100000;}
.indicator{font-size:1.4em;line-height:1.4;font-weight:400;margin:0.2em auto;display:flex;align-items:center;justify-content:center;}
.scroll_indicator .indicator label{width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .5s;-webkit-transition:all .5s;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;}
.scroll_indicator .indicator label.active{overflow:hidden;cursor:pointer;transition:all 0.2s;}
.scroll_indicator .indicator label:hover{background:var(--theme-ui-colors-white);font-weight:bold;color:#000;}
.scroll_indicator .indicator label.active:hover{font-weight:bold;color:#fff;}
.scroll_indicator .indicator label.active{background:var(--theme-ui-colors-main);font-weight:bold;color:#fff;}
.word-container{width:calc(20% - 1em);float:left;position:relative;padding:0;margin:0.5em;height:auto;}
.section.words.open .word-container{width:100%;margin:0;border-left:0;border-right:0;padding:0 0 0 5em;}
.viz-card{width:100%;padding:1em 1em 0 1em;float:left;z-index:1;}
.viz-card.open{height:100vh;}
.section.words.open .viz-card{padding:2rem;width:50%;height:100vh;}
.viz-container{display:flex;align-items:center;justify-content:center;width:100%;}
.word-title{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;}
.word-title .main{font-size:2rem;font-weight:bold;line-height:1.4;}
.word-title p{margin:0;line-height:1;}
.word-title .pinyin{display:none;font-size:1.4rem;}
.section.words.open .word-title .main{font-size:5rem;font-weight:700;}
.section.words.open .word-title .pinyin{display:inline-block;font-weight:100;}
.word-action{display:flex;margin:0.8em 0 0 0;align-items:center;justify-content:center;flex-direction:column;width:100%;}
.word-action button{border:none;background:inherit;}
.main-action{margin-bottom:1.5em;opacity:0.8;transition:all 0.2s;}
.main-action button{border-radius:3em;color:#000;background:inherit;padding:0.7em 2em;border:2px solid #333;}
.main-action:hover{opacity:1;}
.main-action:hover button{background:#fff;}
.second-action{transition:all 0.2s;}
.section.words.open .second-action{display:none;}
.second-action button{padding:1em 2em;color:#fff;background:#333;border-radius:11em 11em 0 0;}
.second-action:hover{opacity:0.9;}
.labels{font-size:0.5em;}
.section.words.open .labels{font-size:0.9em;opacity:0.6;}
.sticky{position:sticky !important;position:-webkit-sticky !important;top:0em;}
.scroll-pages{z-index:0;width:50%;display:flex;flex-direction:column;align-items:center;float:right;background:#fff;}
.scroll-pages .scroll-page:nth-child(1){display:flex;align-items:center;}
.scroll-page{width:100%;padding:0;min-height:100vh;}
.scroll-page .page{padding:4em;display:flex;flex-direction:column;justify-content:center;color:var(--theme-ui-colors-black);}
.scroll-page .page a{color:var(--theme-ui-colors-main);}
.scroll-page .page h3{font-size:3em;font-weight:100;color:rgba(0, 0, 0, 0.3);color:var(--theme-ui-colors-main);}
.scroll-page .page h3 em{font-weight:700;}
.scroll-page .page h3,.scroll-page .page p{padding:0.3rem 0;margin:0;}
.scroll-page .page .keyword{margin-top:0.8em;padding-top:0.8em;border-top:1px solid var(--theme-ui-colors-main);text-transform:capitalize;}
.scroll-page .page .keyword b{color:var(--theme-ui-colors-main);}
.scroll-page .page .keyword-desc{color:#666;font-size:0.9em;margin-top:0.4em;}
.scroll-page .page .event-synopsis{font-size:1em;color:rgba(0, 0, 0, 0.8);line-height:1.5;}
.scroll-pages .scroll-page:nth-child(1) .page .event-synopsis{color:#000;}
.scroll-page .page .event-title{padding:0.6em 0;width:100%;font-weight:bold;display:flex;align-items:center;}
.scroll-page .page .event-title .date{font-size:1.2em;white-space:nowrap;display:inline-block;align-items:right;color:rgba(0, 0, 0, 0.5);color:var(--theme-ui-colors-main);padding:0 0.6em 0 0;margin:0 0.4em 0 0;border-right:1px solid #aaa;}
.scroll-page .page .event-title .event-headline{width:90%;font-size:1.6em;color:#000;line-height:1.3;display:inline-block;}
.scroll-page .page .event-title .event-headline a span{display:inline-block;width:80%;}
.scroll-page .page .event-title .event-headline a{color:#000;display:flex;width:100%;align-items: center;justify-content:space-between;}
.scroll-page .page .event-title .event-headline a:hover:after{border-color:var(--theme-ui-colors-main);}
.scroll-page .page .event-title .event-headline a:after{width:40px;height:40px;border:2px solid #000;content:'';background-image:url('../imgs/arrow-right.svg');background-color:rgba(255,255,255,1);background-position:center center;background-size:50%;background-repeat:no-repeat;float:right;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;}
.keyword-container{margin:0;display:none;width:100%;color:#999;}
.keyword-container em{font-size:0.9em;margin-bottom:0.8em;display:block;clear:both;color:#fff;}
.keyword-container .keyword{padding:0 0.2em;font-size:0.9em;font-weight:bold;text-transform:uppercase;color:var(--theme-ui-colors-main);}
.section.words.open .keyword-container{display:block;text-align:center;justify-content:center;align-items:center;}
.scroll-page .page .img-container{margin:2em -4em 1em -4em;}
.scroll-page .page .img-container img{margin-bottom:0.4em;}
.scroll-page .page .img-container figcaption{opacity:0.6;padding:0 4em;}
.img-container img{width:100%;height:auto;object-fit:cover;object-position:center;}
.read-more{display:flex;align-items:center;justify-content:end;}
.read-more a{padding:0.8em 1em;border:2px solid #ccc;font-size:0.9em;border-radius:50px;display:flex;align-items:center;line-height:1;}

@media screen and (min-height:550px) and (max-height:760px) and (orientation:landscape){
.scroll_indicator .indicator label{width:40px;height:40px;}
.indicator{font-size:1.2em;}
}


@media screen and (min-width:1280px){
.section.words.open .word-title .main{font-size:7rem;}
}

@media screen and (max-width:768px){
.word-container{width:calc(50% - 1em);}
.indicator{font-size:1em;margin:0 auto;}
.section.words.open .scroll_indicator{padding:0.2em 0.6em;width:100%;top:0;flex-direction:row;transition:none;transform:none;backdrop-filter:blur(0.8em);-webkit-backdrop-filter:blur(0.8em);z-index:1000001;overflow:hidden;background:var(--theme-ui-colors-main);}
.section.words.open .keyword-container em{display:none;}
.scroll_indicator .indicator label{margin:0;width:32px;height:32px;}
.scroll_indicator .indicator label.active{background:var(--theme-ui-colors-secondary);}
.viz-card.open{height:auto;}
.section.words.open .word-container{width:100%;padding:0;}
.scroll-pages{width:100%;}
.section.words.open .viz-card{top:2em;width:100%;height:auto;z-index:100000;border-top:0.4em solid var(--theme-ui-colors-main);}
.section.words.open .word-container:nth-child(even) .viz-card{background:var(--theme-ui-colors-secondary);}
.section.words.open .word-container:nth-child(odd) .viz-card{background:#004883;}
.section.words.open .labels{font-size:0.7em;}
.word-action{margin:0.2em 0 0 0;}
}

@media screen and (max-width:767px){
.scroll-page{padding:1em 0;min-height:70vh;}
.scroll-page .page{padding:1em 1.2em;}
.scroll-page .page .img-container{margin:1em -1.2em 0.4em -1.2em;width:auto;}
.section.words.open .viz-card{padding:0.6rem 0;}
.section.words.open .viz-container{width:60%;margin:0 auto;}
.section.words.open .word-title{margin:-4em 0 0 0;}
.section.words.open .word-title .main{font-size:2.4em;}
.section.words.open .word-title .pinyin{font-size:0.9em;}
.word-container{padding:0;}
.keyword-container{font-size:0.85rem;}
.keyword-container .keyword{font-weight:normal;}
.section.words.open .word-container{padding:0;}
.scroll-page .page .event-title{padding:1em 0;}
.scroll-page .page .event-title .event-headline{width:80%;font-size:1.4em;}
.scroll-page .page .event-title .event-headline a:after{width:30px;height:30px;margin:1em 0 0 0;}
.scroll-page .page h3{font-size:2em;}
.scroll-page .page .img-container figcaption{padding:0 2em;}
.scroll-pages .scroll-page:nth-child(1){min-height:auto;}
.scroll-pages .scroll-page:nth-child(1) .page .event-synopsis{font-size:1.1em;line-height:1.6;letter-spacing:0;}
.scroll-pages .scroll-page:nth-child(1),.scroll-pages .scroll-page .page:nth-child(1){height:auto;}
}