/* ======================== TABLE OF CONTENTS ======================== =================================================================== 1: Mixins, normalize and browser fixes. 2: Typography and styling for typograpic elements used in Ambiance 3: Transitions & animations 4: Fonts inclusion 5: Photoswipe 6: Remodal: Modal styling and basic css 7: Selections and general setup 8: Forms / inputs and buttons 9: Figure & Gallery-item styling 10: Homepage navigation (scrolling strokes) 11: Homepage header (Which shows logo) 12: Footer styling (Share buttons, author) 13: Content: .content and .content-wrapper styling 14: Lists: ol, ul, link-list, hours, icon-list & price list styling 15: The background slideshow 16: The overlay that covers the background 17: The splash screen & animation 18: Misc elements, helpers, posts & comments. =================================================================== =================================================================== */ /* -------------------------------------------- 1: Mixins, normalize and browser fixes. ----------------------------------------------- */ /* 1.1: A mixin to apply box-sizing border box to any element */ .bb { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 1.2: An easy way to vertically align relative elements */ .vertical-align { position: relative; top: 50%; -webkit-transform: translateY(30%); -ms-transform: translateY(30%); transform: translateY(30%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /* 1.3: Set default font family to sans-serif & prevent IOS text size adjus after orietnation change */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* 1.4: Remove default body margin */ body { margin: 0; } /* 1.5: HTML5 display definitions. (correct block display IE 8/9) */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /* 1.6: Correct inline block for IE8/9 and normalize vertical alignment */ audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } /* 1.7: Prevent modern browsers from displaying `audio` without controls. */ audio:not([controls]) { display: none; height: 0; } /* 1.8: Address `[hidden]` styling not present in IE 8/9. Hide the `template` element in IE, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* 1.9: Remove the gray background color from active links in IE 10. */ a { background: transparent; } /* 1.10: Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* 1.11: Address styling not present in IE 8/9, Safari 5, and Chrome. Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. Address styling not present in Safari 5 and Chrome. Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome. Address styling not present in IE 8/9. Address inconsistent and variable font size in all browsers. */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } /* 1.12: Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* 1.13: Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /* 1.14: Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* 1.15: Address margin not present in IE 8/9 and Safari 5. Address differences between Firefox and other browsers. */ figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /* 1.16: Contain overflow in all browsers. */ pre { overflow: auto; } /* 1.17: Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* 1.18: Correct color not being inherited. Known issue: affects color of disabled elements. */ button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } /* 1.19: Address `overflow` set to `hidden` in IE 8/9/10. */ button { overflow: visible; } /* 1.20: Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8+, and Opera Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /* 1.21: 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer;/* 3 */ } /* 1.22: Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /* 1.23: Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* 1.23: Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */ input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } /* 1.24: Fix the cursor style for Chrome's increment/decrement buttons. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /* 1.25: Address `appearance` set to `searchfield` in Safari 5 and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* 1.26: Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* 1.27: Correct `color` not being inherited in IE 8/9. Remove padding so people aren't caught out if they zero out fieldsets.*/ legend { border: 0; padding: 0; } /* 1.28: Remove default vertical scrollbar in IE 8/9. */ textarea { overflow: auto; } /* 1.29: Don't inherit the `font-weight` (applied by a rule above). */ optgroup { font-weight: bold; } /* 1.30: Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* 1.31: Firefox @fontface cleanup */ h1, h2, h3, h4, h5, h6, p { font-weight: normal; } /* 1.32: Normalize opentypes */ body { overflow-x: hidden; } p { font-family: 'Lato', sans-serif !important; font-weight: 300 !important; } html, body { -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; } h1, h2, h3 { -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; } abbr { text-transform: uppercase; -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; } time { -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; } pre, kbd, samp, code { -webkit-font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; -moz-font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; } sup { -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; } sub { -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; } /* 1.33: Grouping content */ input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="number"], input[type="range"], input[type="tel"], input[type="week"] { -webkit-font-feature-settings: "kern" 0, "liga" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 1, "zero" 0; -moz-font-feature-settings: "kern" 0, "liga" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 1, "zero" 0; font-feature-settings: "kern" 0, "liga" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 1, "zero" 0; } table { -webkit-font-feature-settings: "kern" 0, "liga" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; -moz-font-feature-settings: "kern" 0, "liga" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; font-feature-settings: "kern" 0, "liga" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; } table thead, table tfoot { -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; } /* -------------------------------------------- 2: Typography and styling for typograpic elements used in Ambiance ----------------------------------------------- */ /* 2.1: Add font smoothing to typographic elements */ p, span, a, h1, h2, h3, h4, h5, strong { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 2.2: Set lineheights and margins for elements*/ h1, h2, h3, h4, h5, h6, p, span { line-height: 1.2; margin: 0 0 .35em 0; } /* 2.3: Set paragraph properties */ p { line-height: 1.7em; text-align: left; margin: 20px 0; } /* 2.4: General header styling */ h1 { font-size: 38px; font-size: 3.8rem; text-shadow: 2px 1px 2px rgb(0, 0, 0); font-weight: 700; } h2 { font-size: 26px; font-size: 2.6rem; font-weight: 700; } h3 { font-size: 21px; font-size: 2.1rem; } h4 { font-size: 16px; font-size: 1.6rem; } h5 { font-size: 14px; font-size: 1.4rem; } h6 { font-size: 10px; font-size: 1rem; } p, span { font-size: 15px; font-size: 1.5rem; } /* 2.5: Style anchors in lists and paragraphs */ p a, ul a, ol a { text-decoration: underline; } /* 2.6: Basic anchor styling and transitions */ a { text-decoration: none; color: #b2ab99; text-decoration: none; } @media only screen and (min-width: 1025px) { a { -webkit-transition: color 1s; transition: color 1s; } /*a:hover { color: #ccc; }*/ } /* 2.7: Serif helper class */ .serif { letter-spacing: 1px; font-family: 'merriweather-italic', serif; color: #C0B9A9; } /* 2.8: Styling for the signature shown in the footer */ .signature { padding: 20px 0; text-align: left; } .signature h6 { text-transform: uppercase; color: #C0B9A9; letter-spacing: 2px; margin: 0; } .signature h5 { font-size: 48px; font-size: 4.8rem; font-family: 'kristimedium', serif; margin: 0 0 0 0; } .signature.center { text-align: center; } /* 2.9: Blockquote styling */ blockquote { border-left: 2px solid #C0B9A9; margin: 40px 0 40px 30px; padding-left: 10px; line-height: 1.8; } blockquote p { font-size: 28px; font-size: 2.8rem; color: #C0B9A9; font-family: 'merriweather-italic', serif; letter-spacing: 1px; opacity: 1; margin: 0; } /* 2.10: Styling for badges (element with background) and rounded corners */ .badge { font-size: 14px; font-size: 1.4rem; letter-spacing: 1px; display: inline-block; padding: .6em 1em; border-radius: 1em; line-height: 1.1em; background-color: rgba(3, 112, 196, 0.75); color: #FFFFFF; margin: 10px 0; } .badge-rounded { display: inline-block; padding: .6em .9em; background: none; color: #FFFFFF; border: 2px solid #FFFFFF; } /* 2.11: Styling for the icon show with the date */ .date-icon:before { font-size: 32px; font-size: 3.2rem; font-family: '77-Essential-Icons'; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; speak: none; line-height: 1; color: #FFFFFF; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\74"; vertical-align: middle; margin-right: .3em; } /* -------------------------------------------- 3: Transitions & Animations ----------------------------------------------- */ .transition { -webkit-transition: opacity 1s; transition: opacity 1s; opacity: 1; } .transition-in { opacity: 0; } .transition-out { opacity: 0; } .fade { -webkit-transition: opacity 1s; transition: opacity 1s; opacity: 1; } .fade-in { opacity: 0; } .fade-out { opacity: 0; } .slide-from-top { -webkit-transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .slide-from-top-in { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .slide-from-top-out { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .slide-to-top { -webkit-transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .slide-to-top-in { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .slide-to-top-out { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .slide-left { -webkit-transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .slide-left-in { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); overflow: hidden; } .slide-left-out { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); overflow: hidden; } .splash-transition { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .splash-transition-out { -webkit-transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* -------------------------------------------- 4: Fonts inclusion (Sans serif) ----------------------------------------------- */ @font-face { font-family: 'montserratregular'; src: url('fonts/montserrat-regular-webfont.eot'); src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-regular-webfont.woff2') format('woff2'), url('../../css/fonts/montserrat-regular-webfont.woff') format('woff'), url('fonts/montserrat-regular-webfont.ttf') format('truetype'), url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); font-weight: normal; font-style: normal; } /* -------------------------------------------- 4.1: Fonts inclusion (Serif) ----------------------------------------------- */ @font-face { font-family: 'merriweather-italic'; src: url('fonts/merriweather-italic.eot'); src: local('O'), url('fonts/merriweather-italic.woff') format('woff'), url('fonts/merriweather-italic.ttf') format('truetype'), url('fonts/merriweather-italic.svg#merriweather-italic') format('svg'); font-weight: normal; font-style: normal; } /* -------------------------------------------- 4.2: Fonts inclusion (Display font: For signature) ----------------------------------------------- */ @font-face { font-family: 'kristimedium'; src: url('fonts/kristi-webfont.eot'); src: url('fonts/kristi-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/kristi-webfont.woff2') format('woff2'), url('fonts/kristi-webfont.woff') format('woff'), url('fonts/kristi-webfont.ttf') format('truetype'), url('fonts/kristi-webfont.svg#kristimedium') format('svg'); font-weight: normal; font-style: normal; } /* -------------------------------------------- 4.3: Fonts inclusion (line-icon font) / 77-Essential-icons fontface ----------------------------------------------- */ @font-face { font-family: '77-Essential-Icons'; src: url('fonts/77-Essential-Icons.eot'); src: url('fonts/77-Essential-Icons.eot?#iefix') format("embedded-opentype"), url('fonts/77-Essential-Icons.woff') format('woff'), url('fonts/77-Essential-Icons.ttf') format('truetype'), url('fonts/77-Essential-Icons.svg#77-Essential-Icons') format('svg'); font-weight: normal; font-style: normal; } /* -------------------------------------------- 4.2.1: Icon definitions & styling for easy use ----------------------------------------------- */ .icon.bg { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: relative; display: inline-block; width: 60px; height: 60px; border-radius: 50%; background-color: #C0B9A9; } .icon.bg:before { line-height: 60px; vertical-align: middle; } .icon.inverted { background-color: #FFFFFF; } .icon.inverted:before { color: #C0B9A9; } .icon:before { font-size: 32px; font-size: 3.2rem; font-family: '77-Essential-Icons'; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; speak: none; line-height: 1; color: #FFFFFF; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon.icon-Food { position: relative; } .icon.icon-Food:before { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-left: -2px; content: ""; position: absolute; width: 27px; height: 27px; top: 50%; left: 55%; background-image: url('../intro/images/knive-fork.svg'); background-size: cover; } .icon.icon-Plus:before { content: "\2b"; } .icon.icon-Attachment:before { content: "\61"; } .icon.icon-Reply:before { content: "\72"; } .icon.icon-BarGraph:before { content: "\67"; } .icon.icon-Book:before { content: "\52"; } .icon.icon-Bookmark:before { content: "\42"; } .icon.icon-Briefcase:before { content: "\62"; } .icon.icon-BrowserWindow:before { content: "\77"; } .icon.icon-Calendar:before { content: "\63"; } .icon.icon-Camera:before { content: "\43"; } .icon.icon-Cancel:before { content: "\78"; } .icon.icon-Clock:before { content: "\74"; } .icon.icon-CommentwithLines:before { content: "\6d"; } .icon.icon-Comment:before { content: "\4d"; } .icon.icon-Computer:before { content: "\31"; } .icon.icon-Controls:before { content: "\53"; } .icon.icon-Conversation:before { content: "\73"; } .icon.icon-CreditCard:before { content: "\a3"; } .icon.icon-Crosshair:before { content: "\54"; } .icon.icon-Diary:before { content: "\6e"; } .icon.icon-DownArrow:before { content: "\64"; } .icon.icon-Email:before { content: "\65"; } .icon.icon-Folder:before { content: "\66"; } .icon.icon-Forward:before { content: "\46"; } .icon.icon-Heart:before { content: "\33"; } .icon.icon-Home:before { content: "\68"; } .icon.icon-Inbox:before { content: "\44"; } .icon.icon-Layers:before { content: "\4c"; } .icon.icon-LeftArrow:before { content: "\3c"; } .icon.icon-Link:before { content: "\6c"; } .icon.icon-List:before { content: "\3a"; } .icon.icon-LocationMarker:before { content: "\50"; } .icon.icon-Location:before { content: "\4b"; } .icon.icon-Map:before { content: "\71"; } .icon.icon-Medal:before { content: "\48"; } .icon.icon-Menu:before { content: "\3d"; } .icon.icon-Microphone:before { content: "\41"; } .icon.icon-Minus:before { content: "\2d"; } .icon.icon-Options:before { content: "\6f"; } .icon.icon-MoreOptions:before { content: "\4f"; } .icon.icon-Music:before { content: "\4e"; } .icon.icon-Mute:before { content: "\58"; } .icon.icon-Notification:before { content: "\6a"; } .icon.icon-Padlock:before { content: "\6b"; } .icon.icon-Document:before { content: "\57"; } .icon.icon-Phone:before { content: "\69"; } .icon.icon-Photo:before { content: "\70"; } .icon.icon-PieChart:before { content: "\47"; } .icon.icon-Pin:before { content: "\4a"; } .icon.icon-View:before { content: "\531"; } .icon.icon-Printer:before { content: "\532"; } .icon.icon-Profile:before { content: "\533"; } .icon.icon-Rearrange:before { content: "\7a"; } .icon.icon-Refresh:before { content: "\7e"; } .icon.icon-RightArrow:before { content: "\3e"; } .icon.icon-Save:before { content: "\79"; } .icon.icon-Search:before { content: "\59"; } .icon.icon-Settings:before { content: "\32"; } .icon.icon-Share:before { content: "\40"; } .icon.icon-Shop:before { content: "\51"; } .icon.icon-Signals:before { content: "\7b"; } .icon.icon-Signal:before { content: "\7c"; } .icon.icon-Volume:before { content: "\5a"; } .icon.icon-Star:before { content: "\2a"; } .icon.icon-iPad:before { content: "\49"; } .icon.icon-Tag:before { content: "\45"; } .icon.icon-Checkmark:before { content: "\2f"; } .icon.icon-Toggle:before { content: "\60"; } .icon.icon-Trash:before { content: "\5f"; } .icon.icon-Typing:before { content: "\2e"; } .icon.icon-UpArrow:before { content: "\5e"; } .icon.icon-User:before { content: "\75"; } .icon.icon-Users:before { content: "\55"; } .icon.icon-VideoCamera:before { content: "\56"; } .icon.icon-Video:before { content: "\76"; } .icon.icon-Warning:before { content: "\21"; } .icon.icon-CreateNew:before { content: "\7d"; } /* -------------------------------------------- 4.3: Fonts inclusion (Social incons) / Fontello custom selection ----------------------------------------------- */ @font-face { font-family: 'fontello'; src: url('fonts/fontello.eot?98850010'); src: url('fonts/fontello.eot?98850010#iefix') format("embedded-opentype"), url('fonts/fontello.woff?98850010') format('woff'), url('fonts/fontello.ttf?98850010') format('truetype'), url('../../fonts/fontello?98850010#fontello') format('svg'); font-weight: normal; font-style: normal; } i { display: inline-block; vertical-align: middle; } /* -------------------------------------------- 4.3.1: Icon definitions for easy use ----------------------------------------------- */ .icon-social:before { font-size: 18px; font-size: 1.8rem; font-family: 'fontello'; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; speak: none; line-height: 1; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #FFFFFF; } .icon-social.aim:before { content: '\e800'; } .icon-social.delicious:before { content: '\e801'; } .icon-social.paypal:before { content: '\e802'; } .icon-social.flattr:before { content: '\e803'; } .icon-social.android:before { content: '\e804'; } .icon-social.eventful:before { content: '\e805'; } .icon-social.smashmag:before { content: '\e806'; } .icon-social.gplus:before { content: '\e807'; } .icon-social.wikipedia:before { content: '\e808'; } .icon-social.lanyrd:before { content: '\e809'; } .icon-social.calendar:before { content: '\e80a'; } .icon-social.stumbleupon:before { content: '\e80b'; } .icon-social.fivehundredpx:before { content: '\e80c'; } .icon-social.pinterest:before { content: '\e80d'; } .icon-social.bitcoin:before { content: '\e80e'; } .icon-social.w3c:before { content: '\e80f'; } .icon-social.foursquare:before { content: '\e810'; } .icon-social.html5:before { content: '\e811'; } .icon-social.ie:before { content: '\e812'; } .icon-social.call:before { content: '\e813'; } .icon-social.grooveshark:before { content: '\e814'; } .icon-social.ninetyninedesigns:before { content: '\e815'; } .icon-social.forrst:before { content: '\e816'; } .icon-social.digg:before { content: '\e817'; } .icon-social.spotify:before { content: '\e818'; } .icon-social.reddit:before { content: '\e819'; } .icon-social.guest:before { content: '\e81a'; } .icon-social.gowalla:before { content: '\e81b'; } .icon-social.appstore:before { content: '\e81c'; } .icon-social.blogger:before { content: '\e81d'; } .icon-social.cc:before { content: '\e81e'; } .icon-social.dribbble:before { content: '\e81f'; } .icon-social.evernote:before { content: '\e820'; } .icon-social.flickr:before { content: '\e821'; } .icon-social.google:before { content: '\e822'; } .icon-social.viadeo:before { content: '\e823'; } .icon-social.instapaper:before { content: '\e824'; } .icon-social.weibo:before { content: '\e825'; } .icon-social.klout:before { content: '\e826'; } .icon-social.linkedin:before { content: '\e827'; } .icon-social.meetup:before { content: '\e828'; } .icon-social.vk:before { content: '\e829'; } .icon-social.plancast:before { content: '\e82a'; } .icon-social.disqus:before { content: '\e82b'; } .icon-social.rss:before { content: '\e82c'; } .icon-social.skype:before { content: '\e82d'; } .icon-social.twitter:before { content: '\e82e'; } .icon-social.youtube:before { content: '\e82f'; } .icon-social.vimeo:before { content: '\e830'; } .icon-social.windows:before { content: '\e831'; } .icon-social.xing:before { content: '\e832'; } .icon-social.yahoo:before { content: '\e833'; } .icon-social.chrome:before { content: '\e834'; } .icon-social.email:before { content: '\e835'; } .icon-social.macstore:before { content: '\e836'; } .icon-social.myspace:before { content: '\e837'; } .icon-social.podcast:before { content: '\e838'; } .icon-social.amazon:before { content: '\e839'; } .icon-social.steam:before { content: '\e83a'; } .icon-social.cloudapp:before { content: '\e83b'; } .icon-social.dropbox:before { content: '\e83c'; } .icon-social.ebay:before { content: '\e83d'; } .icon-social.facebook:before { content: '\e83e'; } .icon-social.github:before { content: '\e83f'; } .icon-social.github-circled:before { content: '\e840'; } .icon-social.googleplay:before { content: '\e841'; } .icon-social.itunes:before { content: '\e842'; } .icon-social.plurk:before { content: '\e843'; } .icon-social.songkick:before { content: '\e844'; } .icon-social.lastfm:before { content: '\e845'; } .icon-social.gmail:before { content: '\e846'; } .icon-social.pinboard:before { content: '\e847'; } .icon-social.openid:before { content: '\e848'; } .icon-social.quora:before { content: '\e849'; } .icon-social.soundcloud:before { content: '\e84a'; } .icon-social.tumblr:before { content: '\e84b'; } .icon-social.eventasaurus:before { content: '\e84c'; } .icon-social.wordpress:before { content: '\e84d'; } .icon-social.yelp:before { content: '\e84e'; } .icon-social.intensedebate:before { content: '\e84f'; } .icon-social.eventbrite:before { content: '\e850'; } .icon-social.scribd:before { content: '\e851'; } .icon-social.posterous:before { content: '\e852'; } .icon-social.stripe:before { content: '\e853'; } .icon-social.opentable:before { content: '\e854'; } .icon-social.cart:before { content: '\e855'; } .icon-social.print:before { content: '\e856'; } .icon-social.angellist:before { content: '\e857'; } .icon-social.instagram:before { content: '\e858'; } .icon-social.dwolla:before { content: '\e859'; } .icon-social.appnet:before { content: '\e85a'; } .icon-social.statusnet:before { content: '\e85b'; } .icon-social.acrobat:before { content: '\e85c'; } .icon-social.drupal:before { content: '\e85d'; } .icon-social.buffer:before { content: '\e85e'; } .icon-social.pocket:before { content: '\e85f'; } .icon-social.bitbucket:before { content: '\e860'; } .icon-social.lego:before { content: '\e861'; } .icon-social.login:before { content: '\e862'; } .icon-social.stackoverflow:before { content: '\e863'; } .icon-social.hackernews:before { content: '\e864'; } .icon-social.lkdto:before { content: '\e865'; } .icon-social.duckduckgo:before { content: '\e866'; } /* -------------------------------------------- 5: PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license ----------------------------------------------- */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } .pswp--animate_opacity { opacity: 0.001; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; will-change: transform; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; will-change: transform; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; } .pswp__img--placeholder { -webkit-backface-visibility: hidden; } .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100%; height: 100%; left: 0; top: 0; } .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } /* -------------------------------------------- 5.1: PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license Contents: 1. Buttons 2. Share modal and links 3. Index indicator ("1 of X" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.)