From b214f38d2c24a890ce36512a0c8bab965e27a508 Mon Sep 17 00:00:00 2001 From: JinweiClarkChao Date: Tue, 23 Sep 2014 22:34:14 +0800 Subject: README --- Code/ZJW/stylesheets/all.css | 30 + Code/ZJW/stylesheets/default.css | 1 + .../stylesheets/magnetic1407129817662.webflow.css | 448 ++++++ Code/ZJW/stylesheets/normalize.css | 340 ++++ Code/ZJW/stylesheets/webflow.css | 1633 ++++++++++++++++++++ 5 files changed, 2452 insertions(+) create mode 100644 Code/ZJW/stylesheets/all.css create mode 100644 Code/ZJW/stylesheets/default.css create mode 100644 Code/ZJW/stylesheets/magnetic1407129817662.webflow.css create mode 100644 Code/ZJW/stylesheets/normalize.css create mode 100644 Code/ZJW/stylesheets/webflow.css (limited to 'Code/ZJW/stylesheets') diff --git a/Code/ZJW/stylesheets/all.css b/Code/ZJW/stylesheets/all.css new file mode 100644 index 0000000..7c9f15d --- /dev/null +++ b/Code/ZJW/stylesheets/all.css @@ -0,0 +1,30 @@ +body { + background: rgba(21, 32, 46, 1); + text-align: center; +} + +.logo { + position: absolute; + z-index: 2; + left: 50%; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 385px; + height: 125px; + margin-left: -192.5px; + background: url(/images/logo.png); + background-size: 100%; + opacity: 1; +} + +canvas { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + display: block; +} diff --git a/Code/ZJW/stylesheets/default.css b/Code/ZJW/stylesheets/default.css new file mode 100644 index 0000000..26bf865 --- /dev/null +++ b/Code/ZJW/stylesheets/default.css @@ -0,0 +1 @@ +body{margin:0;padding:0;background:#ffe;font-size:12px;overflow:auto}#mainDiv{width:100%;height:100%}#loveHeart{float:left;width:670px;height:625px}#garden{width:100%;height:100%}#elapseClock{text-align:right;font-size:18px;margin-top:10px;margin-bottom:10px}#words{font-family:"sans-serif";width:500px;font-size:24px;color:#666}#messages{display:none}#elapseClock .digit{font-family:"digit";font-size:36px}#loveu{padding:5px;font-size:22px;margin-top:80px;margin-right:120px;text-align:right;display:none}#loveu .signature{margin-top:10px;font-size:20px;font-style:italic}#clickSound{display:none}#code{float:left;width:440px;height:400px;color:#333;font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";font-size:12px}#code .string{color:#2a36ff}#code .keyword{color:#7f0055;font-weight:bold}#code .placeholder{margin-left:15px}#code .space{margin-left:7px}#code .comments{color:#3f7f5f}#copyright{margin-top:10px;text-align:center;width:100%;color:#666}#errorMsg{width:100%;text-align:center;font-size:24px;position:absolute;top:100px;left:0}#copyright a{color:#666} \ No newline at end of file diff --git a/Code/ZJW/stylesheets/magnetic1407129817662.webflow.css b/Code/ZJW/stylesheets/magnetic1407129817662.webflow.css new file mode 100644 index 0000000..b9db5e1 --- /dev/null +++ b/Code/ZJW/stylesheets/magnetic1407129817662.webflow.css @@ -0,0 +1,448 @@ +body { + padding-top: 126px; + background-color: black; + background-image: url('../images/fans-black.jpg'); + background-size: cover; + font-family: 'Microsoft YaHei'; + color: white; + font-size: 14px; + line-height: 20px; + text-align: center; +} +h1 { + margin: 10px 0px; + color: #2d3338; + font-family: 'Microsoft YaHei'; + font-size: 69px; + line-height: 54px; + font-style: normal; + font-weight: 700; + text-shadow: none; +} +h2 { + margin-right: 0px; + margin-bottom: 10px; + margin-left: 0px; + font-family: 'Microsoft YaHei'; + font-size: 32px; + line-height: 36px; + font-weight: 400; + text-shadow: none; +} +h3 { + margin: 5px 0px; + font-family: 'Microsoft YaHei'; + font-size: 22px; + line-height: 30px; + font-weight: 400; + text-shadow: none; +} +h4 { + margin: 10px 0px; + font-family: 'Microsoft YaHei'; + font-size: 18px; + line-height: 24px; + font-weight: 700; +} +h5 { + margin: 10px 0px; + font-family: 'Microsoft YaHei'; + font-size: 14px; + line-height: 20px; + font-weight: 700; +} +h6 { + margin: 10px 0px; + font-family: 'Microsoft YaHei'; + font-size: 12px; + line-height: 18px; + font-weight: 700; +} +p { + margin-bottom: 5px; + font-family: 'Microsoft YaHei'; + font-size: 16px; + line-height: 23px; + font-weight: 300; + letter-spacing: 0px; + text-shadow: none; +} +.button { + display: block; + width: 100%; + height: 54px; + margin-left: -1px; + padding: 4px 29px; + border: 3px solid white; + background-color: transparent; + -webkit-transition: background-color 300ms ease, color 300ms ease; + -o-transition: background-color 300ms ease, color 300ms ease; + transition: background-color 300ms ease, color 300ms ease; + color: white; + font-family: 'Microsoft YaHei'; + font-size: 22px; + font-weight: 700; + text-align: center; + text-decoration: none; + text-transform: uppercase; +} +.button:hover { + background-color: white; + color: black; +} +.subtitle { + padding-bottom: 67px; + font-family: 'Microsoft YaHei'; + font-size: 31px; + line-height: 35px; + font-weight: 400; + text-shadow: none; +} +.field { + height: 54px; + margin-bottom: 19px; + padding-right: 20px; + padding-left: 20px; + border: 0px solid black; + -webkit-transition: box-shadow 150ms ease; + -o-transition: box-shadow 150ms ease; + transition: box-shadow 150ms ease; + color: #262c46; + font-family: 'Microsoft YaHei'; + font-size: 16px; + text-align: center; + text-transform: uppercase; +} +.field:focus { + box-shadow: #00caf2 0px 0px 0px 2px inset; +} +.sign-up-form { + display: block; + width: 415px; + margin: 35px auto 66px; +} +.social-widget { + width: 100px; + float: left; + -webkit-transition: opacity 300ms ease; + -o-transition: opacity 300ms ease; + transition: opacity 300ms ease; +} +.social-widget.full-opacity { + opacity: 1; +} +.social-widget-wrapper { + display: block; + width: 223px; + margin-right: auto; + margin-left: auto; + padding-left: 20px; +} +.social-widget-wrapper.thank-you { + display: block; + width: 216px; + margin-top: 13px; + margin-right: auto; + margin-left: auto; + padding-left: 16px; +} +.success-message { + padding: 20px; + border-radius: 2px; + background-color: #737373; + -webkit-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; +} +.spread-word { + margin-top: 12px; + font-family: Arial, Helvetica, sans-serif; + color: rgba(255, 255, 255, 0.6); + font-size: 10px; + line-height: 16px; + font-weight: 400; + letter-spacing: 0px; + text-transform: uppercase; + text-shadow: none; +} +.error-message { + padding-bottom: 5px; + border-radius: 2px; + background-color: #5c3245; +} +.content-wrapper { + display: inline-block; + width: 60%; +} +.header-section { + height: 100%; + padding-top: 104px; + background-color: #e0ddd7; + text-align: center; +} +.footer-section { + position: fixed; + left: 0px; + right: 0px; + bottom: 0px; + padding-top: 38px; + padding-bottom: 34px; + background-color: rgba(0, 0, 0, 0.18); + color: #7e7c87; +} +.copyright { + color: rgba(255, 255, 255, 0.52); + text-align: left; +} +.bars-wrapper { + height: 7px; + background-color: #1abc9c; +} +.bar { + width: 14.285%; + height: 7px; + float: left; + background-color: #1abc9c; +} +.bar._2 { + background-color: #f2ca27; +} +.bar._3 { + background-color: #e67e22; +} +.bar._4 { + background-color: #16a085; +} +.bar._5 { + background-color: #2980b9; +} +.bar._6 { + background-color: #e74c3c; +} +.bar._7 { + background-color: #a366bc; +} +.container { + padding-right: 127px; + padding-left: 127px; +} +.image-crop { + overflow-x: hidden; + overflow-y: hidden; + height: 260px; +} +.social-section { + padding-top: 58px; + padding-bottom: 58px; + text-align: center; +} +.share-btn { + display: inline-block; + width: 61px; + margin-right: 14px; + margin-left: 14px; +} +.share-wrapper { + margin-top: 32px; +} +.refer { + color: rgba(255, 255, 255, 0.59); +} +.align-right { + text-align: right; +} +.social-btn { + margin-left: 17px; + opacity: 0.44; + -webkit-transition: all 200ms ease; + -o-transition: all 200ms ease; + transition: all 200ms ease; +} +.social-btn:hover { + opacity: 1; +} +.logo { + display: inline-block; + margin-right: auto; + margin-bottom: 19px; + margin-left: auto; + padding: 21px; + border: 8px white; + color: white; + font-weight: 700; + letter-spacing: 8px; + text-shadow: none; +} +.about { + letter-spacing: 2px; + text-transform: uppercase; +} +.join { + display: block; + width: 40%; + margin-top: -12px; + margin-bottom: 15px; + float: left; + font-family: 'Microsoft YaHei'; + font-size: 22px; + letter-spacing: 4px; + text-transform: uppercase; + text-shadow: none; +} +.beta-line { + width: 30%; + height: 1px; + float: left; + background-color: rgba(255, 255, 255, 0.36); +} +@media (max-width: 991px) { + .subtitle { + font-size: 29px; + text-shadow: none; + } + .content-wrapper { + width: 81%; + } + .container { + padding-right: 57px; + padding-left: 57px; + } + .social-btn { + -webkit-transition: all 200ms ease; + -o-transition: all 200ms ease; + transition: all 200ms ease; + } + .social-btn:hover { + opacity: 0.8; + } + .join { + width: 50%; + font-size: 21px; + text-shadow: none; + } + .beta-line { + width: 25%; + } +} +@media (max-width: 767px) { + body { + padding-top: 65px; + } + .subtitle { + margin-right: 0px; + margin-left: 0px; + padding-bottom: 43px; + text-shadow: none; + } + .sign-up-form { + margin-bottom: 64px; + } + .content-wrapper { + width: 100%; + padding-right: 24px; + padding-left: 24px; + } + .header-section { + padding-top: 37px; + } + .footer-section { + position: static; + padding-top: 23px; + padding-bottom: 23px; + background-color: rgba(0, 0, 0, 0.49); + } + .container { + padding-right: 10px; + padding-left: 10px; + } + .social-section { + padding-top: 35px; + padding-bottom: 35px; + } + .logo { + text-shadow: none; + } + .join { + text-shadow: none; + } +} +@media (max-width: 479px) { + h2 { + font-size: 30px; + line-height: 31px; + text-shadow: none; + } + p { + font-size: 20px; + text-shadow: none; + } + .button { + width: 100%; + margin-left: 0px; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + } + .subtitle { + padding-bottom: 36px; + font-size: 22px; + line-height: 26px; + text-shadow: none; + } + .field { + width: 100%; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + text-align: center; + } + .sign-up-form { + width: 100%; + margin-top: 22px; + } + .social-widget { + width: 96px; + } + .social-widget-wrapper { + display: block; + width: 221px; + margin-right: auto; + margin-bottom: 15px; + margin-left: auto; + } + .copyright { + margin-bottom: 16px; + text-align: center; + } + .container { + padding-right: 10px; + padding-left: 10px; + } + .image-crop { + height: auto; + margin-bottom: 40px; + } + .social-section { + padding-right: 14px; + padding-left: 14px; + } + .align-right { + text-align: center; + } + .social-btn { + margin-right: 17px; + } + .logo { + font-size: 43px; + text-shadow: none; + } + .join { + width: 75%; + font-size: 19px; + line-height: 22px; + letter-spacing: 4px; + text-shadow: none; + } + .beta-line { + width: 12%; + } +} + diff --git a/Code/ZJW/stylesheets/normalize.css b/Code/ZJW/stylesheets/normalize.css new file mode 100644 index 0000000..a4aad65 --- /dev/null +++ b/Code/ZJW/stylesheets/normalize.css @@ -0,0 +1,340 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined in IE 8/9. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} +/** + * Correct `inline-block` display not defined in IE 8/9. + */ +audio, +canvas, +video { + display: inline-block; +} +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; +} +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; +} +/* ========================================================================== + Base + ========================================================================== */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} +/** + * Remove default margin. + */ +body { + margin: 0; +} +/* ========================================================================== + Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; +} +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ +a:focus { + outline: thin dotted; +} +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; +} +/* ========================================================================== + Typography + ========================================================================== */ +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; +} +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ +b, +strong { + font-weight: bold; +} +/** + * Address styling not present in Safari 5 and Chrome. + */ +dfn { + font-style: italic; +} +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; +} +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} +/** + * Improve readability of pre-formatted text in all browsers. + */ +pre { + white-space: pre-wrap; +} +/** + * Set consistent quote types. + */ +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; +} +/** + * 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; +} +/* ========================================================================== + Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9. + */ +img { + border: 0; +} +/** + * Correct overflow displayed oddly in IE 9. + */ +svg:not(:root) { + overflow: hidden; +} +/* ========================================================================== + Figures + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari 5. + */ +figure { + margin: 0; +} +/* ========================================================================== + Forms + ========================================================================== */ +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ +} +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ +button, +input, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 2 */ + margin: 0; + /* 3 */ +} +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +button, +input { + line-height: normal; +} +/** + * 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 Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ +button, +select { + text-transform: none; +} +/** + * 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 */ +} +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; +} +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; +} +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ +textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ +} +/* ========================================================================== + Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/Code/ZJW/stylesheets/webflow.css b/Code/ZJW/stylesheets/webflow.css new file mode 100644 index 0000000..f1ff73f --- /dev/null +++ b/Code/ZJW/stylesheets/webflow.css @@ -0,0 +1,1633 @@ +@font-face { + font-family: 'webflow-icons'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6SAy0AAAC8AAAAYGNtYXAaVcxaAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZgscV1gAAAFwAAABhGhlYWQCkFKvAAAC9AAAADZoaGVhB0MDyQAAAywAAAAkaG10eBIAA10AAANQAAAAIGxvY2EBMADyAAADcAAAABJtYXhwAAwATQAAA4QAAAAgbmFtZWTuiIAAAAOkAAABe3Bvc3QAAwAAAAAFIAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYD//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQEgAAADIAOAAAUAAAkBBwkBFwMg/kBAAYD+gEABwAHAQP6A/oBAAAEA4AAAAuADgAAFAAATARcJAQfgAcBA/oABgEABwAHAQP6A/oBAAAADAMAA4ANAAsAAGAAxAEoAAAEhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIwMg/cAHCwkFBQkLBwJABwsJBQUJCwf9wAcLCQUFCQsHAkAHCwkFBQkLB/3ABwsJBQUJCwcCQAcLCQUFCQsHAsAFCQsHIAcLCQUFCQsHIAcLCQXABQkLByAHCwkFBQkLByAHCwkFwAUJCwcgBwsJBQUJCwcgBwsJBQAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFFv+egGGAAAAAAEAAAABAADSLAJOXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAAAAACgAUAB4AMgBGAKwAwgAAAAEAAAAIAEsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAaAAAAAQAAAAAAAgAOAHEAAQAAAAAAAwAaADAAAQAAAAAABAAaAH8AAQAAAAAABQAWABoAAQAAAAAABgANAEoAAQAAAAAACgA0AJkAAwABBAkAAQAaAAAAAwABBAkAAgAOAHEAAwABBAkAAwAaADAAAwABBAkABAAaAH8AAwABBAkABQAWABoAAwABBAkABgAaAFcAAwABBAkACgA0AJkAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4Ac3dlYmZsb3ctaWNvbnMAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVcAAoAAAAABRQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAZMAAAGTuzUomU9TLzIAAAKIAAAAYAAAAGAOkgMtY21hcAAAAugAAABMAAAATBpVzFpnYXNwAAADNAAAAAgAAAAIAAAAEGhlYWQAAAM8AAAANgAAADYCkFKvaGhlYQAAA3QAAAAkAAAAJAdDA8lobXR4AAADmAAAACAAAAAgEgADXW1heHAAAAO4AAAABgAAAAYACFAAbmFtZQAAA8AAAAF7AAABe2TuiIBwb3N0AAAFPAAAACAAAAAgAAMAAAEABAQAAQEBDndlYmZsb3ctaWNvbnMAAQIAAQA6+BwC+BsD+BgEHgoACXf/i4seCgAJd/+LiwwHi0v6lPpUBR0AAACaDx0AAACfER0AAAAJHQAAAYoSAAkBAQ4bHR8iJywxNndlYmZsb3ctaWNvbnN3ZWJmbG93LWljb25zdTB1MXUyMHVFNjAwdUU2MDF1RTYwMnVFNjAzAAACAYkABgAIAQEEBwoNJDvH4P6UDv6UDv6UDvyUDvm0+FQV/FT4VEtL+BT8FPwU/BTLSwUO93T4VBX4VPhUy0v8FPwU+BT8FEtLBQ75tPlUFfzUiwV5i319i3kIi2sFi3mZfZ2LCPjUiwWdi5mZi50Ii6sFi519mXmLCIv7VBX81IsFeYt9fYt5CItrBYt5mX2diwj41IsFnYuZmYudCIurBYudfZl5iwiL+1QV/NSLBXmLfX2LeQiLawWLeZl9nYsI+NSLBZ2LmZmLnQiLqwWLnX2ZeYsIDvm4+SkV+6n7qvuq96ovLvgG/Bj4BvgYBQ76lBT6lBWLDAoAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gMDwP/A/8ADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmA//9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAC1pQTjXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAUAAACAAAAAAADgCuAAEAAAAAAAEAGgAAAAEAAAAAAAIADgBxAAEAAAAAAAMAGgAwAAEAAAAAAAQAGgB/AAEAAAAAAAUAFgAaAAEAAAAAAAYADQBKAAEAAAAAAAoANACZAAMAAQQJAAEAGgAAAAMAAQQJAAIADgBxAAMAAQQJAAMAGgAwAAMAAQQJAAQAGgB/AAMAAQQJAAUAFgAaAAMAAQQJAAYAGgBXAAMAAQQJAAoANACZAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHN3ZWJmbG93LWljb25zAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); + font-weight: normal; + font-style: normal; +} +[class^="w-icon-"], +[class*=" w-icon-"] { + font-family: 'webflow-icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.w-icon-slider-right:before { + content: "\e600"; +} +.w-icon-slider-left:before { + content: "\e601"; +} +.w-icon-nav-menu:before { + content: "\e602"; +} +.w-icon-arrow-down:before, +.w-icon-dropdown-toggle:before { + content: "\e603"; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html { + height: 100%; +} +body { + margin: 0; + min-height: 100%; + background-color: #fff; + color: #333; +} +img { + max-width: 100%; + vertical-align: middle; + display: inline-block; +} +html.w-mod-touch * { + background-attachment: scroll !important; +} +a:focus { + outline: 0; +} +.w-block { + display: block; +} +.w-inline-block { + max-width: 100%; + display: inline-block; +} +.w-clearfix:before, +.w-clearfix:after { + content: " "; + display: table; +} +.w-clearfix:after { + clear: both; +} +.w-hidden { + display: none; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} +p { + margin: 0; +} +blockquote { + margin: 0; +} +ul, +ol { + margin-top: 0; + margin-bottom: 0; +} +.w-list-unstyled { + padding-left: 0; + list-style: none; +} +.w-embed:before, +.w-embed:after { + content: " "; + display: table; +} +.w-embed:after { + clear: both; +} +.w-video { + width: 100%; + position: relative; + padding: 0; +} +.w-video iframe, +.w-video object, +.w-video embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +fieldset { + padding: 0; + margin: 0; + border: 0; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +.w-form { + margin: 0 0 15px; +} +.w-form-done { + display: none; + padding: 10px; + background-color: #dddddd; +} +.w-form-fail { + display: none; + margin-top: 10px; + padding: 10px; + background-color: #ffdede; +} +label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} +.w-input, +.w-select { + display: block; + width: 100%; + height: 38px; + padding: 8px 12px; + margin-bottom: 10px; + font-size: 14px; + line-height: 1.428571429; + color: #555555; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #cccccc; +} +.w-input:-moz-placeholder, +.w-select:-moz-placeholder { + color: #999999; +} +.w-input::-moz-placeholder, +.w-select::-moz-placeholder { + color: #999999; + opacity: 1; +} +.w-input:-ms-input-placeholder, +.w-select:-ms-input-placeholder { + color: #999999; +} +.w-input::-webkit-input-placeholder, +.w-select::-webkit-input-placeholder { + color: #999999; +} +.w-input:focus, +.w-select:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; +} +.w-input[disabled], +.w-select[disabled], +.w-input[readonly], +.w-select[readonly], +fieldset[disabled] .w-input, +fieldset[disabled] .w-select { + cursor: not-allowed; + background-color: #eeeeee; +} +textarea.w-input, +textarea.w-select { + height: auto; +} +.w-select[multiple] { + height: auto; +} +.w-button { + display: inline-block; + padding: 12px; + background-color: black; + color: white; + border: 0; + line-height: inherit; +} +.w-form-label { + display: inline-block; + cursor: pointer; + font-weight: normal; + margin-bottom: 0px; +} +.w-checkbox, +.w-radio { + display: block; + margin-bottom: 5px; + padding-left: 20px; +} +.w-checkbox:before, +.w-radio:before, +.w-checkbox:after, +.w-radio:after { + content: " "; + display: table; +} +.w-checkbox:after, +.w-radio:after { + clear: both; +} +.w-checkbox-input, +.w-radio-input { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; + float: left; + margin-left: -20px; +} +.w-radio-input { + margin-top: 3px; +} +.w-container { + margin-left: auto; + margin-right: auto; + max-width: 940px; +} +.w-container:before, +.w-container:after { + content: " "; + display: table; +} +.w-container:after { + clear: both; +} +.w-container .w-row { + margin-left: -10px; + margin-right: -10px; +} +.w-row:before, +.w-row:after { + content: " "; + display: table; +} +.w-row:after { + clear: both; +} +.w-row .w-row { + margin-left: 0; + margin-right: 0; +} +.w-col { + position: relative; + float: left; + width: 100%; + min-height: 1px; + padding-left: 10px; + padding-right: 10px; +} +.w-col .w-col { + padding-left: 0; + padding-right: 0; +} +.w-col-1 { + width: 8.33333333%; +} +.w-col-2 { + width: 16.66666667%; +} +.w-col-3 { + width: 25%; +} +.w-col-4 { + width: 33.33333333%; +} +.w-col-5 { + width: 41.66666667%; +} +.w-col-6 { + width: 50%; +} +.w-col-7 { + width: 58.33333333%; +} +.w-col-8 { + width: 66.66666667%; +} +.w-col-9 { + width: 75%; +} +.w-col-10 { + width: 83.33333333%; +} +.w-col-11 { + width: 91.66666667%; +} +.w-col-12 { + width: 100%; +} +.w-col-push-1 { + left: 8.33333333%; +} +.w-col-push-2 { + left: 16.66666667%; +} +.w-col-push-3 { + left: 25%; +} +.w-col-push-4 { + left: 33.33333333%; +} +.w-col-push-5 { + left: 41.66666667%; +} +.w-col-push-6 { + left: 50%; +} +.w-col-push-7 { + left: 58.33333333%; +} +.w-col-push-8 { + left: 66.66666667%; +} +.w-col-push-9 { + left: 75%; +} +.w-col-push-10 { + left: 83.33333333%; +} +.w-col-push-11 { + left: 91.66666667%; +} +.w-col-pull-1 { + right: 8.33333333%; +} +.w-col-pull-2 { + right: 16.66666667%; +} +.w-col-pull-3 { + right: 25%; +} +.w-col-pull-4 { + right: 33.33333333%; +} +.w-col-pull-5 { + right: 41.66666667%; +} +.w-col-pull-6 { + right: 50%; +} +.w-col-pull-7 { + right: 58.33333333%; +} +.w-col-pull-8 { + right: 66.66666667%; +} +.w-col-pull-9 { + right: 75%; +} +.w-col-pull-10 { + right: 83.33333333%; +} +.w-col-pull-11 { + right: 91.66666667%; +} +.w-col-offset-1 { + margin-left: 8.33333333%; +} +.w-col-offset-2 { + margin-left: 16.66666667%; +} +.w-col-offset-3 { + margin-left: 25%; +} +.w-col-offset-4 { + margin-left: 33.33333333%; +} +.w-col-offset-5 { + margin-left: 41.66666667%; +} +.w-col-offset-6 { + margin-left: 50%; +} +.w-col-offset-7 { + margin-left: 58.33333333%; +} +.w-col-offset-8 { + margin-left: 66.66666667%; +} +.w-col-offset-9 { + margin-left: 75%; +} +.w-col-offset-10 { + margin-left: 83.33333333%; +} +.w-col-offset-11 { + margin-left: 91.66666667%; +} +.w-hidden-main { + display: none !important; +} +@media screen and (max-width: 991px) { + .w-container { + max-width: 728px; + } + .w-hidden-main { + display: inherit !important; + } + .w-hidden-medium { + display: none !important; + } + .w-col-medium-1 { + width: 8.33333333%; + } + .w-col-medium-2 { + width: 16.66666667%; + } + .w-col-medium-3 { + width: 25%; + } + .w-col-medium-4 { + width: 33.33333333%; + } + .w-col-medium-5 { + width: 41.66666667%; + } + .w-col-medium-6 { + width: 50%; + } + .w-col-medium-7 { + width: 58.33333333%; + } + .w-col-medium-8 { + width: 66.66666667%; + } + .w-col-medium-9 { + width: 75%; + } + .w-col-medium-10 { + width: 83.33333333%; + } + .w-col-medium-11 { + width: 91.66666667%; + } + .w-col-medium-12 { + width: 100%; + } + .w-col-medium-push-1 { + left: 8.33333333%; + } + .w-col-medium-push-2 { + left: 16.66666667%; + } + .w-col-medium-push-3 { + left: 25%; + } + .w-col-medium-push-4 { + left: 33.33333333%; + } + .w-col-medium-push-5 { + left: 41.66666667%; + } + .w-col-medium-push-6 { + left: 50%; + } + .w-col-medium-push-7 { + left: 58.33333333%; + } + .w-col-medium-push-8 { + left: 66.66666667%; + } + .w-col-medium-push-9 { + left: 75%; + } + .w-col-medium-push-10 { + left: 83.33333333%; + } + .w-col-medium-push-11 { + left: 91.66666667%; + } + .w-col-medium-pull-1 { + right: 8.33333333%; + } + .w-col-medium-pull-2 { + right: 16.66666667%; + } + .w-col-medium-pull-3 { + right: 25%; + } + .w-col-medium-pull-4 { + right: 33.33333333%; + } + .w-col-medium-pull-5 { + right: 41.66666667%; + } + .w-col-medium-pull-6 { + right: 50%; + } + .w-col-medium-pull-7 { + right: 58.33333333%; + } + .w-col-medium-pull-8 { + right: 66.66666667%; + } + .w-col-medium-pull-9 { + right: 75%; + } + .w-col-medium-pull-10 { + right: 83.33333333%; + } + .w-col-medium-pull-11 { + right: 91.66666667%; + } + .w-col-medium-offset-1 { + margin-left: 8.33333333%; + } + .w-col-medium-offset-2 { + margin-left: 16.66666667%; + } + .w-col-medium-offset-3 { + margin-left: 25%; + } + .w-col-medium-offset-4 { + margin-left: 33.33333333%; + } + .w-col-medium-offset-5 { + margin-left: 41.66666667%; + } + .w-col-medium-offset-6 { + margin-left: 50%; + } + .w-col-medium-offset-7 { + margin-left: 58.33333333%; + } + .w-col-medium-offset-8 { + margin-left: 66.66666667%; + } + .w-col-medium-offset-9 { + margin-left: 75%; + } + .w-col-medium-offset-10 { + margin-left: 83.33333333%; + } + .w-col-medium-offset-11 { + margin-left: 91.66666667%; + } + .w-col-stack { + width: 100%; + left: auto; + right: auto; + } +} +@media screen and (max-width: 767px) { + .w-hidden-main { + display: inherit !important; + } + .w-hidden-medium { + display: inherit !important; + } + .w-hidden-small { + display: none !important; + } + .w-row, + .w-container .w-row { + margin-left: 0; + margin-right: 0; + } + .w-col { + width: 100%; + left: auto; + right: auto; + } + .w-col-small-1 { + width: 8.33333333%; + } + .w-col-small-2 { + width: 16.66666667%; + } + .w-col-small-3 { + width: 25%; + } + .w-col-small-4 { + width: 33.33333333%; + } + .w-col-small-5 { + width: 41.66666667%; + } + .w-col-small-6 { + width: 50%; + } + .w-col-small-7 { + width: 58.33333333%; + } + .w-col-small-8 { + width: 66.66666667%; + } + .w-col-small-9 { + width: 75%; + } + .w-col-small-10 { + width: 83.33333333%; + } + .w-col-small-11 { + width: 91.66666667%; + } + .w-col-small-12 { + width: 100%; + } + .w-col-small-push-1 { + left: 8.33333333%; + } + .w-col-small-push-2 { + left: 16.66666667%; + } + .w-col-small-push-3 { + left: 25%; + } + .w-col-small-push-4 { + left: 33.33333333%; + } + .w-col-small-push-5 { + left: 41.66666667%; + } + .w-col-small-push-6 { + left: 50%; + } + .w-col-small-push-7 { + left: 58.33333333%; + } + .w-col-small-push-8 { + left: 66.66666667%; + } + .w-col-small-push-9 { + left: 75%; + } + .w-col-small-push-10 { + left: 83.33333333%; + } + .w-col-small-push-11 { + left: 91.66666667%; + } + .w-col-small-pull-1 { + right: 8.33333333%; + } + .w-col-small-pull-2 { + right: 16.66666667%; + } + .w-col-small-pull-3 { + right: 25%; + } + .w-col-small-pull-4 { + right: 33.33333333%; + } + .w-col-small-pull-5 { + right: 41.66666667%; + } + .w-col-small-pull-6 { + right: 50%; + } + .w-col-small-pull-7 { + right: 58.33333333%; + } + .w-col-small-pull-8 { + right: 66.66666667%; + } + .w-col-small-pull-9 { + right: 75%; + } + .w-col-small-pull-10 { + right: 83.33333333%; + } + .w-col-small-pull-11 { + right: 91.66666667%; + } + .w-col-small-offset-1 { + margin-left: 8.33333333%; + } + .w-col-small-offset-2 { + margin-left: 16.66666667%; + } + .w-col-small-offset-3 { + margin-left: 25%; + } + .w-col-small-offset-4 { + margin-left: 33.33333333%; + } + .w-col-small-offset-5 { + margin-left: 41.66666667%; + } + .w-col-small-offset-6 { + margin-left: 50%; + } + .w-col-small-offset-7 { + margin-left: 58.33333333%; + } + .w-col-small-offset-8 { + margin-left: 66.66666667%; + } + .w-col-small-offset-9 { + margin-left: 75%; + } + .w-col-small-offset-10 { + margin-left: 83.33333333%; + } + .w-col-small-offset-11 { + margin-left: 91.66666667%; + } +} +@media screen and (max-width: 479px) { + .w-container { + max-width: none; + } + .w-hidden-main { + display: inherit !important; + } + .w-hidden-medium { + display: inherit !important; + } + .w-hidden-small { + display: inherit !important; + } + .w-hidden-tiny { + display: none !important; + } + .w-col { + width: 100%; + } + .w-col-tiny-1 { + width: 8.33333333%; + } + .w-col-tiny-2 { + width: 16.66666667%; + } + .w-col-tiny-3 { + width: 25%; + } + .w-col-tiny-4 { + width: 33.33333333%; + } + .w-col-tiny-5 { + width: 41.66666667%; + } + .w-col-tiny-6 { + width: 50%; + } + .w-col-tiny-7 { + width: 58.33333333%; + } + .w-col-tiny-8 { + width: 66.66666667%; + } + .w-col-tiny-9 { + width: 75%; + } + .w-col-tiny-10 { + width: 83.33333333%; + } + .w-col-tiny-11 { + width: 91.66666667%; + } + .w-col-tiny-12 { + width: 100%; + } + .w-col-tiny-push-1 { + left: 8.33333333%; + } + .w-col-tiny-push-2 { + left: 16.66666667%; + } + .w-col-tiny-push-3 { + left: 25%; + } + .w-col-tiny-push-4 { + left: 33.33333333%; + } + .w-col-tiny-push-5 { + left: 41.66666667%; + } + .w-col-tiny-push-6 { + left: 50%; + } + .w-col-tiny-push-7 { + left: 58.33333333%; + } + .w-col-tiny-push-8 { + left: 66.66666667%; + } + .w-col-tiny-push-9 { + left: 75%; + } + .w-col-tiny-push-10 { + left: 83.33333333%; + } + .w-col-tiny-push-11 { + left: 91.66666667%; + } + .w-col-tiny-pull-1 { + right: 8.33333333%; + } + .w-col-tiny-pull-2 { + right: 16.66666667%; + } + .w-col-tiny-pull-3 { + right: 25%; + } + .w-col-tiny-pull-4 { + right: 33.33333333%; + } + .w-col-tiny-pull-5 { + right: 41.66666667%; + } + .w-col-tiny-pull-6 { + right: 50%; + } + .w-col-tiny-pull-7 { + right: 58.33333333%; + } + .w-col-tiny-pull-8 { + right: 66.66666667%; + } + .w-col-tiny-pull-9 { + right: 75%; + } + .w-col-tiny-pull-10 { + right: 83.33333333%; + } + .w-col-tiny-pull-11 { + right: 91.66666667%; + } + .w-col-tiny-offset-1 { + margin-left: 8.33333333%; + } + .w-col-tiny-offset-2 { + margin-left: 16.66666667%; + } + .w-col-tiny-offset-3 { + margin-left: 25%; + } + .w-col-tiny-offset-4 { + margin-left: 33.33333333%; + } + .w-col-tiny-offset-5 { + margin-left: 41.66666667%; + } + .w-col-tiny-offset-6 { + margin-left: 50%; + } + .w-col-tiny-offset-7 { + margin-left: 58.33333333%; + } + .w-col-tiny-offset-8 { + margin-left: 66.66666667%; + } + .w-col-tiny-offset-9 { + margin-left: 75%; + } + .w-col-tiny-offset-10 { + margin-left: 83.33333333%; + } + .w-col-tiny-offset-11 { + margin-left: 91.66666667%; + } +} +.w-widget { + position: relative; +} +.w-widget-map { + width: 100%; + height: 400px; +} +.w-widget-map label { + width: auto; + display: inline; +} +.w-widget-map img { + max-width: inherit; +} +.w-widget-map .gm-style-iw { + width: 90% !important; + height: auto !important; + top: 7px !important; + left: 6% !important; + display: inline; + text-align: center; + overflow: hidden; +} +.w-widget-map .gm-style-iw + div { + display: none; +} +.w-widget-twitter { + overflow: hidden; +} +.w-widget-gplus { + overflow: hidden; +} +.w-slider { + position: relative; + height: 300px; + text-align: center; + background: rgba(153, 153, 153, 0.5); + clear: both; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); +} +.w-slider-mask { + position: relative; + display: block; + overflow: hidden; + z-index: 1; + left: 0; + right: 0; + height: 100%; + white-space: nowrap; +} +.w-slide { + position: relative; + display: inline-block; + vertical-align: top; + width: 100%; + height: 100%; + white-space: normal; + text-align: left; +} +.w-slider-nav { + position: absolute; + z-index: 2; + top: auto; + right: 0; + bottom: 0; + left: 0; + margin: auto; + padding-top: 10px; + height: 40px; + text-align: center; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); +} +.w-slider-nav.w-round > div { + -webkit-border-radius: 100%; + -webkit-background-clip: padding-box; + -moz-border-radius: 100%; + -moz-background-clip: padding; + border-radius: 100%; + background-clip: padding-box; +} +.w-slider-nav.w-num > div { + width: auto; + height: auto; + padding: 0.2em 0.5em; + font-size: inherit; + line-height: inherit; +} +.w-slider-nav.w-shadow > div { + -webkit-box-shadow: 0 0 3px rgba(51, 51, 51, 0.4); + -moz-box-shadow: 0 0 3px rgba(51, 51, 51, 0.4); + box-shadow: 0 0 3px rgba(51, 51, 51, 0.4); +} +.w-slider-nav-invert { + color: #fff; +} +.w-slider-nav-invert > div { + background-color: rgba(34, 34, 34, 0.4); +} +.w-slider-nav-invert > div.w-active { + background-color: #222; +} +.w-slider-dot { + position: relative; + display: inline-block; + width: 1em; + height: 1em; + background-color: rgba(255, 255, 255, 0.4); + cursor: pointer; + margin: 0 3px 0.5em; + -webkit-transition: background-color 100ms, color 100ms; + -moz-transition: background-color 100ms, color 100ms; + -o-transition: background-color 100ms, color 100ms; + transition: background-color 100ms, color 100ms; +} +.w-slider-dot.w-active { + background-color: #fff; +} +.w-slider-arrow-left, +.w-slider-arrow-right { + position: absolute; + width: 80px; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + cursor: pointer; + overflow: hidden; + color: white; + font-size: 40px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.w-slider-arrow-left [class^="w-icon-"], +.w-slider-arrow-right [class^="w-icon-"], +.w-slider-arrow-left [class*=" w-icon-"], +.w-slider-arrow-right [class*=" w-icon-"] { + position: absolute; +} +.w-slider-arrow-left { + z-index: 3; + right: auto; +} +.w-slider-arrow-right { + z-index: 4; + left: auto; +} +.w-icon-slider-left, +.w-icon-slider-right { + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 1em; + height: 1em; +} +.w-dropdown { + display: inline-block; + position: relative; + text-align: left; + margin-left: auto; + margin-right: auto; + z-index: 900; +} +.w-dropdown-btn, +.w-dropdown-toggle, +.w-dropdown-link { + position: relative; + vertical-align: top; + text-decoration: none; + color: #222; + padding: 20px; + text-align: left; + margin-left: auto; + margin-right: auto; + white-space: nowrap; +} +.w-dropdown-toggle { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-block; + cursor: pointer; + padding-right: 40px; +} +.w-dropdown-toggle:focus { + outline: 0; +} +.w-icon-dropdown-toggle { + position: absolute; + top: 0; + right: 0; + bottom: 0; + margin: auto; + margin-right: 20px; + width: 1em; + height: 1em; +} +.w-dropdown-list { + position: absolute; + background: #f2f2f2; + display: none; + min-width: 100%; +} +.w-dropdown-list.w--open { + display: block; +} +.w-dropdown-link { + padding: 10px 20px; + display: block; +} +.w-dropdown-link.w--current { + color: #339ce1; +} +.w-nav[data-collapse="all"] .w-dropdown, +.w-nav[data-collapse="all"] .w-dropdown-toggle { + display: block; +} +.w-nav[data-collapse="all"] .w-dropdown-list { + position: static; +} +@media screen and (max-width: 991px) { + .w-nav[data-collapse="medium"] .w-dropdown, + .w-nav[data-collapse="medium"] .w-dropdown-toggle { + display: block; + } + .w-nav[data-collapse="medium"] .w-dropdown-list { + position: static; + } +} +@media screen and (max-width: 767px) { + .w-nav[data-collapse="small"] .w-dropdown, + .w-nav[data-collapse="small"] .w-dropdown-toggle { + display: block; + } + .w-nav[data-collapse="small"] .w-dropdown-list { + position: static; + } + .w-nav-brand { + padding-left: 10px; + } +} +@media screen and (max-width: 479px) { + .w-nav[data-collapse="tiny"] .w-dropdown, + .w-nav[data-collapse="tiny"] .w-dropdown-toggle { + display: block; + } + .w-nav[data-collapse="tiny"] .w-dropdown-list { + position: static; + } +} +/** + * ## Note + * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well. + * For example percentage units do not work on descendants of elements that + * have any dimensions expressed in viewport units. It also doesn’t handle them at + * all in `calc()`. + */ +/** + * Wrapper around all lightbox elements + * + * 1. Since the lightbox can receive focus, IE also gives it an outline. + * 2. Fixes flickering on Chrome when a transition is in progress + * underneath the lightbox. + */ +.w-lightbox-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + color: #fff; + font-family: "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif; + font-size: 17px; + font-weight: 300; + text-align: center; + background: rgba(0, 0, 0, 0.9); + z-index: 2000; + outline: 0; + /* 1 */ + opacity: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-transform: translate(0, 0); + /* 2 */ +} +/** + * Neat trick to bind the rubberband effect to our canvas instead of the whole + * document on iOS. It also prevents a bug that causes the document underneath to scroll. + */ +.w-lightbox-backdrop, +.w-lightbox-container { + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.w-lightbox-content { + position: relative; + height: 100vh; + overflow: hidden; +} +.w-lightbox-view { + position: absolute; + width: 100vw; + height: 100vh; +} +.w-lightbox-view:before { + content: ""; + height: 100vh; +} +/* .w-lightbox-content */ +.w-lightbox-group, +.w-lightbox-group .w-lightbox-view, +.w-lightbox-group .w-lightbox-view:before { + height: 86vh; +} +.w-lightbox-frame, +.w-lightbox-view:before { + display: inline-block; + vertical-align: middle; +} +/* + * 1. Remove default margin set by user-agent on the
element. + */ +.w-lightbox-figure { + position: relative; + margin: 0; + /* 1 */ +} +.w-lightbox-group .w-lightbox-figure { + cursor: pointer; +} +/** + * IE adds image dimensions as width and height attributes on the IMG tag, + * but we need both width and height to be set to auto to enable scaling. + */ +.w-lightbox-img { + width: auto; + height: auto; + max-width: none; +} +.w-lightbox-image { + display: block; + max-width: 100vw; + max-height: 100vh; +} +.w-lightbox-group .w-lightbox-image { + max-height: 86vh; +} +.w-lightbox-caption { + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: .5em 1em; + background: rgba(0, 0, 0, 0.4); + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.w-lightbox-embed { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; +} +.w-lightbox-control { + position: absolute; + top: 0; + width: 4em; + background-size: 24px; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + opacity: 0; + -webkit-transition: all .3s; + transition: all .3s; +} +.w-lightbox-left { + bottom: 0; + left: 0; + /* */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg=="); +} +.w-lightbox-right { + right: 0; + bottom: 0; + /* */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+"); +} +/* + * Without specifying the with and height inside the SVG, all versions of IE render the icon too small. + * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows. + * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer) + */ +.w-lightbox-close { + right: 0; + height: 2.6em; + /* */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4="); + background-size: 18px; +} +/** + * 1. All IE versions add extra space at the bottom without this. + */ +.w-lightbox-strip { + padding: 0 1vh; + line-height: 0; + /* 1 */ + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} +/* + * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)` + * which doesn’t work in Safari anyway. + * 2. Chrome renders images pixelated when switching to GPU. Making sure + * the parent is also rendered on the GPU (by setting translate3d for + * example) fixes this behavior. + */ +.w-lightbox-item { + display: inline-block; + width: 10vh; + padding: 2vh 1vh; + box-sizing: content-box; + /* 1 */ + cursor: pointer; + -webkit-transform: translate3d(0, 0, 0); + /* 2 */ +} +.w-lightbox-active { + opacity: .3; +} +.w-lightbox-thumbnail { + position: relative; + height: 10vh; + background: #222; + overflow: hidden; +} +.w-lightbox-thumbnail-image { + position: absolute; + top: 0; + left: 0; +} +.w-lightbox-thumbnail .w-lightbox-tall { + top: 50%; + width: 100%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +.w-lightbox-thumbnail .w-lightbox-wide { + left: 50%; + height: 100%; + -webkit-transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} +/* + * Spinner + * + * Absolute pixel values are used to avoid rounding errors that would cause + * the white spinning element to be misaligned with the track. + */ +.w-lightbox-spinner { + position: absolute; + top: 50%; + left: 50%; + box-sizing: border-box; + width: 40px; + height: 40px; + margin-top: -20px; + margin-left: -20px; + border: 5px solid rgba(0, 0, 0, 0.4); + border-radius: 50%; + -webkit-animation: spin .8s infinite linear; + animation: spin .8s infinite linear; +} +.w-lightbox-spinner:after { + content: ""; + position: absolute; + top: -4px; + right: -4px; + bottom: -4px; + left: -4px; + border: 3px solid transparent; + border-bottom-color: #fff; + border-radius: 50%; +} +/* + * Utility classes + */ +.w-lightbox-hide { + display: none; +} +.w-lightbox-visible { + opacity: 1; +} +.w-lightbox-noscroll { + overflow: hidden; +} +@media (min-width: 1025px) { + .w-lightbox-content { + height: 96vh; + margin-top: 2vh; + } + .w-lightbox-view, + .w-lightbox-view:before { + height: 96vh; + } + /* .w-lightbox-content */ + .w-lightbox-group, + .w-lightbox-group .w-lightbox-view, + .w-lightbox-group .w-lightbox-view:before { + height: 84vh; + } + .w-lightbox-image { + max-width: 96vw; + max-height: 96vh; + } + .w-lightbox-group .w-lightbox-image { + max-height: 84vh; + } + .w-lightbox-left, + .w-lightbox-right { + opacity: .5; + } + .w-lightbox-close { + opacity: .8; + } + .w-lightbox-control:hover { + opacity: 1; + } +} +.w-lightbox-inactive, +.w-lightbox-inactive:hover { + opacity: 0; +} +.w-nav { + position: relative; + background: #BBB; + z-index: 1000; +} +.w-nav:before, +.w-nav:after { + content: " "; + display: table; +} +.w-nav:after { + clear: both; +} +.w-nav-brand { + position: relative; + float: left; + text-decoration: none; + color: #222; +} +.w-nav-link { + position: relative; + display: inline-block; + vertical-align: top; + text-decoration: none; + color: #222; + padding: 20px; + text-align: left; + margin-left: auto; + margin-right: auto; +} +.w-nav-link.w--current { + color: #339ce1; +} +.w-nav-menu { + position: relative; + float: right; +} +.w--nav-menu-open { + display: block !important; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #999; + text-align: center; + overflow: visible; + min-width: 200px; +} +.w--nav-link-open { + display: block; + position: relative; +} +.w-nav-overlay { + position: absolute; + overflow: hidden; + display: none; + top: 100%; + left: 0; + right: 0; + width: 100%; +} +.w-nav-overlay .w--nav-menu-open { + top: 0; +} +.w-nav[data-animation="over-left"] .w-nav-overlay { + width: auto; +} +.w-nav[data-animation="over-left"] .w-nav-overlay, +.w-nav[data-animation="over-left"] .w--nav-menu-open { + right: auto; + z-index: 1; + top: 0; +} +.w-nav[data-animation="over-right"] .w-nav-overlay { + width: auto; +} +.w-nav[data-animation="over-right"] .w-nav-overlay, +.w-nav[data-animation="over-right"] .w--nav-menu-open { + left: auto; + z-index: 1; + top: 0; +} +.w-nav-button { + position: relative; + float: right; + padding: 18px; + font-size: 24px; + display: none; + cursor: pointer; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.w-nav-button.w--open { + background-color: #999; + color: white; +} +.w-nav[data-collapse="all"] .w-nav-menu { + display: none; +} +.w-nav[data-collapse="all"] .w-nav-button { + display: block; +} +@media screen and (max-width: 991px) { + .w-nav[data-collapse="medium"] .w-nav-menu { + display: none; + } + .w-nav[data-collapse="medium"] .w-nav-button { + display: block; + } +} +@media screen and (max-width: 767px) { + .w-nav[data-collapse="small"] .w-nav-menu { + display: none; + } + .w-nav[data-collapse="small"] .w-nav-button { + display: block; + } + .w-nav-brand { + padding-left: 10px; + } +} +@media screen and (max-width: 479px) { + .w-nav[data-collapse="tiny"] .w-nav-menu { + display: none; + } + .w-nav[data-collapse="tiny"] .w-nav-button { + display: block; + } +} +.w-tabs { + position: relative; +} +.w-tabs:before, +.w-tabs:after { + content: " "; + display: table; +} +.w-tabs:after { + clear: both; +} +.w-tab-menu { + position: relative; +} +.w-tab-link { + position: relative; + display: inline-block; + vertical-align: top; + text-decoration: none; + padding: 8px 30px; + text-align: left; + cursor: pointer; + background-color: #E8E8E8; +} +.w-tab-link.w--current { + background-color: #BCD3F3; +} +.w-tab-content { + position: relative; + display: block; + overflow: hidden; +} +.w-tab-pane { + position: relative; + display: none; +} +.w--tab-active { + display: block; +} +@media screen and (max-width: 479px) { + .w-tab-link { + display: block; + } +} +.w-ix-emptyfix:after { + content: ""; +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} -- cgit v1.2.3