/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}

/*
 *   Styles
 */
 
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

.-lucee-dump {-webkit-column-break-inside: avoid;}

html {height:100%;}

body {height:100%; background:#fff; color:#333;}

table,
input,
textarea,
select,
button,
body {font-family:'Source Sans Pro', sans-serif; font-size:18px;}

input,
textarea,
select,
button {padding:8px; border:1px solid #d7d7d7; border-radius:3px; background:#fff;}

h2 {font-family:Bitter;}
h3 {font-family:Bitter;}

em {font-style:italic;}

a:link,
a:visited {color:rgba( 0,0,0, .9 ); text-decoration:none;}
a:hover {color:#00a657; text-decoration:underline;}

a.button:link,
a.button:visited,
button {display:inline-block; padding:8px 12px; border-radius:3px; border:0; outline:none; background:rgba( 0,0,0, .5 ); color:#fff; text-decoration:none; line-height:1em; cursor:pointer;}

.flex {display:flex; flex-wrap:wrap; align-items:center;}
.flex .spacer {flex:1;}

.text-left {text-align:left;}
.text-right {text-align:right;}
.text-center {text-align:center;}

.punch-logo {vertical-align:middle;}
.punch-logo svg {width:100%; height:100%;}
.punch-logo svg {color:#fff; fill:rgba( 0,0,0,0 );}
.punch-logo.dark svg {color:#000; fill:#fff;}
.punch-logo.semi-dark svg {color:rgba( 0,0,0, .5 );}
.punch-logo.semi-dark:hover svg {color:#009722;}

.pageresponse {pointer-events:none; position:fixed; top:20px; left:50%; text-align:center; z-index:200; margin-left:-25%; padding:15px; width:50%; border-radius:5px; opacity:1; font-size:18px; color:#fff; font-weight:normal; background:rgba( 0,0,0, .5 ); animation:responseflash 5s forwards;}
.pageresponse .inner {width:100%; max-width:1500px; margin:auto;}

@keyframes responseflash {
  0% {color:rgba(255,255,255,0.2); opacity:1;} 
  10% {color:rgba(255,255,255,1); opacity:1;} 
  20% {color:rgba(255,255,255,0.2); opacity:1;}
  30% {color:rgba(255,255,255,1); opacity:1;} 
  40% {color:rgba(255,255,255,0.2); opacity:1;}
  50% {color:rgba(255,255,255,1); opacity:1;} 
  90% {color:rgba(255,255,255,1); opacity:1;} 
  100% {opacity:0;}
}

.body-stretch {min-height:100%; margin-bottom:-110px; padding-bottom:110px;}

.panel {width:100%;}
.panel.white {background:#fff;}
.panel .inner {width:1150px; max-width:100%; margin:auto;}

header {background:transparent;}
header.header-green {background:#00a657;}
header .headerinner {display:flex; align-items:center; padding:15px; width:100%; max-width:1150px; margin:auto; border-bottom:1px solid rgba(255,255,255,0.1);}
header h1 {flex:1; flex-grow:1; white-space:nowrap; color:#fff; font-family:Bitter; font-size:20px; font-weight:bold; text-transform:uppercase;}
header h1 a:link,
header h1 a:visited {color:#fff; text-decoration:none;}
header h1 a:hover {text-shadow:0px 0px 20px rgba( 0,0,0, .2 );}
header h1 .punch-logo {display:inline-block; width:25px; margin:0 12px 0 0; vertical-align:-5px;}

header .links {display:flex; flex-wrap:wrap; justify-content:center;}
header .links a:link,
header .links a:visited {display:inline-block; margin:0 20px; font-size:15px; line-height:18px; text-decoration:none; color:#fff;}
header .links a:hover {color:rgba( 255,255,255, .7 );}
header .links a i {color:rgba( 255,255,255, .3 ); margin-left:5px; font-size:13px;}
header .links a.white {background:#fff; color:#00a656; font-weight:bold;}
header .links a.white:hover {background:rgba( 0,0,0, .8 );}
header .links a.active {font-weight:600;}

footer {min-height:110px; background:#00a657; color:rgba( 255,255,255, .5 );}
footer .inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:15px; border-top:1px solid rgba( 0,0,0, .05 );}
footer .logo {display:inline-block; opacity:.8; font-family:Bitter; font-size:20px; font-weight:bold; text-transform:uppercase; color:#fff;}
footer .logo:hover {text-decoration:none;}
footer .logo .punch-logo {display:inline-block; width:30px; margin:0 10px 0 0; vertical-align:-7px;}
footer .logo .punch-logo svg {color:#fff; fill:rgba( 0,0,0,0 );}
footer .logo:hover {opacity:1;}
footer .logo:hover .punch-logo .circle {}
footer ul {font-size:16px;}
footer ul li {display:inline-block; padding:0 20px; border-left:1px solid rgba( 0,0,0, .1 );}
footer ul li:first-of-type {border-left:0;}
footer ul li a:link,
footer ul li a:visited {text-decoration:underline; color:#fff;}
footer ul li a:hover {text-decoration:none;}
footer .disclaimer {flex-basis:100%; margin:30px 0 0 0; font-size:11px; color:rgba( 255,255,255, .3 ); text-align:center;}


.buttons a {margin-right:20px; margin-bottom:20px; font-size:18px; text-align:center; background:#000; display:inline-block; padding:8px 12px; border-radius:3px; border:0; outline:none; color:#fff; text-decoration:none; line-height:1em; cursor:pointer;}
.buttons a:hover {opacity:0.8;}
.buttons a i {opacity:0.5; margin-left:8px; font-size:14px;}

.buttonsblock {margin:30px auto; text-align:center;}
.buttonslarger a {background:#00a656; color:#fff; padding:10px 20px; font-size:22px;}
.buttonslarger a i {font-size:18px;}

.intro {background: radial-gradient(circle, #00a656 30%, #007c44);}

.intro .inner {display:flex; flex-wrap:wrap; padding:70px 0 50px 0; width:100%; max-width:950px;}
.intro h2 {width:100%; margin:20px 0 40px 0; text-align:left; line-height:120%; font-size:40px; color:rgba( 255,255,255, .8 );}
.intro h2 strong {font-weight:normal; color:#fff;}

.intro .text {flex-basis:60%; font-size:20px; line-height:1.3em; color:rgba( 255,255,255, .8 ); padding-bottom:20px;}
.intro .text p {margin:0 0 1em 0; font-size:20px; line-height:1.3em;}
.intro .text p.small {margin:0 0 10px 0; font-size:16px;}
.intro .text strong {font-weight:bold; color:#fff;}
.intro .text a.button {padding:10px 20px; background:rgba( 0,0,0, .7 );}
.intro .text a.button:hover {background:rgba( 0,0,0, .8 );}
.intro .text a.button .fa {margin:0 10px 0 -5px; color:#00a656; font-size:18px; font-weight:bold; vertical-align:0px;}
.intro .text a.button u {text-decoration:underline;}
.intro .text a.button:hover u {text-decoration:none;}
.intro .text ol {margin:0 0 1em 0; font-size:16px;}
.intro .text ol li {display:flex; /*padding:10px 0; border-top:1px solid rgba( 255,255,255, .15 );*/}
.intro .text ol li:last-child {border-bottom:1px solid rgba( 255,255,255, .15 );}
.intro .text ol li span {/*flex:1;*/ color:#fff;}
/*.intro .text ol li span:last-child {flex-grow:1; text-align:right;}*/
.intro .text ol li span .fa {margin:0 10px 0 0; color:rgba( 255,255,255, .5 );}
.intro .text ol li span .asterisk {color:rgba( 255,255,255, .2 );}

.intro .text ul {margin:0 0 20px 0;}
.intro .text ul li {padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.1); border-radius: 2px; color:#fff; font-size:16px;}
.intro .text ul li span {color:#fff;}
.intro .text ul .fa {opacity:0.5; margin-right:15px;}
.intro .text ul .highlfight {background: #edff00; padding: 0 5px; font-weight: 700; color: #00a657 !important; display:inline-block;}
.intro .text ul .highlight {font-weight: 700; display:inline-block; /*color:#edff00 !important;*/ float:right;}
.intro .text ul .highlight span {font-weight:normal; opacity:0.5;}

.intro .buttons {padding-top:20px; display:block;}

.intro .signuptop {flex-basis:40%;}
.intro .signuptop .signuptopinner {margin:50px auto 0 auto; max-width:300px; border-radius:0 0 10px 10px; box-shadow:0 0 20px rgba(0,0,0,0.3); /*padding:10px;*/ background:#fff;}

.intro .signuptop .special {background:linear-gradient( to bottom, #ff3, #ff3 ); text-align:center; position:relative; margin-bottom:20px;}

.intro .signuptop .special h2 {font-family:'Source Sans Pro'; vertical-align:middle; font-weight:bold; text-align:center; display:block; margin:0; padding:30px 20px 15px 30px; color:#333; font-size:50px;}
.intro .signuptop .special h2 span {font-size:30px; opacity:0.4; vertical-align:middle;}
.intro .signuptop .special h2 small {font-size:18px; opacity:0.2; vertical-align:baseline;}
.intro .signuptop .special h3 {position:absolute; top:-15px; left:0; right:0; margin:0 20px; font-weight:bold; text-align:center; padding:8px 20px; background:#000; color:#ff3; font-size:15px; border-radius:4px;}

.intro .signuptop h3 {font-family:'Source Sans Pro';}
.intro .signuptop p {color:#333; text-align:center; padding:5px 20px;}
.intro .signuptop p:first-of-type {padding-top:15px;}
.intro .signuptop p .lifetime {font-weight:bold; color:#000;}
.intro .signuptop p.fullprice {color:rgba(0,0,0,0.5); text-align:center; font-size:12px; font-style: italic; margin:10px; padding:10px 10px 20px 10px; border-top:1px solid rgba(0,0,0,0.1); margin-top:20px;}

.intro .signuptop .buttons {text-align: center;}
.intro .signuptop .buttons a {background:#00a656; color:#fff; margin:10px 20px;}

.intro .button {margin-left:10px; margin-right:10px;}

.intro h2.bigdeal {margin-top:70px; padding:50px; border-top:1px solid rgba(255,255,255,0.1); font-size:28px; font-weight:normal; text-align:center; color:#fff;}

.video {background:#fff;}
.video .inner {padding:50px 0 50px 0;}
.video .introvideo img {width:100%;}
.video .introvideo video {width:100%;}

.demo {background:#eee; padding:40px 0;}
.demo h3 {font-size:25px; margin-bottom:30px;}
.demo .heroimage {flex:1; align-self:flex-end; flex-basis: 100px; margin:0 auto 0 auto; display:block; text-align:center;}
.demo .heroimageinner {position:relative; max-width:1100px; margin:auto; text-align:center;}
.demo .flexinner {display:flex;}
.demo .heroimage img {width:100%; margin:auto;}

.demo .flexinner h3 {flex:1 0 40%; text-align:left;}
.demo .flexinner img {flex:1 0 60%; max-width:400px !important;}

.demo ul {list-style:none;}
.demo ul li {position:relative; padding:10px 0 10px 30px; border-top:1px solid rgba( 0,0,0, .1 );}
.demo ul li:before {content:'\f058'; font-weight:bold; font-family:Font Awesome\ 5 Free; position:absolute; left:0; margin-top:2px; color:#00b2f0;}
.demo cite {display:block; margin:3px 0 0 0; font-weight:normal; font-size:14px; color:rgba( 0,0,0, .5 );}

h2.bigdeal {margin-top:0; padding:30px 50px; border-top:1px solid rgba(0,0,0,0.1); font-size:28px; font-weight:normal; text-align:center; color:#333;}

.inspiration {padding:20px 30px 50px 30px; background:#fff;}

.inspiration .text {max-width:500px; margin:10px auto;}
.inspiration p {margin:0 0 1em 0; font-size:20px; max-width:1020px; margin:auto; text-align:left; color:rgba( 0,0,0, .8 );}
.inspiration p.small {margin:0 0 10px 0; font-size:16px;}
.inspiration ul {margin:20px 0 20px 0;}
.inspiration ul li {padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.1); border-radius: 2px; color:#000; font-size:16px;}
.inspiration ul li:first-child {border-top:1px solid rgba(0,0,0,0.1);}
.inspiration ul li span {color:#00a656;}
.inspiration ul .fa {opacity:1; margin-right:15px; color:#00a656;}
.inspiration ul .highlfight {background: #edff00; padding: 0 5px; font-weight: 700; color: #00a657 !important; display:inline-block;}
.inspiration ul .highlight {font-weight: 700; display:inline-block; /*color:#edff00 !important;*/ float:right;}
.inspiration ul .highlight span {font-weight:normal; opacity:0.5;}

.interactive {background: #fff; padding:40px 0 20px 0;}
.interactive .inner {padding-bottom:0; margin-bottom:40px; margin-top:-100px;}
.interactive h2 {margin:0 0 30px 0; font-size:28px; font-weight:normal; text-align:center; color:#00a656;}
.interactive h3 {font-size:25px; margin-bottom:30px;}
.interactive .flex {align-items:flex-start;}
.interactive .flex .left {width:33%;}
.interactive .flex .left p {margin-right:30px; font-size:25px; font-weight:600; opacity:0.7; text-align:center;}

.interactive .heroimage {flex:1; align-self:flex-end; flex-basis: 100px; margin:0 auto 0 auto; display:block; text-align:center; position:relative;}
.interactive .heroimageinner {position:relative; max-width:900px; margin:-120px auto 0 auto; text-align:center;}
.interactive .heroimage img {width:100%; margin:auto;}

.interactive .heroimage .target {border:2px dashed rgba(0,0,0,0); position:absolute;}

.interactive .heroimage .target1 {top: 13.0%; left: 25.1%; width: 50.4%; height:4.8%;}
.interactive .heroimage .target2 {top: 22.0%; left: 14.8%; width: 22.8%; height:12.5%;}
.interactive .heroimage .target3 {top: 34.5%; left: 14.8%; width: 22.8%; height:19%;}
.interactive .heroimage .target4 {top: 22.0%; left: 38.8%; width: 22.8%; height: 31.5%;}
.interactive .heroimage .target5 {top: 22.0%; left: 62.8%; width: 22.8%; height: 31.5%;}
.interactive .heroimage .target6 {top: 55.5%; left: 14.8%; width: 70.8%; height: 8.5%;}
.interactive .heroimage .target7 {top: 65.5%; left: 14.8%; width: 45.8%; height: 18%;}
.interactive .heroimage .target8 {top: 65.5%; left: 60.6%; width: 25.0%; height: 18%;}
.interactive .heroimage .target9 {top: 24.5%; left: 85.3%; width: 2.8%; height: 5.6%;}

.interactive .heroimage .target:hover {background:rgba(255,255,255,0.1); border:2px dashed rgba(0,0,0,0.4);}

.interactive .heroimage .target div {position:absolute; top:20%; left:50%; z-index:3;}
.interactive .heroimage .target div span:first-of-type {opacity:0.2; height:25px; width:25px; line-height:25px; margin:0; background: #edff00; border-radius: 100%; color: #000; font-size:15px; font-weight:bold; text-align: center; display: block; z-index:5;}

.interactive .heroimage .target div span:last-of-type {opacity:0; position:absolute; top:30px; left:-30px; width:200px; line-height:135%; margin:0; background: #333; color: #fff; font-size:11px; font-weight:normal; text-align: left; display: block; padding:5px; border-radius: 3px; z-index:4;}

.interactive .heroimage .target div.flip span:last-of-type {left:initial; right:-30px;}

.interactive .heroimage .target:hover div span {opacity:1;}

.interactive .heroimage .target2 div {top:20%; left:50%;}
.interactive .heroimage .target3 div {top:19%; left:75%;}
.interactive .heroimage .target4 div {top:30%; left:60%;}
.interactive .heroimage .target5 div {top:40%; left:50%;}
.interactive .heroimage .target6 div {top:25%; left:55%;}
.interactive .heroimage .target7 div {top:18%; left:45%;}
.interactive .heroimage .target8 div {top:50%; left:70%;}
.interactive .heroimage .target9 div {top:20%; left:75%;}
.interactive .heroimage .target10 div {top:23%; left:55%;}
.interactive .heroimage .target11 div {top:50%; left:75%;}


@media screen and ( max-width: 900px ) {
.olcols {margin:0;}
.olcol {width:100%;}
.olcol ol {margin:0;}
.olcol ol li {font-size:14px;}
.olcol ol li span:nth-of-type(1) {flex: 0 0 30px; padding-top:5px;}
.olcol ol li span:nth-of-type(1):after {margin-right: 10px; font-size:12px; width: 1.2em;}
.olcol ol li span:nth-of-type(2) {padding:5px 0;}
}

.punchisfor {padding:80px 0 100px 0; background:linear-gradient( to bottom, #fff, #eee ); /*border-bottom:1px solid rgba( 0,0,0, .1 );*/ text-align:center; font-size:18px;}
.punchisfor .columns {display:flex; flex-wrap:wrap; align-items:flex-start;}
.punchisfor .columns div {flex:1; width:300px; max-width:100%; padding:30px 0 0 0; margin-bottom:20px; background:#fff; border-radius:3px; border:5px solid rgba(0,0,0,0.1);}
.punchisfor h3 {margin:0 0 18px 0; font-size:25px; font-family:Bitter; color:#00a656; padding:0 30px;}
.punchisfor p {margin:0 0 24px 0; padding:0 30px;}
.punchisfor img {max-width:100%; display:none;}
.punchisfor p.highlight {background:#00a656; color:#fff; margin:10px 20px 20px 20px; font-size:15px; padding:20px; line-height: 150%;}
.punchisfor p.highlight span {background:#ff3; padding:0 4px; color:#00a656; border-radius: 3px; font-weight:bold;}

.punchisfor .for p:first-of-type {opacity:0.7; border-bottom:1px solid rgba(0,0,0,0.1); border-top:1px solid rgba(0,0,0,0.1); font-size:15px; padding:10px 0; margin:10px 30px 20px 30px; font-style: italic;}

@media screen and ( min-width: 900px ){
  
  .punchisfor .columns div {margin:0 15px; /*box-shadow:0 0 10px rgba( 0,0,0, .3 );*/}
  .punchisfor .columns div:first-child {margin-top:-20px;}
  .punchisfor .columns div:nth-child(2) {margin-top:-60px;}
  .punchisfor .columns div:last-child {margin-top:-0;}
  
}

.features {padding:80px 0 50px 0; background:#fff;}
.features.fatpadding {padding:200px 0 80px 0;}
.features h2 {margin:0 0 60px 0; font-size:28px; font-weight:normal; text-align:center; color:#00a656;}
.features h3 {margin:0 0 20px 0; font-size:18px; font-weight:bold;}
.features ul {list-style:none;}
.features ul li {position:relative; padding:10px 0 10px 30px; border-top:1px solid rgba( 0,0,0, .1 );}
.features ul li:before {content:'\f058'; font-weight:bold; font-family:Font Awesome\ 5 Free; position:absolute; left:0; margin-top:2px; color:#00a656;}
.features cite {display:block; margin:3px 0 0 0; font-weight:normal; font-size:14px; color:rgba( 0,0,0, .5 );}
.features hr {height:0; margin:60px 0; border:0; border-bottom:1px solid rgba( 0,0,0, .1 );}
.features .flex {align-items:flex-start;}
.features .flex .left {min-width:400px;}
.features .flex .cardcards {flex:1; max-width:100%; margin:30px 0 0 0;}
/*.features .flex img {flex:1; max-width:100%; margin:30px 0 0 0;}*/

.features .beta {background:rgba(0,0,0,0.2); color:rgba(0,0,0,0.7); padding:1px 5px; border-radius: 2px; margin-left:10px; font-size:10px; text-transform: uppercase;}

.features .cardcards {}
.features .cardcards .cardcol {width:46%; margin-right:3%; display:inline-block; font-size:0.0000001; vertical-align: top;}
.features .cardcards .cardcol:nth-of-type(2) {margin-top:30px;}
.features .cardcards .cardcol img {width:100%; height:auto; margin-top:3%;}
.greyback {background:#eee;}
.greybackdark {background:#dedede;}

.featureheading {padding:5px 8px; border-radius:5px; opacity:0.5; font-size:14px !important; font-weight:normal !important; color:#fff; background:#000; display:inline-block; text-transform:uppercase; margin-bottom:10px !important;}
.h3new {padding:3px 6px; border-radius:5px; opacity:1; font-size:12px !important; font-weight:normal !important; color:#fff; background:#00a656; display:inline-block; text-transform:uppercase; vertical-align: middle; margin-left:5px;}

@media screen and ( min-width: 900px ){
  .features .flex {align-items:flex-start; flex-wrap:unset;}
  /*.features .flex img {flex-basis:66%; max-width:66%; margin:0 -80px 0 80px;}*/
  .features .flex .cardcards {flex-basis:66%; max-width:66%; margin:0 0 0 80px;}
  .features .flex.swap .left {order:2;}
  /*.features .flex.swap img {order:1; margin:0 80px 0 -80px;}*/
  .features .flex.swap .cardcards {order:1; margin:0 80px 0 0;}

}
  
.signup {/*background:url('/images/cards-bg.jpg') repeat; background-size:cover;*/}
/*.signup .fadein {position:absolute; top:0; left:0; right:0; min-height:80px; background:linear-gradient( to top, rgba( 0,0,0, 0 ), #fff );}*/
/*.signup .fadeout {position:absolute; bottom:0; left:0; right:0; min-height:80px; background:linear-gradient( to bottom, rgba( 0,0,0, 0 ), #eee );}*/
/*.signup .inner {padding:50px 30px; background:rgba( 0,0,0, .75 ); border-radius:10px; color:#fff;}*/
.signup h2 {text-align:center;}
.signup h2.special {margin:0 0 30px 0; font-size:24px; font-family:'Source Sans Pro'; font-weight:bold; text-align:center; display:block; margin:0 0 30px 0; padding:5px 20px; text-align:left; background:#ff3; color:#000; font-size:25px; border-radius:3px;}
.signup h3 {font-family:'Source Sans Pro';}
/*.signup .flex {display:flex; flex-wrap:wrap;}*/

.signup .pricing {}
.signup .price {display:inline-block; margin:30px 0; color:#666; max-width:200px; /*height:150px;*/ padding:30px; background:#fff; text-align:center; font-size:14px;}
.signup .price strong {display:block; font-size:50px; color:#00a656;}
.signup .price p {margin:10px 0;}
.signup .price p:first-of-type {color:rgba(0,0,0,0.5); text-transform: uppercase;}
.signup .price p a {background:#00a656; padding:5px 10px; border-radius: 3px; color:#fff;}

.signup .inner {font-size:25px; color:rgba( 255,255,255, 1 ); width:100%; max-width:500px;}
/*.signup .inner p {max-width:500px;}*/
.signup .lifetime {margin:0 3px; color:#ff3; /*border-bottom:3px dashed #ff3;*/ font-weight:bold;}

.signup .inner a:link,
.signup .inner a:visited {color:#fff; text-decoration:none;}
.signup .inner a:hover {text-decoration:underline;}

.signup .field a:link,
.signup .field a:visited {text-decoration:underline;}
.signup .field a:hover {text-decoration:none;}

.signup p {font-size:20px; margin:10px 0;}
.signup p.fullprice {font-size:16px; opacity:0.7;}

.signup form {margin:20px 0; width:100%; padding-top:20px; border-top:1px solid rgba( 255,255,255, .15 );}
.signup form p {margin:10px 0;}
.signup form h3 {margin:0 0 15px 0; color:#fff; font-weight:bold;}
.signup form input[type="text"],
.signup form input[type="password"],
.signup form input[type="email"] {width:100%; max-width:100%; padding:8px 16px; border:0; outline:none; font-size:18px; margin:5px 0;}
.signup form textarea {border:0;}
.signup form select {width:100%; max-width:100%; padding:8px 16px; border:0; outline:none; font-size:18px; margin:5px 0;}
.signup form label {display:inline-block; margin-right:15px; font-size:16px;}
.signup form label input {margin-right:7px;}
.signup form textarea {width:100%; max-width:100%; height:100px; padding:8px 16px; margin:5px 0;}
.signup form button {white-space:nowrap; margin:20px 0 0 0; padding:10px 60px; background:#333; font-size:18px; font-weight:bold;}
.signup form button .fa {margin:0 0 0 10px; color:rgba( 255,255,255, .5 );}
.signup .refund {text-align:center; color:rgba( 255,255,255, .6 ); font-size:15px;}
.signup .strikethrough {position:relative;}
.signup .strikethrough:before {display:none; position:absolute; content:""; left:-10px; top:50%; right:-10px; border-top:8px solid #ff3; transform:rotate(-25deg);}
.signup hr {margin:15px 0; border:0; border-bottom:1px solid rgba( 255,255,255, .25 );}
.signup .small {font-size:14px; color:rgba( 255,255,255, .5 );}
.signup form .field.error input {/*border:1px solid #f00;*/}
.signup form .field.error input::placeholder,
.signup form .field.error textarea::placeholder {color:#f00;}
/*
.signup form .field.error:after {content:'This field is required'; display:block; margin:0; padding:0 8px; font-size:11px; color:#fff;}
*/

/*
.signup:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 400%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url('/images/cards-bg.jpg') 0 0 repeat;
  -webkit-transform: rotate(340deg);
  -moz-transform: rotate(340deg);
  -ms-transform: rotate(340deg);
  -o-transform: rotate(340deg);
  transform: rotate(340deg);
}
*/

.about {padding:30px 0 30px 0; background:#00a657; color:#fff; /*  background:linear-gradient( to bottom, #eee, #fff ); */}
.about .inner {display:flex; flex-wrap:wrap; display:none;}
.about .text {flex:1;}
.about .text p {margin:0 0 1em 0;}
.about h2 {flex:1; flex-basis:100%; margin:0 0 60px; font-size:25px; text-align:center;}
.about h2 a {color:#fff; text-decoration:underline;}
.about h2 a:hover {text-decoration:none;}
.about .image {flex-basis:33.3333333%; margin:0 0 0 30px;}
.about .image img {width:100%; border-radius:5px;}
.about .col {flex:1; min-width:300px; margin:0 0 30px 0; padding:0 15px;}
.about .col .year {display:inline-block; margin:0 0 20px 0; padding:7px 10px 5px 10px; background:rgba( 0,0,0, .4 ); border-radius:3px; font-family:Bitter; font-size:14px; color:#fff;}
.about .col .info {line-height:1.4;}
.about p {flex:1; flex-basis:100%; margin:30px 0 0 0;}

.content {padding:30px 0;}
.content h2 {margin:0 0 30px 0; font-family:Bitter; font-size:25px; line-height:1.35em; text-align:center; color:#00a657;}
.content h3 {margin:0 0 20px 0; font-weight:600; font-size:20px; line-height:1.35em;}
.content hr {margin:0 0 1em 0; border:0; border-bottom:1px solid #ccc;}
.content p {margin:0 0 1em 0;}
.content ul {margin:0 0 1em 0; list-style:disc; padding-left:30px;}
.content ul ul {list-style:circle; margin:3px 0 8px 0;}

.content-features {padding-top:60px;}
.content-features .inner {display:flex; flex-wrap:wrap;}
.content-features .sidebar {flex-basis:280px; margin:0 60px 0 0; padding:30px 15px; background:#00a657;}
.content-features .sidebar h5 {margin:0 0 10px 0; color:rgba( 255,255,255, .5 ); text-transform:uppercase; font-size:16px;}
.content-features .sidebar ul {list-style:none; color:#fff; font-size:14px; margin:0 0 20px 0; padding:0;}
.content-features .sidebar ul li {margin:0; padding:5px 0; border-top:1px solid rgba(255,255,255,0.1);}
.content-features .sidebar ul li a {color:#fff;}
.content-features .sidebar ul li a:hover {color:rgba( 255,255,255, .7 ); text-decoration:none;}
.content-features .sidebar ul i {display:none;}
.content-features .sidebar ul span {display:none;}

.content-features .backforth {display:flex; flex-wrap:wrap; justify-content:space-between; margin:20px 0 0 0;}
.content-features .backforth a {margin:0 0 10px 0; padding:6px 12px; background:#00a657; border-radius:3px; color:#fff; font-size:14px; text-decoration:none;}
.content-features .backforth a .fa {color:rgba( 255,255,255, .5 );}
.content-features .backforth a:first-child .fa {margin-right:10px;}
.content-features .backforth a:last-child .fa {margin-left:10px;}

.content-features .body {flex:1;}

.content.terms {background:#eee; counter-reset:section;}
.content.terms .inner {width:700px; padding:30px; background:#fff;}
.content.terms h3:before {counter-increment:section; content:counter(section) ". ";}

@media screen and ( max-width:760px ){
  .content.terms {padding:0;}
}

.blog-content {max-width:700px; margin:auto; padding-top:70px; padding-bottom:150px;}
.blog-content .cat {display:inline-block; margin:0 0 20px 0; padding:6px 10px; border-radius:3px; font-family:Bitter; font-weight:600; font-size:12px; line-height:1em; background:#999; color:#fff;}
.blog-content h2 {font-size:35px; color:#333; line-height:135%; color:#00a657; text-align:left;}
.blog-content p {font-size:18px; line-height:150%; margin:20px 0;}
.blog-content p.snip {font-size:22px;}
.blog-content p.bold {font-size:22px; border:2px dashed rgba(0,0,0,0.1); border-left:0; border-right:0; padding:10px 10%; margin:50px 0; text-align:center; font-weight:bold;}
.blog-content ul {margin:40px 0 40px 20px;}
.blog-content hr {margin:30px 30% 40px 30%; opacity:0.5; border-bottom-width:5px; border-radius: 2px;}
.blog-content p a {text-decoration: underline;}

.login {display:flex; align-items:center; width:100%; min-height:100%; background:#00a657;}
.login .inner {flex-basis:400px; max-width:90%; margin:auto;}

.login h1 {margin:0 0 40px 0; white-space:nowrap; color:#fff; font-family:Bitter; font-size:30px; font-weight:bold; text-transform:uppercase; text-align:center;}
.login h1 a:link,
.login h1 a:visited {color:#fff; text-decoration:none;}
.login h1 a:hover {text-shadow:0px 0px 20px rgba( 0,0,0, .2 );}
.login h1 img {display:inline-block; width:40px; margin:0 15px 0 0; vertical-align:-9px;}

.login hr {margin:20px 0; border:0; border-bottom:1px solid rgba( 0,0,0, .2 );}

.login form {display:block; padding:30px; border-radius:5px; background:#eee;}
.login form p {text-align:center; line-height:1.4em;}
.login form p.small {text-align:center; font-size:14px; color:rgba( 0,0,0, .5 );}
.login form .field {width:100%; margin:0 0 15px 0;}
.login form .field:last-child {margin-bottom:0;}
.login form .field.flex {justify-content:space-between; align-items:flex-start;}
.login form .field label {display:block; margin:0 0 10px 0; font-weight:bold; color:rgba( 0,0,0, .9 );}
.login form .field label.small {font-size:14px; font-weight:normal; color:rgba( 0,0,0, .5 );}
.login form .field input[type="text"],
.login form .field input[type="password"] {width:100%; outline:none;}

/*
.login form .field label input[type="checkbox"] {visibility:hidden; vertical-align:0px; margin:0 10px 0 0;}
.login form .field label input[type="checkbox"]:before {content:''; visibility:visible; display:inline-block; vertical-align:1px; width:11px; height:11px; padding:2px; border:1px solid rgba( 0,0,0, .1 ); border-radius:3px; background:#fff; color:#fff; font-size:11px; line-height:12px; text-align:center;}
.login form .field label input[type="checkbox"]:hover:before {background:rgba( 0,0,0, .05 );}
.login form .field label input[type="checkbox"]:checked:before {content:'\f00c'; font-family:Font Awesome\ 5 Free; vertical-align:6px; background:rgba( 0,0,0, .2 ); font-weight:900;}
.login form .field label input[type="checkbox"]:checked:hover:before {background:rgba( 0,0,0, .3 );}
*/

form .field label[data-checkbox] {margin-bottom:7px;}
form .field label[data-checkbox]:before {content:''; visibility:visible; display:inline-block; margin:0 6px 0 0; vertical-align:-3px; width:11px; height:11px; padding:2px; border:1px solid rgba( 0,0,0, .1 ); border-radius:50%; background:#fff; color:#fff; font-size:11px; line-height:12px; text-align:center;}
form .field label[data-checkbox] input[type="checkbox"],
form .field label[data-checkbox] input[type="radio"] {position:absolute; opacity:0;}
form .field label[data-checkbox]:hover:before {background:rgba( 0,0,0, .05 );}
form .field label[data-checkbox].focused:before {background:rgba( 0,0,0, .05 );}
form .field label[data-checkbox].checked:before {content:'\f00c'; font-family:Font Awesome\ 5 Free; vertical-align:1px; background:#00a657; color:#fff; font-weight:900;}
form .field label[data-checkbox].checked:hover:before {}

.login form .field.error input {border:1px solid #f00;}
.login form .field.error:after {content:'This field is required'; display:block; margin:2px 0 0 0; padding:0 8px; font-size:11px; color:#f00;}
.login form .field.nomatch:after {content:'Passwords do not match';}
.login form .forgot {color:rgba( 0,0,0, .5 ); font-size:14px;}
.login form button {width:100%; padding:10px; background:#00a657; font-weight:bold;}
.login form .field.tos {font-size:14px;}
.login form .field.tos input[type="checkbox"] {vertical-align:1px;}
.login form .field.tos a:link,
.login form .field.tos a:visited {text-decoration:underline;}

.login .already {margin:40px 0 0 0; text-align:center; color:rgba( 255,255,255, .8 ); font-size:14px; font-weight:600;}
.login .already a:link,
.login .already a:visited {color:rgba( 255,255,255, .8 ); text-decoration:underline;}
.login .already a:hover {text-decoration:none;}

.signup form .field label[data-checkbox]:before {border:0; font-size:9px;}
.signup form .field label[data-checkbox]:hover:before {background:rgba( 255,255,255, .8 );}
.signup form .field label[data-checkbox].focused:before {background:rgba( 255,255,255, .8 );}
.signup form .field label[data-checkbox].checked:before {color:#00a657; background:#fff;}

button.stripe {padding:10px 20px; font-size:18px;}
button.stripe .fa {margin:-5px 10px -5px -10px; font-size:24px; vertical-align:-2px;}

@media all and ( max-width:1500px ){
  
  /*.intro img {margin-left:-100px;}*/
  
}

@media all and ( max-width:1150px ){
  
  .panel .inner {padding:0 30px;}
  
  header {padding:20px 0;}
  footer.panel .inner {padding:20px;}
  
  .intro {margin:0;}
  .intro .inner {display:block; padding:20px 30px 30px 30px; text-align:center;}
  .intro .text {max-width:800px; margin:auto; text-align:left; padding-left:10px; padding-right:10px;}
  
  
/*  .signup {padding:100px 30px;}
  .signup .inner {padding:50px 30px;}*/
  
}

@media all and ( max-width:900px ){
  
  .intro .inner {padding:20px 20px 30px 20px;}
  .intro h2 {font-size:30px;}

  .about .text,
  .about .image {flex-basis:100%;}
  .about .image {margin:0;}
  
  .content-features .body {order:1;}
  .content-features .sidebar {order:2; flex-basis:100%; margin:30px 0 0 0;}
  .content-features .body img {max-width:100%; margin:0;}
  
  .features h2 {margin:0 0 40px 0; font-size:20px;}
  .features .columns div {flex-basis:100%; padding-left:0; padding-right:0;}
  .features .flex .left {min-width:100%;}
  .features .flex .cardcards {min-width:100%;}

  .features .cardcards .cardcol {width:48%; margin-right:1%;}
  .features .cardcards .cardcol:nth-of-type(2) {margin-top:0;}
  .features .cardcards .cardcol img {width:100%; height:auto; margin-top:20px;}
  .features .cardcards .cardcol:first-of-type img:first-of-type {margin-top:0;}

  .punchisfor {padding:40px 0 40px 0;}
  .punchisfor .inner {padding:0 80px;}
  .punchisfor .columns div {flex-basis:100%;}
  
/*  .signup {padding:30px 0 0 0;}
  .signup .inner {border-radius: 0;}*/
  .signup h2 {font-size:18px;}
  .signup h2.special {font-size:18px; text-align:center;}
  .signup form label {margin-right:10px; font-size:14px;}
/*  .signup .text {font-size:18px;}
  .signup form p {flex-wrap:wrap;}
  .signup form p input[type="text"] {flex-basis:100%; margin-bottom:10px;}
  .signup form p button {flex-basis:100%; margin-left:auto; margin-right:auto;}*/

}

@media all and ( max-width:768px ){
  
  header {padding-bottom:10px;}
  header .headerinner {flex-wrap:wrap; text-align:center; padding:15px 0;}

  header .links {flex-basis:100%; margin:20px 0 0 0;}
  header .links a:link,
  header .links a:visited {margin-bottom:10px; margin-left:5px; margin-right:5px; padding:4px 8px; font-size:14px;}

  h2.bigdeal {margin-top:0; padding:30px 0; font-size:22px;}

  .intro h2 {font-size:22px;}
  .intro h2.bigdeal {margin-top:30px; padding:20px 0; font-size:22px;}

  .intro .buttons button {margin-right:10px; font-size:15px; padding:7px 15px;}

  .intro .signuptop {padding:20px;}
  .intro .signuptop .signuptopinner {margin:50px auto 50px auto; max-width:400px;}


  .intro .text {flex-basis:100%; font-size:16px;}
  .intro .heroimage .caption {margin:0 0 20px 0; text-align:center; font-size:14px;}
  .intro .heroimage .caption span:nth-of-type(1) {height:15px; width:15px; line-height:15px; margin-right:10px; font-size:11px;}

  .interactive {padding:30px 0 30px 0;}
  .interactive .inner {margin-bottom:0; margin-top:0;}
  .interactive .heroimageinner {margin-top:-70px;}

  .inspiration {padding-left:0; padding-right:0;}

  .demo {display:none;}
  
  .video {background:#eee;}
  .video .inner {padding:50px 20px;}

  .features .cardcards .cardcol {width:100%; margin-right:0;}

  .punchisfor .inner {padding:0 20px;}

  footer {}
  footer .inner {text-align:center;}
  footer .logo {flex:1;}
  footer ul {flex-basis:100%; margin:20px 0 0 0;}
  footer ul li {width:100%; display:block; text-align:left; padding:5px 0; border-left:0;}
  
  .login .inner {margin-top:20px; padding-bottom:20px;}
  
/*  .signup .price {margin:0 auto;}
  .signup .text {flex-basis:100%; margin:20px 0 0 0;}*/
  
}