.pro-photo , .pro-photo *{ -webkit-backface-visibility: hidden; -webkit-transform-style:flat; } /*Images*/ .photo_box .pic_box { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } .pro-photo img { width: 100%; max-width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } .pro-photo { margin: 0; padding: 0px; overflow: hidden; line-height: 1.8; position:relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .pro-photo .pic_box { position: relative; display: inline-block; overflow: hidden; width: 100%; vertical-align: middle; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .pro-photo a, .pro-photo a:hover { text-decoration: none } .pro-photo .imgLink { position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:9; } .pro-photo .ico { position: absolute; top: 50%; width: 100%; margin-top: -25px; text-align: center; color: #FFF; filter: alpha(opacity=0); opacity: 0; } .pro-photo .ico span { color: #FFF; width: 50px; height: 50px; line-height: 50px; display: inline-block; text-align: center; font-size: 20px; margin: 0px 3px; background-color: #69b532; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .pro-photo .ico > span { position:relative; z-index:8; } .pro-photo .ico > a{ position:relative; z-index:10; } .pro-photo .ico h3 { color: #FFF; font-size: 15px; margin-bototm:5px; padding-top:15px; } .pro-photo .content { text-align: left; color: #333; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .pro-photo .content p{ color:inherit; } .vertical_center_1 { width: 100%; height: 100%; display: table; } .vertical_center_2 { display: table-cell; width: 100%; vertical-align: middle; } .pro-photo .content h3 { margin-bottom: 5px; padding-top:5px; } .pro-photo .content p { margin:0; } .pro-photo .content >.fa { font-size: 50px; height: 70%; position: relative; } .pro-photo .content a{ position:relative; z-index:10; } .pro-photo .content > .fa:before { position: absolute; top: 50%; left: 0; } .pro-photo .content .ico { position: static; margin: 0 0 15px; } .pro-photo .shade { width: 100%; height: 100%; position: absolute; top: 0; left: 0; filter: alpha(opacity=0); opacity: 0; z-index: 0; } .pro-photo .shade span{ position:absolute; top:0; left:0; width:100%; height:100%; } .pro-photo .ico, .pro-photo .content, .pro-photo .shade { transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .pro-photo:hover .ico, .pro-photo:hover .content { filter: alpha(opacity=100); opacity: 1; } .pro-photo:hover .shade { filter: alpha(opacity=100); opacity: 1; } .pro-photo.default_show .ico, .pro-photo.default_show .content { filter: alpha(opacity=100); opacity: 1; } .pro-photo.default_show .shade { filter: alpha(opacity=100); opacity: 1; } .pro-photo.img_zoom .pic_box img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all ease-out 250ms; -moz-transition: all ease-out 250ms; -webkit-transition: all ease-out 250ms; -o-transition: all ease-out 250ms; -ms-transition: all ease-out 250ms; } .pro-photo:hover.img_zoom .pic_box img { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .pro-photo.ico_left_enter .ico, .pro-photo.ico_right_enter .ico, .pro-photo.ico_top_enter .ico, .pro-photo.ico_bottom_enter .ico, .pro-photo.ico_LeftAndRight_enter span, .pro-photo.ico_TopAndBottom_enter span { transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; } .pro-photo.ico_left_enter .ico { left: -100%; } .pro-photo:hover.ico_left_enter .ico { left: 0%; } .pro-photo.ico_right_enter .ico { left: 100%; } .pro-photo:hover.ico_right_enter .ico { left: 0%; } .pro-photo.ico_top_enter .ico { top: -100%; } .pro-photo:hover.ico_top_enter .ico { top: 50%; } .pro-photo.ico_bottom_enter .ico { top: 150%; } .pro-photo:hover.ico_bottom_enter .ico { top: 50%; } .pro-photo.ico_LeftAndRight_enter span.ico-left{ transform: translate(-250px, 0); -ms-transform: translate(-250px, 0); -webkit-transform: translate(-250px, 0); -o-transform: translate(-250px, 0); -moz-transform: translate(-250px, 0); } .pro-photo.ico_LeftAndRight_enter span.ico-right{ transform: translate(250px, 0); -ms-transform: translate(250px, 0); -webkit-transform: translate(250px, 0); -o-transform: translate(250px, 0); -moz-transform: translate(200px, 0); } .pro-photo.ico_TopAndBottom_enter span.ico-left { transform: translate(0, -250px); -ms-transform: translate(0, -250px); -webkit-transform: translate(0, -250px); -o-transform: translate(0, -250px); -moz-transform: translate(0, -250px); } .pro-photo.ico_TopAndBottom_enter span.ico-right { transform: translate(0, 200px); -ms-transform: translate(0, 200px); -webkit-transform: translate(0, 200px); -o-transform: translate(0, 200px); -moz-transform: translate(0, 200px); } .pro-photo:hover.ico_LeftAndRight_enter span.ico-left, .pro-photo:hover.ico_LeftAndRight_enter span.ico-right, .pro-photo:hover.ico_TopAndBottom_enter span.ico-left, .pro-photo:hover.ico_TopAndBottom_enter span.ico-right { transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); -o-transform: translate(0, 0); -moz-transform: translate(0, 0); } .pro-photo.ico_rotate .ico span { -webkit-animation-duration: 250ms; -moz-animation-duration: 250ms; -o-animation-duration: 250ms; animation-duration: 250ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; box-shadow: 0 0 4px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4); } .pro-photo.ico_LeftAndRight_enter .vertical_center_1{-webkit-transform-style: preserve-3d; } @-webkit-keyframes pro-ico_rotate { 0% { -webkit-transform:rotate(-60deg) scale(0.5); opacity:0; } 50% { -webkit-transform:rotate(20deg) scale(1.1); opacity:1; } 100% { -webkit-transform:rotate(0deg) scale(1); opacity:1; } } @-moz-keyframes pro-ico_rotate { 0% { -moz-transform:rotate(-60deg) scale(0.5); opacity:0; } 50% { -moz-transform:rotate(20deg) scale(1.1); opacity:1; } 100% { -moz-transform:rotate(0deg) scale(1); opacity:1; } } @-o-keyframes pro-ico_rotate { 0% { -0-transform:rotate(-60deg) scale(0.5); opacity:0; } 50% { -0-transform:rotate(20deg) scale(1.1); opacity:1; } 100% { -0-transform:rotate(0deg) scale(1); opacity:1; } } @keyframes pro-ico_rotate { 0% { transform:rotate(-60deg) scale(0.5); opacity:0; } 50% { transform:rotate(20deg) scale(1.1); opacity:1; } 100% { transform:rotate(0deg) scale(1); opacity:1; } } .pro-photo.ico_rotate:hover .ico span { -webkit-animation-name: pro-ico_rotate; -moz-animation-name: pro-ico_rotate; -o-animation-name: pro-ico_rotate; animation-name: pro-ico_rotate; } .pro-photo.ico_push_in img { margin-bottom: -15px; transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; } .pro-photo.ico_push_in .ico { top: auto; bottom: -50px; width: 100%; background-color: #69b532; filter: alpha(opacity=100); opacity: 1; z-index:10; } .pro-photo.ico_push_in .ico span { background-color: transparent!important } .pro-photo.ico_push_in .ico a{ display: block; width: 50%; float: left; text-align: center; } .pro-photo.ico_push_in .ico span{ display:block; width:100%; text-align: center; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } .pro-photo.ico_push_in .ico >span { display: block; width: 50%; float: left; text-align: center; } .pro-photo.ico_push_in .ico .ico-left, .pro-photo.ico_push_in .ico .ico-left { border-right: 1px solid #FFF; border-right: 1px solid rgba(255,255,255,0.5); margin-right: -1px; } .pro-photo:hover.ico_push_in img { margin-top: -15px; margin-bottom: 0; } .pro-photo:hover.ico_push_in .ico { top: auto; bottom: 0px; } .pro-photo.ico_Botton_rotate .ico{ width:100%; height:100%; left:0; top:0; margin:0; padding:0; } .pro-photo.ico_Botton_rotate .ico >a{ position:static; } .pro-photo.ico_Botton_rotate .ico span{ width: 50px; height: 50px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; margin: 0; padding: 0; position:absolute; z-index:10; transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; bottom:0; } .pro-photo.ico_Botton_rotate .ico span.ico-left{ left:0; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -moz-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .pro-photo.ico_Botton_rotate .ico span.ico-right{ right:0; transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform-origin:100% 100%; -webkit-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .pro-photo:hover.ico_Botton_rotate span.ico-left, .pro-photo:hover.ico_Botton_rotate span.ico-right{ transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); } .pro-photo.ico_Botton_rotate .content{ position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; text-align:center; color:#FFF; opacity:0; filter:alpha(opacity=0); transition: all ease-in 300ms; -webkit-transition: all ease-in 300ms; /* Safari and Chrome */ } .pro-photo.ico_Botton_rotate .content h3{ color:#FFF; padding:0px 15px; } .pro-photo.ico_Botton_rotate .content p{ padding:0px 15px; } .pro-photo:hover.ico_Botton_rotate .content{ opacity:1; filter:alpha(opacity=100); } .pro-photo.ico_zoom .ico span { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; } .pro-photo:hover.ico_zoom .ico span { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .pro-photo.img_flip { position: relative; overflow: visible; -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; background-color:transparent!important; } .pro-photo.img_flip:hover { z-index:100; } .pro-photo.img_flip .pic_box{ position:static; overflow: visible; } .pro-photo.img_flip .content{ position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; text-align:center; color:#FFF; } .pro-photo.img_flip .pic_box img, .pro-photo.img_flip .shade, .pro-photo.img_flip .ico, .pro-photo.img_flip .content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 750ms ease 0s; -moz-transition: all 750ms ease 0s; -o-transition: all 750ms ease 0s; -ms-transition: all 750ms ease 0s; transition: all 750ms ease 0s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .pro-photo.img_flip .pic_box img { z-index: 1; position: relative; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); } .pro-photo.img_flip .pic_box .shade, .pro-photo.img_flip .content, .pro-photo.img_flip .ico { filter: alpha(opacity=100); opacity: 1; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); } .pro-photo.img_flip .pic_box .shade, .pro-photo.img_flip .content{ z-index: 10; } .pro-photo.img_flip .ico{ z-index: 11; } .pro-photo:hover.img_flip .pic_box img { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .pro-photo.img_flip .ico{ height:auto; top:auto; bottom:0; text-align:left; width:100%; margin-bottom: -50px; } .pro-photo.img_flip .ico > *{ top:-50px; } .pro-photo.img_flip .ico span{ border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; margin:0; position:relative; } .pro-photo.img_flip .ico > a:first-child, .pro-photo.img_flip .ico > a > .ico-left{ float:left; } .pro-photo.img_flip .ico > a:last-child, .pro-photo.img_flip .ico > a > .ico-right{ float:right; } .pro-photo:hover.img_flip .pic_box .shade, .pro-photo:hover.img_flip .content, .pro-photo:hover.img_flip .ico { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); } .pro-photo.img_flip .content a{ position: static; } .pro-photo.content_push_in .pic_box img { transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; } .pro-photo.content_push_in .content { filter: alpha(opacity=100); opacity: 1; background-color: #69b532; top: auto; overflow: hidden; height:60px; overflow:hidden; margin-bottom:-60px; text-align:center; } .pro-photo:hover.content_push_in .pic_box img { margin-top: -60px; } .pro-photo:hover.content_push_in .content { margin-bottom: 0px; } .pro-photo.content_push_in .content h3 { padding-top:8px; margin-bottom:3px; } .pro-photo.icon_tag_push .ico { filter: alpha(opacity=100); opacity: 1; width:100%; height:100%; top:0; left:0; margin:0; } .pro-photo.icon_tag_push .ico span{ width: 100px; height: 100px; text-align:left; left: auto; margin: 0; transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; overflow:hidden; z-index:10; } .pro-photo.icon_tag_push .ico > a{ position:static; } .pro-photo.icon_tag_push .ico span.ico-left{ position:absolute; left:-100px; top:-100px; text-indent:72px; line-height:106px; transform:rotate(45deg); -webkit-transform:rotate(45deg); } .pro-photo.icon_tag_push .ico span.ico-right{ text-indent:15px; position:absolute; left:auto; right:-100px; top:-100px; text-indent:11px; line-height:106px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } .pro-photo:hover.icon_tag_push .ico span.ico-left{ left:-50px; top:-50px; } .pro-photo:hover.icon_tag_push .ico span.ico-right{ top:-50px; right:-50px; } .pro-photo.icon_tag_push .content { background-color: #FFF; background-color: rgba(255,255,255,0.8); width: auto; height: auto; padding: 13px 36px; color: #666666; position:absolute; top: auto; bottom: 20px; filter: alpha(opacity=100); opacity: 1; } .pro-photo.icon_tag_push .content h3 { color: #666666; font-size: 16px; margin: 0; padding:0; } .pro-photo.content_bottom_push_in .ico{ top:auto; bottom:50%; margin:0; } .pro-photo.content_bottom_push_in .content { background-color:transparent; height: auto; padding: 5px 0; position:absolute; width:100%; color: #FFF; top: auto; bottom: 0px; transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; transform: translate(0, 100%); -ms-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -o-transform: translate(0, 100%); -moz-transform: translate(0, 100%); filter: alpha(opacity=0); opacity: 0; text-align:center; } .pro-photo.content_bottom_push_in .content:after{ content: ""; background-color: #69b532; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; opacity:0.8; } .pro-photo.content_bottom_push_in .content:before { content: ""; border: 8px solid transparent; border-bottom-color: #69b532; position: absolute; top: -16px; left: 50%; margin-left: -4px; opacity:0.8; } .pro-photo.content_bottom_push_in .content h3 { color: #FFF; font-size: 16px; margin: 0; padding:10px 8px 0px; } .pro-photo.content_bottom_push_in .content p { margin-bottom: 0; padding:0px 8px 4px; } .pro-photo:hover.content_bottom_push_in .content { transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); -o-transform: translate(0, 0); -moz-transform: translate(0, 0); filter: alpha(opacity=100); opacity: 1; } .pro-photo.content_bottom_push_in_2 .shade { background-color: #000; top: 100%; margin-top: -50px; filter: alpha(opacity=50); opacity: 0.5; } .pro-photo.content_bottom_push_in_2 .ico { filter: alpha(opacity=100); opacity: 1; top:0; left:0; margin:0; } .pro-photo.content_bottom_push_in_2 .ico span{ width: 100px; height: 100px; text-align:left; left: auto; margin: 0; transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; overflow:hidden; z-index:10; } .pro-photo.content_bottom_push_in_2 .ico > a{ position:static; width:100%; display:block; overflow:hidden; } .pro-photo.content_bottom_push_in_2 .ico span.ico-left{ position:absolute; left:-100px; top:-100px; text-indent:38px; line-height:132px; transform:rotate(45deg); -webkit-transform:rotate(45deg); } .pro-photo.content_bottom_push_in_2 .ico span.ico-left:before{ transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform-origin:center center; -webkit-transform-origin:center center; display:inline-block; } .pro-photo.content_bottom_push_in_2 .ico span.ico-right{ text-indent:15px; position:absolute; left:auto; right:-100px; top:-100px; text-indent:6px; line-height:107px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } .pro-photo.content_bottom_push_in_2 .ico span.ico-right:before{ transform:rotate(45deg); -webkit-transform:rotate(45deg); transform-origin:center center; -webkit-transform-origin:center center; display:inline-block; } .pro-photo:hover.content_bottom_push_in_2 .ico span.ico-left{ left:-50px; top:-50px; } .pro-photo:hover.content_bottom_push_in_2 .ico span.ico-right{ top:-50px; right:-50px; } .pro-photo:hover.content_bottom_push_in_2 .shade { top: 0; margin: 0; filter: alpha(opacity=50); opacity: 0.5; } .pro-photo.content_bottom_push_in_2 .content { filter: alpha(opacity=100); opacity: 1; height: 50px; top: 100%; margin-top: -50px; position:absolute; text-align:center; width:100%; overflow:hidden; transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; } .pro-photo:hover.content_bottom_push_in_2 .content { height: 100%; top: 0; margin-top: 0; } .pro-photo.content_bottom_push_in_2 .but { border: 1px solid #FFF; padding: 10px 22px; font-size: 13px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: inline-block; margin-top: 10px; color: #FFF; text-decoration: none; } .pro-photo.content_bottom_push_in_2 h3, .pro-photo.content_bottom_push_in_2 p{ } .pro-photo.content_bottom_push_in_2 h3{ height:50px; line-height:50px; } .pro-photo.content_bottom_push_in_2 .content, .pro-photo.content_bottom_push_in_2 .content h3 { padding-top:0!important; padding-bottom:0!important; } .pro-photo.content_bottom_push_in_2 .content h3 { margin-top:0!important; margin-bottom:0!important; } .pro-photo.entirety_left_offset .shade { background-color: #f0f0f0; } .pro-photo.entirety_left_offset .shade, .pro-photo.entirety_left_offset .ico, .pro-photo.entirety_left_offset .content { filter: alpha(opacity=100); opacity: 1; left: 100%; transition: all ease-in 250ms; -moz-transition: all ease-in 250ms; -webkit-transition: all ease-in 250ms; -o-transition: all ease-in 250ms; -ms-transition: all ease-in 250ms; } .pro-photo.entirety_left_offset .ico { width: 100%; top: auto; bottom: 0; text-align:left; } .pro-photo.entirety_left_offset .ico span { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; margin: 0; } .pro-photo.entirety_left_offset .content { position:absolute; top:-60px; left:100%; width:100%; text-align: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 90px 0px 0px 0px; max-height:100%; overflow:hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .pro-photo.entirety_left_offset h3, .pro-photo.entirety_left_offset p { padding:0 70px 0px 30px; } .pro-photo:hover.entirety_left_offset .shade, .pro-photo:hover.entirety_left_offset .ico, .pro-photo:hover.entirety_left_offset .content { left: 50px; } .pro-photo.entirety_bevel .content { position:absolute; height: 60%; text-align: left; top: 0; padding: 0px 40px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; filter: alpha(opacity=0); opacity:0; } .pro-photo.entirety_bevel .ico { height: 40%; text-align: left; margin: 0; top: 60%; left: 40px; } .pro-photo.entirety_bevel .ico span { background-color: transparent; border: 1px solid #FFF; } .pro-photo:hover.entirety_bevel .shade { background-color: #69b532; filter: alpha(opacity=80); opacity: 0.8; } .pro-photo.entirety_bevel .pic_box:before { content: ""; border-width: 0px; border-style: solid; border-top-color: #e5e5e5; border-right-color: #FFF; border-left-color: #e5e5e5; border-bottom-color: #FFF; position: absolute; right: 0; bottom: 0; z-index: 3; transition: border-width ease-in 250ms; -moz-transition: border-width ease-in 250ms; -webkit-transition: border-width ease-in 250ms; -o-transition: border-width ease-in 250ms; -ms-transition: border-width ease-in 250ms; } .pro-photo.entirety_bevel h3, .pro-photo.entirety_bevel p { } .pro-photo:hover.entirety_bevel .pic_box:before { border-width: 25px; transition: border-width ease-in 250ms; -moz-transition: border-width ease-in 250ms; -webkit-transition: border-width ease-in 250ms; -o-transition: border-width ease-in 250ms; -ms-transition: border-width ease-in 250ms; } .pro-photo:hover.entirety_bevel .content { filter: alpha(opacity=100); opacity:1; } .pro-photo.shade_zoom .shade { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); transition: all ease-in 300ms; -moz-transition: all ease-in 300ms;/* Firefox 4 */ -webkit-transition: all ease-in 300ms;/* Safari and Chrome */ -o-transition: all ease-in 300ms;/* Opera */ -ms-transition: all ease-in 300ms;/* IE9? */ } .pro-photo.shade_zoom:hover .shade { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .pro-photo.shade_zoom .ico span { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); filter: alpha(opacity=0); opacity: 0; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; width: 40px!important; height: 40px!important; line-height: 40px!important; border: 1px solid #FFF; background-color: transparent!important; transition: all ease-in 300ms; -moz-transition: all ease-in 300ms;/* Firefox 4 */ -webkit-transition: all ease-in 300ms;/* Safari and Chrome */ -o-transition: all ease-in 300ms;/* Opera */ -ms-transition: all ease-in 300ms;/* IE9? */ } .pro-photo.shade_zoom:hover .ico span { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); filter: alpha(opacity=100); opacity: 1; } .pro-photo.content_zoom .content{ position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; } .pro-photo.content_zoom .shade, .pro-photo.content_zoom .content { overflow: hidden; top: auto; left: 0; bottom: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all ease-in 300ms; -moz-transition: all ease-in 300ms;/* Firefox 4 */ -webkit-transition: all ease-in 300ms;/* Safari and Chrome */ -o-transition: all ease-in 300ms;/* Opera */ -ms-transition: all ease-in 300ms;/* IE9? */ } .pro-photo.content_zoom .content h3, .pro-photo.content_zoom .content p{ } .pro-photo.content_zoom .ico{ top:0; margin:0; left:0; width:100%; height:100%; } .pro-photo.content_zoom .ico a{ position:static; } .pro-photo.content_zoom .ico span { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; position:absolute; z-index:10; margin:0; transition: all ease-in 300ms; -moz-transition: all ease-in 300ms;/* Firefox 4 */ -webkit-transition: all ease-in 300ms;/* Safari and Chrome */ -o-transition: all ease-in 300ms;/* Opera */ -ms-transition: all ease-in 300ms;/* IE9? */ } .pro-photo.content_zoom .ico span.ico-left{ left:0; bottom:0; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -moz-transform-origin:0% 100%; -webkit-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; } .pro-photo.content_zoom .ico span.ico-right{ right:0; bottom:0; transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform-origin:100% 100%; -webkit-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .pro-photo:hover.content_zoom .ico span.ico-left, .pro-photo:hover.content_zoom .ico span.ico-right{ transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } .pro-photo.content_zoom:hover .shade, .pro-photo.content_zoom:hover .content { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); filter: alpha(opacity=100); opacity: 1; } .pro-photo.box_border_padding { border: 1px solid #dddddd; padding: 3px; } .pro-photo.box_border_padding .content{ padding:8px ; } .pro-photo.box-shadow{ box-shadow:0 0 10px rgba(0,0,0,0.3); margin-bottom:10px; } .pro-photo.box-shadow-B{ box-shadow:0px 12px 12px -8px rgba(0,0,0,0.2); margin-bottom:15px; } .pro-photo.box-shadow-LB{ box-shadow:-3px 3px 6px rgba(0,0,0,0.2); margin-bottom:10px; } .pro-photo.box-shadow-RB{ box-shadow:3px 3px 6px rgba(0,0,0,0.2); margin-bottom:10px; } .pro-photo.box-shadow-B2, .pro-photo.box-shadow-LB2, .pro-photo.box-shadow-RB2{ overflow: visible; margin-bottom:20px; background-color:#FFF } .pro-photo.box-shadow-B2:before, .pro-photo.box-shadow-LB2:before { content: ""; position: absolute; top: 100%; left: 0; width: 100px; height: 15px; z-index: -1; box-shadow: 14px 14px 14px rgba(0,0,0,0.3); -moz-box-shadow: 14px 14px 14px rgba(0,0,0,0.3); -webkit-box-shadow: 14px 14px 14px rgba(0,0,0,0.3); margin: -24px 0 0 0; transform: rotate(-5deg); -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); } .pro-photo.box-shadow-B2:after, .pro-photo.box-shadow-RB2:before { content: ""; position: absolute; top: 100%; right: 0; width: 100px; height: 15px; z-index: -1; box-shadow: -14px 14px 14px rgba(0,0,0,0.3); -moz-box-shadow: -14px 14px 14px rgba(0,0,0,0.3); -webkit-box-shadow: -14px 14px 14px rgba(0,0,0,0.3); margin: -24px 0 0 0; transform: rotate(5deg); -ms-transform: rotate(5deg); -moz-transform: rotate(-deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); }