/* CSS Document */
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
	margin-bottom: 20px;
	
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
	margin: 0 auto;
}


/*.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}*/

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

/*.hovereffect:hover h2,*/.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}


/*effect 2*/
.hovereffect .overlays {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}
.hovereffect:hover .overlays {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect a, hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}




/*
SafeToPay
*/

.topay {
	background-color:#ff9900;
	/*Asul|Raleway|Open+Sans*/
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	text-decoration:none;
	font-weight: bolder;
	color:#363535;
	position:relative;
	padding:10px 20px;
	border-left:solid 1px #ff9900;
	margin-left:35px;
	background-image: linear-gradient(bottom, rgb(213,141,32) 0%, rgb(255,153,0) 100%);
	background-image: -o-linear-gradient(bottom, rgb(213,141,32) 0%, rgb(255,153,0) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(213,141,32) 0%, rgb(255,153,0) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(213,141,32) 0%, rgb(255,153,0) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(213,141,32) 0%, rgb(255,153,0) 100%);
	
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(213,141,32)),
	color-stop(1, rgb(255,153,0))
	);
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999;
	-o-box-shadow: inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999;
	box-shadow: inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999;
	
}

.topay:active {
	top:3px;
	color:#FFFFFF;
	background-image: linear-gradient(bottom, rgb(255,153,0) 0%, rgb(213,141,32) 100%);
	background-image: -o-linear-gradient(bottom, rgb(255,153,0) 0%, rgb(213,141,32) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(255,153,0) 0%, rgb(213,141,32) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,153,0) 0%, rgb(213,141,32) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(255,153,0) 0%, rgb(213,141,32) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(255,153,0)),
		color-stop(1, rgb(213,141,32))
	);
	-webkit-box-shadow: inset 0px 1px 0px #ff9900, 0px 2px 0px 0px #BD7200, 0px 5px 3px #999;
	-moz-box-shadow: inset 0px 1px 0px #ff9900, 0px 2px 0px 0px #BD7200, 0px 5px 3px #999;
	-o-box-shadow: inset 0px 1px 0px #ff9900, 0px 2px 0px 0px #BD7200, 0px 5px 3px #999;
	box-shadow: inset 0px 1px 0px #ff9900, 0px 2px 0px 0px #BD7200, 0px 5px 3px #999;
}
.topay:hover {
	color:#FFFFFF;
}
.topay::before {
	font-family: FontAwesome;
	background-color:#FFFFFF;
	content:"\f023";
	width:35px;
	max-height:44px;
	height:100%;
	position:absolute;
	display:block;
	padding-top:9px;
	top:0px;
	left:-36px;
	font-size:22px;
	font-weight:normal;
	color:#FFFFFF;
	text-align: center;
	text-shadow: 1px 1px 0px #363535;
	border-right: solid 1px #BD7200;
	background-image: linear-gradient(bottom, rgb(171,103,1) 0%, rgb(221,133,1) 100%);
	background-image: -o-linear-gradient(bottom, rgb(171,103,1) 0%, rgb(221,133,1) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(171,103,1) 0%, rgb(221,133,1) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(171,103,1) 0%, rgb(221,133,1) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(171,103,1) 0%, rgb(221,133,1) 100%);
	
	
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(171,103,1)),
	color-stop(1, rgb(221,133,1))
	);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999 ;
	-moz-box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999 ;
	-o-box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999 ;
	box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 0px 10px 5px #999 ;
}

.topay:active::before {
	
	top:-3px;
	-webkit-box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 1px 1px 0px 0px #925C0A, 2px 2px 0px 0px #925C0A, 2px 5px 0px 0px #925C0A, 6px 4px 2px #AA6E14, 0px 10px 5px #999 ;
	-moz-box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 1px 1px 0px 0px #925C0A, 2px 2px 0px 0px #925C0A, 2px 5px 0px 0px #925C0A, 6px 4px 2px #AA6E14, 0px 10px 5px #999 ;
	-o-box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 1px 1px 0px 0px #925C0A, 2px 2px 0px 0px #925C0A, 2px 5px 0px 0px #925C0A, 6px 4px 2px #AA6E14, 0px 10px 5px #999 ;
	box-shadow:inset 0px 1px 0px #ff9900, 0px 5px 0px 0px #BD7200, 1px 1px 0px 0px #925C0A, 2px 2px 0px 0px #925C0A, 2px 5px 0px 0px #925C0A, 6px 4px 2px #AA6E14, 0px 10px 5px #999 ;
}