body { font-family: 'Open Sans', sans-serif; }

h1 { color: green; }

#galleryWrapper {
  position: fixed;
  left: 50%;
  margin-left: -350px;
  width: 700px;
  height: 350px;
  padding: 0px 0px 0px 0px;
  margin-top:150px;
  background-color: #330000;
}

.gallery {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #CC0000;
  overflow: hidden;
}

.article {
  width: 20%;
  height: 100%;
  position: relative;
  float: left;
  display: inline;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.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: #111;
  font-size: 17px;
  font-weight: 400;
}

#leftArticle { background-color: purple; }

#centreArticle { background-color: green; }

#rightArticle { background-color: yellow; }

/*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) {
}