/* CONTENT: STORIES & PRODUCT PAGES */
section.stories #boxes *{
  box-sizing: border-box;
}

.container-fluid {
   overflow: visible;
}
.hero.stories h1,
.hero.stories p,
.hero.stories h2 {
   color: #5C5C5C;
   font-weight: bold;
}
.stories h2 {
  font-size: 2em;
  margin: 0;
}
.content-box {
    min-height: 1px;
    border: 2px solid grey;
    margin-right: 1em;
}
.stories .intro {
    width: 70%;
    padding: 0 1em 1em 1em;
}

/* TOP BOX */
.content-box.top {
   width: 100%;
   max-width: 44em;
}
#boxes button.square-button p {
  color: #ffffff;
  text-align: left;
  margin-left: 1em;
}
.content-box .content-text {
   padding: 1em;
}
.content,
.top .content-text button {
   margin: 2em 0 1em 0;
}
.top .content-text {
   padding: 0 1em;
   max-width: 800px;
    min-width: 250px;
}
.top img.content-picture {
    /*width: 40%;*/
    margin-left: 40%;
}

/*STORY GRID */
.other-content {
   width: 100%;
   max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
}
.content-box.small {
    width: 33%;
    max-width: 14em;
    display: flex;
    margin-bottom: 1em;
}
.stories .content-box.small div {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.stories .content-box.small p,
.stories .content-box.small img {
    flex: 1 0 auto;
    width: 100%;
    padding: auto;
}
.content-box.small p,
.content-box.small h4 {
    color: #5C5C5C;
    padding: 0;
    margin: 0;
}

@media (max-width: 55em) {
    .content-box.small {
        width: 50%;
    }
}

@media (max-width: 40em) {
    .content-box.top {
        width: auto;
        flex-direction: column;
    }
    .content-box.small {
        width: 100%;
    }
    .content-box.top .content-text,
    .content-box.small .content-text {
        padding: 1em 1em 1em 1em;
    }
    .other-content .intro p {
        width: 100%;
    }
    .top img.content-picture {
        width: 80%;
        margin-left: 10%;
    }
}

/*********INDIVIDUAL STORY AND PRODUCT PAGES **************/
.story1 .main-text {
    float:left;
    width: 50%;
    padding-right: 2em;
}
.story1 .content-box.top {
   width: 100%;
   max-width: 1200px;
    padding: 1em;
    display: flex;
    flex-direction: row;
}
.story1 .top .content-text {
    flex: 1 1 70%;
}
.story1 .top .content-picture {
    flex: 1 1 30%;
}
.story1 .content-box.top img {
   padding-right: 1.5em;
    max-width: 250px;
    max-height: 250px;
}
@media (max-width:600px){
    .story1 .content-box.top {
        flex-direction: column;
        padding: 1em;
        max-width: 300px;
    }
    .product1 .content-box.top {
        align-items: none;
    }
    .story1 .top .content-text {
        width: 100%;
        max-width: 250px;
        padding: 0 1em 0 0;
    }
    .story1 .top .content-picture {
        width: 100%;
    }
}

.story1 .content-text p,
.story1 .intro p {
   color: #5C5C5C;
}
.story1 h1 {
    padding-bottom: 0.5em;
}
.story1 #boxes button.square-button p {
  color: #ffffff;
  text-align: center;
  margin-left: 1em;
}
/* DONATE COLUMN */

@media (max-width: 600px) {
    .story1 .main-text {
        width: 100%;
    }
    .story1 #boxes button.square-button p {
        color: #ffffff;
        text-align: left;
        margin-left: 1em;
    }

    .story1 .content-box.top img {
        max-width: 250px;
        max-height: 300px;
    }

    .story1 .content-box {
        margin: 0;
    }

    .story1 .top .content-text {
        width: 100%;
    }

    .story1 .top .content-picture {
        width: 100%;
    }
}