/**
 * @file
 * Presentational styles for Drupal vlizbase theme layout.
 *
 * It is left empty for testing purposes.
 *
 * @see https://www.drupal.org/project/drupal/issues/2349711
 */

 *,
 *::before,
 *::after {
	 box-sizing: border-box;
 }

:focus {
	outline: 3px solid var(--second-bg-color) !important;
	outline-offset:2px !important;
}

:root {
	 --ff-body: 'Montserrat', sans-serif;
	 --fw-body: 100;
	 --fw-bold: 800;
	 --fw-title: 400;
	 --fw-number: 800;
	 --fs-body: clamp(1rem, 2vw, 1.1875rem);
	 --fs-h1: clamp(1.8rem, 2vw, 2.0625rem);
	 --fs-h2: clamp(1.6rem, 2vw, 1.8125rem);
	 --fs-h3: clamp(1.4rem, 2vw, 1.5625rem);
	 --fs-h4: clamp(1.2rem, 2vw, 1.375rem);
	 --fs-h5: clamp(1.1rem, 2vw, 1.25rem);
	 --fs-h6: clamp(1.05rem, 2vw, 1.2rem);
	 --bg-transparency: 0.9;
 
	 --main-bg-color-base: 255, 255, 255;
	 --main-color-base: 68, 68, 68;
	 --main-bg-color: rgb(var(--main-bg-color-base));
	 --main-color: rgb(var(--main-color-base));
 
	 --second-bg-color-base: 8, 7, 70;
	 --second-color-base: 255, 123, 0;
	 --second-bg-color: rgb(var(--second-bg-color-base));
	 --second-color: rgb(var(--second-color-base));
 
	 --third-bg-color-base: 61, 60, 56;
	 --third-color-base: 145, 228, 242;
	 --third-bg-color: rgb(var(--third-bg-color-base));
	 --third-color: rgb(var(--third-color-base));
 
	 --gradient-bg-color: linear-gradient(45deg, var(--second-bg-color), var(--main-bg-color));
 
	 --light-color-base: 241, 241, 241;
	 --light-color: rgb(var(--light-color-base)) !important;
	
	 --dark-color-base: 68, 68, 68;
	 --dark-color: rgb(var(--dark-color-base)) !important;
 
}
 

 :root.dark-mode{
	--main-bg-color-base: 61, 67, 81;
	--main-color-base: 208, 205, 213;

	--second-bg-color-base: 86, 92, 132;
	--second-color-base: 255, 123, 0;

	--third-bg-color-base: 165, 0, 63;
	--third-color-base: 56, 205, 231;

}


:root.contrast-mode {
	--main-bg-color-base: 255, 255, 255;
	--main-color-base: 0, 0, 0;

	--second-bg-color-base: var(--main-bg-color)-base;
	--second-color-base: var(--main-color-base);

	--third-bg-color-base: var(--main-bg-color-base);
	--third-color-base: var(--main-color-base);

	--gradient-bg-color: var(--main-bg-color);
	--bg-transparency:1;
}


:root.contrast-mode.dark-mode {
	--main-bg-color-base: 0, 0, 0;
	--main-color-base: 255, 255, 255;

	--second-bg-color-base: var(--main-bg-color-base);
	--second-color-base: var(--main-color-base);

	--third-bg-color-base: var(--main-bg-color-base);
	--third-color-base: var(--main-color-base);

	--gradient-bg-color: var(--main-bg-color);
	--bg-transparency:1;
}


@media print and (not(color)) {
	 body,
	 body * {
		 background-color: none;
		 filter: grayscale();
	 }
}

@media print {
	#sliding-popup {
	   display:none;
	}
}


 @media only screen and (max-width: 1200px) {
 
	 .text-long.field-summary,
	 #block-vlizbase-page-title,
	 .field-location,
	 .field-date-range,
	 .w1200,
	 .paragraph--type--text,
	 .paragraph--type--block,
	 .paragraph--type--table,
	 .paragraph--type--cluster-of-figures {
		 padding: 0 21px !important;
	 }
	/* center the logo for small devices */
	#header .section {
		text-align: center;
	}
 }
 
 ::selection {
	 background:  var(--main-color);
	 color:  var(--main-bg-color);
 }
 
 html {
	 overflow-y: scroll;
	 /*-----------------always show scrollbar---------------------*/
	 box-sizing: border-box;
	 scrollbar-color: var(--main-color) #fff;
	 scroll-behavior: smooth;
 }
 
 body {
	 padding: 0px !important;
	 margin: 0px !important;
	 color: var(--main-color);
	 font-family: var(--ff-body);
	 font-size: var(--fs-body);
	 font-weight: var(--fw-body);
	 background-color: var(--main-bg-color);
	 overflow-y: scroll;
	 text-rendering: optimizeLegibility;
 }
 
 .skip-to-main-content-link {
	 position: absolute;
	 left: -9999px;
	 z-index: 999;
	 padding: 1em;
	 background-color: black;
	 color: white;
	 opacity: 0;
 }
 
 .skip-to-main-content-link:focus {
	 left: 50%;
	 transform: translateX(-50%);
	 opacity: 1;
 }
 
 #header {
	 width: 100%;
	 z-index: 9999;
	 padding: 0;
	 margin: 0 auto;
 }
 
 #header * {
	 box-sizing: initial !important;
 }
 
 #header #logo {
	 background-position: center center;
	 background-repeat: no-repeat;
	 background-size: 77px;
	 background-image: url("../images/logo_particlesineurope.webp_v=202407");
	 width: 90px;
	 height: 90px;
	 display: inline-block;
	 overflow: hidden;
	 margin-top: 10px;
 }
 
 #header .section {
	 background-color: var(--main-bg-color);
	 max-width: 1700px;
	 margin: 0 auto;
 }
 
 #header .inner {
	 display: inline-flex;
	 align-items: center;
	 vertical-align: top;
	 height: 120px;
 }
 
 #topmenu {
	 margin: 0 auto;
	 position: relative;
	 padding: 14px;
 }
 
 #topmenu a.sf-depth-1,
 #topmenu .sf-depth-1 .sf-depth-1 {
	 padding: 0 21px;
	 font-size: 1.1875rem;
	 text-transform: uppercase;
	 color: var(--second-color);
 }
 
 #main-content {
	 overflow: hidden;
	 margin: 0px auto;
	 min-height: calc(100vh - 29px);
	 /*keep footer at the bottom of the page if its shorter than 100% view height*/
 }
 
 #main-content a:not(.button, .leaflet-container *, .tagfilter *) {
	 text-decoration: underline var(--second-bg-color);
	 color: var(--second-color);
 }
 
 #main-content a:hover {
	 background-size: 100% 3px;
	 color: inherit;
	 color: var(--second-color);
 }
 
 #block-vlizbase-page-title,
 article .paragraph--type--text,
 article .paragraph--type--twitter,
 .tabs.primary,
 .w1200,
 .page-system .highlighted,
 #block-poster,
 .webform-submission-form,
 #block-views-block-calendar-block-2,
 #user-login-form,
#user-pass,
 .webform-confirmation {
	 max-width: 1200px;
	 margin: 0 auto;
 }
 
 #block-vlizbase-page-title h1 {
	 border-bottom: 1px solid var(--third-color);
	 margin: 4% 0;
	 padding: 14px 0px;
 }
 
 
 /*------------------*/
 
 footer.site-footer {
	 -webkit-box-shadow: 0px -5px 7px -8px rgba(0, 0, 0, 0.75);
	 -moz-box-shadow: 0px -5px 7px -8px rgba(0, 0, 0, 0.75);
	 box-shadow: 0px -5px 7px -8px rgba(0, 0, 0, 0.75);
	 background-color: var(--second-bg-color);
	 color: var(--second-color);
 }
 
 footer.site-footer .layout-container {
	 width: 100%;
	 padding: 35px 0;
 }
 
 footer .site-footer__top {
	 display: flex;
	 justify-content: space-evenly;
	 align-items: center;
	 max-width: 1400px;
	 margin: 0 auto;
	 flex-wrap: wrap;
	 margin-bottom: 35px;
	 padding: 0 3%;
 }
 
 footer .site-footer__bottom {
	 text-align: center;
 }
 
 footer.site-footer p {
	 margin: 0px !important;
 }
 
 nav#block-footer ul {
	 list-style: none;
	 padding: 0;
	 font-size: 1.3125rem;
 }
 
 nav#block-footer ul a {
	 text-decoration: none;
 }
 
 .feed-icon::before {
	 vertical-align: -90%;
	 content: url(../images/rss.png);
 }
 
 video:not(.bgvideo),
 img:not(picture img) {
	 max-width: 100%;
	 height: auto;
 }
 
 @keyframes zoomin {
	 0% {
		 -webkit-transform: scale(1);
	 }
 
	 50% {
		 -webkit-transform: scale(1.2);
	 }
 
	 100% {
		 -webkit-transform: scale(1);
	 }
 
 }
 
 /*----------calendar----------------*/
 .flex.calendarblock .rows {
	 display: flex;
	 flex-wrap: wrap;
	 flex-direction: row;
	 align-items: stretch;
	 justify-content: center;
 }
 
 .calendarblock .views-container {
	 margin: 0 auto;
 }
 
 .calendarblock footer {
	 width: 100%;
	 margin: 0 auto;
	 text-align: center;
 }
 
 .calendarblock footer a {
	 margin: 14px;
 }
 
 .calendarblock .views-row {
	 background: var(--main-bg-color);
	 color: var(--main-color);
	 padding: 42px;
	 text-align: center;
	 max-width: 370px;
	 margin: 21px;
 }
 
 .calendarblock .views-row .button {
	 margin-top: 35px;
 }
 
 .calendarblock .views-row time:nth-of-type(2),
 .calendarpage .views-row .views-field-field-date-range-1 time:nth-of-type(2) {
	 display: none;
 }
 
 .calendarblock blockquote {
	 margin: 0 auto;
	 display: block;
	 color: #fff;
	 text-shadow: 3px 2px 3px #000;
	 font-size: 2rem;
	 margin-bottom: 2rem;
 }
 
 .calendarpage .views-row {
	 clear: both;
	 padding-top: 4rem;
 }
 
 .calendarpage .views-row .views-field-field-date-range {
	 margin: 14px 0;
 }
 
 .page-node-calendar_item .field-date-range::before,
 .calendarpage .views-row .views-field-field-date-range::before {
	 font-family: "Font Awesome 6 Free";
	 font-weight: 900;
	 content: "\f073";
	 display: inline-block;
	 font-style: normal;
	 font-variant: normal;
	 text-rendering: auto;
	 -webkit-font-smoothing: antialiased;
	 padding-right: 7px;
	 float: left;
	 color: var(--third-color);
 }
 
 .page-node-calendar_item .field-location::before,
 .calendarpage .views-row .views-field-field-location::before {
	 font-family: "Font Awesome 6 Free";
	 font-weight: 900;
	 content: "\f5a0";
	 display: inline-block;
	 font-style: normal;
	 font-variant: normal;
	 text-rendering: auto;
	 -webkit-font-smoothing: antialiased;
	 padding-right: 7px;
	 float: left;
	 color: var(--second-color);
 }
 
 .calendarpage .views-row .views-field-field-location .field-content {
	 padding-left: 30px;
 }
 
 .calendarpage .views-row .views-field-view-node.small.button {
	 margin-top: 49px;
 }
 
 #block-views-block-calendar-block-2>h2 {
	 border-bottom: 1px solid var(--third-color);
 }
 
 .calendarpastblock .views-row {
	 clear: both;
	 padding-top: 4rem;
 }
 
 .page-node-calendar_item #block-vlizbase-content,
 .page-node-news_item #block-vlizbase-content {
	 max-width: 1200px;
	 margin: 0 auto;
 }
 
 .page-node-calendar_item .paragraph {
	 clear: none !important;
	 padding-left: 0;
 }
 
 .page-node-calendar_item .field-location {
	 float: left;
	 margin-right: 14px;
 }
 
 .page-node-calendar_item .field-summary {
	 padding-top: 21px;
	 clear: both;
 }
 
 .page-node-calendar_item .field-location .field-content {
	 padding-left: 30px;
 }
 
 #block-views-block-calendar-block-2 {
	 margin: 105px auto 0 auto;
 }
 
 /*---------------news------------------*/
 
 .newspage .date .field-content {
	 border: none;
	 display: inline-block;
	 text-transform: uppercase;
	 text-decoration: none;
	 letter-spacing: 1px;
	 outline: none;
	 position: relative;
	 padding: 2px 7px !important;
	 overflow: hidden;
	 height: auto;
	 width: auto;
	 color: var(--main-color);
 }
 
 .newspage .views-row {
	 clear: both;
	 padding-top: 4rem;
 }
 
 .newspage .feed-icon {
	 float: right;
 }
 
 .newsblock .rows {
	 display: flex;
 }
 
 .newsblock .views-row {
	 background: var(--main-bg-color);
	 color: var(--main-color);
	 padding: 70px 42px;
	 margin: 21px;
 }
 
 .newsblock .views-field-field-social-share-image {
	 text-align: center;
 }
 
 .newsblock .views-field-field-social-share-image img {
	 border-radius: 100%;
	 border: 1px solid var(--main-color);
	 padding: 14px;
 }
 
 /*-------------publications----------------*/
 
 .carousel .slick-slide>div,
 .publications-page-carousel .slick-slide>div,
 .latest-container {
	 border: 1px solid var(--main-color);
	 background-color: var(--main-bg-color);
	 border-radius: 25px;
	 box-shadow: -2px 1px 7px -2px rgba(55, 55, 55, 0.39);
	 margin: 0 14px;
	 text-align: center;
	 min-height: 350px;
 }
 
 .carousel .slick-slide .string.field-title,
 .publications-page-carousel .slick-slide .views-field-title {
	 margin: 21px 42px;
 }
 
 .publications-page-carousel .slick-dots li button::before,
 .carousel .slick-dots li button::before {
	 font-size: 0.625rem;
 }
 
 .publications-page-carousel .views-container {
	 background-color: transparent;
	 min-height: 500px;
	 padding: 35px 0;
 }
 
 .publications-page-carousel .views-container:nth-child(odd) {
	 background-color: var(--second-bg-color);
 }
 
 .publications-page-carousel .slick-dots {
	 position: relative;
	 bottom: 0px;
 }
 
 .publications-page-carousel .views-title-rows-container {
	 max-width: 1200px;
	 margin: 0 auto;
 }
 
 .publications-page-carousel .slick-list.draggable {
	 text-align: center;
 }
 
 .publications-page-carousel .views-row {
	 text-align: center;
	 display: flex !important;
	 flex-flow: column nowrap;
	 padding-bottom: 21px;
 }
 
 .publications-page-carousel .views-field-field-summary {
	 padding: 0px 14px;
 }
 
 .publications-page-carousel h3.views-title {
	 margin-bottom: 49px;
 }
 
 .publications-page-carousel .views-container:nth-child(odd) h3.views-title {
	 color: #000;
 }
 
 .publications-page-carousel .feed-icon {
	 max-width: 1200px;
	 display: block;
	 margin: 0 auto;
	 text-align: right;
 }
 
 /*--------------newsletter-------------*/
 
 #sendinblue {
	 max-width: 100vw;
 }
 
 form img {
	 background-color: #fff;
 }
 
 /*------------EO newsletter------------*/
 
 .latestgrid {
	 display: grid;
	 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	 grid-template-rows: 1fr;
	 grid-column-gap: 14px;
	 grid-row-gap: 14px;
 }
 
 .latestgrid .latest-container {
	 padding: 0 14px;
 }
 
 
 .page-node-publication article {
	 max-width: 1200px;
	 margin: 0 auto;
	 text-align: center;
 }

/* ----------------accessibility ---------------- */

.accessibility-container {
	background-color: var(--second-bg-color);
	right: 14px;
	top:14px;
	position: fixed;
	padding: .5rem;
	border-radius: 99999px;
	color: var(--second-color);
	z-index: 78888888;
}

.accessibility-container > * {
	padding: 7px;
}

.prefers-icon::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.prefers-icon:hover::before {
	transform: scale(1.1); /* scale the pseudo-element on hover */
}

/*--------------- dark light mode ---------------*/

.prefers-color-scheme-toggle-icon::before {
	content: "\f186";
}

.dark-mode .prefers-color-scheme-toggle-icon::before {
	content: "\f185";
}

.prefers-contrast-icon::before {
	content: "\f042";
}

.contrast-mode.prefers-contrast-icon::before {
	transform: rotate(-90deg);
}