/* 
@file       add-ons-styles.css.en
requires:   /common/framework/css/framework.en.css
			/common/framework/css/form-gui.en.css
========================================================================== */

:root {
	--accent: #dd1100;
	--accent-hover: #fe0000;
	--border-color: #e8e8e8;
	--dot-color: #A7A6A6;
	--dot-gap: 0.625rem;
	--dot-size: 0.6875rem;
	--gap: 2.5rem;
	--line: #dfe4e7;
	--maxw: 70rem;
	--panel: #f6f7f8;
	--row-gap: 2.75rem;
	--muted-color: #222222;
}
.page {
	color: #636363;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25;
	margin: 0 auto;
	max-width: var(--maxw);
	padding: 0 1.5rem 1.5rem 1.5rem;
	scroll-behavior: smooth;
}
.page a {
	color: var(--accent);
	text-decoration: none;
}
.page a:hover {
	color: var(--accent-hover);
}
.top-bar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 1.3rem 0 1.5rem 0;
}
#intro .inner {
	padding-top: 1rem;
}
.inner {
	padding: 1.7rem;
}
.page-flex {
	display: flex;
	flex-direction: column;
}
/* Breadcrumb: Products > Add-ons */

.breadcrumb {
	align-items: center;
	color: #000;
	display: flex;
	font-size: 1rem;
}
.breadcrumb a {
	color: #000;
}
.breadcrumb .separator {
	background-image: url("/products/applications/img/breadtrail-arrow.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	height: 0.5rem;
	margin: 0 0.375rem;
	width: 0.5rem;
}
.bottom-bar .separator {
	background-image: url("/products/applications/img/arrow-left.svg");
}
.breadcrumb .current {
	color: #000;
	font-weight: 500;
}
.product-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: space-between;
}
.product-header img {
	background-image: linear-gradient(to top, #e7e7e7, #fff, #fff);
	border-radius: 0.5rem;
	box-shadow: 0 0 0 0.25rem #f1f1f1, inset 0 0 0 0.1875rem #f70;
	height: 3.5rem;
	width: 3.5rem;
}
.product-header h1 {
	color: var(--accent);
	font-size: 2.3475rem;
	font-weight: 600;
	margin: 0;
}
.pricing-links {
	align-items: center;
	display: flex;
	font-size: 1rem;
}
.pricing-links a:first-child {
	padding-left: 0;
}
.pricing-links a:not(:last-child) {
	border-right: 0.0625rem solid #E5E5E4;
}
.pricing-links a.pricing-link {
	color: #626262;
	padding: 0 0.75rem;
	text-decoration: none;
	transition: color 0.2s ease;
}
.pricing-links a.pricing-link.active, .pricing-links a.pricing-link:hover {
	color: var(--accent);
}
/* Pipe-divided links: Educational Pricing | Student Pricing */

.price-wrapper.two-col-grid {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	/* space between price and button */
}
.price-wrapper {
	color: #222;
	margin-left: auto;
	opacity: 0;
	transition: opacity 1s;
}
.price {
	color: #222222;
	font-size: 2.125rem;
	font-weight: 600;
}
.price-tag {
	font-size: 2.125rem;
	margin-top: 0;
}
.price-tag span.price span.dollarsign {
	font-size: 1.25rem;
	margin-top: 0.5rem;
}
.dollarsign {
	display: inline-block;
	font-size: 1.25rem;
	line-height: 1;
	margin-top: 0.8rem;
	vertical-align: top;
}
.vat-note {
	text-align: right;
}
.page a.button {
	background: var(--accent);
	border-radius: 0.4375rem;
	border: 0.0625rem solid var(--accent);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 2.21;
	padding: 0 1.1875rem;
	text-align: center;
}
.page a.button:hover {
	background: #fe0000;
	color: #fff;
}
.page a.download-link {
	align-items: center;
	display: inline-flex;
	font-size: 1.0625rem;
	font-weight: 600;
	gap: 0.375rem;
	margin: 0;
	text-decoration: none;
}
#intro a.download-link {
	margin-top: 2.3rem;
}
.download-link:hover {
	text-decoration: underline;
}
.download-icon {
	width: 0.875rem;
	height: 0.875rem;
}
main h3 {
	color: var(--accent);
	font-size: 1.625rem;
	font-weight: 600;
	margin-bottom: 2rem;
}
main h4 {
	color: #222222;
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	padding: 0 0 0 0;
}
main h4.orage {
	font-size: 1.375rem;
	color: #f65d00;
	;
}
.red-bullets {
	margin: 0;
	padding: 0.125rem 0 0 1.25em;
}
.red-bullets li {
	color: #222222;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.29;
	margin-bottom: .5rem;
	position: relative;
}
.red-bullets li::before {
	color: var(--accent);
	content: "\25A0";
	font-size: 5px;
	left: -0.7rem;
	line-height: 1;
	position: absolute;
	top: 8px;
}
.red-bullets li.no-bullet::before {
	content: none;
}
.gray-bullet li::before {
	color: #bdbdbd;
	content: "\25A0";
	font-size: 4px;
	left: -1rem;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding-left: 5px;
}
/* ---------- Layout shell ---------- */

main.content {
	border: 0.0625rem solid #dddddd;
	color: #000;
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}
.gray-background {
	background: #f5f5f5;
	color: #4f4f4f;
	font-size: 0.875rem;
	line-height: 1.5;
}
.gray-background span {
	color: #323232;
}
.rows-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--row-gap);
	margin: 0 auto;
	max-width: 100%;
}
.row-flex {
	align-items: flex-start;
	display: flex;
	gap: var(--gap);
}
.row-flex.border-b-1 {
	border-bottom: 0.0625rem solid #EBEBEB;
	padding-bottom: 3rem;
}
.column {
	flex: 1 1 0;
	min-width: 0;
}
section#description .inner .rows-wrapper p.description {
	color:var(--muted-color);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
}
/* Static content */

.static-block h2 {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}
.static-block p.description {
	color: var(--muted-color);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}
img.media-image, #features .row-flex>div>img, .accordion-item .column>img {
	border: 10px solid var(--border-color);
	border-radius: 12px;
	padding: 10px;
}
section#description .inner .caption {
	color: var(--muted-color);
	display: inline-block;
	font-size: 0.875rem;
	font-style: italic;
	font-weight: 400;
	height:30px;
	max-width: 25rem;
	padding-left: 1rem;
	text-align: left;
}
.slideshow-text h2 {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}
.slideshow-text p.description {
	color: var(--muted-color);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}
/* Slideshow */

.slideshow {
	border-radius: 0.375rem;
	border: 10px solid var(--border-color);
	box-sizing: border-box;
	overflow: hidden;
	padding: 10px;
	position: relative;
	transition: height 0.35s ease;
	width: 100%;
	/* max-width: 400px; */
}
.slideshow-block {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.slide img {
	border: none;
	display: block;
	height: 100%;
	margin: 0;
	object-fit: contain;
	padding: 10px;
	width: 100%;
}
.slide {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.6s ease-in-out;
}
.slide.active {
	opacity: 1;
}
.slideshow-caption {
	color: var(--muted-color);
	font-size: 0.875rem;
	margin-top: 0.5rem;
	min-height: 1.2em;
}
.dots {
	align-items: center;
	display: flex;
	gap: var(--dot-gap);
	justify-content: center;
	margin-top: 0.25rem;
}
.dot {
	background: #fff;
	border-radius: 50%;
	border: 0.0625rem solid var(--dot-color);
	cursor: pointer;
	height: var(--dot-size);
	padding: 0;
	transition: background 0.3s ease, transform 0.3s ease;
	width: var(--dot-size);
}
.dot.active {
	background: var(--dot-color);
	transform: scale(1.0);
}
.tagline {
	color: #505050;
	font-size: 1.125rem;
	margin: 0;
}
.hero-figure {
	margin: 1.25rem 0;
	text-align: center;
}
.hero-figure img {
	border-radius: 0.375rem;
	border: 2px solid #cfcfcf;
	height: auto;
	max-width: 100%;
}
section#description .inner p {
	color: #000000;
	font-size: 1rem;
	line-height: 1.5;
}
section#description .inner p+p {
	color: #222222;
}
section#description .inner h2+p {
	font-size: 1.1875rem;
	font-weight: 300;
}
.red-bullets+p {
	color: #222222;
	padding: 2.0rem 0;
}
section#intro p {
	font-size: 1.1875rem;
	font-weight: 300;
	line-height: 1.42;
}
section#description .inner h3+p {
	font-size: 1.125rem;
	line-height: 1.33;
}
h2.section-title {
	border-top: 1px solid #bababa;
	color: #222222;
	font-size: 1.75rem;
	font-weight: 600;
	margin: 3rem 0 1.0rem;
	padding-top: 2.0rem;
}
h2.key-features+p {
	color: #000000;
	font-size: 1.1875rem;
	font-weight: 300;
	line-height: 1.42;
}
ul.feature-list {
	margin: 0;
	padding-left: 1.25rem;
}
ul.feature-list>li {
	margin-bottom: 0.8rem;
}
.feature-list.red-bullets {
	color: var(--accent);
}
section#description .red-bullets+p {
	color: #222222;
	/* font-size: 1rem; */
	font-weight: 400;
	/* line-height: 1.5; */
}
.feature-list .gray-bullet {
	margin-left: 1.25rem;
	padding-left: 0.3125rem;
	color: #BDBDBD;
}
.feature-list .gray-bullet li, .feature-list .gray-bullet li::marker {
	color: #535353;
	font-size: .9rem;
}
#features .row-flex>div>span:first-child {
	color: #111;
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
#features .row-flex>div>p {
	color: var(--muted-color);
	line-height: 1.6;
	margin-bottom: 1rem;
}
#features .row-flex>div>img {
	display: block;
	height: auto;
	margin-bottom: 0.5rem;
	max-width: 25rem;
}
.icon-open {
	display: inline-block;
}
.icon-close {
	display: none;
}
.accordion-item .row-flex {
	gap: 2rem;
	margin: 0 auto;
}
.accordion-item .column {
	flex: 1;
}
.accordion-item .column>img {
	height: auto;
	max-width: 25rem;
}
.accordion-item .column span {
	color: #222222;
	font-size: 1.25rem;
	font-weight: 600;
}
.accordion-item .column p {
	color: #555;
	line-height: 1.5;
	margin-bottom: 1.25rem;
}
.accordion-toggle {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.5rem;
	user-select: none;
}
.accordion-item.active .icon-open {
	display: none;
}
.accordion-item.active .icon-close {
	display: inline-block;
}
.accordion-content {
	max-height: 0;
	overflow: hidden;
	padding-top: 1rem;
	padding-left: 1.3rem;
	transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item.active .accordion-content {
	max-height: 425rem;
	/* any value comfortably taller than your tallest content */
}
.accordion-item h3 {
	border-top: 1px solid #bababa;
	font-size: 1.7rem;
	margin: 1.5rem 0 -.4rem 0;
	padding: 1.7rem 0 0 0;
}
h3.accordion-toggle:hover {
	color: #fe0000;
}
.accordion-content.highlight span {
	color: #f65d00;
	margin-bottom: 15px;
}
.accordion-content.highlight ul {
	margin: 0.9375rem 0 1.6875rem 0;
}
.accordion-item .accordion-content h4 {
	border-top: none;
}
.accordion-item .accordion-content h4.orange {
	border-top: 1px solid #dcdcdc;
	font-size: 1.5rem;
	margin: 2rem 0 1rem;
	padding: 2rem 0 0;
}
blockquote .quote {
	margin: 2rem auto;
	max-width: 37.5rem;
}
blockquote .bigquote {
	color: #262626;
	display: block;
	font-family: "MinionConceptItalic";
	font-size: 1.3125rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.14;
}
section#description .inner blockquote span {
	margin: 0;
	padding: 0;
}
blockquote a, blockquote span.smalltext {
	font-family: "SourceSansPro-It";
	font-size: 0.875rem;
	line-height: 1.57;
	text-align: left;
}
section#description .inner blockquote span.smalltext {
	color: #535353;
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 300;
	padding-left: 2rem;
}
.page blockquote a {
	color: #f65d00;
}
.gray-bar {
	background: #F4F5F5;
	border: 0.0625rem solid #EAEAEB;
	height: 1.875rem;
}
.bottom-bar {
	margin-top: 1rem;
}
/* ---------- Responsive: sidebar moves to top, single column ---------- */

/*==========================================================================*/

@media all and (max-width: 1200px) {}
@media all and (max-width: 900px) {
	.layout {
		display: block;
	}
	.top-bar {
		padding: 1.5rem 0 0 0;
	}
	#intro a.download-link {
		margin-top: 1.1875rem;
	}
	.inner {
		padding: 2.5rem 2rem 1.5rem 2rem;
	}
	.product-header {
		justify-content: unset;
	}
	.product-header .text-block {
		flex: 1;
	}
	main.content {
		border: none;
		color: #000;
	}
	.row-flex {
		flex-direction: column;
	}
	.flex-box {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
		flex-wrap: wrap;
	}
	.flex-box>div:first-child {
		flex: 1 1 45%;
		min-width: 200px;
	}
	.price-tag {
		display: block;
		text-align: center;
	}
	.top-bar .breadcrumb .separator {
		background-image: url("/products/applications/img/arrow-left-gray.svg");
	}
	.accordion-item h3 {
		margin: 2rem 0 0;
		padding: 2rem 0 0 0;
	}
	.accordion-item .accordion-content h4.orange {
		margin: 2rem 0 1rem;
		padding: 2rem 0 0;
	}
	.red-bullets+p {
		padding: 1.5rem 0;
	}
	.rows-wrapper, .accordion-item .row-flex {
		margin: 0;
	}
	section#description .red-bullets+p {
		padding: 1rem 0 1.5rem 0;
	}
	section#description .inner .caption {
		font-size: .93rem;
		margin-top: 0;
	}
	#features .row-flex>div>img {
		max-width: 450px;
		width: 100%;
	}
}
@media all and (max-width: 600px) {
	.inner {
		padding: 2rem 0 2rem 0
	}
	.page {
		padding: 1rem 1rem 4rem 1rem;
	}
	#intro {
		order: 2;
	}
	.gray-background {
		order: 1;
	}
	.gray-background .inner {
		padding: 1rem 0.8rem 2rem 0.8rem;
	}
	.page {
		padding: 1rem;
	}
	.top-bar {
		align-items: flex-start;
		gap: 0.5rem;
	}
	.feature-list .gray-bullet {
		margin-left: 0.5rem;
		padding-left: 0.625rem;
	}
	.product-header {
		align-items: flex-start;
		justify-content: space-between;
	}
	.product-header h1 {
		line-height: 1;
		padding-bottom: .4rem;
		margin-top: -.4rem
	}
	.price-wrapper {
		padding-bottom: 1rem
	}
	.red-bullets li::before {
		left: -1rem;
		top: 6px
	}
}
@media all and (max-width: 320px) {}
@media print {}