@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');
/* link */

/* AlphaCTA */
.alpha-cta-container {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	margin: 4em auto;
	color: white;
	max-width: 1000px;
	padding: 0 10px;
}
.alpha-cta {
	grid-column: 2 / span 3;
	grid-row: 1 / span 1;
	padding: 1em;
	background: linear-gradient( 120deg, 
		rgb(77,104,183), 
		rgb(72,107,177));
}
.alpha-cta h3 {
	font-family: var( --title-font );
	font-size: 1.5rem;
	color: rgb(255,242,198);
	margin: 0 0 0.1em 0;
}
.alpha-cta p {
	margin: 0;
}
.alpha-cta-arrow {
	grid-column: 5 / span 1;
	grid-row: 1 / span 1;
	position: relative;
}
.alpha-cta-arrow:after {
	content: url( "images/arrow-loop-d8995c.svg" );
	position: absolute;
	bottom: 0;
	left: -5px;
}
a.alpha-cta-btn {
	grid-column: 4 / span 2;
	grid-row: 2 / span 1;
	text-align: center;
	font-size: 1.5rem;
	padding: 8px 0;
	background-color: rgb(202,159,20);
	background: linear-gradient( to bottom,
		rgb(243,199,56),
		rgb(211,161,68) );
	text-shadow: 1px 1px 2px rgba(24,47,102,0.46);
	color: white;
	font-family: var( --title-font );
	text-decoration: none;
}
a.alpha-cta-btn:hover {
	background: rgb(249,208,40);
}

.alpha-cta-container .cross-1,
 .alpha-cta-container .cross-2 {
  position: relative;
  grid-row: 1 / span 1;
  grid-column: 6 / span 1;
}
.alpha-cta-container .cross-2 {
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}
.alpha-cta-container .cross-1:before,
 .alpha-cta-container .cross-2:before {
  position: absolute;
  top: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  content: url( "images/cross-d32d3e.svg" );
  opacity: 0.5;
}

@media ( max-width: 850px ) {
	.alpha-cta {
		grid-column: 1 / span 4;
	}
	.alpha-cta-container .cross-1 {
		_grid-column: 6 / span 1;
	}
	.alpha-cta-container .cross-2 {
		grid-column: 1 / span 1;
	}
}
@media ( max-width: 700px ) {
	.alpha-cta {
		grid-column: 2 / span 4;
	}
		.alpha-cta-arrow {
		grid-column: -2 / span 1;
	}
	a.alpha-cta-btn {
		grid-column: 5 / -1;
	}
	.alpha-cta-container .cross-1 {
		grid-column: -1 / span 1;
	}
	.alpha-cta-container .cross-2 {
		grid-column: 2 / span 1;
	}
}
@media ( max-width: 650px ) {
	.alpha-cta {
		grid-column: 1 / span 5;
	}
	.alpha-cta-arrow {
		grid-column: 6 / span 1;
	}
	a.alpha-cta-btn {
		grid-column: 4 / span 3;
	}
	.alpha-cta-container .cross-2 {
		grid-column: 1 / span 1;
	}
}
/* CTASection */
.cta-section {
	width: 100%;
	margin-left: 0;
	margin-top: 1.5em;
	margin-bottom: 100px;
}
.cta-section .inner {
	max-width: 1000px;
	margin: 0 auto;
  display: grid;
	grid-gap: 1px;
  grid-template-columns: repeat( 6, 1fr );
	grid-auto-rows: 1fr;
}
.cta-section .email {
	grid-column: 2 / span 2;
}
.cta-section .twitter {
	grid-column: 4 / span 1;
}
.cta-section .ph {
	grid-column: 5 / span 1;
}

@media ( max-width: 920px ) {
	.cta-section .email {
		grid-column: 1 / span 2;
	}
	.cta-section .twitter {
		grid-column: 3 / span 2;
	}
	.cta-section .ph {
		grid-column: 5 / span 2;
	}
}
@media ( max-width: 800px ) {
	.cta-section .email {
		grid-column: 2 / span 4;
	}
	.cta-section .twitter {
		grid-column: 2 / span 2;
	}
	.cta-section .ph {
		grid-column: 4 / span 2;
	}
}
@media ( max-width: 500px ) {
	.cta-section .email {
		grid-column: 1 / -1;
	}
	.cta-section .twitter {
		grid-column: 1 / span 3;
	}
	.cta-section .ph {
		grid-column: 4 / span 3;
	}
}
/* ExampleSite */
.example-site {
	width: 100%;
	height: 100%;
	object-fit: cover;
	_opacity: 0.8;
	grid-row: 1 / 2;
}
/* GridPara */
.grid-para {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	margin: 0em 0 0em;
}
.grid-para P {
	grid-column: 1 / 5;
	margin: 0.5em 0;
	padding-right: 0.5em;
	_background-color: rgb(219,172,172);
}

.grid-para .cross-1,
 .grid-para .cross-2 {
	position: relative;
	grid-row: 1 / span 1;
	grid-column: 5 / span 1;
}
.grid-para .cross-2 {
	grid-row: 2 / span 1;
}
.grid-para .cross-1:before,
 .grid-para .cross-2:before {
	position: absolute;
	top: -25px;
	left: -25px;
	width: 50px;
	height: 50px;
	content: url( "images/cross-d32d3e.svg" );
	opacity: 0.5;
}

@media (max-width: 700px) {
	.grid-para P {
		grid-column: 1 / 6;
	}
	.grid-para .cross-1,
	 .grid-para .cross-2 {
		grid-column: 6 / span 1;
	}
}
/* MailchimpForm */
.mailchimp {
  width: 100%;
	height: 100%;
  box-sizing: border-box;
  padding: 8px;
  background-color: #dddddd;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.mailchimp LABEL {
	display: block;
}
.mailchimp input.email {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 7px;
  margin: 0.5em 0;
}
.mailchimp input.button {
	align-self: flex-end;
	color: #ffffff;
	font-size: 14px;
	background: #041436;
	padding: 7px;
	text-decoration: none;
	border: none;
}
.mailchimp input.button:hover {
	background: #1543a5;
}
/* Para */
P {
  font-size: 1.2rem;
  line-height: 1.3em;
}
/* PitchGrid */
.pitch-grid {
  max-width: 1000px;
  margin: 0 auto;
  min-height: 80vh;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat( 6, 1fr );
  grid-template-rows: 1fr 1fr [top] auto [text] auto [text2] auto [text3] 1fr 1fr;
}
.pitch-grid .top-line {
  font-family: var(--title-font);
	font-size: 2rem;
  grid-column: 1 / span 3;
  grid-row: top / span 1;
  margin: 0em;
	margin-bottom: 0.3em;
  padding: 0;
  white-space: nowrap;
}
.pitch-grid .text-1,
.pitch-grid .text-2 {
  grid-column: 1 / span 4;
  margin: 0.5em 0;
	padding-right: 0.2em;
  font-size: 1.5rem;
}
.pitch-grid .text-1 {
  grid-row: text / span 1;
}
.pitch-grid .text-2 {
  grid-row: text2 / span 1;
}
.pitch-grid .deco-1 {
  grid-column: 5 / span 1;
  grid-row: 2 / top;
  background-color: rgba(189,255,0,0.16);
 background: linear-gradient( 120deg, rgba(221,167,45,0.26), rgba(144,78,149,0.07));
}
.pitch-grid .deco-2,
 .pitch-grid .deco-3 {
  grid-column:  4 / span 1;
  grid-row: 1 / 2;
  background-color: rgba(74,82,133,0.16);
  background: linear-gradient( 120deg, rgba(87,134,215,0.34), rgba(233,101,69,0.02));
}
.pitch-grid .deco-3 {
  grid-row: -1 / -2;
  grid-column: 5 / -1;
}
.pitch-grid .cross-1,
 .pitch-grid .cross-2 {
  position: relative;
  grid-row: text / span 1;
  grid-column: 5 / span 1;
}
.pitch-grid .cross-2 {
  grid-row: text3 / span 1;
}
.pitch-grid .cross-1:before,
 .pitch-grid .cross-2:before {
  position: absolute;
  top: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  content: url( "images/cross-d32d3e.svg" );
  opacity: 0.5;
}
@media (max-width: 900px ) {
	.pitch-grid .top-line {
		grid-column: 1 / span 4;
	}
	.pitch-grid .text-1,
	.pitch-grid .text-2 {
		grid-column: 1 / span 5;
	}
	.pitch-grid .cross-1,
	 .pitch-grid .cross-2 {
		grid-column: 6 / span 1;
	}
}
@media (max-width: 400px ) {
	.pitch-grid .top-line {
		grid-column: 1 / -1;
		font-size: 1.6rem;
	}
	.pitch-grid .text-1,
	.pitch-grid .text-2 {
		font-size: 1.2rem;
		grid-column: 1 / -1;
	}
	.pitch-grid .cross-1,
	 .pitch-grid .cross-2 {
		grid-column: -1 / span 1;
	}
}
/* Point */
li.point-item {
	list-style: none;
	position: relative;
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	margin-left: 0;
}
li.point-item:before {
	content: '+';
	font-family: var(--title-font);
	font-size: 4.3rem;
	font-weight: bold;
	color: rgb(211,159,65);
	grid-column: 1 / 2;
	grid-row: 1 / span 2;
	text-align: right;
	margin: -0.34em 0.3em 0 0;
}
.point-item h3 {
	font-size: 1.5em;
	font-family: var(--title-font);
	font-weight: normal;
	margin: 0;
	grid-column: 2 / -2;
}
.point-item h3 > span {
	display: inline-block;
	padding: 4px 8px;
	background-color: rgb(77,117,198);
	color: white;
}
.point-item .content {
	margin-bottom: 1em;
	grid-column: 2 / -2;
}

@media (max-width: 850px ) {
	.point-item .content,
	 .point-item h3{
		grid-column: 2 / -1;
	}
}
/* PointsContainer */
ul.points-container {
	padding: 0;
	margin: 2em 0 0 0;
}
/* SectionHead */
.section-head {
	font-size: 2rem;
	font-family: var( --title-font );
	margin: 1em 0 0.5em 0;
}
/* TopLineSegment */

/* UsesList */
ul.uses-list {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	padding: 0;
}
/* UsesListItem */
.new-list-item {
	font-size: 1.2rem;
	line-height: 1.5em;
	grid-column: 2 / -2;
	padding: 0;
	margin: 0.5em 0;
}
@media (max-width: 850px ) {
	.new-list-item {
		grid-column: 2 / -1;
	}
}
/* code */
.code {
	font-family: monospace;
	background-color: #eee;
}
/* hi */
span.highlight {
  background-color: #fffaaa;
}
/* adhoc partial */
BODY {
	margin: 0;
	--title-font: 'Istok Web', sans-serif;
	--title-color: rgb(0,79,100);
	--title-highlight-color: rgb(217,209,112);
	font-family: 'Quattrocento', serif;
}
.index-mar-18 .site-examples {
	margin-top: -8vh;
	padding: 7vw 0;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.index-mar-18 .site-examples .blurb {
	max-width: 1000px;
	padding: 0 8px;
	margin: 0 auto;
	transform: rotateZ( -7deg );
	font-size: 1.5rem;
}
.index-mar-18 .site-examples:after {
	position: absolute;
	content: ' ';
	left: -10%;
	top: 0;
	width: 120%;
	height: 100%;
	background: linear-gradient(180deg, 
		rgba(255,255,255,0) 0%, 
		rgba(255,255,255,0.3) 15%, 
		rgba(255,255,255,0.3) 25%, 
		rgba(255,255,255,0) 40%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.3) 65%, 
		rgba(255,255,255,0.3) 75%,
		rgba(255,255,255,0) 90% );
	z-index: 3;
	transform: rotateZ( 3.5deg )
}
.index-mar-18 .site-examples .inner {
	position: relative;
	height: 30vw;  
	padding: 3vw;
	width: 120%;
	left: -10%;
	background-color: rgb(34,34,34);
	transform-origin: 50% 50%;
	transform: rotateZ( -7deg );
	z-index: 2;
	display: grid;
	grid-auto-columns: 25vw;
	grid-gap: 3vw;
}
.cta-wrap {
	width: 100vw;
	overflow: hidden;
}
article {
  max-width: 1000px;
	padding: 0 10px;
  margin: 0 auto;
}
footer {
  text-align: center;
  background: linear-gradient( #dbdbdb, #eee );
  padding: 2em 0 10em;
  font-family: sans-serif;
  color: #828282;
  border-top: 2px solid #cfcfcf;
}
footer A {
  color: rgb(92,107,164);
}

@media ( max-width: 500px ) {
	html {
		font-size: 0.9em;
	}
}
/* Blurb */
.screenshot-blurb H3 {
  font-size: 1.5rem;
  margin: 0 0 0em 0;
  font-family: var( --title-font);
}
.screenshot-blurb P {
  margin: 0;
}
/* adhoc partial */
.app-screenshot {
  max-width: 1000px;
	padding: 0 10px;
  margin: 0px auto 0px auto;
  display: grid;
  grid-template-columns: 1fr [img-l] 1fr [img-lm] 1fr [img-m] 1fr [img-rm] 1fr [img-r] 1fr;
  grid-template-rows: 0 1fr auto auto 1fr 0;
}
.app-screenshot > DIV {
  border-width: 0;
	position: relative;
}
.app-screenshot .content-tree:after,
 .app-screenshot .live-view:after,
 .app-screenshot .side-panel:after{
	position: absolute;
	content: url( "images/callout-arrow-87ca76.svg" );
}
.app-screenshot .top {
  padding-bottom: 1em;
}
.app-screenshot .bot {
	padding-top: 1em;
}
.app-screenshot .content-tree {
  grid-column: 1 / span 1;
  grid-row: 4 / 5;
	border-width: 0 0 1px 1px;
}
.app-screenshot .content-tree:after {
	right: 0px;
	top: -100px;
	transform: rotateZ( 90deg ) rotateX( 180deg );
}
.app-screenshot .live-view {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
}
.app-screenshot .live-view:after {
	bottom: 0px;
	left: -110px;
}
.app-screenshot VIDEO {
	box-sizing: border-box;
	width: 100%;
	grid-column: 2 / -1;
	grid-row: 3 / 5;
	box-shadow: 0 2px 10px rgba(0,0,0,0.24);
}
.app-screenshot .play-video {
	grid-column: 2 / -1;
	grid-row: 3 / 5;
	margin: auto;
	width: 40%;
	position: relative;
	cursor: pointer;
}
.app-screenshot .play-video:hover {
	filter: saturate( 150% );
}
.app-screenshot .partial {
  grid-column:  1 / span 2;
  grid-row: -3 / -1;
  background: linear-gradient( 310deg, rgba(221,167,45,0.26), rgba(144,78,149,0.07));
  display: flex;
}
.app-screenshot .partial:after {
	content: none;
}
.app-screenshot .side-panel {
  grid-column: -4 / span 2;
  grid-row: -3 / -2;
  display: flex;
	text-align: right;
}
.app-screenshot .side-panel:after {
	right: -100px;
	top: 0;
	transform: rotateZ( 180deg );
}

@media ( max-width: 900px ) {
	.app-screenshot {
		margin-top: 4em;
	}
  .app-screenshot .content-tree {
		grid-row: 2 / 3;
		grid-column: 1 / 4;
  }
	.app-screenshot .content-tree:after {
		left: 0;
		transform: rotateZ( -90deg );
		right: auto;
		top: auto;
	}
	.app-screenshot .side-panel {
		grid-column: 3 / span 3;
	}
}

@media ( max-width: 700px ) {
	.app-screenshot {
		margin-top: 0;
		grid-template-rows: 0 1fr auto auto 1fr 1fr;
	}
	.app-screenshot .play-video,
	 .app-screenshot VIDEO {
		grid-column: 1 / -1;
	}
	.app-screenshot .content-tree {
		grid-row: -2 / -1;
		grid-column: 1 / span 4;
	}
	.app-screenshot .content-tree:after {
		content: url( "images/arrow-down-c3a0a1.svg" );
		transform: rotateZ( -180deg ) rotateY(180deg);
		top: -100px;
	}
	.app-screenshot .live-view {
		grid-column: 3 / span 4;
		grid-row: 2 / span 1;
	}
	.app-screenshot .live-view:after {
		content: url( "images/arrow-short-d110a7.svg" );
	}
	.app-screenshot .side-panel {
		grid-column: 2 / -2;
	}
	.app-screenshot .side-panel:after {
		content: url( "images/arrow-short-d110a7.svg" );
	}
}
@media ( max-width: 500px ) {
	.app-screenshot .content-tree:after {
		left: -20px;
	}
	.app-screenshot .side-panel {
		grid-column: 2 / -1;
	}
	.app-screenshot .side-panel:after {
		content: none;
	}
}

/* adhoc partial */
.twitter-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  background-color: /* rgb(137,200,236); */	rgb(228,245,255);
	_background: linear-gradient( 120deg, rgba(87,134,215,0.34), rgba(233,101,69,0.02));
  text-decoration: none;
}
.twitter-container H5 {
  font-size: 1em;
  font-weight: normal;
  font-family: Istok Web, sans-serif;
  margin: 0;
  color: black;
}
.twitter-container IMG {
  width: 46px;
}
.twitter-container SPAN {
  font-family: sans-serif;
  color: rgb(20,116,173);
}
.twitter-container:hover {
  background-color: rgb(197,234,255);
}
/* adhoc partial */
.producthunt-ship {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 8px 0;
  box-sizing: border-box;
  background-color: /*rgb(238,173,121);*/ rgb(255,235,219);
	_background: linear-gradient( 120deg, rgba(221,167,45,0.26), rgba(144,78,149,0.07));
  text-decoration: none;
}
.producthunt-ship H5 {
  font-family: Istok Web, sans-serif;
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  color: black;
}
.producthunt-ship IMG {
  width: 40px;
}
.producthunt-ship span {
  color: rgb(147,68,1);
  font-family: sans-serif;
}
.producthunt-ship:hover {
  background-color: rgb(255,213,180);
}