@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/** 1. Set default font family to sans-serif. 2. Prevent iOS and IE text size adjust after device 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; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** 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/10. Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability of focused elements when they are also in an active/hover state. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** 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/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
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; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  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 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 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/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

@font-face { font-family: 'simpleicons'; src: url("../fonts/simpleicons.eot?d9jell"); src: url("../fonts/simpleicons.eot?d9jell#iefix") format("embedded-opentype"), url("../fonts/simpleicons.ttf?d9jell") format("truetype"), url("../fonts/simpleicons.woff?d9jell") format("woff"), url("../fonts/simpleicons.svg?d9jell#simpleicons") format("svg"); font-weight: normal; font-style: normal; }
.social > a, i::before { color: rgba(50, 50, 50, 0.5); border: none; font-family: 'simpleicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-decoration: none; /* Enable Ligatures ================ */ letter-spacing: 0; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

i::before { color: white; }

.social-stumbleupon a:before { content: "\e901"; }

.social-facebook a:before { content: "\e902"; }

.social-pinterest a:before { content: "\e903"; }

.social-googleplus a:before { content: "\e904"; }

.social-vk a:before { content: "\e905"; }

.social-twitter a:before { content: "\e906"; }

i.social-twitter:before { content: "\e906"; }

i.social-facebook:before { content: "\e902"; }

/* ------- SVG -------- */
text { font-size: 19px; font-weight: normal; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; }

.background { fill: #8f8476; }

.artifact .s0 { fill: #cccccc; }
.artifact .s1 { fill: #b8b8b8; }
.artifact .s2 { fill: #a3a3a3; }
.artifact .s3 { fill: #8f8f8f; }
.artifact .s4 { fill: #7a7a7a; }
.artifact .t1 { fill: #e1dfdf; }
.artifact .t2 { fill: whitesmoke; }

.net { stroke-color: #ffffff; }

.shadow-casting-edge { color: black; }

body.list-view svg .advanced { display: none; }

#cardbox .background { fill: #d2b0d3; }
#cardbox .artifact .s0 { fill: #377180; }
#cardbox .artifact .s1 { fill: #346571; }
#cardbox .artifact .s2 { fill: #2f5863; }
#cardbox .artifact .s3 { fill: #2b4d56; }
#cardbox .artifact .s4 { fill: #254149; }
#cardbox .artifact .t1 { fill: #85abb5; }
#cardbox .artifact .t2 { fill: #d6e4e7; }

#trapezoid .background { fill: #377180; }
#trapezoid .artifact .s0 { fill: #e99f2c; }
#trapezoid .artifact .s1 { fill: #d08e2b; }
#trapezoid .artifact .s2 { fill: #b67e27; }
#trapezoid .artifact .s3 { fill: #9d6e25; }
#trapezoid .artifact .s4 { fill: #855e21; }
#trapezoid .artifact .t1 { fill: #f3c57f; }
#trapezoid .artifact .t2 { fill: #fcecd4; }

#ellipse .background { fill: #944e9e; }
#ellipse .artifact .s0 { fill: #eeeeee; }
#ellipse .artifact .s1 { fill: #d6d6d6; }
#ellipse .artifact .s2 { fill: #bebebe; }
#ellipse .artifact .s3 { fill: #a7a7a7; }
#ellipse .artifact .s4 { fill: #8f8f8f; }
#ellipse .artifact .t1 { fill: whitesmoke; }
#ellipse .artifact .t2 { fill: #fcfcfc; }

body { padding-bottom: 100px; }

#translation-modal .overlay { position: fixed; background-color: rgba(255, 255, 255, 0.8); top: 0; left: 0; right: 0; bottom: 0; z-index: 1002; }
#translation-modal .content { position: fixed; background-color: white; padding: 4em; width: 640px; margin-left: -320px; left: 50%; position: absolute; top: 80px; border-radius: 5px; z-index: 1003; box-shadow: 0px 1px 3px 3px rgba(0, 0, 0, 0.3); }

#translation-toolbar { position: fixed; bottom: 0; left: 0; right: 0; background-color: #944e9e; color: white; font-size: 14px; padding: 1em; border-top: 1px solid white; z-index: 1004; }
#translation-toolbar .form-line { display: inline-block; margin-left: 2em; }
#translation-toolbar button:disabled { opacity: 0.5; }

.form-line { margin-bottom: 1em; }
.form-line input { border: 2px solid white; color: white; background-color: #944e9e; padding: 0.25em 1em; border-radius: 3px; }

.trans-original { overflow: hidden; color: #888 !important; }

.label-toggle, .form-input label.label-toggle { font-size: 10px; text-decoration: underline; height: 20px; width: 20px; padding: 2px; margin: 4px; display: inline-block; }
.label-toggle img:hover { opacity: 0.5; }

.toggle-original, .form-input input.toggle-original { display: none; }
.toggle-original:checked + .trans-original, .form-input input.toggle-original:checked + .trans-original { display: none; max-height: 1000px; }

.trans { background-color: #e8f6ee; color: #1ca759; display: inline-block; }

.untranslated { background-color: #fcd6dc; color: #ee3351 !important; display: inline-block; }

.translated-locally { background-color: #d7e3e6; color: #377180 !important; display: inline-block; }

.trans textarea { min-width: 100px; min-height: 30px; }

#done-translating, #delete-local-storage { border: 2px solid white; background-color: #944e9e; color: white; border-radius: 3px; display: block; position: fixed; font-size: 10px; }

div.form-submit { background-color: white; padding: 0; border: 1px dotted silver; }

#done-translating { right: 10px; }

#delete-local-storage { right: 100px; }

img { max-width: 100%; }

ul { list-style-position: inside; padding-left: 0; }

.hide { display: none; }

.picture--frame svg { width: 100%; height: auto; mix-blend-mode: multiply; outline: 1px solid transparent; margin-bottom: -4px; }

.picture--placeholder { background: #E8E8E8; }

[lang="ar"] #the-templates { direction: rtl; }

body { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; background-color: #f7f7f7; color: black; font-weight: 400; font-size: 14px; line-height: 1.66; }

h1 { font-weight: 300; font-size: 300%; margin: 0; line-height: 1.2; }
@media (max-width: 767px) { h1 { font-size: 200%; padding-top: 20px; } }

h2 { font-weight: 400; font-size: 150%; margin: 0; padding-top: 0.66em; }

h3 { font-weight: 600; font-size: 100%; color: #444444; margin: 0; }
h3 .untranslated::before { content: '“'; }
h3 .untranslated::after { content: '”'; }

.tagline { font-size: 150%; }
@media (max-width: 767px) { .tagline { font-size: 125%; } }

ul.list { margin-left: 1em; list-style: outside; }

a { border-bottom: thin solid #49a1af; text-decoration: none; color: #49a1af; }
a:hover { color: black; border-color: black; }
.picture a { border-width: 0; }
nav a { border-width: 0; }

.template { background-color: white; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }

.form-submit { border: medium none; color: white; cursor: pointer; display: inline-block; padding: 1em 1.5em; text-align: center; text-decoration: none; transition: background-color 300ms; font-weight: bold; letter-spacing: 0.1em; margin-bottom: 1em !important; line-height: 3em; border-width: 0px; background-color: #49a1af; }
.form-submit:hover { background-color: #AAA; }

.expert-mode { text-align: center; padding: 1em 0; }

.row.row-auxillary { border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; padding-top: 1em; }

.row-units p { display: table; width: 100%; }
.row-units span { display: table-cell; }
.row-units label { margin-left: 1em; }

input[type='checkbox'] + label, input[type='radio'] + label { padding-top: 0px; padding-bottom: 10px; }

label { line-height: 1; }
label em { font-size: 0.8em; }

.form-input { overflow: hidden; }
.form-input label, .form-input input, .form-input .info { box-sizing: border-box; display: block; float: left; width: 40%; margin: 5px 5%; padding-top: 0.25em; padding-bottom: 0.25em; }
.form-input label { text-align: right; }
[lang="ar"] .form-input label { float: right; }
.form-input input { text-align: center; }
.form-input [lang='en'] { display: block; clear: both; color: #999; font-size: 0.9em; margin-top: 3px; }

input.warning { border: 2px solid #f27c29; }

input[type='submit']:disabled { background-color: #ddd; color: #bbb; pointer-events: none; }

.row.row-calculated { margin-bottom: 1em; }

.info { text-align: center; }

.row-info-pagesize .info { font-weight: bolder; }

.option-list { display: block; width: 50%; float: left; }
.option-list label, .option-list input { display: inline; width: 50%; margin: 5px 0 !important; }
.option-list input { width: 25%; position: relative; top: 3px; }
.option-list label { width: 75%; clear: right; text-align: left; }

#svg-dpi { padding-left: 3.5em; transition: max-height 500ms ease; max-height: none; overflow: hidden; }

#format-svg:empty ~ #svg-dpi { max-height: 0px; }

#format-svg:checked ~ #svg-dpi { max-height: 180px; }

#validate { border: 2px solid #f27c29; left: 50%; padding: 1em; background-color: white; font-size: 0.9em; text-align: left; }

.picture { background-color: white; }

.picture--frame { background-color: white; transition: opacity 300ms; }
.picture--frame:hover { opacity: 0.8; }

body { padding-top: 70px; position: relative; }
@media (max-width: 767px) { body { padding-top: 50px; } }

#the-templates { width: 100%; box-sizing: border-box; }
body.list-view #the-templates { padding-left: 1em; }
@media (max-width: 767px) { body.list-view #the-templates { padding: 0; } }
body.single-template #the-templates { display: flex; max-width: 1400px; margin: 0 auto; }
@media (max-width: 767px) { body.single-template #the-templates { display: block; } }
@media (max-width: 359px) { #the-templates { display: block; max-width: 100%; box-sizing: border-box; padding: 10px; } }

.brick { width: 336px; min-width: 320px; margin-bottom: 2em; vertical-align: top; }
@media (max-width: 359px) { .brick { display: block; box-sizing: border-box; margin: 0 auto 1em auto; width: auto; } }
body.single-template .brick { margin: 0 1em; }
@media (min-width: 768px) { body.single-template .brick.example { max-width: 25%; } }

.row { margin: 0; padding: 1px 0.5em; }

.layout-row { display: table; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-around; }

.layout-cell { vertical-align: top; margin: 0 1em; }

.picture { overflow: hidden; }

.picture img { width: 100%; }

ins { display: inline-block; width: 100%; background-color: #CCC; margin-bottom: 3em; }

body.single-template .template { width: 600px; margin: 0 auto; max-width: 100%; }
body.single-template #row-submit { margin-bottom: 20px; }

.example .picture-frame { margin-bottom: 1em; }
.example .picture-frame a { border-bottom-width: 0px; }

.page--about #main, .page--help #main { padding-left: 10px; padding-right: 10px; font-size: 110%; line-height: 160%; }
.page--about .row, .page--help .row { margin: auto; width: 1000px; max-width: 100%; overflow: hidden; clear: both; }
.page--about .column, .page--help .column { display: block; float: left; width: 46%; margin: auto 2%; }
.page--about .columns, .page--help .columns { -columns: 2; }
.page--about h2, .page--help h2 { padding: 0; color: #000; }
.page--about .question, .page--help .question { font-weight: bolder; margin-top: 1em; color: #944E9E; }
.page--about .answer p, .page--help .answer p { margin-bottom: 0.5em; }
.page--about em, .page--help em { color: black; }

@media only screen and (max-width: 767px) { .row { margin: 0; max-width: 100%; overflow: hidden; clear: both; }
  .column { display: block; float: none; width: 100%; margin: auto; } }
.toggle-topbar { display: none; }

#topbar { z-index: 1000; position: fixed; height: 50px; line-height: 50px; top: 0; left: 0; width: 100%; border-bottom: 1px solid #e0e0e0; }
#topbar #name a { font-size: 1.5em; font-weight: 400; line-height: 55px; height: 50px; padding: 0 1em; display: inline-block; }
#topbar #name img { float: left; margin: 9px; }
#topbar a > i { display: none; font-size: 24px; height: 50px; line-height: 50px; }
#topbar, #topbar li { background-color: white; }
#topbar li:hover { background-color: #f7f7fa; }
#topbar a { text-decoration: none; color: black; }
#topbar a:hover { color: black; background-color: #f7f7fa; }
@media (min-width: 768px) { #topbar .has-dropdown > a:after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid silver; margin-left: 5px; display: inline-block; position: relative; top: -2px; } }
@media (max-width: 767px) { #topbar .has-dropdown > a:after { content: "≫"; font-weight: bold; color: #49a1af; margin-left: 1em; } }
#topbar ul.dropdown { width: 320px; right: 0; -webkit-box-shadow: 0px 6px 8px -6px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 6px 8px -6px rgba(0, 0, 0, 0.75); box-shadow: 0px 6px 8px -6px rgba(0, 0, 0, 0.75); }
#topbar #menu-links ul { width: 240px; }
#topbar #menu-links li { border-bottom: 1px solid #e0e0e0; }
#topbar .title-area { display: block; float: left; margin: 0; list-style: none outside none; }
#topbar .title-area h1 { padding: 0 5px; }
#topbar .top-bar-section > ul { display: block; margin: 0; padding: 0; list-style: none image; position: absolute; right: 0; }
#topbar .top-bar-section > ul > li { display: block; float: left; padding: 0 0.5em 0 1em; position: relative; }
@media (max-width: 767px) { #topbar .top-bar-section > ul > li { width: 99%; padding: 0; } }
@media (min-width: 768px) { #topbar .top-bar-section ul ul { display: none; position: absolute; top: 100%; right: 0; line-height: 30px; list-style: none inside none; } }
@media (max-width: 767px) { #topbar .top-bar-section ul ul { display: block; width: 240px; position: fixed; top: 51px; left: 100%; bottom: 0; transition: margin-left 300ms; background-color: white; border-left: 1px solid #e0e0e0; overflow-y: auto; } }
@media (max-width: 767px) { #topbar .top-bar-section ul.visible.showing-second-level ul.visible { margin-left: -240px; } }
#topbar .top-bar-section ul ul li { min-width: 240px; padding-top: 0px; padding-bottom: 0px; line-height: 30px; }
#topbar .top-bar-section ul ul li a { display: block; padding: 0 1em; }
@media (min-width: 768px) { #topbar .top-bar-section ul li:hover > ul { display: block; overflow-y: auto; max-height: calc( 100vh - 50px ); } }
#topbar a.back { color: #49a1af; }
#topbar a.back::before { content: "≪ "; }

#button-menu { display: none; background-color: #49a1af; border-width: 0; height: 50px; line-height: 50px; position: absolute; right: 0px; color: white; }
#button-menu::after { content: "≡"; font-size: 300%; vertical-align: top; margin-left: 5px; display: inline-block; width: 25px; }
#button-menu.close::after { content: "×"; font-size: 250%; }

#menu-language-list img { margin-right: 0.5em; }

@media (max-width: 767px) { nav a > i { display: block; } }
@media (max-width: 767px) { * { font-family: sans-serif; -webkit-font-smoothing: default; -moz-osx-font-smoothing: default; }
  body, .template, .form-input, .social-wrapper, .form-submit { background-image: none; }
  #button-menu { display: block; }
  nav .top-bar-section { line-height: 35px; }
  nav .top-bar-section #main-menu { display: block; position: fixed; width: 160px; max-width: 90%; top: 51px; bottom: 0; left: 100%; margin-left: 0px; transition: margin-left 300ms; background-color: white; }
  nav .top-bar-section #main-menu.visible { margin-left: -160px; box-shadow: -3px 0px 5px -4px rgba(0, 0, 0, 0.75); }
  nav .top-bar-section #main-menu.showing-second-level { margin-left: -400px; }
  nav .top-bar-section li, nav .top-bar-section ul ul { display: block; clear: both; position: static; max-width: none; float: none; }
  nav .top-bar-section > ul > li { padding-left: 0; }
  nav .top-bar-section > ul > li a { padding-left: 1em; }
  nav .top-bar-section > ul > li li { padding-left: 1em; }
  nav .top-bar-section ul ul { display: none; padding: 0; }
  nav .top-bar-section ul li:hover > ul { display: none; } }
.row-ad { margin-top: 40px; text-align: center; }

.row-social { display: table; width: 100%; table-layout: fixed; padding-left: 0; padding-right: 0; }

.social-wrapper { display: table-row; }
.social-wrapper .social { border: none; display: table-cell; width: 16.66667%; float: left; font-size: 20px; text-align: center; padding: 10px 0; transition: opacity 200ms ease-out 0s; }
.social-wrapper .text { display: none; }

#news-row { padding: 0.25em 0; }
#news-row input { height: 30px; line-height: 30px; box-sizing: border-box; }

#form-news { padding: 10px; font-size: 16px; border: 1px solid #ccc; text-align: center; }
#form-news h3 { margin-bottom: 0; }
#form-news small { font-size: 80%; }

#tlemail { width: 90%; padding: 0.5em; }

#news-mail { display: block; width: 60%; float: left; padding-left: 0.25em; }

#news-submit { text-transform: uppercase; display: block; border: 0px solid #AAA; width: 40%; color: white; }

#instructions { overflow: auto; max-width: 95%; clear: both; margin: auto; }
#instructions p, #instructions li { font-size: 0.9em; line-height: 1.4; }
#instructions .column { width: 23%; margin-left: 1%; margin-right: 1%; padding: 0; display: block; float: left; }
@media (min-width: 360px) and (max-width: 767px) { #instructions .column { width: 48%; } }
@media (max-width: 359px) { #instructions .column { width: 98%; } }

.advertisment.brick { width: 336px; max-width: 100%; min-height: 600px; outline: 1px solid silver; background-color: #E8E8E8; text-align: center; position: relative; margin-top: 2em; }

#buy-me-a-book { background-color: white; padding: 1em; margin-bottom: 2rem; }
#buy-me-a-book h2 { color: #f27c29; }
#buy-me-a-book svg { width: 256px; height: 256px; }

#amazon-ad { padding: 1em; text-align: center; background-color: white; }
#amazon-ad blockquote { color: #f27c29; background-color: #fef2ea; padding: 1em; font-size: 120%; }
#amazon-ad blockquote::before { content: open-quote; }
#amazon-ad blockquote::after { content: close-quote; }
#amazon-ad .amazon-grid { display: table; width: 100%; }
#amazon-ad .amazon-row { display: table-row; }
#amazon-ad .amazon-cell { display: table-cell; text-align: center; padding: 1em 0; }

/*# sourceMappingURL=app.css.map */