header.masthead {
    position: relative;
    background-color: #343a40;
    background: url(../img/bg-services.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem;
    animation-delay: 0.1s;
    animation-duration: .5s;
}

header.masthead .overlay {
    position: absolute;
    background-color: #212529;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: .3
}

header.masthead h1 {
    font-size: 2rem
}

@media (min-width:768px) {
    header.masthead {
        padding-top: 12rem;
        padding-bottom: 12rem
    }
    header.masthead h1 {
        font-size: 3rem
    }
}

.portfolio-item {
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 530px;
    margin: auto auto 1rem
}

.portfolio-item .caption {
    display: flex;
    height: 100%;
    width: 100%;
    background-color: rgba(33, 37, 41, .2);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1
}

.portfolio-item .caption .caption-content {
    color: #fff;
    margin: auto 2rem 2rem
}

.portfolio-item .caption .caption-content h2 {
    font-size: .8rem;
    text-transform: uppercase
}

.portfolio-item .caption .caption-content p {
    font-weight: 300;
    font-size: 1.2rem
}

@media (min-width:992px) {
    .portfolio-item {
        max-width: none;
        margin: 0
    }
    .portfolio-item .caption {
        -webkit-transition: -webkit-clip-path .25s ease-out, background-color .7s;
        -webkit-clip-path: inset(0);
        clip-path: inset(0)
    }
    .portfolio-item .caption .caption-content {
        transition: opacity .25s;
        margin-left: 5rem;
        margin-right: 5rem;
        margin-bottom: 5rem
    }
    .portfolio-item img {
        -webkit-transition: -webkit-clip-path .25s ease-out;
        -webkit-clip-path: inset(-1px);
        clip-path: inset(-1px)
    }
    .portfolio-item:hover img {
        -webkit-clip-path: inset(2rem);
        clip-path: inset(2rem)
    }
    .portfolio-item:hover .caption {
        background-color: rgba(29, 128, 159, .9);
        -webkit-clip-path: inset(2rem);
        clip-path: inset(2rem)
    }
}

.affairs-cover {
    height: 75%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}

.affairs-cover {
    padding-top: 50px;
}

#affairs-content {
    padding-top: 20px;
}