html{
scroll-behavior: smooth;
}
header#header, main, footer {
max-width: 1440px;
}
header#header {
flex-direction: row;
column-gap: 40px;
padding: 100px 80px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
text-align: left;
}
header#header div{
max-width: -webkit-fill-available;
width: -webkit-fill-available;
}
header#header div.left > ul {
padding: 0px;
margin: 0px;
}
header#header div.left > ul > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: none;
padding: 0px 0px 16px 0px;
color: #1A1A1A;
font-family: var(--primary-font);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 130%;
}
header#header div.left > ul > li:before {
content: url('https://communicatie.libelle.nl/lezerij/images/check.svg');
width: 20px;
height: 14px;
aspect-ratio: 10 / 7;
margin-right: 15px;
}
header#header h1 {
font-size: 32px;
line-height: 100%;
text-align: left;
margin: 21px 0px 0px 0px;
padding: 0px;
}
header#header p {
font-size: 32px;
line-height: 100%;
text-align: left;
color: #1A1A1A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
padding: 32px 0px;
margin: 0px;
}
div.stores, ol.mobile{
display: none;
}
main article.slider{
padding-top: 80px;
padding-bottom: 80px;
}
main article.download{
padding-bottom: 80px;
}
h2 {
font-family: var(--primary-font);
color: #292929;
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 750;
line-height: normal;
padding-top: 32px;
padding-bottom: 40px;
}
h3 {
font-size: 28px;
}
a.button{
margin-top: 32px;
}
div.tijdschrift div.grey{
font-family: var(--secondary-font);
font-size: 18px;
font-weight: 400;
display: flex;
padding: 14px 16px;
margin-bottom: 20px;
background: #F2F2F2;
flex-direction: row;
align-content: center;
justify-content: flex-start;
align-items: center;
column-gap: 16px;
margin-top: 16px;
}
div.tijdschrift p a{
font-family: var(--secondary-font);
font-size: 18px;
font-weight: 400;
}
.download p{
color: #292929;
font-family: var(--secondary-font);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 116.667% */
}
article.download li{
font-size: 18px;
}
#sticky-footer{
opacity: 1;
position: fixed;
bottom: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
padding: 16px 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
border-top: 1px solid #EAEAEA;
background: #FFF4EA;
color: var(--font-color);
text-align: center;
font-family: var(--primary-font);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 26px */
/* Start hidden */
-webkit-transform: translateY(100%);
transform: translateY(100%);
z-index: 1000;
}
#sticky-footer a.btn.download{
display: flex;
padding: 16px 28px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 0px;
background: #E9795A;
color: #fff;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 750;
line-height: 100%; /* 16px */
text-decoration: none;
}
#sticky-footer a.btn.download:after {
background: url(https://communicatie.libelle.nl/lezerij/images/arrow-button.png) center center no-repeat;
display: block;
width: 16px;
height: 16px;
content: '';
position: relative;
margin-left: 4px;
}
article.download li {
font-size: 18px;
padding-left: 60px;
}
article.download li:before {
content: '';
background: var(--list-item-background-color);
font-family: var(--primary-font);
width: 47px;
height: 47px;
position: absolute;
z-index: 999;
border-radius: 200px;
color: var(--list-item-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: -70px;
/* padding-right: 20px; */
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 1;
justify-content: center;
margin-top: -10px;
}
@media screen and (max-width: 475px){
ol.desktop{
display: none;
}
ol.mobile{
display: block;
}
div.stores{
display: flex;
height: 52px;
align-items: center;
gap: 17.333px;
margin-bottom: 40px;
}
header#header {
flex-direction: column-reverse;
padding: 20px;
column-gap: 0px;
row-gap: 40px;
}
header#header div.right img {
width: -webkit-fill-available;
height: auto;
}
header#header img {
width: auto;
height: 32px;
}
div#sticky-footer span, div.tijdschrift div.grey {
display: none;
}
header#header h1 {
font-size: 28px;
padding-top: 28px;
margin: 0px;
}
.slider h2, article#qr-code h3{
font-size: 24px;
}
.download p{
font-size: 21px;
}
header#header p{
margin: 0px;
}
header#header div.left > ul > li{
font-size: 16px;
}
main article.download {
padding-bottom: 0px;
}
article.download li{
font-size: 18px;
}
div.tijdschrift p {
text-align: center;
}
.slider header img {
width: auto;
height: 40px;
}
article.download ol {
padding-inline: 0px;
}
}
/* Animation to slide IN */
.slide-in-bottom {
-webkit-animation: slideUp 0.4s forwards ease-out;
animation: slideUp 0.4s forwards ease-out;
}
/* Animation to slide OUT */
.slide-out-bottom {
-webkit-animation: slideDown 0.4s forwards ease-in;
animation: slideDown 0.4s forwards ease-in;
}
@-webkit-keyframes slideUp {
from { -webkit-transform: translateY(100%); transform: translateY(100%); }
to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slideUp {
from { -webkit-transform: translateY(100%); transform: translateY(100%); }
to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes slideDown {
from { -webkit-transform: translateY(0); transform: translateY(0); }
to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}
@keyframes slideDown {
from { -webkit-transform: translateY(0); transform: translateY(0); }
to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}