FileXXXXXXXXXXX

File manager - Edit - /home/matthif/www/wp-content/plugins/uber-grid/assets/style/elastic_grid.css

Back
section[id^="pfhub_portfolio_content_"] , section[id^="pfhub_portfolio_content_"] :after, section[id^="pfhub_portfolio_content_"] :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } / Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ / .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .og-grid { list-style: none; padding: 20px 0; margin: 0 auto; } .og-grid li { display: inline-block; vertical-align: top; } .og-grid li.hidden { display: none; } .og-grid li > a, .og-grid li > a img { border: none; outline: none; display: block; position: relative; } .og-pointer{ top: auto; border: solid transparent; content: " "; height: 0; width: 0; position: relative; pointer-events: none; border-width: 15px; left: 50%; margin: -20px 0 0 -15px; } .og-expander { position: absolute; color: #d6d6d6; top: auto; width: 100%; margin-top: 0px; text-align: left; height: 0; overflow: hidden; } .og-expander-inner { padding: 30px 30px; height: 100%; } .og-close { position: absolute; width: 40px; height: 40px; top: 10px; right: 10px; cursor: pointer; } .og-close::before, .og-close::after { content: ''; position: absolute; width: 100%; top: 50%; height: 1px; background: #888; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .og-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .og-close:hover::before, .og-close:hover::after { background: #fff; } .og-fullimg, .og-details { width: 50%; float: left; height: 100%; overflow: hidden; position: relative; box-sizing: border-box; } .og-details .infosep { border-bottom: 1px solid #121212; box-shadow: 0 1px #2A2A2A; margin: 15px 0; } .og-details { padding: 0 20px; } .og-fullimg { text-align: center; } .og-fullimg img { display: inline-block; max-height: 100%; max-width: 100%; } .og-details h3 { font-weight: 300; font-size: 36px; margin-top: 0px; margin-bottom: 10px; } .og-details p { font-weight: 400; font-size: 15px; line-height: 22px; color: #999; padding-bottom: 20px; } .og-details iframe { max-width: 400px; max-height: 250px; margin-bottom: 0px; } .og-details a.link-button { padding: 8px 10px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; border: 1px solid #141414; text-shadow: 0px -1px 0px rgba(41,41,41,0.7), 0px 1px 0px rgba(3,3,3,0.3); white-space: normal; word-wrap: normal; cursor: pointer !important; font-size: 11px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.5); white-space: normal; margin-left: 10px; } .og-details a.first{ margin-left: 0px; } .og-details a:hover { background-color: #606060; background: -moz-linear-gradient( top, #454545 454545%, #303030); background: -webkit-gradient( linear, left top, left bottom, from(#454545), to(#303030)); } .og-loading { width: 20px; height: 20px; border-radius: 50%; background: #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 0; transform: translateX(-50%); -webkit-animation: loader 0.5s infinite ease-in-out both; -moz-animation: loader 0.5s infinite ease-in-out both; animation: loader 0.5s infinite ease-in-out both; } @-webkit-keyframes loader { 0% { background: #ddd; } 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } } @-moz-keyframes loader { 0% { background: #ddd; } 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } } @keyframes loader { 0% { background: #ddd; } 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } } /* Work - filter by tag / .wagwep-container{ /margin: 20px 0px auto 0;/ overflow: hidden; /width: 800px;/ } .wagwep-container ul#portfolio-filter { float: left; font-size: 16px; list-style: none; padding: 10px 0px; width: 100%; border-bottom: 1px solid #ddd; } .wagwep-container ul#portfolio-filter li { /border-right: 1px solid #dedede;/ float: left; line-height: 16px; margin: 0px; padding: 10px; } .wagwep-container ul#portfolio-filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; } .wagwep-container ul#portfolio-filter a { text-decoration: none; border:0; background:0; margin:0 10px 10px 0; box-shadow: none; } .wagwep-container ul#portfolio-filter li.current a, ul#portfolio-filter a:hover { text-decoration: none; } .wagwep-container ul#portfolio-filter li.current a { font-weight: bold; } / Clearfix / .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /*********** Elastic Slide **********/ / Elastislide Style / .elastislide-list { list-style-type: none; display: none; } .no-js .elastislide-list { display: block; } .elastislide-carousel ul li { min-width: 20px; / minimum width of the image (min width + border) / } .elastislide-wrapper { position: relative; background-color: #313131; margin: 0 auto; min-height: 60px; } .elastislide-wrapper.elastislide-loading { background-image: url(../images/admin/elastic_loading.gif); background-repeat: no-repeat; background-position: center center; } .elastislide-horizontal { padding: 10px 40px; } .elastislide-vertical { padding: 40px 10px; } .elastislide-carousel { overflow: hidden; position: relative; } .elastislide-carousel ul { position: relative; display: block; list-style-type: none; padding: 0; margin: 0; -webkit-backface-visibility: hidden; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .elastislide-horizontal ul { white-space: nowrap; } .elastislide-carousel ul li { margin: 0; -webkit-backface-visibility: hidden; } .elastislide-horizontal ul li { height: 100%; display: inline-block; } .elastislide-vertical ul li { display: block; } .elastislide-carousel ul li a { display: inline-block; width: 100%; padding: 0px; } .elastislide-carousel ul li a img { display: block; /border: 2px solid #313131;/ max-width: 100%; } .elastislide-carousel ul li a img.selected { border: 2px solid #999999; } / Navigation Arrows / .elastislide-wrapper nav span { position: absolute; background: #1b1b1b url(../images/admin/nav.png) no-repeat 4px 3px; width: 23px; height: 23px; border-radius: 50%; text-indent: -9000px; cursor: pointer; opacity: 0.8; } .elastislide-wrapper nav span:hover { opacity: 1.0 } .elastislide-horizontal nav span { top: 50%; left: 10px; margin-top: -11px; } .elastislide-vertical nav span { top: 10px; left: 50%; margin-left: -11px; background-position: -17px 5px; } .elastislide-horizontal nav span.elastislide-next { right: 10px; left: auto; background-position: 4px -17px; } .elastislide-vertical nav span.elastislide-next { bottom: 10px; top: auto; background-position: -17px -18px; } /********** Hover **********/ .og-grid li { } .og-grid li a { overflow: hidden; } .og-grid li a.unhoverdir { overflow: visible; } .og-grid li a figure { position: absolute; background: #333; width: 100%; height: 100%; } .og-grid li a figure span { display: block; /text-transform: uppercase;/ font-weight: normal; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } /********** Effect **********/ / Effect 1: opacity / .og-grid.effect-opacity li.animate { -webkit-animation: fadeIn 0.65s ease forwards; -moz-animation: fadeIn 0.65s ease forwards; animation: fadeIn 0.65s ease forwards; } @-webkit-keyframes fadeIn { to { opacity: 1; } } @-moz-keyframes fadeIn { to { opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } } / Effect 2: Move Up / .og-grid.effect-moveup li.animate { -webkit-transform: translateY(200px); -moz-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp 0.65s ease forwards; -moz-animation: moveUp 0.65s ease forwards; animation: moveUp 0.65s ease forwards; } @-webkit-keyframes moveUp { to { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes moveUp { to { -moz-transform: translateY(0); opacity: 1; } } @keyframes moveUp { to { transform: translateY(0); opacity: 1; } } / Effect 3: Scale up / .og-grid.effect-scaleup li.animate { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); -webkit-animation: scaleUp 0.65s ease-in-out forwards; -moz-animation: scaleUp 0.65s ease-in-out forwards; animation: scaleUp 0.65s ease-in-out forwards; } @-webkit-keyframes scaleUp { to { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes scaleUp { to { -moz-transform: scale(1); opacity: 1; } } @keyframes scaleUp { to { transform: scale(1); opacity: 1; } } / Effect 4: fall perspective / .og-grid.effect-fallperspective { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .og-grid.effect-fallperspective li.animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg); -moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg); transform: translateZ(400px) translateY(300px) rotateX(-90deg); -webkit-animation: fallPerspective .8s ease-in-out forwards; -moz-animation: fallPerspective .8s ease-in-out forwards; animation: fallPerspective .8s ease-in-out forwards; } @-webkit-keyframes fallPerspective { 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @-moz-keyframes fallPerspective { 100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @keyframes fallPerspective { 100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } / Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) / .og-grid.effect-fly { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .og-grid.effect-fly li.animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -300px; -moz-transform-origin: 50% 50% -300px; transform-origin: 50% 50% -300px; -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); transform: rotateX(-180deg); -webkit-animation: fly .8s ease-in-out forwards; -moz-animation: fly .8s ease-in-out forwards; animation: fly .8s ease-in-out forwards; } @-webkit-keyframes fly { 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes fly { 100% { -moz-transform: rotateX(0deg); opacity: 1; } } @keyframes fly { 100% { transform: rotateX(0deg); opacity: 1; } } / Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) / .og-grid.effect-flip { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .og-grid.effect-flip li.animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotateX(-80deg); -moz-transform: rotateX(-80deg); transform: rotateX(-80deg); -webkit-animation: flip .8s ease-in-out forwards; -moz-animation: flip .8s ease-in-out forwards; animation: flip .8s ease-in-out forwards; } @-webkit-keyframes flip { 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes flip { 100% { -moz-transform: rotateX(0deg); opacity: 1; } } @keyframes flip { 100% { transform: rotateX(0deg); opacity: 1; } } / Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) / .og-grid.effect-helix { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .og-grid.effect-helix li.animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-animation: helix .8s ease-in-out forwards; -moz-animation: helix .8s ease-in-out forwards; animation: helix .8s ease-in-out forwards; } @-webkit-keyframes helix { 100% { -webkit-transform: rotateY(0deg); opacity: 1; } } @-moz-keyframes helix { 100% { -moz-transform: rotateY(0deg); opacity: 1; } } @keyframes helix { 100% { transform: rotateY(0deg); opacity: 1; } } / Effect 8: popup/ .og-grid.effect-popup { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .og-grid.effect-popup li.animate { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); -webkit-animation: popUp .8s ease-in forwards; -moz-animation: popUp .8s ease-in forwards; animation: popUp .8s ease-in forwards; } @-webkit-keyframes popUp { 70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes popUp { 70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; } 100% { -moz-transform: scale(1); opacity: 1; } } @keyframes popUp { 70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; } 100% { transform: scale(1); opacity: 1; } } /************* * Responsive *************/ / Basic Styles / nav#porfolio-nav { width: 100%; position: relative; } nav#porfolio-nav ul { padding: 0; margin: 0 auto; } nav#porfolio-nav li { display: inline; float: left; } nav#porfolio-nav li a { border-right: 1px solid #576979; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav#porfolio-nav li:last-child a { border-right: 0; } /Styles for screen 600px and lower/ @media screen and (max-width: 600px) { nav#porfolio-nav { height: auto; } nav#porfolio-nav ul { width: 100%; display: block; height: auto; } nav#porfolio-nav li { width: 50%; float: left; position: relative; } nav#porfolio-nav li a { border-bottom: 1px solid #576979; border-right: 1px solid #576979; } nav#porfolio-nav a { text-align: left; width: 100%; text-indent: 25px; } } /Styles for screen 515px and lower/ @media only screen and (max-width : 480px) { nav#porfolio-nav { border-bottom: 0; } nav#porfolio-nav ul { /display: none;/ height: auto; } /.og-expander h3 { font-size: 18px; } .og-expander p { font-size: 12px; } .og-expander a { font-size: 11px; }/ .og-expander-inner { padding: 10px; } .og-grid .sep { display: none;} .og-fullimg{ height: 30%; width: 100%; } .og-details{ width: 100%; margin-top: 5px; } .og-details h3 { font-size: 18px; margin-bottom: 0px; } .og-details p { padding-bottom: 10px; } .og-details .infosep { margin: 10px 0px; } .elastislide-wrapper{ max-width: 300px; } } /Smartphone/ @media only screen and (max-width : 320px) { nav#porfolio-nav li { display: block; float: none; width: 100%; } nav#porfolio-nav li a { border-bottom: 1px solid #576979; } .og-details h3 { font-size: 18px; margin-bottom: 0px; } .og-details p { padding-bottom: 10px; } .og-details .infosep { margin: 10px 0px; } } @media (min-width: 1200px) { /.og-expander h3 { font-size: 35px; } .og-expander p { font-size: 13px; } .og-expander a { font-size: 12px; }/ } @media (min-width: 768px) and (max-width: 979px) { /.og-expander h3 { font-size: 32px; } .og-expander p { font-size: 12px; } .og-expander a { font-size: 11px; }/ /.og-expander-inner { padding: 30px; }/ .og-grid .sep { margin: 20px 10px; height: 80%} } @media (max-width: 767px) { /.og-expander h3 { font-size: 20px; } .og-expander p { font-size: 12px; } .og-expander a { font-size: 11px; }/ /.og-expander-inner { padding: 25px; }*/ .og-grid .sep { display: none;} .og-fullimg{ height: 40%; width: 100%; } .og-details{ width: 100%; margin-top: 5px; } .og-details p { padding-bottom: 10px; } .og-details .infosep { margin: 12px 0px; } .elastislide-wrapper{ max-width: 300px; padding-bottom: 5px; } } @media (max-width: 979px) { } @media (min-width: 980px) { }

| ver. 1.4 | Github | . | PHP 5.4.45 | Generation time: 0 | proxy | phpinfo | Settings