@charset "UTF-8";
/*! Pullquote Knight Lab Designed and built by Zach Wise */
/* SASS IMPORT
================================================== */
/* SIZES
================================================== */
/* COLORS
================================================== */
/* TYPOGRAPHY
================================================== */
/* MIXINS
================================================== */
/* TYPOGRAPHY
================================================== */
@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Lato:700,700i,400,400i);
/* BUTTON
================================================== */
.kl-button, .kl-button:hover { background-image: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; border-style: solid; border-width: 0; cursor: pointer; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: normal; margin: 0 0 1.11111rem; position: relative; text-decoration: none; display: inline-block; padding: 17px 32px 17px 32px; font-size: 16px; background-color: #FFFFFF; border-color: #DDDDDD; color: #333333; border-radius: 4px; transition: background-color 300ms ease-out; color: #555555; box-shadow: none; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); border-width: 1px; margin-top: 0px; }

.kl-button span { transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); }

.kl-button:hover { text-shadow: none !important; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4); }

.kl-button-group { width: 505px; }

/* QUOTE
================================================== */
.kl-quotecomposition { margin: 0; display: inline-block; }

.kl-quotecomposition .kl-quotecomposition-container { position: relative; width: 505px; height: 283px; background-color: #000; display: block; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text { position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; z-index: 3; overflow: hidden; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote { color: #EEE; font-family: "Lora", Georgia, "Times New Roman", Times, serif; padding: 0; font-size: 22.8px; line-height: 30.4px; font-weight: 400; border: none; margin: 0; margin-left: 5%; margin-right: 5%; width: 100%; text-shadow: 2px 2px 4px fadeout(#000, 25%); }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote p { transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); text-align: left; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote p[contenteditable="true"]:hover { outline: 2px dashed #CCC; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote p:before { content: "“"; color: #bbb; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote p:after { content: "”"; color: #bbb; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-large p { font-size: 30px; line-height: 38px; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-small p { font-size: 17px; line-height: 22px; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis p { font-size: 17px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis-non-webkit p { font-size: 17px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; height: 200px; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis-non-webkit p:after { position: absolute; left: 25px; bottom: 25px; content: '\2026'; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote cite { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: italic; font-weight: 700; padding: 5px; padding-right: 10px; display: block; font-size: 11px; text-align: right; position: absolute; bottom: 0; right: 0; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote cite[contenteditable="true"]:hover { outline: 2px dashed #CCC; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-text blockquote cite:before { content: "— "; color: #bbb; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-background { width: 505px; height: 283px; z-index: 2; opacity: 0.6; position: absolute; top: 0; left: 0; background-color: #000; }

.kl-quotecomposition .kl-quotecomposition-container .kl-quotecomposition-image { z-index: 1; width: 100%; width: 505px; height: 283px; background-size: cover; background-position: center center; }

.kl-quotecomposition.kl-anchor-right .kl-quotecomposition-container .kl-quotecomposition-text blockquote p { text-align: right; margin-left: 50%; font-size: 19px; line-height: 26.6px; }

.kl-quotecomposition.kl-anchor-right .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis-non-webkit p:after { position: absolute; left: 0; right: 25px; bottom: 30px; }

.kl-quotecomposition.kl-anchor-right .kl-quotecomposition-container .kl-quotecomposition-background { opacity: 1; width: 60%; margin-left: 40%; background-color: transparent; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.6) 15%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.6) 15%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.6) 15%); background-repeat: repeat-x; }

.kl-quotecomposition.kl-anchor-left .kl-quotecomposition-container .kl-quotecomposition-text blockquote p { text-align: left; margin-right: 50%; font-size: 19px; line-height: 26.6px; }

.kl-quotecomposition.kl-anchor-left .kl-quotecomposition-container .kl-quotecomposition-background { opacity: 1; width: 60%; background-color: transparent; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0.0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0.0001) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0.0001) 100%); background-repeat: repeat-x; }

.kl-quotecomposition.kl-anchor-left .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis p, .kl-quotecomposition.kl-anchor-right .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis p { font-size: 17px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; }

.kl-quotecomposition.kl-anchor-left .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis-non-webkit p, .kl-quotecomposition.kl-anchor-right .kl-quotecomposition-container .kl-quotecomposition-text blockquote.kl-quote-ellipsis-non-webkit p { font-size: 17px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; height: 200px; }

.editor-content { display: flex; justify-content: center; width: 100%; flex-wrap: wrap; }

html, body { height: 100% !important; margin: 0; }

/*JS injected styles for iframe*/
.pq--iframe { position: absolute; height: 100vh; width: 100vw; border: none; padding: 0; margin: 0; top: 0; right: 0; left: 0; z-index: 100; }

.images { width: 800px; margin: 0 auto; padding-top: 4em; }

.pqImage { width: 48%; display: inline-block; position: relative; vertical-align: top; padding-bottom: 1em; }

.pqImage:nth-child(2n) { margin-left: 1em; }

img { width: 100%; height: auto; }

.closeButton { display: block; border: none; padding: 0.5em; background: none; font-size: 3em; top: 0; right: 0.5em; position: absolute; z-index: 300; }

.closeButton::after { content: '\2715'; font-size: 0.7em; color: grey; }

.closeButton:hover { cursor: pointer; }

.backdrop { position: fixed; top: 0; right: 0; left: 0; height: 100vh; width: 100vw; background-color: black; opacity: 0.8; z-index: 10; }

.corner-logo { max-width: 160px; }

#demo { margin-bottom: 50px; }

.demo-gif { max-width: 500px; display: block; margin: auto; }