@import url('https://fonts.googleapis.com/css?family=Rokkitt:500|Roboto:300');

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
  display: none !important;
}

/* NO SCRIPT */
noscript {
  display: block;

  background-color: #600;
  color: #fff;
}

noscript .row {
  padding-top: 32px;
  padding-bottom: 32px;
}

noscript .boss {
  padding-bottom: 32px;
}

body {
  font-size: 18px;
  min-width: 320px;
}

img,
object,
video {
  max-width: 100%;
}


.gallery {}

.gallery-row {}

.gallery .gallery-row img,
.gallery .gallery-row object,
.gallery .gallery-row video {
  max-width: 33%;
}

/* GENERAL */
.alert,
.btn,
code,
.form-control,
.input-group-addon,
pre {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.img-border {
  border: 4px solid #ccc;
  margin: 16px 0;
}

/* FORM CONTROLS */
.help-block {
  color: #aaa;
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 8px;
}

label {
  font-size: 18px;
}

/* CODE */
pre, code { padding: 4px; };
pre code { padding: 0; }

/* COLOURS */
.home:hover        { color: #4bdd4b!important; }
.gitlab:hover      { color: #fca327!important; }
.github:hover      { color: #000000!important; }
.rss:hover         { color: #ff6600!important; }
.twitter:hover     { color: #4099ff!important; }

a, a:hover, a:active, a:visited, a:focus {
  color: inherit;
  text-decoration: none;
}
a.btn-default { color: inherit; }

/* NAVBAR */
.navbar-brand > img {
  height: 48px;
}

.navbar-icon-button {
  cursor: pointer;
}

.navbar-icon-button,
.navbar-icon {
    display: inline-block;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 8px;
    padding-right: 8px;
}

.navbar-brand,
.nav-link,
.navbar-text {
  font-weight: bold;
}

.navbar-toggler {
  border: none;
  font-size: inherit;
  padding: 1rem;
}

.nav-icons {
  padding-top: 4px;
}

.theme-dark .navbar {
  background-color: #111!important;
}
.theme-dark .navbar-brand {
  color: #fff;
}
.theme-dark .navbar-icon,
.theme-dark .navbar-icon-button,
.theme-dark .navbar-nav .nav-link,
.theme-dark .navbar-text {
  color: rgba(255,255,255,.75);
}
.theme-dark .navbar-nav .nav-item.active,
.theme-dark .navbar-nav .nav-link:focus,
.theme-dark .navbar-nav .nav-link:hover {
  color: rgba(255,255,255,.95);
}
.theme-dark .navbar-nav .active>.nav-link,
.theme-dark .navbar-nav .nav-link.active,
.theme-dark .navbar-nav .nav-link.show,
.theme-dark .navbar-nav .show>.nav-link {
  color: rgba(255,255,255,.95);
}

.theme-dark .navbar-toggler {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.25);
}

.theme-light .navbar {
  background-color: #f4f4f4!important;
}
.theme-light .navbar-brand {
  color: rgba(0,0,0,.95);
}
.theme-light .navbar-icon,
.theme-light .navbar-icon-button,
.theme-light .navbar-nav .nav-link,
.theme-light .navbar-text {
  color: rgba(0,0,0,.7);
}
.theme-light .navbar-nav .nav-link:focus,
.theme-light .navbar-nav .nav-link:hover {
  color: rgba(0,0,0,.95);
}
.theme-light .navbar-nav .active>.nav-link,
.theme-light .navbar-nav .nav-link.active,
.theme-light .navbar-nav .nav-link.show,
.theme-light .navbar-nav .show>.nav-link {
  color: rgba(0,0,0,.95);
}

.theme-light .navbar-toggler {
  color: rgba(0,0,0,.5);
  border-color: rgba(0,0,0,.1);
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  font-weight: bold;
}

.logo-cursor {
  display: inline-block;
  width: 10px;
  height: 1rem;
  margin-left: 4px;
  border-radius: 1px;
  -webkit-animation: cursor 1s infinite;
  animation: cursor .75s infinite;
}

.theme-dark .logo-cursor {
  background: #fb4;
}

.theme-light .logo-cursor {
  background: #48f;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.logo-text {
}

@keyframes cursor {
  0% {opacity: 0}
  50% {opacity: 1}
  to {opacity: 0}
}

@media (max-width: 576px) {
  .nav-icons {
    padding-top: 0;
  }

  .nav-item {
    text-align: center;
  }
}

/* TYPOGRAPHY */

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

body.theme-dark {
  background-color: #222;
  color: #fcfcfc;
}

body.theme-light {
  background-color: #fcfcfc;
  color: #424242;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Rokkitt', serif;
  font-weight: bold;
}

h2, .h2 {
  font-size: 24px;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark .h1,
.theme-dark .h2,
.theme-dark .h3,
.theme-dark .h4,
.theme-dark .h5,
.theme-dark .h6 {
  color: #fefefe;
}

.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light h5,
.theme-light h6,
.theme-light .h1,
.theme-light .h2,
.theme-light .h3,
.theme-light .h4,
.theme-light .h5,
.theme-light .h6 {
  color: #444;
}

p {
  margin-bottom: 16px;
  text-align: justify;
}

p.statement {
  font-size: 32px;
  margin: 64px inherit;
  text-align: center;
}

p.subtitle {
  font-size: 12px;
  margin-top: -4px;
}

.tooltip {
  font-size: 14px;
}

/* HEADER */
#banner {
  background-color: #444;
  min-height: 256px;
  padding: 42px 16px;
  text-align: center;
}

#banner h1 {
  margin: 0;
  padding: 0;
}

/* PAGE CONTENT WRAPPERS */
.page-content {
  margin: 0 auto;
  max-width: 1170px;
  overflow: hidden;
  z-index: 1024;
}

.page-content .container {
  margin-top: 32px;
}

.page-container {
}

/* FOOTER */
footer {
  margin-top: 64px;
  padding: 32px;
  position: relative;
}

footer .copyright,
footer .copyright a {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

footer .cc-by-sa > img {
  height: 24px;
  margin-top: -4px;
}

footer .cc-by-sa > span {
  margin-left: 8px;
}

footer .admin {
  bottom: 4px;
  padding-top: 8px;
  position: absolute;
  right: 4px;
}

footer .admin svg {
  position: relative;
  right: 2px;
  width: 8px;
}

.theme-dark footer .admin {
  color: #444;
}

.theme-dark footer {
  background-color: #111!important;
}

.theme-dark footer .cc-by-sa > img {
  filter: invert(1);
}

.theme-light footer .admin {
  color: #ddd;
}

.theme-light footer {
  background-color: #f4f4f4!important;
}

.theme-light footer .cc-by-sa > img {
}

/* TIMELINE */
.list-timeline {
  border-left: 1px solid #444;
  list-style: none;
  margin-left: 32px;
  padding-left: .725em;
}

.list-timeline .fa-li {
}

.list-timeline li .fa-li,
.list-timeline li .li-body h2 {
  -webkit-transition: color .3s ease;
  -moz-transition: color .3s ease;
  transition: color .3s ease;
}

.list-timeline li .li-body {
  margin-left: 16px;
  margin-top: -28px;
}

.list-timeline li .li-body h2 {
  margin: 0;
}

.list-timeline li .li-body .period {
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  margin-top: 2px;
  margin-bottom: 8px;
  position: relative;
}

.theme-dark .list-timeline li .fa-li {
  color: #444;
}

.theme-dark .list-timeline li:hover .fa-li,
.theme-dark .list-timeline li:hover .li-body h2 {
  color: #fb4;
}

.theme-dark .list-timeline li .clear {
  color: #222;
}

.theme-light .list-timeline li .fa-li {
  color: #444;
}

.theme-light .list-timeline li:hover .fa-li,
.theme-light .list-timeline li:hover .li-body h2 {
  color: #48f;
}

.theme-light .list-timeline li .clear {
  color: #fcfcfc!important;
}

/* ADMIN */
.login-logo {
  margin-bottom: 48px;
  text-align: center;
}

.login-form {
  margin-top: 48px;
}

/* POSTS/BLOG */
.theme-dark .post-content a {
  color: #fb4;
}

.theme-light .post-content a {
  color: #48f;
}

.post-tags {
  font-size: 12px;
  margin-bottom: 16px;
}

.post-tags .post-tag+.post-tag:before {
  content: ", ";
}

/* CONTACT */
.contact-map,
.contact-map iframe {
  border: 0;
  height: 384px;
  margin: 0 0 64px 0;
  width: 100%;
}

.contact-map .overlay {
  background: rgba(0,0,0,.3);
  border: 0;
  height: 384px;
  margin-top: -480px;
  position: relative;
  top: 384px;
  width: 100%;
}

.contact-media {
  display: inline-block;
  min-height: 80px;
  min-width: 172px;
  margin-bottom: 0;
  vertical-align: top;
}
.contact-media .contact-icon {
  float: left;
  height: 80px;
  padding-top: 4px;
  padding-right: 8px;
}
.contact-media .contact-icon a {
  color: #f8f8f8;
}
.contact-media .contact-title {
  font-size: 20px;
  font-weight: bold;
}
.contact-media .contact-handle {
  font-size: 16px;
}
.contact-media .contact-handle a {
  color: #ddd;
}

address {
  font-size: 16px;
}


/*
** PROJECTS
*/
.theme-dark .project-content a {
  color: #fb4;
}

.theme-light .project-content a {
  color: #48f;
}

.project-feature {
  height: 640px;
  margin-bottom: 16px;
  object-fit: cover;
  width: 100%;
}

.project-gallery {
  margin-bottom: 16px;
}

.project-thumb {
  border: 4px solid #444;
  margin-bottom: 16px;
}

.container-project {
  padding: 32px;
  position: relative;
}

@media (max-width: 1199.98px) {
  height: 480px;
}

@media (max-width: 991.98px) {
  .project-feature { height: 300px; }
}

@media (max-width: 767.98px) {
  .project-feature { height: 200px; }
}

@media (max-width: 575.98px) {
  .project-feature { height: 200px; }
}

/*
** REFERENCE
*/
.reference-content a {
  color: #fb4;
}


/*
** CALENDAR
*/
:root {
  --square-size: 16px;
  --square-gap: 2px;
  --week-width: calc(var(--square-size) + var(--square-gap));
}

.activity-calendar {
  display: inline-grid;
  grid-template-areas: "empty months"
                       "days squares";
  grid-template-columns: auto 1fr;
  grid-gap: 8px;
  margin: 16px 16px 64px 16px;
}

.activity-calendar .months {
  grid-area: months;
  display: grid;
  grid-gap: var(--square-gap);
  grid-template-columns: repeat(52, var(--square-size));
  line-height: var(--square-size);
  margin-bottom: 0;
}

.activity-calendar .days {
  grid-area: days;
  line-height: var(--square-size);
  text-align: center;
}

.activity-calendar .squares {
  grid-area: squares;
}

.activity-calendar .days,
.activity-calendar .squares {
  display: grid;
  grid-gap: var(--square-gap);
  grid-template-rows: repeat(7, var(--square-size));
  margin-bottom: 0;
}

.activity-calendar .squares {
  grid-auto-flow: column;
  grid-auto-columns: var(--square-size);
}

.activity-calendar ol,
.activity-calendar ul {
  list-style: none;
  padding-left: 0;
}

.activity-calendar .days li:nth-child(odd) {
  visibility: hidden;
}

.activity-calendar .squares li.offset { background: none; }

.tooltip-inner div {
  font-weight: bold;
  font-size: 12px;
}

.tooltip-inner div+div {
  font-weight: normal;
}

.theme-dark .activity-calendar .squares li { background-color: #444; }

.theme-dark .activity-calendar .squares li[data-level="1"] { background-color: hsl(0, 46%, 81%); }
.theme-dark .activity-calendar .squares li[data-level="2"] { background-color: hsl(0, 46%, 74%); }
.theme-dark .activity-calendar .squares li[data-level="3"] { background-color: hsl(0, 46%, 67%); }
.theme-dark .activity-calendar .squares li[data-level="4"] { background-color: hsl(0, 46%, 60%); }
.theme-dark .activity-calendar .squares li[data-level="5"] { background-color: hsl(0, 46%, 53%); }
.theme-dark .activity-calendar .squares li[data-level="6"] { background-color: hsl(0, 46%, 46%); }
.theme-dark .activity-calendar .squares li[data-level="7"] { background-color: hsl(0, 46%, 39%); }
.theme-dark .activity-calendar .squares li[data-level="8"] { background-color: hsl(0, 46%, 32%); }
.theme-dark .activity-calendar .squares li[data-level="9"] { background-color: hsl(0, 46%, 25%); }

.theme-light .activity-calendar .squares li { background-color: #ebedf0; }

.theme-light .activity-calendar .squares li[data-level="1"] { background-color: hsl(120, 46%, 81%); }
.theme-light .activity-calendar .squares li[data-level="2"] { background-color: hsl(120, 46%, 74%); }
.theme-light .activity-calendar .squares li[data-level="3"] { background-color: hsl(120, 46%, 67%); }
.theme-light .activity-calendar .squares li[data-level="4"] { background-color: hsl(120, 46%, 60%); }
.theme-light .activity-calendar .squares li[data-level="5"] { background-color: hsl(120, 46%, 53%); }
.theme-light .activity-calendar .squares li[data-level="6"] { background-color: hsl(120, 46%, 46%); }
.theme-light .activity-calendar .squares li[data-level="7"] { background-color: hsl(120, 46%, 39%); }
.theme-light .activity-calendar .squares li[data-level="8"] { background-color: hsl(120, 46%, 32%); }
.theme-light .activity-calendar .squares li[data-level="9"] { background-color: hsl(120, 46%, 25%); }

/*
** PORTAL
*/

.portal-jump {
  color: inherit;
  background-color: inherit;
  border: none;
  outline: none;
  text-align: center;
  width: 100%;
}