/*
--------------------------------------------------------

Item Information

--------------------------------------------------------

Author: IncisiveStudio
Author UI: http://IncisiveStudio.com
Item Name: Sinister
Description: CSS Animation and Effects
Version: 1.6.4

-------------------------------------------------------- */
.ImageWrapper {display: block;/*overflow: hidden;*/position: relative;}
/*  =============================================
Button Layout and Color Scheme
============================================= */
.WhiteHollowRounded {border: 1px solid #ffffff;display: inline-block !important;float: none !important;font-size: 14px;font-weight: normal;height: 40px;line-height: 40px;margin: 0 2px;text-align: center;width: 40px;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;}
.WhiteHollowRounded > a {color: #ffffff;display: block;font-weight: normal;}
/*  =============================================
Overlay Effects
============================================= */
.ImageWrapper .ImageOverlayH {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);bottom: 0;display: block;height: 100%;left: 0;opacity: 0;position: absolute;right: 0;top: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;width: 100%;}
.ImageWrapper:hover .ImageOverlayH {opacity: 1;}
.ImageWrapper .ImageOverlayHe {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);height: 0;display: block;height: 0;left: 0;opacity: 0;position: absolute;top: 50%;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;width: 100%;}
.ImageWrapper:hover .ImageOverlayHe {height: 100%;top: 0;opacity: 1;}

/*  =============================================
Button Effects
============================================= */
.ImageWrapper .StyleH {visibility: hidden;margin: 0;opacity: 0;position: absolute;text-align: center;width: 100%;top: 50%;margin-top: -20px;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.ImageWrapper:hover .StyleH {opacity: 1;visibility: visible;}
/*  =============================================
Content Transform
============================================= */
.ContentWrapperMg img {-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.ContentWrapperMg:hover img {/*-webkit-transform: translateY(-8%);-moz-transform: translateY(-8%);-ms-transform: translateY(-8%);-o-transform: translateY(-8%);transform: translateY(-8%);*/}
.ContentWrapperMg .ContentMg {position: absolute;/*background: #ffffff;*/background:rgba(255, 255, 255, 0.88);opacity: 0;visibility: hidden;width: 100%;height: 50px;display: block;bottom: 0;left: 0;-webkit-transform: perspective(600px) rotateX(90deg);-moz-transform: perspective(600px) rotateX(90deg);-ms-transform: perspective(600px) rotateX(90deg);-o-transform: perspective(600px) rotateX(90deg);transform: perspective(600px) rotateX(90deg);-webkit-transform-origin: center bottom 0;-moz-transform-origin: center bottom 0;-ms-transform-origin: center bottom 0;-o-transform-origin: center bottom 0;transform-origin: center bottom 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.ContentWrapperMg:hover .ContentMg {opacity: 1;visibility: visible;-webkit-transform: perspective(600px) rotateY(0deg);-moz-transform: perspective(600px) rotateY(0deg);-ms-transform: perspective(600px) rotateY(0deg);-o-transform: perspective(600px) rotateY(0deg);transform: perspective(600px) rotateY(0deg);}
.ContentWrapperMg .ContentMg .Content {text-align: center;margin-top: 10px;white-space: nowrap;}
.ContentWrapperMg .ContentMg .Content h2 {font: 16px'Source Sans Pro', Arial, sans-serif;color: #8CA757;padding: 0 0 6px;}
.ContentWrapperMg .ContentMg .Content p {font: normal 12px'Source Sans Pro';color: #666666;}

/*  =============================================
Transparent Background
============================================= */
.TBlack {background: none repeat scroll 0 0 rgba(0,0,0,.8) !important;}
.TWhite {background: none repeat scroll 0 0 rgba(255,255,255,.8) !important;}