.top {
    width: 100%;
    background:
    linear-gradient(#0007, #0007),
    linear-gradient(#fec33e77, #5a2a6677),
    url('../images/about.jpg');
    background-size: cover;
    background-position: center;
    padding: 2em 0;
    color: #fff;
}

.content {
    width: 100%;
    max-width: 1280px;
    padding: 2em 0.5em 0;
    text-align: right;
}

.about-top {
    margin-top: 3em;
    text-align: center;
    width: 90%;
    max-width: 720px;
}

.logo {
    width: 60%;
    max-width: 450px;
    margin: 3em auto;
}

.joinCont {
    text-align: center;
    padding: 3em 0;
}

.pics {
    text-align: center;
    line-height: 0;
}

.pic {
    display: inline-block;
    height: 10em;
    background: #aaa;
    margin: 0.5%;
    background-size: cover;
    background-position: center;
    border: 1px solid #777;
}

@media (min-width: 768px) {
    .pic { width: 25%; }
    .pic:first-child, .pic:last-child { width: 40%; }
}

@media (max-width: 767px) {
    .pic { width: 30%; }
    .pic:nth-child(2), .pic:nth-child(3), .pic:nth-child(6) {
        width: 60%;
    }
}


.pic:nth-child(1) { background-image: url('../images/004.jpg'); }
.pic:nth-child(2) { background-image: url('../images/001.jpg'); }
.pic:nth-child(3) { background-image: url('../images/002.jpg'); }
.pic:nth-child(4) { background-image: url('../images/003.jpg'); }
.pic:nth-child(5) { background-image: url('../images/006.jpg'); }
.pic:nth-child(6) { background-image: url('../images/005.jpg'); }

.bens i {
    color: darkgreen;
    margin-top: 1.5em;
}

hr.bottom {
    border: none;
    width: 100%;
    height: 0.5em;
    background: #5a2a66;
    border-radius: 0.25em;
}