/**
 * @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;
}

:root {
--ff-body: 'Roboto', sans-serif;
--fw-body: 100;
--fw-bold: 800;
--fw-title: 400;
--fw-number: 800;

--main-color:#022388;
--dark-color:#444;
--second-color:#fc751a;
--third-color:#03e3f9;

--main-bg-color: #fff;
--second-bg-color:#f3f4fa;
--third-bg-color:#adceed;
--clr-gradient:linear-gradient(45deg, var(--third-color) , var(--main-color));

}

@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #3D4351;
--second-bg-color:#565c84;
--third-bg-color:#adceed;

--main-color:#fff;
--dark-color:#444;
--second-color:#959595;
--third-color:#fff200;
}
#block-sociallinks img {
/* filter: brightness(100); */
}
#header #logo {
background-image: url("../images/logo_negative.png?v=2024march") !important;
}
#superfish-main-accordion {
background: rgba(61,67,81,0.9) !important;
}
}

@media only screen and (max-width: 1200px) {
.text-long.field-summary,
#block-vlizbase-page-title,
.paragraph--type--text,
.field-location,
.field-date-range,
.w1200 {
padding: 0 21px !important;
}
}

::selection {
background: #f79448;
color: #000;
}


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: 20px/28px "Roboto",Arial,sans-serif;
font-weight:var(--fw-body);
background-color: var(--main-bg-color);
}

#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: 201px;
background-image: url("../images/logo.png?v=2024march");
width: 255px;
height: 104px;
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;
}

#header .inner #topmenu .language-switcher-language-url ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#header .inner #topmenu .language-switcher-language-url ul li {
  display: inline-block;
  margin-left: 2rem;
}

#header .inner #topmenu .language-switcher-language-url ul li a{
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

#header .inner #topmenu .language-switcher-language-url ul li a.is-active{
  text-decoration: underline;
  font-weight: 700;
}


#topmenu {
margin: 0 auto;
position: relative;
/* background:rgba(255, 255, 255, 0.7); */
padding:14px;
}

article a,
form a,
#topmenu a,
nav#block-footer * {
color: var(--main-color);
}

#topmenu a.sf-depth-1,
#topmenu .sf-depth-1 .sf-depth-1 {
padding: 0 21px;
font-size:19px;
text-transform: uppercase;
}

#main-wrapper {
overflow: hidden;
margin: 0px auto;
min-height: calc(100vh - 411px); /*keepfooter at the bottom if page is short pieterm*/
}

#main-wrapper a:not(.button) {
text-decoration: none;
color:var(--third-color);
}

#main-wrapper 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,
#user-login-form,
#user-pass,
.page-system .highlighted,
#block-poster,
.webform-submission-form,
#block-views-block-calendar-block-2,
.node--type-imis_filter_page #block-vlizbase-content {
max-width:1200px;
margin: 0 auto;
}

ul.primary li a{
background-color: var(--second-bg-color) !important;
}

#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);
}

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: 1200px;
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: 21px;
}

nav#block-footer ul a {
text-decoration: none;
}

.feed-icon::before {
vertical-align: -90%;
content: url(../images/rss.png);
}

video,
img:not(picture img) {
max-width:100%;
height:auto;
}

@-webkit-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: 4rem;
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 article > div > .image { */
/* float: left; */
/* margin-right:21px; */
/* } */

/* .page-node-calendar_item article > div > .image img{ */
/* box-shadow: 8px 8px 8px #888; */
/* } */

.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 .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 {
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 35px;
text-align: center;
min-height: 350px;
}

.carousel .slick-slide .string.field-title,
.publications-page-carousel .slick-slide .views-field-title {
margin: 21px 0;
}

.publications-page-carousel .slick-dots li button::before,
.carousel .slick-dots li button::before {
font-size: 10px;
}

.publications-page-carousel .views-container {
background-color:transparent;
overflow: hidden;
min-height:500px;
}

.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;
}

.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------------*/