/* latin-ext */
@font-face {
	font-family: 'SUSE';
	font-style: normal;
	font-weight: 400;
	src: url('../webfonts/suse-MwQ5bhb078Wt2VFBPbh5uGMHjA.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'SUSE';
	font-style: normal;
	font-weight: 400;
	src: url('../webfonts/suse-MwQ5bhb078Wt2V9BPbh5uGM.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'SUSE';
	font-style: normal;
	font-weight: 500;
	src: url('../webfonts/suse-MwQ5bhb078Wt2VFBPbh5uGMHjA.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'SUSE';
	font-style: normal;
	font-weight: 500;
	src: url('../webfonts/suse-MwQ5bhb078Wt2V9BPbh5uGM.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'SUSE';
	font-style: normal;
	font-weight: 600;
	src: url('../webfonts/suse-MwQ5bhb078Wt2VFBPbh5uGMHjA.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'SUSE';
	font-style: normal;
	font-weight: 600;
	src: url('../webfonts/suse-MwQ5bhb078Wt2V9BPbh5uGM.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../webfonts/inter-UcCo3FwrK3iLTcvsYwYZ8UA3J58.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../webfonts/inter-UcCo3FwrK3iLTcviYwYZ8UA3.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-neutral-100: #ffffff;
  --color-neutral-200: #f9f9f9;
  --color-neutral-300: #e9eeee;
  --color-neutral-400: #cad8d8;
  --color-neutral-500: #b0c5c5;
  --color-neutral-600: #666666;
  --color-neutral-800: #000000;
  --color-neutral-900: #000000;
  --color-green: #74b499;
  --color-red: #de495a;
  --color-yellow: #ffa125;
  --color-grey:  #4f5159;
  --color-grey-contrast: #30313d;
  --color-gold: #daa520;
  --color-silver: #c0c0c0;
  --color-bronze: #cd7f32;
}

body {
	position: relative;
	margin: 0;
	font-family: "SUSE", sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	color: var(--color-neutral-800);
	-webkit-font-smoothing: antialiased;
	margin-top: 80px;
	background: #f8f9fa;
	line-height: 1.2;
	min-height: calc(100vh + 10px); /* Allow scroll to enable lazy loading on larger screens */
	min-height: calc(100svh + 10px); /* Allow scroll to enable lazy loading on larger screens */
	overflow-x: hidden;
}

@media screen and (max-width: 799px) {
	body {
		margin-top: 0;
	}
}

body.widget {
	margin-top: 0;
	background: transparent;
	min-height: auto;
}

body.fixed-height {
	overflow: hidden;
	min-height: auto;
}

body.fullscreen {
	margin-top: 0;
	min-height: auto;
}

small {
	font-size: inherit;
}

strong,
.strong {
	font-weight: 500;
	opacity: 1;
}

b {
	font-weight: 500;
	opacity: 1;
}

.capitalize::first-letter {
	text-transform: capitalize;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'SUSE', sans-serif;
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0;
}

h1 {
	font-size: 100px;
}

h2 {
	font-size: 75px;
}

h1,
h2 {
	text-transform: none;
	margin-top: 60px;
	margin-bottom: 20px;
	letter-spacing: -3px;
	line-height: 1;
	font-family: 'Inter', sans-serif;
}

h1:first-child,
h2:first-child {
	margin-top: 0;
}

h1.smaller-initiative {
	font-size: 80px;
}

.js-edit-presentation-wrapper h2,
.widget-editor-presentation-wrapper h2 {
	font-size: 60px;
}

@media screen and (max-width: 799px) {
	h1,
	h1.smaller-initiative {
		font-size: 45px;
		letter-spacing: -2px;
	}

	h2,
	.js-edit-presentation-wrapper h2,
	.widget-editor-presentation-wrapper h2 {
		font-size: 40px;
		letter-spacing: -2px;
	}
}

h1.smaller {
	font-size: 32px;
	margin-bottom: 20px;
	margin-top: 0;
	letter-spacing: -1.5px;
}

h1.smaller-left {
	font-size: 28px;
	margin-bottom: 20px;
	margin-top: 0;
	letter-spacing: -1.5px;
}

h3 {
	font-size: 32px;
	text-transform: none;
	margin-top: 40px;
	margin-bottom: 20px;
	letter-spacing: -1.5px;
}

@media screen and (max-width: 799px) {
	h3 {
		font-size: 30px;
		letter-spacing: -1.5px;
	}
}

.popup h3 {
	font-size: 32px;
	letter-spacing: -1.5px;
}

@media screen and (max-width: 799px) {
	.popup h3 {
		font-size: 30px;
		letter-spacing: -1.5px;
	}
}

.box-md > h3 {
	margin-top: 0;
}

.box-md > h3.margin-top {
	margin-top: 20px;
}

h4 {
	font-size: 22px;
	margin-bottom: 20px;
}

h4.smaller {
	font-family: 'SUSE', sans-serif;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
}

h4.smaller.margin-bottom {
	margin-bottom: 20px;
}

h5 {
	margin: 0;
    font-size: 16px;
    font-family: 'SUSE', sans-serif;
    font-weight: 500;
}

label,
.label {
	display: block;
	font-family: "SUSE", sans-serif;
	font-weight: 500;
	opacity: 1;
	text-transform: none;
	margin-bottom: 10px;
}

.small {
	font-size: 14px;
}

a {
	color: var(--color-neutral-800);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

	a:not(:has(.menu-item)):hover {
		filter: brightness(0.95);
	}

	a.legal:hover {
		filter: none;
	}

}

sup {
	vertical-align: middle;
}

p {
	font-size: 18px;
	margin-top: 0;
	font-weight: 400;
	opacity: 0.9;
}

p > a,
.text-link,
u,
ol.body a,
ul.body a,
div.body a {
	text-decoration: underline;
	text-decoration: underline solid lightgrey 15%;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: #cccccc;
	text-decoration-thickness: 2px;
}

@media (hover: hover) and (pointer: fine) {
	p > a:hover,
	.text-link:hover,
	u:hover,
	ol.body a:hover,
	ul.body a:hover,
	div.body a:hover {
		text-decoration-color: var(--color-neutral-800);
	}
	.dark-bg p > a:hover,
	.dark-bg .text-link:hover,
	.dark-bg u:hover,
	.dark-bg ol.body a:hover,
	.dark-bg ul.body a:hover,
	.dark-bg div.body a:hover {
		text-decoration-color: var(--color-neutral-100);
	}
}

.js-activityblock p:last-child {
	margin-bottom: 0;
}

.text-section p:last-child {
	margin-bottom: 0;
}

.widget-editor-presentation-wrapper .section:last-child {
	margin-bottom: 0;
}

p.lead {
	font-size: 28px;
	letter-spacing: -1px;
}

@media screen and (max-width: 799px) {
	p.lead {
		font-size: 22px;
		letter-spacing: -0.5px;
	}
}

.js-activityblock-feedpost {
	position: relative; 
	overflow: hidden; 
	padding: 20px 30px 30px 30px;
}

.js-activityblock-feedpost p {
	font-size: 18px;
}

ul {
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: 0;
	padding-left: 0;
	font-size: 16px;
	font-weight: 400;
}

ol {
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: 0;
	padding-left: 0;
	font-size: 16px;
	font-weight: 400;
}

/*
div ol:last-of-type,
div ul:last-of-type {
	margin-bottom: 0;
}
*/

ol li,
ul li {
	margin-bottom: 10px;
	margin-left: 16px;
}

ol li:last-child,
ul li:last-child {
	margin-bottom: 0;
}

ol li li:first-child,
ul li li:first-child {
	margin-top: 10px;
}

ol.body,
ul.body,
div.body ol,
div.body ul {
	font-size: 18px;
	opacity: 0.9;
}

ul.body li,
ol.body li,
div.body li {
	margin-bottom: 20px;
}

ul.body li:last-child,
ol.body li:last-child,
div.body li:last-child {
	margin-bottom: 0;
}

ul.body li li,
ol.body li li,
div.body li li {
	margin-bottom: 0;
	list-style-position: outside;
    margin-left: 18px;
}

.one-line {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	line-clamp: 1; 
	-webkit-box-orient: vertical;
}

.two-lines {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* number of lines to show */
	line-clamp: 2; 
	-webkit-box-orient: vertical;
}

.three-lines {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* number of lines to show */
	line-clamp: 3; 
	-webkit-box-orient: vertical;
}

.figure {
	font-weight: 600;
	font-size: 22px;
}

.figure-lg {
	font-weight: 600;
	font-size: 30px;
}

.light {
	opacity: 0.6;
}

.extralight {
	opacity: 0.4;
}

.darken {
	filter: brightness(0.8);
}

.bull {
	opacity: 0.3;
	margin: 0 3px;
}

/* REMOVE THIS AFTER ADDING RESET */

div {
	box-sizing: border-box;
}

/* END  */

div.clear {
	clear: both;
}

@media (min-width: 1200px) {
	.grid-lg-12 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(12, 1fr);
	}
	.grid-lg-11 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(11, 1fr);
	}
	.grid-lg-10 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(10, 1fr);
	}
	.grid-lg-9 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(9, 1fr);
	}
	.grid-lg-8 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(8, 1fr);
	}
	.grid-lg-7 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(7, 1fr);
	}
	.grid-lg-6 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(6, 1fr);
	}
	.grid-lg-5 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(5, 1fr);
	}
	.grid-lg-4 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-lg-3 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-lg-2 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-lg-1 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(1, 1fr);
	}
	.grid-lg-span-2-columns {
		grid-column: span 2;
	}
	.grid-lg-span-3-columns {
		grid-column: span 3;
	}
	.grid-lg-span-4-columns {
		grid-column: span 4;
	}
	.grid-lg-span-5-columns {
		grid-column: span 5;
	}
	.grid-lg-span-6-columns {
		grid-column: span 6;
	}
	.grid-lg-span-7-columns {
		grid-column: span 7;
	}
	.grid-lg-span-8-columns {
		grid-column: span 8;
	}
	.grid-lg-span-9-columns {
		grid-column: span 9;
	}
	.grid-lg-span-10-columns {
		grid-column: span 10;
	}
	.grid-lg-span-11-columns {
		grid-column: span 11;
	}
	.grid-lg-span-12-columns {
		grid-column: span 12;
	}
}

@media (min-width: 800px) and (max-width: 1199px) {
	.grid-md-12 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(12, 1fr);
	}
	.grid-md-11 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(11, 1fr);
	}
	.grid-md-10 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(10, 1fr);
	}
	.grid-md-9 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(9, 1fr);
	}
	.grid-md-8 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(8, 1fr);
	}
	.grid-md-7 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(7, 1fr);
	}
	.grid-md-6 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(6, 1fr);
	}
	.grid-md-5 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(5, 1fr);
	}
	.grid-md-4 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-md-3 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-md-2 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-md-1 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(1, 1fr);
	}
	.grid-md-span-2-columns {
		grid-column: span 2;
	}
	.grid-md-span-3-columns {
		grid-column: span 3;
	}
	.grid-md-span-4-columns {
		grid-column: span 4;
	}
	.grid-md-span-5-columns {
		grid-column: span 5;
	}
	.grid-md-span-6-columns {
		grid-column: span 6;
	}
	.grid-md-span-7-columns {
		grid-column: span 7;
	}
	.grid-md-span-8-columns {
		grid-column: span 8;
	}
	.grid-md-span-9-columns {
		grid-column: span 9;
	}
	.grid-md-span-10-columns {
		grid-column: span 10;
	}
	.grid-md-span-11-columns {
		grid-column: span 11;
	}
	.grid-md-span-12-columns {
		grid-column: span 12;
	}
}

@media (max-width: 799px) {
	.grid-sm-12 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(12, 1fr);
	}
	.grid-sm-11 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(11, 1fr);
	}
	.grid-sm-10 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(10, 1fr);
	}
	.grid-sm-9 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(9, 1fr);
	}
	.grid-sm-8 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(8, 1fr);
	}
	.grid-sm-7 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(7, 1fr);
	}
	.grid-sm-6 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(6, 1fr);
	}
	.grid-sm-5 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(5, 1fr);
	}
	.grid-sm-4 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-sm-3 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-sm-2 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-sm-1 {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(1, 1fr);
	}
	.grid-sm-span-2-columns {
		grid-column: span 2;
	}
	.grid-sm-span-3-columns {
		grid-column: span 3;
	}
	.grid-sm-span-4-columns {
		grid-column: span 4;
	}
	.grid-sm-span-5-columns {
		grid-column: span 5;
	}
	.grid-sm-span-6-columns {
		grid-column: span 6;
	}
	.grid-sm-span-7-columns {
		grid-column: span 7;
	}
	.grid-sm-span-8-columns {
		grid-column: span 8;
	}
	.grid-sm-span-9-columns {
		grid-column: span 9;
	}
	.grid-sm-span-10-columns {
		grid-column: span 10;
	}
	.grid-sm-span-11-columns {
		grid-column: span 11;
	}
	.grid-sm-span-12-columns {
		grid-column: span 12;
	}
}

.grid-gap-0 {
	gap: 0;
}

.grid-gap-1 {
	gap: 1px;
}

.grid-gap-10 {
	gap: 10px;
}

.grid-gap-20 {
	gap: 20px;
}

.grid-gap-50 {
	gap: 50px;
}

.grid-gap-100 {
	gap: 100px;
}

@media (max-width: 1199px) {
	.grid-gap-100 {
		gap: 50px;
	}
}

.grid-center {
	align-items: center;
}

/* REMOVE THIS AFTER ADDING GRID */

div.col-sm-12 {
	width: 100%;
	float: left;
	padding:0 10px;
}

div.col-sm-8 {
	width: 66.6667%;
	float: left;
	padding:0 10px;
}

div.col-sm-6 {
	width: 50%;
	float: left;
	padding:0 10px;
}

div.col-sm-4 {
	width: 33.3333%;
	float: left;
	padding:0 10px;
}

div.col-sm-3 {
	width: 25%;
	float: left;
	padding:0 10px;
}

@media screen and (min-width: 800px) {
	div.col-md-1 {
		width: 8.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-2 {
		width: 16.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-3 {
		width: 25%;
		float: left;
		padding:0 10px;
	}
	div.col-md-4 {
		width: 33.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-5 {
		width: 41.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-6 {
		width: 50%;
		float: left;
		padding:0 10px;
	}
	div.col-md-7 {
		width: 58.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-8 {
		width: 66.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-9 {
		width: 75%;
		float: left;
		padding:0 10px;
	}
	div.col-md-10 {
		width: 83.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-11 {
		width: 91.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-12 {
		width: 100%;
		float: left;
		padding:0 10px;
	}
}

@media (min-width: 800px) {
	div.col-md-1 {
		width: 8.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-2 {
		width: 16.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-3 {
		width: 25%;
		float: left;
		padding:0 10px;
	}
	div.col-md-4 {
		width: 33.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-5 {
		width: 41.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-6 {
		width: 50%;
		float: left;
		padding:0 10px;
	}
	div.col-md-7 {
		width: 58.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-8 {
		width: 66.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-9 {
		width: 75%;
		float: left;
		padding:0 10px;
	}
	div.col-md-10 {
		width: 83.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-md-11 {
		width: 91.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-md-12 {
		width: 100%;
		float: left;
		padding:0 10px;
	}
}

@media screen and (min-width: 1200px) {
	div.col-lg-1 {
		width: 8.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-2 {
		width: 16.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-3 {
		width: 25%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-4 {
		width: 33.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-5 {
		width: 41.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-6 {
		width: 50%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-7 {
		width: 58.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-8 {
		width: 66.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-9 {
		width: 75%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-10 {
		width: 83.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-11 {
		width: 91.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-12 {
		width: 100%;
		float: left;
		padding:0 10px;
	}
	div.fixed-column-height-lg {
		min-height:350px;
	}
}

@media (min-width: 1200px) {
	div.col-lg-1 {
		width: 8.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-2 {
		width: 16.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-3 {
		width: 25%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-4 {
		width: 33.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-5 {
		width: 41.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-6 {
		width: 50%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-7 {
		width: 58.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-8 {
		width: 66.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-9 {
		width: 75%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-10 {
		width: 83.3333%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-11 {
		width: 91.6667%;
		float: left;
		padding:0 10px;
	}
	div.col-lg-12 {
		width: 100%;
		float: left;
		padding:0 10px;
	}
}

/* END */

/* REMOVE THIS AFTER ADDING GRID */

.box-50 {
	float: left;
	width: 50%;
}

.box-100 {
	width: 100%;
}

/* END */

/* REMOVE THIS AFTER FIXING CONTAINERS */

@media screen and (max-width: 1199px) {
	div.padding-md {
		padding:0 40px;
	}
}

@media screen and (max-width: 799px) {
	div.padding-sm {
		padding:0 20px;
	}
	div.padding-sm-compact {
		padding:0 10px;
	}
}

/* END */

header {
	background: rgb(255 255 255 / 80%);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	padding: 27px 20px 32px 100px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 30;
	height: 80px;
	box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
	header:hover {
		background: var(--color-neutral-100);
	}
}

header.header-transparent {
	background: none;
	backdrop-filter: none;
	box-shadow: none;
	filter: invert(1) brightness(2);
}

header nav {
	display: inline;
}

@media screen and (max-width: 499px) {
	header {
		padding: 18px 20px 22px 60px;
	}
}

@media screen and (max-width: 799px) {
	header {
		display: none;
	}
}

header .header-feed,
header span.header-more,
header span.header-explore,
header span.header-donations,
header span.header-about {
	font-family: "SUSE", sans-serif;
	font-weight: 500;
	font-size: 18px;
	padding: 20px 20px 21px 20px;
	margin: -10px 0 0 0;
	/* color: var(--color-neutral-100); */
}

header .header-feed.active,
header span.active {
    padding: 20px 20px 18px 20px;
    margin: -10px 0 0 0;
    text-decoration: underline;
    text-decoration: underline solid var(--color-neutral-800);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-neutral-800);
    text-decoration-thickness: 2px;
}

header span.header-icon {
	padding: 20px 0 20px 0;
	margin: -10px 15px 0 0;
}

.header-logo {
	position: absolute;
	top: 10px;
	left: 20px;
}

.header-logo img {
	height: 60px;
	width: 60px;
}

.header-logo-center {
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	height: 60px;
	margin: auto;
}

footer > .mobile-tabs {
	position: fixed;
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: calc(100% - 10px);
    z-index: 51;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgb(255 255 255 / 80%);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 200px;
}

footer > .mobile-tabs div.footer-tab,
footer > .mobile-tabs > span > div.footer-tab {
	float: left; 
	width: 25%; 
	text-align: center;
	cursor: pointer;
	padding: 7.5px 0;
}

.lazy-loading-spacer {
	height: 500px;
}

.menu-item {
	position: relative; 
	border-radius: 50px; 
	height: 80px; 
	width: 100%;
	display: flex; 
	justify-content: center; 
	padding: 10px 75px 10px 80px;
	color: var(--color-neutral-800);
	font-weight: 500;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 0 100px 0 rgba(150,150,150,0.2);
}

.menu-item > img, 
.menu-item > a > img {
	width: 40px; 
	display: inline-block;
	margin: 10px; 
	padding: 10px;
	position: absolute; 
	top: 0; 
	left: 0;
	background: var(--color-neutral-300);
	filter: grayscale(0.5);
	transition: transform 0.2s;
}

.menu-item.bg-100,
.menu-item.bg-300 {
	background: var(--color-neutral-300);
	box-shadow: none;
}

.menu-item.bg-100 > img, 
.menu-item.bg-100 > a > img,
.menu-item.bg-300 > img, 
.menu-item.bg-300 > a > img {
	background: var(--color-neutral-100);
}

.menu-item > img.img-expand, 
.menu-item > a > img.img-expand {
	height: 60px; 
	width: 60px; 
	padding: 0;
	object-fit: cover;
}

.menu-item-sm > img.img-expand, 
.menu-item-sm > a > img.img-expand {
	height: 50px; 
	width: 50px; 
	padding: 0;
	object-fit: cover;
}

.menu-item > i {
	position: absolute; 
	top: 0; 
	right: 30px; 
	line-height: 80px;
	color: var(--color-neutral-600) !important;
}

.menu-item > label {
	cursor: pointer;
}

.menu-item .small {
	font-weight: 400;
}

.menu-item-badge {
	position: absolute; 
	top: 22.5px; 
	right: 20px;
}

.menu-item-sm {
	height: 70px;
	padding-left: 70px;
}

.menu-item-sm > img {
	height: 40px;
    width: 40px;
    padding: 5px;
	transition: transform 0.2s;
}

.menu-item-sm > i {
	line-height: 70px;
	opacity: 0.4;
	font-size: 14px;
}

.menu-item-sm .menu-item-badge {
	top: 17.5px; 
}

.menu-item-sm.selected {
	background: var(--color-neutral-400);
    border: 0;
    box-shadow: none;
}

.menu-item-sm.selected img {
	background: var(--color-neutral-200);
	margin: 10px;
}

.menu-item-sm.selected > i {
	line-height: 70px;
}

.menu-item-sm.selected .menu-item-badge {
	top: 16.5px; 
	background: var(--color-neutral-200);
}

@media (hover: hover) and (pointer: fine) {

	.menu-item.box-hover:hover {
		filter: brightness(1);
	}

	.menu-item:hover > img,
	.menu-item:hover > a > img,
	.menu-item-sm:hover > img {
		transform: scale(1.15);
	}

}

.page-wrapper {
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.container {
	max-width: 500px; 
	margin-right: auto;
	margin-left: auto;
	padding-left: 0;
	padding-right: 0;
}

@media screen and (min-width: 800px) {
	.container {
		max-width: 1000px; 
		padding-top: 40px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media screen and (min-width: 1200px) {
	.container {
		max-width: 1200px;
		padding-top: 40px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

.container-features {
	max-width: 500px; 
	margin-right: auto;
	margin-left: auto;
}

@media screen and (min-width: 800px) {
	.container-features {
		max-width: 1000px; 
		padding-top: 40px;
	}
}

@media screen and (min-width: 1200px) {
	.container-features {
		max-width: 1200px;
		padding-top: 40px;
	}
}

.container-quote {
	position: relative; 
	overflow: hidden;
	height: 100vh;
	height: 100svh;
	max-height: 1800px;
}

.container-quote.elevate-light {
	margin-left: 10px;
	margin-right: 10px;
}

.container-quote video {
	position: absolute; 
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: auto;
	z-index: 1;
}

.container-full {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	width: 100vw;
    margin-bottom: 40px;
    margin-top: -80px;
    margin-left: calc((100% - 100vw) / 2);
	padding: 120px 100px 120px 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.container-full h1 {
	font-size: 120px;
    display: inline-block;
    max-width: 1050px;
    color: #fff;
    text-shadow: 0 0 50px rgba(0,0,0,0.1);
    margin-bottom: 40px;
    position: relative;
	letter-spacing: -6px;
	line-height: 1.1;
}

.container-full * {
	z-index: 2;
}

.container-full video {
	position: absolute; 
	min-height: calc(100% + 100px); 
	min-width: 100%; 
	width: auto; 
	height: auto; 
	margin: auto;
	z-index: 1;
	filter: grayscale(0.3);
	object-fit: cover;
}

.container-full img.js-mission-alteration-icon {
	width: 230px;
	height: 230px;
	border-radius: 4px;
	margin-top: -60px;
	margin-bottom: -20px;
}

@media screen and (max-width: 1199px) {
	.container-full h1 {
		font-size: 100px;
		letter-spacing: -5px;
	}
}

@media screen and (max-width: 799px) {
	.container-full {
		min-height: calc(100vh + 80px);
		min-height: calc(100svh + 80px);
		padding: 80px 40px 60px 40px;
	}
	.container-full h1 {
		font-size: 60px;
    	margin-bottom: 20px;
		letter-spacing: -3px;
	}
	.container-full img.js-mission-alteration-icon {
		width: 150px;
		height: 150px;
		margin-top: -100px;
		margin-bottom: -20px;
	}
	.container-full .margin-bottom-lg {
		margin-bottom: 10px;
	}
}

.container-lg {
	max-width: calc(100% - 40px); 
	margin-right: auto;
	margin-left: auto;
}

@media screen and (max-width: 799px) {
	.container-lg {
		max-width: 100%;
	}
}

.container-md {
	max-width: 500px;
	margin-right: auto;
	margin-left: auto;
	padding-left: 0;
	padding-right: 0;
}

@media screen and (min-width: 800px) {
	.container-md {
		max-width: 900px; 
		padding-top: 40px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media screen and (min-width: 1200px) {
	.container-md {
		max-width: 900px;
		padding-top: 40px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

.container-sm {
	width: 500px;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-left: 0;
	padding-right: 0;
}

.limit-width {
	display:inline-block; 
	max-width:600px;
}

.follow {
	position: absolute; 
	top: 20px; 
	right: 20px; 
}

.review {
	position: absolute; 
	top: 20px; 
	left: 20px; 
}

.back {
	position: absolute; 
	top: 20px; 
	left: 20px; 
}

@media screen and (min-width: 800px) {

	.container > .follow { 
		top: 40px;
		right: 40px; 
	}

	.container > .review {
		top: 40px;
		left: 40px; 
	}

	.container > .back {
		top: 40px;
		left: 40px; 
	}

}

hr {
	border: 0;
    border-top: 1px solid var(--color-neutral-400);
    margin-top: 50px; 
    margin-bottom: 50px;
}

@media (hover: hover) and (pointer: fine) {

	.box-hover:hover {
		cursor: pointer;
		filter: brightness(0.95);
	}

}

.box-overlay {
	background: lightgrey; 
	opacity: 0.6; 
	position: absolute; 
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}

.box {
	padding: 20px;
}

.box-sm {
	padding: 10px;
}

.box-compact {
	padding: 10px 20px;
}

.box-semi-compact {
	padding: 15px 20px;
}

.box-lg {
	padding: 50px;
}

@media screen and (max-width: 799px) {
	.box-lg {
		padding: 50px 20px;
	}
}

.box-md {
	padding:40px;
}

@media screen and (max-width: 799px) {
	.box-md-sm {
		padding:20px;
	}
	.box-md.js-section {
		padding:20px 40px;
	}
}

.box-xlg {
	padding:100px;
}

@media screen and (max-width: 1199px) {
	.box-xlg {
		padding:100px 50px;
	}
}

@media screen and (max-width: 799px) {
	.box-xlg {
		padding-left:20px;
		padding-right:20px;
	}
}

.box-xxlg {
	padding:150px 100px;
}

@media screen and (max-width: 1199px) {
	.box-xxlg {
		padding:100px 50px;
	}
}

@media screen and (max-width: 799px) {
	.box-xxlg {
		padding-left: 40px;
		padding-right: 40px;
	}
}

.box-panel {
	position: relative; 
	padding: 20px; 
	background: var(--color-neutral-100); 
	border-bottom: 1px solid var(--color-neutral-300); 
	overflow: hidden; 
	/* white-space: nowrap; */
	border-right: 10px solid var(--color-neutral-100);
	display: flex;
	align-items: center;
}

.box-panel.js-header-mini {
	padding: 25px 20px;
}

@media screen and (max-width: 799px) {
	.box-panel.js-header-mini {
		padding: 20px;
	}
}

.box-panel-strong {
	position: relative; 
	padding: 20px; 
	background: var(--color-neutral-300); 
	border-bottom: 1px solid var(--color-neutral-400);
	display: flex;
	align-items: center;
}

.box-panel-wrap {
	overflow: visible; 
	white-space: normal;
}

.box-panel-image {
	height: 50px; 
	vertical-align: middle; 
	margin-right: 10px;
	margin-top: -10px;
	margin-bottom: -10px;
	border-radius: 4px;
}

.box-panel-image-lg {
	height: 60px; 
	vertical-align: middle; 
	margin-right: 10px;
	border-radius: 10px;
}

.box-panel h1,
.box-panel h4,
.box-panel-strong h4 {
	font-size: 16px;
	font-family: "SUSE", sans-serif;
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	line-clamp: 1; 
	-webkit-box-orient: vertical;
	letter-spacing: -0.5px;
}

.box-panel-strong > h4.smaller {
	margin-top: 0;
}

.box-panel > i.fa-arrows-alt-v {
	position: absolute; 
	top: 22px; 
	right: 10px;
}

.box-panel-back {
	float: left;
    height: 40px;
    width: 40px;
	min-width: 40px;
    border-radius: 50%;
    background: var(--color-neutral-300);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -10px 10px -10px 0;
}

.edit-back {
	margin: -10px 5px -10px 0;
}

.box-grow-active {
	transform: scale(1.02);
}

.box-grow {
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {

	.box-grow:hover {
		transform: scale(1.02);
	}

}

.border {
	border: 1px solid var(--color-neutral-300);
}

.border-top {
	border-top: 1px solid var(--color-neutral-300);
}

.border-right {
	border-right: 1px solid var(--color-neutral-300); 
}

.border-bottom {
	border-bottom: 1px solid var(--color-neutral-300); 
}

.border-left {
	border-left: 1px solid var(--color-neutral-300); 
}

.border-strong {
	border: 1px solid var(--color-neutral-400);
}

.bg-300 .bg-300 .border-strong {
	border: 1px solid var(--color-neutral-500);
}

.bg-300 .bg-300 .bg-300 .border-strong {
	border: 1px solid var(--color-neutral-400);
}

.border-top-strong {
	border-top: 1px solid var(--color-neutral-400);
}

.bg-300 .bg-300 .border-top-strong {
	border-top: 1px solid var(--color-neutral-500);
}

.bg-300 .bg-300 .bg-300 .border-top-strong {
	border-top: 1px solid var(--color-neutral-400);
}

.border-right-strong {
	border-right: 1px solid var(--color-neutral-400); 
}

.bg-300 .bg-300 .border-right-strong {
	border-right: 1px solid var(--color-neutral-500);
}

.bg-300 .bg-300 .bg-300 .border-right-strong {
	border-right: 1px solid var(--color-neutral-400);
}

.border-bottom-strong {
	border-bottom: 1px solid var(--color-neutral-400); 
}

.bg-300 .bg-300 .border-bottom-strong {
	border-bottom: 1px solid var(--color-neutral-500);
}

.bg-300 .bg-300 .bg-300 .border-bottom-strong {
	border-bottom: 1px solid var(--color-neutral-400);
}

.border-left-strong {
	border-left: 1px solid var(--color-neutral-400); 
}

.bg-300 .bg-300 .border-left-strong {
	border-left: 1px solid var(--color-neutral-500);
}

.bg-300 .bg-300 .bg-300 .border-left-strong {
	border-left: 1px solid var(--color-neutral-400);
}

@media screen and (min-width: 800px) and (max-width:1199px) {
	.border-top-md {
		border-top: 1px solid var(--color-neutral-300); 
	}
	.border-bottom-md {
		border-bottom: 1px solid var(--color-neutral-300); 
	}
	.border-left-md {
		border-left: 1px solid var(--color-neutral-300); 
	}
	.border-right-md {
		border-right: 1px solid var(--color-neutral-300); 
	}
}

@media screen and (min-width: 1200px) {
	.border-top-lg {
		border-top: 1px solid var(--color-neutral-300); 
	}
	.border-bottom-lg {
		border-bottom: 1px solid var(--color-neutral-300); 
	}
	.border-left-lg {
		border-left: 1px solid var(--color-neutral-300); 
	}
	.border-right-lg {
		border-right: 1px solid var(--color-neutral-300); 
	}
}

@media screen and (max-width: 799px) {
	.border-top-sm {
		border-top: 1px solid var(--color-neutral-300); 
	}
	.border-bottom-sm {
		border-bottom: 1px solid var(--color-neutral-300); 
	}
	.border-left-sm {
		border-left: 1px solid var(--color-neutral-300); 
	}
	.border-right-sm {
		border-right: 1px solid var(--color-neutral-300); 
	}
}

div.no-padding {
	padding: 0;
}

div.no-padding-left {
	padding-left: 0;
}

div.no-padding-right {
	padding-right: 0;
}

div.no-padding-top {
	padding-top: 0;
}

div.no-padding-bottom {
	padding-bottom: 0;
}

@media screen and (max-width: 799px) {
	.no-padding-sm {
		padding:0;
	}
	.less-padding-top-sm {
		padding-top: 50px;
	}
	.less-padding-right-sm {
		padding-right: 50px;
	}
	.less-padding-bottom-sm {
		padding-bottom: 50px;
	}
	.less-padding-left-sm {
		padding-left: 50px;
	}
	.no-padding-top-sm {
		padding-top: 0;
	}
	.no-padding-right-sm {
		padding-right: 0;
	}
	.no-padding-bottom-sm {
		padding-bottom: 0;
	}
	.no-padding-left-sm {
		padding-left: 0;
	}
}

@media screen and (max-width: 1199px) {
	.less-padding-top-md {
		padding-top: 50px;
	}
	.less-padding-right-md {
		padding-right: 50px;
	}
	.less-padding-bottom-md {
		padding-bottom: 50px;
	}
	.less-padding-left-md {
		padding-left: 50px;
	}
	.no-padding-top-md {
		padding-top: 0;
	}
	.no-padding-right-md {
		padding-right: 0;
	}
	.no-padding-bottom-md {
		padding-bottom: 0;
	}
	.no-padding-left-md {
		padding-left: 0;
	}
}

/* REMOVE THIS AFTER ADDING GRID */

@media screen and (min-width: 1200px) {
	.padding-fix-lg {
		margin-right: -10px;
		margin-left: -10px;
	}
}

/* END */

.no-margin {
	margin: 0 !important;
}

.margin-left {
	margin-left: 20px;
}

.margin-left-sm {
	margin-left: 10px;
}

.margin-left-xs {
	margin-left: 5px;
}

.margin-left-lg {
	margin-left: 50px;
}

.margin-left-xlg {
	margin-left: 100px;
}

.margin-left-xxlg {
	margin-left: 200px;
}

.margin-right {
	margin-right: 20px;
}

.margin-right-sm {
	margin-right: 10px;
}

.margin-right-xs {
	margin-right: 5px;
}

.margin-right-lg {
	margin-right: 50px;
}

.margin-right-xlg {
	margin-right: 100px;
}

.margin-right-xxlg {
	margin-right: 200px;
}

.margin-top {
	margin-top: 20px;
}

.margin-top-sm {
	margin-top: 10px;
}

.margin-top-xs {
	margin-top: 5px;
}

.margin-top-lg {
	margin-top: 50px;
}

.margin-top-xlg {
	margin-top: 100px;
}

.margin-top-xxlg {
	margin-top: 200px;
}

.margin-bottom {
	margin-bottom: 20px;
}

.margin-bottom-sm {
	margin-bottom: 10px;
}

.margin-bottom-xs {
	margin-bottom: 5px;
}

.margin-bottom-lg {
	margin-bottom: 50px;
}

.margin-bottom-xlg {
	margin-bottom: 100px;
}

.margin-bottom-xxlg {
	margin-bottom: 200px;
}

@media screen and (min-width: 1720px) {
	.wide-screen-margin-top {
		margin-top:110px;
	}
}

.scrollable-blocks {
	 display: flex; 
	 gap: 20px; 
	 flex-wrap: nowrap; 
	 overflow-x: hidden;
	 padding: 100px 50px 50px 50px;
	 justify-content: flex-start;
}

@media screen and (max-width: 799px) {
	.scrollable-blocks {
		padding: 100px 10px 50px 10px;
	}
}

.scrollable-blocks > div {
	display: inline-block; 
	flex: 0 0 350px;
}

@media screen and (max-width: 799px) {
	.scrollable-blocks > div {
		flex: 0 0 calc(100%);
	}
}

.js-scrollable-blocks-dots {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	margin: auto;
}

.js-scrollable-blocks-dots .fa-circle {
	font-size: 8px;
	margin-left: 5px;
	margin-right: 5px;
}

.svg-200 {
	height: 200px;
	width: 200px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-170 {
	height: 170px;
	width: 170px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-160 {
	height: 160px;
	width: 160px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-150 {
	height: 150px;
	width: 150px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-140 {
	height: 140px;
	width: 140px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-130 {
	height: 130px;
	width: 130px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-120 {
	height: 120px;
	width: 120px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-110 {
	height: 110px;
	width: 110px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-100 {
	height: 100px;
	width: 100px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-80 {
	height: 80px;
	width: 80px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-70 {
	height: 70px;
	width: 70px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-60 {
	height: 50px;
	width: 50px;
	border-radius: 5px;
	-webkit-filter: grayscale(0.5);
  	filter: grayscale(0.5);
	background: var(--color-neutral-200);
	padding: 5px;
}

.svg-50 {
	height: 50px;
	width: 50px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-55 {
	height: 55px;
	width: 55px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-45 {
	height: 45px;
	width: 45px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-40 {
	height: 40px;
	width: 40px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-35 {
	height: 35px;
	width: 35px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-30 {
	height: 30px;
	width: 30px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-25 {
	height: 25px;
	width: 25px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-20 {
	height: 20px;
	width: 20px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-15 {
	height: 15px;
	width: 15px;
	-webkit-filter: grayscale(0.75);
  	filter: grayscale(0.75);
}

.svg-icon-transparent {
	cursor: pointer;
	opacity: 0.7; 
	vertical-align: middle;
	width: 23px;
	height: 23px;
}

.svg-icon {
	cursor: pointer;
	opacity: 0.85; 
	vertical-align: middle;
	background: var(--color-neutral-300); 
	border-radius: 50%; 
	padding: 15px;
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
  	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {

	.svg-icon:hover {
		opacity: 0.99;
		filter: brightness(0.95);
		transform: scale(1.1);
	}

}

.svg-icon-active {
	opacity: 0.6;
}

.svg-icon-count {
	font-family: "SUSE", sans-serif;
	font-size: 14px;
	font-weight: 500;
	opacity: 1;
	text-transform: none;
	margin-right: 10px; 
	margin-left: 2px;
}

.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 40ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.spin-slow {
    -webkit-animation-name: spin-slow;
    -webkit-animation-duration: 15000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: spin-slow;
    animation-duration: 15000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.img-circle {
	border-radius: 50%;
}

/* REMOVE THIS AFTER ADDING RESET */

.img-responsive {
	width: 100%;
	display: block;
}

/* END */

.btn {
	font-family: 'SUSE', sans-serif;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	white-space: nowrap;
	padding: 0 25px;
	border-radius: 200px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	touch-action: manipulation;
	font-size: 16px;
	background: var(--color-neutral-300);
	color: var(--color-neutral-800);
}

.btn:focus {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: 0;
}

@media (hover: hover) and (pointer: fine) {

	.btn:hover {
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		opacity: 1;
	}

}

.btn:active {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	opacity: 1;
}

.btn:disabled {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.4;
	filter: grayscale(1);
}

@media (hover: hover) and (pointer: fine) {

	.btn:hover {
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		filter: brightness(0.95);
	}

	.btn:disabled:hover {
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		filter: none;
	}

}

.btn-sm {
	padding: 0 22px;
	font-size: 14px;
	height: 50px;
}

.btn-xs {
	padding: 0 15px;
	font-size: 12px;
	height: 30px;
}

.btn-lg {
	padding: 0 35px;
	font-size: 16px;
	height: 70px;
}

.btn-invisible {
	background: transparent;
	border: 1 px solid transparent;
}

.btn-white {
	background: var(--color-neutral-100);
	border: 1px solid var(--color-neutral-300);
	color: var(--color-neutral-800);
}

.btn-white.bg-300 {
	box-shadow: none;
}

.dark-bg .btn-white {
	color: var(--color-neutral-800);
}

.dark-bg .btn-white i.fa,
.dark-bg .btn-white i.far,
.dark-bg .btn-white i.fab {
	color: var(--color-neutral-800);
}

@media (hover: hover) and (pointer: fine) {

	.btn-white:hover {
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		box-shadow: none;
		filter: brightness(0.95);
		opacity: 1;
	}

	.btn-white.dark-bg:hover {
		filter: brightness(0.95);
	}

}

.btn-transparent {
	background: rgba(0,0,0,0.1); 
	color: inherit;
}

@media (hover: hover) and (pointer: fine) {

	.btn-transparent:hover {
		background: rgba(0,0,0,0.15);
	  	appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	  	box-shadow: none;
	}

}

.btn-transparent-light {
	background: rgba(255,255,255,0.06); 
	color: inherit;
}

@media (hover: hover) and (pointer: fine) {

	.btn-transparent-light:hover {
		background: rgba(255,255,255,0.12);
	  	appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	  	box-shadow: none;
	}

}

.btn-green,
.btn-green:focus {
	border: 4px solid #599e80;
	color: var(--color-neutral-100);
	background: #c5c5c5;
	background-image: linear-gradient(60deg,var(--color-green),#7ab885);
	transition: transform 0.2s ease-in-out;
}

.btn-green i.fa,
.btn-green i.far,
.btn-green i.fab {
	color: var(--color-neutral-100);
}

@media (hover: hover) and (pointer: fine) {

	.btn-green:hover {
		border: 4px solid transparent;
		box-shadow: none;
		transform: scale(1.05);
		background: var(--color-green);
	}

}

.btn-dark {
	background: var(--color-grey);
	border: 1px solid transparent;
	color: var(--color-neutral-100);
}

.btn-dark-transparent {
	background: #34363be0;
	border: 1px solid transparent;
	color: var(--color-neutral-100);
}

.btn-dark i.fa,
.btn-dark i.far,
.btn-dark i.fab,
.btn-dark-transparent i.fa,
.btn-dark-transparent i.far,
.btn-dark-transparent i.fab {
	color: var(--color-neutral-100);
}

@media (hover: hover) and (pointer: fine) {

	.btn-dark:hover {
		filter: brightness(0.95);
	}

	.btn-dark-transparent:hover {
		filter: brightness(0.95);
	}

}

.btn-light {
	background: var(--color-neutral-400);
	border: 1px solid transparent;
	color: var(--color-neutral-800);
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {
	.btn-light:hover {
		filter: brightness(0.95);
		transform: scale(1.1);
	}
}

.btn-light i.fa,
.btn-light i.far,
.btn-light i.fab {
	color: var(--color-neutral-800);
}

.btn-full {
	width: 100%;
	box-sizing: border-box;
}

.btn-round {
	width: 60px; 
	height: 60px; 
	padding: 0; 
	opacity: 0.95; 
	font-size: smaller;
}

@media screen and (min-width: 800px) {
	.btn-round {
		height: 80px;
		width: 80px;
	}
}

.btn-round-md {
	width: 60px; 
	height: 60px; 
	padding: 0; 
	opacity: 0.95;
	opacity: 1;
	transition: all 0.2s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {

	.btn-round-md:hover {
		filter: brightness(0.95);
		transform: scale(1.1);
	}

}

.btn-round-sm {
	width: 50px; 
	height: 50px; 
	padding: 0; 
	opacity: 0.95;
	font-size: 12px;
	opacity: 1;
}

.btn-circle-sm {
	padding: 12px 0; 
	border-radius: 50%; 
	height: 50px; 
	width: 50px;
	text-align: center;
	border: 1px solid var(--color-neutral-300);
	box-shadow: none;
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {

	.btn-circle-sm:hover {
		filter: brightness(0.95);
		transform: scale(1.1);
	}

}

.btn-circle-connect {
	padding: 12px 0; 
	border-radius: 50%; 
	height: 60px; 
	width: 60px;
	text-align: center;
	position: absolute;
	top: 10px;
	right: 10px;
	border: 1px solid var(--color-neutral-300);
	box-shadow: none;
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {

	.btn-circle-connect:hover {
		filter: brightness(0.95);
		transform: scale(1.1);
		box-shadow: none;
	}

}

.btn-circle-connect.btn-green {
	background: #c5c5c5;
	background-image: linear-gradient(60deg,var(--color-green),#7ab885);
	border: 4px solid #599e80;
    height: 60px;
    width: 60px;
    top: 10px;
    right: 10px;
}

@media (hover: hover) and (pointer: fine) {

	.btn-circle-connect.btn-green:hover {
		background: #c5c5c5;
		background-image: linear-gradient(60deg,var(--color-green),#7ab885);
		border: 4px solid transparent;
		box-shadow: none;
		transform: scale(1.05);
	}

}

.btn-donate-mini,
.btn-donate-mini:focus {
	padding: 0; 
	border-radius: 50%; 
	height: 25px; 
	width: 25px;
	position: absolute;
	bottom: 10px;
	left: 50px;
	border: 0;
	box-shadow: none;
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {

	.btn-donate-mini:hover {
		background: #c5c5c5;
		background-image: linear-gradient(60deg,var(--color-green),#7ab885);
		border: 0;
		box-shadow: none;
		transform: scale(1.05);
	}

}

.btn-x {
	display: inline-block;
	text-align: center;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	margin-right: 2px;
	background: var(--color-neutral-900);
	color: var(--color-neutral-100);
}

.btn-x > i {
	margin-top: 22px;
	color: var(--color-neutral-100);
}

.btn-facebook {
	display: inline-block;
	text-align: center;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	margin-right: 2px;
	background: #3b5998;
	color: var(--color-neutral-100);
}

.btn-facebook > i {
	margin-top: 22px;
	color: var(--color-neutral-100);
}

.btn-linkedin {
	display: inline-block;
	text-align: center;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	margin-right: 2px;
	background: #0076b5;
	color: var(--color-neutral-100);
}

.btn-linkedin > i {
	margin-top: 22px;
	color: var(--color-neutral-100);
}

.btn-instagram {
	display: inline-block;
	text-align: center;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	margin-right: 2px;
	background: #f09433; 
	background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
	background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
	color: var(--color-neutral-100);
}

.btn-instagram > i {
	margin-top: 22px;
	color: var(--color-neutral-100);
}

.btn-mail {
	display: inline-block;
	text-align: center;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	margin-right: 2px;
	background: var(--color-grey);
	color: var(--color-neutral-100);
}

.btn-mail > i {
	margin-top: 22px;
}

.btn-print {
	display: inline-block;
	text-align: center;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	margin-right: 2px;
	background: var(--color-neutral-400);
	color: grey;
}

.btn-print > i {
	margin-top: 22px;
}

.btn-follow i.fa-plus {
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {

	.btn-follow:hover i.fa-plus {
		transform: scale(1.15);
	}

}

.btn-vote {
	padding: 15px 16.2px;
	border-radius: 50%;
	opacity: 0.2;
	cursor: pointer;
	border: 1px solid transparent;
	vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {

	.btn-vote:hover {
		opacity: 0.6;
		filter: grayscale(0) !important;
	}

}

.btn-voted {
	padding: 15px 16.2px;
	border-radius: 50%;
	opacity: 0.95;
	cursor: pointer;
	border: 1px solid transparent;
	vertical-align: middle;
	filter: grayscale(0) !important;
}

@media (hover: hover) and (pointer: fine) {

	.btn-voted:hover {
		opacity: 1;
		filter: grayscale(0) !important;
	}

}

.btn-top-right {
	position: absolute; 
	top: 20px; 
	right: 15px;
	z-index: 30;
	white-space: nowrap;
}

.btn-bottom-right {
	position: fixed; 
	bottom: 20px; 
	right: 20px;
	z-index: 30;
	margin-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

.btn-bottom-left {
	position: fixed; 
	bottom: 20px; 
	left: 20px;
	z-index: 30;
	margin-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

.js-chat-bubble-wrapper.btn-bottom-right {
	text-align: right;
}

@media screen and (max-width: 799px) {
	.btn-bottom-right, .btn-bottom-left {
		bottom: 70px;
	}
	.btn-bottom-left {
		left: 5px;
	}
	.btn-bottom-right {
		right: 5px;
	}
}

.btn-video {
	margin-bottom: 2px;
}

input[type=text],
input[type=email],
input[type=number],
input[type=password] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;  
}

input {
	border: 1px solid var(--color-neutral-300);
	border-radius: 35px;
	padding: 15px 25px;
	font-size: 16px;
	font-family: "SUSE", sans-serif;
	font-weight: 400;
	width: 100%;
	margin-bottom: 15px;
	box-sizing: border-box;
	background: var(--color-neutral-300);
}

input:focus {
	outline: 0;
	border: 1px solid var(--color-neutral-500);
	background: var(--color-neutral-300);
}

input[type='checkbox'] {
	width: 20px;
	margin-bottom: 5px;
}

input[disabled] {
	cursor: not-allowed;
	opacity: 0.4;
}

select {
	border: 1px solid var(--color-neutral-300);
	border-radius: 30px;
	padding: 15px 25px;
	font-size: 16px;
	font-family: "SUSE", sans-serif;
	font-weight: 400;
	width: 100%;
	margin-bottom: 15px;
	box-sizing: border-box;
	background: var(--color-neutral-300);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select[disabled] {
	cursor: not-allowed;
	opacity: 0.4;
}

textarea {
	border: 1px solid var(--color-neutral-300);
	border-radius: 4px;
	padding: 15px 25px;
	font-size: 16px;
	font-family: "SUSE", sans-serif;
	font-weight: 400;
	width: 100%;
	max-width: 100%;
	margin-bottom: 15px;
	box-sizing: border-box;
	background: var(--color-neutral-300);
	outline: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	resize: none;
}

textarea:focus {
	border: 1px solid var(--color-neutral-500);
	background: var(--color-neutral-300);
}

#card-element {
	border: 1px solid var(--color-neutral-400);
    border-radius: 35px;
    padding: 15px 25px;
    font-size: 16px;
    background: var(--color-neutral-100);
}

.mission-icon-25 {
	width: 25px;
    height: 25px;
    border-radius: 2px;
    margin-right: 2px;
    vertical-align: middle;
}

.mission-icon-40 {
	width: 40px;
	height: 40px;
	border-radius: 3px;
	-webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

.mission-icon-50 {
	width: 50px;
	height: 50px;
	border-radius: 3px;
}

.mission-icon-60 {
	width: 60px;
	height: 60px;
	border-radius: 5px;
}

.mission-icon-70 {
	width: 70px;
	height: 70px;
	border-radius: 5px;
}

.mission-icon-85 {
	width: 85px;
	height: 85px; 
	border-radius: 7px;
}

.mission-icon-90 {
	width: 90px;
	height: 90px; 
	border-radius: 7px;
}

.mission-icon-150 {
	width: 150px; 
	height: 150px;
	border-radius: 10px;
}

.mission-icon-grid {
	width: 100%;
	border-radius: 7px;
}

.profile-thumb-30 {
	height: 30px; 
	width: 30px; 
	margin-right: 10px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
	vertical-align: middle;
}

.profile-thumb-35 {
	height: 35px; 
	width: 35px; 
	margin-bottom: 5px; 
	margin-right: 10px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
	vertical-align: middle;
}

.profile-thumb-40 {
	height: 40px; 
	width: 40px; 
	margin-bottom: 5px; 
	margin-right: 10px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
	vertical-align: middle;
}

.profile-thumb-50 {
	height: 50px; 
	width: 50px; 
	margin-bottom: 5px; 
	margin-right: 10px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
	vertical-align: middle;
}

.profile-thumb-60 {
	height: 60px; 
	width: 60px; 
	margin-bottom: 5px; 
	margin-right: 10px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
	vertical-align: middle;
}

.profile-thumb-65 {
	height: 65px; 
	width: 65px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
}

.profile-thumb-70 {
	height: 70px; 
	width: 70px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
}

.profile-thumb-100 {
	height: 100px; 
	width: 100px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
}

.profile-thumb-125 {
	height: 125px; 
	width: 125px;
	border: 1px solid #f5f5f5; 
	/*padding: 1px; */
	background: var(--color-neutral-100);
}

.profile-thumb-150 {
	height: 150px; 
	width: 150px;
	background: var(--color-neutral-100);
}

.story-profile-thumb {
	position: relative;
	z-index: 2;
	margin: 2px 5px 2px 2px;
	height: 50px; 
	width: 50px;
	border: 3px solid #f5f5f5;
	background: #f5f5f5;
	vertical-align: middle;
}

.story-wrapper {
	position: relative; 
	display: inline-block;
}

.story-countdown {
	position: absolute; 
	top: 0; 
	left: 0;
	transform: rotate(270deg);
}

.block-preview-thumb {
	text-align: center;
    width: 100%;
    height: auto;
    background: var(--color-neutral-200);
    position: relative;
}

.block-preview-thumb-image {
	width: 100%;
	display: block;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	border: 0;
}
.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}

.embed-responsive-vertical {
	padding-bottom: 178%;
}

.bubble-activity {
	position: fixed; 
	text-align: center;
	bottom: 1500px; 
	left: 20px; 
	height: 60px; 
	width: 60px; 
	background: var(--color-green); 
	color: var(--color-neutral-100);
	padding-top: 17px; 
	border-radius: 50%; 
	opacity: 0.8;
    transform: scale(1);
    animation: moveclouds 4s linear, sideways 1s ease-in-out infinite alternate;
    -webkit-animation: moveclouds 4s linear, sideways 1s ease-in-out infinite alternate;
    z-index: 32;
}

.bubble-activity-remove {
	background: var(--color-red); 
}

.pulse {
	-webkit-animation: pulse 2.5s linear infinite;
	animation: pulse 2.5s linear infinite;
}

.btn.disabled.pulse,
.btn[disabled].pulse {
	-webkit-animation: none;
	animation: none;
}

.pulse-lg {
	-webkit-animation: pulse-lg 1.8s linear infinite;
	animation: pulse-lg 1.8s linear infinite;
}

.pulse-sm {
	-webkit-animation: pulse-sm 3s linear infinite;
	animation: pulse-sm 3s linear infinite;
}

.pulse-quick {
	-webkit-animation: pulse-quick 0.25s linear;
	animation: pulse-quick 0.25s linear;
}

.overlay-demo {
 	background: var(--color-neutral-900); 
 	position: absolute; 
 	top: 0;
 	left: 0;
 	width: 100%; 
 	height: 100%; 
 	opacity: 0.15; 
 	z-index: 28;
 	-webkit-animation: fadeinoverlaylight 0.5s;
 	animation: fadeinoverlaylight 0.5s;
}

.popup .overlay-demo {
 	height: 10000px;
}

.overlay {
 	background: var(--color-neutral-900); 
 	position: fixed; 
 	top: 0;
 	left: 0;
 	width: 100%; 
 	height: 100%; 
 	opacity: 0.65; 
 	z-index: 50;
 	display: none;
 	-webkit-animation: fadeinoverlay 0.4s;
	animation: fadeinoverlay 0.4s;
}

.overlay-stacked {
 	background: var(--color-neutral-900); 
 	position: fixed; 
 	top: 0;
 	left: 0;
 	width: 100%; 
 	height: 100%; 
 	opacity: 0.65; 
 	z-index: 52;
 	display: none;
 	-webkit-animation: fadeinoverlay 0.4s;
	animation: fadeinoverlay 0.4s;
}

.overlay-loading {
	position: fixed; 
	top: 80px; 
	bottom: 0; 
	right: 0; 
	left: 0; 
	background: var(--color-neutral-300); 
	z-index: 50;
}

@media screen and (max-width: 799px) {
	.overlay-loading {
		top: 0;
		bottom: 0; 
	}
}

.js-creating-profile, .js-creating-initiative, .js-creating-transfers, .js-creating-gift-card, .js-creating-donation, .js-creating-receiver-account {
	position: fixed; 
	inset: 0;
	background: rgba(0,0,0,0.85); 
	z-index: 60; 
	display: none; 
	justify-content: center; 
	align-items: center;
}

.overlay-cookie-consent {
 	background: var(--color-neutral-900);
 	opacity: 0.2;
 	position: fixed; 
 	top: 0;
 	left: 0;
 	width: 100%; 
 	height: 100%; 
 	z-index: 52;
 	display: none;
}

.popup {
 	position: fixed; 
 	top: 65px; 
 	right: 0; 
 	left: 0; 
 	z-index: 51; 
 	background: var(--color-neutral-100); 
 	margin-left: auto; 
 	margin-right: auto; 
 	width: 600px; 
 	max-width: 100%;
 	max-height: calc(100% - 130px);
 	border-radius: 25px;
 	overflow: scroll;
 	-webkit-overflow-scrolling: touch;
 	display: none;
 	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 	animation: popupanimation 0.4s ease-in-out;
 	-webkit-animation: popupanimation 0.4s ease-in-out;
}

.popup-stacked {
 	position: fixed; 
 	top: 85px;
 	right: 0;
 	max-height: calc(100% - 170px);
 	left: 0; 
 	z-index: 53; 
 	background: var(--color-neutral-100);  
 	margin-left: auto; 
 	margin-right: auto; 
 	width: 400px; 
 	max-width: 100%;
 	border-radius: 25px;
 	overflow: scroll;
 	-webkit-overflow-scrolling: touch;
 	display: none;
 	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 	animation: popupanimation 0.4s ease-in-out;
 	-webkit-animation: popupanimation 0.4s ease-in-out;
}

.popup-double {
 	position: fixed; 
 	top: 65px; 
 	right: 0; 
 	left: 0; 
 	z-index: 51; 
 	background: var(--color-neutral-100); 
 	margin-left: auto; 
 	margin-right: auto; 
 	width: 600px; 
 	max-width: 100%;
 	max-height: calc(100% - 130px);
 	border-radius: 25px;
 	overflow: scroll;
 	-webkit-overflow-scrolling: touch;
 	display: block;
 	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.popup-double-top {
	box-shadow: none;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.popup-lg {
 	width: 1000px;
}

.popup-cookie-consent {
 	position: fixed; 
 	bottom: 20px;
 	left: 20px; 
 	z-index: 53; 
 	background: var(--color-neutral-200); 
 	max-height: calc(100vh - 40px);
 	width: 400px;
 	max-width: calc(100% - 20px);
 	border-radius: 25px;
 	overflow: scroll;
 	-webkit-overflow-scrolling: touch;
 	display: none;
 	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.popup-complete-profile {
 	animation: none;
 	-webkit-animation: none;
 	-moz-animation: none;
 	-ms-animation: none;
 	-o-animation: none;
}

.popup-header {
	padding: 25px 20px;
}

.popup-close-stacked {
	background: #f9f9f9d9;
	text-align: center;
	border-top: 1px solid var(--color-neutral-300);
	backdrop-filter: blur(2px);
}

.popup-close-stacked > img {
	height: 15px;
    width: 15px;
    padding: 20px;
    background: var(--color-grey-contrast);
    border-radius: 50%;
    vertical-align: middle;
    margin: -12.5px;
    transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {
	.popup-close-stacked:hover {
		cursor: pointer;
	}
	.popup-close-stacked:hover > img {
		transform: scale(1.1);
	}
}

@media screen and (max-width: 799px) {
	.popup {
		top: auto;
	    bottom: 5px;
	    left: 5px;
	    right: 5px;
	    margin: auto;
	    height: auto;
	    width: auto;
	    min-height: auto;
	    max-height: calc(100% - 10px);
	    min-width: auto;
	    max-width: 100%;
		animation: popupanimationsm 0.4s ease-out;
 		-webkit-animation: popupanimationsm 0.4s ease-out;
 		padding-bottom: calc(70px +  env(safe-area-inset-bottom)); /* iOS safe area */
	}
	.popup-double {
		top: 5px;
		height: calc(100% - 10px);
		max-height: calc(100% - 10px);
		min-height: calc(100% - 10px);
		left: 5px;
		right: 5px;
		width: auto;
	}
	.popup-double-top {
		height: auto;
		min-height: auto;
	}
	.popup-fixed-bottom {
		position: fixed;
		bottom: 70px;
		left: 5px;
		right: 5px;
		margin-bottom: env(safe-area-inset-bottom); /* iOS safe area */
	}
	.popup-fixed-bottom-above {
		margin-bottom: 90px;
	}
	.popup-stacked {
		top: auto;
		bottom: 5px;
		left: 5px;
		right: 5px;
		width: auto;
		max-height: calc(95% - 20px);
		animation: popupanimationsm 0.4s ease-out;
 		-webkit-animation: popupanimationsm 0.4s ease-out;
	}
	.js-hide-popup-stacked {
		padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* iOS safe area */
	}
	.popup-cookie-consent {
		bottom: 10px;
		left: 10px;
		right: 10px;
		width: auto;
		max-height: 600px;
 		margin-bottom: env(safe-area-inset-bottom); /* iOS safe area */
	}
	.popup-complete-profile {
	 	animation: none;
	 	-webkit-animation: none;
	 	-moz-animation: none;
	 	-ms-animation: none;
	 	-o-animation: none;
	}
	.popup-close {
		display: none;
		position: fixed;
		bottom: 5px;
		left: 5px;
		right: 5px;
		width: auto;
		background: #f9f9f9d9;
		color: var(--color-neutral-100);
		z-index: 52;
		text-align: center;
		padding: 20px;
		padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* iOS safe area */
 		border-bottom-left-radius: 25px;
		border-bottom-right-radius: 25px;
		border-top: 1px solid var(--color-neutral-300);
		backdrop-filter: blur(2px);
	}
	.popup-close > img {
		height: 15px;
	    width: 15px;
	    padding: 20px;
	    background: var(--color-grey-contrast);
	    border-radius: 50%;
	    vertical-align: middle;
	    margin: -12.5px;
	    transition: transform 0.2s;
	}
	@media (hover: hover) and (pointer: fine) {
		.popup-close:hover {
			cursor: pointer;
		}
		.popup-close:hover > img {
			transform: scale(1.1);
		}
	}
	/*
	.popup-fix-scroll-dynamic-content {
		height: calc(100% + 1px);
	}
	*/
	.popup-fullscreen-sm {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		min-height: 100%;
		max-height: 100%;
		padding-bottom: 0;
	}
	#popup-search {
		top: 5px;
	}
}

@media screen and (min-width: 800px) {
	.popup-close {
		display: none !important;
	}
}

.shake {
	animation-name: spaceboots;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
}

.spin-expand {
	animation-name: spaceboots-lg;
	animation-duration: 1s;
	animation-timing-function: linear;
	-webkit-animation-name: spaceboots-lg;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
}

.badge,
.badge-sm,
.badge-xs {
	font-family: "SUSE", sans-serif;
	text-transform: none;
	font-size: 12px;
	font-weight: 500;
	line-height: initial;
	opacity: 1;
	display: inline-block;
	border-radius: 20px; 
	padding: 10px 20px;
	white-space: nowrap;
	background: var(--color-neutral-300);
	width: fit-content;
}

.badge-xs {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 500;
    margin: -2px 0 -2px 5px;
}

.badge-lg {
	font-family: "SUSE", sans-serif;
	text-transform: none;
	font-size: 14px;
	font-weight: 500;
	line-height: initial;
	opacity: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border-radius: 35px; 
	padding: 0 22px;
	white-space: nowrap;
	background: var(--color-neutral-300);
}

.badge-step {
	padding: 0 15px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.badge-step,
.badge-currency {
	color: var(--color-neutral-600);
}

.badge-transparent {
    background: rgba(0,0,0,0.06);
    color: inherit;
}

.bg-100 {
	background: var(--color-neutral-100);
}

.bg-100-transparent {
	background:rgba(255,255,255,0.95);
}

.bg-200 {
	background: var(--color-neutral-200);	
}

.bg-300 {
	background: var(--color-neutral-300);	
}

.bg-300 .bg-300,
.bg-300 .btn-300  {
	background: var(--color-neutral-400);
}

.bg-300 .bg-300 .bg-400,
.bg-300 .bg-300 .bg-300 {
	background: var(--color-neutral-500);
}

.bg-300 .bg-300 .bg-300 .bg-400 {
	background: var(--color-neutral-400);
}

.bg-300 .badge,
.bg-300 .badge-sm,
.bg-300 .badge-lg, 
.bg-300 .btn,
.bg-300 .svg-icon {
	background: var(--color-neutral-400);
}

.bg-300 .btn.btn-green {
	background: var(--color-green);
}

@media screen and (max-width: 799px) {
	.border-radius-remove-sm.bg-300 .bg-300,
	.border-radius-remove-sm.bg-300 .badge,
	.border-radius-remove-sm.bg-300 .badge-sm,
	.border-radius-remove-sm.bg-300 .badge-lg, 
	.border-radius-remove-sm.bg-300 .btn,
	.border-radius-remove-sm.bg-300 .svg-icon {
		background: var(--color-neutral-300);
	}
}

@media screen and (max-width: 799px) {
	.border-radius-remove-sm.bg-300 .btn.btn-green {
		background: var(--color-green);
	}
}

@media screen and (max-width: 799px) {
	.border-radius-remove-sm.bg-300 .btn.btn-dark {
		background: var(--color-grey);
	}
}

.bg-300 .badge-transparent {
	background: rgba(0,0,0,0.03);
    color: inherit;
}

@media screen and (max-width: 799px) {
	.border-radius-remove-sm.bg-300 .badge-transparent {
		background: rgba(0,0,0,0.03);
    	color: inherit;
	}
}

.bg-400 {
	background: var(--color-neutral-400);
}

.bg-500 {
	background: var(--color-neutral-500);
}

.green-bg {
	background: #c5c5c5;
    background-image: linear-gradient(60deg,var(--color-green),#7ab885);
	color: var(--color-neutral-100);
}

.green-bg.badge-lg {
	border: 0;
}

.green-bg a {
	color: var(--color-neutral-100);
}

.green-bg i.fa,
.green-bg i.far,
.green-bg i.fab {
	color: var(--color-neutral-100);
}

.red-bg {
	background: var(--color-red);
	color: var(--color-neutral-100);
}

.red-bg a {
	color: var(--color-neutral-100);
}

.red-bg i.fa,
.red-bg i.far,
.red-bg i.fab {
	color: var(--color-neutral-100);
}

.box-compact.red-bg {
	border-radius: 25px;
}

.yellow-bg {
	background: var(--color-yellow);
	color: var(--color-neutral-100);
}

.yellow-bg a {
	color: var(--color-neutral-100);
}

.yellow-bg i.fa,
.yellow-bg i.far,
.yellow-bg i.fab {
	color: var(--color-neutral-100);
}

.extralight-bg {
	background: var(--color-neutral-200);
	color: grey;
}

.dark-bg {
	background: var(--color-grey);
	color: var(--color-neutral-100);
}

.dark-bg a {
	color: var(--color-neutral-100);
}

.dark-bg i.fa,
.dark-bg i.far,
.dark-bg i.fab {
	color: var(--color-neutral-100);
}

.tab {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	opacity: 1;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 200px; 
	padding: 0 22px;
	height: 50px;
	white-space: nowrap;
	background: var(--color-neutral-400);
	width: fit-content;
}

.js-tab-selected {
	background: var(--color-neutral-100);
}

@media (hover: hover) and (pointer: fine) {

	.tab:hover {
		filter: brightness(1);
		background: var(--color-neutral-300);
	}

	.tab.js-tab-selected {
		background: var(--color-neutral-100);
	}

}

.bg-300 .tab,
.bg-300 .js-filter-conversations {
	background: var(--color-neutral-300);
}

.bg-300 .js-tab-selected {
	background: var(--color-neutral-100);
}

.js-tab-wrapper {
	padding: 5px;
	overflow: scroll; 
	white-space: nowrap; 
	-webkit-overflow-scrolling: touch;
	margin: 0;
	border-radius: 50px;
	display: flex;
	gap: 10px;
}

.js-tab-wrapper.js-tab-wrapper-top {
	margin: 0 20px 0 20px;
}

@media screen and (max-width: 799px) {
	.js-tab-wrapper.js-tab-wrapper-top {
		margin: 0;
		border-radius: 0;
		padding: 10px 20px;
	}
}

.flex-gap {
	display: flex; 
	flex-wrap: wrap; 
	gap: 10px;
}

.flex-gap-spread {
	justify-content: space-between;
	align-items: center;
}

.show {
 	display: block;
}

.hide {
 	display: none;
}

.js-element-selector {
	-webkit-animation: fadeinsimple 0.4s;
	animation: fadeinsimple 0.4s;
}

.fadein {
	display: block;
	-webkit-animation: fadeinsimple 0.2s;
	animation: fadeinsimple 0.2s;
}

.fadein-slow {
	-webkit-animation: fadeinsimple 1s;
	animation: fadeinsimple 1s;
}

.fadein-slow-extralight {
	-webkit-animation: fadeinsimpleextralight 1s;
	animation: fadeinsimpleextralight 1s;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
	justify-content: left;
}

.right {
	text-align: right;
	justify-content: right;
}

body.js-scroll-locked {
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.js-feedback {
	position: fixed; 
	top: 0; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	margin: auto; 
	width: 150px; 
	height: 150px; 
	padding: 20px; 
	color: var(--color-neutral-100); 
	font-weight: 600;
	z-index: 60;
	display: none;
	box-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
  	border-radius: 25px;
  	overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.js-feedback i {
	color: var(--color-neutral-100);
}

.js-payment-option {
	margin-bottom:10px;
	position:relative;
}

.js-payment-option > .js-payment-option-expand {
	display: none;
}

.js-payment-option.active > .js-payment-option-expand {
	display: block;
}

.js-payment-option.inactive > i.fa-circle {
	color: var(--color-neutral-400);
	display: inline;
	transition: transform 0.2s;
}

.js-payment-option.active > i.fa-circle {
	display: none;
}

.js-payment-option.active > i.fa-check-circle {
	color: var(--color-neutral-600);
	display: inline;
}

.js-payment-option.inactive > i.fa-check-circle {
	display: none;
}

@media (hover: hover) and (pointer: fine) {

	.js-payment-option:hover {
		cursor: pointer;
	}

	.js-payment-option:hover > i.fa-circle {
		color: var(--color-neutral-600);
		transform: scale(1.1);
	}

	.js-payment-option.active:hover {
		cursor: auto;
	}

}

.checkbox-option {
	margin-bottom:10px;
	position:relative;
}

.checkbox-option.active {
	border: 1px solid var(--color-neutral-400);
}

.checkbox-option.inactive > i.fa-circle {
	color: var(--color-neutral-600);
	display: inline;
	transition: transform 0.2s;
}

.checkbox-option.active > i.fa-circle {
	display: none;
}

.checkbox-option.active > i.fa-check-circle {
	color: var(--color-neutral-600);
	display: inline;
	transition: transform 0.2s;
}

.checkbox-option.inactive > i.fa-check-circle {
	display: none;
}

@media (hover: hover) and (pointer: fine) {

	.checkbox-option:hover {
		cursor: pointer;
	}

	.checkbox-option:hover > i.fa-circle {
		color: var(--color-neutral-600);
		transform: scale(1.1);
	}

	.checkbox-option:hover > i.fa-check-circle {
		transform: scale(1.1);
	}

}

.radio-option {
	margin-bottom: 20px;
	position:relative;
	border-radius: 25px;
}

.radio-option.inactive > i.fa-circle {
	color: var(--color-neutral-400);
	display: inline;
	transition: transform 0.2s;
}

.radio-option.active > i.fa-circle {
	display: none;
}

.radio-option.active > i.fa-check-circle {
	color: var(--color-neutral-600);
	display: inline;
	transition: transform 0.2s;
}

.radio-option.inactive > i.fa-check-circle {
	display: none;
}

@media (hover: hover) and (pointer: fine) {

	.radio-option:hover {
		cursor: pointer;
	}

	.radio-option:hover > i.fa-circle {
		color: var(--color-neutral-600);
		transform: scale(1.1);
	}

	.radio-option:hover > i.fa-check-circle {
		transform: scale(1.1);
	}

}

.js-donate-option > div > .js-donate-option-expand {
	display: none;
}

.js-donate-option.active > div > .js-donate-option-expand {
	display: block;
}

.js-donate-option i.fa-arrow-circle-right {
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {

	.js-donate-option:hover i.fa-arrow-circle-right {
		transform: scale(1.1);
	}

}

table {
	text-align: left;
	border-spacing: 0;
	min-width: 100%;
}

thead {
	background: var(--color-neutral-200);
}

th {
	display: table-cell;
	border-top: 1px solid var(--color-neutral-300);
	border-bottom: 1px solid var(--color-neutral-300);
	padding: 15px 10px 15px 20px;
	font-size: 14px;
	font-weight: 500;
}

td {
	vertical-align: top;
	padding: 10px 10px 10px 20px;
	white-space: nowrap;
}

th {
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {

	tbody > tr:hover {
		opacity: 0.85;
		background: var(--color-neutral-200);
	}

}

.border-radius {
	border-radius: 25px;
	overflow: hidden;
}

.elevate-light {
	box-shadow: 0 0 100px 0 rgba(150,150,150,0.2);
	border-radius: 25px;
	overflow: hidden;
}

.widget-editor-presentation-wrapper .elevate-light-yt {
	box-shadow: 0 0 100px 0 rgba(150,150,150,0.2);
	border-radius: 25px;
	overflow: hidden;
}

.elevate-light-border-radius {
	border-radius: 50px;
}

@media screen and (max-width: 799px) {
	.border-radius-remove-sm {
		border-radius: 0;
		background: transparent;
        box-shadow: none;
	}
}

/* Some bug in iOS don't allow box-shadow in popups, problem with rendering, white areas, use border instead */
.popup .elevate-light {
	box-shadow: none;
	border-radius: 25px;
	overflow: hidden;
	border: 1px solid var(--color-neutral-300);
}

.popup .elevate-light-border-radius {
	border-radius: 50px;
}

.elevate-strong {
	border-radius: 25px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
	overflow: hidden;
}

.elevate-card {
	box-shadow: 0 0 20px 0 var(--color-neutral-400);
	overflow: hidden;
}

.switch input {
	display: none;
}
.switch label {
	background-color: #fff;
	border: 1px solid #dfdfdf;
	border-radius: 20px;
	cursor: pointer;
	display: inline-block;
	height: 30px;
	position: relative;
	vertical-align: middle;
	width: 52.5px;
	user-select: none;
	box-sizing: content-box;
	background-clip: content-box;
	border-color: #dfdfdf;
	box-shadow: #dfdfdf 0px 0px 0px 0px inset;
	transition: border 0.4s, box-shadow 0.4s;
	background-color: var(--color-neutral-100);
}
.switch label:after {
	content: "";
	background: #fff;
	border-radius: 100%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	height: 30px;
	position: absolute;
	top: 0;
	width: 30px;
	left: 0px;
	transition: background-color 0.4s, left 0.2s;
}
.switch input:checked ~ label {
	border-color: var(--color-green);
	box-shadow: var(--color-green) 0px 0px 0px 16px inset;
	transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
	background-color: var(--color-green);
}
.switch input:checked ~ label:after {
	left: 22.5px;
	transition: background-color 0.4s, left 0.2s;
	background-color: var(--color-neutral-100);
}

.js-select-element.active {
	background: var(--color-neutral-200); 
	border-left: 3px solid grey;
	padding-left: 17px;
}

.editable {
	border: 1px solid var(--color-neutral-300);
	border-radius: 25px;
	padding: 15px 25px;
	font-size: 18px;
	font-family: "SUSE", sans-serif;
	font-weight: 400;
	width: 100%;
	margin-bottom: 15px;
	box-sizing: border-box;
	background: var(--color-neutral-300);
	cursor: text;
	min-height: 50px;
}

.editable:focus {
	outline: 0;
	border: 1px solid var(--color-neutral-500);
	background: var(--color-neutral-300);
}

.editable p:last-child {
	margin-bottom: 0;
}

.medium-editor-placeholder-relative:after, .medium-editor-placeholder:after {
    content: attr(data-placeholder)!important;
    white-space: pre;
    padding: inherit;
    margin: 0;
    font-style: normal;
	font-size: 18px;
}

.medium-editor-placeholder:after {
    color: grey;
	font-size: 18xpx;
}

.medium-editor-toolbar {
    background-color: var(--color-grey);
    border: 0;
    border-radius: 35px;
    margin-top: 20px;
}

@media screen and (max-width: 799px) {
	.medium-editor-toolbar {
		margin-top: 0;
	}
}

.medium-editor-toolbar li button {
	border-right: 1px solid var(--color-grey-contrast);
}

.medium-editor-toolbar li .medium-editor-button-first { 
	border-top-left-radius: 35px;
	border-bottom-left-radius: 35px;
}

.medium-editor-toolbar li .medium-editor-button-last {
	border-top-right-radius: 35px;
	border-bottom-right-radius: 35px;
}

.medium-editor-toolbar li .medium-editor-button-active {
	background: var(--color-grey-contrast);
	color: var(--color-neutral-100);
}

@media (hover: hover) and (pointer: fine) {
	.medium-editor-toolbar li button:hover {
	    background-color: var(--color-grey-contrast);
	    color: var(--color-neutral-100);
	}
}

.medium-editor-toolbar-form {
	background: var(--color-grey);
	color: var(--color-neutral-100);
	border-radius: 35px;
}

.medium-editor-toolbar-form .medium-editor-toolbar-input {
	font-size: 16px;
	background: var(--color-grey-contrast);
	color: var(--color-neutral-100);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.medium-editor-toolbar-form .medium-editor-toolbar-input::placeholder {
	opacity: 0.4;
	color: var(--color-neutral-100);
}

.medium-editor-toolbar-form > a.medium-editor-toolbar-save {
	padding: 20px;
	margin: 0;
	font-size: 16px;
	color: var(--color-neutral-100);
	border-right: 1px solid var(--color-grey-contrast)
}

.medium-editor-toolbar-form > a.medium-editor-toolbar-close {
	padding: 20px;
	margin: 0;
	margin-right: 5px;
	font-size: 16px;
}

.medium-editor-toolbar-form .medium-editor-toolbar-input, .medium-editor-toolbar-form label {
    padding: 20px 30px;
}

.medium-editor-toolbar-form a, .medium-editor-toolbar-form input {
    font-family: "SUSE", sans-serif;
}

.medium-toolbar-arrow-under:after {
	border: 0;
}

.medium-toolbar-arrow-over:before {
	border: 0;
}

.js-uploaded-image {
	border: 1px solid var(--color-neutral-100);
}

blockquote {
	font-size: 18px;
	border-left: 2px solid var(--color-neutral-500);
	padding-left: 20px;
	margin-left: 0;
	margin-right: 0;
	padding-top: 20px;
	padding-bottom: 20px;
}

@media (max-width: 799px) {
	blockquote {
		padding-left: 20px;
	}
}

.js-text-section.brick {
    max-height: 100px;
    overflow: hidden;
}

.js-images-section.brick {
    max-height: 100px;
    overflow: hidden;
}

.js-link-section.brick {
    padding-top: 50px !important;
}

.brick {
    width: 100%;
    cursor: move !important;
}

@media (hover: hover) and (pointer: fine) {

	.brick:hover {
	    opacity: 0.4;
	}

}

.js-text-section.js-delete-section {
    max-height: 100px;
    overflow: hidden;
}

.js-images-section.js-delete-section {
    max-height: 100px;
    overflow: hidden;
}

.js-delete-section {
    cursor: pointer !important;
}

.js-delete-section:after {
    position: absolute;
    content:'Click to delete';
    top:0;
    left:0;
    bottom:0;
    right:0;
    opacity:0.8;
    background-color: var(--color-red);
    color:var(--color-neutral-100);
    font-size: 16px;
    text-align: center;
    padding: 10px;
}

@media (hover: hover) and (pointer: fine) {

	.js-delete-section:hover:after  {
	    opacity: 0.9;
	}

}

.hero {
	padding: 130px 150px 150px 150px; 
	text-align: center; 
	position: relative; 
	overflow:hidden;
}

.hero-control-center {
	padding: 100px 150px 50px 150px; 
	text-align: center;
}

@media screen and (max-width: 799px) {
	
	.hero {
		padding: 80px 40px 80px 40px;
	}

	.hero-control-center {
		padding: 50px 40px 40px 40px; 
		text-align: center;
	}

}

.locked-page-cover {
	position: fixed; 
	top:0; 
	bottom:0; 
	left:0; 
	right:0; 
	z-index:40; 
	height:100%; 
	width:100%; 
	background:#B2B2BA;
}

.locked-page {
	position: fixed; 
	top:0; 
	bottom:0; 
	left:0; 
	right:0; 
	z-index:40; 
	height:100%; 
	width:100%; 
	margin-bottom:20px; 
	background:var(--color-neutral-400);
}

.locked-page a {
	text-decoration: underline;
	text-decoration: underline solid lightgrey 15%;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: #cccccc;
	text-decoration-thickness: 2px;
}

.locked-page-logo {
	position: absolute; 
	top: 17px; 
	left: 20px; 
	z-index: 2;
}

.locked-page-logo > img {
	width: 100px;
}

.locked-page-content {
	position: relative; 
	height: 100%; 
	overflow: hidden;
}

.locked-page-h1-wrapper {
	height:110px;
}

.locked-page-h1 {
	text-shadow: 0px 0px 10px rgba(200, 200, 200, 0.2); 
	margin-top:0;
}

.locked-page-mission-icon {
	width: 160px;
	height: 160px;
	display: inline-block; 
	margin-top: 40px; 
	margin-bottom: 20px;
}

@media screen and (max-width: 799px) {
	.locked-page-mission-icon {
		width: 100px;
		height: 100px;
		display: inline-block; 
		margin-top: 60px; 
		margin-bottom: 5px;
	}
}

.locked-page-waiting-list-wrapper {
	width: 400px; 
	max-width: 100%; 
	margin-top: 10px; 
	display: inline-block;
}

.locked-page-sign-in {
	position: absolute; 
	bottom: 0; 
	right: 0; 
	padding: 20px; 
	z-index: 40;
}

.corner-grey {
	position: absolute; 
	top: 0; 
	right: 0; 
	height: 0; 
	width: 0; 
	border-right: 150px solid grey; 
	border-bottom: 150px solid transparent;
}

.corner-grey-sm {
	position: absolute; 
	top: 0; 
	right: 0; 
	height: 0; 
	width: 0; 
	border-right: 100px solid grey; 
	border-bottom: 100px solid transparent;
}

@media screen and (max-width: 799px) {
	.corner-grey {
		border-right: 100px solid grey; 
		border-bottom: 100px solid transparent;
	}
}

.corner-planned {
	margin: 0; 
	position: absolute; 
	top: 40px; 
	right: 25px; 
	transform: rotate(45deg); 
	color: var(--color-neutral-100);
}

.corner-planned-sm {
	margin: 0; 
	position: absolute; 
	top: 25px; 
	right: 15px; 
	font-size: 18px;
	transform: rotate(45deg); 
	color: var(--color-neutral-100);
}

@media screen and (max-width: 799px) {
	.corner-planned {
		top: 25px; 
		right: 15px; 
		font-size: 18px;
	}
}

.corner-interested {
	margin: 0; 
	position: absolute; 
	top: 40px; 
	right: 15px; 
	transform: rotate(45deg); 
	color: var(--color-neutral-100);
}

.corner-interested-sm {
	margin: 0; 
	position: absolute; 
	top: 29px; 
	right: 5px; 
	font-size: 18px;
	transform: rotate(45deg); 
	color: var(--color-neutral-100);
}

@media screen and (max-width: 799px) {
	.corner-interested {
		top: 29px; 
		right: 5px; 
		font-size: 18px;
	}
}

.corner-circle {
	position: absolute; 
	top: 15px; 
	right: 15px; 
	padding: 12px 10px; 
	border-radius: 50%; 
	height: 40px; 
	width: 40px;
}

@media screen and (max-width: 799px) {
	.corner-circle {
		top: 10px;
		right: 10px;
		padding: 10px 7.5px;
		height: 35px;
		width: 35px;
		font-size: 14px;
	}
} 

.corner-circle-menu {
	position: absolute; 
	top: 10px;
	right: 10px;
	padding: 10px 7.5px;
	border-radius: 50%; 
	height: 35px;
	width: 35px;
	font-size: 14px;
}

.corner-circle-next-right {
	background: lightgrey;
	color: var(--color-neutral-100);
	position: absolute; 
	top: 50%; 
	transform: translate(0, -50%);
	left: -20px; 
	padding: 12px 10px; 
	border-radius: 50%; 
	height: 40px; 
	width: 40px;
} 

.corner-circle-next-right i.fa {
	color: var(--color-neutral-100);
} 

@media screen and (max-width: 799px) {
	.corner-circle-next-right {
		display: none;
	}
} 

.corner-circle-next-down {
	display: none;
} 

@media screen and (max-width: 799px) {
	.corner-circle-next-down {
		background: lightgrey;
		color: var(--color-neutral-100);
		display: block;
		position: absolute; 
		top: -20px; 
		transform: translate(-50%, 0);
		left: 50%; 
		padding: 12px 10px; 
		border-radius: 50%; 
		height: 40px; 
		width: 40px;
	}
}  

.corner-circle-next-down i.fa {
	color: var(--color-neutral-100);
} 

.circle {
	display: inline-block;
	padding: 17px 0; 
	border-radius: 50%; 
	height: 50px; 
	width: 50px;
	text-align: center;
}

.circle-sm {
	display: inline-block;
	padding: 12px 0; 
	border-radius: 50%; 
	height: 40px; 
	width: 40px;
	text-align: center;
}

.js-tooltip {
	cursor: pointer;
}

.js-conversation-block.active {
	background: var(--color-neutral-100);
}

@media (hover: hover) and (pointer: fine) {
	.js-conversation-block:hover {
		background: var(--color-neutral-100);
	}
}

.menu.active {
	background: var(--color-neutral-200); 
	border-left: 3px solid grey;
	padding-left: 17px;
}

@media screen and (max-width: 799px) {
	.hidden-sm {
		display:none !important;
	}
}

@media screen and (min-width: 800px) and (max-width: 1199px) {
	.hidden-md {
		display:none !important;
	}
}

@media screen and (min-width: 1200px) {
	.hidden-lg {
		display:none !important;
	}
}

.sticky-only {
	display: none;
}

.sticky, 
.sticky-sm {
	position: static;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 40;
}

@media screen and (max-width: 799px) {
	.sticky-sm-active {
		position: fixed;
	}
}

.sticky-active {
	position: fixed;
}

.sticky-only-active {
	display: block;
}

@media (hover: hover) and (pointer: fine) {
	.sticky:hover,
	.sticky-sm:hover,
	.sticky-only:hover {
		opacity: 1;
	}
}

.green {
	color: var(--color-green);
}

.red {
	color: var(--color-red);
}

.yellow {
	color: var(--color-yellow);
}

.karma {
	color: var(--color-green);
}

.fa, .far, .fab {
	color: var(--color-neutral-600);
}

.fa.fa-green, .far.fa-green, .fab.fa-green {
	filter: grayscale(0);
	color: var(--color-green);
}

.fa.fa-red, .far.fa-red, .fab.fa-red {
	filter: grayscale(0);
	color: var(--color-red);
}

.fa.fa-yellow, .far.fa-yellow, .fab.fa-yellow {
	filter: grayscale(0);
	color: var(--color-yellow);
}

.fa.fa-grey, .far.fa-grey, .fab.fa-grey {
	filter: grayscale(0);
	color: var(--color-grey);
}

.fa.fa-white, .far.fa-white, .fab.fa-white {
	color: var(--color-neutral-100);
}

.fa.fa-gold, .far.fa-gold, .fab.fa-gold {
	filter: grayscale(0);
	color: var(--color-gold);
}

.fa.fa-silver, .far.fa-silver, .fab.fa-silver {
	filter: grayscale(0);
	color: var(--color-silver);
}

.fa.fa-bronze, .far.fa-bronze, .fab.fa-bronze {
	filter: grayscale(0);
	color: var(--color-bronze);
}

.fa-back {
	height: 40px;
    width: 40px;
    background: var(--color-neutral-300);
    color: var(--color-neutral-800);
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -10px;
    margin-bottom: -10px;
    transition: transform 0.2s;
}

.dark-bg .fa-back,
.dark-bg .badge-lg,
.dark-bg .btn-follow,
.dark-bg .follow-wrapper .btn {
	background: var(--color-grey-contrast);
	color: var(--color-neutral-100)
}

.speech-bubble .fa-back,
.speech-bubble .badge-lg,
.speech-bubble .btn-follow,
.speech-bubble .follow-wrapper .btn {
	background: var(--color-neutral-400);
}

@media (hover: hover) and (pointer: fine) {
	.fa-back:hover {
		transform: scale(1.1);
		filter: brightness(0.95);
	}
}

.popup-connect-missions-missions {
	background:var(--color-neutral-200); 
	padding-top: 230px;
}

.popup-follow-missions-missions {
	background:var(--color-neutral-200); 
	padding-top: 230px;
}

@media screen and (max-width: 799px) {
	.popup-connect-missions-missions {
		padding-bottom: 90px;
	}
	.popup-follow-missions-missions {
		padding-bottom: 90px;
	}
}

.js-selected-missions {
	position: absolute; 
	top: 10px; 
	left: 20px;
}

.js-selected-mission {
	width: 40px; 
	height: 40px; 
	border-radius: 50%; 
	padding: 10px; 
	background: var(--color-neutral-300); 
	margin-right: 5px;
	transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {
	.js-selected-mission:hover {
		cursor: pointer;
		filter: brightness(0.95);
		transform: scale(1.1);
	}
}

@media screen and (max-width: 1199px) {
	.flex-md { 
		display: flex; 
		flex-direction: column; 
	}
	.flex-right-md {
		order: 2;
	}
	.flex-left-md {
		order: 1;
		text-align: center;
	}
	.flex-left-md > .box-xxlg {
		padding-bottom: 0;
	}
	.flex-right-md > .box-xxlg {
		padding-top: 50px;
	}
}

.comment-left {
	text-align: left;
}

.comment-right {
	text-align: right;
}

.comment-wrapper {
	width: calc(100% - 55px);
	max-width: 400px;
	display: inline-block; 
	text-align: left;
}

.comment {
	position: relative; 
	padding-right: 30px; 
	border-radius: 20px;
	overflow: hidden;
}

.comment-left .comment {
	border-top-left-radius: 5px;
}

.comment-right .comment {
	border-top-right-radius: 5px;
}

.comment-left .comment-profile-image {
	float: left; 
	margin-left: 0; 
	margin-right: 10px;
}

.comment-right .comment-profile-image {
	float: right; 
	margin-left: 10px; 
	margin-right: 0;
}

.commentpost {
	font-size: 16px;
}

.commentpost p:last-child {
	margin-bottom: 0;
}

.js-conversationblock p {
	font-size: 16px;
}

.commentpost-smaller p {
	font-size: 16px;
}

.js-activity-teaser {
	position: fixed; 
	z-index: 3; 
	bottom: 20px;
	left: 0; 
	right: 0; 
	margin: auto; 
	width: 600px; 
	border-radius: 50px; 
	opacity: 0.95;
	margin-bottom: env(safe-area-inset-bottom); /* iOS safe area */
	text-align: left;
	background: var(--color-neutral-300);
}

@media screen and (max-width: 799px) {
	.js-activity-teaser {
		max-width: 100%; 
		bottom: 59px;
		border-radius: 0;
	}
}

.js-activity-teaser .fa-angle-down {
	background: var(--color-neutral-400);
    width: 60px;
    height: 60px;
    text-align: center;
    right: 10px;
    top: 10px;
    line-height: 60px;
    border-radius: 50%;
}

.topic-image {
	display: inline-block; 
	width: 100px; 
	height: 100px; 
	border-radius: 50%; 
	box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.2); 
	background-size: cover;
	transition: box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {
	.topic-image:hover {
		box-shadow: none;
	}
}

.topic-image-sm {
	width: 80px; 
	height: 80px; 
}

.flip-card {
	height: 360px; 
	width: 360px;
	perspective: 1000px;
	display: inline-block;
}

@media screen and (max-width: 599px) {
	.flip-card {
		height: 280px; 
		width: 280px;
	}
}

.flip-content {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: transform 0.2s;
	transform-style: preserve-3d;
}

.flip-card-flip .flip-content {
	transform: rotateY(80deg);
	transition: transform 0.2s;
}

.flip-front {
	position: absolute;
	height: 100%;
	width: 100%;
	background: transparent;
	backface-visibility: hidden;
}

.gift-card-wrapper {
	padding: 60px 40px 100px 40px;
}

@media screen and (max-width: 599px) {
	.gift-card-wrapper {
		padding: 20px 10px 100px 10px;
	}
}

.gift-card {
	background: var(--color-grey); 
	color: var(--color-neutral-100);
	position: relative; 
	height: 360px; 
  	width: 360px;
	overflow: visible; 
	display: inline-block; 
	text-align: left;
	border-radius: 25px;
	box-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
}

@media screen and (max-width: 599px) {
	.gift-card {
		height: 280px; 
		width: 280px;
	}
}

.gift-card-value {
	position: absolute; 
	top: 20px; 
	left: 20px;
}

.gift-card-value-edit {
	cursor: pointer; 
	position: absolute; 
	bottom: 32px; 
	left: -50px; 
	padding: 18px 20px; 
	border-radius: 50%; 
	border-bottom-left-radius: 3px; 
	color: var(--color-neutral-800);
	font-size: 12px;
	transform: rotate(-45deg);
}

.gift-card-value-edit i {
	transform: rotate(45deg);
}

.gift-card-logo {
	position: absolute; 
	top: 10px; 
	right: 10px;
}

.gift-card-logo > img {
	width: 50px;
	opacity: 0.5;
}

@media screen and (max-width: 599px) {
	.gift-card-logo > img {
		width: 40px;
	}
}

.gift-card-center {
	position: absolute; 
	top: 50px; 
	right: 0; 
	bottom: 0; 
	left: 0;
	font-size: 16px;
}

.gift-card-center > img {
	height: 120px; 
	width: 120px; 
	opacity: 0.2;
	margin-bottom: -10px;
	background: var(--color-neutral-200);
	border-radius: 50%;
	filter: grayscale(1);
}

.gift-card-center h4 {
	font-family: 'SUSE', sans-serif;
}

@media screen and (max-width: 599px) {
	.gift-card-center {
		top: 40px;
		font-size: 14px;
	}
	.gift-card-center > img {
		height: 90px; 
		width: 90px;
	}
	.gift-card-center h4 {
		font-size: 16px;
	}
}

.gift-card-description {
	position: absolute; 
	bottom: 20px; 
	left: 20px;
	right: 20px;
	font-size: 14px;
}

@media screen and (max-width: 599px) {
	.gift-card-description {
		font-size: 12px;
	}
}

.gift-card-expiration-date-edit {
	cursor: pointer; 
	position: absolute; 
	bottom: 27px; 
	left: -20px; 
	padding: 18px 20px; 
	border-radius: 50%; 
	border-bottom-right-radius: 3px; 
	color: var(--color-neutral-800);
	font-size: 12px;
	transform: rotate(45deg);
}

.gift-card-expiration-date-edit i {
	transform: rotate(-45deg);
}

.gift-card-expiration-destinations-edit {
	cursor: pointer; 
	position: absolute; 
	top: 27px; 
	right: -34px; 
	padding: 18px 20px; 
	border-radius: 50%; 
	border-top-left-radius: 3px; 
	color: var(--color-neutral-800);
	font-size: 12px;
	transform: rotate(45deg);
	z-index: 2;
}

.gift-card-expiration-destinations-edit i {
	transform: rotate(-45deg);	
}

.js-gift-card-tip {
	display: inline-block; 
	width: 360px;
}

@media screen and (max-width: 799px) {
	.js-gift-card-tip {
		width: 280px;
	}
}

.pulsate {
	animation: pulsate infinite ease-out 2s;
	position: absolute; 
	top: 12px; 
	left: -34px;
}

@media screen and (max-width: 599px) {
	.pulsate {
		top: 17px; 
  		left: -28px;
	}
}

.pulsate-icon-background {
	animation: pulsate-icon infinite ease-out 2s;
	position: absolute;
	color: var(--color-neutral-600);
}

.pulsate-icon {
	vertical-align: top;
}

.coins {
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
    background: var(--color-neutral-100);
	border: 1px solid #f5f5f5;
    border-radius: 50%;
    font-size: 16px;
}

.supporter-check {
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
    background: var(--color-neutral-100);
	border: 1px solid #f5f5f5;
    border-radius: 50%;
    font-size: 16px;
}

.pulsate-heading {
	animation: pulsate-heading infinite ease-out 1s;
	position: absolute; 
	top: 0; 
	left: 0;
	right: 0;
}

.grid-list {
	margin: auto -20px;
}

@media screen and (min-width: 800px) {
	.grid-list {
		margin: auto;
	}
}

@media screen and (max-width: 799px) {
	.grid-list-lg {
		margin: auto -40px;
	}
}

.js-search-result-hashtag > a {
	margin-right: 10px;
}

@media (max-width: 799px) {
	.js-faq-answer {
		padding: 0 20px;
	}
	.feature-description {
		padding: 0 20px;
	}
}

.js-popup-section {
	padding: 0 20px 0 20px;
}

.js-popup-section > h3 {
	font-family: "SUSE", sans-serif;
	position: relative;
	padding: 20px 50px 20px 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.js-popup-section > h3 > i {
	position: absolute;
	top: 20px;
	right: 0;
}

.js-popup-section > h3 > img {
	float: left;
    margin: -5px 5px -5px -10px;
    height: 30px;
    width: 30px;
}

.js-faq-items-wrapper, .js-faq-item-wrapper {
	position: relative;
	margin: 0;
    padding: 0;
    list-style: none;
}

.js-show-faq-item-answer {
	min-height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.js-faq-item-wrapper img {
	width: 30px;
	height: 30px;
    display: inline-block;
    margin: 10px;
    padding: 15px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-neutral-200);
    filter: grayscale(0.5);
    border-radius: 50%;
}

.js-faq-item-wrapper h3 {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	margin-left: 70px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 40px;
	letter-spacing: -0.5px;
}

.js-faq-item-wrapper .fa-angle-up, .js-faq-item-wrapper .fa-angle-down {
	position: absolute;
    top: 0;
    right: 30px;
    line-height: 80px;
    color: var(--color-neutral-800) !important;
}

@media screen and (max-width: 799px) {
	.js-faq-item-answer.box-md {
		padding: 30px;
	}
}

.embed-card-description {
	margin-left: 115px;
}

@media screen and (max-width: 799px) {
	.embed-card-description {
		margin-left: auto;
	}
}

.embed-image {
	width: 115px; 
	height: 115px;
	background-size: cover; 
	background-position: center; 
	float: left;
	filter: brightness(0.95);
}

@media screen and (max-width: 799px) {
	.embed-image {
		width:100%; 
		height:200px;
		background-size:cover; 
		background-position:center;
		float: none;
	}
}

.clouds {
	position: relative;
	overflow: hidden;
	height: 200px;
}

.cloud {
	position: absolute;
	left: -100%;
	top: 0;
	animation: move 60s linear 0.5s infinite;
}

.js-spinner {
	position: relative;
	height: 90px;
}

.spinner {
	-webkit-animation: rotate 2s linear infinite;
	animation: rotate 2s linear infinite;
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	width: 50px;
	height: 50px;
}

.spinner .path {
	stroke: grey;
	stroke-linecap: round;
	-webkit-animation: dash 1.5s ease-in-out infinite;
	animation: dash 1.5s ease-in-out infinite;
}

.js-spinner-mini {
	position: relative;
	height: 20px;
}

.spinner-mini {
	-webkit-animation: rotate 2s linear infinite;
	animation: rotate 2s linear infinite;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	vertical-align: middle;
	margin-right: -21px;
	margin-top: -5px;
}

.spinner-mini .path {
  	stroke: grey;
  	stroke-linecap: round;
  	-webkit-animation: dash 1.5s ease-in-out infinite;
	animation: dash 1.5s ease-in-out infinite;
}

.event {
	padding: 15px 20px;
	margin-bottom: 10px;
	border: 1px solid var(--color-neutral-300);
	border-radius: 50px;
	background: var(--color-neutral-100);
}

.info {
	padding: 15px 20px;
	border-radius: 50px;
	background: transparent;
	border: 1px solid var(--color-neutral-300);
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
}

.js-ai-wrapper {
	transition: all 0.5s ease-in-out;
}

.js-ai-button {
	text-align: right;
	padding-right: 20px;
	background: var(--color-neutral-100);
}

.js-ai-result {
	position: relative;
	padding: 10px;
}

.js-ai-result .btn.btn-sm {
	background: transparent;
	border: 1px solid var(--color-neutral-300);
}

.js-ai-result .bg-300 .btn.btn-sm {
	background: transparent;
	border: 1px solid var(--color-neutral-400);
}

.js-ai-result .bg-300 .bg-300 .btn.btn-sm {
	background: transparent;
	border: 1px solid var(--color-neutral-500);
}

.js-ai-result .bg-300 .bg-300 .bg-300 .btn.btn-sm {
	background: transparent;
	border: 1px solid rgba(0,0,0,0.1);
}

.js-ai-block.speech-bubble {
	margin-bottom: 10px;
}

.ai-list-item > div {
	margin-left: 65px;
	margin-bottom: 10px;
}

.ai-list-item > div > .js-ai-block-collection {
	margin-top: 30px;
	margin-left: -40px;
}

.ai-list-item > div:first-of-type {
	padding-top: 12px;
}

.ai-list-item:last-child > div:first-of-type {
	padding-top: 0;
}

.btn-ai img {
	height: 25px; 
	width: 25px; 
	vertical-align: middle; 
	margin: 0 10px 0 0; 
	filter: grayscale(1);
}

.btn-ai-list-item,
.btn-ai-block { 
	padding: 14px;
	border-radius: 50%;
	border-top-right-radius: 0;
	background: var(--color-grey);
	height: 46px;
	width: 46px;
	line-height: 0;
}

.btn-ai-list-item {
	float: left; 
	margin-right: 10px;
	transform: rotate(45deg);
}

.btn-ai-block {
	transform: rotate(-45deg);
}

.btn-ai-list-item > img,
.btn-ai-block > img {
	height: 14px; 
	width: 14px;
	filter: grayscale(1) brightness(5);
}

.banner-wrapper {
	color: var(--color-neutral-100);
	display: flex;
	height: 500px;
	width: 500px;
	font-size: 40px; 
	font-family: 'SUSE';
	font-weight: 400; 
	line-height: 1;
	align-items: center;
	justify-content: center;
	padding: 50px;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	overflow: hidden;
	-webkit-filter: grayscale(0.65);
  	filter: grayscale(0.65);
  	margin: auto;
}

.banner-wrapper video {
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	height: 100%; 
	filter: grayscale(0.8) hue-rotate(120deg) brightness(200%); 
	opacity:0.15;
}

.banner-wrapper .banner-frame video {
	opacity: 1; 
	filter: none;
}

.banner-wrapper > img {
	height: 500px; 
	width: 500px; 
	position: absolute; 
	top: 0; 
	left: 0; 
	opacity: 0.07;
}
.banner-wrapper > .heading {
	position: absolute; 
	top: 60px; 
	left: 0; 
	right: 0;
	margin-left: auto;
	margin-right: auto;
	font-size: 30px;
	font-weight: 400;
}
.banner-wrapper > img.banner-logo {
	height: auto;
	width: 160px; 
	position: absolute; 
	top: auto;
	top: 40px; 
	right: 40px;
	left: auto;
	opacity: 1;
}
.banner > img.banner-logo {
	height: auto;
	width: 160px; 
	position: absolute; 
	top: auto;
	top: 40px; 
	right: 40px;
	left: auto;
	opacity: 1;
}
.banner-wrapper > .banner-logo-text {
	text-align: right; 
	position: absolute; 
	top: 90px; 
	right: 48px;
}
.banner > .banner-logo-text {
	text-align: right; 
	position: absolute; 
	top: 90px; 
	right: 48px;
}
.banner-wrapper > img.banner-transition-icon {
	height: 300px;
	width: 300px; 
	position: absolute; 
	top: auto;
	bottom: auto; 
	right: auto;
	left: auto;
	opacity: 1;
}
.banner-wrapper > img.banner-corner-icon-logo {
	height: auto;
	width: 60px; 
	position: absolute; 
	top: 40px;
	bottom: auto; 
	right: auto;
	left: 40px;
	opacity: 0.5;
	z-index: 2;
}
.banner-wrapper > div.banner-corner-icon-bg {
	height: 60px;
	width: 60px; 
	position: absolute; 
	top: 40px;
	bottom: auto; 
	right: auto;
	left: 40px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	z-index: 2;
}
.banner-wrapper .quote {
	opacity: 0;
	animation: .4s fadeinquote forwards ease-in;
	-webkit-animation: .4s fadeinquote forwards ease-in;
}
.banner-wrapper .quote span {
	display: inline-block;
}
.banner-wrapper .quote .author {
	display: block;
	font-size: 30px;
	margin-top: 15px;
	font-weight: 400;
}
.banner-source {
	text-align: left; 
	color: var(--color-neutral-100); 
	position: absolute; 
	bottom: 40px; 
	left: 40px; 
	right: 40px;
}
.banner-countdown {
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0;
}
.banner-countdown-left {
	height: 2px; 
	background: grey; 
	width: 100%; 
	float: left;
}
.chat-bubble-countdown {
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0;
}
.chat-bubble-countdown-left {
	height: 2px; 
	background: grey; 
	width: 100%; 
	float: left;
}
.author-text-image {
	text-align: right; 
	margin-top: 20px;
	margin-right: -10px; 
	margin-bottom: -10px;
	font-size: 18px;
	font-weight: 500;
}
.author-text-image img {
	vertical-align: middle; 
	margin-right: 0; 
	margin-bottom: 0;
	margin-left: 10px; 
}
.banner-wrapper .quote.loading span {
	animation: loadingquote 2.5s infinite alternate;
}
.banner-wrapper .quote.loading span:nth-child(1) {
  	animation-delay: 0s;
}
.banner-wrapper .quote.loading span:nth-child(2) {
  	animation-delay: 0.2s;
}
.banner-wrapper .quote.loading span:nth-child(3) {
  	animation-delay: 0.4s;
}
.banner-wrapper .quote.loading span:nth-child(4) {
  	animation-delay: 0.6s;
}
.banner-wrapper .quote.loading span:nth-child(5) {
  	animation-delay: 0.8s;
}
.banner-wrapper .quote.loading span:nth-child(6) {
  	animation-delay: 1s;
}
.banner-wrapper .quote.loading span:nth-child(7) {
  	animation-delay: 1.2s;
}
.banner-wrapper .quote.loading span:nth-child(8) {
  	animation-delay: 1.4s;
}
.banner-wrapper .quote.loading span:nth-child(9) {
  	animation-delay: 1.6s;
}
.banner-wrapper .quote.loading span:nth-child(10) {
  	animation-delay: 1.8s;
}
.banner-wrapper .quote.loading span:nth-child(11) {
  	animation-delay: 2s;
}
.banner-wrapper .quote.loading span:nth-child(12) {
  	animation-delay: 2.2s;
}
.banner-wrapper .quote.loading span:nth-child(13) {
  	animation-delay: 2.4s;
}
.banner-wrapper .quote.loading span:nth-child(14) {
  	animation-delay: 2.6s;
}
.banner-wrapper .quote.loading span:nth-child(15) {
  	animation-delay: 2.8s;
}
.banner-wrapper .quote.loading span:nth-child(16) {
  	animation-delay: 3s;
}
.banner-wrapper .quote.loading span:nth-child(17) {
  	animation-delay: 3.2s;
}
.banner-wrapper .quote.loading span:nth-child(18) {
  	animation-delay: 3.4s;
}
.banner-wrapper .quote.loading span:nth-child(19) {
  	animation-delay: 3.6s;
}
.banner-wrapper .quote.loading span:nth-child(20) {
  	animation-delay: 3.8s;
}
.banner-wrapper .quote.loading span:nth-child(21) {
  	animation-delay: 4s;
}
.banner-wrapper .quote.loading span:nth-child(22) {
  	animation-delay: 4.2s;
}
.banner-wrapper .quote.loading span:nth-child(23) {
  	animation-delay: 4.4s;
}
.banner-wrapper .quote.loading span:nth-child(24) {
  	animation-delay: 4.6s;
}
.banner-wrapper .quote.loading span:nth-child(25) {
  	animation-delay: 4.8s;
}
.banner-wrapper .quote.loading span:nth-child(26) {
  	animation-delay: 5s;
}
.banner-wrapper .quote.loading span:nth-child(27) {
  	animation-delay: 5.2s;
}
.banner-wrapper .quote.loading span:nth-child(28) {
  	animation-delay: 5.4s;
}
.banner-wrapper .quote.loading span:nth-child(29) {
  	animation-delay: 5.6s;
}
.banner-wrapper .quote.loading span:nth-child(30) {
  	animation-delay: 5.8s;
}
.banner-wrapper .quote.loading span:nth-child(31) {
  	animation-delay: 6s;
}
.banner-wrapper .quote.loading span:nth-child(32) {
  	animation-delay: 6.2s;
}
.banner-wrapper .quote.loading span:nth-child(33) {
  	animation-delay: 6.4s;
}
.banner-wrapper .quote.loading span:nth-child(34) {
  	animation-delay: 6.6s;
}
.banner-wrapper .quote.loading span:nth-child(35) {
  	animation-delay: 6.8s;
}
.banner-wrapper .quote.loading span:nth-child(36) {
  	animation-delay: 7s;
}
.banner-wrapper .quote.loading span:nth-child(37) {
  	animation-delay: 7.2s;
}
.banner-wrapper .quote.loading span:nth-child(38) {
  	animation-delay: 7.4s;
}
.banner-wrapper .quote.loading span:nth-child(39) {
  	animation-delay: 7.6s;
}
.banner-wrapper .quote.loading span:nth-child(40) {
  	animation-delay: 7.8s;
}

.banner {
	position: relative; 
	overflow: hidden; 
	float: left; 
	height: 500px; 
	width: 500px; 
	margin-right: 5px; 
	margin-left: 5px; 
	margin-bottom: 10px;
}

.banner video {
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	height: 100%; 
	filter: grayscale(0.8) hue-rotate(120deg) brightness(200%); 
	opacity:0.15;
}

.banner-box-wrapper {
	padding: 40px;
	position: absolute; 
	bottom: 0; 
	left: 0; 
	z-index: 2;
}

.banner-box {
	padding: 40px;
	display: inline-block;
	width: 350px;
	color: var(--color-neutral-800);
	text-align: left;
	background: var(--color-neutral-200); 
	position: relative;
}

.banner-box-message-left {
	width: 370px;
    padding: 20px 30px;
    margin-right: 50px;
    border-top-left-radius: 3px;
}

.banner-box-message-right {
	width: 370px;
    background: #239bff;
    color: white;
    padding: 20px 30px;
    margin-left: 50px;
    border-top-right-radius: 3px;
}

.noise, .banner-wrapper > img.noise {
	position: absolute; 
	inset: 0; 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	filter: grayscale(0.8) hue-rotate(120deg) brightness(50%);
    opacity: 0.4;
}

.times-corner {
	position: absolute; 
	top: 15px; 
	right: 15px; 
	border-radius: 50%; 
	width: 50px; 
	height: 50px; 
	padding-top: 16px; 
	opacity: 1;
	text-align: center;
	background: var(--color-neutral-100);
	cursor: pointer;
}

.cart-bottom-right {
	position: fixed; 
	bottom: 20px; 
	right: 110px; 
	z-index: 2; 
	display: inline-block;
	text-align: left;
}

@media screen and (max-width: 799px) {
	.cart-bottom-right {
		position: fixed; 
		top: auto;
		bottom: 70px; 
		right: auto;
		left: 10px;
		margin-bottom: env(safe-area-inset-bottom); /* iOS safe area */
	}
}

.svg-donate {
	height: 20px;
	width: 20px;
	margin-right: 10px;
}

.svg-donate-sm {
	height: 17px;
	width: 17px;
	margin-right: 10px;
}

.svg-donate-mini {
	height: 12px;
	width: 12px;
}

.selected {
	background: #f5f5f5;
    border: 1px solid var(--color-neutral-400);
}

body:has(.yt-fullscreen) {
    background-color: var(--color-neutral-900) !important;
}

.yt-fullscreen {
    position: fixed;
    inset: 0;
    background: var(--color-neutral-900);
	padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-fullscreen > .embed-responsive {
	position: relative;
    width: 100%;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    /* Enforce 16:9 ratio */
    aspect-ratio: 16 / 9;
    /* In landscape, the limiting factor is almost always height. 
       We calculate the width based on the visible height. */
    width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 16 / 9));
}

.yt-fullscreen > .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.yt-fullscreen > .js-yt-poster-img {
    position: absolute;
    /* Using the same width logic as the video container */
    width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 16 / 9));
    aspect-ratio: 16 / 9;
    max-height: 100%; 
    object-fit: contain;
}

.js-yt-wrapper {
	transition: cursor 0.5s ease;
}

.js-yt-state-change-icon {
	font-size: 80px;
    position: absolute;
    inset: 0;
    margin: auto;
    color: var(--color-neutral-100);
    pointer-events: none;
    display: flex;
	opacity: 0;
    align-items: center;
    justify-content: center;
	transition: all 0.4s ease-in-out;
}

.js-yt-time-bar-played {
	height: 25%; 
	background: var(--color-neutral-300);
	width: 0%; 
	position: absolute;
	bottom: 0;
	left: 0;
}

.js-yt-time-bar-unplayed {
	height: 25%; 
	background: var(--color-grey);
	width: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
}

.js-yt-time-bar {
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0;
	height: 20px;
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {

	.js-yt-time-bar:hover {
		height: 30px;
		cursor: pointer;
	}

}

.js-yt-time-marker {
	width: 15px;
    height: 15px;
    background-color: var(--color-neutral-100);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    display: none;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.12);
}

.yt-fullscreen .js-yt-time-bar {
	bottom: 80px; 
	left: 15px; 
	right: 15px;
}

.yt-fullscreen .js-yt-time-bar-played {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.yt-fullscreen .js-yt-time-bar-unplayed {
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}

.js-yt-wrapper:fullscreen,
.js-yt-wrapper:-webkit-full-screen,
.js-yt-wrapper:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #000 !important;
}

/* Ensure your custom controls stay visible in true fullscreen */
.js-yt-wrapper:fullscreen .js-yt-buttons,
.js-yt-wrapper:-webkit-full-screen .js-yt-buttons {
    z-index: 2147483647 !important;
}

.js-yt-buttons {
	position: absolute; 
	bottom: 20px; 
	left: 15px; 
}

.js-yt-play-on-youtube {
	position: absolute; 
	top: 20px; 
	left: 20px;
}

.js-video-time-bar, 
.js-video-buttons, 
.js-yt-time-bar, 
.js-yt-buttons, 
.js-yt-play-on-youtube {
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
}

.js-yt-wrapper.is-idle {
    cursor: none;
}

.js-yt-wrapper.is-idle .js-video-time-bar,
.js-yt-wrapper.is-idle .js-video-buttons,
.js-yt-wrapper.is-idle .js-yt-time-bar,
.js-yt-wrapper.is-idle .js-yt-buttons,
.js-yt-wrapper.is-idle .js-yt-play-on-youtube {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.video-fullscreen {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--color-neutral-900);
	z-index: 999999;
}

.video-fullscreen > video {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: auto;
	left: 0;
	right: 0;
}

.js-video-time-bar-played {
	height: 100%; 
	background: var(--color-neutral-400);
	width: 0%; 
	float: left;
}

.js-video-time-bar-unplayed {
	height: 100%; 
	background: grey; 
	width: 100%; 
	float: left;
}

.js-video-time-bar {
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0;
	height: 3px;
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {

	.js-video-time-bar:hover {
		height: 10px;
		cursor: pointer;
	}

}

.video-fullscreen .js-video-time-bar {
	bottom: 80px; 
	left: 15px; 
	right: 15px;
	border-radius: 10px;
}

.js-video-buttons {
	position: absolute; 
	bottom: 20px; 
	left: 15px; 
	right: 15px;
}

.js-scroll-icon-wrapper {
	position: fixed;
	bottom: 40px;
}

@media screen and (max-width: 799px) {
	.js-scroll-icon-wrapper {
		bottom: 70px;
	}
}

.overflow-scroll-icon {
	position: fixed;
	bottom: 80px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 52;
	background: #000000;
	border-radius: 60px;
	width: 60px;
	height: 60px;
	opacity: 0.2;
	text-align: center;
	margin-bottom: env(safe-area-inset-bottom);
}

@media screen and (min-width: 800px) {
	.overflow-scroll-icon {
		display: none !important;
	}
}

.overflow-scroll-icon .dot {
	display: block;
	margin: 15px;
	-webkit-animation: mouseScroll 2.5s infinite ease-out;
	animation: mouseScroll 2.5s infinite ease-out;
}

.overflow-scroll-icon .dot > .fa {
	color: var(--color-neutral-100);
}

.scroll-icon {
	display: inline-block;
	background: #000000;
	border-radius: 60px;
	width: 60px;
	height: 60px;
	opacity: 0.2;
}
.scroll-icon .dot {
	display: block;
	margin: 15px;
	-webkit-animation: mouseScroll 2.5s infinite ease-out;
	animation: mouseScroll 2.5s infinite ease-out;
}

.scroll-icon .dot > .fa {
	color: var(--color-neutral-100);
}

.invisible-scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.invisible-scroll::-webkit-scrollbar {
  display: none; /* WebKit browsers (Chrome and Safari) */
}

.js-all-features-wrapper {
	min-height: 600px;
}

.js-feature-groups {
	padding: 20px 0;
	position: relative; 
	white-space: nowrap; 
	overflow: scroll; 
	-webkit-overflow-scrolling: touch; 
	border-left: 1px solid var(--color-neutral-300);
	border-right: 1px solid var(--color-neutral-300);
}

@media screen and (max-width: 799px) {
	.js-feature-groups {
		padding: 20px 0 10px 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
}

.js-feature-groups .js-show-feature-group {
	width: 300px;
	padding: 25px 35px;
	height: 70px;
    opacity: 0.4;
}

@media screen and (max-width: 799px) {
	.js-feature-groups .js-show-feature-group {
		width: calc(100vw - 40px);
		max-width: 540px;
	}
	.js-feature-groups .js-show-feature-group img {
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.js-feature-groups .js-show-feature-group:hover {
		opacity: 1;
	}
}

.js-show-feature-group.selected-grow {
	opacity: 1;
}

.feature-groups-padding {
    display: inline-block;
    vertical-align: middle;
    width: 60px; 
}

@media screen and (max-width: 799px) {
	.feature-groups-padding {
		display: none;
	}
}

.js-next-feature-group, .js-previous-feature-group {
	position: absolute; 
	top: 0; 
	bottom: 0;
	margin: auto; 
	display: inline-block; 
	border-radius: 50%; 
	height: 50px; 
	width: 50px; 
}

.js-next-feature-group { 
	transition: tranform 0.2s;
	right: 10px;
	z-index: 3;
}

.js-previous-feature-group { 
	transition: tranform 0.2s;
	left: 10px;
	z-index: 3;
}

@media screen and (max-width: 799px) {

	.js-next-feature-group { 
		top: 10px;
		right: 10px;
	}

	.js-previous-feature-group { 
		top: 10px;
		left: 10px;
	}

}

@media (hover: hover) and (pointer: fine) {

	.js-next-feature-group:hover { 
		transform: scale(1.1);
		opacity: 1;
	}

	.js-previous-feature-group:hover { 
		transform: scale(1.1);
		opacity: 1;
	}

}

.js-next-feature-group i, .js-previous-feature-group i {
	line-height: 50px;
}

.js-feature-groups-dots {
	position: relative;
	padding-bottom: 40px;
}

.js-feature-groups-dots .fa-circle {
	font-size: 8px;
	margin-left: 5px;
	margin-right: 5px;
}

.js-video-feature-wrapper {
	position: relative; 
	padding-top: calc((1382 / 2576) * (100%));
	box-shadow: 0 0 40px 0 rgba(0,0,0,0.08);
	border-radius: 15px;
	overflow: hidden;
}

@media screen and (max-width: 799px) {
	.js-video-feature-wrapper {
		border-radius: 0;
	}
}

.js-video-placeholder {
	position: absolute; 
	inset: 0;
}

.js-presentation-wrapper.unopen {
	max-height: 300px; 
	overflow: hidden; 
	margin-bottom: 20px;
}

.js-presentation-wrapper-fade {
	position: absolute; 
	top: 80%; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.writing-dots {
  display:flex;margin:0 5px;height:100%;
}

.writing-dots-dot {
    animation-name: writing-dots-blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
		height:100%;
	position: relative;
}
.writing-dots-dot:nth-child(2) {
    animation-delay: .2s;
}

.writing-dots-dot:nth-child(3) {
    animation-delay: .4s;
}

.wiggle {
	-webkit-animation: 3s wiggle ease infinite;
	animation: 3s wiggle ease infinite;
}

.wiggle-lg {
	-webkit-animation: 5s wiggle-lg ease infinite;
	animation: 5s wiggle-lg ease infinite;
}

.wiggle-sm {
	-webkit-animation: 3s wiggle-sm ease infinite;
	animation: 3s wiggle-sm ease infinite;
}

.blink {
	-webkit-animation: 1.5s blink ease infinite;
	animation: 1.5s blink ease infinite;
}

.blink-slow {
	-webkit-animation: 3s blink ease infinite;
	animation: 3s blink ease infinite;
}

.blink-rss {
	-webkit-animation: 2s blink-rss ease infinite;
	animation: 2s blink-rss ease infinite;
}

.highlight {
	-webkit-animation: 2.5s highlight ease infinite;
	animation: 2.5s highlight ease infinite;
}

.step {
	align-items: center;
    justify-content: center;
    display: inline-flex;
	background: var(--color-grey);
	height: 30px;
	width: 30px;
	padding: 15px;
	border-radius: 50%;
	color: var(--color-neutral-100);
	font-size: 22px;
	line-height: 30px;
}

@media (hover: hover) and (pointer: fine) {

	.step.extralight:hover {
		opacity: 1;
	}

}

.number-circle {
	background: var(--color-grey);
	display: inline-block;
	padding: 15px;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	margin-bottom: 30px;
	margin-top: 20px;
	font-size: 22px;
	line-height: 30px;
}

.number-circle-sm {
	background: var(--color-grey);
	display: inline-block;
	padding: 10px;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 20px;
	margin-right: 10px;
}

.load-pie-wrapper {
	position: fixed; 
	width: 84px;
	height: 84px;
	bottom: 18px; 
	right: 18px;
	margin-bottom: env(safe-area-inset-bottom);
	z-index: 2;
}

@media screen and (max-width: 799px) {
	.load-pie-wrapper {
		width: 64px;
		height: 64px;
		bottom: 68px; 
		right: 3px;
		margin-bottom: env(safe-area-inset-bottom);
  }
}

.load-pie {
	width: 100%;
	height: 100%;
	clip-path: circle(50% at 50% 50%);
	-webkit-clip-path: circle(50% at 50% 50%);
	overflow: hidden;
	position: relative;
	opacity: 0.7;
}

.load-left,
.load-right {
	height: 100%;
	width: 50%;
	position: absolute;
	overflow: hidden;
}

.load-right {
	right: 0;
}

.left-load-block,
.right-load-block {
	width: 100%;
	height: 100%;
	background: #599e80;
}

.left-load-block {
	transform-origin: 100% 50%;
}

.right-load-block {
	transform-origin: 0% 50%;
}

.left-load-block.activated {
	animation-timing-function: linear;
	animation-duration: 3s;
}

.right-load-block.activated {
	animation-timing-function: linear;
	animation-duration: 3s;
}

.left-load-block.activated {
	animation-name: loading-animation-left;
}

.right-load-block.activated {
	animation-name: loading-animation-right;
}

.speech-bubble {
	position: relative;
	overflow: visible;
	margin-top: 20px;
	background: var(--color-neutral-300);
	border-radius: 25px;
}

.speech-bubble:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 10px solid var(--color-neutral-300);
	border-right: 10px solid transparent;
	border-bottom: 10px solid var(--color-neutral-300);
	border-top: 10px solid transparent;
	left: 40px;
	top: -20px;
}

.bg-300 .speech-bubble {
	background-color: var(--color-neutral-400);
}

.bg-300 .speech-bubble:before {
	border-left: 10px solid var(--color-neutral-400);
	border-bottom: 10px solid var(--color-neutral-400);
}

.bg-300 .bg-300 .speech-bubble {
	background-color: var(--color-neutral-500);
}

.bg-300 .bg-300 .speech-bubble:before {
	border-left: 10px solid var(--color-neutral-500);
	border-bottom: 10px solid var(--color-neutral-500);
}

.speech-bubble-dark {
	background: var(--color-grey);
	color: var(--color-neutral-100);
}

.speech-bubble-dark * {
	color: var(--color-neutral-100);
}

.speech-bubble-dark:before {
	border-left-color: var(--color-grey);
	border-bottom-color: var(--color-grey);
}

.speech-bubble-green {
	background: var(--color-green);
	color: var(--color-neutral-100);
}

.speech-bubble-green * {
	color: var(--color-neutral-100);
}

.speech-bubble-green:before {
	border-left-color: var(--color-green);
	border-bottom-color: var(--color-green);
}

.speech-bubble-donate-widget-receiver {
	position: relative;
	overflow: visible;
	margin-bottom: 15px;
	position: absolute;
	top: -30px;
	left: 50px;
	animation: popupanimation 0.4s ease-in-out;
 	-webkit-animation: popupanimation 0.4s ease-in-out;

}
.speech-bubble-donate-widget-receiver:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 5px solid var(--color-grey);
	border-right: 5px solid transparent;
	border-top: 5px solid var(--color-grey);
	border-bottom: 5px solid transparent;
	left: 30px;
	bottom: -10px;
}

.conversation-page {
	overflow: hidden;
}

.js-conversation-top {
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	z-index: 2;
}

.js-conversation-middle {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.js-conversation-bottom {
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	z-index: 2;
}

@media screen and (max-width: 799px) {
	.conversation-page {
		overflow: hidden;
	}
	.js-conversation-top {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
	}
	.js-conversation-middle {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.js-conversation-bottom {
		position: absolute; 
		bottom: 0; 
		left: 0; 
		right: 0; 
		z-index: 2;
	}
}

.bounce {
	animation: bounce 1s ease-in-out;
}

/*
---------------------------------------- ANIMATIONS ----------------------------------------
*/

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-10px);}
	60% {transform: translateY(-5px);}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-10px);}
	60% {transform: translateY(-5px);}
}

@-webkit-keyframes spin {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}

@keyframes spin {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}

@-webkit-keyframes spin-slow {
    0% {
        transform: rotate(0deg) scale(1);
    }
	25% {
		transform: rotate(90deg) scale(1.2);
	}
	50% {
		transform: rotate(180deg) scale(1);
	}
	75% {
		transform: rotate(270deg) scale(0.8);
	}
    100% {
        transform:rotate(360deg) scale(1);
    }
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg) scale(1);
    }
	25% {
		transform: rotate(90deg) scale(1.2);
	}
	50% {
		transform: rotate(180deg) scale(1);
	}
	75% {
		transform: rotate(270deg) scale(0.8);
	}
    100% {
        transform:rotate(360deg) scale(1);
    }
}

@-webkit-keyframes wiggle-lg {
	0% {
		transform: rotate(-0.75deg) scale(1);
	}
	4% {
		transform: rotate(10deg);
	}
	8% {
		transform: rotate(-7deg);
	}
	12% {
		transform: rotate(3deg);
	}
	16% {
		transform: rotate(-1deg);
	}
	20% {
		transform: rotate(0) scale(1.5);
	}
	100% {
		transform: rotate(0) scale(1);
	}
}

@keyframes wiggle-lg {
	0% {
		transform: rotate(-0.75deg) scale(1);
	}
	4% {
		transform: rotate(10deg) scale(1.1);
	}
	8% {
		transform: rotate(-7deg) scale(1);
	}
	12% {
		transform: rotate(3deg);
	}
	16% {
		transform: rotate(-1deg);
	}
	20% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.96);
	}
	100% {
		transform: scale(0.98);
	}
}

@-webkit-keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.96);
	}
	100% {
		transform: scale(0.98);
	}
}

@keyframes pulse-lg {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.7);
	}
	100% {
		transform: scale(0.9);
	}
}

@-webkit-keyframes pulse-lg {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.75);
	}
	100% {
		transform: scale(0.9);
	}
}

@keyframes pulse-sm {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(0.99);
	}
}

@-webkit-keyframes pulse-sm {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(0.99);
	}
}

@keyframes pulse-quick {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(0.95);
	}
}

@-webkit-keyframes pulse-quick {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(0.95);
	}
}

@keyframes popupanimation {
	0% {
		transform: scale(0.95); 
	}
	50% {
		transform: scale(1.02); 
	}
	100% {
		transform: scale(1); 
	}
}

@-webkit-keyframes popupanimation {
	0% {
		-webkit-transform: scale(0.95); 
	}
	50% {
		-webkit-transform: scale(1.02);
	}
	100% {
		-webkit-transform: scale(1); 
	}
}

@keyframes popupanimationsm {
	0% {
		bottom: 25px;
	}
	100% {
		bottom: 5px;
	}
}

@-webkit-keyframes popupanimationsm {
	0% {
		bottom: 25px;
	}
	100% {
		bottom: 5px;
	}
}

@keyframes slidemessageright {
	0% {
		right: -340px; 
		opacity: 0;
	}
	100% {
		right: 0; 
		opacity: 1;
	}
}

@-webkit-keyframes slidemessageright {
	0% {
		right: -340px; 
		opacity: 0;
	}
	100% {
		right: 0; 
		opacity: 1;
	}
}

@keyframes slidemessageleft {
	0% {
		left: -340px; opacity: 0;
	}
	100% {
		left: 0; 
		opacity: 1;
	}
}

@-webkit-keyframes slidemessageleft {
	0% {
		left: -340px; 
		opacity: 0;
	}
	100% {
		left: 0; 
		opacity: 1;
	}
}

@keyframes fadein {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 1; 
    	transform: scale(1.02); 
    }
}

@-moz-keyframes fadein {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 1; 
    	transform: scale(1.02); 
    }
}

@-webkit-keyframes fadein {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 1; 
    	transform: scale(1.02); 
    }
}

@-ms-keyframes fadein {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 1; 
    	transform: scale(1.02); 
    }
}

@-o-keyframes fadein {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 1; 
    	transform: scale(1.02); 
    }
}

@keyframes fadeinoverlay {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 0.65; 
    }
}

@-webkit-keyframes fadeinoverlay {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 0.65; 
    }
}

@keyframes fadeinoverlaylight {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 0.15; 
    }
}

@-webkit-keyframes fadeinoverlaylight {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 0.15; 
    }
}

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

@-webkit-keyframes fadeinsimple {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 1; 
    }
}

@keyframes fadeinsimpleextralight {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 0.4; 
    }
}

@-webkit-keyframes fadeinsimpleextralight {
    from { 
    	opacity: 0; 
    }
    to { 
    	opacity: 0.4; 
    }
}

@-webkit-keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

@keyframes loadingquote {
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
		transform: translateY(2px);
	}
}

@keyframes fadeinquote {
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeinquote {
	100% {
		opacity: 1;
	}
}

@keyframes animateScrollDown {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-2200px);
		opacity: 0;
	}
}

@media screen and (max-width: 799px) {
	@keyframes animateScrollDown {
		0% {
			transform: translateY(0);
			opacity: 0;
		}
		10% {
			opacity: 1;
		}
		90% {
			opacity: 1;
		}
		100% {
			transform: translateY(-1750px);
			opacity: 0;
		}
	}
}

@-webkit-keyframes mouseScroll {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		transform: translateY(10px);
		opacity: 0;
	}
}

@keyframes mouseScroll {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		transform: translateY(10px);
		opacity: 0;
	}
}

@-webkit-keyframes wiggle {
	0% {
		transform: rotate(-1.5deg);
	}
	4% {
		transform: rotate(10deg);
	}
	8% {
		transform: rotate(-7.5deg);
	}
	12% {
		transform: rotate(2.5deg);
	}
	16% {
		transform: rotate(-0.5deg);
	}
	20% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes wiggle {
	0% {
		transform: rotate(-1.5deg);
	}
	4% {
		transform: rotate(10deg);
	}
	8% {
		transform: rotate(-7.5deg);
	}
	12% {
		transform: rotate(2.5deg);
	}
	16% {
		transform: rotate(-0.5deg);
	}
	20% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}

@-webkit-keyframes wiggle-sm {
	0% {
		transform: rotate(-0.4deg);
	}
	4% {
		transform: rotate(2.5deg);
	}
	8% {
		transform: rotate(-2deg);
	}
	12% {
		transform: rotate(0.75deg);
	}
	16% {
		transform: rotate(-0.1deg);
	}
	20% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes wiggle-sm {
	0% {
		transform: rotate(-0.4deg);
	}
	4% {
		transform: rotate(2.5deg);
	}
	8% {
		transform: rotate(-2deg);
	}
	12% {
		transform: rotate(0.75deg);
	}
	16% {
		transform: rotate(-0.1deg);
	}
	20% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 0.5;
	}
	2.5% {
		opacity: 1;
	}
	5% {
		opacity: 0.5;
	}
	10% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes blink {
	0% {
		opacity: 0.5;
	}
	2.5% {
		opacity: 1;
	}
	5% {
		opacity: 0.5;
	}
	10% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes blink-rss {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes blink-rss {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes highlight {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 0.2;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes highlight {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 0.2;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes loading-animation-left {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

@keyframes loading-animation-right {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

@-webkit-keyframes moveclouds { 
    0% { 
        bottom: 60px;
    }
    100% { 
        bottom: 1500px;
    }
}

@keyframes moveclouds { 
    0% { 
        bottom: 60px;
    }
    100% { 
        bottom: 1500px;
    }
}

@-webkit-keyframes sideways { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left: 50px;
    }
}

@keyframes sideways { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left: 50px;
    }
}

@keyframes spaceboots {
	0% { 
		-webkit-transform: translate(1px, 0px) rotate(0deg); 
	}
	33% { 
		-webkit-transform: translate(0px, -1px) rotate(-2deg); 
	}
	67% { 
		-webkit-transform: translate(-1px, 0px) rotate(2deg); 
	}
	100% { 
		-webkit-transform: translate(0px, 1px) rotate(0deg); 
	}
}

@-webkit-keyframes spaceboots {
	0% { 
		-webkit-transform: translate(1px, 0px) rotate(0deg); 
	}
	33% { 
		-webkit-transform: translate(0px, -1px) rotate(-2deg); 
	}
	67% { 
		-webkit-transform: translate(-1px, 0px) rotate(2deg); 
	}
	100% { 
		-webkit-transform: translate(0px, 1px) rotate(0deg); 
	}
}

@keyframes spaceboots-lg {
	0% { 
		-webkit-transform: translate(5px, 0px) rotate(0deg)  scale(1); 
	}
	33% { 
		-webkit-transform: translate(0px, -5px) rotate(-15deg) scale(0.45); 
	}
	67% { 
		-webkit-transform: translate(-5px, 0px) rotate(15deg) scale(0.55); 
	}
	100% { 
		-webkit-transform: translate(0px, 5px) rotate(360deg) scale(15); 
	}
}

@-webkit-keyframes spaceboots-lg {
	0% { 
		-webkit-transform: translate(5px, 0px) rotate(0deg)  scale(1); 
	}
	33% { 
		-webkit-transform: translate(0px, -5px) rotate(-15deg) scale(0.45); 
	}
	67% { 
		-webkit-transform: translate(-5px, 0px) rotate(15deg) scale(0.55); 
	}
	100% { 
		-webkit-transform: translate(0px, 5px) rotate(360deg) scale(15); 
	}
}

@keyframes pulsate {
	0% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1.2, 1.2);
		opacity: 0;
	}
}

@-webkit-keyframes pulsate {
	0% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1.2, 1.2);
		opacity: 0;
	}
}

@keyframes pulsate-icon {
	0% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(2, 2);
		opacity: 0;
	}
}

@-webkit-keyframes pulsate-icon {
	0% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(2, 2);
		opacity: 0;
	}
}

@keyframes pulsate-heading {
	0% {
		-webkit-transform: scale(0, 0);
		opacity: 0;
	}
	20% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	80% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.7, 0.7);
		opacity: 0;
	}
}

@-webkit-keyframes pulsate-heading {
	0% {
		-webkit-transform: scale(0, 0);
		opacity: 0;
	}
	20% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	80% {
		-webkit-transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.7, 0.7);
		opacity: 0;
	}
}

@keyframes move {
	0% {
	  left: calc(-4000px + 100%);
  }
  50% {
	  left: 0%;
  }
  100% {
	  left: calc(-4000px + 100%);
  }
}

@-webkit-keyframes move {
	0% {
	  left: calc(-4000px + 100%);
  }
  50% {
	  left: 0%;
  }
  100% {
	  left: calc(-4000px + 100%);
  }
}

@keyframes writing-dots-blink {
	0% {
    opacity: .2;
		top: 0px;
	}
	20% {
    opacity: 1;
		top: -2px;
	}
	50% {
    opacity: 1;
		top: -5px;
	}
	80% {
    opacity: 1;
		top: -2px;
	}
	100% {
    opacity: .2;
		top: 0px;
	}
}

/*
---------------------------------------- PRINT ----------------------------------------
*/

@media print {
	body {
    	print-color-adjust: exact !important;
		-webkit-print-color-adjust: exact !important;
    	margin-top: 0;
    }
	@page {
		size: 210mm 297mm;
		margin: 25.4mm;
	}
	.container-md {
		width: 1200px;
	}
	.container-sm {
		width: 1200px;
	}   
    .box-lg {
    	padding-left: 20px !important;
    	padding-right: 20px !important;
    }
    .box-xlg {
    	padding-left: 20px !important;
    	padding-right: 20px !important;
    }
    .box-xxlg {
    	padding-left: 40px !important;
    	padding-right: 40px !important;
    }
	.elevate-light {
		box-shadow: none;
		border-radius: 25px;
		overflow: visible;
		border: 1px solid var(--color-neutral-300);
	}   
    header,
    footer,
    .btn-bottom-left,
    .btn-bottom-right,
    .no-print, 
    .no-print * {
        display: none !important;
    }
}