@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,75,100..900;1,75,100..900&display=swap');
:root{
--primary-font: 'Open Sans';
--secondary-font: 'Roboto';
--button-color: #E9795A;
--list-item-color:  #000;
--list-item-background-color: #F7F7F7;
--background-color:  #120E26;
--background-slider: #262138;
--background-white: #FFFFFF;
--background-black: #3b3b3b;
--background-light-grey: #f8f8f8;
--background-download:  #120E26;
--background-usps:  #262138;
--background-stores: #120E26;
--background-newsletter:  #EEE5D0;
--background-button:  #FFF000;
--link-color:  #FFF333;
}
html, body{
color: #fff;
background:  var(--background-color);
padding: 0px;
margin: 0px;
}
h1 {
color: #fff;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 46px; /* 115% */
letter-spacing: -0.8px;
font-family: var(--primary-font);
margin-top: 30px;
margin-bottom: 0px;
}
h2 {
font-family: var(--secondary-font);
color: #fff;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 44px; /* 137.5% */
margin-top: 16px;
margin-bottom: 32px;
}
h3 {
font-family: var(--primary-font);
color: #fff;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
letter-spacing: -0.64px;
margin-top: 0px;
margin-bottom: 30px;
}
h4 {
font-family: var(--secondary-font);
color: #fff;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 125% */
white-space: break-spaces;
margin: 20px 0px 0px;
min-height: 62px;
}
h5{
padding: 0px;
margin: 0px;
-webkit-font-kerning: none;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 46px; /* 143.75% */
letter-spacing: -0.64px;
max-width: 750px;
}
p, li {
font-family: var(--secondary-font), sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 36px */
}
.download p{
font-family: var(--primary-font);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 116.667% */
padding-bottom: 20px;
}
li{
font-family: var(--secondary-font);
color: #000;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 133.333% */
}
article.usps p{
font-family: var(--secondary-font);
color: #fff;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 155.556% */
}
footer p{
color: #fff;
text-align: center;
font-family: var(--secondary-font);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
small {
display: block;
padding-top: 10px;
padding-bottom: 5px;
font-family: var(--secondary-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5% */
}
a{
color: var(--link-color);
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.slider a.button{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 274px;
padding: 14px 30px 14px 24px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
border-radius: 5px;
background: #10F;
}
a.button {
display: inline-flex;
padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 24px;
font-family: var(--secondary-font);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 16px */
text-transform: uppercase;
background-color: var(--background-button);
color: #000;
text-decoration: none;
margin-bottom: 26px;
margin-top: 40px;
}
a.button:after {
background: url('https://communicatie.veronicasuperguide.nl/tijdschrift/images/arrow-button.png') center center no-repeat;
display: block;
width: 20px;
height: 20px;
content: '';
position: relative;
margin-left: 4px;
margin-top:  3px;
}
li.tijdschrift {
margin: 0px;
margin-left: -85px;
margin-top:  40px;
}
li.tijdschrift p {
padding: 0px;
font-family: var(--secondary-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin: 0px;
}
li.tijdschrift p a{
color: var(--link-color);
font-family: var(--secondary-font);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 122.222% */
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
footer a {
color: #292929;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
header#header, main, footer{
max-width: 1140px;
width: -webkit-fill-available;
margin: 0px auto;
padding: 100px 150px;
}
footer{
text-align: center;
}
header#header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: center;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
gap: 0px;
text-align: center;
padding-bottom: 50px;
}
#info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: -webkit-fill-available;
max-width: 800px;
padding: 24px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 15px;
border: 1px solid #2672D0;
background: #FFF;
margin: 40px auto 30px auto;
}
#info p{
padding:  0px;
margin: 0px;
text-align: left;
color: #000;
font-family: var(--secondary-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
#info p strong{
font-weight: 900;
font-size: 24px;
}
main#main-content {
background: var(--background-slider);
padding-block: 0px;
}
main article.slider{
background: var(--background-slider);
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
}
main article.download {
background: var(--background-download);
text-align: left;
margin-inline: -150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
padding: 80px 125px;
-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: start;
align-content: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: center;
}
main article.usps{
background: var(--background-usps);
text-align: left;
margin-inline: -150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
padding: 80px 100px;
-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: start;
align-content: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
main article.newsletter{
background: var(--background-newsletter);
text-align: left;
margin-inline: -150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
padding: 80px 100px;
-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: start;
align-content: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding-top: 20px;
padding-bottom: 20px;
}
article.usps div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-line-pack: justify;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
/* max-width: 33%; */
/* width: -webkit-fill-available; */
text-align: center;
}
article.download ol {
list-style: none;
padding-left: 10px;
}
article.download li {
color:  #fff;
padding-bottom: 32px;
padding-left: 70px;
margin-top: 0px;
padding-top: 0px;
display: inline-flex;
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 28.5px */
flex-direction: column;
align-content: flex-start;
justify-content: center;
}
article.download li:not(.tijdschrift) a {
display: contents;
}
article.download li.tijdschrift {
display:  block;
}
article.download li:before {
content: '';
background: var(--list-item-background-color);
font-family: var(--primary-font);
width: 48px;
height: 48px;
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: 48px; /* 171.429% */
justify-content: center;
}
article.download li:nth-child(1):before{
content: '1';
}
article.download li:nth-child(2):before{
content: '2';
}
article.download li:nth-child(3):before{
content: '3';
}
article.download li:nth-child(4):before{
display: none;
}
main article.stores {
background: var(--background-stores);
background-size: cover;
text-align: center;
margin-inline: -150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
row-gap: 40px;
padding: 80px 100px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
main article.stores div{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/*  ################  SLIDER  ################  */
.list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
padding: 16px;
list-style: none;
overflow-x: scroll;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
width: 100%;
max-width: calc(100% - 70px);
margin: 0px auto;
}
.item {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 215px;
height: auto;
scroll-snap-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
row-gap: 10px;
}
li.item img{
width: 215px;
height: 310px;
}
.content {
padding-top: 24px;
font-family: var(--secondary-font);
color: #fff;
font-size: 21px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 25.2px */
text-align: left;
}
.list-wrapper {
position: relative;
}
.slider .button {
position: absolute;
top: 35%;
width: 36px;
height: 36px;
border: none;
border-radius: 60px;
padding: 0px;
margin: 0px;
cursor: pointer;
}
.button--previous {
left: -35px;
}
.button--next {
right: -35px;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
span.desktop{
display: contents;
}
/*################ MOBILE DEVICES ################ */
@media screen and (max-width: 475px) {
article.newsletter iframe{
min-height: 400px !important;
}
span.desktop, br.desktop{
display: none;
}
header#header, main, footer{
padding-inline: 15px;
margin: 0px auto;
width: -webkit-fill-available;
}
header#header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: center;
gap: 0px;
margin: 15px 15px;
padding: 0px;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: -webkit-fill-available;
}
header#header img {
width: auto;
height: 40px;
}
main#main-content {
padding: 0px 15px;
margin: 0px;
max-width: -webkit-fill-available;
}
main article.newsletter{
margin-inline: 0px;
padding: 40px 25px
}
main article.slider {
background: var(--background-slider);
padding-inline: 50px;
text-align: center;
padding-top: 75px;
padding-bottom: 75px;
padding-inline: 15px;
}
main article.slider .list-wrapper {
position: relative;
max-width: 80%;
margin: 0px auto;
}
main article.download {
padding: 0px 15px;
margin: 50px 0px;
}
a.button{
width: -webkit-fill-available;
}
main article.download div:nth-child(2){
display: none;
}
main article.usps {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 40px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 40px 25px;
margin-inline: 0px;
}
article.usps div{
max-width: 100%;
width: 100%;
padding-inline: 0px;
}
main article.stores{
padding: 80px 15px;
margin: 0px;
}
main article.stores div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
main article.stores div img{
width: 135px;
height: auto;
}
footer {
margin: 60px 0px 40px;
padding: 0px;
}
h1{
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
text-transform: uppercase;
}
h2{
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 28.8px */
}
h3{
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 33.6px */
text-align: center;
}
h4{
font-size: 21px;
font-style: normal;
font-weight: 900;
line-height: 120%; /* 25.2px */
min-height: unset;
}
h5{
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 28.8px */
}
p{
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 27px */
}
.download p{
font-size: 18px;
font-style: normal;
font-weight: 900;
line-height: 28px; /* 155.556% */
}
li{
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
article.download li{
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
li.tijdschrift p{
text-align: center;
}
article.usps p{
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 133.333% */
}
.content {
font-size: 18px;
font-style: normal;
font-weight: 900;
line-height: 120%; /* 21.6px */
}
article.download li:before {
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 100% */
width: 47px;
height: 47px;
margin-left: -70px;
}
article.download li {
padding-bottom: 35px;
padding-left: 10px;
display: list-item;
/*
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
article.download p{
color: #111;
font-size: 20px;
font-weight: 700;
line-height: 150%;
*/
}
li.tijdschrift {
margin-left: -70px;
}
article.download ol{
padding-left: 60px;
}
ul.list{
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.item {
-ms-flex-negative: 0;
flex-shrink: 0;
width: -webkit-fill-available;
height: auto;
scroll-snap-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
row-gap: 10px;
-ms-flex-line-pack: center;
align-content: center;
}
li.item img {
width: 100%;
height: auto;
}
}