/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3ab011");

@font-face {font-family: 'Stolzl-Book';src: url('../static/3AB011_0_0.eot');src: url('../static/3AB011_0_0.eot?#iefix') format('embedded-opentype'),url('../static/3AB011_0_0.woff2') format('woff2'),url('../static/3AB011_0_0.woff') format('woff'),url('../static/3AB011_0_0.ttf') format('truetype');}

* {
  box-sizing: border-box;
  font-family: 'Stolzl-Book';
}

body {
  --color-grey: #F2F1Eb;
  --color-light-blue: #EAEAEA;
  --color-brown: #C8BBA7;
  --color-darkblue: #2F3743;

  --font-lg: 46px;
  --font-md: 32px;
  --font-sm: 20px;
  --font-xs: 15px;

  --line-height-lg: 1.27;
  --line-height-sm: 1.17;

  box-sizing: border-box;
  margin: 0;
  position: relative;
}

@media (min-width: 2400px) {
  
  .product-grid {
    left: 6vw;
    position: relative;
  }
}


.section.first {
  display: block;
  min-height: calc(100vh - 66px);
  background-color: var(--color-grey);
}

.logo a {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

.description {
  background-color: var(--color-grey);
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 22px;
}

.description h1 {
  font-size: var(--font-lg);
  line-height: var(--line-height-sm);
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 0;
}

.description p {
  font-size: var(--font-sm);
  line-height: var(--line-height-lg);
  text-align: right;
  padding-left: 40px;
}

.relative{
  position: relative;
}

.house {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url("../static/HAZ.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 75%;
  margin-left: 18px;
}

.house-offset-animate {
  transition: transform ease-out 0.4s, background-position ease-out 0.4s;
}

.static-house {
  display: none;
}

.section-header {
  display: grid;
  height: 66px;
  grid-template-columns: 1fr;
  grid-template-rows: 66px;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 4;
}

.section.first {
  display: block;
  min-height: calc(100vh - 66px);
}

.helper, .header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right";
}

.main {  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "main-left main-right";
  min-height: calc(100vh - 66px);
}

.col-left {
  display: grid;
  grid-area: left;
  grid-template-columns: 1fr 1fr 1fr;
}

.col-right {
  display: grid;
  grid-area: right;
  grid-template-columns: 1fr 1fr 1fr;
}

.main-left {
  display: grid;
  grid-area: main-left;
  grid-template-columns: 1fr 1fr;
}

.main-right {
  display: grid;
  grid-area: main-right;
  grid-template-columns: 500px 1fr;
}

.header div {
  align-items: center;
  height: 100%;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.header .col-left div {
  width: 100%;
}

.blue {
  background-color: var(--color-darkblue);

}

.header .col-right .blue {
  background-color: var(--color-darkblue);
  color: var(--color-grey);
}

.header .col-left div.logo {
  background-position: center;
  background-image: url("../static/CASPLogo.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 45%;
}

.header .col-left div.logo a {
  background-color: transparent;
}

.section-header .navitem.selected {
  color: var(--color-brown);
}

.section-header .navitem.selected:after {
  content: '';
  width: 7%;
  border-bottom: 3px solid #C8BBA7;
  border-radius: 10%;
  margin-left: 10px;
  height: 1px;
  display: inline-block;
  position: absolute;
  transform: translateY(7px);
}

.section.second,
.section.third,
.section.fourth {
  padding: 66px 16% 5%;
  min-height: 100vh;
}

.section-title {
  display: inline-block;
  font-size: 32px;
}

.section-title-index {
  vertical-align: super;
  font-size: 20px;
  transform: translateY(-10px);
  display: inline-block;
}

.section.second .section-title,
.section.second .section-title-index,
.section.fourth .section-title,
.section.fourth .section-title-index  {
  color: var(--color-grey);
}

.section.second {
  background-color: var(--color-darkblue);
}

.second-bg.second-bg-active{
  opacity: 1;
  transform: translateY(0);
}

.second-bg-animate {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.second-bg {
  opacity: 0;
  width:100%;
  height:100vh;
  margin: -66px -16%;
  position: absolute;
  background: url('../static/product-bg-test.svg');
  background-repeat: no-repeat;
  background-position: center -166px;
  background-size: 2300px;
  transform: translateY(30px);
}

.second-lines.second-lines-active{
  opacity: 1;
}

.second-lines-animate {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.second-lines {
  opacity: 0;
  position: absolute;
  margin: 17px -16%;
  width: 100%;
  height: 100vh;
  background: url('../static/lines.png');
  background-repeat: no-repeat;
  background-position: center -156px;
  background-size: 2300px;
  transform: translate(0px, -255px);
}

.product-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 50%;
  /* FIX */
  width: 44%;
  grid-column-gap: 7px;
}

.product-description {
  display: inline-block;
  color: var(--color-grey);
  border: 1px solid var(--color-grey);
  padding: 5px;
  position: relative;
  z-index: 3;
}

.product-details {
  color: var(--color-grey);
  font-size: var(--font-xs);
}
@media (min-width:1210px){
  .product-details {
    font-size: var(--font-sm);
  }
}
.section.second.features {
  min-height: initial;
}

.product-details-list {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10%;
  grid-row-gap: 2em;
  list-style-type: square;
}


@media (max-width:767px){
  .product-details-list {
    grid-template-columns: 1fr;
  }
}

@media (min-width:1024px) {
  .product-details {
    margin-left: 5rem;
    margin-right: 5rem;
  }
}

@media (min-width:1600px) {
  .product-details {
    margin-left: 12rem;
    margin-right: 12rem;
  }
}

.section.third {
  background-color: var(--color-grey);
  color: var(--color-darkblue);
}

.section.third .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  grid-gap: 10%;
}

.section.third .grid-item-title {
  font-size: var(--font-lg);
  margin-top: 0;
  line-height: 0.98;
  padding-right: 20%;
}

.section.third .grid-item-text {
  font-size: var(--font-sm);
  margin-top: 0;
  padding-left: 12%;
}

.section.fourth {
  background-color: var(--color-darkblue);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.awards {
  height: 230px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.climate_launchpad {
  background: url('../static/climate_launchpad.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.besmartx {
  background: url('../static/besmartx.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.wmn {
  background: url('../static/wmn.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.finnova {
  background: url('../static/finnova.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.contact-label {
  color: var(--color-grey);
  font-size: var(--font-lg);
}

.contact-email {
  display: block;
  color: var(--color-grey);
  text-decoration: none;
  font-size: var(--font-sm);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 60px;
}

.footer .logo {
  display: inline-block;
  background: url('../static/CASPLogo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0;
  width: 134px;
  height: 50px;
}

.footer .date {
  display: inline-block;
  font-size: var(--font-sm);
}

@media (max-width: 1799px) and (min-width: 1575px) {

  .house {
    width: 92%;
    margin-left: 25px;
    background-size: 80%;
  }

  .second-bg {
    margin: -26px -16%;
    background-size: 2120px;
  }

  .second-lines {
    margin: 59px -16%;
    background-size: 2120px;
  }
}

@media (max-width: 1574px) and (min-width: 1333px) {

  .product-grid {
    position: relative;
    width: 50%;
    left: -9vw;
  }
}

@media (max-width: 1332px) and (min-width: 1211px) {
  .product-grid {
    position: relative;
    width: 51%;
    left: -13vw;
    min-width: 520px;
  }
}


@media (max-width: 1210px) {

  .section.first,
  .section.third,
  .section.third .grid,
  .section.first .col-first,
  .section.first .col.second {
    display: block;
  }
  
  .section.second,
  .section.third,
  .section.fourth {
    padding-top: 66px;
  }

  .section.first{
    min-height: auto;
  }

  .section-title, .section-title-index {
    font-size: var(--font-sm)
  }

  .product-grid {
    grid-template-rows: auto auto auto;
    grid-gap: 10px;
  }

  .section.third .grid-item-title {
    padding-right: 0;
  }

  .section.first h1,
  .section.third .grid-item-title {
    font-size: 22px;
  }
  
  .section.first .main,
  .main-left {
    grid-template-columns: 1fr;
  }
  
  .section.first .main-left div:first-child,
  .section.first .main-right {
    display: none;
  }
  
  .section.first .main {
    min-height: 50vh;
  }

  .section.first p {
    font-size: var(--font-sm);
  }

  .section.first .description {
    text-align: center;
  }

  .section.first .description p {
    padding: 0;
    text-align: center;
  }

  .second-bg.second-bg-active,
  .second-lines.second-lines-active {
    opacity: 0;
  }

  .description {
    padding: 10%;
  }

  .section.first .description p,
  .section.third .grid .grid-item-text {
    font-size: var(--font-xs);
  }

  .awards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin-bottom: 30px;
  }

  .contact-label {
    font-size: var(--font-sm);
  }

  .contact-email {
    font-size: var(--font-xs);
  }

  .footer .logo {
    height: 30px;
    background-position: left;
  }
}


@media(max-width: 1210px) and (orientation: landscape) {

  .second-bg.second-bg-active,
  .second-lines.second-lines-active {
    opacity: 1;
  }

  .second-bg.second-bg-active {
    transform: translateY(17px);
  }

  .section.second {
    min-height: 90vh;
  }

  .second-lines-animate {
    transition: none;
  }

  .product-description {
    position: relative;
    z-index: 2;
    background-color: var(--color-darkblue);
  }

  .second-lines {
    background: url('../static/lines.png');
    background-repeat: no-repeat;
    margin: 43px -23%;
    opacity: 1;
    background-size: 110%;
    background-position: -78% 0;
  }

  .second-bg {
    opacity: 1;
    background-color: var(--color-darkblue);
    background: url('../static/product-bg.svg');
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: 0 0;
    margin: -66px -16%;
    transform: translateY(17px);
  }

  .product-grid {
    width: 53%;
    align-items: end;
    position: relative;
    top: 30px;
    left: 47px;
  }
  
}

@media (max-width: 1084px) and (orientation: landscape) {
  .second-bg {
    opacity: 1;
    background-color: var(--color-darkblue);
    background: url('../static/product-bg.svg');
    background-repeat: no-repeat;
    background-size: 114%;
    background-position: 30% 0;
    /* transform: translateY(30px); */

    /* transform: translateY(4%); */
  }

  /* .second-bg,
  .second-bg.second-bg-active  {
    transform: translateY(3%);

  } */

  .second-lines {
    background: url('../static/lines.png');
    background-repeat: no-repeat;
    margin: 36px -16%;
    opacity: 1;
    background-size: 114%;
    background-position: 24% 0;
  }

  .product-grid {
    width: 57%;
    align-items: end;
    position: relative;
    top: 30px;
    left: 0;
  }

  .product-description {
    position: relative;
    z-index: 2;
    background-color: var(--color-darkblue);
  }
}

@media(max-width: 1024px) and (orientation: landscape) {
  .second-bg,
  .second-bg.second-bg-active  {
    transform: translateY(30px);
  }
}

@media(max-width: 1024px) and (orientation: portrait) {
  .section-header .navitem.selected:after {
    display: none;
  }
  .second-bg.second-bg-active {
    opacity: 1;
    transform: translateY(0);
  }

  .second-lines-animate,
  .second-bg-animate {
    transition: none;
  }

  .second-bg {
    opacity: 1;
    background-color: var(--color-darkblue);
    background: url('../static/TransparentMobileBg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    transform: translateY(0);
  }
  
  .second-bg__hu {
    background: url('../static/TransparentMobileBg-hu.png');
  }

  .second-lines {
    display: none;
  }

  .product-grid {
    display: none;
  }

}

@media(max-width: 425px) {
  
  .section-header {
    display: none;
  }

  .second-bg.second-bg-active {
    opacity: 1;
    transform: translateY(40px);
  }

  .section.second {
    min-height: 80vh;
  }

  .second-bg {
    opacity: 1;
    background-color: var(--color-darkblue);
    background: url('../static/TransparentMobileBg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    transform: translateY(40px);
  }

  .second-bg__hu {
    background: url('../static/TransparentMobileBg-hu.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
  }

  .second-lines-animate,
  .second-bg-animate {
    transition: none;
  }

  .second-lines {
    display: none;
  }

  .product-grid {
    display: none;
  }

}

.language-select {
  position: fixed;
  top:1.5rem;
  right:1.5rem;
  z-index: 10;
}
.language-select__active {
  font-weight: 600;
}

.language-select__divider {
  margin: 0 0.5rem;
}

@media (max-width:425px) {
  .language-select {
    position: absolute;
  }
}