/*! * Bootstrap v3.1.1 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ .image-hover-page-container { /*! * Bootstrap v3.3.2 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ } .ih-item img { display: block; } .bs-glyphicons, .ih-item.square.effect1, .ih-item.square.effect11, .ih-item.square.effect12, .ih-item.square.effect13, .ih-item.square.effect15, .ih-item.square.effect16, .ih-item.square.effect17, .ih-item.square.effect18, .ih-item.square.effect19, .ih-item.square.effect2, .ih-item.square.effect3, .ih-item.square.effect4, .ih-item.square.effect6, .ih-item.square.effect7, .ih-item.square.effect8 { overflow: hidden } .ih-item.circle .info, .ih-item.square .info { right: 0; text-align: center; bottom: 0; top: 0; left: 0 } .ih-item { position: relative; transition: all .35s ease-in-out } .ih-item.circle .img:before, ; .ih-item { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item, .ih-item * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .ih-item a { color: #333 } .ih-item a:hover { text-decoration: none } .ih-item img { width: 100%; height: 100% } .ih-item.circle, .ih-item.circle .img { border-radius: 50%; position: relative; } .ih-item.circle { } .ih-item.circle .img span { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; /*box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .3);*/ transition: all .35s ease-in-out } .ih-item.square .img span { box-shadow: none !important; display: none; } .ih-item.circle .img img { border-radius: 50% } .ih-item.circle .info { position: absolute; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden } .ih-item.square { position: relative; width: 100%; height: 100%; /*box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);*/ /*margin-bottom: 5px*/ } .ih-item.square .info { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden } .ih-item.circle.effect1 .spinner { width: 230px; height: 230px; border: 10px solid #ecab18; border-right-color: #1ad280; border-bottom-color: #1ad280; border-radius: 50%; transition: all .8s ease-in-out } .ih-item.circle.effect1 .info, .ih-item.circle.effect1 .spinner { -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out } .ih-item.circle.effect1 .info p, .ih-item.circle.effect11 .info p, .ih-item.circle.effect12 .info p, .ih-item.circle.effect13 .info p, .ih-item.circle.effect14 .info p, .ih-item.circle.effect15 .info p, .ih-item.circle.effect16 .info p, .ih-item.circle.effect17 .info p, .ih-item.circle.effect18 .info p, .ih-item.circle.effect19 .info p, .ih-item.circle.effect2 .info p, .ih-item.circle.effect20 .info p, .ih-item.circle.effect3 .info p, .ih-item.circle.effect4 .info p, .ih-item.circle.effect5 .info p, .ih-item.circle.effect6 .info p, .ih-item.circle.effect7 .info p, .ih-item.circle.effect8 .info p, .ih-item.circle.effect9 .info p { /*border-top: 1px solid rgba(255, 255, 255, .5)*/ } .bs-docs-nav .navbar-toggle, .top-header.bs-docs-nav { border-color: #222132 } .ih-item.circle.effect1 .img { position: absolute; top: 10px; bottom: 0; left: 10px; right: 0; width: auto; height: auto } .ih-item.circle.effect1 .info h3, .ih-item.circle.effect2 .info h3, .ih-item.circle.effect3 .info h3, .ih-item.circle.effect4 .info h3 { margin: 0 30px; text-transform: uppercase; position: relative; letter-spacing: 2px; height: 110px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3) } .ih-item.circle.effect1 .img:before { display: none } .ih-item.circle.effect1.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.circle.effect1 .info { top: 10px; bottom: 0; left: 10px; right: 0; background: #333; background: rgba(0, 0, 0, .6); opacity: 0; transition: all .8s ease-in-out } .ih-item.circle.effect1 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0 } .ih-item.circle.effect1 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect1 a:hover .spinner { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .ih-item.circle.effect1 a:hover .info { opacity: 1 } .ih-item.circle.effect2 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all .35s ease-in-out } .ih-item.circle.effect2 .img, .ih-item.circle.effect2 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect2.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6); } .ih-item.circle.effect2 .info { background: #333; opacity: 0; pointer-events: none; transition: all .35s ease-in-out } .ih-item.circle.effect2 a:hover .info { opacity: 0.8 !important; } .ih-item.circle.effect2 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0 } .ih-item.circle.effect2 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect2.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect2.left_to_right a:hover .img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) } .ih-item.circle.effect2.left_to_right a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect2.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect2.right_to_left a:hover .img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg) } .ih-item.circle.effect2.right_to_left a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect2.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect2.top_to_bottom a:hover .img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) } .ih-item.circle.effect2.top_to_bottom a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect2.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect2.bottom_to_top a:hover .img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg) } .ih-item.circle.effect2.bottom_to_top a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect3 .img { z-index: 11; transition: all .35s ease-in-out } .ih-item.circle.effect3 .img, .ih-item.circle.effect3 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect3.colored .info { background: #1a4a72 } .ih-item.circle.effect3 .info { background: #333; opacity: 0; pointer-events: none; transition: all .35s ease-in-out } .ih-item.circle.effect3 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0 } .ih-item.circle.effect3 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect3.left_to_right .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0) } .ih-item.circle.effect3.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect3.left_to_right a:hover .img { -webkit-transform: scale(.5) translateX(100%); -moz-transform: scale(.5) translateX(100%); -ms-transform: scale(.5) translateX(100%); -o-transform: scale(.5) translateX(100%); transform: scale(.5) translateX(100%) } .ih-item.circle.effect3.left_to_right a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect3.right_to_left .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0) } .ih-item.circle.effect3.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect3.right_to_left a:hover .img { -webkit-transform: scale(.5) translateX(-100%); -moz-transform: scale(.5) translateX(-100%); -ms-transform: scale(.5) translateX(-100%); -o-transform: scale(.5) translateX(-100%); transform: scale(.5) translateX(-100%) } .ih-item.circle.effect3.right_to_left a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect3.top_to_bottom .img { -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); transform: scale(1) translateY(0) } .ih-item.circle.effect3.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect3.top_to_bottom a:hover .img { -webkit-transform: scale(.5) translateY(100%); -moz-transform: scale(.5) translateY(100%); -ms-transform: scale(.5) translateY(100%); -o-transform: scale(.5) translateY(100%); transform: scale(.5) translateY(100%) } .ih-item.circle.effect3.top_to_bottom a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect3.bottom_to_top .img { -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); transform: scale(1) translateY(0) } .ih-item.circle.effect3.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect3.bottom_to_top a:hover .img { -webkit-transform: scale(.5) translateY(-100%); -moz-transform: scale(.5) translateY(-100%); -ms-transform: scale(.5) translateY(-100%); -o-transform: scale(.5) translateY(-100%); transform: scale(.5) translateY(-100%) } .ih-item.circle.effect3.bottom_to_top a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect4 .img { opacity: 1; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; transition: all .4s ease-in-out } .ih-item.circle.effect4 .info, .ih-item.circle.effect4 a:hover .img { pointer-events: none; opacity: 0 } .ih-item.circle.effect4.colored .info { background: #1a4a72 } .ih-item.circle.effect4 .info { background: #333; visibility: hidden; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; transition: all .35s ease } .ih-item.circle.effect4 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0 } .ih-item.circle.effect4 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px; transition: all .35s ease-in-out } .ih-item.circle.effect4 .info p, .ih-item.circle.effect5 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect4 a:hover .info { visibility: visible; opacity: 1 } .ih-item.circle.effect4.left_to_right .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect4.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect4.left_to_right a:hover .img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect4.left_to_right a:hover .info, .ih-item.circle.effect4.right_to_left .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect4.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect4.right_to_left a:hover .img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect4.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect4.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect4.top_to_bottom .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect4.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect4.bottom_to_top .img, .ih-item.circle.effect4.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect4.bottom_to_top .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect4.bottom_to_top a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect4.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect5 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px } .ih-item.circle.effect5.colored .info .info-back { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.circle.effect5 .info { transition: all .35s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d } .ih-item.circle.effect5 .info .info-back { visibility: hidden; border-radius: 50%; width: 100%; height: 100%; background: #333; background: rgba(0, 0, 0, .6); -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden } .ih-item.circle.effect5 .info h3, .ih-item.circle.effect6 .info h3, .ih-item.circle.effect7 .info h3 { margin: 0 30px; text-transform: uppercase; position: relative; letter-spacing: 2px; height: 110px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3) } .ih-item.circle.effect5 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0 } .ih-item.circle.effect5 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect5 a:hover .info { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg) } .ih-item.circle.effect5 a:hover .info .info-back { visibility: visible } .ih-item.circle.effect6 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all .35s ease-in-out } .ih-item.circle.effect6 .img, .ih-item.circle.effect6 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect6.colored .info { background: #1a4a72 } .ih-item.circle.effect6 .info { background: #333; opacity: 0; transition: all .35s ease-in-out } .ih-item.circle.effect6 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0 } .ih-item.circle.effect6 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect6.scale_up .info { -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5) } .ih-item.circle.effect6.scale_up a:hover .img { opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5) } .ih-item.circle.effect6.scale_up a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect6.scale_down .info { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5) } .ih-item.circle.effect6.scale_down a:hover .img { opacity: 0; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5) } .ih-item.circle.effect6.scale_down a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect6.scale_down_up .info { transform: scale(.5); -webkit-transition: all .35s ease-in-out .2s; -moz-transition: all .35s ease-in-out .2s; transition: all .35s ease-in-out .2s } .ih-item.circle.effect6.scale_down_up .info, .ih-item.circle.effect6.scale_down_up a:hover .img { -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5) } .ih-item.circle.effect6.scale_down_up a:hover .img { opacity: 0; transform: scale(.5) } .ih-item.circle.effect6.scale_down_up a:hover .info { transform: scale(1) } .ih-item.circle.effect6.scale_down_up a:hover .info, .ih-item.circle.effect7 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1) } .ih-item.circle.effect7 .img { transform: scale(1); -webkit-transition: all .35s ease-out; -moz-transition: all .35s ease-out; transition: all .35s ease-out } .ih-item.circle.effect7.colored .info { background: #1a4a72 } .ih-item.circle.effect7 .info { background: #333; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all .35s ease .2s; -moz-transition: all .35s ease .2s; transition: all .35s ease .2s } .ih-item.circle.effect7 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0 } .ih-item.circle.effect7 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect7 a:hover .img { opacity: 0; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5) } .ih-item.circle.effect7 a:hover .info { visibility: visible; opacity: 1 } .ih-item.circle.effect7.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect7.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect7.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect7.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect7.top_to_bottom .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect7.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect7.bottom_to_top .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect7.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect8.colored .info { background: #1a4a72 } .ih-item.circle.effect8 .img-container { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out } .ih-item.circle.effect8 .img-container .img { opacity: 1; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s } .ih-item.circle.effect8 .info-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; border-radius: 50%; opacity: 0; pointer-events: none; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s } .ih-item.circle.effect10 .info h3, .ih-item.circle.effect9 .info h3 { text-transform: uppercase; position: relative; letter-spacing: 2px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3) } .ih-item.circle.effect8 .info { width: 100%; height: 100%; background: #333; transform: scale(.5); -webkit-transition: all .35s ease-in-out .6s; -moz-transition: all .35s ease-in-out .6s; transition: all .35s ease-in-out .6s } .ih-item.circle.effect8 .info, .ih-item.circle.effect8 a:hover .img-container { pointer-events: none; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5) } .ih-item.circle.effect8 .info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0; height: 140px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3) } .ih-item.circle.effect8 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect8 a:hover .img-container { transform: scale(.5) } .ih-item.circle.effect8 a:hover .img-container .img { opacity: 0; pointer-events: none } .ih-item.circle.effect8 a:hover .info-container { opacity: 1 } .ih-item.circle.effect8 a:hover .info-container .info { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect8.left_to_right .img-container .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect8.left_to_right .info-container { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect8.left_to_right a:hover .img-container .img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect8.left_to_right a:hover .info-container, .ih-item.circle.effect8.right_to_left .img-container .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect8.right_to_left .info-container { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect8.right_to_left a:hover .img-container .img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect8.right_to_left a:hover .info-container { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect8.top_to_bottom .img-container .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect8.top_to_bottom .info-container { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect8.top_to_bottom a:hover .img-container .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect8.bottom_to_top .img-container .img, .ih-item.circle.effect8.top_to_bottom a:hover .info-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect8.bottom_to_top .info-container { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect8.bottom_to_top a:hover .img-container .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect8.bottom_to_top a:hover .info-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect9 .img { opacity: 1; -webkit-transition: all .35s ease-out; -moz-transition: all .35s ease-out; transition: all .35s ease-out } .ih-item.circle.effect9.colored .info { background: #1a4a72 } .ih-item.circle.effect9 .info { background: #333; visibility: hidden; transform: scale(.5); -webkit-transition: all .35s ease .2s; -moz-transition: all .35s ease .2s; transition: all .35s ease .2s } .ih-item.circle.effect9 .info, .ih-item.circle.effect9 a:hover .img { opacity: 0; pointer-events: none; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5) } .ih-item.circle.effect9 .info h3 { color: #fff; font-size: 22px; margin: 0 30px; padding: 55px 0 0; height: 110px } .ih-item.circle.effect9 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect9 a:hover .img { transform: scale(.5) } .ih-item.circle.effect9 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect9.left_to_right .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.circle.effect9.left_to_right a:hover .img { -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg) } .ih-item.circle.effect9.right_to_left .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.circle.effect9.right_to_left a:hover .img { -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg) } .ih-item.circle.effect9.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect9.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect9.bottom_to_top .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect9.bottom_to_top a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect10 .img { z-index: 11; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.circle.effect10.colored .info { background: #1a4a72 } .ih-item.circle.effect10 .info { background: #333; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all .35s ease-in-out } .ih-item.circle.effect10 .info, .ih-item.circle.effect11 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect10 .info h3 { color: #fff; font-size: 22px } .ih-item.circle.effect10 .info p { color: #bbb; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, .5) } .ih-item.circle.effect10 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect10.top_to_bottom .info h3 { margin: 0 30px; padding: 25px 0 0; height: 78px } .ih-item.circle.effect10.top_to_bottom .info p { margin: 0 30px; padding: 5px } .ih-item.circle.effect10.top_to_bottom a:hover .img { -webkit-transform: translateY(50px) scale(.5); -moz-transform: translateY(50px) scale(.5); -ms-transform: translateY(50px) scale(.5); -o-transform: translateY(50px) scale(.5); transform: translateY(50px) scale(.5) } .ih-item.circle.effect10.bottom_to_top .info h3 { margin: 95px 30px 0; padding: 25px 0 0; height: 78px } .ih-item.circle.effect11 .info h3, .ih-item.circle.effect12 .info h3, .ih-item.circle.effect13 .info h3, .ih-item.circle.effect14 .info h3, .ih-item.circle.effect15 .info h3, .ih-item.circle.effect16 .info h3 { text-transform: uppercase; position: relative; letter-spacing: 2px; height: 110px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3) } .ih-item.circle.effect10.bottom_to_top .info p { margin: 0 30px; padding: 5px } .ih-item.circle.effect10.bottom_to_top a:hover .img { -webkit-transform: translateY(-50px) scale(.5); -moz-transform: translateY(-50px) scale(.5); -ms-transform: translateY(-50px) scale(.5); -o-transform: translateY(-50px) scale(.5); transform: translateY(-50px) scale(.5) } .ih-item.circle.effect11 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px } .ih-item.circle.effect11 .img { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: all .35s ease-in-out } .ih-item.circle.effect11.colored .info { background: #1a4a72 } .ih-item.circle.effect11 .info { background: #333; opacity: 0; visibility: hidden; -webkit-transition: all .35s ease .35s; -moz-transition: all .35s ease .35s; transition: all .35s ease .35s } .ih-item.circle.effect11 .info h3 { color: #fff; font-size: 22px; margin: 0 30px; padding: 55px 0 0 } .ih-item.circle.effect11 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect11 a:hover .img { opacity: 0 } .ih-item.circle.effect11 a:hover .info { visibility: visible; opacity: 1 } .ih-item.circle.effect11.left_to_right .img { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0) } .ih-item.circle.effect11.left_to_right .info { -webkit-transform: translateZ(-1000px) rotateY(-90deg); -moz-transform: translateZ(-1000px) rotateY(-90deg); -ms-transform: translateZ(-1000px) rotateY(-90deg); -o-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg) } .ih-item.circle.effect11.left_to_right a:hover .img { -webkit-transform: translateZ(-1000px) rotateY(90deg); -moz-transform: translateZ(-1000px) rotateY(90deg); -ms-transform: translateZ(-1000px) rotateY(90deg); -o-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg) } .ih-item.circle.effect11.left_to_right a:hover .info, .ih-item.circle.effect11.right_to_left .img { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0) } .ih-item.circle.effect11.right_to_left .info { -webkit-transform: translateZ(-1000px) rotateY(90deg); -moz-transform: translateZ(-1000px) rotateY(90deg); -ms-transform: translateZ(-1000px) rotateY(90deg); -o-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg) } .ih-item.circle.effect11.right_to_left a:hover .img { -webkit-transform: translateZ(-1000px) rotateY(-90deg); -moz-transform: translateZ(-1000px) rotateY(-90deg); -ms-transform: translateZ(-1000px) rotateY(-90deg); -o-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg) } .ih-item.circle.effect11.right_to_left a:hover .info { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0) } .ih-item.circle.effect11.top_to_bottom .img { -webkit-transform: translateZ(0) rotateX(0); -moz-transform: translateZ(0) rotateX(0); -ms-transform: translateZ(0) rotateX(0); -o-transform: translateZ(0) rotateX(0); transform: translateZ(0) rotateX(0) } .ih-item.circle.effect11.top_to_bottom .info { -webkit-transform: translateZ(-1000px) rotateX(90deg); -moz-transform: translateZ(-1000px) rotateX(90deg); -ms-transform: translateZ(-1000px) rotateX(90deg); -o-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg) } .ih-item.circle.effect11.top_to_bottom a:hover .img { -webkit-transform: translateZ(-1000px) rotateX(-90deg); -moz-transform: translateZ(-1000px) rotateX(-90deg); -ms-transform: translateZ(-1000px) rotateX(-90deg); -o-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg) } .ih-item.circle.effect11.bottom_to_top .img, .ih-item.circle.effect11.top_to_bottom a:hover .info { -webkit-transform: translateZ(0) rotateX(0); -moz-transform: translateZ(0) rotateX(0); -ms-transform: translateZ(0) rotateX(0); -o-transform: translateZ(0) rotateX(0); transform: translateZ(0) rotateX(0) } .ih-item.circle.effect11.bottom_to_top .info { -webkit-transform: translateZ(-1000px) rotateX(-90deg); -moz-transform: translateZ(-1000px) rotateX(-90deg); -ms-transform: translateZ(-1000px) rotateX(-90deg); -o-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg) } .ih-item.circle.effect11.bottom_to_top a:hover .img { -webkit-transform: translateZ(-1000px) rotateX(90deg); -moz-transform: translateZ(-1000px) rotateX(90deg); -ms-transform: translateZ(-1000px) rotateX(90deg); -o-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg) } .ih-item.circle.effect11.bottom_to_top a:hover .info { -webkit-transform: translateZ(0) rotateX(0); -moz-transform: translateZ(0) rotateX(0); -ms-transform: translateZ(0) rotateX(0); -o-transform: translateZ(0) rotateX(0); transform: translateZ(0) rotateX(0) } .ih-item.circle.effect12 .img { opacity: 1; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.circle.effect12.colored .info { background: #1a4a72 } .ih-item.circle.effect12 .info { background: #333; opacity: 0; visibility: hidden; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); transition: all .35s ease-in-out } .ih-item.circle.effect12 .info, .ih-item.circle.effect13 .info { pointer-events: none; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect12 .info h3 { color: #fff; font-size: 22px; margin: 0 30px; padding: 55px 0 0 } .ih-item.circle.effect12 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect12 a:hover .img { opacity: 0; pointer-events: none } .ih-item.circle.effect12 a:hover .info { opacity: 1; visibility: visible } .ih-item.circle.effect12.left_to_right .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.circle.effect12.left_to_right .info, .ih-item.circle.effect12.left_to_right a:hover .img { -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg) } .ih-item.circle.effect12.left_to_right a:hover .info { transform: translateX(0) rotate(0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.circle.effect12.left_to_right a:hover .info, .ih-item.circle.effect12.right_to_left .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0) } .ih-item.circle.effect12.right_to_left .img { transform: translateX(0) rotate(0) } .ih-item.circle.effect12.right_to_left .info, .ih-item.circle.effect12.right_to_left a:hover .img { -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg) } .ih-item.circle.effect12.right_to_left a:hover .info { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.circle.effect12.top_to_bottom .img { -webkit-transform: translateY(0) rotate(0); -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0) } .ih-item.circle.effect12.top_to_bottom .info, .ih-item.circle.effect12.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%) rotate(-180deg); -moz-transform: translateY(-100%) rotate(-180deg); -ms-transform: translateY(-100%) rotate(-180deg); -o-transform: translateY(-100%) rotate(-180deg); transform: translateY(-100%) rotate(-180deg) } .ih-item.circle.effect12.top_to_bottom a:hover .info { transform: translateY(0) rotate(0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.circle.effect12.bottom_to_top .img, .ih-item.circle.effect12.top_to_bottom a:hover .info { -webkit-transform: translateY(0) rotate(0); -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0) } .ih-item.circle.effect12.bottom_to_top .img { transform: translateY(0) rotate(0) } .ih-item.circle.effect12.bottom_to_top .info, .ih-item.circle.effect12.bottom_to_top a:hover .img { -webkit-transform: translateY(100%) rotate(180deg); -moz-transform: translateY(100%) rotate(180deg); -ms-transform: translateY(100%) rotate(180deg); -o-transform: translateY(100%) rotate(180deg); transform: translateY(100%) rotate(180deg) } .ih-item.circle.effect12.bottom_to_top a:hover .info { -webkit-transform: translateY(0) rotate(0); -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.circle.effect13.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.circle.effect13 .info { background: #333; opacity: 0; transition: all .35s ease-in-out } .ih-item.circle.effect13 a:hover .info { opacity: 0.8 !important; } .ih-item.circle.effect13 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0; transition: all .35s ease-in-out } .ih-item.circle.effect13 .info h3, .ih-item.circle.effect13 .info p { margin: 0 30px; visibility: hidden; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect13 .info p { color: #bbb; padding: 10px 5px; font-size: 12px; transition: all .35s ease-in-out } .ih-item.circle.effect13 a:hover .info { opacity: 1 } .ih-item.circle.effect13 a:hover h3, .ih-item.circle.effect13 a:hover p { visibility: visible } .ih-item.circle.effect13.from_left_and_right .info h3 { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.circle.effect13.from_left_and_right .info p { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.circle.effect13.from_left_and_right a:hover h3, .ih-item.circle.effect13.from_left_and_right a:hover p { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.circle.effect13.top_to_bottom .info h3, .ih-item.circle.effect13.top_to_bottom .info p { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.circle.effect13.top_to_bottom a:hover h3, .ih-item.circle.effect13.top_to_bottom a:hover p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect13.bottom_to_top .info h3, .ih-item.circle.effect13.bottom_to_top .info p { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.circle.effect13.bottom_to_top a:hover h3, .ih-item.circle.effect13.bottom_to_top a:hover p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.circle.effect14 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px } .ih-item.circle.effect14 .img { visibility: visible; opacity: 1; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out } .ih-item.circle.effect14.colored .info { background: #1a4a72 } .ih-item.circle.effect14 .info { background: #333; opacity: 0; visibility: hidden; -webkit-transition: all .35s ease-in-out .3s; -moz-transition: all .35s ease-in-out .3s; transition: all .35s ease-in-out .3s } .ih-item.circle.effect14 .info h3 { color: #fff; font-size: 22px; margin: 0 30px; padding: 55px 0 0 } .ih-item.circle.effect14 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect14 a:hover .img { opacity: 0; visibility: hidden } .ih-item.circle.effect14 a:hover .info { visibility: visible; opacity: 1 } .ih-item.circle.effect14.left_to_right .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50% } .ih-item.circle.effect14.left_to_right .info { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50% } .ih-item.circle.effect14.left_to_right a:hover .img { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg) } .ih-item.circle.effect14.left_to_right a:hover .info { transform: rotateY(0) } .ih-item.circle.effect14.left_to_right a:hover .info, .ih-item.circle.effect14.right_to_left .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0) } .ih-item.circle.effect14.right_to_left .img { transform: rotateY(0); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50% } .ih-item.circle.effect14.right_to_left .info { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50% } .ih-item.circle.effect14.right_to_left a:hover .img { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg) } .ih-item.circle.effect14.right_to_left a:hover .info { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0) } .ih-item.circle.effect14.top_to_bottom .img { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100% } .ih-item.circle.effect14.top_to_bottom .info { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0 } .ih-item.circle.effect14.top_to_bottom a:hover .img { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg) } .ih-item.circle.effect14.top_to_bottom a:hover .info { transform: rotateX(0) } .ih-item.circle.effect14.bottom_to_top .img, .ih-item.circle.effect14.top_to_bottom a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0) } .ih-item.circle.effect14.bottom_to_top .img { transform: rotateX(0); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0 } .ih-item.circle.effect14.bottom_to_top .info { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100% } .ih-item.circle.effect14.bottom_to_top a:hover .img { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg) } .ih-item.circle.effect14.bottom_to_top a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0) } .ih-item.circle.effect15 .img { opacity: 1; visibility: visible; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.circle.effect15.colored .info { background: #1a4a72 } .ih-item.circle.effect15 .info { background: #333; opacity: 0; visibility: hidden; -webkit-transform: scale(.5) rotate(-720deg); -moz-transform: scale(.5) rotate(-720deg); -ms-transform: scale(.5) rotate(-720deg); -o-transform: scale(.5) rotate(-720deg); transform: scale(.5) rotate(-720deg); -webkit-transition: all .35s ease-in-out .3s; -moz-transition: all .35s ease-in-out .3s; transition: all .35s ease-in-out .3s } .ih-item.circle.effect15 .info h3 { color: #fff; font-size: 22px; margin: 0 30px; padding: 55px 0 0 } .ih-item.circle.effect15 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect15 a:hover .img { opacity: 0; visibility: hidden; -webkit-transform: scale(.5) rotate(720deg); -moz-transform: scale(.5) rotate(720deg); -ms-transform: scale(.5) rotate(720deg); -o-transform: scale(.5) rotate(720deg); transform: scale(.5) rotate(720deg) } .ih-item.circle.effect15 a:hover .info { opacity: 1; visibility: visible; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0) } .ih-item.circle.effect16 .img { z-index: 11; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.circle.effect16.colored .info { background: #1a4a72 } .ih-item.circle.effect16 .info { background: #333; transition: all .35s ease-in-out } .ih-item.circle.effect16 .info, .ih-item.circle.effect16 .info p { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect16 .info h3 { color: #fff; font-size: 22px; margin: 0 30px; padding: 55px 0 0 } .ih-item.circle.effect16 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px; transition: all .35s ease-in-out } .ih-item.circle.effect16.left_to_right .img:after, .ih-item.circle.effect16.right_to_left .img:after { border-radius: 50%; content: ''; width: 8px; height: 8px; position: absolute; top: 40%; margin: -4px 0 0 -4px; background: rgba(0, 0, 0, .8); box-shadow: 0 0 1px rgba(255, 255, 255, .9) } .ih-item.circle.effect16.left_to_right .img { -webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; -ms-transform-origin: 95% 40%; -o-transform-origin: 95% 40%; transform-origin: 95% 40% } .ih-item.circle.effect16.left_to_right .img:after { left: 95% } .ih-item.circle.effect16.left_to_right a:hover .img { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg) } .ih-item.circle.effect16.right_to_left .img { -webkit-transform-origin: 5% 40%; -moz-transform-origin: 5% 40%; -ms-transform-origin: 5% 40%; -o-transform-origin: 5% 40%; transform-origin: 5% 40% } .ih-item.circle.effect16.right_to_left .img:after { left: 5% } .ih-item.circle.effect17 .info h3, .ih-item.circle.effect18 .info h3, .ih-item.circle.effect20 .info h3 { text-transform: uppercase; margin: 0 30px; position: relative; letter-spacing: 2px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3) } .ih-item.circle.effect16.right_to_left a:hover .img { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg) } .ih-item.circle.effect17 .info { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all .35s ease-in-out } .ih-item.circle.effect17 .info, .ih-item.circle.effect17 .info p { opacity: 0; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.circle.effect17 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0; height: 110px } .ih-item.circle.effect17 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px; transition: all .35s ease-in-out } .ih-item.circle.effect17 a:hover .img:before { box-shadow: inset 0 0 0 110px #333, inset 0 0 0 16px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 0 0 110px rgba(0, 0, 0, .6), inset 0 0 0 16px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .1) } .ih-item.circle.effect17 a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect17 a:hover .info p { opacity: 1 } .ih-item.circle.effect17.colored a:hover .img:before { box-shadow: inset 0 0 0 110px #1a4a72, inset 0 0 0 16px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 0 0 110px rgba(26, 74, 114, .6), inset 0 0 0 16px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .1) } .ih-item.circle.effect18 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px } .ih-item.circle.effect18 .img { z-index: 11; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out } .ih-item.circle.effect18.colored .info .info-back { background: #1a4a72 } .ih-item.circle.effect18 .info { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d } .ih-item.circle.effect18 .info .info-back { opacity: 1; border-radius: 50%; width: 100%; height: 100%; background: #333 } .ih-item.circle.effect18 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0; height: 110px } .ih-item.circle.effect18 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect18.bottom_to_top .img { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0 } .ih-item.circle.effect18.bottom_to_top a:hover .img { -webkit-transform: rotate3d(1, 0, 0, 180deg); -moz-transform: rotate3d(1, 0, 0, 180deg); -ms-transform: rotate3d(1, 0, 0, 180deg); -o-transform: rotate3d(1, 0, 0, 180deg); transform: rotate3d(1, 0, 0, 180deg) } .ih-item.circle.effect18.top_to_bottom .img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100% } .ih-item.circle.effect18.top_to_bottom a:hover .img { -webkit-transform: rotate3d(1, 0, 0, -180deg); -moz-transform: rotate3d(1, 0, 0, -180deg); -ms-transform: rotate3d(1, 0, 0, -180deg); -o-transform: rotate3d(1, 0, 0, -180deg); transform: rotate3d(1, 0, 0, -180deg) } .ih-item.circle.effect18.left_to_right .img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50% } .ih-item.circle.effect18.left_to_right a:hover .img { -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg) } .ih-item.circle.effect18.right_to_left .img { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50% } .ih-item.circle.effect18.right_to_left a:hover .img { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg) } .ih-item.circle.effect19.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.circle.effect19 .info { background: #333; background: rgba(0, 0, 0, .6); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.circle.effect19 .info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0; height: 140px; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3) } .ih-item.circle.effect19 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect19 a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect20 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px } .ih-item.circle.effect20 .img { -webkit-transition: all .35s linear; -moz-transition: all .35s linear; transition: all .35s linear; transform-origin: 50% 0 } .ih-item.circle.effect20 .img, .ih-item.circle.effect20 .info .info-back { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0 } .ih-item.circle.effect20.colored .info .info-back { background: #1a4a72 } .ih-item.circle.effect20 .info { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d } .ih-item.circle.effect20 .info .info-back { opacity: 1; visibility: hidden; border-radius: 50%; width: 100%; height: 100%; background: #333; -webkit-transition: all .35s linear; -moz-transition: all .35s linear; transition: all .35s linear; transform-origin: 50% 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .ih-item.circle.effect20 .info h3 { color: #fff; font-size: 22px; padding: 55px 0 0; height: 110px } .ih-item.circle.effect20 .info p { color: #bbb; padding: 10px 5px; margin: 0 30px; font-size: 12px } .ih-item.circle.effect20 a:hover .img { opacity: 0 } .ih-item.circle.effect20 a:hover .info .info-back { opacity: 1; visibility: visible } .ih-item.circle.effect20.top_to_bottom .info .info-back { -webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg) } .ih-item.circle.effect20.top_to_bottom a:hover .img { -webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg) } .ih-item.circle.effect20.top_to_bottom a:hover .info .info-back { -webkit-transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg) } .ih-item.circle.effect20.bottom_to_top .info .info-back { -webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg) } .ih-item.circle.effect20.bottom_to_top a:hover .img { -webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg) } .ih-item.circle.effect20.bottom_to_top a:hover .info .info-back { -webkit-transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg) } .ih-item.square.effect1.colored .info { background: #1a4a72 } .ih-item.square.effect1 .img { z-index: 11; position: absolute; transition: all .35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect1 .img, .ih-item.square.effect1 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect1 .info { background: #333; visibility: hidden; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all .35s ease-in-out } .ih-item.square.effect1 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect1.left_and_right .info h3 { position: absolute; top: 12px; left: 12px; text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; margin: 0 } .ih-item.square.effect1.left_and_right .info p { position: absolute; right: 12px; bottom: 12px; margin: 0; font-size: 12px; color: #bbb } .ih-item.square.effect1.left_and_right a:hover .img { -webkit-transform: scale(.6); -moz-transform: scale(.6); -ms-transform: scale(.6); -o-transform: scale(.6); transform: scale(.6) } .ih-item.square.effect1.top_to_bottom .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px 10px 0 4px; margin: 10px 0 0 } .ih-item.square.effect1.top_to_bottom .info p { font-size: 12px; color: #bbb; padding: 5px; text-align: center } .ih-item.square.effect1.top_to_bottom a:hover .img { -webkit-transform: translateY(30px) scale(.6); -moz-transform: translateY(30px) scale(.6); -ms-transform: translateY(30px) scale(.6); -o-transform: translateY(30px) scale(.6); transform: translateY(30px) scale(.6) } .ih-item.square.effect1.bottom_to_top .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px 10px 0 4px; margin: 134px 0 0 } .ih-item.square.effect1.bottom_to_top .info p { font-size: 12px; color: #bbb; padding: 5px; text-align: center } .ih-item.square.effect1.bottom_to_top a:hover .img { -webkit-transform: translateY(-30px) scale(.6); -moz-transform: translateY(-30px) scale(.6); -ms-transform: translateY(-30px) scale(.6); -o-transform: translateY(-30px) scale(.6); transform: translateY(-30px) scale(.6) } .ih-item.square.effect2.colored .info { background: #1a4a72 } .ih-item.square.effect2.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect2 .img { opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -ms-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); transform: rotate(0) scale(1) } .ih-item.square.effect2 .info { background: #333; visibility: hidden; -webkit-transition: all .35s .3s ease-in-out; -moz-transition: all .35s .3s ease-in-out; transition: all .35s .3s ease-in-out } .ih-item.square.effect2 .info h3 { text-transform: uppercase; color: #fff; font-size: 17px; padding: 10px; background: #111; margin: 30px 0 0; transform: translateY(-200px); -webkit-transition: all .35s .6s ease-in-out; -moz-transition: all .35s .6s ease-in-out; transition: all .35s .6s ease-in-out } .ih-item.square.effect2 .info h3, .ih-item.square.effect2 .info p { text-align: center; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); -o-transform: translateY(-200px) } .ih-item.square.effect2 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; transform: translateY(-200px); -webkit-transition: all .35s .5s linear; -moz-transition: all .35s .5s linear; transition: all .35s .5s linear } .ih-item.square.effect2 a:hover .img { -webkit-transform: rotate(720deg) scale(0); -moz-transform: rotate(720deg) scale(0); -ms-transform: rotate(720deg) scale(0); -o-transform: rotate(720deg) scale(0); transform: rotate(720deg) scale(0); opacity: 0 } .ih-item.square.effect2 a:hover .info { visibility: visible } .ih-item.square.effect2 a:hover .info h3, .ih-item.square.effect2 a:hover .info p { transform: translateY(0) } .ih-item.square.effect2 a:hover .info h3, .ih-item.square.effect2 a:hover .info p, .ih-item.square.effect3 .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0) } .ih-item.square.effect3.colored .info { background: #1a4a72 } .ih-item.square.effect3 .img { transform: translateY(0); transition: all .35s ease-in-out } .ih-item.square.effect3 .img, .ih-item.square.effect3 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect3 .info { height: 65px; background: #333; opacity: 0; transition: all .35s ease-in-out } .ih-item.square.effect3 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px 10px 0 4px; margin: 4px 0 0 } .ih-item.square.effect3 .info p { font-size: 12px; position: relative; color: #bbb; /*padding: 5px;*/ text-align: center } .ih-item.square.effect3 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect3.bottom_to_top .info { top: auto; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect3.bottom_to_top a:hover .img { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px) } .ih-item.square.effect3.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect3.top_to_bottom .info { bottom: auto; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect3.top_to_bottom a:hover .img { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px) } .ih-item.square.effect3.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect4 { position: relative } .ih-item.square.effect4.colored .info { background: rgba(12, 34, 52, .6) } .ih-item.square.effect4.colored .mask1, .ih-item.square.effect4.colored .mask2 { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.square.effect4 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.square.effect4 .mask1, .ih-item.square.effect4 .mask2 { position: absolute; background: #333; background: rgba(0, 0, 0, .6); height: 361px; width: 361px; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.square.effect4 .mask1 { left: auto; right: 0; top: 0; -webkit-transform: rotate(56.5deg) translateX(-180px); -moz-transform: rotate(56.5deg) translateX(-180px); -ms-transform: rotate(56.5deg) translateX(-180px); -o-transform: rotate(56.5deg) translateX(-180px); transform: rotate(56.5deg) translateX(-180px); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0 } .ih-item.square.effect4 .mask2 { top: auto; bottom: 0; left: 0; -webkit-transform: rotate(56.5deg) translateX(180px); -moz-transform: rotate(56.5deg) translateX(180px); -ms-transform: rotate(56.5deg) translateX(180px); -o-transform: rotate(56.5deg) translateX(180px); transform: rotate(56.5deg) translateX(180px); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100% } .ih-item.square.effect4 .info { background: #111; height: 0; visibility: hidden; width: 361px; -webkit-transform: rotate(-33.5deg) translate(-112px, 166px); -moz-transform: rotate(-33.5deg) translate(-112px, 166px); -ms-transform: rotate(-33.5deg) translate(-112px, 166px); -o-transform: rotate(-33.5deg) translate(-112px, 166px); transform: rotate(-33.5deg) translate(-112px, 166px); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transition: all .35s ease-in-out .35s; -moz-transition: all .35s ease-in-out .35s; transition: all .35s ease-in-out .35s } .ih-item.square.effect4 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: 0 0; margin-top: 5px; border-bottom: 1px solid rgba(255, 255, 255, .2); transition: all .35s ease-in-out .35s } .ih-item.square.effect4 .info h3, .ih-item.square.effect4 .info p { opacity: 0; -webkit-transition: all .35s ease-in-out .35s; -moz-transition: all .35s ease-in-out .35s } .ih-item.square.effect5 .info h3, .ih-item.square.effect6 .info h3, .ih-item.square.effect7 .info h3, .ih-item.square.effect8 .info h3 { text-align: center; text-transform: uppercase; margin: 30px 0 0 } .ih-item.square.effect4 .info h3 { margin-bottom: 0px; } .ih-item.square.effect4 .info p { font-size: 12px; position: relative; color: #bbb; padding: 15px 15px 10px 15px; text-align: center; transition: all .35s ease-in-out .35s } .ih-item.square.effect4 a:hover .mask1 { -webkit-transform: rotate(56.5deg) translateX(1px); -moz-transform: rotate(56.5deg) translateX(1px); -ms-transform: rotate(56.5deg) translateX(1px); -o-transform: rotate(56.5deg) translateX(1px); transform: rotate(56.5deg) translateX(1px) } .ih-item.square.effect4 a:hover .mask2 { -webkit-transform: rotate(56.5deg) translateX(-1px); -moz-transform: rotate(56.5deg) translateX(-1px); -ms-transform: rotate(56.5deg) translateX(-1px); -o-transform: rotate(56.5deg) translateX(-1px); transform: rotate(56.5deg) translateX(-1px) } .ih-item.square.effect4 a:hover .info { width: 100%; height: 130px; visibility: visible; top: 40px; -webkit-transform: rotate(0) translate(0, 0); -moz-transform: rotate(0) translate(0, 0); -ms-transform: rotate(0) translate(0, 0); -o-transform: rotate(0) translate(0, 0); transform: rotate(0) translate(0, 0) } .ih-item.square.effect4 a:hover .info h3, .ih-item.square.effect4 a:hover .info p { opacity: 1 } .ih-item.square.effect5.colored .info { background: #1a4a72 } .ih-item.square.effect5.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect5 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect5 .info { background: #333; opacity: 0; transition: all .35s ease-in-out } .ih-item.square.effect5 .info, .ih-item.square.effect6 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect5 .info h3 { color: #fff; font-size: 17px; padding: 10px; background: #111 } .ih-item.square.effect5 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect5 a:hover .img { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0 } .ih-item.square.effect5 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect5.left_to_right .info { -webkit-transform: scale(0) rotate(-180deg); -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg) } .ih-item.square.effect5.right_to_left .info { -webkit-transform: scale(0) rotate(180deg); -moz-transform: scale(0) rotate(180deg); -ms-transform: scale(0) rotate(180deg); -o-transform: scale(0) rotate(180deg); transform: scale(0) rotate(180deg) } .ih-item.square.effect6.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.square.effect6.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect6 .img { transition: all .35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect6 .info { background: #333; visibility: hidden; opacity: 0.8 !important; transition: all .35s ease-in-out } .ih-item.square.effect6 .info, .ih-item.square.effect6 .info h3 { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect6 .info h3 { color: #fff; font-size: 17px; padding: 10px; background: #111; transition: all .35s ease-in-out } .ih-item.square.effect6 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center; -webkit-transition: all .05s linear; -moz-transition: all .05s linear; transition: all .05s linear } .ih-item.square.effect6 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2) } .ih-item.square.effect6 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect6.from_top_and_bottom .info h3 { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect6.from_top_and_bottom .info p { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect6.from_top_and_bottom a:hover .info h3, .ih-item.square.effect6.from_top_and_bottom a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect6.from_left_and_right .info h3 { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.square.effect6.from_left_and_right .info p { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.square.effect6.from_left_and_right a:hover .info h3, .ih-item.square.effect6.from_left_and_right a:hover .info p { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect6.top_to_bottom .info h3, .ih-item.square.effect6.top_to_bottom .info p { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect6.top_to_bottom a:hover .info h3, .ih-item.square.effect6.top_to_bottom a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect6.bottom_to_top .info h3, .ih-item.square.effect6.bottom_to_top .info p { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect6.bottom_to_top a:hover .info h3, .ih-item.square.effect6.bottom_to_top a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect7.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.square.effect7.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect7 .img { transition: all .35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect7 .img, .ih-item.square.effect7 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect7 .info { background: #333; visibility: hidden; opacity: 0.8 !important; transition: all .35s ease-in-out } .ih-item.square.effect7 .info h3 { color: #fff; font-size: 17px; padding: 10px; background: #111; -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); transform: scale(4); -webkit-transition: all .35s .1s ease-in-out; -moz-transition: all .35s .1s ease-in-out; transition: all .35s .1s ease-in-out } .ih-item.square.effect7 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center; -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); -webkit-transition: all .35s .3s linear; -moz-transition: all .35s .3s linear; transition: all .35s .3s linear } .ih-item.square.effect7 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2) } .ih-item.square.effect7 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect7 a:hover .info h3, .ih-item.square.effect7 a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect8.colored .info { background: #1a4a72 } .ih-item.square.effect8.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect8 .img { opacity: 1; transition: all .35s ease-in-out } .ih-item.square.effect8 .img, .ih-item.square.effect8 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect8 .info { background: #333; visibility: hidden; opacity: 0; transition: all .35s ease-in-out } .ih-item.square.effect8 .info h3 { color: #fff; font-size: 17px; padding: 10px; background: #111; -webkit-transition: all .35s .1s ease-in-out; -moz-transition: all .35s .1s ease-in-out; transition: all .35s .1s ease-in-out } .ih-item.square.effect8 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center; -webkit-transition: all .35s .15s linear; -moz-transition: all .35s .15s linear; transition: all .35s .15s linear } .ih-item.square.effect8 a:hover .img { opacity: 0 } .ih-item.square.effect8 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect8.scale_up .img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect8.scale_up .info, .ih-item.square.effect8.scale_up .info h3, .ih-item.square.effect8.scale_up .info p { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0) } .ih-item.square.effect8.scale_up a:hover .img { -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5) } .ih-item.square.effect8.scale_down .img, .ih-item.square.effect8.scale_up a:hover .info, .ih-item.square.effect8.scale_up a:hover .info h3, .ih-item.square.effect8.scale_up a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect8.scale_down .info, .ih-item.square.effect8.scale_down .info h3, .ih-item.square.effect8.scale_down .info p { -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5) } .ih-item.square.effect8.scale_down a:hover .img { -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5) } .ih-item.square.effect8.scale_down a:hover .info, .ih-item.square.effect8.scale_down a:hover .info h3, .ih-item.square.effect8.scale_down a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect9 { perspective: 900px } .ih-item.square.effect15, .ih-item.square.effect9 { -webkit-perspective: 900px; -moz-perspective: 900px } .ih-item.square.effect9.colored .info .info-back { background: #1a4a72 } .ih-item.square.effect9.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect9 .img { position: relative; z-index: 11; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out } .ih-item.square.effect9 .info { z-index: 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 } .ih-item.square.effect9 .info .info-back { opacity: 1; width: 100%; height: 100%; padding-top: 30px; background: #333 } .ih-item.square.effect9 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111; margin: 0 } .ih-item.square.effect10 .info h3, .ih-item.square.effect11 .info h3, .ih-item.square.effect12 .info h3, .ih-item.square.effect13 .info h3, .ih-item.square.effect14 .info h3, .ih-item.square.effect15 .info h3 { text-transform: uppercase; margin: 30px 0 0 } .ih-item.square.effect9 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect9.left_to_right .img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50% } .ih-item.square.effect9.left_to_right a:hover .img { -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg) } .ih-item.square.effect9.right_to_left .img { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50% } .ih-item.square.effect9.right_to_left a:hover .img { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg) } .ih-item.square.effect9.top_to_bottom .img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100% } .ih-item.square.effect9.top_to_bottom a:hover .img { -webkit-transform: rotate3d(1, 0, 0, -180deg); -moz-transform: rotate3d(1, 0, 0, -180deg); -ms-transform: rotate3d(1, 0, 0, -180deg); -o-transform: rotate3d(1, 0, 0, -180deg); transform: rotate3d(1, 0, 0, -180deg) } .ih-item.square.effect9.bottom_to_top .img { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0 } .ih-item.square.effect9.bottom_to_top a:hover .img { -webkit-transform: rotate3d(1, 0, 0, 180deg); -moz-transform: rotate3d(1, 0, 0, 180deg); -ms-transform: rotate3d(1, 0, 0, 180deg); -o-transform: rotate3d(1, 0, 0, 180deg); transform: rotate3d(1, 0, 0, 180deg) } .ih-item.square.effect10 { overflow: hidden } .ih-item.square.effect10.colored .info { background: #1a4a72 } .ih-item.square.effect10.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect10 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item.square.effect10 .info { background: #333; visibility: hidden; opacity: 0; transition: all .35s ease-in-out } .ih-item.square.effect10 .info, .ih-item.square.effect11 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect10 .info h3 { color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111 } .ih-item.square.effect10 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect10 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect10.left_to_right .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect10.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.square.effect10.left_to_right a:hover .img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.square.effect10.left_to_right a:hover .info, .ih-item.square.effect10.right_to_left .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect10.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.square.effect10.right_to_left a:hover .img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.square.effect10.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect10.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect10.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect10.top_to_bottom a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect10.bottom_to_top .img, .ih-item.square.effect10.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect10.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect10.bottom_to_top a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect10.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect11.colored .info { background: #1a4a72 } .ih-item.square.effect11.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect11 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all .35s ease-in-out } .ih-item.square.effect11 .info { background: #333; visibility: hidden; opacity: 0; -webkit-transition: all .35s ease .2s; -moz-transition: all .35s ease .2s; transition: all .35s ease .2s } .ih-item.square.effect11 .info h3 { color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111 } .ih-item.square.effect11 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect11 a:hover .img { opacity: 0; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5) } .ih-item.square.effect11 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect11.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.square.effect11.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect11.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.square.effect11.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect11.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect11.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect11.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect11.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect12.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.square.effect12.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect12 .img { transition: all .35s ease-in } .ih-item.square.effect12 .img, .ih-item.square.effect12 .info { -webkit-transition: all .35s ease-in; -moz-transition: all .35s ease-in } .ih-item.square.effect12 .info { background: #333; visibility: hidden; opacity: 0.8 !important; transition: all .35s ease-in } .ih-item.square.effect12 .info h3 { color: #fff; font-size: 17px; padding: 10px; background: #111; transition: all .35s ease-in } .ih-item.square.effect12 .info h3, .ih-item.square.effect12 .info p { text-align: center; -webkit-transition: all .35s ease-in; -moz-transition: all .35s ease-in } .ih-item.square.effect12 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; transition: all .35s ease-in } .ih-item.square.effect12 a:hover .info { visibility: visible; opacity: 1; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .ih-item.square.effect12 a:hover .info h3 { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect12 a:hover .info p { -webkit-transition-delay: .25s; -moz-transition-delay: .25s; transition-delay: .25s } .ih-item.square.effect12.left_to_right .info { -webkit-transform: translate(-460px, -100px) rotate(-180deg); -moz-transform: translate(-460px, -100px) rotate(-180deg); -ms-transform: translate(-460px, -100px) rotate(-180deg); -o-transform: translate(-460px, -100px) rotate(-180deg); transform: translate(-460px, -100px) rotate(-180deg) } .ih-item.square.effect12.left_to_right .info h3 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px) } .ih-item.square.effect12.left_to_right .info p { -webkit-transform: translateX(-300px) rotate(-90deg); -moz-transform: translateX(-300px) rotate(-90deg); -ms-transform: translateX(-300px) rotate(-90deg); -o-transform: translateX(-300px) rotate(-90deg); transform: translateX(-300px) rotate(-90deg) } .ih-item.square.effect12.left_to_right a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } .ih-item.square.effect12.left_to_right a:hover .info h3 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect12.left_to_right a:hover .info p { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.square.effect12.right_to_left .info { -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg) } .ih-item.square.effect12.right_to_left .info h3 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px) } .ih-item.square.effect12.right_to_left .info p { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg) } .ih-item.square.effect12.right_to_left a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } .ih-item.square.effect12.right_to_left a:hover .info h3 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect12.right_to_left a:hover .info p { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.square.effect12.top_to_bottom .info { -webkit-transform: translate(-265px, -145px) rotate(-45deg); -moz-transform: translate(-265px, -145px) rotate(-45deg); -ms-transform: translate(-265px, -145px) rotate(-45deg); -o-transform: translate(-265px, -145px) rotate(-45deg); transform: translate(-265px, -145px) rotate(-45deg) } .ih-item.square.effect12.top_to_bottom .info h3, .ih-item.square.effect12.top_to_bottom .info p { -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); transform: translate(200px, -200px) } .ih-item.square.effect12.top_to_bottom a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .ih-item.square.effect12.top_to_bottom a:hover .info h3 { transform: translate(0, 0); -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect12.top_to_bottom a:hover .info h3, .ih-item.square.effect12.top_to_bottom a:hover .info p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0) } .ih-item.square.effect12.top_to_bottom a:hover .info p { transform: translate(0, 0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.square.effect12.bottom_to_top .info { -webkit-transform: translate(265px, 145px) rotate(45deg); -moz-transform: translate(265px, 145px) rotate(45deg); -ms-transform: translate(265px, 145px) rotate(45deg); -o-transform: translate(265px, 145px) rotate(45deg); transform: translate(265px, 145px) rotate(45deg) } .ih-item.square.effect12.bottom_to_top .info h3 { -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); transform: translate(200px, -200px) } .ih-item.square.effect12.bottom_to_top .info p { -webkit-transform: translate(-200px, 200px); -moz-transform: translate(-200px, 200px); -ms-transform: translate(-200px, 200px); -o-transform: translate(-200px, 200px); transform: translate(-200px, 200px) } .ih-item.square.effect12.bottom_to_top a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .ih-item.square.effect12.bottom_to_top a:hover .info h3 { transform: translate(0, 0); -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect12.bottom_to_top a:hover .info h3, .ih-item.square.effect12.bottom_to_top a:hover .info p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0) } .ih-item.square.effect12.bottom_to_top a:hover .info p { transform: translate(0, 0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.square.effect13.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.square.effect13.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect13 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect13 .info { background: #333; visibility: hidden; opacity: 0.8 !important; pointer-events: none; transition: all .35s ease-in-out } .ih-item.square.effect13 .info, .ih-item.square.effect14 .img { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect13 .info h3 { color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111 } .ih-item.square.effect13 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect13 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2) } .ih-item.square.effect13 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect13.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.square.effect13.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect13.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.square.effect13.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect13.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect13.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect13.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect13.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect14.colored .info { background: #1a4a72 } .ih-item.square.effect14.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect14 .img { opacity: 1; transition: all .35s ease-in-out } .ih-item.square.effect14 .info { background: #333; visibility: hidden; transform: scale(.5); -webkit-transition: all .35s ease .2s; -moz-transition: all .35s ease .2s; transition: all .35s ease .2s } .ih-item.square.effect14 .info, .ih-item.square.effect14 a:hover .img { opacity: 0; pointer-events: none; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5) } .ih-item.square.effect14 .info h3 { color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111 } .ih-item.square.effect14 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect14 a:hover .img { transform: scale(.5) } .ih-item.square.effect14 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect14.left_to_right .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.square.effect14.left_to_right a:hover .img { -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg) } .ih-item.square.effect14.right_to_left .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.square.effect14.right_to_left a:hover .img { -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg) } .ih-item.square.effect14.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect14.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect14.bottom_to_top .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect14.bottom_to_top a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect15 { perspective: 900px } .ih-item.square.effect15.colored .info { background: #1a4a72 } .ih-item.square.effect15 .img { opacity: 1; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; transition: all .4s ease-in-out } .ih-item.square.effect15 .info { background: #333; opacity: 0; -webkit-transition: all .35s ease-in-out .3s; -moz-transition: all .35s ease-in-out .3s; transition: all .35s ease-in-out .3s } .ih-item.square.effect15 .info h3 { color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111 } .ih-item.square.effect15 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect15 a:hover .img { opacity: 0; visibility: hidden } .ih-item.square.effect15 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect15.left_to_right .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50% } .ih-item.square.effect15.left_to_right .info { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50% } .ih-item.square.effect15.left_to_right a:hover .img { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg) } .ih-item.square.effect15.left_to_right a:hover .info { transform: rotateY(0) } .ih-item.square.effect15.left_to_right a:hover .info, .ih-item.square.effect15.right_to_left .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0) } .ih-item.square.effect15.right_to_left .img { transform: rotateY(0); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50% } .ih-item.square.effect15.right_to_left .info { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50% } .ih-item.square.effect15.right_to_left a:hover .img { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg) } .ih-item.square.effect15.right_to_left a:hover .info { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0) } .ih-item.square.effect15.top_to_bottom .img { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100% } .ih-item.square.effect15.top_to_bottom .info { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0 } .ih-item.square.effect15.top_to_bottom a:hover .img { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg) } .ih-item.square.effect15.top_to_bottom a:hover .info { transform: rotateX(0) } .ih-item.square.effect15.bottom_to_top .img, .ih-item.square.effect15.top_to_bottom a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0) } .ih-item.square.effect15.bottom_to_top .img { transform: rotateX(0); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0 } .ih-item.square.effect15.bottom_to_top .info { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100% } .ih-item.square.effect15.bottom_to_top a:hover .img { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg) } .ih-item.square.effect15.bottom_to_top a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0) } .h1, .h2, .h3, .h4, .h5, .h6, ; h1, h2, h3, h4, h5, h6 { font-family: Lustria, Georgia, "Times New Roman", Times, serif } .bs-docs-nav .navbar-nav>.active>a, .bs-docs-nav .navbar-nav>.active>a:hover { background-color: #222132 } .bs-docs-nav .navbar-toggle:hover { background-color: #383550; border-color: #222132 } .navbar-nav { margin: 0 -15px } @media (min-width:768px) { .navbar-nav { margin: 0 } } .bs-docs-nav .navbar-collapse { border-color: transparent } .header { /*background: url(../images/bg_header.jpg) repeat-x*/ } .bs-docs-home, .bs-header { color: #c8c8e6 } .bs-footer, .bs-footer a { color: #575781 } .highlight pre { white-space: pre } .section-heading { padding-top: 80px } .section-heading.first-child { margin-top: 0; padding-top: 0 } .bs-footer { background-color: #2C2C44 } .ih-item.square .img, .ih-item.square .img img { /*height: 100%!important*/ } .ih-item.square.effect16.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.square.effect16.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect16 .img { transition: all .35s ease-in } .ih-item.square.effect16 .img, .ih-item.square.effect16 .info { -webkit-transition: all .35s ease-in; -moz-transition: all .35s ease-in } .ih-item.square.effect16 .info { background: #333; background: rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; transition: all .35s ease-in } .ih-item.square.effect16 .info h3 { text-transform: uppercase; color: #fff; font-size: 17px; padding: 10px; background: #111; margin: 30px 0 0; transition: all .35s ease-in } .ih-item.square.effect16 .info h3, .ih-item.square.effect16 .info p { text-align: center; -webkit-transition: all .35s ease-in; -moz-transition: all .35s ease-in } .ih-item.square.effect16 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; transition: all .35s ease-in } .ih-item.square.effect16 a:hover .info { visibility: visible; opacity: 1; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .ih-item.square.effect16 a:hover .info h3 { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect16 a:hover .info p { -webkit-transition-delay: .25s; -moz-transition-delay: .25s; transition-delay: .25s } .ih-item.square.effect16.left_to_right .info { -webkit-transform: translate(-460px, -100px) rotate(-180deg); -moz-transform: translate(-460px, -100px) rotate(-180deg); -ms-transform: translate(-460px, -100px) rotate(-180deg); -o-transform: translate(-460px, -100px) rotate(-180deg); transform: translate(-460px, -100px) rotate(-180deg) } .ih-item.square.effect16.left_to_right .info h3 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px) } .ih-item.square.effect16.left_to_right .info p { -webkit-transform: translateX(-300px) rotate(-90deg); -moz-transform: translateX(-300px) rotate(-90deg); -ms-transform: translateX(-300px) rotate(-90deg); -o-transform: translateX(-300px) rotate(-90deg); transform: translateX(-300px) rotate(-90deg) } .ih-item.square.effect16.left_to_right a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } .ih-item.square.effect16.left_to_right a:hover .info h3 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect16.left_to_right a:hover .info p { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.square.effect16.right_to_left .info { -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg) } .ih-item.square.effect16.right_to_left .info h3 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px) } .ih-item.square.effect16.right_to_left .info p { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg) } .ih-item.square.effect16.right_to_left a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } .ih-item.square.effect16.right_to_left a:hover .info h3 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect16.right_to_left a:hover .info p { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } .ih-item.square.effect16.top_to_bottom .info { -webkit-transform: translate(-265px, -145px) rotate(-45deg); -moz-transform: translate(-265px, -145px) rotate(-45deg); -ms-transform: translate(-265px, -145px) rotate(-45deg); -o-transform: translate(-265px, -145px) rotate(-45deg); transform: translate(-265px, -145px) rotate(-45deg) } .ih-item.square.effect16.top_to_bottom .info h3, .ih-item.square.effect16.top_to_bottom .info p { -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); transform: translate(200px, -200px) } .ih-item.square.effect16.top_to_bottom a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .ih-item.square.effect16.top_to_bottom a:hover .info h3 { transform: translate(0, 0); -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect16.top_to_bottom a:hover .info h3, .ih-item.square.effect16.top_to_bottom a:hover .info p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0) } .ih-item.square.effect16.top_to_bottom a:hover .info p { transform: translate(0, 0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.square.effect16.bottom_to_top .info { -webkit-transform: translate(265px, 145px) rotate(45deg); -moz-transform: translate(265px, 145px) rotate(45deg); -ms-transform: translate(265px, 145px) rotate(45deg); -o-transform: translate(265px, 145px) rotate(45deg); transform: translate(265px, 145px) rotate(45deg) } .ih-item.square.effect16.bottom_to_top .info h3 { -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); transform: translate(200px, -200px) } .ih-item.square.effect16.bottom_to_top .info p { -webkit-transform: translate(-200px, 200px); -moz-transform: translate(-200px, 200px); -ms-transform: translate(-200px, 200px); -o-transform: translate(-200px, 200px); transform: translate(-200px, 200px) } .ih-item.square.effect16.bottom_to_top a:hover .info { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .ih-item.square.effect16.bottom_to_top a:hover .info h3 { transform: translate(0, 0); -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect16.bottom_to_top a:hover .info h3, .ih-item.square.effect16.bottom_to_top a:hover .info p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0) } .ih-item.square.effect16.bottom_to_top a:hover .info p { transform: translate(0, 0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .ih-item.square.effect17.colored .info { background: #1a4a72 } .ih-item.square.effect17.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect17 .img { transition: all .35s ease-in-out } .ih-item.square.effect17 .img, .ih-item.square.effect17 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect17 .info { background: #333; visibility: hidden; opacity: 0; transition: all .35s ease-in-out } .ih-item.square.effect17 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111; margin: 30px 0 0 } .ih-item.square.effect17 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect17 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect17.left_to_right .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect17.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.square.effect17.left_to_right a:hover .img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.square.effect17.left_to_right a:hover .info, .ih-item.square.effect17.right_to_left .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect17.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%) } .ih-item.square.effect17.right_to_left a:hover .img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%) } .ih-item.square.effect17.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .ih-item.square.effect17.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect17.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect17.top_to_bottom a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect17.bottom_to_top .img, .ih-item.square.effect17.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect17.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } .ih-item.square.effect17.bottom_to_top a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .ih-item.square.effect17.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect18.colored .info { background: #1a4a72; background: rgba(26, 74, 114, .6) } .ih-item.square.effect18.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect18 .img { transition: all .35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect18 .img, .ih-item.square.effect18 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect18 .info { background: #333; background: rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; transition: all .35s ease-in-out } .ih-item.square.effect18 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111; margin: 30px 0 0; -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); transform: scale(4); -webkit-transition: all .35s .1s ease-in-out; -moz-transition: all .35s .1s ease-in-out; transition: all .35s .1s ease-in-out } .ih-item.square.effect18 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center; -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); -webkit-transition: all .35s .3s linear; -moz-transition: all .35s .3s linear; transition: all .35s .3s linear } .ih-item.square.effect18 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2) } .ih-item.square.effect18 a:hover .info { visibility: visible; opacity: 1 } .ih-item.square.effect18 a:hover .info h3, .ih-item.square.effect18 a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect19.colored .info { background: #1a4a72 } .ih-item.square.effect19.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect19 .img { opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -ms-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); transform: rotate(0) scale(1) } .ih-item.square.effect19 .info { background: #333; visibility: hidden; -webkit-transition: all .35s .3s ease-in-out; -moz-transition: all .35s .3s ease-in-out; transition: all .35s .3s ease-in-out } .ih-item.square.effect19 .info h3 { text-transform: uppercase; color: #fff; font-size: 17px; padding: 10px; background: #111; margin: 30px 0 0; transform: translateY(-200px); -webkit-transition: all .35s .6s ease-in-out; -moz-transition: all .35s .6s ease-in-out; transition: all .35s .6s ease-in-out } .ih-item.square.effect19 .info h3, .ih-item.square.effect19 .info p { text-align: center; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); -o-transform: translateY(-200px) } .ih-item.square.effect19 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; transform: translateY(-200px); -webkit-transition: all .35s .5s linear; -moz-transition: all .35s .5s linear; transition: all .35s .5s linear } .ih-item.square.effect19 a:hover .img { -webkit-transform: rotate(720deg) scale(0); -moz-transform: rotate(720deg) scale(0); -ms-transform: rotate(720deg) scale(0); -o-transform: rotate(720deg) scale(0); transform: rotate(720deg) scale(0); opacity: 0 } .ih-item.square.effect19 a:hover .info { visibility: visible } .ih-item.square.effect19 a:hover .info h3, .ih-item.square.effect19 a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .ih-item.square.effect20.colored .info { background: #1a4a72 } .ih-item.square.effect20.colored .info h3 { background: rgba(12, 34, 52, .6) } .ih-item.square.effect20 .img { transition: all .35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.square.effect20 .img, .ih-item.square.effect20 .info { -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out } .ih-item.square.effect20 .info { background: #333; opacity: 0; transition: all .35s ease-in-out } .ih-item.square.effect20 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111; margin: 30px 0 0 } .ih-item.square.effect20 .info p { font-size: 12px; position: relative; color: #bbb; padding: 20px; text-align: center } .ih-item.square.effect20 a:hover .img { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0 } .ih-item.square.effect20 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .ih-item.square.effect20.left_to_right .info { -webkit-transform: scale(0) rotate(-180deg); -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg) } .ih-item.square.effect20.right_to_left .info { -webkit-transform: scale(0) rotate(180deg); -moz-transform: scale(0) rotate(180deg); -ms-transform: scale(0) rotate(180deg); -o-transform: scale(0) rotate(180deg); transform: scale(0) rotate(180deg) } .ih-item.circle { border: none !important; } /** Custom Css *************************************************/ .ih-item.square.effect6.ihe-fade:hover .info{ /*opacity: 1 !important;*/ } .ih-item.square.effect6.ihe-fade:hover .img{ transform: scale(1.0) !important; } .ih-item.square.effect6.ihe-fade .info { background: ; visibility: hidden; opacity: 0 !important; transition: opacity 1s linear; transition: all .35s ease-in-out; background-color: rgba(0,0,0,0.5) !important; } .ih-item.square.effect6.ihe-fade a:hover .info { visibility: visible; opacity: 1 !important; } .ih-item.square.effect6.ihe-fade h3, .ih-item.square.effect6.ihe-fade p { background: transparent; -webkit-transform: translateY(0%) !important; -moz-transform: translateY(0%) !important; -ms-transform: translateY(0%) !important; -o-transform: translateY(0%) !important; transform: translateY(0%) !important; padding: 0; } /* Custom Css For Filterable Gallery =============================================== */ .maw_portfolioGallery_wrapper .ih-item a { display: block; } .maw_portfolioGallery_wrapper .ih-item.square { box-shadow: none; } /* Image Swap Custom Styling =============================================== */ .maw_image_swap.ih-item.square.effect6 .info, .maw_image_swap.ih-item.square.effect6 .info h3 { -webkit-transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out } .maw_image_swap.ih-item { box-sizing: initial !important; } /*Fade Effect =================================================*/ .maw_img_swap_fade { position: relative; width: 100%; } .maw_img_swap_fade img { display: block; width: 100%; height: auto; } .maw_img_swap_fade .info { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .2s ease; } .maw_img_swap_fade:not( :hover ) .info{ transition-delay: .3s !important; } .maw_img_swap_fade:hover .info { opacity: 1; }