/*
// make the use of media queries really easy
@include gridle_register_state(mobile, (
  max-width: 980px
));*/
.container:after, .short-container:after, .project-container:after {
  content: "";
  display: table;
  clear: both; }

.short-hr {
  display: inline-block;
  min-height: 1px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
  padding-right: 5px;
  padding-left: 5px; }

@media screen and (max-width: 768px) {
  .short-mydesc, .index-cell {
    display: inline-block;
    min-height: 1px;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    padding-right: 5px;
    padding-left: 5px; } }
@media screen and (min-width: 768px) {
  .index-cell {
    display: inline-block;
    min-height: 1px;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    padding-right: 5px;
    padding-left: 5px; } }
@font-face {
  font-family: 'latoregular';
  src: url("/static/lato-regular-webfont.eot");
  src: url("/static/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/static/lato-regular-webfont.woff2") format("woff2"), url("/static/lato-regular-webfont.woff") format("woff"), url("/static/lato-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
html {
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll; }

body {
  background-color: #2c2c2c;
  font-size: 11pt;
  font-family: 'latoregular', Arial, Helvetica, sans-serif;
  color: #d8d8d8; }

* {
  box-sizing: border-box; }

h1 {
  font-size: 18pt;
  padding: 0; }

h2 {
  font-size: 16pt;
  padding: 0; }

h3 {
  font-size: 14pt;
  padding: 0; }

h4 {
  font-size: 12pt;
  padding: 0; }

h5 {
  font-size: 10pt;
  padding: 0; }

div.p {
  font-size: 11pt;
  margin-bottom: 5px;
  text-align: justify; }
  div.p h2 {
    margin-left: 0; }

ul,
ol {
  margin: 5px 5px 5px 20px;
  list-style-position: outside;
  padding-left: 0; }
  ul li,
  ol li {
    position: relative;
    left: 9px; }

table {
  border-spacing: 0;
  border-collapse: collapse; }

pre {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none;
  color: #d8d8d8; }
  a:hover {
    color: white; }

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  position: relative; }

.short-container {
  max-width: 800px;
  margin: 0 auto;
  padding-left: 10px;
  padding-top: 30px;
  padding-right: 10px;
  position: relative; }

.flags-box {
  position: absolute;
  right: 0; }

.project-container {
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px; }

.short-hr {
  width: 100%;
  margin: 20px 0 20px 0; }
  .short-hr div {
    margin: auto;
    width: 300px;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(216, 216, 216, 0), rgba(216, 216, 216, 0.5), rgba(216, 216, 216, 0)); }

.page-title {
  text-align: center;
  font-weight: bold;
  font-size: 19pt;
  margin: 10px 0 10px 0; }

#header {
  padding-top: 20px;
  text-align: center;
  color: #d8d8d8; }

.img-item td.img-link-cell {
  line-height: 0; }
.img-item td.img-desc-cell {
  font-size: 9pt;
  padding-top: 1px; }
.img-item a {
  box-sizing: content-box;
  display: inline-block;
  border: 1px solid #6b6b6b; }
  .img-item a:hover {
    text-decoration: none;
    border: 1px solid #adadad; }
  .img-item a img {
    display: block; }

.img-group {
  display: inline-flex;
  flex-wrap: wrap; }
  .img-group .img-item {
    margin: 4px; }

.img-gallery {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px; }
  .img-gallery.wborder {
    padding: 2px;
    border: 1px solid #a7a7a7; }

.img-gallery-inline {
  display: inline-block;
  margin: 3px;
  float: left; }
  .img-gallery-inline.wborder {
    padding: 5px;
    border: 1px solid #a7a7a7; }

.img-gallery-center .img-group {
  display: flex;
  justify-content: center; }

.img-gallery-vertical .img-group {
  display: block;
  float: left; }
  .img-gallery-vertical .img-group .img-item {
    padding: 4px 4px 4px; }
    .img-gallery-vertical .img-group .img-item:after {
      clear: both; }

#sidebar {
  color: #d8d8d8; }

#menu {
  margin-top: 20px; }

.menu-item {
  width: 200px;
  text-align: center;
  margin: auto; }
  .menu-item a {
    display: block;
    border-bottom: 3px solid #5a5a5a;
    margin: 5px;
    line-height: 35px;
    font-size: 13pt; }
    .menu-item a:hover {
      border-bottom: 3px solid #acacac; }

.short-mydesc {
  margin: auto;
  margin-top: 30px;
  text-align: justify;
  font-size: 11pt; }
  @media screen and (min-width: 768px) {
    .short-mydesc {
      max-width: 270px; } }
  @media screen and (max-width: 768px) {
    .short-mydesc {
      width: 100%; } }
  .short-mydesc div.p {
    margin-top: 0px;
    margin-bottom: 0;
    padding-top: 0; }

.myinfo {
  width: 255px;
  margin: auto;
  margin-top: 30px; }

@media screen and (max-width: 768px) {
  .index-cell {
    width: 100%; } }
@media screen and (min-width: 768px) {
  .index-cell {
    width: 20%; } }

#page-cv {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #page-cv .cats-wrapper .cat {
    background-color: #4d4d4d;
    border: 1px solid #676767;
    margin-bottom: 4px; }
    #page-cv .cats-wrapper .cat:hover {
      background-color: #555555;
      border: 1px solid #6e6e6e; }
    #page-cv .cats-wrapper .cat .cat-brief {
      cursor: pointer;
      position: relative;
      padding: 5px 0 5px 0; }
      #page-cv .cats-wrapper .cat .cat-brief .cat-name {
        font-size: 13pt;
        color: #f0f0f0;
        padding: 5px 5px 0 5px; }
      #page-cv .cats-wrapper .cat .cat-brief .cat-desc {
        font-style: italic;
        color: #d5d5d5;
        font-size: 10pt;
        padding-top: 2px;
        padding-left: 20px;
        padding-right: 37px;
        padding-bottom: 5px; }
      #page-cv .cats-wrapper .cat .cat-brief .cat-hint {
        color: #c0c0c0;
        font-style: italic;
        font-size: 10pt;
        text-align: right;
        position: absolute;
        right: 50px;
        top: 28px; }
      #page-cv .cats-wrapper .cat .cat-brief .cat-icon {
        height: 30px;
        text-align: center;
        position: absolute;
        right: 5px;
        top: 15px; }
    #page-cv .cats-wrapper .cat .items-wrapper {
      margin-top: 5px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px; }
      #page-cv .cats-wrapper .cat .items-wrapper .item {
        margin-bottom: 3px;
        background-color: #676767;
        border: 1px solid gray; }
        #page-cv .cats-wrapper .cat .items-wrapper .item:hover {
          background-color: #6e6e6e;
          border: 1px solid #888888; }
        #page-cv .cats-wrapper .cat .items-wrapper .item .item-header {
          padding: 5px;
          cursor: pointer; }
          #page-cv .cats-wrapper .cat .items-wrapper .item .item-header .item-name {
            font-size: 11pt;
            color: #f0f0f0;
            margin-bottom: -3px; }
          #page-cv .cats-wrapper .cat .items-wrapper .item .item-header .item-right {
            font-size: 12pt; }
          #page-cv .cats-wrapper .cat .items-wrapper .item .item-header.item_opened .item-name {
            font-weight: bold; }
        #page-cv .cats-wrapper .cat .items-wrapper .item .item-desc {
          padding-left: 5px;
          padding-right: 5px;
          padding-bottom: 2px;
          color: #f0f0f0; }
          #page-cv .cats-wrapper .cat .items-wrapper .item .item-desc .item-desc-info {
            padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            text-indent: 10px; }
          #page-cv .cats-wrapper .cat .items-wrapper .item .item-desc .item-desc-exp {
            text-align: right; }
          #page-cv .cats-wrapper .cat .items-wrapper .item .item-desc a {
            text-decoration: none;
            color: #f0f0f0; }
            #page-cv .cats-wrapper .cat .items-wrapper .item .item-desc a:hover {
              color: white; }
      #page-cv .cats-wrapper .cat .items-wrapper .item-separator {
        font-size: 11pt;
        margin-top: 8px;
        margin-bottom: 3px; }

#page-projects {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #page-projects .filter-filters {
    padding-left: 5px;
    padding-bottom: 2px; }
  #page-projects .projects-wrapper .project-separator {
    margin-top: 10px; }
  #page-projects .projects-wrapper .project {
    background-color: #4d4d4d;
    border: 1px solid #676767;
    margin-bottom: 4px; }
    #page-projects .projects-wrapper .project:hover {
      background-color: #555555;
      border: 1px solid #6e6e6e; }
    #page-projects .projects-wrapper .project .project-brief {
      cursor: pointer;
      position: relative; }
      #page-projects .projects-wrapper .project .project-brief .project-name {
        font-size: 13pt;
        color: #f0f0f0;
        padding: 5px 5px 0 5px; }
      #page-projects .projects-wrapper .project .project-brief .project-desc {
        font-style: italic;
        color: #d5d5d5;
        font-size: 10pt;
        padding-top: 2px;
        padding-left: 20px;
        padding-right: 10px;
        padding-bottom: 5px; }
      #page-projects .projects-wrapper .project .project-brief .project-link {
        font-size: 11pt;
        white-space: nowrap !important;
        text-align: right;
        position: absolute;
        right: 5px;
        top: 7px; }
    #page-projects .projects-wrapper .project .project-content {
      padding-left: 5px;
      padding-right: 5px;
      padding-bottom: 2px; }

#topbar {
  background-color: black;
  position: fixed;
  height: 40px;
  left: 0;
  top: 0;
  right: 0;
  font-size: 13pt;
  z-index: 1;
  /*a {
    text-decoration: none;
    color: $color-white-on-black;

    &:hover {
      font-weight: bold;
    }
  }*/ }
  #topbar #top-back {
    padding-left: 15px; }
    #topbar #top-back a {
      line-height: 40px; }
  #topbar #top-name {
    text-align: center;
    line-height: 40px;
    font-size: 18pt;
    font-weight: bold; }
  #topbar #top-me {
    padding-right: 15px;
    text-align: right;
    line-height: 40px;
    font-weight: bold; }

#project-content {
  margin-top: 45px; }

#page-project .info {
  font-size: 8pt;
  background-color: #4d4d4d;
  padding: 2px;
  border: 1px solid #676767;
  display: table-cell;
  color: #f0f0f0;
  float: right;
  margin: 0 0 5px 5px; }
  #page-project .info > table {
    width: 240px; }
  #page-project .info > table > tbody > tr > td {
    vertical-align: top;
    font-size: 9pt; }
    #page-project .info > table > tbody > tr > td.info-header {
      background-color: #b4b4b4;
      text-align: center;
      font-weight: bold;
      color: #2c2c2c;
      padding: 2px; }
    #page-project .info > table > tbody > tr > td.info-left-cell {
      background-color: #7c7c7c;
      color: #e5e5e5;
      text-align: right;
      padding: 2px 4px 2px 4px; }
    #page-project .info > table > tbody > tr > td.info-right-cell {
      color: #e5e5e5;
      padding: 2px 4px 2px 4px; }

table.mytable {
  font-size: 9pt;
  border: 1px solid gray;
  margin: 3px; }
  table.mytable > tbody > tr > th {
    vertical-align: top;
    background-color: #b4b4b4;
    text-align: center;
    font-weight: bold;
    color: #2c2c2c;
    padding: 2px; }
  table.mytable > tbody > tr > td {
    vertical-align: top;
    color: #e5e5e5;
    padding: 2px 4px 2px 4px; }

div.code {
  border: 1px solid #747474;
  padding: 5px;
  background-color: #363636; }
  div.code .linenos {
    width: 30px;
    color: #ababab; }
  div.code * {
    text-decoration: none !important; }

.mycenter {
  display: flex;
  align-items: center;
  justify-content: center; }

.menu-item-double {
  text-align: center;
  margin: auto; }
  .menu-item-double a {
    display: block;
    border-top: 3px solid #5a5a5a;
    border-bottom: 3px solid #5a5a5a;
    margin: 5px;
    line-height: 35px;
    font-size: 13pt; }
    .menu-item-double a:hover {
      border-top: 3px solid #acacac;
      border-bottom: 3px solid #acacac; }

.myname {
  margin-top: 20px;
  font-size: 20pt;
  color: #ffffff;
  font-weight: bold;
  text-align: center; }

.mydesc {
  margin: auto;
  margin-top: 24px;
  margin-bottom: 10px;
  text-align: justify;
  font-size: 11pt;
  max-width: 500px; }
  .mydesc div.p {
    margin-top: 0px;
    margin-bottom: 0;
    padding-top: 0; }

.info-item {
  margin-top: 10px; }
  .info-item .icon {
    padding: 0;
    padding-right: 5px;
    font-size: 20pt;
    width: 50px;
    text-align: center; }
  .info-item .desc {
    padding: 0;
    font-size: 11pt;
    font-weight: bold; }
  .info-item .content {
    padding: 0;
    font-size: 11pt; }

.see-details {
  text-align: right;
  font-style: italic;
  font-size: 9pt;
  color: #c0c0c0; }

.cat-caret-right,
.cat-caret-down,
.item-caret-right,
.item-caret-down,
.project-caret-right,
.project-caret-down {
  width: 10px;
  text-align: center; }

.review-fa {
  font-size: 20px !important;
  color: #a7a7a7;
  position: absolute; }

div.review {
  padding: 0 0 10px 0; }
  div.review .review-inner {
    padding-left: 28px; }
    div.review .review-inner .client {
      padding: 2px 0;
      color: #a7a7a7; }
      div.review .review-inner .client::before {
        content: '\2014 \00A0'; }
    div.review .review-inner .review-content {
      padding: 2px 0; }
      div.review .review-inner .review-content .fa {
        font-size: 20px; }
      div.review .review-inner .review-content .quote {
        padding: 7px 7px 7px 20px; }
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight_dark .hll { background-color: #404040 }
.highlight_dark .c { color: #999999; font-style: italic } /* Comment */
.highlight_dark .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight_dark .esc { color: #d0d0d0 } /* Escape */
.highlight_dark .g { color: #d0d0d0 } /* Generic */
.highlight_dark .k { color: #6ab825; font-weight: bold } /* Keyword */
.highlight_dark .l { color: #d0d0d0 } /* Literal */
.highlight_dark .n { color: #d0d0d0 } /* Name */
.highlight_dark .o { color: #d0d0d0 } /* Operator */
.highlight_dark .x { color: #d0d0d0 } /* Other */
.highlight_dark .p { color: #d0d0d0 } /* Punctuation */
.highlight_dark .ch { color: #999999; font-style: italic } /* Comment.Hashbang */
.highlight_dark .cm { color: #999999; font-style: italic } /* Comment.Multiline */
.highlight_dark .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
.highlight_dark .cpf { color: #999999; font-style: italic } /* Comment.PreprocFile */
.highlight_dark .c1 { color: #999999; font-style: italic } /* Comment.Single */
.highlight_dark .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
.highlight_dark .gd { color: #d22323 } /* Generic.Deleted */
.highlight_dark .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
.highlight_dark .ges { color: #d0d0d0 } /* Generic.EmphStrong */
.highlight_dark .gr { color: #d22323 } /* Generic.Error */
.highlight_dark .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.highlight_dark .gi { color: #589819 } /* Generic.Inserted */
.highlight_dark .go { color: #cccccc } /* Generic.Output */
.highlight_dark .gp { color: #aaaaaa } /* Generic.Prompt */
.highlight_dark .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
.highlight_dark .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
.highlight_dark .gt { color: #d22323 } /* Generic.Traceback */
.highlight_dark .kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
.highlight_dark .kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
.highlight_dark .kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
.highlight_dark .kp { color: #6ab825 } /* Keyword.Pseudo */
.highlight_dark .kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
.highlight_dark .kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
.highlight_dark .ld { color: #d0d0d0 } /* Literal.Date */
.highlight_dark .m { color: #3677a9 } /* Literal.Number */
.highlight_dark .s { color: #ed9d13 } /* Literal.String */
.highlight_dark .na { color: #bbbbbb } /* Name.Attribute */
.highlight_dark .nb { color: #24909d } /* Name.Builtin */
.highlight_dark .nc { color: #447fcf; text-decoration: underline } /* Name.Class */
.highlight_dark .no { color: #40ffff } /* Name.Constant */
.highlight_dark .nd { color: #ffa500 } /* Name.Decorator */
.highlight_dark .ni { color: #d0d0d0 } /* Name.Entity */
.highlight_dark .ne { color: #bbbbbb } /* Name.Exception */
.highlight_dark .nf { color: #447fcf } /* Name.Function */
.highlight_dark .nl { color: #d0d0d0 } /* Name.Label */
.highlight_dark .nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
.highlight_dark .nx { color: #d0d0d0 } /* Name.Other */
.highlight_dark .py { color: #d0d0d0 } /* Name.Property */
.highlight_dark .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
.highlight_dark .nv { color: #40ffff } /* Name.Variable */
.highlight_dark .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
.highlight_dark .pm { color: #d0d0d0 } /* Punctuation.Marker */
.highlight_dark .w { color: #666666 } /* Text.Whitespace */
.highlight_dark .mb { color: #3677a9 } /* Literal.Number.Bin */
.highlight_dark .mf { color: #3677a9 } /* Literal.Number.Float */
.highlight_dark .mh { color: #3677a9 } /* Literal.Number.Hex */
.highlight_dark .mi { color: #3677a9 } /* Literal.Number.Integer */
.highlight_dark .mo { color: #3677a9 } /* Literal.Number.Oct */
.highlight_dark .sa { color: #ed9d13 } /* Literal.String.Affix */
.highlight_dark .sb { color: #ed9d13 } /* Literal.String.Backtick */
.highlight_dark .sc { color: #ed9d13 } /* Literal.String.Char */
.highlight_dark .dl { color: #ed9d13 } /* Literal.String.Delimiter */
.highlight_dark .sd { color: #ed9d13 } /* Literal.String.Doc */
.highlight_dark .s2 { color: #ed9d13 } /* Literal.String.Double */
.highlight_dark .se { color: #ed9d13 } /* Literal.String.Escape */
.highlight_dark .sh { color: #ed9d13 } /* Literal.String.Heredoc */
.highlight_dark .si { color: #ed9d13 } /* Literal.String.Interpol */
.highlight_dark .sx { color: #ffa500 } /* Literal.String.Other */
.highlight_dark .sr { color: #ed9d13 } /* Literal.String.Regex */
.highlight_dark .s1 { color: #ed9d13 } /* Literal.String.Single */
.highlight_dark .ss { color: #ed9d13 } /* Literal.String.Symbol */
.highlight_dark .bp { color: #24909d } /* Name.Builtin.Pseudo */
.highlight_dark .fm { color: #447fcf } /* Name.Function.Magic */
.highlight_dark .vc { color: #40ffff } /* Name.Variable.Class */
.highlight_dark .vg { color: #40ffff } /* Name.Variable.Global */
.highlight_dark .vi { color: #40ffff } /* Name.Variable.Instance */
.highlight_dark .vm { color: #40ffff } /* Name.Variable.Magic */
.highlight_dark .il { color: #3677a9 } /* Literal.Number.Integer.Long */