/* Simons SCSS Framework */ @CHARSET "ISO-8859-1"; /* RESET SOURCE: http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0 !important; } .content { padding: 10px 0 0 20px; background-color: #6ac88e; border-bottom: solid 40px #c86350; /* Absolute Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .content .wrap { /*BASIC LAYOUT*/ /* Positioning */ position: relative; display: inline-table; /* Sizing */ box-sizing: border-box; width: 25%; /* Gutters */ margin: 0 -4px 0 0 !important; padding: 0 20px 20px 0 !important; border: none !important; /* Typography */ letter-spacing: 0; /* Remove last border */ } .content .wrap:nth-of-type(4) { border-right: none; } .content .wrap > * { /* Wrapper inside Element needed because of gutter >* */ max-width: 100%; box-sizing: border-box; } .content .wrap .inner { background-color: #ffffff; padding: 20px 20px 40px 20px !important; box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4); } .content .wrap .inner .head { font-family: sans-serif; font-weight: 700; font-size: 18px; line-height: 24px; padding: 10px 0; color: #c86350; } .content .wrap .inner .img-wrapper { position: relative; box-sizing: border-box; overflow: hidden; } .content .wrap .inner .img-wrapper img { width: 100%; } .content .wrap.focus { /*FOCUS EFFECT*/ } .content .wrap.focus .head { /* Camera Focus Effect */ -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .content .wrap.focus .head:hover { -webkit-filter: blur(10px); filter: blur(10px); } .content .wrap.focus img { /* Camera Focus Effect */ -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .content .wrap.focus img:hover { -webkit-filter: blur(10px); filter: blur(10px); } .content .wrap.zoom { /*ZOOM EFFECT*/ } .content .wrap.zoom .head { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .content .wrap.zoom .head:hover { -webkit-transform: rotate(0deg) scale(1.5) translate(0px, 0px); transform: rotate(0deg) scale(1.5) translate(0px, 0px); } .content .wrap.zoom img { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .content .wrap.zoom img:hover { -webkit-transform: rotate(0deg) scale(1.5) translate(0px, 0px); transform: rotate(0deg) scale(1.5) translate(0px, 0px); } .content .wrap.shake { /*SHAKE EFFECT*/ } .content .wrap.shake .head { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .content .wrap.shake .head:hover { -webkit-transform: rotate(5deg) scale(1.5) translate(0px, 0px); transform: rotate(5deg) scale(1.5) translate(0px, 0px); } .content .wrap.shake img { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .content .wrap.shake img:hover { -webkit-transform: rotate(5deg) scale(1.5) translate(0px, 0px); transform: rotate(5deg) scale(1.5) translate(0px, 0px); } .content .wrap.all { /*ALL EFFECTS*/ } .content .wrap.all .head { /* Camera Focus Effect */ -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1s; transition-duration: 1s; } .content .wrap.all .head:hover { -webkit-filter: blur(0.4px); filter: blur(0.4px); } .content .wrap.all img { /* Camera Focus Effect */ -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1s; transition-duration: 1s; } .content .wrap.all img:hover { -webkit-filter: blur(0.5px); filter: blur(0.5px); } /*# sourceMappingURL=camera.css.map */