@font-face {
	  font-weight: normal;
	  font-style: normal;
	  font-family: 'feathericons';
	  src: url("../fonts/feathericons/feathericons.eot?-8is7zf");
	  src: url("../fonts/feathericons/feathericons.eot?#iefix-8is7zf") format("embedded-opentype"), url("../fonts/feathericons/feathericons.woff?-8is7zf") format("woff"), url("../fonts/feathericons/feathericons.ttf?-8is7zf") format("truetype"), url("../fonts/feathericons/feathericons.svg?-8is7zf#feathericons") format("svg");
	}
	.grid {
	  position: relative;
	  overflow: hidden;
	  list-style: none;
	  text-align: center;
	}

	figure {
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	  text-align: center;
	  cursor: pointer;
	}
	
@media screen and (max-width: 50em) {
	figure {
		float: none;
		width: 100%;
	}
}
	
	figure img {
	  position: relative;
	  display: block;
	  height: 100%;
	  width: 100%;
	  opacity: ;
	}
	figure figcaption {
	  color: #fff;
	  font-size: 18px;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}
	figure figcaption:after {
	  pointer-events: none;
	}
	figure figcaption:before {
	  pointer-events: none;
	}
	figure figcaption > a {
	  z-index: 1000;
	  text-indent: 200%;
	  white-space: nowrap;
	  font-size: 0;
	  opacity: 0;
	}
	figure h2 {
	  margin: 0;
	  font-size: 50px; /* 40px */
	  font-family: 'Poppins', Arial, Helvetica, sans-serif;
	  /* text-transform: uppercase; */
	  line-height: 55px /* 45px */
	}
	figure h2 span {
	  font-size: 40px;
	  font-weight: 800;
	  margin: 0;
	  opacity: 0.9;
	}
	figure p {
	  margin: 0;
	  letter-spacing: 1px;
	  color: #fff;
	  font-weight: 300;
	  font-size: 16px;
	  text-align: center;
	}
	figure h3{
	  margin: 0;
	  color: #fff;
	  font-size: 17px;
	  text-align: left;
	  font-family: 'Poppins',"open_sansregular", Arial, sans-serif;
	  font-weight: 300;
	  line-height: 25px;
	  margin-top: 30px;
	  margin-bottom: 20px;
	}

	.grid figure figcaption,
	.grid figure figcaption > a {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}

	figure.effect-oscar {
	  background:RGB(0, 0, 0);
	}
	figure.effect-oscar img {
	  -webkit-transition: opacity 0.35s;
	  transition: opacity 0.35s;
	}
	figure.effect-oscar figcaption {
	  background-color: rgba(0, 0, 0, 0.3);
	  -webkit-transition: background-color 0.35s;
	  transition: background-color 0.35s;
	}
	figure.effect-oscar figcaption:before {
	  position: absolute;
	  top: 30px;
	  right: 30px;
	  bottom: 30px;
	  left: 30px;
	  content: '';
	}
	figure.effect-oscar p {
	  color: #fff;
	  padding: 0 40px;
	}
	figure.effect-oscar h2 {
	  margin: 20% 0 10px 0;
	  -webkit-transition: -webkit-transform 0.35s;
	  transition: transform 0.35s;
	  -webkit-transform: translate3d(0, 100%, 0);
	  transform: translate3d(0, 100%, 0);
	}
	figure.effect-oscar h3{
	  margin: 10px;
	  -webkit-transition: -webkit-transform 0.35s;
	  transition: transform 0.35s;
	  -webkit-transform: translate3d(0, 100%, 0);
	  transform: translate3d(0, 100%, 0);
	}
	figure.effect-oscar figcaption:before, figure.effect-oscar p {
	  opacity: 0;
	  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	  transition: opacity 0.35s, transform 0.35s;
	  -webkit-transform: scale(0);
	  transform: scale(0);
	}
	figure.effect-oscar:hover h2 {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	  color: #fff;
	}
	figure.effect-oscar:hover h3 {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	  color: #fff;
	}
	figure.effect-oscar:hover figcaption:before, figure.effect-oscar:hover p {
	  opacity: 1;
	  -webkit-transform: scale(1);
	  transform: scale(1);
	  color: #fff;
	}
	figure.effect-oscar:hover figcaption {
	  background: rgba(0, 0, 0);
	  opacity: 0.7;
	}
	figure.effect-oscar:hover img {
	 background: rgba(0, 0, 0);
	}


	figure.effect-roxy {
	  background: #0CB4CE;
      cursor: default;
	}
	figure.effect-roxy img {
	  max-width: none;
	  width: -webkit-calc(100% + 60px);
	  width: calc(100% + 60px);
	  -webkit-transition: opacity 0.9s, -webkit-transform 0.35s;
	  transition: opacity 0.9s, transform 0.35s;
	  -webkit-transform: translate3d(-50px, 0, 0);
	  transform: translate3d(-50px, 0, 0);
	}
	figure.effect-roxy figcaption {
	  padding: 0 6.5em; /* 0 7em */
	  width: 100%;
	  text-align: left;
	}
	figure.effect-roxy figcaption:before {
	  position: absolute;
	  top: 30px;
	  right: 30px;
	  bottom: 30px;
	  left: 30px;
	  content: '';
	  opacity: 0;
	  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	  transition: opacity 0.35s, transform 0.35s;
	  -webkit-transform: translate3d(-20px, 0, 0);
	  transform: translate3d(-20px, 0, 0);
	}
	figure.effect-roxy h2 {
	  padding: 30% 0 10px 0; /* 25% 0 10px 0 */
	}
	figure.effect-roxy p {
	  color: #fff;
	  text-align: left;
	  opacity: 0;
	  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	  transition: opacity 0.35s, transform 0.35s;
	  -webkit-transform: translate3d(-10px, 0, 0);
	  transform: translate3d(-10px, 0, 0);
	}
	figure.effect-roxy:hover img {
	  opacity: 0.1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	figure.effect-roxy:hover figcaption:before, figure.effect-roxy:hover p {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}



@media only screen and (max-width: 768px) {
		
	figure h2 {
	  margin: 0;
	  font-size: 28px; /* 29px */
	  font-family: 'Poppins', Arial, Helvetica, sans-serif;
	  line-height: 29px
	}
	figure h2 span {
	  font-size: 29px;
	  font-weight: 800;
	  margin: 0;
	}

	figure h3{
	  margin: 0;
	  color: #fff;
	  font-size: 16px;
	  text-align: left;
	  font-family: "open_sansregular", Arial, sans-serif;
	  font-weight: 300;
	  line-height: 18px;
	  margin-top: 10px;
	  margin-bottom: 5px;
	  display: none
	}

	figure.effect-roxy figcaption {
	  padding: 0 2em;
	  width: 100%;
	  text-align: left;
	}	
	
}