/* 
 * Elements, including icons, text boxes, links, and custom elements, with accompanying animations
 * 
 */

/* 
 * Headers and content elements
 * 
 */

h1 {
	display:inline-block;
	font-size:50px;
	line-height:50px;
	margin:0;
	padding:0;
}

h1.center {
	font-size:70px;
	line-height:70px;
}

emphasis {
	font-size:18px;
}

.small.note {
	font-size:14px;
}

h1, h2, emphasis {
	font-family:'Montserrat',Verdana,Arial,sans-serif;
}

section h2, section h3 {
	font-family:'Montserrat',Verdana,Arial,sans-serif;
	font-weight:bold;
	font-size:18px;
	margin:0;
	padding:7px 0;
}

section h2 {
	margin-top:1em;
}

section h3:not(:first-of-type) {
	margin-top:0.5em;
}

p, div.p, form {
	display:block;
	margin:0;
	padding:7px 15px;
	word-wrap:break-word;
	white-space:pre-line;
}

div.p {
	position:relative;
	max-width:calc(100% - 30px);
	width:100%;
}

main.background > section div.p {
	max-width:1170px;
	padding-left:45px;
	padding-right:45px;
}

div.p h2 {
	font-size:25px;
}

div.p > h2, div.p > h3 {
	display:inline-block;
}

div.p, div.p h3 {
	font-size:17px;
}

div.p > section {
	margin:0;
	padding:2em 3em;
}

div.p > section.clear {
	background-color:unset !important;
	background-image:unset !important;
}

div.p > h2 + section, div.p > h2 + div.flex {
	margin-top:25px;
}

div.p section h3 {
	font-family:'Varela Round',Verdana,Arial,sans-serif;
	display:inline-block;
}

div.p blockquote {
	margin:2em 0 2em 0;
	width:auto;
}

p.code {
	font-family:monospace;
	min-width:300px;
}

code, pre, p.code {
	display:block;
	white-space:pre-wrap;
	padding:1em 2em;
	font-size:15px;
}

samp {
	font-size:95%;
	word-break:break-all;
}

div.p samp {
	word-break:break-word;
}

h2 samp {
	font-size:105%;
}

code {
	max-height:40em;
	overflow-y:auto;
}

code div, pre div {
	font-family:'Varela Round',Verdana,Arial,sans-serif;
}

sup {
	font-size:0.7em;
}

figcaption {
	margin-top:1em;
	text-align:center;
	font-size:14px;
}

blockquote {
	position:relative;
	display:flex;
	padding:2em 3em 2em 5em;
	white-space:nowrap;
	text-align:center;
	margin:15px;
}

blockquote > div {
	padding-right:1em;
	margin-right:5em;
	align-self:center;
	padding-top:30px;
	padding-bottom:30px;
}

blockquote > div > img {
	min-width:150px;
	max-width:300px;
	max-height:150px;
	padding-right:3em;
}

blockquote img[onclick^="window.open"] {
	cursor:pointer;
}

blockquote > p {
	align-self:center;
	text-align:justify;
	font-size:17px;
	display:block;
	white-space:normal;
}

blockquote > p::before {
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	content:"\f10d"; /* FontAwesome quote-left icon */
	font-size:20px;
	margin-right:0.7em;
	margin-left:-2em;
	vertical-align:top;
}

blockquote cite {
	font-family:'Varela Round',Verdana,Arial,sans-serif;
	display:block;
	text-align:right;
	font-style:normal;
	font-size:16px;
	white-space:normal;
	margin-top:1em
}

blockquote cite a {
	border:none !important;
}

blockquote cite button {
	margin-right:0;
}

/* 
 * Convenience classes
 * 
 */

.center:not(table) {
	text-align:center;
	display:block;
	margin:0 auto;
}

table.center {
	text-align:center;
	white-space:nowrap;
}

table:not(.center) {
	text-align:left;
}

div.inline, p.inline {
	display:inline-block;
	vertical-align:top;
}

div.nowrap, div.nowrap p, h2.nowrap, p.nowrap, span.nowrap {
	white-space:nowrap;
}

div.wrap, h2.wrap, p.wrap {
	white-space:normal;
	overflow-wrap:anywhere;
	-ms-word-break:break-all;
}
/* 
 * Hard separators and pads
 * 
 */

.sep-bottom {
	border-bottom:1px solid;
}

.sep-top {
	border-top:1px solid;
}

/* 
 * Represent data with easy and consistent formatting
 * 
 */

div.info {
	padding:10px 20px;
}

div.info p {
	padding:0 15px;
}

div.info h2:not(.copy), div.info h3 {
	padding-left:15px;
}

div.info label, p label {
	display:inline-block;
	width:10em;
	vertical-align:top;
}

div.info label.inline, p label.inline {
	width:auto;
}

div.info > div {
	padding:0 10px 10px 10px;
}

div.info > div.sub {
	font-size:13px;
	line-height:25px;
}

/* 
 * Highlights - interesting data points
 * 
 */

p.highlight {
	display:block;
	white-space:nowrap;
	text-overflow:clip !important;
	line-height:20px;
	margin-top:10px;
}

p.highlight:first-of-type {
	margin-top:5px;
}

p.highlight:not(:last-of-type) {
	margin-bottom:10px;
}

p.highlight span {
	display:inline-block;
	vertical-align:top;
	white-space:normal;
	word-break:break-word;
	padding-right:2em;
}

p.highlight div.descriptor {
	padding:0;
}

p.highlight i[class*=fa-], p.highlight img.flag {
	padding-right:5px;
}

/*
 * Miscellaneous data classes
 * 
 */

.retired {
	opacity:0.5;
}

/* 
 * Links
 *
 */

a {
	cursor:pointer;
}

a.flash {
	animation:flash 0.4s linear 2;
}

a.logo {
	text-decoration:none;
}

p a:not(.row), div.p a {
	text-decoration:none;
	border-bottom:1px solid;
}

/* 
 * Images and icons
 *
 */

img.logo:not(.icon) {
	max-height:80px;
	max-width:100%;
}

img.logo.external:not(.icon) {
	max-height:1.5em;
	margin-bottom:20px;
	margin-right:1.5em;
}

img.logo.icon {
	height:1.2em;
	margin-right:1em;
	text-align:left;
	display:inline-block;
	vertical-align:-0.2em;
}

img.logo.external[onclick] {
	cursor:pointer;
}

div.testimonials, div.integrations {
	text-align:center;
	white-space:normal;
}

div.testimonials img.logo.external {
	display:inline-block;
	margin:0;
	padding:2em 4em;
	max-height:4em;
}

cite img.logo.external:not(.icon) {
	max-height:3em;
}

div.integrations > a, div.integrations > div {
	vertical-align:top;
	border:none;
	display:inline-block;
	width:9em;
	height:9em;
	position:relative;
	margin:3em;
	margin-top:2em;
	margin-bottom:6em;
}

div.integrations > a h3 {
	display:block;
	padding:0;
}

div.integrations > div cite {
	text-align:center;
	margin-top:0;
	font-size:15px;
}

div.integrations > div a {
	border:none;
}

div.integrations img.logo.external {
	display:inline-block;
	max-width:100%;
	max-height:100%;
	margin:0;
	padding:0;
}

div.integrations img.logo.external::after {
	content:attr(alt);
	display:block;
}

img.diagram {
	display:block;
	margin:0 auto;
	min-width:400px;
	max-width:100%;
}

img.screenshot {
	opacity:0.8;
	width:100%;
}

img.screenshot:hover, img.screenshot.expanded {
	opacity:1.0;
}

img.demo, img.mediapromo, img.blogpromo {
	width:100%;
	display:block;
	margin:0 auto;
	box-shadow:0 0 10px rgba(0,0,0,.1);
	border-radius:5px;
}

img.mediapromo {
	max-width:250px;
}

img.blogpromo {
	max-width:350px;
}

img.flag {
	width:1.4em;
	margin-left:-0.25em;
	margin-right:0.5em;
	vertical-align:-0.3em;
	user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
}

.note img.flag {
	opacity:0.7;
}

img.avatar {
	max-height:30px;
	min-width:30px;
	display:block;
	margin:auto;
	opacity:0.9;
	user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
}

i[class*=fa-] {
	width:1.7em;
	text-align:left;
}

i[class*=fa-].inline {
	width:1.3em;
	text-align:right;
}

i.fa-dot::before {
	content:"\f111"; /* FontAwesome circle icon */
	font-size:80%;
}

i.fa-product-api::before {
	content:"\f121"; /* FontAwesome code icon */
}

i.fa-product-feed::before {
	content:"\f00a"; /* FontAwesome th icon */
}

div.p i.fa-product-pro {
	width:1.4em;
}

i.fa-product-pro::before {
	content:"\f3ed"; /* FontAwesome shield-alt icon */
}

i.fa-product-enterprise::before {
	content:"\f21e"; /* FontAwesome heartbeat icon */
}

i.fa-taxii::before {
	content:"\f5eb"; /* FontAwesome directions icon */
}

i.fa-risk-unknown::before {
	content:"\f059"; /* FontAwesome question-circle icon */
}

i.fa-risk-none::before {
	content:"\f581"; /* FontAwesome smile icon */
}

i.fa-risk-low::before, i.fa-risk-medium::before, i.fa-risk-high::before {
	content:"\f111"; /* FontAwesome circle icon */
}

i.fa-risk-critical::before {
	content:"\f192"; /* FontAwesome dot-circle icon */
}

i.fa-risk-retired::before {
	content:"\f253"; /* FontAwesome hourglass-end icon */
}

i.fa-risk-up::before {
	content:"\f139"; /* FontAwesome chevron-circle-up */
}

i.fa-risk-down::before {
	content:"\f13a"; /* FontAwesome chevron-circle-down */
}

i.fa-http-online::before, i.fa-http-offline::before {
	content:"\f011"; /* FontAwesome power-off icon */
}

i.fa-http-redirect::before {
	content:"\f074"; /* FontAwesome random icon */
}

i.fa-indicator::before {
	content:"\f129"; /* FontAwesome info icon */
	padding-left:0.25em; /* properly align with wider icons... */
}

i.fa-threat::before {
	content:"\f188"; /* FontAwesome bug icon */
}

i.fa-feed::before {
	content:"\f550"; /* FontAwesome th icon */
}

i.fa-attribute::before {
	content:"\f292"; /* FontAwesome hashtag icon */
}

i.fa-property::before {
	content:"\f054"; /* FontAwesome chevron-right icon */
}

i.fa-explore::before {
	content:"\f101"; /* FontAwesome angle-double-right icon */
}

i.fa-analyze::before {
	content:"\f126"; /* FontAwesome code-branch icon */
}

/* 
 * Dropdown menus
 * 
 */

div.dropdown {
	display:inline-block;
	overflow:visible;
}

div.dropdown > div {
	display:none;
	position:absolute;
	padding:1em 0;
	padding-right:1em;
	z-index:11;
	animation:fadein 0.1s;
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
}

div.dropdown > div a {
	display:block;
	padding:0 4em 5px 0.5em;
	white-space:nowrap;
}

div.dropdown > div a.sep-top {
	padding-top:0.5em;
	margin-top:0.5em;
}

div.dropdown > div a.sep-bottom {
	padding-bottom:0.5em;
	margin-bottom:0.5em;
}

div.dropdown > :not(div):first-child::after {
	font-weight:normal;
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	margin-left:1em;
	content:"\f0d7"; /* FontAwesome sort-down icon */
}

div.dropdown:hover > div {
	display:block;
}

/* 
 * Good old HTML5 lists
 * 
 */

ul, ol {
	white-space:normal;
	padding:0;
	margin:0;
	list-style-type: square;
}

ul > li, ol > li {
	margin-left:1.25em;
}

/* 
 * Plain old HTML5 tables
 * 
 */

div.p > table {
	width:100%;
}

table {
	border-collapse:collapse;
	white-space:normal;
}

table th, table td {
	padding:20px;
}

table tbody th[colspan] {
	text-align:left;
}

table thead th {
	padding:10px 30px;
	font-size:23px;
}

table thead th > div {
	font-weight:normal;
	font-size:12px;
}

table thead th > div:first-of-type {
	font-size:17px;
	line-height:20px;
	margin-top:1em;
}

table td a {
	border:none !important;
}

/*
 * Descriptors and timestamps
 * Timestamps handled by stamp.js
 * 
 */

div.descriptor, label.descriptor, div.stamp {
	display:inline-block;
	vertical-align:top;
	line-height:20px;
	padding:3px 0;
}

div.stamp {
	font-size:13px;
}

div.descriptor::after, label.descriptor::after, div.stamp::after {
	display:block;
	font-family:'Varela Round',Verdana,Arial,sans-serif;
	font-size:11px;
	font-style:normal;
	line-height:10px;
	letter-spacing:0;
	overflow-wrap:anywhere;
	-ms-word-break:break-all;
	transition:color 2s;
}

div.stamp.recent::after, div.descriptor.recent::after {
	transition:color 0s;
}

div.stamp, div.descriptor::after, label.descriptor::after {
	white-space:pre;
}

div.descriptor::after, label.descriptor::after {
	content:attr(data-note);
	max-width:250px;
	white-space:normal;
	line-height:1.5em;
}

div.descriptor:empty::after {
	margin-top:1.3em;
}

div.stamp::after {
	content:attr(data-relative);
	text-align:right;
}

/* 
 * Graph element
 * Includes risk graphs and progress bars
 * 
 */

div.graph {
	width:150px;
	text-align:left;
	display:inline-block;
	vertical-align:top;
	white-space:nowrap;
	line-height:1px;
	padding:5px 0;
	margin:0;
}

div.graph.risk:empty::after {
	content:"";
	display:block;
	outline:1px solid;
	width:150px;
	height:2px;
	margin-top:3px;
}

div.graph > div {
	height:3px;
	display:inline-block;
}

div.graph::before {
	content:attr(data-text);
	display:block;
	line-height:1em;
	font-size:13px;
}

.center div.graph::before {
	text-align:center;
}


/* 
 * Taglists, radio groups, toggles
 * Handled by taglist.js
 * 
 */

div.taglist {
	display:inline-block;
	white-space:normal;
}

label + div.taglist {
	max-width:600px;
	margin-bottom:1em;
}

div.taglist > div, a.tag {
	display:inline-block;
	max-width:30em;
	margin-right:10px;
	margin-bottom:10px;
	border-radius:15px;
	overflow-wrap:anywhere;
	-ms-word-break:break-all;
	line-height:30px;
	font-size:13px;
	vertical-align:top;
	user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
}

a.tag {
	border:none !important;
}

a.tag + button {
	font-size:13px;
	height:30px;
}

div.taglist > div[data-note]::after, div.taglist > a[data-note]::after {
	content:attr(data-note);
	display:block;
	padding-bottom:0.5em;
	max-width:15em;
	margin-left:2em;
	text-align:left;
	font-size:11px;
	line-height:10px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	overflow-wrap:anywhere;
	-ms-word-break:break-all;
}

div.taglist > div.loader > i[class*=fa-] {
	display:none;
}

div.taglist > div.error > i[class*=fa-]::before {
	content:"\f06a"; /* FontAwesome exclamation-circle icon */
}

div.taglist > div.loader::before {
	margin-top:1px;
	width:8px;
	height:8px;
}

div.taglist:not(.toggle) > div.note {
	border:1px dotted;
	border-radius:0;
	padding:0 1em;
}

div.taglist:not(.toggle) > div.note.flash {
	animation:flash 0.7s linear infinite;
}

div.taglist > div.flash:not(.note) {
	animation:flash 0.4s linear 5;
}

div.taglist > div:not(.note), div.taglist.toggle > div {
	text-align:center;
	cursor:pointer;
}

div.taglist.toggle {
	border:1px solid;
	border-radius:15px;
}

div.taglist.toggle > div {
	margin:0;
	border:none;
	border-radius:0;
	min-width:8em;
}

div.taglist.toggle > div:first-child {
	border-radius:15px 0 0 15px;
}

div.taglist.toggle > div:last-child {
	border-radius:0 15px 15px 0;
}

div.taglist:not(.toggle) {
	
}

div.taglist:not(.toggle) > div:not(.note), a.tag {
	text-align:left;
	word-break:break-all;
	padding:0 1em;
}

div.taglist:not(.toggle) > div.selected {
	outline:solid 2px;
}

div.taglist:not(.toggle) > div:not(.note).removable:hover::before {
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	content:"\f00d"; /* FontAwesome times icon */
	width:1.7em;
	display:inline-block;
	text-align:left;
}

div.taglist:not(.toggle) > div:not(.note).searchable:hover::before, a.tag.searchable:hover::before {
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	content:"\f101"; /* FontAwesome search icon */
	width:1.7em;
	display:inline-block;
	text-align:left;
}

div.taglist:not(.toggle) > div:not(.note).addable:hover::before {
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	content:"\f067"; /* FontAwesome plus icon */
	width:1.7em;
	display:inline-block;
	text-align:left;
}

div.taglist:not(.toggle) > div:not(.note).removable:hover i[class*=fa-], div.taglist:not(.toggle) > div:not(.note).searchable:hover i[class*=fa-], a.tag.removable:hover i[class*=fa-], a.tag.searchable:hover i[class*=fa-] {
	display:none;
}

div.p div.taglist div, div.p a.tag {
	font-size:15px;
}

div.p > section > div.taglist > div:not(.note), div.p > section a.tag {
	display:inline-block;
	min-width:11em;
	text-align:center;
	border:none;
	white-space:nowrap;
}

div.p > section > div.taglist > div:not(.note) img.logo.icon, div.p > section a.tag img.logo.icon {
	margin-right:0.5em;
}

/*
 * Copyable elements
 * Handled by page.js
 * 
 */

.copyContainer {
	position:relative;
	display:inline-block;
	vertical-align:top;
	overflow:visible;
}

.copy {
	position:relative;
	display:inline-block;
	overflow-wrap:anywhere;
	word-break:break-all;
	-ms-word-break:break-all;
	font-size:16px;
	padding:0 10px;
	border-radius:5px;
}

h2.copy, h3.copy {
	font-size:25px !important;
	padding:7px 10px !important;
	margin:10px;
	line-height:1em;
}

.copy:hover {
	cursor:pointer;
}

/* text to display is different than text to copy */
.copy[data-copy]:hover {
	overflow:visible;
	z-index:10;
	top:0;
	left:0;
	word-break:break-all;
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
}

.copy:active {
	animation:fadein 0.2s;
}

.copy::after {
	line-height:20px;
	font-family:'Font Awesome 5 Free';
	font-weight:400;
	content:"\f24d"; /* FontAwesome copy icon */
	margin-left:0.5em;
	user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
}

.copy.success::after {
	font-weight:900;
	content:"\f058"; /* FontAwesome check-circle icon */
}

/* 
 * Form elements
 *
 */

input[type=radio], input[type=checkbox] {
	margin-right:0.5em;
	margin-bottom:1em;
}

input[type=text], input[type=password], input[type=date], .stripe, select, textarea {
	font-family:'Varela Round',Verdana,Arial,sans-serif;
	font-size:15px;
	padding:5px;
	border:1px solid;
	box-sizing:content-box;
}

input[type=date] {
	padding:5px 10px;
}

input:disabled {
	opacity:0.5;
}

::placeholder {
	opacity:0.8;
}

.stripe {
	display:inline-block;
	min-width:100px;
}

textarea {
	vertical-align:top;
	min-height:3em;
	height:8em;
	resize:vertical; /* not supported in IE */
}

input[disabled], input[readonly], textarea[disabled], textarea[readonly] {
	border:1px dotted;
}

label[for], .cloner label {
	vertical-align:top;
	display:inline-block;
	width:15em;
}

input + .note {
	display:block;
	text-align:right;
	line-height:20px;
	margin:2px;
	margin-bottom:20px;
}

.guidance {
	display:block;
	text-align:right;
	border-bottom:1px solid #c2dce8;
	padding-right:1em;
	margin-bottom:0.5em;
}

/*
 * Buttons
 * 
 */

button, input[type=submit], input[type=file] + label[for] {
	font-family:'Varela Round',Verdana,Arial,sans-serif;
	font-size:15px;
	min-width:125px;
	border:none;
	border-radius:15px;
	cursor:pointer;
	text-align:center;
	height:2em;
	padding:0 1.5em;
	margin-right:20px;
	user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
}

button[disabled] {
	opacity:0.5;
	cursor:auto;
}

.center button {
	margin:10px;
	margin-top:20px;
}

.card.notice button, button.small {
	font-size:12px;
	margin-left:2em;
}

.card.notice button:not(:first-of-type) {
	margin-left:0;
}

input[type=file] + label[for] {
	width:auto;
}

input[type=file] + label[for]::before {
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	content:"\f0c5"; /* FontAwesome file icon */
	width:1.7em;
	display:inline-block;
	text-align:left;
}

/* 
 * Text element wrappers
 *
 */

.text-wrapper {
	position:relative;
	display:inline-block;
	border:1px solid;
	padding-left:10px;
	padding-right:10px;
}

.text-wrapper .fa, .text-wrapper .fas, .text-wrapper .fab {
	font-size:15px;
	line-height:30px;
}

.text-wrapper input[type=text] {
	border:none;
	height:1em;
	width:calc(100% - 3em);
}

.text-wrapper .fa + input[type=text], .text-wrapper .fas + input[type=text], .text-wrapper .fab + input[type=text] {
	padding-left:0;
}

/*
 * Custom autocomplete element
 * Handled by autocomplete.js
 * 
 */

div.autocomplete {
	font-family:'Varela Round',Verdana,Arial,sans-serif;
}

div.autocomplete:not(.custom) {
	display:none;
	position:absolute;
	outline:1px solid;
	z-index:10;
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4);
	overflow-x:hidden;
	overflow-y:auto;
	min-height:2em;
	max-height:500px;
	min-width:100px;
	text-align:left;
	font-size:15px;
}

div.autocomplete > div {
	padding:15px 10px;
	white-space:nowrap;
	overflow:hidden;
}

div.autocomplete > div:not(.note):hover {
	cursor:pointer;
}

div.autocomplete > div.loader {
	padding-left:20px;
}

div.autocomplete > div > i[class*=fa-] {
	margin: 0 10px;
	width:1em;
}

div.autocomplete > div::after {
	content:attr(data-note);
	display:block;
	font-size:13px;
	margin-left:2.7em;
	line-height:20px;
}

div.autocomplete div.icon {
	vertical-align:top;
	height:100% !important;
	display:inline-block !important;
	margin:0 10px;
	width:1em;
}

/* 
 * Tooltip (any element with an alt attribute)
 *
 */

[alt]:hover::after {
	
	/* adjust text */
	content:attr(alt);
	font-family:'Varela Round',Verdana,Arial,sans-serif;
	font-size:14px;
	line-height:20px;
	text-align:center;
	font-weight:normal;
	overflow-wrap:break-word;
	word-break:break-word;
	-ms-word-break:break-word;
	
	/* adjust dimensions */
	min-width:10em;
	max-width:15em;
	white-space:normal;
	
	/* adjust appearance */
	background-color:#000000;
	color:#ffffff;
	border-radius:5px;
	padding:7px 25px;
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4);
	
	/* adjust interaction */
	pointer-events:none;
	
	/* adjust positioning */
	display:block;
	position:absolute;
	z-index:1000;
	margin-left:-20px;
	margin-top:5px;
	
	/* animation */
	animation:fadein 0.2s;
	
}

/* 
 * Animations
 *
 */

@keyframes fadein {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

@keyframes fadeout {
	from {
		opacity:1;
	}
	to {
		opacity:0;
	}
}

@keyframes flash {
	50% {
		opacity:0.3;
	}
}

/* 
 * Loader
 * 
 */

button.loader::before {
	margin-top:1px;
}

.loader::before {
	display:inline-block;
	content:' ';
	width:10px;
	height:10px;
	border-radius:50%;
	border:1px solid;
	animation:loader 0.4s linear infinite;
	margin-right:0.8em;
}

@keyframes loader {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

/*
 * Adjust on medium/smaller screens
 *
 */

@media only screen and (max-width:1320px) {
	
	blockquote {
		display:block;
		margin:8px 0;
		padding-right:3.5em;
		padding-left:3.5em;
	}
	
	blockquote > p::before {
		width:0.5em;
	}
	
	blockquote > div {
		display:block;
		border:none !important;
		margin:0;
		padding:0;
		padding-bottom:20px;
	}
	
	blockquote > div > img {
		padding:0;
	}
	
	img.diagram {
		min-width:300px;
		width:500px;
		max-width:100%;
	}
	
}

@media only screen and (max-width:900px) {
	
	main.background > section div.p {
		padding-left:0;
		padding-right:0;
	}

	div.collapse {
		display:inline-block;
	}
	
	code {
		max-height:20em;
	}
	
	div.p > section {
		padding:1em 2em;
	}
	
	div.info {
		padding:10px 10px 20px 10px;
	}
	
	div.info label {
		display:inline-block;
	}
	
	img.diagram {
		min-width:0;
	}
	
	blockquote {
		padding:20px;
	}
	
	blockquote > div > img {
		padding:0;
	}
	
	blockquote > p {
		font-size:0.9em;
		text-align:center;
		padding:0;
	}
	
	blockquote > p::before {
		display:none;
	}
	
	blockquote cite {
		text-align:center;
		
	}
	
	[alt]:hover::after {
		display:none;
	}
	
	div.nowrap label {
		width:7em;
	}
	
	header div.autocomplete {
		position:absolute;
	}
	
	div.stamp {
		width:7em;
		text-align:right;
	}
	
}

/* even smaller */
@media only screen and (max-width:700px) {
	
	blockquote > div > img {
		max-width:70%;
	}
	
	h1.center {
		font-size:50px;
		line-height:50px;
		white-space:nowrap;
	}
	
	div.autocomplete:not(.custom) {
		width:calc(100% - 20px) !important;
		left:10px !important;
	}
	
	div.testimonials img.logo.external {
		padding:2em 1em 2em 0;
	}
	
	button + button {
		margin-top:10px;
		margin-bottom:10px;
	}
	
}

/* 
 * IE10+ hacks
 * 
 */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	
	#unsupported-browser-warning {
		display:block !important;
	}
	
	div.descriptor::after, div.stamp::after {
		word-wrap:break-word;
	}
	
}