* {
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  /*background: url(../img/capa.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  min-height: 100vh;
  min-height: 100vh;
  color: #604b46;
  font-family: 'flamabook';
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.flex {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  min-height: 100vh;
}

.transition {
  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -o-transition: all ease .3s;
  transition: all ease .3s;
}

#overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(230, 218, 202, .25);
  z-index: -1;
}

header {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  position: absolute;
  width: 100%;
  top: 0;
}

header div {
  padding: 1rem;
}

.voltar {
  width: auto;
  font-family: 'flamabold';
  font-size: 1.3rem;
  text-transform: uppercase;
  position: fixed;
  top:5px; left: 5px;
}

.voltar i {
  /*content: "Especial: Santos-Dumont";*/
  margin-right: 8px;
}

.voltar a, .estadao a {
  text-decoration: none;
  color: #fff;
}

.voltar:hover, .estadao:hover {
  opacity: .5;
  cursor: pointer;
}

.seta-voltar {
  padding-right: 1rem;
}

.estadao {
  font-family: 'Marcas Estadão';
  font-size: 3rem;
  position: fixed;
  left: 50%;

  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.estadao a::before {
    content: "";
}

.main {
  position: relative;
  width:100%;
  padding: 0.5rem;
  text-align: center;
}
#resultOverlay .main {
  position: relative;
  width:100%;
  padding: 0.5rem;
  text-align: center;
}

#logo {
  width: 90%; max-width: 550px;
  /*max-height: calc(10% - 10px);*/
}
#shareFrame{
  width: 180px; height: 60px;
  margin-left: 5px;
}

h1 {
  text-transform: uppercase;
}

h1 span {
  display: block;
  text-align: center;
  text-transform: uppercase;
}

.texto {
  max-width: 530px;
  width: 90%;
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.5;
  color: #82716f;
  opacity:0.65;
  font-family: 'flamabook';
}
.texto.small {
  font-size: 1.8rem;
  text-align: center;
}
.divisor{
  width: 100%;
  max-width: 200px;
  display: inline-block;
}

.texto p {
  padding: 1.6rem;
}

nav {
  padding: 1rem;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
}


button {
  display: block; float: left;
  /*margin: 0 auto;*/
  /*border: 1px solid #fff;*/
  border:0;
  color: #fff;
  /*color: #333;*/
  background-color: #604b46;
  /*rgba(255,255,255,0.95);*/
  padding: 1rem 1.4rem;
  width: 180px;
  text-transform: uppercase;
  font-family: 'flama';
  letter-spacing: 0.05rem;
  font-size: 1.8rem;
  /*margin: 2rem;*/
  margin-top:5px;
  border-radius: 2px;
}
/*
button.tela-final {
  width: auto;
  margin: 1rem;
}*/

button:hover {
  cursor: pointer;
  opacity: .5;
}

button:focus {
  outline:0;
}
#btStartPlay{
  margin-right: 5px;
}
#btReplay {
  min-width: 120px;
  padding: 0.6rem 1rem;
  font-size: 1.4rem;
}



#resultado {
  text-transform: uppercase;
  text-align: center;
  font-size: 2.5rem;
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  font-family: 'flamabold';
  /*color: #333;*/
}
#distancia {
  text-transform: uppercase;
  text-align: center;
  font-size: 1.6rem;
  padding: 0.5rem;
  /*color: #555;*/
}

#distancia span {
  font-family: 'flamabold';
  font-size: 1.6rem;
}

/*
.owl-carousel div {
  width: 200px;
  height: 200px;
  background-color: blue;
}
*/

#constelacao {
}

.estrela {
  width: 45px;
  padding: 0.5rem;
}

/*
.voltar {
  font-size: 1.2rem;
  width: 100%;
  text-align: center;
  bottom: 5px; top: auto; left: 5px; right: 5px;
  padding: 1rem 0;
}*/


h4 {
  font-size: 1.8rem;
  font-family: 'flamabold';
  text-transform: uppercase;
  padding: 3rem 0 0 0;
  /*border-top: 1px solid #555;*/
}

/*@media screen and (max-width: 560px) {
  #estadao a::before {
    content: "";
  }
  #voltar::after {
    content: "voltar";
  }
  #voltar{
    bottom:10px;
  }
  .texto {
    max-width: 450px;
    font-size: 1.6rem;
  }
  .voltar {
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
    bottom: 5px; top: auto; left: 5px; right: 5px;
    padding: 1rem 0;
  }
}*/

@media screen and (min-width: 860px) and (max-width:1200px){
  .main {
    max-height: 90px;
    padding: 0.5rem;
  }
  #logo{
    width: 40%;
    max-height: 120px;
  }
  .texto, .texto.small  {
    max-width: 450px;
    font-size: 1.5rem;
  }
  .estrela {
    width: 28px;
    padding: 1rem;
  }
}

@media screen and (max-width: 860px), (max-height:580px){
  #logo {
    width: 40%;
    max-height: 90px;
  }
  .texto, .texto.small {
    max-width: 450px;
    font-size: 1.3rem;
  }

  .texto p {
    padding: 0.5rem;
  }
  .main {
    padding: 0rem;
  }
  #resultado {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.5rem;
    margin-top:3rem;
    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
    font-family: 'flamabold';
    /*color: #333;*/
  }
  #distancia {
    font-size: 1.3rem;
    padding: 0.2rem;
  }
  h4 {
    padding: 0.4rem 0 0 0;
    /*border-top: 1px solid #555;*/
  }
  .estrela {
    width: 22px;
    padding: 0.5rem;
  }
  .voltar {
    font-size: 1.2rem;
    width: auto;
    text-align: center;
    top: 5px; bottom: auto; left: 10px; right: auto;
    padding: 0.5rem 0;
  }

  button {
    min-width: 120px;
    display: block; float: left;
    padding: 0.6rem 1rem;
    font-size: 1.4rem;
  }
  #shareFrame{
    width: 180px; height: 40px;
    margin-left: 5px;
  }

  .estadao {
    font-size: 1.8rem;
  }
}