@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto:100,300,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100i,300,300i,400&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    color: rgb(211, 212, 38);
}

html{
    scroll-behavior: smooth;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(211, 212, 38)
}

* {
    transition: all 0.3s;
}

a:hover {
    transition: all 0.3s;
}

/*algemeen*/
.reverse {
    flex-direction: row-reverse;
}

.basecolor1 {
    background-color: rgb(211, 212, 38);
}

.basecolor2 {
    background-color: rgb(0, 155, 152);
}

.bestellen{
    background-color: rgb(211, 212, 38);
    color:white;
    padding:13px;
    padding-left:26px;
    padding-right:26px;
    border-radius:26px;
}
.bestellen:hover{
    background-color: rgb(0, 155, 152);
}

.base-line{
    margin: 0 !important;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgb(0, 155, 152);
    display:flex;
    justify-content: flex-end;
    text-align:right;
    align-items:center;
    padding:26px;
}

.midden{
    justify-content: center;
    margin-bottom:39px;
}

/*header met logo*/
.logo {
    height: 6.5vh;
    min-height: 60px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20%;
}

header {
    background-image: url(../images/centrum.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat:no-repeat;
    height: 80vh;
}

/*navigatiebalk*/
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#logo {
    flex: 0 0 30%;
    background-color: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo img {
    width: 80%;
}

nav ul {
    flex: 0 0 50%;
    height: 6.5vh;
    display: flex;
}


nav ul li a {
    color: white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

nav ul li a:hover {
    color: white;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
    background-color: rgb(211, 212, 38);
}


/*ronde titels*/

.biotitle, .biotitle2 {
    background-color: rgb(0, 155, 152);
    border-radius: 35px;
    padding: 13px;
    padding-left: 26px;
    padding-right: 26px;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    z-index: 10000 !important;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.biotitle2{
    color:white;
    width:25%;
}

.light {
    font-weight: 100;
}

.heavy {
    font-weight: 600;
}

.biotitle-home {
    margin-top: -70px !important;
    margin-bottom: 70px;
}

.omhoog {
    margin-top: -13px !important;
}

.half img {
    max-width: 90%;
}

.veelomhoog {
    margin-top: -70px !important;
}

.highimage {
    height: 400px !important;
    width: 100%;
}

.highimage img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.quote {
    display: flex;
    justify-content: center;
    align-items: center;
}

.biotitle h1 {
    color: white;
    font-size: 1.4rem;
    font-weight: 600;
}
.opening{
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
}
.opening span{
    flex: 0 0 30%;
}


.category{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    width:80%;
    max-width:1200px;
    margin:auto;
    margin-top:10vh;
}
.category a{
    width:49%;
    margin-bottom:5vh;
    border:1px solid #009B98;
}

.category a img{
    width:100%;
    height:350px;
    object-fit:cover;
    object-position:center;
}
.category a div{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    height:15vh;
    padding:14px !important;
}
.category article h3{
    color:black;
    font-weight:200;
}

.category a button{
    margin-top: auto;
    display:inline-block !important;
    align-self:start;
    width:30%;
    min-width:130px;
}

.strenghts, .pharmacies{
    width:80%;
    max-width:1200px;
    margin:auto;
    margin-top:5vh;
    display:flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.sttitles{
    width:20%;
    min-width:300px;
    margin-left:-80px;
    display:flex;
    flex-direction:column;
    justify-content: center;
}


.sttitles h3, .sttitles a{
    text-align:center;
    padding: 13px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 26px;
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(211, 212, 38);
    color: rgb(0, 155, 152);
    font-weight: 600;
}

.pharmacies .stcontent{
    margin-left:-80px;
}

.pharmacies .sttitles{
    margin-left:0px;
    z-index:10000000;
}

.pharmacies section{
    background-size:cover;
    background-position:center;
}

.pharmacies{
    flex-direction:row;
}

.stcontent{
    width:80%;
    background-color:rgb(211, 212, 38);
    padding: 13px;
    padding-left: 26px;
    margin-bottom: 6px;
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight:100;
    padding-right:90px;
    min-height:60vh;
    display:flex;
    flex-direction:column;
    justify-content: center;
}


.strenghts section p, .pharmacies section p{
    color:black !important;
}

#c{
    width:80%;
    margin:auto;
    color:black;
    margin-top:39px;
}

#c *{
    color:black;
}

#c p, #c ul{
    font-size:1.1rem;
    line-height:1.3rem;
    font-weight:300;
    padding-bottom:13px;
}

#c ul{
    margin-left:20px;
}




#c li{
    padding-bottom:13px;
}

#c h3{
    color: rgb(0, 155, 152);
    font-size:2rem;
    margin-bottom:13px;
}

#c a{
    text-decoration:underline;
    padding-right:6px;
    color: rgb(0, 155, 152);
}

#c h1 {
    color: rgb(0, 155, 152);
    font-size: 3rem;
    margin-bottom: 13px;
    border-bottom: 1px dotted rgb(0, 155, 152);
}

#c img{
    width:100%;
    clear:both;
}

footer, #c, #usp{
    clear:both;
}

/*content*/
.content {
    width: 80%;
    margin: auto;
    max-width: 1030px;
    color: black;
    margin-bottom: 66px;
}

.content p {
    color: black;
    margin-bottom: 13px;
    font-weight: 300;
}

.content p strong {
    font-weight: 600;
}

.content article {
    margin: 0;
}

.baseline {
    padding: 0;
}

.baseline p {
    margin: 0 !important;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgb(0, 155, 152);
}

/*USPS*/
.slides {
    z-index: 0 !important;
    display: flex;
}


.location2{
    display:flex;
    height:350px;
    overflow:auto;
    margin-bottom:64px;
}

iframe{
    border:0;
    width:100%;
    height:350px;
}

.location2 article{
    display:flex;
    flex-direction: column;
    justify-content: center;
    height:100%;
}

.location2 .third{
    padding-left:30px;
}

.days{
    color: rgb(0, 155, 152);
    font-weight:300;
}

.hours{
    padding-top:39px;
    font-size:1.1rem;
    font-weight:100;
}

.hide {
    display: none;
}

/*slidecontent*/
.slidecontent {
    background-color: rgb(211, 212, 38);
}

.slidecontent article {
    /*padding-top: 43px;*/
    display: none;
    height:90%;
    padding-top:5%;
    padding-bottom:5%;
    flex-direction:column;
}

/*
.slidecontenthigh {
    min-height: 100vh !important;
    overflow: auto;
    padding-top:0;
}

.slidecontenthigh article{
    display:flex;
    height:100%;
    flex-direction:column;
    justify-content: center;
    align-items:center !important;
}
*/


.slidecontent p {
    width: 70%;
    padding: 13px;
    padding-left: 26px;
    margin-bottom: 6px;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.slidecontent article:first-child {
    display: block;
}

.slidecontenthigh article:first-child {
    display: none;
}

#uspstart {
    background-image: url(../images/bannerbubbels.jpg);
    background-size: cover;
}

#apotheek {
    background-image: url(../images/005.jpg);
    background-size: cover;
    height: 500px;
}

.slidesleft .slidecontent p,
.slidesleft #uspstart {
    padding-left: 20%;
}



#uspstart p {
    color: white;
    padding: 30px;
    font-size: 1.5rem;
    font-style: italic;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

.slidecontent {
    width: 80%;
}

.slidesright .slidenav {
    margin-left: -10%;
}


.slidesleft {
    flex-direction: row-reverse;
}

.slidesleft .slidecontent {
    margin-left: -10%;
}

.slidecontent:first-child {
    display: block;
}

.slidenav {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slidenav a {
    padding: 13px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(211, 212, 38);
    color: rgb(0, 155, 152);
    font-weight: 600;
    z-index:999999999999999;
}

.notactive {
    background-color: rgb(147, 186, 34) !important;
    color: white !important;
}

.slidenav a:hover, .strenghts h3:hover, .pharmacies a:hover {
    transform: scale(1.03);
    color: white;
    background-color: rgb(0, 155, 152);
}

.social {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 30%;
}

.social a {
    font-size: 1.9rem;
    color: rgb(211, 212, 38);
}

/*banners + splash*/
.bannerf {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    height: 39vh;
    box-shadow: inset 0px 0px 20px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.5s;
}

#homesplash {
    position: relative;
    text-align: center;
    line-height: 2.8rem;
    text-transform: uppercase;
    font-size: 3rem;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 100;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.12);
    height: 66vh !important;
    overflow: hidden;
    background-image: url(../images/nvdg.jpg);
    background-position: center center;
    background-size: cover;
}


.slogandate {
    display: flex;
    height: 30vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.slogandate h1 {
    color: rgb(211, 212, 38);
    font-size: 3rem;
}

.slogandate h2 {
    color: rgb(211, 212, 38);
    font-size: 2.5rem;
}

.slogandate h3 {
    color: rgb(211, 212, 38);
    padding-top: 13px;
}


.ontop {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: inset 0px 0px 20px 10px rgba(0, 0, 0, 0.3);
}

#homesplash h3,
.bannerf h3 {
    text-align: center;
    line-height: 2.6rem;
    text-transform: uppercase;
    font-size: 3rem;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 100;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.12);
}

/*banners*/
#troeven {
    height: 39vh;
    background-image: url(../images/troeven.jpg);
}

#tips {
    height: 39vh;
    background-image: url(../images/onlinetip.jpg);
}

#offline {
    height: 39vh;
    background-image: url(../images/classroom.jpg);
}


.bannerf:hover {
    filter: grayscale(45%) sepia(10%) brightness(96%) hue-rotate(13deg) saturate(190%) contrast(128%);
    -webkit-filter: grayscale(45%) sepia(10%) brightness(96%) hue-rotate(13deg) saturate(190%) contrast(128%);
    -moz-filter: grayscale(45%) sepia(10%) brightness(96%) hue-rotate(13deg) saturate(190%) contrast(128%);
    transition: all 0.5s;
}

.btnMe {
    font-size: 1rem;
    background-color: rgb(211, 212, 38);
    color: white;
    padding-left: 26px;
    padding-right: 26px;
    border-radius: 6.5px;
    text-transform: lowercase;
    margin-top: 26px;
}

.fullvid {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

/*info panels*/
.infopanel {
    background-color: rgba(51, 123, 129, 1);
    color: white !important;
    text-align: center;
    padding: 26px;
    border-radius: 13px;
    margin-bottom: 26px;
}

.infopanel * {
    color: white;
    font-size: 1.3rem;
    line-height: 1.5rem;
    font-weight: 300;
}

/*suggestions*/

/*suggestions*/
.suggestions,
.lecturers {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.suggestions a,
.lecturers a {
    flex: 0 0 31%;
    border: 1px solid rgb(211, 212, 38);
    background-color: white;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 26px;
}


.suggestions a div,
.lecturers a div {
    padding: 6.5px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.suggestions button,
.lecturers button {
    width: 40%;
    background-color: rgb(211, 212, 38);
    color: white;
}

.suggestions button i,
.lecturers button i {
    display: inline-block;
    margin-right: 6.5px;
}

.suggestions a h3,
.lecturers a h3 {
    color: rgb(211, 212, 38);
    font-size: 1rem;
    font-weight: 300;
}

.suggestions a img,
.lecturers a img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center;
}

.suggestions a:hover,
.lecturers a:hover {
    transform: scale(1.05);
    transform: perspective(800px) rotateY(-6deg);
    transition: all 0.5s;
}

.suggestions a img:hover,
.lecturers a img:hover {
    filter: contrast(1);
    transition: all 0.5s;
}

main {
    margin-top: 39px;
}

main header {
    text-align: center;
    padding-bottom: 13px;
    margin-bottom: 13px;
}

main header h3 {
    font-weight: 400;
    color: rgb(211, 212, 38);
    font-size: 1.3rem;
}


/*zoekbalk*/
.frmSearch {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.btnSearch {
    background-color: rgb(211, 212, 38) !important;
    border: 0px;
    color: white;
    width: 13%;
}

.btnRed {
    background-color: rgb(211, 212, 38) !important;
    border-radius: 6.5px;
    color: white;
    width: 26%;
    padding: 11px 16px;
    margin-bottom: 26px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.btnRed i {
    display: inline-block;
    margin-right: 6.5px;
}

.btnRed:hover {
    transform: scale(1.05);
    transition: all 0.5s;
}


.q {
    background-color: white !important;
    border: 1px solid rgb(211, 212, 38) !important;
    width: 80%;
}

.searchpages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.searchpages a {
    flex: 0 0 13%;
    padding: 13px;
    cursor: pointer;
    transform: scale(1.3);
    transition: all 0.3s;
}

.searchpages a:hover {
    transform: scale(1.2);
    transition: all 0.4s;
}

.searchpages figure {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 70%;
    margin: auto;
    text-align: center;
}

.searchpages figcaption {
    color: rgb(211, 212, 38);
    font-size: 0.8rem;
    font-weight: 300;
}

/*Cursusinfo - pagina "lees"*/
.listitem {
    display: flex;
    justify-content: space-between;
}

.listitem article {
    flex: 0 0 46%;
}

/*modals*/
.modaltip {
    width: 40vw;
    left: 30vw;
}

/*infopages*/
.ecourse-info {
    margin-top: 52px;
    font-family: Roboto, sans-serif !important;
    font-style: normal;
    font-variant: normal;
    letter-spacing: 0px;
    word-spacing: 0px;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.9rem;
}

.ecourse-info section {
    overflow: auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 13px;
    border-bottom: 1px dotted rgb(211, 212, 38);
    margin-bottom: 13px;
}


.ecourse-info figure {
    flex: 0 0 19%;
}

.ecourse-info article {
    flex: 0 0 76%;
}

.ecourse-info figcaption {
    font-size: 0.8rem;
    text-align: center;
}

.ecourse-info img {
    width: 100%;
}

.ecourse-info h3,
.shoppingcart h3,
.myhistory h3 {
    margin-bottom: 13px;
    color: rgb(211, 212, 38);
    font-weight: 500;
    font-size: 2em;
}

.ecourse-info h3 i,
.shoppingcart h3 i,
.myhistory h3 i {
    padding-right: 13px;
}

.firstchapter {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    background-color: white;
    padding: 46px;
    font-size: 1.1rem;
    transform: scale(0.3);
    transform-origin: 0% 0%;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.firstchapter p {
    padding-bottom: 13px;
}

.firstchapter iframe {
    width: 100%;
    min-height: 480px;
    border: 0px;
}

.firstchapter h2 {
    font-size: 1.6rem;
    padding-bottom: 39px;
}

.firstchapter h3 {
    font-size: 1.4rem;
    padding-bottom: 39px;
}

.firstchapter ul,
.firstchapter ol {
    padding-bottom: 26px;
}

.firstchapter:hover {
    transform: scale(1);
    transition: all 0.5s;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.courselist li {
    border: 1px solid #ccc;
    padding: 5px;
    padding-left: 13px;
    margin-bottom: 3px;
    border-radius: 6.5px;
    cursor: pointer;
    transform-origin: left;
    background-color: white;
    display: flex;
}

.courselist li a {
    flex: 0 0 100%;
}


.courselist li:hover {
    transform: scale(1.03);
    transition: all 0.3s;
    background-color: rgb(0, 155, 152);
    cursor: pointer;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
}

.performer {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 13px;
    transform-origin: left;
    width: 33%;
    display: flex;
    align-items: center;
}

/*anibg*/
.anibg {
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: BGA 10s ease infinite;
    animation: BGA 30s ease infinite;
    background-position: 0 0;
    transition: all 1s;
}

@-webkit-keyframes BGA {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 80%;
    }
}

@-webkit-keyframes BGSCALE {
    from {
        background-size: 100%;
    }

    to {
        background-position: 120%;
    }

}

.expander {
    position: absolute;
    bottom: 39px;
    left: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border-radius: 50%;
    cursor: pointer;
}

.bigpicture {
    height: 85vh !important;
    transition: all 1s;
}

footer {
    justify-content: center !important;
    min-height: 280px;
    margin-top: 39px;
    align-items: center;
    background-color: rgb(211, 212, 38);
    text-align: center;
    color: white;
}

footer * {
    color: white;
}

footer h3 {
    font-size: 1.4rem;
}

footer p {
    margin-bottom: 26px;
    font-weight: 600;
}

footer a {
    font-size: 0.9rem;
    padding: 3.5px;
}


/*prijzen*/
.socialprices {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.prices {
    flex: 0 0 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(51, 123, 129, 1);
    border-radius: 13px;
    padding: 13px;
}

.count {
    width: 13%;
    text-align: right;
}

.btnBuy {
    background-color: white;
    border: 1px solid rgba(51, 123, 129, 0.2);
    color: rgba(51, 123, 129, 1);
    margin-left: 4px;
    cursor: pointer;
    transform-origin: right;
    transition: all 0.3s;
}

.btnBuy:hover {
    transform: scale(1.1);
    transform-origin: right;
    transition: all 0.3s;
}

#mylist {
    position: relative;
}

.shopcount {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: none;
    color: white;
    justify-content: center;
    align-items: center;
    top: 17px;
    left: 60%;
    background-color: rgb(211, 212, 38);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}


#shoppingcart table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    text-align: left;
    padding: 8px;
    font-size: 1.1rem;
}


tr:nth-child(even) {
    background-color: rgb(0, 155, 152);
}

.removeItem {
    text-align: right;
    cursor: pointer;
}

.removeItem i {
    transform-origin: right;
}

.removeItem i:hover {
    transform: scale(1.6);
    transition: all 0.2s;
}


.logofirst {
    background-image: url(../images/tllogo.png?v2);
    background-size: 3.5%;
    background-position: center center;
    background-repeat: no-repeat;
}

.logofirst:hover {
    background-color: black;
}

.directions {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 350px;
    width: 90vw;
    margin: auto;
}

.directions h3 {
    font-size: 1.9rem;
}

.directions a {
    color: rgb(211, 212, 38);
    font-size: 1.3rem;
}

.directions article {
    border-top: 2px solid rgb(211, 212, 38);
    padding-top: 39px;
    padding-bottom: 39px;
    width: 100%;
}

.newsitems article {
    border-bottom: 1px dotted rgb(211, 212, 38);
    padding-bottom: 26px;
    margin-bottom: 26px;
}

.newsitems p {
    font-size: 1.1rem;
    font-weight: 200;
    line-height: 1.5rem;
    padding-bottom: 13px;
}

.newsitems h1 {
    color: rgb(211, 212, 38);
    font-size: 2.4rem;
    padding-bottom: 13px;
}

.newsitems h3 {
    padding-top: 26px;
    color: rgb(211, 212, 38);
    font-size: 1.8rem;
    padding-bottom: 13px;
}




.personel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.function {
    color: white;
}

.cr{
    float:right;
    margin-left:26px;
    margin-bottom:26px;
    width:30%;
}

.slidecontent article div{
    margin-right:30px;
    font-size:1rem;
}


.pagebreakmiddle,  .pagebreak{
    padding-top:5px;
    padding-bottom:5px;
    clear:both;
    display:block;
}

.imgleft{
    width:45%;
    margin-top:10px;
    margin-bottom:10px;
    margin-right:4%;
    float:left;
}

.imgright{
    width:45%;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:4%;
    float:right;
}

#read blockquote{
    min-height:300px;
    display:flex;
    justify-content: center;
    align-items:center;
    border:0px;
    color:rgb(0, 155, 152);
    flex-direction:column;
}

#read blockquote span{
    color:rgb(0, 155, 152);
}

#read p{
    padding-top:13px;
}

#read img{
    max-height:80vh;
}
table{
    width:100%;
    margin-bottom:39px;
    margin-top:13px;
}

table tr{
    border-bottom: 1px solid #dddddd;
    width:100%;
}

table{
    border-collapse: collapse;
}

table td, table th{
    background-color:white;
}


/*mobile*/
@media (max-width:900px) {

    header {
        height: 60vh;
    }

    .strenghts, .pharmacies{
        flex-direction: column;
    }
    .sttitles{
        margin-left:0px;
        width:100%;
    }

    .stcontent{
        width:90%;
        margin:auto;
        padding:13px;
        text-align:center;
    }

    .pharmacies .stcontent {
        margin-left: 0px;
        padding: 13px !important;
    }

    .slidecontent article {
        height: 560px;
        overflow: auto;
    }
    .cr{
        display:none;
    }

    .imgleft{
        width:100%;
        margin-top:10px;
        margin-bottom:10px;
        margin-right:0;
        float:none;
    }
    
    .imgright{
        width:100%;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:0;
        float:none;
    }

    .category a{
        width:100%;
        margin-bottom:5vh;
        border:1px solid #009B98;
    }

    .strs{
        flex-direction:column;
    }

    .base-line{
        text-align:center;
        justify-content: center;
        padding:0;
        padding-bottom:20px;
    }

    /*

    nav ul{
        display:none;
        flex-direction:column;
        height:auto;
        background-color:#009B98;
        text-align:left;
        align-items:flex-start;
        justify-content: space-between;
    }
    nav ul li{
        padding:0 !important;
        margin:0 !important;
        width:100%;
        height:auto;
    }
    nav ul li a{
        padding:20px;
        display:flex;
        height:100%;
        width:100%;
    }
    */

    nav{
        position:relative;
    }

    nav ul{
        display:none;
        position:absolute;
        z-index:100000;
    }

    nav:before{
        content: '';
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='36' viewBox='0 0 48 36' fill='rgb(255,255,255)'%3E%3Crect x='16' y='12' width='16' height='2' /%3E%3Crect x='16' y='17' width='16' height='2' /%3E%3Crect x='16' y='22' width='16' height='2' /%3E%3C/svg>");
        background-position: center;
        background-repeat: no-repeat;
        width:5vh;
        height:5vh;
        cursor:pointer;
    }

    nav:hover ul{
        display:block;  
        background-color:rgb(0, 155, 152);
        width:100%;
        top:5vh;
    }

    nav ul li{
        margin:0;
        padding:0;
        background-color:rgb(0, 155, 152);
    }
    
}



@media (max-width:600px) {
    * {
        transition: all 0.5s;
    }

    .half img {
        max-width: 100%;
    }

    .highimage {
        margin-bottom: 39px !important;
    }

    .veelomhoog {
        margin-top: 0px !important;
    }

    .baseline {
        padding-bottom: 30px !important;
    }

    .row {
        flex-direction: column;
    }

    .third,
    .twothird {
        flex: 0 0 100%;
    }

    nav ul,
    #logo {
        flex: 0 0 100%;
    }

    #c img{
        float:none !important;
        width: 100% !important;
        margin-left:0px !important;
    }

    #c h1{
        font-size:2.3rem;
    }

    #c h3{
        font-size:1.5rem;
    }


}