/** Cranberry Responsive Drupal 8 Theme door Wicked Fruit www.wickedfruit.com **/

/** font **/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

/** body & page **/
body, html { overflow-x:hidden; }
html {height: 100%;}
body {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 160%;
  color: #121212;
  font-weight: 400;
  min-height: 100%;
}

/* html-elements */
p {
  font-size: 15px;
  line-height: 160%;
  margin-bottom: 1em;
}
em {
  font-style: italic;
}
a {
  color: #121212;
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-weight: 500;
  margin-bottom: 15px;
  line-height: 150%;
  }
h1 {
  color: #000;
  font-size: 1.6em;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
h2 {
  font-size: 1.3em;
  margin-bottom: 0.5em;
}
h3 {
  font-size: 1.2em;
}
h4, h5, h6 {
  font-size: 1em;
  }
ul, ol {
  margin-left: 20px;
}
.spacer {
  clear: both;
}
/** header **/
.header-bottom {
  background: #121212 url(/sites/default/files/logobase4.png) no-repeat center 17px;
  padding: 5px 20px 0 20px;
}
.header-bottom > div {
  margin: 0 auto;
  max-width: 1170px;
  width: 100%;
}
#block-jules-sitebranding {
    float: left;
    margin: 12px 0px 9px 0px;
    width: 45%;
}
#block-jules-sitebranding img {
  display: none;
  height: auto;
  max-width: 185px;
  width: 100%;
}
#block-jules-zichtbaarformulierproduct-searchpage-1 {
  background-color: #121212;
  box-sizing: border-box;
  display: none;
  padding: 0 0 6px 0;
  width: 100%;
}
body:not(.path-frontpage) #block-jules-zichtbaarformulierproduct-searchpage-1 {
  top: 55px;
}
#block-jules-zichtbaarformulierproduct-searchpage-1 input {
  border: 1px solid #e3e3e3;
  box-sizing: border-box;
  height: 30px;
  padding: 6px;
  width: 100%;
}
#block-jules-zichtbaarformulierproduct-searchpage-1 .form-item,
#block-jules-zichtbaarformulierproduct-searchpage-1 .form-actions {
  display: table-cell;
  vertical-align: bottom;
  width: 100%;
}
#block-jules-zichtbaarformulierproduct-searchpage-1 input.form-submit {
  background: url(../images/search.png) no-repeat center #ffc421;
  border: none;
  cursor: pointer;
  font-size: 0;
  width: 30px;
  height: 30px;
  vertical-align: top;
}
/** footer **/
footer #block-jules-googlemap p {
  line-height: 0.1;
  margin: 0;
}
/**  main **/
main {
  box-sizing: border-box;
  display: block;
  margin: 0px auto;
  max-width: 1170px;
  overflow: hidden;
  padding: 20px 20px 40px 20px;
  position: relative;
  width: 100%;
}
.layout-container {
  margin: 0px auto;
}
.no-sidebar .layout-content,
.layout-content {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 2;
  width: 100%;
}
#block-hamburger {
  box-sizing: border-box;
  float: left;
  margin: 5px 20px 11px 0;
}
.hamburger {
  background: url('../images/hamburger.png') repeat-x center center;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 30px;
  width: 30px;
}
#block-search {
  box-sizing: border-box;
  cursor: pointer;
  float: right;
  margin: 5px 0 0 0;
}
.searchicon {
  background: url(../images/search.png) no-repeat center #ffc421;
  border: none;
  cursor: pointer;
  font-size: 0;
  width: 30px;
  height: 30px;
  vertical-align: top;
}
.open .searchicon {
  background-color: #999;
}
/** sidebars **/
.layout-sidebar-first,
.layout-sidebar-second {
  box-sizing: border-box;
  clear: both;
  width: 100%;
  padding: 10px 0px;
}
#block-sidemenu {
  background-color: #ffc421;
}
#block-sidemenu ul {
  margin: 0;
}
#block-sidemenu ul li {
  border-bottom: 1px dotted #212121;
  list-style: none;
  padding: 5px 20px;
}
#block-sidemenu ul li:hover,
#block-sidemenu ul li.menu-item--active-trail {
  background-color: #F1B204;
}
#block-sidemenu ul li a {
  text-decoration: none;
}
/** menu **/
#block-jules-main-menu {
  display: none;
  right: 0;
  bottom: 0;
}
#sidr ul {
  padding: 0;
}
#block-jules-main-menu ul.menu {
	padding: 0;
	margin-left: 0;
}
#sidr ul li,
#block-jules-main-menu ul.menu li{
	margin: 20px 0;
}
#sidr ul li a,
#block-jules-main-menu ul.menu li a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}
#sidr ul li a {
	font-size: 1em;
}
#block-jules-main-menu ul.menu li a {
	font-size: 0.8em;
}
/** front **/
#block-jules-verkoop,
#block-jules-verhuur,
#block-jules-locatiemanagement {
  border: 1px dotted #ddd;
  box-sizing: border-box;
  float: left;
  padding: 20px;
  text-align: center;
  width: 100%;
}
#block-jules-verkoop:hover,
#block-jules-verhuur:hover,
#block-jules-locatiemanagement:hover {
  box-shadow: 1px 1px 10px #ddd;
}
#block-jules-verkoop img,
#block-jules-verhuur img,
#block-jules-locatiemanagement img {
  max-width: 100%;
}
/** verhuur en verkoop **/
.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.grid .views-row {
  border: 1px dotted #ddd;
  box-sizing: border-box;
  float: left;
  margin: 1%;
  padding: 0 0 20px 0;
  text-align: center;
  width: 48%;
  word-break: break-word;
}
.grid .views-row:hover {
  box-shadow: 1px 1px 10px #ddd;
}
.grid .views-row a {
  text-decoration: none;
}
.grid .views-row img {
  height: auto;
  max-width: 220px;
  width: 100%;
}
/** product **/
.path-product .field_images img {
  border: 1px dotted #ddd;
  box-sizing: border-box;
  float: left;
  height: auto;
  margin: 0px 2% 10px 0;
  width: 32%;
}
.path-product .field_images:first-child img {
  height: auto;
  width: 100%;
}
.path-product .field_images:nth-child(3n+1) img {
    margin-right: 0;
}
#block-jules-views-block-related-products-block-1 {
  clear: both;
}
#content-right,
.path-product #block-jules-content .body {
  clear: both;
  margin-bottom: 40px;
}
/** team **/
.team .views-row {
  float: left;
  margin-right: 2%;
  width: 48%;
  word-break: break-all;
}
.team .views-row img {
  height: auto;
  width: 125px;
}
.team .views-field-title .field-content {
  margin-bottom: 10px;
}
.team .views-field-field-team-position {
  margin-bottom: 5px;
}
.team h3 {
  margin-bottom: 20px;
}
h3 .team-spacer {
  border-bottom: 1px dotted #ccc;
  clear: both;
  padding-bottom: 20px;
}
.mobilemail {
  display: none;
}
.views-field-field-team-phone-number,
.views-field-field-team-position,
.desktopmail {
  display: block;
  font-size: 10px;
}
/** slider **/
#block-views-block-slider-block-1 {
  position: relative;
  display: none;
}
.slides li {
  position: relative;
}
.slides li img {
  display: block;
  height: auto;
  width: 100%;
}
.slidetainer {
  position: absolute;
  top: 25%;
  right: 0;
  left: 4%;
  z-index: 999;
  width: 50%;
  text-align: left;
  font-size: 1em;
  line-height: 150%;
  padding: 0 15px;
}
.slider-title {
  font-weight: bold;
  font-size: 2em;
  display: inline-block;
  margin: 0;
  line-height: 100%;
  background: #ffc421;
  padding: 10px;
  color: #fff;
}
.slider-description {
  display: inline-block;
  clear: both;
  color: #121212;
  padding: 10px;
  margin-bottom: 0px;
  background: #121212;
  color: #fff;
}
.flex-control-nav {
  bottom: 0;
}
@media only screen and (min-width: 400px){
.grid .views-row {
  width: 31%;
}
}
@media only screen and (min-width: 600px){
h1 {
}
h2 {
}
body:not(.path-frontpage) #block-jules-zichtbaarformulierproduct-searchpage-1 {
    top: 0;
}
#block-jules-zichtbaarformulierproduct-searchpage-1 {
  display: inline-block;
  float: right;
  position: relative;
  padding: 6px 0px 6px 20px;
}
#block-search {
  display: none;
}
#block-jules-sitebranding,
#block-jules-zichtbaarformulierproduct-searchpage-1 {
  width: 26%;
}
#block-jules-verkoop,
#block-jules-verhuur,
#block-jules-locatiemanagement {
  width: 30%;
}
#block-jules-verhuur,
#block-jules-locatiemanagement {
  margin-right: 5%;
}
.layout-content {
  float: right;
  position: relative;
  width: 70%;
}
.layout-sidebar-first {
  bottom: 0;
  clear: none;
  float: left;
  height: 100%;
  padding: 20px 0;
  width: 22%;
}
.sidebar-second.one-sidebar .layout-content {
  float: left;
  width: 75%;
}
.one-sidebar .layout-sidebar-second {
  clear: none;
  float: right;
  margin-left: 0;
  width: 23%;
}
.two-sidebars .layout-sidebar-second {
  margin-left: 23%;
}
.grid .views-row {
  width: 23%;
}
/** product verkoop **/
/*#content-left,*/
.path-product .wrapper-field_images {
    float: left;
    margin-bottom: 40px;
    width: 48%;
}
/*#content-right,*/
.path-product #block-jules-content .body {
  clear: none;
  float: right;
  margin-bottom: 40px;
  width: 48%;
}

 /*product verhuur*/
  #content-left {
    width: 64%;
    float: left;
  }
  .path-product #block-jules-content #content-left .wrapper-field_images {
    margin-bottom: 40px;
    width: 100%;
  }

  #content-right {
    clear: none;
    width: 32%;
    float: right;
  }
  .path-product #block-jules-content #content-right .body {
    margin-bottom: 40px;
    width: 90%;
  }


/** team **/
.team .views-row {
  margin-right: 0;
  width: 33%;
}
}
@media only screen and (min-width: 800px){
h1 {
}
h2 {
}
body.path-frontpage header {
  background: none;
  padding-top: 0px;
}
.header-bottom {
  background-image: none;
}
#block-views-block-slider-block-1,
#block-jules-sitebranding img {
  display: block;
}
#block-hamburger {
  display: none;
}
#block-jules-sitebranding,
#block-jules-zichtbaarformulierproduct-searchpage-1 {
  width: 25%;
}
#block-jules-main-menu {
  display: block;
  float: left;
  margin: 0 auto;
}
#block-jules-main-menu ul.menu li {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  text-align: center;
}
#block-jules-main-menu ul.menu li a {
  color: #fff;
  display: block;
  font-size: 0.8em;
  padding: 10px 13px;
}
#block-jules-main-menu ul.menu li:hover a,
#block-jules-main-menu ul.menu li.menu-item--active-trail a {
  color: #ffc421;
}
.layout-content {
  float: right;
  margin-left: 0;
  margin-right: 0;
  width: 70%;
  }
.layout-sidebar-second {
  clear: none;
  float: right;
  width: 25%;
}
.grid .views-row {
  width: 18%;
}
/** team **/
.team .views-row {
  margin-right: 0;
  width: 22%;
}
/** mck center team view header text **/
.center-team-text {
  text-align: center;
}
.mobilemail {
  display: none;
}
.views-field-field-team-phone-number,
.views-field-field-team-position,
.desktopmail {
  display: block;
  font-size: 15px;
}
}
@media only screen and (min-width: 960px){
#block-jules-main-menu ul.menu li a {
  padding: 10px 20px;
}
}
@media only screen and (min-width: 1170px){
h1 {
}
h2 {
}
/** header **/
.header-bottom {
  padding: 5px 0 0 0;
}
main {
  padding: 20px 0 40px 0;
}
.path-frontpage main {
  padding: 20px 0;
}
.grid:not(.products) .views-row {
  width: 13%;
}
#block-jules-sitebranding {
  margin-left: 0;
}
#block-jules-zichtbaarformulierproduct-searchpage-1 {
  margin-right: 0;
  padding-right: 0;
}
#block-jules-sitebranding,
#block-jules-zichtbaarformulierproduct-searchpage-1 {
  width: 25%;
}
/** team **/
.team .views-row {
  margin-right: 0;
  width: 18%;
}
}