/*
@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}
*/

body {
  font-family: 'Roboto', sans-serif;
  background-color: #101010;
  color: white;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

nav ul li.active {
  background-color: rgba(255,255,255,0.1);
}

nav ul li:hover {
  background-color: rgba(255,255,255,0.1);
}

/*.topmenu > .btn {
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 20px;
  padding-right: 20px;
}

.topmenu{
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
  margin: auto;
}*/

.center-cropped {
  width: 100px;
  height: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 2px 2px 2px 2px;
}

/*@media all and (orientation:portrait) {
  .topmenu > .btn {
    width: 49%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .topmenu > .btn > i{
    padding: 2;
  }
}*/

.logo {
  image-rendering: pixelated;
  display: inline;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 20px;
  padding-bottom: 20px;
  max-width: 800px;
  width: 80%;
  height: auto;
}

/*.brand-logo {
  image-rendering: pixelated;
  width: 60%;
  background-image: url("logoHoriz.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: inherit;
}*/

/*
@media all and (orientation:portrait) {
  .logo {
    width: 100%;
    height: auto;
  }
}

@media all and (orientation:landscape) {
  .logo {
    --sizeMod: 3;
    height: auto;
    width: 164px;
    width: calc(var(--sizeMod) * 164px);
  }
}*/

.footer-copyright{
  background-color: #181818 !important;
}

* { box-sizing: border-box; }

/* ---- grid ---- */

.grid {
  /*background: #DDD;*/
  width: 100%;
  --gridSize: 200px;
  --gutterSize: 20px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

/* 5 columns, percentage width */

@media all and (orientation:portrait) {
  .grid-item,
  .grid-sizer {
    width: 100%;
    height: auto;
  }
}

@media all and (orientation:landscape) {
  .grid-item,
  .grid-sizer {
    width: 90px;
    width: var(--gridSize);
  }
  
  .grid-item {
    float: left;
    --grid-width: 1;
    --grid-height: 1;
    height: 90px;
    width: calc(calc(var(--gridSize) * var(--grid-width)) + calc(var(--gutterSize) * calc(var(--grid-width) - 1)));
    height: calc(calc(var(--gridSize) * var(--grid-height)) + calc(var(--gutterSize) * calc(var(--grid-height) - 1)));
    margin: 0px !important;
  }
}

.gutter-sizer {
  width: 10px;
  width: var(--gutterSize);
}

/*
.grid-item--width2 {
  width: 190px;
  width: calc(calc(var(--gridSize) * 2) + var(--gutterSize));
}
.grid-item--height2 {
  height: 190px;
  height: calc(calc(var(--gridSize) * 2) + var(--gutterSize));
}
*/
/*
.grid-item,
.grid-sizer {
  width: 90px;
  width: calc(var(--gridSize) - var(--gutterSize));
}

.grid-item {
  float: left;
  height: 90px;
  height: calc(var(--gridSize) - var(--gutterSize));
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.gutter-sizer {
  width: 10px;
  width: var(--gutterSize);
}

.grid-item--width2 {
  width: 190px;
  width: calc(calc(var(--gridSize) * 2) - var(--gutterSize));
}
.grid-item--height2 {
  height: 190px;
  height: calc(calc(var(--gridSize) * 2) - var(--gutterSize));
}
*/