#container {
  display: flex; /* establish flex container */
  flex-direction: row; /* make main axis horizontal (default value) */
  justify-content: center; /* center items horizontally, in this case */
  align-items: center; /* center items vertically, in this case */
  background-color: #F8F8F8;
  padding: 15px 0 50px 0;
}

#container-column {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  background-color: #FFF;
  padding: 15px 0 15px 0;
}

#container-white {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #fff; 
}

/* page header boxes */
#design-header {text-transform: uppercase; font-weight: 700; font-size: 14pt; color: #000; margin-top: 15px;} /* h1 */
#design-intro {font-size: 10.5pt; color: rgb(92, 71, 71); line-height: 20pt;}
.designer-img {border-radius:50%; max-width:250px; filter: grayscale(100%);}

#meet-header {font-weight: 700; font-size: 16pt; color: #334043; margin-bottom: 20px;} /* h3 */
.review-text {font-size: 10pt;}
#small-header {font-weight: 300; text-transform: uppercase; font-size: 10pt; color: #7c8182; margin-bottom: 5px;} /* h4 */
#faq-header {text-align: center; font-weight: 700; font-size: 14pt; color: #4D6C40; margin-bottom: 20px;} /* h3 */

.img-big {max-width:650px;}

.box {width: 320px; margin: 20px; text-align: center; box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);}
.mediumbox {width:600px; margin: 20px; text-align: left;}
.bigbox {margin: 15px; text-align: center;}
.faqbox {width: 50%; padding: 25px 15px 25px 15px; font-size: 15px;}

#contentbox {padding:25px; background-color: #FFF; border-radius: 5px;}
#aboutbox {padding:25px; border-radius: 5px; font-size: 11.5pt; color: rgb(92, 71, 71); line-height: 20pt;}
#faq-box {
border: none; 
margin: 20px 0 20px 0; 
border-radius: 8px;
padding: 20px;
background-color: #F8F8F8;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
#imgbox {overflow: hidden;}


.new-button{
display: inline-block;
outline: none;
cursor: pointer;
font-size: 12px;
line-height: 1;
border-radius: 5px;
transition-property: background-color,border-color,color,box-shadow,filter;
transition-duration: .3s;
border: 1px solid transparent;
letter-spacing: 2px;
min-width: 160px;
text-transform: uppercase;
white-space: normal;
font-weight: 700;
text-align: center;
padding: 16px 14px 18px;
margin-bottom: 10px;
color: #FFF;
box-shadow: inset 0 0 0 0px #FFF;
background-color: #4D6C40;
height: 48px;}
.new-button:hover{color: #000;}

.container.surrounding-padding-col.garden-design {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
  background-color: #334043;
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 70%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 10%, rgba(29, 30, 33, 0) 50%), url('../images/garden-design-norwich-min.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 70%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 10%, rgba(29, 30, 33, 0) 50%), url('../images/garden-design-norwich-min.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 70%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 10%, rgba(29, 30, 33, 0) 50%), url('../images/garden-design-norwich-min.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 70%), linear-gradient(90deg, rgba(21, 22, 26, .66) 10%, rgba(29, 30, 33, 0) 50%), url('../images/garden-design-norwich-min.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

  background-blend-mode: multiply, multiply, overlay;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.hidden {
  display: none;
}

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

  .container.surrounding-padding-col.garden-design {padding-top: 4vw;  padding-bottom: 4vw;}
  #container {display: block;}
  #container-column {display: block;}
  #container-white {display: block;}
  .box {width:90%;}
  .mediumbox {width: 90%;}
  .bigbox {width: 90%;}
  .faqbox {width: 90%;}
  .img-big {width:90%; overflow: hidden;}
  #faq-header {text-align: left;}
  .designer-img {width:90%;}
  #faq-box {border: none;}
  
}