/* ====================================================
	Usar Ctrl+B para compilar o LESS
   ====================================================*/
/* -----------------------------------------------------
  Media Query Exemplos
  -----------------------------------------------------

@media only screen and (min-width: 320px) {}
@media only screen and (min-width: 480px) {}
@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 830px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1382px) {}

*/
/*-----------------------------------------------------
  Fontes
  -----------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,100);
@font-face {
  font-family: 'cervejaria_nacionalregular';
  src: url('fonts/cervejaria_nacional_2.0-webfont.html');
  src: url('fonts/cervejaria_nacional_2.0-webfont.woff') format('woff'), url('fonts/cervejaria_nacional_2.0-webfont.ttf') format('truetype'), url('fonts/cervejaria_nacional_2.0-webfont86d7.eot?iefix') format('embedded-opentype'), url('fonts/cervejaria_nacional_2.0-webfont.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fontCervejaria {
  font-family: 'cervejaria_nacionalregular', Arial, sans-serif;
}
.fontTexto {
  font-family: 'Roboto', sans-serif;
}
/*-----------------------------------------------------
	Cores de textos e links
  -----------------------------------------------------*/
.mail-link {
  text-decoration: none;
  color: inherit;
}
/*-----------------------------------------------------
	Tamanho dos textos
  -----------------------------------------------------*/
/*Tamanho base para os textos em (em), deve ser atribuído ao body do HTML.
  						Isso faz que 1em seja equivalente a 10px. Para transformar basta contar
  						uma casa para esquerda e colocar um ponto (.). Para textos de 14px
  						ficaria 1.4em para 36px ficaria 3.6em
  						----------------------------------------------------------------------*/
html,
body {
  font-size: 62.5%;
  height: 100%;
}
* {
  /*.tempoDeTransicao(0.3s);*/
}

.acesso {
  width: 100%;
  height: 100%;
  background-image: url(../images/bgAcesso.jpg);
  background-size: cover;
  background-position: top center;
  margin: 0;
  padding: 0;
}
.acesso .logoAcesso img {
  max-width: 100%;
}
.acesso p {
  font-family: 'Roboto', sans-serif;
  font-size: 3.5em;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.acesso p span {
  color: #dba515;
}
@media only screen and (min-width: 320px) {
  .acesso .logoAcesso {
    max-width: 100%;
    text-align: center;
    padding-top: 180px;
    margin-right: auto;
    margin-left: auto;
  }
  .acesso .logoAcesso a {
    font-family: 'Roboto', sans-serif;
    font-size: 8em;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
  }
  .acesso .logoAcesso a.amarelo {
    font-family: 'Roboto', sans-serif;
    font-size: 8em;
    text-transform: uppercase;
    color: #dba515;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
  }
  .acesso .logoAcesso a:hover {
    color: #ffffff;
  }
}
@media only screen and (min-width: 480px) {
  .acesso .logoAcesso {
    width: 398px;
    text-align: center;
    padding-top: 100px;
    margin-right: auto;
    margin-left: auto;
  }
  .acesso .logoAcesso a {
    font-family: 'Roboto', sans-serif;
    font-size: 10em;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
  }
  .acesso .logoAcesso a.amarelo {
    font-family: 'Roboto', sans-serif;
    font-size: 10em;
    text-transform: uppercase;
    color: #dba515;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
  }


  .acesso .logoAcesso a:hover {
    color: #dba515;
  }
}