body {
  margin: 0;
}

/* apply a natural box layout model to all elements, but allowing components to change */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.image-grid {
  width: 100%;
  max-width: 1310px;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px 5px 0;
}

.image__cell {
  float: left;
  position: relative;
   margin-bottom: 15px;
}

.image--basic {
  /*padding: 0 5px;*/
}

.basic__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.image__cell.is-collapsed .image--basic {
  cursor: pointer;
}

.image__cell.is-expanded .image--expand {
  max-height: 600px;
  margin-bottom: 10px;
}

.image--expand {
  position: relative;
  left: -5px;
  padding: 0px 15px;
  /*box-sizing: content-box;*/
  overflow: hidden;
  background: #f2f2f2;
  max-height: 0;
  transition: max-height .3s ease-in-out,margin-bottom .1s .2s;
}

.image__cell.is-collapsed .arrow--up {
  height: 10px;
  width: 100%;
}

.image__cell.is-expanded .arrow--up {
  border-bottom: 8px solid #f2f2f2;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  width: 0;
  margin: 2px auto 0;
}

.expand__close {
  position: absolute;
  top: 0px;
  right: 10px;
  color: #454545;
  font-size: 50px;
  line-height: 50px;
  text-decoration: none;
  z-index: 300;
}

.expand__close:before {
  content: '×';
}

.expand__close:hover {
  color: #ed1c24;
  text-decoration: none !important;
}

.image--large {
  max-width: 100%;
  height: auto;
  display: block;
  padding: 40px;
  margin: 0 auto;
  box-sizing: border-box;
}

.image--expand h3{
	color: #40ad48;
}

.image--expand .btn.btn-red{
	background: #40ad48;
	color: #ffffff;
	width: 100%;
	text-transform: uppercase;
	text-align: center;
	font-weight: 400;
	border-radius: 0;
	font-style: normal !important;
}

.image--expand .btn.btn-red.nohov{
	cursor: default;
	margin-bottom: 10px;
}

.image--expand .btn.btn-red.nohov:hover{
	background: #40ad48 !important;
}

.space-top{margin-top:33px; margin-bottom: 15px;}
.space-top1{margin-top:30px; margin-bottom: 15px;}
.space-top1 h3{margin-top:0 !important;}
.space-bot1{margin-bottom: 30px; margin-top: 22px;}
.smalltext{font-size: 13px; line-height: 15px; font-style: italic; text-align: center;}
.smalltext.space-bot1 a.btn.btn-red{margin-top: 8px;}

.serves{
	  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  color: #fff;
  background: #40ad48;
  padding: 5px;
  text-transform: uppercase;
  font-weight: 400;
}
.platdet{
	text-align: center;
  color: #000;
  font-size: 18px;
}

.platdet span{
	color: #40ad48;
}

.image--basic a:hover{
	text-decoration: none;
}

.basic__img{
	width: 100%;
}

.image--basic a img{
	border:1px solid transparent;
}

.image--basic a:hover img{
	border: 1px solid #40ad48;
}

/*closed*/
.closed{
display:block;
background-color: #ef3e35;
margin-top:0px;
padding-top:10px;
margin-bottom:40px;
padding-bottom:10px;
color:#fff;
font-family: "Montserrat",sans-serif;
font-size: 16px;
text-transform:uppercase;
padding-left:20px;
padding-right:20px;
text-align:center;
}

@media only screen and (max-width: 767px) {

  .image__cell {
      width: 100%;
  }

  .image__cell:nth-of-type(2n+3) {
      clear:left;
  }

  .image--expand {
      width: 100%;
  }

}

@media only screen and (min-width: 768px) {
  .image__cell {
      width: 25%;
  }

  .image__cell:nth-of-type(4n+2) .image--expand {
    margin-left: -100%;
  }

  .image__cell:nth-of-type(4n+3) .image--expand {
    margin-left: -200%;
  }

  .image__cell:nth-of-type(4n+4) .image--expand {
    margin-left: -300%;
  }

  .image__cell:nth-of-type(4n+5) {
    clear: left;
  }

  .image--expand {
    width: 400%;
  }



}