h1, h2, h3, h4, h5, h6 {font-family: lexicon-ttw-no-2,"times new roman",serif; font-weight: normal} article { padding-bottom: 1px; background: rgb(239,244,255); background: linear-gradient(0deg, rgba(239,244,255,1) 0%, rgba(255,255,255,1) 25%, rgba(239,244,255,1) 50%, rgba(255,255,255,1) 75%, rgba(239,244,255,1) 100%); } #content p {font-size: 20px;} /* ANIMATED ARTICLE HEADER */ .animated-article-header {background-size: cover; justify-content: center; display: flex; padding: 90px 18px} .animated-article-header-text {background-color:rgba(255,255,255,0.92); width:980px; max-width: 100%; text-align: center; padding: 0 80px 60px} .animated-article-header-text h1 {color:#5F143C; font-size: 60px; margin-bottom: 0.85em;} #content .animated-article-header-text h2 {color:#2E2E2E; font-size: 20px;} .animation-article-icon {margin-top: 30px; margin-bottom: 50px;} #content .article-inner .new-blockquote-container p {font-size: 30px; color:#0A2D6E; line-height: 1.3em; margin-left: 0; width: 510px; max-width: 100%;} #content .article-inner .new-blockquote-container cite {color:#0A2D6E; text-align: right; display: block; font-family: lexicon-ttw-no-2,"times new roman",serif; font-size: 20px; font-style: normal; border-top:2px solid #571B3B; padding-top: 15px;} .new-blockquote-container blockquote:before {width:111px; height: 81px; background-image: url(/_assets/icon-quote-new.svg); transform: rotate(0); background-size: contain; background-repeat: no-repeat; position: absolute; left: -130px;} .new-blockquote-container {position: relative; margin-top: 0} .new-blockquote-container.with-animation blockquote {margin-top: 0} .new-blockquote-container.with-animation blockquote:before {display: none} .new-blockquote-container.with-animation p {width:100% !important;} .animated-quote {position: absolute; left: -220px; top: -20px;} /* TEXT */ .article-inner {width:1440px; max-width: 100%; margin: auto; font-family: lexicon-ttw-no-2,"times new roman",serif;} .article-inner h3 {font-size: 40px; color:#571B3B; border-bottom: 2px solid #132E6A; padding-bottom: 15px; margin-bottom: 35px;} .article-inner h3 span {color:#0A2D6E; display: block;} #content .article-inner .first-character {font-family: lexicon-ttw-no-2,"times new roman",serif; color:#0A2D6E; font-size: 40px; line-height: normal; float: none; padding-right: 0px} #content .article-inner p {width:auto; font-size: 20px;} /* ANIMATED ROWS */ .column {font-size: 16px; display: inline-block; vertical-align: top} .animated-article-row {display: flex;} .animated-article-text {width:626px; max-width: 100%;} .animated-article-spacer {width:297px;} .animated-article-graphic {width: 517px; padding-left: 80px;} .row-2 {margin-bottom: 50px;} .row-2 .animated-article-graphic {padding-left: 0; padding-right: 60px; margin-top: -150px;} .row-2 .new-blockquote-container {margin-top: 80px;} .row-3 .animated-article-text {margin: auto} .row-3 .text-and-graphic {display: flex; align-items: flex-start;} .row-3 .inline-animation {width: 45%;} #content .row-3 .text-and-graphic p {width:55%; max-width: 100%; margin: 0; padding-right: 60px;} .row-4.animated-article-row {width:1150px; max-width: 100%; margin:20px auto 0 auto} .row-5 {flex-direction: column; margin-bottom: 90px;} .row-5 .animated-article-text {margin: auto} .row-5 .animated-article-text:last-child {margin-top: 60px;} .row-6 .animated-article-graphic {width:529px; margin-left: 80px; margin-right: 20px; padding-left: 0} .row-7.animated-article-row {width:1150px; max-width: 100%; margin:90px auto 0 auto; flex-direction: column;} .row-7 .animated-article-graphic {width:858px; padding-left: 0; align-self: flex-end; margin-top: -30px;} .row-8 .animated-article-text {margin: auto; margin-top: 80px;} .row-9.animated-article-row {width:1150px; max-width: 100%; margin:80px auto 0 auto; position: relative; flex-direction: column} .row-9 .text-small {width:300px !important; margin-left: 0 !important} .row-9 .animated-article-text.middle {margin:110px auto 0} .row-9 .animation-9 {width:870px; max-width: 100%; position: absolute;right: -60px; top: 110px;} .related-articles {margin-top: 0; padding-top: 0} .related-articles:before {display: none} hr.end {width:200px; margin: 80px auto; border-top:2px solid #571B3B; display: block;} @media (max-width:1540px) { .article-inner {padding-left: 30px; padding-right: 30px;} .row-9 .animation-9 {right:0; width: 75%;} } @media (max-width:1270px) { .row-9 .text-small {width:40% !important;} .row-9 .animated-article-text {width:55%;} } @media (max-width:1100px) { .animated-article-header {padding-top: 150px;} .animated-article-header-text h1 {font-size: 40px;} .article-inner h3 {font-size: 30px;} #content .article-inner p, #content p {font-size: 18px;} .article-inner {width:800px; max-width: 100%; padding-left: 0; padding-right: 0} .animated-article-graphic {padding: 0; margin: auto; width: 100%;} .new-blockquote-container blockquote:before {position: relative; left: auto; top: auto;} .row-1 {flex-direction: column;} .row-2 {flex-direction: column-reverse;} .row-2 .animated-article-graphic {padding: 0; margin: 0 auto;} #content p#text_pictet_pandemic {font-size: 18px; margin: 0 0 30px 0} .row-3 .text-and-graphic {flex-direction: column;} #content .row-3 .text-and-graphic p {width:100%; padding: 0} .row-3 .inline-animation {width:100%; margin: 40px auto;} .row-4.animated-article-row {flex-direction: column; width:626px; margin-top: 0; margin-bottom: 50px;} .row-6.animated-article-row {flex-direction: column-reverse} .row-6 .animated-article-graphic {margin: auto; padding: 0; width: 100%} .row-7 .animated-article-graphic {position: relative; width:100%; right: auto; top:auto; margin: 40px auto} .animated-quote {width:100%; position: relative; top:auto; left: auto; margin-bottom: 30px;} .row-9 .animation-9 {position: relative; top:auto; right:auto; width: 100%;} .row-9 .animated-article-text {width: 100%;} .row-9 .text-small {width: 100% !important} } @media (max-width:640px) { article {padding-left: 18px; padding-right: 18px;} .row-8 .animated-article-text {margin-top: 30px;} }