@import url('https://fonts.googleapis.com/css?family=Cardo');
/*
Theme Name: Spierenburg
Description: Spierenburg is een minimaal thema, ontwikkeld door Webrandt in opdracht van ApeToZebra voor firma Spierenburg. Het thema maakt gebruik van het Bootstrap framework en een LESS preprocessor.
Author: Jacques Uljé
Author URI: http://www.webrandt.nl
Version: 0.1
*/
@font-face {
  font-family: 'SofiaProRegular';
  src: url('webfonts/SofiaProRegular.eot');
  src: url('webfonts/SofiaProRegular.eot?#iefix') format('embedded-opentype'), url('webfonts/SofiaProRegular.woff') format('woff'), url('webfonts/SofiaProRegular.woff2') format('woff2'), url('webfonts/SofiaProRegular.ttf') format('truetype'), url('webfonts/SofiaProRegular.svg#SofiaProRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  margin: 0px;
  padding: 0px;
  height: 100%;
}
body {
  font-family: 'Cardo', serif;
  font-size: 18px;
  line-height: 28px;
  color: #1e1e1e;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  height: 100%;
  background-color: #ced2d4;
}
/**********************
       CONSTANTS
***********************/
/**********************
        MIXINS
***********************/
/**********************
         STYLES
***********************/
h1 {
  font-family: 'SofiaProRegular', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  line-height: 60px;
  color: #1e1e1e;
  text-decoration: none;
  margin: 40px 0px 40px 0px;
}
@media only screen and (max-width: 480px) {
  h1 {
    font-size: 30px;
    line-height: 40px;
  }
}
h2 {
  font-family: 'SofiaProRegular', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 24px;
  color: #1e1e1e;
  text-decoration: none;
  margin: 40px 0px 40px 0px;
}
#separator {
  margin-top: 40px;
}
hr {
  border-color: #000;
}
a {
  background: none;
  padding-left: 0px;
  margin: 0px;
  text-decoration: underline;
  color: #f9f9f9;
}
a:hover {
  color: #f9f9f9;
}
a:visited {
  color: #a0a5aa;
}
p {
  margin: 0px 0px 20px 0px;
}
strong {
  font-weight: 700;
}
.container {
  max-width: 990px;
}
img {
  max-width: 100%;
  height: auto;
}
.alignleft {
  float: left;
  padding: 5px 20px 15px 0px;
}
.img-responsive {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 0px solid #000;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
#header {
  width: 100%;
  height: 110px;
  background: #f9f9f9;
  padding: 20px 0px 15px 0px;
  margin: 0px 0px 0px 0px;
}
/* #wrap, #content en #footer noodzakelijk om footer bij weinig content uit te lijnen onderkant pagina, body html 100% noodzakelijk */
#wrap {
  width: 100%;
  min-height: 100%;
  min-width: 270px;
  position: relative;
  border: 0px solid #000;
  margin: 0 auto;
}
#content {
  padding-bottom: 320px;
  /* Height of the footer element */
  border: 0px solid #000;
}
@media only screen and (max-width: 480px) {
  #content {
    padding-bottom: 0px;
  }
}
#footer {
  min-height: 320px;
  padding: 70px 0px 0px 0px;
  width: 100%;
  background-color: #1e1e1e;
  color: #f9f9f9;
  overflow: hidden;
  /* om footer bij weinig content uit te lijnen onderkant pagina, ook div wrap en div content en body html 100% noodzakelijk */
  position: absolute;
  z-index: 1000;
  bottom: 0;
}
#footer p {
  color: #f9f9f9;
}
@media only screen and (max-width: 480px) {
  #footer {
    position: relative;
  }
}
.logofooter {
  height: 100px;
  width: auto;
}
.logoheader {
  height: 70px;
  width: auto;
}
.logoosfooter {
  vertical-align: middle;
  padding: 30px 0px 30px 0px;
}
.logoos {
  text-align: center;
  margin-bottom: 100px;
}
.leesmeer {
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  color: #1e1e1e;
  padding-bottom: 20px;
}
.leesmeer:hover,
.leesmeer:focus {
  text-decoration: underline;
}
.section {
  padding: 0px 0px 25px 0px;
}
.section .intro {
  font-size: 25px;
  line-height: 35px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.section.intro {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
}
@media only screen and (max-width: 480px) {
  .col-xs-6 {
    width: 100%;
    margin-bottom: 40px;
  }
}
.gray {
  background-color: #d2d2d2;
}
/************************************************
*    Column Shortcode Plugin CSS                *
************************************************/
.one_half,
.one_third,
.two_third,
.last_column {
  padding: 0px 27px 0px 27px;
}
/************************************************************************/
/* Caroussel                                                            */
/************************************************************************/
#slider1 {
  margin-top: 90px;
}
@media only screen and (max-width: 480px) {
  #slider1 {
    margin-top: 40px;
  }
}
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}
#carrouselwrap {
  position: absolute;
  display: block;
  border: 0px solid red;
  width: 100%;
  height: 100%;
}
.carousel-inner,
.carousel {
  height: 100%;
  background-color: #808080;
}
.carousel-indicators {
  bottom: 0px !important;
}
.carousel-indicators li {
  margin-right: 5px !important;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
  margin-right: -40px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
  margin-left: -40px;
}
/************************************************************************/
/* Media queries (mobile first: gelijk of groter - min-width -          */
/************************************************************************/