@font-face {
  font-family: edenred;
  src: url("assets/fonts/edenred.otf") format("opentype");
}

* {
  margin: 0;
  padding: 0;
  
}

body {
  font-family: 'Edenred', sans-serif;

  width:100%;
  height:100vh;
 
  background: -webkit-linear-gradient(72deg, rgba(172, 216, 211, 0.84) 0%, rgba(0, 169, 150, 0.97) 20%, rgba(39, 179, 163, 0.97) 80%, rgba(140, 204, 194, 0.97) 100%);
  background: -o-linear-gradient(72deg, rgba(172, 216, 211, 0.84) 0%, rgba(0, 169, 150, 0.97) 20%, rgba(39, 179, 163, 0.97) 80%, rgba(140, 204, 194, 0.97) 100%);
  background: -ms-linear-gradient(72deg, rgba(172, 216, 211, 0.84) 0%, rgba(0, 169, 150, 0.97) 20%, rgba(39, 179, 163, 0.97) 80%, rgba(140, 204, 194, 0.97) 100%);
  background: -moz-linear-gradient(72deg, rgba(172, 216, 211, 0.84) 0%, rgba(0, 169, 150, 0.97) 20%, rgba(39, 179, 163, 0.97) 80%, rgba(140, 204, 194, 0.97) 100%);
  background: linear-gradient(18deg, rgba(172, 216, 211, 0.84) 0%, rgba(0, 169, 150, 0.97) 20%, rgba(39, 179, 163, 0.97) 80%, rgba(140, 204, 194, 0.97) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  
  color: white;
}

header {
  display: flex;
  justify-content: center;
}

.eclipse-logo {
  display: flex;
  justify-content: center;
}

.eclipse-logo img {
  width: 90%;
}

.content-logo {
  position: relative;
  top: -50%;
  text-align: center;
}

.content-logo  img {
  width: 26%;

}


.title {
  text-align: center;
  position: relative;
  bottom: 105px;

}



@media (max-width:500px) {

  .sacola {
    display: none;
  }

  .title {
    font-weight: 100;
    font-size: 7px;
    text-align: center;
    position: relative;
    bottom: 50px;
  
  }
  
  .content-center {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  
  .eva, .link-eva {
    display: flex;
    justify-content: center;
  }
  
  .eva img {
    width: 40%;
  }


  
  .line-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid #fff;
    margin: 20px 0 20px 0;
  }

  .app, .link-wallet {
    display: flex;
    justify-content: center;
  }

  .app img  {
    width: 45%;
  }


}

@media (min-width: 501px) and (max-width: 1023px) {
  

  .sacola {
    display: none;
  }  


  .title {
    font-weight: 100;
    text-align: center;
    font-size: 12px;
    position: relative;
    bottom: 85px;
  }

  .content-center {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .eva, .link-eva {
    display: flex;
    justify-content: center;
  }

  .eva img {
    width: 50%;
  }

  .line-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid #fff;
    margin: 20px 0 20px 0;
  }

  .app, .link-wallet {
    display: flex;
    justify-content: center;
  }

  .app img {
    width: 60%;
  }
}

@media (min-width:1024px) and (max-width:1078px) {

  .content-center {
    display: flex;
    justify-content: center;

  }

  .sacola {
    width:100%;
    position: relative;
    bottom: 237px;
  }
  
  
  .eva img {
      width: 65%;
      position: relative;
      z-index: 10;
  
  }
  
  .app img {
    width: 68%;
    position: relative;
    z-index: 10;
    left: 45px;
  }
}

@media (min-width:1079px) and (max-width:1512px) {
  .content-center {
    display: flex;
    justify-content: center;

  }

  .eva img {
    width: 70%;
    position: relative;
    z-index: 10;
    right: 50px;
  }

  .app img {
    width: 72%;
    position: relative;
    z-index: 10;
    left: 122px;
  }

  .sacola {
    width: 100%;
    position: relative;
    bottom: 270px;
  }

}

@media (min-width:1513px) and (max-width:1920px) {

  .content-center {
    display: flex;
    justify-content: center;
   
  }
  .eva img {
    width: 100%;
    position: relative;
    z-index: 10;
    right: 172px;
  }

  .app img {
    width: 100%;
    position: relative;
    z-index: 10;
    left: 122px;
  }

  .sacola {
    width: 100%;
    position: relative;
    bottom: 360px;
  }

}

@media (min-width:1921px) {

  .content-center {
    display: flex;
    justify-content: center;
    
  }

  .eva img {
    width: 100%;
    position: relative;
    z-index: 10;
    right: 217px;
  }


  .app img {
    width: 100%;
    position: relative;
    z-index: 10;
    left: 173px;
  }

  .sacola {
    width: 100%;
    position: relative;
    bottom: 410px;
  }

}