﻿.motw-archive.motw h1{font-weight:400}
.motw-archive h1,.motw-archive .sort-control{text-align:center}
.motw-archive .sort-control{margin:1.5em 0 2em;display:flex;justify-content:center}
.motw-archive .sort-control button{gap:12px}
.motw-archive .sort-control select{cursor:pointer;background:0;border:0;border-bottom:4px solid #f8cd31;height:45px}
.motw-archive section{display:flex;flex-flow:row;align-items:top;margin:0 auto 2em;border-bottom:1px solid #eee;padding-bottom:1em;width:65em;max-width:100%}
.motw-archive section:last-child{margin-bottom:4em}
.motw-archive section h2{width:130px;font-size:6em;line-height:.8em;margin-bottom:.25em;color:rgba(0,0,0,.1)}
.motw-archive section ul{width:55em;max-width:100%;column-count:2;list-style:none}
.motw-archive section li{padding:6px 0;line-height:1.45em;list-style:none}
.motw-archive section li a{text-decoration:none;color:#000}
.motw-archive section li a:hover{text-decoration:underline}
.motw-archive section.byyear h2{font-size:3em;line-height:1em;color:rgba(0,0,0,.2)}
.motw-archive section.byyear ul{transform:rotate(180deg)}
.motw-archive section.byyear li{transform:rotate(-180deg)}
.dropdown-menu{left:50%;transform:translateX(-50%);top:5rem}
.dropdown-menu li{list-style:none}
.filterby-alphabets{width:800px;max-width:100%;margin:1em auto 3em;text-align:center}
.filterby-alphabets.alphabets-isVisible{visibility:visible}
.filterby-alphabets li{list-style:none;display:inline-block;margin:1px}
.filterby-alphabets li span{padding:11px 18px;background-color:#cfcfcf;display:inline-block;text-decoration:none;font-size:1.2em;font-weight:600;color:#000;cursor:pointer}
.filterby-alphabets li.selected span{background-color:#f8cd31}
.motw-date{font-size:.85em;color:#888}
.motw-date:before{content:"-";margin:0 5px}
@media screen and (max-width:768px){.motw-archive.motw h1{margin-top:1em}
.motw-archive section ul{column-count:1}
.motw-archive section h2{text-align:left;margin-right:0;font-size:5em}
.motw-archive section.byyear h2{font-size:2em}
}
.motwteaser{text-align:center}
.motwteaser h2,.motwteaser p{max-width:none !important}
.motwteaser .btn{margin:1em 0 .5em}
.motwteaser img{max-width:100%;max-height:300px}
.motwteaser .moleculeImage{width:500px;margin:auto}
.motwteaser .teaserWrapper{display:table;margin:auto}
.motwteaser .teaserWrapper>div{display:table-cell}
.motwteaser>a{display:inline-flex}
@media screen and (max-width:768px){.motwteaser .teaserWrapper{display:grid;grid-template-columns:1fr 1fr}
.motwteaser img{max-height:150px}
}
@keyframes signup-response{from{opacity:1}
to{opacity:0}
}
@-webkit-keyframes signup-response{from{opacity:1}
to{opacity:0}
}
@-webkit-keyframes handslide{from{left:0}
to{left:13px}
}
.motw{font-size:16px}
.motw header{text-align:center;margin-top:1.6rem;margin-bottom:1.6rem}
.motw h1{font-size:3em;font-weight:450;margin:0;word-wrap:break-word}
.motw .title .title-teaser{margin-top:.8rem}
.motw .h3{margin-top:0}
.motw .h3 a{color:#251f20}
.motw .published-date{color:#555}
.motw .acsJoin .box-style3{border:0;padding:3.2rem 0 2.4rem}
.motw .socialmedia{margin-bottom:2.4rem}
.motw .casUrl,.motw .socialmedia{margin-top:2.4rem}
.prev-mol,.next-mol{position:absolute;background:#fafafa;padding:1.25em;font-weight:450;width:140px;text-align:center;color:#251f20}
.prev-mol:visited,.next-mol:visited{color:#251f20}
.prev-mol:before,.prev-mol:after,.next-mol:before,.next-mol:after{font:normal normal 400 16px/1 FontAwesome;position:relative;top:2px}
.prev-mol:hover,.next-mol:hover{text-decoration:none;background-color:#ffca00;color:#251f20}
.prev-mol{left:0}
.prev-mol:before{content:"";margin-right:.8rem}
.next-mol{right:0}
.next-mol:after{content:"";margin-left:.8rem}
.motw-sets{display:flex;justify-content:center;text-align:center}
.motw-sets img{max-width:100%;max-height:230px}
.motw-sets>div{margin:0 .8rem;position:relative;display:flex;align-items:center;justify-content:center}
.motw-sets figure{margin:0 1.6rem;position:relative;margin-bottom:1.6rem}
.motw-sets figcaption{font-size:1rem;line-height:125%;font-weight:450;text-align:center;position:absolute;width:49%}
@media(min-width:64rem){.motw-sets figcaption{font-size:1.2rem}
}
.motw-sets figcaption:last-child{right:0}
.motw-sets .figure__credit{color:#960}
.motwimages{position:relative;margin-bottom:1.6rem}
.moleculeHint{text-align:center;font-weight:450;font-size:2.2rem;line-height:120%;font-weight:450;letter-spacing:-0.02em;margin-bottom:1.6rem}
@media(min-width:64rem){.moleculeHint{font-size:2.8rem}
}
.casUrl{margin-bottom:1.6rem}
.casUrl img{margin-right:1.6rem;float:left}
.table .table{margin-bottom:0}
.table caption{font-size:1.2rem;line-height:125%;font-weight:450;color:#251f20}
@media(min-width:64rem){.table caption{font-size:1.4rem}
}
.hazard-icon{float:right;width:40px}
@media(min-width:769px){.motw-sets>div:first-child:nth-last-child(1),.motw-sets>div:first-child:nth-last-child(1)~div{width:100%}
.motw-sets>div:first-child:nth-last-child(2),.motw-sets>div:first-child:nth-last-child(2)~div{width:50%}
.motw-sets>div:first-child:nth-last-child(3),.motw-sets>div:first-child:nth-last-child(3)~div{width:33.3333333333%}
.motw-sets>div:first-child:nth-last-child(4),.motw-sets>div:first-child:nth-last-child(4)~div{width:25%}
.motw-sets>div:only-child img:only-child{max-width:100%;max-height:500px}
.motw-sets>div:only-child img{max-width:49%}
.motw-sets>div:first-child:nth-last-child(2) img,.motw-sets>div:first-child:nth-last-child(2)~div img{max-width:380px}
.motw-controls{position:fixed;top:300px;width:100%;z-index:2}
.motw .content-wrapper{margin:auto 4em 2em}
.motw .casUrl{border-right:1px solid #f5f5f5;padding-right:1.6rem}
}
@media(max-width:768px){.motw header{display:flex;flex-flow:row wrap}
.motw header>.container{order:2}
.motw .motw-controls{order:1;width:100%;margin-bottom:2em}
.motw .scroll-indicator{display:block;background:rgba(0,0,0,.1);width:100px;margin:auto;padding:2px;border-radius:3.2rem;text-align:center;animation:signup-response .5s 1;-webkit-animation:signup-response .5s 1;animation-fill-mode:forwards;animation-delay:4s;-webkit-animation-delay:3s;-webkit-animation-fill-mode:forwards}
.motw .scroll-indicator:before,.motw .scroll-indicator:after{display:inline-block;font:normal normal 400 18px/1 FontAwesome;color:#999}
.motw .scroll-indicator:before{content:"";margin-right:5px}
.motw .scroll-indicator:after{content:"";position:relative;-webkit-animation:handslide 1s infinite alternate}
.prev-mol,.next-mol{position:relative;display:inline-block;width:49%}
.motw-controls{text-align:center}
.motw-sets{justify-content:initial;overflow-x:auto;height:380px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}
.motw-sets div{flex:0 0 auto;width:100%;max-width:100%}
.motw-sets figcaption{position:relative;margin-bottom:1em}
.motw-sets img{max-height:180px}
}