@charset "UTF-8"; /*---------------------------------------------------------------------- ArtWork Revolution BY: MIGHTY // MIGHTYINTHEMIDWEST.COM Author: Chris Chiles Date Created: 2013/05/06 Last Modified: 2013/05/06 Copyright 2013, All Rights Reserved. ----------------------------------------------------------------------*/ /* Write your CSS! */ 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; } body { line-height: 1; } 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; } input, textarea { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; outline: none; } a { text-decoration: none; } /* * Symbolset * www.symbolset.com * Copyright ยฉ 2012 Oak Studios LLC * * Upload this file to your web server * and place this within your tags. * */ @font-face { font-family: "SSStandard"; src: url(../fonts/ss-standard.eot); src: url(../fonts/ss-standard.eot?#iefix) format("embedded-opentype"), url(../fonts/ss-standard.woff) format("woff"), url(../fonts/ss-standard.ttf) format("truetype"), url(../fonts/ss-standard.svg#SSStandard) format("svg"); font-weight: normal; font-style: normal; } /* This triggers a redraw in IE to Fix IE8's :before content rendering. */ html:hover [class^="ss-"] { -ms-zoom: 1; } .ss-icon, .ss-icon.ss-standard, [class^="ss-"]:before, [class*=" ss-"]:before, [class^="ss-"].ss-standard:before, [class*=" ss-"].ss-standard:before, [class^="ss-"].right:after, [class*=" ss-"].right:after, [class^="ss-"].ss-standard.right:after, [class*=" ss-"].ss-standard.right:after { font-family: "SSStandard"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */ -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"; -webkit-font-smoothing: antialiased; } [class^="ss-"].right:before, [class*=" ss-"].right:before { display: none; content: ''; } .ss-cursor:before, .ss-cursor.right:after { content: '๎€'; } .ss-crosshair:before, .ss-crosshair.right:after { content: 'โŒ–'; } .ss-search:before, .ss-search.right:after { content: '๐Ÿ”Ž'; } .ss-zoomin:before, .ss-zoomin.right:after { content: '๎€‚'; } .ss-zoomout:before, .ss-zoomout.right:after { content: '๎€ƒ'; } .ss-view:before, .ss-view.right:after { content: '๐Ÿ‘€'; } .ss-attach:before, .ss-attach.right:after { content: '๐Ÿ“Ž'; } .ss-link:before, .ss-link.right:after { content: '๐Ÿ”—'; } .ss-move:before, .ss-move.right:after { content: '๎ฐ'; } .ss-write:before, .ss-write.right:after { content: 'โœŽ'; } .ss-writingdisabled:before, .ss-writingdisabled.right:after { content: '๎ฑ'; } .ss-erase:before, .ss-erase.right:after { content: 'โœ'; } .ss-compose:before, .ss-compose.right:after { content: '๐Ÿ“'; } .ss-lock:before, .ss-lock.right:after { content: '๐Ÿ”’'; } .ss-unlock:before, .ss-unlock.right:after { content: '๐Ÿ”“'; } .ss-key:before, .ss-key.right:after { content: '๐Ÿ”‘'; } .ss-backspace:before, .ss-backspace.right:after { content: 'โŒซ'; } .ss-ban:before, .ss-ban.right:after { content: '๐Ÿšซ'; } .ss-trash:before, .ss-trash.right:after { content: '๎ƒ'; } .ss-target:before, .ss-target.right:after { content: 'โ—Ž'; } .ss-tag:before, .ss-tag.right:after { content: '๎„€'; } .ss-bookmark:before, .ss-bookmark.right:after { content: '๐Ÿ”–'; } .ss-flag:before, .ss-flag.right:after { content: 'โš‘'; } .ss-like:before, .ss-like.right:after { content: '๐Ÿ‘'; } .ss-dislike:before, .ss-dislike.right:after { content: '๐Ÿ‘Ž'; } .ss-heart:before, .ss-heart.right:after { content: 'โ™ฅ'; } .ss-halfheart:before, .ss-halfheart.right:after { content: '๎† '; } .ss-star:before, .ss-star.right:after { content: 'โ‹†'; } .ss-halfstar:before, .ss-halfstar.right:after { content: '๎†ก'; } .ss-sample:before, .ss-sample.right:after { content: '๎ˆ€'; } .ss-crop:before, .ss-crop.right:after { content: '๎ˆ'; } .ss-layers:before, .ss-layers.right:after { content: '๎ˆ‚'; } .ss-fill:before, .ss-fill.right:after { content: '๎‰€'; } .ss-stroke:before, .ss-stroke.right:after { content: '๎‰'; } .ss-phone:before, .ss-phone.right:after { content: '๐Ÿ“ž'; } .ss-phonedisabled:before, .ss-phonedisabled.right:after { content: '๎Œ€'; } .ss-rss:before, .ss-rss.right:after { content: '๎Œ'; } .ss-facetime:before, .ss-facetime.right:after { content: '๎Œ '; } .ss-reply:before, .ss-reply.right:after { content: 'โ†ฉ'; } .ss-send:before, .ss-send.right:after { content: '๎'; } .ss-mail:before, .ss-mail.right:after { content: 'โœ‰'; } .ss-inbox:before, .ss-inbox.right:after { content: '๐Ÿ“ฅ'; } .ss-chat:before, .ss-chat.right:after { content: '๐Ÿ’ฌ'; } .ss-ellipsischat:before, .ss-ellipsischat.right:after { content: '๎Ž™'; } .ss-ellipsis:before, .ss-ellipsis.right:after { content: 'โ€ฆ'; } .ss-user:before, .ss-user.right:after { content: '๐Ÿ‘ค'; } .ss-femaleuser:before, .ss-femaleuser.right:after { content: '๐Ÿ‘ง'; } .ss-users:before, .ss-users.right:after { content: '๐Ÿ‘ฅ'; } .ss-cart:before, .ss-cart.right:after { content: '๎”€'; } .ss-creditcard:before, .ss-creditcard.right:after { content: '๐Ÿ’ณ'; } .ss-dollarsign:before, .ss-dollarsign.right:after { content: '๐Ÿ’ฒ'; } .ss-barchart:before, .ss-barchart.right:after { content: '๐Ÿ“Š'; } .ss-piechart:before, .ss-piechart.right:after { content: '๎•ฐ'; } .ss-box:before, .ss-box.right:after { content: '๐Ÿ“ฆ'; } .ss-home:before, .ss-home.right:after { content: 'โŒ‚'; } .ss-buildings:before, .ss-buildings.right:after { content: '๐Ÿข'; } .ss-warehouse:before, .ss-warehouse.right:after { content: '๎˜‚'; } .ss-globe:before, .ss-globe.right:after { content: '๐ŸŒŽ'; } .ss-navigate:before, .ss-navigate.right:after { content: '๎™ฐ'; } .ss-compass:before, .ss-compass.right:after { content: '๎™ฑ'; } .ss-signpost:before, .ss-signpost.right:after { content: '๎™ฒ'; } .ss-map:before, .ss-map.right:after { content: '๎™ณ'; } .ss-location:before, .ss-location.right:after { content: '๎›'; } .ss-pin:before, .ss-pin.right:after { content: '๐Ÿ“'; } .ss-database:before, .ss-database.right:after { content: '๎ž '; } .ss-hdd:before, .ss-hdd.right:after { content: '๎žฐ'; } .ss-music:before, .ss-music.right:after { content: 'โ™ซ'; } .ss-mic:before, .ss-mic.right:after { content: '๐ŸŽค'; } .ss-volume:before, .ss-volume.right:after { content: '๐Ÿ”ˆ'; } .ss-lowvolume:before, .ss-lowvolume.right:after { content: '๐Ÿ”‰'; } .ss-highvolume:before, .ss-highvolume.right:after { content: '๐Ÿ”Š'; } .ss-airplay:before, .ss-airplay.right:after { content: '๎ €'; } .ss-camera:before, .ss-camera.right:after { content: '๐Ÿ“ท'; } .ss-picture:before, .ss-picture.right:after { content: '๐ŸŒ„'; } .ss-video:before, .ss-video.right:after { content: '๐Ÿ“น'; } .ss-play:before, .ss-play.right:after { content: 'โ–ถ'; } .ss-pause:before, .ss-pause.right:after { content: '๎ข '; } .ss-stop:before, .ss-stop.right:after { content: 'โ– '; } .ss-record:before, .ss-record.right:after { content: 'โ—'; } .ss-rewind:before, .ss-rewind.right:after { content: 'โช'; } .ss-fastforward:before, .ss-fastforward.right:after { content: 'โฉ'; } .ss-skipback:before, .ss-skipback.right:after { content: 'โฎ'; } .ss-skipforward:before, .ss-skipforward.right:after { content: 'โญ'; } .ss-eject:before, .ss-eject.right:after { content: 'โ'; } .ss-repeat:before, .ss-repeat.right:after { content: '๐Ÿ”'; } .ss-replay:before, .ss-replay.right:after { content: 'โ†บ'; } .ss-shuffle:before, .ss-shuffle.right:after { content: '๐Ÿ”€'; } .ss-book:before, .ss-book.right:after { content: '๐Ÿ“•'; } .ss-openbook:before, .ss-openbook.right:after { content: '๐Ÿ“–'; } .ss-notebook:before, .ss-notebook.right:after { content: '๐Ÿ““'; } .ss-newspaper:before, .ss-newspaper.right:after { content: '๐Ÿ“ฐ'; } .ss-grid:before, .ss-grid.right:after { content: '๎ฆ '; } .ss-rows:before, .ss-rows.right:after { content: '๎ฆก'; } .ss-columns:before, .ss-columns.right:after { content: '๎ฆข'; } .ss-thumbnails:before, .ss-thumbnails.right:after { content: '๎ฆฃ'; } .ss-filter:before, .ss-filter.right:after { content: '๎ฆฐ'; } .ss-desktop:before, .ss-desktop.right:after { content: '๐Ÿ’ป'; } .ss-laptop:before, .ss-laptop.right:after { content: '๎จ€'; } .ss-tablet:before, .ss-tablet.right:after { content: '๎จ'; } .ss-cell:before, .ss-cell.right:after { content: '๐Ÿ“ฑ'; } .ss-battery:before, .ss-battery.right:after { content: '๐Ÿ”‹'; } .ss-highbattery:before, .ss-highbattery.right:after { content: '๎จ'; } .ss-mediumbattery:before, .ss-mediumbattery.right:after { content: '๎จ‘'; } .ss-lowbattery:before, .ss-lowbattery.right:after { content: '๎จ’'; } .ss-emptybattery:before, .ss-emptybattery.right:after { content: '๎จ“'; } .ss-lightbulb:before, .ss-lightbulb.right:after { content: '๐Ÿ’ก'; } .ss-downloadcloud:before, .ss-downloadcloud.right:after { content: '๎ฌ€'; } .ss-download:before, .ss-download.right:after { content: '๎ฌ'; } .ss-uploadcloud:before, .ss-uploadcloud.right:after { content: '๎ญ€'; } .ss-upload:before, .ss-upload.right:after { content: '๎ญ'; } .ss-fork:before, .ss-fork.right:after { content: '๎ฎ€'; } .ss-merge:before, .ss-merge.right:after { content: '๎ฎ'; } .ss-transfer:before, .ss-transfer.right:after { content: 'โ‡†'; } .ss-refresh:before, .ss-refresh.right:after { content: 'โ†ป'; } .ss-sync:before, .ss-sync.right:after { content: '๎ฎ‚'; } .ss-loading:before, .ss-loading.right:after { content: '๎ฎƒ'; } .ss-wifi:before, .ss-wifi.right:after { content: '๎ฎ„'; } .ss-connection:before, .ss-connection.right:after { content: '๎ฎ…'; } .ss-file:before, .ss-file.right:after { content: '๐Ÿ“„'; } .ss-folder:before, .ss-folder.right:after { content: '๐Ÿ“'; } .ss-quote:before, .ss-quote.right:after { content: 'โ€œ'; } .ss-text:before, .ss-text.right:after { content: '๎ด€'; } .ss-font:before, .ss-font.right:after { content: '๎ด'; } .ss-print:before, .ss-print.right:after { content: 'โŽ™'; } .ss-fax:before, .ss-fax.right:after { content: '๐Ÿ“ '; } .ss-list:before, .ss-list.right:after { content: '๎ต'; } .ss-layout:before, .ss-layout.right:after { content: '๎ถ '; } .ss-action:before, .ss-action.right:after { content: '๎ธ€'; } .ss-redirect:before, .ss-redirect.right:after { content: 'โ†ช'; } .ss-expand:before, .ss-expand.right:after { content: 'โคข'; } .ss-contract:before, .ss-contract.right:after { content: '๎ธ'; } .ss-help:before, .ss-help.right:after { content: 'โ“'; } .ss-info:before, .ss-info.right:after { content: 'โ„น'; } .ss-alert:before, .ss-alert.right:after { content: 'โš '; } .ss-caution:before, .ss-caution.right:after { content: 'โ›”'; } .ss-logout:before, .ss-logout.right:after { content: '๎ธ‚'; } .ss-plus:before, .ss-plus.right:after { content: '+'; } .ss-hyphen:before, .ss-hyphen.right:after { content: '-'; } .ss-check:before, .ss-check.right:after { content: 'โœ“'; } .ss-delete:before, .ss-delete.right:after { content: 'โก'; } .ss-settings:before, .ss-settings.right:after { content: 'โš™'; } .ss-dashboard:before, .ss-dashboard.right:after { content: '๏€€'; } .ss-notifications:before, .ss-notifications.right:after { content: '๐Ÿ””'; } .ss-notificationsdisabled:before, .ss-notificationsdisabled.right:after { content: '๐Ÿ”•'; } .ss-clock:before, .ss-clock.right:after { content: 'โฒ'; } .ss-stopwatch:before, .ss-stopwatch.right:after { content: 'โฑ'; } .ss-calendar:before, .ss-calendar.right:after { content: '๐Ÿ“…'; } .ss-addcalendar:before, .ss-addcalendar.right:after { content: '๏ฐ'; } .ss-removecalendar:before, .ss-removecalendar.right:after { content: '๏ฑ'; } .ss-checkcalendar:before, .ss-checkcalendar.right:after { content: '๏ฒ'; } .ss-deletecalendar:before, .ss-deletecalendar.right:after { content: '๏ณ'; } .ss-briefcase:before, .ss-briefcase.right:after { content: '๐Ÿ’ผ'; } .ss-cloud:before, .ss-cloud.right:after { content: 'โ˜'; } .ss-droplet:before, .ss-droplet.right:after { content: '๐Ÿ’ง'; } .ss-flask:before, .ss-flask.right:after { content: '๏“€'; } .ss-up:before, .ss-up.right:after { content: 'โฌ†'; } .ss-upright:before, .ss-upright.right:after { content: 'โฌˆ'; } .ss-right:before, .ss-right.right:after { content: 'โžก'; } .ss-downright:before, .ss-downright.right:after { content: 'โฌŠ'; } .ss-down:before, .ss-down.right:after { content: 'โฌ‡'; } .ss-downleft:before, .ss-downleft.right:after { content: 'โฌ‹'; } .ss-left:before, .ss-left.right:after { content: 'โฌ…'; } .ss-upleft:before, .ss-upleft.right:after { content: 'โฌ‰'; } .ss-navigateup:before, .ss-navigateup.right:after { content: '๏”€'; } .ss-navigateright:before, .ss-navigateright.right:after { content: 'โ–ป'; } .ss-navigatedown:before, .ss-navigatedown.right:after { content: '๏”'; } .ss-navigateleft:before, .ss-navigateleft.right:after { content: 'โ—…'; } .ss-directup:before, .ss-directup.right:after { content: 'โ–ด'; } .ss-directright:before, .ss-directright.right:after { content: 'โ–น'; } .ss-dropdown:before, .ss-dropdown.right:after { content: 'โ–พ'; } .ss-directleft:before, .ss-directleft.right:after { content: 'โ—ƒ'; } .ss-retweet:before, .ss-retweet.right:after { content: '๏˜€'; } /* Legacy classes */ .ss-volumelow:before, .ss-volumelow.right:after { content: '๐Ÿ”‰'; } .ss-volumehigh:before, .ss-volumehigh.right:after { content: '๐Ÿ”Š'; } .ss-batteryhigh:before, .ss-batteryhigh.right:after { content: '๎จ'; } .ss-batterymedium:before, .ss-batterymedium.right:after { content: '๎จ‘'; } .ss-batterylow:before, .ss-batterylow.right:after { content: '๎จ’'; } .ss-batteryempty:before, .ss-batteryempty.right:after { content: '๎จ“'; } .ss-clouddownload:before, .ss-clouddownload.right:after { content: '๎ฌ€'; } .ss-cloudupload:before, .ss-cloudupload.right:after { content: '๎ญ€'; } .ss-calendaradd:before, .ss-calendaradd.right:after { content: '๏ฐ'; } .ss-calendarremove:before, .ss-calendarremove.right:after { content: '๏ฑ'; } .ss-calendarcheck:before, .ss-calendarcheck.right:after { content: '๏ฒ'; } .ss-calendardelete:before, .ss-calendardelete.right:after { content: '๏ณ'; } html { height: 100%; } body { font-family: Arial, sans-serif; color: black; background: white; } body.evaluation { background: #f4f4f4; padding-top: 105px; } @media (max-width: 767px) { body.evaluation { padding-top: 0; } } @media (min-width: 768px) and (max-width: 1023px) { body.evaluation { padding-top: 185px; } } body.thanks { padding-top: 105px; } @media (max-width: 767px) { body.thanks { padding-top: 0; } } @media (min-width: 768px) and (max-width: 1023px) { body.thanks { padding-top: 185px; } } .icon { font-size: 0; line-height: 0; color: rgba(255, 255, 255, 0); display: block; text-indent: -9999px; } a:link, a:visited { color: #ca2f2b; text-decoration: none; } a:hover { text-decoration: underline; } /* Typography */ strong { font-weight: 700; } em { font-style: italic; } p, ol li { color: #4d4f4e; font-family: "ff-meta-serif-web-pro", Georgia, serif; font-weight: 500; font-size: 1.125em; line-height: 1.555555556em; margin-bottom: 1.388888889em; } @media (max-width: 567px) { p, ol li { font-size: 1em; font-style: normal; text-transform: none; } } p a:link, p a:visited, ol li a:link, ol li a:visited { color: #ca2f2b; text-decoration: none; } p a:hover, ol li a:hover { text-decoration: underline; } ol { list-style: decimal; padding-left: 2em; } blockquote { color: #4d4f4e; font-family: "ff-meta-serif-web-pro", Georgia, serif; font-weight: 500; font-size: 1.125em; line-height: 1.666666667em; margin-bottom: 0; text-indent: .375em; font-style: italic; } h1 { color: #4d4f4e; font-family: "ff-meta-serif-web-pro", Georgia, serif; font-weight: 500; font-style: normal; font-size: 1.625em; line-height: 1.923076923em; margin-bottom: .384615385em; -moz-font-feature-settings: "liga=1, onum=1, kern=1"; -ms-font-feature-settings: "liga" 1, "onum" 1, "kern" 1; -webkit-font-feature-settings: "liga" 1, "onum" 1, "kern" 1; -o-font-feature-settings: "liga" 1, "onum" 1, "kern" 1; font-feature-settings: "liga" 1, "onum" 1, "kern" 1; } h2 { color: #ca2f2b; font-family: "proxima-nova", sans-serif; font-weight: 700; font-style: normal; font-size: 1em; line-height: 1.875em; margin-bottom: .625em; text-transform: uppercase; letter-spacing: 2px; } h3 { color: #4d4f4e; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 1em; line-height: 1.285714286em; margin-bottom: .5em; } .grayText { color: #bbc0be; } .ss-icon { font-size: 0.5em; } /* Layout */ #top { background: white; width: 100%; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); position: relative; } #top nav { width: 940px; padding-left: 10px; padding-right: 10px; margin: 0 auto; *zoom: 1; } #top nav:before, #top nav:after { content: " "; display: table; } #top nav:after { clear: both; } @media (max-width: 567px) { #top nav { width: 100%; padding-left: 0; padding-right: 0; margin: 0 auto; } } @media (min-width: 568px) and (max-width: 860px) { #top nav { width: 81%; padding-left: 2%; padding-right: 2%; margin: 0 7.5%; } } @media (min-width: 861px) and (max-width: 1023px) { #top nav { width: 89%; padding-left: 1%; padding-right: 1%; margin: 0 4.5%; } } #top nav h2 { float: left; margin-top: 18px; } #top nav h2 a { margin: 0 auto; display: block; background: url(/assets/img/arlogo.png); width: 200px; height: 66px; text-indent: -9999em; } @media (max-width: 860px) { #top nav h2 { float: none; margin-left: auto; margin-right: auto; } } #top nav h2 sup { font-size: 8px; letter-spacing: 0; vertical-align: baseline; position: relative; top: -0.5em; left: -0.4em; } #top nav #homeButtons { float: right; padding-top: 31px; padding-bottom: 31px; overflow: auto; } @media (max-width: 567px) { #top nav #homeButtons { float: none; padding-top: 26px; padding-bottom: 26px; } } @media (min-width: 568px) and (max-width: 768px) { #top nav #homeButtons { float: none; padding-top: 26px; padding-bottom: 46px; overflow: auto; margin: 0 auto; width: 440px; } } @media (min-width: 769px) and (max-width: 860px) { #top nav #homeButtons { float: none; padding-top: 26px; padding-bottom: 46px; overflow: auto; margin: 0 auto; width: 465px; } } #top nav #homeButtons li { float: left; margin-left: 20px; } @media (max-width: 768px) { #top nav #homeButtons li { float: none; margin-left: 0; margin-bottom: 18px; text-align: center; } } @media (min-width: 769px) and (max-width: 1023px) { #top nav #homeButtons li { float: left; } } @media (max-width: 768px) { #top nav #homeButtons li a { display: inline-block; } } #top nav #homeButtons li a.book { padding-left: 46px; background-image: url(../img/bookSmall.png); background-repeat: no-repeat; background-position: 17px center; } #top nav #homeButtons li:first-child { margin-left: 0; } .evaluation #top, .thanks #top { position: fixed; top: 0; z-index: 2; } @media (max-width: 767px) { .evaluation #top, .thanks #top { position: relative; } } .results #top { height: 105px; } @media (max-width: 1023px) { .results #top { position: relative; height: 145px; } } .content { width: 940px; padding-left: 10px; padding-right: 10px; margin: 0 auto; } @media (max-width: 567px) { .content { width: 88.6%; padding-left: 0; padding-right: 0; margin: 0 5.7%; } } @media (min-width: 568px) and (max-width: 767px) { .content { width: 81%; padding-left: 2%; padding-right: 2%; margin: 0 7.5%; } } @media (min-width: 768px) and (max-width: 1023px) { .content { width: 89%; padding-left: 1%; padding-right: 1%; margin: 0 4.5%; } } #landingIntro { width: 100%; background: #ca2f2b; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); } #landingIntro .content { padding: 25px 0; *zoom: 1; } #landingIntro .content:before, #landingIntro .content:after { content: " "; display: table; } #landingIntro .content:after { clear: both; } #landingIntro h1, #landingIntro h2, #landingIntro p, #landingIntro ul, #landingIntro ol { color: white; } #landingIntro h1 { font-family: "proxima-nova", sans-serif; font-size: 2.625em; font-weight: 700; text-transform: uppercase; } @media (max-width: 567px) { #landingIntro h1 { font-size: 1.5em; line-height: 1.2em; } } @media (min-width: 568px) and (max-width: 767px) { #landingIntro h1 { font-size: 2em; line-height: 1.2em; } } #landingIntro ul { list-style-type: none; font-family: "ff-meta-serif-web-pro", Georgia, serif; font-weight: 500; font-size: 1.125em; line-height: 1.555555556em; margin-left: 0px; margin-bottom: 1.388888889em; } #landingIntro ul li:before { content: 'โ€ข'; font-size: .8em; margin-right: 10px; position: relative; top: -2px; } @media (max-width: 567px) { #landingIntro ul { font-size: 1em; font-style: normal; text-transform: none; } } #carouselHero { overflow: hidden; position: relative; } @media (max-width: 567px) { #carouselHero #sliderNav .content { padding-left: 0; padding-right: 0; width: 100%; } } @media (min-width: 568px) and (max-width: 767px) { #carouselHero #sliderNav .content { padding-left: 0; padding-right: 0; width: 100%; } } #carouselHero .callToAction { font-family: "proxima-nova", sans-serif; font-weight: 700; font-style: normal; font-size: .9375em; line-height: 1.4em; margin-bottom: .625em; text-transform: uppercase; } #carouselHero #leftBackground, #carouselHero #rightBackground { position: absolute; width: 15%; height: 358px; top: 72px; display: block; } @media (max-width: 567px) { #carouselHero #leftBackground, #carouselHero #rightBackground { width: 10%; } } #carouselHero #leftBackground { left: 0; z-index: 7; background-color: transparent !important; background-color: white; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(left, white, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right,white, rgba(255, 255, 255, 0)); } #carouselHero #rightBackground { right: 0; z-index: 7; background-color: transparent; background-color: rgba(255, 255, 255, 0); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white); background-image: linear-gradient(to right,rgba(255, 255, 255, 0), white); } .no-cssgradients #leftBackground, .no-cssgradients #rightBackground { background: transparent url(../img/leftFade.png) repeat-y left top; background-size: 100% 1px; } .no-cssgradients #rightBackground { background-image: url(../img/rightFade.png); } #sliderNav { background-color: #f4f4f4; width: 100%; height: 70px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05); border-bottom: 1px solid #cdcdcd; } /* Carousel */ /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } /* FlexSlider Necessary Styles *********************************/ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } #carousel .slides { padding-top: 20px; } #carousel .slides li { width: auto !important; text-align: center; margin-right: 34px; height: 56px; } @media (max-width: 567px) { #carousel .slides li { margin-left: 17px; margin-right: 17px; } } @media (min-width: 568px) and (max-width: 767px) { #carousel .slides li { margin-left: 17px; margin-right: 17px; } } #carousel .slides li a { color: #a7adb1; font-family: "ff-meta-serif-web-pro", Georgia, serif; text-transform: uppercase; font-style: italic; font-size: .75em; } #carousel .slides li a span { color: #4d4f4e; font-family: "proxima-nova", sans-serif; font-weight: 700; font-style: normal; font-size: 1.25em; } #carousel .slides li a:hover { text-decoration: none; } #carousel .slides li.flex-active-slide { background: transparent url(../img/carouselArrow.png) no-repeat center bottom; } #carousel .slides li.flex-active-slide a { color: #ca2f2b; } #carousel .slides li.flex-active-slide a span { color: #ca2f2b; } #carousel .slides li:last-child { margin-right: 0; } #slider .slides li { height: 358px; overflow: auto; } @media (max-width: 567px) { #slider .slides li { background-position: center 25px; background-size: 40% auto; height: 540px; } } #slider .slides li img { float: left; margin-top: 28px; margin-left: 11%; max-width: 25%; max-height: 300px; } @media (max-width: 567px) { #slider .slides li img { margin: 25px auto 0; max-width: 226px; float: none; } } @media (min-width: 568px) and (max-width: 767px) { #slider .slides li img { margin-left: 10%; width: 30%; margin-top: 75px; } } @media (min-width: 768px) and (max-width: 1023px) { #slider .slides li img { margin-top: 75px; } } #slider .slides li div { margin-left: 7%; margin-right: 14%; margin-top: 114px; width: 43%; float: left; } @media (max-width: 567px) { #slider .slides li div { margin-left: 10%; margin-right: 10%; margin-top: 25px; width: 80%; float: none; } } @media (min-width: 568px) and (max-width: 767px) { #slider .slides li div { margin-left: 10%; margin-right: 5%; margin-top: 80px; width: 45%; } } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme *********************************/ .flexslider { margin: 0; background: transparent; position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } #slider .flex-viewport { overflow: visible !important; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav { *height: 0; } .flex-direction-nav a { width: 27px; height: 40px; margin: -20px 0 0; display: block; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: .4; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 567px) { .flex-direction-nav a { opacity: .3; width: 26px; height: 20px; margin: -10px 0 0; background-size: 13px auto; } } .flex-direction-nav .flex-next { background: url(../img/rightArrow.png) no-repeat center center; right: -20px; } @media (max-width: 567px) { .flex-direction-nav .flex-next { right: 25px; } } @media (min-width: 568px) and (max-width: 767px) { .flex-direction-nav .flex-next { right: -25px; } } .flex-direction-nav .flex-prev { background: url(../img/leftArrow.png) no-repeat center center; left: -20px; } @media (max-width: 567px) { .flex-direction-nav .flex-prev { left: 25px; } } @media (min-width: 568px) and (max-width: 767px) { .flex-direction-nav .flex-prev { left: -25px; } } .flexslider:hover .flex-next { opacity: 0.4; right: -25px; } @media (max-width: 567px) { .flexslider:hover .flex-next { right: 0; } } @media (min-width: 568px) and (max-width: 767px) { .flexslider:hover .flex-next { right: -5px; } } .flexslider:hover .flex-prev { opacity: 0.4; left: -25px; } @media (max-width: 567px) { .flexslider:hover .flex-prev { left: 0; } } @media (min-width: 568px) and (max-width: 767px) { .flexslider:hover .flex-prev { left: -5px; } } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: .2!important; filter: alpha(opacity=20); cursor: default; } /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 0; } .flex-direction-nav .flex-next { opacity: 1; right: 0; } } #meetErik { width: 100%; background: black; padding: 75px 0 65px; position: relative; overflow: hidden; background-repeat: no-repeat; background-position: top right; background-size: auto 100%; } @media (max-width: 567px) { #meetErik { background-position: right top; background-size: 475px auto; padding: 300px 0 30px; } } #meetErik .content { *zoom: 1; } #meetErik .content:before, #meetErik .content:after { content: " "; display: table; } #meetErik .content:after { clear: both; } #meetErik .content div { width: 50%; } @media (max-width: 567px) { #meetErik .content div { width: 100%; } } @media (min-width: 568px) and (max-width: 650px) { #meetErik .content div { width: 100%; } } #meetErik .content h2 { line-height: 1.2em; } #meetErik .content p { color: white; margin-bottom: 0; } #meetErik .content a { color: white; text-decoration: underline; } #meetErik .content a:hover { color: #ca2f2b; } #beginEvaluation .content { padding: 90px 0; text-align: center; *zoom: 1; } #beginEvaluation .content:before, #beginEvaluation .content:after { content: " "; display: table; } #beginEvaluation .content:after { clear: both; } @media (max-width: 567px) { #beginEvaluation .content { padding: 60px 0; } } @media (min-width: 568px) and (max-width: 767px) { #beginEvaluation .content { padding: 60px 0; } } #beginEvaluation h1 { font-size: 2em; text-align: center; width: 75%; margin: 0 auto 0.5em; line-height: 1.4em; } @media (max-width: 567px) { #beginEvaluation h1 { font-size: 2em; line-height: 1.3em; } } @media (max-width: 767px) { #beginEvaluation h1 { width: 100%; } } #beginEvaluation p { text-align: center; } #beginEvaluation a.button { font-size: 1.375em; padding: 18px 18px; display: inline-block; } @media (max-width: 567px) { #beginEvaluation a.button { font-size: .875em; width: 55%; padding-left: 2.5%; padding-right: 2.5%; text-align: center; } } @media (min-width: 568px) and (max-width: 767px) { #beginEvaluation a.button { width: 55%; padding-left: 2.5%; padding-right: 2.5%; text-align: center; } } @media (min-width: 768px) and (max-width: 1023px) { #beginEvaluation a.button { width: 30%; padding-left: 2.5%; padding-right: 2.5%; text-align: center; } } #amazonLink { overflow: hidden; text-align: center; } #amazonLink .content { border-top: 2px solid rgba(0, 0, 0, 0.05); } #amazonLink .book { padding: 80px 0 80px 90px; position: relative; display: inline-block; } #amazonLink h1 { text-align: left; line-height: 1em; margin-bottom: 0; } @media (max-width: 567px) { #amazonLink h1 { font-size: 1.325em; } } #amazonLink img { position: absolute; left: 0; margin-top: -35px; } @media (max-width: 567px) { #amazonLink img { margin-top: -25px; } } @media (min-width: 568px) and (max-width: 767px) { #amazonLink img { margin-top: -20px; } } footer { padding-bottom: 60px; } footer p { text-align: center; font-size: 1em; color: rgba(77, 79, 78, 0.3); } footer a:link, footer a:visited { color: rgba(77, 79, 78, 0.3); text-decoration: underline; } /* Buttons */ a.button, input.button { border-radius: 3px; font-family: "proxima-nova",sans-serif; font-weight: 700; font-size: .875em; padding: 14px 16px; display: block; border: none; } @media (max-width: 567px) { input.button { padding: 10px 16px; } } @media (min-width: 568px) and (max-width: 767px) { input.button { padding: 10px 16px; } } @media (min-width: 768px) and (max-width: 1023px) { input.button { padding: 10px 16px; } } a.button:hover, input.button:hover { text-decoration: none; } a.gray, input.gray { background-color: #f2f2f2; box-shadow: 0 3px 0 #e4e4e4; color: #acaead; } a.gray:hover, input.gray:hover { background-color: #f5f5f5; box-shadow: 0 3px 0 #e4e4e4, 0 0 5px rgba(0, 0, 0, 0.06); } a.gray:active, input.gray:active { box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.1); } a.green, input.green { background-color: #87b8b1; box-shadow: 0 3px 0 #77a09a; color: white; } a.green:hover, input.green:hover { background-color: #9ed1ca; box-shadow: 0 3px 0 #77a09a, 0 0 5px rgba(0, 0, 0, 0.08); } a.green:active, input.green:active { box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.2); } a.red, input.red { background-color: #ca2f2b; box-shadow: 0 3px 0 #971f1a; color: white; } a.red:hover, input.red:hover { background-color: #e53d35; box-shadow: 0 3px 0 #971f1a, 0 0 5px rgba(0, 0, 0, 0.14); } a.red:active, input.red:active { box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.2); } /* Progress Bar */ @-webkit-keyframes sampleProgress { 0% { width: 0%; } 100% { width: 33%; } } @-moz-keyframes sampleProgress { 0% { width: 0%; } 100% { width: 33%; } } @-o-keyframes sampleProgress { 0% { width: 0%; } 100% { width: 33%; } } @keyframes sampleProgress { 0% { width: 0%; } 100% { width: 33%; } } #evaluationProgress { height: 73px; width: 340px; float: right; margin-right: 32%; padding-top: 32px; overflow: auto; } @media (max-width: 567px) { #evaluationProgress { float: none; margin: 0 auto; width: 300px; } } @media (min-width: 568px) and (max-width: 767px) { #evaluationProgress { float: none; margin: 0 auto; } } @media (min-width: 768px) and (max-width: 1023px) { #evaluationProgress { float: none; margin: 0 auto; } } #evaluationProgress #progressBar { overflow: auto; } #evaluationProgress #progressBar div { float: left; } #evaluationProgress #progressBar #backgroundNode, #evaluationProgress #progressBar #evaluationNode, #evaluationProgress #progressBar #resultsNode { width: 16px; height: 16px; border-radius: 10px; border: 2px dashed #ca2f2b; } #evaluationProgress #progressBar #backgroundNode { margin-left: 39px; } #evaluationProgress #progressBar #resultsNode { margin-right: 39px; } #evaluationProgress #progressBar #backgroundNode.completed, #evaluationProgress #progressBar #evaluationNode.completed, #evaluationProgress #progressBar #resultsNode.completed, #evaluationProgress #progressBar #backgroundNode.current, #evaluationProgress #progressBar #evaluationNode.current, #evaluationProgress #progressBar #resultsNode.current { border: 2px solid #ca2f2b; background: #ca2f2b; } #evaluationProgress #progressBar #backgroundNode.completed, #evaluationProgress #progressBar #evaluationNode.completed, #evaluationProgress #progressBar #resultsNode.completed { background: #ca2f2b url(../img/check.png) no-repeat center center; } #evaluationProgress #progressBar #firstField, #evaluationProgress #progressBar #secondField { width: 100px; height: 20px; background: transparent url(../img/progressBackground.gif) repeat-x left 9px; overflow: auto; } @media (max-width: 567px) { #evaluationProgress #progressBar #firstField, #evaluationProgress #progressBar #secondField { width: 80px; } } #evaluationProgress #progressBar .progress-bar { float: left; height: 3px; background: #ca2f2b; width: 0%; margin-top: 8px; } #evaluationProgress #progressBar .completed .progress-bar { width: 100%; } #evaluationProgress #progressLabels { padding-top: 8px; width: 100%; overflow: hidden; } #evaluationProgress #progressLabels span { color: #818181; font-family: "proxima-nova", sans-serif; font-size: .8125em; font-weight: 700; text-transform: uppercase; line-height: 1em; float: left; width: 33%; } #evaluationProgress #progressLabels span.one { text-align: left; } #evaluationProgress #progressLabels span.two { text-align: center; } #evaluationProgress #progressLabels span.three { text-align: right; width: 27%; padding-right: 6%; } #evaluationProgress #progressLabels span.completed { text-decoration: line-through; color: rgba(129, 129, 129, 0.3); } #evaluationProgress #progressLabels span.current { color: #ca2f2b; } /* Form styling */ @-webkit-keyframes alertFade { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes alertFade { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes alertFade { from { opacity: 0; } to { opacity: 1; } } @keyframes alertFade { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes alertPop { 0% { -webkit-transform: scale(0); opacity: 0; } 66% { -webkit-transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: translateX(1); opacity: 0; } } @-moz-keyframes alertPop { 0% { -moz-transform: scale(0); opacity: 0; } 66% { -moz-transform: scale(1.2); opacity: 1; } 100% { -moz-transform: translateX(1); opacity: 0; } } @-o-keyframes alertPop { 0% { -o-transform: scale(0); opacity: 0; } 66% { -o-transform: scale(1.2); opacity: 1; } 100% { -o-transform: translateX(1); opacity: 0; } } @keyframes alertPop { 0% { transform: scale(0); opacity: 0; } 66% { transform: scale(1.2); opacity: 1; } 100% { transform: translateX(1); opacity: 0; } } @media (max-width: 567px) { .evaluation .content { width: 100%; padding-left: 0; padding-right: 0; margin: 0 auto; } } #formHeader { width: 73%; margin: 48px auto 24px; } @media (max-width: 567px) { #formHeader { width: 88.6%; padding: 0 5.7%; } } @media (min-width: 568px) and (max-width: 767px) { #formHeader { width: 80%; } } #formHeader h1 { margin-bottom: 0; } .evalForm { border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.07); width: 73%; margin: 0 auto 60px; background: white; } @media (max-width: 567px) { .evalForm { width: 100%; margin: 0 auto 60px; border-radius: 0; } } @media (min-width: 568px) and (max-width: 767px) { .evalForm { width: 80%; margin: 0 auto 60px; } } .evalForm .formSection { padding: 0 5.7% 40px; position: relative; overflow: auto; } .evalForm .formSection p { padding-top: 40px; } .evalForm .formSection a.button { width: 37%; text-align: center; line-height: 1.285714286em; padding: 14px 5%; margin: 0 5% 0 0; display: inline-block; position: relative; vertical-align: top; } .evalForm .formSection a.button span { left: 10%; margin: 0; display: block; width: 80%; } @media (max-width: 767px) { .evalForm .formSection a.button { width: 90%; margin: 0 0 18px 0; float: none; } } .evalForm .formSection input[type="radio"] { display: none; -webkit-appearance: none; } .evalForm .formSection a.button:last-of-type { margin-right: 0; } @media (max-width: 567px) { .evalForm .formSection a.button:last-of-type { margin-bottom: 0px; } } .evalForm .formSection .attention { display: none; width: 77px; height: 70px; margin: 0; color: white; padding: 25px 23px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: url(../img/alert.png); background-repeat: 0; } @media (max-width: 567px) { .evalForm .formSection .attention { padding: 20px 18px; } } .evalForm .formSection .attention span.ss-icon { font-size: 1.5em; } .evalForm .formSection + .formSection p { border-top: 2px solid rgba(0, 0, 0, 0.05); } .evalForm .formSection:first-of-type p { border-top: none; } .evalForm .formSection.alertAfter p { border-top: none; } .evalForm .formSection.bottom { padding-bottom: 40px; padding-top: 40px; border-top: 2px solid #f2f2f2; background: #fafafa; } .evalForm .formSection.bottom input { float: right; } .evalForm .formSection.alert { background-color: #fffff7; border-top: 2px solid rgba(0, 0, 0, 0.05); border-bottom: 2px solid rgba(0, 0, 0, 0.05); overflow: visible; } .evalForm .formSection.alert + .alert { border-top: 0; } .evalForm .formSection.alert.last { border-bottom: 0; } .evalForm .formSection.alert.first, .evalForm .formSection.alert p { border-top: 0; } .evalForm .formSection.alert .attention { display: block; position: absolute; top: 50%; margin-top: -35px; left: -80px; -webkit-animation: alertFade 1.5s ease; -moz-animation: alertFade 1.5s ease; animation: alertFade 1.5s ease; } @media (max-width: 567px) { .evalForm .formSection.alert .attention { width: 60px; height: 60px; background-position: -5px center; left: 50%; margin-top: -30px; margin-left: -30px; border-radius: 3px; opacity: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); -webkit-animation: alertPop 1.5s ease; -moz-animation: alertPop 1.5s ease; animation: alertPop 1.5s ease; } } .evalForm .formSection.alert .attention:hover { cursor: pointer; } .evalForm .checkboxSection { font-size: .875em; line-height: 1.414285714em; font-family: "ff-meta-serif-web-pro", Georgia, serif; overflow: auto; } .evalForm .checkboxSection input { position: relative; top: 3px; margin-bottom: 6px; -webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; -o-appearance: checkbox; appearance: checkbox; float: left; margin-bottom: 8px; clear: both; } .evalForm .checkboxSection label { margin-left: 12px; padding-top: 1px; float: left; } @media (max-width: 567px) { .evalForm .checkboxSection label { width: 80%; } } .evalForm .selectStyle { overflow: hidden; /* this hides the select's drop button */ padding: 0; margin: 0; width: 55%; background: white url(../img/formelementsSelect.png) no-repeat 94% center; /* this is the new drop button, in image form */ border-radius: 3px; box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.02); border: solid 1px #e7e7e7; } @media (max-width: 567px) { .evalForm .selectStyle { width: 100%; } } @media (min-width: 568px) and (max-width: 767px) { .evalForm .selectStyle { width: 80%; } } .evalForm .selectStyle select { width: 115%; background-color: transparent; background-image: none; -webkit-appearance: none; border: none; box-shadow: none; padding: 0.78em 1em; /* padding should be added to the select, not the div */ font-size: .875em; font-family: "ff-meta-serif-web-pro", Georgia, serif; color: #acaead; outline: none; } .evalForm a.submit { cursor: pointer; width: inherit !important; margin-right: 0; float: right; min-height: inherit !important; height: inherit; padding: inherit; } .evalForm input[type="text"] { width: 100%; border-radius: 3px; box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.02); border: solid 1px #e7e7e7; padding: 0.78em 2%; font-size: .875em; font-family: "ff-meta-serif-web-pro", Georgia, serif; color: #acaead; outline: none; margin-bottom: 18px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .alert + div > p { border-top: none !important; } em.alert { display: none !important; } @-webkit-keyframes alertSlideUp { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } @-moz-keyframes alertSlideUp { from { -moz-transform: translateY(100%); } to { -moz-transform: translateY(0); } } @-o-keyframes alertSlideUp { from { -o-transform: translateY(100%); } to { -o-transform: translateY(0); } } @keyframes alertSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @-webkit-keyframes alertSlideDown { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(100%); } } @-moz-keyframes alertSlideDown { from { -moz-transform: translateY(0); } to { -moz-transform: translateY(100%); } } @-o-keyframes alertSlideDown { from { -o-transform: translateY(0); } to { -o-transform: translateY(100%); } } @keyframes alertSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } } .alertPopUp { display: none; width: 242px; position: fixed; bottom: 0; right: 40px; background: white; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.07); } .alertPopUp h3 { padding: 7% 16px; background: #fafafa; text-align: center; border-bottom: 2px solid rgba(0, 0, 0, 0.05); border-top-left-radius: 3px; border-top-right-radius: 3px; } .alertPopUp #alertList { padding: 0 4%; } .alertPopUp #alertList li { color: #4d4f4e; font-family: "ff-meta-serif-web-pro", Georgia, serif; font-size: .8125em; line-height: 1.692307692em; margin-bottom: 0; padding: 16px 6px; border-bottom: 2px solid rgba(0, 0, 0, 0.05); } .alertPopUp #alertList li:last-of-type { border-bottom: 0; } .alertPopUp #alertList li.strike { text-decoration: line-through; color: rgba(0, 0, 0, 0.4); } .alertPopUp.active { display: block; -webkit-animation: alertSlideUp 1s ease; -moz-animation: alertSlideUp 1s ease; animation: alertSlideUp 1s ease; } @media (max-width: 567px) { .alertPopUp.active { display: none; } } .alertPopUp.dismiss { -webkit-animation: alertSlideDown 1s ease; -moz-animation: alertSlideDown 1s ease; animation: alertSlideDown 1s ease; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* -------------------------------------------------- Reveal Modals -------------------------------------------------- */ #lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background: black; display: none; } .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0, 0, 0, 0.4); z-index: 100; display: none; top: 0; left: 0; } .reveal-modal { display: none; position: fixed; top: 50%; margin-top: -291px; left: 50%; margin-left: -343px; width: 686px; height: auto; background: white; z-index: 201; padding: 0; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.07); } @media (max-width: 568px) { .reveal-modal { width: 90%; margin: 0 5%; left: 0; top: 10px; } } @media (min-width: 569px) and (max-width: 767px) { .reveal-modal { margin: -221px 9.5% 0 9.5%; width: 81%; left: inherit; } } @media (min-width: 768px) and (max-width: 1023px) { .reveal-modal { margin: -230px 17.5% 0 17.5%; width: 65%; left: inherit; } } .reveal-modal h1 { line-height: 1em; padding: 36px 11.4% 30px 5.7%; margin-bottom: 32px; background: #fafafa; border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-top-left-radius: 3px; border-top-right-radius: 3px; position: relative; } @media (max-width: 767px) { .reveal-modal h1 { font-size: 1em; margin-bottom: 18px; padding: 18px 11.4% 18px 5.7%; } } @media (min-width: 768px) and (max-width: 1023px) { .reveal-modal h1 { font-size: 1.25em; margin-bottom: 24px; padding: 24px 11.4% 20px 5.7%; } } .reveal-modal h1 .modal_close { position: absolute; top: 50%; margin-top: -9px; right: 20px; width: 18px; height: 18px; border-radius: 9px; background: rgba(77, 79, 78, 0.6); font-size: 10px; line-height: 2em; padding: 0 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: white; display: block; cursor: pointer; } .reveal-modal h1 .modal_close:hover { text-decoration: none; background: #4d4f4e; } .reveal-modal p { padding: 0 0 30px; margin: 0 5.7% 40px; border-bottom: 2px solid #f2f2f2; } @media (max-width: 767px) { .reveal-modal p { font-size: .875em; margin: 0 5.7% 18px; padding: 0 0 18px; } } @media (min-width: 768px) and (max-width: 1023px) { .reveal-modal p { font-size: 1em; margin: 0 5.7% 24px; padding: 0 0 24px; } } .reveal-modal form { overflow: auto; } .reveal-modal form .emailFormFooter { margin-top: 26px; background: #fafafa; border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; padding: 40px; overflow: auto; } @media (max-width: 567px) { .reveal-modal form .emailFormFooter { padding: 14px 5.7%; } } @media (min-width: 568px) and (max-width: 767px) { .reveal-modal form .emailFormFooter { margin-top: 18px; padding: 18px 5.7%; } } @media (min-width: 768px) and (max-width: 1023px) { .reveal-modal form .emailFormFooter { margin-top: 24px; padding: 24px 40px; } } .reveal-modal form .emailFormFooter input.button { float: right; cursor: pointer; min-height: inherit !important; } .email-text-fields { *zoom: 1; } .email-text-fields:before, .email-text-fields:after { content: " "; display: table; } .email-text-fields:after { clear: both; } .email-text-fields label, .email-text-fields input[type="text"] { float: left; } @media (max-width: 567px) { .email-text-fields label, .email-text-fields input[type="text"] { float: none; } } .email-text-fields label { margin-left: 5.7%; width: 17.3%; font-family: "ff-meta-serif-web-pro", Georgia, serif; font-size: 1em; color: #4d4f4e; font-weight: 700; line-height: 2.8em; } @media (max-width: 767px) { .email-text-fields label { width: 88.6%; font-size: .875em; line-height: 1em; margin-bottom: .25em; } } .email-text-fields label.alert { color: #ca2f2b; } .email-text-fields input[type="text"] { width: 67.3%; border-radius: 3px; box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.02); border: solid 1px #e7e7e7; padding: 0.78em 2%; /* padding should be added to the select, not the div */ font-size: .875em; font-family: "ff-meta-serif-web-pro", Georgia, serif; color: #4d4f4e; outline: none; margin-bottom: 18px; } @media (max-width: 567px) { .email-text-fields input[type="text"] { margin-bottom: 14px; } } @media (min-width: 568px) and (max-width: 767px) { .email-text-fields input[type="text"] { padding: 0.6em 2%; margin-bottom: 16px; } } @media (max-width: 767px) { .email-text-fields input[type="text"] { width: 84.6%; margin-left: 5.7%; } } @media (max-width: 1023px) { .email-text-fields input[type="text"]:last-of-type { margin-bottom: 0; } } .email-text-fields input[type="text"]:focus { border-color: #ca2f2b; } .email-text-fields .checkboxSection { margin-left: 23%; overflow: hidden; clear: both; } @media (max-width: 1023px) { .email-text-fields .checkboxSection { padding-top: 10px; } } @media (max-width: 768px) { .email-text-fields .checkboxSection { margin-left: 5.7%; } } .email-text-fields .checkboxSection input { position: relative; top: 3px; margin-bottom: 6px; -webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; -o-appearance: checkbox; appearance: checkbox; float: left; margin-bottom: 8px; clear: both; } .email-text-fields .checkboxSection label { margin-left: 12px; padding-top: 1px; max-width: 80%; float: left; display: inline-block; font-size: .9em; line-height: 1.8em; width: auto; font-weight: 500; } .evalForm .email-text-fields { padding: 2em 0; } .reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6); font-weight: bold; cursor: pointer; } /* Thank You Page */ #thanksMessage { overflow: hidden; padding-top: 50px; background: #f4f4f4; } @media (max-width: 567px) { #thanksMessage { height: 150px; padding-top: 40px; } } @media (min-width: 568px) and (max-width: 767px) { #thanksMessage { font-size: 1em; font-size: 1.125em; } } #thanksMessage h1 { font-size: 2em; line-height: 1.3125em; } @media (max-width: 567px) { #thanksMessage h1 { font-size: 1.625em; line-height: 1.923076923em; margin-bottom: 0; } } @media (min-width: 568px) and (max-width: 767px) { #thanksMessage h1 { font-size: 1.625em; line-height: 1.923076923em; margin-bottom: 0; } } #thanksMessage p { font-size: 1.375em; } @media (max-width: 567px) { #thanksMessage p { font-size: 1em; font-size: 1.125em; } } @media (min-width: 568px) and (max-width: 767px) { #thanksMessage p { font-size: 1em; font-size: 1.125em; } } #thanksAmazonLink { padding-top: 90px; height: 330px; } @media (max-width: 567px) { #thanksAmazonLink { padding-top: 50px; height: 490px; } } @media (min-width: 568px) and (max-width: 767px) { #thanksAmazonLink { font-size: 1em; font-size: 1.125em; } } #thanksAmazonLink img { float: left; margin-right: 48px; } @media (max-width: 567px) { #thanksAmazonLink img { float: none; width: 40%; margin: 0 30%; height: auto; } } #thanksAmazonLink h1 { padding-top: 40px; font-size: 2em; line-height: 1.3125em; } @media (max-width: 567px) { #thanksAmazonLink h1 { font-size: 1.625em; line-height: 1.5em; } } @media (min-width: 568px) and (max-width: 767px) { #thanksAmazonLink h1 { font-size: 1.625em; line-height: 1.5em; padding-top: 0px; } } #thanksAmazonLink p { font-size: 1.375em; line-height: 1.909090909em; } @media (max-width: 567px) { #thanksAmazonLink p { font-size: 1em; font-size: 1.125em; } } @media (min-width: 568px) and (max-width: 767px) { #thanksAmazonLink p { font-size: 1em; font-size: 1.125em; } } .thanks footer p { padding-top: 56px; border-top: 2px solid #f2f2f2; } /* Results Page */ #socialLinks { float: right; padding-top: 42px; *zoom: 1; } #socialLinks:before, #socialLinks:after { content: " "; display: table; } #socialLinks:after { clear: both; } @media (max-width: 1023px) { #socialLinks { margin: 0 auto; float: none; display: block; width: 240px; padding-top: 10px; } } #socialLinks li { float: left; margin-left: 20px; overflow: visible; } @media (max-width: 1023px) { #socialLinks li { width: 30%; text-align: center; margin-left: 0; margin-left: 5%; } } #socialLinks li a.email { font-size: .6875em; padding: 3px 4px 3px 4px; width: 40px; display: block; float: right; } #socialLinks li iframe.twitter-share-button { float: left; } #socialLinks li:first-of-type { margin-left: 0; } #congratulations { background: #2d3538; padding-top: 64px; overflow: hidden; } @media (max-width: 567px) { #congratulations { height: auto; padding-top: 32px; padding-bottom: 20px; } } #congratulations h1, #congratulations p.intro { text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); } #congratulations h1 { color: white; font-size: 2.625em; line-height: 1.285714286em; text-transform: uppercase; font-weight: 700; font-family: "proxima-nova", sans-serif; margin-bottom: .5em; } @media (max-width: 567px) { #congratulations h1 { font-size: 1.5em; line-height: 1.2em; margin-bottom: .5em; } } @media (min-width: 568px) and (max-width: 767px) { #congratulations h1 { font-size: 2em; line-height: 1.2em; margin-bottom: .5em; } } #congratulations p { color: white; } #congratulations p.intro { font-size: 1.5em; line-height: 1.366666667em; } @media (max-width: 567px) { #congratulations p.intro { font-size: 1em; line-height: 1.5em; font-style: normal; text-transform: none; } } @media (min-width: 568px) and (max-width: 767px) { #congratulations p.intro { font-size: 1.5em; line-height: 1.5em; margin-bottom: 75px; } } @media (min-width: 768px) and (max-width: 1023px) { #congratulations p.intro { font-size: 1.5em; line-height: 1.5em; } } #congratulations .result { width: 45%; float: left; text-align: center; } @media (max-width: 567px) { #congratulations .result { width: 70%; padding-left: 15%; padding-right: 15%; float: none; } } #congratulations .result img { margin-bottom: 30px; } @media (max-width: 567px) { #congratulations .result img { margin-bottom: 15px; } } #congratulations .result p { text-align: center; } #congratulations .result.left { border-right: 2px solid #313a3d; padding-right: 3.5%; } @media (max-width: 567px) { #congratulations .result.left { width: 70%; padding-left: 15%; padding-right: 15%; float: none; border-bottom: 2px solid #313a3d; border-right: none; } } #congratulations .result.right { padding-left: 3.5%; } @media (max-width: 567px) { #congratulations .result.right { width: 70%; padding-left: 15%; padding-right: 15%; margin-top: 30px; float: none; } } #downloadBand { padding-top: 62px; height: 130px; background: #22282a; overflow: auto; } @media (max-width: 567px) { #downloadBand { height: auto; overflow: auto; padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 568px) and (max-width: 767px) { #downloadBand { height: auto; overflow: auto; padding-top: 40px; padding-bottom: 30px; } } #downloadBand h1, #downloadBand p { color: white; } #downloadBand .content div { float: left; width: 60%; } @media (max-width: 567px) { #downloadBand .content div { float: none; width: 100%; } } #downloadBand h1 { font-size: 2em; line-height: 1em; } @media (max-width: 567px) { #downloadBand h1 { font-size: 1.625em; line-height: 1.5em; } } @media (min-width: 568px) and (max-width: 767px) { #downloadBand h1 { font-size: 1.625em; line-height: 1.5em; } } @media (min-width: 768px) and (max-width: 1023px) { #downloadBand h1 { font-size: 1.625em; line-height: 1.5em; } } #downloadBand p { font-size: 1.375em; line-height: 1.5em; } @media (max-width: 567px) { #downloadBand p { font-size: 1em; line-height: 1.5em; font-style: normal; text-transform: none; } } @media (min-width: 568px) and (max-width: 767px) { #downloadBand p { font-size: 1em; line-height: 1.5em; font-style: normal; text-transform: none; } } @media (min-width: 768px) and (max-width: 1023px) { #downloadBand p { font-size: 1em; line-height: 1.5em; font-style: normal; text-transform: none; } } #downloadBand a.button { float: right; margin-top: 8px; } @media (max-width: 567px) { #downloadBand a.button { font-size: inherit; line-height: inherit; float: none; } } @media (min-width: 568px) and (max-width: 767px) { #downloadBand a.button { font-size: inherit; line-height: inherit; } } @media (min-width: 768px) and (max-width: 1023px) { #downloadBand a.button { font-size: inherit; line-height: inherit; } } a.download { font-size: 1.375em; padding: 18px 2% 18px 2%; width: 31%; text-align: center; } @media (max-width: 567px) { a.download { margin-left: 7%; width: 80%; } } #results { padding: 70px 0 90px; } @media (max-width: 567px) { #results { padding: 12px 0 30px; } } #results #resultsContentWrapper { position: relative; display: block; overflow: hidden; padding-left: 0; padding-right: 0; } @media (max-width: 1023px) { #results #resultsContentWrapper { width: inherit; padding-left: 0; padding-right: 0; } } #results #resultsContentWrapper #my-nav { float: right; width: 32%; padding-left: 5%; min-height: 200px; margin-top: 20px; margin-bottom: 16px; } @media (max-width: 768px) { #results #resultsContentWrapper #my-nav { padding-left: 0; float: none; width: 100%; } } #results #resultsContentWrapper #my-nav ul { width: 100%; padding-bottom: 22px; border-bottom: 2px solid #f2f2f2; margin-bottom: 30px; } #results #resultsContentWrapper #my-nav ul li { width: 100%; margin-bottom: 10px; } #results #resultsContentWrapper #my-nav ul li.selected a { color: white; background: #ca2f2b; text-decoration: none; } #results #resultsContentWrapper #my-nav ul:last-of-type { border-bottom: none; } #results #resultsContentWrapper #my-nav h1 { font-size: 1em; line-height: 1em; font-family: "proxima-nova", sans-serif; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 10px; } #results #resultsContentWrapper #my-nav h1 a { color: #b8bdba; } #results #resultsContentWrapper #my-nav a { padding: 8px 5.3%; font-size: .875em; font-family: "proxima-nova", sans-serif; font-weight: 700; text-transform: uppercase; display: block; color: #4d4f4e; border-radius: 15px; } #results #resultsContentWrapper #my-nav a:hover { color: white; background: #ca2f2b; text-decoration: none; } @media (min-width: 768px) { #results #resultsContentWrapper #my-nav a.active { color: white; background: #ca2f2b; text-decoration: none; } } #results #resultsContentWrapper #resultsContent { margin-top: 20px; width: 62%; /*608px*/ /*32px*/ float: left; } @media (max-width: 768px) { #results #resultsContentWrapper #resultsContent { width: 100%; padding-right: 0; } } #results #resultsContentWrapper #resultsContent .artist-section { height: auto; overflow: visible; } #results #resultsContentWrapper #resultsContent .artist-section + .artist-section { padding-top: 20px; } #results #resultsContentWrapper #resultsContent h3 { text-transform: uppercase; } #results #resultsContentWrapper #resultsContent hr { border: 0; background: #f2f2f2; height: 2px; margin: 3em 0; } #results #resultsContentWrapper #scroll-footer { width: 100%; clear: both; } #downloadBandWhite .content div { padding-top: 64px; border-top: 2px solid #f2f2f2; } @media (max-width: 567px) { #downloadBandWhite .content div { padding-top: 32px; } } #downloadBandWhite .content div a.button { margin-left: 32.5%; margin-bottom: 64px; } @media (max-width: 567px) { #downloadBandWhite .content div a.button { font-size: inherit; line-height: inherit; float: none; margin-left: 7%; width: 80%; margin-bottom: 32px; } } @media (min-width: 568px) and (max-width: 767px) { #downloadBandWhite .content div a.button { font-size: inherit; line-height: inherit; margin-left: 17%; width: 60%; } } @media (min-width: 768px) and (max-width: 1023px) { #downloadBandWhite .content div a.button { font-size: inherit; line-height: inherit; } } #generic { padding: 60px 0; } .hidden { display: none; }