/*--------------------------------------------------------------------------------------
Restaurante Adraga - Diogo Pinto
----------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 SLIDER AREA
        2.3 SEARCH FORM AREA
    3. ABOUT AREA
    4. PROMOTIONS AREA
    5. MENUS AREA
    6. RESERVATION BUTTON AREA
    7. TEAM AREA
    8. BLOG AREA
    9. GALLERY AREA
    10. FOOTER AREA
    11. SCROLL TO TOP
    12. SINGLE PAGE
    13. BLOG PAGE
        13.1 SIDEBAR AREA
    14. SINGLE BLOG PAGE
----------------------------------------------------------------------------------------*/

/*--------------------
   1. BASE CSS
----------------------*/

@import url("https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Lato:400,700|PT+Sans+Narrow:400,700");
.alignleft {
  float: left;
  margin-right: 15px;
}

.alignright {
  float: right;
  margin-left: 15px;
}

.aligncenter {
  display: block;
  margin: 0 auto 15px;
}

a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #212324;
}

a:hover {
  color: #c19474;
}

a:focus,
a:hover {
  outline: 0;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px;
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 700;
}

html,
body {
  height: 100%;
  touch-action: manipulation; /* Evita arrastos desnecessários no Safari */
  overscroll-behavior: none;
  scroll-behavior: auto !important;
}

body {
  color: #555555;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1.7em;
}

a:hover {
  text-decoration: none;
}

/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/* Estilos padrão para tamanhos de tela maiores (computadores, tablets, etc.) */
.navbar-toggle {
  border: 2px solid #fff;
  border-radius: 0;
  overflow: visible;
}

.navbar-toggle .icon-bar {
  background: #fff none repeat scroll 0 0;
  overflow: visible;
}

/* Estilos para tamanhos de tela menores (dispositivos móveis) */
@media screen and (max-width: 767px) {
  .navbar-toggle {
    border: 2px #ffffff;
    overflow: visible;
  }

  .navbar-toggle .icon-bar {
    background: #c19474 none repeat scroll 0 0;
    overflow: visible;
  }

  .is-sticky .navbar-toggle,
  .is-sticky .navbar-toggle .icon-bar {
    /* Adicione estilos específicos quando a barra de navegação está fixa (sticky) */
  }

  .is-sticky .navbar-nav {
    /* Adicione estilos específicos para o menu de navegação quando a barra de navegação está fixa (sticky) */
  }
}

/* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */
/* Estilos para o dropdown de idiomas */
.language-dropdown {
  position: relative; /* Certifica-se de que o dropdown é posicionado em relação ao seu contêiner */
}

.language-dropdown .dropdown-menu {
  display: none; /* Começa oculto por padrão */
  position: absolute;
  top: 100%; /* Posiciona o dropdown logo abaixo do elemento pai */
  left: 0;
  z-index: 999999; /* Define um z-index muito alto para garantir que o dropdown esteja acima de outros elementos */
  background-color: #fff; /* Adiciona a cor de fundo branco */
  border: 1px solid #ccc; /* Adiciona uma borda */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra */
  padding: 0; /* Remove o padding */
  margin: 0; /* Remove o margin */
  list-style-type: none; /* Remove o estilo de lista padrão */
  white-space: nowrap; /* Impede a quebra de linha */
  width: auto; /* Ajusta a largura automaticamente */
  min-width: unset; /* Remove a largura mínima */
}

/* Estilo para tornar o dropdown de idiomas visível quando o mouse está sobre o item de menu ou o próprio dropdown */
.language-dropdown:hover .dropdown-menu,
.language-dropdown .dropdown-menu:hover {
  display: block;
}

/* Estilo para os itens do dropdown de idiomas */
.language-dropdown .dropdown-menu li {
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  margin: 0; /* Remove o margin */
  padding: 0; /* Remove o padding */
  width: 32px; /* Ajuste da largura do item para corresponder à largura da bandeira */
  height: 32px; /* Ajuste da altura do item para corresponder à altura da bandeira */
  border: 1px solid transparent;
  box-sizing: border-box; /* Inclui padding e border na largura e altura */
}

/* Estilos para os links dentro da lista suspensa de idiomas */
.language-dropdown .dropdown-menu li a {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 0; /* Remove o padding */
  margin: 0; /* Remove o margin */
  color: #000; /* Cor do texto */
  text-decoration: none;
  width: 100%; /* Garante que o link ocupe 100% da largura do item */
  height: 100%; /* Garante que o link ocupe 100% da altura do item */
}

/* Estilos para os links quando o mouse passa sobre eles */
.language-dropdown .dropdown-menu li a:hover {
  background-color: #f0f0f0; /* Cor de fundo ao passar o mouse */
  color: #000; /* Cor do texto ao passar o mouse */
}

.language-dropdown .dropdown-menu li a img {
  width: 24px; /* Define a largura das bandeiras */
  height: auto; /* Ajusta a altura proporcionalmente */
}

/* Estilos para o dropdown geral */
.dropdown-menu {
  display: none; /* Começa oculto por padrão */
  position: absolute;
  padding: 10px; /* Ajuste do padding */
  z-index: 1000; /* Para garantir que o dropdown esteja acima de outros elementos */
  background-color: #fff; /* Cor de fundo do dropdown */
  border: 1px solid #ccc; /* Adiciona uma borda ao dropdown */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra ao dropdown */
  list-style-type: none; /* Remove o estilo de lista padrão */
  margin: 0; /* Remove o margin */
  box-sizing: border-box; /* Inclui padding e border na largura e altura */
  min-width: 100px; /* Largura mínima ajustada */
}

/* Estilo para tornar o dropdown geral visível quando o mouse está sobre o item de menu ou o próprio dropdown */
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

/* Estilo para os itens do dropdown geral */
.dropdown-menu li {
  display: block;
}

/* Estilos para os links dentro da lista suspensa geral */
.dropdown-menu li a {
  display: block;
  padding: 8px 12px; /* Ajuste do padding */
  color: #000; /* Cor padrão do texto */
  text-decoration: none;
}

/* Estilos para os links quando o mouse passa sobre eles */
.dropdown-menu li a:hover {
  background-color: #f0f0f0; /* Cor de fundo ao passar o mouse */
  color: #000; /* Cor do texto ao passar o mouse */
}

/* Remover o estilo de lista padrão do dropdown geral */
.dropdown-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */

.area-title {
  margin-bottom: 60px;
}

.area-title h2 {
  /*font-family: "Herr Von Muellerhoff", cursive;
    font-family: 'Sacramento', cursive; 
    font-family: 'Great Vibes', cursive;
*/
  color: #c19474;
  display: inline-block;
  font-family: "Dancing Script", cursive;
  font-size: 60px;
  letter-spacing: 2px;
  line-height: 0.8;
  margin: 0;
  padding: 0 20px 45px;
  position: relative;
  text-transform: capitalize;
}

.area-title h2::after {
  background: rgba(0, 0, 0, 0) url() no-repeat scroll center center / contain;
  bottom: 0;
  content: "";
  height: 30px;
  left: 0;
  position: absolute;
  width: 100%;
}

.section-padding {
  padding: 100px 0;
}

/*--------------------------
    2. TOP AREA
---------------------------*/
/*horario*/
.team-area {
  position: relative;
}
/* Ajuste do espaçamento do título "Horário" para dispositivos móveis */
@media screen and (max-width: 768px) {
  .team-area .area-title {
    margin-top: -10px; /* Reduz a margem superior */
    padding-top: 0; /* Remove qualquer padding extra */
  }

  .team-area {
    margin-top: -30px; /* Ajusta a distância geral da seção */
  }
}
.rocha-bg {
  position: absolute;
  top: 100px;
  left: -10px;
  height: 105%;
  z-index: -1;
}
#team {
  position: relative; /* Necessário para que a posição da rocha seja relativa a esta section */
  overflow: hidden; /* Garante que nada saia dos limites do section */
}
/* Garantir que as próximas seções, como "Horário", não sejam sobrepostas */
#team,
.horario-container {
  position: relative; /* Garante que o conteúdo do "Horário" esteja acima */
  z-index: 1; /* Posiciona acima da imagem de fundo */
}
.horario-container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}

.horario-content {
  flex: 0 1 45%;
  text-align: center;
  padding: 20px;
  background: #f1e2d9c4;
  margin: 10px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.horario-content h3 {
  font-family: "Lato", sans-serif;
  font-size: 24px;
  color: #c19474;
}

.horario-content p {
  font-family: "Lato", sans-serif;
  font-size: 18px;
  color: #333;
}

/* fim horario*/
.top-area {
  height: 100%;
  position: relative;
  width: 100%;
}

.top-social-bookmark {
  float: right;
  display: inline;
}

.book-table-popup {
  float: right;
  padding: 5px;
}

.top-social-bookmark ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align: right;
}

.top-social-bookmark ul li {
  display: inline;
}
#time > option,
#person > option {
  color: #000 !important; /* Força o texto a ficar preto */
}
.top-social-bookmark ul li a {
  color: #fff;
  display: inline-block;
  font-size: 14px;
  height: 39px;
  margin: 0 -2.5px;
  padding: 6px;
  text-align: center;
  width: 40px;
}

.top-social-bookmark ul li a:hover {
  background: #fff;
  color: #c19474;
}

.top-social-bookmark ul li:last-child a {
  margin-right: -5px;
}

.book-table-popup a {
  background: #c19474 none repeat scroll 0 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 14px 30px;
}

.book-table-popup a:hover {
  background: #fff none repeat scroll 0 0;
  color: #c19474;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Isso fará com que o vídeo pelo menos cubra a altura da viewport */
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Continua garantindo que o vídeo cubra completamente a área */
}
.video-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25); /* Máscara preta transparente */
  z-index: 1; /* Certifique-se de que a máscara esteja acima do vídeo */
}

.video-container {
  position: relative;
  z-index: 0; /* O vídeo ficará abaixo da máscara */
}

@media screen and (max-width: 767px) {
  .video-container {
    height: 100vh; /* Define a altura para a altura da viewport */
  }
}

/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/
.hide {
  display: none;
}

.menu-links {
  position: relative;
  top: -25px; /* Adjust as necessary */
}

#menu1,
#menu2 {
  margin-right: 20px;
  font-weight: bold;
  text-decoration: underline;
}

.mainmenu-area {
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  z-index: 9999;
}

.is-sticky .mainmenu-area {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  z-index: 99999;
}

.is-sticky .mainmenu-area::after {
  opacity: 1;
}

.navbar-header {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.navbar-brand {
  display: none;
  margin-bottom: 15px;
}

.navbar-brand.white {
  display: block;
}

.is-sticky .navbar-brand.white {
  display: none;
}

.is-sticky .navbar-brand {
  display: block;
}

.navbar {
  border-bottom: 0 none;
  border-top: 0 none;
  margin-bottom: 0;
  overflow: visible;
  background-color: none;
}

ul#nav {
  float: right;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

ul#nav li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 40px 20px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

ul#nav li.active a::before {
  background: #c19474 none repeat scroll 0 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

ul#nav li:hover a,
ul#nav li.active a {
  color: #c19474;
}

.nota-rodape {
  font-size: 12px;
  color: #040404; /* Cor um pouco mais escura */
  margin-top: -30px; /* Menor espaço entre o título e a nota */
  font-style: italic;
}

/* Ajustes gerais para o texto */
.cd-headline .call-to-action {
  color: #ecbe9ce3;
  text-transform: capitalize;
  font-size: 80px; /* Tamanho padrão */
  font-family: "Optima", sans-serif;
  text-shadow: 1px 1px 8px rgb(1, 1, 1);
  line-height: 0.8; /* Espaçamento vertical */
  word-wrap: break-word; /* Permite quebra de palavras, se necessário */
  margin-bottom: 5px;
  margin-top: 90px;
  /* Adicionando o contorno preto */
  -webkit-text-stroke: 0.2px black; /* Espessura de 2px e cor preta */
}

/* Ajustes para telas médias */
@media screen and (max-width: 768px) {
  .cd-headline .call-to-action {
    font-size: 60px; /* Reduz o tamanho do texto */
    text-align: center; /* Centraliza o texto */
    line-height: 1; /* Ajusta o espaçamento para melhor leitura */
    margin-bottom: -60px;
  }
}

/* Ajustes para telas pequenas */
@media screen and (max-width: 480px) {
  .cd-headline .call-to-action {
    font-size: 50px; /* Reduz o tamanho ainda mais */
    text-align: center; /* Garante alinhamento central */
    line-height: 1.3; /* Aumenta o espaçamento */
    margin-bottom: -60px;
  }
}

/* Ajustes para telas muito pequenas */
@media screen and (max-width: 320px) {
  .cd-headline .call-to-action {
    font-size: 25px; /* Tamanho para telas extremamente pequenas */
    text-align: center; /* Mantém o alinhamento central */
    line-height: 1.5; /* Garante espaçamento adequado */
    word-wrap: break-word; /* Previne cortes de texto */
  }
}
/* Estilos gerais para "Bar & Restaurante" */
.cd-headline span.cd-words-wrapper b {
  font-size: 24px; /* Tamanho padrão */
  color: #ffffff; /* Ajuste a cor conforme necessário */
}

/* Ajustes para telas médias */
@media screen and (max-width: 768px) {
  .cd-headline span.cd-words-wrapper b {
    font-size: 24px; /* Reduz o tamanho */
    text-align: center;
    line-height: 1.2; /* Ajusta o espaçamento */
  }
}

/* Ajustes para telas pequenas */
@media screen and (max-width: 480px) {
  .cd-headline span.cd-words-wrapper b {
    font-size: 18px; /* Reduz ainda mais */
    text-align: center;
    line-height: 1.3;
  }
}

/* Ajustes para telas muito pequenas */
@media screen and (max-width: 320px) {
  .cd-headline span.cd-words-wrapper b {
    font-size: 12px; /* Tamanho mínimo para telas muito pequenas */
    text-align: center;
    line-height: 1.5;
    word-wrap: break-word;
  }
}
.call-to-action a {
  color: #fff;
  letter-spacing: 1px;
}

.call-to-action p {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 15px;
  margin-top: 7px;
}

.call-to-action i {
  margin-right: 10px;
}

.is-sticky ul#nav li a {
  padding: 30px 20px;
  color: #1a1a1a;
}

.is-sticky ul#nav li.active a,
.is-sticky ul#nav li:hover a {
  color: #c19474;
}

.is-sticky .signup-and-login-button ul li {
  padding: 14px 0;
}

.is-sticky .signup-and-login-button ul li a {
  background: #d64332 none repeat scroll 0 0;
  color: #fff;
}

.is-sticky .mainmenu-area {
  background: #ffffff none repeat scroll 0 0;
}

.is-sticky .navbar-header {
  margin-top: -7px;
}

/*-----------------------------------
    2.2 SLIDER AREA
-------------------------------------*/

.header-top-area {
  position: relative;
  width: 100%;
  z-index: 1000;
  text-transform: uppercase;
}

.slider-area {
  font-family: "Raleway", sans-serif;
  height: 100%;
  width: 100%;
  position: relative;
  font-weight: 900;
  color: #fff;
}

.slider-area h1 {
  font-size: 65px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.slider-area h1 span {
  font-weight: 700;
}

.slider-area h2 {
  font-family: "Dancing Script", cursive;
  font-size: 82px;
  letter-spacing: 2px;
  text-transform: capitalize;
}

.slider-area h3 {
  font-family: lato;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.slider-area h3 a,
a.home-reservation-button {
  border: 1px solid;
  color: #fff;
  display: inline-block;
  font-size: 13px;
  margin-top: 15px;
  padding: 10px 30px;
}

.slider-area h3 a:hover,
a.home-reservation-button:hover {
  color: #fff;
  background: #c19474 none repeat scroll 0 0;
  border-color: #c19474;
}

/*----------------------------
    2.3 SEARCH FORM AREA
-----------------------------*/

.is-sticky .search-form-area {
  padding: 25px 15px;
}

a.search-form-trigger {
  color: #fff;
  font-size: 0 !important;
  position: relative;
  width: 30px;
}

.is-sticky a.search-form-trigger {
  color: #1a1a1a;
}

a.search-form-trigger::before {
  content: "\f002";
  font-family: fontawesome;
  font-size: 15px;
  height: 40px;
  margin-right: -15px;
  margin-top: -20px;
  padding-top: 5px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  width: 40px;
  z-index: 99;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

/* Chrome, Edge, e Safari */
::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}

/* Firefox */
::-moz-placeholder {
  color: white;
  opacity: 1;
}

/* Internet Explorer 10+ */
:-ms-input-placeholder {
  color: white;
}

/* Microsoft Edge */
::-ms-input-placeholder {
  color: white;
}

/* Para garantir que a cor do texto dentro dos selects também seja branca */
select {
  color: white;
}

/* E para os ícones, caso você também queira alterar */
.fa {
  color: white;
}

@media only screen and (min-width: 1024px) {
  .search-form {
    height: 120px;
    top: 100%;
  }
  .search-form input {
    padding: 0 2em;
    font-size: 3.2rem;
    font-weight: 300;
  }
}

.no-js .search-form {
  position: relative;
  top: 0;
  opacity: 1;
  visibility: visible;
}

/*----------------------------
    3. ABOUT AREA
------------------------------*/

#image-slider {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 300px;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
}

.about-area {
  background: rgba(0, 0, 0, 0) url("img/about/home_three_about_bg.png")
    no-repeat scroll center bottom / contain;
  position: relative;
}
@media (max-width: 768px) {
  .about-area {
    background: none; /* Remove a imagem de fundo */
  }
}

.about-area {
  padding-top: 100px; /* Aumente esse valor conforme necessário */
  padding-bottom: 50px; /* Ajuste o espaçamento inferior se necessário */
}

/* Ajuste de margem e padding para a seção "A Nossa História" */
#about {
  margin-top: 50px; /* Adiciona espaço entre as seções */
  padding-top: 70px; /* Ajusta o padding interno */
}

/* Ajustes específicos para telas menores */
@media (max-width: 768px) {
  #about .area-title h2 {
    line-height: 1; /* Ajusta o espaçamento entre linhas */
    margin-top: 100px;
  }

  .area-title h2 {
    line-height: 1.4; /* Ajusta o espaçamento entre linhas */
    word-wrap: break-word; /* Evita cortes nas palavras */
    text-align: center; /* Centraliza o título */
  }
}

.about-area::after,
.about-area::before,
.menus-area::after,
.menus-area::before,
.team-area::after,
.team-area::before,
.gallery-area::after,
.footer-area::after {
  background: rgba(0, 0, 0, 0) url("img/tri-promo-bottom-white.png") repeat
    scroll 0 0;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  top: -7px;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  width: 100%;
  z-index: 9;
}

.about-area::before,
.menus-area::before,
.team-area::before {
  bottom: -7px;
  top: auto;
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

.about-author-sign {
  margin-top: 40px;
}

.big-text {
  float: left;
  font-size: 80px;
  font-weight: 700;
  margin-bottom: -4px;
  margin-right: 10px;
  line-height: 1;
}

.about-area .area-title h2 {
  font-size: 60px;
  padding-bottom: 10px;
  position: relative;
}

.about-area .area-title h2 span {
  color: #212324;
  font-family: lato;
  font-size: 48px;
  text-transform: uppercase;
}

.about-area .area-title h2::after {
  display: none;
}

.about-content {
  color: #4a4d4f;
}

a.read-more {
  border: 1px solid;
  color: #c19474;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 30px;
  padding: 7px 23px;
  text-transform: uppercase;
}

.read-more:hover {
  background: #c19474;
  color: #fff;
  border-color: #c19474;
}

/*-----------------------------
    4. PROMOTIONS AREA
------------------------------*/

.promotions-area {
  position: relative;
}

.promotion-area-bg,
.reservation-button-area-bg,
.blog-area-bg,
.footer-area-bg {
  background: rgba(0, 0, 0, 0) url("img/fundo/fnd3.JPG") no-repeat scroll center
    bottom / cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.promotion-area-bg::after,
.reservation-button-area-bg:after,
.blog-area-bg:after,
.footer-area-bg::after,
.page-barner-bg::after {
  background: #000 url(img/pattarn.png);
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
}

.promotions-video {
  width: 500px; /* Largura específica */
  height: 600px; /* Altura específica */
  max-width: 100%; /* Evita que ultrapasse o contêiner pai */
  border: 2px solid black; /* Borda preta */
  display: flex; /* Ativa flexbox */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  overflow: hidden; /* Esconde qualquer conteúdo que ultrapasse os limites */
  position: relative;
}

.video-gif.lazy-video {
  width: 100%; /* Ocupa 100% da largura do contêiner */
  height: 100%; /* Ocupa 100% da altura do contêiner */
  object-fit: cover; /* Garante que o vídeo preencha o espaço, mesmo que seja cortado */
}

@media screen and (max-width: 768px) {
  .promotions-video {
    width: 90%; /* Ajusta a largura para 90% da tela em dispositivos móveis */
    height: 400px; /* Reduz a altura para telas médias */
  }
}

@media screen and (max-width: 480px) {
  .promotions-video {
    width: 100%; /* Ajusta a largura para ocupar toda a tela em dispositivos muito pequenas */
    height: 300px; /* Reduz ainda mais a altura */
  }
}

.promotions-details {
  background: #fff none repeat scroll 0 0;
  color: #1a1a1a;
  height: 260px;
  margin-top: -150px;
  max-height: 350px;
  margin-right: 100px;
  padding: 50px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 40%;
  z-index: 100;
  border: 3px solid black;
}

.promotions-details h3 {
  font-size: 30px;
}

.promotions-details a.read-more {
  margin-top: 25px;
}

.promotions-details a.read-more:hover {
  background: #c19474 none repeat scroll 0 0;
  border-color: #c19474;
  color: #fff;
}

.row.menu-discount-offer {
  margin: auto;
}

.menu-discount-offer .owl-dots > div {
  background: #bcbfc1 none repeat scroll 0 0;
  border-radius: 50%;
  display: inline-block;
  height: 15px;
  margin: 0 5px;
  width: 15px;
}

.owl-dots {
  margin-top: 50px;
  text-align: center;
}

.menu-discount-offer .owl-dots > div.active {
  background: #1a1a1a none repeat scroll 0 0;
}

/*-----------------------------
    5. MENUS AREA
-------------------------------*/

/* Ocultar os itens do menu nas telas menores */
@media (max-width: 768px) {
  .food-menu-list .single-menu {
    display: none; /* Esconde todos os itens do menu */
  }

  /* Exibir apenas os itens que tiverem a classe "show" */
  .food-menu-list .single-menu.show {
    display: block;
  }
}

.menus-area {
  position: relative;
}

.menus-area.section-padding {
  padding-bottom: 60px;
}

.food-menu-list-menu {
  margin-bottom: 60px;
}

.food-menu-list-menu ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.food-menu-list-menu ul li {
  border: 1px solid;
  color: #1e1e1f;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 2px;
  padding: 3px 10px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.food-menu-list-menu ul li:hover,
.food-menu-list-menu ul li.active {
  background: #c19474 none repeat scroll 0 0;
  border-color: #c19474;
  color: #fff;
}

.single-menu .single-menu-details {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 15px; /* Reduce from 40px to create tighter, uniform spacing */
  padding-bottom: 15px; /* Reduce from 40px to match margin for consistency */
  padding-left: 20px;
  position: relative;
  overflow-x: hidden; /* Esconde qualquer conteúdo que ultrapasse os limites horizontais */
}

.food-menu-details {
  color: #1e1e1f;
  padding: 0;
  text-align: inherit;
}

.food-menu-details h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-bottom: 5px;
  padding: 5px 0;
}

.food-menu-details p span {
  display: inline-block;
  width: 30%;
}
.food-menu-details h3 span {
  color: #1e1e1f; /* Black for dish names */
  font-weight: bold; /* Ensure dish names are bold */
}

.food-menu-details .menu-price {
  color: #c19474; /* Brown for prices, matching your image */
  font-weight: bold; /* Ensure prices are bold */
  margin-left: 20px; /* Optional: Add spacing between name and price */
}

.menu-speacification {
  margin-bottom: 0;
  word-wrap: break-word; /* Quebra o texto para a linha seguinte se necessário */
  overflow-wrap: break-word; /* Compatibilidade adicional para a quebra de texto */
}

.mix {
  display: none;
}

@media (max-width: 767px) {
  .single-menu .single-menu-details {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .food-menu-details h3 {
    margin-bottom: 5px;
    padding: 5px 0;
  }
}
/*-------------------------------
    6. RESERVATION BUTTON AREA
---------------------------------*/

.reservation-button-area.section-padding {
  padding: 150px 0;
}

.reservation-button-area {
  color: #fff;
  font-family: "PT Sans Narrow", sans-serif;
  position: relative;
  overflow: hidden;
}

.reservation-button-area-bg {
  background: rgba(0, 0, 0, 0) url("img/fundo/fnd1.JPG") no-repeat center center;
  background-size: cover; /* Faz a imagem cobrir toda a área do container */
  height: 100%; /* Define a altura para respeitar o limite do container */
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* Para garantir que o fundo esteja atrás do conteúdo */
}

@media (min-width: 1200px) {
  .reservation-button-area-bg {
    height: 80vh; /* Definindo altura fixa maior */
  }
}

/* Tamanhos intermediários (tablets e telas menores) */
@media (max-width: 1199px) and (min-width: 769px) {
  .reservation-button-area-bg {
    height: 100vh;
    background-size: cover;
    background-position: center;
  }
}

/* Tamanhos para tablets e smartphones maiores */
@media (max-width: 768px) and (min-width: 481px) {
  .reservation-button-area-bg {
    height: 100vh;
    background-size: cover;
    background-position: center;
  }
}

/* Smartphones pequenos */
@media (max-width: 480px) {
  .reservation-button-area-bg {
    height: 150vh;
    background-size: cover;
    background-position: center;
  }
}

.resarvation-from-button.text-center h2 {
  font-size: 50px;
  letter-spacing: 5px;
  text-transform: uppercase;
}

a.reservation-button {
  background: #fff none repeat scroll 0 0;
  color: #c19474;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 4px;
  margin-top: 20px;
  padding: 10px 20px;
  text-transform: uppercase;
  min-width: 200px;
}

a.reservation-button:hover {
  background: #c19474 none repeat scroll 0 0;
  color: #fff;
}

#reservation-form-modal .modal-header {
  color: #c19474;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.table-booking-form {
  background: #c19474 none repeat scroll 0 0;
  display: block;
  padding: 30px 20px;
  z-index: 99;
  position: relative;
}
.subtitle {
  font-size: 10px; /* Tamanho menor da fonte */
  font-weight: lighter; /* Estilo mais leve que pode ser menos proeminente */
  color: #888; /* Cor mais leve para torná-lo indicativo */
  margin-top: 0px; /* Adicione margem superior, se necessário */
}

.table-booking-form input,
.table-booking-form select {
  border: 2px solid;
  color: #fff;
  height: 40px;
  position: relative;
  width: 100%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  padding: 0 10px;
  margin-bottom: 30px;
}

.table-booking-form label {
  color: #fff;
  font-size: 20px;
  position: absolute;
  right: 25px;
  top: 7px;
}

.table-booking-form button {
  background: transparent none repeat scroll 0 0;
  border: 2px solid;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 15px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.table-booking-form button:hover {
  background: #fff none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #c19474;
}

option {
  padding: 5px;
}

#reservation-form-modal .modal-dialog .modal-content {
  border-radius: 0;
}

/*-----------------------------
    7. TEAM AREA
-------------------------------*/

@media (max-width: 768px) {
  #team .area-title {
    margin-top: 30px; /* Ajusta a margem para telas menores */
  }
}
.team-area {
  position: relative;
}

.single-team-member:hover .member-social-bookmark {
  right: 0;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.team-area .owl-controls {
  display: none;
}

/*-----------------------------
    8. BLOG AREA
------------------------------*/

/* Ajustes específicos para a seção de Feedback em telas menores */
@media (max-width: 768px) {
  .blog-area {
    padding: 30px 10px; /* Diminui o espaçamento geral da seção */
  }

  .single-post {
    margin-bottom: 20px; /* Reduz o espaçamento entre os posts */
  }

  .single-post h3 {
    font-size: 18px; /* Diminui o tamanho do título */
    line-height: 1.4; /* Ajusta o espaçamento entre linhas */
  }

  .single-post p {
    font-size: 14px; /* Diminui o tamanho do texto */
    line-height: 1.5; /* Ajusta o espaçamento entre linhas */
  }

  .blog-post-img img {
    width: 100%; /* Garante que a imagem ocupe a largura disponível */
    height: auto; /* Mantém a proporção da imagem */
    margin: 0 auto; /* Centraliza a imagem */
  }
}
.blog-area {
  position: relative;
}

.blog-area-bg {
  background: rgba(0, 0, 0, 0) url("img/fundo/fnd5.JPG") no-repeat scroll center
    top / cover;
}

.post-details {
  background: #fff none repeat scroll 0 0;
  padding: 20px;
}

a.post-meta-button {
  background: #c19474 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  min-width: 150px;
  padding: 7px 20px;
  text-transform: uppercase;
}

.post-details > h3 {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 30px;
  padding-bottom: 20px;
  position: relative;
}

.post-details > h3::after {
  background: #c19474 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  width: 50px;
}

.post-meta {
  letter-spacing: 1px;
}

.post-meta a {
  margin: 0 10px;
}

.row.post-slider {
  margin: 0;
}

.row.post-slider .col-lg-4 {
  padding: 0;
  width: 100%;
}

.blog-area .owl-controls,
.menus-area .owl-controls {
  margin-top: -30px;
  position: absolute;
  top: 50%;
  width: 100%;
}

.blog-area .owl-nav > div,
.menus-area .owl-nav > div {
  background: #c19474 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-size: 25px;
  height: 40px;
  margin-top: -20px;
  opacity: 0;
  padding-top: 4px;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  width: 40px;
}

/*------------------------------
    9. GALLERY AREA
-------------------------------*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.gallery-item {
  overflow: hidden;
  position: relative; /* Permite sobrepor as imagens ao lado */
  transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out; /* Adiciona transições suaves */
}

.gallery-item img {
  width: 100%;
  height: 100%; /* Alterado para 100% */
  object-fit: cover; /* Nova propriedade para cobrir completamente o contêiner */
}

.gallery-area {
  position: relative;
}

.instagram.show a {
  display: inline-block;
  width: 20%;
}

/*------------------------------
    10. FOOTER AREA
-------------------------------*/

.footer-area {
  position: relative;
  color: #cacaca;
  letter-spacing: 1px;
  background: #191a1b none repeat scroll 0 0;
  color: #cacaca;
  letter-spacing: 1px;
  position: relative;
}

.footer-area::after {
  top: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.footer-area-bg {
  background: rgba(0, 0, 0, 0) url("img/fundo/fnd4.JPG") no-repeat scroll center
    bottom / cover;
}

.footer-top {
  border-bottom: 1px solid #2b2c2d;
}

.footer-area a {
  color: #c19474;
}

.footer-area a:hover {
  color: #fff;
}

.footer-logo,
.footer-address {
  margin-bottom: 50px;
}

.footer-social-bookmark ul,
.footer-menu ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer-social-bookmark ul li,
.footer-menu ul li {
  display: inline;
}

.footer-social-bookmark ul li a {
  display: inline-block;
  font-size: 25px;
  width: 50px;
  color: #c4c3c3;
}

.footer-social-bookmark a:hover {
  color: #c19474;
}

.footer-menu ul {
  text-align: inherit;
}

.footer-menu ul li a {
  display: inline-block;
  padding: 7px 10px 7px 0;
}

.footer-menu {
  padding: 30px 0;
}

.footer-copyright {
  letter-spacing: 1px;
  padding: 40px 0;
  text-align: right;
}

.footer-copyright p {
  margin-bottom: 0;
}

/*------------------------------
    11. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
  background: #c19474 none repeat scroll 0 0;
  border: 1px solid transparent;
  bottom: 20px;
  color: #fff;
  display: none;
  font-size: 20px;
  height: 40px;
  padding-top: 5px;
  position: fixed;
  right: 20px;
  text-align: center;
  width: 40px;
  z-index: 20;
}

a.scrolltotop:hover {
  background: #1a1a1a;
  border: 1px solid;
}

/*===============================
    12. SINGLE PAGE
=================================*/

.top-area.single-page {
  height: 500px;
  position: relative;
}

.barner-text h1 {
  font-family: "Dancing Script", cursive;
  font-size: 60px;
  letter-spacing: 4px;
  text-transform: capitalize;
}

.barner-text h1 span {
  font-weight: 300;
}

ul.page-location {
  bottom: -140px;
  left: 0;
  letter-spacing: 2px;
  list-style: outside none none;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

ul.page-location li {
  color: #fff;
  display: inline-block;
  margin-right: 5px;
}

ul.page-location li a {
  color: #fff;
}

ul.page-location li.active a {
  color: #c19474;
}

/*===============================
    13. BLOG PAGE
=================================*/

.blog-page .page-barner-bg {
  background: rgba(0, 0, 0, 0) url("img/blog_page_barner.jpg") no-repeat scroll
    center center / cover;
}

.blog-page.section-padding {
  padding-top: 50px;
}

.blog-page.blog-area {
  background: inherit;
  position: inherit;
}

.blog-area iframe {
  width: 100%;
  border: 0;
  overflow: hidden;
}

.blog-page a.read-more {
  margin-bottom: 0;
}

.blog-image-sldie .owl-nav > div {
  background: #fff none repeat scroll 0 0;
  color: #1a1a1a;
  display: inline-block;
  font-size: 35px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 40px;
}

.blog-image-sldie .owl-nav > div.owl-next {
  right: -2px;
}

.blog-image-sldie .owl-nav > div.owl-prev {
  left: 0;
}

ul.page-pagination {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.page-pagination li {
  border: 1px solid;
  display: inline-block;
}

ul.page-pagination li a {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 5px 50px;
  text-transform: uppercase;
}

ul.page-pagination li.active a,
ul.page-pagination li:hover a {
  background: #c19474 none repeat scroll 0 0;
  color: #fff;
}

ul.page-pagination li a {
  height: 35px;
  padding: 5px;
  min-width: 35px;
}

.tags h3,
.tags ul,
.single-post-social-bar h3,
.single-post-social-bar ul {
  display: inline-block;
}

.tags ul,
.single-post-social-bar ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.tags ul li,
.single-event-social-bar ul li,
.single-post-social-bar ul li {
  display: inline;
}

.tags ul li a {
  display: inline-block;
  padding: 5px;
}

.tags h3,
.single-post-social-bar h3 {
  font-size: 18px;
  margin: 0 15px;
}

.single-post-social-bar ul li a {
  padding: 5px 10px;
}

.single-post-social-bar {
  margin-top: -30px;
}

/*------------------------------
    13.1 SIDEBAR AREA
-------------------------------*/

.social-widget ul li {
  display: inline-block;
}

.social-widget ul li a {
  background: #ddd none repeat scroll 0 0;
  border-radius: 50%;
  display: block;
  font-size: 20px;
  height: 40px;
  padding-top: 7px;
  text-align: center;
  width: 40px;
  color: #fff;
}

.social-widget ul li.s_facebook a {
  background: #2069ba none repeat scroll 0 0;
}

.social-widget ul li.s_twitter a {
  background: #25aeee none repeat scroll 0 0;
}

.social-widget ul li.s_youtube a {
  background: #c32e2e none repeat scroll 0 0;
}

.social-widget ul li.s_dribbble a {
  background: #c93292 none repeat scroll 0 0;
}

.social-widget ul li a:hover {
  background: #fff none repeat scroll 0 0;
  -webkit-box-shadow: 0 0 3px #212121;
  box-shadow: 0 0 3px #212121;
  color: #212121;
}

.post-widget ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.post-widget ul li.s_post {
  border-bottom: 1px solid #dfdfdf;
  display: block;
  margin-bottom: 20px;
  overflow: hidden;
  padding-bottom: 20px;
  position: relative;
}

.post-widget ul li .post-tumb {
  height: 80px;
  width: 80px;
}

.post-widget ul li .post-tumb img {
  height: 100%;
  width: 100%;
}

.post-title-and-date h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

.post-title-and-date a {
  margin: 0;
}

.single-sidebar-widget .post-meta {
  margin-bottom: 0;
}

/*==============================
    14. SINGLE BLOG PAGE
================================*/

.comment-meta h5 {
  color: #1a1a1a;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.comment-meta h5 span a {
  color: #c19474;
  float: right;
}

.comment-meta h5 span i {
  margin-right: 5px;
}

.comment-meta h5 span a:hover {
  color: #1a1a1a;
}

.comment-box input,
.comment-box textarea {
  border: 1px solid;
  display: block;
  margin-bottom: 30px;
  max-height: 100px;
  padding: 5px 10px;
  width: 100%;
}

.comment-box input:focus,
.comment-box textarea:focus {
  border-color: #c19474;
}

.comment-box button {
  background: #fff none repeat scroll 0 0;
  border: 1px solid;
  color: #000;
  letter-spacing: 1px;
  margin: 0 0 30px;
  padding: 8px 20px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.comment-box button:hover {
  background: #c19474 none repeat scroll 0 0;
  border-color: #c19474;
  color: #fff;
}

/*-----------------------------
    CLASSIC STYLE
------------------------------*/

.style-classic .about-area::after,
.style-classic .about-area::before,
.style-classic .menus-area::after,
.style-classic .menus-area::before,
.style-classic .team-area::after,
.style-classic .team-area::before,
.style-classic .gallery-area::after,
.style-classic .footer-area::after,
.style-classic .mainmenu-area::after {
  display: none;
}

/*----------------------------------
    WELCOME TEXT AREA
-----------------------------------*/

.top-area-bg {
  background: transparent / cover;
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.top-area-bg::before {
  background: transparent;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.welcome-text-area {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 0px; /* Ajuste para mover o texto mais para cima */
  padding-bottom: 210px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 3;
}

.welcome-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.welcome-text h2 {
  font-family: "Dancing Script", cursive;
  font-size: 70px;
  text-transform: capitalize;
}

.welcome-text h1 {
  font-size: 60px;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 25px;
}

.welcome-text h1 span.hero-text {
  font-weight: 700;
}

/* Espaçamento adicional para evitar sobreposição */
#about {
  margin-top: 50px; /* Espaço entre as seções */
  padding-top: 30px; /* Ajuste interno */
}

/* Responsividade para telas menores */
@media screen and (max-width: 768px) {
  .welcome-text h1 {
    font-size: 200px; /* Ajusta tamanho para telas menores */
  }

  .welcome-text h2 {
    font-size: 4.5vw;
  }

  .welcome-text p {
    font-size: 2.5vw;
  }

  .welcome-text-area {
    min-height: 400px; /* Ajuste de altura mínima para dispositivos menores */
  }

  #about {
    margin-top: 20px;
    padding-top: 30px;
  }
}
/*---------------------------------
    COOKING EFFECT
-----------------------------------*/

.Background {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.Background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.5),
    transparent 50%,
    rgba(0, 0, 0, 0.5)
  );
}

.cooking-effect .top-area-bg::before {
  z-index: 1;
}

/*----------------------------------
    HOME ALT
-----------------------------------*/

.home-alt-two .team-member-img {
  border-radius: 50%;
  overflow: hidden;
}
.home-alt-two .member-social-bookmark {
  height: auto;
  left: 50%;
  margin: 0;
  opacity: 0;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
}
.home-alt-two .member-social-bookmark li {
  display: inline-block;
  margin: 0 5px;
}
.home-alt-two .single-team-member:hover .member-social-bookmark {
  left: 0;
  opacity: 1;
}

.home-alt .promotions-img {
  position: relative;
}
.home-alt .promotions-img::after {
  background: #000000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.home-alt .single-promotions:hover .promotions-img::after {
  opacity: 0.5;
}
/*==================================
        END OF MAIN STYLESHEET
====================================*/