/* trying to unmess the bootstrap mess */
.fluid-container{
  margin-left: 15px;
  margin-right: 15px;
}
.dropdown-menu{
  border: none;
}

.mega-dropdown-menu {
  margin-top: -10px!important;
  padding: 10px 0;
  left: 0!important;
  right: 0!important;
  margin: 0 auto;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.panel{
  margin-bottom:0px;
  box-shadow:none;

  display:flex;
  flex-direction:column;
}

.no-column-gutter{
  padding-left:0;
  padding-right:0;
}
.no-column-gutter>.post{
  margin-bottom: 0;
  margin-top:0
}
.no-column-gutter>.button-a{
  margin-bottom: 0;
  margin-top:0
}


.row-bottom-padding{
  padding-bottom:15px;
}

.no-post-margin{
  margin:0;
}

.navbar-brand{
  padding:0;
}

.navbar-brand>img{
  padding:5px;
  /* popout */
  z-index:10;
  /* popout */
  width: auto;
}

.team-member{
  text-align:center;
  height:300px;
  font-size:.7em;
}

.no-container-margin{
  margin-left:0;
  margin-right:0;
}

.team-member-img{
  object-fit:cover;
  width:200px!important;
  height:200px!important;
  border-radius:99999999px;
}

.row-link{
  min-height:45vh;
  display:block;
}

.ratio-img{
  width: 100%;
  height: auto;
  max-height: 50vh;
}
.panel-body{
  position: relative;
  flex:1;
  display: flex;
  flex-direction: column;
}

/* calendar heading center vertically */
.nav_top, .nav_bot{
  display: flex;
  align-items: center;
}
.calendar_nav_arrow{
  font-size:1.5em;
  padding:4px;
}

/* panel-heading-title */
.panel-heading-title{
  padding:5px;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  text-align:center;  
  font-size:1.25em;
  color:#FFFFFF;
  text-shadow:0px 0px 4px rgba(0,0,0,.55);
  transform:translateY(0%);
  transition:transform .25s ease-in-out;
}

/* nav bar sticky */
.sticky-bar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}


/* google maps kader */
.google-maps{
  position:relative;
  background-position:center;
  background-size:cover;
}

.google-maps .panel-body{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

.google-maps .panel-body a{
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.panel-heading{
  border:none;
  overflow:hidden;
  position:relative;

}


.full-heading-link{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***********************/
/* kader x, alle kaders die de curtain hebben en een panel-heading */
/***********************/
[class*="kader-type-"] .panel-heading img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform .35s ease-in-out;
  max-height:250px;
  object-fit: contain;
  width: 100%;
  height: 100%;
  
  background: transparent!important; /* fixing black borders around animating png */
}

.panel-heading-cover-img{
  object-fit: cover!important;
}

[class*="kader-type-"] .panel-heading .curtain{
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:.15;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  transition:opacity .35s ease-in-out;
}

/* hover kader type, target child */
[class*="kader-type-"]:hover .panel-heading img{
  transform:scale(1.05);
  
}
[class*="kader-type-"]:hover .panel-heading-title{
  transform:translateY(-20%);
  
}




[class*="kader-type-"]:hover .panel-heading .curtain{
  opacity:.5;
}


hr {
width: 100%;	
}



.button-a{
  z-index: 10;
  text-align: center;
  text-decoration:none!important;
  cursor:pointer;
  position:relative;/* because flash effect is absolute positioned*/
  display:flex;
  justify-content: center;
  align-items:center;
  box-shadow:none!important;
  filter: saturate(100%) brightness(100%);
  transition:filter .25s ease-in-out, box-shadow .25s ease-in-out;
  padding:5px;
  margin:0px 0px 15px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.button-a:hover{
  text-decoration:none;
  
  filter: saturate(113%) brightness(113%);
}

.button-shadow:hover{
  box-shadow:2px 2px 4px rgba(0,0,0,.25)!important;
}

.button-a a{
  text-decoration: none;
}
/*
.button-a:hover>.flashtop{
  transform:translateX(0%);
}



.button-a .flashtop{
  background-color:rgba(155,255,255,.2);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform:translateX(100%);
  transition:transform 4.25s ease-in-out;
}
*/

.button-a:hover>.flashtop{
  transform:translateX(0%);
}

/*
.button-a a{
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border:2px solid blue;
}
*/
/*
.button-a a:hover>.button-a{
  border:5px solid red!important;
}
*/






/* drop down menu animation */
.dropdown>.dropdown-menu{
  box-shadow: 0 6px 6px rgba(0,0,0,.175);
  -webkit-box-shadow: 0 6px 6px rgba(0,0,0,.175);
  display:inline-block;
  transform-origin: top left;
  transform:scale(1,0);
  opacity:0;
  transition:all .20s ease-in-out;
}

.dropdown.open>.dropdown-menu{
  display:inline-block;
  opacity:1;
  transform:scale(1,1);
}

/* link color in menu aniumate */
li a{
  transition:color .20s ease-in-out;
}

.navbar-nav{
  margin: 7.5px 0px;
}

.box-shadow{
  box-shadow: 2px 2px 4px rgba(0,0,0,.25);
  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.25);
}

/*fix to bootstrap icon bar */
.icon-bar
{
    border:1px solid #ddd;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent!important;
}

.post {
  margin: 0 0 15px;
  width: 100%;
/*float: left;*/
}

.frontpage h1,h2,h3,h4,h5,h6 {
  margin:0;
}
#grid.container .post img { padding: 0; }

.content{
  min-height: 430px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
img {
  height: auto !important;
  max-width:100%;
}
td {
padding: 2px;
}
.header_bg .logo {
  /*float: left;
  margin: 5px 0 0 0;*/
}
.logo {
  /*width: 100%;*/
}
.logo2 {
  float:left;
  width:80%;
  margin: 5px 0 0 0;
}

.padding10 {
  padding-top:10px;
  font-size:0;
  line-height:0;
}
.padding12 {
  padding-top:12px;
  font-size:0;
  line-height:0;
}
.padding15 {
  padding-top:15px;
  font-size:0;
  line-height:0;
}
.panel-heading {
  border-radius: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu{margin-top:-10px!important;padding:10px 0;left:0;right:0;margin:0 auto;box-shadow:none;-webkit-box-shadow:none}
.mega-dropdown-menu>li>ul{padding:0;margin:0}
.mega-dropdown-menu>li>ul>li>a{display:block;padding:3px 5px}
.mega-dropdown-menu>li ul>li>a:focus,.mega-dropdown-menu>li ul>li>a:hover{color:#000;text-decoration:none} 
/* from http://avexdesigns.com/responsive-youtube-embed/ */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
}
.pdf_box {
  clear: both;
}
/* ================= Forms ================= */
input, textarea {
  border:1px solid #cccccc;
/*  padding:3px 10px 3px 10px;*/
  color:#000000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  line-height: 14pt;
}
.navbar-collapse{
  padding:0px;
}
.navbar-container{
  position: relative;
  z-index: 1000;
  box-shadow: 0 6px 6px rgba(0,0,0,.175);
  -webkit-box-shadow: 0 6px 6px rgba(0,0,0,.175);
}
.navbar {
  min-height: auto!important;
  padding: 4px 15px;
  margin-bottom: 0;
  margin-top:0;
  /*margin-right:15px;
  margin-left:15px;*/
  z-index: 10;  /*menu behind content fix */
  border: 0px solid transparent;
}



.navbar-default {
    border-color: inherit;
}
.navbar-form {
  margin-top: 0;
  margin-bottom: 0;
}
ul.submenu {
	list-style: none;
}
.dropdown-header {
  padding-left: 0!important;
  white-space: normal;
}

.form-control {
height: 25px;
}
#breadcrum {
  /*margin: 0 auto;*/
  padding: 3px 0 0 0;
  font-size: 9pt;
  color: #191919;
  height: 25px;
  text-align: right;
  background-color: #EEEEEE;
  display: inline-block;
  padding: 4px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.25);
}
.youtube-player {
    max-width: 100%;
}
.searchform, .searchform2 {
float:right;
margin: 8px 15px 0 0;
}
.searchform2 {
float:right;
width:20%;
margin: 1em;
}
.searchform2 input {
float:right;
}
/* ================= Footer ================= */
#footerwrapper p, #footerwrapper p a {
  padding: 5px 7px;
}
.clear {
  content:".";
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}
/* ================= Homepage Widgets ================= */
.recent_post_slider .slides_container {
  width:238px;
  display:none;
}
.recent_post_slider .slides_container div.slide {
  width:238px;
  display:block;
}

.line {
  font-size:0px;
  margin: 0 auto;
  border-top:1px solid #d9d9d9;
  padding-bottom: 10px;
}
.recent_works_left {
  float:left;
}
.recent_works_left h2 {
  margin-bottom:10px;
}
.recent_works_left h2 strong {
  font-weight:700;
}
.recent_works_arrows {
  float:right;
  padding:11px 0 3px 0;
}
.recent_works_arrows a.prev_item {
  position:absolute;
  margin-left: -1160px;
  margin-top: 90px;
  width:22px;
  height:22px;
  margin-right:8px;
  background:url("images/portfolio_prev.png") no-repeat top;
}
.recent_works_arrows a.prev_item:hover {
  background:url("images/portfolio_prev.png") no-repeat bottom;
}
.recent_works_arrows a.next_item {
  position: absolute;
  margin-top: 90px;
  margin-left: 30px;
  width: 22px;
  height: 22px;
  background: url("images/portfolio_next.png") no-repeat top;
}
.recent_works_arrows a.next_item:hover {
  background:url("images/portfolio_next.png") no-repeat bottom;
}
.recent_works {
  padding: 0 0 0 0;
  margin: 0 0 0 15px;
  width: 100%;
  height: 210px;
}
.recent_works ul{
list-style-type: none;
}
.recent_works ul:after {
  content: "";
  display: block;
  height:0;
  overflow:hidden;
  clear:both;
}
.recent_works ul li {
  margin:0 10px 10px 10px;
  float:left;
  background:#FFF;
  text-align: center;
}
.recent_works ul li .recent_image {
  padding:5px;
  border:1px solid #cccccc;
  display:block;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  position:relative;
}

.recent_works ul li .title {
  text-align:left;
  display:block;
  padding:10px 0 10px 10px;
  font-size:10pt;
  color:#262626;
  max-width: 150px;
}
.recent_works ul li .title a {
  font-size:10pt;
  color:#262626;
  font-weight:bold;
}
.recent_works ul li .title a:hover {
  color:#d93e39;
}
.recent_works ul li .clear {
  display:block;
  clear:both;
  padding:5px 0 0 0;
}
.caroufredsel_wrapper {
   height: 200px !important;
}

/* ================= Syndeocms stuff ================= */
#header {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.section_text {
  display: none;
}

/* [DEL]*/
.sas_module_table {
  /*width: 90%;*/
}

li.module_entry  {
  list-style-image: url(../../../syndeo_data/media/template_images/WebDesignEditor3/home_item_bullet.gif);
  margin-left: 0;
}
ul.module_entry {
  padding-left: 15px;
}
.module_link {
  margin-left: 5px;
}
.module_link a{
  color: #FFFFFF;
}
p.nieuwsdatum {
  color: #a81201;
  font-style: italic;
}
#slideshow > div {
  position: absolute;
  left: 10px;
  right: 10px;
}
.module_content {
  padding: 10px;
}
.upload_image {
    float: left;
    padding: 5px 10px 5px 0!important;
}
.upload_text {
	float: left;
}
.module_wrap input{
border: solid 1px #4089BC;
}
.module_wrap {
 min-height: 120px;
 /*padding:10px;*/
}
.innertop {
  height:40px;
  background-color: #179BD3;
  border-radius: 10px 10px 0 0 ;
}
.inner_content {
  padding: 10px;
}
#slideshow {
margin: 0 auto;
position: relative;
padding: 10px;
}
p.titel {
font-size: 14px;
}
.datum {
font-size: 14px;
color: #E66EE4;
}

figure.image {
  display: table;
  text-align: center;
  padding: 10px;
  margin: 10px 20px;
}

figure.image figcaption {
  text-align: center;
}
.tweet {
width: 94%;
}
/* module specific css */
.sas_module_picture {
margin: 5px 0 5px 0;
background: #FFFFFF;
display: block;
padding: 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px #888888;
-webkit-box-shadow: 0 0 5px #888888;
box-shadow: 0 0 5px #888888;
border-style:solid;
}

#theForm {
padding: 6px 6px 6px 6px;
-moz-border-radius:12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
}
button {
  line-height: 18pt;
}
.button {
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff, #cfcfcf);
  border: 1px solid #999999;
  border-radius: 4px;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 15px;
  padding: 2px 15px;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.button:hover {
  background-color: #83c0ed;
  background-image: linear-gradient(to bottom, #83c0ed, #e0f2fb);
  border: 1px solid #7a7a7a;
  color: #000000;
  text-decoration: none;
}
#theTable {
  border-spacing: 2px;
  border-collapse: separate;
  background-color: #CECECE;
}
.sas_module_error {
/* geeft de kleur van foutboodschappen */
color: red;
}
.sas_module_link {
/* Hier kan je de url links in modules stylen*/
text-decoration: underline;
}
.sas_module_col1 {
width: 48%;
float: left;
margin-right: 20px;
}
.sas_module_col2 {
width:48%;
float: left;
}
.kader1{
padding: 5px 10px;
background: #eee;
border: 1px solid #ccc;
}
input[type=button] {
  width: auto;
}
/* ======================================================================================================
 MEDIA QUERIES
=======================================================================================================*/

/* unsticky menu if wider then */
@media (max-width:992px){
  .navbar{
    /* never sticky menu */
    position:relative!important;
  }
  .navbar-brand img{
    max-height:100%;
  }
  .panel{
    min-height:auto!important;
    margin-bottom:15px;
  }
}

@media (min-width: 992px){
  .mega-dropdown {
      position: static!important;
  }
}

@media (max-width: 1024px) {
	.navbar, .container .navbar {
	width: 100%;
	}
}

/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I'm
being really picky about whitespace. If you don't care, no problem, just delete this.
Can this be done with Masonry options? */

@media (min-width: 1300px) {
  #grid {
    left: -50px;
    padding-left: 50px;
    padding-right: 50px;
    position: relative;
      }
  #grid.container {
    left: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ================= Tablet (Portrait) 768px - 959px ================= */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* ================= Logo and Main menu ================= */
.navbar {
  /*margin: 0 auto;*/
  width: 100%;
}

.content {
  /*margin-right:20px;*/
}
.logo {
  display: block;
  float: none;
}
.searchform2 input {
width: 150px;
}

/* ================= Recent Works on Homepage ================= */
.recent_works {
  width:648px !important;
  margin-left: 40px;
}
.recent_works_arrows a.prev_item {
  margin-left: -736px;
}
.header_bg .logo {
  width: 700px;
}
}
@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}


.flex-caption *{
  line-height:100%;
}


.flexslider .slides .flex-caption{
  text-align:center;
  font-size: 20pt;
  transition: font-size .25s ease-in-out;
  line-height:25px;
  padding-left:40px;
  padding-right:40px;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 1s ease-in-out, opacity .45s ease-in-out;
}

.flexslider .slides .flex-active-slide .flex-caption
{
  opacity: 1;
  transform: translateY(0%);
}





/* ================= Mobile (Portrait) < 767px ================= */
@media only screen and (max-width: 767px) {
/* ================= Logo and Main menu ================= */
/*
.col-md-4 , .col-md-8{
  padding-right: 1px!important;
  padding-left: 1px!important;
}
*/


.nav > li, .nav > li a:hover {
    border-radius: 0;
}
.section_text {
display: inline;
margin-left: 15px;
}
/* [DEL]
.content  {
  padding:10px 10px 0 10px;
  width:100%;
}
*/
.logo {
  display:block;
  float:none;
  text-align:center;
}
.searchform2 {
width: 100%;
}
.searchform2 input {
width: 150px;
}
.header_bg {
  height: auto;
}
.flex-caption {
font-size: 16pt;
}
.data_table {
width: 100% !important;
}

/* ================= Recent Works on Homepage ================= */
.recent_works {
  width: 230px !important;
}
.recent_works_arrows a.prev_item {
  margin-left: -290px;
}
}

/* ================= Mobile (Landscape) 480px - 767px ================= */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* ================= Logo and Main menu ================= */
/* [DEL]
.content {
  margin-right:0;
}
*/
/*
.col-md-4, .col-md-8 {
padding-right: 1px;
}
*/
.logo {
  display: block;
  float: none;
}
.flex-caption {
font-size: 13pt;
}
.recent_works_arrows {
  display: none;
}
/* ================= Recent Works on Homepage ================= */
.recent_works {
  width:320px !important;
}
.recent_works ul li {
  margin:0 0 60px 0;
}

.recent_works_arrows a.prev_item {
  margin-left: -410px;
}
#footerwrapper  {
  width:100%;
  float: none;
  margin:40px auto 0 auto;
}
}

/* ================= Mobile (Portrait) < 320px ================= */
@media only screen and (max-width: 317px) {
  /*
  .col-md-4, .col-md-8 {
    padding-right: 1px;
  }
  */
  .content {
    margin-right:0;
  }
  .flex-caption {
    font-size: 10pt;
  }
  .header_bg .logo {
    width: 226px;
  }
  #footerwrapper  {
    margin:40px auto 0 auto;
    width:226px;
  }
}