/* 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; }

body {
  background-color: #c6e3ff;
  color: #00407f;
  font-size: 18px;
  font-family: "Helvetica", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  margin: 0 0 0 0; }

p {
  margin-bottom: 1.5em; }

a {
  color: #003366; }
  a:hover {
    background-color: #4ca6ff;
    text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Georgia", serif;
  font-weight: 700;
  margin-bottom: 1em; }

h1, h2 {
  line-height: 1.1; }

h3, h4 {
  line-height: 1.3; }

h1 {
  font-size: 36px;
  letter-spacing: -2px; }

h2 {
  font-size: 30px; }

h3 {
  font-size: 26px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 20px; }

em {
  font-style: italic; }

section {
  -webkit-transform: skew(0deg, -2deg);
  -moz-transform: skew(0deg, -2deg);
  -ms-transform: skew(0deg, -2deg);
  -o-transform: skew(0deg, -2deg);
  transform: skew(0deg, -2deg); }

.wrapper h2, .wrapper h3, .wrapper p {
  -webkit-transform: skew(0, 2deg);
  -moz-transform: skew(0, 2deg);
  -ms-transform: skew(0, 2deg);
  -o-transform: skew(0, 2deg);
  transform: skew(0, 2deg); }

/*
section:before {
	content: "";
	display: block;
	background: #333;
	width: 100%;
	height: 20em;
	float: left;
	@include transform( skew(0, 6deg));
}
*/
.container {
  margin-top: -25px; }

.quote {
  padding-left: 25px;
  position: relative; }
  .quote + p {
    padding-left: 25px; }
  .quote::before {
    color: #4ca6ff;
    content: '\201C';
    float: left;
    font-size: 200%;
    margin-left: -35px;
    margin-top: -20px;
    text-shadow: 0 0.005em #00407f, 0.005em 0 #00407f, 0.005em 0.01em #00407f, 0.01em 0.005em #00407f, 0.01em 0.015em #00407f, 0.015em 0.01em #00407f, 0.015em 0.02em #00407f, 0.02em 0.015em #00407f, 0.02em 0.025em #00407f, 0.025em 0.02em #00407f, 0.025em 0.03em #00407f, 0.03em 0.025em #00407f; }

.singlequote {
  padding-left: 15px; }
  .singlequote::before {
    color: #4ca6ff;
    content: '\201C';
    float: left;
    font-family: "Georgia", serif;
    font-size: 200%;
    margin-left: -20px;
    margin-top: -5px;
    text-shadow: 0 0.005em #00407f, 0.005em 0 #00407f, 0.005em 0.01em #00407f, 0.01em 0.005em #00407f, 0.01em 0.015em #00407f, 0.015em 0.01em #00407f, 0.015em 0.02em #00407f, 0.02em 0.015em #00407f, 0.02em 0.025em #00407f, 0.025em 0.02em #00407f, 0.025em 0.03em #00407f, 0.03em 0.025em #00407f; }

.italic {
  font-style: italic; }

.bold {
  font-weight: 700; }

.wrapper {
  margin: 0 1em;
  padding: 1em; }

.author {
  font-size: 90%; }

.jedan {
  background-color: #4ca6ff; }
  .jedan .wrapper {
    background-color: #60b0ff; }
  .jedan h3 {
    text-shadow: 0 0.005em #89c4ff, 0.005em 0 #89c4ff, 0.005em 0.01em #89c4ff, 0.01em 0.005em #89c4ff, 0.01em 0.015em #89c4ff, 0.015em 0.01em #89c4ff, 0.015em 0.02em #89c4ff, 0.02em 0.015em #89c4ff, 0.02em 0.025em #89c4ff, 0.025em 0.02em #89c4ff, 0.025em 0.03em #89c4ff, 0.03em 0.025em #89c4ff, 0.03em 0.035em #89c4ff, 0.035em 0.03em #89c4ff, 0.035em 0.04em #89c4ff, 0.04em 0.035em #89c4ff, 0.04em 0.045em #89c4ff, 0.045em 0.04em #89c4ff, 0.045em 0.05em #89c4ff, 0.05em 0.045em #89c4ff, 0.05em 0.055em #89c4ff, 0.055em 0.05em #89c4ff, 0.055em 0.06em #89c4ff, 0.06em 0.055em #89c4ff, 0.06em 0.065em #89c4ff, 0.065em 0.06em #89c4ff; }

.dva {
  background-color: #60b0ff; }
  .dva .wrapper {
    background-color: #75baff; }
  .dva h3 {
    text-shadow: 0 0.005em #9ecfff, 0.005em 0 #9ecfff, 0.005em 0.01em #9ecfff, 0.01em 0.005em #9ecfff, 0.01em 0.015em #9ecfff, 0.015em 0.01em #9ecfff, 0.015em 0.02em #9ecfff, 0.02em 0.015em #9ecfff, 0.02em 0.025em #9ecfff, 0.025em 0.02em #9ecfff, 0.025em 0.03em #9ecfff, 0.03em 0.025em #9ecfff, 0.03em 0.035em #9ecfff, 0.035em 0.03em #9ecfff, 0.035em 0.04em #9ecfff, 0.04em 0.035em #9ecfff, 0.04em 0.045em #9ecfff, 0.045em 0.04em #9ecfff, 0.045em 0.05em #9ecfff, 0.05em 0.045em #9ecfff, 0.05em 0.055em #9ecfff, 0.055em 0.05em #9ecfff, 0.055em 0.06em #9ecfff, 0.06em 0.055em #9ecfff, 0.06em 0.065em #9ecfff, 0.065em 0.06em #9ecfff; }

.tri {
  background-color: #75baff; }
  .tri .wrapper {
    background-color: #89c4ff; }
  .tri h3 {
    text-shadow: 0 0.005em #b2d9ff, 0.005em 0 #b2d9ff, 0.005em 0.01em #b2d9ff, 0.01em 0.005em #b2d9ff, 0.01em 0.015em #b2d9ff, 0.015em 0.01em #b2d9ff, 0.015em 0.02em #b2d9ff, 0.02em 0.015em #b2d9ff, 0.02em 0.025em #b2d9ff, 0.025em 0.02em #b2d9ff, 0.025em 0.03em #b2d9ff, 0.03em 0.025em #b2d9ff, 0.03em 0.035em #b2d9ff, 0.035em 0.03em #b2d9ff, 0.035em 0.04em #b2d9ff, 0.04em 0.035em #b2d9ff, 0.04em 0.045em #b2d9ff, 0.045em 0.04em #b2d9ff, 0.045em 0.05em #b2d9ff, 0.05em 0.045em #b2d9ff, 0.05em 0.055em #b2d9ff, 0.055em 0.05em #b2d9ff, 0.055em 0.06em #b2d9ff, 0.06em 0.055em #b2d9ff, 0.06em 0.065em #b2d9ff, 0.065em 0.06em #b2d9ff; }

.cetri {
  background-color: #89c4ff; }
  .cetri .wrapper {
    background-color: #9ecfff; }
  .cetri h3 {
    text-shadow: 0 0.005em #c6e3ff, 0.005em 0 #c6e3ff, 0.005em 0.01em #c6e3ff, 0.01em 0.005em #c6e3ff, 0.01em 0.015em #c6e3ff, 0.015em 0.01em #c6e3ff, 0.015em 0.02em #c6e3ff, 0.02em 0.015em #c6e3ff, 0.02em 0.025em #c6e3ff, 0.025em 0.02em #c6e3ff, 0.025em 0.03em #c6e3ff, 0.03em 0.025em #c6e3ff, 0.03em 0.035em #c6e3ff, 0.035em 0.03em #c6e3ff, 0.035em 0.04em #c6e3ff, 0.04em 0.035em #c6e3ff, 0.04em 0.045em #c6e3ff, 0.045em 0.04em #c6e3ff, 0.045em 0.05em #c6e3ff, 0.05em 0.045em #c6e3ff, 0.05em 0.055em #c6e3ff, 0.055em 0.05em #c6e3ff, 0.055em 0.06em #c6e3ff, 0.06em 0.055em #c6e3ff, 0.06em 0.065em #c6e3ff, 0.065em 0.06em #c6e3ff; }

.pet {
  background-color: #9ecfff; }
  .pet .wrapper {
    background-color: #b2d9ff; }
  .pet h3 {
    text-shadow: 0 0.005em #dbedff, 0.005em 0 #dbedff, 0.005em 0.01em #dbedff, 0.01em 0.005em #dbedff, 0.01em 0.015em #dbedff, 0.015em 0.01em #dbedff, 0.015em 0.02em #dbedff, 0.02em 0.015em #dbedff, 0.02em 0.025em #dbedff, 0.025em 0.02em #dbedff, 0.025em 0.03em #dbedff, 0.03em 0.025em #dbedff, 0.03em 0.035em #dbedff, 0.035em 0.03em #dbedff, 0.035em 0.04em #dbedff, 0.04em 0.035em #dbedff, 0.04em 0.045em #dbedff, 0.045em 0.04em #dbedff, 0.045em 0.05em #dbedff, 0.05em 0.045em #dbedff, 0.05em 0.055em #dbedff, 0.055em 0.05em #dbedff, 0.055em 0.06em #dbedff, 0.06em 0.055em #dbedff, 0.06em 0.065em #dbedff, 0.065em 0.06em #dbedff; }

.kraj {
  background-color: #b2d9ff; }
  .kraj .wrapper {
    background-color: #c6e3ff; }
  .kraj h3 {
    text-shadow: 0 0.005em #eff7ff, 0.005em 0 #eff7ff, 0.005em 0.01em #eff7ff, 0.01em 0.005em #eff7ff, 0.01em 0.015em #eff7ff, 0.015em 0.01em #eff7ff, 0.015em 0.02em #eff7ff, 0.02em 0.015em #eff7ff, 0.02em 0.025em #eff7ff, 0.025em 0.02em #eff7ff, 0.025em 0.03em #eff7ff, 0.03em 0.025em #eff7ff, 0.03em 0.035em #eff7ff, 0.035em 0.03em #eff7ff, 0.035em 0.04em #eff7ff, 0.04em 0.035em #eff7ff, 0.04em 0.045em #eff7ff, 0.045em 0.04em #eff7ff, 0.045em 0.05em #eff7ff, 0.05em 0.045em #eff7ff, 0.05em 0.055em #eff7ff, 0.055em 0.05em #eff7ff, 0.055em 0.06em #eff7ff, 0.06em 0.055em #eff7ff, 0.06em 0.065em #eff7ff, 0.065em 0.06em #eff7ff; }

.nula {
  background-color: #389cff; }
  .nula .wrapper {
    background-color: #4ca6ff; }

.jedan h2 {
  font-style: italic;
  text-shadow: 0 0.005em #89c4ff, 0.005em 0 #89c4ff, 0.005em 0.01em #89c4ff, 0.01em 0.005em #89c4ff, 0.01em 0.015em #89c4ff, 0.015em 0.01em #89c4ff, 0.015em 0.02em #89c4ff, 0.02em 0.015em #89c4ff, 0.02em 0.025em #89c4ff, 0.025em 0.02em #89c4ff, 0.025em 0.03em #89c4ff, 0.03em 0.025em #89c4ff, 0.03em 0.035em #89c4ff, 0.035em 0.03em #89c4ff, 0.035em 0.04em #89c4ff, 0.04em 0.035em #89c4ff, 0.04em 0.045em #89c4ff, 0.045em 0.04em #89c4ff, 0.045em 0.05em #89c4ff, 0.05em 0.045em #89c4ff, 0.05em 0.055em #89c4ff, 0.055em 0.05em #89c4ff, 0.055em 0.06em #89c4ff, 0.06em 0.055em #89c4ff, 0.06em 0.065em #89c4ff, 0.065em 0.06em #89c4ff;
  /*
  .065em .070em $shade,
  .070em .065em $shade,
  .070em .075em $shade,
  .075em .070em $shade,
  .075em .080em $shade,
  .080em .075em $shade,
  .080em .085em $shade,
  .085em .080em $shade,
  .085em .090em $shade,
  .090em .085em $shade,
  .090em .095em $shade,
  .095em .090em $shade,
  .095em .100em $shade,
  .100em .095em $shade,
  .100em .105em $shade,
  .105em .100em $shade,
  .105em .110em $shade,
  .110em .105em $shade;
  */ }

@media only screen and (min-width: 668px) and (max-width: 820px) {
  .wrapper {
    margin: 0 3em;
    padding: 2em; } }
@media only screen and (min-width: 821px) {
  body {
    font-size: 18px; }

  h1 {
    font-size: 60px; }

  h2 {
    font-size: 48px; }

  h3 {
    font-size: 40px; }

  h4 {
    font-size: 32px; }

  .wrapper {
    margin: 0 auto;
    padding: 2em;
    width: 600px; }

  .quote {
    padding-left: 50px; }
    .quote + p {
      padding-left: 50px; }
    .quote::before {
      color: #4ca6ff;
      content: '\201C';
      float: left;
      font-size: 200%;
      margin-left: -60px;
      margin-top: -20px; } }