:root {
  --primary: #1789c7;    /*#d00*/  /*DD2A3B*/
  --secondary: #48f;
  --highlight: #d00;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font: normal 1em sans-serif; }
body { padding: 20px; }
page { display: block; width: 1000px; margin: 0 auto; text-align: center; }
header { text-align: right; }
footer { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; margin-top: 100px; padding: 40px 0; border-top: 1px solid var(--primary); }
footer .dim { color: #aaa; font-size: 0.8em; }
footer .left { text-align: left; }
footer .left h3 { margin: 0; padding: 0; }
footer .left p { margin: 0; padding: 10px 0 0; }
footer .center h2 { margin: 0; padding: 0; }
footer .center a { margin: 10px 0 0; padding: 5px 20px; background-color: #aaa; }
footer .right { text-align: right; }
footer .right h4 { margin: 0; padding: 0; }
footer .right li { margin: 4px 0 10px; padding: 0; font-size: 0.9em; }

red { color: var(--primary); }
.sep { margin-top: 40px; }

a { text-decoration: none; color: #000; }
a.button { display: inline-block; margin-top: 40px; padding: 14px 30px; color: #fff; background-color: var(--secondary); border: none; border-radius: 24px; font-size: 1em; text-decoration: none; }
a.button:visited { color: #fff; }
a.goto { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin: 0; text-decoration: none; color: #000; }
a.goto:visited { color: #000; }
a.link { margin-left: 20px; padding: 10px 30px; text-decoration: none; color: #000; border: 1px solid var(--primary); border-radius: 24px; }
li { list-style: none; }

button { display: inline-block; margin-top: 20px; padding: 14px 30px; color: #fff; background-color: var(--primary); border: none; border-radius: 24px; /*font-size: 1em; text-decoration: none;*/ cursor: pointer; }

p.short { /*display: inline-block; width: 400px;*/ margin-top: 20px; font-size: 0.8em; }
p.small { display: block; width: 450px; margin: 20px auto 0; color: #888; font-size: 0.8em; }

icon a { display: inline-flex; flex-direction: row; justify-content: center; align-items:center; }
.iconApp { width: 24px; margin-right: 10px; }

.home { color: var(--primary); text-decoration: none; }
.home:visited { color: var(--primary); }

hero { display: block; }
hero img.heroImage { margin-bottom: 20px; }
hero h1 { margin: 0; font-size: 5em; color: var(--primary); }
hero h2 { margin: 0; font-size: 3em; }
hero h3 { margin: 0.5em; font-size: 1.2em; font-weight: normal; }

info { display: block; margin: 60px 0; }

plans { display: block; margin: 60px 0; }
plan { display: inline-block; width: 30%; margin: 0 10px; padding: 20px 10px; background-color: #fafafa; border: 1px solid var(--primary); border-top: 10px solid var(--primary); border-radius: 10px; }
plan.sel { background-color: #fff; border: 3px solid var(--primary); border-top: 10px solid var(--primary); }
plan:hover { background-color: #fff; /*box-shadow: 0px 0px 6px #00000055;*/ }
plan h1 { margin: 30px 0; font-size: 2em; color: #000; }
plan h2.cost { margin: 0 0 0 0; padding: 0; font-size: 4em; color: var(--primary); }
plan h3 { margin: 30px 0 0; font-size: 2em; font-weight: bold; color: var(--highlight); }
plan h4 { margin: 0; font-size: 1em; font-weight: bold; color: #000; }
plan ul { width: 100%; text-align: left; }

main { display: block; margin: 40px 0; }

form { width: 600px; margin: 40px auto 0; padding-bottom: 20px; border: 3px solid var(--primary); border-top: 10px solid var(--primary); border-radius: 8px; }
form li { margin: 10px 0; }
label { display: block; }
input { width: 250px; margin: 5px; padding: 10px; border-radius: 4px; border: 1px solid #ccc; }
textarea { margin: 5px; padding: 10px; border-radius: 4px; width: 450px; height: 300px; }

panels { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 60px; }
panel { widht: 33%; margin: 20px 30px; text-align: left; line-height: 1.4em; letter-spacing: 0.8px; }

.free { margin-top: 80px; }

/* RESPONSIVE */

@media screen and (max-width: 1000px) {
  page { width: 1000px; }
}

@media screen and (max-width: 792px) {
  page { width: 100%; }
}

@media screen and (max-width: 640px) {
  page { width: 100%; }
  hero > img { width: 100% }
}

@media screen and (max-width: 480px) {
  page { width: 100% }
  hero > img { width: 100% }
  panels { grid-template-columns: 1fr }
  p.small { width: 100% }
  tryit { text-align: center }
  tryit a.link { margin: 10px auto }
  footer { flex-direction: column; align-items: center }
  footer .left { margin-bottom: 20px }
  footer .right { text-align: center }
  plan { display: block; width: 100%; margin-bottom: 20px }
}

@media screen and (max-width: 320px) {
  page { width: 100% }
  hero > img { width: 100% }
  panels { grid-template-columns: 1fr }
  p.small { width: 100% }
  tryit { text-align: center }
  tryit a.link { margin: 10px auto }
  footer { flex-direction: column; align-items: center }
  footer .left { margin-bottom: 20px }
  footer .right { text-align: center }
}