/* General */

* {
  margin: 0;
  padding: 0;
}

:root {
  --white: #fff;
  --gray-10: #f3f4f6;
  --gray-20: #e5e7eb;
  --gray-30: #d1d5db;
  --gray-40: #9ca3af;
  --gray-50: #6b7280;
  --gray-60: #4b5563;
  --gray-70: #374151;
  --gray-80: #1f2937;
  --black: #010101;
  --sans: "Lato", sans-serif;
  --mono: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Courier New", monospace;
}

html {
  background-color: var(--white);
  box-sizing: border-box;
  color: var(--gray-80);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.15;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  min-height: 100vh;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

small {
  font-size: 80%;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1.25rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.15rem;
}

h6 {
  font-size: 1rem;
}

a {
  color: var(--black);
  transition: color 300ms;
}

a:hover {
  color: var(--gray-70);
}

p, ul, ol {
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

ul, ol {
  padding-left: 1rem;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  padding: 0.25rem;
}

figure {
  margin-bottom: 1.5rem;
}

figcaption {
  color: var(--gray-70);
  font-style: italic;
  font-size: 90%;
  margin-top: 0.5rem;
  text-align: center;
}

code {
  background-color: var(--gray-10);
  font-family: var(--mono);
  font-size: 87.5%;
  padding: 0 2px;
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.navbar a {
  text-decoration: none;
}

.navbar .logo {
  margin-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar img {
  max-height: 3rem;
  width: auto;
}

.navbar span {
  font-size: 1.5rem;
  letter-spacing: 0.025em;
}

.navbar .nav {
  margin-left: -1rem;
  margin-right: -1rem;
}

.navbar .nav-link {
  display: inline-block;
  padding: 0.75rem 1rem;
  position: relative;
}

.navbar .nav-link::after {
  background-color: transparent;
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  transition: background-color 300ms;
  width: 0.5rem;
  height: 0.5rem;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.navbar .nav-link[aria-current="page"]::after {
  background-color: var(--gray-80);
}

.main {
  margin-bottom: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.page-title {
  margin-bottom: 2rem;
}

.info {
  background-color: var(--gray-10);
  border: 1px solid var(--gray-20);
  padding: 1rem;
}

.pagination {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pagination span,
.pagination a {
  border: 2px solid;
  padding: 0.75rem;
}

.pagination span {
  background-color: var(--gray-10);
  border-color: var(--gray-40);
  color: var(--gray-40);
}

.pagination a {
  background-color: transparent;
  border-color: var(--black);
  color: var(--black);
  text-decoration: none;
  transition: transform 300ms;
}

.pagination-prev:hover {
  transform: translateX(-0.5rem);
}

.pagination-next:hover {
  transform: translateX(0.5rem);
}

.pagination .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.footer {
  border-top: 1px solid var(--gray-30);
  color: var(--gray-70);
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  align-items: center;
  margin-top: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.footer .links,
.footer .social {
  margin: 0.5rem -0.5rem;
}

.footer a {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  text-decoration: none;
}

.footer .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.sr-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

@media (min-width: 620px) {
  body {
    max-width: 620px;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 1.125rem;
  }

  body {
    max-width: 768px;
  }

  .navbar span {
    font-size: 1.75rem;
  }

  .footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 1.25rem;
  }

  body {
    max-width: 1024px;
  }
}

@media (min-width: 1200px) {
  body {
    max-width: 1200px;
  }
}

/** 19 - Social-Icon Integration **/

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?81746158');
  src: url('../fonts/fontello.eot?81746158#iefix') format('embedded-opentype'), url('../fonts/fontello.woff?81746158') format('woff'), url('../fonts/fontello.ttf?81746158') format('truetype'), url('../fonts/fontello.svg?81746158#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?81746158#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-eventbrite:before { 
  content: '\e800'; } /* '' */
.icon-ebay:before { 
  content: '\e802'; } /* '' */
.icon-cloudapp:before { 
  content: '\e806'; } /* '' */
.icon-email:before { 
  content: '\e807'; } /* '' */
.icon-goo:before { 
  content: '\e808'; } /* '' */
.icon-cc:before { 
  content: '\e809'; } /* '' */
.icon-reddit:before { 
  content: '\e80a'; } /* '' */
.icon-spotify:before { 
  content: '\e80b'; } /* '' */
.icon-call:before { 
  content: '\e80c'; } /* '' */
.icon-gplus:before { 
  content: '\e80d'; } /* '' */
.icon-bitcoin:before { 
  content: '\e80e'; } /* '' */
.icon-stackoverflow:before {
  content: '\e80f'; } /* '' */
.icon-stripe:before { 
  content: '\e810'; } /* '' */
.icon-scribd:before { 
  content: '\e811'; } /* '' */
.icon-rss:before { 
  content: '\e812'; } /* '' */
.icon-globe:before { 
  content: '\e813'; } /* '' */
.icon-heart:before { 
  content: '\e814'; } /* '' */
.icon-heart-filled:before { 
  content: '\e815'; } /* '' */
.icon-star:before { 
  content: '\e816'; } /* '' */
.icon-star-filled:before { 
  content: '\e817'; } /* '' */
.icon-star-half:before { 
  content: '\e818'; } /* '' */
.icon-twitter-1:before { 
  content: '\e819'; } /* '' */
.icon-skype-1:before { 
  content: '\e81a'; } /* '' */
.icon-star-empty:before { 
  content: '\e81b'; } /* '' */
.icon-vk:before { 
  content: '\e81c'; } /* '' */
.icon-youtube:before { 
  content: '\e81e'; } /* '' */
.icon-vimeo:before { 
  content: '\e81f'; } /* '' */
.icon-windows:before { 
  content: '\e820'; } /* '' */
.icon-star-1:before { 
  content: '\e821'; } /* '' */
.icon-heart-empty:before { 
  content: '\e822'; } /* '' */
.icon-heart-1:before { 
  content: '\e823'; } /* '' */
.icon-soundcloud:before { 
  content: '\f089'; } /* '' */
.icon-star-half-alt:before { 
  content: '\f123'; } /* '' */
.icon-facebook-rect:before { 
  content: '\f301'; } /* '' */
.icon-twitter:before { 
  content: '\f302'; } /* '' */
.icon-github-1:before { 
  content: '\f308'; } /* '' */
.icon-googleplus-rect:before { 
  content: '\f309'; } /* '' */
.icon-youtube-1:before {
  content: '\f313'; } /* '' */
.icon-linkedin-rect:before { 
  content: '\f31b'; } /* '' */
.icon-instagram:before { 
  content: '\f31e'; } /* '' */