/* NINTH EXAMPLE*/
.totalsoftview-ninth .mask-1, .totalsoftview-ninth .mask-2 { height: 1200px; width: 1200px; -webkit-transition: all 0.3s ease-in-out 0.6s; -moz-transition: all 0.3s ease-in-out 0.6s; -o-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s; }
.totalsoftview-ninth .mask-1 { left: auto; right: 0; -webkit-transform: rotate(56.5deg) translateX(-360px); -moz-transform: rotate(56.5deg) translateX(-360px); -o-transform: rotate(56.5deg) translateX(-360px); -ms-transform: rotate(56.5deg) translateX(-360px); transform: rotate(56.5deg) translateX(-360px); -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; }
.totalsoftview-ninth .mask-2 { top: auto; bottom: 0; -webkit-transform: rotate(56.5deg) translateX(360px); -moz-transform: rotate(56.5deg) translateX(360px); -o-transform: rotate(56.5deg) translateX(360px); -ms-transform: rotate(56.5deg) translateX(360px); transform: rotate(56.5deg) translateX(360px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; }
.totalsoftview-ninth .content { height: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; width: 100%; overflow: hidden; -webkit-transform: rotate(-33.5deg) translate(-112px, 166px); -moz-transform: rotate(-33.5deg) translate(-112px, 166px); -o-transform: rotate(-33.5deg) translate(-112px, 166px); -ms-transform: rotate(-33.5deg) translate(-112px, 166px); transform: rotate(-33.5deg) translate(-112px, 166px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: all 0.4s ease-in-out 0.3s; -moz-transition: all 0.4s ease-in-out 0.3s; -o-transition: all 0.4s ease-in-out 0.3s; transition: all 0.4s ease-in-out 0.3s; }
.totalsoftview-ninth h2 { background: transparent; margin-top: 5px; }
.totalsoftview-ninth:hover .content { height: 100%; width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); opacity: 0.9; -webkit-transform: rotate(0deg) translate(0, 0); -moz-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0); transform: rotate(0deg) translate(0, 0); }
.totalsoftview-ninth:hover .mask-1, .totalsoftview-ninth:hover .mask-2 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }
.totalsoftview-ninth:hover .mask-1 { -webkit-transform: rotate(55.5deg) translateX(5px); -moz-transform: rotate(55.5deg) translateX(5px); -o-transform: rotate(55.5deg) translateX(5px); -ms-transform: rotate(55.5deg) translateX(5px); transform: rotate(55.5deg) translateX(5px); }
.totalsoftview-ninth:hover .mask-2 { -webkit-transform: rotate(55.5deg) translateX(-5px); -moz-transform: rotate(55.5deg) translateX(-5px); -o-transform: rotate(55.5deg) translateX(-5px); -ms-transform: rotate(55.5deg) translateX(-5px); transform: rotate(55.5deg) translateX(-5px); }