body {
  --lighter-bluer: hsl(206, 95%, 90%);
  --col1: hsl(197, 100%, 47%); /* hsl(206, 50%, 80%);*/
  --col2: hsl(206, 30%, 70%);
  /*--col3: hsl(206, 100%, 90%);*/
  --col4: hsl(206, 100%, 30%);
  --col5: hsl(206, 0%, 90%);
  --col6: hsl(206, 0%, 97%);
  /*--col7: hsl(206, 0%, 85%);*/
  --datecol: hsl(15, 100%, 40%);
  --headercol: hsl(206, 100%, 100%);
  --font-m: calc(1.3rem + 0.2vw);
  --font-l: calc(1.9rem + 0vw);
  --font-xl: calc(2.5rem + 0.2vw);
  background-color: var(--col4);
  font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol, Noto Color Emoji;
  margin: 0;
  padding: 0;
  text-align: center;
  max-width: 1800px;
}

html {
  margin: auto;
  /* padding: 0;*/
  display: table;
  background-color: #00274f;
}

h1 {
  font-size: var(--font-xl);
}

h2 {
  font-size: var(--font-l);
  font-weight: 600;
  color: hsl(0, 0%, 15%) !important;
  /*padding: 0 100px 50px 100px;*/
}

#maincontainer {
  margin: 0;
  padding: 0;
  text-align: left;
}

#contentcontainer {
  padding: 0;
  max-width: min(1500px, max(1200px, 50vw));
  margin: auto;
}

#bannercontainer {
  background: var(--col2);
  background: url("doc/header-bg.jpg") no-repeat center center;
  background-size: cover;
  height: 400px;
  margin: 0;
  text-align: left;
  /* transform: rotatex(180deg);*/
}

#bannerlogocontainer {
  /* background: url("gen/fhsim-logo-with-text.png") no-repeat center center;*/
  /* width: 300px;
  height: 300px;
  position: relative;
  left: 0px;
  top: 100px;
  margin-right: auto;
  margin-left: 100px;
  margin-bottom: 0px;
  display: block;
  width: 600px;
  margin-left: 100px;
  margin-bottom: 100px;
*/
  padding: 70px;
  display: block;
  width: 800px;
}

#bannerlogo {
  /* background: url("gen/fhsim-logo-with-text.png") no-repeat center center;*/
  /* width: 300px;
  height: 300px;
  position: relative;
  left: 0px;
  top: 100px;
  margin-right: auto;
  margin-left: 100px;
  margin-bottom: 0px;
  display: block;
  width: 600px;
  margin-left: 100px;
  margin-bottom: 100px;
*/
  width: 600px;
}
#tellmemore {
  background: hsla(0, 100%, 40%, 0.7);
  font-size: 24px;
  margin: 20px;
  color: white;
  position: relative;
  top: 40px;
  right: 100px;
  padding: 4px 10px;
}

#banner-heading {
  /* font-family: norse !important;*/
  font-size: 120px;
  font-weight: bold;
  color: var(--headercol);
  padding-top: 80px;
  margin-left: 125px;
  text-align: left;
  transform: rotatex(180deg);
  /*text-shadow: 3px 3px 2px #000, -2px -2px 2px hsl(15, 99%, 77%);*/
}

#banner-subheading {
  color: var(--headercol);
  /*font-family: Georgia !important;*/
  font-weight: 600;
  font-size: 28px;
  margin-left: 50px;
  text-align: left;
  transform: rotatex(180deg);
  /*text-shadow: 0 0 1px #fff;*/
}

#ingress {
  margin: 0;
  padding: 50px 100px 50px 100px;
  /*background-color: var(--col5);*/
  font-size: var(--font-m);
  color: white;
  background-color: #005799;
  font-style: italic;
  font-weight: 600;
}

.features-heading {
  padding-top: 1rem;
  font-size: var(--font-l);
}

.feature-icon {
  color: var(--col1);
}

#features {
  background-color: var(--col6);
}

.row {
  padding: 40px;
  margin: 0;
}

#portfoliorow {
  background-color: var(--col5);
}

.text-lg {
  font-size: var(--font-l);
  font-weight: 300;
}

.text-lead {
  font-size: var(--font-m);
  font-weight: 600;
  color: hsl(0, 0%, 30%);
  padding: 0 100px 50px 100px;
}

#availabilityrow {
  background-color: var(--col6);
}

.availability-img {
  /*min-height: max(400px, 30vw);*/
  background-size: cover;
}

.availability-text {
  padding: min(20px, 4vw);
  /*background-color: var(--col7);*/
}

.availability-img {
  min-height: 300px;
}

.availability {
  padding-top: 10px;
  font-style: oblique;
  font-size: var(--font-m);
}

.availabilitydate {
  font-style: oblique;
  color: var(--datecol);
}

.portfolio-clients-list {
  text-align: left;
  margin-bottom: 20px;
}

.portfolio-clients-heading {
  font-weight: 600;
  font-size: var(--font-l);
  margin-top: 20px;
}

.portfolio-caption-heading {
  font-weight: 600;
  font-size: var(--font-m);
}

.portfolio-long {
  padding-top: 30px;
  text-align: left;
}

#portfolio .portfolio-item {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-btn-info {
  background-color: var(--col4);
}

#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  margin: 0 auto;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background: hsla(206, 100%, 50%, 0.6);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity ease-in-out 0.25s;
}

#portfolio
  .portfolio-item
  .portfolio-link
  .portfolio-hover
  .portfolio-hover-content {
  font-size: var(--font-m);
  color: white;
}

#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
  opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-img {
  min-height: min(300px, max(200px, 30vw));
  background-size: cover;
}

#team {
  background: var(--col5);
}

.footer {
  /*position: sticky;*/
  /*top: 40px;*/
  width: 100%;
  font-size: var(--font-l);
}

#copyright {
  color: hsl(6, 80%, 30%);
  font-size: var(--font-m);
  position: relative;
  top: 4px;
  margin-left: 20px;
  margin-right: 20px;
}

#updated {
  text-align: right;
  font-size: 14px;
  display: inline;
}

.sintef-footer {
  background-color: var(--col6);
  font-size: 20px;
}
.sintef-footer .list-inline-item {
  margin: 30px;
  /*   position: relative;
   bottom: 30px;*/
}