@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
  /* Cores do cliente repete em estilo.css personalizacao + styles.css personalizacao + area-cliente.css  */
  --cor-principal: #FFFF14;
  --cor-principal-escuro: #AC3D03;
  --preto-escuro: #222324;
  --preto: #000;
  --branco: #FFF;  
  --success: #5AC648;
  --danger: #E91111;
  --warning: #FCB867;
  --info: #2D9CDB;
  --light: #F8F8F8;
  --dark: #24262B;
  --gray: #C4C6C8;
  --info: #2D9CDB;
  --azul: #4BF4FF;
  --shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  --center: translate(-50%, -50%);
  --center-y: translate(0, -50%);
  --animate: all 0.2s linear;
}


::-webkit-scrollbar {
  height: 6px;
  background-color: var(--cor-principal-escuro);
}

::-webkit-scrollbar-thumb {
	background-color: var(--cor-principal);
}


body {
  font-family: 'Roboto', sans-serif;
  background: url('../imagens/background.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: var(--cor-principal);
  font-size: 14px;
  padding: 0;
  margin: 0;
}

textarea {
  resize: none;
}
.max-h-160{
  max-height: 160px;
}
.max-w-440{
  max-width: 440px;
}
.text-disco{
  color: var(--branco);
  font-size: 22px;
  font-weight: 700;
}
.btn-jottaa{
  padding: 8px;
  width: 100%;
  max-width: 250px;
  font-weight: 700;
  background-color: var(--cor-principal);
  color: var(--branco);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn-jottaa:hover{
  transition: 0.45s ease-in-out;
  background: #4F95DA;
}
.creditos{
  font-size: 12px;
}
/*
.socials{
  position: fixed;
  bottom: 50%;
  right: 0;
  padding: 10px 20px;
  transform: translateY(50%);
}
*/
.socials{
  position: absolute;
  padding: 10px 20px;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  right: 0;
}
.socials .social a {
  color: var(--cor-principal);
}

.socials a {
  padding: 20px 0 10px;
  display: block;
  font-size: 1.3em;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  color: var(--cor-principal);
}
.socials a:hover{
  color: var(--cor-principal-escuro);
}

.menu-oculto{
  width: 100%;
  height: 20px;
  display: table;
  padding: 10px 0;
  background: #D51313;
  color: #FFF;
  font-weight: 700;
  font-size: 12px;
  position: absolute;
  z-index: 2;
  -webkit-box-shadow: 0px 10px 15px -12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 15px -12px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 15px -12px rgba(0,0,0,0.75);
}
.menu-oculto.open{
  left: 0;
}
.icone-menu{
  position: absolute;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  left: 20px;
  font-size: 20px;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.icone-menu.open{
  left: 260px;
}
.icone-menu a{
  color: var(--cor-principal);
}
a.linkJotta{
  float: left;
  margin: 0 25px;
  color: #FFF;
  text-decoration: none;
}
a.linkJotta:hover{
  color: var(--cor-principal-escuro);
  text-decoration: none;
}
p.paragrafo{
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 2em;
}
.centralizado-vertical{
  display: flex;
  align-items: center;
}
.redesMobile{
  font-size: 14px;
}
.central {
  width: auto;
  float: none;
  margin: 0 auto;
  display: table;
}
.redesMobile a{
  color: var(--cor-principal);
  font-size: 18px;
  float: left;
  margin: 10px;
}

.max-h-380{
  max-height: 380px;
}
.max-h-180{
  max-height: 180px;
}
.botao-vermelho{
  background: #b61a1a;
  padding: 15px 80px;
  color: #FFF;
  font-weight: 700;
  text-align: center;
  font-size: 24px;
  border-radius: 28px;
}
.botao-vermelho:hover{
  background: var(--cor-principal-escuro);
}
a.noUnderline,a.noUnderline:hover {
  text-decoration: none;
}
.mask{
  width: 100%;
  max-width: 655px;
  -webkit-mask-image: url('../imagens/mask.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  -webkit-mask-size: 100% 98%;
  mask-image: url('../imagens/mask.png');
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: 100% 98%;
}

.nav-item{
  font-weight: 700;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 1px;
}
.navbar{
  background: var(--cor-principal) !important;
}
.navbar-light .navbar-nav .nav-link {
  color: #FFF;
}