*{
margin: 0;
margin: 0;
padding:0;
list-style: none;
}


body {
  /*background-image: url('/images/fundo.png');
  background-repeat: no-repeat;
  background-size: cover;*/
  height:100vh;
  font-family:Arial;
  background-color: #000000;
}
/* Aplica-se Flex sempre no container geral */

.logo img{
  margin-top: 2rem;
  width:8em;
  height:7em;
}

header {
  display: flex;
  flex-direction: row; /*se ficará na horizontal(row) ou vertical (column)*/
  /*justify-content: space-between;*/
  justify-content:center;
  flex-wrap: wrap;

}

header > div{
  align-self: center;
}



main {
  display: flex;
  flex-direction: row; /*se ficará na horizontal(row) ou vertical (column)*/
  justify-content:space-around; /*alinhamento horizontal*/
  flex-wrap: wrap;
  padding: 10px;
  margin-top: 2rem;


}

main  div{
  flex-basis: 40%; /*largura da div*/
  text-align: center;
  flex-wrap: wrap;
  width:14rem;
  height:18rem;
  color: white;
  text-align: center;
  background-color: #363636;
  opacity:88%;
  font-size:1.5em;
  text-align: center;
  border:1px #fff;
  border-radius: 5px;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

main p{
  padding: 10px;
}

main input {
      width: 90%;
      color: #292929;
      background-color: #E9E9E9;
      border: 1px solid #E9E9E9;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
      text-indent: 10px;
      font-size:1em;
      margin: 3% 0 0 0;
    }



.botao{
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    width: 30%;
    padding: 10px;
    color: #FFFAFA;
    opacity:1;
    font-size: 1.3rem;
    letter-spacing: 1.4px;
    border-radius: 30px;
    color: #FFFAFA;
    opacity:1;
    background: #EC6433;
    border: none;
    border-bottom: 1px solid #500707;
    border-right: 1px solid #500707;
    transition: 1s;
}


  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media screen and (min-width:320px) and (max-width: 479px) {

    main  div{
      flex-basis: 90%; /*largura da div*/
      height:35vh;
      padding:10px;
    }

    .botao{
        width: 45%;
    }

}

  /* smartphones, Android phones, landscape iPhone  celular Landscape*/
@media screen and (min-width:480px) and (max-width: 767px)   {

   .logo img{
     width:8em;
     height:7em;
    }

    main  div{
      flex-basis: 80%; /*largura da div*/
      height:70vh;
      padding-top:2px;
      margin-top:-5rem;
    }

  }


  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android), */
  @media screen and (min-width: 768px) and (max-width: 800px)   {

    main  div{
      flex-basis: 80%; /*largura da div*/
      height:25vh;
      padding-top:2px;
      margin-top:-2rem;
    }

  }

  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android),
  Celular Luce */
  @media screen and (min-width: 768px) and (max-width: 800px) and (orientation : landscape)  {

     main  div{
      flex-basis: 60%; /*largura da div*/
      padding-top:2px;
      margin-top:-2rem;
    }

  }

  /* tablet, landscape iPad, lo-res laptops ands desktops */
  @media screen and (min-width: 801px) and (max-width: 1024px) {

     main  div{
      flex-basis: 60%; /*largura da div*/
      padding-top:2px;
      margin-top:-2rem;
    }

  }

  @media screen and (min-width: 1025px)  {

    main  div{
      flex-basis: 50%; /*largura da div*/
      height:40vh;

    }
  }