ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, dl, dt, dd, figure, figcaption {
  margin: 0;
  padding: 0;
}

a img, :link img, :visited img, fieldset { border: none; }

address { font-style: normal; }

header, section, article, nav, footer, hgroup, details, summary, figure, main { display: block; }

mark {
  color: inherit;
  background: transparent;
}

abbr { border: none; }
 summary::-webkit-details-marker {
 display: none;
}

.wdz-modal article {
  width: 500px;
  height: 500px;
  margin-left: -250px;
  color: #47b667;
  text-align: center;
}

.wdz-modal article h1 {
  padding: 220px 0 20px 0;
  font-size: 60px;
}

.wdz-modal article p { font-size: 20px; }
@media screen and (max-width: 480px) {

.wdz-modal article {
  width: 300px;
  height: 300px;
  margin-left: -150px;
}

.wdz-modal article h1 { padding-top: 130px; }
}

body {
  background: #47b667;
  font-family: Cabin, sans-serif;
  color: white;
  font-size: 18px;
  line-height: 160%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}
@media screen and (max-width: 480px) {

body { font-size: 16px; }
}

header {
  text-align: center;
  padding: 60px 0;
}

header h1, header h2 {
  font-size: 100px;
  font-weight: normal;
  line-height: 100%;
}

header h2 {
  font-size: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
@media screen and (max-width: 480px) {

header { padding: 20px 0; }

header h1 { font-size: 70px; }
}

.wrapper {
  max-width: 800px;
  padding: 40px 40px 20px 40px;
  margin: 0 auto;
}
@media screen and (max-width: 480px) {

.wrapper { padding: 30px 10px 10px 10px; }
}

a { color: white; }

main h1 {
  font-size: 30px;
  text-align: center;
  font-weight: normal;
}
@media screen and (max-width: 480px) {

main h1 { font-size: 22px; }
}

main h1, main h2, main p, main pre { margin: 0 0 40px 0; }
@media screen and (max-width: 480px) {

main h1, main h2, main p, main pre { margin: 0 0 20px 0; }
}

main pre {
  color: white;
  background: #399152;
  padding: 20px 40px;
  font-size: 95%;
  overflow-x: auto;
}

main pre code { margin: 0; }
@media screen and (max-width: 480px) {

main pre { padding: 10px; }
}

main p code {
  background: #40a45d;
  padding: 2px 5px;
  font-size: 95%;
  margin: 0 3px;
}

main a[data-wdz-animation] {
  position: relative;
  background: #52cd76;
  padding: 10px 30px;
  margin: 0 auto;
  display: block;
  max-width: 150px;
  text-align: center;
  text-decoration: none;
  color: white;
  -webkit-transition: background-color 0.2s;
  font-size: 22px;
}

main a[data-wdz-animation]:hover { background: #56d97c; }
@media screen and (max-width: 480px) {

main a[data-wdz-animation] {
  padding: 10px;
  font-size: 20px;
}
}

main a[data-wdz-animation]:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  -webkit-transition: border-color 0.2s;
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 8px;
  border-top-color: #52cd76;
}

main a[data-wdz-animation]:hover:after { border-top-color: #56d97c; }

footer {
  background: #40a45d;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  padding: 0 0 40px 0;
}

footer a { color: white; }

.examples { background: #40a45d; }

.examples pre {
  margin-top: -20px;
  position: relative;
}
@media screen and (max-width: 480px) {

.examples pre { margin-top: -10px; }
}

.download {
  background: #43ab61;
  text-align: center;
  padding-bottom: 20px;
}

.download p { margin: 0 0 10px 0; }

.download a {
  position: relative;
  background: #52cd76;
  padding: 10px 30px;
  margin: 0 auto;
  display: block;
  max-width: 150px;
  text-align: center;
  text-decoration: none;
  color: white;
  -webkit-transition: background-color 0.2s;
  font-size: 22px;
  display: inline-block;
  margin: 0 10px;
}

.download a:hover { background: #56d97c; }
@media screen and (max-width: 480px) {

.download a {
  padding: 10px;
  font-size: 20px;
}
}

.highlight { color: rgba(255, 255, 255, 0.7); }

.highlight .s, .highlight .s1, .highlight .nl { color: white; }

.highlight .c1 {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}