/* pitagon-sans-text-latin-300-normal */
@font-face {
  font-family: 'Pitagon Sans Text';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(pitagon-sans-text-latin-300-normal.woff2);
}
body {
  font-family:'Pitagon Sans Text', sans-serif;
  font-weight:300;
  font-size:16px;
  width:100%;
  height:100%;
  background-color:#ede8ff;
  margin:0;
  padding:0
}
#backgroundimage {
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  background-image:url(../img/bg3.svg);
  background-repeat:no-repeat;
  background-position:bottom right;
  background-size:contain;
  z-index:-10;
}
@media screen and (min-width: 769px) {
  #backgroundimage {
    background-image:url(../img/bg3_links.svg);
    background-position:bottom left;
  }
}
h1 {
  font-size:6vw;
  line-height:1.25em;
}

h2 {
  font-size:6vw;
  line-height:1.15em;
}
h3 {
  font-size:4vw;
  line-height:1em;
}
h4 {
  font-size:2.5vw;
  line-height:0.8em;
}
h1,
h2,
h3,
p {
  font-weight:300
}
#main_header {
  background:#9a8ad4;
  background:linear-gradient(30deg, #9a8ad4 70%, #fff 100%);
  height:12vmax;
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:8;
}
@media screen and (min-width: 769px) {
  #main_header {
    height:130px
  }
}
#main_header h1 {
  color:#FFF;
  font-size:7.2vmin;
  position:absolute;
  left:5%;
  bottom:42%;
  margin:0;
}
@media screen and (min-width: 769px) {
  #main_header h1 {
    font-size:45px;
    left:336px
  }
}
#main_header h2 {
  color:#FFF;
  font-size:3.5vmin;
  margin:0;
  position:absolute;
  left:9%;
  top:59%
}
@media screen and (min-width: 769px) {
  #main_header h2 {
    font-size:16px;
    left:350px
  }
}
#eco-logo {
  position:absolute;
  right:3%;
  height:40%;
  width:auto;
  top:50%;
  transform:translateY(-50%)
}
@media screen and (min-width: 769px) {
  #eco-logo {
    height:32%
  }
}
#hoofdmenu {
  position:fixed;
  top:12vmax;
  background-color:rgba(255,255,255,0.77);
  border-bottom-left-radius:5px;
  right:0;
  text-align:right;
  z-index:7
}
@media screen and (min-width: 769px) {
  #hoofdmenu {
    top:300px;
    text-align:left;
    left:7%;
    background:none;
    right:auto
  }
}
#hoofdmenu a {
  font-size:200%;
  text-transform:uppercase;
  color:#666;
  text-decoration:none;
  padding-right:9px;
  padding-left:9px;
  padding-bottom:0.5em;
  display:none
}
@media screen and (min-width: 769px) {
  #hoofdmenu a {
    font-size:110%;
    display:block;
    margin-bottom:0.5em
  }
}
a#menu_button {
  display:block;
  padding-bottom:0
}
@media screen and (min-width: 769px) {
  a#menu_button {
    display:none
  }
}
#hoofdmenu.uitgeklapt {
  width:100%
}
@media screen and (min-width: 769px) {
  #hoofdmenu.uitgeklapt {
    width:30%
  }
}
#hoofdmenu.uitgeklapt a {
  display:block
}
@media screen and (min-width: 769px) {
  .uitgeklapt#menu_button {
    display:none
  }
}
#hoofdmenu a.nav-selected {
  color:#9a8ad4
}

/*FOTOS*/
#foto-carrousel {
  position:absolute;
  width:100%;
  height:22%;
  top:12vmax;
  background-color:none;
  /* overflow:hidden; */
}
#foto-carrousel img {
  margin-top:0px;
}
@media screen and (min-width: 769px) {
  #foto-carrousel {
    top:0;
    left:0;
    width:320px;
    height:240px;
    position:fixed;
    z-index:14
  }
  #foto-carrousel img {
    margin-top:0;
    min-width:320px;
    min-height:240px;
    border-bottom-right-radius:180px;
    border-bottom-left-radius:35px
  }
}
@media screen and (min-width: 769px) {
  #foto-carrousel img {
    margin-top: 0px;
  }
}

.monsterGallery-grid{
  margin-left: 3%;
}


#page_title {
  color:#9a8ad4;
  position:absolute;
  background-color:rgba(255,255,255,0.6);
  font-size:8vw;
  border-radius:15px;
  text-align:right;
  top:33%;
  left:-2%;
  padding-left: 0.5em;
  padding-right:3%
}
@media screen and (min-width: 769px) {
  #page_title {
    top:120px;
    right:0;
    left:auto;
    padding-right:0;
    width:65%;
    text-align:left;
    padding-left:2%;
    font-size:3em;
    margin-bottom:0.75em;
    border-radius:0px;
    border-top-left-radius:15px;
    border-bottom-left-radius:15px
  }
}
main {
  position:absolute;
  top:45%;
  width:100%;
  overflow:hidden
}
@media screen and (min-width: 769px) {
  main {
    top:245px;
    width:75%;
    right:0
  }
}
article {
  margin-left:auto;
  margin-right:auto;
  margin-top:5%;
  width:90%;
  background-color:rgba(255,255,255,0.6);
  border-radius:15px
}
@media screen and (min-width: 769px) {
  article {
    width:72%;
    position:relative;
    margin-bottom:0;
    padding-bottom:21px;
    margin-top:0
  }
}
article h1,
article h2 {
  margin-bottom:0.7em;
  padding-top:2%;
  color:#9a8ad4
}
@media screen and (min-width: 769px) {
  article h1,
  article h2 {
    font-size:2.1em
  }
}
article h1:first-child,
article h2:first-child {
  padding-top:5%
}
article h3 {
  margin-bottom:0.7em;
  padding-top:1%;
  color:#9a8ad4
}
@media screen and (min-width: 769px) {
  article h3 {
    font-size:1.5em
  }
}
article h4 {
  margin-bottom:-0.7em;
  color:#9a8ad4
}
@media screen and (min-width: 769px) {
  article h4 {
    font-size:0.9em
  }
}
article img {
  display:block;
  max-width:100%;
  height:auto
}
@media screen and (min-width: 769px) {
  article img {
    height:inherit
  }
}
article iframe {
  display:block;
  max-width:100%
}
article p,
article ul {
  font-size:1em;
  padding-bottom:1em
}
@media screen and (min-width: 769px) {
  article p,
  article ul {
    font-size:1em;
    max-width:750px
  }
}
article ul {
  padding-left:10%;
  padding-right:5%
}
article h1,
article h2,
article h3,
article h4,
article table,
article p {
  padding-left:5%;
  padding-right:5%
}
article p:first-child {
  padding-top:3em
}
article li {
  margin-bottom:1em
}
article a:link {
  color:#9a8ad4;
  text-decoration:none
}
article a:visited {
  color:#9a8ad4;
  text-decoration:none
}
article a:hover {
  color:#9a8ad4;
  text-decoration:underline
}
article a:active {
  color:#9a8ad4;
  text-decoration:none
}

article .btn {
  margin-left:120px;
  background:#9a8ad4;
  background-image:-webkit-linear-gradient(top, #9a8ad4, #9080cf);
  background-image:-moz-linear-gradient(top, #9a8ad4, #9080cf);
  background-image:-ms-linear-gradient(top, #9a8ad4, #9080cf);
  background-image:-o-linear-gradient(top, #9a8ad4, #9080cf);
  background-image:linear-gradient(to bottom, #9a8ad4, #9080cf);
  -webkit-border-radius:17;
  -moz-border-radius:17;
  border-radius:17px;
  color:#ffffff;
  font-size:20px;
  padding:11px 20px 10px 20px;
  text-decoration:none
}
article .btn:hover {
  background:#7355ee;
  background-image:-webkit-linear-gradient(top, #b8ace6, #a698e0);
  background-image:-moz-linear-gradient(top, #b8ace6, #a698e0);
  background-image:-ms-linear-gradient(top, #b8ace6, #a698e0);
  background-image:-o-linear-gradient(top, #b8ace6, #a698e0);
  background-image:linear-gradient(to bottom, #b8ace6, #a698e0);
  text-decoration:none
}
div.link p {
  padding-bottom:0
}
div.link:last-of-type {
  padding-bottom:45px
}
.ogfm-wrapper{
  display:inline;
  margin-left: 30px;
}
.ogfm-description{
  display: none;
}