@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap');

:root {
    /* colors */
    --blueLight: rgb(120, 218, 245);
    --blueMid:	rgb(14, 130, 198);
    --blueDark: hsl(202, 87%, 22%);
    --white: rgb(249, 249, 249);
    --greyBlueLight: rgb(232, 249, 255);
    --greyLight: rgb(238, 238, 238);
    --greyMid: rgb(198, 198, 198);
    --greyDark: rgb(99, 102, 106);
}

* { margin: 0; padding: 0; /*outline: 0;*/ }
html { width: 100%; height: 100%;  }
body { width: 100%; height: 100%; font-family: "Signika", sans-serif;
    font-size: 17px; color: var(--greyDark); background-color: var(--white); }
div.wrapper { width: min(96%, 1280px); margin: 0 auto; overflow: auto; }

.menu-active  { position: fixed; }

h1 { font-weight: 700; font-size: 32px; line-height: 1.3em; color: var(--blueDark); }
h2 { font-weight: 700; font-size: 24px; line-height: 1.3em; color: var(--blueMid);}
h3 { font-weight: 700; font-size: 20px; line-height: 1.3em; }
h4 {  }
h5 {  }
h6 { font-weight: 700; font-size: 18px; line-height: 1.6em; color: var(--blueDark); }
p  { line-height: 1.8em; }
img { display: block; max-width: 100%; height: auto; }

/* top section styling */
section#top { padding: 20px 0; border-top: 20px solid var(--blueDark); }
section#top div.top_holder { overflow: auto; }
section#top div#logo { float: left; width: 260px; }
section#top div#topnav { float: left; width: calc(100% - 300px); text-align: right; }
section#top div#topnav ul { list-style-type: none; padding-top: 30px; padding-left: 100px; }
section#top div#topnav li { display: inline-block; background-color: transparent; padding: 0px 20px; }
section#top div#topnav a { text-decoration: none; color: var(--blueMid); cursor: pointer; text-transform: uppercase; box-sizing: border-box;
    font-size: 18px; }
section#top div#topnav a:hover { text-decoration: underline; }


/* visuals/slides section styling */
section#slides { width: 100%; overflow: hidden; position: relative; background-color: var(--greyLight); }
section#slides div.wrapper { padding: 0; }
section#slides div.slider { width: 100%; height: auto; position: relative; }
section#slides div.slider div { width: 100%; height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* content section styling */
section#content { padding-top: 40px; }
section#content a { color: var(--blueMid); text-decoration: underline; }
section#content a:hover { text-decoration: none; }

/* specialties section styling */
section#specialties { padding: 20px 0 40px 0; }
section#specialties div.row { overflow: auto; }
section#specialties div.col { float: left; width: 50%; box-sizing: border-box; padding: 20px 80px 0px 0px; }
section#specialties div.col p + h6 { padding-top: 20px; }
section#specialties a { color: var(--blueMid); text-decoration: underline; }
section#specialties a:hover { text-decoration: none; }

/* news section styling */
section#news { padding: 40px 0; background-color: var(--greyLight); }
section#news .news-item { overflow: auto; margin-top: 20px; padding-bottom: 8px; }
section#news .news-img { float: left; width: 50%; box-sizing: border-box; padding-right: 40px; text-align: center; }
section#news .news-img img { display: inline-block; border-radius: 8px; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); }
section#news .news-txt { float: left; width: 50%; box-sizing: border-box; }
section#news .news-txt p { color: var(--blueDark); }
section#news a { color: var(--blueMid); text-decoration: underline; }
section#news a:hover { text-decoration: none; }

/* jobs section styling */
section#jobs { padding: 40px 0; }
section#jobs a { color: var(--blueMid); text-decoration: underline; }
section#jobs a:hover { text-decoration: none; }
section#jobs .vacature-item { margin-top: 20px; }
section#jobs .vacature-item h6 a { color: var(--blueDark); text-decoration: none; }
section#jobs .vacature-item h6 a:hover { text-decoration: underline; }
section#jobs .more-link { margin-top: 20px; }

/* button styling */
a.btn { display: inline-block; background-color: var(--blueMid); color: var(--white) !important; padding: 8px 16px;
    border-radius: 4px; text-decoration: none !important; font-size: 14px; margin-top: 10px; }
a.btn:hover { background-color: var(--blueDark); text-decoration: none !important; }

/* page content styling */
section#page-content { padding: 40px 0; }
section#page-content h1 { margin-bottom: 20px; }
section#page-content h2 { margin-top: 30px; margin-bottom: 10px; }
section#page-content ul { margin-left: 20px; margin-bottom: 20px; }
section#page-content li { line-height: 1.8em; }
section#page-content a { color: var(--blueMid); text-decoration: underline; }
section#page-content a:hover { text-decoration: none; }
section#page-content .breadcrumb { margin-bottom: 20px; }
section#page-content .vacature-item { margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--greyMid); }
section#page-content .vacature-item:last-child { border-bottom: none; }
section#page-content .vacature-item h2 a { color: var(--blueDark); text-decoration: none; }
section#page-content .vacature-item h2 a:hover { text-decoration: underline; }

/* footer section styling */
section#footer { padding: 20px 0; background-color: var(--blueMid); color: var(--white); }
section#footer div.footer_holder { overflow: auto; }
section#footer div.col { float: left; width: calc(50% - 20px); margin-right: 20px; }
section#footer p { padding: 0; }
section#footer a { color: var(--white); text-decoration: underline; }
section#footer a:hover { text-decoration: none; }

/* credits section styling */
section#credits { background-color: var(--blueDark); color: var(--white); }
section#credits div.credits_holder { overflow: auto; padding-bottom: 20px; }
section#credits a { display: inline-block; float: right; background-color: var(--blueLight); color: var(--blueDark);
    text-decoration: none; font-size: 12px; padding: 20px 10px;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
section#credits a:hover { text-decoration: underline; }


/* --- @media queries --- */
@media screen and (max-width: 900px) {
    section#top div#logo { float: none; margin: 0 auto; }
    section#top div#topnav { float: none; width: 100%; text-align: center; margin: 0 auto; }
    section#top div#topnav ul { padding-left: 0; }
    section#slides div.slider div { height: 240px; }
    section#specialties div.col { float: none; width: 100%; padding: 20px 0px; }
    section#news .news-img { float: none; width: 100%; padding-right: 0; text-align: left; }
    section#news .news-img img { width: clamp(300px, 50%, 100%) !important; }
    section#news .news-txt { float: none; width: 100%; margin-top: 12px; }
    section#footer div.col { float: none; width: 100%; margin-right: 0px; }
}

@media screen and (max-width: 550px) {
    section#top div#logo { width: 180px; }
    section#top div#topnav a { font-size: 14px; }
    section#slides div.slider div { height: 200px; }
    h1 { font-size: 20px; }
    h2 { font-size: 17px; }
    body { font-size: 14px; }
}

@media screen and (max-width: 460px) {
    section#top div#topnav li { padding: 0px 6px; }
    section#top div#topnav a { font-size: 12px; }
}