#galleryWrapper {
    position      : relative;
    left          : 0%;
    margin-left   : 0px;
    width         : 100%;
    height        : 600px;
    margin        : 0 auto;
    margin-bottom : 30px;
}

.gallery {
    position : absolute;
    width    : auto;
    height   : 100%;
    overflow : hidden;
}

.article {
    box-shadow          : 0 0 10px 7px rgba(0, 0, 0, 0.43);
    cursor              : pointer;
    width               : 20%;
    height              : 100%;
    position            : relative;
    float               : right;
    display             : inline;
    background-size     : cover;
    background-position : right;
    overflow            : hidden;
}

.article.active {
    background-position : center;
}

.articleHide .articleTextWrapper {
    opacity : 0.0;
}

.articleShow .articleTextWrapper {
    opacity : 1.0;
}

.articleTextWrapper {
    bottom   : 0px;
    left     : 0px;
    height   : auto;
    /*background-color: rgba(192,57,43,0.80);*/
    position : absolute;
    padding  : 10px 10px 10px 10px;
}

.article h1 {
    font-family : 'Open Sans';
    color       : white;
    margin      : 0px;
    font-size   : 25px;
    font-weight : 400;
}

.article h2 {
    margin      : 0px;
    color       : #111111;
    font-size   : 17px;
    font-weight : 400;
}

/*For all mobile devices*/
@media (max-width : 700px) {
    
    #galleryWrapper {
        left        : 0px !important;
        margin-left : 0px !important;
        width       : 100% !important;
    }
}

/*For tablets*/
@media (min-width : 350px) and (max-width : 700px) {
}

/*For phones*/
@media (max-width : 350px) {
}