.grid {
}

.grid-item,
.grid-sizer {
    width: 25%;
    background-color:#fafafa;
    padding:50px;
    overflow: hidden;
}


.grid-item:before {
    content: "";
    display: block;
    padding-top: 100%; 	/* initial ratio of 1:1*/
}

.grid-img.grid-item img {
    position: absolute;
    top: 0px;
}

.grid-item p.contact {
    line-height: 175%;
}

.grid-img {
    padding:0;
    background-color:#111;
}
.grid-img img {
    width:100%;
}

.grid-item img {
    opacity:1;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.grid-item .topic {
    opacity: 0;
    z-index: 1;
    padding: 0px 20px;
}

.grid-item .topic,.grid-item .description {
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.grid-item:hover .topic,.grid-item:hover .description {
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.grid-icon {
    position: absolute;
    top:-35px;
    right:-20px;
    color:#efefef;
    font-size:10rem;
    z-index: 0;
}

.grid-item--width2 .grid-icon {
    font-size:30rem;
    top:-10rem;
}

.topic h4 {
    color:#fff;
    font-size: 2rem;
    font-weight: 400;
    z-index: 1;
    font-family: 'itc-american-typewriter', serif;
    font-weight: bold;
}
.topic span {
    color:#fff;
    font-size: 2rem;
    font-weight: 400;
    z-index: 1;
}

.topic h4 strong {
    font-weight: 600;
}
.grid-item .description {
    opacity: 0;
    padding: 0px 20px;
}


.grid-item .description p {
    font-weight: 400;
}

.grid-item.grid-img .link {
    opacity: 0;
}
.grid-item .link {
    opacity: 1;
    color:#111;
}
.description p {
    color:#fff;
}

.grid-item h1,.grid-item h2,.grid-item h3,.grid-item p {
    z-index: 1;
}

.grid-item .link a{
    color:#111;
    text-decoration: underline;
    font-weight: 400;
}
.grid-item.grid-img .link a{
    color:#fff;
}

.grid-item:hover .topic, .grid-item:hover .description, .grid-item:hover .link {
    opacity: 1;
}

.grid-item:hover .flex-column {
    z-index:2;
}

.grid-item:hover img {
    opacity: 0.5;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
}


.team-member a {
    font-weight:600;
    color:#fff;
}
@media screen and (max-width: 1291px) {

    .grid-item,
    .grid-sizer {
        width: 33.33%;
    }

}


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


    .grid-item,
    .grid-sizer {
        width: 50%;
        padding:20px;
    }


}

@media screen and (max-width: 500px) {
    .grid-item p {
        display:none;
    }

    .grid-item p.contact {
        display: inline-block;
        font-weight: 400;
    }
    .grid-icon {
        opacity:0.3;
    }
}