body{
    font-family: 'Abel', sans-serif;
    font-size:17px;
}

a {
    color: #cc6600;
    outline: 0;
}
    a:link, a:visited {
	    text-decoration: none;
        color: #cc6600;	    
    }
    a:hover, a:active 
    {
        text-decoration: underline;
        color: #666;        
    }
    
.rootlink:link, .rootlink:visited, .rootlink:hover, .rootlink:active{
    color:inherit;
}

/* override bootstrap classes */

.navbar {
    z-index: 90;
    border-radius:0;
    margin-bottom: 0;
}

.navbar-collapse {
    text-align: center;
}

.navbar-default {
    background-color: transparent;
    border-width:0;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent;
}

.navbar-header{
    min-height:20px;
}

.navbar-nav {
    float:none;
    display:table;
    margin: 0 auto;
    text-transform: uppercase;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #cc6600;
}
.open {
    background-color: white;
}
/* hiermee kunnen we dropdown menus openen on hover!
even in commentaar om de dropdown functie te testen.
.dropdown:hover .dropdown-menu {
    display: block;
}
*/

/*.menu .nav > li > a {
    margin-top:15px;
    padding: 0 15px;
    margin-bottom:15px;
}*/
.menu .navbar {
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    margin-bottom: 10px;
}
.menu .navbar-default .navbar-nav > .active > a, .menu .navbar-default .navbar-nav > .active > a:hover, .menu .navbar-default .navbar-nav > .active > a:focus {
    color: #cc6600;
}
.menu .navbar-nav > li a
{
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:bold;
    font-size: 18px;
    border-right:1px solid #e7e7e7;
}
    .menu .navbar-nav > li:last-child a
    {
        border-right:0;
    }

.toprow .navbar {
    min-height: 40px;
}

.toprow .navbar-nav > li > a {
    padding-bottom: 10px;
    padding-top: 10px;
}

.toprow .navbar-collapse, .toprow .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* custom css */
.toprow{
    background-color:#666666;
    color:#fff;
    min-height:40px;
    text-transform: uppercase;
}

.toprow .navbar-default .navbar-nav > li {
    border-right:1px solid #fff;
}

.toprow .navbar-default .navbar-nav > li > a{
    color:#fff;
}
    .toprow .navbar-default .navbar-nav > li > a:hover
    {
    	color:#cccccc;
    }
    .toprow .search .btn{
        height: 24px;
        font-size: 12px;
        padding: 2px 2px 2px 10px;
    }
        .toprow .search input {
            height:24px;
            padding:0 10px;
        }
        .toprow .search button {
            height:24px;
            padding:0 10px;
        }

.slogan{
    font-size: 72px;
    line-height: 1;
    margin-top: 45px;
}
    .slogan span{
        display:block;
        font-size:36px;
        text-align:center;
    }
.altcolor {
    background-color: #F5F5F5;
}
.logo img{
    max-width:200px;
    width:100%;
    margin: 0 auto;
    padding: 10px 0;
}

.footer{
    position:relative;
    min-height:450px;
    background-color:#434343;
    color:#fff;
    padding:10px 0 100px 0;
}
    .footer-sub{
        position:absolute;
        bottom:0;
        height:100px;
        width:100%;
        background-color:#515151;
        color:#c7c7c7;
        text-align:center;
        font-size:12px;
    }

.footer a:link, .footer a:visited {
    text-decoration: none;
    color: #fd9800;	    
}
.footer a:hover, .footer a:active 
{
    text-decoration: underline;
    color: #cc6600;        
}

.socialmedia{
    text-align:center;
}
    .socialmedia ul{
        list-style:none;
        padding:0;
        display:table;
        margin: 0 auto;
    }
    .socialmedia li{
        float:left;
    }
        .socialmedia li a{
            border: 1px solid #333;
            color: #333;
            border-radius: 100px;
            font-size: 20px;
            height: 40px;
            margin: 10px 3px;
            padding: 10px;
            width: 40px;
        }
        .socialmedia li a:hover{
            border: 1px solid #cc6600;
            color:#cc6600;
            text-decoration:none;
        }
        .footer-sub .socialmedia li a{
            border: 1px solid #fff;
            color: #fff;
        }
        .footer-sub .socialmedia li a:hover{
            border: 1px solid #cc6600;
            color:#cc6600;
        }
.footer .extrainfo {
    font-size: 1.3rem;
}
            
/* search module */
.resultitem
{
    padding: 10px;
    overflow: auto;
    background-color: #ffffff;
}
    .odd
    {
        background-color: #eeeeee;
    }
    .resultitem:hover
    {
        background-color: #E2DED1;
    }
    .resultitem ul
    {
        list-style:none;
    }
#searchbutton{
    margin-top:28px;
}

.validationgroup
{
	color:#ff0000;
	margin-left:15px;
}

.validation
{
	color:#ff0000;
}

.loading{
    background:transparent url('images/ajax-loader.gif') no-repeat 50% 0%;
    height:30px;
}

h1 {
    color: #666;
    font-weight: bold;
    margin-bottom: 20px;
}
h2 {
    position: relative;
    overflow: hidden;
    color: #666;
    margin-bottom: 20px;
}
h3 {
    font-size: 22px;
}
h4 {
    color: #cc6600;
}
.nieuwsitem {
    overflow: hidden;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #cccccc;
    background:url('images/nieuwsgradient.png') no-repeat center bottom;
    background-size: 100% auto;    
}
.nieuwsitem em {
    padding-right: 10px;  
}
.bc_grijs1 {
    background-color: #f6f6f6;
}
.bc_grijs2 {
    background-color: #666666;
}
.bc_wit {
    background-color: #FFF;
}
.grijs6 {
    color: #999999;
}
.oranje {
    color: #cc6600;
}
.mb10 {
    margin-bottom: 10px;
}
.mt30 {
    margin-top: 30px;
}
.mb30 {
    margin-bottom: 30px;
}
.mt50 {
    margin-top: 50px;
}
.mb50 {
    margin-bottom: 50px;
}
.pt15 {
    padding-top: 15px;
}
.pt50 { padding-top: 50px;}
.pb50 { padding-bottom: 50px;}
.pt80 { padding-top: 80px;}
.pb80 { padding-bottom: 80px;}
.fotomenu {
    margin-bottom: 30px;
}
.fotomenu .image {
    padding: 0;
    height: calc(100vw - 30px);
    background-color: #F6F6F6;
    display: flex;
}
.fotomenu .image a {
    margin: auto;
}
.fotomenu div {
    padding: 15px;
}
.fotomenu h2 {
    font-size: 20px;
    margin: 0px;
}
.fotomenu p {
    margin: 0px;
}
.fotomenu img {
    border: 1px solid #f6f6f6;
    margin: auto;
}
.fa {
    padding-right: 10px;
}
.footer h3 {
    margin-top: 6px;
    margin-bottom: 22px;
}
.activiteiten{
    margin-top: 20px;
}
.activiteiten div {
    padding: 8px 15px;
    overflow: auto;
}
.activiteiten h3 {
    color: white;
    margin: 0px;
}

.activiteiten #activities {
    padding: 30px 15px;
}

.activiteiten div div {
    padding: 0px;
    margin: 5px 0px;
}
    .activiteiten #activities a:link, .activiteiten #activities a:visited {
        color:#333;
        text-decoration:none;
        text-transform: uppercase;
    }
    .activiteiten #activities a:hover, .activiteiten #activities a:active {
        color:#cc6600;
        text-decoration:none;
    }
        .activiteiten #activities a span {
            display:block;
            color:#999;
        }

.recentnieuws li {
    margin-bottom: 5px;
}
.recentnieuws ul {
    list-style: none;
    padding: 0px;
}
.instagrampreview {
    max-width: 300px;
}
.instituut a {
    font-weight: bold;
}
.nieuwshome {
    padding: 8px 15px;
    overflow: auto;
    margin: 20px 0;
}
.nieuwshome h3 {
    color: #FFF;
    margin: 0px;
}
.logo img {
    padding: 40px 0px;
}
.buttonsend {
    margin-top: 20px;
    font-size: 16px;
    padding: 5px 30px;
    float: right;
}
input[type="radio"], input[type="checkbox"] {
    margin-right: 5px;
}
hr {
    margin: 35px 0px;
}
.rootlink:hover, .rootlink:active {
    color: inherit;
    text-decoration: none;
}

.dynamicform label p{
    display:inline;
}

#citiesresult {
    position: absolute;
    max-height: 150px;
    border: 1px solid #c1c1c1;
    display: none;
    overflow: auto;
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
    #citiesresult li {
        padding: 2px 10px;
    }
    #citiesresult li:hover {
        background-color: #cc6600;
        color: #ffffff;
        cursor: pointer;
    }
.vorming h3 {
    margin-top: 0px;
}
.vorming {
    border-bottom: 1px solid #eee;
    margin: 15px 0;
    padding-bottom: 20px;
}
.text-right {
    text-align: right;
}

#mainactivity strong{
    display:inline-block;
/*    width:100px; */
    min-width: 100px;
/* width vervangen door min-width */
}

.btn-yf {
    border-radius: 0;
    background-color: #F90;
    color: #FFF;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    border: 0;
    white-space: normal;
}
    a.btn-yf {
        color: #FFF;
    }
.videoslist h3 {
    height: 80px;
    display: table-cell;
    vertical-align: middle;
}
.book h2 {
    margin-top: 0;
    font-size: 2.3rem;
    margin-bottom: 5px;
}
.book .author {
    color: #c60;
}
.book {
    margin-bottom: 50px;
}
.book .btn-yf {
    margin-top: 10px;
}
.book .price {
    font-size: 2rem;
    font-weight: 700;
}

.book2 h2 {
    margin-top: 0;
    font-size: 2.3rem;
    margin-bottom: 5px;
}
.book2 .author {
    color: #c60;
}
.book2 {
    margin-bottom: 50px;
}
.book2 .btn-yf {
    margin-top: 10px;
    width: auto;
}
.book2 .price {
    font-size: 2rem;
    font-weight: 700;
}

.books img{
    max-width: 170px;
    max-height: 225px;
    margin: 10px auto;
}

/* extra css voor cookie warning */
.mt-3 {
    margin-top: 1rem !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}

/* Ellipsis */
.truncate-overflow {
  --lh: 2rem;
  line-height: var(--lh);
}

.truncate-overflow p {
  --max-lines: 4;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines) + 2px);
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.truncate-overflow p::before {
  position: absolute;
  content: "...";
  /* tempting... but shows when lines == content */
  /* top: calc(var(--lh) * (var(--max-lines) - 1)); */
  
  /*
  inset-block-end: 0;
  inset-inline-end: 0;
  */
  bottom: 0;
  right: 0;
}
.truncate-overflow p::after {
  content: "";
  position: absolute;
  /*
  inset-inline-end: 0;
  */
  right: 0;
  /* missing bottom on purpose*/
  width: 1rem;
  height: 1rem;
  background: white;
}


/* End ellipsis */

/* activities */
.activities .blogcontent {
    height: auto;
}
.activities .blogdate {
    font-size: 1.3rem;
}
.activities .description-short {
    margin-top: 10px;
}
.activities .blogcontent .fa {
    padding-right: 0;
}
.activities .blogpreview a {
    color: #666;
    text-decoration: none;
}
.activities .blogpreview a:hover {
    color: #666;
    text-decoration: none;
}
.activities .blogpreview a .blogreadmore {
    color: #cc6600;
    text-decoration: none;
}
.activities .blogpreview a:hover .blogreadmore {
    color: #666;
    text-decoration: none;
}
.activities .blogtitle h2 {
    margin: 10px 0 5px 0;
}
.activities .devider {
    background: #EEE;
    width: 100%;
    margin-top: 7px;
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .activities .description-short {
        height: 95px;
        overflow: hidden;
    }
    .activities .blogcontent {
        height: 230px;
    }
}


 
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

/* Large desktop */
@media (min-width: 1400px) {
    .fotomenu .image {
        height: 262.5px;
    }
}
/* medium desktop */
@media (min-width: 1200px) and (max-width: 1400px) {
   .container {
        width: 1024px;
    }  
    .fotomenu .image {
        height: 226px;
    }
}
     
/* Portrait tablet to landscape and desktop */
@media (min-width: 989px) and (max-width: 1200px) {
    .menu .navbar-nav > li a {
        font-size: 14px;
    }
    .fotomenu .image {
        height: 212.5px;
    }

}

/* Landscape phone to portrait tablet */
@media (min-width: 768px) and (max-width: 992px){
    .menu .navbar-nav > li a {
        font-size: 12px;
    }
    .fotomenu .image {
        height: 345px;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 480px) and (max-width: 768px){
    .menu .navbar-nav > li a
    {
        border-right:0;
    }
    .toprow .navbar-nav {
        display: inline;
    }
    .toprow .navbar-nav li {
        float:left;
    }
    .toprow .navbar-default .navbar-nav > li {
        border-right: 0;
    }
    .slogan{
        text-align:center;
    }
    .toprow .search {
        display:none;
    }
}
     
/* Landscape phones and down */
@media (max-width: 480px) {
    .menu .navbar-nav > li a
    {
        border-right:0;
    }
    .toprow .navbar-nav {
        display: inline;
    }
    .toprow .navbar-nav li {
        float:left;
    }
    .toprow .navbar-default .navbar-nav > li {
        border-right: 0;
    }
    .toprow .navbar-default .navbar-nav > li > a:hover
    {
    	color:#333;
    }
    .slogan{
        font-size:42px;
        text-align:center;
    }
        .slogan span{
            font-size:22px;
        }
    .footer-sub{height:115px;}
    .toprow .search {
        display:none;
    }
    .book2 .bookcover {
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .instituut {
        min-height: 310px;
    }
}