/* @override http://dev.echodot.com/static/echodot/css/base.css
	http://127.0.0.1:8000/static/echodot/css/base.css */
html{
	background-color: #2d2a43;
	scroll-behavior: smooth;
}
body{
	background-color: #f6f5f2;
	color: #211f2d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.container-wrapper{
	background-image:
		radial-gradient(circle at 85% 5%, rgba(237, 208, 111, .2), transparent 28rem),
		linear-gradient(to bottom, #fff 0%, #f6f5f2 100%);
	padding: 0px 0px;
}

.site-navbar {
	min-height: 76px;
	padding: .75rem 0;
}
.site-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: #211f2d;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.site-brand:hover {
	color: #211f2d;
}
.site-navbar .nav-link {
	color: #595666;
	font-weight: 600;
	margin: 0 .35rem;
}
.site-navbar .nav-link:hover {
	color: #161320;
}



@keyframes front-page-logo-colors {
  0%   {background-position: 0% 0%}
  24%   {background-position: 0% 0%}
  25%  {background-position: 33% 33%}
  49%  {background-position: 33% 33%}
  50%  {background-position: 66% 66%}
  74%  {background-position: 66% 66%}
  75%  {background-position: 99% 99%}
  99%  {background-position: 99% 99%}
}

.logo-colors{
	background: linear-gradient(-45deg, #09ab54 0%, #0b8b55 24.1%, #b69009 24.7%, #bf8209 50%, #eb470c 50.1%, #eb3e0e 74%, #341252 75%, #150b5e 99.7%, #13235c 100%) #150b5e;
	background-size: 400% 400%;
	animation: front-page-logo-colors 60s linear infinite normal;
	margin:  0 auto;
}
.front-page-logo-bg{
	width: 200px;
	height: 210px;
}
#front-page-logo{
	background: url("../img/echodot-logo-inv.82bfb07dc847.png");
	width: 100%;
	height: 100%;

}

.header-logo{
	width: 50px;
	height: 50px;
}
.logo {
	background: url("../img/echodot-logo-inv-sm.567251544caa.png");
	background-size: 50px 50px;
	width: 100%;
	height: 100%;

}

.eyebrow {
	color: #7b4d11;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
	align-items: center;
	gap: clamp(2rem, 7vw, 7rem);
	min-height: 570px;
	padding: clamp(4rem, 9vw, 8rem) 0;
}
.home-hero h1 {
	font-size: clamp(3.25rem, 7vw, 6.5rem);
	font-weight: 800;
	letter-spacing: -.065em;
	line-height: .92;
	margin: 0;
	max-width: 900px;
}
.home-hero h1 span {
	background: linear-gradient(100deg, #087b47, #ce4518 52%, #352065);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.home-hero__lede {
	color: #5c5965;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 1.55;
	margin: 2rem 0;
	max-width: 680px;
}
.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.home-hero__actions .btn {
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	padding: .8rem 1.3rem;
}
.home-hero__mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	color: #6e6a77;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.home-hero__mark .front-page-logo-bg {
	border-radius: 46% 54% 53% 47% / 43% 43% 57% 57%;
	box-shadow: 0 32px 70px rgba(42, 33, 68, .22);
	overflow: hidden;
	transform: rotate(2deg) scale(1.12);
}

.catalog-section {
	scroll-margin-top: 1rem;
	padding: 2rem 0 clamp(5rem, 9vw, 8rem);
}
.catalog-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 2rem;
	margin-bottom: 2rem;
}
.catalog-heading h2,
.home-next h2 {
	font-size: clamp(2.25rem, 4vw, 3.8rem);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: 1;
	margin: 0;
}
.catalog-heading > p {
	color: #6b6873;
	font-size: 1.05rem;
	margin: 0 0 .2rem;
	max-width: 330px;
}
.app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 1.5rem;
}
.app-card {
	--card-accent: #6653a2;
	--card-tint: #f0edf8;
	background: rgba(255, 255, 255, .88);
	border: 1px solid rgba(38, 32, 53, .1);
	border-radius: 28px;
	box-shadow: 0 12px 35px rgba(37, 31, 53, .07);
	color: #262135;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	position: relative;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
}
.app-card::before {
	background: var(--card-accent);
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.app-card:hover {
	border-color: var(--card-accent);
	box-shadow: 0 22px 55px rgba(37, 31, 53, .14);
	color: #262135;
	transform: translateY(-6px);
}
.app-card--red {
	--card-accent: #0a9754;
	--card-tint: #eaf7f0;
}
.app-card--repoman {
	--card-accent: #126ce0;
	--card-tint: #eaf2fe;
}
.app-card--bomba {
	--card-accent: #b63b1c;
	--card-tint: #f9eeeb;
}
.app-card--htmx4 {
	--card-accent: #dc168b;
	--card-tint: #fce8f5;
}
.app-card__topline {
	display: flex;
	gap: .6rem;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.app-card__category,
.app-card__platform {
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .04em;
	padding: .42rem .7rem;
	text-transform: uppercase;
}
.app-card__category {
	background: var(--card-tint);
	color: var(--card-accent);
}
.app-card__platform {
	background: #f0eef2;
	color: #696571;
}
.app-card__image--icon {
	height: 120px;
	margin: .25rem 0 1.5rem;
	object-fit: contain;
	width: 120px;
}
.app-card__image--photo {
	aspect-ratio: 900 / 822;
	border-radius: 18px;
	display: block;
	height: auto;
	margin: .25rem 0 1.5rem;
	object-fit: cover;
	width: 100%;
}
.app-card__body h3 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -.045em;
	margin: .15rem 0 .35rem;
}
.app-card__tagline {
	color: #292431 !important;
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: .75rem !important;
}
.app-card__body p:last-child {
	color: #6b6873;
	line-height: 1.6;
	margin: 0;
	max-width: 410px;
}
.app-card__action {
	align-self: end;
	color: var(--card-accent);
	font-weight: 800;
	margin-top: auto;
	padding-top: 2rem;
	width: 100%;
}
.app-card__action i {
	margin-left: .35rem;
	transition: transform .2s ease;
}
.app-card:hover .app-card__action i {
	transform: translateX(5px);
}

.home-next {
	background: #282437;
	border-radius: 30px;
	color: white;
	margin-bottom: clamp(4rem, 8vw, 7rem);
	padding: clamp(2rem, 6vw, 4.5rem);
}
.home-next .eyebrow {
	color: #e6b64d;
}
.home-next p:last-child {
	color: #c7c3d0;
	font-size: 1.1rem;
	line-height: 1.65;
	margin: 1.25rem 0 0;
	max-width: 650px;
}

.repoman-page {
	padding-top: clamp(2.5rem, 6vw, 5rem);
}
.repoman-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
	align-items: center;
	gap: clamp(2rem, 7vw, 6rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}
.repoman-hero h1 {
	font-size: clamp(3rem, 6.7vw, 6rem);
	font-weight: 800;
	letter-spacing: -.065em;
	line-height: .94;
	margin: 0;
}
.repoman-hero h1 span {
	background: linear-gradient(100deg, #075ecb, #1685ef 55%, #05a3c7);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.repoman-hero__lede {
	color: #5c5965;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.6;
	margin: 1.75rem 0;
	max-width: 720px;
}
.repoman-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}
.repoman-hero__actions > span {
	color: #6b6873;
	font-size: .9rem;
	font-weight: 700;
}
.repoman-download {
	background: #096dd9 !important;
	border-color: #096dd9 !important;
	border-radius: 999px !important;
	font-weight: 750 !important;
	padding: .85rem 1.35rem !important;
}
.repoman-download i,
.repoman-final .btn i {
	margin-right: .45rem;
}
.repoman-release {
	color: #77737e;
	font-size: .85rem;
	margin: 1rem 0 0;
}
.repoman-hero__art {
	position: relative;
}
.repoman-hero__art::before {
	background: radial-gradient(circle, rgba(30, 126, 235, .23), rgba(30, 126, 235, 0) 68%);
	content: "";
	inset: -12%;
	position: absolute;
}
.repoman-hero__art img {
	display: block;
	height: auto;
	position: relative;
	transform: rotate(1.5deg);
	width: 100%;
}
.repoman-proof {
	background: #141923;
	border-radius: 28px;
	color: #fff;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: clamp(5rem, 10vw, 9rem);
	overflow: hidden;
}
.repoman-proof > div {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: clamp(1.6rem, 4vw, 2.6rem);
}
.repoman-proof > div + div {
	border-left: 1px solid rgba(255, 255, 255, .12);
}
.repoman-proof strong {
	color: #73b8ff;
	font-size: clamp(2.2rem, 5vw, 4rem);
	letter-spacing: -.06em;
	line-height: 1;
}
.repoman-proof span {
	color: #c9d0da;
	font-size: .95rem;
}
.repoman-section-heading {
	max-width: 760px;
}
.repoman-section-heading h2,
.repoman-final h2 {
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
	margin: 0;
}
.repoman-section-heading > p:last-child {
	color: #6b6873;
	font-size: 1.1rem;
	line-height: 1.65;
	margin: 1.2rem 0 0;
}
.repoman-window {
	background: #08090c;
	border-radius: 28px;
	box-shadow: 0 32px 80px rgba(25, 29, 38, .2);
	margin: 2.5rem 0 0;
	overflow: hidden;
	padding: clamp(.55rem, 1.5vw, 1rem);
}
.repoman-window img {
	border-radius: 18px;
	display: block;
	height: auto;
	width: 100%;
}
.repoman-features {
	padding: clamp(5rem, 10vw, 9rem) 0;
}
.repoman-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2.5rem;
}
.repoman-feature-grid article {
	background: #fff;
	border: 1px solid rgba(38, 32, 53, .09);
	border-radius: 22px;
	padding: clamp(1.5rem, 4vw, 2.25rem);
}
.repoman-feature-grid article > i {
	color: #0c72dc;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}
.repoman-feature-grid h3 {
	font-size: 1.25rem;
	font-weight: 800;
}
.repoman-feature-grid p {
	color: #6b6873;
	line-height: 1.6;
	margin: .55rem 0 0;
}
.repoman-final {
	background: linear-gradient(125deg, #075ecb, #0b7fe8 58%, #086e95);
	border-radius: 30px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(4rem, 8vw, 7rem);
	padding: clamp(2rem, 6vw, 4rem);
}
.repoman-final .eyebrow {
	color: #bfe2ff;
}
.repoman-final p:last-child {
	color: #d5eaff;
	margin: 1rem 0 0;
}
.repoman-final .btn {
	border-radius: 999px;
	flex: 0 0 auto;
	font-weight: 750;
	padding: .85rem 1.25rem;
}

@media (max-width: 767.98px) {
	.site-navbar .navbar-collapse {
		background: rgba(255, 255, 255, .96);
		border: 1px solid rgba(38, 32, 53, .08);
		border-radius: 16px;
		margin-top: .75rem;
		padding: .75rem;
	}
	.site-navbar .btn {
		margin-top: .5rem;
	}
	.home-hero {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 3.5rem 0 5rem;
	}
	.home-hero__mark {
		display: none;
	}
	.catalog-heading {
		align-items: start;
		flex-direction: column;
		gap: .75rem;
	}
	.repoman-hero {
		grid-template-columns: 1fr;
	}
	.repoman-hero__art {
		margin: 0 auto;
		max-width: 340px;
		order: -1;
	}
	.repoman-proof {
		grid-template-columns: 1fr;
	}
	.repoman-proof > div + div {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
	.repoman-feature-grid {
		grid-template-columns: 1fr;
	}
	.repoman-final {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 420px) {
	.home-hero h1 {
		font-size: 3rem;
	}
	.app-card__image--icon {
		margin: 0 0 1rem;
	}
}
.page-title{
	text-align: center;
	font-size: 2rem;
	font-weight:200;
	color: #886a00;
}
.lead{
	text-align: center;
	font-size: 2rem;
	color: #eb3e0e;
}

a.card-link,
a.card-link:hover {
  color: inherit;
}

footer{
	background-color: #2d2a43;
	color: #d0d0d0;

}
footer a:link, footer a:visited{
	color: #d0d0d0;
}
.company-info{
	color: #8e9092;
	font-weight:300
}
a.card.active {
	background-color: #0b8b55!important;
	color: white!important;
	text-shadow: rgba(0,0,0,.5) 0 -1px 1px;
}


.angle-container {
	margin-top: -50px;
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
	padding-top: 50px;
	padding-bottom: 50px;
	width: 100%;
	
}
.angle-container a{
	text-decoration: none;
}
.angle-container:hover{
	clip-path: polygon(0 20px, 100% 40px, 100% 100%, 0 100%);
	transition: all .2s ease-in-out;
}
.angle-container h1 {
	text-shadow: 0 -1px 1px rgba(0,0,0,.5);
}

.red-container {
	background-image: url("../img/alpha_fleck_2.0be52ffcb03d.png"), linear-gradient(to bottom, #ab1c08 0%, #780707 100%);
	color: #f8f8f8;
}

.red-container a:link, .red-container a:visited{
	color: #8cf7fc;
}


.green-container {
	background-image: url("../img/alpha_fleck_2.0be52ffcb03d.png"), linear-gradient(to bottom, #09ab54 0%, #07783b 100%);
	color: #f8f8f8;
}

.green-container a:link, .green-container a:visited{
	color: #8cf7fc;
}
.green-container .lead {
	color: #f4f4f4;

}


.yellow-container {
	background-image: url("../img/alpha_fleck_2.0be52ffcb03d.png"), linear-gradient(to bottom, #e1b20b 0%, #b69009 100%);
	color: #f8f8f8;
}
.yellow-container  a:link, .red-container a:visited{
	color: #3d3aff;
}
.yellow-container a.btn{
	color:white!important;
}




.orange-container {
	background-image: url("../img/alpha_fleck_2.0be52ffcb03d.png"), linear-gradient(to bottom, #f56942 0%, #eb3e0e 100%);
	color: #f8f8f8;
}

.sunk-container {
	background-image: url("../img/alpha_fleck_2.0be52ffcb03d.png"), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.01) 100%);
	color: #f8f8f8;
	box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.42);
}

.btn.btn-primary{
	border-radius: 7px;
	background-image: linear-gradient(179deg, #6FB4F7 5%, #1A82FB 100%);
	border-color:#3082F9;
	/* Borders with gradient fills are currently not supported when copying CSS */
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.20);
}

.btn.btn-download svg{
	margin-right: 5px;
}
.btn.btn-download {
	font-size: 36px;
	border-radius: 8px;
	padding-left: 20px;
	padding-right: 20px;
}