/*-------------\
|     BODY     |
\-------------*/


body {
  --main-grey-color: #2b2a33;
  --main-turq-color: #2bb8c5;
  background-color: #fff;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: auto;
  text-align: center;
  font-family: "Raleway";
  font-size: 20px;
  font-weight: 600;
  color: var(--main-grey-color);
}

a, a:link,
a:visited {
  text-decoration: none;
}

h1 {
  margin: 23px 0 0;
  padding: 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: var(--main-grey-color);
  transform: translateY(-50%);
}

h1>form>input {
  margin-top: 3px;
  border: 0;
}

h2 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  color: var(--main-grey-color);
}

h3 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  color: var(--main-grey-color);
}

h4 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  color: var(--main-grey-color);
}

p {
  margin: 0;
}

ul {
  margin: 20px 0 0;
  text-align: left;
}

div {
  box-sizing: border-box;
}

img {
  border: 0;
}

.u {
  text-decoration: underline;
}

.sel {
  text-decoration: underline;
  font-weight: bold;
}



/*----------------------\
|        DIV-ALL        |
\----------------------*/


#DivWindow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

#DivBody {
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 0 0 100vw 0;
  grid-template-rows: auto;
}

#DivLeft {
  position: relative;
  grid-column: 1/3;
  grid-row: 1;
  overflow: hidden;
}

#DivLeftForm {
  position: absolute;
  background-color: #0ae;
  background-color: var(--main-turq-color);
  top: -100vh;
  right: 0;
  bottom: -50vh;
  transform: translateX(-20px);
  border-radius: 0 max(100px,80%) max(100px,80%) 0 / 50%;
  width: 100%;
  min-width: 100px;
}

#DivIndexAll {
  min-width: 350px;
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: min-content auto;
}

#DivIndexAllHead {
  position: sticky;
  z-index: 1;
  top: 0;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 10px min-content 3fr min-content 1fr min-content 1fr min-content 1fr min-content 5fr min-content 0 20px;
  grid-template-rows: 10px 40px 10px;
  box-shadow: -0 0 20px #555;
  overflow: hidden;
}

#DivIndexAllHead>#DivIndexAllHeadHome {
  grid-column: 2;
  grid-row: 2;
  background-size: cover;
}

#DivIndexAllHead>#DivIndexAllHeadHome>a>img {
  height: 40px;
  transition: all 1s ease-out;
}

#DivIndexAllHead___>div {
  margin: 0 10px;
}

#DivIndexAllHead>#DivIndexAllHeadSolutions {
  grid-column: 4;
  grid-row: 2;
}
#DivIndexAllHead>#DivIndexAllHeadSolutions.selected>a>h1 {
  color: var(--main-turq-color);
}

#DivIndexAllHead>#DivIndexAllHeadProducts {
  grid-column: 6;
  grid-row: 2;
}
#DivIndexAllHead>#DivIndexAllHeadProducts.selected>a>h1 {
  color: var(--main-turq-color);
}

#DivIndexAllHead>#DivIndexAllHeadPortfolio {
  grid-column: 8;
  grid-row: 2;
}
#DivIndexAllHead>#DivIndexAllHeadPortfolio.selected>a>h1 {
  color: var(--main-turq-color);
}

#DivIndexAllHead>#DivIndexAllHeadContact {
  grid-column: 10;
  grid-row: 2;
}
#DivIndexAllHead>#DivIndexAllHeadContact.selected>a>h1 {
  color: var(--main-turq-color);
}

#DivIndexAllHead>#DivIndexAllHeadLanguage {
  grid-column: 12;
  grid-row: 2;
}

#DivIndexAllHead>#DivIndexAllHeadLanguage>h1>form>input {
  border-radius: 0;
  margin-right: 10px;
}

#DivIndexAllScrolling {
  background-color: #eee;
  grid-column: 1;
  grid-row: 1/3;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto min-content;
}

#DivIndexAllInclude {
  position: relative;
  font-size: 25px;
  font-weight: normal;
  text-align: justify;
  list-style: inside;
}

#DivIndexAllInclude>div {
  margin: 80px 20px 0;
}

#DivIndexAllInclude:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100vw;
  transform: translateX(-50vw) translateX(-50px);
  transform: translateX(-50vw);
  z-index: -1;
}

#DivIndexAllFoot {
  background-color: var(--main-grey-color);
  position: relative;
  bottom: 0;
  color: var(--main-turq-color);
  text-align: left;
  font-weight: normal;
  font-size: 17.2px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  grid-template-rows: 20px 20px auto 20px;
}

#DivIndexAllFoot>div>div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

#DivIndexAllFoot>#DivIndexAllFootForm {
  background-color: #eee;
  grid-column: 1 / 10;
  grid-row: 1;
  border-radius: 0 0 200% 200% / 50px;
}

#DivIndexAllFoot>#DivIndexAllFootLogo {
  grid-column: 2;
  grid-row: 3;
}

#DivIndexAllFoot>#DivIndexAllFootLogo>div>p {
  font-size: 15px;
  font-weight: 250;
}

#DivIndexAllFoot>#DivIndexAllFootLogo>div>p {
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}

#DivIndexAllFoot>#DivIndexAllFootLogo>div>p>img {
  width: 200px;
}

#DivIndexAllFoot>#DivIndexAllFootLogo>div.en>p {
  letter-spacing: 4.1px;
}

#DivIndexAllFoot>#DivIndexAllFootLogo>div.fr>p {
  letter-spacing: 5.0px;
}

#DivIndexAllFoot>#DivIndexAllFootAddress {
  grid-column: 4;
  grid-row: 3;
}

#DivIndexAllFoot>#DivIndexAllFootAddress>div>p {
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  letter-spacing: 3.9px;
}

#DivIndexAllFoot>#DivIndexAllFootSocial {
  grid-column: 6;
  grid-row: 3;
}

#DivIndexAllFoot>#DivIndexAllFootSocial>div>p {
  display: inline-block;
  margin-right: 20px;
}
#DivIndexAllFoot>#DivIndexAllFootSocial>div>p:last-of-type {
  margin-right: 0;
}

#DivIndexAllFoot>#DivIndexAllFootSocial>div>p>a>img {
  height: 30px;
}

#DivIndexAllFoot>#DivIndexAllFootLegal {
  grid-column: 8;
  grid-row: 3;
}

#DivIndexAllFoot>#DivIndexAllFootLegal>div>p {
  text-align: center;
}

#DivIndexAllFoot>#DivIndexAllFootLegal>div>p>a {
  color: var(--main-turq-color);
  text-decoration: underline;
}

#DivIndexAllHead>#DivIndexAllHeadHome>a>img {  }

#DivIndexAllHead>#DivIndexAllHeadHome:not(.selected)>a>img:nth-of-type(2n) { display: none; }
#DivIndexAllHead>#DivIndexAllHeadHome.selected>a>img:nth-of-type(2n+1) { display: none; }

@media only screen and (max-width : 550px) {
  #DivWindow { overflow: auto; }
  #DivBody { grid-template-columns: 0 0 100vw 0; }
  #DivIndexAllHead {
    grid-template-columns: 10px 1fr min-content 2fr min-content 2fr min-content 2fr min-content 1fr 10px;
    grid-template-rows: 10px 40px 5px 40px 5px;
  }
  #DivIndexAllHead>div { margin: 0; }
  #DivIndexAllHead>#DivIndexAllHeadHome { grid-column: 2/9; grid-row: 2; text-align: left; }
  #DivIndexAllHead>#DivIndexAllHeadHome>a>img:nth-of-type(-n+2) { display: none; }
  #DivIndexAllHead>#DivIndexAllHeadSolutions { grid-column: 3; grid-row: 4; }
  #DivIndexAllHead>#DivIndexAllHeadProducts { grid-column: 5; grid-row: 4; }
  #DivIndexAllHead>#DivIndexAllHeadPortfolio { grid-column: 7; grid-row: 4; }
  #DivIndexAllHead>#DivIndexAllHeadContact { grid-column: 9; grid-row: 4; }
  #DivIndexAllHead>#DivIndexAllHeadLanguage { grid-column: 9/11; grid-row: 2; }
  #DivIndexAllHead>#DivIndexAllHeadLanguage>h1 { text-align: right; }
  #DivIndexAllInclude>div { margin: 120px 20px 0; }
  #DivIndexAllFoot { grid-template-columns: 1fr max-content 1fr; grid-template-rows: 20px 30px auto 30px auto 30px auto 30px auto 30px; }
  #DivIndexAllFoot>#DivIndexAllFootForm { grid-column: 1 / 4; }
  #DivIndexAllFoot>#DivIndexAllFootLogo { grid-row: 3; }
  #DivIndexAllFoot>#DivIndexAllFootAddress { grid-column: 2; grid-row: 5; }
  #DivIndexAllFoot>#DivIndexAllFootSocial { grid-column: 2; grid-row: 7; }
  #DivIndexAllFoot>#DivIndexAllFootLegal { grid-column: 2; grid-row: 9; }
  ul { padding: 0; }
}
@media only screen and (min-width : 550px) and (max-width : 700px) {
  #DivBody { grid-template-columns: 0 0 100vw 0; }
  #DivIndexAll { overflow: hidden; }
  #DivIndexAllHead { border-radius: 0; }
  #DivIndexAllHead>#DivIndexAllHeadHome>a>img:nth-last-of-type(-n+2) { display: none; }
  #DivIndexAllFoot { grid-template-columns: 1fr auto 1fr auto 1fr; grid-template-rows: 20px 30px auto 30px auto 30px; }
  #DivIndexAllFoot>#DivIndexAllFootForm { grid-column: 1 / 6; }
  #DivIndexAllFoot>#DivIndexAllFootLogo { grid-column: 2; grid-row: 3; }
  #DivIndexAllFoot>#DivIndexAllFootAddress { grid-column: 2; grid-row: 5; }
  #DivIndexAllFoot>#DivIndexAllFootSocial { grid-column: 4; grid-row: 3; }
  #DivIndexAllFoot>#DivIndexAllFootSocial>div { text-align: left; }
  #DivIndexAllFoot>#DivIndexAllFootLegal { grid-column: 4; grid-row: 5; }
}
@media only screen and (min-width : 700px) and (max-width : 800px) {
  #DivBody { grid-template-columns: 0 0 100vw 0; }
  #DivIndexAllHead { border-radius: 0; }
  #DivIndexAllHead>#DivIndexAllHeadHome>a>img:nth-of-type(-n+2) { display: none; }
  #DivIndexAllFoot { grid-template-columns: 1fr auto 1fr auto 1fr; grid-template-rows: 20px 30px auto 30px auto 30px; }
  #DivIndexAllFoot>#DivIndexAllFootForm { grid-column: 1 / 6; }
  #DivIndexAllFoot>#DivIndexAllFootLogo { grid-column: 2; grid-row: 3; }
  #DivIndexAllFoot>#DivIndexAllFootAddress { grid-column: 2; grid-row: 5; }
  #DivIndexAllFoot>#DivIndexAllFootSocial { grid-column: 4; grid-row: 3; }
  #DivIndexAllFoot>#DivIndexAllFootSocial>div { text-align: left; }
  #DivIndexAllFoot>#DivIndexAllFootLegal { grid-column: 4; grid-row: 5; }
}
@media only screen and (min-width : 800px) and (max-width : 850px) {
  #DivBody { grid-template-columns: 0 auto 750px 0; }
  #DivIndexAllHead { border-radius: 0 0 0 8px; }
  #DivIndexAllHead>#DivIndexAllHeadHome>a>img:nth-of-type(-n+2) { display: none; }
}
@media only screen and (min-width : 850px) and (max-width : 1500px) {
  #DivBody { grid-template-columns: 0 100px auto 0; }
  #DivIndexAllHead { border-radius: 0 0 0 8px; }
  #DivIndexAllHead>#DivIndexAllHeadHome>a>img:nth-of-type(-n+2) { display: none; }
}
@media only screen and (min-width : 1500px) {
  #DivBody { grid-template-columns: auto 100px 1400px auto; }
  #DivIndexAllHead { border-radius: 0 0 8px 8px; }
  #DivIndexAllHead>#DivIndexAllHeadHome>a>img:nth-of-type(-n+2) { display: none; }
}

@media only screen                          and (max-width :  550px) { .autothin { font-size: 20.0px; line-height: 30.0px; } }
@media only screen and (min-width :  550px) and (max-width :  600px) { .autothin { font-size: 20.5px; line-height: 30.5px; } }
@media only screen and (min-width :  600px) and (max-width :  650px) { .autothin { font-size: 21.0px; line-height: 31.0px; } }
@media only screen and (min-width :  650px) and (max-width :  700px) { .autothin { font-size: 21.5px; line-height: 31.5px; } }
@media only screen and (min-width :  700px) and (max-width :  750px) { .autothin { font-size: 22.0px; line-height: 32.0px; } }
@media only screen and (min-width :  750px) and (max-width :  800px) { .autothin { font-size: 22.5px; line-height: 32.5px; } }
@media only screen and (min-width :  800px) and (max-width :  850px) { .autothin { font-size: 23.0px; line-height: 33.0px; } }
@media only screen and (min-width :  850px) and (max-width :  900px) { .autothin { font-size: 23.5px; line-height: 33.5px; } }
@media only screen and (min-width :  900px) and (max-width :  950px) { .autothin { font-size: 24.0px; line-height: 34.0px; } }
@media only screen and (min-width :  950px) and (max-width : 1000px) { .autothin { font-size: 24.5px; line-height: 34.5px; } }
@media only screen and (min-width : 1000px) and (max-width : 1050px) { .autothin { font-size: 25.0px; line-height: 35.0px; } }
@media only screen and (min-width : 1050px) and (max-width : 1100px) { .autothin { font-size: 25.5px; line-height: 35.5px; } }
@media only screen and (min-width : 1100px) and (max-width : 1150px) { .autothin { font-size: 26.0px; line-height: 36.0px; } }
@media only screen and (min-width : 1150px) and (max-width : 1200px) { .autothin { font-size: 26.5px; line-height: 36.5px; } }
@media only screen and (min-width : 1200px) and (max-width : 1250px) { .autothin { font-size: 27.0px; line-height: 37.0px; } }
@media only screen and (min-width : 1250px) and (max-width : 1300px) { .autothin { font-size: 27.5px; line-height: 37.5px; } }
@media only screen and (min-width : 1300px) and (max-width : 1350px) { .autothin { font-size: 28.0px; line-height: 38.0px; } }
@media only screen and (min-width : 1350px) and (max-width : 1400px) { .autothin { font-size: 28.5px; line-height: 38.5px; } }
@media only screen and (min-width : 1400px) and (max-width : 1450px) { .autothin { font-size: 29.0px; line-height: 39.0px; } }
@media only screen and (min-width : 1450px) and (max-width : 1500px) { .autothin { font-size: 29.5px; line-height: 39.5px; } }
@media only screen and (min-width : 1500px)                          { .autothin { font-size: 30.0px; line-height: 40.0px; } }

@media only screen                          and (max-width :  550px) { .autolarge { font-size: 20px; line-height: 35px; } }
@media only screen and (min-width :  550px) and (max-width :  600px) { .autolarge { font-size: 21px; line-height: 36px; } }
@media only screen and (min-width :  600px) and (max-width :  650px) { .autolarge { font-size: 22px; line-height: 37px; } }
@media only screen and (min-width :  650px) and (max-width :  700px) { .autolarge { font-size: 23px; line-height: 38px; } }
@media only screen and (min-width :  700px) and (max-width :  750px) { .autolarge { font-size: 24px; line-height: 39px; } }
@media only screen and (min-width :  750px) and (max-width :  800px) { .autolarge { font-size: 25px; line-height: 40px; } }
@media only screen and (min-width :  800px) and (max-width :  850px) { .autolarge { font-size: 26px; line-height: 41px; } }
@media only screen and (min-width :  850px) and (max-width :  900px) { .autolarge { font-size: 27px; line-height: 42px; } }
@media only screen and (min-width :  900px) and (max-width :  950px) { .autolarge { font-size: 28px; line-height: 43px; } }
@media only screen and (min-width :  950px) and (max-width : 1000px) { .autolarge { font-size: 29px; line-height: 44px; } }
@media only screen and (min-width : 1000px) and (max-width : 1050px) { .autolarge { font-size: 30px; line-height: 45px; } }
@media only screen and (min-width : 1050px) and (max-width : 1100px) { .autolarge { font-size: 31px; line-height: 46px; } }
@media only screen and (min-width : 1100px) and (max-width : 1150px) { .autolarge { font-size: 32px; line-height: 47px; } }
@media only screen and (min-width : 1150px) and (max-width : 1200px) { .autolarge { font-size: 33px; line-height: 48px; } }
@media only screen and (min-width : 1200px) and (max-width : 1250px) { .autolarge { font-size: 34px; line-height: 49px; } }
@media only screen and (min-width : 1250px) and (max-width : 1300px) { .autolarge { font-size: 35px; line-height: 50px; } }
@media only screen and (min-width : 1300px) and (max-width : 1350px) { .autolarge { font-size: 36px; line-height: 51px; } }
@media only screen and (min-width : 1350px) and (max-width : 1400px) { .autolarge { font-size: 37px; line-height: 52px; } }
@media only screen and (min-width : 1400px) and (max-width : 1450px) { .autolarge { font-size: 38px; line-height: 53px; } }
@media only screen and (min-width : 1450px) and (max-width : 1500px) { .autolarge { font-size: 39px; line-height: 54px; } }
@media only screen and (min-width : 1500px)                          { .autolarge { font-size: 40px; line-height: 55px; } }



/*-------------\
|     HOME     |
\-------------*/


.home>#DivIncludeHomeIntro {
  padding: 20vh 15vw;
}

.home>#DivIncludeHomeActivities {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-row-gap: 20vh;
  text-align: center;
}

.home>#DivIncludeHomeActivities>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 20px;
}

.home>#DivIncludeHomeActivities>div>div>p>span {
  white-space: nowrap;
}

.home>#DivIncludeHomeActivities>div:last-of-type {
  margin-bottom: 15vh;
}

.home>#DivIncludeHomeActivities>div>div>p {
  position: relative;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-weight: 600;
  text-indent: 0;
}

.home>#DivIncludeHomeActivities>div>div:nth-of-type(2) {
  line-height: 0;
}

.home>#DivIncludeHomeActivities>div>div>img {
  width: 100%;
}

.home>#DivIncludeHomeActivities>div:nth-of-type(2n)>div:nth-of-type(1) {
  order: 2;
}

.home>#DivIncludeHomeActivities>div:nth-of-type(2n)>div:nth-of-type(2) {
  order: 1;
}

@media only screen and (max-width : 550px) {
  .home>#DivIncludeHomeIntro {
    padding: 15vh 0;
  }
  .home>#DivIncludeHomeActivities {
    grid-row-gap: 15vh;
  }
}

@media only screen and (max-width : 800px) {
  .home>#DivIncludeHomeActivities>div {
    grid-template-columns: 1fr;
    grid-template-rows: min-content auto;
  }
  .home>#DivIncludeHomeActivities>div>div:nth-of-type(1) {
    order: 2;
  }
  .home>#DivIncludeHomeActivities>div>div:nth-of-type(1)>p {
    margin-top: 10px;
  }
  .home>#DivIncludeHomeActivities>div>div:nth-of-type(2) {
    order: 1;
  }
}



/*------------------\
|     SOLUTIONS     |
\------------------*/


.solutions>#DivIncludeSolutionsIntro {
  padding: 20vh 15vw;
}

.solutions>#DivIncludeSolutionsActivities {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-row-gap: 20vh;
  text-align: center;
}

.solutions>#DivIncludeSolutionsActivities>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 20px;
}

.solutions>#DivIncludeSolutionsActivities>div>div>p>span {
  white-space: nowrap;
}

.solutions>#DivIncludeSolutionsActivities>div:last-of-type {
  margin-bottom: 15vh;
}

.solutions>#DivIncludeSolutionsActivities>div>div>p {
  position: relative;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-weight: 600;
  text-indent: 0;
}

.solutions>#DivIncludeSolutionsActivities>div>div:nth-of-type(2) {
  line-height: 0;
}

.solutions>#DivIncludeSolutionsActivities>div>div>img {
  width: 100%;
}

.solutions>#DivIncludeSolutionsActivities>div:nth-of-type(2n)>div:nth-of-type(1) {
  order: 2;
}

.solutions>#DivIncludeSolutionsActivities>div:nth-of-type(2n)>div:nth-of-type(2) {
  order: 1;
}

@media only screen and (max-width : 550px) {
  .solutions>#DivIncludeSolutionsIntro {
    padding: 15vh 0;
  }
  .solutions>#DivIncludeSolutionsActivities {
    grid-row-gap: 15vh;
  }
}

@media only screen and (max-width : 800px) {
  .solutions>#DivIncludeSolutionsActivities>div {
    grid-template-columns: 1fr;
    grid-template-rows: min-content auto;
  }
  .solutions>#DivIncludeSolutionsActivities>div>div:nth-of-type(1) {
    order: 2;
  }
  .solutions>#DivIncludeSolutionsActivities>div>div:nth-of-type(1)>p {
    margin-top: 10px;
  }
  .solutions>#DivIncludeSolutionsActivities>div>div:nth-of-type(2) {
    order: 1;
  }
}



/*-----------------\
|     PRODUCTS     |
\-----------------*/


.products>#DivIncludeProductsIntro {
  padding: 20vh 15vw;
}

@media only screen and (max-width : 550px) {
  .products>#DivIncludeProductsIntro {
    padding: 15vh 0;
  }
}



/*------------------\
|     PORTFOLIO     |
\------------------*/


.portfolio>#DivIncludePortfolioProjectsIntro,
.portfolio>#DivIncludePortfolioPartnersIntro,
.portfolio>#DivIncludePortfolioExperienceIntro {
  padding: 25vh 15vw 0;
}
.portfolio>#DivIncludePortfolioExperienceOutro {
  padding: 15vh 15vw;
}
@media only screen and (max-width : 500px) {
  .portfolio>#DivIncludePortfolioProjectsIntro,
  .portfolio>#DivIncludePortfolioExperienceIntro {
    padding: 25vh 5vw 0;
  }
  .portfolio>#DivIncludePortfolioExperienceOutro {
    padding: 15vh 5vw;
  }
}
.portfolio>#DivIncludePortfolioProjects {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  text-align: center;
}

.portfolio>#DivIncludePortfolioProjects>div>div:nth-of-type(1) {
  padding-top: 15vh;
  font-weight: 600;
  margin-bottom: 40px;
}

.portfolio>#DivIncludePortfolioProjects>div>div:nth-of-type(2) {
  float: left;
  margin: 0 20px 10px 0;
}

.portfolio>#DivIncludePortfolioProjects>div:nth-of-type(2n)>div:nth-of-type(2) {
  float: right;
  margin: 0 0 10px 20px;
}

.portfolio>#DivIncludePortfolioProjects>div>div:nth-of-type(3) {
  text-indent: 4vw;
  text-align: justify;
}

#DivIncludePortfolioProjSmartGateDetails>p {
  margin-bottom: 10px;
}

#DivIncludePortfolioProjSmartGateDemoC {
  margin-left: auto;
  margin-right: auto;
  width: 298px;
  height: 602px;
  position: relative;
}

#DivIncludePortfolioProjSmartGateDemoCApp {
  position: absolute;
  top: 2%;
  left: 5%;
  right: 5%;
  bottom: 2%;
  color: white;
  font-size: 20px;
  line-height: 10px;
  font-family: arial, sans-serif;
  font-weight: 600;
}

#DivIncludePortfolioProjSmartGateDemoCAppBanner {
  background-color: #032275;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35px;
}

#DivIncludePortfolioProjSmartGateDemoCAppBanner>#DivIncludePortfolioProjSmartGateDemoCAppBannerTime {
  position: absolute;
  top: 15px;
  left: 20px;
  height: 15px;
  width: 50px;
  font-size: 13px;
}

#DivIncludePortfolioProjSmartGateDemoCAppBanner>#DivIncludePortfolioProjSmartGateDemoCAppBannerIcons {
  background: #032275 url("/_img/portfolio/SmartGate/phoneIcons.png");
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: lighten;
  position: absolute;
  top: 14px;
  right: 15px;
  height: 15px;
  width: 60px;
}

#DivIncludePortfolioProjSmartGateDemoCAppLogo {
  background: #032275 url("/_img/portfolio/SmartGate/Logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  height: 75px;
}

#DivIncludePortfolioProjSmartGateDemoCAppUser {
  background-color: #032275;
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  height: 30px;
}

#DivIncludePortfolioProjSmartGateDemoCAppUserName {
  position: absolute;
  top: 10px;
  left: 8px;
  height: 20px;
  width: 100px;
  text-align: left;
}

#DivIncludePortfolioProjSmartGateDemoCAppUserIcons {
  background: url("/_img/portfolio/SmartGate/userIcons.png");
  background-size: contain;
  mix-blend-mode: lighten;
  background-repeat: no-repeat;
  position: absolute;
  top: 6px;
  right: 5px;
  height: 25px;
  width: 75px;
}

#DivIncludePortfolioProjSmartGateDemoCAppVisual {
  background-color: #eee;
  position: absolute;
  top: 140px;
  left: 0;
  right: 0;
  height: 80px;
  overflow: hidden;
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualGate {
  background-color: black;
  position: absolute;
  top: 50%;
  height: 5px;
  left: 25px;
  width: 218px;
  transform: translateY(-50%);
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualLpole {
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 0;
  width: 25px;
  aspect-ratio: 1.1;
  border: 1px solid black;
  transform: translateY(-50%);
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualRpole {
  background-color: grey;
  position: absolute;
  top: 50%;
  right: 0;
  width: 25px;
  aspect-ratio: 1.1;
  border: 1px solid black;
  transform: translateY(-50%);
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualLamp {
  background-color: darkgrey;
  position: absolute;
  top: 50%;
  right: 8px;
  width: 12px;
  aspect-ratio: 1;
  border: 1px solid black;
  border-radius: 6px;
  transform: translateY(-50%);
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualLamp.active {
  background-color: #fb0;
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualIRext {
  position: absolute;
  top: 50%;
  height: 2px;
  left: 26px;
  right: 26px;
  border: 2px dotted red;
  transform: translateY(-50%) translateY(-8px);
  display: none;
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualIRext.active {
  display: unset;
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualIRint {
  position: absolute;
  top: 50%;
  height: 2px;
  left: 26px;
  right: 26px;
  border: 2px dotted red;
  transform: translateY(-50%) translateY(8px);
  display: none;
}

#DivIncludePortfolioProjSmartGateDemoCAppVisualIRint.active {
  display: unset;
}

#DivIncludePortfolioProjSmartGateDemoCPhoneIn {
  background-image: url("/_img/portfolio/SmartGate/phoneIn.png");
  mix-blend-mode: darken;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#DivIncludePortfolioProjSmartGateDemoCPhoneExt {
  background-image: url("/_img/portfolio/SmartGate/phoneExt.png");
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#DivIncludePortfolioProjSmartGateDemoCAppIRDetect {
  position: absolute;
  top: 160px;
  left: 40px;
  right: 40px;
  height: 70px;
  display: none;
}
#DivIncludePortfolioProjSmartGateDemoCAppIRDetect.pedestrian {
  display: unset;
  cursor: url('/_img/portfolio/SmartGate/pedestrian.png') 15 15, auto;
}
#DivIncludePortfolioProjSmartGateDemoCAppIRDetect.vehicle {
  display: unset;
  cursor: url('/_img/portfolio/SmartGate/vehicle.png') 15 15, auto;
}

#DivIncludePortfolioProjSmartGateDemoCAppIRextDetect {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 20px;
}

#DivIncludePortfolioProjSmartGateDemoCAppIRintDetect {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  height: 20px;
}

#DivIncludePortfolioProjSmartGateDemoCAppCommands {
  background-color: #eee;
  position: absolute;
  top: 240px;
  left: 30px;
  right: 30px;
  height: 335px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 3fr 3fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: black;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

#DivIncludePortfolioProjSmartGateDemoCAppCommands>div {
  background-color: #ccc;
  border-radius: 20px;
  border: 4px solid transparent;
  cursor: pointer;
  position: relative;
}

#DivIncludePortfolioProjSmartGateDemoCAppCommands>div>p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

#DivIncludePortfolioProjSmartGateDemoCAppCommandsClose {
  grid-column: 1/3;
  font-size: 25px;
}

.portfolio>#DivIncludePortfolioPartners {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  text-align: center;
}

.portfolio>#DivIncludePortfolioPartners>div {
  padding-top: 15vh;
  font-weight: 600;
  margin-bottom: 40px;
}

.portfolio>#DivIncludePortfolioExperience {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  text-align: center;
}

.portfolio>#DivIncludePortfolioExperience>div {
  
}

.portfolio>#DivIncludePortfolioExperience>div>div:nth-of-type(1) {
  padding-top: 15vh;
  font-weight: 600;
  margin-bottom: 40px;
}

.portfolio>#DivIncludePortfolioExperience>div>div:nth-of-type(2) {
  position: relative;
  aspect-ratio: 2;
  border-radius: 5% / 10%;
  width: 60%;
  overflow: hidden;
  float: right;
  margin: 0 0 10px 20px;
}

.portfolio>#DivIncludePortfolioExperience>div:nth-of-type(2n)>div:nth-of-type(2) {
  float: left;
  margin: 0 20px 10px 0;
}

.portfolio>#DivIncludePortfolioExperience>div>div:nth-of-type(2)>img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}

.portfolio>#DivIncludePortfolioExperience>div>div:nth-of-type(3) {
  text-indent: 4vw;
  text-align: justify;
}
.portfolio>#DivIncludePortfolioExperience>div>div:nth-of-type(3)>p {
  margin-bottom: 10px;
}

.portfolio>#DivIncludePortfolioExperience>div>div:nth-of-type(3)>p>img {
  height: 30px;
  margin: -5px 0;
}

@media only screen and (max-width : 850px) {
  .portfolio>#DivIncludePortfolioProjects>div>div:nth-of-type(2) {
    width: 100%;
    margin: 0 0 20px 0;
  }
  .portfolio>#DivIncludePortfolioExperience>div>div:nth-of-type(2) {
    width: 100%;
    margin: 0 0 20px 0;
  }
}



/*----------------\
|     CONTACT     |
\----------------*/


.contact>#DivIncludeContactIntro {
  padding: 10vh 15vw;
}

.contact>#DivIncludeContactForm .DivIncludeContactFormFr,
.contact>#DivIncludeContactForm .DivIncludeContactFormEn {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;  
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.contact>#DivIncludeContactForm .DivIncludeContactNameLabel {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}
.contact>#DivIncludeContactForm .DivIncludeContactNameInput {
  grid-column: 2;
  grid-row: 1;
}
.contact>#DivIncludeContactForm .DivIncludeContactEmailLabel {
  grid-column: 1;
  grid-row: 2;
  text-align: right;
}
.contact>#DivIncludeContactForm .DivIncludeContactEmailInput {
  grid-column: 2;
  grid-row: 2;
}
.contact>#DivIncludeContactForm .DivIncludeContactPhoneLabel {
  grid-column: 1;
  grid-row: 3;
  text-align: right;
}
.contact>#DivIncludeContactForm .DivIncludeContactPhoneInput {
  grid-column: 2;
  grid-row: 3;
}
.contact>#DivIncludeContactForm .DivIncludeContactMessageLabel {
  grid-column: 1/3;
  grid-row: 4;
}
.contact>#DivIncludeContactForm .DivIncludeContactMessageInput {
  grid-column: 1/3;
  grid-row: 5;
}
.contact>#DivIncludeContactForm .DivIncludeContactSubmit {
  grid-column: 1/3;
  grid-row: 6;
}

.contact>#DivIncludeContactForm input {
  width: 100%;
  box-sizing: border-box;
}
.contact>#DivIncludeContactForm textarea {
  width: 100%;
  height: 25vh;
  box-sizing: border-box;
}
.contact>#DivIncludeContactForm .DivIncludeContactSubmit {
  text-align: center;
}
.contact>#DivIncludeContactForm .DivIncludeContactSubmit input {
  width: unset;
  padding: 5px 10px;
  background-color: var(--main-turq-color);
  color: var(--main-grey-color);
  border: solid var(--main-grey-color) 1px;
  border-radius: 5px;
}

@media only screen and (max-width :  650px) {
  .contact>#DivIncludeContactForm .DivIncludeContactFormFr,
  .contact>#DivIncludeContactForm .DivIncludeContactFormEn {
    grid-template-columns: 1fr;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactNameLabel {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactNameInput {
    grid-column: 1;
    grid-row: 2;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactEmailLabel {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactEmailInput {
    grid-column: 1;
    grid-row: 4;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactPhoneLabel {
    grid-column: 1;
    grid-row: 5;
    text-align: left;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactPhoneInput {
    grid-column: 1;
    grid-row: 6;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactMessageLabel {
    grid-column: 1;
    grid-row: 7;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactMessageInput {
    grid-column: 1;
    grid-row: 8;
  }
  .contact>#DivIncludeContactForm .DivIncludeContactSubmit {
    grid-column: 1;
    grid-row: 9;
  }
}

@media only screen                          and (max-width :  550px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 20.0px; } }
@media only screen and (min-width :  550px) and (max-width :  600px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 20.5px; } }
@media only screen and (min-width :  600px) and (max-width :  650px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 21.0px; } }
@media only screen and (min-width :  650px) and (max-width :  700px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 21.5px; } }
@media only screen and (min-width :  700px) and (max-width :  750px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 22.0px; } }
@media only screen and (min-width :  750px) and (max-width :  800px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 22.5px; } }
@media only screen and (min-width :  800px) and (max-width :  850px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 23.0px; } }
@media only screen and (min-width :  850px) and (max-width :  900px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 23.5px; } }
@media only screen and (min-width :  900px) and (max-width :  950px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 24.0px; } }
@media only screen and (min-width :  950px) and (max-width : 1000px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 24.5px; } }
@media only screen and (min-width : 1000px) and (max-width : 1050px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 25.0px; } }
@media only screen and (min-width : 1050px) and (max-width : 1100px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 25.5px; } }
@media only screen and (min-width : 1100px) and (max-width : 1150px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 26.0px; } }
@media only screen and (min-width : 1150px) and (max-width : 1200px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 26.5px; } }
@media only screen and (min-width : 1200px) and (max-width : 1250px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 27.0px; } }
@media only screen and (min-width : 1250px) and (max-width : 1300px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 27.5px; } }
@media only screen and (min-width : 1300px) and (max-width : 1350px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 28.0px; } }
@media only screen and (min-width : 1350px) and (max-width : 1400px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 28.5px; } }
@media only screen and (min-width : 1400px) and (max-width : 1450px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 29.0px; } }
@media only screen and (min-width : 1450px) and (max-width : 1500px) { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 29.5px; } }
@media only screen and (min-width : 1500px)                          { .contact>#DivIncludeContactForm, .contact>#DivIncludeContactForm input, .contact>#DivIncludeContactForm textarea { font-size: 30.0px; } }




/*---------------------\
|     LEGAL-NOTICE     |
\---------------------*/


.legal-notice>#DivIncludeLegalNoticeIntro {
  padding: 25vh 15vw 0;
}

@media only screen and (max-width : 500px) {
  .legal-notice>#DivIncludeLegalNoticeIntro {
    padding: 25vh 5vw 0;
  }
}
.legal-notice>#DivIncludeLegalNotice {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin-bottom: 15vh;
}

.legal-notice>#DivIncludeLegalNotice>div>div:nth-of-type(1) {
  padding-top: 15vh;
  font-weight: 600;
  margin-bottom: 40px;
}

.legal-notice>#DivIncludeLegalNotice>#DivIncludeLegalNoticeCompany>div:nth-of-type(2) {
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: auto;
  grid-column-gap: 2vw;
}
@media only screen and (max-width : 550px) {
  .legal-notice>#DivIncludeLegalNotice>#DivIncludeLegalNoticeCompany>div:nth-of-type(2) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2vw;
  }
}
.legal-notice>#DivIncludeLegalNotice>#DivIncludeLegalNoticeCompany>div:nth-of-type(2)>div:nth-of-type(2n)>p {
  margin-bottom: 15px;
}

.legal-notice>#DivIncludeLegalNotice>#DivIncludeLegalNoticeCompany>div:nth-of-type(2)>div:nth-of-type(2n+1) {
  font-weight: 400;
  text-decoration: underline;
}
.legal-notice>#DivIncludeLegalNotice>#DivIncludeLegalNoticeCompany>div:nth-of-type(2)>div:nth-of-type(2n) {
  font-weight: 400;
}

.legal-notice>#DivIncludeLegalNotice>#DivIncludeLegalNoticePersonalData>div:nth-of-type(2)>div {
  margin-bottom: 15px;
}

.spacer {
  display: inline-block;
  width: 10px;
}