:root {
    --stripe-size: 100px;
    --color1: #fff;
    --color2: #3999EF;
    --duration: 2s;
  
    --color-green-fazeroq:          #71C05B;
    --color-blue-fazeroq:           #3999EF;
    --color-orange-fazeroq:         #e86934;
    --ambrosia:						#FCDBBA;
    --apricot: 						#FF8652;
    --aubergine: 					#6A2352;
    --auburn: 						#A12F2F;
    --asparagus: 					#A0C259;
    --beetroot:						#7F0421;
    --blue-tack: 					#82BFE0;
    --bloom:							#363A57;
    --blush: 							#D67B71;
    --bronze:							#C27940;
    --bud:								#94C15C;
    --burnt-orange:				#FF5F00;
    --butter:							#F2C94C;
    --strawberry-yogurt:	#E4BCAD;
    --carmine:						#9A133E;
    --chocolate: 					#8F5D38;
    --chestnut: 					#81291F;
    --clay: 							#7D6050;
    --conker: 						#6F3131;
    --coral: 							#EB4444;
    --dusty-purple: 			#7D6391;
    --dusty-pink: 				#E4ADAD;
    --emerald: 						#55B95F;
    --fern:								#4F8D08;
    --forest: 						#2E644A;
    --fudge:							#C28742;
    --grassy: 						#A8D363;
    --green:							#62B90A;
    --hazelnut: 					#D08E5A;
    --ink:								#292C31;
    --ivory:							#F2EFE3;
    --lapis:							#2B4D8D;
    --leafy:							#318553;
    --lemon:							#EAFC7E;
    --lime: 							#73D645;
    --limestone:					#C9C5B5;
    --magenta:						#BC2767;
    --meadow:							#7A9A3E;
    --melon:							#F2994A;
    --midnight:						#1B3955;
    --mink:								#E8C9A1;
    --mint:								#C4EA70;
    --moss:								#7DB21C;
    --mushroom:						#EDE8D5;
    --navy:								#363A57;
    --orange:							#FD8A04;
    --pale-lemon:					#F4FFDC;
    --peach:							#FFB190;
    --pond-bottom:				#264A46;
    --powder-blue:				#B5D0E0;
    --powder-pink:				#FBD1D1;
    --primrose:						#E1F7B0;
    --purple:							#A95AF3;
    --purple-slate:				#545375;
    --rainforest:					#25422E;
    --raspberry-jam:			#3C0D2B;
    --robins-egg:					#B8DEE0;
    --rouge:							#CC3737;
    --royal:							#4169E1;
    --ruby:								#D1314B;
    --sage:								#87A376;
    --sakura:							#FFE4E4;
    --sea-glass:					#7FD1AE;
    --sea-foam:						#5D998B;
    --sea-fog:						#758C92;
    --slate:							#7184A5;
    --spearmint:					#94E0CF;
    --spring:							#5ACB65;
    --succulent:					#83A944;
    --twilight:						#203763;
    --vavavoom:						#BF0D0D;
    --white:							#FFFFFF;
    --yellow:							#FFE03D;
    
    --trans: transparent;
    --trans05: rgba(255,255,255,0.05);
    --trans1: rgba(255,255,255,0.1);
    --trans2: rgba(255,255,255,0.2);
    --trans4: rgba(255,255,255,0.4);
    color-scheme: only light;
}

* {
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body, p, h1, ul, li, blockquote {
  padding: 0px;
  margin: 0px;
}

body {
  font-family: "Montserrat", Georgia, Serif;
  /*background: linear-gradient(180deg, #3999EF, #71C05B, #71C05B, #71C05B);*/
}

#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: linear-gradient(180deg, #3999EF, #3999EF, #71C05B, #71C05B);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  animation: fadeOut 3s forwards;
}

#logo_splash{
  height: 100px; 
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* link que ainda não foi visitado */
a:link {
   color: #000000;
}

/* link que foi visitado */
a:visited {
    color: inherit;
}

/* mouse over */
a:hover {
    color: #000000;
}

/* link selecionado */
a:active {
    color: #000000;
}

img {
  max-width: 100%;
}

textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
}

.slideshow-container-background {
    background: linear-gradient(180deg, #3999EFb0, #3999EFb0, #71c05bb0),url(/img/background.jpg);
}

/*Sombra*/
.element-text-shadow {text-shadow: 0 0 0.8em #444444;}
.element-text-shadow-small {text-shadow: 0 0 0.1em #444444;}
.element-text-shadow-hover:hover {text-shadow: 0 0 1em #444444;}

.element-box-shadow {box-shadow: 0 0 0.6em #444444;}
.element-box-shadow-hover{
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.element-box-shadow-hover:hover  {box-shadow: 0 0 1em #444444;}

.element-box-glow {box-shadow: 0 0 0.6em #FFFFFF;}
.element-box-glow-hover{
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.element-box-glow-hover:hover  {box-shadow: 0 0 1em #FFFFFF;}


.element-box-shadow-in {box-shadow: inset 0 0 0.5em #828181;}
.element-box-shadow-in-hover{
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.element-box-shadow-in-hover:hover  {box-shadow: inset 0 0 1em #828181;}

.element-box-shadow-neon {box-shadow: inset 0 0 0.5em #828181, 0 0 1em #444444;}
.element-box-shadow-neon-hover{
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.element-box-shadow-neon-hover:hover  {box-shadow: inset 0 0 1em #828181, 0 0 1em #444444;}

.fazeroq-centralizar-horizontal {
    display: flex;
    justify-content: center;
}

/*Cores FazerOQ*/
.cor-FazerOQ-1,
.cor-hover-FazerOQ-1:hover {
    color: #FFF!important;
    background: linear-gradient(180deg, #00000000,#3999EF,#3999EF,#3999EF);
}

.cor-FazerOQ-2,
.cor-hover-FazerOQ-2:hover {
    color: #FFF!important;
    background: linear-gradient(180deg,#3999EF,#3999EF,#3999EF, #00000000);
}

.cor-FazerOQ-3,
.cor-hover-FazerOQ-3:hover {
    color: #FFF!important;
    background: linear-gradient(180deg, #3999EF, #71C05B, #71C05B, #71C05B);
}

.cor-FazerOQ-4,
.cor-hover-FazerOQ-4:hover {
    color: #FFF!important;
    background: linear-gradient(180deg, #3999EF, #3999EF, #71C05B, #71C05B);
}

.cor-FazerOQ-5,
.cor-hover-FazerOQ-5:hover {
    color: #FFF!important;
    background: linear-gradient(180deg, #3999EF, #3999EF, #3999EF, #3999EF);
}

.cor-FazerOQ-6,
.cor-hover-FazerOQ-6:hover {
    color: #FFF!important;
    background: linear-gradient(180deg, #71C05B, #71C05B, #71C05B, #71C05B);
}

.cor-FazerOQ-7,
.cor-hover-FazerOQ-7:hover {
    color: #FFF!important;
    background: linear-gradient(180deg, #E86934, #E86934, #E86934, #E86934);
}

.cor-FazerOQ-8,
.cor-hover-FazerOQ-8:hover {
    color: #FFF!important;
    background: linear-gradient(180deg, #ef3939, #ef3939, #ef3939, #ef3939);
}

/*Zoom Element*/
.zoom-element{
  -webkit-transition: all 0.1s  ease-out;
  transition: all 0.1s ease-out;
}

.zoom-element:hover {
  -ms-transform: scale(1.08); /* IE 9 */
  -webkit-transform: scale(1.08); /* Safari 3-8 */
  transform: scale(1.08); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom-element-small{
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.zoom-element-small:hover {
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */
  transform: scale(1.01); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* width */
::-webkit-scrollbar {
  width: 0.6em;
  max-height: 0.6em;
}

/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 2px; */
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  background: linear-gradient(135deg, #3999EF, #3999EF);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 0.5em #FFF, 0 0 10em #444444
}

/* TOOTIP FAZEROQ */
.tooltip {
  position: absolute;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* GRID GERAL */
.estrutura > div{
  display: grid;
  grid-template-columns: minmax(80px, 0.7fr) 3.4fr minmax(80px, 0.7fr);
  grid-template-areas:
    "header header header"
    "sidenav content anuncios"
    "footer footer footer"
  ;
}

@media (max-width: 820px) {
  .estrutura > div{
    grid-template-columns: 100%; /* 1fr está bugando */
    grid-template-areas:
      "header"
      "content"
      "anuncios"
      "sidenav"
      "footer"
    ;
  }
}

/*Pagina principal*/
.pagina-home{
    padding: 0px 0px 5vh 0px;
}

/* HEADER fazeroq*/
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.header-fazeroq {
    grid-area: header;
    display: grid;
    z-index: 1000;
    margin: 0 0 5px 0;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(180deg, #3999EF,#3999EF,#3999EF, #00000000);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.header-fazeroq .nivel_1{
    /*height: 6rem !important;*/
    box-shadow: none;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.header-fazeroq-color {
    background: linear-gradient(180deg, #3999EF,#3999EF,#3999EF, #00000000);/*#608EE3;*/
}

.header-fazeroq-color .nivel_1{
    background: linear-gradient(180deg, #00000000,#00000000,#00000000, #00000000);/*#608EE3;*/
}

.menu-sticky-2 {
    transition: 0.3s;
    border-radius: 2em 2em 0.5em 0.5em ;
    box-shadow: 0 0 0.6em #FFFFFF;
}

.menu-sticky-2 a{
    transition: 0.3s;
    font-size:8px;
    color : #3999EF;
}

.menu-sticky-2.nivel_2 {
    border-radius: 0 0 2em 2em;
    box-shadow: 0px 8px 2em 0px #444444;
    background: linear-gradient(180deg, #3999EF,#3999EF,#3999ef);
}

.menu-sticky-2.nivel_2 a {
    color : #FFFFFF;
}



.menu-sticky-3 {
    transition: 0.3s;
    font-size:20px;
}

.menu-sticky-3.nivel_3 {
    font-size:16px;
}

.menu-sticky {
    transition: 0.1s;
}

.menu-sticky.nivel_1 {
    /*padding:5px;*/
}

.menu-sticky.nivel_1 .logo-fazeroq-cel{
    display:none;
}

.menu-sticky.nivel_1 .img-logo-fazeroq-header{
    height:60px;
    margin-bottom:0px;
}

.menu-sticky.nivel_1 h2{
    font-size: 1.3em;
    display:none;
}

.menu-sticky.nivel_1 span{
    display:none;
}

.menu-sticky.nivel_1 input{
    height:30px;
}

.menu-sticky.nivel_1 .botao-pesquisa{
    height:25px;
}



.header-fazeroq nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.header-fazeroq nav a {
  display: block;
  padding: 10px;
  color: black;
  font-size: 1.125em;
  background: linear-gradient(135deg, #FFFFFF, #FFFFFF);
  border-radius: 5px;
  transition: 0.1s;
}

.header-fazeroq nav a:hover {
  background: linear-gradient(135deg, #cacaca, #FFFFFF);
}

.header-fazeroq li + li {
  margin-left: 30px;
}

.img-logo-fazeroq {
  max-width: 30px;
  border-radius: 50%;
}

.img-logo-fazeroq-header {
  max-width: 60px;
  /*border-radius: 50%;*/
}

.pesquisa-fazeroq input{
    margin: 10px;
    padding: 12px;
    border: none;
    min-width: 55%;
    height: 100%;
    width: 100%;
    border-radius: 50px;
}

.cupom-fazeroq {
  /*border: 6px dotted #e86934;*/
  border: 4px solid #e86934;
  border-radius: 15px;
}

.cupom-fazeroq-rota {
    min-width: 220px;
    /*height: 165px;*/
    text-align: center;
    border-radius: 5px;
    position: relative;
    padding: 5px;
    margin: auto 15px;
    border: 4px solid #e86934;
    border-radius: 1em;
    margin: 5px 0 5px 30px;
    background: #ffffff;
}

.OQTemAqui-card {
    background-color:#3999EF;
    width: 90px;
    height: 90px;
    text-align: center;
    font-size: 0.55em;
    border-radius: 5px;
    position: relative;
    /*padding: 5px;margin: auto 15px;*/
    padding: 0px;
    margin:2px 2px 2px 2px;
    color : #FFFFFF;
    text-decoration: none;
}

.card-OQTemAqui {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 15px;
}

.horario-card {
    background-color:#3999EF;
    width: 90px;
    height: 90px;
    text-align: center;
    font-size: 0.55em;
    border-radius: 5px;
    position: relative;
    /*padding: 5px;margin: auto 15px;*/
    padding: 0px;
    margin:2px 2px 2px 2px;
    color : #FFFFFF;
    text-decoration: none;
}

.card-horario {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 15px;
}

.oqencontra-card {
    background-color:#3999EF;
    width: 90px;
    height: 90px;
    text-align: center;
    font-size: 0.55em;
    border-radius: 5px;
    position: relative;
    /*padding: 5px;margin: auto 15px;*/
    padding: 0px;
    margin:2px 2px 2px 2px;
    color : #FFFFFF;
    text-decoration: none;
}

#oqencontra_conteudo {
    flex-wrap: nowrap;
    align-items: center;
}

.card-oqencontra {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 15px;
}

.card-tipoRotaOQPass {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #FFFFFF;
    padding: 10px 10px;
    border-radius: 10px;
}

.card-OQPlace {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #FFFFFF;
    padding: 10px 10px;
    border-radius: 10px;
}

.card-resultados {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 0.5em;
    padding: 5px;
    margin: 5px 0px;
    background: linear-gradient(180deg, #ffffffb0, #ffffffb0, #ffffffb0),url(/img/background.jpg);
    box-shadow: inset 0 0 0.5em #828181;
} 

.card-resultado {
    width: 220px;
    float: left;
    border-radius: 5px;
    margin: 20px;
    cursor: pointer;
}

.card-legenda {
    position: relative;
    background-color: #E86934;
    padding: 10px 10px;
    border-radius: 10px;
}

.item-pesquisa {
	margin : 0px;
}

.botao-pesquisa {
    align-self: start;
    min-width: 45px;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    background: #E86934;
    margin: 10px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 50px;
    width: 100%;
    height: 100%;
}

.star-rating input {
    display: none;
}

.star-rating {
    margin: 1px auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.star-rating label {
    padding: 10px;
    float: right;
    font-size: 30px;
    color: #eee;
}

.star-rating input:not(:checked)~label:hover,
.star-rating input:not(:checked)~label:hover~label {
    color: #ffc107;
}

.star-rating input:checked ~label:before, .star-rating-checked  {
    color: #feff00 !important;
    background: -webkit-linear-gradient(#feff00, #ff9a00);
    -webkit-background-clip: text;
    background: linear-gradient(#feff00, #ff9a00);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.botao-pesquisa:hover {
  background: #3B3E6D; /*linear-gradient(135deg, #50bd67, #50bd67);*/
}

.botao-pesquisa i {
  font-size: 1.2em;
  margin: 0 auto;
  color: white;
}

@media (max-width: 820px) {
	.item-pesquisa {
		margin : 5px 10px 5px;
	}
	
	.menu-sticky.nivel_1 .img-logo-fazeroq-header{
        margin-bottom: 30px;
    }
    
    .menu-sticky-2.nivel_2 a {
        color : #FFFFFF;
    }
    
    .card-resultado {
        width: 100%;
        float: none;
        margin: 0;
    }
}

.botao-local {
  background: linear-gradient(135deg, #FFFFFF, #FFFFFF);
  border: 3px solid #FFFFFF;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
}

.valor-pedido {
    display: none;
    padding: 0px;
    text-align: center;
    background: linear-gradient(135deg, #ffffff, #b8d8b3);
    border-radius: 5px;
    border: 3px solid #720033;/*#ff7a00;*/
    margin: 5px;
    padding: 5px;
    font-family: 'Montserrat';
    position: fixed;
    top: 0;
    right: 0;
}

.valor-pedido p {
    font-weight: 700;  
    font-size: 1em;
    color: #50bd67;
}

@keyframes mostra-dinheiro {
	from {
		opacity: 0;
		transform: translate3d(200px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes esconder-dinheiro {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(200px, 0, 0);
	}
}

.mostrar-dinheiro {
    display: flex;
	animation: mostra-dinheiro .3s forwards;
}

.esconder-dinheiro {
    display: flex;
	animation: esconder-dinheiro .3s forwards;
}

.botao-lateral {
    max-width: 80px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.botoes-lateral {
    display: none;
    max-width: 80px;
    position: fixed;
    bottom: 15vh;
    right: 0;
}

@keyframes mostra-botoes-lateral {
	from {
		opacity: 0;
		transform: translate3d(0, 400px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes esconder-botoes-lateral {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(0, 400px, 0);
	}
}

.mostrar-botoes-lateral {
    display: block;
	animation: mostra-botoes-lateral .2s forwards;
}

.esconder-botoes-lateral {
    display: block;
	animation: esconder-botoes-lateral .2s forwards;
}

.itens-lateral {
    /*width: 100px;*/
    position: fixed;
    bottom: 3vh;
    /*top: 0px;*/
    right: 0px;
    z-index: 90;
    justify-content: center;
    align-items: right;
}

.img-botao-local {
	padding: 0px;
	/*height: 120px;*/
}

.img-produto{
  max-width:100%;  
}

.legenda {
  font-family:Montserrat;
  position:relative;
  /*font-weight: 700;  
  font-style: italic;*/
  font-size: 1em;
  text-align: center;
  margin: 10px 30px 5px;
  color: #FFFFFF; 
}

.legenda-tipoRotaOQPass {
  font-family:Montserrat;
  position:relative;
  font-weight: 700;  
  font-size: 1em;
  text-align: center;
  margin: 10px 30px 0;
  color: #e86934; 
}

.legenda-card {
  font-family:Montserrat;
  position:relative;
  /*font-weight: 700;*/
  font-size: 1em;
  text-align: center;
  /*min-height: 50px;*/
  color: #FFFFFF;
}

.legenda-filtros-categoria {
  font-family:Montserrat;
  position:relative;
  font-weight: 700;  
  font-size: 1em;
  text-align: center;
  margin: 10px 30px 0;
  color: #e86934; 
}

/*TITULO fazeroq*/
.titulo-fazeroq{
    display: block;
    color: #FFFFFF;  
}

.titulo-fazeroq h2 {
    font-family: Montserrat;
    font-size: 2em;
    /*font-weight: 400;*/
    line-height: 0.1;
}

.titulo-fazeroq span {
  font-size: 0.8em;
  font-style: italic;
}

/* HEADER */

.header {
  grid-area: header;
  /*background: linear-gradient(135deg, #720033, #000000);*/
  padding: 30px;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
}

.logo {
  max-width: 200px;
  border-radius: 50%;
}

.img-logo {
  border-radius: 50%;
  max-width: 150px;
}

.img-button {
  display: block;
  margin: auto;
}

.header nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.header nav a {
  display: block;
  padding: 10px;
  font-size: 1.125em;
  transition: 0.1s;
}

.header nav a:hover {
  background: linear-gradient(135deg, #720033, #720033); 
  border-radius: 5px;
  color: white;
}

.header li + li {
  margin-left: 30px;
}

.centralizar-item-padrao{
  display: flex;
  align-items: center;
  justify-content: center;
}

.centralizar-item-mobile{
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-fazeroq-cel {
    margin-bottom: 0px;
    display:none;
}

.itens-titulo-fazeroq{
  display:block;
}

@media (max-width: 820px) {
    .header {
        grid-template-columns: auto;
    }
    
    .header-fazeroq {
        grid-template-columns: auto;
    }
    
    .titulo-fazeroq{
        display: none;
    }
    
    .logo-fazeroq {
        /*margin-bottom: -40px;*/
        display:none;
    }
    
    .logo-fazeroq-cel {
        display:block;
    }
    
    
    .logo-fazeroq-cel {
        display:block;
    }
    
    .pdr-cel {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .header nav a {
        font-size: 1em;
    }
    
    .header li + li {
        margin-left: 10px;
    }
  
    .itens-titulo-fazeroq{
        display:none;
    }
    
    .centralizar-item-mobile{
        display: flex;
        align-items: center;
        justify-content: left;
    }
}

/* SIDENAV */

.sidenav {
  grid-area: sidenav;
															
  margin: 5px 10px 10px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 9px solid #FFFFFF;
  border-radius: 1em;
  box-shadow: inset 0 0 0.5em #828181;
  transition: 0.5s;
}

.sidenav ul {
	margin: 15px 15px;
}

.sidenav-item a {
  display: block;
  min-height: 60px;
  min-width: 60%;
  margin: 0 auto 20px auto;
  text-align: center;
  color:#fff;
  background: #3999ef;
  border-radius: 5px;
  padding: 20px;
  transition: .1s ease-out;
}

.sidenav-item-list div {
  margin: 0 auto 20px auto;
  text-align: center;
  color:#fff;
  background: #3999ef;
  border-radius: 5px;
  padding: 20px;
  transition: .1s ease-out;  
}

.sidenav-item-list a {
  color:#fff;
}

.sidenav-item-list a:hover {
  color: #FFFFFF;
}

.icon-segmento {
    font-size:30px;
    display:block;
}

.legend-segmento {
    font-size:10px;
}

.sidenav i {
  font-size: 3em;
}

.sidenav span {
  font-family:Montserrat;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.5;
}

.footer-segmento{
    display: block;
}

.legenda-sidenav {
    font-family: Montserrat;
    position: relative;
    /*font-weight: 700;*/
    font-size: 0.8em;
    text-align: center;
    min-height: 20px;
    color: #FFFFFF;
    background-color: #E86934;
    padding: 10px 10px;
    border-radius: 1em 1em 0px 0px;
    top: 20px;
    margin: 10px;
    z-index: -1;
}

@keyframes seta {
  from {
    right: 30px;
  }
  to {
    right: 20px;
  }
}

.menu-segmento-open{
   height: 100%;
}

.sidenav-conteudo {
    display: block;
    border-radius: 1em;
    height: 80%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
}

.check-segmento{
    display: none;
}

.prx-segmento {
    display: none;
}

.footer-sidenav {
    display: none;
}
    
@media (max-width: 820px) {
    .body-block-scroll{
       overflow: hidden;
    }
    
    .pagina-home{
        padding: 0px 0px 140px 0px;
    }
    
    #nome_pesquisa{
        display: none;
    }
    
    .menu-segmento-close{
       height: 0%;
    }
    
    .sidenav {
        position: relative;
        overflow-x: auto;
        min-height: 55px;
        margin: 0px 0px 0px 0px;
        background: #3999ef;
        border-radius: 0px;
        box-shadow: 0 0;
        border: 0px;
        border-radius: 0px;
        height: 100%;
        padding: 0 10px;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    
    .sidenav-conteudo {
        background-color: #fff;
        margin: 10px;
    }
    
    .sidenav ul {
        display: flex;
        flex-wrap: nowrap;
	    margin: 5px 0px 0px;
    }
    
    .sidenav-item {
        flex: 1 0 60px;
    }
    
    .sidenav-item a {
        margin: 0px 0px 0px 0px;
        min-height: 5px;
        min-width: 15vw;
        color: #FFFFFF;
        box-shadow: 0 0;
        background: #3999ef00;
        padding: 5px 5px 5px 0;
        /*border: 2px solid #3999ef;
        border-radius: 5em;*/
    }

    .sidenav-item-list {
        border-radius: 0.2em;
        border : 1px solid #e1e1e1;
        padding: 0px 15px;
    }

    .sidenav-item-list div {
        display: flex;
        min-height: 50px;
        width: 100%;
        color: #3999ef;
        background: #ffffff00;
        text-align: left;
        box-shadow: 0 0;
        margin: auto auto auto auto;
        padding: 5px 5px 0px 5px;
    }
    
    .sidenav-item-list a {
        display: flex;
        flex: 6;
        color: #3999ef;
        background: #ffffff00;
    }
    
    .sidenav-item-list a:hover {
        color: #3999ef;
        background: #ffffff00;
    }

    .check-segmento {
        display: block;
        text-align: center;
        font-size: 5px;
        flex: 1;
    }

    .icon-segmento {
        display: inline;
        text-align: center;
        font-size: 8px;
        flex: 1;
    }
    
    .legend-segmento {
        font-size:8px;
        flex: 5;
    }
    
    .prx-segmento {
        display: block;
        text-align: center;
        font-size:8px;
        flex: 1;
    }
    
    .sidenav-item-list .select-now {
        color:#fff;
        background: #3999ef;
        padding:5px;
        border-radius:0.5em;
    } 
    
    .sidenav-item .icon-segmento {
        font-size:20px;
    }
    
    .sidenav-item .legend-segmento {
        font-size:8px;
    }
    
    .sidenav-item .select-now {
        color:#fff;
        background: #3999ef;
    } 
    
    #filter_search {
        padding: 20px 10px 0;
    }
    
    .footer-sidenav {
        display: block;
        position: fixed;
        background: #3999ef;
        bottom: 0px;
        width: 100vw;
        height: 60px;
    }
    
    .legenda-sidenav {
        border-radius: 5em 5em 0px 0px; 
        background: #3999ef;
        color:#FFFFFF;
						   
        box-shadow: 0 0 0.6em #444444;
        top: 5px;
        min-height: 10px;
        padding: 0px 2px;
        margin: 0px 0px 0px;
        height: 5%;
    }
    
    .legenda {
        
    }
    
    .filter-content {
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 1000;
        width: 100vw;
        transition: .5s ease-out;  
    }
    
    .seta-direcao:before {
        content: '→';
        position: absolute;
        z-index:95; 
        top: 400px;
        right: 30px;
        color: rgba(0,0,0,.3);
        animation: seta .5s ease-in 0s infinite alternate;
    }
}

@media (min-width: 820px) {
    .sidenav {
        max-height: 65vh;
        overflow-y:auto;
        overflow-x:hidden;
    }
  
    .filter-content{
        top: 50px;  
        position: -webkit-sticky;
        position: sticky;
    }
}

/* CONTENT */

.content{
    grid-area: content;
}

.content2{
    grid-area: content2;  
}

/* ANUNCIOS */
/* SIDENAV */

.anuncios {
  grid-area: anuncios;
  /*background: linear-gradient(135deg, #720033, #720033);*/
  margin: 5px 10px 10px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 9px solid #FFFFFF;
  border-radius: 1em;
  box-shadow: inset 0 0 0.5em #828181;
}

.anuncios ul {
	margin: 15px 15px;
}

.anuncios-item a {
    display: block;
    min-height: 100px;
    width: 90%;
    margin: 0 auto 20px auto;
    text-align: center;
    color: #fff;
    background: #3999ef;
    border-radius: 5px;
    padding: 5px;
    /*transition: .1s ease-out;*/
}

.cupom-anuncios {
    min-width: 220px;
    height: 165px;
    text-align: center;
    border-radius: 5px;
    position: relative;
    padding: 5px;
    margin: auto 15px;
    border: 4px solid #e86934;
    border-radius: 1em;
    margin: 5px 0 5px 30px;
    background: #ffffff;
}

.anuncios i {
  font-size: 6em;
}

.anuncios span {
  font-family:Montserrat;
  font-size: 1em;
  font-weight: 900;
  line-height: 1.5;
}

.anuncios-item a:hover {
  /*background: #E86934;*/
  color: #FFFFFF;
}

.legenda-anuncios {
    font-family: Montserrat;
    position: relative;
    font-weight: 700;
    font-size: 0.8em;
    text-align: center;
    min-height: 20px;
    color: #FFFFFF;
    background-color: #E86934;
    padding: 10px 10px;
    border-radius: 1em 1em 0 0;
    top: 20px;
    margin: 10px;
    z-index: -1;
}

@media (max-width: 820px) {
    .legenda-anuncios {
        padding: 10px 10px;
        border-radius: 1em;
        margin: 5px 0px;
        top: 0px;
    }
    
    .anuncios {
        margin: 0px;
    }
}

@media (min-width: 820px) {
    .anuncios {
        max-height: 65vh;
        overflow-y:auto;
        overflow-x:hidden;
    }

    .anuncios-content{
        top: 50px;  
        position: -webkit-sticky;
        position: sticky;
    }
}

/* BOTOES FOOTER*/
.divFlutuante {
    width: 100px;
    /*height: 70vh;*/
    position: fixed;
    z-index: 95;
    right: -0.5rem;
    bottom: 1rem;
}

/*Layout input*/
.column-input {
	padding: 10px 15px 5px 15px;
}

.column {

}

.column-left {
  float: left;
}

.column-right {
  float: right;
}

.row-column:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
	.column {
		width: 100%;
	}
  
	.column-field {
		padding: 15px 15px;
	}

	.column-left {
		width: 100%;
	}

	.column-right {
		width: 100%;
	}
}

.app-container:after,
.app-container:before,
.app-panel:after,
.app-panel:before,
.app-row:after,
.app-row:before,
.app-row-padding:after,
.app-row-padding:before,
.app-cell-row:before,
.app-cell-row:after,
.app-clear:after,
.app-clear:before,
.app-bar:before,
.app-bar:after {
	content: "";
	display: table;
	clear: both
}

.app-cell-row{
    display:table;
    width:100%;
}

.app-cell{
    display:table-cell
}

.app-cell-top{
    vertical-align:top
}

.app-cell-middle{
    vertical-align:middle
}

.app-cell-bottom{
    vertical-align:bottom;
}

.app-left-align{
    text-align:left!important
}

.app-left{
    float:left!important
}

.app-right{
    float:right!important
}

.app-right-align{
    text-align:right!important
}

.app-justify{
    text-align:justify!important
}

.app-center{
    text-align:center!important
}

.app-col,
.app-half,
.app-third,
.app-twothird,
.app-threequarter,
.app-quarter {
	float: left;
	width: 100%
}

.app-col.s1 {
	width: 8.33333%
}

.app-col.s2 {
	width: 16.66666%
}

.app-col.s3 {
	width: 24.99999%
}

.app-col.s4 {
	width: 33.33333%
}

.app-col.s5 {
	width: 41.66666%
}

.app-col.s6 {
	width: 49.99999%
}

.app-col.s7 {
	width: 58.33333%
}

.app-col.s8 {
	width: 66.66666%
}

.app-col.s9 {
	width: 74.99999%
}

.app-col.s10 {
	width: 83.33333%
}

.app-col.s11 {
	width: 91.66666%
}

.app-col.s12 {
	width: 99.99999%
}

@media screen and (max-width: 870px) {
    .app-col.s1, .app-col.s2, .app-col.s3, .app-col.s4, .app-col.s5, .app-col.s6, .app-col.s7, .app-col.s8, .app-col.s9, .app-col.s10, .app-col.s11, .app-col.s12{
    	width: 100%
    }
}


@media (min-width:820px) {
	.app-col.m1 {
		width: 8.33333%
	}
	.app-col.m2 {
		width: 16.66666%
	}
	.app-col.m3,
	.app-quarter {
		width: 24.99999%
	}
	.app-col.m4,
	.app-third {
		width: 33.33333%
	}
	.app-col.m5 {
		width: 41.66666%
	}
	.app-col.m6,
	.app-half {
		width: 49.99999%
	}
	.app-col.m7 {
		width: 58.33333%
	}
	.app-col.m8,
	.app-twothird {
		width: 66.66666%
	}
	.app-col.m9,
	.app-threequarter {
		width: 74.99999%
	}
	.app-col.m10 {
		width: 83.33333%
	}
	.app-col.m11 {
		width: 91.66666%
	}
	.app-col.m12 {
		width: 99.99999%
	}
}

@media (min-width:993px) {
	.app-col.l1 {
		width: 8.33333%
	}
	.app-col.l2 {
		width: 16.66666%
	}
	.app-col.l3 {
		width: 24.99999%
	}
	.app-col.l4 {
		width: 33.33333%
	}
	.app-col.l5 {
		width: 41.66666%
	}
	.app-col.l6 {
		width: 49.99999%
	}
	.app-col.l7 {
		width: 58.33333%
	}
	.app-col.l8 {
		width: 66.66666%
	}
	.app-col.l9 {
		width: 74.99999%
	}
	.app-col.l10 {
		width: 83.33333%
	}
	.app-col.l11 {
		width: 91.66666%
	}
	.app-col.l12 {
		width: 99.99999%
	}
}

.app-row-padding,
.app-row-padding>.app-half,
.app-row-padding>.app-third,
.app-row-padding>.app-twothird,
.app-row-padding>.app-threequarter,
.app-row-padding>.app-quarter,
.app-row-padding>.app-col {
	padding: 0 0px;
	margin: 8px;
}

/* FOOTER */

.footer {
    align-items: center;
    grid-area: footer;
    z-index:95; 
    background: linear-gradient(180deg,  #00000000,#3999EF,#3999EF,#3999EF);
    position: fixed;
    bottom: 0px;
    width: 100%;
    /*height: 50px;*/
}

/* GRID DO CONTENT */

.content, content2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 5px;
  align-content: start;
  justify-content: space-around;
  grid-auto-rows: min-content;
}

@media (max-width: 820px) {
  .content {
    margin: 0px 0px;
  }
  .content2 {
    margin: 0px 10px;
  }
}

.col-wide {
  /* A coluna vai do 1 até o último, por isso -1, assim pega todas as colunas */
  grid-column: 1 / -1;
}

.imagem-1 {
  /* span 2 significa que ess imagem vai ocupar 2 linhas e será alinhada ao final dela sempre. */
  /*grid-row: span 2;*/
  align-self: end;
}

.imagem-2 {
  align-self: end;
}

/* ESTILOS DO CONTENT */

p {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -.005em;
  color: rgba(0, 0, 0, 0.7);
}

.informacoes p + p {
  margin-top: 30px;
}


/* TITULO */
.titulo {
  color: #FFFFFF;
}

.titulo h1 {
  font-size: 3.0em;
  font-weight: 700;
  line-height: 1;
}

.titulo span {
  font-size: 0.875em;
  font-style: italic;
}


/*Introdução*/
.introducao {
  color: #FFFFFF;
}
/* CARACTERISTICAS */

.caracteristicas {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: flex-start;
  padding: 5px 1px;
  /*background: #FFFFFF; */
  background: linear-gradient(180deg, #ffffffb0, #ffffffb0, #ffffffb0),url(/img/background.jpg);
  border-radius: 10px;
}

.map-layout {
    height: 65vh;
    width: 100%;
}

.oqplaces-map {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 15px 15px;
    background: #FFFFFF; 
    border-radius: 10px;
    top: 100px;
}

.oqplaces-col {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.caracteristicas .oqplace-fazeroq {
  width: 280px;
  height: 280px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: 30px;
  /*padding: 5px;*/
  margin: 10px;
  background: linear-gradient(180deg, #3999EFb0, #3999EF, #71C05B, #71C05B);
}

.caracteristicas .cupom-fazeroq {
  min-width: 220px;
  height: 165px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: 30px;
  padding: 5px;
  margin: auto 15px;
}

.caracteristicas-tiporota {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: flex-start;
  padding: 5px 5px;
  background: #FFF;/*#e86934;*//*#3999ef;*/ 
  border-radius: 10px;
  margin: 5px 0px;
  color: #e86934;/*#fff;*/ 
}

.caracteristicas-tiporota {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.caracteristicas-tiporota .tiporota-fazeroq {
  min-width: 100px;
  max-width: 150px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: 10px;
  padding: 5px;
  margin: auto 15px;
  cursor: pointer;
}

.caracteristicas-tiporota .tiporota-fazeroq a{
  color: #fff; 
}

.caracteristicas-filtros-categoria {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: flex-start;
  padding: 5px 5px;
  background: #FFF;/*#e86934;*//*#3999ef;*/ 
  border-radius: 10px;
  margin: 5px 0px;
  color: #e86934;/*#fff;*/ 
}

.caracteristicas-filtros-categoria .filtros-categoria-fazeroq {
  min-width: 100px;
  max-width: 150px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: 10px;
  padding: 5px;
  margin: auto 15px;
  cursor: pointer;
}

.caracteristicas-filtros-categoria .filtros-categoria-fazeroq a{
  color: #fff; 
}

.numero {
  color: #FFF;
  font-size: 3em;
  line-height: 1;
  margin: 10px auto;
}

.rotulo-top {
  background: #e86934;
  border-radius: 5px 5px 0 0;
  color: #FFF;
  padding: 0px 0px;
  position: relative;
  top: -2px;
}

.rotulo-botton {
  font-family:Montserrat;
  background: #e86934;
  /*border-radius: 0 0 5px 5px;*/
  color: #FFF;
  padding: 0px 20px;
  position: relative;
  /*width: 100%;*/
  bottom: 2px;
}

.rotulo-top-rota {
  background: #e86934;
  border-radius: 0.5em;
  color: #FFF;
  padding: 0px 0px;
  position: relative;
  top: -2px;
}

.rotulo-botton-rota {
  font-family:Montserrat;
  background: #e86934;
  border-radius: 0.5em;
  color: #FFF;
  padding: 0px 0px;
  position: relative;
  width: 100%;
  bottom: 2px;
}

.caracteristicas span {
  display: block;
}

.botao-comprar {
  align-self: start;
  padding: 30px;
  border-radius: 5px;
  background: linear-gradient(135deg, #50bd67, #50bd67);
}

.botao-comprar p {
  font-size: 1.5em;
  font-style: italic;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  color: white;
}

.botao-menu {
  background: linear-gradient(135deg, #FFFFFF, #FFFFFF);
  border-radius: 5px;
  color: #720033;
}

.botao-selecionado {
  background: linear-gradient(135deg, #720033, #720033); 
  border-radius: 5px;
  color: white;
}

.custon-label-valor {
    float: right;
    font-weight: 700;
}

.custon-checkbox input {
    display: none;
}

.custon-checkbox input + div label:after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: white;
    border: 1px solid gray;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 10px;
    float: right;
}

.custon-checkbox input:checked + div label:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 10'%3E%3Cg class='nc-icon-wrapper' stroke-width='1' fill='%23555555'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' data-cap='butt' d='M2.83 4.72l1.58 1.58 2.83-2.83'/%3E%3C/g%3E%3C/svg%3E");
    background-color: green;
    background-position: center;
    /*box-sizing: border-box;
    border: 5px solid green;*/
    border:none;
    padding: 1px;
    width: 20px;
    height: 20px;
}

@media (max-width: 820px) {
    .oqplaces-col {
        flex-wrap: unset;
        flex-direction: initial;
        justify-content: flex-start;
    }
    
    .caracteristicas .oqplace-fazeroq {
        min-width: 80vw;
        min-height: 100px;
    }
    
    .map-layout{
        height: 55vh;
    }
}

/* DESTAQUE */

.destaque {
  font-size: 0.875em;
  color: #000000;
  max-width: 16em;
}

.detalhes-home > div {
  margin: 15px 0px 15px;
}

.detalhes-sobre-local > div {
  margin: 15px 0px 15px;
}

.detalhes-cardapio-local > div {
  margin: 15px 0px 15px;
}

.detalhes-produto-local > div {
  margin: 15px 0px 15px;
}

.citacao, .atributos {
  align-self: start;
  border-radius: 5px;
  background: linear-gradient(135deg, #720033, #720033);
}

.citacao  {
  padding: 30px;
  text-align: center;
}

.citacao span {
  font-size: 0.875em;
  font-style: italic;
  color: white;
}

.citacao p {
  font-size: 1.5em;
  font-style: italic;
  max-width: 500px;
  margin: 0 auto;
  color: white;
}

.atributos {
    padding: 30px;
}

.atributos li {
  color: white;
  font-family: Courier, monospace;
  font-size: 1.125em;
  padding: 15px;
}

.atributos div {
  color: white;
  font-family: Courier, monospace;
  font-size: 1.125em;
  padding: 10px 0px;
}

.atributos a {
  color: white;
}


.atributos div + div {
  border-top: 2px solid #FFFFFF;
}

.footer p {
  color: white;
  text-align: center;
  padding: 0px 0px 0px 0;
}

/*Slides*/
.slider {
	width: 90%;
	/*margin: 10px auto 10px;*/
}

.slick-slide {
	margin-bottom: 0;
	margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: #D22F2F;
  font-size: 30px;
}

.swiper-button-prev, .swiper-button-next {
    color: #FFFFFF;
    background-color: #3999ef;
    padding:28px 18px;
    border-radius: 0.5em;
}

.slick-prev{
	left: -30px;
	/*-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;*/
}
.slick-prev:hover{
  /*-ms-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  transform: scale(1.08); */
}

.slick-next{
	right: -20px;
	/*-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;*/
}
.slick-next:hover{
  /*-ms-transform: scale(1.08); 
  -webkit-transform: scale(1.08);
  transform: scale(1.08);*/
}

.slick-slide {
  transition: all ease-in-out .3s;
  /*opacity: .2;*/
}

.center .slick-current {
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	opacity: 1;
}

/*.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: .8;
}

.slick-slide:hover {
  opacity: 1;
}*/

.slick-list {
	overflow: hidden;
}

.slick-track {
    /*margin-top: 5%;*/
    /*margin-bottom: 5%;*/
}

.lista-pedidos{
    padding: 20px;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/*.modal li {
  color: white;
  font-family: Courier, monospace;
  font-size: 1.125em;
}

.modal div {
  color: white;
  font-family: Courier, monospace;
  font-size: 1em;
  padding: 5px;
}

.modal a {
  color: white;
}*/

@keyframes modal {
	from {
		opacity: 0;
		transform: translate3d(0, -60px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.mostrar-modal .modal {
	animation: modal .3s;
}

.botao-comprar-modal {
  align-self: start;
  width:100px;
  height:50px;
  padding: 10px;
  border-radius: 5px;
  background: linear-gradient(135deg, #50bd67, #50bd67);
}

.botao-comprar-modal span {
    padding: 5px;
  	font-size: 1.2em;
}

.botao-comprar-modal img {
  height:50px;
}

.fechar-modal {
	position: absolute;
	font-size: 3em;
	top: -10px;
	right: -10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 4px solid #720033;
	background: #988b7a;
	color: white;
	font-family: "PT Mono", monospace;
	cursor: pointer;
}

/*Local*/
.modal-titulo-local{
	color: white;
	font-family: "Montserrat", monospace;
	font-size: 2em;
    font-weight: 200;
}

.modal-cidade-estado-local{
	color: white;
	font-family: "Montserrat", monospace;
	font-size: 1.5em;
}

.modal-titulo-categoria-local{
	color: white;
	font-family: "Montserrat", monospace;
	font-size: 1.2em;
}

.modal-categorias-local {
  position: relative;
  overflow-x: auto;
  display: flex;
  align-items: flex-start;
  padding: 10px 10px;
  background: #3B3E6D; 
  border-radius: 10px;
  min-width: 55px;
}

.modal-categorias-local > div {
  min-width: 50px;
  height: 50px;
  text-align: center;
  color:#E86934;
  font-size: 0.5em;
  background: white; /*linear-gradient(135deg, #720033, #720033);*/
  border-radius: 5px;
  position: relative;
  padding: 5px;
  margin: 5px 5px 5px 5px;/*0 auto 5px auto;*/
  transition: .1s ease-out;
}

.modal-categorias-local i {
  color : #E86934;
  font-size: 4.5em;
}

.modal-categorias-local span {
  color : #E86934;
}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    max-width: 500px;
    height: 250px;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

.swiper-slide img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    /*filter: contrast(115%) saturate(115%);*/
}

.filter-img {
    filter: contrast(115%) saturate(125%);
}

.background-slide {
    margin: 0;
    text-align: center;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain, cover;
}

/* Animação */

[data-anime] {
  opacity: 0;
  transition: .3s;
}

[data-anime="left"] {
  transform: translate3d(-50px, 0, 0);
}

[data-anime="right"] {
  transform: translate3d(50px, 0, 0);
}

[data-anime="top"] {
  transform: translate3d(0, -50px, 0);
}

[data-anime="bottom"] {
  transform: translate3d(0, 50px, 0);
}

[data-anime="bottom-rotate"] {
  transform: translate3d(0, 50px, 0);
  transform: rotateY(180deg);
}

[data-anime].animate {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
  transform: rotateY(0deg) forwards;
}

.pulse {
  animation: pulse 0.7s infinite;
  margin: 0 auto;
  display: table;
  margin-bottom: 10px;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    /*-webkit-filter: brightness(100%);*/
  }
  100% {
    -webkit-transform: scale(1.1);
    /*-webkit-filter: brightness(200%);*/
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    /*filter: brightness(100%);*/
  }
  100% {
    transform: scale(1.1);
    /*filter: brightness(200%);*/
  }
}

.ball {
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

/*Loading*/
.modal-loading {
  /* display: none; */ /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  padding-bottom: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.div-loading {
    left: 50%;
    top: 50%;
    position: relative;
    margin-left: -30px;
    margin-top: -30px;
    font-size: 10%;
    font-family: Verdana;
    z-index: 200;
}

.loader {
	border: 6px solid #f3f3f3;
	border-radius: 100%;
    border-top: 6px solid #3999EF;
    border-right: 6px solid #71C05B;
    border-bottom: 6px solid #E86934;
	width: 50px;height: 50px;
	-webkit-animation: spin 1.4s infinite;
	animation: spin 1.4s infinite;
}


.loaderField { 
    position: absolute;
    height: 32px;
    width: 32px;
    display: inline-block;
    border: 5px solid #f3f3f3;
    border-radius: 100%;
    border-top: 6px solid #3999EF;
    border-right: 6px solid #71C05B;
    border-bottom: 6px solid #E86934;
    box-sizing: border-box;
    top: 0px;
    right: 2px;
    -webkit-animation: spin 1.4s infinite;
    animation: spin 0.7s infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*OQPlace*/
.OQPlace-content {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px;
  background: #FFFFFF; 
  border-radius: 10px;
  top: 100px;
}


.OQPlace-container:after,
.OQPlace-container:before,
.OQPlace-panel:after,
.OQPlace-panel:before,
.OQPlace-row:after,
.OQPlace-row:before,
.OQPlace-row-padding:after,
.OQPlace-row-padding:before,
.OQPlace-cell-row:before,
.OQPlace-cell-row:after,
.OQPlace-clear:after,
.OQPlace-clear:before,
.OQPlace-bar:before,
.OQPlace-bar:after {
	content: "";
	display: table;
	clear: both
}

.OQPlace-text-grey,
.OQPlace-hover-text-grey:hover,
.OQPlace-text-gray,
.OQPlace-hover-text-gray:hover {
	color: #757575!important
}

.OQPlace-padding-16 {
	padding-top: 16px!important;
	padding-bottom: 16px!important
}
.OQPlace-container,
.OQPlace-panel {
	padding: 0.01em 16px
}

.OQPlace-text-teal,
.OQPlace-hover-text-teal:hover {
	color: #71C05B!important
}

.OQPlace-margin-right {
	margin-right: 16px!important
}

.OQPlace-xxlarge {
	font-size: 36px!important
}

.OQPlace-FazerOQ-2,
.OQPlace-hover-FazerOQ-2:hover {
    color: #FFF!important;
    background: linear-gradient(180deg,#3999EF,#3999EF,#3999EF, #00000000);
}

.OQPlace-transparent,
.OQPlace-hover-none:hover {
	background-color: transparent!important
}

.OQPlace-opacity,
.OQPlace-hover-opacity:hover {
	opacity: 0.60
}

.OQPlace-opacity-off,
.OQPlace-hover-opacity-off:hover {
	opacity: 1
}

.OQPlace-opacity-max {
	opacity: 0.25
}

.OQPlace-opacity-min {
	opacity: 0.75
}

.OQPlace-margin-small {
	margin: 12px 16px!important
}

.OQPlace-margin {
	margin: 16px!important
}

.OQPlace-margin-top {
	margin-top: 16px!important
}

.OQPlace-margin-bottom {
	margin-bottom: 16px!important
}

.OQPlace-margin-left {
	margin-left: 16px!important
}

.OQPlace-margin-right {
	margin-right: 16px!important
}

.OQPlace-padding-64 {
	padding-top: 64px!important;
	padding-bottom: 64px!important
}

.OQPlace-large {
	font-size: 18px!important
}

.OQPlace-center .OQPlace-bar {
	display: inline-block;
	width: auto
}

.OQPlace-center {
	text-align: center!important
}

.OQPlace-white,
.OQPlace-hover-white:hover {
	color: #000!important;
	background-color: #fff!important
}

.OQPlace-padding-large {
	padding: 12px 24px!important
}

.OQPlace-animate-bottom {
	position: relative;
	animation: animatebottom 0.4s
}

.OQPlace-display-topleft {
	position: absolute;
	left: 0;
	top: 0
}

.OQPlace-padding-32 {
	padding-top: 32px!important;
	padding-bottom: 32px!important
}

.OQPlace-animate-zoom {
	animation: animatezoom 0.6s
}

.OQPlace-modal {
	z-index: 2000;
	display: none;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	/*background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);*/
	background : linear-gradient(rgba(57, 153, 239, 0.69), rgba(57, 153, 239, 0.69), rgba(113, 192, 91, 0.69)), url("/img/background.jpg");
}

.OQPlace-modal-content {
	margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.OQPlace-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.5em;
    border: 5px solid #ffffff;
}

.OQPlace-display-topright {
	position: absolute;
	right: 0;
	top: 0
}

.OQPlace-btn,
.OQPlace-button {
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap
}

.OQPlace-btn:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.OQPlace-btn,
.OQPlace-button {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

/**Animação de botao**/
.app-btn:link,
.app-btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    position: absolute;
}

.app-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.app-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.app-btn-white {
    background-color: #fff;
    color: #777;
}

.app-btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}

.app-btn-white::after {
    background-color: #fff;
}

.app-btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.app-btn-animated {
    animation: moveInBottom 5s ease-out;
    animation-fill-mode: backwards;
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@media (max-width:820px) {
	.OQPlace-modal-content {
		margin: 10px 10px;
		width: auto!important
	}
	/*chat*/
    #buttomMessage {
        bottom:70px !important;
    }
}

/*Texto animation*/
.text_animate_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*font-size: 35px;
  line-height: 40px;
  font-family:'Muli';
  color: #ecf0f1;*/
  height: 160px;
  overflow:hidden;
}
.text_animate_visible {
  font-weight:600;
  overflow:hidden;
  height:40px;
  padding:0 40px;
}
.text_animate_visible:before {
    content:'[';
    left: 0;
    line-height:40px;
}
.text_animate_visible:after {
    content:']';
    position:absolute;
    right: 0;
    line-height:40px;
}
.text_animate_visible:after,.visible:before {
    position:absolute;
    top:0;
    color:#16a085;
    font-size:42px;
    animation:2s linear 0s normal none infinite opacity;
}

.text_animate_visible p {
  display:inline;
  float:left;
  margin:0;
}

.text_animate_visible ul {
  margin-top:0;
  padding-left:110px;
  text-align:left;
  list-style:none;
  animation:6s linear 0s normal none infinite change;
}

.text_animate_visible ul,.text_animate_visible li {
  line-height:40px;
  margin:0;
}

@keyframes opacity {
  0%, 100%   {opacity:0;}
  50%  {opacity:1;}
}

@keyframes change {
  0%, 12%, 100%   {transform:translateY(0);}
  17%,29%  {transform:translateY(-25%);}
  34%,46%  {transform:translateY(-50%);}
  51%,63%  {transform:translateY(-75%);}
  68%,80%  {transform:translateY(-50%);}
  85%,97%  {transform:translateY(-25%);}
}

/**Backgroud loading div*/
.stripe {
    background: repeating-linear-gradient(
      45deg,
      var(--color1) 25%,
      var(--color1) 50%,
      var(--color2) 50%,
      var(--color2) 75%
    );
    background-size: var(--stripe-size) var(--stripe-size);
    background-clip: text;
    animation: stripeBackgroundPosition var(--duration) linear infinite;
}

@keyframes stripeBackgroundPosition {
  0% {
    background-position: 0 0;
  }
  
  100% {
    background-position: calc(var(--stripe-size) * -1) 0;
  }
}

/*Efeitos imagem*/
.retro {
 -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
 background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 30%);
}

.halftone {
    background: white;
    position: relative;
    filter: contrast(25000%);
    overflow: hidden;
    transform: translateZ(0); /* force a HW accelerated layer */
}

.halftone > * {
    filter: brightness(0.5) blur(4px);
    animation: 10s animation-filter infinite alternate;
}

.halftone::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    background-blend-mode: multiply;
    background:
        radial-gradient(8px 8px, cyan, white),
        radial-gradient(8px 8px, magenta, white),
        radial-gradient(8px 8px, yellow, white);
    background-size: 8px 8px;
    background-position: 0 -3px, -2px 0, 2px 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: rotate(11.25deg);
    transition: 1s ease-in-out transform;
    z-index: 1;
    animation: 10s animation-overlay infinite alternate;
}

@keyframes animation-overlay {
    0% {
        transform: rotate(45.25deg) scale(10);
    }

    100% {
        transform: rotate(11.25deg);
    }
}

@keyframes animation-filter {
    0% {
        filter: brightness(0.5) blur(40px);
    }

    100% {
        filter: brightness(0.5) blur(4px);
    }
}

/*Backgroud*/
.discount {
	background-color: var(--magenta); 
	background-image:
		repeating-radial-gradient(
			circle at 0 0.95em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em -0.05em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 -0.05em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.95em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 0.3em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 0.7em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.3em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.7em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.3em 0em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.7em 0em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.3em 1em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.7em 1em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.leaf {
	background-color: var(--forest);
	background-image:
		repeating-radial-gradient(
			circle at 1.4em 0.49em,
			var(--spring),
			var(--spring) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at -0.4em 0.49em,
			var(--lime),
			var(--lime) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em);
	background-size: 1em 1.25em;
	background-position: 0.5em 0.15em;
}
.leaf::after {
	background-image:
		repeating-radial-gradient(
			circle at 1.4em 0.49em,
			var(--spring),
			var(--spring) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at -0.4em 0.49em,
			var(--lime),
			var(--lime) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em);
	background-size: 1em 1.25em;
	background-position: 0 0.75em;
}

.cumulus {
	background-color: var(--blue-tack);
	background-image:
		repeating-radial-gradient(
			circle at 0.77em 0.87em,
			var(--white),
			var(--white) 0.12em,
			var(--trans) 0.121em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.94em 1.05em,
			var(--white),
			var(--white) 0.16em,
			var(--trans) 0.161em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.24em 1.05em,
			var(--white),
			var(--white) 0.16em,
			var(--trans) 0.161em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.5em 0.92em,
			var(--white),
			var(--white) 0.26em,
			var(--trans) 0.261em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.58em 1.1em,
			var(--white),
			var(--white) 0.35em,
			var(--trans) 0.351em,
			var(--trans) 3em);
	background-size: 2em 1.21em;
	background-position: -0.3em -0.2em;
}
.cumulus::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.74em 1.08em,
			var(--white),
			var(--white) 0.13em,
			var(--trans) 0.131em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.22em 1.05em,
			var(--white),
			var(--white) 0.16em,
			var(--trans) 0.161em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.45em 1.02em,
			var(--white),
			var(--white) 0.28em,
			var(--trans) 0.281em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.45em 1.2em,
			var(--white),
			var(--white) 0.28em,
			var(--trans) 0.281em,
			var(--trans) 3em);
	background-size: 2em 1.21em;
	background-position: -1.2em 0.4em;
}

.orange-buzz {
	background: var(--orange);
	background-image:
		repeating-linear-gradient(
			45deg,
			var(--peach), 
			var(--peach) 0.2em, 
			var(--trans) 0.2em, 
			var(--trans) 0.4em);
	background-size: 0.2em 20em;
}

.overlapping-shields {
	background-color: var(--clay);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em -0.1em,
			var(--trans),
			var(--trans) 0.2em,
			var(--melon) 0.21em,
			var(--melon) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 1.1em,
			var(--trans),
			var(--trans) 0.2em,
			var(--melon) 0.21em,
			var(--melon) 0.3em,
			var(--trans) 0.31em);
	background-size: 1em 1em;
}

.phone-alert-system {
	background-color: var(--color-orange-fazeroq);
	background-image:
		repeating-linear-gradient(
			-45deg,
			var(--color-green-fazeroq),
			var(--color-green-fazeroq) 0.2em,
			var(--trans) 0.2em, 
			var(--trans) 1.22em,
			var(--color-green-fazeroq) 1.22em,
			var(--color-green-fazeroq) 2em),
		repeating-linear-gradient(
			45deg,
			var(--color-green-fazeroq),
			var(--color-green-fazeroq) 0.47em,
			var(--trans) 0.47em, 
			var(--trans) 0.93em,
			var(--color-green-fazeroq) 0.93em,
			var(--color-green-fazeroq) 2em),
		repeating-linear-gradient(
			-45deg,
			var(--ink),
			var(--ink) 0.3em,
			var(--trans) 0.3em, 
			var(--trans) 1.16em,
			var(--ink) 1.16em,
			var(--ink) 1.1em),
		repeating-linear-gradient(
			45deg,
			var(--ink),
			var(--ink) 0.52em,
			var(--trans) 0.52em, 
			var(--trans) 0.88em,
			var(--ink) 0.88em,
			var(--ink) 1.1em);
	background-size: 1em 1em;
}

.kitchen-tiles {
	background-color: var(--mushroom);
	background-image: 
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--butter),
			var(--melon) 0.5em,
			var(--trans) 0.22em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.26em 0.26em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.22em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.74em 0.26em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.22em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.26em 0.74em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.74em 0.74em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 2em);
	background-size: 1em 1em;
}
.kitchen-tiles::before {
	background-image:
		repeating-linear-gradient(
			90deg,
			var(--trans),
			var(--trans) 0.44em,
			var(--mushroom) 0.44em, 
			var(--mushroom) 0.56em,
			var(--trans) 0.56em,
			var(--trans) 1em),
		repeating-linear-gradient(
			0deg,
			var(--trans),
			var(--trans) 0.44em,
			var(--mushroom) 0.44em, 
			var(--mushroom) 0.56em,
			var(--trans) 0.56em,
			var(--trans) 1em);
	background-size: 1em 1em;
	background-position: 0.5em 0.5em;
}

.medpack {
	background-color: var(--emerald);
	background-image:
		repeating-linear-gradient(
			90deg,
			var(--emerald),
			var(--emerald) 0.22em,
			var(--trans) 0.22em, 
			var(--trans) 0.78em, 
			var(--emerald) 0.78em,
			var(--emerald) 1em),
		repeating-linear-gradient(
			0deg,
			var(--emerald),
			var(--emerald) 0.22em,
			var(--trans) 0.22em, 
			var(--trans) 0.78em, 
			var(--emerald) 0.78em,
			var(--emerald) 1em),
		repeating-linear-gradient(
			90deg,
			var(--trans),
			var(--trans) 0.42em,
			var(--white) 0.42em, 
			var(--white) 0.58em,
			var(--trans) 0.58em,
			var(--trans) 1em),
		repeating-linear-gradient(
			0deg,
			var(--trans),
			var(--trans) 0.42em,
			var(--white) 0.42em, 
			var(--white) 0.58em,
			var(--trans) 0.58em,
			var(--trans) 1em);
	background-size: 1em 1em;
}

.target {
	background-color: var(--coral);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans),
			var(--trans) 0.14em,
			var(--ivory) 0.15em,
			var(--ivory) 0.28em,
			var(--trans) 0.29em);
	background-size: 1em 1em;
}

.card-rotaoqpass-bg {
    background-color: var(--color-orange-fazeroq);
    background-image: 
        repeating-linear-gradient( 
            45deg, 
            var(--color-green-fazeroq), 
            var(--color-green-fazeroq) 0.47em, 
            var(--trans) 0.47em, 
            var(--trans) 0.93em, 
            var(--color-green-fazeroq) 0.93em, 
            var(--color-green-fazeroq) 2em), 
        repeating-linear-gradient( 
            45deg, #3999ef, 
            var(--ink) 0.52em, 
            var(--trans) 0.52em, 
            var(--trans) 0.88em, 
            var(--ink) 0.88em, 
            var(--ink) 1em);
    background-size: 100%;
}




/*----------------*/

.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.spin {
  animation: spin 1s infinite linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.elastic-spin {
  animation: elastic-spin 1s infinite ease;
}
@keyframes elastic-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(720deg); }
}

.pulse {
  animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

.flash {
  animation: flash 500ms ease infinite alternate;
}
@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

.hithere {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

.grow {
  animation: grow 2s ease infinite;
}
@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.fade-in {
  animation: fade-in 2s linear infinite;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fade-out 2s linear infinite;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.shake {
  animation: shake 2s ease infinite;
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.flip {
	backface-visibility: visible !important;
	animation: flip 2s ease infinite;
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.swing {
	transform-origin: top center;
	animation: swing 2s ease infinite;
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.wobble {
  animation: wobble 2s ease infinite;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.fade-in-down {
  animation: fade-in-down 2s ease infinite;
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-left {
  animation: fade-in-left 2s ease infinite;
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-out-down {
  animation: fade-out-down 2s ease infinite;
}
@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.fade-out-right {
  animation: fade-out-right 2s ease infinite;
}
@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.bounce-in {
  animation: bounce-in 2s ease infinite;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

.bounce-in-right {
  animation: bounce-in-right 2s ease infinite;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.bounce-out {
  animation: bounce-out 2s ease infinite;
}
@keyframes bounce-out {
  0% { transform: scale(1); }
  25% { transform: scale(.95); }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(.3);
  } 
}

.bounce-out-down {
  animation: bounce-out-down 2s ease infinite;
}
@keyframes bounce-out-down {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.rotate-in-down-left {
  animation: rotate-in-down-left 2s ease infinite;
}
@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.rotate-in-up-left {
  animation: rotate-in-up-left 2s ease infinite;
}
@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.hinge {
  animation: hinge 2s ease infinite;
}
@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }  
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
  100% { transform: translateY(700px); opacity: 0; }
}

.roll-in {
  animation: roll-in 2s ease infinite;
}
@keyframes roll-in {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}

.roll-out {
  animation: roll-out 2s ease infinite;
}
@keyframes roll-out {
    0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}