/* -----  1.1 Font Definitions  --------------------------------------------- */

@font-face {
    font-family: 'Lars Medium Extended Web';
    src: url('../fonts/Lars-MediumExtended.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lars-MediumExtended.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Lars-MediumExtended.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/Lars-MediumExtended.woff') format('woff'); /* Pretty Modern Browsers */
    font-weight: 700;
    font-style: normal;
  }



/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

::-moz-selection {
  background: var(--alt-color);
  color: #000;
  opacity: 1;
}

::selection {
  background: var(--alt-color);
  color: #000;
  opacity: 1;
}

html {
  font-size: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  font-family: 'Lars Medium Extended Web', helvetica, arial, sans-serif;
  color: #000;
  background: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 18px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-overflow-scrolling: touch;
  letter-spacing: .3px;
}

body {
  overflow-y: scroll;

}

:root {
    --alt-color: #000;
}

/* Brun #662100 */
/* Rød #e32321 */
/* Orhcre #b47f2b */
/* Sort #000 */

/* -----  1.3 General Typography  ------------------------------------------- */


h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, pre {
  /* Reset font-sizes and normalize margins */
  font-size: 16px;
  line-height: 18px;
  margin: 0 0 1.5rem;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover, a:focus, a:active {
  color: var(--alt-color);
}

.red {
  color: var(--alt-color);
}


/* -----  Header  ----------------------------------------------------------- */

.header {
  position: absolute;
  width: calc(100% - 80px);
  top: 0;
  left: 0;
  margin: 25px 40px 0 40px;
}

.header-name {
  position: absolute;
  width: 25%;
}

.header-menu {
  position: absolute;
  left: 25%;
}

.header-info-long {
  display: block;
  position: absolute;
  width: 22%;
  right: 0;
}
.header-info-medium {
  display: none;
}

.header-info-short {
  display: none;
}


.header-praksis {
  display: none;
}

.menu-item a:hover, a:focus, a:active {
  border-bottom: none;
  padding-bottom: none;
}

.menu-item a:before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='11' width='11'><circle cx='5.5' cy='5.5' r='4.5' stroke='black' stroke-width='1.5' fill='white' /></svg>") "\00a0 ";
  background-size: 10px 10px;
}

.menu-item:hover a:before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='11' width='11'><circle cx='5.5' cy='5.5' r='4.5' stroke='black' stroke-width='1.5' fill='white' /></svg>") "\00a0 ";
  background-size: 10px 10px;
}

.menu-item.is-active a:before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='11' width='11'><circle cx='5.5' cy='5.5' r='4.2' stroke='black' stroke-width='1.5' fill='black' /></svg>") "\00a0 ";
}

.menu-item.is-active:hover a:before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='11' width='11'><circle cx='5.5' cy='5.5' r='4.2' stroke='black' stroke-width='1.5' fill='black' /></svg>") "\00a0 ";
}



/* -----  Footer  ----------------------------------------------------------- */

.footer {
  position: relative;
  margin: 100px 40px 0 40px;
  width: calc(100%-80px);
  bottom: 30px;
}


.footer-en {
  color: var(--alt-color);
}

/* -----  Project overview  ------------------------------------------------- */

.main {
    margin: 25px 40px 0 40px;
}


.grid {
  margin-top: 290px;
  min-height: 100vh;
}

.grid-item {
  float: left;
}

.gutter-sizer {
  width: 6%;
}

.grid-item--width1 {
  width: 29%;
}

.grid-item--width2 {
  width: 36%;
}

.grid-item--width3 {
    width: 58%;
}

.grid-item img {
  width: 100%;
  height: 100%;
}

strong {
  border-bottom: 2px solid black;
  padding-bottom: 1px;
}

.project-text {
  padding: 10px 0 0 0;
  text-align: center;
}

.project_text {
  margin: 5px 0 0 0;
}

/* -----  Project Indeks  --------------------------------------------------- */

.indeks_table {
  width: 100%;
  position: relative;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.indeks_table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-invisible {
  color: #b9b9b9;
}

.project {
  border-bottom: 2px solid transparent;
}

.project:hover {
  border-bottom: 2px solid #000;
  cursor: pointer;
}

.project-invisible:hover {
  background: #fff;
  border-bottom: 2px solid transparent !important;
  cursor: default !important;
}

.indeks_table th, .indeks_table td {
    text-align: left;
    font-weight: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

.indeks_table tr {
    height: 40px;
    line-height: 1;
}

.indeks_table tbody tr span, .indeks_table thead tr span {
    padding-top: 2px;
}

.indeks_table thead tr span {
  margin-bottom: 30px;
}

.indeks_table span {
    display: inline-block;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.td-title {
  width: 25%;
}

.td-year {
  width: 13%;
}

.td-city {
  width: 17%;
}

.td-client {
  width: 23%;
}

.td-type {
  width: 22%;
}

/* -----  Project Single  --------------------------------------------------- */

.project-single {
  position: relative;
  width: 100%;
}

.project-single h1, .project-single h2 {
  margin: 0 25% 0 25%;
}

.project-single p {
  margin: 0 25% 18px 25%;
}

.project-single a {
  border-bottom: 2px solid #000;
}

.project-single img {
  display: block;
  max-width: 100%;
  max-height: 95vh;
  margin: 90px auto 60px;
}

.project-single-table {
  position: relative;
  border-collapse: collapse;
  margin: 40px 25% 0 25%;
}

.project-single-table th, .project-single-table td {
    text-align: left;
    font-weight: inherit;
    padding: 5px 60px 0 0;
}

.project-single-table tr {
    line-height: 1.4;
}

.project-single-table tbody tr span {
    padding-top: 2px;
}

.project-single-table span {
    display: inline-block;
}

.project-single-table tbody {
    display: table-row-group;
    vertical-align: top;
    border-color: inherit;
}

.areal:after {
  content: " m\00B2";
}

.close {
      cursor: pointer;
      -moz-user-select: -moz-none;
      -ms-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      position: fixed;
      right: 40px;
      top: 30px;
      z-index: 2;
      width: 18px;
      height: 18px;
      background: url(../images/button-close.svg) center no-repeat;
      background-size: 18px;
      text-indent: -9999px;
      opacity: 1;
      -moz-transition: opacity 250ms;
      -o-transition: opacity 250ms;
      -webkit-transition: opacity 250ms;
      transition: opacity 250ms;
}

/* -----  Practice  --------------------------------------------------------- */

.practice {
  margin: 0 0 0 25%;
  display: flex;
}

.practice a {
  border-bottom: 2px solid #000;
}

.practice-main {
  width: 60%;
}

.practice-second {
  width: 40%;
  padding: 0 6% 0 6%;
}

.practice img {
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

/* -----  Media queries  ---------------------------------------------------- */

@media screen and (max-width:1200px) {

  .header-name {
    position: absolute;
    width: 32%;
  }

  .header-menu {
    position: absolute;
    left: 32%;
  }

  .header-info-long {
    display: none;
  }

  .header-info-medium {

    display: block;
    position: absolute;
    width: 22%;
    right: 0;
  }

  .header-info-short {
    display: none;
  }


  .td-title {
    width: 32%;
  }

  .td-year {
    width: 10%;
  }

  .td-city {
    width: 15%;
  }

  .td-client {
    width: 21%;
  }

  .td-type {
    width: 22%;
  }

  .project-single p,   .project-single h1,   .project-single h2 {
    margin: 0 20% 0 20%;
  }

  .project-single-table {
    position: relative;
    border-collapse: collapse;
    margin: 40px 20% 0 20%;
  }

  .practice {
    margin: 0 0 0 32%;
    display: flex;
  }

  .practice-main {
    width: 60%;
  }

  .practice-second {
    width: 40%;
    padding: 0 6% 0 6%;
  }

  .practice-image img {
    max-width: 320px;
    height: auto;
  }

}

@media screen and (max-width:950px) {

  .header-name {
    position: absolute;
    width: 52%;
  }

  .header-menu {
    position: absolute;
    left: 52%;
  }

  .header-info-long {
    display: none;
  }

  .header-info-medium {
    display: none;
  }

  .header-info-short {
    display: block;
    position: absolute;
    width: 26%;
    right: 0;
  }


  .grid-item--width1 {
    width: 47%;
  }

  .grid-item--width2 {
    width: 47%;
  }

  .grid-item--width3 {
    width: 47%;
  }

  .td-title {
    width: 38%;
  }

  .td-year {
    width: 14%;
  }

  .td-city {
    width: 22%;
  }

  .td-client {
    display: none;
  }

  .td-type {
    width: 26%;
  }

  .project-single p,   .project-single h1,   .project-single h2 {
    margin: 0 5% 0 5%;
  }

  .project-single-table {
    position: relative;
    border-collapse: collapse;
    margin: 40px 2% 0 5%;
  }

  .project-single-table th, .project-single-table td {
      text-align: left;
      font-weight: inherit;
      padding: 5px 30px 0 0;
  }

  .practice {
    position: relative;
    width: 100%;
    margin: 230px 0 0 0;
  }

  .practice-main {
    width: 70%;
  }

  .practice-second {
    width: 30%;
    padding: 0 0 0 6%;
  }

  .practice-image img {
    max-width: 320px;
    height: auto;
  }

}

@media screen and (max-width:700px) {

    html, h1, h2, p {
      font-size: 15px;
      line-height: 18px;

    }

    .header {
      position: relative;
      width: calc(100% - 60px);
      top: 0;
      left: 0;
      margin: 25px 30px 0 30px;
    }

    .main {
        margin: 25px 30px 10px 30px;
    }

    .grid {
      margin-top: 70px;
    }

    .header-name {
      position: relative;
      width: 100%;
    }

    .header-menu {
      position: relative;
      width: 100%;
      margin-top: 30px;
      left: 0;
    }

    .header-info-long {
      display: block;
      position: relative;
      margin-top: 30px;
      width: 100%;
      right: 0;
    }

    .header-info-medium {
      display: none;
    }

    .header-info-short {
      display: none;
    }

    .grid-item--width1 {
      width: 100%;
    }

    .grid-item--width2 {
      width: 100%;
    }

    .grid-item--width3 {
        width: 100%;
    }

    .td-title {
      width: 38%;
    }

    .td-year {
      width: 14%;
    }

    .td-city {
      display: none;
    }

    .td-client {
      display: none;
    }

    .td-type {
      width: 26%;
    }

    .project-single-table th, .project-single-table td {
      text-align: left;
      font-weight: inherit;
      padding: 5px 0 0 0;
    }

    .project-single-table th, .project-single-table td {
      display: block;
      text-align: left;
      font-weight: inherit;
      padding: 5px 0 0 0;
    }

    .project-single-table tr {
      line-height: 18px;
    }

    th.td-content {
      padding: 0 0 10px 0 !important;
    }

    .project-single img {
        display: block;
        max-width: 100%;
        max-height: 95vh;
        margin: 60px auto 40px;
    }


    .gutter-sizer {
      width: 15%;
    }

    .practice{
      position: relative;
      width: 100%;
      margin: 0;
      flex-direction: column;
    }

    .practice-main {
      width: 100%;
    }

    .practice-second {
      width: 100%;
      padding: 0;
    }

    .practice-image img {
      max-width: 320px;
      height: auto;
    }


}


@media screen and (max-width:500px) {


  html {
    font-size: 15px;
    line-height: 18px;

  }

  .header {
    position: relative;
    width: calc(100% - 60px);
    top: 0;
    left: 0;
    margin: 25px 30px 0 30px;
  }

  .main {
      margin: 25px 30px 10px 30px;
  }

  .grid {
    margin-top: 70px;
  }

  .header-name {
    position: relative;
    width: 100%;
  }

  .header-menu {
    position: relative;
    width: 100%;
    margin-top: 30px;
    left: 0;
  }

  .header-info-long {
    display: block;
    position: relative;
    margin-top: 30px;
    width: 100%;
    right: 0;
  }

  .header-info-medium {
    display: none;
  }

  .header-info-short {
    display: none;
  }

  .grid-item--width1 {
    width: 100%;
  }

  .grid-item--width2 {
    width: 100%;
  }

  .grid-item--width3 {
      width: 100%;
  }

  .td-title {
    width: 80%;
  }

  .td-year {
    width: 20%;
  }

  .project-single-table th, .project-single-table td {
    text-align: left;
    font-weight: inherit;
    padding: 5px 0 0 0;
  }

  .project-single-table th, .project-single-table td {
    display: block;
    text-align: left;
    font-weight: inherit;
    padding: 5px 0 0 0;
  }

  .project-single-table tr {
    line-height: 18px;
  }

  th.td-content {
    padding: 0 0 10px 0 !important;
  }

  .project-single img {
      display: block;
      max-width: 100%;
      max-height: 95vh;
      margin: 60px auto 40px;
  }

  .td-city {
    display: none;
  }

  .td-client {
    display: none;
  }

  .td-type {
    display: none;
  }

  .gutter-sizer {
    width: 15%;
  }

  .practice {
    position: relative;
    width: 100%;
    margin: 0;
    flex: none;
  }

  .practice-main {
    position: relative;
    width: 100%;
    flex: none;
  }

  .practice-second {
        position: relative;
    width: 100%;
    padding: 0;
        flex: none;
  }

  .practice-image img {
    max-width: 320px;
    height: auto;
  }


}