@font-face {



  font-family: 'PF Din';



  src: url('PFDinDisplayPro-Light.eot');



  src: url('PFDinDisplayPro-Light.eot?#iefix') format('embedded-opentype'),



  url('PFDinDisplayPro-Light.woff') format('woff'),



  url('PFDinDisplayPro-Light.ttf') format('truetype');



  font-weight: 300;



  font-style: normal;



}



@font-face {



    font-family: 'PF Din';



    src: url('PFDinDisplayPro-Regular.eot');



    src: url('PFDinDisplayPro-Regular.eot?#iefix') format('embedded-opentype'),



    url('PFDinDisplayPro-Regular.woff') format('woff'),



    url('PFDinDisplayPro-Regular.ttf') format('truetype');



    font-weight: 400;



    font-style: normal;



}



@font-face {



  font-family: 'PF Din';



  src: url('PFDinDisplayPro-Italic.eot');



  src: url('PFDinDisplayPro-Italic.eot?#iefix') format('embedded-opentype'),



  url('PFDinDisplayPro-Italic.woff') format('woff'),



  url('PFDinDisplayPro-Italic.ttf') format('truetype');



  font-weight: 400;



  font-style: italic;



}



@font-face {



  font-family: 'PF Din';



  src: url('PFDinDisplayPro-Medium.eot');



  src: url('PFDinDisplayPro-Medium.eot?#iefix') format('embedded-opentype'),



  url('PFDinDisplayPro-Medium.woff') format('woff'),



  url('PFDinDisplayPro-Medium.ttf') format('truetype');



  font-weight: 500;



  font-style: normal;



}



@font-face {



    font-family: 'PF Din';



    src: url('PFDinDisplayPro-Bold.eot');



    src: url('PFDinDisplayPro-Bold.eot?#iefix') format('embedded-opentype'),



    url('PFDinDisplayPro-Bold.woff') format('woff'),



    url('PFDinDisplayPro-Bold.ttf') format('truetype');



    font-weight: 700;



    font-style: normal;



}



html, body, div, span, applet, object, iframe,



h1, h2, h3, h4, h5, h6, p, blockquote, pre,



a, abbr, acronym, address, big, cite, code,



del, dfn, em, img, ins, kbd, q, s, samp,



small, strike, strong, sub, sup, tt, var,



b, u, i, center,



dl, dt, dd, ol, ul, li,



fieldset, form, label, legend,



table, caption, tbody, tfoot, thead, tr, th, td,



article, aside, canvas, details, embed,



figure, figcaption, footer, header, hgroup,



menu, nav, output, ruby, section, summary,



time, mark, audio, video {



    margin: 0;



    padding: 0;



    border: 0;



    vertical-align: baseline;



}



* {



    box-sizing: border-box;



}



article, aside, details, figcaption, figure,



footer, header, hgroup, menu, nav, section {



    display: block;



}



body {



    line-height: 1;



    font-family: 'PF Din', sans-serif;



    color: #24243A;



}



ol, ul {



    list-style: none;



}



blockquote, q {



    quotes: none;



}



table {



    border-collapse: collapse;



    border-spacing: 0;



}



html {



    scroll-behavior: smooth;



}



section {



    width: 100%;



    min-height: 100vh;



}



.container {



    width: 75rem;



    margin: 0 auto;



}



.firstSlide {



    background: linear-gradient(180deg, rgba(242, 246, 255, 0) 50%, rgba(242, 246, 255, 0.163007) 82.93%, rgba(242, 246, 255, 0.81) 100%);



    height: 100vh;



    padding-top: 7rem;



    min-height: auto;



}



header {



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



    position: absolute;



    padding-top: 4rem;



    top: 0;



    left: 0;



    width: 100%;



    background: #fff;



    transition: all 0.2s ease-in-out;



    height: 8rem;



    box-shadow: 6px 16px 32px rgba(19, 28, 84, 0.00000001);



}



header.fixed {



    position: fixed;



    top: 0;



    padding-top: 0;



    left: 0;



    background-color: #fff;



    z-index: 1000;



    height: 4rem;



    box-shadow: 6px 16px 32px rgba(19, 28, 84, 0.12);



}



header .container {



    display: flex;



    flex-direction: row;



    justify-content: space-between;



    align-items: center;



}



.headerMenu {



    display: flex;



    flex-direction: row;



    justify-content: flex-end;



    align-items: center;



    height: 3rem;



}



.menuItem {



    margin-left: 2.5rem;



    height: 3rem;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: space-between;



    color: #24243A;



    transition: all 0.2s ease-in-out;



    text-decoration: none;



}



.menuItem:hover {



    color: #3AB73A;



}



.droppable {



    position: relative;



    cursor: pointer;



}



.floatingLangSelect {



    display: none;



}



.droppable svg {



    margin-left: 0.5rem;



    margin-top: 3px;



    transition: all 0.2s ease-in-out;



}



.dropdown {



    display: flex;



    flex-direction: column;



    position: absolute;



    left: -2rem;



    top: 3rem;



    opacity: 0;



    pointer-events: none;



    transition: all 0.2s ease-in-out;



    z-index: 10;



    background-color: #fff;



    padding: 0 2rem;



    border-radius: 0 0 1rem 1rem;



}



.droppable:hover .dropdown {



    opacity: 1;



    pointer-events: auto;



}



.droppable:hover svg {



    transform: rotate(180deg);



}



.dropdown a {



    margin-bottom: 1rem;



    color: #24243A;



    text-decoration: none;



    transition: all 0.2s ease-in-out;



}



.dropdown a:hover {



    color: #3AB73A;



}



.menuItem.button {



    background-color: #F2F6FF;



    padding: 0 1.5rem;



    border-radius: 1rem;



}



.menuItem.button:hover {



    color: #24243A;



    background-color: #e9eefa;



}



.menuItem.button svg {



    margin-right: 0.5rem;



}



.fsBody {



    height: calc(100vh - 12rem);



    margin-top: 2rem;



    width: 100%;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



}



.fsBodyContent {



    width: calc(75rem / 2);



    display: flex;



    flex-direction: column;



    justify-content: flex-start;



    align-items: flex-start;



}



.fsNotebook {



    width: 37rem;



    height: 28rem;



    position: relative;



    perspective: 24rem;



}



.fsNoteScreen {



    position: absolute;



    right: 1rem;



    top: 0.45rem;



    width: 24rem;



    height: 19.25rem;



    z-index: 1;



    transform: skewX(-2deg) rotateX(0deg) rotateY(-3deg);



    transform-style: preserve-3d;



    background-image: url("/images/bg_video.png");



    background-size: cover;



    background-repeat: no-repeat;



    background-position: left top;



}



.fsNotebookBody {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-image: url("/images/fs-notebook.png");



    background-repeat: no-repeat;



    background-size: contain;



    z-index: 2;



}



.fsNotebookPlant {



    width: 11rem;



    height: 11rem;



    background-image: url("/images/fs-plant.png");



    background-repeat: no-repeat;



    background-size: contain;



    position: absolute;



    bottom: 2rem;



    right: -6rem;



    z-index: 3;



}



.fsBodyHeading {



    font-size: 3.5rem;



    text-transform: uppercase;



    margin-bottom: 2rem;



    line-height: 4rem;



    letter-spacing: 3px;



    font-weight: 700;



}



.fsBodyHeading span {



    color: #3AB73A;



    display: block;



}



.fsBodySubHeading {



    font-size: 1.25rem;



    line-height: 1.75rem;



    color: #8389AA;



    margin-bottom: 4rem;



}



.fsBodySubHeading span {



    color: #24243A;



    font-weight: 700;



}



.fsButtonContainer {



    display: flex;



    flex-direction: row;



    justify-content: flex-start;



    align-items: center;



}



.productsButton, .ssConsultButton, .footerFormButton {



  font-size: 1rem;



    height: 3rem;



    padding: 0 2rem;



    background: linear-gradient(180deg, #2D3A6E 0%, #131C54 100%);



    border-radius: 16px;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



    color: #fff;



    text-decoration: none;



    margin-right: 2rem;



    transition: all 0.2s ease-in-out;



    border: none;



}



.productsButton svg, .ssConsultButton svg {



    margin-right: 0.75rem;



}



.productsButton:hover, .ssConsultButton:hover, .footerFormButton:hover {



    filter: brightness(1.3);



    cursor: pointer;



}



.aboutButton, .ssDetailsButton {



    height: 3rem;



    padding: 0 2rem;



    background: #F2F6FF;



    border-radius: 16px;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



    color: #24243A;



    transition: all 0.2s ease-in-out;

}



.aboutButton:hover, .ssDetailsButton:hover {



    background-color: #e9eefa;



}



.aboutButton svg, .ssDetailsButton svg {



    margin-right: 0.75rem;



}



.secondSlide .container {



    display: flex;



    flex-direction: row;



    justify-content: center;



    align-items: center;



    height: calc(100vh - 4rem);



    padding-top: 4rem;



}



.ssPicture {



    margin-top: 2rem;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: flex-start;



}



.ssNotebook {



    width: 32rem;



    height: 22rem;



    position: relative;



}



.ssNotebookBody {



    position: absolute;



    z-index: 3;



    top: 0;



    left: 0;



    background-image: url("/images/ss-notebook.png");



    background-repeat: no-repeat;



    background-size: contain;



    width: 32rem;



    height: 22rem;



}



.ssNoteScreen {



    position: absolute;



    z-index: 2;



    top: 0.2rem;



    left: 3.1rem;



    background-image: url("/images/bg_video.png");



    background-size: cover;



    background-repeat: no-repeat;



    background-position: left top;



    width: 23.15rem;



    height: 15.9rem;



}



.scrollCTA {



    color: #8389AA;



    margin-top: 1.5rem;



}



.ssContent {



    width: 26rem;



    margin-left: 8rem;



    display: flex;



    flex-direction: column;



    align-items: flex-start;



    justify-content: flex-start;



}



.ssBodyHeading {



    font-size: 2.25rem;



    text-transform: uppercase;



    font-weight: 700;



    margin-bottom: 2rem;



}



.ssBodyHeading span {



    color: #3AB73A;



}



.ssContent p {



    color: #8389AA;



    font-size: 1rem;



    line-height: 1.5rem;



    letter-spacing: 0.6px;



    margin-bottom: 2rem;



}



.ssContent p.ssLead {



    color: #24243A;



}



.ssLead span {



    font-weight: 700;



}



.ssContent p.ssQuote {



    background-color: #F2F6FF;



    border-radius: 1rem;



    padding: 1rem 2rem;



    font-style: italic;



    font-size: 0.875rem;



}



.ssDetailsButton {



    margin-top: 2rem;



}



.thirdScreen {



    background-color: #F2F6FF;



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: flex-start;



    padding-top: 4rem;



}



.tsHeading {



    font-size: 2.25rem;



    text-transform: uppercase;



    font-weight: 700;



    margin-bottom: 2rem;



}



.tsHeading span {



    color: #3AB73A;



}



.tsSubHeading {



    font-size: 1.25rem;



    color: #8389AA;



    line-height: 1.5rem;



}



.productsCarousel {



    display: flex;



    flex-direction: row;



    justify-content: center;



    /* align-items: center; */



    height: fit-content;



    padding-bottom: 5rem;



}



.product {



    width: calc(20% + 1rem);



    transition: all 0.2s linear;



    min-height: 100%;



}



.product:hover {



    width: calc(20% + 3rem);



}



.productContainer {



    margin: 1rem;



    padding: 2rem 2rem 0 2rem;



    height: 100%;



    text-decoration: none;



    border-radius: 1.5rem;



    background: linear-gradient(180deg, #FDFEFF 0%, #F8F9FD 100%);



    box-shadow: 6px 16px 32px rgba(19, 28, 84, 0.12);



    /*transform: scale(0.8);*/



}



.productIcon {



    background-image: url('/images/folder.png');



    background-size: contain;



    background-repeat: no-repeat;



    height: 3rem;



    width: 3rem;



    margin: 1rem 0;



    filter: saturate(0);



    transition: all 0.2s linear;



}



.product:hover .productIcon {



    height: 6rem;



    width: 6rem;



    filter: saturate(1);



}



.productFakeLink {



    color: #8389AA;



    font-size: 0.75rem;



    font-weight: 500;



    transition: all 0.2s linear;



    text-decoration: none;



}



.product:hover .productFakeLink {



    font-size: 1rem;



}



.productName {



    font-size: 1.25rem;



    color: #24243A;



    font-weight: 500;



    transition: all 0.2s linear;



}



.product:hover .productName {



    font-size: 1.5rem;



}



.productName span {



    color: #3AB73A;



    font-size: 1.25rem;



    transition: all 0.2s linear;



}



.product:hover .productName span {



    font-size: 1.5rem;



}



.product p {



    font-size: 0.75rem;



    line-height: 1rem;



    margin: 1rem 0;



    color: #24243A;



    transition: all 0.2s linear;



}



.product:hover p {



    font-size: 1rem;



    line-height: 1.5rem;



}



.product ul {



    color: #8389AA;



    font-size: 0.75rem;



    line-height: 1rem;



    list-style-type: disc;



    max-height: 20rem;



    overflow: hidden;



    opacity: 1;



    transition: all 0.1s linear;



}



.product:hover ul {



    max-height: 0;



    opacity: 0;



}



.product ul li {



    margin-left: 0.875rem;



    max-width: calc(100% - 0.875rem);



}



.productDetailsButton {



    height: 0;



    padding: 0 2rem;



    background: #F2F6FF;



    border-radius: 16px;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



    text-decoration: none;



    color: #131C54;



    width: 100%;



    transition: opacity 0.2s linear;



    font-size: 1rem;



    opacity: 0;



    overflow: hidden;



    margin-top: 1rem;



    transition-delay: 0.2s;



}



.product:hover .productDetailsButton {



    height: 3rem;



    opacity: 1;



}



.productDetailsButton:hover {



    background-color: #e9eefa;



}



.productDetailsButton svg {



    height: 1.25rem;



    width: auto;



    margin-right: 1rem;



    flex-shrink: 0;



}



.productSection {



    display: flex;



    flex-direction: row;



    justify-content: center;



    align-items: center;



    background: linear-gradient(180deg, rgba(242, 246, 255, 0) 50%, rgba(242, 246, 255, 0.163007) 82.93%, rgba(242, 246, 255, 0.81) 100%);



    padding-top: 4rem;



}



.psPicturesPart {



    width: 50%;



    display: flex;



    flex-direction: row;



    flex-wrap: wrap;



    justify-content: flex-end;



    align-items: center;



}



.psHighslide,



.psSquare,



.pstvRect,



.psLongRect {



    position: relative;



    overflow: hidden;



    border-radius: 1.25rem;



    margin: 1rem;



    height: 12rem;



    flex-shrink: 0;



}



.psHighslide img,



.psSquare img,



.pstvRect img,



.psLongRect img {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: 3;



    object-fit: cover;



    object-position: center;



}



.psHighslide:after,



.psSquare:after,



.pstvRect:after,



.psLongRect:after {



    content: '';



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: 4;



    /* background: linear-gradient(180deg, #3AB73A 0%, #438840 100%); */



    opacity: 0.25;



    /*mix-blend-mode: multiply;*/



}



.psTwoVertical {



    display: flex;



    flex-direction: column;



    margin-right: -4rem;



}



.psHighslide {



    height: 23.75rem;



    width: 15.25rem;



    margin-top: 3rem;



    margin-left: 12rem;



}



.psSquare {



    width: 12rem;



}



.pstvRect {



    width: 16rem;



}

.psLongRect {



    width: 23rem;

}



#land .psHighslide,



#bot .psHighslide {



    margin-top: 1rem;



    margin-bottom: 3rem;



}



#land .psLongRect,



#bot .psLongRect {



    margin-left: 10rem;



}



#online .psTwoVertical {

    align-items: flex-end;

}



#online .psTwoVertical .psLongRect:nth-of-type(1) {

    margin-right: 4rem;

}



.psTextPart {



    width: 50%;



    padding-left: 8rem;



}



.psHeading {



    font-size: 3.5rem;



    color: #24243A;



    margin-bottom: 1rem;



    font-weight: 700;



}



.psHeading span {



    color: #3AB73A;



}



.psSubHeading {



    font-size: 1.25rem;



    line-height: 1.75rem;



    color: #24243A;



    margin-bottom: 1rem;



    max-width: 25rem;



}



.psTextPart p {



    font-size: 1.25rem;



    line-height: 1.75rem;



    color: #8389AA;



    max-width: 25rem;



}



.psTextPart ul {



    color: #8389AA;



    font-size: 1rem;



    line-height: 1rem;



    list-style-type: disc;



    overflow: hidden;



    transition: opacity 0.1s linear;



    padding-left: 2px;



}



.psTextPart ul li {



    margin-left: 0.875rem;



    max-width: calc(100% - 0.875rem);



    line-height: 1.2;



}



.psButtonContainer {



    margin-top: 3rem;



    display: flex;



    flex-direction: row;



}



.psDetailsButton {



    height: 3rem;



    padding: 0 2rem;



    background: #F2F6FF;



    border-radius: 16px;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



    text-decoration: none;



    color: #131C54;



    transition: all 0.2s linear;



    font-size: 1rem;



    overflow: hidden;



    transition-delay: 0.2s;



}



.psDetailsButton:hover {



    background-color: #e9eefa;



}



.psDetailsButton svg {



    height: 1.25rem;



    width: auto;



    margin-right: 1rem;



    flex-shrink: 0;



}



.psTryButton {



    height: 3rem;



    padding: 0 2rem;



    background: linear-gradient(180deg, #2D3A6E 0%, #131C54 100%);



    border-radius: 16px;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



    color: #fff;



    text-decoration: none;



    margin-right: 2rem;



    transition: all 0.2s ease-in-out;



    cursor: pointer;



}



.psTryButton svg {



    margin-right: 0.75rem;



}



.psTryButton:hover {



    filter: brightness(1.3);



}



.eco,



.project {



    padding: 8rem 0;



    min-height: auto;



}



.eco .container,



.project .container {



    background-color: #F2F6FF;



    border-radius: 2rem;



    display: flex;



    flex-direction: row;



    align-items: flex-start;



    justify-content: space-between;



    min-height: 40vh;



}



.project .container {



    align-items: center;



}



.ecoTextPart,



.projectTextPart {



    width: 50%;



    padding: 4rem 0 4rem 8rem;



    margin: auto 0;



}



.ecoHeading,



.projectHeading {



    font-size: 2.25rem;



    text-transform: uppercase;



    font-weight: 700;



    margin-bottom: 2rem;



}



.ecoHeading span,



.projectHeading span {



    color: #3AB73A;



}



.ecoSubHeading,



.projectSubHeading {



    font-size: 1.25rem;



    line-height: 1.75rem;



    color: #24243A;



    margin-bottom: 2rem;



    max-width: 30rem;



}



.ecoList {



    display: flex;



    flex-direction: column;



    justify-content: flex-start;



    align-items: flex-start;



}



.ecoListItem {



    display: flex;



    flex-direction: row;



    justify-content: flex-start;



    align-items: center;



    margin-bottom: 2rem;



}



.ecoListItem:last-of-type {



    margin-bottom: 0;



}



.ecoIcon {



    background: #FFFFFF;



    box-shadow: 4px 6px 12px rgba(19, 28, 84, 0.1);



    border-radius: 1rem;



    height: 3rem;



    width: 3rem;



    margin-right: 2rem;



    display: flex;



    justify-content: center;



    align-items: center;



}



.ecoIcon svg {



    color: #438840;



    width: 2rem;



    height: 2rem;



}



.ecoListItemText {



    width: 12rem;



}



.ecoPic {



    width: 50%;



    height: 80vh;



    background-image: url("/images/e96fc7fa4f2fb31e8fbfed4cd40c3ae4.png");



    background-repeat: no-repeat;



    background-size: auto 80%;



    background-position: center top;



}



.projectPic {



    width: 50%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



}



.projectPic img {



    mix-blend-mode: darken;



}



footer {



    background-color: #F2F6FF;



    display: flex;



    flex-direction: column;



    align-items: center;



    height: 25rem;



}



footer .container {



    height: 20rem;



    display: flex;



    flex-direction: row;



    padding: 4rem 0;



    box-sizing: border-box;



}



.footerCol {



    width: 25%;



    height: 100%;



    border-left: 1px solid #B2B8CE;



    padding-left: 3rem;



}



.footerCol.fc1 {



    border-left: none;



    padding: 0 3rem 0 0;



}



.footerLogo {



    text-decoration: none;



}



.footerLogo svg {



    width: 10rem;



    height: auto;



}



.logoSlogan {



    font-size: 0.625rem;



    margin-top: 0.25rem;



    letter-spacing: 1px;



    color: #8389AA;



    text-decoration: none;



    margin-bottom: 2rem;



    padding-left: 0.25rem;



}



.writeBack {



    height: 3rem;



    padding: 0 2rem;



    background: #fff;



    border-radius: 16px;



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: center;



    text-decoration: none;



    color: #131C54;



    transition: all 0.2s linear;



    font-size: 1rem;



    overflow: hidden;



    transition-delay: 0.2s;



    width: fit-content;



    cursor: pointer;



    box-shadow: 4px 6px 12px rgba(19, 28, 84, 0.1);



}



.writeBack:hover {



    background-color: #e9eefa;



}



.writeBack svg {



    height: 0.625rem;



    width: auto;



    margin-right: 1rem;



    flex-shrink: 0;



}



.fcHeading {



    display: flex;



    align-items: center;



    letter-spacing: 1px;



    color: #B2B8CE;



    margin-bottom: 2rem;



}



.fcList {



    display: flex;



    flex-direction: column;



    align-items: flex-start;



    justify-content: flex-start;



}



.fcList a {



    color: #24243A;



    text-decoration: none;



    margin-bottom: 1rem;



}



.socialBlock {



    display: flex;



    flex-direction: row;



    align-items: center;



    justify-content: flex-start;



}



.socialBlock a {



    margin-right: 1rem;



}



.socialBlock a svg {



    height: 1.25rem;



    color: #8389AA;



    transition: all 0.2s ease-in-out;



}



.socialBlock a:hover svg {



    color: #2D3A6E;



}



.subFooter {



    background-color: #ECF0FB;



    height: 5rem;



    width: 100%;



}



.subFooter .container {



    display: flex;



    flex-direction: row;



    align-items: center;



    height: 5rem;



    justify-content: space-between;



    color: #8389AA;



    padding: 0;



}



.subFooter a {



    color: #8389AA;



}



.designBy {



    display: flex;



    flex-direction: row;



}



.designBy svg {



    height: 1rem;



    width: auto;



    margin-right: 0.5rem;



}



.mobileHeader {



    display: none;



}



.overlay_popup {

  display:none;

  position:fixed;

  z-index: 999;

  top:0;

  right:0;

  left:0;

  bottom:0;

  background:#000;

  opacity:0.5;

  height: 100vh;

  width: 100vw;

}



.footerPopup {

  display: none;

  position: fixed;

  z-index: 1000;

  width: 30rem;

  height: 30rem;

  top: 50%;

  left: 50%;

  margin-top: -15rem; /* Negative half of height. */

  margin-left: -15rem; /* Negative half of width. */



  background-color: #F2F6FF;

  border-radius: 0.75rem;

  padding: 2rem;

  text-align: center;

}



.footerForm {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin: auto;

}



.footerFormTitle {

  font-size: 2rem;

  padding-bottom: 2rem;

}



.footerFormInput {

    padding: 1rem;

    font-size: 1rem;

    border: none;

    border-radius: 0.5rem;

    margin-bottom: 1rem;

}



.footerFormInput:focus {

  outline: none;

}



.footerFormButton {

  margin-right: 0;

  margin-top: 1rem;

}



@media all and (min-width: 1441px) {



    html, body {



        font-size: 18px;



    }



}



@media all and (max-width: 1368px) {



    html, body {



        font-size: 14px;



    }



}



@media all and (max-width: 1270px) and (orientation: portrait) {



    .container {



        width: 100%;



        padding: 0 2rem;



    }



    section {



        min-height: 50vh;



    }



    .firstSlide {



        min-height: 50vh;



        height: 50vh;



    }



    .fsBody {



        height: 50vh;



        padding: 0 2rem;



    }



    .secondSlide .container {



        height: 50vh;



    }



    .productsCarousel {



        flex-wrap: wrap;



        height: auto;



        padding: 4rem 0;



    }



    .product {



        width: calc(40% + 1rem);



    }



    .psTextPart {



        padding-right: 2rem;



    }



    .psSubHeading, .psTextPart p {



        max-width: none;



    }



    .psHighslide {



        margin-left: 8rem;



    }



    .pstvRect {



        width: 10rem;



    }



    .psLongRect {



        width: 16rem;



    }



    .eco {



        padding: 0;



    }



    .ecoPic {



        height: 40vh;



    }



    footer .container {



        padding: 4rem 2rem;



    }



    footer .subFooter {



        padding: 0 2rem;



    }



}



@media all and (max-width: 800px) {



    .container {



        width: 100%;



    }



    header {



        display: none;



    }



    .floatingLangSelect {



        position: absolute;



        top: 4rem;



        right: 1rem;



        height: 3rem;



        display: flex;



        flex-direction: row;



        align-items: center;



        justify-content: space-between;



        color: #24243A;



        transition: all 0.2s ease-in-out;



        text-decoration: none;



        background-color: #F2F6FF;



        padding: 0 1.5rem;



        border-radius: 1rem;



    }



    .floatingLangSelect .dropdown {



        top: 2rem;



        left: 0;



        align-items: flex-start;



        width: 100%;



        padding: 1rem 0 0 0;



        background-color: #F2F6FF;



        border-radius: 0 0 1rem 1rem;



    }



    .dropdown a {



        margin-bottom: 1rem;



        padding-left: 1.5rem;



    }



    .mobileHeader {



        display: block;



        position: fixed;



        top: 0;



        left: 0;



        width: 100%;



        height: 4rem;



        background-color: #fff;



        z-index: 1000;



    }



    .mobileLogo {



        position: absolute;



        top: 1rem;



        left: calc(50% - 2rem);



        transform: translate(-50%, 0);



    }



    .mobileHeader .button {



        position: absolute;



        right: 1rem;



        top: 0.5rem;



    }



    .mobileHeader .burger {



        position: absolute;



        left: 1rem;



        top: 0;



        width: 4rem;



        height: 4rem;



        z-index: 1001;



    }



    .burger span {



        height: 1px;



        width: 2rem;



        background-color: #24243A;



        transform: rotate(0deg);



        transition: all 0.2s ease-out;



        position: absolute;



        margin-left: 1rem;



        opacity: 1;



        transform-origin: 50% 50%;



    }



    .burger span:nth-of-type(1) {



        top: 35%;



    }



    .burger span:nth-of-type(2) {



        top: 50%;



    }



    .burger span:nth-of-type(3) {



        top: 65%;



    }



    .mobileHeader.open .burger span:nth-of-type(1) {



        top: 50%;



        transform: rotate(45deg);



    }



    .mobileHeader.open .burger span:nth-of-type(2) {



        opacity: 0;



    }



    .mobileHeader.open .burger span:nth-of-type(3) {



        top: 50%;



        transform: rotate(-45deg);



    }



    .mobileHeaderDropdown {



        position: fixed;



        left: 0;



        top: 4rem;



        height: 0;



        width: 100%;



        overflow: hidden;



        background-color: #fff;



        transition: all 0.2s ease-in-out;



        pointer-events: none;



        opacity: 0;



    }



    .mobileHeader.open .mobileHeaderDropdown {



        opacity: 1;



        pointer-events: auto;



        height: calc(100vh - 4rem);



    }



    .mobileHeaderContainer {



        padding: 2rem;



    }



    .mobileHeaderContainer a {



        margin-bottom: 1.5rem;



        color: #24243A;



        text-decoration: none;



        font-size: 1.25rem;



        display: block;



    }



    .mobileLangSelect {



        display: flex;



        flex-direction: row;



        width: 100%;



        padding: 2rem;



        position: absolute;



        bottom: 0;



        left: 0;



        justify-content: space-around;



        align-items: center;



    }



    .mobileLangSelect a {



        font-size: 1.5rem;



        text-decoration: none;



        color: #24243A;



        background-color: #fff;



        box-shadow: 4px 6px 12px rgba(19, 28, 84, 0.1);



        height: 3rem;



        width: 3rem;



        border-radius: 3rem;



        display: flex;



        flex-direction: row;



        align-items: center;



        justify-content: center;



        padding-bottom: 0.25rem;



    }



    .mobileLangSelect a.current {



        background-color: #F2F6FF;



    }



    .firstSlide {



        overflow-x: hidden;



        height: auto;



    }



    .fsBody {



        width: 100%;



        flex-shrink: 0;



        padding: 0 2rem;



        height: calc(100vh - 8rem);



    }



    .fsButtonContainer {



        flex-direction: column;



        align-items: flex-start;



    }



    .aboutButton {



        margin-top: 1rem;



    }



    .fsNotebook {



        width: 0%;



        flex-grow: 0;



    }



    .fsNotebookBody {



        display: none;



    }



    .fsNoteScreen {



        display: none;



    }



    .fsNotebookPlant {



        bottom: -2rem;



    }



    .secondSlide .container {



        height: calc(100vh - 8rem);



    }



    .ssPicture {



        display: none;



    }



    .ssContent {



        width: 100%;



        padding: 2rem 0;



        margin-left: 0;



    }



    .ssDetailsButton {



        margin-top: 1rem;



    }



    .thirdScreen {



        padding: 6rem 0 2rem 0;



        min-height: auto;



    }



    .productsCarousel {



        flex-direction: column;



        height: auto;



        display: none;



    }



    .product {



        width: 100%;



    }



    .productSection {



        flex-direction: column-reverse;



        padding: 2rem;



    }



    .psPicturesPart {



        width: 100%;



        justify-content: center;



        margin-top: 2rem;



    }



    .psHighslide,



    .psSquare,



    .pstvRect,



    .psLongRect {



        height: 8rem;



        margin: 0.25rem;



        border-radius: 0.5rem;



    }



    .psHighslide {



        height: 16.5rem;



        width: 10rem;



        margin-top: 0.5rem;



        margin-left: 1rem;



    }



    .psSquare {



        width: 8rem;



    }



    .pstvRect {



        width: 10rem;



    }



    .psLongRect {



        width: 16rem;



    }



    .psTextPart {



        width: 100%;



        padding-left: 0;



    }



    .psHeading {



        font-size: 2.5rem;



    }



    #land .psHighslide,



    #bot .psHighslide {



        margin-top: 0.25rem;



        margin-bottom: 0.5rem;



    }



    #land .psLongRect,



    #bot .psLongRect {



        margin-left: 5rem;



    }



    .eco,



    .project {



        padding: 6rem 2rem 2rem 2rem;



    }



    .eco .container,



    .project .container {



        height: auto;



        min-height: auto;



    }



    .ecoTextPart,



    .projectTextPart {



        width: 100%;



        padding: 3rem 1rem 1rem 1rem;



    }







    .ecoPic,



    .projectPic {



        display: none;



    }



    footer {



        height: auto;



    }



    footer .container {



        flex-direction: column;



        height: auto;



        padding: 2rem;



    }



    .footerCol {



        width: 100%;



        border-left: none;



        margin-top: 2rem;



        padding-left: 0;



    }



    .subFooter .container {



        flex-direction: column;



        justify-content: space-around;



    }



}



@media all and (max-height: 760px) {



    html, body {



        font-size: 14px;



    }



}