* ...and so on.
*
* SEGM on Twitter has the same structure, with the indicators.
* The content classes are "twitter-item views-row", "item-twitter", "item-twitter-content", "slider-item-body", "twitter-tweet twitter-tweet-rendered"...
*
* A note when reading CSS below:
* .aselector.likethis requires both in one object, e.g.
* .aselector .likethis means a parent and a child, e.g.
*
* The main issue here is that... well, itc-slider is defined in a million different places.
*
/*style for green H1-h6, span*/
.article-content h1.darkgreen {
color: #064a4d;
}
.article-content h2.darkgreen {
color: #064a4d;
}
.article-content h3.darkgreen {
color: #064a4d !important;
}
.article-content h4.darkgreen {
color: #064a4d;
}
.article-content h5.darkgreen {
color: #064a4d;
}
.article-content h6.darkgreen {
color: #064a4d;
}
.article-content span.darkgreen {
color: #064a4d;
}
.article-content a.button {
border: 2px solid #d9dada;
display: inline-block;
width: max-content;
padding: 0.1em 0.5em 0.1em 0.5em;
border-radius: 0.3em;
margin-top: 0em;
font-size: 1rem;
margin-right: 0.9em;
cursor: pointer;
position: relative;
}
.article-content a.button:hover {
background-color: #eee;
text-decoration: none;
}
section.content-1 p,
section.content-1 ul,
section.content-1 ol {
font-size: 1.3rem;
line-height: 1.9em;
}
section.content-1 ol {
counter-reset: item;
list-style-type: none;
}
section.content-1 ol li:not(.itc-slider__indicator):before {
content: counter(item) ". ";
counter-increment: item;
color: #064a4d;
position: relative;
margin-left: -1.2em;
}
article.conference-teaser {
margin: 0em 0em 2em 0em;
}
article.conference-teaser hr {
display: none;
}
div.conference-teaser-upcoming-alert {
text-align: center;
background-color: rgba(13, 136, 148, 0.0666666667);
font-weight: bold;
}
div.conference-teaser-container {
display: flex;
flex-direction: row;
width: 100%;
max-width: 100%;
}
article.conference-teaser-upcoming div.conference-teaser-container {
flex-direction: row-reverse;
}
div.conference-teaser-details {
margin: auto;
flex: 0 0 66%;
padding: 0em;
vertical-align: top;
}
div.conference-teaser-details h2.conference-teaser-header {
text-align: left;
}
div.conference-teaser-image-container {
max-width: 512px;
padding: 1em;
text-align: right;
vertical-align: middle;
}
img.conference-teaser-image {
border: 0px solid #0D8894;
box-shadow: 0 0 2px #0D8894;
filter: grayscale(60%);
}
@media (max-width: 800px) {
article.conference-teaser-upcoming div.conference-teaser-container {
flex-direction: column-reverse;
}
div.conference-teaser-container {
flex-direction: column-reverse;
}
div.conference-teaser-image-container {
margin-bottom: 2em;
}
article.conference-teaser hr {
display: block;
}
}
h4.conference-title {
font-weight: 600;
font-style: italic;
text-align: center;
margin: 0em 0em 0.2em 0em;
}
div.conference-subheaders {
margin: 0em 0em 2em 0em;
text-align: center;
}
@media (min-width: 800px) {
h5.conference-subheader:first-of-type::after {
content: " - ";
}
h5.conference-subheader {
display: inline;
}
}
/**
* ItcSlider
* @version 1.0.0
* @author https://github.com/itchief
* @copyright Alexander Maltsev 2020 - 2022
* @license MIT (https://github.com/itchief/ui-components/blob/master/LICENSE)
* @tutorial https://itchief.ru/javascript/slider
*/
.itc-slider {
padding-bottom: 3em;
position: relative;
}
.itc-slider__wrapper {
padding-bottom: 2em;
overflow: hidden;
}
.itc-slider__items {
display: flex;
transition: transform 0.5s ease;
will-change: transform;
}
.itc-slider__transition-none {
transition: none;
}
.itc-slider__item {
cursor: pointer;
flex: 0 0 100%;
max-width: 100%;
user-select: none;
will-change: transform;
}
.itc-slider__btn {
position: absolute;
top: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 50px;
color: #fff;
text-align: center;
background: rgba(0, 0, 0, 0.2);
border: none;
transform: translateY(-50%);
cursor: pointer;
z-index: 100;
}
.itc-slider__btn_hide {
display: none;
}
.itc-slider__btn_prev {
left: 0;
}
.itc-slider__btn_next {
right: 0;
}
.itc-slider__btn:hover,
.itc-slider__btn:focus {
color: #fff;
text-decoration: none;
background: rgba(0, 0, 0, 0.3);
outline: 0;
}
.itc-slider__btn::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.itc-slider__btn_prev::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.itc-slider__btn_next::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.itc-slider__indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
display: flex;
justify-content: center;
margin: 0 15%;
padding-left: 0;
list-style: none;
}
.itc-slider__indicator {
background-color: rgba(0, 0, 0, 0.0745098039) !important;
flex: 0 1 auto;
box-sizing: content-box;
width: 30px;
height: 5px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
background-clip: padding-box;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
cursor: pointer;
}
.itc-slider__indicator_active {
background-color: rgba(13, 136, 148, 0.5019607843) !important;
background-color: rgba(255, 255, 255, 0.9);
}
/*
* These are the defaults for accordion widget, used on the FAQ page, and for the temporary NYC2023 module.
*/
#accordion {
font-family: "Inter", sans-serif;
}
#accordion > h3 {
color: #0D8894;
font-size: 145%;
font-weight: bold;
cursor: pointer;
margin-top: 1.1em;
border: none;
background: none;
}
#accordion > h3.ui-state-active {
text-decoration: underline;
}
#accordion > div {
padding: 0 0.8em;
border: none;
background: none;
color: inherit;
}
#accordions {
margin: auto;
color: #222222;
}
#accordions h3 {
display: block;
background-color: #f9f9f9;
padding: 0.5em 2em 0.5em 1.5em;
font-size: 17pt;
position: relative;
cursor: pointer;
color: #000;
border: none;
font-family: "Poppins", sans-serif;
font-weight: 500;
margin-bottom: 1.2rem;
}
#accordions h3 > span.ui-icon {
display: none;
}
#accordions h3:after {
display: block;
width: 2em;
height: 100%;
content: " ";
position: absolute;
right: 0;
top: 0;
line-height: 1em;
text-align: center;
font-size: 22pt;
background-image: url(../images/plus-circle.svg);
background-repeat: no-repeat;
background-position: calc(100% - 0.3em) center;
background-size: 1em;
font-family: "Poppins", sans-serif;
}
#accordions h3.ui-state-active {
background-color: #1bacaf;
color: #fff;
margin-bottom: 0.5rem;
}
#accordions h3.ui-state-active:after {
background-image: url(../images/no-entry.svg);
color: #fff;
}
#accordions div.ui-accordion-content {
padding: 1em 2em 1em 2em;
font-size: 14pt;
border: none;
}
/*
* These are related to the GoFundMe thing on the front page and the donate page.
*/
.gfm-embed {
position: relative;
}
.gfm-embed:hover {
filter: grayscale(0%);
}
.gfm-embed iframe {
position: relative;
z-index: 100;
}
.gfm-embed .hide-for-large {
display: none;
}
.em-progress {
padding-bottom: 0.5em;
padding-bottom: 0;
}
.em-progress .cta-title {
text-align: left;
padding-bottom: 0.5em;
}
.em-progress .cta-title > * {
font-size: 1.6rem;
}
.em-progress .cta-title h2 {
display: inline;
padding-right: 0.1em;
}
.em-progress .cta-title span {
font-size: 1.2rem;
}
.em-progress .progress-bar {
background-color: #0D8894;
}
.em-title {
box-sizing: border-box;
cursor: pointer;
display: block;
font-family: Lato, Trebuchet, Arial, sans-serif;
font-size: 24px;
font-weight: 900;
line-height: 28.88px;
margin-bottom: 8px;
margin-top: 8px;
}
.em-progress h2 {
margin-bottom: 0.6em !important;
font-size: 120% !important;
}
progress {
width: 100%;
}
section.new-home-blog {
padding: 4rem 2rem 3rem;
background-image: linear-gradient(180deg, rgba(230, 230, 230, 0.5) 0%, rgba(230, 230, 230, 0.3) 45%, #fff 46%, rgba(255, 255, 255, 0) 100%);
}
section.new-home-blog h2 {
padding: 2rem 0 2rem 2.5rem;
color: #0d8894;
font-family: "Poppins";
font-weight: normal;
}
section.new-home-blog .itc-slider__item {
cursor: auto;
flex: 0 0 100%;
}
@media (min-width: 1200px) {
section.new-home-blog .itc-slider__item {
flex: 0 0 50%;
}
}
section.new-home-blog .itc-slider__item.last-item .itc-slider__item-in-news-content {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
}
@media (min-width: 991px) {
section.new-home-blog .itc-slider__item.last-item .itc-slider__item-in-news-content {
height: 250px;
}
}
section.new-home-blog .itc-slider__btn_prev {
left: -3rem;
}
section.new-home-blog .itc-slider__btn_next {
right: -3rem;
}
section.new-home-blog .itc-slider__btn {
top: 250px;
}
@media (min-width: 991px) {
section.new-home-blog .itc-slider__btn {
top: 50%;
}
}
section.new-home-blog .news-time {
color: #0d8894;
font-size: 1.1rem;
padding-bottom: 0.5em;
font-family: "Poppins";
}
section.new-home-blog .news-title {
font-weight: 700;
font-size: 1.6rem;
line-height: 1.4;
}
section.new-home-blog .news-title a {
color: #0d8894;
font-family: "Poppins";
}
section.new-home-blog .news-subtitle {
font-size: 1.4rem;
color: #7c7676;
font-style: italic;
margin-bottom: 0.5em;
}
section.new-home-blog .news-body {
font-size: 1.1rem;
line-height: 1.7em;
}
@media (max-width: 800px) {
section.new-home-blog .itc-slider__item {
flex: 0 0 100%;
}
}
.itc-slider__item-in-news-wrp {
padding: 1rem 2.6rem;
height: 100%;
}
@media (max-width: 600px) {
.itc-slider__item-in-news-wrp {
padding: 0;
}
}
.itc-slider__item-in-news-content {
box-shadow: 0.5rem 0.5rem 1.2rem 0rem rgba(0, 0, 0, 0.3);
padding: 3rem;
height: 100%;
font-size: 1.4rem;
background-color: #fff;
}
@media (max-width: 991px) {
.itc-slider__item-in-news-content {
height: auto;
}
}
@media (max-width: 600px) {
.itc-slider__item-in-news-content {
padding: 0.5rem;
box-shadow: 0 0;
background: transparent;
}
}
/*
* Treatment of Gender-Diverse Youth is the sixth panel on the home page.
*/
/*
* section.nblk-1
* div.block-benefits
* (title and subtitle are both h2, one is inner-wrapped in
)
*/
section.nblk-1 {
background-color: #03444a;
padding: 10rem 0;
}
section.nblk-1 .container.hwidth {
background-color: #ffffff;
padding: 3rem 6.5rem;
font-size: 1.1rem;
}
section.nblk-1 .container.hwidth h2 {
color: #03444a;
font-family: "poppins";
text-align: center;
max-width: 41rem;
margin-left: auto;
margin-right: auto;
font-weight: bold;
margin-bottom: 2.5rem;
margin-top: 2.5rem;
}
section.nblk-1 .container.hwidth p {
line-height: 1.9em;
}
@media (max-width: 600px) {
section.nblk-1 .container.hwidth {
padding: 1rem;
}
section.nblk-1 {
padding: 1rem;
}
}
/*
* The Dutch Protocol is the seventh panel on the front page.
*/
section.nblk-2 {
background-color: #f0f0f0;
padding: 1rem 0;
}
section.nblk-2 .container.hwidth {
padding: 3rem 0.5rem;
font-size: 1.1rem;
}
section.nblk-2 .container.hwidth h2 {
color: #03444a;
font-family: "poppins";
text-align: left;
max-width: 41rem;
font-weight: bold;
margin-bottom: 2.5rem;
margin-top: 2.5rem;
}
section.nblk-2 .container.hwidth p {
line-height: 1.9em;
}
section.nblk-2 .tb1 {
padding: 1em;
font-size: 1rem;
}
section.nblk-2 .tb1 .tbs1 {
box-shadow: 0px 0px 1.1rem rgba(0, 0, 0, 0.5);
padding: 1em 2.9em;
background: #fff;
height: 100%;
}
section.nblk-2 .tb1 .tbs1 ul {
padding: 0;
list-style: outside;
}
section.nblk-2 .container.hwidth .tb1 h2 {
font-size: 1.1rem;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: none;
font-weight: bold;
}
section.nblk-2 .tb1.tb11 .tbs1 {
background-color: #03444a;
color: #fff;
}
section.nblk-2 .container.hwidth .tb1.tb11 h2 {
color: #fff;
}
@media (max-width: 800px) {
section.nblk-2 {
padding-left: 0.8rem;
padding-right: 0.8rem;
}
}
/*
* Need for Caution and Better Research is the eight panel on the front page.
*/
section.nblk-3 {
background-color: #ffffff;
padding: 2rem 0;
}
section.nblk-3 .container.hwidth {
background-color: #ffffff;
padding: 3rem 0.5rem;
font-size: 1.1rem;
}
section.nblk-3 .container.hwidth h2 {
color: #03444a;
font-family: "poppins";
text-align: center;
max-width: 41rem;
margin: 2.5rem auto;
font-weight: bold;
}
section.nblk-3 .container.hwidth p {
line-height: 1.7em;
}
section.nblk-3 .container.hwidth .wntb {
margin: 2rem -3.5em;
}
section.nblk-3 .container.hwidth .wntb .wnt {
padding: 1rem 2rem;
}
section.nblk-3 .container.hwidth .wntb .wnt .wmtr {
background-color: #054044;
padding: 1.8rem 2.5rem 1rem;
color: #ffffff;
display: flex;
text-align: center;
border-radius: 1.4rem;
font-size: 1.3rem;
}
@media (max-width: 600px) {
section.nblk-3 .container.hwidth .wntb {
margin: 0;
}
}
.rot-quot {
color: #fff;
display: inline-block;
font-size: 6rem;
font-family: Arial;
font-weight: bold;
line-height: 1em;
text-align: center;
height: 0.5em;
}
section.slider-block {
background-image: url(../images/background_media.jpg);
padding: 5em 0 2em;
background-size: cover;
background-position: center;
position: relative;
box-shadow: -2px 1px 2rem 1px rgba(0, 0, 0, 0.6);
z-index: 498;
}
section.slider-block .slider-items {
padding: 2.1em 0% 4em;
margin: auto;
width: 90%;
}
section.slider-block .slider-items .views-view--segm-in-media--block-1__rows {
display: flex;
}
section.slider-block .slider-title {
color: #fff;
font-family: "poppins";
font-weight: 600;
text-align: center;
position: relative;
top: -1em;
margin-bottom: 0;
}
section.slider-block .item-media {
display: flex;
position: relative;
}
section.slider-block .item-media p {
font-size: 1rem;
margin-bottom: 1em;
}
section.slider-block .item-media-content {
background-color: #fff;
padding: 4em 3em 6.5em 3em;
font-size: 0.7vw;
}
section.slider-block .item-media-content:hover {
color: #0d8894;
}
section.slider-block .slider-item-image {
position: absolute;
bottom: 4em;
right: 3em;
}
section.slider-block .slider-item-image img {
max-height: 2.5em;
width: auto;
}
section.slider-block .itc-slider__indicator {
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4) !important;
}
section.slider-block .itc-slider__indicator_active {
background-color: rgb(255, 255, 255) !important;
}
@media (max-width: 600px) {
section.slider-block .slider-item-image img {
width: 100%;
max-height: 16em;
height: 500px;
max-width: 39em;
}
}
section.slider-block .itc-slider {
padding: 0 3%;
max-width: 100%;
box-sizing: border-box;
}
section.slider-block .itc-slider__item {
flex: 0 0 33.3333333% !important;
max-width: 33.3333333% !important;
padding: 0 1em;
display: flex;
}
section.slider-block .media-item {
display: flex;
}
section.slider-block .itc-slider__indicators {
position: relative;
padding-top: 1rem;
}
section.slider-block .itc-slider__btn {
background-color: transparent;
width: 3rem;
height: 3rem;
}
section.slider-block .itc-slider__btn::before {
width: 3rem;
height: 3rem;
}
@media (max-width: 1200px) {
section.slider-block .itc-slider__item {
flex: 0 0 50% !important;
max-width: 50% !important;
padding: 0 1em;
display: flex;
}
}
@media (max-width: 991px) {
section.slider-block .itc-slider__item {
flex: 0 0 100% !important;
max-width: 100% !important;
padding: 0 1em;
display: flex;
}
section.slider-block .itc-slider__btn_prev {
left: -1em;
}
section.slider-block .itc-slider__btn_next {
right: -1em;
}
}
.itc-slider-in-media .itc-slider__btn {
top: 250px;
}
@media (min-width: 991px) {
.itc-slider-in-media .itc-slider__btn {
top: 50%;
}
}
section.nblk-twr {
background-color: #03444a;
}
section.nblk-twr .slider-title {
color: #fff;
padding: 5rem 0;
}
section.nblk-twr .itc-slider {
padding: 0 4rem;
}
@media (max-width: 991px) {
section.nblk-twr .itc-slider {
padding: 0 3rem;
}
}
section.nblk-twr .itc-slider .itc-slider__items {
width: 100%;
}
@media (min-width: 991px) {
section.nblk-twr .itc-slider .itc-slider__items {
width: 50%;
}
}
@media (min-width: 1200px) {
section.nblk-twr .itc-slider .itc-slider__items {
width: 33%;
}
}
@media (min-width: 1400px) {
section.nblk-twr .itc-slider .itc-slider__items {
width: 25%;
}
}
section.nblk-twr .itc-slider .itc-slider__items .itc-slider__item .item-twitter {
width: 100%;
}
section.nblk-twr .itc-slider .itc-slider__items .itc-slider__item .item-twitter .slider-item-body {
display: flex;
justify-content: center;
}
section.nblk-twr .twitter-item {
padding-right: 2rem;
align-self: center;
}
.itc-slider-in-twitter .itc-slider__btn {
top: 250px;
}
@media (min-width: 991px) {
.itc-slider-in-twitter .itc-slider__btn {
top: 50%;
}
}
/*
* The Slogan is the first panel on the front page.
*/
section.slogan-block {
background-color: #f5F5F5;
padding-top: 7.5em;
padding-bottom: 8.5em;
text-align: center;
font-size: 1.1rem;
background-size: cover;
position: relative;
z-index: 500;
font-weight: 500;
font-family: "poppins";
background-image: url(../images/petition_bg_1.jpg);
background-position: center;
}
section.slogan-block .container {
font-size: inherit !important;
line-height: 1.6em;
}
section.slogan-block .container .col {
background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0.85) 100%);
padding: 4rem 4rem;
position: relative;
}
section.slogan-block p {
font-size: inherit;
line-height: 1.8em;
}
section.slogan-block .p-block p {
font-size: 1.4rem;
}
section.slogan-block .p-block {
padding-top: 0.9rem;
}
section.slogan-block .p-block::before {
content: " ";
height: 1px;
width: 100%;
display: block;
position: relative;
border-top: 0.1rem solid #A5A5A5;
padding: 1.5rem 0 0 0;
}
section.slogan-block a.p-button {
display: block;
position: absolute;
bottom: -2.5rem;
left: calc(50% - 14rem);
width: 28rem;
background-color: #0D8894;
color: #fff;
padding: 1.2rem 0;
border-radius: 3rem;
}
section.slogan-block a.p-button:hover {
text-decoration: none;
color: #eee;
background-color: #1F9AA6;
}
/*
* The Navigation menu.
*/
section.top-nav {
padding: 40px 0 20px 0;
padding-bottom: 1.6em;
box-shadow: 0px 0px 17px 0px #9F9F9F;
padding-top: 2em;
position: relative;
}
section.top-nav nav {
display: flex;
}
section.top-nav nav a {
margin: 0;
padding: 0 0.6em;
color: #000;
text-transform: none;
font-family: "Poppins";
font-weight: 600;
font-size: 13pt;
position: relative;
}
section.top-nav nav a.is-active:after {
content: "";
position: absolute;
left: 0;
bottom: -0.5em;
width: 100%;
height: 3px;
background-color: #0D8894;
}
section.top-nav nav a:hover {
color: #000;
text-decoration: underline;
}
section.top-nav nav a.is-active {
color: #0d8894;
font-weight: 600;
}
section.top-nav nav a.is-active::after {
display: none;
}
@media (max-width: 991px) {
#navbarNav {
display: block;
padding-top: 1.5em;
padding-bottom: 0.5em;
}
#navbarNav:not(.show) {
display: none;
}
#navbarNav nav {
display: block;
}
#navbarNav nav a {
display: block;
width: max-content;
margin-bottom: 1.4em;
}
section.top-nav nav a.is-active::after {
bottom: 0.1em;
}
}
@media (max-width: 1100px) {
section.top-nav nav {
margin-top: 1em;
}
}
@media (max-width: 800px) {
section.top-nav nav {
margin-top: 1em;
}
}
.navbar-toggler {
position: absolute;
top: -1em;
}
.navbar-toggler-icon {
background-image: url(../images/iconfinder_menu.svg);
}
.home-link {
padding: 0 2.5em 0 0;
display: flex;
}
.home-link img {
max-width: 100%;
width: 100%;
}
@media (max-width: 991px) {
.home-link img {
margin-bottom: 1.5em;
}
}
.menu__item--level-0 {
position: relative;
}
@media (min-width: 991px) {
.menu__item--level-0:hover > .menu__item__submenu {
display: block;
}
}
.menu__item__submenu {
display: block;
width: unset;
min-width: unset;
position: unset;
background: unset;
padding: 0 20px;
border-radius: unset;
box-shadow: none;
z-index: unset;
}
@media (min-width: 991px) {
.menu__item__submenu {
display: none;
width: max-content;
min-width: 170px;
position: absolute;
top: 100%;
left: 0;
background: white;
padding: 10px 0;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
z-index: 501;
}
}
.menu__item__submenu .menu__item {
padding: 0;
}
@media (min-width: 991px) {
.menu__item__submenu .menu__item {
padding: 7px 7px;
}
}
section.top-nav.with-search .row {
align-items: center;
justify-content: flex-end;
position: relative;
}
section.top-nav.with-search .row .logo {
margin-right: auto;
}
section.top-nav.with-search .row #search-form-mobile {
display: block;
width: 80%;
padding-left: 10px;
margin-right: auto;
}
@media (min-width: 1200px) {
section.top-nav.with-search .row #search-form-mobile {
display: none;
}
}
section.top-nav.with-search .row #search-form-mobile #block-segm-views-block-search-block-1 .views-view--search--block-1__exposed {
margin-bottom: 0;
}
section.top-nav.with-search .row #search-form-mobile #block-segm-views-block-search-block-1 .views-view--search--block-1__exposed form {
justify-content: flex-start;
margin: 0;
}
@media (max-width: 400px) {
section.top-nav.with-search .row #search-form-mobile #block-segm-views-block-search-block-1 .views-view--search--block-1__exposed form input.form-autocomplete {
padding-right: 15px;
}
}
section.top-nav.with-search .row #nav-wrapper {
width: 100%;
min-width: 60px;
position: relative;
}
@media (min-width: 1200px) {
section.top-nav.with-search .row #nav-wrapper {
width: fit-content;
max-width: 75%;
}
}
section.top-nav.with-search .row #nav-wrapper #navbarNav {
align-items: baseline;
justify-content: flex-start;
}
@media (min-width: 992px) and (max-width: 1199px) {
section.top-nav.with-search .row #nav-wrapper #navbarNav {
margin-top: 40px;
column-gap: 10px;
}
}
@media (min-width: 1200px) {
section.top-nav.with-search .row #nav-wrapper #navbarNav {
justify-content: flex-end;
column-gap: 10px;
}
}
section.top-nav.with-search .row #nav-wrapper #navbarNav #block-segm-views-block-search-block-1 {
display: none;
}
@media (min-width: 1200px) {
section.top-nav.with-search .row #nav-wrapper #navbarNav #block-segm-views-block-search-block-1 {
display: block;
}
}
@media (max-width: 1199px) {
section.top-nav.with-search .row #nav-wrapper #navbarNav .additional-subscription-nav-button .segm-button {
margin-left: 0;
margin-right: 0;
}
}
section.top-nav.with-search .row #nav-wrapper .navbar-toggler {
--bs-navbar-toggler-padding-y: 0.25rem;
--bs-navbar-toggler-padding-x: 0.75rem;
--bs-navbar-toggler-font-size: 1.25rem;
--bs-navbar-toggler-border-color: transparent;
--bs-navbar-toggler-border-radius: 0.25rem;
--bs-navbar-toggler-focus-width: 0.25rem;
right: 10px;
top: -41px;
}
@media (min-width: 991px) and (max-width: 1199px) {
section.top-nav.with-search .row #nav-wrapper .navbar-toggler {
top: -51px;
}
}
@media print {
section.top-nav,
section.top-nav nav,
.menu,
.menu__item,
.menu__item__submenu {
display: none !important;
}
}
section.top-nav nav {
display: flex;
justify-content: space-between;
width: 100%;
}
section.top-nav nav a {
padding: 0 0.6em;
}
@media (min-width: 1200px) {
section.top-nav nav a {
padding: 0;
}
}
/*
* Flat CSS inherited from the pre-Drupal-10 theme. Everything still in this file was checked
* against the rendered DOM of every public page type, against the templates and JS, and against
* the body fields in the database on 2026-10-13; the rules that matched nothing anywhere were
* removed. What is left, and where it comes from:
*
* div-inline / but-sur templates/form/form-element--field-email-subs.html.twig
* home-intro templates/block/block--views-block--slogan-block-1.html.twig
* sm-1 templates/form/form-element--field-group.html.twig
* section-dark templates/block/block--views-block--v1/v3/v6-block-1.html.twig
* o-o-o editor markup, 3 paragraph bodies
* sup editor markup, 5 bodies
*/
div.div-inline1:after {
width: 47%;
border-bottom: 3px solid #0D8894;
content: " ";
display: block;
height: 1px;
margin: 0 auto 2em;
padding-bottom: 3.3em;
}
div.div-inline input {
display: inline;
}
label.but-sur {
display: inline-block;
background: #949494;
color: #fff;
font-size: 17px;
padding: 0.4em 0.4em;
margin: 0;
margin-left: 1.4em;
border-radius: 0.5em;
box-shadow: 0px 0 0 5px #fff, 0 0 0 10px #EBECEC;
border: none;
text-transform: uppercase;
font-weight: bolder;
line-height: 1em;
cursor: pointer;
}
section.home-intro {
border-bottom: 5px solid #0D8894;
background-image: url(../images/shadow-light.png), url(../images/intro-bg.png);
background-position: center top, center top;
background-repeat: no-repeat, no-repeat;
background-size: contain, cover;
color: #4D4D4D;
padding: 4em 0 2em;
}
section.home-intro p {
font-size: 31px;
font-weight: bolder;
font-family: Myriad;
}
table.sm-1 {
font-size: 80%;
}
table.sm-1 td {
box-sizing: border-box;
padding: 0.5em 1em;
}
table.sm-1 p {
font-size: 100%;
margin: 0;
line-height: 1.3em;
}
ol.o-o-o li {
margin-bottom: 0.5em;
}
ul.o-o-o li {
margin-bottom: 0.5em;
}
sup {
line-height: 1.5em;
display: block;
}
.section-dark {
background-color: #F6F6F6;
padding-top: 50px !important;
}
/*
* collection_col is a wrapper around each top-level collection.
* It has two children: collection_name and collection_hidden.
* When collection_name is clicked, it toggles the class "show" on itself.
* collection_hidden is then toggled via CSS sibling rules. Because of course.
*/
.collection_col {
padding: 0.5em 0;
}
.collection_col .collection_name {
font-size: 130%;
cursor: pointer;
color: #fff;
padding: 0.5em 0 0.5em 1em;
background-color: #0D8894;
margin: 0 0 1.5em 0;
font-weight: bold;
}
.collection_col .collection_name.ishid {
cursor: initial;
}
.collection_col .collection_name:before {
display: inline-block;
width: 1em;
height: 1em;
background-image: url(../images/close_o_w_1.svg);
content: "";
background-position: 0 83%;
background-repeat: no-repeat;
background-size: 80% 70%;
margin-right: 0.3em;
}
.collection_col .collection_name.ishid:before {
opacity: 0;
}
.collection_col .collection_name.show:before {
background-image: url(../images/close_i_w_1.svg);
background-position: 0 114%;
}
.collection_col .collection_hidden {
padding-left: 0;
}
.collection_col .collection_hidden a.subreadmore {
display: none;
}
.collection_col .collection_hidden .collection_items {
display: none;
transition: all 3s;
}
.collection_col .collection_name.show ~ .collection_hidden .collection_items {
display: block;
}
.collection_col .collection_hidden .sub_col {
display: none;
}
.collection_col .collection_name.show ~ .collection_hidden .sub_col {
display: block;
}
.collection_col .collection_hidden .sub_col ~ .collection_items {
display: none !important;
}
@media (max-width: 991px) {
.collection_col .collection_name {
font-size: 1.1rem;
}
}
@media (max-width: 400px) {
.sub_col .sub_name {
font-size: 1rem;
}
}
/* sub_name is the div which holds the sub-collection title, e.g. "Bone health complications" */
.sub_col .sub_name {
font-size: 124%;
cursor: pointer;
line-height: 1.7em;
font-weight: bold;
margin: 0.8em 0;
padding: 0.1em;
}
.sub_col .sub_name:before {
/* This puts the little down arrow before the sub-collection title "Bone health complications" */
display: inline-block;
width: 1em;
height: 1em;
background-image: url(../images/close_oo.svg);
content: "";
background-position: center 66%;
background-repeat: no-repeat;
background-size: 61% auto;
}
.sub_col .sub_name.show:before {
background-image: url(../images/close_io.svg);
background-position: 0 83%;
background-size: auto 61%;
}
.sub_col .sub_hidden {
display: none;
padding-left: 2em;
}
.sub_col > .sub_name.show ~ .sub_hidden {
display: block;
}
.bib_read_more {
color: #000;
float: right;
font-weight: lighter;
border-bottom: 1px solid;
line-height: 1.2em;
padding-bottom: 1px;
}
.bib_read_more .round {
display: inline-block;
padding: 1px;
margin-right: 0.5em;
border-radius: 50%;
border: 1px solid;
width: 1em;
text-align: center;
height: 1em;
line-height: 0.8em;
font-weight: bold;
}
.show .bib_read_more {
opacity: 1;
}
.bib_read_less {
font-weight: normal;
color: #000;
float: right;
display: none;
font-size: 100%;
cursor: pointer;
text-decoration: underline;
}
.items .ite_title.show .bib_read_more {
display: none;
}
.items .ite_title.show .bib_read_less {
float: right;
display: block;
font-size: 100%;
}
.items .ite_title.show ~ .hide_ite .bib_read_less {
display: block;
}
.read-more.rf {
display: none;
}
.read-more.rmf {
display: block;
}
.csl-bib-body, .csl-entry, .bib_read_more {
display: inline;
}
/*
* items should be called "item" - it's a wrapper for each individual item.
*/
.items {
margin: 0 0 0;
padding: 0.4em 1.5em 1.5em 1.5em;
display: flex;
flex-wrap: wrap;
}
.items:hover {
background: #f8f8f8;
}
.items a {
color: #222;
font-weight: lighter;
border-bottom: 1px solid;
padding-bottom: 1px;
position: relative;
}
.items a:hover {
text-decoration: none;
}
/* ite_title is a part of the wrapper around individual items.
* It's not just the title, but also contains the journal abstract, segm analysis and full text buttons
* The main other part is the the "hide_ite", a wrapper around all the parts that are hidden by default.
*/
.items .ite_title {
padding-bottom: 0.5em;
color: #000;
font-size: 115.5%;
display: inline-block;
width: calc(100% - 5.5em);
vertical-align: top;
margin-left: 1em;
box-sizing: border-box;
border-top: 1px solid #ddd;
padding-top: 0.3em;
}
.items_del .ite_title:before {
display: block;
width: 1em;
height: 1em;
background-image: url(../images/close_o.svg);
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: 80% auto;
position: absolute;
left: 2em;
}
.sub_hidden .items .ite_title::before {
left: 4em;
}
.items .ite_title.show:before {
background-image: url(../images/close_i.svg);
}
.items .hide_ite {
font-size: 1rem;
width: 100%;
padding-left: 6em;
display: none;
position: relative;
}
.items.segm_show .hide_ite {
display: block;
}
.items.journal_show .hide_ite {
display: block;
}
/*
* hidden_hiden is a div that holds the items that are hidden by default, that show up when you click more.
*/
.hidden_hiden {
display: none;
}
/*
* show34 is a class which is added to and removed from a collection_items div when you click more/fewer.
*/
.show34 .hidden_hiden {
display: block;
}
.show34 .read-more.rm {
display: none;
}
.show34 .read-more.rf {
display: block;
}
.show34 .read-more {
margin-bottom: 1.3em;
}
/*
* summay is a wrapper within the .col .col-segm, which is the "segm analysis" or "segm summary" concept.
* sum_item appears to be another wrapper within summay.
*/
.summay {
border-left: 1px solid #0D8894;
padding-left: 1em;
margin-left: 1em;
}
@media (max-width: 991px) {
.summay {
margin-left: 0;
}
}
.sum_item span.seg_color {
display: block;
font-size: 140%;
margin-top: 0.3em;
margin-bottom: 0.4em;
color: #0D8894;
font-weight: normal;
}
/*
* segm_analyse is a div which holds the segm analysis looking glass.
* its visibility is toggled on/off with the segm_en/segm_de
*/
.items .segm_analyse {
width: 3.5em;
padding: 0;
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
margin: 0em 1em 0 0;
min-height: 3.5em;
display: inline-block;
}
.items .segm_analyse.segm_en {
background-image: url(../images/segm_analysis.svg);
transition: transform 0.5s 0s;
}
.items .more-segm.segm_de {
display: none;
}
@media (max-width: 400px) {
.items .segm_analyse {
display: none;
}
}
/*
* more-jour is a div under ite_title which corresponds to the "Journal Abstract" button.
* It appears to use both the "segm_de" and the "journal_de" classes to toggle it.
* However, the only definition for segm_de applies exclusively to more-segm?
*/
.items .more-jour {
border: 2px solid #D9DADA;
display: inline-block;
width: max-content;
padding: 0.1em 0.3em 0.1em 1.5em;
border-radius: 0.3em;
margin-top: 0.9em;
font-size: 1rem;
margin-right: 0.9em;
cursor: pointer;
position: relative;
}
.items .more-jour:before {
content: " ";
width: 0.9em;
height: 0.9em;
display: block;
position: absolute;
left: 0.3em;
background-image: url(../images/ja_act.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
top: 0.4em;
}
.items.journal_show .more-jour:before {
transform: rotate(100grad);
}
.items .more-jour.journal_de {
cursor: inherit;
color: #D9DADA;
}
.items .more-jour.journal_de::before {
background-image: url(../images/ja_dis.svg);
}
/*
* more-freetext is the "Full Text" button.
* there's a definition for full_disable, but not full_disable despite that class being injected.
*/
.items .more-freetext {
border: 2px solid #D9DADA;
display: inline-block;
width: max-content;
padding: 0.1em 0.5em 0.1em 0.5em;
border-radius: 0.3em;
margin-top: 0.9em;
font-size: 1rem;
margin-right: 0.9em;
cursor: pointer;
position: relative;
}
.items .more-freetext.full_disable {
display: none;
}
/*
* more-segm is the "SEGM Analysis" button
*/
.items .more-segm {
border: 2px solid #D9DADA;
display: inline-block;
width: max-content;
padding: 0.1em 0.3em 0.1em 1.5em;
border-radius: 0.3em;
color: #0D8894;
margin-top: 0.9em;
font-size: 1rem;
cursor: pointer;
position: relative;
margin-right: 0.8em;
}
.items .more-segm:before {
content: " ";
width: 0.9em;
height: 0.9em;
display: block;
position: absolute;
left: 0.3em;
background-image: url(../images/sa_act.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
top: 0.4em;
}
.items.segm_show .more-segm:before {
transform: rotate(100grad);
}
.items.journal_show .hide_ite .col-abstr {
display: block;
}
.items .hide_ite .hide_atach {
display: none;
}
.items .hide_ite .hide-all {
position: absolute;
bottom: -0.9em;
right: 42.5%;
border: 2px solid #C3C4C4;
padding: 0.3em 2.6em 0.2em 2.6em;
font-size: 1.3rem;
border-radius: 0.3em;
cursor: pointer;
font-weight: bold;
}
@media (max-width: 991px) {
.items .hide_ite .hide-all {
font-size: 1rem;
}
}
.items .hide_ite .col-abstr {
display: none;
font-size: 1rem;
color: #000;
}
.items .hide_ite .col-segm {
display: block;
padding: 0;
min-width: 50%;
content: " ";
}
.items .hide_ite .col-segm.segm_dis {
display: none;
}
.items .hide_ite .col-segm p {
font-size: 1rem;
padding: 0;
margin: 0.6em 0;
line-height: 149%;
color: #000;
}
.items .hide_ite .col-segm li {
font-size: 1rem;
line-height: 149%;
}
.hide_ite .hide_atach {
padding-bottom: 0.5em;
}
.hide_ite .bibl {
padding-bottom: 0.5em;
font-style: italic;
}
.hide_ite .note {
display: flex;
padding-top: 0.6em;
clear: both;
padding-bottom: 3em;
}
.hide_ite .note .note-title {
display: block;
font-size: 140%;
margin-top: 0.3em;
margin-bottom: 0.4em;
}
.items .ite_title.show ~ .hide_ite {
display: block;
}
.items .ite_title.show ~ .hide_ite .col-abstr {
display: block;
color: #000;
margin-top: 0.2em;
margin-bottom: 0.4em;
}
.items .ite_title.show ~ .hide_ite .hide_atach {
display: block;
}
@media (max-width: 400px) {
.items .ite_title {
width: 100%;
margin: 0;
font-size: 1rem;
}
.items .hide_ite .col-segm {
width: 100%;
}
.items.segm_show .hide_ite {
padding: 0;
}
.hide_ite .note {
display: flex;
width: 100%;
flex-direction: column-reverse;
}
.items.journal_show .hide_ite {
padding: 0;
}
.items .hide_ite .col-segm p {
font-size: 1rem;
}
}
.items:hover .segm_analyse.segm_en, .items.journal_show .segm_analyse.segm_en, .items.segm_show .segm_analyse.segm_en {
transform: scale(1.8);
}
.zotero-collections > .views-field-name {
font-size: 130%;
cursor: pointer;
color: #fff;
padding: 0.5em 0 0.5em 1em;
background-color: #0D8894;
font-weight: bold;
margin: 0.5em 0 1.5em;
}
.zotero-collections > .views-field-name::before {
display: inline-block;
width: 1em;
height: 1em;
background-image: url(../images/close_o_w_1.svg);
background-position: 0 83%;
content: "";
background-repeat: no-repeat;
background-size: 80% 70%;
margin-right: 0.3em;
}
.zotero-collections > .views-field-name.active::before {
background-image: url(../images/close_i_w_1.svg);
background-position: 0 114%;
}
.zotero-collections ul {
list-style: none;
padding: 0;
margin: 0;
}
.zotero-collections ul li.hide {
display: none;
}
.zotero-collections ul li.show {
display: block;
margin-bottom: 0;
padding: 0.4em 1.5em 1.5em 1.5em;
}
.zotero-collections ul li::before {
all: unset !important;
}
.zotero-collections ul li > div {
display: flex;
align-items: start;
}
@media (max-width: 480px) {
.zotero-collections ul li > div {
padding: 0;
}
}
.zotero-collections ul li > div:hover .segm_analyse {
transform: scale(1.4);
}
.zotero-collections ul li > div .col-a {
flex: 0 0 10%;
max-width: 10%;
}
@media (max-width: 480px) {
.zotero-collections ul li > div .col-a {
max-width: 20%;
}
}
.zotero-collections ul li > div .col-a .segm_analyse {
background: url(../images/segm_analysis.svg) center left no-repeat;
background-size: 60% auto;
transition: transform 0.5s;
display: inline-block;
width: 80px;
min-height: 100px;
margin-top: 25px;
}
@media (min-width: 480px) {
.zotero-collections ul li > div .col-a .segm_analyse {
width: 70px;
}
}
@media (min-width: 767px) {
.zotero-collections ul li > div .col-a .segm_analyse {
width: 80px;
}
}
@media (min-width: 991px) {
.zotero-collections ul li > div .col-a .segm_analyse {
width: 100px;
}
}
@media (min-width: 1200px) {
.zotero-collections ul li > div .col-a .segm_analyse {
background-position-x: center;
}
}
.zotero-collections ul li > div .col-a .segm_analyse.hide {
background: unset;
}
.zotero-collections ul li > div .col-b {
flex-grow: 1;
font-size: 18px;
line-height: 28px;
border-top: 1px solid #ddd;
padding-top: 10px;
padding-right: 10px;
color: #000;
margin-left: 10px;
}
.zotero-collections ul li > div .col-b > a {
color: #000;
text-decoration: underline;
word-break: break-all;
}
.zotero-collections ul li > div .col-b .buttons .btn {
border: 2px solid #D9DADA;
display: inline-block;
width: max-content;
padding: 0.1em 0.3em 0.1em 1.5em;
border-radius: 0.3em;
margin-top: 0.9em;
font-size: 1rem;
margin-right: 0.9em;
cursor: pointer;
position: relative;
}
.zotero-collections ul li > div .col-b .buttons .btn::before {
content: " ";
width: 0.9em;
height: 0.9em;
display: block;
position: absolute;
left: 0.3em;
background-image: url(../images/ja_act.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
top: 0.4em;
}
.zotero-collections ul li > div .col-b .buttons .btn.journal {
color: #000;
}
.zotero-collections ul li > div .col-b .buttons .btn.analysis::before {
background-image: url(../images/sa_act.svg);
}
.zotero-collections ul li > div .col-b .buttons .btn.active::before {
transform: rotate(90deg);
transform-origin: center;
}
.zotero-collections ul li > div .col-b .buttons .btn.full-text {
padding: 0.1em 0.3em;
color: #000;
}
.zotero-collections ul li > div .col-b .buttons .btn.full-text::before {
all: unset !important;
}
.zotero-collections ul li > div .col-b .buttons .btn.disabled {
pointer-events: none;
opacity: 0.5;
cursor: default;
}
.zotero-collections ul li > div .col-b .buttons .zotero-btn:hover {
background: #0b6f77;
}
.zotero-collections ul li > div .col-b .hidden-section {
margin-top: 1em;
display: flex;
flex-direction: row;
gap: 30px;
font-size: 1rem;
color: #000;
}
@media (max-width: 480px) {
.zotero-collections ul li > div .col-b .hidden-section {
flex-wrap: wrap;
}
}
.zotero-collections ul li > div .col-b .hidden-section > div {
display: none;
font-size: 1rem;
color: #000;
line-height: 24px;
}
.zotero-collections ul li > div .col-b .hidden-section > div .note-title {
display: block;
font-size: 140%;
margin-top: 0.3em;
margin-bottom: 0.4em;
}
.zotero-collections ul li > div .col-b .hidden-section > div .note-title-segm {
display: block;
font-size: 140%;
margin-top: 0.3em;
margin-bottom: 0.4em;
color: #0D8894;
font-weight: normal;
}
.zotero-collections ul li > div .col-b .hidden-section > div p {
font-size: 1rem;
line-height: 28px;
color: #000;
padding: 0;
margin: 0.6em 0;
}
.zotero-collections ul li > div .col-b .hidden-section > div a {
color: #000;
text-decoration: underline;
}
.zotero-collections ul li > div .col-b .hidden-section > div.show ~ .show {
position: relative;
}
.zotero-collections ul li > div .col-b .hidden-section > div.show ~ .show::after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: -15px;
width: 1px;
background: #0D8894;
}
@media (max-width: 480px) {
.zotero-collections ul li > div .col-b .hidden-section > div.show ~ .show::after {
background: unset;
}
}
.zotero-collections ul li > div .col-b .hidden-section > div.show {
display: unset;
flex-grow: 1;
flex-basis: 50%;
line-height: 28px;
}
.zotero-collections ul li > div .col-b .hidden-section > div ul {
margin-left: 2rem;
}
.zotero-collections ul li > div .col-b .hidden-section > div ul li {
position: relative;
font-size: 1rem;
line-height: 24px;
color: #000;
}
.zotero-collections ul li > div .col-b .hidden-section > div ul li ::before {
content: " ";
display: inline-block;
width: 0.5em;
height: 0.7em;
position: absolute;
background-image: url(/themes/segm/images/disc.svg);
left: -1.1em;
background-size: contain;
background-repeat: no-repeat;
top: 0.7em;
}
.zotero-collections .zotero-list-toggle {
width: max-content;
display: block;
color: #0d8894;
font-weight: bold;
margin: 1.4em auto;
text-transform: capitalize;
border: 1px solid #0d8894;
background: none;
padding: 0em 0.6em;
line-height: 2.3em;
border-radius: 0.3em;
cursor: pointer;
font-size: 130%;
}
.zotero-collections .zotero-list-toggle:hover {
background: #0d8894;
color: #fff;
}
.zotero-items.hide {
display: none;
}
.zotero-items.show {
display: block;
}
.zotero-sub-items .views-element-container {
padding-bottom: 5px;
}
.zotero-sub-items.hide {
display: none;
}
.zotero-sub-items .views-field-name {
font-size: 124%;
cursor: pointer;
line-height: 1.7em;
font-weight: bold;
margin: 0.8em 0;
padding: 0.1em;
}
.zotero-sub-items .views-field-name::before {
display: inline-block;
width: 1em;
height: 1em;
background-image: url(../images/close_oo.svg);
content: "";
background-position: center 66%;
background-repeat: no-repeat;
background-size: 61% auto;
}
.zotero-sub-items .views-field-name.active::before {
transform: rotate(90deg);
transform-origin: center;
}
.zotero-sub-items .views-field-nothing.hide {
display: none;
}
.zotero-sub-items .views-field-nothing.show {
display: unset;
}
.zotero-redirect-selected-item > div {
background-color: #D8EFEB;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media (min-width: 1400px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
max-width: 1140px;
}
}
em.placeholder {
display: inline;
min-height: 0;
vertical-align: baseline;
cursor: inherit;
background-color: transparent;
opacity: 1;
}
.description div:not(.tts-player),
.description p {
font-size: 17px;
font-weight: 400;
line-height: 30px;
color: #4d4d4d;
margin-bottom: 0;
}
@media (min-width: 991px) {
.description div:not(.tts-player),
.description p {
font-size: 19px;
}
}
.description--full p:not(:last-child) {
margin-bottom: 15px;
}
.description--full--spotlight p:not(:last-child) {
margin-bottom: 20px;
}
.description--full h2 {
margin-top: 40px;
margin-bottom: 10px;
}
.description--lead {
font-size: 19px;
font-weight: 600;
}
@media (min-width: 991px) {
.description--lead {
font-size: 21px;
}
}
.description--teaser div,
.description--teaser p {
font-size: 16px;
}
@media (min-width: 991px) {
.description--teaser div,
.description--teaser p {
font-size: 18px;
}
}
.description--matched-fragments div {
font-size: 15px;
}
@media (min-width: 991px) {
.description--matched-fragments div {
font-size: 17px;
}
}
.description--matched-fragments .description--matched-fragments__title {
font-weight: bold;
}
.wrapper img {
max-width: 100%;
height: auto;
}
.page-title,
.page-title h1,
h1.page-title {
color: #0d8894;
font-size: 34px;
font-weight: bold;
}
@media (min-width: 767px) {
.page-title,
.page-title h1,
h1.page-title {
font-size: 36px;
}
}
@media (min-width: 991px) {
.page-title,
.page-title h1,
h1.page-title {
font-size: 40px;
}
}
.pager__items .curren-page {
color: #4d4d4d;
}
#block-segm-our-response {
margin-right: auto;
}
#block-segm-our-response .without-cme {
margin-left: 10px;
}
@media (min-width: 991px) {
#block-segm-our-response .without-cme {
margin-left: 155px;
}
}
@media (min-width: 1200px) {
#block-segm-our-response .without-cme {
margin-left: 55px;
}
}
.search-api-autocomplete-search {
z-index: 1100;
}
#block-segm-secondary-local-tasks ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 10px;
list-style: none;
margin: 0;
padding: 10px;
}
#views-exposed-form-search-block-1 {
display: flex;
flex-flow: row nowrap;
gap: 10px;
justify-content: center;
align-items: baseline;
margin-bottom: 20px;
}
table td:not(:last-child) {
border-right: 1px solid #dee2e6;
}
body {
overflow-x: clip;
}
.drupal-messages {
width: 100%;
margin-bottom: 20px;
}
.drupal-messages__container__items {
width: 100%;
padding: 6px 12px;
}
.drupal-messages__container__items:not(:first-child) {
margin-bottom: 5px;
}
.drupal-messages__container__items--alert {
border: 2px solid #c62828;
background-color: #fdecec;
}
.drupal-messages__container__items--status {
border: 2px solid #238c31;
background-color: #e7f5e1;
}
.drupal-messages__container__items p.drupal-messages__container__items__item, .drupal-messages__container__items__item {
margin-bottom: 0;
font-size: 16px;
color: #4d4d4d;
}
.drupal-messages__container__items p.drupal-messages__container__items__item:not(:last-child), .drupal-messages__container__items__item:not(:last-child) {
margin-bottom: 5px;
}
.drupal-messages__container__items .placeholder {
background: none;
font-weight: 600;
}
.drupal-messages__container__items .placeholder a {
color: #0a6a73;
text-decoration: underline;
}
.additional-subscription-nav-button {
margin-bottom: 20px;
}
@media (min-width: 1200px) {
.additional-subscription-nav-button {
margin-bottom: 0;
}
}
@media print {
section.top-nav,
nav,
.menu,
.navbar,
[role=navigation],
.page-menu {
display: none !important;
}
.region--sidebar,
.region--sidebar-first,
.region--sidebar-second,
.sidebar,
[role=complementary] {
display: none !important;
}
.node__actions,
.node-actions,
.node__links,
[class*=metadata],
.views-field-edit-node,
.views-field-delete-node,
#block-segm-secondary-local-tasks {
display: none !important;
}
footer,
.region--footer {
display: none !important;
}
.region--sticky {
display: none !important;
}
.drupal-messages {
display: none !important;
}
#views-exposed-form-search-block-1 {
display: none !important;
}
body {
background: white;
}
.wrapper,
.wrp {
background: white;
margin: 0;
padding: 0;
}
.container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
body,
body * {
color: black;
text-shadow: none;
}
[class*=header],
[class*=title],
[class*=section] {
background: transparent !important;
}
.page-title,
.page-title h1,
h1.page-title {
page-break-after: avoid;
margin-bottom: 20px;
}
img {
max-width: 100%;
height: auto;
page-break-inside: avoid;
}
section {
page-break-inside: avoid;
}
[class*=button],
[class*=bar],
[class*=box] {
box-shadow: none !important;
border: none !important;
}
}
.paragraph-anchor {
scroll-margin-top: -50px;
}
.header-box {
--header-box--color-a: #0D8894;
--header-box--color-b: #FFFFFF;
--header-box--color-c: #F97253;
--header-box--color-d: #F97253;
padding: 20px;
background-color: var(--header-box--color-a);
}
.header-box--with-aside {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
@media (min-width: 767px) {
.header-box--with-aside {
flex-direction: row;
}
}
.header-box--with-aside .header-box__content {
text-align: center;
}
.header-box__content {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: 32px;
padding: 10px;
}
.header-box__title {
width: 100%;
font-size: 32px;
font-weight: bold;
letter-spacing: 0;
line-height: 125%;
color: var(--header-box--color-b);
}
@media (min-width: 767px) {
.header-box__title {
font-size: 34px;
}
}
@media (min-width: 991px) {
.header-box__title {
font-size: 36px;
}
}
.header-box__subtitle {
width: 100%;
font-size: 26px;
font-weight: 600;
letter-spacing: 0;
line-height: 100%;
color: var(--header-box--color-b);
}
@media (min-width: 767px) {
.header-box__subtitle {
font-size: 28px;
}
}
@media (min-width: 991px) {
.header-box__subtitle {
font-size: 30px;
}
}
.header-box__description {
width: 100%;
color: var(--header-box--color-b);
}
.header-box__description div:not(.tts-player),
.header-box__description p {
margin-bottom: 0;
font-size: 17px;
font-weight: 400;
line-height: 30px;
color: var(--header-box--color-b);
}
@media (min-width: 991px) {
.header-box__description div:not(.tts-player),
.header-box__description p {
font-size: 19px;
}
}
.header-box .header-box__description a:not(.segm-button) {
color: #9FD6D6;
}
.header-box__buttons {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: baseline;
gap: 24px;
width: 100%;
margin-top: 8px;
}
.header-box__button {
display: block;
max-width: fit-content;
margin: auto;
padding: 8px 20px;
border-radius: 35px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
color: var(--header-box--color-b);
transition: all 0.2s ease-in-out;
}
@media (min-width: 991px) {
.header-box__button {
font-size: 17px;
}
}
.header-box__button:hover {
filter: brightness(0.8);
text-decoration: none;
color: var(--header-box--color-b);
}
.header-box__button--primary {
background-color: var(--header-box--color-c);
}
.header-box__button--secondary {
background-color: var(--header-box--color-d);
}
.header-box__button--bordered {
border: 1px solid var(--header-box--color-b);
}
.header-box__media {
margin-top: 24px;
}
.header-box__image img {
max-width: 100%;
height: auto;
}
.header-box__image--desktop {
display: none;
}
@media (min-width: 991px) {
.header-box__image--desktop {
display: block;
}
}
.header-box__image--mobile {
display: block;
}
@media (min-width: 991px) {
.header-box__image--mobile {
display: none;
}
}
.header-box__aside {
flex-shrink: 0;
max-width: 100%;
padding: 20px;
background: #FFFFFF;
}
@media (min-width: 767px) {
.header-box__aside {
max-width: 30%;
min-width: 300px;
}
}
.header-box__aside h1, .header-box__aside h2, .header-box__aside h3, .header-box__aside h4, .header-box__aside h5, .header-box__aside h6 {
font-weight: bold;
}
.header-box__aside p:last-child {
margin: 0;
}
.header-box__aside-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
border-radius: 12px;
background-color: #EAF6F5;
color: var(--header-box--color-a);
}
.header-box--course {
padding: 0;
}
.header-box__bar {
padding: 16px 26px;
font-size: 20px;
font-weight: bold;
line-height: 1.3;
color: var(--header-box--color-b);
}
@media (min-width: 991px) {
.header-box__bar {
padding: 20px 32px;
font-size: 24px;
}
}
.header-box__hero {
display: grid;
grid-template-columns: 1fr;
background-color: #D8EFEB;
}
@media (min-width: 991px) {
.header-box__hero {
min-height: 300px;
}
.header-box__hero > * {
grid-area: 1/1;
}
}
.header-box__hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
padding: 24px;
}
@media (min-width: 991px) {
.header-box__hero-copy {
position: relative;
z-index: 1;
width: 55%;
padding: 70px 32px 32px;
}
}
.header-box__hero-title {
max-width: unset;
margin: 0;
font-size: 26px;
font-weight: bold;
line-height: 1.5;
color: #353535;
}
@media (min-width: 765px) {
.header-box__hero-title {
font-size: 28px;
}
}
@media (min-width: 991px) {
.header-box__hero-title {
max-width: 410px;
font-size: 36px;
}
}
@media (min-width: 1200px) {
.header-box__hero-title {
max-width: 550px;
font-size: 42px;
}
}
.header-box__hero-credit,
.header-box__hero-credit p,
.header-box__hero-credit div {
margin: 0;
font-size: 16px;
font-weight: bold;
transform: skewX(-6deg);
color: #353535;
}
.header-box__hero-media {
position: relative;
overflow: hidden;
}
.header-box__hero-media .media,
.header-box__hero-media .field,
.header-box__hero-media .field__items,
.header-box__hero-media .field__item,
.header-box__hero-media picture {
display: block;
width: 100%;
height: 100%;
}
.header-box__hero-media img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (min-width: 991px) {
.header-box__hero-media img {
position: absolute;
inset: 0;
min-height: 100%;
object-position: right center;
}
}
.header-box__hero-image {
height: 100%;
}
.header-box__hero-image--desktop {
display: none;
}
@media (min-width: 991px) {
.header-box__hero-image--desktop {
display: block;
}
}
@media (min-width: 991px) {
.header-box__hero-image--mobile {
display: none;
}
}
.node__paragraphs .field__items {
display: flex;
flex-flow: column nowrap;
gap: 56px;
margin-top: 56px;
}
.node__header {
margin-bottom: 30px;
}
.node__header .page-title {
margin: 0;
}
.node__header .pager-title h1 {
margin: 0;
}
.node__content__separator {
width: 100vw;
margin-left: 50%;
margin-bottom: 50px;
margin-top: 0;
transform: translateX(-50%);
height: 5px;
background-color: #0d8894;
border: none;
}
/*# sourceMappingURL=main.css.map */