@import url("https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;700&family=Montserrat:wght@500&display=swap");

 @font-face {
     font-family: "AvenirNextLTPro-DemiCn";
     src: url("font/AvenirNextLTPro-DemiCn.woff") format("woff");
     font-weight: normal;
     font-style: normal
 }

 @font-face {
     font-family: "AvenirNextLTPro-Regular";
     src: url("font/AvenirNextLTPro-Regular.woff") format("woff");
     font-weight: normal;
     font-style: normal
 }

 @font-face {
     font-family: "AvenirNextLTPro-Demi";
     src: url("font/AvenirNextLTPro-Demi.woff") format("woff");
     font-weight: normal;
     font-style: normal
 }

 @font-face {
     font-family: "AvenirNextLTPro-BoldCn";
     src: url("font/AvenirNextLTPro-BoldCn.woff") format("woff");
     font-weight: normal;
     font-style: normal
 }

 @font-face {
     font-family: "AvenirNextLTPro-Cn";
     src: url("font/AvenirNextLTPro-Cn.woff") format("woff");
     font-weight: normal;
     font-style: normal
 }

 @font-face {
     font-family: "AvenirNextLTPro-Bold";
     src: url("font/AvenirNextLTPro-Bold.woff") format("woff");
     font-weight: normal;
     font-style: normal
 }

 * {
     box-sizing: border-box;
     font-family: "AvenirNextLTPro-Regular";
 }

 body {
     margin: 0;
     min-height: calc(100vh - 35px);
     position: relative;
 }

 a {
     color: #fff;
     text-decoration: none;
 }

 header {
     text-align: center;
 }

 .logo {
     max-width: 300px;
     margin: auto;
 }

 .logo img {
     width: 100%;
     max-width: 300px;
 }

 .menu {
     background-color: #49af48;
 }

 .menu a {
     color: #fff;
     text-decoration: none;
     font-family: "AvenirNextLTPro-Bold";
     display: block;
     padding: 1rem;
 }

 .menu a:hover {
     background-color: #fff;
     color: #49af48;
     transition: background-color, color 0.3s ease-in-out;
 }

 .menu ul {
     list-style: none;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
     text-transform: uppercase;
     padding: 0;
 }

 main {
     padding-bottom: 20px;
 }

 .programacao {
     width: 100%;
     max-width: 1200px;
     min-width: 300px;
     margin: 0 auto;
     padding: 0 1rem;
 }

 .programacao img {
     width: 100%;
 }

 main h2 {
     text-align: center;
     text-decoration: underline;
     color: #1b598e;
     font-family: "AvenirNextLTPro-Bold";
 }

 .galeria {
     max-width: 700px;
     margin: 0 auto;
     width: 100%;
 }

 .galeria img {
     width: 100%;
 }

 .restaurantes {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     justify-content: center;
     align-items: center;
     gap: 2rem;
 }

 .restaurantes .item {

     width: 100%;
     padding: 0 1rem;
     box-shadow: 4px 4px 5px 0px #ccc;
 }

 .restaurantes h3,
 .restaurantes strong {
     color: #49af48;
 }

 .programacao>h3 {
     color: #fff;
     padding: 0.4rem 0.7rem;
     font-size: 24px;
     background-color: #49af48;
 }

 .restaurantes a {
     background-color: #49af48;
     color: #fff;
     border: 1px solid #49af48;
     text-decoration: none;
     display: block;
     text-align: center;
 }

 .restaurantes a:hover {
     color: #49af48;
     background-color: #fff;

 }

 footer {
     background-color: #00568b;
     color: #fff;
     display: grid;
     grid-template-columns: 1fr 1fr;
     justify-content: center;
     align-items: center;
     padding: 1rem;
     /* position: absolute; */
     /* bottom: -35px; */
     width: 100%;
     margin-top: 35px;
 }

 .f_right {
     text-align: right;
 }

 .f_right a {
     text-decoration: none;
     padding: 0.4rem;
 }

 @media screen and (max-width: 700px) {
     .menu ul {
         display: block;
     }

     .logo {
         max-width: 250px;
         margin: auto;
     }

     .menu a {
         font-size: 14px;
     }

 }