@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

.gridywrap div[class*=gridy] {background: #eee;box-shadow: inset 0 0 0 1px #ddd;padding: 15px; float: left;position: relative;}
.gridywrap .gridy-1,.gridywrap .gridy-2,.gridywrap .gridy-3 {width: 320px;overflow: hidden;}
.gridywrap .gridy-1 {width: 100%;}.gridywrap .gridy-2 {width: 100%;}.gridywrap .gridy-3 {width: 100%;}
.gridywrap .gridyhe-1 {height: 320px;}
.gridywrap .gridyhe-2 {height: 320px;}


@media screen and (min-width: 640px) {
  .gridywrap .gridyhe-2 {height: 320px;}
  .gridywrap {width: 100%;}
  .gridywrap .gridy-1 {width: 50%;}
  .gridywrap .gridy-2 {width: 50%;}
  .gridywrap .gridy-3 {width: 100%;}
}
@media screen and (min-width: 1024px) {
  .gridywrap .gridy-1 {width: 33.3%;}
  .gridywrap .gridy-2 {width: 66.6%;}
  .gridywrap .gridy-3 {width: 100%;}
  .gridywrap .gridyhe-2 {height: 640px;}
}

/*styling*/
.gridywrap .gridimg { position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;background-position: center center;background-size: cover;}
.gridywrap .gridimg img {width: 100%;}
.gridywrap .gridinfo {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.4);text-align: center;transition: all 0.8s;}
.gridywrap .gridinfo h3 {font-size: 28px;color: #fff;font-weight: bold;text-transform: uppercase;margin: 130px 0 20px;position: relative;}
.gridywrap .gridinfo h3:after {content: '';width: 25px;border-top: 4px solid #fff;display: block;margin: 0 auto;margin-top: 25px;}
.gridywrap .gridinfo .gridmeta {transition-delay: 0.25s;}
.gridywrap .gridinfo .gridmeta p {display: inline-block;font-size: 18px;color: #fff;margin-bottom: 15px;}
.gridywrap .gridinfo .gridmeta p i {margin-right: 5px;}
.gridywrap .gridinfo .gridmeta p.gridwho {margin-left: 25px;}
.gridywrap .gridinfo p.gridexerpt {width: 60%;margin: 0 auto;line-height: 22px;margin-bottom: 25px;color: #fff;transition-delay: 0.5s;font-size: 16px;}

.gridywrap .gridinfo * {opacity: 0;transition: all 0.8s;}
.gridywrap .gridinfo h3 {opacity: 1;}
.gridywrap .gridinfo .grid-btn {color: #fff;text-decoration: none;margin: 0 auto;width: 40px;height: 40px;line-height: 48px;border-radius: 25px;border: 1px solid #fff; display: block;overflow: hidden;}
.gridywrap .gridinfo .grid-btn:hover {width: 75px;background: rgba(0,0,0,0.3);line-height: 35px;}
.gridywrap .gridinfo .grid-btn span {opacity: 0;display: none;transition: opacity 0.8s;}
.gridywrap .gridinfo .grid-btn:hover span {opacity: 1;display: inline;}
.gridywrap .gridinfo .grid-btn:hover i {opacity: 0;display: none;}

.gridywrap .gridinfo:hover * {opacity: 0.7;}
.gridywrap .gridinfo:hover p {opacity: 1;}
.gridywrap .gridinfo:hover {background: rgba(12, 30, 32, 0.8);}
.gridywrap .gridinfo:hover h3 {margin-top: 70px;opacity: 1;}

.intro {text-align: center;padding: 25px;background: #f5f6f8;color: #46c4e1;}
h1 {font-size: 48px;font-weight: 300;padding: 15px 0;}
.intro p {opacity: 0.9;font-size: 18px;}
.intro p a {color: #FA8CD3;}