/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*
     BEGIN primary styles...
*/
@font-face {
     font-family: Muli;
     font-weight: normal;
     font-style: normal;
     src: url("../fonts/Muli-Regular.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
     font-family: Muli;
     font-weight: bold;
     font-style: normal;
     src: url("../fonts/Muli-Bold.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
     font-family: Muli;
     font-weight: bold;
     font-style: italic;
     src: url("../fonts/Muli-BoldItalic.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
     font-family: WorkSans;
     font-weight: bold;
     font-style: normal;
     src: url("../fonts/WorkSans-Black.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
     font-family: WorkSans;
     font-weight: bold;
     font-style: italic;
     src: url("../fonts/WorkSans-BlackItalic.ttf") /* TTF file for CSS3 browsers */
}
body {
     background-color: #fff;
     color: #555;
     font-family: "Muli", sans-serif;
     font-size: 18px;
     text-align: center;
     margin: 0 auto;
     padding: 1vh 0;
     line-height: 150%;
}
.fixed { position: fixed; }
.w100per { width: 100%; }
.w50per { width: 50%; }
.mw50per { max-width: 50%; }
.w30per { width: 30%; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
.big { font-size: 1.2em; }
.bg-fff { background-color: #fff; }
.bg-gray { background-color: #999; }
.bg-gray-grad { background: linear-gradient( to bottom, #999 60px, #fff 180px ); }
.fff, .white { color: #fff; }
.black { color: #000; }
.red { color: #700; }
.red:hover { color: #300; }
.small, small { font-size: 0.8em; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.align-top { vertical-align: top; }
.align-bottom { vertical-align: bottom; }
em, i, .italic { font-style: italic; }
b, .bold { font-weight: bold; }
.pointer { cursor: pointer; }
.float-left { float: left; margin: 0.5em 1.1em 1.4em 0.5em; }
.float-right { float: right; margin: 0.5em 0.5em 1.4em 1.1em; }
.clear { clear: both; }
.clear-right { clear: right; }
.clear-left { clear: left; }
sup {
     display: inline-block;
     font-size: 0.6em;
     margin-top: -6px;
     vertical-align: top;
}

header {
     display: inline-block;
     position: relative;
     text-align: right;
     vertical-align: middle;
     width: calc(80% - 56px);
     max-width: 1360px;
}
header img {
     margin: 0;
     padding: 0;
     height: 180px;
}
nav.top {
     display: block;
     position: fixed;
     left: max(calc(var(--scroll) * -70vw + 10%), 2%);
     z-index: 1888;
     margin: 0 auto;
     padding: 1em 1em 0 1em;
     max-width: 46px;
     background-color: #fff;
     border: 0 solid #999;
     transition: border 0.5s;
     /*border-radius: 6px;*/
}
nav.top:hover {
     max-width: 280px;
     border: 3px solid #999;
     transition: border 0.5s;
}
nav div.cover {
     position: relative;
     top: -20px;
     width: 46px;
     height: 120px;
     cursor: pointer;
     z-index: 1889;
     background-image: repeating-linear-gradient(#700 0, #700 6px, #700 6px, transparent 6px, transparent 16px);
     transition: width 0.1s 0.1s, height 0.1s 0.1s;
}
nav:hover div.cover {
     margin-top: 0;
     width: 0;
     height: 0;
     background-image: none;
     transition: width 0.1s 0.1s, height 0.1s 0.1s;
}
nav div.cover + div {
     text-align: center;
     font-size: 0.9em;
     color: #700;
     cursor: default;
     margin-top: -20px;
}
nav:hover div.cover + div {
     margin-top: 0;
}
nav.top ul {
     display: inline-block;
     margin: 0 auto;
}
nav.top ul li {
     display: block;
     border-bottom: 0 solid #700;
     height: 0;
     max-height: 0;
     width: 100%;
     overflow: hidden;
     margin: 0;
     padding: 0;
     font-size: 0;
     text-align: left;
     transition: font-size 0.5s, max-height 0.5s;
     
}
nav.top:hover ul li {
     border-bottom: 1px solid #700;
     height: auto;
     max-height: 95px;
     margin: 2% 0;
     padding: 2% 0;
     font-size: 1em;
     transition: font-size 0.5s, max-height 0.5s, border-bottom 0.3s
}
nav.top ul li a {
     display: inline-block;
     width: 100%;
     text-decoration: none;
     border-bottom: 0;
     color: #700;
     padding: 0;
}
nav.top ul li a:hover {
     color: #999;
}
/*
nav.top ul li:last-of-type {
     display: block;
     border-bottom: 0;
     height: auto;
     font-size: 14px;
     padding: 0;
     text-align: center;
}
nav.top ul li:last-of-type b {
     color: #700;
}
nav.top ul li:last-of-type a:hover {
     cursor: default;
     color: #700;
}
*/

nav.bottom ul {
     margin: 0.5em 0;
     padding: 0;
     display: block;
     text-align: center;
}
nav.bottom ul li {
     margin: 0;
     padding: 0;
     display: inline-block;
     border-right: 1px solid #fff;
     list-style-type: none;
}
nav.bottom ul li:last-of-type {
     border-right: 0;
}
nav.bottom ul li a,
nav.bottom ul li a:hover {
     padding: 0.3em 0.5em;
     color: #fff;
     transition: color 0.25s;
     border: 0;
}
nav.bottom ul li a:hover {
     background-color: transparent;
     color: #900;
     transition: color 0.25s;
}
nav.bottom {
     border: 0;
     margin: 3em 0;
}
nav.bottom ul li a {
     color: #700;
}
nav.bottom ul li a:hover {
     color: #777;
}
nav.bottom ul li {
     border-right: 1px solid #999;
     list-style-type: none;
}
nav.bottom ul li:last-of-type {
     border-right: 0;
}

hr {
     display: block;
     position: relative;
     margin: 0.8em 0 0 0;
     padding: 0;
     height: 46px;
     background-color:  #999;
     border: 0;
     z-index: 211;
}
h1 {
     font-size: 2.2em;
     color: #999;
     margin: 1em 0 2em;
     line-height: 140%;
}
h2 {
     font-size: 2em;
     margin: 1em 0;
     color: #fff;
     line-height: 130%;
     text-align: center;
     clear: both;
}
h3 {
     font-size: 1.5em;
     margin: 0.75em 0;
     color: #222;
     line-height: 130%;
     text-align: center;
     clear: both;
}
h4 {
     font-size: 1.1em;
     font-weight: 700;
     color: #700;
     margin: 0.2em 0 1em 0;
     line-height: 130%;
}
h5 {
     font-size: 1.6em;
     font-weight: 700;
     color: #700;
     margin: 0.2em 0 0.5em 0;
     text-align: center;
     clear: both;
}
p {
     margin: 1em 0;
}
a {
     color: #700;
     padding: 0 0.2em;
     text-decoration: none;
     border-bottom: 1px solid #900;
     background-color: transparent;
     transition: color 0.4s;
}
a:hover {
     color: #300;
     transition: color 0.9s;
}
header a, header a:hover {
     border: 0;
     background-color: transparent;
}

form {
     margin: 0 0 1em 0;
     padding: 0;
     text-align: center;
}
input , 
button , 
label.button ,
textarea ,
.StripeElement {
     margin: 0.3em 0;
     padding: 0.2em;
     border: 1px solid #ccc;
     background-color: #f8f8f8;
     border-radius: 2px;
     color: #333;
     font-family: "Muli", sans-serif;
     font-size: 18px;
}

/* BEGIN Stripe form field */
.StripeElement {
  height: 20px;
  padding: 0.5em 0.2em 0.1em 0.2em;
}
.StripeElement--focus {
  /*box-shadow: 0 1px 3px 0 #cfd7df;*/
}
.StripeElement--invalid {
  border-color: #700;
}
.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
/* END Stripe form field */

input[name='choose']{
     display: none;
}
input[type='text'] , 
input[type='password'] {
     width: 220px;
}
.sign-up input[type='text'], 
.sign-up input[type='password'],
.sign-up textarea,
.contact-info input[type='text'],
.contact-info textarea {
     width: calc(100% - 0.4em);
}
.contact-info textarea {
     height: 200px;
}

input[type='submit'] , 
button ,
label.button {
     display: inline-block;
     margin: 0.5em;
     padding: 0.3em 0.5em;
     background-color: #f8f8f8;
     border-color: #700;
     color: #700;
     cursor: pointer;
     transition: color 0.2s;
}
input[type='submit']:hover , 
button:hover ,
label.button:hover {
     color: #777;
     transition: color 0.2s;
}
div.sign-in,
div.sign-up,
p.sign-up {
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     transition: max-height 1s, opacity 1s;
}
input#sign-in:checked ~ div.sign-in, 
input#sign-in-demo:checked ~ div.sign-in,
input#sign-up:checked ~ p.sign-up, 
input#sign-up:checked ~ div.sign-up,
.contact-info {
     overflow: visible;
     max-height: 500px;
     opacity: 1;
     transition: max-height 1s, opacity 1s;
}
input#sign-in:checked ~ div.sign-in,
input#sign-in-demo:checked ~ div.sign-in {
     margin: 2em 0 0 0;
}
div.sign-up,
.contact-info  {
     display: inline-block;
     text-align: left;
     vertical-align: top;
     padding: 0;
     margin: 0;
     /*border-right: 1px solid #777;*/
}
div.sign-up:last-of-type {
     /*border-right: 0;*/
}
div.sign-up label,
.contact-info label {
     text-align: left;
     display: inline-block;
     width: 290px;
     margin: 0.2em 0;
}
input#sign-up:checked ~ div.sign-up,
.contact-info  {
     display: inline-block;
     padding: 0 1em;
     margin: auto;
     margin-bottom: 2em;
}

label em.alert {
     font-size: 0.7em;
     color: #700;
}
label em.alert + input {
     border: 1px solid #700;
}

.paper {
     margin: 0 auto 2em auto;
     padding: 3%;
     width: 80%;
     max-width: 1200px;
     text-align: left;
}

#popdiv {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1999;
     text-align: center;
     height: 0;
     width: 100%;
     overflow: hidden;
     background-color: rgba(0, 0, 0, 0);
     opacity: 0;
     transition: opacity 0.5s;
}
#popdiv.show {
     height: 92%;
     padding: 4% 0;
     background-color: rgba(0, 0, 0, 0.8);
     opacity: 1;
     transition: opacity 0.5s;
}
#popdiv iframe {
     margin: 0 auto;
     height: 92%;
     width: 92%;
     overflow: scroll;
}
.content {
     padding: 1em 0;
}

div.container {
     width: 79.6%;
     margin: 0 auto;
     line-height: 0;
}
label#hdr-action {
     display: inline-block;
     margin: 4vw 0;
     padding: 1em;
     font-size: 1.2em;
     border: 2px solid #999;
     color: #700;
     cursor: pointer;
     background-color: rgba(255,255,255,1);
     transition: background-color 0.4s, border 0.4s ;
}
label#hdr-action:hover {
     background-color: rgba(222,222,222,1);
     border: 2px solid #900;
     transition: background-color 0.4s, border 0.4s ;
}
section {
     position: relative;
     display: inline-block;
     width: calc(100% / 3 * 2);
     line-height: 0;
     /*height: calc(80vw / 3 * 2 / 3 * 2);*/
     text-align: left;
}
section div {
     margin-top: 0.05vw;
}
section h1 {
     font-family: WorkSans;
     font-size: 3.7vw;
     font-weight: bold;
     color: #000;
     margin: 0.1em 0 0 0;
     line-height: 90%;
}
section h1.small {
     font-size: 2.5vw;
     margin: 0.2em 0 0 0;
     line-height: 1.1em;
}
section:first-of-type h1 {
     font-family: Muli;
     font-size: 1.8em;
     font-weight: bold;
     color: #999;
     margin: 0 0 0 0.1em;
     line-height: 90%;
}
section:first-of-type {
     width: 99.1%;
     margin-top: -20px;
}
section img {
     margin-bottom: calc(80vw / 3 * 2 / 3 * -2);
}
section div {
     height: calc(80vw / 3 * 2 / 3 * 2); /* REVISIT THIS! */
     /*width: calc(80vw / 3.3);*/
     overflow: hidden;
     padding: 0 0.9vw;
     color: #555;
}
section:first-of-type div {
     padding: 2em 0 0 0;
     width: 100%;
}
section div p {
     font-weight: bold;
     font-size: 1.6vw;
     line-height: 2.2vw;
}
section:first-of-type img {
     margin-bottom: calc(80.4vw / -2);
}
section:first-of-type {
     height: calc(80vw / 2);
     z-index: 77;
}

/* row by row */
section img:first-of-type {
     width: 100%;
}
section:nth-of-type(2n+3) {
     margin-left: calc(80vw / -2.9);
     z-index: 44;
     opacity: 0.5;
     transition: opacity 1s;
     text-align: right;
}
section:nth-of-type(2n+3) .top-fill {
     height: calc(80vw / 3 * 2 / 3.2); /* REVISIT THIS! */
}
section:nth-of-type(1n+4) {
     z-index: 44;
     opacity: 0.5;
     transition: opacity 0.5s;
}
section:nth-of-type(2n+3) div {
     margin-left: calc(80vw / 3);
}
section:nth-of-type(4n-2),
section:nth-of-type(4n+1) {
     z-index: 77;
     opacity: 1;
}
section:nth-of-type(even) div {
     margin-right: calc(80vw / 3);
}

section:nth-of-type(1n+3) {
     margin-top: -10px;
}
/*section:nth-of-type(5n+5),
section:nth-of-type(6) {
     text-align: center;
}*/

section:hover {
     z-index: 99;
     opacity: 1;
     transition: opacity 0.5s;
}
section + section:hover img {
     box-shadow: 0 0 16px #000, 0 0 80px #fff;
     /*border: 0 solid rgba(153,153,153,0.5);
     border-radius: 1.4%;*/
     transition: box-shadow 0.5s;
}
section button {
     position: absolute;
     display: inline-block;
     right: 0;
     top: 70%;
     width: 38%;
     margin-right: 6%;
     font-family: Muli;
     font-weight: normal;
     color: #700;
     background-color: #fff;
     font-size: 1.4vw;
     border-radius: 0;
     box-shadow: 0 0 20px #211;
     border: 0;
     cursor: pointer;
     opacity: 0;
     transition: opacity 1s;
     padding: 0;
}
section button label {
     display: block;
     padding: 4%;
     cursor: pointer;
}
section:nth-of-type(2n+3) button {
     left: 0;
     margin-left: 6%;
}
section:hover button {
     opacity: 1;
     transition: opacity 1s, background-color 0.5s;
}
section button:hover {
     background-color: #eee;
     transition: background-color 0.5s;
}

/*div.explainers input[name="explain"] + div#sign-up:target,*/
div.explainers input[name="explain"]:checked + div {
     display: block;
     position: fixed;
     top: 4vh;
     right: 0;
     z-index: 1899;
     width: 70vw;
     text-align: left;
     background-color: #fff;
     padding: 3vw;
     /* border: 5px solid #999; */
     box-shadow: 0 0 5em #000;
     max-height: 82vh;
     overflow: scroll;
     margin: 0 2vh 2vh 0;
}
/*div.explainers input[name="explain"] + div#sign-up:target b.pointer,*/
div.explainers input[name="explain"]:checked + div b.pointer {
     display: block;
     margin-top: -2vw;
     text-align: right;
}
/*div.explainers input[name="explain"] + div#sign-up:target ~ label,*/
div.explainers input[name="explain"]:checked ~ label {
     display: block;
     position: fixed;
     bottom: 0;
     right: 0;
     /*width: calc(60% + 5em);*/
     width: 100vw;
     height: 100vh;
     z-index: 221;
     background-color: rgba(255,255,255,0.6);
     text-align: left;
}
div.explainers input[name="explain"]:checked + div form div {
     display: block;
}
div.explainers div ,
div.explainers input[name="explain"] ,
div.explainers input[name="explain"][id="close"] ,
div.explainers input[name="explain"][id="close"]:checked + label {
     display: none;
}
div.explainers img {
     max-width: 100%;
}
div.explainers img.float-right ,
div.explainers img.float-left {
     max-width: 50%;
}

.features {
     margin: 1em 0;
     text-align: center;
     background-image: linear-gradient(#999, #eee, #999);
}
.features div.col-one {
     display: inline-block;
     width: 360px;
     vertical-align: top;
}
.features.col2 div.inline-block {
     width: 460px;
     vertical-align: top;
}
.features div.col-one div,
.features.col2 div.inline-block {
     text-align: left;
     padding: 1.6em 4vw 1.6em 4vw;
     margin: 2vw 1vw;
     background-color: #fff;
}
.features  p {
     margin: 0.2em 0 1em 0;
}

ul {
     margin: 0.5em 0 0.5em 10%;
     padding: 0;
     text-align: left;
     background-color: #fff;
     border-radius: 2px;
}
ul li {
     margin: 0 0 0.5em 0;
     padding: 0;
     list-style-type: square;
}

footer {
     margin: 1em;
}
footer p.credit {
     margin-top: 5em;
     font-size: 0.8em;
}
     
@media screen and (min-width: 1360px) {
     div.container {
          width: auto;
     }
     section {
          width: 26vw;
          padding: 0 0.3vw;
          margin: 0px;
          height: 19vw;
     }
     section:nth-of-type(1n+4),
     section:nth-of-type(2n+3),
     section:nth-of-type(4n-2),
     section:nth-of-type(4n+1) {
          z-index: 77;
          opacity: 0.6;
     }
     section:nth-of-type(1n+4):hover,
     section:nth-of-type(2n+3):hover,
     section:nth-of-type(4n-2):hover,
     section:nth-of-type(4n+1):hover {
          opacity: 1;
     }
     section:first-of-type {
          opacity: 1;
     }
     section + section:hover img {
          box-shadow: 0 0 0 #fff;
     }
     section h1 {
          font-size: 1.7vw;
     }
     section h1.small {
          font-size: 1.1vw;
          line-height: 1.0em;
     }
     section:first-of-type {
          width: 80vw;
     }
     section img {
          margin-bottom: calc(26vw / 3 * -2);
     }
     section div {
          height: 90%;
     }
     section:first-of-type div {
          height: 66%;
     }
     section div p {
          font-size: 0.8vw;
          line-height: 1vw;
     }
     section div p span {
          background-color: #eee;
     }
     section:first-of-type img {
          margin-bottom: calc(72vw / -2);
     }
     /* row by row */
     section:nth-of-type(2n+3) {
          margin-left: 0;
     }
     section:nth-of-type(2n+3) .top-fill {
          height: calc(80vw / 9); /* REVISIT THIS! */
     }
     section:nth-of-type(2n+3) div {
          margin-left: 50%;
     }
     section:nth-of-type(even) div {
          margin-right: 50% ;
     }
     
     section button {
          top: 60%;
          color: #700;
          background-color: #fff;
          font-size: 0.9vw;
     }
     section button:hover {
          background-color: #eee;
     }
}

@media screen and (max-width: 920px) {
     div.container {
          width: 96%;
     }
     section {
          position: relative;
          display: block;
          width: 99%;
     }
     section:first-of-type div {
          padding: 0;
     }
     section:nth-of-type(1n+4),
     section:nth-of-type(2n+3),
     section:nth-of-type(4n-2),
     section:nth-of-type(4n+1) {
          z-index: 77;
          opacity: 0.6;
     }
     section:nth-of-type(1n+4):hover,
     section:nth-of-type(2n+3):hover,
     section:nth-of-type(4n-2):hover,
     section:nth-of-type(4n+1):hover {
          opacity: 1;
     }
     section:first-of-type {
          height: calc(80vw / 1.73);
          opacity: 1;
     }
     section + section:hover img {
          box-shadow: 0 0 0 #fff;
     }
     section img {
          margin-bottom: calc(80vw / 3 * 2 / 3 * -3);
     }
     section div {
          height: calc(80vw / 3 * 2 / 3 * 3);
     }
     section:nth-of-type(2n+3) {
          margin-left: 0;
     }
     section:nth-of-type(2n+3) div {
          margin-left: calc(80vw / 2);
     }
     section:nth-of-type(even) div {
          margin-right: calc(80vw / 2);
     }
     section:nth-of-type(n+1) {
          margin-top: 2vw;
     }

     section h1 {
          font-size: 5.4vw;
          margin: 0.4em 0 0 0;
     }
     section h1.small {
          font-size: 4vw;
          margin: 0.6em 0 0 0;
     }
     section div p {
          font-size: 2.6vw;
          line-height: 3vw;
     }
     section button {
          font-size: 2.4vw;
     }
     div.explainers input[name="explain"]:checked + div {
          width: 90vw; /*calc(90vw - 10px);*/
          margin: 0 2vw 2vw 0;
     }
     .paper {
          padding: 2%;
          width: 96%;
     }
}

@media screen and (max-width: 610px) {
     header img {
          height: 20vw;
     }
     section:first-of-type h1 {
          font-size: 4.8vw;
     }
     label#hdr-action {
          font-size: 4vw;
          border: 1px solid #700;
     }
     nav div.cover {
          top: -30px;
          height: 60px;
     }
     nav div.cover + div {
          margin-top: -30px;
     }
}

@media screen and (max-width: 540px) {
     .features div.col-one {
          width: calc(100vw - 2vw);
     }
     .features.col2 div.inline-block {
          width: calc(100vw - 12vw);
     }
     input, button, label.button {
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: 220px;
     }
     section button {
          font-size: 3vw;
     }
     div.sign-up input[type='radio'],
     div.sign-up input[type='checkbox'],
     .contact-info input[type='radio'],
     .contact-info input[type='checkbox'] {
          display: inline;
          width: 24px;
     }
     nav div.cover {
          top: -40px;
          height: 50px;
          background-image: repeating-linear-gradient(#700 0, #700 4px, #700 4px, transparent 4px, transparent 10px);
     }
     nav div.cover + div {
          margin-top: -40px;
     }
}