@font-face {
  font-family: 'Satoshi-Regular';
  src: url('../public/fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../public/fonts/Satoshi-Regular.woff') format('woff'),
       url('../public/fonts/Satoshi-Regular.ttf') format('truetype'),
       url('../public/fonts/Satoshi-Light.otf') format('opentype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}

@font-face {
  font-family: 'Satoshi-Variable';
  src: url('../public/fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../public/fonts/Satoshi-Variable.woff') format('woff'),
       url('../public/fonts/Satoshi-Variable.ttf') format('truetype'),
       url('../public/fonts/Satoshi-Variable.otf') format('opentype');
       font-weight: 300 900;
       font-display: swap;
       font-style: normal;
}

body {
  background: url(../public/images/polaris_for-white-bg.png) rgba(135, 195, 252, 0.5);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  font-family: 'Satoshi-Regular';
}

nav {
  display: flex;
  justify-content: space-between;
  height: 5;
  padding-left: 1em;
  padding-right: 1em;
  font-family: 'Satoshi-Regular';
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
}

main {
padding-top: 5%;
display: flex;
flex-direction: row;
justify-content: flex-start;
}

.lang {
  background-color: rgba(255, 114, 48, 0.8);
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 100%;
  font-family: 'Satoshi-Regular';
}

.langMenu {
  position: relative;
  width: 5em;
  height: 75%;
  padding-right: 1em;
}

.results {
  width: 100%;
}

.lang-options {
  display: none;
  position: absolute;
  background-color: rgba(255, 114, 48, 0.8);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: 'Satoshi-Regular';
  width: 5em;
  font-size: 16px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  text-align: center;
}

.lang-options a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.lang-options a:hover {
  background-color: rgba(255, 114, 48, 1);
}

.langMenu:hover .lang-options {
  display: block;
}

.langMenu:hover .lang {
  background-color: rgba(255, 114, 48, 1);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

h2 { 
  text-align: left;
}

.logos {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.logos a {
  text-decoration: none;
}

.wait {
  width: 50%;
  background-color: rgba(0, 147, 255, 0.4);
  border-radius: 25px;
  padding-left: 1%;
  padding-right: 1%;
  height: 100px;
}

.tuned {
  width: 50%;
  background-color: rgba(0, 147, 255, 0.4);
  border-radius: 25px;
  padding-left: 1%;
  padding-right: 1%;
  height: 100px;
}

.component-descriptions {
  background: url('../public/images/coast_parnu.png') rgba(255, 255, 255, 0.5);
  background-size: cover;
  background-attachment: scroll;
  background-position: bottom;
  background-repeat: no-repeat;
  backdrop-filter: blur(1px);
  margin: 1em;
  width: 47vw;
  height: 100%;
  border-radius: 25px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  font-size: 14px;
}

.title {
  text-align: center;
}

.component-steps {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(1px);
  margin: 1em;
  width: 47vw;
  height: 100%;
  border-radius: 25px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
}

.component-log-steps {
  display: flex;
  flex-direction: column;
  padding-bottom: 5%;
  padding-top: 5%;
  width: 100%;
}

.descriptionLogSteps {
  padding-bottom: 5%;
}

.logStepsContainer {
  padding-bottom: 1%;
}

.logSteps {
  padding-bottom: 1%;
  padding-top: 1%;;
  font-size: 16px;
}

button {
  width: 50%;
  padding: 1em;
  border-radius: 25px;
  border: none;
  color: white;
  background-color: rgba(255, 114, 48, 0.8);
}

button:hover {
  background-color: rgba(255, 114, 48, 1);
}

.descriptionOne {
  display: flex;
  align-items: center;
  text-align: left;
  width: 45%;
}

.descriptionTwo {
  width: 45%;
  text-align: left;
}

.descriptionThree {
  width: 35%;
  text-align: left;
}

.descriptionFour {
  width: 30%;
  text-align: left;
}

.descriptionFive {
  width: 30%;
  text-align: left;
}

.name {
  width: 50%;
  background-color: rgba(0, 147, 255, 0.4);
  border-radius: 25px;
  padding-left: 1%;
  padding-right: 1%;
  height: 25px;
}

.header-name {
  background-color: rgba(0, 147, 255, 0.4);
  border-radius: 25px;
}

.header-steps {
  background-color: rgba(0, 147, 255, 0.2);
  border-radius: 25px;
}

.descriptionOneEn 
{
  width: 40%;
  text-align: left;
}

.descriptionTwoEn {
  width: 35%;
  text-align: left;
}

.descriptionThreeEn {
  width: 25%;
  text-align: left;
}

.descriptionFourEn {
  width: 25%;
  text-align: left;
}

.steps {
  width: 50%;
  background-color: rgba(0, 147, 255, 0.2);
  border-radius: 25px;
  padding-left: 1%;
  padding-right: 1%;
  height: 25px;
}

tr {
  width: 100%;
  height: 5%;
}

.hide {
  display: none;
}


@media screen and (max-width: 1442px){

  .descriptionOne {
    width: 45%;
  }

  .descriptionTwo {
    width: 45%;
  }

  .descriptionThree {
    width: 38%;
  }

  .descriptionFour {
    width: 25%;
  }

  .descriptionFive {
    width: 28%;
  }

}

@media screen and (max-width: 1346px){

  .descriptionOne {
    width: 47%;
  }

  .descriptionTwo {
    width: 50%;
  }

  .descriptionThree {
    width: 45%;
  }

  .descriptionFour {
    width: 25%;
  }

  .descriptionFive {
    width: 28%;
  }

  h2 {
    width: 40%;
  }

}

@media screen and (max-width: 1244px){

  .descriptionOne {
    width: 70%;
  }

  .descriptionTwo {
    width: 50%;
  }

  .descriptionThree {
    width: 50%;
  }

  .descriptionFour {
    width: 45%;
  }

  .descriptionFive {
    width: 28%;
  }

  .descriptionOneEn 
{
  width: 43%;
}

.descriptionTwoEn {
  width: 40%;

}

.descriptionThreeEn {
  width: 20%;
}

.descriptionFourEn {
  width: 25%;
}

}

@media screen and (max-width: 1117px){

  .descriptionOne {
    width: 45%;
  }

  .descriptionTwo {
    width: 45%;
  }

  .descriptionThree {
    width: 50%;
  }

  .descriptionFour {
    width: 20%;
  }

  .descriptionFive {
    width: 28%;
  }
  .descriptionOneEn 
{
  width: 45%;
}

.descriptionTwoEn {
  width: 55%;

}

.descriptionThreeEn {
  width: 19%;
}

.descriptionFourEn {
  width: 25%;
}
}

@media screen and (max-width: 1057px){

  .component-descriptions {
    background-position:  bottom -1em right -25em;
    background-attachment: scroll;
    background-size: 200%;
  }

  .descriptionOne {
    width: 70%;
  }

  .descriptionTwo {
    width: 75%;
  }

  .descriptionThree {
    width: 50%;
  }

  .descriptionFour {
    width: 30%;
  }

  .descriptionFive {
    width: 20%;
  }

  .descriptionOneEn 
  {
    width: 70%;
  }
  
  .descriptionTwoEn {
    width: 45%;
  
  }
  
  .descriptionThreeEn {
    width: 25%;
  }
  
  .descriptionFourEn {
    width: 25%;
  }

}

@media screen and (max-width: 950px){


  .component-descriptions {
    background-position: bottom -1em right -25em;
    background-attachment: scroll;
    background-size: 200%;
    height: 100%;
  }

  .component-steps {
    height: 100%;
  }

  .header-ee {
    width: 100%;
  }

  .descriptionOne {
    width: 75%;
  }

  .descriptionTwo {
    width: 70%;
  }

  .descriptionThree {
    width: 50%;
  }

  .descriptionFour {
    width: 40%;
  }

  .descriptionFive {
    width: 28%;
  }

  .descriptionOneEn 
  {
    width: 75%;
  }
  
  .descriptionTwoEn {
    width: 60%;
  
  }
  
  .descriptionThreeEn {
    width: 30%;
  }
  
  .descriptionFourEn {
    width: 25%;
  }

}

@media screen and (max-width: 859px){


  main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .component-descriptions {
    width: 90vw;
    height: 100%;
    background-position: bottom -1em right -20em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 100%;
  }

  .component-steps {
    width: 90vw;
    height: 100%;
    padding-bottom: 0;
  }

  .descriptionOne {
    width: 65%;
  }

  .descriptionTwo {
    width: 60%;
  }

  .descriptionThree {
    width: 60%;
  }

  .descriptionFour {
    width: 50%;
  }

  .descriptionFive {
    width: 28%;
  }

  .descriptionOneEn 
  {
    width: 70%;
  }
  
  .descriptionTwoEn {
    width: 55%;
  
  }
  
  .descriptionThreeEn {
    width: 55%;
  }
  
  .descriptionFourEn {
    width: 25%;
  }
}

@media screen and (max-width: 748px) {

  .component-descriptions {
    background-position: bottom -1em right -20em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 100%;
  }

  .descriptionOne {
    width: 73%;
  }

  .descriptionTwo {
    width: 70%;
  }

  .descriptionThree {
    width: 60%;
  }
}

@media screen and (max-width: 645px) {
  nav {
    flex-direction: column;
    padding: 5%;
  }
  
  .component-descriptions {
    background-position: bottom -1em right -18em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 100%;
  }

  .descriptionOne {
    width: 85%;
  }

  .descriptionTwo {
    width: 70%;
  }

  .descriptionThree {
    width: 70%;
  }

  .descriptionFour {
    width: 65%;
  }
}

@media screen and (max-width: 630px) {

  .component-descriptions {
    background-position: bottom -1em right -18em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 100%;
  }

  .descriptionOne {
    width: 85%;
  }

  .descriptionTwo {
    width: 75%;
  }

  .descriptionThree {
    width: 75%;
  }

  .descriptionFour {
    width: 66%;
  }
}

@media screen and (max-width: 598px) {

  .component-descriptions {
    background-position: bottom -1em right -15em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 90%;
  }

  .descriptionOne {
    width: 90%;
  }

  .descriptionTwo {
    width: 80%;
  }

  .descriptionThree {
    width: 75%;
  }

  .descriptionFour {
    width: 70%;
  }
}

@media screen and (max-width: 561px) {

  .component-descriptions {
    background-position: bottom -1em right -10em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 80%;
  }

  .descriptionOne {
    width: 85%;
  }

  .descriptionTwo {
    width: 85%;
  }

  .descriptionThree {
    width: 75%;
  }

  .descriptionFour {
    width: 68%;
  }
}

@media screen and (max-width: 528px) {

  .component-descriptions {
    background-position: bottom -1em right -9em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 75%;
  }

  .logos {
    flex-direction: column;
  }

  .descriptionOne {
    width: 88%;
  }

  .descriptionTwo {
    width: 88%;
  }

  .descriptionThree {
    width: 77%;
  }

  .descriptionFour {
    width: 70%;
  }

  h2 {
    width: 100%;
  }

  .descriptionOneEn 
  {
    width: 85%;
  }
  
  .descriptionTwoEn {
    width: 75%;
  
  }
  
  .descriptionThreeEn {
    width: 65%;
  }
  
  .descriptionFourEn {
    width: 25%;
  }
}

@media screen and (max-width: 510px) {

  .component-descriptions {
    background-position: bottom -1em right -15em;
    background-attachment: scroll;
    font-size: 12px;
    background-size: 100%;
  }

  .descriptionOne {
    width: 75%;
  }

  .descriptionTwo {
    width: 80%;
  }

  .descriptionThree {
    width: 60%;
  }

  .descriptionFour {
    width: 50%;
  }

  .descriptionTwoEn {
    width: 70%;
  }

  .descriptionThreeEn {
    width: 60%;
  }
}


@media screen and (max-width: 472px) {
  
  .component-descriptions {
    background-position: bottom -1em right -11em;
    background-attachment: scroll;
    font-size: 10.5px;
    background-size: 90%;
    
  }

  .descriptionOne {
    width: 80%;
  }

  .descriptionTwo {
    width: 84%;
  }

  .descriptionThree {
    width: 70%;
  }

  .descriptionFour {
    width: 65%;
  }
}

@media screen and (max-width: 434px) {


  .component-descriptions {
    background: rgba(255, 255, 255, 0.5);
    font-size: 11.5px;
  }

  .descriptionOne {
    width: 100%;
    text-align: center;
  }

  .descriptionTwo {
    width: 100%;
    text-align: center;
  }

  .descriptionThree {
    width: 100%;
    text-align: center;
  }

  .descriptionFour {
    width: 100%;
    text-align: center;
  }


  .descriptionFive {
    width: 100%;
    text-align: center;
  }
  .descriptionOneEn {
    text-align: center;
    width: 100%;
  }

  .descriptionTwoEn {
    text-align: center;
    width: 100%;
  }

  .descriptionThreeEn {
    text-align: center;
    width: 100%;
  }

  .descriptionFourEn {
    text-align: center;
    width: 100%;
  }

  h2 {
    text-align: center
  };
}

@media screen and (max-width: 375px) {



  .component-descriptions {
    background: rgba(255, 255, 255, 0.5);
    font-size: 10px;
  }

  .component-steps {
    font-size: 11px;
  }

  .descriptionOne {
    width: 100%;
    text-align: center;
  }

  .descriptionTwo {
    width: 100%;
    text-align: center;
  }

  .descriptionThree {
    width: 100%;
    text-align: center;
  }

  .descriptionFour {
    width: 100%;
    text-align: center;
  }


  .descriptionFive {
    width: 100%;
    text-align: center;
  }
  
}