html {
	background-image: unset;
	background-color: #000c18;
}

body {
	color: #fff;
}

h1, h2, h3, h4, p, li {
	font-weight: 300;
	color: #fff;
}

p {
	font-size: 1.2em;
	line-height: 1.3em;
	padding-bottom: 20px;
}

a, a:visited, a:hover {
	color: #83ffdd;
	text-decoration: none;
	font-weight: 300;
}

main {
	text-align: center;
}

section > * {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

section {
	text-align: center;
	margin: auto;
}

section h2 {
	color: #86fcd4;
	font-size: 2.0em;
	font-weight: 300;
}

/*---------------------------------------------*/
/*                  navbar                     */
/*---------------------------------------------*/

section#navbar {
	padding-top: 90px;
	padding-bottom: 10px;
	max-width: 100%;
	margin: auto;
	margin-bottom: 0px;
	text-align: center;
	
	background-image: linear-gradient(#2e2852, #1b253c);
	
}

section#navbar ul {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	list-style-type: none;
	font-family: myriad-pro, sans-serif;

	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 40px;
}

section#navbar ul li {
	font-size: 1.1em !important;
 	margin: 0;
	font-size: 0.9em;
	padding-bottom: 6px;
}

section#navbar ul li a {
	color: #83ffdd;
	position: relative;
}

/* these min-widths prevent the text from shifting as the font-weight changes */
section#navbar ul li:nth-child(1) {
	min-width: 56px;
}
section#navbar ul li:nth-child(2) {
	min-width: 102px;
}
section#navbar ul li:nth-child(3) {
	min-width: 82px;
}

section#navbar ul li.selected a {
	font-weight: 400;
	color: #83ffdd;
}

/* animated navbar links from: https://tobiasahlin.com/blog/css-trick-animating-link-underlines/ */
section#navbar ul li a::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 4px;
	bottom: 0;
	left: 0;
	background-color: #83ffdd;
	border-radius: 2px;
	transform: translate(0, 6px) scaleX(0);
	transition: transform 0.3s ease;
}

section#navbar ul li a:hover::before {
	height: 4px;
	transform: translate(0, 6px) scaleX(1) scaleY(1);
}

section#navbar ul li.selected a::before {
	transform: translate(0, 6px) scaleX(1);
}

section#navbar ul li.highlighted a::before {
	transform: translate(0, 6px) scaleX(1) scaleY(0.5);
}

section#navbar ul li.highlighted a:hover::before {
	transform: translate(0, 6px) scaleX(1) scaleY(1);
}

section p.tagline {
	color: #fff;
	font-size: 2.1em;
	line-height: 1.2em;
	padding-top: 30px;
	padding-bottom: 120px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	font-weight: 300;
	text-align: center;
}

section a.button {
	max-width: 500px;
	margin-top: 60px;
	margin-bottom: 80px;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	display: block;
	background-color: #02687d;
	padding: 18px;
	border-radius: 12px;
	font-size: 1.2em;
	font-weight: 500;
	text-align: center;
}



/*---------------------------------------------*/
/*                    tout                     */
/*---------------------------------------------*/


section#tout {
	background: url('../images/tout-background-only.jpg') center top no-repeat;
	background-size: 1200px 1200px;
	min-height: 700px;
	padding-top: 50px;
	
 	-webkit-touch-callout: none; /* Safari (iOS) */
    -webkit-user-select: none; /* Safari (Mac) */
	user-select: none;
	touch-action: manipulation;
}

section#tout h1 {
	display: block;
	width: 430px;
	aspect-ratio: 430/169;

	background: url('../images/tapestry-logo.png') center top no-repeat;
	background-size: cover;

	overflow: hidden;
	color: transparent;
}

section#tout h2 {
	color: #fff;
	font-size: 2.1em;
	line-height: 1.2em;
	padding-top: 400px;
	padding-bottom: 50px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}




/*---------------------------------------------*/
/*                 download                    */
/*---------------------------------------------*/

section.download {
	/* background-image: linear-gradient(#150767, #0a0232); */
	background-image: linear-gradient(#9236c8, #5c0fad);
	padding: 30px 0px 10px 0px;

}

section.download a {
	display: block;
	width: 210px;
	height: 0px;
	padding: 62px 0px 0px 0px;
	overflow: hidden;
	background: url('../images/shared/appstore.png') center top no-repeat;
	background-size: 210px 62px;
}

section.download p {
	font-size: 0.9em;
	padding-top: 8px;
}


section#download-bottom {
	background-image: linear-gradient(#9236c8, #5c0fad);
	border-top: 24px solid #c755ff;
}






/*---------------------------------------------*/
/*              main-features                  */
/*---------------------------------------------*/

section#main-features {
	background-image: linear-gradient(#000023, #12005e, #290077, #1f4c8b, #00b894);
	padding: 0px 0px 0px 0px;

}

section#main-features ul {
	max-width: 100%;
	margin: 0px;
	list-style-type: none;
	text-align: left;
	padding-top: 0px;
	
	background: url('../images/features-background.png') center top no-repeat;
}

section#main-features ul li {
	text-align: center;
	margin: 0px;
}

section#main-features ul li div {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}




section#main-features ul li img {
	width: 100%;
	height: 164px;
}

section#main-features ul li h3 {
	color: #86fcd4;
	font-size: 1.6em;
	padding: 30px 0px 30px 0px;
	font-weight: 300;
}

section#main-features ul li p {
	padding-bottom: 80px;
}

section#main-features ul li:last-child {

/*
	background: url('../images/features-phone.png') center bottom no-repeat;
	background-size: 800px auto;
	padding-bottom: 300px;
*/

}




section#main-features ul li#feature-webyourway img {
	width: auto;
	height: auto;
}

section#main-features ul li#feature-webyourway img#webyourway-phone {
	float: left;
	width: 360px;
	height: 0px;
	padding: 594px 0px 0px 0px;
	overflow: hidden;
	background: url('../images/webyourway-phone.png') center center no-repeat;
	background-size: 360px 594px;
	margin-left: -20px;
}

section#main-features ul li#feature-webyourway img#webyourway-icons {
	width: 360px;
}

section#main-features ul li#feature-webyourway h3 {
	padding-top: 120px;
	padding-bottom: 16px;
}

section#main-features ul li#feature-webyourway p {
	padding-bottom: 40px;
	padding-right: 10px;
}






section#main-features ul li#feature-privacy {
	clear: both;
	padding-top: 0px;
	background-color: #030e3d;
}

section#main-features ul li#feature-privacy div {
	padding: 40px 0px 40px 40px;
	background: url('../images/privacy-dude.jpg') right bottom no-repeat;
	min-height: 320px;
}

section#main-features ul li#feature-privacy h3 {
	max-width: 500px;
}

section#main-features ul li#feature-privacy p {
	padding-bottom: 40px;
	max-width: 400px;
}




section#main-features ul li#feature-spoilers {
	background: #007777 url('../images/diagonal-stripe-background.jpg') center top repeat-x;
	background-size: 600px auto;
}



section#main-features ul li#feature-spoilers {
	padding-top: 80px;
	padding-bottom: 80px;
}

section#main-features ul li#feature-spoilers img {
	width: 100%;
	max-width: 360px;
	height: auto;
}

section#main-features ul li#feature-spoilers img#spoilers-1 {
	float: left;
	margin-right: 20px;
}

section#main-features ul li#feature-spoilers img#spoilers-pills {
}

section#main-features ul li#feature-spoilers h3 {
	padding-top: 0px;
	padding-bottom: 16px;
}

section#main-features ul li#feature-spoilers p {
	padding-bottom: 40px;
	padding-right: 10px;
}






/*
section#main-features ul li#feature-spoilers {
	clear: both;
	padding-top: 0px;
	padding-bottom: 80px;
}

section#main-features ul li#feature-spoilers p {
	padding-bottom: 50px;
}

section#main-features ul li#feature-spoilers div {
	background-color: #20568d;
	text-align: center;
	border-radius: 16px;
	padding: 12px;
	
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 20px;
}

section#main-features ul li#feature-spoilers img {
	width: calc( 50% - 12px );
	height: auto;
}
*/


/*---------------------------------------------*/
/*            secondary-features               */
/*---------------------------------------------*/

section#secondary-features {
	background-image: linear-gradient(#311871, #1b213f);
	padding: 40px 0px 40px 0px;

}

section#secondary-features ul {
	margin: 0 auto;
	list-style-type: none;
	text-align: left;

	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 20px;
}

section#secondary-features ul li {
	width: 300px;
	margin: 0;
	padding: 20px 0px 20px 0px;
	font-size: 1.1em;
	
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
}

section#secondary-features ul li h3 {
	font-size: 1.1em;
	font-weight: 500;
	padding: 0px;
	margin-top: -2px;
	margin-bottom: 4px;
}

section#secondary-features ul li p {
	font-size: 0.9em;
	color: #60dcf2;
}

section#secondary-features ul li img {
	width: 68px;
	height: 68px;
	margin-right: 20px;
}





/*---------------------------------------------*/
/*              connector-info                 */
/*---------------------------------------------*/

section#connector-info {
	/* background-image: linear-gradient(#00515f, #009576, #00596d, #003266); */
	background-image: linear-gradient(#003266, #00b596);
	padding: 60px 20px 60px 20px;

}

section#connector-info h2 {
	font-size: 2.2em;
	padding-bottom: 20px;
}

section#connector-info img {
	width: 100%;
	max-width: 360px;
	height: auto;
	
	order: 1;
}

section#connector-info div.text {
	margin-right: 20px;
}

section#connector-info p {
	text-align: left;
	padding: 0px 0px 20px 0px;
}

section#connector-info div.content {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

section#connector-info a.button {
	margin-bottom: 20px;
}








/*---------------------------------------------*/
/*               secondary pages               */
/*---------------------------------------------*/


section.secondary {
	background: url('../images/tout-compact.jpg') center top no-repeat;
	background-size: 1400px auto;
	min-height: 700px;
	padding-top: 250px;
}

section.secondary h1 {
	display: block;
	width: 430px;
	aspect-ratio: 430/169;

	background: url('../images/tapestry-logo.png') center top no-repeat;
	background-size: cover;

	overflow: hidden;
	color: transparent;
	
	display: none;
}


section.secondary h2 {
	padding-bottom: 40px;
}

section.secondary h3 {
	font-weight: 300;
	color: #c755ff;
	font-size: 1.4em;
	margin: 20px auto;
}




/*---------------------------------------------*/
/*            connectors page                  */
/*---------------------------------------------*/

section#connectors {
	text-align: left;
	padding-bottom: 60px;
	padding-left: 0px;
	padding-right: 0px;
}

section#connectors > div {
	padding-left: 20px;
	padding-right: 20px;
}

section#connectors h3 {
	font-size: 1.8em;
}

section#connectors > div:first-of-type {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

section#connectors > div:first-of-type div {
	flex-basis: 320px;
	flex-grow: 2;
}

section#connectors img#main-connector-icon {
	max-width: 280px;
	height: 280px;
	margin-top: 0px;
	flex-basis: 280px;
	order: 2;
}

section#connectors div#connectors-list {
	padding: 40px 0px 80px 0px;
	/* background-image: linear-gradient(#003151 0%, #2cc2ff 68%, #006699 71%, #023 73%, #2cc2ff 76%, #053248 100%), radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,10,32,1) 100%); */
	background-image: linear-gradient(#003151 0%, #2cc2ff 68%, #2cc2ff 76%, #053248 100%), radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,10,32,1) 100%);
	background-blend-mode: overlay;
	max-width: 100%;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 0px;
}

section#connectors div#connectors-list h4 {
	color: #86fcd4;
	font-size: 1.8em;
	font-weight: 300;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

section#connectors div#connectors-list ul {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
/* 
	outline: 1px solid lime;
 */
}

section#connectors div#connectors-list ul li {
	width: 340px;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	margin: 0;
	padding: 0px;
	background-color: #11101e;
	border-radius: 8px;
/* 
	text-align: left;
	justify-content: flex-start;
	outline: 1px solid red;
 */
}

section#connectors div#connectors-list ul li div.info {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
	margin: 20px;
}

section#connectors div#connectors-list ul li div.download {
	background-color: #17253e;
	width: calc( 100% - 40px );
	padding: 20px;
	border-radius: 0px 0px 8px 8px;
	margin-top: auto;
}


section#connectors div#connectors-list li > * {
/* 
	outline: 1px solid yellow;
 */
}

section#connectors div#connectors-list li h5 {
	font-size: 1.4em;
	font-weight: 500;
	text-align: left;
}

section#connectors div#connectors-list li p {
	font-size: 1em;
	font-weight: 300;
	padding: 0;
	text-align: left;
}

section#connectors div#connectors-list li p.author {
	font-size: 1em;
	color: rgba(255,255,255, 0.5);
	margin-bottom: 15px;
}

section#connectors div#connectors-list li p.author::before {
	content: "by ";
}

section#connectors div#connectors-list li img {
	width: 60px;
	height: 60px;
	border-radius: 4px;
	margin-bottom: 5px;
}

section#connectors div#connectors-list li div.download a {
	display: block;
	padding: 6px 40px 6px 40px;
	font-weight: 300;
	border: 1px solid #83ffdd;
	border-radius: 4px;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
}


section#connectors div#weave-your-own {
	background: url('../images/weaveyourown-background.jpg') center top no-repeat;
	background-size: cover;
	max-width: 100%;
	margin: 0px;
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}

section#connectors div#weave-your-own div {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-top: 80px;
	padding-bottom: 40px;
	padding-left: 20px;
	padding-right: 20px;

}

section#connectors div#weave-your-own div:last-of-type {
	background-color: #000c18;
	max-width: 100%;
	padding-top: 10px;
	padding-bottom: 0px;
}

section#connectors div#weave-your-own h3 {
	margin-top: 0px;
}

section#connectors div#weave-your-own img {
	width: 100%;
	max-width: 800px;
	margin-top: 20px;
	margin-bottom: 40px;
}


section#connectors a.loom-download {
	display: block;
	text-align: center;
	max-width: 240px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 180px;
	margin-top: 40px;
	background: url('../images/loom-icon.png') center top no-repeat;
	background-size: 180px 180px;
	font-size: 1.1em;
}





/*---------------------------------------------*/
/*              sponsors                       */
/*---------------------------------------------*/

section#sponsors {
	text-align: left;
	padding-bottom: 80px;
	padding-left: 0px;
	padding-right: 0px;
}

section#sponsors > * {
	padding-left: 20px;
	padding-right: 20px;
}

section#sponsors div p {
	padding: 0;
	margin: 20px 0;
}

section#sponsors div h3 {
	padding-top: 40px;
	font-size: 1.8em;
}

section#sponsors div#rotation div.ad {
	position: relative;
	
	margin: 20px auto;
	max-width: 400px;
			
	border-radius: 5px;
	text-align: left;
}

section#sponsors div#rotation div.ad span, em {
	color: unset;
}

section#sponsors div#rotation div.ad div.unit {
	margin: 20px auto;
	padding: 20px 20px;

	display: flex;
	justify-content: start;
	align-items: start;
}

section#sponsors div#rotation div.ad div.unit p {
	text-align: left;
	font-size: 18px;
	font-weight: 400;
	line-height: 20px;
	padding: 0;
	margin: 0;
		
	flex-grow: 999; /* the images at either end don't grow because their flex-grow is default of 0 */
}

section#sponsors div#rotation div.ad div.unit p.detail {
	white-space: pre-line;
}

section#sponsors div#rotation div.ad div.unit img.icon {
	width: 60px;
	height: 60px;
	min-width: 60px;
	min-height: 60px;
	/* padding-left: 22px; */
	padding-right: 16px;
}
section#sponsors div#rotation div.ad img.chevron {
	width: 12px;
	height: 24px;
	min-width: 12px;
	min-height: 24px;
	padding-right: 22px;
	padding-left: 14px;
}

section#sponsors div#rotation div.ad div.chevron {
	width: 12px;
	height: 24px;
	min-width: 12px;
	min-height: 24px;
	padding-right: 22px;
	padding-left: 14px;
	
	-webkit-mask-image: url(../images/chevron.png);
	-webkit-mask-size: 12px 24px;
	-webkit-mask-position: 14px center;
	-webkit-mask-repeat: no-repeat
}

section#sponsors div#rotation div.ad div.unit p strong {
	color: inherit;
	font-weight: 600;
/* 
	font-size: 14px;
 */
}

section#sponsors div#rotation div.ad p span {
	color: inherit;
}


section#sponsors div ul {
	background-color: #22273d;
	padding: 20px;
	margin: 0px;
	border-radius: 12px;
}

section#sponsors ul li {
	margin-top: 10px;
	margin-bottom: 10px;
}


section#sponsors div#how-it-works {
	max-width: 100%;
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}

section#sponsors div#how-it-works > * {
	padding-left: 20px;
	padding-right: 20px;
}

section#sponsors div#how-it-works div#ad-requirements {
	max-width: 100%;
	background-image: linear-gradient(to bottom right, #1469a2 0%, #15143c 40%, #15143c 60%, #552465 100%);
	text-align: center;
	padding: 0px 20px 40px 20px;
	margin-top: 60px;
	margin-bottom: 40px;
}

section#sponsors div#how-it-works div#ad-requirements h3 {
	color: #83ffdd;
}

section#sponsors div#how-it-works div#ad-requirements ol {
	padding-left: 10px;
}

section#sponsors div#how-it-works div#ad-requirements ol li {
	margin-bottom: 20px;
	font-size: 1.2em;
}

section#sponsors div#how-it-works div#ad-requirements div, section#sponsors div#how-it-works div:last-of-type {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

section#sponsors div#how-it-works div#ad-requirements div img {
	float: right;
	width: 340px;
	height: auto;
	margin-left: 20px;
	margin-top: 60px;
}

section#sponsors div#sponsor-pay div.buttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}


section#sponsors div#things-can-happen {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	
	background-color: #22273d;
	padding: 20px;
	margin: 0px;
	border-radius: 12px;
}

section#sponsors div#things-can-happen ul {
	background: none;
	padding: 0px;
	max-width: 340px;
	flex-grow: 1;
}

section#sponsors div#things-can-happen video {
	width: 100%;
	max-width: 400px;
	height: auto;
	margin-top: 16px;
	flex-grow: 1;
	border-radius: 8px;
}


section#sponsors div#sponsor-pricing a.button {
	margin-bottom: 0px;
}


section#sponsors div#sponsor-list p {
	text-align: center;
}







/*---------------------------------------------*/
/*               quotes                        */
/*---------------------------------------------*/

section#quotes {
	background: #3c126a url('../images/quotes-background-2.jpg') center top no-repeat;
	background-size: 1400px auto;
	
	background-size: 1400px auto, 100% 100%;
	background-image: url('../images/quotes-background-2.jpg'), linear-gradient(#21165a 0px, #2d1661 420px, #3c126a 100%);


	padding: 80px 0px 20px 0px;
	text-align: center;
	border-bottom: 16px solid #2b0b50;
}

section#quotes ul {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	padding: 100px 0px 0px 0px;
}

section#quotes ul li {
	margin: 0px 20px 80px 20px;
}

section#quotes ul li p {
	font-size: 1.8em;
}

section#quotes ul li p.attribution {
	font-size: 1.3em;
}


section#quotes ul li.blog-article {
	background: url('../images/dropshadow.png') center bottom no-repeat;
	background-size: 780px auto;
	padding-bottom: 18px;
}

section#quotes ul li.blog-article p {
	background-image: linear-gradient(to right, rgba(0,255,240,0) 0%, rgba(0,255,240,0.24) 50%, rgba(0,255,240,0) 100%);
}

section#quotes ul li.blog-article p:first-of-type {
	padding-top: 40px;
}

section#quotes ul li.blog-article p.attribution {
	padding-bottom: 40px;
}


section#quotes ul li.appstore-review p.quote-title {
	font-size: 1.8em;
}

section#quotes ul li.appstore-review p {
	font-size: 1.3em;
}

section#quotes ul li.appstore-review p.attribution {
	font-size: 1.3em;
	color: #aaaaff;
}




section#quotes img.stars {
	width: 160px;
	height: auto;
	margin-bottom: 16px;
}






/*---------------------------------------------*/
/*              history                        */
/*---------------------------------------------*/

/* ----- on index page ----- */

section#history {
	max-width: 800px;
	padding: 0;
	margin: 40px auto;
}

section#history h2 {
	color: #86fcd4;
	font-size: 2.2em;
	margin: 0 20px;
	padding: 40px 0px 20px 0px;
}

section#history div.blurb {
	margin: 0px auto 0px auto;
	padding: 30px 20px 0px 20px;
	max-width: 660px;
}

section#history div.blurb p {
	text-align: left;
}

section#history > p {
	margin-top: 60px;
	margin-bottom: 80px;
}

section#history a.button {
	max-width: 500px;
	margin: 80px auto;
	color: #fff;
	display: block;
	background-color: #333;
	padding: 18px;
	border-radius: 12px;
	font-size: 1.2em;
	font-weight: 500;
}

/* ----- on history page ----- */



section#full-history {
	padding-bottom: 80px;
}

section#full-history ul {
	margin: 20px 20px 20px 0px;
	padding-inline-start: 0px;
}


section#full-history h3 {
	color: #fff;
	margin: 20px 0 0 0;
	font-size: 1.4em;
	
	background: right center no-repeat;
	background-image: url('../images/history-hide@2x.png');
	background-size: 14px 14px;
	display: inline-block;
	padding-right: 20px;
	cursor: pointer;
}

section#full-history h4 {
	font-size: 1.2em;
	color: #c755ff;
}

section#full-history strong {
	font-weight: 500;
}

section#full-history div.release {
	text-align: left;

	margin: 40px auto 20px auto;
}
section#full-history div.release:first-of-type {
	margin-top: 20px;
}
section#full-history div.summary {
	display: none;
}

section#full-history p.date {
	font-size: 0.75em;
	color: #999;
	
	margin-top: 5px;
	margin-bottom: 20px;
	padding: 0px;
}


/*---------------------------------------------*/
/*                legal                        */
/*---------------------------------------------*/

section#legal {
	margin: 0px auto;
	padding-bottom: 80px;
	text-align: left;
}

/*
section#legal h2 {
	color: #86fcd4;
	font-size: 1.6em;
	font-weight: 500;
	margin: 20px auto;
	max-width: 800px;
	text-align: left;
}
*/

section#legal h3 {
	color: #c755ff;
	font-size: 1.4em;
	margin: 20px auto;
}

section#legal ul {
	margin: 20px auto;
	padding-inline-start: 20px;
}

section#legal p {

}





/*---------------------------------------------*/
/*                   footer                    */
/*---------------------------------------------*/



footer {
	background-image: linear-gradient(#1b253c,#2e2852);
	margin-top: 0px;
	padding-top: 80px;
	padding-bottom: 80px;
}

footer p {
	color: #fff;
	font-size: 1.0em;
	margin: 0px 0px 20px 0px;
}


footer p:last-child {
	padding-bottom: 100px;
	background: url('../images/iconfactory-logo.png') center bottom no-repeat;
	background-size: 48px; 48px;
}






/*---------------------------------------------*/
/*          media max-width: 900               */
/*---------------------------------------------*/


@media screen and (max-width: 900px) {


	section#main-features ul li#feature-privacy div {
		max-width: calc ( 100% - 40px );
		position: relative;
		left: 0px;
		padding-left: 20px;
		padding-right: 20px;
		background-position: calc( 100% + 120px ) bottom;
	}

	section#main-features ul li#feature-privacy h3 {
		max-width: 500px;
	}

	section#main-features ul li#feature-privacy p {
		padding-bottom: 40px;
		max-width: 400px;
	}



}









/*---------------------------------------------*/
/*          media max-width: 760               */
/*---------------------------------------------*/


@media screen and (max-width: 760px) {



	section#main-features ul li#feature-privacy div {
		background-position: -80px bottom;
		padding-bottom: 360px;
	}
	
	section#main-features ul li#feature-privacy div h3, section#main-features ul li#feature-privacy div p {
		max-width: 100%;
	}








	section#main-features ul li#feature-webyourway img {
		margin: 0px;
		padding: 0px;
	}
	
	section#main-features ul li#feature-webyourway div {
		text-align: center;	
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 40px;
	}

	section#main-features ul li#feature-webyourway img#webyourway-phone {
		float: none;
		width: 100%;
		height: auto;
		padding: 0px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		background: none;
	}

	section#main-features ul li#feature-webyourway img#webyourway-icons {
		width: 90%;
	}

	section#main-features ul li#feature-webyourway h3 {
		padding-top: 20px;
		padding-bottom: 16px;
	}

	section#main-features ul li#feature-webyourway p {
		padding-bottom: 40px;
		padding-right: 0px;
		text-align: left;
	}





	section#main-features ul li#feature-spoilers {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	section#main-features ul li#feature-spoilers div {
		text-align: center;
		padding: 0px 20px 0px 20px;
	}


	section#main-features ul li#feature-spoilers img {
		margin: 0px;
		padding: 0px;
	}

	section#main-features ul li#feature-spoilers img#spoilers-1 {
		float: none;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}

	section#main-features ul li#feature-spoilers img#spoilers-pills {
		max-width: 70%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;

	}

	section#main-features ul li#feature-spoilers h3 {
		padding-top: 20px;
		padding-bottom: 16px;
	}

	section#main-features ul li#feature-spoilers p {
		padding-bottom: 40px;
		padding-right: 0px;
		text-align: left;
	}







	section#sponsors div#things-can-happen ul {
		max-width: 100%;
	}






	section.secondary {
		background: url('../images/tout-compact-narrow.jpg') center top no-repeat;
		background-size: 220% auto;
		/* padding-top: 280px; */
		padding-top: 46%;
	}

}


/*---------------------------------------------*/
/*          media max-width: 640               */
/*---------------------------------------------*/


@media screen and (max-width: 640px) {

	html {

	}
	
	h1 {
		max-width: 95%;
		background-size: 100% auto;
	}

	section#navbar {
		padding-top: 120px;
	}

	section#navbar ul {
		gap: 20px;
	}

	section#navbar ul li {
		font-size: 1.0em !important;
	}
		
		
		
		
	section#main-features ul li#feature-privacy div {
		background-size: 500px auto;
		background-position: -90px bottom;
		padding-bottom: 300px;
	}
		
		
	section#main-features ul li#feature-spoilers img#spoilers-pills {
		max-width: 100%;
	}
		
	section.secondary {
		background: url('../images/tout-compact-narrow.jpg') center top no-repeat;
		background-size: 230% auto;
		background-position: 48% top;
		/*padding-top: 240px;*/
		padding-top: 50%;
	}

	section#secondary-features ul {
		flex-direction: column;
		align-items: center;
	}
	
	
	
	section#secondary-features ul li {
		padding: 10px 0px 10px 0px;
		font-size: 1.2em;
		width: 90%;
		max-width: 400px;
	}


	
	

	section#connector-info div.content {
		flex-direction: column;
	}



	section#connectors img#main-connector-icon {
		max-width: 60%;
		height: 60%;
		margin-top: -40px;
	}

	section#sponsors div#how-it-works div#ad-requirements div {
		text-align: center;
	}
	
	section#sponsors div#how-it-works div#ad-requirements div p, section#sponsors div#how-it-works div#ad-requirements div ol {
		text-align: left;
	}



	section#sponsors div#how-it-works div#ad-requirements div img {
		float: none;
		width: 100%;
		max-width: 380px;
		height: auto;
		padding: 0px;
		margin: 40px auto 0px 0px;	
	}



}