/* svm site versie (bs5.1) geinstaleerd: 20 januari 2024*/

body {background-color: white;font-size: 14px;color: #333;font-family: georgia;}
#top {position: relative;width: 100%;height: 56px;background: #222222;}
#navbar {position: fixed;transition: top .4s;}
.navbar-toggler {margin-right: 10px;}
.navbar img {margin-left: 10px;border: 0;}
.navbar-text {position: relative;margin-left: -30px;padding: 0;font-size: 135%;line-height: 120%;text-align: center;color: white;}
.bg-svm-dark {background-color: #222222!important;}
.jumbotron {color: white;padding: 10px 25px;background-color: #222222;border-radius: 0;margin-bottom: 0;}
.table td { padding:6px}

.lang-link {
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
}

.lang-inner {
    display: inline-flex;
    align-items: center;
}

.lang-inner img {
    height: 18px;
    width: auto;
    margin-right: 6px;
}

.lang-link:hover {
    opacity: 1;
}

#totopBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 20px;
  background: white;
  border: 2px solid grey;
  border-radius: 6px;
  z-index: 99;
  cursor: pointer;
}

.svgtotop {width: 40px;height: 40px;background: white;border-radius: 6px; opacity: .6;}
.polytotop {fill: none;stroke: #333;stroke-width: 3px;}
.teksttotop {font-size: 18px;font-family: Times serif;font-weight: bold;fill: #333;}

.svgtotop:hover {opacity: 1;}

a:link {color: #000099;text-decoration: none;}
a:visited {color: #000099;text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {color: black;text-decoration: none;}

h1, h2, h5 {font-family: Georgia, Arial, Serif;}
h3 {font-family: georgia;font-style: italic;}
h4 {font-family: georgia;font-size: 21px;font-style: italic;}

.nav-link {font-family: georgia;font-size: 16px;font-style: italic;margin: 0 5px;}
.nav-link:hover {color: white!important;}

.navbar-nav .nav-item {font-family: georgia;font-size: 16px;color: grey!important;font-style: italic;margin :0 5px;}
.navbar-nav .nav-link {font-family: georgia;font-size: 16px;color: grey!important;font-style: italic;margin: 0 5px;}
.navbar-nav .nav-link:hover {color: white!important;text-decoration: none;}
.navbar-nav .nav-item .active {color: white!important;}

@font-face {
   font-family: fdpFont;
   src:url(../fonts/VIVALDII.woff);
}

/* class fl geld voor de eerste letter in een zin */
.fl::first-letter {
  font-family: fdpFont, vivaldi, Georgia, serif;
  font-size: 150%;
  color: red;
  line-height: 80%;
  letter-spacing: 3px;
}

/* class rood is te gebruiken voor een willekeurige letter of letters */
.rood {
  font-family: fdpFont, vivaldi, Georgia, serif;
  font-size: 150%;
  color: red;
  width: 2em;
  line-height: 80%;
  letter-spacing: 3px;
}

* {box-sizing: border-box;}

/* Begin styles voor de schrijvers centrale */
    .outer {
      max-width: 400px; 
      height: auto;
	  margin-bottom: -20px;
    }

    .container-flex {
      display: flex;
      align-items: flex-start;
    }

    .left {
      width: 180px;
      padding: 10px 0;
      flex-shrink: 0;
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      overflow: hidden;
    }

    .right img {
      max-height: 140px;
      width: auto;
    }

    @media (max-width: 768px) {
      .right img {
        width: 100%;
        max-width: 140px;
      }
    }
/* Eind styles voor de schrijvers centrale */

p, li {color: #333;font-family: georgia;font-size: 11pt;}
p.date {color: gray;font-family: georgia;font-size: 11px;font-style: italic;}
#agenda p, #publicaties p {border-bottom: 1px solid lightgrey;margin: 0px 5px 0px;padding: 5px;}

#indexfoto {position: relative;margin-top: -20px;width: 100%;max-width: 400px;border: solid 1px white;}

.caption-indexfoto {
    position: absolute;
    bottom: 24px;
    left: 24px;
    font-family: Georgia, Arial, Serif;
    font-size: 8pt;
    color: white;
    font-style: italic;
}
.caption-indexfoto a:link {color: lightgrey;text-decoration:none;}
.caption-indexfoto a:visited {color: lightgrey;text-decoration: none;}
.caption-indexfoto a:hover {color: white;text-decoration: none;}

#agendafoto {position: relative;margin-top: -20px;width: 100%;max-width: 400px;border: solid 1px white;}

.caption-agendafoto {
    position: absolute;
    bottom: 4px;
    left: 24px;
    font-family: Georgia, Arial, Serif;
    font-size: 8pt;
    color: white;
    font-style: italic;
}

.caption-agendafoto a:link {color: lightgrey;text-decoration: none;}
.caption-agendafoto a:visited {color: lightgrey;text-decoration: none;}
.caption-agendafoto a:hover {color: white;text-decoration: none;}

/**** zoek functie *****/
input[type=text] {
  width: 100px;
  box-sizing: border-box;
  border: 1px solid #222;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  background-color: inherit;
  background-image: url('../images/icons.png');
  background-position: -72px -25px; 
  background-repeat: no-repeat;
  padding: 3px 20px 3px 30px;
  margin-left: 30px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input::placeholder {
  color: transparent;
}

input:focus::placeholder, input:hover::placeholder {
  color: white;
}

input[type=text]:hover {
  background-position: -72px -49px;
  border: 1px solid white;
}

input[type=text]:focus {
  width: 200px;
  border: 1px solid white;
}
/**** einde zoek functie *****/

.caption-media {
    position: relative;
    left: 0px;
    top: -24px;
    font-family: Georgia, Arial, Serif;
    font-size: 8pt;
    color: black;
    font-style: italic;
    padding: 1px;
}

.caption-media a:link {color: LightSlateGray;text-decoration: none;}
.caption-media a:visited {color: LightSlateGray;text-decoration: none;}
.caption-media a:hover {color: black;text-decoration: underline;}

/* Create two equal columns */

#publicatiesfoto {position:relative;top:0px;width:100%;max-width:400px;}
.caption-publicatiesfoto {
    position: relative;
    max-width: 400px;
    font-family: Georgia, Arial, Serif;
    font-size: 10pt;
    font-style: italic;
    text-align: center;
}

#contactfoto {position: relative;top: -20px;width: 100%;max-width: 400px;border: solid 1px white;}

.caption-contactfoto {
    position: absolute;
    bottom: 24px;
    left: 24px;
    font-family: Georgia, Arial, Serif;
    font-size: 8pt;
    color: white;
    font-style: italic;
}
.caption-contactfoto a:link {color: lightgrey;text-decoration: none;}
.caption-contactfoto a:visited {color: lightgrey;text-decoration: none;}
.caption-contactfoto a:hover {color: white;text-decoration: none;}
.navbar-text {display: none}

/* Publicaties > producten */
.incl-product {border-bottom: 1px solid lightgrey;}
.incl-product p {border-bottom: 0!important;}
.incl-product .btn {margin-left: 10px;font-size: 13px;padding: 0px 6px 1px;}
.incl-product .btn:hover .udp {border: solid #fff;border-width: 0 2px 2px 0;}
.incl-product em {font-style: italic;font-size: 115%;color: black;}

.udp { /* udp = up down pijl */
  border: solid #5cb85c;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  margin: 0px 0px 2px 10px;
  transition: all 0.4s ease;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.up {
  margin: 0px 0px -2px 10px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
}

.aud {
  position:absolute;
  right:10px;
  bottom:10px;
  padding: 10px 10px 0;
  cursor:pointer;
}

.au {
  position:relative;
  border: solid grey;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 6px;
   transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.aud:hover .au {border-color: black;}

.product {
  position: relative;
  max-width: 350px;
  margin: 5px;
  padding: 2px;
  background: white;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

.product .imgdiv {
  position: relative;
  padding:2px 2px 10px;
  text-align: center;
  color: white;
  background: white;
}

.product img {border-radius: 4px;}

.product .imgcaption {
  position: absolute;
  padding: 2px 12px;
  color: #fff;
  font-family: Georgia, Arial, Serif;
  font-style: italic;
  font-size: 140%;
  text-align: center;
  text-shadow: 2px 1px 1px black;
  bottom:22px;;
  right:0;
  left: 0;
}

.product .btn {margin:4px;}
.product .btn:hover {text-decoration: none;}
.product .btn-close {float: right}
/* Einde publicaties > producten */

@media only screen and (max-width: 767px) {
    .fixed-top {position: static;}
    #indexfoto, #agendafoto, #publicatiesfoto, #contactfoto {margin-top: 20px}
    .jumbotron {display: none;}
    .jumbotron404 h2 {display: none}
    .navbar-text {display: block}
}