/* Skins css */ /*################### flat ########################*/ .skin.flat { vertical-align: top; } .skin.flat .layer-media{} .skin.flat .layer-content { padding: 5px 10px; } .skin.flat .layer-hover { display: none; } /*################### flip-x ########################*/ .skin.flip-x { background: rgb(255, 255, 255) none repeat scroll 0 0; overflow: hidden; padding: 0; -webkit-perspective: 600px; perspective: 600px; position: relative; vertical-align: top; width: 100%; } .skin.flip-x:hover .layer-media { background: rgb(255, 255, 255) none repeat scroll 0 0; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); z-index: 900; } .skin.flip-x .layer-media { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: rgb(255, 255, 255) none repeat scroll 0 0; float: none; height: inherit; left: 0; text-align: center; top: 0; -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; width: inherit; z-index: 900; } .skin.flip-x:hover .layer-content { background: rgb(255, 255, 255) none repeat scroll 0 0; -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); z-index: 1000; } .skin.flip-x .layer-content { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: rgb(255, 255, 255) none repeat scroll 0 0; float: none; height: inherit; left: 0; padding: 0; position: absolute; top: 0; -webkit-transform: rotateX(-179deg); transform: rotateX(-179deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; width: inherit; z-index: 800; } .skin.flip-x .layer-hover { display: none; } /*################### flip-y ########################*/ .skin.flip-y { background: rgb(255, 255, 255) none repeat scroll 0 0; overflow: hidden; padding: 0; -webkit-perspective: 600px; perspective: 600px; position: relative; vertical-align: top; width: 100%; } .skin.flip-y:hover .layer-media { background: rgb(255, 255, 255) none repeat scroll 0 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); z-index: 900; } .skin.flip-y .layer-media { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: rgb(255, 255, 255) none repeat scroll 0 0; float: none; height: inherit; left: 0; text-align: center; top: 0; -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; width: inherit; z-index: 900; } .skin.flip-y:hover .layer-content { background: rgb(255, 255, 255) none repeat scroll 0 0; -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); z-index: 1000; } .skin.flip-y .layer-content { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: rgb(255, 255, 255) none repeat scroll 0 0; float: none; height: inherit; left: 0; position: absolute; top: 0; -webkit-transform: rotateY(-179deg); transform: rotateY(-179deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; width: inherit; z-index: 800; } .skin.flip-y .layer-hover { display: none; } /*################### zoomin ########################*/ .skin.zoomin { overflow: hidden; position: relative; vertical-align: top; } .skin.zoomin:hover .layer-media { transform: scale(1.5); opacity: 0; } .skin.zoomin .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.zoomin:hover .layer-content{ opacity: 1; } .skin.zoomin .layer-content { opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.zoomin .layer-hover { display: none; } /*################### zoomout ########################*/ .skin.zoomout { overflow: hidden; position: relative; vertical-align: top; } .skin.zoomout:hover .layer-media { transform: scale(0); opacity: 0; } .skin.zoomout .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.zoomout:hover .layer-content{ opacity: 1; } .skin.zoomout .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.zoomout .layer-hover { display: none; } /*################### ThumbZoomContentIn ########################*/ .skin.thumbzoomcontentin { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbzoomcontentin:hover .layer-media { transform: scale(1.5); opacity: 1; } .skin.thumbzoomcontentin .layer-media { transition: all 0.3s ease 0s; left: 0; top: 0; width: 100%; } .skin.thumbzoomcontentin:hover .layer-media { filter: brightness(0.3); } .skin.thumbzoomcontentin:hover .layer-content{ opacity: 1; } .skin.thumbzoomcontentin .layer-content { margin-top: 30%; opacity: 0; position: absolute; top: 0; transition: all 0.3s ease 0s; width: 100%; } .skin.thumbzoomcontentin .layer-hover { display: none; } /*################### spinright ########################*/ .skin.spinright { overflow: hidden; position: relative; vertical-align: top; } .skin.spinright:hover .layer-media { transform: rotate(30deg); opacity: 0; } .skin.spinright .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.spinright:hover .layer-content{ opacity: 1; } .skin.spinright .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.spinright .layer-hover { display: none; } /*################### spinrightzoom ########################*/ .skin.spinrightzoom { overflow: hidden; position: relative; vertical-align: top; } .skin.spinrightzoom:hover .layer-media { opacity: 0.6; transform: rotate(20deg) scale(1.5); } .skin.spinrightzoom .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.spinrightzoom:hover .layer-content{ opacity: 1; } .skin.spinrightzoom .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.spinrightzoom .layer-hover { display: none; } /*################### spinleft ########################*/ .skin.spinleft { overflow: hidden; position: relative; vertical-align: top; } .skin.spinleft:hover .layer-media { transform: rotate(-30deg); opacity: 0; } .skin.spinleft .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.spinleft:hover .layer-content{ opacity: 1; } .skin.spinleft .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.spinleft .layer-hover { display: none; } /*################### spinleftzoom ########################*/ .skin.spinleftzoom { overflow: hidden; position: relative; vertical-align: top; } .skin.spinleftzoom:hover .layer-media { opacity: 0.7; transform: rotate(-30deg) scale(1.5); } .skin.spinleftzoom .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.spinleftzoom:hover .layer-content{ opacity: 1; } .skin.spinleftzoom .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.spinleftzoom .layer-hover { display: none; } /*################### spinrightfast ########################*/ .skin.spinrightfast { overflow: hidden; position: relative; vertical-align: top; } .skin.spinrightfast:hover .layer-media { transform: rotate(180deg); opacity: 0; } .skin.spinrightfast .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.spinrightfast:hover .layer-content{ opacity: 1; } .skin.spinrightfast .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.spinrightfast .layer-hover { display: none; } /*################### spinleftfast ########################*/ .skin.spinleftfast { overflow: hidden; position: relative; vertical-align: top; } .skin.spinleftfast:hover .layer-media { transform: rotate(-180deg); opacity: 0; } .skin.spinleftfast .layer-media { transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.spinleftfast:hover .layer-content{ opacity: 1; } .skin.spinleftfast .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.spinleftfast .layer-hover { display: none; } /*################### thumbgoleft ########################*/ .skin.thumbgoleft { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgoleft:hover .layer-media { opacity: 0; transform: scale(0.5) translateX(-100%); } .skin.thumbgoleft .layer-media { transition: all 1s ease 0s; width: 100%; } .skin.thumbgoleft:hover .layer-content{ opacity: 1; } .skin.thumbgoleft .layer-content { left: 0; opacity: 0; position: absolute; top: 0; transition: all 1s ease 0s; } .skin.thumbgoleft .layer-hover { display: none; } /*################### thumbgoright ########################*/ .skin.thumbgoright { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgoright:hover .layer-media { opacity: 0; transform: scale(0.5) translateX(100%); } .skin.thumbgoright .layer-media { transition: all 1s ease 0s; width: 100%; } .skin.thumbgoright:hover .layer-content{ opacity: 1; } .skin.thumbgoright .layer-content { left: 0; opacity: 0; position: absolute; top: 0; transition: all 1s ease 0s; } .skin.thumbgoright .layer-hover { display: none; } /*################### thumbgotop ########################*/ .skin.thumbgotop { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgotop:hover .layer-media { opacity: 0; top: -100%; transform: translateY(-100%) scale(0.6); } .skin.thumbgotop .layer-media { transition: all 1s ease 0s; width: 100%; } .skin.thumbgotop:hover .layer-content{ opacity: 1; } .skin.thumbgotop .layer-content { left: 0; opacity: 0; position: absolute; top: 0; transition: all 1s ease 0s; } .skin.thumbgotop .layer-hover { display: none; } /*################### thumbgobottom ########################*/ .skin.thumbgobottom { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgobottom:hover .layer-media { bottom: -100%; opacity: 0; transform: scale(0.5) translateY(100%); } .skin.thumbgobottom .layer-media { transition: all 1s ease 0s; width: 100%; } .skin.thumbgobottom:hover .layer-content{ opacity: 1; } .skin.thumbgobottom .layer-content { left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 1s ease 0s; } .skin.thumbgobottom .layer-hover { display: none; } /*################### thumbmiddle ########################*/ .skin.thumbmiddle { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbmiddle:hover .layer-media { transform: scale(0.9); opacity: 0.3; z-index:9; } .skin.thumbmiddle .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.thumbmiddle:hover .layer-content{ opacity: 1; z-index:10; transform: scale(0.9); padding:5px; } .skin.thumbmiddle .layer-content { left: 0; opacity: 0; position: absolute; top: 0; transition: all 1s ease 0s; width: 100%; } .skin.thumbmiddle .layer-hover { display: none; } /*################### thumbskew ########################*/ .skin.thumbskew { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbskew:hover .layer-media { transform: scale(0.9) skew(5deg); opacity: 0.3; z-index:9; } .skin.thumbskew .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.thumbskew:hover .layer-content{ opacity: 1; z-index:10; transform: scale(0.9) ; padding:5px; } .skin.thumbskew .layer-content { left: 0; opacity: 0; position: absolute; top: 0; transition: all 1s ease 0s; width: 100%; } .skin.thumbskew .layer-hover { display: none; } /*################### contentbottom ########################*/ .skin.contentbottom { overflow: hidden; position: relative; vertical-align: top; } .skin.contentbottom:hover .layer-media { z-index:9; } .skin.contentbottom .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentbottom:hover .layer-content{ } .skin.contentbottom .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; bottom: 0; color: rgb(255, 255, 255); left: 0; position: absolute; transition: all 1s ease 0s; width: 100%; } .skin.contentbottom .layer-hover { display: none; } /*################### contentmiddle ########################*/ .skin.contentmiddle { overflow: hidden; position: relative; vertical-align: top; } .skin.contentmiddle:hover .layer-media { z-index:9; } .skin.contentmiddle .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentmiddle:hover .layer-content{ } .skin.contentmiddle .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; bottom: 50%; color: rgb(255, 255, 255); left: 0; position: absolute; transform: translate(0px, 50%); width: 100%; } .skin.contentmiddle .layer-hover { display: none; } /*################### contentinbottom ########################*/ .skin.contentinbottom { overflow: hidden; position: relative; vertical-align: top; } .skin.contentinbottom:hover .layer-media { z-index:9; } .skin.contentinbottom .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentinbottom:hover .layer-content { bottom: 0; } .skin.contentinbottom .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; bottom: -100%; color: rgb(255, 255, 255); left: 0; position: absolute; transition: all 0.5s ease 0s; width: 100%; } .skin.contentinbottom .layer-hover { display: none; } /*################### contentinleft ########################*/ .skin.contentinleft { overflow: hidden; position: relative; vertical-align: top; } .skin.contentinleft:hover .layer-media { z-index:9; } .skin.contentinleft .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentinleft:hover .layer-content { left: 0; } .skin.contentinleft .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; color: rgb(255, 255, 255); height: 100%; left: -100%; position: absolute; top: 0; transition: all 0.5s ease 0s; width: 100%; } .skin.contentinleft .layer-hover { display: none; } /*################### contentinright ########################*/ .skin.contentinright { overflow: hidden; position: relative; vertical-align: top; } .skin.contentinright:hover .layer-media { z-index:9; } .skin.contentinright .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentinright:hover .layer-content { left: 0; } .skin.contentinright .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; color: rgb(255, 255, 255); height: 100%; left: 100%; position: absolute; top: 0; transition: all 0.5s ease 0s; width: 100%; } .skin.contentinright .layer-hover { display: none; } /*################### thumbgoleftconetntinright ########################*/ .skin.thumbgoleftconetntinright { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgoleftconetntinright:hover .layer-media { transform: translateX(-100%); } .skin.thumbgoleftconetntinright .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.thumbgoleftconetntinright:hover .layer-content { left: 0; } .skin.thumbgoleftconetntinright .layer-content { background: rgb(255, 255, 255) none repeat scroll 0 0; height: 100%; left: 100%; position: absolute; top: 0; transition: all 0.5s ease 0s; width: 100%; } .skin.thumbgoleftconetntinright .layer-hover { display: none; } /*################### thumbgobottomconetntinright ########################*/ .skin.thumbgobottomconetntinright { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgobottomconetntinright:hover .layer-media { transform: translateY(100%); } .skin.thumbgobottomconetntinright .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.thumbgobottomconetntinright:hover .layer-content { left: 0; } .skin.thumbgobottomconetntinright .layer-content { background: rgb(255, 255, 255) none repeat scroll 0 0; height: 100%; left: 100%; position: absolute; top: 0; transition: all 0.5s ease 0s; width: 100%; } .skin.thumbgobottomconetntinright .layer-hover { display: none; } /*################### thumbgotopconetntinright ########################*/ .skin.thumbgotopconetntinright { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgotopconetntinright:hover .layer-media { transform: translateY(-100%); } .skin.thumbgotopconetntinright .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.thumbgotopconetntinright:hover .layer-content { left: 0; } .skin.thumbgotopconetntinright .layer-content { background: rgb(255, 255, 255) none repeat scroll 0 0; height: 100%; left: 100%; position: absolute; top: 0; transition: all 0.5s ease 0s; width: 100%; } .skin.thumbgotopconetntinright .layer-hover { display: none; } /*################### thumbgorightconetntinright ########################*/ .skin.thumbgorightconetntinright { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgorightconetntinright:hover .layer-media { transform: translateX(100%); } .skin.thumbgorightconetntinright .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.thumbgorightconetntinright:hover .layer-content { left: 0; } .skin.thumbgorightconetntinright .layer-content { background: rgba(255, 255, 255,0) none repeat scroll 0 0; height: 100%; left: 100%; position: absolute; top: 0; transition: all 0.5s ease 0s; width: 100%; } .skin.thumbgorightconetntinright .layer-hover { display: none; } /*################### halfthumbleft ########################*/ .skin.halfthumbleft { overflow: hidden; vertical-align: top; } .skin.halfthumbleft .layer-media { display: inline-block; float: left; vertical-align: top; width: 49%; } .skin.halfthumbleft .layer-content { display: inline-block; float: right; width: 49%; } .skin.halfthumbleft .layer-hover { display: none; } /*################### halfthumbright ########################*/ .skin.halfthumbright { overflow: hidden; vertical-align: top; } .skin.halfthumbright .layer-media { display: inline-block; float: right; vertical-align: top; width: 49%; } .skin.halfthumbright .layer-content { display: inline-block; width: 49%; } .skin.halfthumbright .layer-hover { display: none; } /*################### thumbright ########################*/ .skin.thumbright{} .skin.thumbright .layer-media{} .skin.thumbright .layer-content{} .skin.thumbright .layer-hover{} /*################### thumbrounded ########################*/ .skin.thumbrounded{} .skin.thumbrounded .layer-media { background: rgb(255, 255, 255) none repeat scroll 0 0; border-radius: 50%; overflow: hidden; } .skin.thumbrounded .layer-media .thumb { height:240px; } .skin.thumbrounded .layer-content{} .skin.thumbrounded .layer-hover { display: none; } /*################### contentborder ########################*/ .skin.contentborder { overflow: hidden; position: relative; vertical-align: top; } .skin.contentborder:hover .layer-media { z-index:9; } .skin.contentborder .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentborder:hover .layer-content{ } .skin.contentborder .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; bottom: 50%; color: rgb(255, 255, 255); left: 0; padding: 40px; position: absolute; transform: translate(0px, 50%); } .skin.contentborder .layer-hover { display: none; } .skin.contentborder .layer-content::before { border-bottom: 1px solid #fff; border-top: 1px solid #fff; bottom: 30px; left: 10px; right: 10px; top: 30px; transform: scale(0, 1); transform-origin: 0 0 0; } .skin.contentborder .layer-content::after { border-left: 1px solid #fff; border-right: 1px solid #fff; bottom: 10px; left: 30px; right: 30px; top: 10px; transform: scale(1, 0); transform-origin: 100% 0 0; } .skin.contentborder:hover .layer-content::before, .skin.contentborder:hover .layer-content::after { opacity: 1; transform: scale(1); } .skin.contentborder .layer-content::before, .skin.contentborder .layer-content::after { content: ""; opacity: 0; position: absolute; } .skin.contentborder .layer-content::before, .skin.contentborder .layer-content::after { transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; } /*################### contentborderrounded ########################*/ .skin.contentborderrounded { overflow: hidden; position: relative; vertical-align: top; } .skin.contentborderrounded:hover .layer-media { z-index:9; } .skin.contentborderrounded .layer-media { transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentborderrounded:hover .layer-content{ } .skin.contentborderrounded .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; bottom: 50%; color: rgb(255, 255, 255); left: 0; padding: 40px; position: absolute; transform: translate(0px, 50%); } .skin.contentborderrounded .layer-hover { display: none; } .skin.contentborderrounded .layer-content::before { border-bottom: 1px solid #fff; border-top: 1px solid #fff; border-radius: 15px; bottom: 30px; left: 30px; right: 30px; top: 30px; transform: scale(0, 1); transform-origin: 0 0 0; } .skin.contentborderrounded .layer-content::after { border-left: 1px solid #fff; border-right: 1px solid #fff; border-radius: 15px; bottom: 30px; left: 30px; right: 30px; top: 30px; transform: scale(1, 0); transform-origin: 100% 0 0; } .skin.contentborderrounded:hover .layer-content::before, .skin.contentborderrounded:hover .layer-content::after { opacity: 1; transform: scale(1); } .skin.contentborderrounded .layer-content::before, .skin.contentborderrounded .layer-content::after { content: ""; opacity: 0; position: absolute; } .skin.contentborderrounded .layer-content::before, .skin.contentborderrounded .layer-content::after { transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; } .skin.contentborderrounded .layer-content{ padding-bottom:65px;} .skin.contentborderrounded .layer-content .read_more { left: 0; position: absolute; text-align: center; width: 100%; z-index: 11; }