@font-face {
  font-family: 'Barriecito';
  src: url('../fonts/Barriecito-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'TruculentaRegular';
  src: url('../fonts/TruculentaOriginal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* color schemes */
.color1 header h1 { color: #F88B0D; }
.color1 section { background-color: #FDD7AB; }
.color1 .button,
.color1 .uk-close { background-color: #F88B0D; }
.color1 .uk-modal-dialog { background-color: #FDD7AB; }
.color1 .uk-table-divider > :first-child > tr:not(:first-child), 
.color1 .uk-table-divider > :not(:first-child) > tr, 
.color1 .uk-table-divider > tr:not(:first-child) { border-color: #F88B0D; }
.color1 .uk-hr, .color1 hr { border-color: #F88B0D; }

.color2 header h1 { color: #19b5c6; }
.color2 section { background-color: #b5ecf2; }
.color2 .button,
.color2 .uk-close { background-color: #19b5c6; }
.color2 .uk-modal-dialog { background-color: #b5ecf2; }
.color2 .uk-table-divider > :first-child > tr:not(:first-child), 
.color2 .uk-table-divider > :not(:first-child) > tr, 
.color2 .uk-table-divider > tr:not(:first-child) { border-color: #19b5c6; }
.color2 .uk-hr, .color2 hr { border-color: #19b5c6; }


/* general */
html { background:#fff; font-size:22px; }
body {
  color:#333;
  font-size:1em;
  line-height: 1.333em;
  font-family: "TruculentaRegular", sans-serif;
  font-weight: 100;
  font-style: normal;
}
h1, h2 {
  color:#333;
  font-size:1.333em;
  text-transform:uppercase; 
  font-family: "Barriecito", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1em;
  margin: 0;
}
a {
  text-decoration: underline;
  color: #333;
}
a:hover {
  text-decoration: none;
  color: #333;
}
a.button:hover,
button.button:hover { color:#fff; background-color: #333; }
.button { padding: 0.25em 0.75em; color: #fff; display: inline-block; font-family: TruculentaRegular; text-decoration:none; margin-bottom: 0.2em; }
.uk-hr, hr { margin: 1em 0; }


/* structure */
header { padding:2em 0; }
header h1 { padding-right: 0.5em; margin-bottom: 0.5em; }
header img { max-height: 9.5em; }
section { padding:2em 0; margin-bottom: 2em; }
.uk-slider { margin: 2em 0; }
.credit { text-align:right; font-size:22px; padding-right:15px; }


/* form */
.uk-legend { font-size:1.5em; }
.uk-modal-full .uk-modal-dialog { min-height: 100vh; }
.uk-close { color: #fff; }
.uk-close:hover { color: #fff; background-color: #333; }
.uk-modal .uk-container { padding-top: 1em; padding-bottom: 1em; }
.uk-input, .uk-select, .uk-textarea { border:none; color: #333; }
.uk-modal .button { font-size:1.333em; border: 0; }
.uk-modal button:hover { cursor:pointer; }
form p, form .uk-margin { line-height: 1.1em; }
fieldset .uk-margin { overflow:hidden; }
.uk-form-label { font-size:1em; line-height: 1.1em; }
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked { background-color: #333 !important; }
.uk-checkbox:focus, .uk-radio:focus { background-color:rgba(255,255,255,0.5); }
.uk-checkbox, .uk-radio { background-color: #fff; border: none; height: 0.75em; width: 0.75em; background-size: 90%; }


/* responsive  */
@media (min-width: 480px) {
  h1, h2 { font-size:1.75em; }
}
@media (min-width: 640px) {/* uikit s */
  html { font-size:28px; }
}
@media (min-width: 960px) {/* uikit m */
  html { font-size:34px; }
}
@media (min-width: 1200px) {/* uikit l */
  html { font-size:40px; }
  .uk-modal { font-size: 34px; }
}
@media (min-width: 1600px) {/* uikit xl */
  section { margin-right: auto; margin-left: auto; width: calc(1280px + 2em); }
}