@font-face {font-family: 'Stolzl-Book';src: url('/images/front/3AB011_0_0.woff2') format('woff2'),url('/images/front/3AB011_0_0.woff') format('woff');}

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

body {
  --color-grey: white ;/*#d8e2e8;*/
  --color-brown: #455b7c;
  --color-darkblue: #0c1122;

  --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;
}

.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: var(--color-darkblue);
}

.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;
}

.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);
}

.header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "left right";
  margin-right: 6rem;
}

.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("/images/logo/SHPS_logo_horizontal_navy.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10.4rem;
  flex: 0 0 12rem;
}

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

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

.section-header .navitem.selected:after {
  content: '';
  width: 6%;
  border-bottom: 3px solid var(--color-brown);  
  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 {
  opacity: 0;
  width:100%;
  height:100vh;
  margin: -66px -16%;
  position: absolute;
  background: url('/images/front/infografika.svg');
  background-repeat: no-repeat;
  background-position: center -166px;
  background-size: 2300px;
  transform: translateY(30px);
}

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

.product-details {
  Xcolor: 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;
}


.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-image: url("/images/logo/SHPS_logo_horizontal_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0;
  width: 238px;
  height: 66px;
}

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

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

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

}

@media (max-width: 1210px) {

  .section-header .navitem.selected:after {
    width: 1%;
  }
    
  .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)
  }

  .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 {
    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 {
    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 {
    opacity: 1;
  }

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

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

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

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

@media (max-width: 1084px) and (orientation: landscape) {
  .second-bg {
    opacity: 1;
    background-color: var(--color-darkblue);
    background: url('/images/front/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%);

  } */

  .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-bg-animate {
    transition: none;
  }

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

}



@media(max-width: 1024px){
  .section.first .main-right {
    display: none;
  }
}

@media(max-width: 425px) {
  
  .section-header {
    Xdisplay: 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('/images/front/TransparentMobileBg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    transform: translateY(40px);
  }

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

.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;
  }
}



.section.second {
  padding: 66px 16% 0%;
}
.second-bg {
  opacity: 1;
  background: url('/images/front/infografika.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  margin: 80px 0 0px 0;
  transform: none;
  width: 80%;
}

.second-bg-en {
  background-image: url('/images/front/infografika_angol.svg');
}

.houseLogo {
  opacity: 1;
  background: url('/images/logo/SHPS_logo_vertical_white.svg');
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
  height: 100%;
  margin: auto;
  transform: none; 
}

.menu {
	display: none;
}
logo2 {
	display: none;
}
@media (max-width:767px){
	.header {
	display: none;
	}
	.language-select {
	display: none;
	}
	div.logo2 {
	  pointer-events: all;
	  background-position: center;
	  background-image: url("/images/logo/SHPS_logo_horizontal_navy.svg");
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 10.4rem;
	  width: 12rem;
	  height: 66px; 	  
	}	
	.logo2 a {
		display: block;
	    width: 100%;
	    height: 100%;
	}
	.active {
    height: 400px; 
    display: block;
	}
	.menu {
	  align-items: center;
	  background-color: #303235;
	  clip-path: polygon(81.05% 9.1%, 92% 9.1%, 92% 10.1%, 81.05% 10.1%);
	  color: #f2f2f2;
	  display: flex;
	  flex-direction: column;
	  font-family: sans-serif;
	  font-size: 28px;
	  position: absolute;
	  top: 0;
	  transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1),
	    background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
       height: 400px;
       top: 0;
       width: 220px;
       right: 0;	  
	}
	.active .menu {
	  background-color: var(--color-darkblue);
	  clip-path: polygon(101% -1%, 101% 101%, -1% 101%, -1% -1%);
	}
	.options {
	  align-items: center;
	  display: flex;
	  flex-direction: column;
	  margin-top: 60px;
	  transform: scale(0.8);
	  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.option {
	  cursor: pointer;
	  margin: 8px 0;
	}
	.option.selected {
	  color: var(--color-brown);
	}
	.active .options {
	  transform: scale(1);
	}
	.menu a  {
		color: var(--color-grey);
	}
	
	.x {
	  pointer-events: none;
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	.top-bars {
	  stroke: #303235;
	  transition: stroke 400ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.active .top-bars {
	  stroke: #f2f2f2;
	}
	.bar {
	  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.bar1 {
	  transform-origin: 190px 20.5px;
	}
	.bar2 {
	  transform-origin: 190px 28.5px;
	}
	.active .bar1 {
	  transform: translateY(8.6px) rotate(45deg);
	}
	.active .bar2 {
	  transform: rotate(-45deg);
	}
	.menu-click-area {
	  cursor: pointer;
	  height: 40px;
	  opacity: 0.3;
	  position: absolute;
	  right: 10px;
	  top: 10px;
	  width: 40px;
	}
}