#body, html {
#  height:100%;
#  margin:0;
#}

.puller {
  width:calc(100% - 1px);
  margin-left:1px;
  position:relative;
}

.box {
  height:230px;
  background:grey;
  margin-right:1px;
  margin-bottom:0px;
  margin-top:1px;
  float:left;
  line-height:100%;
  text-align:center;
  color:white;
  font-family:sans-serif;
  #transition: all 1s;
  background-blend-mode: multiply;
  background-color: rgba(255, 255, 255.5);
  
}

.box-wide {
  height:450px;
  background:#ffffff;
  margin-right:0px;
  margin-bottom:0px;
  margin-top:0px;
  float:left;
  line-height:100%;
  text-align:center;
  color:white;
  font-family:sans-serif;
  transition: all 1s;
  
}

.one {
  background: url('/contents/assets/frontend/images/talk-top.jpg') no-repeat;
  background-size: cover;
  height:100%;
  width:100%;

}

.two {
  background: url('https://terrible.ngo/contents/assets/frontend/images/what-we-do.jpg') no-repeat;
  background-size: cover;
  height:100%;
  width:100%;

}

.three {
  background: url('https://terrible.ngo/contents/assets/frontend/images/carbon-zero.jpg') no-repeat;
  background-size: cover;
  height:100%;
  width:100%;

}

.four {
  background: url('https://terrible.ngo/contents/assets/frontend/images/resist-001.jpg') no-repeat;
  background-size: cover;
  height:100%;
  width:100%;

}

.five {
  background: url('https://terrible.ngo/contents/assets/frontend/images/zach-block-001.jpg') no-repeat;
  background-size: cover;
  height:100%;
  width:100%;

}

.dis {
  background: url('/contents/assets/frontend/images/DGO-001.jpg') no-repeat;
  background-size: cover;
  height:100%;
  width:100%;

}

@media only screen and (max-width : 479px) {
  .box {
    width:calc(100% - 1px);
  }
  .box:not(:nth-child(n+1)) {
    clear:none !important;
  }
  .box:not(:nth-child(n)):not(:last-child):after {
    content:none !important;
  }
  .box:focus+.box:after,
  .box:focus+.box+.box:after,
  .box:focus+.box+.box+.box:after {
    content:none;
  }
  .box:not(:nth-child(1n)) {
    margin-bottom:1px !important;
  }
  .box:focus+.box,
  .box:focus+.box+.box,
  .box:focus+.box+.box+.box {
    margin-bottom:1px;
  }
}

@media only screen and (min-width : 480px) and (max-width : 767px) {
  .box {
    width:calc(50% - 1px);
  }
  .box:not(:nth-child(2n+1)) {
    clear:none !important;
  }
  .box:not(:nth-child(2n)) {
    margin-bottom:1px !important;
  }
  .box:not(:nth-child(2n)):not(:last-child):after {
    content:none !important;
  }
  .box:focus+.box+.box:after,
  .box:focus+.box+.box+.box:after {
    content:none;
  }
  .box:focus+.box+.box,
  .box:focus+.box+.box+.box {
    margin-bottom:1px;
  }
}

@media only screen and (min-width : 768px) and (max-width : 991px) {
  .box {
    width:calc(25% - 1px);
  }
  .box:not(:nth-child(3n)) {
    margin-bottom:1px !important;
  }
  .box:not(:nth-child(3n+1)) {
    clear:none !important;
  }
  .box:not(:nth-child(3n)):not(:last-child):after {
    content:none !important;
  }
  .box:focus+.box+.box+.box:after {
    content:none;
  }
  .box:focus+.box+.box+.box {
    margin-bottom:1px;
  }
}

@media only screen and (min-width : 992px) {
  .box {
    width:calc(25% - 1px);
  }
  .box:not(:nth-child(4n)) {
    margin-bottom:1px !important;
  }
  .box:not(:nth-child(4n+1)) {
    clear:none !important;
  }
  .box:not(:nth-child(4n)):not(:last-child):after {
    content:none !important;
  }
}

#// LARGE BOXS

@media only screen and (max-width : 479px) {
  .box-wide {
    width:calc(100% - 1px);
  }
  .box-wide:not(:nth-child(n+1)) {
    clear:none !important;
  }
  .box-wide:not(:nth-child(n)):not(:last-child):after {
    content:none !important;
  }
  .box-wide:focus+.box-wide:after,
  .box-wide:focus+.box-wide+.box-wide:after,
  .box-wide:focus+.box-wide+.box-wide+.box-wide:after {
    content:none;
  }
  .box-wide:not(:nth-child(1n)) {
    margin-bottom:1px !important;
  }
  .box-wide:focus+.box-wide,
  .box-wide:focus+.box-wide+.box-wide,
  .box-wide:focus+.box-wide+.box-wide+.box-wide {
    margin-bottom:1px;
  }
}

@media only screen and (min-width : 480px) and (max-width : 767px) {
  .box-wide {
    width:calc(50% - 1px);
  }
  .box-wide:not(:nth-child(2n+1)) {
    clear:none !important;
  }
  .box-wide:not(:nth-child(2n)) {
    margin-bottom:1px !important;
  }
  .box-wide:not(:nth-child(2n)):not(:last-child):after {
    content:none !important;
  }
  .box-wide:focus+.box-wide+.box-wide:after,
  .box-wide:focus+.box-wide+.box-wide+.box-wide:after {
    content:none;
  }
  .box-wide:focus+.box-wide+.box-wide,
  .box-wide:focus+.box-wide+.box-wide+.box-wide {
    margin-bottom:1px;
  }
}

@media only screen and (min-width : 768px) and (max-width : 991px) {
  .box-wide {
    width:calc(50% - 1px);
  }
  .box-wide:not(:nth-child(3n)) {
    margin-bottom:1px !important;
  }
  .box-wide:not(:nth-child(3n+1)) {
    clear:none !important;
  }
  .box-wide:not(:nth-child(3n)):not(:last-child):after {
    content:none !important;
  }
  .box-wide:focus+.box-wide+.box-wide+.box-wide:after {
    content:none;
  }
  .box-wide:focus+.box-wide+.box-wide+.box-wide {
    margin-bottom:1px;
  }
}

@media only screen and (min-width : 992px) {
  .box-wide {
    width:calc(50% - 1px);
  }
  .box-wide:not(:nth-child(4n)) {
    margin-bottom:1px !important;
  }
  .box-wide:not(:nth-child(4n+1)) {
    clear:none !important;
  }
  .box-wide:not(:nth-child(4n)):not(:last-child):after {
    content:none !important;
  }
}