/* -------------------------------------------------------- Item Information -------------------------------------------------------- Author: IncisiveStudio Author UI: http://IncisiveStudio.com Item Name: Sinister Description: CSS Animation and Effects Version: 1.5 -------------------------------------------------------- */ .ImageWrapper { display: inline-block; overflow: hidden; position: relative; } /* ============================================= Button Layout and Color Scheme ============================================= */ .WhiteRounded{ border: medium none; display: inline-block !important; loat: none !important; font-size: 14px; font-weight: normal; height: 40px; line-height: 40px; margin: 0 2px; text-align: center; width: 40px; -webkit-border-radius: 250px 250px 250px; border-radius: 250px 250px 250px; -webkit-box-shadow: 0 0 1px rgba(255,255,255,1),inset 0 0 2px rgba(255,255,255,.1); box-shadow: 0 0 1px rgba(255,255,255,1),inset 0 0 2px rgba(255,255,255,.1); border:1px solid rgba(255,255,255,1); } .ImageWrapper .StyleBe {color:#ffffff;visibility: hidden;opacity: 0;position: absolute;text-align: center;right: 0;width: 100%;bottom: 25%;margin-top:20px;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleBe {margin:0 auto;opacity: 1;visibility: visible;} .ImageWrapper .StyleBe1 {color:#ffffff;visibility: hidden;opacity: 0;position: absolute;text-align: center;right: 0;width: 100%;bottom: 43%;margin-top:20px;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleBe1 {margin:0 auto;opacity: 1;visibility: visible;} .WhiteRounded > a {color: #ffffff;display: block;font-weight: normal;} .WhiteRounded > a:hover {color: #ffffff;} .VisibleButtons {margin: 0;position: absolute;text-align: center;width: 100%;top: 50%;margin-top: -20px;} .VisibleImageOverlay {position: absolute;background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);width: 100%;height: 100%;top: 0;left: 0;opacity: .6;visibility: visible;} /* ============================================= 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.2s ease 0s;-moz-transition: all 0.2s ease 0s;-o-transition: all 0.2s ease 0s;transition: all 0.2s ease 0s;width: 100%;} .ImageWrapper:hover .ImageOverlayH {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;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleH {opacity: 1;visibility: visible;} .ImageWrapper .StyleHe {margin: 0;opacity: 0;position: absolute;text-align: center;top: 0;visibility: hidden;width: 100%;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleHe {margin-top: -20px;opacity: 1;top: 50%;visibility: visible;} .ImageWrapper .StyleLi {visibility: hidden;margin: 0;opacity: 0;position: absolute;text-align: center;bottom: 0;width: 100%;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleLi {margin-bottom: -20px;opacity: 1;bottom: 35%;visibility: visible;} .ImageWrapper .StyleB {visibility: hidden;opacity: 0;position: absolute;text-align: left;left: 0;width: 100%;top: 50%;margin-top: -20px;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleB {margin-left: -42px;opacity: 1;left: 50%;visibility: visible;} .ImageWrapper .StyleC {visibility: hidden;opacity: 0;position: absolute;text-align: center;width: 100%;top: 50%;margin-top: -20px;-webkit-transform: scale(0.2);-moz-transform: scale(0.2);-ms-transform: scale(0.2);-o-transform: scale(0.2);transform: scale(0.2);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleC {opacity: 1;visibility: visible;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);} .ImageWrapper .StyleN {visibility: hidden;opacity: 0;position: absolute;text-align: center;width: 100%;top: 50%;margin-top: -20px;visibility: visible;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleN {opacity: 1;visibility: visible;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);} .ImageWrapper .StyleO span {position: absolute;} .ImageWrapper .StyleO span:nth-of-type(1) {bottom: 50%;top: 50%;left: 50%;margin: -20px 0 0 -42px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleO span:nth-of-type(2) {bottom: 50%;top: 50%;right: 50%;margin: -20px -42px 0 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleO span:nth-of-type(1) {opacity: 1;visibility: visible;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);} .ImageWrapper:hover .StyleO span:nth-of-type(2) {opacity: 1;visibility: visible;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);} .ImageWrapper .StyleF {visibility: hidden;-webkit-transform: scale(0.5) rotateX(360deg);-moz-transform: scale(0.5) rotateX(360deg);-ms-transform: scale(0.5) rotateX(360deg);-o-transform: scale(0.5) rotateX(360deg);transform: scale(0.5) rotateX(360deg);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;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleF {opacity: 1;-webkit-transform: scale(1) rotateX(0deg);-moz-transform: scale(1) rotateX(0deg);-ms-transform: scale(1) rotateX(0deg);-o-transform: scale(1) rotateX(0deg);transform: scale(1) rotateX(0deg);visibility: visible;} .ImageWrapper .StyleNe {visibility: hidden;margin: 0;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);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;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleNe {opacity: 1;-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);transform:rotateY(360deg);visibility: visible;} .ImageWrapper .StyleNa {visibility: hidden;-webkit-transform: scale(0.2) rotateY(360deg);-moz-transform: scale(0.2) rotateY(360deg);-ms-transform: scale(0.2) rotateY(360deg);-o-transform: scale(0.2) rotateY(360deg);transform: scale(0.2) rotateY(360deg);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;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleNa {opacity: 1;-webkit-transform: scale(1) rotateY(0deg);-moz-transform: scale(1) rotateY(0deg);-ms-transform: scale(1) rotateY(0deg);-o-transform: scale(1) rotateY(0deg);transform: scale(1) rotateY(0deg);visibility: visible;} .ImageWrapper .StyleMg span {position: absolute;} .ImageWrapper .StyleMg span:nth-of-type(1) {bottom: 50%;top: 50%;left: 50%;margin: -20px 0 0 -82px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleMg span:nth-of-type(2) {bottom: 50%;top: 50%;right: 50%;margin: -20px -82px 0 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleMg span:nth-of-type(1) {margin: -20px 0 0 -42px;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleMg span:nth-of-type(2) {margin: -20px -42px 0 0;visibility: visible;opacity: 1;} .ImageWrapper .StyleAl span {position: absolute;} .ImageWrapper .StyleAl span:nth-of-type(1) {top: 0;left: 50%;margin: -20px 0 0 -42px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleAl span:nth-of-type(2) {bottom: 0;right: 50%;margin: 0 -42px -20px 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleAl span:nth-of-type(1) {top: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleAl span:nth-of-type(2) {bottom: 50%;visibility: visible;opacity: 1;} .ImageWrapper .StyleSi span {position: absolute;} .ImageWrapper .StyleSi span:nth-of-type(1) {bottom: 0;left: 50%;margin: 0 0 -20px -42px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleSi span:nth-of-type(2) {top: 0;right: 50%;margin: -20px -42px 0 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleSi span:nth-of-type(1) {bottom: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleSi span:nth-of-type(2) {top: 50%;visibility: visible;opacity: 1;} .ImageWrapper .StyleP span {position: absolute;} .ImageWrapper .StyleP span:nth-of-type(1) {top: 0;left: 0;margin: -40px 0 0 -40px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleP span:nth-of-type(2) {bottom: 0;right: 0;margin: 0 -40px -40px 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleP span:nth-of-type(1) {top: 50%;left: 50%;margin: -20px 0 0 -42px;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleP span:nth-of-type(2) {bottom: 50%;right: 50%;margin: 0 -42px -20px 0;visibility: visible;opacity: 1;} .ImageWrapper .StyleS span {position: absolute;} .ImageWrapper .StyleS span:nth-of-type(1) {bottom: 0;left: 0;margin: -40px 0 0 -40px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleS span:nth-of-type(2) {top: 0;right: 0;margin: 0 -40px -40px 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleS span:nth-of-type(1) {bottom: 50%;left: 50%;margin: 0 0 -20px -42px;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleS span:nth-of-type(2) {top: 50%;right: 50%;margin: -20px -42px 0 0;visibility: visible;opacity: 1;} .ImageWrapper .StyleCl {visibility: hidden;margin: 0;opacity: 0;position: absolute;text-align: center;width: 100%;top: 50%;margin-top: -20px;visibility: visible;-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleCl {opacity: 1;visibility: visible;-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);-ms-transform:rotateX(360deg);-o-transform:rotateX(360deg);transform:rotateX(360deg);} .ImageWrapper .StyleAr span {position: absolute;} .ImageWrapper .StyleAr span:nth-of-type(1) {top: 50%;bottom: 50%;left: 50%;margin: -20px 0 0 -42px;visibility: hidden;opacity: 0;-webkit-transform: scale(0.2) rotate(0deg);-moz-transform: scale(0.2) rotate(0deg);-ms-transform: scale(0.2) rotate(0deg);-o-transform: scale(0.2) rotate(0deg);transform: scale(0.2) rotate(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleAr span:nth-of-type(2) {top: 50%;bottom: 50%;right: 50%;margin: -20px -42px -0 0;visibility: hidden;opacity: 0;-webkit-transform: scale(0.2) rotate(0deg);-moz-transform: scale(0.2) rotate(0deg);-ms-transform: scale(0.2) rotate(0deg);-o-transform: scale(0.2) rotate(0deg);transform: scale(0.2) rotate(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleAr span:nth-of-type(1) {visibility: visible;opacity: 1;-webkit-transform: scale(1) rotate(360deg);-moz-transform: scale(1) rotate(360deg);-ms-transform: scale(1) rotate(360deg);-o-transform: scale(1) rotate(360deg);transform: scale(1) rotate(360deg);} .ImageWrapper:hover .StyleAr span:nth-of-type(2) {visibility: visible;opacity: 1;-webkit-transform: scale(1) rotate(360deg);-moz-transform: scale(1) rotate(360deg);-ms-transform: scale(1) rotate(360deg);-o-transform: scale(1) rotate(360deg);transform: scale(1) rotate(360deg);} .ImageWrapper .StyleK span {position: absolute;} .ImageWrapper .StyleK span:nth-of-type(1) {top: 50%;bottom: 50%;left: 50%;margin: -20px 0 0 -42px;visibility: hidden;opacity: 0;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleK span:nth-of-type(2) {top: 50%;bottom: 50%;right: 50%;margin: -20px -42px -0 0;visibility: hidden;opacity: 0;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleK span:nth-of-type(1) {visibility: visible;opacity: 1;-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);transform:rotateY(360deg);} .ImageWrapper:hover .StyleK span:nth-of-type(2) {visibility: visible;opacity: 1;-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);transform:rotateY(360deg);} .ImageWrapper .StyleCa span {position: absolute;} .ImageWrapper .StyleCa span:nth-of-type(1) {top: 50%;bottom: 50%;left: 50%;margin: -20px 0 0 -42px;visibility: hidden;opacity: 0;-webkit-transform: scale(0.2) rotateY(0deg);-moz-transform: scale(0.2) rotateY(0deg);-ms-transform: scale(0.2) rotateY(0deg);-o-transform: scale(0.2) rotateY(0deg);transform: scale(0.2) rotateY(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleCa span:nth-of-type(2) {top: 50%;bottom: 50%;right: 50%;margin: -20px -42px -0 0;visibility: hidden;opacity: 0;-webkit-transform: scale(0.2) rotateY(0deg);-moz-transform: scale(0.2) rotateY(0deg);-ms-transform: scale(0.2) rotateY(0deg);-o-transform: scale(0.2) rotateY(0deg);transform: scale(0.2) rotateY(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleCa span:nth-of-type(1) {visibility: visible;opacity: 1;-webkit-transform: scale(1) rotateY(360deg);-moz-transform: scale(1) rotateY(360deg);-ms-transform: scale(1) rotateY(360deg);-o-transform: scale(1) rotateY(360deg);transform: scale(1) rotateY(360deg);} .ImageWrapper:hover .StyleCa span:nth-of-type(2) {visibility: visible;opacity: 1;-webkit-transform: scale(1) rotateY(360deg);-moz-transform: scale(1) rotateY(360deg);-ms-transform: scale(1) rotateY(360deg);-o-transform: scale(1) rotateY(360deg);transform: scale(1) rotateY(360deg);} .ImageWrapper .StyleSc span {position: absolute;} .ImageWrapper .StyleSc span:nth-of-type(1) {bottom: 50%;top: 50%;left: 0;margin: -20px 0 0 -68px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleSc span:nth-of-type(2) {top: 0;right: 50%;left: 50%;margin: -20px 0 0 -20px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleSc span:nth-of-type(3) {bottom: 50%;top: 50%;right: 0;margin: -20px -68px 0 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleSc span:nth-of-type(4) {bottom: 50%;top: 70%;left: 0;margin: -20px 0 0 -68px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleSc span:nth-of-type(5) {bottom: 0;top: 100%;left: 50%;margin: -20px 0 0 -20px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleSc span:nth-of-type(6) {bottom: 50%;top: 70%;right: 0;margin: -20px -68px 0 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleSc span:nth-of-type(1) {left: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleSc span:nth-of-type(2) {top: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleSc span:nth-of-type(3) {right: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleSc span:nth-of-type(4) {left: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleSc span:nth-of-type(5) {top: 70%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleSc span:nth-of-type(6) {right: 50%;visibility: visible;opacity: 1;} .items-1.ImageWrapper .StyleSc span:nth-of-type(1) {margin: -20px 0 0 -20px;} .items-2.ImageWrapper .StyleSc span:nth-of-type(1) {margin: -20px 0 0 -42px;} .items-2.ImageWrapper .StyleSc span:nth-of-type(2) {margin: -20px 0 0 5px;} .items-4.ImageWrapper .StyleSc span:nth-of-type(4) {margin: -20px 0 0 -20px;} .items-5.ImageWrapper .StyleSc span:nth-of-type(5) {margin: -20px 0 0 -42px;} .items-6.ImageWrapper .StyleSc span:nth-of-type(6) {margin: -20px 0 0 5px;} .ImageWrapper .StyleTi span {position: absolute;} .ImageWrapper .StyleTi span:nth-of-type(1) {bottom: 50%;top: 50%;left: 0;margin: -20px 0 0 -68px;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleTi span:nth-of-type(2) {bottom: 50%;top: 50%;left: 50%;right: 50%;margin: -20px 0 0 -20px;visibility: hidden;opacity: 0;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper .StyleTi span:nth-of-type(3) {bottom: 50%;top: 50%;right: 0;margin: -20px -68px 0 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;} .ImageWrapper:hover .StyleTi span:nth-of-type(1) {left: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleTi span:nth-of-type(2) {visibility: visible;opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);} .ImageWrapper:hover .StyleTi span:nth-of-type(3) {right: 50%;visibility: visible;opacity: 1;} .ImageWrapper .StyleV span {position: absolute;} .ImageWrapper .StyleV span:nth-of-type(1) {top: 0;left: 50%;margin: -20px 0 0 -68px;visibility: hidden;opacity: 0;transition: all 200ms cubic-bezier(0.000, 1.135, 0.730, 1.405) .2s;} .ImageWrapper .StyleV span:nth-of-type(2) {top: 0;left: 50%;margin: -20px 0 0 -20px;visibility: hidden;opacity: 0;transition: all 200ms cubic-bezier(0.000, 1.135, 0.730, 1.405) .3s;} .ImageWrapper .StyleV span:nth-of-type(3) {top: 0;right: 50%;margin: -20px -68px 0 0;visibility: hidden;opacity: 0;transition: all 200ms cubic-bezier(0.000, 1.135, 0.730, 1.405) .4s;} .ImageWrapper:hover .StyleV span:nth-of-type(1) {top: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleV span:nth-of-type(2) {top: 50%;visibility: visible;opacity: 1;} .ImageWrapper:hover .StyleV span:nth-of-type(3) {top: 50%;visibility: visible;opacity: 1;} .enable-video-bg.ImageWrapper { overflow: visible; }